「javascript / Ajax / Google Apps」カテゴリーアーカイブ

javascriptとjQuery、Googleマップやスプレッドシートを使うTips。ちょっとした社内ツールなど。

Googleスプレッドシートでタイムカード(2)レコーダー画面の作成

time_card
この画面↑は弊社で実際に使っているタイムカードです。
以下、作成の手順をご紹介しますので、デザイン等はご自由にどうぞ。
今回は、1.スプレッドシートを追加し、2.[出勤][退勤]等のボタンの絵を貼り付け、3.記録するページを追加します。

1.スプレッドシートの追加

Googleドライブを開きます。
左上の「作成」から新規にスプレッドシートを作ります。
time_card_making01

2.ボタンの作成

作成したシートにボタンの図形を追加します。
メニューから「挿入」>「図形描画」で図形描画ウィンドウを開きます。
time_card_making02

「図形」や「テキストボックス」ツールを使ってお好みで作ります。
最近はフラットなボタンが流行っていますので、角の丸い枠にしてみました。
time_card_making03

ボタンの位置をスプレッドシート上で調整します。
time_card_making04

退社ボタンと状況確認ボタンも同じように作成します。
一つの絵に一つのスクリプトを割り付けますので、ボタンの絵を複数描いた一つの絵を作るのではなく、出社とか、退社とか、ボタン別に作成し、別々に保存して下さい。
time_card_making05

3.記録用ページを追加

記録を付けるシートを追加しておきます。
シート2は、スクリプトがデータを書き込むだけですので、空のままで構いません。
time_card_making06

2つのタブをわかりやすい名前に変更します。
time_card_making07

ここではシート1をTimeCard、シート2をTimeCardLogにしました。
time_card_making08

今回はここまで。
次回は社員名簿を作成し、さらにスクリプトの一部をご紹介します。