【モバイル版】アクションボタンの色を変更したい

yama-a · 2025 年 7 月 29 日午前 5:34

モバイル版のボタンの色を変更したいです。

この記事を参考にしましたが、PC版ではうまく色付ができたのに対し、モバイル版のほうでは反映されませんでした。

↓が私が試したコードです。
頭の方にmobileを入れるだけではなく、他にも何か変更する箇所があるのでしょうか？
また、JavaScriptだけではなくcssでも解決できるようでしたらご教授いただければ幸いです。
よろしくお願いします。

(function() {

    'use strict';

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

      const el1 = document.querySelector('span[title="承認"]');
      if (el1) {
          el1.parentNode.style.backgroundColor = '#b4f4fcff;
        }

      const el2 = document.querySelector('span[title="差戻"]');
      if (el2) {
          el2.parentNode.style.backgroundColor = '#e5b1aeff';
        }

    });

})();

fito12 · 2025 年 7 月 29 日午前 6:19

をご確認されることをお勧めします

yama-a · 2025 年 7 月 30 日午前 12:25

コメントありがとうございます！

送っていただいたページも確認はしており、mobile.を追加することと、別ファイルを用意しスマートフォン版にアップロードもしている状態です。
何か見落としがあるのでしょうか…

JavaScript触り始めたばかりでこれ以上はどこがおかしいのかわからない状態です

fito12 · 2025 年 7 月 30 日午前 1:53

ごめんなさい、よく読まずにコメントしてしまいました

ﾁｮｯﾄ、AIにきいてみました

このJavaScriptがモバイルで動作しないとのこと、承知いたしました。いくつか考えられる原因と修正案があります。
まず、最も可能性が高いのは、#b4f4fcff; の部分のクォーテーションが閉じられていない構文エラーです。
以下に修正したコードと、デバッグのためのヒントを記載します。

`(function() {

    'use strict';

    kintone.events.on(['mobile.app.record.detail.show'], function(event) {
        console.log('Kintone mobile record detail show event fired.'); // イベント発生確認用

        // 「承認」というタイトルを持つspan要素を検索
        const el1 = document.querySelector('span[title="承認"]');
        if (el1) {
            console.log('Found element with title "承認":', el1); // 要素が見つかったか確認
            console.log('Parent of "承認":', el1.parentNode); // 親要素を確認
            el1.parentNode.style.backgroundColor = '#b4f4fcff'; // 修正: クォーテーションを閉じる
            console.log('Background color set for "承認" parent.');
        } else {
            console.log('Element with title "承認" not found.');
        }

        // 「差戻」というタイトルを持つspan要素を検索
        const el2 = document.querySelector('span[title="差戻"]');
        if (el2) {
            console.log('Found element with title "差戻":', el2); // 要素が見つかったか確認
            console.log('Parent of "差戻":', el2.parentNode); // 親要素を確認
            el2.parentNode.style.backgroundColor = '#e5b1aeff'; // 修正: クォーテーションを閉じる
            console.log('Background color set for "差戻" parent.');
        } else {
            console.log('Element with title "差戻" not found.');
        }

        // Kintoneのプロセス管理のステータスフィールドの場合、
        // span[title="承認"]のようなセレクタでは取得できない場合があります。
        // その場合は、対象の要素のHTML構造をブラウザの開発者ツールで確認し、
        // より正確なセレクタ（クラス名や他の属性など）を使用する必要があります。
        // 例: document.querySelector('.kintone-app-record-process-status-label[title="承認"]')
    });

})();
`

1.構文エラーの修正:
el1.parentNode.style.backgroundColor = '#b4f4fcff;
el2.parentNode.style.backgroundColor = ‘#e5b1aeff;
上記のように、カラーコードの後に閉じクォーテーション（’）が抜けていました。これを修正しました。

2.console.log() を追加しました。このコードをKintoneに適用し、モバイルブラウザのデベロッパーツール（Chromeの場合、PCでモバイルエミュレーションを有効にして確認できます）のコンソールを開いてみてください。
「Kintone mobile record detail show event fired.」が表示されるか。
「Found element with title “承認”:」や「Found element with title “差戻”:」が表示されるか。
要素が見つからない場合は「Element with title “承認” not found.」のようなメッセージが表示されます。

もし修正後も動作しない場合:

は、以下省略

－－－追記－－－
PCでモバイルのエミュレーション【/k/m/】で可能です

yama-a · 2025 年 7 月 30 日午前 6:44

ご丁寧にありがとうございます！
クォーテーションもきちんと入れて試しましたがやはり駄目だったので
いただいたコードを基に一つずつ調べつつ試してみようと思います。

wv-sumichan · 2025 年 7 月 30 日午前 7:32

PC 版とモバイル版は、 DOM の構成が異なります。そのため要素を検索する方法を変えないと動きません。

