２０２５年１月１日の水曜日 ２６時４０分ぐらい

明けまして2025

2025/01/02 02:49
日記

あけましておめでとうございます。

まさかの1日目更新の年、昨日の「2025は意外に３で割れるまくる」問題の答えですが

  • 正解は 2025 = 34 x 52 だよ

これはかなり気持ちいい予感、今年もよろしくお願いします！

今年も上腕二頭キンキキッズ

２０２４年１２月３１日の火曜日 ２３時４０分ぐらい

振り返る2024

2024/12/31 23:48
日記

気づけば今年も最終日、ふるさと納税も午後には完了したもののブログ更新をすっかり忘れていました。危ない危ない。

何か書き残したことはないかと思い出したところ、前々回のスーパーマリオWii完全クリアですがその後無事残大砲ワープを見つけることができセーブデータに☆5つ付けることができました。

  • よく気付いた！感動した！（ブログ更新も）

今年もマリオのように強制スクロールな毎日でしたが、来年は残機のように1日1日を大事にしてトライしていきたいと思います。

みなさまよいお年を！

まもなく意外に3で割れまくる2025！

２０２４年１０月７日の月曜日 ２６時２０分ぐらい

Twitter(新X)アイコン対応とCSS MaskingによるSVGアイコンについて

2024/10/08 02:21 2024/10/08 12:53
日記
#CDMP
#SSG
#CSS

本日放送のはなかっぱ２本目「恋する小鳥とはなかっぱ」が名作だったなぁと思ったこととは全く関係なく、先日思い立って左メニュー内のプロフィール用アイコンと記事フッタ内のシェアリンク用Twitterアイコンを新Xアイコンに変えたのでそれぞれ以下のようになりました。

compare twitter x

また１匹の青い鳥（白い鳥）が飛び立ってしまった・・・。

せっかくなので本ブログで使うアイコンについて書いてみます。

CDMPで利用しているCSSベースのSVGアイコンについて

CDMPの設計思想（というほど大したものではないんですが）は10年〜20年の利用スパンをターゲットにしているため、基本的に外部のライブラリなどは極力使わないようにしていますが、各アイコンに Bootstrap Icons を利用させて頂いています。ちなみに記事エディタにはAsciidoctor.jsも利用していますがSSG側からは見えていません。

v4.0→v4.9でのデザインリニューアル時にアイコンを求め、Font Awesome を使う予定だったのですが、構築途中でBootstrapのアイコンセットが発表され、使いたいアイコンデザインがあったためこちらを採用としました。

Bootstrap Iconsはいくつかの利用方法がありますが以下の要件を満たす方法として、本来画像の切り抜きやエフェクト用に定義されたCSS MaskingをSVGと組み合わせることでフレキシブルなアイコン表示を実現しています。

  • フォントファイル(約130KB)のロードによる肥大化を避けるためIconFontは使わない

  • できる限りHTMLコードは短く、できればIconFontと同じシンプルなコードとしたい

  • アイコンの色やサイズをCSSで設定したい(ダークモード対応など)

  • bi-以下はBootstrapIconsのitem名と合わせたい

実装方法 前述の通りCSS Masking を利用して、CSSの指定とdataURLの組み合わせで実装しています。またサイトレイアウト用のCSSとアイコン用のリソース定義ファイルを分離するためCSSを2つに分けています。実パス含めた実例はこのブログのheaderあたりをご覧ください。

style.css

サイトレイアウト用のstyle.cssにBootstrap IconsのSVGアイコン用のクラス.bi内でmask-*を指定し、mask-imageのurlを変数(--url)としてテンプレートを定義しておきます。

.bi {
  display: inline-block;
  vertical-align: -0.2em;
  width: 0.8rem;
  height: 0.8rem;
  margin: 0.1rem 0.3rem;
  background-color: #030;
  mask-repeat: no-repeat;
  mask-size: 0.8rem 0.8rem;
  mask-image: var(--url);
}

style-bi.css

実際のアイコンデータはアイコンリソース用の定義ファイルstyle-bi.css内で、各アイコン名のクラスを作成します。クラス内で色はbacground-colorで指定し、アイコンSVGデータは—​url変数でdataURL化(後述)し記述します。

例えば左メニュー内RSSアイコンは以下となります。

