2013-10-02

PHPでJSONを連想配列にパースする

PHPのjson_decodeの第二引数を知らなかったのでメモ！
第二引数には、戻り値の形式を決めるフラグを指定できます。

$dec_obj = json_decode($json);        // 結果をオブジェクトで返す
$dec_arr = json_decode($json, true);  // 結果を連想配列で返す

$res_obj = $dec_obj->hoge;            // オブジェクトのアクセス方法
$res_arr = $dec_arr['hoge'];          // 連想配列のアクセス方法

基礎的な事ですが、ちょっとハマって悔しかった…('_')

2013-09-29

バーチャルキーボードの操作

こんぬづわ。

今日は、今作っている「書いたコードをタイピングゲームにして遊べる」Webアプリの中のバーチャルキーボードについてです。

もしかしたらCanvasとかで実装した方がよかったのかもしれませんが、とりあえずHTML＆CSSで出来ています。

f:id:setchi_q:20130928145832p:plain f:id:setchi_q:20130928145835p:plain

シフトキーが押された時の文字の切替え

良く見ると、シフトキーを押したときにキーの文字が入れ替わってますが、実はこれもCSSで表現しています。

HTML(一部抜粋)

<table id="keyboard">
    <tbody>
        <!-- 1行目 -->
        <tr>
          <td>
            <div></div>
            <div><span>!</span><span>1</span></div>
            <div><span>"</span><span>2</span></div>
            <div><span>#</span><span>3</span></div>
            <div><span>$</span><span>4</span></div>
            <div><span>%</span><span>5</span></div>
            <div><span>;</span><span>6</span></div>
            <div><span>'</span><span>7</span></div>
            <div><span>(</span><span>8</span></div>
            <div><span>)</span><span>9</span></div>
            <div><span>0</span><span>0</span></div>
            <div><span>=</span><span>-</span></div>
            <div><span>~</span><span>^</span></div>
            <div><span>|</span><span>\</span></div>
            <div></div>
          </td>
        </tr>
        <!-- 2行目… -->
        ...
    </tbody>
</table>

CSS

/* 通常時 */
#keyboard td span:first-child {
    display: none;
}

/* シフトキーが押された時 */
#keyboard.onShift td span:first-child {
    display: inline !important;
}
#keyboard.onShift td span:last-child {
    display: none !important;
}