（カテゴリー：jQuery）の記事

最近、職場でキントーンの画面デザインや操作性を上げて欲しいとの要望を数多く頂く。サイボウズ社の提供するSaaS型サービスのキントーンは予め用意されている機能が豊富で強力なDXツールであるものの、確かにデザインは短調でどこか味気ない。

1. キントーンのカスタマイズを支えるJavascript

一方で、たびたびこのブログでも取り上げているとおり、キントーンには JavaScript によるカスタマイズが可能になる機能が標準で実装されている。JavaScript と言えば、Web黎明期はFLASH技術に追いやられ、日の目を浴びない時期はあったものの、00年代中頃から、GoogleによるAjax（JavaScript + XML）技術の採用を皮切りに、jQueryといった優れたライブラリ登場やV8エンジンの登場で見事に復権してきた経緯がある。特にjQueryによるDOM操作は、製作者がこれを駆使することでWebに多様なアニメーションやエフェクトによるリッチな表現をもたらし、現在の大Web時代に至る幕開けを築くのに大いに貢献したといっても過言ではないだろう。

それから、はや時は10数年経ち、JavaScriptはサーバ上で動作する「node.js」や「React.js・Vue.js・Angular.js」といったフレームワークの登場でもはやWeb技術の中心位置へと上り詰めていく。我らは食い扶持を求めて新しいものの登場に敏感に反応し、ただただまっすぐに追いついていくだけだが、jQueryはもはやレガシーな技術となって最近では勉強する者も少ないと聞く。（俺困惑。しかし、Webフロントエンドの進化早すぎ。。）

2. jQueryでキントーンの見た目を無限にカスタマイズ

前置きが長くなったが、話をキントーンに戻す。個人的所感では、キントーン上での話であれば、jQueryのDOM操作は、見た目や操作性向上に極めて有効だ。もちろん、複雑になりがちなjQueryの欠点を補うべく登場したのがReactやVueであるのだが、これらを使うと有効なのはHTMLの変更に一定以上の自由が認められている場合で、キントーンにはあまりあてはまらない。HTML変更に自由がなく、部分的なデザイン修正をいくつか繰り返すのみであれば、jQueryの方が小回りが効いて使い易い。（い、異論は認めないから。）

下の動画は、jQueryによるDOM操作を駆使してキントーンの見た目・操作性を、ユーザ要望に合わせて向上させた例。

3. カスタマイズはチームで取り組もう

jQueryを駆使するにせよ、このようなカスタマイズを一人で行うのは膨大な作業量で、専門分野毎に分業を可能にするチームの存在は欠かせない。ここで少しメンバー紹介を。

まず、一人目は、北村彩夏さん。現在、同部署でキントーンカスタマイズ画面のデザインを担当し、HTML・CSS素材のコーディングも行っている。彼女は、当初キントーン運用のサポートをして頂いていたが、途中一念発起して経験ゼロからWebデザインを学習。上の動画の素材も彼女が作成したものである。現在はJavaScriptまで領域を広げて、Webフロントエンド全般を習得しようと挑む頼もしい存在だ。もちろんこの世界に誘ったのは俺で、何が言いたいかというと、どうだ凄いだろ！、と。笑

続いて紹介するのは、やはり同部署で相棒の辻村幸輝さん。当初は、利用者との間に入ってプロジェクトマネージャー的役割を担ってもらっていたが、彼もキントーンの無限の可能性に導かれた一人で、途中一念発起し、キントーンのJavaScriptによるカスタマイズに取り組んでいる。現在は、キントーンカスタマイズの伝道者的な立場になっていたりもして、彼に導かれた社内の人間は実に多い。もちろん彼もWeb製作などの実務経験はこれまでゼロで、誘ったのは俺。（どうだ！すご・・いや何でもないす。）

このように、当初は何でも一人でやって疲弊していたが、彼らの成長のお陰で、本来得意とするサーバーサイドの開発や新規案件に集中できるようになった。何より、チームで取り組むから、課題解決のスピードも早く、案件成就のの喜びも共有して楽しいのだ。とりわけ、現代は実際に手の動かせる高度技術者が世の中全体で不足していて採用が極めて困難な時代、ゼロから人材を育てるのも一つの計。もし、かつての当方のように一人で開発取り組んでいる方がいたら、周りを見てシステムやデザインに素養高そうな近隣の仲間を勧誘するところから是非お勧めしたいと思う。

web ページからサーバにリクエスト情報を送る際に HTTP GET / POSTメソッドを使う機会は非常に多いが、通常この処理を行うと、サーバサイドで情報を受け取ってレスポンスを返すためのページを読み込むことを余儀なくされる。

一方、ページのリロードを伴わずに非同期でリクエストだけ送りたい場面も生じるが、この場合は、JQuery の ajaxメソッドでを使用すれば割と容易に実装ができてしまう。というわけで、さっそく手順を備忘録として記したい。

1. jQuery を読み込む

まずは基本中の基本から・・・。実装したいページ内で、<script> タグを使いオプションの src 属性で読みこませる JQuery の URI を指定する。

URI は予め本家から入手して自サーバ内に設置しておいた場所を指定する方法や、google のCDN（content delivery network : 配信用に最適化されたネットワーク）など外部にホストされている JQuery のアドレスを指定する方法がある。

