always DRINKのパス表示アプリをFlutterで作ってみた

まえおき

always DRINKを契約してから、本当にコンビニコーヒーを飲まなくなった。ハニー珈琲は最高である。ただ、サブスクリプションを悪用して、変な人も増えてきた気もする...（苦笑）　イジゲンって会社には今後も頑張ってほしい。

さて、自分用に作ったalwaysDRINKのパスをササっと表示するアプリは、毎日使っているし、継続的に手を加えて使いやすくしている。

github.com

これ一部の方々には反響(?)があって、

type-b.org

自分以外でも同じようにこういう機能欲しいと感じてる人はいたんだなーというのがわかって、ちょっと自信（？）がついた。

アプリ作るのが飽きてきた

自分はウルトラ飽き性なので、自分が欲しい機能をあらかた作り終えたら、改善を重ねていくモチベーションが落ちてきてしまった。

そんなわけで、先述の自信（？）がつづいている間に、いくつかスパイスを放り込んでみることにした。

お店でalwaysDRINKを使っている人の様子を見るに、alwaysDRINKパス表示アプリはあると便利だという確信はある。なんだけど、+αするならどの層にターゲッティングすればいいのかなーってのを探りをいれたかった。

2行直せばalwaysLUNCHで使えるようになる

福岡だけじゃなく京都でも使えるようにする

iOSでもある程度は使えるようにする（Flutterで作った）

ーーー

　

まだ有意に結論が出せる時点ではないのだけど、趣味で続けていくならalwaysLUNCHに手を広げてみる、本格的にイジゲンに売り込む（つもりはないけどｗ）ならiOS対応かなー、と思っている。

初めて本格的にFlutterを使ってみた

今回、iOSアプリをSwiftで書くほどのモチベーションはなかったので、ほぼシングルページアプリであることからFlutterでもとのAndroidネイティブアプリをリメイクしてみた。

思考過程はこんなかんじ。

Flutterで実装をあきらめたところ

FlutterはGoogle Mapを使うにはまだちょっと機能が足りなかった。ネイティブアプリで使っていてFlutterで実現できなかったのが

