GASで座席表イメージマップ編に高解像度版追加

このサイトの記事は、技術系ブログであるため、過去の記事に対しても時々技術資料の追加や、コードの訂正、補足情報の追加などを定期的に思いついた時に行っています。

今回は、会社で過去に作ったアプリに対するアップデートとして、「Google Apps Scriptで座席表を作ろう - イメージマップ編」について、２つほど大きな変更を加えたので反映し、高解像度対応版としてサンプルも別途用意しました。

今回の大きな変更点は

1. 座席確保時のユーザ名の文字が滲む現象を高解像度対応で修正
2. ユーザの文字の数に応じてバックのBoxのサイズを自動修正

を加えてあります。canvasはそのまま文字を描画すると最近の高解像度なPCだと文字が滲む現象が生じるので、canvasのサイズをデカくして、CSSでは実サイズを指定するというトリッキーな手法を使って、滲まないきれいな文字が表示されるように調整しました。

また、ユーザ氏名の文字数に応じてBoxの幅を自動修正するようにし、きれいに収まるように調整を加えてあります。そのため、3枚目のレイヤに文字表示をするように加工を加えています。同様の事例で困ってる場合には、この高解像度対応版で運用をすると良いでしょう。