Github | ウダ2Blog https://uda2.com/blog 大阪でフリーランスとしてWEB制作している管理人が気になった技術をメモったり、作ったツールの紹介などを綴っているブログです。 Thu, 13 Nov 2025 10:48:22 +0000 ja hourly 1 https://wordpress.org/?v=6.9 PDFからコピペした文字が微妙に変になったら https://uda2.com/blog/jpnormalizer/ https://uda2.com/blog/jpnormalizer/#respond Thu, 13 Nov 2025 06:59:41 +0000 https://uda2.com/blog/?p=2867 PDF内のテキストをコピペすると一部の漢字が「⾯」のように少し小さくひしゃげてしまう事がある。これは康熙部首やCJK部首補助という本来は部首を示す漢字に誤変換（？）されるらしい。過去に書いたUTF-8-MAC（NFD）の

The post PDFからコピペした文字が微妙に変になったら first appeared on ウダ2Blog.]]> PDF内のテキストをコピペすると一部の漢字が「⾯」のように少し小さくひしゃげてしまう事がある。
これは康熙部首やCJK部首補助という本来は部首を示す漢字に誤変換（？）されるらしい。
過去に書いたUTF-8-MAC（NFD）の問題も含めて対策した日本語をノーマライズするライブラリを作ってみました。
https://github.com/uda2/jpnormalizer

いづれも「読め無いわけでは無いからそのままでええやん」って感想の人も多いかもしれないですがWindowsのファイル名にUTF-8-MACを使うと一部のソフトで不都合が起きたりスクリプトで検索の際に別の文字なのでヒットしないという問題が発生しますので、マックユーザー向けにファイルアップロード機能を付けるときやPDFの内容をコピペする可能性の高いフォームでは有用かと思います。

言語はJavascript版とPHP版を用意しています。
中味はWikipedia等で情報を集めて置換してるだけですが、最初にテキストに該当箇所が無ければ変換処理をしないので負荷は低いかと思います。

Javascriptの方はnormalizeという関数が用意されていて
UTF-8-MAC問題だけなら.normalize(“NFC”)、康熙部首も変換したいなら.normalize(“NFKC”)と実行すると変換可能でネイティブな分処理的には速いのですが
多言語用の不必要な文字も変換されてしまうのに、CJK部首補助が変換されないという
濁音半濁音だけでなく全ての言語を正規化するので結果負荷が多めなので自前で用意しています。

PHPの方もNormalizer::normalize()があり、php-intlをインストールするか有効化すると使えるが
Javascriptnormalize関数と同様に多言語対応のライブラリで冗長なので自前で変換テーブルを用意して変換しています。

Githubとかいいから使ってみたいって方のためにお試し版も用意してます。
https://uda2.com/github/jpnormalizer_sample.php

※UTF-8-MAC（NFD）の問題はMacのファイルシステムがHFS+からAPFSになってかなり減ってます。
※NFCの変換するなら半角→全角も組み込んでも良さそうですがAA（アスキーアート）とかで使うので敢えて入れてません。

The post PDFからコピペした文字が微妙に変になったら first appeared on ウダ2Blog.]]> https://uda2.com/blog/jpnormalizer/feed/ 0 操作説明「くるんなび」 https://uda2.com/blog/curunavigate/ https://uda2.com/blog/curunavigate/#respond Wed, 23 Aug 2023 12:50:53 +0000 https://uda2.com/blog/?p=2707 スマホゲームとかによくある画面上にポップアップして「ココを押して下さい」といった操作手順を描画するツール「くるんなび」をGithubに公開いたしました。使い方がわかりにくいWEBツールにおすすめです。 https://g

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

https://github.com/uda2/curunavigate

前回（丸数字ポインター）と同じく矢印ですが「丸数字ポインター」は画像に矢印を載せ「くるんなび」はWEBページに矢印を載せるので使用目的が違い、「丸数字ポインター」は一般的ユーザーも使うと想定していますが「くるんなび」はWEB制作者向けなのでターゲットも違います。下記にサンプルのURLを書いておきますのでお試しいただければ分かるかと思います。

https://tools.uda2.com/curunavigate/

穴あきの処理を@rahhi555さんの記事の前半のようにクリッピングするしか無いかなーと思って読んでると記事の最後の例に矩形の周りをbox-shadowで塗ってしまうという逆転の発想な手法が書かれてました。これを参考に実装いたしました。

