miklpudding / chrome-chord-columnizer

コード譜を段組み表示するchrome拡張

Screenshot

利用方法

1. chordwiki/ufret/gakkime/chordsketch のいずれかのサイトを開く
2. アイコンをクリックしてポップアップメニューからカラム数を選択
3. スクロールが発生しないようにカラム数を調整

• 転調・ダイアグラムの非表示等は予め選択しておいてください
• やり直す場合は、ブラウザのリロード(再読み込み)で。
• ブラウザのウィンドウはなるべく横長で大きめに表示し、フォントを小さくすることで画面に収まりやすくできます。

既知の問題

• 長すぎるコンテンツの場合、右端が切れたり意図しないカラム数で表示されることがあります。
  • ウィンドウを大きくし、ページを縮小する、カラム数を大きく設定する等して、適宜調節してください。

更新履歴

• コードと歌詞が別々の列に表示される問題の改善。

インストール方法

Chrome

• Chrome web store からインストール

FireFox (48.0以降)

• Mozilla アドオンからインストール

Opera

• Opera アドオンからインストール

Microsoft Edge (未検証)

• Windows 10 Anniversary Update 適応済の場合
  • ゼロからはじめる Microsoft Edge 用の拡張の作り方 https://blogs.msdn.microsoft.com/osamum/2016/07/05/how-to-make-extension-for-msedge/
  • MS、Chromeの拡張機能をEdgeで動作させるツールキット「Microsoft Edge Extension Toolkit」公開 http://internet.watch.impress.co.jp/docs/news/1014363.html

開発版の制限事項

• 公式のストア以外から拡張機能のパッケージをインストールすると、 ブラウザ起動時にセキュリティの警告が出ます。(Chrome)

chrome-chord-columnizer's Issues

段組にした際に起こる問題の改善

• 文字(フォント)が上下に分断されて表示
• コードと歌詞が上下に分断される
• スクロールが発生し画面に収まらない
• 不要に広い余白が表示される
• 後半部分が画面外に隠れることがある（スクロールバーも出ない）

各ブラウザのアドオン・サイトへ公開

セキュリティ上の理由により、最近のブラウザでは非公式アドオンのインストールは
手間がかかり、警告などが出るようになっています。

ブラウザ拡張(アドオン)のインストールは、
公式サイトで審査を受けて通ったもののみが公開可能になります。

• Chrome - Google App Store
• FireFox - Mozilla Add-ons
• Opera

余白調整

サイト毎に非表示にする要素を列挙しているが、
表示したい要素以外を排除する事で、汎用的なコードに纏める。

function moveToTop_(body, el) {
  // move to top
  body.insertBefore(
    el.parentNode.removeChild(el),
    body.firstElementChild
  );
  // remove rest nodes
  while (body.lastElementChild != body.firstElementChild) {
    body.removeChild(body.lastElementChild);
  }
}

要素の親子関係が崩れるため、
スタイルシード等のセレクタ指定が無効になっていないか、サイトごとにチェックする必要あり。

他ブラウザへの対応

• Chrome
  • ブラウザ起動時に警告が出るが、デバッグ用の拡張読み込みで利用可能
  • ストアでの公開には登録・審査が必要
• Opera
  • インストール時に警告が出るが利用可能
  • 公開には審査が必要
• FireFox
  • アドオンのインストールには mozillaの審査・署名が必要
  • NodeList.forEach が未実装 (FireFox 48.0)
• Microsoft Edge
  • ブラウザ側は、2016/08/03 のアップデートでWebExtensions互換に対応。
  • 開発者向け設定で、ストア外からの拡張を試せるようにする必要がある。（未検証）

WebExtensions というブラウザ間の共通規格でコードを書いているので、
パッケージ方法を変えるだけで、中核のコードは他ブラウザでも動くはずです。
Internet Explorer は、WebExtensions をサポートしていないので対象外。