プログラミング

[Cocoon] 表のデフォルトの枠線が黒になっている(style.min.css) とりあえずのメモ

[Cocoon] 表のデフォルトの枠線が黒になっている(style.min.css)

公開したブログ内の表の枠の色が、なぜか黒に変わっていました。原因は、「style.min.css」。この中に表(table)の枠線の色のスタイルがあるのですが、これが Cocoonのスタイルと競合しているのです。サイトの表の枠の色がおかしい?表の枠の色が、WordPressの編集画面ではオレンジなのに、公開すると黒になっていました。どうも、デフォルトの色に戻ってしまっているようです。Cocoonの表の枠の色Cocoonでは、テーマで選んだ色(サイトキーカラー)がスタイルでまと...
ウェブサイトの左下に動画広告が出てきたけどクリックして大丈夫?【オーバーレイ広告】 とりあえずのメモ

ウェブサイトの左下に動画広告が出てきたけどクリックして大丈夫?【オーバーレイ広告】

iPhone で情報サイトをみていたら、左下に広告動画(?)が表示されました。動画の停止ボタンをクリックしたのですが、この操作は大丈夫だったでしょうか?クリックしないで広告自体をスルーした方がよかったかと、ちょっと心配になりました。画面上に勝手に広告動画が出てくるので、「サイト乗っ取り」かと心配になりますが、これはただのネット広告。情報サイトと提携しているネット広告代理店による「オーバーレイ広告」が表示されているだけなのです。煩わしい広告ではありますが、通常 クリックしたから...
【人工知能】ChatGPTに質問してみたら、けっこう間違えもあった(アカウント登録の仕方) AIの話題

【人工知能】ChatGPTに質問してみたら、けっこう間違えもあった(アカウント登録の仕方)

話題になっている ChatGPT(chat.openai.com/chat) のアカウントを作成して、試してみました。まるで人間が答えたような回答を、すぐに出すのでびっくりしました。しかし、いろんな回答をよく読んでみると「滋賀を四国地方」と言ってみたり、あからさまな間違いも少なくありません。また、こちらから送った文章に機密事項が含まれている場合でも、ChatGPTはそれを学習して、別の人に回答してしまう可能性があります。いよいよ「検索の次の時代」が見えてきました。ただし、結局...
[Cocoon] 各見出し後に「目次に戻る」リンクを追加した(functions.php) とりあえずのメモ

[Cocoon] 各見出し後に「目次に戻る」リンクを追加した(functions.php)

