MySQLの「Incorrect string value: '🍣'」問題

  • 投稿日:
  • by
  • カテゴリ:
CREATE TABLE `注文` (
  `内容` TINYTEXT CHARACTER SET utf8mb4
);

なテーブルに、🍣だけをたくさん挿入しようとすると「Incorrect string value: '🍣'」になる。

> INSERT INTO `注文` (`内容`) VALUES (REPEAT('🍣', 64));
ERROR 1366 (HY000): Incorrect string value: '\xF0\x9F\x8D\xA3' for column '内容' at row 1

🍣 と 🍺の場合には「Data too long」になる。

> INSERT INTO `注文` (`内容`) VALUES (REPEAT('🍣 と 🍺', 64));
ERROR 1406 (22001): Data too long for column '内容' at row 1

TEXT系のカラムの場合にはカラムのサイズで切ったバイト列に対して正しい文字列かどうかを判定していて、そのためマルチバイトのエンコーディングで文字の途中で切られた場合には(実際には「Data too long」という理由で切られたのに)「Incorrect string value」となっていたということのようでした。

Bug #87100として報告してStatusはVerifiedになったのですが、その後動きがないように見えるので、今後どうなるかはよくわかっていません。

検証環境用のアクセス制限をnginxで11行で設定する

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

どんな状況での話か

  • 公開前や移行時の確認用のサーバーに、念のためパスワードを設定しておきたい
    • 厳密なアクセス制限は必要なく、「URLにアクセスしただけでは見られない」という程度の制限でよい
  • ウェブサーバーはnginxで、バックエンドのサーバーにプロキシしている
  • バックエンドのサーバーで、BASIC認証やDigest認証が使われている
    • つまり、nginxで単純にBASIC認証をかけてしまうと不都合がある

という稀によくありそうな状況で、既存の設定に影響をあたえること無く11行くらいで設定する方法についての話です。

注意事項

ユーザーが思った通りに認証情報を破棄できなかったりするので、本番運用でのアクセス制限として利用するものではありません。

設定前のファイル

な感じです。

設定後のファイル

11行(変数定義などで+4行)追加して以下のようになります。

流れとしては、

  1. サーバーでは、秘密のcookieが確認できない場合にはBASIC認証が必要とのレスポンスを返す
  2. ブラウザでは、BASIC認証が設定されているときのダイアログが表示される
  3. サーバーでは、正しいパスワードが送られてきた場合には秘密のcookieを設定する
  4. それ以降は、秘密のcookieが設定されていればBASIC認証の情報は必要なくアクセスできるようになる

となっています。

あえてBASIC認証のダイアログである必要はなく、セキュリティ的には期待される動作と異なるUIで好ましくはないのですが、403的なページを用意するよりもパスワードのダイアログを出してしまった方が楽だし説明も省けるので、一時的な制限ならこんなのもありではないかと思います。

TL;DR

Alpine linux上では単純に$ gem install therubyracerしただけではtherubyracerは動かないのですが、これを動くようにするDockerfileを書きました。

DockerfileはDocker Hubのruby-with-therubyracerに置いてあり、usualoma/ruby-with-therubyracer:2.4.0-alpineという名前でbase imageとしても利用できるようになっています。(親のbase imageはruby:2.4.0-alpineです。)

何が必要だったか

therubyracerはlibv8というgemに依存しており、インストール時にlibv8に含まれるv8のライブラリにリンクされます。ここで、libv8は(ドキュメントにもあるのですが)通常だとコンパイル済みのバイナリで、Linuxの場合にはglibcにリンクされたものがインストールされるようになっているということのようです。そしてAlpine linuxではglibcではなくmusl libcがベースになっているという事情から、そのままでは動かないということでした。

そこまで分かれば後はlibv8をDockerfileでコンパイルすればよいだけなので既存のDockerfileを参考にしてlibv8をインストールして、その上でtherubyracerをインストールするようにしました。

docker image のサイズを抑えるためにやっていること

therubyracerではインストール時にlibv8のライブラリは静的にリンクされて利用時にはlibv8は参照されないようなので、libv8側のライブラリが含まれるディレクトリを$ rm -fr $(dirname $(dirname $(gem which libv8)))/vendorという形で削除しています。行儀のいいやり方ではありませんが、これだけで76MBほどかせぐことができます。

いずれにいしてもv8が入るのである程度大きくはなりますが、base imageから比較して55MB程度の増加で、debian8.0がベースのruby:2.4.0-slimで同じようにインストールしたものとと比較しても一応小ささは保たれているという感じです。

Movable Type のリスティングフレームワークの機能の一部である「フィルタ」を、MTタグやDataAPIのエンドポイントで利用することができるFilteredObjectsというプラグインを公開しました。

