2013-10-04

【FuelPHP】HTMLをminifyして出力する

PHPでHTMLのminifyが出来るhtml-minifierというものがありました。
これをFuelPHPから使ったのでメモ。

まずはconposerでhtml-minifierをダウンロードします。
下記を記述したconposer.jsonを作成

{
    "require": {
        "zaininnari/html-minifier": "*"
    }
}

インストール

curl -sS https://getcomposer.org/installer | php
php composer.phar install

生成されたvendorフォルダを、FuelPHPのmodelフォルダの直下に置いて、次のモデルを定義しました。

<?php
require_once APPPATH.'classes/model/vendor/autoload.php';

class Model_Html extends Model
{
    public static function minify($view)
    {
        return zz\Html\HTMLMinify::minify($view, array(
            'doctype' => 'html5',
            'optimizationLevel' => 1
        ));
    }
}

コントローラから、下記のように使用できます。

<?php
...
    $view = View::forge('home/index');
    $view->header = View::forge('header');
    $view->footer = View::forge('footer');

    // minifyして返す
    return Response::forge(Model_Html::minify($view));

minify前
f:id:setchi_q:20131004101449p:plain
minify後 (optimizationLevel: 1)
f:id:setchi_q:20131004101245p:plain

z\Html\HTMLMinify::minifyの第二引数にはオプションを渡せます。
下記のオプションが使えます(2013/10/04現在)。最初の値がデフォルト値です。

doctype: XHTML1.0 / HTML4.01 / html5
optimizationLevel: 0 / 1
emptyElementAddSlash: false / true
emptyElementAddWhitespaceBeforeSlash: false / true
removeComment: true / false
removeDuplicateAttribute: true / false

～追記(2013/10/05) ～
圧縮した結果をデータベースにキャッシュさせました。
【FuelPHP】 minifyしたHTMLをデータベースにキャッシュする

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;
}