アプレッソ開発部の土岐です。

今回は、先日アップされた記事「[30 分早く帰り隊] 「kintone meets DataSpider ハッカソン成果 #1」 kintone × Excel × メールで業務自動化」( https://dstn.zendesk.com/hc/ja/articles/220350947)に続き、2014年8月に開催された「kintone meets DataSpider」ハッカソンの中で作成したシステム、その名も"てきログ！"について紹介します。

当日の様子については、開催レポートをご参照ください。

＊ 開催報告：「kintone meets DataSpider」ハッカソン開催しました
-  https://dstn.zendesk.com/hc/ja/articles/220074788

"てきログ！"とは？

ちょっと変わった名前のこのシステム。簡単に言うと「議事録・TODO管理」システムであります。議事録が登録されると、その中にあるTODOタスクも合わせて登録される。議事録・TODOをまとめて管理できる便利システムです。

って言ってももちろん世の中にはそういう議事録管理ツールはもうありますよね。

てきログの凄いところはその極限までのシンプルさ！

お手元のテキストエディタに議事録を書いて、それをいつものように自分のマシンのフォルダに保存すれば、自動的にkintone上にその議事録が登録され、TODOタスクまで登録されてしまいます。面倒なブラウザでの議事録・TODO登録作業などは一切不要です！



▲"てきログ！"利用イメージ図

TODOタスクの進捗管理や過去議事録の参照はもちろんのこと、TODOタスクと議事録は相互に参照できるため、「このTODOってどういう経緯で出たやつだっけ？」みたいな疑問もすぐに解消します。



▲議事録・TODOのページはそれぞれ相互にリンクされているので、ミーティングと紐付けたTODO管理が簡単に可能

「テキ」スト・エディタから「適」切に・「適」当に・「的」確に議事録・TODO管理できるシステム、それが「てきログ！」というわけです。

具体的にどのような技術を使ってそれを実現しているか、について当日の開発の流れを追いながら以下に説明していきます。

開発開始！　その前に・・・・

さて"kintone meets DataSpider" ハッカソン当日の朝、集った参加者は3チームに分けられました。まずは「何を作るか？」ということを話し合う1時間のブレストから開始します。

この際はまったくのノー・アイディア！　ルールは「DataSpiderとkintoneを使って何か作る」というのみです。

このルールと同時に、「30分早く帰り隊」の"30分早く帰る"など、アイディアのヒントとなる幾つかのキーワードも提示されていました。私たちのチームは"世界を変える"というキーワードを(勢いで)選択。

さて"世界を変える"システムを「DataSpiderとkintoneを使って何か作る」というためにはどうするか？　と全員で頭を悩ませます。

ここで実は私には秘策がありました。現在アプレッソで開発中の製品「Thunderbus」のプロトタイプ版を準備していたのです。この製品については近日中に詳細を公開する予定ですが、簡単に言うと「オンプレミスのファイルをクラウドと連携する」ための製品です。



▲Thunderbusロゴ

この製品を簡単にチームに紹介して、「オンプレミスのファイルをThunderbusを使ってクラウドと連携、さらにDataSpiderを介してKintoneにデータを連携して"何か"を実現する！」という「何か」について考えることになりました。

Thunderbus × DataSpider × kintone = ?

この方向性を元に全員で色々とアイディアを出し合います。

「Excelの営業売り上げデータをkintoneに連携させてはどうか？ Excelでいつも通り売り上げを入力すれば、勝手にkintoneに登録してくれますよという」

「勤怠管理表とかって結構登録するのが面倒だったりしますよね。オンプレミスのExcelとkintoneで連携すると便利じゃないですかね？」

「逆にkintone内のデータを個別にファイル出力して各スタッフのPCに自動配信する、という連携もできますよね」

といろいろアイディアが出てきました。しかしいまいち"世界を変える"には物足りない！

ということで、もっと"自分たちが仕事をやる上で面倒くさいこと・困ってること"というところに焦点を絞ってアイディアを出すことに。



▲ブレスト中の様子

「そういえば議事録とかって皆さんどうしてます？　使っている議事録システムあるんですけど、ブラウザのテキストエリアで入力するのがいまいち面倒なんですよね」

「あー分かります。うっかり戻るボタン押しちゃって消えちゃったりしますよね。自分のテキストエディタでやるのが一番早かったりするんですよね」

「そういえばTODOってMTGから出てくることが多いんですけど、どういう経緯から出たのが分からないことが多いんですよね。その度に過去のMTGの議事録を探して・・・とかなりがちで」

「じゃあテキストエディタで書いて自分のPCに保存したら、DataSpiderがThunderbus経由でファイルを読み取って、議事録とTODOをkintoneに登録して、kintone上で相互参照できるというシステムはどうですかね？　Thunderbus × DataSpider × kintoneの組み合わせで！」

「おお、世界を変えれる！」