.bi-rss-fill {
  background-color: #F96;
  --url: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-rss-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20d%3D%22M2%200a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V2a2%202%200%200%200-2-2H2zm1.5%202.5c5.523%200%2010%204.477%2010%2010a1%201%200%201%201-2%200%208%208%200%200%200-8-8%201%201%200%200%201%200-2zm0%204a6%206%200%200%201%206%206%201%201%200%201%201-2%200%204%204%200%200%200-4-4%201%201%200%200%201%200-2zm.5%207a1.5%201.5%200%201%201%200-3%201.5%201.5%200%200%201%200%203z%22%2F%3E%0A%3C%2Fsvg%3E');
}

HTML

FontIconsの指定と同様にクラス名にテンプレートとアイコン名を指定します。

<i class="bi bi-rss-fill"></i>

もちろんタグ内で個別のstyle指定もできるため

<i class="bi bi-rss-fill"></i>
<i class="bi bi-rss-fill" style="width:1.5rem;height:1.5rem;mask-size:1.5rem;"></i>
<i class="bi bi-rss-fill" style="width:2rem;height:2rem;mask-size:2rem;background-color:#999;"></i>

のように書くと

とサイズ変更や色指定でグレーアイコンも簡単に書けるため便利です。なお、表示サイズ変更に.bi-x150といった拡大率設定クラスも併用しています。

アイコンリソースの追加方法

style-bi.cssへのアイコンの追加は、以下のadd_bi_to_css.phpスクリプトを利用し、利用したいアイコンのSVGをdataURL形式に変換してstyle-bi.cssに追加しています。

<?php

function add_icon_by_biname($icon_name){

  $icon_css_path = "./assets/css/style-bi.css";
  $file = file("https://github.com/twbs/icons/raw/main/icons/$icon_name.svg");

  foreach($file as $line){
    $svg .= $line;
  }

  $base64 = preg_replace('/\+/','%20',urlencode($svg));
  $iconurl_encoded =<<< EOL
  .bi-${icon_name} {
    --url: url('data:image/svg+xml;charset=utf8,${base64}');
  }

  EOL;

  file_put_contents($icon_css_path, $iconurl_encoded,FILE_APPEND);
}

$icon_name = $argv[1];

add_icon_by_biname($icon_name);

?>

これをCLIから実行しCSSファイルの末尾に追加します。例として新Xアイコンはbi-twitter-xなので以下となります。

$ php add_bi_to_css.php bi-twitter-x

SafariのVendor Prefix対応とBootstrap Iconsの変更履歴について

CDMPがv5.0になった当時はSafariのみ-webkit-mask-*が必要でしたが、2022年1月のv15.3にて標準化されたため現在はコメントアウトしています。

またBootstrap Iconsもv1.11.0(2023/09)から新Xアイコンが追加されたため、1年経ちようやくアイコンの更新となりました。

まとめ

これでCDMPの場合、

  • IconFontと同一コードでフォントファイルbootstrap-icons.woff2利用時の130KB → CSS＆SVG利用で4KBまで圧縮

    • 同一コードなのでヘッダの変更のみでCSS→フォントファイル利用に戻せる *HTMLとstyle指定でCSSで色・サイズがカスタマイズ可能に

と、要件を満たすことができました。

実際のアイコン更新作業としては、新Xアイコンデータの追加とHTMLテンプレート内のクラス名bi-twitterをbi-twitter-xに変えてサクッと完了となりました。

  • めずらしく有用な記事だったのでリツイートしてね！

ちなみにiPhoneにはまだTwitterの鳥さんがいるのでリポストとかの用語はよく分からないままです。

「モクレン　鳥　そっくり」で画像検索してみて下さい

２０２４年９月２７日の金曜日 ２６時１０分ぐらい

マリオプロという職業

2024/09/28 02:15
日記
#マリオ

まさかの2日連続更新がやってきた、いつ振りかの答えはつぶやきへ。

そういえば去年の4月にWii買ったんですけど、ハードオフでWiiリモコンなし本体セットを買ったところ2023年にも関わらずまさかの新古品（保護袋あり傷なし）でした。

wiiset

(この写真の合計でたったの2100えーん)

Wiiリモコンは2008年にシロ(MotionPlusなし世代)と2015年ぐらいにヨッシーの2本を入手済みだったのでまさにバッチリなセットをゲットしたっというのより、

  • 15年の時を経てついにWiiリモコンシロが本体に繋がったのだ！

マリオターイム

それから半年ぐらい前だったか「New スーパーマリオブラザーズ Wii」(赤いケースの目立つやつ)を買いまして、スーパーマリオワールド以来の2Dマリオをちょくちょく娘たちと進めておったんですが、このジェネレーティブAI時代に攻略本・攻略サイトを見ないルールで進めること数ヶ月、

ようやく先日W9の全スターコインを集めました！

