「個人開発」の記事 - Crieit

【個人開発】アイデア出しから公開・プロモーションまでまとめ(Nuxt3、Cloudflare、GooglePlay)

2023-07-29T05:35:55+09:00

1. はじめに

個人開発の大体の流れがつかめるように、アイデア出しから公開・プロモーションまでをまとめました。

1-1. 作ったアプリ

About	List	History

	基本操作
① リスト作成 ② 買い物完了でチェック ③ チェック済みを削除 ※これらの手順だけで簡単操作

『買い物リスト・メモ - Lisble リスブル』

iOS,PC	Android

iOS,PCの方は、PWAの為、メニューから｢ホーム画面に追加｣をお願いします。	このアプリは Google Play で入手できます。

2. 0から公開までの流れ

2-1. アイデア

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

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

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

参考サイト
アプリ開発でアイデアが浮かばないあなたへ。独創的なアイデアの出し方
 ポートフォリオや個人開発で使えそうなアイデア

2-2. 要件定義

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

②要件の為の機能
* ここで出来る、出来ないを考える
* 最低限必要な機能を絞る
* 実装方法が思いつかない機能は省略

出先で「あれあったかな❓」を解決したい → 買い物履歴を残して最近買ったものをわかるようにする機能
在庫の把握・重複購入を減らしたい → 買い物履歴から同じ単語入力時に色の変化で知らせる → 入力中に知らせることにより在庫を思い出すきっかけにもなる
etc...

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

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

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

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

参考サイト
【5ステップ】初めてのオリジナルアプリの作り方！アイデアの出し方も公開

2-3. 設計

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

参考サイト
ワイヤーフレーム(画面設計)の作り方
 Web画面設計の手順と重要なポイント

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

参考サイト
お役立ち知識：デザインの4原則 - デザインパートナー

②データ設計(構造)
* データの設計図

2-4. 開発

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

①工夫した機能
- 並べ替え(D&D)・スワイプ機能をライブラリ(Vue.Draggableは､思うような機能にならなかった)を使用せずに作成
- ↳シンプル化のため､同じ発火点で､参考サイト様(Trello風タスク並び替えドラッグ&ドロップクローン(Vue.js利用))を参考に､【マウス、タッチ、処理回数削減、d&dとswipeの融合、グループ間並べ替え、d&d中の上下の画面端scroll】ロジックを考え自作しました。

並び替え機能	スワイプ

	←色 →削除※ﾀｯﾁﾃﾞﾊﾞｲｽのみ

スマホとPCの挙動の違いなど(ENTER､終了時の処理...)
日本､世界の日時の表示形式(履歴)
Amazonアソシエイトの各国の設定(OneLink)
アニメーション(数字のドラムロール、追加削除時...)etc...

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

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

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

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

③プライバシーポリシー
参考サイト
プライバシーポリシーとは何か？必要性、記載事項をわかりやすく解説

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

2-5. 公開

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

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

参考サイト
Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる
 NetlifyからCloudflare Pagesに引っ越しました

②Google Play Store 配信方法
PWA → TWA
* TWA変換ツール「Bubblewrap CLI」使用
* Lighthouse で 80 以上のパフォーマンススコアが必要(↓に記述)

参考サイト
信頼できるWebアクティビティ
 【TWA】完全開発ガイド＝超簡単にPWAをPlay Storeで配信しよう
 PWA対応サイトをAndroid APK（AAB）に変換する

③Lighthouse のパフォーマンス改善(リファクタリング)
- cssの最適化 → 読み込み順､削除､animation(transform,opacity...)etc...
- googleFonts, Analytics → GTM使用､読み込むタイミング､読み込み方､文字の限定etc...
- 【2022年3月】Google Fontsのパフォーマンス比較＆ハリー・ロバーツ方式の勝手に改良版
- Google Fontsを簡単にサブセット化する方法
- Web Worker → 並列処理 Web Workerの使い方
- requestAnimationFrame() → 「60fps」 requestAnimationFrame の使い方
etc...

Mobile :arrow_down:

Desktop :arrow_down:

2-6. リリース後

①掲載用スクリーンショット、画像作成
* figma制作
* サイトにより、サイズ、比率、枚数、が異なる

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

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

日本
- Appliv → 🎉 レビュー、とても丁寧な対応 :thumbsup:
- APPLION → 🎉 ランキング
- 放課後ｱﾌﾟﾘ部 →🎉 登録
- Applishow → 🎉 登録
- AppRoom → 🎉 登録 アプリ記事掲載
- SeekUps → 🎉 登録
- ロケットリリース → 🎉 登録
- Appstimes → 🎉 登録
- AnyMake → 🎉 登録
- makepost → 🎉 登録
- MITSUKARU! → 🎉 登録
- DevHaunt! →🎉 登録、とても丁寧な対応 👍
- 個人dev → 🎉 登録
- アプリゲット → ゲームのみ
- AppBank → 📧
- Applision → 📧
- ツクログ → 📧 クリエイター登録済み､まだ作品は掲載されない(2度投稿)
- octoba → 📧
- NewLaun-ch → 📧
- appllio → 📧
- appnavi → 📧
- Androライオン → 📧条件:レビュー
- AndroRank → 📧条件:レビュー
- Androidアップス → 📧
- Androidコレクション → 📧
- マイナビニュース → 📧
- ITmedia → 📧
- ITmedia ねとらぼ → 📧
- AndRock → 📧
- AppVIP → 📧
- AppLink → 📧
- GAPSIS → 📧

海外

Product Hunt → 🎉 登録から１週間待つ必要がある
AlternativeTo → 🎉 登録
app store apps → 📧
AppCraver → 📧
arttechnica → 📧
Apps Review → 📧
community → 📧
App Log → 📧
Get Android Stuff → 📧
Android Guys → 📧
androlib → 📧
APKMirror → 📧
PCMag → 📧
NEWSREPORTS → 📧
iFanzine → 📧

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

③記事を書く
- Qiita
- 【Nuxt3】はじめての個人開発「買い物リストアプリ」開発記録
- Zenn
- Nuxt3で初めての個人開発記録【買い物リストアプリ】
- Crieit
- シンプルな買い物リストアプリ「lisble リスブル」の紹介
- 【個人開発】アイデア出しから公開・プロモーションまでまとめ(Nuxt3、Cloudflare、GooglePlay)
- note
- 値上げ対策！買い物リスト作成で節約
- シンプルな買い物リストアプリ「Lisble リスブル」のご紹介
- Medium(英語記事)
- Price increase measures! Save money by making a shopping list

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

参考サイト
個人開発したWebサービスをリリースした後にやったこと / やり続けていること

3. 気付き・反省点・まとめ

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

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

「また積めばいいよ」
「次はもっと上手く積めるようになってるよ」

出典: 『宇宙兄弟』17巻小山宙哉（講談社、2012年3月23日第1発行）

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

『買い物リスト・メモ - Lisble リスブル』

iOS,PC	Android

iOS,PCの方は、PWAの為、メニューから｢ホーム画面に追加｣をお願いします。	このアプリは Google Play で入手できます。

Twitter:＠arieight_8

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

シンプルな買い物リストアプリ「Lisble リスブル」について

2023-07-25T20:16:30+09:00

1. はじめに

シンプルな買い物リスト・メモ - Lisble リスブル
アプリの解説・紹介をするために記事を書きました。

シンプルな買い物リストのアプリです。メモ、ToDoアプリとしても機能します。ログイン・ユーザー登録不要、無料ですぐにご利用いただけます。

「買い忘れ、衝動買い、同じものを買ってしまう、出先での在庫確認、ネットショップとの比較など」考える事が多く、余計な負担だったので、リストをつけることにより改善したいと思いました。
購入履歴の保存機能は、在庫の備忘録にもなります。また買い物中の操作性を重視し、レイアウトの左/右切り替えが可能です。
事前に買うべきものをメモしておくことで、より計画的に買い物をして、結果的に節約につながります。

2. 買い物リストアプリ「Lisble リスブル」について

『買い物リスト・メモ - Lisble リスブル』

iOS,PC	Android

iOS,PCの方は、PWAの為、メニューから｢ホーム画面に追加｣をお願いします。	このアプリは Google Play で入手できます。

2-1. アプリの概要

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

About	List	History

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

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

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

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

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

	スマホ
① 購入履歴へ ② メニュー(移動・設定) ③ タブ切り替え ④ ↑↓並べ替え ④ ←色､→削除 ⑤ 編集 ⑥ チェック ⑦ リスト追加 ⑧ ｢チェックあり｣のみ削除 ⑨ すべて削除

	タブレット・PC
① 編集 ② 色 ③ 削除 ④ ↑↓ 並べ替えのみ

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

①②③これらの手順だけで簡単操作

	基本操作
① リスト作成 ② 買い物完了でチェック ③ チェック済みを削除 ※これらの手順だけで簡単操作

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

並び替え機能	スワイプ

	←色 →削除※ﾀｯﾁﾃﾞﾊﾞｲｽのみ

タブ切り替え	Amazon検索

すべて、チェックあり、なし	そのままAmazon検索

購入履歴の保存	重複買い防止

1. チェックあり削除 2. 購入履歴の保存	履歴と同じ品目を入力時に色の変化でお知らせ

続けて追加	全削除

＋ボタン、ENTERキｰ	チェック済みは購入履歴に保存

2-6. アプリの設定

テーマカラー	レイアウト	多言語

5種	片手操作での誤操作防止(左利き)	日本語 / 英語

自動削除	入力中のEnterキー操作

終了時に｢チェックあり｣を自動削除(保存)機能	追加 / 改行切り替え

3. 最後に

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

『買い物リスト・メモ - Lisble リスブル』

iOS,PC	Android

iOS,PCの方は、PWAの為、メニューから｢ホーム画面に追加｣をお願いします。	このアプリは Google Play で入手できます。

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

SmartHRと連携して人事データを可視化するツールを作ってみた

2023-04-11T23:29:51+09:00

個人開発でSmartHRと連携したレポーティングツールを作成してみました。

人事データ簡易分析ツール

概要

このツールはSmartHRと連携してAPI経由でデータを取得して可視化を行うためのレポーティングツールです。

SmartHRではフリープラン、労務管理プランでは分析レポートの利用が有料プランに切り替えるなどの対応を行わないと利用できません。

オプション機能として提供されていますが、そこまで細かく分析するほどでは無く現状の人事情報を可視化したい、みたいな緩い使い方でも許容できるユーザーさんを対象に簡易的なグラフ出力を提供します。

利用にはテナントIDとアクセストークンを利用しますが、サイト内にも記載がある通りこのツールはテナントIDやアクセストークンを保存したりはしません。データ取得時のみに利用します。

そのため画面をリロードしたりするともちろん情報は失われます。

再度表示したい場合は都度テナントID、アクセストークンはをもう一度入力していただく手間はありますが…

技術構成

React
rebass
styled-component
recharts
TypeScript
Vite
VItest
Axios
CloudFlare Pages

レポート出力結果

出力結果は以下のような感じでシンプルに出力しています。

もしご興味あれば是非使ってみてください。

次にテナントIDとアクセストークンについて簡単に説明します。

テナントIDについて

テナントIDはSmartHRのURLに含まれている以下の部分の文字列です。

