Webサービスを作ったことがないWebデザイナーがリリースまでやったこと

こんにちは、京都でWebデザイナーをやっている@sho_yamaneです。

普段は、受託で企業さんのWebサイトの制作をメインでしております。PGスキルとしてはPHPメインで、デザインの方がウリです。フリーランスでやってるので自分の取り分が減ってしまうのでPGも自分でやるようになったらWordPressならゴリゴリカスタマイズできるという程度でした。

そのような私が作ったのが以下のサイトです。

FITOUT - "みんなで作る"トレーニングの必需品情報サイト
https://fitout.jp/

簡単に言うと価格.comのフィットネス版のようなサイトです。ソーシャル機能もつけていますのでQiitaのようにいいね！、お知らせ通知、フォローなどの機能もあります。

上記のサイトを作るに当たって学んだことを復習がてら書いていきたいと思います。

Ruby on Railsの勉強（2週間ぐらい？）

こういう技術書は多少お値段しますので、どうせ途中で投げ出して無理だろwみたいなところがあったのでネットで無料で学べるRailsチュートリアルで勉強しました。

現在はRails5でも学べるようなのですが、Rails4.2のヴァージョンで勉強しました。余談ですが、FITOUTを途中でRails5にアップグレードしたのですが、gemのエラーが出まくったので4.2にダウングレードしています。

Railsチュートリアルは本当によく出来ており、Railsの基礎をしっかりと学ぶことが出来ました。

Railsチュートリアルが終わる頃に上記の本を2冊購入したのですが、ほとんど開いておりません。Railsチュートリアル+検索でFITOUTを作成するには事足りました。

インフラの選定

もちろんせっかく作るならハイスペックでしっかりとした環境で構築したいという思いもあったのですが、1人で作るサービスですし、最初からアクセスがたくさんあるわけでもないのでできるだけ学習コストを押さえて、"とりあえず動かす"ということを優先した結果、

Ruby on Rails + Heroku + Amazon S3 + postgresql

で作成しています。

Herokuで使ってるプランとアドオンは以下の通りです。

• プラン：hobby（7$/月）
• アドオン：Heroku Postgres（DB）
• アドオン：New Relic APM（パフォーマンス監視）
• アドオン：Heroku Scheduler（サイトマップ更新やAPIを定期的に実行するため）
• アドオン：SendGrid（問い合わせメール）

上記のアドオンはすべて無料のプランなのですが、Postgresは無料プランだと10,000行までしか使えないのでそのうち有料で課金すると思います。

コーディング（1.5ヶ月ぐらい）

環境が決まればコーディングです。コードの美しさや処理速度も多少は意識をしましたが、「あ〜クソコード書いてるな」と思っても開発スピード優先で作成しました。

途中で受託案件もあったのでなんとも言えないところですが、コーディング期間は2016年12月前後開始したので1.5ヶ月ぐらいです。

データ入力

こちらはまだ途中です。商品を登録していく作業になりますが現在500件ぐらいのプロテインのデータ入力しか出来ていないので今後の課題です。FITOUTは成分比較やタンパク質1gの価格の算出をしていてそこがウリでもありますので成分の入力作業の時間がかなりかかってしまいます。

プロテイン製品1gあたりのタンパク質量比較や価格比較
https://fitout.jp/protein1g/

使用しているgem

以下に現在使用しているgemを記載しておきます。デザイナー寄りなのでコーディング力が無いのを自覚しているのでできるだけgemを頼るようにしていますがWordPressのプラグイン入れすぎ！みたいな感じになっているような気もしますがどうなんでしょうかｗ 他の人が作ったサイトのgemを見たことがないのでなんとも言えずです。

source 'https://rubygems.org'

gem 'rails',                '4.2.2'
gem 'bcrypt',               '3.1.7'
gem 'faker',                '1.4.2'
gem 'bootstrap-sass', '3.2.0.2'
gem 'sass-rails',           '5.0.6'
gem 'uglifier',             '2.5.3'
gem 'coffee-rails',         '4.1.0'
gem 'jquery-rails',         '4.0.3'
gem 'jbuilder',             '2.2.3'
gem 'sdoc',                 '0.4.0', group: :doc
gem 'rb-readline'
gem 'will_paginate',           '3.0.7'
gem 'rails_will_paginate_seo_helper'
gem 'bootstrap-will_paginate', '0.0.10'
gem 'amazon-ecs'
gem 'nokogiri'
gem 'yahoo-api'
gem 'rakuten-api'
gem 'rakuten_web_service'
gem 'anemone'
gem 'font-awesome-rails'
gem 'carrierwave',             '0.10.0'
gem 'fog',                     '1.36.0'
gem 'ckeditor'
gem 'rmagick'
gem 'mini_magick',             '3.8.0'
gem "jquery-slick-rails"
gem 'impressionist', '~> 1.5.1'
gem 'rails_real_favicon'
gem 'watir-webdriver'
gem 'poltergeist'
gem 'jquery-tablesorter'
gem 'sitemap_generator'
gem 'meta-tags'
gem "chartkick"
gem 'seed-fu', '~> 2.3'
gem 'devise'
gem 'omniauth'
gem 'omniauth-facebook'
gem 'omniauth-twitter'
gem 'public_activity'
gem 'jpmobile'
gem 'jpmobile-terminfo'

group :development, :test do
  gem 'sqlite3',     '1.3.9'
  gem 'byebug',      '3.4.0'
  gem 'web-console', '2.0.0.beta3'
  gem 'spring',      '1.1.3'
end

group :production do
  gem 'pg',             '0.17.1'
  gem 'rails_12factor', '0.0.2'
  gem 'puma',           '2.11.1'
end

今後の期待

以上が現在の経過です。私自身筋トレを週5ぐらいするほどハマっておりましてプロテイン情報を眺めてるだけで幸せになれる体質なので作っているだけでかなり楽しめている状況ですが、多少収益にもなればなと思うのが正直な所です。

しかし、収益にならなくても簡単なWebサービスなら作れるという自信が出来たので受託案件の提案の幅が広がったなと思っております。

なので現在に引き続き、楽しみながら運営してフィットネス業界の反映やトレーニー達に役に立つサイトが出来ればなと思っております。以上、Webサービスを作ったことがない未経験者がとりあえずやってみたことでした。これからWebサービスを作る方達の参考になれば幸いです。

FITOUT - "みんなで作る"トレーニングの必需品情報サイト
https://fitout.jp/