2013-02-12

z-indexにまつわる簡単な問題

次の場合、ブラウザでの表示はどうなるでしょうか。
答えは実際に実行してみてください。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>z-index test</title>
    <style type="text/css">
      #layer01 {
        width: 300px;
        height: 120px;
        background: lightblue;
        position: absolute;
        z-index: 3;
      }
      #layer02 {
        width: 600px;
        height: 180px;
        background: pink;
        position: absolute;
        z-index: 2;
      }
      #layer03 {
        width: 1200px;
        height: 240px;
        background: dimgray;
        position: absolute;
        z-index: 1;
      }
    </style>

  </head>
  <body>
    <div id="layer02"></div>
    <div id="layer03"><div id="layer01"></div></div>
  </body>
</html>

2013-02-07

PHPオブジェクト指向のかんたんな問題（protected / private の違いを確かめる）

PHP

PHP5系以降はオブジェクト指向プログラミングでの開発が可能になった。
オブジェクト指向が苦手なひとにこそ、protectedとprivateの違いを理解しているか確認問題として使って欲しい。

以下のコードを実行した際、
l.31 echo $obj->public;
l.34 $obj2->printHello();
l.35 $obj2->printPrivate();
はそれぞれどう出力するか？

<?php

class MyClass {
    public $public = 'Public';
    protected $protected = 'Protected';
    private $private = 'Private';

    function printHello() {
        echo $this->public;
        echo $this->protected;
        echo $this->private;
    }
}

$obj = new MyClass();
# echo $obj->public;
# echo $obj->protected; // cannot access
# echo $obj->private; // cannot access
# $obj->printHello();
class MyClass2 extends MyClass {

    protected $protected = 'Protected2';
    private $private = 'Private2';

    function printPrivate() {
        echo $this->private;
    }
}

$obj2 = new MyClass2();
echo $obj2->public;
# echo $obj2->private;
# echo $obj2->protected;
$obj2->printHello();
$obj2->printPrivate();

解答は実際に実行して確かめてみてください。

2013-01-21

jQueryでのfind()で得られるDOM配列について

jQuery

ついでなので、jQueryのfind()メソッドで得られる配列についてのメモ。

var list = $('ul#hoge > li');

var list = $('ul#hoge').find('li');

上記二式とも得られるオブジェクトは同じなのですが、ここで例えば

list[0].hide();

とするとエラーになる。というのも、find()メソッドで返ってきたDOMオブジェクトは
jQueryオブジェクトではないので、jQueryの関数は使えない。

$(list[0]).hide();

と一回jQオブジェクトに変換して上げる必要がある。理屈的にはわかるのだけど、たまに忘れる。

2013-01-21

jQueryでのイベントコールバックの"this"を考える

jQuery

jQuery におけるthisの扱いについて、簡単なメモというか案外忘れがちなこと。

<ul id="tgs">
     <li>Hitomi</li>
     <li>Miyu</li>
     <li>Yuri</li>
     <li>Mei</li>
     <li>Ayano</li>
</ul>

のようになっている場合、
Hitomiがクリックされた時、このリストの何番目？を取得する
「index()」というメソッドに投げるオブジェクトについて、メモ。

$('#tgs li').click(function() {
     var index = $('#tgs.li').index(this);
     console.log(index);
});

これで、ひっとをクリックすると、コンソールに「> 0」と入るのですが、
これって、要はthisがイベントの対象となるオブジェクトが帰ってくるので、
言い換えると、イベントオブジェクトのターゲットを入れてあげることに同義なんですね。

$('#tgs li').click(function(event) {
     var index = $('#tgs.li').index(event.target);
     console.log(index);
});

あたりまえのことなんですけどねー。

2013-01-17

CakePHP2.x系AuthComponentのマニュアルをテキトーに翻訳してみた

CakePHP2.x系AuthComponentのマニュアルをTOEIC700点台の俺がテキトーに翻訳してみた。
新人教育用に書いた解説です。（※下書きです。）
適宜改定していきます。（※下書きです。）

【原文はこちら】
http://book.cakephp.org/2.0/en/core-libraries/components/authentication.html

※下書きです。（大事なことなのでry

##################################################

AuthComponentはなぜわかりづらいのか？
たぶんバージョンの前後で仕様が違うから…！

【Authentication】おーせんてぃけーしょん

ユーザー認証とかふつうはユーザー名とパスワードだけで十分だろJK。
CakePHPでは次の3種類の認証ができるよ。

・フォームでにんしょう！
・ベーシックなにんしょう！
・ダイジェストなにんしょう！

とはいえ、普通のウェブはフォーム認証だしデフォの設定はフォーム認証だ。

【Choosing an Authentication type】チュージングアンおーせんてぃけーしょんタイプ

ベーシックとダイジェストのち外とか知ってっか？
パスワードの扱い方のちがいくらいしかないんだけどなm9

ダイジェスト認証の方がつおい。ハッシュかけてるから。

