• 日本語
    • English (英語)
Avinton JapanAvinton JapanAvinton JapanAvinton Japan
  • サービス
    • Avinton Data Platform
    • エッジ AIカメラ
    • AIサービス開発
    • 画像認識PoC
  • 最新情報
  • アカデミー
  • 採用情報
    • Avintonで働く魅力
    • 求人
    • よくある質問
  • 企業情報
    • 会社概要
    • 代表からご挨拶
    • CSR(企業の社会的責任)
  • お問い合わせ

見た目を美しくしてみましょう

  • Python3.6 と OpenCV のインストール (Ubuntu18.04LTS)
  • ルーティング
  • 見た目を美しくしてみましょう
  • NAT
  • 三目並べ – 2.〇×を交互にゲーム盤に入るようにしよう
  • カート内のアイテム個数を変更
  • 三目並べ – 3.勝敗がつくようにしよう
  • EC2からS3へ自動でぽいぽいアップロードするスクリプトの作成
  • 三目並べ – 4.「スタート」「リセット」ボタンをつけよう
  • 三目並べ – 5.先攻後攻を決めて、コンピュータ対戦にしよう(前編)
  • カートの設置
  • Ruby on Rails を MySQLでセットアップ
  • レイアウト調整
  • 機械学習入門者向け Support Vector Machine (SVM) に触れてみる
  • AWSアカウントの作成と必ずやるべきセキュリティ対策
  • VLAN
  • テスト
  • 機械学習を用いた画像分類
  • Ruby on Railsによる簡単なウェブアプリケーション
  • 正規表現とパイプ
  • 機械学習エンジニアに必要なスキル
  • Ubuntuの設定
  • PostgreSQL Setup
  • REDIS
  • Amazon EC2 インスタンスの初期設定をしよう
  • Pythonの設定
  • GNS3のセットアップ
  • viエディタ
  • AWSのEC2インスタンスでWordPressブログを公開してみよう
  • Pythonでデータベースを操作する
  • Python2.7とOpenCVのインストール
  • ファイル操作コマンド
  • OpenCVのテストプログラム
  • グループとユーザー
  • Pythonで画像を分類するプログラムを作成する
  • AWS CLIをインストールしてコマンド操作しよう
  • Virtualisation and Container (仮想化とコンテナ) – Ansible, Docker and Kubernetes
  • Windows Server 2012 R2 Hyper-V
  • 困った時に使うコマンド
  • PacketTracerのセットアップ
  • 一般グループのユーザーとグループ
  • AWS Route 53を使って独自ドメインのWebページを表示させてみよう
  • プライバシーポリシー
  • VMware ESXi サーバー構築
  • 三目並べ – 6.先攻後攻を決めて、コンピュータ対戦にしよう(後編)
  • フロントエンド開発のための環境構築
  • フロントエンドのデモンストレーション
  • APIのデモンストレーション
  • CISCO 1800ルータセットアップ
  • ファイル検索コマンド
  • ESXi – Switchの追加とVLAN
  • 質問
  • 仮想化環境のディスク容量を拡張する
  • ユーザー権限とアクセス権
  • 三目並べ – 0.導入
  • テキスト処理
  • ESXi - VyOS
  • データベースへのデータロード
  • 機械学習入門者向け Naive Bayes(単純ベイズ)アルゴリズムに触れてみる
  • CCNA
  • ESXi – 小規模ネットワーク 構築
  • ファイル管理
  • 機械学習入門者向け ChainerRLでブロック崩しの学習
  • AWS CLIを使ってEC2のファイルをS3へアップロードしよう
  • CSV import & export – Node.js, mySQL – 1
  • 機械学習入門者向け ランダムフォレストによる Kaggle Titanic生存者予測
  • CSV import & export – Node.js, mySQL – 2
  • PCからルータ、スイッチへのSSH接続設定
  • 【Python入門】Python Numpy チュートリアル
  • SQL 便利な関数
  • PostgreSQLによるデータ分析
  • 機械学習入門者向け 分類と回帰の違いをプログラムを書いて学ぼう
  • NodeJSでWebアプリケーション開発 – React編
  • Pythonによるマルチスレッドプログラミング実践
  • Certbotを使ってSSL証明書を発行し、HTTP通信を暗号化しよう
  • DockerとApacheを使ってWebサーバーを構築しよう
  • NodeJSでWebアプリケーション開発 – React編
  • Ruby on Rails インストール
  • AmazonEC2とVPCでネットワークとサーバーを構築しよう
  • AWS入門者向け 初心者が最初に理解すべきEC2とVPCの基本的な用語解説
  • Linuxとは
  • Pandasによる構造化データ分析
  • カート機能作成
  • Ruby on Rails Academy
  • ショッピングアプリケーション作成
  • ダイナミックルーティング
  • PostgreSQL – Python – Apache – Bootstrap
  • 三目並べ – 1.ゲーム盤を作ろう
