学生向けプログラミング入門

学生向けにプログラミングを解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails

Rails6.0

Ruby on Rails 6.0によるWebアプリケーション開発34 管理機能の追加

[TOP] レイアウトのサイドバーに各種機能に対するリンクを追加します。 「session」に「:user_id」がある場合のみ表示されるようにします。 【C:\Rails6\work\shop\app\views\layouts\application.html.erb】 <html> <head> <title>Railsはじめてマート オンラインストア</title> <%= c</head></html>…

Ruby on Rails 6.0によるWebアプリケーション開発33 ログイン(セッション)

[TOP] 次>> 認証されたユーザがアプリケーションの全ての管理機能を使えるようにします。 まず管理用のユーザ名とパスワードを格納するモデルとデータベーステーブルの作成から始めます。 コマンドプロンプトで「bin」フォルダに移動して「rails generate sc…

Ruby on Rails 6.0によるWebアプリケーション開発32 メールの送信

[TOP] 次>> 電子メールの設定はRailsアプリケーションの環境に含まれています。 今回は開発環境のみにメールの環境を構築していきます。 「C:\Rails6\work\shop\config\environments」フォルダの「development.rb」ファイルに設定を追加します。 「 Rails.ap…

Ruby on Rails 6.0によるWebアプリケーション開発31 追加支払いの詳細入力(Webpackerのインストール)

[TOP] 次>> 支払い方法はそれぞれ入力する内容に違いがあります。 これを実装するために「Webpacker」というアプリケーションを利用します。 「Webpacker」は作成するJavaScriptファイルを管理するためのツールです。 「Webpacker」をインストールするにはコ…

Ruby on Rails 6.0によるWebアプリケーション開発30 注文の詳細の取得

[TOP] 次>> コントローラにcreate()アクションを実装します。 このメソッドでは次の処理を行います。 フォームからの値を取得して新しいOrderモデルオブジェクトに格納する。 カートに入っているLineItemをその注文に追加する。 注文のデータが正当かどうか…

Ruby on Rails 6.0によるWebアプリケーション開発29 チェックアウト機能の実装

[TOP] 次>> 今度は買い手がカートに入れた商品を実際に購入できるようにチェックアウト機能を実装します。 まずは「order」モデルを作成し、line_itemsテーブルを更新します。 コマンドプロンプトで「bin」フォルダに移動し、「rails generate scaffold Orde…

Ruby on Rails 6.0によるWebアプリケーション開発28 アクションケーブル(ActionCable)を利用して更新する

[TOP] 次>> アクションケーブル(ActionCable)はWebSocketとRailsのその他の部分をシームレスに統合するためのものです。 アクションケーブル(ActionCable)が導入されたことでRailsアプリケーションの効率の良さを損なわずにリアルタイム機能を記述できま…

Ruby on Rails 6.0によるWebアプリケーション開発27 空のカートを隠す

[TOP] 次>> 空のカートが商品の入っているカートに変わる時に再描写されずに表示させる方法を考えます。 また、アプリケーションのレイアウトに必要なときにのみカートを表示してそれ自体をレンダリングし続けます。 これはヘルパーメソッドを使用します。 …

Ruby on Rails 6.0によるWebアプリケーション開発26 変更内容の強調表示

[TOP] 次>> 変更内容の強調表示をCSSアニメーションで実装します。 アニメーションはページが読み込まれたとき、またはクラスが要素に適用されたときにブラウザによって実行されます。 この場合、要素の開始と終了を定義するだけで済みます。 「C:\Rails6\wo…

Ruby on Rails 6.0によるWebアプリケーション開発25 Ajaxベースのカートの作成

[TOP] 次>> カタログページに変更を加えてサーバアプリケーションにAjaxリクエストを送信するようにします。 アプリケーションにも変更を加え、このリクエストによって更新されたカート表示を含むHTMLの断片をレスポンスとして返すようにします。 インデック…

Ruby on Rails 6.0によるWebアプリケーション開発24 Ajaxの追加

[TOP] 次>> ショッピングカートをAjaxスタイルにします。 ショッピングカート用のページを新たに開くのではなく、カタログページのサイドバーに現在のカートを配置することにします。 その後でページ全体を再表示しなくてもサイドバー内のカートを更新できる…

Ruby on Rails 6.0によるWebアプリケーション開発23 カートの仕上げ

[TOP] 次>> カートを空にする機能を実装するにはカートにリンクを追加し、カートコントローラの「destroy()」メソッドを修正してセッションをクリーンにしなければなりません。 まずは「button_to()」メソッドを使ってページにボタンを配置します。 「C:\Rai…

Ruby on Rails 6.0によるWebアプリケーション開発22 エラー処理

[TOP] 次>> 例外が発生したときは例外を無視せずに2つの処理を行うことにします。 まずRailsの「logger」機能を使ってエラーが発生した事実を内部ログファイルに記録します。 次にカタログページを再表示して「無効なカートです」程度の短いメッセージを出…

Ruby on Rails 6.0によるWebアプリケーション開発21 カートの改良

[TOP] 次>> カートの各商品に数量を対応付けるためには「line_itemsテーブル」を修正する必要があります。 コマンドプロンプトで「bin」フォルダに移動して「rails generate migration add_quantity_to_line_items quantity:integer」と入力します。「line_i…

Ruby on Rails 6.0によるWebアプリケーション開発20 カートの作成

[TOP] 次>> 商品をセッションカートという一時的な保存場所に格納出来るようなシステムを作っていきます。 Railsではアクセスしている人が実行するすべての操作を追跡できるようにするためにsessionと呼ばれるものを使用しています。 sessionはコントローラ…

Ruby on Rails 6.0によるWebアプリケーション開発19 買い物フォームの作成

