はっちゃん拡張をボタン化する拡張 (SOFT_22_0075 版)

はっちゃんキャンバスやはっちゃん拡張を前提として動かすものなので、それらのスクリプトは例の場所とかから入手してください。

アルバムのボタン化、キャンバス内容をクリップボードにコピーするボタンを追加

以下をコピーして既存のブックマークレットに追加する
「アルバムforはっちゃん」の処理の直後に追加するのを推奨
コピーボタンを長押しするとpngファイルとしてダウンロードできる

(()=>{const f=()=>{const n=new Date();const y=n.getFullYear();const m=(n.getMonth()+1).toString().padStart(2,'0');const d=n.getDate().toString().padStart(2,'0');const h=n.getHours().toString().padStart(2,'0');const mi=n.getMinutes().toString().padStart(2,'0');const s=n.getSeconds().toString().padStart(2,'0');return `${y}-${m}-${d}_${h}${mi}${s}`};const dl=()=>{try{const g=globalThis.canvas98;if(!g||!g.layers||!g.layers._P){return}const p=g.layers._P;const fn=`${f()}.png`;p.toBlob(b=>{if(!b){return}const u=URL.createObjectURL(b);const lk=document.createElement('a');lk.href=u;lk.download=fn;lk.click()},"image/png")}catch(e){}};const s=()=>{const t=document.querySelector('#canvas98HorizontalMainMenu .canvas98MenuItemParent');if(!t){return}if(document.getElementById('canvas98AlbumButton')){return}const ab=document.createElement('li');ab.id='canvas98AlbumButton';ab.className='canvas98MenuItem material-icons';ab.title='アルバム';ab.textContent='photo_album';ab.addEventListener('click',e=>{e.stopPropagation();const d=document.getElementById('canvas98AlbumDialog');if(d){d.style.display='flex'}});const cb=document.createElement('li');cb.id='canvas98CopyButton';cb.className='canvas98MenuItem material-icons';cb.title='コピー (長押しでダウンロード)';cb.textContent='content_copy';let lt=null;let l=false;const ld=500;const st=()=>{l=false;lt=setTimeout(()=>{l=true;dl()},ld)};const cl=()=>{if(lt){clearTimeout(lt);lt=null}};cb.addEventListener('mousedown',e=>{if(e.button!==0)return;st()});cb.addEventListener('mouseup',cl);cb.addEventListener('mouseleave',cl);cb.addEventListener('touchstart',st,{passive:true});cb.addEventListener('touchend',cl);cb.addEventListener('touchcancel',cl);cb.addEventListener('click',e=>{e.stopPropagation();if(l){l=false;return}const g=globalThis.canvas98;if(!g||!g.layers||!g.layers._P){return}if(!navigator.clipboard||!navigator.clipboard.write){return}if(cb.disabled)return;try{const p=g.layers._P;p.toBlob(async b=>{if(!b){return}try{await navigator.clipboard.write([new ClipboardItem({[b.type]:b})]);const o=cb.style.color||"";cb.style.color="#ee6060";cb.disabled=true;setTimeout(()=>{cb.style.color=o;cb.disabled=false},1500)}catch(r){}},"image/png")}catch(err){}});const del=t.querySelector('#canvas98DeleteButton');if(del&&del.parentNode===t){t.insertBefore(ab,del.nextSibling);t.insertBefore(cb,ab.nextSibling)}else{t.appendChild(ab);t.appendChild(cb)}setTimeout(()=>{const a=document.getElementById('canvas98AlbumDialog');if(a&&!a.isRemoveOverridden){a.originalRemove=a.remove;a.remove=function(){this.style.display='none'};a.isRemoveOverridden=true;a.addEventListener('click',e=>{if(e.target===a){e.stopPropagation();a.style.display='none'}},true)}},500)};if(globalThis.canvas98Loaded&&typeof globalThis.canvas98Loaded.then==='function'){globalThis.canvas98Loaded.then(s).catch(e=>{})}else{setTimeout(s,1000)}})();

アルバムボタン化+コピーボタン ←これをブックマークに登録すると単体実行も可能

※単体で実行する場合は、アルバムウィンドウが表示されている状態で実行する必要がある

タイムラプス、アニメーション、リッチパレットのボタン化

以下をコピーして既存のブックマークレットに追加する
「はっちゃん拡張」の処理を全部終えたあとに追加するのを推奨

