tag:crieit.net,2005:https://crieit.net/tags/%E8%B2%B7%E3%81%84%E7%89%A9%E3%83%AA%E3%82%B9%E3%83%88/feed Crieitでタグ「買い物リスト」に投稿された最近の記事 2023-07-29T05:35:55+09:00 https://crieit.net/tags/%E8%B2%B7%E3%81%84%E7%89%A9%E3%83%AA%E3%82%B9%E3%83%88/feed tag:crieit.net,2005:PublicArticle/18544 2023-07-29T05:35:55+09:00 2023-07-29T05:35:55+09:00 https://crieit.net/posts/Nuxt3-Cloudflare-GooglePlay-64c426ab215c8 <h1 id="1. はじめに"><a href="#1.+%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">1. はじめに</a></h1> <p>個人開発の大体の流れがつかめるように、アイデア出しから公開・プロモーションまでをまとめました。</p> <h2 id="1-1. 作ったアプリ"><a href="#1-1.+%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA">1-1. 作ったアプリ</a></h2> <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> <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> <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><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> <h1 id="2. 0から公開までの流れ"><a href="#2.+0%E3%81%8B%E3%82%89%E5%85%AC%E9%96%8B%E3%81%BE%E3%81%A7%E3%81%AE%E6%B5%81%E3%82%8C">2. 0から公開までの流れ</a></h1> <h2 id="2-1. アイデア"><a href="#2-1.+%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2">2-1. アイデア</a></h2> <p>1番大事だけど一番頭を悩ませました。<br /> 新しいものか、既存のサービスでの差別化の二択で、はじめてということで後者にしてしまいました。<br /> これからもアンテナをはって次につなげたいです。</p> <p><strong>アイデアの出し方</strong><br /> * とにかく紙に書く<br /> * 不満・面倒・悩み・困っていること<br /> * 人間観察(周りの人)・他業種の業務課題<br /> * 真似 → シンプル化・別分野へ応用・既存のサービスの不満解消<br /> * 海外のサービス調査<br /> * ニッチ・マニアック(自分の強み・趣味)<br /> * 合体・逆</p> <p>既存のサービスの発展系か、何かの組み合わせか<br /> 思いついたらメモ 📝</p> <p><strong><em>参考サイト</em></strong><br /> <a target="_blank" rel="nofollow noopener" href="https://shuheblog.com/programing-app-idea-creative">アプリ開発でアイデアが浮かばないあなたへ。独創的なアイデアの出し方</a><br /> <a target="_blank" rel="nofollow noopener" href="https://qiita.com/MasatoraAtarashi/items/eec4642fe1e6ce79304d">ポートフォリオや個人開発で使えそうなアイデア</a></p> <h2 id="2-2. 要件定義"><a href="#2-2.+%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9">2-2. 要件定義</a></h2> <p><strong>①要件(こうだったらいいな)</strong><br /> * 出来る、出来ないを考えずあげていく</p> <p><strong>②要件の為の機能</strong><br /> * ここで出来る、出来ないを考える<br /> * 最低限必要な機能を絞る<br /> * 実装方法が思いつかない機能は省略</p> <hr /> <ul> <li>出先で「あれあったかな❓」を解決したい → 買い物履歴を残して最近買ったものをわかるようにする機能</li> <li>在庫の把握・重複購入を減らしたい → 買い物履歴から同じ単語入力時に色の変化で知らせる → 入力中に知らせることにより在庫を思い出すきっかけにもなる<br /> etc...</li> </ul> <p><strong>③出来ればマネタイズも考える</strong><br /> 1. <strong><em>広告</em></strong>：アフィリエイト､AdSense(web)､AdMob(アプリ)<br /> 2. <strong><em>課金</em></strong>：広告削除､追加コンテンツ､アイテム<br /> 3. <strong><em>寄付</em></strong><br /> 4. <strong><em>有料</em></strong>：買い切り<br /> 5. <strong><em>サブスク</em></strong>：月額制</p> <p>とにかく一連の流れを経験したく、マネタイズまでの道のりが見えたのが本アプリ案で、結果Amazonアソシエイト､AdSenseになりました。<br /> AdSenseは受かりませんでした。継続して挑戦します。</p> <p><strong>④利用技術</strong><br /> 🔑 <strong><em>ログイン・ユーザー登録無し</em></strong>、、広告も可でとにかく<strong><em>お金をかけずに</em></strong>を優先して、SPAで制作することにしました。<br /> - GooglePlay Developer 申請・登録25ドル(当時3,352円)<br /> - 独自ドメイン Xserverドメイン 初年度のみ1円<br /> - 更新、移管はCloudflare予定</p> <p><strong><em>アイデア・デザイン</em></strong><br /> Xmind(マインドマッピング)<br /> Figma<br /> <strong><em>コード</em></strong><br /> Nuxt3(Composition API)・TypeScript・Tailwind CSS<br /> <strong><em>インフラ</em></strong><br /> Cloudflare<br /> <strong><em>開発環境</em></strong><br /> VSCode・Git、GitHub</p> <p><strong><em>参考サイト</em></strong><br /> <a target="_blank" rel="nofollow noopener" href="https://tenshoku-miti.com/takahiro/create-original-application/">【5ステップ】初めてのオリジナルアプリの作り方！アイデアの出し方も公開</a></p> <h2 id="2-3. 設計"><a href="#2-3.+%E8%A8%AD%E8%A8%88">2-3. 設計</a></h2> <p><strong>①画面設計</strong><br /> 1. 必要なﾍﾟｰｼﾞ列挙 ➡ 階層・整理<br /> 2. ワイヤーフレーム(紙手書き)下書き<br /> 3. ワイヤーフレーム(figma)清書</p> <p><strong><em>参考サイト</em></strong><br /> <a target="_blank" rel="nofollow noopener" href="https://b-risk.jp/blog/2019/10/wireframe/">ワイヤーフレーム(画面設計)の作り方</a><br /> <a target="_blank" rel="nofollow noopener" href="https://aqcg.jp/web_point/">Web画面設計の手順と重要なポイント</a></p> <p><strong>デザインの４原則</strong><br /> 1. ｢<strong><em>近接</em></strong>｣：関連する要素を<strong><em>グループ化</em></strong><br /> 2. ｢<strong><em>整列</em></strong>｣：関連する要素を<strong><em>見えない線</em></strong>で整列<br /> 3. ｢<strong><em>反復</em></strong>｣：要素の<strong><em>一貫性</em></strong>、デザインの<strong><em>統一</em></strong><br /> 4. ｢<strong><em>対比</em></strong>｣：要素の優先度を<strong><em>強弱</em></strong>で示す</p> <p><strong><em>参考サイト</em></strong><br /> <a target="_blank" rel="nofollow noopener" href="https://designpartner.jp/principle/#:~:text=%E3%80%8C%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE4%E5%8E%9F%E5%89%87%E3%80%8D%E3%81%AF,%E3%82%B7%E3%83%BC%E3%83%B3%E3%81%A7%E3%82%82%E5%BD%B9%E7%AB%8B%E3%81%A4%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%80%82">お役立ち知識：デザインの4原則 - デザインパートナー</a></p> <p><strong>②データ設計(構造)</strong><br /> * データの設計図</p> <h2 id="2-4. 開発"><a href="#2-4.+%E9%96%8B%E7%99%BA">2-4. 開発</a></h2> <ul> <li>設計通りに作る</li> <li>最低限の機能</li> <li>制作途中で機能の追加案を我慢して、とにかく完成させることに集中する(追加の機能を制作してしまいました。なのでここに残しておきます。)</li> </ul> <p><strong>①工夫した機能</strong><br /> - <strong>並べ替え(D&D)・スワイプ機能</strong>をライブラリ(Vue.Draggableは､思うような機能にならなかった)を使用せずに作成<br /> - ↳シンプル化のため､<strong>同じ発火点</strong>で､<strong>参考サイト様</strong>(<a target="_blank" rel="nofollow noopener" href="https://reffect.co.jp/vue/trello-drag-drop-clone/">Trello風タスク並び替えドラッグ&ドロップクローン(Vue.js利用)</a>)を参考に､【<strong>マウス、タッチ、処理回数削減、d&dとswipeの融合、グループ間並べ替え、d&d中の上下の画面端scroll</strong>】ロジックを考え自作しました。</p> <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> <ul> <li>スマホとPCの<strong>挙動の違い</strong>など(ENTER､終了時の処理...)</li> <li>日本､世界の<strong>日時の表示形式</strong>(履歴)</li> <li>Amazonアソシエイトの各国の設定(<strong><em>OneLink</em></strong>)</li> <li>アニメーション(数字のドラムロール、追加削除時...)etc...</li> </ul> <p><strong>②多言語化(i18n)</strong><br /> <strong>@intlify/nuxt3</strong>使用<br /> 日/英で単語の長さの違いによる表示崩れに注意</p> <hr /> <p><strong><em>未解決問題</em></strong><br /> 日本語で検索時、検索結果が英語サイトのtitleとdescriptionになってしまう問題(同じURLで 日/英 にしたい)</p> <p><strong><em>確認</em></strong><br /> meta tagの設定(title、description等)日/英 切替時にきちんと切り替わっている。</p> <p><strong><em>↓ためしたこと↓</em></strong><br /> - <a target="_blank" rel="nofollow noopener" href="https://zenn.dev/koushikagawa/articles/32ef098e0698c7">Nuxt.jsのi18n多言語対応したら、日本語で検索した時の検索結果が英語になってしまった。解決できたので対応方法を記載します。</a><br /> - <strong>@intlify/nuxt3</strong> で <code>detectBrowserLanguage: false,</code>にあたる設定がない??<br /> - sitemapの設定 (hreflang属性)<br /> - Google Search Consoleに日/英を認識させる方法??...<br /> - (2023年7月) Nuxt3での多言語化はまだ開発中らしいので情報待ち🍥 → <a target="_blank" rel="nofollow noopener" href="https://github.com/intlify/nuxt3">intlify/nuxt3: Nuxt 3 Module for vue-i18n-next</a></p> <hr /> <p><strong>③プライバシーポリシー</strong><br /> <strong><em>参考サイト</em></strong><br /> <a target="_blank" rel="nofollow noopener" href="https://biz.moneyforward.com/contract/basic/1237/">プライバシーポリシーとは何か？必要性、記載事項をわかりやすく解説</a></p> <p><strong>④テスト</strong><br /> - 個人情報を扱っているなら､徹底的に安全確認<br /> - 例外処理</p> <h2 id="2-5. 公開"><a href="#2-5.+%E5%85%AC%E9%96%8B">2-5. 公開</a></h2> <p><strong>①(SPA SSG) 静的ファイルホスティングサービス【無料】</strong><br /> 1. GitHub Pages<br /> 2. Firebase Hosting<br /> 3. Netlify<br /> 4. Vercel<br /> 5. <strong><em>Cloudflare Pages</em></strong></p> <p>無料プランの枠・サイトのパフォーマンス・商用利用可で<strong><em>Cloudflare Pages</em></strong></p> <p><strong><em>参考サイト</em></strong><br /> <a target="_blank" rel="nofollow noopener" href="https://zenn.dev/catnose99/scraps/6780379210136f">Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる</a><br /> <a target="_blank" rel="nofollow noopener" href="https://jpsern.com/netlify-to-cloudflare-pages/">NetlifyからCloudflare Pagesに引っ越しました</a></p> <p><strong>②Google Play Store 配信方法</strong><br /> <strong><em>PWA → TWA</em></strong><br /> * TWA変換ツール「<strong><em>Bubblewrap CLI</em></strong>」使用<br /> * Lighthouse で <strong><em>80</em></strong> 以上のパフォーマンス スコアが必要(↓に記述)</p> <p><strong><em>参考サイト</em></strong><br /> <a target="_blank" rel="nofollow noopener" href="https://flaming.codes/ja/posts/trusted-web-activity-create-pwa-android-app">信頼できるWebアクティビティ</a><br /> <a target="_blank" rel="nofollow noopener" href="https://0115765.com/archives/7932#outline__2_2">【TWA】完全開発ガイド＝超簡単にPWAをPlay Storeで配信しよう</a><br /> <a target="_blank" rel="nofollow noopener" href="https://sqripts.com/2022/12/14/22480/">PWA対応サイトをAndroid APK（AAB）に変換する</a></p> <p><strong>③Lighthouse のパフォーマンス改善(リファクタリング)</strong><br /> - <strong><em>cssの最適化</em></strong> → 読み込み順､削除､animation(<code>transform</code>,<code>opacity</code>...)etc...<br /> - <strong><em>googleFonts, Analytics</em></strong> → GTM使用､読み込むタイミング､読み込み方､文字の限定etc...<br /> - <a target="_blank" rel="nofollow noopener" href="https://deep-space.blue/web/2090">【2022年3月】Google Fontsのパフォーマンス比較＆ハリー・ロバーツ方式の勝手に改良版</a><br /> - <a target="_blank" rel="nofollow noopener" href="https://nullnull.dev/blog/google-fonts-subset/#%F0%9F%8F%A9______________________%F0%9F%91%A8%F0%9F%91%A9">Google Fontsを簡単にサブセット化する方法</a><br /> - <strong><em>Web Worker</em></strong> → 並列処理 <a target="_blank" rel="nofollow noopener" href="https://note.com/npaka/n/nc930b61840ac">Web Workerの使い方</a><br /> - <code>requestAnimationFrame()</code> → 「60fps」 <a target="_blank" rel="nofollow noopener" href="https://www.webdesignleaves.com/pr/jquery/requestAnimationFrame.html">requestAnimationFrame の使い方</a><br /> etc...</p> <p>Mobile :arrow_down:<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/ea2d91d0-76be-ff81-0c8f-ee55669bf1e6.png" alt="Lighthouseモバイルのスコア" width="500" height=""><br /> Desktop :arrow_down:<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/23080b76-e970-9ecb-b92d-3f873b2878e7.png" alt="Lighthouseデスクトップのスコア" width="500" height=""></p> <h2 id="2-6. リリース後"><a href="#2-6.+%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E5%BE%8C">2-6. リリース後</a></h2> <p><strong>①掲載用スクリーンショット、画像作成</strong><br /> * figma制作<br /> * サイトにより、サイズ、比率、枚数、が異なる</p> <p><strong>②登録サイトに投稿/掲載依頼</strong><br /> 当たって砕けろ、チャレンジ精神で色々掲載依頼を出してみた結果です。<br /> <a target="_blank" rel="nofollow noopener" href="https://zenn.dev/yamatake/articles/b93d87ed134f31">個人開発者に告ぐ！「告知＝恥ずかしい」を脱却しよう～実例データから重要性を解説</a></p> <p><strong><em>登録or掲載</em></strong> → 🎉<br /> メール・問い合わせ反応待ち → 📧<br /> 更新が止まっているサイトが多い</p> <p><strong>日本</strong><br /> - <a target="_blank" rel="nofollow noopener" href="https://app-liv.jp/5347459/"><strong><em>Appliv</em></strong></a> → 🎉 <strong><em>レビュー</em></strong>、とても丁寧な対応 :thumbsup:<br /> - <a target="_blank" rel="nofollow noopener" href="https://applion.jp/android/app/net.lisble.twa/"><strong><em>APPLION</em></strong></a> → 🎉 ランキング<br /> - <a target="_blank" rel="nofollow noopener" href="http://houkago-no.appspot.com/app_detail/6278466848686080"><strong><em>放課後ｱﾌﾟﾘ部</em></strong></a> →🎉 登録<br /> - <a target="_blank" rel="nofollow noopener" href="https://applishow.com/detail/DsL3Q4b5hxxm/"><strong><em>Applishow</em></strong></a> → 🎉 登録<br /> - <a target="_blank" rel="nofollow noopener" href="https://www.approom.me/app/01H2J1N7SXF5JSH8ZMMDMGBF2V?platform_id=2"><strong><em>AppRoom</em></strong></a> → 🎉 登録 <a target="_blank" rel="nofollow noopener" href="https://www.approom.me/articles/01H2JGWJ3K3J72WVN7EJT5CKYD"><strong><em>アプリ記事掲載</em></strong></a><br /> - <a target="_blank" rel="nofollow noopener" href="https://seekups.seekgeeks.net/views/detail.html?id=712"><strong><em>SeekUps</em></strong></a> → 🎉 登録<br /> - <a target="_blank" rel="nofollow noopener" href="https://rrws.info/archives/3197"><strong><em>ロケットリリース</em></strong></a> → 🎉 登録<br /> - <a target="_blank" rel="nofollow noopener" href="https://appstimes.jp/posts/2991"><strong><em>Appstimes</em></strong></a> → 🎉 登録<br /> - <a target="_blank" rel="nofollow noopener" href="https://anymake.app/products/kAjQm0f6tswHGaKTd0G5"><strong><em>AnyMake</em></strong></a> → 🎉 登録<br /> - <a target="_blank" rel="nofollow noopener" href="https://www.makepost.net/projects/386"><strong><em>makepost</em></strong></a> → 🎉 登録<br /> - <a target="_blank" rel="nofollow noopener" href="https://www.mitsukarusite.jp/2023/06/550/"><strong><em>MITSUKARU!</em></strong></a> → 🎉 登録<br /> - <a target="_blank" rel="nofollow noopener" href="https://devhaunt.com/product/111"><strong><em>DevHaunt!</em></strong></a> →🎉 登録、とても丁寧な対応 👍<br /> - <a target="_blank" rel="nofollow noopener" href="https://kojin.dev/application/41"><strong><em>個人dev</em></strong></a> → 🎉 登録<br /> - <a target="_blank" rel="nofollow noopener" href="https://appget.com/c/developerpage/createdevpost/"><strong><em>アプリゲット</em></strong></a> → ゲームのみ<br /> - <a target="_blank" rel="nofollow noopener" href="https://www.appbank.net/"><strong><em>AppBank</em></strong></a> → 📧<br /> - <a target="_blank" rel="nofollow noopener" href="https://applision.com/review/"><strong><em>Applision</em></strong></a> → 📧<br /> - <a target="_blank" rel="nofollow noopener" href="https://tsukulog.work/"><strong><em>ツクログ</em></strong></a> → 📧 クリエイター登録済み､まだ作品は掲載されない(2度投稿)<br /> - <a target="_blank" rel="nofollow noopener" href="https://octoba.net/"><strong><em>octoba</em></strong></a> → 📧<br /> - <a target="_blank" rel="nofollow noopener" href="https://newlaun-ch.com/"><strong><em>NewLaun-ch</em></strong></a> → 📧<br /> - <a target="_blank" rel="nofollow noopener" href="https://appllio.com/"><strong><em>appllio</em></strong></a> → 📧<br /> - <a target="_blank" rel="nofollow noopener" href="https://appnavi.info/"><strong><em>appnavi</em></strong></a> → 📧<br /> - <a target="_blank" rel="nofollow noopener" href="https://androlion.org/"><strong><em>Androライオン</em></strong></a> → 📧条件:レビュー<br /> - <a target="_blank" rel="nofollow noopener" href="https://androrank.com/?m=send"><strong><em>AndroRank</em></strong></a> → 📧条件:レビュー<br /> - <a target="_blank" rel="nofollow noopener" href="https://android-apps.org/"><strong><em>Androidアップス</em></strong></a> → 📧<br /> - <a target="_blank" rel="nofollow noopener" href="https://softcollection.org/android/"><strong><em>Androidコレクション</em></strong></a> → 📧<br /> - <a target="_blank" rel="nofollow noopener" href="https://news.mynavi.jp/top/notice/press/"><strong><em>マイナビニュース</em></strong></a> → 📧<br /> - <a target="_blank" rel="nofollow noopener" href="https://corp.itmedia.co.jp/pr/"><strong><em>ITmedia</em></strong></a> → 📧<br /> - <a target="_blank" rel="nofollow noopener" href="https://corp.itmedia.co.jp/media/pr/"><strong><em>ITmedia ねとらぼ</em></strong></a> → 📧<br /> - <a target="_blank" rel="nofollow noopener" href="https://androck.jp/contact/"><strong><em>AndRock</em></strong></a> → 📧<br /> - <a target="_blank" rel="nofollow noopener" href="http://app-vip.jp/posts/add"><strong><em>AppVIP</em></strong></a> → 📧<br /> - <a target="_blank" rel="nofollow noopener" href="https://applink.jp/request"><strong><em>AppLink</em></strong></a> → 📧<br /> - <a target="_blank" rel="nofollow noopener" href="https://www.gapsis.jp/"><strong><em>GAPSIS</em></strong></a> → 📧</p> <hr /> <p><strong>海外</strong></p> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://www.producthunt.com/my/products"><strong><em>Product Hunt</em></strong></a> → 🎉 登録から１週間待つ必要がある</li> <li><a target="_blank" rel="nofollow noopener" href="https://alternativeto.net/software/shopping-list--lisble/about/"><strong><em>AlternativeTo</em></strong></a> → 🎉 登録</li> <li><a target="_blank" rel="nofollow noopener" href="https://appstoreapps.com/submit-your-app/"><strong><em>app store apps</em></strong></a> → 📧</li> <li><a target="_blank" rel="nofollow noopener" href="https://www.appcraver.com/contact-us/"><strong><em>AppCraver</em></strong></a> → 📧</li> <li><a target="_blank" rel="nofollow noopener" href="https://arstechnica.com/contact-us/"><strong><em>arttechnica</em></strong></a> → 📧</li> <li><a target="_blank" rel="nofollow noopener" href="https://www.androidappsreview.com/submit-your-android-app/"><strong><em>Apps Review</em></strong></a> → 📧</li> <li><a target="_blank" rel="nofollow noopener" href="https://androidcommunity.com/send-tips/"><strong><em>community</em></strong></a> → 📧</li> <li><a target="_blank" rel="nofollow noopener" href="http://www.androidapplog.com/suggest-app/"><strong><em>App Log</em></strong></a> → 📧</li> <li><a target="_blank" rel="nofollow noopener" href="https://getandroidstuff.com/submit-app/"><strong><em>Get Android Stuff</em></strong></a> → 📧</li> <li><a target="_blank" rel="nofollow noopener" href="https://www.androidguys.com/request-app-review/"><strong><em>Android Guys</em></strong></a> → 📧</li> <li><a target="_blank" rel="nofollow noopener" href="https://www.androlib.com/"><strong><em>androlib</em></strong></a> → 📧</li> <li><a target="_blank" rel="nofollow noopener" href="https://www.apkmirror.com/"><strong><em>APKMirror</em></strong></a> → 📧</li> <li><a target="_blank" rel="nofollow noopener" href="http://appscout.pcmag.com/"><strong><em>PCMag</em></strong></a> → 📧</li> <li><a target="_blank" rel="nofollow noopener" href="https://www.newsreports.com/contact/"><strong><em>NEWSREPORTS</em></strong></a> → 📧</li> <li><a target="_blank" rel="nofollow noopener" href="https://www.ifanzine.com/contact/"><strong><em>iFanzine</em></strong></a> → 📧</li> </ul> <hr /> <p>※上記以外で無料で宣伝できるサイト、方法があれば教えていただけると嬉しいです。</p> <p><strong>③記事を書く</strong><br /> - Qiita<br /> - <a target="_blank" rel="nofollow noopener" href="https://qiita.com/arieight/items/7935afdaf78d31f8b444">【Nuxt3】はじめての個人開発「買い物リストアプリ」開発記録</a><br /> - Zenn<br /> - <a target="_blank" rel="nofollow noopener" href="https://zenn.dev/arieight/articles/55ec7a38edb940">Nuxt3で初めての個人開発記録【買い物リストアプリ】</a><br /> - Crieit<br /> - <a href="https://crieit.net/posts/Lisble-64bfaf0e5e2b7">シンプルな買い物リストアプリ「lisble リスブル 」の紹介</a><br /> - 【個人開発】アイデア出しから公開・プロモーションまでまとめ(Nuxt3、Cloudflare、GooglePlay)<br /> - note<br /> - <a target="_blank" rel="nofollow noopener" href="https://note.com/arieight/n/nc8cace276feb">値上げ対策！ 買い物リスト作成で節約</a><br /> - <a target="_blank" rel="nofollow noopener" href="https://note.com/arieight/n/ne70e5e3865f3">シンプルな買い物リストアプリ「Lisble リスブル 」のご紹介</a><br /> - Medium(英語記事)<br /> - <a target="_blank" rel="nofollow noopener" href="https://medium.com/@arieight_8/price-increase-measures-save-money-by-making-a-shopping-list-120cec400b15">Price increase measures! Save money by making a shopping list</a></p> <p><strong>④Twitter(日本語/英語)</strong><br /> - Twitter日本語ver.：<a target="_blank" rel="nofollow noopener" href="https://twitter.com/arieight_8">@arieight_8</a><br /> - Twitter英語ver.：<a target="_blank" rel="nofollow noopener" href="https://twitter.com/Lisble_en">@Lisble_en</a><br /> - 登録or掲載 → つぶやく<br /> - 機能一覧、設定一覧、動画(gif)でツイート<br /> - 開発中からつぶやいた方が良い</p> <p><strong><em>参考サイト</em></strong><br /> <a target="_blank" rel="nofollow noopener" href="https://www.producthunt.com/posts/shopping-list-lisble">個人開発したWebサービスをリリースした後にやったこと / やり続けていること</a></p> <h1 id="3. 気付き・反省点・まとめ"><a href="#3.+%E6%B0%97%E4%BB%98%E3%81%8D%E3%83%BB%E5%8F%8D%E7%9C%81%E7%82%B9%E3%83%BB%E3%81%BE%E3%81%A8%E3%82%81">3. 気付き・反省点・まとめ</a></h1> <ul> <li>開発を0からして、初めてコードをさわって新しい概念にふれた時くらい勉強になり、とても知見が広がり良かったです。</li> <li>プログラミング以外の作業が初だったので「プログラミング：他 ＝ 3：7」くらいの感覚でした。様々なデザインが予想より大変でした。</li> <li>一番面白いと感じた作業は、ロジックを考えて形になった時でした。<br />  </li> <li><strong>アイデア</strong> → 紙やXMindに思いつく限りまとめたのですが、総合的な判断で結局既存のサービスに追加機能の方向になってしまいました。マネタイズまで含めたアイデアが難しいです。どうせやるなら一通りやってみたかったので次回以降にしました。常にアンテナをはって知見を広げていいこうと思いました。</li> <li><strong>要件定義</strong> → 運用費がかからない、個人情報は扱わない、AdSense以外のマネタイズまで考える､などを考慮してアイデアを絞り、考え、すでにあるサービスと見比べ、アイデアと要件定義をぐるぐるしていました。</li> <li>AdSenseは、コンテンツ不足でwebアプリは受かりづらいらしいです。</li> <li><strong>利用技術</strong> → 平凡なアイデアだったので初めて挑戦する技術(Nuxt3､TypeScript､etc...)を使用してしまいました。</li> <li>デプロイ先など、お金をかけずに運用していくための他の効率の良い方法やサービスを引き続き調査していきます。(Firebaseをﾃﾞｰﾀﾍﾞｰｽ等)</li> <li><strong>設計</strong> → 画面デザインは、UI足したら引き算・データ設計は構造整理</li> <li><strong>開発</strong> → 追加の機能を制作してしまいました。最低限の機能でまず完成を目指すべき</li> <li><strong>工夫した機能</strong> → ToDoの変化型アプリで平凡なアプリで非常に多く数があるため、機能にこだわりました。</li> <li>多言語化して作業が増えた。[Amazon設定､時間形式､表示崩れ､metaタグ､etc...]</li> <li><strong>テスト</strong> → 多視点が重要</li> <li><strong>公開</strong> → 運用費をかけないにこだわる</li> <li><strong>パフォーマンス改善</strong> → 良い学習</li> <li><strong>マネタイズ</strong> → Amazonまでの導線が弱い 要検討</li> <li>著作権・プライバシーポリシー・DDoS対策etc...</li> <li><strong>プロモーション</strong> → Twitterは開発中から・アイデア段階でSNSを考慮したサービス・地道にor金をかけるか・個人の場合限られるので勉強段階からブログや記事など書いておけばまた違ったかも</li> <li>「告知＝恥ずかしい」があったので、経験せずにはわからないからできることは全部しようと思いました。</li> </ul> <p>作る前に想像していたよりコード以外の作業が多いとうことに改めて気付かされました。<br /> 制作中、何度も宇宙兄弟のセリフが脳内再生してました。ありがとうございました。</p> <hr /> <blockquote> <p>「また積めばいいよ」<br /> 「次はもっと上手く積めるようになってるよ」<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/54752648-2273-f10c-d125-ea6abc68e562.jpeg" alt="『宇宙兄弟』17巻 小山 宙哉「また積めばいいよ」" width="300"><br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/9d577b8b-90ef-2e69-8d2b-2e67ebfb9794.jpeg" alt="『宇宙兄弟』17巻 小山 宙哉「次はもっと上手く積めるようになってるよ」" width="300"><br /> 出典: 『宇宙兄弟』17巻 小山 宙哉（講談社、2012年3月23日第1発行）</p> </blockquote> <hr /> <p>購入履歴が残せるシンプルな買い物リストアプリ <strong><em>『買い物リスト - Lisble リスブル』</em></strong> です。メモ、ToDoアプリとしても機能します。<br /> 購入履歴の保存機能により、無駄な重複購入を防ぎ、在庫の備忘録にもなります。<br /> ログイン・ユーザー登録不要、無料ですぐにご利用いただけます。<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> <p>Twitter:<a target="_blank" rel="nofollow noopener" href="https://twitter.com/arieight_8">＠arieight_8</a></p> <hr /> <p>Google Play および Google Play ロゴは、Google LLC の商標です。</p> Arieight 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