<div class="storycontent">
<?php global $more; $more = 0; ?>
<?php the_content(__('(more...)')); ?>
</div>

第1回のテーマは、「CamTwist」。USTREAMをするには欠かせない放送用のソフトウェア（Mac用）です。 その使い方を解説しています。もしよろしければ、是非ともご覧くださいませ。

これからも、10-20分程度で週に何回か、色々なテーマで更新できたらと思います。日にちは未定ですが、時間は午前 0時にはじめますので、もし宜しければぜひともチェックしてやって下さいませ。

• H2O Space.のチャンネル

どうぞよろしくお願いいたします。

http://h2o-space.com/about

といったURLにすることが出来ます。しかし、たまにこれが勝手に「about-2」などとなってしまうことがあります。これは、重複を防止するために自動的に付加される数字。しかし、これが他に同じ名前のページが無いのに、消しても消しても「-2」がついてしまうことがあるのです。

この犯人は、実はゴミ箱。ゴミ箱内のページのスラッグとも重複チェックがされてしまっているのです。これは、WordPressのバグなのではないでしょうか？

かなりはまってしまったので、メモがわりに投稿しておきます。困ったら、ゴミ箱を空にしてからお試し下さいませ。

今回のテーマは「オブジェクト指向を攻略せよ」。オブジェクト指向を勉強する時に出てくる「クラス」「インスタンス」「メソッド」「プロパティ」といった各用語を解説いたしました。録画データはこちらで。

また、スライド代わりに使った資料はこちらで公開しています。

• ノンプログラマのためのPHP勉強会 on USTREAM vol.2　資料

今回も、100名以上の方に視聴いただきました。ありがとうございます！　まだしばらく続けていきたいと思います。

すこし、USTREAMの使い方もつかめてきたので、また少し違った方向性の番組も作ってみようかなと思っています。

まだまだ面白くなりそうです。皆さんも、ぜひ発信側で楽しんでみてはいかがでしょう？

今回のテーマは「Flash ActionScriptによるモーショングラフィクス」だとか。 ROXIK の 城戸雅行（きどまさゆき）氏と alumican.net の 奥田透也（おくだゆきや）氏をゲストに迎え、ActionScript 3.0で複雑なモーションプログラムを構築するための、考え方や手法が紹介されるのだとか。

渋谷TSUTAYAのシアターで開催され、料金は 3,800円（学生は 1,900円）、その後アフターパーティもあるそうな。

かなり面白そうなイベントなので、ご興味ある方はぜひ！

• Flash モーションプログラミング | ロクナナワークショップ イベント企画 | GEEKs

• User クラス – Google App Engine – Google Code

• Google App Engine – Google Code

そこで、私もひとつ作ってみました。アイデアと、バナー画像を作ってくださったので、お客様でもあるプレイグループ木場校様。ありがとうございます！

まずは、こちらをポチっとしてみて下さい

こちらのボタンの特徴は、次のような内容を設定することが出来ます。

特徴

前に決まり文句をつけられます

これはよくある機能。標準は、そのページのタイトルとURLを拾いますが、その前に決まり文句をつけられます。標準では「おすすめ＞」です。

タイトルの一部を削れます

タイトルに、サイト名やSEO的なキーワードを設定しているページの場合、タイトルが非常に長くなります。そこで、決まった文字列を指定することでそれらを削除することが出来ます。例えば、このブログの場合は・・

Zen-Condigの基本文法をおさらい | ブログ | ちゃんとWebなホームページ制作会社（東京）　エイチツーオー・スペース[H2O Space.]

これがタイトルですが、「 | ブログ | ちゃんとWebなホームページ制作会社（東京）　エイチツーオー・スペース[H2O Space.]」を削除して・・・

Zen-Condigの基本文法をおさらい

などとすることが出来ます。

アカウントを設定出来ます

ブログ著者のアカウントを設定して、Retweet時にアカウントを付加することが出来ます。Retweetされたことが分かりやすいですし、その方をフォローするなどして、新しいつながりを作ることが出来ます。

ハッシュタグも設定出来ます