(()=>{const w=async()=>{if(globalThis.canvas98Loaded&&typeof globalThis.canvas98Loaded.then==='function'){try{await globalThis.canvas98Loaded;return true}catch(e){return false}}else{await new Promise(r=>setTimeout(r,1500));return!!document.getElementById('canvas98Element')}};const s=()=>{const h=document.getElementById('canvas98HorizontalMainMenu');const f=h?.querySelector('.canvas98MenuItemParent');const tS='#canvas98TimeLapseWindow';const aS='#canvas98AnimationWindow';const rS='.canvas98-rich-palette-window';const tW=document.querySelector(tS);const aW=document.querySelector(aS);const rW=document.querySelector(rS);if(!h||!f){return}if(tW)tW.style.visibility='hidden';if(aW)aW.style.visibility='hidden';if(rW)rW.style.visibility='hidden';const c=(i,ic,ti,se)=>{if(document.getElementById(i)){return null}const b=document.createElement('li');b.id=i;b.className='canvas98MenuItem material-icons';b.title=ti;b.textContent=ic;b.style.userSelect='none';b.addEventListener('click',e=>{e.stopPropagation();const tw=document.querySelector(se);if(tw){tw.style.visibility=(tw.style.visibility==='hidden'||tw.style.visibility==='')?'visible':'hidden'}});return b};const tB=tW?c('canvas98TimelapseButton','shutter_speed','タイムラプスを作成',tS):null;const aB=aW?c('canvas98AnimationButton','movie','アニメーション',aS):null;const rB=rW?c('canvas98RichPaletteButton','palette','リッチパレット',rS):null;const d=f.querySelector('#canvas98DeleteButton');const bt=[tB,aB,rB].filter(b=>b!==null);if(bt.length>0){if(d){d.after(...bt)}}if(tW){const cb=tW.querySelector('.canvas98MenuItem[title="閉じる"]');if(cb){cb.addEventListener('click',e=>{e.stopImmediatePropagation();tW.style.visibility='hidden'},true)}}};w().then(l=>{if(l){s();setTimeout(()=>{const r=document.querySelector('.canvas98-rich-palette-window');if(r>amp;&(r.style.visibility!=='hidden')){r.style.visibility='hidden'}},500)}})})();

タイムラプス、アニメーション、リッチパレットのボタン化 ←これをブックマークに登録すると単体実行も可能

※単体で実行する場合は、タイムラプス、アニメーション、リッチパレットのウィンドウが表示されている状態で実行する必要がある
※ウィンドウを閉じていたり、そもそも読み込んでいない機能のボタンは表示されない

上部メニューがはみ出すときに折り返して表示する

以下をコピーして既存のブックマークレットに追加する
一番最後に実行されるように追加するのを推奨
横幅が狭くてボタンがはみ出るときに

(()=>{const w=async()=>{if(globalThis.canvas98Loaded&&typeof globalThis.canvas98Loaded.then==='function'){try{await globalThis.canvas98Loaded;return true}catch(e){return false}}else{await new Promise(r=>setTimeout(r,1500));return!!document.getElementById('canvas98Element')}};const s=()=>{const h=document.getElementById('canvas98HorizontalMainMenu');if(!h){return}const i='canvas98-menu-wrap';let e=document.getElementById(i);if(!e){e=document.createElement('style');e.id=i;document.head.appendChild(e)}const c=()=>{const ch=h.children;const l1=ch[0];const l2=ch[1];const l3=ch[2];if(!l1||!l2||!l3){return false}const w1=l1.offsetWidth;const w2=l2.offsetWidth;const w3=l3.offsetWidth;const b1=w1+w2+w3;const b2=w1+w3;if(b1<=0||b2<=0){return false}const m1=b1-1;const m2=b2-1;const cs=`#canvas98HorizontalMainMenu { display: flex; flex-wrap: nowrap; position: relative; } #canvas98HorizontalMainMenu > li { flex-shrink: 0; order: initial; margin-left: 0; position: static; right: auto; margin-right: 0; } #canvas98HorizontalMainMenu > li:nth-child(1) { margin-top: 0; margin-left: 0; } #canvas98HorizontalMainMenu > li:nth-child(2) { transform: none; } #canvas98Element > div > div:nth-of-type(2) { transform: none; } @media (max-width: ${m1}px) { #canvas98HorizontalMainMenu { flex-wrap: wrap; } #canvas98HorizontalMainMenu > li:nth-child(1) { order: 1; margin-left: 0; } #canvas98HorizontalMainMenu > li:nth-child(2) { order: 3; margin-left: 50px; margin-right: 200px; transform: none; } #canvas98HorizontalMainMenu > li:nth-child(3) { order: 2; margin-left: 0; position: absolute; right: 0; } #canvas98HorizontalMainMenu > li:nth-child(n+4) { order: 4; margin-left: 50px; } #canvas98HorizontalMainMenu > li:nth-child(1) { margin-top: 0; margin-left: 0; } #canvas98Element > div > div:nth-of-type(2) { transform: none; } #canvas98AlbumDialog > div { width: calc(100% - 150px) !important; height: calc(100% - 200px) !important; } } @media (max-width: ${m2}px) { #canvas98HorizontalMainMenu > li:nth-child(1) { margin-top: 50px; margin-left: 50px; } #canvas98HorizontalMainMenu > li:nth-child(2) { transform-origin: top left; transform: scale(0.889); } #canvas98Element > div > div:nth-of-type(2) { transform: scale(0.6); transform-origin: right; } #canvas98AlbumDialog > div { width: calc(100% - 80px) !important; height: calc(100% - 200px) !important; } }`;e.textContent=cs;return true};setTimeout(()=>{if(!c()){setTimeout(()=>{c()},500)}},300)};w().then(l=>{if(l){s()}})})();

