IT技術からアニメまで様々な情報をストックするサイバーメモ帳(備忘録)です。
IT技術からアニメまで様々な情報をストックするサイバーメモ帳(備忘録)です。
TL;DR / CSS の問題 / ITCSS / 参考
環境 / 方法 / まとめ
[Next.js] Qiita と Zenn の 記事一覧(フィード)を取得する方法
やりたいこと / 環境 / フィードの仕様 / 実装
[Next.js] Google Adsenseを表示させる方法
環境 / 条件 / 方法
[HTML] meta keywords の記述は SEO として不要
meta keywords とは / meta keywords と SEO との関係性 / meta keywords を記述したままで良いのか / まとめ
竈門炭治郎とは / 完成品 / 実装方法 / 解説 / 〆
IEからEdgeへの強制転送設定を個人サイトに適応してもらった話
ことの発端 / IE から Edge への転送とは / IE 非互換リストへの追加申請手順 / 申請時の流れ / まとめ
[Twitter Cards] meta name=[twitter:label1]を調べる
背景 / twitter:label1 や twitter:data1 とは何か / 検証 / まとめ
huskyのフックがGit GUIクライアントで有効にならない時の対処方法
背景 / 原因 / 解決方法 / 余談 / 参考
huskyのフックがGit GUIクライアントで有効にならない時の対処方法
背景 / 原因 / 解決方法 / 余談 / 参考
[GitHub Actions] Github Pagesをcron的に定期的に自動デプロイする方法
背景 / 環境 / 方法
[GitHub Actions] Github Pagesをcron的に定期的に自動デプロイする方法
背景 / 環境 / 方法
[BBIQ光インターネット] 台風後に回線が繋がらなくなった時の対処法
環境と状況 / モデムとルーターを確認 / 確認項目 / サポートへ電話 / 業者訪問
環境と状況 / モデムとルーターを確認 / 確認項目 / サポートへ電話 / 業者訪問
[Excel] コロン区切りの時間(12:34)を時間単位に変換する方法
背景 / Excel / スプレッドシートで計算する
背景 / Excel / スプレッドシートで計算する
[Nuxt.js] asyncDataの値をhead()から取得するとundefinedになる問題
環境 / 状況 / 解決方法
[Nuxt.js] asyncDataの値をhead()から取得するとundefinedになる問題
環境 / 状況 / 解決方法
[HTML] メールアドレス・電話番号などの入力フォームのUXを考える
背景 / 各項目の仕様 / フォームの機能 / 参考
[HTML] メールアドレス・電話番号などの入力フォームのUXを考える
背景 / 各項目の仕様 / フォームの機能 / 参考
[OGP画像] ブログ記事タイトルを含んだ画像を自動生成する方法
概要 / 環境 / 方法
[OGP画像] ブログ記事タイトルを含んだ画像を自動生成する方法
様々な情報をストックするサイバーメモ帳
userAgent を利用して取得する方法 / 1 行で取得する方法
様々な情報をストックするサイバーメモ帳
[JavaScript] 外部HTMLを読み込んでDOM上へ展開する方法
様々な情報をストックするサイバーメモ帳
[Google Fonts] 読み込みのパフォーマンスを向上させる方法
display=swap / 読み込みスクリプト / 参考
[Google Fonts] 読み込みのパフォーマンスを向上させる方法
様々な情報をストックするサイバーメモ帳
WIP: [CSS設計] YUKICSS - ITCSSベースのCSSアーキテクチャ
主に影響を受けている CSS 設計・思想 / 命名規則 / 構成レイヤー / おわり
WIP: [CSS設計] YUKICSS - ITCSSベースのCSSアーキテクチャ
様々な情報をストックするサイバーメモ帳
[PHP] DOMDocumentでloadHTMLして文字化けする時の対処方法
状況 下記のコードを実行した際にマルチバイト文字が文字化けする。 // h2 要素のみ取り出し$content = '<h2>見出し</h2><p>文章</p>';$headings = [];$dom =
[JavaScript] 指定ページのみで発火させるスクリプトの構成
使用する想定状況 / 準備 / 使用方法 / 大まかな仕様
[JavaScript] 指定ページのみで発火させるスクリプトの構成
使用する想定状況 EC サイトにおける、商品一覧・商品詳細・カートページでそれぞれ固有の処理を走らせたい。 ただし、商品一覧(item-list.js)・商品詳細(item-detail.js)・カートページ(cart.js)を言ったように各ファイルを用意するのではなく、1
バックエンドから返却される規定画像要素に対してLazyload(遅延読み込み)をフロントエンドだけで実現させる
Lazyload(遅延読み込み)とは / 実施条件(縛り) / 実装 / 参考
バックエンドから返却される規定画像要素に対してLazyload(遅延読み込み)をフロントエンドだけで実現させる
Lazyload(遅延読み込み)とは 例えば、大量の画像の読み込みが必要なページの場合、大量の画像の読み込みはページレンダリングのボトルネックになりやすく、ページの 初期表示の遅延の原因となる ことが多い。こういったページの 初期表示の高速化につなげる手法 として「 Lazy
template 要素とは / template 要素の特徴 / 使い方 / その他
template 要素とは HTML のコンテンツテンプレート ( <template> ) 要素 は、すなわちページの読み込み時にすぐには描画されないものの、後で JavaScript を使用してインスタンスを生成できる HTML を保持するメカニズム
ejsファイルをPrettierでフォーマット実行する際の覚書
前提 ejs は、HTML と <% %> を混在させて使用する。だが、Prettier は ejs のフォーマットに対応していないため、 html フォーマットをかける必要がある。 prettier --parser html --write src/**/
[Git] masterへforce pushしてしまった状態を元に戻す方法
想定状況 git push origin master をした後に master ブランチへ意図しない状態になっている。 方法 $ git reset --hard origin/master@{1}
[Git] リモートブランチや履歴を維持したまま別リポジトリへコピーする方法
背景 既存リポジトリから新規リポジトリへのお引越し案件。リポジトリを複製するようなイメージ。 手順 下記をそれぞれ作成しておくことになる。 git@github.com:サンプル/既存リポジトリ.git git@github.com:サンプル/新規リポジトリ.
CSS 設計のために、改めて BEM について考えてみた。 BEM の基本的な記法に加えて、踏み込んで触ってみて実感した使い方やノウハウなどを記載する。 BEM とは BEM は、検索エンジンの Yandex が使っている CSS の設計方法らしい。(実際、Yandex
[WordPress] REST APIの投稿項目をフィルターする方法
WP REST API は、パラメータによってレスポンスを変えることができる。 以前は filter[key] みたいなパラメータでフィルタリング出来ていたが、現状使えない模様。 環境 確認した環境はこちら WordPress 5.2 実現方法 通常の取得方法
自分の理解のために再構成しつつ記載している。 Flux のアーキテクチャを知る Vuex は、 Flux (+ Redux ・ The Elm Architecture )から影響を受けているため、Flux のアーキテクチャを知れば、Vuex を理解しやすくなるだろう。
準備 ユーザーの作成 WIP package.json の作成 npm init で package.json を作成する。 既に存在している場合でも正しい形に直してくれるので、対話式で進めていく。 通常 npm init スコープモジュール 名前空
Babel 6からBabel 7へアップグレードした際の覚書
概要 ややレガシー気味のプロジェクト内の Babel 6 から Babel 7 へのアップグレードした。 アップグレードの期待としては、処理時間の改善(最適化)や今後のアップデートへの対応が柔軟に行えるようになることである。 プロダジェクト環境の概要 単一リポジトリ内に複
[JavaScript] 不正なセレクタをエスケープする際の対処法
セレクタとして不正な文字 まず数値から始まるセレクタは使用できない。 かつ、下記の文字列は先頭に限らず使用することは出来ない。 ~ ! @ $ % ^ & * ( ) _ + - = , . / ' ; : " ? > < [ ] {
[Nuxt.js] アンカーリンクの遷移が動作しない場合の対処方法
状況 ページ内アンカーリンクがある - #foo , #bar … アンカーリンクをクリックするとページ内遷移ではなく、ルートページに移動してしまう 原因 nuxt.config.js に設定されている router.base が原因だった(未設定でも下記の
[html-webpack-plugin] テンプレート内でifを使って出力を制御する方法
背景 webpack の plugin である html-webpack-plugin を使って、html を出力しているが、同テンプレートでも案件によって微妙に出力差が出てきたため、フラグなどで制御したい。 各種モジュールの導入方法などは割愛する。 方法 コード
[JavaScript] 日付のフォーマットをyyyy/mm/ddにする方法
背景 moment.js や date-fns を使っていたが、単純な日付のフォーマット変換に関して、巨大なライブラリを必要としないので自前で実装をする。 結果として、少なくとも 10KB ほどあったサイズが数バイトで済んだ。 実装 仕様 yyyy/mm/dd
紺青の拳のダジャレクイズ 出題者 阿笠博士 問題 シンガポールで一番人気のあるイベントは? 国歌斉唱 旧正月のお祝い 国旗掲揚 マリーナベイ花火大会 答え 国旗掲揚 国旗の支柱は、芯がポール(シンガポール)だから
状況 同一マシン内で GitHub アカウントが複数存在している状態。 (社用とプライベートでアカウントを分けている等) コマンド 対象リポジトリへ移動して下記を実行。 git config --local user.name 名前git config --local
Photoshopの文字設定をCSSに落とし込む手順とツール
だいたい Photoshop のままだけれど、行送り・トラッキングはそのままではないので変換が必要になる。 相互関係 Photoshop CSS フォントサイズ font-size 行送り line-height トラッキング
[Nuxt.js] nuxt generateのパフォーマンスを改善させる方法
背景 Netlify でのデプロイ時に nuxt generate でのビルド時間が 10 分かかっていた。(route 数は 475) nuxt generate のパフォーマンスを改善させたい。 nuxt-generate-cluster nuxt-genera
「ブログリーダー」を活用して、hiroさんをフォローしませんか?