読み込んだウェブページに CSS を適用させる [Safari Extensions を作ってみる：第四回]

さて、Safari で読み込んだページに CSS を適用させてみる。今回は Apple の背景を青にしてみる。

とりあえず、CSS を用意する。名前は「apple.css」とする。

body {background: rgba(0, 102, 255, .7) !important;}

既に背景はスタイルで宣言されているので、!important を付けておく。

1. Safari Extensions の新規開発画面を表示する


2. Safari Extensions の新規開発画面を表示する際に保存したフォルダに、上記で作った css ファイルを保存する


3. 「機能拡張の情報」「機能拡張の詳細」「機能拡張のバージョン」の各項目に適宜な内容を入力する


4. 「機能拡張 Web サイトアクセス」の「アクセスレベル」を「すべて」にする


5. 「取り込んだ機能拡張の内容」の「スタイルシート」の「新規スタイルシート」をクリックする


6. 入力箇所が表示されるので、セレクトボックスをクリックすると 2. で保存した apple.css が表示されるので、それを選択する


7. 少し下の「ホワイトリスト」の「新規 URL パターン」をクリックする


8. 入力ボックスが表示されるので、「http://www.apple.com/*」と入力する。アスタリスクでワイルドカードを使えるので、スラッシュの後には「*」を入力する


9. 機能拡張ビルダー右上の「インストール」をクリックし、Apple にアクセスすると、背景が青くなる。

ちなみに、このホワイトリストでドメインを指定しないと、あらゆるウェブページで css が発動してしまう。ホワイトリストの説明は Safari Extensions Development Guide: Using Extension Builder に載っている。

読み込んだウェブページの内容を使って処理を行う [Safari Extensions を作ってみる：第三回]

機能拡張では、メニューバーになにかを表示したりするだけでなく、Safari で読み込んだページの内容を使って処理を行うこともできる。今回は Apple のトップページ右上にある検索ボックスに「Safari Extensions」という文字を放り込むような処理を作ってみる。

とりあえず、Javascript を用意する。名前は「apple.js」とする。この検索ボックスは、ソースを見ると id="sp-searchtext" となっている。

document.getElementById("sp-searchtext").value = "Safari Extensions";

1. Safari Extensions の新規開発画面を表示する
2. Safari Extensions の新規開発画面を表示する際に保存したフォルダに、上記で作った js ファイルを保存する
3. 「機能拡張の情報」「機能拡張の詳細」「機能拡張のバージョン」の各項目に適宜な内容を入力する
4. 「機能拡張 Web サイトアクセス」の「アクセスレベル」を「すべて」にする
5. 「取り込んだ機能拡張の内容」の「スクリプトを終了」の「新規スクリプト」をクリックする。「スクリプトを開始」のものでは動作しないので、必ず「スクリプトを終了」のものにする
6. 入力箇所が表示されるので、セレクトボックスをクリックすると 2. で保存した apple.js が表示されるので、それを選択する
7. 少し下の「ホワイトリスト」の「新規 URL パターン」をクリックする
8. 入力ボックスが表示されるので、「http://www.apple.com/*」と入力する。アスタリスクでワイルドカードを使えるので、スラッシュの後には「*」を入力する
9. 機能拡張ビルダー右上の「インストール」をクリックし、Apple にアクセスすると、検索ボックスに「Safari Extensions」と表示されるようになる

ちなみに、このホワイトリストでドメインを指定しないと、あらゆるウェブページで js が発動してしまう。ホワイトリストの説明は Safari Extensions Development Guide: Using Extension Builder に載っている。

とりあえず Hello World [Safari Extensions を作ってみる：第二回]

まずは新しくプログラムを行う基本である、Hello World の文字を Safari のメニューバーに表示するようにしてみる。

とりあえず、Hello World と表示する html ファイルを用意する。html5 で記述し、名前は「index.html」とする。

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>タイトル</title>
</head>
<body>
Hello World
</body>
</html>

1. Safari Extensions の新規開発画面を表示する
2. Safari Extensions の新規開発画面を表示する際に保存したフォルダに、上記で作った html ファイルを保存する
3. 「機能拡張の情報」「機能拡張の詳細」「機能拡張のバージョン」の各項目に適宜な内容を入力する
4. 「機能拡張クローム」の「バー」の「新規バー」をクリックする
5. 入力箇所が表示されるので、「ラベル」には適宜な文字を入力し、「ファイル」をクリックすると 2. で保存した index.html が表示されるので、それを選択する
6. 機能拡張ビルダー右上の「インストール」をクリックすると、メニューバーに「Hello World」と表示される

とっても簡単。

Safari Extensions を作ってみる

