kintone プラグインハンズオン資料
TRANSCRIPT
![Page 2: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/2.jpg)
ハンズオン手順1. プラグインのインストールを試してみよう2. アプリにプラグインをインストールしてみよう3. 便利だけど設定が面倒なプラグインを試してみよう4. JavaScriptカスタマイズに便利なプラグインを試してみよう
![Page 3: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/3.jpg)
プラグインのインストールを試してみようプラグインとは、 kintoneにインストールできる便利機能、と表現すれば間違いない感じ。様々なプラグインがあり、アプリ毎に設定できるので、色々と使い分けできます。ハンズオンに必要なファイルは、 http://okiyasu.biz/ からダウンロードしてください。(大事なことなので2回言いました)
![Page 4: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/4.jpg)
プラグインのインストールを試してみよう
kintoneシステム管理→プラグインを選択
![Page 5: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/5.jpg)
プラグインのインストールを試してみよう「読み込む」を押すと読み込み画面になるので、「参照」からプラグインの zipファイルを選択して読み込む
![Page 6: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/6.jpg)
プラグインのインストールを試してみよう追加完了
![Page 7: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/7.jpg)
プラグインをインストールする「顧客リスト」アプリを、アプリストアから作成アプリにプラグインをインストールしてみよう
![Page 8: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/8.jpg)
検索ボタンを表示する為のスペースを追加アプリにプラグインをインストールしてみよう
要素 IDを入力
![Page 9: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/9.jpg)
アプリにプラグインをインストールしてみよう「プラグイン」を選択
「プラグインの追加」を選択
![Page 10: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/10.jpg)
アプリにプラグインをインストールしてみようチェックボックスにチェックを入れて、「追加」を押す
設定画面に移動
![Page 11: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/11.jpg)
アプリにプラグインをインストールしてみよう必須項目を設定
「保存する」を押す
![Page 12: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/12.jpg)
アプリにプラグインをインストールしてみよう設定完了を押すのを忘れないように!!
![Page 13: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/13.jpg)
アプリにプラグインをインストールしてみよう
新規作成
住所検索
![Page 14: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/14.jpg)
アプリにプラグインをインストールしてみよう
ということで、郵便番号から住所を検索するボタンができました。スペースの位置にボタンが出来るので、フォームの編集から好きな位置にレイアウトすることが可能です。
![Page 15: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/15.jpg)
便利だけど設定が面倒なプラグインを試してみよう
カレンダー Plus
![Page 16: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/16.jpg)
便利だけど設定が面倒なプラグインを試してみよう
プラグインとアプリを読み込んでみましょうそれぞれのファイルは、 http://okiyasu.biz/ からダウンロードしてください(しつこい?)
アプリにも アプリテンプレート という機能があり、自由にテンプレートを作ったり読み込んだりできます。便利ですよー
![Page 17: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/17.jpg)
便利だけど設定が面倒なプラグインを試してみよう アプリテンプレート読み込み(calendarPlusSampleApp2.0.zip)
![Page 18: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/18.jpg)
便利だけど設定が面倒なプラグインを試してみよう読み込み完了
![Page 19: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/19.jpg)
便利だけど設定が面倒なプラグインを試してみようテンプレートからアプリ作成
![Page 20: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/20.jpg)
便利だけど設定が面倒なプラグインを試してみよう テンプレートからアプリ作成
![Page 21: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/21.jpg)
kintoneシステム管理→プラグインを選択(2回目)
便利だけど設定が面倒なプラグインを試してみよう
![Page 22: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/22.jpg)
便利だけど設定が面倒なプラグインを試してみようプラグインをインストール (calendarPlus_v2.zip)
![Page 23: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/23.jpg)
便利だけど設定が面倒なプラグインを試してみよう ここから移動可能です
![Page 24: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/24.jpg)
便利だけど設定が面倒なプラグインを試してみよう あとは通常通りプラグインの設定です
![Page 25: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/25.jpg)
便利だけど設定が面倒なプラグインを試してみよう
設定します!!
![Page 26: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/26.jpg)
アプリにプラグインをインストールしてみよう設定完了を押すのを忘れないように!!(2回目)
![Page 27: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/27.jpg)
便利だけど設定が面倒なプラグインを試してみよう 設定完了です
![Page 28: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/28.jpg)
便利だけど設定が面倒なプラグインを試してみよう入力するとこんな感じ
![Page 29: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/29.jpg)
JavaScriptカスタマイズに便利なプラグインを試してみよう
JSEdit for kintone
![Page 30: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/30.jpg)
JavaScriptカスタマイズに便利なプラグインを試してみよう
プラグインを読み込んで、「顧客リスト」アプリにインストールしましょう。必要なファイルは以下略。
そろそろインストールにも慣れてきたでしょうか?何となく作業に詰まったら手をあげてください(^^
![Page 31: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/31.jpg)
kintoneシステム管理→プラグインを選択(3回目)
JavaScriptカスタマイズに便利なプラグインを試してみよう再確認
![Page 32: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/32.jpg)
アプリにプラグインを追加
「プラグインの追加」を選択
JavaScriptカスタマイズに便利なプラグインを試してみよう再確認
![Page 33: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/33.jpg)
JavaScriptカスタマイズに便利なプラグインを試してみよう
プラグインの設定から編集画面に移動します
![Page 34: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/34.jpg)
JavaScriptカスタマイズに便利なプラグインを試してみよう
ファイルを新規作成します。
![Page 35: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/35.jpg)
JavaScriptカスタマイズに便利なプラグインを試してみよう
保存
1行追加してみる
![Page 36: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/36.jpg)
JavaScriptカスタマイズに便利なプラグインを試してみよう反応なし
![Page 37: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/37.jpg)
JavaScriptカスタマイズに便利なプラグインを試してみよう
jQueryをお忘れなく
反応あり
![Page 38: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/38.jpg)
JSEdit for kintone では、設定完了を押す必要なし!!
JavaScriptカスタマイズに便利なプラグインを試してみよう
![Page 39: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/39.jpg)
JavaScriptカスタマイズに便利なプラグインを試してみよう入力補助が効くので、適当に入力しても大丈夫(笑
![Page 40: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/40.jpg)
JavaScriptカスタマイズを試してみよう
さて、実はこれからが締めです (^^;
今までの作業を踏まえると、 JavaScriptカスタマイズが比較的簡単に出来るのです。最後の力を振り絞って試してみましょー。
![Page 41: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/41.jpg)
JavaScriptカスタマイズを試してみよう住所から地図表示するカスタマイズを試しますリンク先は、http://okiyasu.biz/の一番下にあります
![Page 42: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/42.jpg)
JavaScriptカスタマイズを試してみよう「顧客リスト」アプリで JSEdit for kintoneの編集画面に行って、説明サイトからソースを丸コピします
![Page 43: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/43.jpg)
JavaScriptカスタマイズを試してみよう完成
![Page 44: kintone プラグインハンズオン資料](https://reader036.vdocuments.net/reader036/viewer/2022081503/58ae7f9f1a28abea4f8b5f3d/html5/thumbnails/44.jpg)
終了お疲れ様でした〜これで、みなさんは kintone プラグインをドヤ顏で語れます(多分プラグインは他にも色々あるので、気になるものがあったら試してみましょう!