「Laravel」の記事 - Crieit

サブスクの解約忘れ・無駄遣いを防止するサービス「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を実際に利用してみて、ご要望・感想などありましたら、メッセージ頂けると嬉しいです！^^

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

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

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

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

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

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

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

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

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

私の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/

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

Github Issuesをキレイに外部公開するサービス「2go」作ってみた

2021-09-10T06:00:03+09:00

はじめに

今回初めて個人開発で作ったサービスを公開します。今までも何回かトライしていたのですが、なかなか公開までに至らないうちに、なにか問題にぶちあたったり、時間がかかりすぎて情熱が冷めてしまったりしていたので、今回はまずはスモールスタートで公開して改善していくことを心がけました。大体今回の公開まで、開発を始めてから1ヶ月程度になります。毎日朝4時半に起きて、子どもたちが起きる7時過ぎまでを開発時間として取り組んできました。

どんな人向け？

自分で作っているサービスの開発ロードマップをユーザーに公開するために、都度ブログを書いたりするのも大変ですよね。もし、自分のサービスのソースコードをGithubで管理していたとして、Github Issuesを見せるとしてもGithubに馴染みのない人にとっては読みにくいですし、外に出すサービスであればあるほど、Githubのレポジトリは非公開になっていると思います。これをなんとかできないかなと思いました。

どんなサービス？

まずはこちらを見てください。
https://2go.plus/nice2h/2go/roadmap
このようにGithubのレポジトリ内のIssueをMilestone区切りにして、Githubに馴染みのない人にも見やすいロードマップサイトを公開するサービスです。もちろん、非公開のレポジトリを公開設定にすることなく、ロードマップだけを外部公開することができます。

Githubアカウントでログインすると、以下の設定画面になります。レポジトリを選択して、どのMilestoneを共有するかをチェックして保存します。すると、自動的にロードマップサイトのURLが生成されるので、こちらにアクセスすれば常に最新のロードマップを見ることができます。このURLをシェアすれば、多くの人にあなたのサービスのロードマップを簡単にキレイに公開できるわけです。

Milestoneを今まで使っていな方は、Milestoneを作成して、Issueを割り当てればロードマップを整理することができます。また、Labelを活用している方もいらっしゃると思いますので、Milestoneの中のLabelでIssueをフィルタすることもできます。これらを駆使することで、Bugは見せずにenhancementだけ表示するなどのことも可能です。
今後の予定としては、今はMilestone基点で表示しているところを、Labelベースで表示できるようにもしたいと思っています。その他は、まさに上記のURLを参考にしていただければ、いつも最新です。

どんな技術を使ってる?

企業での開発経験はないので、全て自己流です。書籍やWebサイトを中心に勉強して開発しながら学んできました。念の為、利用している技術は以下のとおりです。
- Laravel : APIとBlade（SSRはやってみたことあり）
- Vue3 : フロントエンド（今回初挑戦）
- Tailwindcss : デザイン（Bootstrapからの脱却）
- Docker : これらの開発環境と、本番でもDocker利用（いずれ分割予定）
- Cloud : Conoha VPS(インフラに時間を掛けたくなかった)

気になっていること（随時追加予定）

開発環境はLaravel sailを使いましたが、本番は自前でdocker-compose.ymlを使いました。このあたりのコンテナの構成をどのようにしているか気になりました（本番でもsail使う？）
本番環境にコードをpullしてからnpm run prodしてbuildが終わるまでにラグがあり、この間は使えない機能が出てしまったりするが、このあたりをみなさんはどのように工夫しているか？
DBについては、どこまでレコードを暗号化するか。検索機能などとのトレードオフになると思われるが。。

今後は？

現在alphaフェーズですが、alphaとしてもう1段階リリースの予定があります。多くの人に使っていただき、Feedbackをいただきながら改善して、開発経験を増していきたいと思います。また、今回の個人開発は最初から海外も同様の問題を抱えていると思ったので、最初から英語圏も視野に入っており、今の所すべてのUIは英語にしています。以下の英語Twitterアカウントも作成して、情報発信していこうと思っています。

https://twitter.com/2go_plus

もちろん、日本語のTwitterは私の今まで通りのアカウントを利用していく予定です。
https://twitter.com/jnakajima1982
ぜひご感想・ご指摘をいただければと思います。

【自分用メモ】php artisanコマンド一覧

2021-07-04T01:29:21+09:00

1. コントローラ(Controller)関連

1-1. コントローラの作成

php artisan make:controller [Controller名]

[Controller名]には拡張子は不要。
[Controller名]の命名は「○○Controller」とするのが一般的。

1-2. RESTコントローラの作成

php artisan make:controller [RESTコントローラ名] --resource

オプション「--resource」を付けることで、作成されるコントローラにCURD関係のメソッドを自動的に追加してくれる。

2. ビュー(View)関連

2-1. サービスプロバイダの作成

php artisan make:provider [Provider名]

[Provider名]の命名は「○○Provider」とするのが一般的。

2-2. ペジネーションのテンプレートファイルの作成

php artisan vendor:publish --tag=laravel-pagination

ペジネーション:大量データを一定件数ずつ表示するための仕組み。

3. モデル(database)関連

3-1. マイグレーションファイルの作成

php artisan make:migration [マイグレーションファイル名]

[マイグレーションファイル名]の命名は「create_[テーブル名]_table」とするのが一般的。

php artisan session:table

セッション管理用テーブルのマイグレーションファイルを作成する。

3-2. マイグレーション実行

php artisan migrate
php artisan migrate:refresh
php artisan migrate:refresh -–seed
php artisan migrate:reset

「migrate:refresh」とすることで、テーブルの再作成を行うことが出来る。
「migrate:refresh」にオプション「-–seed」を追加すると、テーブル再作成後にシーディングを実行してくれる。
「migrate:reset」とすることで、全ての作成済みテーブルを削除することが出来る。

3-3. シーダーファイルの作成

php artisan make:seeder [シーダーファイル名]

[シーダーファイル名]の命名は「[テーブル名]TableSeeder」とするのが一般的。

3-4. シーディングの実行

php artisan db:seed
php artisan db:seed --class=[シーダーファイル名]

「-class」オプションを指定すると、シーディングファイルを指定して実行できる。

3-5. モデルの作成

php artisan make:model [モデル名]

[モデル名]はテーブルの単数形とするのが一般的。
例）テーブル：people　→　モデル：Person(先頭大文字)

4. Request,Response関連

4-1. ミドルウェアの作成

php artisan make:middleware [Middleware名]

[Middleware名]の命名は「○○Middleware」とするのが一般的。

4-2. フォームリクエストの作成

php artisan make:request [Request名]

[Request名]の命名は「○○Request」とするのが一般的。

4-3. バリデーションルールの作成

php artisan make:rule [Rule名]

・命名規則は特になし。

参考

PHPフレームワーク　Laravel入門　第2版
https://www.amazon.co.jp/dp/4798060992/ref=cm_sw_r_tw_dp_47YACT8WRZY9QG47TJ68
Laravel マイグレーション（migration）の基本
https://noumenon-th.net/programming/2020/01/17/laravel-migration/
LaravelのSeeding機能を利用してダミーデータを一括挿入
https://reffect.co.jp/laravel/larave-seeding-store-data-in-database#Seed
Laravel 8.x データベース：シーディング
https://readouble.com/laravel/8.x/ja/seeding.html

php(Laravel)でエクセルのインポート機能付けるときに試したもの

2021-05-21T16:23:01+09:00

渡されたデータがエクセルだった

「ほいっじゃあこれ取り込んでね」
と渡されたのは、2~3万行のデータ（エクセル形式）だった。
…えー！CSVじゃないんですかー！？！？CSVはやったことあるけど、エクセルは知らーん！！

ということで、3つほどライブラリを試してようやく機能実装が出来たので、その時のメモです

Laravel Excel

URL：https://laravel-excel.com