Safari 5 から Extensions（拡張機能）を使えるようになったので、作ってみようと思う。

1. Safari Extension（機能拡張）を作る前に証明書をゲットし、Safari Developer となる
2. とりあえず Hello World
3. 読み込んだウェブページの内容を使って処理を行う
4. 読み込んだウェブページに CSS を適用させる
5. 自動的にアップデートをさせるようにする
6. Extension のアイコンを設定する
7. Javascript ファイルから設定画面の情報を読み込む
8. 読み込んだページに独自の要素を表示させる
9. 独自の要素からページ遷移を行う
10. 独自のコンテクストメニューを生成する
11. 開いている全てのタブに処理を走らせる
12. 設定内容の保存先には localStorage がいいと思う
13. ウェブページに iframe があって複数読み込まれてしまう場合の対処

iTunes 10 の違和感

昨日、ようやく iTunes 10 をインストールしたけど、どうも違和感がある。。。画面でメインとリストの部分は、なんだか OS 9 以前のデザインぽいなぁという感じはするけど、違和感の正体はこれじゃない。

左上の赤・黄・緑のボタン類が縦並びになっていることだ。何故こんな仕様に？いつ見ても違和感がある。

アップル - iTunes - あなたを楽しませるすべてのエンターテインメントが、ここに。

Mac で全角入力モードで半角スペースを打つ

私は以前勤めていた会社で、「半角英数字を打つ場合は前後に半角スペースを入れて見やすくする」ということを学習したので、今もそれはむしろ癖となって体に染み付いている。しかし正直なところ、例えば「これは 1 です」と打つ場合、モードは「全角→半角→全角」と切り替えるのはめんどくさい。テンキーの数字は半角モードにしているため、「1」はわざわざ半角モードにしなくても打てる。問題は全角モード時に半角スペースを打つことができれば、随分と楽になる。

で、先程キーの押し間違いからそれが解決した。全角モードで半角スペースを打つ方法はこれだった。

Shift キー + スペースバー

これで全角モードであっても半角スペースを打つことができた。JIS キーボードでも US キーボードでも確認済み。ただ、うちには Mac しかないから、Windows ではどうなのかと言われると、判らない。

iTunes で同じアルバムなのに 1 つにまとめられない問題の解決法

以前から気にはなっていたけど、何故だかよく判らなかったので放置していたこの問題。友人も同じことを言っていたので、結構同じ問題を抱えている人はいるんだろうなぁと思っていたけど、放置していた。で、ふと思って検索してみると、アップルのサポートに載っていた。

同じアルバムアートの曲がひとつにまとめれない理由

正式のサポートページなのに、タイトルで「ら」抜きとは如何なものかと思ったが、（今見たらタイトル直ってました）とりあえず記事を読んでみた。このページに書いてある原因は以下の 3 種類。

1. アルバム名が少し異なる
2. アルバムに収録されている曲のアーティストが異なる
3. アルバムに収録されている曲の「アルバムアーティスト」が異なる

1. と 2. は記事に書いてあるようなことはない。今では CD を挿し込むと情報を書き込んでくれるけど、昔の iTunes ではそんな便利なことをしてくれなかった。しかし CD から取り込んだ後に 1 曲だけ情報を入力して、あとは曲名だけ完全に入力し、残りの部分はサジェストで表示されるものを使っているから、間違う訳がない。3. に至っては、「アルバムアーティスト」という項目を使っていないので、全部空欄。

ということで、記事の最後に書いてある方法をやってみる。「コンピレーション」にチェックを付けるというもの。ただ、これをすると iTunes の「カラムブラウザ」欄の「アーティスト」に「コンビレーション」という謎の「アーティスト」ができてしまい、美しくない。しかし今回は「同じアルバムなのに 1 つにまとめられないという問題を解決する」という目的なので、コンビレーションを「はい」にしてみた。手順は以下の通り。

1. 本来同じアルバムとして登録される筈の曲を全部選択する
2. Command キーと i キーの同時押し、もしくは右クリックの「情報を見る」、もしくはメニューバーの「ファイル」から「情報を見る」を選択する
3. 「複数項目の情報」という画面が表示されるので、「オプション」タブをクリックする
4. 「コンビレーションの一部」の右にあるセレクトボックスを「はい」にして、「OK」をクリックする

これで確かに 1 つにまとまったけど、やっぱり「コンビレーション」という謎のアーティストができてしまう。そこで、上記の操作をもう一度やり、最後の「コンビレーションの一部」右のセレクトボックスを「いいえ」に戻す。すると、謎の「コンビレーション」というアーティストは消えるが、アルバムは 1 つにまとめられたままの状態で残る。これで美しくまとめられた。