seseragiseven

Ionic2ことはじめ、個人的につまずいた点など

更新頻度についてはもはや触れないでいく。

最近Ionic2というものを使ってアプリを作ったりしている。最近は増えてきたとは言え、まだまだ歴史も浅く、日本語の文献も少なく試行錯誤してきたので、自分用に備忘録を残してみようと思う。このサイトの本来の使い方である。なお、Ionic2のバージョンは執筆時点で最新版の3.4を使用しているが、すべてが最新版ではないので細かな挙動の違いとかはあるかもしれない。参考程度に。

global packages:
    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:
    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3 browser 4.1.0 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.0.1

System:
    Node       : v7.10.0
    OS         : Windows 7
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 4.2.0

Ionic2とは

読み方は「アイオニックツー」で正しいと思う。cordovaとAngular2を使ったフレームワーク。
cordovaはざっくり言うとHTMLでアプリが作れるというフレームワーク(swiftやJavaを覚えなくて良い)。
Angular2は、JavaScriptを大規模開発用に整えていろいろ便利な機能を追加したりした「モダンなWeb」のためのフレームワーク。基本TypeScriptを使って書く。

もう全部フレームワーク。フレームワークとフレームワークを合体させたフレームワーク。
役割的には、
cordova:
HTMLアプリの基本的な動きの実装、カメラとかのデバイスネイティブ機能を使える機能を提供。
プラグインのインストールとかはやるけど基本内部で動くのであんまり意識することはない。
Angular2:
基本これで処理を書いていくTypeScriptなので拡張子は「.ts」。これとHTMLとSCSSで基本作っていく。
Ionic2:
上記2つを含んだフレームワーク。デザインや動きまで完成された「リスト」や「モーダル」なんかを簡単に作っていける。Angular2は処理だけだけど、見た目も全部含めて1つのパーツにしてくれてるから、基本の動きだけであればコピペするだけで完成する。Ionic2のコンポーネントで作った要素以外の動きをTypeScriptで別途書いていくという感じ。

Ionic2の何がいいのか

まず何と言っても「Webの知識を使ってネイティブアプリが(割と簡単に)作れる」というところ。しかもiOSとAndroidとWeb、それぞれを意識せずにハイブリッドアプリが作れる。
また、cordovaやAngular2をバラで使うといろいろめんどくさいけど、Ionic2を使って書くとデザインや細かい処理をぜ~んぶ内部で上手いことやってくれる。なので気に入らない部分だけ修正したりするだけでOK。
TypeScriptとかやってなかったら最初は覚えることも多いけど、これでアプリ作れるなら安いものってくらいには簡単に作れます。

続きを読む

カテゴリー

人気の記事