WEB屋の「なえ」が運用するWEB屋のメモ帳です。WEBエンジニア、WEBデザイナー、WEB広告運用者として、WEBやITの基礎知識、プログラミング、デザイン、広告のことを書いていきます。他にも読書記録として書評も書いたり。

【HTML】pとbr改行に使うのは？タグの意味を理解しよう

こんにちは。菜笑[なえ] (@nae310_)です。今回はHTMLタグについて以下2点解説していきます。 は段落 は改行 と の具体的な使用例 は段落 pタグはParagraphの略称で、段落を表すという意味があります。そしてブラウザのデフォルトCSSでもpタグにはmarginが付与されています。なので改行する際に使いたくなるかもしれませんが、ひと段落の文章を改行のために複数のpタグで囲むのは本来の使い方ではないと ...

Ruby

【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

【WordPress】新しいエディタGutenbergを使いこなす方法

こんにちは。菜笑[なえ] (@nae310_)です。今回はWordpressの新エディタGutenbergを使いこなす方法についての備忘録です。新エディタGutenbergは賛否両論、むしろ使いづらいと思っている人の方が多いんじゃないでしょうか。自分も最初は使いにくいなと思っていたのですが、今はGutenbergでサクサクブログを書いています。その方法を2つのポイントに分けて紹介していきます。新エディタGutenbergはMarkdown相性抜群部分的にHTMLが編集可能新エディタGuten ...

Ruby

【Rails】複数のカラムを使ったユニーク制約の方法【uniqueness: scope】

こんにちは。菜笑なえです。 Railsで一意であることのバリデーションにはuniqueness を使います。今回は複数カラムを使ってユニーク制約をかける、uniqueness のscope オプションについて解説していきます。バリデーション例 class Like < ActiveRecord::Base validates :tweet_id, uniqueness: { scope: :user_id } end 今回はTwitterを例に考えています。 Twitterのユーザーは、「1ツイー ...

Ruby

【Rails】FatFreeのバグ解決法 [サイドバー検索と詳細検索]

こんにちは。菜笑なえです。今回はRailsで作られたFatFreeというCRM（顧客管理システム）のバグについての備忘録です。今回のバグは本家FatFreeでも確認できました。本家FatFreeにログインできない方は、この記事の最後に書いているログイン情報でログインしてみてください。 FatFreeバグ内容今回対応したバグは2つです。各項目の一覧表示画面を表示しているときに、サイドバーのチェックボックスを操作すると、ページ下部にあるCampaigns per page が未選択になる詳細検索をし ...

HTML&CSS

【CSS】Flexboxを使用しただけで要素の高さがそろう理由を解説

