はじめまして。
フリーランスエンジニアのミヤツカと申します。
表題の通り、初めての個人開発で、初めてRailsを作って、
なんとか収益化もできたので、その内容をまとめてみました。
個人開発の流れであったり、技術選定であったり、
なにかのご参考になれば幸いです。
作ったもの
週刊少年ジャンプ作品専用のシェアリングサービス、
その名も「ジャンプなに読んでた？」というものです。
https://naniyon.com
（現在は利用できません。）
私は生粋の漫画好きで、特にジャンプ作品は子供の頃から大好きです。
「中学の頃とかジャンプなに読んでた〜？」
とか、
「あの漫画、打ち切りだったけど面白かったよね〜」
みたいな話をするのが大好きで、
実際、飲み会とかでもそういう話題が一番盛り上がったりすると感じていました。
で、そういう話がオンライン上で気軽にできるようになったら
楽しいんじゃないかと思い、作ってみました。
遊び方は
1．生年月日や年代から、当時連載されていた作品を探す
2．ひたすら懐かしむ
3．Twitterでシェアして思い出話で盛り上がる
といった感じです。
また、「オリジナル年表作成ツール」というものもあり、
「自分の歴史」と「ジャンプの歴史」をひと目で振り返る、オリジナルの年表を作ることができるというものです。
もし気になったら遊んで見てください。
https://naniyon.com
使る前に
まずは、個人開発でこのようなサービスを作るきっかけとなったことを書いてみます。
今振り返ってみると、この「何を作るか」を決めるのに一番時間がかかりました。
前述の通り、私は漫画が好きなので、
「漫画に関係するサービスを作りたい」
というのはずっと考えていました。
しかし、いざ何か作ろうと考え始めてみたものの、
真っ先に思いついたのは、
「漫画の情報を集めたデータベース」
とか
「自分が読んだ漫画を本棚に登録できる」
みたいなものだったりと、
まあ、ご多分に漏れず、すでに存在するサービスばかりでした。
なかなか作るものが決まらないでいたのですが、ある時急にアイディアが思い浮かびました。
それは友人と話しているときでした。
その友人は私と同じく漫画好きで、
ふと**「中学の頃ジャンプでなに読んでたっけ？」**
という話題になりました。
そして私は考えました。
えーっとなに読んでたっけー、ワンピースとかはもちろん読んでたけど…
遊戯王って連載してたっけ？
ググるか……自分が今３１歳で、中学１年生なら１３歳だから、１８年前で、
今が２０２１年だから、２００２年、じゃなくて２００３年か、
『ジャンプ 連載 ２００３年』っと うーん、このサイト見づらいな〜
『ジャンプ 連載 一覧』っと お、Wikipediaの記事あった
うーん、一覧で出されても、これも見づらいな……
いや、めんどくさ！！！！
ジャンプの思い出話に花を咲かせたいのに、当時なにが連載していたのか調べるのがめんどくさすぎる！
っていうか、あんなに毎週ジャンプを楽しみにしていたのに、
当時のジャンプの思い出を、結構忘れているのが悲しすぎる！
生年月日とかを入力したら一発で分かるようなサイトがあったら、
思い出話も盛り上がるじゃん！
とまあそんなことがきっかけで、こんなサービスを作るに至りました。
使ったのも
すみません、そろそろ技術的な話をします。
フレームワーク Ruby on Rails
私はもともとPHPの開発がメインのエンジニアでしたが、
そろそろ使えるようになっておきたいと思い、Ruby on Railsを使うことにしました。
Railsを使うにあたり、流石にいきなり作り始めるのはハードルが高かったので、
まずはRailsチュートリアルをやってみることにしました。
ふむふむ、３章までは無料で読めるのね。
よし、実際に手を動かしながらやってみよう。
で、２章くらいまでやって、これは良い教材だと思い、有料版を購入。
全１４章。
引き続きどんどんチュートリアルをこなしていきました。
で、４章くらいまで来て、
なんかちょっと飽きてきた……
というかダレてきたというか……
RailsチュートリアルはTwitterのようなサービスを作る過程で、
Railsの一通りの機能を学習することができるのですが、
早く実際に自分のサービスを作りたくて、ダレてきてしまいました。
とはいえ、まだちっともRailsのお作法がわかっていないので、どうしたものかと……
そこで、やみくもに進めるのではなく、Railsチュートリアルの効率的な進め方を調べてみることにしました。
で、いくつかの情報を見てみた所自分に合いそうな方法を見つけました。
それは**「Railsチュートリアルを３週やる」**というものです。
1周目：全体を把握するために、さらっと目を通す。
1章につき30分くらい。
「読む」のではなく「目を通す」イメージです。
2周目：実際に手を動かしてコードを書いてみる。
といってもほとんどコピペです。
「ここどういうこと？」と、疑問点があっても気にぜず、とにかく進めます。
3周目：より理解を深める。
文法に慣れるため、極力コピペではなく自分で書いてみる
疑問に感じたことを、別途調べながら書いてみる。
こんな感じの学習方法でした。
これなら出来そうと思い、また始めました。
しかし結局２周目が終わった段階で、
「もう十分じゃね？あとは自分で作りながら調べていけばいいだろ」
と思い、開発に着手しました。
「Railsを実務で使えるレベルにしたい」
という人は上記の方法で、しっかり３周くらいやるのがいいと思いますが、
私のように「とりあえずRailsを触ってみたい、早く自分で動くものを作ってみたい」
というくらいの人だったら、２週くらいで十分だと思います。
開発環境
Railsチュートリアルの２周目が終わり、次に着手したのは開発環境の構築です。
Railsチュートリアルは、AWSのCloud9というサービスを使って進めていたのですが、
Cloud9のブラウザ上のエディタで作業するのになかなか慣れませんでした。
そこで使い慣れたVScodeとDockerの開発環境を作ることにしました。
Dockerの公式リファレンスを参考に詳しく書かれていたので、こちらを参考に作成しました。
ただ、１つだけ後悔したことが……
こちらのリファレンス、DBがPostgreSQLだったので、そのままPostgreSQLを導入したのですが、
これは後に、本番環境を作る時にちょっと後悔しました。
使い慣れてたMySQLにしておけばよかった……
スクレイピング
データベースに入れる情報はPythonとSeleniumを使って、スクレイピングで集めました。
ジャンプの連載作品の一覧はこちらのWikipediaの記事、
ジャンプの発売日や号数の情報は文化庁のメディア芸術データベースというサイトから拝借しています。
各ページの情報をコピペしてデータベースに乗せるとなると、膨大な量で大変だったので、
スクレイピングをすることにしました。
また、は「ゆくゆくはスクレイピングをバッチで回してDBが自動で更新されるようにしたい」
という想いもあったので、スクレイピングをすることにしました。
PythonとSeleniumは、過去にブラウザテストの自動化などをやったことがあったので、
これは比較的スムーズにできました。
自動更新のバッチとかはまだできていないので、今後やっていきたいと思っています。
ロゴ作成・画像編集
さてさて、Railsの開発も進んできて、各種フォームができてきて、
スクレイピングでDBに乗せる情報も集まりました。
そろそろサイトの見た目を整えていかないと……
現状はplacehold.jpのダミー画像ばかり。
(このサイト便利ですよね。)
今までアサインされていた現場は、もちろんデザイナーさんがいて、
自分はデザインなんてやることありませんでした。
超未経験。
下手に凝ったものを作ろうとしたら、余計に粗が目立って良くないだろうから、
「最低限のロゴだけ作ろう」
と考えながら始めました。
しかし、どんどん沼にハマって、
結局、かなりの時間をこの工程にかけてしまいました。
まあ楽しかったからいいんだけど。
とまあそれはさておき、まずはロゴから作り始めました。
サイト名の「ジャンプなに読んでた？」というのはもう決めていたので、
これをジャンプのロゴっぽく作ってみようと、
どこかの無料のロゴ作成ツールで適当に作り始めました。
（すみませんどのサイトだか忘れました。）
で、そのロゴ作成ツールで、きんいろサンセリフというフォント見つけました。
きんいろモザイクという漫画のタイトルフォントが元ネタらしいです。
そのフォントが、ジャンプのあのフォントに似ていたので、これでロゴを作ってみようと思ったのですが、
やはり無料のロゴ作成ツールでは細かい操作ができず、納得のいくものができませんでした。
そこでAdobe XDをインストールして、XDにきんいろサンセリフのフォントを入れてロゴを作りました。
フォトショップでもなく、イラストレーターでもなくXDを使用したのは、単純に無料だからです。
素人がゴニョゴニョいじくり回して出来上がったロゴがこちら。
プロのデザイナーさんが見たらなんて言うかわかりませんが、
個人的には気に入っているので許してください……
これを元にファビコンやOGPの画像も作成していったのですが、
なんかどんどん楽しくなってきちゃって、どんどん欲が出てきてしまい、
ついには「メインビジュアルも作ろう」と血迷ったことをはじめてしまいました。
「最低限のロゴだけ作ろう。」という思いはどこへ行ったのやら……
とまあそんな感じで、出来上がったメインビジュアルがこちら。
いや実は、これも個人的には気に入ってるんすよ……
許してください。
とにかく、個人開発をするとなると、全ての工程を自分でやることになるので、
バックエンドのエンジニアだったら、このようなデザインの工程に時間を取られがちになると思います。
一つの経験として、デザインなどに時間をかけるのもいいですが、
そのせいで、本来の目的というか、サービスの肝となる部分が疎かになってしまうのも良くないなと思いました。
今回、私はいい経験になったと思いましたが、
次回からはデザインには時間をかけなくていいかなと思いました。
画像クラウドサービス
各作品の詳細ページ、
例えばワンピースだとこのページ
https://naniyon.com/detail/436
このURLを、Twitterに貼り付けると、こんな感じの画像が表示されます。
OGP（OGP画像）とかTwitterカードって言われるやつですね。
OGPの設定は
タグの中にタグで記述します。OGP画像だとこんな感じ
<meta property="og:image" content="OGP画像のリンク">
で、このOGP画像をどうやって作るか、とても悩みました。
ジャンプの連載作品は７００タイトル以上あるので、流石に１つ１つ作るのは不毛だなと。
そこで登場したのがCloudinaryというサービス。
いわゆる画像クラウドサービスなのですが、
特徴は、URLを少し変更するだけで、画像の加工・変換が簡単にできる
ということです。
例えば、このOGP画像の場合、
まずはベースとなる画像とそれに重ねるコミックの表紙画像をCloudinaryにアップロード。
そしてCloudinaryのURLに**「この２枚を重ねて表示して」**という記述をします。
https://res.cloudinary.com/naniyon-com/image/upload/l_img:436_dad6vf,x_-250/v1619585092/ogp_plbpev.png
後はこのURLをタグに記述するだけです。
Cloudinaryの使い方はこちらの記事に詳しく書かれていたので、参考にさせていただきました。
Cloudinaryを使って画像の変換をやってみる
本番環境
さてさて、開発環境である程度サイトの全体が出来上がってきたので、
いよいよ本番環境の構築に着手しました。
サーバーは勉強もかねてAWSを使おうと決めていました。
ステージング環境は作っていません。
ユーザー数が増えてきたら作ろうかと思いますが、いつになることやら……
本番環境は、主にこちらを参考にさせていただきました。
[AWSにRailsアプリケーションを実行する環境作りの手順メモ]
(https://qiita.com/rubytomato@github/items/44eb173c0111283a418c)
EC2とRDSは使ったことがあったのでそこまで苦労しませんでしたが、
急にUnicornなるものが出てきて戸惑いました。
RDSは便利なのですが、私はもう無料枠を超えてしまっているので、お金がそれなりにかかります……
折を見て、EC2に直接PostgreSQLをインストールしてRDSは廃止してしまおうかなと思っています。
ドメインはお名前.comで取得しました。
AWSでも取得できましたが、お名前.comのほうが安かったので。
SSL証明書はACM(AWS Certificate Manager)で取得
https://aws.amazon.com/jp/certificate-manager/
無料なのが良いですよね。
DNSはRoute53を使用
https://aws.amazon.com/jp/route53/
そんなこんなでなんとか本番環境が出来上がりました。
収益化
さて、ここからは収益化についてです。
メジャーな方法ですが、2つの方法で行っています。
Amazonアソシエイト
AmazonアソシエイトとはAmazonが提供するアフィリエイトプログラムです。
簡単に説明すると、
・Amazonアソシエイトに登録
・アソシエイト用のリンクを取得
・そのリンク経由で商品が購入されたら、紹介者にお金が入る
というものです。
Amazonアソシエイトを使用した理由は2つあって、
①収益化のため
②画像リンクの取得のため
なんですが、
どちらかというと②の理由のほうが大きいです。
「ジャンプなに読んでた？」では、各作品のページでコミックの画像を表示したかったのですが、
全ての作品の画像を用意するのは大変だったので、
Amazonアソシエイトの画像リンクを使用することにしました。
Amazonアソシエイトに登録したアカウントでログインしたまま、Amazonの商品ページを開くと、
アソシエイトツールバーというものが表示されます。
そこからこんな感じで画像のリンクを取得することができます。
各作品の画像リンクを取得してきて、データベースに登録。
Railsで動的にリンクを出力、という手法をとっています。
昔は審査が厳しかったようですが、今は登録だけならすぐにできます。
プログラムへ登録後、「180日以内」に「3回以上」の売上実績があると、正式に承認されます。
さて、2021年5月31日現在、
Amazonアソシエイトの収益額はというと……
はい、０円です。
かなしい……
Google AdSense
「なんだよ、収益化できてねーじゃねーかよ！タイトル詐欺かよ！」
という声が聞こえてきそうですが、ちょっとまってください。
ちゃんと収益化できています。
なぜなら、このサイトはGoogle AdSenseの審査が通っているからです！
この審査が通るまで大変でした。
何度もサイトの修正を行い、３回目くらい挑戦してやっと審査が通りました。
その収益額がこちら！
８４円……
しかも、たぶんこれ自分で広告クリックした分だ……
もちろん、サーバー代を計算すると、超マイナス。
なかなか収益化って難しいですね〜
最後に
ここまで読んでくれてありがとうございます。
結局タイトル詐欺みたいになっちゃってすみません。
でも収益化できたことに間違いは無いので許してください。
この**「収益化できた」**という事実が、自分の中ですごく大きいです。
労力とかサーバー代を考えるとマイナスなのはもちろん分かっていますが、
自分のアイディアで、自分で手を動かして、自分の力だけでお金を稼いだ、
ということを達成できたのは、個人開発をするエンジニアとして大きな一歩だったと思います。
「ジャンプなに読んでた」は、もともとはRailsのポートフォリオとして作り始めたものです。
案件探しの時に、Railsを使えることをちょっとでもアピールできたらな〜
という、軽い気持ちで作り始めました。
しかし、今では自信を持ってこう言えます。
これはただのポートフォリオではありません。
私が作って、私が世に送り出した、立派なウェブサービスです。
これからも可愛がって、少しずつアップデートしていこうと思います。
また、その他にも新しいアイディアが出てきたら、
どんどん新しいサービスを作っていきたいと思います。
最後まで読んでいただき、ありがとうございました。