「名前は"てきログ！"でいきましょう」

と(かなり省略しましたが)、システムの概要と名前が一気に決まりました！



▲システムイメージ図。Thunderbus・DataSpider・kintoneの組み合わせで機能を実現している

いよいよ開発スタート！

午前中に決めた内容をまずは発表し、昼食休憩を挟んでいよいよ開発スタートです。

なんといっても今回は短時間勝負！　開発時間は、開発開始から発表までのわずか4時間ほど。超超高速開発が求められます。

果たして完成するのか？　という不安を抱えながらも、悩んでる時間も無いのでとにかく開発スタートです。

まずは何がともあれ「仕様」ですな、ということで全員で紙にペンで書きながら仕様を作っていきました。

「システムの全体的な概要はこんな感じで」



「kintone上の画面はこんな感じですかね」



「そうするとkintoneにDataSpiderから渡すデータのインターフェースはこんな感じですね」



とこんな感じで作っていきました（手書きのため汚くて申し訳ありません・・・）

「あと細かいところはやりながら詰めていきましょう！」

というわけでささっと仕様策定。ここまでは30分弱くらいでしょうか？

今回のハッカソンの参加者はほとんどお互い初対面だったのですが、皆さんさまざまなシステム開発を経験してきた強者。恐ろしく話が早い！

時間を短縮化するためにも大きくDataSpiderの開発を担当するチーム、kintoneの開発を担当するチームの2つに分けて開発することにしました。

kintoneチームのサクサク開発！

DataSpiderチームは、まずは画面は置いておいて、kitntoneに登録するデータを作成するスクリプトを作成します。kintoneチームはダミーデータを使って、画面作成を開始します。

インターフェースを先に決めておくことで、それぞれの作業を完全に切り分けることができてスムーズに作業に入っていくことができました。

kintoneチームは次々とアプリを作っていきます。

「議事録はこんな感じで一覧が出て」



「一覧の議事録はこんな感じで詳細表示されますね。でその中にTODOの一覧も表示されていて」



「TODOの詳細を見るとこんな感じ。もちろん完了などのステータス管理もできます」



「自分のTODO一覧なども見れるし、TODOからは「関連レコード一覧」のリンクを辿ると元の議事録を参照できることができますね」

とサクサクとサクサクと、ひらすらサクサクと進んでいくkintone開発。

しつこくて申し訳ありませんが、次々と完成していく様子をみて"サクサク"という擬音がピッタリの怒濤の進捗でした。

およそ1時間程度であっさりと画面開発は完了。「あとはDataSpiderからのデータを待つのみです」　早い！

DataSpiderチームの葛藤、そして巻き返し！

私はDataSpiderチームということで、進撃のkintoneチームに負けないように着々と開発を進めていきます。

DataSpiderチームの中でもさらに役割を切り分けて、以下のようにチームを分割して開発を進めました。

1) Thunderbus チーム：Thunderbusを使って読み取ったファイルから構造化されたデータを作成するスクリプトを作るチーム
2) kintone連携チーム：受け取った構造化されたデータをkintoneアダプタを使ってkintoneに登録するスクリプトを作るチーム

私はアプレッソでThunderbusの開発を担当しているので、Thunderbusチームとしてスクリプトを作っていきます。

今回使用するDataSpiderはクラウドのAmazon EC2上で稼働しているので、まずはそのクラウド上のDataSpiderからファイルを読み取るスクリプトをStudio for Webを使って開発します。

Thunderbusの設定は簡単。オンプレミスのマシン(この場合は私のノートPC)にThuderbus Agentをインストールして、DataSpiderと同じマシン上で稼働しているThunderbus Serverへの接続設定をします。

(※) 以下Thunderbusの画面は開発中のものです。



▲オンプレミス(今回はノートPC)にインストールしたThudnerbus Agentの接続設定。エージェントIDを「toki」として Thunderbus Serverの接続設定を行っている

そして公開するフォルダを指定します。



▲「C:\tekilog」のディレクトリを「tekilog」として公開するフォルダを指定

あとはDataSpider上でもThunderbus Serverへの接続設定をすれば、DataSpiderのファイルシステムとして私のマシンのディレクトリがマウントされる！　というわけです。



▲DataSpiderのエクスプローラ画面。Thunderbusで指定したフォルダがマウントされ、その配下のファイルに対してDataSpiderから操作することが可能だ

さてDataSpiderでファイルが見えれば後はこちらのもの。あとは同じマシンに存在するファイルと同じようにCSVアダプタやExcelアダプタなどファイル系アダプタ処理を使って処理作ることができます。

作成したスクリプトの一部がこちら。



▲ファイル読み取りスクリプト。ファイルから議事録用とTODO用の2種類のデータ作成し、「てきログデータ転送」に渡している

