# <google>googleのサービス使ってブログもどき作ってみた

な〜んとなく、作ってみたよ
見切り発車で書いてるからまとまるか微妙だよ
いつものことですね
は〜い

1.使ったもの

今回はgoogleのサービスだけを使ってブログっぽいものをどこまで作れるかをやろうということで、googleのサービスです

google form (入力系)
google spreadsheet(保存系)
google apps script(表示系)
bootsrap 4(見た目系)

レイアウトの調整にbootstrapをちょっと使いました。

2.書いたコード

まずはgoogle formを用意します。
今回は暫定的に以下を聞きます。

ブログタイトル（必須）
ブログコンテンツ（必須）
関連リンク（任意）

で、その結果をスプレに吐き出します。
オエ〜って感じですね（違う）
そうすることでスプレに吐き出されるのは聞いたこと＋タイムスタンプになります

そのデータを基にしてブログぽい表示をしていきます

HTML

index.html

表示の基になるものです。特に何も書いてません

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
  </head>
  <body>
    <h1>blog</h1>
    <?!= getcontent(); ?>
  </body>
</html>

さて、ここの

<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>

これはcssを読み出す用のやつです。そして、

<?!= getcontent(); ?>

でコードを読みだします

css.html

google apps scriptを使うとcssもhtmlの中に書かなきゃいけません、難しいですね。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.date{
  font-size:10px;
  font-weight:200;
}
.card{
  margin-bottom:30px;
  width:400px;
}
</style>

特殊なことはないですね、bootsrap をCDNで引いてるくらいです

google apps script

htmlの表示

単純なhtmlの表示にもスクリプトが必要です。

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

これはコピペのようなものです。

sheetの情報からブログっぽく表示する

html内から呼び出したコードです

function getcontent() {
  //変数spreadsheetに指定のスプレッドシートオブジェクトを取得します
  var url ="ここにシートのリンク";
  var spreadsheet = SpreadsheetApp.openByUrl(url);

  //spreadsheetのシートを全て読み出す
  var sheets = spreadsheet.getSheets();
  //結果の格納されたシートを読み出す
  var sheet = sheets[0];

  //シートの最終行番号、最終列番号を取得
  var startrow = 1;
  var startcol = 1;
  var lastrow = sheet.getLastRow();
  var lastcol = sheet.getLastColumn();

  //シートのデータを取得
  var sheetdata = sheet.getSheetValues(startrow, startcol, lastrow, lastcol);

  //シートをhtmlコードに反映していく
  var content="";
  for(var i=lastrow-1;i>=1;i--){
    content+="<div class=\"card\">";
    content+="<div class=\"card-header\"><p class=\"card-subtitle date\">"+sheetdata[i][0]+"</p>";
    content+="<h2 class=\"card-title\">"+sheetdata[i][1]+"</h2></div>";
    content+="<p>"+sheetdata[i][2]+"</p>";
    //link適応
    if(sheetdata[i][3]!=""){
      if(sheetdata[i][3].indexOf(",")!=-1){
        var links=sheetdata[i][3].split(",");
        for(var j=0;j<links.length;j++){
          content+="<a href=\""+links[j]+"\">"+links[j]+"</a>";
        }
      }else{
        content+="<a href=\""+sheetdata[i][3]+"\">"+sheetdata[i][3]+"</a>";
      }
    } 
    content+="</div>"
  }
  return content
}