WEB屋のメモ帳

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

Ruby

【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 :テーブル名, :カ ...

ツール

ChromeでSVG画像が表示されない場合の対処法

こんにちは。菜笑[なえ] (@nae310_)です。今回はGoogleChromeでSVG画像が表示されないときの対処法についてです。解決方法今回表示されなかったコードはこちらです。 <svg xmlns="http://www.w3.org/2000/svg" width="46" height="46"> <image x="0px" y="0px" width="46 ...

ツール

Chrome拡張機能フォーム自動入力の方法【AUTOFILL】

こんにちは。菜笑[なえ] (@nae310_)です。今回はGoogleChromeの拡張機能【AUTOFILL】についてです。この拡張機能があればフォームの自動入力を行なってくれます。以前こちらのJavaScriptを使った自動入力の方法を紹介しました。ですが拡張機能を使う方が手軽で便利ですね。今回は以下の順番で解説していきます。 AUTOFILLのインストール方法 AUTOFILLの使い方おわりに AUTOFILLのインストール方法 Chromeの拡張機能を使ったことある方は、特に問題ない ...

Ruby

【Rails】環境変数の設定・呼び出し方法 [Docker, AWS]

こんにちは。菜笑[なえ] (@nae310_)です。今回はRailsの環境変数をDockerとAWSへ設定する方法と、Railsでの呼び出し方法についてです。以下の順番で解説していきます。 Dockerでの環境変数の設定方法 AWSでの環境変数の設定方法 Railsでの環境変数を呼び出し方法 Dockerでの環境変数の設定方法 Dockerではdocker-compose.yml に設定していきます。 version: '3' services: web: environment: A ...

Git

【GitHub】CommitからPullRequestを特定する方法

こんにちは。菜笑[なえ] (@nae310_)です。今回はGitHubでCommitからPullRequestを特定する方法についてです。最初いろいろ設定してたけど、すっごく簡単な方法ありました！！以下の内容で書いていきます。【簡単】コミットからプルリクを探す方法ローカルにいろいろ設定して探す方法おわりに【簡単】コミットからプルリクを探す方法 GitHubでPullRequestのタブを開きます。そして検索ボックスにコミットハッシュを入力します。以上です！該当するコミットが含まれたプル ...

HTML&CSS

【HTML/CSS】ファイルパスの書き方

こんにちは。菜笑[なえ] (@nae310_)です。今回はファイルパスの書き方についてです。 HTML, CSSを勉強し始めた方が、最初につまずくポイントが「ファイルパス」だと思います。自分もプログラミング講師をしていて「画像が反映されません」「CSSを書いたのに何も変わりません」という質問をよく受けます。ほとんどの場合がファイルパスの書き方が間違っているんですね。なので、今回はこの「ファイルパス」について完全に理解していただこうと思います！大事なポイントは３つだけファイルパスを理解する ...

ツール

画像を圧縮してブログを軽くする方法【iLoveIMGがオススメ】

こんにちは。菜笑[なえ] (@nae310_)です。今回は画像を圧縮してブログを軽くする方法についてです。サイトの表示に時間がかかって困っている少しでも速くブログの記事を表示したいそんなお悩みを解決します。 iLoveIMGを使いましょうブログに画像をアップロードする場合は、そのままアップロードすると記事が重くなってしまいます。一手間増えてしまいますが、アップロードする前に必ずiLoveIMGを使って画像を圧縮する癖をつけましょう。 iLoveIMG iLoveIMGはJPG, PNG, GI ...

プログラミング

投稿記事リンク一括取得サービスの使い方

こんにちは。菜笑[なえ] (@nae310_)です。今回は先日自分で作った「投稿記事リンク一括取得サービス」についてまとめておきます。なにが出来るのか使い方初めて個人サービスを作ってみてまとめなにが出来るのか WordPressで投稿した記事のURLを一括で取得できます。固定ページは含みません。投稿記事のみです。なぜこれが必要で作ったのか？というと WordPressでパーマリンクを変更しようと思ったんですが、元々のURLから新しいURLにリダイレクト設定をする必要があることに気づき手動 ...

ツール

【VSCode】拡張機能おすすめ20選 [2019年最新]

こんにちは。菜笑[なえ] (@nae310_)です。 Visual Studio Code(VSCode) を使っていると・拡張機能たくさんあるけど、どれを使えばいいの？・自分にオススメの拡張機能ってどれだろう。・拡張機能を使って効率よく開発を進めたい！という気持ちになってくると思います。本記事では、こういった悩みに答えていきます。本記事の内容 Visual Studio Codeを使う全ての人にオススメ拡張機能 6選 HTML & CSSを使う人にオススメ拡張機能 6選 Ruby o ...

ツール

【VSCode】カラーテーマを変更して好きな配色にする方法 [Mac]

こんにちは。菜笑[なえ] (@nae310_)です。 Visual Studio Code(VSCode) の配色をもっとカッコよく！見やすく！好きなものに変えたい！と思っていませんか？今回はVisual Studio Code(VSCode) のカラーテーマの変更方法について解説していきます。びっくりするほど簡単なので、ぜひ好きなテーマにして幸せな気持ちでプログラミングをしましょう。では、以下の内容で書いていきます。好きなカラーテーマを決める VSCodeのカラーテーマを変更するおすすめテーマ ...

ツール

【VSCode】インストールから初期設定の方法 [Mac]

こんにちは。菜笑[なえ] (@nae310_)です。今回はVisual Studio Code(VSCode) のインストールから初期設定までについての備忘録です。以下の内容で書いていきます。インストール手順日本語化の方法初期設定方法おわりに VSCodeのインストール手順こちらにアクセスすると自動的にダウンロードが始まります。 Documentation for Visual Studio Code もし始まらない場合はdirect download link. をクリックしてみてください ...

WordPress

【WordPress】.htaccess の書き方【簡単な方法あります】

こんにちは。菜笑[なえ] (@nae310_)です。今回は.htaccess についての備忘録です。リダイレクト設定などプラグインを使う方も多いと思いますが、.htaccess の編集方法がわかればプラグイン1つ不要になるので、ぜひ使えるようにしましょう。ただ.htaccess の編集は間違えるとページが表示されなくなったりという可能性もあリます。なので、・ .htaccess ってなに？・そんなファイルどこにあるの？という方はプラグイン使っておいた方が安全です。完成コード今回は例としてex ...

JavaScript

【jQuery】テキストをクリップボードにコピーする方法【コピペOK】

こんにちは。菜笑[なえ] (@nae310_)です。今回はコピーするボタンを押したときに、任意のテキストをクリップボードにコピーする方法についてです。完成図こちらのCopyというボタンを押すと「コピーするテキスト」という文章がコピーされます。どこかに貼り付けて実際にコピーされていることを確認してみてください。 See the Pen clipboard copy by NaeSato (@N310) on CodePen. 完成コード [コピペOK] コピーする文章、ボタン、コピーされた時のアラー ...

HTML&CSS

【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&CSS

【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 が未選択になる詳細検索をし ...

1 2 3 Next »