CSSだけでトグル式Tooltip 2024

カーソル合わせたらその説明が吹き出しで現れるToopTipというものがありますが、その性質上スマホやスクリーンリーダーと相性が悪かったのですがクリック式にする事で解決したものをHTMLとCSSだけで作ってみました。

https://uda2.com/testbox/tooltip.html

一般的なツールチップと同じくリンク文字にホバーしたら開閉します。
アイコンをクリックするとトグル式で開閉します。
※上のサンプルはHTMLやCSS(アイコンも含む)をしょうよう個人問わず勝手に使ってOKです。

〝CSSだけでトグル式Tooltip 2024〟の続きを読む

URLエンコーディングの違い

URLエンコードはその名の通りURLに使えない文字をエスケープする記述ですが言語や関数によって若干ぶれがあるのですが実際に比較検証した事がなかったのでやってみました。
まずURLはURL Standardに定義されていて
PHPの世界ではurlencode()とrawurlencode()があってurlencode()は半角スペースを「+」に変換したり「~」も変換したりします。
Pythonはurllib.parse.quote()とurllib.parse.quote_plus()があってurllib.parse.quote_plus()は半角スペースを「+」に変換したり「/」も変換したりします。
JavaScriptはencodeURI()とencodeURIComponent()があってencodeURIComponentはURI予約語「#$&+,/:;=?@」も変換するという違いがあります。

〝URLエンコーディングの違い〟の続きを読む

Cookieの有効期限調査

EUのGDPR(一般データ保護規則)とかカリフォルニアのCCPA(消費者プライバシー法)が策定されても当時は海外の話しだしサードパーティ系の話しはマーケッターじゃないので直接的な影響は無かったのですが、AppleがファーストパーティーCookieに制限がかかったITP2.1(Intelligent Tracking Prevention)をwebkitに実装してからはWEB制作にも影響が出てきました。
数年前ならいざ知らず、レンダリングエンジンはBlink一強の現状でITPに合わせる必要無さそうですが、それはPCの話しでスマホのシェアの大きいiPhoneのSafariを無視することは出来ずITPに従わざるを得ない状況です。(WEBもアプリもしてるGoogleはWEBに先進な技術を採用してますがAppleはアプリのみなので個人情報を盾にWeb技術には後進的です。)

サードパーティは切り捨てるしか無いけどクッキーは一週間あるからまあいいかと思ってたら、一部のブログ等でITP2.2からクッキーの有効期限が1日になったという記事を散見したので調査することにしました。

〝Cookieの有効期限調査〟の続きを読む

星矢ジャスティス攻略 教えてパーティ編成

1月18日の公開の翌日から星矢ジャスティス(聖闘士星矢レジェンドオブジャスティス)ってスマホのゲームをやっています。エイコーちゃんがCMをやったり駅に大量の広告を出したりしてたらしいです。
がっつり聖闘士星矢世代て訳では無いのですがゴールド聖闘士ぐらいまではソコソコ覚えてる程度で特に思い入れも無いですし放置ゲーは初なので面白さは計れないですが一月ほどやってみてメインクエストが時折難所が出て来て数日足止めをくらう事が多々あるのでクリアできない人が上手い人に攻略したパーティ構成を教えてもうサイトをつくりました。
星矢ジャスティス攻略 教えてパーティ編成

〝星矢ジャスティス攻略 教えてパーティ編成〟の続きを読む

Raspberry Piで先取りHomekit 新

先日ウチのホームサーバー(Raspberrypi4)にnode.jsを新しいバージョンすると反応しなくなる問題を解決すべく半日試行錯誤したあげくaptが動かなくなってしまい、仕方なくOSの再インストールする事となりました。
Raspbianはwheezy(7)からbullseye(11)までは順繰り使ってたけど、ホームサーバーにはbuster(10)を入れてたので最新のBookworm(12)にすると二世代違うので各所で色々と違いがあり手こずりました。以前投稿したRaspberry Piで先取りHomekit 追記のスクリプトも使えなくなったので修正していきます。

〝Raspberry Piで先取りHomekit 新〟の続きを読む

GameSir T4 Proをトリガーストップ改造

元々PS4でAPEXをやってて、PCに移行してからは「GameSir T4 Pro」にしてドリフトしなくなったののに敵に弾が当たりにくくなったと感じたました。その時は「PCはエイムアシストが弱い」と聞いてたのでPCは厳しいなと思ってましたが先日Gamepad Testerで調べて見るとBluetooth接続してるとエラー率が高いと分かりUSB接続にすると弾が当たりやすくなりました。

エイムが改善されると欲が出てトリガーがふかふかしてるのが気になり始めてトリガーストップも欲しくなってきたのですがGameSirさんはトリガーストップ付きのをなかなか出してくれないので自分で改造しました。(こちらから改造方法を記載しますが試される方は自己責任でお願いします。)

〝GameSir T4 Proをトリガーストップ改造〟の続きを読む

CSSの:has()疑似クラスってまだなん?

トグルボタンが必要だったので、checkboxを使ってごにょごにょするのにかなり複雑に組まないといけないのでイヤだなと思ってそういえば結構前に噂になってた:hasって使えるんじゃ無いか?とやってみたけど全然動かない、サンプルサイトも動いてない、仕方なく調べて見たら(:has() – CSS: カスケーディングスタイルシート | MDN)Firefoxが未だ対応してないらしい。

〝CSSの:has()疑似クラスってまだなん?〟の続きを読む

操作説明「くるんなび」

スマホゲームとかによくある画面上にポップアップして「ココを押して下さい」といった操作手順を描画するツール「くるんなび」をGithubに公開いたしました。
使い方がわかりにくいWEBツールにおすすめです。

https://github.com/uda2/curunavigate

〝操作説明「くるんなび」〟の続きを読む

丸数字ポインター

10年近く前にオンラインソフトの紹介の為にスクショに矢印(数字付き)や矩形を描くWEBツールを使ってたのですが、先日オンラインソフトの紹介記事が古くなってので一掃してこのWEBツールも葬られる予定だったのですが。
誰かに使ってもらえればとブラッシュアップし「丸数字ポインター」としてGitubに公開する事にしました。

https://github.com/uda2/numpointer

画像編集ソフトで直接描くのと違い、同じ画像に矢印だけが違う場合は容量の節約になりますし、再圧縮しないので何度編集しても画像の劣化も無いというメリットもありますのでよろしければお使い下さい。

〝丸数字ポインター〟の続きを読む

事務所サイトのリニューアル

補修を繰り返しごまかしごまかし運用してた事務所用サイトtenhp.comも13年も経ってるのでリニューアルいたしました。

https://tenhp.com/

制作当時はそれほどスマホも浸透しておらず、スマホの前身であるWindows mobileなどが不人気だったことから「日本ではスマホよりもモバイルゲーム機でネットを見る時代が来るのでは?」と謎な発想でモバイルゲーム機でも見れる横幅で作成してましたのですが、一般的なサイズにしました。

公式サイトではあるので奇抜にはしたくないですが技術的デモンストレーションという面もありますので要所で変態的なコーディングになっています。

〝事務所サイトのリニューアル〟の続きを読む