なえ

コードから逃げたかったけど、やっぱりコード書くの好き。WEB系エンジニア。アニメ漫画ゲーム囲碁も好き。海外も好きだけど今は富山でひきこもり。

wordpress

WordPress

【WordPress】スパムコメント対策・削除

概要 こんな感じで大量のスパムコメントが発生していたので対策していきます スパムコメント削除 コメントページの一括操作で「ゴミ箱へ移動」、その後ゴミ箱で「完全に削除する」を選択して削除するだけです。 ただ、自分は464件あり、少しずつやるは大変なので、「表示オプション」から表示件数を変更しました。 999件とかにも設定できるんですが、うまく削除できなかったので、100件ずつ試みたところ問題なく削除できました。 スパムコメント対策 削除してもまた増えたら困るので対策しておきましょう。 今回はGoogle r ...

rails

Ruby

【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

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

web-image

ツール

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

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

form_input

ツール

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

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

rails

Ruby

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

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

github

Git

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

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

HTML&CSS

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

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

ツール

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

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

プログラミング

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

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

vscode

ツール

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

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

vscode

ツール

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

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

vscode

ツール

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

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

wordpress

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] コピーする文章、ボタン、コピーされた時のアラー ...

css

HTML&CSS

【CSS】レスポンシブ対応のステップナビの実装方法 【コピペOK】

こんにちは。菜笑[なえ] (@nae310_)です。 今回はレスポンシブ対応のステップナビの実装方法についての備忘録です。 コピペ用コードはCSS用とSCSS用2種類用意しています。 完成図 今回はPC版のみ文字を表示して、SP版ではシンプルに数字だけにしました。 PC版(画面幅769px以上) SP版(画面幅768px以下) 完成コード [コピペOK] HTMLはどちらも共通です。 CSS用 See the Pen step nav css by NaeSato (@N310) on CodePen. ...

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ツイー ...