エンジニア全般
JavaScriptは比較的軽く自由な設計が可能であるため多種多様なフレームワークが存在します。Ionicもそのフレームワークの1つですがアプリ開発に向いたフレームワークとなっており、導入している場合もあるかと思われます。
この記事では導入にあたり難易度は低いものの、導入するには少々不安があるという方に向けて基礎知識や導入から利用方法と料金について紹介をご紹介いたします。
千葉県出身。落花生はあまり好きじゃない。魚が好き（千葉は漁業も盛んなのです）。 高校卒業後小売業に6年間従事、2023年よりSESインフラエンジニアとしてシステム開発・運用保守業務に携わりながら勉強中。 知識の幅を増やすため2024年より副業でライター活動を開始。 バックエンド・フロントエンド両方興味があるので幅広く知っていきたいと考えています。 座右の銘：【鉄は熱いうちに打て】
Ionicの基本
Ionicとは
2013年にDrifty社が開発したアプリのフロントエンドであるUX/UIインタラクションに重点を置いているJavaScriptのフレームワークです。
Angular(アンギュラー)というフレームワークの上に開発されており近年話題のPWA（Progressive Web Apps）のサポートにも対応していることから、IonicとHTMLやCSS、JavaScriptなどと併用しiOSやAndroid、Webなどのネイティブプラットフォームの種類を問わず1つのソースコードで高品質なモバイルアプリケーションの作成が可能です。
このため、Angularと同様に初心者から熟練者まで幅広い層のエンジニアに利用されています。
日本語の公式ドキュメントも存在するため公式情報のアクセスが容易です。
Ionicの特徴
PWAに対応しておりネイティブアプリのような審査がなくリリースが容易であり様々なフレームワークと併用が可能なことから人気のあるIonicですが、その他特徴についてご紹介します。
無料のオープンソースライセンスである
IonicはMITライセンスのもとで公開されているため、個人・法人を問わず自由に利用できます。PWAに対応したフレームワークが無料で使えることは大変喜ばしいことです。また、オープンソースであるため情報やリソースが豊富であり、ドキュメントやコミュニティにアクセスすることで問題解決やサポートを受けることができます。
他フレームワークと統合可能である
先ほども紹介した通りその他フレームワークと統合されているため、JSやAnguler、Reactなどの知識がある場合にこれらの知識を活かしてIonicアプリの開発を行うことが可能です。
豊富なUIコンポーネントやコンポーネントとデバッグツール
サイト開発において見た目に直結するパーツを作成するためのUIコンポーネントが豊富にあり、利用することで手軽に送信ボタンやチェックボックスなどを作成することができます。また、プラグインも豊富であり様々な技術を利用することでリッチなアプリケーションを作成することも可能です。
そして開発には欠かせないデバッグについてもツールが用意されておりionic CLI(Command Line Interface)などを利用することでスムーズな開発が可能となります。
注意点
紹介した通り非常に便利なIonicですが、アップデートが行われているため大幅なアップデートがあった際に対応する必要があります。脆弱性対策や高速化などメリットが大きいため怠らずしっかりと対応していきましょう。
Ionicの始め方と使い方
Ionicを導入することで得られるメリットが大きいことが先ほどの紹介にご理解いただけたと思います。では導入ための環境や手順についてご紹介していきます。
インストールの前に前提条件として開発に使うコンピュータにnpmとNodeがインストールされている必要がありますので、インストールされていない方はこれらのインストールから始める必要があります。下記記事を参考にインストールを行ってください。
Ionicのインストールとセットアップ
Ionic CLI（コマンドライン）のインストールを最初に行います。
Node.jsがパソコンにインストールされていることを確認したあと、お使いのコンピュータやVSC(Visual Stadio Code)などからターミナルを開きIonicをダウンロードするため以下を実行します。
npm install -g @ionic/cli
インストール出来たら以降はIonic CLIが処理を行うためすぐに開発を行うことができます。ですが、このままでは開発するアプリケーションのバージョン管理ができないため下記URLを参考にGitをコンピュータにインストールすることをお勧めします。
インストールできたか確認するには
git –version
をターミナルで実行しバージョンが表示されればインストールが完了しています。
このように簡単にIonicを使用開始することが可能です。
Ionicアプリの開発
アプリの新規作成手順
Ionicがインストール出来たらいよいよアプリ開発に入ります。
新しいIonicアプリを作成する際3つのスターターテンプレートとしてタブベースのレイアウトであるtabs、サイドメニューレイアウトのsidemenuがあり、まっさらな状態から自分で単一ページを作る場合はblankをアプリケーション作成の際に入力します。
- コマンドラインにionic startと入力するとプロジェクト名を聞かれるため任意のプロジェクト名を入力する
- 次にどのフレームワークを利用するか聞かれるため表示されている候補から選択する
- 使用するテンプレートを聞かれるため候補から選択する
作成が完了すると以下のように表示されます。
Next Steps:
– Go to your newly created project: cd ./任意のプロジェクト名
– Run ionic serve within the app directory to see yo //アプリディレクトリ内で ionicserve を実行してアプリを表示できるというメッセージ
– Build features and components: https://ion.link/scaffolding-docs //ビルド機能とコンポーネント参照URL
– Run your app on a hardware or virtual device: //ハードウェアまたは仮想デバイス上でアプリを実行しているというメッセージ
https://ion.link/running-docs //公式ドキュメントURL
他にもコマンドラインから以下を入力し実行することで新しいアプリケーションを作成することもできます。
$ ionic start myApp tabs –type=angular–
入力するとプロジェクト名として「myApp」、利用するスターターテンプレートの種類として「tabs」を引数で指定しています。プロジェクトの種類はAngularとして設定されています。またほかの利用できるテンプレートを確認したい場合は以下を入力すると確認できます。
$ ionic start –list
ローカルでブラウザプレビューを確認する方法
アプリケーションの新規作成が終わったら、Ionicではコンパイルやデプロイを行わずともChromeやSafari、Firefoxの開発ツールにアクセスしテストやデバッグを行うことが可能です。プレビューを見るにはコマンドラインに以下を入力します。
$ ionic serve
入力し、無事ローカル環境からWebブラウザにアクセスできると下記のようにローカルホストサーバの情報が出てきます。
$ ionic serve
> ng run app:serve –host=0.0.0.0 –port=8100[INFO] Development server running!
Local: http://localhost:8100
External: http://192.168.1.169:8100Use Ctrl+C to quit this process
[INFO] Browser window opened to http://localhost:8100!
http://localhost:8100/ionic-labをWebブラウザに入力すると以下のように表示されるはずです。
※画像ではlocalhost:4200となっていますが、実際には先ほどコマンドラインでサーバを立ち上げた際に表示されるローカルホスト名Local: http://localhost:xxxxの値を入力すれば大丈夫です。
サーバを起動したままアプリ開発を行い変更の保存を行うとその変更が適用された状態でアプリがリロードされます。
機能やコンポーネントのビルドについて
アプリの新規作成が完了したら機能などの開発を行います。大部分はsrc/appディレクトリで開発します。src/ ディレクトリには、 index.html ファイル、テスト用の設定ファイル、画像を格納する assets フォルダ、アプリのコードを格納する main app/ ディレクトリなどの項目があります。
そしてsrc/app/ ディレクトリには、ルートアプリのコンポーネントとモジュール、およびページ、コンポーネント、サービスなどのアプリの機能を含む追加のディレクトリが含まれます。
新しいアプリ機能の作成手順
- 新しいアプリ機能を生成するには次のコマンドをコマンドラインに入力します。$ ionic generate
- 生成できる機能の一覧が表示されるためその中から選択します。
- 選択後新しく作る機能の名前の入力が求められるため任意の名前を入力します。
- パスの名前を聞かれるため任意のパス名を設定します。
また、ほかにも以下のように引数で名前と配置場所を設定することも可能です。
ionic g component “portfolio/intro/About Me”
gはgenerateのコマンド名、生成する機能としてcomponentを選択、任意の配下(例だとportfolio/intro配下)にAbout Meという機能名を引数で指定しています。
以上の手順を経て作成するとフォルダやファイルが作成され、最後に[OK] Generated page!と表示されれば作成完了です。
最後に次のコマンドを実行しアプリケーションをiOSおよびAndroid向けにビルドします。$ionic build
以上がIonicでの基本的な開発手順となります。
Ionicのプラグインと拡張
プラグインの導入：Capacitorのインストール
Ionicにはcordova(コルドバ)とcapacitor(キャパシター)のプラグインが存在しますが、capacitorはcordovaの後継としてプラグインの基礎部分を改良して生まれたものになります。
capacitorプラグインを利用したアプリ開発に必要な環境としてNode.js16以上がインストールされている必要があります。IonicのインストールとセットアップでNode.jsをインストールされたと思いますが、念のためターミナルから以下のコマンドを入力しNode.jsのバージョンを確認しておきましょう。
node –version
# v18.3.0
#v18.3.0と出ている数字が現在インストールされているNode.jsのバージョンになります。
新しくcapacitorアプリケーションを作成したり既存のプロジェクトに追加することが可能です。行うにはCLIかVSCode extensionを使用します。
capacitorアプリケーションを新規作成するには以下をコマンドラインに入力します。。
ionic start –capacitor
これでCordovaプラグインの導入が完了し、デバイスの機能を利用したりネイティブ機能の拡張をすることが可能です。以降はアプリの新規開発手順と同じですのでどんどん開発していきましょう。
2024年2月現在最新バージョンはcapacitor5.0です。
PWA開発を行うための依存環境をインストールする
上記のcapacitorインストールの際適したバージョンのNode.jsがインストールされていることが確認できたら依存関係のインストールを行うことで、capacitorを利用したAndroidやiOS、Webの３つに対応したアプリケーション(PWA)作成が行えます。
依存関係はAndroidとiOSで異なるため、以下URLを参考にインストールを行ってください。
※依存環境のインストールについては開発がWebアプリのみであるなど、PWA開発でない場合は行わなくても大丈夫です
便利な拡張機能
多くの拡張機能が存在しますがその中からおすすめな拡張機能を一部紹介いたします。
併せて公式Gitドキュメントも紹介しているためURL先を参照して導入してみましょう。
Ionic Strage
この拡張機能を導入することでローカルストレージやSQLiteデータベースを簡単に操作することが可能です。また、データの永続的な保存にも使用できるためユーザーのデータ管理、キャッシュデータの保存に適しています。
以前はAngulerのみだったサポートが3.x以降JSもサポートするようになりました。
Geolocation
こちらはデバイスの位置情報を取得するためのプラグインです。利用することで現在位置の情報や追跡機能、高度や方位も他に速度情報などを地図アプリケーションと統合し実装することができます。
Push Notifications
アプリのプッシュ通知機能を実装するためのプラグインです。ただし、サイレントプッシュ通知機能には対応していません。FCMなどのプッシュ通知プロバイダと統合することが可能です。
【公式Gitドキュメント】Push Notifications
StatusBar
ステータスバーの表示または非表示、ステータスバーのスタイルについて変更することが可能です。インタラクション性を高めるために導入することも検討してみてはいかがでしょうか。
インタラクションデザインについて知りたい方はこちらの記事をぜひご一読くださいませ。
【参考記事】インタラクションデザインとは？成功・失敗事例や設計手順について徹底解説
Ionicの価格とライセンス
Ionicには様々なプラグインと利用できるフレームワークがあることを紹介してきました。基本的に無料であり目的に応じて組み合わせることでアプリケーションを作成することが可能です。しかし、よりアプリケーションをリッチなものにしたいと思うことがあるかもしれません。そういった場合には有料サービスの導入も一つの手です。
Ionicの価格体系
Ionicにはオープンソースフレームワークとは分離したAppflowという製品アプリ用のサービスが存在しています。Ionicアカウント登録が必要ですが、プランがいくつかあるためその中から目的に合ったものを選びましょう。
また、有料版を導入することにより品質を高めたり市場に出すまでの期間短縮につがるなどその他さまざまなメリットがあるため、以下を参考に検討してみてください。
| サービス名称 | 概要 | プラン名/価格 |
| Appflow | 製品アプリ用の商用サービスであり、Ionicアプリのデプロイを支援します。アプリストアへ直接公開することやワークフローの自動化、シングルサインオンのほかサービスの統合やCI/CDツールの使用など、より高度な機能を利用することができます。 |
|
| Ionic Enterprise | モバイルアプリ向けのサービスです。構築と配信などビジネス全体を支援します。セキュリティサポートやアドバンスコンポーネント、プラグインの開発といったプロ向けの追加機能とサポートを含んでいます。
Standardでは同時ビルドが３つまでであったり、Gitを利用したクラウド支援の対象外になっているなどいくつか制限があります。 |
|
| Ionic Native Enterprise | Ionic Enterpriseに含まれるサービスで、安全で信頼性の高いプラグインを提供する有料サービスです。ネイティブプラグインを専門にしているチームのサポートを受けることで、より高度なプラグインを利用することが可能です。アップグレードや修正情報の素早い提供や支援を受けることもできます。 | Ionic Enterpriseと同様 |
価格に関する注意点
柔軟で使い勝手がよいIonicのサービスですが注意点があります。以下について注意しながら、試運転期間の利用や有料サービスの前に無料のライセンスから始めて様子を見るなどして開発の予算やスケジュールに合ったライセンス選びが大切です。
適切に選ぶことでPWAの開発などのコストや手間を削減し、少ない工数でユーザービリティの高いアプリケーションを作成可能です。
- サービスを選ぶ前にあらかじめ必要な機能と予算決めが必要です。
- ライセンスによって制限されるものがあるため、それを踏まえたうえで利用するライセンスを決定する必要があります。
- ライセンスのほかにサポートについても料金が発生する場合があるため、コストの確認が必要です。
- 価格が変わる場合があるため、サービスを導入する際はアップデート情報に気を付けましょう。
Ionicの将来性
Ionicはコミュニティが活発であり、サポートも充実しています。また、JSのフレームワークでありながらそれほど難しい技術も必要としないため今後導入する企業や個人も増えていくことでしょう。
開発においてコンポーネントなどの拡張機能の不安定さが以前は課題となっていたようですが、Ionicはアップデートを重ねて今ではそれほど問題にならなくなっています。こうしたことから、不具合があってもコミュニティから解決策を探す・アップデートを待つ、有料サポートを受けるといった様々な方法からアプローチしていくことで解決することができるでしょう。
そして、この多様なプラグインや開発の容易性から企業でもIonicを取り入れることが増えておりWPA開発とともに市場は大きくなってゆくでしょう。Ionicの導入にはIonicに関する知識や経験のある人物が求められるため、Ionicに触れて知識や技術を身に着けていくことは市場価値の向上につながります。
Ionicのまとめ
日本国内ではまだ知名度が高いとは言えないですが、企業も参入していることからゆくゆくは日本でも導入する機会が増えていくことでしょう。そこでコミュニティに参入することで新たなサービスやプラグインが誕生する切っ掛けになるかもしれません。
様々なサービスやプラグインがあり、自由度が高いですがその分いざ開発する際に選ぶことが難しく感じるかもしれません。そんな時はぜひ株式会社Jiteraへご相談ください。Webアプリ開発について豊富な知識と経験をもとにお客様に最適なご提案をいたします。
