Google Apps Scriptで組織図を作ろう【GAS】

2月前や8月前、また4月や9月など人事異動や転勤、新規採用そして退職。これらの移動に伴って、また組織改編に伴って毎回手動で組織図を作成している会社は多いでしょう。Excelのスマートアートなどの部品パーツを使って手動で作るわけですが、非常に面倒で時間の掛かる作業です。場合によっては、1日時間を潰してしまうでしょう。

Google Apps Scriptの場合はスプレッドシートに定義されたデータを書き換えるだけで、自動的に組織図を生成する事が可能です。色々なライブラリがありますが、今回はベタにGoogle Visualization APIを用いて組織図を作成してみたいと思います。また、クリックする事でその人の社員IDを元に情報を引き出すイベントも追加しています。

Vue.js対応のライブラリを使って同様に組織図を生成する場合の手法を以下のエントリーにて行っています。

Google Apps ScriptでVue対応組織図を生成する【GAS】

今回使用するスプレッドシート等

ソースコード

GAS側コード

  • GAS側はデータの塊を取得して返したりする事が主な仕事です。
  • また、指定のIDを元にdataシートからレコードを返すのは情報データを返すための関数です。組織図のクリック時に発動します。

HTML側コード

今回のアプリケーションの主役はHTML側です。組織図というかChartなのでグラフのライブラリを使っています。D3.jsjQuery OrgChartと違って高機能ではありませんが、小さな組織のデータを管理するには十分なライブラリです。大きな組織や細かい管理が必要な組織の場合には、D3.jsなどのライブラリを使って表現すると良いでしょう。

  • チャート表示用の変数およびデータ生成用の変数はグローバル変数として宣言。
  • 冒頭で変数dataに対してnew google.visualization.DataTable()にて初期化を実行後、まずはbusyoシートのデータから生成しています。
  • その後dataシートのデータを処理し、チャートを描画しています。
  • event.addListnerにて各組織図のパーツをクリック時に社員IDの値を取得、それを元にシートから情報列の情報を取得してalertで表示するようイベントハンドラーを加えています。
  • allowHtmlをtrueにするオプションを指定しないと、パーツ内でHTMLタグを利用する事ができません。

実行と結果

データの整備方法

通常組織図は部署だけを取り上げて表示しますが、今回の組織図は部署にさらに人がぶら下がる形式にしました。そのため、データの整備方法が少し変則的です。以下の2つのシートの整備方法を習得できれば、また、構造を理解できれば人事異動・新規採用・退職などの発生をトリガーとして自動的に組織図の改変まで行うことが可能になります。

もう組織図づくりに1日時間を掛けたり漏れやミスに振り回される必要はありません!!

busyoシート

ここは組織図の根幹である「部署」について整備する項目です。

部署名、ぶら下がり先上位組織、そこを管理する長の社員ID、そこを管理する長の氏名の4項目を整備します。リーダー名が赤字で表示されますが、1人目のメンバーは部署名に対してぶら下がりますので、注意!!

dataシート

リーダーフラグがあるものは、データ生成時には利用されません。情報データ参照時に利用されるようになります。ですので、部署側で整備したからといって、それらの管理職をここに記載しないとクリック時に情報が引き出せなくなります。また、部門管理職はリーダーフラグを付けておきましょう。

他のメンバーは並び順の列が変則的で今回の一番の注意点です。そのまま全員を部署にぶら下げてしまうと、横に広がってしまい、チャートとして見づらくなるため、今回は前の人にぶら下がるように設定します。

  • 1人目は部署名を指定してぶら下げます。
  • 2人目以降は前の人(今回でいえば1人目、次の人は2人目といった具合)にぶら下げます。

こうする事でメンバーが部署に対して縦にぶら下がっているかのように見え、扱いやすい組織図になります。

※注意点として名前に対してぶら下がるので、同姓同名が居た場合ややこしい事になります。

組織図の生成

スプレッドシートのメニューよりセットアップ⇒初期化は必ず実行しましょう。スプレッドシートのIDを取得し、スクリプトプロパティに格納され、以降データの取得時に利用されます。各セクションはそれぞれ個人に紐つけてあり、IDを元に検索し、その人の情報をalertで表示するようにコードが組まれています。

組織図の要素の幅を指定する

Visualization APIのOrgChart、スプレッドシート連動させると非常に便利な反面、融通がきかないシーンが出てきます。あまりにも部署が多く横に広がってしまう場合、そのままの状態では、横幅に収めようとする為に1つ1つの要素の横幅が異常に狭くなる。これをある程度の幅を維持しつつ、横スクロールで全体を見えるようにする為にはちょっとした工夫が必要です。

ポイントは2つ

  • chart_divの横幅を任意のサイズで指定する(横スクロール幅を指定)
  • 要素のスタイルシートで幅を指定する(1個ずつの要素の幅を指定)

chart_divの横幅は直接インラインで指定してみました。かなり部署数が多いので、横幅をかなり広く取っています。

1つ1つの要素はこれでも具合がよろしく無いので、以下のようにスタイルシートを指定します。

これで横スクロールで幅をもたせて、1個ずつの要素の幅を指定できるため、異常に狭い要素で表示といったことが回避可能です。また、要素の細かな指定としてはdrawをする際にクラスを指定できるので、それを用いても良いかもしれません。

手動で作る場合の参考動画

Googleスプレッドシート 組織図を手軽に作る方法

あまり知られていない、パワーポイントで効率的に組織図を作る方法 [PowerPoint小技・小ネタテクニック]

関連リンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)