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

  関連記事

棋士データベース
棋士データベースで遊ぶ(1)〜棋士データをスクレイピング〜

※この記事は「将棋 Advent Calendar 2016 – A …

コワーキングスペース7F
大宮の コワーキングスペース 7Fに行ってきました!

大宮のコワーキングスペース7Fに行ってきました! コワーキングスペース7F | …

人狼
第4回の人狼やってみよう会に参加してきました

※写真は、参加者のホリウチさんから頂いた木をカット加工した狼です。 4月17日に …

ゆるキャラグランプリ
ゆるキャラグランプリ2014開幕。このブログを「ぐんまちゃん応援隊」に登録してみた!

今年もゆるキャラグランプリ2014の季節がやってきました。 群馬県勢の注目として …

妖怪メダル
さて、いよいよ6月7日発売の妖怪メダル第3章をどこで買えばよいか

さて、全国の妖怪ウォッチファンのチビっ子たちお待ちかねの「妖怪メダル第3章」、い …

確定申告
初めての確定申告(青色申告)でやったことをふりかえってみる

photo credit: kenteegardin via photopin …

コワーキングマガジン
日本初のコワーキング情報誌『コワーキングマガジン』創刊号が発売されました

情報誌「コワーキングマガジン」の創刊号が発売されたので買ってみました。 Cowo …

コロツアー
コロコロコミックのお祭り「コロツアー2014」群馬大会に行ってきました

8月17日にイオンモール太田で開かれた、コロツアー2014群馬大会に行ってきまし …

電王戦
第三回電王戦最終局「屋敷伸之九段 vs ponanza」の大盤解説会を観戦してきました

先日開かれた第三回電王戦の最終第5局。屋敷伸之九段 vs ponanza の大盤 …

交差点
転職によって人の繋がりを広げられると感じたこと

私事ですが、去る4月をもちまして5年余り勤めた会社を退職し、この5月からまた新し …