Safari Extension 三分クッキング!

Safari Extension 作りたい! という方にお届けする、三分クッキング!

HTML5 + JavaScript を使って簡単な機能拡張(extension)を作ってみます。

本日のメニュー

ツールバーで動く時計

完成予定図:

最大の難関

Safari Extension を作るにあたって、最大の難関は Apple ID の登録と、Safari Developer Program への登録です。

三分クッキングとしては、「既に登録されたアカウントがこちらになります」と別のお鍋を取り出す場面です。

軽く要所要所だけ説明しますので、フィーリングとリーディングとやる気で乗り切ってください。

  1. Safari Developer Program のページを開いて「Join now」を押します。
  2. 次のページでは登録状況によってチェック先が変わります。
    • Apple ID を持っていない人:左上の「I need to create a 〜」にチェック
    • Apple ID を持っているけど Apple Developer Program に登録していない人:左下の「I currently have an Apple ID〜」にチェック
    • Apple Developer Program に登録したけど課金してない人:右上の「I'm registered as a developer〜」にチェック
    • ADC Select、Premier、Student Member のいずれかで登録している人:右中の「I'm currently an ADC Select, Premier〜」にチェック
    • iPhone Developer Program か Mac Developer Program で登録している人:右下の「I'm currently enrolled in iPhone Developer〜」にチェック

ここから先は、気合いと根気と負けん気で乗り切ります。

住所や名前を入力する場合は、日本語ではなく半角英数で入力してください。さもないとバグに巻き込まれて涙目になります。

最終的に Safari Developer Program の登録まで完了すると、以下のような画面が出てきます。本当にお疲れ様でした。


証明書のダウンロード&インポート

自作の Safari Extension を作るには、Apple から開発者としての証明書をもらって署名する必要があります。面倒ですが、これをやらないと動かせないという大切なステップですよ!

Apple から「証明書」をもらうには、「証明書要求書」というややこしいものが必要です。Mac なら簡単に作れます。Mac ならね。(他のOSはググってくださいごめん><)

Mac で「アプリケーション→ユーティリティ→キーチェーンアクセス」と選んでいき、キーチェーンアクセスを起動します。

メニューバーから「キーチェーンアクセス→証明書アシスタント→認証局に証明書を要求」を選ぶと、証明書アシスタントが起動します。

  • 「ユーザのメールアドレス」に自分のメールアドレス
  • 「通称」に自分の名前
  • 「要求の処理」を「ディスクに保存」にチェック

「続ける」を押すと、証明書要求書の保存先を聞かれるので、適当なフォルダに保存します。

次に Safari Extension Certificate Utility ページを開きます。

初回アクセス時は「Request Certificate」の画面が開くので、右下の「Launch Assistant」→「Continue」とクリックします。

「Select the Certificate Signing request (CSR) file〜」という画面が出てきたら、先ほど作った証明書要求書を選択して「Generate」を押します。

くるくる回るアニメーションを見ながら待ちます。終わったら、「Continue」を押して、作られた証明書を「Download」します。

最後にダウンロードした証明書を開くと、証明書追加の確認が出るので「追加」を押せば準備完了です。

いよいよ本題

以下、テンプレ。

  1. まずは Safari 5 をダウンロード&インストールします。
  2. Safari 5 を起動してメニューから環境設定を開きます。(Mac だと Cmd+,)
  3. 詳細タブを開いて、「メニューバーに''開発''メニューを表示」にチェックを入れます。
  4. メニューバーに「開発」が追加されるので、その中の「機能拡張を有効にする」にチェックを入れます。
  5. 以上で、機能拡張が有効になり、Safari Extension をインストールできるようになります。

ここから本題。

  1. メニューバーの「開発」から「機能拡張ビルダーを表示」を選ぶと、真っ白くて潔い画面が現れます。
  2. 左下の「+」ボタンを押して「新規機能拡張」を選びます。
  3. 保存先を聞かれるので、適当なフォルダに「Clock」という名前で保存します。(「Clock.safariextension」という名前のフォルダが作られます)

ここまでで、こんな感じになっていると思います。

Safari Developer」の部分が「Safari デベロッパ証明書がありません」となっている場合は、証明書のインストールが出来ていないです。

HTMLファイルの作成

今まさに作られた「Clock.safariextension」フォルダの中に「bar.html」という名前でファイルを作ります。

Clock.safariextension
|-- Info.plist
`-- bar.html

ファイル構成はこんな感じになると思います。

「bar.html」の中身は、以下のようにします。HTML4と言っても通じるシンプルなHTML5で書きました。

<!DOCTYPE html>
<html>
<head>
    <title>Clock</title>
</head>
<body>
    <span id="hours"></span>
    :
    <span id="minutes"></span>
    :
    <span id="seconds"></span>

    <script type="text/javascript">

    function updateClock() {
        // 現在時刻を取得
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

        // 1桁だったら頭に0を付ける
        if (hours < 10) hours = "0" + hours;
        if (minutes < 10) minutes = "0" + minutes;
        if (seconds < 10) seconds = "0" + seconds;

        // ページに反映する
        document.getElementById("hours").innerHTML = hours;
        document.getElementById("minutes").innerHTML = minutes;
        document.getElementById("seconds").innerHTML = seconds;
    }

    // 0.5 秒に 1 回 updateClock 関数が呼び出されるようにする
    setInterval(updateClock, 500);

    </script>
</body>
</html>

これで、もうファイルを作ったり、コードを書いたりする必要はありません。やったね!

Clock の設定

機能拡張ビルダーで作成した Clock の設定を以下のように行ってください。

  • 機能拡張の情報
    • 表示名: 「俺様時計」とか「うにくろっく」とかどうぞご自由に
    • 作成者: あなたのなまえをいれてください
    • 説明: 「時を計ります」とか適当に入れておけばOK
  • 機能拡張の詳細
    • バンドル識別子: もし example.com というドメインを持ってるなら com.example.clock のように逆にして clock をくっつけます。無いなら適当で。
  • 機能拡張クローム
    • バー: 「新規バー」を押して、以下のように設定してください。

以上で、完成です!!

動かしてみる

早速、機能拡張ビルダーの右上にある「インストール」を押してみましょう!

ツールバーがニュッと出てきて、時計が動き出せば完璧です。

やったね!

Safari Extension で出来る事一覧

他にも Safari Extension はいろいろな事ができます。

  • 独自ツールバーの追加
  • ツールバーに独自ボタンの追加
  • コンテクストメニューに項目の追加
  • 独自タブ・ウィンドウの追加
  • ウェブページにスクリプトの注入(グリモンっぽいの)
  • ウェブページにスタイルシートの注入
  • バックグラウンドで動き続けるグローバルページ
  • グローバルページ、ツールバー、ウェブページ間でのメッセージング
  • 読み込みブロックが可能な beforeload イベント
  • 永続的に記憶される設定領域
  • 自動更新機能

まとめ

3分なんて無理でした><