はてなブックマーク

macOSの環境設定ファイルおよび構成ファイルでは、アプリケーションまたはプロセスの属性、つまりプロパティを指定するために、プロパティリスト（plist）が使用されます。 例えば、ユーザのホームフォルダの「ライブラリ/Preferences/」フォルダ内に、Finder用の環境設定plistがあります。このファイルには、「com.apple.finder.plist」という名前が付いています。plistのデフォルトの命名規則では、配布者の逆引きDNS名の後ろにアプリケーション名またはプロセス名が付加され、さらに.plist拡張子が付加されます。 プロパティリストを編集するには、defaults コマンドラインツールを使用します。defaultsコマンドは強力なツールです。特に、変更したいプロパティリスト内のキーと値が具体的に分かっている場合には、defaultsツールが非常に効率的です。

Vue の基本的な使い方 (5) Pinia を使って状態管理 Pinia を利用すると、複雑な Vue 3 の状態管理（コンポーネント間のデータの受け渡しやデータの共有など）が簡単に行なえます。以下は Pinia の基本的な使い方についての解説のような覚書です。 関連ページ Vue の基本的な使い方 (1) Options API Vue の基本的な使い方 (2) Composition API Vue の基本的な使い方 (3) Vite と SFC 単一ファイルコンポーネント Vue の基本的な使い方 (4) Vue Router ルーティング Vue の基本的な使い方 (6) Vue3 で簡単な To-Do アプリを色々な方法で作成 Vue の基本的な使い方 (7) Vue Router と Pinia を使った簡単なアプリの作成 Pinia とは Pinia とは、Vue で扱うグ

Debounce と Throttle（JavaScript） Debounce と Throttle は一定期間に関数が呼び出される回数を制限することで、パフォーマンスや UX を改善するための手法です。 以下は JavaScript の Debounce と Throttle の使い方に関する覚書です。 関連ページ：JavaScript デコレータ関数 Decorator Function Debounce や Throttle とは リサイズやスクロールイベントなど高い頻度で発生するイベントで、イベントが発生する度にコールバック関数を呼び出して実行するとブラウザに負担がかかったり、UX 上好ましくない場合があります。 Debounce や Throttle は、一定期間に（コールバック）関数が呼び出される回数を制限するための手法で、不必要な関数の実行を制御することができます。 例えば

Intersection Observer API の使い方 Intersection Observer API は特定の領域を監視して指定した要素がその領域に入ったかどうかを検知してくれる JavaScript の API です。 例えば、スクロールして要素が画面上に現れた時にアニメーションを開始したり、スクロールスパイ（要素が表示されている位置に対応するリンクをハイライトする）などの機能を比較的簡単に実装できます。 スクロールを検出する方法とは異なり、パフォーマンス的にも優れていて、主なモダンブラウザで利用することができます。can i use IntersectionObserver IE など古いブラウザに対応するには polyfill が必要です。 その他の Observer のページ ResizeObserver の使い方 MutationObserver の使い方 Inter

参考元：Moving to zsh, part 2: Configuration Files /etc/ 内のファイルは、それらが存在する場合、すべてのユーザーに対して起動されます。 .z から始まるファイルは個々のユーザー専用の設定ファイルです。 デフォルトでは zsh はホームディレクトリのルート（＄HOME）でユーザーの .z から始まるファイルを探しますが、この動作は、ZDOTDIR 環境変数で別のディレクトリに変更できます。 また、ターミナルを起動したときに立ち上がるシェルのことをログインシェル、コマンドラインで bash や zsh と入力した時に起動するシェルのことをインタラクティブシェルと呼びます。 bash の場合は、ログインシェルに .bash_profile を、インタラクティブシェルに .bashrc を使用するので、.bashrc を .bash_profile

CSS だけでコンテンツをフィルタリング CSS のみを使ってコンテンツをフィルタリングする例です。 以下のようにラジオボタンを選択すると、ラベルに表示された内容と一致するコンテンツを表示します。 以下の例では表示するコンテンツは単に div 要素にスタイルを設定したものですが、同様の方法で画像ギャラリーやカードなどをフィルタリングすることができます。 サンプル（別ページで開く） 以下が上記の例の HTML のマークアップです。 フィルタのラジオボタンを１つのグループとして認識させるため name 属性に共通の名前（categories）を各 input 要素に指定します。 ラベルをクリックしてもラジオボタンが選択されるように（明示的なラベル付け）するため、label 要素の for 属性にラジオボタンの id 属性と同じ値を指定します。 初期状態で「全て（All）」のラジオボタンが選択さ

JavaScript でアニメーション Web Animation API Web Animation API を使うと JavaScript で DOM 要素のアニメーションを実装することができます。 現時点（2022年3月）ではほぼ主要なモダンブラウザで使用できるようになっています。 can i use Web Animation API 以下は Web Animation API の基本的な使い方の解説とサンプルです。 animate() メソッドや Animation()、KeyFrameEffect、getComputedTiming() などの基本的な使い方やアニメーションの制御、アニメーションイベント、プロミス、getAnimations() を使った CSS アニメーションの取得方法、Mortion Path や SVG アニメーションなどについて。 Web Animati

全ページで共通する部分を外部ファイル化 ヘッダーやナビゲーション、フッターなど全ページで共通する部分を外部ファイル化して各ページで読み込むようにすることで、共通ファイルを変更すれば、全てのページに変更を反映させることができます。 外部ファイル化はパーツ化やコンポーネント化などとも言いますが、共通する部分を別のファイルにして PHP の include や require を使って読み込むようにします。 最初の例は同じ階層にある4つのページ（about.php、contact.php、index.php、news.php）で構成されています。 . ├── about.php ├── contact.php ├── css │   └── style.css ├── favicon.ico ├── images │   ├── logo.svg │   └── sample_01.jpg ├─

SVG アニメーション（SMIL）関連の仕様などの情報 SVG 1.1 仕様 （第２版） アニメーション 日本語訳 Scalable Vector Graphics (SVG) 1.1 (2nd Edition) Animation SMIL Animation 日本語訳 SMIL 3.0 Animation SVG DOM SVG DOM インタフェース SVG 1.1（第２版）スクリプト MDN animate MDN animateTransform MDN animateMotion SVG アニメーション（SMIL）関連の参考サイト MDN SVG animation with SMIL svg要素の基本的な使い方まとめ 12.アニメーション svg要素の基本的な使い方まとめ 15.スクリプティング atmarkit SVGで図形やアニメを描画してみよう SVGアニメーションの現

基本的な実装方法 以下が大まかな手順です。 Google マップで目的地を検索して表示 「共有」をクリック 「地図を埋め込む」をクリック 「HTML をコピー」をクリック コピーした HTML を表示したい位置にペースト（貼り付け） Google マップの HTML を取得 Google Maps （https://www.google.com/maps/?hl=ja）を開いて左上の入力欄に表示したい場所の名前や住所を入力して目的地の地図を表示し、「共有」をクリックします。 「地図を埋め込む」をクリックします。 地図のプレビュー画面が表示されます。iframe タグの左に表示されている「中」をクリックすると表示するマップのサイズを変更することができます。 小、中、大のいずれも縦横比は4：3で、単位は px （ピクセル）です。 小： 400 X 300 中： 600 X 450 大： 800

Instagram グラフ API で投稿画像（タイムライン）を一覧表示（埋め込み） ホームページにインスタグラムのタイムライン（一覧）を埋め込む方法について。 Instagram グラフ API を使ってインスタグラムで投稿した画像やビデオの一覧（タイムライン）を Web ページに表示する方法の解説です。API を利用するための無期限のアクセストークンと Instagram ビジネスアカウント ID の取得方法や取得したデータをを使って PHP で投稿の画像やキャプション、いいねの数やコメント数を表示する方法など。 概要 インスタグラムで投稿した画像などのメディアを取得してウェブに表示するには「Facebook for Developers」で提供されている Web API を使います。 以下では Instagram グラフ（Graph）API を利用してインスタグラムの一覧をWebペー

WordPress を静的サイトの一部としてインストール（共存） 以下は、静的サイトの一部として WordPress をインストールして共存させる方法についての覚書です。 概要 サイト全体を WordPress で構築するのではなく、例えば、お知らせやブログを WordPress で作成し、その他のページは静的ファイルで構成するなど、サイトの一部として WordPress をインストールして使用する（共存させる）ことができます。 サイトの一部として WordPress を使用する場合、WordPress をドキュメントルートではなく、サブディレクトリにインストールすることができ、以下のような使い方があります。 WordPress を単純にサブディレクトリにインストール WordPress をサブディレクトリにインストールしてサイトアドレスを変更 1. 単純にサブディレクトリにインストール

Bootstrap 5 のビルドで DEPRECATION WARNING: Using / for division is deprecated CATEGORY: HTML/CSS 2021年5月22日 【追記】 バージョン 5.1.3 では sass での除算の代わりに乗算を使用する（例えば 1/4 にするには 0.25 を掛ける）ように変更されて、 Warning は出ないように改善されています。 関連ページ：SASS の使い方（除算とスラッシュ） npm パッケージ を使って Bootstrap 5 をインストールしてビルドする際に sass のパッケージのバージョンにより以下のような Warning が出てしまうようです。 DEPRECATION WARNING: Using / for division is deprecated and will be removed in

CSS clip-path や mask-image の仕様などについては以下のサイトで確認することができます。 CSS Masking Module Level 1（日本語訳） CSS Masking Module Level 1（W3C） CSS Shapes Module Level 1（日本語訳） CSS Shapes Module Level 1（W3C） MDN CSS マスク 以下で clip-path や mask-image 関連のブラウザの対応状況を確認できます。 can i use: clip-path can i use: mask-image 関連ページ： HTML SVG の基本的な使い方 SVG アニメーション（SMIL を使ったアニメーション） Photoshop で SVG CSS マスキング mask-image の使い方 CSS Shapes / sh

Node.js を Mac にインストール（nodebrew の使い方） 以下は Homebrew と nodebrew を使って Mac に Node.js をインストールする方法と nodebrew の基本的な使い方、Node.js のごく基本的な使い方（REPL、-e オプション、ファイルの実行方法など）についての覚書です。 概要 nodebrew は Node.js のバージョン管理ツールです。nodebrew を使うと複数のバージョンの Node.js を切り替えて利用することができます。 nodebrew 以外にも nodenv や nvm などの Node.js のバージョン管理ツールがあります。nodenv はディレクトリごとに利用するバージョンを切り替えることができるので、そのような環境が必要な場合は nodenv などの使用を検討した方が良いかも知れません。 もしすでに

HTML SVG の基本的な使い方（SVG入門） SVG の基本的な使い方に関する覚書です。 HTML ファイルに直接 svg 要素を記述するインライン SVG の使い方（viewBox の説明や動作確認サンプル、基本図形要素、fill と stroke、スタイルの設定、グループ化を行う g 要素や再利用可能な部品の定義に使う defs 要素、図形などのひな形を定義するための symbol 要素、マーカー、変形、グラデーション、パターン、クリッピングやマスキング）や SVG ファイルの最適化などの基本的な事項をまとめています。 以下は2020年12月時点での内容になります。仕様などに関しては変更になる可能性があります。 関連ページ： SVG アニメーション（SMIL を使ったアニメーション） CSS clip-path の使い方 CSS マスキング mask-image の使い方 Phot

ファイルの作成 この例ではファイルの作成及び JavaScript 環境の構築は create-block を使って行っています。 カスタムブロックをプラグインとして作成するので、ターミナルでプラグインディレクトリに移動して npx コマンド「 npx @wordpress/create-block 」を実行します。 以下では対話モードで実行していますが、slug とオプションを指定して実行することもできます。 関連ページ：Gutenberg ブロック開発の環境構築 $ npx @wordpress/create-block return //create-block を対話モードで実行 npx: 217個のパッケージを33.092秒でインストールしました。 //対話的にオプションを設定 //ファイルの出力先ディレクトリ名に使用される文字列（slug）を指定 ? The block slu

nano -? return Usage: nano [OPTIONS] [[+LINE,COLUMN] FILE]... Option GNU long option Meaning -h, -? --help Show this message +LINE,COLUMN Start at line LINE, column COLUMN -A --smarthome Enable smart home key -B --backup Save backups of existing files -C <dir> --backupdir=<dir> Directory for saving unique backup files -D --boldtext Use bold instead of reverse video text -E --tabstospaces Convert t

JavaScript Promise / Async Function の使い方 JavaScript の Promise や Async Function（async/await）を使った非同期処理の基本的な使い方についての解説のような覚書です。 同期処理と非同期処理 プログラムの処理は同期処理（sync）と非同期処理（async）に分類することができます。 同期処理は記述されたコードを順番に処理し、1つの処理が終了すると次の処理を実行します。そのため、どれかの処理に時間がかかるとその処理が終了するまでその次の処理に進むことができません。 以下の oneSecMsg() は1秒経過したらメッセージを表示して終了する関数で、この関数を実行すると1秒間処理がブロックされます。 以下を実行すると、「Start」とすぐに表示され、oneSecMsg() により同期的にブロックされ1秒後に「一秒経

