ko31 今夏の甲子園もついに全49代表校が出揃いました。
今年の参加校数は全国で3839校なので、大まかに78校につき1校という狭き門を勝ち抜けた学校となるわけです。すごいですねー。
こんな各校の栄誉を称える証として、学校の Web サイトに夏の甲子園出場記念リボンをかける Chrome 拡張を作ってみました。
なお、この記念リボンは春のセンバツでもやったネタでして、その時の記事はこちらになります。
Chrome 拡張について
今回作成した Chrome 拡張はこちらです。
この Chrome 拡張を有効にした状態で甲子園出場校の Web サイトにアクセスすると、下記のように「第99回全国高校野球選手権大会出場」と書かれた記念リボンがページ右上に表示されます！
Chrome 拡張の使い方
下記ページの「Source code (zip)」というリンクから、ファイルをダウンロードし、ダウンロードした zip ファイルを展開しておきます。
次の手順で Chrome 拡張の設定をします。
- Google Chrome で chrome://extensions/ にアクセスします。
- 右上の「デベロッパー モード」をチェックします。
- 「パッケージ化されていない拡張機能を読み込む…」ボタンをクリックします。
- ダウンロードしたファイルの extension フォルダを開きます。
設定が終わったら Chrome で出場校いずれかの Web サイトにアクセスします。今大会出場校の Web サイト URL はこちらを参考にしてみてください。
「第99回全国高校野球選手権大会出場」というリボンが表示されたら OK です。
課題
実は、米子松蔭のサイトではまあうまく動作していません。
こちらのサイト、昔ながらのフレーム構造になっているんですが、フレームの読み込み先が別ドメインのページになっているため、JavaScript でソースを編集しようとしても cross domain のセキュリティ制限に引っかかってしまいます。何か回避策はないかと探ってはみましたが今のところは未解決で・・・。
ソースは GitHub にありますので、何かうまい解決策がありましたらどなたか教えてください（笑）
おわりに
以上、Chrome 拡張のご紹介でした。
もし興味のある方がおりましたら、ぜひ試してみてくださいね。
