Domino Leapアプリ三種盛り　～アプリの解体新書～

>100 Views

June 17, 26

#hcl domino #domino leap

スライド概要

のの会（https://notesknows.connpass.com/）の第85回で講演した際のスライドです。
Domino Leapで作成出来る業務アプリを三種類作成したので、その解説を行います。

Masahiko MIyo

@guylocke

スライド一覧

Notes/Dominoが好きな(株)エフの代表。最近はDomino Leapのウィジェット開発にハマっています。 I only like Notes/Domino. However, the thing of only that. Lately, I've been really into developing widgets for Domino Leap. IBM Champion for ICS 2011-2019. HCL Master 2019. HCL Ambassador 2020-2026.

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

Nomad Webについて-利用者編-

hcl nomad web domino

Masahiko MIyo 23.2K

HCL Domino Leapって何？

domino leap domino

Masahiko MIyo 9.6K

AdminCentralを使おう

hcl notes hcl domino admincentral

Masahiko MIyo 7.4K

Domino V14におけるメール機能

hcl notes hcl domino mail

Masahiko MIyo 5.8K

「ドメイン検索」を利用するには？

hcl domino hcl notes ドメイン検索

Masahiko MIyo 4.5K

HCL Notes/Domino V14 Code Drop 3

hcl domino hcl notes

Masahiko MIyo 2.5K

各ページのテキスト

10.

11.

在庫スキャンでできること 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 －

12.

想定利用シーン 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 －

13.

このアプリで学べること 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 －

14.

15.

16.

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

17.

18.

19.

20.

21.

工夫した箇所 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 －

22.

23.

このアプリでできること 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 －

24.

想定利用シーン 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 －

25.

このアプリで学べること 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 －

26.

27.

28.

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

29.

30.

31.

32.

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

33.

34.

35.

36.

このアプリで学べること 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 －

37.

38.

39.

40.

41.

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

42.

43.

[beta]

工夫した箇所 - 都市マスタ
❑ 都市マスタの位置情報の取得

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 －

44.

45.

46.

47.

Domino Leapアプリ三種盛り ～アプリの解体新書～