Google Feed APIでサムネイル付きで複数サイトの最新記事を取得する際、出力するhtmlコードを変更する方法

Google

以前、以下の記事を公開しました。

【Google Feed APIを使用して、複数のサイトのRSSフィードを取得して更新日順でソート（並び替え）して、さらにそれを「サムネイル付きで」表示する方法】このページをみる

公開当初から1年以上経った現在もカスタマイズ方法について質問をいただきます。今回は、以下のような内容でコメントをいただきました。

例えば、↓のような具合のことを行いたいです。

<a title=”URL” href=”URL” rel=”nofollow”>タイトル</a>
抜粋日時(サイト1)

– 中略 –

具体的に教えていただきたいです！
個別記事にしていただけますと嬉しいです！！

メリークリスマス！！！

クリスマスですし、よい機会なのでサンプルコードと解説などを書きました。

htmlコードの出力を決めているのはこの部分です

まず、以下のJavascriptコードをご参考ください。過去公開した記事中にあるサンプルコードから「htmlコードを出力させている個所のみ」抜粋しています。

for (var j = 0; j < feedsArr.length; j++) {
 var aE = document.createElement("A");
 var h3 = document.createElement("H3");
 var p = document.createElement("P");
 var spanD = document.createElement("SPAN");
 aE.href=aE.title=feedsArr[j][1];
 aE.appendChild(document.createTextNode(feedsArr[j][4]));
 h3.appendChild(aE);
 spanD.appendChild(document.createTextNode(feedsArr[j][2]));
 spanD.appendChild(document.createTextNode(" ("+feedsArr[j][5]+")"));
 p.appendChild(document.createTextNode(feedsArr[j][3]));
 p.appendChild(spanD);
 container.appendChild(h3);
 container.appendChild(p);
 var img_link = document.createElement("img");
 img_link.setAttribute("src", feedsArr[j][6] );
 img_link.setAttribute("width", "100" ); //幅：width属性に100pxを指定
 container.appendChild(img_link); //img（画像）タグを出力
}

上のコードを好きにいじくると、思い通りのhtmlコードを出力できます。

ご要望通りに書き換えると、こうなります

以下のコードがサンプルです。

for (var j = 0; j < feedsArr.length; j++) {
 var aE = document.createElement("a"); //「a」要素を作成
 aE.setAttribute("href", feedsArr[j][1] ); //「href」属性に取得したURLを設定
 aE.setAttribute("title", feedsArr[j][1] ); //「title」属性に取得したURLを指定
 aE.setAttribute("rel", "nofollow" ); //「rel」属性に「nofollow」を指定
 aE.appendChild(document.createTextNode(feedsArr[j][4])); //記事タイトルを「a」要素の内部に作成
 container.appendChild(aE); //「a」要素の内容をコンテナ「<div id="feed">～</div>」の内部に作成
 container.appendChild(document.createTextNode(feedsArr[j][3] + feedsArr[j][2] + " (" + feedsArr[j][5] + ")")); //抜粋日時（ブログタイトル名）の形式でコンテナ「<div id="feed">～</div>」の内部に作成
}

上記のコードに差し替えると、今回いただいたご要望の通りに出力できます。

「何をやっているのか」理解すると応用もできる

コード内でどんな処理がされているのか、仕組みを理解するといろいろと今後に役立つ場面も出てくると思います。もし興味をお持ちでしたら、一例として以下をご参考ください。

「document.createElement()」で「要素」を作成

すごく簡潔に書きます。

まずは、リンクタグ「<a>」を作成して記事タイトルを設定する必要があります。ですので、はじめに「a」※要素を作成します。（※エレメントとも言います。　以下、「要素」で統一）

「a」要素を作成したい場合

変数は任意で指定します。「a」の要素（エレメント：Element）だから「aE」みたいな。そんな要領で覚えやすいほうがいいでしょうかね。お好みでつけます。

var aE = document.createElement("a");

「p」要素を作成したい場合

別の要素を作成したい。例えば「p」要素を作成したい場合は、以下のようにします。変数名とカッコ「（）」内の値を変更するだけです。

var pE = document.createElement("p");

補足解説

要素を新しく追加する場合は、上記の例にならって作成すればいいですね。とても単純にできます。

作成した要素に属性「rel」や値「nofollow」などを付与する

次は、作成した「a」要素に対して「href」「title」「rel」の属性と、値を設定します。以下の例を参考ください。

aE.setAttribute("href", feedsArr[j][1] ); //「href」属性に取得したURLを設定
aE.setAttribute("title", feedsArr[j][1] ); //「title」属性に取得したURLを指定
aE.setAttribute("rel", "nofollow" ); //「rel」属性に「nofollow」を指定

補足解説

「aE.setAttribute」で「a」要素に対して属性と、値を指定します。「feedsArr[j][1]」はGoogle Feed APIで取得したURLの値が入っています。

「appendChild()」で要素を指定する

以下の例は、「a」要素をコンテナ「<div id=”feed”>～</div>」の内部に作成する場合です。

aE.appendChild(document.createTextNode(feedsArr[j][4])); //記事タイトルを「a」要素の内部に作成
container.appendChild(aE); //「a」要素の内容をコンテナ「<div id="feed">～</div>」の内部に作成
container.appendChild(document.createTextNode(feedsArr[j][3] + feedsArr[j][2] + " (" + feedsArr[j][5] + ")")); //抜粋日時（ブログタイトル名）の形式でコンテナ「<div id="feed">～</div>」の内部に作成

補足解説

「document.createTextNode()」でテキストを作成しています。Google Feed APIで取得した値と、変数「aE」の内容を作成します。ここで、作成場所を指定するのに「appendChild()」を使っています。上記のコードでは、container「<div id=”feed”>～</div>」内に作成しています。おそらく、この辺の理解が慣れるのに時間がかかる場合もあると思います。ですが、やっていることは単純です。「どの場所に作成するか」というだけなので「document.createTextNode()」「appendChild()」を理解して、使ってみましょう～。

まとめ

Google Feed APIで取得した値を例にしましたが、使いどころはいろいろとあります。特に、今回登場した「createElement」「setAttribute」「createTextNode」「appendChild」それぞれは、とてもシンプルな仕組みです。今回はその仕組みを組み合わせているだけに過ぎないので、意味さえ理解できれば何とでも、どうとでもできるようになります。

参考リンクの解説もご参考ください

私も最初は全然できませんでした。なので、これから勉強される方は、何かのご参考となりましたら幸いです！

著者:bouya Imamura