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

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

 

 またね~

【作ってみた】Webオンラインブックマークサービス「Culon」を3日で作ってみた

作ってみた Culon Rails

f:id:vu2:20160610222246p:plain

可愛いイラストを見ると心が震える、そんな感受性の針が振りきれた25歳独身ことktです。

 

 ※この記事はブログ移転に伴って再投稿した記事ですm(_ _)m

 

Twitterでちょいちょい呟いていましたが「オンラインブックマークサービス」に挑戦してみました

 

culon.net

続きを読む

【Disqus】プライベートなサイトで使うのにDisqusは向いてません、外から誰でもコメントが覗けます

Webサービス ブログ 失敗談

はてなブログなのにDisqusネタを投稿しちゃうおじさんだ~れだ?そう、ktだね!

 

 ※この記事はブログ移転に伴って再投稿した記事ですm(_ _)m

 

Disqusを導入しているブログが沢山あります。格好いいですもんね(*´∀`) かっこいいんだけど!!Disqusが!!「オープン コメント システム」だって気づいてない人が居るみたいなので啓蒙の意味も含めてメモメモ

 

おじさんが一体何を心配しているかって言うと「部外者に見られたくないプライベートなサービスにDisqusは入れちゃダメだよ!」って事です。ダメゼッタイ

 

プライベートな環境とは

PRIVATE

 

  • 公開していない企業サイト
  • スタッフ専用ブログ
  • 公開しつつもコメントが一部の人にしか表示されない設定になっているブログ
  • 鍵付きブログ

 

なんでもいいんですけど、こういう他人に見られることを想定していないサービスにDisqus入れると思わぬトラブルに巻き込まれます

 

(そんな環境でこんなパブリックなツール使うやついるの?と聞かれそうですが……察して下さい。あ、今はまだないと思いますが導入するとデフォルトでDisqusがコメントシステムとして設定されるなんて業務提携も今後ありえるかもしれませんよね、うん、不可抗力)

 

なんで使わない方がいいの?

簡単に言ってしまうとDisqusのコメントは「誰からでも読めます」そのブログでコメント欄を封鎖してようが、ログインしないと非表示にしてようが関係ありません

 

 

「Disqusを使っている=誰からでも見られる」

 

 

という事を覚えて帰って下さい。これを覚えてもらったらおじさんはもう心残りはないよ:D

 

 

いまいちよくわからない人のために例を一つ

  1. 企業Aが非公開でスタッフオンリーが使えるブログを作成
  2. コメントシステムにDisqusを導入
  3. そのブログ自体へのアクセスはパスワード認証があるので部外者は出来ない

さてさて、この状況だとパスワードを知らない外部の人間がコメントを読むのは普通は無理ですよね?開発者からしても読まれる事を想定していないと思います

 

しかし!Disqusだと普通に外からコメント読まれちゃうんです、隠すことは出来ません

 

どうやって読むの?

blog.3oku.net

この前紹介したWidgetコードを使います。一例としてDisqusを導入している有名サイト「WebCreatorBox」さんの最新コメントを10件ほど表示してみたいと思います。

※例として挙げさせていただいただけですのでうちとは何も関係性はありません

 

↓クリックしてみてください 

http://wcbox.disqus.com/recent_comments_widget.js?num_items=100&hide_avatars=0&avatar_size=32&excerpt_length=1000

 

仕組み

もうわかっていると思いますが、このURLの「***.disqus」の部分をコメントを読みたいサイトのIDに変えれば誰でも勝手に他人のコメントを一覧で取り出すことが可能です

 

IDの推測に関しては直接覗けるならソースコードを見れば一発だし、多くのサイトがURLや自分のIDと統一しているのでなんとなく当てることもそう難しくないでしょう

 

外部サービスを利用する場合はきちんと調べないと思わぬ怪我をする可能性がありますので気をつけましょう

 

またね~

【話題】空きドメインから見えてくる「日本の企業が嫌いな数字」

ドメイン 話題 ネタ

好きなドメインは「.com」なktです。暇な時にドメインを調べるのが生きがいです。

 

from amazon.co.jp

さてさて、突然ですがみなさんは「.co.jp」ドメインを知っていますか?

 

「.co.jpドメインは法人登記している1企業1件しか入手できない希少価値の高いドメイン」であり企業の顔ともいうべきものですからその選択はとても慎重になります。

 

これを適当に選んで「unko.co.jp」なんてしちゃった日には一生後悔すること間違いありません。そんな大切な「.co.jp」ドメインの中でも更に希少なのが「3文字ドメイン」であり、その中でも「数字だけ」さらに言えば「ゾロ目などの覚えやすい数字」は希少性抜群です。

  • 000.jp, 111.jp, 222.jp, ... 999.jp
  • 000.jp, 001.jp, 002.jp, ... 009.jp

一番思いつきやすいこの2つのパターン、とっくに埋まってるのかとおもいきや調べてみると「ある数字だけ使われていない」事がわかりました。

 

 

「みなさんはどの数字かわかりますか?」

 

 

実際のキャプチャ

f:id:vu2:20151121040701p:plain

f:id:vu2:20151121040704p:plain

薄々想像つきますけどまさかですよね:D

 

商売ごとだからこそ縁起を担いでいるのでしょうか、なんだかほっこりします

 

もし自分が会社を作る事があったら埋めてやろうかな~と変な情熱が湧いてくる昼下がりでした。

 

またね~

【作ってみた】クリエイターのための知識共有サイト「tich(てぃーち)」を3日で作ってみた

作ってみた Rails tich

f:id:vu2:20160805112105p:plain

自分は甘やかされて伸びるタイプだと信じて25年生きてきたktです。

 

※この記事はブログ移転に伴って再投稿した記事ですm(_ _)m

 

しばらく忙しくてWebサービスを作ってなかったのですが久しぶりに手を出してみました。まずは出来上がったサイトがこちら

tich.jp

 

このサイトはイラストとか音楽とか色々なクリエイターの方がメイキングやハウトゥ、Photoshopの ブラシ配布などが出来るサイトとなっていて、マークダウンもどきで誰でも簡単にそれなりの記事が投稿可能です:D

 

続きを読む

【Rails】URLに「.」(ドット)を含みたい場合の対処法2つ

Rails

ダメだと言われようと男にはURLにドットを含めたい日もあるんです。そんなハードボイルドな生き方がしたいktです。

 

何アホな事言ってんだって思われそうなので早速本題

先日タグ機能を実装しているサイトでユーザーさんがこんなタグを使ってエラーを踏みました

 

 

「S.E.E.D」

 

 

Railsは「.」を拡張子の「.」だと自動認識するのでちゃんと指定してやらないとエラーになっちゃうんですね

 

具体的な使用例

URLリダイレクトをかける時とか

http://example.net/redirect/url/http://google.com

 

Wikipediaみたいな単語辞書とか記事タイトルやタグなどに「.」を含みたい時とか

http://example.net/diary/T.M.Revolution
 

これらはRailsがフォーマット形式だと認識して404を返してしまいます、それを避けるためにはいくつか方法があるので参考までに:D


対処法その1 URLをエスケープしてクエリとして渡す

動きゃいいということでURLに組み込むのではなくGETクエリとして渡します

 

Before: http://example.net/redirect/url/http://google.com
After: http://example.net/redirect/url?url=http%3A%2F%2Fgoogle%2Ecom

 

URLエンコードしてしまえば「.」を含んでいても関係なく渡すことができますので即席対応としては良いですね

 

URI.escape("http://google.com")

 

ただこの方法はURLがあまり美しくないってのとユーザーの手打ちに対応できないって事からあまりクールじゃありません、ベターくらいです

 

出来ればそのまま使えるほうが良いですよね

 

対処法その2 文字列として取得する

どっちかというとこっちが本命です。

 

match "redirect/url/:url_string" => "redirect#url", format: false, url_string: /.*/

 

formatを無効にして取得するクエリを「/.*/」(全てに一致)させることで思い通りの挙動となります。

 

「どっちのほうがいいのか」っていうとまあ後者の方が良いんだけど逆にあんまり詳しくないユーザーにユーザーに手打ちで対応されたくないとか理由があるならエスケープしちゃってもいいかと思います

 

またね~

【ブログ】「私の愛しいアッ……ゲフンゲフン」的な冒頭挨拶を自動で埋め込む方法/と、冒頭文の必要性について

ブログ デザイン jQuery

homemade apple pie

私の愛しいアップルアップルなブログが地味に好き。どうもktです

 

 

ここでクイズです。

「ブログを閲覧する人の何割が一見さんでしょう?」

 

 

……チクタク

……チクタク

……チクタク

……チクタク

 

テルゥーン!!

正解は約7割~8割です(※人によります)

ということは記事を読む人はあなたのことを全く知らない人の方が多数なので冒頭で軽く自己紹介をしてあげたほうが親切ですよね?

 

続きを読む