プログラミング

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

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

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...
ハッシュ化とは?(かんたんな実装から) とりあえずのメモ

ハッシュ化とは?(かんたんな実装から)

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

[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...
子どもにとってのViscuitの魅力(プログラミング学習) とりあえずのメモ

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

小学3年生の子どもがプログラミングに興味を示したので、3つの候補(Scratch、Processing、Viscuit)を見せてみました。子どもが最も興味を示したのは Viscuit。ルールの小さな変更が大きな変化をもたらすダイナミックさが子どもにとって面白いようで、夢中で遊んでいます。「自分で作ったルールによって動く世界」。思い通りにならないことも学びにつながるのかも。YouTube動画でも話しています。プログラミング言語を選ぶ最近、小学3年生の子どもが「パソコンでプログラ...
【断念】WordPressでタイトルからアイキャッチ画像を自動生成したい(Auto Post Thumbnailプラグイン) とりあえずのメモ

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

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

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

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

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

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

リスト内の項目の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> 要素内のテキストは太字に...
[Cocoon]アイコンリストにステップ箇条書きのカスタムクラスを追加した とりあえずのメモ

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

これが普通のアイコンリストです。追加CSSクラスにstep-listを追加する全体が太字になる2行目はそのままリストタイトルの文字が大きくなる項目内の行間と項目間の余白が調整されるそこに、追加CSSクラスに「step-list」を入れて、アイコンを変更してみます。 追加CSSクラスにstep-listを追加する全体が太字になる2行目はそのままリストタイトルの文字が大きくなる項目内の行間と項目間の余白が調整されるstyle.cssに追加しました。/** step-listタグを...
[JavaScript]全選択で記事部分だけになるようにした とりあえずのメモ

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

自分のサイト内の記事全体を選択しやすいように、スクリプトを作りました。window.getSelection()テーマのjavascript.jsに以下のコードを追加しました。document.addEventListener('keydown', function(event) { if ((event.ctrlKey || event.metaKey) && event.key === 'a') { event.preventDefault(); const articl...
サイト内タグをハッシュタグ化っぽくした(functions.php) とりあえずのメモ

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

Google検索結果で、ハッシュタグ(#)を含む投稿が増えてきています。そのため、自分のサイトでもタグにハッシュマークを追加することにしました。functions.phpとstyle.cssを編集し、サイト内のタグがハッシュタグの形式で表示されるようにしました。
なぜかnoindexにしているはずのタグ一覧ページが検索結果に出てきた とりあえずのメモ

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

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

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

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

[Electron]今日の日付カレンダーアプリを作った(Calectron)

Electronを使用して、Windows 7のガジェットにあったカレンダーのようなアプリケーションを作成しました。このアプリケーションは、今日の日付と曜日を表示するだけのシンプルなものです。macOS風にデザインを変更し、タイトルバーを削除して、ウィンドウ全体をドラッグできるようにしました。Windows 7のカレンダーのようなアプリを作ったElectronで Windows 7の「ガジェット」にあったカレンダーのようなものを作りました。ただ、今日の日付・曜日を表示するだけ...
Electron, npm, nodeを久々に更新した(nvm) とりあえずのメモ

Electron, npm, nodeを久々に更新した(nvm)

npm、nodeを久々に更新しようとしたところ、ESMモジュールシステムと古いCommonJSモジュールシステムの競合によるエラーが発生しました。Node.jsとnpmのバージョンに互換性がない可能性があるため、Node.jsのバージョン管理ツールであるnvmをインストールしました。nvmを使ってNode.jsの最新LTSバージョンをインストールし、npmを10.7.0にアップデートすることで問題を解決しました。npmの更新通知久々にElectronプログラムを作ろうと、np...
[JavaScript]下にスクロールするとヘッダーメニューを半透明にするようにした プログラミング

[JavaScript]下にスクロールするとヘッダーメニューを半透明にするようにした

Xのタイムラインを見ていたら、画面のメニューバーの透過度が上下のスクロールに応じて変化していることに気づきました。少し下にスクロールすると半透明になり、少し上にスクロールすると元に戻っています。自分のサイトのヘッダーメニュー(mobile-header-menu-buttons)でも、このような処理をするように、JavaScriptを作りたいと思います。画面内の情報の表示範囲が増えるからです。javascript.jsとstyle.css機能ユーザーがページを下にスクロールす...
なぜオンライン版ExcelでエクスポートしたPDFが「JavaScriptの機能を使用している」の?(自動印刷処理) とりあえずのメモ

なぜオンライン版ExcelでエクスポートしたPDFが「JavaScriptの機能を使用している」の?(自動印刷処理)

オンライン版Excelからエクスポートした PDFで、JavaScriptの機能が使用されているという警告が表示されました。これは、PDFを開いたらすぐに印刷できるスクリプトが埋め込まれているためです。しかし、PDF内のJavaScriptにはセキュリティ上の懸念もあり、なるべくならオフにしておきたいです。追記:2024-08-01「印刷」から「PDFとしてエクスポート」したときには JavaScriptが埋め込まれているものの、「エクスポート」からPDFをダウンロードした場...
WordPressカスタムプラグインに日毎のPVを表示する機能を追加した プログラミング

WordPressカスタムプラグインに日毎のPVを表示する機能を追加した

WordPressプラグインに日毎のPVを表示する機能を追加しました。add_menuを追加自作のカスタムプラグインを使っています。今回は、そのプラグインに機能を追加します。※以前にプラグインを作成したのは、こちら。まず、新しいサブメニューページを chiilabo_stats_admin_menu関数内のadd_menu_page関数の引数に追加しました。add_submenu_page( 'chiilabo-stats', // 親メニューのスラッグ '日別PV', '日...
QRコード生成APIをGoogleからqrserver.comに変更した トラブルと対処

QRコード生成APIをGoogleからqrserver.comに変更した

ついに GoogleAPIsのQRコード生成APIが終了していたので、QR code generator(goqr.me)のAPIに変更しました。変更前: ' . $url変更後: ' . urlencode($url)前提: $url = get_the_permalink();URLをURLエンコードするのがポイントです。QRコードが表示されていない?このサイトの記事を印刷すると、その記事のQRコードが印刷されるように設定しています。ところが、久しぶりに印刷されたものを確...
[Cocoon] Amazonリンクに個別にPR表記をつける[CSS] とりあえずのメモ

[Cocoon] Amazonリンクに個別にPR表記をつける[CSS]

ちょっと商品紹介をしたいとき記事の中にちょっとAmazonの商品紹介を入れたいときがあります。記事全体がPRでもないので、記事先頭にPR表記を入れるのにも抵抗があります。そういうときのために、Amazonリンクに個別にPR表記をつけるようにCSSを変更しました。テーマのstyle.cssに以下のコードを追加しました。/** Amazonリンクに個別にPR表記をつける 2024-05-01*/.product-item-title::before { content: "[PR...
詐欺サイトはスマホを狙う(ユーザーエージェント) とりあえずのメモ

詐欺サイトはスマホを狙う(ユーザーエージェント)

クレジットカードなどの利用照会を装うメールから偽サイトに誘導する詐欺が横行しています。ところが、パソコンからアクセスすると適当な大手サイトにリダイレクトされました。スマートフォンからアクセスしたときだけ偽のログインページを表示するように、「ユーザーエージェント」という情報を使っていました。詐欺メールがスマートフォンを狙うのは、コンピュータ関係に詳しくない利用者が多い、と考えられているからでしょう。スマートフォンは手軽に使い始めることができますが、情報セキュリティについて自分で...
[WordPress] モバイル版の記事一覧の間隔を狭くした とりあえずのメモ

[WordPress] モバイル版の記事一覧の間隔を狭くした

モバイル版の記事一覧の間隔が狭くなるように、スタイルを調整しました。一度に 5記事から 8記事見えるようになりました。/** 記事一覧の密度を高くする 2024-04-26*/@media screen and (max-width: 480px) { .list { row-gap: 0; } .list.ecb-entry-border .entry-card-wrap { margin-bottom: 0; } .e-card-title { font-size: 16...
モバイルヘッダーロゴが中央になっていたので左に直した(Cocoon 2.7.3.1) とりあえずのメモ

モバイルヘッダーロゴが中央になっていたので左に直した(Cocoon 2.7.3.1)

スマホで自サイトを表示したら、ロゴの左端から中央に変わっていました。サイトロゴはもともとは中央で、自サイトでは以前にカスタマイズしていたところです。style.cssのロゴクラス(.mobile-menu-buttons .menu-button.logo-menu-button)に「justify-content: flex-start」を追加して戻しました。ちょうどCocoonテーマの更新で 2.7.3.1になっていました。環境WordPress:6.5.2、PHP:8....
[Cocoon] サイトロゴのリンク先をページ種類で変えた(WordPress) とりあえずのメモ

[Cocoon] サイトロゴのリンク先をページ種類で変えた(WordPress)

Cocoonテーマでサイトロゴのリンク先を変更したいと思って、 functions.phpをカスタマイズしました。add_filterで「'mobile_header_site_logo_url'」の処理で条件分岐するようにして、記事ページとトップページではブログ一覧に移動するように変更しました。ロゴのリンク先を分岐させたいサイト上のロゴを押したとき、通常はトップページに移行します。しかし、記事上に限ってはブログ一覧ページに移行するように変更しようと思います。以下のコードを ...
ChatGPTがS式を解釈する?(自然言語処理と構文解析) AIの話題

ChatGPTがS式を解釈する?(自然言語処理と構文解析)

「S式風のプロンプトの書き方が使えるかも?」という説を目にして、実験してみました。結果は、全く異なる構造のプロンプトを与えても、ほとんど同じ結果になってしまいました(GPT-4, Claude 3 Opus)。カッコをほとんど省いて「うまいこと」解釈しているようで、現状は修飾関係を明示するような用途では使えなさそうでした。生成AIは、もっともらしく動作します。だからこそ、うまくいくケースだけを与えて判断して、評価するのは危険ですね。エラーチェックや境界条件を調査することが、プ...
[Cocoon]タグ一覧から1記事しかないタグを除外した(WordPress) とりあえずのメモ

[Cocoon]タグ一覧から1記事しかないタグを除外した(WordPress)

WordPressのCocoonテーマのタグ一覧で、1記事しかないタグを非表示にするように、functions.phpのショートコードを修正しました。記事数が2以上のタグを降順で表示するようにしたら、タグ一覧がスッキリして関連記事を探しやすくなりました。生成AIでコードの修正案を生成したので、数分でできました。環境WordPress, Cocoonテーマさらにタグ一覧をカスタマイズした以前、WordPressサイトで記事のタグ一覧を表示するショートコードを作りました。しかし、...
どうして偽サイトに自分のロゴが使われていたのか?(ウェブAPI) とりあえずのメモ

どうして偽サイトに自分のロゴが使われていたのか?(ウェブAPI)

詐欺メールのリンク先の偽サイトを調べてみたら、自分のSNS用のアイコンが出てきて、ちょっとびっくりしました。ソースを読むと、Clearbit社のAPIを利用して、メールアドレスからロゴを動的に表示していたのです。また、最初の2回のログインを意図的に失敗させ、3回目に別のフォームサイトに誘導する、などの仕掛けもありました。フィッシング詐欺は年々手口が洗練されてきています。安全のためにも、普段からサイバーセキュリティについて学んでおくことが大切だと感じました。YouTube動画で...
Google Apps Script で値を変更したのに反映されない?(SpreadsheetApp.flush()) クラウド

Google Apps Script で値を変更したのに反映されない?(SpreadsheetApp.flush())

Google SpreadSheetのセルの値を変更したのに、関数などに反映されていないことがあります。関数の再計算をさせるには、その処理を追加する必要があります。SpreadsheetApp.flush();これは、スクリプト実行時は処理の効率化のために、関数の再計算が抑制されているからです。Googleスプレッドシートで、入力フォームからデータ表に追記するスクリプトを作成したのですが、印刷用フォームに反映されない不具合がありました。ただ、データ表を確認して元にシートに戻る...
WordPress 6.5にアップデートしたらブログカード内のURLに改行が追加されるようになった[Cocoon] とりあえずのメモ

WordPress 6.5にアップデートしたらブログカード内のURLに改行が追加されるようになった[Cocoon]

昨日、WordPress6.5にアップデートしたところ、ブログカードを再編集したときに、URLの間に空行が追加されることに気づきました。どうも、ブロックエディタのブログカード内での改行の仕様が変更になっているようです。Cocoon バージョン:2.7.2.5で修正されました。環境Cocoonバージョン: 2.7.2.3WordPress: 6.5ブログカードが妙に縦に伸びているブログカードに複数URLを挿入する運用をしています。WordPress6.5にアップデート後に、ブロ...
プログラミングを経験すると不具合に対処しやすくなる(プログラミング教育のメリット) ちいラボエッセイ

プログラミングを経験すると不具合に対処しやすくなる(プログラミング教育のメリット)

コンピューターと付き合う上で、プログラミングの経験は役に立ちます。プログラムを作ってみると、バグなしで完璧に動くコードを書くのは非常に難しいことがわかるからです。 プログラムの不完全さを理解していれば、コンピューターやアプリが思い通りに動かなくても、少なくとも落ち着いて対処できます。ちょっとした見過ごしで「大惨事」だったりします。これは、プログラミング教育のもたらす重要なメリットだと思います。コンピューターは正確に動く?プログラミング教育のメリットの1つとして、プログラムを不...
[Windows] ログインできないPCのデータを丸ごとコピーした(xcopy src dest /s /e /h /i /c) Windows

[Windows] ログインできないPCのデータを丸ごとコピーした(xcopy src dest /s /e /h /i /c)

データ復旧などでコマンドプロンプトからフォルダを丸ごとコピーしたいときは、「xcopy」というコマンドを使います。例えば、「xcopy c:\Users\username e:\data /s /e /h /i /c」と入力すれば、c:\Users\username を e:\data として丸ごとコピーできます。「/s」や「/e」などのオプションで、サブフォルダや隠しファイル、システムファイルをコピーするように指示しています。Windows REの「コマンドプロンプト」久し...
サイトを複製されたくないのでRSSフィードを非公開にした[WordPress] とりあえずのメモ

サイトを複製されたくないのでRSSフィードを非公開にした[WordPress]

複製サイトが情報源として「RSSフィード」を使っている事例に遭遇しました。そこで、WordPressサイトのRSSフィードを無効にすることにしました。functions.phpでRSSフィードを生成する処理をフックで置き換えます。WordPressサイトのRSSフィードを置き換えるコード公開されているコードを参考に、RSSフィードを無効化することにしました。function disable_our_feeds() { wp_die( __('<strong>Error:</s...