Ionicでモバイルアプリ開発 その1

はじめに

少し前の2017年1月27日にIonic 2.0.0 がリリースされました。

クオックスが入居しているビルの2階にあるコワーキングオフィス azitoで、隔週でIonic勉強会を行っているので、勉強会の内容などをこちらにメモしておこうと思います。

Ionicについて

Ionicは主にモバイルアプリ向けのフレームワークになります。
1つのコードからAndroidアプリやiPhoneアプリ、プログレッシブWebアプリ等を作ることができます。

Ionicで作るアプリは、いわゆるシングルページアプリケーション(SPA)といわれる、Webアプリケーションです。このWebアプリケーションの部分の大本にはAngularを使用します。
IonicではAngularで使用できるモバイルアプリ向けのコンポーネントが用意されていて、ネイティブアプリと同じような見た目のWebアプリが簡単に作れるようになっています。

また、Ionicで作ったアプリは、AppストアやGoogle Playで公開できるようにパッケージングする仕組みも用意されています。このパッケージングする部分では、Cordova(Phonegap)が使用されています。
JavaやKotlin、Objective-CやSwiftで別々に作っていたモバイルアプリが、1つのコードで作れるようになるので開発期間の短縮が期待できますね。

こんなステキはIonicですが、Ionicを使いこなすためには土台にあるAngularとCordovaについても学習する必要があるので、最初はちょっとだけ大変かもしれないです。

Ionicの開発環境構築

それでは早速、Ionicの開発環境を用意して、サンプルを動かしてみましょう。

IonicのインストールはGet started with Ionic Frameworkのページにある通り、npmコマンドでインストールするだけです。

かなり沢山のnpmパッケージがインストールされるので、結構時間がかかります。快適なインターネット接続環境でインストールしてください。

npmコマンドが入っていない!って人は、まずはnpm、Node.jsのインストールが必要です。
Node.jsのサイトからダウンロードしてインストールしてもいいのですが、Node.jsのバージョンを簡単に切り替えることができるnvmを使うのもおすすめです。

プロジェクトの作成

インストールが完了すると、ionicコマンドが使えるようになります。ionicコマンドを使って、新しいプロジェクトを作ってみます。

このコマンドを実行すると、カレントディレクトリに myAppというディレクトリが作られ、その中にサンプルコードが入っています。

動かしてみる

動かすときには ionic serve を使用します。

実行すると自動的にブラウザが起動されて、ページが表示されます。
ハンバーガーメニューがついた、アプリっぽい画面が表示されると思います。

ここまでできれば、Ionicの開発環境の出来上がりです。あとは使い慣れたエディタがあればバッチリです。

次回

次回は簡単なToDoアプリを作ってみて、AngularやIonicの使い方をみていこうと思います。

勉強会のお知らせはFacebookやMeetupで行っています。お近くの方で興味があればMeetupのMeteor Oita ♨に参加しちゃってください。

Pocket

The following two tabs change content below.
Katsumi Honda
広く浅く、できれば深くをモットーに、フロントエンドからバックエンドのWebアプリ開発をひと通りこなしています。 15インチのMacBook ProとXperiaを愛用しています。 最近、魚釣りを始めてみました 🙂
Katsumi Honda

最新記事 by Katsumi Honda (全て見る)