Component

Posted by muchag | CakePHP |
初回投稿:2011-06-19 (日) 17:42:14 | 最終更新:2011-06-29 (水) 19:46:04

同一コントロールであれば、
同コントロール内で繰り返し利用できる独自関数を作成できるけど
別コントロールになるとういうわけにもいかないので
そういうときのために Component が存在する。

The CakePHP 1.3 Book:3.6 コンポーネント

【環境】
[CakePHP] 1.3.10
役割

コントローラ(処理)のパーツとして存在し
コントローラに取り込むことでいつでも利用できる。

よって、コントローラ も参照。

まぁ、普通のクラスと思えばいいのかしら?
 

ファイル名

自由。
全て小文字で単語間は _ (アンダースコア)。
拡張子は、.php
例)book_list.php

クラス名

ファイル名を頭文字大文字で引っ付ける。
例) book_list.php → BookListComponent
 

格納場所
app\controllers\components

 

呼出
コントローラへ登録

コントローラの中のフィールドにて

  1. var $components = array('BookList');

components プロパティを設定。

このとき、app_controller.php 等の親クラスで設定した components プロパティを
上書きしないように注意
 

呼び出し

当該コンポーネントを呼び出したい場所で
一般クラス同様

  1. // プロパティ
  2. $this->(コンポーネント名)->(プロパティ名);
  3.  
  4. // メソッド
  5. $this->(コンポーネント名)->(メソッド名)();

のようにして呼び出す。
 

スケルトン
  1. <?php
  2. // app/controllers/book_list.php
  3. class BookListComponent extends Object
  4. {
  5.     var $name = 'BookList';
  6.  
  7.     // beforeFilter の前に自動的に実行される
  8.     function initialize(&$controller)
  9.     {
  10.     }
  11.  
  12.     // beforeFilter の後に自動的に実行される
  13.     function startup(&$controller)
  14.     {
  15.     }
  16.  
  17.     function show($category, $id)
  18.     {
  19.         /* 処理 */
  20.     }
  21. }&#91;/php]
  22.  
  23. <div class="flow2">継承</div>
  24. コントローラは、<span class="emphasis_r">必ず</span> Object クラスまたはそのサブクラスを継承すること。
  25.  
  26. <div class="flow3">Object クラスを継承する場合</div>
  27. [php]class BookListComponents extends Object

 

Object クラスのサブクラスを継承する場合

この手法を用いると、複数コンポーネントで設定を共有できる

ただし、その場合は、同名のプロパティやメソッドを上書きしてしまうので

cake ディレクトリ\libs\controller\controller.php

を参考に、マージさせる手法を考えなくてはならない場合も出てくる。

参考元サイト:tomstay’s memo CakePHPで独自の共通コントローラを継承させて使用する
 

app\controllers\components\sample.php

を配置した上で

  1. App::import('Component', 'Sample');
  2. class BookListComponent extends SampleComponent

もちろん SampleComponent は Object クラスを継承すること。
 

参照

コンポーネント内でコントローラやモデルを参照する場合は
インスタンス化が必要。
 

コントローラ

initialize メソッド、または startup メソッド内にて実行。

  1. private $controller;
  2.  
  3. // beforeFilter の前に自動的に実行される
  4. public function initialize(&$controller)
  5. {
  6.     $this->controller =& $controller;
  7. }

とマニュアルに書いてあるので書いてみたけど
これが「インスタンス化」かどうかよくわかっていない。
 

利用

今までコントローラで利用してきたコントローラプロパティやメソッドは
コントローラインスタンスを経由して利用する。

  1. // コントローラ名
  2. $this->controller->name;
  3.  
  4. // ビューへ変数を受け渡す
  5. $this->controller->set('hoge', $hoge);
  6.  
  7. // ビューを指定する
  8. $this->controller->render('hoge');

 

モデル

モデルの場合は任意の場所でインスタンス化。

ただし、マニュアルと参考元サイトで大分違うので両方記述。
ちなみに試した結果、どちらも有効であった。

マニュアル
  1. public function hoge()
  2. {
  3.     $userInstance = ClassRegistry::init('User');
  4.     $totalUsers = $userInstance->find('count');
  5. }
参考元サイト
  1. private $M;
  2.  
  3. public function hoge()
  4. {
  5.     $model = $this->controller->modelClass;
  6.     $this->M =& $controller->{$model};
  7. }

 

非推奨

