記事タイトル用の絵文字パレット「TEmoji Palette」（1）/ JavaScript

記事タイトルに書いた文字が消える 

記事タイトルにWin絵文字などを書き込むと、編集中は書き込めて「プレビュー」で確かめてもOKなのに、投稿すると記事タイトルから絵文字が抜け落ちます。

◎ ブログ編集画面

◎ プレビュー画面

◎ 投稿後のブログ誌面（タイトルの ▼ の位置の絵文字だけ抜け落ち）

最後のサンプルでは、記事本文では同じ絵文字が正しく表示されています。「記事タイトル」と「記事本文」を扱うアメーバのシステムが異なり、「記事タイトル」は一部の種類の文字が使えないために、この抜け落ちが生じます。

「サロゲートペア」 の文字

ただし、Win絵文字で「⭕」の様に記事タイトルに使えるものがあり、絵文字ではないが「𠀋」などの文字は抜け落ちます。 抜け落ちるのは「サロゲートペア」という種類の文字です。

Unicode文字ツール

上のサイトでそれぞれの文字コードを調べると違いが判ります。

⭕	記事タイトルに使用できる	\u2B55
😉	記事タイトルに使用できない	\uD83D\uDE09
𠀋	記事タイトルに使用できない	\uD840\uDC0B

多言語対応で文字コードが足りなくなったために考えられたのが「サロゲートペア」です。「\u+4文字」は文字コードの基本形で「⭕」はこの形です。 一方「😉」「𠀋」は「\u4+文字」＋「\u4+文字」の形の文字コードで、この特別な形で1文字を表すのが「サロゲートペア」です。

「記事タイトル」で「サロゲートペア」の文字を許容すると、タイトル文字数のカウントとか、記事のデータベース処理が複雑になるので、使えないシステムとしたのではないかと思うのですが。

 記事タイトルのサロゲートペア文字をチェックする

「Win絵文字」の入力パレット上では、「記事タイトル」で使える絵文字かどうかを判断できません。 記事を投稿をしてから抜け落ちが判るので、私は時々困る事がありました。

そこで、「記事タイトル」に記入した文字列を調べて、「サロゲートペア」の文字があれば警告するツールを作ってみました。 文字列中の文字コードを調べて「サロゲートペア」の文字をチェックするのは、かなり昔に経験した事です。

「Both-WH」の絵文字問題を解決 / JavaScript

この手法を利用すればと、簡単なテストコードを作ってみました。

「Title Surrogate」 テストコード

// ==UserScript==
// @name         Title Surrogate
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  記事タイトルに非対応のサロゲートペア文字をチェックする
// @author       Ameba Blog User
// @match        https://blog.ameba.jp/ucs/entry/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ameba.jp
// @grant        none
// ==/UserScript==


let title_str;
let title_input=document.querySelector('.p-title__text');

if(title_input){
    title_input.onchange=function(){
        title_str=title_input.value;
        check_codeUnits(title_str); }}


function check_codeUnits(str){
    let hav=0;
    for (let i=0; i< str.length; i++){
        let c=str.charCodeAt(i);
        if((0xD800<=c && c<=0xDBFF) || (0xDC00<=c && c<=0xDFFF)){
            hav+=1; }}

    if(hav!=0){
        title_input.style.background='#ffebee'; }
    else{
        title_input.style.background=''; }}

このコードは、「タイトル入力枠」に文字を記入し「Enter」を押した段階で、文字コードをチェックします。 抜け落ちが生じる「サロゲートペア」文字が混ざっていれば、入力枠の背景色をピンクにして、ユーザーに警告するというものです。

使えるWin絵文字のパレット 

「Title Surrogate」は警告ツールとしては使えそうですが、タイトルに使いたいWin絵文字を探す作業の能率は、余り改善してくれません。 その事に気付き、下の記事を思い出しました。

⭕ アメブロのタイトルに使えるWin10絵文字

この記事は、「タイトルに使えるWin絵文字」を総チェックしていて、必要な絵文字を探す場合の資料としていました。 しかしこのページをいちいち開くのが手間で、最近は使う事が殆どなくなっていたのです。

あらためて考えると、このリストを表示するパレットがあれば、「サロゲートペア」のチェックはWin絵文字に関しては不要になります。 パレット化で積極的に絵文字をタイトルに使うことが出来るので、これは有効なはずです。

