RSSが衰退し、SNSが繁栄する時代に改めて考えたい、ニュースリリースのマークアップ

HTMLにおける id 属性は何のために付与するのでしょうか。良くあるケースとしてはこんなところでしょうか。

• 長いページの特定の部分へリンクするため（いわゆるページ内リンクとか）
• 要素同士の紐付けのため（ラジオボタンの <input> と <label> とか）
• CSSによるスタイル付けのため

これらはいずれも制作側の視点で付けるものですが、ユーザー側の視点でも考える必要があります。ニュースのチェックを自動化したいと考えるユーザーは何をするか。「トップページを定期的に巡回し、レスポンスデータ（HTML）を解析して、diffを取って差分のみを抽出すればいい」と考えるのは自然なことでしょう。フィードがやっているのはまさにそういうことですから。

その、HTMLの解析を行うにあたり、最初に必要になるのが「肝心のニュース情報はトップページのどこにあるのか」という検索です。ただでさえ、トップページはさまざまな情報が混じり合っているものですから、まずはページの中からニュースリリースの場所を特定する必要があります。そこで <div id="news"> のようにIDが設定されていたらどんなにありがたいことか。

欲を言えば、一つ一つのエントリーにもIDがあるとなお良しです。私が理想的と考えるマークアップはこれ。

<div class="news_area" id="news">
  <h2 class="news_heading">ニュースリリース</h2>
  <ul class="news_entries">
    <li class="news_entry" id="news_20170816"><a href="news/20170816">8月16日のニュース</a></li>
    <li class="news_entry" id="news_20170815"><a href="news/20170815">8月15日のニュース</a></li>
  </ul>
</div>

このようにすれば、 XPath で //*[@id="news"]/*[@class="news_entries"]/*[@class="news_entry"] とした上で、それぞれのエントリーのIDを取得して、DBに格納する際のテーブルの主キーに設定することが可能です。

もしブラウザで閲覧されることだけを考えていると、たぶんこういうマークアップをしてしまうと思います。

<div class="news_area">
  <h2 class="news_heading">ニュースリリース</h2>
  <ul class="news_entries">
    <li class="news_entry"><a href="news/20170816">8月16日のニュース</a></li>
    <li class="news_entry"><a href="news/20170815">8月15日のニュース</a></li>
  </ul>
</div>

これはアクセシビリティの観点から改善の余地があるマークアップです。アクセシビリティというと、視覚障害者がスクリーンリーダーで聞けるようにとか、肢体不自由者が（マウスでなく）キーボードで操作できるように、という面が多く語られますが、「ユーザーがHTMLを活用しにくい」という視点で見ると、「IDくらい付けたら?」と思ってしまいます。

IDが付いているかいないかというだけで、両者の使い勝手は雲泥の差なのです。もっとも、ニュース部分を自動生成しているならともかく、手運用でHTML更新する場合、各エントリーにミスなくユニークなIDを付与するのは大変ですから、IDの設定はニュースエリアの大枠（上記マークアップ例では id="news"）のみにした方がいいでしょう。手運用を想定した現実的なマークアップはこれ。

<div class="news_area" id="news">
  <h2 class="news_heading">ニュースリリース</h2>
  <ul class="news_entries">
    <li class="news_entry"><a href="news/20170816">8月16日のニュース</a></li>
    <li class="news_entry"><a href="news/20170815">8月15日のニュース</a></li>
  </ul>
</div>

ちなみに、株式会社ピクセルグリッド(www.pxgrid.com)のトップページを見ると、ニュース&トピックスのところだけ id="news" が付与されているのが分かります。CSSで #news が使用されている様子はありませんし、もしかしたらユーザーの自由な活用を考慮して付けたものなのかなあと想像しています（ぜんぜん違う理由だったらすみません）。

ふぅ、IDを付与すべきという話だけでだいぶ長くなってしまいました。次へ進みましょう。

大抵、ニュースリリースというのはトップページにはタイトルのみを表示し、詳細ページへのリンクが貼られます。しかし「サイトをリニューアルしました。」等の一文で済む短い告知の時、詳細ページがないケースもあります。情報の分量だけを考えれば詳細ページが不要という考えも一理あるのですが、ユーザーの行動を考えれば分量に関わらず作るべきです。

例えば、オンラインゲームのサイトで「8月16日 20:00〜21:00の間はメンテナンスを行います。」という情報を伝えたいとします。たった一文ですが、もし詳細ページがなくトップページのみに情報が掲載されていたら。SNSでの会話を想定してみます。

• ユーザーA「今日の20:00からメンテだってさ。」
• ユーザーB「@userA まじで。それどこ情報?」
• ユーザーA「@userB 公式サイトに載ってるよ。 https://example.com/」

これが非現実的と言うことがお分かりでしょうか。会話の最後にユーザーAはトップページのURLを載せています。情報がトップページにしか書かれていないのですから、そうするしかないわけです。しかし、ユーザーBは情報量が満載のトップページから当該のお知らせを探さなくてはならないのです。仮に「ページの下の方」という位置が分かっていたとしても、外出先の地下道で電波状態が悪かったら、大量の画像ロードでページがなかなか表示されずイライラしてしまうかもしれません。

そういう不便の対策として、最近ですとURLを載せずに画面キャプチャーを撮る風潮があります。キャプチャーなら、ページがどんなに長くても当該部分だけをピックアップするのは簡単ですからね。でも、画像（のみ）で情報を伝えるというのは良くない方法です。EメールやDMのように1対1の関係ならまだいいのですが、不特定多数が閲覧する状況下ではすべての人が画像を見られるとは限らないからです。

• ユーザーA「今日の20:00からメンテだってさ。」
• ユーザーB「@userA まじで。それどこ情報?」
• ユーザーA「@userB 公式サイトに載ってるよ。 pic.twitter.com/HOGEHOGE」
• ユーザーC（全盲）「@userA @userB 見えない……orz」

一方、詳細ページがあれば、そのどちらも解消できます。

• ユーザーA「今日の20:00からメンテだってさ。」
• ユーザーB「@userA まじで。それどこ情報?」
• ユーザーA「@userB 公式サイトに載ってるよ。 https://example.com/maintenance/20170816」

専用のページを作る必要があるかというのは、情報量から決めるのではなく「固有のURLを割り当てるメリットがあるか」という面から判断するのが良いのではないでしょうか。

• 厳密に言うと、必ずしも専用のページを作らなくともIDさえ振ればフラグメント識別子で固有のURLを設定することはできますが、ニュースや新着情報の場合は専用ページにした方が良いと思います。