kintoneアプリをjavascriptでいじってみよう
Download as PPTX, PDF2 likes4,244 views
Developers Summit 2016 18-F-1 資料
![Sample.jsの変更
★修正点2
関数indexShowを次のように変更します。
function indexShow(event){
var records = event.records;
loadGMap();
waitLoaded(event, 'index', 10000, 100);
var elKakudo = kintone.app.getFieldElements('kakudo');
for(var i = 0; i < elKakudo.length; i++){
if(records[i]['kakudo']['value'] == 'A'){
elKakudo[i].style.color = 'red';
}else if(records[i]['kakudo']['value'] == 'B'){
elKakudo[i].style.color = 'blue';
}else if(records[i]['kakudo']['value'] == 'C'){
elKakudo[i].style.color = 'green';
}
}
}](https://image.slidesharecdn.com/kintonejavascript-160223041945/85/kintone-javascript-56-320.jpg)
kintoneアプリをjavascriptでいじってみよう
- 2. 自己紹介自己紹介 北川 恭平（きたがわ きょうへい） • Cybozu 新卒4年目 • kintone developer プロデューサー • cybozu.com developer network 管理人 • kintone技術者系イベント企画 • developerサイトのコンテンツ制作 趣味 • カレー • 野球 • トレーニング Work
- 5. kintoneの基本
- 10. ドラッグ＆ドロップでアプリ作成
- 11. アプリストアからアプリ作成
- 12. エクセルからアプリ作成
- 13. アプリの画面
- 14. 一覧ビュー
- 15. 詳細ビュー
- 16. 登録画面
- 18. コミュニケーション
- 19. データの活用
- 23. REST API 活用例
- 27. カスタマイズビュー活用例
- 31. kintoneでアプリ作成 ▌主に3種類の方法で、すぐにアプリを作成できます。 ①Excelファイル をそのまま アプリ化 ②アプリストア から選ぶ ③はじめからつくる 今回はExcelから作成
- 33. クリックして kintone にアクセス メンテナンス等のお知らせ ユーザー情報の管理や cybozu.com 全体に影響する設定 ログイン完了
- 36. アプリの作成方法を選ぶ
- 38. フィールドタイプを変更します ▌以下のように変更します フィールド名 変更前 変更後 会社名 ドロップダウン 文字列(1行) 部署名 ドロップダウン 文字列(1行) 担当者名 ドロップダウン 文字列(1行) 郵便番号(数値のみ) 数値 数値 住所 文字列(1行) 文字列(1行) TEL(数値のみ) 数値 数値 FAX(数値のみ) 数値 数値 メールアドレス リンク(メールアドレス) リンク(メールアドレス) 緯度 数値 数値 経度 数値 数値 備考 備考 文字列(複数行) 確度 ラジオボタン ラジオボタン
- 39. アプリを作成します
- 40. アプリを確認します
- 41. 見た目を直します
- 43. データの登録
- 44. データの削除
- 47. 準備 ▌アプリの設定 > フォーム より 以下のように変更を加えます。 フィールド名 変更後フィールドコード 住所 Address 緯度 lat 経度 lng <変更> <追加> 追加するフィールド 要素ID スペース Map
- 54. 準備 ▌アプリの設定 > フォーム より 以下のように変更を加えます。 フィールド名 変更後フィールドコード 確度 kakudo <変更>
- 56. Sample.jsの変更 ★修正点2 関数indexShowを次のように変更します。 function indexShow(event){ var records = event.records; loadGMap(); waitLoaded(event, 'index', 10000, 100); var elKakudo = kintone.app.getFieldElements('kakudo'); for(var i = 0; i < elKakudo.length; i++){ if(records[i]['kakudo']['value'] == 'A'){ elKakudo[i].style.color = 'red'; }else if(records[i]['kakudo']['value'] == 'B'){ elKakudo[i].style.color = 'blue'; }else if(records[i]['kakudo']['value'] == 'C'){ elKakudo[i].style.color = 'green'; } } }
- 59. One more thing
- 61. まとめ
- 62. kintone まとめ ▌GUIでアプリケーションを作れるプラットフォーム ▌業務アプリケーションをExcelから作れたり、ドラッグ＆ドロップで作れる ▌kintone JavaScriptカスタマイズ 表示を変えることができる 他サービスと連携ができる 楽しい
- 63. cybozu.com developer network https://cybozudev.zendesk.com/hc/ja ★アカウント登録特典★ • 5ユーザー、1年間無償のkintone開発者ライセンスを申し込 むことができます。 • コミュニティに投稿やコメントしたり、Tips に質問できます。 • API のアップデート情報の通知を受け取ることができます。
- 64. kintone devCamp http://kintonedevcamp.connpass.com/ kintone devCampとは？ kintone devCamp とは kintone界隈のdeveloper同士で会 場に出向き、kintoneに触れあい、共に学んでいくCybozu主催 のdeveloper向け勉強会です。 kintoneカスタマイズ初心者～ 上級者の方向けにdeveloper network内のコンテンツを中心と したテーマで開催していきます。 次回は3/2(水) サイボウズ東京オフィスにて！
- 65. kintone devCamp Vol.9 @Tokyo 2016/3/2(水) 15:00- サイボウズ東京オフィス27F
- 66. Thank You