SSLつかえない情弱さんは、ダイジェスト使っておけば間違いない。

ちな、OpenIDをお使いの場合は、CakeのCoreではむり。

【Configuring Authentication handlers】コンフィギュアリングおーせんてぃけーしょんハンドラーズ

$this->Auth->authenticate = array('Form');

複数のハンドラを使うこともできる！
$this->Auth->authenticate = array(
'Form' => array('userModel' => 'Member'),
'Basic' => array('userModel' => 'Member'),
);

????????????????????????????????????????????????????????????????????????????????????????????????????
一回だけハンドラがユーザー認証に使えるようになると、
すべての認証を例外に投げることができる。

function beforeFilter() {
$this->Auth->authenticate = array('Form');
}

public $components = array(
'Auth' => array(
'Form',
),
);

??????????????????????????????????????????????????
DRYってなんだ？
ウェット（笑）二回も書くなんて笑止千万！ドライなコードにしたい！

$this->Auth->authenticate = array(
'Form' => array('userModel' => 'Member'),
'Basic' => array('userModel' => 'Member')
);

↑これが
↓こうなる

$this->Auth->authenticate = array(
AuthComponent::ALL => array('userModel' => 'Member'),
'Form',
'Basic'
);

CoreのAuthおぶじぇくとは次の設定ができる！
$this->Auth->authenticate = array(
AuthComponent::ALL => array(
'userModel' => 'Member',
'fields' => array('username' => 'email'),
//フィールド名がデフォルトと違うときに設定（username / password）
'scope' => array('User.is_active' => 1),
//フラグとか立てたいときに使う
??????????????????????????????????????????????????
'contain' => array(),
//寒天！？
),
);

??????????
ベーシック認証を使う時だけ、他のオプションもつかえるよ！
realm / nonce / qop / opaque

【Creating Custom Authentication objects】
プラガブル？
ようはCoreのAuthにどんどん自分でカスタムパーツを付けていけるってことか。

App::uses('BaseAuthenticate', 'Controller/Component/Auth');
class OpenidAuthenticate extends BaseAuthenticate {
public function authenticate(CakeRequest $request, CakeResponse $response) {
// Do things for openid here.
}
}

Authオブジェクトは認証失敗したらfalseを返すべき！
ついでにユーザー情報も一緒に返すべき！

BaseAuthenticateつまり、デフォルトの状態で、いろいろできるで。

【Using custom authentication objects】
$this->Auth->authenticate = array(
'Openid', // app authenticate object.
'AuthBag.Combo', // plugin ...
);

【Identifying users and logging them in】
おふるのバージョンでは、function login()は書かなくてもよかった！（まじで？）
でも2.0以降は、手でかけよ。少しは外に出ろよニート野郎。

??????????????????????????????????????????????????
認証するとき、くっついてくるauthオブジェクトは
ひとつのオブジェクトが認証されたら、ほかのオブジェクトはチェックされない？
public function login() {
if ($this->request->is('post')) {
if ($this->Auth->login()) {
return $this->redirect($this->Auth->redirect());
} else {
$this->Session->setFlash(__('Username…'), 'default', array(), 'auth');
}
}
}

$this->Auth->login($this->request->data)
この書き方だと、ログを取るだけになるから注意な！

【Using Digest and Basic Authentication for logging in】
ここ読み飛ばしていいっすかwwww
と思ったけど、ただpost判定いらね的な話だった。

public function login() {
//post 判定(ﾟ⊿ﾟ)ｲﾗﾈ
if ($this->Auth->login()) {
return $this->redirect($this->Auth->redirect());
} else {
$this->Session->setFlash(__('Username…'), 'default', array(), 'auth');
}
}

クッキー🍪がおなかに残ってる間は、認証神回避〜
getUser() メソッドがStatelessで使えるで

【Creating stateless authentication systems】
getUser()メソッドをimplement できるよ、

??????????
$username = env('PHP_AUTH_USER');
$pass = env('PHP_AUTH_PW');

【Displaying auth related flash messages】
AuthのエラーをSessionで表示してくれる。そのために、Layoutにfetch()メソッドで
次のように追加しておく必要があるよん。

echo $this->Session->fetch(); //すでにある行
echo $this->Session->fetch('auth'); //←追い鰹

$this->Auth->flashを使って、エラーメッセージを定義することができるお。

設定例としては、
function beforeFilter() {
$this->Auth = array(
'flash' => array(
'element' => 'default',
'key' => 'auth',
'params' => array(),
),
'authError' => 'This error shows up with the user tried to …',
);
}

