JavaScriptリーダーでRSSリーダーアプリを作成する方法
RSS（Really Simple Syndication） オンライン出版社によって使用される標準化されたフォーマットです。 コンテンツを配信する 他のウェブサイトやサービスへ。あ RSSドキュメント, としても知られている フィード, です XML文書 出版社が配信したいコンテンツを運ぶ.
RSSフィードは、ほとんどすべてのオンラインニュースWebサイトおよびブログで読者に公開されています。 内容を最新の状態に保つ. 彼らはまたで見つけることができます 非テキストベースのWebサイト YouTubeなど、YouTubeチャンネルのフィードを使用できます。 最新のビデオを知らされる.
これらのフィードにアクセスし、その内容を読んで表示するプログラムは、 RSSリーダー. JavaScriptで簡単なRSSリーダープログラムを作成することができます。このチュートリアルでは、次の方法について説明します。.
RSSフィードの構造
RSSフィード ルート要素を持つ 呼ばれる
フィードは通常いくつかを運ぶ 基本情報 タイトル、URL、WebサイトおよびWebサイトの説明など 個々の更新された投稿、記事、またはその他の内容 そのウェブサイトの。これらの情報は </code>, <code><link></code>, そして <code><description></code> それぞれ要素.</p> <p>これらのタグが <strong>内部に直接存在 <code><channel></code></strong>, それらは、Webサイトのタイトル、URL、および説明を保持しています。彼らがいるとき <strong>中に存在 <code><item></code></strong> それ <strong>更新された投稿に関する情報を保持しています</strong>, それらは以前と同じ情報を表しますが、それぞれの内容の情報を表します。 <code><item></code> 表す.</p> <p>いくつかもあります <strong>オプションの要素</strong> RSSフィードに含まれている可能性があり、配布されたコンテンツに関する画像や著作権などの補足情報を提供します。あなたはこれでそれらについて学ぶことができます <strong>RSS 2.0の仕様</strong> cyber.harvard.eduで.</p> <p>これは、 <strong>ウェブサイトのRSSフィード</strong> ように見えるかもしれません：</p> <pre name="code"> <rss version="2.0"> <channel> <title>ホンキート https://www.hongkiat.com/ デザインのヒント、チュートリアル、そしてインスピレーション en-us - CSS統計を使用して任意のCSSスタイルシートを視覚化する スタイルシートにはCSSのルールがいくつあるか疑問に思ったことはありませんか。それとも、見たいと思ったことはありますか… 2017/05/18 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/
- Amazon Echo Show - 最新のAlexa搭載スマートデバイス Amazonは、内蔵デジタルアシスタントを搭載したスマートホームシステムの概念に慣れていません。結局のところ、… 2017/05/17 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/
フィードを取得する
必要がある フィードを取得する 私たちのRSSリーダーアプリケーションを使って。 Webサイトでは、RSSフィードのURLは次のようになります。 の中にあります application / rss + xml タイプ. たとえば、Hongkiat.comには次のRSSフィードリンクがあります。.
まずはじめに ウェブサイトのフィードURLを取得する JavaScriptを使う.
fetch（websiteUrl）.then（（res）=> res.text（）。then（（htmlTxt）=> var domParser = new DOMParser（）let doc = domParser.parseFromString（htmlTxt、 'text / html'）var feedUrl = doc.querySelector（ 'link [type = "application / rss + xml"]'）。href））。catch（（）=> console.error（ 'ウェブサイトの取得中のエラー'））
の フェッチ（） methodはグローバルメソッドです。 リソースを非同期的に取得する. 引数としてリソースのURL（コード内のWebサイトのURL）を取ります。それ を返します 約束する オブジェクトは、メソッドがWebサイトを正常に取得したときに 約束する 満たされている）、内部の最初の機能 それから（） ステートメント 取得したレスポンスを処理します （res 上記のコードで）.
取得したレスポンスは テキスト文字列を完全に読み込む を使用して テキスト（） 方法。このテキストは 取得したWebサイトのHTMLテキスト. 好き フェッチ（）, テキスト（） また を返します 約束する 物. そのため、応答ストリームから応答テキストを正常に作成したとき, それから（） その応答テキストを処理します（htmlText 上記のコードで）.
ウェブサイトのHTMLテキストが利用可能になったら、私たちは使用します DOMParser API に それをDOM文書に解析する. DOMParser XML / HTMLテキスト文字列をDOM文書に解析します。その方法, parseFromString（）, かかります 二つの引数： 解析されるテキスト そしてその コンテンツタイプ.
次に、作成したDOM文書から、 を見つける href 関連する価値 querySelector（） フィードのURLを取得するためのメソッド.
フィードの解析と表示
WebサイトのフィードURLを取得したら、次の手順を実行する必要があります。 RSS文書を取得して読む そのURLで見つかりました.
（feedUrl）.then（（res）=> res.text（）。then（（xmlTxt）=> var domParser = new DOMParser（）let doc = domParser.parseFromString（xmlTxt、 'text / xml'）doc） .querySelectorAll（ 'item'）。forEach（（item）=> let h1 = document.createElement（ 'h1'）h1.textContent = item.querySelector（ 'title'）。textContent document.querySelector（ 'output'）。 appendChild（h1））））
ウェブサイトを取得して解析したのと同じように、今は XMLフィードを取得してDOM文書に解析する. これを実現するために、 'text / xml' のコンテンツタイプ parseFromString（） 方法.
解析済み文書では、 すべて選択 querySelectorAll 方法と それぞれをループする.
各要素の中に、 アクセスタグ 好き </code>, <code><description></code>, そして <code><link></code>, それはフィードコンテンツを運んでいます。そして、私たちのシンプルなRSSリーダーアプリケーションが完成しました、あなたが望むようにあなたは取得したフィードのコンテンツをスタイルすることができます.</p> <h4>Githubのデモ</h4> <p>あなたはチェックアウトすることができます <strong>より詳細なバージョン</strong> Githubレポジトリのこの記事で使用されているコードの説明。より詳細なバージョン <strong>3つのフィードを取得する</strong> （Mozilla Hacks、Hongkiat、そしてWebkitブログ） <strong>JSONファイルを使用する</strong> また、RSSリーダーにいくつかのCSSスタイルを追加します。.</p>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6284591903398394"
data-ad-slot="6432271471"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
</div>
</div>
<div class="col-md-4">
<div class="bar">
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6284591903398394"
data-ad-slot="6432271471"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="barpost">
<div class="bar-post-img"><a href="/articles/howto/how-to-create-a-secretly-disguised-folder-without-extra-software.html"><img src="//savtec.org/img/images_7/how-to-create-a-secretly-disguised-folder-without-extra-software_11.png" alt=""></a></div>
<div class="bar-post-h1"> <a href="/articles/howto/how-to-create-a-secretly-disguised-folder-without-extra-software.html">追加のソフトウェアなしで密かに偽装したフォルダを作成する方法</a> </div>
</div>
<div class="barpost">
<div class="bar-post-img"><a href="/articles/computer-tips/how-to-create-a-secured-and-locked-folder-in-windows-xp.html"><img src="//savtec.org/img/images/how-to-create-a-secured-and-locked-folder-in-windows-xp.jpg" alt=""></a></div>
<div class="bar-post-h1"> <a href="/articles/computer-tips/how-to-create-a-secured-and-locked-folder-in-windows-xp.html">Windows XPでセキュリティで保護されたフォルダを作成する方法</a> </div>
</div>
<div class="barpost">
<div class="bar-post-img"><a href="/articles/coding/how-to-create-a-responsive-navigation.html"><img src="//savtec.org/img/images_2/how-to-create-a-responsive-navigation.jpg" alt=""></a></div>
<div class="bar-post-h1"> <a href="/articles/coding/how-to-create-a-responsive-navigation.html">レスポンシブナビゲーションを作成する方法</a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="prevnext">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="post">
<div class="prevnext-title">次の記事</div>
<div class="post-img"><a href="/articles/howto/how-to-create-a-search-shortcut-on-the-desktop-in-windows-8-1.html">
<img src="//savtec.org/img/images_7/how-to-create-a-search-shortcut-on-the-desktop-in-windows-81_6.png" alt="">
</a></div>
<div class="post-h1"> <a href="/articles/howto/how-to-create-a-search-shortcut-on-the-desktop-in-windows-8-1.html">Windows 8.1でデスクトップに検索ショートカットを作成する方法</a> </div>
</div>
</div>
<div class="col-md-6">
<div class="post">
<div class="prevnext-title">前の記事</div>
<div class="post-img"><a href="/articles/smart-home/how-to-create-a-routine-with-amazon-alexa.html">
<img src="//savtec.org/img/images/how-to-create-a-routine-with-amazon-alexa.jpg" alt="">
</a></div>
<div class="post-h1"> <a href="/articles/smart-home/how-to-create-a-routine-with-amazon-alexa.html">Amazon Alexaでルーチンを作成する方法</a> </div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="langs-block">
<ul class="langs-list">
<li class="site-lang"><a href="https://www.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-TH"></i></a></li>
<li class="site-lang"><a href="https://de.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DE"></i></a></li>
<li class="site-lang"><a href="https://ar.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-AE"></i></a></li>
<li class="site-lang"><a href="https://bg.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-BG"></i></a></li>
<li class="site-lang"><a href="https://cs.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-CZ"></i></a></li>
<li class="site-lang"><a href="https://da.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DK"></i></a></li>
<li class="site-lang"><a href="https://el.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-GR"></i></a></li>
<li class="site-lang"><a href="https://es.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ES"></i></a></li>
<li class="site-lang"><a href="https://et.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-EE"></i></a></li>
<li class="site-lang"><a href="https://fi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FI"></i></a></li>
<li class="site-lang"><a href="https://fr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FR"></i></a></li>
<li class="site-lang"><a href="https://he.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IL"></i></a></li>
<li class="site-lang"><a href="https://hi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IN"></i></a></li>
<li class="site-lang"><a href="https://hr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HR"></i></a></li>
<li class="site-lang"><a href="https://hu.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HU"></i></a></li>
<li class="site-lang"><a href="https://id.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ID"></i></a></li>
<li class="site-lang"><a href="https://it.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IT"></i></a></li>
<li class="site-lang"><a href="https://ja.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-JP"></i></a></li>
<li class="site-lang"><a href="https://ko.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-KR"></i></a></li>
<li class="site-lang"><a href="https://lt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LT"></i></a></li>
<li class="site-lang"><a href="https://lv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LV"></i></a></li>
<li class="site-lang"><a href="https://ms.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-MY"></i></a></li>
<li class="site-lang"><a href="https://nl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NL"></i></a></li>
<li class="site-lang"><a href="https://no.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NO"></i></a></li>
<li class="site-lang"><a href="https://pl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PL"></i></a></li>
<li class="site-lang"><a href="https://pt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PT"></i></a></li>
<li class="site-lang"><a href="https://ro.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RO"></i></a></li>
<li class="site-lang"><a href="https://ru.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RU"></i></a></li>
<li class="site-lang"><a href="https://sk.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SK"></i></a></li>
<li class="site-lang"><a href="https://sl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SI"></i></a></li>
<li class="site-lang"><a href="https://sr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RS"></i></a></li>
<li class="site-lang"><a href="https://sv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SE"></i></a></li>
<li class="site-lang"><a href="https://tr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-TR"></i></a></li>
<li class="site-lang"><a href="https://ua.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-UA"></i></a></li>
<li class="site-lang"><a href="https://vi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-VN"></i></a></li>
</ul>
</div>
<div class="row align-items-center">
<div class="col-md-3">
© <script>
var currentTime = new Date();
var year = currentTime.getFullYear();
document.write(year);
</script> <a href="/">Savtec</a>
</div>
<div class="col-md-9">
役立つ情報とWeb開発のヒント。 プログラミング、Webデザイン、CSS、HTML、JAVASCRIPT。 WINDOWSを構成して再インストールします。 サイトおよびアプリケーションをゼロから作成します。
</div>
</div>
</div>
</footer>
<link rel="stylesheet" href="css/flags.css">
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
</body>
</html>
