2020
12/10

Ionic Vueでアプリがエミュレータ上で起動するまでやってみる

IonicというJavascriptやCSSでスマホ・デスクトップアプリを作成するフレームワークがあるのですが、2020年10月にVueがサポートされるようになりました

スマホアプリをつくりたいと思い続けて早XX年…これなら私の技術でもできるのでは?と思い、Android Studioのエミュレーターで動くところまでをやってみました。

簡単な電卓を作ってみました。

ADs

事前準備

Visual Studio Codeでコードを書き、Android Studioでビルドとエミュレータによる動作確認を行います。
なのでVSCodeとAndroid Studio、CLIツールのインストールでnpmを使用するのでNode.jsをインストールしておきます。

※Windowsを使用しています。

プロジェクトのセットアップ

まずはCLIツールをインストールします。

インストールが完了したらVSCodeのターミナルを開いて作業フォルダに移動し、

と入力します。

そうするとカレントフォルダ配下にプロジェクト名でフォルダが作成され、その後は対話型で初期設定を進めていくことができます。

まずはFrameworkを選択します。ここでVueを選びます。

プロジェクト名を入力します。フォルダの名前にもなります。

初期テンプレートを4種類から選びます。
ここではblankを選択します。

ここまで進むと現在のフォルダ配下にプロジェクト名のフォルダが作成され、ファイルをダウンロードしたり展開したりといった初期化の作業が進みます。
かなり時間がかかるのでお茶でも飲みながら気長に待ちます。

最後になんかのアカウントを作るか聞かれますが、とりあえずNで。
(何のアカウントなのか後日調べてみます)

ここまで進むとプロジェクト名でフォルダが作成され、最低限のファイルが用意された状態になります。
プロジェクトフォルダを開いて編集作業を進めていきます。

コードを編集する

フォルダ構成はこういう感じになっています。
Vueのプロジェクトとほぼ同じなので理解しやすいと思います。

ターミナルで

と入力すると、サーバーが起動してブラウザが開きます。
編集した内容が即座に反映されブラウザがリロードされる(ホットリロード)にも対応しています。

※中身はVue CLIのnpm run serveと同じです。

プロジェクト作成時に選んだblankというテンプレートはページ遷移もなくコンポーネントも「Home」という名前のものが一つあるだけのシンプルなテンプレートです。
このHomeコンポーネント(Home.vue)を編集して簡単な電卓をつくってみます。

Home.vueは初期の段階では以下のようになっています。
Ionic Vue独自のタグ(コンポーネント)がありますが、どういう意味なのか名前からでも想像できると思います。

コンポーネントについては公式ページの解説が分かりやすいです。

これを編集してこうなります。
(電卓の部分は本題ではないので参考程度ということで…。)

ブラウザで確認すると正常に動作していますので、コード側は一旦これで完了です。

スマートフォン向けにビルドする

ionic serveが動いている場合はCtrl+Cで監視を終了します。

次に、

と入力し、プロジェクトをビルドします。
これでdistフォルダが生成され、その中にビルドされたhtmlやjsファイルが生成されます。

Webの場合はこのdist内をサーバーにUPすれば出来上がりですが、スマホアプリの場合は以降の作業が必要です。

と入力します。

これでプロジェクトフォルダ内にandroidというフォルダが作成され、中にアプリのビルドに必要なファイルが生成されます。

次に

と入力すると、Android Studioが起動します。

Android Studioの実行ボタン(Run)をクリックすることで、Androidのエミュレーターが起動し、表示を確認できます。

もし起動ボタンが押せない場合、Tools→SDK ManagerのSDK Platforms内で使用するAndroidがインストールされているか確認します。

使用するAndroidのバージョンはandroidフォルダ内のvariables.gradleを見ると確認できます。

無事起動しました!エミュレータで動いてますから実機でも多分動く…はず。

今回はここまで

エミュレータ上ではありますがひとまずアプリとして動くところまでできました。
普段使っている技術の延長でスマホアプリを作れるというのは素晴らしいです。新しいことを覚えるのは大変ですから…。

通知などスマホ独自の機能の実装やGoogle Play Storeへの公開、iOS向けのビルドなど手こずりそうな部分はまだたくさんありそうですが、運営しているサイトをスマホアプリとしてリリースするようなこともできればいいなと思います。引き続きがんばります。

参考になりました

公式ドキュメント
日本語に翻訳済みでドキュメントが丁寧なので導入部分はすんなりできました。

Ionic-Vueでスマホアプリを作る本
私はここまで追いついてないので…今後がんばります。

ADs

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。