「ミニアプリ(LIFFアプリ) LT祭り!」に登壇してみた&技術的な補足

約3年ぶりにブログを書きます。Qiitaやnoteに書いていてあまりこのブログの出番がありませんでしたが、これからはこのブログに技術共有や登壇話をしていくようにしようと思います。というわけで今回はLT登壇した話をします。先日LINE Developers主催のイベントに登壇してきました。

linedevelopercommunity.connpass.com

イベントのアーカイブ動画はこちらです。50:43からが僕のパートです。


ミニアプリ(LIFFアプリ) LT祭り!

ここでは1年前に深センの企業視察ツアーで訪れた無人コンビニを体験したことをふと思いだして試しにLINEで実装してみた話をしてみました。その時の登壇資料はこちら↓

speakerdeck.com

資料の最後に載せていますが、今回作ったアプリのソースコードは下のGithubレポジトリで公開しています。

github.com

本当はデモをしたかったのですが、やはり5分では足りず概要だけの内容になってしまいました…というわけでこのブログではその補足記事を書いていきます。

※ここではシステムの概要を紹介するだけなので、細かい手順に関してはレポジトリのREADMEをご確認ください

システム構成

f:id:KMiura:20200728002455p:plain

入口にあるQRコードを読み込んだら入店処理を行い店内に入ります。確か1度に店内に入れるのは1組だけだったはずです(2人以上で入ることはできるけど支払いは入口でQRスキャンした1人が代表して支払うイメージ)。そして商品を選んで出口に行くと小部屋があり、そこに閉じ込められてQRを読むと選んだ商品がまとめて集計されてその合計金額をWe Chat Payで支払ってコンビニを出るという流れでした。それをLINEに置き換えたのが上のシステム構成です。(あくまで予想です)

開発環境

今回はバックエンドとしてFlaskを使いました。作っていてDB操作とレンダリングを1ファイルで行っていてコード量が多くなったのでやっぱりDjangoでやれば良かったかなー?とも思いました。そしてアプリはおなじみのheroku上で動かすので、herokuで無料で使えるPostgresをDBにしました。SQLAlchemyを使ってDB操作をしているのでローカルでsqliteを使っても動くと思います。そしてLIFFのHTMLについては特にフレームワークを使わずにBootstrapで見た目を整えているので特に特別なことはしてません。

作成したLIFF

今回はパターンに応じて3つのLIFFを用意しました。もしお手元でアプリを動かすときはLIFF IDを3つ用意します。

  • チェックイン用
  • チェックアウト用
  • 上2つのアプリを呼び出すためのQRコードリーダー

QRコードリーダーに関してはLINEアプリに最初からあるQRコードリーダーを使ってもいいかなと思いましたが、LIFFのQRコードリーダーを試してみたかったので、リッチメニューからLIFF IDだけ読み取ってJavaScript側でLIFF URLを作成して各アプリを立ち上げるようにしてみました。LIFFのQRコードは読み取った値に対して次何の処理をすればいいのかをプログラムで記述できるので、これはやれることが色々増えてると思い、いい勉強になりました。( iOS版LINEバージョン9.19.0以降では技術的な問題があり使用できないようですが…)

QRコードについてはこちらの記事が参考になりました!

qiita.com

チェックイン

チェックインボタンを押して、裏側でリクエストを投げることでチェックイン処理をしています。LIFFではユーザーIDを取得するAPIがあるのでそれを使えば簡単にユーザ情報を取得できます。

チェックアウト

チェックアウトのときの決済についてはチェックアウトのLIFFを起動したときに購入した商品の一覧が出力されて、問題なければ決済ボタンを押して決済をします。決済に関しては今年のはじめにリリースされたLINE Pay SDKを使ってみました。最初リクエストボディの設定をミスっていてエラーを探すのに手こずりましたが、使い方がわかると本当にわかりやすいSDKだと思います。何よりLIFFと相性がいい決済システムはいいですよね。

商品のスキャン

実際の深センのコンビニでは不正を防ぐために出口のQRコードを読むと選んだ商品をまとめてスキャンするのですが、調べてもやり方がよく分からなかったので、実現できる範囲の妥協策としてSONYPaSoRiを使いシール式のNFCタグを読み取ってトランザクションデータを登録する仕組みを入れています。NFCについては今回初めて触りましたが結構便利だし、簡単にタグに情報を書き込めるのはいいですね。

タグに書き込むコードと読み込んでサーバーにリクエストするコードはGithubのレポジトリのNFCディレクトリに掲載しています。ソースコードを見るとNFCタグを読み込んだらHTTPリクエストでサーバーにトランザクションデータを登録する仕組みなのでHTTPリクエストを送信できるようにするならQRコードやふつうのバーコードを用意してリーダーで読み込む方法もありだと思います。

