jQueryでスクロールした位置を取得する

jQueryで、画面をスクロールした際の位置を取得したいということがあり調べたのでメモ

以下でどれだけスクロールしたのかの位置を取得できます。

$(window).scrollTop();

もしくは

$(document).scrollTop();

で取得できます。

スクロールした際に、動的にスクロールした位置を取得したいということがあると思います。

$(window).scroll(function () {
  //スクロールした際に動的に実行したい処理を記載する
  var hoge = Y - $(window).scrollTop();
});

上記のように、$(window).scrollを設定すると、画面のスクロールで指定した処理を実行できます。

CakePHPでラジオボタンを使用する

CakePHPでラジオボタンを使用する方法です。
性別を選択するラジオボタンを表示します。

<?php
$options = array('m'=>'男性', 'f'=>'女性');
echo $this->Form->radio('sex', $options, array('legend' => false));
?>

$optionsで選択肢を配列で指定します。

CakePHPで、郵便番号から住所を自動入力したい

会員登録画面などで、郵便番号を入力すると、住所が自動入力されるというのはよく見かけます。
これをCakePHP上で実装したので、メモ。

自動入力には、ajaxzip2を使用します。
ajaxzip2のサイトから、ajaxZip2のアーカイブをダウンロードします。

解凍したajaxzip2をフォルダごとwebroot/js/におきます。
webroot/js/ajaxzip2/というフォルダ内に、
ajaxzip2.jsファイル、dataフォルダ、workフォルダが配置される形です。

viewファイルに、ajaxzip2を呼び出すように記載します。
jQueryを使用します。

<?php
echo $this->Html->script('jquery-1.9.1');
echo $this->Html->script('ajaxzip2/ajaxzip2');
?>

都道府県の選択肢を全て書いてもいいのですが、せっかくなのでDB化します。
prevesというテーブルを作成します。

