彩音WEB研究室

日記：彩音UNIX研究室

2008-06-25T00:40:00+09:00

章：cron

2008-06-17T08:58:00+09:00

crontab の記述例

記述順…分時日月曜日

35 15 * * * 15時35分に実行 45 10 * * * 10時45分に実行 0 21 * * * 21時に実行 0 21 * * 2 毎週火曜の21時に実行 0,10 21 * * 0,3,4 毎週日曜、水曜、木曜の21時と21時10分に実行 0-20 21 5 * * 毎月5日の21時から21時20分まで1分毎に実行 0 0 10,20 * 2 毎月10日と20日の火曜の0時に実行 55 7 10 * * 毎月10日の7時55分に実行 0 13 * * 2-5 火曜から金曜まで13時に実行 0,5,10,15,20,25,30,35,40,45,50,55 * * * * 5分おきに実行 */5 * * * * 5分おきに実行 * 3 * * * 3時から3時59分まで1分おきに実行 0 5 * * * 5時に実行 0 */2 * * * 0時から2時間おきに実行 0 * * * * 毎時0分に実行 5 8-20/3 * * * 8時、11時、14時、17時、20時の各5分に実行 45 8 10,20 * * 10日と20日の8時45分に実行

節：アクセス修飾子

2008-06-06T08:07:00+09:00

アクセス修飾子とはメンバ変数やメソッドにどこからアクセス出来るかを指定するものである。

public クラス内、クラス外のどこからでもアクセス可能 private 同じクラス内からのみアクセス可能 protected 同じクラス、及び子クラスからアクセス可能

節：IE5.x…インライン要素に指定したパディングとボーダーは無視される

2008-05-24T11:07:00+09:00

IE 5.xでは、インライン要素のパディングとボーダーが無視されてしまうバグがある。ブロックレベル要素にして回り込みを利用する方法に変更するか、根本的な構造の見直しを変更しなければ回避出来ない場合が多い。

節：特定のページだけにスタイルを指定する

2008-05-24T10:55:00+09:00

特定のページだけにスタイルを指定するコツ。
body要素に、id属性やclass属性を指定し、そのidやclassの子孫セレクタとして指定することで特定のページだけを対象としたスタイルを簡単に指定することができる。

章：便利ツール

2008-05-23T05:51:00+09:00

WEB制作業務で知っていると便利なツールのリンク集 XHTML準拠チェッカー The W3C Markup Validation Service
Another HTML-lint gateway CSS準拠チェッカー W3C CSS 検証サービス RSS準拠チェッカー FEED Validator SEO開発チェッカー SEO TOOLS β 回線速度チェッカー USEN回線速度測定 Fabicon生成 Favicon Japan .htaccess作成 .htaccess Editor CSSサンプルツール Typetester

節：link要素のrel属性での指定内容

2008-05-13T00:40:00+09:00

rel属性で指定する内容をリンクタイプ（link types）という。仕様上は下図のものが定義されているが、別のリンクタイプを利用したい場合、定義ファイルをhead要素のprofile属性で参照することで利用出来る。

alternate 代替ページ stylesheet 外部スタイルシート start 開始ページ next 次のページ prev 前のページ contents 目次 index 索引 glossary 用語集 copyright 著作減情報 chapter 章 section 節 subsection 項 appendix 付録 help ヘルプ bookmark ブックマーク

節：meta要素のname属性での指定内容

2008-05-13T00:34:00+09:00

これらは一般的によく使われる内容であり、仕様上で決められているわけではない。任意の内容を指定したい場合、定義ファイルをhead要素のprofile属性で参照することで指定する。

description 概要文 keywords キーワード copyright 著作権情報 author 制作者 reply-to 連絡先（メールアドレス） date 日付日付（更新日） robots 検索クローラーの指示

節：MacOSXでのバックスラッシュの入力法

2008-05-11T00:50:00+09:00

MacOSXでは option + ￥でバックスラッシュが入力できる。

章：その他

2008-05-10T23:49:00+09:00

その他の知識

節：URL内の『&』の表記に注意

2008-05-10T03:19:00+09:00

HTMLでも普通&は&と記述することになっているが、ブラウザは&でも特に支障がなかったためにあまり注意を払わない傾向があった。XHTMLではこれが徹底して求められる。特に見逃しがちなのが、サーバーのアプリケーションにGETとして変数を渡す時のURL内の『&』。これはスクリプトで生成したソースにまぎれていることが多いので、注意すること。

節：ファイル内の位置を示すにはid属性

2008-05-10T03:04:00+09:00

