random.tagucch.dev

技術とかの雑なToday I Learnedメモ

Wikiのことを学んだ日記
Wiki

日記

友人たちとDiscordで集まってワイワイ技術的なことを話したり個人開発の進捗を話したりする会を先週くらいから始めた。

今日はWikipediaに関する簡単なアプリケーションを作るにあたって、自分の画面を共有しながら友人たちとワイワイWikipediaのことを調べた。

WikipediaのHTMLをdevtoolsで覗くと、これってセマンティックなのか？と思うような構造だった。

例として幅優先探索 - WikipediaのページのHTMLを以下に貼ると、

<!-- 省略 -->
<div class="mw-content-ltr mw-parser-output" lang="ja" dir="ltr">
  <!-- 省略 -->
  <div class="pathnavbox">
    <a href="/wiki/%E6%8E%A2%E7%B4%A2" title="探索">探索</a> >
    <b>幅優先探索</b>
  </div>
  <!-- 省略 -->
  <p>
    <b>幅優先探索</b>（はばゆうせんたんさく、
    <a href="/wiki/%E8%8B%B1%E8%AA%9E" title="英語">英</a>:
    <span lang="en">breadth first search</span>）は
    <a href="/wiki/%E3%82%B0%E3%83%A9%E3%83%95%E7%90%86%E8%AB%96" title="グラフ理論">グラフ理論</a>(
    <a href="https://en.wikipedia.org/wiki/graph_theory" class="extiw" title="en:graph theory">Graph theory</a>)において
    <a href="/wiki/%E6%9C%A8%E6%A7%8B%E9%80%A0_(%E3%83%87%E3%83%BC%E3%82%BF%E6%A7%8B%E9%80%A0)" title="木構造 (データ構造)">木構造</a>(
    <a href="https://en.wikipedia.org/wiki/tree_structure" class="extiw" title="en:tree structure">tree structure</a>)や
    <a href="/wiki/%E3%82%B0%E3%83%A9%E3%83%95_(%E3%83%87%E3%83%BC%E3%82%BF%E6%A7%8B%E9%80%A0)" title="グラフ (データ構造)">グラフ</a>(
    <a href="https://en.wikipedia.org/wiki/graph_(data_structure)" class="extiw" title="en:graph (data structure)">graph</a>)の
    <a href="/wiki/%E6%8E%A2%E7%B4%A2%E7%9A%84%E7%A0%94%E7%A9%B6" title="探索的研究">探索</a>に用いられる
    <a href="/wiki/%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0" title="アルゴリズム">アルゴリズム</a>。アルゴリズムは根ノードで始まり隣接した全てのノードを探索する。それからこれらの最も近いノードのそれぞれに対して同様のことを繰り返して探索対象ノードをみつける。「
    <b>横型探索</b>」とも言われる。</p>
  <p>幅優先探索は解を探すために、グラフの全てのノードを網羅的に展開・検査する。
    <a href="/wiki/%E6%9C%80%E8%89%AF%E5%84%AA%E5%85%88%E6%8E%A2%E7%B4%A2" title="最良優先探索">最良優先探索</a>とは異なり、ノード探索に
    <a href="/wiki/%E3%83%92%E3%83%A5%E3%83%BC%E3%83%AA%E3%82%B9%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9" class="mw-redirect" title="ヒューリスティクス">ヒューリスティクス</a>を使わずに、グラフ全体を目的のノードがみつかるまで、目的のノードに接近しているかどうかなどは考慮せず探索する。</p>
  <meta property="mw:PageProp/toc">
  <div class="mw-heading mw-heading2">
    <h2 id="アルゴリズム">
      <span id=".E3.82.A2.E3.83.AB.E3.82.B4.E3.83.AA.E3.82.BA.E3.83.A0">
      </span>アルゴリズム</h2>
    <span class="mw-editsection">
      <span class="mw-editsection-bracket">[</span>
      <a href="/w/index.php?title=%E5%B9%85%E5%84%AA%E5%85%88%E6%8E%A2%E7%B4%A2&action=edit§ion=1" title="節を編集: アルゴリズム">
        <span>編集</span>
      </a>
      <span class="mw-editsection-bracket">]</span>
    </span>
  </div>
  <!-- 省略 -->
</div>

上記のように、セクションごとに分けられるのではなく、コンテンツのすべての要素が同じ階層の兄弟要素として置かれている。

個人的には、<div class="mw-heading mw-heading2">をセクションとして、内容をその子要素に配置するほうがセマンティックなのかな？と思ったりした。有識者の意見を聞きたい。

そして、<meta property="mw:PageProp/toc">が何をしているのか全然わからなかったのでChatGPTに聞いてみた。

https://chatgpt.com/share/6904d8bc-5234-8005-9311-5a707093a492

ChatGPTによると、MediaWiki/Parsoidというツールの仕様らしい。

そもそもWikipediaがMediaWiki MediaWiki/ja - MediaWiki というサービスで作られていることを知った。

Parsoidというのが、MediaWikiで使われているVisualEditorに対応するために必要なライブラリで、それの仕様として独自のpropertyを持つmetaタグで利用しているということっぽい。なるほど〜。

その他にも、「そういえばSplatoon3 wikiってMediaWikiで作られているのかな？」と思って見に行ったらWIKIWIKIというサービスで作られていることを知ったり、無料 レンタル WIKI サービス WIKIWIKIはウキウキと読むことを知ったり、アットウィキとWIKIWIKIは同列に語っていいのか？(MECEになっているのか？)(MECEの使い方これで合ってるのか？)という疑問が出たり、W3Cのページを見に行ったりするなどの学びがあり、面白かった。

← Back To Home