LoginSignup
34

More than 5 years have passed since last update.

TypeScriptでモバイルアプリケーションを作ってみる: Ionic準備

Last updated at Posted at 2016-08-17

次回:

アプリケーションを作るには?

JavaやSwift, Objective-Cを使ってモバイルアプリ開発をされている方もいらっしゃるかと思いますが、実はJavaScriptでも開発が可能です。
Ionic(github) なるフレームワークがあります。これを利用すればHTML+JavaScriptで簡単にマルチプラットフォームモバイルアプリケーションを開発することが可能です。

JavaScriptでモバイルアプリを開発できるフレームワーク自体はIonicだけではなく他にも複数あり、類似のフレームワークに

など様々です。

こういったたぐいのフレームワークをざっくり説明すると、各iOS/Androidデバイスに入っているwebviewを利用してネイティブアプリのように動作するwebアプリをJavaScript+HTMLで作るものです。

今回取り上げる Ionic を分解してみますと、

  • AngularJS(webフレームワーク)
  • Cordova(JSでモバイルアプリ作成)
  • CSS(見た目)

と分かれていて、Ionic独自の部分はCSSと AngularJS にモバイル用として追加された
カスタムタグ(directive)程度で学習コストは高くありません。(Angularは高いですが...)

例えば独自に追加されたdirectiveを少し紹介してみると、

<ion-list>
    <ion-item>hoge</ion-item>
    <ion-item>hogehoge</ion-item>
</ion-list>

としてやると、iOSでもAndroidでもシステム標準の(ような)リスト表示をすることが可能です。システム標準に見えるCSSを当てているだけですので、CSSを少し書き換えてやれば好きな様にカスタマイズもできてしまいます。

当然HTMLだけでは実装が困難/不可能な部分、例えばデバイスのカメラ機能やプッシュ通知といった機能も
もちろん Cordova というフレームワークが担当してくれるためにJavaScriptから利用可能です。

Ionic 1 と Ionic 2

実は先ほど紹介したIonicには1と2があり、現在(2016/8/17)2がbeta中です。この2つはwebフレームワークの部分が大きく違い、AngularJS (ver.1)系列のIonic 1とAngular2 (ver.2)系列のIonic 2とにわかれています。Angularは1系列と2系列で大きく違いますので注意が必要です。

実際にやってみる

まずはインストールしておきましょう。そのためにはnpmが必要です。インストールには時間がそれなりにかかります。

$ npm install -g cordova ionic

これだけでOKです。Ionic 2を入れたいという方は、ionic@beta と置き換えてください。

次はコマンドラインからアプリを作成します。ここで設定する名前は適当で構いません。configを一行書き換える程度で名前の変更が可能なので悩まず適当にどうぞ。

$ ionic start appName tabs

tabs の部分は、sidemenu blank のいずれかで置き換えることもできます。詳細は名前のとおりなので省きますが、最初にIonicに触れてみる際には、デフォルトでそれなりに動くサンプルがついてくる tabs がおすすめです。

では早速動かしてみましょう。
そもそもモバイル端末がない?大丈夫です。IonicはHTML+JavaScriptで動いていますのでPC上のChromeだろうとSafariだろうと問題なく動きます (IEはわかりません)。

ionic start が無事成功するとappNameというディレクトリができているはずですのでそこへ移動し、ionic serve と入力してみてください。

$ cd appName
$ ionic serve

たったこれだけでサーバーを用意する必要もなく自動でブラウザが立ち上がり、ファイルを編集すれば自動でリロードされる環境が用意されます。

もし実機で確認したいのであれば、実機をUSBで接続した状態で
もちろんそのデバッグもお使いのSafariやChromeから可能です。

$ ionic run ios --device

としてやるとアプリのビルドからインストール、立ち上げまでやってくれます。

TypeScriptを使ってアプリを作る

と、ここまではIonicのお話でした。
やっとこれから本題、どうやってTypeScriptでIonicアプリを作るのか、へ話を移します。

今回は導入編ですので、TypeScriptをgulpやらwebpackやらでうまくコンパイルしたりベストプラクティスがどうたらといった話はせず、とりあえずコンパイルが通ってアプリが起動する程度まで持って行きます。

ですので基本であるtsc( npm install typescript で入るコンパイラ)
を使ってTypeScriptをJSへと変換していきます。

コンパイルを通るようにする

ともあれ、まずはTypeScript自体をインストールします。こちらもnpmでインストール可能です。

npm install -S typescript

TypeScriptのコンパイルには通常gulpやwebpackなどが使われますが、今回はシンプルな構成を目指しているので素のTypeScriptのままで行います。tsconfig.jsonというファイルをrootに作り、その中身を以下のようにしてください。

tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "outDir": "www/js"
  },
  "exclude": [
    "node_modules",
    "www",
    "platforms"
  ]
}

TypeScriptのコンパイルの際には様々なオプションが指定できますが、最低これだけあればどうにかなります。それでもこれだけの量を毎回オプションを指定するのは避けたいですので tsconfig.json を作るようにしてください。tsconfig.json という名前であればオプションを特に指定せずとも自動で読み込まれますので、

$ tsc

と、これだけでコンパイルが可能になります。

次に、 www/js 以下にある app.js controllers.js services.jssrc/ ディレクトリでも作りそちらへ移動し、拡張子を .ts へと変更してください。TypescriptはJavaScriptのsupersetですので、これだけでTypeScriptで書かれたソースコードの準備ができたと(一応)いうことができます。

rename コマンドが私の環境では標準で入っていなかったのでこの作業は手作業で行ってください。どうせ3つだけです。

ですが、残念ながらこれだけでは tsc と打ってもコンパイルエラーになります。Cannot find name 'angular' やら色々出てきてしまいます。これを解決するために以下のコマンドを入力してください。

$ npm install -g typings
$ typings init
$ typings install dt~angular dt~angular-ui-router dt~cordova dt~ionic dt~jquery dt~cordova-ionic dt~cordova-ionic/plugins/keyboard dt~cordova/plugins/statusbar --global --save

これはTypingsというツールを使って型定義ファイルを導入するためのものです。TypeScript 2.0からはnpmでできるようになるようですが、現在(2016/8/16)ではbetaです。

少しソースコードを見てみればすぐわかるのですが、 Cannot find name 'angular' やらが出るのも当然のことです。var で宣言されたわけでもないAngularが突然出てきたりしています。そういったものを解決するために、Typingsの型定義ファイルが必要となります。AngularJSやIonicといった有名ドコロのものはOSSとして型定義ファイルが用意されているのでそれを利用することができます。

最後に

Typingsで型定義ファイルを入れ終わったら、お疲れ様でした!

$ tsc

今回はJavaScriptのファイルの拡張子を変えただけの適当なTypeScriptを扱いましたが、次回はちゃんとTypeScriptらしいものを、webpackでコンパイルしたものをご紹介する予定です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
34