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

HTMLとJavaScriptで作れた！Mac用ミニアプリ (3/5)

環境設定画面を追加する

　Dashboardウィジェットは、一般的なHTML/CSS+JavaScriptとほとんど変わりませんが、ウィジェットならではの機能も用意されています。Dashboardウィジェットの機能を使って、一般的なアプリケーションではおなじみの「環境設定」の画面を作ってみましょう。

　クイックメモウィジェットの環境設定では、テキストエリアの背景色と文字色を好みの値に設定し、保存できるようにします。Dashboardウィジェットには、保存されたデータを読み出すwidget.preferenceForKey()と、データを書き込むwidget.setPreferenceForKey()が用意されています。WebブラウザーのCookieのように、キーと値をペアで保存・読み出す仕組みですが、Cookieのような面倒な処理は必要ありません。以下の書式で利用できます。

widget.preferenceForKey(【キー名】)
widget.setPreferenceForKey(【設定値】,【キー名】)

　今回は、背景色と文字色の値をwidget.setPreferenceForKey()で保存しておき、ウィジェットの起動時にはwidget.preferenceForKey()で値を読み出して背景色と文字色に設定します。キー名は文字色を「textColor」、背景色を「bgColor」とします。

　ウィジェットが起動すると、Webページの読み込みと同様にloadイベントが発生します。window.onloadにイベントハンドラを設定しておけば、ウィジェット起動時に環境設定の処理を実行できます。イベントハンドラ内の以下の処理で文字色と背景色を読み出せます。

var textColor = widget.preferenceForKey("textColor");
var bgColor = widget.preferenceForKey("bgColor");

　データが一度も保存されていない場合（環境設定を変更していない場合）、widget.preferenceForKey()は指定したキーのデータが存在しないので、nullを返します。そこで、widget.preferenceForKey()からの戻り値がnull以外の場合にのみ、テキストエリアの文字色、背景色を設定するようにif()を使って処理を記述します。

var textColor = widget.preferenceForKey("textColor");
if (textColor) document.getElementById("memo").style.color = textColor;
var bgColor = widget.preferenceForKey("bgColor");
if (bgColor) document.getElementById("memo").style.backgroundColor = bgColor;

　環境設定に関するメソッドはDashboardウィジェット独自のメソッドですので、Webブラウザーでは動作しません。Dashboardの場合はwindowオブジェクトにwidgetオブジェクトが追加されるので、window.widgetが存在するかどうかを調べて、ウィジェット上で動作している場合にのみ処理をします。

　ここまでをまとめたのが以下のスクリプトです。

// ページが読み込まれたら環境設定を読み出し設定する
window.onload = function(){
  if (!window.widget) return;  // ウィジェット上で動作していない場合は処理しない
  // 文字色を設定
  var textColor = widget.preferenceForKey("textColor");
  if (textColor) document.getElementById("memo").style.color = textColor;
  // 背景色を設定
  var bgColor = widget.preferenceForKey("bgColor");
  if (bgColor) document.getElementById("memo").style.backgroundColor = bgColor;
}
// 環境を設定する
function setColor(){
  var textColor = document.getElementById("textColor").value;
  var bgColor = document.getElementById("bgColor").value;
  widget.setPreferenceForKey(textColor, "textColor");
  widget.setPreferenceForKey(bgColor, "bgColor");
}