イベント受付をLIFFアプリで！開発・運用してみて分かったAzureの使いどころ

Transcript

1. 2020.11.14 (Sat) 14:00～
2. 自己紹介 ・三木聖隆（みきまさたか） ・福岡市内のソフトウェア開発会社勤務 ・２児（小４と年長）の父 ・CoderDojo 太宰府　主宰 ・LDGQ運営メンバー CoderDojo 太宰府のfacebook LDGQのconnpass
3. 本日の流れ ❖ CoderDojo とは ➢ 子ども向けのプログラミング道場 ❖ LINE APIでイベントの受付管理をやってみてわかったこと ➢ 公式の管理画面（ LINE Official Account Manager）について ➢ LINE APIでできること（初級編。 Bot, LIFF, ミニアプリ, etc...） ❖ Azure を選んだ理由 ➢ 足りない機能、将来的に欲しい機能 ➢ いろいろ検討して、 Azureを使おうと決めた ❖ Azureで開発してみてわかったこと ➢ 開発生産性, 管理の効率, 学習コスト, etc… ➢ LINEとの連携について ➢ LINE APIでできること（中級編） ❖ LINE API を効率よく学ぶ方法（おまけ）
4. CoderDojo とは ・2011年にアイルランドではじまり、今では、世界中で約 2,000、日本でも200を超えるCoderDojo が ある ・完全に無料でやらないといけない ・子どものことを「ニンジャ」、大人のことを「メンター」という ・先生、生徒の関係ではなく、自主的に行動し、主体性を学ぶ場（何をやってもいい！）
5. CoderDojo 太宰府の紹介 ・太宰府天満宮周辺で月に１回のペースで開催 ・現在はオンラインでの参加も可能 ・約２時間 　→自己紹介、作業時間、途中５～１０分間講座、最後に発表 ・Scratch, Viscuit, Hour of Code (Code.org), micro:bit, レゴ マインドストーム EV3, Arduinoな ど電子工作, etc...
6. CoderDojo 太宰府でのLINEの使用について ・2019年10月とあるハンズオンで、 LINE PayとLIFFのアプリを体験 ・LIFF（LINE Front-end Framework）とは、 LINEアプリ上でも動くWebアプリで、 LINE APIを楽に使って開発できる ・イベントなどの受付のチャンネルが多く、 返信など面倒な作業が多かったので、 LINEに一元化したいと思った ・そして、LIFFめっちゃ簡単と思った （後で講師がよかっただけと気づく）
7. LIFFアプリの作成手順 １）LIFF SDKを組み込んだ、WEBアプリを作成 ２）LINE DevelopersでLINE ログインのチャネルを作成する ３）作成したLINE ログインに、LIFFを追加する →エンドポイントとして、１）の URLを設定する ４） 追加したLIFFごとにURLが払い出される おまけ）Messaging APIのチャネルを作成して、LIFFの呼び出し元とする（ボット連携）
8. CoderDojo 太宰府でのLINEの使用について ・当初：LINE API, Vue.js, Node.js, AWS EC2, S3, PostgreSQL, Gmailに通知 ・現在：LINE API, Vue.js, Node.js, Heroku, PostgreSQL, Slackに通知 →完全無料
9. 当初困ったこと ・個別にLINEで返信できない 問い合わせ 返信
10. 公式の管理画面について LINE Official Account Manager ・正直、これだけで 十分運用できる
11. 応答モード
12. 応答モード ・チャットモードだと、管理画面で、ユーザーとやりとりができる
13. 応答モード ・Botモードだと、チャットモードに変更すれば、ユーザーとやりとりができる
14. 簡易的な返信用画面をLIFFで作った ・LIFF（LINE Front-end Framework）とは、 LINEアプリ上でも動くWebアプリで、 LINE APIを楽に使って開発できる ・LINE APIを使えば、 アイコンや名前も替えることができる →使いどころ色々ありそうですね！
15. LIFF LIFFとミニアプリとの違いについて ・LINEミニアプリは、LIFF上で実行されるウェブアプリ ・LINEミニアプリの開発資格と許可が必要 ・ミニアプリ独自の便利な機能 ・インストール不要、多様なアクセス方法 ・詳細は公式ドキュメントを https://developers.line.biz/ja/docs/line-mini-app/discover/introduction/ ミニアプリ
16. 今後のミニアプリの普及について ・WeChat/微信における「ミニプログラム」の爆発的な普及からも分かる通り、 今後LINEミニアプリ市場に多くの企業や個人が参戦すると期待できる！ ・まずはLIFFからはじめましょう
17. その後、他にも困ったこと ・公式アカウントとして承認されない →プロバイダ名に問題？
18. プロバイダーとチャネル ・開発者アカウントの配下に複数プロバイダーを作れる ・プロバイダー配下に複数チャネル ・プロバイダ内のユーザー IDは一意 ・プロバイダ名は変更できる
19. プロバイダーとチャネルについて ・公式アカウントにプロバイダー名が表示される →公式ニュースでも、適切なプロバイダー名か確認して！ ・プロバイダー名は変更できるが・・・
20. 運用していると、追加したい機能も増えてきた ・チャットモードのようなやりとりを行う管理画面 ・複数の管理者で運用したい ・教材やイベントの周知、通知 ・イベントの出席管理に加え、教材の予約 ・メニュー増やしたい、分割したい
21. 運用していると、追加したい機能も増えてきた ・チャットモードのようなやりとりを行う管理画面 ・複数の管理者で運用したい ・教材やイベントの周知、通知 ・イベントの出席管理に加え、教材の予約 ・メニュー増やしたい、分割したい 全体的に 作り直そう！
22. Azureを使おう ・とあるハンズオンイベントで Azure Bot Serviceでオウム返しボットを作った ・LINEでチャネル（Messaging API）を作成し、そのアクセストークンと、チャネルシークレットを設定す るだけ →爆速（最短5分くらい）でボットが作れる ・できあがったら、ソース一式をダウンロードでき、簡単に変更を加えることができる LINEとの 親和性がも高い
23. Azureを使おう LINEを選んで、 設定値を入力するだけ Botソースコードをダウン ロードできる
24. Azureを使おう ・また、とあるハンズオンイベントで Azure Cognitive Servicesを使ったテイクアウトアプリを作った →感情分析を使った ・ボットといえば、AIの機能が必須！？ →Cognitive Servicesには、自然言語解析、文章からキーフレーズや感情分析、動画から字幕生成な どもある（いずれも対応リージョンや日本語対応の課題あり） ・マイクロサービス活用 →今後もどんどん増える、 またはもっとよくなるだろうという期待 ・スケールが容易、高可用性 柔軟な開発
25. Azureを始めるにあたって調べたこと ・使いにくい？ ・価格が高い？
26. Azure使いにくい？ ・ポータル画面 →カスタマイズも できる（らしい）
27. Azure使いにくい？ ・リソースの概念 ・他にも、リソースプロバイダーやら、リソースマネージャ（ ARM）、 リソースマネージャテンプレートやら ・リージョンによって使えたり、使えなかったり サブスクリプション リソースグループ リソースグループ リソース リソース
28. Azureの勉強方法 ・公式ドキュメント https://docs.microsoft.com/ja-jp/azure/?product=featured →豊富なチュートリアル。書いてある通りやると誰でもできる！
29. Azureの勉強方法 ・Microsoft Learn https://docs.microsoft.com/ja-jp/learn/ →Azure関連だけでも数百のコース。まずは、「 Azure 基礎」で検索し、 ラーニングパスをやる
30. Azureの勉強方法 ・Microsoft Learn https://docs.microsoft.com/ja-jp/learn/ →Azure関連だけでも数百のコース。まずは、「 Azure 基礎」で検索し、 ラーニングパスをやる その他ネット記事、 書籍（少な目？）も ただし、情報の 正確性に要注意 公式のUpdate情報（英 語）や、Update情報を カバーしている日本語 のサイトもある
31. Azureの価格について ・従量課金 →使った分だけかかるのか、使わなくてもかかるのかは、しっかり把握 ・料金体系は比較的わかりやすい ・請求のアラート設定は大切 ・個人、小規模で始める分はほぼ無料に近い感じで開発できる（ような気がしている） ・リソースグループごと 削除すると安心
32. 新しいアカウントのメニューについて ・リッチメニューを作成 →作成方法がいくつかある ・GUIで作成 ・APIで作成 ・期間限定でメニューを変えたり、 APIを使えば、ユーザーによる変更や、 階層構造のメニューも可能 ・「リッチメニュー　事例」で検索して みてください！
33. リッチメニューの作成（GUI） ・LINE Official Account Managerで作成 →テンプレートを選んで、楽々編集
34. リッチメニューの作成（API） ・APIでrichmenuIdを払い出し、 画像をアタッチする →デフォルト設定もできるし、 特定のタイミングで設定する ようプログラムもできる
35. リッチメニューの仕組み ・メニューごとにアクション（ポストバック、メッセージ、 URIなど）の設定が できるため、好きな単位でプロジェクト（リソースグループ）を作成し、 好きな環境や言語で開発できる Vue.js C# Bot ・LINE Offcial Account Managerでは、クーポンや ショップカードなども作れた りします
36. LIFFの仕組み ・LIFFごとにIDやURLがあり、個別の開発も可能
37. LIFFの仕組み ・LIFFはLINE以外のブラウザでも表示できる （公式には、Microsoft Edge, Google Chrome, Firefox, Safariと記載） ・ログインなしでユーザーデータにアクセスできる実装が見込める ・ユーザーIDが分かればメッセージを送信できるし、ユーザーの友だちやグループから選択してメッ セージを送ることもできる（ Share Target Picker） ・バックエンドは何でもいい →つまり、Azureでもいい ・公式サイトにスターターアプリ ・QRコードリーダーの使用は要注意 →外部ブラウザ、iOSのLINEはNG
38. Azureのサービスの選択 ・実際にLINE APIを使ったボットや、LIFF、ミニアプリを開発する際に、何 を選べばいいか？ ① Azure Functions ② Azure Web Apps ③ Azure Static Web Apps
39. ① Azure Functions ・サーバーレス。すぐにコードを書いて実行できる ・C#, JavaScript, Java, Pythonなど豊富な言語サポート ・http, blob, タイマーなど様々なサービスのイベントに反応。結果を様々なサービスに連携 ・柔軟なスケーリング → 公式ドキュメントのホスティングプランとスケールについてを参照 ・ログなど利用状況のモニタリング（ Application Insights）→5GB/月まで無料 ・VS Codeに拡張がある ・使った分だけ課金（従量課金プラン）
40. Visual Studio Code ・Azure サービスの拡張 →VS Code側でポチポチするだけで、 Azure Functionsのプロジェクトが作成でき、 簡単にデプロイできる ・Azure CLIを使うこともできる ・（多分初めは）結構な頻度で エラーが発生し、ネット などを調べる時間が掛かる →勉強になっている！
41. ② Azure Web Apps ・WebアプリやREST APIをホストするサービス ・Windows , Linuxの環境を利用可能 ・豊富なテンプレートから開発を始められる ・VS Coderに拡張機能あり →Azure App Service(PREVIEW) ・無料プラン、共有プランあり →通常はBasicプラン以上（時間当たりの価格設定） ・DevOps環境に最適化されている
42. ③ Azure Static Web Apps (PREVIEW) ( 1/2 ) ・HTML, CSS, JavaScript, 画像などの静的コンテンツの Web ホスティング（無償！） →Angular, React, Vueなど様々なフレームワークに対応 ・Azure Functionsによって提供される統合 API ・GitHub Actionsによるビルド＆デプロイ（GitHub連携が必須） →高機能のCI/CDでソフトウェアワークフローを簡単に自動化
43. ③ Azure Static Web Apps (PREVIEW) ( 2/2 ) ・カスタムドメイン対応、自動更新される無料の SSL証明書を利用可能 ・ビルトインの認証機構を利用可能（外部認証プロバイダー利用） →Google, Twitter, facebook, GitHub, Azure ADによるログイン ・ほぼVS Code上で開発が完結できる ・まだ、PREVIEW期間中 ・ホスティングできるアプリ数、ファイルサイズ（ファイル数も？）に上限がある
44. Azure まとめ ＆ その他の利点 ・VS Codeとの親和性。生産性アップ。開発が楽しい ・学習コストが低いとは言いづらいが、環境は整っている ・DBも豊富 →NoSQLのCosmos DBや、オンプレとの連携サービスもあり、選択肢が多い 運用後、諸々を診断するサービスもある（パフォーマンス、クエリ診断等々） ・主要なサービスにSLAが設定されている →この値を踏まえ、要件と照らし合わせてサービスの利用や冗長化を決定できる
45. LINE APIの勉強方法 ・書籍 『LINE API 実践ガイド』 2020年10月初版　マイナビ出版 著者　LINE API Expert 認定メンバー
46. LINE APIの勉強方法 ・Twitter（@LINE_DEV） ・LINE Engineering Blog https://engineering.linecorp.com/ja/blog/
47. LINE APIの勉強方法 ・まずは、LINE APIのコミュニティのイベントに参加、できれば運営 LINE Developers Community https://linedevelopercommunity.connpass.com/ LINE Developer Group Kansai https://ldgk.connpass.com/ LINE Developer Group Q-shu https://linedevkyushu.connpass.com/ ゆるい感じでやって ます。目標は毎日イ ベント
48. LINE APIの勉強方法 ・オンラインイベント後の懇親会タイムも楽しく交流、 情報交換がされています！？
49. ご清聴ありがとうございました 次のLDGQのイベントでまたお会いしましょう！