• ja  日本語
    • en English (英語)
Avintonジャパン株式会社Avintonジャパン株式会社Avintonジャパン株式会社Avintonジャパン株式会社
  • ブログ
  • サービス
    • AI・機械学習サービス開発
    • G-Suite / Googleアプリサービス
  • アカデミー
  • 採用情報
  • 求人
  • お問い合わせ
  • 会社情報
    • 会社概要
    • 代表からご挨拶

レイアウト調整

  • Python3.6とOpenCVのインストール (Ubuntu18.04LTS)
  • ルーティング
  • 見た目を美しくしてみましょう
  • NAT
  • カート内のアイテム個数を変更
  • EC2からS3へ自動でぽいぽいアップロードするスクリプトの作成
  • カートの設置
  • 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をインストールしてコマンド操作しよう
  • Windows Server 2012 R2 Hyper-V
  • 困った時に使うコマンド
  • PacketTracerのセットアップ
  • 一般グループのユーザーとグループ
  • AWS Route 53を使って独自ドメインのWebページを表示させてみよう
  • プライバシーポリシー
  • VMware ESXi サーバー構築
  • フロントエンド開発のための環境構築
  • フロントエンドのデモンストレーション
  • APIのデモンストレーション
  • CISCO 1800ルータセットアップ
  • ファイル検索コマンド
  • ESXi – Switchの追加とVLAN
  • 質問
  • 仮想化環境のディスク容量を拡張する
  • ユーザー権限とアクセス権
  • テキスト処理
  • 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によるデータ分析
  • 機械学習入門者向け 分類と回帰の違いをプログラムを書いて学ぼう
  • Pythonによるマルチスレッドプログラミング実践
  • Certbotを使ってSSL証明書を発行し、HTTP通信を暗号化しよう
  • DockerとApacheを使ってWebサーバーを構築しよう
  • Ruby on Rails インストール
  • AmazonEC2とVPCでネットワークとサーバーを構築しよう
  • AWS入門者向け 初心者が最初に理解すべきEC2とVPCの基本的な用語解説
  • Linuxとは
  • カート機能作成
  • Ruby on Rails Academy
  • ショッピングアプリケーション作成
  • ダイナミックルーティング
  • PostgreSQL – Python – Apache – Bootstrap
Home Academy レイアウト調整

Ruby on Rails Academy #4

サイドバー

多くのページでは、メニューやオプションの表示領域としてページを区切っています。上部メニューバーや左右サイドバーなどです。見た目も綺麗になるので作りましょう。
Bootstrapではグリッドシステムという仕組みが実装されていて、比較的簡単かつレスポンシブ(ユーザーの画面の大きさに合わせて表示が調整されること)にレイアウトを調整することが出来るようになっています。

グリッドシステムはCSSのclassを利用して調整され

<div class="row">~</div>

を一つの段の区切りとみなし、その中を

<div class="col-大きさ-列数"></div>

のように区切ります。列数は合計で12になるようにし、大きさはxs,sm,md,lgが用意されています。

詳しくはhttp://getbootstrap.com/css/を参照してください。

exercise 1

グリッドシステムを用いて、サイドバーを作りましょう。(まだ実用的な機能はなくて構いません。)

パーシャル

上記のような、どのページにも使う要素は毎回書くのは(たとえコピーするとしても)面倒ですし、コードに同じ部分を繰り返す場所が増えます。
そのようなパーツはパーシャル(部分テンプレート)として切り分け、使うとき呼び出すのみにするのが効率的です。
views/layoutフォルダーに _sidebar.html.erb という新しいファイルを作り、サイドバーの中身を移しましょう。
必ずしもアンダースコアで始める必要はありませんが、わかりやすくするためにつけるのが一般的です。

できたら

<%= render :partial => "./layouts/sidebar" %>

をサイドバーのあったところに書くと、_sidebar.html.erb の内容が表示されます。

exercise 2

フッターも非常に一般的な構成要素です。
西暦の年表示が入ったフッターをパーシャルとして追加しましょう。

レイアウト

今までのページ(index.html.erb等)で、<html>、<body>のようなHTMLの基本的な構成要素を書いてこなかったと思います。これはRailsのファイルシステムでテンプレートが自動で適用されるようになっているからです。
デフォルトでは、views/layouts フォルダー内のapplication.html.erbがテンプレートとして使われます。
先ほど作ったパーシャルは毎回表示されてほしいので、ここに加えましょう。

exercise 3

特定のページにのみ適用されるレイアウトを作り、コントローラーで指定し、適用しましょう。

Git Committing

gitへのコミットは論理的なまとまりに基づいてコミットします。
その方があとでログを見た時にわかりやすく、探したい変更を探しやすいためです。
今回でいえば、サイドバー、フッター、レイアウトfor〇〇 のような具合です。

また、開発用gemと同様にgitも様々なツールが用意されています。
その中でも、「 Tig 」は非常に便利なツールですので是非入れておきましょう。
https://jonas.github.io/tig/

前へ
次へ

採用情報

アカデミー

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