2017年センバツ出場校WebサイトにリボンをかけるChrome拡張を作ってみました

あれこれ忙しいことが続くと、自分が楽しめるものでも作って現実逃避したくなりますね。というわけで、前回の記事に引き続き高校野球ネタで遊んでみます。

春のセンバツに出場する学校は全部で32校。全国4,000校以上が参加した中からの選ばれし32校なわけですから、これっともう出場するだけでも相当すごいわけです。

この32校をもっと称えてあげたい!そんな気持ちを込めて、各校の Web サイトにセンバツ出場記念リボンをかける Chrome 拡張を作ってみました。

Chrome 拡張について

作成した Chrome 拡張はこちらです。

この Chrome 拡張を有効にした状態でセンバツ出場校のどれかの Web サイトにアクセスすると、こんな感じで「第89回センバツ出場校」と書かれたリボンがページ右上に表示されます。

前橋育英

Chrome 拡張の使い方

下記ページからファイル一式をダウンロードします。

次の手順で Chrome 拡張の設定をします。

  1. Google Chrome で chrome://extensions/ にアクセスします。
  2. 右上の「デベロッパー モード」をチェックします。
  3. 「パッケージ化されていない拡張機能を読み込む…」ボタンをクリックします。
  4. ダウンロードしたファイルの extension フォルダを開きます。

設定が終わったら Chrome 上でセンバツ出場校の Web サイトにアクセスします。センバツ出場校の Web サイト URL はこちらを参考にしてみてください。


「第89回センバツ出場校」リボンが表示されたら OK です。

リボンの表示位置について

基本的にリボンは各ページの右上に表示させているんですが、今や希少なフレーム構造の Web サイトが仙台育英、熊本工、不来方の3校ありまして、それらについては単純に他校と同じようには表示できませんでした。

そこで、どのページに移動しても比較的表示されているであろうフレームを選んでリボンが設置されるよう調整してみました。

仙台育英の場合はヘッダーのフレームに。ちょっと見切れてしまいましたが・・・。

仙台育英

熊本工、不来方はそれぞれ左サイドメニューのフレームに。本来のメニューが押しづらくなってしまったことはどこかに置いといてください。

熊本工

不来方

リボンについて

なお、表示させているリボンのソースコードは、こちらの GitHub 風リボンを生成するサービスからお借りしました。

コードをこういう使い方して良いのかどうかよく分からなかったので、後ほど作者の方に問い合わせておきます。怒られたらやめますので。。

終わりに

というわけで、Chrome 拡張のご紹介でした。

かなり自己満足度合い高めの作業となりましたが、もし興味のある物好きの方がいたらぜひ試してみてください。

この記事を書いた人

ko31

岩手県出身、群馬県在住のフリーランスWeb系エンジニアです。
Webシステム・アプリ、Webサービス、WordPress開発等を雑多にこなしています。バンカラ応援好きの振り飛車党。
PHP / WordPress / 高校野球 / 将棋 / WordPress / ブログ / 食べること / 二児の父親

>>もっと詳しいプロフィールはこちら

お仕事のご相談・お問い合わせ

当ブログの管理人は、Gosign(ゴーサイン)という屋号でフリーランス Web エンジニアとして活動しています。
ブログの掲載内容はもちろん、Web サイト制作や Web アプリケーション開発などのご相談・ご質問がありましたら、どうぞお気軽にお問い合わせください!

合わせて読みたい記事