INSPIRE TECH

  • このウェブサイトをはてなブックマークに追加

HTMLのclass属性を利用して、要素の幅と高さを指定できるJavaScript


CSSで複雑な表組みなどをデザインしている際、幅や高さをピクセル単位で細かく指定したいことがありますよね？
ただ、HTMLのstyle要素は記述が汚くなるから使いたくない、でもCSSでわざわざclassを作っているとCSSがごちゃごちゃしてしまう・・・。
そんな場合に、HTMLのclass要素を使って、簡単に幅と高さを指定できるJavaScriptを書いてみました。

ダウンロード


wh.js
 ※jQueryを利用しますので、別途jQuery 1.3.2以上のバージョンをダウンロードしてください。

ソース 

(function($) {
    $(function() {
        $('[class*=w_], [class*=h_]').each(function() {
            var classes = $(this).attr('class').split(' ');

            for (var i in classes) {
                if (match = classes[i].match(/^([wh])_(\d+)(px|p)$/)) {
                    var key = '';
                    var value = '';

                    switch (match[1]) {
                        case 'w':
                            key = 'width';
                            break;
                        case 'h':
                            key = 'height';
                            break;
                    }

                    switch (match[3]) {
                        case 'p':
                            value = match[2] + '%';
                            break;
                        case 'px':
                            value = match[2] + 'px';
                            break;
                    }

                    $(this).removeClass(match[0]).css(key, value);
                }
            }
        })
    });
})(jQuery);

設置


jqueryを利用しますので、本ライブラリを読み込ませる前にjqueryの1.3.2以上を読み込ませてください。

利用方法


class指定に下記のような記述をしてください。

この場合、widthが100ピクセル、heightが200ピクセルの指定がされます。
また、パーセントでの記述も対応しています。

この場合、widthが100％、heightが33%の指定になります。
他のclassとの共存も問題ありませんので、比較的自由なデザインが可能になるかと思います。

CakePHPのMediaプラグインでモデル毎にバージョンファイルを生成するアイデア


CakePHPのMediaプラグインは非常に多機能なプラグインで、バージョン管理という非常に便利な機能が備わっており、本画像に手を加えずにいくつものサムネイル画像を生成する事ができます。
ただ、その便利な機能であるバージョン管理機能が少々複雑で、馴れないと使いづらい印象を受けてしまいます。
たとえば画像をアップロードする際、モデルごとに違ったサイズのサムネイルを生成したい、などという場合などが特に悩むポイントかと思います。
基本的にMediaプラグインは、あらかじめアップロードするファイルごとに生成するファイルを﹁バージョン﹂として定義しているため、Mediaプラグインを通してアップロードしたファイルは、全て定義した数のバージョンファイルが生成されてしまいます。
そこで、下記のように工夫することで、モデルごとに生成するバージョンファイル取捨選択するアイデアです。

Attachmentモデルをコピーして改良 

App::import('Lib', 'Media.Media');

class Attachment extends AppModel
{
    public $name = 'Attachment';
    public $useTable = 'attachments';
    public $useVersions = array();

    public $actsAs = array(
        'Media.Transfer' => array(
            'trustClient' => false,
            'transferDirectory' => MEDIA_TRANSFER,
            'createDirectory' => true,
            'alternativeFile' => 100
        ),
        'Media.Generator' => array(
            'baseDirectory' => MEDIA,
            'filterDirectory' => MEDIA_FILTER,
            'createDirectory' => true,
        ),
        'Media.Polymorphic',
        'Media.Coupler' => array(
            'baseDirectory' => MEDIA
        ),
        'Media.Meta' => array(
            'level' => 2
        )
    );