mt-plugin-FilteredObjects

記事やウェブページを複雑な条件で絞り込んで表示する場合、これまでは MTML で頑張るか、SearchEntriesで条件を指定していたと思います。FilteredObjects プラグインはこういったケースでのもう一つの選択肢になるものです。MTの「フィルタ」機能を利用するため(「フィルタ」は管理画面からGUIで条件を編集できるので)、プログラミングの知識がなくても条件を細かく指定することができ、MTMLの方ではそれを使ってシンプルな書式で結果を得ることができるようになります。

Getting sterted(とりあえず使ってみる)

プラグインのインストール

まずはFilteredObjectsプラグインをインストールしてください。

リスティングフレームワークを拡張するプラグインのインストール(必要な場合だけ)

FilteredObjectsはリスティングフレームワークを拡張する別のプラグインと組み合わせるとより強力になります。(プラグインによっては組み合わせることができない可能性もあります。)そして特に、カスタムフィールドで複数の条件を指定して絞り込みができるとここでは格段に便利になると思うので、おすすめはCustomFieldsListingプラグインです。(ただ実は、CustomFieldsListingプラグインはFilteredObjects側からだいぶ無理して利用させてもらう形になっているので、同時に利用した場合CustomFieldsListingの機能が正常に動作しなくなってしまう可能性があります。同時利用で不具合が起きる場合にはFilteredObjectsプラグインを削除してください)

「フィルタ」の準備

一覧ページで「フィルタ」の新規作成へと進み、条件を指定したあと、「識別子」を指定して「フィルタ」を保存してください。

screen-shot 2016-12-20 4.15.34.png

screen-shot 2016-12-20 4.17.36.png

MTMLで出力する

「識別子」を付けて保存した「フィルタ」は mt:FilteredEntries と mt:FilteredPages を使って以下のように出力することができます。

Data API で取得する

Data API では /filtered-objects/entries に filter パラメータを指定して取得することができます。

Advanced Usage(もう少し凝った使い方)

MTの「フィルタ」では、「または(OR)」という条件を指定することができないのですが、FilteredObjects では複数の「フィルタ」を「または(OR)」でつなげることができます。

やや複雑になるので、具体的な例で考えてみます。

複数のニュースのブログから条件を指定してピックアップする

以下のように、複数のニュース用のブログがあるとします。

  • 会社全体のニュース
  • 製品毎のニュース

ここで、ウェブサイトのトップページに、

  • 会社全体のニュースからは全部
  • 製品毎のニュースからは「全体のニュースに表示する」にチェックを入れたものだけ

という条件で表示するケースを考えます。

この場合は「フィルタ」を2つ、それぞれ上の条件と同じものを指定して作成します。(特定のブログを指定するための「ブログID」の条件はMTの標準では表示されませんが、FilteredObjects をインストールすると表示されるようになります。)

screen-shot 2016-12-20 5.00.56.pngscreen-shot 2016-12-20 5.03.40.png

screen-shot 2016-12-20 5.09.59.pngscreen-shot 2016-12-20 5.10.34.png

スクリーンショットの内容で、以下の2つのフィルタを作成したとします。

  • blog-general-news
  • show-in-general-news

ここまでできれば MTML 側は簡単で、 mt:FilteredEntries タグの filter に2つのフィルタを「OR」でつなげて指定することで目的の記事を表示することができます。

また、Data API の /filtered-objects/entries エンドポイントで取得することもできます。

制限事項など

  • MTタグ、Data APIのエンドポイントの両方で、公開されている記事のみが対象になります
  • 誤って削除してしまうことのないように、「識別子」を付けた「フィルタ」ではゴミ箱アイコンが表示されなくなります
    • 「システム > フィルタの管理」で削除することができます
  • 種類が「日付と時刻」のフィールドでは「今より前」「今より後」が表示されますが、これは CustomFieldsListing を独自に拡張しているもので、うまく動かない場合は FilteredObjects 側の問題です
    • 日付の場合「今より前」は「今日の23時59分59秒より前」となり、「今より後」は「今日の0時0分0秒より後」となります
  • 「自分の記事」の条件には未対応です
  • 対象となるブログは「フィルタ」からいい感じに選択されるはずですが、うまくいかない場合には明示的に指定してください
    • mt:FilteredEntries/mt:FilteredPages では、マルチブログのモディファイアを指定することができます
    • /filtered-objects/entries エンドポイントでは、blogIds パラメータにブログのIDを「,」(カンマ)区切りで複数指定することができます

FilteredObjects プラグインでの「フィルタ」の運用について

MTでは「フィルタ」は「ユーザ」毎に管理されるデータなので、FilteredObjectsのようにテンプレートやData APIでで利用する道具としては向いていない部分があります。(他の「ユーザ」の「フィルタ」を見ることができない、など。)

「識別子」のついた「フィルタ」がいろいろな「ユーザ」のデータとして散らばるのは好ましくないと思うので、現時点としては『専用の「ユーザ」を作成して、全ての「フィルタ」はそこで管理する』が現実的な一つの回避策ではないかと思っています。

プラグインのインストール

  1. GitHubからzipファイルをダウンロードしてください。リリース一覧
  2. ダウンロードしたファイルを展開してください。
  3. pluginsディレクトリにアップロードしてください。

    インストール後のディレクトリの配置は以下のようになります。

    $MT_HOME/
        plugins/
            FilteredObjects/

サポートしている機能

  • スタティックパブリッシング
  • Data API

サポートしていない機能

  • ダイナミックパブリッシング

動作環境

  • MT6

この記事について

この記事は Movable Type Advent Calendar 2016 の20日目の記事です。

CSS ではできないこと

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

この記事について

NSEG Advent Calendar 2015 の 22 日目の記事です。
2日目の CSS Bird や8日目のサンプルコードで学ぶ CSS プログラミングの基本テクニックでは CSS でなんでもできそうな記事ばかりだったので、今日は CSS でできないことについて書いてみます。(今日のは短いです)

親要素、兄要素でしか絞り込むことができません

CSS では他の DOM 要素との関係で絞り込むための、

  • Descendant combinator ( body div )
  • Child combinator ( body > div )
  • Next-sibling combinator ( div + div )
  • Following-sibling combinator ( div ~ div )

がありますが、これはいずれも、右側の要素に対して「親」または「兄」の要素で絞り込むためのセレクタです。

つまり、チェックボックスで状態を管理する場合、その状態にしたがって表示を変化させることができるのは「弟」または「子」要素のみで、CSS では「親」や「兄」に影響を与えることはできません。 CSS Bird のようなアクションゲームでは、当たり判定のための子要素を用意しておいて、「子どもの .enemy 要素に :hover したら、親の #game-over を表示させる」というようなことができると嬉しいのですが、そういったことはできないのです。サンプルコードで、「DOM の先頭に INPUT 要素が兄弟として並ぶ」形になっていたのはこのためです。

ちなみに、Selectors Level 4 の Editor's Draft では、:has() という「セレクタにマッチする子や孫を持っている要素」を表現するための擬似クラスが含まれていて、これを使うと「#game-over:has(.enamy:hover) { display: block }」のように子要素から親要素に影響を与えるように CSS も書けるようになりそうです。

状態は DOM 構造に従ってしか伝播しません

CSS では :hover などの状態は DOM 構造にしたがってしか伝播しません。例えば次のような CSS があったとき、

「#div2」が「#div1」子要素になっていれば、「#div2」の :hover が「#div1」に伝わります。

しかし「#div1」と「#div2」が兄弟要素の場合には、見た目は同じでも「#div2」の :hover は「#div1」には伝わりません。

また逆に「#div2」が「#div1」の子要素になってさえいれば、見た目としては重なっていなくても「#div2」の :hover は「#div1」に伝わります。

Fastly - MT と Fastly を連携させるプラグイン

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

Movable Type と Fastly を連携させるための Fastly というプラグインを公開しました。

mt-plugin-Fastly

このプラグインを使うと認証を必要としないパブリックな Data API のレスポンスをキャッシュさせることができます。これにより先頃から AWS で利用できるようになった t2.nano でも、Data API をフロントエンドで利用しているサイトを運用することも可能になります。(なると思います)

また昨年公開した mt-plugin-DataAPIFormatPHP とあわせて使えば、外部のサイトから PHP で以下のように MT のデータにアクセスをしても、現実的な速度で動作するようになります。(なると思います)

このブログは Fastly と mt-plugin-Fastly を使って運用されています。

できること

  • MT でコンテンツを更新した際に、対応する Fastly のキャッシュを即時にクリアすることができます
    • 記事、ウェブページ、アイテム、の全てに対応しています
    • ダイナミックパブリッシングにも対応しています
  • 管理画面 (mt.cgi) と、認証付きの Data API (mt-data-api.cgi) を Fastly でキャッシュされないようにします
  • 認証なしの Data API の結果をキャッシュさせ、かつコンテンツを更新した際に即時にクリアすることができます
    • mt-search.cgi の検索結果についても同様にキャッシュ、クリアすることができます
    • キャッシュのクリアを非同期に処理させることもできます
  • テンプレートモジュールを ESI で処理させることができます
    • これにより、スタティックパブリッシングでもページ内の部分的な更新が可能になります
    • (ダイナミックパブリッシングでは未対応です)
  • PURGE リクエストに任意のヘッダーを指定することができます
    • リクエストヘッダーでアクセス制限をかけている場合に、プラグインの設定で認証情報を追加することができます。(Fastly 側の設定例)