[https://[テナントID].smarthr.jp/](https://[テナントID].smarthr.jp/)

アクセストークンについて

アクセストークンは管理画面より作成を行うため以下に手順を載せておきます。

SmartHRにログインした後、右上のユーザー名の部分をクリックするとメニューが表示されます。

その中の「共通設定」をクリックしてください。

次に左側メニューから「外部システム連携」をクリックします。

API連携より「アクセストークン」をクリックします。

「新規発行」をクリックします

「アクセストークン名」を入力します。利用する用途を名前にしておくと良いです。

例えば「分析レポート」とか…

必須項目の入力が埋まると「登録」ボタンがクリックできるようになるので登録するとアクセストークンが払い出されます。

これらのテナントIDとアクセストークンを利用して本ツールにて入力して「出力」ボタンをクリックしてもらうとレポートが出力されます。

まだまだ表示がおかしい部分があったり、追加したい機能等があるので引き続き開発を進めていきたいと思います！

採用計画や人事データを活用して分析を行いたい方は是非活用してみてください。

エンジニアのアウトプット力を高めるメモ投稿サービスをリリースしました【個人開発】

2023-03-22T10:07:36+09:00

この記事は Zennに投稿したものと同じ内容です

こんにちはmofmofでエンジニアをしているshwldです。

mofmofではエンジニアの成長にフォーカスして色々施策を思索して試作したりしていたりもします。
今回は、課題の一つである、「アウトプットを習慣づけたい」について、ソリューションとなるサービスを作ってみました。

この記事では

なぜサービスを作るに至ったのか
どんなサービスなのか

あたりを書いていきます。

https://revelup.dev/ja

なぜアウトプットを習慣づけたいのか

アウトプットには様々なメリットがあります。

インプット内容を自分のものにする
- 技術情報をインプットしただけではいざ仕入れた情報を使おうとした時に使える状態になっていないことがほとんどです。実際に手や頭を動かし、相手に教えられる状態になっていると、学習・定着効果が高まります。
プレゼンスを高める
- エンジニアの技術力を客観的に評価するにはアウトプットや経歴が重要です。極論ですが、アウトプットしていないと何もしていないと同義になってしまうのです。

と、メリットはわかるのですが、実際自分がたくさんのアウトプットをできているわけではありません。自分が継続的アウトプットを改善した方法を元に今回サービスにしました。

解決したい課題

アウトプットの際に以下のような課題があります。

ひたすら開発してしまい、つまづいたところ、工夫したところを残してない
- いざ記事を書こうとしても、記事を書くための調べ直しに多くの時間がかかる
記事を公開するのにハードルがある。誤った情報を書いていないか、読めるものになっているか気になってしまう。

ZennのScrap機能はこの課題への良い解決策で、Scrapの思想が好きです。
ただ、今回自分はScrapよりもさらにハードルを下げたサービスが欲しいと思いました。

どんなサービスなのか

REVELUP.devはTwitterのような気軽さで技術アウトプットメモを投稿できるサービスです。
フロー情報を前提としているため、正確性などを気にせず気軽に投稿しながら、本番アウトプットの練習ができる場を目指します。

以下のような機能が備わっています。

気づいた時に即残せるデスクトップ用アプリケーション

開発の途中、何か工夫したり、つまづいたその瞬間に記録を残します。
任意のショートカットを登録することで、10秒で投稿できる体験を提供します

階層化可能なタグ付けによるノート整理を採用し、投稿速度と内容の整理を両立します

階層化可能なタグ↑

心理的安全性を担保しつつ、公開練習できる

REVELUP.devへ投稿する内容は、承認した友達だけがみることができます。
Twitterというよりは、技術投稿版facebookといった感じです。

気づいた時に投稿する性質上、業務中や驚くような時間であることもあると思いますが、友達からは投稿した時間はバレないようになっています。

実際にアウトプットする材料とする

投稿した内容は、GraphQL　APIで取得することができます。
投稿内容を好きに加工、バックアップしたり他のサービスに連携など、ご活用ください。

ストックした情報を使って、AIで記事を生成するということができると、アウトプットのハードルが下がりそうだなーとかを考えています。

https://revelup.dev/ja

このプロダクトは、株式会社mofmofの「水曜日の個人開発」にサポートされています。
https://indie-dev.mof-mof.co.jp

初のSaaSが12月で1周年なので振り返ってみた

2022-12-05T05:35:35+09:00

※これは個人開発 Advent Calendar 2022のカレンダー2/5日目の記事です。

個人開発でいろいろ作ってきたけど、
去年の12月にはじめてSaaSをリリースしました。

ちょうど1年経ったので、少し振り返ってみる。
12月はいろんな記事が出てくるので、少し触発されました(´ω｀)

GoogleスプレッドシートのJSON API化サービス

https://sssapi.app/

どんなサービス？

スプレッドシートのJSON APIをつくれるごくごくシンプルなサービス。

スプレッドシートのURLを登録すると、
中身をJSONで受け取れるAPIを作れます。

検索・絞り込み・ページングなどAPIでよくつかう機能や、
ネストオブジェクトへの変換などいくつか変換機能、
外部API呼び出しやGitHub Actionsとの連携機能などなども用意。

どうして作ったの？

β版リリース時の記事でもいろいろ書いたけど、
スプレッドシートをJSON化する方法はいくつか既存のサービスでは少し使いにくいな。。と思うことがあった。

既存のサービスでの課題

ちょっとしたJSON APIを作る方法はいくつかあるけど、
実際のサービスで利用しようとした場合、すこし気になることが。。

GAS
- レスポンスが遅い/同時実行数などの制限がある
- シートごとに準備が必要/どこで使ってるかわからなくなる
- リッチな検索の実装がめんどくさい
ヘッドレスCMS
- 個人・小規模・開発初期では手を出しにくい価格
- 機能がリッチだけど、初期ではなくていいものも多い
スプレッドシートDB関連サービス
- 必要な権限が多い
- プライベートなAPIは作れない

資金が潤沢であればヘッドレスCMSがよい選択だけど、
試作段階で、いきなり手を出すのはなかなか厳しいお値段。。

GASやスプレッドシートDB関連サービスは、
個人利用なサービスや学習用ではよいけど、
実サービスではなかなか厳しい制約。。

もう少しお手軽で実サービスでも利用できるものがほしいと思い、
このサービスを作りはじめることに。

スプレッドシートをDBにするときの懸念

多くの競合サービスは直接スプレッドシートに接続しているけど、
実際にスプレッドシートをDBにすることを考えたときに、
いくつか気になる点が。。

トランザクションがない -> データ壊れる可能性
編集中のリクエストも受け付ける -> 不正なJSONを返すの可能性
Sheets APIが必要 -> 実サービスだとつらい遅さ

作ったサービスが(万が一でも)大ヒットしたときに、
データが壊れたり、意図しないレスポンスになるのは、
かなりつらい。。

そのため、任意のタイミングのスプレッドシートでAPIを更新でき、
読み込み専用のAPIのみとする、いまの方針になりました。

1年やってみてどうだった？

予想以上に利用されてた!!
エンジニア以外の人の利用が多い!!
企業での利用が多い!!

自分と同じような個人開発者をイメージしていたので、
かなりびっくり。。うれしい悲鳴。。(*´ω｀*)
年プランの購入もあり、黒字で運営できてる。ありがたい。。(*´ω｀*)

CloudFlareの障害のときは気が気じゃなかった。。

マッチするユーザ

アンケートやインタビュー、利用データを見ていると、こんな感じに(*´ω｀*)

スプレッドシートを介したコラボレーション
- エンジニア以外がデータを操作しやすい
お知らせなどを極小のコンテンツをあとづけしたい
- 単純なものを素早く作れる
スキーマが決まってない開発初期
- データからスキーマが作成できる

特に、スプレッドシートは多くの人が見慣れているので、
データを作る人に管理画面の操作方法を説明しなくてもよく、
共有も共同編集も簡単にできるというのが強みのよう。

また、スキーマをあらかじめ用意しなくてよく、
列を追加すると自由に変更できるのでプロトも素早くできる。

マッチしないユーザ

逆にマッチしないユーザとしては、
スプレッドシートをDBとして使いたいエンジニア。

やはり、書き込みができない、すぐに反映されないのは、
かなりネックなため、刺さらない感じだった。。

とはいえ、DBとして使う懸念があるので、
妙案が出るまで少し難しいことを思っている。。

振り返り(というなの後悔＆反省)

うれしかったことも多かったけど、
「こうしとけばよかった。。」の日々(´・ω・｀)

ユーザとのコミュニケーション

機能の開発はずっとやってきたけど、
マーケティングは考えていなかった。。

リリースしたはいいものの、フィードバックを受けたり、
何かを個別に伝えたりというのが難しい状態に。。

以下のようなものが必要だと感じた。
さらにサイト上とメールなどのサイト外でやり取りできるとよい。

運営 -> 全体
- サイト内: お知らせ・更新履歴のページ
- サイト外: メーリングリスト
運営
- サイド内: フィードバックフォーム
- サイト外: お問い合わせフォーム/メール
運営 -> 個別
- サイト内: (現状なし。例:個別のお知らせ)
- サイト外: メール
運営個別
- サイト内: (現状なし。例:チャット)
- サイト外: メール

当たり前のことだけど、機能の開発が優先になってしまっていた。。
機能は最低限でもいいけど、
ユーザとやり取りできる部分はあらかじめ用意できていると良かった。。

統計データの収集

これもマーケティング関連。

リリースして終わりではなく、なにを改善すべきかを把握する必要があるが、
こんなに利用される想定ではなかったので、かなり後回しに。。

最低限でも仕込んでおけば、かなり改善を早く回せた気がする。

特に、Twitterでのコメントと、実際の利用データとはかなりの乖離があるので、
もっとはやく実データを見て判断できる基盤を用意しておけばよかった。。

個人利用の想定

想定ユーザが自分自身であったので、
複数人でがっつり利用されるのを想定しなかった。。

フタを開けてみると、企業での利用や、
エンジニア/非エンジニアとのコラボレーションが多い。

そういった場合、プロジェクトやワークスペースみたいな、
複数人で共同編集できる構成が必要。

そうしておくことで、メンバーを招待したりもできるので、
バイラル効果も期待できる。

特にSaaSの場合はマルチテナントな構成で組んでおけばよかった。。
(新機能として実装中...)

料金プラン設計

個人利用の想定も絡んでいるけど、
アカウント単位のシンプルな3プランだけにしていた。
(しかもかなり手を出しやすい価格...)

この設計の場合、なかなか収益を増やすのが難しい。。
ランニングコストがかかるリッチな機能も開発しにくい。

また、APIがたくさん作りたい人と行数をたくさん増やしたい人がいて、
ニーズにあうプランがないことも多い。

今回のサービスの場合は、ある程度、好きなプランにできるよう、
ユーザがカスタマイズできる構成で組んでおけばよかったと思う。

とはいえ、ユーザが無駄に費用をかけなくていいように、
無料で試せて、小さくはじめて、大きく伸ばせる、
みたいな仕組みにしておくと個人的にはとっつきやすい。

その他もろもろ

書きはじめるときりがないけど、ほかにもいろいろと。。

より積極的なインタビュー/事例収集
大きな更新よりも小さくても定期的な更新＆お知らせ
UIフレームワークは利用を控える/移行つらい
広告は少額だと微妙かも/ある程度の金額なら効果的
記事募集やクーポン配布は効果薄いかも

はやく小さくリリースするのも大事だけど、
こういったサービスの場合には、
マーケティング関連や共同利用の想定ももっと想定しておけばよかった。。

今後は？

まずは後悔している部分の対応と使い勝手を向上していく。

あとはNuxt3がリリースされたので、Buetfyを剥がしつつ、
すこしずつ移行している感じ。

シンプルさを保ちつつ、よりサクッと便利なサービスになるよう、
少しずつでも長く運営できるようがんばります(*´ω｀*)!!

ご興味がある方も無い方も一度はぜひぜひ〜(*´ω｀*)

GoogleスプレッドシートのJSON API化サービス
https://sssapi.app/

参考になった本

マーケティングの本が多め。どう理解してもらい、どう広めていくかの学びが多い。。

【個人開発】作るのも、答えるのも簡単なWebアンケート「ankeyto」を作りました！

2022-08-31T09:35:31+09:00

2つ目の個人開発サービス公開

アプリケーションのモダン化を勉強しようと個人開発を始めて、以下の記事のように公開していました。もう振り返ると1年経つんですね…　こういった個人開発活動を続けることにより、少しずつ知識も身についてきて、開発スピードも上がってきていました。

Github Issuesをキレイに外部公開するサービス「2go」作ってみた
- https://qiita.com/nice2have/items/28449ae4ef45fef2c671
海外進出を目指して、ProductHuntへ個人開発サービスを投稿するまでにやったこと&やった結果を全面的にシェアする
- https://qiita.com/nice2have/items/f59a27c266efb9b8821c

実際には公開していないのですが、atodyという「Twitterでいいねしたツイートに含まれるリンク・画像だけを自動でまとめてブックマーク化できるサービス」を開発したのですが、いまいちサービスの完成度に納得がいっていなく、開発したサービスとしては3つとなったのですが、公開したサービスは２つとなります。

簡単Webアンケート

今回は会社の一定の範囲で簡単にアンケートを取りたいときに、Google FormｓやMicrosoft Formsを作るのは手間だな、もっとライトな感じで反応を知りたいなと思ったのがきっかけです。

また、アンケートの回答を得るまでのハードルが結構高いと思ったんです。アンケートURLにアクセスして、回答を入力して、、、となると、答えてくれる人が少なくなってしまって、アンケートの価値が薄まってしまうような気がしたんですよね。

機能を最小限に絞ったアンケートをリリースしよう

これらの課題を解決しようと、ankeytoというアンケート機能を最小限に絞ったサービスを開発しようということに至りました。ankeytoはアンケートのモジりで「アンキート」と名付けることにしました。ちなみに、先程のatodyも「あとで」のモジりで「アトディ」と名付けています。

https://ankeyto.com

開発する前の大まかなコンセプトは、A3ノートにまとめる用にしているのですが、汚い字で申し訳ないですが、公開してみます。

サービスのコンセプトは以下の２つと設定しました。
+ 最大３つまでの選択肢
+ 選択肢ごとのURLにアクセスすればもう回答済みになる

そのため、選択肢を表示して回答ができるページをSNSでシェアするのではなく、アクセスしたら回答できるURLをSNSでシェアするだけで良くなるのです。例えば、「これが良いと思ったら、このURLにアクセスして！」と言えば良くなり、アンケート回答のステップとハードルを減らすことができるのです。つまり、個人個人で対象への「いいね」を調査・獲得できるイメージです。

画面イメージ

こちらのようにアンケート回答がリアルタイムにグラフやUIに反映されるので、回答が多いと変化を楽しめるかもしれません。例えば、プレゼン最中の意見を軽く聞きたいときや、勉強会のフィードバックを簡単に得たいときなどに利用できるかもしれません。

アンケートを作るときの画面も極力シンプルにしています。こちらもログインが必要だと手間が増えてしまったり、入力項目数が多いと途中で離脱してしまう可能性が高くなってしまうので、最小限にすることを意識しています。

利用技術

個人開発者としてはまだまだペーペーなので、利用技術も運用負荷が最小限になることを意識しています。
- Firebase(Firestore/Functions/Hosting)
- Vue.js
- Tailwindcss
- Slack

サービス自体がとてもシンプルなので、HostingでWebページを表示し、質問作成や回答をFunctionsで処理し、結果をFirestoreでリアルタイムに反映しているだけです。一応、モチベーション維持のために、質問が作成されたり、回答されたりしたら、FuncitonsからSlackに通知されるようにしています。

将来に向けて

最後に、将来は以下のロードマップを考えています。
- URLにアクセスするよりもさらにハードルを下げるために、URLをQRコード化できるように。
- Cookie等を利用した重複回答者の防止機能
- 質問IDをランダムでなく、わかりやすいIDを提供できる機能
- API機能（UIだけでなく、いいねAPIを提供）
- 英語対応

最後に。

まさにこのankeytoを利用して、このWebサービスってどうですか？とアンケートを取って終われればと思います。以下が質問ページから、SNS共有用にコピーできる文章になります。「いい！」か「まあまあ」のURLにアクセスすれば回答が完了しますので、ぜひよろしくお願いします！

Q. このWebサービスってどうですか？
https://ankeyto.com/q/BbDJA3P11

いい！ : https://ankeyto.com/BbDJA3P11/1
まあまあ : https://ankeyto.com/BbDJA3P11/2

また、個人開発の進捗などを垂れ流すTwitterもやっていますので、こちらもよろしければフォローお願いします。
https://twitter.com/jnakajima1982

ブラウザだけで複数コピペ保存・共有が出来るWebサイト

2022-06-26T21:18:47+09:00

個人的に困っていた事を解消するサイトを作ったので紹介させて下さい。

コピのすけとは

ブラウザだけでパソコンやスマホ間で、複数コピペの保存・共有が出来るサイトです。
入力内容は保存及び共有時に暗号化されます。

コピのすけ

困っていた事

ちょっとしたコピペの繰り返しや、他の端末(パソコンからスマホ等)に送りたい時、
アプリや連携サービスを使うまでも無いのになと、少し手間に感じていました。

このちょっとした手間を解消するために「コピのすけ」サイトを作成しました。

機能

複数テキスト枠でのコピー機能

テキスト枠が複数あり、それぞれの内容を「コピー」ボタンでクリップボードにコピー出来ます。

保存

暗号化したコピー内容をブラウザに保存出来ます。

URL共有

URLでコピー内容を共有出来ます。

リアルタイム共有

複数端末でコピー内容をリアルタイムに共有出来ます。

こだわりポイント

スマホを考慮し、ボタン配置や操作性などの対策を行っています。
テキストエリアがコピーする内容に応じて自動調整します。
セキュリティを考慮し、暗号化対策を行い、安全性を高めています。

同じ事でお困りな方がいましたら、ぜひご活用下さい。

コピのすけ

サブスクの解約忘れ・無駄遣いを防止するサービス「Subreco」を開発して得た3つの学び

2022-06-26T14:43:49+09:00

筆者について

「多くのユーザーが実際に使って、価値があるものはなんだろう？」と考えながら、個人開発を趣味ではなく「収益を出す」ために行なっています。

技術だけでなく、デザインやグロースハックも好きで、色々な視点からWebサービスを作り上げていくのが好きです。

今回ご紹介する「Subreco」は個人開発を始めて3つ目のサービスとなります。

Subrecoの公式サイトはこちら

なぜ、サブスク管理サービス「Subreco」を作ったのか？

自分自身、何度もサブスクの「解約忘れ」で失敗した経験があったからです。

あなたも、サブスクなどで使っていないサービスを解約し忘れて"無駄な支払いをしてしまった経験"ありませんか？

家計簿アプリ、クレジットカード会社が提供しているアプリは時々見ていたものの、「あっこのサービス使ってないのに解約し忘れたぁ！(絶望…)」ということが何回かあったんですね。

1回だけならいいのですが。何回も経験したので「さすがにどうにかしたいなぁ」と思って、次はメモアプリとカレンダーアプリを併用して使っていました。

これでサブスクと契約更新日を両方管理できる！対策バッチリ！

、、、と思いきや、だんだんメモとカレンダーアプリで二重管理するのが面倒くさくなり、結果的に続かなかったんです。。

メモアプリやカレンダーアプリだと「毎回今月は〇〇を使っていたっけ…？」とわざわざ自分が使っているサービスを"意識"して見直さなければなりません。

でも、そんなの毎回意識できないし、面倒ですよね？

この経験から、使っているサブスクを「定期的に見直す仕組みを自動化」しようと生まれたのがSubrecoです。

Subrecoの特徴

Subrecoの使い方はシンプルに3STEPで完結します。

①今使っている全てのサブスクを一括管理して把握する
②各サブスクの契約更新日があるたびに自動通知する
③通知があるたびに「利用継続」or 「利用停止」を判断する

契約更新日はメールで自動通知するため、わざわざメモを見直したり、毎回カレンダーで契約更新日を設定し直さなくて済むのがポイント。

使っているサブスクを登録しておくだけで、自動でSubrecoが契約更新日をお知らせします。

Subrecoの公式サイトはこちら

「Subreco」を作って得た学び

①慣れないことはしない
②コア機能を徹底的に絞る
③自分は使うのかを考える

ここからは実際にSubrecoを開発して、得た学びを3つ紹介します。

①慣れないことはしない

実は、当初SubrecoはNuxt.jsで作っていました。(ちなみにNuxt.jsを使うのが今回が始めて)

最初は順調だったものの、徐々にハマるポイントが多く、開発スピードが落ちてきたので、思い切ってLaravel×Vue.jsでリプレイスしました。

結果、開発スピードは3倍以上にUP。

ここから分かったのは、収益目的で個人開発をする場合、絶対に自分が慣れているフレームワークで開発すべきだということ。

ただでさえ開発以外にもすべきこと(デザイン、マーケetc.)が多いのに、開発に負荷がかかる進め方は合理的でないと痛感しました。

②コア機能を徹底的に絞る

テレビのリモコンを想像してみましょう。

・電源の入/切ができる
・チャンネルで主要な局が切り替えられる

一番使う機能が多いのは上記だと思います。

しかし、実際にテレビのリモコンを見ると他にもボタンがありますよね。
で、実際にほとんどのボタンを使っていないという方も多いのではないでしょうか？

そう。実際にユーザーが求めている機能はシンプルであることが多いです。

これはWebサービスも同じ。

Subrecoの場合、

・サブスクの管理が一覧で見れること
・カレンダー形式で契約更新日を確認できること
・契約更新日を自動でメール通知してくれること

これさえあれば、Subrecoが提供したい価値の必要条件は満たせていると判断して実装していました。

実装前に大事なのは、Webサービスの機能として「必要条件」と「十分条件」を分けて考えること。

これは過去の自分に何回も言い聞かせたいです。

③自分は使うのかを考える

個人開発でアイディアを出す際に、

①自分起点・・・自分の課題を解決するアイディア
②相手起点・・・自分以外の人が抱えている課題を解決するアイディア

の2パターンがあります。

今回思ったのが、個人開発をするという前提に立って言えば、圧倒的に自分起点で開発するのが良いと思いました。

なぜなら、スタート地点で需要が少なくとも「1つ」は存在しているから。
需要が0の場合はそこからスケールさせようがないですが、1であればスケールさせられる可能性は残っています。

また、1番のヘビーユーザーは自分になるため、あった方が良い機能や操作する中で潜在的なバグに気付くことができます。
最悪、誰も使わなくても自分を助けてくれるツールとして機能するので"一石三鳥"ですね。

まとめ

収益目的で個人開発をすると考えることは膨大にあります。

もしかしたら、あなたも「個人開発で収益を出したい！」と、もがいて、あがいている途中かもしれません。

僕もあなたと一緒です...！

ただ、辛いことや苦しいことがつきものの個人開発ですが、その過程で得られる

「うひょ〜！」という小さな成功体験(考えていた機能が完成した時etc.)
「よし進んでるな」という実感(Todoリストにチェックを入れる瞬間)

これらは圧倒的な揺るぎない自信、資産として必ず残っていきます。

だからこそ、個人開発を続けている方は諦めないで、一緒に頑張りましょう！

僕は引き続きSubrecoの改善を続けていきます！ではでは！

Subrecoを実際に利用してみて、ご要望・感想などありましたら、メッセージ頂けると嬉しいです！^^

一つのサービスかたくさんのサービスか

2022-06-20T00:07:10+09:00

個人でサービス（アプリ含む）を作る時には２通りのやり方がある。それは一つのサービスに集中して開発するか、たくさんのサービスを作っていくか。どちらのパターンにどういうメリットとデメリットがあるかつらつらと書いてみる。ちなみに僕はとにかくたくさん作って特に何も成功していないという事例。

体験できることのバリエーション

サービスを作ると色々なことを体験できる。その体験できることのバリエーションは、当然サービスをたくさん作る時のほうが多い。サービスによって必要な集客方法が違ったり、Webサービスやスマホアプリを作ってみたり、開発時に試行錯誤しないといけない箇所が違ったり。

また、集客をした時の効果や反応も異なる。特にスマホアプリの場合は同じように作って同じように集客したりしているだけなのに全く利用者数が異なってきたりする。こういった内部の実情は実際に色々と作って試してみないと体験できないことでためになる。

一つのサービスしか作っていない場合はこういった部分での体験できるバリエーションは少なくなる。

集中度

ただし一つのサービスだからこそ得られることもある。うまくいかない時に思考錯誤することに集中してあれこれやってみることは一つのサービスのほうがやりやすい。

たくさんのサービスを作ってしまうと、全てに対応しきれなくなってしまう。僕もスマホアプリをいくつか運用している中でいくつかのアプリで問い合わせが来るのだが、全然対応しきれていない。やらないといけないことが多すぎるので、どうしても優先順位を定めて行う必要が出てくる。そのためアクセスの少ないアプリなどはほとんどなにもできず放置じょうたいとなってしまう。使ってくれるユーザーの声は届くのに何も貢献できない状態が続き、心が痛む。こういう時に一つのサービスにじっくり集中できたらな…と感じる。

成功する確率

サービスに人が集まって十分な収益化もできて成功する確率はどちらが高いのか。これは成功してないのでよく知らないがどちらとも言えないと思う。

色々な開発者を見ていると、一つに集中してうまく収益化できている人もいるし、たくさん作ってようやくガッツリ成功している人もいる。また、成功してもたくさん作っている人もいる。

そもそも成功すること自体が難しいのだから、どちらのパターンで作ればOKという答え自体この世には存在しない。どうやって成功するのか、それは自分で考えて、やってみて実際に到達してみるしかない。誰かが成功したパターンが自分に当てはまるということもない。全く同じものを作って同じように運用してみても同じ様になるとは限らない。とにかくやってみるしかない。

もちろん、そのサービスを誰が利用したいのかまわりからみて明らかに全然わからない、という場合も存在するかもしれない。それに盲信的に開発し続けるのは危険な可能性はある。ひたすら無駄に時間を失ってしまう。しかし意外とそれが成功してしまうパターンもあるかもしれない。客観的な目でしっかり色々な点を見つめ、自分で考えるしかない。

まとめ

何もわからん

「引用」をいい感じに展開してくれるサービス「inyoo.jp」をリリースしました

2022-01-17T18:28:45+09:00

inyoo.jp は「引用」をいい感じに展開してくれる短縮 URL サービスです。

ウェブの記事などを読んでいて、文章の一部を SNS に「引用」をしたくなったとき、該当箇所を選択して右クリックから「選択箇所へのリンクをコピー」して、

このリンクの URL を inyoo.jp のトップページのフォームに貼り付けて「引用を作成」を押します。

作成された「引用」を Twitter や Facebook などにシェアすると、こんな感じで引用部分のテキストが画像でいい感じに展開されます！

ちなみにこのリンクは開くとページが自動的にスクロールされて、引用の該当箇所がハイライトされるようになっています。説明を読んだだけだと何がなんだか分からないかなと思いますので、ぜひ試しに使ってみてくださいね！

また、Google Chrome 以外のブラウザや、スマートフォンからの利用方法など、詳しい使い方はトップページの「使い方」に詳しく書いてありますので、そちらをご参照ください。

ここまで読んでくれた方へ

ぜひ試しに inyoo.jp を使ってみてください！！

ご意見や不具合の報告、フィードバックや改善の要望など、何かありましたら Twitter で @inyoo_jp までメンションか DM をお願いします！また、いいねやコメント、SNS での共有などをしていただけると今後の励みになります。

よろしくお願いします！！！

2021年個人的なまとめ：個人制作と技術記事など

2021-12-28T18:17:57+09:00

年末なので超個人的に今年の個人制作とお仕事を振り返ろうと思います。Qiitaでやると会社の宣伝っぽくなっちゃいそうな気もするし、Zennもなんか違うなーって思うので、Crieitで書きます。

個人開発

まずはプライペートの開発から。UXとかやってた割に、個人で何か作るときはサービス開発とかマネタイズとかあいかわらずガン無視です。おかげで一銭にもなってません。。カモン石油王

2021.2 3代目メザシアタック（ゲーム）

ネコメザシアタック21

リポジトリ: https://github.com/yuneco/mezashi21
記事: VueとPixi.JSでアクションゲーム『ネコメザシアタック』を開発して3年目なのでソースと解説

毎年恒例になってしまった猫の日のゲーム開発。今年はPixiでグラを頑張ったらコード量倍増。
技術的には得るもの大きかったけど、なんかダメなゲーム開発の系譜を辿ってる気もするので来年はやるならもうちょいコンパクトにいきたい。

上記の記事には3年分の変遷をまとめているのでよろしければ見てやってください。

開発環境 Vue CLI
言語　TS3.9
Vueのバージョン
- vue: 3.0.0
- vue-router: 4.0.0-0
- vuex: 4.0.0
コンポーネントの書き方: Composition API

2021.7 petite-vueのジャンプゲーム（ゲーム・実験）

リポジトリ: https://github.com/yuneco/petite-vue-example-game
記事: ゲームを作ってpetite-vueを完全に理解する

なんかVueの新しいのが出たぞ！って話で、とりあえず試してみたかった。
正直普段はVite + TSの方が楽なので、あんまり使い所がないのがちょっと悲しい。

petite-vueについては@ojklabさんが文系大学生のためのpetite-vue入門にまとめてくださっているので気になる方は是非（無料...だと...？）

開発環境なし
言語　JS（ネイティブES Modules）
Vueのバージョン
- petite-vue 0.2.2

2021.10 miracle-pencil（お絵描きアプリ）

いい感じになってきた。年内にはリリースしたい pic.twitter.com/bEwiH6fur5
— ゆき (@yuneco) December 19, 2021

リポジトリ（コア）: https://github.com/yuneco/symmpaint
リポジトリ（UI）: https://github.com/yuneco/miracle-pencil

複雑GUI会のペイントソフト回に触発されて始めたプロジェクトでシンメトリーに特化したお絵かきソフトです。万華鏡とか薔薇窓とか魔法陣とかみたいな、円形に対称な図形が並ぶ表現を簡単に作れます。

コアの機能を生Canvas + TSでゴリゴリ書いて、UIはVueでサクッとつけるアプローチ。アイデア自体はずいぶん昔からあったんだけど、ようやく自分のスキルが追いついて実装できた。でも数学弱いから座標が辛い...。。「エンジニアに数学は必要か？」みたいな話題は毎年一度は出てくるけど、「数学できればもっと踏み込めるのに」って思うシーンは多いので、できるに越したことはないんじゃないかなぁ...。

開発環境: Vite 2.6
言語:　TS4.4
Vueのバージョン
- vue: 3.2.16
- pinia: 2.0.0
コンポーネントの書き方: Composition API + Script setup

2021.12 アニメーション粉砕するマン（クソアプリ）※Chrome拡張

リポジトリ: https://github.com/yuneco/animation-pulverizer
記事: 😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】

年末恒例のクソアプリです。個人的に最近Qiitaのアドベントカレンダーは業務参加の真面目な記事増えちゃってちょっと面白くないなーって感じてるのですが（情報発信にポジティブな会社が増えてるからいいことなんですけどね、もちろん）、ここだけは相変わらず無法地帯というか、職務もポジションも全部捨ててやりたい放題な感じがすごく好きです。

結果的にこの記事が今年一番ウケた技術ネタになってしまってちょっとやっちまった感もあるのですが、ツイートやはてブのコメントを見る限りネタとして笑いつつ技術的な部分に興味持ってくれた方が結構いたようで、頑張った甲斐はあったと思ってます。

仕事で書いた記事

会社の仕事は基本的に受託の業務であんまり外に公表できるネタがないのだけど、その代わり記事をいくつか書いてます。
今年は「バズり狙いはせず、フロント界隈のために自分が必要だと思ったことを書こう」って趣旨で、できるだけ表層的なライブラリとかテクニックとかの話題は避けるようにしてました。まあ結果はお察しなのだけど、それでも良いのです（強がり）

VS Code & TypeScriptとp5.jsで始めるモダンなクリエイティブコーディング入門

Processing界隈とフロントエンド業界、近いように見えてあんまりオーバーラップしてなさそうだっので、うまく橋渡しできないかなーって気持ちで書いた記事。もっとフロントの人もクリエイティブな作品作りに触れて欲しいし、Processingから始めた人は是非モダンな環境でパワーアップして欲しい。

あと、個人的にはこのOGP画像は結構頑張って作ったので、可愛いって言ってもらえて嬉しかったです。

もう誤魔化さない！CSS Transform完全入門(2D編)

CSS Transformをちゃんと解説してる情報って意外と少ないなーって思って書いた。transformって結構仕様複雑で普通に使っててハマる落とし穴も多いと思うんだけど、みんなどうやって回避してるんだろう？あんまり伸びなかったけどすぐに古くなる情報ではないので長く誰かの役に立って欲しい。

もう誤魔化さない！CSS Transform完全入門(3D編)

2D編の続きで書いた。正直transformの3Dはイロモノすぎて自分でも微妙だなー、とは思う。でもこの情報は2Dと3Dでセットになってることに意味があると思うので、後悔はしていない（強がり）

jQueryからTypeScript・Reactまで！Viteで始めるモダンで高速な開発環境構築

流行りのネタは書かないといいつつ、これだけは書きたくて書いた。「これはそこそこバズるだろう」って思って書いたものが想像通りにはてブのホットエントリーに載ると嬉しいは嬉しいけどやっぱちょっと微妙。まあでもViteの話題は有益だと思うのできちんと整理した情報を出せたのはよかった、かな。

Twitterかどこかのコメントで「今更IEとか、もうよくね？」って言われていて、それについては完全同意です。でもその層にも振り向いて欲しかったんだ。

個人的にはIEを正しく終わらせることはエンジニアみんなの責務だと思うので、2022年は頑張りましょう。

コンポーネントを小さく・きれいに設計しよう　Vue Composition APIを活用したコンポーネント分割術

コンポーネントの責務や単一責任の原則、Fat Componentの回避...みたいな設計論の表層をできるだけ実例ベースで柔らかく紹介した記事。難しい理論は私自身あんまり理解できてないっていうのもあるけど、これくらいの柔らかさが読み物としてはちょうどいいと思う。

この記事は実は社内向けの啓蒙の要素もあって、その意味でも個人的にはちょっと頑張った。弊社のようにシステム開発というよりもWeb制作に近い領域で仕事してると、コンポーネントの分割が「ざっくりページ単位」みたいに大雑把になりがちで、見た目とは違う軸でのモジュール設計って中々考える機会がないのです（でも、やらなくていいってわけではないのが問題）。

多分同じような領域で仕事してる他社さんも似た課題持ってるんじゃないかと思う。

プログラミングの幅を広げよう！　一段上のPromise活用テクニック

プログラミングの幅を広げよう！一段上のPromise活用テクニック

今年最後の記事はPromiseネタ。PromiseはQiitaでちょくちょくトレンドに上がるふんわり概要記事と、『JavaScript Promiseの本』みたいな本格的な本の中間が薄いなー、って思って書いた記事。

Promiseってほんと良くできてて使いこなせると世界が広がるのに、何故かあんまり重要視されてない気がする。モーダル出すのもAPI叩くのも個別のライブラリはあるけど、実際それだけに頼れないケースは少なくないので一度生Promiseと戯れておくのは良いと思います。

そんなに伸びはしなかったけど、意図が伝わった感のあるコメントをいくつかいただけたのが幸い。

おまけ

ちなみに今年一番伸びたのはBlenderで作ったたまさんでした🐱

Blender入門して1ヶ月かけてようやくここまで…色々粗はあるけど…可愛いから…見て pic.twitter.com/I6fp5TLzL0
— ゆき (@yuneco) August 9, 2021

そんなわけで来年もよろしくおねがいしますー

【個人開発】踏破した都道府県を日本地図でシェアできるWebサービス「日本踏破図🗾」を作りました

2021-12-27T23:20:34+09:00

はじめに

「日本踏破図🗾」というWebサービスをNuxt × Vuetifyで個人開発しました！

日本踏破図🗾

どんなWebサービスか

踏破した都道府県を日本地図でチェックすることができ、自分が今までに日本をどれだけ踏破したかをみんなにシェアできます👍
以下のように日本地図上で都道府県をチェックできます。これをシェアボタンでシェアすると・・・

以下のようなOGP画像でシェア可能です！地図のカラーも好きな色に変更することができます。

使用したフレームワーク・インフラなど

NuxtJS（Nuxt Bridge）
Vuetify
vuex（vuex-module-decorators）
PWA
Vercel（Serverless Functions）

主なものになります。多機能なWebサービスではないのでそんなに色々使ってはいません。
よく使うNuxtとVuetifyでフロントを構築して、NuxtのNitroエンジンを使ってVercelのServerless Functionsへデプロイしています。

当初はSSRにするつもりはなかったのですが、動的OGPを実装するために色々試行錯誤した結果SSRにしました。ただ、Nuxt3／Nuxt Bridgeから使えるようになったNitroエンジンのおかげで高速&ゼロコンフィグでVercelを利用できます。

苦労したところ

動的OGPをどう実装するか

正確に言うと「いかに簡単かつ無料で実装するか」に苦労しました。
検索するとfirebaseを使ってmetaだけSSRしたものを返してリダイレクトさせる等々、実現方法自体は色々でてきます。

ただ、正直なところこの規模・機能のWebサービスにそこまでしたくなかったんですね（できるだけシンプルな作りにするということも最初に決めていました）

最終的に実装した方法は以下です。

OGP画像を生成して画像を返すServerless Functionsを用意する
Functionsへ画像生成に必要な情報(チェック済みの都道府県、地図カラー)を渡す

必要な情報をURLパラメータに持ち、それを利用してmetaタグのog:imageのエンドポイントを作っています。
そのためサービス自体はSSRする必要がありますがVercelを使えば十分な無料枠でServerless FunctionsでSSRできます。

個人的には下手にhackyな方法をとるよりも、SSRが必要な場面ではおとなしくSSRしておいた方が良い気がします🤔
（結局のところTwitter・Facebookのクローラーのためだけにあれこれやりたくない）

ちなみにNetlifyにPrerenderingという機能があるのですが、これを有効にすることで事前レンダリングされたHTMLを返すことができます。
SPA構成にしてPrerenderingを試してみたのですが、どうもPrerenderingの対象はUserAgentを見ているだけらしくTwitterクローラーであればNetlify Functionsのエンドポイントも問答無用でPrerenderingされるみたいでした。
なのでOGP画像を返すはずのFunctionsがTwitterクローラーの時はPrerenderingされてHTMLを返すようになってしまい、OGP画像が表示されず使えませんでした。。

まぁ、NetlifyのPrerenderingはキャッシュ時間(24〜48時間)もコントロールできないし、なによりBETAなのでまだ実用的ではないですね。。

サイトデザイン

デザインというのはセンスだと思っています。つまるところ、それを磨くためには多大な時間・努力が必要ということです😉
私はデザイナーではないのでそこについて時間をかけて勉強するのは得策ではありません。
悩み・試行した結果、全体的にカードベースのデザインになりました。

また、根本のデザインはいわゆるUIフレームワークに頼るわけですが今回はよく使うVuetifyを利用しました。Vuetifyのコンポーネントを使うことで何も考えずそこそこきれいなサイトができあがります。

https://vuetifyjs.com/ja/

ただ、今回は個人的にやってみたいと思っていたGlassmorphism（グラスモーフィズム）チックなデザインを実装しました。
これが間違いで、Vuetifyはマテリアルデザインを実装するフレームワークなんですね。それに対してマテリアルデザインからかけ離れるようなものを実装すると色々と歪みが生じます🙃

importantを使ってVuetifyのcssを上書きして実装しましたが、こういうことをする場合はTailwind CSSを利用するべきでした。。

https://tailwindcss.com/

運営コストについて

現状、ドメイン代オンリーです。
上の方でも少し書いていますが個人開発においては無料で運営できることにこだわっています。

まぁ、お金はかからないに越したことはないし、お金がかかってくるとちゃんとメンテしなくちゃとか、マネタイズ考えないと！とか思ってしまうわけですが無料であればひとまず放置で問題ないですからね。

ちなみに、このWebサービスでは最初からマネタイズは一切考えていません。機能的にサービス自体がマネタイズにつながるものでもないですがアドセンス等の広告等も一切はらないと決めて開発をスタートしました。

サイトパフォーマンスについて

使っている技術からもわかるかと思いますが、パフォーマンスは問題なく良いです。
特にSSRするとやっぱり初期描画のパフォーマンスがすごいです（コールドスタート時以外）

いくら無料のインフラにこだわっているかといってパフォーマンスを犠牲にしたらお話にならないですからね😉

機能の説明

日本踏破図🗾でできることを改めて説明させていただきます。

日本地図で踏破した都道府県をチェック

日本地図上の都道府県を選択することができます。選択状況した数によって日本をどれくらい踏破したかがわかります。
また、シェアボタンから踏破した都道府県をシェアすることができます❗

日本地図のメニュー

地図メニューから、それぞれの機能を利用できます。

地図をリセットする（都道府県の選択状態・色をリセットする）
地図の色を変える（日本地図の色を変更できます）
日本を踏破する（すべての都道府県を選択状態にします）
コピー（日本地図をクリップボードへコピーします）
ダウンロード（日本地図をpng画像としてダウンロードします）

チェックボックス

日本地図上から都道府県を選択する以外に、チェックボックスでも選択することができます。チェックボックスで選択すれば連動して日本地図上の都道府県も選択状態になります。

ソースコード

日本踏破図🗾のソースコードはMITライセンスで公開しています👉

https://github.com/k-urtica/traverse-japan

さいごに

登録ログイン不要で使えるのでぜひ使ってみてください。
よろしくおねがいします！

🌐 サイト：https://traverse-japan.dev/
👀 開発：K
🚩 ソース：https://github.com/k-urtica/traverse-japan

おまけ

Web ToolBoxというブラウザで無料で使えるツール集を公開しています。
こちらもよろしくおねがいします。

https://web-toolbox.dev/

個人開発ふりかえり ver.2021年

2021-12-05T00:06:11+09:00

この記事は個人開発 Advent Calendar 2021の5日目の記事です。

今年ずっとつくってたサービスも無事正式リリースできたので、
個人開発について振り返ってみようかなと。

はじめたころからすると目的もだいぶ変わってきてるけど、
こんなに長く続けられる個人開発ってたのしい(*´ω｀*)

2021年につくったもの

振り返ってみると4つも作ってた(*´ω｀*)

4月: ウマ育ノートをリリース
ゲーム・ウマ娘のお助けアプリ
7月: CoCoガチャをリリース
カレーのトッピングをガチャで決めるネタアプリ
Crieitのweb1weekへの投稿作
10月: PRESS-DONEをリリース
プレスリリースの送付記録サービス
12月: SSSAPIを正式リリース
GoogleスプレッドシートのAPI化サービス

あと、積読ハウマッチもちょこちょこアップデート

ほぼ、SSSAPIをがんばっていた年。
ほかの3つのアプリもSSSAPIを使ってるので、ほぼ一色に。

SSSAPIについてはこちらの記事にまとめたので、もしよければ！
・スプレッドシートをWeb APIにできるサービスを作ってみた - Qiita

目的の変化

かれこれ8年くらい個人開発をしてるけど、
目的がだいぶ変わってきた気がする。

はじめはストレス発散

いま思うと、ストレス発散だったとかも。

だんだんコードを書く機会がなくなって、
コードを書けないストレスの発散する場所だったかもしれない。

なので、「コード書ける〜たのし〜」という感じで、
コードを書くこと自体が目的だった。

新しい技術を試す場所

新しい技術とかはフィードを見ているくらいだったけど、
いろんなライブラリや言語などを個人開発で試すように。

記事を読んだり、サンプル動かすだけだと身につかないけど、
実プロジェクトで試せるので、理解も深くなる。

「個人開発で試す」→「本業で導入する」
という、このサイクルがとてもよくて、
新しめ技術でも自信を持って提案できる気がする。

「個人開発＝新しいものを試したり、訓練する場所」
という感じだったかも。

新しい領域へのチャレンジ

このサイクルにも慣れてきて、自由に作れるようになると
「あわよくば、これで暮らしていきたい。。」
という気持ちが湧くように。。ほんと、人間は欲深い。。

そうなると、広報とか営業とかQAとか
いままでの開発以外にも力を入れていくことが大事。

なので、今は開発以外も含めて、
どう運営していくのがよいかを考えることが多くなってきた感じ。

本業だと別の領域にチャレンジできる機会は、
なかなかないので、これも個人開発のいいところ。

個人開発はたのしい

なんでこんなに長く続けてるんだろう？
と考えてみると、この3つなんじゃないだろうか。

なにもかも自由
フィードバックがダイレクト
個人でもひとりじゃない

(もちろん、個人開発ドリームもあるけど(*´ω｀*))

なにもかも自由

独立してフリーランスになったときも、
自由だと感じたけれど、それ以上に自由。

作りたいものも、使いたい技術も自由に選べるのがいい。

仕事となると、作るもののテーマは大体決まっているし、
安定している枯れた技術やチームにあう言語など、
いろんな制約を考えて決めたりする。

個人開発なら、そんな制約も無いので、
「ぼくがかんがえたさいきょうの構成」
なんてのもOK。

上で書いたとおり、目的すらも自由なので、
心のままに楽しめるのがいい(*´ω｀*)

フィードバックがダイレクト

なにもかも自由である反面、
すべての責任があるのも醍醐味の一つ。

いいこともわるいこともあるけど、
ストレートにフィードバックが来るのは刺激的。

本業だとほめられることが少ないけど、
9対1くらいでいいフィードバックなのでたのしい。

わるいフィードバックも改善点の指摘なので、
どちらのフィードバックもとってもありがたい(*´ω｀*)

個人でもひとりじゃない

自分でそういう情報を追っていっているというのもあるけど、
意外と個人開発者はたくさんいて、コミュニティや勉強会/もくもく会も多くある。

ぼくも運営者ギルドというコミュニティに参加させてもらってるけど、
・リリース前のサービスにバグ出し/アイデア出しするバグバッシュや
・ 1ヶ月の活動内容を報告する月報
なんてのも開催されていて、それをみると「がんばるぞ！」って気持ちになる。

コードを書くのは一人だけど、コミュニティやTwitterを見てても、
がんばっている同志がたくさんいる感じなのが、続けられるのかも。

それと、フィードバックがダイレクトな効果なのか、
ユーザさんと一緒に作ってる感じがすごく強い。

最初のプロトくらいまでは自分だけだけど、
いろんなフィードバックを取り込んでいくうちに、
「自分だけで作ったサービスじゃない感」が出てくる。

ユーザさんが増えていくたびに、
気づかなかったことや自分にない視点が増えていくのがたのしいし、
より喜んでもらえるようにとやる気が出るからかもしれない(*´ω｀*)

おわりに

振り返ってみて思ったけど、目的すら自由な個人開発ってすごい(*´ω｀*)

【PR】SSSAPIをリリースしました！!

スプレッドシートをWeb APIにできるサービスをリリースしました🎉
・ 1件取得/フィルタリング/ページング/ソートもできるAPIを簡単作成
・ドメインやアクセストークンによるアクセス制限もOK

「お知らせとかリリースノートを作りたいけど、
毎回ビルドするのも、管理画面をつくるのもめんどくさい。。」

ってときに便利です!!　スプシが管理画面になっちゃいます!!
無料枠もあるので、ぜひぜひ遊んでみてください(´ω｀)

GoogleスプレッドシートのAPI化サービス
「SSSAPI」

＼㊗️正式リリース㊗️／#SSSAPI の正式版を公開しました🎉開発開始から9ヶ月...無事リリースを迎えられました😭β版でのご協力、ありがとうございます🙇‍♂️まだまだ不便なところもございますが、より一層便利になるよう改善がんばります💪💪💪#拡散希望RTお願いします https://t.co/znp6CJGZEs
— 【公式】SSSAPI / GoogleスプレッドシートのAPI化サービス (@sssapi_app) November 30, 2021

【Twitter連携サービス】連続ツイートをスレッドまるごとダウンロードできるWebサービスを公開しました

2021-11-26T13:02:23+09:00

Twitterを見ていると、とても参考になる連続ツイートをしている人がいらっしゃいます。

私はそういうツイートを見つけるとブックマークしておき、後でいつでも見返せるようにしていました。

ただ、そういう有益なツイートも、もしツイートしたご本人がツイ消ししたり、アカウント自体が消えてしまったりすると 後で見れなくなってしまいます。

そこで、連続ツイートをWordファイルとしてダウンロードしておけるWebサービス を開発いたしました。

「ツイスレバックアップ」 というサービスです。
https://twibackup.com/

作ったきっかけ

個人開発者界隈で有名（と私は勝手に思ってる）な方が、先日個人開発について参考になる連続ツイートをされていました。

https://twitter.com/sesere115/status/1459167602094133254

「ヒトリッター」というサービスを土日に開発しながら、サービスをリリースしていく中で考えるべきことを連続ツイートする内容です。

定期的に読み返したいような内容だったのですが、ふと「もしせせりさんがツイ消ししたら見れなくなるよな…」「念のため手元にずっと残しておきたいな」と思いました。

そこで、連続ツイートをスレッドまるごとダウンロードする、つまり手元にバックアップしておくためのサービス「ツイスレバックアップ」を開発しようと思い立ちました。
（※せせりさんはよくツイ消しする人、という意味ではありません。）

なぜWordファイル？

PDFファイルでのダウンロードも考えたのですが、以下の理由によりWordファイルでのダウンロードにしました。

画像もWordファイル内に入れ込めるので便利。（これはPDFでも出来ますが）
あとで自分でメモを追記できる方が便利。（PDFだとメモしずらい）
なんならそのままマニュアル化しても良い。

このサービスを使うと何が嬉しい？

このサービスを使うと、やはり一番は 「いつ連続ツイートが消える（見れなくなる）か分からない不安」 から開放されるのが嬉しいですね。
自分で開発して、自分で使ってます笑

あと、Wordファイルでダウンロードしておけば仲間内での共有等も格段にしやすくなりますね。

今後の展開

今後はPDFファイルでのダウンロード等、ニーズに合わせて機能追加していきたいと思います。

なにか欲しい機能があれば教えてください！

【個人開発】（Nuxt.js + Rails）OSSやプロジェクトの、ソースコードを管理するGitHubのように、web上で結合テストをチームで同時に管理・実行・記録出来るプラットフォームを開発しました！

2021-10-25T15:29:45+09:00

はじめに

今回、個人で開発したWebサービス「Itamaster」の本番稼働版をリリースすることが出来ました！
こちらのサービスを開発しようと思った経緯は、ある日会社で、統合テストの管理・実行を行っていたときに、「何故ソースコードの管理プラットフォーム（GitHub等）はあるのに、結合テストの管理プラットフォームは無いんだろう」と思った事がきっかけです。
開発期間は八ヶ月ほど、作業工数は大体700時間です。

弊社、私の所属しているチームは結合テストはExcelによって管理しており、実行記録もExcelを利用しています。
Excelでの管理・実行には、以下のような不便な点がありました。

Excelでの作業は、PCにかかる負荷が大きかったこと。
会社のPCは自宅で扱うようなハイスペックなものではないため、Excelで作業を行っていると、セルをコピーしたりした時にPCがフリーズしたり、突然Excelが落ちて、保存していないデータが復旧しなかったりと、作業中に感じるストレスがとても大きかったです。
Excelだと、複数人で一つのファイルに対する作業が出来ないこと。
共有設定にして複数人で同時に作業すると、Excelが一層重くなったりして、とても実用出来るものではありませんでした。
Excelだと、一つのファイルは同時に一人でしか作業が出来ず、待ち時間の発生するメンバーがいました。
ローカルで作業しているメンバーの作業状況が把握出来ないこと。
私は管理者経験はありませんが、毎日の定時報告会や、Slackでのメッセージを見る限り、作業状況の把握が少しアナログに感じました。
Redmine等の進捗管理ツールも利用していますが、結局は自己申告であり、「どのくらいの作業が終わっていて、残っているのか」を管理者が一目で把握することが出来れば、課題を解決できると考えました。
サマリーレポートや、結果一覧表の作成が面倒
Excelから情報を整理して、Excelに表を作って、割合を求めて、グラフ化して......
テストが追加されたり、状況が変わると、また、情報を整理して、Excelに表を作って、割合を求めて、グラフ化して......
「あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"！！！！！！！」
ってなりました。

開発告知記事を書くのは初めてで、至らない点が多々あるかと思いますが
サービスの紹介、開発時の苦労や反省、所感を統括して書きたいと思います。
最後まで読んでいただければ幸いです。

【Twitterリンク】
https://twitter.com/@itamaster_

【Itamaster】
https://itamaster.work
PC推奨です。

【Itamaster　操作ガイド】（Itamasterのヘッダーと、フッターにも操作ガイドリンクを設置しています。）
https://qiita.com/Itamaster/items/3c271181e0c9c06d1d08

使用技術

npm 7.6.3
nuxtjs 2.15.3 (SPA モード)
- サクサクと、Excelのようなもっさり感やストレスの無いUXにしたかったため、SPAによって構築しました。
@nuxtjs/storybook 4.0.2
- コンポーネントのレイアウト・動作を開発中にリアルタイムで確認出来る、コンポーネントカタログ作成ツール。
  フロントエンドの単体テストの役割も果たします。
vuetify (@nuxtjs/vuetify 1.12.1)
- MaterialDesignベースのデザインライブラリです。
  少し挙動が不安定な点が目立ちました。
ruby 2.6.8
Ruby on Rails 6.1.4 (APIモード)
Device
- ログイン周り。フロントエンドにはトークンを渡します。フロントエンドではトークンをsession storageに一時保存し、axiosのインターセプターに噛ませることで、ログイン機能付きの認証認可を実現しました。
EC2(t2.small)
S3
ALB
ACM
RDS (mysql)
Route53
nginx
Stripe
- クレジットカード決済機能をAPI利用できます。
  顧客情報や、クレジットカード情報を自サーバーで持たなくてよいため、セキュアなシステムの構築が可能です。
  また、同様に、決済機能のAPI利用はリスク管理の面からも有効です。

アプリ概要

結合テストの自動化を行わないチームや、手動でのテストを行いたい状況が対象のWebサービスです。
ユーザーをメールアドレスで招待し、チームを結成。
プロジェクトを立ち上げて、テストスイート毎にテストケースを管理・実行が出来ます。

⇓チームの情報を表示するダイアログ

⇓プロジェクト、プロジェクト内のテストスイートの管理を行う画面

⇓テストスイートの情報を表示するダイアログ

⇓テストケースの情報を表示するダイアログ

⇓テストスイート内のテストケースを実行する画面

また、テスト結果一覧表や、テストサマリーレポートも出力可能です。

こだわった箇所

全体的に、明るい色を起用すること

テストという地味な作業は、設計書作成の次に気が滅入り易くなります。
暗い気持ちになってしまわぬよう、明るい色を起用しつつ、
緑や薄めの青色をメインに使う事で、ユーザーのモチベーションを維持します。

アイコンを多用し、直感的な操作を可能にすること

画面にはアイコンを多用して、文字を読まなくても色とアイコンから、ボタンの機能を推測することが可能です。
直感的に操作することが可能で、作業の効率を向上します。

進捗バーをプロジェクトと、テストスイート毎に表示可能にし、一目で状況を確認可能に

色分けされた進捗バーは、ホバーすることでそれぞれのステータスの件数を確認可能です。

チームの管理者が、「現在プロジェクト全体で、どれだけのテストが完了しているのか」を一目で確認することが可能です。

自分独自のアイコンを設定可能にすること

Itamasterは、GitHubのように、OSSのテストをオープンに行う事の出来るプラットフォームを目指します。
アイコンを設定可能にし、画面に多用することで、今後実装するSNS的な機能が違和感なく利用できます。
（Publicなプロジェクトを表示・検索し、運営しているチームとダイレクトにメッセージをやり取りし、テストを世界中のメンバーと共同して行うような）

サービス改善告知

2021/10/17 サービスに、操作ガイドページ・Demoページを追加実装しました！

操作ガイドページでは、サービス内の全てのボタンや、項目の意味、操作方法やユースケースを記述しております。
Demoページでは、実際の画面にモックデーターを流し込んだものを使い、操作感や使用イメージを持っていただくことを目的としています。
どちらも無料でご利用いただける機能ですので、よろしければお楽しみください！

2021/10/20 トップページのレイアウトを変更しました！

旧：

新：

変更にあたって、具体的に意識した点

設計思想をメインコンセプトとして表示
注目線を意識し、印象付けたい文言を左側に配置する

アニメーションが少しだけ配置されているので、実際に見ていただければ、と存じます！

サービスのこれから

トップページのレイアウト改善

とりあえず、第一課題です。
現状注目線があっちこっちに行ってしまっており、とてもわかりにくいページになっています。
デザインを勉強しつつ、わかりやすく、「使ってみたい」と思っていただけるようなトップページにしたいと思っております。

チーム公開機能の実装

public設定のチームをいくつか表示し、興味の出たOSSのテスト等に世界中から参画希望を出せるようにします。
本来の設計思想である、「何故OSSをGitで管理するように、テストを世界中のエンジニアと管理実行するプラットフォームは無いのか」という疑問を解決する機能なので、じっくり作り込みたいと思っています。
現状は、
・Topics
・Search
・Explore
の三画面を開発して、世界中のチームを見られるようにしたいと思っています。

FirebaseとSSSAPIでプレスリリースを送ったサイトを記録できるWebサービスを作ってみた

2021-10-05T17:05:54+09:00

開発しているGoogleスプレッドシートのAPI化サービス「SSSAPI」をβ版リリースしたときに、
プレスリリースをいろんなメディアに送ってみてた。

せっかく調べてまとめたし、次も使う機会があるだろうと思ったので、
Nuxt/Firebase/SSSAPIの構成でWebサービス化してみた。

プレスリリースを受け付けてるサイトを調べるのは大変なので、
どこに送れるのかな〜と思った方は使ってみてもらえるとうれしいです(´ω｀)

作ったサービス

https://press-done.memory-lovers.com

送付するプレスリリースごとに、どのサイトへ送ったかの状態管理ができます。
それだけのシンプルなWebサービス。

システム構成

基本構成はこんな感じ。

フロントエンド: Nuxt+Buefy
認証: Firebase Authentication
ユーザデータ: Firestore
マスターデータ: SSSAPI

ユーザが更新しないマスターデータはSSSAPIを利用している感じ。

メディアサイトのデータをFirestoreに入れておく形もあるけど、
Firebaseコンソールで追加や編集するより、
スプレッドシートを更新するほうが楽なので、この形にしている。

スプレッドシートの中身はこんな感じ。

SSSAPIはこんなJSONを返してくれる。

[
  {
    "id": 1,
    "サイト名": "TechCrunch Japan",
    "サイトURL": "https://jp.techcrunch.com",
    "送付方法": "メール",
    "isActive": true
  },
  {
    "id": 2,
    "サイト名": "日経クロステック",
    "サイトURL": "https://xtech.nikkei.com",
    "送付方法": "メール",
    "isActive": true
  },
  {
    "id": 3,
    "サイト名": "ITmedia",
    "サイトURL": "https://www.itmedia.co.jp/",
    "送付方法": "メール",
    "isActive": true
  },
]

※「行数をIDとして追加」オプションを使ってるので、idが自動で付与されています。

このスプレッドシートは登録依頼のGoogleフォームと連動しているので、
追加依頼があったら内容を確認してisActiveをtrueにすれば反映されます。

こういった構成は割と多く、本の貸し出し管理と備品管理とかでも使える。
Webサービスからスプレッドシートを編集できないので、
管理者権限とか不要なので、その分フロント側も楽に作れた(´ω｀)

プレスリリースってどこに送れるのかな〜と思った方は、
ぜひ使ってみてもらえるとうれしいです(´ω｀)

https://press-done.memory-lovers.com

SSSAPIはβ版ユーザを募集しています!!

β期間中はプレミアムプランの内容を無料で使えるのでお得！
ぜひぜひ、この機会にお試しいただければ！

わからないところやこんなのあったらいいなぁ〜などあれば、
Twitterやお問い合わせなどからお気軽にご連絡ください〜

GoogleスプレッドシートのAPI化サービス
『SSSAPI』
Twitter: @sssapi_app

https://sssapi.app

開発の励みや記事を書くモチベにもなるので、
いいねやシェア、はてブなどしてもらえるとかなりよろこびます!!

海外進出を目指して、ProductHuntへ個人開発サービスを投稿するまでにやったこと&やった結果を全面的にシェアする

2021-09-30T07:19:35+09:00

初めて作った個人開発サービスで海外進出しようという無謀な挑戦

以下の記事の通り、9月頭に2goというサービスを作って公開しました。サービスの詳細は以下のURLから見てもらえればと思いますが、いくつかの理由から世界での公開を元から視野に入れていました。
https://crieit.net/posts/Github-Issues-2go

英語圏のユーザーも含めたほうがサービスの規模感が大きくなる
サービス内容が日本だけに留まらない共通の需要があると思った
どこかで挑戦しなくてはならないのなら、ここで挑戦しようと思った（無謀）

こういった背景があり、全てのインターフェースは英語で作ってきました。そして、MVPが9月に完成したので、日本でのアナウンスをしました。海外を意識していたので、日本での進め方はあくまでフィードバックを貰えればくらいに思っていましたが、今思えばここからが既に問題なんだなと考えられます。

私の経験をまとめましたので、自分への戒めと今後トライされる方の参考になれば。

日本でやったことと、その結果

日本でリリースしたときにやったことを書いていきます。

Twitterでの開発進捗の共有による露出

私のTwitterアカウントはコチラですが、元々は現在働いている会社のAwarenessを上げるために、自分自身の考えやnoteなどの記事を共有するために使っていたものでした。そのため、インフラやクラウドなどのトピックが中心のため、100強のフォロワーもそういった傾向がありました。ただし、インフラやクラウドもこれからはアプリケーションレイヤーがわかっていないと語れないなと思い、個人開発をすることで開発者の気持ちを理解していこうとしている途中でした。
https://twitter.com/jnakajima1982

Twitterでの取り組み内容

そのため、絶対数としてこういったアプリレイヤーに興味がある人が少ないということもあり、開発進捗を共有したとしても反応がほぼもらえないという状況が続きました。そこで、私は以下を取り組みました。
1. 「#個人開発」や「#今日の積み上げ」といったハッシュタグを使った投稿を増やした
2. 上記ハッシュタグにまつわる個人開発者を中心にフォローを増やした
3. 自分自身で話題を作るより、フォローしている人のTweetに引用RTするようにした
　

結果と考察

「#個人開発」に関しては普段よりはインプレッションが増えましたが、反応が劇的に増えた感じはしませんでした。これには2つの原因があると考えています。「どんなサービスかわかりにくかった（プロフィールもわかりにくかった）」のと、「作っているサービスが英語」だったため、ハードルが高かったのだと思っています。それでも少しずつフォロワーは増え、最終的には今回の取り組みで50フォロワーくらい増えたので、コツコツやっていくことが重要で、指数関数的に上がることになるのではないかなと思っていますので、継続が必要です。

ただし、私のアカウントが公共分野（デジタル庁など）のインフラ・クラウドと、個人開発が混ざっているので、アカウントを分けるべきか非常に迷っています。フォロワー0から作り直すリスクと、複数アカウントを運用することの大変さに応えられるのかに解がないため、一旦は1つのアカウントとしています。

また、「#今日の積み上げ」は、インプレッションが非常に増え、リアクションも同時に増えるのですが、フォロワーが増えません。これは個人開発に留まらないユーザーが大量に流入しているせいだと思いますが、どちらかと言うとお互いに励まし合おうというハッシュタグの位置づけになっていると思われるので、このような結果になっているのだと思います。自分自身の精神安定の観点で、たまに投稿して安心するくらいが丁度いいと思っています。

3については、私自身が有益なことをTweetすることができればいいのですが、いざTwitterの画面を開いてなにか書こうと思ったときに、思いつくことには限界があったんですよね。特に、何がウケるのかみたいなことを考えだしたのもいけなかったんだと思います。なので、フォローしている人は私が興味があってフォローしているわけで、その人が話題にしていることに対して引用RTすることにして、自分の意見を言っていこうと考えました。

これは意外と効果があります。Twitter上での表示のされ方も、元Tweetが強ければ同時に表示されることもあります。また、何より引用RTした相手からのコメントを頂ける確率も高く、それがインプレッションの増加に繋がる結果が多かったと思います。

反省と今後

いずれにしても、Twitterでの認知度向上は一朝一夕ではいきませんので継続した活動が必要ということが身に沁みました。後ほど触れますが、ProductHuntなどは、このようなフォロワーの数が少ない開発者を掘り出して世に出すためのサービスという大前提があるのですが、現実問題として規模の戦いは存在すると実感しましたので、Twitter等のSNSでコミュニティを形成する必要を感じさせられました。

特に英語圏での情報発信を考えると、英語用Twitterアカウントを作ったのですが、日本語用Twitterアカウントだけでも苦労しているのに、英語で書いて運用していくというのはとても大変なことです。そのため、英語用Twitterアカウントはほとんど活動ができていません。

運営者ギルドへの参加

Twitterを徘徊していると、運営者ギルドという存在を知りました。まさに私が陥っているような状況が冒頭に書かれていました。
https://qiita.com/organizations/admin-guild

作ったWebサービス、全然使われない……
どうやってマネタイズしよう
どこまで作り込んでからリリースすればいいんだろう
デザイン難しすぎ
利用規約はどうすれば？
この先どうやってサービスを伸ばしていけばいいのか……
Slackでの運営形態になっており、中の活動が全く見えなかったので、入れていただくかを非常に悩んだのですが、何事もチャレンジだと思ったので、連絡させて頂き、無事入らせて頂きました。

結果と考察

結果から言うと、個人開発をしている人は入ったほうが良いです。下手な質問をしたら、ぶっ飛ばされるのではないかとビクビクしていましたが、そんな事は全くありませんでした。唯一あるとするならば、自分自身で発信したことには多くの意見がもらえてモチベーションに繋がりますが、自分自身で発信しない方はここで何をしていいかわからなくなってしまうと思います。

私は、実運用ではどのようにしているかなどは、こういった限定されたユーザーだけが参加するコミュニティだからこそ聞ける生の声が本当に貴重だと思いました。また、今回のProductHuntのチャレンジなどを好意的に捉えてくださるだけでなく、普段の自分自身の開発の進捗にコメントいただける方もいらっしゃり、個人開発の課題となりがちなモチベーション維持にもなりました。

だからこそ、私自身がコミュニティの一部として、他の方が同様な状況にいる場合には、積極的に自分の経験を還元する必要があると思い、いろいろな方のチャンネルに入るようにしました。

技術コミュニティメディアへのサービス開発記事の投稿

Twitterや運営者ギルド以外では、とにかくサービスを知ってもらえるチャネルを増やそうとしていました。そこで以下の技術コミュニティメディアに記事を投稿してみました。
- Zenn：https://zenn.dev/nice2have/articles/aa15eccd13a23c
- Qiita：https://qiita.com/nice2have/items/28449ae4ef45fef2c671
- Crieit： https://crieit.net/posts/Github-Issues-2go
- ツクログ：https://creators.eightbit.jp/service/item4309.html

以下にそれぞれのメディアの現時点での結果をまとめます（Google Analytics調べ）。Zennは正直きちんと取れているのかわかりません。ツクログは投稿して間もないのと、どこからデータが取れるのかわからずなので、外しています。

メディア	記事閲覧数	サービス流入数	LGTM
Zenn	34	10	4
Qiita	1468	261	7
Crieit	1198	66	1

結果と考察

いずれにせよ、どのメディアにも投稿することは確実に認知度とサービス流入に繋がっていると言えますので、サービスローンチのタイミングだけでなく、書く内容がある限り、投稿し続けると良いと思います、、、が、やっぱり書くのって大変なんですよね。さらに、メディアによってトレンドがあるから、書く内容を変えたほうがよいというのを見たのですが、全く同じ記事を上げているのが現状です。まずは続けることが大事なので、しばらくはそれを継続しようと思っています。

ダイレクトアプローチ

追加でした作業についても記録しておきます。2goというサービスの特性上、Github Issueを利用している/利用見込みのユーザーがターゲットになります。そのため、メディア上にGithub Issueについて記事を書いている人へ直接連絡して実際に利用していただくことで、フィードバックを受けて改善に生かしていこうと思いました。

Google検索からたどり着いた5件にコメントをしてコミュニケーションを図ってみたのですが、どこからも未だ返事がない状況です。Twitter上でキーワード検索してアプローチしたこともありましたが、ちょっと利用用途が異なったようで、試してもらうまでに至りませんでした。

以上のアプローチで、面白いですとか、良いサービスですねなど言われるものの、今思えば、やはり利用されるだけの魅力やユースケースが見出してもらえなかったのだと思いました。

まとめ：日本での取り組み

海外進出を前提に置いていたため、以下の2点の理由で、Githubアカウントでログインしてまで試してくれた人は、2桁にすら行きませんでした。
- 日本での取り組みを正直本気で取り組んだとは言えない
- 英語のインターフェースのため、伝わりづらかった

そこで、Githubアカウントでログインすることのハードルが高いと思い、ログイン不要で誰にでも触れるサンプルを追加開発して提供してみたのですが、こちらも時たま試す人が現れるくらいで、試すことすらしてもらえないのかと打ちひしがれましたorz

ほとんどのユーザーアクティビティ（サービス登録/ログイン/公開設定）が発生すると、Slackに通知が飛んでくるようにしていたのですが、たまにしか飛んでこず、こちらも現時点では自分のログイン動作だけが通知される閑古鳥が鳴いている状態です。

海外編：Product Hunt

つらつらと書いてきましたが、これからが本編です。当時、海外進出しか見えていなかった私は、海外での認知度を上げるための方策を調査していました。調べていくと以下の2つのサービスがマッチすると思いました。

Product Hunt : https://www.producthunt.com/
Indie Hackers : https://www.indiehackers.com/

これらのサービスでは、個人開発者やスタートアップが自分の作ったプロダクトを投稿して、認知度を上げることが毎日のように行われています。ただ、Indie Hackersの方は招待制でしか入れず、Redditなどを徘徊してもInvitation Codeを求める人はいるものの、なかなか何もない状態でそれがもらえる人は見られなかったので、一旦Product Huntにフォーカスすることに決めました。

Product Huntへの投稿を決心

まずは経験者のまとめを読み漁りました。具体的には以下の記事を読みました。この中でも、本当に有効だったこと、今では有効ではないこと、役に立たないことがあるので、それを自分なりに整理していきました。とにかくやれることはやりきらないと、次につながらないと思い計画していきました。

https://crieit.net/posts/7
https://jp.taishikato.com/posts/i-want-to-prove-that-japanese-can-compete-in-english-speaking-countries
https://blog.notsobad.jp/entry/2019/12/23/232807
https://blog.notsobad.jp/entry/bungo-search-product-hunt

Product Hunt攻略計画

先述の記事を読んで私が立てた当日の計画は以下のとおりです。
1. 太平洋時間 0:01（日本時間 16:01）からその日のランキングレース開始。
2. 1時間くらい様子をみて、Google や Facebook からのプロダクトなどのビッグサービスが投稿されていないのを確認してから投稿。
3. Twitter で Product Hunt への投稿を英語でアナウンス。 @ProductHuntをメンションする。
4. Product Hunt 上の紹介ページ URL が取得できるので、それを基に Product Hunt Card 作成（Medium の場合は URL を貼り付けるだけで OK）し、Medium 投稿。
5. ProductHunt の URL を使って Landing Page に反映し、導線を作る。
6. Medium の記事を、Product Hunt 上のプロダクト紹介ページに関連記事として貼り付け。
7. Medium の記事を、Hacker News に投稿（Show HN:をタイトルにつけて投稿）
8. Reddit に投稿
9. コメントが入ったらそれに返信していく。

また、投稿当日までの計画は以下のとおりです。
1. 投稿用のランディングページを作る
2. 投稿用の動画（英語）を作る
3. Medium/HackersNews/Redditの記事を準備する
4. Product Huntのupcoming Productに登録する
5. Product Hunt投稿内容の準備をする
6. 最低限必要な機能の整備（退会機能・規約）
7. 著名なProduct HuntersにReview Requestをして、認知してもらう

簡単に言ってしまうと、以下の2点に集約されます。すごくシンプルです。
- ProductHuntの投稿を魅力的なものにする
- ProductHuntのupvoteを得るための導線をできるだけ多く作る

投稿当日までの準備と結果

順番は前後しますが、投稿当日までの計画について共有します。

ランディングページ

ランディングページはたいして手間もかからなかったのですが、当日投稿しなければ、貼るURLがわからないため、ボタンだけ作ってVueの機能で表示しない状態で準備しておきました。実際のトップページの見えるところにボタンを置いた程度でした。はっきり言ってダサいですね。

改めて投稿後にいろいろ研究してみましたが、以下のような形で誘導するのはとても有効だと感じました。後にわかりますが、こんなレベルの問題ではないことがわかります。

投稿用の動画

ProductHuntの投稿にYoutube動画を付けると、Product紹介の一番最初に表示され、自動的に再生される仕組みになっています。そのため、インパクトがあると思ったのと、これをやらねばやらなかったときの効果が今後わからなくなると思い、動画制作に手を付け始めました。しかしながら、以下の問題にぶつかります。

動画編集に知見がない
動画ナレーションは英語の必要性がある

動画編集に知見がないので、いろいろ調べたところ、ダビンチリゾルブという動画編集ソフトが良さそうで試してみたところ、操作が全くわからず、説明記事をウロウロしていたのですが、わからなすぎて挫折しそうになっていました。ところが、原点に戻って動画のことは動画で、と思ってYoutubeの解説動画を探しました。

そして以下の動画を10分で見たら、一気に進み、こんな私でも動画編集ができるようになりました。基本操作と、動画編集に最低限必要そうな動画を紹介しておきます。

https://youtu.be/duxtN8ixpLo
https://www.youtube.com/watch?v=0J7lqAnP_64&t=194s

ただ、計画もなしに動画編集するとうまく行かなったので、Figmaで整理してみました。ただし、これで一旦動画を作ったのですが、文字だらけでなかなか理解しにくいものになってしまいました。

ここあら紆余曲折があって、ようやく完成した最終版はコチラです。
https://youtu.be/YvcyiAccCBo

先にナレーションの英文を考えて、Google Text to Speechに喋らせて、それに合わせて映像を作成するという手順を踏みました。しかしながら、結果的に動画以前の問題であることも発覚します。

Medium/HackersNews/Redditの記事を準備する

ここから導線となる記事の準備についてお話しいたします。

Medium
https://medium.com/@nice2have/2go-road-to-my-first-webservice-5b38666a7dd8

- 特に制限もないので、自由に書きましたが、タグについては迷いましたね。サービスの特性上、割り当てるべき適切なタグかどれか未だにわかっていません。
- しかしながら現時点でもView数は2です。そのため、こちらもMediumのフォロワーを増やしておくか、単なるプロダクト説明の置き場と割り切るかのどちらかが今後の戦略となりそうです。

HackersNews

- Show HNを付けるというルールを守って投稿
- 付けるURLはMediumのページか、サービス自体のURLかは迷いましたが、サービスにProductHuntへの誘導を用意していたので、後者を選択しました。
- しかし残念ながら、GoogleAnalytics上は、HackersNewsからの流入は０でしたので、もう少し工夫が必要か、流れるのが早すぎて流入が期待できないかもしれません。

Reddit
https://www.reddit.com/r/ProductHunters/comments/px15lq/i_created_my_first_web_site_2go_2go_can_generate/

- Karmaというポイントがないと記事が投稿できないという話を見たので、事前に記事投稿やコメントで参加してみました。特にGithub Issueの必要性などを投稿したりして、反応を窺うなどもトライしましたが、慣れていないせいもあって反応も薄かったです。
- どのSubredditに投稿するかは検討しました。ProductHunt / Github / webdev / SaaS / startups / indieHackers / indieDevelopers等、色々調査しました。ProductHuntのSubredditが最も適切かと思いましたが、あまり活況がないのが心配でした。ただ、それ以外のところでは厳しい反応も予想されたので、シンプルにProductHuntのSubredditを投稿先と決定しました。
- その他細かいことですが、RedditのProfileなどもきちんと整備しました。
- しかしながら、RedditのSpamFilterに引っかかって削除されてしまったみたいです…

Product Huntのupcoming Product

あまり認知されていませんが、以下のようにサービスローンチ前にユーザーとコミュニケーションができるPre-Postサイトを作ることが出来ます。ただここからSubsriberは1人も登録されませんでした。おそらくProductHuntの著名なユーザーが、次期サービスを立ち上げる前にユーザーとコミュニケーションするためのプラットフォームだと感じましたので、私には当分必要ないと思いました。
https://www.producthunt.com/upcoming/2go

Product Hunt投稿内容の準備をする

Product Huntの投稿ページは入力したものが記録されるようになっているので、Submitボタンの直前までを入力しておいて事前に準備しておくことが可能です。今回の画像は、動画作成時に作っていたFigmaデータを画像データに変換して利用することとしました。特に動画は視覚的に、画像は落ち着いて読むように文字を入れるようにしました。

ここで用意しにくいのは、投稿ロゴとして利用できるGIFファイルだと思います。動画や画像イメージは比較的簡単に用意できますが、GIFファイルはどんなものにするところから微妙に悩ましい位置づけです。私は今回動画ファイルを作って出力した後、MovファイルからGIFに変換して利用しました。

目立たせるために、アニメーションというよりは、全体の色が大きく変わることで目につくように意識して作りました。

著名なProduct HuntersにReview Request

先程の記事の中には著名なProductHunterにお願いして、彼らに周知してProductHuntで彼らをフォローしているユーザーに通知されるようにしたほうが良いという記述がありました。一方で、その機能はなくなったのでやる必要ないよというのも見受けられました。ということは、やってみるしかありません。まずは以下のサイトからTop Huntersを探しました。

https://yvoschaap.com/producthunt/

それぞれがどういった方なのかまで抑えられなかったので、上から順番にTwitterを見て、直接DMを送れる人にていねいな英文を書いて送りました。…が、結果的に1人からも返信は返ってきませんでした。おそらく、こういった依頼が定常的に来るので、そもそもDMを開いていない可能性が高いです。既読にすらなりませんでしたので。

では、このアプローチは不要なんでしょうか。その答えは、私のProductHuntの通知ページにありました。以下のようにフォローしているHunterがUpvoteすると、その通知がフォロワーには届きます。つまり、TopHuntersにUpvoteされると知られる確率が高くなるという理解をしています。ただ、彼らからUpvoteされるためにどうしたらよいかは未だにわかりません。Twitterでフォローされるわけもないので、ProductHuntでDiscussionに参加するなどして自分自身の露出が必要なのかもしれません。

その他に可能性があるとすると、以下は検討してみてもよいかと思いました。開発者のクローズドなコミュニティがあり、そこで繋がりが作れるかもしれません。なぜなら、$2,000/yearの有料会員制だからです。だからこそ、人数が爆発的に多いわけでもないですし、コミュニケーションが活発なのかもしれません。ただし、個人開発者がここに投資するのは、英語とお金が必要なので、ハードルが高いとは思います。

https://megamaker.co/club/

投稿当日の結果

改めて、投稿当日の計画を振り返る前に、投稿曜日を検討していました。最初は準備ができた翌日に投稿しようかと思っていましたが、ちょうど週末でした。週末がどう影響するかがわからず、Active User数が減少するのではないかと推測して候補から外しました。また、週明けの月曜日も同様の理由で除外し、現地時間火曜日0時に投稿することとしました。

太平洋時間 0:01（日本時間 16:01）からその日のランキングレース開始。
1時間くらい様子をみて、Google や Facebook からのプロダクトなどのビッグサービスが投稿されていないのを確認してから投稿。
Twitter で Product Hunt への投稿を英語でアナウンス。 @ProductHuntをメンションする。
Product Hunt 上の紹介ページ URL が取得できるので、それを基に Product Hunt Card 作成（Medium の場合は URL を貼り付けるだけで OK）し、Medium 投稿。
ProductHunt の URL を使って Landing Page に反映し、導線を作る。
Medium の記事を、Product Hunt 上のプロダクト紹介ページに関連記事として貼り付け。
Medium の記事を、Hacker News に投稿（Show HN:をタイトルにつけて投稿）
Reddit に投稿
コメントが入ったらそれに返信していく

まず、予約投稿機能があるので、試してみましたが、正常に動作しませんでした。もしかすると私の現地時間の入力時間が間違っているかもしれませんが、念の為日本時間16時にはPCの前にいたほうがいいかもしれません。

投稿後の動きの感想

現地時間0時のタイミングでは、少しでもUpvoteを稼いだProductが上位に行きやすいです。そのため、初速を確保する知り合いやコミュニティへの事前声掛けは重要だと思いました（ただし、Upvoteを直接的に促してはいけません）
必要初速Upvoteは10くらいだと思います。トップページに表示できるProductにも限りがあり、そこに載れなければ閲覧数も獲得できないです。
必ずUpvote順にソートされるわけではありませんでした。コメントなどの他の要素も見ていると思われます。コメントはUpvote同様に初速に影響する可能性があるので、できれば事前に確保しておきたいところです。ただし、日本人のコミュニティにおいて、Upvoteはしてくれても、コメントまでしてくれる人を確保するのは至難の業だと思います。
コメントがないと盛り上がりに欠けるのか、追加のコメントが得られにくいと思います。私はただの1つもコメントを最後まで得られませんでした。他のProductは、共同開発者などがコメントし合うことで盛り上がりを演出している印象を受けました。
コメントが来たら返信しながら、投稿スレッドを盛り上げる準備をして待っていましたが、杞憂に終わってしまいました。

結果と感想

最終的な結果はUpvote x15となりました。結果をまとめていきます。
- Upvote x15(しかし、運営者ギルドから半数くらいはUpvoteしてくれた方がいたと思います)
- 流入トラフィック x5(ほとんど流入が見込めませんでした)
- 新規登録ユーザー数 x0(残念ながら一人も使ってくれませんでした)
- サンプルを試したユーザー数 x2(流入トラフィックの割に確率が高かった)

重要なのは…

とにかく初速Upvoteを増やして、トップページに載らないと何も始まらない
流入さえしてくれれば試してもらえる率はそこそこある
投稿内容（文章・動画・画像）の良し悪しが影響するのかはわからなかった
導線はほとんど影響しなかった（影響するように仕立て上げるには継続的な活動が必要）
TopHuntersに認知される方法があれば、Upvoteを得るための近道になるかも。

ProductHuntへの挑戦は惨敗

多くの方にご協力を頂きましたが、残念ながら私の個人開発サービスのProductHunt挑戦は惨敗に終わったと言って良いでしょう。ただし、考えうる限りのことはやり切ったので、次に繋がる敗戦だと考えています。

海外進出のサービスの難しさを以下の点で痛感しています。
- 海外でウケるサービスとかユースケースが、真の意味で理解できない可能性
- 海外で求められるデザインやマーケティング・言い回しが適切かどうかわからない
- 海外でのコミュニティ参加は更に負荷がかかるため、労力に見合うかが不安
- 番外編）ユーザーに提供する規約の英文精査が難しい

英語で開発すれば、非常に多くのユーザーに対する市場へのアプローチが可能ですが、このような深刻な悩みがついてまわることになります。いくつかの記事にもありましたが、英語圏の感覚を持つ人にヘルプしてもらわないと難しいかもしれません。

最後に…

想像してよりもずっとずっと個人開発は難しいです。プログラミングの世界だけでなく、デザイン・マーケティングまで1人で取り組まなければならず、かつアイデアの捻出とその中からの選定も全部自分の責任です。だからこそ楽しみがあるわけですが、大変さも同時に存在しています。

企業よりも個人開発が気楽な分、企業よりもマーケティングや作業分担にお金がかけられません。特に個人開発はサービスが知られることがなければ、提供するユースケースが知られていないから失敗しているのか、知られていても失敗しているのか判断が難しくなります。

そこでやはり重要となってくるのが、コミュニティだと思います。自分の作るプロダクトに意見を言ってくれる、試してみてくれる、拡散して届けてくれる人たちとともに歩まねば成功はあり得ません。そしてそれは継続的な努力によってのみ得られるものだと感じました。

私にとって今回の開発は本当に作りたいものに対する準備の意味合いも兼ねていますが、コミュニティとともにモチベーションを維持し、成功の模索をしていきたいと思います。

ということで、ぜひ気になる方はTwitterのフォローと、2goの利用をしてみて、フィードバックをいただければと思いますので、最後にリンクを貼って終わりにさせていただきます。

https://twitter.com/jnakajima1982
https://2go.plus/

ありがとうございました！

つくってるWebサービスのユーザ数が15倍になったときにやった5つのこと。

2021-08-29T17:21:16+09:00

先日、開発中のサービスのオープンβ版を公開したら、4日でユーザ数が15倍に。。
想像以上の反響だったので、どんなことをやってたかをまとめてみました。

リリース後のプロモーションはいつも困っているので、、
これから何かを作ろう、リリースしようとしている人の一助になれば。

※注意※
・元のユーザ数が少ないのですごく増えた感あり。運要素が強めです。
・実際のユーザ数やデータはちょっとはずかしいので有料にしてます
　(Crieitの有料記事機能を使ってみたかったって理由も)

実際にやったこと

LPや事前登録サイトを公開
運営者ギルドでバグバッシュしてもらう
PR TIMES等でプレスリリースを公開＆ツイートする
Zenn/Crieit/Qiita等で記事を公開＆ツイートする
RTされやすそうな時間帯にセルフRTなどする

実際のやったときの流れ

7/6(火): 事前登録サイトの公開&PR TIMESでプレスリリースを公開
7/10(土)-7/12(月): 運営者ギルドでバグバッシュ
8/24(火): PR TIMESでプレスリリースを公開
- → プレスを元にした記事をデジタルシフトタイムズさまから公開
- → この記事がはてなブックマークのテクノロジーでホッテントリに!!
- → ホッテントリに入ったので、Discoverで表示(Google砲)!!
- → つられて、SSSAPI自体もホッテントリに!!
8/25(水): Zennで記事を公開
- Firestore最高だけど、初期データとかマスタデータ管理がめんどくさいので、スプレッドシートをAPI化サービスを作ってみた
- → トレンド入りし、トップページに表示される!!
8/26(木): Qiitaに記事を投稿
- GASでもできるけど、スプシをAPI化するサービスを作ってみた。そして、そのときハマったこと。 - Qiita
- → トレンド入りし、トップページに表示される!!

それぞれ記事を投稿したら、朝/昼/夜くらいでセルフRTなどしてました。

(フィードバックやいいね/RTで拡散で協力してくれた方、ほんとありがとうございます!!)

1. LPや事前登録サイトを公開

まずは、トップページのみの事前登録サイトを作って公開してました。
事前登録の受付は、Googleフォームの簡易的なサイト。

事前登録のプレスリリースを打つためもありますが、
サービス名を検索するとヒットするように、あらかじめ用意していました。

ツイートへの反応や登録者数なども、ウケそうかのどうかの判断材料に。

2. 運営者ギルドでバグバッシュ

運営者ギルドは、Webサービス運営者が集まっているコミュニティ。
すごい人ばかりで、Slack内も知見がすごいですが、
その中のイベントの一つ、バグバッシュをしてもらいました。

バグバッシュは、「リリース前にみんなにさわってもらってバグを見つけよう！」
という活動なのですが、バグだけでなく、どこがわかりにくい？なども聞けることも。

みんなそれぞれ運営しているので、いろんな視点のフィードバックが集まり、
自分では気づけないポイントのコメントを多くもらえました。。！

そのフィードバックを踏まえ、改善＆ブラッシュアップ。

3. PR TIMES等でプレスリリースを投稿

PR TIMESにプレスリリースを投稿すると、
各種メディアに掲載され、露出が増えるので、活用しています。

配信のタイミングは、以下の記事を参考にしていて、
火曜日の朝10時10分にしました。
・プレスリリースの配信タイミングは？曜日・時間を戦略的に決定して効果を最大化させよう

また、会社設立日から2年は無料枠がもらえる、
スタートアップチャレンジを活用しています。

・スタートアップチャレンジ｜PR TIMESプレスリリース無料配信プログラム

4. Zenn/Crieit/Qiita等で記事を投稿

なにか作ったら各種サイトに記事を書いてます。
今回はZennとCrieitとQiita。
(Zennはずっと投稿したかったけど、ネタがなかったけど、初Zennできてよかった(´ω｀))

それぞれトレンドに掲載されると露出が増えるのもあるけど、
LPやトップページには書ききれないことを記事で補足している感じ。

今回は、以下のテーマでそれぞれ書きました。
・Zenn ... なんで作ろうと思ったかの理由と経緯
・Qiita ... システム構成や技術要素
・Crieit ... PRのためになにをしたか(この記事)

特に、Crieit独自の機能である、カノニカルが設定できるのが好きで、
Zennなどに投稿するときは合わせてクロス投稿しています。

いいね等が集計時に5〜10くらいつくとトレンドに乗れるっぽいので、
記事書いて、ツイートして、RTして、たくさん祈ります🙏

Qiitaは毎日5時/17時に更新されるので、
集計対象の時間が長くなるよう、その時間くらいに投稿がよさそうです。

5. RTされやすそうな時間帯にセルフRT

プレスリリースや記事を投稿したときもそうですが、
Twitterで伸びる曜日と時間帯というツイートを見てから、
なるべくこのときに投稿するように意識しています。

【データから見るTwitterのツイートが伸びる曜日と時間帯🔥】◼︎平日・5:00、11:00、15:00、20:00◼︎休日・8:00、12:00、14:00、16:00→多くの方が通勤時間帯や夜間がユーザー数が多い為、良いと考えているが、実はタイムラインの流速が早くツイートが流れてしまう可能性が高い。#デジプロ pic.twitter.com/JHIT9Nv6QK
— デジプロ🔥＠デジタル広告のプロを育てる学習サービス (@digimapro) August 13, 2019

◼︎平日 ... 5:00、11:00、15:00、20:00
◼︎休日 ... 8:00、12:00、14:00、16:00

一日に何回かあるので、他の時間帯にセルフRTを活用。

セルフRTは結構抵抗があったけど、
昔、とあるマンガ家さんが

ツイートしただけではダメ。
何度もセルフRTしない届かないし、見てもらえないよ。

的なことをいってたツイートを見てから、
見てほしいツイートはなるべくRTするようがんばってる。
(イラスト系だと昼あげ/夜あげとかみるので同じ感じ。)

運要素多いけど、やさしいフォロワーさんが
いいね/RTで拡散してくれるので、ほんとありがたすぎる。。

まとめ

こんな感じで、なるべく露出が増えるよう、
サービスを知ってもらえるような活動をしていました。

LPや事前登録サイトを公開
運営者ギルドでバグバッシュしてもらう
PR TIMES等でプレスリリースを公開＆ツイートする
Zenn/Crieit/Qiita等で記事を公開＆ツイートする
RTされやすそうな時間帯にセルフRTなどする

トレンド→はてブのホッテントリ→Google砲、
などのコンボが決まると広く拡散しますが、
0いいねなどよくあるので、いつも運ゲー。。

地道にサービスを改善しつつ、
記事などのコンテンツを増やしつつ、
最後は天にまかせて、がんばっています！

リリース後のプロモーションはいつも困っているので、
これから何かを作ろうとしている人の参考になれたらうれしいです😊

SSSAPIでは、β版ユーザを募集中です！

β期間中はプレミアムプランの内容を無料で使えるのでお得！
ぜひぜひ、この機会にお試しいただければ〜！

GoogleスプレッドシートのAPI化サービス
『SSSAPI』
URL: https://sssapi.app
Twitter: @sssapi_app

記事を書く励みにもなるので、
よかったら、いいねやシェア、はてブなどもよろしくおねがいします!

はてなブックマークはこちらから

※以下、有料コンテンツです※

以下のデータを公開しています。
ちょっとはずかしいので、おもしろいと思ってくれた方は、
コーヒー一杯差し入れるくらいの気持ちで見てもらえれば〜

Google AnaliticsのPV数/流入元
PR TIMESの統計情報
SSSAPIの登録者数とAPI作成数
(おまけ) Twitter広告を試してみた結果

Firestore最高だけど、初期データとかマスタデータ管理がめんどくさいので、スプレッドシートをAPI化サービスを作ってみた

2021-08-25T05:47:03+09:00

開発しているGoogleスプレッドシートのAPI化サービス「SSSAPI」。
無事にオープンβ版を公開できたので、なんで作ろうと思ったかを書いてみた。

http://sssapi.app

なぜ作ろうと思ったか

個人開発が好きで、いろんなものをちょこちょこ作ってる。
今は、Nuxt.jsとFirebaseがお気に入りで、
小さなものを含めると20サービスくらい作ったと思う。

ちょっとしたものを作ることも多く、
「もっと楽に作ることはできないかなぁ？」
といろいろ考えたりしていた。

その時同時に考えていたのが、ゲーム攻略のサービス。
マスタデータが多く、更新も早いので、どうしようかなと。

とりあえず、初期データが必要なので、
スプレッドシートにまとめていた。

データを集め終わって、いざつくろうとしたときに、
「このままJSON APIにできれば楽なのにな〜」
というのが最初だった。

最初はJSONファイル

ゲームの攻略サービスを作っている途中だったので、
まずは、スプレッドシートAPIでJSON化して、
JSONファイルをソースに含める形で開発。

これだけでも割とよく、
とりあえずJSONファイルで開発するのは良い感じだった。

データの項目が足りなくても、
スプレッドシートなら列を追加するだけなので、
データ構造を検討している初期はスムーズに進んだ。

ただ、JSONファイルをインポートしてるので、
ビルドサイズは大きくなるし、
データを更新したいときはビルドしないといけないので、
めんどくさいな思うようになり、API化は必要だなと作りはじめた。

Firestoreで初期データをめんどくさい

今まで作ってきたものを振り返ると、
割とこういうことが多い感じだった。

過去に作ったものでも、カテゴリやお知らせなど、
こちらが用意するデータは、JSONファイルで用意していたり、
JSONファイルの内容をFirestoreに登録するスクリプトを書いていた。

Firestoreは便利なんだけど、
管理画面は自分で用意しないといけないので、
マスターデータを扱いたいときは、めんどうな部分があった。

1つ項目を追加するのにも、JSONファイル＆ビルドだったり、
追加用のスクリプトを書かないといけない。。

SSSAPIであれば、スプレッドシートを管理画面にでき、
そのままAPI化できるので、かなり楽になるな〜と。

実際、楽になって、crieitのweb1weekの企画へ
参加したときに作ったWebサービスは1~2日で開発できた。

他のじゃダメだった？

いざ作るとなると、時間が必要なので、
既存のものはないかな〜と見てみた。

見てみたのは、GAS、ヘッドレスCMS、競合サービスの3種類。

GASは？

一番よく見るのはこれかなと思う。
Google Action ScriptでWebサービスとして公開するパターン。

記事も多くコードもあるので、便利で昔使っていた。

ただ、シートごとにGASの設定が必要だったり、
どれが設定したスプレッドシートか忘れてしまうので、
一元管理ができればな〜と思ったりする。

SSSAPIであれば、毎シートにGASを設定する必要はないし、
登録してあるスプレッドシート=API化しているなので、
一元管理も簡単にできるようにした。

ヘッドレスCMSは？

次によくみるのはヘッドレスCMSかなと思う。
スキーマも柔軟に設定できて、管理画面もリッチ。

ただ、内容がリッチすぎたり、
個人開発だとお高めの価格設定なので、手が出せず。。

「多くのサービスを楽に作りたい!!」と思うと、
無料枠の制限では心もとないなと。。
また、アクセス制限などは有料プランぽいので、断念。

SSSAPIでは、機能は限定的だけど、
個人開発でも使いやすい価格帯になるようにがんばってる。
無料のプランでもドメイン制限を使えるようにしている。

競合サービスは？

今まで聞いたことがなかったけど、調べてみたら、
6つくらい競合のサービスがあった。

もちろん、ヘッドレスCMSよりも安めだけど、
Googleドライブやスプレッドシートへの全権限を許可しないといけない。。
もしくは、全員がアクセスできるように共有設定を変更する必要がある。

Googleドライブやスプレッドシートへの全権限を許可は、
割とこれが強くて、個人情報や機密情報を入れているアカウントだと使えない。

API化したいスプレッドシートのデータ自体も財産なので、
オープンにはしたくないときも多い。

SSSAPIでは、権限を共有するのではなく、
システムアカウントを共有設定に追加してもらう形にし、
共有設定されているシートのみ参照できる方法にしている。

すこし手間ではあるけど、安心・安全のため。

ドメイン制限やアクセストークンによる認証も用意しているので、
APIのURLがわかっていても、アクセスできない仕組みを用意している。

使ってみてどうだったか？

利便性・価格・セキュリティの面から、
作ったほうがいいなぁと思って、開発を進めてみた。

使っているのが、マスターデータが多いものに偏っているけど、

スプシが管理画面になる
ビルドしないで更新できる
ドメイン制限できるので守れる

と、かなり便利に。

他のサービスのお知らせやリリースノートなども、
順次、SSSAPIに置き換えている。

ユーザが作成するデータは、今までどおりFirestoreを使っている感じだけど、
プロトタイプ開発のときやテストデータ作成なんかでも活躍してるので、
最初に思っていた「ちょっとしたものを早く楽に作れる」ようになった気がする。

スプレッドシートで管理するのつらいな。。という規模になってきたら、
JSON APIの結果をFirestoreに突っ込めばよいのもいい。

β版なので、まだまだ足りないところはあるけど、
ユーザさんからのフィードバックとドックフーディングをして、
よりよいものにしていければと思う。

SSSAPIでは、β版ユーザを募集中です！

β期間中はプレミアムプランの内容を無料で使えるのでお得！
ぜひぜひ、この機会にお試しいただければ〜！

GoogleスプレッドシートのAPI化サービス
『SSSAPI』
Twitter: @sssapi_app

🌟🌟オープンβ版の公開開始🌟🌟フィルタリングやページングなど機能を強化し、より便利になりました😊β版はプレミアムプランの内容を無料で利用できます🙌ぜひ、この機会にお試しください‼️‼️GoogleスプレッドシートのAPI化サービスhttps://t.co/fKUGVFeQR7 #拡散希望RT協力お願い致します pic.twitter.com/O2rjs35BZD
— 【公式】SSSAPI / GoogleスプレッドシートのAPI化サービス (@sssapi_app) August 24, 2021

http://sssapi.app

LINE風LINEトーク履歴ビュアーを作った話

2021-04-20T16:55:41+09:00

LINEで「トーク履歴を送信」で取得できる味気ないトーク履歴をLINEのトーク画面風の見た目に変換するWebアプリケーションをだいぶ前に作りました。
せっかくなのでどこかで披露したいと思いポストします。

hidao80/LINEBackupViewer： LINE風LINEバックアップテキストデータビュアー - github.com
https://github.com/hidao80/LINEBackupViewer

てんまつ

Qiitadonにて発生したつぶやきにリアクションがあったのが発端。

curatiodon - キュレーショドン | Mastodonまとめwebアプリ
https://git.io/Jk196

つかいかた

http://hidao80.github.io/LINEBackupViewer/にアクセスしてトーク履歴のテキストファイルをアップロードするとプレビューされます。
「ダウンロード」ボタンを押すとプレビューされた内容をそのまま単一のHTMLファイルにして保存することができます。

また、アップロードされるのはご利用のブラウザまでで、サーバにトーク履歴が保存されることはありません。

※画面は開発中のものです

今のところ1対1のトーク履歴しか再現できず、複数人トークのユーザ切り替えは宿題になっています…

「個人開発」の記事 - Crieit

【個人開発】アイデア出しから公開・プロモーションまでまとめ(Nuxt3、Cloudflare、GooglePlay)

シンプルな買い物リストアプリ「Lisble リスブル 」について

SmartHRと連携して人事データを可視化するツールを作ってみた

エンジニアのアウトプット力を高めるメモ投稿サービスをリリースしました【個人開発】

初のSaaSが12月で1周年なので振り返ってみた

【個人開発】作るのも、答えるのも簡単なWebアンケート「ankeyto」を作りました！

ブラウザだけで複数コピペ保存・共有が出来るWebサイト

サブスクの解約忘れ・無駄遣いを防止するサービス「Subreco」を開発して得た3つの学び

一つのサービスかたくさんのサービスか

「引用」をいい感じに展開してくれるサービス「inyoo.jp」をリリースしました

2021年個人的なまとめ：個人制作と技術記事など

【個人開発】踏破した都道府県を日本地図でシェアできるWebサービス「日本踏破図🗾」を作りました

個人開発ふりかえり ver.2021年

【Twitter連携サービス】連続ツイートをスレッドまるごとダウンロードできるWebサービスを公開しました

【個人開発】（Nuxt.js + Rails）OSSやプロジェクトの、ソースコードを管理するGitHubのように、web上で結合テストをチームで同時に管理・実行・記録出来るプラットフォームを開発しました！

FirebaseとSSSAPIでプレスリリースを送ったサイトを記録できるWebサービスを作ってみた

海外進出を目指して、ProductHuntへ個人開発サービスを投稿するまでにやったこと&やった結果を全面的にシェアする

シンプルな買い物リストアプリ「Lisble リスブル」について