コンポーネント内でモデルを利用することは非推奨なんだそうな。

コンポーネント内でモデルにアクセスする、または使用することは、一般的に推奨されていません。しかしながら、そうすることに重要性がある場合、手動でモデルクラスをインスタンス化して使用する必要があります。次がサンプルになります

The CakePHP 1.3 Book:3.6.3 独自のコンポーネントを作成する
3.6.3.2 コンポーネント内でMVC クラスにアクセスする

ん~、これがどういう意味というか根拠なのかがわからないけど
これだとコンポーネントの利便性が半減するような気がする。

他のサイトでもコンポーネント内でモデルを利用しているので
今回は目を瞑って利用してしまおう・・・。
 

親子

継承関係にない2つのコンポーネント間で親子関係を結ぶことができる。

親としたいコンポーネントのフィールドで
子としたいコンポーネントを components プロパティに登録する。

この際継承関係にあるコントローラやコンポーネントと異なり
$components プロパティは上書きされないようだ。

確認した部分を具体的に挙げると
以下のようにコンポーネント内で $components プロパティを設定しても
コントローラの AuthComponent は無事に稼動していたようなので
コントローラの $components プロパティには影響が無さそうだ。
 

  1. class ParentComponent extends Object
  2. {
  3.     private $name = 'Parent';
  4.     public $components = array(’Child’);
  5.  
  6.     public function initialize(&$controller)
  7.     {
  8.         $this->Child->foo();
  9.     }
  10.  
  11.     public function bar()
  12.     {
  13.         // ...
  14.     }
  15. }

 

  1. class ChildComponent extends Object
  2. {
  3.     private $name = 'Child';
  4.  
  5.     public function initialize(&$controller)
  6.     {
  7.         $this->Parent->bar();
  8.     }
  9.  
  10.     public function foo()
  11.     {
  12.         // ...
  13.     }
  14. }
Posted by muchag | CakePHP |
初回投稿:2011-06-19 (日) 17:42:14 | 最終更新:2011-06-29 (水) 19:46:04

逆引き CakePHP 1.3.x

Posted by muchag | CakePHP |
初回投稿:2011-06-19 (日) 17:02:28 | 最終更新:2011-07-22 (金) 9:38:56

【環境】
[CakePHP]
1.3.8
1.3.10

 

その他
  1. 別のコントローラのビューを利用する
  2. Index
    1. CakePHP 1.3.x Index

 

参考

公式The CakePHP 1.3 Book(The Manual)
公式(日本語)The CakePHP 1.3 Book(マニュアル)
日本語サイトは翻訳が間に合っていないらしく怪しいので、
本家英語サイトのチェックを忘れないこと。
(英語の方も記載が間に合っていないみたいだけど・・・)

CakePHP Users in Japan

Posted by muchag | CakePHP |
初回投稿:2011-06-19 (日) 17:02:28 | 最終更新:2011-07-22 (金) 9:38:56

多言語対応(国際化)

Posted by muchag | CakePHP |
初回投稿:2011-06-12 (日) 19:40:06 | 最終更新:2011-06-23 (木) 15:21:39

CakePHP では、地域化国際化 という機能があり
それぞれ、i10n , i18n と定義されているようだ。
The CakePHP 1.3 Book:4.8 地域化と国際化

上記マニュアルを読んでわかったのだが、i18n は
「internationalization(国際化)」という単語は i と n の間に 18文字あるからなんだって。
なんちゅうネーミング・・・。
(個人的には人間臭くて賛成するけどw)

【環境】
[CakePHP] 1.3.10
概要

ルールは WordPress と同じなので、分かり易かった。

要は、

  1. 表示したい文字列は、専用の関数の引数として配置
  2. .po ファイルを定義して、そこで翻訳

 

文字列の配置
書式

MVC どこでもよいので、表示したい文字列がある場合は

  1. // そのまま出力する場合
  2. __('文字列')
  3.  
  4. // 戻り値となる場合
  5. __('文字列', true)

のように記述する。

但し、CakePHP 2.x では、下の書式はなくなるようだ。
参考元サイト:24時間CakePHP CakePHP2.0の概要(訳)
 

文字列

どうせ翻訳するわけだから、指定する文字列は何語でもよいといえばそうなんだが
やはり英語がよいと思う。

何となくそう思い込んでいたけど
トーハム紀行:CakePHPで多言語対応をする 2/3
こちらの記事を読んで、漠然としていたイメージが確立した。

