ファミコン風CSSフレームワーク「NES.css」をリリースしました

ファミコン風（8bitライク）なCSSフレームワーク「NES.css」を、2018年12月19日に正式リリースした。開発した経緯や、タイムライン、OSS活動の感想、「そのロゴ、SNESじゃね？」の反論を書こうと思う。

つくったもの

ウェブサイトを懐かしいファミコンテイストにしてくれるCSSフレームワークを開発した。口で説明するより、実際にデモサイトを見ていただいたほうがわかりやすいだろう。

https://nostalgic-css.github.io/NES.css/

任意の背景色に対して読みやすい文字色を取得するSass functionを実装する

@ktsnさんが興味深い記事を公開されていた。
WCAG(Web Content Accessibility Guidelines)で定義されているコントラスト比の計算方法を用い、任意の背景色に対して読みやすい文字色を選択する方法だ。

詳しくは@ktsnさんの記事を読んでほしい。
この記事ではJavaScriptを用いて文字色を選択していたのだが、Sassの関数として定義できればかなり便利なのでは？と思い実装してみた。

自作フレームワークをつくって学ぶ 仮想DOM実践入門

昨今の代表的なJavaScriptフレームワーク（React、Vue.jsなど）には「仮想DOM（Virtual DOM）」という概念が採用されているので、フロントエンド界隈の人は一度は耳にしたことがあるだろう。ただ、仮想DOMについて学ぼうと検索してもヒットするのは「フレームワークの使い方」ばかり。踏み込んでいても概念の説明どまりで、仮想DOMがどのように実装されているか解説した記事はすくない。

ということで、当記事では理解を深めるために仮想DOMを使ったフレームワークを自作し、仮想DOMに入門する！
そして、ReactやVue.jsを単なるブラックボックスのフレームワークではなく、中身を理解して使えるようになることを、当記事の目標とする。


フレームワークが完成すると以下のようなWebアプリケーションがつくれるようになる。

DOM、Node、Elementの違いとそれぞれの使い分け

仮想DOMのフレームワークを開発しその解説記事を書いているときに、自分がDOM、Node、Elementの違いを正確に理解していないことに気づいた。頭の中でふんわりとDOM≒Node≒Elementという理解になっていたのだ。

ということで、この3つの違いについて調べた。

box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる

CSSだけでドット絵（Pixel Art）を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。

ちなみに下図のようなドット絵がつくれる。

マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJavaScriptは使っていない。

デザイナーにもオススメ！シンプルですぐできるSass（SCSS）開発環境構築

ファミコン風CSSフレームワーク（NES.css）を開発するために、Sassの開発環境を整えたので共有したい。

---

ウェブページをスタイリングするためにはCSSを使うのだが、崩壊しやすい性質を持っている。詳細度による優先付け、スタイルの上書きなど要因はさまざま。そんな脆いCSSをちょっとでもメンテしやすくするために「Sass」というCSSを拡張したメタ言語が使われる。簡単に階層構造を作れたり、ループや関数などプログラムっぽいものが書けたりと、大きなウェブページをつくるなら必須だ。

しかし、Sassを使う上で避けては通れないものがある。
SassからCSSに変換する「コンパイル」だ。

フロントエンドエンジニアならNode.jsやwebpackを使ってできてしまうだろうが、デザイナーが手を出したら「Node.jsこわい」「webpackこわい」となりかねない。以降、コマンドラインから扱う便利ツールに拒否反応を示されてしまってはもったいない。

そこでシンプルで設定ファイルが少なく、かつある程度自動でなんでもやってくれるSassの開発環境をステップバイステップで構築していく。

この記事を書くにあたり使ったツールは以下のとおり。

• Node.js環境
• npm@5.2.0
• node.js@8.11.4
• SassをコンパイルしてCSSを出力する
• node-sass@4.9.3
• rimraf@2.6.2
• ベンダープレフィックスを自動的に付加する
• postcss-cli@6.0.0
• autoprefixer@9.1.5
• コーディングスタイルを統一する
• stylelint@9.5.0
• stylelint-config-recess-order@2.0.0
• stylelint-config-standard@18.2.0
• stylelint-scss@3.3.1
• 自動フォーマットする
• prettier-stylelint@0.4.2
• clean-css-cli@4.2.1
• コミット時にコーディングスタイルをチェックする
• husky@1.0.0
• lint-staged@7.3.0
• エディタで保存時に自動フォーマットする
• VSCode@1.27.2
• prettier-vscode@1.6.1

gvm使用時にvscode-goで「Cannot find "go" binary. Update PATH or GOROOT appropriately」が出たときの解決方法

