JavaScript始めました

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

 

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

冷やし中華的なね

 

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

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

すると、

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

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

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

<br />(function () {<br /> &quot;use strict&quot;;<br /> kintone.events.on('app.record.index.show', function (event) {<br />  if (document.getElementById ('my_index_button') != null) {<br />return;<br />  }</p><p>  var myIndexButton = document.createElement('button');<br />  myIndexButton.id = 'my_index_button';<br />  myIndexButton.innerHTML = '一覧のボタン';</p><p>  // ボタンクリック時の処理<br />  myIndexButton.onclick = function() {<br />window.confirm('いま押しましたね?');<br />  }</p><p>  kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);<br /> });<br />})();<br />

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

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

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

<br />(function () {<br /> &quot;use strict&quot;;<br /> kintone.events.on('app.record.index.show', function (event) {<br />  if (document.getElementById ('my_index_button') != null) {<br />return;<br />  }</p><p>  var myIndexButton = document.createElement('button');<br />  myIndexButton.id = 'my_index_button';<br />  myIndexButton.innerHTML = '何も起きないボタン';</p><p>  // ボタンクリック時の処理<br />  myIndexButton.onclick = function() {<br />window.confirm('いま押しましたね');<br />  }<br />  myIndexButton.onmouseover = function() {<br />window.confirm('押すんか?');<br />  }</p><p>  kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);<br /> });<br />})();<br />

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

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

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

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

 

それではまた。

 

トヨクモのkintone連携サービスは30日間無料でお試しが可能です。自動で課金が開始されることはございませんので、「やっぱり必要ないな」と感じた時も、特に解約等のご連絡は不要です。以下のボタンよりお気軽にお試しくださいませ。

最新情報をチェックしよう!
>kintone連携サービスの定番【トヨクモ】

kintone連携サービスの定番【トヨクモ】

4000契約以上(2020年11月時点)、kintone利用ユーザーのうち、5社に1つは使われている定番のkintone連携サービス。全6製品とも30日間の無料お試しをご用意しております。お試しはこちらから。

CTR IMG