というわけで、コード内文字列は英語に決まり!
 

翻訳
抽出

翻訳対象文字列をアプリケーションの中から抽出する。

この作業はコマンドラインで行うのだが
ここで思いっきりはまってしまった。 🙄
が、長くなるので後回し。
CakePHP は環境変数設定必須?
Linux, Windows の自動振り替えは?
 

i18n オプション
cake\console

まで移動するとか、パスを設定するとか、適宜自分の環境に合わせて行動。

  1. > cake i18n

 

POT
  1. Welcome to CakePHP v1.3.10 Console
  2. ---------------------------------------------------------------
  3. App : console
  4. Path: J:\Eclipse_PDT\cakeprojects\myapp\cake\console
  5. ---------------------------------------------------------------
  6. I18n Shell
  7. ---------------------------------------------------------------
  8. [E]xtract POT file from sources
  9. [I]nitialize i18n database table
  10. [H]elp
  11. [Q]uit
  12. What would you like to do? (E/I/H/Q)
  13. > e

 

抽出元

基本的には app フォルダを指定。

  1. What is the full path you would like to extract?
  2. Example: J:\Eclipse_PDT\cakeprojects\(アプリ名)\cake\myapp
  3. [Q]uit [D]one
  4. [J:\Eclipse_PDT\cakeprojects\(アプリ名)\cake\console] > J:\Eclipse_PDT\cakeprojects\(アプリ名)\app

 

実行
  1. What is the full path you would like to extract?
  2. Example: J:\Eclipse_PDT\cakeprojects\(アプリ名)\cake\myapp
  3. [Q]uit [D]one
  4. [D] > d

 

出力先

Example のままでよければそのままリターン。
他にしたければ、絶対パスを入力。

  1. What is the full path you would like to output?
  2. Example: J:\Eclipse_PDT\cakeprojects\(アプリ名)\app\locale
  3. [Q]uit
  4. [J:\Eclipse_PDT\cakeprojects\(アプリ名)\app\locale] >

 

上書き確認

上で設定した出力先に、既に .pot ファイルが存在する場合には上書き確認が出る。

  1. Would you like to merge all domains strings into the default.pot file? (y/n)
  2. [n] >

 

実行

これでダラダラダラ~っとログが流れて
出力完了。

J:\Eclipse_PDT\cakeprojects\(アプリ名)\app\locale\default.pot

 
上書き確認を n にしていると

  1. Error: default.pot already exists in this location. Overwrite? [Y]es, [N]o, [A]ll (y/n/a)
  2. [y] >

えw また聞くのね・・・。

  • [y] そのまま上書きするのでしょう・・・
  • [n] 作業をやめるのかしら・・・
  • [a] 選択してみたけど、普通に上書きされた感じ・・・不明

 

配置

デフォルトでは

app\locale\eng\LC_MESSAGES

しかないので

app\locale\jpn\LC_MESSAGES

を作成し、先ほどの

default.pot

を移動して、拡張子を .po に変更して配置。

app\locale\jpn\LC_MESSAGES\default.po

 

翻訳

テキストエディタなり Poedit なりで .po ファイルを編集。
Poedit 参照。
 
でけた~!!
 

翻訳文言の追加

Poedit を参考にして追加するわけだけど
ちょっと問題が・・・。

カタログの更新に失敗しました。

詳細を見ると

default.pot’ は有効な POT ファイルではありません。
カタログ中の項目に不正(未対応?)なものがあるようです。

色々と試してみた結果、どうやら app フォルダ内に日本語を含んだファイル名があるのが問題だったみたい。
バックアップしていたファイルが「コピー ~ hoge.php」で、
これを削除して POT ファイルを作り直したらエラーが出なくなった。
 

CakePHP は環境変数設定必須?

あちこちの解説を読むと、いとも簡単に

cake\console

へ移動して

  1. >cake i18n

とすればよい、と書いてあるのだが上手くいかない。
 

原因?

というのも、私はパスを通していない。
PHP のヴァージョン混在開発環境のため
どの PHP かわからなくなってしまうから、毎回フルパスで指定している。

つまり、私の場合は

cake\console

まで移動してから

  1. >I:\xampp\php\php cake i18n

としている。
 

対処

いくら調べてもこの情報がなくて
結局一時的にパスを通す手法を採ることにした。

情報を探すうちに素敵なサイトを発見♪
Rewish:WindowsでCakePHPコンソール(bake)を使い易くする方法

こちらのサイトでバッチファイルを配布してくださっていたので
頂戴して試してみた。
 

console.bat

このファイルは

(アプリ名)\cake\console

という環境の

(アプリ名)

に配置するように作られているようだが
別の場所に配置しても、動作してくれる。

別の場所へ配置した場合は、バッチファイル実行後

(アプリ名)\cake\console

までのパスを聞かれる。
 

PHP へのパスを通す

また、PHP までのパスを通す場合は、19行目に記述。

  1. set "PATH=%PATH%;%CAKECONSOLE%"
  2. set "PATH=%PATH%;%CAKECONSOLE%;I:\xampp\php"

 

Linux, Windows の自動振り替えは?
cake\console

には

cake
cake.bat

という2つのファイルが用意されている。

どこかのサイトでも見かけたが
Linux 用と Windows 用が用意されいると思っていた。

しかし、前述の「パスが通っていない状態でフルパスでコマンド実行」を試している最中

  1. >I:\xampp\php\php cake

とすると cake ファイルが実行され

  1. >I:\xampp\php\php cake.bat

とすると cake.bat が実行された。

ん~・・・自動振り分けできていない?

でも、いただいてきた console.bat を利用したら

  1. >cake i18n

でちゃんと動いたから
やっぱり環境変数の問題なのかな・・・。

Posted by muchag | CakePHP |
初回投稿:2011-06-12 (日) 19:40:06 | 最終更新:2011-06-23 (木) 15:21:39

CSS のみでドロップダウンナビ

Posted by muchag | CSS |
初回投稿:2011-06-12 (日) 16:00:39 | 最終更新:2011-06-12 (日) 16:00:39

<参考元サイト>
バシャログ。:CSSで実現するプルダウンメニュー

Posted by muchag | CSS |
初回投稿:2011-06-12 (日) 16:00:39 | 最終更新:2011-06-12 (日) 16:00:39

データのバリデーション

Posted by muchag | CakePHP |
初回投稿:2011-06-10 (金) 18:59:58 | 最終更新:2011-07-05 (火) 16:39:25


The CakePHP 1.3 Book:4.1 データのバリデーション(Data Validation)

【環境】
[CakePHP] 1.3.8
バリデーションを行う場所

CakePHP では、データのバリデーションを行うのは
モデルが基本。

でも、コントローラでやってもよい。
 

モデルで行う場合

モデルのフィールド(プロパティ)にて $validate 配列を設定。
 

書式
基本
  1. public $validate = array('fieldName' => 'ruleName');

バリデーションを行うフィールドの名称をキーとし
バリデーション内容を値とする。
 

1フィールド1ルール
  1. public $validate = array(
  2.     'fieldName1' => array(
  3.         'rule' => 'ruleName', // または: array('ruleName', 'param1', 'param2' ...)
  4.     )
  5. );

ruleName は任意。
後述の定義済みルールを利用する場合は、その名称。
 

1フィールド多ルール
  1. public $validate = array(
  2.     'fieldName' => array(
  3.         'ruleName' => array(
  4.             'rule' => 'ruleName',
  5.             // like on, required, 等、他のキーをここに書く...
  6.         ),
  7.         'ruleName2' => array(
  8.             'rule' => 'ruleName2',
  9.             // like on, required, 等、他のキーをここに書く...
  10.         )
  11.     )
  12. );

ruleName は任意。
後述の定義済みルールを利用する場合は、その名称。
 

キー

The CakePHP 1.3 Book:4.1.4 組み込みのバリデーションルール(Validation Rules)
 

rule

ルール内容を記述する場所。

ボリュームが多いので別ページに。
rule 編
 

message

バリデーションエラーを起こしたときに表示する文言。

モデルの $validate プロパティでは国際化は行えない。
 

on

新規時か更新時か、バリデーションを行うタイミングを設定できる。

  1. public $validate = array(
  2.     'fieldName1' => array(
  3.         'rule' => 'ruleName',
  4.         'on' => 'create', // または 'update'
  5.     )
  6. );

 

allowEmpty

分かりやすいサイトを発見。
Ivystar:バリデーションのallowEmptyとrequiredを解説してみる

デフォルト値は null
 

required

分かりやすいサイトを発見。
Ivystar:バリデーションのallowEmptyとrequiredを解説してみる
 

last

