Dashcodeを使って、さくっとWebアプリを作る

シェアする

  • このエントリーをはてなブックマークに追加

Dashcodeとは

Dashcode – Wikipedia

Dashcodeとは、アップルが開発している、Dashboard用ウィジェットおよびiPhone/iPod Touch用のウェブアプリケーションを開発するためのソフトウェアである。

だそうです。思ったより古くからあったツールでした。

昨年末、Dashcodeを使って業務アプリを開発しましたところ、iPhone用Webアプリケーションを作るのには良かったのでご紹介します。

Dashcodeのダウンロード

iOS SDKに付属しています。iOS Dev Centerの「Xcode and iOS SDK」からDLしましょう。

Dashcodeの起動

/Developer/Application/Dashcode.app を起動します。面倒なのでDocに入れておきましょう。

起動すると、テンプレート選択画面が表示されます。

テンプレート選択

f:id:noriya_y:20110113015811p:image

ブラウザを選択しましょう。

今回はiPhone用Webアプリなので、Safariのチェックは外します。

UIの部品ライブラリ

f:id:noriya_y:20110113015812p:image

ひと通り揃っています。この部品をドラッグ&ドロップで、Webページにぺたぺた貼ります。

チェックボックスだけは、iPhone標準の外観とは異なります。しかし、jQTouchを使うことで、iPhone標準の外観のものを利用できるようになります。これはいつかまた後日。

Dashcodeがバージョンアップで対応してくれれば、jQTouchを使わなくても済むのですが。期待してお待ちしてます、Apple。

アプリケーションの属性

f:id:noriya_y:20110113015813p:image

ページタイトル

titileタグのことです。全角6文字以内をオススメします。それ以上だと、Webクリップとしてホーム画面に追加した場合に、…で省略されちゃいます。

ビューポート:

拡大/縮小させなくても最適に見られる方が、ユーザーにとっては幸せです。「ページの幅に合わせる」にチェックを付けます。

ページの幅に合わせる

f:id:noriya_y:20110113021249p:image

ページを拡大/縮小して合わせる。

f:id:noriya_y:20110113021248p:image

ピンチイン/ピンチアウトをしたい気持ちは分かりますが、しなくて済むに越した事はありません。

Webクリップ

フルスクリーンアプリケーションとして表示させると、Safariの、画面上にあるURLツールバーや、画面下にあるブックマークなどのナビゲーションバーを非表示にすることができます。

ただし、Webクリップ(Safariからホーム画面に追加する)の場合のみに有効になります。これ注意。

定規で計ってもらえばすぐに分かりますが、

ツールバーの高さ + ナビゲーションバーの高さ

で、画面の約25%を占有されていることになります。このエリアがなくなると非常に広く感じます。

ただし、ナビゲーションバーが表示されませんので、ページの戻る機能や、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サーバーにアップすれば見ることができます。

サンプル(デフォルトプロジェクト)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする