do7be.exports

寿司の話かエンジニアリングの話

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はなくとも使ってくださるユーザーのために運営し続けたくはなるのですが、長期間となると運営費がバカにならないので安く抑えられるならできるだけ工夫して安くしたほうがいいかなと思いました。

スクロール領域からスクロールバーを消す(可変高さ対応)

qiita.com

スクロールバー消したくてこれを読んでいたら固定幅(高さ)しかできなさそうだったのでいろいろ模索してみた。

ホバーするとliのサイズが変わる。

jsfiddle.net

解説

ulの親要素にoverflow: hidden;を設けてあげてulにネガティブマージンをつけてあげると実現できる。

コード

<p>横スクロールできるけどスクロールバーを非表示にしてる</p>
<div>
  <ul>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>  
  </ul>
</div>
div {
  overflow: hidden;
}

ul {
  display: flex;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 20px;
  margin: 0 0 -20px;
  width: 400px;
  background-color: #ddd;
}

li {
  margin: 0 4px;
  height: 100px;
  background-color: #ccc;
  transition: 0.2s height;
}

li:nth-child(2) {
  background-color: #f00;
}

li:nth-child(2):hover {
  height: 200px;
}

li:nth-child(4) {
  background-color: #0ff;
}

li:nth-child(4):hover {
  height: 50px;
}

余談

こっちはなぜか同僚が作った自動で高さが変わるようにしたデモ。

jsfiddle.net

横スクロール出来るリストを作るときのCSSについて

多くの商品などの画像を並べるとき、↓のようなリストで実現することがある。僕は嫌いなのだがスマホタブレット対応を考えると横スクロールに対応する必要がある。こんなリストをCSSで組もうとするといくつか方法が考えられると思うのでまとめておいた。

f:id:do7be:20171003210953p:plain

各実装方法

inline-blockによる実装

これは最も簡単で、最近のブラウザでなくてもレンダリング出来ることが強み。しかもデモにあるようにリストの両端にマージンを付与することが出来る。このマージンは単にデザインに必要という場合だけでなく、カルーセルだった場合にボタンを置く領域にもなる。個人的にはこれをおすすめしたい。

inline-block方式

methodと書いてあるところがミソ

flexによる実装

これも簡単なのでおすすめ。ただ、IE9以下だとレンダリングできず、両端にマージンをつけることが出来ない。許容出来れば良いと思う。

flex方式

tableによる実装

これはあまり使わない。border-spacingで間隔を空けるが両端のマージンについては対応が困難。一応両端のtdで実現はできそう。td自体にはwidthを指定できないのでtdの子要素で指定する必要がある。正直考えることが多いしコードもでかくなるので嫌い。

table方式

grid-layoutによる実装

リスト内の要素数が固定の場合は実装できそう。やったことないけど。

まとめ

inline-blockによる実装かflexによる実装がおすすめ。他にも簡単でレンダリングが崩れない実装があるかもしれないので色々試して欲しい。