Windowsでの設定

Header4

0 : この章の目的

 Windowsでの設定について解説する。


1 : Rails

 ① : フォルダの作成


Windowsでの「rails_project」の作成の方法を説明します。

  • Windows10であれば、Cortana
  • Windows8以下であれば、アプリ検索
で「エクスプローラー」を検索して開いてみて下さい。 Make folder1 開けたら、左側にあるスライドバーからPCを探してクリックして、下にある〜(C:)を開いて下さい。 Make folder2 開けたら、右上にある新しいフォルダをクリックして下さい。 Make folder3 クリックすると名前の入っていないフォルダが作成されるので、「rails_projects」と入力して保存して下さい。
※ 「_」は、Shift」を押しながら「/」を入力して下さい。 Make folder4  これで「rails_projects」のフォルダを作成できました!


 ② : 「rails_project」の開き方


Windowsでのコマンドプロンプトでの「rails_projects」の開き方を説明します。

  • Windows10であれば、Cortana
  • Windows8以下であれば、アプリ検索
で「コマンドプロンプト」を検索して開いてみて下さい。 Terminal1 Terminal2 終わったら、コマンドプロンプトで下の入力をして下さい。
※ 「_」は、Shift」を押しながら「/」を入力して下さい。

 コマンドプロンプト(半角英数字で入力)
1 cd /rails_projects
Open rails projects  これで「rails_projects」をコマンドプロンプトで開くことができました。
 次に「myapp」に移動するなら、

 コマンドプロンプト(半角英数字で入力)
1 cd myapp

で移動します。


 ③ : Gemfile


WindowsでRuby on Railsのウェブサイトを作る時には、事前にGemfileに追加の設定を加える必要があります。

 ここではその設定について説明します。
Gemfileを開いて、下の設定を追加して下さい。

 Gemfile(24〜26行目)
※ 半角英数字で入力。変更が完了したら「ctrl」と「s」を一緒に押して内容を保存して下さい。
24 25 26 gem 'sdoc', '~> 0.4.0', group: :doc gem 'coffee-script-source', '1.8.0'

変更が完了したら、コマンドプロンプトで次の入力をして下さい。

 コマンドプロンプト
※ 半角英数字で入力
1 bundle update coffee-script-source

 ここまでが事前に必要になる設定になります。


 ④ : Bootstrapの導入


ここでは、WindowsでのBootstrapの導入の方法を説明します。

 まずは、Bootstrapのページをこちらから開いてみて下さい。

このページの真ん中にあるDownload sourceをクリックして、ダウンロードを始めます。 Windows bootstrap1 ダウンロードが出来たらフォルダーを開くをクリックします。 Windows bootstrap2 下のようにbootstrap-3.3.6-distファイルが作成されているでしょうか? Windows bootstrap3 bootstrap-3.3.6-distを右クリックして、
下のようにプログラムから開く(H)」「エクスプローラーを選択して下さい。 Windows bootstrap4 開けたら下のようにして、ダウンロード」に移動させて下さい。 Windows bootstrap5 ダウンロードbootstrap-3.3.6-distがあるかを確認してみましょう! Windows bootstrap6 あったら開いてみて、中にあるdistの中に下のファイルがあるかを確認して下さい。
  • 「dist > css > bootstrap.min.css」
  • Windows bootstrap7 Windows bootstrap8
  • 「dist > js > bootstrap.min.js」
  • Windows bootstrap9 Windows bootstrap10
  • 「dist > fonts」
  • Windows bootstrap11

確認ができたら「rails_projects」を下の手順で開いて、 Make folder2 Windows bootstrap12 Windows bootstrap13 下の通りにファイルをコピーして下さい。

 コピーはctrl」と「cを一緒に押せば、貼り付けはctrl」と「vを一緒に押せばできます。

Bootstrapコピー元 Railsコピー先
dist > css > bootstrap.min.css app > assets > stylesheets
dist > js > bootstrap.min.js app > assets > javascripts
dist > fonts vendor > assets
これが終わったら設定を適用させるために
  • 「app > assets > javascripts > application.js」
  • 「app > assets > stylesheets > application.css」
を下のように変更して下さい。

 application.js(15行目を追加)
※ 半角英数字で入力。変更が完了したら「ctrl」と「s」を一緒に押して内容を保存して下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, // or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require jquery //= require jquery_ujs //= require bootstrap.min //= require turbolinks //= require_tree .

 application.css(15行目を追加)
※ 半角英数字で入力。変更が完了したら「ctrl」と「s」を一緒に押して内容を保存して下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any styles * defined in the other CSS/SCSS files in this directory. It is generally better to create a new * file per style scope. * *= require bootstrap.min *= require_tree . *= require_self */

 ここまでが、WindowsでのBootstrapのインストールになります。


 ⑤ : gem導入時の設定


  ここではWindowsで下のようになって、「gem」が入力できない場合の対処方法を説明します。 Windows gem ssl1 まずはこちらのページを開いて、rubygems-update-2.2.3.gemをクリックしてダウンロードして下さい。 Windows gem ssl2 ダウンロードが終了したらフォルダを開くを押して、保存したファイルを確認しましょう。 Windows gem ssl3 新しくエクスプローラを開いて、左側の「PCをクリックして、そこに出てくるWindows(C:)をクリックして下さい。 Windows gem ssl4 ここまでで出来たら、ダウンロード」フォルダにあるダウンロードしたファイルを「Windows(C:)」に移動させて下さい。 Windows gem ssl5 ではコマンドプロンプトを開いて、設定を加えます。下の入力をして下さい。

 コマンドプロンプト(半角英数字で入力)
1 gem install --local C:¥rubygems-update-2.2.3.gem


 コマンドプロンプト(半角英数字で入力)
1 update_rubygems --no-ri --no-rdoc


 コマンドプロンプト(半角英数字で入力)
1 gem uninstall rubygems-update -x

ここまでが出来たら、

 コマンドプロンプト(半角英数字で入力)
1 gem update --system

を入力してみて下さい。

 これで「gem」が入力できるようになったのではないかと思います。
 これでできなかった場合は、こちらを参考にして下さい。


 ⑥ : gem導入時の設定②


  ここではWindowsで⑤の設定をしても下のようになって、「gem」が入力できない場合の対処方法を説明します。 Windows gem ssl1 まずはこちらのページを開いて、zipをクリックしてダウンロードして下さい。 Windows rubygems ssl1 ダウンロードが終了したらフォルダを開くを押して、「ダウンロード」フォルダにrubygems-2.?.?(後ろの数字はダウンロードする時期によって変わります)という名前のファイルが保存されているかを確認しましょう。

確認できたら、ファイルを解凍して下さい。rubygems-2.?.?というフォルダができたでしょうか?
次にコマンドプロンプトで設定を加えます。まずは下の入力で「ダウンロード」フォルダにある「rubygems-2.?.?」フォルダに移動します。

 コマンドプロンプト(半角英数字で入力)
1 cd C:\Users\[自分のユーザー名]\Downloads\rubygems-2.?.?\rubygems-2.?.?
Windows rubygems ssl2 移動できたら、下の入力をして下さい。

 コマンドプロンプト(半角英数字で入力)
1 ruby setup.rb
Windows rubygems ssl3 下のような表示が出れば、ダウンロードは終了です。 Windows rubygems ssl4 ここでもう一度コマンドプロンプトで、

 コマンドプロンプト(半角英数字で入力)
1 gem update --system

を入力して見て下さい。

 これで「gem」のインストールができたのではないでしょうか?