chrome拡張でコードを段組み表示

• ソースコードの入手
• GitHub repo から "Clone or Download" -> "Download ZIP"
• zipファイルを展開する
• 拡張機能のインストール
• chrome://extensions/を開き、"デベロッパー・モード"を有効にする
• "パッケージ化されていない拡張機能を読み込む"で、展開した場所を指定
• "有効にする"にチェック
• "デベロッパー・モード"のチェックを外す
• 既知の問題
• アプリ・ストアを介さない拡張のインストールで、
  ブラウザ起動時にセキュリティの警告が出る (chrome)
• コードと歌詞が別の段に分離してしまう
• TODO（余力があれば
• FireFox拡張 ... 拡張の規格は対応しているが、署名の必要がある。（要・登録審査）
• Microsoft Edge 拡張 ... 最新版(2016/08/03)のアップデートでブラウザ側は対応
  ストア外からの拡張のインストールは設定を弄る必要あり。

ChordWiki を段組表示するブックマークレット

コード

ChordWiki columns 2

javascript:document.getElementsByClassName("main")[0].style.columns=2;

ChrodWiki columns 3

javascript:document.getElementsByClassName("main")[0].style.columns=3;

動機

• 自動スクロールの指定が難しい (初見の曲等でテンポが分からない等)
• 手動スクロール時にロストしやすい
• ブラウザを２窓立ち上げて表示するのは手間

解決方法

• デッドスペースを活用し、段組み表示する。

導入方法

• 以下のリンクをブックマークバー等にドラッグして登録します
• ChordWiki columns 2
• ChordWiki columns 3
• もしくは、適当なブックマークを作成し、URL欄にブックマークレットのコードを記入
• 過去の記事を参考

利用方法

1. Chord Wiki のページを開く
2. ブックマークレットを呼び出す
3. 縦幅がスクロールする場合、フォントを少し小さくする等で調整
   (Ctrl + マウスホィール等)

既知の不具合

• 曲によっては、段組みの最下段で、コードと歌詞が別の段に表示される。
  => フォントサイズ調整で調整可能

コードの詳細

• document.getElementsByClassName("main")[0]
  ChordWikiでの歌詞・コードが書かれた親要素を所得。
  他サイトへの対応は、後述。
• .style.coumns = 2
  スタイルシートで段組みを設定します
  数値は、段組の数を指定します。Google Chrome でのみ動作確認。

他サイトへの対応 (2016/08/03現在)

• ChordWiki
• document.getElementsByClassName("main")[0]
• ChordSketch
• document.getElementsByClassName("song_body")[0]
• gakki me
• document.getElementById("code_area")
• ufret
• document.getElementById("blyodnijb")

複数サイト対応版

javascript:(function(){ switch (location.hostname) { case 'ja.chordwiki.org':return document.getElementsByClassName("main")[0]; case 'chordsketch.com':return document.getElementsByClassName("song_body")[0]; case 'gakufu.gakki.me':return document.getElementById("code_area"); case 'www.ufret.jp':return document.getElementById("blyodnijb"); }})().style.columns=2;