00:04
はい、3月27日月曜日ですね。ちょうど朝9時13分になりました。相変わらず夜更かしからの寝坊で、スタート遅くなってしまいました。ごめんなさい。はい、おはようございます。眠いのkkeethこと桑原です。ではでは、本日も朝から始めていきたいと思います。
本日はですね、タイトル読みます。「The need for a more semantic web」ということで、なんかよりセマンティックなウェブの必要性みたいなお話ですね。
の記事を読んでいこうと思っています。ちょっとウェブの歴史もざっと見ながら読む感じなので、多分今日で終わる気はしますけど、ちょっと分からないですね。進捗次第な感じはありますので。じゃあ早速入っていきたいと思います。はい、じゃあ行きましょう。
ウェブは長い道のりを歩んできました。初期の静的なページから反応性の進化を経て、全人類のための最大の知識プールへと一応向かっております。
ウェブの小さな歴史というところですけど、一般にウェブと呼ばれる、いわゆるワールドワイドウェブですね。WWWっていうのは、1989年にCRNのTim Berners-Leeによって発明されました。
画像とか映像、音楽など文章やその他のウェブリソースにインターネット上でアクセスできるようにした情報システムになります。
私自身ウェブの初期のユーザーであり、様々な世代やパラダイムを経て、変容していくのを目の当たりにしました。
私はこれをウェブ1.0、ウェブ2.0、ウェブ3.0と呼ぶことに一応しています。ここではそれぞれの時代の特徴を探ってみましょう。
まずはウェブ1.0です。ウェブ1.0に語るときについてですね、私はウェブの初期の状態を指しています。
実質的に標準もなくインタラクティブ性もない状態になります。当時のウェブページというのは完全に静的で、全てHTML、当時は標準の定義が不十分だったということですけど、で書かれていました。
CSSは存在しませんでした。後に1996年に作られましたと。CSSは1996年なんですね。
もうすぐ30年近くの年齢を果たす感じになるんですね。ちなみにJavaScriptも1995年に登場したんですね。
こちらも前例がなかったと。当時は静的で一般的なウェブの時代でしたと。これが史上初のウェブサイトの姿ですというので、一応キャプチャーバッドが貼られてますけど。
ウェブ2.0ですね。CSSはJavaScriptの誕生によって世界というのはウェブの新しい時代に入りました。
ウェブ2.0ですと。このウェブはより多くの色を提供しました。ウェブというのはインタラクティブ性を提供し始めたということですね。
で、突如として構造、いわゆるHTML側と外観、CSS側の分離が意識されるようになりましたと。まあそりゃそうだよね。
それらの分離のなどのHTML要素が非推奨になったと。いくつかのHTML要素が非推奨になりましたということですね。
はい、Such as a ホゲホゲみたいな感じになってますけど。本文の方ではちゃんと
HTMLが展開されてるんですけど、翻訳側の方ではHTMLがエスケープされて消えちゃってますけど、例えば
フォントタグとかマーキータグとかですかね。もしくはストロングタグなどなど、この辺のタグですね。
03:01
これらっていうものは、HTML要素というのは非推奨となりましたと。
その辺は基本的にCSSでスタイリングをちゃんと担当するものがいるので、HTMLで書く必要なくなったということですね。
昔はフォントタグとかしかありましたね。マーキータグも結構皆さん使ってたという印象があると思いますけど。
これら非推奨になり、CSSとJavaScriptに置き換えられました。
Web 2.0では有名なHTML、いやXML、HTTPリクエストですね、XHRですけど、これとAJAXの技術も誕生しましたと。
ページから離れて移動することなく、ウェブページ全体またはその一部を書き換えることができるようになって、
今日のSPAとして知られるようになった単一ページアプリケーションの感覚で生み出しましたと。
はい、だいぶ前ですね。2.0でそれが生み出されたんですね。
で、HTML側では以下のようないくつかのセマンティック属性の出現も見られましたと。
いくつかのっていうのをもうちょっかい見ますと、
アーティクルタグ、セクションタグ、アサイドタグですね、これらのものが生まれて、セマンティックな属性が見出されたんですね。
最終的に2008年にHTML5がリリースされ、HTML5って2008年なの?もう15年とか経つの?
はっはっは、早っ。はい、多くのものの中でマイクロデータのサポートというのが追加されました。
マイクロデータについては後で説明するのでこれを覚えておいてください。
マイクロデータっていうものの存在ありました?もう完全に忘れてました。
そう言われれば。
一度勉強したけどあんまり意識していなくて、大変に申し訳ないんですけどね。
はい、そこで戻ります。
ウェブ2.0の台頭とともにワールドワイドウェブで公開されているコンテンツが増加しました。
突然ウェブページを持つことがより簡単に、より安く、より身近になってきたんですよと。
人々は、そして企業はウェブプレゼンツに関心を持つようになりましたと。
そしてウェブが知識の場となりました。フィールドだったんですね。
この時代にはブログやフォーラムといったコンセプトが生まれるようになりました。
2001年、ウィキペディアが誕生しました。
ウィキペディアも2001年なんですね。
そうなんや。
で、コンテンツの量が増えるにつれ、コンテンツを探すことが必要になってきました。
1998年、グーグルが誕生し、その後今日に至るまで検索エンジンの主流となりましたということですね。
グーグルも1998年なんですね。
ということはもう25年目になるんですか。
いやー、グーグルも長いですね。
四半世紀、グーグルって生きてるんですね。
いや、すごいな。
Web 2.0っていうのは素晴らしい時代でした。
ウェブページの見せ方に革命を起こし、ウェブの使われ方にも革命を起こした時代ですと。
しかしあることがきっかけで、Web 2.0の時代は突然終わりを告げまして、Web 3.0がこの街の新しい子供となりましたと。
はい、本当に表現がいつも素敵だなと思いますね。
Web 3.0ですけど、Web 3.0という言葉を聞くと、
Web 3.0とかいう言葉も世間で広められてますけど、一旦この記事ではWeb 3.0ですね。
こちらはですね、多くの人は分散型ウェブとかビットコイン、NFT、ブロックチェーンなどを思い浮かべるでしょうと。
06:00
しかし私の考えでは、それらの技術はウェブとは無縁のものになります。
ウェブは昔も今も分散型システムです。
もともとウェブってのは分散してますよとですね。
確かに少数の大企業によってコントロールされています。
しかし私がサーバーを購入し、自宅のラックに置き、インターネットに接続して、そこからブログを提供することを禁じるものではないですよと。
私にとってWeb 3.0とはセマンティックウェブの誕生を意味します。
ほう、よりセマンティックって意味かな。
一応Web 2.0でもセマンティックなタグって登場しましたからね。
Facebookの人気がピークに達した頃、ウェブはウェブページのものではなくなり、モノのモノへと変化してきました。
ウェブページ限定じゃなくてモノにも移ったとですね。いわゆるIoT的なものかな。
はい、私が、これはアカウントですね。
atskwe357っていうアカウントですけど。
こちらを検索するとき、この曖昧なフレーズや単語を含むウェブページを見つけたいわけではもちろんありません。
そりゃそうですね、確かに。
このハンドルネームの後ろにいる人、つまり私ですけど、を探したいんですと。
で、ファイトクラブっていうのを検索すると、デイビッド・フィンカーの映画を見つけたいとか、
パンケーキの作り方という検索後は、理想的にはパンケーキのレシピの結果をもたらすはずですよね。
はい、そうですね。
ウェブ3.0はつまりモノになります。
もはやウェブページやコンテンツのことではありません。
人、映画、レシピ、チュートリアル、場所、イベント、書籍などなど、あらゆるものですけど。
はい、そしてウェブ3.0の現状には一つの欠点がありますと。
はい、ここが多分今回の本題に入る話なのかなと思いますね。
で、続いてThe Birth of the Semantic Webですね。
いきましょう。
セマンティックウェブの誕生ですけど、以前にも述べたようにウェブ2.0時代にHTMLというのはより意味論的にすることを目的としたいくつかの新しい要素を得ました。
まあ、タグですね。
以下にその一部を列挙してみます。
はい、しかし、以下に列挙していきますと言ってますけど、その循環からHTMLタグがやはりエスケープされますね。
例えば、divタグとかarticleタグとかspanタグみたいなのがいっぱいありますけど。
しかしですね、divバーサススパンタグですね、というものがあったりしますけど、この辺の違いは何なのかというか疑問に思ったことないんでしょうと。
はいはいはい。
で、そんな、例えばですけど、spanタグとかdivタグというのがいわゆるバーサスによく出ているものですね。
それらいろんなタグがありますけど、divタグとかarticleタグもそう、asideタグもそうですけど、これらの違いは何ですかみたいなところですね。
で、spanとdivというのはものすごいシンプルです。答えはシンプルですよね。
最初の方はブロックタグじゃないですよ。で、divタグというのはブロックタグですよねという話をしています。
その辺はまあ確かにわかりやすくなってますよね。ブロックタグじゃないってことは、文を崩さずに文の中に組み込むことができる、まあspanタグの使い方ですね。
はい、しかしdivタグのような他の要素っていうのは割とブロックで結構崩すこともあり得ますと。
けどまあほとんどのですね、articleとかヘッダーみたいなタグですけど、まあみたいなタグっていうのは、いわゆる
09:04
divタグとはちょっと異なって、aタグに近いような動きをするみたいなことを書いてますね。
で、ちょっと戻りますね。ウェブをより意味のあるものにするのに役立つという一つの大きな役割を果たしているというのはまあそれはそうですね。
で、ウェブの利用の増加に伴いウェブコンテンツの生産というのも増加しました。そして後者というのは、検索とインデックス作成機能の強化に対する重要というのを見出しましたと。
検索機能のためにはインデックスが重要ですよね。これらのセマンティックHTML要素っていうのは検索エンジンがコンテンツを分類するのに役立ちます。
クローラーが要素、その中のテキストが実際に記事であることを認識してますとか、それをジェネリックスと比較すると。
これはコンテンツの性質に関する情報を提供しないし、記事にすることもできますが黙示にすることもできますと。
というところで、ではでは続いていくとセマンティックセミスタンダードですね。
セミなスタンダードですね。では続いていきます。新しく確立された標準と同様に誰かが最初に標準を作りました。
順標準を作りました。セミスタンダードですね。そして今ウェブ3.0に起きていることがこれですと。
コンテンツを分類するためのメタ属性ですね。 もしくはOGメタもしくはアトリビュースですね。
これを最初に作ったのはフェイスブックだともちろん思いますけど、OG属性を持つが正しいメタタグを持つウェブページというのは
OGメタ属性を解析する人にセマンティックな情報を提供することができます。
サイト名だったり説明文だったり関連画像など情報を提供することもできます。
OG属性というのはコンテンツ共有の役割になっています。
フェイスブックやリンクトインにリンクを貼ると、それらのプラットフォームはOG属性を紹介してウェブページのタイトルとか説明文、カバー画像というのを抽出していきます。
しかしメタ属性にも限界はあります。そこで他のフォーマットが作られました。
その最初のものがいわゆるRDFですね。リソースディスクリプションフレームワークだと思います。
RDF僕すいません。初めて知りました。
これはあまり普及せず、JSON-LDとかマイクロデータといった新しい順標準の土台として使うようになりました。
この2つのフォーマットは異なるアプローチを取っていますので、まずマイクロデータのところからですね。
マイクロデータというのは既存のHTML要素を拡張することを目的としています。
マイクロデータを使用することで任意のHTML要素に特別な属性のセットを提供することができます。
イベント、製品、レビューなどあらかじめ提起されたスキーマと組み合わせることで、
ウェブページ上のコンテンツの性質についてクローラーに追加のコンテキストを提供することができます。
マイクロデータを使ったジオロケーションというのが次のようになります。
ディブのアイテムプロップという属性をつけておいて、イコールジオですね。
というのを指定しておく。アイテムスコープというのをつけておいて、アイテムタイプはURLですね。
そのジオロケーションのURLを出してあげて、その中にスパンタグで別のデータをつけて、アイテムプロップで2つぐらいなんか属性をつけておくと。
最後ディブタグで閉じますみたいな使い方をする。
12:01
ソースコードを音読しているのでちょっとわかりづらいかもしれないので、記事を見ていただけたらいいなと思います。
こんな感じの使い方をしますとジオロケーションですね。
興味深いことに、MDLによるとマイクロデータのサポートはFirefoxの49から削除されるのですね。
そうなんや。
WikipediaによるとマイクロデータDOM APIのサポートしている主要なブラウザーはもう今ないんですね。
Googleの開発者ポータルによるとGoogleは今でもマイクロデータを大切にして解析もしているということですね。
Googleのみが今はサポートしているんですかね。
ちなみに一応MDLのリンクが貼られているので、MDLのリンクを見ていきますと、
これはMDLのマイクロデータのリンクですね。
参考な例ですね。
エグザンプルがちゃんと貼られていまして、同じようにアイテムスコープとかアイテムタイプ、もしくはアイテムプロップというのを指定してマイクロデータというのを構成していくというものですね。
ローカライゼーションであったりとかグローバルアトリビュートというのがあったりするので、この辺の仕様を見てみてください。
ただ、ブラウザーサポートのところですけれども、このページではブラウザーサポートは載ってないですね。
あれ珍しいですね。
基本的には各ページのところ、機能においては、ページの一番下の方にブラウザーサポートが書いてあるんですけど、ブラウザーコンパティビリティですけど、
Supported in Firefox 16、Removed in Firefox 49と言ってますね。
これしか書いてないんですね。
なるほど。
ってことはもうCan I Use見た方が良いかもしれないですね。
Can I Use見てみて、マイクロデータ。
グッと見ますと、マイクロデータAPIはもうNot Supportedで、Can I Useですら画像が出てこないですね。
そんなものサポートしませんで終わってますね。
けどGoogleは一応サポートしてるんですね。
では続けていきましょうか。
続いてはマイクロフォーマットですね。
マイクロデータが普及し始めた頃、マイクロフォーマッツと呼ばれる別の順標準規格が作られましたと。
マイクロフォーマッツはマイクロデータと同様のアプローチをとりますけど、
物事を分類するための優れたスキーマセット、常軌のイベントですね。
とか製品レビューのようなものに頼るのではなくて、カスタムCSSクラスを定義するようになりました。
つまり地理的な位置は次のようにマークされますというところで、
HTMLのスパンタグのクラスイコール、H-ジオみたいな感じですね。
でまたその中に、スパンタグの中にさらにスパンタグ2つ挟むんですね。
ほほーん。
まあまあこれはいいとして。
クラスのP-LATITUDEとP-LONGITUDEですね。
緯度と経度ですけど。
っていうのを属性につけておいて指定すると。
はいはい。
でマイクロフォーマッツというのを決めていくという感じですね。
ほほーん。
まあこんな感じですね。
でまあこのアプローチではいくつかの問題が発生しました。
まず物に対するスキーマの定義がなかったし、
クローラーすべてのH-クラスと対応するP-クラスを実装しなければならないと。
ああそうね。
確かに。
マイクロフォーマッツを拡張することは事実上不可能でしたと。
さらにコンテンツを意味的に分類するためにCSFクラスを使用することは間違っているような感じであります。
確かにね。
15:00
まあそれだったら普通にCSSの方が良いんじゃないって気はしますし、
クラスの方に意味をつける方が全然いいと思っているので。
まあそっちの方がむしろWeb2.0でみんなCSSを使っていたので。
そっちに対する方が僕らとしてでも互換性だというか、
対応しやすいなと思っちゃうのでそうかもしれないですね。
では続いてJSON-LDですね。
最後にJSON-LDについてですと。
JSON-LDもセマンティックウェブのフォーマットにはなりますけど、
HTMLの要素属性とかCSSクラスのような既存の監視を利用するのではなくて、
JSON-LDは意味情報全体をスクリプトタグにエンコードすることに重きを置いています。
私のブラグのトップページではこのように表示されます。
一応この人のトップページでは、
JSON-LDで導入しているんですね。
で、中身はですけど、
scriptのタイプイコールアプリケーションスラッシュLDプラスJSONですね。
はい、JSON-LDですね。
で、その中にガシャンと本当にJSON形式でバーっと置かれている感じになりますね。
コンテキストだったりタイプだったり、
ID、ネーム、ディスクリプション、オーサー、ほげほげみたいな感じで、
JSONでガンと追加されているってところですね。
はー、これってクローラー読むのかな。
JSON-LDは最もインパクティックなセマンティックウェブフォーマットの一つで、
Googleが推奨しているものです。
Googleは両方対応しているな。
RDFとマイクロデータというのは人気が出なかった。
マイクロフォーマットはインディーウェブの人たちの間で小さなコミュニティが一応ありますけど、
仕様とは言い難いものです。
CSSのクラスはHTMLの要素にスタイルをつけるために作られたもので、
セマンティックな情報を提供するだけのものではありませんから。
まあそれもそうだよね。
確かに確かに。
なるほど、結果的にJSON-LDが主導権じゃないですけど、人権を獲得したって感じですね。
続いて、ウェブ3.0を素晴らしいものにするというところです。
HTMLは確立されたフォーマットであり、仕様になりますと。
このウェブページを見ることであなたはすでに必要なセマンティック情報のほとんどを手に入れています。
クローラーのためにJSONの中にある同じ意味情報をHTMLのヘッドアタックに重複して記述するのは意味がありませんと。
不必要な重複を生み、かえってウェブページが重くなります。
しかしウェブ3.0やコンテンツ時代の到来によって、クローラーにコンテンツをより理解してもらう必要もあります。
ウェブが機械にとってクリーンなものになることで、人間にとってクリーンなものになる必要もあります。
タグだったり、著者、いわゆるオーサーですね、とかレシピなどですね、
HTML要素を導入すれば、機械にとってより良いウェブができ、私たち人間にとってもより良いウェブができるはずですと。
はあね。
機械に読みやすいものは人間にも読みやすいということですね。
はあ、なんか逆転の発想ですね。
まあでも、結局HTMLを読ますのは機械なので、そりゃそうかもしれないですね。
はい。
じゃあ最後、call to actionですけど、ウェブハイパーテキストアプリケーションテクノロジーワーキンググループだったりとか、通称WATOASIですね。
ははは、忘れません。僕WATOASIのフルを見たことなかったですね。
はい。ウェブハイパーテキストアプリケーションテクノロジーワーキンググループがWATOASIですね。はい。
こちらはですね、HTMLの進化に興味を持つ人たちのコミュニティになります。
1ヶ月ほど前、私はWATOASIのGitHubで一つの提案を作成しました。一周立てたと。
18:04
これまでエレメントフォームはセマンティックウェブ、よりセマンティックなウェブのための要素というのを一つ一周立ててみましたと。
ウェブはオープンなフォーマットで構築されています。
変化に対応するためにはHTMLの進化がまだまだ必要ですと。
HTMLの前進させ、ウェブ3.0の新しい現実、つまりセマンティックウェブに適応させることが必要であるということを納得してもらいたいと思いましたと。
これを怠ると企業によって作られ、管理され、私たちのニーズではなく企業のニーズに応えるために作られたフォーマットを使わなければならないと思います。
はぁはぁはぁ、確かに。
さらにクローラーにセマンティック情報を提供しないことで、私たちはAI分類ツール、まあ最適とは言い難いですけども、
こちらのツールに希望を託すか、もっと悪いことに意味のない検索結果の海に溺れるしかなくなってしまいます。
もし私があなたを納得させる可能性があれば、ぜひ私の提案にアクセスして支持を表明してください。
私たちは一緒にHTMLを次のレベルへと導きますというところで締められておりました。
なかなか面白かったですね、この掲示。
結構熱いですね、この方でも。
セマンティックウェブ、しかもWhat.What.GのGitHubに一周立てるって結構勇気いりますね。
とはいえ、What.What.GのそのGitHubですね。
What.What.GスラッシュHTMLへのリポジトリですけど、これに見ますと、
一周1.6Kとかあって、しかもプルリクも153とかあるので結構溜まっている感じですね。
はい、でもまあこの一周まだ立てられたばっかりで、とはいえでも1月7日ですね。
今年の1月7日なので結構時間が経っているんですけど、
まあちょいちょいとコメントが来ている感じですね。
はい、まあ興味のある人は見てみてください。
ちょっと僕もこれ、この後さーっと読んでいこうと思っております。
はい、というところでいかがだったでしょうか。
すいません、今日はなんか私のDeepLが調子が悪かったり、
たぶんなんか本文中にHTMLタグとかがソースコードが入ると、
急に翻訳しなくなったりする感じがするので、
まあその辺を気をつけていけば使えるかもしれないですけど、
はい、ちょっとグダってしまって申し訳ないですけど、
こんな感じで今日は終了したいと思います。
はい、月曜日の朝からのご参加ありがとうございました。
また今日からですね、1週間頑張っていけたらなと思いますし、
3月ももう本当に終わっていくので、最終週ですね。
しっかり締めていきたいなと思います。
それでは終了したいと思います。お疲れ様でした。
