scratch addonをショートカットアプリで作ってみよう
scratch addonは便利ですがデメリットがあります
その1つがiphoneでは使えないということです
ということでショートカットアプリでscratch addonを作ってみます
まず完成系はこちらです
少し画質が悪いですが機能を説明すると
ナビゲーションバーの色を変えられ、fpsを表示できて、ダークモード、ダークブロックがあります
現在はこちらだけです
どのような仕組み？
仕組みは単純です
ショートカットアプリのwebページに対してJavaScriptを実行しています
そして共有シートから実行できるようにしています
jsの仕組みは
Scratchの上部メニューバーの色を強制的に上書きしています。
CSSの !important（最優先指定）を使って、Scratch本来の色を無視して新しい色を適用します。画面更新への対策: Scratchは画面が切り替わるたびに要素を再生成するため、普通に変えるだけだと元に戻ってしまいます。そこで MutationObserver という機能（ずっとメニューバーを監視する）を使い、画面に変化が起きたら即座に色を塗り直すという処理を自動で繰り返しています
ダークブロック・ダークモード
Scratchの見た目（CSS）を丸ごと書き換えています。
スクリプトの中で新しい style タグ（CSSを書き込む場所）を作り、その中に「ブロックの色を黒（#292929）にする」
「背景を黒（#202020）にする」という命令を書き込んで、
ページの head (設定エリア）に挿入しています。ボタンが押されたときは、この追加したスタイルシート自体を有効（disabled = false）にしたり無効（disabled = true）にしたりして、瞬時に見た目を切り替えています。
FPS表示（requestAnimationFrame）
画面の描画速度（1秒間に何回画面が更新されているか）
を計測しています。requestAnimationFrame
という、ブラウザの画面更新タイミング（通常は1秒間に60回など）に合わせて関数を実行する仕組みを使っています。
内部で「何回実行されたか」をカウント（frames++）し、0.5秒（500ミリ秒）ごとに経過時間で割り算をして、1秒あたりのフレーム数（FPS）を計算して左上に表示しています。
このような仕組みでiPhoneのショートカットアプリでスクラッチアドオンを作っています
これからも機能をぞくぞくと追加します！
ショートカット版scratch addonの追加はこちらから