スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

CSS3のプロパティ「text-shadow」を使ってフォントを装飾する方法です。

フォントにシャドウを付ける

以下のように設定することで、フォントに影を付けることができます。

text-shadow: 1px 2px 3px #ff0000;

それぞれの値は、
右方向に1pxずらして(マイナスだと左方向)、
下方向に2pxずらして(マイナスだと上方向)、
ぼかし具合を3px、
影の色は「#ff0000」にというように指定してあります。

text-shadowのサンプルです。

もちろん、text-shadowが使えるのはCSS3に対応しているブラウザに限りますが、私の環境では、Firefox5とGoogle Chrome 12で表示できていることを確認できています。残念ながらIEは対応していません。

CSS3のプロパティ「radius」を使ってborderの角丸を表現する方法です。

基本設定

以下のようにCSSで設定することで、borderで指定した枠線を角丸で表現することができます。

border: 3px solid blue;
border-radius: 10px;

1ピクセルで青の枠線の角を10pxの度合いで曲線で表現します。以下に実際の組み込み例を示します。
※もちろんIE8以下など対応していないブラウザでは閲覧できません。

border: 3px solid blue;
border-radius: 10px;

みさなまお使いのブラウザでは角が丸く表示されているでしょうか。

少し前まで、「border-radius」はCSS3の草案で、表現できるブラウザは存在していませんでしたが、Firefox5.0、Google Chrome 12では問題なく表示されているようです。
それまではGoogle ChromeとSafariでは「-webkit-border-radius」、Firefoxでは「-moz-border-radius」が用意されていましたが、近い将来「border-radius」に統一されるでしょう。

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

ちなみにIE8以下は対応していないので、見比べるとその効果を確認することができます。

これまで、リストを装飾するために「li」タグにクラスを指定していました。
リストのマークを画像にする、下線をつける、一つ置きに背景を変えるなど、リストはデザインバリエーションの高い要素です。
これら細かい要望を実現するために、これまではクラスを指定して実装していました。

しかし、繰り返し要素に条件に応じてクラスを指定するという事は、CMSなど動的に組み込むために一手間必要という点で、めんどくささがありました。
そこで、今回はクラスを指定せずにCSS3のみで実装してみます。
ちなみにIEなどCSS3に対応していないブラウザでは利用できません。

以下はベースとなるサンプルリストのソースです。装飾のために、特別なクラスは指定しません。

<ul>
<li>サンプル1</li>
<li>サンプル2</li>
<li>サンプル3</li>
<li>サンプル4</li>
<li>サンプル5</li>
</ul>
  • サンプル1
  • サンプル2
  • サンプル3
  • サンプル4
  • サンプル5

CSS3のプロパティ「gradient」を使ってグラデーションを表現する方法です。

基本設定

以下のようにCSSで設定することで、背景をグラデーションで表現することができます。

