プログラミング

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

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

2024.12.17 2024.12.18

AIの話題とりあえずのメモパソコン基礎知識プログラミングホームページ運用追記予定の話

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

アカウント登録の練習用ダミーページをPHPで作成しました。このページでは、データを実際に送信せずにローカルで処理し、パスワード入力やフォーム検証の練習ができます。アカウント登録の練習用ダミーページを作ったブラウザで開いてパスワード入力を練習するためのページを作りました。練習用ページでは、実際のデータは送信されず、ローカルで処理されます。データの非保存：フォームのsubmitイベントをJavaScriptで制御し、実際にはデータを送信せず、ローカルで処理しています。フォーム検証...

2024.10.21

とりあえずのメモスマホ基礎セキュリティプログラミングホームページ運用

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

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

2024.09.22

とりあえずのメモプログラミングホームページ運用作業効率化

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

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

2024.09.20

とりあえずのメモセキュリティプログラミングホームページ運用

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

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

2024.09.18

とりあえずのメモプログラミングホームページ運用

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

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

2024.09.05

とりあえずのメモプログラミングホームページ運用

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

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

2024.08.31

とりあえずのメモプログラミングホームページ運用

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

JavaScriptを使用して目次のチェックボックス状態をCookieに保存するようにしてみました。ページ再読み込み後も状態を維持するためにイベントリスナーで設定しています。ちらつき防止のためのCSSも設定しました。JavaScriptコード前回は、サイドバーに目次を追加しました。チェックボックスの状態をJavaScriptを使ってCookieに保存し、ページを再読み込みした後もその状態を維持するようにしてみました。/** 2024-08-30 チェックボックスの状態を保存す...

2024.08.30 2024.08.31

とりあえずのメモプログラミングホームページ運用

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

記事一覧ページのモバイル表示を改善するためにCSSを調整しました。サムネイル画像を左側に配置し、正方形にすることで視認性を向上させました。記事間の余白を増やし、背景色を変更することで各記事の区切りを明確にしました。記事一覧ページのサムネイルを大きくした記事一覧ページを見やすくしたいと思いました。そこで、サムネイル画像を左にして正方形にしました。記事一つ一つのかたまりを意識できるように余白も増やしました。記事一覧ページのHTMLタグの構造記事一覧ページのHTMLタグの構造は、#...

2024.08.30

とりあえずのメモプログラミングホームページ運用

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

H2タグの前に番号を付けるために、WordPressの functions.php にカスタムスクリプトを追加しました。H2タグを検出し文字列を置き換える処理を、フィルターとして 'the_content'に追加します。H3タグでも同様に階層的な番号付けができます。

2024.08.30

とりあえずのメモプログラミングホームページ運用

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

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

2024.08.29 2024.08.30

とりあえずのメモプログラミングホームページ運用

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

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

2024.08.18 2024.09.04

Word・Excelなどとりあえずのメモプログラミング作業効率化

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

2つの事柄を対比して説明することが多いです。毎回、Keynoteで図解を作るのは大変。テキスト入力だけでかんたんに作成できると便利です。そこで、Cocoonテーマのアイコンリストを二項対立のスライドにするCSSを作りました。追加CSSクラスにslide dichotomyを入れるアイコンリストの追加 CSS クラスに「slide dichotomy」を入力すると、二項対立（dichotomy）のスライドになります。追加されたCSSポイントは、 display: flex; j...

2024.08.18 2024.08.19

とりあえずのメモプログラミングホームページ運用

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

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

2024.08.17

Windowsとりあえずのメモセキュリティニュースから考えるプログラミング

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

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

2024.08.15 2024.08.19

Macとりあえずのメモプログラミング作業効率化

「ドリフト現象」とは？（漂流するAI）

AI（人工知能）は、学習量が多くなればどんどん賢くなると思われています。しかし、実際には学習するほど「おかしな回答」をする「ドリフト現象」があります。AIの仕組みはとても複雑です。そのため、AIの一部を良くしようとすると、別の部分の性能が下がってしまうことがあります。学習するほど賢くなる、という単純なものじゃないんだね。「ドリフト」って何？「ドリフト」とは、利用しているうちに AI の回答精度が下がってしまう現象です。例えば、こんな感じです：以前はきちんと答えられていた質問に...

2024.08.15

AIの話題とりあえずのメモプログラミング

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

Excelの個人用マクロブックは自動読み込み時に排他制御の問題が発生し、警告メッセージが表示されることがあります。この問題を解決するために、マクロブックを読み取り専用モードで開くか、自動読み込みを無効にする方法があります。ただし、これらの解決策にはマクロの編集や利用に関して一定の制限があります。この警告ってわずらわしいよね。警告メッセージの原因（自動読み込みと排他制御）Excelを開いて個人用マクロブックが開かれているときに、エクスプローラーのプレビューで表示したり、Altキ...

2024.08.14 2024.08.15

Word・Excelなどとりあえずのメモプログラミング作業効率化

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

WordPressの画像ブロックにおいて、キャプションをalt属性に自動設定するカスタムスクリプトを作成しました。このスクリプトは、figcaptionタグ内のテキストを優先的にalt属性に設定します。functions.phpに追加することで、画像のアクセシビリティを向上させることができます。画像のキャプションをalt文字列に活用したいWordPressの画像ブロックには、キャプションを付けることができます。画像にAlt文字列が設定されていないときに、もしキャプションがあれ...

2024.08.11

とりあえずのメモプログラミングホームページ運用

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

「RSA暗号」は、数学的な性質を利用して秘密通信を可能にする暗号システムです。公開鍵と秘密鍵の組み合わせで、メッセージの暗号化と復号ができます。

2024.08.10 2024.08.13

わかりやすさ重視セキュリティプログラミング冊子テキスト

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

Cocoonテーマの「ブログカード」のカスタムCSSクラス「simple」の先頭に「【関連】」という文字を自動的に追加するようにしました。コードを整理して、よりスッキリとしたデザインに改善しました。「関連」という文字を先頭に追加したCocoonテーマのブログカードにCSSクラス「simple」を追加すると、文字リンクにするようにしています。このまえに「【関連】」という文字を自動的に追加するようにしました。.wp-block-cocoon-blocks-blogcard.sim...

2024.08.08

プログラミングホームページ運用

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

WordPressのブロックエディタに「書式のクリア」のショートカットキーを追加しました。functions.phpとcustom-editor.jsを使用して、Command+Jで「書式のクリア」をできるようにしました。「書式のクリア」のショートカットキーを追加したいWordPressのブロックエディターにControl+Spaceでテキストの書式をクリアするショートカットキーとして「Command+J」を追加しようと思います。ブロックエディタの「書式のクリア」は、そのほか...

2024.08.04

とりあえずのメモプログラミングホームページ運用作業効率化

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

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

2024.07.30 2024.07.31

Androidとりあえずのメモパソコン基礎知識プログラミング

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

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

2024.07.28 2024.08.11

とりあえずのメモプログラミングホームページ運用

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...

2024.07.20

とりあえずのメモプログラミングホームページ運用

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

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

2024.07.17

とりあえずのメモプログラミングホームページ運用

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

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

2024.07.16 2024.07.24

Macとりあえずのメモプログラミング

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

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

2024.07.14 2024.07.16

Macとりあえずのメモプログラミング

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

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

2024.07.11 2024.07.12

プログラミング

ハッシュ化とは？（かんたんな実装から）

「ハッシュ化」とは、単語や文章などを数値に変換する方法です。ハッシュ値を索引にデータを保存すると、長い情報も短い数字で表せるのでたくさんの情報を小さなスペースで管理できます。また、元の文字列には戻せない一方通行の変換ですが、同じ文字列からは同じハッシュ値になるので「照合」に使えます。ハッシュ関数とハッシュ化、ハッシュ値「ハッシュ化」とは、'apple'や'password123'といった文字列を、「10」や「63」のような数値に変換する方法です。長い文字列を短い数字で表現でき...

2024.07.03 2024.07.18

とりあえずのメモインターネット小話セキュリティプログラミング

[Cocoon] ブログカードを2列に並べるCSS

メッセージ動画の一覧を並べるために、Cocoonのブログカードに「thumbnail-only」のCSSクラスを追加しました。style.cssに以下のコードを追加しました。ポイントは、「display: flex」と「flex-wrap: wrap」です。/** 2024-07-01 ブログカードを2列に並べるCSS */.blogcard-type.thumbnail-only .blogcard-snippet{ display: none;}.blogcard-typ...

