クラウドを利用してほぼ0円でWebサイトを立ち上げる方法パート3

なんか連載ぽいなぁーと自分で思うのですが・・・・

今回はGoogleDriveと簡易CMSの設定をします

参考になるのはイクラさんのページですお世話になっております

手順が簡単なWebフォームの作成から、GoogleDriveにログイン後新規作成からフォームを選びますフォームの作成は問いと回答を入力してラジオチェックボタン入力窓を設定するだけです完成したらファイル→埋め込むを選択してiframeのサイズを調整して埋め込みURLを取得します

取得したURLをサイトに貼り付ければ問い合わせフォームの完成です簡単だぁ〜しかもGoogleDriveにリアルタイムで集計されるから確認もラクだしダウンロードも出来る

こちらが作成したサンプルです

次は簡易CMSを設置します私はbloggerで記事を書き、RSSを利用してサイト内に表示させることでCMS代わりにしています　bloggerの操作説明は割愛させていただきますが、クリボウの Blogger 入門をご覧ください　私も参考にさせていただいております。

こんな感じなんです
blogger→記事→RSS←取得→GoogleFeedAPI（RSS）→Webページに反映される

GoogleFeedAPIの設定が肝です
こちらも参考ページがあります　またイクラさんのページです
そしてこちらがそのコードと説明のページです　私は下記のようなコードになりました　最終的には記事を3件取得してタイトルと記事内容・投稿日付とタグを表示されます　こちらのjsファイルをテンプレートフォルダのhtmlフォルダ配下のjsフォルダに格納します
ファイル名：feed3.js

   1:  google.load("feeds", "1");

2:

   3:  function initialize() {

   4:    var feedurl = "http://ブログ名.blogspot.com/feeds/posts/default?alt=rss";

   5:    var feed = new google.feeds.Feed(feedurl);

   6:    feed.setNumEntries(3);

   7:    feed.load(function (result){

   8:      if (!result.error){

   9:        var container = document.getElementById("feed");

  10:        var htmlstr = "";

11:

  12:        for (var i = 0; i < result.feed.entries.length; i++) {

  13:          var entry = result.feed.entries[i];

14:

  15:          htmlstr += '<b><h3><a href="' + entry.link + '">' + entry.title + '</a></h3></b>';

  16:          htmlstr += entry.content;

  17:          htmlstr += '<p>日付 :' + entry.publishedDate + '</p>';

  18:          for (var j = 0; j < entry.categories.length; j++) {

  19:            htmlstr += '[' + entry.categories[j] + ']';

  20:          }

  21:          htmlstr += '</p>';

  22:        }

23:

  24:         container.innerHTML = htmlstr;

  25:      }else{

  26:         alert(result.error.code + ":" + result.error.message);

  27:      }

  28:    });

  29:  }

30:

  31:  google.setOnLoadCallback(initialize);

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

簡易CMSを表示するページを編集します　head部分に15・16行を追加しました。コメント入れておくと後から編集するときにも楽です
ファイル名：index.html

   1:  <head>

   2:  <meta charset="UTF-8">

   3:  <meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">

   4:  <title>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</title>

   5:  <meta name="description" content="" />

   6:  <meta name="keywords" content="" />

   7:  <link rel="stylesheet" href="style.css" type="text/css" media="screen">

   8:  <!--[if lt IE 9]>

   9:  <script src="js/html5.js"></script>

  10:  <script src="js/css3-mediaqueries.js"></script>

  11:  <![endif]-->

  12:  <script src="js/jquery1.7.2.min.js"></script>

  13:  <script src="js/script.js"></script>

  14:  <!-- Google Feed API -->

  15:  <script type="text/javascript" src="https://www.google.com/jsapi"></script>

  16:  <script type="text/javascript" src="./js/feed3.js"></script>

  17:  </head>

次に、簡易CMSを表示したい箇所に要素を追記すればblogger記事が表示されます

   1:  <div id="feed"></div>

ちょっと汚いけど・・・　右側のメイン部分はblogger記事をRSSで取得してGoogleFeedAPIを利用して表示させてます　普通の画面になってる　レスポンシブだからなのか高さも微調整してくれてスッキリ収まりました。
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }