Safari Extension 三分クッキング!
Safari Extension 作りたい! という方にお届けする、三分クッキング!
HTML5 + JavaScript を使って簡単な機能拡張(extension)を作ってみます。
最大の難関
Safari Extension を作るにあたって、最大の難関は Apple ID の登録と、Safari Developer Program への登録です。
三分クッキングとしては、「既に登録されたアカウントがこちらになります」と別のお鍋を取り出す場面です。
軽く要所要所だけ説明しますので、フィーリングとリーディングとやる気で乗り切ってください。
- Safari Developer Program のページを開いて「Join now」を押します。
- 次のページでは登録状況によってチェック先が変わります。
- 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」します。
最後にダウンロードした証明書を開くと、証明書追加の確認が出るので「追加」を押せば準備完了です。
いよいよ本題
以下、テンプレ。
- まずは Safari 5 をダウンロード&インストールします。
- Safari 5 を起動してメニューから環境設定を開きます。(Mac だと Cmd+,)
- 詳細タブを開いて、「メニューバーに''開発''メニューを表示」にチェックを入れます。
- メニューバーに「開発」が追加されるので、その中の「機能拡張を有効にする」にチェックを入れます。
- 以上で、機能拡張が有効になり、Safari Extension をインストールできるようになります。
ここから本題。
- メニューバーの「開発」から「機能拡張ビルダーを表示」を選ぶと、真っ白くて潔い画面が現れます。
- 左下の「+」ボタンを押して「新規機能拡張」を選びます。
- 保存先を聞かれるので、適当なフォルダに「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 をくっつけます。無いなら適当で。
- 機能拡張クローム
- バー: 「新規バー」を押して、以下のように設定してください。
以上で、完成です!!
まとめ
3分なんて無理でした><