sikaku

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

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

対処方法

source code

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

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

全置き換え
JavaScript
  1. <script>
  2. document.addEventListener('DOMContentLoaded',()=>{
  3. document.querySelectorAll('img[src*="mobilerz.net/img/"]').forEach($tgt=>{
  4. let num = $tgt.src.match(/[ij]\/(\d+)\.gif$/);
  5. if( num ) $tgt.outerHTML = '&#'+num[1]+';';
  6. });
  7. });
  8. </script>
ガラケー絵文字画像と併用前提
JavaScript
  1. <script>
  2. document.addEventListener('DOMContentLoaded',()=>{
  3. let map = {
  4. i:[63647,63740,63808,63854,63858,63870,63872,63920],
  5. j:[4521,4522,4525,4579,4621,4679,4721,4779,5021,5069,5121,5159]
  6. };
  7. document.querySelectorAll('img[src*="mobilerz.net/img/"]').forEach($tgt=>{
  8. let data = $tgt.src.match(/(i|j)\/(\d+)\.gif$/);
  9. if( !data ) return;
  10. let k = data[1];
  11. let n = parseInt(data[2]);
  12. for(let i=0;i<map[k].length&&map[k][i]<=n;i+=2) if(n<=map[k][i+1]) return;
  13. $tgt.outerHTML = '&#'+data[2]+';';
  14. });
  15. });
  16. </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部分)が残っているので、当ページで紹介したスクリプトではこの文字番号を元に「置き換え返す」以下の処理をしています。

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

利用上の注意

  • JavaScript非実行環境からは元の画像表示のままです。
  • あくまでナノ側の置き換えをどうにかするスクリプトなので、文字が表示できるかどうかは閲覧環境に依存(表示可能なフォントを有しているか否か)します。
  • 元の文字番号を保持した画像URLを利用して文字に置き換えている都合上、ナノ側で?(ただの文字)に置き換えられる文字は対応できません。
    例:demoページ各02を確認してください
「全置き換え」の注意点

一部除いたガラケー用絵文字画像が使用できません

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

例:demoページ各08を確認してください。

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

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

文字に依りガラケー絵文字画像が普通に参照できるものがあるのでその文字は使えないままです。

例:demoページ各04を確認してください。