More Related Content
Similar to LINE お絵描きアプリハンズオン (20)
LINE お絵描きアプリハンズオン
- 3. 大まかな流れ
0. 諸準備
• IBM Cloud へログイン
• cf ツールインストール
• LINE Developer アカウント
1. IBM Cloudant の用意
• 画像データベース
2. Node.js アプリケーションのデプロイ
• お絵描きアプリケーション
3. LINE Developer での操作
• LINE アプリとの連動設定
- 49. LIFF (LIne Front-end Framework) とは?
• 2018 年6月に LINE から提供が開始された、比較的新しい
Messaging API
• 従来の Messaging API では主に bot を作るための、バックエンドの機
能が提供されていた
• LIFF はその名の通りフロントエンドの機能が提供され、 LINE の利用者
の権限で実行することができる
• スマホの LINE アプリから外部のウェブアプリを呼び出し、そ
のウェブアプリから呼び出し元の LINE アプリ(のトークルー
ム)でメッセージを送信することができる
• ブラウザ用の JavaScript SDK が提供されている
- 51. LIFF の特徴
• ブラウザ上の JavaScript を使って LINE トークルームへメッセージ送
信ができる
• メッセージはテキストだけでなく、画像や動画、スタンプ、位置情報なども
可
• 画像の場合、 URL がインターネット上に公開されている必要がある
• 送信する人は LIFF URL をタップしたユーザー、送信先は元のトーク
ルーム
• LIFF URL で起動するウェブアプリケーションは https 対応している必
要あり
• ドメイン取得、証明書の発行、ウェブアプリケーションサーバーの SSL 対
応、・・
• IBM Cloud (PaaS) を使うと特に意識しなくても大丈夫 d(^^)
- 52. 今回 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
- 53. 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 ] );
Editor's Notes
- ニコラス・コペルニクス(ポーランド)の誕生日
右端はコペルニクスが通ったクラクフ大学近くの蓋