Nomad 開発の苦悩つ

Slide 1

Slide 1 text

Nomad開発の苦悩つテクてくLotus技術者夜会 2021年11月中野晴幸 Haruyuki Nakano harunakano.blogspot.com (blog)

Slide 2

Slide 2 text

私はキャンプが大好きです

Slide 3

Slide 3 text

大事なもの忘れすぎ問題 • 焚き火台はある、ライターとマッチない… • 調理器具はある、カトラリーない… • ワインはある、オープナーない… • 生肉調達した、クーラーボックスない… お出かけ前のチェックは大事！

Slide 4

Slide 4 text

という訳で、テーマは持ち物リストです業務アプリじゃないけどそれなりにまじめに取り組んでみました

Slide 5

Slide 5 text

「持ち物リスト」として使ってるGoogle 「Keep」トップページに「持ち物リスト」の一覧

Slide 6

Slide 6 text

Keepの良いところ • シンプルリストはタイトルとアイテムだけです • アイテムの追加が楽ちんアイテム入力の最後にEnterするだけです • ドラッグで並び替え車へ積み込む順に並び替えたり、忘れそうなモノを上へ移動できます • タップで消し線準備「完了」の持ち物との区別がしやすくなりますスマホアプリで表示した「持ち物リスト」持ち物１つを「アイテム」と呼びます

Slide 7

Slide 7 text

とは言え、改善したい点もある • あの道具、名前なんだっけ問題道具名を思い出すのに時間がかかってリスト作成が進まない持っている道具のリストからパパっと選択したい • 消し線付けたアイテムが邪魔になってくる • アイテム数が多いと消し線ついてないアイテムだけ表示したくなるけどフィルタリングできない • リストへ「文章」を追加しづらい備忘録的なメモや振り返り、反省点を書き込みたいこともある

Slide 8

Slide 8 text

アプリの構想じゃあどんなアプリがいいの？

Slide 9

Slide 9 text

選ぶ • 数多くのアイテムから季節や場所等の状況に応じたものを選びます積み込む • 持っていくものを車へ積み込んだりリュックへパッキングします完了 • 忘れ物が無いかチェックします

Slide 10

Slide 10 text

選ぶ • 全アイテム積み込む • 持ち物リスト完了 • 完了リストアイテムはリスト間を「移動」する（コピーじゃない）

Slide 11

Slide 11 text

タイトルふ○とっぱらソロキャンプ - 厳冬期メモ ○○肉店、マック○バリュで買い出し、薪3束追加全アイテムテントバーナー風防シュラフマットガス（OD缶）ガス（CB缶）ランタン（ガソリン）ランタン（ガス）ランタン（オイル）ランタン（太陽光）持ち物タープペグロープ焚き火台薪着火剤耐火グローブ防水マッチ場所、同行者、目的、時期など持っていくアイテムのリスト（最初はからっぽ）未登録アイテムの追加ボタンすべてのアイテムのリスト持ち物リスト（入力画面）文章も書けるし写真も貼れちゃうエリア

Slide 12

Slide 12 text

タイトルふ○とっぱらソロキャンプ - 厳冬期メモ ○○肉店、マック○バリュで買い出し、薪3束追加全アイテムテントバーナー風防シュラフマットガス（OD缶）ガス（CB缶）ランタン（ガソリン）ランタン（ガス）ランタン（オイル）ランタン（太陽光）持ち物タープペグロープ焚き火台薪着火剤耐火グローブ防水マッチアイテムをリスト間で簡単に移動したい完了したアイテムと区別したい持ち物リスト（入力画面）左側リストを非表示にすると右側リストの幅が最大になるアイテムの位置を移動したい（未完アイテムの絞り込み）

Slide 13

Slide 13 text

持ち物リスト更新タイトル 2022/ 2/22 ふ○とっぱらソロキャンプ - 厳冬期 9/12 ○貫湖ソロキャンプ新規に「持ち物リスト」を作るボタン既存の「持ち物リスト」の一覧「持ち物リスト」のリスト（トップ画面）

Slide 14

Slide 14 text

大事なことスマホでも利用できるアイテムを登録できる「全アイテム」と「持ち物」のリストリスト間でアイテムを「移動」できる未完アイテムだけ絞り込める

Slide 15

Slide 15 text

ポイントはアイテムの「移動しやすさ」と「見つけやすさ」

Slide 16

Slide 16 text

文書を「アイテム」リストを「フォルダ」にみたてる「フォルダ」とは、文書を更新することなくユーザーが自由に出し入れできる一覧のこと『文書をフォルダへ移動』を『アイテムを持ち物リストへ移動』に読み替えただけフォルダならアイテムをドラッグ＆ドロップで移動できそう

