なるべくHTML編集を避ける
前ページで、一度「HTML表示」を開くと「LinkCard Editor」がリンクカードを認識できなくなった事例を取り上げました。 問題は改善された様ですが、今回に限らず、編集画面の JavaScriptツールにとって、「通常表示」⇄「HTML表示」の往復は問題が生じ易いところです。
で、この問題のきっかけになった「Amazon Item_URL」は「HTMLコード」のペーストが必要で、この操作を「通常表示」から行える様にすれば、ひとつの改善策になるはずです。
Ameba Pickで Amazon商品を紹介する事は可能ですが、商品に関する記事としては散漫に感じます。「Amazon Item_URL」で生成したリンクカードに「LinkCard Editor」を使えば、記事内容に沿ったリンクカードが編集でき、表示を自由に触れない Ameba Pick よりも有効です。
「Fixed Format Palette」のコードを流用
「通常表示」からHTMLコードをペーストする操作は、「Fixed Format Palette」で実績があります。 このツールでは、貼り付けるデータは「HTMLコード」として保持していて、ペーストは「通常表示」の編集画面で行う仕様です。
「Amazon Item_URL」で「カード型リンク」の選択すると、クリップボードにカードの「HTMLコード」を出力します。
クリップボードの内容を「通常表示」からペーストできれば、先日の様な問題は回避でき、「HTML編集」よりも直感的な操作が可能です。「Fixed Format Palette」のコードを流用すれば、これが実現できます。
統合か独立したツールか
「Amazon Item_URL」に、このHTMLペーストを実行するコードを統合しようかと考えましたが、「HTMLペースト」の操作はリンクカードに限らないので、独立したツールとする事にしました。
ツール名は「Paste ClipB ⭐」、ツールが動作する場所はアメーバの編集画面のみで、起動強化コードを使っているので「⭐」を付けています。
「Paste ClipB ⭐」の操作と仕様
このツールを導入すると、「通常表示」の編集画面でクリップボードの内容をHTMLペーストする事が可能になります。「HTML表示」を開いて貼付け場所を探す手間を省けます。
基本操作
操作は単純です。
● 通常表示の編集枠にキャレットを入れ「Ctrl+F10」を押すと、クリップボードの内容を「HTML表示」でペーストしたのと同様の結果になります。
▪ペーストはキャレットの位置で行われます。
▪何かの文字列や要素内にキャレットがある時は、その要素外の後方にペーストします。 これは、ペーストでキャレット位置の要素が壊される事を防ぐためです。
▪「Amazon Item_URL」で「カード型リンク」のコピーをした場合は、リンクカードが生成されますが、他の表示要素のHTMLコピーもペーストできます。
例としては「YouTube動画」や「ツイッター記事」などです。
こういったサイトで「埋込みコード」をコピーした後、「通常表示」の編集画面から「Ctrl+F10」でコピーして来た内容を貼り付ける事が出来ます。
IMEのメニューが表示される場合
IMEがONになっていると、「Ctrl+F10」の押下で下の様なメニューが表示されます。
これは、環境によって異なるかも知れませんが、「漢字変換（IME）」をOFFにすれば回避できるとはいえ、いちいち手間です。
●「Ctrl+Shift+F10」または「Ctrl+Alt+F10」の押下で、このツールの起動を優先させる事が可能です。 これは、覚えておくと便利な方法で、このショートカットをデフォルトとして使うのがお勧めです。
Firefoxでは使えません
現在の Firefoxは、クリップボードの内容をペーストする際に使う「Clipboard API」に対応していません。（下の赤枠）
苦労すれば他の手法が可能かも知れませんが、複雑で困難の様です。 以下に参考文献があります。
なお、Firefoxで「Paste ClipB ⭐」をインストールして「ON」にした場合は不毛なので、このツールをOFFにする様に「アラート」を表示する様にしました。
「Paste ClipB ⭐」を利用するには
このツールは Chrome / Edge版の拡張機能「Tampermonkey」上で動作します。
残念ですが、Firefoxは JavaScript によるクリップボードのペーストに非対応です。
以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 右サイドバーの マークのボタンを1度押してください。
コード枠内の右クリック ➔ コード全体の選択 ➔ コピー操作 が可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Paste ClipB ⭐ 〕 ver.0.1
// ==UserScript==
// @name Paste ClipB ⭐
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 編集枠（通常表示）でクリップボードのHTMLデータを記入「Ctrl+F10」
// @author Ameba Blog User
// @match https://blog.ameba.jp/ucs/entry/srventry*
// @exclude https://blog.ameba.jp/ucs/entry/srventrylist.do*
// @grant none
// ==/UserScript==
let retry=0;
let interval=setInterval(wait_target, 100);
function wait_target(){
retry++;
if(retry>10){ // リトライ制限 10回 1sec
clearInterval(interval); }
let target=document.getElementById('cke_1_contents'); // 監視 target
if(target){
clearInterval(interval);
main(); }}
function main(){
let ua=0;
let editor_iframe;
let iframe_doc;
let iframe_html;
check_firefox();
let target=document.getElementById('cke_1_contents'); // 監視 target
let monitor=new MutationObserver(catch_key);
monitor.observe(target, {childList: true}); // ショートカット待受け開始
catch_key();
function catch_key(){
if(ua==0){
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){ // iframe がある「通常表示」の場合
iframe_doc=editor_iframe.contentWindow.document;
if(iframe_doc){
iframe_doc.addEventListener("keyup", check_key); }
function check_key(event){
if(event.ctrlKey && event.keyCode==121){ //「Ctrl+F10」クリップボードを貼付
event.preventDefault();
setTimeout(()=>{
write_in(); }, 20); } } // check_key()
} //「通常表示」の場合
else{ //「HTML表示」の場合
document.addEventListener("keyup", check_key_h);
function check_key_h(event){
if(event.ctrlKey && event.keyCode==121){ // HTML表示で貼付操作をした場合
event.preventDefault();
event.stopImmediatePropagation();
setTimeout(()=>{
alert(
" ⛔ ペーストは通常編集枠で行ってください\n"+
" == Paste Clipboard =="); }, 20); } }
} //「HTML表示」の場合
}} // catch_key
function write_in(){
let selection=iframe_doc.getSelection();
let range;
if(selection && selection.rangeCount>0){
range=selection.getRangeAt(0); }
let ac_node=selection.anchorNode;
let insert_node_d=iframe_doc.createElement('div');
insert_node_d.setAttribute('id', 'p_clip');
if(ac_node && ac_node.parentNode){
// insert_node_d 生成の条件 親が div要素か BODYの場合
if(ac_node.parentNode.tagName=='DIV' ||
ac_node.parentNode.tagName=='BODY'){
ac_node.parentNode.insertBefore(insert_node_d, ac_node.nextSibling);
d_before_after(insert_node_d); }
// insert_node_d 生成の条件 ひとつ外の親が div要素か BODYの場合
else if(ac_node.parentNode.parentNode.tagName=='DIV' ||
ac_node.parentNode.parentNode.tagName=='BODY'){
ac_node.parentNode.parentNode.insertBefore(
insert_node_d, ac_node.parentNode.nextSibling);
d_before_after(insert_node_d); }}
let core=iframe_doc.querySelector('#p_clip');
if(core){
if(navigator.clipboard){
navigator.clipboard.readText()
.then(function(text){
core.outerHTML=text; }); }}
function d_before_after(insert_node_d){
if(insert_node_d==insert_node_d.parentNode.firstChild ||
insert_node_d.previousElementSibling.firstChild.tagName !='BR'){
insert_node_d.insertAdjacentHTML('beforebegin', '<p>\u00A0</p>'); }
if(insert_node_d.nextElementSibling==null ||
insert_node_d.nextElementSibling.firstChild.tagName !='BR'){
insert_node_d.insertAdjacentHTML('afterend', '<p>\u00A0</p>'); }
range.collapse(); } // 生成したdiv要素の前後に空白行追加
} // write_in()
function check_firefox(){
let agent=window.navigator.userAgent.toLowerCase();
if(agent.indexOf('firefox') > -1){
ua=1;
alert(
"⛔ Firefoxではこのツールは利用できません\n"+
" Tampermonkey のダッシュボードを開き\n"+
" 「Pasre ClipB」 をOFFにしてください。");
}} // Firefoxの場合の警告表示
} // main()
「Paste ClipB ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Paste ClipB ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