従来のHTMLではページの特定の位置へのリンクのために、name属性を利用して以下のような記述をしていた。

[[[
<a name="top">ヘッダー</a>
………
<a href="#top">ページ上部へ戻る</a>
]]]
XHTMLではname属性は廃止される方針で、ページの位置を示す属性にはid属性を利用するようになった。つまり、<a id="top"></a>となるわけだが、このid属性をサポートしないブラウザのために以下のようにname属性とid属性を併記することが推奨されている。
[[[
<a id="top" name="top>ヘッダー</a>
………
<a href="#top">ページ上部へ戻る</a>
]]]

日記：JavaScriptライブラリリンク

2008-05-06T03:29:00+09:00

JavaScriptにライブラリリンクを追加。

JavaScriptライブラリリンク

節：ライブラリ

2008-05-06T03:28:00+09:00

JavaScriptライブラリリンク Lightbox 2.0 Ajaxを利用して拡大画像を表示するライブラリ。単独だけでなく、グループ表示も可能。手軽に適応出来る。 mooSlideBox 3 Ajaxを利用して拡大画像を表示するライブラリ。タイトル、コメントの他、指定のdivブロックを表示することができる。実装は多少癖がある。参考文献 Adobe Flex 2プロフェッショナルガイド

節：.htaccess作成ツール

2008-05-01T00:07:00+09:00

.htaccessの仕様の知識無しに生成できるツール

.htaccess Editor

節：SEO対策チェッカー

2008-05-01T00:05:00+09:00

SEO対策のレベルをチェックするツール

SEO TOOLS β

節：RSS 準拠チェッカー

2008-04-30T23:59:00+09:00

RSS準拠チェックのために利用するツール

FEED Validator

節：W3C CSS 準拠チェッカー

2008-04-30T23:58:00+09:00

W3CのCSS準拠チェックのために利用するツール

W3C CSS 検証サービス

節：W3C XHTML 準拠チェッカー

2008-04-30T23:58:00+09:00

XHTML準拠チェックのために利用するツール

The W3C Markup Validation Service Another HTML-lint gateway

日記：見出しテキストを背景の中央にそろえる

2008-04-30T23:03:00+09:00

見出しテキストなどを背景画像を使って装飾したい場合、上下の中央にテキストを配置するためにpaddingプロパティーで微調整を繰り返した経験がある人は結構いるだろう。そういう場合の小技。

見出しテキストを背景の中央にそろえる

節：見出しテキストを背景の中央にそろえる

2008-04-30T23:00:00+09:00

　見出しのテキストなどに背景画像を使って装飾するとき、上下の中央に高さをそろえたいことがよくある。すぐに思いつくのがpaddingプロパティーで高さを調整する方法だろう。だが、それよりも簡単で確実な方法が実はある。
　テキストが１行に収まるということが絶対条件だが、line-heightプロパティーに背景画像の高さをそのまま指定することで、paddingプロパティーより簡単かつ綺麗に実現出来る。line-heightプロパティーはどうやら、１行の高さのちょうど中央に文字を配置する仕様のようで、そのため上下の空きは綺麗に均等になる。

参考文献 Web標準XHTML+CSSデザインクリエイターが身につけておくべき新・100の法則。

日記：メニューを固定幅にしたリキッドデザイン

2008-04-30T01:57:00+09:00

これは、以前仕事で少々複雑な条件下でこのレイアウトを実現しようとしてかなり苦労した表現方法である。答えを知っていれば５分で解決つくものなのだが。知っていると知らないとではかかるコストは大違いである。

メニューを固定幅にしたリキッドデザイン

章：CSS

2008-04-30T01:42:00+09:00

CSS

節：メニューを固定幅にしたリキッドデザイン

2008-04-30T01:23:00+09:00

リキッドデザインでサイトレイアウトを構成したいが、メニュー部分は固定幅にしたいというケースは結構あるだろう。細かい例を挙げるのはここでは割愛するが、構造上や他のデザインとの兼ね合いでCSSの記述に苦労するケースがある。そういうときの組み方の一例を記述しておく。

[[[
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>メニュー固定幅のリキッドデザインCSS</title>

#header {
height: 80px;
background-color: #ff0000;
}

#main {
float: left;
width: 100%;
background-color: #00ff00;
}

#contents {
margin-left: 200px;
}

#menu {
float: left;
width: 200px;
margin-left: -100%;
background-color: #0000ff;
}

#footer {
clear: both;
background-color: #ffff00;
}

</style>

</head>
<body>
<div id="header">ヘッダ</div>

<div id="main">
<div id="contents">コンテンツ</div>
</div>