ハッシュタグもいくつでも設定出来ます。標準で「#aqurl」が設定されていますので、削除しても構いませんが、残していただけると助かります。

自由なアイコン・選べるアイコン

アイコンも画像パスを設定するだけ、簡単に変更することが出来ます。

使い方

コードをコピーする

次のコードをコピーして、自分のブログのテンプレートなどに貼付けて下さい。

<!-- H2O tweet -->
<script type="text/javascript">
// 使うバナー
var banner = 'http://aqurl.info/v2/banner/b4.gif';
// 削除するタイトル
var trimTtl = '';
// 先頭に付加するメッセージ
var message = 'これ読んだ＞';
// Twitterアカウント
var account = '';
// ハッシュタグ（空白区切って複数指定出来ます / 支障がなければ#aqurlを入れていただけると助かります）
var hash = '#aqurl';

/*** ここから下は変更しないでください ***/
var url = location.href;
var title = document.title;
title = message + title.replace(trimTtl, '') + ' ' +hash;

document.write('<a href="http://aqurl.info/v2/urls/twitter?t=' + encodeURIComponent(title) + '&amp;u=' + encodeURIComponent(url) + '&amp;a=' + encodeURIComponent(account) + '"><img src="' + banner + '" alt="Retweetする" /></a>');
</script>

コードを書き換える

各設定項目を自由に書き換えて下さい。書き換えるときは、「’」の間だけを書き換えるようにしましょう。

画像を書き換える

アイコンは、プレイグループ木場校様が4種類作ってくださいましたので、これを使っていただいても構いません。お好きなものをお選び下さい。

これからも増やすかもしれませんし、もし「作ったけど上げるー」という天使のような方がいましたら、ぜひくださいっ。 その他、機能リクエストなどは、お気軽にコメントまたは「@seltzer」までお知らせくださいませ。

そこで、ここではその視聴方法を紹介しましょう。

Ustream Viewing Applicationをインストールする

まずは、iPhone用の視聴ソフトである「Ustream Viewing Application」をインストールします（無料）。

• Ustream Viewing Application(iTunes Store)

このソフトを起動すると、現在放送中の番組やこれから放送される番組などを見ることが出来ます。

自分のチャンネルを申請する

さて、見るだけならこれで十分なのですが、自分でチャンネルを持っている場合は、もう一工夫必要です。 USTREAMのチャンネルは、自由に作ることができるものの、iPhoneのViewerには標準では表示されず、「卑猥な映像を流さない」「規約に違反しない」といった制約をしなければなりません。しかも英語で。

やり方は、@gakuさんのブログが詳しいです。

• Ustream、iPhoneアプリで検索でるよう申請する方法 – KOMOREBI||blog

ちなみに、うちで出したメールはこちら。英語も話せるバイト君が書いてくれたので、きっと大丈夫。（しゃちょーはしゃべれない）

Subject: Finding shows on the iPhone

Dear the members of Ustream Manegement Team,

I apply to you for the permission of finding shows on the iPhone. Here’s my username, a link to your stream, and a description of my average broadcast.

username : h2ospace link : http://www.ustream.tv/channel/h2ospace-php description : showing the basic technique and knowledge of PHP for Web developers.

Hoping to hear from you soon

で、本日無事に申請が通りまして、見られるようになりました！　放送中に「h2o」などで検索をしていただければ、出てくると思いますので、もしよろしければ、iPhoneでもゆるくご覧いただければ幸いです。

今後も、週末を中心にゆるく放送を続けて行こうかなと思っておりますので、どうぞよろしくお願いいたします。ひとまず、本日の PM 11:00から「ノンプログラマのための PHP勉強会 第2回 – オブジェクト指向を攻略せよ」を放送いたします。なにとぞー。

• ノンプログラマのための PHP勉強会 第2回 – オブジェクト指向を攻略せよ

Zen-Coding自体については、すでにこちらのエントリーなどでご紹介している通りですが、ここではいくつか基本的な文法を紹介しておきましょう。覚えると、本当にHTMLコーディングというものの世界が変わってしまうほどの衝撃を持っています。ぜひ、ご堪能ください。

まずはインストール

