kintone王子(承認待ち)がルックアップを便利にしてみた(jQuery UI, autocomplete)

ごきげんよう。仲宗根です。

今回はCybozu CDNでも提供されているjQuery UI をつかって便利なルックアップ機能を自作してみたいと思います。

今回使用するCDN

jQuery UI

https://jqueryui.com/

https://js.cybozu.com/jqueryui/1.12.0/jquery-ui.min.js

kintoneの「ルックアップ」 とは

kintone のルックアップ機能のイメージはこちらのような感じになります。

顧客マスタ等のkintoneアプリから、営業日報等のアプリが顧客の情報を取得することが出来ます。

auto_complete_demo

このアニメーションでは何やら細かい操作をしていますが、簡単に説明すると下記のような流れの操作をしています。

「ろうとアイコン」→「条件」→「フィールドとその値の選択」

この操作は何がしたいかというと例えば顧客マスタにレコードがたくさんありすぎる場合、この操作で必要なレコードを見つけ出すことが出来ます。

ただ、このアプリを作った人や、kintoneアプリにとても詳しい人ならこの機能を難なく使いこなせるとおもいますが、たまにしかアプリを使わない人たちからは次のような声が聞こえてきます。

「そんな機能あるの知らなかったよ!アイコンの場所分かりにくい!」

「なんか微妙。。もっと使いやすくして。。」

もっとリアルな声だと、

「絞込できるのは良いけど、顧客マスタの項目がおおすぎて、必要な項目を選ぶのが大変。。」

といったような状況があるかと思います。。

 

jQuery UI を使った自作ルックアップ

 

そこで!  今回はjQuery UIをつかってルックアップ機能と同様にマスタから情報を取得する機能+αで入力・絞込をもっと便利にしてみました!

実際の動作はこちらです。

auto_complete_demo3

input要素に入力されたキーワードからクエリを作成してマスタからデータを取得してくるものです。
標準フィールドのルックアップとやってることはほぼ同じですが、こちらの自作ルックアップでは下記のメリットがあるかと思います。

  •  入力操作がシンプル
  • リアルタイムでマスタの検索結果が候補として表示される
  • 絞込の切換が少ない操作で変更できる

このようなメリットで先ほどのクレームに対して次のように対応出来ます。

「そんな機能あるの知らなかったよ!アイコンの場所分かりにくい!」
「アイコンを探す必要はありません! 検索するキーワードを入力すれば候補が自動的に出てきますよ!」

「なんか微妙。。もっと使いやすくして。。」
「リアルタイムに候補が出てくるので、かっこよくて使いやすいでしょ!?」

「絞込できるのは良いけど、顧客マスタの項目がおおすぎて、必要な項目を選ぶのが大変。。」
「よく使う項目を教えて頂ければ見た目も操作もシンプルにカスタマイズ出来ますよ!!」

完璧です。

 

カスタマイズJavaScript

 

すこし行数がおおいですが、今回のカスタマイズに使用したJavaScriptもこちらに載せておきます。
ポイントとしては

  •  jQuery UI ウィジェットのautocompleteを使用
  •  スペースフィールドにinput要素を追加しそこにautocompleteを適用
  • datalistを入力が変わる毎に顧客マスタの検索結果で更新
  • マスタへのクエリをドロップダウンの項目に応じて切替えている

になるかと思います。


(function (){
  var MASTER_ID = 1471;

  kintone.events.on(["app.record.create.show","app.record.edit.show"], function(event){

    // オートコンプリート・インクリメンタルサーチが実装されているinput要素を作成します。
    createAutoCompleteForm(event, "space_field", "訪問先", MASTER_ID, "会社名");

    return event;
  });

  kintone.events.on(["app.record.detail.show"], function(event){

    kintone.app.record.getSpaceElement("space_field").parentNode.style.display = "none";

    return event;
  });

  function createAutoCompleteForm(event, space_id, field_code, master_id, serch_key){

    var record = event.record;
    var element = kintone.app.record.getSpaceElement(space_id);
    var input = document.createElement("input");// kintoneの標準フィールドの代わりに使用するinput要素

    input.value = record[field_code].value ? record[field_code].value : "";
    element.innerHTML = field_code + ": ";
    element.appendChild(input);

    kintone.app.record.setFieldShown(field_code, false);


    $(input).on("keyup focusout", function(e) {

      var datalist = [];//input要素の下に表示する補完された候補(初期値は空)
      var query = "";
      var rec = kintone.app.record.get();

      if(input.value){
        // マスタへのクエリをドロップダウンの項目に応じて切替えている
        query = serch_key + " like \"" + input.value + "\" and " + "顧客ランク in \(\"" + rec.record.顧客ランク.value + "\"\)";
      }

      if(query){

        kintone.api("/k/v1/records", "GET", {app:master_id, query: query}, function(resp){

          // datalistを入力が変わる毎に顧客マスタの検索結果で更新
          for(var i in resp.records){
            datalist.push(resp.records[i][serch_key].value);
          }

          // jquery UI ライブラリを使用してオートコンプリート機能を使用する。
          $(input).autocomplete(
            {
              source : function(request, response) {
                response(datalist);
              },
              autoFocus: false,
              delay: 800,
              minLength: 0
            }
          );

        });

      }


      rec.record[field_code].value = input.value;
      kintone.app.record.set(rec);

    });
  }
})();

