naosim

[naosim]

Exploring Node-RED: A Visual Programming Journey and Its Implications for Future Coding Styles

Hello. I'm Naosim. Recently, I discovered a visual programming tool called Node-RED. With this tool, you can create software visually by connecting processes via lines on a browser. While it requires your own server as the runtime, for now, I've just installed it on my PC to play around. Till this point, I've been doing text-based programming, but coding on UI is a fresh and fun experience. However, several doubts arise when I think if coding would take this style in the future? This time, I tried to create some simple software using Node-RED, a visual programming tool, and compare it with text-based programming. I hope this article will give you a taste of visual programming.

The software I created this time is a tool that posts to Misskey the content posted on Mastodon. Specifically, it monitors my own posts on Mastodon every 30 minutes, and if there's a post, it also posts the same content to Misskey.

The good thing, first off, as you can understand from the name "Visual Programming", it's visually comprehensible. In text programming, for instance, in object-oriented programming, looking at class design makes the whole image easy to understand, but sometimes the understanding does not progress without the entry point, the start of processing. Also, in the case of creating a WebAPI, it is often difficult to understand how many endpoints there are. In the case of Node-RED, you can quickly see the "end parts" are the entry points just by looking at it. Also, simply being able to write code in Japanese might make it more understandable.

The area to improve; Node-RED, with its selling point of being visually constructed, cannot display changes through diff. In text programming, code reviews are based on diff, but that's not possible here. There is a function to export the code in JSON format, so version management is possible, but showing a diff of JSON doesn't mean much.. So, for the time being, it might be difficult to carry out code reviews in team development. Therefore, it seems difficult without technical progress on how to display diff for team development.

In conclusion, this is my impression of using Node-RED. I've just started, but the conclusion at this point is "It's fun for personal hobbies, but not suitable for team development in a professional context." However, I think this visual development style is important in terms of lowering the barriers to software development, so I would like to keep up with the trends in the future.

[naosim]

7年ぶり

[naosim]

【enchant.js】Mapの座標に小数が入ると表示が崩れる

個人的にenchant.jsの最大の長所はMapクラスで当たり判定までやってくれることだと思う。 他のゲーム用ライブラリでもMapクラスはあるけどそこまではやってくれない。

そんな便利なMapクラスですが 最近使ったら表示がおかしくなってしまったので 原因を調べたら、座標に小数が入るダメってことが分かったのでメモ。

実験：Mapをちょっとずつ動かしてみる

enchant.js公式の��ンプルコードをちょっと弄ります。 こんな感じ。

map.on('enterframe', function() { map.y += 0.1;// 少しずつ動かす })

実行結果はこちら

変な線がでるーーーーー。。

以前から小数が入るとドットがにじんだりして モヤモヤした気分になることがあったんだけど ここまで致命的な表示崩れはなかったと思うんだけどなぁ。 最近のブラウザのアップデートでこうなったような気がする。。

解決策：小数をなくす

基本的に小数を無くして 整数にしてあげればいいんだけど 物理エンジンとか使ってると整数で計算するのは厳しい。

なので物理エンジンの計算用変数を別途用意しておきます。

map.realY = 0.0;// 計算用変数 map.on('enterframe', function() { map.realY += 0.1;// 少しずつ動かす map.y = Math.floor(map.realY);// 整数化 })

めでたし。めでたし。

[naosim]

tumblotteのテスト

tumblrに投稿するアプリ「tumblotte」のテストです。

var a = 1;

表

名前 年齢 hoge 3 foo 4

h1

h2

h3

[naosim]

markdown変換

変換

marked.setOptions({ highlight: function (code) { console.log("con") return hljs.highlightAuto(code).value; } }); document.getElementById('exchangeButton').addEventListener('click', function() { var source = marked(document.getElementById('inputarea').value); document.getElementById('mdExchangedContent').innerHTML = source; document.getElementById('textarea').value = source; }); document.getElementById('inputarea').addEventListener("keydown", function(e) { if (e.keyCode === 9) { e.preventDefault(); var elem = e.target; var val = elem.value; var pos = elem.selectionStart; elem.value = val.substr(0, pos) + '\t' + val.substr(pos, val.length); elem.setSelectionRange(pos + 1, pos + 1); } });

[naosim]

シェルのツールを作りたい

たとえば引数に名前と年齢が必要なシェルがあったとして

./person “mike” 24

を実行すると

OK?(y/N)

って確認してから実行する。

./person

を実行すると

name? age?

て聞いてくれて

OK?(y/N)

で実行。

./person “mike” 24 -f

なら確認なしで実行 ってのが簡単に作れるライブラリがほしい。 使う側の実装イメージはこんな感じ。

$name = `input “name” 1 $@` $age = `input “age” 2 $@` input confirm $@

[naosim]

equalsの一般契約

忘れそうなのでメモ。

x != null ならば x.equals(x) は true x.equals(y) == true ならば y.equals(x) は true x.equals(y) == y.equals(z) == true ならば x.equals(y) は true x, yの状態が変わらないければ、x.equals(y)は毎回同じ結果になる x.equals(null) は false

[naosim]

PhaserのGroupを使う

PhaserのGroupを使うとこんな感じのゲームが簡単に作れます。 クリック ポイントはもちろんGroup。 通常、プレイヤとコインの当たり判定をするためには コインの数だけ判定処理が必要ですが コインをGroup化すればプレイヤとGroupとの当たり判定だけで済みます。 コード上で言うとこの部分。 game.physics.arcade.overlap(player, coinGroup, function(player, coin) {} ...) プレイヤとGroupの当たり判定してるけど、コールバック関数の引数はプレイヤとコイン(グループ内のスプライト)になります。 あとGroupにしておくと、死んだスプライトを再利用できます。 var coin = coinGroup.getFirstDead(); ありがたや、ありがたや。 あと地味にSpriteのdamageが便利。 最初にsprite.healthにヒットポイント的な値を入れおいて そこにdamageを与えると、ゼロになったタイミングで死にます。 要するにPhaserのスプライトはキャラクターの生死の管理もしてくれるんですね。 他にも画面の外に出たら死ぬ設定ができたりして ゲームに必要な機能はたいてい入ってます。 至れり尽くせり。 ありがたや。ありがたや。

[naosim]

PhaserのRopeを使って魚を泳がす

Ropeを使うとこんな感じでSpriteをグニャグニャさせることができます。 クリック コードはこんな感じ。 game.add.rope()でSprite上の紐の位置を定義したpointsを渡します。 あとはそのpointsをupdateAnimation()内でいじるだけ。 内部的にはSpriteがverticesとかそうゆう情報を持ってて、それをいい感じにいじってるみたい。なのでそれを直接いじればもっと複雑な動きができるかも。 参考：Ropeのソース

[naosim]

記事内でjs実行

ボタン document.querySelector('#button_123').addEventListener('click', function(){ alert(document.querySelector('#input_123').value); }); codepen

See the Pen orBnI by miu (@miu0512) on CodePen.

[naosim]

マークダウンテスト

ソースコード

var a = 10; var str = "hoge";

[naosim]

tumblrはhtmlがはれるのかな？テスト。 hoge

[naosim]

tumblrはじめた。

facebookとtwitterも連携してみた〜〜。テストテスト〜。