読者です 読者をやめる 読者になる 読者になる

縦書きでレスポンシブなブログを作った

趣味で会社の人のサイトを作った。縦書きでレスポンシブなブログ。prismic.ioとNext.jsで作った。 ウェブデザインに縦書きを活かすことは難しい。部分的に取り入れることはできても、縦書きの文章を主要な要素として扱うのはかなり難がある。というのも、ウ…

ウェブサイトにおけるタイポグラフィのパターンの設計

ウェブサイトのタイポグラフィのルールは一貫性を欠いてしまいがちだ。 単純にページやコンポーネント単位でデザインしていると、その周辺の要素だけで判断することになるので、全体として見ると一貫性を失ってしまう。 僕が考える解決策は、コンポーネント…

font-familyに指定するフォントスタックの一般的なパターン

font-familyのベストな書き方20XX年みたいな記事が毎年出るけど、実際のところケースバイケースで、唯一のベストな解があるというわけでない。なので個人的な理解に基づいたパターンの分類をメモとして書いておく。特に目新しいことはない。 日本語環境で、…

わざと引っかかりのあるアニメーションを実装する

一般的にはアニメーションは高パフォーマンスであることが良しとされる。が、あえてFPSを下げたアニメーションにしたいことがあった。レトロゲームのような世界観を表現したいというやつだった。 tween.jsは、ユーザーがアニメーションの更新タイミングを制…

ブレイクポイントは端末のサイズに依存させない

レスポンシブデザインの最適なブレイクポイントは何pxなのかという話題をよく見る。既存のデバイスのサイズを比較することで答えにたどり着こうとするアプローチがほとんどだが、それらは間違っている。 ブレイクポイントは、コンテンツの見た目が切り替わる…

もっと細かい値を基準にしたVertical Rhythm

本文のline-heightを基数としたVertical Rhythmは、値が大きくなりすぎるのでどうしても細かい調整がしたくなってうまくいかない。 それに悩んでいて@terkelに聞いてみたら、「本文のline-heightより細かい数字を基準にしてる、4pxとか。Material Designも多…

エモさ on 地味な土台 in ウェブサイト

地味な土台の部分をきちんと作った上に、いわゆるエモさみたいなものが積み上げられた形のウェブサイトを作りたいなというのをずっと思ってる。 地味な土台というのは、アクセシビリティやパフォーマンス、サイト全体を通してのスタイルの一貫性など、ウェブ…

CSSにおける和欧混植のベストプラクティス

欧文はウェブフォント、和文はユーザーエージェントのデフォルトにするというのがベスト。 html { font-family: Lato, sans-serif; } というのも、ローカルの欧文フォントを指定するためにはプラットフォームごとにインストールされているフォントを把握して…

Sassのmixinでユニークなキーフレーム名を宣言する

スプライトアニメーションをコンテンツの背景にフィットさせる - ライデンの新人ブログ こういうやつを複数回やりたかったのでmixinにした。普通にやるとキーフレーム名がかぶるので、mixinを呼び出すたびにIDをインクリメントさせるようにしたらいけた。 $_…

2017年に向けてやってきたこと

去年の今頃ってなにしてたんだっけって思ったら、倒れて手術してたんだった。これを機に、人はいつでも死ぬのでなんかやるなら早めが良さそうという気持ちになったんだった。 この頃の僕には、自分のフロントエンドの専門性を高めたいという目標があった。と…

tween.jsでキャンセルできる直列なアニメーションを実装する