新しいMBP2018（High Sierra）にしてからGo言語（以下、golangと呼ぶ）の開発環境構築をしていた。そのとき、VSCodeのMicrosoft謹製のgolang用拡張機能（vscode-go）を使って、golangを書こうとしたときにかなりハマった。

ハマった点はいくつかあるのだが、今回は「Cannot find "go" binary. Update PATH or GOROOT appropriately」というエラーがでたときのことに絞って書こうと思う。

私の開発環境は以下のとおり。

• macOS High Sierra
• gvm@1.0.22
• go@1.11
• gvmでインストールする
• VSCode@1.27.x
• vscode-go@0.6.89

Dockerコンテナ内のNginxからホストOSのlocalhostにアクセスする

開発するサービスが増えてくると、同じホスト名だけどパスによって違うサービスを表示したいことがある。たとえば、https://example.comならRailsで作ったメニューページ、https://example.com/serviceならNuxt.jsで作った別サービスといった具合だ。

できれば環境はローカルマシン内だけで完結させたいので、DockerコンテナにNginxでリバースプロキシを立ててパスによってlocalhostの違うポートにプロキシしたい。しかし、Dockerコンテナ内でlocallhostにアクセスしようとすると、コンテナ内のゲストOSのlocalhostにアクセスしてしまう。

ということでDockerコンテナ内からホストOSにアクセスする方法とまとめる。


環境は以下の通り。

• macOS High Sierra
• Docker CE Version 18.06.0-ce-mac70 (26399)
• Nginx（Dockerコンテナ内）

Vue CLIで生成したNuxt.jsプロジェクトをhttps化して起動する方法

Vue CLIで生成したNuxt.jsのプロジェクトをnpm run devでそのまま実行するとhttp://localhost:3000でサーバーが起動する。Nuxt.js単体で開発する分にはこれで問題ないのだが、他サービスが関わってくるとできればhttpsでアクセスできるようにしたい。

ということで、Vue CLIで生成したNuxt.jsプロジェクトをhttps化して起動する方法をまとめる。

環境は以下の通り。

• macOS High Sierra
• vue-cli@3.0.1
• nuxt.js@1.4.2

macOS(High Sierra)でChromeからlocalhostにアクセスすると極端に遅くなるときの対処法

自宅用ラップトップをMacBook Pro 2018 High Sierraに更新したのだが、Chromium系ブラウザからlocalhostにアクセスしようとすると極端に遅くなってしまう。localhostのリソースにアクセスするだけで2〜3分ほどだ。

その対処法についていくつかまとめる。

環境と詳細な症状

環境は以下の通り。

• MacBook Pro 2018 macOS High Sierra
• ブラウザ
• Chrome 68
• Chromium 70
• ローカルサーバー
• Docker CE Version 18.06.0-ce-mac70 (26399)
• Docker Compose version 1.22.0
• nginx（Dockerコンテナ内）

[golang]TCPサーバ/クライアントをつくって学ぶTCP/IPの基礎

フロントエンドエンジニアとして働く分にはHTML/CSS/JSの知識だけで良いのかもしれないが、仕事上でTCPについての知識が必要になった。しかし、TCPについては基本情報技術者レベルの知識しかなく、いまだにOSI参照モデルが実際のアプリケーションとどう関連付けられるかわかっていない。

そこで、低レイヤーの学習も兼ねて、Go言語（golang）でTCPサーバーとクライアントをStep by Stepで実装し、TCP/IPについてより深く学ぼうと思う。

知識編: TCP/IPとは

インターネットやネットワークについて学んでいると必ず出てくるのが「TCP/IP」だ。OSI参照モデルの第3層（ネットワーク層）のIP（Internet Protocol）と第4層（トランスポート層）のTCP（Transmission Control Protocol）の2つのプロトコルから構成されており、インターネットで標準的に利用されている通信プロトコルだ。

OSI参照モデルとTCP/IPプロトコル群

基本情報技術者の試験ではOSI参照モデルの概念についてしか触れないが、TPC/IPプロトコル群（別名: インターネット・プロトコル・スイート）も存在する。TCP/IPプロトコル群のほうが効率的で、かつ現実的な仕様となっているので一般的に使われており、OSI参照モデルは「概念」として残っている。

OSI参照モデルとTCP/IPプロトコル群の対比表

OSI参照モデル	TCP/IPプロトコル群	プロトコル
アプリケーション層	アプリケーション層	HTTP, SMTP, POP3, Telnet, …
プレゼンテーション層
セッション層
トランスポート層	トランスポート層	TCP, UDP
ネットワーク層	インターネット層	IP, ICMP, ARP, RARO
データリンク層	ネットワークインターフェース層	Ethernet, PPP
物理層