</body>
</html>
]]]

考え方

#mainのwidthに指定した値と同じ大きさの値を、#menuのmargin-leftにマイナスをつけて指定する。これにより、floatを指定した#menuが#mainの上に重なった状態になる。その上で、重なってしまった幅だけ#contentsのmargin-leftを足してやることでレイアウトを実現する。

参考文献 Web標準XHTML+CSSデザインクリエイターが身につけておくべき新・100の法則。

節：IE…urlなど半角文字の文が折り返さずにはみ出る

2008-04-26T23:05:00+09:00

解決策

　word-breakプロパティーでbreak-allを指定する
[[[
word-break: break-all;
]]]

半角文字列の折り返し問題

　半角文字列の折り返し問題はCSSが普及する以前、テーブルレイアウトが主流のころからある問題である。英文は単語の途中で勝手に折り返してはならないという禁則処理からくる仕様なのだろう。たしかに、通常利用する上では半角スペースの混入しない半角英数文字列のみで構成された文章を記述するケースはほとんどないといえる。
　
　問題になる場合があるとしたら以下の２点がほとんどだろう。

URLを表示する場合。横幅の非常に狭いブロックに文字列を記述する場合。

　自ら手打ちで作るコンテンツの場合は、記述の調整で回避するのが懸命と思われるが、CMSなどの自動コンテンツ生成ツールでこの現象に対して意識の無い第三者が情報を記述するケースではそうもいかないので、悩みどころである。

　この折り返し条件はブラウザごとにかなり仕様が異なる。冒頭に記述したプロパティーはIE独自の仕様なので、IE以外には効果がない。mozilla系以外のブラウザのほとんどはハイフンなどの一部の半角記号を区切り文字として認識し、折り返しするが、区切り文字が出現しない文字列の場合折り返しはされずオブジェクトの横幅からはみ出してしまう。

節：IE6…背景色が指定された要素内にfloatがある場合要素内の文字が消える

2008-04-26T22:22:00+09:00

解決策

hasLayoutプロパティーをtrueにする。
具体的には以下の要素のどれかをfloat要素の親オブジェクトに明示する。

プロパティー値 display inline-block height any value float left or right position absolute width any value writing-mode tb-rl zoom any value hasLayoutとは

IEの独自プロパティーで、オブジェクトがレイアウトを持っているかどうかを示すもの。
読み出し専用プロパティーで値はブーリアンである。
ほとんどのオブジェクトはデフォルト値をfalseに設定されているが、img要素、input要素などデフォルト値がtrueのものも存在するので注意が必要。

具体的には？

width、heightはインライン要素では無視されるプロパティーであり、またfloat、position、writing-modeなどは表示に直接影響を与えてしまう。これらを考えるとほとんどの場合zoomプロパティーを明示することにより回避を行うのが現実的だろう。
[[[
*{zoom:1;}
]]]

しかし、zoomはIE独自プロパティーのためW3Cに準拠したCSSでは無くなってしまうという問題がある。また、*{zoom:1;}とした場合、IE7のズーム機能で拡大、縮小した際に表示くずれを起こす可能性があるので、根本的な解決というわけではない点に注意。

日記：IE6…背景色が指定された要素内にfloatがある場合要素内の文字が消える

2008-04-26T22:22:00+09:00

CSSに記述を追加。
以下の２点。

IE6…背景色が指定された要素内にfloatがある場合要素内の文字が消える IE…urlなど半角文字の文が折り返さずにはみ出る

節：stdClass

2008-04-26T20:41:00+09:00

stdClassは全てのクラスの基本となるクラスである。
PHPで定義済みのクラスであり、スクリプト中に定義しないでそのまま使用出来る。
データを配列でなくオブジェクトの形で保存したい場合等に利用できる。

例
[[[
<?php
$obj = new stdClass;
$obj->hoge1 = "hoge";
$obj->hoge2 = 2;

var_dump ($obj);
?>
]]]

出力結果
[[[
object(stdClass)#1 (2) {
["hoge1"]=>
string(4) "hoge"
["hoge2"]=>
int(2)
}

]]]

日記：デザインパターンにリストを記述

2008-04-17T08:53:00+09:00

デザインパターン項目にGofの23デザインパターン表を記述。

章：デザインパターン

2008-04-17T08:52:00+09:00

デザインパターン

オブジェクトの生成に関するパターン Abstract Factory

　お互いに関連したり依存し合うオブジェクト群を、その具象クラスを明確にせず生成するためのインターフェイスを提供する。

Builder

　複合オブジェクトについて、その作成過程を表現形式に依存しないものにすることにより、同じ作成過程で異なる表現形式のオブジェクトを生成できるようにする。

Factory Method

　オブジェクトを生成するときのインタフェースだけを規定して、実際にどのクラスをインスタンス化するかはサブクラスが決めるようにする。Factory Methodパターンは、インスタンス化をサブクラスに任せる。

Prototype

　生成すべきオブジェクトの種類を原型となるインスタンスを使って明確にし、それをコピーすることで新たなオブジェクトの生成を行う。

Singleton

　あるクラスに対してインスタンスが１つしか存在しないことを保証し、それにアクセスするためのグローバルな方法を提供する。

プログラムの構造に関するパターン Adapter

　あるクラスのインタフェースを、クライアントが求める他のインタフェースへ変換する。Adapterパターンは、インタフェースに互換性のないクラス同士を組み合わせることが出来るようにする。

Bridge

　抽出されたクラスと実装を分離して、それらを独立に変更できるようにする。

Composite

　部分〜全体階層を表現するために、オブジェクトを木構造に組み立てる。Compositeパターンにより、クライアントは、個々のオブジェクトとオブジェクトを合成したものを一様に扱うことができるようになる。

Decorator

　オブジェクトに責任を動的に追加する。Decoratorパターンは、サブクラス化よりも柔軟な機能拡張方法を提供する。

Facade

　サブシステム内に存在する複数のインタフェースに１つの統一インタフェースを与える。Facadeパターンはサブシステムの利用を容易にするための高レベルインタフェースを定義する。

Flyweight

　多数の細かいオブジェクトを効率よくサポートするために共有を利用する。

Proxy

　あるオブジェクトへのアクセスを制御するために、そのオブジェクトの代理、または入れ物を提供する。

オブジェクトの振る舞いに関するパターン Chain of Responsibility

　１つ以上のオブジェクトに要求を処理する機会を与えることにより、要求を送信するオブジェクトと受信するオブジェクトの結合を避ける。受信する複数のオブジェクトをチェーン上につなぎ、あるオブジェクトがその要求を処理するまで、そのチェーンに沿って、要求を渡していく。

Command

　要求をオブジェクトとしてカプセル化することによって、異なる要求や、要求からなるキューやログにより、クライアントをパラメータ化する。また、取り消し可能なオペレーションをサポートする。

Interpreter

　言語に対して、文法表現と、それを使用して文を解釈するインタプリターを一緒に定義する。

Iterator

　集約オブジェクトが基にある内部表現を公開せずに、その要素に順にアクセスする方法を提供する。

Mediator

　オブジェクト群の相互作用をカプセル化するオブジェクトを定義する。Mediatorパターンは、オブジェクト同士がお互いに明示的に参照しあうことがないようにして、結合度を低めることを促進する。それにより、オブジェクトの相互作用を独立に変えることができるようになる。

Memento

　カプセル化を破壊せずに、オブジェクトの内部状態を捉えて外面化しておき、オブジェクトを後にこの状態に戻すことができるようにする。

Observer

　あるオブジェクトが状態を変えたときに、それに依存するすべてのオブジェクトに自動的にそのことが知らされ、また、それらが更新されるように、オブジェクト間に一対多の依存関係を定義する。

State

　オブジェクトの内部状態が変化したときに、オブジェクトが振る舞いを変えるようにする。クラス内では振る舞いの変化を記述せず、状態を表すオブジェクトを導入することでこれを実現する。

Strategy

　アルゴリズムの集合を定義し、各アルゴリズムをカプセル化して、それらを変換可能にする。Strategyパターンを利用することで、アルゴリズムを、それを利用するクライアントからは独立に変更することができるようになる。

Template Method

　１つのオペレーションにアルゴリズムのスケルトンを定義しておき、その中のいくつかのステップについては、サブクラスでの定義に任せる事にする。Template Methodパターンでは、アルゴリズムの構造を変えずに、アルゴリズム中にあるステップをサブクラスで定義する。

Visitor

　あるオブジェクトを構造上の要素で実行されるオペレーションを表現する。Visitorパターンにより、オペレーションを加えるオブジェクトのクラスに変更を加えずに、新しいオペレーションを定義することができるようになる。

範囲｜目的生成構造振る舞いクラス Factory Method Adapter Interpreter
Template オブジェクト Abstract Factory
Builder, Prototype
Singleton Adapter
Bridge
Composite
Decorator
Facade
Flyweight
Proxy Chain of Responsibility
Command
Iterator
Mediator
Memento
Observer
State
Strategy
Visitor