アメブロにGistのソースコードを貼り付る 3人目の挑戦者

アメブロにGistのソースコードを貼ろうとして、躓く。
禁止タグ厳しいね。

ググってみれば、案の定、挑戦者たちの足跡が見つかる。

一人目　AmebloにGistのソースコードを貼り付けたい！(かなり妥協)、AmebloにGistのソースコードを貼り付けたい！(リベンジ)

二人目　アメブロに Gist のソースコードを貼付けたい


一人目の挑戦者は、jsファイルから、Gistコードのhtmlタグを静的に生成するWebサービスを作った。
二人目の挑戦者は、フリープラグイン化して、divタグとid属性から、動的にブログ中にGistコードを埋め込めるようにした。

凄い！どんどん楽になっている。
偉大な先人たちに感謝を！
が、
2013年現在、悲しいかな、Gistサービスの仕様変更で、どちらの手段も上手くいかない。
(一人目の方法なら、css周りをごにょごにょすればなんとか使えるけど・・・でも・・・)
二人目の方法はかなり便利だが、古いGistを表示しようとするといつまでたっても"Loading now…"・・・。
何か修正が必要だ。

で、三人目の挑戦者であるさたなべは、二人目のやり方を踏襲をしてフリープラグインを制作した。

---

使い方

フリープラグインを追加する

次のように、フリープラグインを追加する。

ここ

上3つのscriptタグはjqueryのロード。
何かごちゃごちゃしているのは、アメブロが標準で読み込む古いjqueryと競合しないようにするためとか。
で、4つめのscriptタグが今回用意したプラグイン。

divタグを記事へ追加する

プラグインを追加したら、後は記事へのdivタグを埋め込むだけ。

ここ

こんな感じ。
divタグのクラスをg2abにして、
中身に url@ 以後に表示したいGistのURLを書き込めばいい。
(現状、作りが甘いので、コメントとか、余計なものは入れないほうがいい)
url@の記述をやめて、data-url属性を利用する形式に変更しました。

ﾄﾞﾔｧ

きっとしばらくは上手くGistを表示できるはず。
鬼のようにcssを弄る日々よ、さよなら！

みんなでコードを貼り付けながらIT(意識高い)系記事をどんどん書いていこう！

ちなみに

限定記事とか下書きじゃ動かないとかの、注意点諸々は別にここで書かなくてもいいよね・・・？

あとGitに詳しい人からは、
「なんでforkしたプロジェクトで偉そうに語ってるんだよ」とか言われてしまいそうだけど、 そのあたりの制作秘話についてはまた今度。