備忘ですが、

誰かの役に立てばいい

【kintone】初心者でもカンタン!JavaScript / CSSカスタマイズ:導入の仕方

kintoneをもう少し使いやすくしたい。

でも、ホームページを作ったこともなければJavaScriptCSSも分からない、まず何からやったらいいの?という超初心者がkintoneカスタマイズを始める時の3STEP。

開発環境を取得する

使用中の環境でJavaScriptのお試しや実験はできませんよね。

別途お試しアプリを作るのも良いですが、開発環境を取得するのをオススメします。

developer network へようこそ – cybozu developer network

のSTEP 3から開発者ライセンスの申し込みをします。

JSEdit for kintone(プラグイン)を入れる

kintone上でカスタムJSやCSSを編集できるプラグイン「JSEdit for kintone」を使ってみよう – cybozu developer network

コードを書くためのエディターは数あれど、kintone上で書けて文法チェックもしてくれるのはこのプラグインだけです。 

通常の方法だと自分で書いたコードをjsファイルとして保存して、アップロードして、動作確認して、手直しして、またアップロードして・・・という感じになり、げんなりします。

チュートリアルを読んでコピペしてみる

第2回 レコード一覧画面にボタンを置いてみよう! – cybozu developer network

まずここから。

なるべく時短な方法として、自分のやりたいことに近そうなコードを探してコピペして、実際にやってみるのが一番覚えられると思います。

初心者向けに良さそうなチュートリアルは、↓の「はじめようJavaScript」「はじめようkintone API」がありますが、頭から丁寧に読むのは時間の無駄です。

最初にさらっと斜め読みして、行き詰まった時にまた必要な部分だけ読みましょう。

はじめようJavaScript第1回 JavaScriptとは – cybozu developer network

第0回 kintone カスタマイズをはじめる前に知っておきたい6つのこと – cybozu developer network

常に頭に置いておくこと

1. JavaScriptには決まった書き方がある

2. JavaScriptには自分で名前をつけられる「変数」という箱がある

3. JavaScriptには使用するライブラリ独自の書き方もある

この英語の文字はいったい、作成者独自の変数なのか?JavaScriptで決められた命令文なのか?ライブラリ独自の命令文なのか?を考えながらコードを見ていくといいと思います。

※ライブラリはざっくり言うと複雑なコードがあらかじめ書かれたJavaScriptプログラムです。これを使用することで書くべきコードを大幅に削減でき、複雑な機能を実装できます。

海外サイトから使えるライブラリもありますが、公式サイトのアドレスを使うかCybozu CDNから利用するのがベターでしょう。

Cybozu CDN – cybozu developer network

 

初心者の覚え書きですがこちらもどうぞ

【kintone】初心者がjavascriptカスタマイズをするときの常備リンク - 備忘ですが、

【kintone】ページネーションを表示する - 備忘ですが、