この記事について

NSEG Advent Calendar 2015 の 8 日目の記事です。
2日目の CSS Bird に続いて、CSS プログラミングの基本テクニックを紹介します。

INPUT[type=radio] ~ LABEL

最も基本的なテクニックの一つです。

まず先頭にラジオボタンを並べ、その後ろに各ボタンに対応したLABEL を「position: absolute」で重ねておきます。

そこからタップのアクションに対する変化として、ラジオボタンの checked に応じて LABEL の z-index を変化させることで、同じ場所のタップで次々に隣のラジオボタンの状態を変化させていくことができます。

以下がサンプルコードです。

ラジオボタンの場合は、LABELの1クリックで「対応するラジオボタンへの checked 属性の有効化と、他のラジオボタンの checked 属性の無効化」の2つの状態変化を起こすことができます。これを利用すると、「ゴールの状態になるまでぐるぐる状態変化させる」パズルのようなゲームを作りやすいです。CSS 8puzzle はほぼこのテクニックだけで作られています。

INPUT[type=checkbox] ~ LABEL

これもラジオボタンに並ぶ最も基本的なテクニックです。

ラジオボタンの場合と同じく先頭にチェックボックスを並べ、その後ろに各ボタンに対応したLABEL を「position: absolute」で重ねておきます。

タップのアクションに対する変化のさせ方もラジオボタンと同様です。

以下がサンプルコードです。

チェックボックスは「状態を保存して次々に分岐していく」タイプのゲームを作りやすいです。選択によってエンディングが変わるようなアドベンチャーゲームなどが作れると思います。

CSS Noughts and Crosses はほぼこのテクニックだけで作られています。このゲームではコンピューター側の手順(シナリオ)は最初に計算されていて、ユーザーの選択によって分岐が発生して次の手が変化するという流れになっています。つまり、選択によってハッピーエンド(win)かバッドエンド(lose)の結末になるアドベンチャーゲームとも言えるものになっています。

:hover

:hover 擬似クラスを使うと、デスクトップのような環境であればマウスの動きに追従しているかのように見せることができます。(モバイルのブラウザだと、BUTTON要素をタップするとその後 :hover 扱いになるようなので、今回は :hover を受ける要素を BUTTON にしています)

先頭に :hover を受ける要素を敷き詰めて、その後ろに変化させる要素を置きます。

以下がサンプルコードです。

:hover では、この例のようにマウスに追従しているかのように見せる他にも、「障害物の要素を用意しておいて、その要素が :hover になった瞬間にゲームオーバーの画面を最前面にもってくる」のようにすれば、当たり判定にも利用することができます。

animation

animation を使うと要素を動かすことができます。animation は、 animation-play-state プロパティを running にすると動き始め、 paused にすると動きがその場で止まります。

これを利用すると、前述の「INPUT[type=radio] ~ LABEL」のパターンを使いつつラジオボタンの状態によって animation-play-state 切り替えることで、ユーザーがタップした時点での要素の位置を確定させることができます。

以下がサンプルコードです。

animation による要素の位置の変化は、CSS から利用できる形の状態の変化として残らないのですが、前述の :hover と組み合わせて利用すると「ユーザーのタップのタイミングで障害物の当たり判定を確定させつつ、:hover が発生したらゲームオーバーにする」という形で、「状態を保存する方法」としてゲームに利用できるようになります。

まとめ

以上の4つが CSS プログラミングでよく使われるテクニックです (「私に馴染みのある限りの」ですが) 。基本的にはこれらのテクニックを組み合わせて、その上で兄弟関係や入れ子関係を調整することにより CSS Bird も作られているので、この記事を読んだ後に使われているテクニックに思いを馳せつつもう一度遊んでみると、また違った見方で楽しむことができる、かもしれません。

A clone of Flappy Bird written in CSS

CSS Bird

Open in a new window

この記事について

これは NSEG Advent Calendar 2015 の 2 日目の記事です。

NSEG とは

NSEG は長野県とコンピューターをテーマにした勉強会で、月1回のペースで開催されています。

勉強会の内容や形式は固定されておらず、フリーテーマの発表会、講師を招いての講演会やハンズオンセミナーなど、様々な形で開催されています。また NSEG 単独での開催だけでなく、他の団体と合同で開催している回も数多くあります。

そんな中、少し前の話になりますが、第17回勉強会ではMozilla勉強会との合同という形で開催され、私はその際に CSS プログラミングについての発表をしたことがあります。この記事ではそれにちなんで、CSS プログラミングとはなんぞやという話と、今回新しく書いた Flappy Bird のクローンの紹介をしたいと思います。

CSS プログラミングとは何か

一言でいうと「CSS を使ってプログラミングされているかのような表現をすること」です。

