Study編 DOMを使ってカスタマイズする

記事作成日: 2023-11-21

draw.ioのAPIを使用しなくてもDOM操作で自分好みにカスタマイズすることもできます｡

Tips

ダイアログを閉じる

私の環境ではdraw.ioの起動時に｢下書き/draft｣ダイアログが毎回表示されるのですが､邪魔なので自動的にキャンセルさせます｡

<script type="text/javascript">
setTimeout(() => {
	document.evaluate("//button[contains(text(), 'Cancel') or contains(text(), 'キャンセル')]", document, null, XPathResult.ANY_TYPE, null ).iterateNext().click()
}, 5000);
</script>
</body>

xpathでキャンセルボタンを探しだしてプログラムからボタンを押してやります｡xpathのor条件で日本語版と英語版に対応しています｡

アプリのindex.htmlの</body>タグの上に自分で<script>を追加してそこにコードを書いています｡

保存場所を指定するダイアログも表示されるので､こちらも閉じておきます｡

document.evaluate("//span[contains(text(), 'Decide') or contains(text(), '後で決める')]", document, null, XPathResult.ANY_TYPE, null ).iterateNext().click()

全画面表示(Fullscreen)

起動時はできるだけすっきりした画面にしたいのでフルスクリーン表示にしてヘッダー､フォーマットパネル､サイドバーを閉じます｡

document.querySelector('[title="フルスクリーン"],[title="Fullscreen"]').click()

なお､draw.ioにはfullscreenという名のaction(api)があるのですが､そちらはWindowを全画面表示(F11キー)するものであり､ややこしいですがこちらの操作とは異なります｡

折りたたむ / 拡げる(Collapse/Expand)

ヘッダー部分だけ折り畳み､展開することもできます｡

document.querySelector('[title="折りたたむ / 拡げる"],[title="Collapse/Expand"]').click()