kintoneでモバイルアクセスを制限する方法

kintoneでカスタマイズを行う際、モバイル版まで対応するのは正直大変ですよね。
実際の開発現場では、以下の理由でPC版のみに集中することも多いのではないでしょうか。

• jQueryのプラグインや外部ライブラリがPC前提で作られている
• 複雑な画面レイアウトをモバイルに最適化するコストが高い
• 管理者向けの機能はそもそもPC環境での利用が前提
• 開発・保守工数を考えるとPC版優先になる

そんな時に便利なのが、kintone公式のモバイル判定APIを使ったアクセス制御です。適切にモバイルアクセスを制御することで、PC専用アプリとして安心して運用できます。

2025年7月のアップデートで判定するためのAPIが利用できるようになったのでそれを活用します。
https://kintone.cybozu.co.jp/update/main/2025-07.html

kintone公式のモバイル判定API

kintone JavaScript APIには以下の判定メソッドが用意されています：

参考: kintone JavaScript API 公式リファレンス

kintone.isMobileApp()

• kintone.isMobileApp() - モバイルアプリ判定API
  モバイルアプリからのアクセスかどうかを判定します。Promiseを返す非同期APIです。

kintone.isMobileApp().then(function(isMobileApp) {
  if (isMobileApp) {
    console.log('モバイルアプリからのアクセスです');
  }
});

kintone.isMobilePage()

• kintone.isMobilePage() - モバイルページ判定API
  現在のページがモバイル版かどうかを判定します。Promiseを返す非同期APIです。

kintone.isMobilePage().then(function(isMobilePage) {
  if (isMobilePage) {
    console.log('モバイル版のページです');
  }
});

実装パターン

パターン1：完全にアクセスを制限

(function() {
  'use strict';
  
  // 必要におうじてイベントは編集してください
  kintone.events.on([
    'mobile.app.record.index.show', 'mobile.app.record.detail.show', 'mobile.app.record.create.show', 'mobile.app.record.edit.show'
  ], async function(event) {
    
    // async/awaitを使った判定
    const [isMobileApp, isMobilePage] = await Promise.all([
      kintone.isMobileApp(),
      kintone.isMobilePage()
    ]);
    
    if (isMobileApp || isMobilePage) {
      // モバイルの場合は警告を表示
      alert('このアプリはPC専用です。PCからアクセスしてください。');
      
      // トップページにリダイレクト
      location.href = '/k/';
    }
    
    return event;
  });
})();

パターン2：機能を一部制限

(function() {
  'use strict';
  
  kintone.events.on(['mobile.app.record.detail.show'], async function(event) {
    
    // async/awaitを使った判定
    const [isMobileApp, isMobilePage] = await Promise.all([
      kintone.isMobileApp(),
      kintone.isMobilePage()
    ]);
    
    if (isMobileApp || isMobilePage) {
      
      // 警告メッセージを表示
      const messageDiv = document.createElement('div');
      messageDiv.style.cssText = `
        background-color: #fff3cd; 
        border: 1px solid #ffeaa7; 
        color: #856404; 
        padding: 10px; 
        margin: 10px 0;
        border-radius: 4px;
      `;
      messageDiv.textContent = '※ モバイルでは閲覧のみ可能です。編集はPCから行ってください。';
      
      // PC版とモバイル版でヘッダー要素の取得方法が異なる
      const headerSpace =  kintone.mobile.app.getHeaderSpaceElement() : 
      headerSpace.appendChild(messageDiv);
    }
    
    return event;
  });
})();

注意点

JavaScriptファイルの設定

モバイルアクセスを制御する場合は、「スマートフォン用のJavaScript / CSSファｌイル」 にアップロードする必要があります
(あくまでモバイル判定なのでPC用ファイルには設定不要です。)

• kintone開発者向けサイト - Cybozu Developer Network