簡単に言うと卒業研究でQiitaを実験台に使うことになった
Qiitaには基本的に他サイトの埋め込みとかはできない
これはもうセキュリティとか理由が色々あるんだろうけど、基本的にiframeであろうとscriptであろうとhtmlタグは勝手に消去されるはず。
そもそもこれはQiitaだけの問題じゃないし、むしろ何でもかんでも実行できる方が問題なので正しい。
ためしに
<iframe src="https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8">こういう感じで</iframe>
記述してみると、プレビュー画面の時点で存在が抹消されている。(当然)
例外
じゃあすべてのサイトが無理なのかというとそうでもない。
実例としてはCodePenとかはQiitaからも利用できる。
仕組みとしてはpタグエリア(aタグを挟む)とscriptタグを用意すると、読み込んだjsがpタグエリアに挿入してくれる感じ。
See the Pen jOMNGdM by StealthMinor (@StealthMinor) on CodePen.
このうえに
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="StealthMinor" data-slug-hash="jOMNGdM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jOMNGdM">
<span>See the Pen <a href="https://codepen.io/StealthMinor/pen/jOMNGdM">
jOMNGdM</a> by StealthMinor (<a href="https://codepen.io/StealthMinor">@StealthMinor</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
こういうコードを記述してある。
これはQiitaがCodePenに対応してjavascriptの実行を許しているからできる芸当。
当然個人が卒業研究で製作する程度のwebサービスが許可をもらうとかそんなことは無謀なので、別のやり方を用意しなければいけない。
手段
Chromeの拡張機能のユーザースクリプトでどうにかする。
まあどうにかするためには、「ここに埋め込みたいんだな」っていう目印を残さないといけないので、そのための実験記事がこれになる。
候補としては
[](
Markdownのコメントアウト
)
とか、
<!--
htmlのコメントアウト
-->
<!--
htmlのコメントアウト
-->
とか。
あと
このpタグが生きてるか
とか。どれがソース内に生き残るかをこの記事の投稿後に確認して、やりやすい方式を採用したい。
結果
・Markdownのコメントアウト
ソースコードには影も形もない。ダメ。
・htmlコメントアウト
見るからに見えてる。まさに丸見え。
・pタグ
IDをつけてみたんだけど見事に消える。無理。
追加策
どうにかしてソース内には残さないといけないので、別の方法を考えることにした。
たぶん目に見える形に残さずソースに残すのはQiitaのシステムでは無理なんじゃないかなと思ったので、できるだけ邪魔にならん方法でやる。
普通にリンクを張る
こんな感じ。
リンク自体は生きてると思うから、これを置換すればいいんじゃないか？(idが残ってなかったらかなりめんどくさい)
折り畳み
`Markdownの折り畳み。めんどくさい。
なにしろここにコードを書くわけにもいかないし…
書いててなんだが
これは何も変わらないのでは？
記事を読む以上邪魔にならないということだけしか今回の利点が見当たらない。
\
これぐらい？
現状はリンク張り優先で考えてみよう……
結果(2)
aタグは残るんだが、id属性もclass属性も抹消される。
querySelectorでhrefのURLを捕まえて、特定URLだけ処理するとかができれば可能かも。
あともうひとつ、実験用にローカルホストへのリンクが機能するかだけ試してみる。
ふつうはエラーを吐くと思う。
結果(3)
どうやらlocalhost指定のhrefは抹消されるらしい。
実際にページが存在する場合はいいんだが、デバッグはとても面倒になりそう。