シャッフル主任の進捗報告

興味のあるものを作ります。進捗を不定期にご報告します。

そうだ、教祖になろう。創世記 第2章2節 データ構造を考える

私は私を生きてくんだ 私は私で生まれたんだし


画面イメージをパワポで書いてみました。
パワポといっても実際はPCバンドル版の
キングオフィスなんだけど。
f:id:chief-shuffle:20191111184448p:plain

この文章の各所をランダムで変えられるようにします。
定義すべき項目はこんな感じになりますね。
バリエーションかさ増しのために数値に関わる部分は
ランダムで変動するようにしてみます。

  • だれが
  • いつ生まれて(範囲内のランダム)
  • どう生きて
  • どういう感じで
  • いつ死んだか(範囲内のランダム)

無数の命が輪廻している感じを出すには
かなり膨大なリストを書かないといけません。
通勤中とか就寝前とか思いついたときにすぐ書き足せる方法はないでしょうか。

私がよく使っているWebサービスGoogleスプレッドシートがあります。
フリーで使えるクラウドExcelです。
フォーマットを整えるとかの作業はPCで
ちょこっとした追加ならスマフォでできます。
試しに数行書いてみました。
f:id:chief-shuffle:20191112234200j:plain

これに随時追記していき、
サーバサイドで取り込んで使いましょう。

取り込みはサーバサイドからAPIApplication Programming Interface)を通して行います。
APIとは、プログラムがサーバにアクセスして
データを取得したり登録したりするための
接続ポイントです。
人がアクセスするわけではないため、画面を介さず
データをやり取りできるようになっています。
GoogleスプレッドシートAPI仕様を見てみましょう。

developers.google.com

rangeパラメータで読む領域を、fieldsパラメータで取得する列を指定するようです。
取得されてくる形がよくわかりません。
このAPIを使ってみた方のブログがありました。

qiita.com

レスポンスの中のvaluesの中に1行ずつ、

{
  "range": "'シート1'!ある範囲",
  "majorDimension": "ROWS",
  "values": [
    [
      "アジアの小国の王様",
      "1000",
      "500",
      ...
    ],
    [
      "アジアの小国の王子",
      "970",
      "470",
      ...
    ]
  ]
}

という感じでで取れそうですね。
これをサーバサイドの処理で

あなたは(who)に生まれ変わりました。
(who)は(birth-min~birth-max)に生まれました。
(way-of-life)生き
(cuase-of-death)(death-min~death-max)死にました。

とつなげば表示する文章が作れそうです。

サイト訪問者が想像しやすいように
実際にありそうな生き方を中心に書いていきます。
未来の生命についてはリアリティを出すために慎重に考える必要がありそうです。

サーバサイド(極楽)サイド再び


前回アーキテクチャを考えるといいながら
AWSAmazon Web Service)使うよ。
だけで終わっていました。
Googleスプレッドシート含め、
少し具体的に書いてみましょう。
f:id:chief-shuffle:20191112234230p:plain

システム構成図です。
AWSが公開しているアイコンを使いました。
殺風景な我がブログに彩りが!

各要素の配置がわかりやすくなりました。
HTMLとJavaScriptを取得する流れと
1データを取得する流れが違うのは前回の通りです。
CloudFrontでS3とAPI Gatewayへのアクセスを統合します。
Route53はサイトを独自ドメインにするのに必要です。
Googleスプレッドシートには1データごとにアクセスしていますが、速度を考えると事前にAWS内のデータベースに取り込むとかした方がよさそうです。

また、Googleスプレッドシートにアクセスするには認証が必要なため、認証情報を格納しておく場所も必要そうです。

こう見るとサーバサイドが多いようですが、
クライアントサイドのHTMLやJavaScriptを生成する機構は今回はしょっています。