Google Apps ScriptでSVGを使ったイメージマップを操作 – 応用編【GAS】

前回の記事にて、SVG画像を利用した座席表アプリの基本構造を作りました。しかし、実用するにはまだ全然機能が装備されていません。そこで、今回はこれを最低限利用できるように色々と装備をします。

今回装備する内容は、座席のキープ、座席の情報、固定席の場合の処理、座席のリリース、毎日24時に自動でクリアの5点他、不都合が出ないように色々とエラートラップを追加します。

Google Apps ScriptでSVGを使ったイメージマップを操作 – 基礎編【GAS】

今回使用するファイルやツール

今回は前回の素材を更に拡張し、多くの席を用意し、割と自由に配置しています。また、SVGデータに対しても今回は更に手を加えています。また、UIを整える為に、Vue.jsおよびVuetifyも導入しています。

PC基準で作っていますが、Vuetifyの利用とSVGの自動スケールによって、またGAS側でもレンダリングにてレスポンシブ対応コードを入れています。

図:こんな感じのUIを構築します。

事前準備

実務で使う為に前回のSVG画像データおよびスプレッドシートに手を加えています。

SVGデータの改造

今回のSVG画像は机の部分が画像ファイルとして取り込んでる為、前半部分がテキスト化された画像データになっています。大分したのほうに、座席に関するドローのデータがあります。

改造した部分は

  • 全てのaタグのonClickは、以下の関数にし、gタグ直下のIDを取得するようにしています。

    seatA1といったようなIDを引数として取り、seatinfo関数に渡すようになっています。
  •  タイルの縁取りであるstrokeの色を青に変更し、styleとしてstroke-width:3を設定。青い縁取りを追加しました。
  • textのサイズを小さめにして、ユーザ名が入り切るサイズに調整しました。
  • 初期の座席の値は空にしました。

以下が完成形の1座席分のデータです。

シートデータの準備

2つのシートのみとし、シートデータは前回同様ですが、増やした座席の分だけデータを増やしています。また、今回より

  • 固定フラグにチェックが入ってる場合は、表示した場合灰色の席となり、キープできなくなるよう制限を加えるになります。
  • ユーザリストからの表示名とIDを入れるようになります。入ってる場合キープ済みとなります。

また、トリガーにより毎日24時にこれらのデータのうち、固定フラグがオンになっていないものについてはデータが自動でクリアされるようになり、翌日はまたキープできるようになるので、リリース忘れしても問題ありません。

セットアップ

必ず利用する場合は以下の2つを実行して、整備します。スプレッドシートを開きメニューにある「座席表Plus」をクリックし

  • セットアップ :スプレッドシートのIDをプロパティに格納します。
  • リセットトリガー設置 :毎日24時にシートデータの固定席以外の座席登録をリセットする関数を実行するトリガーを設置します。

上記のセットアップが完了したら、以下の手順でウェブアプリケーションとして公開する必要があります。

  1. スクリプトエディタを開く
  2. 右上のデプロイをクリックし、デプロイを管理をクリック
  3. 左上からウェブアプリを選び、ユーザ実行権限とアクセスできるユーザを指定
  4. デプロイをクリックして、ウェブアプリのURLを取得する

図:デプロイして完了

ソースコード

HTML側コード

  • シートデータロード時に固定席の場合には灰色、キープ済みの席は黄色へカラー変更する為のコードが入っています。
  • Vue.jsおよびVuetifyを導入してUIを整えています。ツールバーには座席のリリース用ボタンを設置しています。
  • リリース後やキープ後には再度シートデータをリロードするようにしています。
  • UIを整える為のいくつかのVuetify用のCSSを追加しています。
  • 各種メッセージと確認用のダイアログ、スナックバーを追加しています。

ここに、データのリフレッシュ用の機能や、誰がどこに座っているのか検索する機能(検索後、タイルのstrokeカラーを赤にして場所を表示)といった機能を追加予定です。

図:座席のキープ時の問い合わせダイアログ

図:固定席はキープ出来なくしてあります

GAS側コード

今回追加したコードは以下の通り。トリガーの設置に関しては省略していますが、サンプルスプレッドシートには入っています。主に、シートデータを読み込んでHTML側へ返すコード、キープ時のコード、リリース時のコードになります。

  • すでにキープ時の場合は、エラーを返すようにしました。
  • 同一ユーザがキープ時の場合、ダブルブッキング防止の為にエラーを返すようにしました。
  • キープしていない場合は、スプレッドシートに表示名とIDを、自動取得したメアド(GetUser関数)に基づいて探索し、書き込みをするようになっています。
  • トリガーが24時にシートをクリアするコードを追加
  • リリース時はシートデータの該当のレコードから表示名とIDを消去します。

表示サンプル

フルサイズはこちらをクリック

固定席(灰色)をクリックすると、エラーメッセージが出ます。また、誰かがキープ済みの席(黄色)は、そのユーザの情報を表示するダイアログを表示し、キープ済みではない場合には、座席取得の為のダイアログが表示するようになっています。すでに座席を自身でキープ済みの場合はダブルブッキングを阻止する仕組みが入っています。

帰宅時は右上のアイコンをクリックして座席のリリースをするようにします。

フリー素材を使ってみる

今回のサンプルを応用する事で、例えば会議室予約システムを構築したり、備品貸出システムを構築したり、またカレンダー式予約管理システムをかなりビジュアルで手軽に構築する事が可能になります。今回、SVG画像素材Library.comというサイトより素材をお借りして、作ってみました。東京都のベクター素材を利用してみたいと思います。

ただ、変換掛けると文字化けがするので、今回はこちらのサイトのPowerPointファイルを変換サイトでSVGに変換して使っています。Class指定、Fill・stroke・stroke-widthの指定、IDの指定等を加えています。

図:IDやスタイルの指定はInkscape上で完結します

GAS側コード

今回はGoogle DriveにアップロードしたSVG画像を直接ロードします。以下のようなコードで直接ファイルを読み込んでHTML側に反映することが可能です。SVG画像はUTF-8の文字コードになってるので注意が必要です。

直接ファイルをロードはDriveAppにてgetFileByIdに続いて、getBlobを取得し文字コード指定のgetDataAsStringで指定するだけ。中身はテキストなので、これだけで取得が可能です。

HTML側コード

表示するだけで、図形に対して特に関数の割当等は行っていません。

表示サンプル

図:東京マップを描いてみた

フルサイズはこちらから開きます。

関連リンク

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。