pug(Jade)でエスケープせずhtmlタグやscriptをそのまま表示させる方法

pug(旧Jade)でhtmlやscript、styleのサンプルコードを表示させたい場合、<>などをエスケープする必要がある。

たとえば以下のような感じだ。

pre
  code
    | <script>
    | alert('Hello');
    | </script>

これではサンプルコードが変わるたびにいちいちエスケープしてから書き換えなければならないし、そもそもヒューマンリーダブルでない。

ということで、エスケープせずにそのままサンプルコードを貼る方法をまとめる。

HTML5＋CSS3＋JavaScriptでアナログ時計を実装する

JavaScriptしか触れないフロントエンドエンジニアになりかけていたので、CSSの練習も兼ねて、HTML5+CSS3+JavaScriptでアナログ時計を作ろうと思う。
完成図は以下のような感じだ。

[JS]クリックした位置までオブジェクトを最短距離で移動させる

シミュレーションゲームやリアルタイムストラテジーゲーム（RTS）でよくある「クリックした位置までキャラクタを移動させる」動作をJavaScript+Canvas APIで実装する。

イメージは以下のような感じ。

ゲーム開発初心者が教えるブラウザゲームのつくり方（後編）

この記事は、2018年6月29日にさくらインターネットで行われた「さくらの勉強会 フロントエンドナイト」で発表した内容を文字起こししたものの「後編」です。

• 発表スライド（SpeakerDeck）
• 前編: ゲーム開発初心者が教えるブラウザゲームのつくり方
• 後編: この記事

※ [ディレクターズ・カット版]と書かれたスライドが、この記事を公開するにあたり追加したものです。
※ この記事には多くの画像が貼れれているため、読み込みに時間がかかる可能性があります

続き）シンプルなブラウザゲームのつくり方

ゲーム開発初心者が教えるブラウザゲームのつくり方（前編）

この記事は、2018年6月29日にさくらインターネットで行われた「さくらの勉強会 フロントエンドナイト」で発表した内容を文字起こししたものの「前編」です。

• 発表スライド（SpeakerDeck）
• 前編: この記事
• 後編: ゲーム開発初心者が教えるブラウザゲームのつくり方

※ [ディレクターズ・カット版]と書かれたスライドが、この記事を公開するにあたり追加したものです。
※ この記事には多くの画像が貼れれているため、読み込みに時間がかかる可能性があります

---

ゲーム開発初心者が教えるブラウザゲームのつくり方

[JS]ゲーム内に重力を追加し自然なジャンプモーションを実装する（3パターンで実装）

アクションゲームになくてはならない要素、それはジャンプモーション！
今回はゲーム内に重力を加え、自然なジャンプモーションを実装する。

方法としては3通りあるので、それぞれ解説していく。

• 三角関数（sin）を使う
• 月面でジャンプしているようなふんわりしたモーション
• 速度に加速度を足しこむ
• 簡単で自然なジャンプモーション
• 鉛直投げ上げの公式（y = v0t - 0.5gt^2）を使う
• より自然界に近いジャンプモーション

オフスクリーンCanvasにプリレンダリングし、描画内容を可視領域に表示する

Canvas APIを使ってブラウザゲームやアニメーションなど複雑な描画処理を行う場合、オフスクリーン（描画領域外）Canvasにプリレンダリングし、その内容を可視領域にあるCanvas要素にコピーし表示する手法がある。

利用シーン

たとえば15個の要素からなる背景があったとする。（下図参照）
可視領域内にあるCanvasにレンダリングしていると、1フレームごとに15回の描画処理が行われる。

それをあらかじめ背景用のオフスクリーンCanvasに描画しておいて、1フレームごとに可視領域内のCanvasにコピーして描画すると、背景の描画処理は1回ですむ。
負荷の高い描画処理が15→1回になることでパフォーマンス向上が見込めるという技だ。

OpenFaaSでFaaS環境を用意しサーバーレスアーキテクチャを体験する

数年前から何かと「サーバーレス」がバズワードになっている。自分でサーバーを用意してAPIサーバーを立てて使うという時代から、人間はより本質的な部分に注力すべきという考え方からFaaS環境を使う時代に変わってきた。

ただ私自身、AWS LambdaやGCP Cloud Functionsなどのいわゆる「サーバーレス」というものを体験したことがない。それらのサービスは従量課金で一歩間違ったらクラウド破産しかねないため、その恐怖感もあったからだ。


しかしこのままでは時代の波に取り残されてしまうと思い、いろいろ調べたところOpenFaaSというOSSに出会った。

