Web制作者が知っておいた方が良いと思う、HTML5ハイブリッドアプリのフレームワークについて

May 31, 2016 アプリ

ここのところ、バンクーバーにある専門学校の方とお話することが多いのですが、WEBデザイナーの専門学校なんかの授業でもハイブリッドアプリの科目が取り扱われているみたいですね。最近はWEBデザイナーに必要なスキルの一つとしても、HTML5のハイブリッドアプリ開発は大事になってきてるんじゃないかなと思ったので、これから色々勉強してみようと思っている方向けに最初のとっかかり記事を情報共有として記事を書かせて頂ければと思います。

僕自身もアプリ制作専門で活動したことは無いのですが、最近は「WEBサイト作りましょう」で、モバイルの話が上がる事はほぼ絶対になってきていますよね。で、WEBという媒体を使って何かを提案する姿がWEBデザイナーである以上、そうやってフィールドがモバイルにも派生しているのであればアプリ面の知識も「全く知りませんでした」は正直避けたい所になっていくのではと思っています。

というわけで、今日はそんな非アプリ開発者であってもとりあえずWEBベースのスキルで色々な事が出来るようになってるんだよという、テンション上がりそうな所だけ紹介しようかなってノリで、HTML5のハイブリッドアプリフレームワークを幾つかご紹介出来ればと思います！

Cordova（PhoneGap）について

名前は聞いたことがあるという人も多いかと思いますが、恐らくHTML5のハイブリッドアプリとしては最も有名なフレームワークです。ちなみにCordovaってバンクーバーにあるストリート名の一つで、そのストリートにあった会社がPhoneGapという名前のプロダクトを作っており、PhoneGapがAdobe社に買収された後にApacheに寄贈され、自分たちの会社にゆかりのあるCordovaという名前になりました。バンクーバー市内では実は有名な話だったので、僕は順序的には逆でCordovaの方を先に知り、PhoneGapの方を後に知ったのですが、この２つの違いについては下記の記事が日本語で非常に参考になったので、少し前の記事ですがご紹介させて頂ければと思います（僕は下記の記事を見るまで２つとも一緒だろって思ってた…）。

HTML5ハイブリッドアプリ開発を支えるOSS「Cordova」はなぜアツいのか？PhoneGapとの違いは何か？

今日はこのCordovaをベースにしたフレームワークを幾つか紹介したいと思うんですが、その前に、これまでWEB制作者（要するに僕）の目線から見たアプリ開発の経緯を、簡単にですがまとめておこうと思います。皆さんがどう思って見ていたのかは分かりませんが、僕の目にはこんな感じに映っててた的な。

とりあえずイメージだけ沸くようにしときたいある程度の流れ的な

ここからは、僕自身もHTML5ハイブリッドアプリのフレームワークを知ってほしい時に毎回言う事になりますが、これまでもアプリ開発にはネイティブかWEBかと沢山論争されてきました。ネイティブはiPhoneやAndroid毎に専用のアプリケーションを開発するという事になり、動作も早く、データの持ち方もシンプルで良いのですが、iPhoneならSwiftやObjective-C、AndroidならJavaベースと、開発に対するコストが非常に大きく、要するに大変。

じゃぁWEBでいいじゃんってなるんですが、やはり性能差という点ではネイティブに軍配が上がってきました。カメラや通知機能など、WEBだとモバイルデバイスならではの機能が使えない点も大きく、モバイルデバイスからのアクセスステップもネイティブ程確立していないなど、色々議題に上がる部分が大きかったんですね。

その後、４年前の時点ではFacebookがHTML5ハイブリッドでアプリを公開し、HTML5に注力しすぎた的なことを伝えた上でネイティブに移行したことにより、尚更「やっぱネイティブじゃん」な印象が強まってしまった時期もありましたが、当時もザッカーバーグは別にHTML5に未来が無いという話をしているわけでは無く、自身もHTML5の動きには長期的に楽しみであり、HTML5の重要性についてTechCrunchの動画を見てもきっちり言及しています。この時点ではネイティブの方が良いやんという話になる人が多かったようにも思うんですが、得意不得意があったというだけで、例えばFacebookのタイムラインに見られる無限スクロールなんかはその典型だったという事だと思うんですね。

