<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
<title>スイナシア(Tips)</title>
<link>http://suin.asia/tag/Tips</link>
<description>「Tips」なエントリー</description>
<language>ja</language>
<lastBuildDate>Sat, 31 Jul 2010 19:10:17 +0900</lastBuildDate>
<docs>http://backend.userland.com/rss/</docs>
<category>Tips</category>
<item>
<title>Concrete5の管理者パスワードを忘れたとき再設定する方法</title>
<link>http://suin.asia/2010/03/15/how_to_recover_admin_password_at_concrete5</link>
<description><![CDATA[<p>XOOPS以外のCMSはあまり使ってないですが、CMSとして統一感・完成度が高いConcrete5を試してみました。MAMPで構築したローカル環境にConcrete5をインストールしたのですが、うっかり管理者のパスワードを忘れてしまいました。</p>
<p>通常、パスワードを忘れた場合、メールでリマインドできるようです。が、あいにくローカル環境ということもあり、メール送信が動かない…。</p>
<p>もしや、データベースに生パスワードが保存されているのでは？と思いデータベースを見てみました。すると、UsersテーブルにuPasswordというカラムがあるじゃないですか。しめたと思って、中身を見てみたらばっちり暗号化されていました。さすがに、最近のCMSはパスワードを生で保存しておくなんてことはしないようです。</p>
<p>PHPをやっている人ならこの暗号化は、md5()だとわかったので、<code>md5('admin')</code>を実行して、それをuPasswordに保存してadmin@adminでログインを試みました。それでも、依然としてログインできません。パスワードが間違っているといいます。</p>
<p>この手の物は、たいていパスワードにprefixを付けている可能性があるので、ソースをおってみると、案の定<code>PASSWORD_SALT</code>が付け加えられたmd5()されてました。</p>
<h3>謎がすべてとけたところで、再設定方法</h3>
<ol>
<li>/Applications/MAMP/htdocs/concrete5/config/site.phpを開く。</li>
<li><pre name="code" class="php">
&lt;?php 
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', 'root');
define('DB_DATABASE', 'concrete5');
define('BASE_URL', 'http://localhost');
define('DIR_REL', '/concrete5');
define('PASSWORD_SALT', 'BtL4OCqEYan5yZrDVHUhKcFbNzmp3Q1A7uToifeWMwSv8Xsx0jkG2l6J9RPIg');
?&gt;
</pre>
この中のPASSWORD_SALTの値をコピー。この例だと、BtL...Plgの部分です。</li>
<li>/Applications/MAMP/htdocs/pass.phpを作成。</li>
<li>
<pre name="code" class="php">
&lt;?php

$salt = 'BtL4OCqEYan5yZrDVHUhKcFbNzmp3Q1A7uToifeWMwSv8Xsx0jkG2l6J9RPIg';
$password = 'admin';
echo md5($password . ':' . $salt);

?&gt;
</pre>
pass.phpの中身を上のように書く。$salt = '';の部分はsite.phpでコピーした値を書く。ここでは、「admin」をパスワードとして設定します。adminが嫌なら他のものに変えてOK。</li>
<li>ブラウザでpass.phpにアクセスする。</li>
<li>表示された32文字「65f7ed3aff95ce2394d6458c442eb3b0」などをコピーする。</li>
<li>phpMyAdminで、Concrete5のデータベースを開く。</li>
<li>SQLで下のクエリーを実行する。65f...3b0の部分は先程ブラウザでコピーしたものに変えてください。
<pre name="code" class="sql">UPDATE  `Users` SET  `uPassword` =  '65f7ed3aff95ce2394d6458c442eb3b0' WHERE  `uID` =1;</pre></li>
<li>Concrete5に戻ってログインしてみる。</li>
<li>pass.phpを削除する。</li>
</ul>
<p>パスなどは適宜読みかえてください。</p>]]></description>
<pubDate>Mon, 15 Mar 2010 23:13:51 +0900</pubDate>
<guid>http://suin.asia/2010/03/15/how_to_recover_admin_password_at_concrete5</guid>
<category domain="http://suin.asia/tag/Concrete5">Concrete5</category>
<category domain="http://suin.asia/tag/Tips">Tips</category>
</item>
<item>
<title>jQueryの世界で最も単純なプラグインの作り方サンプル</title>
<link>http://suin.asia/2010/02/04/the_simplest_plugin_for_jquery</link>
<description><![CDATA[<p>jQueryは要素セレクターやクロスブラウザ対応が優れたjavascriptのライブラリで、prototype.jsと並んで広く使われています。そのjQueryでは、独自に自前の関数をプラグインという形で作ることができます。jQueryプラグインの作り方は検索すれば山ほど出てきますが、その第一歩となるプラグインの基本的な書き方が見つからなかったので記事にしておこうと思います。</p>
<p>次のプラグインは、単に文字色を赤くするだけのものです。<code>myplugin</code>がプラグイン名です。<code>$(this).css('color', 'red');</code>の部分以外がプラグインの骨組みとなり、この部分だけ差し替えれば、全く別のプラグインを作ることができます。</p>
<pre name="code" class="js">
(function($){
	$.fn.myplugin = function() {
		return this.each(function() {
			$(this).css('color', 'red');
		});
	};
})(jQuery);
</pre>
<p>このプラグインの<a href="http://suin.org/jquery/jquery_the_simplest_plugin.html">動作デモ</a></p>]]></description>
<pubDate>Thu, 04 Feb 2010 08:17:00 +0900</pubDate>
<guid>http://suin.asia/2010/02/04/the_simplest_plugin_for_jquery</guid>
<category domain="http://suin.asia/tag/jQuery">jQuery</category>
<category domain="http://suin.asia/tag/javascript">javascript</category>
<category domain="http://suin.asia/tag/Tips">Tips</category>
</item>
<item>
<title>XOOPS 一般設定しかない管理画面は一般設定に転送する</title>
<link>http://suin.asia/2010/01/28/xoops_redirect_to_preference</link>
<description><![CDATA[<p>モジュールを作っていると、管理画面に一般設定しかないというケースがあります。この場合、管理画面のトップ(/admin/index.php)は空白のページになってしまい、なんとも不格好です。見た目もそうですが、操作性をあげるためにも、管理画面のトップが空白の場合は一般設定に転送してあげましょう。</p>

<p>そして下がそのコード。</p>

<pre name="code" class="php">
require "../../../mainfile.php";

$mid = $xoopsModule->mid();

if ( defined('XOOPS_CUBE_LEGACY') )
{
	$url = sprintf('%s/modules/legacy/admin/index.php?action=PreferenceEdit&confmod_id=%u', XOOPS_URL, $mid);
}
else
{
	$url = sprintf('%s/modules/system/admin.php?fct=preferences&op=showmod&mod=%u', XOOPS_URL, $mid);
}

header('Location: '.$url);
</pre>]]></description>
<pubDate>Thu, 28 Jan 2010 00:54:23 +0900</pubDate>
<guid>http://suin.asia/2010/01/28/xoops_redirect_to_preference</guid>
<category domain="http://suin.asia/tag/XOOPS">XOOPS</category>
<category domain="http://suin.asia/tag/Tips">Tips</category>
<category domain="http://suin.asia/tag/PHP">PHP</category>
</item>
<item>
<title>XOOPS Cube + preload でカスタムブロックを作成する方法</title>
<link>http://suin.asia/2010/01/25/preload_block</link>
<description><![CDATA[<p>カスタムブロックは、通常legacyモジュールやaltsysで作ることができます。ここでは、プリロードでカスタムブロックを作ることを紹介します。</p>

<p>その前に、ここで紹介するTipsは、管理画面でカスタムブロックを作るより、はるかに回りくどくPHPの知識が必要な点を注意しておきます。なので、特殊な機能や要件を必要としない限り、カスタムブロックは管理画面で作るべきです。</p>

<p>まず、XOOPS Cubeのプリロードでカスタムブロックを作るメリットはいくつかあります。</p>

<ul>
<li>ファイルとして配布できる</li>
<li>ファイルなので、不要になれば削除するだけ</li>
<li>PHPなどの複雑なロジックが書きやすい（通常のカスタムブロックでもPHPは使えます）</li>
</ul>

<p>特にこの中でも、ファイルとして扱えるメリットは大きいです。たとえば、開発環境で一定の変数を出力したりとデバッグ用途にブロックをプリロードで実装します。あとは、公開するときにプリロードを削除するだけで、データベースを汚したりすることは一切ありません。管理画面で操作するブロックだと、ついつい消し忘れ・消し損ないなんてこともありますが、プリロードだとファイルを確実に削除すれば、消し損なうこともありません。</p>

<a href="http://dl.dropbox.com/u/949822/Downloads/PreloadBlock.class.php" class="download">ダウンロード</a>
<p>次に、プリロードのソースを紹介します。16行目の$indexが、ブロックを表示する位置になります。l, r, cl, cc, crの順に、左・右・中央左・中央中・中央右を意味します。</p>

<p>18行目から22行目はブロックの表示に関する設定です。nameはブロック名で、アルファベット英数ですきな名前を指定します。titleはブロックの題目で、ブロックの上部に表示されます。contentはブロックの内容で、HTMLなどで書くことができます。weightはブロックの並び順で、数値が小さいほど上に、数値が多きほど下にブロックが表示されます。</p>

<pre name="code" class="php">
&lt;?php
/**
 * A simple description for this script
 *
 * PHP Version 5.2.4 or Upper version
 *
 * @package    PreloadBlock
 * @author     Hidehito NOZAWA aka Suin &lt;http://suin.asia/&gt;
 * @copyright  2009 Hidehito NOZAWA
 * @license    http://www.gnu.org/licenses/gpl-2.0.html GNU GPL v2.0
 *
 */

class PreloadBlock extends XCube_ActionFilter
{
	protected $index = 'l';
	protected $block = array(
		'id'      =&gt; -1,
		'name'    =&gt; 'preload_block',
		'title'   =&gt; 'プリロードブロック',
		'content' =&gt; '&lt;i&gt;ブロックの内容&lt;/i&gt;',
		'weight'  =&gt; -1, // 並び順
	);
	protected $indexes = array(
		'l' =&gt; 0,
		'r' =&gt; 1,
		'cl' =&gt; 3,
		'cr' =&gt; 4,
		'cc' =&gt; 5
	);
	protected $blocks = array(
		'l' =&gt; 'xoops_lblocks',
		'r' =&gt; 'xoops_rblocks',
		'cl' =&gt; 'xoops_clblocks',
		'cr' =&gt; 'xoops_crblocks',
		'cc' =&gt; 'xoops_ccblocks'
	);

	public function postFilter()
	{
		if ( $this-&gt;mController-&gt;_mStrategy-&gt;mStatusFlag != LEGACY_CONTROLLER_STATE_PUBLIC )
		{
			return;
		}

		$this-&gt;mRoot-&gt;mDelegateManager-&gt;add('Legacy_RenderSystem.BeginRender', array(&amp;$this, 'beginRender'));
		$this-&gt;mRoot-&gt;mContext-&gt;mAttributes['legacy_BlockShowFlags'][$this-&gt;indexes[$this-&gt;index]]  = true;
		$this-&gt;mRoot-&gt;mContext-&gt;mAttributes['legacy_BlockContents'][$this-&gt;indexes[$this-&gt;index]][] = $this-&gt;block;
	}

	protected function beginRender(&amp;$tpl)
	{
		if ( !empty($tpl-&gt;_tpl_vars['isFileTheme']) )
		{
			uasort($tpl-&gt;_tpl_vars[$this-&gt;blocks[$this-&gt;index]], array(&amp;$this, 'reOrder'));
		}
	}

	protected function reOrder($a, $b)
	{
		if ($a['weight'] == $b['weight'])
		{
			return 0;
		}
		return $a['weight'] &gt; $b['weight'] ? 1 : -1;
	}
}

?&gt;
</pre>

<p>なお、このプリロードはしゃのさんの<a href="http://petitoops.com/modules/chalog/?action=BlogView&id=392">nowプリロード</a>を参考にさせていただきました。</p>]]></description>
<pubDate>Mon, 25 Jan 2010 17:30:10 +0900</pubDate>
<guid>http://suin.asia/2010/01/25/preload_block</guid>
<category domain="http://suin.asia/tag/XOOPS">XOOPS</category>
<category domain="http://suin.asia/tag/%E3%83%97%E3%83%AA%E3%83%AD%E3%83%BC%E3%83%89">プリロード</category>
<category domain="http://suin.asia/tag/Tips">Tips</category>
</item>
<item>
<title>MacBook Air + VMware Fusion + Windows XP 実用範囲内</title>
<link>http://suin.asia/2009/11/29/macbook_vmware_windows_xp</link>
<description><![CDATA[<p>Windows 7発売で、Windows XPのCDが眠っている状況が出て来ると思う。
まだまだWindows XPは現役。眠らせておくのは勿体ない。
Macを持っている場合は、MacにWindows XP環境を完備しておくのもいいだろう。
Mac OS XでWindwos XPなどのOSを実行できるアプリにVMware Fusionというものがあるので、ここでは私がMacBook Airで使ってみた感想を書きたいと思う。</p>

<p class="photo">
<a href="http://picasaweb.google.co.jp/lh/photo/oStPRqdngph9nATkCCvPEA?feat=embedwebsite"><img src="http://lh4.ggpht.com/_dG0BBWAhWis/SxIYsaYc2zI/AAAAAAAAAuc/LRo5GtEdzHA/s400/%E3%83%94%E3%82%AF%E3%83%81%E3%83%A3%202.png" /></a>
</p>

<p>VMwareでWindows XPを使うのはどういう感じかというと、まるでWindows XPがMacのアプリの1つのように動かすというイメージだ。
したがって、次のような利点がある。</p>
<ul>
<li>MacとWindows XPを同時進行で使用できる。</li>
<li>コピー&ペーストができる。</li>
<li>ファイルの共有が簡単にできる。</li>
<li>MacでダウンロードしたファイルがWindowsでしか開けない場合もすぐに開くことができる。</li>
</ul>

<h3>スペック的に大丈夫か?</h3>

<p>気になるのはMacBook AirでVMwareが実用に堪えるかだ。
MacBook Airのスペックは次のとおりであるが、
同時に2つのOSを動かすには若干不安がのこる。</p>

<ul>
<li>プロセッサ : 1.6 GHz Intel Core 2 Duo</li>
<li>メモリ : 2 GB 1067 MHz DDR3</li>
<li>ハードディスク : 1.8 inch 80 GB</li>
</ul>

<h3>実際にVMwareにWindows XPを入れてみた感想</h3>

<p>MacBook Air + VMware Fusionを使い始めて半年くらいになる。
結論から言うと、VMware Fusion + Windows XPは実用範囲内である。
Office Word 2003を起動して文章を作成したり、
Internet Explorerでネットサーフィンする程度はまったく問題なかった。</p>

<p>しかし、次のような問題点は、一工夫必要だ。</p>

<ul>
<li>VMwareでWindows XPを再開するまでに20秒くらいかかる。(普通にWindowsを起動するよりはいいか)</li>
<li>Mac側で起動中のソフトが多いと、Windows XPも重くなる。</li>
</ul>

<p>Windows XPを再開するまでの時間を短縮するのは、あまり効果的な方法がないと思う。
Windowsをサスペンドするときに、不要なソフトは終了しておくなどすると、若干早くなる。</p>

<p>Mac側で起動中のソフトはできるだけ少なくすると、VMwareも軽く動作する。
私の場合、VMwareで長時間作業する場合は、一旦Macを再起動するようにしている。
起動直後にVMwareを実行すると、すいすいと動く。</p>

<p>余談だが、MacBook AirにはDVDドライブがないので、Windowsをインストールする際には外付けのDVDドライブが必要になる。</p>

<p>Macユーザの弱点は、まわりがWindowsユーザという点だと思う。
急にWindows環境が必要になることは しばしばある。
そんなときは、VMwareをインストールしておくと便利だ。</p>

<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_top&bc1=FFFFFF&IS2=1&nou=1&bg1=FFFFFF&fc1=333333&lc1=0088FF&t=suinyeze-22&o=9&p=8&l=as1&m=amazon&f=ifr&asins=B002CJM7RG" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_top&bc1=FFFFFF&IS2=1&nou=1&bg1=FFFFFF&fc1=333333&lc1=0088FF&t=suinyeze-22&o=9&p=8&l=as1&m=amazon&f=ifr&asins=B0012X30H4" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_top&bc1=FFFFFF&IS2=1&nou=1&bg1=FFFFFF&fc1=333333&lc1=0088FF&t=suinyeze-22&o=9&p=8&l=as1&m=amazon&f=ifr&asins=B002TK93ZW" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>]]></description>
<pubDate>Sun, 29 Nov 2009 15:44:09 +0900</pubDate>
<guid>http://suin.asia/2009/11/29/macbook_vmware_windows_xp</guid>
<category domain="http://suin.asia/tag/Mac">Mac</category>
<category domain="http://suin.asia/tag/Windows">Windows</category>
<category domain="http://suin.asia/tag/Tips">Tips</category>
<category domain="http://suin.asia/tag/%E3%81%8A%E3%81%99%E3%81%99%E3%82%81">おすすめ</category>
</item>
<item>
<title>iPod touchをCMR-250でどこでもインターネットする方法</title>
<link>http://suin.asia/2009/10/18/ipod_touch_with_cmr_250</link>
<description><![CDATA[<p>iPod touchとiPhoneの大きな違いのひとつに、touchはWiFi(無線LAN)がないとネットが使えないという点がある。touch向けにもオンラインで使えるアプリが多く公開されている。なのに、外出先で使えないなど、場所が限られるというのは実にもったいない。このエントリーでは、モバイル無線ルータを使って、外出先でもネットを使えるようにする方法を紹介する。</p>
<p>モバイル無線ルータは、バッテリーを積んだ無線ルータだ。外出先などでスイッチをONにすれば、瞬く間にあなたがアクセスポイントになる。モバイル無線ルータには<a href="http://www.amazon.co.jp/gp/product/B001212ELY?ie=UTF8&tag=suinyeze-22&linkCode=as2&camp=247&creative=1211&creativeASIN=B001212ELY">PHS300</a><img src="http://www.assoc-amazon.jp/e/ir?t=suinyeze-22&l=as2&o=9&a=B001212ELY" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />や<a href="http://www.amazon.co.jp/gp/product/B002MZYLJC?ie=UTF8&tag=suinyeze-22&linkCode=as2&camp=247&creative=1211&creativeASIN=B002MZYLJC">CMR-250</a><img src="http://www.assoc-amazon.jp/e/ir?t=suinyeze-22&l=as2&o=9&a=B002MZYLJC" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />などがある。これらは、<a href="http://emobile.jp/products/lineup_usb.html">イーモバイルのデータカード</a>と組み合わせて使う。なので、イーモバイルが使えるところであれば、どこでもインターネットが使えることになる。私はCMR-250を買ったので、少し紹介したい。</p>
<p>買うときにPHS300とCMR-2500のどちらにするか迷った。このうちCMR-250を選んだ理由は、主に次の通りバッテリー面だ。</p>
<ul>
<li>PHS300よりバッテリーのもちがいい</li>
<li>PHS300はUSB充電できないが、CMR-250はUSB充電可能</li>
<li>CMR-250は予備のバッテリー(<a href="http://www.amazon.co.jp/gp/product/B002HBQMWA?ie=UTF8&tag=suinyeze-22&linkCode=as2&camp=247&creative=1211&creativeASIN=B002HBQMWA">NP-120</a><img src="http://www.assoc-amazon.jp/e/ir?t=suinyeze-22&l=as2&o=9&a=B002HBQMWA" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />)が手に入る</li>
</ul>
<p>PHS300は試したことがないが、CMR-250のバッテリーのもちに関しては、実用レベルだと言える。通信を行わないアイドリング状態では、3時間以上起動した。(計測を途中で断念したので、もっと起動するかも)常に通信を行う状態でも、2時間ぐらいは使えるという印象だ。</p>
<p>CMR-250のパッケージは下のようである。</p>
<p class="photo"><a href="http://picasaweb.google.co.jp/lh/photo/csVYEN8KTr9faREnL25hGw?feat=embedwebsite"><img src="http://lh6.ggpht.com/_dG0BBWAhWis/StrebXmqTxI/AAAAAAAAAsQ/XazsDg_hFqs/s400/DSCF3179.JPG" /></a></p>
<p>気になるCMR-250の大きさだが、iPod touchと比べると分かりやすい。幅は、touchより長めだが、縦はtouchと同じくらいだ。鞄にいれても荷物にならない程度だ。</p>
<p class="photo"><a href="http://picasaweb.google.co.jp/lh/photo/DNHjGNLG453svnIfPRXMGg?feat=embedwebsite"><img src="http://lh3.ggpht.com/_dG0BBWAhWis/Streb9QJaeI/AAAAAAAAAsU/nD9W29YeBOU/s400/DSCF3181.JPG" /></a></p>
<p>USBポートは側面にある。なので、直接データカードを差し込むと、それが出っ張る。これが嫌な人は、角度を変えられるUSBコネクター(<a href="http://www.amazon.co.jp/gp/product/B0007NXUMA?ie=UTF8&tag=suinyeze-22&linkCode=as2&camp=247&creative=1211&creativeASIN=B0007NXUMA">AD-3DUSBW9</a><img src="http://www.assoc-amazon.jp/e/ir?t=suinyeze-22&l=as2&o=9&a=B0007NXUMA" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />など)を使うといい。</p>
<p class="photo"><a href="http://picasaweb.google.co.jp/suinyeze/2009?feat=embedwebsite#5393868081704111682"><img src="http://lh6.ggpht.com/_dG0BBWAhWis/StrecT9KjkI/AAAAAAAAAsY/lBnunD7vkGA/s400/DSCF3222.JPG" /></a></p>
<p>こんな感じで、iPod touchがiPhoneのように、どこでもインターネットが使えるようになる。これで、外出先でtwitterしたり、メールを確認したり、touchのGPS機能をつかって現在地を調べたり、ネットラジオを聞いたり、可能性は無限大に広がると思う。</p>
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_top&bc1=FFFFFF&IS2=1&nou=1&bg1=FFFFFF&fc1=333333&lc1=004993&t=suinyeze-22&o=9&p=8&l=as1&m=amazon&f=ifr&asins=B002MZYLJC" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>]]></description>
<pubDate>Sun, 18 Oct 2009 19:20:41 +0900</pubDate>
<guid>http://suin.asia/2009/10/18/ipod_touch_with_cmr_250</guid>
<category domain="http://suin.asia/tag/iPod">iPod</category>
<category domain="http://suin.asia/tag/touch">touch</category>
<category domain="http://suin.asia/tag/iPhone">iPhone</category>
<category domain="http://suin.asia/tag/Tips">Tips</category>
<category domain="http://suin.asia/tag/%E3%81%8A%E3%81%99%E3%81%99%E3%82%81">おすすめ</category>
</item>
<item>
<title>ローカルストレージを使ってiPhoneのcookie健忘症対策: ウェブアプリ開発者の立場から</title>
<link>http://suin.asia/2009/09/13/iphone_local_strage_for_email_password_remainder</link>
<description><![CDATA[<p>iPhoneはcookieがしばしば勝手に消えるようだ。そのせいで、セッションが切れる。すると、GmailやDropboxなどのウェブアプリはログアウトしていまい、IDとパスワードを入力し直す手間が出るので、たちまち不便になる。</p>
<p>セッションが落ちるのは仕方がないとする。それでも、IDやパスワードの記憶ぐらいはしておきたい。iPhoneのキーボードでメールアドレスとパスワードを入力するのは、えらく苦痛だからだ。iPhone向けウェブアプリの開発者としては、できるだけユーザの不便を解消してやりたいはずだ。</p>
<p>iPhoneのsafariにはパスワードの記憶機能がない。その代替策として、パスワードなどをcookieに保存する方法が考えるかもしれない。mixiなどもこの方法だ。しかし、上で述べたが、iPhoneのcookieはよく無くなる。そこで、さらにcookieの代替策として、safariのローカルストレージを使う手がある。</p>
<p>ローカルストレージとは？</p>
<p>iPhoneのsafariにはjavascriptで使えるSQLiteが用意されている。ローカルストレージはcookieと違い、有効期限がない。つまり、勝手に消えることは永久的にない。ただし、次のような制約がある。</p>
<ul>
<li>
データベースはドメインごと。したがって、他のドメインのデータベースを参照することはできない。(逆にできたら、セキュリティ的に怖い)</li>
<li>データベースの容量は5MBまで。</li>
</ul>
<p>ローカルストレージの詳細は、分かりやすくまとめている「<a href="http://d.hatena.ne.jp/amachang/20080327/1206607704">Safari 3.1 に実装された「Client-side database storage (SQL API)」とは何か？ - IT戦記:</a>」をご覧いただきたい。</p>
<p>では、具体的にローカルストレージを使った、ID・パスワードの記憶機能の実装を紹介する。コード量は多いが、やっていることは大して複雑ではない。</p>
<p>まずは、HTMLは次のように書く。</p>
<pre name="code" class="html">&lt;form name=&quot;login&quot; action=&quot;login.php&quot; method=&quot;post&quot; onsubmit=&quot;return emai_pass_remaind()&quot;&gt;
&lt;input type=&quot;text&quot; name=&quot;email&quot; value=&quot;&quot; placeholder=&quot;メールアドレス&quot; autocorrect=&quot;off&quot; autocapitalize=&quot;off&quot; /&gt;&lt;br /&gt;
&lt;input type=&quot;password&quot; name=&quot;pass&quot; value=&quot;&quot; placeholder=&quot;パスワード&quot; autocorrect=&quot;off&quot; autocapitalize=&quot;off&quot; /&gt;&lt;br /&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;save_pass&quot; value=&quot;1&quot; /&gt;メアドとパスワードを記憶&lt;br /&gt;
&lt;input type=&quot;submit&quot; value=&quot;送信&quot; /&gt;
&lt;/form&gt;</pre>
<p>つぎに、javascriptは次のように書く。</p>
<pre name="code" class="javascript">// ロード時に、データベースからメアドとパスワードを取得、フォームにセットする関数
window.onload = function() {
  var db = openDatabase('mydatabase', '1.0');

  db.transaction(
    function(tx)
    {
      tx.executeSql(&quot;SELECT email, pass FROM login WHERE id = 1&quot;, [],
        function(tx, rs)
        {
          // ロードに成功したら、フォームに値をセット
          document.login.email.value = rs.rows.item(0).email; // htmlspecialchars?
          document.login.pass.value  = rs.rows.item(0).pass;
          document.login.save_pass.checked = true;
        }
      );
    }
  );
}

// フォーム送信時に、メアドとパスワードをデータベースに保存・削除する関数
function emai_pass_remaind()
{
  // フォームから値を取得
  var email = document.login.email.value;
  var pass  = document.login.pass.value;

  /* ここらへんにvalidationの処理を入れたり... */

  var db = openDatabase('mydatabase', '1.0');

  if ( document.login.save_pass.checked == true )
  {
    db.transaction(
      function(tx) {
        // テーブルがあるかな?
        tx.executeSql(&quot;SELECT count(*) FROM login&quot;, [],
          function(tx, rs) {
            // テーブルあるよ
            if ( rs.rows.item(0) == 0 )
            {
              // テーブル初利用の場合は、追加
              tx.executeSql('INSERT INTO login VALUES(1, ?, ?)', [email, pass], // escape?
                function() {},
                function(error) {
                  alert('save failed: ' + error.message);
                }
              );
            }
            else
            {
              // テーブル初利用じゃない場合は、更新
              tx.executeSql('UPDATE login SET email = ?, pass = ? WHERE id = 1', [email, pass], // escape?
                function() {},
                function(error) {
                  alert('update failed: ' + error.message);
                }
              );
            }
          },
          function(tx, error) {
            // テーブルないよ、テーブルつくろ
            tx.executeSql('CREATE TABLE login (id INTEGER PRIMARY KEY, email TEXT, pass TEXT)', [],
              function() {
              // テーブル初利用だから、追加
                tx.executeSql('INSERT INTO login VALUES(1, ?, ?)', [email, pass], // escape?
                  function() {},
                  function(error) {
                    alert('save failed: ' + error.message);
                  }
                );
              },
              function(error) {
                alert('Database creation failed.' + error.message);
              }
            );
          }
        );
      }
    );
  }
  else
  {
    // チェックボックスにチェックがないときは、テーブル削除
    db.transaction(
      function(tx) {
        tx.executeSql('DROP TABLE login', [],
          function() {},
          function(error) {
            alert('delete failed: ' + error.message);
          }
        );
      }
    );
  }
}</pre>
<p>これで、あなたのウェブアプリも、かなり便利になると思う。</p>]]></description>
<pubDate>Sun, 13 Sep 2009 16:43:04 +0900</pubDate>
<guid>http://suin.asia/2009/09/13/iphone_local_strage_for_email_password_remainder</guid>
<category domain="http://suin.asia/tag/iPhone">iPhone</category>
<category domain="http://suin.asia/tag/Tips">Tips</category>
<category domain="http://suin.asia/tag/JavaScript">JavaScript</category>
</item>
<item>
<title>preg_match_allのお供にarray_combine</title>
<link>http://suin.asia/2009/09/10/preg_match_all_with_array_combine</link>
<description><![CDATA[<p>preg_match_all()でマッチしたものは配列で返される。なので、その配列を整理するのにforeach()をつかったりしてひと仕事することも多い。しかし、もし、キーと値の関係にあるデータなら、array_combine()を使うと、手軽に連想配列にすることができる。覚えておくといいかもしれない。</p>

<pre name="code" class="php">
$html = '
<dl>
<dt>Apple</dt><dd>りんご</dd>
<dt>Orange</dt><dd>みかん</dd>
<dt>Strawberry</dt><dd>いちご</dd>
</dl>
';

preg_match_all('/<dt>(.+)<\/dt><dd>(.+)<\/dd>/U', $html, $matches);

var_dump($matches);

/*
array(3) {
  [0]=>
  array(3) {
    [0]=>
    string(32) "<dt>Apple</dt><dd>りんご</dd>"
    [1]=>
    string(33) "<dt>Orange</dt><dd>みかん</dd>"
    [2]=>
    string(37) "<dt>Strawberry</dt><dd>いちご</dd>"
  }
  [1]=>
  array(3) {
    [0]=>
    string(5) "Apple"
    [1]=>
    string(6) "Orange"
    [2]=>
    string(10) "Strawberry"
  }
  [2]=>
  array(3) {
    [0]=>
    string(9) "りんご"
    [1]=>
    string(9) "みかん"
    [2]=>
    string(9) "いちご"
  }
}
*/

$keys   = $matches[1];
$values = $matches[2];

$words = array_combine($keys, $values); // ここがみそ

var_dump($words);
/*
array(3) {
  ["Apple"]=>
  string(9) "りんご"
  ["Orange"]=>
  string(9) "みかん"
  ["Strawberry"]=>
  string(9) "いちご"
}
*/
</pre>]]></description>
<pubDate>Thu, 10 Sep 2009 13:34:47 +0900</pubDate>
<guid>http://suin.asia/2009/09/10/preg_match_all_with_array_combine</guid>
<category domain="http://suin.asia/tag/PHP">PHP</category>
<category domain="http://suin.asia/tag/Tips">Tips</category>
</item>
<item>
<title>PHPで自分のURLを取得する方法</title>
<link>http://suin.asia/2009/09/06/how_to_get_current_url_by_php</link>
<description><![CDATA[<p>忘れやすいのでメモする。</p>
<p>PHPで現在のURLを取得するには、$_SERVERの変数をもとにすればいい。以下のコードが具体的に、URLを取得する方法。この方法が一番シンプルで汎用性があると思う。</p>

<pre name="code" class="php">
if ( isset($_SERVER['HTTPS']) and $_SERVER['HTTPS'] == 'on' )
{
	$protocol = 'https://';
}
else
{
	$protocol = 'http://';
}

$url  = $protocol.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
</pre>]]></description>
<pubDate>Sun, 06 Sep 2009 18:22:07 +0900</pubDate>
<guid>http://suin.asia/2009/09/06/how_to_get_current_url_by_php</guid>
<category domain="http://suin.asia/tag/PHP">PHP</category>
<category domain="http://suin.asia/tag/Tips">Tips</category>
</item>
<item>
<title>Mac+Windows Vistaでインターネットの共有。できなかったのが解決！</title>
<link>http://suin.asia/2009/08/08/mac_windows_vista_share_internet</link>
<description><![CDATA[<h3>概要</h3>
<p>Macのインターネット共有で暗号化をONにすると、iPod touchは接続できるけど、一方Windows Vistaは接続できない。でもWindowsも設定次第で、接続できるようになる。</p>
<h3>僕の環境・設定</h3>
<ul>
<li>Mac OS X 10.5.8 (MacBook Air)(以下 Mac)</li>
<li>Windows Vista Home Premium (Vaio type-F)(以下 Winodws)</li>
<li>D12LC(イーモバイル)</li>
<li>Macのインターネット共有がオン
<ul>
<li>共有する接続経路 ： イーモバイルのもの</li>
<li>相手のコンピュータが使用するポート ： AirMac</li>
<li>ネットワーク名 ： SuinMacBook</li>
<li>チャンネル ： 自動</li>
<li>暗号化 ： オン</li>
<li>パスワード ： abcdeのようなアルファベット5文字</li>
<li>WEPキーの長さ ： 40ビット</li>
</ul></li>
</ul>
<h3>トラブルの症状</h3>
<p>僕がWindowsから接続を試してできなかったときの状態をまとめると次の通り。</p>
<ul>
<li>iPod touchは接続できる。</li>
<li>Windowsからはアクセスポイントが見える。</li>
<li>しかし、Windowsが接続しようとしても接続できない。</li>
<li>「○○に接続できません」と言われる。<br />
<a href="http://picasaweb.google.co.jp/lh/photo/lpDk1JW2CxXNJY1Ub_kDPg?feat=embedwebsite"><img src="http://lh6.ggpht.com/_dG0BBWAhWis/Sn0FF3a50BI/AAAAAAAAAqQ/NvwVLQ20ZOw/s400/MacWindowsShareInternet1.png" /></a></li>
<li>WEP(暗号化)を切るとWindowsからも接続できる。</li>
</ul>
<h4>同じようなトラブルの人</h4>
<p>Googleで検索してみると、僕と似たような問題を抱えるひとの記事が見つかった。</p>
<ul>
<li><a title="Setup.exeのインストール日記: AirMacによるインターネット共有(暗号化)その2:" href="http://setupexe.seesaa.net/article/41004951.html">Setup.exeのインストール日記: AirMacによるインターネット共有(暗号化)その2:</a><br />
(たぶんWindows XPの人はこちらのほうが参考になる。)</li>
<li><a title="MacとWindowsの間でインターネット共有 - 津駄の日々:" href="http://d.hatena.ne.jp/teuder/20090128/1233154504">MacとWindowsの間でインターネット共有 - 津駄の日々:</a><br />
(こちらもWinodws XPの人むけ。僕はダブルクォーテーションなしでできた。)</li>
<li><a title="ホテルのＬＡＮを2人で共有する方法(Mac編） : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ:" href="http://mtl.recruit.co.jp/blog/2008/03/2mac.html">ホテルのＬＡＮを2人で共有する方法(Mac編） : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ:</a><br />
(コメントに似たようなことが書いてある。)</li>
<li><a title="WinとMacのインターネット共有 - 質問・相談ならMSN相談箱:" href="http://questionbox.jp.msn.com/qa4684818.html">WinとMacのインターネット共有 - 質問・相談ならMSN相談箱:</a></li>
</ul>
<p>これらの記事はすごく参考になったんだ。書いてくれた人、本当にありがとうって思う。</p>
<h3>接続ができた設定方法</h3>
<p>接続に成功した方法をここで紹介しようと思う。MacとWindowsでそれぞれ設定が必要だ。</p>
<h4>Macの設定</h4>
<ol>
<li>「システム環境設定」を開く。</li>
<li>「共有」を開く。<br />
<a href="http://picasaweb.google.co.jp/lh/photo/tq4Lqqx-UI3T56GQQLYbWQ?feat=embedwebsite"><img src="http://lh3.ggpht.com/_dG0BBWAhWis/Sn0FFzJKN-I/AAAAAAAAAqU/mI5-3DRxluY/s800/MacWindowsShareInternet2.png" /></a></li>
<li>サービスの中の「インターネットの共有」を開く。</li>
<li>「AirMacオプション」を開いて次のように設定する。
<ol>
<li>「ネットワーク名」を決める。(僕の場合は「SuinMacBook」にした。)</li>
<li>「チャンネル」は「自動」</li>
<li>「暗号化」にチェックを入れる。</li>
<li>「パスワード」を5文字で決める。(僕の場合は「abcde」にした。)</li>
<li>「WEPキーの長さ」を「40ビット」にする。</li>
<li>「OK」をクリック。<br />
<a href="http://picasaweb.google.co.jp/lh/photo/-yhI8CwpHaM7a8rYEsVb1w?feat=embedwebsite"><img src="http://lh5.ggpht.com/_dG0BBWAhWis/Sn0FF63IOjI/AAAAAAAAAqY/xh6CCF0A_JU/s400/MacWindowsShareInternet3.png" /></a></li>
</ol></li>
<li>「インターネットの共有」にチェックを入れる。<br />
<a href="http://picasaweb.google.co.jp/lh/photo/_RCTkAnIQwshLitK3VzQqw?feat=embedwebsite"><img src="http://lh6.ggpht.com/_dG0BBWAhWis/Sn0FGBegitI/AAAAAAAAAqc/LYoFnDSj2qk/s800/MacWindowsShareInternet4.png" /></a></li>
<li>「インターネット共有機能を開始してもよろしいですか？」で「開始」をクリック。</li>
<li>AirMacのアイコンが<a href="http://picasaweb.google.co.jp/lh/photo/gHSQ7bcOIJTcXRUwZtditg?feat=embedwebsite"><img src="http://lh4.ggpht.com/_dG0BBWAhWis/Sn0FGOYm-bI/AAAAAAAAAqg/Tp_xK5PBklU/s800/MacWindowsShareInternet5.png" alt="インターネットの共有ONの状態" /></a>になり、Windowsからアクセスポイントが認識できる。</li>
</ol>
<h4>Windowsの設定</h4>
<ol>
<li>「スタート」→「コントロールパネル」を開く。</li>
<li>左メニューの「コントロールパネルホーム」を開く。</li>
<li>「ファイルの共有の設定」を開く。</li>
<li>左メニューの「ネットワークに接続」を開く。</li>
<li>そこに、AirMacのアクセスポイントがあることを確認する。(僕の場合は「SuinMacBook」が確認できた。)</li>
<li>「ネットワークの共有センターを開きます」をクリックして戻る。</li>
<li>左メニューの「ワイヤレスネットワークの管理」を開く。<br />
<a href="http://picasaweb.google.co.jp/lh/photo/yQy8vQ_ioo8g4Mc_cMg7PA?feat=embedwebsite"><img src="http://lh6.ggpht.com/_dG0BBWAhWis/Sn0FnKDs-hI/AAAAAAAAAqk/GIWCH0tPPUQ/s400/MacWindowsShareInternet6.png" /></a></li>
<li>「追加」をクリック。<br />
<a href="http://picasaweb.google.co.jp/lh/photo/lQPlWlGymReDtjOLJeSWkA?feat=embedwebsite"><img src="http://lh4.ggpht.com/_dG0BBWAhWis/Sn0FnKMqtWI/AAAAAAAAAqo/3Sffj2P1Pn0/s400/MacWindowsShareInternet7.png" /></a></li>
<li>3つの選択肢の中から「ネットワークプロファイルを手動で作成します」をクリック。<br />
<a href="http://picasaweb.google.co.jp/lh/photo/Hu6ei-jkBGP8sK5hN6K1sg?feat=embedwebsite"><img src="http://lh4.ggpht.com/_dG0BBWAhWis/Sn0FnA8CIRI/AAAAAAAAAqs/INawRbjb7mE/s400/MacWindowsShareInternet8.png" /></a></li>
<li>ネットワーク情報を次の通りに入力する。
<ol>
<li>「ネットワーク名」はMac4-1で設定したものを書く。(僕の場合は「SuinMacBook」。)</li>
<li>「セキュリティの種類」は「WEP」にする。</li>
<li>「セキュリティキーまたはパスフレーズ」はMac4-4で設定したもの。(僕の場合は「abcde」。)<br />
<a href="http://picasaweb.google.co.jp/lh/photo/mFwo4FTZm-tq_07677Llyw?feat=embedwebsite"><img src="http://lh6.ggpht.com/_dG0BBWAhWis/Sn0FnMTUaDI/AAAAAAAAAqw/xZ31zh5sJaw/s400/MacWindowsShareInternet9.png" /></a></li>
</ol></li>
<li>「正常に○○を追加しました」と出るので、「接続の設定を変更します」をクリック。</li>
<li>「ワイヤレスネットワークのプロパティ」が開く。</li>
<li>そこの「セキュリティ」タブを開いて、次の通りに設定する。
<ol>
<li>「セキュリティの種類」は「共有キー」にする。</li>
<li>「暗号化の種類」は「WEP」にする。</li>
<li>「ネットワークセキュリティーキー」はMac4-4で設定したもの。(僕の場合は「abcde」。)</li>
<li>「キーインデックス」は「１」でいい。<br />
<a href="http://picasaweb.google.co.jp/lh/photo/75Z-RoYdLKPnVmF0R62OgA?feat=embedwebsite"><img src="http://lh3.ggpht.com/_dG0BBWAhWis/Sn0FnEh5-7I/AAAAAAAAAq0/6UVPflnxta8/s400/MacWindowsShareInternet10.png" /></a></li>
</ol></li>
<li>「OK」を押す。</li>
<li>しばらくすると、「ワイヤレスネットワークの管理」に新しくネットワーク(Mac)が追加されているのが確認できる。</li>
<li>「ネットワークと共有センター」でも、WindowsとインターネットがMacでつながれているのが確認できる。<br />
<a href="http://picasaweb.google.co.jp/lh/photo/AoID7vjNoiEwIf15EllZcg?feat=embedwebsite"><img src="http://lh4.ggpht.com/_dG0BBWAhWis/Sn0FvZbpdVI/AAAAAAAAAq4/UOLW98u_IUg/s400/MacWindowsShareInternet11.png" /></a></li>
</ol>
<h3>Macによるインターネット共有の可能性</h3>
<p>僕は、突然 光フレッツに繋がらなくなったから、Mac＋イーモバイルで臨時のネットワークを作った。Macのインターネット共有は非常に手軽だ。それに加えて、
Windowsからの接続できない問題が解決できて、いろんな可能性が見えてきた。たとえば、ホテルでLANケーブルが1つしか無くても、ノートPCを2
台つなぐこともできる。他にも、MacとWindowsが同じネットワークに入るから、ファイルの共有もできるようになる。いろいろ便利な使い方ができそ
う。</p>]]></description>
<pubDate>Sat, 08 Aug 2009 14:13:20 +0900</pubDate>
<guid>http://suin.asia/2009/08/08/mac_windows_vista_share_internet</guid>
<category domain="http://suin.asia/tag/Tips">Tips</category>
<category domain="http://suin.asia/tag/%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB">トラブル</category>
<category domain="http://suin.asia/tag/%E8%A7%A3%E6%B1%BA">解決</category>
<category domain="http://suin.asia/tag/mac">mac</category>
</item>
<item>
<title>ノートパソコン(vaio)のリカバリをこの手順でやってみた</title>
<link>http://suin.asia/2009/08/02/vaio_recovery</link>
<description><![CDATA[<p>vaioのリカバリ(出荷時の状態に復元)をやったので、手順をまとめておきます。主な流れは次のとおり。</p>
<ol>
<li>データを外部HD(hard disc)に移動</li>
<li>リカバリ</li>
<li>ソフトウェアのインストール</li>
<li>データを外部HDから移動</li>
</ol>
<h3>1.データを外部HDに移動</h3>
<p>まず、必要になるのが外部HDです。リカバリすると今のデータは全て無くなるので、取っておきたいデータは外部HDに移動しておきます。データの大きさにもよりますが、100GB(giga
byte)くらいの容量のHDがあれば、余裕を持ってデータを保存できると思います。今回は、たまたま120GBの外部HDがあったので、それを利用しました。外部HDに保存するデータは、マイドキュメントの写真・動画・WordやExcelのファイル・Internet
Explorerのお気に入りなどです。</p>
<p>データを移動する際は、ファイルにウイルスが紛れ込んでいないか、しっかりとウイルスチェックをします。リカバリしたあとに、ウイルスに感染しては元も子もないからです。</p>
<h3>2. リカバリ</h3>
<p>リカバリの仕方は、sonyのウェブサイトで確認できます。vaioの型番によってリカバリの仕方は異なります。私の場合は、Windows Vista上で「vaio
リカバリーセンター」でリカバリし始めました。あとは、案内に従って作業を続けていくだけでした。</p>
<h3>3. ソフトウェアのインストール</h3>
<p>いよいよ、ソフトウェアのインストールです。インストールするソフトも順序があります。最初に、ウイルス対策ソフトをインストールします。手元にウイルス対策ソフトが無くても、Trend
MicroやNortonなどのウェブサイトから、ウイルス対策ソフトの体験版がダウンロードできます。体験版は90日間しか使えないことがほとんどです。それでも、正規版を買いに行くより手軽なので、とりあえずは体験版をインストールしておきます。日数制限以外は、正規版のソフトと同等に機能するので、ひとまず安心できます。90日後に、正規版に変更すれば、今後も引き続き利用できます。</p>
<p>ウイルス対策が終わったら、次は必要なソフトをインストールします。私の場合は、Firefox, Drop Box, NateOn, Adobe
Readerなどなど。インストール完了後に再起動が必要なソフトもあるので、何度となく再起動を繰り返しました。</p>
<p>ソフトのインストールと平行して、Windowsアップデートも行います。Windowsを最新の状態に保つことで、ウイルスやハッキングなのどの危険性を減らすことができるからです。これも、何度となく再起動する必要がありました。</p>
<p>せっかくWindowsがキレイになったので、インストールするソフトも安定性のあるものに限っておきます。信頼できないソフトは極力インストールしないようにします。また、ソフトの数もできるだけ少なくしておきます。たくさんのソフトをインストールすると、Windowsの動作が遅くなるからです。</p>
<h3>4. データを外部HDから移動</h3>
<p>最後に、外部HDに保存しておいたデータをパソコンに移します。パソコンの中身も新品同様、心機一転したのでデータを戻すついでにデータを整理しても良いかもしれません。</p>
<h3>あとは余談</h3>
<h4>今回のリカバリの経緯</h4>
<p>Windowsが異常だったのでリカバリしました。このような経緯は、リカバリをする多くの人で共有することだと思います。ウイルスに感染したのか、設定がおかしくなったのか、Windows
Vistaが不安定になっていました。iTunesでしばしばに音がでなくなったり、タスクマネージャが使えなかったり、Internet Explorerが落ちやすくなったりと、ストレスフルな状況でした。</p>
<h4>リカバリにかかった時間</h4>
<p>ほぼまる1日をリカバリに要しました。データを移して、リカバリして、新しい環境を構築するのにはかなりの時間がかかります。休日でない限りできないと思いました。</p>]]></description>
<pubDate>Sun, 02 Aug 2009 14:37:22 +0900</pubDate>
<guid>http://suin.asia/2009/08/02/vaio_recovery</guid>
<category domain="http://suin.asia/tag/%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB">トラブル</category>
<category domain="http://suin.asia/tag/vaio">vaio</category>
<category domain="http://suin.asia/tag/Tips">Tips</category>
</item>
<item>
<title>CSSのtext-align:center;は&lt;div&gt;には通用しない</title>
<link>http://suin.asia/2009/03/20/css-text-align-center-div.html</link>
<description><![CDATA[<p>body直下の&lt;div&gt;を幅固定でセンタリングするなんていう要望は、かなりあると思う。</p>
<p>ところが、FirefoxなどのCSSに厳格なブラウザでは、text-align:centerは&lt;div&gt;などのブロック要素を中央配置することができない。</p>
<p>これについての詳細は、<a href="http://geekswithblogs.net/timh/archive/2006/04/19/75606.aspx">text-align: center; not working in Firefox:</a>(英語)を参照されたい。</p>
<p>上のページを要約すると、Firefoxでは</p>
<pre name="code" class="css">body { text-align: -moz-center; }</pre>
<p>を使えばいいよ、である。</p>
<p>これで、Firefoxではめでたく&lt;div&gt;(たとえば600pxで固定されたもの)はちゃんとセンタリングされる。</p>
<p>しかし、これだと、Firefoxでしか有効でないため、IE用の記述も必要になる。</p>
<p>これに対しては、<a href="http://geekswithblogs.net/TimH/archive/2006/04/19/75606.aspx#138087">CSSハックを使った方法</a>が紹介されていた。</p>
<pre name="code" class="css">body 
{ 
text-align:-moz-center; /*FF*/
#text-align:center; /*IE */
}</pre>
<p>この方法では、FirefoxとIE5.5, 6, 7に対応できることが確認された。</p>
<p>でも、これだと、Google chromeやIE8などの、最近のブラウザではちゃんと中央添えされないことがわかった。</p>
<p>うーん、困った。</p>
<p>もっと、読み進めたら、今度は<a href="http://geekswithblogs.net/TimH/archive/2006/04/19/75606.aspx#419098">text-alignを使わない方法</a>が紹介されていた。</p>
<p>これがまさに目から鱗。</p>
<pre name="code" class="css">#div_container {
position: absolute;
left: 50%;
height: 100%;
width: 1000px;
margin-left: -500px; /* MUST be half the width */
}</pre>
<p>いったん、ページの真ん中に&lt;div&gt;の左端を合わせて、次に、幅の半分だけ左に戻るというやり方。</p>
<p>この方法だと、ページの幅が未知でもうまく、センタリングされる。</p>
<p>なんか、ごちゃごちゃしているので図解してみた。</p>
<p>↓拡大できます。</p>
<p class="photo"><a href="http://picasaweb.google.co.jp/lh/photo/Mrc4FMq98yg47pD5OzuWsA?feat=embedwebsite"><img src="http://lh4.ggpht.com/_dG0BBWAhWis/ScJojuknmPI/AAAAAAAAAa0/rfEr_s6RygE/s400/centering.jpg" alt="図解の図" /></a></p>
<p>この方法は、FirefoxはもちろんIE 5.5, 6, 7, 8、Google Chromeでもうまく使えた。</p>
<p>&lt;div&gt;の幅がpx値などで固定されていることが前提条件だけど、これで解決されるデザインは多いと思う。</p>]]></description>
<pubDate>Fri, 20 Mar 2009 00:46:39 +0900</pubDate>
<guid>http://suin.asia/2009/03/20/css-text-align-center-div.html</guid>
<category domain="http://suin.asia/tag/Web">Web</category>
<category domain="http://suin.asia/tag/Tips">Tips</category>
<category domain="http://suin.asia/tag/CSS">CSS</category>
</item>
</channel>
</rss>