PC 上でモバイル表示を確認する方法は @fito12 さんが仰っていた方法もありますが、 F12 開発者ツールで Elements (要素) タブの左にあるをクリックするとモバイル端末のシミュレーションができるので、併せて使うと見た目の確認がしやすいです。

モバイル版のプロセス管理のアクションボタンは button > span の入れ子構造になっていて、 span 側に色がついているみたいですね。また title 属性を持っていないので、 class 属性と innerText プロパティで判断するか、親要素の aria-label 属性をみて判断するか……。といった具合でしょうか。

fito12 · 2025 年 7 月 30 日午前 8:39

もし修正後も動作しない場合:の続きです

もし修正後も動作しない場合:
要素のセレクタの確認: Kintoneのプロセス管理機能のステータス表示の場合、単にspan[title=“承認”]では要素が取得できないことがあります。KintoneのDOM構造は複雑なため、モバイルとPCで異なる場合もあります。
PCでKintoneのレコード詳細画面を開き、開発者ツール（F12キー）で「承認」や「差戻」の要素を右クリックし、「検証」を選択して、そのHTML構造を確認してください。
title属性以外に、特定のクラス名やdata-属性など、より一意に特定できるセレクタがないか確認し、document.querySelector()の引数を調整してみてください。
例えば、プロセス管理のステータスラベルであれば、document.querySelector(‘.kintone-app-record-process-status-label[title=“承認”]’) のようになるかもしれません。

更に聞いてあって．．．@住田さまのおっしゃるのと被るかと思いますが．．．

このJavaScriptがモバイルで動作しない主な原因は、前回の修正で指摘したカラーコードの閉じクォーテーションの欠落が最も可能性が高いです。
現在のkintone-mobile-fixのコードは、この構文エラーを修正済みです。
しかし、もし修正後も動作しないのであれば、以下の点が考えられます。
このJavaScriptがモバイルで動作しない主な原因は、前回の修正で指摘したカラーコードの閉じクォーテーションの欠落が最も可能性が高いです。
現在のkintone-mobile-fixのコードは、この構文エラーを修正済みです。
しかし、もし修正後も動作しないのであれば、以下の点が考えられます。

KintoneのDOM構造の確認が必須です
Kintoneの画面要素は、PCとモバイル、またはアプリの設定（特にプロセス管理のステータス表示など）によってHTMLの構造が異なる場合があります。span[title=“承認”]というセレクタが、実際にモバイル画面上の「承認」や「差戻」の要素と一致していない可能性があります。
確認方法:
1.モバイルエミュレーションを使用: PCのChromeブラウザでKintoneのモバイルレコード詳細画面を開きます。

2.開発者ツールを開く: F12キーを押すか、右クリックして「検証」を選択します。

3.モバイル表示に切り替える: 開発者ツールの上部にあるモバイルアイコン（デバイスツールバーの切り替え）をクリックして、モバイル表示に切り替えます。

4.要素の検証: 画面上の「承認」や「差戻」と表示されている部分を右クリックし、「検証」を選択します。

5.HTML構造を確認: 開発者ツールのElementsタブで、選択された要素とその親要素のHTML構造を注意深く確認してください。

<span>タグであるか？

title属性が本当に「承認」や「差戻」になっているか？

他に、その要素を特定できるユニークなクラス名やID、またはデータ属性（例: data-cy="approval-button"のようなもの）がないか？

2. セレクタの調整
確認したHTML構造に基づいて、document.querySelector()のセレクタをより正確なものに調整する必要があります。
例:

もし要素に特定のクラス名がある場合:

JavaScript

const el1 = document.querySelector('.some-kintone-class[title="承認"]');

もしtitle属性ではなく、別の属性（例: data-value）を使っている場合:

JavaScript

const el1 = document.querySelector('span[data-value="承認"]');

プロセス管理のステータスラベルの場合、Kintoneが提供する特定のクラス名があることが多いです。例えば、コメントにも記載したように:
JavaScript

const el1 = document.querySelector('.kintone-app-record-process-status-label[title="承認"]');

このJavaScriptがモバイルで動作しない主な原因は、前回の修正で指摘したカラーコードの閉じクォーテーションの欠落が最も可能性が高いです。

現在のkintone-mobile-fixのコードは、この構文エラーを修正済みです。

しかし、もし修正後も動作しないのであれば、以下の点が考えられます。

KintoneのDOM構造の確認が必須です
Kintoneの画面要素は、PCとモバイル、またはアプリの設定（特にプロセス管理のステータス表示など）によってHTMLの構造が異なる場合があります。span[title=“承認”]というセレクタが、実際にモバイル画面上の「承認」や「差戻」の要素と一致していない可能性があります。

確認方法:

モバイルエミュレーションを使用: PCのChromeブラウザでKintoneのモバイルレコード詳細画面を開きます。

開発者ツールを開く: F12キーを押すか、右クリックして「検証」を選択します。

