Mais conteúdo relacionado
Semelhante a 実践!JavaScriptカスタマイズ (20)
実践!JavaScriptカスタマイズ
- 2. 自己紹介
2
• 1971年 札幌市生まれ
• 小6からパソコンに触れ、大学卒業まで札幌で過ごす
• 1993年 NTTデータ通信株式会社(首都圏)
• 1996年 株式会社データクラフト(札幌)
• 2012年 ラジカルブリッジ設立(札幌)
• 2014年より kintoneエバンジェリスト として活動中
代表/ IT 活用アドバイザー
“クラウドおじさん” 斎藤 栄
~ ITでみんなに“WAKU WAKU”を ~
サイボウズ公認
- 7. ベストチーム365 サービスプラン
【わくわくプラン】
¥89,890
【にこにこプラン】
¥252,500
初回訪問・試作無料
訪問改修1回
初回訪問・試作無料
訪問改修3回
60日間の利用サポート
初回訪問・試作無料
7
リーズナブルな理由
見積なし 見積作業をしている間にアプリができてしまうため、料金体系をメニュー化しました。
仕様書なし 一般的なシステム開発作業で多くの時間を要する仕様書の作成を省きました。
分業なし 営業、SE、プログラマという分業体制ではなく、一人の担当者が全ての作業を行います。
サイボウズ社のkintoneを基盤としているため、短期間で複数のアプリを構築できます。
※金額は全て税別です。
※別途kintoneの利用契約が必要となります。
※札幌市内及び近郊のお客様を想定しています。遠方のお客様の場合、Skypeによる
ネットミーティングにて対応させていただきます。
- 9. ベストチーム365 導入事例
地方独立行政法人
佐賀県医療センター好生館様
予約台帳 • 予約前に空き状況がわかる
• カレンダー形式や一覧形式な
ど多様な見方ができる
• 実績集計の自動化
• 受付担当者の業務負荷を削減
Before After
業務効率化
ペーパーレス
9
地域の連携医療機関からの紹介患者を対象とした
診療予約管理
• 電話で問い合わせないと空き状況が確認できない
• 紙の台帳が手元にないと空き状況の問い合わせに
回答できない
• 紙の台帳を元に「来院予定者リスト」「月別予約
実績」などのExcel帳票を別途作成しなければな
らない(二重・三重の入力)
• 受付担当者の業務負担が増加 北海道と佐賀県の間で
たった2回のSkypeミーティングで完成!
- 10. 料金表・オプション
10
オプション項目 内 容 料 金
追加訪問改修
【にこにこプラン】の枠内に収まりきらなかった訪問
改修作業を追加で承ります。
¥40,000/回
リモート保守・サポート
構築したアプリの軽微な改修やkintone全般の利用サ
ポートを承ります。(リモートでの対応となります)
¥10,000/時間
または
月額¥15,000(月4時間まで)
オプション
わくわくプラン にこにこプラン
ベストチーム365
サービス利用料金 ¥89,890 ¥252,500
初回訪問・試作 無 料
訪問改修 1回 3回
リモート保守・サポート 無し 60日間
kintone利用料金
※30日間無料試用可
※最低契約数5ユーザー
※サイボウズ社に直接
お支払ください。
ライトコース 月額 ¥780/ユーザー
スタンダードコース
※API利用ありの場合はこちら
月額 ¥1,500/ユーザー
料金表 ※金額は全て税別
※訪問型サービスのため、基本的には札幌市内及び近郊のお客様を想定しております。
遠方のお客様の場合、Skypeによるネットミーティングにて対応させていただきます。
- 11. お支払い方法
11
お支払い方法
お支払方法 備 考
現金 最終訪問時にお支払ください。
クレジットカード
最終訪問時にその場でカード決済を行いますのでクレジットカードをご用意ください。
※VISA, MASTER, AMEXのみ
銀行振込(都度請求)
請求書発行日より14日以内に振込をお願い致します。
※振込手数料はお客様負担とさせていただきます
銀行振込(月締請求)
※取引実績のあるお客様のみ
月末締にて請求書を発行させていただきますので、翌月末までにお支払ください。
※振込手数料はお客様負担とさせていただきます
カジュアルなSI
- 13. 全国に広がるkintone Caféの輪
2013/12/7 札幌 Vol.1(起源)
2014/5/16 札幌 Vol.2
2014/10/25 札幌 Vol.3
2015/3/14 札幌 Vol.4
2015/6/4 札幌 Vol.5
2015/10/17 札幌 Vol.6
2014/5/29 福岡 Vol.1
2014/7/11 福岡 Vol.2
2014/10/24 福岡 Vol.3
2015/4/17 福岡 Vol.4
2015/6/24 福岡 Vol.5
2015/8/29 福岡 Vol.6
2015/10/24 福岡 Vol.7
2014/5/30 土佐
2015/5/30 高知 Vol.2
2014/7/5 弘前 #1
2015/1/29 京橋 Vol.1
2015/4/6 京橋 Vol.2
2014/8/1 千葉(第1回)
2014/9/3 千葉(第2回)
2014/12/12 千葉(第3回)
2014/8/21 横浜 Vol.1
2014/8/11 釧路
2014/9/12 松江 #1
2014/9/2 Seoul #1
2014/9/24 松山 #1
2015/9/26 愛媛 Vol.1
2014/9/25 神戸 Vol.1
2015/5/25 神戸 Vol.2
2014/9/28 Okinawa #1
2015/2/11 沖縄 Vol.2
2015/10/10 沖縄 Vol.3
2014/10/22 京都 #1
Korea
3ヶ国 18都道府県
57回開催!※2015/10/17までの予定含む
2014/11/21 北九州 Vol.1
2014/12/3
@chiba みずいろ会館※女性限定
2015/1/30 新潟 Vol.1
2015/7/4 新潟 Vol.2
2014/12/15 八王子 Vol.1
2015/2/19 八王子 Vol.2
13
kintone Café
創始者です!
2015/1/24 仙台 Vol.1
2015/3/7 仙台 Vol.2
2015/4/4 仙台 Vol.3
2014/12/11 荻窪 Vol.1
2015/1/26 荻窪 Vol.2
2014/7/23 東京 Vol.1
2015/2/20 東京 Vol.2
2015/7/24 東京 Vol.3
2015/9/4 東京 Vol.4
2015/2/13 出雲 Vol.1
2015/3/4 大阪 Vol.1
2015/5/19 大阪 Vol.2
2015/7/15 大阪 Vol.3
2015/9/18 大阪 Vol.4
2015/6/17
名古屋 Vol.1
2015/6/25
大分 Vol.1
2015/9/29
鹿児島 Vol.1
札幌支部・運営事務局
斎藤 栄
USA
2015/10/6
Grand Canyon Vol.1
- 18. kintone Café 2015
18
• kintone Café 札幌 (ラジカルブリッジ 斎藤さん)
• kintone Café 仙台 (スマイル 熊谷さん)
• kintone Café 東京 (ジョイゾー 四宮さん、山下さん)
• kintone Café 新潟 (アイティー・プラス・ワン 星野さん)
• kintone Café 名古屋(コラボスタイル 河野さん)
• kintone Café 京都 (KYOSO 辻さん)
• kintone Café 大阪 (アールスリーインスティテュート 金春さん)
• kintone Café 神戸 (カフーツ 伊藤さん)
• kintone Café 三重 (コムデック 生田さん)
• kintone Café 愛媛 (アイムービック 沖さん)
• kintone Café 高知 (タイムコンシェル 片岡さん)
• kintone Café 福岡 (AISIC 久米さん)
• kintone Café 熊本 (AQM 高岡さん)
• kintone Café 大分 (東九州ラボラトリー 松井さん)
• kintone Café 鹿児島(CoCoDigi 富田さん)
• kintone Café 沖縄 (村濱さん)
※太字は運営事務局メンバー
• 1月、『kintone Café 運営事務局』を 設立
• 支部組織化(10/17現在、16支部)
公式サイト
kintonecafe.com
勉強会への参加
&ジョイン歓迎!
- 20. kintone Café メディア掲載
20
2015/3/3 日経ITpro
“圧力団体”目指す、ユーザー・SIer共同で
「kintone」利用者コミュニティーを組織化
http://itpro.nikkeibp.co.jp/atcl/column/14/346926/022700183/
2015/2/23 ASCII.jp×クラウド
コミュニティ立ち上がりの瞬間、7人のkintoneマンが語ったこと
http://ascii.jp/elem/000/000/982/982469/
2015/5/21 BCN Bizline
<畔上編集長が今、いちばん気になるクラウド>
「kintone Café」運営事務局座談会
SIerが語るkintoneの魅力とビジネスチャンス
http://biz.bcnranking.jp/article/serial/notice_c/1505/150521_139428.html
2015/8/25 ASCII.jp×クラウド
kintone×Bluemix対談、
エバンジェリストがPaaSの可能性を語る!
http://itpro.nikkeibp.co.jp/atcl/column/14/346926/022700183/
- 25. kintoneプラグイン《Movable Type 連携》
25
提供元:ラジカルブリッジ ※無償
http://radical-bridge.com/product/kintone-mt-plugin.html
kintoneで管理している商品情報などのデータを
Movable Type経由でWebサイトに公開
➡Webに公開するためだけのコピペ作業が不要に
➡kintoneのワークフローとの組み合わせも容易
カスタムフィールドに対応
スマホからも投稿できる
MTのDBにパブリッシュしてしまうのでkintone
のAPIリクエスト数制限を気にしなくて良い
kintone.proxy()
• 記事の投稿・更新・削除
Movable Type
(Data API 1.0)
- 26. クラウド電話API ~ Twilio × kintone
26
・初期費用無料、月額の通話・通信料のみ
・例えばコールセンターの構築
・アウトバウンド/インバウンド
・IVR(自動音声応答)、CTIの構築
・音声録音
・SMS通知
・他システム連携
×
例えば、コールセンターっぽいものも作れちゃう
- 35. イベントの記述例
35
(function() {
"use strict";
// 追加画面表示時イベント
kintone.events.on(['app.record.create.show'], function (event) {
// …
return event;
});
// 追加・編集画面表示時イベント
kintone.events.on(['app.record.create.show',
'app.record.edit.show'], function (event) {
// …
return event;
});
// 詳細画面表示時イベント
kintone.events.on(['app.record.detail.show'], function (event) {
// …
return event;
});
})();
- 36. イベント一覧
36
分類 イベント
イベントタイプ
(PC用)
イベントタイプ
(スマートフォン用)
レコード一覧
レコード一覧画面表示後イベント app.record.index.show mobile.app.record.index.show
「保存ボタン」クリック時イベント app.record.index.edit.submit ×
インライン編集開始時イベント app.record.index.edit.show ×
フィールド値変更時イベント
app.record.index.edit.change.
<フィールドコード>
×
レコード削除前イベント app.record.index.delete.submit ×
レコード表示
レコード詳細画面表示時イベント app.record.detail.show mobile.app.record.detail.show
レコード削除前イベント app.record.detail.delete.submit ×
プロセス管理のアクション実行イベント app.record.detail.process.proceed ×
レコード追加
レコード追加画面表示時イベント app.record.create.show mobile.app.record.create.show
保存実行前イベント app.record.create.submit ×
フィールド値変更時イベント
app.record.create.change.
<フィールドコード>
×
レコード編集
レコード編集画面表示時イベント app.record.edit.show mobile.app.record.edit.show
保存実行前イベント app.record.edit.submit ×
フィールド値変更時イベント
app.record.edit.change.
<フィールドコード>
×
グラフ表示 グラフ表示時イベント app.report.show ×
※最新の情報は公式のリファレンスをご参照ください
- 37. イベント発生時に実行できる操作の例
37
(function() {
"use strict";
// 追加画面表示時イベント
kintone.events.on(['app.record.create.show'], function (event) {
event[‘record‘][‘住所’][‘value’] = ‘自動入力’; // 値の書き換え
return event;
});
// 追加・編集画面表示時イベント
kintone.events.on(['app.record.create.show‘,
'app.record.edit.show‘], function (event) {
event[‘record’][‘住所’][‘disabled’] =true; // 入力不可
return event;
});
// 詳細画面表示時イベント
kintone.events.on(['app.record.detail.show'], function (event) {
// …
return event;
});
})();
- 38. イベント発生時に実行できる操作一覧
38
操作内容 サンプルコード 一覧 表示 追加 編集
フィールドの値を書き換える event[‘record’]['文字列']['value'] = 'ほげほげ'; ● ● ●
フィールドの編集可/不可を設定する event[‘record’]['文字列']['disabled'] = true; ● ● ●
フィールドにエラーを表示する event[‘record’]['文字列']['error'] = 'エラーです!'; ● ● ●
レコードにエラーを表示する event.error = 'エラーです!'; ● ● ●
フィールドの表示/非表示を切り替える kintone.app.record.setFieldShown('文字列', false); ● ● ●
ルックアップの取得を自動で行う
event[‘record’]['ルックアップ']['value'] = '0001';
event[‘record’]['ルックアップ']['lookup'] = true;
● ●
※最新の情報は公式のリファレンスをご参照ください
- 39. フィールド要素取得の例
39
(function() {
"use strict";
// 追加画面表示時イベント
kintone.events.on(['app.record.create.show'], function (event) {
event[‘record’][‘住所’][‘value’] = ‘自動入力’; // 値の書き換え
return event;
});
// 追加・編集画面表示時イベント
kintone.events.on(['app.record.create.show‘,
'app.record.edit.show‘], function (event) {
event[‘record’][‘住所’][‘disabled’] =true; // 入力不可
return event;
});
// 詳細画面表示時イベント
kintone.events.on(['app.record.detail.show'], function (event) {
var elm = kintone.app.record.getFieldElement(‘氏名');
elm.style.fontWeight = 'bold';
return event;
});
})(); ★ここで一旦ファイルを保存
- 40. 情報取得①
40
分類 取得情報 関数
アプリ アプリID kintone.app.getId();
レコード一覧情報
レコード一覧のクエリ文字列 kintone.app.getQueryCondition();
レコード一覧のクエリ文字列
(order by, limit, offset付き)
kintone.app.getQuery();
フィールド要素 kintone.app.getFieldElements('文字列');
メニューの右側の空白部分の要素 kintone.app.getHeaderMenuSpaceElement();
メニューの下側の空白部分の要素 kintone.app.getHeaderSpaceElement();
関連レコード一覧の参照先のアプリID kintone.app.getRelatedRecordsTargetAppId('関連レコード一覧');
ルックアップの参照先のアプリID kintone.app.getLookupTargetAppId('ルックアップ');
ヘッダーの下側の空白部分の要素
(スマートフォン用のみ)
kintone.mobile.app.getHeaderSpaceElement();
レコード詳細情報
レコードID kintone.app.record.getId();
レコードの値
kintone.app.record.get();
kintone.mobile.app.record.get();
レコードに値をセット
kintone.app.record.set();
kintone.mobile.app.record.set();
フィールド要素 kintone.app.record.getFieldElement('文字列');
メニューの右側の空白部分の要素 kintone.app.record.getHeaderMenuSpaceElement();
スペースフィールドの要素 kintone.app.record.getSpaceElement('space1');
- 41. 情報取得②
41
分類 取得情報 関数
レコード詳細情報
メニューの下側の空白部分の要素 kintone.app.getHeaderSpaceElement();
関連レコード一覧の参照先のアプリID kintone.app.getRelatedRecordsTargetAppId('関連レコード一覧');
ルックアップの参照先のアプリID kintone.app.getLookupTargetAppId('ルックアップ');
ヘッダーの下側の空白部分の要素
(スマートフォン用のみ)
kintone.mobile.app.getHeaderSpaceElement();
ユーザー情報
ログインユーザーの情報 kintone.getLoginUser();
ユーザーの情報
(ユーザーエクスポートAPI)
https://(サブドメイン名).cybozu.com/v1/users.json
UIデザイン デザインのバージョン kintone.getUiVersion();
※最新の情報は公式のリファレンスをご参照ください
- 43. kintone REST API リクエスト
43
操作内容 関数
REST APIリクエストを送信する
kintone.api('/k/v1/record', 'GET', {app: 1, id: 5}, function(resp) {
//成功時の処理
console.log(resp);
}, function(resp) {
//エラー時の処理
console.log(resp);
});
URL を取得する(クエリ文字列無し) kintone.api.url('/k/v1/records');
URL を取得する(クエリ文字列付き) kintone.api.urlForGet('/k/v1/records', {app: 4,fields: ["record_no"]});
CSRFトークンの取得 kintone.getRequestToken();
※最新の情報は公式のリファレンスをご参照ください
- 50. 解決策②:JSEdit for kintone プラグインを使う
50
1. cybozu.com developer network > サンプル > kintone プラグイン よりダウンロード
2. kintoneシステム管理 > プラグイン より JSEdit for kintoneプラグインを読み込む
3. 名簿アプリの アプリの設定 > 詳細設定 > プラグイン でJSEdit for kintoneを追加
10/9に発表
されたばかり!
- 52. 郵便番号→住所変換をやってみよう!
52
// 郵便番号変更時の処理
kintone.events.on(['app.record.create.change.郵便番号',
'app.record.edit.change.郵便番号'], function(event) {
var zipcode = event.record['郵便番号']['value'];
var address = event.record['住所']['value'];
var url = 'http://api.zipaddress.net/?zipcode=' + zipcode;
// kintone.proxyで非同期処理
kintone.proxy(url, 'GET', {}, {}, function(body, status, headers) {
if (status == 200) {
var response = JSON.parse(body);
if (response['code'] == 200) {
var record = kintone.app.record.get(); // 非同期の場合はこれ
record['record']['住所']['value'] = response['data']['fullAddress'];
kintone.app.record.set(record); // 非同期の場合はこれ
}
}
},
function(body) {
alert('住所取得エラー');
});
return event;
});
- 53. kintone × Amazon API Gateway × AWS Lambda
53
Amazon
API Gateway
AWS
Lambda
数値1 数値2
数値1
数値2
+
合計
【デモ】
贅沢な足し算をやってみた
- 58. 冬に向けていろいろなイベントに登場させていただきます
58
11/6 cybozu.comカンファレンス2015 東京
@ホテルニューオータニ(東京) kintoneハンズオン講師
11/12 JAWS-UG 札幌 in AWS Cloud Roadshow 2015
@ニューオータニイン札幌 kintoneパネリスト参加
11/13 Eight Meet Up Tour in 札幌
@SHARE Eight × kintone のお話で登壇
11/20 cybozu.comカンファレンス2015 大阪
終了後の kintone Café 大阪 Vol.5 LT参加
11/30 kintone Café 札幌 Vol.7 + JAWS-UG 札幌 合同開催
12/4 kintone devCamp 2015 @サイボウズ本社(東京)
kintone × Twilio連携ハンズオン講師
12/9 某社kintoneセミナー登壇(札幌)