2019-03-30に更新

単行本についているアレのWebアプリを作った話

読了目安:11分

image.png

初めまして!しがしぃと申します。
WWWサーバのWebチャンネルで主に開発、狩り、貿易をしております。
他の人工知能チャンネルやゲーム開発チャンネルも盛んらしいですね。

・・・茶番は置いておいて、
今回は、単行本についているアレを作成することが出来るWebアプリを作りました。
image.png
こんなやつです。

このアプリのリンクは ↓ です
単行本のコメントメーカー

制作過程の考えなどをまとめました。技術要素はなるべき少なくしました。

なぜこのサービスを作ろうと考えたのか

とある日、Twitterで時間を湯水のように使っていました。そこで、ある画像を見つけました。
image.png

ワイ 「うわぁ、懐かしい。こんなのあったな〜」
ワイ 「なんか、作るWebアプリでもあるんか?」
ワイ 「探した感じないやん」
ワイ 「あ、ワイが作ればええやん!」

〜おわり〜

以上です。

  • このマーケットのパイはどれくらい大きさなのか
  • このサービスを使うことによるユーザーのメリット
  • どんなペルソナ
  • 気になるあの子は今何しているんだろう

などなど、一切考えてないです!
(だから、色々ガタガタなんでしょうけどそれはまた置いておいて)

アイデアを深める

今まで、様々なアプリを作ろうと思って作っていても、途中で投げ出したことが何回もあります。
「この機能いる?」「これ作って誰が使うねん」
これを作っているときに思います。経験ある方もいらっしゃるかと・・・。

今回こそはMVP(実用最小限の製品)を作るぞ!と意気込んでアイデアを深めていきました。
そのMVPを考えたて実行した結果がこれです。

  1. とりあえず画像を生成できるところまで
    —————————はじめに考えていた公開時期 —————————
  2. 初期値ににななしさん、画像は人のマーク、コメントはコメントが入りますという初期値を
  3. 画像をデータベースに保存
  4. TwitterOGPを対応
  5. 一覧で新規順で見れるように
    —————————実際の公開した時期 —————————
  6. Twitterログイン云々

え?は??MVPはバカンスにでも??

とでも言いたくなるような結果ですね。

作っていると、物足りなくなって、次々作ろうと・・・。
で、でも、MVP設定しなかったら完成すらしなかったはず!(言い訳)

完成はしましたが、後で振り返ると、MVPで止めておけば良かったなと思いました。理由は後に書いてあります。

作る時のメモ

メモはEvernoteに書いています。
読めたもんじゃないですが、自分しか読まないので、これくらい適当です;;
image.png

凝った所

つくるボタンを押さないと、画像を保存できない所

実はつくるボタンを押さなくても、単行本のコメント画像を作ることが技術的に可能です。しかし、このWebアプリの構成上、他の方が作ったものを見ることが半分の目的になってしまっており、コンテンツが少なくなってしまいます。この辺はアイデアを考えるときに、しっかり深めれば分かったことなんですが、何も考えずに実装した結果ですね。
反省です。修行します。

動的なTwitterCard

こんな感じでやつです。作品によって、TwitterCardが自動的に切り替わるやつです。
SPAなので色々と訳が違い、最終的にクローラーの場合のみ引っかかるような仕様にしました。
女の子もこんな感じで引っかかれば良いんですけどね!

vue.js laravel5.7 動的 og タグ

VueとLaravelのSPAにした

これは凝ったというか、単なる新しいことへの挑戦です。
新しい方が楽しいし、SPAの方がユーザーにとってより良いかなと思いました!

ナビゲーションメニューをタブバーにした所

いつも通り、画面遷移ボタンはハンバーガーメニューにするか〜と考えていた所、1つの記事を見つけました。
君たちはそんなにハンバーガーメニューが好きなのかね?
いつもハンバーガーさんに頼ってるし、たまにはタブバー使ってみるかぁ!
と思い新しく使ってみました。

image.png

モバイルからのアクセスが多く、親指から近いところにボタンがあるのでまぁいい感じでした。
これから作るWebアプリでもこれにしても良いかなと思いました。

この辺の凝ったところは、ユーザーからしたら違和感なく便利に使ってもらえることが目的なので

「ここ便利!すごい!」

というような効果はあまり見えませんが、、、

公開したあとの反省

ここで、MVPで止めなかった反省が来ます。

  • 作ったものが全て公開されることにより、ユーザーが作ることを躊躇してしまう可能性がある。
  • 当初考えていたものより規模の大きくなってしまった。

このWebアプリは、とりあえず単行本についているアレを作ることが出来れば良いと思うんです。
公開する必要はありません。身内だけで使用人もいるかと思います。(いるんか?)
このアプリ、作ったものが全て公開されるのですが、それが原因で、ユーザーが作ることを躊躇してしまう可能性があります。
全て公開するメリットももちろんありますが・・・。
とりあえず、MVPで止めて、皆さんの反応を見るor相談するべきでした。

おわりに

  • アイデアはいくらでも転がっている。
  • 何も考えずに作るのは早いけど、後々しんどい面もある。
  • MVPは大事。どれくらい大事かというと、この記事を読み込んでいる皆さんのデバイスくらい大事。
  • とりあえずリリースしようぜ!成功するかなんて分かんない!しかし、必ず反省・ふりかえりは必要!
  • 個人開発はめちゃくちゃ楽しい。周りにいる人達はシャレにならんくらい優しい

特に成功した訳ではないけど、書いてみました。自己満足かも知れませんが、それでも形にすることは大切だと思います。(思います)

このWebアプリ、まだまだなんで、皆に使ってもらえるようになるには、磨き続ける必要がありそうですね。

今回省いた技術要素につきましては、後ほどQiitaに上げます。

新しい分野の技術は本当にワクワクして楽しいですね!

それでは、また!
Sea yuu agein!


しがしぃ@MyPoZi

洗濯機に入れっぱなし VueのちLaravel時々Golangの恐れがあります

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント