アメブロをスキン上で書けるユーザースクリプトを書いてみた

最近またJSでくだらない物を作る機会が増えました。
こんにちは、たすくです。


今、テストも兼ねて、ブログを書いてるんですが、
最近流行りの、スキン上編集（？）をできるようにして、書いてます。

試しにキャプチャを・・・




ほら！
ってわかんないかｗｗｗ





こういうことです。

正確には、アメブロを見てる時にいきなり編集できるのではなくて、
記事を編集しているエディタ画面から「表示を確認する」をクリックしてポップアップさせると、
どちらの画面側からでもリアルタイムに編集＆プレビューできるようになるのです。


仕組みは簡単で、全然作ればいいだけなんですけどね。





ざっくりとした仕組みの図。これが全てです。
グリースモンキーは、あらかじめ指定したページにJavaScriptを仕込んでおくFirefoxのアドオンなのですが、
今回はエディタ側ではなく、プレビュー画面側にJSを仕込むことにしました。

ここまででわかった方は閉じていいです。
以下はダラダラとした説明。

window.openerで取得、更新、イベント監視

プレビュー画面はエディタの画面から新規ウインドウで立ちあがるようになっているので、
ここでエディタ画面（親）＞プレビュー画面（子）の関係が生まれます。
しかもブログ記事の画面と違い、ドメインがblog.ameba.jpでエディタ側と同じなので、
JavaScriptを使って子から親ウインドウの要素にアクセスすることができます。

addEventListenerでイベントを監視することもできちゃうので、
エディタ側からの更新は普通にkeyupイベントとかで取れちゃいます。
（jQueryを使ってるのでonメソッドですが）

最初はsetIntervalやsetTimeoutを使って定期的に取りに行く方式にしてたんですが、
だんだんブラウザが重くなっちゃったりしたのでやめました。（キューが溜まりすぎちゃったのかな）

また、アメブロのエディタは今多分3つあって、
そのうち2つにはHTMLタグ表示モードと非表示モードがあるので、全部で5パターンもあります。

実はスキンの方も今確認した感じだと新しいスキンと古いスキンで2種類あるので、
それぞれに対応するように汎用的に書かないといけないのがただただ面倒でしたｗｗ

親ウインドウのドキュメントのiframeの中のドキュメント

エディタがHTML非表示のモードだったりすると、エディタの中ってiframeが使われてるんですよね。
そうすると、ただ親ウインドウを監視してるだけだとイベントは取れません。

親ウインドウのドキュメントのiframeの中のドキュメントを取らないと。
window.opener.documentの中のhogehogeIframe.contentWindow.documentです。(iframeの取り方はお好きにどうぞ)
ここのイベントを監視してあげる。

プレビュー側にはcontenteditable=trueを仕込む

プレビュー側にはHTML5から追加された（される？）contenteditableの値をtrueにしてあげて、
編集可能にしてあげます。これ簡単だわー。
あとは普通にkeyupイベントとかが取れるので、先ほどのエディタ側からの更新の逆バージョンを
してあげればいいだけです。
欲を言えばfocusやblurも取れると嬉しかった。書き方が間違ってるのかなぁ？



はい、これで大体説明したかな？
簡単でしょ？ただめんどくさいだけです。

JavaScriptはユーザーインターフェースを構築するただの道具にすぎない

まぁ、こんな感じで、普段からくだらないJSを書いたりしてるのですが、
目的はあくまでよりよいインターフェースを研究することです。

実際に見られる自分の記事がどんな見た目になるのかって、自分はすごく気にするし、
それを確認するために都度新しいウインドウが開いちゃうのはやっぱり嫌ですよね。

「こういう風にしたら便利になるんじゃないか」っていうのを想像できたらよりよいけど、
こうやって簡単に自分の環境で試すと、意外とイケてなかったり、
また別のアイディアが浮かんできたりするものです。



ではまた。


あ、スクリプトは配布するつもりはありませーん！
僕を知ってる方で欲しい人がもしいたら、個人的にご連絡くださいｗ