44
ププププププププププ http://okiyasu.biz/ ププ ププププププププププププププププププププププ

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

  • Upload
    -

  • View
    303

  • Download
    2

Embed Size (px)

Citation preview

Page 1: kintone プラグインハンズオン資料

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

Page 2: kintone プラグインハンズオン資料

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

Page 3: kintone プラグインハンズオン資料

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

Page 4: kintone プラグインハンズオン資料

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

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

Page 5: kintone プラグインハンズオン資料

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

Page 6: kintone プラグインハンズオン資料

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

Page 7: kintone プラグインハンズオン資料

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

Page 8: kintone プラグインハンズオン資料

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

要素 IDを入力

Page 9: kintone プラグインハンズオン資料

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

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

Page 10: kintone プラグインハンズオン資料

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

設定画面に移動

Page 11: kintone プラグインハンズオン資料

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

「保存する」を押す

Page 12: kintone プラグインハンズオン資料

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

Page 13: kintone プラグインハンズオン資料

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

新規作成

住所検索

Page 14: kintone プラグインハンズオン資料

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

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

Page 15: kintone プラグインハンズオン資料

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

カレンダー Plus

Page 16: kintone プラグインハンズオン資料

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

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

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

Page 17: kintone プラグインハンズオン資料

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

Page 18: kintone プラグインハンズオン資料

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

Page 19: kintone プラグインハンズオン資料

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

Page 20: kintone プラグインハンズオン資料

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

Page 21: kintone プラグインハンズオン資料

kintoneシステム管理→プラグインを選択(2回目)

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

Page 22: kintone プラグインハンズオン資料

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

Page 23: kintone プラグインハンズオン資料

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

Page 24: kintone プラグインハンズオン資料

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

Page 25: kintone プラグインハンズオン資料

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

設定します!!

Page 26: kintone プラグインハンズオン資料

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

Page 27: kintone プラグインハンズオン資料

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

Page 28: kintone プラグインハンズオン資料

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

Page 29: kintone プラグインハンズオン資料

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

JSEdit for kintone

Page 30: kintone プラグインハンズオン資料

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

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

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

Page 31: kintone プラグインハンズオン資料

kintoneシステム管理→プラグインを選択(3回目)

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

Page 32: kintone プラグインハンズオン資料

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

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

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

Page 33: kintone プラグインハンズオン資料

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

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

Page 34: kintone プラグインハンズオン資料

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

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

Page 35: kintone プラグインハンズオン資料

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

保存

1行追加してみる

Page 36: kintone プラグインハンズオン資料

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

Page 37: kintone プラグインハンズオン資料

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

jQueryをお忘れなく

反応あり

Page 38: kintone プラグインハンズオン資料

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

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

Page 39: kintone プラグインハンズオン資料

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

Page 40: kintone プラグインハンズオン資料

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

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

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

Page 41: kintone プラグインハンズオン資料

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

Page 42: kintone プラグインハンズオン資料

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

Page 43: kintone プラグインハンズオン資料

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

Page 44: kintone プラグインハンズオン資料

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