プログラミング

[WordPress]「子テーマ」の構造と自作する方法 とりあえずのメモ

[WordPress]「子テーマ」の構造と自作する方法

WordPressの子テーマは親テーマをもとに作られたカスタマイズ用の追加テーマで、テーマのアップデート時にも自分の変更内容を保持できます。子テーマを作るには主にstyle.cssとfunctions.phpの2つのファイルが必要で、親テーマとの連携にはTemplateの指定が重要です。作成した子テーマはZIP形式に圧縮してWordPressの管理画面からアップロードすると簡単にインストールできます。子テーマとは何か?WordPressの「子テーマ」は、「親テーマ」をもとに作...
[macOS]バックスラッシュ用のキーが反応しない? Mac

[macOS]バックスラッシュ用のキーが反応しない?

macOSでは「¥」と「\」が区別されており、外付けキーボードで両方を使い分けたいと考えました。Ergodoxにキーマッピングを試みましたが、キーコードの解釈がmacOS側で行われるため意図した挙動になりませんでした。最終的にGoogle日本語入力の設定で「¥」を「\」に変更することで対応しましたが、「¥」の入力が不便になってしまいました。外付けキーボードの「¥ |」「\ _」キーを使い分けたい最近、プログラミングの機会が増え、「\」を入力したいことが増えました。いちいち「¥...
[VS Code]関数を丸ごと切り取るには?(折りたたみやアウトライン) とりあえずのメモ

[VS Code]関数を丸ごと切り取るには?(折りたたみやアウトライン)

VS Codeでは関数の折りたたみと切り取りを特定のショートカットキーで操作できます。関数全体の選択はCtrl+Shift+\で行い、折りたたみはCtrl+Shift+[またはCtrl+K Ctrl+0を使います。コードを整理すると大きなプログラムの編集効率が上がります。関数単位で切り取りたいVS Codeで「関数を切り取り」をスムーズにする方法はある?関数をまとめて閉じる(折りたたむ)には? text { fill: #333333; font-family: 'Meiry...
もっとも原始的なWordPressのバックアップ(ダウンロード) とりあえずのメモ

もっとも原始的なWordPressのバックアップ(ダウンロード)

WordPressサイトの手動バックアップは、FTPクライアントを使ったファイルのダウンロードとサーバのphpMyAdminを使ったデータベースのエクスポートの2つの作業が必要です。バックアップしたファイルとデータベースは日付をつけて外付けハードディスクやクラウドストレージに保存し、定期的に更新すると安心です。手動バックアップは技術的知識が必要ですが、プラグイン不要でサーバー負荷が少なく、特に小規模サイト運営者に適しています。手動バックアップの基本知識WordPressサイト...
「SVG」とは?(Scalable Vector Graphics) プログラミング

「SVG」とは?(Scalable Vector Graphics)

「SVG」は拡大縮小しても画質が変わらないベクター形式の画像です。SVGファイルはテキスト形式でXMLで書かれており、メモ帳などで編集できます。ウェブサイトのロゴやアイコン、様々な画面サイズに対応する必要があるデザインに適しています。SVGは、テキスト形式の画像なので、生成AIとの相性もよいです。SVGとは(拡大できる図形の設計図)スマートフォンで画面を大きく拡大したとき、画像がぼやけてしまうことがあります。だけど、ウェブサイトのロゴやアイコンの中には、どれだけ拡大してもくっ...
TimeBlock – 空き時間をパッと共有できるタイムテーブルツール とりあえずのメモ

TimeBlock – 空き時間をパッと共有できるタイムテーブルツール

TimeBlockは予定の詳細を隠しながら空き時間だけを画像で共有できるシンプルなウェブアプリです。タッチ操作でブロックを配置し、5段階の色分けで予定の重要度を表現できます。LINEやTwitterなどに直接共有でき、複数人でのスケジュール調整に最適です。TimeBlockを使ってみる: TimeBlockアプリの概要と目的「今日いつ会える?」というLINEのメッセージをもらって、Googleカレンダーをチェックしたものの、予定の詳細を知られたくなくて手入力で空き時間を伝える...
[macOS]ファイル名の先頭に作成日時を追加するBashスクリプトの作り方 Mac

[macOS]ファイル名の先頭に作成日時を追加するBashスクリプトの作り方

macOSでファイル名の先頭に作成日時を追加するBashスクリプトを作成しました。このスクリプトは実際のファイル作成時刻を取得し、既にタイムスタンプがついたファイルは処理をスキップします。環境依存はありますが、時系列での文書管理がより簡単になる実用的なツールです。生成AIを使うとスクリプトはすぐに出来上がります。しかし、実際に使うと細かな注意点(境界条件)が出てきます。スクリプト内のコマンドの特徴を知っておくと、補足して仕上げるのがスムーズです。 text { font-fa...
AIとの対話でタイムテーブル作成ツール「TimeBlock」を作ってみた AIの話題

AIとの対話でタイムテーブル作成ツール「TimeBlock」を作ってみた

タイムテーブル作成ツール「TimeBlock」を作りました。これは、生成AI(Claude 3.7 Sonnet)との対話で開発し、単一HTMLファイルからあっという間に複雑なモジュール構造まで発展できました。生成AIを活用すると、プログラミングの基礎知識をもとに、機能的なウェブアプリケーションが短期間で開発できます。生成AIで「テコの原理」がはたらく「プログラミングの基礎知識」って何なんだろうね。これまでの試行錯誤の経験なのかな。オンラインツールTimeBlockを作った週...
[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...
[macOS]シェルスクリプトをFinderから実行するときの注意点(作業フォルダ) Mac

[macOS]シェルスクリプトをFinderから実行するときの注意点(作業フォルダ)

macOSのシェルスクリプトをFinderから実行するためには、拡張子を.commandに変更する必要があります。ただし、実行時のカレントディレクトリはユーザディレクトリになってしまうため、cd $(dirname $0)でスクリプトのあるフォルダに移動する必要があります。この方法を使うことで、Finderから直接シェルスクリプトを実行し、作業フォルダ内にファイルを作成することができます。 text { fill: #333333; font-family: 'Meiryo'...
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暗号」は、数学的な性質を利用して秘密通信を可能にする暗号システムです。公開鍵と秘密鍵の組み合わせで、メッセージの暗号化と復号ができます。