「TEmoji Palette」 のテストコード

先ずたたき台のコードを作りました。 以下の「TEmoji Palette」は、先ずパレットの体裁を作ることに注力しています。  タイトルの文字変更を繰り返すとパレットが増殖してしまい、全くのテスト段階のコードです。

◎ 現在は、パレット上の文字をコピーしてタイトル入力枠に貼り付けるという素朴な使い方です。 これは今後、クリックで入力する機能を実装するかもしれません。

◎ パレットは、記事タイトルの文字列を変更して「Enter」を押す操作で表示されます。 また非表示にする方法がないのは全く実用的でなく、今後改めます。

パレットに「Win絵文字」や「モノクロの絵文字」をきれいに並べるのは、思った以上に大変です。「ver. 0.1」は、それを実現しただけの段階です。

「TEmoji Palette」を利用するには

このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

〔 TEmoji Palette 〕 ver. 0.1

// ==UserScript==
// @name         TEmoji Palette
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  記事タイトル用のWin絵文字・モノクロ絵文字の入力パレット
// @author       Ameba Blog User
// @match        https://blog.ameba.jp/ucs/entry/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ameba.jp
// @grant        none
// ==/UserScript==


let title_input=document.querySelector('.p-title__text');

if(title_input){
    title_input.onchange=function(){
        palette(); }}


function palette(){

    let disp=
        '<div id="tep">'+
        '<div class="win_emoji"></div>'+
        '<div class="monochrome_emoji"></div>'+
        '<style>'+
        '#tep { position: absolute; top: 60px; left: -1px; z-index: 10; '+
        'display: flex; flex-direction: column; width: 748px; '+
        'font: normal 16px Meiryo; color: #000;  border: 1px solid #aaa; background: #fff; } '+
        '.win_emoji, .monochrome_emoji { '+
        'display: flex; flex-wrap: wrap; justify-content: space-between; } '+
        '.win_emoji { padding: 10px 34px 0 26px; } '+
        '.monochrome_emoji { padding: 10px 30px; } '+
        '.win_emoji span, .monochrome_emoji span { width: 30px; } '+
        '.monochrome_emoji p.ps2 { letter-spacing: 16px; margin-left: 3px; } '+
        '</style></div>';

    let l_form=document.querySelector('.l-form');
    if(l_form){
        if(!l_form.querySelector('#tep')){
            l_form.insertAdjacentHTML('beforeend', disp); }}

    let ps0=
        '✋✊✨⚽⚾⛳⌛⏳⌚⏰⏱⏲☕⛵⚓⛽⛲⛺⛅⭐☔⚡'+
        '⛄⛔❌⭕❗❕❓❔❎✅➿♿⏸⏯⏹⏺⏭⏮⏩⏪⏫⏬'+
        '⛎➰ℹ➕➖➗⚪⚫⬛⬜　　　　　　　　　　　　';

    let win_emoji=document.querySelector('.win_emoji');
    for(let k=0; k<ps0.length; k++){
        let ps='<span>'+ ps0[k] +'</span>';
        win_emoji.insertAdjacentHTML('beforeend', ps); }

    let ps1=
        '☺☹☠⛷☝✌✍⛑⛸♠♣♥♦⛏⚒⚙⚗⚖⛓⚔☎⚰⚱'+
        '⌨✉✏✒✂☘✈⛴⛰⛩+☁⛈☀☄☂⛱❄☃❤❣☮'+
        '✝☪☸✡☯☦♈♉♊♋♌♍♎♏♐♑♒♓⚛☢☣✴㊙'+
        '㊗‼⁉⚜〽⚠♻❇✳Ⓜ'+
        '▶◀⏏➡⬅⬆⬇↗↘↙↖↕↔↪↩⤴⤵☑〰✔✖©®'+
        '™◾◽◼◻▪▫　　';

    let monochrome_emoji=document.querySelector('.monochrome_emoji');
    for(let k=0; k<ps1.length; k++){
        let ps='<span>'+ ps1[k] +'</span>';
        monochrome_emoji.insertAdjacentHTML('beforeend', ps); }

    let ps2='<p class="ps2">#️⃣*️⃣0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣</p>';
    monochrome_emoji.insertAdjacentHTML('beforeend', ps2);

} // palette()

「TEmoji Palette」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「TEmoji Palette」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）