SPLOUT BLOG - Part 79

canvasで ”うにょうにょ動く円” を ”複数” 作ってみました

こんにちは、相変わらずプログラミングが覚えられないLQヒロシです。

業務の流れでcanvasで複数のうにょうにょ動く円を作ったのでレシピをまとめてみました。
参考にしたのはこちらの記事。
JavaScriptはじめました。 – くねくねする円を作ってみた。
NIJIBOX Creator’s Blog – JavaScriptで実装！理想の「うにょうにょ動く円」を求めて…

ただ上記の記事の内容では一つの円しか作れませんので、次の記事も参考にしてゴニョゴニョしてみました。

https://jsfiddle.net/39we73t1/

完成はこちら

See the Pen NLrpJv by hirotatsu fujimoto (@LQ_Hiroshi) on CodePen.

script全文はこちら

さっそく作り方を

うにょうにょ動く円の考え方としてはこちらの「くねくねする円を作ってみた」に詳しく載っていますので、ざっと簡単に言うと、

・１０個のアンカーポイントをサークル上に２次元ベジェ曲線で作成し線でつなぐ
・コサイン波を利用して各ポイントをそれぞれ動かす

という感じでしょうか。実際のコードを見ながら説明していきたいと思います。

アンカーポイントはPointオブジェクトで生成しています。
ここはコサイン波の計算式が主になっていて、数学がからっきしの私は脳死で参照させていただいております。テヘ。
ちなみに9、10行目のthis.speedとthis.rが乱数になっているのでこの数値を変更すると、うにょうにょするスピードや幅を調整できます。

次にイニシャル関数。一つの円だけで良ければPointオブジェクトをMAX（ポイントの数）分だけインスタンス化すれば良いのですが、複数の円を作成する場合はそれぞれの円で配列を作り、それぞれの円ごとにMAX分のpointインスタンスを持つというカタチで行っています。

円の配列については最初に定義（circles）していて、こちらに中心点座標、色、半径などのパラメーターを設定しています。中心座標と半径はPointオブジェクトに引き継がれ、色と各ポイントの配列は後述するdrawCircle関数に引き継がれています。

そしてイニシャル関数からupdate関数を呼び出し、Pointオブジェクトのupdateメソッドを呼び出して実際のアンカーポイントを生成しています。考え方は参照記事と同様なのですが、複数円を対応するのでこちらでも各円ごとに処理を行う必要がでてきます。
ポイントを生成したらdraw関数で描画を行いsetTimeoutで繰り返し処理を行っています。

描画について

draw関数はsetTimeoutで繰り返し実行されるので、まずはclearRectで描画を初期化します。引数でcirclesを渡し、円の数だけdrawCircle関数（実際の描画処理を行う関数）を実行しています。これはcircles内にある各円が色とアンカーポイント情報を持っているので、円ごとに一つづつ描画処理を行うためにこのように処理をしてみました。これはこちらの考え方を参考にしています。

https://jsfiddle.net/39we73t1/

drawCircle関数ですが、こちらは参考にした「JavaScriptはじめました。 – くねくねする円を作ってみた。」の処理方法を活用させていただいてます。引数で各情報を渡して２次元ベジェ曲線を描画し塗りつぶしています。最後にonloadでcanvasお決まりの構文を書いてinitすれば完了です。

これを作成する前に複数の円を描画する記事をググって探してみたんですが、なかなか見当たらなかったので自作した次第なので色々と不手際な部分もあるかと思いますが、canvasでこのような表示をやってみたいと思っている方の一助になれば幸いです。それではまた！

以下、scriptの全文になります。

Google HomeとNature Remoで涼しい帰宅を！

毎日家に帰ると暑い部屋が出迎えてくる・・・そんな日々を変えたくて家にGoogle Homeを導入しました！

左：Nature Remo：備え付けの旧式のクーラーなので赤外線のみ有効なのと遠隔で操作する為に購入。
右：Google Home mini：スピーカーの違いぐらいだったのでminiにしました。

届いた後の設定等はいろんなサイトが紹介しているのと、手順通りにすれば動いたので省略します。
ここでは導入した後の快適さを実感とともにアピールしたいと思います！

・帰宅前にスマホからクーラーを起動できるので帰宅した時の部屋の中は快適！(超重要)
・部屋の明かりを消すのにリモコンを探さなくていい！「ねぇ Google おやすみ」
・タイマーセットが簡単「ねぇ Google 3分測って」
・外出時のクーラーと部屋の明かりを消すのがラク「ねぇ Google 行ってきます」
・起きる時間にアラームとともに部屋の明かりをつけることができる！(重要)

ただし不満点が全くないとは言えません。

当初は外出するときに「ねぇ Google 行ってきます」と言って、IFTTTを経由して電気とクーラーを消してました。
しかし「行ってらっしゃい」としか反応してくれないことが何度かあったので、今では大体朝出てるだろう時間をトリガーに電気とクーラーを自動で消すようにセットして電気とクーラーをつけたまま外出するようになりました。
外に出るまで電気はついてるし消し忘れはないしで最終的にはこっちに変えて快適になりましたが、思った通りの動作をしなかったのは少し微妙に感じました。
あとたまに音声をちゃんと認識してくれないときもある。

