カテゴリー内の他の記事

kintone JavaScript API の「はじめの一歩」を踏み出そう

Index

はじめに

この記事では、これから kintone のカスタマイズを始める方に、kintone JavaScript API の「はじめの一歩」をお届けします。

kintone 開発者ライセンスを取得したら、まずは本記事の内容にチャレンジしてみましょう。

本記事に従って実際に手を動かすことで、アプリの作成からkintone カスタマイズを適用するまでの手順を学ぶことができます。

カスタマイズの内容

kintone JavaScript API を利用して、アプリのレコード作成時に、フィールドに「こんにちは、kintone!」を初期値として設定するカスタマイズを行います。

必要なもの

本記事では、次の環境が必要になります。

kintone

kintone 開発者ライセンスを取得済みの方は、すでに kintone を利用可能です。

開発者ライセンスを未取得の方は、kintone 開発者ライセンス(開発環境)のページから開発者ライセンスを申し込みましょう。

Webブラウザ

cybozu.com の推奨ブラウザを使用します。

テキストエディタ

Visual Studio Code、Sublime Text、Vim など、お好みのテキストエディタを用意します。

カスタマイズする

アプリを作成する

まずは kintone のアプリを作成しましょう。kintone のポータルから「+」ボタンもしくは「アプリを作成」をクリックします。

__________2021-04-01_9.18.51.png

 

「はじめから作成」をクリックして、新しくアプリを作成します。

__________2021-04-01_9.20.40.png

 

アプリのフォームを設定する画面が表示されるので、「文字列 (1行)」フィールドを配置しましょう。

__________2021-04-01_10.05.02.png

 

配置したフィールドの右上にある歯車のボタンをクリックして「設定」に進みます。

__________2021-04-01_9.44.04.png

 

設定画面でフィールドコードに「hello」と入力し、設定内容を保存します。フィールドコードは、後ほど記述する JavaScript 内で使用します。

__________2021-04-05_15.03.09.png

 

ここまで作業ができたら、アプリを公開しましょう。

__________2021-04-01_10.17.00.png

 

アプリのレコード一覧画面が表示されれば、アプリの作成は完了です。

__________2021-04-01_10.18.49.png

JavaScript でコードを記述する

アプリを作成することができたら、次はアプリをカスタマイズするためのコードを JavaScript で記述しましょう。

サンプルコードを用意したので、下記のコードをエディタにコピーし、文字コードを「UTF-8(BOM無し)」に設定してファイルを保存してください。

kintone に適用する

いよいよ作成したカスタマイズを kintone に適用していきます。歯車ボタンをクリックしてアプリの設定画面を開きましょう。

__________2021-04-01_9.38.09.png

 

「設定」タブから「JavaScript / CSSでカスタマイズ」へ進みます。

__________2021-04-01_9.38.25.png

 

今回はPC用のカスタマイズですので、「PC用のJavaScriptファイル」に先ほど保存したファイルをアップロードします。アップロードが完了したら「保存」をクリックしましょう。

__________2021-04-01_9.41.26.png

 

「アプリを更新」からアプリの設定を保存すれば、カスタマイズの適用は完了です!

__________2021-04-01_9.42.01.png

動作確認

アプリのレコード一覧画面から「+」ボタンをクリックし、レコード追加画面を表示してみます。

__________2021-04-01_11.11.41.png

 

「こんにちは、kintone!」がフィールドに初期値として入力されました!

__________2021-04-01_11.13.20.png

おわりに

kintone JavaScript API を利用すれば、kintone の見た目を変更したり、他のシステムと連携したりすることができます。

本記事の内容を終えたら、次は cybozu developer network のコンテンツで kintone カスタマイズの知識をさらに深めましょう!

kintone カスタマイズ チュートリアルでは、豊富なサンプルをもとに JavaScript の使い方から kintone API によるカスタマイズまで、幅広い知識を身につけることができます。

kintone API ドキュメントでは、kintone API の仕様を確認することができます。

また、kintone API によるさまざまなカスタマイズ事例を紹介した Tips もあります。

TIps はチュートリアルや API ドキュメントで深めた知識を前提とし、実務につながる気づきやノウハウを得られる応用的な内容となっています。

この記事は、2021年3月版 kintoneで確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。