AQ CASE＆KNOWLEDGE

本

アクアリングの事例やナレッジを紹介するマガジンです。実際のプロジェクトで、アクアリングが強みとする「UI/UX」「共創的課題解決」がどのように発揮されているのか、PJメンバーか… もっと読む

運営しているクリエイター

#フロントエンド

JavaScript(ES2015~)でウィンドウサイズをシングルトンライクに管理する

こんにちは、AQUARING かにです。ウィンドウのリサイズ時やCanvas表現の実装などでよく使う window.innerWidth, window.innerHeight ですが、みなさんウィンドウサイズのユーティリティクラスは作っていますか？せっかくクラスで綺麗にカプセル化していても、ウィンドウサイズが必要になるたびに毎回 window の変数を取りに行くのはクラス外に依存する記述が増えてあまり良くないですよね。そこで今回は、プロジェクト全体で共有するウィ

ORIGAMI LETTER フロントエンドBreakdown

こんにちは、AQUARING かにです。昨年制作したブラザー工業さまの「ORIGAMI LETTER」が今年4月にiFデザインアワード2021 コミュニケーションデザイン部門でゴールドを受賞しました！🎉 このWebサイトでは、Webサイト上で折り紙を折るDigital Origami Letterと、プリントした折り紙を折るPrinted Origami Letterの、2つ方法でメッセージを送ることができます。今回はCanvas2DやWebGLなどのフロントエン

AQUARINGサイトリニューアルフロントエンドBreakdown

こんにちは、AQUARING かにです。今回は昨年12月にリニューアルしたAQUARINGサイトのフロントエンドについて解説していきます。 WebGL表現まずGLSLとp5.jsで２種類のスケッチを作成しました。メタボール円のスケッチ（GLSL）距離関数を用いてふたつの円を重ねて、44行目のstep関数を通すことで画像を二値化してマスクを作成し、最後に水色で塗っています。この行をコメントアウトすると二値化前の状態が確認できます。 mask = step(0.5

JavaScript(ES2015~)における定数の書き方について考えてみた

こんにちは、AQUARING かにです。 JSを書くときに、不変な値を定数としてconstants.js（多いときはconstantsディレクトリのカテゴリごとのjsファイル）に書くのですが、この定数の持たせ方について考えてみました。色の定数を例にとって説明していきます。パターン１：用途ごとにオブジェクトで構造化してconstで定義 const Color = { White: '#FFFFFF', Black: '#000000'};export { Co