Ionicで始めるハイブリッドアプリ開発(iOS)

  • このエントリーをはてなブックマークに追加
  • Pocket
         

はじめに

HTML、CSS、JavascriptなどのWebの技術でモバイルアプリを作るニーズがますます高まってきていると感じてます。

正直Cordova時代はユーザビリティに難があるせいかいまいち盛り上がらない感じでしたが、最近だとReact NativeやNative Scriptが出てきて、今後この流れは止まらないだろうなと。

Ionicは今時点ではあまり目立っていないように感じますが、サクッとプロトタイプを作るには適したフレームワークです。

バージョンアップもされていて出来ることも増えているので、個人的には有望なプロジェクトだと思っています。

また、Angularjsで開発出来るので、Angularjs好きなら候補として挙げてみてもいいんではないでしょうか。

今回はIonic Frameworkを使ってハイブリッドアプリを開発してみます。

動作環境

  • macOS High Sierra 10.13.3
  • ionic 3.20.0
  • cordova 8.0.0
  • Node v8.9.4
  • npm 5.6.0
  • Xcode 9.3 Build version 9E145
  • cordova-ios 4.5.4

Ionicプロジェクトの作成

Cordovaとionicをインストール

ionicプロジェクト作成

すると各種テンプレートを選択できるので、ここではtutorialを選択します。

プロジェクトの作成が開始されるので、質問に答えながら進みます。

プロジェクトの作成が完了しました。

デフォルトのディレクトリ構成です。

ブラウザで実行

ローカルで起動してみます。

※ios-deployが存在しないみたいなエラーが出たら以下を実行して下さい

ブラウザが起動し、http://localhost:8100/でIonicプロジェクトが実行されます。

プラットフォームを追加

今回はiOSアプリを作成します。

まずはプラットフォームにiosを追加します。

platform>ios配下にiOSアプリ用のファイル群が生成されます。

エミュレータで実行

ローカル端末のエミュレータで実行してみます。

エミュレータが起動し、Ionicプロジェクトが実行されます。

※ライブリロードしたい場合は--livereloadオプションをつけて下さい。

実機(デバイス)で実行

Ionicプロジェクトをiosビルドします。

エミュレータで実行した場合は、ビルドファイルはすでに生成されています。

Platformsのios配下に生成されたxcodeprojectファイルを開きます。

SampleProject>platforms>ios>SampleProject.xcodeproj

General>SigningからTeamにDeveloper Accountを設定します。

デバイスをPCに接続し、Xcodeからビルド実行するとデバイス上でIonicアプリが起動します。

最後に

今回は数あるハイブリットアプリフレームワークの中からIonicを取り上げてみました。

性能などはあまり調査しきれませんでしたが、激しいインタラクションやリアルタイム性が必要でないならば、十分実用に足ると感じました。

あとは開発者のコミュニティが広がれば浸透するかもしれませんね笑

参考

Ionic 公式

スポンサーリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメントを残す

*