HTML・JavaScriptでiPhone/Androidネイティブアプリが開発できる!に行ってきました。

イベント

phonegap_hikalab

1月24日に行われた【 ヒカ☆ラボ 】HTML・JavaScriptでiPhone/Androidネイティブアプリが開発できる!
“PhoneGap”で学ぶクロスプラットフォーム対応ハイブリッドアプリ概論
アシアルの代表取締役 田中正裕氏が登壇!!

にて、PhoneGapやMonacaなどについて学んできました。

「PhoneGapって、html・css・JavaScriptで書いたものをパッケージングして、一つのものからiPhoneアプリとAndroidアプリの両方を作れる」という認識でした。

実際のところ間違ってはいませんでしたが、想像より良かったです。

なぜ想像より良かったのかと言うと、
まず、私はPhoneGapに対して抵抗がありました。

と言うのも、以前ブログでも書きましたが、iPhoneアプリ道場にてX-codeやObjective-Cについて学んだ経験があります。

とても楽しく今後も勉強を続けたいと思っているのですが、ここでPhoneGapを勉強し出したら、
「せっかくObjective-Cとか勉強したのにそっちを選ぶの?」という自分に対する突っ込みがあったからです。

でもこの言葉を聞いてはっとしました。

どれを選べば一つのことが出来るというわけで無くそれぞれの特化がある。

なるほど〜!そして、もう一つ。

PhoneGapで作ったアプリでも自分の求めることによってはネイティブ側を修正することも出来る。

ただ、「基本はHTML/CSS/JavaScriptで作れる」ことを強調されていました。

さて、今日の本題PhoneGapについて、勉強会で学んだことや自分で調べてみたことをまとめてみました。

◇PhoneGapって何?◇

簡単に説明

アプリは以下の3つに分けることが出来ます。

1.Webアプリ(HTML5/CSS3/Javascript)
2.ネイティブアプリ(Objective-C/Java/C++など)
3.ハイブリッドアプリ(上2つ、HTML+ネイティブのいいとこどり)

1のWebアプリはさらっと説明しますと、
・専用マーケットからインストールする必要がなく、ブラウザ上で動く
・HTML5のアプリケーションが作れる。
・遅い
・端末側の機能(プッシュ通知/カメラ等)が使えなく、簡単なものしか作れない。

ネイティブアプリは、後ろの方で説明をしています。
先に読みたい方はこちら

PhoneGapは3つ目のハイブリッドアプリを作るツールに分類されます。
HTMLやJavaScriptをカタカタして作ってPhoneGapでパッケージングすると、ネイティブアプリとなり裏側でネイティブが動きます。
基本はHTMLを修正したりするけれども、必要とあればネイティブ側も手を入れることが可能。(仕組みをいじる時など)
他のハイブリッドアプリとしては、JavaScriotをメインにいじるTitaniumや3Dアプリに強いUnityなどがあります。

メリット

一つ作れば、iPhone用とAndroid用の両方を作成することが出来ます。
オフラインでも問題無く動きます。
ウェブアプリでは出来ない、スマフォ側の機能を使うプッシュ通知などもやろうと思えば出来ます。
専用のマーケット(App Store/Android Marketなど)からインストールして使うネイティブアプリと、
ブラウザから直接使うWebアプリの両方とも、作成が出来ます。
(こんなイメージ:Webアプリ→(コンパイル/パッケージ化)→ネイティブアプリ)
ヘッダーはネイティブで中身はHTMLなんていう合わせ技も可能!!
凄いですね〜♪
なんだか出来ることが増えるだけで夢やときめきが広がります。

デメリット

フレームワークによる制約がある。

環境とか

X-codeやDreamweaver、Monacaプラットフォームなど

では、ネイティブアプリって何でしょう。

◇ネイティブアプリとは◇

AndroidだとJavaなど、iOSだとObjective-Cなどの言語で作成します。
作成する際に色々インストールしたり設定する必要があります。
公開に関しても、ウェブアプリと違って専用のマーケット(App Store/Android Marketなど)からインストールする必要があります。

メリット

デバイスの機能を真髄まで使えます。(プッシュ通知など)
汎用性は高い。
動作が速い。

デメリット

アプリが分かれる上に、開発もしづらい。
公開は、審査があったりなどで時間がかかる場合も。
JavaとかObjective-Cとかを覚える必要があります。
(ノンプログラマーから見たら取っ付きづらいですよね。)

開発環境など

X-codeやObjective-C、Javaなど

◇PhoneGapの裏話(背景)◇

PhoneGapは、元々はオープンソースとしてCORDOVAという名前で提供されていました。(今も)
Adobeに買収されAdobeが提供する際にはPhoneGapと言います。

・CORDOVA(CORDOVA)
オープンソース(無料)
リンクはこちらhttp://cordova.apache.org/

・PHONEGAP(Adobe)
Dreamweaverにも機能として入っています。

今の時点は同じだけど後々はCORDOVAとは違う機能を搭載する予定だそうです。

ネックとしては、PhoneGapの開発環境はSDK入れたりと色々インストールする必要があります。
ちょっと、、、いや、かなり時間を持っていかれるところではないでしょうか。PCの貴重な容量も食うし。

そこで、楽になるプラットフォームをご紹介頂きました。

◇おすすめプラットフォーム(無料)◇

Monaca(モナカ)

リンクはこちらhttp://monaca.mobi/?lang=ja

※私事ですが、Moconaではありませんのでご注意下さい。

ブラウザだけで開発が終わります。
ローカルにインストールしなきゃいけなかったDreamweaverやX-codeなどを入れなくてすみます。
え、かなり手軽にアプリ作りに触れることが出来るじゃないですか!!
いつか勉強会でやってみt・・・(ry

ただ、ブラウザ上で作成は出来てもやはり動作確認に実機は必要です。
チェック用に安いAndroidタブレット・・・欲しいなー。

注意することとしては、モナカプラットフォームはIEでは動きません。
ですのでChromeとかで開発することになります。
ブラウザ上で開発が出来るため、ウィンドウズのアプリをMacで作るなど出来ます(笑)
面白いです♪
あと、嬉しいことにモナカデバッガーがついています!
しかも、iPhone用/Android用/ウィンドウズフォン用のそれぞれ。
これは凄く便利ですね!

中の作成について

jQueryMobile・Sencha・ラチェットなどでモバイルライブラリ(中)を作ります。
例えば、jQueryMobileで作ってPhoneGapでネイティブアプリ化。もちろんプラットフォームはMonacaで。
とすると、設定などの手間が随分減りそうですね。

ラチェットについてはこれから知名度が上がりそうなものだそうです。
jQueryMobileはDWに便利機能がついているので気軽に試せていいですよね。
Senchaは葉っぱのマークが印象的です〜。

他には、
アシアルさんが作ったハイブリッドアプリの話を聞いたり、
実際に起動されたり、
Monacaでどう作成するか少しだけ見せて頂いたり。

<作成アプリ>
・auヘッドライン 名刺管理Eight
・テレ朝動画アプリ
・シューズファインダー

◇当日のスライド◇

◇最後に◇

PhoneGapの良さやMonacaの良さについて教えて貰いましたが、
大切なことは、
・自分が何を作りたいのか。
・その作りたいものにはどんな機能が必要か。
を作り始める前に考えてそれをふまえた上でどのアプリ(web/ネイティブ/ハイブリッド)を作るか選択することがあってこそのツールなんですよね。
そして、ネイティブアプリとハイブリッドアプリに興味があるのですが、どちらにしてもネイティブ側をいじる必要や可能性があるので、Objective-Cの勉強を頑張ろうと思いました!

☆☆★☆余談★☆★☆
当日、ものすごい空腹に見回れ思考が頻繁に停止していました・・・
貴重なお話なのに悔しい限りです・・・
ですので、勉強会に参加する前はどんな手を使ってでもお腹を満たしておこうと心に誓いました。
早食い頑張りますー

あとっ
ハイブリッドアプリは更新の度にユーザーがアップデートをする必要がないです。
サーバー内のデータを更新するだけで反映されます。
私は婚活中ではありませんが、以前「みんなの婚活」というアプリをインストールしました。
こういったイベント事のアプリは、どのくらいのペースで更新されているのかやイベント自体もどれくらいの頻度で行い、人をどんな感じに集めているのかなどデザインも含めて色んなところが気になってインストールしてみました。
一度も更新した覚えが無いのですが見る度(数週間に1回)に情報が更新されています。
とっても不思議だったのですが・・・ハイブリッドアプリなのでしょうね。
ちょとだけすっきりしました。