kintoneで「モバイルは参照のみ、作成・編集はPCから」を実現する方法

以前、「kintoneでモバイルアクセスを制限する方法」という記事で、モバイルアクセスの制御方法をためしましたが、
実際には出先でデータの確認くらいはしたいということはあるかとおもいますので、今回はモバイルは参照のみ、PCで編集をためしてみます。

2025年8月の新UI制御APIを活用

今回の実装では、従来のDOM操作ではなく、2025年8月リリースの新UI制御APIを使用します。
参照：https://kintone.cybozu.co.jp/update/main/2025-08.html

// モバイル用
kintone.mobile.app.showAddRecordButton('HIDDEN');        // レコード追加ボタンを非表示
kintone.mobile.app.record.showEditRecordButton('HIDDEN'); // 編集ボタンを非表示
kintone.mobile.app.showOptionsButton('HIDDEN');           // オプションボタンを非表示

// PC用(デフォルトで表示されるので今回は利用しない)
kintone.app.showAddRecordButton('VISIBLE');
kintone.app.record.showEditRecordButton('VISIBLE');
kintone.app.showFilterButton('VISIBLE');
kintone.app.showReportButton('VISIBLE');

// パラメータ
// 'VISIBLE': 表示
// 'HIDDEN': 非表示
// 戻り値: Promise（非同期）

コード実装

(function() {
  'use strict';

  // ========================================
  // モバイル：参照専用モード（編集機能を制限）
  // ========================================

  // 一覧画面での制御
  kintone.events.on('mobile.app.record.index.show', async function(event) {
    // モバイル判定
    const [isMobileApp, isMobilePage] = await Promise.all([
      kintone.isMobileApp(),
      kintone.isMobilePage()
    ]);

    if (isMobileApp || isMobilePage) {
      // 新UI制御APIを使用してモバイルUI要素を制御
      kintone.mobile.app.showAddRecordButton('HIDDEN');  // レコード追加ボタン非表示

      // 参照専用の案内を表示
      const headerSpace = kintone.mobile.app.getHeaderSpaceElement();
      if (headerSpace) {
        headerSpace.innerHTML = `
          <div style="
            background: linear-gradient(90deg, #17a2b8, #138496);
            color: white;
            padding: 10px;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
          ">
            📱 参照専用モード - データ編集はPCからお願いします
          </div>
        `;
      }
    }

    return event;
  });

  // 詳細画面での制御
  kintone.events.on('mobile.app.record.detail.show', async function(event) {
    // モバイル判定
    const [isMobileApp, isMobilePage] = await Promise.all([
      kintone.isMobileApp(),
      kintone.isMobilePage()
    ]);

    if (isMobileApp || isMobilePage) {
      // 編集ボタンを非表示
      kintone.mobile.app.record.showEditRecordButton('HIDDEN');

      // 詳細画面に案内を表示（公式APIを使用）
      const headerSpace = kintone.mobile.app.getHeaderSpaceElement();
      if (headerSpace) {
        headerSpace.innerHTML = `
          <div style="
            background: #ffc107;
            color: #856404;
            padding: 8px 12px;
            margin: 10px 0;
            border-radius: 4px;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 8px;
          ">
            <span style="font-size: 16px;">⚠️</span>
            <span>参照専用モードです。編集・削除はPCから行ってください。</span>
          </div>
        `;
      }
    }

    return event;
  });

  // 編集画面アクセス時の警告
  kintone.events.on([
    'mobile.app.record.edit.show',
    'mobile.app.record.create.show'
  ], async function(event) {
    // モバイル判定
    const [isMobileApp, isMobilePage] = await Promise.all([
      kintone.isMobileApp(),
      kintone.isMobilePage()
    ]);

    if (isMobileApp || isMobilePage) {
      // 編集画面に来てしまった場合は警告を表示してリダイレクト
      alert('モバイルからの編集はできません。\nPCからアクセスしてください。');

      // 一覧画面に戻る
      history.back();

      // イベントをキャンセル
      return false;
    }

    return event;
  });
})();

※PC版はデフォルトで全機能が利用できるため、PC用のJavaScriptカスタマイズは不要です。モバイル用のみ設定すれば十分です。

下記のように表示され、編集ボタンなどが非表示になります。