2つの説明方法が可能です、
先に一通り説明：画面全体がボタンになっていて操作はできず先に一通り説明する方法
操作をしながら説明：説明と同時に実際の操作をしながら説明していく方法（スマホゲーム等に最適）

ブラウザに閲覧履歴を記録してるので特に指定しなくともlocalstrageを使ってざっくりと一回だけの表示になりますが、しっかりとデータベースで管理したい場合も考慮してオプションを用意しております。

今回CDNとかも使えたらいいかなと調べてたのですが、Githubにアップすると下記の様にURLを書く事でjsDelivrさんが勝手に拾ってキャッシュしてくれるらしいです。

https://cdn.jsdelivr.net/gh/uda2/curunavigate/curunavigate.min.js

The post 操作説明「くるんなび」 first appeared on ウダ2Blog.]]> https://uda2.com/blog/curunavigate/feed/ 0 丸数字ポインター https://uda2.com/blog/numpointer/ https://uda2.com/blog/numpointer/#comments Fri, 18 Aug 2023 00:20:40 +0000 https://uda2.com/blog/?p=2702 10年近く前にオンラインソフトの紹介の為にスクショに矢印（数字付き）や矩形を描くWEBツールを使ってたのですが、先日オンラインソフトの紹介記事が古くなってので一掃してこのWEBツールも葬られる予定だったのですが。誰かに使

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

https://github.com/uda2/numpointer

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

元々のはjQueryでimgの画像を読み込んでimgを非表示にし代わりにcanvasを追加しそこで編集＆出力する形でしたが、今回は生JavaScriptでimgの画像を読み込んでcanvasで編集しimgに戻す形にしました。
これによって軽量かつCSSなどの属性も引き継がれますし悪影響は起きづらいかと思います。

編集用のツール「丸数字ポインターエディター」もjQueryでインターネット上に公開されてる画像に対して矢印の位置や矩形を編集するツールでしたが、今回はJavaScriptでローカルの画像を読み込み可能にしツールバーを付けたりファイルのドラッグ＆ドロップを付けて使いやすくしました。
今回のツールはメインターゲットがWEBクリエーター向けなので細かい説明は省いてますが「JSONて何？」という一般の方も画像に矢印を付けれるように画像ファイルに保存する機能も付けております。

The post 丸数字ポインター first appeared on ウダ2Blog.]]> https://uda2.com/blog/numpointer/feed/ 1 揺れるキリン https://uda2.com/blog/%e6%8f%ba%e3%82%8c%e3%82%8b%e3%82%ad%e3%83%aa%e3%83%b3/ https://uda2.com/blog/%e6%8f%ba%e3%82%8c%e3%82%8b%e3%82%ad%e3%83%aa%e3%83%b3/#respond Thu, 18 Jul 2013 04:11:21 +0000 http://uda2.com/blog/?p=1395 朝のまどろみは時々アイデアが降りてくる。 大抵は意味不明で使えないアイデアで、今回も揺れるキリンのイメージが浮かんだので作ってみた。 手法はFlashではよく使われてるもので画像を1ピクセル毎にスライスしたものを用意して

The post 揺れるキリン first appeared on ウダ2Blog.]]> kirin朝のまどろみは時々アイデアが降りてくる。
大抵は意味不明で使えないアイデアで、今回も揺れるキリンのイメージが浮かんだので作ってみた。

手法はFlashではよく使われてるもので画像を1ピクセル毎にスライスしたものを用意して動かすのだけど最近はFlash使って無いのでjQueryで作ることにした。

手順は下記の様な感じ
・画像を読むのを待つ。
・ul＆liのリストで縦ピクセル分にスライスする。
・スライスした画像を背景にして背景の位置を動かす。

やってみるとfirefoxではスローモーションになってるので背景の位置を変えず余白を変更する事で動かしてみたが解決しなかった。firefoxは苦手なのかもしれない。
kirin wave
※キリンの絵をクリックするとアニメーションが始まり、もう一回クリックすると止まります。

全く無意味だけどjQueryプラグイン化してみた。

更に世界一簡単なGithub入門を見ながら作ったライブラリをGithubで公開してみた。（Gitすら分ってないので怪しいですが）
https://github.com/uda2/kirinwave

最終的に一番時間が掛かったのはキリンの絵を描く行程でした。

The post 揺れるキリン first appeared on ウダ2Blog.]]> https://uda2.com/blog/%e6%8f%ba%e3%82%8c%e3%82%8b%e3%82%ad%e3%83%aa%e3%83%b3/feed/ 0