CREATE TABLE IF NOT EXISTS `preves` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` text,
  PRIMARY KEY (`id`),
  UNIQUE KEY `id` (`id`)
);

データを登録します。

INSERT INTO `preves` (`id`, `name`) VALUES
(1, '北海道'),
(2, '青森県'),
(3, '岩手県'),
(4, '宮城県'),
(5, '秋田県'),
(6, '山形県'),
(7, '福島県'),
(8, '茨城県'),
(9, '栃木県'),
(10, '群馬県'),
(11, '埼玉県'),
(12, '千葉県'),
(13, '東京都'),
(14, '神奈川県'),
(15, '新潟県'),
(16, '富山県'),
(17, '石川県'),
(18, '福井県'),
(19, '山梨県'),
(20, '長野県'),
(21, '岐阜県'),
(22, '静岡県'),
(23, '愛知県'),
(24, '三重県'),
(25, '滋賀県'),
(26, '京都府'),
(27, '大阪府'),
(28, '兵庫県'),
(29, '奈良県'),
(30, '和歌山県'),
(31, '鳥取県'),
(32, '島根県'),
(33, '岡山県'),
(34, '広島県'),
(35, '山口県'),
(36, '徳島県'),
(37, '香川県'),
(38, '愛媛県'),
(39, '高知県'),
(40, '福岡県'),
(41, '佐賀県'),
(42, '長崎県'),
(43, '熊本県'),
(44, '大分県'),
(45, '宮崎県'),
(46, '鹿児島県'),
(47, '沖縄県');

モデル(app/Model/Pref.php)を作成します。
クラスの定義だけです。

<?php
App::uses('AppModel', 'Model');

class Pref extends AppModel {
}
?>

コントローラーで、都道府県データを取得します。
Prefモデルを使用したいので、$usesにPrefを追加します。

var $uses = array('Pref');

コントローラー内で、以下のようにして都道府県データを取得します。

$pref_arr = $this->Pref->find('list', array('fields' => array( 'id', 'name')));
$this->set('pref_arr', $pref_arr);

Viewファイルで以下のように指定します。
Hogeはコントローラー名です。都道府県、市区町村のinputタグのnameがdata[Hoge][pref]となるので、
郵便番号の項目指定の箇所はこれに合わせます。

郵便番号: <?php echo $this->Form->input('zip', array('type'=>'text', 'div'=>false, 'label'=>false, 'size'=>"10", 'maxlength'=>"8", 'onKeyUp'=>"AjaxZip2.zip2addr(this,'data[Hoge][pref]','data[Hoge][address]',null,'strt');")); ?>
都道府県: <?php echo $this->Form->input('pref', array('type'=>'select', 'div'=>false, 'label'=>false, 'options'=>$pref_arr, 'empty'=>'選択してください')); ?>
住所: <?php echo $this->Form->input('address', array('type'=>'text', 'div'=>false, 'label'=>false, 'size'=>40)); ?>

最後に、ajaxzip2内のdataファイル呼び出しがパスの関係でうまくいっていなかったので修正。
js/ajaxzip2/ajaxzip2.jsの31行目を実際の環境にあわせて修正します(先頭にjsを追加)。

AjaxZip2.JSONDATA = 'js/ajaxzip2/data';

以上で使用できるようになると思います。

CakePHPで登録したレコードのIDを取得する

CakePHPで、登録したレコードのIDを取得する方法です。
getLastInsertID()を使用します。

$this->Model->save();
で保存した後に、以下で取得できます。

[sorcecode]
$hoge_id = $this->Model->getLastInsertID();
[/sorcecode]

CakePHPでセレクトボックスを表示する

CakePHPでセレクトボックスを表示する方法のメモ。

まず、コントローラーに選択肢の配列を指定します。
例えば、業種を選択するセレクトボックスを表示します。
コントローラー全体で使用したいので、beforeFilterで指定します。

	function beforeFilter() {
		parent::beforeFilter();

		$category_arr = array(
			"1" => "農業・林業・漁業", 
			"2" => "鉱業", 
			"3" => "建設業", 
			"4" => "製造業", 
			"5" => "電気・ガス・水道業", 
			"6" => "情報通信業", 
			"7" => "運輸業", 
			"8・小売業" => "卸売・小売業", 
			"9" => "金融・保険業", 
			"10" => "不動産業", 
			"11" => "飲食店・宿泊業", 
			"12" => "医療・福祉", 
			"13" => "教育・学習支援業", 
			"14" => "複合サービス事業", 
			"15" => "サービス業", 
			"16" => "公務"
			);
		$this->set('category_arr', $category_arr);
	}

次はViewです。

<?php echo $this->Form->input('category', array('type'=>'select', 'div'=>false, 'label'=>false, 'options'=>$category_arr, 'empty'=>'選択してください')); ?>

div、labelタグを表示したくないので、それぞれfalseを指定しています。
optionsに、コントローラーで指定した配列を設定します。
emptyは、空の選択肢を指定します。

これで、以下のようにselectタグが出力されます。

<select name="data[Hoge][category]" id="HogeCategory">
<option value="">選択してください</option>
<option value="1">農業・林業・漁業</option>
<option value="2">鉱業</option>
<option value="3">建設業</option>
<option value="4">製造業</option>
<option value="5">電気・ガス・水道業</option>
<option value="6">情報通信業</option>
<option value="7">運輸業</option>
<option value="8・小売業">卸売・小売業</option>
<option value="9">金融・保険業</option>
<option value="10">不動産業</option>
<option value="11">飲食店・宿泊業</option>
<option value="12">医療・福祉</option>
<option value="13">教育・学習支援業</option>
<option value="14">複合サービス事業</option>
<option value="15">サービス業</option>
<option value="16">公務</option>
</select>

Hogeはコントローラー名です。

CakePHPの日付入力でカレンダーを使用したい

日付項目は、データベースを作成する際に、date型で作成しますが、
これをCakePHPで実装すると、月(英語名)、日、年のプルダウンで表示されます。

日本で一般的な年、月、日の順に変更して月も英語名ではなく数字で表示させるという
カスタマイズを行うのもよいのですが、カレンダーを表示させて選択するだけという方が
入力が楽なので、これを使用しています。

以下のようなイメージです。(実装例)
カレンダー画像

カレンダーは、「protocalendar」を使用させて頂いております。
ここからダウンロードしてください。

ダウンロードしたファイルを解凍すると、以下のフォルダが生成されます。
images
javascripts
lib
sample
stylesheets

imagesフォルダを見ると、metal、paper、simpleフォルダがあります。
3つのデザインから好きなものを選んでください。
stylesheetsにも同じ名前のCSSファイルがありますので、使用するものをコピーしてwebroot/css/以下に配置します。

javascriptsフォルダには、protocalendar.js本体と各言語ごとのjsファイルがありますので、
使用する言語のjsファイル(日本語だとlang_ja.js)をwebroot/js/以下に配置します。
他に、libフォルダにeffects.jsとprototype.jsがありますので、同様にwebroot/js/以下に配置します。
(すでに存在する場合は不要です)

ファイルを配置したら、これらを呼び出します。
views/layouts/default.ctpあたりに以下を追加します。

<?php
echo $html->css('simple'); 
echo $javascript->link('prototype'); 
echo $javascript->link('effects'); 
echo $javascript->link('protocalendar'); 
echo $javascript->link('lang_ja');  
?>

viewファイルには、以下のように書きます。
add.ctp

<?php echo $form->input('hoo_day',array('type'=>'text','size'=>"10")); ?>

‘type’=>’text’とするのがミソです。

あと、同じviewファイル内にprotocalendarの宣言を書いてやります。
add.ctp

<script type="text/javascript">  
InputCalendar.createOnLoaded('HogeHooDay', {format: 'yyyy-mm-dd', lang:'ja'});
</script>

HogeHooDayは、inputタグのidになります。
CakePHPでは、idはコントローラー名+項目名になりますので、上記の例ですとHogeHooDayになります。

「Hoge」はコントローラー名で、フォームの宣言部分に出てきます。

<?php echo $form->create('Hoge');?>

このコントローラー名に項目名をキャメル記法でつなげます。

format部分は、日付形式を指定します。「yyyy-mm-dd」としておけば、このままMySQLのdate型に放り込めるので便利です。
コントローラー側でデフォルト値を今日とかに指定しておけば、カレンダーで選択済みの状態になります。
lang部分は、日本語のjaを指定してください。

以上で、カーソルが入った時点でカレンダーが表示されます。
日付をクリックするだけで日付入力ができるので便利ですよ!

タッチデバイスでタッチイベント情報が取得できなかった・・・

タッチデバイスでタッチイベント情報が取得できない!と悩んで調べたときのメモ。
結局は取得できたのですが・・・。

以下のようにして、タッチイベントのリスナーを追加します。

_div.addEventListener("touchstart", touchHandler, false);

以下のようにしてタッチした座標を取得しようとしたのですが、取得できず悩んでおりました。

function touchHandler(e) {
  e.preventDefault();
  switch (e.type) {
    case "touchstart" :
      var x = e.clientX;
      var y = e.clientY;
・・・以下略

そこで、kudox.jp意外と簡単!JavaScriptでタッチイベントを取得しようを見ていると、
「touches タッチパネルに触れている指の情報を持った配列」という箇所に目が止まりました。

「配列」?

そうか、なるほどということで以下のようにしたところ、無事に座標を取得できました。

function touchHandler(e) {
  e.preventDefault();
  switch (e.type) {
    case "touchstart" :
      var touches = e.touches;
      var x = touches[0].clientX;
      var y = touches[0].clientY;
・・・以下略

マウスイベントですと、カーソルは1つだけですが、タッチイベントだと指が同時に複数タッチされるから配列なんですね。
(上記の例だと、1つ目のタッチイベントのみになりますので、複数扱う場合はループ処理するなどが必要ですね)

以下のサイトを参考にしました。
kudox.jp意外と簡単!JavaScriptでタッチイベントを取得しよう

CSSでグラデーションを設定する方法

CSSでグラデーション効果を出したいということがあり調べたのでメモ。

グラデーションサンプル

CSSを以下のように設定します。

.gradient {
  background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* FireFox */
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* webkit */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')";
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE5.5+ */
}

IEにも対応ということなのですが、IE10では表示できませんでした。
ブラウザモードをIE9、IE8にしたところ表示されましたので、IE10のみ未対応ということのようです。

以下のサイトを参考にさせて頂きました。
KOJIKA 17IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット

Javascriptでブラウザを判定する方法

Javascriptで動作するサイトで、タブレット端末かPCかを判定する必要があったのでメモ。

Modernizrを使用しました。

Modernizrのサイトにアクセスし、ダウンロードボタンをクリックすると、

利用したい機能を選択する画面に遷移します。

Modernizr Download Builder

タブレット端末かPCかを判定したいのは、タッチイベントなのかマウスイベントなのかですので、
Misc.にあるTouch Eventsにチェックを入れます。
他にも利用したい機能がある場合は、チェックを入れます。

画面下部のGENERATE!をクリックするとソースが生成され、DOWNLOADボタンがクリックできるようになります。
HTMLファイルからダウンロードしたjsファイルを呼び出すように設定します。

Javascriptで以下のように書くだけで、タブレット端末(タッチデバイス)かの判定が可能です。

if (Modernizr.touch){
  //タブレット端末の処理
} else {
  //PCの処理
}

以下のサイトを参考にさせて頂きました。
JavaScript Library Archive様々なブラウザ環境に対応する為のJavaScriptライブラリ「Modernizr」
blog – NOBORU HIRABAYASHIブラウザの機能実装状況を確認するのにユーザーエージェントは使わないでModernizr.jsを使うといい

生年月日から年齢を求める

プロフィールで年齢を表示したいことがよくあります。
で、生年月日から現在の年齢を求めたいということで、
簡単に求められないか調べてみたら・・・
ありました!それもかなり簡単に求められます。

$age = (int) ((date('Ymd')-$birthday)/10000);

$birthdayには誕生日を入れます。
例えば、「19780101」とかです。

以下のサイトを参考にさせて頂きました。
Sun Limited Mt. – 生年月日から年齢を簡単に求める方法