2020-01-01から1年間の記事一覧
すること ユーザーの永続的ログインシステムの続き 管理人をユーザーモデルで作成 ログインのcontroller作成やルーティング設定 ログインのビュー作成 ログイン機能作成 ちょっと発展機能を加える ログイン機能を実装したことによって利用できること 5のログ…
すること ユーザーのログインシステムの続き 管理人をユーザーモデルで作成 ログインのcontroller作成やルーティング設定 ログインのビュー作成 ログイン機能作成 ちょっと発展機能を加える ログイン機能を実装したことによって利用できること 4まできたので…
link_toメソッドは、HTMLのaタグにです。 いろんな使い方を見てきたのでメモ。 指定したリンクへ移動するための、テキストを表示させる 第一引数は表示させるテキスト、第二引数はリンクを書きます。 <%= link_to “詳細をみる”, “http://www.example.co.jp/p…
こんなのです。 方法 ご自身でお好みのアイコンを使いましょう。 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:…
長い間避けてたCarrierWave画像投稿のテストをついにやってみる。ドキュメントが英語だったので逃げてました笑 条件 rails 5.1.7 carrierwave 1.2.2 CarrierWaveを設定する config/initializers/carrierwave.rb CarrierWave.configure do |config| ・ ・ con…
実現するのもの 記事のテストページです。 動画のように、2件ごとに記事を表示させています。 記事の投稿機能が実装できていればこちらの導入はめちゃくちゃ簡単にできます。 必要なgemのインストール 今回はwill_pagenateというgemを使います。表示件数の制…
実現するもの HPのトップページで最新記事3件がよくあります。 Articleモデルから3件の記事を更新順に抽出して表示していきます。 使っているArticleモデルはこんな感じ。 content、記事の内容についてはHTML文を保存しています。 home.html.erb <% if @top…
実現するもの HPによくある定休日が色付けされていたり、予約時間が書かれているカレンダーです。 Googleカレンダーと連携しているので、Google側で予定が追加されたり、削除されたりするとHPのカレンダーもすぐにその情報が反映されます。どのように反映さ…
すること ユーザーのログインシステムの続き 管理人をユーザーモデルで作成 ログインのcontroller作成やルーティング設定 ログインのビュー作成 ログイン機能作成 ちょっと発展機能を加える ログイン機能を実装したことによって利用できること 前編で3まで…
実現すること FullcalenderとGoogleカレンダーの連携の際、GoogleカレンダーAPIのキーなどを設定するのにJavascriptを使います。 そこでAPIのキーをgithubなどで公開しないように、環境変数に隠す方法のメモ。 調べてみたら結構簡単でした。 calender.js $(d…
作ったもの こちらのように商品などの投稿システムには欠かせない「画像投稿機能」を実装していきます。 Gemインストール バージョンも指定しております。 mini_magickと本番環境でのアップロード用のfogも入れています。 Gemfile gem 'carrierwave', '1.2.2…
作ったもの HPを作成したのですが、管理人だけがページを閲覧しながら記事などの投稿や編集、削除を行えるようにしたかったので、動画のようにログイン後に同じnewsのページに移動すると投稿機能が使えるようになっています。この記事では「ログイン機能」の…
実現すること フォームに何も入力されてない状態で投稿ボタン押すなどするとアラートが出るやつです。 方法 例としてProductモデルを使います。バリデーションは下記の通り↓ product.rb class Product < ApplicationRecord validates :name, presence: true,…
実現すること ↑こんなの 方法 まずはざっと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>
↑ご想像の通りこちらを作ります。「記述リスト」である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>
実現すること 記事投稿をした場合、投稿日を表示することがあると思います。 ↑記事タイトルの隣の日付ですArticleモデルから新たな記事を作れば、自動的にcreated_atカラムが登録されるのでそこの情報から日付を表示させればできそうしかしでcreated_atカラ…
基本形 <%= render partial: 'articles/article', locals: { article: @article } %> _article.html.erbの部分テンプレートにarticleと言う名前で@articleのインスタンスを使用します。 省略形 <%= render 'articles/article', article: @article %> さらに…
実現すること HPによくあるTOPニュースで記事内容の概要が書かれている。↓こんな感じで内容が長いと「...」とかなるところ 今回はこれを表示できるようにしたい。 モデルの状態とか対策なしの場合の状況 Articleモデルのcontentカラムにhtml文で記事内容を保…
HTML文で記事内容を保存している場合、 記事サムネイルを設定したいときの問題 記事投稿システムを作ったときに記事の内容にCkeditorを使用しています。 記事画像はArticleモデルにpictureカラムは作らずに imgタグでHTML文でパスを直接書き込まれています。…
HTML、CSSとか書いていると1ページに膨大な量のコードがあると管理が大変になってくる。マークアップしかできなかった当時は、部分的に更新とかできないもんかなーってずっと悩んでいました。Railsを触るようになると、これをまってたと言わんばかりの「パ…