完成品

実際の動作がこちらになります。スマホでとった動画と画面キャプチャをつなぎ合わせたらTikTokみたいな動画になりましたw


LINEで自動決済システム作ってみた

まとめ

今回は1年前の記憶を頼りに深セン無人コンビニのシステムをLINEで実装してみました。久々にそこそこ大規模なプロトタイピングをしていたら思いの外LINEのAPIをフル活用したシステムができました。4連休をこのネタ作りに費やしましたが、久々に自分のペースで作りたいものを作れた気がします。すでにあるものを自力で再実装するのは仕組みを考えることができて楽しいものです。そして他の方の素晴らしい発表を通じてLINEのAPIのポテンシャルを改めて実感しました。次は何作ろうかな?

Google Home開封の儀

 

どうも!1ヶ月ぶりぐらいの更新ですね。というわけで今回はGoogle Homeを買ったので開封レビューをしたいと思います。僕はビックカメラで買ったのですが、ビックカメラにはお試しコーナーがあり、色々試したんですよ。動画を流したり、電気をつけたり…すげーな、これ!最初は安かったし、Google Home miniでもいいかなとは、思ったけど、とにかくパワフルな音と音声以外のUIも備わっている所に惹かれて普通のGoogle Homeを買ったわけですよ。

f:id:KMiura:20171008220146j:plain

さあ、それではパッケージを見てみましょう。

f:id:KMiura:20171008221741j:plain

はい、なんでChromcastがあるのかというと、ビックカメラではなんとGoogleHomeを買うと、タダでもらえるんです。でも、家のリビングでテレビを見ることがないので、しばらくは使いそうにないです(笑)というわけでChromcastはいつかまた使います…(多分)

開封の儀

では、いよいよ開封の儀

f:id:KMiura:20171008223244j:plainパッケージのわりに随分小ぶりですね。本体をどかすと…

f:id:KMiura:20171008223417j:plain

親切に使い方が書かれています。

f:id:KMiura:20171008223533j:plain

さらにこんな会話事例も紹介されています。「ヒマ」なんて言われても何もしようがない気がしますが(笑)

f:id:KMiura:20171008224203j:plain

付属品はこの電源コードだけです。うーんシンプル。では、電源入れましょうか!

f:id:KMiura:20171008220108j:plain

GoogleHome「GoogleHomeへようこそ。本体の設定がされておりません。『GoogleHomeアプリ』から設定をできます。」

ということで、アプリで設定を行い、何かやってみます。

とりあえず会話してみた

僕「お名前なに?」

Home「私はGoogleAssistantです。よろしくお願いいたします。」

おー律儀だ。

僕「今日の天気は?」

Home「今日の気温は19度。晴れるでしょう。現在19度、晴れです。」

天気予報のごとくご丁寧に対応してますね。

僕「早口言葉を言って」

Home「早口言葉ですね。わかりました。どん底どん底どん底…」

これって当てつけなのか…ならば、

僕「ヒマ」

Home「是非、私とお話ししましょう。私に何か聞きたいことがあれば、話しかけてください。」

なんていい子なんだ!そういう返しも入ってたのか!

この他にも、SpotifyGoogle Play Musicと連携すれば音楽をかけれたり、家電のコントロールをできたりします。そして今後このGoogleHomeでできることも増えてくるようなので楽しみですね。やろうと思えば自分でも機能を追加できるかもしれないので、色々遊んで見たいと思います。では!

 

おまけ

音楽をかけて見たら、見た目のわりに低音がすごくパワフルな音が出るんですよね。というわけで下のネットの部分を外せたので外してみました。

f:id:KMiura:20171008231925j:plain

なるほど。ウーファーが入っているんですね。音楽聴く皆さん、これおすすめです。

PyConJP 2017に参加してみた(Tutorial込み)

f:id:KMiura:20170912230146j:plain



9月8日・9日に年に1度のpythonプログラマ(pythonista)のための祭典「PyConJP 2017」が開催されました。僕は今回が初参加であり、python書き始めて1年経ちます。たった1年ではありますが、意外とC言語よりも早くプログラムの感覚がつかめるようになりました。そして、技術に対して強い関心を持つようになって来たわけです。その結果が今回のPyConの参加なわけです(笑)話がそれましたが早速どんなことがあったかまとめていきます。

 

Tutorial

