はじめに
RailsでアプリをつくってサクっとHerokuで公開するときに、とりあえずコピペでやっとくといいかもなリストです。
自分用の備忘録なので「あれもやったほうがいい！」とかはご容赦ください。
新しくRailsプロジェクトをつくる
rails new <プロジェクト名>
GitHubで履歴管理する
1. GitHubに新規リポジトリを作って接続
2. 空コミットする
# リポジトリ作成
git init
# 最初のコミット（空コミット）
git commit --allow-empty -m "first commit"
SQLiteからPostgresに変更
Rails6からコマンド１発ででいるようになったらしい。神。
#Gemをインストール
bundle install
#postgresqlに変更
rails db:system:change --to=postgresql
# データベースをつくる
createdb "dbname"
# データベースの作成を完了させる
rails db:create
GemfileにGemを追加
自分がよく使うのはこんな感じ
# for debug
gem 'pry'
# for design
gem 'bootstrap'
# use font-awesome
gem 'font-awesome-sass'
# ogpの取得
gem 'open_uri_redirections'
gem 'opengraph_parser'
gem 'solargraph'
# サイトマップを作る
gem 'sitemap_generator'
# sitemap自動更新用
gem 'whenever', require: false
# 日本語対応
gem 'rails-i18n'
# Slack通知（ユーザーからの投稿などがある場合は、Slack通知で不正なデータがないかチェック）
gem 'slack-notifier'
# Sentryでエラー検知
gem 'sentry-ruby'
# Kaminariでページング
gem 'kaminari'
bundle install
jQueryを使えるようにする
npm install --save jquery
yarn install --check-files
yarn add jquery
webpackをインストール
rails webpacker:install
サービスの根幹をつくる
・モデル作成
rails g model <モデル名>
・マイグレーションでカラム作成
rails g migration AddColumnTo<モデル名>
rails db:migrate
・コントローラー作成
rails g controller <コントローラー名>
・ルーティング設定
config/routes.rb
Rails.application.routes.draw do
root 'results#index'
# 存在しないページはトップページに飛ばす(これ最後に書かないとそこ以降は全部これに引っかかってとばされる…)
get '*unmatched_route', to: 'results#index'
end
・Viewのデザイン設定
集客、拡散させるためのコツ
画像の作成
・Twitter用のカード(1280px670px)をつくってassets/images配下に置く
・iPhoneでホーム画面に追加されるとき用のアイコン(apple-touch-icon.png)(800px800px)をつくってassets/images配下に置く
・favicon(32px*32px)をつくってassets/images配下に置く
https://ao-system.net/favicon/
ページのタイトル、説明、ogp画像を可変にする
・application helperで管理
app/views/layouts/application.html.erb
<meta name="description" content="<%= page_description %>">
<meta property="og:title" content="<%= page_title %>">
<meta property="og:description" content="<%= page_description %>">
<meta property="og:url" content="<%= request.url %>">
<meta property="og:image" content="<%= page_image %>">
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="<%= page_image %>">
app/helpers/application_helper.rb
module ApplicationHelper
def page_title
title = "基本のタイトル"
title = @page_title + " - " + title if @page_title
title
end
def page_description
description = "基本の説明"
if @work
description = "#{変数}と組み合わせたり"
end
description = @page_description.nil? ? description : @page_description
end
def page_image
image = asset_url('基本のサムネイル')
# ページごとにサムネイルがあったら上書き
if @works
@works.each do |work|
unless work&.thumbnail_url.blank? || work.nil?
image = work&.thumbnail_url
break
end
end
end
image
end
def get_twitter_card_info(page)
twitter_card = {}
# ページごとにTwitterシェア時のサムネイルを変える
if page
twitter_card[:url] = page.url
twitter_card[:title] = page.title
twitter_card[:description] = page.description
else
twitter_card[:url] = '基本のURL'
twitter_card[:title] = '基本のタイトル'
twitter_card[:description] = '基本の説明'
end
twitter_card[:image] = asset_url('基本のサムネイル画像')
twitter_card[:card] = 'summary_large_image'
twitter_card[:site] = '@rubys8arks'
twitter_card
end
end
サイトマップをつくる
下記のサイトの指示にしたがってサイトマップを生成&自動更新の仕組みをつくる。
日本にローカライズ
エラーメッセージの日本語化
locals配下にja.ymlを置く
タイムゾーンの日本時間化
config/application.rb
# デフォルトのタイムゾーンを日本にする
config.time_zone = 'Tokyo'
config.active_record.default_timezone = :local
# デフォルトのlocaleを日本語(:ja)にする
config.i18n.default_locale = :ja
config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]
エラーが起きたときのページを日本語化
public配下の404.html、422.html、500.htmlの中身を変える
その他、サービス公開までにやること（任意）
- 独自ドメイン取得
- Google Analytics取得
- Google Tag Manager取得
- お問い合わせ用のGoogleフォーム作成（お題箱などでも代用可）
- 利用規約作成
- プライバシーポリシー作成
- エラー検知用にSentryを繋ぐ
Herokuにデプロイする
railsのバージョン違いでエラーが起こったら
Heroku上でデータベースをつくる
heroku rake db:migrate
Herokuの無料枠でのスリープ回避
UptimeRobotを使用する（回避できてるのかな？）
色の選び方
背景色と文字色が見やすくなるよう、明度差と色差をチェック。
http://www.ne.jp/asahi/movieee/dev/sample/colorcheck/index.html
Webアクセシビリティの基準(WCAG1.0)では、前景色と背景色の組み合わせについて明度差は「125」以上、色差は「500」以上を基準としています。
ほかにもあったら追記してみます。