2018/06/19

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

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

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

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

2018/06/14

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

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


利用シーン

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

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

2018/05/31

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

2018/05/28

[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サーバーを開発する手順をまとめていく。

2018/03/15

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

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

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



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


requestAnimationFramesetIntervalsetTimeoutには明確な違いがある。

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

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


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


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

2018/03/13

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


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

2018/03/12

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

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

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

2018/03/08

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

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

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

環境は以下のとおり。

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

2018/03/06

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 追記しました

2018/03/01

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



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




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

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

2018/02/21

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

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

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

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

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

2018/01/31

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

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

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


↓こんな感じの検索フォームを例に紹介する。
※ 当記事では使っているバージョンはvue@2.x系(2.5で動作確認)

2018/01/26

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

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

2018/01/17

[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
    • アサーション(お好みで)

2018/01/16

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

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


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

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

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

2018/01/15

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

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

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

2018/01/10

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まで伸びた。