カンファレンスは8日と9日にありましたが、その前に9月7日にTutorialが行われました。このイベントはpythonに関する様々なチューリアルを行われました。どれも良かったので迷いましたが、今回はキカガクさんが行った「Chainerで学ぶディープラーニング入門 」を受講しました。PyConなのでガッツリプログラミングをやるのかと思いきや前半ではディープラーニングを作る上で必要な数学を紹介されました。数学の知識があったことで後半のプログラムの講座の内容が頭に入りました。キカガクさんはこれまでディープラーニングの講座を何回もやられていることもあり、話がわかりやすかったです。6時間だけでも物足りなかったですね。

カンファレンス 1日目〜オープニング〜

カンファレンス1日目が始まりました。張り切って受付時間前に来たら、朝からお弁当の山があったのですが、これはお昼かなと思いきや朝食で参加者も自由に食べていいものだったようです。朝食が出ないと思っておにぎりを買ってきてしまった…orz

オープニングが始まり最初のコンテンツ、基調講演 です。スピーカーはなんとAnacondaで有名なContinuum Analyticsの共同設立者でCTOのPeter Wangさんです。Anacondaができるまでの話や海外のpythonコミュニティー事情などを話していました。そして、このトーク内で特に印象的だったのは海外ではpythonが広く使用されていることです。その証拠となるのがトーク中に紹介されたYves Saint Laurentの公式動画です。

www.youtube.com

おしゃれな男性の仕事風景を映した動画ですが、この中にこんなシーンが出てくるのです。

f:id:KMiura:20170912234603p:plain

はい、IPythonです(笑)

ITとはかけ離れた分野でもこうしてPythonが登場することを紹介した例を取り上げるなど、ユーモアを交えたとても楽しい講演でした。

さて、オープニングが終わりひとまずスポンサーブースを色々回ることにしました。どの企業も何かしらの形でPythonを使っているので、実際Pythonがどんなところで使われているのかを聞いたりできるし、今まで聞いたことのない企業もあり事業内容を聞いてみたり就活の時とは違った発見をできました。(僕はほんの数ヶ月前まで就活をしていた大学生です。)

メディア会議

お昼の時間になり今度はメディア会議を見学しました。

f:id:KMiura:20170913010805j:plain

技術書の著者、そして編集者が登壇し、1冊の本ができるまでの話、書いてる最中の苦労話などを聞くことができました。1冊の本を書くのは大変な作業ですが、書こうと思えば会社員でも書けるということが分かりました。いつか本を書けるぐらいの実力をつけてみたいですね。

1日目〜トーク

トークも色々聞かせていただきました。その中で特に印象的だったトークを紹介します。

pycon.jp

PythonGUIアプリを作るためのライブラリ「Kivy」の紹介でした。PythonGUIアプリを作るためにtkinterを使っていましたが、Kivyだとスマホアプリを作ることができたり、アニメを作ったり、マップを表示させたりなんでもできると感じました。そして当日発表に使ったスライドもKivyで作られていたのです。実際に有志でKivyの日本語サイトの翻訳をされている方のお話は貴重でした。

 

pycon.jp

Pythonのlen()関数がどのようにして動作するのか、そしてif文、for文が動く仕組みを知ることができて、今まで気にかけることがなかったことを知ることができました。30分で収まりきらないぐらいの濃い内容でスライドも図が分かりやすかったです。

 

pycon.jp

ドローンでRaspberry Piでコントロールする話でした。Rasberry Piを使っていることもあり、自分が今までやってことのあることと照らし合わせながら聞けました。最後のデモンストレーションでは実際に動作して、参加者からは歓声が上がりました(笑)

パーティー

 1日目の最後にはパーティーがありました。会場の早稲田大学のエントランスとカフェテリアでいろんな料理やお酒を楽しみました。そして、いろんな方とお話することができ、楽しい時間でした。

 2日目〜オープニング〜

というわけで2日目です。2日目も受付時間に会場につき、ちゃんと朝食もいただきました(笑)

めちゃめちゃボリューミー!朝からお腹いっぱいです。

朝食を済ませ、2日目の基調講演です。この日はpandasやその関連パッケージの開発を行なっている堀越さんの講演でした。

youtu.be

OSS活動に参加することは難しいことじゃないことが伝わってきたお話でした。その中で特に印象的だったのが「英語は出来なくてもしっかり伝えることが大事」ということです。英語とプログラム言語という2つの共通言語で世界と繋がるのはなんだか素敵なことですね。

ジョブフェア

お昼にはジョブフェアでした。

pycon.jp

今回はパネルディスカッション、LTの2部構成です。パネルディスカッションの部では世界勤務をされたことのある方々のお話を聞くことができました。日本はまだまだグローバル化の傾向が無い気がするので、こういった方々のお話を聞くことができるのは貴重です。話の中では「英語を話すならまずはそういう環境に身を置くのがいいですよ」という話が出てきました。これは確かに納得しました。僕もだいぶ前にちょっとの間イギリスに留学していましたがだんだん英語に慣れていったからこそこの言葉は響きました。それでも最終的に英語より機械学習を勉強したいという人が多数でした(笑)仕方ないですよね。だってPyConJPですからね(笑)

