Javascript:セレクトボックス選択時にページ遷移する

セレクトボックスの値を変更した時に、選択した項目によって別のページ遷移リンク)させたい場合があります。

Javascriptを使用すれば簡単にページ遷移させることが可能です。

JavaScriptonChangeイベントを使用し、セレクトボックスの値を変更したら指定のリンク先に遷移するという処理を記述すればOKです。

JavaScriptでページ遷移する方法は「location.href」を使用します。
以前に「location.href」の説明を記述しました。下記に記載しています。

Javascript:locationオブジェクトでURL情報を取得する

セレクトボックス optionタグのvalueの値を「location.href」にセットするようにします。

下記に例を記述します。


セレクトボックス選択時にページ遷移

onChangeはフォームの入力・選択値が変更された時に処理を行うイベントです。

セレクトボックスに「onChange=”location.href=value;”」を記述します。
optionタグのvalue値に遷移させるURLを指定します。

<select onChange="location.href=value;">
    <option value="">---------</option>
    <option value="sample1.html">サンプル1</option>
    <option value="sample2.html">サンプル2</option>
    <option value="http://www.google.co.jp/">Google</option>
    <option value="http://www.yahoo.co.jp/">Yahoo!</option>
</select>

セレクトボックスの値を変更すると、選択した値のURLに遷移することができます。


たまに使いたい時があるのでメモしておきます。

Fuelphp:エスケープしないでSQLを実行する「DB::expr()」

Fuelphpでデータベースの値を操作する場合は、DBクラスを使用します。

そのDBクラスを使用してデータを取得すると、自動でエスケープ処理をかけてくれます。
しかし、状況によってはエスケープしないでデータを取得したい場合があります。

DB::expr()メソッドを使用すればエスケープ処理しないで実行することができます。

MySQLの関数で「COUNT()」「SUM()」「RAND()」などを使用したい場合や
サブクエリを使用してデータ取得する場合などに非常に便利です。

下記に、Fuelphpの「DB::expr()メソッドを使用してデータを取得した時の方法をメモします。


expr()メソッド

エスケープ処理をしないで実行することができます。

DB::expr('クエリ文字列')

「DB::expr()」の実行例(MySQL関数を使用した場合)

・「COUNT()」関数を使用して行数を取得する場合

$query = \DB::select(\DB::expr('COUNT(*) AS cnt'))->from('user');
$result = $query->execute()->as_array();

実行したSQL文

SELECT COUNT(*) AS cnt FROM `user`

・「SUM()」関数を使用して合計値を取得する場合

$query = \DB::select(\DB::expr('SUM(point) AS total'))->from('user');
$result = $query->execute()->as_array();

実行したSQL文

SELECT SUM(point) AS total FROM `user`

・「RAND()」関数を使用してデータをランダムに取得する場合

$query = \DB::select()->from('user');
$query->order_by(\DB::expr('RAND()'));
$result = $query->execute()->as_array();

実行したSQL文

SELECT * FROM `user` ORDER BY RAND()

「DB::expr()」を使用すると上記のようなMySQLの関数を使用することができます。

以前はデータを取得した後にPHPで件数や合計値などを計算してました。
「DB::expr()」を使用するとSQL側で計算等ができるのでとても便利です。

他にも複雑なSQL文を実行する時など色々な使い方ができそうです。

しかし、エスケープ処理がされないので入力した値などを使用してデータを処理する場合は注意です。
その際は「DB::escape()」メソッドでエスケープするなどの処理が必要になります。

Fuelphp:selectメソッドで別名(エイリアス)を付けたデータ取得

FuelphpDBクラスselectメソッドを使ってデータを取得する時に、
フィールド別名エイリアス)を付けてデータを取得する方法をメモします。

複数のテーブルをJOINしてデータを取得するとフィールド名が重複してしまうことがあります。
その際は、重複したフィールド名に別名(エイリアス)を付けてデータを取得すると思います。

SELECT文を実行する時に「AS句」を使用すればフィールド名に別名を付けることができます。

