ko31 あれこれ忙しいことが続くと、自分が楽しめるものでも作って現実逃避したくなりますね。というわけで、前回の記事に引き続き高校野球ネタで遊んでみます。
春のセンバツに出場する学校は全部で32校。全国4,000校以上が参加した中からの選ばれし32校なわけですから、これっともう出場するだけでも相当すごいわけです。
この32校をもっと称えてあげたい！そんな気持ちを込めて、各校の Web サイトにセンバツ出場記念リボンをかける Chrome 拡張を作ってみました。
Chrome 拡張について
作成した Chrome 拡張はこちらです。
この Chrome 拡張を有効にした状態でセンバツ出場校のどれかの Web サイトにアクセスすると、こんな感じで「第89回センバツ出場校」と書かれたリボンがページ右上に表示されます。
Chrome 拡張の使い方
下記ページからファイル一式をダウンロードします。
次の手順で Chrome 拡張の設定をします。
- Google Chrome で chrome://extensions/ にアクセスします。
- 右上の「デベロッパー モード」をチェックします。
- 「パッケージ化されていない拡張機能を読み込む…」ボタンをクリックします。
- ダウンロードしたファイルの extension フォルダを開きます。
設定が終わったら Chrome 上でセンバツ出場校の Web サイトにアクセスします。センバツ出場校の Web サイト URL はこちらを参考にしてみてください。
「第89回センバツ出場校」リボンが表示されたら OK です。
リボンの表示位置について
基本的にリボンは各ページの右上に表示させているんですが、今や希少なフレーム構造の Web サイトが仙台育英、熊本工、不来方の3校ありまして、それらについては単純に他校と同じようには表示できませんでした。
そこで、どのページに移動しても比較的表示されているであろうフレームを選んでリボンが設置されるよう調整してみました。
仙台育英の場合はヘッダーのフレームに。ちょっと見切れてしまいましたが・・・。
熊本工、不来方はそれぞれ左サイドメニューのフレームに。本来のメニューが押しづらくなってしまったことはどこかに置いといてください。
リボンについて
なお、表示させているリボンのソースコードは、こちらの GitHub 風リボンを生成するサービスからお借りしました。
コードをこういう使い方して良いのかどうかよく分からなかったので、後ほど作者の方に問い合わせておきます。怒られたらやめますので。。
終わりに
というわけで、Chrome 拡張のご紹介でした。
かなり自己満足度合い高めの作業となりましたが、もし興味のある物好きの方がいたらぜひ試してみてください。