LTの部ではスポンサー企業の方々がpythonに絡めた会社紹介そされていました。事業内容よりも技術的なお話がメインだったので興味深かったです。時間の関係で前日の夕方にも一部の企業のLTがありました。その中で一番よかったのが、LINEさんのLTです。

 

LINEさんは採用の話ではなくがっつり技術的なお話があってLTらしい発表でした。

2日目〜トーク

2日目も素晴らしいトークを聞くことができましたが、その中で印象的だったトークを紹介します。

pycon.jp

PyConでは数少ないハードウェアのお話でした。Pythonでセンサ情報を取得すれば、科学計算のライブラリが充実しているPythonだけでIotの環境を構築するのは開発効率がいいと思いました。デモンストレーションではウェブサイトで温度センサから取得したデータを描画したグラフをリアルタイムで表示していました。

 

pycon.jp

これはiRidgeさん主催のクイズ大会です。今まで聞いたことのないPythonの豆知識がたくさん登場し、Pythonのことを別の角度から知ることができました。

例えばこんな問題が出ました(笑)

 

LT

トークも一通り終わるとLTの時間です。

これは参加者の方が先着順で話したことを思い思いに話す時間です。LINE BOTで彼女を作る話や医学系の勉強をしている人がPythonでデータ解析をした話など朝に申し込んで用意したとは思えないくらい魅力的な発表でした。いつかこうしてLTしてみたいですね。

 

2日目〜エンディング〜

2日目のエンディングではスポンサー企業が用意した賞品をかけたビンゴ大会がありました。時間短縮のために四隅も開けてのスタートです。いきなり大量のリーチ続出で驚きました。これは賞品はないなと思いきや僕のカードもリーチになり、可能性が見えてきました。そして、

なんとGROOVE XさんのTシャツが当たりました!今回の賞品の中で欲しかったものの一つだったのでテンションが上がりました。

 

まとめ

初めてPyConに参加しましたが、今までPythonを触ってきたからこそ話が合うこともあればまだまだ勉強不足だと感じることもあったりして、これからさらに勉強していきたいと思うようになりました。

IMG_4875

 カンファレンスは全体的に温かい雰囲気でPython歴1年になる僕でも形見の狭さを感じなかったぐらいです。また来年も参加したいです。みなさんお疲れ様でした!

 

では!

 

 

ブログ初めてみたんすけど

どうも初めまして、KMiuraです。僕は愛知県に住む大学生です。普段は工学系の勉強をしており、機械いじったりプログラミングをやったりしてます。地元のベンチャー企業でアルバイトをしていてそこではブログを書く機会が多いのですが、こうして個人のことをブログを書くことはまずないわけです。誰がプライベートのブログなんかを読んで楽しむんだろうって思うんですよ(笑)そう思ってるのになんでブログを始めようと思ったのか今日は最初のブログとして書き綴りたいと思います。

 

1.勉強会やカンファレンスの記録を書いてみたかったから

 僕はここ最近いろんな勉強会やカンファレンスに行くのですが、見聞きしたことをそのまま明日から実践できればいいのですが実際そんなにすぐ実践できるわけではありません(笑)ということは勉強したっきりで終わってしまっています。勉強するのはいいことだけど、それを振り返って、アウトプットできる場を作らないといけないなと思ったわけです。だからこのブログでそのアウトプットをしていこうと思ったのです。

2.日頃の愚痴や考えを書き残したい

 僕はあんまり自分の考えや愚痴をSNSに投稿することは滅多にないですが、普段考えていることや愚痴を友達に話す機会がないし、うまく言えない気がするんですよ。こうやってブログで書くと文章で自分の考えを整理できて頭の中も整理できるんじゃないかと期待してたりします。

3.綺麗にまとまるから

 愚痴なんてSNSで書けばいいじゃんとは思うのですが、僕はTwitterで短くまとめるのはできないですし、Facebookなら字数制限はないものの長々と書いたものを友達が読むのは読みにくいしまどろっこしく感じるんじゃないかなぁと思うんですよ。だったらこういうブログなら読みやすくレイアウトできるから、長い文章でも整理できるし後で読みやすいんじゃないかと思いました。

グロースファクター 薄毛対策

 

はい、というわけで気まぐれでブログをこれから描いていきたいと思います。誰も読まないかもしれませんがこれからどうなって行くのかお楽しみに!

とりあえず、次回はこの間参加したPyConJPの話をしたいと思います。結構いろんな方がすでにいろんな投稿しているので僕も早く書きたいと思います。