FlutterとLINE APIで育児に役立つサービス作ってみた 関崇史 @sekitaka_1214 #LINEDC
LINE Developer CommunityはLINE APIに関連する最新情報や開発Tipsを共有するコミュニティです。
2022年5月に行われたLINE DC Monthly LT #2 - 【LINE と 個人開発のTips共有会】では、個人でLINE APIを活用した開発事例が発表されました。この記事では「かおなまいっち」というサービスを個人開発した関さん(@sekitaka_1214)の登壇を紹介します。
自己紹介
LINE APIとFlutter WEBでサービスを作ってみたというテーマでLTします。関崇史と申します、ツイッターアカウントはこちらsekitaka_1214です。普段はフルスタックエンジニアとして、Web,iOS,Android,Flutterそれからバックエンドの開発といろいろ手広くやっています。好きなことは、ヨガ、ランニング料理、日本酒です。日本酒が好きなんですけど、今禁止中です。最近やっていることとしては、YouTuberを目指して配信についてキャッチアップしているところです。こんな風にちょっとボディーランゲージ入れてみたり、歓声とか聞こえますかね。こういう効果音を鳴らしたりする練習をしています。
かおなまいっちとは
作ったサービスを紹介させてください。私は2歳の息子と5歳の娘の父親でもあります。
実際に育児していくにあたって、小さい子供の親だと、どうしても保護者がLINEグループを作るっていうのが、最近の育児のトレンドです。LINEグループってLINEのアイコンとその人の本当の顔が一致しないことが結構あります。そういうのもあって、なかなか顔と名前が覚えられないことがあるなっていう問題を自分でも感じてました。
さっきのヤマタケさんのLTでいうとマーケットイン思考、自分が欲しいものを作りました。LINEのグループ内で開くことができるWEBアプリです。メンバーの顔と名前、子どもの顔と名前もわかります。こんな感じでですね、とある幼稚園のグループにこういう幼稚園のグループにかおなまいっちの公式アカウントを追加すると、こういったリンクが送られてきます。そこからLIFFのウェブページが起動します。ここで事前に登録されたその人の顔や子どもたちの顔をお迎えでよく来るおばあちゃんとかの顔、そういうのがわかるようになります。
かおなまいっちの技術要素
公式アカウントのリッチメニューから開くこともできます。使っている主な技術はこちらです。今回、LINE Messaging APIを使っています。それからLIFFというLINE Frontend Frameworkと呼ばれるものを使っています。これはLINE内でウェブアプリを動かせるフレームワーク、SDKみたいな位置づけだと思っています。
それからFlutterです。Flutterは何かといいますと、もともとはiPhone,Androidのアプリをワンソースで開発できるようになるフレームワークでした。バージョン2でウェブアプリも作れるようになったので今回Flutterを使ってWEBアプリを作ることにしました。バックエンドのデータはFirebaseで管理しています。主にFirestoreにデータを保存するという使い方をしています。Firebaseを選んだ理由は、開発効率の高さからです。
使用したLINE API群
LINEのAPIはこういうものを使っています。特に大事だったのはwebhookです。かおなまいっちの公式アカウントがグループに追加された時に、先程のURLを送る返信するもの。新しいメンバーが来た時に、ようこそメッセージを表示するためにwebhookを使ったりしています。あとはユーザーのプロフィールを取るためにプロフィールAPI。グループの名前とかを利用したかったので、グループのサマリーのAPIを使っています。
それから返信APIですね。これはマネタイズの方でも使いたいと思っていて、例えば純広を出せるようになったら、グループへの返信で広告を配信する。そういう使い方をしたいなと思っています。育児のLINEグループってなかなか通知をオフにされにくい部分があると思うんですね。必ず見てもらえる広告ですよ。そういう触れ込みで広告を配信したいなと思っています。まだできてないです。
LINEBot開発する上で、Flutter Webのいいところ5つ
何でFlutterを使ったんですかっていうお話です。まず1つ目は単純にFlutterが好きだったからです。モバイルアプリiOS,Androidの開発でFlutterを使ってたんですけども、その開発体験がそれまであったクロスプラットフォームに比べて格段に良かったので、とにかくFlutterがすごい好きになってます。なのでFlutterで作れるんだったら、何でも作りたいなと思ってます。もう一つは大きい理由として、CSSが書きたくないっていうのがありました。WEBの開発もわりとVueとか他のフロントエンドのフレームワークも書けるんですけど、CSSでの微調整が何か苦手で。時間がかかる割に思い通りに作れないとか、結構あってでCSSをちょっと避けたかったっていうのがありますね。とにかくサービスを作り上げたかったので。
Flutter Webを使って見て実際にどうだったのかというお話します。まずFlutter Webのいいところです。CSSは本当に1行も書かずに済みました。バンザーイ！公式パッケージで簡単にマテリアルデザインを適用することができました。
ほかのフロントエンドフレームワークだと、結構サードパーティーのライブラリを適用みたいなイメージがあるのでサードパーティーのライブラリを使うと、本家のバージョンアップについてきてくれるのかみたいな心配がつきまとうんで、Flutterはそこがないのもすごい好きなところです。余計なハマりがなくて、機能の開発に集中できました。
Flutterでモバイルアプリ開発ができたら、Webのフロントも作れるっていう状態に今のFlutterはなってるんで、そこもすごいいいところだと思います。Reactとかは逆の流れでしたね。WEBのJS側のフレームワークが最初にあって、後からモバイルアプリも作れるようになりましたっていう。ReactNativeとFlutterはそういう意味で逆の関係にあるような気がします。
Flutterのいいところはそのまま活かせます。Dartでかけるところとかウィジェットが完全に独立してて、親のウィジェットのデザインの影響とかをあんまり受けないところとか、そのまま活かせます。
LINEサービスをFultter Webで開発して大変だったところ5つ
逆にFlutter Webの大変だったところです。まず、ルーティングが大変でした。モバイルアプリの場合は最初に起動する画面があって、ボタンを押されたら次の画面に行きますが、WEBの特性としてはあるURLに直接ユーザーがアクセスしてくることがあります。アクセスしてきたURLに、適切なコンテンツを表示しなきゃいけない。LINEの認証とかが絡むとクエリストリングを適切にハンドリングしなきゃいけないし、認証してるかしてないかで、どのページを出すか分けなきゃいけない。その辺が結構Flutter Webだと辛かったです。最終的には結局、こういう風にIF文で。泥臭く分岐をひたすら書いていったという作りになりました。
JSとの入出力ごとにモデルを定義するのが面倒でした。これはLIFFのデータSDKはJavaScriptのライブラリーで提供されてます。それを呼ぶときにliff.initとか呼べばJavaScriptではいいんですけれども、Dartではそれを呼ぶために、こういうふうにハブになるようなクラスを定義していかなきゃいけないんですね。LIFFクラスを定義してLIFF関数を定義する。さらに引数が必要だったら、その引数に対応するモデルクラスを作る。そういう紐付けがいちいち必要だったので、大きくJavaScriptのライブラリに移動する開発をするのはちょっとつらそうだなと思っています。
Hotリロードが効かなくて、アプリの開発より少し開発効率が悪かったなと思います。Flutterと言えば、HotリロードっていうぐらいFlutterのHotリロードは素晴らしいんですけど。ある画面を開発していて、コードを変更したら、その画面にいるまんま見た目が変更される。見た目だけじゃなくて、ロジックも変更されるんですねで、そのHotリロードがすごく開発。効率が良くて好きな部分なんですけれども、それがWEBの場合は効かなくてちょっとつらかったです。毎回、インデックスページに戻ってしまうような動きをしてました。
SEOは弱そうです。あと、広告を表示するのも、現時点では簡単に広告表示できるライブラリーみたいなものはなくて、まずHTMLのDOMをDart側からちょっとずつ操作していくような、aタグ付けってイメージタグで作ってみたいな。そういうのが必要そうだったので、広告便利に使うみたいなのは、もうちょっと先なのかなと思っています。
個人開発のマネタイズはこれから
最後にお金の話です。このサービスを考えた時に、私はこういうプランでいました。本当に便利なサービスだと思うので、まずネットで話題。Twitterでもバズるし、いろんなメディアが取り上げてくれるだろうと。で、ユーザー数が爆走して、純広獲得みんなあの通知をオフにしないグループに広告を配信できますよっていうので、純広を獲得して億万長者。月300万円とか稼げるといいかなって、そういう風に思って開発し始めました。でも、その辺どうなったかっていうお話をしていきたいと思います。
今回結構プロモーション頑張りました。まずサービス紹介漫画を作りました。そのお金がえーと、20万円。個人で払うお金としてはつらいなっていう感じがします。サービス紹介動画も作りました。これは1分くらいの動画でした。これがお値段は40万円でした。次に広告費です。広告はTwitterとGoogle、YouTubeで広告を配信しました。これにかかったお金が40万円です。プロモーションでだいたい100万円くらい使ったんで、結構個人的には勝負をかけた。プロモーションでした。で、その結果、売り上げはいくらになりましたか。0円という結果でした。
これまで20本とかいかないくらい個人開発をしてきたんですけど。0円というのはなかなかなかったんで、正直ちょっと落ち込んでます。ただ、今回今年0円だったっていうだけで、この後1年間、またプロモーションして来年の新学期4月に向けて認知度を上げていこうかなと思っています。もしパパママさんとかいらっしゃったら、ぜひグループに導入して使っていただきたいと思います！
以上です。ご清聴ありがとうございました。
Discussion