こんにちは。編集部のEriです！5月10日はシドニーの中心地にあるHaymarket Seminar Spaceにて、「kintoneカスタマイズ入門」を開催しました。今回の講師は、kintone Australiaシステムコンサルタントの永江 悠紀さん。また、ゲストメンターとしてサイボウズ株式会社よりシステムコンサルティング本部の三宅 智子さんが日本よりリモートで参加されました。

それでは早速当日のカスタマイズの流れをご紹介していきますね！

はじめに：カスタマイズをしたらどんなことができるの？

カスタマイズをしたらどんなことができるのでしょうか？

例えば…kintoneのアプリに顧客情報を入力する時、電話番号の欄には数字のみしか入力できないようにしたいですよね。そういう時に、数字以外を入力したらエラーメッセージがでるようにできます。

また、カスタマイズすることで他のサービスとの連携も可能です。

◆詳しくはこちら⇒https://kintone.cybozu.com/jp/feature/api.html

背景のテンプレートやデザインも変えることができるので、デスメタル仕様にカスタマイズするということもできます。

◆デスメタル仕様の例⇒http://kintone-blog.cybozu.co.jp/developer/000182.html

普通のクラウドサービスでは最初からそういった機能が入っていないとカスタマイズができない、というものも多いそうなのですが、色やデザインを変えたり、他のサービスと連携できたり、あらゆるカスタマイズができる、というのがkintoneの強みです！

今回挑戦するJavascriptは「○○した時に××したい」という命令を作っていく、という作業です。例えば、先程の「電話番号の欄に数字以外を入力した時にエラーメッセージがでるようにしたい」とか「一覧画面にした時に優先順位の高いものだけを赤で表示したい」といった具合です。

カスタマイズとは何か、が何となくわかったところでこれから実践に進みましょう♪

アプリ作成（事前準備その１）

まず新しいアプリを作成します。「はじめから作成」ボタンを押してください。

こちらを押すと早速新しいアプリのフォーム画面になります。

アプリを作成するためにまず左の列から「文字列（１行）」をドラック＆ドロップで加えます。

赤枠の歯車マークで設定を変更します。

フィールド名（表示名のこと）は何でも良いのですが、今回はわかりやすいように「名前」にしました。

次に下にあるフィールドコードも「名前」にして保存。（ココは後で使うので重要です！）

フィールドコードはシステム的に使う名前となるのでフィールド名と一緒にしておいた方がわかりやすいですね。

設定を終えたら右上のボタンで「アプリを公開」してください。

レコード情報追加（事前準備その２）

では、作ったアプリにまずは２件だけ情報を入力しましょう。今回は名前のところに「山田」「遠藤」とレコードを２件追加しました。

アプリの一覧画面↓

カスタマイズ前の下ごしらえ（事前準備その３）

アプリも作り終えたところで、今度はプラグインをインストールする作業に入ります。

まず、下記のページにてプラグインをダウンロードしてください。

https://cybozudev.zendesk.com/hc/ja/articles/205452653-JSEdit-for-kintone

プラグインはzipファイルのままで保存！（※解凍不要です）

次にダウンロードしたプラグインをkintoneにインストールします。

手順は以下の通り。

①下の歯車マークの中の「kintoneシステム管理」という項目を押す。（※管理者権限がないとこの項目が出てこない場合がありますので、設定を確認してください。権限がない場合は、カスタマイズができないので管理者に設定してもらうか、権限を追加してもらってください。）

②下記画面が開きますので、「プラグイン」を押してください。

③次はプラグインを読み込む画面になります。「読み込む」ボタンを押し、先程ダウンロードしたzipファイルを選択し、インストールしてください。インストールが完了すると、青枠内のアイコンが表示されます。

このプラグインをkintoneシステム管理内でインストールする作業は、kintoneの環境の中でこのプラグインを使えるようにした（全体に影響するイメージ）、という作業です。ただし、すべてのアプリがこのプラグインを必要だとは限らないのでアプリそれぞれに必要であればインストールしたプラグインを適用させる作業もしなければなりません。

では、次に作ったアプリにプラグインを適用させる作業をしましょう。

※管理者設定の部分でインストールする作業を飛ばして各アプリに直接プラグインを入れる、ということはできません。

先程作ったアプリに戻り、アプリの設定画面を開いて「プラグイン」ボタンを押してください。

「プラグインの追加」というボタンが左上に表示されますので押してください。

先程インストールした「JSEdit for kintone」のアイコンが表示されますので、選択し、左上に表示される「追加」を押してください。

「利用するプラグインを追加しました」と表示が出ます。

これで下ごしらえは完了です！

【プラグイン下ごしらえ：まとめ】

①　kintoneシステム管理からプラグインをインストール（まずはkintone環境自体にプラグインを入れる）

②　kintoneアプリ管理画面からプラグインを追加する（個別のアプリに適用する）

いよいよカスタマイズに挑戦！

それではいよいよカスタマイズに突入！

まず初めにポップアップがでる、という仕様をつくってみましょう♪

先程のプラグイン追加画面で追加した後、設定の歯車マークを押してください。

ここからは別タブで２つの画面を用意しましょう。

一つは「JSEdit for kintone」の画面、もう一つはこのアプリの一覧画面（「山田」「遠藤」が表示されている画面）を表示しておいてください。

設定から下記の画面が表示されますので、「新規作成」ボタンを押し、ファイル名を入力してください。

タイトルは何でもOKです。講師は「aloha.js」にしてました。『.js』はタイトルの後に必ずつけてください。

ここにJavascriptのプログラミング言語を書いていくとアプリに適用されます。

ここからは一言一句違うと表示されないので注意してくださいね！スペースや全角の記号なんかが入っていても動きません。間違ったものが入っている場合は左側の列に×マークが表示されたりしますので、よく確認してください。

１．アラートポップアップを出してみよう

まずJSEditを起動すると初期値で不要な文字（赤枠内と黄色枠内）が出現してしまうので、この中身を消してください。

※カッコ内の文字を消すときはカッコを消さないように気を付けてください。

次に紫の枠の{カッコの右から改行し、４行目と５行目の間から書き始めます。

そうすると・・・下記の画面になりましたか？

５行目にalert(‘hello‘);と入れてください。

※「hello」の部分は自分の表示したい文字でOKです。好きな文字を入れてください♪

これを入力したら下にある「保存」ボタンを押してください。

では、別タブで開いているアプリに戻って画面を更新してみてください。

下記のようなアラートがでましたか？

一覧画面にした時だけこのポップアップアラートが出るようになります。

２．文字の色を変えよう

では次に文字の色を変えてみましょう。

先程のJSEdit画面で５行目alert(‘hello‘);を消して下記の青文字のとおりに入力してください。

(function() {

“use strict”;

kintone.events.on(“app.record.index.show”, function(e) {

　　　　var name = kintone.app.getFieldElements(‘名前‘);

　　　　for(var i = 0; i < e.records.length; i++) {

　　　　　var record = e.records[i];

　　　　　if(record[‘名前‘][‘value’] === ‘遠藤‘) {

　　　　　　name[i].style.color = ‘red‘;

　　　　　}

　　　　}

});

})();

◆varの後ろの「name」という部分は何でも良いです。何か文字を入れてください。

◆ピンクの文字の「名前」という部分はアプリのフィールドコードを入れます。

◆赤文字「遠藤」の部分は変更したい文字を入力してください。

◆赤文字「red」の部分は他の色に変更もできます。

＊blue, green, pink, yellow, orange, violetなど好きな色に変更可能です♪

下記のように色が変わりました！

文字の色を変えるカスタマイズは様々な場面で応用可能です。

例えばタスクの締め切りがあって締め切りを過ぎたらそこの色が変わる、といったカスタマイズなどにも使えます。

３．文字の色を変えようpart.2

では先程のアプリに戻って「アプリの設定」からフォームに新しい項目を足してみましょう。

勉強会ではドロップダウンの「優先度」という項目を追加しました。

フィールド名：優先度

ドロップダウンの項目：高／低

を設定して、ここの色も変えてみます。

下記のように先程書いたコードにさらに命令（青字部分）を付け加えます。

(function() {

“use strict”;

kintone.events.on(“app.record.index.show”, function(e) {

var name = kintone.app.getFieldElements(‘名前’);

　　　　for(var i = 0; i < e.records.length; i++) {

　　　　var record = e.records[i];

　　　　if(record[‘名前’][‘value’] === ‘遠藤’) {

　　　　name[i].style.color = ‘red’;

　　　　}

　　　　}

});

kintone.events.on(“app.record.index.show”, function(e) {

var name = kintone.app.getFieldElements(‘優先度‘);

　　　　for(var i = 0; i < e.records.length; i++) {

　　　　var record = e.records[i];

　　　　if(record[‘優先度‘][‘value’] === ‘高‘) {

　　　　name[i].style.color = ‘blue‘;

　　　　}

　　　　}

});

})();

すると、こんな感じで色が変わりました♪

カスタマイズ・プラグイン関係の紹介

今回は背景の色の変更まではできなかったので、カスタマイズサンプルをご紹介します。

詳しくは下記をご覧ください。

■条件書式のカスタマイズサンプル

https://cybozudev.zendesk.com/hc/ja/articles/202341944

また、こちらのプラグインを導入すればJavascriptで難しいコードを書かなくても簡単に色を変えたりできます。

今回の勉強会ではアプリになかなか適用されない、コードの中に空白が入ってしまっていた等、時間もかかり反映までが結構難しく、大変でした。初心者の私は何が間違っていて反映されないのかわからないので何度も講師に見てもらいました＞＜

講師の結論は、

• ・カスタマイズはあまりやらない方がいい。
• ・汎用的なカスタマイズはプラグイン化されているから、プラグインを使う方が簡単で早い。
• ・最後どうしようもなくなったときだけカスタマイズをする。

でした。カスタマイズは大変なのでできるだけプラグインを使いましょう、ということですね。

レポートのまとめ・感想

今回はじめてカスタマイズに挑戦してみたのですが、結構大変でした。コードを一文字間違えたり、（）が全角になっていたり、空白があるだけで思うように動いてくれず苦戦しました。その分ちゃんと動いたときには「できたー！」と嬉しさがこみ上げてました（笑）

前述でご紹介したように実際に便利で無償のプラグインもいっぱいありますし、カスタマイズもコードを書いて紹介してくれているサイトもありますので、効率良く自身に最適な方法で選択するのが良いと思います。講師はプラグインをおすすめしていましたね。無償版プラグインでもできることがいっぱいあります。是非プラグインを活用してkintoneをもっと使いやすくしてみてくださいね♪

The post 【レポート】kintoneカスタマイズ入門（2017年5月10日開催） appeared first on kintone Australia.

->全文はこちら