kintone プラグインハンズオン資料

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

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

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

プラグインのインストールを試してみよう

kintoneシステム管理→プラグインを選択

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

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

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

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

要素 IDを入力

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

「プラグインの追加」を選択

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

設定画面に移動

アプリにプラグインをインストールしてみよう必須項目を設定

「保存する」を押す

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

アプリにプラグインをインストールしてみよう

新規作成

住所検索

アプリにプラグインをインストールしてみよう

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

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

カレンダー Plus

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

プラグインとアプリを読み込んでみましょうそれぞれのファイルは、 http://okiyasu.biz/ からダウンロードしてください（しつこい？）

アプリにも　アプリテンプレート　という機能があり、自由にテンプレートを作ったり読み込んだりできます。便利ですよー

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

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

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

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

kintoneシステム管理→プラグインを選択（２回目）

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

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

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

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

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

設定します！！

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

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

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

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

JSEdit for kintone

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

プラグインを読み込んで、「顧客リスト」アプリにインストールしましょう。必要なファイルは以下略。

そろそろインストールにも慣れてきたでしょうか？何となく作業に詰まったら手をあげてください（＾＾

kintoneシステム管理→プラグインを選択（３回目）

JavaScriptカスタマイズに便利なプラグインを試してみよう再確認

アプリにプラグインを追加

「プラグインの追加」を選択

JavaScriptカスタマイズに便利なプラグインを試してみよう再確認

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

プラグインの設定から編集画面に移動します

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

ファイルを新規作成します。

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

保存

１行追加してみる

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

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

jQueryをお忘れなく

反応あり

JSEdit for kintone では、設定完了を押す必要なし！！

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

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

JavaScriptカスタマイズを試してみよう

さて、実はこれからが締めです (^^;

今までの作業を踏まえると、 JavaScriptカスタマイズが比較的簡単に出来るのです。最後の力を振り絞って試してみましょー。

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

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

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

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