モバイル表示に切り替える: 開発者ツールの上部にあるモバイルアイコン（デバイスツールバーの切り替え）をクリックして、モバイル表示に切り替えます。

要素の検証: 画面上の「承認」や「差戻」と表示されている部分を右クリックし、「検証」を選択します。

HTML構造を確認: 開発者ツールのElementsタブで、選択された要素とその親要素のHTML構造を注意深く確認してください。

<span>タグであるか？
title属性が本当に「承認」や「差戻」になっているか？
他に、その要素を特定できるユニークなクラス名やID、またはデータ属性（例: data-cy="approval-button"のようなもの）がないか？

セレクタの調整
確認したHTML構造に基づいて、document.querySelector()のセレクタをより正確なものに調整する必要があります。
例:
もし要素に特定のクラス名がある場合:
JavaScript

const el1 = document.querySelector('.some-kintone-class[title="承認"]');

const el1 = document.querySelector(‘.some-kintone-class[title=“承認”]’);
もしtitle属性ではなく、別の属性（例: data-value）を使っている場合:
JavaScript

const el1 = document.querySelector('span[data-value="承認"]');

const el1 = document.querySelector(‘span[data-value=“承認”]’);
プロセス管理のステータスラベルの場合、Kintoneが提供する特定のクラス名があることが多いです。例えば、コメントにも記載したように:
JavaScript

const el1 = document.querySelector('.kintone-app-record-process-status-label[title="承認"]');

console.logの出力確認
コードに含まれているconsole.logの出力は、デバッグに非常に役立ちます。
「Kintone mobile record detail show event fired.」が表示されているか？
表示されていれば、イベント自体は正しく発火しています。
「Element with title “承認” not found.」のようなメッセージが表示されているか？
このメッセージが表示されていれば、document.querySelectorが目的の要素を見つけられていないことを意味します。この場合、セレクタの修正が必要です。

まとめ
最も重要なのは、実際に動作しているKintoneモバイル画面のHTML構造を開発者ツールで確認し、それに基づいてdocument.querySelectorのセレクタを修正することです。これが問題解決への一番の近道となります。

yama-a · 2025 年 7 月 31 日午前 4:12

コメントありがとうございます！

モバイル端末シュミレーションもできるのですね！初めて知りました。活用していきたいと思います

PC版とモバイル版の違いも確認しつつ
もう一度JavaScriptの基礎から調べながらいろいろ試したいと思います。
ありがとうございます

yama-a · 2025 年 7 月 31 日午前 4:17

続きもたくさんあったのですね！ありがとうございます！
時間はかかるとは思いますがお二人からいただいた意見を参考に頑張ってみます！
ありがとうございます

yama-a · 2025 年 7 月 31 日午前 5:31

記録

const el1 = document.querySelector(‘button[aria-label=“○○（ステータスを進める）”]’);
if (el1) {
el1.parentNode.style.backgroundColor = ‘#b4f4fcff’;
｝

const el1 = document.querySelector(‘span[class=“gaia-mobile-v2-app-record-actionbar-actionbutton-border”]’);
if (el1) {
el1.parentNode.style.backgroundColor = ‘#b4f4fcff’;
}

wv-sumichan · 2025 年 7 月 31 日午前 6:02

もしトライアンドエラーを行うなら、 F12 開発者ツールの Console (コンソール) タブを使うといいですよ。 JavaScript の処理を記述してエンターを押すとそのまま実行する画面なので、document.querySelector() を実行すれば要素がダイレクトに出てきて確認がしやすいです。

取得できた要素は、ホバーすると実際の画面側でどこの要素なのか吹き出しが出て探しやすいし、↑キーを押すと直前の実行内容がコピーされるので、繰返し微調整しながら要素の取得を試すにはもってこいです。

あとは、処理が実行されるタイミングによってはまだボタンが出来上がってなくて、少し待たないとうまく取得できないというパターンもあるので、 Console タブでうまくいってもカスタマイズJSに登録したら動かないって場合は setTimeout などを使うことも視野に入れたほうがいいかもですね。

トピック		返信	表示
詳細画面で次ページに遷移するボタンを作成したい（PC版、アプリ版） kintone カスタマイズ	6	895	2017 年 7 月 6 日
モバイル版にJAVAscriptの書き方 kintone カスタマイズ	2	156	2021 年 9 月 7 日
モバイル版で使いたいボタン kintone カスタマイズ	3	520	2022 年 10 月 17 日
モバイル画面で、ルックアップ正常取得時のメッセージを非表示にしたい kintone カスタマイズ	1	282	2020 年 4 月 3 日
【スマートフォンでの表示】一覧画面 / 詳細画面の色の反映 kintone カスタマイズ	2	89	2019 年 12 月 12 日

【モバイル版】アクションボタンの色を変更したい

関連トピック