kintone Café 福岡 Vol.1

2014年5月29日 山下　竜Twitter: @yamaryu0508 FB: https://www.facebook.com/ryu.yamashita.3

＃kintonecafe

自己紹介• 基本情報!

•山下 竜（32）　福岡県大牟田市出身

• 最先端の無線通信がやりたくて上京（学生'05-06）!

•マルチホップ、今のSC-FDMAに類するものに苦戦（信号処理中心）

• 交通混雑と空気環境に耐えられそうになく、Uターン（九州電力の通信部門'07-10）!

•通信システムの工事等を3年間（線路/伝交、陸技、CCNP/DP→ケーブル、電源、伝送交換・IP等）

• M2Mサービス化のための現部署へ（ニシムのサービス部門'10-現在）!

•企画・営業に迷走中（でも、これは必須）

• との出会いをきっかけに技術支援も　　（デモで頂いた意見は好調時は帰社までに反映）

Layer1

Layer1-3

Layer8?

Layer1-8

kintone公認エバンジェリストご指名頂き、その末席（九州・福岡）を汚しております！

全国に十数名遍在しています。

• ハンズオン

• アプリの作り方

• アプリ作成

• カスタマイズ

• 参考情報

• 最後に

Menu for today• kintone Caféについて

• kintoneとは?

• kintoneを使って嬉しく、楽しいこと

• 他サービスとの違いは?

• kintoneの導入事例・用途

※一部のタイトルを省略

基本編

応用編

kintone Café 福岡について

• 凄く良いサービスなので福岡でも情報共有出来る場を作り、kintone仲間を増やしていきたい・広げてもらいたい

• 日常の業務をICTを使って真に安く、速く、簡単に改善する方法・事例をみんなで楽しみながら考え、共有し合いたい

• 「アプリ開発は敷居が高い」と感じていた方々に簡単にアプリ作成・提供を行ってもらい、社内外の業務改善ツールとして活用してもらいたい

• 福岡・九州ならではの活用用途を見出し、共有・情報発信していきたい

個人的にはプログラミングの良い教材だとも思います。「REST API」や「JavaScript」、周辺言語に強くなれると思います。一緒に勉強しませんか？

首都圏と違う用途があると思うのです！

kintone Café 福岡について（続き）

抱え込んでクローズにしたくもなるんですが、オープン化は進んでますし、競争には晒されます。であれば、敵対関係ではなく、協力・共存の方法を考えるのがクラウド時代にもマッチしてるかなぁと思っています。鎖国は返ってよりリスキーになるのではと。

こういう取り組みって競合を増やすことになりますよね？

サイボウズ 栗山氏

山下

とある一コマの話・・・

kintone Café 福岡について（続き）

自分達のビジネスを広げるために周囲・相互の力を借りる考え方も現実味を帯び、実際に広がってきています！

テナントを共有し合って 場所を変え、組合せを変え、

多地点でPR

距離や数・労働力が及ばない 部分を相互補完

ICT活用による 知の共有・総力戦

展示会 ビジネス コミュニティ

という訳で、この場でも色々共有させてもらえればと思っています。（出典：「cybozu.com developer network」）

kintone Café の広がり

• kintone Café 札幌（2回目）　5/16【済】※斎藤さん主催

• kintone Café 土佐（1回目）　5/30　※片岡さん主催

先日の札幌の様子 （トークセッション）

※写真撮りに行ってきました

パイオニアです

（開催レポート：「kintone Café at 札幌 Vol.2」）

kintoneの概要から入っていきます

• コンセプト

• 「ファストシステム」

• 「10分で業務改善アプリ」

• 構成要素

• データ

• ワークフロー

• コミュニケーション

kintoneとは?（ざっくり）「サイボウズプロダクト=チームを強くするツール」の中でも汎用性と専門性を行き来しながら、様々な業務シーンで活用出来るクラ

ウドデータベース（WebDB）サービス

（出典：「kintone公式サイト」）

• 初期費用無料

• 申込3分後には利用可能

• 月単位の利用（年縛りなし）

• アップデートサイクルの短期化（最近は2ヶ月くらい）

• 30日間の無料お試し

• 1年間の無償開発ライセンス

kintoneとは?（ざっくり：続き）

※東京駅で撮りましたユーザー数と期間が異なるので、目的（業務or開発）に応じて使い分けてください。

