@blog.justoneplanet.info

日々勉強

プログラム初心者の超簡単なPHP

■前置き

  • これからPHPを始めようかなと思っている人むけです
  • 基本的にPHPでやる意味はない
  • HTMLでイイじゃんとかツッコミは御法度
  • 下記ソースはフリーですが自己責任でご利用ください。
  • ソースコードのダブルクォーテーションが全角になってる箇所がありますが基本的に半角に直して下さい。(すいません、どうもシステム上、変換されてしまうらしい)

■PHPソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<title>九九表</title>
<style type="text/css">
table td,
table th {
    width:2em;
    text-align:right;
    border:1px solid black;
}
table {
    border-collapse:collapse;
}
</style>
</head>
<body>
<h4>普通に書いてみると...</h4>
<table>
<?php
for($i=1; $i<10; $i++){
    print('<tr>');
    for($h=1; $h<10; $h++){
        print('<td>' . $i*$h . "</td>\n");
    }
    print('</tr>');
}
?>
</table>
<h4>発展させると…</h4>
<table>
<?php
for($i=1; $i<10; $i++){
    print('<tr>');
    for($h=1; $h<10; $h++){
        if($h == 1 || $i == 1){
            print('<th style="background-color:pink;">' . $i*$h . "</th>\n");
        }
        else{
            print('<td>' . $i*$h . "</td>\n");
        }
    }
    print('</tr>');
}
?>
</table>
</body>
</html>

■画面表示

普通に書いてみると…

※仕様上、多少変更してます。

1 2 3 4 5 6 7 8 9
2 4 6 8 10 12 14 16 18
3 6 9 12 15 18 21 24 27
4 8 12 16 20 24 28 32 36
5 10 15 20 25 30 35 40 45
6 12 18 24 30 36 42 48 54
7 14 21 28 35 42 49 56 63
8 16 24 32 40 48 56 64 72
9 18 27 36 45 54 63 72 81
発展させると…
1 2 3 4 5 6 7 8 9
2 4 6 8 10 12 14 16 18
3 6 9 12 15 18 21 24 27
4 8 12 16 20 24 28 32 36
5 10 15 20 25 30 35 40 45
6 12 18 24 30 36 42 48 54
7 14 21 28 35 42 49 56 63
8 16 24 32 40 48 56 64 72
9 18 27 36 45 54 63 72 81

