Google Feed APIのカスタマイズ方法について、頻繁に質問をいただいています。今回は、以下の内容でコメントを頂きました。
質問だらけの中大変恐縮なのですが、この記事にあるまさに「左から、更新日の新しい順に並んでいます。」
のような横並びのものと全く同じものを実現したいのですが（ずっとこれを探していました）イマイチCSSとHTML部分をどうしたら良いのかわかりません・・・宜しかったらご教授願えませんでしょうか？
なるほどなるほど～。こういうのをしたいんですね。
方法を書きました。似たようなことをされたい方は、是非ともご参考ください。
前提が1つあります
まずは、Google Feed APIの使い方について書いた記事に掲載されているサンプルコードを動作できることを前提として書いています。「コピー＆貼り付けしてできた！」という方でもいいです。
※2015/12/04現在、非推奨のコードになっていますので、代替の方法も考えた方がよいです。
早速コードサンプルです
とりあえず「やりたいことができる」ことを最優先にコードを書きました。「文法などをもっと厳密にしたい！」という方は専門書籍や解説サイトなどを別途参考ください。
それではスタート～。
Javascriptコード
htmlコードを出力させるプログラム箇所のみ、抜粋して書いています。「一体何をやっているんだ・・・」という方は「Google Feed APIでサムネイル付きで複数サイトの最新記事を取得する際、出力するhtmlコードを変更する方法」のページを見て、コードの意味が不明な場合は併せてご参考ください。
for (var j = 0; j < feedsArr.length; j++) {
var li = document.createElement("LI");
var aE = document.createElement("A");
var h3 = document.createElement("H3")
var spanD = document.createElement("SPAN");
aE.href=aE.title=feedsArr[j][1];
if(feedsArr[j][4].length > 15){ //記事タイトルの長さが16文字以上の場合で条件分岐
aE.appendChild(document.createTextNode(feedsArr[j][4].substr(0, 15) + "..."));
} else {
aE.appendChild(document.createTextNode(feedsArr[j][4]));
}
h3.appendChild(aE);
spanD.appendChild(document.createTextNode(feedsArr[j][5]));
var img_link = document.createElement("img");
img_link.setAttribute("src", feedsArr[j][6]);
img_link.setAttribute("width", "150"); //幅：width属性に150pxを指定
container.appendChild(li);
li.appendChild(img_link);
li.appendChild(h3);
li.appendChild(spanD);
}
}
上のコードで工夫していることは、記事タイトルの長さを特定の文字数を超えると「…」で表示させているところです。記事タイトルが長いと、サムネイルが隠れてしまいますもんね。
続いて、htmlコードについてです。
htmlコード
例えば「3サイト分の新着記事を1記事ずつ表示」させると、以下のようなコードが出力されます。
<ul id="feed"> <li> <img src="サムネイルURL1"> <h3><a href="記事URL1">記事タイトル1</a></h3> <span>サイト名1</span> </li> <li> <img src="サムネイルURL2"> <h3><a href="記事URL2">記事タイトル2</a></h3> <span>サイト名2</span> </li> <li> <img src="サムネイルURL3"> <h3><a href="記事URL3">記事タイトル3</a></h3> <span>サイト名3</span> </li> </ul>
「Google Feed API」を利用すると、サイトごとに出力される「<li>～</li>」はJavascriptで行ってくれますので、出力させるための入れ物「<ul id=”feed”></ul>」さえhtmlファイルに書いてあればいいです。
ただ、「具体的にどういうコードが出力されるの？」という理解が難しいだろうな～と思って、「こんなのが出力されるよ！」という意味で上のコードを紹介しています。
というわけで、出力されたhtmlコードをCSS（スタイルシート）でデザインします。
cssコード
ほんと一例ですけど、こんな感じで書きます。
body{
font-size:11px;
width: 100%;
background: #eee;
padding: 0px;
margin: 0px;
}
a{
text-decoration:none;
}
ul#feed{
width:100%;
margin:10px 0px 0px;
padding:0px;
}
ul#feed li{
position:relative;
list-style-type:none;
display:inline-block;
width:150px;
height:100px;
overflow:hidden;
vertical-align:top;
margin:0px 5px 5px;
background:#f5f5f5;
}
ul#feed li h3{
position:absolute;
bottom:0px;
margin:0px;
background:#303030;
width:100%;
font-weight:normal;
}
ul#feed li h3 a{
color:#fff;
display:block;
padding:5px;
}
ul#feed li span{
position:absolute;
top:0px;
right:0px;
background:#fff;
padding:5px 7px;
}
重ねて書きますが、コードはサンプルなので、ブラッシュアップなどされたい場合は専門書などを参考ください。
まとめ
こういうのやりたい方って結構多いんだな～と実感しています。結構巷でよく見るアンテナサイトやまとめサイトなどで割と採用されているデザインだったりしますね。ずらっと並んでて、サムネイルもあるんで目を引きます。
質問回答記事はあんまり慣れていないんで、わかんねぇ・・・ってところもあるかも。なるべく最小限の説明にしましたが、どの程度の範囲で説明するのが適切なのか、大変悩みます。
範囲が広すぎると理解されづらいと思いますし。つくづく、相手に伝えるってのは難しいな～と感じながら書きました。お役にたてますと幸いです。
このページを共有する