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>
も処理してくれないので、公開する前にどう見えるかチェックしたいときは下書き保存する。