Submit Search
Upload
LINE お絵描きハンズオン 2019.04.26
•
Download as PPT, PDF
•
0 likes
•
729 views
K Kimura
Follow
IBM Cloud Community Summit 2019 Spring でのハンズオン資料
Read less
Read more
Business
Report
Share
Report
Share
1 of 69
Download now
Recommended
LINE お絵描きアプリハンズオン 20190519
LINE お絵描きアプリハンズオン 20190519
K Kimura
LINE お絵描きアプリハンズオン
LINE お絵描きアプリハンズオン
K Kimura
マイクロソフトモバイルアプリ開発環境の全貌Xamarin, Visual Studio App Center, Azure Mobile Apps
マイクロソフトモバイルアプリ開発環境の全貌Xamarin, Visual Studio App Center, Azure Mobile Apps
Masaki Takeda
マイクロソフト モバイルアプリ開発環境の全貌 Xamarin, Visual Studio Mobile Center, Azure Mobile Apps
マイクロソフト モバイルアプリ開発環境の全貌 Xamarin, Visual Studio Mobile Center, Azure Mobile Apps
Masaki Takeda
Xamarin Overview
Xamarin Overview
まどか 千代田
Xamarin と Visual Studio でまとめて作る iOS / Android / Windows アプリ ( Developers Summ...
Xamarin と Visual Studio でまとめて作る iOS / Android / Windows アプリ ( Developers Summ...
友太 渡辺
Windows Azure Mobile Servicesによるアプリ構築
Windows Azure Mobile Servicesによるアプリ構築
Nobuaki Aoki
モバイル開発者から見た サーバーレスアーキテクチャ
モバイル開発者から見た サーバーレスアーキテクチャ
Takaaki Tanaka
Recommended
LINE お絵描きアプリハンズオン 20190519
LINE お絵描きアプリハンズオン 20190519
K Kimura
LINE お絵描きアプリハンズオン
LINE お絵描きアプリハンズオン
K Kimura
マイクロソフトモバイルアプリ開発環境の全貌Xamarin, Visual Studio App Center, Azure Mobile Apps
マイクロソフトモバイルアプリ開発環境の全貌Xamarin, Visual Studio App Center, Azure Mobile Apps
Masaki Takeda
マイクロソフト モバイルアプリ開発環境の全貌 Xamarin, Visual Studio Mobile Center, Azure Mobile Apps
マイクロソフト モバイルアプリ開発環境の全貌 Xamarin, Visual Studio Mobile Center, Azure Mobile Apps
Masaki Takeda
Xamarin Overview
Xamarin Overview
まどか 千代田
Xamarin と Visual Studio でまとめて作る iOS / Android / Windows アプリ ( Developers Summ...
Xamarin と Visual Studio でまとめて作る iOS / Android / Windows アプリ ( Developers Summ...
友太 渡辺
Windows Azure Mobile Servicesによるアプリ構築
Windows Azure Mobile Servicesによるアプリ構築
Nobuaki Aoki
モバイル開発者から見た サーバーレスアーキテクチャ
モバイル開発者から見た サーバーレスアーキテクチャ
Takaaki Tanaka
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
Akira Inoue
Kilimanjaro Event
Kilimanjaro Event
dynamis
Dev camp2012jpn day2special
Dev camp2012jpn day2special
Katsuhito Katoh
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developer Camp 2012 Japan Fall
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
Kensaku Komatsu
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Osamu Monoe
Web App Framework at SwapSkills vol28
Web App Framework at SwapSkills vol28
光一 原田
【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜
【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜
日本マイクロソフト株式会社
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏
Developers Summit
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Monaca
Realm platform2019
Realm platform2019
昌桓 李
MTDDC 2019 LINE ボットからみた MT Data API の可能性
MTDDC 2019 LINE ボットからみた MT Data API の可能性
Kenichiro Nakamura
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
Monaca
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
Akira Inoue
2011年マイクロソフト テクノロジー振り返り~開発編~
2011年マイクロソフト テクノロジー振り返り~開発編~
Takeshi Shinmura
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Akira Inoue
Gaming cicd-pipeline gaming-technight-2
Gaming cicd-pipeline gaming-technight-2
Amazon Web Services Japan
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版
Yoshito Tabuchi
20200528_AWSでサーバーレスなLINEBotLIFFアプリ環境をIaCな感じで構築するよ!.pdf
20200528_AWSでサーバーレスなLINEBotLIFFアプリ環境をIaCな感じで構築するよ!.pdf
Sumihiro Kagawa
.NET ラボ 勉強会 C# でラインプラットフォーム開発
.NET ラボ 勉強会 C# でラインプラットフォーム開発
Kenichiro Nakamura
ThinkPad を自慢できると聞いてやってきました
ThinkPad を自慢できると聞いてやってきました
K Kimura
IBM FamilyDay 2022 - 帰ってきた LINE 手描きスタンプ
IBM FamilyDay 2022 - 帰ってきた LINE 手描きスタンプ
K Kimura
More Related Content
Similar to LINE お絵描きハンズオン 2019.04.26
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
Akira Inoue
Kilimanjaro Event
Kilimanjaro Event
dynamis
Dev camp2012jpn day2special
Dev camp2012jpn day2special
Katsuhito Katoh
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developer Camp 2012 Japan Fall
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
Kensaku Komatsu
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Osamu Monoe
Web App Framework at SwapSkills vol28
Web App Framework at SwapSkills vol28
光一 原田
【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜
【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜
日本マイクロソフト株式会社
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏
Developers Summit
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Monaca
Realm platform2019
Realm platform2019
昌桓 李
MTDDC 2019 LINE ボットからみた MT Data API の可能性
MTDDC 2019 LINE ボットからみた MT Data API の可能性
Kenichiro Nakamura
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
Monaca
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
Akira Inoue
2011年マイクロソフト テクノロジー振り返り~開発編~
2011年マイクロソフト テクノロジー振り返り~開発編~
Takeshi Shinmura
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Akira Inoue
Gaming cicd-pipeline gaming-technight-2
Gaming cicd-pipeline gaming-technight-2
Amazon Web Services Japan
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版
Yoshito Tabuchi
20200528_AWSでサーバーレスなLINEBotLIFFアプリ環境をIaCな感じで構築するよ!.pdf
20200528_AWSでサーバーレスなLINEBotLIFFアプリ環境をIaCな感じで構築するよ!.pdf
Sumihiro Kagawa
.NET ラボ 勉強会 C# でラインプラットフォーム開発
.NET ラボ 勉強会 C# でラインプラットフォーム開発
Kenichiro Nakamura
Similar to LINE お絵描きハンズオン 2019.04.26
(20)
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
Kilimanjaro Event
Kilimanjaro Event
Dev camp2012jpn day2special
Dev camp2012jpn day2special
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Web App Framework at SwapSkills vol28
Web App Framework at SwapSkills vol28
【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜
【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Realm platform2019
Realm platform2019
MTDDC 2019 LINE ボットからみた MT Data API の可能性
MTDDC 2019 LINE ボットからみた MT Data API の可能性
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
2011年マイクロソフト テクノロジー振り返り~開発編~
2011年マイクロソフト テクノロジー振り返り~開発編~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Gaming cicd-pipeline gaming-technight-2
Gaming cicd-pipeline gaming-technight-2
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版
20200528_AWSでサーバーレスなLINEBotLIFFアプリ環境をIaCな感じで構築するよ!.pdf
20200528_AWSでサーバーレスなLINEBotLIFFアプリ環境をIaCな感じで構築するよ!.pdf
.NET ラボ 勉強会 C# でラインプラットフォーム開発
.NET ラボ 勉強会 C# でラインプラットフォーム開発
More from K Kimura
ThinkPad を自慢できると聞いてやってきました
ThinkPad を自慢できると聞いてやってきました
K Kimura
IBM FamilyDay 2022 - 帰ってきた LINE 手描きスタンプ
IBM FamilyDay 2022 - 帰ってきた LINE 手描きスタンプ
K Kimura
「プライベート版 Heroku」の "dokku" は Cloud Foundry 代替としてどこまで使えるか?
「プライベート版 Heroku」の "dokku" は Cloud Foundry 代替としてどこまで使えるか?
K Kimura
LINE お絵描きスタンプが NFT 対応するかも
LINE お絵描きスタンプが NFT 対応するかも
K Kimura
ICFO2021 コロナ時代のオンラインハンズオン体験
ICFO2021 コロナ時代のオンラインハンズオン体験
K Kimura
IBM Family Day 2020 - LINE で手描きスタンプに挑戦!
IBM Family Day 2020 - LINE で手描きスタンプに挑戦!
K Kimura
マンホールマップ10周年 20200725
マンホールマップ10周年 20200725
K Kimura
MashupAward6 Manholemap(2010)
MashupAward6 Manholemap(2010)
K Kimura
スライドパズルハンズオン資料
スライドパズルハンズオン資料
K Kimura
ユーザー投稿型位置情報プロットシステム - マンホールマップ
ユーザー投稿型位置情報プロットシステム - マンホールマップ
K Kimura
Scratch でゲームプログラミング
Scratch でゲームプログラミング
K Kimura
空耳アワーマシーンを作ってみた
空耳アワーマシーンを作ってみた
K Kimura
生まれ変わるマンホールマップ
生まれ変わるマンホールマップ
K Kimura
地図データでレースゲームを作って遊ぼう!
地図データでレースゲームを作って遊ぼう!
K Kimura
AI先生と外国語会話を練習しよう!
AI先生と外国語会話を練習しよう!
K Kimura
IBM Watson IoT を用いた遠隔ゲームコントローラーと Node-RED による簡易カスタマイズによる実現
IBM Watson IoT を用いた遠隔ゲームコントローラーと Node-RED による簡易カスタマイズによる実現
K Kimura
「テトリスを作ってスマホで振って遊ぼう!」ハンズオン資料
「テトリスを作ってスマホで振って遊ぼう!」ハンズオン資料
K Kimura
Hyperledger Hands-on 2019-03-30 @ Singularity HIVE
Hyperledger Hands-on 2019-03-30 @ Singularity HIVE
K Kimura
ブロックチェーン体験 「ブロックを作って、チェーンでつないで、理解しよう!」
ブロックチェーン体験 「ブロックを作って、チェーンでつないで、理解しよう!」
K Kimura
IBM Cloudant の細かすぎて伝わりにくい機能(その2) データの変更履歴が自動管理できるらしい
IBM Cloudant の細かすぎて伝わりにくい機能(その2) データの変更履歴が自動管理できるらしい
K Kimura
More from K Kimura
(20)
ThinkPad を自慢できると聞いてやってきました
ThinkPad を自慢できると聞いてやってきました
IBM FamilyDay 2022 - 帰ってきた LINE 手描きスタンプ
IBM FamilyDay 2022 - 帰ってきた LINE 手描きスタンプ
「プライベート版 Heroku」の "dokku" は Cloud Foundry 代替としてどこまで使えるか?
「プライベート版 Heroku」の "dokku" は Cloud Foundry 代替としてどこまで使えるか?
LINE お絵描きスタンプが NFT 対応するかも
LINE お絵描きスタンプが NFT 対応するかも
ICFO2021 コロナ時代のオンラインハンズオン体験
ICFO2021 コロナ時代のオンラインハンズオン体験
IBM Family Day 2020 - LINE で手描きスタンプに挑戦!
IBM Family Day 2020 - LINE で手描きスタンプに挑戦!
マンホールマップ10周年 20200725
マンホールマップ10周年 20200725
MashupAward6 Manholemap(2010)
MashupAward6 Manholemap(2010)
スライドパズルハンズオン資料
スライドパズルハンズオン資料
ユーザー投稿型位置情報プロットシステム - マンホールマップ
ユーザー投稿型位置情報プロットシステム - マンホールマップ
Scratch でゲームプログラミング
Scratch でゲームプログラミング
空耳アワーマシーンを作ってみた
空耳アワーマシーンを作ってみた
生まれ変わるマンホールマップ
生まれ変わるマンホールマップ
地図データでレースゲームを作って遊ぼう!
地図データでレースゲームを作って遊ぼう!
AI先生と外国語会話を練習しよう!
AI先生と外国語会話を練習しよう!
IBM Watson IoT を用いた遠隔ゲームコントローラーと Node-RED による簡易カスタマイズによる実現
IBM Watson IoT を用いた遠隔ゲームコントローラーと Node-RED による簡易カスタマイズによる実現
「テトリスを作ってスマホで振って遊ぼう!」ハンズオン資料
「テトリスを作ってスマホで振って遊ぼう!」ハンズオン資料
Hyperledger Hands-on 2019-03-30 @ Singularity HIVE
Hyperledger Hands-on 2019-03-30 @ Singularity HIVE
ブロックチェーン体験 「ブロックを作って、チェーンでつないで、理解しよう!」
ブロックチェーン体験 「ブロックを作って、チェーンでつないで、理解しよう!」
IBM Cloudant の細かすぎて伝わりにくい機能(その2) データの変更履歴が自動管理できるらしい
IBM Cloudant の細かすぎて伝わりにくい機能(その2) データの変更履歴が自動管理できるらしい
Recently uploaded
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
masakisaito12
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
ユニパー株式会社
Service-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadership
Yasuyoshi Minehisa
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店
ssuserfb441f
20240427 zaim academy counseling lesson .pdf
20240427 zaim academy counseling lesson .pdf
ssuser80a51f
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
KayaSuetake1
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdf
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdf
masakisaito12
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ 株式会社
Recently uploaded
(8)
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
Service-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadership
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店
20240427 zaim academy counseling lesson .pdf
20240427 zaim academy counseling lesson .pdf
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdf
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdf
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
LINE お絵描きハンズオン 2019.04.26
1.
IBM Cloud Community
Summit 2019 LINE でお絵描きメッセージを送ってみよう 2019.04.26 #bmxug #bmxgg
2.
大まかな流れ 0. 諸準備 • IBM
Cloud へログイン • cf ツールインストール • LINE Developer アカウント 1. IBM Cloudant の用意 • 画像データベース 2. Node.js アプリケーションのデプロイ • お絵描きアプリケーション 3. LINE Developer での操作 • LINE アプリとの連動設定
3.
0. 諸準備
4.
システム構成 トークルーム Node.js 画像 DB LIFF LIFF(LIne Front-end
Framework) によって LINE アプリの中でお絵描きウェブアプリを呼び出し、 LINE とシームレスに連携して画像をトークルームに送信する
5.
IBM Cloud へログイン
(1) https://cloud.ibm.com/
6.
IBM Cloud へログイン
(2)自分のアカウント名になっていることを確認
7.
cf ツールインストール https://github.com/cloudfoundry/cli/releases 自分の利用環境にあったものを選んでダウンロード&インストール
8.
LINE Developers(1) https://developers.line.biz/ja/
9.
LINE Developers(2)
10.
LINE Developers(3)
11.
LINE Developers(4) 「確認する」 → 「作成する」 でプロバイダーを作成 プロバイダー名(個人名)を入力
12.
LINE Developers(5) プロバイダー名を選択
13.
LINE Developers(6) 新規にチャネルを作成
14.
LINE Developers(7) Messaging API
を選択
15.
LINE Developers(8)
16.
LINE Developers(9) ※ アプリ名に
"LINE" が含まれては駄目、らしいです
17.
LINE Developers(10)
18.
LINE Developers(11)
19.
1. IBM Cloudant
の準備
20.
IBM Cloudant の準備
(1) Cloudant サービスを未作成の場合
21.
IBM Cloudant の準備
(2)
22.
IBM Cloudant の準備
(3)
23.
IBM Cloudant の準備
(4)
24.
IBM Cloudant の準備
(5)
25.
IBM Cloudant の準備
(6)
26.
IBM Cloudant の準備
(7)
27.
IBM Cloudant の準備
(8)
28.
IBM Cloudant の準備
(9)
29.
IBM Cloudant の準備
(10)
30.
IBM Cloudant の準備
(11)
31.
IBM Cloudant の準備
(12) この中の( username と password の)値を後で使います
32.
IBM Cloudant の準備
(13) 右クリック
33.
2. Node.js アプリケーションのデプ ロイ
34.
Node.js アプリケーションのデプロイ (1)
35.
Node.js アプリケーションのデプロイ (2)
36.
Node.js アプリケーションのデプロイ (3) ダラスを選択 他の人が使っていないアプリ名(例 名前
-lineoekaki ) 128 MB または 64MB を選択
37.
Node.js アプリケーションのデプロイ (4)
38.
Node.js アプリケーションのデプロイ (5) https://github.com/dotnsf/line_liff_doodle git
clone するか、 download して展開
39.
Node.js アプリケーションのデプロイ (6) (デスクトップ上にそのまま展開したと仮定して以降を説明します)
40.
Node.js アプリケーションのデプロイ (7) settings.js
をテキストエディタで開く
41.
Node.js アプリケーションのデプロイ (8) exports.db_username
の値を cloudant の接続情報で確認した username の値に、 exports.db_password の値を同 password の値に書き換えて保存。
42.
Node.js アプリケーションのデプロイ (9)
43.
Node.js アプリケーションのデプロイ (10) > cd
Users (ユーザー名) Desktopline_liffdoodle-master cd と入力してから エクスプロラーのフォルダ部分を ドラッグ&ドロップして Enter キー
44.
Node.js アプリケーションのデプロイ (11) > cf
login -a https://api.ng.bluemix.net/ -u ( IBM Cloud のログイン名) パスワードなどを入力
45.
Node.js アプリケーションのデプロイ (12) > cf
push (アプリ名)
46.
(おまけ) LIFF とその挙動につ いて
47.
LIFF (LIne Front-end
Framework) とは? • 2018 年6月に 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.
2. Node.js アプリケーションのデプロイ(の続 き)
53.
Node.js アプリケーションのデプロイ (13) ↑ 上記のような状態になればデプロイ成功
54.
Node.js アプリケーションのデプロイ (14)
55.
Node.js アプリケーションのデプロイ (15) ブラウザ上でお絵描きアプリが動くことを確認
56.
Node.js アプリケーションのデプロイ (16) 線の色 線の太 さ 背景色 に設定 アンド ゥ リドゥ 初めから やり直し 送信 ※ この時点ではまだ「送信」できません
57.
3. LINE Developer
での操作
58.
LINE Developer での操作
(1)
59.
LINE Developer での操作
(2)
60.
LINE Developer での操作
(3)
61.
LINE Developer での操作
(4)
62.
LINE Developer での操作
(5) LIFF URL をなんとかして自分の LINE に(自分のスマホに)送る。 LINE のどこかのトークルーム内のメッセージにする
63.
LINE Developer での操作
(6)
64.
LINE Developer での操作
(7) LIFF URL を友人と共有して遊ぶ
65.
お願い! 良さ気な作品ができたら(できなくても)、 画像をコピー&ペーストして #bmxug タグを付けて Twitter
でもつぶやいてください! この後の記念撮影時の背景にします。。。
66.
(おまけ)ソースコードについて
67.
興味がある方はソースコードを改良してみて ! (1) app.js - お絵描き画像の
DB 保存 - お絵描き画像の取り出し (2) public/index.ejs - アプリケーションのユーザーインターフェース (HTML) - LIFF SDK を使った LINE への画像送信 ① お絵描き画像送信 ② 画像格納 ③ 画像 URL 返却 LIFF ④LIFF SDK を使って LINE に画像送信 実質的なソースコードはファイル2つのみ
68.
Q & A
69.
IBM Cloud Community
Summit 2019 LINE でお絵描きメッセージを送ってみよう 2019.04.26 #bmxug #bmxgg
Download now