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

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

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

以下をコピーして既存のブックマークレットに追加する
「アルバムforはっちゃん」の処理の直後に追加するのを推奨

(()=>{const s=()=>{const t=document.querySelector('#canvas98HorizontalMainMenu .canvas98MenuItemParent');if(!t){return}if(document.getElementById('canvas98AlbumButton')){return}const b=document.createElement('li');b.id='canvas98AlbumButton';b.className='canvas98MenuItem material-icons';b.title='アルバム';b.textContent='photo_album';b.addEventListener('click',e=>{e.stopPropagation();const d=document.getElementById('canvas98AlbumDialog');if(d){d.style.display='flex'}});const c=document.createElement('li');c.id='canvas98CopyButton';c.className='canvas98MenuItem material-icons';c.title='クリップボードにコピー';c.textContent='content_copy';c.addEventListener('click',e=>{e.stopPropagation();const g=globalThis.canvas98;if(!g||!g.layers||!g.layers._P){return}if(!navigator.clipboard||!navigator.clipboard.write){return}if(c.disabled)return;try{const p=g.layers._P;p.toBlob(async l=>{if(!l){return}try{await navigator.clipboard.write([new ClipboardItem({[l.type]:l})]);const o=c.style.color||"";c.style.color="#ee6060";c.disabled=true;setTimeout(()=>{c.style.color=o;c.disabled=false},1500)}catch(r){}},"image/png")}catch(err){}});const del=t.querySelector('#canvas98DeleteButton');if(del&&del.parentNode===t){t.insertBefore(b,del.nextSibling);t.insertBefore(c,b.nextSibling)}else{t.appendChild(b);t.appendChild(c)}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',ev=>{ev.stopPropagation();const tw=document.querySelector(se);if(tw){tw.style.visibility=(tw.style.visibility==='hidden'||tw.style.visibility==='')?'visible':'hidden'}});return b};const tB=c('canvas98TimelapseButton','shutter_speed','タイムラプスを作成',tS);const aB=c('canvas98AnimationButton','movie','アニメーション',aS);const rB=c('canvas98RichPaletteButton','palette','リッチパレット',rS);const d=f.querySelector('#canvas98DeleteButton');if(d&&d.nextSibling){let rn=d.nextSibling;if(tB){f.insertBefore(tB,rn);rn=tB.nextSibling}if(aB){f.insertBefore(aB,rn);rn=aB.nextSibling}if(rB){f.insertBefore(rB,rn)}}else if(d){if(tB)f.appendChild(tB);if(aB)f.appendChild(aB);if(rB)f.appendChild(rB)}else{if(tB)f.appendChild(tB);if(aB)f.appendChild(aB);if(rB)f.appendChild(rB)}if(tW){const cb=tW.querySelector('.canvas98MenuItem[title="閉じる"]');if(cb){cb.addEventListener('click',ev=>{ev.stopImmediatePropagation();tW.style.visibility='hidden'},true)}}const sI='canvas98-menu-fixed-wrap-single-stage-abs-style-v2';let eS=document.getElementById(sI);if(!eS){eS=document.createElement('style');eS.id=sI;document.head.appendChild(eS)}eS.textContent='#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.menu-wrapped { flex-wrap: wrap; } #canvas98HorizontalMainMenu.menu-wrapped > li:nth-child(1) { order: 1; margin-left: 0; } #canvas98HorizontalMainMenu.menu-wrapped > li:nth-child(2) { order: 3; margin-left: 50px; margin-right: 200px; } #canvas98HorizontalMainMenu.menu-wrapped > li:nth-child(3) { order: 2; margin-left: 0; position: absolute; right: 0; } #canvas98HorizontalMainMenu.menu-wrapped > li:nth-child(n+4) { order: 4; margin-left: 50px; }';let iw=0;const wc='menu-wrapped';const ci=()=>{let to=0;const ch=h.children;if(ch.length===0)return 0;for(let i=0;i{if(iw<=0){return}const cu=h.offsetWidth;if(cu{iw=ci();if(iw>0){cw();window.addEventListener('resize',cw)}else{setTimeout(()=>{iw=ci();if(iw>0){cw();window.addEventListener('resize',cw)}},500)}},300)};w().then(l=>{if(l){s();setTimeout(()=>{const rp=document.querySelector('.canvas98-rich-palette-window');if(rp&&(rp.style.visibility!=='hidden')){rp.style.visibility='hidden'}},500)}})})();

使い方

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

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

はっちゃんキャンバス本体 (はっちゃんキャンバス.html もしくは既にブラウザに登録してあるブックマークレット) が必要

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

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

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

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

ここだけ抜き出して

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

と繋げていく

Firefoxの注意とか

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

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

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

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

注意点