【Rails】文字コードのエラー対処法 ActionView::Template::Error
こんにちは。菜笑[なえ] (@nae310_)です。 今回はRailsの文字コードのエラー対処法 についてです。 エラー内容 ActionView::Template::Error (incompatible character encodings: UTF-8 and ASCII-8BIT): 対処法 .force_encoding("UTF-8") を使用して文字コードの情報をUTF-8に切り替えることで対応しました。 <%= display_meta_tags(default_meta_tag ...
【Rails】migrationの書き方 カラム追加・変更・削除
こんにちは。菜笑[なえ] (@nae310_)です。 今回はRailsのmigrationファイルの書き方(カラム追加・変更・削除)についての備忘録です。 カラム追加 def change add_column :users, :delete_flg, :boolean, null: false, default: false, comment: '削除フラグ', after: :name end ポイント add_column を使う 基本形: add_column :テーブル名, :カ ...
【Rails】環境変数の設定・呼び出し方法 [Docker, AWS]
こんにちは。菜笑[なえ] (@nae310_)です。 今回はRailsの環境変数をDockerとAWSへ設定する方法と、Railsでの呼び出し方法についてです。 以下の順番で解説していきます。 Dockerでの環境変数の設定方法 AWSでの環境変数の設定方法 Railsでの環境変数を呼び出し方法 Dockerでの環境変数の設定方法 Dockerではdocker-compose.yml に設定していきます。 version: '3' services: web: environment: A ...
【GitHub】CommitからPullRequestを特定する方法
こんにちは。菜笑[なえ] (@nae310_)です。 今回はGitHubでCommitからPullRequestを特定する方法についてです。 最初いろいろ設定してたけど、すっごく簡単な方法ありました！！ 以下の内容で書いていきます。 【簡単】コミットからプルリクを探す方法 ローカルにいろいろ設定して探す方法 おわりに 【簡単】コミットからプルリクを探す方法 GitHubでPullRequestのタブを開きます。 そして検索ボックスにコミットハッシュを入力します。 以上です！ 該当するコミットが含まれたプル ...
【HTML/CSS】ファイルパスの書き方
こんにちは。菜笑[なえ] (@nae310_)です。 今回はファイルパスの書き方についてです。 HTML, CSSを勉強し始めた方が、最初につまずくポイントが「ファイルパス」だと思います。 自分もプログラミング講師をしていて 「画像が反映されません」 「CSSを書いたのに何も変わりません」 という質問をよく受けます。 ほとんどの場合がファイルパスの書き方が間違っているんですね。 なので、今回はこの「ファイルパス」について完全に理解していただこうと思います！ 大事なポイントは３つだけ ファイルパスを理解する ...
投稿記事リンク一括取得サービスの使い方
こんにちは。菜笑[なえ] (@nae310_)です。 今回は先日自分で作った「投稿記事リンク一括取得サービス」についてまとめておきます。 なにが出来るのか 使い方 初めて個人サービスを作ってみて まとめ なにが出来るのか WordPressで投稿した記事のURLを一括で取得できます。 固定ページは含みません。投稿記事のみです。 なぜこれが必要で作ったのか？というと WordPressでパーマリンクを変更しようと思ったんですが、元々のURLから新しいURLにリダイレクト設定をする必要があることに気づき 手動 ...
【WordPress】.htaccess の書き方 【簡単な方法あります】
こんにちは。菜笑[なえ] (@nae310_)です。 今回は.htaccess についての備忘録です。 リダイレクト設定などプラグインを使う方も多いと思いますが、.htaccess の編集方法がわかればプラグイン1つ不要になるので、ぜひ使えるようにしましょう。 ただ.htaccess の編集は間違えるとページが表示されなくなったりという可能性もあリます。 なので、・ .htaccess ってなに？・そんなファイルどこにあるの？ という方はプラグイン使っておいた方が安全です。 完成コード 今回は例としてex ...
【jQuery】テキストをクリップボードにコピーする方法【コピペOK】
こんにちは。菜笑[なえ] (@nae310_)です。 今回はコピーするボタンを押したときに、任意のテキストをクリップボードにコピーする方法についてです。 完成図 こちらのCopyというボタンを押すと「コピーするテキスト」という文章がコピーされます。 どこかに貼り付けて実際にコピーされていることを確認してみてください。 See the Pen clipboard copy by NaeSato (@N310) on CodePen. 完成コード [コピペOK] コピーする文章、ボタン、コピーされた時のアラー ...
【CSS】レスポンシブ対応のステップナビの実装方法 【コピペOK】
こんにちは。菜笑[なえ] (@nae310_)です。 今回はレスポンシブ対応のステップナビの実装方法についての備忘録です。 コピペ用コードはCSS用とSCSS用２種類用意しています。 完成図 今回はPC版のみ文字を表示して、SP版ではシンプルに数字だけにしました。 PC版（画面幅769px以上） SP版（画面幅768px以下） 完成コード [コピペOK] HTMLはどちらも共通です。 CSS用 See the Pen step nav css by NaeSato (@N310) on CodePen. ...
【HTML】pとbr改行に使うのは？タグの意味を理解しよう
こんにちは。菜笑[なえ] (@nae310_)です。 今回はHTMLタグについて以下2点解説していきます。 <p>は段落 <br>は改行 <p>と<br>の具体的な使用例 <p>は段落 pタグはParagraphの略称で、段落を表すという意味があります。 そしてブラウザのデフォルトCSSでもpタグにはmarginが付与されています。 なので改行する際に使いたくなるかもしれませんが、ひと段落の文章を改行のために複数のpタグで囲むのは本来の使い方ではないと ...
【Rails】セレクトボックスの選択肢をDBから取得し、data属性も持たせる方法
こんにちは。菜笑[なえ] (@nae310_)です。 今回はRailsでDBから取得したデータを使ってセレクトボックスを作成し、optionにdata属性を持たせる方法についての備忘録です。 selectの基本的な使い方はこちらをどうぞ。 完成コード <%= form_with model: @post, url: posts_path, do |form| %> <%= form.select :user_id, @users.map{ |user| [user.name, user. ...
【WordPress】 新しいエディタGutenbergを使いこなす方法
こんにちは。菜笑[なえ] (@nae310_)です。 今回はWordpressの新エディタGutenbergを使いこなす方法についての備忘録です。 新エディタGutenbergは賛否両論、むしろ使いづらいと思っている人の方が多いんじゃないでしょうか。 自分も最初は使いにくいなと思っていたのですが、今はGutenbergでサクサクブログを書いています。 その方法を2つのポイントに分けて紹介していきます。 新エディタGutenbergはMarkdown相性抜群 部分的にHTMLが編集可能 新エディタGuten ...
【Rails】複数のカラムを使ったユニーク制約の方法【uniqueness: scope】
こんにちは。菜笑なえです。 Railsで一意であることのバリデーションにはuniqueness を使います。今回は複数カラムを使ってユニーク制約をかける、uniqueness のscope オプションについて解説していきます。 バリデーション例 class Like < ActiveRecord::Base validates :tweet_id, uniqueness: { scope: :user_id } end 今回はTwitterを例に考えています。 Twitterのユーザーは、「1ツイー ...
【Rails】FatFreeのバグ解決法 [サイドバー検索と詳細検索]
こんにちは。菜笑なえです。 今回はRailsで作られたFatFreeというCRM（顧客管理システム）のバグについての備忘録です。 今回のバグは本家FatFreeでも確認できました。本家FatFreeにログインできない方は、この記事の最後に書いているログイン情報でログインしてみてください。 FatFreeバグ内容 今回対応したバグは2つです。 各項目の一覧表示画面を表示しているときに、サイドバーのチェックボックスを操作すると、ページ下部にあるCampaigns per page が未選択になる 詳細検索をし ...
【CSS】Flexboxを使用しただけで要素の高さがそろう理由を解説
こんにちは。菜笑なえです。 今回はCSSでFlexboxを使用しただけで要素の高さがそろう理由を解説していきます。 こちらの記事で要素の高さをそろえるサンプルコードとポイントは解説したので、コピペで使えるコードが見たい方はこちらもご覧ください。 Flexboxを使用しただけで要素の高さがそろう理由 まずはこちらのサンプルコードをご覧ください。 黄色の孫要素(p)の高さがそろって、青色の孫要素(p)の色が違います。 See the Pen display flex-failed01 by NaeSato ( ...
【CSS】Flexboxを使用して要素の高さをそろえる方法 【ポイント4つ】
本文 こんにちは。菜笑なえです。 CSSで要素の高さをそろえるのって、どうすればいいんだろうと悩みますよね。 jQueryのプラグインとかもありますが、CSSでも可能なので解説していきます。 実際のサンプルもあります。 CSS Flexboxを使用して要素の高さをそろえる方法 【ポイント4つ】 完成コード（コピペOK） See the Pen display flex-complete by NaeSato (@N310) on CodePen. 4つのポイント 親要素(ul)にdisplay:flex; ...
【Rails】完全理解 formでセレクトボックスをつくるselectの使い方
こんにちは。菜笑なえです。 今回はRailsでformのセレクトボックスをつくるときに使う、select の使い方についての解説です。 完成コード <%= form_with model: @post, url: posts_path, do |form| %> <%= form.select :user_id, [['太郎', 1], ['二郎', 2]], { include_blank: true, selected: 1 }, { id: &quo ...
【Rails】link_toに任意のパラメータを付与する方法
こんにちは。菜笑なえです。 今回はlink_to に任意のパラメータを付与する方法についてです。 任意のパラメータのみ idパラメータと任意のパラメータ ネストしたパラメータ 上記３つのパターンについて記載していきます。 任意のパラメータのみ viewでの記載 users_path(group_id: 1, team_id: 2) 変換されたURL http://localhost:3000/users?group_id=1?team_id=2 受け取りデータ Parameters {"grou ...
【Rails】Herokuにデプロイする時のES6コンパイルエラー解決方法
こんにちは。菜笑なえです。 前回に引き続きHerokuデプロイ時のエラー解決法についての備忘録です。 今回はプロダクションモードで動かす時のES6コンパイルエラーについてですが、Herokuのbundlerに関するエラーでお困りの方はこちらの記事もご覧ください。 解決法 config/environments/production.rb のconfig.assets.js_compressor 部分を書き換えます。 変更前 config.assets.js_compressor = :uglifier 変 ...
【2019年7月最新】Rails Herokuデプロイ時のbundlerエラー解決方法 [かなりハマった...]
こんにちは。菜笑なえです。 今回はRailsアプリをHerokuにデプロイした時のエラーについての備忘録です。 エラー文にPush rejected とあったので、gitが原因かなとか思いましたが、bundler が原因でした。 しかも2019年6月25日にHerokuの仕様が変更されたことが影響していたので、今見てるあなたにも当てはまる可能性 大 です！ 解決法 Bundlerのバージョンを2.0.2 に変更すれば解決です。 現在の設定はGemfile.lock から確認してください。 BUNDLED ...