19日目はパルスセンサを用いた心拍の可視化[ラボライフ！],
21日目は重力センサーと加速度センサーです。
大遅刻しました。ラボメンの方ごめんなさい。20日目の記事は木下が担当します。(でした)
1.はじめに
今回話すのはは自力でwebサービスをまともに作ったことの無い筆者がwebサービスを作ってみた話です。
今回はサーバーサイドでよく使われる言語の勉強とかそういった目的ではなく、例えば普段webサービスを作らない筆者ががラボ内のサービス作る必要ができた時に備えて簡単なサービスを作る方法を用意しておくことを目的としています。
今回は試しに自己紹介サイトを作りました。
2.前準備
タイトルにもある通り今回はGoogle Apps Scriptを使います。
理由としては次のとおりです。
・特別に開発環境を準備する必要がない(最近のブラウザとgoogleアカウントがあればOK)
・サーバーをレンタルしたり準備する必要がない(googleのサーバーが頑張ってくれるらしい)
・Java Scriptとある程度互換性がある。
・Googleドライブを利用するので、共有と公開が簡単。
前準備ですが、Googleアカウントを作ってGoogleドライブに接続するだけです。
3.入力ページ作成
ここから実際に作業を進めます。
まず、Googleドライブにアクセスし、Googleフォームを新規に作成します。
新しいタブでGoogleフォームが開かれるので、入力して欲しい情報を質問としてどんどん入力していきます。
質問の形式には、テキスト、段落テキスト(長めのテキスト)、ラジオボタン、チェックリスト、ドロップダウンリスト、グリッド、スケール(5段階評価とかで使いそうなやつ)、日付(西暦)、時間があります。
画面上部にあるライブフォームの表示ボタンを押せばプレビューの確認ができます。
背景デザインを変えたい場合は画面上部のテーマ変更でテーマを決めてください。
デザインも決まったら。入力フォームは完成です。最後に画面右上のフォームを送信ボタンを押して終わりです。この時、もし回答の保存場所を聞かれたら「新しいスプレッドシートを作る」としてOKボタンを押しましょう。そうすれば回答はスプレッドシートに残されます。この作業は10分ほどで出来ました。
ものによると思いますが、短時間で入力ページが作れそうです。
4.処理プログラムの作成
ここが少し時間のかかるところです。
まず作成したフォームの編集画面から[ツール]→[スクリプトの作成]とクリックします。
そしたら新しいタブでスクリプトの入力画面が開かれて、どのスクリプトを作るか聞かれますがそのまま閉じます。(どれか選ぶとそれに合わせた雛形が出てきます。)
ここからスクリプトをカリカリ書いていきます。スクリプト書く上で逆引きGoogle Apps Script逆引きリファレンス様で調べながら書き進めました。フォームで入力された回答はスプレッドシートに書き込まれます。そこでスプレッドシートのセルから値を受け取り、雛形に当てはめたHTML文をメールでフォームに入力してもらったアドレスに送信するというスクリプトを組んでみました。調べながらやって2時間程かかりました。HTMLやCSSや JavaScriptをよく書く人はもっと早く書けそうです。web系やってなくてもこのくらいでできるのは嬉しいです。
5.まとめ
Google Apps Scriptを使ってみていいと思ったところは、環境構築の必要がないところです。2番の前準備のところが通常一番書くことが多くなるところだからです。それこそサーバーソフトウェアを導入して開発の準備をするところまでで記事になちゃったりします。
それがまるまるなくなったのが始める上でとてもうれしいところでした。
それと複数の端末で作業しやすい点も嬉しかったです。Googleドライブ上でそのまま保存してそのまま編集、公開まで出来るのでブラウザ以外必要ないため環境を選ばないのは便利です。
また、レンタルサーバを借りたり、非力な自宅のサーバーを使わないので、費用や処理速度も気にしないでできるのも楽でした。
これから身の回りでほしいと感じたサービスを実装してみようと思いました。
