株式会社グローバルゲート公式ブログ
コード1つでWebもモバイルも！Ionicで叶えるオールインワン開発
こんにちは、株式会社グローバルゲートのモーリーです。
明けましておめでとうございます。
2025年も当社並びに当ブログをよろしくお願い申し上げます。
さて、今回は新年らしく新しいことに挑戦しよう、ということで、HTML/CSS/Javascriptを使ってスマートフォンアプリを作成できるフレームワーク「Ionic」をご紹介したいと思います。
Ionicとは
Ionicは、HTML、CSS、JavaScriptといったWeb開発で一般的に使われる技術を活用してスマートフォンアプリを構築するためのフレームワークです。Vue、React、AngularなどのJavaScriptフレームワークを組み込むことができ、Webサイト制作の延長でアプリを作成できます。
通常、iPhone向けのアプリはSwift、Android向けのアプリはKotlinといった言語を使って開発しますが、Ionicを使用することでこれらの言語を使わずにクロスプラットフォームのアプリ開発が可能になります。
Ionicのメリット
Ionicの採用は次のようなメリットが挙げられます。
いずれも開発の効率化や学習コストの削減などにつながります。
1. クロスプラットフォーム対応
1つのコードベースでiOS、Android、ブラウザ向けのアプリを開発可能です。ビルド方法を調整するだけで、それぞれのプラットフォーム向けにリリースできます。
2. ネイティブ機能の統合が容易
IonicはWeb技術を使いますが、Capacitorというツールを利用することでカメラやGPSといったスマートフォンのネイティブ機能を簡単に統合できます。
3. 美しいUIコンポーネント
Ionicにはアラートやボタンなど、多くのUIコンポーネントが含まれており、統一感のあるデザインを手軽に実現できます。カスタマイズもCSSを使って柔軟に対応可能です。使用感はBootstrapに近いものがあります。
4. 充実したドキュメントと活発なコミュニティ
初心者向けのチュートリアルを含む公式ドキュメントが充実しており、学習コストが低いのが特徴です。また、フォーラムなどを通じて開発者同士で情報を共有しやすい環境が整っています。
Ionicのデメリット
一方で次のようなデメリットが挙げられます。
スマートフォンアプリの開発時にどのような技術を採用するかは、開発スタッフのスキルやアプリの特徴を考えて決定する必要があります。
1. パフォーマンスがネイティブアプリに劣る場合がある
IonicはWeb技術をベースにしており、アプリは内部的にWebView（アプリ内で動くブラウザのようなもの）を使用して動作します。そのため、SwiftやKotlinで作られたネイティブアプリと比べるとパフォーマンスが低下することがあり、特に高いパフォーマンスが求められるアプリではユーザー体験に影響が出る可能性があります。
2. 一部のネイティブ機能に制約がある
Capacitorを利用すれば多くのネイティブ機能を統合できますが、一部のデバイス固有機能や高度な処理には対応できない場合があります。
3. アプリのサイズが大きくなりがち
Web技術を活用する特性上、アプリのコードベースが比較的大きくなる傾向があります。簡単なアプリでもファイルサイズが増えるため、ストレージの制約が気になる場面もあります。
それでは、実際にIonicを使って簡単なアプリを作ってみたいと思います。
今回はRSSリーダーを作ってみます。
Ionicのインストール
※ Node.jsが必要なので事前にインストールしておきます。
ターミナルに以下のコマンドを入力します。
npm install -g @ionic/cli
プロジェクトの作成
続いてプロジェクトを作成し、必要ファイルを生成します。
以下のコマンドを入力することで対話式で必要ファイルやフォルダが生成されます。
ionic start
1.Use the app creation wizard?
Web上のアプリ作成ウィザードを使用しますか？
ターミナルでも完結するのでnを入力。
2.Pick a framework!
使用するJavascriptフレームワークを選択します。
私は普段から使っているVueを選択します。
3.Every great app nees a name!
アプリの名前を入力します。
フォルダ名になるので今回は「rssReader」としました。
4.Let's pick the perfect starter template!
ベースとなるテンプレートを選択します。
今回はタブ式のアプリにしようと思うのでtabsを選択します。
ここまで終わるとプロジェクト名のフォルダが作成され、その中に必要ファイルが生成されています。
このフォルダをVSCodeで開き、コードを書いていきます。
ブラウザでデバッグする
Ionicで作成できるアプリはスマートフォンだけでなく、ブラウザでも実行可能です。
開発もブラウザ上でプレビューを表示させてデバッグを行いながら進めることができます。
プロジェクトフォルダをVSCodeで開いたあと、次のコマンドを入力することでローカルサーバーが起動し、プレビューを動作させることができます。
ionic serve
前述のウィザードでtabsを選んだ場合、最初は3つのタブがあるだけのアプリとなっています。
ionic serveで開いたブラウザはコードを変更するたびに自動的でリロードされ、表示に反映されます。
毎回ビルドをする必要なく効率的に開発を進めることができます。
RSSリーダーをつくる
Ionicはダークモード用のスタイルも内包していますのでライト/ダークの切り替えボタンを付けてみました。
（タブが余ったので）
スマートフォン用にビルドする
それでは、いよいよスマートフォンのアプリとして使えるようにビルドしてみます。
今のところVue.jsのWebアプリを作るのと何も変わりませんが、これがスマホアプリになるのでしょうか……？
私の職場ではWindowsを使用していますので、今回はAndroidアプリをビルドしてみます。
（iOS用のビルドにはMacが必要になります）
Android Studioのインストール
AndroidアプリのビルドのためにはAndroid Studioが必要なのでインストールをしておきます。
Android Studioはめちゃくちゃ重くてメモリ32GBでもきつい。
プロジェクトをリリース用にビルドする
VSCodeに戻り、ターミナルに以下のコマンドを入力します。
ionic build --prod
ちなみにこれでできあがったdistフォルダ内のファイルをサーバー上に置けば、それだけでWebアプリとして機能します。
Android Studioを開く
上記のビルドが終わったら以下のコマンドを入力します。
npx cap open android
そうすると現在のプロジェクトがAndroid Studioで開きます。
ここからの作業はAndroid Studio上で行います。
Android Studioでビルドする
メニューのBuild内にある「Generate Signed Bundle / APK」を選択します。
次の画面ではAPKを選びます。
※今回はテストなのでAPKを選んでいますが、Google Playストアでの公開にはAndroid App Bundle（AAB）形式でのビルドが必須です。
KeyStoreファイルの作成
まずはKeyStoreという署名ファイルを作成します。
これはアプリ内のデータを安全に暗号化するために必要なもので、Androidアプリでは必須となっています。
Key store pathのCreate new...をクリックします。
Key store pathのフォルダ選択ボタンをクリックします。
作成するKeyStoreファイルをどこに保存するかを選択し、ファイル名を入力します（ビルド時に複製されて移動されるのでどこでもいい）
KeyStoreファイルを照合するためのパスワードを入力します。
Passwordの欄が2つありますが、同一でも構いません。
CertificateのFirst and Last Nameにも何でもいいので入力が必要です。
Generate Signed App Bundle or APKのウインドウに戻ってきますのでNextをクリックします。
Destination Folderで生成されるアプリファイルの保存先を選びます。
デフォルトでは現在のプロジェクト配下になっていると思いますので、そのままでよければ変更する必要はありません。
Build Variantsではデバッグ用かリリース用のどちらのアプリを生成するかを選びます。
今回は実機で動かしてみたいのでreleaseを選択し、Createをクリックします。
しばらく待つと指定したフォルダ内にアプリ本体であるapkファイルが生成されます。
これでビルドは完了です。
実機へのインストールと実行
このapkファイルをスマートフォン上で実行すれば、アプリとしてインストールされます。
今回はUSBで接続して適当なディレクトリに置き、実行する方法を試してみました。
AndroidスマートフォンをUSBでPCと接続すると、外付けドライブの扱いで表示されます。
適当なフォルダ内に先程生成されたapp-release.apkをコピーします。
スマートフォンのFilesアプリ内で先程コピーしたファイルが表示されています。
これをタップするとインストールが実行されます。
スマートフォンによっては（というかデフォルトではそうなっていますが）apkファイルから直接インストールすることはできない設定になっています。
FIlesアプリの設定で「不明なアプリのインストール」を有効にしてください。
注意！
インターネット上で配布されている（Google Playストアを介さないで配布されている）apkファイルはウイルスの可能性があり非常に危険です。
絶対にインストールしないようにしてください。
インストールが完了すると、通常のアプリと同じようにアイコンが表示されます。
果たしてちゃんと動くのか、タップして起動してみましょう。
アプリを起動する
無事きちんと起動して動作しました！
まとめ
ということで、今回はIonicというフレームワークを使用してスマートフォンアプリを作ってみました。
実際にストアにリリースするまでにはまだまだ道のりが長そうですが、アプリそのものは比較的簡単にビルドまで成功できたと思います。
Web制作の技術でアプリを作るというコンセプトは、今回紹介したIonic以外にもReact NativeやFlutterがあります。
これらも次回以降の記事で試してみたいと思います。
【関連記事】