const TWEEN = require('tween.js') const [tween] = [...document.querySelectorAll('.animate')] .map(el => { const state = {x: 0} return new TWEEN.Tween(state) .to({x: 300}) .onUpdate(() => { el.style.transform = `translate(${state.x}px, 0)` …

Browserifyでbundleしたファイルをconcatする

Browserifyでrequireじゃなくて単にconcatしたいときがある。UMD対応してないライブラリを読み込むときとか、必ず最初に実行したい処理(ポリフィルとか)がある場合だ。 Webpackだと、以下のようにentryに配列を指定すればconcatできる。 module.exports = …

Pugでrequireを利用する

Issue#2604にあった。割れ窓っぽい雑な手なので、使うのはその場凌ぎ的にやっていい場面だけに留める。 const fs = require('fs') const pug = require('pug') const result = pug.renderFile('test.pug', { require }) fs.writeFileSync('test.html', resul…

BrowsersyncでSSIを利用する

ググったらmiddlewareで処理する方法しか見つからなかったけど、ドキュメントを見ていたらrewriteRulesというそれっぽいオプションがあった。レシピとしてそれっぽい方法で使うサンプルがあったけど、バージョンが古いし、SSIのシンタックスが違った。自分で…

最近の僕のCSSとの向き合い方

業務内容に合わせたCSSの書き方が大方定まってきた感じがあるので書く。 ビルド SassのSCSS記法で書いて、ポストプロセスとしてAutoprefixerとCSSOあたりを通すという風にしてる。 プリプロセッサーとしてPostCSSを使うのは難があって、利用できる機能を独自…

ポケモンgoのメモ

ポケモンgoがリリースされ、翌日である昨日にフルコミットして得た知見をメモしておく。 ※後日追記 以下の情報は無駄で大幅に死んだ可能性がある。 方針 序盤は効率よくレベル上げするついでに素材を集めつつ、軌道に乗ってきたら厳選してパーティを作ること…

入社してた

4月になってしばらくしてから新卒として内定が決まって、5月中旬頃から今の会社で働いている。 就職が決まった時期としてはかなり遅い。ギリのタイミングまで自分のレベル上げをしたかったというのと、最悪就職できないはずもないだろうと社会をなめていたこ…

BrowserSyncでサーバーのパスのbasenameを指定する

BrowserSyncでサーバーを立ち上げると、http://localhost:3000/とかルートのURLで指定したディレクトリが開くようになっている。 でもたまにパスの指定の関係で、ルートでなくて下層のディレクトリでファイルを開きたいというときがある。http://localhost:3…

普通のウェブサイトのためのJSボイラープレートを作った

JSバリバリじゃない、いわゆる普通のウェブサイトでもモダンなJSを書くためのボイラープレートを作った。 最近のJSの文脈的には、browserifyでモジュール分割してes2015で書きたい。 でも、browserifyは全部のモジュールをひとつのファイルにまとめるという…

PhantomJSでサムネイルの取得を自動化する

前に作ったウェブサイトギャラリーで使ってるサムネイル画像の取得を自動化した。 それまでは、URLを渡すとサムネイル画像を提供してくれる外部のAPIを使ってたけど、Node.jsでフォルダ内の全HTMLをキャプチャし画像化という記事を見て、おもしろそうだった…

Velocityのイージングを拡張する

Velocityっていうアニメーション用のライブラリがある。 最初からいろんなイージングが使えて、jQuery UIのイージングの一部が入ってるんだけど、Back系、Elastic系、Bounce系のやつは入ってない。 Velocityは独自にイージングを拡張することもできるので、j…

ウェブサイトギャラリーを作り直した

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

図形による画像のクリップをクロスブラウザで実現する

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

$.animate()でのコールバック地獄を回避する

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

入院してる

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

ビルド時にデータベースのデータをJSファイルに埋め込む

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

herokuでbabel-nodeを使う

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

CSSだけで要素を垂直中央に配置しつつ、あふれたらスクロールできるようにする

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

WebGLで展示会のシンボルを表現した

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

ポートフォリオ作り直した

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

CreateJSをbrowserifyで読み込む

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 +…

NodeListをforEachしたいときのパターン

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

Canvasで雪を降らせた

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

ポートフォリオサイトをリニューアルした(6回目)

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

ウェイトトレーニングを記録するツールを作った

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

データに応じて要素を生成するときのスマートな方法

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

Dynamics.jsをReact.jsで使う

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

レンタルブログの良さ

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