私は仕事で日常的に開発しているわけではありませんので、その程度の情報としてお読みください。
今年の夏休みはハイブリッドモバイルアプリ開発の勉強に時間を使いました。。。後悔はありませんが効率的ではなかったように思います。
そこでもし同じような状況の方がいれば参考になるかと思い、あまりカッコのいい話ではありませんが記しておきたいと思います。
まずいつもように背景を書きます。タイトルの情報を知りたい方は以下の本題へ進んでください。
■背景
作りたいあるアプリがあり、ターゲットはiOSと決まっていたのですが、開発環境は決めていませんでした。
当初はSwiftでiOSアプリ開発とも思いましたが、研究でAndroidをターゲットとすることもあり、どうせ勉強するならハードウェアに依存しない開発方法がいいな。。。と思いました。
そこで目をつけたのがハイブリッド開発です。HTMLとJavascriptが書ければネイティブアプリが作れる、という非常にありがたい開発環境です。
ちょっとチートちっくな感じはしますが、研究などで利用するプロトタイプ開発にはもってこいですし、授業や演習という非常に限られた時間である程度のレベルまで到達するためには有効と思います。
ハイブリッド開発環境には複数の選択肢があります。「ハイブリッドモバイルアプリ」でぐぐるとたくさーんでてきます。英語ですが、例えば、以下のような感じです。
この中で昨年の卒研生が使っていたので触ったことがあるのがMonacaでした。加速度センサーの値を取り出してごにょごにょするアプリを作りました。JavaScriptで作った時刻表データスクレイピングアプリを研究室サーバーで運用していたのですが、そのコードをそのままMonacaにいれてiPhoneアプリとして動かせたときは便利だな。。。と思いました。
選択の条件としては、月額いくらという有償サービスは大学では使いにくいですので避けたい。一応、ネイティブアプリとして使ってもらうことを考えると、いくらプロトタイプとはいえUIの応答性はある程度は確保したい。適当な作りでもそれなりに動いて欲しいというのもあります。あとドキュメントの豊富さとも大事です。
とりあえず、最初に試したのが経験のあるMonacaでした。
アプリ３個までは無料で利用することができます。公式の教科書をいつも利用している博多駅の丸善で買って勉強を始めました。
クラウドでできるHTML5ハイブリッドアプリ開発 Cordova/Onsen UIで作るiOS/Android両対応アプリ (Monaca公式ガイドブック)
- 作者: 永井勝則,アシアル株式会社
- 出版社/メーカー: 翔泳社
- 発売日: 2015/02/18
- メディア: 大型本
- この商品を含むブログ (4件) を見る
写経しながら進めていったのですが、残念ながら本当に簡単なアプリが主で、僕がイメージしていた素朴でもとりあえずアプリ単体で完結して動作するCRUDアプリの作り方がわかりませんでした。。。フロント開発の知識が圧倒的に足りていなかったのでしょうね。
公式ホームページのサンプルを探して動かしたり、あちこちを探してみましたが、次に何を勉強すればいいのかわかりませんでした。
それでも、何とかlocalStorageやWebSQLのアプリをMonacaで作ったのですが、Onsen UIとの組み合わせ方がまたよくわからない（※今ならわかるかもしれません）。さらにMonacaの無償プランではWebベースでの開発なのでデバッグが大変でした。
これだけやっていたわけではありませんが、調査や試行錯誤で夏休みの２週間くらいを使ってしまいました。時間をかけた割に得るものがない。。。敗北感たっぷりでした。
お盆休みで少しリフレッシュできたので気を取り直して。
■本題
次に試したのはIonic Frameworkでした。こちらはオープンソースかつ無償です。
公式ドキュメントは（英語ですが）丁寧に書かれているので勉強をスムーズに進めることができました。
まずチュートリアルであるThe Iconic Bookを写経しました。
なんとなく開発の流れがつかめました。
次に、以下の本が安かったのでKindleに入れて読みながら勉強しました。
Full Stack Mobile App with Ionic Framework (English Edition)
- 作者: Hoc Phan
- 出版社/メーカー: Hoc Phan
- 発売日: 2014/11/30
- メディア: Kindle版
- この商品を含むブログを見る
本はわかりやすかったのですが、半分くらいやったところで「この本ではFirebaseというBaaSを利用していて僕がやりたいローカルデータベース（sqlite等）の利用方法は書かれていない」ことに気付きました。あれこれ同時並行的にやっていたので、自分が何をしているのか忘れてしまい。
それから別の本を探したりブログを探したりCodeacademyのAngularJSの講義を受講したりもしました。MonacaもそうらしいですがIonic FrameworkもAngularJSを利用しているため、急がば回れでまず基礎は勉強しようと考えた次第です。これはやってよかったと思います。
ちなみにAngularJSの日本語のチュートリアルには、有名なドットインストールがあります。基礎ですが知っておいて損はないと思います。
ここまでやっても、まだIonic FrameworkでUIも含めてCRUDアプリを作れる感じは全然していません。残念ですが。。。
経緯は忘れましたが、何かのきっかけでしったのがYouTubeのチュートリアル動画でした。これは非常に良かったと思います。
YouTubeの検索結果にはたくさん動画があるように見えますが、LTで簡単に全体を紹介したようなものが多く、これを何本見ても役に立ちません。
とりあえず見て良かったのはまず公式動画。
内容は公式ホームページに書かれていることなんですが、動画で見ると全体感がよくわかります。英語ですが。。。
続いて、良かったのがMirko Nasatoさんによる、なんと全３７回のIonic Frameworkの動画です。
１つ１つが丁寧に作りこまれています。説明は簡潔ですし流れも自然です。プロなのかなあ？これも英語ですがわかりやすい。飽きない。第１回が以下です。恐らく、これだけで５、６千円くらいの分厚いプログラミング本の価値はあると思います。
そして極め付け。Nic Raboyさんのブログです。
この方を知ることができたことでCRUDアプリの作り方がよくわかりました。
わかってしまえば何てことはないし公式ホームページのCSSやJavascriptというページの利用の仕方もよくわかりました。ブログでは様々なCordova Pluginの活用方法など実践的なことも紹介されています。
以下が彼のブログ。
そして、CRUDアプリの作り方がわかった動画が以下。
この動画、ちょっと長いんですね。。。Mirko Nasatoさんみたいに、区切って実行して。。。という感じではないので、ぜーんぶ作ってから動かすという説明です。
案の定、最後には動きませんでした。
デバッグの仕方がよくわからずあれこれもがいて何とか動かすことができました。残念ながらNic Raboyさんのエントリーにはソースの紹介はなかったので、とりあえず僕が写経して作ったアプリを以下に挙げています。もし勉強する方で動かないよ、という人がいれば利用してください。
あと、Saimonさんの動画も勉強になります。
ちょっと長くなったのでそろそろ終わりたいのですが。。。
最後にIonic Frameworkの公式ブログは要チェックです。
ブログですから、お知らせ的な情報が掲載されていると思ったのですが、実際に読んでみると、公式ホームページ内では全く紹介されていない様々な支援ツールの紹介がブログに書かれていました。
これを見ないと知りようがない情報です。
とりあえず知ったことを以下にメモしておきますが、今後の新しい情報を得るためにもチェックしておいた方が良いと思います。
■ 基本コマンド
ionic start todo blank
ionic platform add ios
ionic build ios
ionic emulate ios
ionic serve
cordova prepare ios
ionic upload ※ionic viewというスマホアプリをダウンロードするとケーブルつないで実機転送しなくてもスマホ上で実行できる
■Cordovaプラグイン
cordova plugin add ...
cordova plugin list
cordova plugin remove ...
■リファレンス
CSS
アイコン
HTML5入力部品
サンプル集
Ionic Frameworkで作られたアプリ一覧
■開発支援ツール
Ionic Lab
Ionic Creator
Ionic Play Ground
Plnkr
■公式ブログで気になったもの
Ionicでツイッター作った
Herokuとくみあわせた
listのitemが100を超えるようなときに
Issueの投稿方法
AngularJSのコンソールデバッグ
ngCordova
300msディレイ
以上な感じが夏休みの１ヶ月くらいで得た情報です。
肝心のアプリはまだ完成していません。。。デバッグも経験が必要のように思います。まだまだ勉強が必要ですが、とりあえず材料が揃ったのであとはやるだけというところですね。
