このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ第54回

HTMLとJavaScriptで作れた!Mac用ミニアプリ

2011年03月29日 11時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷
js-labo

 HTML/CSSとJavaScriptでMac OS XのDashboardウィジェット(ミニアプリ)を作る連載。前回は、単純にHTMLで文字を表示するだけのウィジェットを作成しました。今回はちょっとしたテキストをすぐに入力してメモとして残せる「メモウィジェット」を作ってみましょう。

 メモ機能を持ったDashboardウィジェットはいくつかあり、標準でも「スティッキーズ」が用意されています。

【図】fig1-1.png
標準で用意されている簡易メモウィジェット「スティッキーズ」

 ただ、スティッキーズには文字数制限があり、あまり長い文字を入力できません。そこで、今回はHTMLのフォームを使って、文字数制限のない「クイックメモ」ウィジェットを作ります。メモと一緒に更新日時も表示し、同じような内容でもどれが最新なのか、すぐに分かるようにします。

ウィジェット作成の準備

 さっそくウィジェットの作成にとりかかりましょう。Widgetsフォルダ内に「クイックメモ」フォルダを作成します。

【図】fig1-2.png
クイックメモという名前のフォルダを作成する

 フォルダを作成したら必要なファイルをフォルダ内に入れます。今回はHTMLに加えて、CSSとJavaScriptファイルが必要なので、以下の6つのファイルをフォルダ内に用意します。

Default.png
起動画面と背景画像(共用)
Icon.png
ウィジェットのアイコン
Info.plist
プロパティリストファイル
main.css
CSSファイル
main.html
HTMLファイル
main.js
JavaScriptファイル
【図】fig1-3.png
クイックメモウィジェットに必要なファイル

 ファイルを入れたらクイックメモフォルダに拡張子.wdgtを追加し、ウィジェットとして動作するようにします。以上で準備完了です。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く