ナノで利用不可能な文字をJavaScriptで表示させる

2020-12-26 2020-12-26

ソースコード調整。　記事内文章順序を変更。
ソースコード調整。　ブックマークレット化についてを追記しました。
改題、記事再編(ナノで利用不可能な文字についてから一部内容をこちらに移動させました)
処理内容調整、字数削減
処理内容調整、字数削減
記事公開

フルカスタムホームページ　ナノにてリンク切れ画像に置き換わる特殊記号や第三水準以降の漢字をJavaScriptを使って表示させる方法です。

ナノで利用不可能な文字について

対処方法

demo

source code

下記どちらかをページ内どこかしらに一度記述

HEAD内や共通HEAD内なんかに入れておくのがお薦めです。

全置き換え

JavaScript


        
	<script>
	document.addEventListener('DOMContentLoaded',()=>{
	
	document.querySelectorAll('img[src*="mobilerz.net/img/"]').forEach($tgt=>{
		let num = $tgt.src.match(/[ij]\/(\d+)\.gif$/);
		if( num ) $tgt.outerHTML = '&#'+num[1]+';';
	});
	
	});
	</script>

ガラケー絵文字画像と併用前提

JavaScript


        
	<script>
	document.addEventListener('DOMContentLoaded',()=>{
	
	let map = {
		i:[63647,63740,63808,63854,63858,63870,63872,63920],
		j:[4521,4522,4525,4579,4621,4679,4721,4779,5021,5069,5121,5159]
	};
	document.querySelectorAll('img[src*="mobilerz.net/img/"]').forEach($tgt=>{
		let data = $tgt.src.match(/(i|j)\/(\d+)\.gif$/);
		if( !data ) return;
		let k = data[1];
		let n = parseInt(data[2]);
		for(let i=0;i<map[k].length&&map[k][i]<=n;i+=2) if(n<=map[k][i+1]) return;
		$tgt.outerHTML = '&#'+data[2]+';';
	});
	
	});
	</script>

ブックマークレット化

source code

全置き換え

JavaScript


        
	javascript:(()=>{document.querySelectorAll('img[src*="mobilerz.net/img/"]').forEach($tgt=>{var num=$tgt.src.match(/(\d+)\.gif$/);if(num)$tgt.outerHTML='&#'+num[1]+';'})})()

絵文字画像と併用

JavaScript


        
	javascript:(()=>{let check={},map={i:[63647,63740,63808,63854,63858,63870,63872,63920],j:[4521,4522,4525,4579,4621,4679,4721,4779,5021,5069,5121,5159]};document.querySelectorAll('img[src*="mobilerz.net/img/"]').forEach($tgt=>{let data=$tgt.src.match(/(i|j)\/(\d+)\.gif$/);if(!data)return;let key=data[1]+data[2];if(!check[key]){let k=data[1],n=parseInt(data[2]);check[key]={f:1,l:[],c:String.fromCodePoint(n)};for(let i=0;i<map[k].length&&map[k][i]<=n;i+=2)if(n<=map[k][i+1]){check[key].f=0;break}}data=check[key];if(data.f)$tgt.outerHTML=data.c;else{data.l.push($tgt);$tgt.addEventListener('click',()=>{if(confirm('『'+data.c+'』に変更しますか？')){if(1<data.l.length&&confirm('他の同一画像も置き換えますか？'))for(let i of data.l)i.outerHTML=data.c;else{data.l.splice(data.l.indexOf($tgt),1);$tgt.outerHTML=data.c}}})}})})()

ブックマークレットとは

ブックマークレット - wikipedia

自身に編集権限のないページでも任意のJavaScriptを実行できます。

詳細な使用方法は「使用ブラウザ名ブックマークレット」あたりでググってください。　スマホからでも使えます。

多分ここで便利

閲覧者側で見かけたナノ利用サイトの文章中に、不自然なリンク切れ画像があるとき
ナノの『文字→絵文字画像』置き換えが原因のリンク切れ画像の場合、ブックマークレット実行で本来意図していたであろう文字を容易に確認することができます。
管理者側で閲覧者さんから貰ったメッセージ中にリンク切れの画像が含まれていたとき
ここにも置き換えが適用されます🥺
ここに関しては十中八九ナノの置き換えが原因なので、ブックマークレット実行で正しい文字に置き換えて返して読むことができます。

補足

処理内容

一部の文字は下記HTMLに置き換えられて出力されます。

置き換え後HTML


        
	<img src="//img.mobilerz.net/img/j/1641.gif" border=0 align=absmiddle />

これはナノ提供のガラケー絵文字画像の表示用HTMLと全く同じなのですが、URLからは大抵の場合特に画像の参照ができずリンク切れになっています。

幸い、置き換え後HTMLのURLには、元の文字のISO 10646上での10進数文字番号(1641部分)が残っているので、当ページで紹介したスクリプトではこの文字番号を元に「置き換え返す」以下の処理をしています。

ガラケー絵文字用のURLを参照しているimg要素を見つける
URLが特定パターンに合致しているか確認
合致していればURLから数字部分を抜きだす
数値文字参照記述(&#文字番号;)に成形
img要素自体と数値文字参照を置き換え

利用上の注意

共通

最終的な文字の表示可否は閲覧環境に依存

あくまでナノ側の置き換えをどうにかするスクリプトなので、文字自体が表示できるかは閲覧環境に依存(表示可能なフォントを有しているか否か)します。

対策: webフォント利用

JavaScript非実行環境からは元の画像表示のまま

対策: 数値文字参照記述にしておく

`?`になる文字は対応不可能

元の文字番号を保持した画像URLを利用して文字に置き換えている都合上、ナノ側で?(ただの文字)に置き換えられる文字は対応できません。

例: demo各02
対策: 数値文字参照記述にしておく

「全置き換え」の注意点

一部除いたガラケー用絵文字画像が使用不可能

特定パターンに合致したガラケー絵文字用URLを参照しているimg要素を対象に前述した処理をしている為、ガラケー絵文字として画像を使用したい場合も問答無用で数値部分を文字番号とする文字に置き換えられます。

例: demo08
対策: 使用したい絵文字画像を保存、アップロードし、素材として登録しておく(ナノ絵文字用画像と異なるURLで参照できる)

「ガラケー絵文字併用前提」の注意点

一部文字は使用不可能なまま

特定パターンに合致したガラケー絵文字用URLを参照しているが、ガラケー絵文字画像が参照できない、リンク切れのimg要素を対象に置き換え処理をしています。
文字に依りガラケー絵文字画像が普通に参照できるものがあるのでその文字は使えないままです。

例: demo04
対策: 通常数値文字参照記述にしておく
ブックマークレット該当絵文字画像クリックで文字に置き換えるか選択できるようにしています。

sikaku