Grid Layout（グリッドレイアウト）とは、html/cssで二次元レイアウトを可能にする機能です。
flexboxは直線的にしかレイアウトを配置できないので、 Grid Layout を使うことでレイアウトの幅が広がります。
Grid Layout は以下のようなマス目に区切り、区切った要素の好きなところに要素を配置していきます。
上の図を参考にしながら以下のようなレイアウトを作ってみます。
Webサイトの構造・機能・デザインは、日々、目に見えて向上しています。
構造・機能・デザインが向上すれば、Webアクセシビリティも向上しますが、その恩恵は若者の健常者が受ける部分が多く、
高齢者や子供、障害者の方々にはわかりづらいこともあります。
これは、Webユーザビリティの位置付けに近くなってしまいます。
https://mynavi-creator.jp/blog/article/web-accessibility-for-web-designer
そのため、少しですが、Webアクセシビリティ向上に使える情報を紹介します。
(さらに…)KnockoutJSを使ってSVGを制御するサンプルを作ってみました。
こんな感じです。
長らくSVG実装が出揃わない状況が続いていましたが、最近やっと落ち着いてきました。
慣れ親しんだDOM操作で厳密な座標が制御できるSVGは、Web上でちょっとしたグラフ等を表示するのにとても都合がいいです。
また、MVVMによる画面制御も、jQueryのセレクタ管理に疲れた体にとてもやさしいです。
データを更新するだけでKnockoutJSがDOMを更新してくれるので、画面制御のためのコードがありません。
上のサンプルはHTMLとJavaScriptあわせて50行に満たない簡単なものですので、解説は不要だと思います。
以上です。
前回、enchant.jsの当たり判定がイケてない理由を説明しました。
回転する矩形同士の衝突判定を自前で実装することを目標に、考察を進めていきます。
使いやすい和製ゲームエンジンenchan.jsですが、当たり判定がイケてないようです。
画面周りのちょっとした処理をjavascriptで関数化することはよくありますが、規模が大きくなってくると本来のロジックが見えにくくなってしまってあまりよろしくないなあ、と思うことが多々あります。
過去にjQueryプラグインのソース解析に挫折したことがあって作るのも難しいと思い込んでいたのですが、実はとっても簡単でしたのでご紹介します。
CSS3で登場したボックスレイアウトは便利なのですが、ブラウザごとに対応がまちまちだったりベンダープレフィックスがついたりと面倒なので、調査した記録を残します。
FirefoxとGoogleChrome・SafariなどWebkit系についてはそれなりに分かってきた気がしますが、IEとOperaについては調査不十分です。
前回、イベントの仕組みで状態管理を実装した例を解説しました。
今回は管理する項目を減らすために、できるだけオブジェクトによろしくやってもらう仕組みについて解説します。
どんなに美しい3Dクラフィックスであっても、基本的にゲームはパラパラ漫画のようにヒトコマずつ処理されます。
enchant.jsにも、「フレーム」という概念があります。
フレームが始まるごとにイベントが発生するので、作り手はフレーム内の処理を書くだけでゲームっぽいものが作れます。
ゲーム開始後つまり「ゲーム中」についてはこれだけでも十分ゲームが実装できます。
しかし、規模が大きくなるにつれて「ゲームの開始前、終了後」など管理項目が増えてきます。
これらの処理をフレームイベント内だけで記述しようとすると、だんだん無理がでてきます。
今回はイベントドリブン的な実装を行なった部分について、解説してみます。