もう少し定義として厳密に考えると、「CSS を主として、LABEL 要素やFORM 要素の挙動などを利用しつつ、JavaScript を使わずにプログラミングされているかのような表現をすること」とも言えそうです。

CSS だけでプログラミングができるわけでは無いので、ここでは誤解のないように「プログラミングされているかのような表現をすること」という回りくどい言い方をしていますが、ブラウザの挙動を含めて考えると「手順にそって実行されている」結果にはなるので、広義的にはおそらく「プログラミング」という表現で差し支え無いと思います。

CSS プログラミングを学ぶということ

CSS プログラミングはともすると「CSS の仕様を使ってトリッキーなことをやっている」だけのように受け取られてしまうかもしれないのですが、実のところ、「プログラミングされているかのような表現」を支えている部分には論理的な構造があり、まさにプログラミングといった要素をもっていたりもします。

CSS プログラミングの基本的な構成要素は、

  • DOM
  • CSS

となっていて、「DOM の状態 (チェックボックスの状態や、マウスのホバーの状態) に対して、CSS で見た目を定義する」という形で表現されています。

CSS は if などの条件判定を記述することはできないですし、CSS 内で状態を持つこともできません。つまりできることは、「DOM の状態に対して、見た目を宣言的に記述すること」のみとなります。

また CSS 内で状態を持つことができないため、マウスのクリックやマウスの移動によって引き起こされた「DOMの状態の変化」に対して、「反応的に結果が変化する」ということになります。

つまりプログラミングのパラダイムとしては、

  • 宣言的
  • リアクティブ

といった要素を持っていると言えます。

そのように考えると一般的なプログラマとしても、ある種のエクササイズとして、「1年に1つ新しい言語を覚える」といった候補に入れてみても(1年かけられるかどうは別にして)よいのではないかと、思わなくもないことろです。

CSS Bird について

Flappy Bird のクローンである今回の CSS Bird は Advent Calendar Driven Development で書いた作品ではあるのですが、実はそれなりに新規性のあるものでもあります。

このゲームでは、:hover 擬似クラスを使って当たり判定を行っていて、タップでジャンプする毎に当たり判定の領域を移動させるということをやっています。したがってここで、2回目以降のジャンプでは、前回のジャンプの状態をストップ(保存)して次のジャンプをさせる必要があるのですが、「前回のジャンプの状態」は (ほとんど) 連続的な値なのでチェックボックスなどで保存することができないという問題がありました。

この問題を解決するために、今回は「animation-play-state を paused にすることで、クリックした時点の縦軸の状態を保存する」という方法を採用しました。より具体的には、ジャンプ時に移動させるレイヤーを入れ子にして、ジャンプ毎に奥から手前に状態を保存しつつ一枚ずつずらして行くという形で、今回の連続ジャンプの機能を実現しています。

「入れ子の DOM 構造と animation-play-state による状態の保存」によって横スクロールアクションゲームを実現するというのは、(私の観測範囲では)これまでになかった新しい作品のパターンだと思います。

まとめ

(それだけではないにしても) CSS プログラミングがトリッキーであることは否めないので、おそらく説明だけでは何をやっているか伝わりづらいと思います。もし興味をもってもらえたらソースを覗いてみるなどして、理解を深めてもらえれば嬉しいです。

またこの記事では触れませんでしたが、CSS プログラミングをするにあたっての基本的なテクニックなどもあるので、それについては別の記事で紹介できればと思っています。

その他の作品

以下の2点が、私が第17回勉強会の当時に作成した作品です。

TL;DR

  • chef-mysql-apt を書きました。
  • 公式 deb で mysql-server の 5.7 をパスワード無しでインストールすると、mysql.user.plugin が auth_socket になるので、ALTER USER で明示的に plugin を変更しないとパスワードを変更できないので気をつけた方がよい。
  • chef の remote_file での checksum の指定は、ダウンロードしたファイルの checksum を確認するものではないので気をつけた方がよい。 (違うとドキュメントに書いてあるけれど)

cookbook を書きました

MySQL を公式 APT リポジトリからインストールする Chef の cookbook、chef-mysql-apt を書いたのですが、非対話型の環境でのインストールという面でいくつかはまったポイントがあったので、それらの情報をまとめます。

cookbook を利用するだけであれば、node を以下のように設定すれば MySQL 5.7 のサーバーをインストールできます。

非対話型環境での mysql-apt-config のインストール

mysql-apt-config の deb は、インストール時に debconf で MySQL のバージョンを指定して、その結果にしたがって /etc/apt/sources.list.d/mysql.list を生成するという動作をするのですが、非対話型の環境でインストールした場合は未選択の状態となってしまい、どのリポジトリも追加されません。 screen-shot_2015-11-06_17-43-10.png 調べたところ、どうもこういった場合には、debconf-set-selections を使うのが定石であるようなので、cookbook では以下のように対応しました。