'保管した場所から読み込み
<script src="/保管場所/jquery-ヴァージョン.min.js"></script>

'google の CDN から読み込み
<script src="//ajax.googleapis.com/ajax/libs/jquery/ヴァージョン/jquery.min.js"></script>"

ヴァージョンは1.x系、2.x系、3.x系があり、それぞれサポートするブラウザの範囲が異なる。2.x系以降はIE9以降しかサポートしていないため、サービス対象にIE8以下が含まれている場合には、1.x系を選択する。

なお、CDN からの読み込みを選んだ場合、サービス障害等で読み込むことができない不足の事態に備え、代わりに自サーバに配置した jQuery を読み込むように以下のように記述しておくと良い。

<script src="//ajax.googleapis.com/ajax/libs/jquery/ヴァージョン/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/保管場所/jquery-ヴァージョン.min.js"><\/script>');</script>

また、読み込む場所は、ページの読み込みを優先したい場合は、冒頭の<head>~</head>タグ内ではなく、<body>〜</body>タグの最後に記述するのが今流だ。

2. POST フォームの通常 submit を無効化

続いて form タグで普通にPOST のフォームを作り、その後通常の同期通信型 submit が行えないようにする。submit 無効化の方法については、javascript のsubmit イベントで、'return false'を使ったり、'preventDefault()'を使う方法があるが、当方環境では、これらの方法をとると、連続してsubmit した場合に2回目で無効化が解除されてしまっていて通常の submit によるリロードが発生してしまう事態に何度か直面したため、別の方法をとることにしている。例えば、form タグの action属性に 'javascript:void(0);' を指定して、戻り値をundefined(未定義)として submit を無効化する方法など。以下はその例。

<form action="javascript:void(0);">
　・
　・
　・
</form>

あるいは submit ボタンの代わりに、aタグによる擬似ボタンを作るなど。但しこの場合も、'href' に 'javascript:void(0);' を指定してaタグ本来の動きを止める必要がある。

3. Jquery で onClick イベントを作成

通常の submit を無効化したら、いよいよ JQuery の ajaxメソッドで非同期通信の処理を onClick イベントで書いていく。テンプレート的な書き方は以下のとおり。

<form id="test" action="javascript:void(0);">
　・
　・
　・
<input type="submit" />
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
  $('input#test').click(function () {

    // 一括してフォームデータを取得
    var formData = $('#test').serialize();

    console.log(formData);
      $.ajax({
          url: "test.php",  //POST送信を行うファイル名を指定
          type: "POST",
          data: formData  //POST送信するデータを指定（{ 'hoge': 'hoge' }のように連想配列で直接書いてもOK）
      });
  });
});
</script>

これでページのリロードを挟まずにPOST送信が非同期で行える。

4. POST 成功した後に、POSTした内容でページの一部を更新

3. で使用したajaxに「done」メソッドを付けると、POST送信が成功した場合に新たな処理を実行できる。また、「done」メソッドには、指定した引数にPOSTから渡されたデータを格納できる。

この「success」オプション内で、 '$(object).text()' や '$(object).text()', '$(object).load()' などの非同期型の JQueryメソッドを記述することで、POST した内容に応じながら一部ページの更新をリロードなしに実行できる。

以下は、$(object).text() を使用した例。

<form id="test" action="javascript:void(0);">
　・
　・
　・
<input id="dummy" type="text" name="dummy" /> 
<input id="test" type="submit" />
</form>

<div id="sample">何か記入してください</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
  $('input#test').click(function () {

    // 一括してフォームデータを取得
    var formData = $('#test').serialize();

    console.log(formData);
      $.ajax({
          url: "test.php",  //POST送信を行うファイル名を指定
          type: "POST",
          data: formData  //POST送信するデータを指定（{ 'hoge': 'hoge' }のように連想配列で直接書いてもOK）
      }).done(function(data) {
          $('div#sample').text(data2);
      });
  });
});
</script>

蛇足ながら、実際に動かしてみる場合の参考に 'test.php' の例も。

<?php
$dummy = $_POST['dummy'];
if (is_null($dummy)){
  echo "何か記入してください";
}elseif (trim($dummy)==""){
  echo "空白です";
}else {
  echo "あなたは、\"" . $dummy . "\"と書きました";
}
?>

俺の開発大作戦

Linux, Mac, Windows10 で迷走する1開発を進めていく備忘録5

【kintone カスタマイズ Tips】デザインや操作性を無限にカスタマイズ

1. キントーンのカスタマイズを支えるJavascript

2. jQueryでキントーンの見た目を無限にカスタマイズ

3. カスタマイズはチームで取り組もう

jQuery の ajax で POST を非同期で送る

1. jQuery を読み込む

2. POST フォームの通常 submit を無効化

3. Jquery で onClick イベントを作成

4. POST 成功した後に、POSTした内容でページの一部を更新

1. キントーンのカスタマイズを支えるJavascript

2. jQueryでキントーンの見た目を無限にカスタマイズ

3. カスタマイズはチームで取り組もう

1. jQuery を読み込む

2. POST フォーム の通常 submit を無効化

3. Jquery で onClick イベントを作成

4. POST 成功した後に、POSTした内容でページの一部を更新

2. POST フォームの通常 submit を無効化