ブログの中でもっともよくクリックされるのは、「目次」だそうです。各セクションに Cocoonの目次に対応した「戻る」ボタンを設置しました。参考サイトを元に、自分のブログに合うように一部修正しました。確かに、目次からサッと読みたいところを確認できるサイトは、とても便利ですよね。目次に戻るリンクを挿入するコードfunctions.phpに追加します。/** 自動で目次に戻るリンクを挿入 */add_filter('the_content', function($content) ...
Google スプレッドシートでスクリプトを使うには?【はじめてに多いエラー】 とりあえずのメモ

Google スプレッドシートでスクリプトを使うには?【はじめてに多いエラー】

Google SpreadSheetでは、「Google Apps Script(GAS)」というスクリプト言語で、プログラムによる自動処理することができます。スクリプトをはじめて試したときに出やすいエラーをまとめておきます。ちょうど、Excel の VBA みたいな感じですね。スプレッドシートの拡張機能まず、Googleにログインして、スプレッドシートを開きます。メニューにある「拡張機能」から「Apps Script」を選択します。スクリプトを入力するすると、スクリプトを記...
[Cocoon] 記事の関連タグをサイドバーに表示した・その2(ショートコードにできた) とりあえずのメモ

[Cocoon] 記事の関連タグをサイドバーに表示した・その2(ショートコードにできた)

結論としては、the_tag_links() ではなく、get_the_tag_links()を呼べばよかっただけでした。以前の方法の問題点以前、記事の関連タグをサイドバーに表示するときに、ショートコードにできず、テキストウィジェットでPHPコードを実行する、という方法でむりやり解決していました。ただし、この方法はウィジェットを確認するたびに、ビジュアル表示になって「コードが評価」されててまうため、作り直しが必要でした。ウィジェットを確認するだけで壊れてしまうのです……その後...
Cocoonで作った注目記事ランキングのショートコードを修正した とりあえずのメモ

Cocoonで作った注目記事ランキングのショートコードを修正した

Cocoonテーマのコードを利用して、自前の「注目記事ランキング」を作っていたのですが、更新によってエラーになってしまいました。改めて、コードを修正して直すことができました。サイトのPHPにエラーがある教室ホームページを見たら、ページにエラーが表示されて、レイアウトが崩れていることに気づきました。(2022年10月17日)。このサイトで重大なエラーが発生しました。WordPressのトラブルシューティングについては、こちらをご覧ください。このエラーは、WordPressサイト...
mvで移動できなかったのでよく見たら…【ファイル名先頭の-】 Mac

mvで移動できなかったのでよく見たら…【ファイル名先頭の-】

mvコマンドでファイルをまとめて移動しようとしたら、うまくいきませんでした。ファイル名の先頭が「-」のファイルが混じっていて、エラーになっていました。
Excelでセルを数えるカウント関数のポイント Word・Excelなど

Excelでセルを数えるカウント関数のポイント

Excelでは、セルを数える関数がいくつか用意されています。基本となるのは、COUNT関数です。ただ、注意点として 文字列は含まれないことを知っておく必要があります。COUNT関数が数えるのは、数値データだけです。「カウントしているのに「0」になる」というときは、文字列を数えようとしていることが多いです。文字列を含めたい場合は、COUNTA関数を使います。また、「○」など、入力値を指定して数えたい場合は、COUNTIF関数を使います。COUNTIF関数は、文字列を引用符(")...
[Cocoon]Amazonリンクの表示スタイルを少しスッキリさせた【display:flex】 とりあえずのメモ

[Cocoon]Amazonリンクの表示スタイルを少しスッキリさせた【display:flex】

スマホでブログを表示したときに、Amazonリンクの下にあるショップへのリンクボタンがちょっと大きすぎる気がしました。CSSで少し微調整していきます。リンクボタンを一列にまとめるまずは、縦に並んで画面を占有しているボタンを、一列にまとめます。flex-wrapをnowrapにして、一列にしwidthをautoにして、左揃えにしました。/** amazonリンクのモバイル表示を整理 */@media screen and (max-width: 834px) { .bookli...
[mac] ゴミ箱に移動したフォルダ名が重複した場合【Directory not empty】 とりあえずのメモ

[mac] ゴミ箱に移動したフォルダ名が重複した場合【Directory not empty】

mvコマンドではゴミ箱(.Trash)に同名フォルダがあると移動できませんでした。シェルスクリプトで、同名フォルダの存在を確認して、タイムスタンプを付加するようにしました。mvコマンドでは同名フォルダがあると移動できないシェルスクリプトで、コピー済みのフォルダをゴミ箱に移動していたら、うまく移動できていないことに気づきました。Directory not emptyこのエラーは、mvコマンドでフォルダ(ディレクトリ)を移動する際に、移動先にも同じフォルダが存在する場合に表示され...
[CSS] 記事一覧画面をスッキリさせた とりあえずのメモ

[CSS] 記事一覧画面をスッキリさせた

記事一覧のページで、記事ごとにオレンジ色の枠で囲んであるのが、ちょっとうるさい気がしたので、CSSを修正しました。/** 記事一覧画面をスッキリさせた*/ .list.ecb-entry-border .entry-card-wrap{ border-color: #e9e9e9; border-width: 0px; border-bottom-width: 1px; margin-bottom:20px; }.entry-card-content { padding-bo...
[note風スタイル] モバイルサイトでのアイキャッチ画像を横一面にした とりあえずのメモ

[note風スタイル] モバイルサイトでのアイキャッチ画像を横一面にした

noteサイトの記事レイアウトを参考に、アイキャッチ画像の余白をなくすことにしました。まず、メイン全体の余白(padding)をなくしてから、記事要素に余白(margin)を追加しました。/** モバイルサイトでアイキャッチの写真を横一面にする*/@media screen and (max-width: 1023px) { main.main { padding-right:0px; padding-left:0px; } .entry-content, .entry-fo...
[mac] コマンドラインからゴミ箱に入れる【~/.Trash】 パソコン基礎知識

[mac] コマンドラインからゴミ箱に入れる【~/.Trash】

mv ~/.TrashMacの「ゴミ箱」フォルダに移動するrmコマンドだと完全に削除されるmacでゴミ箱に移動する処理を自動化したい、と思いました。シェルスクリプトで削除するなら、rm(remove)を使うのですが、▶ 何を削除したか後から確認できない、▶ これは失敗したら元に戻せない、という欠点があります。「ゴミ箱」フォルダは ~/.Trash macの「ゴミ箱」フォルダの場所は、「~/.Trash」です。(~はユーザーディレクトリの場所)先頭がドットなので、隠しフォルダに...
[CSS] Cocoonで印刷時のアイコンリスト・ラベルボックスに枠をつけた プログラミング

[CSS] Cocoonで印刷時のアイコンリスト・ラベルボックスに枠をつけた

ウェブページを印刷する時に、通常は「背景画像を表示しない」になっていて、画面で表示されている背景画像や背景色が印刷されません。これには、インクの使い過ぎを防ぐ効果がありますが、画面表示と見た目が変わってしまいます。特に、このホームページでは、多くのアイコンリスト、ラベルボックスを「枠なし」「薄い背景色」で設定しています。印刷時に、背景色がなくなってしまうと、構造がわかりにくくなってしまうのです。そこで、設定した背景色をもとに、枠(濃いめ)をつけるようにしました。WordPre...
[CSS] ブログの印刷時のフォントをUDフォントにした プログラミング

[CSS] ブログの印刷時のフォントをUDフォントにした

パソコンでの文書作成用に「BIZ UDフォント」をパソコンに入れたのですが、ブログの印刷時のフォントでも活用したいと思います。ただし、印刷時だけで、通常のパソコンやスマホの画面で表示するときには、デフォルトのフォントのままにします。ウェブフォントを利用すると、表示に時間がかかってしまうからです。利用可能なフォントファイルを用意するまず、フォントファイルをPCに用意します。利用したフォントは、「SIL Open Font License (OFL)」というライセンスで、CSSに...
【注意】Amazonの偽サイトがかなり巧妙になっていた【カード番号のパリティチェック】 インターネット小話

【注意】Amazonの偽サイトがかなり巧妙になっていた【カード番号のパリティチェック】

ほとんどの偽サイトは見た目を似せただけの「ハリボテ」です。しかし、今回のAmazonの偽サイトは、入力チェックなどが細かくプログラムされていたので、びっくりしました。
当たり前だけどプログラミング言語の教科書は進歩している(『スッキリわかるC言語入門』のアプローチ) #PR含む

当たり前だけどプログラミング言語の教科書は進歩している(『スッキリわかるC言語入門』のアプローチ)

インターネットを見ていたら、たまたま「堅苦しいCの教科書に疲れたらー」という広告が目に止まりました。刺さるキャッチコピーだと思いました。今回は、『スッキリわかるC言語入門』のアプローチをもとに、プログラミング言語の進歩について考えてみます。ポイントC言語も使いやすくなっている。開発環境の準備も手軽になっている。常識は変わるもの。書籍のPR記事ではありませんが、興味があれば手にとって見てください。「堅苦しい教科書」ではないこちらが広告の大きいサイズです。本もネット広告を出すんだ...
Electronでレンダラープロセスからメインプロセスに処理を渡して、また戻る【async/await】 ニッチな話題

Electronでレンダラープロセスからメインプロセスに処理を渡して、また戻る【async/await】

レンダラープロセスから、メインプロセスで処理を移した後、レンダラープロセスに処理を戻すには、どうすればよいかハマったのでメモをしておきます。結果としては、IPC通信とasync, awaitという非同期の関数を利用することで、解決しました。プロセス間通信と処理の流れやりたいことは、・UIの実行ボタンが押して、・端末のファイル操作を行い、・終わってからUIに貯めた入力データをクリアする、ということです。UIに関するデータは、レンダラープロセスにあります。ただ、node.jsの処...
[CSS] ウェブページの印刷時に一番上の画像と文字が重なった【display:inlineとblock】 インターネット小話

[CSS] ウェブページの印刷時に一番上の画像と文字が重なった【display:inlineとblock】

教室ブログを印刷をしてみると、なぜか印刷が重なってしまうページがありました。すべてのページではなく、特定の記事だけで起こりました。・保護者の「承認」がないとアプリをインストールできないようにするには?【Google ファミリーリンク】 – スマホ教室ちいラボプリンタの問題ではなかったはじめは、プリンタが用紙の読み込みに失敗して、二重に印刷してしまったのか、と思ったのですが、よく見ると違います。印刷プレビューでも文字が重なっているのです。ページ切替えの一番上に画像があったときに...
[JavaScript]JQueryとdocument、どっちを使う?【HTML5】 インターネット小話

[JavaScript]JQueryとdocument、どっちを使う?【HTML5】

インターネットの情報の特徴として、新しい情報も過去の情報も混在しています。過去の情報を元にした新しい記事もあるため、「何が最新なのか」わかりにくい面があります。JavaScriptでウェブページの要素にアクセスしようと、インターネットで検索すると、「JQueryを使った方法」と「document」を使った方法が出てきます。そこで悩むのが、いったい どっちを使う方がよいのか、ということです。JQueryとgetElementBy〜例えば、idセレクタからDOM要素にアクセスする...
Electronで自作したツールを修正できた【Collup】 ニッチな話題

Electronで自作したツールを修正できた【Collup】

Electronで自作したファイル整理ツール「Collup」の機能を改善しました。ドラッグ&ドロップでファイルをリストに追加し、フォルダ名を入力するだけで効率的にファイルを整理できます。一つ上のフォルダにサブフォルダを作成する仕様に変更し、より使いやすくなりました。こんなツール先日、修正しようと思っていた、自作ツールがなんとか動作するようになりました。プログラムのドラッグ領域にファイルをドラッグ&ドロップすると、リストに追加されます(複数のファイルをまとめてドラッグすることも...
Electronでrequireができない?【プロセスとコンテクストとプリロードスクリプト】 ニッチな話題

Electronでrequireができない?【プロセスとコンテクストとプリロードスクリプト】

Electronでスクリプトを書いていたところ、Node.jsのAPIとDOM要素を結びつけるのに迷いました。main.jsではDOM要素にアクセスできず、HTMLから読み込んだスクリプト(renderer.js)ではNode.jsのAPIにアクセスできないからです。「プロセスモデル | Electron」をもとに、それぞれの役割の違いを見てみましょう。ポイントmain.jsは、メインプロセスを管理。renderer.jsは、レンダラープロセスを管理。preload.jsは、...
「Electronクイックスタート」をMacでたどってみた【Electron Forgeのビルド】 ニッチな話題

「Electronクイックスタート」をMacでたどってみた【Electron Forgeのビルド】

前回は、Electronの環境を作ったのですが、既存のソースからのビルドはうまくいきませんでした。というのも、設定が中途半端で fsやpathのライブラリがうまく読み込めないようです。そこで、原点に帰って、改めてElectronのひな形をビルドしてみました。ElectronクイックスタートElectronの公式ドキュメント「クイックスタート」に沿って、アプリを作成します。クイック スタート | ElectronMacBookでチュートリアル通りにそのままできるか、確認していき...
久しぶりにMacでElectronを使えるようにした【node.jsでアプリ自作】 ニッチな話題

久しぶりにMacでElectronを使えるようにした【node.jsでアプリ自作】

Macで動く自作ツールをJavaScriptでプログラムするために、Electronを使っていました。久しぶりにプログラムを修正しようとしたら、electronコマンドが通りません。改めて環境を構築しました。ポイントelectronのインストールで「sudo npm install -g electron --unsafe-perm=true --allow-root」でオプションを付加しないとエラーになったElectronが見つからないElectronは、「HTML5やJa...
WordPressでのコピペに混ざる<meta charset=″utf-8″>をまとめて削除する【PHPコード】 プログラミング

WordPressでのコピペに混ざる<meta charset=″utf-8″>をまとめて削除する【PHPコード】

MacでWordPressのエディタにコピペをすると、<meta charset="utf-8">というタグが追加されてしまうことがあります。これを放置すると、Google Search Consoleで「AMPエラー」になってしまいます。検索結果にAMPページが除外されてしまうので、「表示の遅いページ」という評価になってしまいます。ビジュアルエディターでは見つけにくいエラーなので、いちいち コードエディタに切り替える必要があります。「utf」で検索して、ちまちま修正していた...
[WordPress] ブログ記事に印刷用のQRコードを追加する【Google APIs】 プログラミング

[WordPress] ブログ記事に印刷用のQRコードを追加する【Google APIs】

ポイントQRコードはGoogle APIsで自動生成できる。WordPressの記事URLは、<?php the_permalink(); ?>で出力できる。functions.phpでは「get_the_permalink()」で文字列を取得できる。ウィジェットは印刷されないので、関数で本文末尾に追加する。【追記:2024-05-09】Google APIsのQRコード生成は終了したので、代替サービスを利用します。Google APIsでQRコードを生成するウェブページには...
【再挑戦】AMPページでクリックURLを記録する【Google タグマネージャーのユーザー定義変数・CSSセレクタ】 インターネット小話

【再挑戦】AMPページでクリックURLを記録する【Google タグマネージャーのユーザー定義変数・CSSセレクタ】

ウェブサイトのアクセス解析に Googleアナリティクス を使っていますが、単体では外部サイトへのクリック数を計測できません。通常ページのクリックは、Googleタグマネージャーを使って計測できましたが、AMPページ用のコンテナにはクリックURLの 組み込み変数がなく、頓挫していました。前回はこちら。約1年前ですね。通常ページだけでも、傾向を掴むことはできるのですが、やはり外部リンクへのクリックの実数を確認しておきたいと思い、改めて挑戦しました。WordPressのfunct...
phina.jsで将棋盤ゲームのプログラミングした話 [JavaScript] ニッチな話題

phina.jsで将棋盤ゲームのプログラミングした話 [JavaScript]

先日、スマホで操作できる将棋盤プログラムを作りました。デザイン将棋盤↑ こちらから動かせます。phina.jsライブラリプログラミング言語は JavaScriptで、phina.jsというライブラリを利用しました。公式サイトHome | phina.jsせっかくなので、駒を自分でkeynoteでデザインしました。Keynoteで駒をデザインしたけっこう、図形の結合なんかを組み合わせるだけで、それっぽくできるんだね。すぐにコードを動かせるのが魅力言語にJavaScriptを選ん...
SQLって何? SELECT文の使い方をまとめた インターネット小話

SQLって何? SELECT文の使い方をまとめた

SQLは、関係データベースの定義・操作をおこなう言語です。SQL = Structured Query Language・Structured … 構造化・Query … 問合せ・Language … 言語「データベース」とは、データを一定のルールで蓄積し、必要に応じて取り出せるようにしたものです。SQLで扱う、関係データベース(Relational Data Base)は、データを行と列の表で表します。データベースの分類階層型データベース網型データベース関係データベース…デ...
Cocoonで注目記事ランキングのショートコードを作成した【SQLって何?からのデータベース操作】 ニッチな話題

Cocoonで注目記事ランキングのショートコードを作成した【SQLって何?からのデータベース操作】

記事のアクセスランキング(人気記事)は、なかなか上位の記事が変わらない傾向があります。そこで、WordPressの記事のアクセス数の前週比のランキング(急上昇の記事)を作りたいと思いました。Cocoonのコードを読んでみるとアクセスランキングは、SQLクエリで生成されていました。完成したものCocoonのget_access_ranking_recordsのSQLクエリCocoonのアクセスランキングは、「lib/page-access/access-func.php」の「f...
「ループ」で問題解決をする? 【ライトボットのプログラミング教育】 ニッチな話題

「ループ」で問題解決をする? 【ライトボットのプログラミング教育】

プログラミングで重要な 「 ループ 」 という話をしてみたいと思います。 「 ループ 」 というのは、「 繰り返し 」 のことです。ちなみに、前回はこちら。ちょっと問題を見てみましょう。「 プロシージャー1 」 の中で、「 P1 」 コマンドを使って、「 ループ 」 を作ることができます。先ほどのプロシージャにある、プログラムを入れる領域の中に、「 P1 」 プロシージャ自身を呼び出すコマンドを入れることで、「繰り返し処理」にすることができます。「 プロシージャ1 」 の中で...
[Mac] サブフォルダ内のファイルを親フォルダに集める【フラット化のコマンド】 ニッチな話題

[Mac] サブフォルダ内のファイルを親フォルダに集める【フラット化のコマンド】

資料用の画像ファイルを、Mac内にフォルダ分けして管理していると、「似たようなフォルダに分かれてしまった中身を一箇所に集めたい」ということがけっこうあります。いちいちファイルをマウス操作で移動したり、不要になったフォルダを削除するのは大変で、ついつい後回しになってしまいます。そこで、今回は フォルダに小分けしすぎたファイルをまとめるコマンドライン を見ていきましょう。フォルダのフラット化下位フォルダのすべてのファイルを、一箇所のフォルダに移動する操作のことを、「ディレクトリ構...
WordPressのテンプレートをいじらずにPHPコードで遊びたい【テキストウィジェットで評価】 ニッチな話題

WordPressのテンプレートをいじらずにPHPコードで遊びたい【テキストウィジェットで評価】

WordPressのカスタマイズにはPHPコードを利用しますが、テンプレートをいじるのはなんか不安です。ウィジェットとしてPHPコードを実行したいと思います。追記(2024-07-20)任意のPHPコードを評価する機能は、セキュリティリスクが大きいので削除しました。カスタムHTMLではPHPコードは実行できないまず試したのがウィジェットの「カスタムHTML」です。しかし、「<?」で始まるタグはエラーになってしまいます。Special characters must be es...
MacからInstagramに投稿したい(Safariのユーザーエージェントを固定する設定 defaults write) Mac

MacからInstagramに投稿したい(Safariのユーザーエージェントを固定する設定 defaults write)

Safariのユーザーエージェントを固定するには、ターミナルでdefaultsコマンドを実行します。defaults write com.apple.Safari CustomUserAgent 'ユーザーエージェントの正式名'元に戻すには、defaults delete com.apple.Safari CustomUserAgent追記:2021-10-28Instagramのアップデートで、PCからも投稿できるようになりました。スマートフォンかパソコンかでウェブページが...
JavaScriptでウェブページのタブを閉じたい 【できる場合、できない場合】 ニッチな話題

JavaScriptでウェブページのタブを閉じたい 【できる場合、できない場合】

JavaScriptでウェブページのタブを閉じるコードは、ブラウザ(あるいはバージョン)によって挙動が違います。ここで検証できます。ネットで調べると「できる」と書いてあったのに、バージョンの関係なのか、うまくいかないことがあるのよね。結局、実際にコードを試して、実験するしかなさそうね。そもそもセキュリティによる制約があるまず、基本的にはJavaScriptでは、コードから開いたウィンドウは閉じることができるものの、ユーザーが開いたウィンドウは閉じられません。これは、セキュリテ...
とりあえずのメモ

Javascriptでmac用のツールを作ってみる【Electron】

簡単なファイル整理用のMacツールを作ってみたので、メモをしておきます。ElectronとAtomとクロスプラットフォームElectronというアプリ開発環境があります。もともとAtomというエディタソフトを開発するときに生まれました。ちょうどGIMPを作るときに生まれたGTKみたいですね。Atomエディタは、WindowsだけでなくMac, Linuxそれぞれで動くエディタです。クロスプラットフォームなわけです。ElectronはAtomエディタを作るときに作ったフレームを...
ブログでJavaScriptプログラムを動かしてみよう【カスタムHTMLとscriptタグ】 ニッチな話題

ブログでJavaScriptプログラムを動かしてみよう【カスタムHTMLとscriptタグ】

ブログの中でJavaScriptを動かして遊ぶ方法をご紹介します。WordPressサイトに直接HTMLコードを入力するために「カスタムHTML」というブロックを挿入します。JavaScriptのコードは最初と最後をのタグで囲んだ中に入力します。