Safari Extension（機能拡張）を作る前に証明書をゲットし、Safari Developer となる [Safari Extensions を作ってみる：第一回]

Safari Extension（機能拡張）も widget と同じように、html や Javascript、css で簡単に開発できるみたいだけど、作る前にやることが結構ある。なんか証明書というのが必要らしい。

★機能拡張を開発する画面

まずは機能拡張を有効にしていなければ、これを有効にする

• Safari を起動する
• メニューバーの「Safari」から「環境設定」を選択する
• 「機能拡張」をクリックし、バーを「入」にする

これをやっていれば、メニューバーの「開発」に「機能拡張ビルダーを表示」が表示される。これを選択すると、「機能拡張ビルダー」が起動する。

★機能拡張を新規に開発する

• 「機能拡張ビルダー」左下の「+」ボタンを押す
• 表示されたメニューから「新規機能拡張...」を選択する
• まぁ待ちなさい、まずは保存しなさいとのダイアログが出るので、場所を選んで名前を付けて保存する
• 証明書がないと、画面上から 3 行目辺りが赤くなっている

さぁ、この赤いのを取り除きたい。この手順は以下の通り。

★証明書を入手する

• 「アプリケーション -> ユーティリティ」にある「キーチェーンアクセス」を起動する
• メニューバーの「キーチェーンアクセス」から「証明書アシスタント -> 認証局に証明書を要求...」を選択する
• 「ユーザのメールアドレス」にメールアドレス、通称に名前等を入力し、「要求の処理」のチェックを「ディスクに保存」にし、「続ける」ボタンを押す
• 保存ダイアログが表示されるので、場所を選んで名前を付けて保存する
• Apple ID を持っていない場合は、ご利用ガイド - Apple ID - Apple Store (Japan) を参考に、Apple ID をゲットする
• Sign in with your Apple ID - Apple Developerにアクセスする。
• 表示されたページの「Apple ID」には ID が表示されるので、パスワードを入力し、「Sign In」をクリックする
• 「Developer Certificate Utility」をクリックする
• 「Create Certificates」をクリックする
• 「Add Certificate」をクリックする
• 「Continue」をクリックする
• 上記「4」で保存したファイルをファイル選択で指定し、「Generate」をクリックする
• ローディング画像がくるくる回り、緑色のチェックマークが表示されたら、画面右下の「Continue」をクリックする
• 表示された画面の「Download」をクリックすると、自動でダウンロードされる。
• ダウンロードされた「safari_identity.cer」をダブルクリックすると、「キーチェーンアクセス」が起動する。これで証明書の準備は OK となる

この状態で上述の「機能拡張を新規に開発する」の手順を行うと、赤かった 3 行目に「Safari Developer:〜〜」と表示され、開発できるようになる。

新しい iPod touch

アップル - iPod touch - FaceTime、Retinaディスプレイなど、魅力を満載。

やはり新しい iPod touch が出た。毎年 9 月にはモデルチェンジしているから、期待していたけど、やっぱり出た。そして、欲しい。
今までは iPhone とのざっくりした違いを、通話とカメラとどこでもネットワークへ接続ができるかどうかだと思ってたけど、そのカメラが装着されたことにより、余計に魅力的に感じる。美しい Retina ディスプレイもとっても気になる。

糞フトバンクなどにはビタ一文ともやりたくないので、iPod touch の機能拡充にはいつも期待している。そんな中今年、iPod touch を買ったのはいいけど、一番安い 8 GB モデルだから、iOS4 にアップデートしても、ほとんどの機能を使うことができない。壁紙機能すら使えない。だからなおさら、気になる。。。ま、しばらくは我慢の日々だろうなぁ。

Mac の Dashboard を再起動する

今、Dashboard の計算機を使おうとして起動したけど、いくら計算機をクリックしても active にならない。うーん、と思って他の Widget も見てみると、カレンダーの日付は昨日のままだし、時計も明後日の方向を指していた。辞書 Widget も active にならないから、こりゃ Dashboard がお亡くなりになってると思い、再起動しようとした。しかし、Finder は Mac 3 点押しの command + option + esc で強制終了メニューから強制終了させられるけど、Widget はできない。Dock の Widget アイコンの右クリックでもそんなメニューは出てこない。

