rui live note

WordPress、PHP、子育て、ブログ、将棋、コワーキング、子育て、群馬等に関する日々感じたことを書いているブログです

*

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

      2017/03/10   JavaScript, 生活, 開発, 高校野球

  • このエントリーをはてなブックマークに追加
  • Pocket

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

春のセンバツに出場する学校は全部で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 拡張のご紹介でした。

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

ad

この記事が気に入ったらシェアしてもらえると嬉しいです!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • follow us in feedly
  • RSS

  関連記事

jetstream
ほぼ日手帳ボールペンの替芯を交換して使う方法

数年前に買ったほぼ日手帳のボールペンを愛用しています。 肝心の手帳本体の方は三日 …

徒競走
いざ本番!運動会に向けてうちの子が今年取り組んだかけっこ対策について

すっかり季節も秋めいて、あちこちで運動会が開かれるシーズンですね。 うちの長男は …

カンボジアの留学生がホームステイに来たので将棋を教えてあげました

先日、とある縁があってカンボジアからの留学生が、我が家にホームステイにやってきま …

電王戦FINAL
11/26に開かれた将棋電王戦FINAL記者発表会の内容まとめ

11/26に将棋電王戦FINAL記者発表会が開かれました。 来春に行われる電王戦 …

ハロウィン
ハロウィンも妖怪ウォッチで決める!そんな仮装グッズを集めてみました

すっかり日本でもお馴染みとなったハロウィン。今年もあちこちでイベントやらパーティ …

将棋観戦ぴあ
電王戦のお供にも!将棋観戦ぴあは「観る将」にオススメの一冊でした

知人から編集に関わったのでと紹介されたので、先日発売されたばかりの「将棋観戦ぴあ …

将棋
将棋ウォーズの時間切れ負け率が50%もあったので対策を考えてみた

ちょっと早口の人が相手だと話がなかなか頭に入ってこなかったり、何かを説明しようと …

和菓子
Twitterで見かけたあまりに風流で美しい夏の和菓子5選

この季節 Twitter のタイムライン上で、これぞ日本!という実に趣のある夏向 …

サッカーW杯
2014サッカーW杯の出場国を他のものに例えてみるサイトを集めてみた

さあ、いよいよサッカーW杯開幕間近。自分はサッカーは見るのもやるのもさっぱりな方 …

マリオ
まだDLしてないキッズは急げ!スマブラ3DSの体験版が10月31日までで配信終了に

任天堂の人気シリーズ「大乱闘スマッシュブラザーズ」(略称スマブラ)の最新作「大乱 …