    public $validate = array(
        'file' => array(
            'resource'   => array('rule' => 'checkResource'),
            'access'     => array('rule' => 'checkAccess'),
            'location'   => array('rule' => array('checkLocation', array(
                MEDIA_TRANSFER, '/tmp/'
            ))),
            'permission' => array('rule' => array('checkPermission', '*')),
            'size'       => array('rule' => array('checkSize', '5M')),
            'pixels'     => array('rule' => array('checkPixels', '1600x1600')),
            'extension'  => array('rule' => array('checkExtension', false, array(
                'jpg', 'jpeg', 'png', 'tif', 'tiff', 'gif', 'pdf', 'tmp'
            ))),
            'mimeType'   => array('rule' => array('checkMimeType', false, array(
                'image/jpeg', 'image/png', 'image/tiff', 'image/gif', 'application/pdf'
        )))),
        'alternative' => array(
            'rule'       => 'checkRepresent',
            'on'         => 'create',
            'required'   => false,
            'allowEmpty' => true,
        )
    );

    public function makeVersion($file, $process)
    {
        if (!is_array($this->useVersions) && !empty($this->useVersions)) {
            $this->useVersions = array($this->useVersions);
        }

        if ($this->useVersions === false || !empty($this->useVersions) && !in_array($process['version'], $this->useVersions)) {
            return true;
        }

        return $this->Behaviors->Generator->makeVersion($this, $file, $process);
    }
}

モデルごとに生成するバージョンファイルを切り替える


先ほどのモデルを継承したモデルを生成し、メンバー変数 $useVersions に利用したいバージョンファイル名を配列で列挙します。
 
App::import('Model', 'Attachment');

class UserImage extends Attachment
{
    public $name = 'UserImage';
    public $useVersions = array('main', 'sub');

    public $validate = array(
        'file' => array(
            'resource'   => array('rule' => 'checkResource'),
            'access'     => array('rule' => 'checkAccess'),
            'location'   => array('rule' => array('checkLocation', array(
                MEDIA_TRANSFER, '/tmp/', 'C:\xampp\tmp',
            ))),
            'permission' => array('rule' => array('checkPermission', '*')),
            'size'       => array('rule' => array('checkSize', '1M')),
            'extension'  => array('rule' => array('checkExtension', false, array(
                'jpg', 'jpeg', 'png', 'gif', 'tmp',
            ))),
            'mimeType'   => array('rule' => array('checkMimeType', false, array(
                'image/jpeg', 'image/png', 'image/gif',
            ))),
        ),
    );
}

$useVersions が空の場合は全てのバージョンファイルが生成されます。
 これにより、モデルごとに生成するバージョンファイルを切り替えることが可能になります。

1つのMovableTypeをマルチドメインで運用する


MovableTypeは基本的に、1つのデータベースに1つしかインストールできません。
これは、例えばさくらインターネット等のデータベースが1つしか利用できないサーバーの場合、MovableTypeは1つのサーバーに1つしかインストールできないことになります。
そういった場合に、インストールした1つのMovableTypeを、マルチドメイン運用している各々のドメインから利用可能にする方法です。︵ただし、SSHが利用できる環境に限ります︶

例



●さくらインターネットスタンダードプランで運用
●test-blog.com、test-blog2.com、test-blog3.comの3つのドメインをマルチドメインで運用
●各々のドメインからMovableTypeを利用したい︵test-blog.com/mt 等︶

各ドメインは下記のようなディレクトリに対して設定されています。

●︻test-blog.com︼ /home/アカウント名/www/test-blog.com
●︻test-blog2.com︼ /home/アカウント名/www/test-blog2.com
●︻test-blog3.com︼ /home/アカウント名/www/test-blog3.com

MovableTypeをインストールする


まずはベースとなるドメインを1つ決めて、MovableTypeをインストールします。
 今回は、test-blog.com の mt/ というディレクトリにインストールします。

シンボリックリンクを設定する


SSHでサーバーにログインし、各ドメインにシンボリックリンクを設定します。
 
# 設定するドメインのルートディレクトリに移動
cd /home/アカウント名/www/test-blog2.com/
# MovableTypeディレクトリへのシンボリックリンクを作成
ln -s /home/アカウント名/www/test-blog.com/mt/ mt

これで test-blog2.com/mt でもMovableTypeの管理画面が利用できるようになります。続けて、test-blog3.comにも同様の操作を行います。