<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>エイチツーオー・スペース[H2O Space.] &#124; ちゃんとWebなホームページ制作会社 &#187; ブログ</title>
	<atom:link href="http://h2o-space.com/blog/feed" rel="self" type="application/rss+xml" />
	<link>http://h2o-space.com</link>
	<description>東京世田谷のホームページ制作会社。「声」をテーマに御社のお客様の満足度を高めるホームページ制作をお手伝いします。</description>
	<lastBuildDate>Sun, 07 Mar 2010 16:35:45 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>ノンプログラマのためのPHP勉強会 on USTREAM 第2回『オブジェクト指向を攻略せよ』を開催しました</title>
		<link>http://h2o-space.com/blog/2046</link>
		<comments>http://h2o-space.com/blog/2046#comments</comments>
		<pubDate>Sun, 07 Mar 2010 16:33:32 +0000</pubDate>
		<dc:creator>h2ospace</dc:creator>
				<category><![CDATA[ブログ]]></category>
		<category><![CDATA[ustream]]></category>

		<guid isPermaLink="false">http://h2o-space.com/?p=2046</guid>
		<description><![CDATA[
かなりご報告が遅れてしまいましたが、先週「ノンプログラマのためのPHP勉強会 on USTREAM vol.2」を開催しました。
今回のテーマは「オブジェクト指向を攻略せよ」。オブジェクト指向を勉強する時に出てくる [...]]]></description>
			<content:encoded><![CDATA[
<p>かなりご報告が遅れてしまいましたが、先週「ノンプログラマのためのPHP勉強会 on USTREAM vol.2」を開催しました。</p>
<p>今回のテーマは「オブジェクト指向を攻略せよ」。オブジェクト指向を勉強する時に出てくる「クラス」「インスタンス」「メソッド」「プロパティ」といった各用語を解説いたしました。録画データはこちらで。</p>
<p><object id="utv679483" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="386" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="name" value="utv_n_333146" /><param name="flashvars" value="loc=%2F&amp;autoplay=false&amp;vid=5049613" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.ustream.tv/flash/video/5049613" /><embed id="utv679483" type="application/x-shockwave-flash" width="480" height="386" src="http://www.ustream.tv/flash/video/5049613" allowscriptaccess="always" allowfullscreen="true" flashvars="loc=%2F&amp;autoplay=false&amp;vid=5049613" name="utv_n_333146"></embed></object></p>
<p>また、スライド代わりに使った資料はこちらで公開しています。</p>
<ul>
	<li><a href="http://aqurl.info/u/4b89218a6">ノンプログラマのためのPHP勉強会 on USTREAM vol.2　資料</a></li>
<p><a href="http://aqurl.info/u/4b89218a6"> </a></p></ul>
<p>&nbsp;</p>

<p>今回も、100名以上の方に視聴いただきました。ありがとうございます！　まだしばらく続けていきたいと思います。</p>
<p>すこし、USTREAMの使い方もつかめてきたので、また少し違った方向性の番組も作ってみようかなと思っています。</p>
<p>まだまだ面白くなりそうです。皆さんも、ぜひ発信側で楽しんでみてはいかがでしょう？</p>
<p>&nbsp;</p>

<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F2046">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F2046&amp;source=seltzer&amp;style=normal" height="61" width="50" />
			</a>
		</div>]]></content:encoded>
			<wfw:commentRss>http://h2o-space.com/blog/2046/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>イベント情報【10/04/23】　GEEKs Flash モーションプログラミング</title>
		<link>http://h2o-space.com/blog/2043</link>
		<comments>http://h2o-space.com/blog/2043#comments</comments>
		<pubDate>Sat, 06 Mar 2010 07:20:27 +0000</pubDate>
		<dc:creator>h2ospace</dc:creator>
				<category><![CDATA[ブログ]]></category>
		<category><![CDATA[event]]></category>

		<guid isPermaLink="false">http://h2o-space.com/?p=2043</guid>
		<description><![CDATA[
ロクナナさんが主催するイベントです。
今回のテーマは「Flash ActionScriptによるモーショングラフィクス」だとか。 ROXIK の 城戸雅行（きどまさゆき）氏と alumican.net の 奥田透也 [...]]]></description>
			<content:encoded><![CDATA[
<p><a href="http://event.67.org/">ロクナナ</a>さんが主催するイベントです。</p>
<p>今回のテーマは「Flash ActionScriptによるモーショングラフィクス」だとか。 ROXIK の 城戸雅行（きどまさゆき）氏と alumican.net の 奥田透也（おくだゆきや）氏をゲストに迎え、ActionScript 3.0で複雑なモーションプログラムを構築するための、考え方や手法が紹介されるのだとか。</p>
<p>渋谷TSUTAYAのシアターで開催され、料金は 3,800円（学生は 1,900円）、その後アフターパーティもあるそうな。</p>
<p>かなり面白そうなイベントなので、ご興味ある方はぜひ！</p>
<ul>
	<li><a href="http://event.67.org/geeks/flashmotion/">Flash モーションプログラミング | ロクナナワークショップ イベント企画 | GEEKs</a></li>
</ul>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F2043">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F2043&amp;source=seltzer&amp;style=normal" height="61" width="50" />
			</a>
		</div>]]></content:encoded>
			<wfw:commentRss>http://h2o-space.com/blog/2043/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Google App Engine: Googleアカウントでログインする</title>
		<link>http://h2o-space.com/blog/2041</link>
		<comments>http://h2o-space.com/blog/2041#comments</comments>
		<pubDate>Wed, 03 Mar 2010 16:39:08 +0000</pubDate>
		<dc:creator>h2ospace</dc:creator>
				<category><![CDATA[ブログ]]></category>
		<category><![CDATA[Google App Engine]]></category>

		<guid isPermaLink="false">http://h2o-space.com/?p=2041</guid>
		<description><![CDATA[訳あって Google App Engineを勉強しています。Pythonは、なかなかクセがありますが、慣れると面白そうな言語ですね。

Google App Engineでの開発の場合は、専用のフレームワークが準備 [...]]]></description>
			<content:encoded><![CDATA[訳あって Google App Engineを勉強しています。Pythonは、なかなかクセがありますが、慣れると面白そうな言語ですね。

Google App Engineでの開発の場合は、専用のフレームワークが準備されているため、Googleの提供する機能を簡単に使えるというのも魅力的です。
例えば、Googleアカウントを使ってログインする仕組みを提供するには、こんなプログラムを書くだけでOK。

<pre class="brush:python">
from google.appengine.api import users
from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app

class MainPage(webapp.RequestHandler):
	def get(self):
		user = users.get_current_user()
		
		if user:
			self.response.headers['Content-Type'] = 'text/plain'
			self.response.out.write('Hello, ' + user.nickname())
		else:
			self.redirect(users.create_login_url(self.request.uri))

application = webapp.WSGIApplication([('/', MainPage)], debug=True)

def main():
	run_wsgi_app(application)

if __name__ == &quot;__main__&quot;:
	main()
</pre>

「google.appengine.api」から「users」というライブラリをインポートして、「get_current_user」で、Googleアカウントを取得します。

もしも、ログインされていない場合は「create_login_url」で、ログイン画面に移動させ、ログインしていたら「nickname」でニックネームを表示するというプログラムです。

他にもこんな機能があります。

<ul>
	<li><a href="http://code.google.com/intl/ja/appengine/docs/python/users/userclass.html">User クラス &#8211; Google App Engine &#8211; Google Code</a></li>
</ul>

ログインのしくみを作らなくて良いですし、ユーザーはIDやパスワードの管理が煩雑にならず、一石二鳥ですね。素敵です。

<ul>
	<li><a href="http://code.google.com/intl/ja/appengine/">Google App Engine &#8211; Google Code</a></li>
</ul><div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F2041">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F2041&amp;source=seltzer&amp;style=normal" height="61" width="50" />
			</a>
		</div>]]></content:encoded>
			<wfw:commentRss>http://h2o-space.com/blog/2041/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>タイトルを削ったりハッシュをつけて Retweetできる、Retweetボタンを作りました</title>
		<link>http://h2o-space.com/blog/2011</link>
		<comments>http://h2o-space.com/blog/2011#comments</comments>
		<pubDate>Tue, 02 Mar 2010 04:00:56 +0000</pubDate>
		<dc:creator>h2ospace</dc:creator>
				<category><![CDATA[ブログ]]></category>
		<category><![CDATA[Twitter]]></category>

		<guid isPermaLink="false">http://h2o-space.com/?p=2011</guid>
		<description><![CDATA[最近、ブログのページなどにも「このページをTwitterで知らせる」といったボタンが設置されていることが多くなりました。
そこで、私もひとつ作ってみました。アイデアと、バナー画像を作ってくださったので、お客様でもあるプ [...]]]></description>
			<content:encoded><![CDATA[<p>最近、ブログのページなどにも「このページをTwitterで知らせる」といったボタンが設置されていることが多くなりました。</p>
<p>そこで、私もひとつ作ってみました。アイデアと、バナー画像を作ってくださったので、お客様でもある<a href="http://playgroup-kiba.com/">プレイグループ木場校</a>様。ありがとうございます！</p>
<p>まずは、こちらをポチっとしてみて下さい</p>

<p>
<!-- H2O tweet --> 
<script type="text/javascript"> 
// 使うバナー
var banner2 = 'http://aqurl.info/v2/banner/b4.gif';
// 削除するタイトル
var trimTtl2 = ' | ブログ | ちゃんとWebなホームページ制作会社（東京）　エイチツーオー・スペース[H2O Space.]';
// 先頭に付加するメッセージ
var message2 = 'これ読んだ＞';
// Twitterアカウント
var account2 = 'seltzer';
// ハッシュタグ（空白区切って複数指定出来ます / 支障がなければ#aqurlを入れていただけると助かります）
var hash2 = '#aqurl';
 
/*** ここから下は変更しないでください ***/
var url2 = location.href;
var title2 = document.title;
title2 = message2 + title2.replace(trimTtl2, '') + ' #aqurl';
 
document.write('<a href="http://aqurl.info/v2/urls/twitter?t=' + encodeURIComponent(title2) + '&amp;u=' + encodeURIComponent(url2) + '&amp;a=' + encodeURIComponent(account2) + '"><img src="' + banner2 + '" alt="Retweetする" /></a>');
</script>
</p>

<p>こちらのボタンの特徴は、次のような内容を設定することが出来ます。</p>
<h3>特徴</h3>
<h4>前に決まり文句をつけられます</h4>
<p>これはよくある機能。標準は、そのページのタイトルとURLを拾いますが、その前に決まり文句をつけられます。標準では「おすすめ＞」です。</p>
<h4>タイトルの一部を削れます</h4>
<p>タイトルに、サイト名やSEO的なキーワードを設定しているページの場合、タイトルが非常に長くなります。そこで、決まった文字列を指定することでそれらを削除することが出来ます。例えば、このブログの場合は・・</p>
<blockquote>
<p>Zen-Condigの基本文法をおさらい | ブログ | ちゃんとWebなホームページ制作会社（東京）　エイチツーオー・スペース[H2O Space.]</p></blockquote>
<p>これがタイトルですが、「 | ブログ | ちゃんとWebなホームページ制作会社（東京）　エイチツーオー・スペース[H2O Space.]」を削除して・・・</p>
<blockquote>
<p>Zen-Condigの基本文法をおさらい</p></blockquote>
<p>などとすることが出来ます。</p>
<h4>アカウントを設定出来ます</h4>
<p>ブログ著者のアカウントを設定して、Retweet時にアカウントを付加することが出来ます。Retweetされたことが分かりやすいですし、その方をフォローするなどして、新しいつながりを作ることが出来ます。</p>
<h4>ハッシュタグも設定出来ます</h4>
<p>ハッシュタグもいくつでも設定出来ます。標準で「#aqurl」が設定されていますので、削除しても構いませんが、残していただけると助かります。</p>
<h4>自由なアイコン・選べるアイコン</h4>
<p>アイコンも画像パスを設定するだけ、簡単に変更することが出来ます。</p>
<h3>使い方</h3>
<h4>コードをコピーする</h4>
<p>次のコードをコピーして、自分のブログのテンプレートなどに貼付けて下さい。</p>

<pre class="brush:jscript">
&lt;!--&nbsp;H2O&nbsp;tweet&nbsp;--&gt;
&lt;script&nbsp;type=&quot;text/javascript&quot;&gt;
//&nbsp;使うバナー
var&nbsp;banner&nbsp;=&nbsp;'http://aqurl.info/v2/banner/b4.gif';
//&nbsp;削除するタイトル
var&nbsp;trimTtl&nbsp;=&nbsp;'';
//&nbsp;先頭に付加するメッセージ
var&nbsp;message&nbsp;=&nbsp;'これ読んだ＞';
//&nbsp;Twitterアカウント
var&nbsp;account&nbsp;=&nbsp;'';
//&nbsp;ハッシュタグ（空白区切って複数指定出来ます&nbsp;/&nbsp;支障がなければ#aqurlを入れていただけると助かります）
var&nbsp;hash&nbsp;=&nbsp;'#aqurl';

/***&nbsp;ここから下は変更しないでください&nbsp;***/
var&nbsp;url&nbsp;=&nbsp;location.href;
var&nbsp;title&nbsp;=&nbsp;document.title;
title&nbsp;=&nbsp;message&nbsp;+&nbsp;title.replace(trimTtl,&nbsp;'')&nbsp;+&nbsp;'&nbsp;'&nbsp;+hash;

document.write('&lt;a&nbsp;href=&quot;http://aqurl.info/v2/urls/twitter?t='&nbsp;+&nbsp;encodeURIComponent(title)&nbsp;+&nbsp;'&amp;amp;u='&nbsp;+&nbsp;encodeURIComponent(url)&nbsp;+&nbsp;'&amp;amp;a='&nbsp;+&nbsp;encodeURIComponent(account)&nbsp;+&nbsp;'&quot;&gt;&lt;img&nbsp;src=&quot;'&nbsp;+&nbsp;banner&nbsp;+&nbsp;'&quot;&nbsp;alt=&quot;Retweetする&quot;&nbsp;/&gt;&lt;/a&gt;');
&lt;/script&gt;
</pre>

<h4>コードを書き換える</h4>
<p>各設定項目を自由に書き換えて下さい。書き換えるときは、「&#8217;」の間だけを書き換えるようにしましょう。</p>
<h4>画像を書き換える</h4>
<p>アイコンは、<a href="http://playgroup-kiba.com/">プレイグループ木場校</a>様が4種類作ってくださいましたので、これを使っていただいても構いません。お好きなものをお選び下さい。</p>
<p><img src="http://aqurl.info/v2/banner/b1.gif" alt="アイコンタイプ1" width="200" height="59" /> <input type="text" value="http://aqurl.info/v2/banner/b1.gif" size="35" /> <img src="http://aqurl.info/v2/banner/b2.gif" alt="アイコンタイプ2" width="200" height="59" /> <input type="text" value="http://aqurl.info/v2/banner/b2.gif" size="35" /> <img src="http://aqurl.info/v2/banner/b3.gif" alt="アイコンタイプ3" width="200" height="59" /> <input type="text" value="http://aqurl.info/v2/banner/b3.gif" size="35" /> <img src="http://aqurl.info/v2/banner/b4.gif" alt="アイコンタイプ4" width="200" height="59" /> <input type="text" value="http://aqurl.info/v2/banner/b4.gif" size="35" /></p>
<p>これからも増やすかもしれませんし、もし「作ったけど上げるー」という天使のような方がいましたら、ぜひくださいっ。 その他、機能リクエストなどは、お気軽にコメントまたは「<a href="http://twitter.com/seltzer">@seltzer</a>」までお知らせくださいませ。</p>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F2011">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F2011&amp;source=seltzer&amp;style=normal" height="61" width="50" />
			</a>
		</div>]]></content:encoded>
			<wfw:commentRss>http://h2o-space.com/blog/2011/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>USTREAMを iPhoneで見る方法</title>
		<link>http://h2o-space.com/blog/2017</link>
		<comments>http://h2o-space.com/blog/2017#comments</comments>
		<pubDate>Sat, 27 Feb 2010 10:50:30 +0000</pubDate>
		<dc:creator>h2ospace</dc:creator>
				<category><![CDATA[ブログ]]></category>
		<category><![CDATA[ustream]]></category>

		<guid isPermaLink="false">http://h2o-space.com/?p=2017</guid>
		<description><![CDATA[
USTREAMは、iPhoneでも見ることができるのですが、Twitterクライアントなどからリンクをクリックしても、残念ながら見られません。
そこで、ここではその視聴方法を紹介しましょう。
Ustream Vi [...]]]></description>
			<content:encoded><![CDATA[
<p>USTREAMは、iPhoneでも見ることができるのですが、Twitterクライアントなどからリンクをクリックしても、残念ながら見られません。</p>
<p>そこで、ここではその視聴方法を紹介しましょう。</p>
<h3>Ustream Viewing Applicationをインストールする</h3>
<p>まずは、iPhone用の視聴ソフトである「Ustream Viewing Application」をインストールします（無料）。</p>
<ul>
	<li><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=301520250&amp;mt=8">Ustream Viewing Application</a>(iTunes Store)</li>
</ul>
<p>このソフトを起動すると、現在放送中の番組やこれから放送される番組などを見ることが出来ます。</p>
<div class="imgCenter"><a href="http://h2o-space.com/_wp/wp-content/uploads/2010/02/1.png"><img class="alignnone size-medium wp-image-2018" title="図：Ustream Viewing Application" src="http://h2o-space.com/_wp/wp-content/uploads/2010/02/1-200x300.png" alt="" width="200" height="300" /></a></div>
<h3>自分のチャンネルを申請する</h3>
<p>さて、見るだけならこれで十分なのですが、自分でチャンネルを持っている場合は、もう一工夫必要です。 USTREAMのチャンネルは、自由に作ることができるものの、iPhoneのViewerには標準では表示されず、「卑猥な映像を流さない」「規約に違反しない」といった制約をしなければなりません。しかも英語で。</p>
<p>やり方は、<a href="http://twitter.com/gaku">@gaku</a>さんのブログが詳しいです。</p>
<ul>
	<li><a href="http://www.freesia.org/blog/2010/02/ustreamiphone.html">Ustream、iPhoneアプリで検索でるよう申請する方法 &#8211; KOMOREBI||blog</a></li>
</ul>
<p>ちなみに、うちで出したメールはこちら。英語も話せるバイト君が書いてくれたので、きっと大丈夫。（しゃちょーはしゃべれない）</p>
<blockquote>
<p>Subject: Finding shows on the iPhone</p>
<p>Dear the members of Ustream Manegement Team,</p>
<p>I apply to you for the permission of finding shows on the iPhone. Here&#8217;s my username, a link to your stream, and a description of my average broadcast.</p>
<p>username : h2ospace link : http://www.ustream.tv/channel/h2ospace-php description : showing the basic technique and knowledge of PHP for Web developers.</p>
<p>Hoping to hear from you soon</p></blockquote>
<p>で、本日無事に申請が通りまして、見られるようになりました！　放送中に「h2o」などで検索をしていただければ、出てくると思いますので、もしよろしければ、iPhoneでもゆるくご覧いただければ幸いです。</p>
<p>今後も、週末を中心にゆるく放送を続けて行こうかなと思っておりますので、どうぞよろしくお願いいたします。ひとまず、本日の PM 11:00から「ノンプログラマのための PHP勉強会 第2回 &#8211; オブジェクト指向を攻略せよ」を放送いたします。なにとぞー。</p>
<ul>
	<li><a href="http://www.ustream.tv/channel/h2ospace-php">ノンプログラマのための PHP勉強会 第2回 &#8211; オブジェクト指向を攻略せよ</a></li>
</ul>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F2017">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F2017&amp;source=seltzer&amp;style=normal" height="61" width="50" />
			</a>
		</div>]]></content:encoded>
			<wfw:commentRss>http://h2o-space.com/blog/2017/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Zen-Condigの基本文法をおさらい</title>
		<link>http://h2o-space.com/blog/2002</link>
		<comments>http://h2o-space.com/blog/2002#comments</comments>
		<pubDate>Wed, 17 Feb 2010 01:00:15 +0000</pubDate>
		<dc:creator>h2ospace</dc:creator>
				<category><![CDATA[ブログ]]></category>
		<category><![CDATA[Zen-Coding]]></category>

		<guid isPermaLink="false">http://h2o-space.com/?p=2002</guid>
		<description><![CDATA[先日の USTREAMでの勉強会でも完全に主役の座を奪ってしまった感のある「Zen-Coding」。 私がデモをしている間でも、Twitterで皆様「どうやってコーディングをしているんだ？」と、つぶやきあっていました。 [...]]]></description>
			<content:encoded><![CDATA[<p>先日の USTREAMでの勉強会でも完全に主役の座を奪ってしまった感のある「Zen-Coding」。 私がデモをしている間でも、Twitterで皆様「どうやってコーディングをしているんだ？」と、つぶやきあっていました。</p>
<p>Zen-Coding自体については、すでに<a href="http://h2o-space.com/blog/1929">こちらのエントリー</a>などでご紹介している通りですが、ここではいくつか基本的な文法を紹介しておきましょう。覚えると、本当にHTMLコーディングというものの世界が変わってしまうほどの衝撃を持っています。ぜひ、ご堪能ください。</p>
<h4>まずはインストール</h4>
<p>インストールの方法は、こもりまさあきさんのブログに詳しく書かれています。</p>
<ul>
	<li><a href="http://blog.gaspanik.com/coding-with-textmate-and-zencoding">TextMate+Zen-Codingで超速コーディング？  |  gaspanik weblog</a></li>
	<li><a href="http://blog.gaspanik.com/textmate-with-zencoding-ext">Zen-Codingでできるあんなことこんなこと  |  gaspanik weblog</a></li>
	<li><a href="http://blog.gaspanik.com/coda-with-tea-for-coda">CodaにZen-Codingを入れてみると…  |  gaspanik weblog</a></li>
</ul>
<p>私の場合は「<a href="http://www.panic.com/jp/coda/">Coda</a>」にインストールして利用しています。これが一番便利かなと思いました。</p>
<h4>タグを作る</h4>
<p>最も基本的な文法は、こちら</p>
<pre class="brush:xml">div</pre>
<p>このように打ち込んで、[Ctrl+,]を打つと、次のように展開されます。</p>
<pre class="brush:xml">&lt;div&gt;&lt;/div&gt;</pre>
<p>しかも、カーソルはdiv要素の間に入るのでそのまま打ち込むことが出来ます。 また、例えば「a」などのタグの場合「href」属性がほぼ必ずつきます。このようなタグの場合は・・</p>
<pre class="brush:xml">a</pre>
<p>とするだけで</p>
<pre class="brush:xml">&lt;a href=""&gt;&lt;/a&gt;</pre>
<p>となった上、href属性の内容部分にカーソルが位置します。 さぁ、ここからどんどんいきます。</p>
<h4>ID属性・class属性を指定する</h4>
<p>続いてはこちらの文法</p>
<pre class="brush:xml">div#id.class1.class2</pre>
<p>こうなります。</p>
<pre class="brush:xml">&lt;div id="id" class="class1 class2"&gt;&lt;/div&gt;</pre>
<p>#でid属性、.でclass属性。CSSのセレクタと同じですね。タグに続けて記述します。 クラスは複数指定してもきちんと、一つのclass属性内に記述されます。便利。</p>
<h4>連結</h4>
<pre class="brush:xml">div#head+div#body+div#foot</pre>
<p>こちらは、こうなります。</p>
<pre class="brush:xml">&lt;div id="head"&gt;&lt;/div&gt;
&lt;div id="body"&gt;&lt;/div&gt;
&lt;div id="foot"&gt;&lt;/div&gt;</pre>
<p>+記号は連結。一気に複数のタグを出力出来ます。</p>
<h4>親子関係</h4>
<pre class="brush:xml">div#id&gt;ul&gt;li</pre>
<p>ulとliタグなど、親子関係を形成する場合は「&gt;」を使うと・・・</p>
<pre class="brush:xml">&lt;div id="id"&gt;
	&lt;ul&gt;
		&lt;li&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;</pre>
<p>こうなります。インデントまでしっかり取ってくれるのが素敵です。</p>
<h4>繰り返し・連番</h4>
<p>かなり高度なテクニックとしてはこちら。</p>
<pre class="brush:xml">ul&gt;li#id$*5</pre>
<p>ちょっと、どうなるのか予想がつかないかもしれませんが、こうなります。</p>
<pre class="brush:xml">&lt;ul&gt;
	&lt;li id="id1"&gt;&lt;/li&gt;
	&lt;li id="id2"&gt;&lt;/li&gt;
	&lt;li id="id3"&gt;&lt;/li&gt;
	&lt;li id="id4"&gt;&lt;/li&gt;
	&lt;li id="id5"&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
<p>まず、「&gt;」によってulとliは親子になります。liは「#」によってid属性が付加されますが、「$」という記号があります。 先にその後の「*」を解説すると、これは「繰り返し」。その後に数字の分だけ繰り返されます。 その際に、「$」があるとそこが連番となり、1から順番に番号が振られるというわけです。</p>
<h4>HTMLの基本構文、コンディショナルコメント</h4>
<p>さらに便利なショートカットが準備されています。</p>
<pre class="brush:xml">html:5</pre>
<p>これは・・</p>
<pre class="brush:xml">&lt;!DOCTYPE HTML&gt;
&lt;html lang="en-US"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	&lt;title&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;</pre>
<p>こうなります。スニペットとかいらないですね。lang属性が「en-US」なので、「ja-JP」に直さなければなりませんが、これはどこかで変えられるのですかね？　わかったら追記します。</p>
<pre class="brush:xml">cc:ie6</pre>
<p>これは</p>
<pre class="brush:xml">&lt;!--[if lte IE 6]&gt;

&lt;![endif]--&gt;</pre>
<p>こうなります。例えば「cc:ie6&gt;script+link」なんてしてあげると、どうなるかわかりますか？　実際にやってみてください。</p>
<h4>後からタグ付け</h4>
<p>例えば、先に</p>
<p>リンクです</p>
<p>等と書いてしまったあとで、ここに</p>
<p>&lt;a href=&#8221;"&gt;リンクです&lt;/a&gt;</p>
<p>などとマークアップしたいことは良くあります。 そんな時、Codaならまず上記の文字列を選択して、メニューから「プラグイン→TEA for Coda→Zen→Wrap with Abbereviation」をクリックすると、ダイアログボックスが表示されます。</p>
<p>ここに、「a」と入力すると選択した文字列を囲んでくれるというわけです。 さらに例えば・・・</p>
<pre class="brush:xml">リスト1
リスト2
リスト3
リスト4
リスト5</pre>
<p>なんて、テキストを並べてしまった場合に、これをリストにしたいときは・・ 全体を選択した後、先のメニューを選んで、次のように打ち込みます。</p>
<pre class="brush:xml">ul&gt;li*</pre>
<p>すると・・</p>
<pre class="brush:xml">&lt;ul&gt;
	&lt;li&gt;リスト1&lt;/li&gt;
	&lt;li&gt;リスト2&lt;/li&gt;
	&lt;li&gt;リスト3&lt;/li&gt;
	&lt;li&gt;リスト4&lt;/li&gt;
	&lt;li&gt;リスト5&lt;/li&gt;
&lt;/ul&gt;</pre>
<p>どーん。参ったか！「li*」という記述は、数を指定せずに「あるだけ全部」という意味。</p>
<h4>まとめ</h4>
<p>いかがでしたか？　Zen-Coding。私も、知ってからというもの本当に惚れまくっていて、寝ても覚めてもZen-Codingのことを考えています。もう、HTMLコーダーやプログラマは、必須のスキルになるのではないかというくらい、惚れ込んでいます。HTMLの大発明と言っても過言ではないでしょう。</p>
<p>なお、本日（2010年 2月 17日）の 22時くらいから、先のこもりまさあきさんが、USTREAMで「生Zen-Coding」を開催されるそうです。サンプルサイトをZen-Codingを使って、実際につくる過程を見せてくれるそうで、これは必見。</p>
<ul>
	<li><a href="http://blog.gaspanik.com/zen-coding-live">UStreamで生Zen-Codingやってみましょうか</a></li>
</ul>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F2002">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F2002&amp;source=seltzer&amp;style=normal" height="61" width="50" />
			</a>
		</div>]]></content:encoded>
			<wfw:commentRss>http://h2o-space.com/blog/2002/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>ノンプログラマのための PHP勉強会 on USTREAMの資料などを公開します</title>
		<link>http://h2o-space.com/blog/1991</link>
		<comments>http://h2o-space.com/blog/1991#comments</comments>
		<pubDate>Tue, 16 Feb 2010 12:00:48 +0000</pubDate>
		<dc:creator>h2ospace</dc:creator>
				<category><![CDATA[ブログ]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[ustream]]></category>

		<guid isPermaLink="false">http://h2o-space.com/?p=1991</guid>
		<description><![CDATA[金曜日の夜に思いついて、土曜日の朝に告知をして日曜日の夜にやっちゃうという、非常に計画性のない勉強会でしたが「ノンプログラマのための PHP勉強会 on USTREAM」、楽しんでいただけましたでしょうか？  まずは、録 [...]]]></description>
			<content:encoded><![CDATA[<p>金曜日の夜に思いついて、<a href="http://h2o-space.com/news/1976">土曜日の朝に告知</a>をして日曜日の夜にやっちゃうという、非常に計画性のない勉強会でしたが「ノンプログラマのための PHP勉強会 on USTREAM」、楽しんでいただけましたでしょうか？  まずは、録画映像を公開いたします。</p>
<div class="imgCenter"><object id="utv145729" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="386" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="name" value="utv_n_673963" /><param name="flashvars" value="loc=%2F&amp;autoplay=false&amp;vid=4721906" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.ustream.tv/flash/video/4721906" /><embed id="utv145729" type="application/x-shockwave-flash" width="480" height="386" src="http://www.ustream.tv/flash/video/4721906" allowscriptaccess="always" allowfullscreen="true" flashvars="loc=%2F&amp;autoplay=false&amp;vid=4721906" name="utv_n_673963"></embed></object></div>
<p>最大 90名の皆様にご参加頂きました。また、録画は現在 500名超の方に見ていただいております。拙い講義でしたが、<a href="http://twitter.com/#search?q=%23h2ospacetv">あたたかい言葉をかけていただきまして</a>誠にありがとうございました！  プレゼン資料や、当日作ったプログラムはこちらに公開しています。</p>
<ul>
	<li><a href="http://h2o-space.com/h2otvslides/vol01.html">スライド資料</a></li>
	<li><a href="https://docs.google.com/Doc?docid=0AQihCTwNmTMAZGdzbmNneDJfMjAyZzdmZzVzY2g&amp;hl=en">メモ用紙</a></li>
</ul>
<p>少しでも、皆様の参考になれば幸いです。</p>
<p>私の方は、USTREAMを本格的に使うというトライアルでしたが、非常に面白い経験をすることが出来ました。いくつかリストアップしたいと思います。</p>
<h4>告知力がスゴい</h4>
<p>今回、先の通り告知はこのサイトでのみ。しかも休日にたった一日というものでした。しかし、ブログのエントリーをTwitterに流したところ、どんどんRetweetしていただき、瞬く間に多くの方々に知られることになりました。</p>
<p>また、開始前も 30分前に「開場」としてライブ映像を流し始め、チャット機能で話し始めると、それらがどんどん Twitterに流れていき、人が人を呼んで開始時点で 20名以上に増えました。そこから録画を初めてイベントをスタートすると、もう増える一方で視聴者は増え続けていったというわけです。</p>
<h4>手軽さがスゴい</h4>
<p>今回、私が利用したのはデュアルディスプレイのiMacと、MacBook Airです。iMacは放送用に使い、デュアルディスプレイの1枚を放送用にしました。もう1枚では、USTREAM Producerを起動してWebカメラとの切り替えや録画のON/OFFなどを設定しました。</p>
<p>カメラや音声の機材は、iMacに付属の iSightとマイクのみ。音声も十分聞き取れたようです。スゴいですね。</p>
<p>MacBook Airは場合によっては不要なのですが、今回プレゼン資料にKeynoteを使ったため、プレゼン中は画面が真っ黒になってしまったのです。そこで、USTREAMを監視するためにMacBook Airを使っていました。とはいえ、本当に有り合わせのものだけで出来てしまったのでスゴいです。</p>
<h4>皆さんの反応がスゴい</h4>
<p>私はこれまで、何度か実際のイベントなどで話す機会はあったのですが、イベントとなると当然ながら私が話している間は、みなさんは聞いていて、終わった後に「質疑応答」といった時間を設けて、質問をしていただいていました。しかも、こういった場所で質問できる方は限られているため、実際には質問したいけど出来ないという方も、たくさんいらっしゃいました。</p>
<p>しかし、USTREAMでは話しているそばから、みなさんが思い思いに Twitterでつぶやくので、その反応を見るのが非常にエキサイティングでした。 音声が聞き取りづらい、なんのツールを使っているんだろう？　今何をしたのだろう？　と疑問に思ったことをどんどんぶつけてくれ、さらにそれに対しての回答も参加者の方がしていただき、場の中で完結してしまっていました。これは、非常に面白い現象でした。</p>
<h4>まとめ：USTREAMでイベント運営・教育業界が変わる？</h4>
<p>ということでまとめですが、イベントの最後の方でTwitterでも話題になっていたのですが「USTREAM大学ができちゃうかも？」という意見がありました。私も全く同じことを考えています。</p>
<p>今、Web関係の勉強会は実にたくさんの種類が開催されていますが、殆どが東京や大阪などの大都市に集中してしまっています。そのため、なかなか参加することが出来ない方や、体が不自由など何らかの事情で参加出来ない方もいます。 しかし、USTREAMを使えばそういった方々にも、リアルなイベントをご覧いただくことが出来ます。録画や録音データとはまた違う、「生放送」というところに、臨場感や参加している感があるのではないかと思います。</p>
<p>しばらくは、もちろん通常のイベントを生中継で放映するという使われ方が主だと思いますが、今回の試みのように USTREAMでのみ開催されるというイベントが増えて行くと、非常に面白い世界が待っているのではないかと思いました。</p>
<p>また、今回好評をいただいたので調子にのって、第 2回を計画してみたいと思います。ぜひ、お時間が合いましたら参加してやってください。 ご参加いただいた皆様、誠にありがとうございました！</p>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F1991">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F1991&amp;source=seltzer&amp;style=normal" height="61" width="50" />
			</a>
		</div>]]></content:encoded>
			<wfw:commentRss>http://h2o-space.com/blog/1991/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>foursquareにチェックインするサンプルプログラム with CakePHP</title>
		<link>http://h2o-space.com/blog/1963</link>
		<comments>http://h2o-space.com/blog/1963#comments</comments>
		<pubDate>Mon, 15 Feb 2010 01:00:58 +0000</pubDate>
		<dc:creator>h2ospace</dc:creator>
				<category><![CDATA[ブログ]]></category>
		<category><![CDATA[CakePHP]]></category>
		<category><![CDATA[foursquare]]></category>

		<guid isPermaLink="false">http://h2o-space.com/?p=1963</guid>
		<description><![CDATA[ポストTwitterとして名高い、foursquare。私も大注目しています。
このfoursquare、APIを一般に公開していて、チェックインからチップスの追加まで、すべての機能を利用することが出来ます。そこで、早 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.ideaxidea.com/archives/2010/01/foursquare.html">ポストTwitterとして名高い</a>、foursquare。私も大注目しています。</p>
<p>このfoursquare、APIを一般に公開していて、チェックインからチップスの追加まで、すべての機能を利用することが出来ます。そこで、早速サンプルプログラムを作ってみました。不安定かもしれませんが、こちらからどうぞ。</p>
<ul>
	<li><a href="http://h2o-space.com/dev/foursquare/">foursquareにチェックインするサンプルプログラム with CakePHP</a></li>
</ul>
<p>では、軽く解説を。</p>
<p>APIのマニュアルは<a href="http://groups.google.com/group/foursquare-api/web/api-documentation">こちら</a>にあります。また、<a href="http://twitter.com/faw">@faw</a>さんが、<a href="http://alphawind.org/docs/foursquare-API/">日本語訳</a>もしてくれています。</p>
<p>OAuthを使った方法もあるのですが、ちょっと難しいので、ここでは BASIC認証を使う方法を試しました。 まずはログインと、候補の取得。これには「venues」というメソッドを使います。ここに、GETで緯度・経度やログイン情報を送り込むのですが、CakePHPではHTTP通信を行うために「CakeSocket」というものが準備されているので、これを使います。次のような感じ。</p>
<pre class="brush:php">uses('http_socket', 'Xml');
$socket = new HttpSocket();

$url = 'http://api.foursquare.com/v1/venues';;
$query = array(
	'geolat'=&gt;$this-&gt;data['Clip']['lat'],
	'geolong'=&gt;$this-&gt;data['Clip']['lon']
);
$res = $socket-&gt;get($url, $query, array(
	'auth'	=&gt; array(
		'user'	=&gt; $this-&gt;data['Clip']['username'],
		'pass'	=&gt; $this-&gt;data['Clip']['password']
	)
));

// get XML
$xml = new Xml($res);</pre>
<p>これで「$xml」にXMLの解析したものが出るので、これでリストを構築して行きます。 チェックインには、Venue IDと呼ばれる、場所ごとに割り振られたIDを渡すので、これをラジオボックスなどで渡しながら「shout（つぶやき）」を渡して、今度は「checkin」メソッドを使います。</p>
<pre class="brush:php">uses('http_socket', 'Xml');
$socket = new HttpSocket();

if ($this-&gt;data) {
	$url = 'http://api.foursquare.com/v1/checkin';; 
	$query = array(
		'vid'	=&gt; $this-&gt;data['Clip']['id'],
		'shout'	=&gt; $this-&gt;data['Clip']['shout']
	);
	$res = $socket-&gt;post($url, $query, array(
		'auth'	=&gt; array(
			'user'	=&gt; $user['Clip']['username'],
			'pass'	=&gt; $user['Clip']['password']
		)
	));

	$this-&gt;render('thanks');
}</pre>
<p>これでOK。チェックインすることが出来ます。</p>
<p>これを使えば、好きな場所をチェックインすることができちゃいます。 アリバイ工作などに使わないよう、ご注意ください。（笑</p>
<p>ダウンロードはこちらからどうぞ。</p>
<ul><li><a href="http://h2o-space.com/_wp/wp-content/uploads/2010/02/foursquare.zip" onclick="javascript: pageTracker._trackPageview('/downloads/foursquare');">foursquareにチェックインするサンプルプログラム with CakePHP</a></li></ul>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F1963">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F1963&amp;source=seltzer&amp;style=normal" height="61" width="50" />
			</a>
		</div>]]></content:encoded>
			<wfw:commentRss>http://h2o-space.com/blog/1963/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>USTREAMで、「ノンプログラマのためのPHP勉強会」を開催します</title>
		<link>http://h2o-space.com/news/1976</link>
		<comments>http://h2o-space.com/news/1976#comments</comments>
		<pubDate>Sat, 13 Feb 2010 04:57:51 +0000</pubDate>
		<dc:creator>h2ospace</dc:creator>
				<category><![CDATA[お知らせ]]></category>
		<category><![CDATA[ブログ]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[ustream]]></category>

		<guid isPermaLink="false">http://h2o-space.com/?p=1976</guid>
		<description><![CDATA[突然ですが、「ノンプログラマのためのPHP勉強会」というのを開催いたします。場所は・・自宅！　USTREAMでのみ開催してみます。まずは告知。
■イベント名ノンプログラマのためのPHP勉強会 on USTREAM
■ [...]]]></description>
			<content:encoded><![CDATA[<p>突然ですが、「ノンプログラマのためのPHP勉強会」というのを開催いたします。場所は・・自宅！　USTREAMでのみ開催してみます。まずは告知。</p>
<p>■イベント名<br />ノンプログラマのためのPHP勉強会 on USTREAM</p>
<p>■開催場所<br />USTREAM h2ospace channel<br /><a href="http://www.ustream.tv/channel/h2ospace-php">http://www.ustream.tv/channel/h2ospace-php</a></p>
<p>■日時<br />2010年 2月 14日（日） PM 9:00頃から 30分位</p>
<p>■参加費用<br />当然無料</p>
<p>■内容<br />・なぜプログラムを難しいと感じるのか<br />・PHPという言語<br />・PHPで俺ツールを作ろう<br />・HTMLエスケープツールを作る</p>
<p>■準備するもの<br />・パソコン（Windows、Mac問わず）<br /> ・使い易いエディタ（Win=秀丸とか、TeraPadとか。Mac=miとか JEditとか、Codaとか。DWでもOK<br />・<a href="http://www.apachefriends.org/jp/xampp-windows.html">XAMPP</a>、<a href="http://www.mamp.info/en/index.html">MAMP</a>などローカルでPHPが動く環境か、または PHPが動くレンタルサーバー</p>
<p>こんな感じで進行しようかと思います。</p>
<p>ご興味がある方は、是非ともご参加ください！　参加者が 0人でも、録画しながら強行します！（笑</p>
<p>また、出来ましたら次のアンケートに回答いただけると幸いです。</p>
<div style="border: 1px solid #ccc; padding: 10px"><iframe src="https://spreadsheets.google.com/embeddedform?formkey=dDIzVnRPN2VRNkYyQWZIUE1IUkhBRnc6MA" width="500" height="400" frameborder="0" marginheight="0" marginwidth="0">Loading&#8230;</iframe></div>
<p>かなり実験的な要素が強くてドキドキしますが、USTREAMはかなり未来を感じるサービスなので、ぜひ面白いことやってみたいです。楽しみましょう！</p>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fh2o-space.com%2Fnews%2F1976">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fh2o-space.com%2Fnews%2F1976&amp;source=seltzer&amp;style=normal" height="61" width="50" />
			</a>
		</div>]]></content:encoded>
			<wfw:commentRss>http://h2o-space.com/news/1976/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>CakePHPで、確認画面、確認メールありのユーザー登録をつくる</title>
		<link>http://h2o-space.com/blog/1950</link>
		<comments>http://h2o-space.com/blog/1950#comments</comments>
		<pubDate>Mon, 08 Feb 2010 00:00:57 +0000</pubDate>
		<dc:creator>h2ospace</dc:creator>
				<category><![CDATA[ブログ]]></category>
		<category><![CDATA[CakePHP]]></category>

		<guid isPermaLink="false">http://h2o-space.com/?p=1950</guid>
		<description><![CDATA[
CakePHPはデータベース周りの処理がとにかく楽ちんなのですが、一度確認画面を挟んだり確認メールを挟んだりすると、コントロールが難しくなります。
そこで、ここではどちらも実現したサンプルを作ってみました。以下から [...]]]></description>
			<content:encoded><![CDATA[
<p>CakePHPはデータベース周りの処理がとにかく楽ちんなのですが、一度確認画面を挟んだり確認メールを挟んだりすると、コントロールが難しくなります。</p>
<p>そこで、ここではどちらも実現したサンプルを作ってみました。以下からご覧下さい。 <a onclick="javascript: pageTracker._trackPageview('/dev/user_add');" href="http://h2o-space.com/dev/user_add/">http://h2o-space.com/dev/user_add/</a></p>
<p>まず、メールアドレスとパスワードを設定すると確認画面に移動します。書きなおすことも出来ます。 続いて、確認メールを送信して送られるURLをクリックすると正式登録ができるという仕組みです。</p>
<div class="imgCenter withBorder"><a href="http://h2o-space.com/_wp/wp-content/uploads/2010/02/2010-02-06_1533.png"><img class="alignnone size-medium wp-image-1951" title="図：ユーザー登録サンプル" src="http://h2o-space.com/_wp/wp-content/uploads/2010/02/2010-02-06_1533-300x83.png" alt="" width="300" height="83" /></a></div>
<p>順番に作っていきましょう。</p>
<h3>データベースの構築とCakePHPの準備</h3>
<p>まずは、データベースを準備します。次のテーブルを作成しましょう。</p>
<pre class="brush:xml">CREATE TABLE `ua_users` (
  `id` int(11) NOT NULL auto_increment,
  `status` tinyint(4) default NULL,
  `username` varchar(255) default NULL,
  `password` varchar(255) default NULL,
  `keycode` varchar(20) default NULL,
  `created` datetime default NULL,
  `modified` datetime default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;</pre>
<p>CakePHPの Authコンポーネントを使うため、「username」と「password」というフィールド名を作っておきます。他に重要なのは「status」と「keycode」です。これらはこの後解説します。</p>
<p>次に、<a href="http://cakephp.jp/">CakePHPをダウンロード</a>して、/app/config/core.phpの「Security.salt」の設定と「database.php」を設定して行きます。このあたりはさまざまなサイトで解説があるので、そのあたりを参考に。</p>
<h3>コンポーネントの追加</h3>
<p>続いてコンポーネントを追加します。ここでは、電子メールの送信にQdmailを使わせていただきます。</p>
<ul>
	<li><a href="http://hal456.net/qdmail/">PHP高機能日本語メール送信ライブラリ・文字化けフリー &#8211; Qdmail &#8211; PHP::Mail Library , Quick and Detailed for Multibyte</a></li>
</ul>
<p>ダウンロードして「/app/controllers/components」に「qdmail.php」をコピーします。</p>
<h3>Userコントローラ・モデルの追加</h3>
<p>続いて、Bakeなどを使ってUserのコントローラーやモデルを追加して行きます。</p>
<p>/app/models/user.php</p>
<pre class="brush:php">class User extends AppModel {

	var $name = 'User';
	var $validate = array(
		'username'		=&gt; array(
			'rule'		=&gt; 'email',
			'required'	=&gt; true,
			'message'	=&gt; '* メールアドレスを記入してください'
		),
		'password_s'	=&gt; array(
			'rule'		=&gt; array('minLength', 6),
			'required'	=&gt; true,
			'message'	=&gt; '* パスワードは 6文字以上で記入してください'
		)
	);

}</pre>
<p>/app/controlls/user_controller.php</p>
<pre class="brush:php">class UsersController extends AppController {

	var $name = 'Users';
	var $components = array('Session', 'Auth', 'Qdmail');

	function beforeFilter() {
		$this-&gt;Auth-&gt;allow('*');
	}

}</pre>
<p>モデルでは、「username」と「password_s」にそれぞれ validateを設定します。コントローラーでは、「Session」「Auth」と先程組み込んだ「Qdmail」コンポーネントを読み込んで、beforeFilterで「Auth」の「allow」で全部のアクションに許可をします。 こうしないと、ログイン画面に飛ばそうとしてしまいます。</p>
<h3>登録画面の作成</h3>
<p>それでは、登録画面を作りましょう。ビューを準備します。</p>
<p>/views/add.ctp</p>
<pre class="brush:php">&lt;h2&gt;ユーザー登録&lt;/h2&gt;
&lt;?php echo $form-&gt;create('User', array('action'=&gt;'add')); ?&gt;
&lt;dl&gt;
	&lt;dt&gt;メールアドレス&lt;/dt&gt;
	&lt;dd&gt;&lt;?php echo $form-&gt;text('User.username') . $form-&gt;error('User.username'); ?&gt;&lt;/dd&gt;
	&lt;dt&gt;パスワード&lt;/dt&gt;
	&lt;dd&gt;&lt;?php echo $form-&gt;password('User.password_s') . $form-&gt;error('User.password_s'); ?&gt;&lt;/dd&gt;
&lt;/dl&gt;
&lt;?php echo $form-&gt;submit('登録内容を確認する'); ?&gt;
&lt;?php echo $form-&gt;end(); ?&gt;</pre>
<p>ここでのポイントは、パスワードのフィールドが「password_s」というフィールドになっていて、データベースと一致していません。 これは、Authコンポーネントを使う弊害で、Authコンポーネントは「password」というフィールド名を見ると、すぐに暗号化をしてしまいます。しかも、不可逆暗号なのでもとに戻すことも出来ません。</p>
<p>これでは、ユーザー登録時にパスワードの文字数チェックが出来ないのでフィールド名を変えているのです。</p>
<p>コントローラーの「add」アクションは次のようになります。</p>
<p>/app/controllers/users_controller.phpに追加</p>
<pre class="brush:php">	function add($action = null) {
		// submit
		if (!empty($this-&gt;data)) {
			$this-&gt;User-&gt;set($this-&gt;data);
			if ($this-&gt;User-&gt;validates()) {
				$this-&gt;data['User']['password_s'] = $this-&gt;Auth-&gt;password($this-&gt;data['User']['password_s']);
				$this-&gt;Session-&gt;write('user', $this-&gt;data);
				$this-&gt;set('data', $this-&gt;data);
				$this-&gt;render('check');
			}
		}

		// rewrite
		if ($action == 'rewrite' &amp;&amp; $this-&gt;Session-&gt;check('user')) {
			$this-&gt;data = $this-&gt;Session-&gt;read('user');
			// remove 'password_s'
			$this-&gt;data['User']['password_s'] = '';
		}
	}</pre>
<p>確認画面に移動するために、登録された内容をセッションに記録します。このとき、password_sはAuthコンポーネントを使って暗号化してから記録しておきます。</p>
<h3>確認画面を作る</h3>
<p>続いて確認画面を作ります。</p>
<p>/views/check.ctp</p>
<pre class="brush:php">&lt;h2&gt;登録内容の確認&lt;/h2&gt;
&lt;?php echo $form-&gt;create('User', array('action'=&gt;'check')); ?&gt;
&lt;dl&gt;
	&lt;dt&gt;メールアドレス&lt;/dt&gt;
	&lt;dd&gt;&lt;?php echo h($data['User']['username']); ?&gt;&lt;/dd&gt;
	&lt;dt&gt;パスワード&lt;/dt&gt;
	&lt;dd&gt;【表示しません】&lt;/dd&gt;
&lt;/dl&gt;
&lt;?php echo $html-&gt;link('≪書き直す', 'add/rewrite'); ?&gt;
&lt;?php echo $form-&gt;submit('確認メールを送信する'); ?&gt;
&lt;?php echo $form-&gt;end(); ?&gt;</pre>
<p>この時点で、すでにパスワードは表示できなくなっているため、ここでは表示していません。</p>
<p>「書き直す」というリンクは「add」アクションに「rewrite」というパラメータを付加してリンクします。 先程のプログラムで、addアクションは「$action」パラメータが「rewrite」でかつ、セッションにデータが記録されていたら、それを復元するという処理を入れています。</p>
<p>ただし、パスワードは再現出来ないため空白にして改めて記入してもらいます。</p>
<p>コントローラーにも「check」アクションを作ります。</p>
<p>/app/controllers/users_controller.phpに追加</p>
<pre class="brush:php">	function check() {
		if (!$this-&gt;Session-&gt;check('user')) {
			$this-&gt;redirect('add');
		}
		$this-&gt;data = $this-&gt;Session-&gt;read('user');

		// delete already data
		$this-&gt;User-&gt;deleteAll(array('username'=&gt;$this-&gt;data['User']['username']));

		// create keycode
		$this-&gt;data['User']['keycode'] = $this-&gt;Utility-&gt;getRandomString('10', 'num_char');
		$this-&gt;data['User']['status'] = '0';
		$this-&gt;data['User']['password'] = $this-&gt;data['User']['password_s'];
		// pre add
		if (!$this-&gt;User-&gt;save($this-&gt;data)) {
			$this-&gt;redirect('add');
		}

		// send a comfirmation mail
		$from = 'support@h2o-space.com';
		$subject = 'ユーザー登録の確認';
		$body = "次のURLをクリックして、ユーザー登録を完了してください。\n{url}";

		$this-&gt;Qdmail-&gt;to($this-&gt;data['User']['username']);
		$this-&gt;Qdmail-&gt;from($from);
		$this-&gt;Qdmail-&gt;subject($subject);
		$body = r('{url}', Router::url('/', true) . 'users/active/' . $this-&gt;data['User']['keycode'] , $body);
		$this-&gt;Qdmail-&gt;text($body);
		$this-&gt;Qdmail-&gt;send();

		$this-&gt;set('email', $this-&gt;data['User']['username']);
		$this-&gt;render('check_mail');
	}</pre>
<p>ここが最難関。まずはセッションをチェックして、きちんと記録されていたらデータベースに仮登録をします。 このとき、連続して何度も登録されている場合のために、すでに登録されているデータを一旦削除します。</p>
<p>そして、確認メールに記載するキーコードを生成させます。キーコードの生成は汎用性が高いので、別途コンポーネントを作成しました。Utilityコンポーネントです。次のファイルを作りましょう。</p>
<p>/app/controllers/components/utility.php</p>
<pre class="brush:php">class UtilityComponent extends Object {
	/**
	 * get random string
	 * @param int $length
	 * @param string $complex (num, char, num_char, all)
	 */
	function getRandomString($length = 10, $complex = 'num') {
		$num = '012345679';
		$char = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
		$sign = '!#$%&amp;()-=+*}{[]';

		switch($complex) {
		case 'num':
			$str = $num;
			break;
		case 'char':
			$str = $char;
			break;
		case 'num_char':
			$str = $num . $char;
			break;
		case 'all':
			$str = $num . $char . $sign;
			break;
		}

		list($msec, $sec) = split(' ', microtime());
        mt_srand($msec*100000);
        $ret = '';
        for($i=0; $i&lt;$length; $i++) {
            $x = mt_rand(0, strlen($str)-1);
            $ret .= substr($str, $x, 1);
        }
        return $ret;
	}
}</pre>
<p>桁数や、種類を指定してランダムな文字列を取得することが出来ます。 これを、「users_controller.php」から、次のようにして参照します。</p>
<p>/app/controllers/users_controller.phpを変更</p>
<pre class="brush:php">class UsersController extends AppController {

	var $name = 'Users';
	var $components = array('Session', 'Auth', 'Qdmail', 'Utility'); // ←ここ</pre>
<p>「$components」の最後に「Utility」を追加しました。これで、使うことが出来ます。</p>
<p>こうして、keycodeやstatusをセットしたら、一旦仮登録をしておきます。その上で、Qdmailを使って確認メールを送ります。</p>
<h3>確認メールの確認</h3>
<p>最後に確認メールの確認です。「active」アクションを作ります。</p>
<p>/app/controllers/users_controller.phpに追加</p>
<pre class="brush:php">	function active($keycode = null) {
		if ($keycode == '') {
			$this-&gt;redirect('index');
		}

		$data = $this-&gt;User-&gt;findAllByKeycode($keycode);
		if ($data) {
			$this-&gt;User-&gt;updateAll(
				array('keycode'=&gt;null, 'status'=&gt;'1'),
				array('id'=&gt;$data[0]['User']['id'])
			);
			$this-&gt;render('finish');
		} else {
			$this-&gt;render('failed');
		}
	}</pre>
<p>activeコントローラーには「$keycode」パラメータが渡ってくるので、これを使ってデータベースからデータを参照します。</p>
<p>発見できたら、statusを 1に、keycodeを削除してアップデートをかけることで「正式登録」にします。後は、完了画面を表示させて完了。 出来上がりました！</p>
<h3>反省点とダウンロード</h3>
<p>プログラムを作って記事を書きながら思ったのですが、今の仕組みだとkeycodeがたまたま重なってしまったときに、別人が正式登録されてしまいますね。。 確認メールのパラメータにidを増やしたり、keycodeを重ならないようなしくみにするなどの工夫が必要でした。。また改めてバージョンアップしてエントリーします。</p>
<p>何かの参考にしてみてくださいませ。サンプルコードのダウンロードはこちらからどうぞ。 （database.phpとcore.phpのSecurity.saltの設定をしないと動作しません）</p>
<ul>
	<li><a onclick="javascript: pageTracker._trackPageview('/download/h2o_user_add_sample_001.zip');" href="http://h2o-space.com/_wp/wp-content/uploads/2010/02/h2o_user_add_sample_001.zip">サンプルコードをダウンロードする</a></li>
</ul>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F1950">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fh2o-space.com%2Fblog%2F1950&amp;source=seltzer&amp;style=normal" height="61" width="50" />
			</a>
		</div>]]></content:encoded>
			<wfw:commentRss>http://h2o-space.com/blog/1950/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