インストールの方法は、こもりまさあきさんのブログに詳しく書かれています。

• TextMate+Zen-Codingで超速コーディング？ | gaspanik weblog
• Zen-Codingでできるあんなことこんなこと | gaspanik weblog
• CodaにZen-Codingを入れてみると… | gaspanik weblog

私の場合は「Coda」にインストールして利用しています。これが一番便利かなと思いました。

タグを作る

最も基本的な文法は、こちら

div

このように打ち込んで、[Ctrl+,]を打つと、次のように展開されます。

<div></div>

しかも、カーソルはdiv要素の間に入るのでそのまま打ち込むことが出来ます。 また、例えば「a」などのタグの場合「href」属性がほぼ必ずつきます。このようなタグの場合は・・

a

とするだけで

<a href=""></a>

となった上、href属性の内容部分にカーソルが位置します。 さぁ、ここからどんどんいきます。

ID属性・class属性を指定する

続いてはこちらの文法

div#id.class1.class2

こうなります。

<div id="id" class="class1 class2"></div>

#でid属性、.でclass属性。CSSのセレクタと同じですね。タグに続けて記述します。 クラスは複数指定してもきちんと、一つのclass属性内に記述されます。便利。

連結

div#head+div#body+div#foot

こちらは、こうなります。

<div id="head"></div>
<div id="body"></div>
<div id="foot"></div>

+記号は連結。一気に複数のタグを出力出来ます。

親子関係

div#id>ul>li

ulとliタグなど、親子関係を形成する場合は「>」を使うと・・・

<div id="id">
	<ul>
		<li></li>
	</ul>
</div>

こうなります。インデントまでしっかり取ってくれるのが素敵です。

繰り返し・連番

かなり高度なテクニックとしてはこちら。

ul>li#id$*5

ちょっと、どうなるのか予想がつかないかもしれませんが、こうなります。

<ul>
	<li id="id1"></li>
	<li id="id2"></li>
	<li id="id3"></li>
	<li id="id4"></li>
	<li id="id5"></li>
</ul>

まず、「>」によってulとliは親子になります。liは「#」によってid属性が付加されますが、「$」という記号があります。 先にその後の「*」を解説すると、これは「繰り返し」。その後に数字の分だけ繰り返されます。 その際に、「$」があるとそこが連番となり、1から順番に番号が振られるというわけです。

HTMLの基本構文、コンディショナルコメント

さらに便利なショートカットが準備されています。

html:5

これは・・

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

</body>
</html>

こうなります。スニペットとかいらないですね。lang属性が「en-US」なので、「ja-JP」に直さなければなりませんが、これはどこかで変えられるのですかね？　わかったら追記します。

cc:ie6

これは

<!--[if lte IE 6]>

<![endif]-->

こうなります。例えば「cc:ie6>script+link」なんてしてあげると、どうなるかわかりますか？　実際にやってみてください。

後からタグ付け

例えば、先に

リンクです

等と書いてしまったあとで、ここに

<a href=”">リンクです</a>

などとマークアップしたいことは良くあります。 そんな時、Codaならまず上記の文字列を選択して、メニューから「プラグイン→TEA for Coda→Zen→Wrap with Abbereviation」をクリックすると、ダイアログボックスが表示されます。

ここに、「a」と入力すると選択した文字列を囲んでくれるというわけです。 さらに例えば・・・

リスト1
リスト2
リスト3
リスト4
リスト5

なんて、テキストを並べてしまった場合に、これをリストにしたいときは・・ 全体を選択した後、先のメニューを選んで、次のように打ち込みます。

ul>li*

すると・・

<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<li>リスト4</li>
	<li>リスト5</li>
</ul>

どーん。参ったか！「li*」という記述は、数を指定せずに「あるだけ全部」という意味。

まとめ

いかがでしたか？　Zen-Coding。私も、知ってからというもの本当に惚れまくっていて、寝ても覚めてもZen-Codingのことを考えています。もう、HTMLコーダーやプログラマは、必須のスキルになるのではないかというくらい、惚れ込んでいます。HTMLの大発明と言っても過言ではないでしょう。

