問題解決のためにエンジニアの力を使いたい　プロのエンジニア集団 ビットリバーの考える「kintone hack」

プロのエンジニア集団「ビットリバー」

安藤光昭氏：こんにちは。ビットリバー株式会社の安藤です。「kintone hack＆sync」と題しまして、少しテクニカルなお話をしたいと思います。

実は私、今朝、広島から来たところでして。広島といえば、例の赤いシャツの野球チームが有名ですが、昨年のヤフオクドームでは非常に悔しい思いをしました。

それはさておき、私自身は3年前にkintoneに出会いまして、「これはすごい」と思いました。ということで、北は北海道から南は九州まで、「kintone」と名のつくイベントにせっせとエントリーしていましたら、ありがたいことにサイボウズさんから「kintone エバンジェリスト」という称号をいただきました。

弊社ですけども、お客様と一緒にシステムを開発する、プロフェッショナルのエンジニア集団と自負しております。kintoneに関してはカスタマイズから外部のシステムの連携まで、お客様が必要なシステムを必要な分まで開発すると。そういったモットーで営業をしております。

弊社のkintoneに関するサービスは「キントバ」という名前でリリースしておりますので、よろしければお名前だけでも覚えていただければと思います。

がんばれば大概のことができてしまうkintoneの開発事例

さて、今回お話しする「kintone hack」なんですけれども、実はエンジニアの観点から見ると非常に難しいんですね。

なにが難しいかというと、やろうと思えばだいたいできちゃうんです。

そう、がんばれば。だいたいできちゃうんです。なぜかというと、kintoneにはさまざまなカスタマイズの入口が用意されているので、だいたいがんばればできるんですね。

ということで、弊社でがんばった事例をいくつかご紹介させていただきます。

これはあんまりがんばっていないんですけど、kintoneからWebサイト、動画をお見せします。これはFAQをkintoneで管理している事例です。

kintoneでFAQの内容を登録して、今編集をしていますけど。こういった感じでkintoneを編集して、保存して、このタイミングでWebサイトに反映すると。すると今、上のほうに編集というのがでていますと。こういった事例です。

そして次は、センサーデバイスからkintoneへ。

これは実験的に弊社でやってみたんですけど、社内に置いてあるテーブルにIoTの機器を設置して、kintoneにデータを送ると、kintoneのほうでグラフ化できます。

その他、これはトリッキーな事例ですね。

一昨年度のCybozu Daysで展示したんですけど、この真ん中のボードでkintone上でゲームを操作しちゃおうというものです。

よく見るとゲームの点数が出ています。ゲームスタートということで、kintoneの編集画面……これはみなさんにもおなじみの画面ですけど、お名前を入れてスタートを押すと、こんな感じでkintoneでゲームができちゃいます。

よく見ていただくとわかるんですが、ちゃんと一番上のアドレスが「kintone」になっています。

「問題解決のためにエンジニアの力を使う」という提案

中身をご説明をさせていただきます。

スタートボタンを設置するのは、一般的なカスタマイズで実現をしています。

その後のゲームなのですが、kintoneのヘッダ部分に、とあるHTMLを埋め込んで、そこからWebGLを全画面で呼び出しています。ゲームからkintoneへ得点を更新するのはAPIを使っています。

そんな構成になっています。

ただ、「こんな曲芸をしても意味がないんじゃないか」というのが私の考えです。この仕組みを使ってなにかできないかなと考えたのが、今日お話しさせていただく「sync」です。

この画面、見たことはありますかね。

1つのレコードを複数の人が更新するとよく出てくる、この嫌なメッセージ。これをなんとかしたいなと思います。

さっそくデモにいきます。

今日の福岡のkintone hackに私が登壇してがんばりましたということを、ブログにkintoneで記載すると、左側のようにWebサイトに出ますと。

今日は調子が良かったので、4月18日公開で、がんがん書いちゃおうと。ノリノリでホテルに帰って書いているわけですね。ただ、その頃本社ではこんなことが起きています。「あれ？　安藤さん、18日に記事を更新してるけど……お前本当は中州で飲んでんじゃねーの？」「18日に公開なんかできるわけないよ」ということで、危ないから19日にしておこうと。

19日に変更して、「よし、これで会社も安心だ」と思っていた。これまでは、ここでトラブルが起こっていたんですね。ですが、こういったかたちで、私にポンと通知が出てきます。この通知を見ながら、「いやいや、俺は今日するんだ」ということで更新します。

中身ですけれども、さっきとほとんど同じです。

ヘッダに埋め込んだ同期の仕組みで通知を表示しています。中身の仕組みはバックエンドにAWSを使って、さっきのレコード編集画面は「React」と「Apollo Client」というのを使っています。

こういった流れでなんとか実現ができるということで、弊社ではkintoneの「hack」というのは、問題解決のためにエンジニアの力を使うということで提案をさせていただいております。どうもありがとうございました。

（会場拍手）