デフォルトでは、CakePHP は宣言された全てのバリデーションルールを使用して、フィールドをバリデートしようとし、最後に失敗したルールのエラーメッセージを返します。
しかし、キー「last」の値が「true」といるものが失敗した場合、このルールのエラーメッセージが返され、後ろのルールはバリデートされません。
ですので、最初に失敗したルールのエラーメッセージを表示したい場合は、それぞれのルールに ‘last’ => true をセットしてください。

The CakePHP 1.3 Book:4.1.3 1個のフィールドに複数のルールを定義する

 
ちょっとピンときてなかったけど、試してみてわかった。

バリデーションルールはフィールド毎に設定する。
 ↓
コントローラ(あるいはビュー)に戻せる
エラーメッセージは各フィールド毎に1つ。
 ↓
1つのフィールドに対して複数のエラーが見つかっても
最後に見つかったエラーメッセージが戻ってくる。
 ↓
それよりも先に表示させたいエラーメッセージがある場合は
そのバリデーション項目に ‘last’ => true, を設定する。

という使い方のようだ。
 

コントローラで行う場合

The CakePHP 1.3 Book:4.1.6 コントローラ(Controller)からデータのバリデーションを実行する

  1. $this->ModelName->set( $this->data );
  2. // $this->ModelName->set( $this->data['ModelName'] ); // この書式でも動作する
  3.  
  4. if ( $this->ModelName->validates() ) {
  5.     // バリデーションが成功した場合のロジックをここに書く
  6. } else {
  7.     // バリデーションが失敗した場合のロジックをここに書く
  8. }

 

エラーメッセージを取得
  1. $errors = $this->ModelName->validationErrors;
  2.  
  3. または
  4.  
  5. $errors = $this->ModelName->invalidFields(); // validationErrors 配列を含むデータを取得した

どちらにしても同じ配列であり

  1. $errors['FieldName'] = エラーメッセージ;

という書式になっている。

が、わざわざ $errors 配列を定義して値を受け取らなくても
ビューにて

  1. echo $formEx->error('username');

のように設定しフィールド名を間違えなければちゃんと出力される。
 

Message.auth
  1. if ( $session->check('Message.auth') ) $session->flash('auth');

どこかのサイトに載っていたのだけれども
これもエラーメッセージを取得する手法のはず。

でも、どうやってよいのか分からず仕舞い。
 
<参考元サイト>
CakePHPまとめ:Validation(バリデ-ション)
 

エラーメッセージの国際化
  1. public $validate = array(
  2.     'fieldName1' => array(
  3.         'rule' => 'ruleName',
  4.         'message' => __('Error Message.', true),
  5.     )
  6. );

と素直に書いても

syntax error, unexpected ‘(‘, expecting ‘)’

となってしまう。
 

ビューで設定する手法

モデルとビューで役割分担をする。
 

モデル

モデルにはルールだけを記述。

  1. public $validate = array(
  2.     'fieldName' => array(
  3.         'ruleName' => array(
  4.             'rule' => 'ruleName',
  5.         ),
  6.         'ruleName2' => array(
  7.             'rule' => 'ruleName2',
  8.         )
  9.     )
  10. );

 

ビュー

ビューにはエラーメッセージだけを記述。

  1. echo $form->input(
  2.     'fieldName1',
  3.     array(
  4.         'type' => 'text',
  5.         'error' => array(
  6.             'ruleName' => __('Error Message', true),
  7.             'ruleName2' => __('Error Message2', true),
  8.         )
  9.     )
  10. );

 
The CakePHP 1.3 Book:4.1.3 1個のフィールドに複数のルールを定義する
 

モデルで設定する手法
  1. public $validate = array(
  2.     'fieldName' => array(
  3.         'ruleName' => array(
  4.             'rule' => 'ruleName',
  5.         ),
  6.         'ruleName2' => array(
  7.             'rule' => 'ruleName2',
  8.         )
  9.     )
  10. );
  11.  
  12. public function __construct()
  13. {
  14.     parent::__construct();
  15.  
  16.     // バリデーションエラーメッセージを設定
  17.     $this->validate['fieldName1']['ruleName']['message'] = _('Error Message');
  18.     $this->validate['fieldName1']['ruleName2']['message'] = _('Error Message2');
  19. }

 

__() の第2引数

ここで

  1. $this->validate['fieldName1']['ruleName']['message'] = _('Error Message', true);

とすると

_() expects exactly 1 parameter, 2 given

となる。

これは今一理解できていない。
 
参考元サイト:CakePHP Users in Japan 1.2でのバリデーションとその多言語化の方法
 

ビヘイビアを導入する手法

参考元サイト:趣味の延長線 バリデーションエラーメッセージ多言語化
 

バリデーションルールを使い分ける

場合によってバリデーションルールを使い分けたい場合
モデルに必要な種類だけ $validate プロパティを設定しておく。

  1. public $validate = array('fieldName' => 'ruleName');
  2. public $validate1 = array('fieldName' => 'ruleName');
  3. public $validate2 = array('fieldName' => 'ruleName');

バリデーションルールを変更したいタイミングで
コントローラにて設定。

  1. $this->Model->validate = $this->Model->validate1;
  2.  
  3. $this->Model->validates();

 
参考元サイト:なんとなく始めてみた、プログラマー雑記 CakePHPのバリデーションを状況によって使い分ける方法

Posted by muchag | CakePHP |
初回投稿:2011-06-10 (金) 18:59:58 | 最終更新:2011-07-05 (火) 16:39:25

HTML5 & CSS3 Index

Posted by muchag | HTML5 |
初回投稿:2011-06-09 (木) 11:09:13 | 最終更新:2016-02-27 (土) 12:44:25

今更ではあるが、やっと HTML5 & CSS3 に着手した。

多くのブラウザが(あの IE までも!)が対応し
スマートフォン系ではデフォルトとのこと。

色々と小難しいけど、頑張らねば!

丸っきりの書きかけ項目は Not found になる。

HTML5
  1. 独自属性
未分類
  1. 参考サイト

 

ライブラリ
  1. Modernizr

 

参考

その他各参考サイトについては、各エントリーにて。

Posted by muchag | HTML5 |
初回投稿:2011-06-09 (木) 11:09:13 | 最終更新:2016-02-27 (土) 12:44:25

Element

Posted by muchag | CakePHP |
初回投稿:2011-06-09 (木) 10:03:47 | 最終更新:2011-06-19 (日) 17:41:36

複数ページで同一内容を表示したいときに
ビューのパーツとして Element が存在する。

The CakePHP 1.3 Book:3.10.3 エレメント

【環境】
[CakePHP] 1.3.10
役割

ビュー(出力内容)のパーツとして存在し
ビューに取り込むことでいつでも利用できる。

よって、ビュー も参照。
 

ファイル名

自由。
拡張子は、.ctp 。(以前は .thtml であった)
 

格納場所
app\views\elements

 

呼出
app\views\layouts\default.ctp

等のレイアウトファイルの中の
当該エレメントを呼び出したい場所で

  1. echo $this->element('sidebar');

としてやるだけ。
 

変数を受け渡す

変数を受け渡したい場合は、通常手続き通り
コントローラで変数を定義し
レイアウトファイルでエレメントを呼び出す際に
以下のように配列にして第2引数に設定する。

  1. echo $this->element('sidebar', array('hoge' => $hoge) );
Posted by muchag | CakePHP |
初回投稿:2011-06-09 (木) 10:03:47 | 最終更新:2011-06-19 (日) 17:41:36

Modernizr

Posted by muchag | CSS3,HTML5,JavaScript |
初回投稿:2011-06-08 (水) 16:24:08 | 最終更新:2011-06-09 (木) 10:21:49

HTML5 と CSS3 を使うのはいいんだけど
新しいものの宿命として、ブラウザの対応状況
特に IE の問題は避けて通れない。

今までも散々苦労してきたけど
今回は素敵なライブラリを発見した。
Modernizr

【環境】
[HTML5 テンプレート] HTML5 Boilerplate
[CSS3 テンプレート] html5-boilerplate / css / style.css

このようなテンプレートをありがたく利用させていただいているので
後述の手法以外にテンプレートに助けられている部分があるかも。

概要
  • 各ブラウザの HTML5 & CSS3 対応状況を調べる
  • HTML5 に対応していない IE 8 以下に HTML5 をレンダリングする

っていう機能を持つみたい。

詳細はこちら。
Modernizr:Documentation(英語)
 

DL

Modernizr Download
2011-06-08現在の最新は version 2.0 beta のようだ。

1.x 系はオールインワンだったのに対して

2.x 系は必要な機能を選択して
オリジナルファイルを作成できるようになっている。

 

導入
modernizr.js

DL してきた上記ファイルを然るべき場所へ配置。

