静的サイトでもお知らせ記事を更新できる仕組みを作った。無料、要Googleアカウント

# なぜ作ったか
静的サイトなクライアントワークでも、更新を手軽にやりたい、というニーズは意外と多くあります。

むしろ、ちょっとした更新のためだけに、大掛かりなCMSを入れるのはめんどくさい。静的なページが数ページだけなら、むしろスタティックでGit管理したほうが楽。

でも、ちょっとしたお知らせはしたい。

そういうニーズを解決するために、いくつかの方法を考えました。

# １行お知らせぐらいなら、外部から読み込んでしまえ！

１行お知らせというのは、個人的に使っているWeb用語なのですが、要は小規模のサイトでトップページにお知らせが並ぶけど、それをクリックしても、詳細ページには飛ばない、つまり一覧しかないというお知らせの見せ方です。

そもそも、サイトによっては、お知らせといっても、詳細ページを用意するほどのお知らせがなかったり、頻繁に更新したりしないケースもあります。

そういう時に、うっすーい内容の詳細ページを作ったら逆にSEO的には効果減じられかねないですし、詳細ページ作らないのに、WordPressみたいな大きめのCMS入れるのもアホみたいです。

それなら、JSで外部から読み込むほうが楽かな、と。

# 更新内容のソースはどうするよ？

いろいろ考えられますが、ソースファイルをJSONとかで置くのはNGです。だって、クライアントワークで、FTPにログインさせるなんて、クライアントのUX的にはNGです。（担当の方がHTML触れる人なら別ですが）

そこで、一般の人でも扱えて、それなりに入力や編集がやりやすい、ってことで**Googleスプレッドシート**に更新内容のソースを置いてみます。

# サンプルのスプレッドシートです

こんな感じで作ってみました。

* [１行お知らせ更新ソース](https://docs.google.com/spreadsheets/d/1Ui7nDh9WWJ5zADOm73odxso3G6GsZ4zSCsT7_iN0-bE)

これなら、一般の人でも編集できそうですね。Googleスプレッドシートなら、バージョン管理もしてくれるので、うっかりやらかしても差し戻しが簡単ですし。

# 実装するよ！
まず、[こちらの記事](http://creator.aainc.co.jp/archives/6240)を参考にして、下記のようなソースコードを書いてみました。

```js:index.js
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の取得のところは、[元記事](http://creator.aainc.co.jp/archives/6240)を参考にしてください。（取得までちょっと手間ですが…）

あとは、jQueryでゴニョゴニョっと整形しています。改行が無視されるので、nl2br関数を作っています。

１行お知らせながら、１段落程度、簡単なディスクリプションが書けるようにもしていますので、そこはアコーディオンするようにもしました。

HTMLとCSSはこんな感じです。

```pug:index.pug
h1 お知らせ
nav
  ul#news
```

```scss:style.scss
* {
  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;
  }
}
```

# 出来上がりはこちら
<p data-height="265" data-theme-id="light" data-slug-hash="zvgBBP" data-default-tab="js,result" data-user="kohki-shikata" data-embed-version="2" data-pen-title="Googleスプレッドシートから一行お知らせを読み込む" class="codepen">See the Pen <a href="http://codepen.io/kohki-shikata/pen/zvgBBP/">Googleスプレッドシートから一行お知らせを読み込む</a> by Kohki SHIKATA (<a href="http://codepen.io/kohki-shikata">@kohki-shikata</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>