Download to read offline
![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/line20190426-190426042833/85/LINE-2019-04-26-51-320.jpg)
LINE お絵描きハンズオン 2019.04.26
- 1. IBM Cloud CommunitySummit 2019 LINE でお絵描きメッセージを送ってみよう 2019.04.26 #bmxug #bmxgg
- 2. 大まかな流れ 0. 諸準備 • IBMCloud へログイン • cf ツールインストール • LINE Developer アカウント 1. IBM Cloudant の用意 • 画像データベース 2. Node.js アプリケーションのデプロイ • お絵描きアプリケーション 3. LINE Developer での操作 • LINE アプリとの連動設定
- 3.
- 4. システム構成 トークルーム Node.js 画像 DB LIFF LIFF(LIne Front-endFramework) によって LINE アプリの中でお絵描きウェブアプリを呼び出し、 LINE とシームレスに連携して画像をトークルームに送信する
- 5. IBM Cloud へログイン(1) https://cloud.ibm.com/
- 6. IBM Cloud へログイン(2)自分のアカウント名になっていることを確認
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16. LINE Developers(9) ※ アプリ名に"LINE" が含まれては駄目、らしいです
- 17.
- 18.
- 19.
- 20. IBM Cloudant の準備(1) Cloudant サービスを未作成の場合
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. IBM Cloudant の準備(10)
- 30. IBM Cloudant の準備(11)
- 31. IBM Cloudant の準備(12) この中の（ username と password の）値を後で使います
- 32. IBM Cloudant の準備(13) 右クリック
- 33.
- 34.
- 35.
- 36. Node.js アプリケーションのデプロイ (3) ダラスを選択 他の人が使っていないアプリ名（例 名前-lineoekaki ） 128 MB または 64MB を選択
- 37.
- 38. Node.js アプリケーションのデプロイ (5) https://github.com/dotnsf/line_liff_doodle gitclone するか、 download して展開
- 39.
- 40. Node.js アプリケーションのデプロイ (7) settings.jsをテキストエディタで開く
- 41. Node.js アプリケーションのデプロイ (8) exports.db_usernameの値を cloudant の接続情報で確認した username の値に、 exports.db_password の値を同 password の値に書き換えて保存。
- 42.
- 43. Node.js アプリケーションのデプロイ (10) > cdUsers （ユーザー名） Desktopline_liffdoodle-master cd と入力してから エクスプロラーのフォルダ部分を ドラッグ＆ドロップして Enter キー
- 44. Node.js アプリケーションのデプロイ (11) > cflogin -a https://api.ng.bluemix.net/ -u （ IBM Cloud のログイン名） パスワードなどを入力
- 45. Node.js アプリケーションのデプロイ (12) > cfpush （アプリ名）
- 46.
- 47. LIFF (LIne Front-endFramework) とは？ • 2018 年６月に LINE から提供が開始された、比較的新しい Messaging API • 従来の Messaging API では主に bot を作るための、バックエンドの機 能が提供されていた • LIFF はその名の通りフロントエンドの機能が提供され、 LINE の利用者 の権限で実行することができる • スマホの LINE アプリから外部のウェブアプリを呼び出し、そ のウェブアプリから呼び出し元の LINE アプリ（のトークルー ム）でメッセージを送信することができる • ブラウザ用の JavaScript SDK が提供されている
- 48. システム構成 Node.js 画像 DB トークルーム LIFF LIFF SDKを使って、 ウェブアプリケーション上からトークルームやユーザーの情報を取得し、 またトークルームへメッセージを送信することができるようになる SDK(JavaScript ファイル） （ SDK を外部読み込み） https
- 49. LIFF の特徴 • ブラウザ上のJavaScript を使って LINE トークルームへメッセー ジ送信ができる • メッセージはテキストだけでなく、画像や動画、スタンプ、位置情報なども 可 • 画像の場合、 URL がインターネット上に公開されている必要がある • 送信する人は LIFF URL をタップしたユーザー、送信先は元のトーク ルーム • LIFF URL で起動するウェブアプリケーションは https 対応している 必要あり • ドメイン取得、証明書の発行、ウェブアプリケーションサーバーの SSL 対 応、・・ • IBM Cloud (PaaS) を使うと特に意識しなくても大丈夫 d(^^)
- 50. 今回 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
- 51. 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 ] );
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62. LINE Developer での操作(5) LIFF URL をなんとかして自分の LINE に（自分のスマホに）送る。 LINE のどこかのトークルーム内のメッセージにする
- 63.
- 64. LINE Developer での操作(7) LIFF URL を友人と共有して遊ぶ
- 65. お願い！ 良さ気な作品ができたら（できなくても）、 画像をコピー＆ペーストして #bmxug タグを付けて Twitterでもつぶやいてください！ この後の記念撮影時の背景にします。。。
- 66.
- 67. 興味がある方はソースコードを改良してみて ！ （１） app.js - お絵描き画像のDB 保存 - お絵描き画像の取り出し （２） public/index.ejs - アプリケーションのユーザーインターフェース (HTML) - LIFF SDK を使った LINE への画像送信 ① お絵描き画像送信 ② 画像格納 ③ 画像 URL 返却 LIFF ④LIFF SDK を使って LINE に画像送信 実質的なソースコードはファイル２つのみ
- 68.
- 69. IBM Cloud CommunitySummit 2019 LINE でお絵描きメッセージを送ってみよう 2019.04.26 #bmxug #bmxgg