以上、今回はルックアップをjQuery UI の autocompleteでカスタマイズをご紹介させていただきました!
※サンプルプログラムは、その動作を保証するものではありません

[AWS] ルートアカウントにMFA(Multi-Factor Authentication)設定をする。

aws-logo-640

こんにちは、与儀です。

過去の記事、[AWS]マネジメントコンソールログインアカウントに MFA(Multi-Factor Authentication)を設定する。(IAM編) で、IAMアカウントの MFA 設定について説明しましたが、今回はルートアカウントに対する MFA 設定の手順を(少し冗長かもしれませんが)説明したいと思います。

ルートアカウントは通常利用はしないことがセキュア的にも推奨されておりますので、ルートアカウントを MFA 設定したら、IAM ユーザでログインするようにしましょう。

Continue reading

kintone王子(仮)がDataTablesを使ってみた

はじめまして。レキテク初投稿の仲宗根(肩書未定)です。

これから定期的にCybozu CDNで公開されているものを

kintone アプリで使ってみたレポートを書いていきたいと思います。

 

今回はDataTablesというjqueryのライブラリを使用してみたいと思います。

DataTablesが何かについてはこちらが分かりやすかったです。

簡単に言うと、HTMLのtableに対して簡単にソート・ページングなどの便利な機能を追加できるものです。

 

準備

 

kintoneアプリ

 

table_customize

 

テーブルを適当に作ってください。
(テーブルを識別するためのフィールドコードはとりあえず「Table」にします。)

 

 

アプリに登録するJava Script/CSS

 

JavaScript

https://js.cybozu.com/jquery/2.2.0/jquery.min.js (jqueryを読み込む必要があります。)
https://js.cybozu.com/datatables/v1.10.12/js/jquery.dataTables.min.js (今回つかうライブラリ)

table_customize.js (自分で書きましょう)

CSS

https://js.cybozu.com/datatables/v1.10.12/css/jquery.dataTables.min.css

 

 

table_customize.jsは自分で書く必要があります。

ほんの少しだけなのでコチラに載せておきます。


(function(){
  kintone.events.on(["app.record.detail.show"], function(event){

    // レコード詳細画面でテーブルが表示されるまでちょっと待つ
    setTimeout(function(){
      $(kintone.app.record.getFieldElement("Table")).dataTable();
    },2000)

  return event;

  });
})();

kintoneではどうもレコード詳細画面表示イベント(“app.record.detail.show”)の後に、少し時間を置いてテーブルが表示されるようでした。

そのため、ちょっとかっこ悪いですがDataTablesを適用する際にはsetTimeoutで少し待ち時間を入れています。

「テーブルが表示された後のイベント」等のkintone Javascript APIが公開されるともう少し綺麗にかけるかもしれません。

 

こんな感じ

 

table_customize

