Help us understand the problem. What is going on with this article?

Ionicでのアプリ開発の始め方

Ionicとは?

Ionicとは、Google社のAngularというアプリケーションフレームワークをベースに、HTML5アプリの開発に特化して作られたJavaScriptフレームワークです。

Build amazing apps in one codebase, for any platform, with the web.
(公式サイトより)

とあるように、Web/iOS/Android アプリが全て同時に開発できる、いわゆるハイブリッド開発ができる優れものです。1 また、近年Webをアプリとして便利にするPWA(Progressive Web Apps)という仕組み2も誕生しましたが、IonicはこのPWAにも標準でサポートしています。

Ionicの始め方

とりあえず手元で始める場合は、以下の手順で始められます。

1.Node.jsをインストール

2.Ionic, Cordovaを インストール

$ npm i -g ionic cordova

$ ionic -v
# 3.19.0

3.Ionicプロジェクトの雛形をCLIで作成

$ ionic start hoge --type=ionic-angular
  • いくつか対話的に選択肢が出てきますが迷ったら以下を選択してください
    • 質問1: ? Starter template
      • tabs
    • 質問2: ? Install the free Ionic Appflow SDK and connect your app? (Y/n)
      • n

4.プロジェクトディレクトリに移動

$ cd hoge

5.アプリを起動

$ ionic serve

この時点で少し待つと自動でアプリが起動し、ブラウザにhttp://localhost:8100というURLでページが表示されると思います。以下スクリーンショット(シミュレータ起動バージョン)。

localhost_8100_(iPhone 7) (1).png

ちなみに、執筆現時点での環境は以下となっています。

$ ionic info                                                                                                                    (git)-[master]

cli packages: (/Users/k_kuwahara/.nodebrew/node/v8.9.1/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.6
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node  : v8.9.1
    npm   : 5.5.1
    OS    : macOS Sierra
    Xcode : Xcode 9.2 Build version 9C40b

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

開発する上で必要な知識

  • HTML5
  • JavaScript
  • TypeScript
  • SCSS
  • Angular

この中で一番学習コストが高いものは、やはりAngularだと思いますが、簡単なアプリケーション開発であれば、Angularの知識はなくても開発することはできます。3

実機での確認

例えばiPhoneの実機で確認する場合、以下のコマンドを実行し、XCode用のプロジェクトを作成します。

$ ionic cordova build ios (or android)

platforms/ios/ディレクトリに、hoge.xcodeprojというファイルが生成されているかと思いますので、これをXCodeで開いていただき、お手元のiPhoneをMacに接続し、そのiPhoneにビルドしてください。

このように、実機での確認は少々手間がかかっていましたが、つい先日実機での確認がもの凄く簡単になるアプリがIonic Teamからリリースされました!その名も「Ionic DevApp」です!

詳細はこちらの記事「Announcing Ionic DevApp」。

使い方は、

  1. アプリをインストール、起動
  2. 同じwifiに端末とPCを繋ぐ
  3. PC上で$ ionic serveを実行

すると、先ほどインストールしたIonic DevApp上で表示され、タップすると実機でアプリが動作します。これは素晴らしい。もちろん、watchモードで起動していますので、ソースコードを編集すれば、自動で実機にも変更が反映されます!感動するので、皆さんぜひ試してみてください。

書籍

日本語のIonicの書籍はかなり数が少ないですが、2018年1月16日に初版が, 2019年11月25日に第二版の

Ionic モバイルアプリ制作入門
https://www.amazon.co.jp/dp/4863542925/

という本が出版されました🎉!私も校正(テクニカルレビュー)に携わりましたが、とても素晴らしい入門書に仕上がっておりますので、皆さんぜひ購入してみてください!

参考ハンズオン資料

@s_kozake さんが書かれたハンズオン資料ですが、こちらも物凄く勉強になりますので、一度手を動かしてみてください!

Ionicハンズオン資料

コミュニティ

Ionic Japanというコミュニティが存在し、Slackチームもありますので、何か質問があれば気軽にこちらに参加し、質問を投げてみてください。また、こちらのコミュニティでは勉強会やmeetupなども開催されていますので、ご都合あえばご参加ください。募集はconnpassから行なっています。


  1. 裏ではCordovaというフレームワークが動いています。 

  2. Googleが提唱したもので、Webでネイティブアプリと同じようなUXを提供するための仕組みです。 

  3. ページを増やさないとかService Classとかを作成せず、全てボイラープレートの中で完結するならば可能です。 

clown0082
A Servant Leader of front-end team/an Executive/CEO(secondary) at Yumemi, Inc. We are the lions. CLI creator by nodejs, Riot.js(Collaborator), Challenge of an ordinary engineer.
http://kito0039.hatenablog.com
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。東京(三軒茶屋)/京都(四条烏丸)/札幌/大阪/福岡に展開中!Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした