JavaScript
canvas
github-pages
Webサービス
個人開発

ひとりでWebサービス開発RTAをして、2日間でサービスをリリースした話 〜ツイッター向け画像ジェネレーターを作った〜

こんにちわ。れとるときゃりー(@retoruto_carry)です。

新幹線の移動時間でサービスを作ってリリースみたいな記事がQiitaでバズっていたので、自分も勝手にひとりでWebサービス開発RTAをやってみました。

※RTAとはリアルタイムアタックの略です。ゲームスタートからクリアまでの時間の短さを競うことを意味します。

ツイッターで実況しつつやりました。

作ったサービス

「#いいねvsRT」画像メーカー

screencapture-retoruto-carry-github-io-RTvsFavMaker-2018-11-28-08_06_24.png

ezgif-5-50a8f5f4b6b3.gif

ぜひ、みなさん使って遊んでみてください!!!
「#いいねvsRT」画像メーカー

使った技術

  • canvas
    • ブラウザ上に図を描くために策定された仕様
    • これを使って画像を合成する
  • javascript
    • 画像をfile inputから受け取る
    • canvasを操作する
      • 画像を描画する
      • ダウンロードリンクを生成する
  • bootstrap4
    • cssフレームワーク
    • cssを書かずに良さげなデザインにできるやつ
  • GithubPages
    • GitHubで管理している静的サイトをホスティングできる
    • 無料&簡単!

コードはここに置いてます

何をしたか

1日目

最初は紙の上で、どんな画面にするのかを考えました

ここで欲張ってたくさん機能を詰め込みすぎないのが、webサービス開発RTAにおいてはかなり重要です。

次にプロトタイプを作ることを目指しました

デザインは完全に無視して、「とりあえず動くもの」を作ることを目指します。

canvasが使えそうだと思ったので、これで行く事にしました。

使ったことがなかったので、色々サンプルコードを探して読みました。

また、Github pagesを使ってホスティングしているので、ページを先に公開してリアルタイムで開発を進めていきます。

仮の背景画像をフリー画像編集ソフトGimpで雑に作りました。

こうして、頑張って作ったプロトタイプがこちらです。

RTvsFav.gif

2日目

bootstrap4を追加して、デザインの調整をしました

DtA0mWrV4AErOAO.jpg

画像合成の調整をしました

また、プロトタイプでは画像の幅を決め打ちでこちらで決めていたので、いい感じの場所・大きさで画像を合成してくれるようにコードを修正しました。

サービス名を決めました

仮のサービス名は「RT vs Fav 画像メーカー」だったのですが、分かりにくのでちゃんとしたサービス名を考え直しました。

背景画像をちゃんとしたものに変えました

頑張って作りました。

background5.png

metaタグやOGP画像を設定しました

metaタグとはページの各種付加情報を定義するタグのことです。

OGP画像とはツイッターなどのSNSにシェアされた時に、リンクが画像として表示されるアレです。

↓作成したOGP画像です。

SNSシェアのボタンも追加します

スクリーンショット 2018-11-28 7.50.24.png

Googleアナリティクスを設定しました

アクセス解析に使います。簡単です。

リリースツイートをしました。

まとめ

だいたいこんな感じの流れでした

  • 初日
    • 紙で画面設計
    • 技術について調べる
    • プロトタイプ作成
  • 2日目
    • 仕上げとデザインの作り込み
    • リリースのためのめんどくさい作業
      • metaタグやOGPの設定
      • SNSリンクの設置
      • アナリティクスの設置など

感想

勢いでバーっと作りきるのは、ゲーム感があってとても楽しかったです。
個人開発だと、時間かければかけるほど飽きてきたり収拾がつかなくなってしまいます。
その点、Webサービス開発RTAだと時間制限がある分、そういったことは回避できるかと思います。
Webサービス開発RTAにハマってしまったので、次のRTAを早くやりたいですw

最後に

「#いいねvsRT」画像メーカーを作った話でした。良かったら遊んで行ってください。

#WebサービスRTA を流行らせていきましょう!

いいねやコメントをしてくださると、今後の励みになります。よろしくお願いします。

良かったらツイッター(@retoruto_carry)もフォローしてね