Clocklyはユーザによるプログラミングを可能とするカレンダシステムである． ユーザはビジュアルプログラミングによって，カレンダの集計や一括コピーなどの操作ができる． また，Google Calendarなどの他のカレンダシステムと連携しデータのやり取りを可能とする．

Clocklyは以下の機能を持つ．

• プログラムの作成

  Google Blocklyを用いたビジュアルプログラミングによってカレンダ操作をプログラミングできる．

• プログラムの即時実行

  ブラウザからユーザが作成したプログラムを実行できる．

• プログラムの自動実行

  カレンダの更新を契機にプログラムを自動で実行できる．

• node 18.16.0
• npm 9.5.1
• Ruby 2.7.0
• bundler 2.2.17

GitHubよりClocklyのリポジトリをcloneする．

$ git clone [email protected]:kimura3104/Clockly.git

以下のコマンドを使用し，.env.exampleから.envをコピーする． .envは外部のカレンダシステムと連携する際に必要となるOAuthのClient IDとClient Secretを格納する． 現在はGoogle Calendarとのみ連携可能であり，詳細はGoogle Calendarとの連携で説明する．

$ cp .env.example .env

• Gem のインストール

  $ bundle install
  

• package のインストール

  $ npm install
  

以下のコマンドを使用し，ClocklyのHTTPサーバを起動する．

./start.sh

sinatraサーバがlocalhostで起動する． また，プログラムの自動実行スクリプトが実行される． 自動実行スクリプトは60秒ごとにカレンダの更新を確認を行う．

• .envの内容は以下のようになっている．

  1 GOOGLE_CLIENT_ID=XXXXXXXXXXXXXXXXXXXX
  2 GOOGLE_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  3 GOOGLE_CALLBACK_URL=http://localhost:4567/auth/google_oauth2/callback
  4 TOKEN_STORE_PATH=./token_store.yml
  5 DEFAULT_USER=default_user
  

• .envファイルにGoogleCalendarAPIのClient ID, Client secretをそれぞれ入力する．

• Googleの認証

  1. ブラウザからClocklyにアクセス(デフォルトは4567番ポート)
  2. メニューバーから「Settings」をクリックして，設定画面に遷移し「Googleと認証」ボタンを押下
  3. Googleの認証画面が表示されるので連携するアカウントのメールアドレスを入力

Clocklyを利用することで，プログラムの作成，プログラムの閲覧，カレンダの閲覧をブラウザから行える． Clocklyは以下の画面をもつ．

1. メニューバーから「make rule」をクリックし，プログラム作成画面へ遷移
2. 「ルール名」の項目にプログラムに付ける名前を入力
3. 画面左側のツールボックスをクリックし，そこからブロックをドラッグアンドドロップで画面**のワークスペースに配置し，ブロックを連結させプログラムを作成
4. 「ルールを作成」ボタンを押し，プログラムを保存

誤動作防止のため，カレンダの書き換えの可否を設定できる． 書き換え不可のカレンダはプログラムが実行されても何も変更されない．

1. 設定画面の「書き換え可能なカレンダ一覧」から書き換えるカレンダにチェックを入れる
2. メニューバーから「list」をクリックし，プログラム一覧画面へ遷移
3. 即時実行の場合は，実行したいプログラムの「実行」ボタンを押下
4. 自動実行の場合は，自動実行を有効にしたいプログラムの「自動実行」にチェックを入れる

Webページの開発をする際にはsrc/以下にはWebページのソースコードが置いてある．

ビジュアルプログラミングで用いるブロックはsrc/Block.jsで定義されている．