.sample{
	background: -moz-linear-gradient(top, #555555, #000000);
	background: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#000000));
	background-color: #000000;
}

これは、実際にこのブログのフッタ部分、コピーライトが乗っている背景を指定してあるコードです。
Firefox用に「-moz-linear-gradient」、SafariとGoogle Chrome用に「-webkit-gradient」を指定します。また、IEなどCSS3に対応していないブラウザのため、とりあえずはCSS2での指定「background-color」も置いておきます。

「-moz-linear-gradient」では「top」を指定することで上から下へ、#555555から#000000にグラデーションを表示することを表しています。

「-webkit-gradient」では「点」で指定するのですが、「left top」から「left bottom」、つまりは上から下へ、#555555から#000000にグラデーションを表示することを表しています。

例えば、PHPでフォームを構築する場合など複数のボタンを設置して、それぞれサーバ処理を分けたい場合があります。

具体的には、メールフォームで「送信してもよろしいですか?」といった確認画面では、「入力フォームに戻る」と「送信する」ボタンがあり、それぞれでサーバ処理を分岐させます。
複数のsubmitボタンがある場合に、サーバ側でどのボタンが押されたかを取得したいときに、どのような処理が適当なのかを考えてみます。

ちなみにこれから示す全てのコードは比較のために簡略化してあり、動作確認はとっていません。

JavaScriptでポストするデータを分ける

これまで私は、主にJavaScriptでPOSTするデータを操作し、サーバ側でその内容を判定することで、処理を分岐していました。

<a href="javascript:void(0);"><img onclick="back(); return false;" src="back.jpg" alt="戻る" /></a>
<a href="javascript:void(0);"><img onclick="send(); return false;" src="send.jpg" alt="送信" /></a>

JSの処理の中身は省略しますが、関数back()とsend()で異なるパラメータを設定してsubmitします。そうすると、そのデータがPOSTされるので、PHP側でデータ内容を判定して処理を分岐すればいいわけです。
JSではPOSTで送信するデータを自由に加工できるので、この方法では複雑な処理も可能になります。

Webサイトを構築する場合、フォントを指定します。例えば、Windowsでは通常「MS Pゴシック」を指定します。

何のために指定するのかというと、いかなる環境においても、なるべくサイトデザインに沿った、同じような見た目を保持するためです。
「MS Pゴシック」を指定するということは、Google ChromeやFirefoxなどブラウザに関係なく、OSのシステムフォントに「MS Pゴシック」がインストールされている場合に、それで表示するということです。

システムフォントに「MS Pゴシック」が存在することが前提なので、MacやLinuxなど、他のOSでは意図しないフォントで表示されてしまいます。
そのため、各OSに標準でインストールされているシステムフォントを考慮して、優先順位をつけてCSSでフォント指定をすることが一般的です。

body{
    font-family: "MS Pゴシック",arial,helvetica,clean,sans-serif;
}

つまり、これまではシステムフォントの都合上、全ての環境で同じフォントで表現するといったことが不可能だったわけです。

Firefoxのバージョン5が発表されたばかりですが、段階的にバージョン9までアップデートするそうです。
便利になることは良いことですが、制作の立場からすると互換性が心配です。

現在、私の環境ではFirefox3.6を使用していますが、とりあえず確認環境を残すという意味で、Firefox5を共存させてみたいと思います。

なぜFirefox4ではないかというと、どうもFirefox5が公開されている現段階で、Firefox4は入手できないようです。
次世代ブラウザ Firefox – 旧バージョンのダウンロード

プロファイルを分ける

Firefoxではユーザー毎に使用状況を保持するために、プロファイルを使用しています。
プロファイルの一覧はスタートメニューより「ファイル名を指定して事項」から「firefox.exe -ProfileManager」を実行すると確認できます。
また、このとき、ブラウザのFirefoxは閉じておくようにしましょう。

技術的に古い情報かもしれませんが、最近体験したことを書き留めておきます。

これまで、データを外部に持ち運ぶなんてことがほとんどなかったので、USBメモリを使う機会もありませんでした。
しかし、つい先日、どうしてもクライアント先に媒体経由でデータを納品しなければならないという事があったので、USBメモリを使ったのですが、クライアント先のPCでUSBメモリを認識してくれないという問題が発生しました。

クライアント先で使えなかったUSBメモリ

USBメモリは16GBのTOSHIBA製のものを購入しました。最近は大容量かつ安価なメモリが増えましたね。購入後は自身のPCでフォーマットしました。フォーマットをした環境はWindows 7、形式は「exFAT」です。

それまで「exFAT」という名を聞いたことがなかったのですが、大容量向けということだったので「16GBだしこっちのほうがいいのかな」と特に気にせずフォーマットしました。
しかし、クライアント先で使えなかった理由はここにあったようです。

「exFAT」とは

exFATとは先ほども述べたように大容量向けのフォーマット形式です。FAT32が最大容量32GBなのに対して、exFATだと16EBまでサポートできるとのこと。
見たことのない単位ですが、EBとは「エクサバイト」と呼び、GB「ギガバイト」の10億倍の容量だそうなので、最大サポート容量が約5億倍になった計算になるんですかね。
また、FAT32では1つのファイルの最大容量が4GBなのに対して、exFATは制限がないそうでうす。

ただ、OSによりサポートしていないものがあります。Windowsでいうと、exFATをサポートしているのはWindows 7、Vista Service Pack 1以上、XP Service Pack 2以上で、それ以外の環境ではUSBを挿しても認識してくれません。

つまりは、クライアント先のPCがWindows XP SP1以下だったため、ファイルを読み書きできなかったのです。
IE6の問題と一緒で、いつ古い環境を切り離すかというタイミングの問題がありますが、先走ると痛い目を見るという事ですかね。
そういうわけで、しばらくはFAT32に再フォーマットして使いたいと思います。

そもそも、16GBのメモリなので、exFATでフォーマットする必要もなく、FAT32で十分だったんですね。

PHPで動的に連想配列を作りたかったのですが、うまくいきません。

具体的には、以下にダンプに示すような配列をプログラムで作る想定です。

Array
(
    [key1] => data1
    [key2] => data2
    [key3] => data3
    [key4] => data4
)

これをPHPで静的に定義するためには、以下のようにすればよいです。

$array = array(
	'key1' => 'data1',
	'key2' => 'data2',
	'key3' => 'data3',
	'key4' => 'data4'
)

ただ、プログラム上、どうしても動的に配列を操作したい場合があり、その方法を考えていたのです。
例えば、上に要素を追加したい場合、array_push関数を使うとこうなるでしょうか。

array_push($array, 'key5' => 'data5');

PHPの文法に反しているので、当然ですがエラーになってしまいます。

CakePHPのモデルには、DBを更新する際に値をチェックするvalidate機能があります。
今回、それを活用しようとプログラミングしてみたのですが、なかなか問題が多かったので、とりあえずメモとして残しておきます。
CakePHPのバージョンは1.3.6です。

プライマリキーの重複チェックを試す

Sampleモデルについて、validate機能でプライマリキーの重複チェックをする場合には、以下のようにモデルに記述するだけです。CakePHPはこの簡易さがありがたい。

class Sample extends AppModel {
	var $name = 'Sample';
	var $validate = array(
		'id' => array(
			array(
				'rule' => 'isUnique',
				'message' => '「ID」が重複しています',
			),
		),
	);

マニュアルにもあるように、この記述で問題ないはずですが、なぜかチェックは機能せず、エラーパターンでもスルーして正常処理を続行してしまいます。
原因は不明ですが、どうしても出来ないので、ひとまずこの方法はあきらめます。

Monthly Archives