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

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

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

image
取得したURLをサイトに貼り付ければ問い合わせフォームの完成です 簡単だぁ〜 しかもGoogleDriveにリアルタイムで集計されるから確認もラクだしダウンロードも出来る
image
こちらが作成したサンプルです
次は簡易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; }

image

.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; }

ちょっと見えてますけど、Googleカレンダーも埋め込みURLを取得できるのでサイトに貼り付けました 活動予定などを表示してもいいかもしれませんね

次回は、TwitterとFacebookを活用してページを作成して完成させます。クラウドを利用してほぼ0円でWebサイトを立ち上げる方法 パート2
クラウドを利用してほぼ0円でWebサイトを立ち上げる方法 パート1

シェアする

  • このエントリーをはてなブックマークに追加

フォローする