それを踏まえても導入した後の快適さを考えれば購入費用はペイできてる気がします！
日々の生活を快適にするためにスマートホーム化はおすすめです！

ログ調査に使えるコマンド色々

サーバを運用していると、どうしてもログを調査しなければならない時があります。
そんな時に使える便利なアレコレを紹介します。

1行が長いが、読みにくくなるので改行させずに確認したい

less -S filename.log

ファイルの頭から20行までを確認したい

head -20 filename.log

ファイルの最後から20行までを確認したい

tail -20 filename.log

gz圧縮されたログ出力

zcat filename.log.gz

1列目、３列目、5列目〜7列目まで表示

cut -f1,3,5-7 filename.log

フィルタ

単純な検索

fgrep hello filename.log

タブ区切りで1-3列目まで表示

cat filename.log | awk ‘BEGIN{FS=”\t”} {print $1,$2,$3}

タブ区切りで2列目が400以上のものだけ1-3列目まで表示

cat filename.log | awk ‘BEGIN{FS=”\t”} $2 >= 400 {print $1,$2,$3}

ソート関連

単純なソート

sort filename.log

降順ソート

sort -r filename.log

数値としてのソート

sort -n filename.log

2列目を基準にソート

sort -k2,2 filename.log

区切り文字を,にして2列目基準ソート

sort -t”,” -k2,2 filename.log

ファイルへ出力

単純に結果をファイルへ書き出す

sort -nr before.log > after.log

様々な処置を行い画面へ出力させながらログにも残したい

sort -nr before.log | head -20 | tail -10 | tee after.log

様々なコマンドがあり、組み合わせの発想で目的のデータを抜き出すことが可能になります。
ぜひ苦手意識を持たずにチャレンジしてみてください。

開発テストって何をするの？

こんにちわ。
リエです。

毎日暑い日が続きますね。
お休みの日は日中は外にでる気になれず、夜行性と化しています。
（夜も気温があまり下がらないですけどね。。でも日差しがない分いくらかマシです）

さて、弊社は開発会社なので日々開発に取り組んでいます。
作ったサービスやアプリはリリース前に必ず動作などのテストを行いますが、これを開発テストと言います。
作ったものが正常に動くかどうか、バグがでないかどうか、想定していない動きをするとどうなるのかなどを調べていきます。

どのように開発テストを進めていくのか今日は書きたいと思います。

チェックシートを作成

まずはテストをする項目をかいたチェックシートを作成します。
項目内容はサービスごとで異なりますが、基本的なこと（ログインできるかなど）も入れます。このシートに沿ってテストを行います。

対象ブラウザ、端末の確認

サービスによって対象ブラウザや端末（共通してバージョン）は異なります。
例えば［対象ブラウザはGoogleChrome、端末はWindows、MacOS、Android、iosに対応、バージョンは○○以上］であれば、その対象ブラウザ、端末を使って同じ項目をテストします。
そのため、社内には様々なテスト端末が存在します。
もちろん、接続状況もWi-Fiに繋げてor繋げていない場合とでテストします。

開発テストは根気の作業

開発テストはブラウザを変え、端末を変え、接続環境を変えとひたすら同じことの繰り返しで根気のいる作業です。
サービスによりますが、テストは数日〜数週間はかかります。
バグがでたときにたま〜に「あれ？今どういう動作したっけ！？再現動作がわからん〜！」となり、また再現するのに時間がかかったり。。
ダメなんですけど、同じ動作を繰り返していると無心になっちゃうんですよね。。

大変だけどとても大切な開発テスト

開発テストは大変ですが、作ったサービスをユーザー様に気持ちよく使っていただくためにはとても大切な作業です。
できあがったものを、繰り返しテストをして完璧な形へ近づける。
ユーザー様へよりよいものを提供したいという想いで日々開発を行っています。

弊社のスローガンである［ウェブサービスで日常を少し豊かにする］ために、これからも開発に勤しみます。

ZOZOSUITをためしてみた

お盆はやっぱり交通渋滞のニュースを見ながら自宅でビール！（負け惜しみ
「#お盆休みない人あるある」をツイッターで眺めつつ今週前半休暇でしっかり休みボケしているマエダです。

そんな僕にも待ちに待ったアレが届きました！

そう、ZOZOSUIT！！

バーン！

さっそく開封の儀。

丁寧にお届け遅延についてのお詫びカードも入っていてなんだかホッコリ。^^
計測時にスマホを固定できるように組み立て式のスマホスタンドも入っていました。

そして計測へ。

計測はZOZOSUITを着用してスマホのカメラに向かってぐるぐる回るだけでした。
音声での案内でとてもわかりやすかったです。

で、計測結果。

((((；ﾟДﾟ))))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ
予定では股下は80cmのはずだったのに・・・
子どもの頃、少年誌の裏表紙広告に掲載してあった”グングン背が高くなるやつ”を試してみたいと思います。

で、「あなたサイズ」の服が確認できてデニムとTシャツを購入。
ここまでのフローがとてもスムーズ。

いやーホントによくできてます。
商品届くのが楽しみです！

お盆の週ということで社内にヒトが少ないので毎日ZOZOSUITで勤務してみました。(ウソ)

※ひとりで計測してて急にオフィスにヒトが入ってきたときの恥ずかしさはプライスレス。
※体型維持/改善のために運動をしよう！　→ https://sportare.jp/ [PR]