SQL文をそのまま記述してもいいのですが、Fuelphpの「DB::select」で
別名を付けてデータを取得する方法がありました。

下記にそのフィールド名に別名を付けた時の方法を記述します。


別名(エイリアス)を付けたデータ取得

「DB::select」のフィールド名の指定の箇所に
配列で指定すると別名を付けることができます。

下記のように配列を指定します。

DB::select(array('列名', '別名'))->from('テーブル名')

使用方法

エイリアスを指定したい列は配列で指定します。

$query = DB::select('id', array('name', 'user_name'))->from('user');
$result = $query->execute()->as_array();

実行されるSQL文

SELECT `id`, `name` AS `user_name` FROM `user`

・JOINを使用する場合

$query = DB::select('user.id', array('user.name', 'user_name'), array('group.name', 'group_name'))->from('user');
$query->join('group', 'LEFT');
$query->on('user.group_id', '=', 'group.id');
$result = $query->execute()->as_array();

実行されるSQL文

SELECT `user`.`id`, `user`.`name` AS `user_name`, `group`.`name` AS `group_name` FROM `user` LEFT JOIN `group` ON (`user`.`group_id` = `group`.`id`)

Chrome:ブラウザ上の選択した範囲をピクセルで表示するアドオン「MeasureIt!」

Chromeブラウザ上で選択(ドラッグ)した範囲の横幅縦幅サイズ
ピクセルで表示させることができるアドオンMeasureIt!」をご紹介します。

MeasureIt!

Chrome_MeasureIt_1

WEBサイトのデザインやコーディングをしていると画像や要素のサイズがどのくらいなのか調べたい時があります。

ブラウザに表示されている画像などの大体のサイズを計測したい時に「MeasureIt!」を使用すると
範囲を選択するだけで縦・横のサイズがピクセルで表示されるのでとても便利です。

サイト制作の作業効率も上がると思います。

下記にChrome拡張機能MeasureIt!」を追加し、使用した時の方法をメモします。


「MeasureIt!」の使用方法

1.下記URLにアクセスします。

MeasureIt!

2.「+ 無料」ボタンをクリックし、「MeasureIt!」をChromeに追加します。

Chrome_MeasureIt_2

3.メッセージボックスが表示されるので、「追加」をクリックします。

Chrome_MeasureIt_3

4.追加するとヘッダーメニューに「MeasureIt!」のアイコンが表示されます。

Chrome_MeasureIt_4

5.アイコンをクリックすると選択できる状態になるので、測りたい箇所をドラッグします。

ドラッグすると右側に選択した範囲の縦幅・横幅のサイズが表示されます。

Chrome_MeasureIt_5

再度、アイコンをクリックすれば通常の画面に戻ります。


アイコンをクリックしドラックするだけで、ピクセル単位でサイズを簡単に計測できるのでオススメなアドオンです。
「ここのサイズどのくらいだろう?」
みたいな感じでざっくりと測りたい時に活用できると思います。

参考サイトを調べたりする場合なども便利ですね。

Fuelphp:Imageクラスを使用し、画像を回転する「rotate」

FuelphpImageクラスを使用すると、簡単に画像回転させることが可能です。

iPhoneで撮影した画像をアップロードし、ページに表示すると横に表示されてしまうことがあり、
アップロードした画像を回転させる必要がありました。

FuelphpImageクラスを使用して、読み込んだ画像を回転させて保存する方法をメモします。


rotate()

ロードした画像を時計回りに回転します。
パラメータに回転する角度を指定します。

・時計回りに90度回転する場合

rotate(90)

※反時計回りの場合は「-90」


Imageクラスのrotate()で画像を回転

回転したいファイルをロードし、「rotate()」で回転する角度を指定します。

// ファイルパスを指定
$f_path = '/home/hoge/public/uploads/sample.jpg';

// ファイルを読み込む
\Image::load($f_path)
	->rotate(90)	// 時計回りに90度回転
	->save($f_path);	// 画像の保存

上記の方法で画像を回転して保存することが可能です。


他にもImageクラスを使用すればリサイズやトリミングなど簡単に画像を加工することできます。