2024.07.01

とりあえずのメモプログラミングホームページ運用

子どもにとってのViscuitの魅力（プログラミング学習）

小学3年生の子どもがプログラミングに興味を示したので、3つの候補（Scratch、Processing、Viscuit）を見せてみました。子どもが最も興味を示したのは Viscuit。ルールの小さな変更が大きな変化をもたらすダイナミックさが子どもにとって面白いようで、夢中で遊んでいます。「自分で作ったルールによって動く世界」。思い通りにならないことも学びにつながるのかも。YouTube動画でも話しています。プログラミング言語を選ぶ最近、小学3年生の子どもが「パソコンでプログラ...

2024.06.28 2024.07.09

とりあえずのメモパソコン基礎知識プログラミング

【断念】WordPressでタイトルからアイキャッチ画像を自動生成したい（Auto Post Thumbnailプラグイン）

WordPressでタイトルからアイキャッチ画像を自動生成したかったのですが、結局断念しました。ざっと調べたものは、$55の有料版限定であったり、日本語の文字化けがあったりしたからです。この記事のアイキャッチ画像は、結局 Keynoteで作りました。Auto Post Thumbnailのダウンロード数が最多はてなブログなど、記事のタイトルがそのままアイキャッチになるサービスが便利そうです。SNSで見かけたときに、読みたくなります。WordPressでも同じようにできないか...

