無料サーバーでもPHPに近いことをしたい！GASのはなし

何を話したいんだよって話

皆さんは、ホームページを持っていますか？
そのホームページは無料のものを使っていますか？それとも有料とか...？
有料なら良いんですが無料のものを使っていると、大体はPHPが使えません。
PHPはコメント欄とか、掲示板とかを作りたいときにはほぼ必須です。

ですが僕は金欠です。月1000円とか出したくないです。
どうですか？僕と同じ考えの人はいますか？

ということで今日は、Google Apps Script ( GAS ) とGithubと必要最低限のWeb技術だけで
メッセージングサービスもどきを作るための基礎を教えましょう。

最低限必要なもの

・htmlの技能
・Javascriptの技能
・多少のGithubの知識
・Google Spread Sheetの知識
ではやってみましょう

ホームページを意外と簡単に作る方法

　DDNS Nowとかいう神サイトを使って*.f5.siのアドレスを登録しましょう
左のアドレス・パスワードを入れればとりあえずokです。

　次は超定番のGithubを開いて「New (repository)」を押して新しいリポジトリを作ってください。
公開設定は「Public」名前は一応「*.github.io」としてください。（この辺まだ理解できない）

　一回DDNS nowの「詳細設定」タブに行ってくださいそして設定を下のように変えます。

ワイルドカード: 有効
CNAMEレコードやURLリダイレクト: (Githubで登録したやつ).github.io.

そして「設定を更新」をクリック。

　そしたらまたGithubのさっき作ったリポジトリを開いて「settings」を押す
左の下の方の「Pages」を開いて以下のことをしてください。

Branch: 「main」と「root」を確認・変更する -> save
出てきたoption「custom domain」の下の入力欄にさっき入手したf5.siのURLを入力 -> save

これでしばらくすると正常にできるかと思います。
以上で登録完了です。
あとf5.siは更新が少し遅いので注意してください

〜本編〜 GASを使う

1 まずはGoogle Driveを開いて「＋新規」をクリックして、新しくスプレッドシートを作成
2 上部メニューの「拡張機能」から「Apps Script」をクリック
3 開かれたタブに書いていきます
(※1) わかりやすいように各行の一番上に「username」や「message」等の表記をしておいたほうが良いです

基礎的なやつ

メッセージを貯めておくのに使えるコードを端から書いていきます。
1 シートとそのシートの最終行を取得

let sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(" シート名 ");
const last = sheet.getLastRow() + 1; // +1はタイトル(※1)の分

2 シートに内容を追加

sheet.getRange(`A${last}`).setValue( "A列に入れれそうなもの (ユーザー名など)" );
sheet.getRange(`B${last}`).setValue( "B列に入れれそうなもの (メッセージなど)" );

3 シートの内容を取得
iの値は任意です

const message = sheet.getRange(`B${i}`).getValue();
const user = sheet.getRange(`A${i}`).getValue();

4 行をまるごと削除
iの値は行の番号です

sheet.deleteRow(i);

5 POST通信の受け口を作る
GASでは、意外と簡単にできたりします

function doPost(e) {
  let jsonString = e.postData.getDataAsString();
  let data = JSON.parse(jsonString);

  // 省略
}

注1) 名前は絶対にdoPostという名前にしておくこと
注2) 例えば「name」という値を送信してそれを受け取りたい場合は

const name = data.name;

などとしてください

6 POSTで来たものを返す
返すものがなくても「ok」くらいは返してくださいね

return ContentService.createTextOutput(JSON.stringify({
  "ステータス": "OK"
}));

この状態だとJSONで帰ってくることになります

Javascriptを使って送信する準備

GASでコードが完成したら「デプロイ」 -> 「新しいデプロイ」を押します
「種類の選択」では「ウェブアプリ」と選択
「自分」として実行するように「次のユーザーとして実行」のボックスを変更
「アクセスできるユーザー」は「全員」とする
「デプロイ」を押してGoogleのアカウントを認証させて表示されたURLをコピーしておく

Javascriptのfetch関数を駆使して送信しよう

先程のURLをお忘れなく

const response = await fetch(
    URL,
    {
        method: "POST",
        body: JSON.stringify({
            // 送信すること (JSONになります)
        })
    }
)
.then((response) => response.text())

.then((data)=>{
    return JSON.parse(data);
})

返ってきたときの値を調べたいときは、例えば返ってきた値の名前を「hoge」とすると

const hoge = response.hoge;

などとなります

またfetch関数にawait fetch、
fetchを処理する関数にasync function hoge() { 〜 }などとつけるようにしてください
でないとせっかく送ってもすぐ訳のわからないやつが返ってきてしまうからです
( その理由はめんどくさいので割愛 )

〜最後に〜注意点

以下の注意点が有ります
・コードが外部から見えてしまいます
　PHPではないので、コードは見えてしまいます。
・遅いです
　GASは基本的に値が返ってくるまでが遅いです。
・めんどくさいです
　更新のたびにURLも違うふうになっていくのでURLを入力するのをできるだけ省く必要があります

まとめ

今日はGASの便利な使い方について解説しました。
とても簡単に書いてしまいましたが、ぜひ参考にしていただけると嬉しいです。
またなにかあったら教えてください！

ご視聴ありがとうございました！