俺タワーウィジェット（もどき）を作る
俺タワーウィジェット（もどき）、できました。
自分用なので特に一般公開とかは考えてませんが。
追記（2014/11/01）
公開しました！
よかったら使ってください。
なぜ作った？
デュアルモニタを活かして、サブモニタで艦これと俺タワーを並行表示で楽しもう！と考えたうのはな。一生懸命ウィンドウサイズを調整してみた図がこちら。
うーん……、なんか、美しくない。
というか、起動する度に毎回「俺タワーのURLを新しいタブで開く」「サブモニタにウィンドウを移す」「サイズ調整する」「位置調整する」一連の作業を行わなければならないというのが面倒。
すでに導入した艦これウィジェットのようにスッキリした画面を一発で表示できるようにならないだろうか……。
調べてみても俺タワーの便利ウィジェットはなさそうなので、作ってみることにしました。
どんな機能？
- Google Chromeのアドレスバーの横にボタンを表示する
- ボタンを押すと「起動する」ボタンがポップアップ表示される
- 「起動する」ボタンを押すと俺タワーの画面が新しいウィンドウで表示される
- 画面はツールバーなし、アドレスバーなし、ステータスバーなし、スクロールバーなし。そして余計な余白がない状態。
これだけ！
どう作った？
Google Chromeの拡張機能を作るのは超簡単！
利用するのがほぼJavascriptのみなので、思いついたら気軽に作成できます。
Chrome拡張機能の作成方法 | キャスレーコンサルティング 技術ブログ
独自のブラウザー拡張機能を作成する: 第 1 回、Chrome を拡張する
今回は上記2サイトを参考にして作成しました。
具体的な作り方はこれを見ればわかるので、今回の作成で詰まった点だけサクッと解説します。
「起動する」ボタンを押しても新しいウィンドウが作られない
失敗例。
<input type="button" value="起動する" onclick="window.open(～～);"/>
うんともすんとも反応しません。デベロッパツールのコンソールで確認するとこんなエラーが。
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
大雑把に言うと、「セキュリティ的に危ないからインラインでイベント指定するのヤメレ」ッて感じ。
拡張機能を作成する際には、onclickではなくてjsファイル上でclickイベントを指定してあげる必要があるようです。
window.onload = function(){ document.getElementById("launch_btn").addEventListener("click", launch, false); };
JQueryで指定したらもっとスマートになるだろうけど、面倒なんでこれで実装。
起動画面の位置調整ってどうすればいいの？
外部サイトである俺タワーを開いているウィンドウについては、セキュリティの関係上Javascriptの実行が極端に抑制されます。
なので単純にwindow.open()して、window.scrollBy()しようとしても言うこと聞いてくれません。もちろんscrollTo()も同様。
解決方法としては、下記ページのように「iframeで俺タワーを読み込んで」「iframeにマイナスマージンを指定して調整する」方法を使いました。
細かい位置調整をするのが面倒くさい
上記方法で表示位置を調整するのですが、「マイナスマージン」と「ウィンドウの大きさ」を微調整するのがやや面倒。html(js)ファイルを調整して→ウィンドウリロードして→また数値調整して→ウィンドウリロードして……。
――って、もっとスマートな方法がありました。デベロッパツールを使いましょう。
デベロッパツールを使えば、ウィンドウをリロードしなくても値の微調整が可能です。
ウィンドウの大きさがドキュメントの大きさ（=bodyタグ内）より少しでも小さければ必ずスクロールバーが出てくるようだったので大変でした。こういう場合は、bodyタグにmargin: 0を指定するのをくれぐれもお忘れなく。
以上で俺タワーウィジェット（もどき）が作れます。皆さんも良い俺タワーライフを！
