ハンズオン資料です

1. プラグインハンズオ
ン
http://okiyasu.biz/ から
必要ファイルをダウンロードしておいてください。

2. ハンズオン手順
1. プラグインのインストールを試してみよう
2. アプリにプラグインをインストールしてみよう
3. 便利だけど設定が面倒なプラグインを試してみよう
4. JavaScriptカスタマイズに便利なプラグインを試して
みよう

3. プラグインのインストールを試してみよ
う
プラグインとは、kintoneにインストールできる便利機能
、と表現すれば間違いない感じ。
様々なプラグインがあり、アプリ毎に設定できるので、
色々と使い分けできます。
ハンズオンに必要なファイルは、http://okiyasu.biz/ から
ダウンロードしてください。（大事なことなので２回言
いました）

4. プラグインのインストールを試してみよ
う
kintoneシステム管理→プラグイ
ンを選択

5. プラグインのインストールを試してみよ
う
「読み込む」を押すと読み込み画面になるので、「参照
」からプラグインのzipファイルを選択して読み込む

6. プラグインのインストールを試してみよ
う
追加完了

7. プラグインをインストールする「顧客リスト」アプリを
、アプリストアから作成
アプリにプラグインをインストールしてみよ
う

8. 検索ボタンを表示する為のスペースを追加
アプリにプラグインをインストールしてみよ
う
要素IDを入力

9. アプリにプラグインをインストールしてみよ
う
「プラグイン」を選択
「プラグインの追加」を選
択

10. アプリにプラグインをインストールしてみよ
う
チェックボックスにチェックを入れて、「追加」を押す
設定画面に移動

11. アプリにプラグインをインストールしてみよ
う
必須項目を設定
「保存する」を押す

12. アプリにプラグインをインストールしてみよ
う
設定完了を押すのを忘れないように！！

13. アプリにプラグインをインストールしてみよ
う
新規作成
住所検索

14. アプリにプラグインをインストールしてみよ
う
ということで、郵便番号から住所を検索するボタンがで
きました。
スペースの位置にボタンが出来るので、フォームの編集
から好きな位置にレイアウトすることが可能です。

15. 便利だけど設定が面倒なプラグインを試してみよ
う
カレンダーPlus

16. 便利だけど設定が面倒なプラグインを試してみよ
う
プラグインとアプリを読み込んでみましょう
それぞれのファイルは、http://okiyasu.biz/ からダウンロ
ードしてください（しつこい？）
アプリにも アプリテンプレート という機能があり、
自由にテンプレートを作ったり読み込んだりできます。
便利ですよー

17. 便利だけど設定が面倒なプラグインを試してみよ
う
アプリテンプレート読み込み(calendarPlusSampleApp2.0.zip)

18. 便利だけど設定が面倒なプラグインを試してみよ
う
読み込み完了

19. 便利だけど設定が面倒なプラグインを試してみよ
う
テンプレートからアプリ作成

20. 便利だけど設定が面倒なプラグインを試してみよ
う
テンプレートからアプリ作成

21. kintoneシステム管理→プラグイ
ンを選択（２回目）
便利だけど設定が面倒なプラグインを試してみよ
う

22. 便利だけど設定が面倒なプラグインを試してみよ
う
プラグインをインストール(calendarPlus_v2.zip)

23. 便利だけど設定が面倒なプラグインを試してみよ
う
ここから移動可能です

24. 便利だけど設定が面倒なプラグインを試してみよ
う
あとは通常通りプラグインの設定です

25. 便利だけど設定が面倒なプラグインを試してみよ
う
設定します！
！

26. アプリにプラグインをインストールしてみよ
う
設定完了を押すのを忘れないように！！（２回目）

27. 便利だけど設定が面倒なプラグインを試してみよ
う
設定完了です

28. 便利だけど設定が面倒なプラグインを試してみよ
う
入力するとこんな感じ

29. JavaScriptカスタマイズに便利なプラグインを試してみよ
う
JSEdit for kintone

30. JavaScriptカスタマイズに便利なプラグインを試してみよ
う
プラグインを読み込んで、「顧客リスト」アプリにイン
ストールしましょう。
必要なファイルは以下略。
そろそろインストールにも慣れてきたでしょうか？
何となく作業に詰まったら手をあげてください（＾＾

31. kintoneシステム管理→プラグイ
ンを選択（３回目）
JavaScriptカスタマイズに便利なプラグインを試してみよ
う

32. アプリにプラグインを追加
「プラグインの追加」を選
択
JavaScriptカスタマイズに便利なプラグインを試してみよ
う

33. JavaScriptカスタマイズに便利なプラグインを試してみよ
う
プラグインの設定から
編集画面に移動します

34. JavaScriptカスタマイズに便利なプラグインを試してみよ
う
ファイルを新規作成し
ます。

35. JavaScriptカスタマイズに便利なプラグインを試してみよ
う
保存
１行追加してみる

36. JavaScriptカスタマイズに便利なプラグインを試してみよ
う
反応なし

37. JavaScriptカスタマイズに便利なプラグインを試してみよ
う
jQueryをお忘れなく
反応あり

38. JSEdit for kintone では、
設定完了を押す必要なし！！
JavaScriptカスタマイズに便利なプラグインを試してみよ
う

39. JavaScriptカスタマイズに便利なプラグインを試してみよ
う
入力補助が効くので、適当に入力しても大丈夫（笑

40. JavaScriptカスタマイズを試してみよ
う
さて、実はこれからが締めです(^^;
今までの作業を踏まえると、JavaScriptカスタマイズが
比較的簡単に出来るのです。
最後の力を振り絞って試してみましょー。

41. JavaScriptカスタマイズを試してみよ
う
住所から地図表示するカスタマイズを試します
リンク先は、http://okiyasu.biz/の一番下にあります

42. JavaScriptカスタマイズを試してみよ
う
「顧客リスト」アプリでJSEdit for kintoneの編集画面に
行って、説明サイトからソースを丸コピします

43. JavaScriptカスタマイズを試してみよ
う
完成

44. 終了
お疲れ様でした〜
これで、みなさんはkintone プラグインをドヤ顏で語れ
ます（多分
プラグインは他にも色々あるので、気になるものがあっ
たら試してみましょう！