本日のおススメコードプレーグランデ

本日のおすすめコードプレーグランデ ～そよ風を添えて

はい、おはようございます。僕です。今日も今日とて何も語ることなんてないのにブログとか更新してしまいました。褒めてください。まあ、褒められる要素どこにもないですけどね……。

てなわけで、今日もブログの更新のためのどうでもいいネタを仕入れてしまったのでお暇なら見ていきなさい。

HTMLエディタさわってみた

本日は場末のユーチューバーみたいに商品紹介系な記事でも書いていこうと思います。

Liveweaveなるものをやってみた。
https://liveweave.com/
これが何かといえば、HTMLを書けるプレイグラウンドです。

他よりも機能少なめで使うにしても何を今更って気がしたんです。でも、登録してみたら作ったやつのView数を把握できたりするっぽいので紹介します。精度とかそういうのはよくわからないですけどね。

んで、とりあえず目玉機能は左側にある謎ツール集だと思う。

CSSジェネレータ
https://liveweave.com/cssgen/index.html
CSSジェネレータです。細かいところまではいじれないですけど、なんかいじれます。

色とか
https://liveweave.com/colors/index.html
色とかのカラーコードを良い感じにいじれるやつです。

SVGつくるやつ
https://liveweave.com/designer/index.html
ロゴとかそういうのがつくれます。

以上です。使い方は己の直感とかを信じて使い倒してやってください。

つくってみた

さて、これだけだとコードを一文字も書いてないので、感想も何も言えません。というわけで何かしら書いてみてレビューしていきたいと思います。で、ライブラリにFabricなる謎のツールあったのでそれを使ってみることにします。

公式
Fabric.js Javascript Canvas Library

つくったやつ
Fabric練習
公式サイトにあるように、オブジェクトをぐりぐり動かせます。この例だと真ん中の赤い円。なんだかよくわかんないけど、これすごいぞって思って触ってたんだけど、特にこの機能を利用して作ってみたいアプリとか現状思いつかなかった……。なのでサンプル丸パクリリスペクトです。

(function() {
  // 適用するCanvasタグを指定
  var canvas = new fabric.Canvas('myCanv');
  // Canvasに追加
  canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 300, left: 300 }));
  // 設定とか
  canvas.selectionColor = 'rgba(0,255,0,0.3)';
  canvas.selectionBorderColor = 'red';
  canvas.selectionLineWidth = 2;
})();

ちなみに大まかな使い方はこんな感じです。v1.3.0で確認しているので最新版と多少違いとかあるのだろうけど、まあ大したこと書いてないからとりあえず操作感を覚えるってこれで勘弁。

Liveweaveの方の使ってみた感想としては、先にJSFiddleみたいのでVueとかReactとか触っていたので機能に物足りなさがすごいある。あと、JSはconstとかclassとかそういう新しめの記法で書くとLintにキレられるの納得いかない。でもまあ、即時プレビュー機能とかあるんでCSSの確認とかに使うにはいいかもしれないです。使ってみた感想としてはそんな感じです。