4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

お題は不問！Qiita Tech Festa 2026で記事投稿！
Qiita Tech Festa20262026年7月13日まで開催中！
@muraya_jkoinkintone

isMobileApp() と isMobilePage() はどう使う？ ── kintone のアクセス環境を判定して「モバイルアプリとブラウザの挙動差」を出し分けよう！

4
Posted at

はじめに

皆さん、いきなりクイズです。🤫

「スマホのブラウザ」で kintone を開いたとき、それは モバイルアプリ表示 ですか？ PCブラウザ表示 ですか？

↓
↓
↓

正解はどっちでもなく、モバイルブラウザ表示 😱です。
私も最初は、いきなり正解を聞かれたら答えに迷ってました...

実は、2025年7月に追加されたAPI、isMobileApp() と isMobilePage() を使えば判別できます！

私は isMobileApp() と isMobilePage() を試したとき、PC用／スマートフォン用のJavaScriptとの関係でつまずきました。
同じ疑問を持つ方のために、試した内容と使い分けの考え方を記事にまとめました〜！

isMobileApp() と isMobilePage() を試してみる

まず、isMobileApp() と isMobilePage() を呼び出してみましょう。
今回はPC端末で、次のようにコンソールから実行します。

const mobileApp = await kintone.isMobileApp();
const mobilePage = await kintone.isMobilePage();
console.log({ mobileApp, mobilePage });

mobileApp_mobilePage_console.png

PC端末のPC UIでは、mobileApp: false、mobilePage: false と表示されます。

isMobileApp() と isMobilePage() の結果によって、アクセスしている環境を区別できます！

公式のAPIドキュメントは次のとおりです。

isMobileApp() と isMobilePage() は どちらも非同期API です。
async / await を使ってください。

isMobileApp() と isMobilePage() にありがちなQ&A

私が初めて isMobileApp() と isMobilePage() を触ったとき、疑問がいくつも出てきました。
同じところでつまずきそうな人のために、よくある3つのQをまとめてみました。

Q. isMobileApp() と isMobilePage()、何が違う？

名前が似ているので、最初は私も混同していました。
結論、別物 です。

API 判定内容（動作対象）
isMobileApp() 公式モバイルアプリからアクセスしているかどうか
isMobilePage() いまの画面がモバイル向けUIかどうか。（モバイルアプリ＋モバイルブラウザ両方が対象）

Q. 「PC用の JavaScript」と「スマートフォン用の JavaScript」で分ければ判定のAPIは不要？

kintoneカスタマイズを触っていると、こう思いませんか？

PC用JSとスマホ用JS、ファイル分けてあるし、判定APIいらなくない？

PC向けJSとモバイル向けJS

JavaScript / CSSのカスタマイズには、「PC用の JavaScript」と「スマートフォン用の JavaScript」が分かれています。
もし、単なるPCとモバイルの区別だけなら、カスタマイズを「PC用の JavaScript」と「スマートフォン用の JavaScript」に分けるだけでいいじゃないかと思うでしょう。

実は...

「PC用の JavaScript」の動作対象は PC向けUI です。
「スマートフォン用の JavaScript」の動作対象は モバイル向けUI です。

アップロード先 動作対象
PC用の JavaScript PC向けUI
スマートフォン用の JavaScript モバイル向けUI

つまり、アップロード先は 端末ではなくUI向き で分かれています。
PC端末からモバイル向けUIを開いたり、スマートフォンからPC向けUIを開いたりする可能性があるため、ファイルを分けただけでは足りない場面があります。

Q. kintoneの表示パターン、頭の中で整理できない...まとめてくれますか？

読めば読むほど混乱する人向けに、表にまとめました。
自分用のチートシートとして使ってください。

# 端末 UI画面 実行されるJavaScript isMobileApp() isMobilePage()
1 PC PC UI PC用の JavaScript false false
2 PC モバイルUI スマートフォン用の JavaScript false true
3 モバイルアプリ モバイルUI スマートフォン用の JavaScript true true
4 モバイルブラウザ モバイルUI スマートフォン用の JavaScript false true
5 モバイルブラウザ PC UI PC用の JavaScript false false

isMobileApp() と isMobilePage() の組み合わせだけでは、「端末」と「UI画面」を一意には特定できません。

ex:

  • 1（PC端末 × PC UI）と 5（モバイルブラウザ × PC UI）は、どちらも false / false です。
  • 2（PC端末 × モバイルUI）と 4（モバイルブラウザ × モバイルUI）は、どちらも false / true です。

そのため、この2つのAPIは「端末の種類を完全に判別する」ためではなく、カスタマイズ内の分岐処理に使うイメージだと感じていました。

ユースケース

ここからは、実際に「こう使えそう」と思った例を2つ紹介します。

isMobileApp() のユースケース：モバイルブラウザの制限＆ログ検知

💻背景

👩‍💻とある会社の情シスがいました。
最近全社の取り組みとして、スマートフォンブラウザの代わりに公式モバイルアプリの活用を促進しています。下記のような理由があります。

  • 公式モバイルアプリではプッシュ通知を受け取れる
  • 今後、IT窓口での問い合わせ対応では「スマートフォンからのアクセス＝公式モバイルアプリ」と前提をそろえたい

そのため、スマートフォンからの kintone アクセスをブラウザではなく 公式モバイルアプリに限定したい、という場面です。