詳細は省略しますが、議事録の全文を読み取る処理・メタ情報・TODO情報を読み取る処理を別に作り、"議事録登録用データ"と"TODO登録用データ"の2つスクリプト呼び出し「てきログデータ転送」に入力データとして渡しています。

なお、議事録のメタ情報・TODO情報は以下のように「|」(バーティカルバー）で区切るというルールにしています。これをCSV読み取り処理で読み取って詳細情報を取得しています。

例：

議事録タイトル|2014/11/01 17:00|作成者名       ←　メタ情報
意見(参加者1)
意見(参加者2)
TODO|TODOタイトル1|2015/04/01|担当者名      ←　TODO情報
TODO|TODOタイトル2|2015/02/01|担当者名     ←　TODO情報
意見(参加者3)
TODO|TODOタイトル3|2014/12/01|担当者名     ←　TODO情報

 ▲議事録データ例。メタ情報・TODO情報を「|」区切りで入力するだけでOK

さてこの呼び出される側のスクリプト「てきログデータ転送」を作っているのが2)のkintone連携チームです。

こちらでは、受け取ったデータをkintoneのAPIの入力スキーマの形式に変換してkintoneにデータを登録します。スクリプトはこちら。



 

▲kintoneデータ転送スクリプト。議事録登録をした後、レコード番号を取得してTODO登録を行っている

ポイントとなるのは、議事録データを処理「議事録登録」でkintoneに登録した後、登録されたデータのレコード番号を「レコード番号取得」で取得してTODOに紐付けた上でTODOに登録していることです。この紐付けによって、TODOと議事録の相互参照ができるようになるわけです。

一例として、「議事録データマッピング」での処理がこちら。



▲議事録データ登録のためのマッピング。kintoneのAPIにあわせたデータ構造を作成している

呼び出しスクリプトから受け取った議事録データをkintoneの入力スキーマに変換しています。

というわけでDataSpiderのスクリプト実装が完了！

とさらっと書いてしまいましたが、実際はこの完成に至るまでに細かいところいろいろと葛藤がありました。

一例として、本当は議事録出席者、およびTODOの担当者を複数登録できる仕様にしたかったんですが、DataSpider上のデータからkintoneのAPIに合わせた変換をするのに手間取ってしまい、今回は時間的に難しく断念。もう少時間があれば何とか実現したかったところです。

というわけでいろいろありつつも、なんとかDataSpiderのスクリプトが完成！　何とか時間内での開発が完了しました。

ちなみにその間にkintoneチームは、kintoneのJavaScript / CSSカスタマイズ機能を使用して、TODOをカレンダー表示する機能まで完成させていました。高速！



▲JavaScript / CSSカスタマイズ機能で作成されたTODOカレンダー。TODOの期限日にそのTODOが表示される

いよいよシステム結合・・・その結果・・・！？

というわけでおよそ3時間強くらいでThunderbusの設定・DataSpiderのスクリプト開発・kintoneの画面開発が完了しました。

あとはこれを結合して動かすだけ！

kintoneに登録するきっかけとなるDataSpiderのトリガーについては、ファイルトリガーを設定してファイルが保存されたタイミングでスクリプト実行→kintone登録の一連の処理が行われるように設定しました。



▲DataSpiderのファイルトリガー設定。マウントしたオンプレミスのファイルが作成されたタイミングでスクリプトが実行されるようにしている

ではやってみましょう。

議事録ファイルを作成して、保存！



保存されたファイルを検知して、トリガー発火！



そしてスクリプトが実行されて・・・

kintoneに登録された！！



祝☆完☆成！！！！

無事、開発時間の4時間に僅かを残して、Thunderbus×DataSpider×kintoneの世界を変えるシンプル議事録システム"てきログ！"が完成しました！

残りの時間は発表の資料作成に充て、成果発表。

そして成果発表後、投票によって優勝チームを決定したところ・・・

見事最多投票を獲得することができ、「てきログ！」チームが優勝しました！



▲優勝して喜びを隠せない一堂の図

終わりに

「この短時間で本当に完成するのか？」という不安を抱えながらのスタートだったのですが、無事開発を終えることができました。

もし今回行ったようなオンプレミス・クラウドデータ連携、ファイル読み取り、データ変換、画面構築などを手組でやったとしたら・・・？

どのくらい時間がかかるか想像もできませんが、一日の午後の4時間で開発終了。お昼ご飯食べた後に開始して定時前に帰ることのできるレベル！

てきログ！開発チームの皆さんの頑張りと共に、Thunderbus・DataSpider・kintoneのそれぞれのメリットを活かすことができたのが超高速開発に繋がったと思います。

他の2チームの作成したシステムも非常に面白く、"kintone meets DataSpider"はまだまだ可能性がありそうです。

そして今回プロトタイプを使用した、アプレッソの新製品Thunderbusは来年リリース予定。引き続き開発を頑張っていきます！