【Nuxt3】はじめての個人開発「買い物リストアプリ」開発記録

# 目次
[1. はじめに](#1-はじめに)
[2. つくったアプリについて](#2-つくったアプリについて)
[3. 0から公開までの流れ](#3-0から公開までの流れ)
[4. 気付き・反省点・まとめ](#4-気付き反省点まとめ)

***

# 1. はじめに

はじめて個人開発をした記録になります。
アプリの解説・紹介をするために記事を書きました。
また個人開発する際のおおまかな流れを記録しています。


# 2. つくったアプリについて
[2-1. アプリの概要](#2-1-アプリの概要)
[2-2. アプリの3つの特徴](#2-2-アプリの3つの特徴)
[2-3. アプリの画面案内](#2-3-アプリの画面案内)
[2-4. アプリの基本操作](#2-4-アプリの基本操作)
[2-5. アプリの機能一覧](#2-5-アプリの機能一覧)
[2-6. アプリの設定](#2-6-アプリの設定)

[<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/2eb38bfc-0efc-d719-9baa-d0967308e507.png" alt="シンプルな買い物リスト-lisble リスブル" width="350">](https://lisble.net/about/)

***『[買い物リスト・メモ - Lisble リスブル](https://lisble.net/about/)』***  
このアプリは Google Play で入手できます。
iOS,PCの方は、PWAの為、メニューから<font color='red'>｢ホーム画面に追加｣</font>をお願いします。
<table>
<tr>
<th>
<table>
<tr>
<th valign="top">iOS,PC</th>
<th><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></th>
</tr>

</table>
</th>
<th>
<table>
<tr valign="top">
<th >Android</th>
<th><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></th>
</tr>
</table>
</th>
</tr>
</table>


## 2-1. アプリの概要

購入履歴が残せるシンプルな買い物リストのアプリです。メモ、ToDoアプリとしても機能します。ログイン・ユーザー登録不要、無料ですぐにご利用できます。

<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="">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/1e53b87e-f6d3-8ef8-8646-f66b8c02dbb2.png" alt="リストページのスクリーンショット" width="120" height="">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/64e97b97-f950-2f48-e346-63a506643401.png" alt="履歴ページのスクリーンショット" width="120" height="">

## 2-2. アプリの3つの特徴

***① :iphone:買い物中の操作性(UI,UX)***
片手操作での誤操作防止のため編集機能を片側に寄せ、かつ左/右 表示切替可能に。
チェックしたメモ、まだしていないメモを切り替え、すぐに確認できるようにしました。

***② :stopwatch:購入履歴の保存***
日付時間と共に保存をして、入力時に同一品目を色の変化でお知らせをします。
購入履歴を残すことにより、直近で購入したものがわかり、無駄な重複買いと共に在庫を思い出すきっかけにもなると思いました。

***③ :shopping_bags:Amazon検索***
入力したメモをそのままAmazon検索できます。買い物中の値段の比較や、欲しいものリストとしてご活用してもらえればと思いました。

## 2-3. アプリの画面案内

<table>
<tr><th>スマホ<ol><li>購入履歴ページ</li><li>メニュー(ページ・設定)</li><li>タブ切り替え</li><li>:arrow_up_down:並べ替え<br>:arrow_left:色､:arrow_right:削除</li><li>編集</li><li>チェック</li><li>リスト追加</li><li>｢チェックあり｣のみ削除</li><li>すべて削除</li></ol></th>
<th><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/bb63d0a7-c937-4b2b-e913-8230c118d9fb.png" alt="スクリーンショット" width="350" height=""></th></tr>
</table>
</th><th>
<table>
<table>
<tr><th>タブレット・PC<ol><li>編集</li><li>色</li><li>削除</li><li>:arrow_up_down:<font color='green'> 並べ替えのみ</font></li></ol></th>
<th><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/a75aec69-901c-d87e-0411-b5c40e23b409.png" alt="スクリーンショット" width="405" height=""></th></tr>
</table>
</th><th>
<table>



## 2-4. アプリの基本操作

<table>
<tr><th>
1. リスト作成<br>
2. 買い物完了でチェック<br>
3. チェック済みを削除<br><br>これらの手順だけで簡単操作
</th><th>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/33bc7e8d-e258-bdbd-85e4-affb6c585cd9.gif" alt="買い物リスト-lisble リスブルの基本操作" width="160" >
</th></tr>
</table>


## 2-5. アプリの機能一覧

<table>
<tr><th>
<table>
<tr><th>並び替え機能<br>:arrow_up_down:</th>
<th><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=""></th></tr>
</table>
</th><th>
<table>
<tr><th>スワイプ<br>
 :arrow_left:カラー<br>:arrow_right:削除<br></th>
<th><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="">
</th></tr>
</table>※ﾀｯﾁﾃﾞﾊﾞｲｽのみ
</th></tr>
</table>

<table>
<tr><th>
<table>
<tr><th>タブ切り替え
<ul><li>すべて</li><li>チェックあり</li><li>なし</li></ul></th><th>
<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="">
</th></tr>
</table>
</th><th>
<table>
<tr>
<th>Amazon検索</th>
<th><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="">
</th></tr>
</table>
</th></tr>
</table>

<table>
<tr><th>
<table>
<tr><th>チェックあり削除<br>↓<br>購入履歴の保存</th><th>
<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="">
</th></tr>
</table>
</th><th>
<table>
<tr><th>入力時<br>履歴と同じ品目を<br>色の変化でお知らせ</th><th>
<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="">
</th></tr>
</table>
</th></tr>
</table>

<table>
<tr><th>
<table>
<tr><th>続けて追加<br>・＋ボタン<br>・ENTERキｰ</th><th>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/93b63cdc-c10b-5f6c-c8c6-18bdfe229f2c.png" alt="追加ボタン" width="50" height="">
</th></tr>
</table>
</th><th>
<table>
<tr><th>全削除</th><th>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/9e640615-6745-b110-9de7-37df2827ba6f.png" alt="全削除ボタン" width="100" height="">
</th></tr>
</table>
</th></tr>
</table>

## 2-6. アプリの設定

<table>
<tr><th>
<table>
<tr><th>テーマカラー</th>
<th><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=""></th></tr>
</table>
</th><th>
<table>
<tr><th>レイアウト<br>
・片手操作での誤操作防止</th>
<th><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="">
</th></tr>
</table>
</th></tr>
</table>

<table>
<tr><th>
<table>
<tr><th>アプリ終了時<br>｢チェックあり｣<br>自動削除機能<br>on/off</th>
<th><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=""></th></tr>
</table>
</th><th>
<table>
<tr><th>日本語/英語</th>
<th><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="">
</th></tr>
</table>
</th></tr>
</table>

<table>
<tr><th>入力中のEnterキー<br>追加<br>&nbsp;↓↑<br>改行</th>
<th><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=""></th></tr>
</table>
</th><th>
<table>

iOS､PC: https://lisble.net/about/
PWAの為、メニューから「ホーム画面に追加」をお願いします。  

Android: https://play.google.com/store/apps/details?id=net.lisble.twa

***

# 3. 0から公開までの流れ
[3-1. アイデア](#3-1-アイデア)
[3-2. 要件定義](#3-2-要件定義)
[3-3. 設計](#3-3-設計)
[3-4. 開発](#3-4-開発)
[3-5. 公開](#3-5-公開)
[3-6. リリース後](#3-6-リリース後)

## 3-1. アイデア
1番大事だけど一番頭を悩ませました。
新しいものか、既存のサービスでの差別化の二択で、はじめてということで後者にしてしまいました。
これからもアンテナをはって次につなげたいです。

<details>
    <summary><b>アイデアの出し方</b></summary>

* とにかく紙に書く:writing_hand:
  * 不満・面倒・悩み・困っていること
  * 人間観察(周りの人)・他業種の業務課題
  * 真似 → シンプル化・別分野へ応用・既存のサービスの不満解消
  * 海外のサービス調査
  * ニッチ・マニアック(自分の強み・趣味)
  * 合体・逆


既存のサービスの発展系か、何かの組み合わせか
思いついたらメモ:pencil:

***
</details>

***参考サイト***
[アプリ開発でアイデアが浮かばないあなたへ。独創的なアイデアの出し方](https://shuheblog.com/programing-app-idea-creative)  
[ポートフォリオや個人開発で使えそうなアイデア](https://qiita.com/MasatoraAtarashi/items/eec4642fe1e6ce79304d)

## 3-2. 要件定義

### ①要件(こうだったらいいな)
* 出来る、出来ないを考えずあげていく

### ②要件の為の機能
* ここで出来る、出来ないを考える
* 最低限必要な機能を絞る
* 実装方法が思いつかない機能は省略
***
* 出先で「あれあったかな:question:」を解決したい → 買い物履歴を残して最近買ったものをわかるようにする機能  
* 在庫の把握・重複購入を減らしたい → 買い物履歴から同じ単語入力時に色の変化で知らせる  → 入力中に知らせることにより在庫を思い出すきっかけにもなる
etc...
***

### ③出来ればマネタイズも考える
1. ***広告***：アフィリエイト､AdSense(web)､AdMob(アプリ)
2. ***課金***：広告削除､追加コンテンツ､アイテム
3. ***寄付***
4. ***有料***：買い切り
5. ***サブスク***：月額制

とにかく一連の流れを経験したく、マネタイズまでの道のりが見えたのが本アプリ案で、結果アフィリエイト､AdSenseになりました。
AdSenseは受かりませんでした。継続して挑戦します。

### ④利用技術
:key: ***ログイン・ユーザー登録無し***、、広告も可でとにかく***お金をかけずに***を優先して、以下を使用して、SPAで制作することにしました。
- GooglePlay Developer 申請・登録25ドル(当時3,352円)
- 独自ドメイン Xserverドメイン 初年度のみ1円
  - 更新、移管はCloudflare予定

***アイデア・デザイン***
Xmind(マインドマッピング)
Figma
***コード***
Nuxt3(Composition API)・TypeScript・Tailwind CSS
***インフラ***
Cloudflare
***開発環境***
VSCode・Git、GitHub

***参考サイト***
[【5ステップ】初めてのオリジナルアプリの作り方！アイデアの出し方も公開](https://tenshoku-miti.com/takahiro/create-original-application/)

## 3-3. 設計

### ①画面設計
1. 必要なﾍﾟｰｼﾞ列挙 ➡ 階層・整理
2. ワイヤーフレーム(紙手書き)下書き
3. ワイヤーフレーム(figma)清書

<details>
    <summary><b>デザインの４原則</b></summary>

1. ｢***近接***｣：関連する要素を***グループ化***
2. ｢***整列***｣：関連する要素を***見えない線***で整列
3. ｢***反復***｣：要素の***一貫性***、デザインの***統一***
4. ｢***対比***｣：要素の優先度を***強弱***で示す

***
</details>

***参考サイト***
[ワイヤーフレーム(画面設計)の作り方](https://b-risk.jp/blog/2019/10/wireframe/)
[Web画面設計の手順と重要なポイント](https://aqcg.jp/web_point/)
[お役立ち知識：デザインの4原則 - デザインパートナー](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)

***デザイン*** :paintbrush:: ターゲット層(ペルソナ設定)に合わせて優しい色使い、余白、シンプルを意識
***UI・UX*** :calling:: 引き算

### ②データ設計(構造)

## 3-4. 開発
- 設計通りに作る
- 最低限の機能
- 制作途中で機能の追加案を我慢して、とにかく完成させることに集中する
  - (追加の機能を制作してしまいました。なのでここに残しておきます。)

### ①工夫した機能

<table>
<tr><th>
<table>
<tr><th>並び替え機能<br>:arrow_up_down:</th>
<th><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=""></th></tr>
</table>
</th><th>
<table>
<tr><th>スワイプ<br>
 :arrow_left:カラー<br>:arrow_right:削除<br></th>
<th><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="">
</th></tr>
</table>※ﾀｯﾁﾃﾞﾊﾞｲｽのみ
</th></tr>
</table>

* ***並べ替え(D&D)・スワイプ機能***をライブラリ(Vue.Draggableは､思うような機能にならなかった)を使用せずに作成
  * ↳シンプル化のため､***同じ発火点***で､***参考サイト様***([Trello風タスク並び替えドラッグ&ドロップクローン(Vue.js利用)](https://reffect.co.jp/vue/trello-drag-drop-clone/))を参考に､【***<font color='green'>マウス、タッチ、処理回数削減、d&dとswipeの融合、グループ間並べ替え、d&d中の上下の画面端scroll***</font>】ロジックを考え自作しました。
* スマホとPCの挙動の違いなど(ENTER､終了時の処理...)
* 日本､世界の日時の表示形式(履歴)
* Amazonアソシエイトの各国の設定(***OneLink***)
* アニメーション(数字のドラムロール、追加削除時...)etc...


### ②多言語化(i18n)
**@intlify/nuxt3**使用
日､英で単語の長さの違いによる表示崩れに注意

<details>
    <summary>:frowning2: <b>未解決問題</b></summary>

:::note warn 

日本語で検索時、検索結果が英語サイトのtitleとdescriptionになってしまう問題(同じURLで 日/英 )

***確認***
meta tagの設定(title、description等)日/英 切替時にきちんと切り替わっている。

***↓ためしたこと↓***
- [Nuxt.jsのi18n多言語対応したら、日本語で検索した時の検索結果が英語になってしまった。解決できたので対応方法を記載します。](https://zenn.dev/koushikagawa/articles/32ef098e0698c7)
  - **@intlify/nuxt3** で `detectBrowserLanguage: false,`にあたる設定がない??
  - sitemapの設定 (hreflang属性)
  - Google Search Consoleに日/英を認識させる方法??...
- (2023年7月) Nuxt3での多言語化はまだ開発中らしいので情報待ち🍥 → [intlify/nuxt3: Nuxt 3 Module for vue-i18n-next](https://github.com/intlify/nuxt3)

:::
***
</details>



### ③プライバシーポリシー
***参考サイト***
[プライバシーポリシーとは何か？必要性、記載事項をわかりやすく解説](https://biz.moneyforward.com/contract/basic/1237/)

### ④テスト
- 個人情報を扱っているなら､徹底的に安全確認
- 例外処理

## 3-5. 公開

### ①(SPA SSG) 静的ファイルホスティングサービス【無料】
1. GitHub Pages
2. Firebase Hosting
3. Netlify
4. Vercel 
5. ***Cloudflare Pages***

無料プランの枠・サイトのパフォーマンス・商用利用可で***Cloudflare Pages***

***参考サイト***
[Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる](https://zenn.dev/catnose99/scraps/6780379210136f)
[NetlifyからCloudflare Pagesに引っ越しました](https://jpsern.com/netlify-to-cloudflare-pages/)

:::note info
***次回以降メモ (DB使用) 要調査***
Firebase → 大きくなったらAWSに移行
:::

***

### ②Google Play Store 配信方法

***PWA → TWA***

* TWA変換ツール「***Bubblewrap CLI***」使用
  * Lighthouse で ***80*** 以上のパフォーマンス スコアが必要:arrow_down:


***参考サイト***
[信頼できるWebアクティビティ](https://flaming.codes/ja/posts/trusted-web-activity-create-pwa-android-app)
[【TWA】完全開発ガイド＝超簡単にPWAをPlay Storeで配信しよう](https://0115765.com/archives/7932#outline__2_2)
[PWA対応サイトをAndroid APK（AAB）に変換する](https://sqripts.com/2022/12/14/22480/)

### ③Lighthouse のパフォーマンス改善(リファクタリング)
- ***cssの最適化*** → 読み込み順､削除､animation(`transform`,`opacity`...)etc...
- ***googleFonts, Analytics*** → GTM使用､読み込むタイミング､読み込み方､文字の限定etc...
  - [【2022年3月】Google Fontsのパフォーマンス比較＆ハリー・ロバーツ方式の勝手に改良版](https://deep-space.blue/web/2090)
  - [Google Fontsを簡単にサブセット化する方法](https://nullnull.dev/blog/google-fonts-subset/#%F0%9F%8F%A9______________________%F0%9F%91%A8%F0%9F%91%A9)
- ***Web Worker*** → 並列処理  [Web Workerの使い方](https://note.com/npaka/n/nc930b61840ac)
- <font color='black'> `requestAnimationFrame()`</font> → 「60fps」 [requestAnimationFrame の使い方](https://www.webdesignleaves.com/pr/jquery/requestAnimationFrame.html)
etc...

Mobile :arrow_down:
<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="">
Desktop :arrow_down:
<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="">

## 3-6. リリース後

### ①掲載用スクリーンショット、画像作成

[<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/2eb38bfc-0efc-d719-9baa-d0967308e507.png" alt="シンプルな買い物リスト-lisble リスブル" width="300">](https://lisble.net/about/)

* figma制作
* サイトにより、サイズ、比率、枚数、が異なる

### ②登録サイトに投稿/掲載依頼
当たって砕けろ、チャレンジ精神で色々掲載依頼を出してみた結果です。
[個人開発者に告ぐ！「告知＝恥ずかしい」を脱却しよう～実例データから重要性を解説](https://zenn.dev/yamatake/articles/b93d87ed134f31)

***登録or掲載*** → :tada:
メール・問い合わせ反応待ち → :envelope: 
更新が止まっているサイトが多い

<details>
    <summary><b>日本</b></summary>

- [***Appliv***](https://app-liv.jp/5347459/) → :tada: ***レビュー***、とても丁寧な対応 :thumbsup:
- [***APPLION***](https://applion.jp/android/app/net.lisble.twa/) → :tada: ランキング
- [***放課後ｱﾌﾟﾘ部***](http://houkago-no.appspot.com/app_detail/6278466848686080) → :tada: 登録
- [***Applishow***](https://applishow.com/detail/DsL3Q4b5hxxm/) → :tada: 登録
- [***AppRoom***](https://www.approom.me/app/01H2J1N7SXF5JSH8ZMMDMGBF2V?platform_id=2) → :tada: 登録 [***アプリ記事掲載***](https://www.approom.me/articles/01H2JGWJ3K3J72WVN7EJT5CKYD)
- [***SeekUps***](https://seekups.seekgeeks.net/views/detail.html?id=712) → :tada: 登録
- [***ロケットリリース***](https://rrws.info/archives/3197) → :tada: 登録
- [***Appstimes***](https://appstimes.jp/posts/2991) → :tada: 登録
- [***AnyMake***](https://anymake.app/products/kAjQm0f6tswHGaKTd0G5) → :tada: 登録
- [***makepost***](https://www.makepost.net/projects/386) → :tada: 登録
- [***MITSUKARU!***](https://www.mitsukarusite.jp/2023/06/550/) → :tada: 登録
- [***DevHaunt!***](https://devhaunt.com/product/111) → :tada: 登録、とても丁寧な対応 :thumbsup:
- [***個人dev***](https://kojin.dev/application/41) → :tada: 登録
- [***アプリゲット***](https://appget.com/c/developerpage/createdevpost/) → ゲームのみ
- [***AppBank***](https://www.appbank.net/) → :envelope:
- [***Applision***](https://applision.com/review/) → :envelope:
- [***ツクログ***](https://tsukulog.work/) → :envelope:クリエイター登録済み､まだ作品は掲載されない(2度投稿)
- [***octoba***](https://octoba.net/) → :envelope:
- [***NewLaun-ch***](https://newlaun-ch.com/) → :envelope:
- [***appllio***](https://appllio.com/ ) → :envelope:
- [***appnavi***](https://appnavi.info/) → :envelope:
- [***Androライオン***]( https://androlion.org/) → :envelope:条件:レビュー
- [***AndroRank***]( https://androrank.com/?m=send) → :envelope:条件:レビュー
- [***Androidアップス***](https://android-apps.org/) → :envelope:
- [***Androidコレクション***](https://softcollection.org/android/) → :envelope:
- [***マイナビニュース***](https://news.mynavi.jp/top/notice/press/) → :envelope:
- [***ITmedia***](https://corp.itmedia.co.jp/pr/) → :envelope:
- [***ITmedia ねとらぼ***](https://corp.itmedia.co.jp/media/pr/) → :envelope:
- [***AndRock***](https://androck.jp/contact/) → :envelope:
- [***AppVIP***](http://app-vip.jp/posts/add) → :envelope:
- [***AppLink***](https://applink.jp/request) → :envelope:
- [***GAPSIS***](https://www.gapsis.jp/) → :envelope:
 
***
</details>

<details>
    <summary><b>海外</b></summary>

- [***Product Hunt***](https://www.producthunt.com/my/products) → :tada: 登録から１週間待つ必要がある
- [***AlternativeTo***](https://alternativeto.net/software/shopping-list--lisble/about/) → :tada: 登録
- [***app store apps***](https://appstoreapps.com/submit-your-app/) → :envelope:
- [***AppCraver***](https://www.appcraver.com/contact-us/) → :envelope:
- [***arttechnica***](https://arstechnica.com/contact-us/) → :envelope:
- [***Apps Review***](https://www.androidappsreview.com/submit-your-android-app/) → :envelope:
- [***community***](https://androidcommunity.com/send-tips/) → :envelope:
- [***App Log***](http://www.androidapplog.com/suggest-app/) → :envelope:
- [***Get Android Stuff***](https://getandroidstuff.com/submit-app/) → :envelope:
- [***Android Guys***](https://www.androidguys.com/request-app-review/) → :envelope:
- [***androlib***](https://www.androlib.com/) → :envelope:
- [***APKMirror***](https://www.apkmirror.com/) → :envelope:
- [***PCMag***](http://appscout.pcmag.com/) → :envelope:
- [***NEWSREPORTS***](https://www.newsreports.com/contact/) → :envelope:
- [***iFanzine***](https://www.ifanzine.com/contact/) → :envelope:

***
</details>


※上記以外で無料で宣伝できるサイト、方法があれば教えていただけると嬉しいです。

### ③記事を書く
- **Qiita**
- Zenn
  - [Nuxt3で初めての個人開発記録【買い物リストアプリ】](https://zenn.dev/arieight/articles/55ec7a38edb940)
- Crieit
  - [シンプルな買い物リストアプリ「Lisble リスブル 」について](https://crieit.net/posts/Lisble-64bfaf0e5e2b7)
  - [【個人開発】アイデア出しから公開・プロモーションまでまとめ(Nuxt3、Cloudflare、GooglePlay)](https://crieit.net/posts/Nuxt3-Cloudflare-GooglePlay-64c426ab215c8)
- note
  - [値上げ対策！ 買い物リスト作成で節約](https://note.com/arieight/n/nc8cace276feb)
  - [シンプルな買い物リストアプリ「Lisble リスブル 」のご紹介](https://note.com/arieight/n/ne70e5e3865f3)
- Medium(英語記事)
  - [Price increase measures! Save money by making a shopping list](https://medium.com/@arieight_8/price-increase-measures-save-money-by-making-a-shopping-list-120cec400b15)
:::

### ④Twitter(日本語/英語)
- 日本語ver.：[@arieight_8](https://twitter.com/arieight_8)
- 英語ver.：[@Lisble_en](https://twitter.com/Lisble_en)
- 登録or掲載 → つぶやく
- 機能一覧、設定一覧、動画(gif)でツイート
- 開発中からつぶやいた方が良い

### ⑤Instagram(日本)
- Instagram：https://www.instagram.com/lisble_jp/

***参考サイト***
[個人開発したWebサービスをリリースした後にやったこと / やり続けていること](https://www.producthunt.com/posts/shopping-list-lisble)

# 4. 気付き・反省点・まとめ

- 開発を0からして、初めてコードをさわって新しい概念にふれた時くらい勉強になり、とても知見が広がり良かったです。
- プログラミング以外の作業が初だったので「プログラミング：他 ＝ 3：7」くらいの感覚でした。様々なデザインが予想より大変でした。
- 一番面白いと感じた作業は、ロジックを考えて形になった時でした。
&emsp;
- **アイデア** → 紙やXMindに思いつく限りまとめたのですが、総合的な判断で結局既存のサービスに追加機能の方向になってしまいました。マネタイズまで含めたアイデアが難しいです。どうせやるなら一通りやってみたかったので次回以降にしました。常にアンテナをはって知見を広げていいこうと思いました。
- **要件定義** → 運用費がかからない、個人情報は扱わない、AdSense以外のマネタイズまで考える､などを考慮してアイデアを絞り、考え、すでにあるサービスと見比べ、アイデアと要件定義をぐるぐるしていました。
- AdSenseは、コンテンツ不足でwebアプリは受かりづらいらしいです。
- **利用技術** → 平凡なアイデアだったので初めて挑戦する技術(Nuxt3､TypeScript､etc...)を使用してしまいました。
- デプロイ先など、お金をかけずに運用していくための他の効率の良い方法やサービスを引き続き調査していきます。(Firebaseをﾃﾞｰﾀﾍﾞｰｽ等)
- **設計** → 画面デザインは、UI足したら引き算・データ設計は構造整理
- **開発** → 追加の機能を制作してしまいました。最低限の機能でまず完成を目指すべき
- **工夫した機能** → ToDoの変化型アプリで平凡なアプリで非常に多く数があるため、機能にこだわりました。
- 多言語化して作業が増えた。[Amazon設定､時間形式､表示崩れ､metaタグ､etc...]
- **テスト** → 多視点が重要
- **公開** → 運用費をかけないにこだわる 
- **パフォーマンス改善** → 良い学習
- **マネタイズ** → Amazonまでの導線が弱い 要検討
- 著作権・プライバシーポリシー・DDoS対策etc...
- **プロモーション** → Twitterは開発中から・アイデア段階でSNSを考慮したサービス・地道にor金をかけるか・個人の場合限られるので勉強段階からブログや記事など書いておけばまた違ったかも
- 「告知＝恥ずかしい」があったので、経験せずにはわからないからできることは全部しようと思いました。

作る前に想像していたよりコード以外の作業が多いとうことに改めて気付かされました。
制作中、何度も宇宙兄弟のセリフが脳内再生してました。ありがとうございました。
***


>「また積めばいいよ」
>「次はもっと上手く積めるようになってるよ」
><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/54752648-2273-f10c-d125-ea6abc68e562.jpeg" alt="『宇宙兄弟』17巻 小山 宙哉「また積めばいいよ」" width="300">
><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/9d577b8b-90ef-2e69-8d2b-2e67ebfb9794.jpeg" alt="『宇宙兄弟』17巻 小山 宙哉「次はもっと上手く積めるようになってるよ」" width="300">
>出典: 『宇宙兄弟』17巻 小山 宙哉（講談社、2012年3月23日第1発行）

***

購入履歴が残せるシンプルな買い物リストアプリ ***『買い物リスト - Lisble リスブル』*** です。メモ、ToDoアプリとしても機能します。
購入履歴の保存機能により、無駄な重複購入を防ぎ、在庫の備忘録にもなります。
ログイン・ユーザー登録不要、無料ですぐにご利用いただけます。
もしよかったら、触ってみてください。

[<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906025/2eb38bfc-0efc-d719-9baa-d0967308e507.png" alt="シンプルな買い物リスト-lisble リスブル" width="300">](https://lisble.net/about/)

iOS,PC: 

https://lisble.net/about/

iOS,PCの方は、PWAの為、メニューから｢ホーム画面に追加｣をお願いします。

Android:

https://play.google.com/store/apps/details?id=net.lisble.twa

要望・感想・アドバイスなどあれば、
Twitter： [@arieight_8](https://twitter.com/arieight_8) 

***
Google Play および Google Play ロゴは、Google LLC の商標です。