ということで、「アクティビティモニタ」の出番。

★「アクティビティモニタ」の場所

起動ディスク -> アプリケーション -> ユーティリティ -> アクティビティモニタ

★Dashboard の再起動

1. アクティビティモニタを起動する


2. 「プロセス名」という欄に「DashboardClient」というのがあるので、その行をクリックする


3. 左上にあるデカい赤アイコンの「プロセスを終了」をクリックする


4. 表示されるダイアログの「終了」を選択すると、勝手に再起動する

Dashboard を再起動したので、今は普通に動いてるみたい。

携帯電話用に Google が勝手に変換するのを防ぐ

せっかく携帯版ウェブサイトを作って、パソコン版のトップページに携帯電話からのアクセス振り分けを仕込んだとしても、携帯版の Google から表示すると、携帯サイトへジャンプしない。Google が勝手に携帯電話用に変換してしまっている。確かに便利な機能ではあると思うけど、こうやってせっかく仕込んだ振り分けが機能しないのは実に困る。そこで、下記のたった 1 行をパソコン版ウェブページの <head> 内に記述するだけで、これを回避することができる。

下記は www.xxx.com というパソコン版のウェブページに、携帯版のウェブページである www.xxx.com/m/ へジャンプさせる場合。

<link rel="alternate" media="handheld" href="http://www.xxx.com/m/">

Widget で設定情報などユーザに選択させたデータを保存する/読み込む

昨日、widget でユーザに選択させた項目を保存、読み込むという記事を書いたけど、他の widget では cookie を使っていなかった。デフォルトで装備されている Weather という Widget の中身を見ていくと、データを別の保存、読み込み方法で制御していた。

デフォルトの Widget でこの手法を使っているので、おそらく cookie ではなくこちらが主流なんだろうと思い、昨日のエントリーは「cookie を使いやすいように読み込む」というタイトルに変更しておいた。併せて、widget 関連エントリーではなく、単なる cookie を連想配列に突っ込むというエントリーへと変更した。

さて、widget でのデータの保存、読み込み方法は、とても簡単にできていた。

★保存

「keyword」という項目名で、内容が「xxx」のデータを保存
widget.setPreferenceForKey("xxx", "keyword");

★読み込み

「keyword」という項目名のデータを変数 key に格納
var key = widget.preferenceForKey("keyword");

たった 1 行でできる。cookie よりも実にシンプルに管理できる。

リンクチェックには Opera が便利

レイアウトやらの確認を含まず、ただリンクのチェックをしたい場合は Opera が便利だと思う。Opera はデフォルトでマウスジェスチャー機能が備わっており、それを使うことで簡単に戻る、進むの動作をできる。

• 右クリックしながら左に動かす
  →戻る


• 右クリックしながら右に動かす
  →進む


• 右クリックしながら左クリック
  →戻る


• 左クリックしながら右クリック
  →進む

もちろん、Firefox でもアドオンでできるけど、デフォルトでできるというのは素晴らしい。Opera は覚えている限りでも 7 年くらい前からできていた。

cookie を使いやすいように読み込む

cookie の読み込みに関して検索してみると、cookie 文字列で使用する ; や = の位置を調べて値をチョン切って使うみたいなことを書いてあるページもあったが、split() を使えばもっと簡単に、連想配列を使えばさらに簡単にデータを使える。

下記では init() という function で cookie を連想配列 cookies に突っ込むことをしている。

function init() {
// 連想配列 cookies をクリア
  cookies = [];
// 変数 cookieItems に、cookie を ; ごとに区切って格納
// これで 1 項目づつに区切られる
  var cookieItems = document.cookie.split(";");

  for (var i = 0; i < cookieItems.length; i++) {
// 変数 thisCookie に 1 項目を = ごとに区切って格納
// これで 1 項目内の項目名と値を分けて格納する
    var thisCookie = cookieItems[i].split("=");
// cookies に項目名と値を同期させながら格納
    cookies[thisCookie[0]] = thisCookie[1];
  }
}