---
title: Domino Leapアプリ三種盛り　～アプリの解体新書～
tags:  #hcl domino #domino leap  
author: [Masahiko MIyo](https://www.docswell.com/user/guylocke)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/GJWG8V6672.jpg?width=480
description: のの会（https://notesknows.connpass.com/）の第85回で講演した際のスライドです。 Domino Leapで作成出来る業務アプリを三種類作成したので、その解説を行います。
published: June 17, 26
canonical: https://www.docswell.com/s/guylocke/5L3V66-2026-06-17-141710
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/GJWG8V6672.jpg)

e f f e c t
f o r c e
のの会(notes knows community)
第85回
2026年4月9日
Domino Leapアプリ三種盛り
～アプリの解体新書～
御代 政彦（みよ まさひこ）
株式会社エフ
©2026 ef Co., Ltd. All rights Reserved.


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4EZL84YR73.jpg)

アジェンダ
1.
2.
3.
4.
5.
e f f e c t
f o r c e
まずはデモ
1.
2.
3.
在庫スキャン
エアコン点検アプリ
天気で行動ナビ
1.
2.
きっかけ
なぜこのアプリ？
1.
2.
3.
在庫スキャン
エアコン点検アプリ
天気で行動ナビ
前説
解体新書
次回作の予定
Q&A
©2026 ef Co., Ltd. All rights Reserved.
－ 2－


# Page. 3

![Page Image](https://bcdn.docswell.com/page/Y76WP3D17V.jpg)

e f f e c t
f o r c e
どんなアプリか見てから話します
1. まずはデモ
©2026 ef Co., Ltd. All rights Reserved.
－ 3－


# Page. 4

![Page Image](https://bcdn.docswell.com/page/G75MKL3L74.jpg)

e f f e c t
f o r c e
DEMO
©2026 ef Co., Ltd. All rights Reserved.
－ 4－


# Page. 5

![Page Image](https://bcdn.docswell.com/page/9J29WLZ3ER.jpg)

デモアプリの一覧と起動URL
e f f e c t
f o r c e
❑ 在庫スキャン
https://x.gd/BC3SR
❑ エアコン点検アプリ
https://x.gd/kISiu
❑ 天気で行動ナビ
https://x.gd/3ZWK2
©2026 ef Co., Ltd. All rights Reserved.
－ 5－


# Page. 6

![Page Image](https://bcdn.docswell.com/page/DEY4LQR8JM.jpg)

e f f e c t
f o r c e
いきなり話をされても分からないよね
2. 前説
©2026 ef Co., Ltd. All rights Reserved.
－ 6－


# Page. 7

![Page Image](https://bcdn.docswell.com/page/VJNY4KD978.jpg)

作ろうと思ったきっかけ
e f f e c t
f o r c e
❑ きっかけ
 デモサイトのアプリが古くなってきた
 最後に公開したのが2025年6月
 アプリの種類が少ない
©2026 ef Co., Ltd. All rights Reserved.
－ 7－


# Page. 8

![Page Image](https://bcdn.docswell.com/page/YE9PQVG3J3.jpg)

なぜこのアプリ？
e f f e c t
f o r c e
❑ アプリの選定理由
 デモサイトのアプリと被らないようにした
 実務でも使えそうなもの
 実装が簡単なもの
©2026 ef Co., Ltd. All rights Reserved.
－ 8－


# Page. 9

![Page Image](https://bcdn.docswell.com/page/GE8DGPVLED.jpg)

e f f e c t
f o r c e
各アプリの詳細解説
3. 解体新書
©2026 ef Co., Ltd. All rights Reserved.
－ 9－


# Page. 10

![Page Image](https://bcdn.docswell.com/page/LELMG15Q7R.jpg)

e f f e c t
f o r c e
QRコードを使ったアプリ
a. 在庫スキャン
©2026 ef Co., Ltd. All rights Reserved.
－ 10 －


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4JMYQWRKJW.jpg)

在庫スキャンでできること
e f f e c t
f o r c e
• QRコードの読み取り
• QRコードを読み取り、商品コードを取得
• Notes DBの検索
• Notes DBから該当商品の在庫情報を検索
• 取得結果の出力
• 取得結果を画面に出力
• エラーハンドリング
• 商品が見つからない場合はエラーメッセージを出力
©2026 ef Co., Ltd. All rights Reserved.
－ 11 －


# Page. 12

![Page Image](https://bcdn.docswell.com/page/PJR98YR679.jpg)

想定利用シーン
e f f e c t
f o r c e
• 倉庫や店舗での在庫確認
• 在庫管理が必要な業務であれば対応可能
• QRコードを使った簡易スキャン業務
• QRコードのスキャンを起点とした業務体験が可能
• Domino LeapとNotes DBの連携学習
• 既存のNotes DB資産を活かせる
• モバイル端末での業務アプリ体験
• Domino Leapのアプリをスマホやタブレットで利用できる
©2026 ef Co., Ltd. All rights Reserved.
－ 12 －


# Page. 13

![Page Image](https://bcdn.docswell.com/page/PEXQ8GRDJX.jpg)

このアプリで学べること
e f f e c t
f o r c e
• QRコード読み取りの実装方法
• JavaScriptライブラリの配置や利用方法
• Notes DBとのデータ連携方法
• Notes DBの検索方法を学習可能
• CSSを利用したエラー表示のUX改善
• コンポーネントをCSSで装飾する方法
• Domino Leapの画面構成とコンポーネント配置
• PC、ブラウザの画面作成手法
©2026 ef Co., Ltd. All rights Reserved.
－ 13 －


# Page. 14

![Page Image](https://bcdn.docswell.com/page/3EK9K4RDED.jpg)

アプリ全体の構成
e f f e c t
f o r c e
• Domino Leap
•
•
•
•
トップページ
在庫スキャン（QRコード読み取り）
サンプルQRコード一覧
環境設定
• Notes DB
• 商品データ
©2026 ef Co., Ltd. All rights Reserved.
－ 14 －


# Page. 15

![Page Image](https://bcdn.docswell.com/page/L73WZL8P75.jpg)

トップページ
e f f e c t
f o r c e
• アプリの入口となる画面
•
•
•
•
各機能へのリンクをまとめて表示
初心者でも迷わないよう、説明文を添付
PC 推奨／スマホ推奨などの利用環境も明記
管理者向けの「環境設定」は分離して配置
©2026 ef Co., Ltd. All rights Reserved.
－ 15 －


# Page. 16

![Page Image](https://bcdn.docswell.com/page/87DKRNM3JG.jpg)

e f f e c t
在庫スキャン（QRコード読み取り）
f o r c e
• QRコードを元に商品コードを取得
• 読み取り成功時は音で通知
• 自動で商品コードが入力される
• [在庫を検索]ボタンで Notes DBを参照
• 「商品名」「在庫数」その他の情報を表示
• 見つからない場合はエラーメッセージを表示
©2026 ef Co., Ltd. All rights Reserved.
－ 16 －


# Page. 17

![Page Image](https://bcdn.docswell.com/page/VJPKW5RPE8.jpg)

サンプルQRコード一覧
e f f e c t
f o r c e
• サンプル用のQRコードをまとめた画面
• PCのブラウザで開くことを推奨
• サンプル商品に対応したQRコードを掲載
• 学習用として、読み取りテストができる
©2026 ef Co., Ltd. All rights Reserved.
－ 17 －


# Page. 18

![Page Image](https://bcdn.docswell.com/page/2EVV8PRVEQ.jpg)

環境設定
e f f e c t
f o r c e
• アプリの動作に必要な設定を管理者が行う画面
• QRコード読み取り用のJavaScriptライブラリのURLを設定
©2026 ef Co., Ltd. All rights Reserved.
－ 18 －


# Page. 19

![Page Image](https://bcdn.docswell.com/page/57GL5PM1EL.jpg)

Notes DBの役割
e f f e c t
f o r c e
在庫マスタは以下の役割を持っています
• Domino Leapから参照される
• 商品コードをキーにして商品情報を返す
• 商品データの更新
• Notes DB側で行える
• 自動でQRコード一覧に追加される
©2026 ef Co., Ltd. All rights Reserved.
－ 19 －


# Page. 20

![Page Image](https://bcdn.docswell.com/page/4EQYZ2RNJP.jpg)

商品データの構造
e f f e c t
f o r c e
在庫マスタは以下のフィールドで構成されている
• 商品コード
• 商品名
• 在庫数
• ロケーション（倉庫情報）
• 最終更新日時
©2026 ef Co., Ltd. All rights Reserved.
－ 20 －


# Page. 21

![Page Image](https://bcdn.docswell.com/page/KJ4W3L8371.jpg)

工夫した箇所
e f f e c t
f o r c e
❑ QRコード一覧
 QRコードはDomino Leap上で自動生成
✓ Notes DBの一覧を取得した後、1文書ずつ変換していった
✓ 表コンポーネントに読み込んだ後、全レコード分の繰り返し処理
❑ QRコードの読み取り
 jsQR.js(QRコード読み取り用のJavaScriptライブラリ)を利用
✓ そのままではDomino Leapで利用できないためrequiredで利用でき
るようにした
©2026 ef Co., Ltd. All rights Reserved.
－ 21 －


# Page. 22

![Page Image](https://bcdn.docswell.com/page/LE1Y1L2Z7G.jpg)

e f f e c t
f o r c e
実務重視のNotes DB連携
b. エアコン点検
©2026 ef Co., Ltd. All rights Reserved.
－ 22 －


# Page. 23

![Page Image](https://bcdn.docswell.com/page/GEWG8VR6J2.jpg)

このアプリでできること
e f f e c t
f o r c e
• Notes DBから各エアコンの点検項目を取得
• Notes DBをマスタとして利用可能
• 点検結果はDomino Leapに記録
• 基礎データはNotes DBから取得するが、記録データはDomino
Leap内に保存
• 写真を添付可能
• スマホ、タブレットのカメラ機能が利用可能
• 承認ワークフローでの報告
• 簡易ワークフローが実装済
©2026 ef Co., Ltd. All rights Reserved.
－ 23 －


# Page. 24

![Page Image](https://bcdn.docswell.com/page/47ZL84RRJ3.jpg)

想定利用シーン
e f f e c t
f o r c e
• 現場の点検担当者が、スマホやタブレットで入力する
• タブレットで入力出来るため、その場で記録が可能
• カメラ機能を使ったファイルアップロード
• その場で写真を撮って保存出来る
• Domino LeapとNotes DBの連携学習
• 既存のNotes DB資産を活かせる
• モバイル端末での業務アプリ体験
• Domino Leapのアプリをスマホやタブレットで利用できる
©2026 ef Co., Ltd. All rights Reserved.
－ 24 －


# Page. 25

![Page Image](https://bcdn.docswell.com/page/YJ6WP3R1JV.jpg)

このアプリで学べること
e f f e c t
f o r c e
• Notes DBとのデータ連携方法
• Notes DBの文書を取得、アプリのフィールドにセットする方法
• 複数ページを利用した入力・承認画面のUX改善
• 利用者に優しい画面設計
• ワークフローのステージ構成
• ワークフローステージの作成方法
• Domino Leapの画面構成とコンポーネント配置
• PC、ブラウザの画面作成手法
©2026 ef Co., Ltd. All rights Reserved.
－ 25 －


# Page. 26

![Page Image](https://bcdn.docswell.com/page/GJ5MKL8LJ4.jpg)

アプリ全体の構成
e f f e c t
f o r c e
• Domino Leap
• トップページ
• 点検記録フォーム
• Notes DB
• 設備点検対象マスタ
©2026 ef Co., Ltd. All rights Reserved.
－ 26 －


# Page. 27

![Page Image](https://bcdn.docswell.com/page/9E29WLK37R.jpg)

トップページ
e f f e c t
f o r c e
• アプリの入口となる画
面
• 点検記録の一覧を表示
• 新規作成や既存データ
の表示を行える
• 自分に関係するデータ
のみ表示（作成デー
タ・承認データのみ）
• ワークフローの状況を
切り替えて表示データ
をわかりやすく出来る
©2026 ef Co., Ltd. All rights Reserved.
－ 27 －


# Page. 28

![Page Image](https://bcdn.docswell.com/page/D7Y4LQN8EM.jpg)

点検記録（新規作成/下書）
e f f e c t
f o r c e
• Notes DBから点検項目情報を取得
• エアコンごとに点検項目を変更可能
• 項目ごとに結果を選択
• コメントも入力可能
• "異常"の場合は写真をアップロード可能
• ワークフローにも対応
• 上長は自分で選択
• アプリの改修による自動設定も可能
©2026 ef Co., Ltd. All rights Reserved.
－ 28 －


# Page. 29

![Page Image](https://bcdn.docswell.com/page/VENY4KX9J8.jpg)

点検記録（点検完了/承認済）
e f f e c t
f o r c e
• 参照専用のページ
• 上長コメント以外は表示専用
• 入力用のフィールドと勘違いしない
• ワークフローアクションも可能
• 上長は[承認][差戻す]が行える
©2026 ef Co., Ltd. All rights Reserved.
－ 29 －


# Page. 30

![Page Image](https://bcdn.docswell.com/page/Y79PQV83E3.jpg)

Notes DBの役割
e f f e c t
f o r c e
設備点検対象は以下の役割を持っています
• Domino Leapから参照される
• 文書UNIDをキーにして設備点検情報を返す
• 設備データの更新（追加・変更・削除）
• 点検項目の使用可否の設定
• 点検対象一覧に反映
©2026 ef Co., Ltd. All rights Reserved.
－ 30 －


# Page. 31

![Page Image](https://bcdn.docswell.com/page/G78DGP8L7D.jpg)

設備点検対象データの構造
e f f e c t
f o r c e
設備点検対象マスタは以下のフィールドで構成されている
•
•
•
•
•
設備名
設置場所
型番
管理番号
点検項目名、使用可否
©2026 ef Co., Ltd. All rights Reserved.
－ 31 －


# Page. 32

![Page Image](https://bcdn.docswell.com/page/L7LMG1RQJR.jpg)

工夫した箇所
e f f e c t
f o r c e
❑ 点検項目
 項目ごとに使用可否を設定して、必要な分だけを表示するように
した
 点検項目名もNotes DBの値をセットしている
✓
Domino Leap上ではフィールド名を「判断nn」としている
❑ 承認フォーム
 申請画面（入力中心）とは別にすることで見やすくした
©2026 ef Co., Ltd. All rights Reserved.
－ 32 －


# Page. 33

![Page Image](https://bcdn.docswell.com/page/4EMYQWPKEW.jpg)

e f f e c t
f o r c e
アプリのダッシュボードにいかが？
c. 天気で行動ナビ
©2026 ef Co., Ltd. All rights Reserved.
－ 33 －


# Page. 34

![Page Image](https://bcdn.docswell.com/page/PER98Y16J9.jpg)

天気で行動ナビでできること
e f f e c t
f o r c e
• 天気情報の取得
• 位置情報を元に天気情報を取得
• Domino Leapのデータの再利用
• 都市マスタを元に天気情報を取得
©2026 ef Co., Ltd. All rights Reserved.
－ 34 －


# Page. 35

![Page Image](https://bcdn.docswell.com/page/P7XQ8GYDEX.jpg)

想定利用シーン
e f f e c t
f o r c e
• 外で作業する人が多い業務
• 天気情報を元に作業時の注意を促せる
• 出張が多い業務
• 都市マスタを作成することで全国各地の天気を把握可能
©2026 ef Co., Ltd. All rights Reserved.
－ 35 －


# Page. 36

![Page Image](https://bcdn.docswell.com/page/37K9K43D7D.jpg)

このアプリで学べること
e f f e c t
f o r c e
• 天気情報の取得方法
• Domino LeapのRESTサービスの設定方法
• Domino Leapのデータの再利用方法
• 都市マスタのデータを利用した天気情報の取得
• CSSを利用した画面設計
• コンポーネントをCSSで装飾する方法
©2026 ef Co., Ltd. All rights Reserved.
－ 36 －


# Page. 37

![Page Image](https://bcdn.docswell.com/page/LJ3WZLGPJ5.jpg)

アプリ全体の構成
e f f e c t
f o r c e
• Domino Leap
• ダッシュボード
• 都市一覧ページ
• 都市マスタ編集画面
©2026 ef Co., Ltd. All rights Reserved.
－ 37 －


# Page. 38

![Page Image](https://bcdn.docswell.com/page/8JDKRN13EG.jpg)

ダッシュボード
e f f e c t
f o r c e
• メイン画面
• 現在地の天気を表示
• 指定した都市の天気を表示
©2026 ef Co., Ltd. All rights Reserved.
－ 38 －


# Page. 39

![Page Image](https://bcdn.docswell.com/page/VEPKW5QP78.jpg)

都市一覧ページ
e f f e c t
f o r c e
• 天気情報を取得するための基本情報の一覧
• 新規作成や既存データの編集を行える
• 表示順、緯度経度の情報を確認可能
©2026 ef Co., Ltd. All rights Reserved.
－ 39 －


# Page. 40

![Page Image](https://bcdn.docswell.com/page/27VV8P5V7Q.jpg)

都市マスタ編集画面
e f f e c t
f o r c e
• 都市情報を編集する画面
• 都市名（英語）を元に緯度経度を取得
• 日本語は表示用
• 表示順を設定可能
• 有効/無効の設定可能
©2026 ef Co., Ltd. All rights Reserved.
－ 40 －


# Page. 41

![Page Image](https://bcdn.docswell.com/page/5JGL5P617L.jpg)

工夫した箇所 - 天気情報
e f f e c t
f o r c e
❑ 天気情報
 天気情報の出力
✓ その場所の天気と都市ごとの天気を見られるようにした
 都市の天気は都市マスタから選択できるようにした
✓ 固定化するのではなく、好きな都市を作成出来るようにした
 その時の行動指標を出力
✓ 気温・降水量・風速の値に応じてメッセージを出力するようにした
©2026 ef Co., Ltd. All rights Reserved.
－ 41 －


# Page. 42

![Page Image](https://bcdn.docswell.com/page/47QYZ24NEP.jpg)

工夫した箇所 - 都市マスタ
e f f e c t
f o r c e
❑ 都市マスタ
 都市マスタの中に都市の位置情報（緯度経度）を持たせることに
より、天気情報を取得する際のコードを省略化した
✓
天気情報は緯度経度情報から取得するため、都市名→緯度経度→天
気となるのを避けた
©2026 ef Co., Ltd. All rights Reserved.
－ 42 －


# Page. 43

![Page Image](https://bcdn.docswell.com/page/KE4W3LQ3J1.jpg)

工夫した箇所 - 都市マスタ
❑ 都市マスタの位置情報の取得
e f f e c t
{
"results": [
{
"id": 1863967,
"name": "Fukuoka",
"latitude": 33.6,
"longitude": 130.41667,
"elevation": 3.0,
"feature_code": "PPLA",
"country_code": "JP",
"admin1_id": 1863958,
"admin2_id": 1863955,
"admin3_id": 7407401,
"timezone": "Asia/Tokyo",
"population": 1612392,
"country_id": 1861060,
"country": "Japan",
"admin1": "Fukuoka",
"admin2": "Fukuoka City",
"admin3": "Hakata"
}
],
"generationtime_ms": 0.23627281
 JavaScriptのコーディングで実装
位置情報を取得するためのREST APIの戻り値のJSONは配
列になっている
Domino LeapではJSONとフィールドの階層が一致してい
る必要がある
Domino Leapのサービスが利用できない
f o r c e
}
Fukuokaで検索した例(配列になっている)
©2026 ef Co., Ltd. All rights Reserved.
－ 43 －


# Page. 44

![Page Image](https://bcdn.docswell.com/page/L71Y1LPZJG.jpg)

e f f e c t
f o r c e
今考えているのはこんなアプリ
4. 次回作
©2026 ef Co., Ltd. All rights Reserved.
－ 44 －


# Page. 45

![Page Image](https://bcdn.docswell.com/page/G7WG8V26E2.jpg)

現在構想中のアプリ
e f f e c t
f o r c e
❑ シフト管理アプリ
 カレンダー入力で、メンバーのシフトが確認出来るようにする
✓ 管理者がシフトの調整を行う
✓ 従業員は自分のシフトの確認を行う
✓ 当日のシフトの確認を行う
©2026 ef Co., Ltd. All rights Reserved.
－ 45 －


# Page. 46

![Page Image](https://bcdn.docswell.com/page/4JZL84DRE3.jpg)

e f f e c t
©2026 ef Co., Ltd. All rights Reserved.
f o r c e


# Page. 47

![Page Image](https://bcdn.docswell.com/page/YE6WP311EV.jpg)

e f f e c t
©2026 ef Co., Ltd. All rights Reserved.
f o r c e