ただ、僕らのようなWEB畑の人間から見ると（…って一括りに言って良いのかわからないんですが）、「やはり今からJavaやSwiftを１から勉強してネイティブアプリの開発に着手するには時間が掛かり過ぎる、単純にだるい。世の中はネイティブだって言うし、もういいや。」こんな経緯があってアプリ開発って面白そうだけど、面倒だなーって人って多かったと思うんですね。実際僕も数年前までは言い訳を自分で頑張って探して作っていたような、そんな感じの体たらくっぷりでした。

特徴さえ知っておけばあらゆる可能性を広げるHTML5ハイブリッドアプリ

最近ってわけでもないんですが、多分ここまで説明したような流れでWEBとネイティブの論争があった中で、ますます注目を集めて来たHTML5ハイブリッドアプリ、WEBからの利用が困難だったカメラや通知機能を利用出来るだけでなく、WEB制作のスキルと知識でほぼ開発出来てしまうという良いとこ取りなポジションですが、それぞれに特徴があり、どれを採用するかはプロジェクトによって考えるべきです。ですが、僕らのようなWEB屋畑な人間からすれば最初の取っ掛かりとして単純に楽しいと思うので、今日はこの部分に注目して最初の触りの部分だけ共有させて頂ければなと思います！

またネイティブと違い個人レベルからの開発も可能である事や、利用するフレームワークによっては丁度良い具合にAngularJSを使ったフレームワークの勉強としても良い題材となると思いますし、Ionicがドーンと登場した辺りからはプロトタイプをハイブリッドで作るという流れもまた一般化しだしているのではと思うので、知っておいて損する事は無いかと思います。

というわけで、突然ですが早速PhoneGapをベースに使い方を見てみましょう。

１．PhoneGapのインストール

PhoneGapはデスクトップアプリとCLIの両方があるので、インストールは楽に出来ます。

PhoneGapの公式サイトからいづれかの方法でインストールしましょう。ちなみにCLIからインストールする場合にはnode.jsとgitのインストールが別途必要です。

英語で良くわからんという方は、こちらでCLIのインストール方法が簡単にまとめられているので参考までにどうぞ。公式サイトからはその後のインストール方法がまとまっているので、簡単に見ておくと良いかもしれません。

２．PhoneGapでアプリを作成

公式サイトを元にしてもらった方が良いのですが、一応英語なので簡単にだけまとめておきます。

２−１．プロジェクトの作成

Screen Shot 2016 05 26 at 5 17 26 PM

プラスボタンから「Create new PhoneGap project」を選択し、保存場所とプロジェクト名（フォルダ名になります）を入力。

２−２．アプリの表示

問題無くアプリが起動すると、以下の画面のようにプロジェクトが追加され、画面下にあるアドレスにアクセスするとPhoneGapの画面が確認出来るようになると思います。これで準備完了です。

Screen Shot 2016 05 26 at 5 24 38 PM

２−３．モバイルデバイスからの確認

PhoneGapはスマフォアプリも配布しており、デバイス上からの確認も行えます。簡単なステップは本サイトを参照してください。

注意事項としては、モバイルアプリ上のServer Addressとデスクトップ上のPhoneGapのAddressを一致させて置くこと（上記の例なら192.168.0.19:3000）。

３．wwwフォルダ以下を編集し、表示確認

先ほどPhoneGap Appをインストールしたフォルダ内には以下のようなファイル群が作成されているはずです。この中のwwwフォルダ内を編集し、アプリ画面内の編集を行います。

Screen Shot 2016 05 26 at 6 03 45 PM

index.htmlを編集すれば当然プレビュー画面も編集されます。

Screen Shot 2016 05 26 at 6 13 02 PM

４．PhoneGap/Cordovaベースのフレームワークを使ってみる

個人的にはここからゼロベースで開発していくとテンション上がるまで相当掛かる気がしますが、最近はPhoneGapベースのUIフレームワークも非常に多く登場してきました。ここでは最近注目を集めているIonic Frameworkを使って、一気に「こんな事が出来るのか！」とテンションをあげてみましょう。

Ionicを試すために、まずはGet Startを参考にAppを作ってみましょう。

４−１．ターミナルからIonicをインストール

一応ちゃんと公式から見た方が良いと思いますが、インストールの流れとしては簡単に。

[code]$ npm install -g cordova ionic [/code]

エラーが出る場合は

[code]$ sudo npm install -g cordova ionic [/code]

４−２．任意のフォルダ上からプロジェクトの作成

[code]$ ionic start ionic-sample[/code]

“ionic-sample”の所は自分の好きなように変更。途中ionic.ioのアカウント作成をするかという質問が出てきますが、とりあえずここではnoを選択。