■生成されるHTMLソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<title>九九表</title>
<style type="text/css">
table td,
table th {
    width:2em;
    text-align:right;
    border:1px solid black;
}
table {
    border-collapse:collapse;
}
</style>
</head>
<body>
<h4>普通に書いてみると...</h4>
<table>
<tr><td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr><tr><td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
<td>14</td>
<td>16</td>
<td>18</td>
</tr><tr><td>3</td>
<td>6</td>
<td>9</td>
<td>12</td>
<td>15</td>
<td>18</td>
<td>21</td>
<td>24</td>
<td>27</td>
</tr><tr><td>4</td>
<td>8</td>
<td>12</td>
<td>16</td>
<td>20</td>
<td>24</td>
<td>28</td>
<td>32</td>
<td>36</td>
</tr><tr><td>5</td>
<td>10</td>
<td>15</td>
<td>20</td>
<td>25</td>
<td>30</td>
<td>35</td>
<td>40</td>
<td>45</td>
</tr><tr><td>6</td>
<td>12</td>
<td>18</td>
<td>24</td>
<td>30</td>
<td>36</td>
<td>42</td>
<td>48</td>
<td>54</td>
</tr><tr><td>7</td>
<td>14</td>
<td>21</td>
<td>28</td>
<td>35</td>
<td>42</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr><tr><td>8</td>
<td>16</td>
<td>24</td>
<td>32</td>
<td>40</td>
<td>48</td>
<td>56</td>
<td>64</td>
<td>72</td>
</tr><tr><td>9</td>
<td>18</td>
<td>27</td>
<td>36</td>
<td>45</td>
<td>54</td>
<td>63</td>
<td>72</td>
<td>81</td>
</tr></table>
<h4>発展させると...</h4>
<table>
<tr><th style="background-color:pink;">1</th>
<th style="background-color:pink;">2</th>
<th style="background-color:pink;">3</th>
<th style="background-color:pink;">4</th>
<th style="background-color:pink;">5</th>
<th style="background-color:pink;">6</th>
<th style="background-color:pink;">7</th>
<th style="background-color:pink;">8</th>
<th style="background-color:pink;">9</th>
</tr><tr><th style="background-color:pink;">2</th>
<td>4</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
<td>14</td>
<td>16</td>
<td>18</td>
</tr><tr><th style="background-color:pink;">3</th>
<td>6</td>
<td>9</td>
<td>12</td>
<td>15</td>
<td>18</td>
<td>21</td>
<td>24</td>
<td>27</td>
</tr><tr><th style="background-color:pink;">4</th>
<td>8</td>
<td>12</td>
<td>16</td>
<td>20</td>
<td>24</td>
<td>28</td>
<td>32</td>
<td>36</td>
</tr><tr><th style="background-color:pink;">5</th>
<td>10</td>
<td>15</td>
<td>20</td>
<td>25</td>
<td>30</td>
<td>35</td>
<td>40</td>
<td>45</td>
</tr><tr><th style="background-color:pink;">6</th>
<td>12</td>
<td>18</td>
<td>24</td>
<td>30</td>
<td>36</td>
<td>42</td>
<td>48</td>
<td>54</td>
</tr><tr><th style="background-color:pink;">7</th>
<td>14</td>
<td>21</td>
<td>28</td>
<td>35</td>
<td>42</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr><tr><th style="background-color:pink;">8</th>
<td>16</td>
<td>24</td>
<td>32</td>
<td>40</td>
<td>48</td>
<td>56</td>
<td>64</td>
<td>72</td>
</tr><tr><th style="background-color:pink;">9</th>
<td>18</td>
<td>27</td>
<td>36</td>
<td>45</td>
<td>54</td>
<td>63</td>
<td>72</td>
<td>81</td>
</tr></table>
</body>
</html>

■一言

下の方は$hもしくは$iが一定条件の時に違うタグ、スタイルが適用されるようになっている。

Ajaxのサンプル

■まぁタイトルの通りAjaxのサンプルです

  • この記事で実際に使用しているスクリプトと記事内に記述しているスクリプトは便宜上、若干異なります。
  • Ajaxですが今回は特にXMLを使用してません。
  • ユーザー入力に依存したアプリを作る際は、セキュリティホールSQLインジェクションクロスサイトスクリプティング等)に十分に注意してください。

■サンプル

ここにリクエスト結果が表示されます

■サンプルソース

var methodType = "POST";//ここにはPOSTかGETを入れましょう
var requestFileName = "";//ここはリクエストするファイルのパスを!
function createHttpRequest(){
    if(window.XMLHttpRequest){return new XMLHttpRequest();}
        else{
        if(window.ActiveXObject){
            try{return new ActiveXObject("Msxml2.XMLHTTP");}
            catch(e){
                try{return new ActiveXObject("Microsoft.XMLHTTP")}
                catch(e2){return null;}
            }
        }
        else{return null;}
    }
}
function test(){
    var request = createHttpRequest();
    request.open(methodType ,requestFileName );
    request.setRequestHeader("content-type","application/x-www-form-urlencoded; charset=UTF-8");
    request.send("");
    request.onreadystatechange = function(){
        if(request.readyState == 4 && request.status == 200){
            var txt = request.responseText;
            document.getElementById("area").innerHTML = txt;
        }
    }
}

■注意点

  • 文字コードはUTF-8をお勧めします。
  • ドメインが異なるサーバーとの通信は行えません。
  • 無駄にグローバルなのは許してください。
  • PHP、CGIにリクエストする場合requestFileNameに指定してください
  • 上記、GETの場合は?(クエリ)をつけてあげてね
  • POSTの場合はsend(“”);のところにデーターをクエリ形式で送信してあげましょう。
  • レスポンスの中にタグが含まれていればページにも反映されます。(悪用される危険がある:クロスサイトスクリプティング)
  • GETにする場合はキャッシュが残り正しく反映されない可能性もあるため、POSTを使う、if-Modified-Sinceヘッダをつける、クエリに日時を加えるなどして下さい

