なえ

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

知識を操る超読書術

読書

【読書】知識を操る超読書術

本を読んではいるけど、読んで終わりになっている 本の内容が、知識として定着している気がしない 読んだあと活用できるようになりたい 「知識を操る超読書術」概要 リンク 本を読んだのにすぐ忘れてしまう 自分自身に取り入れられず、読んだだけで終わってしまう 「知識を操る超読書術」は、そんな問題を解決することができるでしょう。 まず読書に関して多くの人が感じている、思い込みを取り除いてくれます。 本を読むスピードを上げる必要もないし、本は1ページ目から読む必要もない。 大切なのは、自分がその本を読む目的をはっきり ...

ツール

Macでデュアルキーボードやってみた

肩こり解消のためセパレートタイプのキーボードを考えてたんだけど、どんなもんかわからないので、とりあえずデュアルキーボードを試してみることに! 環境 PC: MacBook Pro (13-inch, 2018, Four Thunderbolt 3 Ports) OS: macOS Big Sur 11.2.3 キーボード: Anker ウルトラスリム Bluetooth ワイヤレスキーボード (AK-A7726121) リンク 接続 両方のキーボードをBluetooth接続すれば、どちらも正常に入力でき ...

IT/WEBの基礎

【IT基礎】ビット, バイト とは

キーワード コンピュータの最小単位は1ビット(1b) 8ビット集まると1バイト(1B) 1ビットで表現できるのは0, 1の2個 さらっと解説 コンピュータの最小単位は1ビットといい、ビットは小文字bで表す。 全てをビットで表すと大変なので、8ビット=1バイトという塊がある。バイトは大文字B。 1ビットで表現できるのは、0, 1の2個だけ。そもそもコンピュータは0, 1しか理解できない。 ビット数が増えていくとこんな感じ。 1ビット = 2個 2ビット = 4個 = 2^2 3ビット = 8個 = 2^3 ...

IT/WEBの基礎

【IT基礎】分散とは

キーワード ばらつき具合 度数分布グラフ ヒストグラム さらっと解説 「分散」とはデータのばらつき具合を表すもの。 度数分布グラフでは、データのばらつきが大きく、広範囲にデータがあるものを「分散が大きい」という。逆にデータのばらつきが小さく、データの範囲が狭いものを「分散が小さい」という。 ここでいう広範囲とは、横軸のことで、縦軸に伸びているかどうかは関係ない。 また、縦軸のことを「度数」、横軸のことを「階級」という。 度数分布グラフのことを正式には、「ヒストグラム」という。

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】拡張機能おすすめ22選 [2021年最新]

2021年最新版 Visual Studio Code(VSCode) のオススメ拡張機能を紹介。
「VSCode拡張機能たくさんあるけど、どれを使えばいいの?」という疑問を解消するため、エンジニアとしての経験を元に使える拡張機能をオススメします。

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