これはLaravelのライブラリ（パッケージ？）ですね。
後に紹介するPhpSpreadsheetを基に作られております。
エクセルだけでなくcsvも扱えます。

使い方も特別難しいわけでもなく、
公式ドキュメントを落ち着いて読んでいけば大抵は問題ないはずです。

…がしかぁし！

データ数が少なめのテストデータでは問題ありませんでしたが、
いざ実際の2~3万件データで試したところメモリ不足で死に至りました。（チーン）

php-fpmの設定弄ってみたり、
toArrayがいけないのか？と思いonRowで1行ずつinsertしてみたり…。
かなり色々試行錯誤してみましたが解決には至らず、ライブラリ使用自体を断念しました…。

（もし解決法ご存知の方がいらっしゃいましたら、そっとご教示いただければ幸いに存じます）

PhpSpreadsheet

URL：https://phpspreadsheet.readthedocs.io/en/latest/

くそう、ならば元であるコイツで試してみるか！
てな感じで、半ヤケクソでやってみました。
なお、phpExcelというライブラリの後継版らしいです。

結論、メモリ不足も解決せず、なんなら処理時間も増えて、解決には至りませんでした…。
使用感としては、シンプルで使いやすいなーとは思いました。
また、laravel excelより使用率が高いので、参考にできる記事も多い（日本語記事も多い）という点は良かったです。

Spout

URL： https://opensource.box.com/spout/

救　世　主

メモリ不足問題はこれで解決しました！！！
代わりにCPU使用率がギュイーンと上がりますが。

ただこれ、マイナーなのかわかりませんがググってもほぼ出てきません。
出てきたとしても全部英語です。google翻訳がある世界に生まれてよかった。

基本公式ドキュメントを頼りにやるしか無いので、赤ちゃんエンジニアにはちょっと厳しかったです…。
やりたいことが至ってシンプルだったのでなんとかなりましたが。

気力があれば、使い方のメモも別で書こうかと思います。来世までにはきっと。

なお後日

えらいひと「ちょっとフォーマット変えたので、再度送るで！これで取り込んでくれや！　つCSVファイル」
ワイ「いやCSVで出力できんのかい！！！！！！！！！！！」

～完～

【Laravel】ルーティング（URLと実行する処理の関連付け）

2021-04-11T22:13:59+09:00

ルーティング

URLと実行する処理を関連付けする仕組み。
Webページの場合、「routes\web.php」に関連付けする情報（ルート情報）を記述する。

ルート情報の記載方法

1. Route::get(アドレス, 実行する処理);
2. Route::get(アドレス/{パラメータ}, 実行する処理($引数名));
3. Route::get(アドレス/{パラメータ?}, 実行する処理($引数名=デフォルト値)); 
4. Route::get(アドレス/{パラメータ1}/{パラメータ2}, 実行する処理($引数名1, $引数名2));

[アドレス]：Webブラウザ等で指定されるアドレス
[実行する処理]：関数、HTMLドキュメント、テンプレートファイル等
[アドレス]を指定されたら、[実行する処理]を呼び出して結果を返却する。
{パラメータ}：[アドレス]で{ }に囲まれた部分は、パラメータとして受け取ることが出来る。
{パラメータ?}：[アドレス]で{ ?}に囲まれた部分は、任意パラメータとなる。
　任意なので、パラメータが渡されないこともある。
　パラメータが渡されなかった場合は、実行する処理の「$引数名=デフォルト値」の値が適用される。
[/(スラッシュ)]で区切ることで、パラメータを複数渡すことも可能。

例）
1. Route::get(
        hoge
        , function () {
            $html=' …';
            return $html;
        }
   );
2. Route::get(
        hoge/{fuga}
        , function ($fugaValue) {
            $html=' … $fugaValue …';
            return $html;
        }
   ); 
3. Route::get(
        hoge/{fuga?}
        , function ($fugaValue='パラメータなし') {
            $html=' … $param …';
            return $html;
        }
   ); 
4. Route::get(
        hoge/{fuga}/{piyo}
        , function ($fugaValue, $piyoValue) {
            $html=' … $fugaValue … $piyoValue …';
            return $html;
        }
   );

【参考】

PHPフレームワーク　Laravel入門　第2版（https://www.shuwasystem.co.jp/book/9784798060996.html）

【Laravel】新規プロジェクト作成～サンプルページ表示

2021-04-04T00:06:11+09:00

Laravelの新規プロジェクト作成

ターミナル（cmd, powershell等）を起動する。
プロジェクトを作成したいフォルダまで移動する。
下記のどちらかのコマンドを実行する。

    laravel new [プロジェクト名]

    composer create-project laravel/laravel [プロジェクト名] --prefer-dist

Webサーバ起動

ターミナルで、作成したプロジェクトのフォルダまで移動する。
下記コマンドを実行し、Webサーバを起動する。

    php artisan serve

Webブラウザで下記アドレスにアクセスする。
http://localhost:8000/

【参考】

PHPフレームワーク　Laravel入門　第2版（https://www.shuwasystem.co.jp/book/9784798060996.html）

【VSCode】拡張機能一覧（主にWeb系システム開発用）

2021-03-28T18:20:44+09:00

個人用メモ。
主にPHPを使用して開発する環境で使用している拡張機能一覧。
（他のも混じっているけど）
（後で追加・変更・削除するかも）

VSCode

Bookmarks
　あらかじめソースコード中にブックマークを設定しておくと、他の場所からブックマークまで一瞬で移動することが出来る。
indent-rainbow
　インデントを色付きで表示してくれる。
Japanese Language Pack for Visual Studio Code
　VSCodeの日本語化。

HTML

Auto Close Tag
　自動的に閉じタグを追記してくれる。
Auto Rename Tag
　タグを変更すると、対応する閉じタグを自動的に変更してくれる。
HTML Snippets
　HTMLの予測変換を表示してくれる。
HTMLHint
　HTMLの文法チェックをしてくれる。

PHP(Laravel)

Bracket Pair Colorizer 2
　メソッドやArrayなどで、対となるカッコを色付きで表示してくれる。
php cs fixer
　PHPソースを自動整形してくれる。
　※別途、「php-cf-fixer.phar」のインストールが必要。
PHP Debug
　PHPをステップ実行してデバッグできるようになる。
PHP IntelliSense
　PHPの予測変換を表示してくれる。

【2021.8.8 追加】
* Laravel Blade Snippets
　Laravelのbladeファイル内のタグやディレクティブを色付きで表示してくれる。

Laravel Blade formatter
　Laravelのbladeファイル用のフォーマッタ。
　blade独自のディレクティブもインデントしてくれる（これ重要）。

JavaScript(Node.js,Vue.js)

ESLint
　JavaScriptの構文チェックをリアルタイムで実行してくれる。
　※Vue.jsで使用するには設定が必要。
JavaScript (ES6) code snippets
　JavaScriptの予測変換を表示してくれる。
Vetur
　Vue.jsコードのシンタックスハイライトやコード補完、リント、フォーマットを行ってくれる。

CSS(Sass,SCSS)

IntelliSense for CSS class names in HTML
　CSSクラス名を入力するときに、入力補完してくれる。
SCSS Formatter
　SCSSコードを自動整形してくれる。

その他

Log File Highlighter
　ログファイルの内容を色付きで表示してくれる。
MySQL
　VSCodeでMySQLを使用可能にする。
Rainbow CSV
　CSVファイルをカラムごとに色分けして表示してくれる。
Regex Previewer
　正規表現の実行結果をプレビュー表示してくれる。
SFTP
　サーバへ自動的にソースファイルをアップロードしてくれる。

【参考】

「Visual Studio Code」をインストールしてPHPコードのデバッグ環境を設定する方法
https://incloop.com/visualstudiocodeのデバッグ設定/

Visual Studio Codeで作るPHP開発環境のおすすめ拡張機能17選
https://wonwon-eater.com/vscode-php-plugin/

VScodeの日本語化ができない変わらない時の対処法[Visual Studio Code]
https://rabotiku-sato.com/vscode-japanese-setting

vscodeでVue.jsを書くときに使っているプラグインとか
https://qiita.com/dayoshix/items/c61a75a971331418c348

【HTML編】Visual Studio Code おすすめプラグイン紹介 #02
https://so-da.tech/tech/vscode/vscd3/

VSCodeのAuto Rename Tagで閉じタグも自動変更
https://tech.pjin.jp/blog/2020/04/27/vscode_extension_auto_rename_tag/

VSCode で HTML の文法チェックを行う拡張機能 HTMLHint
https://loumo.jp/archives/26229

VSCode拡張機能『indent-rainbow』でインデントを虹色にする方法
https://onedarling.site/programming/tool/vscode-indent-rainbow/

【2020年版】VSCodeでhtml/css/jsの拡張機能おすすめ
https://uetani33.net/vscode-web-extensions/#toc_id_3_2

VSCode使い必見！？使って便利な Visual Studio Code 拡張機能10選
https://www.geekfeed.co.jp/geekblog/vscode_extension

【超便利】VSCodeでMySQLを利用する方法
https://newmtube07.com/vscode-mysql/

[Visual Studio Code] PHPのコードを整形する「php cs fixer」の設定
https://www.searchlight8.com/visual-studio-code-php/

VSCode(Visual Studio Code)でSFTP・FTP経由でファイルを自動アップロードや同期できる拡張機能「SFTP」が超便利
https://www.karelie.net/vscode-sftp/

Windows10でVisual Studio Code + vue-cliの開発環境構築メモ
https://belhb.hateblo.jp/entry/2020/08/08/142540

【2021.8.8 追加】
LaravelでVisual Studio Codeを使う時に入れておきたい拡張機能3選
https://biz.addisteria.com/laravel-vscode/

Laravel blade formatter VSCode Extensionを作った
https://shufo.dev/2020/10/03/published-vscode-blade-formatter/

VSCodeでBladeテンプレートを整形する
https://blog.nplpl.com/310

LaravelでMaximum execution time of 30 seconds exceededが頻発する場合

2021-02-10T11:02:17+09:00

Laravelで下記のようなエラーが何分かごとに発生していた。

[2021-02-09 17:09:02] production.ERROR: Maximum execution time of 30 seconds exceeded {"exception":"[object] (Symfony\\Component\\Debug\\Exception\\FatalErrorException(code:
1): Maximum execution time of 30 seconds exceeded at /home/app/vendor/symfony/finder/Iterator/ExcludeDirectoryFilterIterator.php:73)
[stacktrace]
#0 {main}
"}

ちなみに環境はPHP7.4、Laravel5.7とフレームワークはちょっと古め。最新ではもしかしたら全く同じ環境でも出ないのかもしれないし出るかもしれない。

根本的な原因としては処理が重くて30秒で終わらず強制停止になってしまっていること。そのため停止位置は下記のようにばらつきがある。

vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php
vendor/symfony/finder/Iterator/ExcludeDirectoryFilterIterator.php
vendor/symfony/finder/Iterator/RecursiveDirectoryIterator
vendor/symfony/finder/Iterator/DateRangeFilterIterator

stacktraceも空のため、何をやっている途中で発生しているのかはわからない。

解決方法

原因はわからないが、色々調べてみた情報から考えてみると、ファイルを扱いまくって重いところといったらセッション……？　という疑惑が出てきたためセッションをファイルからデータベースに変更した。するとエラーが出なくなった。

原因

恐らくアクセスが増えてセッション用のファイルが増えすぎると発生する……？　詳しいことはもう誰にもわからない。

laravel6.xでbootstrapを使う

2020-12-20T17:53:51+09:00

laravel6.x以降にbootstrapを入れる

laravel6.xからは、bootstrapがデフォルトで入っていないので、自分で入れてあげる必要があるらしい。
調べたところ、以下のコマンドを実行すれば良さそう。

composer require laravel/ui
php artisan ui bootstrap
npm install && npm run dev

これでうまく行けばおしまい。

しかし現実は甘くなかった

~~案の定~~composer requireの時点でエラーになった。

Using version ^2.0 for laravel/ui
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

Problem 1
    - Conclusion: remove laravel/framework v6.18.1
    - Conclusion: don't install laravel/framework v6.18.1
    - laravel/ui 2.x-dev requires illuminate/filesystem ^7.0 -> satisfiable by illuminate/filesystem[7.x-dev, v7.0.0, v7.0.1, v7.0.2, v7.0.3, v7.0.4, v7.0.5, v7.0.6, v7.0.7, v7.0.8, v7.1.0, v7.1.1]

# 以下略

要は、「 laravel/ui2.0はLaravel7じゃないといけないけど、君の環境はそれを満たしてないよ！」とのこと。

https://packagist.org/packages/laravel/ui
↑によると、それぞれの対応バージョンは以下のようになっている。

Version	Laravel Version
1.x	5.8, 6.x
2.x	7.x
3.x	8.x

つまり、laravel6.xで使うには2.xではなくて1.xを入れないといけない。
というわけで、以下のようにバージョンを明記してインストールし直し。

composer require laravel/ui:1.3.0

次に、/var/www/html/vendor/laravel/ui/src/Presets/Bootstrap.phpの中のパスを以下の様に変更

copy(__DIR__.'/bootstrap-stubs/_variables.scss', resource_path('assets/sass/_variables.scss'));
copy(__DIR__.'/bootstrap-stubs/app.scss', resource_path('assets/sass/app.scss'));

copy(__DIR__.'/bootstrap-stubs/bootstrap.js', resource_path('assets/js/bootstrap.js'));

これで再度

php artisan ui bootstrap
npm install && npm run dev

これで入った。

【Apache Laravel Vue.js Vuetify】webアプリをスマホに対応させるためにやったこと

2020-11-10T18:19:54+09:00

Apache＋Laravel＋Vue.js＋Vuetify　で作った社内ツールをスマホ対応したときに行った作業内容メモ。
~~ほんとにiosが嫌いになりそうだった~~

対応ブラウザは、

chrome(PC, Android, ios)
safari(ios)

まずはiPhone、Androidのデバッグが出来るように準備する

それぞれの端末を持っていれば、PCに繋いでデバッグができる！なんて素晴らしい。
iosはiPhone以外にもiPad、iPod touch　でも問題なし。
それぞれ以下を参考に。

Android:https://qiita.com/hojishi/items/12b726f8b02ef3d713e4
ios：https://webkatu.com/archives/ios-safari-debug-on-windows/

Polyfillを入れる

Vuetifyの公式ドキュメントに則って入れればOK。

npm install babel-polyfill --save
npm install @babel/preset-env --save

インストール後、
import Vue from 'vue' とか
import vuetify from '@/plugins/vuetify
を書いているファイルに、
import 'babel-polyfill' を追加。
（自分の場合は /resources/assets/js/app.js）

ルートディレクトリの .babelrcに、

 {
  "presets": ["@babel/preset-env"]
}

対応していないjsを地道に直す

特に問題なければ、↑を行えば画面は表示されるはず…と思っていたのだが、画面が真っ白だった。

エラーを調べると、どうやら正規表現で後読みを使っているのが原因みたいだったので、該当箇所を修正。
（safariは後読みに対応していない）

※書いている最中に気づいたけど、それってつまりうまくPolyfillが使えていなかったのでは…？？

「Error: Network Error　POST 応答を解析できません」を直す

iosのみ起きる謎現象。これに2日かかった…
自分は、Apacheの設定を変更で直った。


    AllowOverride All
    # Allow open access:
    Header unset Upgrade       ←これを追加

とりあえずここまでで画面が開けるようになりました。
以降は細かい部分です。

スクロールを入れたくないのにスマホだと入ってしまう

webアプリ全体にスクロールを入れたくない場合、bodyにheight:100%とか入れればPCでは大丈夫だったりしたんですが、
スマホだとどうにも謎のスクロールが入ってしまうので、以下のように対応。

…

※jsでhtmlのところにstyleを指定する方法がわからなかったのでid属性を無理やり、、、

const windowHeight = window.innerHeight;   // windowの高さを取得

// の高さを、windowsの高さいっぱいに設定
document.getElementById("content").style.height = windowHeight + "px";
// bodyはheight:100%
document.body.style.height = "100%";

// スクロールバー非表示
// スマホのときはbodyに、PCのときはhtmlにかけないと反映されないっぽいので分ける

const isSP = /iPhone|iPod|iPad|Android/i.test(navigator.userAgent);     
if (isSP) {             
    document.body.style.overflowY = "hidden";
} else {
    document.getElementById("content").style.overflowY = "hidden";
}

…無理矢理感半端ないけど、ひとまずこれでPCでもスマホでも画面いっぱいでコンテンツが収まるようになった。

iosだけ、キーボードのenterでボタンクリック判定されてしまう

PCやAndroidでは大丈夫なのに、iosだけ起きる謎現象。
改行する度にボタンが押されて送信されるという、、、、

※単純にv-formのsubmitイベントが発火してしまっている場合は、こちらを参考に。

根本的な原因はわからなかったため、
入力文字が空欄・改行のみの場合は、ボタンクリックで呼ばれる処理が走らないようにした。


送信


data: () => ({
    inputText: "",      
}),

computed: {
    /**
     * 空文字判定
     */
    isTextEmpty() {
         return !this.inputText || !this.inputText.match(/\S/g);
    },
},

methods: {
    submit() {
        if (this.isTextEmpty) return;

        // 以下送信処理
    }
}

iosだけファイルアップロードができない

ファイル選択のダイアルボックスを開く→ファイルを選択→アップロード
という流れのとき、iosだけダイアルボックスが開かないという謎現象。
エラーも出ない…

調べてみたら、どうやらinput.onchangeが動いていないようだった。

function uplod() {
    return new Promise(resolve => {
        const input = document.createElement('input');
        input.type = "file";
        input.multiple = false;
        input.accept = "image/gif,image/jpeg,image/png";
        input.onchange = event => {
            var file = event.target.files[0];
                resolve(file);                    
            };
            input.click();
        });
}

ios以外は↑でも動いたが、どうやらiosではちゃんと要素をDOMに追加してあげないといけないらしい。
参考：https://stackoverflow.com/questions/47664777/javascript-file-input-onchange-not-working-ios-safari-only

というわけで、以下のように修正

function uplod() {
    return new Promise(resolve => {
        const input = document.createElement('input');
        input.type = 'file';
        input.multiple = false;
        input.accept = "image/gif,image/jpeg,image/png";
        document.body.appendChild(input);     // ←DOMに追加
        input.onchange = event => {
            var file = event.target.files[0];
            document.body.removeChild(input);     // ←DOMから削除
            resolve(file);
        };
        input.click();
    });
}

iosだけ画像が縦に伸びる時

これは別記事にもメモしてあるが、
display:flex;を指定している箇所に、align-items: flex-start;を追記するだけ。
参考：https://nichiyogogo.com/image-looks-stretched/

iosだけ、heightを指定した要素内の「overflow-y: visible scroll;」が効かない

これもiosの一部で起きる現象。
safariのバージョンの問題かもしれない。

ますはここを参考に修正。
自分はこのときにも頑なにoverflow-y: visible scrolと書き続けていたら直らず、
素直に overflow-y:auto; にするだけで解決…。

おわり

ほとんどios対応ですね。
Androidはグリッドをちゃんと設定して、表示崩れしないようにだけしてあげれば殆ど動きました。
マジでiosとsafariが嫌いになりそうだった…。

【Laravel+Pusher】The data content of this event exceeds the allowed maximum　のエラーが出た時

2020-10-19T18:05:31+09:00

https://pusher.com/docs/channels/server_api/http-api#publishing-events

↑にも書いてあるが、
The data content (POST body) of events must be smaller than 10kB.
(イベントのデータコンテンツ（POST本文）は10kB未満である必要があります。)

とのことなので、
イベントに何でもかんでもぶち込むとエラーになるっぽい。

解決策

$event = [
  "eventType" => 1,
  "id" => 1,
  "content" => [...]   // ←ここのサイズが大きかった
];
event(new PusherEvent($event));

↑これをvueで受け取って、

this.content = event.content

のようにしていたのを、

$event = [
  "eventType" => 1,
  "id" => 1,
];
event(new PusherEvent($event));

イベントタイプとデータのidのみ渡すように修正

async getContent(id) {
  // ajaxでデータ取得
},

...

ver content = await getContent(event.id);
this.content = content

ajaxでデータを取得し、それを反映

という風に直したら解決。

もちろん仕様によってはある程度制御をしなければ、
ログインしているユーザー人数だけgetContent()が呼ばれてまた別のエラーになるので、
そこは適宜対応が必要。

【Laravel】feature テスト　レスポンスのデバッグ

2020-10-19T17:50:23+09:00

$response = $this->get('/');
$response->assertStatus(200)

みたいなテストをするとき、レスポンスの中身をみたい場面があった。

$response->dumpHeaders();
$response->dumpSession();
$response->dump();

これで取得できる！
ちゃんとドキュメントにも書いてあった。
https://readouble.com/laravel/6.x/ja/http-tests.html

もっと早く気付けたら良かった～～～

Laravel 　DebugbarやTelescopeを使おうとするとMixed Contentでエラーになる

2020-10-19T17:44:29+09:00

AppServiceProvider.phpのboot()中に、

if (config('app.env') === 'production') {
     \URL::forceScheme('https');
}

を入れるだけで解決！

大学祭の参加団体向けウェブシステムをOSS化してみた

2020-06-14T15:24:10+09:00

はじめに

大学祭では、たくさんの参加団体（サークル・部活）が模擬店などの企画を出店し、盛り上げています。

大学祭を成功させるには、実行委員会と参加団体の間の連携が欠かせません。連携するための方法として、実行委員会では、参加団体からの「各種申請」を受け付けています。例えば、大学祭当日に配布されるパンフレットに掲載する内容を参加団体から募集する必要があります。また、実行委員会が貸し出す備品の申請を受け付けることもあります。

こうした申請受付業務は、多くの大学祭では紙による受付であったり、メールや Google フォームでの受付を行っているところが多いかと思います。

紙やメールによる受付の場合、紙・メールに書かれた内容を1枚1枚Excelに入力していく手間がかかります。受付方法によっては対面での対応が必要となり、昨今の状況下では厳しいものがあります。
（そもそも、今年の秋冬に開催される学園祭でも、予定通り開催できるかどうか怪しいところではありますが……）

そのような中、私は大学祭の各種申請などを受け付けるウェブシステムを開発し、今年になってそれを OSS 化してみました。

GitHub : https://github.com/portal-dots/PortalDots
PortalDots 公式ウェブサイト(2020/11/30 公開) : https://dots.soji.dev

私は誰？

私は、東京理科大学の野田キャンパスに通う大学生です。大学名こそ「東京」とついていますが、「野田」は「千葉県」にあります。そんな野田キャンパスで開催される学園祭「野田地区理大祭」の実行委員をしていました。

実行委員時代は、PortalDots の開発のほか、公式ウェブサイト・パンフレットのデザイン・実装なども行っていました。

野田地区理大祭公式ウェブサイト : https://nodaridaisai.com/

参加団体向けウェブシステム「PortalDots」

GitHub : https://github.com/portal-dots/PortalDots
- よろしければぜひ Star お願いします…！

開発環境の動かし方

開発環境を動かすには Git、PHP(7.4以上)、Node.js、Yarn、Docker がセットアップ済みである必要があります。

2020/06/27 追記 : コマンドの実行順序が間違っていたので修正しました。
2021/05/17 追記 : 開発環境の起動方法の変更を反映しました。

$ git clone [email protected]:portal-dots/PortalDots.git
$ cd PortalDots/

# 必要な Node.js パッケージをインストール
# ※ エラーが表示される場合は、Node.js を最新バージョンにアップグレードした上で、再度 yarn install を実行してください。
$ yarn install

# 設定ファイルを作成
$ cp .env.example .env
$ php artisan key:generate

# 開発環境を起動する
$ yarn docker

# マイグレーション(データベースのセットアップ)
$ yarn migrate

# Docker コンテナ内で必要な PHP パッケージをインストール
$ yarn docker-bash
$ composer install
$ exit

# フロントエンド開発サーバーの起動
$ yarn hot
# → ブラウザで http://localhost にアクセスすると、PortalDots の開発環境が起動する
# → フロントエンド開発サーバーを終了するには Ctrl + C を押す

# 開発環境を停止する
$ yarn docker-stop

トップページ

トップページでは、参加団体向け説明会の次回日程の表示機能や、各種お知らせの閲覧、配布資料のダウンロードなどができるようになっています。

企画参加登録の受付期間中は、提出している参加登録の受理状況も確認できます。

企画参加登録

学園祭への企画エントリーもウェブから可能です。

申請フォーム

大学祭の参加団体は、このようなフォームからパンフレット掲載内容などの情報を委員会へ提出することができます。

受付期間を設定することも可能です。

フォームエディター(Vue.js 製)

「フォームエディター」は PortalDots の目玉機能（？） です。

実行委員は、各種申請を受け付けるフォームを Google フォームのようなノリで作成することができるようになっています。

「じゃあ、Google フォーム使えば良いのでは？」と思われるかもしれませんが、Google フォームではログイン・新規登録機能(※1)は利用できない上、回答内容の編集が容易でなかったり(※2)、1団体あたり1回答までに制限できなかったり(※3)するなど、大学祭の申請フォームとしては不便なところもあります。

PortalDots の「フォームエディター」で作成できるフォームは、回答受付期間を設定できたり、1企画につき1回まで回答可能という設定ができたり、あとから回答を簡単に修正できたりします。

※1 : Google フォームでも、一応 Google アカウントでのログインを必須にすることはできます

※2 : Google フォームでも、回答者に回答の編集を許可することはできます。ただ、編集用の URL を紛失してしまうと編集できなくなってしまいます

※3 : Google フォームでは、1ユーザーあたりの回答数を制限できます。1団体あたりのような制限をかけるのは難しいと思われます

参加企画に提出してもらう各種申請もウェブフォームで受け付けられます。動画のように設問ぐりぐりできます。 pic.twitter.com/5rVFRVnUPd
— Soji — PortalDots (@sofpyon) June 11, 2020

CodeIgniter から Laravel への移行途中です → 完了しました！

2021/05/17追記 : 先日、CodeIgniter のコードを全て削除し、Laravel へ完全移行しました！

ついに #PortalDots のコードが、悲願の 100% Laravel 化達成しました…！CodeIgniter 消します！ pic.twitter.com/vt1RKYDfcL
— Soji (@sofpyon) 2021年5月1日

（以下、追記前）

現在、「CodeIgniter」と「Laravel」という、2つのウェブフレームワークを混在して使用しています。

元々 PortalDots は、私がウェブフレームワーク初心者のころ(大学1年の夏)に開発を始めた物でした。それ以前はフレームワークという物自体を使ったことがなく、プレーンな PHP コードでしか書いたことがなかったのですが、「CodeIgniter というフレームワークは簡単」だという話を聞き、試しに PortalDots の開発で使ってみたのでした。

しかし、CodeIgniter の機能は貧弱である点や、なるべくメインストリームにあるフレームワークを使ったほうが今後のメンテナンスがしやすいだろうということで、Laravel への移行をはじめました。

2020年6月現在、CodeIgniter が使われているのは「スタッフモード」（実行委員用のページ）のみとなっており、それ以外のページは Laravel に移行済みとなっています。

おわりに

OSS 化したので PortalDots はどなたでも自由にお使いいただけるようになりました。

学園祭実行委員会に所属しており、かつプログラミング経験のある方がいましたら、ぜひ使っていただきたいです。また、学園祭関係者でなくても、お試しとして実物を触っていただけると嬉しいです！

GitHub : https://github.com/portal-dots/PortalDots
PortalDots 公式ウェブサイト(2020/11/30 公開) : https://dots.soji.dev

有料のWebサービスをリリースするまでに取り組んだこと・知見をまとめました【個人開発】

2020-05-17T06:58:19+09:00

1. 作ったサービス

ツイ消し職人 | ツイ消しツールの決定版！
https://twikeshi.net/

ツイ消しツールの決定版！
ツイ消し職人は今までのツイートを全消しできる「ツイート一括削除ツール」です。
3200件を超える大量のツイートを全て削除できます。
無料のツールなどでうまく削除できなかった方は是非ご利用ください。
既存のフォロワーをそのままに、Twitterをやり直すことができます。

2. 自己紹介

こんにちは、ひろと申します。
現在はフリーランスエンジニアとして活動しています。

3. なぜ作ったのか

私は2020年4月にフリーランスとして独立しました。
それに伴い、学生時代から使っていたTwitterアカウントの運用を変えようと思い、今までのツイートを削除してやり直すことにしました。
アカウントを作り直す選択肢もあったのですが、フォロワーを減らしたくなかったため、ツイ消しの道を選びました。
調べてみるとツイートの一括削除ツールがいくつか見つかったため、それを使ってツイ消しをすることにしました。

しかし、既存のツールではツイートの削除ができませんでした。
私の今までのツイート数は19万件で、Twitterアーカイブをダウンロードしたところzipファイルのサイズは31GB。
私がツイ廃だったのが全ての原因です。

普通のツイ消しサービスは、API制限の関係で3,200ツイートが削除の上限となってしまいます。私の19万ツイートに対してはあまりに無力すぎました。

もちろん、API制限を回避するためにTwitterアーカイブをアップロードして削除を行うサービスもあります。
しかし、31GBのzipファイルを送りつけると必ず500エラーが返ってきてしまい、私の試した範囲では、まともに動くものはありませんでした。海外の有料サービスでさえダメでした。(具体的なサービス名は出しませんが、日本円で1,600円払いました。手痛い出費です)

そこで私は、「ツイ廃でもツイートを削除できるサービス」が必要だと思い、ツイ消し職人の開発を始めました。

4. リリースするまでに取り組んだこと

取り組んだ全てのことを記載しています。

一. サービスの命名

最初は「ツイートクリーナー」という名前にしていました。
開発中盤に「ツイ消し職人」という名前を思いつき、変更しました。
ランサーズなどで名前を募集するのも良いと思います。

二. ドメインの取得

ムームードメインでtwikeshi.netを取得しました。
欲しいドメインが埋まっている場合は、twikeshi-app.netのように工夫するのもオススメです。

三. 商標登録

登録しました。
今はToreruなどの便利なサービスがあり、ものすごく簡単に出願できます。
48,000円で5年間有効になります。
商標権の取る取らないを選択するのは自由ですが、後から商標を第三者に取得されて商標権の侵害警告を受けた場合、サービス名やドメインを変えなければならないリスクがあることは認識しておく必要があります。

四. プライシング

海外の同じようなサービスを参考に値付けを行いました。
現在は700円(税込)で提供しています。

その後、プライシングに関する本を3冊読んで(この本とこの本とこの本)考え方が変わったので、そのうち値上げするかもしれません。

間違っても、本来ターゲットでない人を取り込むために値下げするのはやめてください。
例えば、私は友人達に「ツイ消し職人の適正価格はいくらだと思う？」と質問をすると、2人が「100円」と答えました。
しかし、断言しますが彼らは100円でも絶対に利用しません。何故ならば、彼らはこのツールの価値を理解していないからです。ツイ消しをしようと思ったことがない人に相場感を聞いても意味がありません。
逆に、本っっ当にツイ消しをしたくて困っている人からすれば、このツールが例え1万円でも喜んでお金を払うはずです。

五. 技術選定

1. バックエンド

バックエンドはLaravelで開発しました。
Laravelはコードもドキュメントも読みやすいため、使っていて楽しいですね。

役割	技術
PHPフレームワーク	Laravel
データベース	MySQL
Twitterログイン	Laravel Socialite
Twitter APIライブラリ	TwitterOAuth
メール送信	SendGrid

2. フロントエンド

CSSフレームワークにはMaterializeを採用しました。初めて使ったのですが、ドキュメントが分かりやすく情報量も多いのでオススメです。
今回はフロントで処理をする必要が無かったので、基本的にJavaScriptは使っていません。ファイルアップロードの画面は、アニメーションを付けるためにVue.jsを使いました。Vue.jsは以前から使っていたので、特に困ることはありませんでした。
次はNuxt.jsに挑戦するために勉強中です。

役割	技術
CSSフレームワーク	Materialize
JavaScriptフレームワーク	Vue.js
決済	Stripe Checkout

3. インフラ

サーバーにはレンタルサーバーを採用しています。

役割	技術
レンタルサーバー	エックスサーバー

Heroku / VPS / AWS EC2 / GCP App Engineなどの選択肢もありましたが、主にコストと運用の観点から除外しました。個人開発は自分でインフラを選べるのが良いですね。
今後もどんどんサービスを作っていく予定なので、サーバー費がかさむのはイヤだし、サービスを作る度に環境を構築するのも避けたかったのです。

もちろん要件によってはレンタルサーバーが使えない場合もあります(ミドルウェアの設定変更や追加インストールが必要な場合など)。

例えば、FFmpegを使って動画のエンコード等を行う場合です。
まずrootが使えないのでインストールができません。自前でmakeして無理やり手動インストールすることも不可能ではなさそうですが、なるべく避けたいところです。また、動画のエンコード処理はCPUを食うので、運営に利用を停止される可能性があります。

このようにrootユーザーが使えないと困る場合は、状況に応じて各サービスを比較検討しましょう。
サーバーはHerokuだけどストレージにはS3を使って、DBにはCloud SQLを使うといったトリッキーなこともできます。柔軟な発想で最適な構成を作りましょう。

参考に、私の考える主なインフラサービスのメリット・デメリットをまとめておきます。
※App Engineは詳しくないので簡易的な記載になってます

インフラサービス	メリット	デメリット
VPS(IaaS)	・安い・root使える	・借りる度にお金がかさむ・環境構築や設定が必要
EC2(IaaS)	・root使える・マイクロサービス沢山ある	・高い・借りる度にお金がかさむ・環境構築や設定が必要
App Engine(PaaS)	・環境構築不要	・高い・借りる度にお金がかさむ
Heroku(PaaS)	・安い・環境構築不要	・借りる度にお金がかさむ・30秒タイムアウト辛い
レンタルサーバー(ほぼPaaS)	・安い・1台でアプリ沢山動かせる・環境構築ほぼ不要	・root使えない

六. 設計

小規模なサービスなので、ここにはほぼ時間をかけていません。
ワイヤーフレームなどは作らず、実際に画面をコーディングしてレイアウトを決めました。
DB設計もパパッと考えて終わり。
開発の中で必要になったときに都度、テーブルやカラム・画面を増やしていきました。
サービスによっては色々な機能を思いつくと思いますが、まずはスモールスタートでリリースすることをゴールにしましょう。

七. 開発

一番時間をかけたのはこの工程です。
他の仕事が並行していたため正確ではありませんが、全体で2〜3週間はかかったと思います。
伝えたい情報がある場合はコメントを書いています。
有料サービスのみ必要になる項目には「☆」を付けています。

1. サービスの機能開発

一. Twitterログイン

ツイ消し職人では、決済完了時とツイート削除完了時に確認メールを送信しています。
そのため、Twitter AppのAdditional permissionsとして、Request email addressにチェックを入れています。

二. ☆決済

Stripe Checkoutは神。
JavaScriptをちょろっと書くだけで決済を提供できます。返金もボタンポチるだけです。
週次で売上を銀行口座に入金してくれるところも良いですね。至れり尽くせり。
ツイ消し職人はクレジットカード、Google Pay、Apple Payに対応しています。

三. アーカイブアップロード

Twitterが生成したデータを読み取らないといけないので、アーカイブのどのファイルに何の情報があるのかを全て自分で調べました。
そして、ツイートの削除に本当に必要なファイルだけをアップロードさせることで、ファイルサイズを31GB→200MBまで減らすことができました。

アーカイブからはツイートの削除に必要な情報を正規表現で抽出する必要があります。
最初は、JavaScriptを使いフロント側で情報を抽出し、サーバーには最低限のデータだけ送るようにする予定だったのですが、少し時間がかかりそうだったので諦めました。

FileReader.readAsText()に100MBのファイルを食わせるとクラッシュしてしまうことが判明し、ファイルをチャンクして処理する必要が出てきたためです。
コンソールにエラーは出力されず、サイレントでクラッシュするので問題の特定に時間がかかりました。
サーバ側で抽出処理をやっても特に問題はないので、サーバ側で処理するようにしました。

四. ツイート削除

ノーコメント

五. 非同期処理

アップロードされてそのままツイートの削除を行うと、画面がタイムアウトしてしまいます。
そのため削除処理はLaravelのキューを使って非同期にしています。
失敗時の再実行もできるようになるので便利ですね。

六. メール送信

必ずユーザーに到達するようにSendGridを使っています。
返信や問い合わせを受けるためにはメールサーバーの設定が必要なので注意してください。
サーバーが用意できない場合は、G Suiteなどのホスティングサービスを利用しましょう。

七. ログ出力 + Slack通知

本番での例外発生時にはSlackにスタックトレースを飛ばすようにしています。
他にも、ツイート削除処理成功時など、正常系でも重要なものはSlackに通知を飛ばしてます。

ログは、出せる項目をなるべく出すようにしています。
Laravelのログ出力について記事書いてるので興味あったら読んでください↓
【Laravel】ログのフォーマットを変更してIPアドレスやユーザー名などを出力する

2. リリース準備

一. LP(トップページ)作成

ユーザーに効果的に訴求できる文言を考える必要があります。
デザイナーの人は腕の見せどころだと思います。
文字や画像・アニメーションを使っていい感じのレイアウトにしましょう。

ペライチなどのツールを使っても良いと思います。
コンバージョンに直結するので、一番力を入れるべき部分です。外注も考えましょう。

ツイ消し職人のようなツール系のサービスの場合は、そんなに凝らなくても結構コンバージョンします。

二. 利用規約・プライバシーポリシーの制定

この本が大変参考になりました。コピペできるひな形データも付いてくるのでオススメです。

三. ☆特定商取引法に基づく表示の作成

同上。
有料サービスの場合は必須です。
本名や住所、電話番号を晒さないといけないので、ここが一番の難関ではないでしょうか。
私の場合、IP電話アプリ(SMARTalk)を使い050から始まる電話番号を載せています。

四. Googleアナリティクス・Search Console設定

ノーコメント

五. meta description設定

Googleの検索結果でタイトルとともに出るやつです。
meta keywordは不要です。

六. ファビコン設定

GIMPで作りました。
サービスのロゴがある場合はファビコンにも活かせます。

七. OGP設定

GIMPで作りました。
OGP画像を動的に生成するサービスでは、トップページ用の画像を同じ方法で作るのも良いかも。
CTRに直結するので、ここも外注を検討しましょう。

八. サイトマップ設定

Search Consoleで送信します。
sitemap.xml Editorを使うと簡単に作成できます。
サイトが新しく、外部からのリンクが少ない場合はあったほうが良いみたいです。

九. SNSシェアボタンの設置

↓こういうのです。

ユーザーに拡散してもらえる仕組みを作っておくことは重要です。

十. お問い合わせフォームの設置

自分で作るのがめんどくさい場合は、Googleフォームやformrunなどを活用しましょう。
お問い合わせフォームの代わりに、チャットサポートツールを入れるのもオススメです。

3. リリース

一. デプロイ

Laravel + レンタルサーバーの場合はgit pullすればほぼ終わりです。
あとは.env書いてマイグレーションしてキャッシュ系のコマンドを叩くだけです。
もちろん、GitHub ActionsなどのCIを設定するのも良いと思います。

私の場合は、以下のようなデプロイスクリプトを用意しています。

#!/bin/sh

git pull

composer install --optimize-autoloader --no-dev

php artisan config:cache

php artisan view:cache

php artisan route:cache

二. テスト

本番環境で全ての機能がうまく動くことを確認しました。
中規模〜大規模サービスの場合は、検証環境の用意とテスト自動化がされていないと運用がしんどくなります。

八. リリース後

1. 知り合い・友人への拡散

LINE, Twitter, Facebookなどで拡散して使ってもらいましょう。

2. プレスリリースを出す

お金があればPR TIMESなどの有名サイトに出すのがオススメです。
(もしくは、法人ならスタートアップチャレンジの条件を満たすと無料になります)

私はお金がなかったので、valuepressのフリープランで配信しました。
配信は無料ですが、プレスリリースの内容を修正する場合はお金がかかるので気を付けましょう。
3,200件を超えるツイートを一括削除できるツイ消しサービス「ツイ消し職人」を提供開始

3. アプリ紹介サイトに登録

私の場合、AnyMakeやmakepost、Eggineer、Applishowを活用しています。

4. 新聞の広告枠に出稿する

リリース直後にスポーツ新聞の方から電話があり、新聞とサイトに広告を載せないかと打診がありました。
条件が合わなかったためお断りしましたが、人によっては選択肢になり得ると思います。

5. アフィリエイト広告に出稿する

検討しましたが、結局使いませんでした。
お金がある場合は、A8.netなどの大手ASPを使うのが良いと思います。
マネートラックならば初期費用0円・月額費用0円で始められるようです。

6. SNS広告に出稿する

以前利用していました。
私の場合はTwitterユーザーをターゲットにしたサービスなので、Twitter広告と相性が良いです。
月予算は安めでもかなりコンバージョンに繋がったので、広告費は普通に回収できています。

7. リスティング広告に出稿する

以前利用していました。
Twitter広告よりも予算が必要で効果が薄かったため、すぐにやめました。

8. 保守開発

本番環境でのエラーを監視し、新しく発現したバグがあれば修正しましょう。
手元で再現しないエラーは...ユーザー問い合わせを待つしか無い。。

もちろん、機能追加などサービス改善のための開発は怠らないようにしましょう。
大幅リニューアルや作り直しなどの選択肢もあります。

9. ブログなどでの発信

この記事のことですね。
Qiita, Crieit, Zenn, Note, ブログなどの選択肢があります。
サービスを知ってもらうだけでなく、転職活動などでも役に立ちます。

Noteに記事を投稿しているのでこちらも参考にしてください。
たった2週間で作ったWebサービスで月11万円の売上を達成した話

完全匿名型討論サービス【みくぽん】を開発＆公開しました

2020-04-24T21:08:44+09:00

10日で匿名型討論Webサービスを公開しました

企画から始まり、設計、デザイン、コーディングまでを10日間で行い、匿名型討論サービス【みくぽん】を作成しました。
こちらのリンクから遊べます。試してみてください
みくぽん

【議題】

3年後も仕事で使えそうなプログラミング言語は？

JavaScript or Python

回答はこちらから

使った技術

Laravel
MySQL
Heroku
Xサーバー
AWS S3

Laravel

プログラミング言語にはPHP、フレームワークにLaravelを使用しました。
質問箱を始めとする、質問サービス同様画像加工をし、OGPに設定するようにしています。
データベースにはMySQLを使用しています。

Heroku

テスト環境構築用に無料で公開できるHerokuを採用しました。
こちらを使い、β版のリリースを実施し、知人にテストプレイを依頼しました。
公開前のテストに使うには十分なサービスです。（本番リリースも表示速度等気にしないのであれば使用は可能かと思います）

Xサーバー

本番リリースには普段私のブログを置いているXサーバーを使用しました。
最も安いプランでも50個のデータベースが作成でき最高ですね。表示速度も申し分ありません。

AWS S3

ユーザーが投稿時に生成される画像を格納するために使用しました。
1年間の無料期間で使用しています。

以上まとめると、運用にかかる費用はドメインとサーバー契約費だけになります。

サービスをリリースしてみての感想

いろんな開発者のブログなどから伺っていたとおり、個人サービスは公開＝終了ではなく、
公開＝スタートをきったというのを実感しています。
今ではどうやったらこのサービスをみんなが使ってくれるのかを考える毎日です。

意見の投稿だけであれば、アカウント作成は不要です。
ぜひ皆さん意見を投稿してみてください

独学初心者がGoogle風の書籍検索サービスを作ってみた【個人開発】

2020-04-14T13:52:22+09:00

独学でプログラミングを学習しています。
「作りながら学ぶのがいい」ということでGoogle風の技術書検索サービスを開発しました。

アイデア的に似ているサービスはありますが、自分が欲しいものとは少し違っていたので作りました。

初学者なりに試行錯誤したので、アプリの仕組みや作った方法をまとめます。

プログラミング学習中の人や個人開発を考えている人のモチベUPに貢献できたらいいなと思います。

作ったサービス「技術書検索サービス」

作ったのは「Geekle（ギークル）」という技術書検索サービス。

-> Geekle（ギークル） | 技術書検索サービス

サービス概要

Geekleは、評価の高い技術書を検索できるサービスです。

例えば、「Pythonを勉強したい！どの書籍がいんだろうか！」ってなったときに「Python」というキーワード（キーワードはQiitaのタグにあるものに限定されます：サジェストで表示される）で検索すると、

その技術キーワードに対する「評価の高い書籍リスト」が検索結果として表示されます。検索結果の並びはQiitaでの言及記事数をはじめ、複数の要素から総合的に算出。

学びたい技術がある時に購入候補となる書籍を絞り込むのに使えます！

開発の動機

プログラミングを学習する中で、たくさんの書籍を購入してきました。

そのときに候補となる本をピックアップして、一つずつ評判を確認し、本屋で立ち読みして買ってたので、「○○という技術を学ぼう→その技術の評判の良い技術書がすぐわかるサービスがあったらなー」と思っていました。

Qiita上の書籍情報を見られるサービスはすでにいくつもありますが、既存のモノは「Qiita上の書籍情報を可視化すると面白い」というコンセプトであるため、キーワード（タグ）に対して関連性が薄い書籍も多く表示される仕様となっていました（それが書籍との偶発的な出会いになって面白いというコンセプト）。

自分の希望は「今、学ぶのに適した書籍の候補」をストレートに見つけられるサービスだったので、関連性の薄い書籍はない方がよかったし、なるべく情報が新しい評価の高い書籍が表示されて欲しかった。

そこで、自分の希望を実現したモノを作ってみました。

どう作ったか

使った技術とか

アプリ：Laravel + Vue.js
バッチ（DB作成）：生PHP
インフラ：AWS（EC2・RDS・Rout53・ALB）
制作期間：4ヶ月ちょっと

裏側の仕組みをどう作ったのか解説します。

自分なりに色々と考えて作りましたが、独学初心者なので生暖かく読んでください...。あと、「もっとこうすればいいのに！」とかあればアドバイスして頂けると嬉しいです。

書籍DBについて

書籍のDBは、QiitaのAPIで記事データを取得して、書籍へのリンクらしきURLを解析し、そこから書籍の識別番号(ISBN・ASIN)を抽出後、番号を使ってopneBDやGoogleBookApiなどで書籍データを取得して構築しています。

これらの方法は

の記事を参考にさせていただきました。

独学の自分がサービス開発できたのはこういったノウハウが公開・共有されていたからです。先人の皆様ありがとうございます。僕もこの記事でやったことを共有します(￣^￣)ゞ

書籍の順位付けを工夫

