Web APIを使用してW3C仕様データを表示する方法

エミー賞受賞 W3C World Wide Webの国際標準化団体です。それは新しいウェブ標準を作成し、それらが世界中で一貫性があり関連性を保つように絶えずそれらを修正します.

ブラウザとWebサイトは、時間の経過とともに標準規格に準拠するようになりました。これにより、Webサイトはすべてのさまざまなブラウザで統一的にレンダリングおよび動作できます。公に利用可能な最も有用なリソースの1つはw3c.orgのW3C仕様書です。.

最近W3CはそのデータをWeb APIを介して利用できるようにしました。そのプロジェクトページはGithubにあります。プロジェクトページからのこのAPIの紹介は次のとおりです。

“W3Cのデータとやり取りしたいという私たちのコミュニティの開発者からの要求に応えて、W3CシステムチームはWeb APIを開発しました。それを通して、仕様、グループ、組織、ユーザーに関するデータを入手可能にしています。.”

今日の記事では私たちが見るでしょう W3C APIを介して仕様データを取得する方法. 仕様データなどを取得するために投稿できるさまざまなリクエストはhttps://api.w3.org/docにあります。また、APIをテストするためのリクエストごとにサンドボックスも用意されています。 APIキー.

まず見てみましょう APIキーを取得する方法.

1. W3Cアカウントにログインするか、アカウントを作成してください。.
2. それから APIキーを管理する あなたのプロフィールページに.
3. クリック 新しいAPIキー 鍵を生成するための名前を付けます.
4. それからあなたが望むならば、あなたはそれをコピー＆ペーストすることができます APIキー サンドボックス内のAPIをテストするためのWebページhttps://api.w3.org/docの先頭にあるテキストボックス.

この記事のために、我々は調べます 使用する要求 ショートネーム 仕様URL、説明、およびドキュメントのステータスを表示する. リクエストは次のようになります。

https://api.w3.org/Specifications/shortname?apikey=apikey&_format=json 

例えば、HTML 5のスペック要求はこのようになります。

https://api.w3.org/Specifications/html5?apikey=apikey&_format=json 

それでは、APIを介して取得されたデータを表示するために使用するHTMLに注目しましょう。このためにHTMLテンプレートを使うことにしました。 HTMLテンプレートは、解析されたがJavaScriptを使用してページに追加されるまでレンダリングされなかったHTMLコードを保持するために使用されます。.

 
W3Cスペック
 
  

テンプレートの準備ができました。それでは、JavaScriptでHTTPリクエストを行い、レスポンスJSONデータをHTMLで表示します。これは、最初にグローバル変数のセットです。

var shortnames = ['html5'、 'selectors4'、 'battery-status'、 'fullscreen']、xmlhttp = new XMLHttpRequest（）、w3cSpecsEle = document.querySelector（ '＃w3cSpecs'）、templateEle = document.querySelector（ 'Template ;） 

ショートネーム の配列です ショートネーム 当社のWebページに表示したい仕様。あなたが見つけたいなら ショートネーム 仕様のW3C URLを見れば、最後にそれを見ることができるでしょう。.

しかし、あなたが得ることができるという保証はありません すべて こんな感じの仕様。の明確なリストはありません ショートネーム APIを通じて利用できる仕様と仕様.

ループスルー ショートネーム それぞれに対してHTTPリクエストを配列して投稿し、レスポンスを取得する.

（var i = 0; iの場合 
の responseText JSON文字列であり、JSONオブジェクトを取得するために解析する必要があります。. displaySpec JSONデータを使用してそれをHTMLで表示する関数です。.
 
以下は、HTML5仕様および以下のコードの後のサンプルJSON応答テキストです。 displaySpec. 
 
 
function displaySpec（json）if（ 'content' in templateEle）/ *テンプレートのコンテンツを取得* / templateEleContent = templateEle.content; / * h2ヘッダーにスペックのタイトルを追加* / w3cSpecHeader = templateEleContent.querySelector（ '。w3cSpecHeader'）; w3cSpecHeader.textContent = json.title; / *リンクに仕様URLを追加する* / w3cSpecLink = templateEleContent.querySelector（ '。w3cSpecLink'）; w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / *仕様の説明を追加* / w3cSpecDetail = templateEleContent.querySelector（ '。w3cDescription'）; w3cSpecDetail.innerHTML = json.description; / *仕様ステータスを追加し、その値に基づいて色を付ける* / W3cSpecLatestVerStatus = templateEleContent.querySelector（ 'mark'）; var status = json._links ["最新バージョン"]。タイトル。 W3cSpecLatestVerStatus.textContent = status; switch（ステータス）case 'Recommendation'：W3cSpecLatestVerStatus.className = "recommendation";ブレーク; W3cSpecLatestVerStatus.className = 'ドラフト';ブレーク; W3cSpecLatestVerStatus.className = '引退';ケース '引退'。ブレーク;ケース「勧告候補」：W3cSpecLatestVerStatus.className = '立て候補勧告'。ブレーク; * / w3cSpecsEle.appendChild（document.importNode（templateEleContent、true））;テンプレートの内容のコピーをメインのdivに追加します。  else / *要素を個別に作成するためのJSコードを追加* / 
 
if（templateEleの 'content'） HTMLテンプレートがブラウザでサポートされているかどうかを確認します。サポートされていない場合は、JS自体にすべてのHTML要素を作成します。サポートがある場合は、テンプレートのコンテンツ内のHTML要素にJSONの各データを入力し、最後にテンプレートのコンテンツのコピーをメインに追加します。 ＃w3cSpecs div.
 
それでおしまい。ちょっとしたCSSスタイルでは、出力は次のようになります。