あと、何かボタンを押したときや測位が完了したときに animateCameraする例はぐぐれば結構どこにでもあるんだけど、緯度経度をstateで管理していてstateが変わったときにその緯度経度に向かってanimateCameraするような例はほとんど出てこなかった。近々Qiitaにでもまとめて書こうと思う。(→2019.10.24追記。かいた - FlutterでState管理されている緯度経度に向かってGoogleMapController#animateCamera する - Qiita ) 　

GoogleMap以外でも、（モーダルじゃないPersistentなほうの）ボトムシートも使い方がよくわからなかったので、固定表示にしちゃった。

Flutterで最高の開発ができたところ

ただ、7割くらいはFlutterでラクできたと思う。

  • もう画面回転でもなんでもこい
    • ViewModelとActivityのどっちにどうやって値もたせようとかほとんど悩まなくてよかった
  • ListViewがめちゃくちゃラク
    • AdapterもViewHolderもいらない。childrenに突っ込んだものが勝手にリストになってくれるのが最高
  • HTTP通信とネットワーク上の画像表示が標準でできるのが神

まとめると

こんな感じだと思う。

いちおう成果物を貼っておく

Flutterの理解を深めるために今後少し継続的に触ろうとは思うけど、一旦2019/10/21時点での成果物は貼っておく。

iOSアプリはAndroidほどカジュアルに配布できないっぽい？　もしも使ってみたいよって人がいたらどういう手順で何をすればいいのかもわかってないので、詳しい方、ぜひ教えて下さい。

github.com

always DRINKを幸せに使いたいので、サッとパスを表示するためのアプリ作った

まえおき

always DRINK を使い始めてから、コンビニコーヒーを飲まなくなった。とても幸せな日々を過ごしている。

なんだけど、やっぱり1つだけ不満がある。お店についてレジに並んだときに「サッとパスを開けない」のだ。

前の記事でも書いてたんだけど、

f:id:YusukeIwaki:20191006154530p:plain

この操作シーケンスは毎日使うにはさすがに長過ぎるのだ。（早くPWA化してほしいよ〜...w）

作ったもの

https://user-images.githubusercontent.com/11763113/66848080-65569880-efaf-11e9-8a6d-29f0f1410878.gif

  • お店は地図上で詳細がある程度(営業時間とメニュー +α)は見れる
  • パスを使うボタンを押すと、ブラウザでパス画面が開ける
  • 起動時にすぐに開きたいお店を1つだけ保存できる

という、最低限ないと自分がイライラしてしまうものだけをまず作った。デザインはとても適当。

ダウンロードは→https://github.com/YusukeIwaki/alwaysDRINK_MyLauncher/releases/download/pre-20191017/app-release.apk

ソースコードは↓

github.com

久々にアプリを作ってみて思ったこと

「俺がペルソナ」だとサクサク作れる

1年ぶりにAndroidアプリを頑張って作ったんだけど、自分が作りたいものを作るというのは大事だなと改めて実感。

たとえば、この表示一つとってもそうなんだけど、

f:id:YusukeIwaki:20191016020630p:plain

  • 「お店の雰囲気をなんとなく見たい」 + 「だいたいの位置をなんとなく知りたい」 を満たすとすると、上下で同時に見れるのがいいかなー
  • 地図で全体を見たいなー

はUXとしてシームレスじゃなくても（実装的には、Activityを分けても）いいのでは？と思うかもしれない。会社で機能開発するとなると、「とりあえずPhase1では上下で見れる機能、Phase 4以降で全体見れる機能を余裕あったらつけようか」みたいにもなりそうなところだけど、でも実際使ってみるとここのシームレス感がかなり重要だった。なぜかはよくわからないけど、感覚的にお店を探すときの疲れが少なくて済む。（ちなみにこのUIはメルチャリのAndroidアプリの表示をかなり参考にさせてもらった。圧倒的感謝です...!）

ペルソナも顧客も自分が一番よくわかっている状態だと、やることの優先順位は決めやすいし、UXも合理的に設計できると改めて実感したのでした。

洗練されつつあるAndroidアプリ開発環境

あと、Androidアプリ開発は相変わらずいろいろ難しいけど、それでも１年前に比べるとだいぶ良い仕組みがそろってきたなーという感触。

  • 画面回転とか面倒なことを考えなくていいViewModel
  • Activityを表示したときに裏でAPI通信するならKotlin Coroutines。
    • ktxいれてviewModelScope.launch使うとお手軽。
  • マテリアルデザインやるならMaterial Components for Android
  • RecyclerViewベースになったViewPager2

などなど。ViewModelとかKotlin Coroutines自体は前々からあったけど、だいぶ洗練されてきた。

　

まとめ

アプリ開発はとても体力くうけど、今後も自分が欲しいものは作っていこうと思う。

いまのところ使いづらいけど、幸せにはなれるサービス「always drink」

always lunchとalways drink

イジゲンっていう会社が、なぜか福岡と京都をターゲットに、定額制のランチサービス（always lunch）と定額制のドリンクサービス(always drink)を始めた。

Twitterで見た時に「お？」とだいぶ気になった。

always lunchは天神だと5回くらいランチに行けばもとが取れるぞ？と。

　

なんだけど、よく見たらそんなに行きたい店がなかったのでalways lunchは別にいいかなーと。いっぽうで、always drinkの方はというと・・・

f:id:YusukeIwaki:20191006144858p:plain

(from: 月額2,000円(税別)でドリンクが飲み放題！「always DRINK（オールウェイズ ドリンク）」本日10月1日より開始｜イジゲン株式会社のプレスリリース )

　

ハニー珈琲！！！！！

ということで、使えるメニュー次第では契約しようと心に決めたのであった。

実際に契約するまで、何が飲めるかわからない怖いサービス

ハニー珈琲で使えるということはわかったのだけど、実際にアイスコーヒーが飲めるかどうかを知りたい。わくわくしつつ、Webページの方はくまなく探してみたんだけど、

f:id:YusukeIwaki:20191006145243p:plain

ここの店の詳細・・・

f:id:YusukeIwaki:20191006145307p:plain

いやいや、別にGoogleマップの詳細が見たいわけじゃない・・！！！！ということで、どこにも「実際に何が飲めるのか」が書いてなくて、結構不安になった。

店舗に実際に行ってみたんだけど、

f:id:YusukeIwaki:20191006145417p:plain

always drinkが使えるということはわかるんだけど、実際に何が飲めるのかはわからない。これだと「契約してみたんだけど、思ったメニューが飲めないじゃないか！」みたいなクレーム絶対くるよね・・・大丈夫？イジゲンさん・・・。

(2019.10.16追記: どうやら店舗の詳細ページに記載されているようだ... 例: https://always.fan/shops/422 )

イチかバチかで会員登録してみた。

運良く、たまたま前の人がalways drinkを使っていてアイスコーヒーを頼んでいるっぽかったので、自分も会員登録してみることにした。

メールアドレスじゃなくて、SMSが必要というところ以外は、至って普通のサービスだと思う。いやいや、まて。普通じゃないわ。自分がこれ作ってる側だったら文句いいたいところが結構あったので、書いとく。

f:id:YusukeIwaki:20191006152543p:plain

文章でも一応書いておくよ。イジゲンさん、サービスの内容はいいんだけど、UX的にちょっと荒削りすぎませんか？

  • 非会員で「購入する」ボタンを押してるんだから、すなおに会員登録ページに飛んで欲しい
  • 京都と福岡でしかサービス利用できないんだから、都道府県は京都と福岡をリストの先頭に置いといて欲しい。
  • たまたま運悪くブラウザがクラッシュしてしまったんだけど、復帰後にあらためてログインしたらエラーページに飛んで、ものすごい不安になったよ・・・

実際にハニー珈琲で使ってみた

どうやらハニー珈琲（正確には、天神のリトルハニー）では

f:id:YusukeIwaki:20191006153021p:plain

  • 本日のコーヒー
  • 水出しアイスコーヒー
  • カフェラテ
  • カフェモカ
  • キャラメルラテ

がいけるらしい。そんなわけで今回はカフェラテを注文したいわけだが・・・

f:id:YusukeIwaki:20191006154530p:plain

店舗を探して「このお店で使用」をするところまでに一苦労・・・、どうやらその画面だと店員に見せてもだめで、謎の確認ダイアログの後の画面（時刻がすすむ画面）を見せないといけないらしい。

今回は、店員さんが慣れていた（自分の前の人が使っていたしｗ）から良かったんだけど、これバイトさんがやってるような店舗だと詰むと思うよ。

そんなわけで、

無事にカフェラテは幸せにいただけたのだけど、正直この使い勝手の悪さよ。いつもSuicaでピッてやって５秒で注文完了ってやってた身からすると、とても疲れたよ・・・。

まとめ

always drinkは、内容はとてもいい。なんだけど、まるで下手なSIerが受注開発でもしたんじゃないかと思うくらい、UXが酷い。

定額制である以上、リピートはしないといけないんだけど、いまのまま競合サービスが出たら確実にそっちに移ると思う。