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

  関連記事

妖怪ウォッチ特別号
スポーツ報知から「妖怪ウォッチ特別号」新聞が出てたので買ってみました

駅中のコンビニに立ち寄ったとき、たまたま「妖怪ウォッチ特別号」という新聞を見かけ …

ころとん
2014年はぐんまちゃん・ころとんでグンマー年賀状などいかがでしょうか?

今年も残すところあと半月!ということで、毎年恒例のそろそろ年賀状をどうするか考え …

電王戦タッグマッチ
電王戦タッグマッチ 2014 FinalRound 観に行ってきました

10月12日に開かれた「電王戦タッグマッチ2014 FinalRound」の観覧 …

釣り
夏休みの子ども連れお出かけスポットに釣り堀をオススメする3つの理由

夏休みに子どもを連れてどこにでかけようか?そんなお悩みを持った方は多いんじゃない …

将棋盤
ハロウィンの仮装ネタにできそうな将棋プロ棋士で打線組んだ

10月になり、あちこちでハロウィンの話題を目にする機会が増えてきましたね。 ハロ …

将棋
第4回電王戦に向けて出場棋士予想ツイートをまとめてみました

先日、ドワンゴと日本将棋連盟から8月29日に「将棋電王戦に関する記者発表会」が開 …

四字熟語辞典
小学校低学年から楽しく読めて分かりやすい「小学生のまんが四字熟語辞典」

うちの子は暇さえあれば何かしら本を開いている本の虫で(近頃はマンガの割合がだいぶ …

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

photo credit: kenteegardin via photopin …

将棋駒
将棋駒画像が無料ダウンロードできる素材サイトまとめ

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

和凧
前橋の「上州空っ風凧揚げ大会」に行ってきました

2月15日、前橋で開かれた「第23回上州空っ風凧揚げ大会」に子どもたちと行ってき …