Qiitaの記事についているタグをそのまま書籍のタグとして、Qiitaで言及されている記事数をカウントすることでタグごとに書籍の順位づけを行っています。

しかし、Qiitaの記事数のみで順位付けを行うと、普遍的な名著（リーダブルコードなど）が多くのタグで上位を独占してしまるというデメリットがありました。

検索ワードが「PHP」でも「Ruby」でもリーダブルコードが一番上になってしまう。

また、出版から時間が経過している書籍の方が言及される記事数が多く、新しい書籍は言及される記事数が少ないため、新しい良本が上位に表示できなかったり、PHPとLaravelのように「言語」と「フレームワーク」の検索結果がほぼ同じになるという問題点がありました。

僕が作りたいのは「学習したい技術ごとに今選ぶべき良書がわかるサービス」だったため、なるべく情報の新しい良本が上位表示されて欲しいし、PHPなら生PHPの書籍が上位、LaravelならLaravelの書籍が上位という結果になって欲しかった。

そこで、Qiitaの記事数に加えて

・検索ワード(タグ）の文字が書籍のタイトルに含まれる場合はプラス点
・出版日時が古くなればなるほどマイナス点

などを加えて傾斜配点をかける事で検索結果を調整しています。

試行錯誤の結果、悪くない結果がでるようになりました。

(言語とフレームワークも異なる検索結果になってる)

今後も改良して精度を上げていきます。

デザインとか

デザインは、最初にカラー（紫・黒・白）を決めました。

柱となる色は紫をにしたのは、「プログラミングって現在の魔法っぽい→魔法は紫っぽい」という発想から。技術書を読んで勉強することを魔法を学んでる感じだと捉えると学習が楽しくなる気がします（中二心）。

レイアウトは、たくさんのサービスを並べて特徴を抽象化し、取り入れていくというやり方で考えました。

具体的に説明すると、書籍検索サービスは画像付きでコンテンツを表示するサービスになるよね→Amazonプライムビデオやネットフリックスなど画像付きでコンテンツを大量に並べてる有名サイトをいくつもみる→あ、横並びにしてスライドするUIがデフォルトっぽいなー（これが抽象化）→自分のサービスに取り入れるという流れ。

「基本となっている型を探す」という感じ。

今後の改良/グロース

やりたいことはたくさんあります。

・SEOに強い構成にする
・SPA化
・レビューを集める仕組み構築
・技術書のセール情報の掲載

などなど。自分の技術力向上やサービスグロースの実験の場としても使っていきたい。

振り返り

当初、2ヶ月くらいで作れるだろうと思っていたのですが、DBを作るのに時間がかかってしまい、想定の倍以上の時間がかかってしまいました。

開発中はわからないことだらけで苦しい時もりましたが、やっぱりプログラミングは楽しいですね！今回のアプリ開発を通してエンジニアになりたいという気持ちがより強くなりました。

もっともっと勉強して色々なアプリ作っていきたいです。

ここまで読んでくれた方ありがとうございます！
ぜひ試しに使ってみてください(≧∀≦)

Geekle（ギークル） | 技術書検索サービス

LaravelのサブクエリでWHEREしたい時

2020-03-10T15:03:04+09:00

Laravelのwhereにサブクエリを使いたい時。パフォーマンスとかの話は置いておいて、ちょっと面白かったというか、なんだそれという感じなので。Laravel6。

$sub = DB::raw('SELECT status FROM users WHERE id = posts.user_id');
$query->where($sub, $status);

上のだとなんか途中のテキスト解析中にエラーになる。正解は下で、全体をカッコで囲むだけ。

$sub = DB::raw('(SELECT status FROM users WHERE id = posts.user_id)');
$query->where($sub, $status);

FormRequestのバリデーション失敗時にjsonを返す

2020-03-02T17:00:28+09:00

以下どちらかの実装でjsonレスポンスにできる。

failedValidation()をオーバーライドする
ヘッダーにAcceptまたはX-Requested-Withを追加する

Laravelのバージョンは6.15.0です。

`failedValidation()`のオーバーライド

フォームリクエストクラスのfailedValidation()をオーバーライドすることでjsonレスポンスかつメッセージをカスタマイズすることも可能。以下はサインアップのエンドポイントを想定したリクエストの例。

 'required',
            'password' => 'required'
        ];
    }

    public function messages()
    {
        return [
            'user_id.required' => 'ユーザーIDは必須です。',
            'password.required' => 'パスワードは必須です。',
        ];
    }

    protected function failedValidation(Validator $validator)
    {
        throw new HttpResponseException(
            response()->json([
                'message' => $validator->errors()->toArray(),
            ], 403)
        );
    }
}

ヘッダーに`Accept`または`X-Requested-With`を追加する

エクセプションハンドラを変更していない場合、バリデーションエラー発生時はIlluminate/Foundation/Exceptions/Handler::render()でレスポンス生成が行われる。

    // Illuminate/Foundation/Exceptions/Handler.php
    public function render($request, Exception $e)
    {
        if (method_exists($e, 'render') && $response = $e->render($request)) {
            return Router::toResponse($request, $response);
        } elseif ($e instanceof Responsable) {
            return $e->toResponse($request);
        }

        $e = $this->prepareException($e);

        if ($e instanceof HttpResponseException) {
            return $e->getResponse();
        } elseif ($e instanceof AuthenticationException) {
            return $this->unauthenticated($request, $e);
        } elseif ($e instanceof ValidationException) {
            return $this->convertValidationExceptionToResponse($e, $request);
        }

        return $request->expectsJson()
                    ? $this->prepareJsonResponse($request, $e)
                    : $this->prepareResponse($request, $e);
    }

今回はバリデーションエラーの場合なのでconvertValidationExceptionToResponse()が実行される。

    // Illuminate/Foundation/Exceptions/Handler.php
    protected function convertValidationExceptionToResponse(ValidationException $e, $request)
    {
        if ($e->response) {
            return $e->response;
        }

        return $request->expectsJson()
                    ? $this->invalidJson($request, $e)
                    : $this->invalid($request, $e);
    }

expectsJson()はヘッダにX-Requested-With: XMLHttpRequestが含まれているか、ヘッダにAccept: .../jsonもしくはAccept: ...+jsonが含まれている場合にjsonレスポンスを返却する。

そのためミドルウェアでヘッダを追加することでjsonレスポンスが取得できる。

headers->set('Accept', 'application/json');
        return $next($request);
    }
}

 [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            'throttle:60,1',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            \App\Http\Middleware\EnforceJson::class, // 追加
        ],
    ];

    // ...
}

個人的には返却するメッセージを変更できるのでfailedValidation()をオーバーライドするほうが好みです。

「Laravel」の記事 - Crieit

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

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

Github Issuesをキレイに外部公開するサービス「2go」作ってみた

【自分用メモ】php artisanコマンド一覧

php(Laravel)でエクセルのインポート機能付けるときに試したもの

救 世 主

【Laravel】ルーティング（URLと実行する処理の関連付け）

【Laravel】新規プロジェクト作成～サンプルページ表示

【VSCode】拡張機能一覧（主にWeb系システム開発用）

LaravelでMaximum execution time of 30 seconds exceededが頻発する場合

laravel6.xでbootstrapを使う

【Apache Laravel Vue.js Vuetify】webアプリをスマホに対応させるためにやったこと

【Laravel+Pusher】The data content of this event exceeds the allowed maximum のエラーが出た時

【Laravel】feature テスト レスポンスのデバッグ

Laravel DebugbarやTelescopeを使おうとするとMixed Contentでエラーになる

大学祭の参加団体向けウェブシステムをOSS化してみた

有料のWebサービスをリリースするまでに取り組んだこと・知見をまとめました【個人開発】

救　世　主

【Laravel+Pusher】The data content of this event exceeds the allowed maximum　のエラーが出た時

【Laravel】feature テスト　レスポンスのデバッグ

Laravel 　DebugbarやTelescopeを使おうとするとMixed Contentでエラーになる