初めてのJavaScript 読書中です

こんにちは、石川さんです。

最近、思うところがあって、JavaScriptの勉強を始めました。今読んでいるのは、そう「初めてのJavaScript 第3版」です。Angularを使い始めたので本来はTypeScriptの勉強、と言いたいところですが、一冊本を読んで、先にJavaScriptだな、という気持ちになったのでした。

いや～、JavaScript、思っていたよりも、色々とできるのですねぇ。テンプレートリテラルとか、クロージャとか、完全にPythonだけのものだと思っていたのですけど、いや、視野が狭かったですね！反省しました。

せっかく勉強しているので、色々と披露したいよねぇ、という気持ちになってきたところで気になりました。そういえばWordPressのこのページ、JavaScriptを使用できるのでしょうか。先日調べたところ、ブロックを選択すればできる、ということがどこかに書かれていましたので、ちょっと試してみましょう。

ブロックの追加

まずは、ブロックを追加します。「カスタムHTML」が選べるので、こちらを選択します。

すると、以下のように「HTMLを入力…」となりますので、ここへスクリプトを記載して行きます。「プレビュー」を押すと実行結果のプレビューが表示されます。

入力して保存したところ、簡単にできました！

【1つ目】

【2つ目】

できましたね！

簡単でした♪

今回入力したスクリプトは以下の通りです。

まずは【１つ目】です。ほぼこちらのスクリプトをコピペしたものです。Konva.jsという、HTML5 2d canvasのためのJavascriptライブラリを紹介しているホームページです。
HTML要素のidがページ全体にかかわってくるので、idは、container20230303_1に変更しました。（すみません、後で気づきました。調子にのって、他の記事でもcontainerを使ったところ、一覧で見たときにかぶって変なことになってしまいました。。。）

次に【２つ目】のスクリプトです。

<style>
div#container20230303_2 {
  height: 200px;
  width: 116%;
  background-color: ivory;
}
</style>
<div id="container20230303_2"></div>
<script src="https://unpkg.com/konva@8/konva.min.js"></script>
<script>
var height = 200;
var width = window.innerWidth;
      var resourceColor = 'rgb(185, 247, 247)';
      var eventColor = 'rgb(245, 200, 247)';
      var stage = new Konva.Stage({container: 'container20230303_2', width: width, height: height, draggable:true});
      stage.on('contextmenu', function (e) {
        e.evt.preventDefault();
      });
      var layer = new Konva.Layer();
      stage.add(layer);
      function newBox(title, type) {
        return new Konva.Rect({
          cornerRadius: 10,
          fill: type === "resource" ? resourceColor : eventColor,
          stroke: 'black',
          strokeWidth: 1,
          name: 'rect',
          draggable: true,
          sceneFunc: function (context, shape) {
            shape._sceneFunc(context);
            context.beginPath();
            context.moveTo(0,20);
            context.lineTo(shape.getAttr('width'),20);
            context.moveTo(shape.getAttr('width')/2,20);
            context.lineTo(shape.getAttr('width')/2,shape.getAttr('height'));
            context.stroke();
            context.closePath();
            context.font = '12px sans-serif';
            context.fillStyle = "rgb(0, 0, 0)"
            context.fillText(title,25,17);
          }
        });
      };
      var rect1 = newBox("リソース", "resource");
      rect1.setAttrs({x: 60, y: 60, width: 100, height: 90});
      layer.add(rect1);
      var rect2 = newBox("イベント", "event");
      rect2.setAttrs({x: 260, y: 60, width: 100, height: 90});
      layer.add(rect2);
rect2.on('click', (event) => {console.log('clicked!', event);});
</script>

簡単に色々なことができるので、夢が広がりますね！