Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

これなに?

Group.jpg
スプレッドシートに OKR の目標を書くと、社内に閉じて Web でツリー表示されるツールを作りました。

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

概要

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

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

そもそも OKR ってなに?

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

使用技術

Google Apps Script

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

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

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
ファイル > コピーを作成 を選択

3. スクリプトを開く

スクリーンショット 2019-04-22 16.18.42.png
ツール > スクリプトエディタ を選択

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

スクリーンショット 2019-04-22 16.21.08.png
関数を選択 > doGet を選択し、 ▶ を選択

スクリーンショット 2019-04-22 16.22.36.png
承認を求められるので、 許可を確認 を選択

スクリーンショット 2019-04-22 16.22.47.png
実行するアカウントを選択

スクリーンショット 2019-04-22 16.23.00.png
スプレッドシートに対する許可を求められるので、 許可 を選択

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

スクリーンショット 2019-04-22 16.28.26.png
公開 > ウェブアプリケーションとして公開 を選択

スクリーンショット 2019-04-22 16.52.44.png
アプリケーションにアクセスできるユーザー でドメインを指定して、 更新 を選択

スクリーンショット 2019-04-22 16.28.57.png
URL が生成されるので、こちらにアクセス。

スクリーンショット 2019-04-23 17.28.39.png
こんな感じで表示されれば OK

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

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

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

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

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

スクリーンショット 2019-04-22 17.00.18.png
ファイル > プロジェクトのプロパティ を選択

スクリーンショット 2019-04-23 17.31.09.png
スクリプトのプロパティ > 保存 を選択

スクリーンショット 2019-04-23 17.31.22.png
カスタマイズできました!

まとめ

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

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

tanabee
Vice President, RPG TEC. Google Developers Expert / Licensed Scrum Master
https://tanabee.github.io
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした