Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nomad 開発の苦悩つ
Search
Haruyuki Nakano
September 01, 2022
Programming
0
1.6k
Nomad 開発の苦悩つ
HCL Nomad Mobile での使用を前提とした Notes アプリケーション開発におけるポイント満載の資料。
2021年11月の「テクてくLotus技術者夜会」で使用
Haruyuki Nakano
September 01, 2022
Tweet
Share
More Decks by Haruyuki Nakano
See All by Haruyuki Nakano
HCL Domino 14.5 EAP2 Domino IQ について
harunakano
0
25
HCL Notes/Domino 14.5 EAP Drop1
harunakano
1
170
ブラウザでNotesアプリ開発!?HCL Nomad Designer で始めよう!
harunakano
0
88
HCL Domino 14.0 AutoUpdate を試してみた
harunakano
0
3.4k
HCL Nomad Designer 1.0.11
harunakano
0
290
HCL Notes 14.0 「スタイルの変更」で「3 設定の確認」を深掘り
harunakano
0
8.1k
HCL Notes 14.0 EA2 Domino Restyle を試してみた
harunakano
0
490
HCL Nomad 1.0.7 Restyle
harunakano
0
240
添付された日本語テキストファイルを全文検索でヒットさせる方法
harunakano
0
16k
Other Decks in Programming
See All in Programming
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
170
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
160
昭和の職場からアジャイルの世界へ
kumagoro95
1
400
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
680
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Angular Meetup Berlin
danielsogl
0
100
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
240
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
210
2024年のWebフロントエンドのふりかえりと2025年
sakito
3
260
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
250
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Embracing the Ebb and Flow
colly
84
4.6k
Music & Morning Musume
bryan
46
6.4k
GitHub's CSS Performance
jonrohan
1030
460k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
420
Building Your Own Lightsaber
phodgson
104
6.2k
Designing for humans not robots
tammielis
250
25k
The Cult of Friendly URLs
andyhume
78
6.2k
Building Adaptive Systems
keathley
40
2.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Adopting Sorbet at Scale
ufuk
74
9.2k
Transcript
Nomad開発の苦悩つ テクてくLotus技術者夜会 2021年11月 中野晴幸 Haruyuki Nakano harunakano.blogspot.com (blog)
私はキャンプが大好きです
大事なもの忘れすぎ問題 • 焚き火台はある、ライターとマッチない… • 調理器具はある、カトラリーない… • ワインはある、オープナーない… • 生肉調達した、クーラーボックスない… お出かけ前のチェックは大事!
という訳で、テーマは 持ち物リスト です 業務アプリじゃないけどそれなりにまじめに取り組んでみました
「持ち物リスト」として使ってるGoogle 「Keep」 トップページに 「持ち物リスト」の 一覧
Keepの良いところ • シンプル リストはタイトルとアイテムだけです • アイテムの追加が楽ちん アイテム入力の最後にEnterするだけです • ドラッグで並び替え 車へ積み込む順に並び替えたり、忘れそうなモ
ノを上へ移動できます • タップで消し線 準備「完了」の持ち物との区別がしやすくなり ます スマホアプリで 表示した 「持ち物リスト」 持ち物1つを 「アイテム」 と呼びます
とは言え、改善したい点もある • あの道具、名前なんだっけ問題 道具名を思い出すのに時間がかかってリスト作成が進まない 持っている道具のリストからパパっと選択したい • 消し線付けたアイテムが邪魔になってくる • アイテム数が多いと消し線ついてないアイテムだけ表示したくなるけ どフィルタリングできない
• リストへ「文章」を追加しづらい 備忘録的なメモや振り返り、反省点を書き込みたいこともある
アプリの構想 じゃあどんなアプリがいいの?
選ぶ • 数多くのアイテム から季節や場所等 の状況に応じたも のを選びます 積み込む • 持っていくものを 車へ積み込んだり
リュックへパッキ ングします 完了 • 忘れ物が無 いかチェッ クします
選ぶ • 全アイテム 積み込む • 持ち物リスト 完了 • 完了リスト アイテムはリスト間を「移動」する(
コピーじゃない)
タイトル ふ◦とっぱらソロキャンプ - 厳冬期 メモ ◦◦肉店、マック◦バリュで買い出 し、薪3束追加 全アイテム テント バーナー
風防 シュラフ マット ガス(OD缶) ガス(CB缶) ランタン(ガソリン) ランタン(ガス) ランタン(オイル) ランタン(太陽光) 持ち物 タープ ペグ ロープ 焚き火台 薪 着火剤 耐火グローブ 防水マッチ 場所、同行者、目的、時期など 持っていくアイテムのリスト (最初はからっぽ) 未登録アイテムの追加ボタン すべてのアイテムのリスト 持ち物リスト(入力画面) 文章も書けるし 写真も貼れちゃうエリア
タイトル ふ◦とっぱらソロキャンプ - 厳冬期 メモ ◦◦肉店、マック◦バリュで買い出 し、薪3束追加 全アイテム テント バーナー
風防 シュラフ マット ガス(OD缶) ガス(CB缶) ランタン(ガソリン) ランタン(ガス) ランタン(オイル) ランタン(太陽光) 持ち物 タープ ペグ ロープ 焚き火台 薪 着火剤 耐火グローブ 防水マッチ アイテムをリスト間で簡単に 移動したい 完了したアイテムと区別したい 持ち物リスト(入力画面) 左側リストを非表示にすると 右側リストの幅が最大になる アイテムの位置を移動したい (未完アイテムの絞り込み)
持ち物リスト 更新 タイトル 2022/ 2/22 ふ◦とっぱらソロキャン プ - 厳冬期 9/12
◦貫湖ソロキャンプ 新規に「持ち物リスト」を作るボタン 既存の「持ち物リスト」の一覧 「持ち物リスト」のリスト (トップ画面)
大事なこと スマホでも利用できる アイテムを登録できる 「全アイテム」と「持ち物」のリスト リスト間でアイテムを「移動」できる 未完アイテムだけ絞り込める
ポイントはアイテムの 「移動しやすさ」と 「見つけやすさ」
文書を 「アイテム」 リストを 「フォルダ」 にみたてる 「フォルダ」とは、文書を更新する ことなくユーザーが自由に出し入れ できる一覧のこと 『文書をフォルダへ移動』を『アイ テムを持ち物リストへ移動』に読み
替えただけ フォルダならアイテムをドラッグ& ドロップで移動できそう
アイテム リスト アイテム1 アイテム2 アイテム3 登録した全てのアイテムを 一覧できる「ビュー」 全アイテム 持ち物 完了
3つのフォルダ 持ち物 リスト ふもとっぱ ら1泊 田貫湖ソロ Adminキャ ンプ 持ち物リストの「ビュー」
アイテム名:「アイテム1」 カテゴリ: ◦衣◦食•住◦行 分類: 「設営道具」 詳細: 「写真など」 タイトル:「ふもとっぱら1泊」 メモ: 「アクティビティなど」
全アイテ ム アイテ ム1 アイテ ム2 持ち物 アイテ ム3 アイテ ム4 完了 アイテ ム5 アイテム 登録用フォーム 持ち物リスト 作成用フォーム
タイトル:「」 メモ: 「」 全アイテ ム アイテム1 アイテム2 アイテム3 アイテム4 アイテム5
持ち物 完了 持ち物リストの新規作成 ビューにある全てのアイテムが フォルダ「全アイテム」へ追加される タイトル:「ソロキャンプ」 メモ: 「◦◦で買出し」 全アイテ ム アイテ ム1 アイテ ム2 持ち物 アイテ ム3 アイテ ム4 完了 アイテ ム5 ユーザーはアイテムを フォルダ間で移動する 編 集 保 存 title : “ソロキャンプ” memo : “◦◦で買出し” itemname_added: “アイテム3”:”アイテム4” itemname_compete: “アイテム5” noteid_ added: 34C:45D noteid_complete: 23B フォルダ「持ち物」「完了」にある アイテム名とNoteIdが保存される フォームを閉じるとき 3つのフォルダから文書が除去される
既存の持ち物リスト文書を開く タイトル:「ソロキャンプ」 メモ: 「◦◦で買出し」 全アイテ ム アイテ ム1 アイテ ム2
持ち物 アイテ ム3 アイテ ム4 完了 アイテ ム5 開く title : “ソロキャンプ” memo : “◦◦で買出し” itemname_added: “アイテム3”:”アイテム4” itemname_compete: “アイテム5” noteid_ added: 34C:45D noteid_complete: 23B 持ち物リストの文書内に 保存されているアイテムの NoteIdから文書を特定し 「持ち物」「完了」フォルダへ追加、 保存されていないアイテムは 「全アイテム」フォルダへ追加
初期バージョンの開発 試行錯誤してみました
フォームにフォルダ埋め込み (Notes)
フォームにフォルダ埋め込み (Notes) 「全てのアイテム」 を非表示にして「追 加したアイテム」の 幅を広げるボタン 文字を埋め込んだ画 像をアクションバー の背景に設定、列タ イトルの表示をやめ
て高さを稼いだ アイテムを完了にす るボタン 完了アイテムだけ表 示するボタン 選択したアイテムを リスト間で移動する ボタン 完了アイテムは文字 色を変え、チェック マークも表示 完了アイテムだけ表 示できたらアイテム の並び替えは不要に
埋め込みフォルダ間で移動 (Notes) アイテムのドラッグはできる けど隣のフォルダへドロップできなかった…
埋め込みフォルダ間で移動 (Nomad Mobile) Nomad Mobileでは ドラッグすらできなかった…
初期バージョンの 気に入らない点 アクションバーへ文字を埋め込んだ画像を 設定するのはやめたほうがよさそう… 埋め込みフォルダの高さを「ウィンドウに 合わせる」に設定しても合ってくれず、 フォームとフォルダの両方でスクロールが 発生する場合がある 完了アイテムの絞り込み が意外と面倒
※完了アイテムを完了 フォルダへ移動するアイ デアがここで生まれた 図柄が幅を占有するためタイトルとメモの 文字が改行されすぎて高さが出てしまう
ドラッグで移動できないのは 埋め込みフォルダだから? フレームセット内のフォルダ間 では移動できたりして?
フレーム間ドラッグ 試行バージョンの開発 ドラッグ&ドロップをテストするだけのDBを作りました
ドラッグできるけどドロップできなかった.. フレームセットのフレーム間で移動 (Notes)
じゃあ お決まりの作法でやるか…
フレーム内のフォルダから アウトラインのエントリへ ドラッグする構成で作成 メールなど一般的なアプリケーションで実装されるドラッグ&ドロップ移 動可能な構成です。 ※これが現行バージョンです。
アウトラインエントリへ移動 (Notes) 上段フレーム(フォーム) 中段フレーム(ページ内のアウトライン) 下段フレーム(フォルダ) アイテムを ドラッグ&ドロップで 移動できた
自動フレームの設定 「持ち物リスト」フォームは、指 定したフレームセット内のフレー ム(前ページの上段フレーム)に 自動でセットした状態で開く設定 にしてます
アウトラインエントリへ移動 (Nomad Mobile) Nomad Mobileでは ドラッグできなかった…
Nomad Mobile で ドラッグ&ドロップ したいってアイデア あるじゃん… これに Vote して Nomad
Mobileでの ドラッグはあきらめようっと
ところで、スマホでは指先で アイテムをスワイプしてスイスイ 移動できたら最高ですよね? ボタンのプロパティにある 「スワイプ」 って使えるの? コレ
KB0092728 に不具合記事あり… アイデアも投稿されてました。 スワイプオプションは まだ使えません… このオプションが 使えるようになることを 心待ちにしてるユーザー ここにいますよー 興味あるKBの記事は
Subscribeしましょうね
モバイルアクションの利用 (Nomad Mobile) アクションバーの代わりに モバイルアクションを表示 選択したアイテムにチェッ クを付けるエリアを表示 選択したアイテムの色やス タイルを変えられると、こ のエリアはいらないんだけ
どなあ… アクションバーと列タイトルを表示 しないことでリストが約2行分増える
「持ち物」フォルダの モバイルアクション モバイルアクションの利用 (Nomad Mobile) 「全アイテム」フォルダの モバイルアクション
アクションを アクションバー以外に表示 「アクションをモバイルアクションに含める」を有効化 「マウスの右ボタンメニューに含める」を有効化 「アクションをアクションバーに含める」を無効化 Nomad Mobile にはメニューバー無いので 「アクションメニューに含める」はオフでOK
右クリックメニューに 追加したアクションだけ表示 「マウスの右クリックメニューにデフォルト アイテムを表示」をオフにすると、メニュー がシンプルになります アクションバーのプロパティ デフォルトではこのアプリ に不要な機能が多いし 誤操作のもとになりそう… Nomad
Mobile ではアイテ ムを長押しすると右クリッ クメニューが表示されます
フォーム・エリアの省略 (Nomad Mobile) 上段を省略した状態 (▼のタップで表示) 上段を表示した状態 (▲のタップで省略) リスト操作に集中し たいときこのエリア は邪魔。もっとリス
トを表示したい 5行分増えた!
アイテムのフィルタリング (Nomad Mobile) 標準の検索ボタン 【アイテム登録画面】 フィルタしたい 単語を設定しておく 調理器具だけ表示したい ときは検索バーを表示し て”調理器具”とタイプし
て検索します。 検索にヒットしたアイテ ムにチェックが付きます。 ここで[持ち物に追加す る]をタップすると一度に 追加できます。 追加した検索アクション
文字をタイプするとき ソフトキーボードが 画面占有するし タイプは多少面倒くさい 絞り込みが アクションボタンで できればいいのに… けれど @SetViewInfo([SetViewFilter]) コマンドは制限(次のページ)
があって使えなかった…
@SetViewInfo([SetViewFilter])の改善要望 https://domino-ideas.hcltechsw.com/ideas/DDXP-I-887 カテゴライズしてない列や2列目以降の列を指定して フィルタリングしたい!という要望です。 投票お願いします!
という訳で (少し思うところもあるけれど) iPhoneの Nomad Mobileで サクサク動作する Notesアプリが できました。 このアプリ開発で生まれた アイデアがいくつかあります。
このアプリ開発 から生まれた アイデア ビュー/フォルダで行を選択したとき、色やスタイルを変えられるオプ ションがほしい (DDXP-I-889) アイテムのドラッグでフォルダ内の並び順を変更できるオプションがほ しい (DDXP-I-831) アクションバーへテキストをセットしたい。値は式でもセットできるよ
うにしてほしい 列タイトルのテキスト(値)を式でもセットできるようにしてほしい カテゴリがオフの列でもsetviewinfoでフィルタしたい (DDXP-I-887) アウトラインエントリを水平に並べた時、画面幅で自動調整するオプ ションがほしい モバイルアクションのアイコンを変更可能にしてほしい。アクションが 1つだけの場合はアクションに設定したアイコンを表示したい。
実は Domino Volt でもチャレンジ • データグリッドのフィルタリング不具合に遭遇… • Muuri.js のカンバン・グリッドをVoltアプリに組み込む方向で 検討中
ソート フィルタリング ドラッグ&ドロップに よる移動と並び替え 選択してるアイテム のスタイル変更 KB0094684
以上です。 ご清聴ありがとうございました。