2024.06.23 2024.06.26

とりあえずのメモパソコン基礎知識プログラミングホームページ運用作業効率化

[CSS]ラベルボックスをスライド画像風にした

ふだんは、説明用の画像スライドを用意しているのですが、WordPress上で簡易版の文字スライドを作れるようにしました。まず、このようなラベルボックス（Cocoon汎用ブロック）を作ります。ラベルボックスのスライド化枠線を半透明のグレーに設定ラベル背景色を明るいベージュに変更要素の幅を内容に合わせて自動的に調整要素の左右の余白を自動的に調整これをカスタムクラス「slide」に追加します。ラベルボックスのスライド化枠線を半透明のグレーに設定ラベル背景色を明るいベージュに変更要素...

2024.06.17 2024.08.18

プログラミングホームページ運用

[CSS] 一行目以外にスタイルを設定するには？（否定擬似クラスには擬似要素を入れられない）

:not(::first-line)は無効になるtitle-listクラスのリスト要素（li）の各一行目を太字にしています。このCSSセレクタは、.title-list li::first-line 二行目以降にスタイルを設定したいと思いました。一見、::first-line 擬似要素を :not() 否定擬似クラスに入れれば、リスト項目の最初の行以外を選択するセレクタになりそうです。.title-list li:not(::first-line) しかし、これはうまくいきま...

2024.06.12

とりあえずのメモプログラミングホームページ運用

リスト内の項目の1行目だけを太字にする（::first-line 疑似要素）

CSSを使って要素内の最初の行だけを太字にできます。/** title-listクラスのリスト 2024-06-02*/.title-list li { font-size: 80%;}.title-list li::first-line { font-weight: 900; font-size: 120%; }li セレクターを使って、全ての <li> 要素のフォントウェイトを normal に設定しています。これにより、デフォルトでは <li> 要素内のテキストは太字に...

2024.06.02 2024.06.12

とりあえずのメモプログラミングホームページ運用

[Cocoon]アイコンリストにステップ箇条書きのカスタムクラスを追加した

これが普通のアイコンリストです。追加CSSクラスにstep-listを追加する全体が太字になる2行目はそのままリストタイトルの文字が大きくなる項目内の行間と項目間の余白が調整されるそこに、追加CSSクラスに「step-list」を入れて、アイコンを変更してみます。追加CSSクラスにstep-listを追加する全体が太字になる2行目はそのままリストタイトルの文字が大きくなる項目内の行間と項目間の余白が調整されるstyle.cssに追加しました。/** step-listタグを...

2024.06.02

とりあえずのメモプログラミングホームページ運用

[JavaScript]全選択で記事部分だけになるようにした

自分のサイト内の記事全体を選択しやすいように、スクリプトを作りました。window.getSelection()テーマのjavascript.jsに以下のコードを追加しました。document.addEventListener('keydown', function(event) { if ((event.ctrlKey || event.metaKey) && event.key === 'a') { event.preventDefault(); const articl...

2024.05.24 2024.08.14

とりあえずのメモプログラミングホームページ運用

サイト内タグをハッシュタグ化っぽくした（functions.php）

Google検索結果で、ハッシュタグ（#）を含む投稿が増えてきています。そのため、自分のサイトでもタグにハッシュマークを追加することにしました。functions.phpとstyle.cssを編集し、サイト内のタグがハッシュタグの形式で表示されるようにしました。

2024.05.18

とりあえずのメモプログラミングホームページ運用

なぜかnoindexにしているはずのタグ一覧ページが検索結果に出てきた

noindexにしたはずのタグ一覧ページが検索結果に表示されていました。原因を調べたところ、タグページ自体ではなく、そのフィードページがインデックスに残っていたことが分かりました。問題を解決するために、functions.phpにコードを追加し、フィードページをnoindexにしました。サイト内検索でタグページが出てきた自分のサイト内検索を行ったところ、タグによる記事一覧ページが検索結果に表示されていました。タグによる記事一覧は情報量が少なく、「低品質コンテンツ」とみなされる...

2024.05.18 2024.05.23

とりあえずのメモプログラミングホームページ運用

zshでエラーでbrewの更新が必要だった（compinit）

zshの自動補完機能に関するエラー「zsh compinit: insecure directories, run compaudit for list. 」が発生したため、解決方法を調べました。compauditコマンドでパーミッションを確認し、chmodコマンドで修正を試みましたが、新たなエラーが発生しました。Homebrew Caskの再インストールを行ったところ、無事にエラーが解決し、自動補完機能が正常に動作するようになりました。zshの自動補完機能に関するエラー久々...

2024.05.15

Macとりあえずのメモプログラミング

1 2 … 4