Read Article

JavaScript始めました

JavaScript始めました

TGIF!まだまだ暑いですね、トッティです。

 

世間は夏休みですね!普段の慌ただしさが少し落ち着くこの時期、私はJavaScriptの開発を始めました。

冷やし中華的なね

 

ま、一から始めると大変なので、コピペでできるところはコピペで行い、完璧な理解は後からで良い、というスタンスです。

やりたいことは決まっているのですが、いかんせんJavaScriptを書いたことが無いので、慣れるために簡単なものからやっていきます。今回はサイボウズの開発者用コミュニティサイトdeveloper networkを覗くことにしました。

すると、

まさに求めてたコーナー
まさに求めてたコーナー

おお、こんなビギナー向けのコーナーがあるんですね。しかも弊社の落合が担当してるという。。(笑) 見てみると大分わかりやすいですね、私でも理解はできます。問題はコレをコピペしてどこまで使い回しができるか、です。使い回しができなくなったら、その時自分で考える、これで良いはずです。そうやって生きて来ましたし。

さて、早速ですが、「はじめよう」シリーズの第2回「レコード一覧画面にボタンを置いてみよう!」を実際にやってみたいと思います。上記のリンク先のページにあるものを一旦そのままコピペします。

[code language=”javascript”]
(function () {
"use strict";
kintone.events.on(‘app.record.index.show’, function (event) {
if (document.getElementById (‘my_index_button’) != null) {
return;
}

var myIndexButton = document.createElement(‘button’);
myIndexButton.id = ‘my_index_button’;
myIndexButton.innerHTML = ‘一覧のボタン’;

// ボタンクリック時の処理
myIndexButton.onclick = function() {
window.confirm(‘いま押しましたね?’);
}

kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
});
})();
[/code]

このJavaScriptがどの様に動作するかは下記gif動画をご覧ください。

クリックするとアラートが出る
クリックするとアラートが出る

このJavaScriptを編集して、オリジナルなものを作ります。下記の様に編集しました。

[code language=”javascript”]
(function () {
"use strict";
kintone.events.on(‘app.record.index.show’, function (event) {
if (document.getElementById (‘my_index_button’) != null) {
return;
}

var myIndexButton = document.createElement(‘button’);
myIndexButton.id = ‘my_index_button’;
myIndexButton.innerHTML = ‘何も起きないボタン’;

// ボタンクリック時の処理
myIndexButton.onclick = function() {
window.confirm(‘いま押しましたね’);
}
myIndexButton.onmouseover = function() {
window.confirm(‘押すんか?’);
}

kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
});
})();
[/code]

ポイントは10行目と16、17行目です。10行目はボタンの名称を変えました。「一覧のボタン」から「何も起きないボタン」へ。16、17行目はJavaScriptの動きを1つ加えました。16行目は”onmouseover”つまり「マウスオーバーしたら」というイベントを記述しました。17行目は「押すんか?」と確認するポップアップを意味します。どのように動くかは下記動画をご覧ください。

ボタンをクリックせずとも、マウスポインタが乗っただけでアラートがでる
ボタンをクリックせずとも、マウスポインタが乗っただけでアラートがでる

取り敢えず、100%コピペではなく、一部ではありますがオリジナルのJavaScriptを作成、実際の動作まで確認ができました。 目指している動作まではまだまだ遠いですが、一回目としては合格点を与えたいと思います。というよりも与えました。おつかれ様、自分。

次回以降、kintoneをJavaScriptでカスタマイズして、どんなことをやりたいかを明らかにしつつ、開発を進めたいと思います。

 

それではまた。

 

この記事を書いた人

トッティ
トッティ
トッティです。「開発者ではない。でも、いろいろkintoneを使い倒したい!」そんなあなた、奇遇ですね、僕もです。非開発者としての高みを目指しつつ、その道程を共有致します。

今日も張り切って行きましょう。
URL :
TRACKBACK URL :

COMMENTS & TRACKBACKS

  • Comments ( 0 )
  • Trackbacks ( 1 )

No commented yet.

  1. […] 前回は初めてということもあって、もの凄く簡単な「ボタン表示」だけをやってみました。ほとんどdeveloper networkからの丸パクリですが、一部自分で編集して、実際に動いた時には嬉しかったです。 […]

LEAVE A REPLY

*
*
* (公開されません)

Return Top