あなたのWebサイトをたった5分でiOS/Androidアプリにする方法
DESCRIPTION
- Webサイトをアプリストアから配信することができます
- ステップ別にWebサイトをアプリ化していく方法をみていこう
- Webサイトをつくることができるなら、アプリも配信できます
本文
DESCRIPTIONで大上段に断言してますが、概ね事実です。アプリ化なのでコンテンツはメディアアプリといった「アプリ」でないとというのはありますが、まず入り口として、HTML/CSSとちょっとしたJavaScriptでつくられたWebサイトをアプリとして実機で動作確認する方法をみていきましょう。
アプリ化してみるWebサイトはこちらです:
ミシュランガイドにも掲載されたフレンチレストランのWebサイトをリニューアルしたので、裏側から考え方、実装まで解説します。で経緯や裏側をご紹介しましたが、こちらのWebサイトを Capacitor というライブラリを利用してアプリ化して、iOS、Androidのエミュレーターで表示するところまでみていきます。
実際に営業しているフレンチレストランですので、興味を持たれたらぜひご来店ください。
環境構築
まず、Capacitorを利用するために必要な環境設定を行っていきます。ちなみに本チュートリアルではiOSアプリもつくるするため、MacOS前提で書いていきますが、iOSアプリをつくらずAndroidアプリだけをつくる場合はWindowsでもご利用いただけます。
ちなみにXcodeとAndroid Studioは相当ダウンロードに時間がかかるので、お時間がある時にダウンロードください。
1. NodeJSのインストール
NodeJSというJavaScript環境をインストールします。これをインストールすることで同時に npm というJavaScriptライブラリのパッケージマネージャーも利用することができるようになります。
から、「LTS（推奨版）」をインストールしてください。「最新版」はライブラリによっては未対応なことがありますので、LTSを利用します。
iOSアプリ環境の構築（MacOSのみ）
Xcodeのインストール
AppleStoreからXcodeをインストールしてください。
以前ダウンロードがすんでる場合でも、Xcode 11未満だとCapacitorが対応していませんので念の為アップデートすることをおすすめします。
CocoaPodsのインストール
Xcodeで利用するパッケージマネージャーであるCocoaPodsと、それをコマンドラインで利用するためのXcode Command Line tools ツールを利用します。ターミナルを開いて、以下を実行ください。
% sudo gem install cocoapods
% xcode-select --install
% pod repo update
Androidアプリ環境の構築（共通）
Android StudioというIDE（総合開発環境）をダウンロードする必要があります。以下URLからダウンロードください。
インストールが完了したあと、一度起動して初期設定を完了してください。
アプリをビルドする用意
それでは、現行のWebサイトをアプリにビルドするための設定を行っていきます。まず、Webサイトのソースコードを手元にダウンロードしましょう。
ソースコード（テキスト・写真データ以外）はMITライセンスで公開しています。
Gitがわかる方は、 git clone [email protected]:le-benaton/website.git 、そうでない方は、「↓Code」というタブから「Download ZIP」というボタンをクリックしてソースコード一式をダウンロードしてください。
本レポジトリは以下のように設定されています。
le-benaton/
├── .github/ ............. GitHub Actionsのコントロール
├── scripts/ ............. テンプレート反映用スクリプト
├── src/
│ ├── data/ ............ お知らせ、ワインリストのデータ
│ └── template/ ........ Webサイトテンプレート
├── .gitignore ........... GitHubで管理しないソースコードの指定
├── package.json ......... ライブラリ管理用ファイル
├── package-lock.json .... ライブラリのバージョンチェック用（自動生成）
├── prettier.config.js ... ソースコードの自動整形設定ファイル
├── README.md ............ 本ファイル
└── tsconfig.json ........ スクリプト設定ファイル
ソースコード一式は src に入っていますが、プログラムでビルドすると www が自動生成されて公開用のファイルがつくられるようになっているので、それを試してみましょう。
まず、先程インストールしたNode.jsのパッケージマネージャー npm を使って、ビルドするためのプログラムをインストールします。ダウンロードしたディレクトリから以下のコマンドを実行します。
コマンドの実行がわからない方は、解凍したフォルダをターミナルにドラック&ドロップしてください。ディレクトリの位置でターミナルが開きますので、その画面でコマンドを実行すればOKです。
% npm install
このコマンドを実行すると自動的にインストールがはじまります。完了したら、続いて、以下のコマンドを実行しましょう。
% npm run build
そして少し待つと、ディレクトリ内に www ができたことがわかります。この中が公開するデータであり、アプリにするデータです。
📌 自分のWebサイトを用意する時
このようにビルドして公開するようなフローでない場合（直接公開用のHTMLファイルやJavaScriptファイルを用意してる時）は、以下の手順で用意が必要です。
- CDNからの呼び出しをすべてローカルファイルに変更する
例えば、CSSやjQueryを呼び出す時、CDNを利用していませんでしょうか。
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
defer
></script>
その場合、CDNからの呼び出しをすべてローカルファイルに変更する必要があります。当該ファイルをダウンロードして、ローカル呼び出しにしてください。以下のようになればOKです。CDNからCSSも呼び出してる時は、同様にします。
<script
src="assets/jquery-3.5.1.min.js"
defer
></script>
なお、Google Analyticsは動作しませんので（あれはWeb専用です）そのままで大丈夫です。あと、Google Adsenseも動作しませんので、広告をだしたい場合はAdMobを利用する必要があります（詳細は本記事では触れません）
- ファイルを公開用ディレクトリに移動して、npmを設定する
続いて、wwwというディレクトリをつくって、公開用ファイルをすべて移動しましょう。そして、続いて、プロジェクトディレクトリで以下を実行します。
% npm init
パッケージ名などいろいろ聞かれますが、公開するわけではないのですべてエンターキーで飛ばします。そうすると、自動的に package.json というファイルがつくられますので、それが確認できたら成功です。
Capacitorの設定
続いてCapacitorをインストールします。以下コマンドを実行してください。
% npm install @capacitor/core @capacitor/cli
Capacitorの本体と、それをコマンドラインで利用するためのツールをインストールします。少し待つと完了しますので、続いて以下を実行します。
% npx cap init
またいろいろ聞かれますので、すべてエンターキーを押して飛ばしていきます。 capacitor.config.json というファイルが生成されますが、これがCapacitorを使ったあなたのアプリの設定ファイルになります。そして、あなたの必要なプラットフォームを作成します。
iOSアプリをつくる場合
% npx cap add ios
Androidアプリをつくる場合
% npx cap add android
iOSアプリをつくった場合は、 ios 、Androidアプリをつくった場合は android というディレクトリが作成され、アプリ用のファイルはすべてそこに自動作成されます。ちなみにここで [error] Capacitor could not find the web assets directory とエラーができた時は、 www というディレクトリをつくるのを忘れてる状態です。
アプリを起動する
iOSの場合
それでは、アプリを実際にエミュレーターで起動してみましょう。以下コマンドを実行して、先程インストールしたXcodeを立ち上げます。
% npx cap open ios
起動すると、以下のような画面になります（画面が真っ白の場合、左上の App を選択してください）
まず署名をします。左から「App」→「（TARGETSの）App」をクリックして、上タブから「Signing & Capabilities」をクリックすると、Signingの画面がでます。この「Team」から自分のアカウントを選択してください。
そして次に、左上にある「Generic iOS Device」を選択して、表示させたいエミュレーターを選択しましょう。そして、▶ボタンを押せば、iOSデバイスでの実行をエミュレーションすることができます（初回起動は時間がかかります）
iPhone SEを選択して実行してみましょう。以下のような画面が立ち上がり、エミュレーションできます。
ちなみに、JavaScriptも動きますので、メニューの開閉なども行うことができます。
Androidの場合
以下コマンドを実行して、Android Studioを立ち上げます。
% npx cap open android
ちなみに、先程 npx cap add android を実行していない場合、 [error] android" platform has not been created. Use "npx cap add android" to add the platform project. というエラーがでます。
問題なくAndroid Studioが開いたら、上部にある▶をクリックするとエミュレーターが起動します。
ちなみに▶の左のプルダウンからエミュレーションするデバイスを選ぶことができますが、ここに何もない場合は「OPEN AVD Manager」からデバイスの追加をしてください。
うまく実行できると以下のように表示できます。
コンテンツを更新する
現在、 www をiOSとAndroidともにコピーしてる状態ですが、当然コンテンツを更新することがあります。その場合、まず www を更新した上で、以下コマンドを実行します。
% npx cap copy
そうすると、 www の最新の中身を、iOSとAndroidにコピーしてくれます。
おわりに
これで普通のWebアプリがiOS、Androidアプリとしてビルドすることができることがわかりました。左から、Web表示、Androidエミュレーター、iOSエミュレーターですね。
そして、アプリ化すると次のステップが見えると思います。つまりは
-
アプリっぽい外観
iOSはHuman Design Guideline、AndroidはMaterial Designでデザインされてますよね。HTML/CSSでプッシュ遷移のアニメーションを用意したり、ボタンのクリックエフェクトを用意するのは大変です。 -
アプリっぽい機能
ただ画面を表示するだけではなく、例えばタスクリストのような機能、記事をリアルタイムで表示する機能だったり、チャット機能だったり。そういうアプリっぽい機能をつけたくなるかもしれません。
これらを解決するために、Capacitorを開発してるIonic teamは「Ionic Framework」というフレームワークを各種JavaScriptフレームワークで利用できるようにリリースしています。ぜひこの次のステップとしてご利用ください。
詳しい使い方は、Capacitorのプラグインの使い方も含めて、書籍Ionicで作る モバイルアプリ制作入門[Angular版]でご紹介しています。
それでは、また。
Discussion