リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript
（著者：kintone エバンジェリスト 村濱 一樹）
ここまでで基本的なJavaScriptの機能は学習してきました。ここからは徐々に実際にkintoneを使っていきたいと思います。
kintoneをJavaScriptでカスタマイズできることはご存知だと思いますが、実際にどんなことができるか、おさらいしながらサンプルコードを動かすところまでやりましょう。
kintone JavaScript カスタマイズとは
kintoneは標準機能でさまざまなことができますが、標準機能だけでは実現できない以下のようなことも、JavaScriptカスタマイズをするとで実現できるようになります。
- レコード一覧画面にボタンを設置し、合計値を出力
- 条件によって文字や背景の色やサイズを変更
- 計算フィールドでは実現できない複雑な計算
- などなど
JavaScriptが実行できるようになるということは、ボタンを設置したりそれを押したときの振る舞いを決めたり、データの計算処理をしたりなど、ブラウザ上でできることはほとんどできるようになるとのことです。
さらに、kintone APIと組み合わせることで、JavaScriptを使って任意のレコードを取得したり、更新したり削除したりということもできるようになります。
kintoneとJavaScriptカスタマイズのイメージ
kintone JavaScriptカスタマイズで必要なもの
ここからはkintone JavaScriptカスタマイズを挑戦するために必要なものを見てみましょう。
- kintoneを閲覧するためのブラウザ
- 普段お使いのブラウザで問題ありませんが、当シリーズではChromeで統一します。
- kintoneのアカウント
- ぜひ無料の開発者ライセンスをご利用ください。
開発者ライセンスの申請手順：
①事前に cybozu developer network のメンバー登録が必要です。
画面右上の「サインイン」ボタンよりご登録ください。
（メンバー登録がお済みの方は直接②のリンクからお申し込みください）
②こちらのページから開発者ライセンスをお申し込みください。
- ぜひ無料の開発者ライセンスをご利用ください。
- JavaScriptを書くためのエディタ
- 当シリーズではkintone上でJavaScriptを編集できるプラグイン「JSEdit」を利用します。（詳細は後述）
- そのほか、Sublime Text や Atom, 秀丸エディタ を使っても問題ありません。ただし、その場合は編集の際kintoneにJavaScriptファイルをアップロードする必要があります。
kintone JavaScriptカスタマイズをする方法
JavaScriptカスタマイズをするための方法を2つ紹介します。初学者の方はまずは1番のやり方で大丈夫です。
- JSEdit for kintoneを使う
JavaScriptをkintone上で編集でき、kintoneへのJavaScriptファイルのアップロードも自動で行ってくれる優れものです。
また、当シリーズではJSEditを利用します。使い方とプラグインインストール方法は下記の記事を参考にしてください。
kintone上でカスタムJSやCSSを編集できるプラグイン「JSEdit for kintone」を使ってみよう - 一般的なテキストエディタでJavaScriptファイルを編集し、kintoneにアップロードする
お好みのテキストエディタを使う場合は、手動でkintoneにJavaScriptファイルをアップロードする必要があります。下記を参考にしてください。
第1回 kintone javascript APIのイジりかた
サンプルコードを試す
サンプルコードを作成してkintone上で動作することを確認しましょう。
※JSEditの詳細については先述の kintone上でカスタムJSやCSSを編集できるプラグイン「JSEdit for kintone」を使ってみよう を確認ください。
- 新しいアプリを作成する。（※フィールドは設置なしで大丈夫です。）
- [設定] → [プラグイン] → [プラグインの追加] → JSEdit for kintone を追加する。
- 新規作成ボタンとクリックし、ファイル名を入力する。
- コードを書き、保存する。 (※初期値に表示されるコードは消していただいても大丈夫です。)
- レコード一覧画面に戻り、動作を確認する。
右クリックメニューから「検証」でDeveloper toolsを開きコンソールの表示を確認する。
無事に動作しましたでしょうか。わからないことがあれば当記事の下部にあるフォームからご質問ください。
次回はkintoneのデータをJavaScriptカスタマイズで扱う方法について学びます。
<< はじめようJavaScript第10回 JavaScriptの基本機能 関数を作る その2 | はじめようJavaScript第12回 kintone JavaScript カスタマイズでkintoneのデータを見てみる >>
プラグインの設定画面でコードを書いて保存すれば、アプリの設定画面で「フォームを保存」「アプリの公開」ボタンを押さないでも良いのですか？
眞様
お世話になっております。cybozu developer network運営チームです。
> プラグインの設定画面でコードを書いて保存すれば、アプリの設定画面で「フォームを保存」「アプリの公開」ボタンを押さないでも良いのですか？
既に公開済みで、コード以外の修正がない場合、フォームの保存やアプリの更新ボタンを押さなくても、大丈夫です。
コード修正後に、プラグインの設定画面の [保存] ボタンを教えていただけたら反映されます。
宜しくお願い致します。
JSEdit for kintoneで新規作成したファイル（.js)を消す方法はあるのでしょうか？
THUNDER 様
お世話になっております。cybozu developer network運営チームです。
プラグインの「JSEdit for kintone」の設定画面上からは、ファイルを削除する方法はございません。
ファイルを削除する場合は、
アプリの設定画面の「JavaScript / CSSでカスタマイズ」から対象のファイルを削除するようお願いします。
お世話になります。
開発者ライセンスを取得したのですが、サンプルコードを実行する環境はどちらにあるのでしょうか？
合志真衣様
お世話になっております。
開発者ライセンスをお申込みいただいた際、環境情報をお知らせするメールをお送りしておりますのでご確認いただけますでしょうか。
メールが届いていないということでしたら、再度お送りいたしますのでお知らせください。
よろしくお願いいたします。
このチュートリアルを読みながら、「開発者アカウント」を作り、メンバー登録してサインインしました。
JSEdit for kintone もダウンロードしました。
「サンプルコードを試す」１．アプリを作成する
までに到達するには、どのような手順が必要なのでしょう？
「30日無料お試し」でキントーンアカウントを別に作成するのですか？
齋藤 博 様
お世話になっております。cybozu developer network運営チームです。
すでに開発者アカウントをお申込頂いたようなので、そのまま開発者アカウントをご利用いただけます。
「アプリ作成する」に到達するまでの手順として、まずはkintone環境にログインしていただく必要があります。
開発者ライセンスをお申込みいただいた際に、下記件名のお知らせするメールをお送りしておりますので、
そちらに書かれた環境情報でログインをしていただき、こちらの手順に沿ってアプリを作成していただけますでしょうか。
件名：【重要】開発者ライセンスがご利用いただけます
お手数をおかけしてしまい大変恐縮ですが、ご確認のほどよろしくお願いいたします。
画面通りにJSEdit for kintoneを使用し、サンプルコードとして、’これはサンプルコードです’と入力するのですが
「サンプルコード」という文字が妙な反応をしているのか、一度「サンプル」という文字を打った後、どの文字を入力しても自動で「サンプル」が入力されてしまいます。
（例：「これはサンプルコード」と入力して確定。次に「で」を入力しようとdキーを押すと、勝手に「これはサンプルコード」が追加で入力されてしまい、エディタでは'これはサンプルコードこれはサンプルコードd'となります。
JSEdit for kintone以外ではこのような症状は起こっておらず、エディタ上を見てみると自動入力された文字に白い矢印のようなものが見えます。これは何かの設定が影響しているのでしょうか。
工藤 大輔 様
お世話になっております。cybozu developer network運営チームです。
こちらで確認したところ、再現できませんでした。
次はこちらの環境での動きです。
ただ、別現象ですが、日本語入力際の動きはおかしいことを確認しております。
そこでJSEdit for kintoneに使っているテキストエディターのライブラリーを更新し、JSEdit for kintoneをアップデートしております。
こちらの記事に反映でき次第、改めてご連絡させていただきます。
よろしくお願いいたします。
工藤 大輔 様
お世話になっております。cybozu developer network運営チームです。
本日、 JSEdit for kintone の記事 にアップデート情報を反映いたしました。
最新版は、記事内のリンクからダウンロードしていただけます。
以前コメントいただいた内容が本アップデートで解消されなければ、
一部のWindows機で既に確認されている現象となります。
サンプルプラグインのため、この現象についての改修予定はありません。
ご確認よろしくお願いいたします。
とても基本的なことですいません。
var li_ankennum = prompt('案件番号を入れてください', '');
var link_former = "https://hogehoge.cybozu.com/hogehoge/?view=5756693&q=f5756699 like ";
var link_latter = "%22#sort_0=f5755049&order_0=desc&size=20";
console.log('案件番号＝'+li_ankennum);
var link_url = link_former + li_ankennum + link_latter;
console.log('ＵＲＬ＝'+ link_url);
案件番号をpromptで入力して、それを、kintoneのＵＲＬの「検索クエリー？」のところに、差し込んで
番号入力→kintoneアプリ一覧で、検索した状態を一発で表示、としてみたいのですが
kintoneのＵＲＬの「＆」が、上記のように変数に入れた後出力すると、&になってしまいます。
この&後のＵＲＬだと、望みのkintone画面にはならず、クエリーが変ですといったエラーになってしまいます。
なにか、解決策はあるでしょうか？
みさわ 様
お世話になっております。cybozu developer network 運営でございます。
クエリの指定は、下記ページの「例2:絞り込み条件を指定したURLの例」のような形式である必要があります。
URLエンコードも必要です。
https://developer.cybozu.io/hc/ja/articles/202388664-URL%E5%86%85%E3%81%AE%E3%82%AF%E3%82%A8%E3%83%AA%E3%81%A7-%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E6%9D%A1%E4%BB%B6%E3%82%92%E6%8C%87%E5%AE%9A
また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。
よろしくお願い致します。
はじめてなので、環境自体が整っていない可能性もあります。
開発者ライセンスで入った環境で実施したところ、コンソールには
DevTools がソースマップの読み込みに失敗しました（https://js.cybozu.com/jquery/1.11.3/jquery.min.map のコンテンツを読み込めませんでした（HTTP エラー: ステータス コード 403、net::ERR_HTTP_RESPONSE_CODE_FAILURE））
と出ました。
解決しました。
違うページでコンソールが開いてました。
初歩的な質問で大変申し訳ありません。
５．レコード一覧画面に戻り、動作を確認する。
右クリックメニューから「検証」でDeveloper toolsを開きコンソールの表示を確認する。
とありますが、レコード一覧画面で、「右クリックメニューから「検証」でDeveloper toolsを開く」というオペレーションがわかりません。また、右クリックメニューがどこを指しているのかもわかりません。レコード一覧画面でDeveloper toolsを開く方法を教えてください。
しか様
お世話になっております。cybozu developer network 運営でございます。
「右クリックメニュー」＝「マウスの右クリック押下時に表示されるメニュー」を指しております。
下記ショートカットでも開くことはできますので、好みに応じて開いてみてください。
開発者ツールの使い方は下記にも軽く触れていますので参考にしてみてください。
動かない？そんな時はデバッグをしてみよう！入門編
また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。
よろしくお願い致します。