LoginSignup
3
3

More than 5 years have passed since last update.

3月31日ネタサービスを思いついて、エイプリルフールにリリースするまでにやったこと【地鶏専用SNS】

Posted at

作ったもの:地鶏専用SNS

地鶏専用SNSを作りました。制作期間は1日です。
https://jidori.herokuapp.com/
(herokuの無料版のため、初回起動時は少々遅いです)
スクリーンショット 2019-04-01 8.53.25.png

自撮りが普及して久しく、twitterやインスタと自撮りは留まることを知りません。 この熱い領域に参入しない訳にはいかないと考え、じどりによるじどりのためのサービスをリリースすることに決めました。

地鶏が安心して使えるようにするため、地鶏以外、特に「人間」による登録を
登録時のプロフィールの画像認証により防いでいます。(Amazon Rekognitionを使用)
スクリーンショット 2019-04-01 8.57.01.pngスクリーンショット 2019-04-01 8.57.39.png
画像認識の結果、「人間」だと判断された場合は登録を拒否します。

SNSなので、もちろん
- ユーザー登録
- ユーザー情報変更
- ユーザー一覧
- 投稿画面
- 投稿一覧
などの機能は網羅しています。
スクリーンショット 2019-04-02 11.36.18.pngスクリーンショット 2019-04-04 9.25.16.png
スクリーンショット 2019-04-04 9.25.26.pngスクリーンショット 2019-04-04 9.25.35.png

twitter:
https://twitter.com/SNS15818317/status/1112547315485560833

制作時間

1日です。
3/31の朝10時くらいに自撮り→地鶏の思い付き、12時頃着手。
深夜3時くらいに完成したので、実質作業時間は10時間くらいです。

内訳は
・ Ruby on Rails進める&SNS部分作る:8時間
・ Amazon Rekognition(画像認識)を組み込む、画像認証機能を作る:1-2時間
・ herokuにデプロイする:30分
くらいです。

使ったもの

技術的には

  • Ruby on Rails
  • Amazon Rekognition
  • heroku

です。
どれも一切使ったことがなかったですが、素早く作ってリリースするために上記を剪定しました。

私の技術レベルとしては、
- 業務はJavaでバックエンドエンジニア。Ruby on Railsは初。
- フロントエンドはほとんど経験ない。HTML5&CSS3レッスンブックを1冊やった程度。
- AWSは普段業務で簡単なオペレーションはやっている
でした。

Ruby on Rails

ProgateのRuby on Railsレッスンがあり、レッスンの中で作るものがSNSだったため。
レッスンを超速で進め、出来上がったSNSを流用仕上げれば一日仕上がると思い選びました。
Progateの制作物を流用すれば、デザイン面が大半出来上がっているため、得意ではないフロントエンドで行き詰まらずに済むのはとても楽でした。

Amazon Rekognition

AWSで画像認識やれるのは面白そうとずっと思っていましたが、画像認識を使って作るものがないと触ることもないのでこの機会に使うことに。
「Amazon Rekognition ruby」でググったら沢山例が出てきたのと、AWSがSDKを用意してくれてあり簡単に組み込めそうだったので使うことにしました。

heroku

作ったアプリケーションのデプロイ先に。
本当はAWS上に構築したかったけど、

  • 時間がない。環境構築せずに簡単にデプロイしたい。
    →herokuなら、pushするだけでデプロイまでデフォルトでやってくれる

  • サーバー費用をかけたくない
    →Ruby on Railsで作るのでサーバーレスにしにくい(サーバー費用が常時掛かりそう)
    herokuの無料プランなら無料で置いておける。

ことを考えherokuにしました。

着想からリリースまでの流れ

個人でサービスを開発する場合、完成させることが何より大事
時間が取れなくなったり、モチベーションが低下する可能性を考えると、短期間で完成させることが何より大事
という発想で、

  • 網羅的な学習はしない、完成させるために必要な情報をつまみ食いする
  • バグ等で途中で行き詰まったら、確実に出来る方法に切り替える
  • それでもダメなら機能を切り捨てる

方針にしました。

13時: ProgateのRuby on Rails5に着手

主な進め方

ProgateのRuby on Railsのレッスンは、SNSを作りながら学習する流れ。
1レッスンごとに少しずつ機能を追加していく。
ブラウザ上で完結するレッスンだが、今回は時間がないので

  • Ruby on Railsスライド一覧でスライドを見ながら、自分のPCで作業を進める
  • 途中で分からなくなったり壊れたら、レッスン詳細から正解のソースコードを確認

ようにしました。

スライド一覧でスライドを見ながら、自分のPCで作業を進める

スライドに実行するコマンドや書くべきソースコード、必要な知識が丁寧に書いてあリます。
パッと読んで理解出来たレッスンは自分のPCでサクッと実践し、どんどんレッスンを進めていきました。
Progateはレッスンが良く出来ている分、やればやった分だけ理解が出来ます。
Progateで学習するときは出来るだけ短い時間で、短期集中でレッスンを終わらせるのが良いなと実感しました。

途中で分からなくなったり壊れたら、レッスン詳細から正解のソースコードを確認

がんがん進めていると、途中で自分のPCで構築したものが壊れます。
どうしても行き詰まったら、レッスン詳細からソースコードを見ました。
(「目標物を確認しよう」のレッスンを見れば、完成したソースコードが全部確認できる。)
どうしても差分が分からなかったら、一旦コピペしました。
それで原因が分かったらそれでいいし、分からなくても上手く動いたら先に進めました。
躓いたところにこだわると開発が頓挫するので割り切りました。

途中で躓いたところ

最初のrails newでエラーがでる

