スプレッドシートに OKR を書くとツリー構造で可視化されるツールを作ってみた

## これなに？

![Group.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/50aad3ad-5f0c-b8f3-f644-14eee098b9b8.jpeg)
スプレッドシートに OKR の目標を書くと、社内に閉じて Web でツリー表示されるツールを作りました。

こちらで実物見れます: http://bit.ly/okr-tree-sample

## 概要

[グロービス](https://qiita.com/organizations/globis) の開発部門で OKR のエッセンスを取り入れた目標管理をはじめました。 OKR ではアラインメントの観点で、他のチームがどういった目標を掲げているのか見える化することが大切なので、見える化の仕組みを作ってみました。

使ってみたいという方のために、導入方法も以下に書いておきます。

## そもそも OKR ってなに？

ここでは OKR について説明はしませんので、 OKR についての説明は以下ご参照ください。書籍は 2 冊とも読みましたが上の方が個人的おすすめです。

* Web
    * [Google re:Work - ガイド: OKRを設定する](https://rework.withgoogle.com/jp/guides/set-goals-with-okrs/steps/introduction/)
    * [OKRとMBOの共通点・相違点は何か？即時に説明できるようなるために土台を理解しよう](https://www.aldoni-hr.com/okr-and-mbo)
* 書籍
    * [Measure What Matters 伝説のベンチャー投資家がGoogleに教えた成功手法 OKR](https://www.amazon.co.jp/dp/4532322405)
    * [OKR(オーケーアール) シリコンバレー式で大胆な目標を達成する方法](https://www.amazon.co.jp/dp/4822255646)

## 使用技術

### [Google Apps Script](https://qiita.com/tanabee/items/e51f107f1e95a42cc636#google-apps-script-%E3%81%A8%E3%81%AF)

Web 公開したいけど、社内のみにアクセス制限をつけたいというニーズがあると思いますが、G Suite 導入企業だと Google Apps Script を使って Web 公開する際に、メールアドレスのドメインでアクセス制限することができるので認証系のコードを書かなくてすんで楽です。

Google Apps Script で何ができるかは以下などご参照ください。

* [GAS ビギナーが GAS を使いこなすために知るべきこと 10 選
](https://qiita.com/tanabee/items/2c51681396fe12b6a0e4)
* [Google Apps Script ハンズオン資料](https://qiita.com/tanabee/items/4a5056f468ae71d8d648)
* [スプレッドシートにカスタムメニューを追加して、拡張機能を実装する方法](https://qiita.com/tanabee/items/dea49d7ab2df17a05b07)

### [OrgChart](https://github.com/dabeng/OrgChart)

ツリー構造で表示するためのフロントエンドライブラリとして使いました。そのまま使うと表示領域がせまくて用途を満たせなかったので、 CSS でカスタマイズしてます。

## 実装について

コード全文は github で公開してますので、そちらをご参照ください。HTML 部分をカスタマイズすれば、OKR 以外の用途にも使っていただけます。グロービスデザイナーの @tsubasa_tanaka283 さんにデザイン作っていただきました :bow: 

https://github.com/tanabee/okr-tree



## 導入方法

### 1. スプレッドシートを開く

以下のスプレッドシートを開く。（会社利用の場合には、事前に会社アカウントで Google ログインしてください。）

http://bit.ly/okr-tree

### 2. マイドライブにコピー

![スクリーンショット 2019-04-22 16.14.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/91d8bd10-d8ed-33fa-2bc4-7596a580b213.png)
**ファイル** > **コピーを作成** を選択


### 3. スクリプトを開く

![スクリーンショット 2019-04-22 16.18.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/dc04b612-f95f-8020-90b8-3169d68f1433.png)
**ツール** > **スクリプトエディタ** を選択


### 4. スクリプトに対して、スプレッドシートアクセスの権限を与える


![スクリーンショット 2019-04-22 16.21.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/574061cd-33c0-26a1-0bf0-d4e22c9e897a.png)
**関数を選択** > **doGet** を選択し、 ▶ を選択


![スクリーンショット 2019-04-22 16.22.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/c6485759-fddf-2bce-c2bb-ab6401d66a1e.png)
承認を求められるので、 **許可を確認** を選択

![スクリーンショット 2019-04-22 16.22.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/18a14918-f027-81f9-fa75-8bb94e456ee0.png)
実行するアカウントを選択

![スクリーンショット 2019-04-22 16.23.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/bfe7b3a9-f168-73d2-a642-660706afb4e0.png)
スプレッドシートに対する許可を求められるので、 **許可** を選択

### 5. Web アプリケーションとして公開する

![スクリーンショット 2019-04-22 16.28.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/1f19cbee-9bf7-17fd-96f5-a56fa5ccbc13.png)
**公開** > **ウェブアプリケーションとして公開** を選択

![スクリーンショット 2019-04-22 16.52.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/e24c47fa-9aca-32d7-d084-41e6ffae44c6.png)
**アプリケーションにアクセスできるユーザー** でドメインを指定して、 **更新** を選択

![スクリーンショット 2019-04-22 16.28.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/4ab061b9-29f6-a62d-c3aa-b42bd58b75b9.png)
URL が生成されるので、こちらにアクセス。

![スクリーンショット 2019-04-23 17.28.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/bb19756b-4478-370f-07d5-1d88d23c6dd2.png)
こんな感じで表示されれば OK

### 6. 組織の OKR をスプレッドシートに記入する

導入は完了したので、あとはスプレッドシートに正しく記入していけば OK。

### [おまけ] 見た目のカスタマイズ

少しだけ簡単にカスタマイズできる項目を用意しました。

* BRANCH_COLOR: ツリー構造を表す線の色
* BOX_COLOR: ボックスの色
* BOX_WIDTH: ボックスの幅
* BOX_HEIGHT: ボックスの高さ
* UNDERLINE_COLOR: 組織名の下線の色

![スクリーンショット 2019-04-22 17.00.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/71ffcf49-3444-6171-9a25-6bf7996c9bb5.png)
**ファイル** > **プロジェクトのプロパティ** を選択

<img width="575" alt="スクリーンショット 2019-04-23 17.31.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/4f88200e-c2af-4046-9cd2-39cdef266d43.png">
**スクリプトのプロパティ** > **保存** を選択

![スクリーンショット 2019-04-23 17.31.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/d8071620-8f68-4667-8c4d-ac8379d4b85c.png)
カスタマイズできました！

## まとめ

Google Apps Script と OrgChart をうまく組み合わせて、社内に閉じた OKR の見える化ができました。総工数も 1 日以内でサクッと作れたので満足。

OKR やってるけど、スプレッドシートで管理してて見える化できないと思ってる方は是非ご利用ください。また、 CSS 久しぶりに触ったので、こんな書き方の方がよいよなどあれば、プルリクも大歓迎です。