Rails+PostgreSQL+Docker+AWSで作成したポートフォリオの概要

ruby rails docker AWS html css Git

記事の概要この記事では、私が作成したポートフォリオの解説をします。コンテンツ投稿、管理、その他の営業に利用できるサービス機能をつけた、お店の個人ホームページです。管理者のみ、コンテンツのCRUD機能やその他の機能が使える仕様にしています。一般…

2020-01-12

rails ファビコンの設定

html rails

簡単な実装ですが、ホームページやiOSのアイコンをrailsで設定したのでメモ。実現するもの Chromeのアイコンとか↓スマホのアイコンとかです。↓画像が用意できたらすぐに実装できます。ブラウザのアイコン application.html.erbに以下の１行を追加するだけ…

2020-01-11

rails 基本的なログインシステム Part4 永続的なログインシステム　後編

rails ruby html css

することユーザーの永続的ログインシステムの続き管理人をユーザーモデルで作成ログインのcontroller作成やルーティング設定ログインのビュー作成ログイン機能作成ちょっと発展機能を加えるログイン機能を実装したことによって利用できること 5のログ…

2020-01-09

rails link_toメソッドの使い方をまとめる応用あり

ruby rails html デザイン

link_toメソッドは、HTMLのaタグにです。いろんな使い方を見てきたのでメモ。指定したリンクへ移動するための、テキストを表示させる第一引数は表示させるテキスト、第二引数はリンクを書きます。 <%= link_to “詳細をみる”, “http://www.example.co.jp/p…

2020-01-09

HPで使える　ページ最上部に移動するボタンを作成する。

html css javascript

こんなのです。方法ご自身でお好みのアイコンを使いましょう。 fontawesome.com <p id="pageTop"><a href="#"><i class="fa fa-chevron-up"></i></a></p> htmlはこんな感じ /* PAGE_TOP_BTN */ #pageTop { position: fixed; bottom: 20px; right: 20px; z-index: 999; } #pageTop i { padding-top: 7px; } #pageTop a { display:…

2020-01-07

TOPページでArticleモデルから更新順３件の記事を表示。

html rails ruby

実現するもの HPのトップページで最新記事3件がよくあります。 Articleモデルから３件の記事を更新順に抽出して表示していきます。使っているArticleモデルはこんな感じ。 content、記事の内容についてはHTML文を保存しています。 home.html.erb <% if @top…

2020-01-07

お店の営業カレンダー＆予約状況を表示するFullCalendar導入　Googleカレンダー同期編

javascript rails css html デザイン

実現するもの HPによくある定休日が色付けされていたり、予約時間が書かれているカレンダーです。 Googleカレンダーと連携しているので、Google側で予定が追加されたり、削除されたりするとHPのカレンダーもすぐにその情報が反映されます。どのように反映さ…

2020-01-05

rails 基本的なログインシステム Part1

html rails ruby css

作ったもの HPを作成したのですが、管理人だけがページを閲覧しながら記事などの投稿や編集、削除を行えるようにしたかったので、動画のようにログイン後に同じnewsのページに移動すると投稿機能が使えるようになっています。この記事では「ログイン機能」の…

2020-01-04

rails フォームでよく使われるエラーメッセージパーシャルなど作成

rails ruby html css

実現することフォームに何も入力されてない状態で投稿ボタン押すなどするとアラートが出るやつです。方法例としてProductモデルを使います。バリデーションは下記の通り↓ product.rb class Product < ApplicationRecord validates :name, presence: true,…

2020-01-04

複数の写真を時間差で表示させる

javascript デザイン html css

実現すること ↑こんなの方法まずはざっとHTMLを書いていきます。 <div class="wrapper grid"> <div class="item img-fade-up'"> <img src="image_1.jpg"> </div> <div class="item img-fade-up'"> <img src="image_2.jpg"> </div> <div class="item img-fade-up'"> <img src="image_3.jpg"> </div> <div class="item img-fade-up'"> </div></div>

2020-01-03

HTML,CSS 美容室HPでよく見かけるメニュー表作成

html css

↑ご想像の通りこちらを作ります。「記述リスト」であるdl要素を使います。 dt要素にサービス名、dd要素には価格を書いていきます。価格が変動するサービス(¥4000~)にはfromクラスをつけておきます。 <h2 class="page-title">Menu</h2> <div class="menu"> <dl> <dt>Cut</dt> <dd>¥3300</dd> </dl> <dl> <dt>Color</dt> <dd class="from">¥4000</dd> </dl> <dl> <dt>Perm</dt> <dd class="from">¥3000</dd> </dl></div>

2020-01-03

created_atのフォーマットを変更して記事の日付に使う

rails html ruby

実現すること記事投稿をした場合、投稿日を表示することがあると思います。 ↑記事タイトルの隣の日付ですArticleモデルから新たな記事を作れば、自動的にcreated_atカラムが登録されるのでそこの情報から日付を表示させればできそうしかしでcreated_atカラ…

2020-01-03

renderメソッドの使い方(インスタンス変数を渡す場合)

rails html ruby

基本形 <%= render partial: 'articles/article', locals: { article: @article } %> _article.html.erbの部分テンプレートにarticleと言う名前で@articleのインスタンスを使用します。省略形 <%= render 'articles/article', article: @article %> さらに…