【Hashing passwords】
class User extends AppModel {
public function beforeSave($options = array()) {
if (isset($this->data['User']['password']) {
$this->data['User']['password'] = AuthComponent::password($this->data['User']['passworrd']);
}
return true;
}
}

へんなはなしだが$this->Auth->login()のときは、ハッシュかける必要がないんだ。
いろいろなAuthオブジェクトたちがパスワードにハッシュをかってにかけてくれる。
ダイジェスト認証をする時も必要ないよね。

【Hashing passwords for digest authentication】
RFCのダイジェスト認証ハッシュの標準があるからな。
ダイジェスト認証のときは
DigestAuthenticate::password()というのをつかう。

【Manually logging users in】
public function register() {
if ($this->User->save($this->request->data)) {
$id = $this->User->id;
$this->request->data['User'] = array_merge($this->request->data['User'], array('id' => $id));
$this->Auth->login($this->request->data['User']);
$this->redirect('/users/home');
}
}

【Accessing the logged in user】
AuthComponent::user()

// Use anywhere
AuthComponent::user('id')
// From inside a controller
$this->Auth->user('id');

【Logging users out】
ログアウトの便利な書き方
public function logout() {
$this->redirect($this->Auth->logout());
}

2012-09-14

便利なCSSメタ言語LESSを使ってみた〜大規模ウェブ

LESS

CSSのメタ言語であるLESSが便利だったので、以下でかんたんに
自分で"._border"というCSSの"border"に関する指定をまとめてできる
Mixinを定義する過程を紹介したいと思う。

@border-color: #999;

/* まずはCSSの"border"の基本的な記述をMixin化する */
._border-basic (@width: 1px, @style: solid, @color: @border-color) {
  border-width: @width;
  border-style: @style;
  border-color: @color;
}

// 各辺に対して"border-width"を指定する場合のクラス
._border-rect (@top, @right, @bottom, @left, @style: solid, @color: @border-color) {
  border-top-width: @top;
  border-right-width: @right;
  border-bottom-width: @bottom;
  border-left-width: @left;
  border-style: @style;
  border-color: @color;
}

/* "border"のパラメーターを吐くMixinを"._border"として定義する */

// "border-width"だけを指定する（または何も指定しない）場合
._border(@a: 1px)
{
  ._border-basic (@a)
}

// "border-color"だけを指定する場合
._border(@a)
  when (iscolor(@a))
{
  ._border-basic (1px, solid, @a);
}

// "border-width"と"border-color"を指定する場合
._border (@a, @b)
  when (isnumber(@a))
  and (iscolor(@b))
{
  ._border-basic (@a, solid, @b);
}

// 各辺に対して"border-width"を指定する場合
._border (@a, @b, @c, @d)
  when (isnumber(@a))
  and (isnumber(@b))
  and (isnumber(@c))
  and (isnumber(@d))
{
  ._border-rect (@a, @b, @c, @d)
}

// 各辺に対して"border-width"を指定し、かつ"border-color"を指定する場合
._border (@a, @b, @c, @d, @e)
  when (isnumber(@a))
  and (isnumber(@b))
  and (isnumber(@c))
  and (isnumber(@d))
  and (iscolor(@e))
{
  ._border-rect (@a, @b, @c, @d, solid, @e)
}

// 各辺に対して"border-width"を指定し、"border-style"と"border-color"を指定する場合
._border (@a, @b, @c, @d, @e, @f: @border-color)
  when (isnumber(@a))
  and (isnumber(@b))
  and (isnumber(@c))
  and (isnumber(@d))
  and (iskeyword(@e))
{
  ._border-rect (@a, @b, @c, @d, @e, @f)
}

すると以下のように、"._border"というクラス一つであらゆる"border"を指定できる。

div.kanako {
	._border(1px, #FF0000)
}

div.shiori {
  ._border(0, 0, 1px, 0, dotted, #FFFF00);
}

2012-08-02

jQueryの$.extendを使ってみたくなる、今さら聞けない$.extend()

jQuery

以下ではjQuery.extend() （以下$.extend()）がどういう動きをするのか、
そして、$.extend() と $.fn.extend() の違い、紛らわしさをまとめました。

jQuery.extend() の使い方

function momoclo(osaretai) {
  var members = {
    red : 'kanako',
    yellow : 'shiori',
    pink : 'ayaka'
  }

  var momoclo = $.extend({}, members, osaretai);
  return momoclo;
}

var osaretai = {
  green : 'momoka',
  purple : 'reni'
}
console.dir(momoclo(osaretai));
/*
* 出力結果
* red : 'kanako'
* yellow : 'shiori'
* pink : 'ayaka'
* green : 'momoka'
* purple : 'reni'
*/

$.extend() と $.fn.extend() の使い方の違い

.extend() に渡すオブジェクトが1つのとき

一般的には、関数の定義の場合は jQueryオブジェクトを
メソッドの定義は、 jQuery.fnオブジェクトを拡張することになる。
ちなみに jQuery.fn とは jQuery.prototype にあたるものです。

$.extend({
  momocloZ : function(){}
});
// jQuery.momocloZ(); でコールする

$.fn.extend({
  momoclo : function(){}
});
// jQuery('p').momoclo();

jQuery プラグインの作りかたを含めた、jQueryのオブジェクトに関する解説は、
後日執筆予定です。