Screen Shot 2016 05 27 at 12 55 08 AM

するとこのようなフォルダが出来てるはず。先ほどのPhoneGapで作成したフォルダの構造と非常に良く似ていますね。

４−３．PhoneGap上からプロジェクトを追加してみる

当然、IonicもPhoneGapと同じCordovaベースで作られた物なので、先ほどのPhoneGapアプリケーション上でPhoneGapプロジェクトとして追加しても同じように動作します。

Screen Shot 2016 05 27 at 12 59 56 AM

作成したionic-sampleが表示されましたね。アイコンが表示されてないのが気持ちわるい場合は、config.xmlから修正する事も出来ます。以下の行をconfig.xmlの適切な位置に配置してあげましょう。

[html]<icon src="img/ionic.png"/>[/html]

ちなみにこのconfig.xmlはアイコン指定だけでなく、アプリのプラットフォームの設定なんかでも使う事になります。その辺は公式サイトから確認しておいても良いでしょう。

無事追加されていれば以下のようにブラウザからも確認出来るようになると思います。

Screen Shot 2016 05 27 at 1 33 44 AM

もちろん、アプリを導入していればデバイス上からも確認可能です。

５．エミュレーターで起動してみる

iPhoneやAndroidを持っていればアプリ上から確認も出来ますが、持ってない方はエミュレーターから確認する事もできます。Get Startページからも確認出来ますが、以下の順でエミュレーターを起動できます。あと、今更ですがコマンドライン／ターミナルの使い方わからんという方は別途ググッて、このあたりを参考に簡単に勉強しておきましょう！

[code]$ cd [プロジェクトフォルダ]
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios[/code]

Ionicには既にiosプラットフォームはインストールされているかと思いますが、僕の場合は以下のようなエラーが発生しました。

[code]ios-sim was not found. Please download, build and install version 3.0.0 or greater from https://github.com/phonegap/ios-sim into your path. Or ‘npm install -g ios-sim’ using node.js: http://nodejs.org Error: /Users/senna/projects/ionic-sample/platforms/ios/cordova/run: Command failed with exit code 2[/code]

言われた通りに、ios-simをインストールしたら問題無く起動しました。

Screen Shot 2016 05 27 at 3 04 56 AM

５−１．Androidエミュレーターを起動してみる

iOSはXcodeのインストールとiOSエミュレーターさえインストールされていれば問題無いのですが、問題はMac上でAndroidエミュレーターを起動する場合。

この場合はまず、Android Studioのインストールが必要ですが、JDKのインストール等で躓く人も多いと思います。こちらの記事がAndroid Studioのインストールを簡単にまとめていましたので、参考までに共有します。

[Android] Android Studio をMacにインストールする

Android Studioのインストールが完了した後に、以下のコマンドを実行してください。

[code]$ ionic platform add ios $ ionic build ios $ ionic emulate ios[/code]

エミュレーターのイメージ（AVD）が見つからない場合は、Android Studio上のAVD Managerからインストール出来るので、試してみてください。

以上が上手く行くと以下のようなAndroidエミュレーターが起動するようになります。

Screen Shot 2016 05 27 at 4 29 36 AM

これでMac上でもiOS、Androidのアプリ確認が出来るようになりましたね！

６．Ionicを色々触ってみる

Ionicには既に様々なCSSコンポーネントが用意されており、公式サイトより確認してもらうことが出来ます。

例えば以下のようなコードからアプリのヘッダーデザインは簡単に作成出来ます。

[html]<div class="bar bar-header"> <button class="button icon ion-navicon"></button> <h1 class="title">Header Buttons</h1> <button class="button">Edit</button> </div>[/html]

実際にwwwフォルダ内のindex.htmlから確認してみましょう。

Screen Shot 2016 05 27 at 4 57 03 AM

コンテンツ部分ももちろんのこと、簡単なコンポーネントの導入でそれっぽいUIを実現出来ます。

気になるコンポーネント集は公式サイトから確認してみてください！

７．チュートリアルから実際に作ってみる

ここからはどこまでやりたいかだと思いますが、実際にアプリとして動かすためにはJavaScriptを使った設計が必要になります、Ionicの場合はAngluarJSをベースにしている事もあり、どうしても簡単な動作テストのレベルでもAngularJSを多少理解する必要があると思いますが、数あるIonicチュートリアルの中で僕が一番勉強になったのはこちらのチュートリアル。