みんなでつくろう！ナチュラルハーモニー

このブログはD@NPEN Advent Calendar 2020 - Adventarの18日目の記事です。

前日は id:hara_eater 君の nil でした。どんな記事になるんでしょうか。

今日はタイトル通りです。タイトル通りとは。

前回の内容の発展なので是非こちらも。

yaya.hatenadiary.com

みんなで！

さて、前回の文末に書いた通り、実装した内容にはこれらの課題がありました。

色の変換を考えるときに最大値しか考えておらず青紫が最小ではない(記事を書いてる途中で気がついた)

気軽に使えない

そもそもナチュラルハーモニー(配色)と言えるのか

元々の目的もあり、たくさんの人に使ってもらうためにも気軽さは大事です。

そこで！つくりました！

create-natural-harmony.web.app

f:id:shilfol:20201218224309p:plain — みんなでつくろう！ナチュラルハーモニー

みんなで！！！つくろう！！！ナチュラルハーモニー！！！！！

使いかた

画像を選ぶ
スライダーを使ってナチュラルハーモニー度を調整する
ナチュラルハーモニー！
値を調整して自分の好きなナチュラルハーモニーにする
ナチュラルハーモニー！！！！！
調整が終わったら画像を保存
広がるナチュラルハーモニー！！！！

かんたん！

このサイトのつくりかた

前回の記事でナチュラルハーモニー処理をGoによって実装しました。

GoのプログラムをJavaScriptに乗せることはできませんが、WebAssemblyという技術を使うことでそれが可能になるようです。

WebAssembly · golang/go Wiki · GitHub

Goは様々な環境に対応するバイナリにコンパイルを簡単に行うことができますが、WebAssemblyも例外ではありません。

単純なコンパイルであれば、次の一文で行うことができます。

GOOS=js GOARCH=wasm go build -o ./web/wasm/nh.wasm ./cmd/wasm/main.go

ここで出力されたwasmファイルと、Go本体に同梱されているjsファイルをhtmlで読み込んであげると実行できます。

さらに、上記のコマンドでコンパイルを行う際、"syscall/js"ライブラリを読み込むことで、Goのプログラムでhtml要素が操作ができます！

今回はCanvasやContextの値をGoのプログラム上で取得しながら処理を行っています。

document := js.Global().Get("document")

outputCanvas := document.Call("getElementById", "outputNaturalHarmony") // 第一引数に関数名, その後ろは関数に与える引数
ctx := outputCanvas.Call("getContext", "2d")

cvWidth := outputCanvas.Get("width") //パラメータ取得も
cvHeight := outputCanvas.Get("height")

// canvasのbyte列をuint8の形で読み込む
data := ctx.Call("getImageData", 0, 0, cvWidth, cvHeight).Get("data")
uarr := js.Global().Get("Uint8ClampedArray").New(data) // JavaScriptのインスタンス生成
garr := make([]byte, data.Get("length").Int()

前回の内容を含めて、細かい実装などが気になる方はリポジトリを覗いてみてください。

github.com

Q.これ(JavaScriptだけorその他言語)でよくない？

A. Goで実装しちゃったんだもん・・・・・・

あとGo+wasmに興味あったので。趣味で書くプログラムは自由にやりたいよね。

おわりに

なんだかんだで自分だけの要素でWebページ作るのが初めてでした（多分）。見切り発車でここまでできてよかったなって。

書き終わってみましたが、これアイマスのアの字もなくない？ まぁそういう時もあるということで何とか。

明日はとびっぴい君です。

A little Cafe Times

日々のちょっとしたこと