SVGアイコンの導入
「Pick Organizer」の制作はブラシュアップとエラーフィックスの段階です。 実用的な部分は、ほぼ出来上がっています。
気になっていたのはカード配置仕様のアイコンで、デザインの細かなところで苦心していました。「均等配置」「中央配置」のアイコンは、最初は文字の「▮」を並べてデザインしました。 しかし、この方法は周囲のアイコンとの並びが安定しない問題が必ず出て来ます。 フォントが同じでも、ブラウザの拡大率やブラウザ種類によって、高さ位置が不安定にズレます。
で、「ver. 0.6」では「均等配置」「中央配置」に SVGアイコンを導入しました。
といったコードで、数字の羅列になる通常のSVGと違います。 これは、矩形を並べただけの描画指定で、この様な簡単なコードにできました。
さすがに SVGは描画が安定して良い結果です。 しかし、その周囲の「◀」「▶」のアイコンは「Font Awesome」を利用していたので、微妙に高さ位置が異なります。 そこで、これらの全てをSVG化しました。
下の中央の4個は「SVG」で、両外側は「Font Awesome」のアイコンです。 拡大しないと気付き難いのですが、「SVG」は微妙に高さが低くなっています。
アイコンの高さ位置は「vertical-align」で調整する事が多いのですが、これを 1pxだけ変えて調整を試みても、今度は反対に高くなってしまいます。
4個の高さを綺麗に揃えるには、結局全てSVGアイコン化する必要がありました。
「Font Awesome」から SVGコードを入手
最近は、アイコンのSVGコードをフリーで提供するサービスが増えました。 SVGコードの利用は慣れと根気が要りますが、結果は満足できます。
●「Font Awesome」のアイコンで「◀」に使えるものを探し、「SVGコード」を入手。 有償契約を勧められますが、現在は無視してダウンロードできます。
● 入手したSVGファイルをメモ帳で開きます。 この時、「右側で折り返す」の設定は、あらかじめOFFにしておかないと、無効コードになる様です。
SVGは下の様なコードで、ここでは折り返して表示していますが、実コードは折り返しがありません。
グレーの背景を付けたコードを全て削除します。 この段階で、画像アプリやブラウザでは、画像として表示できなくなります。
更に、コードを良く見ると小数以下3桁の数値があります。 これらの小数以下を四捨五入して書換えます。 半角英文字は触ると多分崩れます。
コンパクトになりましたが、このコードは SVG画像のHTMLコードとして「img」の様に扱えます。
以上の様な操作で、4つのアイコンを全て SVG化して揃えました。 アイコンを4個並べても、高さがズレるという事がなくなりました。
全てのアイコンをSVGしました
「Pick Organizer」のパネルに、「Font Awesome」のアイコンが最初は5個あったのですが、デザイン登録の2個に減りました。「+」は「Font Awesome」のページからSVGコードを入手して、上記の処理で使える様になったのですが、「 」の方は、「Font Awesome」のアイコンを90度回転して表示しています。 SVGコードを入手して、それを「transform」で回転させても良いのですが、最初から下向きのアイコンのSVGだと、コードも簡単になります。
そこで、下向きのアイコンを探したのですが、目的のアイコンはありませんでした。 で、作ってしまう事に。「Font Awesome」のページで元デザインの大きな画像をハードコピーして、それをモノクロに変換し、サイズを「512×512px」のpngに縮小。 これを回転させて下の右側のアイコンデザインを作りました。
この程度のサイズだと、充分にアイコン画像としての精度があります。
PINGをSVG変換してくれるフリーサイトは幾つかありますが、最近は下を使っています。 処理後のコードが扱い易いので。
このサイトでSVGコードを得て、先と同様の処理をして、目的のSVGコードを作りました。 複雑な絵柄で少し文字数が増えましたが、大したことはありません。
ウェブフォントの呼込みが不要になる
これで「Font Awaesome」を呼込む必要がなくなりました。 多分僅かと思いますが、ツールを開いた時にストレスなく開く様になったはずです。 編集画面に他のツールなどで既に「Font Awaesome」が呼び込まれていたら、変化はないでしょうが。
カード枠線の設定コードを改善
「Shift+Click」の操作で「枠線追加/枠線削除」を指定しますが、枠線が有るなら「枠線削除」、枠線が無ければ「枠線追加」という方式でした。 既に設定された枠線を変更する場合は、一旦「枠線削除」をして、次の「Shift+Click」で目的の枠線に変更する形になっていました。
このコードを改め、対象カードの枠線指定が、パネルの「枠線色」「枠線幅」と同一なら「枠線削除」とし、色・幅のどちらかでも不一致なら、パネルの指定の枠線に変更する仕様に改めました。
これで、「枠線」指定の変更時の遠回りが減らせます。 また、多数のカードの枠線を全て消したい場合は、枠線幅「0」を指定して「Shift+Click」すると、必ずワンクリックで枠線無しにできます。
ヘルプの表示位置を変更
操作を案内するヘルプは、説明対象の下側に表示していました。「LinkCard Editor」では上側の表示で、「Pick Organizer」は試験的に下側を試していましたが、マウスポインターがヘルプを隠し、上側の方が良い様です。 今回の「ver. 0.7」から、横または上側にヘルプの表示位置を変更しました。
また、操作に慣れるとヘルプは邪魔になります。 それまでは有効なはずで、ヘルプの表示・非表示を選択できる様にしました。
パネル左端に「Ⓗ」のボタンを設置し、これをクリックするとダイアログが表示されて「表示・非表示」を変更できます。 再びヘルプ表示が必要になれば、このボタンから再設定できます。
「Pick Organizer ⭐」 を使用するには
「Pick Organizer ⭐」は、Chrome/Edge/Firefox の拡張機能「Tampermonkey」にインストールして利用できます。 インストールは、以下の ❶ ❷ の操作を順に行ってください。
このツールの使用によって「Ameba Pick 利用規約」に抵触する事がない様に、ピックカードのHTMLコードには全く変更を加えない設計ですが、あくまでも自己責任の元での使用という事をご理解願います。
❶ 拡張機能「Tampermonkey」の導入
「Tampermonkey」の導入手順は、以下のページを参照ください。
「Tampermonkey」は、使用しているブラウザに適した版を導入してください。 既にこの拡張機能を導入している場合は、❶の手順は不要です。
❷「Pick Organizer ⭐」のインストール
●「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Pick Organizer ⭐ 〕 ver. 0.7
// ==UserScript==
// @name Pick Organizer ⭐
// @namespace http://tampermonkey.net/
// @version 0.7
// @description 通常表示でピックカードの配置管理「Ctrl+F10」「Shift+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){
clearInterval(interval); }
let target=document.querySelector('#cke_1_contents');
if(target){
clearInterval(interval);
main(); }}
function main(){
let editor_iframe;
let iframe_doc;
let iframe_body;
let ua=0; // Chromeの場合のフラグ
let agent=window.navigator.userAgent.toLowerCase();
if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラグ
let task=0; // ツールの ON/OFF
let posit_set; // 中央寄せ・左寄せ
let border_width;
let color_input=[]; // 4個のカラー設定枠
let setting=[];
if(read_locals()){
setting=read_locals(); }
if(setting.length!=8){
setting=['#aaa','1','#aaa','1','','space-between','', 0]; }
// 運用枠線色，運用枠線幅, M枠線色，M枠線幅，Mエリア背景色，M配置特性,
// (予備), ヘルプ表示
write_locals(setting);
function read_locals(){
let read_json=localStorage.getItem('PickO'); // ローカルストレージ 読込
return JSON.parse(read_json); }
function write_locals(data){
let write_json=JSON.stringify(data);
localStorage.setItem('PickO', write_json); } // ローカルストレージ 保存
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(document.querySelector('.cke_wysiwyg_frame')){ //「通常表示」から実行開始
let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
let iframe_doc=editor_iframe.contentWindow.document;
if(task==1){
panel(); }
iframe_doc.addEventListener('keydown', check_key);
document.addEventListener('keydown', check_key);
function check_key(event){
if(event.keyCode==13 && iframe_doc.hasFocus()){
remove_warH(); } // 改行入力が連続マークとなるのを抑止
let gate=-1;
if(event.ctrlKey || event.shiftKey){
if(event.keyCode==121){ //「Ctrl+F10」
event.preventDefault(); gate=1; }
if(gate==1){
event.stopImmediatePropagation();
task_s(); }}}
function task_s(){
if(task==0){
task=1;
panel();
general(); }
else{
task=0;
remove_panel();
close_warH(); }}}
} // catch_key()
function panel(){
monitor.disconnect();
let disp=document.createElement("div");
disp.setAttribute("id", "disp_po");
disp.innerHTML=
' ■エリア指定：空白行を Ctrl+Click '+
'■Cardをエリアに配置/除外：Alt+Click</span>'+
'<div id="ex_disp">'+
' ■Cardをエリアに配置/除外：Alt+Click</span> '+
'<span class="lc_hint hint">■エリア背景色：'+
'<span id="lc_w"><span id="lc_color"> </span></span></span> '+
'<input id="lc_trance" type="number" max="10" min="0.1" step="0.1">'+
'：濃度 配置：'+
'<span class="la_hint hint">'+
'<svg class="al" viewBox="0 0 256 480">'+
'<path d="M192 127v257c0 18-22 27-34 14L29 270c-8-8-8-20 '+
'0-28l129-129c13-13 34-4 34 14z"></path></svg>'+
'<svg class="ab" viewBox="0 0 512 512">'+
'<rect x="20" y="100" width="130" height="340"></rect>'+
'<rect x="362" y="100" width="130" height="340"></rect></svg>'+
'<svg class="ac" viewBox="0 0 512 512">'+
'<rect x="105" y="100" width="130" height="340"></rect>'+
'<rect x="280" y="100" width="130" height="340"></rect></svg>'+
'<svg class="ar" viewBox="0 0 144 480">'+
'<path d="M0 385V127c0-18 22-27 34-14l129 129c8 8 8 20 0 '+
'28L34 399C22 411 0 402 0 385z"></path></svg></span> '+
'</div>'+
'<div>'+
'<span id="h_hide">Ⓗ</span> ■Card配置 左◁中央▷右：Ctrl+Click '+
'■枠線：Shift+Click 枠線色：<span class="lb_hint hint">'+
'<span id="lb_w"><span id="lb_color"> </span></span></span> '+
'<span class="lbd_hint hint">'+
'<span id="lb_disp"> </span>'+
'<input id="lborder" type="number" max="5" min="0"></span>'+
' M：'+
'<span class="mplus_hint hint">'+
'<svg id="memo_plus" viewBox="0 0 448 512">'+
'<path d="M416 208H272V64c0-18-14-32-32-32h-32c-18 0-32 14-32 '+
'32v144H32c-18 0-32 14-32 32v32c0 18 14 32 32 32h144v144c0 18 14 '+
'32 32 32h32c18 0 32-14 32-32V304h144c18 0 32-14 '+
'32-32v-32c0-18-14-32-32-32z"></path></svg></span> '+
'<span class="mp_hint hint">'+
'<svg id="memo_paste" viewBox="0 0 480 480">'+
'<path d="M228 285L169 285C160 285 150 284 144 293C132 309 153 '+
'326 162 336C189 368 216 399 243 430C252 441 263 460 278 460C290 '+
'460 296 450 303 442C318 425 332 408 347 391C367 369 386 346 405 '+
'324C413 315 421 303 412 292C405 284 396 285 387 285L334 285C334 '+
'240 330 193 317 151C307 123 292 97 267 80C218 48 153 58 106 88C95 '+
'95 85 104 76 114C71 119 66 125 66 132C65 141 72 148 81 147C91 146 '+
'101 142 111 139C135 134 163 133 185 147C201 158 210 174 216 '+
'192C226 222 227 254 228 285z"/></svg></span>'+
'</div>';
let css=
'#cke_1_contents { display: flex; flex-direction: column; } '+
'#disp_po { margin: 0 0 5px; padding: 4px 0 1px; white-space: nowrap; '+
'font: normal 16px/24px Meiryo; color: #fff; background: #1976d2; '+
'user-select: none; } '+
'#disp_po .hint { position: relative; } '+
'#disp_po .hint.hint:hover::after { position: absolute; z-index: 1; height: 23px; '+
'padding: 1px 9px 0; font: 16px Meiryo; color: #fff; background: #000; } '+
'#disp_po .lc_hint.hint:hover::after { top: -1px; left: 150px; '+
'content: " ◀ Click：カラーパレット表示 "; } '+
'#disp_po .la_hint.hint:hover::after { top: -1px; left: -286px; '+
'content: " エリア内のタイル配置を選択 "; } '+
'#disp_po .lb_hint.hint:hover::after { top: -25px; left: -209px; '+
'content: " カラーパレット表示：Click ▼ "; } '+
'#disp_po .lbd_hint.hint:hover::after { top: -25px; left: -46px; '+
'content: " 枠線幅： ▼ "; } '+
'#disp_po .mplus_hint.hint:hover::after { top: -25px; left: -161px; '+
'content: " デザイン登録：Click ▼ "; } '+
'#disp_po .mp_hint.hint:hover::after { top: -25px; left: -209px; '+
'content: " 登録デザインを適用：Click ▼ "; } '+
'#ex_disp { position: absolute; top: 8px; background: #1976d2; z-index: -1; } '+
'#h_hide { position: absolute; left: 4px; font-size: 14px; cursor: pointer; } '+
'#disp_po .lc_hint { margin-left: 3px; } '+
'#lc_w { display: inline-block; overflow: hidden; width: 16px; '+
'height: 16px; border: 1px solid #fff; background: #fff; vertical-align: -3px; } '+
'#lc_color, #tc_color { cursor: pointer; background: #fff; } '+
'#lc_trance { height: 22px; width: 15px; border: none; vertical-align: 1px; '+
'color: transparent; background: transparent; margin-left: 2px; } '+
'#lc_trance::-webkit-inner-spin-button { opacity: 1; } '+
'#disp_po svg { cursor: pointer; width: 16px; height: 16px; padding: 1px; '+
'border-radius: 2px; fill: #1976d2; background: #fff; vertical-align: -3px; } '+
'#disp_po .al, #disp_po .ab, #disp_po .ac, #disp_po .ar { '+
'margin-right: 5px; } '+
'#lb_w { display: inline-block; width: 16px; height: 16px; overflow: hidden; '+
'border: 1px solid #fff; background: #fff; vertical-align: -3px; } '+
'#lb_color { cursor: pointer; background: #fff; } '+
'#lb_disp { display: inline-block; position: relative; width: 32px; '+
'margin-right: -14px; color: #fff; background: #1976d2; } '+
'#lborder { height: 22px; width: 30px; border: none; background: none; } '+
'#lborder::-webkit-inner-spin-button { opacity: 1; } ';
if(ua==1){
css+=
'#disp_po .lc_hint { margin-left: 2px; } '+
'#lc_trance { width: 18px; } '+
'#lborder { width: 32px; }'; }
let style=document.createElement('style');
style.innerHTML=css;
disp.appendChild(style);
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){
if(!target.querySelector('#disp_po')){
target.insertBefore(disp, editor_iframe); }
iframe_doc=editor_iframe.contentWindow.document;
if(iframe_doc){
let iframe_html=iframe_doc.querySelector('html');
iframe_body=iframe_doc.querySelector('body');
if(iframe_html && iframe_body){
let pcard_style=iframe_doc.createElement('style');
let css=
'.warH { box-shadow: #fff -4px 0px, #2196f3 -8px 0px; '+
'min-height: 1.6em; } '+
'.warH .pickCreative_addShopButton { display: none !important; } '+
'a[data-img-url].pickCreative::after { font: bold 12px Meiryo; '+
'content: "Edit"; background: rgb(0 0 0 /20%); }';
pcard_style.setAttribute("id", "pcard_style");
pcard_style.innerHTML=css;
if(iframe_html.querySelector('#pcard_style')){
iframe_html.querySelector('#pcard_style').remove(); }
iframe_html.appendChild(pcard_style); }}}
monitor.observe(target, {childList: true});
let disp_po=document.querySelector('#disp_po');
disp_po.style.display='block';
help_set();
} // panel()
function remove_panel(){
if(target.querySelector('#disp_po')){
target.querySelector('#disp_po').style.display='none'; }}
function close_warH(){
if(document.querySelector('.cke_wysiwyg_frame') !=null){ //「通常表示」から実行開始
let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
let iframe_doc=editor_iframe.contentWindow.document;
let warH=iframe_doc.querySelector('.warH');
if(warH && !warH.querySelector('.pickCreative')){
remove_warH(); }
else{
hide_warH(); }}}
function remove_warH(){ // warHを削除
if(document.querySelector('.cke_wysiwyg_frame') !=null){ //「通常表示」から実行開始
let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
let iframe_doc=editor_iframe.contentWindow.document;
let warH=iframe_doc.querySelector('.warH');
if(warH && !warH.querySelector('.pickCreative')){
warH.remove(); }}}
function hide_warH(){ // warHマークを非表示
let pcard_style=iframe_doc.querySelector('#pcard_style');
if(pcard_style){
pcard_style.innerHTML=
'.warH .pickCreative_addShopButton { display: none !important; } '+
'a[data-img-url].pickCreative::after { font: bold 12px Meiryo; '+
'content: "Edit"; background: rgb(0 0 0 /20%); }'; }}
function help_set(){
if(setting[7]==1){
let hints=document.querySelectorAll('#disp_po .hint');
for(let k=0; k<hints.length; k++){
hints[k].classList.replace('hint', 'hint_'); }}
let h_hide=document.querySelector('#h_hide');
if(h_hide){
h_hide.onclick=function(){
let ok=confirm(
" ⚫ 操作説明のヘルプの表示・非表示を変更します\n"+
" 左端の Ⓗボタンを押すと 何度でも変更できます");
if(ok){
help_toggle();
write_locals(setting); }}}
function help_toggle(){
if(setting[7]==0){
let hints=document.querySelectorAll('#disp_po .hint');
for(let k=0; k<hints.length; k++){
hints[k].classList.replace('hint', 'hint_'); }
setting[7]=1; }
else{
let hints=document.querySelectorAll('#disp_po .hint_');
for(let k=0; k<hints.length; k++){
hints[k].classList.replace('hint_', 'hint'); }
setting[7]=0; }}}
function general(){
let editor_iframe;
let iframe_doc;
let iframe_body;
let target1=document.querySelector('#root'); // ダイアログ表示で励起
let monitor1=new MutationObserver(organize);
monitor1.observe(target1, {childList: true});
let target2=document.querySelector('#cke_1_contents');
let monitor2=new MutationObserver(organize);
monitor2.observe(target2, {childList: true});
organize();
function organize(){
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){
iframe_doc=editor_iframe.contentWindow.document;
if(iframe_doc){
iframe_body=iframe_doc.querySelector('body');
if(iframe_body){
env_sensor();
wrap_all();
layout();
set_warH();
flex_set();
bd_color();
bd_width();
mem_plus();
mem_paste();
}}}} // organize()
} //general()
function env_sensor(){
let warH=iframe_doc.querySelector('.warH');
if(!warH || !warH.querySelector('.pickCreative')){
let ex_disp=document.querySelector('#ex_disp');
if(ex_disp){
ex_disp.style.zIndex='-1'; }}
else{
let ex_disp=document.querySelector('#ex_disp');
if(ex_disp){
ex_disp.style.zIndex='1';
bg_color();
flex_set();
}}}
function wrap_all(){
let pickC=iframe_body.querySelectorAll('.pickCreative');
for(let k=0; k<pickC.length; k++){
wrap(pickC[k]); }
function wrap(C){
if(task==1){
let type=C.getAttribute('data-layout-type');
if(type=='1' || type=='2' || type=='5'){
let C_root=C.parentNode.parentNode;
let warC=iframe_doc.createElement('div');
warC.setAttribute('class', 'warC');
if(!C_root.closest('.warC')){
warC.appendChild(C_root.cloneNode(true));
C_root.parentNode.replaceChild(warC, C_root);
warC.style.width='fit-content'; }}
else if(type=='3' || type=='4'){
let warC=iframe_doc.createElement('div');
warC.setAttribute('class', 'warC');
if(!C.closest('.warC')){
warC.appendChild(C.cloneNode(true));
C.parentNode.replaceChild(warC, C);
warC.style.width='fit-content'; }}}}
} // wrap_all()
function layout(){
let pickC=iframe_body.querySelectorAll('.pickCreative');
for(let k=0; k<pickC.length; k++){
pickC[k].onclick=function(event){
if(event.ctrlKey){
event.preventDefault();
event.stopImmediatePropagation();
card_edit_c(pickC[k]); }
else if(event.shiftKey){
event.preventDefault();
event.stopImmediatePropagation();
card_edit_s(pickC[k]); }
else if(event.altKey){
event.preventDefault();
event.stopImmediatePropagation();
if(!pickC[k].closest('.warH')){ // warH外の場合
get_in(pickC[k]); }
else{ // warH内の場合
get_out(pickC[k]); }}}}
function card_edit_c(C){
if(task==1){
let warC=C.closest('.warC');
if(warC){
if(warC.style.marginLeft!='auto'){
warC.style.marginLeft='auto';
warC.style.marginRight='auto'; }
else if(warC.style.marginLeft=='auto' && warC.style.marginRight=='auto'){
if(warC.closest('.warH')){
warC.style.marginRight='10px'; }
else{
warC.style.marginRight=''; }}
else if(warC.style.marginLeft=='auto' && warC.style.marginRight!='auto'){
if(warC.closest('.warH')){
warC.style.marginRight='10px';
warC.style.marginLeft='10px'; }
else{
warC.style.marginRight='';
warC.style.marginLeft=''; }}}}}
function card_edit_s(C){
if(task==1){
let warC=C.closest('.warC');
if(warC){
if(warC.style.outlineColor==setting[0]
&& warC.style.outlineWidth==setting[1]+'px'){ // 設定一致
warC.style.outline='';
warC.style.outlineOffset='';
warC.style.background='';
warC.style.borderRadius=''; } // 枠線を非表示
else {
warC.style.outline=setting[1]+'px solid '+setting[0];
warC.style.outlineOffset='1px';
warC.style.background='#fff';
warC.style.borderRadius='4px'; }}}}
function get_in(C){
if(task==1){
let editor=iframe_doc.querySelector('.cke_editable');
if(editor){
let warH=editor.querySelector('.warH');
if(warH){
let warC=C.closest('.warC');
if(warC){
warH.appendChild(warC);
warC.style.margin='10px'; }}}
env_sensor();
}}
function get_out(C){
if(task==1){
let editor=iframe_doc.querySelector('.cke_editable');
if(editor){
let warH=editor.querySelector('.warH');
let warC=C.closest('.warC');
if(warC){
editor.insertBefore(warC, warH.nextElementSibling);
warC.style.margin='';
warH.insertAdjacentHTML('afterend', '<p>\u00A0</p>'); }}
env_sensor();
}}
} // layout()
function set_warH(){
let editor=iframe_doc.querySelector('.cke_editable');
if(editor){
editor.onclick=function(event){
if(event.ctrlKey){
let warH=editor.querySelector('.warH');
if(!warH){
set(event); }
else{
if(!warH.querySelector('.pickCreative')){
warH.remove();
set(event); }}}}}
function set(event){
if(task==1){
let elm=iframe_doc.elementFromPoint(event.clientX, event.clientY);
if(elm.tagName=='P' || elm.tagName=='DIV'){
let _warH=iframe_doc.createElement('div');
_warH.setAttribute('class', 'warH');
_warH.style.display='flex';
_warH.style.justifyContent='space-between';
_warH.style.flexWrap='wrap';
_warH.style.alignItems='stretch';
_warH.style.height='auto';
_warH.style.padding='10px 0';
editor.insertBefore(_warH, elm);
editor.blur();
_warH.focus(); }}}
} // set_warH()
function flex_set(){
if(task==1){
let al=document.querySelector('#disp_po .al');
let ab=document.querySelector('#disp_po .ab');
let ac=document.querySelector('#disp_po .ac');
let ar=document.querySelector('#disp_po .ar');
let editor=iframe_doc.querySelector('.cke_editable');
if(editor){
let warH=editor.querySelector('.warH');
if(warH){
al.onclick=function(){
warH.style.justifyContent='flex-start';
neutral_all(); }
ab.onclick=function(){
warH.style.justifyContent='space-between';
neutral_all(); }
ac.onclick=function(){
warH.style.justifyContent='center';
neutral_all(); }
ar.onclick=function(){
warH.style.justifyContent='flex-end';
neutral_all(); }
function neutral_all(){
let warC=warH.querySelectorAll('.warC');
for(let k=0; k<warC.length; k++){
warC[k].style.margin='10px'; }}}}
}} // flex_set()
function bg_color(){
let set_color;
let lc_color=document.querySelector('#lc_color');
let lc_trance=document.querySelector('#lc_trance');
let editor=iframe_doc.querySelector('.cke_editable');
if(editor){
let warH=editor.querySelector('.warH');
if(warH){
let warH_bgc=warH.style.backgroundColor;
if(warH_bgc){
lc_color.style.backgroundColor=warH_bgc;
lc_trance.value=rgba_trance(warH_bgc);
set_color=warH_bgc; }
else{ // 背景色の設定が無い時は、透過のままにする
lc_color.style.backgroundColor='rgb(255, 255, 255)';
lc_trance.value=1;
set_color='rgb(255, 255, 255)'; }
import_color(lc_color, warH, 'bg');
let target_elem=lc_color;
let monitor_elem=new MutationObserver(import_c);
monitor_elem.observe(target_elem, {attributes: true});
function import_c(){
if(target_elem.style.opacity==2){
monitor_elem.disconnect();
setTimeout(()=>{
lc_trance.value=1;
set_color=lc_color.style.backgroundColor;
target_elem.style.opacity=1;
}, 40);
monitor_elem.observe(target_elem, {attributes: true}); }}
lc_trance.addEventListener('input', function(event){
event.preventDefault();
let set_color_tmp=rgba(set_color, lc_trance.value);
let lc_color=document.querySelector('#lc_color');
lc_color.style.backgroundColor=set_color_tmp;
let warH=editor.querySelector('.warH');
if(task==1){
warH.style.backgroundColor=set_color_tmp; }});
function rgba(c_val, alpha){ // 透過色の白背景時の非透過色に変換
let R, G, B;
let c_val_arr=c_val.split(',');
R=c_val_arr[0].replace(/[^0-9]/g, '');
G=c_val_arr[1].replace(/[^0-9]/g, '');
B=c_val_arr[2].replace(/[^0-9]/g, '');
return 'rgb('+cpColor(R, alpha)+', '+cpColor(G, alpha)+', '+cpColor(B, alpha)+')'
function cpColor(deci_code, alp){
const colorCode=deci_code*alp + 255*(1 - alp);
return Math.floor(colorCode).toString(10); }}
function rgba_trance(color_val){
let trance_val;
let c_val_arr=color_val.split(',');
if(c_val_arr.length==3){
trance_val=1; }
else{
trance_val=c_val_arr[3].replace(/[^0-9]/g, '')/10; }
return trance_val; }
}}} // bg_color()
function import_color(sw, target, type){
let color_label;
let icon_button;
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
iframe_doc=editor_iframe.contentWindow.document;
let selection=iframe_doc.getSelection();
if(ua==0){
color_label=document.querySelector('#cke_16_label');
icon_button=document.querySelector('#cke_17'); }
else if(ua==1){
color_label=document.querySelector('#cke_15_label');
icon_button=document.querySelector('#cke_16'); }
let target_p=color_label;
let monitor_p=new MutationObserver(get_copy);
sw.onclick=function(event){
if(task==1){
selection.removeAllRanges(); // 記事中の選択に誤指定を防止
icon_button.click();
monitor_p.observe(target_p, {attributes: true}); }}
function get_copy(){
if(task==1){
if(type=='bg'){
sw.style.backgroundColor=color_label.style.backgroundColor;
target.style.backgroundColor=sw.style.backgroundColor;
sw.style.opacity=2; }
if(type=='bd'){
sw.style.backgroundColor=color_label.style.backgroundColor;
setting[0]=sw.style.backgroundColor;
write_locals(setting); }}
monitor_p.disconnect(); }
document.addEventListener('mousedown', function(){
monitor_p.disconnect(); });
if(document.querySelector('.cke_wysiwyg_frame')!=null){
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){
iframe_doc=editor_iframe.contentWindow.document;
if(iframe_doc){
iframe_doc.addEventListener('mousedown', function(){
monitor_p.disconnect(); }); }}}
let target_body=document.querySelector('.l-body');
let monitor_generator=new MutationObserver(stealth);
monitor_generator.observe(target_body, {childList: true, subtree: true});
function stealth(){
let color_generator=document.querySelector('.ck-l-colorGenerator');
if(color_generator){
color_generator.addEventListener('mousedown', function(event){
event.stopImmediatePropagation(); }); }}
} // import_color()
function bd_color(){
if(task==1){
let lb_color=document.querySelector('#lb_color');
lb_color.style.backgroundColor=setting[0];
import_color(lb_color, '' , 'bd');
}} // bd_color()
function bd_width(){
if(task==1){
let lborder=document.querySelector('#lborder');
let lb_disp=document.querySelector('#lb_disp');
lborder.value=setting[1];
lb_disp.textContent=lborder.value+'px';
lborder.onchange=function(){
lb_disp.textContent=lborder.value+'px';
setting[1]=lborder.value;
write_locals(setting); }
}} // bd_width()
function mem_plus(){
let memo_plus=document.querySelector('#memo_plus');
if(memo_plus){
memo_plus.onclick=function(){
let ok=confirm(
" 🟠 現在の Pick Card 設定を登録します\n"+
" これまでの登録を上書きして良いですか？\n");
if(ok){
setting[2]=setting[0];
setting[3]=setting[1];
let editor=iframe_doc.querySelector('.cke_editable');
if(editor){
let warH=editor.querySelector('.warH');
if(warH){
let warH_bgc=warH.style.backgroundColor;
if(warH_bgc){
setting[4]=warH_bgc; }
let warH_flex=warH.style.justifyContent;
if(warH_flex){
setting[5]=warH_flex; }}}
write_locals(setting); }}
}} // mem_plus()
function mem_paste(){
let memo_paste=document.querySelector('#memo_paste');
if(memo_paste){
memo_paste.onclick=function(){
let lb_color=document.querySelector('#lb_color');
setting[0]=setting[2];
lb_color.style.backgroundColor=setting[2];
let lborder=document.querySelector('#lborder');
let lb_disp=document.querySelector('#lb_disp');
setting[1]=setting[3];
lborder.value=setting[3];
lb_disp.textContent=lborder.value+'px';
let lc_color=document.querySelector('#lc_color');
let lc_trance=document.querySelector('#lc_trance');
lc_color.style.backgroundColor=setting[4];
lc_trance.value=1;
let editor=iframe_doc.querySelector('.cke_editable');
if(editor){
let warH=editor.querySelector('.warH');
if(warH){
warH.style.backgroundColor=setting[4];
warH.style.justifyContent=setting[5];
bg_color();
flex_set();
}}}
}} // mem_paste()
} // main
「Pick Organizer ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Pick Organizer ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
