2022年11月の記事

2022.11.30（更新日: 2022.11.30）
途中でヘッダーの高さが変化して固定される動き
ローカル環境で、スクロールすると途中でヘッダーの高さが変化して固定される動きを作成しました。 作成したヘッダーの動き PCで、スクロール量がヘッダーの高さを超えるとヘッダーがゆっくりと下がって、固定される動きを作成しました。 ヘッダーの動きの作成方法 HTML JS CSS HTML HTMLは、ヘッダーにidを追加しました（後で、JSで使用します）。 JS header-fi ...
2022.11.29（更新日: 2024.08.08）
コンポーネントの繰り返しに使用する「map関数」
しまぶーさんが、「コンポーネントを、mapで繰り返そう」という動画を上げてくれていたので、学習ブログを書いていきます。 この記事では、主な内容のみを書いていきます（動画内では、詳細についても解説されています）。 今回使用した開発環境 以前の記事で作成した、ローカル環境を使用しました。 言語は、TypeScriptを設定しましたが、今回の内容では、JavaScriptのみを使用し ...
2022.11.29（更新日: 2024.06.01）
マイナンバーカードの20,000ポイントについて
マイナンバーカードを登録すると最大20,000ポイントが貯まるということを耳にしたので、詳細をまとめていこうと思います。 マイナポイントはどこで使えるのか？ 決済サービスのポイントに変換して、その決済サービスが使えるお店なら使用可能です。 以下のようなサービスのポイントに変換可能でした。 マイナポイントの受け取り対象のサービス一覧はこちらにまとまっています。 例えば、エポスポイ ...
2022.11.28（更新日: 2023.10.21）
岐阜駅周辺で景色がキレイな場所 TOP5
私が住んでいる愛知県一宮市の近くに岐阜県があります。 一宮駅から岐阜駅は快速で一本で行けるため、たまに行っています。 今回は、先日天気の良い日に岐阜駅周辺を見てきたので、景色がキレイな場所 TOP5を紹介したいと思います。 岐阜駅に行く機会があれば、ぜひ参考にしてください。 第五位 JR岐阜駅 岐阜の玄関口「JR岐阜駅」は、駅から歩道が伸びていて、開放的な空間でした。 景色 遊 ...
2022.11.27（更新日: 2025.06.29）
Google Chartsの円グラフに投票できる例
こちらの参考書のchapter7の内容です。 以下のように、Google Chartsの円グラフが表示されていて、表のボタンを押すと数字が増えて、グラフも連動して変化するようになっています。 動作環境 vue.jsのバージョンは、2.5.17です。 全体の流れ 先ほどのサンプルを作成するときの全体の流れはこちらです。 Google Chartsを用意する まずは、google ...
2022.11.26（更新日: 2025.06.28）
HARBSに行ってみた
以前から気になっていたケーキ屋さんの「HARBS」に行ってきました。 持ち帰りか店内か選べるのですが、店内で食べました。 12時くらいに入ったので、「料理は出ませんがよろしいですか？」と聞かれました。 ケーキのみの注文は出来ませんでした。 マロンタルト1カット（830円）と、デカフェコーヒー（660円）をセットで頼みました。 ケーキのメニューはこちらです。 クリームを食べている ...
2022.11.25（更新日: 2025.08.01）
Djangoの開発用サーバーを立ち上げてみた
Pythonのフレームワーク「Django（ジャンゴ）」について書いていきます。 今後、WEBエンジニアとして活躍していくのに、WEBアプリケーションを一人で作成できる知識が必要だと思ったので、こちらの本を購入しました。 この記事では、Djangoをインストールして、Djangoの雛形をローカル開発環境で確認するまでの過程を記録していきます。 Djangoをインストールする ま ...
2022.11.25（更新日: 2022.11.27）
2022年11月25日
今日は一宮市で過ごしました。 まだ、引越し先の実家にネットが通っていないため、スタバのネットを利用しました。 今日やったこと 当サイトの記事ページに「この記事を読むと分かること」というフィールドを作成した 無印のタッカルビの素を購入して、夜ご飯を自炊した CALDYでシチリアレモンのお酒を購入して、飲んだ Djangoのインストールからテスト環境の起動までを記録したブログ記事を ...
2022.11.24（更新日: 2024.08.08）
Next.jsで学ぶReact講座 #1Next.jsのセットアップ
しまぶーさんが、Next.jsについての動画を出してくれていました。 今後WEBエンジニアとして活躍していくのに、Next.jsを学んでおいておいた方がいいと思うので、まずは、この動画に沿って学んでいきます。 前回は、Next.jsで重要な部分について書きました。 今回は、Next.jsのセットアップを行っていきます。 ゴールと全体の流れ 最終的に以下の画面に到達しました。 以 ...
2022.11.23（更新日: 2023.01.05）
2022年11月23日
今日やったこと 今後のビジョン ブログとTwitterは毎日最低1つアップして、文章力を磨いていきたい。 起床→水を飲む→メモ書き→シャワー→TODOリストをメモに書く→外出という流れを続けていきたい。 転職の前に、WEBエンジニアにとって必要なスキルを学んでおきたい。 たくさんあるから、ドキュメントを見ながら進めていけるレベルになるまでを目標にしよう。 雑記ブログで書きたいこ ...
2022.11.23（更新日: 2022.11.23）
WordPressでキーワード検索を作成する方法
本日、当サイトのサイドバーに検索ボックスを作成したので、その方法をまとめていきます。 本日作成した検索機能 キーワードを入力して、Enterキーまたは検索ボタンをクリックすると、そのキーワードが本文中やタイトルに含まれる記事が表示されます。 例えば、「vue」というキーワードで検索すると、「vue」が含まれる記事が検索結果に表示されます。 作成手順 以下のような手順で検索機能を ...
2022.11.22（更新日: 2024.08.08）
Next.jsで学ぶReact講座 #1 Next.jsで重要な部分
しまぶーさんが、以下のような動画を出してくれていました。 今後WEBエンジニアとして活躍していくのに、Next.jsを学んでおいておいた方がいいと思うので、まずは、この動画に沿って学んでいきます。 Next.jsで重要な部分 太字の部分は、最初のうちから特に重要な部分です。 Zero Config 素のReactだと自分で設定ファイルをいじらなければいけないところを、Next. ...
2022.11.21（更新日: 2025.08.11）
SPAのToDoアプリ
Vue.jsで、SPA（Single Page Application）のToDoアプリを作ってみました。 今回作成したもの See the Pen Untitled by Shibata Hiroki (@khiro-enginner) on CodePen. 動き ソースコード HTML・JavaScript（JS）・CSSが関連し合って、ToDoアプリが実現しています。 ...
2022.11.21（更新日: 2025.06.29）
2022年11月21日
今日やったこと 今後のビジョン ブログとTwitterは毎日最低1つアップして、文章力を磨いていきたい。 起床→水を飲む→メモ書き→シャワー→外出という流れを続けていきたい。 転職の前に、WEBエンジニアにとって必要なスキルを学んでおきたい。 たくさんあるから、ドキュメントを見ながら進めていけるレベルになるまでを目標にしよう。 明日のToDo
2022.11.20（更新日: 2025.06.29）
ローディングアニメーションを作成してみた
年末あたりに、知り合いのWEBデザイナーさんからコーディングの依頼が来ると思います。 事前準備として、jQueryを使用したローディングアニメーションの学習ブログを書いておきます。 ローディングアニメーションとは？ こちらのユナイテッドアローズを開いたときに表示されるような、画面読み込み時に発生するアニメーションのことです。 今回やってみたこと 当サイトで、画面読み込み時にロー ...
2022.11.20（更新日: 2023.06.22）
【早く気づけ】一生お金がない人の共通点 TOP3
お金ばかりを求めている訳ではないけど、私たちは日々お金を使って生きているので、お金が必要です。 この動画を見れば、「お金を稼ぐにはどうすればいいか？」という疑問が解消されるはずです。 本記事では、この動画を見た後に私が思ったことをつらつらと書き綴っていきます。 遊んでいないからお金がない ここでいう遊びとは、主体的に周りの人を巻き込んで、みんなが楽しめるような「遊び」を企画して ...
2022.11.19（更新日: 2025.06.28）
Nuxt.jsをインストールしてみた
vue.jsのフレームワーク「Nuxt.js」をインストールしてみました。 最終的には、スタートページが表示されましたが、 なかなかスムーズにインストールが進まなかったので、その過程も書いていきます。 公式サイトのドキュメント 公式サイトのインストールページにインストールに必要な情報がまとまっていました。 インストールに必要なもの npmでインストールしようとしたら上手くいかな ...
2022.11.19（更新日: 2022.12.24）
名駅近くのコワーキングスペースの情報をまとめてみた
先日引っ越したので、しばらくインターネットが使えない状況が続いています。 そこで、コワーキングスペースのネットを利用したいと思いました。 私は、愛知県一宮市に住んでいますが、名古屋駅まで電車ですぐに行けます。 名古屋駅（名駅）付近のコワーキングスペースの情報について調べてみました。 少し体験してみたいという方のために、以下の2点に絞って、情報をまとめていきます。 5つのコワーキ ...
2022.11.18（更新日: 2022.11.20）
2022年11月18日
今日やったこと neo work gihuを3時間利用してみた YouTubeでONE OK ROCKのvandalizeのPVを観た 一宮市役所で転入手続きを行った 一宮警察署で免許証の住所変更を行った 岐阜駅の薬膳のお店でカレーを食べた ワインの記事をアップした WHITE SPACEを読破した 引っ越し後に箱に入っていたiMacを箱から出して電源に繋いだ 今日感動したこと ...
2022.11.17（更新日: 2025.08.11）
vuetify
vuetifyについて調べてみました。 vuetifyとは？ Vue.jsのUIフレームワークです。 始め方 公式ドキュメントの流れに沿って、進めていきました。 vuetifyのインストール を入力すると、以下のようになりました。 これで、インストールが完了しました。 途中で、yarnのアップグレードを進められていますが、今回は無視しておきます。 色々と聞かれて設定していく 対 ...
2022.11.16（更新日: 2023.12.05）
引っ越しでやることと、その期限をまとめてみた
11月18日に、今住んでいるところを退去して実家に引っ越しを行いました。 せっかくなので、引っ越しでやることについてまとめてみたいと思いました。 参考としてお伝えしておくと、私は一人暮らし男性です。 やるべきことの一覧 私（単身一人暮らし・移動先は実家）の場合、引っ越しでやるべきことはこちらでした。 退去の手続き ネットのフォームから不動産会社に退去の連絡を入れました。 書面が ...
2022.11.15（更新日: 2025.08.11）
Vueアプリケーション、Vite、node.js、npm run dev
以前の記事で、拡張子が「.vue」のファイルをブラウザに表示させることが出来ませんでした。 本日、公式サイトのクイックスタートにある「Vueアプリケーションの作成」を参考に進めました。 そして、ブラウザでVueアプリケーションを実行することができました。 本記事では、どのように上の画面に到達したのかについて書いていきます。 公式サイトを開く まずは、公式サイトの「クイックスター ...
2022.11.15（更新日: 2025.03.11）
npmとは？
JavaScriptのフロントエンド開発でよく聞くnpmとは何でしょうか？ 調べたことをまとめてみました。 何の略称？ です。 ただし、googleの検索結果には、「実際にはバクロニムです」とありました。 バクロニムとは、既存の言葉に対して後付けで作られた略語のことです。 つまり、「node package manager」を略して「npm」になった訳ではなく、「npm」という ...
2022.11.15（更新日: 2024.05.23）
WHITE SPACE ホワイトスペース
何もしない時間の重要性を再認識させてくれる本でした。 著者は例えを頻繁に使っていて、アメリカ特有の固有名詞などはググりながら読み進めました。 現代人が、たいして重要でない仕事に邁進している様子を「もぐら」に例えたりしていて、面白かったです。 戦略的な小休止 作業と作業の間に休憩を挟むことで、生産性がアップするようです。 私もこのことを実感しています。 ノンストップで作業を続ける ...
2022.11.14（更新日: 2022.12.02）
SFCとは何か？
Vue.jsには、SFC（Single File Component）という用語があります。 この記事では、SFCとは何か？について解説していきます。 拡張子は「.vue」 SFCの拡張子は「.vue」です。 どうやって.vueファイルを機能させるか？ これまで、CDNでvueのコアファイルを読み込んで、HTMLに少しだけ取り入れるという形で、vue.jsを使用してきました。 ...
2022.11.13（更新日: 2025.08.11）
v-on、watch、methods
vue.jsには、状態を監視する機能があります。 この記事では、ボタンを押すと3秒カウントして、アラートを出すプログラムを作成していきます。 こちらの「chapter8」を参考にしました。 参考書のVue.jsのバージョンは2.5ですが、今回は3系の書き方に変更しました。 今回作成したプログラム 最初は「3秒」と「ボタン」が表示されています。 ボタンを押すとタイマーが動作します ...
2022.11.12（更新日: 2023.08.17）
AmPm / Streets of Tokyo feat. Michael Kaneko
この曲は、資本主義社会に生きている私たちのジレンマについて歌っています。 資本主義社会では、実力のあるものが高い収入を得ることができます。 それは人々を奮い立たせます。その一方で、過剰な欲望へと駆り立てることもあるでしょう。 この曲の主人公は、日本で一番、資本主義が発達している「東京」で車を走らせながら、成功への決意を固めています。 MV まずは、こちらのミュージックビデオをご ...
2022.11.11（更新日: 2025.08.24）
コンポーネント、v-for、v-bind
コンポーネント v-for v-bind について書いていきます。 https://github.com/ki-hi-ro/my-vue-js/tree/main/vue-js-3 コンポーネント my-componentについて考えていきましょう。 HTML my-componentです。 JS MyComponentが定義されています。 画面 JSで定義されたtemplat ...
2022.11.11（更新日: 2023.06.25）
引っ越しするタイミングで、ネット回線の切り替えを行います
私は現在SoftBank光を使用していますが、11月18日に引っ越しをするタイミングで、NURO光に切り替えようと思います。 NURO光に切り替えようと思った理由 NURO光は、以前YouTubeでマコさんがおすすめしていたのもあり、気になっているためです。 お申し込み特典 また、お申し込み特典があったので切り替えようと思いました。 NURO 光 2ギガ （3年契約）プランの速 ...
2022.11.10（更新日: 2024.05.01）
名古屋でダンボールを捨てる方法
私は愛知県名古屋市に住んでいます。 今月14日に引っ越しをするのですが、ベランダに置きっぱなしになっているダンボールを捨てたかったです。 その方法を調べたので、まとめていきます。 どこに捨てれば良いのか？ 名古屋市のホームページには、以下のように書いてありました。 地域の集団資源回収について詳しく知りたいですね。 引っ越したときにもらったチラシを確認してみる 名古屋に引っ越した ...
2022.11.09（更新日: 2022.11.09）
WordPressテーマを移行する際の手順と注意点
先ほど、クラウドワークスでこのような案件がありました。 WordPressのテーマを移行する際の手順と注意点について、調べたことも踏まえて書いていきます。 手順 いつでも戻せるように既存テーマのバックアップを取っておく 新規テーマをアップロードする ライブプレビューで表示確認する 崩れなどがある場合は修正する 新規テーマを有効化する いつでも戻せるように既存テーマのバックアップ ...
2022.11.09（更新日: 2025.08.24）
Vue.jsのバージョン、Evan Youさんの趣味、v-model
Vue.jsのバージョン Evan Youさんの趣味 v-model について書いていきます。 Vue.jsのバージョン 2013年12月8日の0.6.0から、バージョンアップを繰り返しています。 Evan Youさんの趣味 また、コードネームには日本のアニメの名前が使用されており、3.0.0には「ONE PIECE」という名前が付いていました。 Vue.jsの作者の「Evan ...
2022.11.08（更新日: 2023.03.24）
サウナの効果
最近疲れが溜まっていたので、昨日サウナに行ってきました。 以下のような効果を実感しました。 今朝は5時くらいに自然に目が覚めて、気分爽快です。 寝つきが良くなる理由 主に以下の理由が挙げられます。 深部体温が冷えるため 人間は、深部体温が冷えると眠くなります（参考: 養命酒のサイト） 90度くらいのサウナ室で体の芯まで暖まったあと、ゆっくりと体の表面に熱が逃げていくので、サウナ ...
2022.11.07（更新日: 2025.10.26）
今回の京都旅行でかかった費用
先日の土日に友達と1泊2日で京都旅行に行ってきました。 私たちは愛知県に住んでいます。 京都旅行をすると以下のようなお金がかかりました。 本記事ではその体験を踏まえて、1泊2日で京都旅行をするとどのくらいお金がかかるのかについて書いていきます。 総額 全部で35,000円ほどかかりました。 ただし、削ろうと思えば削れる出費はあります。 交通費 愛知から京都まで、行きは在来線、帰 ...
2022.11.06（更新日: 2025.06.29）
【WordPress】日付一覧ページで年を指定する方法
日付一覧ページのテンプレートファイル「date.php」で、投稿した年を指定する方法について書いていきます。 記事の取得は、get_postsで行っています（WP_Queryを使うやり方もあります）。 URLに含まれる投稿年の数字を取得する まずは、get_query_varでURLに含まれる投稿年の数字を取得します。 例えば、2020年3月の場合2020が取得されます。 引数 ...
2022.11.05（更新日: 2025.10.05）
【行きたい】京都のサウナについて調べてみた
京都に旅行に行くので、京都にあるサウナ施設について調べてみました。 その中から行ってみたいサウナを3つ紹介します。 また、おすすめのサウナ本も紹介します。 行ってみたいサウナ サウナ&カプセルホテル ルーマプラザ 値段はやや高めですが、京都駅から近いので行ってみたいです。 サウナガイドを見るとロッキーサウナと塩サウナ、屋上の露天風呂などがあり、充実していました。 goo ...
2022.11.04（更新日: 2025.03.12）
wp show posts
先ほどクラウドワークスでこのようなお仕事がありました。 私は「wp show posts」というプラグインを使ったことがなかったので、使ってみたいと思います。 wp show postsはどんなプラグイン？ 記事一覧を作成できるプラグインです（プラグインのページはこちら）。 プラグインを有効化してみた wp show postsを有効化したら、サイドバーに表示されました。 記事 ...
2022.11.03（更新日: 2025.08.24）
CDNから直接Vueを使用する方法、宣言的レンダリング、リアクティビティー（カウンター）
CDNから直接Vueを使用する方法 宣言的レンダリング リアクティビティー（カウンター） について書いていきます。 サンプルコード index.htmlをブラウザで開くと、サンプルが表示されます。 https://github.com/ki-hi-ro/my-vue-js/tree/main/vue-js-1 このようなサンプルです。 CDNから直接Vueを使用する方法 以下の ...
2022.11.03（更新日: 2023.02.20）
【Google AdSense】要注意 – 収益に重大な影響が出ないよう、ads.txt ファイルの問題を修正してください。
GoogleAdSenceの管理画面で、「要注意 – 収益に重大な影響が出ないよう、ads.txt ファイルの問題を修正してください。」と警告が出ていました。 この記事では、ググりながら解決に向けて取り組んだ過程を書いていきます。 解決方法の概要 ググった結果、以下のことが分かりました。 解決方法の実践 それでは、サーバーにads.txtをアップするという方法で解決 ...
2022.11.03（更新日: 2023.01.05）
レスポンシブコーディングではコンテナをしっかりと設定しよう
私はこれまでにWEBサイトのレスポンシブコーディングを行ってきました。 レスポンシブコーディングとは、スマホ・タブレット・ノートパソコン・大きい画面などの様々な画面幅に対応させるコーディング手法です。 レスポンシブコーディングを行う上で重要なことはいくつかありますが、この記事では、コンテナをしっかりと設定しましょうというお話をしていきます。 コンテナとは 例えば、MUJI HO ...
2022.11.02（更新日: 2023.01.05）
名古屋でPCR検査を無料で受けてきます
今週の土日に友達と京都へ旅行に行きます。 泊まるホテルが「きょうと魅力再発見旅プロジェクト」の対象で、このプロジェクトの参加条件に、PCR検査を受けることが含まれていました。 私は、PCR検査を受けたことがなかったので、その方法について調べていきます（名古屋市に住んでいます）。 PCR検査 名古屋でググる Googleで、「PCR検査 名古屋」で検索しました。 そして、愛知PC ...
2022.11.01（更新日: 2023.01.05）
無印の月額定額サービスでクレジットカードが有効期限切れになったので、対応しました。
私は、無印良品の月額定額サービスで「脚付きマットレス」を4年契約で借りています。 カードの有効期限が切れた 毎月600円をエポスカードで支払っていましたが、2022年の10月でエポスカードの有効期限が切れてしまいました。 決済エラーの連絡 そして、無印良品から決済エラーの連絡がきていました。 カード情報変更の申し込みをした 登録クレジットカード情報変更のお申し込みはこちらから申 ...

年月

タグ

↑

↑