リリースしてから放置していたAlexaスキル「今日の名画」ですが、なんとスマートスピーカーメディアのsmartio.lifeさんに掲載されました!
APL詳しくなったのでいろいろ改善したいなあ。
リリースしてから放置していたAlexaスキル「今日の名画」ですが、なんとスマートスピーカーメディアのsmartio.lifeさんに掲載されました!
APL詳しくなったのでいろいろ改善したいなあ。
Alexa(Amazon製のAIアシスタント)のスキル開発にハマってます。
スキルというのはスマホのアプリみたいなもので、スキル単位で有効化ができます。有効化はスマホで言うところのアプリのインストールです。
ニュースを聞いたりゲームをしたりタイマー機能や筋トレアシスタントなど様々なスキルが開発されています。
僕は昨年の11月末ごろにAlexaの開発を始めました。そのきっかけは、年末に行われたキャンペーンでした。
スキルを複数開発すると最大でEcho Showがもらえるというもの。パーマリンクがないため、smartio.lifeさんの記事を貼ります。
今日の名画というスキルは割とちゃんと作りました。地味に多言語対応もしています。それ以外は練習用みたいなもので、あまり実用性がないように思えます。
結果としてEcho ShowとTシャツとタンブラーをいただくことができました!
AlexaのTシャツとタンブラーをゲットしました!Echo Showも明日もらえる! pic.twitter.com/buaRBxGdzt
— ど鍋 (@do7be) February 9, 2019
無料でゲットした pic.twitter.com/0ECMLW0Lsu
— ど鍋 (@do7be) February 10, 2019
また、年末に参加したAlexa Dev Summitにて登壇者の方からのクイズに答えた結果Alexaの靴下をゲットしました!
クイズに答えてAlexaロゴが入った靴下ゲットした! #AlexaDevSumi pic.twitter.com/6phKwKRG3V
— ど鍋 (@do7be) December 14, 2018
Echo Showがもらえるキャンペーンに申し込むにはとにかく4つスキルを作らなくてはいけなかったため、完成度の低いスキルをいくつか作ってしまいました。
しかし、それぞれのスキルで新たなAPIを試すことができたり、審査ではどういう点で指摘されるのかなどの知見を貯めることができました。
また記事を書きますが、今の所はNode.js8.10でTypeScriptをgulpでビルドしています。このへんのベストプラクティスもまだこれといったものがないのもおもしろいですね。
VUI(Visual User Interface)にはポテンシャルを大いに感じています。1回起動して楽しめるだけのものではなく、もっと人々の生活に組み込めるようなスキルを開発していきたいです。
会社のアドベントカレンダーでStorybookの運用について記事を書きました。
チームごとに運用で重視しているものや担保したいことが異なり、それぞれ運用してみて溜まってきた知見を共有したり相談し合えるのがいい環境かなと思います。
Storybook出てきてから社内的にUIの意識高まった気がするのでうれしいです。
数ヶ月前にこの記事を読んでから影響されてサンドイッチを作っています。
だいたい毎朝、週3くらいで夜もサンドイッチ。
この頃からクッキングシートで包装するようになった
だいたいレギュラーは玉ねぎのマリネ、レタス、ピーマン、ブロッコリー、スライスチーズ、ビアソーセージ。簡単なので。
パンはよくライ麦パンにしてる。
包み方はこれをアレンジしたものでやってる
ボリュームのあるサンドイッチの包み方 ~ これでこぼさずに食べられる♪ | 館長の台所
サンドイッチ作るようになってからスーパーで弁当買ってくる回数はかなり減ったので良いと思う。
6枚切り食パン2枚なので食いすぎないし野菜も取れるのが結構良いと思う。
あと前日の晩に玉ねぎのマリネとか野菜切ったりしてタッパーに入れとく作業が楽しい。
来年はもっといろんな具にチャレンジしようと思います。
2,3年ほど前に作った LGTM-HUB というしょぼいサービスをふと振り返ったら毎月$12ほどかかっていることに気づきました。さすがに月数百PVほどのサービスにここまでかけるのもどうかなと思い、インフラ構成を変えて運用費を削減しようかなと思いました。ついでにデザインも新しくしました。
毎月約$12かかっていたサービス運用費が毎月約$1になりました。
当初のインフラ構成はこんな感じでした
アプリケーションはこんな感じ
とりあえずEC2は金かかるなと思い、Herokuに移行することにしました。ついでにhttps化と古いライブラリの廃止と全体的なリファクタリングを行いました。
その結果、月$7まで削減することができました。
アプリケーション構成は以下のようになりました。
プルリクはこんな感じ。ほぼ2年ほど構成を変えていなかったので直す箇所が大量にあってしんどかった。
月$7でもちょっと高く感じたので、さらに費用削減するべくAWSのLambdaに移行することにしました。SPAをLambdaで動かす事例はちょいちょい見かけていたので。
とはいえ、Expressで書かれたアプリケーションを移行するのめんどいなと思っていたら AWS Serverless Expressという便利そうなものを発見。
aws-serverless-expressでlambda化
若干面倒だった箇所として、JSなどの静的ファイルとかはアップロードしたLambdaのzipファイルを基に配信するため、Expressで専用のパスを作ってあげて1回受けるようにしました。このへん
アプリケーション構成としてはHerokuのときとほとんど変わりませんでしたが、インフラ的には大きく変わりました。
RedisのままだとElastiCacheとかでアホみたいに金かかる感じだったのでDynamoDBを利用することに。開発環境ではDynamoDBのDockerイメージを用いました。
インフラだけでなくアプリケーションコードも大幅リニューアルできたのですが、フロントのクオリティアップやバックエンドのリファクタリングなど、まだまだやりたいことがたくさんあってやりきった感はまだないです。
毎月そんなにPVはなくとも使ってくださるユーザーのために運営し続けたくはなるのですが、長期間となると運営費がバカにならないので安く抑えられるならできるだけ工夫して安くしたほうがいいかなと思いました。
スクロールバー消したくてこれを読んでいたら固定幅(高さ)しかできなさそうだったのでいろいろ模索してみた。
ホバーするとliのサイズが変わる。
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; }
こっちはなぜか同僚が作った自動で高さが変わるようにしたデモ。