GASを用いた画像投稿サービスの構築 part1
目的
- ユーザから画像投稿をしてもらう必要のあるサービスの展開を進めている
- 投稿された画像や日時などを自動で保存・リストアップする機能が欲しい
- 投稿された画像を他のユーザにも公開し、共有できる形にしたい
サービスの概要
構成
画像投稿UI(ユーザインターフェース)と投稿画像UIからなる。いずれもGAS(Google Apps Script)を用いて構築する。GASを選んだ理由は、自分でサーバを管理する必要がないこと、Google SpreadsheetをDB(データベース)代わりに使えるといった手軽さのため。
GASについて
GASは「.gs」という拡張子を持つGoogle Apps Scriptのスクリプトファイルと、htmlファイルのみからなる。Google Apps ScriptのスクリプトはJavaScriptをベースとしたもので、JavaScriptにいくつかのGAS専用の関数が組み込まれたような言語となっている。一方、JavaScriptそのものやCSSを使いたい場合は、htmlファイルの中にその内容を記述する。
GASの基本的な事柄については以下のサイトが大変参考になる。
「Google Apps Script」の記事一覧 | いつも隣にITのお仕事
画像投稿UI
- 投稿された画像や付帯情報(投稿日時などの投稿に関する情報)はそれぞれGoogle SpreadsheetとGoogle Driveに保存される。
- スプレッドシートには画像の名前とリンクが記録されることで、付帯情報と画像の紐づけがなされる。
- 画像のファイル名は投稿者のつけた元の名前から、投稿日時を含んだファイル名に変更される。
- 画像、付帯情報などはHTMLのフォームから送信される。
投稿画像表示UI
- Google Spreadsheetに記録された付帯情報(個人情報を除く)とGoogle Driveに保存された画像を投稿画像表示UIにリストで表示する。
スプレッドシートへの記録のフォーマット
スプレッドシートに記録する情報のフォーマットを規定する。ここでの要件は3点。
- 投稿日時を記録
- 投稿場所を記録
- プログラムで扱いやすいように投稿場所にエイリアスを予め決めておき、エイリアス名も記録
- 画像ファイル名を記録
- Google Drive上にある画像ファイルへのリンクを記録
GASを用いる場合の注意点
GASではWebページに相当するHTMLファイルは1度に1つしか生成できない。そのため、通常行われているようなリンクを使ったページ遷移はできない。ただし回避策はあり、URLのパラメータを用いて疑似的にページ遷移を実装できる。
【参考ページ】
【Google Apps Script(GAS)】1つのプロジェクトで複数のWebアプリケーション（Webページ）に遷移する（HtmlService）
GoogleAppsScript(GAS)でページ遷移を擬似的に実装する方法 - Qiita
今回は画像投稿UI、投稿画像表示UIの2つのページを用意しているが、上の疑似的なページ遷移は利用せず別のGASプログラムで構築した。理由はメンテナンスを容易にするため。
画像投稿UIは現実世界に掲示するQRコードと紐づいているため頻繁に修正はできない*1が、投稿画像表示UIはオンラインでのみアクセスされるページであるため頻繁に修正が入っても問題がない。
1つのGASプログラム内に投稿画像UI、投稿画像表示UIを設けると、投稿画像表示UIで大幅な変更が生じた場合に公開するURLが変更になり、投稿画像UIのQRコードも変更する必要が出てきてしまう。
