ロナえるも夫です。
「自分のコードの実行結果をブログに表示したい」
という人のためにCodeSandboxを紹介しました。
-
-
【無料】CodeSandBoxを使ってブログ上でコード実行
続きを見る
「CodeSandboxで簡単に自分のコードを紹介できます！」といいましたが、実は欠点がありました。
React Nativeで開発したアプリを簡単に実行・共有できるExpoというフレームワークがありますが、それがCodeSandbox上だと実行が難しいということです。
（といっても、僕の環境と実了だと難しいだけで、他の方ならできるのかも。。。できたら教えて欲しいです。）
今回は「ExpoのWeb開発環境を使って、ブログから簡易アプリを起動するまで」を紹介していきます。
アプリ開発の紹介もしやすくなると思うので、是非お付き合いください。
Expoとは？
Expoとは、React Nativeをサポートしてくれるフレームワークです。
Expoの利点は何よりも、
共有が楽！！！！
というところです。
通常、アプリを共有するには、次の順で作業をする必要があります。
手順
【開発者】
- コードを作成
- ビルド
- アプリ実行ファイルの生成
- 実行ファイルの共有
【ユーザー】
- 実行ファイルをスマホにインストール
アプリ実行ファイルとは、Androidならapkやabb、iOSならipaになります。
また、実行ファイルの共有/インストールという手順は２行で済ませていますが、実際には数時間かかったりします。
具体的には、apkやipaを直接渡して、スマホにインストールしてもらうか、
または、GooglePlayStoreやAppStoreで公開したものをインストールしてもらいます。
これらの方法だと手間もかかりますし、Store公開なら費用もかかります。
Expoだと、その手間もお金もかけずにアプリを共有することができます。
具体的には、開発者側とユーザー側は次の手順に基づいて共有していきます。
手順（Expo）
【開発者】
- コードを作成
- 埋め込みHTMLを取得 or QRコードの取得
- ブログに埋め込みHTMLで（or 直接） QRコードを共有
【ユーザー】
- Expo専用アプリをインストール
- QRコードを読み込む
あれ、全体の手順数は変わっていないのでは？
と思った人が多いかもしれませんが、先ほど述べた通り、従来の方法だと「共有」するということに、結構な時間が割かれます。
Expoならその時間をほとんど数分に収めることができます。
QRコードを使って簡単にアプリを共有・実行できるのです！！！
しかも、AndroidとiOSのアプリを1度の手順で。
もちろん、全てが薔薇色ではなく、欠点もあります。
それは、実行速度とコード置き場・開発環境です。
まず、「実行場所」に関しては、Expoのアプリ上で仮想的に動かしているため、直接アプリをスマホにインストールするよりは動作がもっさりとします。
ただ、ちょっとした共有目的なら気にならないですね。
また、「コード置き場、実行環境」に関してですが、Expoの仕組みとして、どこかにコードを置いて実行できる形にしたものをQRコードで共有します。
なので、その置き場・環境が必要となってきます。
ここも、ちょっとした共有目的なら問題ないです。
Expoを開発元がWeb開発環境ごと公開してくれているので、それを使って開発・公開をします。
今回もこの環境を使ってアプリを公開してみます。
CodeSandboxでExpo実行が難しい
先述した通り、CodeSandboxではExpoの環境をうまく実行できないといった問題があります。
たくさんサンプルプロジェクトは公開されているのですが、少し前のバージョンのExpoを使ったものばかりです。
最新のExpoアプリとの組み合わるとそのまま使えず、Expoのバージョンをあげると色んなライブラリとの依存競合が起き、実行できず。。。
CodeSandboxの場所を借りている状態なので、あまり環境もいじれず、数日頑張ったのちに諦めました。
Expoでアプリを共有しよう！
まずはExpoにユーザー登録
時期によって内容が変わるかもしれませんが、2021/09/24現在だと
「Sign Up」→「ユーザー名＆パスワード＆メールアドレスの登録」→「簡単なアンケートに回答」
で、登録ができます。
無料版と有料版がありますが、無料版で十分です。
違いはこちらに記載されています。
プロジェクトを作成
登録した直後だと、自動的に１つプロジェクトが作成されます。
もし表示されない場合は、右上にある「アイコン」をクリックして、「My Snacks」を選択すると作成したプロジェクト（Snack）一覧のページが表示されます。
表示されたプロジェクト一覧に「Create a Snack」と表示されるので、そこをクリックすれば、先ほどのプロジェクトページが表示されます。
コードを作成
今回は、そのままサンプルコードを使います。
実際には、フォルダやファイルを新規作成・編集することができます。
埋め込みHTMLの取得
この時点でQRコードを取得して、それを共有する方法もありますが、今回はブログでコードとWebページでの実行結果も共有したいので、埋め込みHTMLでの共有を行います。
１つのプロジェクトで、マルチプラットフォーム（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アプリをインストールします。
QRコードを読み込む
QRコードをまず表示します。
「My Device」タブを選択します。
これをスマートフォンのQRコードリーダで読み込みます。
すると、「Expo Go」が起動し、サンプルコードが実行されます。
こちらが実際にスマホで実行した結果です。
まとめ：Expoを使ってみましょう
React Nativeを使っている方だとExpoはとても便利なツールになります。
是非Expoを使って共有してみて下さい。