実現すること 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とか書いていると１ページに膨大な量のコードがあると管理が大変になってくる。マークアップしかできなかった当時は、部分的に更新とかできないもんかなーってずっと悩んでいました。Railsを触るようになると、これをまってたと言わんばかりの「パ…