ロナえるも夫です。
「自分のコードの実行結果をブログに表示したい」
という人のためにCodeSandboxを紹介しました。
-
-
【無料】CodeSandBoxを使ってブログ上でコード実行
続きを見る
「CodeSandboxで簡単に自分のコードを紹介できます!」といいましたが、実は欠点がありました。
React Nativeで開発したアプリを簡単に実行・共有できるExpoというフレームワークがありますが、それがCodeSandbox上だと実行が難しいということです。
(といっても、僕の環境と実了だと難しいだけで、他の方ならできるのかも。。。できたら教えて欲しいです。)
今回は「ExpoのWeb開発環境を使って、ブログから簡易アプリを起動するまで」を紹介していきます。
アプリ開発の紹介もしやすくなると思うので、是非お付き合いください。
Expoとは?
Expoとは、React Nativeをサポートしてくれるフレームワークです。
Expoの利点は何よりも、
共有が楽!!!!
というところです。
通常、アプリを共有するには、次の順で作業をする必要があります。
手順
【開発者】
- コードを作成
- ビルド
- アプリ実行ファイルの生成
- 実行ファイルの共有
【ユーザー】
- 実行ファイルをスマホにインストール
アプリ実行ファイルとは、Androidならapkやabb、iOSならipaになります。
また、実行ファイルの共有/インストールという手順は2行で済ませていますが、実際には数時間かかったりします。
具体的には、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でアプリを共有しよう!
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1919,h_1279/https://1onael.com/wp-content/uploads/2021/09/8273-edited-1.jpg)
まずはExpoにユーザー登録
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1200,h_523/https://1onael.com/wp-content/uploads/2021/09/image-11-1200x523.jpg)
時期によって内容が変わるかもしれませんが、2021/09/24現在だと
「Sign Up」→「ユーザー名&パスワード&メールアドレスの登録」→「簡単なアンケートに回答」
で、登録ができます。
無料版と有料版がありますが、無料版で十分です。
違いはこちらに記載されています。
プロジェクトを作成
登録した直後だと、自動的に1つプロジェクトが作成されます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1165,h_600/https://1onael.com/wp-content/uploads/2021/09/image-11-1-1165x600.jpg)
もし表示されない場合は、右上にある「アイコン」をクリックして、「My Snacks」を選択すると作成したプロジェクト(Snack)一覧のページが表示されます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1200,h_511/https://1onael.com/wp-content/uploads/2021/09/image-11-2-1200x511.jpg)
表示されたプロジェクト一覧に「Create a Snack」と表示されるので、そこをクリックすれば、先ほどのプロジェクトページが表示されます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1200,h_508/https://1onael.com/wp-content/uploads/2021/09/image-13-1200x508.png)
コードを作成
今回は、そのままサンプルコードを使います。
実際には、フォルダやファイルを新規作成・編集することができます。
埋め込みHTMLの取得
この時点でQRコードを取得して、それを共有する方法もありますが、今回はブログでコードとWebページでの実行結果も共有したいので、埋め込みHTMLでの共有を行います。
1つのプロジェクトで、マルチプラットフォーム(iOS, Android, Web)実行ができるのは、React Nativeの利点ですね。
右上に、「<>」(Show embed code)というアイコンがあるのでクリックします。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1200,h_526/https://1onael.com/wp-content/uploads/2021/09/image-14-1200x526.jpg)
すると、「Preview」と「Embed Code」が表示されます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_782,h_600/https://1onael.com/wp-content/uploads/2021/09/image-14-782x600.png)
こちらの「Embed Code」をコピーします。
ブログに埋め込むHTMLでQRコードを共有
あとは、先ほどコピーした「Embed Code」をブログに貼り付ければ開発側としては、作業が完了です。
WordPressであれば、HTMLを埋め込むためのブロックがあると思います。
僕の使っている「Affinger6」では、「カスタムHTML」というブロックがあるのでそちらを使っています。
実際に埋め込んだ結果はこの通り。
「Web」をクリックすると、Webページでの実行結果が表示されます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_815,h_600/https://1onael.com/wp-content/uploads/2021/09/b3ccb19ef43f53e46085febc34a85c31-815x600.jpg)
その他のタブでは次のことができます。
My Device:QRコード共有(実際のデバイスでの確認)
iOS:iOSシミュレーターでの確認(or 実際のデバイスでの確認)
Android:Androidシミュレーターでの確認(or 実際のデバイスでの確認)
Expo専用アプリをインストール
ここからはユーザー側の作業となります。
ユーザーは、まずExpoアプリをインストールします。
QRコードを読み込む
QRコードをまず表示します。
「My Device」タブを選択します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_822,h_600/https://1onael.com/wp-content/uploads/2021/09/3701d3427c303514067b7e2ad4872179-822x600.png)
これをスマートフォンのQRコードリーダで読み込みます。
すると、「Expo Go」が起動し、サンプルコードが実行されます。
こちらが実際にスマホで実行した結果です。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_277,h_600/https://1onael.com/wp-content/uploads/2021/09/IMG_BD86C37DF84F-1-277x600.jpeg)
まとめ:Expoを使ってみましょう
React Nativeを使っている方だとExpoはとても便利なツールになります。
是非Expoを使って共有してみて下さい。