💻実装のイメージ

  • モバイルブラウザでモバイル向けUIが開かれたときに、画面上部に通知メッセージを表示し、公式モバイルアプリからログインするよう促す

kintone_mobile_access_error.jpg

  • モバイルアプリの浸透に向けて、アクセスログをアプリに残し、情シスがブラウザ利用が続くユーザーには個別にリマインドする

kintone_mobile_access_log.png

上記の手段を使って、モバイルアプリを使ってくれていない方にリマインドできるようなユースケースです。

💻サンプルコード

スマートフォン用の JavaScript に載せて、モバイル向けUIのポータル画面（mobile.portal.show）で動かす例です。
isMobileApp() が false のときだけ、通知を表示し、アクセスログを記録します。

(() => {
  'use strict';

  //ご自身の環境に合わせてLOG_APP_IDを置き換えてください
  const LOG_APP_ID = 111;

  const recordAccessLog = async (userCode) => {
    const body = {
      app: LOG_APP_ID,
      record: {
        loginUser: { value: [{ code: userCode }] },
      },
    };
    await kintone.api(kintone.api.url('/k/v1/record.json', true), 'POST', body);
  };

  kintone.events.on('mobile.portal.show', async (event) => {
    const isApp = await kintone.isMobileApp();
    const loginUser = kintone.getLoginUser();

    try {
      if (!isApp) {
        await recordAccessLog(loginUser.code);
        kintone.mobile.showNotification(
          'ERROR',
          'kintone公式モバイルアプリからアクセスしてください。',
        );
      }
    } catch (error) {
      console.error(error.message || error);
    }
    return event;
  });
})();

isMobilePage() のユースケース：レコード削除ダイアログカスタマイズ

💻背景

👨‍💻とある会社の情シスがいました。
最近は社内でkintoneアプリのレコードの誤削除が頻繁に起こっています。

  • 社内でレコードの誤削除が相次いでおり、全社向けに削除前の確認ダイアログを試している
  • 確認メッセージは「本当に削除してよいですか？バックアップは取りましたか？」とし、PC向けUI・モバイル向けUIの両方で表示したい
  • メンテしやすいよう、PC用・スマートフォン用の JavaScript に 同じファイル をアップロードしたい

そのため、1つのファイル内で PC向けUI とモバイル向けUI の確認UIを出し分けたい、という場面です。

💻実装のイメージ

  • カスタマイズは「PC用」「スマートフォン用」の両方に、同じ JavaScript ファイルを設定する
    kintone_management_setting.png

  • イベントは一覧画面・詳細画面でレコードを削除するとき（app.record.index.delete.submit / mobile.app.record.index.delete.submit / app.record.detail.delete.submit / mobile.app.record.detail.delete.submit）に確認を挟み、「本当に削除しますか？バックアップを取れましたか？」の確認ダイアログが出てくる

  • isMobilePage() が true のときは kintone.mobile.showConfirmBottomSheet()、false のときは kintone.showConfirmDialog() を使い分ける

PC向けUI（左）、モバイル向けUI（右）

PC向けUIの削除確認ダイアログ モバイル向けUIの削除確認ボトムシート

💻サンプルコード

PC用・スマートフォン用の JavaScript に 同じファイル を載せる想定のコードです。

(() => {
  'use strict';

  const showDeleteConfirm = async (isMobile) => {
    const options = {
      title: 'レコードを削除しますか？',
      body: '本当に削除してよいですか？バックアップは取りましたか？',
      showOkButton: true,
      okButtonText: '削除する',
      showCancelButton: true,
      cancelButtonText: 'キャンセル',
    };

    if (isMobile) {
      return kintone.mobile.showConfirmBottomSheet(options);
    }
    return kintone.showConfirmDialog(options);
  };

  const confirmDelete = async (event) => {
    const isMobile = await kintone.isMobilePage();
    const result = await showDeleteConfirm(isMobile);

    if (result !== 'OK') {
      event.error = '削除をキャンセルしました。';
    }
    return event;
  };

  kintone.events.on(
    [
      'app.record.index.delete.submit',
      'mobile.app.record.index.delete.submit',
      'app.record.detail.delete.submit',
      'mobile.app.record.detail.delete.submit',
    ],
    confirmDelete,
  );
})();

注意事項

次の画面では、本APIを使用できません。
カスタマイズを入れる前に 対象イベントと画面 を確認してください。

  • 検索画面
  • アプリストア
  • プラグインの設定画面

更新によって変わる可能性があるため、公式ドキュメントの「利用できる画面」の記述とあわせて、都度確認することをおすすめします。

ポータル全体や複数アプリにまたがるカスタマイズを入れる場合は、動作テスト環境で十分に確認してから本番環境へ反映してください。

おわりに

今回 isMobileApp() と isMobilePage() を試して感じたことを、次のとおり整理しました！

  • isMobileApp() は「公式モバイルアプリからアクセスしているかどうか」isMobilePage() は「いまの画面がモバイル向けUIかどうか」を判定する
  • 端末がモバイルかPCかUIがモバイルかPCかなどシチュエーションを細かく分けたいときに使えるAPI
  • 非同期API なので await を忘れない
  • 検索・アプリストア・プラグイン設定 など利用できない画面がある点に注意

「モバイルアプリ」と「モバイル向けUI」の違いを意識して、kintoneカスタマイズに isMobileApp() と isMobilePage() を活用していきましょう。

この記事は、2026年6月版kintoneで動作を確認しています。

■ 参考

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?