Slide 17

Slide 17 text

アイテムリストアイテム1 アイテム2 アイテム3 登録した全てのアイテムを一覧できる「ビュー」全アイテム持ち物完了３つのフォルダ持ち物リストふもとっぱら1泊田貫湖ソロ Adminキャンプ持ち物リストの「ビュー」

Slide 18

Slide 18 text

アイテム名：「アイテム1」カテゴリ： ○衣○食●住○行分類：「設営道具」詳細：「写真など」タイトル：「ふもとっぱら1泊」メモ：「アクティビティなど」全アイテムアイテム1 アイテム2 持ち物アイテム3 アイテム4 完了アイテム5 アイテム登録用フォーム持ち物リスト作成用フォーム

Slide 19

Slide 19 text

タイトル：「」メモ：「」全アイテムアイテム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が保存されるフォームを閉じるとき３つのフォルダから文書が除去される

Slide 20

Slide 20 text

既存の持ち物リスト文書を開くタイトル：「ソロキャンプ」メモ：「○○で買出し」全アイテムアイテム1 アイテム2 持ち物アイテム3 アイテム4 完了アイテム5 開く title : “ソロキャンプ” memo : “○○で買出し” itemname_added: “アイテム3”:”アイテム4” itemname_compete: “アイテム5” noteid_ added: 34C:45D noteid_complete: 23B 持ち物リストの文書内に保存されているアイテムの NoteIdから文書を特定し「持ち物」「完了」フォルダへ追加、保存されていないアイテムは「全アイテム」フォルダへ追加

Slide 21

Slide 21 text

初期バージョンの開発試行錯誤してみました

Slide 22

Slide 22 text

フォームにフォルダ埋め込み（Notes）

Slide 23

Slide 23 text

フォームにフォルダ埋め込み（Notes）「全てのアイテム」を非表示にして「追加したアイテム」の幅を広げるボタン文字を埋め込んだ画像をアクションバーの背景に設定、列タイトルの表示をやめて高さを稼いだアイテムを完了にするボタン完了アイテムだけ表示するボタン選択したアイテムをリスト間で移動するボタン完了アイテムは文字色を変え、チェックマークも表示完了アイテムだけ表示できたらアイテムの並び替えは不要に

Slide 24

Slide 24 text

埋め込みフォルダ間で移動（Notes）アイテムのドラッグはできるけど隣のフォルダへドロップできなかった…

Slide 25

Slide 25 text

埋め込みフォルダ間で移動（Nomad Mobile） Nomad Mobileではドラッグすらできなかった…

Slide 26

Slide 26 text

初期バージョンの気に入らない点アクションバーへ文字を埋め込んだ画像を設定するのはやめたほうがよさそう… 埋め込みフォルダの高さを「ウィンドウに合わせる」に設定しても合ってくれず、フォームとフォルダの両方でスクロールが発生する場合がある完了アイテムの絞り込みが意外と面倒 ※完了アイテムを完了フォルダへ移動するアイデアがここで生まれた図柄が幅を占有するためタイトルとメモの文字が改行されすぎて高さが出てしまう

Slide 27

Slide 27 text

ドラッグで移動できないのは埋め込みフォルダだから？フレームセット内のフォルダ間では移動できたりして？

Slide 28

Slide 28 text

フレーム間ドラッグ試行バージョンの開発ドラッグ＆ドロップをテストするだけのDBを作りました

Slide 29

Slide 29 text

ドラッグできるけどドロップできなかった.. フレームセットのフレーム間で移動（Notes）

Slide 30

Slide 30 text

じゃあお決まりの作法でやるか…

Slide 31

Slide 31 text

フレーム内のフォルダからアウトラインのエントリへドラッグする構成で作成メールなど一般的なアプリケーションで実装されるドラッグ＆ドロップ移動可能な構成です。 ※これが現行バージョンです。

Slide 32

Slide 32 text

アウトラインエントリへ移動（Notes）上段フレーム（フォーム）中段フレーム（ページ内のアウトライン）下段フレーム（フォルダ）アイテムをドラッグ＆ドロップで移動できた

Slide 33

Slide 33 text

自動フレームの設定「持ち物リスト」フォームは、指定したフレームセット内のフレーム（前ページの上段フレーム）に自動でセットした状態で開く設定にしてます

Slide 34

Slide 34 text

アウトラインエントリへ移動（Nomad Mobile） Nomad Mobileではドラッグできなかった…