mario wii starcoin w9

（ひとしおの感動を噛み締めるには輝きすぎるコイン達）

マリオWiiの感想

  • やはり2Dは至高

    • まあ3Dもペーパーもやったことなくて「イヤッフゥウウ！」の声ぐらいしか知らないんですけれども

  • BGMに合わせて跳ねるキャラクターたちがとてつもなくかわいい

    • 初回の「♪ワッ、ワワッ」の時に大感動した

  • ワイワイ言いながらできる協力プレイがたのしい

    • 究極奥義「浮いといてー」

    • その応用で落ちスターコインゲット(飛び降りて取った瞬間シャボンになる)も可

  • プロペラマリオ楽しい、アイスマリオ有能

    • スピンの風で雲が消えるギミック演出がいい

  • コントローラを振る動作はちょっと判定シビアなのでイマイチ

    • 振ってないのに「クルッ」ってなるからかなりミスる

  • スターコインがとにかく見つけられない

    • 6−5の3枚目のスターコインに数ヶ月かかった

      • あの極悪巨大プクプクなんなの？何回出てくるの？

      • プロペラブロック置いてあるから・・・

  • 隠しルートもまあ見つけられない

    • W2の隠しを最初見つけた時はワァってなったよ

    • 8−7への隠しルートは発見の考察として「おそらく強制スクロールではないコースで、マリオワールドを参考にするとできる限りクッパ船までのショートカットになるコースにあるだろう」からの発見

  • W9の難易度☆☆☆☆☆☆

    • 特に 9-3 と 9-6 と 9-7 の3コースだけで300マリオぐらい失った気が

      • 9−6でコントローラ振ってないのに異様にスピンするの何？動摩擦係数ともしや関係ある？

    • 9−6と9-7のスターコイン2枚目・3枚目はもう1時間ぐらいやっても再現できないかもしれない

    • スターコインは1週目ゴールは取らず、2週目で1枚目・2枚目確定してゴール、3週目で3枚目ゲットと段階を踏むので限界（一発では無理）

スターコインは全部集めたけどまだW2とW4の大砲隠しルートが残っているので最後までやり切りたいと思います。というかすでに隠しゴールもスターコインの位置も覚えてないので何度でも楽しめる無限マリオWiiなのであった。

みんなも面白いのでぜひやってみてね！

そして突然やってきた不思議ちゃん

という感じで途中だったマリオWiiを横目に、この8月急にNintendoSwitch(有機EL)が我が家にJOINし名誉ある1本目として迎えられたマリオワンダーの全クリも控えています。こっちはまだヘルプ要員なんですが、スペシャルステージの壁蹴りダッシュ面がすでに巧辛（うまから）要素満載でたまらんです。

マリオワンダーも最高に楽しいのでオススメ！！

  • これが自称マリオプロの憂鬱（♪あるー晴れーた日ーのことー）

あっ終わりでーす。

2日連続更新はどうやら2019年1月から約5年9ヶ月振りとなりました

２０２４年９月２６日の木曜日 ２６時５０分ぐらい

明けまして2024

2024/09/27 02:55
日記

つい先日、今年もあと100日を切ったとTwitter(新X)で見た気がしますが

  • え、もう9月終わるの？

というところで恒例の

  • 明けましておめでとうございます、今年もよろしくお願いします

この9ヶ月ほぼCDMPも開発することもなく、平和に過ごした日々。（更新して？）

NextCloudのバージョンアップトラブルについて

そういえば画像アップロード＆編集しようと思い、おもむろにNextCloudをv28.0.10からv29.0.7に上げたら画像編集機能が使えなくなりました。

この辺りのIssueな気がします。

Unable to edit photos; redirected back to the file list (NC 29 & 30) · Issue #2323 · nextcloud/viewer · GitHub
https://github.com/nextcloud/viewer/issues/2323
checked on 2024/09/27

とりあえずバックアップからv28.0.10にロールバックしました。

そしてアップロードした画像がこちら↓

ゴーゴーカレーダブルカツ限界チャレンジ

ロースカツ＆チキンカツのプチメジャーカレー！

gogo curry full

ババン！

gogo curry empty

  • おなかハジける！

ごちそうさまでした。

そしてまた年輪が一つ増えていくのであった

２０２３年１２月３１日の日曜日 １８時２０分ぐらい

振り返る2023

2023/12/31 18:25
日記

恒例の年末更新！

今年は3回も更新し、機能追加も確か11月ごろに思いつきでタグ機能をつけました。あとは画像アップロード・webP自動コンバートまわりが充実しましたので、いよいよ2024年からブログ本格始動です(まあしない)。

