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.5k
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 Notes/Domino 14.5 EAP Drop1
harunakano
1
50
ブラウザでNotesアプリ開発!?HCL Nomad Designer で始めよう!
harunakano
0
16
HCL Domino 14.0 AutoUpdate を試してみた
harunakano
0
1.7k
HCL Nomad Designer 1.0.11
harunakano
0
230
HCL Notes 14.0 「スタイルの変更」で「3 設定の確認」を深掘り
harunakano
0
6.4k
HCL Notes 14.0 EA2 Domino Restyle を試してみた
harunakano
0
420
HCL Nomad 1.0.7 Restyle
harunakano
0
220
添付された日本語テキストファイルを全文検索でヒットさせる方法
harunakano
0
14k
12.0.2 ビュー索引更新の改善
harunakano
0
15k
Other Decks in Programming
See All in Programming
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
C++でシェーダを書く
fadis
6
4.1k
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
Quine, Polyglot, 良いコード
qnighy
4
650
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
310
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
React への依存を最小にするフロントエンド設計
takonda
15
4k
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
290
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
3
1.2k
Macとオーディオ再生 2024/11/02
yusukeito
0
380
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
120
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Done Done
chrislema
181
16k
Facilitating Awesome Meetings
lara
50
6.1k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
BBQ
matthewcrist
85
9.3k
Site-Speed That Sticks
csswizardry
0
36
Designing for Performance
lara
604
68k
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
以上です。 ご清聴ありがとうございました。