なお、本日（2010年 2月 17日）の 22時くらいから、先のこもりまさあきさんが、USTREAMで「生Zen-Coding」を開催されるそうです。サンプルサイトをZen-Codingを使って、実際につくる過程を見せてくれるそうで、これは必見。

• UStreamで生Zen-Codingやってみましょうか

最大 90名の皆様にご参加頂きました。また、録画は現在 500名超の方に見ていただいております。拙い講義でしたが、あたたかい言葉をかけていただきまして誠にありがとうございました！ プレゼン資料や、当日作ったプログラムはこちらに公開しています。

• スライド資料
• メモ用紙

少しでも、皆様の参考になれば幸いです。

私の方は、USTREAMを本格的に使うというトライアルでしたが、非常に面白い経験をすることが出来ました。いくつかリストアップしたいと思います。

告知力がスゴい

今回、先の通り告知はこのサイトでのみ。しかも休日にたった一日というものでした。しかし、ブログのエントリーをTwitterに流したところ、どんどんRetweetしていただき、瞬く間に多くの方々に知られることになりました。

また、開始前も 30分前に「開場」としてライブ映像を流し始め、チャット機能で話し始めると、それらがどんどん Twitterに流れていき、人が人を呼んで開始時点で 20名以上に増えました。そこから録画を初めてイベントをスタートすると、もう増える一方で視聴者は増え続けていったというわけです。

手軽さがスゴい

今回、私が利用したのはデュアルディスプレイのiMacと、MacBook Airです。iMacは放送用に使い、デュアルディスプレイの1枚を放送用にしました。もう1枚では、USTREAM Producerを起動してWebカメラとの切り替えや録画のON/OFFなどを設定しました。

カメラや音声の機材は、iMacに付属の iSightとマイクのみ。音声も十分聞き取れたようです。スゴいですね。

MacBook Airは場合によっては不要なのですが、今回プレゼン資料にKeynoteを使ったため、プレゼン中は画面が真っ黒になってしまったのです。そこで、USTREAMを監視するためにMacBook Airを使っていました。とはいえ、本当に有り合わせのものだけで出来てしまったのでスゴいです。

皆さんの反応がスゴい

私はこれまで、何度か実際のイベントなどで話す機会はあったのですが、イベントとなると当然ながら私が話している間は、みなさんは聞いていて、終わった後に「質疑応答」といった時間を設けて、質問をしていただいていました。しかも、こういった場所で質問できる方は限られているため、実際には質問したいけど出来ないという方も、たくさんいらっしゃいました。

しかし、USTREAMでは話しているそばから、みなさんが思い思いに Twitterでつぶやくので、その反応を見るのが非常にエキサイティングでした。 音声が聞き取りづらい、なんのツールを使っているんだろう？　今何をしたのだろう？　と疑問に思ったことをどんどんぶつけてくれ、さらにそれに対しての回答も参加者の方がしていただき、場の中で完結してしまっていました。これは、非常に面白い現象でした。

まとめ：USTREAMでイベント運営・教育業界が変わる？

ということでまとめですが、イベントの最後の方でTwitterでも話題になっていたのですが「USTREAM大学ができちゃうかも？」という意見がありました。私も全く同じことを考えています。

今、Web関係の勉強会は実にたくさんの種類が開催されていますが、殆どが東京や大阪などの大都市に集中してしまっています。そのため、なかなか参加することが出来ない方や、体が不自由など何らかの事情で参加出来ない方もいます。 しかし、USTREAMを使えばそういった方々にも、リアルなイベントをご覧いただくことが出来ます。録画や録音データとはまた違う、「生放送」というところに、臨場感や参加している感があるのではないかと思います。

しばらくは、もちろん通常のイベントを生中継で放映するという使われ方が主だと思いますが、今回の試みのように USTREAMでのみ開催されるというイベントが増えて行くと、非常に面白い世界が待っているのではないかと思いました。

また、今回好評をいただいたので調子にのって、第 2回を計画してみたいと思います。ぜひ、お時間が合いましたら参加してやってください。 ご参加いただいた皆様、誠にありがとうございました！