閲覧いただきありがとうございます。
個人で日本統計 | 文系学生と学ぶ社会統計学というアプリを開発しています。
まだまだ改善点はありますが、現段階で技術とマーケティングの観点からまとめておきます。
勉強法などに関しては【React Native】文系1回生が独学でアプリをリリースした時に使ったライブラリ、記事、書籍まとめにまとめていたのでよかったらぜひ。
技術
フレームワーク
このアプリは、ReactNativeを用いて作成しました。
RNを用いてよかった点は、以下です。
Reactの知識が活かせる
Web系のフレームワークに興味があり独学していたReactの知識を、ほぼそのまま使えたことにより、学習コストを抑えられました。
環境構築が簡単
Expoを用いることにより、特に苦労せず環境構築ができました。
また、実機での検証も簡単にでき、開発をスムーズに進められました。
ただ、ライブラリをnpmでインストールするときに、バージョンが合わなかったりして苦労はしました。
一番最初の土台を作るのは(macだと)とても簡単です。
逆に悪かった点は、以下です。
日本での導入事例が少ない
SwiftやJavaに比べ、日本語の情報が少なかったので情報収集には他のフレームワークと比べて苦労しました。
基本がReactと同じといえど、追加したいライブラリを日本語で説明してくれていることが少なく、英語のドキュメントをひたすら読んで理解しました。
英語の一次ソースを読む意識と、英文を読んで理解する力がついた点はよかったです。
また、progateもRNで作られていることを知り、同様のクオリティのものを作るのが技術的に不可能でないと知ってモチベーションが上がりました。
デザインもprogateを参考にして整えました。
ライブラリ
導入したライブラリを列挙していきます。
axios
e-StatのAPIを用いて統計データを取ってくるために導入しました。
RNの公式ではHTTPリクエストはfetchでしていましたが、自分が使い慣れているのと、React NativeのHTTPリクエストにはfetchよりaxiosを使ったほうが安定しそうという記事もあり、axiosを使いました。
react-native-animatable
アニメーションを追加できるライブラリです。
統計がもつ堅苦しいイメージを無くしたかったので、全体的にポップな印象を与えるのに使いました。
「選べるグラフ」画面に来た時に、これらの4つの箱を軽くバウンドさせるなどしました。
react-native-loading-spinner-overlay
axiosで通信をしている間に表示するローディング画面で使いました。
e-Statから統計の情報を持ってくるのに時間がかかるので、ユーザビリティを向上させるのに役立ちました。
また、componentDidMountの使いどころがわかりました。
react-native-modal
グラフ情報の詳細を表示するのに使いました。
アニメーションを設定できるのでアプリに動きを持たせられました。
ただ、モーダル内の文字の大きさやデザインが上手く調整できなかったので改善中です。
react-native-swiper
グラフの画面と、グラフ解説画面を左右に振るために使いました。
グラフとグラフの解説は交互に見ることが多いと思うので、スライドするという直感的な操作ですぐに切り替えられるようにしました。
ナビゲーションを使わないことでナビゲーションの関係(stack)も複雑にならずに済みました。
react-native-vector-icons
「選べるグラフ」画面の人やハートなどのアイコンとして使いました。
ゆくゆくは既存のアイコンに頼らず自分でデザインして独自性を増していきたいです。
react-native-vector-icons directory
react-navigation
画面遷移に使いました。
通常にボタンを押して遷移するために使うreact-navigation-stackと、左からメニューとして出すために使うeact-navigation-drawerを共存させることや、異なるコンポーネント間で遷移の状態を伝えるのに苦労しましたが、公式ドキュメントを読み解いて実装しました。
victory-native
グラフの描写に使いました。
限られた画面サイズでどう見やすくするかを考えて、軸の間隔やグラフの太さ、アニメーションを設定しました。
ポップな印象を与えるためにグラフの色にも気を使いました。
react-native-responsive-screen
異なる機種でもデザインが崩れないようにするために使いました。
flexで大枠は統一できるのですが、marginやfontsizeに10pxなど固定値を設定すると崩れてしまうので、固定値は一切使わず、%表記をするように心がけました。
react-native-dotenv
e-StatのAPIを用いる際に用いる個人のAPP_IDをenvファイルに隠すために使いました。
改善点
リポジトリのissueにまとめています。
特にコードがまだまだ汚いので共通化できるところは全て共通化してDRY原則にのっとりたいです。
マーケティング
アプリ構想
きっかけ
このアプリを作ろうと思ったきっかけは、授業の課題でe-Statのサイトを見る機会があり、これらの統計をもっと視覚的にわかりやすくできないかと思ったからです。
e-Statはまだましですが、他の公式の統計サイトはどれもデザインに力を入れておらず、とても見にいきたくなるようなサイトではありません。
そこで、統計を扱うポップな雰囲気のサイトってあまりないなと気づきました。
需要とSEO
これまでアプリを作ったことはなく、最初はwebサービスにしようと思っていましたが、「統計」や「日本統計」で調べた際、1ページ目に出てくるのは総務省統計局などのお堅い公式のサイトばかりでした。
この状態だとせっかく作っても下に埋もれてしまうだけだと思ったのでアプリにしようと思いました。
アプリでは、日本統計をまとめているものが他に1つだけあったのですが、情報が古いものでメンテナンスもされていませんでした。
すでに存在しているということはある程度需要がある、そして最新の情報で作ったら「日本統計」でSEO1位も狙えるという仮説を立てて製作を始めました。
現段階ではインストール数が100、「日本統計」でSEO1位なので、需要が爆発的にある訳ではありませんでしたが、SEOの仮説は正しかったです。
機能
「日本統計 | 文系学生と学ぶ社会統計学」とあるように、当初は統計だけじゃなく、統計学を学べる記事を書いてアプリと連携させようと思っていましたが、それを継続する時間が確保できないことに気づき、2回目のアップデートではそのタイトルも機能も削ろうとしましたがAppleという大きな壁が立ちはだかりました。
Appleとの戦い
アプリをストアにリリースするためには、Appleの審査を通らなければいけません。
1回目のリリースでは無事通ったのですが、この間の審査ではrejectされました。
デザインをよりポップにしようと思い、全体的な構造も大きく変えたのですが、担当者が変わっていたのか、「4.2 Minimum Functionality」をくらいました。(デベロッパーが最も怖れる最恐のリジェクト「4.2 Minimum Functionality」とは)
ただ、審査が通らなくてもアプリの中身は自分でいつでも変えられるという謎の仕組みになっているので、2回目のアップデートの内容はアプリ自体には反映されています。
審査が通らないと、ストアに表示されるタイトルやアイコンや説明文などが変えられないので、現在はストアに表示されているタイトルや画像と、実際のアプリの内容が違うという状態になってしまっています。
アイコンを当時のインターン先のデザイナーの方に作ってもらったので早く反映させたいです。
改善点
Appleの審査を通るために、このアプリの存在意義などをアピールする文書を作って送る、都道府県情報などの新機能を追加する、グラフの数を増やすなどを考えています。