do7be.exports

エッセンシャルガチ草トメィトゥ

夏休みだったのでFlutterを勉強してみた

普段はWEBフロントエンドやAmazon EchoのAlexaスキルなんかを作っていますが、ちょいちょい気になっていたFlutterについて勉強してみました。夏休みの自由研究的なやつです。

1日目

Flutterの公式ページのチュートリアルをいくつかやってみた。

f:id:do7be:20190818161146g:plain

2日目

この日の作業時間は1時間くらい。下部にタブをつけてみた。

f:id:do7be:20190818161115g:plain

3日目

Youtube検索をして動画情報を出すようにしてみた。

f:id:do7be:20190818161206p:plain

4日目

動画プレイヤーを入れて再生できるようにしてみた。AndroidではうごくのだがiOSではうまくうごかず…。

所感

毎日ガツッと時間取れたわけではないのでちょっとしか触れなかったけど感想。

  • コード書くだけでアプリが動くのと環境構築の簡単さがよかった
  • dart初体験だったけどけっこう書きやすかった
  • pub.devにあるライブラリを見る限りバグりまくってるし、まだまだ発展途上でおもろそうだった

これからもちょいちょい触ってみようかなと思いました。

Alexaスキル開発にハマってます

Alexa(Amazon製のAIアシスタント)のスキル開発にハマってます。

スキルというのはスマホのアプリみたいなもので、スキル単位で有効化ができます。有効化はスマホで言うところのアプリのインストールです。

ニュースを聞いたりゲームをしたりタイマー機能や筋トレアシスタントなど様々なスキルが開発されています。

www.amazon.co.jp

僕は昨年の11月末ごろにAlexaの開発を始めました。そのきっかけは、年末に行われたキャンペーンでした。

スキルを複数開発すると最大でEcho Showがもらえるというもの。パーマリンクがないため、smartio.lifeさんの記事を貼ります。

smartio.life

公開したスキル

f:id:do7be:20190210192110p:plain

f:id:do7be:20190210192121p:plain

https://www.amazon.co.jp/s/ref=nb_sb_noss?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&url=search-alias%3Dalexa-skills&field-keywords=do7be

今日の名画というスキルは割とちゃんと作りました。地味に多言語対応もしています。それ以外は練習用みたいなもので、あまり実用性がないように思えます。

もらえたもの

結果としてEcho ShowとTシャツとタンブラーをいただくことができました!

また、年末に参加したAlexa Dev Summitにて登壇者の方からのクイズに答えた結果Alexaの靴下をゲットしました!

所感

Echo Showがもらえるキャンペーンに申し込むにはとにかく4つスキルを作らなくてはいけなかったため、完成度の低いスキルをいくつか作ってしまいました。

しかし、それぞれのスキルで新たなAPIを試すことができたり、審査ではどういう点で指摘されるのかなどの知見を貯めることができました。

また記事を書きますが、今の所はNode.js8.10でTypeScriptをgulpでビルドしています。このへんのベストプラクティスもまだこれといったものがないのもおもしろいですね。

VUI(Visual User Interface)にはポテンシャルを大いに感じています。1回起動して楽しめるだけのものではなく、もっと人々の生活に組み込めるようなスキルを開発していきたいです。

アドベントカレンダーでStorybookの記事を書きました

会社のアドベントカレンダーでStorybookの運用について記事を書きました。

inside.pixiv.blog

チームごとに運用で重視しているものや担保したいことが異なり、それぞれ運用してみて溜まってきた知見を共有したり相談し合えるのがいい環境かなと思います。

Storybook出てきてから社内的にUIの意識高まった気がするのでうれしいです。

サンドイッチをほぼ毎朝作っています

barzam154.hatenablog.com

数ヶ月前にこの記事を読んでから影響されてサンドイッチを作っています。

だいたい毎朝、週3くらいで夜もサンドイッチ。

時系列でまとめてみた

f:id:do7be:20181209231023j:plain
初めて作ったやつ

f:id:do7be:20181209232303j:plain
生ハムとかたまごとか

f:id:do7be:20181209231246j:plain
パプリカとか

f:id:do7be:20181209231307j:plain
ローストチキン

この頃からクッキングシートで包装するようになった

f:id:do7be:20181209231429j:plain
コールスローぽい

f:id:do7be:20181209234334j:plain
サンマ缶とみじん切り玉ねぎのやつ

f:id:do7be:20181209234343j:plain
サンマのやつ改

f:id:do7be:20181209231633j:plain
ウインナーとスクランブルエッグ

