Zenn
😇

kintone カスタマイズビューに挑戦

2022/08/05に公開
CSS
HTML
jQuery
kintone
tech

kintoneの魅力の一つでもあるカスタマイズビュー。
JavaScripはもちろん、HTMLやCSSも書くことになるので気持ち的にはWebサイトを作るような感覚です。
正直デザインは学んだことなく壊滅的なレベルでCSSは特に、文法を知っている程度なので難しいと感じました💦
これももう半年以上前になりますが、挑戦してみたので復習も兼ねてアウトプットします。

やりたいこと

他のアプリのレコード情報を取得して、いい感じに表示したいだけです。

一覧画面の作成

アプリの設定画面で一覧のタブを開き、「レコード一覧の表示形式」を「カスタマイズ」にすると、HTMLを入力するところが表示されます。

そこに下記を入力します。

index.html
<div id="body">
   <div id="head">
     <h2 id="title">リンク集</h2>
   </div>
   <div id=item_body>
     <ul id="contents"></ul>
   </div>
</div>

あとはJavaScriptで要素を追加していきます。

myFunction.js
(function($) {
   "use strict";
   kintone.events.on("app.record.index.show", async(event)=> {
   　　/*カスタマイズビューの一覧でなければリターンする*/
       if(event.viewId !== {カスタマイズビューのviewId}) {
           return;
       }
       const body = {
           "app": {表示したいレコードのあるアプリID},
           "query": 'view in ("対象")',
           "feilds": ["タイトル","リンク","$id","サブタイトル","更新者"],
           "totalCount": true
       };
       let resp;
       try {
           resp = await kintone.api('/k/v1/records','GET',body);
       }catch(error){
           alert("レコード情報取得時にエラーが発生しました。");
	   return;
       }
       /*取得できたレコードが0件なら下記表示を行なう*/
       if(resp.totalCount === "0") {
           $("#contents").html("表示するレコードがありません。");
           return;
       }
       let html;
       for(const record of resp.records){
                  html = '<li class="list"><a class="link" href='+record.リンク.value+'><div class="item"><div>'+
                      '<span><b>'+record.タイトル.value+'</b><br><br>'+
                      '<span class="text">'+record.サブタイトル.value+'</span></span></div>'+
                      '<div class="info"><span>登録者：'+record.更新者.value.name+'</span></div>'+
                  '</div></a></li>'
           $("#contents").append(html);
       }
       return;
   });
})(jQuery);

解説

イベント

カスタマイズビューは一覧画面なので、イベントは「"app.record.index.show"」になります。

REST API

まずはリクエストする条件等の定義です。

const body = {
   "app": {表示したいレコードのあるアプリID},
   "query": 'view in ("対象")',
   "feilds": ["タイトル","リンク","$id","サブタイトル","更新者"],
   "sotalCount": true
};

リクエストボディは下記の通りです。

  • app:アプリID
  • query：レコードの一括取得(条件を指定して取得)の場合必須
  • feilds：省略可能ですが、欲しいフィールドが限定的だったので指定しました。
  • totalCount：指定した条件に当てはまるレコードの数の要否(true/false)

今回はフィールドコード「view」の値が「対象」になっているレコードを取得して表示したいのでこのようなクエリになっています。
クエリの書き方等は公式のドキュメントに詳しく書いてあります。

https://developer.cybozu.io/hc/ja/articles/202331474

次は実際にリクエストします。

let resp;
try {
   resp = await kintone.api('/k/v1/records','GET',body);
}catch(error){
   alert("レコード情報取得時にエラーが発生しました。");
   return;
}

念のためトライキャッチで囲みます。
取得に失敗したときは何が起きたかユーザーがわかるようにし、アラート出して処理終了。

REST APIは非同期処理で、取得した値を使ってガチャガチャやりたいので、「async/await」を使いレスポンスが返ってくるまでは次の処理に進まないようにしておきます。

この非同期処理は最初は本当に意味不明で、職場に質問できる人がいない環境なのでなかなか苦労した記憶があります。
youtubeで沢山の解説動画を見るのが一番わかりやすかったです。

要素の出力

普段DOM操作とか全然しないので大変苦手意識がありますが、調べながらやりました。
jQueryを使用しています。
リクエストに対して返ってきたレスポンスをループで処理していきます。

let html;
for(const record of resp.records){
  html = '<li class="list"><a class="link" href='+record.リンク.value+'><div class="item"><div>'+
      '<span><b>'+record.タイトル.value+'</b><br><br>'+
      '<span class="text">'+record.サブタイトル.value+'</span></span></div>'+
      '<div class="info"><span>登録者：'+record.更新者.value.name+'</span></div>'+
  '</div></a></li>'
   $("#contents").append(html);
}

ループ処理って手段が多くてどれを使えば良いのかよくわからないですが、一通り使っておきたくて今回は初めてのfor...ofを使いました。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of

配列向きのようですが、Json配列だから向いてると思っていいのでしょうか。
少々疑問は残りますがとりあえず普通に使えたので良しとしたいと思います。

処理の中身としては、イメージ的には下記のような要素をid="contents"の要素の中に追加していきたいと思って書きました。

<li class="list">
	<a class="link" href='URL'>
		<div class="item">
			<div>
				<span><b>タイトル</b><br><br><span class="text">サブタイトル</span</span>
			</div>
			<div class="info">
				<span>登録者：更新者氏名</span>
			</div>
		</div>
	</a>
</li>

この中でタイトルや更新者等の可変する部分はJavaScriptでレコードの値を入れていきます。
ループ処理の中でこのHTMLの部分を作っては追加しています。

$("#contents").append(html);

あとはCSSをいい感じにしたら良いです。
一応貼っておきますが全然いい感じではないのでご了承ください。

style.css
@charset "UTF-8";
#title {
    font-size: 40px;
    text-align: center;
    padding: 1.65rem 2rem;
    margin-bottom: 0;
    margin-top: 0;
}
#contents {
    list-style: none;
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    column-gap: 10px;
    padding-left: 0px;
}
/*各ブロックの幅指定*/
.list {
    flex-basis:15%;
    border: solid 3px #EBEEEB;
    padding: 10px;
    position: relative;
    margin-bottom: 10px;
}
/*疑似要素で比率ｗを調整*/
.list:before {
    content:"";
    display:block;
    padding-top:100%;
}
.list:hover {
　　opacity: 0.6;
　　background-color: #EBEEEB;
}

/*中のコンテンツを配置*/
.item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding:15px;
}

.link {
  display: block;
  font-size:22px;
  text-align: left;
}
/*更新者は下に寄せる*/
.info {
  position:absolute;
  bottom: 15px;
}
.text {
    color: #464F64;
    font-size: 1.2vw;
}

CSSはとりあえずやりたいことを「CSS　やりたいこと」でググって出てきたのを読んで貼ってみて違うと思ったら次のサイトを読んで貼ってみて・・の繰り返しでした。
デザインの勉強0なので最低限は学ぶ必要があると再度感じました。
配色とか激ムズでちょっと心折れて変なままです。。。
CSSの内容はスルーしようかと思いましたが、いくら変でもないと成り立たないと言っても過言ではないので一応・・です。

所感

CSSが特にヨワヨワで、もっと沢山アウトプットしないといけないと再確認しました。
スキルさえあれば(←そこが難しい)カスタマイズビューでなんでも作れそうなので、もっと挑戦していきたいです。

Discussion