NEWS

[kintone]初めてのJavaScriptカスタマイズ〜準備編〜

2023.1.30
YamaguchiYoshiki

kintoneは標準機能のみでも利便性の高いツールですが、JavaScriptカスタマイズを用いることでさらに便利になります。今回の記事では、JavaScriptカスタマイズを行う上で必要な開発環境の準備、JSEdit for kintoneの導入について紹介します。これからJavaScriptカスタマイズを始めようと思っている方はぜひ参考にしてみてください!

①kintoneの開発環境を準備する

JavaScriptカスタマイズを行う上で開発環境は必須です。開発環境で、カスタマイズが正常に作動しているのかを確認せずに本番環境に適用すると、予期しないトラブルの原因になります。開発環境を用意することで、自分が書いたコードの動きを簡単に確かめることができます。では、開発環境を準備していきましょう。

まずは開発者ライセンスを申請しましょう。以下のページから開発者ライセンスを申し込むことができます。

kintone開発者ライセンス申し込みフォーム

利用規約を確認し、同意の上、氏名を入力して開発者ライセンスを申し込みます。申し込みから数分後、開発環境へのURL・ログイン名・パスワードの記載されたメールが届きます。

URLにアクセスし、メールに記載されたログイン名とパスワードでログインしましょう。

そして、赤枠で囲ったボタンをクリックすると、次のような画面(ポータル画面)に遷移します。

ポータル画面に遷移できたところで次の作業に移りましょう。

②JSEdit for kintone の導入

kintoneのJavaScriptカスタマイズでは、作成したファイルを逐一kintoneにアップロードする必要があります。しかし、JSEdit for kintoneというプラグインを導入することで、kintone上でJavaScriptの編集や更新を行うことができるようになり、逐一アップロードする手間を省くことができます。

※「プラグイン」をまだ知らないという方は、以下の記事でプラグインについて説明しております。合わせてご覧ください。

[全240種類以上]kintone(キントーン)の「プラグイン」とは?種類別に徹底解剖!

[2023年最新版]kintoneで使える最強無料プラグイン3選!

では、JSEdit for kintoneを導入する方法を説明します。まず、こちらのページにアクセスしてサンプルプラグインをダウンロードしてください。

ダウンロードが完了したら、ポータル画面から、システム管理→プラグインを選択します。

プラグインの画面に遷移できたら、左上の「読み込む」より、先ほどダウンロードしたzipファイルを読み込みます。(ダウンロードの際に自動的に解凍されている場合があるので、その際はzip形式に戻してください。)

これで読み込むことができました!

③アプリの作成・アプリへのJSEdit for kintoneの適用

では、次にアプリの作成方法を説明します。先ほどの画面の左上にある家のアイコンをクリックして、ポータル画面まで戻ります。

アプリの右隣にある+ボタンをクリックすることで新規アプリを作成することができます。

今回は「はじめから作成」を選択しておきましょう。

アプリを作成すると次のような画面が表示されます。

アプリの作成は、基本的にはドラッグ&ドロップで直感的に行うことができます。こちらの記事で、アプリ作成事例を紹介しておりますので、深く知りたい方は参考にしてみてください。

先ほどの画面の「設定」タブをクリックすると、以下の画面が表示されます。その中から「プラグイン」を選択します。

すると、以下の画面が表示されるので、左上の「プラグインの追加」をクリックしましょう。

これで、アプリへJSEdit for kintoneを適用させることができました!

上記画面で、JSEdit for kintoneの歯車アイコンをクリックすることにより、JavaScriptファイル作成画面に遷移することができます。

上記画面で作成し、保存したファイルの一覧はアプリ「設定」タブの「JavaScript/CSSでカスタマイズ」から見ることができます。また、ファイル削除もこの一覧から行うことができます。

まとめ

今回はJavaScriptカスタマイズを行うための開発環境の準備について紹介しました。特に初心者の方は、開発環境を整えることで、実際に手を動かしてJavaScriptカスタマイズの挙動を確認することができます。様々なカスタマイズに挑戦してみてください!

無料相談はこちら
TwitterFacebook

NEWS