気に入ったサイトを集めるだけのページが欲しくて前に作ったものがある。 けどそれがあんまり使いやすくないので作り直した。 前のやつは、管理用のページを用意して、そこにURLとパスワード入力したらデータベースに登録して、実際のリストに反映されるとい…

この記事の内容は全体的に古いので、クロスブラウザ周りの情報はあまりあてにしないでください。 Webサイト上で、画像を六角形にクリップしたいということがあった。 やり方はいろいろあるけど、クロスブラウザで動作するようにと考えるとSVGのclipPathを使…

jqueryで、あるアニメーションの終了後に次のアニメーションを続けたいということがあった。 普通に書くとコールバック地獄に陥ってしまうので、Promiseっぽくthenチェーンで書きたい。 jquery的に書くなら、毎回$.Deferredでラップして書いていかないとダメ…

１月１日の夜、突如肺に激痛がした。 尋常でない痛みだと感じたので救急車を呼ぼうとしたが、あまりに体が痛くて動けない。 僕は所々で意識を失いながらもなんとか携帯を手に取り、１１９番へ連絡した。 それから病院まで搬送され、緊急手術を行った。 原因…

webpackでビルドするときに、外部データベースのデータをJSファイル内に埋め込む方法。 機密にする必要がなくて、ほぼ変更しないデータがあったので、毎回サーバーから受けとるよりもJSファイルのなかに埋め込んでしまえば、通信するコストがかからないと思…

babel-cliをdependenciesに追加し、Procfileに以下のような記述をする。 web: $(npm bin)/babel-node . package.jsonのrun scriptからは、依存モジュールのCLIまで勝手にパスが通ってくれるけど、Procfileの場合はそうでない。 $(npm bin)がそこまでのエイリ…

JSを使わずにCSSだけで要素をページの真ん中に配置するという方法はいろいろある。 けど、その要素の中身の高さが、親の高さを超えてしまうと、その上部分が見切れてしまうというパターンが多い。 そういう場合はJSを使って位置を調整することが多いけど、CS…

毎年年度末くらいに学校でやってる展示会があって、その告知サイトで使うシンボルのアニメーションの実装を担当した。 すでに完成したポスターのビジュアルがあり、そのイメージを残しつつWeb向けにアレンジしたという形。 WebGLを使ったと言ってもたいして…

Reactで作ってたポートフォリオサイトを、サーバーサイドレンダリングを有効にして作り直した。 他の部分もコードを書き直して、無駄に分かりにくくなってた処理を単純化できた。 デザインもちょっと変えて、前はナビゲーションをハンバーガーボタンにしてた…

CreateJSのEaselJSとかTweenJSは、node.jsのモジュールシステムに対応してないので、そのままだとrequireしてbundleすることができない。 browserify-shimを使うと解決できた。 package.jsonに以下のような記述をする。browserのところのパスは適宜調整。 { …

var random = function (min, max, floating) { var rand = Math.random(); return floating || min % 1 || max || 1 ? Math.min(min + (rand * (max - min + parseFloat('1e-' + ((rand + '').length - 1)))), max) : min + Math.floor(rand * (max - min +…

document.querySelectorAllとかで取得したNodeListに対してループ処理をしたいということがよくある。 NodeListはArrayに似ているのでforEachとかを使いたくなるけど、それらは似て非なるものなので無理だ。 単純にforでなら回せるけどそれは嫌なので、他の…

寒くなってきたのでCanvasで雪を降らせてみた。 Snow Canvas Canvasに苦手意識があって、それを克服したいと思ってCreate.jsに入門した。 前にCanvasを使ったのが一つ前のポートフォリオサイトを作ったときで、そのときは生のCanvasのAPIをそのまま触った。 …

僕は割と短いスパンでポートフォリオサイトを作り直したくなってしまう。 作ったばかりのときにはそこそこ満足しているけど、時間がたってくるとその都度なんらかの不満が生まれるので、また別のテイストでサイトを作り直す。 僕はやっぱり、サイト構成やデ…

僕は筋トレをするのが趣味だ。 それで、前々からその記録をするツールが欲しいと思っていたので、SPAを作る練習ついでに作ってみた。 機能はかなり最小限だけど、僕が欲しかったものはこれで十分。 React.jsで作って、データベース代わりにlocalStorageに記…

サーバーから受け取ったデータに応じて、要素を生成したいということはよくある。 テンプレートエンジンなどを使うと、そのデータを綺麗に処理することができる。 けど、それを使わずに素のJSで書くのはなかなかめんどくさい。 たとえば、こんなデータがある…

物理法則に基づいたアニメーションを実装できるライブラリのDynamics.jsをReact.jsで使ってみた。 基本的にJSのアニメーションライブラリはDOMを直接操作するけど、React.jsを使う場合は実際のDOMと仮想のDOMとの整合性が崩れてしまうのでそれは推奨されない…

いろいろ考えてブログはやっぱりレンタルブログがいいと思ったので、はてなブログを始めた。 この記事を書き始めるほんの少し前までは、ブログのシステムをどんな構成にしようかということばかり考えていて、ブログを書くために気が散りすぎていた。 たとえ…