■createHttpRequest改良版

ブラウザ判定は1回だけ実行させれば良い。

var createXHR = (function(){
	if(window.XMLHttpRequest){
		return function(){
			return new XMLHttpRequest();
		}
	}
	else if(window.ActiveXObject){
		return function(){
			try {
				return new ActiveXObject("Msxml2.XMLHTTP");
			} 
			catch (e) {
				try {
					return new ActiveXObject("Microsoft.XMLHTTP")
				} 
				catch (e2) {
					return null;
				}
			}
		}
	}
	else{
		return function(){
			return null;
		}
	}
})();

PerlでクロスドメインAjax用のプロキシ

■前置き

  • 自己責任でソースをご利用ください
  • 正直、美しくない部分はある↓
  • 結構適当なのでサンプルソース程度に見てください

■ソースコード

#!/usr/bin/perl
#ここで送信データーを読み取る
&getFormData();
%query;
$query{'par1'} = 'ここにリクエスト用のパラメーター1';
$query{'par2'} = 'ここにリクエスト用のパラメーター2';
$query{'par3'} = 'ここにリクエスト用のパラメーター3';
$query{'par4'} = 'ここにリクエスト用のパラメーター4';
#下記はHTML上からname="data"ハッシュキーを送信させ
#上記に該当するときは他サーバーとの通信を行う。
#それ以外はエラー処理。
if($query{$FORM{'data'}}){
    &socketCom($query{$FORM{'data'}});
}
else{
    &errorPrint();
}
#=================================
#下記、他のサーバーとソケット通信するためのサブルーチン
sub socketCom{
    my($addr, $name);
    #下記、ホスト名を$addrへ
    $addr = (gethostbyname('api.gnavi.co.jp'));
    $name = pack("S n a4 x8″, 2, 80, $addr);
    #下記、ソケットの生成。
    #引数はソケットハンドラ、ソケットのドメイン、タイプ、プロトコル
    socket(GNAVIHANDLE, 2, 1, 0);
    #下記、接続。引数はハンドラ、IPアドレスとポート番号
    connect(GNAVIHANDLE, $name);
    binmode(GNAVIHANDLE);#バイナリモード
    select(GNAVIHANDLE);#出力先デフォルトハンドルの設定
    $| = 1;#バッファリングの設定(0以外でバッファリングを無効に)
    select(stdout);#出力先を初期の状態に
    #下記で接続先にリクエストを送信
    print GNAVIHANDLE "GET http://api.gnavi.co.jp/ver1/$_[0] HTTP1.0\r\n\r\n";
    while(<GNAVIHANDLE>){
        #APIから返ってくるXMLをクライアントに返す時はこんな感じ
        #<?xml以降をクライアントに送信
        if($_ =~/<?xml/){$boolean = 1;}
        if($boolean){print $_;}#前行の処理が実行されるとprintが実行される
    }
    close(GNAVIHANDLE);#soketをclose
}
#————–
sub getFormData{
    my($query, $pair);
    if($ENV{'REQUEST_METHOD'} eq 'POST'){
        read(STDIN, $query, $ENV{'CONTENT_LENGTH'});;
    }else{$query = $ENV{'QUERY_STRING'};}
    foreach $pair(split(/&/,$query)){
        my($key, $value) = split(/=/, $pair);
        $value =~ tr/+/ /;
        $FORM{$key} = $value;
    }
}
#————–
sub errorPrint{
    #エラー用処理の記述
}
#--------------

■注意点

  • http://api.gnavi.co.jp/ver1/はぐるナビのAPIのアドレス
  • 悪用される危険があるため、サーバーの接続先URLに任意の文字列が入力されてしまうソースは決して書かないで下さい
  • http://api.gnavi.co.jp/ver1/$_[0]部分にクライアント側から任意の文字列を入れられると危険
  • ソースの解説はコメント形式で上記に載せてみました(#以降~行末がコメント)

PHPでブラウザからメールを送る

■はじめに

  • 宜しければ質問や改善案などはコメントに書き込んでください
  • 自己責任でソースをご利用ください(攻撃者を想定してません)

■ファイル名:mail_input.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ご意見</title>
</head>
<body>
<form action="sendmail.php" method="post">
<input type="hidden" name="owner_address" value="(input your email address!)" />
<input type="hidden" name="title" value="testmail" />
<input type="hidden" name="redirectpath" value="<?php print($_SERVER['PHP_SELF']);?>" />
名前:<input type="text" name="name" />
Email:<input type="text" name="email" />
Text:<input type="text" name="msg" />
<input type="submit" value="send" />
</form>
</body>
</html>

■上記ファイルの解説

  • inputタグのaction属性でフォームの情報の送信先(情報を処理するファイル)を指定
  • 属性owner_addressでメールの送信先を隠しフォームとして記述。(必ず必要なわけではなく、むしろ公開時にスパムの温床となりかねない)
  • value=”testmail”でメールとして送信された場合の件名を隠しデーターとして保持
  • name=”redirectpath” value=”<?php print($_SERVER[‘PHP_SELF’]);?>”メール送信データ処理が(sendmail.php)終わった後のリダイレクト先を明示。(不要)

■ファイル名:sendmail.php

<?php
$header_info = "\nContent-Type: text/plain;charset=ISO-2022-JP\nX-Mailer: PHP/" . phpversion();
$body = "「」「」" . $POST['title'] . "「」「」\n\n";
foreach($_POST as $key => $value){
	if(!strstr($key, "_")){
		$body .= "[". $key . "]" . $value . "\r\n";
	}
}
mb_send_mail(
	$_POST['owner_address'],
	$_POST['subject'],
	$body,
	$header_info
);
header("Location: " . $_POST['redirectpath']);
?>
<html>
<head>
</head>
<body>
</body>
</html>

■上記ファイルの解説

  • $header_infoに文字列としてメールヘッダーを代入
  • $bodyにフォームから送信されたtitleを代入している
  • その後$bodyに文字列として[送信されてきたformのname]とその値をペアで代入している。foreach($_POST as $key=>$value)でブラウザから送信されてきた(POST)データ(ハッシュ構造)をハッシュのキー($key)ごとに繰り返し処理をしている。$valueはキーに対応したデータである。たとえばowner_addressがキーで(input your email address!)がその中身といった具合かな。
  • ちなみに\r\nは(Windowsクライアント用)改行コードで、これがあると文字として出力した場合改行される(ただし<br />と同義として捉えてはいけない)
  • mb_send_mail(送信先,タイトル,本文[,追加ヘッダー][,追加パラメーター]);となる。追加ヘッダーにはX-Mailer:やCc:を\r\nで区切って指定する
  • header();はレスポンスヘッダーにLocation $_POST[‘redirectpath’]をセットし送信処理後の飛び先を指定している。

超初心者のWordPress改造

■前置き

自己責任において行ってください

■本日の目的

  • サイドバーに手を加えよう!

■必要なスキル

  • HTMLを書いた事がある
  • PHPという単語の意味を知っている。
  • 「がんばり」

■編集ファイル(sidebar.php)

下記、対象ファイルのソースコード
デフォルトの場合はwp-content/themes/EasyAll/のファイルに手を加えます。

<ul>
<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<li id="calendar"><h2><?php _e('Calendar'); ?></h2>
<?php get_calendar(); ?>
</li>
<li id="search">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<div>
<input type="text" name="s" id="s" size="15" /> <input type="submit" value="<?php _e('Search'); ?>" />
</div>
</form>
</li>
<?php get_links_list(); ?>
<li><h2><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly&show_post_count=true'); ?>
</ul>
</li>
<li><h2><?php _e('Categories'); ?></h2>
<ul>
<?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','') ?>
</ul>
</li>
<li id="meta"><h2><?php _e('Meta'); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>"><?php _e('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>'); ?></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><?php echo sprintf(__('<a href="http://wordpress.org/" title="%s">WordPress</a>'), __("Powered by WordPress, state-of-the-art semantic personal publishing platform.")); ?></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
<!-- end sidebar -->

■チャレンジ!

カレンダーが要らないという方!

<li id="calendar"><h2><?php _e('Calendar'); ?></h2>
<?php get_calendar(); ?>
</li>

を削除しましょう。

同様に検索窓が要らないという方

<li>

から

</li>

を削除すればイイ。ここは<li>タグで各パーツが区切られているわけですな。例えば、

<div id="techno" class="mb1em">
<a href="http://www.technorati.jp/faves?sub=addfavbtn&add=http://blog.justoneplanet.info/"><img src="http://static.technorati.jp/pix/fave/btn-fave2.png" alt="" /></a>
</div>

を<ul>タグの前に挿入すればテクノラティのお気に入りボタンが挿入できるわけです。

■応用すると

左のようにGoogle Adsenceを挿入したりできるわけです。

■注意点

<php?から?>まではPHPスクリプトが書いてある部分なので多少HTMLとは話が違ってきます。慎重な方、心臓が弱い方は手を加えない方が宜しいですな。

■その他

まぁ気長に頑張りましょう。

PHPでファイルをアップロードする

■はじめに

  • 宜しければ質問や改善案などはコメントに書き込んでください
  • 自己責任でソースをご利用ください

■ファイル名:upload.php

つうかこっちは別にHTMLファイルでもOK!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>アップロード</title>
<style type="text/css">
h1 {
    color:#aaaaaa;
}
</style>
</head>
<body>
<h1>アップロード</h1>
<form action="upload_save.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="max_file_size" value="1000000" />
<input type="file" name="upload_file" size="70" /><br />
(上書き禁止)
<input type="checkbox" name="forbidden" value="1" checked="checked" />
<input type="submit" value="アップロード" />
</form>
</body>
</html>

■ファイル名:「upload_save.php」

<?php
$error_flag = FALSE;
$name = "./doc/" . $_FILES['upload_file']['name'];
if(file_exists($name) == TRUE && $_POST['forbidden'] == 1){
    $error_flag = TRUE;
    $error_msg = "同名のファイルが存在します。";
}
elseif($_FILES['upload_file']['error'] != UPLOAD_ERR_OK){
    $error_flag = TRUE;
    switch($_FILES['upload_file']['error']){
        case UPLOAD_ERR_INI_SIZE : $error_msg = "php.iniのupload_max_filesize制限を超えています";
            break;
        case UPLOAD_ERR_FORM_SIZE : $error_msg = "HTMLのMAX_FILE_SIZE制限を超えています";
            break;
        case UPLOAD_ERR_PARTIAL : $error_msg = "ファイルが一部しかアップロードされていません";
            break;
        case UPLOAD_ERR_NO_FILE : $error_msg = "ファイルはアップロードされませんでした";
            break;
        default : $error_msg = "不明なエラーです";
        break;
    }
}
if($error_flag){
    print ("<div style='color:red'>" . $error_msg . "</div>");
}
else{
    move_uploaded_file($_FILES['upload_file']['tmp_name'], $name);
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>ファイルのアップロード結果</title>
<style type="text/css">
h1 {
    color:#aaaaaa;
}
</style>
</head>
<body>
<h1>ファイルのアップロード結果</h1>
<table border="1">
<tr>
<th>ファイル</th>
<th>サイズ</th>
<th>最終アクセス日</th>
<th>最終更新日</th>
</tr>
<?php
clearstatcache();
$o_dir = opendir("./doc/");
while($file = readdir($o_dir)){
    if($file != "." && $file != ".."){
?>
<tr>
<td><a href="./doc/<?php print($file); ?>"><?php print($file); ?></a></td>
<td><?php print(round(filesize("./doc/" . $file)/1024)); ?>KB</td>
<td><?php print(date("Y/m/d H:i:s", fileatime("./doc/" . $file))); ?></td>
<td><?php print(date("Y/m/d H:i:s", filemtime("./doc/" . $file))); ?></td>
</tr>
<?php
}
}
closedir($o_dir);
?>
</table>
</body>
</html>

■ざっくりと解説

  • file_exist(パスとファイル名)で指定されたファイルがある時、TRUEを返し、無ければFALSE
  • $FILES[‘要素’][‘情報の種類’]でアップロードされたファイルの情報を取得
  • move_uploaded_file($_FILES[‘upload_file’][‘tmp_name’], $name)関数でサーバー上のディレクトリに保存。この記載はサーバー上に一時的に保存されたファイルのファイル名を変数$nameという名前(ディレクトリに)保存するという事である
  • $FILES[‘要素’][‘error’]に格納されるのはいずれも定数でUPLOAD_ERR_OK(アップロード成功)、UPLOAD_ERR_INI_SIZE(php設定ファイル上の最大アップロード容量超過)、UPLOAD_ERR_FORM_SIZE(HTMLのフォームで指定した容量を超過)、UOLOAD_ERR_PARTIAL(ファイルが途切れている)、UPLOAD_ERR_NO_FILE(ファイルが存在しない)の5種類!?
  • 上記を利用しswitch文で条件分岐、的確なエラーメッセージを格納
  • clearstatcache()関数でサーバー上のファイルシステムに関するキャッシュを消去する。アップロードしたファイルについての詳細を次に表示するため
  • opendir(フォルダのパス)で指定したフォルダを開きディレクトリハンドラ(ディレクトリを処理する為のもの!?)を返す
  • readdir(ディレクトリハンドラ)でファイル名を返す。「..」は親ディレクトリ、「.」はカレント(現在の)ディレクトリ
  • closedir(ディレクトリハンドラ)で指定のディレクトリを閉じる

背景が表示されない(親BOXからはみ出す)!?

さてCSS初心者ならば一度は経験するこの現象。。。
floatさせた内側のボックスが外側のボックスからはみ出してしまうというものだ。仕様的にははみ出すのが正しい。この仕様が便利かは微妙だが・・・

■こう表示したい(チャント親ボックスに含まれている)

left

right

■失敗例(親ボックスが潰れ、子ボックスがはみ出す:背景も適用されない)

left

right

■解決策(HTMLソース)

<div class="clearfix" style="border: 1px solid black; padding: 1px">
<div style="border: 1px solid black; margin: 0pt; float: left; background-color: red; width: 45%">left</div>
<div style="border: 1px solid black; margin: 0pt; float: right; background-color: blue; width: 45%">right</div>
</div>

■CSSソース

.clearfix:after{
    content:".";
    display:block;
    height:0px;
    clear:both;
    visibility:hidden;
}
.clearfix{
    display:inline-block;
}
/*Hides from IE-mac\*/
*html .clearfix{
    height:1%;
}
.clearfix{
    display:block;
}
/*End hide from IE-mac*/

■解説

  • HTMLソースにはクラスにclearfixを付け足す
  • CSSソースの.clearfix:afterで見えない要素を.clearfix後に付け足しボックスを拡張する(ただしIEはこの記述を適用できない)
  • IE7用にdisplay:inline-blockを付け足す
  • IE6以前用にdisplay:block;を付け足す
  • もっとも一般的なCSSハックである!?

ちなみに上記\(バックスラッシュ)は半角の¥マークのことです。

■注意点

clearfix(クリアーフィックス)とはハックのテクニック名なので本来は、例えば親BOXに(class=”setsumeibun”)としたらCSSのセレクタのclearfix部分をsetsumeibunで置換してあげるのがよい。何故ならばHTMLは文章の意味をマークアップする言語でありデザイン上のclearfixというものを挿入するのは多少矛盾する。したがって、もし仮に同じハックが必要な要素があるなら、CSSのセレクタに追記してあげるやり方の方が教科書に書けるような正しい記述といえるかもしれない。

■こんな感じ

.setsumeibun:after{
    content:".";
    display:block;
    height:0px;
    clear:both;
    visibility:hidden;
}
.setsumeibun{
    display:inline-block;
}
/*Hides from IE-mac\*/
*html .setsumeibun{
    height:1%;
}
.setsumeibun{
    display:block;
}
/*End hide from IE-mac*/

Google Maps API を使ってみよう(1)

■APIデビューと共に皆とやり方を共有!

  1. Google Maps APIのサイトに行く
  2. 自分のサイトのURLを入力しAPIキーをゲット!
  3. Googleのアカウントを持ってなかったら作ってね。
  4. APIキーとサンプルHTMLが表示される。
  5. とりあえずコピー&ペーストしてHTMLを作ってアップしてみる。
  6. キーはチャント保存してね。

■下記がサンプル

どうでしょう?基本的なブラウザだったら表示できてるはず!

■サンプルソースコード

<script src="http://maps.google.com/maps?file=api&v=2&key=((your key!))" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load(){
    if(GBrowserIsCompatible()){
        var map = new GMap2(document.getElementById("map20070719"));
        map.setCenter(new GLatLng(35.633477,139.765449),14);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
    }
}
load();
//]]>
</script>

■簡単な解説

  • if(GBrowserIsCompatible())でGoogleMapが使えるブラウザの絞ってます
  • elseを使えば使えない人用の表示をする事も出来るらしい
  • map.setCenter(new GLatLng(35.633477,139.765449),14)で初期表示の座標を設定
  • map.addControl(new GLargeMapControl())で左側のマップコントロールを表示
  • map.addControl(new GMapTypeControl())で右上の地図のタイプコントロールを表示

■補足

  • 便宜、仕様上ソースを多少変更しております
  • 上記ソースは全要素が読み込まれた後(</body>と</html>)の間に貼り付けてみて下さい。
  • head内に記述する場合はbodyにonload=”load();”と記述し、スクリプト内のload();は消してください。
  • 上記ソースに関数GUnloadをonunloadで実行するようにしてください

pingサーバー一覧(Blog-SEO対策必須)全43個所

  • http://rpc.pingomatic.com/
  • http://rpc.technorati.jp/rpc/ping
  • http://rpc.reader.livedoor.com/ping
  • http://ping.rss.drecom.jp/
  • http://ping.ask.jp/xmlrpc.m
  • http://api.my.yahoo.co.jp/rss/ping?u=ブログのRSSURL
  • http://ping.fc2.com
  • http://ping.namaan.net/rpc/
  • http://www.blogpeople.net/servlet/weblogUpdates
  • http://bulkfeeds.net/rpc
  • http://blog.goo.ne.jp/XMLRPC
  • http://ping.cocolog-nifty.com/xmlrpc
  • http://ping.blogmura.jp/rpc/
  • http://ping.amagle.com/
  • http://ping.gpost.info/xmlrpc
  • http://blogstyle.jp/xmlrpc/
  • http://jugem.jp/?mode=NEWENTRY
  • http://www.blogoole.com/ping/
  • http://www.blogoon.net/ping/
  • http://blogdb.jp/xmlrpc
  • http://coreblog.org/ping/
  • http://blog.with2.net/ping.php/
  • http://blog-search.net/up.php
  • http://ping.bloggers.jp/rpc/
  • http://ping.myblog.jp
  • http://ping.exblog.jp/xmlrpc
  • http://api.my.yahoo.com/RPC2
  • http://ping.blo.gs/
  • http://ping.rootblog.com/rpc.php
  • http://rpc.technorati.com/rpc/ping
  • http://rpc.weblogs.com/RPC2
  • http://rpc.blogrolling.com/pinger/
  • http://rpc.atblogs.com/
  • http://rpc.bloghackers.net/newsoku
  • http://rpc.weblogs.com/
  • http://serennz.cool.ne.jp/sblog/rep
  • http://tb.threetree.jp/
  • http://bitacoras.net/ping/
  • http://ping.weblogs.se/
  • http://xmlrpc.blogg.de/
  • http://ping.weblogalot.com/rpc.php
  • http://serennz.cool.ne.jp/sblog/rep.cgi
  • http://www.weblogues.com/RPC/

重複チェックしましたが間違ってたらゴメンナサイ。。。

Administratorのパスワード?(WindowsXP Home Edition)

■最近セキュリティソフトを入れ替えた

Nortonのごくごく普通の製品なんだけどコンピューター設定の甘いところ(簡単なPasswordとか)を探してくれる。

■チェックしてみた

「Administratorのパスワードが弱いか設定されてません」と表示された

■最初の対処

コントロールパネル>ユーザーアカウントで設定しようとした

■結果(失敗)

Administratorというユーザーが見つからない(不健全な使い方もしているコンピューターなので凄く不安!)

■正しい対処

  1. 管理者権限でログイン
  2. 全てのプログラム>アクセサリ>コマンドプロンプト
  3. 「net user Administrator *」と入力
  4. パスワードを入力する
  5. 確認としてもう一度入力をする

まぁこれで終了です

もし分からない場合はこちら