[TOP] 次>> これから作成するコントローラは商品を買い物出来るようにするもので、名前を「marketコントローラ」とします。 新しいコントローラをジェネレータで作成するにはコマンドプロンプトで「shop」フォルダの「bin」フォルダに移動して「rails genera…

Ruby on Rails 6.0によるWebアプリケーション開発18 詳細と編集の外観を整える

[TOP] 次>> 「詳細」と「編集」の外観を整えてみます。 今までと同じく対応するビューを編集していきます。 「詳細」画面の見た目を変えるには「C:\Rails6\work\shop\app\views\goods」フォルダにある「show.html.erb」ファイルを編集します。 【C:\Rails6\w…

Ruby on Rails 6.0によるWebアプリケーション開発17 商品登録フォームの外観を整える

[TOP] 次>> 商品登録フォームの外観を整えるには「C:\Rails6\work\shop\app\views\goods」フォルダにある「_form.html.erb」ファイルを以下のように編集します。 「C:\Rails6\work\shop\app\views\goods\_form.html.erb」 <%= form_with(model: good, local:…

Ruby on Rails 6.0によるWebアプリケーション開発16 バリデーションの日本語化

[TOP] 次>> バリデーションの表示を日本語化していきます。 日本語化するには「rails-i18n」をインストールしなければなりません。 「shop」フォルダにある「Gemfile」をテキストエディタで開いて、最後に「gem 'rails-i18n'」と追記します。 【shop\Gemfile…

Ruby on Rails 6.0によるWebアプリケーション開発15 バリデーション(検証)

[TOP] 次>> アプリケーションに入力検証の機能を実装していきます。 モデルクラス「C:\Rails6\work\shop\app\models\good.rb」のソースコードを見てみます。 【C:\Rails6\work\shop\app\models\good.rb】 class Good < ApplicationRecord end モデルに「vali…

Ruby on Rails 6.0によるWebアプリケーション開発14 商品リストの外観を整える

[TOP] 次>> まずはスタイルシートを実装します。 実装するスタイルシートは「C:\Rails6\work\shop\app\assets\stylesheets」フォルダにある「goods.scss」ファイルです。 【C:\Rails6\work\shop\app\assets\stylesheets\goods.scss】 // Place all the style…

Ruby on Rails 6.0によるWebアプリケーション開発13 シードデータのインポート機能

[TOP] 次>> 作成したサンプルデータを一気にデータベースに読み込む方法を示します。 「db」フォルダにある「seeds.rb」ファイルを以下のように編集します。 文字コードを「UTF-8」で保存することに注意して下さい。 【C:\Rails6\work\shop\db\seeds.rb】 # …

Ruby on Rails 6.0によるWebアプリケーション開発12 商品リストの表示

[TOP] 次>> コマンドプロンプトで「bin」フォルダに移動し、「rails server」で「Puma」を起動してください。Pumaの起動 ブラウザで「http://localhost:3000/goods」にアクセスします。 以下ようなindexページが表示されます。ブラウザの表示 リストには1つ…

Ruby on Rails 6.0によるWebアプリケーション開発11 scaffoldの生成

[TOP] 次>> 商品を格納するテーブルを作成します。 テーブルの名前は必ず複数形にするのがルールです。 この後実際にRubyでコードを書いていくモデルクラスというものが登場しますが、そのモデルクラスの名前は単数形で最初の文字は大文字というルールがあり…

Ruby on Rails 6.0によるWebアプリケーション開発10 アプリケーションの作成

[TOP] 次>> MySQLデータベースを使用して商品管理アプリケーション「shop」を作ります。 まずはコマンドプロンプトで「work」フォルダに移動して「rails new shop -d mysql」と入力します。アプリケーションの作成 「Webpacker successfully installed」とメ…

Ruby on Rails 6.0によるWebアプリケーション開発09 コントローラとビュー

[TOP] 次>> 「sample」アプリケーションにコントローラを追加して動作を見てみます。 コマンドプロンプトで「sample」フォルダの「bin」フォルダに移動し、「rails generate controller Say hello goodby」と入力します。 「rails generate」コマンドで「Say…

Ruby on Rails 6.0によるWebアプリケーション開発08 Webサーバ(Puma)の起動

[TOP] 次>> まずはサンプルのアプリケーションを作成してみます。 コマンドプロンプトで作業フォルダ「C:\Rails6\work」に移動し、「rails new sample -d mysql」と入力します。 「-d」オプションを指定することで使用するデータベースを選択できます。「sam…

Ruby on Rails 6.0によるWebアプリケーション開発07 ChromeDriverのインストール

[TOP] 次>> Railsで開発を進めていくには「ChromeDriver」が必要になります。 まずはWebブラウザ「Chrome」をインストールします。 「Chrome」のダウンロードは「https://www.google.co.jp/intl/ja/chrome/」から出来ます。Chromeのダウンロード 現在のバー…

Ruby on Rails 6.0によるWebアプリケーション開発06 Yarnのインストール

[TOP] 次>> YarnはNodeで使うパッケージマネージャーです。 RailsでJavascriptの環境を整えるために必要です。 まずはYarnのトップページ「https://classic.yarnpkg.com/ja/」にアクセスします。Yarnのトップページ 「Yarnをインストール」のリンクをクリッ…

Ruby on Rails 6.0によるWebアプリケーション開発05 Nodeのインストール

[TOP] 次>> Railsを使用するには「Node」をインストールする必要があります。 NodeはJavaScript 環境を整えます。 まずはNodeのトップページ「https://nodejs.org/ja/」にアクセスします。Nodeのトップページ 推奨版の「12.16.1LTS」のリンクをクリックする…