母が絵本作家の勉強をしていて、グループ展をやるというので、自分の勉強も兼ねてスマホサイトを作ってみました！
絵本の中ではページごとにフリックのスライドをしてみたかったので、
jQueryのライブラリをいろいろ調べたのですが、次の理由でPhotoSwipeを使いました。
Photoswipeを使った理由
- あらかじめついているヘッダー（キャプション部分）や、フッター（閉じる／前へ／次へ）がクール。
- 各デバイスに応じて、画面の最大の大きさにフィットしてくれる。 iPadでもフリックして見れたらいいなと思っていたので、画面の最大の大きさにフィットしてくれるのはとてもうれしい。
スマホサイトはさくっとできてしまった。 じゃあせっかくなのでこれをPhoneGapを使ってそのままパッケージングしてみたらどうなる？ということでやってみました。
Dreamweaver CS5.5でPhoneGapを使うとなると、どうしてもjQuery Mobileとセットになっていることが多いのですが、別にjQuery Mobileを使う必要はないです。 もちろんjQuery Mobileだとスマホでやりやすいことは簡単に導入できるので便利だと思いますが、スマホできれいに見られるサイトが構築されていれば、十分です。
PhoneGapでパッケージングするにあたって参考にさせてもらったサイトはあるのですが、詳細に書いてあるところが意外と見つからなかったので、細かく書いていきたいと思います。
参考URL
上記サイトも参照してくださいね。
＃今回は、確認の簡単なAndroidアプリだけアプリ化してみた。
1.準備
Android SDKが入っていれば早いですが、手順の途中で簡易インストールすることもできるようです。
2.サイトの準備
スマホで見られるサイト（HTML／CSS／JavaScriptなど）のフォルダを準備します。
サイトの管理で追加しておきます。
3.Dreamweaverでの設定
3-1.フレームワークの設定
【サイト】→【モバイルアプリケーション】→【アプリケーションフレームワークの設定】
「フレームワーク」とか「パス」とかわからない言葉だらけですが、「SDKがある場所を設定しましょう」ということです。
わたしは、以前の記事「デザイナーでもできる、MacでAndroid Screen Monitorを使う方法 | Tips | ナナホシブログ」でアプリケーションフォルダ内にAndroid SDKフォルダ（android-sdk-mac_x86）を作っていたので、そこを設定します。
ここで、Android SDKをインストールしていない人は、横の「簡易インストール」からインストールできるようです。
3-2.アプリケーション設定
アプリ自体の名前やクレジットなどの設定になります。
ここで、何を入れていけばいいのかわからなかったので、それぞれをメモ。
バンドルID
説明が書いてあります。
バンドルIDは"com.company.appname"の形式で、半角英数字および特殊文字".-_"のみ含めることができます。"company"部分には開発者の会社名が入り、"appname"部分にはアプリケーションの一意な名前または識別子が入ります。バンドルIDはアプリケーションストア内部でアプリケーションを識別するために仕様され、ユーザーに対しては表示されません。
なるほど。 一般的にAndroidアプリは、このバンドルIDを「.」を2回使って区切らないといけないという決まりがあるようです。
アプリケーション名
これは、アプリ名です。端末にインストールしたときにアイコンの下に出るものなので、あまり長くない方（全角10文字以内ぐらい）がいいでしょう。
作成者
クレジットになります。アンドロイドマーケットでタイトルの下に出るものになります。
アプリケーションのアイコンPNG
端末にインストールしたときのアイコンです。 ネイティブアプリの場合はhdpi、mdpi、ldpi用にそれぞれ違ったサイズのアイコンが必要とありますが、ここでは1種類のみのようです。 最大の72pxで作っておけば問題ないでしょう。
アイコンについてはこちらを参考に→「AndroidにおけるLauncherアイコン、背景画像の作り方 : アシアルブログ」
この画像は、サイト内で管理されたフォルダ（common/img内）に入れました。
スタートアップスクリーンPNG
アプリが立ち上がってindex.htmlが表示される前に、1〜2秒間現れるスタートアップ画面の画像です。画像が1枚設定できるようです。 画像サイズ的には、画面自体の大きさ（480×800pxぐらい）が必要になるのですが、これだとまだ荒いので、1.5〜2倍程度の大きさにしたほうがよさそうです。 ただ、そうするとかなり大きなサイズの画像になってしまうので…考えどころです。 また、小さいサイズの画像を指定してしまうと、画面いっぱいに（縦横比関係なく）拡大されてしまうので、ここの細かい設定はDreamwaverからだと難しいようです。
試しにアイコン用のpng画像をスタートアップ用に設定してみると、見事に拡大されてしまった。
この画像も、サイト内で管理されたフォルダ（common/img内）に入れました。
ターゲットのパス
これは、「このアプリをパッケージ化したフォルダをどこに保存する？」という意味です。 ひとつ、PhoneGapで書き出したものをアーカイブしておくフォルダを作っておくといいでしょう。
ターゲットOSバージョンの選択
設定されていない場合は、横の「AVDの管理」をクリックして作成してください。 「AVD」とは、Android Virtual Deviceの略で、「エミュレータの設定」という意味です。 いつも使うものを登録しておきましょう。 2011年11月現在では、ターゲットは「2.1以上」がいいそうです。
ここまででやっと設定が終わりです！
4.エミュレータで見てみる
【サイト】→【モバイルアプリケーション】→【ビルドおよびエミュレート】
ビルドが開始します。
エミュレーターが起動します。
ここでエミュレーターを見ると、アプリが立ち上がっています。
エミュレーターではヘッダのグラデーション（CSSで記述している）が適応されていませんでした。（実際には大丈夫でしたが、Android2.1だとCSS3グラデーションが効かないのかもしれません）
5.実機に入れてみる
Eclipseからだと、作ったアプリをUSB経由で実機で確認できるのですが、DreamweaverからPhoneGapを使ってパッケージしたものだと、USB経由では実機で見られないようです。 やっている中で一度だけ、いつの間にかUSBでつないでいた実機にインストールされていたのですが、その後はまったくされず…（わかる方いたらおしえてくださいm(_ _)m）
実機で見るためには、
5-1.ビルドする
今度は「ビルド」のほうにします。
先ほどと同じようにビルドが進行し、次のメッセージが出たらOKです。
アプリケーションのバイナリは あんとみの絵本 にあります。
これでは意味がわかりません。。翻訳すると、 「設定のときに『ターゲットパス』を設定した中に、できていますよー」ということです。
このように、設定したターゲットパスのフォルダの中に、「バンドルID_Android」というフォルダができています。
この中の、【bin】フォルダ内に「アプリ名_debug.akp」というのがあります。
このAPKファイルが、アンドロイドマーケットにアップするときや、実機で見るために必要となる、アプリケーションフォルダだそうです。
この「アプリ名_debug.akp」をサーバーにアップして、Android端末のブラウザからダウンロード。
実行すると、インストールできます。
ダウンロードしたものをタップすると…
仮でインストールできます。
わかったことや感じたこと、注意点など
やってみた上でわかったことや感じたこと、気をつけることなどがあったので共有します。
わかったこと
- スタートアップ後は、直下のindex.htmlが表示される。
- 本当にHTMLのそのままでアプリにパッケージングされる。
- 本当にそのままなので、デバイスボタンの「メニュー」を使いたいときはどうしたらいいのかわからない。
ビミョーだったこと、DWでは限界？なこと
スタートアップスクリーンが画像1枚なこと
上にも書いたけど、スタートアップスクリーンの画像がもう少し柔軟に対応できるようにしてほしい。
せめて、小さな画像を設定しておいて、それを中央真ん中に寄せて、背景色（または画像）はコレ、というふうに。
CS5.5でパッケージングしたプロジェクトをEclipseで認識してくれない
設定したターゲットパスのフォルダの中に、「バンドルID_Android」というフォルダができるのですが、それをEclipseで開いても、プロジェクトとして認識されないようです。フォルダ構成とかが違うのかな？
認識さえしてくれたら、スタートアップスクリーンやメニュー表示など、ちょこちょこっと追加できるんじゃないか？
→どなたかおわかりの方おしえてください！！
気をつけること
リンクは「index.html」を省略しない
HTMLファイル上でリンクを作成するとき、Web上だと <a href="xxxxx/index.html">というのは<a href="xxxxx/">というように、「index.html」を省略できますよね。 でも、PhoneGapでパッケージングするときは、きちんと「index.html」まで書いてください。でないとアプリケーションエラーで落ちてしまいます。
あとは、特に問題なくできたように思います。 Androidではやっぱり「メニュー」ボタンを使って画面遷移などもできるので、次はそれを検証してみたいです。
今回は関係ないけど、Webサイトとアプリの違いについて
先日のCSS Nite in OSAKA, Vol.27でのワークショップで感じたのですが、スマートフォンとひとことで言っても、「Webサイト」と「アプリ」は違うんですよね。
- Webサイトは、不特定多数の人を対象に、はじめての人でもわかりやすいような情報を発信する必要がある。（新規顧客獲得も含めて）
- アプリはそれを手っ取り早く見たい人が入れておく。さっと新しい情報にアクセスしたい人がアプリをインストールすることが多い。（早く言えばファンの人とか）
今回は、PhoneGapを試してみたかったのでこのサンプルにしましたが、本当はアプリにするならもっとUIを練って素敵なアプリにしなきゃ！★