当該 HTML ファイルへ以下を記述。

  1. <script src="js/modernizr.js"></script>

HTML5 Boilerplate には元々記述してある。

※ CakePHP で利用する場合には js/modernizr.js の前に / (スラッシュ)が必要。
CSS が適用されない
 

HTML5 タグ

また、CSS ファイルに以下を加える。

  1. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  2.   display: block;
  3. }

github:html5-boilerplate / css / style.css #L35-37

これで、無事に header タグが機能した。

私は、html5-boilerplate / css / style.css をそのまま利用させていただいているため
元々この記述が外部 CSS ファイル内に存在したが
この記述以外の部分を削ってみても、ちゃんと機能した。
 

CSS3 要素

背景画像について。

  1. body {
  2.     background-size: 100% auto;
  3. }

と指定したら、IE 7 では当然の如く意味無し。

そこで

  1. <body class="backgroundsize">

とした上で

  1. body {
  2.     background-color: #9999ff;
  3. }
  4. .backgroundsize body {
  5.     background-image: url('img/bg.png');
  6.     background-size: 100% auto;
  7. }

このようにしたら、見事 IE 7 と Firefox 4.x で仕分けしてくれた。
 

意味不明

が・・・。

  1. .backgroundsize body {

これって、class=”backgroundsize” の中にある body タグっていう意味でしょ?

それなのに

  1. <body class="backgroundsize">

これに反応するのは・・・ん~よく分からない・・・。

Posted by muchag | CSS3,HTML5,JavaScript |
初回投稿:2011-06-08 (水) 16:24:08 | 最終更新:2011-06-09 (木) 10:21:49

参考サイト

Posted by muchag | Internet Explorer |
初回投稿:2011-06-08 (水) 10:16:47 | 最終更新:2011-06-08 (水) 10:16:47

IE デベロッパー センター

Posted by muchag | Internet Explorer |
初回投稿:2011-06-08 (水) 10:16:47 | 最終更新:2011-06-08 (水) 10:16:47

画像を型抜きして保存

Posted by muchag | Illustrator,Photoshop |
初回投稿:2011-06-08 (水) 0:21:31 | 最終更新:2011-06-08 (水) 0:24:15

画像からオブジェクトを模って切り抜き
その画像を Illustrator に配置したい。

単に .png で背景を透過にして保存しても
Illustrator 上では背景が白くなり四角い画像になってしまう。

【環境】
[Photoshop] CS5
[Illustrator] CS5
Photoshop
模り

元の画像が白背景に濃い目の色のオブジェクトだったので
「自動選択ツール」で「許容値」を高目に設定し、白背景部分を選択。

[選択範囲]-[選択範囲を反転] で、目的のオブジェクトを選択。
 

画像クリッピングパス

目的のオブジェクトが選択されている状態で
パスウィンドウの「作業用パスを作成ボタン」(左図のマーク)をクリックすると
作業用パスが作成される。

 
このとき、
上図の「作業用パスを作成ボタン」を Alt (Mac は Option)を押しながらクリックするか
左図のようなパスウィンドウのオプションメニューから「作業用パスを作成」を選択すると

 
許容値を入力することができる。

許容値は、0.5~10 の間で入力するが
数値が大きいほど大雑把(滑らかな線)で囲う。

 
成功すると左図のようになる。

 
ここで再びオプションメニューより
「パスを保存」を選択し

 
適当な名前を付けて保存する。

 
再度オプションメニューより
「クリッピングパス」を選択し

 
平滑度を 0.2~100 % の間で設定、または空白。
詳細は参考元サイト参照。

 

保存

もし印刷用なら、ここで CMYK に変換しておく。
 

保存

[ファイル]-[別名で保存] より
「ファイル形式」で「Photoshop EPS」を選択。

ファイル名を適当に入力して

 
保存オプションは・・・。
よくわからない。
カラーだから一応 8bit にしてみた。

 

Illustrator

[ファイル]-[配置] より件の画像を選択すればOK。

ちなみに EPS ファイルなので、配置した画像は × になっている。
 
参考元サイト:Photoshop ユーザーガイド
画像クリッピングパスを使用した透明部分の作成
選択範囲からパスへの変換

Posted by muchag | Illustrator,Photoshop |
初回投稿:2011-06-08 (水) 0:21:31 | 最終更新:2011-06-08 (水) 0:24:15
« 前ページへ次ページへ »