LINE お絵描きアプリハンズオン 20190519
Download as PPT, PDF0 likes494 views
BMXUG 市川 IT 勉強会「LINE でお絵描きメッセージを送ってみよう」ハンズオン資料
![LIFF を使ったメッセージポスト
1. ウェブアプリの中に以下を記述（ SDK をロード）
<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
2. ページロード後に JavaScript で以下を実行して初期化
<script>
liff.init( data => {}, err => {} );
</script>
3. 以下のコードで LINE にメッセージ送信
<script>
var data = { type: "text", text: " こんにちは " };
liff.sendMessages( [ data ] );
</script>
画像を添付する場合は以下のように変更
var data = {
type: "image",
originalContentUrl: " 画像の URL",
previewImageUrl: " サムネイル画像の URL"
};
liff.sendMessages( [ data ] );](https://image.slidesharecdn.com/linebmxug20190519-190607062711/85/LINE-20190519-52-320.jpg)
LINE お絵描きアプリハンズオン 20190519
- 1. BMXUG 市川 IT 勉強会 LINE でお絵描きメッセージを送ってみよう 2019.05.19 #bmxug あらかじめテキストエディ タを インストールしておいてく ださい！ 例： サクラエディタ、 CotEditor 、・・
- 2. 自己紹介 本アイ・ビー・エム クラウドエバンジェリスト witter: @dotnsf og: http://dotnsf.blog.jp/ mail: [email protected] 趣味： マンホール 木村 桂（きむら けい） プログラマー マンホールマップ : http://manholemap.juge.me/
- 3. 大まかな流れ 0. 諸準備 • IBM Cloud へログイン • cf ツールインストール • LINE Developer アカウント 1. IBM Cloudant の用意 • 画像データベース 2. Node.js アプリケーションのデプロイ • お絵描きアプリケーション 3. LINE Developer での操作 • LINE アプリとの連動設定
- 4. 0. 諸準備
- 5. システム構成 トークルーム Node.js 画像 DB LIFF LIFF(LIne Front-end Framework) によって LINE アプリの中でお絵描きウェブアプリを呼び出し、 LINE とシームレスに連携して画像をトークルームに送信する
- 6. IBM Cloud へログイン (1) https://cloud.ibm.com/
- 7. IBM Cloud へログイン (2)自分のアカウント名になっていることを確認
- 15. LINE Developers(7) Messaging API を選択
- 17. LINE Developers(9) ※ アプリ名に "LINE" が含まれては駄目、らしいです
- 20. 1. IBM Cloudant の準備
- 21. IBM Cloudant の準備 (1) Cloudant サービスを未作成の場合
- 22. IBM Cloudant の準備 (2)
- 23. IBM Cloudant の準備 (3)
- 24. IBM Cloudant の準備 (4)
- 25. IBM Cloudant の準備 (5)
- 26. IBM Cloudant の準備 (6)
- 27. IBM Cloudant の準備 (7)
- 28. IBM Cloudant の準備 (8)
- 29. IBM Cloudant の準備 (9)
- 30. IBM Cloudant の準備 (10)
- 31. IBM Cloudant の準備 (11)
- 32. IBM Cloudant の準備 (12) この中の（ username と password の）値を後で使います
- 33. IBM Cloudant の準備 (13) 右クリック
- 37. Node.js アプリケーションのデプロイ (3) ダラスを選択 他の人が使っていないアプリ名（例 名前 -lineoekaki ） 128 MB または 64MB を選択
- 39. Node.js アプリケーションのデプロイ (5) https://github.com/dotnsf/line_liff_doodle git clone するか、 download して展開
- 41. Node.js アプリケーションのデプロイ (7) settings.js をテキストエディタで開く
- 42. Node.js アプリケーションのデプロイ (8) exports.db_username の値を cloudant の接続情報で確認した username の値に、 exports.db_password の値を同 password の値に書き換えて保存。
- 44. Node.js アプリケーションのデプロイ (10) > cd Users （ユーザー名） Desktopline_liffdoodle-master cd と入力してから エクスプロラーのフォルダ部分を ドラッグ＆ドロップして Enter キー
- 45. Node.js アプリケーションのデプロイ (11) > cf login -a https://api.ng.bluemix.net/ -u （ IBM Cloud のログイン名） パスワードなどを入力
- 46. Node.js アプリケーションのデプロイ (12) > cf push （アプリ名）
- 48. LIFF (LIne Front-end Framework) とは？ • 2018 年６月に LINE から提供が開始された、比較的新しい Messaging API • 従来の Messaging API では主に bot を作るための、バックエンドの機 能が提供されていた • LIFF はその名の通りフロントエンドの機能が提供され、 LINE の利用者 の権限で実行することができる • スマホの LINE アプリから外部のウェブアプリを呼び出し、そ のウェブアプリから呼び出し元の LINE アプリ（のトークルー ム）でメッセージを送信することができる • ブラウザ用の JavaScript SDK が提供されている
- 49. システム構成 Node.js 画像 DB トークルーム LIFF LIFF SDK を使って、 ウェブアプリケーション上からトークルームやユーザーの情報を取得し、 またトークルームへメッセージを送信することができるようになる SDK(JavaScript ファイル） （ SDK を外部読み込み） https
- 50. LIFF の特徴 • ブラウザ上の JavaScript を使って LINE トークルームへメッセー ジ送信ができる • メッセージはテキストだけでなく、画像や動画、スタンプ、位置情報なども 可 • 画像の場合、 URL がインターネット上に公開されている必要がある • 送信する人は LIFF URL をタップしたユーザー、送信先は元のトーク ルーム • LIFF URL で起動するウェブアプリケーションは https 対応している 必要あり • ドメイン取得、証明書の発行、ウェブアプリケーションサーバーの SSL 対 応、・・ • IBM Cloud (PaaS) を使うと特に意識しなくても大丈夫 d(^^)
- 51. 今回 IBM Cloud 上で動かすアプリケー ション • HTML5 の Canvas 上に（マウスや）タッチでお絵かきするアプ リケーション • 元はこれ : https://github.com/dotnsf/html5pen • マウスイベントやタッチイベントをハンドリングして座標点を線で結 ぶ • POST ボタン送信時に Canvas の内容を画像化して保存し、その URL を指定して LIFF で sendMessages() と closeWindow() を実行し、「画 像を添付して送信し終了」する • ストローク単位のアンドゥ＆リドゥまでは実装 • 今日のハンズオンの（ざっくりな）内容はブログでも紹介 • http://dotnsf.blog.jp/archives/1073002287.html • http://dotnsf.blog.jp/archives/1073088825.html
- 52. LIFF を使ったメッセージポスト 1. ウェブアプリの中に以下を記述（ SDK をロード） <script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script> 2. ページロード後に JavaScript で以下を実行して初期化 <script> liff.init( data => {}, err => {} ); </script> 3. 以下のコードで LINE にメッセージ送信 <script> var data = { type: "text", text: " こんにちは " }; liff.sendMessages( [ data ] ); </script> 画像を添付する場合は以下のように変更 var data = { type: "image", originalContentUrl: " 画像の URL", previewImageUrl: " サムネイル画像の URL" }; liff.sendMessages( [ data ] );
- 57. Node.js アプリケーションのデプロイ (16) 線の色 線の太 さ 背景色 に設定 アンド ゥ リドゥ 初めから やり直し 送信 ※ この時点ではまだ「送信」できません 履歴 ※ スマホからのみ利用可
- 58. 3. LINE Developer での操作
- 59. LINE Developer での操作 (1)
- 60. LINE Developer での操作 (2)
- 61. LINE Developer での操作 (3)
- 62. LINE Developer での操作 (4)
- 63. LINE Developer での操作 (5) LIFF URL をなんとかして自分の LINE に（自分のスマホに）送る。 LINE のどこかのトークルーム内のメッセージにする
- 64. LINE Developer での操作 (6)
- 65. LINE Developer での操作 (7) LIFF URL を友人と共有して遊ぶ
- 66. お願い！ 良さ気な作品ができたら（できなくても）、 画像をコピー＆ペーストして #bmxug タグを付けて Twitter でもつぶやいてください！ この後の記念撮影時の背景にします。。。
- 67. （おまけ）ソースコードについて
- 68. 興味がある方はソースコードを改良してみて ！ （１） app.js - お絵描き画像の DB 保存 - お絵描き画像の取り出し （２） public/index.ejs - アプリケーションのユーザーインターフェース (HTML) - LIFF SDK を使った LINE への画像送信 ① お絵描き画像送信 ② 画像格納 ③ 画像 URL 返却 LIFF ④LIFF SDK を使って LINE に画像送信 実質的なソースコードはファイル２つのみ
- 69. （おまけ）今後について
- 71. Q & A
- 72. BMXUG 市川 IT 勉強会 LINE でお絵描きメッセージを送ってみよう 2019.05.19 #bmxug