0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Railsアプリ作成のための下準備

Posted at

#Railsのインストール
Railsのインストールをおこないます。参考文献に従い、バージョンは5.2.1を選択。

$ gem install rails -v 5.2.1

無事インストールできました!!

#アプリの雛形作成
アプリの雛形を作成します。

$ rails new tweet_app -d mysql

アプリケーションディレクトリに移動して…

% cd test_app

データベースを作成します。MySQLを起動した状態で次のコマンドを入力。

$ bin/rails db:create

これでDBが作成される…と思ったら、エラーが。

Mysql2::Error::ConnectionError: Access denied for user 'root'@'localhost' (using password: NO)

数時間対処法を探しましたが、一向に解決しないので急遽PostgreSQLを使うことに。

Homebrewでインストールし、先程の手順まで戻ります。

$ bin/rails db:create

今度は無事にDBが作成されました!
続いてサーバーを起動します。

$ bin/rails s

サーバーを起動させたら、ブラウザでhttp://localhost:3000 にアクセスします。
(サーバーを終了させるには[Control + C])
image.png

画像の通り、正常に動作しています。

#Slimの導入
Railsを用いた開発では、アプリの画面を「ERB」というテンプレートエンジン(最終的なHTMLを生成する仕組み)を使用しています。
その他に、ERBよりも簡潔な書き方ができる「Slim」があります。今回はこちらを使用することにします。
Slimの導入には2つのgemを使用します。

1.slim-rails: Slimのジェネレータを提供する
2.html2slim: ERB形式のファイルをslim形式に変換する

アプリのGemfileに定義し、

gem 'slim-rails'
gem 'html2slim'

bundleコマンドでインストール。

$ bundle

これで、生成されるテンプレートファイルはSlim形式になりました。
現時点でapp/views/layoutsディレクトリ内にERB形式のファイルが3つあるので、以下のコマンドでSlim形式にします。

$ bundle exec erb2slim app/views/layouts/ --delete

bundle exec [コマンド]で、Bundler管管理下のgemを利用できる状態でコマンドを実行します。

#BootstrapとSassの導入
自力でCSSを組むのは大変なので、フロントエンドフレームワークのBootstrapを導入します。
Gemfileに以下を追記し、bundleコマンドでインストール。

gem 'bootstrap'

CSSにもSlimと同じように効率的な書き方の形式「Sass」があります。
今回はSassの提供する、「SCSS」記法でCSSを買いていきます。

まず、app/assets/stylesheets/application.cssを削除し、

$ rm app/assets/stylesheets/application.css

app/assets/stylesheets/application.scssを作成し、以下をファイルに記述。

@import "bootstrap";

これで、画面をBootstrapが反映された状態にすることができます。
次に、見栄えを具体的に改善するため、app/views/layouts/application.html.slim
ファイルを以下のように編集します。

doctype html
html
  head
    title
      | TweetApp
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  body
    .app-title.navbar-expand-md.navbar-light.bg-light
      .navar-brand Tweet_app
    .container
    = yield

#エラーメッセージの日本語化
Railsのエラーメッセージは英語ですが、日本語にすることができます。
日本語翻訳ファイルがGitHub上にあるので、ダウンロードしましょう。

$ wget https://raw.githubusercontent.com/svenfuchs/rails-i18n/master/rails/locale/ja.yml --output-document=config/locales/ja.yml

続いて、デフォルトで日本語コンテンツを使うようにアプリの設定を変更します。
config/initializers/locale.rbを作成し以下を記入。

Rails.application.config.i8m.default_locale = :ja

これで、アプリ製作の下準備は完了です!

#参考
現場で使える Ruby on Rails 5速習実践ガイド

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?