ESI について

ESI は耳慣れない言葉かもしれないので、簡単に補足します。(私も詳しくはありません)

ESI は Edge Side Includes の略で、CDN やキャッシュサーバーの層で include の処理をさせるための仕様です。つまり ESI を使うと、(静的な内容ではありますが) PHP の include や、SSI の #include あるいは、Web Components のようなことを、CDN やキャッシュサーバーの層で行わせることができるようです。

Fastly では (2015年12月現在) バックエンドでは varnish (2.1) を利用しているとのとこで、varnish の ESI に関するドキュメント の機能を利用することができるようです。esi:remove はあまり利用することはないと思うので、実質的には「esi:include のみが利用できる」というところだと思います。

Fastly で ESI を利用するために必要なこと

Fastly で ESI を利用するためには、custom VCL. を使って有効にする必要があります。この custom VCL. の機能は登録直後は利用できず、サポートにメールをして有効にしてもらう必要があり、英語が苦手(私は苦手です)な場合には若干敷居が高いです。が、おそらく特別な審査があるということではなく、私は「custom VCL」「request」を含んだ2行くらいのメールを送ったところ数時間程度で有効にしてもらえたので、基本的にはお願いすればすぐに使えるようになるものだろうと思います。

costom VCL が設定できるようになったら、以下の VCL をアップロードすれば ESI を利用できるようになります。

もう少し細かいところについては「How do I enable basic ESI in my VCL?」などを参照するとよいと思います。

プラグインのインストール

  1. GitHubからzipファイルをダウンロードしてください。リリース一覧
  2. ダウンロードしたファイルを展開してください。
  3. pluginsディレクトリにアップロードしてください。

    インストール後のディレクトリの配置は以下のようになります。

    $MT_HOME/
        plugins/
            Fastly/

Getting sterted (とりあえず使ってみる)

とりあえず使ってみるだけであれば、難しい設定は必要ありません。

Fastly

  • 公開サイトを Fastly 経由で配信されるようにする

MT

  • プラグインをインストールする
  • 「ブログのプラグイン設定」を開き、「有効」のチェックボックスにチェックを入れて更新する

以上の設定を行うだけで、以下の機能が有効になります

  • 記事やアイテムの更新のタイミングでキャッシュがクリアされる
  • 認証が必要な Data API がキャッシュの対象から外される
  • mt.cgi に関しては全てキャッシュの対象から外される

ESI を使う

ESI を使う場合にも特別な設定は必要ありません。以下の手順で利用することができます。

  1. ブログの「全般設定」を開き、「モジュール設定 > サーバーサイドインクルード」で「Edge Side Includes」を選択して保存する
  2. ESI でインクルードしたいテンプレートモジュールを開き「ESIのインクルードとして処理する」にチェックをいれて保存する

以上の準備ができていると、インデックステンプレートやアーカイブテンプレートから mt:Include[module="module-name"] でそのモジュールを呼び出した場合に、ESI で処理されるようになります。

ESI を使うとどんなことが実現できるか

  • スタティックパブリッシングを使いながら
  • PHP や SSI などサーバー上の仕組みに頼ること無く
  • MT の作法で mt:Include を書くだけで
  • 全てのページに埋め込まれるようなモジュールを、全体を再構築すること無く
  • 通常の記事の更新に合わせて全てのページで更新する

ということができるようになります。

Data API や検索結果のキャッシュをクリアする

Data API や検索結果のキャッシュをクリアする場合には、Fastly の API キー等を設定する必要があります。

MTの設定

  1. mt-config.cgi に、FastlyAPIKey という名前で Fastly の API キーを追加する
  2. 「ブログのプラグイン設定」を開き、「Service」の欄に Fastly の管理画面で表示されている ID を入れて更新する

以上の設定を行うと、ブログ記事やアイテム、またはテンプレートなどの更新時に Data API や検索結果のキャッシュがクリアされるようになります。

サポートしている出力タイプ

  • スタティックパブリッシング
  • ダイナミックパブリッシング
    • ESI には未対応です

動作環境

  • MT6

この記事について

この記事は Movable Type Advent Calendar 2015 の21日目の記事です。

この記事について

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

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

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 の下でライセンスされており、オリジナルは シックス・アパートのウェブサイトで入手可能です。