YouTube のコメントをドラクエ風に表示する
Requirements
- Chat v2.0 Style Generator
- Use default css.
- PixelMplus
PixelMplus10-Regular.ttfMust be installed.
Additional CSS
/* Additional CSS. */ yt-live-chat-text-message-renderer #author-name, yt-live-chat-text-message-renderer #message, yt-live-chat-text-message-renderer #message * { font-family: "PixelMplus10"; } yt-live-chat-item-list-renderer #item-scroller { border: 2px solid #fff; border-radius: 4px; } yt-live-chat-text-message-renderer, yt-live-chat-legacy-paid-message-renderer { overflow: hidden; white-space: nowrap; animation: typing 1s; animation-fill-mode: both; } @keyframes typing { from { width: 0; } to { width: 100%; } }
Probrem
- Multiline text.
It's like this
Caution: This image is applying a mosaic.
SSGはスーパーサイヤ人ゴッドの略ではない
| Rendering mode | Deployment target | Mode | 備考 |
|---|---|---|---|
| Universal | Server | SSR | |
| Universal | Static | SSG | |
| SPA | Server | SPA | dist が勝手にできてた |
| SPA | Static | SPA | generate が必要だった |
Universal x Server (SSR)
yarn build
$ yarn build
yarn run v1.22.10
$ nuxt build
ℹ Production build 23:30:00
ℹ Bundling for server and client side 23:30:00
ℹ Target: server 23:30:00
ℹ Using components loader to optimize imports 23:30:00
ℹ Discovered Components: .nuxt/components/readme.md 23:30:00
✔ Builder initialized 23:30:00
✔ Nuxt files generated 23:30:00
✔ Client
Compiled successfully in 57.24s
✔ Server
Compiled successfully in 9.05s
Hash: b37f16624616d5ea0e33
Version: webpack 4.46.0
Time: 57253ms
Built at: 2021/07/15 23:31:02
Asset Size Chunks Chunk Names
../server/client.manifest.json 12.4 KiB [emitted]
0c17bb7.js 6.58 KiB 4 [emitted] [immutable] components/tutorial
12066e4.js 1.93 KiB 5, 2 [emitted] [immutable] pages/index
16a8a54.js 211 KiB 1 [emitted] [immutable] commons/app
6e80df1.js 658 KiB 8 [emitted] [immutable] [big] vendors/app
8198d91.js 50.7 KiB 0 [emitted] [immutable] app
9a04a2f.js 837 bytes 2 [emitted] [immutable] components/card
LICENSES 407 bytes [emitted]
a16ac7b.js 2.34 KiB 7 [emitted] [immutable] runtime
afe68de.js 697 bytes 6 [emitted] [immutable] pages/inspire
c6fe9ab.js 1.85 KiB 3 [emitted] [immutable] components/nuxt-logo
img/buefy.4761382.png 10.7 KiB [emitted] [immutable]
+ 2 hidden assets
Entrypoint app = a16ac7b.js 16a8a54.js 6e80df1.js 8198d91.js
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
6e80df1.js (658 KiB)
Hash: 2f88b2148fe88bdcebe3
Version: webpack 4.46.0
Time: 9058ms
Built at: 2021/07/15 23:31:11
Asset Size Chunks Chunk Names
components/card.js 2.47 KiB 1 [emitted] components/card
components/nuxt-logo.js 5.89 KiB 2 [emitted] components/nuxt-logo
components/tutorial.js 7.13 KiB 3 [emitted] components/tutorial
pages/index.js 5.31 KiB 4, 1 [emitted] pages/index
pages/inspire.js 1.53 KiB 5 [emitted] pages/inspire
server.js 475 KiB 0 [emitted] app
server.manifest.json 635 bytes [emitted]
+ 6 hidden assets
Entrypoint app = server.js server.js.map
ℹ Ready to run nuxt start 23:31:11
Done in 76.31s.
yarn start
yarn start yarn run v1.22.10 $ nuxt start ╭──────────────────────────────────────────╮ │ │ │ Nuxt @ v2.15.7 │ │ │ │ ▸ Environment: production │ │ ▸ Rendering: server-side │ │ ▸ Target: server │ │ │ │ Memory usage: 20.9 MB (RSS: 91.5 MB) │ │ │ │ Listening: http://localhost:3000/ │ │ │ ╰──────────────────────────────────────────╯
Universal x Static (SSG)
yarn build
$ yarn build
yarn run v1.22.10
$ nuxt build
ℹ Production build 23:36:06
ℹ Bundling for server and client side 23:36:06
ℹ Target: static 23:36:06
ℹ Using components loader to optimize imports 23:36:06
ℹ Discovered Components: .nuxt/components/readme.md 23:36:06
✔ Builder initialized 23:36:06
✔ Nuxt files generated 23:36:06
✔ Client
Compiled successfully in 1.02m
✔ Server
Compiled successfully in 10.26s
Hash: 3f3db012d24c48157286
Version: webpack 4.46.0
Time: 61190ms
Built at: 2021/07/15 23:37:13
Asset Size Chunks Chunk Names
../server/client.manifest.json 12.5 KiB [emitted]
006c345.js 837 bytes 2 [emitted] [immutable] components/card
00def6b.js 55.3 KiB 0 [emitted] [immutable] app
35f6586.js 1.93 KiB 5, 2 [emitted] [immutable] pages/index
4f835b4.js 6.58 KiB 4 [emitted] [immutable] components/tutorial
59b0e20.js 212 KiB 1 [emitted] [immutable] commons/app
60d1fb0.js 1.85 KiB 3 [emitted] [immutable] components/nuxt-logo
LICENSES 407 bytes [emitted]
a4e72ff.js 697 bytes 6 [emitted] [immutable] pages/inspire
e8553bd.js 2.34 KiB 7 [emitted] [immutable] runtime
fdb07ed.js 658 KiB 8 [emitted] [immutable] [big] vendors/app
img/buefy.4761382.png 10.7 KiB [emitted] [immutable]
+ 2 hidden assets
Entrypoint app = e8553bd.js 59b0e20.js fdb07ed.js 00def6b.js
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
fdb07ed.js (658 KiB)
Hash: c551ba6b7cf582adcf68
Version: webpack 4.46.0
Time: 10266ms
Built at: 2021/07/15 23:37:23
Asset Size Chunks Chunk Names
components/card.js 2.47 KiB 1 [emitted] components/card
components/nuxt-logo.js 5.89 KiB 2 [emitted] components/nuxt-logo
components/tutorial.js 7.13 KiB 3 [emitted] components/tutorial
pages/index.js 5.31 KiB 4, 1 [emitted] pages/index
pages/inspire.js 1.53 KiB 5 [emitted] pages/inspire
server.js 477 KiB 0 [emitted] app
server.manifest.json 635 bytes [emitted]
+ 6 hidden assets
Entrypoint app = server.js server.js.map
ℹ Ready to run nuxt generate 23:37:23
Done in 81.97s.
yarn generate
$ yarn generate
yarn run v1.22.10
$ nuxt generate
ℹ Production build 23:37:43
ℹ Bundling for server and client side 23:37:43
ℹ Target: static 23:37:43
ℹ Using components loader to optimize imports 23:37:43
ℹ Discovered Components: node_modules/.cache/nuxt/components/readme.md 23:37:43
✔ Builder initialized 23:37:43
✔ Nuxt files generated 23:37:43
✔ Client
Compiled successfully in 56.50s
✔ Server
Compiled successfully in 9.12s
Hash: bca66b6c8cfee87710b5
Version: webpack 4.46.0
Time: 56504ms
Built at: 2021/07/15 23:38:43
Asset Size Chunks Chunk Names
../server/client.manifest.json 12.2 KiB [emitted]
0c17bb7.js 6.58 KiB 4 [emitted] [immutable] components/tutorial
1a04b20.js 1.93 KiB 5, 2 [emitted] [immutable] pages/index
4b79b95.js 2.34 KiB 7 [emitted] [immutable] runtime
9a04a2f.js 837 bytes 2 [emitted] [immutable] components/card
9eebd6b.js 1.43 KiB 0 [emitted] [immutable] app
LICENSES 407 bytes [emitted]
ada281b.js 212 KiB 1 [emitted] [immutable] commons/app
afe68de.js 697 bytes 6 [emitted] [immutable] pages/inspire
c6fe9ab.js 1.85 KiB 3 [emitted] [immutable] components/nuxt-logo
cf3ca1e.js 712 KiB 8 [emitted] [immutable] [big] vendors/app
img/buefy.4761382.png 10.7 KiB [emitted] [immutable]
+ 2 hidden assets
Entrypoint app = 4b79b95.js ada281b.js cf3ca1e.js 9eebd6b.js
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
cf3ca1e.js (712 KiB)
Hash: 9638647218958335d52c
Version: webpack 4.46.0
Time: 9126ms
Built at: 2021/07/15 23:38:52
Asset Size Chunks Chunk Names
components/card.js 2.47 KiB 1 [emitted] components/card
components/nuxt-logo.js 5.89 KiB 2 [emitted] components/nuxt-logo
components/tutorial.js 7.13 KiB 3 [emitted] components/tutorial
pages/index.js 5.31 KiB 4, 1 [emitted] pages/index
pages/inspire.js 1.53 KiB 5 [emitted] pages/inspire
server.js 477 KiB 0 [emitted] app
server.manifest.json 635 bytes [emitted]
+ 6 hidden assets
Entrypoint app = server.js server.js.map
ℹ Full static generation activated 23:38:52
ℹ Generating output directory: dist/ 23:38:52
ℹ Generating pages with full static mode 23:38:52
✔ Generated route "/" 23:39:00
✔ Generated route "/inspire" 23:39:00
✔ Client-side fallback created: 200.html 23:39:00
✔ Static manifest generated 23:39:00
Done in 80.28s.
yarn start
$ yarn start yarn run v1.22.10 $ nuxt start ╭───────────────────────────────────────╮ │ │ │ Nuxt @ v2.15.7 │ │ │ │ ▸ Environment: production │ │ ▸ Rendering: server-side │ │ ▸ Target: static │ │ │ │ Listening: http://localhost:3000/ │ │ │ ╰───────────────────────────────────────╯ ℹ Serving static application from dist/
SPA x Server (SPA)
yarn build
$ yarn build
yarn run v1.22.10
$ nuxt build
ℹ Production build 23:43:43
ℹ Bundling only for client side 23:43:43
ℹ Target: static 23:43:43
ℹ Using components loader to optimize imports 23:43:43
ℹ Discovered Components: .nuxt/components/readme.md 23:43:43
✔ Builder initialized 23:43:43
✔ Nuxt files generated 23:43:43
✔ Client
Compiled successfully in 57.91s
Hash: e9f60385377726b98d03
Version: webpack 4.46.0
Time: 57923ms
Built at: 2021/07/15 23:44:46
Asset Size Chunks Chunk Names
../server/client.manifest.json 12.4 KiB [emitted]
0c17bb7.js 6.58 KiB 4 [emitted] [immutable] components/tutorial
16a8a54.js 211 KiB 1 [emitted] [immutable] commons/app
419ce19.js 2.34 KiB 7 [emitted] [immutable] runtime
6788b58.js 1.93 KiB 5, 2 [emitted] [immutable] pages/index
6e80df1.js 658 KiB 8 [emitted] [immutable] [big] vendors/app
9a04a2f.js 837 bytes 2 [emitted] [immutable] components/card
LICENSES 407 bytes [emitted]
afe68de.js 697 bytes 6 [emitted] [immutable] pages/inspire
c6fe9ab.js 1.85 KiB 3 [emitted] [immutable] components/nuxt-logo
ec8f01b.js 50.9 KiB 0 [emitted] [immutable] app
img/buefy.4761382.png 10.7 KiB [emitted] [immutable]
+ 1 hidden asset
Entrypoint app = 419ce19.js 16a8a54.js 6e80df1.js ec8f01b.js
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
6e80df1.js (658 KiB)
ℹ Generating output directory: dist/ 23:44:46
ℹ Generating pages 23:44:46
✔ Generated route "/inspire" 23:44:46
✔ Generated route "/" 23:44:46
✔ Client-side fallback created: 200.html 23:44:46
Done in 68.09s.
yarn start
$ yarn start yarn run v1.22.10 $ nuxt start ╭──────────────────────────────────────────╮ │ │ │ Nuxt @ v2.15.7 │ │ │ │ ▸ Environment: production │ │ ▸ Rendering: client-side │ │ ▸ Target: server │ │ │ │ Memory usage: 18.6 MB (RSS: 89.5 MB) │ │ │ │ Listening: http://localhost:3000/ │ │ │ ╰──────────────────────────────────────────╯
SPA x Static (SPA)
yarn build
$ yarn build
yarn run v1.22.10
$ nuxt build
ℹ Production build 23:49:47
ℹ Bundling only for client side 23:49:47
ℹ Target: static 23:49:47
ℹ Using components loader to optimize imports 23:49:47
ℹ Discovered Components: .nuxt/components/readme.md 23:49:47
✔ Builder initialized 23:49:47
✔ Nuxt files generated 23:49:47
✔ Client
Compiled successfully in 58.49s
Hash: 0fcb3a0c397c8b4f5fa3
Version: webpack 4.46.0
Time: 58503ms
Built at: 2021/07/15 23:50:50
Asset Size Chunks Chunk Names
../server/client.manifest.json 12.3 KiB [emitted]
0b35f6f.js 50.9 KiB 0 [emitted] [immutable] app
0c17bb7.js 6.58 KiB 4 [emitted] [immutable] components/tutorial
16a8a54.js 211 KiB 1 [emitted] [immutable] commons/app
1c4bd71.js 2.34 KiB 7 [emitted] [immutable] runtime
3e46965.js 1.93 KiB 5, 2 [emitted] [immutable] pages/index
6e80df1.js 658 KiB 8 [emitted] [immutable] [big] vendors/app
9a04a2f.js 837 bytes 2 [emitted] [immutable] components/card
LICENSES 407 bytes [emitted]
afe68de.js 697 bytes 6 [emitted] [immutable] pages/inspire
c6fe9ab.js 1.85 KiB 3 [emitted] [immutable] components/nuxt-logo
img/buefy.4761382.png 10.7 KiB [emitted] [immutable]
+ 1 hidden asset
Entrypoint app = 1c4bd71.js 16a8a54.js 6e80df1.js 0b35f6f.js
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
6e80df1.js (658 KiB)
ℹ Ready to run nuxt generate 23:50:50
Done in 68.30s.
yarn generate
$ yarn generate
yarn run v1.22.10
$ nuxt generate
ℹ Production build 23:51:07
ℹ Bundling only for client side 23:51:07
ℹ Target: static 23:51:07
ℹ Using components loader to optimize imports 23:51:07
ℹ Discovered Components: node_modules/.cache/nuxt/components/readme.md 23:51:07
✔ Builder initialized 23:51:07
✔ Nuxt files generated 23:51:07
✔ Client
Compiled successfully in 57.22s
Hash: 06e482193e457b4594c4
Version: webpack 4.46.0
Time: 57241ms
Built at: 2021/07/15 23:52:07
Asset Size Chunks Chunk Names
../server/client.manifest.json 12.1 KiB [emitted]
0f3fc8d.js 1.43 KiB 0 [emitted] [immutable] app
349f70d.js 211 KiB 1 [emitted] [immutable] commons/app
5eca4d1.js 708 KiB 8 [emitted] [immutable] [big] vendors/app
LICENSES 407 bytes [emitted]
afbdee5.js 1.85 KiB 3 [emitted] [immutable] components/nuxt-logo
c4296a4.js 2.34 KiB 7 [emitted] [immutable] runtime
cc38122.js 697 bytes 6 [emitted] [immutable] pages/inspire
cfb3248.js 837 bytes 2 [emitted] [immutable] components/card
f3ade40.js 1.93 KiB 5, 2 [emitted] [immutable] pages/index
f3b4173.js 6.58 KiB 4 [emitted] [immutable] components/tutorial
img/buefy.4761382.png 10.7 KiB [emitted] [immutable]
+ 1 hidden asset
Entrypoint app = c4296a4.js 349f70d.js 5eca4d1.js 0f3fc8d.js
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
5eca4d1.js (708 KiB)
ℹ Generating output directory: dist/ 23:52:07
ℹ Generating pages 23:52:07
✔ Generated route "/inspire" 23:52:08
✔ Generated route "/" 23:52:08
✔ Client-side fallback created: 200.html 23:52:08
Done in 63.98s.
yarn start
$ yarn start yarn run v1.22.10 $ nuxt start ╭───────────────────────────────────────╮ │ │ │ Nuxt @ v2.15.7 │ │ │ │ ▸ Environment: production │ │ ▸ Rendering: client-side │ │ ▸ Target: static │ │ │ │ Listening: http://localhost:3000/ │ │ │ ╰───────────────────────────────────────╯ ℹ Serving static application from dist/ 23:52:18
勉強会参加メモ：Front-End Study 3「『当たり前』をつくりだすWebアクセシビリティ」
PlantUML Raw Data
@startmindmap 210113_FEStudy title "Front-End Study #3「『当たり前』をつくりだすWebアクセシビリティ」" + FEStudy#3 ++ Webエンジニアとしていま知っておきたいWebアクセシビリティ@ymrl 氏 +++ アクセシビリティとは ++++ ユーザービリティ: 特定の状況で、特定のユーザーにとって使いやすいこと ++++ アクセシビリティ: あらゆる状況で、あらゆるユーザーにとって使いやすいこと ++++ よくある誤解 +++++ 高齢者・障がい者のためのもの +++++ 一般ユーザーは関係ない ++++ 減点法で捉えられがち +++++ やってないと怒られる +++++ 完璧にしないといけない ++++ 加点法で捉えよう +++++ やることですべてのユーザーを幸せにする可能性があるもの +++++ やればやるほど品質が上がるもの +++ キーワード ++++ WCAG (Web Contents Accessibility Guidelines) +++++ A, AA, AAA と難易度がある。AAAを全て網羅するのは不可能 +++++ https://waic.jp/docs/WCAG21/ +++++ https://waic.jp/docs/WCAG21/Understanding/ ++++++ 解説書も一緒に読んだほうがいい ++++ WAI-ARIA +++++ どんな UI なのかを伝える HTML 属性 +++++ aria-label, aria-modal などなど +++++ WAI-ARIA Authoring Practice ++++++ https://waic.jp/docs/2019/NOTE-wai-aria-practices-1.1-20190207/ ++++ 組織独自のガイドライン +++++ Ameba: https://openameba.github.io/a11y-guidelines/ +++++ freee: https://a11y-guidelines.freee.co.jp/ ++++ 検証ツール +++++ aXe ++++++ 定番ツール +++++ Lighthouse ++++++ Chrome に搭載されている +++++ eslint-plugin-jsx-a11y, eslint-plugin-vue-a11y ++++++ React や Vue ならコレ +++++ Visible, acot ++++++ 新しく出てきたツール ++++ 法的な制約 +++++ 欧米ではWebアクセシビリティに取り組むのは義務である +++ 資料 ++++ https://docs.google.com/presentation/d/1uhCvhh6sZCPUnReSBVDjvGfNAOTKbZ5Sxs8fYMlxMsI/edit ++++ https://zenn.dev/ymrl/articles/7f41ad2f39f714 -- これからもつづけるWebアクセシビリティ@yamanoku 氏 --- チェックしてみる ---- Lighthouse ---- aXe ---- WCAG の達成基準でチェック ----- とりあえずレベルAを目指そう ---- 企業ガイドライン ----- Abema, freee, 三井住友銀行 --- 対応してみる ---- 健全なマークアップ ---- WAI-ARIA ---- 静的解析ツール ----- React: eslint-plugin-jsx-a11y ----- Vue: eslint-plugin-vue-a11y, eslint-plugin-vuejs-plugin-accessibility ------ 後者が最新らしい ----- Angular: codelyzer ----- ESLint にルール追加が難しい場合はローカルだけで実行するだけでも良い ------ ルール追加しちゃうとエラーだらけだからね ------ 途中から Linter 追加は地獄 ----- @storybook/addon-a11y ------ Storybook: UI 開発環境 --- 資料 ---- https://docs.google.com/presentation/d/1bWjpa1WwL-gQT7misOvC0TOKersl-m2pyE-LIP-kWbk/edit -- 実践！Reactで学ぶアクセシビリティ@五十嵐涼 氏 --- キーワード ---- VoiceOver ---- 区分化要素 ---- WAI-ARIA Authoring Practice ----- ダイアログの例とかパンくずの例とか載ってるよ ---- testing-library/react ----- Vue 版もあるよ ------ testing-library/vie ---- getByRole --- Next.js は _document.tsx を作らないと言語設定できない --- alt属性付けようね --- アイコンボタンには aria-label 付けようね --- SPA で動的にページが切り替わったときにフォーカス変えてあげようね --- tabIndex はインタラクティブな要素はデフォルトでフォーカスが当たる --- モーダルダイアログの後ろにフォーカスが行ってしまう ---- フォーカストラップ案件 ----- aria-modal ----- role="dialog" ----- open なときに ref を focus を当てる ---- モーダルを閉じたときにフォーカスが飛ぶ ----- onClose な処理なときに ref で focus を当てる ---- 健全なマークアップはテストを書くときにも重要 --- 資料 ---- https://github.com/neet/accessible-react-101 ---- https://zenn.dev/neet/articles/8b4d8d42fb2a5e @endmindmap
ブラウザで 3D モデルを作成できる Tinkercad を使ってみた
Tinkercad は AUDODESK 製の 3D モデリングツール。ブラウザでポチポチするだけで 3D モデルが作れちゃうやつです。 チュートリアルも充実していて、使いやすい印象です。
3D モデリングは初めてなので、まずは、スターターからやろうかなと思いつつ、ほとんど直感的に出来るのでハマったところだけ。
スターターには7種類のチュートリアルがありました。
- Place It
- View It
- Move It
- Rotate It
- Size It
- Group It
- Align It
View It (1/4)
単純にオブジェクトを回転させ、いろいろな方向から見るだけですが、直感的に空間をグリグリ動かせてしまうので説明が言いたいことがわかっていませんでした。
- Just left-click and drag anywhere on the ViewCube and see how it changes the point of view.
(左クリックしながらグリグリすれば視点が変わるよ) と読んだ。
にも関わらず、作業台のある空間を直感的に 右クリック しながらグリグリして視点を変更してしまったのだ。そのまま進めると View It (3/4) でおかしな問題にぶつかる。
Press and hold the right mouse button while moving your mouse to practice rotating your view of the design.
(右クリックを押したままグリグリすればビューを回転できるよ) と読んだ。
あれ？さっきやったよな？このチュートリアル何か間違っているのかな？ と思い、そのまま進める。 間違っているのは自分の脳内変換だとは気づかずに。。。
後から気付いた話ですが、以下の画像の通り、メインビューの左上にある箱を 左クリック でグリグリすることが View It (1/4) の練習だったようです。
「obniz x LINE Things」ハンズオンのサポートスタッフをしてきた話
linedevelopercommunity.connpass.com
こちらで obniz の木戸さんのサポートをしてきました！
講師
木戸先生
ハンズオンの内容
LINE Things 名物、無限 PUSH 通知を obniz から実行する
流れ
- 事前確認
- obniz のバージョン確認・アップデート
- LINE のバージョン確認・アップデート
- BOT 作成
- Messaging API チャネル作成
- LIFF の設定
- LINE Things のシナリオ作成
- repl.io を用いて BOT サーバーを起動
- ペアリング
サポートした各種トラブル
- repl.io の使い方
- LINE Things シナリオの作り方
- repl.io のコピーする URL を間違えていた
- 連携デバイスが表示できない (LINE Things のバグの可能性も...と中の人が仰っていました)
その他
今回は、入り口の前に立って参加者をご案内しました。
また、同じフロアの別会場で別のイベントが開催されていたため、
そちらのご案内もちらほらしました。
デバイス連携が中々上手く行かず、ハマっている方々も多数いらっしゃいましたが、 なんとか突破して動いたときは感動です。
「TypeScript x Clova」ハンズオンのサポートスタッフをしてきた話
linedevelopercommunity.connpass.com
こちらで講師のみそさんのサポートをしてきました。
講師
みそ先生
ハンズオンの内容
JavaScript で実装されている公式のサンプルプログラムであるサンプルダイスを CEK_SDK 版で構築し、
最終的に TypeScript へ置き換えていくという流れとなっています。
そして TypeScript はいいぞ！っていうお話をするハンズオンですｗ
流れ
- サンプルダイスの JavaScript 版で CEK 上でテストができるところまで作業する
- TypeScript の説明と環境構築
- 【手順1】でやった JavaScript 版を TypeScript 版へ置き換えていく
サポートとしてやったこと
作業に詰まってしまって、資料より遅れてしまっている方々のサポートだったり、気づいたら(変なところを消してしまって)エラーが大量発生していた方のサポートだったりをしました。
みそさんの資料がとても良く Windows と Mac の両コマンドが記載されているため、コマンド関連で悩む方は少なかったように思いました。
最後に
JavaScript は実行してみないとエラーに気づかないことも多いですが、TypeScript では型定義があるとこによって事前にエラーに気づくことができます。(存在しないプロパティにアクセスしていたり等)
小さなプロジェクトでは TypeScript の恩恵は少ないですが、
大きくなってくると型定義や型推論、そして古い構文へのトランスパイルなど、
とても助かることが多くなるので、皆さんが型好きになってくれれば嬉しいなと！
「M5StickC + LINE Things + Amazon Connect 連携ハンズオン」に参加してきた
linedevelopercommunity.connpass.com
に参加してきました。
IoT よくわからないので Arduino IDE 初体験です。
講師
がおまる先生
流れ
- Amazon Connect で問い合わせフローを作る
- Lambda 関数・API Gateway を作る
- LINE Bot (LIFF) を作る
- LINE Things を設定する
- M5StickC にコードを書きこむ
完成システム構成図
だいたいこんなイメージだろうか？
1. Amazon Connect で問い合わせフローを作る
Amazon Connect を使って、コールセンターフローを作る。
フロー自体は Node-RED のようにブロックプログラミングで作れる。
2. Lambda 関数・API Gateway を作る
API Gateway 経由で実行する Lambda 関数を作る。
Lambda では、Amazon Connect の API をキックするだけの簡単な Lambda。
Amazon Connect の電話番号や各種 ID などを環境変数に設定して完了。
3. LINE Bot (LIFF) を作る
LINE Things を準備するために LINE Bot を作って LIFF の設定を行う。
この辺は LINE Developers のページでポチポチっと。
4. LINE Things を設定する
LINE Bot (LIFF) から LINE Things の サービスUUID を作る。
この辺はイマイチ理解できていないが本来であれば cURL 等で叩いて取得する。
今回はのびすけさんのツールを使って取得
5. M5StickC にコードを書きこむ
Arduino IDE を開いて、M5StickC にコードを書きこむ。
すると「LINE アプリ」の「LINE Things」に【手順.4】で作った「LINE Things デバイス」が表示される。
これをペアリングすることで「M5StickC」から「LINE Things」経由で「API Gateway」に到達することができる。
という感じっぽい
実行！
そして大きい方のボタンを押すと・・・ Amazon Connect 経由で電話がかかってきて、カウント値を教えてくれます。
トラブルシューティング
M5StickC にコードを書きこんでも何も表示されない
Arduino IDE で初書き込みだー！と喜んでいたら、何も表示されない。。。
初書き込みまさかの失敗！？
本当ならボタンを押せばカウントアップされるはず。。。
どうやら、稀に良くあるらしいとのこと。
そんな時は一度 Hello World で刺激を与えてみて！ということだった。
ということで、とりあえず Hello World を書き込み。
Hello World は出る。
この後、再度、メインコードを書きこむことで、無事に完了。
どうやら、刺激が足りなかったらしい。