みんな躓くところだったらしく、ググったら記事がたくさんありました。
Railsのsqlite3のバージョン指定の問題で、sqlite3の新しいバージョンが出たことが原因。
参考:Railsを始めてsqlite3まわりのエラーで躓いている人たちへ

画像の保存先を変更しようとした

Progateのレッスンでは、画像はサーバー配下のpublic/user_images/に保存するようになっています。
これはサーバーが再起動すると画像が全部吹き飛ぶ実装方法なので、画像はDBにバイナリ保存するよう変更しようとしました。
DBへの保存まで上手く行ったものの、DBからバイナリを読みだして表示するところで躓き、2時間くらい行き詰まって解決しませんでした。
時間をかけ過ぎ地鶏専用SNSの完成に影響が出そうだったため、バイナリでの保存は諦め、今回はProgate通りのpublic/user_images/への保存にしました。

鶏だから、3歩歩けば自分のプロフィール画像も忘れてしまうものだと納得し、仕様にしました。
その代わり、画像が取得できない場合はデフォルトアイコンを表示する実装を入れました。

23時: Progate Ruby on Rails5 Ⅸまで完了、Amazon Rekognitionの組み込み開始

 いいね機能は今回作りたい地鶏SNSのコアバリューではないため、Ruby on Rails5 Ⅹ以降のレッスンはや理ませんでした。
ひとまずSNSとしての機能は一通り出来たので、Amazon Rekognitionの繋ぎこみに移りました。

Amazon Rekognitionの料金

Amazon Rekognitionを初めて使う場合は、最初の 12 か月間は、1 か月あたり 5,000 枚まで画像分析が無料で、それ以降も1000枚で1.3ドルです。
使われなければ料金はかからないですし、使われても1回あたり0.14円くらいなので非常に安価です。
個人アプリであれば気にせず使えます。

AWSアカウントの作成、アクセスキーの取得

公式ページの指示通りにぽちぽちやって行けば、アクセスキーの取得まで行けます。
IAMユーザーなど権限周りの設定で躓く可能性もありますが、ググると出てきます。
権限を付けすぎるとアクセスキーが盗まれた時に被害が大きくなるので、Amazon Rekognitionにしか操作できない権限設定にするのが必要です。
公式ページ:https://aws.amazon.com/jp/rekognition/

SDKのインストール、コード上で繋ぎこみ

AWSが公式のSDKを用意してくれているので、拍子抜けするくらい簡単です。
コードの例もググったら出てくるので意外と簡単にいけます。
参考:Amazon RekognitionをRubyから叩いてみる

地鶏判定機能の実装

判定機能といってもシンプルで、Amazon RekognitionのAPIは

Poultry-99
Animal-99
Bird-99
Fowl-99
Chicken-99

のようなレスポンスが返ってきます。
「Chicken」だったら数字を地鶏度として使用、「Human」か「Person」が含まれていたら人間としてブロックするようにしました。
スクリーンショット 2019-04-01 8.57.01.pngスクリーンショット 2019-04-01 8.57.39.png

1時: herokuに着手

今回の本番環境に選んだherokuの準備を進めます。

heroku無料版のメリット

pushするだけで環境を構築してくれます。
AWSなど他のクラウドサービスを使うの比較すると圧倒的に早いです。
下記デメリットを許容すれば無料で使えるので、放置していても料金かからないので、ポートフォリオ的なサービスはherokuに置いておくのが良いと思います。

heroku無料版のデメリット

30分アクセスがないと、サーバーは停止します。
次にアクセスがあった時に起動されますが、起動には少々時間がかかるため、見てくれた人からすると中々開かないwebサイトになります。
また、今回のように画像をサーバー内に保存すると画像が吹き飛びます。
(DBに保存したものは大丈夫です。)

有料版(7ドル〜)にすればサーバーの停止は無くなりますが、毎月7ドル払うなら別のクラウドサービスで構築した方が良い気もします。

アカウント登録

公式サイトの指示に従って進めます。無料プランで大丈夫です。
公式:https://www.heroku.com/

heroku用に各種設定の変更、デプロイ

下記のQiitaの記事が素晴らしかったので、そのまま順をおってやりました。
DBをSQLite3からPostgreSQLに変更しないといけないところがミソです。
参考:【初心者向け】railsアプリをherokuを使って確実にデプロイする方法【決定版】

2時:見た目の調整

機能と本番環境が一通り揃ったので、最後の見た目調整。
・メイン画像は著作権フリーの画像を探してきて差し替え
・地鶏専用SNSらしく各所の文言を修正
・html,cssいじって見た目の修正
をやりました。
フロントには疎いながらもHTML5&CSS3レッスンブックを1冊やっておいたことで短時間で少し見た目を弄るのに使えたかと思います。
とはいえ思い通りにいじれない箇所が多かったので次までにもう少し勉強しておこうと思いました。

3時:完成

眠くてしょうがない中、なんとか完成。
今日やり切らなかったら永遠に完成しないと言い聞かせて、今日絶対やりきろうと思っていたのでほっと一息して就寝。

8時:各種SNSに上げる

自分の各種SNSに、エイプリルフールぽさを醸し出しながらサービス紹介を載せました。
公式twitterを一応作り、「地鶏」をキーワードにフォローしたりいいねしたりしたところ、何人か使ってくれた人がいました。
https://twitter.com/SNS15818317

まとめ

1日で完成させたことが何より大事だったなと思いました。
翌日以降は作るモチベーションはほとんど無くなったので、機能を減らしたりコードが多少汚くなっても仕上げてリリースしてしまった方が達成感があります。
時間をかけて学習しよう、作ろうと思っていたものでも、気合いれて短期集中でやれば夏休みの宿題のように1日で終わることを今回実感しました。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3