はじめにkintoneではJavaScriptプログラムを利用することで、kintoneの各機能の動作や画面をカスタマイズすることができます。このチュートリアルではまず最初に、helloという文字を画面に表示するという簡単なカスタマイズを例に、kintoneアプリにカスタマイズを設定する手順をご紹介します。APIを利用したカスタマイズ例をご紹介します。このチュートリアルの学習内容は以下の通りです。APIを使用したレコード操作-レコード一覧表示時にレコード取得APIを使用し案件担当者が自分自身(例:山田太郎)の顧客名をメッセージで表示する環境の準備kintoneのカスタマイズを行うにあたり下記の環境が必要になります。kintonekintoneをまだお持ちでいない方は「cybozu.com」のサービスをご購入いただくか、5ユーザーで1年間無償のkintone開発者ライセンスを申し込むことができます。※申し込みにはメンバー登録が必要です。Webブラウザブラウザはこちらのサイトに記載されているデスクトップ用のブラウザをご用意下さい。エディタJavaScriptのコーディングを行うためのエディタです。カスタマイズアプリの作成まず、カスタマイズ対象となるアプリをkintoneアプリストアから取得します。手順1.kintoneにログインします。手順2.kintoneのトップページで[アプリを作成]をクリックします。手順3.「アプリストアから選ぶ」を選択します。手順4.kintoneアプリストアに遷移します。kintoneアプリストアには、さまざまなアプリが用意されていますが、このチュートリアルでは「案件管理」アプリを使用しますので「案件管理」アプリの[このアプリを追加]をクリックします。手順5.確認ダイアログが表示されますので[追加]をクリックします。実際にJavaScriptファイルを実装して動きを確認します。手順1.JavaScriptファイルを用意します。ファイル名は「sample_customize.js」とし、次のように編集します。※文字コードは「utf-8」にしてください。手順2.「案件管理」アプリの一覧画面右側の歯車アイコンをクリックします。CSSでカスタマイズ]をクリックします。手順4.今回はPC用のカスタマイズを実施しますので、「PC用のJavaScriptファイル」の[アップロードして追加]をクリックし、先ほど作成したJavaScriptファイル(sample_customize.js)を選択します。選択後[保存]ボタンをクリックし、管理画面に戻ります。手順5.[アプリを更新]ボタンをクリックすると確認用ダイアログが表示されますので、[OK]ボタンをクリックします。手順6.一覧画面に遷移し、メッセージが表示されていれば成功です。アプリのウェブ画面をカスタマイズするためのAPIを提供しています。このAPIを利用することで、多様なユーザーニーズを表現することができます。使用中に発生する様々なイベントについて、ハンドラーを紐付けして実行することができます。今回は下記のイベント取得及び処理を実装します。レコード一覧イベントを取得し「確度」が"A"の「会社名」と「確度」を赤字に変更するレコード表示イベントを取得し「ユーザー数」が500人以上の顧客情報については「見込み時期」をメッセージで表示する<レコード一覧イベントを取得し「確度」が"A"の「会社名」と「確度」を赤字に変更する>手順1.先ほど実装した「sample_customize.js」をエディタで編集します。手順2.JavaScriptを実装します。※既に実装してあるファイルを削除してから実装してください。<レコード表示イベントを取得し「ユーザー数」が500人以上の顧客情報については「見込み時期」をメッセージで表示する>手順3.手順2で実装した「sample_customize.js」を再度編集します。先ほど記載したイベント処理の次の項目に処理を記載し、JavaScriptファイルを実装します。アプリのフォーム設計情報の取得やレコードの操作、スペースを操作することができます。今回は下記の実装をします。APIで使用した「sample_customize.js」をエディタで編集します。手順2.レコード一覧取得イベント内に下記のコードを追記します。コミュニティをご活用ください。手順3を応用しようとしてやっていますが、アラートが表示されません。何か足らないのでしょうか?よろしくお願いいたします。{こちらの部分どういう意味でしょうか。01:56「案件管理」アプリを使って、このページにある「レコード一覧イベントを取得し「確度」が"A"の「会社名」と「確度」を赤字に変更する」コードを実行しても、動作しません。alertやボタンを追加するコードは動くようです。ほかのコードでもフィールド値を取得するような処理が入ると動作しないようです。文字コードはUTF-8(BOMなし)になっています。何が原因なのでしょうか。05:19佐藤さん今アプリ追加して試してみました。私もあまり詳しくはないのですが、案件管理に手順通りjsを追加したらできました。何も編集していないのです。(コピペでOKでした。)解決にならないと思いますがご参考まで。Permalinkログインしてコメントを残してください。