tag:crieit.net,2005:https://crieit.net/tags/%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB/feed Crieitでタグ「シンプル」に投稿された最近の記事 2023-07-25T20:16:30+09:00 https://crieit.net/tags/%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB/feed tag:crieit.net,2005:PublicArticle/18538 2023-07-25T20:16:30+09:00 2023-07-25T20:16:30+09:00 https://crieit.net/posts/Lisble-64bfaf0e5e2b7 <h1 id="1. はじめに"><a href="#1.+%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">1. はじめに</a></h1> <p><strong>シンプルな買い物リスト・メモ - Lisble リスブル</strong><br /> アプリの解説・紹介をするために記事を書きました。</p> <p><strong>シンプルな買い物リスト</strong>のアプリです。メモ、ToDoアプリとしても機能します。<strong>ログイン・ユーザー登録不要、無料</strong>ですぐにご利用いただけます。</p> <p>「<strong>買い忘れ、衝動買い、同じものを買ってしまう、出先での在庫確認、ネットショップとの比較など</strong>」考える事が多く、余計な負担だったので、リストをつけることにより改善したいと思いました。<br /> <strong>購入履歴の保存機能</strong>は、<strong>在庫の備忘録</strong>にもなります。また買い物中の操作性を重視し、レイアウトの<strong>左/右切り替え</strong>が可能です。<br /> 事前に買うべきものをメモしておくことで、より計画的に買い物をして、結果的に節約につながります。</p> <h1 id="2. 買い物リストアプリ「Lisble リスブル 」について"><a href="#2.+%E8%B2%B7%E3%81%84%E7%89%A9%E3%83%AA%E3%82%B9%E3%83%88%E3%82%A2%E3%83%97%E3%83%AA%E3%80%8CLisble+%E3%83%AA%E3%82%B9%E3%83%96%E3%83%AB+%E3%80%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">2. 買い物リストアプリ「Lisble リスブル 」について</a></h1> <p><a target="_blank" rel="nofollow noopener" href="https://lisble.net/about/"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/2eb38bfc-0efc-d719-9baa-d0967308e507.png" alt="シンプルな買い物リスト-Lisble リスブル" width="350"></a></p> <p><strong>『<a target="_blank" rel="nofollow noopener" href="https://lisble.net/about/">買い物リスト・メモ - Lisble リスブル</a>』</strong><br /> <div class="table-responsive"><table> <thead> <tr> <th>iOS,PC</th> <th>Android</th> </tr> </thead> <tbody> <tr> <td><a src="https://lisble.net/about/" target="_blank" rel="noopener noreferrer" ><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/992c120a-33bd-48d1-93cd-d97fde42d22c.png" alt="シンプルな買い物リスト-Lisble リスブル" width="250"></a></td> <td><a src="https://play.google.com/store/apps/details?id=net.lisble.twa" target="_blank" rel="noopener noreferrer" ><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/f92cdde6-21d1-2d3f-b8bf-9fb72a74abde.png" width=230 alt="googlePlayバッジ" ></a></td> </tr> <tr> <td>iOS,PCの方は、PWAの為、メニューから <strong>｢ホーム画面に追加｣</strong> をお願いします。</td> <td>このアプリは Google Play で入手できます。</td> </tr> </tbody> </table></div></p> <h2 id="2-1. アプリの概要"><a href="#2-1.+%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%A6%82%E8%A6%81">2-1. アプリの概要</a></h2> <p>購入履歴が残せるシンプルな買い物リストのアプリです。メモ、ToDoアプリとしても機能します。<strong>ログイン・ユーザー登録不要、無料</strong>ですぐにご利用できます。</p> <div class="table-responsive"><table> <thead> <tr> <th>About</th> <th>List</th> <th>History</th> </tr> </thead> <tbody> <tr> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/01ff7a29-9672-8717-161b-807bfd85f014.png" alt="Aboutページのスクリーンショット.png" width="120" height=""></td> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/1e53b87e-f6d3-8ef8-8646-f66b8c02dbb2.png" alt="リストページのスクリーンショット" width="120" height=""></td> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/64e97b97-f950-2f48-e346-63a506643401.png" alt="履歴ページのスクリーンショット" width="120" height=""></td> </tr> </tbody> </table></div> <h2 id="2-2. アプリの3つの特徴"><a href="#2-2.+%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE3%E3%81%A4%E3%81%AE%E7%89%B9%E5%BE%B4">2-2. アプリの3つの特徴</a></h2> <p><strong>① 買い物中の操作性(UI,UX)</strong><br /> 片手操作での誤操作防止のため編集機能を片側に寄せ、かつ <strong>左/右 表示切替可能</strong>。<br /> チェックしたメモ、まだしていないメモを切り替え、すぐに確認できるようにしました。</p> <p><strong>② 購入履歴の保存</strong><br /> <strong>日付時間と共に保存</strong>をして、入力時に同一品目を色の変化でお知らせをします。<br /> 購入履歴を残すことにより、直近で購入したものがわかり、無駄な重複買いと共に在庫を思い出すきっかけにもなると思いました。</p> <p><strong>③ Amazon検索</strong><br /> 入力したメモをそのまま<strong>Amazon検索</strong>できます。買い物中の値段の比較や、欲しいものリストとしてご活用してもらえればと思いました。</p> <h2 id="2-3. アプリの画面案内"><a href="#2-3.+%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E7%94%BB%E9%9D%A2%E6%A1%88%E5%86%85">2-3. アプリの画面案内</a></h2> <div class="table-responsive"><table> <thead> <tr> <th></th> <th>スマホ</th> </tr> </thead> <tbody> <tr> <td>① <strong>購入履歴へ</strong> ② <strong>メニュー</strong>(移動・設定) ③ <strong>タブ切り替え</strong> ④ <strong>↑↓並べ替え</strong> ④ <strong>←色､→削除</strong> ⑤ <strong>編集</strong> ⑥ <strong>チェック</strong> ⑦ <strong>リスト追加</strong> ⑧ <strong>｢チェックあり｣のみ削除</strong> ⑨ <strong>すべて削除</strong></td> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/bb63d0a7-c937-4b2b-e913-8230c118d9fb.png" alt="スクリーンショット" width="350" height=""></td> </tr> </tbody> </table></div> <div class="table-responsive"><table> <thead> <tr> <th></th> <th>タブレット・PC</th> </tr> </thead> <tbody> <tr> <td>① <strong>編集</strong> ② <strong>色</strong> ③ <strong>削除</strong> ④ ↑↓ <strong>並べ替えのみ</strong></td> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/a75aec69-901c-d87e-0411-b5c40e23b409.png" alt="スクリーンショット" width="405" height=""></td> </tr> </tbody> </table></div> <h2 id="2-4. アプリの基本操作"><a href="#2-4.+%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C">2-4. アプリの基本操作</a></h2> <p>①②③これらの手順だけで簡単操作<br /> <div class="table-responsive"><table> <thead> <tr> <th></th> <th>基本操作</th> </tr> </thead> <tbody> <tr> <td>① <strong>リスト作成</strong> ② <strong>買い物完了でチェック</strong> ③ <strong>チェック済みを削除</strong> ※これらの手順だけで簡単操作</td> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/33bc7e8d-e258-bdbd-85e4-affb6c585cd9.gif" alt="買い物リスト-lisble リスブルの基本操作" width="160" ></td> </tr> </tbody> </table></div></p> <h2 id="2-5. アプリの機能一覧"><a href="#2-5.+%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%A9%9F%E8%83%BD%E4%B8%80%E8%A6%A7">2-5. アプリの機能一覧</a></h2> <div class="table-responsive"><table> <thead> <tr> <th>並び替え機能</th> <th>スワイプ</th> </tr> </thead> <tbody> <tr> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/30495dd3-fec4-c791-cb39-a1c09f78003d.gif" alt="買い物リスト-lisble リスブルの並べ替え動作" width="150" height=""></td> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/cb611a1f-9124-472b-1a26-b7c4f53f8ecc.gif" alt="買い物リスト-lisble リスブルのスワイプ動作" width="150" height=""></td> </tr> <tr> <td></td> <td>←<strong>色</strong>  →<strong>削除</strong>※ﾀｯﾁﾃﾞﾊﾞｲｽのみ</td> </tr> </tbody> </table></div> <div class="table-responsive"><table> <thead> <tr> <th>タブ切り替え</th> <th>Amazon検索</th> </tr> </thead> <tbody> <tr> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/db8c743b-1789-98a7-0c26-82adbef8733e.gif" alt="買い物リスト-lisble リスブルのタブ動作" width="150" height=""></td> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/e0d457fa-a1c3-3b28-b90e-fe67f86ffba6.png" alt="買い物リスト-lisble Amazon検索のイメージ" width="170" height=""></td> </tr> <tr> <td><strong>すべて、チェックあり、なし</strong></td> <td>そのまま<strong>Amazon検索</strong></td> </tr> </tbody> </table></div> <div class="table-responsive"><table> <thead> <tr> <th>購入履歴の保存</th> <th>重複買い防止</th> </tr> </thead> <tbody> <tr> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/4c03d104-0d05-234f-f56b-ff150451077a.gif" alt="買い物リスト-lisble リスブルの買い物履歴・削除動作" width="150" height=""></td> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/72a81f65-8c27-f1cb-84c5-74fbf3d8680b.gif" alt="買い物リスト-lisble リスブルの重複購入防止動作" width="150" height=""></td> </tr> <tr> <td><strong>1. チェックあり削除</strong> <strong>2. 購入履歴の保存</strong></td> <td>履歴と同じ品目を入力時に<strong>色の変化</strong>でお知らせ</td> </tr> </tbody> </table></div> <div class="table-responsive"><table> <thead> <tr> <th>続けて追加</th> <th>全削除</th> </tr> </thead> <tbody> <tr> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/93b63cdc-c10b-5f6c-c8c6-18bdfe229f2c.png" alt="追加ボタン" width="50" height=""></td> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/9e640615-6745-b110-9de7-37df2827ba6f.png" alt="全削除ボタン" width="100" height=""></td> </tr> <tr> <td><strong>＋ボタン、ENTERキｰ</strong></td> <td>チェック済みは<strong>購入履歴に保存</strong></td> </tr> </tbody> </table></div> <h2 id="2-6. アプリの設定"><a href="#2-6.+%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E8%A8%AD%E5%AE%9A">2-6. アプリの設定</a></h2> <div class="table-responsive"><table> <thead> <tr> <th>テーマカラー</th> <th>レイアウト</th> <th>多言語</th> </tr> </thead> <tbody> <tr> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/e1de9ced-0089-d47b-9108-45c7354bf927.png" alt="買い物リスト-lisble リスブルのテーマカラー5種" width="150" height=""></td> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/31cc5133-da53-b9e0-6419-6fbc7fe6fda6.png" alt="買い物リスト-lisble リスブルのレイアウトの左/右切り替え" width="150" height=""></td> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/f318e886-f667-3430-e50b-0a36c2eccb27.png" alt="買い物リスト-lisble リスブルの英語表示" width="129" height=""></td> </tr> <tr> <td>5種</td> <td>片手操作での誤操作防止(<strong>左利き</strong>)</td> <td><strong>日本語</strong> / <strong>英語</strong></td> </tr> </tbody> </table></div> <div class="table-responsive"><table> <thead> <tr> <th>自動削除</th> <th>入力中のEnterキー操作</th> </tr> </thead> <tbody> <tr> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/cca8e553-c7bf-fd06-99b6-c5fee6f0fa1b.png" alt="買い物リスト-lisble リスブルの自動削除機能" width="150" height=""></td> <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/63a179fc-2df2-5456-8ae4-d2565ed27ad9.png" alt="買い物リスト-lisble リスブルの入力中のEnterKeyの挙動" width="150" height=""></td> </tr> <tr> <td>終了時に｢<strong>チェックあり</strong>｣を<strong>自動削除(保存)機能</strong></td> <td><strong>追加</strong> / <strong>改行</strong> 切り替え</td> </tr> </tbody> </table></div> <hr /> <h1 id="3. 最後に"><a href="#3.+%E6%9C%80%E5%BE%8C%E3%81%AB">3. 最後に</a></h1> <p><strong>購入履歴</strong>が残せるシンプルな買い物リストアプリ 『<strong>買い物リスト - Lisble リスブル</strong>』 です。メモ、ToDoアプリとしても機能します。<br /> <strong>購入履歴の保存機能</strong>により、無駄な重複購入を防ぎ、在庫の備忘録にもなります。<br /> <strong>ログイン・ユーザー登録不要、無料</strong>ですぐにご利用いただけます。<br /> もしよかったら、触ってみてください。</p> <p><strong>『<a target="_blank" rel="nofollow noopener" href="https://lisble.net/about/">買い物リスト・メモ - Lisble リスブル</a>』</strong><br /> <div class="table-responsive"><table> <thead> <tr> <th>iOS,PC</th> <th>Android</th> </tr> </thead> <tbody> <tr> <td><a src="https://lisble.net/about/" target="_blank" rel="noopener noreferrer" ><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/992c120a-33bd-48d1-93cd-d97fde42d22c.png" alt="シンプルな買い物リスト-lisble リスブル" width="250"></a></td> <td><a src="https://play.google.com/store/apps/details?id=net.lisble.twa" target="_blank" rel="noopener noreferrer" ><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/f92cdde6-21d1-2d3f-b8bf-9fb72a74abde.png" width=230 alt="googlePlayバッジ" ></a></td> </tr> <tr> <td>iOS,PCの方は、PWAの為、メニューから <strong>｢ホーム画面に追加｣</strong> をお願いします。</td> <td>このアプリは Google Play で入手できます。</td> </tr> </tbody> </table></div></p> <hr /> <p>Google Play および Google Play ロゴは、Google LLC の商標です。</p> Arieight