こんにちは。菜笑なえです。今回はCSSでFlexboxを使用しただけで要素の高さがそろう理由を解説していきます。こちらの記事で要素の高さをそろえるサンプルコードとポイントは解説したので、コピペで使えるコードが見たい方はこちらもご覧ください。 Flexboxを使用しただけで要素の高さがそろう理由まずはこちらのサンプルコードをご覧ください。黄色の孫要素(p)の高さがそろって、青色の孫要素(p)の色が違います。 See the Pen display flex-failed01 by NaeSato ( ...

HTML&CSS

【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; ...

Ruby

【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 ...

Ruby

【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 ...

Ruby

【Rails】Herokuにデプロイする時のES6コンパイルエラー解決方法

こんにちは。菜笑なえです。前回に引き続きHerokuデプロイ時のエラー解決法についての備忘録です。今回はプロダクションモードで動かす時のES6コンパイルエラーについてですが、Herokuのbundlerに関するエラーでお困りの方はこちらの記事もご覧ください。解決法 config/environments/production.rb のconfig.assets.js_compressor 部分を書き換えます。変更前 config.assets.js_compressor = :uglifier 変 ...

Ruby

【2019年7月最新】Rails Herokuデプロイ時のbundlerエラー解決方法 [かなりハマった...]

こんにちは。菜笑なえです。今回はRailsアプリをHerokuにデプロイした時のエラーについての備忘録です。エラー文にPush rejected とあったので、gitが原因かなとか思いましたが、bundler が原因でした。しかも2019年6月25日にHerokuの仕様が変更されたことが影響していたので、今見てるあなたにも当てはまる可能性大です！解決法 Bundlerのバージョンを2.0.2 に変更すれば解決です。現在の設定はGemfile.lock から確認してください。 BUNDLED ...

Ruby

【Rails】publicにある静的ページにリダイレクトする方法

こんにちは。菜笑なえです。本日は、Railsでpublicにある静的ページにリダイレクトする方法についての備忘録です。サクッといきます。 publicにあるページにリダイレクトする方法 redirect_to '/maintenance.html' これで http://localhost:3000/maintenance.html のページにリダイレクトすることができます。環境 Rails 5.2 おわりにメンテナンスページにリダイレクトした時にどうだっけと迷ってしまいました。 ...

ツール

MacでSequel Proのタブを閉じると落ちるときの対処法【Mojave必見】

こんにちは。菜笑なえです。今回はMacでSequel Proのタブを閉じると、Sequel Proが落ちてしまうときの解決方法です。 OSをMojaveにした方々はこれが原因でストレス溜まってると思うので、サクッと解決しましょう！解決方法 Test Builds 1. こちらにアクセスして、Download Build と書いてある青いボタンを押しましょう。 2. ダウンロードしたアプリを、アプリケーションフォルダに移動します。 3. 以上です。簡単ですね。設定していたDBの情報は勝手に引き継がれ ...

Ruby

【Rails】form送信時に'utf8=✓'を消す方法

こんにちは。菜笑なえです。本記事の内容 formを送信したときに、パラメータに付く'utf8=✓'を削除する方法です。 form_withでの設定 form_forでの設定 form_tagでの設定上記３つのformについて記載していきます。 form_withでの設定 :skip_enforcing_utf8 のオプションを設定します。 form_with url: create_path, skip_enforcing_utf8: true do |form| end form_forでの設定 e ...

SQL

【SQL】データベースのタイムゾーンを一時的に変える方法 UTCからJSTへ

こんにちは。菜笑なえです。今回は「SQLでデータベースのタイムゾーンを一時的に変える方法」についての解説です。タイムゾーン確認, 変更から現在時刻の取得まで（コピペ用） SHOW VARIABLES LIKE '%time_zone%'; SET SESSION time_zone = 'Asia/Tokyo'; SELECT NOW(); それぞれ以下で解説していきます。 SQLでのデータベースのタイムゾーン確認方法 SQLでのタイムゾーンを一時的に変更する方法 SQ ...

SQL

【SQL】文字列を置換して、データの更新を行う方法

こんにちは。菜笑なえです。今回はSQLに関する内容になっています。本記事の内容 SQLでの文字列の置換 SQLでのデータ更新【まとめ】置換したデータで更新以上３点について解説していきます。 SQLでの文字列の置換 SQLでの文字列の置換方法は以下の通りです。 replace(置換したいデータ, '置換前の文字', '置換後の文字') 実際に使ってみます。元の文字列 shops.name = '新宿店' ここから店という文字を削除したいです。今回は ...

Ruby

Rails link_toメソッドをブロックにして、要素をネストさせる方法

こんにちは。菜笑なえです。今回は「Rails link_toメソッドをブロックにして、要素をネストさせる方法」という内容で書いていきます。事象一行で書いていたlink_to を、ブロックにして要素をで囲もうとした時のミスについて。コード状況一行で書いていたとき。 = link_to(表示名, root_path) これをブロックにしたいと思い書いたもの。 = link_to(表示名, root_path) do %p ネスト NoMethodError と言われました。解決方法こちらで解決で ...

JavaScript

JavaScriptでフォームの自動入力を実現する！テスト時の面倒な入力とおさらば！

こんにちは。菜笑なえです。 JavaScriptでフォームの自動入力を実現する方法について書いていきます。テスト時に何度も同じ項目を入力することに疲れている方は必見です。自動入力までの手順 save_formvalue.js を用意フォームのあるHTMLでscriptを設定 Console で実行詳細コード save_formvalue.js を用意 // フォーム値を取得してlocalStorage に保存 function getFormValue(storage_key, form) { v ...

Ruby

Rails ActionNotFound エラーの対応 404ページを表示させる

こんにちは。菜笑[なえ]です。今回は「Rails ActionNotFound エラーの対応 404ページを表示させる」という内容で書いていきます。事象 Railsで存在しないページにアクセスしたら、404ページを表示させる。ということをやっている時のエラーです。エラー内容 AbstractController::ActionNotFound (The action 'render_404' could not be found for ApplicationController): ...

Ruby

Rails マイグレーションファイルを使ってカラムのデータ型を変更する方法

こんにちは。菜笑[なえ]です。今回は「Rails マイグレーションファイルを使ってカラムのデータ型を変更する方法」という内容で書いていきます。事象マイグレーションファイルを使って、float型からdouble型に変更したい。解決方法マイグレーションファイルの作り方。 $ rails g migration change_datatype_カラム名_of_テーブル名 change_datatype_カラム名_of_テーブル名の部分は任意の書き方で大丈夫なので、他のファイル名でもいいです。マイグ ...

« Prev 1 2 3 Next »