ということで、OpenFaaSを使って自分専用のFaaS環境を用意し、思う存分使ってみようと思う。


開発環境は以下のとおり。

• CentOS@7.4
• OpenFaaS@0.8.2
• docker@18.03.1-ce
• docker-compose@1.21.2

[golang]goaを使ってAPIの設計・開発し、OpenAPIドキュメントを自動生成する

golangでAPIサーバーを開発したい！でも、何からやっていいかわからない。そんなときにはgoaがオススメだ。

goaの特徴

goaの最大の特徴はAPIデザインを書くとモック、クライアントツール、ドキュメントなどを自動生成できるところだ。

開発は以下のような手順になる。

1. DSLでAPIデザインを書く
2. goagen(コードジェネレーター)で自動生成する
• クライアントのスケルトン
• テストコード
• CLIツール
• OpenAPI仕様のドキュメント
3. APIを実装する
4. ビルドして実行する

このように人の手が入るのは「1.DLSでAPIデザインを書く」と「3.APIを実装する」だけだ。それ以外はgoagenというコードジェネレーターが自動的にやってくれる。

golang初心者の私でも、はじめて触ってから3時間くらいで動くAPIサーバーをつくることができた。


以下にgoaを使ってAPIサーバーを開発する手順をまとめていく。

requestAnimationFrameの処理落ちをフレームスキップで対応する

ブラウザゲームやアニメーションを作るときなど、定期的に画面を再描画するときにはrequestAnimationFrameやsetInterval、setTimeoutが使われる。

当記事ではrequestAnimationFrameにフォーカスし、ブラウザゲームを開発する際に必要なフレームスキップ処理について紹介する。

requestAnimationFrameとsetInterval, setTimeoutは何が違うのか？

requestAnimationFrameとsetIntervalsetTimeoutには明確な違いがある。

requestAnimationFrameはブラウザの状態により実行間隔を自動で調整してくれるのに対し、
setIntervalsetTimeoutは時間どおりに実行するため、処理がすべて終わる前に次の処理が実行されてしまう。

そのため、ブラウザゲーム開発ではrequestAnimationFrameを使うことが多い。


ただ、わざとブラウザに負荷をかけたりバックグラウンドで実行させたりすると、描画を遅らせることができてしまう。このような処理落ちはゲームバランスを壊す要因になりうるため、フレームスキップ処理の実装が必要になってくる。


ということで、今回は処理落ちしたときにフレームスキップする方法を紹介する。

CSS Grid Layoutの練習で黄金比（フィボナッチ数列）の図形を描く

CSS Grid Layoutが登場してからというもの、スタイリングが格段にやりやすくなった。
ということで練習もかねて、CSS Grid Layoutを使って黄金比（フィボナッチ数列）の例のアレを描いてみる。

CSS変数をJavaScriptで動的に変更し、複数のスタイルに一括適用する

いつの間にかVanilla CSS（ブラウザ標準のCSS）でもSassみたいにCSS変数（CSS Variales）が使えるようになっていた。

CSS変数の何が嬉しいかというと、たとえばベースカラーを定義しておいて複数のスタイルで参照しておく。後日ベースカラーを変更したくなったらCSS変数を変更するだけで他は弄らなくてよくなりメンテがしやすくなる点だ。

[Node.js]指定したパス配下（サブディレクトリ含む）のファイル一覧を取得する

Node.jsで指定したパスにどんなファイルがあるか一覧にしたいのだが、そんな都合の良いメソッドはなかった。fs.readdirSync(path, { recursive: true })なんてオプションがあったら便利なのに。

ということで、パス一覧を取得する方法を紹介する。

環境は以下のとおり。

• Node@7.6+
• fs.readdirSyncとfs.statSyncが使えるバージョンならOK

JavaScriptとTypeScriptを共存させ、段階的に移行する方法

某サービスのフロントエンド開発に携わるようになってからずっと考えていることがある。


TypeScriptに移行して、型に守られたい！



ただ稼働しているサービスをいっきにTypeScriptに移行するのは危険で膨大な工数がかかるため、段階的に移行できないかと考えた。
ということでJavaScriptとTypeScriptを共存させる方法をまとめる。

環境は以下のとおり。

• webpack@4.0.1
• webpack-cli@2.0.9
• webpack v3系の場合は不要
• typescript@2.7.2
• ts-loader@4.0.0

※ あとでbabel-loaderについて追記予定です！
→ 2018/03/23 追記しました

Prettierの手の届かないところはESLintでカバーして自動整形する（prettier-eslint）

コードから手書きによるぬくもりを排除して、精神的安定を手に入れたい！

