なぜ作ったか
静的サイトなクライアントワークでも、更新を手軽にやりたい、というニーズは意外と多くあります。
むしろ、ちょっとした更新のためだけに、大掛かりなCMSを入れるのはめんどくさい。静的なページが数ページだけなら、むしろスタティックでGit管理したほうが楽。
でも、ちょっとしたお知らせはしたい。
そういうニーズを解決するために、いくつかの方法を考えました。
１行お知らせぐらいなら、外部から読み込んでしまえ！
１行お知らせというのは、個人的に使っているWeb用語なのですが、要は小規模のサイトでトップページにお知らせが並ぶけど、それをクリックしても、詳細ページには飛ばない、つまり一覧しかないというお知らせの見せ方です。
そもそも、サイトによっては、お知らせといっても、詳細ページを用意するほどのお知らせがなかったり、頻繁に更新したりしないケースもあります。
そういう時に、うっすーい内容の詳細ページを作ったら逆にSEO的には効果減じられかねないですし、詳細ページ作らないのに、WordPressみたいな大きめのCMS入れるのもアホみたいです。
それなら、JSで外部から読み込むほうが楽かな、と。
更新内容のソースはどうするよ？
いろいろ考えられますが、ソースファイルをJSONとかで置くのはNGです。だって、クライアントワークで、FTPにログインさせるなんて、クライアントのUX的にはNGです。（担当の方がHTML触れる人なら別ですが）
そこで、一般の人でも扱えて、それなりに入力や編集がやりやすい、ってことでGoogleスプレッドシートに更新内容のソースを置いてみます。
サンプルのスプレッドシートです
こんな感じで作ってみました。
これなら、一般の人でも編集できそうですね。Googleスプレッドシートなら、バージョン管理もしてくれるので、うっかりやらかしても差し戻しが簡単ですし。
実装するよ！
まず、こちらの記事を参考にして、下記のようなソースコードを書いてみました。
var url = 'https://spreadsheets.google.com/feeds/cells/1Ui7nDh9WWJ5zADOm73odxso3G6GsZ4zSCsT7_iN0-bE/od6/public/values?alt=json';
var target = $('#news');
function nl2br (str, is_xhtml) {
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}
$.getJSON(url,
function(data) {
var list = data.feed.entry;
var b = list.length;
var cnt = 4; // いくつずつに分割するか
var Arr = []; // 新しく作る配列
for(var i = 0; i < Math.ceil(b / cnt); i++) {
var j = i * cnt;
var p = list.slice(j, j + cnt); // i*cnt 番目から i*cnt+cnt 番目まで取得
Arr.push(p); // 取得したものを newArr に追加
}
for(var i = 0; i < Arr.length; i++) {
if(Arr[i][1].content.$t == 1) {
target.append(
'<li class="row-' + i + '"><section>' +
'<h1><time>' + Arr[i][0].content.$t + '</time>' +
'<span>' + Arr[i][2].content.$t + '</span></h1>' +
'<p class="desc">' + nl2br(Arr[i][3].content.$t) + '</p>' +
'</section></li>'
);
}
}
console.log(Arr);
}
)
$(document).on('click','#news li',function(){
$(this).find('.desc').slideToggle();
$(this).toggleClass('open');
});
URLの取得のところは、元記事を参考にしてください。（取得までちょっと手間ですが…）
あとは、jQueryでゴニョゴニョっと整形しています。改行が無視されるので、nl2br関数を作っています。
１行お知らせながら、１段落程度、簡単なディスクリプションが書けるようにもしていますので、そこはアコーディオンするようにもしました。
HTMLとCSSはこんな感じです。
h1 お知らせ
nav
ul#news
* {
box-sizing: border-box;
}
body {
padding: .5em;
}
h1 {
font-size: 24px;
border-left: 4px solid red;
padding-left: .5em;
margin-bottom: 1em;
}
#news {
li {
border-top: 1px solid #ddd;
&:last-child {
border-bottom: 1px solid #ddd;
}
padding: 0 {
top: 1.5em;
bottom: 1.5em;
}
}
h1 {
border-bottom: 0;
font-size: 17px;
padding-left: 0;
border-left: 0;
line-height: 1;
vertical-align: bottom;
span {
display: inline-block;
}
time {
display: inline-block;
margin-right: 2em;
background: #ddd;
font-size: 10px;
padding: 0 {
top: .5em;
bottom: .5em;
left: 1.5em;
right: 1.5em;
}
}
&::before {
content: "+";
font-size: 85%;
border: 1px solid #ddd;
padding: .2em;
line-height: 0;
margin-right: 1em;
}
}
.open h1::before {
content: "-";
border: 0;
}
.desc {
display:none;
font-size: 14px;
line-height: 1.7;
margin-left: 3em;
}
}
出来上がりはこちら
See the Pen Googleスプレッドシートから一行お知らせを読み込む by Kohki SHIKATA (@kohki-shikata) on CodePen.