はじめに

西日本テクノロジー＆イノベーション室の高橋です。

私の所属する西日本テクノロジー＆イノベーション室では、社内で新規事業を立ち上げる際の技術的な支援や開発を行っています。 今回のブログでは、主にWebアプリの開発を担当していてモバイルアプリの開発経験が無かったチームで、React Nativeを用いてモバイルアプリの開発に取り組んだ時の体験を紹介します。

背景

我々の業務の1つに、新規事業の立ち上げを技術面から支援する取り組みがあります。 こうした新規事業では以前は、まずPCブラウザでアクセスするWebアプリを開発し、好感触が得られたらモバイル端末向けにも展開するという流れがよく見られました。 しかし近年では、最初の時点からモバイル端末をメインターゲットとして開発する、モバイルファーストで進める事例が増えてきています。 またモバイル端末からの利用形態も、Webサイトをモバイル端末向けに最適化するのではなく、ユーザーが日常的に利用しやすいアプリをインストールして利用する形態を望む声が増えています。

我々の部門では、これまではWebアプリの開発を中心に取り組んできました。 しかしこうした背景があり今回、Webアプリの開発が中心でモバイルアプリ開発の経験が無かった開発チームで、React Nativeを用いたモバイルアプリの開発を行うことになりました。 このブログでは、React Nativeを用いたモバイルアプリ開発を体験した時に感じた、Reactを用いたWebアプリ開発との相違点について紹介します。

React Nativeとは

React Nativeとは、Facebook社を中心としたコミュニティによって開発されている、オープンソースのモバイルアプリケーションフレームワークです。 React Nativeの公式サイトでは、”Create native apps for Android and iOS using React” と説明されています。 この言葉の通り、Webアプリ開発においてよく用いられるフレームワークの1つであるReactを用いて、JavaScriptだけでAndroidとiOS双方で動くネイティブアプリを実装できます。

今回モバイルアプリ開発のフレームワークとしてReact Nativeを選んだ理由は、主に以下の3点です。

  1. 開発チームのメンバーが皆React経験者であり、他のフレームワークよりも学習コストが比較的少なく済みそうだった
  2. 社内にReact Nativeを用いた開発の有識者がいた
  3. 今回のプロジェクトでは将来的にモバイル端末と接続する独自の物理デバイスを利用する可能性も考慮しており、WebViewを使うハイブリッドアプリよりも、自由度が高いネイティブアプリの方が望ましかった

開発チーム内に経験者がいなかったこともあり、特に2つ目の社内に相談できる有識者がいるという点は、非常に重要な点でした。

Webアプリ開発とモバイルアプリ開発の違い

React Nativeの採用を決めた後は、1か月ほど小さなアプリケーションを作って学習する期間を設けた後、2か月半ほどで実際の開発を行うことになりました。 その過程で体験した、Webアプリ開発との違いでつまづいた点について紹介します。

端末の向きに合わせた描画

Webアプリの場合、ブラウザウィンドウの縦幅や横幅に応じて適用するCSSのスタイルを切り替えるといった対応がよく行われます。 一方で、Webアプリ側から端末の向きを制御することは基本的にはできません。 Webアプリ側はあくまでブラウザが検知した端末の向きに合わせて描画を行うことになります。

一方でモバイルアプリとして開発を行う場合、現在ユーザーがどの向きで端末を持っているかにかかわらず、この画面は常に縦向きで表示し別の画面では常に横向きに描画するといった制御も行えます。 基本的には現在の端末の向きに合わせて描画することには変わりありませんが、例えば「動画を全画面表示する時だけは常に横向きで描画する」というような個別対応が可能になります。

これにより、適切に使えばより良いユーザー体験を提供できます。 一方で、縦と横の回転を頻繁に強いるような設計にしてしまうと、かえってユーザーに不便を強いることになってしまう恐れもあります。 ユーザーは基本的にはスマートフォンを縦向きに持って操作することが多いので、スマートフォンを対象とするアプリの場合、画面デザインも縦向きを想定したものが中心となります。 しかし、画像や動画の全画面表示や列が多く横に長い表の表示などでは、横向きに表示した方が見やすいケースも存在します。

我々は当初、画面デザインの時点ではこの点をあまり考慮していなかったため、向きをうまく使い分けることができませんでした。 画面デザインの段階から、縦向き固定・横向き固定・縦横自動回転のいずれが望ましいのか検討しておくとよいでしょう。

ダークテーマへの対応

従来のWebサイトの場合、ユーザーがカラーテーマを選択できるようにするといった要件がなければ、デザインを検討する際に考慮するカラーテーマは1つだけでした。 近年ではWebサイトでもダークテーマが用意されるケースも出てきていますが、まだまだ必須要件ではないことが多い印象です。

一方でモバイルアプリでは、AndroidではAndroid 10から、iOSではiOS 13からダークテーマ(ダークモード)がOSとしてサポートされるようになりました。 特にiOSでは、公式ドキュメントでダークモードにも対応することが強く奨励されています。 これからモバイルアプリを開発する際には、最初の段階からダークテーマへの対応を求められることが増えていくでしょう。

React Nativeで画面遷移を管理する際によく使われるライブラリの1つであるReact Navigationでは、複数のカラーテーマを管理するためのTheme機能が提供されています。 この機能を使うことで、ダークモード設定の有無に応じて適用するカラーテーマを変更できます。

我々は今回、最小機能を持つMVPを素早く作成することを優先していたため当初はダークテーマ対応を考えず、画面デザインの配色は1種類しか用意していませんでした。 しかし実際に開発を進めて内部関係者でのテストを行ってみると、普段端末をダークモードで利用している人はダークモードでの体験を望む傾向が強かったこともあり、後からダークモード用の配色を追加しました。

ダークテーマは目に優しく、モバイル端末のバッテリー消費も抑えられるため、OSのダークテーマ設定を有効化している人が増えてきている印象があります。 画面デザインの段階から、通常のテーマとダークテーマの2種類を用意することを意識しておきましょう。

端末への配布

Webアプリの場合、ネットワーク上接続可能な場所に公開すれば、ブラウザ経由で簡単にアクセスできます。 そのため、エンジニアではない関係者にも、URLを共有するだけで簡単に動作を確認してもらうことができます。

一方でモバイルアプリの場合、関係者に動作を確認してもらうためには、関係者の端末にアプリケーションを配布してインストールしてもらう必要があります。 iOSの場合は、TestFlightというテスト版配信用のアプリを通じて、開発中のアプリケーションを特定のユーザーに配布できます。 Androidの場合は、Google Play上で内部テスト版を公開できます。

注意しておきたい点として、iOS向けにTestFlightを用いて社外関係者などの外部テスターへアプリを配布する場合、事前にApple社の審査が必要になります。 テスト版の配布といえどしっかりとした審査が行われているため、アプリの用途などの説明に不備があるとリジェクトされることもあります。 我々のチームでも、当初は審査の観点を把握できておらずリジェクトされ、外部テスターへ配布できるまで予定よりも時間がかかってしまいました。 不備が見つかって何度もApple社とのやり取りが発生すると公開までに時間がかかることもあるため、開発中のアプリを社外関係者にも体験してもらう予定がある場合は、早めに審査を通しておくと良いでしょう。

まとめ

今回のブログでは、React Nativeを用いたモバイルアプリ開発を体験した際に私が感じた、Webアプリ開発とモバイルアプリ開発の相違点をいくつか紹介しました。

React Nativeを用いた開発を実際に体験するまでは、モバイルアプリの開発はAndroid, iOSそれぞれに対して個別の対応を考えなければいけない点が多く大変なイメージを持っていました。 しかし実際に取り組んでみると、特殊な外部デバイスとの連携などを考えない基本的なアプリであれば、それほど意識することなくJavaScriptの知識だけで実装を行うことができました。 開発中にAndroidとiOSの違いを意識したのは、デザイン上の見え方やアニメーション等に若干の差異があった点と、Componentの一部に各OS専用のオプションがあった点ぐらいでしょうか。

全員がWebアプリ開発の経験しか無かったチームでも、Reactの経験があれば、それほど抵抗なくReact Nativeでモバイルアプリの開発を行うことができました。 Webにはなかったモバイルアプリ特有の考慮事項もありますが、その多くはReact Nativeや周辺ライブラリの機能などで解決できます。

これからの時代はモバイルファーストだと言われるようになって久しい現在、アプリケーションの開発時にはモバイル端末を意識して進めることが必要不可欠になってきています。 これまでWebアプリ開発が中心でモバイル開発の経験がなかったエンジニアの方は、一歩進んで、試しにモバイルネイティブアプリの開発にも取り組んでみてはどうでしょうか。 そこで得た経験は、モバイル端末向けのWebサイト構築にも役立てられるでしょう。

本コンテンツはクリエイティブコモンズ(Creative Commons) 4.0 の「表示—継承」に準拠しています。