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

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

今回の大きな変更点は

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

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

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

 

※このあと確保済みの席をクリックすると、ユーザの詳細情報が出るようにダイアログを追加する予定です。


サンプル:高解像度対応だと文字がハッキリ表示される!!

共有してみる: