［撮影：おかだよういち］

CSS Nite LP, Disk 9「Coder’s Higher」で「Coding with jQuery」というタイトルのお話をさせていただきました。

出演させていただいたことはもちろん、ずっとお話したかった方々にお会いできたり、mukiオフだったりとても楽しい1日でした。出演者のみなさま、聞いてくれたみなさま、スタッフのみなさま、本当にありがとうございました。

どれくらい緊張したのかっていうのは、写真の顔のてかり具合を見れいただければ･･･汗がはんぱなかったです。終わったあとは髪型が60%くらい変わってましたね。

本当はもっと突っ込んだところとかも話したかったのですが、結構流し気味だったので。。ともあれ、今回一番伝えたかったことは、jQueryもっと使ってみようよ！っていうことで、少しでもやってみよう！という気持ちになっていただけたのならうれしいです。

あ、あとたぬきも人気だったようでなによりです。たぬきかわいいねんで。

紹介した本

この2つはかなりの良著で、JSを始めたいと思っているコーダー・Webデザイナーの方には最適です。JSの基礎もあったりするのですが、とりあえずはこの2つを読んでみて、突っ込んだところが必要になってきてからでいいと思います。

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
	西畑一馬 アスキー・メディアワークス 2010-02-12 売り上げランキング : 41463 おすすめ平均 プログラム初心者にお勧め 自分でJavascript操作したい人にお勧め Amazonで詳しく見る by G-Tools

追記： DOM Scripting標準ガイドブックは絶版なようで、Amazonでもマーケットプレイスでしか買うことができません。現在ジュンク堂であれば、在庫が少しあるようなので、予定がある人はお早めにどうぞ。

http://www.junkudo.co.jp/detail.jsp?ID=0107952153

DOM Scripting 標準ガイドブック ~やさしく学ぶ、JavaScriptとDOMによるWebデザイン~ (Web Designing BOOKS)
	Jeremy Keith (著), 中村 享介 (監修), 吉川 典秀 (翻訳) 毎日コミュニケーションズ 2007-06-21 売り上げランキング : 18058 おすすめ平均 これからのWEBデザインには必須の本 初心者にはおすすめできません。 デザイナに役立つ良書です Amazonで詳しく見る by G-Tools

備忘として。。

Urchin6のUTMとGoogle Analytics(以下ga)を併用するときはUrchin側の導入コードが少し変わります。

1. 必要なファイルの準備

「__utm.gif」をサーバー（ドメイン）ルートにコピー。

2. UTMを利用するためにgaのコードに追加

urchin.jsを使っている場合

<script type="text/javascript">
_userv=2; // ここを追加
_uacct="UA-XXXXXXX-Y";
urchinTracker();
</script>

ga.jsを使っている場合

<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._setLocalRemoteServerMode(); // ここを追加
pageTracker._initData();
pageTracker._trackPageview();
</script>

どちらもローカル サーバー モードの変更で、デフォルトではGAのサーバーのみに送信しているので、これをローカルサーバー（Urchinのサーバー）にも送信するように設定できます。

参考： http://www.google.com/support/googleanalytics/bin/answer.py?hl=jp&answer=76305

ドキュメントを見てると、「__utm.gif」はルートじゃなくてもよさそう。その場合は

_ugifpath = 'newLocalGifPath'; // urchin.jsの場合
pageTracker._setLocalGifPath(newLocalGifPath); // ga.jsの場合

でそれぞれ指定してあげればよさそう。
あ、Urchinの取得タイプをUTMに変更するのを忘れずに･･･

普段Google Analyticsを利用するとき、デフォルトでga.jsで利用するようになっていますし、基本的にurchin.js（古いやつ）はUrchinと併用するときくらいしか使わないと思いますが、、

gaはデフォルトでhttp・httpsに対応したコードを生成するので問題ないですが、上記のリンクから古いコードを選ぶと、最初に指定したドメインに対してしかコードを生成しません。

たとえば http://5509.me に対してurchin.jsのコードを生成すると以下のようになります。

これをhttp・httpsが混在するCMSなどで利用すると、IEではhttpsのページで以下のようなセキュリティ警告が表示されます。

解決するには、ga.jsの生成コードのようにURLのprotocolによって読み込み先を変える必要があります。

この部分を･･･

<script src="https://ssl.google-analytics.com/urchin.js" type="text/javascript"></script>

以下のコードに修正する

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/urchin.js' type='text/javascript'%3E%3C/script%3E"));
</script>

これでセキュリティ警告が出ることもなくなります。

1月14日にjQuery1.4がリリースされましたが、なかなか手をつけられずにいること早2ヶ月･･･。ようやくちゃんと使ってみようということで色々見てると、それにしても痒いところに手が届くというかなんというか、すばらしいですね。

いまさら感満載なので、みなさん既に知ってると思いますがいくつかメモしておくのと、もしかしたらあんまり知られてないかも知れないjQueryの機能も少し紹介しておきます。

Read more

15日のvol.01 ノンプログラマのためのPHP入門はPHPを始めようとしている僕にはとても有意義なものだったのですが、さらに衝撃だったのは、Zen-Codingでした。

前々から存在は知ってましたが、使ったことはありませんでした。使ってみたところこれが超快適･･･！確かにコーディングが3倍速くなるかも知れない。これを知らなかったなんて僕のコーディング人生は何だったんでしょうか。

で、わざわざZen-Codingのよさについて書いたところで意味がないので、Zen-Codingについては以下のエントリ等が参考になると思います。

• TextMate+Zen-Codingで超速コーディング？
• HTMLコーディングが3倍速くなる？「Zen-Coding」
• Coda で Zen-Coding を使う

ブログ記事をHTMLで書いている人に超きっとおすすめ

WordPressの記事をZen-Codingで編集したいなとか話してたんですが、どうやらtextareaでZen-Codingを可能にするライブラリが公式であるんですね･･･そしてこれが素晴らしい出来でブログ記事を書く速さも3倍1.5倍くらいになりそうです。特に技術系のブログを書いてる人には手放せないツールになるんじゃないでしょうか。

以下WordPressに適用して編集した際のキャプチャです。公式サンプルそのまんまで申し訳ないですがそういうことです。

この状態でCmd+E(Ctrl+E)で･･･

このように展開できます。

WordPressに導入する方法

僕はWPユーザーなので、WordPressに導入する方法を書いておきます。ちなみに、ビジュアルエディタは邪魔なのでオフにしておきます。（どちらでもいいですが）

プラグインを使って導入する

【追記】rewさんがプラグイン化してくれました。なかなか登録が完了しないようです･･･

• WordPressにZen Codingを導入するプラグイン「WP Zen-Coding」

以下は古い内容です。WordPressのバージョンアップに伴って消えるのでプラグインを使ったほうがいいですね。

Zen Coding for <textarea>のダウンロード

まずはソースコードをダウンロードします。

ダウンロード

Download: Zen Coding for <textarea>

公式サンプル

Zen Coding for <textarea> Sample

WordPressの管理画面で読み込む

ダウンロードしたら解凍して出てくる「zen_textarea.js」か「zen_textarea.min.js」を適当なフォルダにコピーして

• /wp-admin/admin-header.php

を開いてたぶん69行目辺りが</head>のすぐ上なので、そこで読み込ませます。

わずか2ステップで実装できてしまいました。ただこの方法だと記事編集画面以外のテキストエリアにも適用されてしまうので、それが嫌な人は<?php if(){} ?>か何かで編集画面でのみ適用するようにするといいでしょう。

タグをあまり使わないWordPressユーザーにははてな記法プラグイン

そんなにタグばっかり使わない人にはrewishさん作のはてな記法プラグインがちょうどいいと思います。テーブルなどもどんどん使えますし、こちらもかなり便利です。