基盤：YahooでSatoxITSの動画を検索して転げましたｗ
開発：まあ、確かに全部のブログ記事のサイドバーに出ますからね。
基盤：一方その頃Googleでは。
基盤：そしてBingにおいては。
社長：しかしYahooとGoogleはすごいURLですね。トラッキング情報なんでしょうか？
開発：いやな感じですよね。
社長：Googleは文書なら類似のページとかいってまとめちゃうのにね。
基盤：さらに先日見かけた、ROFLの親戚っぽいこの笑いっぷり。
基盤：コンテンツの作りがまた完全に吹っ切れてる感じがします。
社長：まあ awesome って言葉の選択自体が吹っ切れてるように思います。
開発：コンテンツとも関係なく、本能的に反応するものがありますね。この瞳の配置。
社長：このスポンサーシップってなんですかね？
基盤：なにやら検索結果のページ内の広告スペースっぽいです。
開発：この笑い顔を見たらちょっと真剣にお付き合いするのを躊躇しませんかねえ。
社長：ROFLと言えばSkypeだと思っていたのですが、一般用語なんでしょうか？
https://az705183.vo.msecnd.net/onlinesupportmedia/onlinesupport/media/skype/fa300xx/rofl_40x40.gif
基盤：Wikitionaryを見るところ、一般的なスラングのようです。TIAとかIMPOみたいなやつでしょうか。
社長：当社も独自のスマイルマークを作りたいですね。動画で3Dのが良いなあ。パックマンみたいに横顔になったり。Xeysみたいに瞳が何かを追跡するやつとか。
開発：まあJavaScriptのcanvasで書くんでしょうね。
基盤：可愛らしいのが良いですね。
社長：マンガ顔とか、一般に顔のパーツは下のほうについてると幼く可愛く見えますね。
開発：顔の輪郭が真円というのはどうなんでしょうね？
社長：三角や四角い顔があっても良いでしょうね。輪郭が無いとか、パーツがはみ出しちゃってるのもありかも。パックマンみたいに割れてるのとか。
開発：子供の頃にスマイルマークのバッジとかが流行ったんですが、どうもあれはマンガの国日本人の思うカワイイとずれてるんですよね。
基盤：鼻を省略するのはマンガでは普通ですよね。眉をどうするか。前髪は。ってとこですね。
開発：オプションであらゆる顔を合成できるものが良いですよね。
基盤：2つの目と一つの口が三角形状に配置されてるというのだけが制約ですかね。
開発：三つ目とか、一つ目も有りかもです。目に見えるならですが。
基盤：王蟲のあれは目でしたっけ？
社長：Skype ROFL みたいにするには、球面に書いて回転させたり多少膨張させたりも必要だと思います。
基盤：faviconにして動かせると良いのですが。
社長：検索エンジンに収集してもらえるように、画像データになってる版も必要ですね。data URLを書き換え続けるでも良いかもですが。
基盤：画像に日付時刻かシリアルIDを入れると、ロボットが拾ってった時間が判別できてよさそうです。
開発：ともかく、作ってみましょう。まずおさらいですが、MDNのcanvasの入門編より。
<canvas id="canvasSmile1" draggable="true"></canvas>
<style>#canvasSmile1{zoom:100%;resize:both !important;}</style>
<script>
function drawSmile1() {
var canvas = document.getElementById('canvasSmile1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
ctx.stroke();
}
}
drawSmile1();
</script>基盤：この入門編、吹き出し speech baloon の書き方もあって面白いですね。
社長：でも、可愛いスピーチ・バルーンなら、楕円にちょっと出っ張りがあるやつですよね。
基盤：パックマンの例まであるのが笑えます。
開発：MDNには珍しく、example に力が入ってますよね。それはともかく、これ、まず顔は黄色でfillしないとさまにならないですよね。色だけ変えてみましょう・・・
社長、基盤：おおーっ。
基盤：同一人物とは思えないですね。
開発：女は化粧で化けると言いますね。
社長：君よ永遠の嘘をついてくれ♪コロナのマウスで隠してすっぴんはやめてくれー♪
基盤：これは、ほぼひよこですね。
社長：しかしこの原始的な書き方、学生時代に XYプロッタで絵を書いたのを思い出します。OHPシートにｗ
基盤：部品を用意しておたふくみたいにドラッグ＆ドロップできると良いですね。拡大縮小回転とか。
社長：回転はできますかね？
開発：イメージにしてCSSでrotate出来るのと簡単ですね… でも、canvas自体を回すのが良いかもです。あれ？位置が変。。。そうか、canvas のデフォルトのサイズの問題みたいですね。
開発：まあそれはともかく、連続的にまわしてみましょう。
基盤：これはアナログ時計にして秒針にすると良いかもですね。
社長：一箇所で回るっていうのも悪くないですね。
開発：ではcanvasのサイズを指定して作成・・・
社長、基盤：おおーっ。
基盤：これなら邪魔にならないですね。
社長：CPUはどの位食いますかね。
開発：30ミリ秒間隔の描画ですが、ver.3, 4 それぞれ単体で10%、同時に動かすと16%というところです。
基盤：けっこうキャンバスって重いんですかね。
開発：イメージ化して回してみましょう・・・
開発：おーっと、imageのほうが重いですね。canvas が 8%、image が 10%というところです。
開発：ROFLをもうひとつ足してみましょう。
Skype's ROFL
基盤：動きが定期的でないのか、CPU消費が不安定ですね。
開発：どっちにしても2％程度くらいでしょうか？軽いですね。
社長：元データが40x40と小さいのも関係あるでしょうね。
基盤：GIF か PNG のアニメにしたいですね。
開発：でも、canvas のまま回すっていうのも、それ自体が面白いところはあると思います。時事刻々の状況も反映できますしね。
基盤：あとこれ、Edgeだと20％食いますが、Safariだと10%しか食わないみたいに見えます。
＊ ＊ ＊
社長：いっそ、うちのROFLはひよこベースにしようかな。
基盤：でも、ひよこなら口は半円じゃなくてひし形ですよね。
開発：ひよこにふさわしい配色もきちんと調べたいですね。
-- 2020-1030 SatoxITS