画面表示非表示のちらつき、ボタンcss制御のメモ #JavaScript

はじめに

kintoneメモ
・画面でフィールドの表示非表示のちらつきの解消
・ボタン位置をcss制御

一瞬ちらつく表示制御

kintoneのイベントは非同期に動作するため、特定のアクションの後にフィールドの表示を制御する際、一瞬表示されてから非表示になるという現象が発生することがあります。

これを解決するための一つの方法は、フィールドをデフォルトで非表示にし、特定の条件が満たされた場合のみ表示するというアプローチです。具体的には、CSSを利用してフィールドを初めから非表示にしておき、条件が満たされた場合のみJavaScriptで表示させる方法です。

ただ方法を模索しましたが以下のようにdom操作にて表示を制御することになりそうです。

kintone.events.on(['app.record.create.show', 'app.record.edit.show', 'app.record.detail.show'], function(event) {
    var imprintFieldElement = document.querySelector('[name="record[〇〇フィールドのコード]"]');
    if (imprintFieldElement) {
        var parent = imprintFieldElement.closest('.control-section-gaia');
        if (event.record['ステータスフィールドのコード'].value !== '承認済') {
            parent.style.display = 'none';
        } else {
            parent.style.display = '';
        }
    }
    return event;
});

フィールドをデフォルトで非表示にする
- kintoneのアプリ設定で、カスタマイズのCSSに以下のスタイルを追加します。
  （「フィールドコード」は対象のフィールドコードに置き換えてください）

[ data-lookup-field-code="フィールドコード" ] {
    display: none;
}

2 . 特定の条件が満たされた場合にフィールドを表示する
- JavaScriptのカスタマイズに以下のようなコードを追加します。

kintone.events.on(['app.record.create.show', 'app.record.edit.show', 'app.record.index.edit.show'], function(event) {
    // 〇〇が存在する場合、フィールドを表示
    if (event.record['フィールド'].value) {
        document.querySelector('[data-lookup-field-code="フィールドコード"]').style.display = '';
    }
    return event;
});

この方法を使用すると、画面がロードされた際にフィールドはデフォルトで非表示となり、特定の条件が満たされた場合のみ表示されるようになります。これにより、一瞬表示される現象を回避することができます。
しかしながら事前にdata-lookup-field-code="フィールドコード"をdomにセットする必要があります。

data-lookup-field-code="フィールドコード"をdomにセットする例

kintone.events.on(['app.record.create.show', 'app.record.edit.show', 'app.record.detail.show'], function(event) {
    var selector;
    
    switch (event.type) {
        case 'app.record.create.show':
            selector = 'セレクタ1';  // 新規レコード作成画面でのセレクタ
            break;
        case 'app.record.edit.show':
            selector = 'セレクタ2';  // レコード編集画面でのセレクタ
            break;
        case 'app.record.detail.show':
            selector = 'セレクタ3';  // レコード詳細画面でのセレクタ
            break;
    }
    
    var targetElement = document.querySelector(selector);
    if (targetElement) {
        targetElement.setAttribute('data-lookup-field-code', 'フィールドコード');
    }

    return event;
});

event.type をチェックしてイベントのタイプに応じてセレクタを変更しています。'セレクタ1', 'セレクタ2', 'セレクタ3' はそれぞれのイベントに応じて適切なセレクタに置き換えてください。
この方法で、各イベントに対して異なるセレクタを使用して、目的のDOM要素に data-lookup-field-code 属性を追加することができます。

data属性の説明

CSSセレクタ [data-lookup-field-code="フィールドコード"] は、特定のデータ属性 data-lookup-field-code を持つHTML要素をターゲットにするものです。このセレクタを使うことで、データ属性の値が "フィールドコード" と一致するHTML要素を特定し、その要素に対してスタイルを適用することができます。

このようなセレクタは、特定の属性を持つHTML要素をターゲットにする場合に使います。特にJavaScriptフレームワークやライブラリ、あるいは特定のWebプラットフォーム（この場合はkintone）で生成されるHTML要素をターゲットにする際に便利です。

具体的に、以下のようなHTML要素があるとします：

<div data-lookup-field-code="exampleField"></div>

上記のHTML要素は、data-lookup-field-code というデータ属性を持ち、その値は "exampleField" です。

以下のCSSセレクタを使うと、この要素をターゲットにしてスタイルを適用することができます：

[data-lookup-field-code="exampleField"] {
    display: none;
}

このCSSは、data-lookup-field-code の値が "exampleField" の要素を非表示にします。

この例で使った [data-lookup-field-code="フィールドコード"] のセレクタは、kintoneの特定のフィールドをターゲットにする場合の一例です。

(別解)
上記方法では複雑なDOM操作が発生します。
やはりkintoneの標準機能で対応したいところです。
画面のちらつきは残りますが簡単にできます。

kintone.app.record.setFieldShownを使用します。

kintone.events.on(['app.record.create.show', 'app.record.edit.show', 'app.record.detail.show'], function(event) {
    var record = event.record;

    if (条件) {
        kintone.app.record.setFieldShown('フィールドコード', true); // 表示
    } else {
        kintone.app.record.setFieldShown('フィールドコード', false); // 非表示
    }

    return event;
});

この方法で、ページがロードされた際にフィールドは標準設定に基づき非表示となり、特定の条件が満たされた場合のみ表示されるようになります。一瞬のちらつきが発生しますが、該当フィールドを目立たない所に配置するなりの対応をすれば、簡易に対応できます。

kintoneでカスタムボタンを追加し、そのボタンの位置やスタイルをCSSで制御する方法

カスタムボタンの追加:
JavaScriptを使用してカスタムボタンを追加します。

kintone.events.on('app.record.detail.show', function(event) {
    // ボタンが既に追加されているかチェック
    if (document.getElementById('customStampButton')) return;

    // ボタンの作成
    var stampButton = document.createElement('button');
    stampButton.id = 'customStampButton';
    stampButton.innerText = 'ボタン';
    stampButton.onclick = function() {
        // 〇〇処理（例：〇〇アプリに登録する処理）をここに書く
    };

    // ボタンの追加
    kintone.app.record.getSpaceElement('スペースフィールドのコード').appendChild(stampButton);
});

ボタンの位置やスタイルをCSSで制御:
カスタマイズのCSSに以下のようなスタイルを追加して、ボタンの位置やスタイルを調整します。

#customStampButton {
    margin-top: 10px;   // 上からのマージンを調整
    margin-left: 20px;  // 左からのマージンを調整
    padding: 5px 15px;  // ボタン内のパディングを調整
    background-color: #007BFF;  // ボタンの背景色
    color: white;      // ボタンの文字色
    border: none;      // ボタンのボーダーを非表示に
    border-radius: 5px; // ボタンの角を丸くする
    cursor: pointer;   // ホバー時のカーソルをポインターに
}

#customStampButton:hover {
    background-color: #0056b3;  // ホバー時のボタンの背景色を変更
}

以上の手順で、カスタムボタンを追加し、その位置やスタイルをCSSで調整することができます。ボタンのスタイルや位置は、CSSのプロパティを変更することでさらにカスタマイズが可能です。