• プログラミング
    • Ruby
    • WordPress
    • HTML&CSS
    • JavaScript
    • Git
    • SQL
  • WEBあれこれ
    • IT/WEBの基礎
    • ツール
  • 制作実績

WEB屋のメモ帳

  • プログラミング
    • Ruby
    • WordPress
    • HTML&CSS
    • JavaScript
    • Git
    • SQL
  • WEBあれこれ
    • IT/WEBの基礎
    • ツール
  • 制作実績
html

HTML&CSS

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

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

rails

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

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

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

rails

Ruby

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

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

rails

Ruby

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

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

css

HTML&CSS

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

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

css

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

rails

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

rails

Ruby

【Rails】link_toに任意のパラメータを付与する方法

こんにちは。菜笑なえです。 今回はlink_to に任意のパラメータを付与する方法についてです。 任意のパラメータのみ idパラメータと任意のパラメータ ネストしたパラメータ 上記3つのパターンについて記載していきます。 任意のパラメータのみ viewでの記載 users_path(group_id: 1, team_id: 2) 変換されたURL http://localhost:3000/users?group_id=1?team_id=2 受け取りデータ Parameters {"grou ...

rails

Ruby

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

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

heroku

Ruby

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

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

rails

Ruby

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

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

SequelPro

ツール

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

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

rails

Ruby

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

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

sql

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でのデータ更新 【まとめ】置換したデータで更新 以上3点について解説していきます。 SQLでの文字列の置換 SQLでの文字列の置換方法は以下の通りです。 replace(置換したいデータ, '置換前の文字', '置換後の文字') 実際に使ってみます。 元の文字列 shops.name = '新宿店' ここから店 という文字を削除したいです。 今回は ...

rails

Ruby

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

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

javascript

JavaScript

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

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

rails

Ruby

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

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

rails

Ruby

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

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

« Prev 1 2 3 Next »
  • Twitter
  • Share
  • Pocket
  • Hatena
  • URLコピー

なえ

2011年に初めてプログラミングを学び、何度もコードから逃げたけど、やっぱりコード書くの好きなエンジニア。プログラミング、デザイン、広告運用と手を出したので、まとめてWEB屋と言っています。海外移住も考えながら、今は富山移住してひきこもり。

プロフィール詳細

カテゴリー

  • WEBあれこれ
    • IT/WEBの基礎
    • ツール
  • プログラミング
    • Git
    • HTML&CSS
    • JavaScript
    • Ruby
    • SQL
    • WordPress
  • 読書

スポンサーリンク

アーカイブ

  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2018年11月

WEB屋のメモ帳

© 2022 WEB屋のメモ帳