唐突だが、先日行われた「メタプログラミング勉強会@さくらインターネット」に参加して以来、「コードの整形とか人間がやる仕事じゃない！」と思うようになった。
人間の手で書くコードのぬくもりは時として作業効率を下げてしまう。だから、ぬくもりを排除したほうが精神的安定を得られるのではないかと。

ということで、今回はPrettierとESLintを併用して、保存時またはコミット前に自動フォーマットする方法をまとめる。

押しっぱなしのkeydownまたはkeypressイベントの初動をスムーズにする

勉強がてらCanvasをつかったブラウザゲームを作っている。そこでkeydownまたはkeypressイベントでCanvas内に描画したオブジェクトを動かそうとしたときに問題が生じた。

次のgifアニメを見てほしい。

これは矢印キーを押しっぱなしにしたときのオブジェクトの動きだ。
わかりづらいかもしれないが、初動（正確には2回目のイベント）が遅れて、「ダッ、ダダダダ…」みたい感じで動いている。

これを解決するための方法をまとめる。

[Vue.js]ページ内の全フィールドを監視し変更されたらイベントを発火する（deep watch）

設定ページの設定内容が変更されたら自動的に保存。検索フォームで条件を追加したら自動的に検索。このようにユーザがボタンを押下しなくても、changeイベントで自動的に処理してくれるアプリケーションをよく見かける。

ただ実際やろうとすると、すべてのフィールドにchangeイベントを登録し、変更されたかどうかを監視させなければならないので面倒だ！
もっと良い方法はないかとvueの公式ドキュメントを読んでいたら良さそうなものを見つけたので、実例を交えて紹介する。


↓こんな感じの検索フォームを例に紹介する。

※ 当記事では使っているバージョンはvue@2.x系（2.5で動作確認）

Flexboxを疑似要素（::before, ::after）で使う方法（例: タイトルのスタイリング）

以前はposition: absoluteやdisplay: table-cellをつかっていた上下中央揃え、float: leftをつかっていた横並び。
これらがすべてFlexboxで実現できるようになって久しいが、CSSをいじっているときに擬似要素に対してFlexboxが使えないかと試していたらできたので、よくあるタイトルのスタイリングを例にとり紹介する。

[Vuex]karma＋webpack＋inject-loaderを使ってactionsのテストをしようとしたらハマった

vue+vuexという定番の組み合わせでフロントエンド開発でvuex周りのテストをしたくなった。
そこで公式ドキュメントを参考にしながらkarma+webpack+inject-loaderを使って実施しようとしたところ、actionsのテストで大いにハマってしまった。

当記事ではハマった原因とその解消方法についてまとめる。


使っているバージョンは以下のとおり。

• vuex@3.0
• ハマりポイントには関係ない
• webpack@3.10
• モジュールバンドラー
• karma@2.0
• テストランナー
• inject-loader@3.0.1
• APIの依存性注入（モック化するため）
• axios@0.17.1
• HTTPクライアント
• mocha@4.1.0
• テストフレームワーク（お好みで）
• chai@4.1.2
• アサーション（お好みで）

【SIerサバイバルガイド】職場での巻き込まれ事故を防ぐ7ヵ条

ブラック企業の炎上プロジェクトで働いていたとき（2014年1月頃）に書いたメモを発掘したので、一部修正し公開する。

---

みなさんは、職場で事故に巻き込まれたことはないだろうか？

自分の責任じゃないのに、なぜか悪者扱いされた。
話を聞いただけなのに、なぜかタスクが全部降ってきた。
サポートのはずで参加したのに、なぜかメインをはっていた。

社会人であれば誰もが経験したであろう巻き込まれ事故の数々。
この事故を防ぐため、体験から考えた方法を紹介する。

[Vue.js]タイトルラベルクリックでソート可能なテーブルをつくる

なんらかのサービスでテーブル要素を使うとき、多くの場合はタイトルラベルをクリックしたらテーブル内のデータがソートされるような機能がある。

ということで、シンプルな構成でソート可能なテーブルをVue.jsをつかってつくる。
vueのバージョンは2系（2.5で動作確認）を使う。

2017年活動報告と2018年行動指針

photo by miniai

2017年はお世話になりました。
2018年もひきつづきダーシノ、当ブログともによろしくお願いします。

2017年のBlack Everyday Company

まずは当ブログについての総括を。

ブログ 85.8万PV

2017年の1年間で、858,582PVあった。

投稿数は過去最多の75記事。1月には67,125だったPVが12月には77,826PVまで伸びた。2017年はとくにバズる記事もなかったのだが、コンスタントに成長できた。10月、11月には8万PVまで伸びた。