プログラミング

[WordPress]アイキャッチ画像を最適化してページ表示速度を改善しようとした(LCP) とりあえずのメモ

[WordPress]アイキャッチ画像を最適化してページ表示速度を改善しようとした(LCP)

アイキャッチ画像のファイルサイズを小さくしつつ表示サイズを維持することで、WordPressサイトの表示速度を改善できます。子テーマのfunctions.phpに専用コードを追加すると、LCPの値が16,130ミリ秒から15,380ミリ秒へと少し短縮できました。理想的な表示速度にはまだ達していないため、サーバー応答時間の改善やLazy Load設定の見直しなど追加対策も必要です。 .title { font-size: 24px; font-weight: bold; fil...
[WordPress] ウィジェット構造をMarkdown形式で出力するプラグインを作ってみた とりあえずのメモ

[WordPress] ウィジェット構造をMarkdown形式で出力するプラグインを作ってみた

WordPressのウィジェットは便利ですが、いじっているうちに「前はどうなっていたっけ?」という状況になることがあります。そんな時に役立つ、ウィジェットの構造をわかりやすく記録できるプラグインを作りました。このプラグインを使うと、現在のウィジェット配置とその設定内容をMarkdown形式で出力できます。WordPressのウィジェット構造をメモしたいWordPressでウェブサイトを作っているとき、サイドバーやフッターにあるウィジェットの調整は頻繁に行います。しかし、調整し...
WordPressの古いリビジョンをまとめるカスタムプラグインを作った とりあえずのメモ

WordPressの古いリビジョンをまとめるカスタムプラグインを作った

WordPressの古いリビジョンを整理するカスタムプラグインを作成しました。このプラグインは一週間以上前のリビジョンから日ごとに最新の一つだけを残し、データベースの肥大化を防ぎます。管理画面からリアルタイムで進行状況を確認でき、毎日自動実行されるため効率的なサイト管理ができます。WordPressの記事保存の処理は、体感ではそこまで速くはなりませんでした。編集履歴を管理するプラグインを作ったWordPressで記事を保存する処理が遅くなってきた気がします。リビジョン(編集履...
[Windows 11]コマンドプロンプトとWindows Terminal, PowerShell Windows

[Windows 11]コマンドプロンプトとWindows Terminal, PowerShell

コマンドプロンプトとはWindows 11には、テキストベースのコマンドでシステムを操作できるツールがあります。それが「コマンドプロンプト」(cmd.exe)です。コマンドプロンプトは、Windows 11に最初から入っているテキスト入力式の操作画面です。Windows回復環境(Windows RE)でも利用できるので、トラブル時の修復ツールとしても活用されます。普段使っている画面(グラフィカルユーザーインターフェース、略してGUI)とは違い、文字を打ち込んでパソコンに指示を...
ふつうの文章をAIエディタで書く方法(Cursor) AIの話題

ふつうの文章をAIエディタで書く方法(Cursor)

Cursorは、「AI連携機能を追加したエディタ」で、文の補完や修正、AIパネルでの対話など便利な機能があります。これは、プログラミングだけでなく文章作成の全般にも役立ちます。無料プランでも「プレミアムAIモデルでの修正や対話は月50回まで」などの回数制限がありますが、基本機能は使えます。Cursorはプログラミングだけじゃない「Cursor」は、AI機能を組み込んだテキストエディタです。Visual Studio Codeをベースに開発されているのでプログラマ向けに見えます...
ポメラの代替として「Caret」(Chromebookのオフラインエディタ) いろんな周辺機器

ポメラの代替として「Caret」(Chromebookのオフラインエディタ)

Caret と Caret Mod は、Chromebookで完全オフラインで動作するテキストエディタです。文書作成に特化したポメラの代替デバイスとして、Chromebookを利用できます。Caret Mod は日本語向けに最適化され、メニューの日本語化や日本語フォントの組み込みなど、日本語環境での使いやすさが向上しています。Caret はChromebookで動く「ポメラ」について調べていたら、「ChromeBookにエディタCaret Modを入れる」という手もあることを...
[WordPress]カスタムプラグインで投稿文字数の自動集計機能を追加した とりあえずのメモ

[WordPress]カスタムプラグインで投稿文字数の自動集計機能を追加した

WordPressの投稿文字数を日々集計し、データベースに保存するプラグインを作成しました。従来は集計画面表示時のみ実行されていた処理を、記事保存時に自動実行するように改善しました。下書き保存時の処理は負荷を考慮して省略し、公開・更新・削除時のみ実行する仕様としました。
AutoHotkeyのかんたんな使い方(Windowsのキー操作で自動処理) Windows

AutoHotkeyのかんたんな使い方(Windowsのキー操作で自動処理)

AutoHotkeyは、スクリプトを作成してキーに処理を割り当てるツールです。カスタムのショートカットキーで、Windowsでの作業効率を向上させることができます。AHKスクリプトには、変数、関数、メッセージボックスなどの機能があり、キー操作で複雑な処理を自動化できます。AutoHotkeyのインストールと設定公式サイト(autohotkey.com)からAutoHotkeyをダウンロードして、インストールします。v2.0以降とそれ以前(v1.1)でスクリプト構文にも違いがあ...
[WordPress]ウィジェットタイトルを非表示にするCSS とりあえずのメモ

[WordPress]ウィジェットタイトルを非表示にするCSS

WordPressの管理画面で多数のウィジェットを区別しやすくするため、タイトルをつけると便利です。しかし、管理用のタイトルがサイト上で表示されてしまうのは困ります。これは簡単なCSS設定で解決でき、サイト運営の効率が向上しました。ウィジェットタイトルの表示設定についてWordPressサイトでは、多数のウィジェットを配置していると、管理画面での区別が難しくなることがあります。各ウィジェットに管理用のタイトルをつければ楽です。しかし、サイト上でも表示されてしまうため、これまで...
WordPressの編集画面での差し替えた画像が古い状態で表示される?(画像キャッシュ) とりあえずのメモ

WordPressの編集画面での差し替えた画像が古い状態で表示される?(画像キャッシュ)

WordPressの画像キャッシュ問題により、差し替えた画像が古い状態で表示されることがあります。これは、ブラウザのキャッシュと画像URLの仕様が主な原因でした。キャッシュが読み込まれないように、functions.phpに管理者用に JavaScriptのコードを追加して、動的に画像URLにタイムスタンプを付与するようにしました。WordPressの画像キャッシュ問題WordPressでサイトを運営しているのですが、差し替えた画像ファイルをプラグイン(Media Clean...
Mac

[macOS] Emacsで^Hをバックスペースにする設定

macOSのターミナルでEmacsを使用する際に、バックスペースの設定が必要になりました。global-set-keyコマンドを使用して、C-hキーをバックスペースとして機能するように設定しました。その他にもautocomplete.elの問題があり、さらなるメンテナンスが必要な状況です。^H をバックスペースにする久しぶりに macOSのターミナルで Emacsを起動したら、^H をバックスペースにする設定が違っていました。確か以前はこれで動いていたはずなのですが、(glo...
シェルスクリプトをFinderで実行する(作業フォルダ) Mac

シェルスクリプトをFinderで実行する(作業フォルダ)

macOSのシェルスクリプトをFinderから実行するためには、拡張子を.commandに変更する必要があります。ただし、実行時のカレントディレクトリはユーザディレクトリになってしまうため、cd $(dirname $0)でスクリプトのあるフォルダに移動する必要があります。この方法を使うことで、Finderから直接シェルスクリプトを実行し、作業フォルダ内にファイルを作成することができます。シェルスクリプトを実行可能にするmacOSでシェルスクリプトを実行するには、chmod ...
AIプログラミングでタイピング練習ゲームを作った AIの話題

AIプログラミングでタイピング練習ゲームを作った

HTMLとCSS、JavaScriptでシンプルなタイピング練習ゲームを作りました。インストール不要でブラウザから動作し、シンプルで読み込みが早いことを目指しました。(公開サイト)AIプログラミングで工夫した点(仕様書とファイル構成)Claude 3.5 Sonnetで作成していったのですが、すぐにチャットの文字数上限になってしまいます。続きをプログラムしようにも、一からやり直しになってしまいます。そこで、チャット上限に近づいたら、「プログラム仕様書とファイル構成」を.md(...
アカウント登録の練習用ダミーページを作った(PHP) とりあえずのメモ

アカウント登録の練習用ダミーページを作った(PHP)

アカウント登録の練習用ダミーページをPHPで作成しました。このページでは、データを実際に送信せずにローカルで処理し、パスワード入力やフォーム検証の練習ができます。アカウント登録の練習用ダミーページを作ったブラウザで開いてパスワード入力を練習するためのページを作りました。練習用ページでは、実際のデータは送信されず、ローカルで処理されます。データの非保存:フォームのsubmitイベントをJavaScriptで制御し、実際にはデータを送信せず、ローカルで処理しています。フォーム検証...
ブロックエディタを狭い画面で表示するときの文字サイズを小さくした とりあえずのメモ

ブロックエディタを狭い画面で表示するときの文字サイズを小さくした

ブロックエディタを狭い画面で表示する際の文字サイズを小さくしました。画面幅1080px以下の時に、文字や余白を調整するカスタムCSSを追加しました。これにより、AI画面を表示させた狭い画面でも、文章の全体像が見やすくなりました。ブラウザにサイドバーを表示すると「狭い」ブラウザのサイドバーにAI画面などを表示させると作業がスムーズになるものの、表示画面は狭くなります。特に、WordPressのブロックエディタを使っているときに、文章の全体像が見えにくく感じます。一時的にサイドバ...
WordPressにSVG画像をアップロードできるようにした(functions.php) とりあえずのメモ

WordPressにSVG画像をアップロードできるようにした(functions.php)

WordPressではセキュリティ上の理由からSVGファイルのアップロードが制限されています。functions.phpにカスタム関数を追加すれば、ブログエディタでのSVGアップロードを許可できます。ただし、アップロードを許可する場合、リスクも認識しておくことが大事です。「このファイルタイプ(SVG)をアップロードする権限がありません」WordPressにSVGファイルをアップロードしようとしたらエラーになりました。このファイルタイプをアップロードする権限がありません。fun...
[Cocoon] ブログカードのHTML構造でCSSを整理した(style.css) とりあえずのメモ

[Cocoon] ブログカードのHTML構造でCSSを整理した(style.css)

Cocoonテーマのブログカードの追加CSSを整理しました。ブログカードのHTML階層構造とメディアクエリで順序立ててまとめました。スタイルを追加するときは、はじめから構造を意識しておけばよかったね。style.cssに追加コードを整理したいstyle.cssに追加コードが増えて来たので、整理したいと思います。ただし、優先順位の問題があるので、並び順やCSSクラスの重ねた修飾の仕方も重要です。ブログカードの階層構造Cocoonテーマのブログカードは、HTMLの階層構造になって...
[WordPress]ランダムな記事へのボタンを追加した(functions.php) とりあえずのメモ

[WordPress]ランダムな記事へのボタンを追加した(functions.php)

過去の記事を「掘り起こして」読んでもらう仕掛けとして「ランダムな記事へのボタン」を追加しました。WordPressブログにランダムな記事へのボタンを追加するカスタムウィジェットを作成しました。きっかけは、ブログの「アーカイブ」としての機能を強化したいと思ったからです。カスタムウィジェットを作成するPHPコード前の記事、ランダムな記事、次の記事へのリンクを表示するカスタムウィジェットを作りました。WordPressテーマのfunctions.phpファイルの末尾に追加したら、ウ...
[CSS]Amazonリンクをnote風に画像を大きくした とりあえずのメモ

[CSS]Amazonリンクをnote風に画像を大きくした

Amazonリンクをnoteのデザインを参考に、画像を大きくして説明文を省略しました。CSSを更新して、デスクトップとモバイル両方での表示を変更し、商品名、画像、ボタンのレイアウトを調整しました。Amazonリンクのスタイルを変更Amazonリンクのスタイルを変更しました。今回は noteを参考にして、画像を大きくし、説明文を省略するようにしました。Amazonリンクの例↓更新後のCSS/** amazon リンク * ブログカードに寄せた * * 2024-08-31 no...
[JavaScript]目次の開閉状態をCookieで記憶させた とりあえずのメモ

[JavaScript]目次の開閉状態をCookieで記憶させた

JavaScriptを使用して目次のチェックボックス状態をCookieに保存するようにしてみました。ページ再読み込み後も状態を維持するためにイベントリスナーで設定しています。ちらつき防止のためのCSSも設定しました。JavaScriptコード前回は、サイドバーに目次を追加しました。チェックボックスの状態をJavaScriptを使ってCookieに保存し、ページを再読み込みした後もその状態を維持するようにしてみました。/** 2024-08-30 チェックボックスの状態を保存す...
[CSS]モバイル版の記事一覧ページを見やすくした(style.css) とりあえずのメモ

[CSS]モバイル版の記事一覧ページを見やすくした(style.css)

記事一覧ページのモバイル表示を改善するためにCSSを調整しました。サムネイル画像を左側に配置し、正方形にすることで視認性を向上させました。記事間の余白を増やし、背景色を変更することで各記事の区切りを明確にしました。記事一覧ページのサムネイルを大きくした記事一覧ページを見やすくしたいと思いました。そこで、サムネイル画像を左にして正方形にしました。記事一つ一つのかたまりを意識できるように余白も増やしました。記事一覧ページのHTMLタグの構造記事一覧ページのHTMLタグの構造は、#...
[WordPress] H2タグの文字の前に番号を追加するカスタムスクリプト(functions.php) とりあえずのメモ

[WordPress] H2タグの文字の前に番号を追加するカスタムスクリプト(functions.php)

H2タグの前に番号を付けるために、WordPressの functions.php にカスタムスクリプトを追加しました。H2タグを検出し文字列を置き換える処理を、フィルターとして 'the_content'に追加します。H3タグでも同様に階層的な番号付けができます。
[WordPress] ウィジェットエリアを転用して左サイドバーにした(CSS) とりあえずのメモ

[WordPress] ウィジェットエリアを転用して左サイドバーにした(CSS)

WordPressサイトで、ワイド画面の左側の空きスペースを活用し、目次を左サイドバーとして表示するカスタマイズを行いました。このカスタマイズは、使っていないウィジェットエリアを、CSSで転用して実現しています。画面幅に応じて表示を切り替える仕組みも導入し、小さな画面では従来の記事内目次を表示するようにしました。すぐに見出しに飛びたいパソコンで記事を読んでいるときに、スムーズに見出しに移動できるように、左サイドに目次を追加しました。従来の目次は、導入文の後(1つ目の見出しの前...
[Excel VBA] ブックの各シートをひとまとめにするVBAコード Word・Excelなど

[Excel VBA] ブックの各シートをひとまとめにするVBAコード

1つのシートにまとめるマクロを作った大きな名簿などは、シートを分けて管理することがあります。しかし、差し込み印刷などでは1つのシートにまとめる必要があります。そこで、エクセルブックを開いて各シートの内容をまとめるマクロブックを作りました。VBAコードマクロを実行すると、指定したブックの全シートのデータがマクロブックのシート1にコピーされます。Sub CombineSheets() Dim wb As Workbook Dim ws As Worksheet Dim destW...
[Cocoon] アイコンリストで二項対立のスライドを作るCSS とりあえずのメモ

[Cocoon] アイコンリストで二項対立のスライドを作るCSS

2つの事柄を対比して説明することが多いです。毎回、Keynoteで図解を作るのは大変。テキスト入力だけでかんたんに作成できると便利です。そこで、Cocoonテーマのアイコンリストを二項対立のスライドにするCSSを作りました。追加CSSクラスにslide dichotomyを入れるアイコンリストの追加 CSS クラスに「slide dichotomy」を入力すると、二項対立(dichotomy)のスライドになります。追加されたCSSポイントは、 display: flex; j...
[Windows]IPv6に整数アンダーフローで不正コード実行の脆弱性があった(CVE-2024-38063) Windows

[Windows]IPv6に整数アンダーフローで不正コード実行の脆弱性があった(CVE-2024-38063)

2024年8月13日、Windowsの通信処理に重大な「脆弱性(バグ)」が見つかりました。ユーザーが何も操作しなくても、悪意のあるデータを受信すると悪意のあるコードを実行されてしまう、「ゼロクリック攻撃」の危険性があります。すでに Windows Updateでセキュリティ更新(KB5041571など)が提供されているので、早めにアップデートしておきましょう。要は「Windowsのセキュリティ面でバグがあったことがわかった」というのを、どうして「脆弱性(vulnerabili...
[Electron]連続コピーアプリを作ってみた(monclip) Mac

[Electron]連続コピーアプリを作ってみた(monclip)

Electronを使用してMac用のクリップボード記録アプリを作成しました。このアプリは、コピーした内容を自動的に記録していき、まとめて編集・利用できるようにします。ネットショッピングやレポート作成時の情報収集に便利で、簡単な操作で使用できます。クリップボード記録アプリを作った自分のMac用に「クリップボード記録ツール(monclip:Monitor Clipboard)」を作りました。パソコンで文字をコピーするたびに、その内容を自動的に記録してくれます。(ダウンロード:動作...
「ドリフト現象」とは?(漂流するAI) AIの話題

「ドリフト現象」とは?(漂流するAI)

AI(人工知能)は、学習量が多くなればどんどん賢くなると思われています。しかし、実際には学習するほど「おかしな回答」をする「ドリフト現象」があります。AIの仕組みはとても複雑です。そのため、AIの一部を良くしようとすると、別の部分の性能が下がってしまうことがあります。学習するほど賢くなる、という単純なものじゃないんだね。「ドリフト」って何?「ドリフト」とは、利用しているうちに AI の回答精度が下がってしまう現象です。例えば、こんな感じです:以前はきちんと答えられていた質問に...
[Excel]個人用マクロブックがロックされないように「読み取り専用」にするマクロのメリット・デメリット(ChangeFileAccess, xlReadOnly) Word・Excelなど

[Excel]個人用マクロブックがロックされないように「読み取り専用」にするマクロのメリット・デメリット(ChangeFileAccess, xlReadOnly)

Excelの個人用マクロブックは自動読み込み時に排他制御の問題が発生し、警告メッセージが表示されることがあります。この問題を解決するために、マクロブックを読み取り専用モードで開くか、自動読み込みを無効にする方法があります。ただし、これらの解決策にはマクロの編集や利用に関して一定の制限があります。この警告ってわずらわしいよね。警告メッセージの原因(自動読み込みと排他制御)Excelを開いて個人用マクロブックが開かれているときに、エクスプローラーのプレビューで表示したり、Altキ...
[WordPress]画像キャプションをalt属性を自動設定するカスタムスクリプト(functions.php) とりあえずのメモ

[WordPress]画像キャプションをalt属性を自動設定するカスタムスクリプト(functions.php)

WordPressの画像ブロックにおいて、キャプションをalt属性に自動設定するカスタムスクリプトを作成しました。このスクリプトは、figcaptionタグ内のテキストを優先的にalt属性に設定します。functions.phpに追加することで、画像のアクセシビリティを向上させることができます。画像のキャプションをalt文字列に活用したいWordPressの画像ブロックには、キャプションを付けることができます。画像にAlt文字列が設定されていないときに、もしキャプションがあれ...
手計算でわかる、秘密鍵と公開鍵の「使い方」(RSA暗号) わかりやすさ重視

手計算でわかる、秘密鍵と公開鍵の「使い方」(RSA暗号)

「RSA暗号」は、数学的な性質を利用して秘密通信を可能にする暗号システムです。公開鍵と秘密鍵の組み合わせで、メッセージの暗号化と復号ができます。
ブログカード抜粋の先頭に「関連」を付けた プログラミング

ブログカード抜粋の先頭に「関連」を付けた

Cocoonテーマの「ブログカード」のカスタムCSSクラス「simple」の先頭に「【関連】」という文字を自動的に追加するようにしました。コードを整理して、よりスッキリとしたデザインに改善しました。「関連」という文字を先頭に追加したCocoonテーマのブログカードにCSSクラス「simple」を追加すると、文字リンクにするようにしています。このまえに「【関連】」という文字を自動的に追加するようにしました。.wp-block-cocoon-blocks-blogcard.sim...
[WordPress]ブロックエディタに「書式のクリア」のショートカットキーを追加した(functions.php) とりあえずのメモ

[WordPress]ブロックエディタに「書式のクリア」のショートカットキーを追加した(functions.php)

WordPressのブロックエディタに「書式のクリア」のショートカットキーを追加しました。functions.phpとcustom-editor.jsを使用して、Command+Jで「書式のクリア」をできるようにしました。「書式のクリア」のショートカットキーを追加したいWordPressのブロックエディターにControl+Spaceでテキストの書式をクリアするショートカットキーとして「Command+J」を追加しようと思います。ブロックエディタの「書式のクリア」は、そのほか...
Androidはもっとも普及したLinux(抽象化と隠蔽とインターフェース) Android

Androidはもっとも普及したLinux(抽象化と隠蔽とインターフェース)

Androidは、Linuxの技術をベースにしていますが、その複雑さを隠蔽することに成功しています。この「隠蔽」には、ポジティブな意味があり、使いやすいインターフェースを提供することで一般向けに普及しました。技術が社会で広く一般化されるには、「シンプルに見せること」と「そのまま見せること」という、「わかりやすさ」の両面のバランスを取ることが大事です。Androidって、あんまり「Linuxっぽさ」を感じないよね。けど、だからこそ普及したと思うとなんか複雑だね。Androidの...
[WordPress]記事内の画像のalt属性を見出しから自動設定した(functions.php) とりあえずのメモ

[WordPress]記事内の画像のalt属性を見出しから自動設定した(functions.php)

WordPressのアイキャッチ画像にalt属性を自動設定する方法を紹介します。functions.phpにカスタム関数を追加することで、空のalt属性に記事タイトルを設定します。この機能により、SEOとアクセシビリティの向上が期待できます。
WordPressのカスタムプラグインのエラー(get_postsのメモリ不足) とりあえずのメモ

WordPressのカスタムプラグインのエラー(get_postsのメモリ不足)

自作プラグインが動かなくなった原因は、サーバー処理のメモリ不足でした。 $posts = get_posts( array( 'post_type' => 'post', 'post_status' => array( 'publish', 'pending', 'draft', 'future'), 'orderby' => 'modified', /* date, modified */ 'numberposts' => -1 ) ); $count = 0; forea...
[WordPress] スラッシュインサータ用にブロックキーワードをJavaScriptで追加した(change-block-keywordsプラグインの代わり) とりあえずのメモ

[WordPress] スラッシュインサータ用にブロックキーワードをJavaScriptで追加した(change-block-keywordsプラグインの代わり)

WordPress 6.6のアップグレードにより、ブロックの検索キーワード設定機能が使えなくなりました。JavaScriptを使用して、子テーマに直接スラッシュインサータの機能を追加する方法を実装しました。add-block-keywords.jsというJavaScriptを追加して、functions.phpから読み込むようにしました。WordPress 6.6にしたらプラグインが動かなくなったWordPress 6.6にアップグレードしました。すると、ブロックの「高度な設...
[Processing] 簡易生態系シミュレーターを作っている Mac

[Processing] 簡易生態系シミュレーターを作っている

生態系のシミュレーションを行うProcessingプログラムを作っています(途中)。たまにこういうのをずっと眺めたくなります。(参考)人工生命とは (ジンコウセイメイとは) - ニコニコ大百科人工生命1 : 趣味とアルゴリズム(2013年03月30日)人工生命っぽいものを作る Part.1 - YouTube(2013/04/19)自らプログラムした「人工生命」の繁栄や攻防をシミュレーションできるソフトウェア「artificial life environment」 - GI...
Pythonの対話環境をインストールした(IDLE) Mac

Pythonの対話環境をインストールした(IDLE)

Pythonの対話環境IDLEをインストールしました。IDLEは初心者にも使いやすい、Pythonに標準で付属する開発環境です。IDLEでは、簡単な計算や関数定義が手軽にでき、日常的な計算に便利です。日常的な計算は Excel とかでもいいよ。個人的にはプログラムがさっと書けるのが好みなので IDLEを入れました。PythonをインストールしたPythonのIDLEをインストールしました。(参考)Download Python | Python.orgこれで、macOS用のア...
Pythonで動くハッシュ可視化プログラムを作った プログラミング

Pythonで動くハッシュ可視化プログラムを作った

Processingのハッシュ可視化プログラムProcesing(Pythonモード)で動くハッシュ可視化プログラムを作りました。コードはPythonで記述しています。完成したコード# ハッシュ可視化プログラム# グローバル変数input_string = 'apple'current_char_index = 0current_hash = 0animation_state = 0animation_progress = 0box_size = 50char_y = 50c...