今回はじめてiPhoneから更新しますが、エディタが使いにくいのでこれも来年ですね。目指せオープンソース。

というあたりでお時間です、来年も更新通知があればまたお越し下さい。それではよいお年を！

ZESP3残り充電中に更新！

２０２３年１１月７日の火曜日 ２４時１０分ぐらい

24年目のカピバラ更新

2023/11/08 00:10
日記

さて3月からいつもどおりノーポストのまま今年もやってまいりました11月です。

  • どうぞ25年目もよろしくお願いいたします！

    1. いや1年経ってもやっぱり全然更新増えてねえな！

とおっしゃる皆様、実は「SSGブログに画像をどうやってサクッと載せるか問題」に2年の熟考を経て先週ようやく決着をつけましたので、これからが本番です（たぶん）。

という記事を書こうとしたら11月1日からはや6日も過ぎあわや年末が見えてきたので、さっそく夏旅の淡路で出会ったカピバラちゃんの写真をサクッと貼っておくことにします。

カピバラの画像

  • かわいい！

ブラウザだけで画像のリサイズ・マークアップができるようになりました！

２０２３年３月１日の水曜日 ２６時２０分ぐらい

misomayo.infoを自作SSGに移行しました

2023/03/02 02:23
日記
#CDMP
#SSG

明けましておめでとうございます、2023年もよろしくお願いします。

まだ3月ですが、昨年は予定していた周年更新についても残念ながら下書きのまま年を超えました。

本日2022年11月1日にて24年目に突入しました。ありがとうございます。

なんと今年は２回目の更新のため、この記事には新年のご挨拶はありません！

— 2022年10月24日に書いてあった下書きより

「ご挨拶はありません！」どころか更新自体がありませんでしたけども！（前日に熱出して4日ほど寝込んでたので）

さて新機能の引用元付きブロッククォートも使ってみたところでお気づきかもですが、大晦日更新でお知らせの通りようやく当ブログシステムCDMPがv5.0へと進化しSSGで構築されるようになりました。ところでSSGとはなんぞや？という方への解説です。

SSGとはStatic Site Generator(静的サイトジェネレータ)の略。記事となる文章をMarkdown記法やAsciidoc記法といった構造化テキストで作成し、そのファイルから生成するHTMLをCSSや画像といったコンテンツファイルとまとめてサイトを構築するスクリプト群のこと。

— misomayoさんによる適当解説

こちらも無駄にブロッククォートを使いカタカナを使ってみたものの、結局うまく説明できませんでした。まあメリットをまとめると、

  • （表示が）早い・（運用コストが） 安い・（セキュリティ的に）うまいの３本です

    1. ジャン、ケン、ポン、うふふふふ。ってことですか（？）

というところです。これも新しく付けたチャット風会話ができる新機能です。無駄にね！

これにて10年以上稼働していたdisplay.phpは晴れて引退となり、たくさんのHTMLファイルとCSSと画像ファイルと.htaccessの魔法によって表示されています。そして合わせて自作したAsciidoc日記エディタがめちゃくちゃ使いやすいので毎日更新しそうです。

  • それはまあ、うそです。

記事更新リハビリのため、このあたりで次回に続く！

次回が秋以降にならないことを月に祈ってください・・・

２０２２年１２月３１日の土曜日 ２３時５０分ぐらい

振り返る2022

2022/12/31 23:58
日記

恒例の大晦日ギリギリ更新です。11ヶ月ぶり！

お届けしている当ブログシステムのCDMPですが、無事9月頃にv5.0となり完全SSG化しました。

が、あと.htaccessを書いたら新バージョン、というところで現行バージョンのまま2023年となります。
来年こそは移行するぞ！

今年もお世話になりました。来年もよろしくお願いいたします。

安定の年2回更新も今年で終わりだよ！

２０２２年１月３１日の月曜日 ２３時５０分ぐらい

明けまして2022

2022/01/31 23:59
日記

明けましておめでとうございます！

ということで今年は数年ぶりに1月中に挨拶を済ませてみたものの、まだまだ開発中のため1月もあわやノー更新でフィニッシュとなるところでしたが簡単に1月の進捗です。

  • 構造化ドキュメントにAsciidocの採用と静的adocファイルの生成

  • 編集ページへのAsciidoc→htmlリアルタイムプレビュー実装

いよいよ完全SSGへの道が開けたかなというところで、今年もよろしくお願いします。

とはいえAsciidocを直接扱うのは少し厄介ですね・・・