Qiita:Team は <script> や <iframe> が使える #Qiita

Qiita:Team は特定されたユーザしか使わない見れないせいか、使える要素周りのポリシーが緩い。 (via @Kakakakakku)

これにより、普通に Qiita 使っている時とはまたさらに違うことができる。

slideshare や Google Slides を貼り付ける

<iframe> が貼れるので、スライド貼ることができる。

テキストベースでグラフの作成

mdaines/viz.js と、ちょっとした <script> 要素を作るだけで、ちょっとした DSL 書くだけで有向グラフ／無向グラフが作れる。

私の場合は Qiita:Team のエディタでこう書くと:

<script type="text/dot">
digraph G {
 a -> b -> c;
 a -> c;
}
</script>

Qiita:Team のページではこうなるスクリプトを書いた:

↑では画像ですが、実際は svg で出力することになるかも。

同様に、js-sequence-diagrams を使えばシーケンス図も書ける。

また、テキストベースでグラフが掛けると、diff が取りやすいメリットがある。

連絡先まとめ記事に vcard ダウンロードボタン

メンバーの連絡先まとめている記事をみてピンときてスクリプトを書いた。

記事内の連絡先をスクレイピングして vCard 形式のテキストデータを data スキームでダウンロードできるスクリプト。

スクリプトからダウンロードさせるには、こんなコードを書けば良い:

// foo.txt をダウンロード
var data = '動的に作ったコンテンツ';
download(data, 'foo.txt');

// ブラウザに data を fineName としてダウンロードさせる。
// Google Chrome でのみ動作確認済み
function download(data, fileName) {
  var a = document.createElement('a');
  a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(text);
  a.download = fileName;
  click(a);
}
function click(elem) {
  var e = new Event('click');
  elem.dispatchEvent(e);
}

ただ、これでダウンロードできる vCard は UTF-8 なので、実際に携帯端末や PC に取り込むのには文字コードの変換が必要になる。

辛い点

エディタで <button> や <textarea> を書いても、記事中では <p> に置換されてしまうので、JavaScript で動的に生成する必要がある。
イベントリスナーでキャッチしていない例外が起きても、コンソールに全く表示されない。
イベントリスナーでの console.log などのコンソール出力も潰されている。
- 回避策としては、親のを使う: var log = console.__proto__.log.bind(console);
プレビューでは <script> も <iframe> も処理してくれないので、公開する前にどう見えるかチェックしたいときは下書き保存する。