2019年4月18日に開催された、kintone hive での kintone hack セッションのスライドです。kintone 上に埋め込んだ GraphQLクライアントを使って他端末での更新を検知し、同期します。

1. kintone hack & sync
2019年4⽉18⽇
kintone hack in kintone hive fukuoka vol.4
安藤 光昭 @m_ando_japan

2. 広島

3. ビットリバー株式会社
代表取締役 kintoneハッカー
安藤 光昭
サイボウズ公認kintoneエバンジェリスト

4. 広島市
活⽤顧問 外部連携
カスタマイズ
ビットリバー株式会社

5. kintone.bitriver.jp

6. kintone hack って⾔うけど…

7. やろうと思えば、だいたいできちゃう

8. ？why?

9. JavaScript API
REST APIWebhook
DOM
CSS
カスタマイズビュー
プラグイン

10. • カスタマイズの⼊り⼝が豊富
• ”頑張れば”たいていのことは可能

11. 開発事例

12. 事例1
kintone to Webサイト

13. https://youtu.be/7425xJPrVUk

14. 事例2
センサーデバイス to kintone

16. 事例3
ゲームもできちゃう?

18. https://youtu.be/OwUFsdC9Qr0

19. 解説
ゲームの仕組み

20. スタートボタンを
フォームに配置

21. 埋込HTML
ゲーム(WebGL)
全体に表⽰
ヘッダに埋込
APIで更新kintone

22. 曲芸では意味がない！

23. kintone hack & sync

25. デモ

26. https://youtu.be/dIgHjIzyNt8

27. kintone
GraphQL Sync
編集通知表⽰
同期表⽰
ヘッダに埋込
APIで更新

29. • 同期のバックエンド側は
AWS AppSyncを中⼼とした構成
• kintoneでの更新をwebhookで検知
• React.jsとReact Apolloで通知

30. hackで問題解決！