f:id:do7be:20181209234318j:plain
てりたま

f:id:do7be:20181209231724j:plain
てりマヨ

f:id:do7be:20181209233930j:plain
アボカドサーモン

f:id:do7be:20181209233938j:plain
アボカドハム

f:id:do7be:20181209234004j:plain
ビアソーセージ、ブロッコリーとたまごのやつ

f:id:do7be:20181209234013j:plain
ブロッコリーサーモン

f:id:do7be:20181209234021j:plain
ハンバーグ

だいたいレギュラーは玉ねぎのマリネ、レタス、ピーマン、ブロッコリー、スライスチーズ、ビアソーセージ。簡単なので。

パンはよくライ麦パンにしてる。

包み方はこれをアレンジしたものでやってる

ボリュームのあるサンドイッチの包み方 ~ これでこぼさずに食べられる♪ | 館長の台所

所感

サンドイッチ作るようになってからスーパーで弁当買ってくる回数はかなり減ったので良いと思う。

6枚切り食パン2枚なので食いすぎないし野菜も取れるのが結構良いと思う。

あと前日の晩に玉ねぎのマリネとか野菜切ったりしてタッパーに入れとく作業が楽しい。

来年はもっといろんな具にチャレンジしようと思います。

WEBサービス運用費を1/12に削減した

2,3年ほど前に作った LGTM-HUB というしょぼいサービスをふと振り返ったら毎月$12ほどかかっていることに気づきました。さすがに月数百PVほどのサービスにここまでかけるのもどうかなと思い、インフラ構成を変えて運用費を削減しようかなと思いました。ついでにデザインも新しくしました。

f:id:do7be:20180819161131p:plain

どれくらい安くなったのか

毎月約$12かかっていたサービス運用費が毎月約$1になりました。

移行の内容

当初の構成

当初のインフラ構成はこんな感じでした

  • EC2(t2.micro)
    • サーバ費用削減のためフロントのnginxでサブドメインのNodeサーバにproxyする構成だったが、当時は1サービスにしかproxyしてなかったので意味なかった
    • 履歴のデータはオンメモリで持ってた
  • Route53

アプリケーションはこんな感じ

  • express
  • jQuery
  • React.js
  • socket.io
  • ZeroClipboard
  • gulp

AWS→Heroku

とりあえずEC2は金かかるなと思い、Herokuに移行することにしました。ついでにhttps化と古いライブラリの廃止と全体的なリファクタリングを行いました。

その結果、月$7まで削減することができました。

  • Heroku(カスタムドメインhttpsで利用したかったのでHobby)
  • Route53
  • Redis(Heroku add-on)

アプリケーション構成は以下のようになりました。

  • express
  • typescript
  • React.js
  • Redux
  • clipboard.js(ZeroClipboardはFLASH使ってた)
  • webpack
  • 開発環境をDocker化

プルリクはこんな感じ。ほぼ2年ほど構成を変えていなかったので直す箇所が大量にあってしんどかった。

AWS Lambda化

月$7でもちょっと高く感じたので、さらに費用削減するべくAWSのLambdaに移行することにしました。SPAをLambdaで動かす事例はちょいちょい見かけていたので。

とはいえ、Expressで書かれたアプリケーションを移行するのめんどいなと思っていたら AWS Serverless Expressという便利そうなものを発見。

aws-serverless-expressでlambda化

若干面倒だった箇所として、JSなどの静的ファイルとかはアップロードしたLambdaのzipファイルを基に配信するため、Expressで専用のパスを作ってあげて1回受けるようにしました。このへん

アプリケーション構成としてはHerokuのときとほとんど変わりませんでしたが、インフラ的には大きく変わりました。

  • Lambda
  • ApiGateway
  • Route53
  • DynamoDB

RedisのままだとElastiCacheとかでアホみたいに金かかる感じだったのでDynamoDBを利用することに。開発環境ではDynamoDBのDockerイメージを用いました。

費用内訳

  • Route53: 約$1
  • その他: $0〜$0.5

感想

インフラだけでなくアプリケーションコードも大幅リニューアルできたのですが、フロントのクオリティアップやバックエンドのリファクタリングなど、まだまだやりたいことがたくさんあってやりきった感はまだないです。

毎月そんなにPVはなくとも使ってくださるユーザーのために運営し続けたくはなるのですが、長期間となると運営費がバカにならないので安く抑えられるならできるだけ工夫して安くしたほうがいいかなと思いました。