はてなブックマーク

背景昨年、弊社採用サイトをリニューアルしました。トップページは 3D のパーティクルアニメーションとなっており、 WebGL で実装しています。実装するにあたって使用するライブラリには PixiJS 等も検討しましたが、今回は 3D ということで three.js を選びました。 始めは一つ一つのパーティクルを THREE.Mesh で生成していましたが、特にテキスト側の画面はパーティクルの数が多くかなり重くなってしまいました。 改善するために別の実装方法を探したところ、 Takumi Hasegawa さんの記事を見つけ、どうやらシェーダを使うと大量のパーティクルでも重くならずに描画できると書いてあったので試すことにしました。 シェーダで実装してみた上記の記事を参考にシェーダで実装してみたところ軽くはなりましたが、パーティクルが画面から出ていって消えた後に反対側から再び表示させるという処

特定の UI ライブラリへの依存をなくしたいアプリのフロントエンドを作っていると、どんなアプリでも使うようなコンポーネントが繰り返し出てくることに気がつきます。例えば、日付入力をカレンダーで選択させるようなコンポーネントは、日付入力機能をもつすべてのアプリで使用したいです。こういった汎用的なコンポーネントはだいたいライブラリが世の中にあるので、それを使うことが多いですが、最近よくあるのが、jQuery に依存しているから使えない (使いたくない) というケースです。最近のプロジェクトではモダンな UI ライブラリ (Vue とか React など) を使い、jQuery を使っていないことが多いので、そこにさらに jQuery 依存のコンポーネントを入れてしまうと、読み込むスクリプトサイズが大きくなってしまうのが主な理由です。 例えばこういうのを使いまわしたい (flatpickr の動作

幽霊型とはPhantom Type（和：幽霊型） 型パラメータを使用してコンパイル時には影響を与えるが、実行時の挙動には影響を与えない型を用いたデザインパターンの一種です。 コンパイル時にはいるが実行時にはいない、まるで幽霊。 定義Haskellだと data Phantom x a = Phantom a data PhantomInt x = Phantom Int Scalaだと case class Phantom[X, A](a: A) case class PhantomInt[A](a: Int) 型変数Xがデータ構築子で使われていないことに注目します。 この使われていない型パラメータXを用いて、実際の値の型Aは同じでも、(X, A)の組合せでコンパイルチェックし 誤った値を渡してしまった場合等にコンパイルエラーにする手法です。 具体例を見てみましょう。 具体例例として粗利益

Liquid CSS窓ガラスに張りつく水滴。コロコロ転がる水銀。 接近する液体同士が表面張力で引かれ合う様子。 これらは物理現象ですが、デザインにおいても液体表現は面白いですよね。 実は、 CSSだけでも 近い表現が可能です（※制限あり）。 まずは作り方、 簡単3ステップ で解説します。 下のサンプルをご覧ください。 See the Pen Demo: Liquid CSS by Yusuke Nakaya (@YusukeNakaya) on CodePen. blur 親要素に filter プロパティの blur() を指定します。 全体の描画がボケます。 contrast blur() と同時に contrast() も指定します。 ボケた描画のコントラストを上げます。 background ボケ感＋高コントラストの要素にさらに background で背景色を指定します。 すると

CSSアニメーションを作りまくる僕CSSアニメーション を研究しています。 「いちにちいちUI」というテーマで、1日1個30分、ひたすら作り続けるというもの。 画像やJavaScriptを使わずにCSS3だけで、どこまでできるだろう。 ここにまとめたサンプルは、研究の過程で生まれ続ける産物たちです。 もはやUIではないものも多いですが、お楽しみください！ Punchtransform-origin をうまく使えば、ボーン表現ができる。 See the Pen いちにちいちUI: Punch by Yusuke Nakaya (@YusukeNakaya) on CodePen. つまり、CSSで「骨格」を与えられたキャラクターを表現できるという事。 極めれば、テオ・ヤンセンの STRANDBEEST も再現できるかも!? Gearスチームパンクな歯車だって表現できる。 See the Pe

フロントエンド開発においてトランジション、アニメーションの実装は比較的難しいものだと思いますが、心地の良い UI を作るためには必要不可欠です。Vue.js にはその実装を簡単にしてくれる機能があるので、デモを交えながらその使い方と、強力さを紹介します。 <transition> コンポーネント要素が挿入、削除される時のアニメーションは Vue.js デフォルトで用意されている <transition> コンポーネントを使用することで簡単に書くことができます。<transition> コンポーネントはただ一つの子要素を持ち、子要素の表示状態に応じてアニメーションに関する処理を行います。例えば、以下のようなコードになります。 <transition> <p v-if="isAppear">この要素はアニメーションの対象になります。</p> </transition> 上記の例では <tran

各々のエンジニアが開発に使用するDockerやVagrant等内のデータベースって、あまりチューニングされていなかったりしますよね。 チューニングされているサーバーは、カーネルパラメータ含め多くのパラメータが調整されているので何が主要なポイントか分からない。 耐障害性を捨ててでも開発環境は速く。 そんな方のための開発環境用簡易チューニング記事です。 MariaDBは10.1(10.x系)を想定しています。 ※ちなみに筆者は価格の事を棚に上げればSQLServer(MSSQL)や PostgreSQLも9.4以降(特に9.5)なら好きですし、MariaDBはGalera Clusterがあるから好きです。 仕事ではAWSを扱う機会が非常に多いのでAmazon Auroraは外せません。 設定例メモリ1Gほどデータベースに割り当てる例です。 [mysqld] skip-name-resolve

CSSアニメーションCSSアニメーション サンプル集の続編です。 1日1個30分、CSS3でアニメーションパーツをひたすら作り続けるというもの。 前回の記事からサンプルが増えてきたので、第二弾としてまとめました。 Rainbow Ring LoadingローディングアイコンはCSSアニメーションの練習テーマとしてベスト。 mix-blend-mode と fliter を駆使して、虹のような表現ができる。 See the Pen OnlyCSS: Rainbow Ring by Yusuke Nakaya (@YusukeNakaya) on CodePen. mix-blend-mode は、フロントエンドエンジニアとデザイナーの摩擦を改善する、超画期的なプロパティ。 もう乗算でもスクリーンでもなんでも来い！ Night Rider Loading往年のナイトライダー風CSSローディング

CSSでWebGLライクな3D表現は可能か？ご覧ください、 可能 です。 ただし、できない(苦手とする)こともあります。 See the Pen OnlyCSS: Cube 3D Twister by Yusuke Nakaya (@YusukeNakaya) on CodePen. やったことこの記事の 3D表現 とは、単純に perspective + transform プロパティで「1つの要素を立体的に表示する」だけではなく、 「立方体を描画して、回転などの表現を加える」 事を目指しています。 立方体のコントロールについて、CSSだけでどこまで可能か、研究してみました。 立方体を描画する親要素に transform-style: preserve-3d; を指定すると、 親要素の3D変形を継承して子要素の3D変形も有効 になります。 これは言葉では説明しにくいので、下のサンプルをご

Vue.js は普通の Web ページにもゆるふわに導入しやすい点がメリットの一つですが、(SPA ではない) Rails アプリで使う時は少し考えて書かないとつらくなってくると思います。 例えば、ある <select> 要素の値に応じて別の <select> 要素で選択可能な値をフィルタリングするという機能を実装したい場合を考えます。フィルタリングの機能を持たない、ただのフォームであれば Rails のフォームヘルパーで簡潔に書くことができます。 <% # コントローラーから渡す %> <% @categories = [['Category 1', 1], ['Category 2', 2], ['Category 3', 3]] %> <% @items = [['Item 1', 1], ['Item 2', 2], ['Item 3', 3]] %> <%= form_with(

2017年6月21日から23日まで、世界初の公式な Vue.js のカンファレンス VueConf 2017 が開催されました。開催地はポーランドの都市ヴロツワフで、会場は New Horizons Cinema という大きなカンファレンスルームのある建物でした。VueConf 2017 はワークショップパート（6月21日）とカンファレンスパート（6月22日、23日）に分かれており、筆者はカンファレンスパートに参加していました。ワークショップパートは 60 人以上、カンファレンスパートは 300 人以上の参加があったようです。 会場の New Horizons Cinema（VueConf 2017 公式サイトより） プレゼンテーションカンファレンスのメインコンテンツとして、17人の発表者によるプレゼンテーションが行われました。発表者には Vue.js の作者である Evan You 氏を