goohub-guiは，goohub の操作をGUIで行うためのシステムである． ここで，goohubは，Google Calendarとの認証を行い，予定の取得や送信を行うCLIツールである． goohub-guiを利用することで，ルール(funnel, filter, action, outlet)の作成，ルールの閲覧，カレンダの閲覧をGUI から行える．

• node 10.5.0 ~
• npm 6.9.0 ~

nodeのインストールについては，以下を参考にすること． なお，npmについては，nodeをインストールすると同時にインストールされる(参考)．

• nodeのインストール方法

goohub-guiは，goohub の操作をGUIで行うためのシステムである． このため，goohubのリソースを管理するHTTPサーバが立っていることを前提として，システムが動作する． よって，goohub-guiを利用するためには，最初に，goohubを利用できるようにする必要がある．

1. goohub setup

   goohubのREADME に従い，goohubのsetupをする．

2. Run HTTP server

   $goohub sinatra
       

   上記コマンドにより，HTTPサーバが localhost:4567 で稼働する． goohub-guiは，上記サーバを介して，goohubのリソースにアクセスする．

上記の goohub and HTTP sercer setup でgoohubのリソースを管理するHTTPサーバを立てたら，次にgoohub-guiのsetupをする．

1. Clone code

   $ git clone git@github.com:kjtbw/goohub-gui.git
       

2. Install librarys

   $npm install
       

3. run

   $npm start
       

   成功すると， localhost:3000 に，サーバが立つ． ブラウザからアクセスすると，TOP画面が表示される．

goohub-guiを利用することで，ルール(funnel, filter, action, outlet)の作成，ルールの閲覧，カレンダの閲覧をGUI から行える． goohub guiは，現在以下の画面をもつ．

• ルール(funnel, filter, action, outlet)の詳細
• exec_funnel(goohubのsettings.yml内のデータ)の詳細

goohubとgoohub-guiを組み合わせると，以下のことができる．

• guiを利用したルール(funnel, filter, action, outlet)の作成
• guiを利用したルールの適用状況(exec_funnel)の設定
• guiを利用した予定の閲覧
• ルールの自動実行

上記のことを行う場合，システムの構成としては以下のようになる．

1. ルール実行部

   goohubの server_test.sh を用いて，カレンダの更新に合わせて自動でfunnelを適用する．

2. リソース管理部(HTTPサーバ)

   $goohub sinatra でHTTPサーバを localhost:4567 に立てる． このサーバは，goohub-guiとリソースのやりとりをする．

3. GUIサーバ部

   goohub-guiのサーバを localhost:3000 に立てる． このサーバは，ユーザがブラウザからアクセスするサーバである．

goohub-guiのディレクトリ構成は以下のようになっている．

.
├── README.org
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── ActionCollection.js
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── ArrayObjectList.js
    ├── FilterCollection.js
    ├── Funnel.js
    ├── Home.js
    ├── IoRedis.js
    ├── List.js
    ├── MyNavbar.js
    ├── ObjectList.js
    ├── PageOfAction.js
    ├── PageOfCalendar.js
    ├── PageOfCorrespondenceTable.js
    ├── PageOfFilter.js
    ├── PageOfFunnelList.js
    ├── PageOfMakeAction.js
    ├── PageOfMakeFilter.js
    ├── PageOfMakeOutlet.js
    ├── PageOfMakeRuleName.js
    ├── PageOfSetting.js
    ├── PullDown.js
    ├── SubmitButton.js
    ├── Switch.css
    ├── Switch.js
    ├── TextBox.js
    ├── db
    ├── events.js
    ├── index.css
    ├── index.html
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js

各ファイルやディレクトリの説明を以下に示す．

src内には，コンポーネント(ボタンやプルダウン等)と，ページ(PageOf*.js)のファイルが置いてある． 開発者は，新たに利用したいコンポーネントがあれば，まずそのコンポーネントを定義し，その後，ページを作成する．

また，ページのルーティングは， src/index.js に定義されている．