こんにちは、こんにちは、PhoneGap!!

PhoneGap を触ってみた。ので、ちょっっっっっっっっっっっっっと作業ログてきな。

簡単そうなので、英語勉強がてらドキュメントから入ってみる

ドキュメント
まずは、Overviewから。とのことで、読んでみた。

  • cordovaはマルチプラットフォームなモバイルアプリケーションを開発するオープンなフレームワーク
    • WEBテクノロジー(HTML5,CSS3,javascriptなど)を使って開発できるよ
    • CordovaはNativeとHTML5を中継するよ
  • 開発フローは2種類
    • CLIツールを使ったWebベースのフロー
      • 基本的な利用法
      • 複数のプラットフォームに簡単に対応できる
      • PhoneGapをつかうなら通常こっちのフローで開発する
    • ネイティブアプリケーションベースのフロー
      • ネイティブの拡張が行い易い
      • 複数のプラットフォーム向けに対応するのは面倒
      • ネイティブアプリのいち部分に組み込む場合などに利用
      • そもそも、Webviewの内側にHTMLを表示しているので、用意に組み込める
  • 対応プラットフォームは、Platform supportに記載あり
    • iOS/Androidはもちろん、Amazon-Fire、Windows8、FirefoxOSなどなどまぁ色々サポートしているもよう。

ちなみにCordovaさんって?

Overviewの出だしから出てきたCordva…。
Wikipediaに聞いいてみる

  • 2011/10/04 PhoneGapを開発していたNitobi社がAdobeに買収され、PhoneGapのコードがApacheに寄贈された
  • Apacheでの呼称は当初Apache Callbackだった
  • 2012/02/22と2が連続すぎる日にApache Cordvaと改名
  • Apache Cordova=PhoneGap と思って良いみたい。
    • ドキュメントも一緒

iOSではろーわーるど(?)

参照

なんとなく持っていたイメージ通りの説明だったので、実行してみる。

とりあえず、最初はiOSでやってみる。(Xcodeはインストール済の状態)

まずはcordovaのインストール。Node.jsパッケージとして提供されているので、インストール簡単!

$ sudo npm install -g cordova

次にプロジェクトを作成する。
ヘルプによると、コマンド引数はこれ→ create <PATH> [ID [NAME [CONFIG]]]

$ cordova create hello com.example.hello HelloWorld
> Creating a new cordova project with name "HelloWorld" and id "com.example.hello" at location "/Users/senta/Dev/hello"
> Downloading cordova library for www...
> Download complete

すると、↓こんな構成でプロジェクトが作成される。

hello
├── config.xml        [デプロイに必要な設定、メタデータ]
├── hooks
│   └── README.md
├── merges
├── platforms         [各プラットフォーム毎の設定、ソース、ビルド先]
├── plugins           [プラグインを格納]
└── www               [アプリのホーム画面を格納]
    ├── css
    │
    └── index.css
    ├── img
    │
    └── logo.png
    ├── index.html
    └── js
        └── index.js

iOSをターゲットとしてビルドする。

$ cd hello
$ cordova platform add ios
$ cordova build

platforms/ios/HelloWorld.xcodeprojをXcodeで開き、実行できればOk~~!!

正常に起動できれば、こうなる。

PhoneGap on iOS Simulator

うん。コマンド実行しただけだ。とりあえずできた。

Androidではろーわーるど(?)

参照

iOSと同じプロジェクトを利用するが、まずは、Android SDKのインストール…。

が、面倒臭い。とっても。

Android SDKインストールメモ

  1. JDK(今回はとりあえず最新の8)をインストール
  2. Android SDKダウンロードページから、USE AN EXISTING IDEを選択し、SDKのみをダウンロード&インストール

Android SDKのセットアップはこの辺を参考にしました。

余談めも

  • せっかくIDEA持ってるので、Eclipseのインストールはせず、SDKだけいれてお試し程度にしたかった
    • と言うか、Ecelipseはトラウマ級に大嫌い。
    • 大嫌い。
  • XcodeをApp Store経由でインストールしたためか、/Developerが存在せず、SDKの設置場所にすごく悩んだ。。
    • 悩んだ末、android-sdk-macosxは/Developer/SDKsの下にした。
    • ついでにFlex SDKも移動

PhoneGapのターゲットに追加して実行

  • Android SDKのセットアップ完了後、platform add android を実行し、Androidをターゲットに追加
    • この時、Apache antが入っていないため怒られ、brew install antで解決。
  • その後、ビルド
  • 実行はEclipseではなく、cordova CLIを利用
$ cordova platform add android
$ cordova build
$ cordova emulate android

無事実行できれば、iOSど同じ画面が表示される。

PhoneGap on AVD

できたっ!!!

が、全然ハローワールドじゃない!出力してない!けど、準備が大切と言うことで。
やっとスタートライン。。。

SHOTA

I'm WEB developer

Tokyo, Japan http://senta.me/