少し前にRuby on Railsでウェブアプリを作成するUdemyのチュートリアルを始めて記事にしましたが、途中で理解が追いつかなくなったので仕切り直しました。
ドットインストールでHTMLとCSSの入門とRubyの入門での再確認をさらっと済ませて、次に『Ruby on Rails 5入門（全28回）』に入りました。
参考までにRubyの基礎構文についてまとめた記事を貼り付けておきます。
ここではドットインストールのRails入門をCloud 9で進める方法、そして環境をドットインストールに合わせる方法についてなどをメモしておきたいと思います。
前回のMayaのスクリプト環境の記事に続いて調べてみました。
メモと言っても、とても丁寧にまとめられた沢山の記事をペタペタ貼り付けただけのものではありますが。。しかし把握しやすいように図も作ってみました。
続きを読むドットインストールのHTMLとCSSのレッスンを進めてみました。
『HTML/CSSの学習環境を整えよう [Windows編] （全4回）』
こちらは、ブラウザのGoogle ChromeとエディタのATOMのインストールを行います。
プログラムに適したフォント「RictyDiminished」のインストールも行います。
ChromeとATOMはインストール済みだったので30分もかからず終わりました。
『はじめてのHTML（全15回）』
実際にポートフォリオサイトを作成する手順を踏みながら基本を学べます。
1時間ほどで終えることができます。
『はじめてのCSS （全17回）』
HTML入門を終えた状態から開始するので、先にHTML入門を終わらせます。
1時間ほどで終えることができます。
●一通り実践してみて
はじめてのHTMLの第一回の動画で作成するサイトの完成版が確認できます。
シンプルで見栄えが良く、サクサク進むのでモチベーションも保てます。
さくっと2時間ほどでHTMLとCSSの基本が学べたのでとても良い内容と思いました。
UdemyのRuby on Rails入門を進めるにもHTMLやCSSの記述の基本構文を知らないと厳しい印象だったので（例えばHTMLタグ内の class="" で記述するセレクタなど）、先にこちらを一通りやってみるのが良いと思いました。
●次のステップについて
次に『実践！ウェブサイトを作ろう（全16回）』を行いました。
こちらはまた別のウェブサイトを作成しながら、CSSの便利な記述が追加で学べる感じでした。基礎の振り返りにもなって丁度良い感じです。
Font Awesomeのフリーアイコン
https://fontawesome.com/
ウェブサイト内にコードを埋め込んで使用するという提供方法があるんですね。
知らなかったので面白いなと思いました。
Chromeのショートカット
F12 ‥ 開発者ツールの表示ON/OFF
F5 または Ctrl + R ‥ 再読み込み（Ctrl + R が便利）
HTMLやCSSの記述について1つずつ詳しく知りたいような場合は「④ もっと詳しくHTML/CSSを学んでみよう」内のHTMLやCSSのレクチャーに入っていくと良いかと思われます。全部で111個のレッスンにも及ぶため、自分はとりあえずこちらには手は出していないです。
●スマホ向けのウェブサイトについて
スマートフォン向けサイトの作り方については学んでおいた方が良いと思いました。
というのも、自作のウェブアプリを将来的に作成してチェックしたり利用したりする場面は通勤時のようにスマホからが多そうに思ったので。。
という訳で、月額980円のプレミアム会員限定公開のレクチャーになりますが『実践！スマートフォンサイトを作ろう（全22回）』も一通り行いました。
ヘッダに下記のようなタグを入れておくだけでそれらしくなるようです。
あとは画像サイズなどをピクセルではなく％で指定したりする感じでしょうか。
<meta name="viewport" content="width=device-width,initial-scale=1">
それから、開発者ツールを表示して左上に表示されるiPhone＆iPadのようなアイコンをクリックすると、デバイスに応じたプレビューが行えるんですね。めちゃ便利！
他にこのレクチャーで行う要素としては、PC上で閲覧した際なんかにブラウザの幅に合わせてレイアウトを変える対応、Youtube動画の埋め込み時にレイアウトが崩れないようにする対応、ページトップにメニューアイコンを配置してJavaScriptを使ってメニューが開閉するように見せる対応などがあり、JavaScriptに初めて触れるのにも良い導入となっています。
JavaScriptもまたドットインストールで沢山のレクチャーが用意されています。
●Firebaseで公開
こちらもプレミアム会員限定公開のレクチャーになりますが『Firebaseでウェブサイトを公開してみよう（全9回）』を行えば、Firebaseの無料プラン（ウェブ公開のための容量1GB・転送10GB/月まで）で作成したウェブサイトのファイル一式をターミナル（Windowsの場合はPowerShellなど）からアップできます。
Googleが母体だそうで、Googleアカウントでそのままログインできるのが便利。
あと環境構築時にNode.jsもインストール（何に利用されているのか理解しておらず）。
アップしてみたサイトはこちら。
ちなみにHTMLのようなマークアップ言語はタグで囲む必要があったりと入力が面倒で好きになれない言語だったのですが、インテリセンス（文字入力補間）でこんなに楽になるんですね。。
ドットインストールに会員登録して7日間で134のレッスンが完了。
全レッスンの1/3なので、休暇が3週間あれば一気に全て終わらせられそう。。
Railsも軽くやりましたが、じゃあRailsとPHPのどちらが良いかというと、PHPも触ってみないことには分からないので本当は両方とも触ってみたいんですよね。でも時間も有限‥
という訳で、次はRailsに戻りますかね。
引き続き学習していきたいと思います。
●参考サイト
●HTML 公式ドキュメント
Ruby on Railsの入門サイトの記事をざっと試したので、次のステップとして実際に何かしらウェブアプリを作成して公開するところまで進めたいと思いましたが、まだ自由に作成するほどの知識は全く培われていません。。
そこで、UdemyのRails入門のチュートリアルをやっていくことにしました。
同じ作者の「MySQL + SQL入門」にもお世話になりました。
こちらのレクチャーの特徴としては下記のような感じです。
・AWS Cloud9 環境で開発する
・Rubyの基本構文を学べる
・Ruby on Railsの基本を学べる
・ミニQ&Aサービスの開発とネット上への公開を学べる
新規質問を投稿、質問の編集、削除、詳細表示
回答の投稿、回答の編集
Bootstrapでお手軽に見た目を変える
HerokuとGitを使って公開
印象としては、Railsの章に入ると非エンジニアが入門としていきなり始めるには敷居が高いと思いました。私の場合は事前にSQLを軽く触っていたことと、Rails入門記事を一通り行っていたのでなんとか理解が追いついた感じでした。
AWS Cloud9 にて環境構築を進めていく流れになっています。
[Udemyの環境]
Ruby 2.5.1p57
Ruby on Rails 5.2.1
RVM 1.29.3
Gems 2.7.6
SQLite 1.3.13
Bootstrap 4.1.1
JQuery-Rails 4.3.1
[この記事を書いた時点での環境]Ruby 2.5.1p57
Ruby on Rails 5.2.1
RVM 1.29.7
Gems 2.7.9
SQLite 1.3.13
Bootstrap 4.1.1
JQuery-Rails 4.3.1
Cloud 9 はドットインストールで試したことがあるのでAWSアカウントはすでに作成済みですが、今一度行ったことなども含めてメモしておきたいと思います。
ちなみに「はじめてのRuby入門」のセクションはとりあえずパスして「はじめてのRuby on Rails入門」のセクションは一通りざっと試しました。
・IMAでユーザーを追加、そのユーザーでログイン
・Cloud9の環境を追加
リージョン選択
エンヴァイロメント作成
テキストエディタの設定（タブスペース・不可視文字）
環境のアップデート「sudo yum update」
RVMで Ruby 2.5.1 をインストール「rvm install 2.5.1」
Ruby 2.5.1 を選択「rvm use 2.5.1」
Ruby 2.5.1 をデフォルトに指定「rvm --default use 2.5.1」
Ruby on Railsをインストール「gem install rails -v 5.2.1 -N」
・バージョン管理はRVM（Ruby Version Manager）を使用
Rubyのバージョンをコマンドひとつで切り替えられるの、めちゃ便利ですね。
・BundlerはRubyGemsを管理するツール
RubyGemsはRubyで書かれたサードパーティ製のライブラリ
・Railsプロジェクト「Q＆A」をバージョン指定して作成
SQLiteのバージョンを指定して「bundle update」で更新
「rails db:create」でデータベースを作成
「questions」コントローラを作成
「question」モデルの作成して、マイグレートする
ルーティングの設定（resourcesとroot）
コントローラの設定
テンプレートの設定
シードファイルでデータベースの初期データを追加
Bootstrap と JQuery の導入
Bootstrap と JQuery を使うよう application.scss と application.js を編集
ページ共通レイアウト application.html.erb を編集
フォームヘルパーを使ってフォームをHTMLに実装、データベースとやり取り
データベース操作絡みのメモ
[DBコンソール]
rails dbconsole ‥ SQLiteを操作するDBコンソールの開始
.q ‥ DBコンソールの終了.tables ‥ テーブル情報を確認
.chema テーブル名 ‥ テーブルを指定してカラム情報を確認
[Railsコンソール]
rails c ‥ Railsコンソールの開始
exit ‥ Railsコンソールの終了User.all ‥ usersテーブルの全てのデータを取り出す
route.rb の設定周りのメモ
# リクエストURLがルートの場合に指定コントローラのindex.htmlを表示
root 'コントローラ名#index'# 基本的なコントロール＆アクションをまとめて設定してくれる
resources :コントローラ名
フォームを通してデータベースに値を追加したり、ウェブアプリの形を成してきている反面、HTMLとRubyの記述で何をやっているのかが理解し切れず。。
調べるのは「HTML」「フォームヘルパー」あたりですね。
このあたりの必要最低限の部分も、徐々に習得していこうかと思います。
とりあえず「new.html」のフォームを作成した時点で、何をやっているのかなんとなくのイメージで図を作ってみました（こちらから100％サイズで閲覧できます）。
うん。ちょっとだけ理解が進みました。
モデル作成時に自動で生成された「Question」クラスのメソッドを色々と使ってデータベースとやり取りしてるんですね。ローカル変数「@questions」をHTMLの方で使っていたりしていてスコープがどうなってるのか分かっていないため、変数とのやり取り周りも頭に「？」が浮かんでいますが。。
ペタペタと貼り付けておきます。感謝！
ちなみに Cloud 9 のショートカットをまとめられている記事はこちら。
特に複数行の一括コメントアウト「Ctrl + /」が便利です。
現在Udemy動画の「セクション5 レクチャー113」が終了したところです。
とりあえず今回はここまで！
実際にアプリケーション作成を解説した動画や書籍をメモっておきたいと思います。
まずはこちら、Udemyのチュートリアル。評価も高いです。
「ミニQ&Aサービス」が作例にあり、HerokuやGitを使ったネット公開まで含まれています。
（受講済みのMySQL + SQLの講座に、こちらのクーポンが付属していました）
こちらは「SNSアプリ」を作例に、ユーザー登録画面やログイン画面や他ユーザーのフォロー機能などを学んでいけるようです。
作例ではありませんが勉強のフローについてまとめられているのでメモ。
こちらはお値段がそこそこ張る本格的なもののようです。
一通り終わらせると「TwitterみたいなSNS」が作れるそうな。。
他にも書籍ではこちらが気になります。
なぜなら「タスク管理アプリケーションを作ろう」というChapterがあるからです！
Kindle版はこちら。
随時追加します。
前回に引き続き、こちらの Rails入門 の記事を進めていきました。
ルーティングのための「routes.rb」内に記述は上から順に参照されるとのこと。
「rake routes」コマンドを実行すると下記のような情報が出てきます。
こちらについてはルーティング関連記事の最後の方で説明があるので、最初は気にせず進めるので良いと思います。
D:\data\rails\sample2>rake routes
Prefix Verb URI Pattern Controller#Action
rails_service_blob GET /rails/active_storage/blobs/:signed_id/*filename(.:format) active_storage/blobs#show
rails_blob_representation GET /rails/active_storage/representations/:signed_blob_id/:variation_key/*filename(.:format) active_storage/representations#show
rails_disk_service GET /rails/active_storage/disk/:encoded_key/*filename(.:format) active_storage/disk#show
update_rails_disk_service PUT /rails/active_storage/disk/:encoded_token(.:format) active_storage/disk#update
rails_direct_uploads POST /rails/active_storage/direct_uploads(.:format) active_storage/direct_uploads#create
それから「root」メソッドの記述は下記で良いようです。
コントローラとアクションがURLと同じ場合は省略できるようで、そのあたりも後のステップでちゃんと解説されていました。
root to: 'info#index'
または
root 'info#index'
公式ガイドのルーティングのページもペタリ。
Rails のルーティング - Rails ガイド
「以前に使われていたルーティング」のステップは下記の内容で正常に動作しました。
[routes.rb]
get ':controller(/:action(/:id))(.:format)'
「matchメソッドを使った基本書式」もこちらでOKでした。
[routes.rb]
get 'disp' => 'books#show'
「HTTPメソッドの指定」は試してませんが Rails 5 では下記のような記述になるのではと‥
[routes.rb]
match 'disp' => 'books#show', :via: :get
match 'disp' => 'books#show', :via: :post
「リソースベースのルーティング」は記事の通りで問題なくいけました。
お次はデータベースのステップに入っていきます。
まずMySQLを試すステップの際に、MySQLにログインできずバージョン確認もできません。
環境変数PATHを確認すると、ユーザー環境変数に「C:\Program Files\MySQL\MySQL Shell 8.0\bin\」が登録されているもののシステム環境変数には何も登録されておらずで。
以前、MySQL + SQLを試した際に MySQL5.7 をインストールしたので、今は「MySQL Server 5.7」と「MySQL Shell 8.0」がProgram Filesフォルダ内に存在している状態ですが、後者のフォルダ内には「mysql.exe」はありません。
そこでとりあえずシステム環境変数に「C:\Program Files\MySQL\MySQL Server 5.7\bin」を追加しました（PCの再起動はせず）。
しかしコマンドプロンプトで「mysql --version」と打ち込んでもエラー。
もしやと思ってコマンドプロンプトを起動し直したらいけました。。とりあえずホッ。
こちらの記事を参考にしました。
PATHを設定する | MySQLの使い方
ちなみに数日前にインストール時に決めたパスワードをすっかり忘れており、ちゃんとメモっていた数日前の自分に感謝しましたとさ。。
ちなみにMySQLの終了コマンドはこちら。
quit;
MySQLでデータベース作成コマンドを実行するステップでは、DLLが無い旨のエラーは出ませんでした。Rubyのbinフォルダ内に「libmysql.dll」は見当たらないですが良かったのかしら。。
そして実際に出たエラーはこちら。記事中のものとは少し違います。
「rubyのmysql向けwin32APIの使用は非推奨」「mysql2/2.6/mysql2がロードできない」といった感じでしょうか。試しに「C:\Ruby26-x64\lib\ruby\gems\2.6.0\gems\mysql2-0.4.10-x64-mingw32\lib\mysql2」を開くと「2.6」フォルダが無くて「2.3」までしか存在しません。
C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/mysql2-0.4.10-x64-mingw32/lib/mysql2.rb:22: warning: Win32API is deprecated after Ruby 1.9.1; use fiddle directly instead
rails aborted!
LoadError: cannot load such file -- mysql2/2.6/mysql2
D:/data/rails/sample_mysql/config/application.rb:7:in `<top (required)>'
D:/data/rails/sample_mysql/Rakefile:4:in `require_relative'
D:/data/rails/sample_mysql/Rakefile:4:in `<top (required)>'
bin/rails:4:in `require'
bin/rails:4:in `<main>'
(See full trace by running task with --trace)
記事中では「MySQL Connector/C version 6.0.2」のインストールに進みますが、RailsはデフォルトがSQLiteということですし、ここからMySQLのチュートリアルは行わずに進めることに。
またマイグレーション関連ともざっと流し読みに留めました。
こちら入門記事の最後の章となっていますが、早くアプリケーションが作りたくなったのでとりあえずリンクだけ貼っておいて、実制作のステップに入っていきたいと思います。
ちなみにコマンドプロンプトで「rails」だったり「rake」だったりして紛らわしいなあと思っていたら実際紛らわしいようで‥ Rails 5 以降は「rails」コマンドで全てOKだそうな。
覚えておこう。。
という訳で今回はここまで！
前回に引き続き、こちらの Rails入門 の記事を進めていきました。
コマンド１つでアプリケーションに必要なMVCを自動的に作成してくれるそうな。
前回はそれぞれの要素をコマンドで作成していきましたが、一括生成できるんですね。
rails generate scaffold モデル名
最初からデータベースのテーブルのカラムを指定する場合はこちら
rails generate scaffold モデル名 フィールド名1:データ型1 ...
コントローラの中身も定番なものが記述済みのようで‥これは素敵。。
いきなりデータベースのデータの追加フォームやら編集フォームやらが用意された状態になっているっぽいです。
なるほど、これがフレームワークというやつの姿なんですね！
ただ、自動で作成されたファイルやその記述がしっかりと理解できていないうちは頼らない方が良さそうとも思いました。「scaffold」についてググってみたらまさにそういった注意をされている記事が。
逆に言えば、MVCをなんとなく理解した後なら「良いお手本サンプル」として中身を追っていくというのは良さそうです。
あと、scaffoldで作成した後にデータベースを実際に作成してマイグレートを行う必要があるようなので忘れないようメモしておきます。
rake db:create
rake db:migrate
引き続き Rails入門 の記事を進めていきました。その際のメモになります。
コントローラの作成コマンド
rails generate コントローラ名
アクションも同時に定義する場合
rails generate コントローラ名 アクション名1 アクション名2 ...
※この場合ビューも同時に作成され、routes.rb内にも記述が追加される
ちなみに、コマンド「rails server」は「rails s」で、「rails generate ～」は「rails g ～」で省略可能なんですね！めちゃ楽です。。
この時点で行っている様子を図にしてみました。
繰り返しコントローラの作成とテストを行う過程で、徐々に理解できてきました。
その後のステップの「別のアクション用のテンプレートを呼び出す」では、コロン「：」の位置を下記のように変えないとRails 5ではエラーが出るかと思います。
render action: => 'アクション名'
render 'アクション名' ※actionを省略可能
render template: => 'コントローラ名/アクション名'
render 'コントローラ名/アクション名' ※templateを省略可能
ちなみに次のステップの「nothing」は作用しなかったので調べたところ、Rails 5 から render メソッドの nothing オプションは使えなくなったそうです。
参考にさせていただいた記事はこちら。
代わりに以下のような記述を使う模様。
head :no_content ※こちらは私の場合うまくいきませんでした
render body: nil ※こちらで真っ白なページが表示できました
head :ok ※こちらも真っ白なページが表示できました
コマンドプロンプトでPumaでサーバー接続中に Curl を使って問い合わせる方法というのがよく分かりません。。なのでステータスを 404 に指定した際の確認ができていません。それとも停止してから実行？
リクエストが成功するとログには「200 ok」と表示されてしまいます。
とりあえずコントローラに記述するアクションを「head 404」や「head :not_found」にすれば、htmlが用意されていたとしても Not found のページを表示できることは確認しました。
テキストを直にブラウザに表示する際に、下記のように記述することでレイアウトを使用できるということですがうまくいきません。エラー内容は「デフォルトレイアウトが無いよ」みたいな感じですが、軽くググってみても分からず。。
render plain: "Hello!", layout: true
とりあえず学習を進めていくうちにレイアウトについても分かると思うので進めます。
まず、下記のようにJSON形式での出力を試してエラーも無くアクセスできたのでうまくいってそう？ 例によってCurlを使った確認方法が分からないので、とりあえず進めます。
personal = {'name' => 'yamada', 'old' => 28}
render json: personal
お次に、下記のようにXML形式での出力を試したところ、入門サイトと同様の結果になったのでこちらもうまくいってる感じでしょうか。
personal = {'name' => 'yamada', 'old' => 28}
render xml: personal
まず「src1」の記述はこちらでうまくいきます。
redirect_to action: 'dest'
しかし「src2」は実行そのもののエラーは出ませんが、ブラウザ上のページには「このページは動作していません localhost から無効な応答が送信されました」と表示されます。
自分自身のパスを含めることができない感じでしょうか？
redirect_to 'plans/dest'
うーん。記事を参考にパラメータ取得を試みるもうまくいきません。
徐々にうまくいかないケースが増えてきました。。
●routes.rb の中身
get 'travels/show' => 'travels#show'●travels_controller の中身
def show
render plain: "upper = #{params[:upper]}" + ", lower = #{params[:lower]}"
end
しかしその後のクエリでのパラメータ取得はうまくいきました。
こちらは post.html の表示はうまくいきますが（この時、アクセスするURLは「http://localhost:3000/post.html」なのでご注意）、送信ボタンを押してページを移動すると下記のようなエラーが表示されます。「無効な認証トークン」だと注意されます。
ActionController::InvalidAuthenticityToken in TravelsController#show
とりあえずコントローラに「protect_from_forgery」と一行追加すれば正常に動作しました。
class TravelsController < ApplicationController
protect_from_forgery
def show
render plain: "旅行先 = #{params[:dest]}, 人数 = #{params[:num]}"
end
end
こちらの記事を参考にさせていただきました。
パラメータでハッシュを渡したり配列を渡す手順も無事に記事の通りに動作しました。
とりあえず今回はここまで！
続きはこちら。
Rubyを始めてみた5：ルーティング・データベース・テンプレート - ゲームエフェクトデザイナーのブログ (新)
前回に引き続き、こちらの Rails入門 の記事を進めていきました。
RailsにおけるMVC（モデル / ビュー / コントローラ）の作成に入っていきます。
ただ、初めての概念ばかりで何をしているのか把握しづらかったので図を作りました。
まず最初にコントローラで直にhtmlを書き換えていますが、このようなイメージかなと。
次のステップでテンプレートと変数を使ってhtmlを書き換えていますが、こんな感じかなと。
さらにデータベースを制御するステップはこんな感じ？（間違ってるかも）
これで何をしているか把握しやすくなった気がします。
最初は秀丸を使っていましたがツリー表示が無いと不便だったのでATOMに変更。
まずはコントローラのアクションメソッドでテキストを「render」で直に出力する解説をされていますが、後の起動時にうまく動作しませんでした。
下記のように変えたらいけたらのですが、Railsのバージョンによるものでしょうか。。
def hello render plain: 'Hello!' end
def bye render plain: 'bye!' end
ちなみにこの「plain」については、こちらの記事を参考にさせていただきました。
そして、実際にアプリケーションを起動すると下記のようなエラーが起きました。
C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/actionpack-5.2.3/lib/action_dispatch/routing/mapper.rb:81:in `check_via': You should not use the `match` method in your router without specifying an HTTP method.
(ArgumentError)
If you want to expose your action to both GET and POST, add `via: [:get, :post]` option.
If you want to expose your action to GET, use `get` in the router:
Instead of: match "controller#action"
Do: get "controller#action"
「matchを使わずgetを使え」という感じの内容になっています。
こちらに関しては「teratail」でドンピシャで質問されている方がいらっしゃいました。
Ruby - Ruby on Railsでルーティングのエラー｜teratail
つまるところ下記のように記述すれば良いようです。
get 'hello' => 'booklist#hello'
get 'bye' => 'booklist#bye'
これで無事うまくいきました。ありがたや。。
もしも match をそのまま使う場合はオプション指定が必要だそうで‥
match 'hello' => 'booklist#hello', via: :get
match 'bye' => 'booklist#bye', via: :get
こちらでいけました。
「via: :オプション（今回の場合は get ）」を最後に付与すれば良いようです。
ちなみに「=>」は「, to:」でもいけるようで、前者の方が記述は楽ですが、ググると後者で解説されているケースが多いので知っておくと良いかと思いました。
ついでに、ルーティング周りで参考になりそうな記事もいくつかペタペタと。
下記のテンプレートの作成の手順では文字コードについての解説があります。
ビューの作成とデータの受け渡し - Ruby on Rails入門
手元で試したところ、Rails用に作成するテキストファイルは基本的にUTF-8で保存しておけば、日本語を使用していても「# coding: utf-8」や「#! ruby -Ks」を記述しなくてもエラー無く正常に表示できました。
データベースの作成
rake db:create
モデルの作成
rails generate model モデル名
rake db:migrate
テーブルにデータを追加
rake db:seed
rails dbconsole 起動
.quit 終了
指定のテーブルからSQLの構文で全データを取得
select * from テーブル名
データベースの情報をHTMLに反映させる流れまでうまくいきました。
とりあえず今回はここまで！
