Dashcodeを使って、さくっとWebアプリを作る
Dashcodeとは
Dashcodeとは、アップルが開発している、Dashboard用ウィジェットおよびiPhone/iPod Touch用のウェブアプリケーションを開発するためのソフトウェアである。
だそうです。思ったより古くからあったツールでした。
昨年末、Dashcodeを使って業務アプリを開発しましたところ、iPhone用Webアプリケーションを作るのには良かったのでご紹介します。
Dashcodeの起動
/Developer/Application/Dashcode.app を起動します。面倒なのでDocに入れておきましょう。
起動すると、テンプレート選択画面が表示されます。
UIの部品ライブラリ
ひと通り揃っています。この部品をドラッグ＆ドロップで、Webページにぺたぺた貼ります。
チェックボックスだけは、iPhone標準の外観とは異なります。しかし、jQTouchを使うことで、iPhone標準の外観のものを利用できるようになります。これはいつかまた後日。
Dashcodeがバージョンアップで対応してくれれば、jQTouchを使わなくても済むのですが。期待してお待ちしてます、Apple。
アプリケーションの属性
ページタイトル
titileタグのことです。全角６文字以内をオススメします。それ以上だと、Webクリップとしてホーム画面に追加した場合に、...で省略されちゃいます。
ビューポート：
拡大／縮小させなくても最適に見られる方が、ユーザーにとっては幸せです。「ページの幅に合わせる」にチェックを付けます。
ページの幅に合わせる
ページを拡大／縮小して合わせる。
ピンチイン／ピンチアウトをしたい気持ちは分かりますが、しなくて済むに越した事はありません。
Webクリップ
フルスクリーンアプリケーションとして表示させると、Safariの、画面上にあるURLツールバーや、画面下にあるブックマークなどのナビゲーションバーを非表示にすることができます。
ただし、Webクリップ（Safariからホーム画面に追加する）の場合のみに有効になります。これ注意。
定規で計ってもらえばすぐに分かりますが、
ツールバーの高さ ＋ ナビゲーションバーの高さ
で、画面の約２５％を占有されていることになります。このエリアがなくなると非常に広く感じます。
ただし、ナビゲーションバーが表示されませんので、ページの戻る機能や、AirPrintを使えないなどの副作用はありますが、必須の要件でなければ無視しましょう。
PhoneGapは、AirPrintを呼び出すようなAPIなんかは用意されているのかな。
***ステータスバー
何色でもどうぞ。お好みで。
***アイコン
カスタムアイコンを使用にチェックを入れると、設定したWebクリップが採用されます。
Safariが生成したアイコンを使用にチェックを入れると、画面イメージからWebクリップを自動作成してくれます。（あんまりカッコ良くないです）
Webクリップアイコン
・57×57px（Ratinaディスプレイ対応なら、114px × 114px）
・ファイル形式はPNG
・apple-touch-icon.png
・角丸や反射の加工は不要です。iPhoneが自動でやってくれます。
ちゃちゃっと作れる人は作ってしまってください。
私は外注しています。5000〜10,000円ぐらいあればRatinaディスプレイ対応のアイコンを作ってくれます。
アイコンとアプリ名は大事ですよー。
共有
パスに、Webサーバーにアップするサイトフォルダ名を指定してください。
ディスクに保存ボタンを押すと、必要なHTMLやCSS、Javascriptが生成されます。
普通のWebサイトであれば、作成されたファイル一式をWebサーバーにアップすれば見ることができます。
