概要

Webフロントエンドエンジニアがアプリリリースするときにだいたい通りそうなワードをまとめました。

アプリの説明(寿司の写真を撮ると、かわいい猫がネタをあててくれる)
PWA化
SPA(React + Redux + ReactRouter)
SEO設定

細かい話は別記事にまとめようと思います。今回は各項目大きなところだけ書きます。

ちなみにリリースしたのは結構前です。笑

アプリの話

AI寿司猫と呼んでます。

っていう感じなんで、スマホから使ってください。このページ見てる人の6割程度がスマホだと思うので、3~4割のPCで来た方はいいねやらしてからスマホで見ていただけると(_ _)w

現状実装している機能としては、「ネタ判定」、「寿司辞書」、「Ai」の3つです。本当はアルバムっていうのも実装したかったんですが、サクッと作って出すという方針によって削られました

ネタ判定

写真を撮影して、画像を学習済みの寿司ネタ判定APIに投げて結果を表示するだけの単機能なので、WebRTCとか使って撮影画面をリッチにしたいなとか思ってました。

おそらくPWAの機能だと思うんですが、当初はWebRTCを使ってアプリ内に独自の撮影機能を埋めこもうと思ってこんなところとか参考にしながら検証してました。

しかし最初からわりと懸念していた事項なんですが、PWA（というか話を限定するとWebRTCをiOSで使うこと？）には現状まだ問題があって、iOSの対応がかなり遅いことと、制限が強いです。
Safariでは一応カメラのデータをリアルタイム表示できるんですが、Chromeではできないとか、Androidでどうなるのかもわからんので、確認も大変だし、リリースしてからもいろんな問題が起こりそうだったんでここは断念してinput type="file"で実装しました。

しかし実はinputタグの挙動も、iOSだとカメラで撮影するかライブラリから選択するか選べるんですが、（検証した）Androidだとライブラリからしか選べないようでした。なので（理想的な話から考えると）ちょっと物足りない実装になってます。

この辺りの話はちょっと長くなってしまうので暇なときに別でまとめようと思います。暇なときに。

寿司辞書

教師データが用意できた、学習済みの寿司に関する説明を見ることができるページです。
ちょっと失敗したのは、多言語対応の方法です。これ、英語のページを見るときにも日本語の言語データが読み込まれちゃっているので、言語が増えると圧倒的重さになっちゃいます。

多言語対応するときは、必ず言語ファイルは分割しましょう。

Ai

スタッツとも呼んでますが、寿司猫に食わせた寿司の量とか割合を見ることができるページです。
一応最小限のデータは出てますが、実はまだ開発中です(_ _)w

理想的には、全員が投げた画像の数や割合、学習済みの数とか各ネタの精度なども出せるといいんですが、これ自体は特に収益化するアプリでもないのでこの程度の実装にとどめてます。

PWA化

知らない人向けに書くと、昔から細々と存在するWebRTCなどや、ネイティブの機能をWebから使えるような新しいAPIをまとめた仕様をPWA(Progressive Web App)と呼んでいて、Googleが主導して進めています。最近Appleも対応を発表したので、おそらくこれからの動向がもっとも注目されている技術です。

主なところだとservice-workerによるプッシュ通知ができることで知っている人が多いんじゃないでしょうか。
当初カメラを使うことと、ホーム画面に追加した時の見た目を制御するためにPWA化が必要なんじゃないかと思っていたのでmanifest.jsonやservice-worker.jsを追加してたんですが、別にそういうわけでもなさそうなのと、PWA自体発展途上なのでいったいPWAとはなんなのかとかいう話はきっとかなり長くなります。

これも暇になったら別の記事にしたいと思います。

PWA化には入らなさそうな作業として、htmlのmetaタグでiPhoneでホーム画面に追加した時の見た目とか変えられるんですが、manifest.jsonにも確か同じような設定があって、今後統一されるんですかね。そういう曖昧な部分がまだ往々にしてあるんで、PWAについて調べるときは基本的にはGoogleのページを参考にしてください。

SPA

ホーム画面に追加してもらって、アプリのようにシームレスに使ってもらいたかったのでSPA化を決めました。
状態が多そうだったのでRedux導入してみたのですが、ネタ判定のページがcanvasでの画像操作とかタッチイベントをゴリゴリやる系のコードだったので状態が肥大化して、結局必要だったか不明な感じになりました。

本当にRedux必要か考え直すことを強要してくるブログとかも見渡していると存在するので、（僕も本当に必要かわからない場面がたまにあるので）Reduxが必要な時ってどんなときだっけ、とかそういうのも別の記事で暇なときに（）

ちなみにReduxとReactRouterは特に中間ライブラリとか使わずに結合しました。たぶん現状のバージョンだとReactRouterの状態をReduxに入れたりするようなライブラリ使わなくても十分自然に結合できるので特にこのまま使ってしまって問題ないし、むしろ実装がわかりやすくなると思いました。

SEO

SEO対策というかは、titleタグやmetaタグをきちんと設定する技術的な話です。

これも別記事にまとめようと思います（）

終わりに

だいぶ雑な記事になってしまいました…どっちかというとこれを見ていただける方に使ってみて欲しかったっていうのが一番大きいです。笑

いいねめっちゃいただけたりすると記事を書くモチベが爆上がりします。。

ちなみに、SSRはやりませんでした。特にメリットを感じなかったからです。

SSRに関する記事も過去に書いたので、導入検討している方は判断材料にしてみてください。