お、重い…

Twitterは情報発信者にとって便利なことこの上ない媒体ですが、時間によっては、とくにアメリカ人が起床して行動しだすPM10:00（日本時間）あたりは、非常に重くなります。

ただ、普通に投稿して楽しむだけであれば、投稿できないという障害だけで済むのですが、情報発信基地をWEBサイトにしている人にとっては「WEBページが表示されない」という致命的な問題になってしまいます。

Twitterに載っているWEBサイトへの掲載方法を改造する

とは言っても、単にHTMLとJavaScriptの掲載位置を分離させるだけですけど。笑

Twitterの書き込みをWEBサイトに反映させるために、Twitterでは以下のようなコードを埋め込むように推奨してあります。

※「colori_twit」の箇所はご自分のIDに置き換えてくださいね。

<div id="twitter_div">
	<h2 class="sidebar-title">最近の動き</h2>
	<ul id="twitter_update_list"></ul>
	<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/colori_twit.json?callback=twitterCallback2&count=5"></script>
</div>

これの<script>タグの部分を分離して</body>の直前に貼り付けましょう。　これでJavaScriptの実行はHTMLがほとんど表示された後に実行されることになるので、アクセスしてきた人には問題なくページが見られるようになると思います。

Yahoo!のパフォーマンス・チームも「JavaScriptは最後に置くように」と言ってますしね。

これはほとんど自分用に作ったものですが、みなさんの参考にもなればいいかなと思って記事にしました。

「はてな」の伊藤直也さんはじめ、サーバー関連のスペシャリストな人たちが惜しげもなくその知識を書いてくれている「[24時間365日] サーバ/インフラを支える技術 ~スケーラビリティ、ハイパフォーマンス、省力運用 (WEB+DB PRESS plusシリーズ) 」が大変参考になります。　この本は「idea * idea」でも取り上げられていて「第４章はとにかく読んどけ」と書いてあったので、読みました。　まだ途中なんですけど。笑

その中で、サーバーをいじる人であればすぐに役に立つであろう「トラブルが発生した際の問題の特定方法」として「Linux単一ホストの負荷を見極める」というのがあります。

サーバー周りの問題というと、この負荷がどれほどのものかというのは、個人的にかなり曖昧な知識で「このサーバー一台でどれだけのアクセスがあると負荷がどれくらいか」というのがもう、正直直感みたいな感じで想定していたので、目から鱗の連続でした。

負荷はロードアベレージからスタート

負荷がかかっているような場合に、ネットワーク周りか？サーバー本体なのか？といった切り分けを行う場合にも「ロードアベレージから見る」というように具体的に書いてあって、そこから「このコマンドを使って、さらにこう切り分ける」というように、具体的に書かれてあるので、それに沿っていけば自然と原因が特定されていくような書き方がされてます。

で、この本を読みながら簡単な相関図というか、流れが分かる図があると、それを見ながら読んでいったり、実際の負荷特定の参考にしたりできるかなと思ってアクティビティ図を作ってPDFにしてみました。　元の編集可能なExcelファイルも良ろしければどうぞ。

• PDFファイルをダウンロード
• Excelファイルをダウンロード

そのままでも使ってもらっていいですが、本を読みながらや、読んでから見るともっとよく分かるようになるんではないかなと思います。

頻繁に更新ってタイヘン…

MovableTypeっていうと、ブログよりもいろんなことが出来て、ビジネスでも活用できて…といろいろ妄想は膨らむのですが、「更新をつづける」ことの難しさたるや、ホームページを運用したことのある人であれば、苦労話にも「うんうん」と頷いてしまうのではないでしょうか。

確かに（書くネタにはこまらなくても）毎日必ずパソコンの前に座って、エントリーを書いて「再構築」作業を地道にやって、それで思ったような反応があるかというと、最初の更新ぐらいではだれも反応を示してくれない。　というか、あなたのサイトの存在が知られていないので来てさえくれないという状況の中では、減るのかどうかも分からないダイエットを続けているようなものです。

WEBサイトにしろブログサイトにしろ、ホームページというのは更新を続けていれば必ず何らかの反応があるものなのですが、なまけものな人たちは「苦労に見合った成果がすぐ現れないと、継続できない」という気持ちになってしまうのです。

ここでWEBの考え方の王道としては「我慢して反応があるまで更新しようよ！頑張ろうよ！」となるところでしょうが、なまけものにとってはむしろ「苦労せずに更新できるなら、続けてもいいよ」と考えることしかできません。　ブログがつづく人が多いのは「苦労しなくて済むから」というのが最重要ポイントだと私は思っています。

MovableTypeをブログのように、いやそれ以上に楽に運用する

ブログがどうして苦労しなくて済むかというと、やはり「携帯から投稿できる」というのが大きいと思います。　携帯は「すきま時間」で使うことができるデバイスですから、なまけものにはピッタリです。

ということは、MovableTypeも同じように携帯から投稿できるようにすればいいということになります。　「Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。」ではモブログサービスを使って携帯からMovableTypeへエントリーを投稿する方法が載っています。

