Blocklyは非常に優れたプロダクトですが、その歴史の長さからかどうもデザインが古臭いです。簡単なカスタマイズで現代風のデザインにするための設定項目を紹介します。
ブロックに影をつけない
Blocklyの標準設定では、ブロックに影ができるようになっています。
Blockly.injectの際にrendererオプションを指定することで、ブロックのレンダリング方法を変えることができます。このrendererオプションにしていするレンダラーはBlockly.blockRendering.Rendererクラスを継承したクラスで、標準で
- Blockly.geras.Renderer (デフォルト)
- Blockly.minimalist.Renderer (npmの
blocklyパッケージでは使用できなかった) - Blockly.thrasos.Renderer
- Blockly.zelos.Renderer
が定義されています。Googleの謎名前解決システムにより文字列で指定できるようです。
Blockly.inject(element, {
renderer: 'thrasos',
});
時代はフラットデザインです。thrasosレンダラはいい感じにフラットにしてくれます。zelosは尖った感じです。
ブロックの色合いを鮮やかにする
Blockly直下の設定項目を書き換えることで対応できます。Hueはブロックごとに固有の値です。概念自体はよく考えられていますがコードが古臭い・・・。
Blockly.HSV_SATURATION = 0.8;
Blockly.HSV_VALUE = 1;
ブロックの枠線の色を変える
各ブロックはSVGのpathで表現されています。よってCSSの!important指定で上書きすれば変更は自由に行えますが、すべての枠線が同じ色になってしまいます（でも実はそれで十分な場合が多い）。
Blockly.blockRendering.ConstantProvider#generateTertiaryColour_メソッドをオーバーライドすることで、ブロックの背景色から枠線の色を求める挙動を変更できます。ConstantProviderクラスは各レンダラーごとに継承できるようになっていますが、この記事を執筆した時点では標準のレンダラーがTypeScriptの型定義に含まれていませんでした。
ここは原始的ですがprototypeの書き換えで対応してみます。
Blockly.blockRendering.ConstantProvider.prototype.generateTertiaryColour_ =
(colour) => Blockly.utils.colour.blend('#000', colour, 0.3) || colour;
標準では枠線の色はブロックの色より薄くなるのですが、逆に濃くなるようにしてみました。
まとめ
GoogleさんはBlocklyをTypeScript + ES Modulesで書き直してくださいm(_ _)m