Slide 35

Slide 35 text

Nomad Mobile でドラッグ&ドロップしたいってアイデアあるじゃん… これに Vote して Nomad Mobileでのドラッグはあきらめようっと

Slide 36

Slide 36 text

ところで、スマホでは指先でアイテムをスワイプしてスイスイ移動できたら最高ですよね？ボタンのプロパティにある「スワイプ」って使えるの？コレ

Slide 37

Slide 37 text

KB0092728 に不具合記事あり… アイデアも投稿されてました。スワイプオプションはまだ使えません… このオプションが使えるようになることを心待ちにしてるユーザーここにいますよー興味あるKBの記事は Subscribeしましょうね

Slide 38

Slide 38 text

モバイルアクションの利用（Nomad Mobile）アクションバーの代わりにモバイルアクションを表示選択したアイテムにチェックを付けるエリアを表示選択したアイテムの色やスタイルを変えられると、このエリアはいらないんだけどなあ… アクションバーと列タイトルを表示しないことでリストが約2行分増える

Slide 39

Slide 39 text

「持ち物」フォルダのモバイルアクションモバイルアクションの利用（Nomad Mobile）「全アイテム」フォルダのモバイルアクション

Slide 40

Slide 40 text

アクションをアクションバー以外に表示「アクションをモバイルアクションに含める」を有効化「マウスの右ボタンメニューに含める」を有効化「アクションをアクションバーに含める」を無効化 Nomad Mobile にはメニューバー無いので「アクションメニューに含める」はオフでOK

Slide 41

Slide 41 text

右クリックメニューに追加したアクションだけ表示「マウスの右クリックメニューにデフォルトアイテムを表示」をオフにすると、メニューがシンプルになりますアクションバーのプロパティデフォルトではこのアプリに不要な機能が多いし誤操作のもとになりそう… Nomad Mobile ではアイテムを長押しすると右クリックメニューが表示されます

Slide 42

Slide 42 text

フォーム・エリアの省略（Nomad Mobile）上段を省略した状態（▼のタップで表示）上段を表示した状態（▲のタップで省略）リスト操作に集中したいときこのエリアは邪魔。もっとリストを表示したい 5行分増えた！

Slide 43

Slide 43 text

アイテムのフィルタリング（Nomad Mobile）標準の検索ボタン【アイテム登録画面】フィルタしたい単語を設定しておく調理器具だけ表示したいときは検索バーを表示して”調理器具”とタイプして検索します。検索にヒットしたアイテムにチェックが付きます。ここで[持ち物に追加する]をタップすると一度に追加できます。追加した検索アクション

Slide 44

Slide 44 text

文字をタイプするときソフトキーボードが画面占有するしタイプは多少面倒くさい絞り込みがアクションボタンでできればいいのに… けれど＠SetViewInfo([SetViewFilter]) コマンドは制限（次のページ）があって使えなかった…

Slide 45

Slide 45 text

@SetViewInfo([SetViewFilter])の改善要望 https://domino-ideas.hcltechsw.com/ideas/DDXP-I-887 カテゴライズしてない列や2列目以降の列を指定してフィルタリングしたい！という要望です。投票お願いします！

Slide 46

Slide 46 text

という訳で（少し思うところもあるけれど） iPhoneの Nomad Mobileでサクサク動作する Notesアプリができました。このアプリ開発で生まれたアイデアがいくつかあります。

Slide 47

Slide 47 text

このアプリ開発から生まれたアイデアビュー/フォルダで行を選択したとき、色やスタイルを変えられるオプションがほしい (DDXP-I-889) アイテムのドラッグでフォルダ内の並び順を変更できるオプションがほしい (DDXP-I-831) アクションバーへテキストをセットしたい。値は式でもセットできるようにしてほしい列タイトルのテキスト（値）を式でもセットできるようにしてほしいカテゴリがオフの列でもsetviewinfoでフィルタしたい (DDXP-I-887) アウトラインエントリを水平に並べた時、画面幅で自動調整するオプションがほしいモバイルアクションのアイコンを変更可能にしてほしい。アクションが 1つだけの場合はアクションに設定したアイコンを表示したい。

Slide 48

Slide 48 text

実は Domino Volt でもチャレンジ • データグリッドのフィルタリング不具合に遭遇… • Muuri.js のカンバン・グリッドをVoltアプリに組み込む方向で検討中ソートフィルタリングドラッグ&ドロップによる移動と並び替え選択してるアイテムのスタイル変更 KB0094684

Slide 49

Slide 49 text

以上です。ご清聴ありがとうございました。