debconf からの再設定は本来であれば以下のコマンドでできるような気がするのですが、どうもうまくいかない(応答が無くなってしまう)ので dpkg -r して dpkg -i しています。

sudo dpkg-reconfigure -fnoninteractive mysql-apt-config

非対話型環境で mysql-server をインストールした場合の root ユーザーの設定

非対話型環境で公式 APT リポジトリの mysql-server (mysql-community-server) をインストールするとパスワード無しの状態でインストールされるのですが、ここに若干の落とし穴がありました。

  • mysql -u root でログインできない!
  • sudo mysql_secure_installation は成功するのに、入力したパスワードで mysql -u root -p で接続しようとしてもできない!

ということで悩んでしまったのですが、mysql-community-server の postinst を確認したところ、

UPDATE user SET plugin='auth_socket' WHERE user='root';

をしているということが分かりました。

  • plugin が auth_socket なので、root ユーザーの権限で socket 経由でないと接続できない
  • 単に ALTER USER 'root'@'localhost' IDENTIFIED BY 'MyNewPass'; するだけではパスワードを更新できなくて ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'MyNewPass'; のよう明示的に authentication plugins を更新する必要がある
    • mysql_secure_installation で更新されたように見えてできないのはバグな気がします

ということだったようです。cookbook の方でも authentication plugins を更新するようにして、root のパスワードを初期化できるようになりました。

chef の remote_file での checksum

余談ですが、chef の remove_file には checksum を指定できるのですが、ダウンロードしたファイルのハッシュ値が一致することは確認されません。ドキュメントには「The SHA-256 checksum of the file. Use to prevent a file from being re-downloaded.」とあるので、確かにそれを目的とはしていなさそうではありますが。(でも、変な値を入れておいても再ダウンロードされるわけでもないようで、バグなのか詳細追えていないですが) ユースケース的には remote_file こそ、checksum を確認したいような気がするのですが。

とりあえずこの cookbook では、 remote_file の後に file を使って確認する感じにしています。

モテる ! Data API

  • 投稿日:
  • by
  • カテゴリ:

WordPressとかPHP系のコミュニティに行くと若い女の子がたくさんおるねん

Junnama Noda (2014.11.29)

「PHPを使えばモテるらしい」という話を耳にしたので、この仮説に基づいて Data API を使ってモテる方法を考えてみます。

ストラテジー

Data API はデフォルトで JSON 形式のデータを返すので、json_decode を使えば特に何も拡張しなくても PHPから利用することができます。

ただこの方法だと「json_decode」は 5.2 以降でないと使えなくてリーチできる範囲が狭くなりますし、「file_get_contents」とかなんかギークっぽい感じもするので、これを改善してゆるふわに利用できれば、Data API を使ってもっとモテることができるのではと考えました。

ソリューション

  • Data API は出力のフォーマットを変更する仕組みをもっているので、プラグインを作成してPHPのソースコードで出力できるようにする。
  • また Data API は、エンドポイントに拡張子を付けることでフォーマットを指定できるるので、これも利用する。

この2つの戦略を適用すると、以下のようなコードで PHP から Data API を利用できるようになります。

プラグイン

DataAPIFormatPHPをインストールすると、前出のコードが動くようになります。

インプリメンテーション

DataAPIFormatPHPの実装は非常に簡単なもので、PHPのデータ構造への変換はPHP::Sessionモジュール(をちょっと改造したもの)にお任せしているため、数十行程度のconfig.yamlのみで実現されています。

コンクルージョン

それでは、DataAPIFormatPHPでよいお年をお迎えください。

Movable Type Advent Calendar 2014の8日目の記事でした。

トフ

トフはシックス・アパートの公式キャラクターです。CC BY-NC-SA 4.0 の下でライセンスされており、オリジナルは シックス・アパートのウェブサイトで入手可能です。

各ツールのアップデートを行いました。お試しいただいている方は申し訳ありませんが、SyncedTheme プラグインの方は必ず更新をお願いします。

SyncedTheme 0.03

ダウンロード

  • システムレベルのテンプレート編集権限の無いユーザーでも、アカウントを持っていればテーマのファイルをアップロードできてしまうという問題があったので、これを修正しました。

0.03 では機能の追加はないので、ローカル環境でテストをするだけの場合には 0.02 でも問題はありません

mt-sync-theme 0.1.5

Homebrewの場合

brew update && brew upgrade mt-sync-theme

ダウンロード版

ダウンロード

  • MTの環境により正しく認証の情報を取得できない問題を修正しました。
  • 「プラグインがインストールされていない」などの状態が報告されるようになりました。

MTSyncTheme.app 0.0.5

ダウンロード

  • アプリケーションが起動できないという致命的な問題を修正しました。
  • 「プラグインがインストールされていない」などの状態が報告されるようになりました。