Qiitaの目次に、本文中にない任意の文字列を表示させる裏技(もしかしたら仕様かも)

<!--
#広告
#ブログやってます！！
#ぜひ見に来てね！！
#https://912.hateblo.jp/
-->


# 1. 内容

qiitaに投降した記事って、右サイドに自動的に見出しを集めた目次が生成されますよね。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319477/846fe5fe-35b9-2507-14e5-1e76f88d13ba.png)

ここに、任意の文字列を表示させる裏技があります。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319477/65d6150b-1a59-435d-930c-f2cc53035560.png)

↑こんな感じで。


やり方は簡単です。

```md:qiitaのmd

<!--
#任意のテキスト
-->
```

ってやるだけ。

# 2. どうしてこんなことできるの？chromeの解析ツールで調べようとしてみた(ごめんなさい結論は出ませんでした)

結論が出なかったので、あまり読んでも役に立たないと思います。
ただ、chromeのページ解析ツール・javascriptデバガの使い方の参考にはなると思うので、興味があればぜひお読みください

chromeのブラウザで、検証ツールを開いてみた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319477/33501e8e-e958-f966-0f9f-cab7604bdccf.png)


こんな感じで、`<li>`タグによるリストによって、qiitaの目次は成形されている。・・・①
とりあえず、リストの内容の一部である部分文字列`<a href="#0-%E5%88%9D%E3%82%81%E3%81%AB`をコピーしておいた。
次に「ソースの表示」をして、コピーした文字列を`ctrl+f`で検索すると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319477/bcf6b1a8-ac80-47ac-b69d-3e5a51ff3da3.png)

あれ？`<li>`タグになってない!?
他の所にあるのかな？いやでも検索結果は1件だけだしなあ・・・

この事実から、`<script>`タグで目次の`<li>`タグが生成されたのではないかと、(消去法により)推測できます。

再び検証ツールに戻って、スクリプトにブレークポイントを設置してリロードし、どのスクリプトが目次を生成しているのか調べてみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319477/0cbccff9-afea-c0e1-120a-df90c3ff75bc.png)

上の図で、①の通りSourcesタブをクリックし、②のようにソース一覧が表示されるので、その中からスクリプトを探すこともできます。
しかしクラウドマークが大量に出てきて、まさに「雲をつかむような話」です。(でもmicroad.jpとか、analytics.twitter.comなど、広告やアナライズに関するものがほとんどなので、ちょっと考えれば見なくていいソースがほとんどですので、見るべきソースは実はそんなに多くないのかもしれません)

まあ、これだけソースが多いので、どのソースが目次を生成しているのか、見当もつきません。
そのような場合、networkタブを見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319477/8a09bf06-b499-32d6-51e4-5c54ff66e53d.png)
(実際には、毎回順番が前後したりするので、読む順番というより、各サーバが応答を返してきた順番のようですね)

あとは、二分法で、スクリプトを特定していくのが早いでしょう。

適当に真ん中らへんのスクリプトをマウスオーバします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319477/c122b2fe-7e31-8a37-0c28-c28c0e5ed410.png)

出てきたアドレス情報を元に、Sourcesタブからソースを選び、最初のコードにブレークポイントを設置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319477/ebb1cb15-c36a-0075-e799-b28b8bc87556.png)

そしてリロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319477/66c0ddfe-3620-1582-0619-9bc6d4ccbd04.png)

目次が表示されてしまいましたね。
これはつまり、目次はfontdata.jsより前に読まれるソースが成形しているということを示します。

そのため、Networkタブに戻り、もっと前のスクリプトを選んで、同じ操作を繰り返します。
そうすれば、(対数)回目で、ソースを特定できるはずです。

ファイルを特定したら、デバッガのステップアウトやステップオーバーを使って、行を具体的に特定することもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319477/f09fd9e8-db0e-13a8-a287-48a2e52840b6.png)

と、ここまで追いかけてみましたが、これ以上追跡しようとしてもパソコンがフリーズしてしまい、どうにもできなかったのでここであきらめることとします。

ちなみにこの`v3-bundle-a4...`というのはhttps://frtn.socdm.com/tags/insight.js から呼ばれていて、
しかもhttps://frtn.socdm.com/tags/insight.js はqiitaのコードに直接記述されています。
frtn socdmとかでググってみると、[こんなページ](https://btonews.blog.fc2.com/blog-entry-410.html)が見つかりました。
どうやらscaleoutという広告会社みたいです。
この会社のサービスで、見出し抽出とかでもしてるのかな。マーケティングに使えそうなキーワードを拾うとか？
いずれにせよソースが難読化されているため、手動ではこれ以上解析できませんでした。

そのため、無根拠の憶測となってしまうのですが、おそらく見出しを抽出するアルゴリズム(Qiitaのものなのか、scaleoutのものなのかは知りません)が`<!-- -->`によるコメントアウトを読んでいないんだと思います。



#3. 参考
https://ics.media/entry/190517/