website

Javascript/Typescript ReactNative Tech

【React Native】Expoを利用して簡単にアプリ共有

2021年9月25日

ロナえるも夫です。

自分のコードの実行結果をブログに表示したい

という人のためにCodeSandboxを紹介しました。

website
【無料】CodeSandBoxを使ってブログ上でコード実行

続きを見る

「CodeSandboxで簡単に自分のコードを紹介できます!」といいましたが、実は欠点がありました。

React Nativeで開発したアプリを簡単に実行・共有できるExpoというフレームワークがありますが、それがCodeSandbox上だと実行が難しいということです。

(といっても、僕の環境と実了だと難しいだけで、他の方ならできるのかも。。。できたら教えて欲しいです。)

今回は「ExpoのWeb開発環境を使って、ブログから簡易アプリを起動するまで」を紹介していきます。

アプリ開発の紹介もしやすくなると思うので、是非お付き合いください。

Expoとは?

Expoとは、React Nativeをサポートしてくれるフレームワークです。

Expoの利点は何よりも、

共有が楽!!!!

というところです。

通常、アプリを共有するには、次の順で作業をする必要があります。

手順

【開発者】

  1. コードを作成
  2. ビルド
  3. アプリ実行ファイルの生成
  4. 実行ファイルの共有

【ユーザー】

  1. 実行ファイルをスマホにインストール

アプリ実行ファイルとは、Androidならapkやabb、iOSならipaになります。

また、実行ファイルの共有/インストールという手順は2行で済ませていますが、実際には数時間かかったりします。

具体的には、apkやipaを直接渡して、スマホにインストールしてもらうか、

または、GooglePlayStoreやAppStoreで公開したものをインストールしてもらいます。

これらの方法だと手間もかかりますし、Store公開なら費用もかかります。

Expoだと、その手間もお金もかけずにアプリを共有することができます。

具体的には、開発者側とユーザー側は次の手順に基づいて共有していきます。

手順(Expo)

【開発者】

  1. コードを作成
  2. 埋め込みHTMLを取得 or QRコードの取得
  3. ブログに埋め込みHTMLで(or 直接) QRコードを共有

【ユーザー】

  1. Expo専用アプリをインストール
  2. QRコードを読み込む

あれ、全体の手順数は変わっていないのでは?

と思った人が多いかもしれませんが、先ほど述べた通り、従来の方法だと「共有」するということに、結構な時間が割かれます。

Expoならその時間をほとんど数分に収めることができます。

QRコードを使って簡単にアプリを共有・実行できるのです!!!

しかも、AndroidとiOSのアプリを1度の手順で。

もちろん、全てが薔薇色ではなく、欠点もあります。

それは、実行速度コード置き場・開発環境です。

まず、「実行場所」に関しては、Expoのアプリ上で仮想的に動かしているため、直接アプリをスマホにインストールするよりは動作がもっさりとします。

ただ、ちょっとした共有目的なら気にならないですね。

また、「コード置き場、実行環境」に関してですが、Expoの仕組みとして、どこかにコードを置いて実行できる形にしたものをQRコードで共有します。

なので、その置き場・環境が必要となってきます。

ここも、ちょっとした共有目的なら問題ないです。

Expoを開発元がWeb開発環境ごと公開してくれているので、それを使って開発・公開をします。

https://expo.dev

今回もこの環境を使ってアプリを公開してみます。

CodeSandboxでExpo実行が難しい

先述した通り、CodeSandboxではExpoの環境をうまく実行できないといった問題があります。

たくさんサンプルプロジェクトは公開されているのですが、少し前のバージョンのExpoを使ったものばかりです。

最新のExpoアプリとの組み合わるとそのまま使えず、Expoのバージョンをあげると色んなライブラリとの依存競合が起き、実行できず。。。

CodeSandboxの場所を借りている状態なので、あまり環境もいじれず、数日頑張ったのちに諦めました。

Expoでアプリを共有しよう!

まずはExpoにユーザー登録

https://expo.dev

時期によって内容が変わるかもしれませんが、2021/09/24現在だと

「Sign Up」→「ユーザー名&パスワード&メールアドレスの登録」→「簡単なアンケートに回答」

で、登録ができます。

無料版と有料版がありますが、無料版で十分です。

違いはこちらに記載されています。

https://expo.dev/pricing

プロジェクトを作成

登録した直後だと、自動的に1つプロジェクトが作成されます。

もし表示されない場合は、右上にある「アイコン」をクリックして、「My Snacks」を選択すると作成したプロジェクト(Snack)一覧のページが表示されます。

表示されたプロジェクト一覧に「Create a Snack」と表示されるので、そこをクリックすれば、先ほどのプロジェクトページが表示されます。

コードを作成

今回は、そのままサンプルコードを使います。

実際には、フォルダやファイルを新規作成・編集することができます。

埋め込みHTMLの取得

この時点でQRコードを取得して、それを共有する方法もありますが、今回はブログでコードとWebページでの実行結果も共有したいので、埋め込みHTMLでの共有を行います。

1つのプロジェクトで、マルチプラットフォーム(iOS, Android, Web)実行ができるのは、React Nativeの利点ですね。

右上に、「<>」(Show embed code)というアイコンがあるのでクリックします。

すると、「Preview」と「Embed Code」が表示されます。

こちらの「Embed Code」をコピーします。

ブログに埋め込むHTMLでQRコードを共有

あとは、先ほどコピーした「Embed Code」をブログに貼り付ければ開発側としては、作業が完了です。

WordPressであれば、HTMLを埋め込むためのブロックがあると思います。

僕の使っている「Affinger6」では、「カスタムHTML」というブロックがあるのでそちらを使っています。

実際に埋め込んだ結果はこの通り。

「Web」をクリックすると、Webページでの実行結果が表示されます。

その他のタブでは次のことができます。

My Device:QRコード共有(実際のデバイスでの確認)

iOS:iOSシミュレーターでの確認(or 実際のデバイスでの確認)

Android:Androidシミュレーターでの確認(or 実際のデバイスでの確認)

Expo専用アプリをインストール

ここからはユーザー側の作業となります。

ユーザーは、まずExpoアプリをインストールします。

Google Play で手に入れよう
Download on the App Store

QRコードを読み込む

QRコードをまず表示します。

「My Device」タブを選択します。

これをスマートフォンのQRコードリーダで読み込みます。

すると、「Expo Go」が起動し、サンプルコードが実行されます。

こちらが実際にスマホで実行した結果です。

まとめ:Expoを使ってみましょう

React Nativeを使っている方だとExpoはとても便利なツールになります。

是非Expoを使って共有してみて下さい。

-Javascript/Typescript, ReactNative, Tech,
-, , , , , , ,