TECH BOX

Technology developer's blog

node-configを使ってビルドの環境変数ごとにデータを書き換える

APIのエンドポイントなど本番環境と開発環境で使う情報は違うということはよくあります。node-configは環境ごとの情報を用意することも簡単だしそれを取得するのも簡単です。

Google Apps Script(GAS)をローカルエディタで編集する

Google Apps Scriptを普段使っているエディタで気持ちよく書く。ローカルにファイルとして保存できるということはリポジトリでリビジョン管理もできる。開発者にとってはGoogle謹製の「clasp」は効率よく作業するための手段となりえます。

Konva.jsを使って花火を表現

arc-one.jpで遊びとして実装しているクリックイベント演出のうち「花火」の作り方を紹介。一見複雑そうなアニメーションでも分解したり工夫して組み合わせることで面白いものが出来ます。

Konva.jsを使って雫アニメーションを簡単に作る

モーフィングライブラリがなくても場合によってはアニメーションの組み合わせでモーフィングっぽく見せることが出来ます。今回は雫をモーフィングっぽくアニメーションさせてみました。

fish shellでコミット差分アーカイブのコマンドファイルを作成する

git archiveコマンドをシェルスクリプトファイルで簡略化する方法はよく見つかるけど、fishファイルでの簡略化方法はなかなかないので紹介します。

TypeScriptのGenericsをどこで使うか

TypeScriptのGenericsは使い所が難しいです。型指定を呼び出す側で任意に決められる分、頼りすぎるとロジック内がカオスになったりすることもあります。いつどこで使うかをきちんと設計して使いましょう。

型付けを賢く使う

TypeScriptのInterfaceとType Aliasをうまく使ってリーダブルでメンテナンスしやすいコードを書こう

GridsomeでWordPressの記事詳細ページに前後の記事リンクを追加する

静的ページだとなかなか前後の記事をつけるのが大変です。GraphQLを使って前後の記事を取得しますが…クエリ一つでというのができないのでクエリとJS側でフィルターする方法

GridsomeでPugを使う

インデントで記述するので構造がわかりやすく、閉じタグを忘れたりする些細なミスも減るメリットの大きいプリプロセッサーであるPugをGridsomeでも利用する方法

GridsomeでStylusとPostCSSを使う

altCSSであるStylusとPostCSSをGridsomeで使う場合の設定は最初から用意されているため比較的簡単に導入ができます

GridsomeでTypeScriptを使う

GridsomeでもTypeScript + リンター環境を構築する方法を紹介

CSSでスケルトンスクリーンを表現する

カード要素の時はスピナーのような画一的なローダーより、スケルトンスクリーンにするとちょっとかっこよくなるよ

吸着スクロールの実装

ドラムロールをウェブブラウザでも実現したい!そんな時に使える吸着スクロールの実装方法を紹介します。

独自スクロールの実装

いつかどこかで役に立つはず。独自スクロールの作り方も!

ファジィ理論 〜台形型〜

ファジィ理論の3回目。台形型は画像遅延や領域内に入ったかどうかの判定をしたりするのにとても相性が良いです。

ファジィ理論 〜三角形型〜

ファジィ理論の2回目。三角形型をの頂点を使うことで特定の位置に一番近い要素を取得することもできます。サンプルでは集中力をパーセントで表示しています。

ファジィ理論の概要と傾斜型

ゲームAIや洗濯機、冷蔵庫などで使われるファジィ理論。ウェブ制作とは縁がないと思いがちですが、仕様次第では有効に活用することができます

単位変換ウェブアプリ「LsC !」をリリースしました

これで日常生活の「あれ?これいくつだっけ?」を解決できます。

Chrome拡張「Web Maker」を使って気軽に実験する

プライベートでコードをたくさん書いて実験したい…そんなあなたに。

「EditorConfig」を利用してチーム内でのコーディングルールを統一しよう

複数人でコーディングルールを共有して効率をアップさせる方法

npmライブラリのバージョンを固定する

チームで開発している時に各環境でライブラリのバージョンが微妙に異なってしまう時にはバージョンを固定しましょう