DataTableのCSS( https://js.cybozu.com/datatables/v1.10.12/css/jquery.dataTables.min.css )が適用されているので、レコードの詳細画面でいつものテーブルとは少しスタイルが変わって表示されています。

 

ソート機能

 

table_customize

ヘッダをクリックするとその列の降順、昇順の切換ができます。

実際のテーブルフィールドの並びが変更されることはありませんが、行数が多いものなどを表示するときに見やすくなっていいかと思います。

 

キーワード検索

table_customize

キーワード検索もインクリメンタルサーチで気持よくできます。

 

 

感想

このライブラリでは簡単にkintoneのテーブルを多機能にカスタマイズ出来るみたいでした。

kintoneのテーブルでは中の行を優先順位やキーワードなどで並び替え・絞込はできないため

このライブラリは他にも活用シーンがありそうですね。

 

以上、簡単でしたが今回は「DataTables」のCDNの紹介でした。

今後もCDNを使ってみた記事をどんどん書いていきたいと思いますのでよろしくお願いします!

 

[AWS] JAWS-UG沖縄勉強会 「真夏の熱すぎるサーバレス祭り!」が開催されました。

こんにちは、与儀です。

先日開催された、JAWS-UG沖縄 真夏の熱すぎるサーバレス祭り!に参加してきましたので、その模様を写真とスライド資料で簡単にレポートします。

今回のテーマである「サーバレス」を耳にすることも多くなってきたは思いますが、ついにその波が沖縄までやってきました。参加者も30名以上と注目度の高さが伺えました。
弊社でもサーバレスの導入事例は出てきていますが、まだまだこれから、という部分で思考錯誤している部分が多いです。今後サーバレスの流れは確実に拡がっていくと私は考えています。まずはどしどし使ってみることが重要ですね。なお、弊社からも開発者の鈴木と情シス担当の山城の2名が登壇させていただきました。

Continue reading

[AWS] ルートアカウントでしかできないことをまとめ(中)てみた。

こんにちは、与儀です。

突然ですが、AWSのルートアカウントとIAMユーザはご存知でしょうか?

ざっくり説明すると、ルートアカウントは、AWSアカウント作成時に使うアカウントで、ログイン時にメールアドレスとパスワード(と設定されていれば、多要素認証も)を使ってログインするアカウントです。IAMユーザは、ログイン時に専用のURLから、IAMユーザ名とパスワード(と設定されていれば、多要素認証も)を使ってログインするアカウントのことです。(ざっくりすぎ。)

ルートアカウントの認証情報と IAM ユーザーの認証情報

また、ルートアカウントの通常利用は禁止することをセキュリティ的に推奨されています。
というのも、ルートアカウントは権限の制御ができず、なんでもできてしまう権限の為、
万が一悪意のあるユーザにアカウント情報が漏洩してしまった場合は、危険です。

ということで、通常利用・運用時は権限が制限されたIAMユーザを利用することが推奨されており、
そうしている方も多いと思いますが、ルートアカウントでしかできない操作、というのがあり、
しばしばルートアカウントでログインしなおすことがありますので、
こちらで簡単にまとめ(中)てみます。

Continue reading

通りすがりのkintoneおじさんシリーズ第4弾「kintoneおじさん(注文管理システム)作るってよ。」

通りすがりのkintoneおじさんシリーズ
第4弾「kintoneおじさん本気出すってよ。」

こんにちわ、通りすがりのkintoneおじさんです。
おじさんシリーズも第4弾となりますが、既にネタ切れです。
ネタ探しも面倒になっていた今日この頃でしたが、
とあることがきっかけで、一つシステム作っちゃおうって事になりました、
そのシステム構築の過程をおじさんシリーズで掲載していきますので、
よろしかったらお付き合いお願いします。

Continue reading

通りすがりのkintoneおじさんシリーズ第3弾「何ということでしょうぅ。。。銀行管理アプリ出来ちゃった」

通りすがりのkintoneおじさんシリーズ
第3弾「何ということでしょうぅ。。。銀行管理アプリ出来ちゃった」

こんにちわ、通りすがりのkintoneおじさんです。
感の良い方はお気づきかと思いますが、シリーズ第2弾のパクリネタです。
違う!シリーズ第2弾の流用ネタです。
少しでも銀行入力が楽ちんになり、入力作業を行う方が幸せになることを願います。

Continue reading

[Microsoft Bot Framework] LUISに日本語を解析させる

スクリーンショット 2016-06-15 11.20.28

概要

MicrosoftのLUISは自然言語を解析してくれるサービスですが、現状 英語/フランス語/イタリア語/スペイン語/中国語 にしか対応していないという問題があります。

【参考記事】
『Build2016 : LUIS による自然言語入力解析』

しかし、Bot Connectorを通すことでその自動翻訳機能を利用することができ、結果的に「自然な日本語で受け答えができるボット」を開発することができます。

今回は「日付を入力したらその曜日を答える」ボットを作ってみます。

Continue reading

Macで開発したボットをAzureで運用する

スクリーンショット 2016-06-14 19.59.17

概要

Microsoft Bot Frameworkを使って作成したボットをMicrosoft Azureで公開する方法については以下の記事が参考になります。

Build2016 : Microsoft Bot Framework を使った Bot アプリ作成

しかし、この記事ではVisual Studio2015を利用しているため、Macで開発したボットをAzureに上げるためにはいくつか気にすべき点と手順があります。
この記事ではそれを紹介します。

Continue reading

通りすがりのkintoneおじさんシリーズ第2弾「何ということでしょうぅ。。。住所管理アプリ出来ちゃった」

バナー

通りすがりのkintoneおじさんシリーズ
第2弾「何ということでしょうぅ。。。住所管理アプリ出来ちゃった」

こんにちわ、通りすがりのkintoneおじさんです。
今回は住所入力の煩わしさを解消するネタです、
少しでも住所入力が楽になり、入力作業を行う方が幸せになることを願います

Continue reading