【参考】サイボウズプロダクト

メール共有

グループウェア

（中小企業向け）

（中堅・大企業/海外向け）

無料 グループウェア

モバイル・ リモートアクセス

（セキュアアクセス）

（モバイルアプリ）

ファストシステム

ファストに業務改善アプリを作る

・自分でフォームを並べて ・Excel/CSVを取込んで ・kintoneアプリストアから ・SI/サービスを受けて

稼働実績99.9%の自前・国産クラウドインフラ

SLO 99.99%へ

kintoneの2つのコース• これまで作成したアプリをそのまま運用するためには「ライトコース」

• これから紹介するカスタマイズを適用するためには「スタンダードコース」

（出典：kintone公式サイト[https://kintone.cybozu.com/jp/price/]）

プログラミングなしで 簡単アプリ作成！

REST API、JavaScript/CSSで カスタマイズして更に便利に！

チームワークプラットフォームですので、5ユーザーからの利用です

kintoneとは?（ライト）• データ

• ドラッグ&ドロップで簡単フォーム設計（豊富なフォームパーツ、ファイル添付）

• 強化されたトップ画面（一覧、カレンダー、カスタムビュー）

• グラフや集計機能（おすすめグラフ、定期レポート、クロス集計等）

• 通知・リマインダー設定（メール、モバイルアプリ通知）

• アプリ間データ連携（ルックアップ、関連レコード、アクション機能）

• 全文検索による容易な情報の取り出し（添付ファイルの中も対象）

• アクセス権設定（アプリグループ、アプリ・レコード・フィールド単位）

10分で業務改善アプリを作るためのユーザビリティの高い標準機能（プログラミングなし）

kintoneとは?（ライト：続き）

ドラッグ&ドロップでフォーム作成

フォーム編集

おすすめグラフ

グラフの種類や集計方法の候補を自動生成

• データ（ピックアップ）

kintoneとは?（ライト：続き）• ワークフロー（プロセス管理）

• 柔軟なワークフロー（電子申請・承認）設定

ステータス設定 プロセス設定ワークフローの実行

ステータス名や条件分岐を自由に設定

kintoneとは?（ライト：続き）

• コミュニケーション

• コメント（レコード単位、スペース単位のディスカッション）

• スペース・スレッド（データとディスカッションの融合、情報の集約・蓄積）

• ゲストスペース（社外・顧客等へのコミュニケーション範囲の拡大）

• ピープル（SNSライクなコミュニケーション）

• 通知・メンション（相手を指定したコミュニケーション）

kintoneとは?（ライト：続き）

アプリ内コメントスペース

ピープル アプリやコミュニケーションの融合

個人間のコミュニケーション

スマホ通知

• コミュニケーション（ピックアップ）

kintoneとは?（ライト：続き）

• その他

• モバイル対応（モバイルビュー、モバイルアプリ）

• kintoneアプリストア、アプリテンプレートによるアプリの授受共有・再利用

• 強固なセキュリティ（2ファクター認証、IPアドレス制限）

• 安心のバックアップ

• 国際化対応（日・英・中の3カ国語のフィールド名称を定義）

• 専門の連携ソリューション（サードパーティー）が充実中

セキュアアクセスオプションも有ります

API等が関連する場合はスタンダードコースが必要

kintoneとは?（ライト：続き）• その他（ピックアップ）

モバイルビュー

2ファクター認証

4重冗長化「Square」

（出典：「cybozu.comのクラウド基盤」）

これでもか！と言うくらいのBU

[subdomain]

モバイルで使ってこそのクラウド

※地図はJavaScript カスタマイズです

• REST API

• レコードやスペースの操作（登録・更新・削除等）、バルクAPI

• ユーザ・組織の操作

• JavaScript/CSSカスタマイズ

• 各種イベントハンドル、情報取得

• プロキシによる外部API連携

• URL指定によるライブラリの読み込み（HTTPS対応）

kintoneとは?（スタンダード）その気になれば何でもできる?強力な「REST API」と「JavaScript/CSS」による連携・カスタマイズ機能

データ レコード スペース ユーザ

UI

基幹システム Excel

他のクラウドREST API

kintone.proxy

JavaScriptカスタマイズ例他サービスを取込みつつ、 動画をブクマしたり

データをバインドして ライブラリでグラフ化し直したり

ダイナミックなプラグインライブラリで見た目をオシャレにしたり

JavaScriptカスタマイズ例（続き）

[subdomain]

モバイルの利便性を向上させる 地図を利用したり

JavaScript/CSSカスタマイズ例

データをバインドして、CSSフレームワークで社内CMS・ポータルにしてみたり

他サービスとの違いは?

価格 情報共有 計算 印刷 使いやすさ/ 作りやすさ

kintone 780円/u/月 ◎ △ △ ◎

Salesforce

Google Apps

MS Excel/Access

BCNの記事等をご覧ください。 個人的にも考察中です！

気付いたら目の前にkintoneがあったので、実は他をよく見れていません。

kintoneを使って嬉しく、楽しいこと

• ユーザ

• 安くて、速くて、簡単に業務改善アプリが自ら作れる

• 項目の修正や追加も簡単で、楽しい！

• 開発が安くて、速いサービスを受けられる

• kintoneアプリストア

• SI/連携ソリューション（サードパーティ）

サーバ不要、システム拡縮柔軟性、モバイル親和性、サービスアップデート等々、 元々のクラウドの良さに加えて

(780円/u/月で) (作るのも) (使うのも)

kintoneを使って嬉しく、楽しいこと（続き）

• プロバイダ（営業面）

• 安くて、速く業務改善アプリを提供出来る

• よほど高度でなければ技術スタッフの帯同なしに要件定義が出来てしまう 要件定義そのものが不要なことも

安いが故の「案件数」と「受注額」の バランスは大切だと思います

kintoneを使って嬉しく、楽しいこと（続き）

• プロバイダ（技術面）

• 速くて、簡単にWebアプリを開発・提供出来る

• プレゼンや要件定義のスライドではなく事前にデモアプリを作って説明出来る

• DBを構築しなくてもデータが絡むブラウザアプリが作れる

• 開発環境は自分のPCだけ。カスタマイズ機能も強力。面白い！

• これらが簡単に出来るので手戻りや方針転換が苦にならない

その場で受注確度も測れる

kintoneの導入事例・用途公式サイトで事例や（アライアンス）ソリューションをご覧ください。

動画付きの事例紹介（西武ライオンズさん、関西さん）もあって、分かりやすいです。

（出典：「kintone公式サイト」）

実際にどんな風に役に立つかは事例を 眺めてみるのが早いです！

kintoneアプリストアの利用100個弱のアプリが提供されていて、無料アプリは即ダウンロードできます。

あなたの課題を解決してくれるアプリに出会えるかも？（出典：「kintoneアプリストア」）

カテゴリ 連携ソリューション プロバイダBIツール連携 kintone Connector for QlikView 株式会社アシスト

基幹システム連携 DataSpider Servista 連携ソリューション 株式会社アプレッソ商奉行・蔵奉行 連携ソリューション アリーナシステム株式会社

販売大臣・顧客大臣 連携ソリューション アリーナシステム株式会社SMILE BS 2nd Edition 連携ソリューション 株式会社OSK

Biz/Browser 連携ソリューション 株式会社オープンストリームPCA商魂 連携ソリューション ディーアイエスソリューション株式会社

複合機連携 FAX連携ソリューション for リコー リコージャパン株式会社

帳票出力 OPROARTS Connector for kintone 日本オプロ株式会社プリントクリエイター サイボウズスタートアップス株式会社

Webフォーム連携 フォームクリエイター サイボウズスタートアップス株式会社

経費精算 DragonTouch Expense （交通ICカード連携経費精算）

ブレインハーツ株式会社

アカウント管理 Cloudum サイボウズスタートアップス株式会社

カスタマイズ・連携ソリューションが充実中先日の「第5回クラウドコンピューティングEXPO 春」で出展されたサイボウズパートナーの連携ソリューション（kintone連携サードパーティー）。他にも多数あります。

kintone概要と事例フラッシュ実はここまでの内容、一昨日サイボウズフェローの野水氏の分かりやすいスライドがアップされました（orz）ので、こちらも是非ご覧ください！

（出典：「kintone概要と事例フラッシュ」）

広告も凄いですね！

kintoneの弱い所（今後の期待）

• サブテーブル周辺が弱い

• CSVインポート（APIを使えば出来はする）

• アクション機能でコピー出来ない

• スペースにおけるイベント等カスタマイズが弱い

• コメントを含めたデータ移行が弱い

• クライアント証明書下の端末で動画再生出来ない

良いことばかりだと、胡散臭いので個人的な見解を（ユーザーでもあるので）

アップデートサイクルが短くなってきているので、そのうち出来るようになって、他も更に進化していくと思います！

実際にいくつか事例を お見せします！

札幌のkintoneエバンジェリスト

「クラウドおじさん」こと　　　　からの

プレゼント♡

斎藤栄さん

kintone→MT投稿アプリ

kintone.proxy()

「Publish!」を押すとMovable Typeに投稿されるJSカスタマイズです！

※終了後追加スライド

斎藤さんからの 祝福メッセージも

そろそろ、ハンズオンへ （kintoneにログインして

アプリ作成）

準備（サンプルダウンロード）①「https://github.com/yamaryu0508/kintoneCafeFukuoka1」に

アクセス

②「Download ZIP」をクリックして、 ファイル一式をダウンロード

アプリの作り方

• 自分でフォームを並べてアプリを作る

• Excel/CSVを取込んでアプリを作る

• kintoneアプリストアからアプリを作る（選ぶ）

• SI/サービスを受けてアプリを作る（もらう・買う）

今日はこの辺

今回のアプリ作成シナリオ

案件情報をExcelで管理しているが、同時入力ができなかったり、協力会社と共有しているがメールの飛ばし合いで、破綻気味だ

顧客情報を安全に外出先から閲覧したい（これも社内HDD上にExcelで管理している）

業日報は上司へのメール報告になっているが、メンバーで共有したい（CC面倒だ）

社内で（またはお客さまから）こんな課題を解決したい、と言われたと 想像してみてください。数日後に解決策を提案するつもりで考えてみましょう！

��� �� �������� �� ���

��� �� �������� �� ���

��� �� �������� �� ���

私の思いつき（今日のアプリ作成の流れ）

• 「営業日報」はアプリストアに「商談報告書」というアプリがあったはずなので、そのまま利用

• 「顧客情報」はExcelからそのまんま取込んでしまおう

• 「案件情報」もそのまま取込んでもいいけど、デモを兼ねてその場で作って見せよう

・顧客情報との紐付けでルックアップのデモも出来そう ・協力会社との情報共有にはゲストスペースも有用 　（ゲストスペースは別の回で）

私の思いつき（今日のアプリ作成の流れ）

① 営業日報 ③ 案件情報② 顧客情報

（アプリストアから）（Excelから）

（自分でフォーム設計）

課題解決（提案の中身）

• 情報を共有するのはkintoneの得意とする所なので、「同時入力」や「メールの飛ばし合い」による手間、情報管理のミスは自動的になくなる

• 外出先からの参照はBasic認証だけで不安ならセキュアアクセス（オプション）もあるので、セキュリティの壁は越えられる

• これをキッカケに他の課題解決にも取り組んでもらおう

• クラウドなのでまずは試してもらおう（継続してもらえるようにフォローは必要）

②「アプリストアから選ぶ」 をクリック

アプリ作成①「営業日報」

①「作成」をクリック

アプリ作成①「営業日報」

※「営業・セールス」を選択

④「追加」をクリック

③「このアプリを追加」をクリック

アプリ作成①「営業日報」

⑤めでたく完成！

アプリ作成②「顧客情報」

①「作成」をクリック

②「Excel/CSVから作成」をクリック

アプリ作成②「顧客情報」

③Excel/CSVファイルを取り込み

アプリ作成②「顧客情報」

④フィールドタイプを選択 （今回は右のように変更）

⑤「作成」をクリック

アプリ作成②「顧客情報」

⑥めでたく完成！

アプリ作成③「案件情報」• 案件情報として管理する必要がありそうな情報を洗い出す（考えながら作って、後からの追加・修正も大丈夫）

• 「はじめから作成」で、ガイドに従ってアプリ作成フォーム項目 フィールドの種類タイトル 文字列（1行）担当者 文字列（1行）

納工期（開始） 日付

納工期（終了） 日付

会社名 ルックアップフィールド （設定は最後に）

先方担当者 文字列（1行）電話番号 文字列（1行）内容 文字列（複数行）

参考資料 添付ファイル

ルックアップ先のフィールドを配置した後

（今回は「先方担当者」、「電話番号」）

アプリ作成③「案件情報」

①「作成」をクリック

②「はじめから作成」をクリック

アプリ作成③「案件情報」

• 「アプリストアから選ぶ」でアプリ作成

※ここからガイドに従って進めます

③「アプリ名」を入力して「保存」をクリック

アプリ作成③「案件情報」

• 「アプリストアから選ぶ」でアプリ作成

⑤アイコンを選択 （好みで）

⑥デザインを選択 （好みで）

⑦アプリの説明を入力 （適当に）

⑧「保存」をクリック ④「一般設定」をクリック

アプリ作成③「案件情報」

• 「アプリストアから選ぶ」でアプリ作成⑪「保存」をクリック ⑨「フォームの編集」をクリック

⑩ドラッグ&ドロップでフォーム設計

※「会社名」（ルックアップフィールド）の設定

アプリ作成③「案件情報」

• 「アプリストアから選ぶ」でアプリ作成⑮「保存」をクリック ⑫「一覧の追加」をクリック

⑭ドラッグ&ドロップで表示一覧設定

⑬「一覧名」を入力

アプリ作成③「案件情報」

⑯「設定完了」をクリック

アプリ作成③「案件情報」

⑰めでたく完成！

アプリ完成イメージまとめ

フォームの項目を 洗い出し

アプリストアの テンプレートベース

顧客情報

営業日報

案件情報

情報参照 （ルックアップ）

フォームもデータも 元のExcelベース

時間があれば デモで少しパワーアップさせます！

ハンズオン 応用編へ

「スタンダードコース」の機能強化で更に便利なアプリを！

（出典：「cybozu.com developer network」）

kintoneの2つのコース（再掲）

ここまでのアプリ ここからのカスタマイズ

（出典：kintone公式サイト[https://kintone.cybozu.com/jp/price/]）

今日はJavaScriptの サンプルを試してみましょう！

考えずに試せる

「REST API」はチョットだけ！

JavaScriptカスタマイズ（完成イメージ）

• 「案件情報」にガントチャートを導入

• 「顧客情報」に地図を導入

ガントチャート

地図

サンプルコードを今日作ったアプリに適用します

（アプリをサンプル用に改造）

• 準備

JavaScriptカスタマイズ① 「案件情報」にガントチャートを導入

フォーム項目 フィールドの種類 フィールドコード 初期値・選択肢 !

タイトル 文字列（1行） To_Do

納工期（開始） 日付 From

納工期（終了） 日付 To

内容 文字列（複数行） Details色 ドロップダウン Color Red, Orange, Blue, Green

「フィールドコード」を設定

「（色）フィールド」を追加

JavaScriptカスタマイズ① 「案件情報」にガントチャートを導入

②「フォームの編集」をクリック

①アプリトップ右上の「歯車」の「このアプリの設定」をクリック

JavaScriptカスタマイズ① 「案件情報」にガントチャートを導入

①「歯車」の「設定」をクリック

②「フィールドコード」を設定（他も同様）

③「色」フィールドを追加

④「保存」をクリック

JavaScriptカスタマイズ① 「案件情報」にガントチャートを導入

⑤「JavaScript/CSSでカスタマイズ」をクリック

JavaScriptカスタマイズ① 「案件情報」にガントチャートを導入

⑥「アップロードして追加」から サンプルファイルをアップロード

⑦「保存」をクリック

JavaScriptカスタマイズ① 「案件情報」にガントチャートを導入

⑧「設定完了」をクリック

⑧めでたく完成！

JavaScriptカスタマイズ① 「案件情報」にガントチャートを導入

• 準備

JavaScriptカスタマイズ② 「顧客情報」に地図を導入

フォーム項目 フィールドの種類 フィールドコード

住所 文字列（1行） Address

緯度 数値 lat

経度 数値 lng

レコード番号 （レコード番号） record_no

「フィールドコード」を設定

「（レコード番号）フィールド」を追加

②「フィールドコード」を設定（他も同様）

③「レコード番号」フィールドを追加

①「歯車」の「設定」をクリック

※「ガントチャート」と 同様に設定していく

JavaScriptカスタマイズ② 「顧客情報」に地図を導入

めでたく完成！

JavaScriptカスタマイズ② 「顧客情報」に地図を導入

REST APIも ちょっとだけ事例とデモを

とあるシステムの死活監視①死活監視

①システムを死活監視 （定期リクエスト）

②レスポンス②システムからの レスポンス

③エラーでなければ 何もしない

③エラーならばレコード登録

④エラーをkintoneの通知機能で通知

③エラーならば レコード登録

④通知

とあるシステム

ちょっと②をやってみます

ハンズオンは以上です！ （まとめに入っていきます）

技術情報の共有「cybozu.com developer network」[https://cybozudev.zendesk.com/hc/ja]が開発者コミュニティとして2014.4.10にオープンしていますので、チェックしてみてください。

2014.4.11 Open

1年間2ユーザの 無償ライセンス

「Tips」や「コミュニティ」でエバンジェリスト達が有益な 情報を提供してくれると思います！

参考情報• kintone公式サイト[https://kintone.cybozu.com/jp/]

• 製品情報、30日間無料お試し、その他各種リンク

• 開発コミュニティサイト「cybozu.com developer network」[https://cybozudev.zendesk.com/hc/ja]

• コミュニティ（質問等）、Tips、サンプル、開発者ライセンス申込

• 技術ドキュメントサイト「cybozu.com doumentation」[https://developers.cybozu.com/ja/] ※2014.7.9 developer networkに統合予定です

• API情報、サンプル、SDK（β）

• kintone BLOG [http://kintone-blog.cybozu.co.jp/]

• お知らせ、イベント情報、アプリ・連携ソリューション紹介

参考情報（続き）• kintoneを便利に使う方法を紹介するブログ[http://kintoneblog.joyzo.jp/]

• ジョイゾー（四宮さん）のブログ

• kintoneブログ[http://radical-bridge.com/kintone-blog/]

• ラジカルブリッジ（斎藤さん）のブログ

• kintoneappブログ[http://kintoneapp.com/blog/]

• サイボウズスタートアップスさんのブログ

• GitHub[https://github.com/search?q=kintone]

• 「.NET」、「Ruby Gems」、「R」等のライブラリ

• NAVERまとめ[http://matome.naver.jp/search?q=kintone]

【お知らせ】Cloud Days 九州 2014

[C135]リリースから2年で1300社が導入　ー業務改善クラウド kintone の基本から活用例まで徹底解説ー

業務改善の時間軸を大きく変える革新的なシステム開発プラットフォーム。 その仕組みからデモンストレーション・顧客事例まで詳しくご紹介します。 ・空港の定時出航を支えるシステムを1ヶ月で稼動 ・全国展開のインテリアショップの商品受発注システムを2週間で開発 ・新しい顧客価値を生んだ医療福祉クラウドネットワーク

サイボウズ!田村悠揮 氏

サイボウズのkintoneエバンジェリストがやってきます

2014/06/18　15:00 ～ 15:40（セミナー第3会場）

（出典：Cloud Days公式サイト[http://expo.nikkeibp.co.jp/cloud/2014/kyusyu/seminar/]）

[C-231]今こそグループウェアについて考える。～スケジュールや 掲示板、本当に活用できていますか？～

グループウェアというジャンルが誕生してから20年。 その中でもスケジュールや掲示板といった基本中の基本機能はもはや改めて説明する必要はないと思われるかもしれません。 しかし基本だからこそ、使い方次第で導入効果を何倍にも上げることができるのです。 グループウェアを知り尽くしたサイボウズが、本当に効果の出る活用方法を事例を元にご紹介いたします。

サイボウズ!栗山圭太 氏

2014/06/19　11:00 ～ 11:40（セミナー第3会場）

サイボウズOffice・kintoneのプロダクトマネージャも やってきます（こちらのセッションはグループウェア寄り？）

【お知らせ】Cloud Days 九州 2014

次回予告?

• ライトコースで出来ることを深めていく？

• REST APIを深めていく？

• HTTPクライアントや簡単なスクリプトから？

• Excel連携？

• JavaScript API/CSSを深めていく？

• サンプルを通じて理解を深めていく？

• jQueryのプラグインでもあてていく？

割と多いです！

最後に

ご質問等あれば、お願いします。また、個別にでもお気軽に！

お疲れさまでした。 !

本日はありがとうございました。