Home Academy 見た目を美しくしてみましょう

Ruby on Rails Academy #3

Index Page

まずは新しいブランチを作成し、チェックアウトします。

git checkout -b new-branch-name

#2で作ったフォームからいくつか新しいアイテムを投稿し、画像をapp/assets/images/に格納したら、インデックスページを作成します。
このページでは全てのアイテムを一覧させたいので、items_controller.rbのindexアクションに

@items = Item.all

を追加します。複数のアイテムを内包しているのでitem__s__にします。Railsの決まりはできるだけ守っていきます。

exercise 1

それぞれの項目が縦に並び、画像の横に詳細が記述されるビューを作りましょう。
問題ないことが確認できたら、ここで一度Gitにコミットしましょう。

Make It Prettier

さて、今までの部分にはまだ何もスタイルを与えてません。これでは見栄えが悪いのでCSSを用いて色付けしていきましょう。
そのような目的には、Bootstrapという非常に有名なライブラリーがあるのでそれを使います。

Gemfile

gem 'bootstrap-sass'
bundle install

application.js

//= require turbolinks
//= require bootstrap-sprockets <--この行を追加
//= require_tree

application.css の名前を application.sass に変え

@import "bootstrap-sprockets"
@import "bootstrap"

この二行を追加します

ブラウザで見てみると少し雰囲気が変わっていることがわかると思います。

exercise 2

CSSとBootstrap(http://getbootstrap.com/)を参考に今までの部分(indexページ、newページ)の見た目を自由に改善しましょう。

Update and Delete

今までのindex new で CRUD の CとRができました。
残りのUとDを作ります。

routes.rb にresourceルーティングを設定してなければここで設定しましょう。

resources :items

views以下に、edit.html.erbを作成し、items_controller.rbに、

def edit
@item = Item.find(params[:id])
end

を追加します。

exercise 3

その中にedit用のフォームを作成しましょう。
できたら、indexのページの各項目の横に”編集”リンクが出るようにして、editページに飛ぶか確認しましょう。
同様に、削除リンクもindexページに追加します。

<%= link_to 'Destroy', item, method: :delete, data: { confirm: 'Are you sure?' } %>

コントローラーにdestroyアクションを追加します。

def destroy
item = Item.find(params[:id])
item.destroy
redirect_to :action => "index"
end

確認できたら、Gitにコミット、プッシュします。

開発用gem

controller内に、params という宣言していないものが出てきました。
Railsはアクションに渡すパラメータを params という変数に入れて渡します。
ここで一度中身を見ておきましょう。
pry-rails というデバッグ用のgemを導入します。
Gemfileの group development 内に

gem 'pry-rails'
bundle install

し、処理を止めたいところ(今回は items_controller.rb)に

binding.pry

を、追加します。
これでeditページを開こうとすると、コンソール上に
このように出て、処理が中断されます。ここで変数名やメソッド名を打つと

[1] pry(#)>params

paramsの内容が表示されます。

このように、開発をしやすくするためのGemというものも多数存在します。
興味があれば探して、試しに使ってみましょう。

前へ
次へ

採用情報

採用情報

Search

タグ

2017 2018 AI Avinton Avinton Academy Avinton Japan Avintonジャパン DX HTML Linux Python Ruby Webエンジニア アビントン アビントンジャパン アヴィントン アヴィントンジャパン イベント インフラエンジニア エンジニア グローバル サーバーエンジニア データサイエンス データサイエンティスト データベース データ解析 ニュービジネス研究会 ネットワークエンジニア ビックデータ ベンチャー 勉強会 就活 就職活動 成長 技術インターン 採用 新規事業 横浜 機械学習 機械学習エンジニア 派遣 第二新卒 経営者交流会 英語 起業
© 2021 Avinton | All Rights Reserved | プライバシーポリシー
  • サービス
    • Avinton Data Platform
    • エッジ AIカメラ
    • AIサービス開発
    • 画像認識PoC
  • 最新情報
  • アカデミー
  • 採用情報
    • Avintonで働く魅力
    • 求人
    • よくある質問
  • 企業情報
    • 会社概要
    • 代表からご挨拶
    • CSR(企業の社会的責任)
  • お問い合わせ
  • 日本語
    • English (英語)
Avinton Japan