Vue + Amplify + AppSync で簡単なチャットを作る
前にも似たようなものを作った気がするけど AWS Summit 2019 で感化されたので改めて作ってみた。
作り方
vue cli でアプリケーションを作った後、AWS Amplify CLI でAPIを組み込み。
データベースは DynamoDB で GraphQL でデータを取得している。
GraphQL へのスキーマは最初 Amplify のCLI で定義して編集は AppSync のコンソールでいじる感じ。
GrapyQLのサブスクリプションを使えばデータベースへの変更を取得できるので、それで変更を反映している。
最後に Vue で見た目整えて終わり。
課題
作ってから気づいたけどソート順は保証されないっぽいので Vue側でソートしてやる必要がある？ それか GraphQL でできるんだろうか。
Helixキーボード を作った
前回書いた通りMint60のスレーブ側の認識が怪しくなってきた。
そんな中、相も変わらず遊舎工房を眺めていたら惚れ込んでしまったHelix。
Helixはロープロファイルという薄めのキースイッチを選択することができ、格子状の配列で見た目も洒落ている。
ということで購入して作ってみた。
トラブルシューティングの時間も含めてこれまた10時間くらいかなぁ。
Helixにはロープロファイルスイッチ以外にもオプションが選択できて、
-
CherryMX or ロープロファイル
-
4列 or 5列
-
バックライトLED or UnderGlow LED
等の組み合わせで違った構成のキーボードを組み立てることができる。
今回は実装が難しいと言われているバックライトLEDは選択せず、Mint60と同じくLEDテープを本体下面に貼るUnderGlowモデルにしたので組み立て自体はむしろMint60よりサクサク進んだ。
ところが、組み立て終えて動作確認してみるとキーが5つほど反応しない。。
テスターで導通を確認してみると、反応しないキーだけ音が鳴るんだよなー。
ビルドガイドにも通常キースイッチのランドにはんだが乗らないよう注意と書いてあったのでそれが原因かなと思い、ハンダ吸い取り器でハンダを吸っては付け、吸っては付け、肉眼ではわかりずらくて
そんなことを繰り返して5つとも正常に動作するように。
右側のLEDが光ってないけど、もういいやｗ
というわけでこの記事はHelixで書いている、わけではない...
無刻印 + 格子側配列の組み合わせに全然慣れない。ブラウザでできるタイピング練習とかたまにやってるけどまだまだ。
最初はHelixで頑張ってポチポチ書いていたのだけど、キーボードが思う通り打てないと思考のスピードが留まってしまうようで、中学生の書いた文章みたいになってしまったのでボツ。
とはいえHelix、カッコいいのでもう一台作りたい。
次はバックライトLED + 4列構成に挑戦したいなー。
キーボード沼に片足浸かっている
先日、mint60が完成してテンションが挙がったのもつかの間、ここ数日右側のキーボードの入力が途切れ途切れになるようになってしまった。。
何がいけないのか。USBを挿すとLEDは光るのでTSRRコネクタ周りがおかしいのかもしれない。
と思ってあれこれ試してみると、マスター側のTSRR基部の接続に問題があることがわかってきた。
この基部の部分を上に気持ち持ち上げてみるとスレーブ側を認識するというｗ
ということで机の上にあったデザインナイフを下に置いてやったら安定した。
もうこれでいいや。
ところで、気がつくと遊舎工房を眺めて次のキーボードを物色している自分がいる。
しかもmint60以外のキーボードなんだよなー。
当初は環境毎にタイプ感が変わるのが嫌だと言っていたのに様々な自作キーボードに目移りしているこれが、、、沼？
気になっているのは以下の2つ。
Helix
ロープロファイルといってキースイッチが薄いのが魅力。
MacBookのめちゃくちゃ浅い押し心地とmint60の深い押し心地を行ったり来たりするのはなかなかたいへんなので。
Let’s Split
Let's Split はこの手の自作分離キーボードの草分け的な存在らしいので一度くらい作ってみてもいいかなーと。それに格子配列の四角いデザインがカッコいい。
けど40%キーボードなのでキーの数が足りないかも（=レイヤーを使いこなさないといけない=キーボードに体を合わせないといけない）
とりあえずこちらをポチった。
mint60を組み立てた
GW中の課題として自作キーボードを作った。
いわゆる "この文章はそのキーボードで書いています" というやつです。
はんだ付けなんて全くやったことが無かったので、はんだ付け練習キットを買って練習をした上で挑戦。
連休入ってから作業初めて三日間、10時間もかからなかったと思う。
組み立て方とかハマりポイントは「mint60 組み立て」でぐぐるとたくさん出てくるので感想だけ書く。
（キーキャップはまだ全部付けていないです）
キースイッチ
オーソドックスな赤軸にした。
キーの押し心地とかにあまり気にしたことがなかったし、
ただ最近のMacのキーの押し心地は好きじゃないけど、硬すぎるのも嫌だなぁと。
他のキースイッチも一個ずつ同梱してくれているのは嬉しい。
ProMicroへの書き込み
めんどうくさい。。
キーマップ設定いじって書き込んで、ってやるの辛い。
あと、ProMicroの基部はお作法通りエポキシ系接着剤で固定したんだけどやっぱり抜き差しするときは怖い。
レイヤー機能とか色々試してみたいんだけど、この面倒くささのおかげで挫折しそう。
猫
うちには猫が二匹いるんだけど、ちょくちょく邪魔をしにきて大変だった。
ハンダ付けのとき以外は膝の上に乗せて作業したりしていたので、ケースに毛が付いたりしてこれはもう仕方ないかなという感じ。
不具合とか
ハンダ付け忘れが一箇所あった以外は動作はしている。
ただ、キーを押したときの挙動が数箇所おかしい（しかもたまにしか発生しない）ことがある。
- Enterキーを数回押すと長押し状態になって延々と入力されてしまう
- 右の最下段のキーを押すと、例えばmキーを押すと"ujm" といった感じで縦に並んでいるキーが同時に入力されたりする
ProMicroへの書き込み直後に変な挙動になることが多い印象。
あと、スタビライザーの音がウルサイという意見があるようだけど自分は気にならないかな。確かに他のキーと若干音が違うので気になる人はいるだろうなぁという感じ。
今後
自分にとっては同じ使い心地のキーボードがいつでもどこでもで使えることが大事なので、同じmint60を買って会社用を作りたいかなーと。
ただ遊舎工房見てると他にもカッコいいキーボードが沢山あるので心動いてしまう。。。これが沼か。
遠鉄電車の次の発車時間を教えてくれるAlexaスキルを公開した
ふっと思いたって、2週間ほど前に桜も見に行かずに作っていたAlexaスキルの申請が通って公開された。
浜松市 遠鉄電車 次の赤電発車時刻【非公式】
開発には10数時間くらいしかかかってなくて、機能もほとんど無いのだけど、ちゃんと公開できた。
スキル名について
「次の赤電」
当初、ウェイクワード（Alexaに話しかけるときに名前）を「赤電」にしていたのだけど、この「赤電」という名称は遠鉄電車の公式スキルだと誤解される恐れがあるとのことと、呼び出し名は2語以上である、との要件に違反してしまったため。
まぁ言いづらいとは思う。
Alexaスキルと対話すること
Alexaをはじめスマートスピーカーのスキルは対話による操作が前提だけど、音声による操作って結構面倒くさい。
僕が毎日使ってるスキルで、駄目だなぁと思うのはRadikoのスキルなんだけど、
「アレクサ、ラジコでJ-WAVEをつけて」
「ラジコでJ-WAVEを再生しますか？」
「はい」
いや、いちいち確認しなくていいよ。。
つまり、変に丁寧にやりとりすると逆にストレスになるんだなぁと使ってて感じている。
だから今回作ったスキルは徹底的に対話を少なくしてみた（機能作り込むよりとっととリリースしたかったのもある）
インテント（対話の仕方）は以下の3つのみ。
「アレクサ、次の赤電で新浜松駅の時間を教えて」
「アレクサ、次の赤電で最寄り駅を登録」
「アレクサ、次の赤電で時間を教えて」
「最寄り駅を登録」と言うとデフォルトの駅を登録できる。
(実際のやりとり)
「アレクサ、次の赤電で最寄り駅を登録」
「はい、登録する駅名を教えてください」
「新浜松」
「新浜松駅 を登録しました」
駅名の確認もしないし、登録した駅の削除もできないし上書きのみ。複数登録もできない。
だけどこれでいいと思っている。
朝の支度してバタバタしているときに何時までに駅に着けばいいんだっけ？「アレクサ、次の赤電で時間を教えて」あーあと5分しかない、急がないと・・・！
という使い方ができればいい。
（「あと〜分です」って教えてくれる機能は後で付けようっと）
今のところ自分しか使っていないっぽい！！
AWS CodePipeline で Alexaスキルをデプロイ
良さげなチュートリアルを見つけた。
チュートリアル: Amazon Alexa Skill をデプロイするパイプラインを作成する - CodePipeline
ちょうど本業の方でもCodePipelineを触ったので良い機会だと思って作りかけのAlexaスキルを自動デプロイする設定にしてみた。
基本的にこのチュートリアルの通りで、テストやビルドは設定せずにデプロイのみ。ソースプロバイダはCodeCommitではなくGithubに。
指定したGithubのリポジトリへプッシュするとそれを検知して CodePipeline が実行されてスキルがデプロイされる。
便利。
今まではコードを直して ask deploy してコンソールから動作確認してたのだけど、
この辺もおいおい自動化していきたい所存。