さらに、この本の特徴的な所としてとにかく「楽に運用しつつ『効果的なアピール』を行う」という、なまけものにとっては実にありがたいテクニックが満載です。　全体的に、今流行りの「レバレッジ」を効かせるような内容となっています。　いくつか挙げてみると

• 検索エンジン向けのサイトマップXMLを自動生成する
• 新着情報をTwitterで告知する
• SSIでトップページに常に最新情報を表示する
• iPhoneからブログ記事を管理する（iMTプラグイン紹介のみ）
• RSSを利用して外部ブログの記事をまとめて表示する
• スパム対策を施してサーバ負荷や管理の手間を軽減する
• 更新pingを送信して集客する

なまけものとしては、自分の書くコンテンツが「いかに楽に作れるか」「いかに楽にみんなに知ってもらえるか」「荒らされないようにいかに楽に運用できるか」が重要ではないかと思います。　これらのネタは大体入っているので、最初に若干しくみ構築の手間はありますが、その後はとても楽に更新・運用していけると思います。

MovableTypeはいったん「なまけもの向けシステム」として構築できると、ブログ以上に簡単に更新でき、書いた情報にもレバレッジを効かせられる魅力的なCMSです。　ホームページ更新が続かない「なまけものな」サイト運営者の方は導入を検討してみてはいかがでしょうか？

Overtureでは「広告掲載ガイドライン」の「スタイルガイドライン」で以下のように書かれてあります。

リンク先URLは1024文字、表示URLは250文字以内の半角英数字（ASCII）で登録してください。 URL内の日本語表記は使用できません。

ですので、日本語パラメーターをURLを使って広告を出稿したい場合に困ってしまいます。　１つだけならどこかのサイトの変換サービスを利用しても良いですが、大量の広告となるとExcelで管理したりしてると思います。

ExcelでFunctionを作って利用

Excelは多機能です。　なんでもできちゃいます。　URL変換も例外ではありません。　ただ、標準の関数ではできないようなのでカスタム関数を追加します。

まず「ツール」メニューの「マクロ...」から「Visual Basic Editor」を起動します。

次に「挿入」メニューから「標準モジュール」を選択します。

「標準モジュール」が追加されたらダブルクリックしてコードウィンドウを開き、以下のコードを埋め込みます。

Function urlEncode(str As String) As String
    Set sc = CreateObject("ScriptControl")
    sc.Language = "Jscript"
    Set js = sc.CodeObject
    urlEncode = js.encodeURIComponent(str)
End Function

追加が完了したら「ファイル」メニューから「終了してMicrosoft Excelへ戻る」を選択してExcelへ戻ります。

日本語URLをURLエンコードしてみる

さて、これで標準関数と同じようにurlEncode関数が使えるようになりました。　以下のように基本URLと日本語キーワードを組み合わせて変換表示させてみてください。

あとは変換で出来たURL文字列を広告URL欄に貼り付けるだけ！

いろんな種類のクローラーやボット

１台のPCをアクセスログ監視専用マシンにし、２４インチモニターで７つほどのログウィンドウを立ち上げて2ヶ月ほど常時監視していましたが、ほんとにいろんなクローラーやボットがいるなぁ、といった印象です。　Googlebotの来訪頻度の多さや個人ユーザーなどがWgetでデータ取得していたりと、リアルタイムでログ監視していると、アクセス解析ソフトだけでは分からないことも感じられて面白いです。　一方でアクセス解析ソフトでのクローラー・データベースのアップデート頻度も大変なんだろうなぁ、と思います。

クローラーやボットたちをgrepで弾いてみる

出力制御は定番のgrepで、パイプを利用します。　grepコマンドに「-v」オプションをつけると、正規表現の文字列に一致するログを非表示にできます。

# tail -f /path/to/log/access_log|grep -v "clawler\|Googlebot\|googlebot\|DotBot\|Slurp\|msnbot\|robots\|spider\|Wget"

さらにWEBページファイルのみのログ表示にする

クローラーやボットよりもある意味邪魔なのがWEBページファイルにリンクした画像やCSSファイルなどのアクセスログです。　これらを弾く正規表現も一緒に組み込んでみます。

tail -f /path/to/log/access_log|grep -v ".jpg\|.JPG\|.css\|.js\|.ico\|.png\|.txt\|.swf\|.gif\|.GIF\|clawler\|Googlebot\|googlebot\|DotBot\|Slurp\|msnbot\|robots\|spider\|Wget"

上にも書いたように、これからも様々なクローラーやボットたちがあなたのサイトに来訪することが予想されますので、それっぽい文字列を察知したら加えていくようにしてくださいね。

これを機に正規表現を学びたい方は参考にどうぞ

このドキュメントは、JavaScriptのクライアントライブラリを使った基本的なデータAPIインタラクションの例を掲載します。　より詳細なフィード・クエリーの構造やレスポンスを知りたいのであれば、フィード・リファレンスやGoogle Analyticsのアカウント・フィードやデータ・フィードに相当するものをご覧ください。

本ドキュメントの対象となる方

このドキュメントは、Google Analyticsと連動したJavaScriptのクライアントアプリケーションを作成したいプログラマー向けに書かれています。　このドキュメントは、あなたが以下の概念にこなれたひとであると仮定しています：

• Google Data APIs protocolの一般的なアイデア。
• Google Analyticsからくるアカウント情報やデータ・フィードのリクエストと連携するしくみ。詳しくはアカウント・フィードやデータ・フィードを参考にしてみてください。
• Getting Startedに書かれてあるData Export APIの利用の流れ。
• JavaScriptプログラミングの知識。
• JavaScriptクライアント・ライブラリーの基本的な使い方。

クライアント・ライブラリーが提供するクラスやメソッドについてのリファレンスはJavaScriptクライアント・ライブラリーAPIリファレンスを参照してください。

JavaScriptライブラリーの利用

JavaScriptクライアント・ライブラリーによって、Google Analyticsサーバーとの全ての通信を制御します。　JavaScriptクライアント・ライブラリーによってクライアント側はブラウザーのセキュリティーモデルの規則に従っている間、あらゆるドメインからGoogleのData Export APIのリクエストを送信できます。

ライブラリーを取得する

あなたのアプリケーションにJavaScriptクライアント・ライブラリーを付加するには基本的に２つのステップが必要となります：

あなたのアプリケーションのHTMLドキュメント中にサーバーからクライアント・ライブラリーを埋め込むコードを記述します。これをHTMLドキュメントの<head>タグ内に<script>タグを使って埋め込みます

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

google.load()メソッドを使って、あなたのJavaScriptコードのセットアップ部分でGoogle Analyticsクライアント・ライブラリーをロードします。このメソッドは<head>セクション内か、<head>セクション内の<script>タグによるJavaScriptファイル参照の中で呼び出さなければいけません。

google.load('gdata', '1.x', {packages: ['analytics']});

google.load()に渡す2番目のパラメーターは、要望するJavaScriptクライアント・ライブラリーのバージョンです。　手に入るバージョン番号とその意味について：これはGdata JavaScriptバージョンに関係したものなのか、あるいはクライアントのGA Data APIのバージョンなのか、はっきりしていません

• 1 — メジャーなバージョン１の２つめから最新のリビジョンを含む（全部入り）
• 1.x — メジャーなバージョン１の最新版のみ利用
• 1.s — メジャーなバージョン１の最新「安定」版を利用。Google Analyticsでは時々あるクライアント・ライブラリーのバージョンを、デベロッパーからのフィードバックを受け取った「安定版」として宣言します。しかし、機能的に最新版というわけではありません。
• 1.0, 1.1 ... — 特定のメジャーバージョンやマイナーバージョンを選んで組み合わせて利用します。

JavaScriptライブラリーを利用するためにgoogle.load()メソッドを呼んだあとは、あなたのアプリケーションコードが実行される前にHTMLドキュメントがロードを終了するまで待つべきです。　多くの場面では、これを<body>要素のonload()ハンドラで呼び出すよりもloadハンドラ関数で行うのがベストでしょう。

認証

ユーザーがGoogle AnalyticsのWEBサイトでアクセスレポートを見る前に、まずGoogleアカウントを使ってログインしないといけません。　同じように、あなたのアプリケーションもAnalyticsのフィード・データを取得するために認証しなければいけません。　あなたはユーザー認証用のディレクトリーをアプリケーション内に組み込むか、あなたのJavaScriptアプリケーションからユーザーがAnalyticsアクセスを取得するためのユーザーログインを提供できます。　JavaScriptを使って、以下のアプローチのいずれかの方法で認証が可能です：

• AuthSub プロキシー認証
• WEBアプリケーション用 OAuth認証

一般的なGoogle Data APIの認証についての詳しい情報は、authentication documentationを参照ください。

一度あなたのアプリケーションが認証を完了すると、Googleアカウントに必要な証明が提供されたと実証され、それらの証明情報はAnalyticsのユーザーアカウントにリンクされます。　もし認証が失敗したら、サーバーがエラーを返します。　アカウントアクセスや、証明と認証の違いについての詳しい情報についてはリファレンス・ガイドを参照してください。

AuthSubプロキシー認証

AuthSubプロキシー認証はGoogleアカウントをユーザーに認証する必要があるWEBアプリケーションで使われます。　AuthSubでは、WEBサイトのオペレーターやクライアントのコード上でユーザーのユーザー名やパスワードが見えることはありません。　その代わりに、クライアントは特別なAuthSubトークンを取得します。　このトークン情報をユーザー情報に代わるものとして利用します。　詳しくはAuthentication for Web Applicationsを参照してください。

以下に、WEBベースのJavaScriptクライアント用の認証の簡単な概要を示します：

• クライアントアプリケーションはクライアント・ライブラリーが提供する「google.accounts.user.login()」メソッドを呼び出すことで、どのGoogleサービスを使うか、スコープ値を得ます。
• クライアント・ライブラリーはブラウザーに対してGoogleアカウントのログインページを送り、そこでユーザーはサービスにログインするための認証情報を入力します。
• ユーザーがログインに成功すると、AuthSubシステムはブラウザーに対してWEBクライアント用のURLを返し、認証用トークンを得ます。
• JavaScriptクライアント・ライブラリーはCookieの中にトークン情報を保存し、「google.accounts.user.login()」という、クライアントアプリケーション用のコントロールを返します。
• クライアントアプリケーションがその後、Analyticsと連携するためのクライアント・ライブラリー・メソッドを呼び出す際、クライアント・ライブラリーは自動的に全てのサーバーリクエストに対してトークン情報を付加します。

注意：WEBブラウザー上で認証されたAnalyticsリクエストを作成するJavaScriptクライアント・ライブラリー用にそのページに（ページと同じ）ドメイン上にある画像を含めなければいけません。　1ピクセルの透明GIF画像でもどんな画像でも良いですが、ページ上の画像でなければいけません。　もし、その画像をページ上に表示させたくなければ、<img>タグのstyle属性にレンダリングエリア外に位置させるようにします。　例えば、「style="position:absolute; top:-1000px;"」といった感じです。

以下のサンプルコードはどういうふうに認証が制御されるかを示しています：

function logMeIn() {
  scope = "https://www.google.com/analytics/feeds";
  google.accounts.user.login(scope);
}

function setupMyService() {
  var myService =
    new google.gdata.analytics.AnalyticsService('exampleCo-exampleApp-1');
  logMeIn();
  return myService;
}

「user.login()」メソッドは、クライアント・ライブラリーが制御する認証トークン情報を生成し、「google.accounts.user.logout()」メソッドが呼ばれて取り消されるまでそのトークン情報は有効になります：

function logMeOut() {
  google.accounts.user.logout();
}

もしlogout()メソッドが呼ばれなければ、トークン情報が保存されたCookieはユーザーによって削除されないかぎり2年間残ります。Cookieはブラウザー・セッションをまたいで保持されますので、ユーザーはブラウザーを閉じたり、再度開いたりしてクライアントとして戻ってきてもまだログインした状態が保たれます。

しかし、トークン情報がセッション中に無効になることがあります。　もしAnalyticsがトークン情報を拒否した場合は、クライアント側で現在のトークン情報がCookieに残らないようにlogout()メソッドを呼んで削除するようにエラーの状況を制御すべきです。

さまざまなコンテキスト中で役に立つ情報を見つけるAuthSubメソッドがあと２つあります：

• 「google.accounts.user.checkLogin(scope)」メソッドはブラウザーが現在（パラメーターで与えられた）スコープの認証トークン情報を持っているかどうかを示します。
• 「google.accounts.user.getInfo()」メソッドはデバッグ用で、現在のトークン情報について詳細な情報を提供します。

トークン情報の管理やcheckLogin()、getInfo()メソッドの情報を含め、AuthSubと連携するJavaScriptの使用法の詳細についてはJavaScriptクライアント・ライブラリーで「AuthSub」認証の使い方ドキュメントを参照ください。

Tip：ユーザーのログイン・プロセスはマニュアル操作で行えるようにログインボタンやその他のユーザー入力のしくみを提供するようにしてください。　もし、ユーザーへのログイン・プロンプトなしにアプリケーションで「google.accounts.user.login()」を呼び出してしまうと、ユーザーは最初からあなたのの作成したページではなくGoogleアカウントのログインページが見える状態になってしまうでしょう。　そこでユーザーがログインしないことに決めても、Googleはあなたのページにリダイレクトで戻すことができません。　このようなシナリオだとユーザーはあなたのページを閲覧しようとしますが、その代わりにGoogleアカウントのログインページにリダイレクトされてしまい、ユーザーは混乱して不満に思ってしまいます。

OAuth認証

OAuthは署名を必要とし、その署名はJavaScriptの環境ではセキュアな状態が保てませんので、JavaScriptではOAuthをネイティブサポートしていません。　しかし、ShindigにおいてはOAuthプロキシー用のJavaScriptサポートは入手可能です。　Shindigサーバーではガジェットに代わってOAuthリクエストを作成することができます。　OAuthプロキシーは現在iGoogleでサポートされています。　Googleデータ・クライアントとOAuthプロキシーを利用してガジェットを作成する方法について、詳しくはGoogleデータ・がジェットの作成を参照ください。

アカウントデータの取得

Data Export APIのJavaScriptライブラリーを使ってアカウントデータを取得するには、４つの基本的なしくみを利用すべきです：

• AnalyticsServiceオブジェクト
• アカウントフィードを取得するためのgetAccountFeed()メソッド
• フィードデータ内の要素をパースして表示するためのフィード・ハンドラ
• フィード・リクエストが失敗したときのためのエラー・ハンドラ

Data Export API用に、基本アカウント取得用のスクリプトのための完全動作するサンプル・ソースコードはJavaScript examplesセクションにあります。　サンプルが見られるのに加え、WEBページにあなただけのAnalyticsアカウントデータを取得するためのインタラクティブなサンプルが利用できます。

AnalyticsServiceオブジェクト

AnalyticsServiceオブジェクトはAnalyticsからフィードデータを取得するために使う全てのメソッドへのアクセスを提供します。　詳しくはAnalyticsService reference docを参照ください。　いろんなGoogleデータフィードへアクセスするために、あなたのアプリケーションでAnalyticsServiceクラスのオブジェクトを文字列で指定して新規生成する必要があります。　その文字列は必須で半角英数字で指定することができます。　お勧めとしてはあなたのアプリケーション名や企業名をつけるとよいでしょう。

var myService = new google.gdata.analytics.AnalyticsService('acmeSuperStatsApp1a');

getAccountFeedメソッド

The getAccountFeed method requests the account feed from the AnalyticsService object. The account feed provides the list of profiles and accounts to which a user has access.

getAccountFeedメソッドはAnalyticsServiceオブジェクトからアカウントフィードを要求します。　アカウントフィードでは、プロファイルのリストやユーザーがアクセス可能はアカウント情報が提供されます。

myService.getAccountFeed(myFeedUri, continuation, handleError);

あなたのアプリケーションで３つのパラメーターを指定します：

myFeedUri—Google Analyticsアカウントフィード・クエリーです。　アカウントフィード・クエリーについてはアカウントフィード・ドキュメントのAccount Feed Requestを参照ください。

 var myFeedUri = 'https://www.google.com/analytics/feeds/accounts/default';

continuation—リクエストが成功した場合に実効するJavaScript命令。

function continuation(myResultsFeedRoot) { . . .

handleError—エラーが発生した場合に実行するJavaScript命令。このパラメーターは任意です。

function handleError(e) {

リクエスト制御

もし、アカウントフィードのリクエストが成功したら、渡したパラメーターで指定された命令が実行され、JavaScriptクライアント・ライブラリーはアカウントフィードオブジェクトを帰します。（詳しくはAccount Feedクラスリファレンスを参照ください）　ここで、あなたが書いた命令はアカウントフィードオブジェクトからのフィードデータを取得し、フィードデータから結果を取得・表示するためのgetEntriesメソッドを使用します。　getEntriesメソッドはGoogle Data atomフィード・オブジェクトから継承されています。　以下の例は、認証したユーザーのためにアカウント名、プロファイル名、プロファイルIDを表示しています。

function continuation(feedRoot) {
   var entries = feedRoot.feed.getEntries(); 
 if (entries.length == 0) return;
  
 for (var i=0; i<entries.length; i++) {
 var entry = entries[i];
 document.write(
  entry.getPropertyValue('ga:AccountName') +' '+
  entry.getTitle().getText() +' '+ 
  entry.getPropertyValue('ga:ProfileId')); 
 }
}

エラー・ハンドリング

もし、getAccountFeed()メソッドが失敗すると、errorHandlerで指定したパラメーターの命令が実行され、JavaScriptクライアント・ライブラリーはこの命令にたいしてエラーオブジェクトを渡します。　以下のシンプルなエラー・ハンドラー命令はウィンドウにエラーメッセージを表示します。

function errorHandler(error) {
  alert("There was an error!\n" + ((e.cause) ? e.cause.statusText : e.message));
}

プロトタイピングツール関係の情報を漁っていたらWhat is the best web prototyping tool?なんていうやりとりがあったので、翻訳してみました。

ツール派、アナログ派などいろいろいますねー。

回答は１３人

Balsamiq MockupsとPencil Project（Swaroop C H さん）

Balsamiq Mockups（商用ソフト：$79）か、Pencil Project（オープンソースのFirefoxアドオン）を試してみなよ。

返答：おお、Pencil Projectすげー！ありがとう！

ペンと紙（jpeacockさん）

ペンと紙。マジで。ツールを覚える時間も要らないからデザインに時間かけられる。

最初にページのテンプレートをいくつか作っておいて、それをコピーする。　あとはダイアログとか表示部分とか細かいところを手で描くだけ。マジで速いしアイデアも浮かんでくるよ。

鉛筆と紙（gregmacさん）

普通の鉛筆と紙で始める。速いし、機能的だし、ツールの使い方を覚えなくて済む。アプリを起動できるようになるより早くデザインが書き終わるよ。マジで。

それで、最初のコンセプトが良かったら、デザイナーにPhotoshopで（というか描画ツールはなんでもいいんだけど）モックアップを描かせる。まだHTML化する必要はなし。君がプログラマーだったら、デザイナーではない※1だろうから、専門のデザイナーにまかせよう。

※1 大体において、ほとんどのプログラマーはデザインのことが分かってない。Photoshopの全てのツールがどういうものか分かってないから、デザインを任せられないだろう。

Balsamiq Mockups（Lou Francoさん）

Balsamiq Mockupsは、すげーいいね。

Mockup Screens（Mackaaijさん）

うちのコンサルタントたちはMockup Screens('Quick and Easy Screen Prototypes')を使ってるよ。画面編集が簡単だし、スケッチ機能もデザインに集中できるようになってるしね。

iRise（Krishnaさん）

半年くらい前からiRiseを使ってる。プロトタイピングだけじゃなくて要件定義書も作れるからね。

Axure（Craigさん）

最近会う人みんなAxureがいいって言ってるな。

HTML手書き（Turnkeyさん）

簡単なHTMLとリンクでプロトタイピング。ツールは好きなHTMLエディタでいいよ。クライアントに見せるのが楽。ときどき最初の基本ページを前に作った別アプリから持ってきて「別名で保存」して使ってるけどね。

３種類を使いこなす（nzpcmad）

• Visual Studioを使って基本ページを作る。中のデータはダミーで。そして、できるだけシンプルにそれぞれのページをつなぐ。これで客に見せるプロトタイプが完成。利点は、プロトタイプが実際のコードになっていること。苦労せずに開発とドキュメントを合わせられるよ。
• Visioを使う。ペンと紙よりもキチンとしたものが見せられる。更新が楽なので、クライアントの前ですぐ見せられる。ドキュメントの中に簡単に読み込ませられるし、プロっぽく見える。
• ペンと紙。これはクライアントが「自分たちはどんなものを作って欲しいのか」が分かってなくて、「たぶん多くの変更があるだろう」と君が考えている場合に有用な方法だ。基本をマスターしたら、上のどれかを選ぶといいよ。

なんか大胆（david dickeyさん）

厳密にしないこと。

いろんな色のインデックスカードが入った箱と、それらを（一時的に）ペタペタ貼るためのスプレーのり。黒マーカーをいっぱい。そしてホワイトボードを立てるためのフロアーさ。

Axure（Raymondさん）

ずっとAxureを使ってるよ。安定してるし、役に立つ機能が沢山あるし。中小規模のWeb案件で使ってるけど、かなり助かってるよ。もしJavaScript/Ajax機能をページ内で沢山使うなら、dynamic panelsがウザく感じるかも。そんなときは単純なHTML/JavaScriptを組んだほうがいいかもね。

ここで誰かが挙げたiRiseを見たことあるけど、かなり似てるね。iRiseはもっと規模の大きい案件で使うのがいいかも。　でもAxureはiRiseよりもかなり安いよ:-)

Protonotes（Maxさん）

Protonotesだな。

Protoshare（Andeeさん）

プロトタイピングでこういうのを探してる人ってだいたい社外のチームとかクライアントと協調する必要があるから、Protoshareがいいんじゃないかな。　Axureっぽいけど、複数メンバーでアクセスしたり、コメントしたりできるよ。

引数が正当な日付かどうかのチェックは事前にお願いしますm(_ _ )m

/**
  * DATETIME形式の値をUNIX TIMESTAMP値に変換
  *
  * @param string $datetime DATETIME値
  * @return integer DATETIME型じゃなければ0
  */
function datetime2unixtime($datetime) {
    $regex = "/(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/";
    if (preg_match($regex, $datetime, $m)) {
        array_walk($m, 'intval');
        return mktime($m[4],$m[5],$m[6],$m[2],$m[3],$m[1]);
    } else {
        return 0;
    }
}

UNIX TIMESTAMP値をDATETIME値に変換

ついでなので、UNIX TIMESTAMP値をDATETIME値に変換する方法も載せておきますね。

/**
  * UNIX TIMESTAMP形式の値をDATETIME値に変換
  *
  * @param integer $timestamp UNIX TIMESTAMP値
  * @return string
  */
function unixtime2datetime($timestamp) {
    if (is_int($timestamp)) {
        return date('Y-m-d H:i:s', $timestamp);
    } else {
        return '';
    }
}

そんな時に便利なのが、実行前に必要な文を警告として出してくれるコマンドです。　以下のコマンドは警告文を表示し、OKであればそのまま進み、キャンセルすると停止するテストケースです。

使い方はいろいろあると思いますので、良かったら使ってみてくださいね。

• 受信したメールに記載されているアドレスにアクセスする
• しかもそのURLは毎回異なる文字列である

URLにタイムスタンプが入っていたり、任意の文字列から生成したハッシュ文字列が含まれていたりした場合などが該当すると思います。

GmailやYahoo!mail、hotmailなどのWEBベースでアクセス可能なアカウントであれば、テストケースを分けてサイトにアクセスしてURLを抽出できるかもしれませんが、ちょっとしたテストにそれほど大げさなことをしたくない場合があります。

テストケース実行中にテキスト入力ダイアログを出す

手っ取り早いのが、テストケース実行中にJavaScriptでテキスト入力ダイアログを出して、そこで入力されたテキストを変数に入れて利用する方法です。

以下は、テキスト入力ダイアログを出して入力されたURLにアクセスするテストケースです。

最初のコマンドでurl変数にテキストを格納し、２つめのコマンドで変数を利用してopenしています。　使い方はいろいろ考えられると思うのでぜひテストに利用してみてくださいね。

Yahoo! Search Content Quality Guidelines.として公開されている記事の翻訳です。
多少当たり前なところもあるかもしれませんが、王道として踏まえておくべき定番SEO対策という感じで読んでみるといいのではないでしょうか。意訳なので、間違えてたらご指摘お願いしますね。

Yahoo! Search Content Quality Guidelines.

Yahoo!では検索キーワードクエリーに対して、満足度が高く、キーワードに関連性のあるWebコンテンツをユーザーに提供できるように頑張っています。

Yahoo!はこんなページが好き！

• 本物の価値を持ったオリジナルで１つ(unique)しかないコンテンツ
• 検索エンジンを考慮してあるけども、なによりも閲覧ユーザーのためにデザインされたページ。
• 興味のある関連コンテンツを適切なタイミングで、閲覧ユーザーが見つけられるようにリンクしてあるページ。
• Webページの内容を的確に説明してあるメタデータがある。（titleやdescriptionを含む）
• 一般的にみて、よくデザインされている。

残念ながら、すべてのWebページがユーザーに価値ある情報を提供してくれるわけではありません。　適切ではない、だらだら長くて、満足度が低い検索結果が表示されるように検索エンジンをだます意図で作られたWebページもあります。　よく「スパム」と呼ばれているものです。　Yahoo!はこのようなページを登録したくありません。

Yahoo!はこんなページが嫌い！

これらが全てというわけではありませんが、Yahoo!が「良くない」と思っているよくあるタイプの例です。

• 検索結果の精度、多様性、あるいは関連性に悪影響を及ぼすようなページ。
• 閲覧ユーザーを別ページに誘導させるためだけのページ。（ドアウェイ・ページ）
• 実質同じようなコンテンツを提供している複数のサイトやページ。
• 他のWebサイトのために作られたコンテンツやリンクに重く依存しているページ。（アフィリエイト・コンテンツなど）
• たくさんの不必要なバーチャル・ホスト名を割り当ててあるサイト。
• 自動生成されてあまり価値のない、大量のページ（クッキー・カッター・ページ）
• 検索エンジンランキングを人為的に膨らませる方法が使われているページ。
• テキストやリンクをユーザーから見えなくしてあるページ。
• 検索エンジンに、ユーザーが見ているものと異なるコンテンツを提供しているページ。（クローキング）
• 過剰に相互リンクさせて見かけ上の人気を水増ししたサイト。（リンク・スキーム）
• ユーザーよりも検索エンジン向けに作成されたページや、過剰なキーワード埋め込み、無関係なキーワードを埋め込んだページ。
• 競合サイトやブランド名を誤用・誤解したページ
• 過剰にポップアップ・ウィンドウを出したり、マルウェア（スパイウェア、ウィルス、トロイの木馬など）をインストールするサイト、あるいはユーザーの画面操作を妨害するようなサイト。
• 見かけ倒し、詐欺っぽい、貧相なページ。

Yahoo!検索コンテンツ品質ガイドラインは、質が低いページでもユーザーが満足することもある、という考えのもとにデザインされています。他のYahoo!ガイドラインと同様に、Yahoo!では検索インデックスの品質を確保するためならば何をやっても良い、という独自裁量権があります。

もし、あなたがYahoo!検索コンテンツ品質ガイドラインに準拠したサイトを作ったら、サイトレビューをリクエストすることができます。　Yahoo! Search URL Status Review Formを使ってみてください。　あなたがサイトを良くするためにやった作業の詳細を記入してくださいね。

ユーザー主体の検索エンジン

以上です。いかがだったでしょうか？

言ってしまえば当たり前なのですが、検索エンジンは人間であるユーザーが主に利用するものなので、ユーザーが満足することを第一に考えているということがよく分かります。

つまり、検索エンジンを騙そうとすればするほどユーザー主体ではなくなってYahoo!に嫌われていくということなんですね。

このことを肝に命じて、ユーザーを喜ばせるWebサイト、ページを常に生み出していきたいものです。

「コマンドプロンプトから実行」でエラー

導入(インストール)後、いきなりなんですがエラーに遭遇。

E:\TracLight>"\bin\java.exe" -Duser.home="E:\TracLight\projects\hudson" 
-jar hudson\hudson.war --prefix=/hudson --ajp13Port=8009 
--ajp13ListenAddress=127.0.0.1 --httpListenAddress=127.0.0.1 
--httpPort=8010
指定されたパスが見つかりません。

OSはWindows XPなんですが、どうやら「hudson.war」を実行するための「E:\TracLight\bin\java.exe」がない模様、ではなくてJavaの実行環境が整っていない模様。

hudsonはTrac Lightningをインストールする際に「一緒に入れるか？」と聞かれるものですが、そもそも何なのか？　wikipediaによると

HudsonはJavaで実装され、 Apache TomcatやGlassFishなどのServletコンテナ上で動作する継続的インテグレーションツールである。HudsonはCVSやSubversionなどのバージョン管理システムツールをサポートし、Apache AntやApache Mavenで管理されているプロジェクトのタスクを実行したり、シェルスクリプトやWindowsのバッチファイルを実行することができる。
ビルドはcronのようなスケジュール機構、他のビルドが完了した場合、あるいは特定のビルドURLがリクエストされた場合などによって実行される。

とあります。　要するに開発中の面倒な作業を自動化してくれるツールということですね。
「制作→デバッグテスト」を頻繁にやる方には便利かと。

…それはともかく、今は「Javaの実行環境を整える」ことだけに集中しましょう。

Java環境の設定

Javaをとりあえずインストールしてください(手順はリンク先に記載されています)。

インストールが完了したら、「\bin\Java.exe」があるパスを調べておきます。うちだと「E:\Program Files\Java\jre1.6.0_01」でした。

「マイ コンピュータ」を右クリックして「プロパティ」を選び、上のタブで「詳細設定」タブを選択します。

「環境変数」を押して、環境変数に「JAVA_HOME」という名前で追加し、値を上で調べたパスに設定します。すでに追加されている場合は追加しなくて良いです。

再起動しなくても、すぐに反映されます。

再度プログラムメニューの「Trac」から「コマンドプロンプトから実行」を選びます。

E:\TracLight>"E:\Program Files\Java\jre1.6.0_01\bin\java.exe" 
-Duser.home="E:\TracLight\projects\hudson" -jar hudson\hudson.war 
--prefix=/hudson --ajp13Port=8009 --ajp13ListenAddress=127.0.0.1 
--httpListenAddress=127.0.0.1 --httpPort=8010
[Winstone 2009/02/28 12:13:35] - Beginning extraction from war file
[Winstone 2009/02/28 12:13:50] - No webapp classes folder found - 
E:\TracLight\projects\hudson\.hudson\war\WEB-INF\classes
hudson home directory: E:\TracLight\projects\hudson\.hudson
[Winstone 2009/02/28 12:13:55] - Winstone Servlet Engine v0.9.10 running: 
controlPort=disabled
[Winstone 2009/02/28 12:13:55] - HTTP Listener started: port=8010
[Winstone 2009/02/28 12:13:55] - AJP13 Listener started: port=8009
2009/02/28 12:13:56 hudson.ClassicPluginStrategy createPluginWrapper
情報: Loading plugin: E:\TracLight\projects\hudson\.hudson\plugins\trac.hpi
2009/02/28 12:13:56 hudson.ClassicPluginStrategy explode
情報: Extracting E:\TracLight\projects\hudson\.hudson\plugins\trac.hpi
2009/02/28 12:13:57 hudson.model.Hudson load
情報: Took 484 ms to load
2009/02/28 12:13:57 hudson.TcpSlaveAgentListener 
情報: JNLP slave agent listener started on TCP port 1067

途中でファイアーウォールの許可を求めてきますので、許可しておきましょう。

ほっ…、無事エラーなく起動しました。

あちこちで書かれていますが、文字列のカウントにstrlenを使ったりしているので、日本語文字列でうまく動いてくれません。

で、よく書かれている対処法がmb_truncateという修飾子を作っちゃえ！ということですが、「ファイル増やしたくないし、Smartyライブラリをいじるのは禁止されてるし…」という方には！

そのままテンプレート上でmb_substrを使っちゃう

あまりエレガントではないですけど、以下の方法でもできます。

以下の例は、utf-8の文字コードの文字列を８０文字で切り捨てて「・・・」を付加する方法です。

{$myStr|mb_substr:0:80:"utf-8"}{if mb_strlen($myStr, "utf-8") > 80}・・・{/if}

このように、修飾子にそのままPHP関数を使うことができます。　パイプライン「|」の左側に、使いたい関数の第一引数を書いて、それ以降の第２引数以降はコロン「:」で区切って指定します。　変数のアサイン（assign）などでも利用できるので、使ってみてくださいね。

{assign var=shortStr value=$myStr|mb_substr:0:80:"utf-8"}

負数や小数にも対応させてみました。　他の言語でもかんたんに改変できると思うので使ってみてくださいね。

桁区切り用関数：addFigure

サンプル

数値入力：  

function addFigure(n) {

	var l, m='';
	var mark = (n < 0) ? '-' : '';
	var flt = '';

	n = Math.abs(n);
	if (n % 1) {
		flt  = n + '';
		flt = flt.substr(flt.indexOf('.'));
	}
	n = Math.floor(n) + '';
	while ( (l = n.length) > 3 ) {
		m = "," + n.substr( l - 3, 3 ) + m;
		n = n.substr( 0, l - 3 );
	}
	return mark + n + m + flt;
}

使い方

単に引数に変換したい数字を与えるだけです。

var myNumber = -12345678.9;
var convNumber = addFigure(myNumber);
結果：-12,345,678.9

iPhone 3G向けのWebサイトを制作する方向けのSafari仕様のマインドマップをVisioのブレインストーミング図で作ってみました。　A4サイズのチートシートにしてPDFにしてみましたので、ダウンロードして自由にお使いくださいませ。　バージョンアップは随時ご指摘やSafariのバージョンアップなどに合わせて行いたいとおもいます。

掲載情報概要

以下のような情報を掲載しています。　全てを網羅するのはさすがに無謀でした…

• ユーザー操作の種類
• ウィンドウ
• JavaScript
• Flash
• 画像
• テキスト
• 禁止項目
• 専用エリア
• 寸法
• ビューポート(viewport)
• CSS
• ユーザーエージェント(User-Agent)
• WEB標準準拠

ダウンロード

以下のリンクからPDFファイルをダウンロードしてください。

iPhone 3G Safari仕様マインドマップ