メニューがはみ出るときに折り返す ←これをブックマークに登録すると単体実行も可能

使い方

というかブックマークレットのまとめ方

ブラウザのブックマーク編集ウィンドウで作業すると絶対おかしくなるので、メモ帳などを使う

このページのスクリプトを動かすには、はっちゃんキャンバス本体 (はっちゃんキャンバス.html もしくは既にブラウザに登録してあるブックマークレット) が必要

右クリックをしてリンクをコピーしてメモ帳などに貼り付けると
はっちゃんキャンバスのブックマークレットの中身は

javascript:{
      (() => { /* すごいいっぱいの処理 */ })();
    }

こういう構造になっているので、別のブックマークレットとつなげたい場合は

(() => { /* すごいいっぱいの処理B */ })();

ここだけ抜き出して

javascript:{
      (() => { /* すごいいっぱいの処理A */ })();
      (() => { /* すごいいっぱいの処理B */ })();
      (() => { /* すごいいっぱいの処理C */ })();
      …
    }

と繋げていく

※はっちゃん本体が入っている処理は必ず先頭にする
※「アルバムボタン化」の処理は、「アルバムforはっちゃん」の処理よりも後ろに持ってくる
※「タイムラプスなどボタン化」の処理は、それぞれの機能を追加する処理よりも後ろに持ってくる
※はっちゃんキャンバスはjavascript:{ }で囲む書き方を採用しているが、他の書き方もあるので他のブックマークレットをまとめたい場合は注意

Firefoxの注意

FirefoxはブックマークのURL欄に登録できる文字数が短めなようなので、2つ以上のブックマークレットに分割しないと動作しないことがある

他のブラウザも文字数制限はあるので、あまりに長いと分割する必要があるかも

どうしても分割したくない場合

Hatena::Letというサービスを使うと文字数制限が実質なくなる
Hatena::Letでは基本的にはjavascript:{ /* いろいろな処理 */}をそのまま貼り付ければ登録できる
新規登録時にデフォルトで入っている説明文みたいなところに@privateの行を追加すると、URLを知っている人だけがアクセスできるようになる
@privateを追加しないとトップページで公開される

はっちゃんキャンバスのメインスクリプトはHatena::Letにそのまま貼り付けてもおそらく構文エラーになって登録できないので、以下の処理が必要になる

javascript:{(() => { /* すごいいっぱいの処理 */ })();} をメモ帳などに一旦貼り付ける
置換機能を使って、+を%2Bにすべて置換する (結構重要)
URLデコードできるWebサイト (こことか) でURLデコードをする (エンコードの方ではない)
必要なら、JavaScriptを見やすくするWebサイト (こことか) で見やすくする
Hatena::Letで貼り付けても構文エラーにならなくなる

おまけ

はっちゃんキャンバスをふたば以外でも開けるようにするスクリプト

これをはっちゃん本体の処理よりも先に持ってくると、ふたば以外でもはっちゃんキャンバスが開けるようになる
クリップボードにコピーするボタンといっしょに使えば、クリップボードからの貼り付けに対応してるサイトへの投稿はそんなに困らないかも

(()=>{if(!(document.getElementById("oejs")||document.getElementById("oebtnj")||document.getElementById("oebtnj_f"))){var c=document.createElement("canvas");c.style.display="none";c.id="oejs";c.width=344;c.height=135;document.body.appendChild(c);var x=c.getContext("2d");x.fillStyle="#f0e0d6";x.fillRect(0,0,c.width,c.height)}})();

ふたば以外でもはっちゃんキャンバスを開けるようにする ←これをブックマークに登録すると単体実行も可能

注意点

ふたばトップページみたいな、インラインフレームを使って画面分割しているようなページではちゃんと動かない
サイト側のセキュリティ設定が厳しいと動作しない
はっちゃんキャンバスで絵がかけるだけで、手書きjsを使っていないサイトではキャンバス内容を直接投稿することはできない (アルバムなどから画像として一旦保存する必要がある)
mayとimgでアルバム内容が別になるように、アルバム内容はドメインごとに別々に保存される (IndexedDBという仕組みでブラウザのストレージに保存される)
http:// と https:// でも別々に保存される
ブラウザや端末が異なってもアルバム内容は共有されない
同じ理由で、はっちゃんキャンバス内のペン設定なども共有されない