読者です 読者をやめる 読者になる 読者になる

Webサービスを作って潰すのが趣味な人のブログ

とりあえず作ってから怒られよう

【作ってみた】Web小説投稿サイト「スキマノベル」をRails使って2週間で作ってみた過程をスクショ50枚で説明してみる

ConoHa CSS Webサービス 作ってみた 環境構築

f:id:vu2:20160912193102p:plain

異世界転生してチート能力もらって美少女と出会って自由に生きてたらいつの間にか世界救ってた。そんな人生を来世こそは歩みたい。

 

今回はWeb小説投稿サイトを作ってみました。いつもは3日で作ってみたシリーズなのですが今回はなんと2週間!その分しっかり練り込んだので普段よりも品質はちょっと高い気がします。

あ、「作ってみた」と言いつつまだ9割ほどしか完成していません。検索をどういうデザインにしようか~とか、投稿画面を微調整しようかな~とか色々考えてる最中ですが細かい点なので先に記事を更新しちゃいます。

 

今回は実際の経過のスクショ満載なので「Webサービスってどうやって出来るのかな?」という人は是非読んでみてください。(参考になるかはわかりませんが

 

 

↓作ったサイトはこちら

sukimano.net

今はまだαテスト中ですが9月15日にβオープンの予定なのでもし小説を投稿するのが好きな方がいらっしゃったら使って感想を頂けると嬉しいです:D

 

なんで小説投稿サイト作ったの?

本題に入る前にプロローグ

色々理由はあるんですが一番大きいのは「読者が使いやすいサイト」がなかったからです。Web小説投稿サイトってなんと100サービス以上あるんですよ。イラストSNSが30個くらいしか無い(多分)事を考えたら異常に多いですよね。

それで僕も色々使ってみたのですがどのサービスも「書きやすいエディタ!」とか「投稿しやすい!」とかを意識していて読む方に力を入れているサービスが全然ありませんでした。

 

ちょっと前にはてなさんも角川さんと組んで小説投稿サイトをオープンしましたが、こちらもスタイリッシュ過ぎてちょっと落ち着いて読む感じではないかな、とそんな感じでした

f:id:vu2:20160912195229p:plain

↑かっこ良すぎますよね。スタバみたい

 

kakuyomu.jp

 

それじゃ作るか、と思い立ったのが8月の中旬。後発だし超ニッチなところを狙って行こうと色々考えて実際に作業が始まったのが8/25くらいでした。

 

タイムスケジュール

初日 8/25

・Railsのプロジェクトを作成

 

f:id:vu2:20160912195951p:plain

↑僕は自前のRails application templateを使っているので作成した段階でこんな感じになります。右下の「フィードバック」はZENDESKでGoogleAnalyticsなども作成した段階で埋め込んでます

 

・サイト情報を埋める

f:id:vu2:20160912200337p:plain

↑ココらへんはまだサイトのテーマが固まりきってないので色々悩んでいました

 

・ログイン画面やヘッダーなどの調整

f:id:vu2:20160912200241p:plain

 ↑雛形にサイトタイトルが入っただけですがちょっとしまりますね。ちなみにsemantic-uiをCSSフレームワークとして使っています

semantic-ui.com

 

2日目 8/30

仕事があったので2日目は4日空いた8/30から始まります。

とりあえず更新したデータを告知する場所である「スタッフブログ」を作ろうと思いました。スタッフブログは別ドメインにせず/blogに設置。Nginxを使っています。

デザインはsixteen?をベースにシンプルに白黒にしました。後で綺麗にすればいいでしょう……そのうちそのうち……

 

f:id:vu2:20160912232000p:plain

https://sukimano.net/blog/

 

3日目~6日目 8/31~9/4

デザイン期間だったのであんまり進んでません。字が汚くて恥ずかしいのですが実際の物を貼っておきます。

 

・トップページ

f:id:vu2:20160912201709p:plain

なんかすっごい恥ずかしい。なんちゃらとかほげほげとか人に見られるとこんな恥ずかしいんですね。

↓実際のデザイン

f:id:vu2:20160912201950p:plain

結構シンプルです。そのうち情報を増やしていきたいですがとりあえずこんなもんでしょうか。

 

・小説閲覧ページ

f:id:vu2:20160912201026p:plain

 この段階では挿絵機能が構想にあったので書いてありますが無くなりました。

それで実際はこんな感じになりました

f:id:vu2:20160912201510p:plain

ちょっと変えましたが殆どデザイン案通りです。

 

・小説ページ

f:id:vu2:20160912202535p:plain

これはわりとデザインかわりましたね

f:id:vu2:20160912202722p:plain

 

 

・スマートフォン向けのヘッダー

f:id:vu2:20160912202234p:plain

ラフは無し。ここらへんでヘッダーを作成しました。シンプルにアイコン+文字にしています。

f:id:vu2:20160912202312p:plain

重要度の低いメニューは折りたたみ、ユーザーメニュー(右上のその他)はモーダルで表示するようにしました

f:id:vu2:20160912202420p:plain

 

・ユーザーページ

f:id:vu2:20160912202830p:plain

アクティビティという限りなく分かりづらい名称はやめて「活動ログ」にしました。構想段階とちょっと変わってますね。

 

f:id:vu2:20160912202903p:plain

 7日目 9/5

サイトをとりあえず公開&SSL化しました。初めてだったのですが意外と簡単にできたのでびっくりです。

f:id:vu2:20160912231645p:plain

 

・他にもエラーページを作ったり

f:id:vu2:20160912232405p:plain

 

・ユーザーページの雛形を作ったり

f:id:vu2:20160912232538p:plain

どうでもいいけど「すごいかっこいい俺!!!! aaaa やばい」ってだいぶ酷いですね。この時NEWSの手越をTVで眺めながら作業してたせいだと思います。

f:id:vu2:20160912232749p:plain

デザインを微調整

 

8日目 9/6

ユーザー機能の残りを埋めていく作業です

f:id:vu2:20160912232847p:plain

タブの設置と、とりあえずフォローされたユーザーのデータを仮で表示して

f:id:vu2:20160912232942p:plain

3列にしてみたり。あんまりしっくりくるデザインが出来なかったので後で調整するつもりです。

 

・次は通知機能

f:id:vu2:20160912233110p:plain

f:id:vu2:20160912233901p:plain

↓ シンプルに見やすく

f:id:vu2:20160912233217p:plain

 

9日目 9/7

 

・プライバシーポリシーや利用規約もガリガリ-っと埋めていきます

f:id:vu2:20160912233623p:plain

ドキュメント類を用意するのは本当に大変ですよね……ヘルプなどを埋めていきましたが用意するだけで丸一日かかりました。

 

10日目 9/8

・タイムラインの作成

f:id:vu2:20160912234223p:plain

Facebookで言うとウォール、Twitterで言うとつぶやきってやつです。ただ、Twitterのように気軽に投稿できるものではなく投稿の敷居を上げるためにメニューから専用の投稿ページに遷移しないと投稿できない形にしました。

また、ここには小説を投稿した時なんかに自動で表示されるようにしたかったので汎用性をもたせました。

 

・小説ページの作成

f:id:vu2:20160912234532p:plain

最初は挿絵投稿機能を考えていたのでその名残で表紙っぽいのが出てます。ちなみに挿絵機能はなくなりました。

f:id:vu2:20160912234752p:plain

とりあえずざっくりとフォームを作成。スキマノベルは投稿フォームの使いやすさを考えていないのでその分他の開発に力を裂けます。

メモ帳で書いてここにアップするだけ、ってイメージですごくシンプルにしました。

 

スキマノベルは「小説」→「章」→「エピソード」の3段構成になっているので章も作れるようにします。

f:id:vu2:20160912234942p:plain

 

 

11日目 9/9

今度は小説ページのデザインを整えます。

f:id:vu2:20160912235128p:plain

 ↓ ザクザクザクっと書いて

f:id:vu2:20160912235301p:plain

↓こんな感じに

f:id:vu2:20160912235338p:plain

↓データを仮置きしていき

f:id:vu2:20160912235605p:plain

↓ お気に入りしたらちゃんと通知されるかなどをチェック

f:id:vu2:20160912235701p:plain

 

あとがき機能なども動いているか確認します。

f:id:vu2:20160912235744p:plain

 

小説ページとレビューページを用意します

f:id:vu2:20160913000327p:plain

 

「ここにレビュー」と仮置きしたところにレビューを実装

 

f:id:vu2:20160913000037p:plain

レビューのデザインをもうちょっとしっかり作ります

f:id:vu2:20160913000236p:plain

 

後は複数構成の小説でも問題が無いかをチェック

f:id:vu2:20160913000443p:plain

実際にサイトにテストのために投稿をしてみました

f:id:vu2:20160913000621p:plain

 

12日目 9/10

実際にサイトに投稿してくれた方がいたのでランキングや一覧表示などに着手。基本的にデザインの調整に時間をさきました。

f:id:vu2:20160913000806p:plain

 

そういえばTwitterボタンなかったなーと

f:id:vu2:20160913000854p:plain

↓ 設置して調整

f:id:vu2:20160913000948p:plain

 

ユーザーの小説一覧が味気ないので

f:id:vu2:20160913001110p:plain

↓また調整

f:id:vu2:20160913001150p:plain

その他にも相当調整しましたが数px動かしたとか、背景色をほんの少し薄くしたとか見ていて面白い事も無いのでがっつり省略します

 

13日目 9/11

・ ランキングを4つに分けました

今までは総合だけだったので、月間や週間、デイリーなどを用意

f:id:vu2:20160913001601p:plain

 

・既読機能を設置

f:id:vu2:20160913001439p:plain

 どの作品を読んだのか、読んでないのか、全て読んだのか、読んでないエピソードが更新されているのか。なんて事をアイコンでわかるようにしました。

 

14日目 9/12(今日)

今日です!

一息ついて頂いた意見の反映を行いました。

傍点を《《》》に変更したり、とか微調整微調整。

 

大きな機能としては小説閲覧ページの背景を変えられるようにしたり

f:id:vu2:20160913001750p:plain

文字サイズだけはもうちょっと後で

f:id:vu2:20160913001844p:plain

 

・最後に検索フォームを設置

f:id:vu2:20160913002001p:plain

タグ検索、キーワード検索、ユーザー検索、文章の長さ検索、などなど。検索条件が多いと予想されるのでとりあえずフォームだけ作って今日は終了。

デザインはこれですがまだ検索だけ出来てません(※オープンは15日なのでヤバイ!!

f:id:vu2:20160913002217p:plain

 

技術的なお話

……は今回なし!

デザインというかサイトが出来ていく流れをなんとなーく伝えられたらと思っているので難しい話はやめます!

 

 

コスト的なお話

小説サイトは文字がメインなのでいつも作っているようなサイトに比べれば比較的余裕があるといえばあります。だからと言って1サーバーで何でもかんでも出来るわけではないので3台+DB+ストレージのいつもの構成

 

Culonのランニングコスト

  • ドメイン 200円/月
  • メインサーバー 1,000円/月
  • CDNサーバー 1,000円/月
  • REDISサーバー 1,000円/月
  • DBサーバー 100円/月 (1台に10サービス載せてます)
  • 容量課金 4.5円/1GB/月

ということで「3,300円+容量課金」となります。

※勿論人が増えたらすぐにパンクするのでとりあえずテスト用という前提です。ある程度の規模をまともに運用するつもりなら最初から数万円かけてがっつり構成しましょう

 

今回は長かった……

一度画像を沢山使ってサービスを作る流れみたいなものを説明出来たらな~とは思ってたので良かったです

スクショアプリ常時起動してると重いので今後はやらないですけど少しでもWebサービスを作るワクワク感みたいなものを感じてもらえたら嬉しいです!

しばらくはスキマノベルを継続的に開発していくつもりですがまた時間に余裕が出来たら別のサービスも作る予定なのでまたその時に会いましょう

 

開発系の記事なのでこれも貼っておきます:D

 

 またね~