タグに「ホームページ作成」を持つ
11〜14件目 / 14件
前へ 1 2

 canvasに挑戦 / magicien 

JavaScriptにも慣れてきたので、以前から気になっていたcanvasに挑戦してみた。

canvasタグを使うと、Safari、FireFox、Operaで直線やらベジエ曲線やら画像やらが描画できるらしい。ただ、IEでは動かない...と思ったら、GoogleがExplorerCanvasなるものを作っていたらしく、これを使えばIEでもcanvasが使えるようだ。同梱されているサンプルがすごいので、JavaScriptをやらない人もダウンロードして見てみるといいかも。

で、何かミニゲームでも作ろうと思ったけど、画像の回転が限界でした。OpenGLを使ったときに勉強したはずの座標系の回転と平行移動でつまづいて、数時間かかってしまった...。基礎から勉強し直さないとだめかも。
「回転開始!」ボタンを押すと、DarkHorseのロゴ画像が回転します。


2007/02/20(Tue) 00:26:43

 PHPでBOM / magicien 

PHPでUnicodeサイン(BOM)を出力するにはどうすればいいのか、いろいろ調べてみると、とても簡単なことに気づいた。

管理者用ページでAjaxを使っているのだけれども、PHPで出力したUTF-8のデータをそのまま表示すると、Safariで文字化けしてしまう。文字化けを防ぐためにはBOMを付けなければならない、という。で、BOMというのは0xffefという2バイトの数値らしいのだけれども、最初にどうやって2バイトだけ出力するのだろう、と思って調べてみると、一番最初に
header( "Content-Type: text/html; Charset=utf-8" );
というヘッダを出力すれば、自動的にBOMが付加されるらしい。な〜んだ、そんな簡単なことだったのか、というお話。
2007/02/18(Sun) 23:43:48

 .htaccessの設定 / magicien 

.htaccessでエラーページの設定と、URLの書き換えの設定をしてみた。

Not Found(ステータスコード:404)のエラーが起きたときに自分の作ったエラーページを表示させるには、htaccessに次のような1行を追加する。
ErrorDocument 404 /errors/404.php
「ErrorDocument ステータスコード エラーページのURL」と書けばOK。エラーページのURLはドキュメントルートからのパスを書く。httpから始めると、リダイレクトされて、エラーページのURLが表示されてしまう。

次に、URLの書き換える場合は、以下のように書く。
RewriteEngine On
RewriteRule ^([0-9]+)/$ index.php?cid=$1&%{QUERY_STRING}
「RewriteRule 入力されたURL 出力するURL」と書けばOK。入力されたURLは正規表現で書く。正規表現中で、括弧で囲んだ部分は、出力するURLで$1、$2、...という変数として使える。また、?a=1&b=2のように、?以降に書かれたクエリーは、%{QUERY_STRING}という変数に格納される。
なんか説明が下手でごめんなさい。上記の例では、
http://darkhorse2.0spec.com/3/?a=1&b=2
と書くと、
http://darkhorse2.0spec.com/index.php?cid=3&a=1&b=2
というURLを呼び出したのと同じになる、というわけです。
2007/02/17(Sat) 22:03:15

 スタイルのデフォルト値 / magicien 

文字が中心のサイトになるなら、フォント周りをもう少し読みやすくした方がいいだろうと思って、スタイルシートをいじっていて、デフォルト値について思ったことをメモ。

body要素のすぐ下にdiv要素を置いて、そのdiv要素に背景を設定したのだけれども、ウィンドウ全体に背景が適用されない。背景の周りに白い枠ができている。
divのborderをnoneにしたり、marginやpaddingを0にしても変わらない。そこで、試しにbodyのmarginを0にすると、白い枠が消えた。全てのブラウザで同じような現象が起こっていたから、どうやらみんな、bodyのmarginのデフォルト値が5pxぐらいに設定されているようだ。

それと、行間はもう少し広い方が読みやすいだろうと思って、line-heightを1.3にすると、Safariでは行間が縮まってしまった。Safariでは、line-heightがデフォルトで1.4ぐらいになっているらしい。というわけで、line-heightを1.5に設定。これで少しは読みやすくなったかな?
2007/02/16(Fri) 20:48:27