組織図

こちらの記事は古い内容です。最新の記事はこちらのサイトになります。

Google Apps Scriptは、Visualization APIでサポートされているすべてのグラフを使うことができません。そのため、Googleガジェットでしか使えないグラフというものがあります。そのうちの１つがこの組織図。

グラフの中でも最も特殊なグラフといえますが、このグラフもSpreadsheetから情報を読み取り生成することが可能です。故に、スプレッドシート側の情報を修正すると組織図を変更することができるスグレモノといえます。但し、よりカスタマイズしようと考えると、スプレッドシートのセルの中に奇妙な文章を書かないといけない為、扱うのは若干難しい部類といえます。

今回、シート４枚目を追加し、記述をしました。このシートの形式はテンプレートです。また、複雑な組織図を構築したい場合には本プログラムソースに、最終的にテンプレートの形を守った状態で、データテーブルに流し込んで挙げなければ行けません（例えば、人員の組織図に於いて部署も役職も載せたいみたいな場合）。

グラフ本体

ソースコード

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="sample1" />
<Content type="html">
<![CDATA[
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

//パッケージをロード（orgchartを指定する）

google.load('visualization', '1', {packages: ['orgchart']});

google.setOnLoadCallback(initialize);


//初期化

function initialize() {

    // The URL of the spreadsheet to source data from.
        var query = new google.visualization.Query(
            'https://docs.google.com/spreadsheet/pub?key=0AjN10lCzkUqkdHJqaUxkaUdyOUR3VGQwM3VHWTdWcGc&single=true&gid=3');
        query.send(draw);
      }



//レスポンスを受けて組織図を作成

function draw(response) {

if (response.isError()) {

          alert('Error in query');
        }


      // データテーブルを作成

var data = response.getDataTable();

      var chart = new google.visualization.OrgChart(document.getElementById('gct_sample_org'));


//オプション指定

var options = {

allowHtml: true,

};

      // 組織図を表示する
      chart.draw(data, options);

}

</script>

  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="gct_sample_org" style="width: 900px; height: 500px;"></div>
  </body>
</html>
]]>
</Content>
</Module>

ポイント

組織図チャートは特殊なチャートな為、いくつか注意点があります。

  1. オプション指定にてallowHtmlをtrueで追加しておくとHTMLタグが使える。
  2. ロードするライブラリのパッケージはorgchartを指定すること。
  3. 左から「名称」「親となる要素（名称）」「ツールチップ」とテーブル形式が決まっている。
  4. 役職名などを併記したい場合には特殊な記述で名称のセルの中にHTMLにて記述が必要。

これは守らなければなりません。特殊な記述とは、{v:'山田太郎', f:'山田太郎<div style="color:red; font-style:italic">部長</div>'というような記述です。もちろん、HTMLなのでリンクを貼ることも可能です。さらに、オプション指定も独特なものが用意されていますが、数は多くないので、扱いには困らないでしょう。（スプレッドシートの場合、この記述は必要なく、HTMLタグ直接打ち込んで大丈夫です。但し、HTML5仕様で使用できないタグもありますが。）

ちょっとした応用と注意点

冒頭にも記述しましたが、これだけでも便利なのですが、この組織図はallowHtmlをオプションを入れておくことで、文字列に装飾を施すことが可能です。もちろん、リンクを貼ることもできます。しかし、それをやるためには、いくつかの注意点と、Google Sitesで使う場合の注意点があります。

  1. リンクを記述して描画する場合、普通に<a href="http://www.yamadataro.com">山田太郎</a>とスプレッドシートのセルの中に記述すると良い。上記のような特殊な記述は不要です。しかし、その時にはセルに入力時「最初の文字の前にシングルコーテーションを記述しておく」と良い。数字などの場合、エラーになるから。
  2. 今回のこれはガジェットで作っているのですが、リンクをクリックすると画面が飛びません。というかガジェット内で飛んでしまい、面倒です。しかし、targetオプションを指定しても、実は有効になりません。ということで、これを回避するために、ガジェットの<HEAD>部分に直接HTML編集で１行追加しておいてあげる。<BASE target="_parent">と追記しておくと良い。今回、上記の組織図に於いて、カエル運輸にのみリンクを追加してみました。セルに直接タグ書いてるので、少々スマートではありませんが、４つ目の行にでもURLを入れておいて、スクリプト上でDataTableを設けて１行目の文字列に追加してあげるなどのスクリプトを追加することで、ユーザビリティのあるシートになると思います。今回は面倒なので、やりませんが。
  3. イベントハンドラーを設定することができるみたい。今回はやってませんが、クリック時やダブルクリック時などなど。

図：ガジェットのHEAD部分にBase Targetを追加した様子

今回、カエル運輸で使用したセルの文字列は以下の通り

'<div style="font-weight: bold"><a href="http://www.seishou.co.jp/kyara.htm">カエル運輸</a></div>

フォントスタイルはDIVタグでBold指定（<B>タグは使用出来ませんでした）、BASE target指定は、_parentを指定しているため、<a>タグ内でTarget指定はしていない。

参考URL