WordPress Gutenberg ブロックの作成 ブロックエディタ Gutenberg で独自のブロックタイプを作成（自作）するための基本的なことについての覚書です。 以下は(旧)ブロックの作成 チュートリアル（削除予定）などの古い情報を参考にしているため部分的に古い情報になっています。 2024年時点での情報でのカスタムブロックの作り方は以下を御覧ください。 WordPress インスタ表示用カスタムブロックの作成 WordPress Highlight.js カスタムブロックの作成 WordPress Highlight.js カスタムブロック サンプル 環境構築などはせずに、独自のブロック（カスタムブロック）を作成する方法を掲載しています。内容的には主に日本語の公式リファレンスの「ブロック」を元にしています。 以下で作成するブロックは単純なもので、JSX も使用しないので環境構

Node.js の exports と module.exports Node.js を使ったモジュールのエクスポートとインポート、require、exports、module.exports についての覚書です。以下は Node.js がインストールされていることを前提にしています。 Node.js では CommonJS (CJS) フォーマットが使われ、モジュールとその依存ファイルの定義には require と exports や module.exports を使います。 参考サイト：Understanding module.exports and exports in Node.js また、 CommonJS モジュールとは、Node.js 環境での JavaScript のモジュール化の仕組みです。 参考サイト：JavaScript Primer/CommonJSモジュール r

webpack を使って Sass をコンパイルする方法 Sass を webpack を使ってコンパイルする方法の覚書です。webpack は JavaScript だけではなく、CSS や Sass をバンドルすることができます。 webpack 5 で新しく導入された Asset Modules など内容を version 5 に合わせて書き換えました。また、PostCSS Preset Env の使い方も追加しました（2022年1月5日）。 以下は Node.js がインストールされていることを前提にしています。また、主なパッケージのバージョンは以下になります（環境は Mac での例になります）。 sass（dart-sass）：1.45.2 webpack：5.65.0 webpack-cli：4.9.1 webpack-dev-server：4.7.2 node: 16.13.

レンダリングを妨げるリソースの除外/CSSを非同期で読み込む PageSpeed Insights や Chrome の拡張機能 Lighthouse を使ってページをテストすると「レンダリングを妨げるリソースの除外」という項目が表示されることがあります。 この項目が表示される原因の1つは CSS ファイルの読み込みなどのレンダリングブロックによる表示の遅延です。 以下はレンダリングをブロックする CSS ファイルの読み込みを最適化してページの表示速度を改善させる方法と WordPress で CSS を非同期で読み込む方法の覚書です。 レンダリングのブロック 以下はあるサイトのページを PageSpeed Insights でテストした結果の一部抜粋です（同様のテストは Chrome の拡張機能 Lighthouse でも可能です）。 「改善できる項目」が複数表示されていて、その中に「レ

WordPress スライダーを表示するブロックの作成 WordPress のブロックエディタ Gutenberg でスライダーのプラグイン Swiper を使ってスライダーを表示するカスタムブロックの作り方についての覚書です。 以下は(旧)ブロックの作成 チュートリアル（削除予定）などの古い情報を参考にしているため部分的に古い情報になっています。 ブロックの基本的な作成方法や環境の構築方法については以下を御覧ください。 関連ページ カスタムブロック MediaUpload で複数の画像を挿入 スライダーでアイキャッチ画像を表示するブロックを作成 Gutenberg ブロックの作成（JSX を使用しない場合） Gutenberg ブロック開発の環境構築 JSX を使った Gutenberg ブロックの作り方 ダイナミックブロックの作り方 カスタムカードブロックの作り方 Code-Prett

WordPress 関連リンク JavaScript ビルド環境のセットアップ（@wordpress/scripts） @wordpress/create-block パッケージ ブロックの作成 チュートリアル（create-block） JavaScript Build Setup（英語） @wordpress/create-block（英語） Create a Block Tutorial（英語） @wordpress/scripts (wp-script) npm 関連リンク @wordpress/scripts @wordpress/create-block 関連ページ Node.js を Mac にインストール（nodebrew の使い方） npm の基本的な使い方 webpack の基本的な使い方 React を使ってみる（基本的な使い方） このページ以外にも以下のようなブロッ

WordPress JSX を使った Gutenberg ブロックの作り方 WordPress のブロックエディタ Gutenberg で JSX を使って独自のブロックを作成する方法について。 JSX を使用するための環境構築は @wordpress/scripts（wp-scripts）を使っています。基本的なブロックの作成方法、JSX の基本的な使い方、WordPress のコンポーネントの使い方、webpack.config.js を使った環境のカスタマイズ（複数のエントリーポイントの設定方法）などについての覚書です。 以下は(旧)ブロックの作成 チュートリアル（削除予定）などの古い情報を参考にしているため部分的に古い情報になっています。 以下はすでに Node.js がインストールされていて、WordPress のローカル環境が設定済みであることを前提にしています。また、コマンド