2008年4月24日木曜日

 

【CSS】デフォルト・テンプレート

CSS の汎用テンプレをまとめることにした。ここに。
随時、追加・修正して行きます。


@charset "utf-8";
*{
    margin:0;
    padding:0;
    border:none;
}
html {
    overflow-y:scroll;
}
body {
    background:#FFF url(../img/bg.gif) no-repeat left top;
    font:normal normal normal 100%/1.3 Verdana,"MS Pゴシック","Osaka",sans-serif;
}
h1,h2,h3,h4,h5,h6 {  
} 
ul {
   list-style:none;
}
address {  
     font-style:normal;  
}  

参考

bodyに設定しておくと便利な3つのポイントとおまけ - CSS HappyLife
全称セレクタを上手く使おう - WEB工房きくちゃん
新規サイト制作セット(CSSライブラリ+基本フォルダ構造+HTMLテンプレート)、一式zipでダウンロードできるようにしました - :::STOPN' LISTEN::: 新規でサイトを作るのに使えそうなの一式。(あの人のパクりじゃないんだからっ!) - CSS HappyLife

ラベル:


 

【CSS】テキストや画像を中央に表示する


<div>
  <p>中央に表示</p>
</div>

テキスト1行~ line-height を使った方法~


div{
    width:200px;
    height:200px;
    background:#39FF6B;
    text-align:center;
}
p{
   line-height:200px;
}

そのまんま、親要素のサイズで「line-height」を指定。

テキスト1行~ vertical-align を使った方法(IE 以外)~


div{
    display:table-cell;
    width:200px;
    height:200px;
    background:#39FF6B;
    text-align:center;
    vertical-align:middle;
}

vertical-align:middle」はテーブルセルに有効なスタイルなので普通にブロック要素とかに指定しても意味が無い。

テキスト複数行


div {
    width:200px;
    height:200px;
    background:#39FF6B;
    position:relative;
}
p {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-2.5em;
    margin-top:-1em;
}

それぞれ行数と列数の半分を「-(マイナス)」でマージン指定。

画像の場合


<div>
  <p><img src="img.jpg" width="100" height="100" alt="中央に表示" /></p>
</div>

上記の複数行のスタイルを、画像の幅と高さの半分にマージンを変更するだけ。


    margin-left:-50px;
    margin-top:-50px;

テキスト複数行~ vertical-align と CSS ハックを使った場合~


div p {
    display: table-cell;
    vertical-align: middle;
    margin: 0;
}
/*  for IE6  */
* html div p {
    display: inline;
    zoom: 1;
}
/*  for IE7  */
*:first-child+html div p {
    display: inline;
    zoom: 1;
}
/* Mac 版 IE 5.2  */
/*\*//*/
* html div{
display:inline-block;
}
/**/

ハックしまくりですが Firefox 1, 2、Netscape 6, 7.1、Safari 2, 3、Opera 9.2、IE 5.01, 5.5, 6, 7 とほぼ完璧な対応。

参考

vertical-alignの使い方【css tips】
CSSで垂直中央を実装する【css tips】 -
CSS で簡単に上下中央揃えを実現する - ヨモツネット[日記]

ラベル:


 

【CSS】フッタをページ最下に配置

コンテンツ少なくても大丈夫。「position:fixed;」じゃない。

// layout.css
* {
    margin: 0;
}
html, body {
    height: 100%;
} 
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer {
    height: 4em;
}
// HTML ソース

<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>

参考したところでは「id:wrapper」の中に空要素を入れてるが、無くても大丈夫っぽいので気にしない子。(Firefox、IE6)

参考

A CSS sticky footer

ラベル:


 

【CSS】clearfix

色々な方法があったはずなので、まとめようと思ったら一つしかブックマしてなかった。
空の要素とかは避けてたが、あまりに少なすぎる。

.clear:after {  
     content: ".";  
     display: block;  
     visibility: hidden;  
     height: 0.1px;  
     font-size: 0.1em;  
     line-height: 0;  
     clear: both;  
 }
/*   IE7対応   */
.clear {
     display: inline-block; 
}

擬似要素で IE6 無理な気がする。
要素名は便宜上。デザインで class 名を付けるのはいけません。

参考

clearfix - CSS HappyLife

ラベル:


2008年4月23日水曜日

 

【Perl】HTML エスケープとXSS対策

フォームの値チェック(バリデーション)を Perl でどうするのかなぁと調べた。
することはおなじみの「<>&amp;"e;'」を変換して無効化すること。

Perl で HTML エスケープ - Landscape - エンジニアのメモ


# HTML エスケープする
 sub HtmlEscape {
  my $content = $_[0];
  my $eucpre = qr{(?<!\x8F)};
  my $eucpost = qr{ (?= (?:[\xA1-\xFE][\xA1-\xFE])* # JIS X 0208 が 0文字以上続いて
                                     (?:[\x00-\x7F\x8E\x8F]|\z) # ASCII, SS2, SS3 または終端
                                )
                          }x;
  my @escape_from = qw(& > < " ');
  my @escape_to = ('&amp;', '&gt;', '&lt;', '&quot;', '&#39;');
  for (my $i = 0; $i <= $#escape_from; $i++) {
     $content =~ s/$eucpre\Q$escape_from[$i]\E$eucpost/$escape_to[$i]/g;
  }
  return $content;
}

HTML(タグ)を表示する、XSS対策を行う - CGI・Perl例文集


# HTML
my $html = qq|<script language="JavaScript">alert('にょろ');</script>\n|; 

# 関数 xss()  
print xss($html);

sub xss {
 my $str = shift || return(undef);
 $str =~ s/&/&amp;/g;
 $str =~ s/</&lt;/g;
 $str =~ s/>/&gt;/g;
 $str =~ s/\"/&quot;/g;
 $str =~ s/\'/&#39;/g; return($str);
}

# CGIモジュールを利用
use CGI qw(:cgi);
print CGI::escapeHTML($html);

PHP の htmlentities() みたいなのはないのかな。
いつも問題になるのは PHP だけど Perl は問題ないのか、すでに議論し尽くされた問題なのか、PHPer のモラルが低いせいか。
Perl について知らないけど、PHP は言語上欠陥があるとかセキュリティ関係が手薄な入門書があったりはするようだが。

参考

[1-2.] クロスサイトスクリプティング - IPA ISEC セキュア・プログラミング講座
セキュアプログラミング講座 - 情報処理推進機構:情報セキュリティ

ラベル:


 

【Perl】デバッグ

Perl のコードが全然かけないので修正に困る。
デバッグの仕方。

エラー箇所の検討をつける

以下のコードを挿入して、出力されたらそこまではセーフ。


print "Content-type: text/html\n";
print "\n";
print "Hello World!";

エラー情報を出力する

以下のコードを「#!/usr/bin/perl」とかの次、2行目あたりに挿入。
するとブラウザにエラー行などの情報が出力される。


use CGI::Carp qw(fatalsToBrowser);

デバッグ・プログラム

有名なCGI配布サイト KENT-NET で提供されてる Perl のデバッグソフト。
サーバにアップするなどしてブラウザでアクセスしてチェックしたい CGI のパスを入力すると、文法、パーミッションのエラーと上記の「use CGI::Carp qw(fatalsToBrowser);」で得られるエラー情報が出力される。

Perl Checker- KENT-NET
Perlの文法違反をチェック。合わせて、Perlのパス、パーミッション等もチェックします。

使用後はデバッグコードもデバッグプログラムも消去しないと危険なので注意
Perl は(僕のようなゆとりプログラマが)サーバ情報などを垂れ流さないようにか、エラー出力がでないので、やりづらい。
その点 PHP はとっても親切なので(僕のようなゆとりプログラマ)初心者にも優しい。
せめてデバッグ情報をとめて公開するのが最低限。


//エラー出力をしない
error_reporting(0);

関連

【PHP】演算子"@"とエラー処理 - [2008年4月5日]

参考

デバッグの基本 - Perl/CGI研究室 'PERL-LABO'

ラベル:


2008年4月22日火曜日

 

【PHP】HTMLをテキストに変換する

メモメモ。
検討。果たして穴はないか。


$search = array ("']*?>.*?'si", // javascriptを削除
"'<[¥/¥!]*?[^<>]*?>'si", // htmlタグを削除
"'([¥r¥n])[¥s]+'", // 空白文字を削除
"'&(quot|#34);'i", // HTMLエンティティを置換
"'&(amp|#38);'i",
"'&(lt|#60);'i",
"'&(gt|#62);'i",
"'&(nbsp|#160);'i",
"'&(iexcl|#161);'i",
"'&(cent|#162);'i",
"'&(pound|#163);'i",
"'&(copy|#169);'i",
"'&#(¥d+);'e"); // phpとして評価

$replace = array ("",
"",
"¥¥1",
"¥"",
"&",
"<",
"<",
" ",
chr(161),
chr(162),
chr(163),
chr(169),
"chr(¥¥1)");

$text = preg_replace($search, $replace, $document);

参考

HTMLをテキストに変換する - システム屋日誌

ラベル:


 

【PHP】文字列から余分な空白を取り除く

メモメモ。
第二引数を"&nbsp にすれば置き換えも出来そう。


$str = 'foo o';
$str = preg_replace('/¥s¥s+/', ' ', $str);

// 'foo o' now
echo $str;

参考

文字列から余分な空白を取り除く - システム屋日誌

ラベル:


2008年4月21日月曜日

 

【PHP】httpステータス404

PHPでhttpステータス404を返す方法 - floatingdays


header("HTTP/1.1 404 Not Found");
404を返しつつページの表示も出来た!これで検索エンジン向けも人間向けも万事解決。

httpステータス404をきちんと返したり「404 NOT FOUND」のページを用意するのは大事らしい、デザインとかユザビリティとかSEOとか。

ラベル:


 

【PHP】DateTime オブジェクトを使った日付操作

PHP 5.2 以降の話。

PHPの日付操作はDateTimeが簡単 - floatingdays

DateTime::modify() で日付操作して DateTime::date_format() で取得。

date_modify
date_format - PHP マニュアル


$date = new DateTime("2006-12-12");
$date->modify("+1 day");
echo $date->format("Y-m-d");

マニュアルサイトから。


$currentDate = new DateTime('2008-01-04');
$endDate     = new DateTime('2009-01-04');

while($currentDate < $endDate) {
  echo $currentDate -> format('Y-m-d') . ' till ';
  $currentDate      -> modify('+1 week');
  echo $currentDate -> format('Y-m-d') . ' 
'; }

ラベル:


2008年4月16日水曜日

 

YUI Compressor を使った Javascript ファイルの圧縮とサイト表示の高速化

参考

YUI Compressor - StackTrace
YUI Compressor のインストール、使い方、コマンドオプションの説明。

YUI Compressorで簡単にjavascriptとCSSを圧縮 - Affirmative Way
YUI Compressor の使い方、ファイル圧縮の意義、難読化について。

ファイルが軽いのは良い事だけど、DOMの操作ガシガシの時とかはあまり効果がない気がする。
「prototype.js」「jQuery.js」「Lightbox.js」とか定番で編集しないものは圧縮しておく必要ありそうだ。
難読化は必要性を感じないけど。

ラベル:


2008年4月15日火曜日

 

【HTTP_Request】HTTPリクエストをブン投げる又はAPIの利用【PEAR】

[PHP-users 25528] Summary: 外部ページにPOSTする方法 - PHP-users


    include('HTTP/Request.php');

    $req = &new HTTP_Request('http://www.php.net');
    $req->setMethod(HTTP_REQUEST_METHOD_POST);
    $req->addPostData('Foo', 'bar');
    $req->sendRequest();
    $response1 = $req->getResponseBody();
    
    $req->setMethod(HTTP_REQUEST_METHOD_GET);
    $req->setURL('http://pear.php.net');
    $req->clearPostData();
    $req->sendRequest();

    $response2 = $req->getResponseBody();

    echo $response1;
    echo $response2;

今、熱いAPIだけど、皆どうやって使ってんの?
有名どころのサービスが提供してたら、利用者も多くて言語毎に簡単に使えるライブラリとか出てるけどさ。
色んなサイトがAPI出してるのね。

PHP 標準の機能でHTTPリクエスト出来るのはないのか、PECL とか PEAR の関数使ったのしか見つからない。
レンタルサーバ的に PEAR の方がインストールされてることがあるみたいなので採用。

参考

フォト蔵API(β版)へPHPでアクセス - ウノウラボ Unoh Labs
第 48 章 HTTP:HTTP_Request - PEAR マニュアル

PEAR マニュアルは公式が検索でトップに出てこないのが残念です。
サイト内検索すると英語サイトしかヒットしないし。

参考書

PEAR入門 PHP標準ライブラリを極める!
PEAR入門 PHP標準ライブラリを極める!

ラベル: , ,


2008年4月11日金曜日

 

【CSS】属性ごとのスタイル指定

Firefoxでnofollowリンクを一発で見破る - 海外SEO情報ブログ - 海外のSEO対策で極めるアクセスアップ術
こういうのもあるのか…。


a[rel~=nofollow] {
background-color: pink !important;
}

本筋から逸れた所に反応してしまったが、勉強不足。

参考

Mozillaのa:hoverは厳密なため注意が必要です - Web標準普及プロジェクト

ラベル:


 

【MySQL】mysql_connect(): Too many connections

mysql_connect(): Too many connections った!><

mysql_connect(): Too many connections

データベースの同時接続上限数を超えると発生!
アクセスの集中が過ぎるのを待つしかない。攻撃されてるかもしれないので対策を取るか上限数を増やすか。
レンタルサーバはDBも共有だったりすると自サイトが関係なくても影響受けちゃうよ><

とりあえずは以下のようなのでその場しのぎ、お茶濁す。


$conn = @mysql_connect($host_name,$user_name,$pass_name);
if (!$conn) {
    header('HTTP/1.0 500 Server Error');
    echo 'DBに接続できません><';
    exit;
}

$try=0;
do {
    if ($try) sleep(1);
    $conn = @mysql_connect($host_name,$user_name,$pass_name);
    $try++;
    if ($try==5) {
        header('HTTP/1.0 500 Server Error');
 echo 'リトライしましたが、やっぱりDBに接続できません><';
 exit;
    }
} while (!$conn);

参考

[PHP-users 23649] Re: MYSQLのToo many connectionsについて - ml.php.gr.jp メーリングリスト

ラベル: ,


2008年4月9日水曜日

 

画像の遅延ローディング

画像の遅延ローディング - Moony::log

prototype.js を使った画像の遅延表示。
これを同期させるスクリプトと組み合わせる。「スクロールしたら」とか「マウスが乗ったら」とか。

参考にされた JQuery を使った画像遅延ローディング。
Lazy Load Plugin for jQuery

ラベル:


 

【Javascript】window.onload

Javascript を読み込んでから処理するタイミングについて。

// 読み込まれると同時に実行
(function() {
alert("test");
})()
// ページ全体が読み込まれたら実行
window.onload=function(){
alert("test2");
}

前者の「(関数)()」は忘れがち。
こういう特殊なのがあるので敬遠しがち。

参考

javascriptを読み込みと同時に実行する方法 - to-R

ラベル:


2008年4月8日火曜日

 

【Flex】Flex SDK 3 のインストールと設定

参考リンク

実践!Flex 2のインストール - ThinkIT
FlashDevelop でAS3 開発環境を整える - 7:3 blog
第2回 Flexをインストールしよう - 1からはじめる Flex コーダーへの道
Adobe Flex 2 のインストールと Hello World - NI-Lab.'s ヅラッシュドット
Flex2開発入門(SDK編) - Webシステム開発.com

Java がなければ以下から入手。ダウンロードしてインストール。
Java ソフトウェアのダウンロード - Sun Microsystems

Adobe Flex 3 SDK をダウンロード。リンク先の「Latest Milestone Release Builds」の「Adobe Flex 3 SDK」をダウンロード。
Flex SDK Downloads - Adobe Open Source

Adobe Flex 3 SDK のzipファイルを、任意の場所に解凍。「C:\flex」が妥当。
解凍したディレクトリにパスを通す。
※Windows では
「コントロールパネル」->「システム」->「詳細設定」->「環境変数」から「システム環境変数」の「Path」を編集して値に Flex のディレクトリを追加する。ここでは「C:\flex\bin」となる。

コマンドプロンプトから以下の様にしてソースファイルをコンパイル。
文字コードはUTF-8。


> mxmlc Hello.mxml

以下を参照にして、fcsh というプログラムをダウンロードすると Flex のコンパイルがかなり速くなるらしい。
fcsh のインストールはサイトからダウンロードして Flex ディレクトリに保存するだけなので簡単。

fcsh で Apollo を高速コンパイル(参考リンク集のおまけ付き) - てっく煮ブログ

FlashDevelop という開発環境支援システムがあるらしい。
Flex Builder は有償で(無償版はローカル接続のみの動作環境)、Eclipse 重い。日本語と相性悪いようだがどんなものか。

FlashDevelop 3.0.0 beta5 と日本語Flex2 SDK - the technote

ダウンロードして上書きするだけの Flex SDK 2 日本語パッチがあるが、登録する必要がある模様。
Flex SDK 3 の日本語パッチは検索しても見つからなかった(2008/04/08現在)ので未だ無いのか。

ラベル:


2008年4月5日土曜日

 

【Javascript】js ファイルから外部ファイルを動的に読込む

他の言語での include() 関数みたいなこと。

Javascript のライブラリを読み込むとき、そこで使うコードが定義された他の js ファイルも一緒に読み込まれるようにしたい。 関連するファイルをまとめたいというのもあるが、HTML ファイルにタグを追加するのが面倒だから。編集するファイルの数を減らしたい。 HTML ソースを見たときに「<script type='text/javascript' src='XXX.js'></script>…」とスクリプトタグがたくさん書かれてるのも好みじゃない。


var jsElement=document.createElement("script");
jsElement.type="text/javascript";
jsElement.src="sample.js";
document.getElementsByTagName("head")[0].appendChild(jsElement);

[javascript] prototype.jsによるAjaxな動的なスクリプトのローディング - akimatter

動的にjsファイルを読むクラスを作ってみました。

http://joey.sourceforge.jp/brownie-2.0/js/core/brownie-script.js

scriptタグでロードするのは、prototype.jsとbrownie-script.jsだけでそれ以外はrequire関数でロードします。
この引数には相対パスでも絶対パスでも指定可能です。

「prototype.js」の「Ajax.Request」クラスを使った require 関数を定義して、js ファイルをロードして eval してるとのこと。

追記
ロールバック関数渡して、その中でだけ動的に読み込んだスクリプトを使えるような。必要な時だけの方が軽いのか?
ロールバック関数で更に動的読み込みしてる。

[javascript] 動的スクリプトローディング(さんざん既出だと思うけど - IT戦記

ラベル:


 

【PHP】演算子"@"とエラー処理

「@」でエラー抑制すると PHP が遅くなるという噂について - a++ My RSS 管理人ブログ
リンク先では最大10倍の速度差が出たようです。(追記 : 2008年5月10日)

関連

【PHP】プログラム最適化 - さぼてん : 2008年5月10日記事

PHP の式の前に"@"を付けた場合、その式により生成されたエラーメッセージは無視されます。
"@"をエラー制御演算子といいます。

track_errors 機能が 有効な場合、エラーメッセージはグローバル変数 $php_errormsg に保存されます。この変数はエラーが発生するたびに上書きされます。


<?php
$my_file = @file ('non_existent_file') or die ("Failed opening file: error was '$php_errormsg'");
// この演算子は関数だけでなく、全ての式で動作します。
$value = @$cache[$key]; 
// インデックス $key が存在しない場合でも警告を発生しません
?>
注意: @演算子は、式 でのみ動作します。~(略)~
値を得ることができるものの場合、@ 演算子を前に付けることが可能です。 例えば、変数、関数、include() コール、定数等の 前にこの演算子をつけることが可能です。
関数またはクラスの定義や ifforeach 等のような 条件構造の前にこの演算子を付けることはできません。

出力されるエラーレベルは error_reporting() 関数で設定します。

参考

エラー制御演算子 - PHP マニュアル

ラベル:


2008年4月4日金曜日

 

【Javascript】tr 要素の display プロパティ【CSS】

テーブルの行を Javascript で「表示 / 非表示」切り替えようとした。
tr 要素の「display」値はなんだろうと検索したら同じことをしてる人がいた。

tr 要素の「display : block;」にはまる

仕様とかの詳細はリンク先を見て頂きたい。
Firefox等では、tr 要素は「display:table-row;」だが、Internet Explorer は「table-row」には対応しておらず「display:block;」とする

解決策

ブラウザ判別して各々で処理を分けるより簡単に。
Javascript では「element.style.display = "";」として、display の値を空にしてしまえばデフォルトに戻るようだ。


function toggle_row_b(id)
{
    var obj = document.getElementById(id);
    obj.style.display =
        (obj.style.display == 'none')
        ? '' : 'none';
    return false;
}

参考

The blog of H.Fujimoto
http://www.h-fj.com/blog/
tr 要素の「display : block;」にはまる

ラベル: ,


 

【Javascript】innerTextとtextContent

Firefox では「innerText 」が使えません。

var element = document.getElementById("id_name");
// IEの場合
element.innerText = "IEです";
// Firefoxの場合
element.textContent = "Mozillaです";

Firefox では「textContent」が同じ役目をします。


var element = document.getElementById("id_name");
var text = element.innerText || element.textContent;
alert(text);

ラベル:


This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google