Web Archive

haseco氏になんとなくあったら面白いかも！と言われたのでサイトの宣伝がてらに作ってみました。
基本的な機能は、

「@NoTechnoNoLife 宛にキーワードをポストすると、そのキーワードからNoTechnoNoLifeを検索し、オススメの記事をレコメンドするbot」

ですっ！

それっぽく動けばいいや〜と思っていたのですが、いろいろ作っていると面倒なことがちょいちょいあったのでここにメモとして残しておきます。

WordpressにJSONを返すAPIを作成したい！っが・・・

まずはキーワードを元に、該当する記事のタイトルやURLを返すAPIを作ります。
はじめ、テーマのディレクトリに適当な名前でphpファイルを置いて、/hoge.phpでアクセスしてみたんですがうんともすんとも言わないので、
MTみたいにデザインのテンプレートにファイルを追加するだけでは作れないんだと分かりました。

必要な作業は、

• 新規ページの作成（これがAPIのURL）
• テンプレートにphpファイルを追加（検索機能）

ぐらいです。
もっと他によい方法があるのかもしれませんが、今回はとりあえずこんな感じで行きますよー！

（以下、僕が作成した環境になりますので、適宜自分の好きなファイル名や文言などに置き換えて読んでください。）

Wordpressのテーマディレクトリに.phpファイルを配置する

自分のサーバーのテーマディレクトリに「recommend_entries.php」というphpファイルを作成します。
中身は以下のようにしました。

このTemplate Nameが次のステップのページを作成するときに洗濯するテンプレート名になります。

Wordpressのページを新規作成する

次にAPIとして提供するためのページ（URL）を作成します。
管理画面の左側ペインから「ページ」→「新規作成」で新規作成ページを開きます。

タイトルに「Recommend Entries」と入力して、
属性という表示項目のところのテンプレートを、さきほど作成したテンプレートを指定する。

これでAPIとしての準備はできた！
あとはコーディングだ。。。

記事をレコメンドするphpファイルを書いてみる

このphpファイルがAPIの機能を主に担う。
ここで重要なのが、あるキーワードがこのAPIに投げられたら、そのキーワードを元に本来Wordpressが持っている検索処理を走らせないのだが、
GETパラメータに「s=ほげ」としてしまうとsearch.phpが呼ばれてしまい、このphpファイルが呼ばれない。
これはおそらくWordpressが内部的にこのパラメータがある場合はこのphpとかやってるんでしょうね。

よって、「s」というパラメータは使えないので、今回は「re」を使う。
reを使うんですが、検索機能を使うためにはsにキーワードを入れる必要があるので、結果的に以下のようになった。

さらにちょっとややこしかったのが、Wordpressは特殊文字を実体参照に変換するっぽいので、記事のタイトルに「-（←ハイフン）」があると「–」に変換されてしまう。
なのでmb_decode_numericentity関数を使って復元している。（PHPあまり分からないのでこれで合ってるのかな。。。）

APIのソースコード

json_encode関数の存在を知らなかったので、普通にJSONを組み立ててたらパースできなくてすごいハマった。。。

テンプレートを参考にすると、the_titleやthe_permalinkなんてタグを見かけるんですが、これは中でechoしているので今回は使えません。
代わりに、get_the_titleやget_permalinkを使って取得しています。

この辺のタグについては以下のページが参考になります。
テンプレートタグ - WordPress Codex 日本語版

■GitHub
・gist: 612770 - GitHub

Replayを元にオススメするTwitterBotを作る

APIは出来たのであとはbotだっ！（botはRubyで書いてみました。）

twitterというモジュールを使っています。
ちょっと補足として、replayの取得はTwitter::Base.mentionsメソッドを使って取得するんですが、twitter0.7.0にはこのメソッドがないみたいなのでtwitter0.8.0以降をお使いください。

twitterに関しては以下に詳しく書かれています。
Greenbear Laboratory - Ruby Twitter Gem簡易リファレンス

それと事前にTwitter / アプリケーションを登録でbot用にアプリ申請をしておく必要があります。
これをしないとOAuthが使えないので。

TwitterBotのソースコード

5分前よりも後にreplayされていたら、そのtweetからキーワードを抽出して（正規表現分からなかった...）WordpressのAPIに投げ、結果をつぶやく。

■GitHub
gist: 612998 - GitHub

ちなみにcronは5分毎に実行されるように設定しています。
なのでリアルタイム性はちょっと弱いですね。。。

今は単語だけですが、MeCabなどの形態素解析を使って文章の中からキーワードを引っ張り出して検索しても面白いかもしれません。
Rubyで形態素解析してみた - unnecessary words

（サイトに行って検索テキストボックスにキーワード入力すればいいんじゃない？って言わないでくださいね！）

また一つ無駄なものを作ってしまった...

今回の作品

もしよければフォローしてくださいな。
NoTechnoNoLife (NoTechnoNoLife) on Twitter

■参考リンク
・僕とヒロムとWEB戦争 » WordPressで従来型のページ作成
・Character entity references in HTML 4
・WordPress ページテンプレートについて - tail -f /var/log/こうちかずお.log

普段Googleトップをあんまり活用していないのでわからなかったですが、わっきーさんに教えてもらいました。

んで、コード見てたらロゴのimgタグのonloadにリンゴを落とすJavaScriptが書かれててちょっと面白かった。
imgのonload使うときって、あとから読み込んだ画像のwidth・heightを取得するときに使ったりするんですが、こうゆうトリッキーな使い方は面白いですね。

ざっくりですが、コードを抜き出してみたのが以下。

サンプルコード

1個分からないのが、アニメーションのclearIntervalをgoogle.reinにpushしているんですが、
これをいったいどこで実行しているんだろう。。。

Googleトップのコードを一通りおってみたんですが、実行してそうな箇所がない。
1つだけあやしい箇所があったんですが、9zPpGAOKyhU.jsの中の以下の部分。（だいぶ端折ってます）

iにはpushという文字が入っているだけで、pushされた分をループしているわけではない。。。

仕方ないので、以下のグリモンでテスト。
タイミングがもしかしたら微妙かもしれないが、リンゴが落ちたあとにclearIntervalされるはずだからonloadでもOKでしょう！

google.rein実行された？グリモン

じっ、実行されない。。。

Firebugのprofileで調査

リンゴが落ちたあとにprofileを開始して、適当なタイミングで止めてみたのが以下の画像。

「undefine()」の部分が、該当のアニメーション処理。
中身を見ると、

とアニメーションのクロージャが入っているので、間違いないでしょう！
profileEndのタイミングをずらせばもっと回数の部分が増えていきます。

結局、よくわからなかったんですが、実行してないでしょ？w
いや〜分からんな〜〜〜。

グーグルのロゴデザインやってる人に
乱歩のやつは最高だったと伝えておいてください

喜ぶと思います。彼はdoodle 作るのにたくさんの資料や本を読んだり、頭があつあつになるくらい考えてますから。
でも手塚治虫先生の時や藤子先生の時など漫画がたくさんおいてあるので遊んでるみたいです。

via: グーグルで働いてるけど何か質問ある？ - ブラブラブラウジング

[via]
グーグルで働いてるけど何か質問ある？ - ブラブラブラウジング

JavaScriptのDomメソッドがどうやって動いているのか、普段あんまり意識しないですが、気になりだすと調べたくなるものです。

WebkitはSafariやGoogle Chromeに採用されているレンダリングエンジンで、高速でありアニメーションも非常になめらかです。

そんなWebkitをいつでも追えるように、デバッグ環境を作っておくと便利かも？と手順をメモしておきます。
「JavaScripterの参考になればうれしいです。」

XCodeのインストール

XCodeのインストールは、インストールディスクの中にあるOptional Installsフォルダに入っていますので、そちらからインストール可能です。
もしインストールディスクがない場合は、Apple Developer Connection - Mac Dev Centerよりダウンロードが可能です。
ただし、AppleDeveloperConnectionへのログインが必要になります。

[via]
The WebKit Open Source Project - Installing Developer Tools

Webkitのソースコードをダウンロードする

ターミナルを起動して、まずはダウンロード先のフォルダを作成します。

cd ~
mkdir webkit
cd webkit

次に以下を入力するとSVNからダウンロードが開始されます。

svn checkout http://svn.webkit.org/repository/webkit/trunk WebKit

僕は30分以上かかったので、ランチに行くときに実行しておくとよいかもしれません。
また1度目はターミナルが途中で落ちてしまったので、あまり他の作業は行わずソースのダウンロードに専念させてあげたほうがよいかもしれません。

ソースコードのダウンロードが終わりましたら、以下を実行してください。
どうやらこれをしないとビルドがうまくいかないようです。

WebKit/WebKitTools/Scripts/update-webkit

[via]
The WebKit Open Source Project - Getting the Code

Webkitをビルドする

さっそくビルドを開始します。
以下を実行すると、ターミナルが膨大に流れ始めます。

WebKit/WebKitTools/Scripts/set-webkit-configuration --debug
WebKit/WebKitTools/Scripts/build-webkit --debug

ビルドもだいたい30分くらいかかるので、夕飯を食べにいきましょう！

成功すると以下のようにコンソールに表示されます。

Touch /Users/hoge/_/code/webkit/WebKit/WebKitBuild/Debug/WebKit.framework
cd /Users/hoge/_/code/webkit/WebKit/WebKit
/usr/bin/touch -c /Users/hoge/_/code/webkit/WebKit/WebKitBuild/Debug/WebKit.framework
** BUILD SUCCEEDED **

===========================================================
WebKit is now built (32m:39s).
To run Safari with this newly-built code, use the
"WebKit/WebKitTools/Scripts/run-safari" script.
===========================================================

[via]
The WebKit Open Source Project - Building WebKit

Webkitを起動する

WebKit/WebKitTools/Scripts/run-safari --debug

これで今回ビルドした内容でSafariが起動すると思います。
これでテストは完了です。

XCodeを使ってWebkitをデバッグしてみる

ではでは、いよいよWebkitをデバッグしてみます。
今回はdocument.getElementByIdをデバッグしてみようと思いますので、WebCoreあたりを除いてみます。

まずはダウンロードしたWebkitのWebCoreディレクトリをFinderで表示します。
僕の場合は以下のようなパスにダウンロードしました。

/Users/hoge/_/code/webkit/WebKit/WebCore

ここにXCodeのプロジェクトファイル「WebCore.xcodeproj」があると思いますので、実行してみましょう。
起動するとWebCoreプロジェクトが左のペインに表示されます。

ここのWebCoreの部分で右クリックして、「情報を見る」を選択します。

するとWebCoreの情報が表示されるので、

のように、「カスタムの保存場所」を指定します。
これは実際にビルドされた内容が存在するパスを指定していることになります。

次にアタッチ先となる実行可能ファイルを作成します。

「グループとファイル」ペインの真ん中あたりに「実行可能ファイル」という項目があるので、ここを右クリックし「追加」→「新規カスタム実行可能ファイル」を選択します。
以下のようにSafari.appまでのパスを設定します。

これによりデバッグ時にSafariを使う設定が完了しました。

Webkitにアタッチさせる

いよいよデバッグです。
XCodeのメニューにある「実行」から「進行（デバッグ）」を選択し、デバッグモードで起動します。

この作業は少し時間がかかるので、Safariが起動するまで気長に待ちましょう！
ここでどんな作業が行われているかをコンソールから確認することができます。
以下のボタンをクリックしてコンソールを立ち上げてみましょう。

このように何かしらの作業が進行していると思います。

Safariが起動したら、ブレークポイントを貼ってみましょう。（ここが今回の穴場です！）

document.getElementByIdにブレークポイントを貼る

左側のペインのWebCoreのdomの下にDocument.cppというファイルがあるので、これをクリック。
すると右側のペインにソースコードが表示されるので、「Cmd + F」でgetElementByIdを検索してみます。
（シンボルを選択するプルダウンからもメソッドを表示することができますが、今回は検索機能を使ってみます。）

すると以下のようなコードにたどり着くと思います。

そうです。これがdocument.getElementByIdの実体です。
普段使いに使いまくってるメソッドを見れるのはうれしいですね〜。

では簡単なHTMLファイルを作ってデバッグしてみましょう！

デバッグを貼るポイントはとりあえず、以下のifのところにしてみましょう。

すると以下のようにブルーのしおりのようなものが表示されるので、これがブレークポイントになります。

これで先ほどのHTMLファイルをSafariで開いてみますが、まだアラートは表示されません。
document.getElementByIdにブレークポイントを貼っているので、アラートが表示される前にデバッガがWebkitの実行を待ち状態にしています。

デバッガを使ってみる

ここで便利なのがデバッガです。
デバッガは以下のようにボタンになっているのでクリックすれば起動されます

HTMLファイルを開くとブレークポイントのところでストップします。
あとはステップオーバーしたり、ステップインしたりして遊んでみてください。

変数の監視でelementIdを見ることは出来るのですが、UChar *を16進で表示しているので本当にgetElementByIdで渡した文字列が入っているのかが確認できません。
バイナリから判断することはできるのですが、デバッガウィンドウに直接文字列が表示してほしいところです。
値を他の形式で表示してもうまくいかないので、ここは後で調査します。

Windowsでのデバッグについて

今回はMacのXCodeを使ってWebkitをデバッグしてみましたが、もちろんWindowsのほうでもデバッグは可能です。
手順は以下のリンクに詳細が載っていますが、Mac版とくらべてややこしそうです。

VisualStudioをインストールして、さらにパッチなども当てなくてはいけないので、サクッと試したい場合はMac版のほうが簡単そうです。

WebKitビルドガイド（ドザー用） - 最速チュパカブラ研究会

まとめ

document.getElementByIdを追ってみましたが、何度か実行しているとあることに気がついてきます。
elementIdより該当のidを持つエレメントを探しにいくんですが、m_elementsById.get()を実行してすでにモジュール変数にエレメントがある場合は検索処理をスキップします。
つまりサイトを開いて、Cmd + Rを押すとすでにm_elementsByIdにエレメントが入っているので、高速に動くみたいですね。
こうゆう情報は実際に追ってみないとなかなか分からないものです。

ソースコードも膨大ですが、XCodeでのビルドも結構時間がかかりますが、今後面白い内容が発見できたらブログにアップしていこうと思います。

■参考リンク
・[Tips] Xcodeでプログラム実行と同時にコンソールウィンドウを表示させる方法 - Ni chicha, ni limona -平均から抜けられない僕-
・Mac OSX Build and Run! Xcodeの入手方法

自分のTumblrからランダムに1時間毎にTwitterにPostするbotを作ったので、そのやりかたのメモメモ。

Tumblrから取得してTwitterにPostする手順

Tumblrから取得するのは普通にAPIを見ながらやってみた。
API | Tumblr

ここで困ったのが、http://hoge.tumblr.com/randomという感じでURLの最後にrandomというのを付けるとランダム記事に飛べるという機能があるんですが、
これ相当のAPIがなかったこと。

なので1度、TumblrAPIからtotal数を取得して、その値からランダム値を生成してランダムな記事のURLを再度TumblrAPIから取得しています。

Tumblrから1つの記事を取得するには以下のようなURLを指定すればよい。
typeでphotoを指定して写真を取りにいってます。

http://hoge.tumblr.com/api/read?start=0&num=1&type=photo

最近さくらインターネットを借りたので、せっかくなのでRubyで書いてみた。

ちなみにTwitterにPostするときは、定番そうなtwitter (0.7.0)を使っています。

RandomTumble - ソースコード

■ダウンロード
gist: 245238 - GitHub

使い方

RandomTumbleをnewするときにTumblrのidを渡して、random_post_twitterにTwitterのidとpasswordを渡します。

これでTumblrからランダムに1件抽出して、TwitterにPostされます。
ねっ！、簡単でしょ？

cronを設定する

さくらのコントロールパネルで、以下を設定する。

・実行コマンド

試行錯誤の結果このようになりました。

cd /home/User/code/ruby/; /usr/User/bin/ruby /home/User/code/ruby/twitter_bot.rb

[via]
Orvalで行こう！: さくらインターネット cron設定でRubyを動かす

・環境変数の設定

RUBYLIB - /home/User/lib
GEM_HOME - /home/User/lib/ruby/gem

これしとかないとrubygemsがありませんとエラーになってしまうので、忘れないように。

[via]
さくらサーバのCronでRubyを動かす時のメモ - まめ畑

・日時の設定

月 - *
日 - *
時 - */1
分 - 0

曜日すべてにチェック

初めのうちはテストとして5分ごとにして、動作確認しました。

作ったもの

tbacker (tback_bot) on Twitter

現時点で6500枚からランダムに選んでいますw
好きな人は好きになるはずっ！

■参考リンク
・Net::HTTP - Rubyリファレンスマニュアル
・twitter 0.7.0

IE6の対応はまだまだ必要な時代ではありますが、httpsでアクセスする際にセキュリティ情報のダイアログが表示されてしまうパターンを忘れないようにメモしときます。
他にもありましたら、コメント欄で教えていただけたらと思います。

（※画像はIETesterでのセキュリティ情報ダイアログ）

iframeにsrc属性がない場合

SSLで開いている画面にiframeタグがあり、そのsrc属性に何も指定されていない場合にIEがセキュリティ保護されているか判断できないために、発生するようです。

これは例えば、lightbox風のJavaScriptを作っているときに、IEでselectboxが前面に来てしまう問題を回避するために、iframeをoverlayレイヤーとして使用するときに発生します。
jQueryライブラリのthickboxでこの問題が発生していました。

■解決策

のようにダミーなhtmlを表示するようにすれば回避できます。

[via]
[PRB] FRAME/IFRAME を含むページを SSL により参照するとセキュリティ警告メッセージが発生する

httpsな画面でhttpなリクエスト

SSLで開いている画面にhttpでアクセスしている箇所が存在するとセキュリティダイアログが表示されてしまう。
たとえば下記のように画像ファイルをhttp経由で取得場合とかだ。

iframeにsrc属性がないと、URLがabout:blankとなり、

about:とhttps:でのスキーマ違いにより、

セキュリティ警告が出るようだ。

via: SSLなページを開くときにセキュリティ情報というダイアログが出る

■解決策

外部サーバーに直接取りにいかずに、手元のサーバーにアップして

としてアクセスすればhttpsで取得しにいくのでダイアログは表示されなくなる。

■問題点

このようにこちら側でhttpからhttpsのリクエストに変更できる場合は問題がないが、
外部サービスのscriptを読み込んでいる場合はちょっと難しい。

プロキシを作成して、サーバーサイドでscriptを読み込み、str.replaceAll("http", "https")のように書き換える必要がある。
外部サービスにhttps用のscirptが用意されているのが一番良いが、そうでない場合はダイアログが表示されてしまいますね。

jQuery.animateのcompleteでremoveするとダイアログが出る場合がある

たとえば以下のサンプルのように、divタグにcssでbackground画像を指定して、クリック時にanimateしcompleteで要素を削除するなどの場合で
SSL環境だとダイアログが出てしまう場合がある。
というか今の時点だと100%出る。（IE7では出ない）

background、backgroundImageのどちらでも再現するので、画像を指定した場合にcomplete直後だと何かブラウザ側の処理が残っていて、
その前にremoveしちゃうから出るのかな？

■解決策

とりあえずsetTimeoutで処理を後回しにすればダイアログは表示されなくなる。
かなり特殊なパターンなので、トレースが難しいがlightBox風のものを作っている人なら遭遇したことがあるかもしれない。

■追記

IE6のセキュリティダイアログは非表示にすることもできるよう。

Internet Explorer のクロスドメイン セキュリティのダイアログ ボックスが表示されないようにする - Greg Collins

ここを参考にIE6側に設定をすればいいみたいですね。

以下ようにOperaとIEで判断が必要ですが、jQueryを使っているならOperaだけの判断でOK。

ただし、Opera の右クリックイベント検出 - Higé au laitにも記載されていますが、Opera側の設定をしてやる必要があります。
つまりデフォルトの状態だと右クリックをハンドルすることはできない。

この画像のように、チェックを入れてあげると右クリック時のmousedownをハンドルできるようになる。

また

まだ問題がある。コンテキストメニューを表示させないで処理を実行することができない。 preventDefault() でも駄目。

via: Opera の右クリックイベント検出 - Higé au lait

というふうに書かれていたんですが、Opera10ではpreventDefaultを実行しなくともコンテキストメニューが表示されなかった。
バージョン10からそうなったのかな？

ApacheをゴニョゴニョしてSSLな環境を構築してもよいのですが、サクッと試したいときにはXAMPPを使うと便利です。

インストールは上のリンクからMax OS X用のXAMPPをダウンロードして、dmgファイルをクリックしてアプリケーションディレクトリに放り込むだけ。

SSLモードでXAMPPを起動する

実はこの方法がapache friends - xampp for macos xに書いてある、

/Applications/XAMPP/xamppfiles/xampp startssl

をコンソールから実行しても、

Unknown command or add-on!

と表示されてないっていわれる。。。

しょうがないので、/Applications/XAMPP/xamppfiles/xamppファイルを開いて中身を眺めていたら、

"enablessl")
checkRoot

echo -n "XAMPP: " $($GETTEXT 'XAMPP: Enable SSL...')

if test -f "$lc/startssl"

こんなコードを発見！！
「enablessl」じゃないかっ！

ということで、

/Applications/XAMPP/xamppfiles/xampp enablessl
/Applications/XAMPP/xamppfiles/xampp start

ってすればhttpsでアクセスできるローカル環境が作れる。

あとは、「/Applications/XAMPP/xamppfiles/htdocs/」にhtmlファイルでも置けばアクセス可能です。

windows環境で試したい場合は、apache friends - xampp for windowsからやってみてください。

結構ハマりポイントがあったので、メモメモ。
ググるといろんな人のインストール方法が発見できるんですが、結構古かったりして今の環境には適さないこともあってハマった。

まずはSSHでログイン。
そしてrubyのバージョンを確認しときます。

% ruby -v
ruby 1.8.7 (2009-04-08 patchlevel 160) [i386-freebsd7]

ruby自体もインストールする手順は多々あったのですが、特にこだわりがなかったので、
標準で入っているruby 1.8.7を使うことにしました。

rubygemsをインストール

railsを入れるために、まずはrubygemsをインストールします。

% mkdir $HOME/src
% cd $HOME/src
% ftp http://rubyforge.org/frs/download.php/60718/rubygems-1.3.5.tgz

rubygemsは一応最新バージョンにしてみました。
もしこのバージョンでうまくいかない場合は他のバージョンで試したほうがよいかもしれません。

RubyForge: RubyGems: ファイルリスト

では、解凍してインストールを開始します。

% tar zxf rubygems-1.1.1.tgz
% cd rubygems-1.1.1
% ruby setup.rb --prefix=$HOME

$HOME/bin/gem18という場所にインストールされました。

次に環境変数をセットします。

$HOME/.cshrcのset pathの部分に「$HOME/lib/ruby/gem/bin」を追加し、
環境変数、RUBYLIB・GEM_HOMEをセットしときます。

set path = (/sbin /bin /usr/sbin /usr/bin /usr/local/sbin /usr/local/bin $HOME/b
in $HOME/lib/ruby/gem/bin)

setenv RUBYLIB $HOME/lib
setenv GEM_HOME $HOME/lib/ruby/gem

そしたらsourceで反映させ、rehashでハッシュテーブルを更新します。

% source $HOME/.cshrc
% rehash
% gem18 -v
1.3.5

これでgemが使えるようになりました。

Ruby on Railsをインストールする

じつはここが今回くせ者で、いろんなサイトに書いてあるような、以下の感じだと最終的にrailsがうまく動きませんでした。

% gem18 install rails --include-dependencies

この方法だと2.3.4が入るのですが、railsを動作させたときに

Application error

Rails application failed to start properly"

というエラーが出て、何をどうしようがこのエラーが解消されなかったです。

[via]
さくらインターネットでRails - azlab 開発Memo

おそらくバージョンの問題だと思うのですが、結局原因は良くわかりませんでした。

なので以下のように2.2.2をインストールします。

% gem18 install rails --version=2.2.2

% rehash
% rails --v
Rails 2.2.2

Railsプロジェクトを作成する

僕は$HOMEにcodeというディレクトリを作ってその中でソースを管理しているので、ここにrailsのディレクトリを作成しました。

% cd $HOME/code/
% mkdir rails
% cd rails

そしてrailsコマンドを実行するのですが、またまたここもハマりポイントで、普通に以下のように

% rails test

としてプロジェクトを作成するんですが、railsのバージョンが2.3.2以降だと、「/test/public/dispatch.cgi」というファイルが作成されないようなのです。
まぁ今回は2.2.2を選んでインストールしているので大丈夫なんですが、初めは最新バージョンでやっていたのでハマりました。

% rails -D test

dispatch.cgiが作成されるようにするには「-D」をオプションで指定するといいみたいです。
実際にこのファイルがないと以下のようなエラーになります。

[via]
dispatch.cgi not found errorについて - akezoraのはてな日記

次にchmodでパーミッションを変更しときます。

% cd test
% chmod -R o+w log tmp

そして環境ファイルの設定を行います。

% vi config/environment.rb

いろんな人の書き方があったのですが、僕は以下を追記してうまくいきました。

# Be sure to restart your server when you modify this file
$LOAD_PATH.push("/home/hisasann/lib/")
$LOAD_PATH.push("/home/hisasann/lib/ruby")
ENV['GEM_HOME'] ||= '/home/hisasann/lib/ruby/gem'
ENV['RAILS_RELATIVE_URL_ROOT']="/test"

次はpublic/.htaccessです。

% vi public/.htaccess

またこのファイルがあるように手順が書かれていたのですが、僕のところにはなかったです。
なので、test/READMEの中にサンプルがあるので、そこから引っ張ってきました。

余計なコメントは削除しました。
というのも折り返しているように見えて、違う行にコメントの隅っこが移動してウマく動かなかったからです。

# General Apache options
#AddHandler fastcgi-script .fcgi
#AddHandler cgi-script .cgi
#Options +FollowSymLinks +ExecCGI

RewriteEngine On

RewriteBase /test

RewriteRule ^$ index.html [QSA]
RewriteRule ^([^.]+)$ $1.html [QSA]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ dispatch.cgi [QSA,L]

ErrorDocument 500 "

Application error

Rails application failed to start properly"

あと大事なのは一番最後の行に改行を入れることです。
これをしないと.htaccessがうまく読み込まれないためInternal Server Errorになって動きません！

一般公開する

$HOME/wwwが外から見える公開ディレクトリになるので、ここにシンボリックリンクを作成します。

% ln -s $HOME/code/rails/test/public $HOME/www/test

これで「Welcome aboard」画面が表示されればとりあえずうまく行きました！

sqlite3-rubyをインストールする

この時点で「About your application's environment」リンクをクリックすると、
sqliteがないとエラーになるので、最後にsqlite3をインストールします。

% gem18 install sqlite3-ruby

どうやら僕の環境では、最新バージョンがうまくインストールされませんでした。
なので、

% gem18 install sqlite3-ruby --version=1.2.4

とバージョンを指定してインストールしました。

これでエラーもなくRuby on Railsが動く状態にまで持って行けました！

あとはmysql入れて、どうやってデプロイするかを考えないと。。。

■参考リンク
・がんちゃんのブログ: さくらのレンタルサーバーにRuby on Rails 2.0.2をインストールする方法
・がんちゃんのブログ: さくらのレンタルサーバーにRuby on Railsをインストールする方法 その2
・Ruby on Rails入門３　さくらインターネットにRuby on Railsをインストール - nyon2.net
・さくらインターネットでRails - azlab 開発Memo
・そんな悲しい目をしないで » Redmine
・Ruby/Rubygems使い方まとめ - 俺の基地
・さくらインターネットでsqlite3 - kajilog
・さくらインターネットでRuby on Railsする | JAM☆ぱん

required属性

input要素に新しく追加されたrequired属性は、submitボタンが押されたタイミングでもしも値が入力されていない場合にチップを表示してくれます。
これを使うとJavaScriptで必須バリデーションを作る必要がなくなりそうで、ちょっと便利かもと思いました。
（まぁサーバーサイドのエラーチェックは必須ですけどねっ！）

チップは以下のように表示されて、ユーザーに必須であることをお知らせしています。

はじめsubmitボタンを押してもエラーチップが出なくてハマったのですが、どうやらname属性が必須のようです。

■対応ブラウザ
現時点ではOperaのみ、バージョンは10で試しました。

■required属性の仕様
4.10.5.2 Common input element attributes -- HTML5

placeholder

こっちはここ最近よく見る、focusがあたると文字が消えてblurすると文字が表示されるアレです。

しかもさりげなく角丸になってますw

■対応ブラウザ
現時点ではSafariのみ、バージョンは4で試しました。

■placeholder属性の仕様
4.10.5.2 Common input element attributes -- HTML5

独自のエラーメッセージも表示できたりする（制約バリデーション API）

パスワードを確認するために、2つテキストボックスを用意することは多々ありますが、
1つ目のパスワードと2つ目のパスワードが一致していない場合はsubmitしない、なんてことも出来ちゃいます。

要素にsetCustomValidityというメソッドが追加され、ここにメッセージをセットするとエラーチップを表示してくれます。

setCustomValidityにセットしたメッセージとは別に日本語で何かメッセージが出ていますが、これ消せないのかな？

■対応ブラウザ
現時点ではOperaのみ、バージョンは10で試しました。

■制約バリデーション APIの仕様
制約 - フォーム - HTML要素 - HTML5タグリファレンス - HTML5.JP

自分の使っているブラウザでどの程度inputタグの属性がサポートされているかは、以下のサイトを閲覧すると確認できます。
HTML5 input attributes support

■参考リンク
・HTML5, きちんと。

IE6からアップデートせずに、純正のIE6をそのまま使っていたのですが、
IE7で崩れる・IE8で動きがちょっとおかしいなど、やっぱりIE6からIE8までをローカルにインストール必要が出てきたためいろいろと試してみました。

もともとIETesterを使っていて、これで満足していたのですが、
やっぱり純正とは違う動きをしたり、「本当に純正IE6でもこうなるの？」という疑問が残る挙動したりしていたので、ここ最近は純正IE6のままにしていたのです。

まずはその苦労の流れをメモに残しておきます。

Internet Explorer Application Compatibility VPC Imageを使ってみる

初めに結論：この方法はうまくいかない

Virtual PC経由でIE6、IE7、IE8を起動出来るイメージがMicrosoftからダウンロードできるので、
まずはこれからインストールしてみました。

以下からVirtual PCをインストール

・ダウンロード
ダウンロードの詳細 : Virtual PC 2007

続いて、各IEイメージをダウンロード

・ダウンロード
Download details: IE App Compat VHD

こちらを参考に作業を進めてみました。
Windows XP の Virtual PC 環境を無料で作成する

結果的にVMware fusion上で各IE用イメージが起動できなかったです。
XPを仮想的に起動して、その中でIE6とかを起動するのですが、起動しようとした時点でVMware fusionに怒られましたw
それ以降Macを再起動しないとVMware fusion起動しなくなったので、この方法はあきらめました。。。

IE8をインストール、それ以外はスタンドアロン版を入れてみる

初めに結論：この方法はうまくいかない

IE6 と IE7 と IE8 を同じマシンで共存させる方法 - IT戦記

amachangの記事を元にまずはIE8を入れてみます。
IE6から一気にIE8にバージョンアップしてみました。

・ダウンロード
Google に最適化された Internet Explorer 8 のダウンロード

とくに問題なくインストールが完了しました。

続いて、IE7を入れます。

・ダウンロード
Internet Explorer 7 running side by side with IE6. (standalone) | TredoSoft
Download Internet Explorer 7 standalone Installer を入れました。

そして次にIE6を入れます。
Multiple IEのインストール時にIE6だけを選択してインストールしました。

・ダウンロード
Install multiple versions of IE on your PC | TredoSoft

結果的に、IE6、IE7、IE8はインストールされたのですが、2つ大きな問題がありました。

• IE8のお気に入りを選ぶとPrint画面が表示され、お気に入りからサイトを選べない
• IE6、IE7でサイト内にあるtextboxに値を入れられない

2個目のほうが致命的で、ログイン画面経由でどこかの画面を見たい場合にはアウトです。
おしいっ！

■参考リンク
・試験管のなかのコード :: IE6, IE7, IE8 の共存方法メモ

やっぱりIETesterを使う

初めに結論：この方法で落ち着きました

今までの作業でIE8はすでに入っているのですが、スタンドアロン版のおかげでお気に入り機能が壊れているので、一旦IE8をアンインストールします。

・以下を参考にしました。
Internet Explorer 8 をアンインストールまたは削除する方法を教えてください

そして再起動。。。

またIE8のインストール。。。

そしてまたまた再起動。。。

ようやくIETesterを入れられます。

・ダウンロード
My DebugBar | IETester / Browser Compatibility Check for Internet Explorer Versions from 5.5 to 8

これで純正IE8と、IE8に互換モード用にエミュレートされているIE7とIETesterの中にあるIE6がそろいました。
IE7はIETester内にあるのを使ってもよいかもしれませんが、Cookieが使えないので、互換モードのほうがうまく動くならこっちを使いたいところです。

IE6でCookieに関するバグが出た場合にはどうしようもないですが、とりあえずこれが僕の中でベストなSetupになりそうです。

番外編 - Web SuperPreview

Microsoftが提供しているMicrosoft Expression Web SuperPreview for Windows Internet Explorerというソフトを使うと、
おそらく表示だけなんですが、IE6、IE7、IE8のデザイン違いを見ることができます。

これ使うことあるかな。。。

・ダウンロード
Download details: Expression Web SuperPreview for Internet Explorer

キーボード型スケボーを作って、みんながPushした文字をTwitterにPostしている映像。
しかもすぐに壊れちゃってるし。。。

前に胎児がTwitterにPostする？ - kickbeeを紹介したんだけど、こうゆう何かしら違うデバイスからTwitterにPostするのって結構楽しいですね。

僕もWiiリモコンからTwitterにPostしてみたをやってみたことがあるんですが、blurtoothの精度が悪くて難しかったのを思い出した。

[via]
Twitter SK8 - today and tomorrow

自分のブログNoTechnoNoLifeのタイトルFlashを「どうやって作っているの？」とコメントで質問されましたので、たいしたFlashではないのですが、ざっくり紹介してみようと思います。

ブログにアニメーションするFlashを導入する場合、一番気になるのがHTMLのレンダリングに邪魔されてFlashのアニメーションがカクカクしちゃうということですが、
これに関してはdelay（遅延）を使ってある程度防ぐ方法にしています。
とくに動画を紹介しているサイトだと結構重くなるので、そうゆうときがこれまた難しいですね。

JavaScriptからDomContentLoadedのタイミングを受け取って、そのときにアニメーションを開始するなんて方法も使えそうですが、ExtarnalInterfaceを使いたくなかったので、こうゆう方法は使っていないです。

サンプルページ

まずはサンプルとなるページを用意したので、こちらをご覧ください。
NoTechnoNoLife/test.html

初めにタイトルとなるNoTechnoNoLifeの画像を表示しておいて、2秒ほど遅延させます。
その後に足やフラワーがアニメーションし始めます。

レイヤーの説明

これを表現するのに、今回は3枚のレイヤーを作っています。

このFlashをクリックすると、自分の画面をリロードするのですが、これはflowerLayerにリンク機能を付けて実現しています。
なので、flowerLayerが降りて来ない限りクリックしても無反応になっています。（これはこれで問題かな。。。）

リンク機能もいろいろあって、JavaScriptのlocation.hrefを呼び出すとかあるのですが、微妙にクロスブラウザの処理が必要なので、

こんな風にnavigateToURLメソッドを使うようにしています。
これだとどのブラウザでクリックしても同じ挙動でした。

そしてこれらを順番にSpriteにaddChildしていき、それっぽくdelayをかけてアニメーションさせています。

使っているライブラリ

アニメーションの部分ではTweenerを使っていて、モザイクの機能も足したかったので、@24Log » Blog Archive » Tweenerでモザイク処理できるようにしてみたからモザイク用のライブラリを拝借して使っています。

いや〜助かります！

ソースコード

ブログに貼付けるにはちょっとコード量が多かったので、以下に置いておきます。

gist: 204756 - GitHub

まとめ

完全に自分用に作ったActionScriptなので、とっても恥ずかしいのですが、誰かのWeb制作の手助けになれば幸いです。

あと気分で画像やアニメーションを変えることがあると思いますので。。

floatを使っているときにきっちりdivタグの幅に合わせて表示させていると結構スクロールバーの幅って重要だったのでまとめてみました。
2列で表示させたいのに1列になってしまったりと。

またWindowsのスクロールバーの幅設定はデフォルトのままにしています。

IE6.0

17px

IE7.0

17px

Firefox1.5

17px

Firefox2

17px

Firefox3rc

17px

Netscape7.1

15px

WinSafari

多分16px 一番右端の枠も入れると17px

Opera9.25

18px

Operaさんが18pxだったのがビックリ。
これに合わせないとピッタリといかないところですね。

毎回楽しみに拝見しているWeb担当者ForumのSEOコーナーで、新しく連載がスタートしたようなので勉強させてもらいました。

キーワード使用の要因 - グーグル&ヤフーのSEO 57要因 日米プロの重要度&コメント付きではSEOに関する内容をいろんな方の意見を取り入れ公開されているので、検索エンジンでちょっぴり上位に表示したい～という人にはうってつけかと。

上記記事の内容から抜粋し、自分用のメモにしてみました。

titleタグ内でのキーワード使用

サイトにただ1つSEOを施すとすると、良いtitleを考えるために時間をとることだ。

本文でのキーワード使用

ページの始めのほうであるほど評価は高い。また豊富なテキスト量の中で使われるほうが効果が高い。

h1タグ内でのキーワードの使用

重視されるポイントであることに変わりはありませんが、絶対必要項目ではありません。

えっ、そなの？ｗ

キーワードの見出しタグでの使用

ページのタイトルやアンカーテキストとあまりにも揃いすぎていると順位を損なうかもしれない。テンプレートによってウェブサイトの大部分が同じ内容の複製になりすぎる場合、クロール頻度の減少を引き起こすかもしれない。

気をつけたいところです。

ドメイン名でのキーワードの使用

キーワードが英文の場合に限る。たとえば、キーワードが「旅行」でドメイン名がtravel.comでは意味ない。キーワードも「travel」である必要がある。

ドメイン名にキーワードが含まれていて役に立つのは、ハイフンで区切られている場合だけだ。一般的な推測では、ドメイン名に多くのハイフンが含まれすぎていると信頼性に問題が生じる場合があるため、1つか2つ以上のハイフンはお勧めできない。良いブランド名は、キーワードが詰め込まれたドメイン名よりも常に良いのだ。

これに関してもボクも実証済み。ボクがひそかにやっているTumblrではその特定のキーワードをサブドメインに含めて、且つh1タグもそのキーワードにしたら、そのキーワードでGoogleで1位になった。
しかもTumblrを作った当初から約半年ほどもである。これ最強！

ページURLでのキーワードの使用

日本語をエンコードしたURLの場合は、検索結果でもボールドになっているためいくぶんかの影響を持つと考えられる。

あっ、意味があったんだ。わざわざWordPressでURLをそれっぽく作っていたけど、エンコードされて日本語でも意味があるみたい。
でも分かりやすいって言ったら、きちんと英語に直されたURLだろうな

このタイトルの場合に
XML or SQL - Geekなバースデーケーキ
こんな感じのURL
http://hisasann.com/digital/2008/05/xml_sql_geek_cake.html

画像のaltやtitleでのキーワードの使用

画像をリンクに使うなら、alt属性はアンカーテキストと同じぐらい重要だ。また、画像検索はそれなりにトラフィックを生み出すので、alt属性は付けておくべきだ。

昔からの王道ですね。でもボクのブログでは画像をリンクにしていないのであんまり意味がないのかも・・・

meta descriptinタグでのキーワードの使用

meta descriptionでは、キーワードを使うよりも、各ページで異なったものにするほうが重要だと思う。多くの人は汎用のmeta descriptionを使うか、全然入れないのを好むように思える。

重要なのは分かっているのですが、各ページで異なったものを入れるのはこれまた大変。
MTではこういったテキストボックスがあるが、今まで1度も使ったことがない。

boldやstrongタグでのキーワードの使用

strongの使いすぎに注意。boldは影響力なし。

どうりでブログツールの「b」で太字にしても「bold」にならないわけだ。

Macユーザーにはお好みのSafaliだが、Windows版のSafariはまだそこまでシェアが高くなく、そのあたりがちょっと寂しいですが、Safari3.1から開発というメニューが追加されたので今後に期待です。

たいていの人がWeb開発ではFirefox + Firebugだとは思いますが、今度のSafari3.1もかなりそれ相当の機能を備えている。

ページをこのアプリケーションで開く

ローカル内にあるブラウザを自動で検出してくれるのか、Sleipnirまでも開けた。
あとはIE、Firefox、Netscape、Operaも入っていればここに出てくるみたい。

クロスブラウザ対応のときなんかに役に立ちそうです。

ユーザーエージェントの切り替え

これもずら～～と選べるユーザーエージェントが並んでくれているので一発で切り替えができる。

Webインスペクタを表示

おお、いつもFirebugで見ているのがSafariでも見れる。

手っ取り早くキャッシュをクリアできる

ありがたいお話です。
毎回「設定」→「キャッシュのクリア」に行かなくて済むんですから。

などなど・・・

Mac版のSafariはどうなんだろう。

以下からダウンロードできます。
アップル - Safari - ダウンロード

ちょっと前までTwitterがofflineになっていました。
こういった絵もゆる～くてなんかかわいいですね。

単純に「今メンテしてますっ！」的な画面より何倍もユーザーにやさしい。

仕事でWebブラウザで開いた画面をキャプチャすることが多々あるのですが、今まで海外の画面キャプチャ用のソフトを使っていて、いつのまにかシェアウェアになっていたり、試用期間が設けてあったりと意外と使いづらいのが多かったです。

単純に「Alt + PrintScreen」で取るのもいいのですが、スクロールする必要があるWebサイトの場合にちょっと厳しいです。

そんなこんなしていたら会社の人にSleipnirのプラグインでいいのがあるよと教えてもらったのでメモメモ。

窓の杜 - 【NEWS】フェンリル、Webページを画像キャプチャーできる「Sleipnir」プラグインを公開

これはかなりいい感じです。
PNG形式で圧縮してくれるので画質もいいので、お客さんに渡すような画面のキャプチャとしても大変機能します。

まぁSleipnirを主要ブラウザにしていない方は面倒かもしれませんが、画面キャプチャするためだけに入れてもおつりが来るぐらい良質なプラグインでした。

■Sleipnir
カスタマイズに特化したブラウザ Sleipnir。上級者のために。

■SnapCrabプラグイン
Sleipnir | プラグイン | SnapCrab

最近話題になっているIETesterを使ってクロスブラウザチェックを行う場合に、IETesterではうまく動作しないことがあるので、補足としてIE6.0スタンドアローン版を用意すると良いかもしれません。

例えばJavaScriptから新しいウィンドウを開きOpenerを参照するといったことが現バージョンでは出来ていません。
画面連携をする場合にはやっぱりまだスタンドアローン版が必要そうですね。

evolt.org - Browser Archive

上記サイトで「ie6eolas_nt.zip」をダウンロードすればすぐに使うことが出来ます。
IE6.0、IE7.0の両方で確認する場合にオススメです。

まさかこんなサイトがあるとは思わなかったがインパクトとしてはめちゃめちゃ面白い。

その名も「Is Twitter Down?」

上にサイトの画像を載せましたが、単純に「No」と書いてあるだけ、これもWebサービスなんでしょうね。
わざわざドメインまで取得しているところがGeek！

Is Twitter Down?

web製作は求められるスキルが多すぎ！:アルファルファモザイクより。

HTMLを筆頭にCSSや、JAVASCRIPT、
DTPデザイナー並のデザイン能力や色彩能力、
そして、フォトショップ、イラレータ等の
ソフトを使いこなすスキル、
それだけでは、飽き足らず、
昨今のweb2.0の流れから、動的なページが流行。
parlや、phpによるCGIアプリケーション開発
それと連動した、SQL等のデータベース言語のスキル。
欲を言えば、FLASHによるアニメーション作成や
アクションスクリプトによるプログラミングスキルも求められる。

最近では、サーバーを直接いじる機会も多く
単にFTPによるファイルのアップロードだけでなく
アパッチを操作した、フレンドリーURL操作等のスキルもいる。
またUNIXやLINUX等のOSの知識もある程度求められる。

さらにはさらに欲を言ってしまえば
SEO、ハック、SSLのセキュリティ、マッシュアップ等
こまかーーい、いろんな技術も必要になり
ITの職種の中でも、これほどいろんな技術を求められる
仕事はないのではとさえ思う。

via: web製作は求められるスキルが多すぎ！:アルファルファモザイク

確かにWeb屋さんの仕事はやる範囲が結構多い気がする。
ボクはどちらかというと画面デザインよりは裏方の人だから、JavaでどのFramework使って実装しようかな～なんてことを考えたり。
難しい処理をラッピングするプログラムなんて書いたりするんですけど、それでもHTMLやCSSは触るわけで・・・
しかもSEOやWeb2.0デザインも把握して、ユーザビリティを考えると読まなきゃいけない本は山積みですｗ

最近Ajaxで実装するサイトもちらほや出てきてるから、JavaScriptもしっかりと理解していないといけない。
それ以外にもSQLや各種ツールの使い方などなど。

ここまではやっててあたりまえなレベルな雰囲気があるから少々きついのだが、さらに言うとプログラマーは常に新しいものにアンテナ貼る必要があって、Webサービスや新しい技術も最低限「Hello World!!」くらいは試しておかないと、上司に使ってみたい技術の提案すらできない。

こう考えるといったいどれくらい技術に時間を費やせばいいの？となってしまう。
（つまり時間費やしたもん勝ち？ｗ）

とはいっても以下のように検索するスキルが実際に物言うのは否めないですな。

大枠覚えたら、細かいところはググりながらやればいい。
解決方法を見つける手段をマスターすればいいのだ。

via: web製作は求められるスキルが多すぎ！:アルファルファモザイク

上記は単に技術スキルだけだけど、実際にはコミュニケーションノウハウもしっかりと学習する必要がある。
提案力、協調力、コーチングといった人と話す能力がとっても重要である。
これができないと技術スキルがあっても全然相手にしてもらえない。
特にフリーエンジニアの業界だと、このへんが顕著に現れる。

はぅ・・・こんなに列挙したら一体どこから手をつければいいの？と考えてしまうが、実際には日々の積み重ねで磨く以外に方法はない。

さらに言うとプライベートで調べたい趣味のことや、家庭のこと、子供のことも学ばなくていけない状態ですからね。

う～ん、いつ寝ればいいのでしょうｗ

でもITやコミュニケーションが好きで好きで仕方がないので、ボクの性には合っているんでしょう。

今の時代2.0という言葉がつくと、新しいとかかっこいいとかのイメージがだいぶ定着してきたけど、その2.0をいろんなアイテムとかにも当てはめて投票形式で、2.0ランキングを行っているのがこのサイト。

確かにiPod TouchはDesign2.0部門だなわ。

Is it 2.0 ? - www.isit20.com

[via]
100SHIKI.COM

10月19日、Microsoftから提供されたマッシュアップツールを試しに使ってみた。
ブラウザ上で様々なWebサービスAPIをマッシュアップし、簡単にWebサイトを作れるという。
なおWindows Live IDが必要になるので、始めにアカウントを取る必要があります。
Microsoft Popflyでサインアップをすればもうそこにはマウスでグリグリなツール郡とのご対面。

サインアップをするときにMicrosoft Silverlightが入っていないと動作しないので、そちらも合わせてインストールする必要がある。

というかなぜアヒルなんだ。かわいいけどね。

左側にあるツールボックスで使いたいWebサービスを選んで画面中央にドラッグするだけ。
今回はお試しでFlickrとTwitterをドラッグしてみた。そしてTwitterの赤い箱の青い●から矢印をFlickrの赤い箱へ。

これでマッシュアップは完成みたい。

プレビューを押せばFlickrとTwitterがマッシュアップした画面に遷移する。

設定を変更したいときは、赤い箱の脇にあるドライバーのようなアイコンをクリックすればTwitterの何とFlickrをマッシュアップするかが選べる。
Flickrを使うときにはFlickr API Keyを設定してみた。なくても動くのかは試していません。

これがプレビュー。
自分のTwitterの記事と一致するような画像が出てきた。
これは楽しいかもしれない。

他にもAPIはかなりあり400種類ほどあるそう。カチャカチャいじって遊んでみるのもWeb2.0体験としては面白いかもしれない。

■関連サイト
・素人さん歓迎のブロック感覚マッシュアップツール「Popfly」

アンカータグを使いたいがhref属性は特に使わずonclickイベントで処理を実行させたい場合は、以下のようにシャープを使うことによってアンカータグのリンクをクリックしても特にページには遷移しないように出来る。

これをすればリンクとしての機能を使うが処理はonclickイベントで実装することが可能になる。

<a href="#">test</a>

他に何か良い方法があるだろうか。

ティム・オライリー氏のインタビューがあったのでメモ。
ティム・オライリー：ＷＥＢ２．０提唱者に聞く----独占インタビュー - 毎日ｊｐ(毎日新聞)

　オライリー氏　ウェブ２．０は「モノ」ではなく、市場の段階を表す概念だ。パソコン（の基本ソフト＝ＯＳ）にたとえるなら、ウェブ２．０は、まだ（９２年に発売された）ウィンドウズ３．１の時代にあるといえるだろう。まだ先は長く、数多くの発展や革新、市場の大転換が待ち構えている。マイクロソフトが今日のような勝者になれたかどうかは、発足時には誰も分からなかった。産業が成熟期を迎えれば、今後５年以内にはウェブの世界の風景は大きく変わるだろう。

via: ティム・オライリー：ＷＥＢ２．０提唱者に聞く----独占インタビュー - 毎日ｊｐ(毎日新聞)

確かに前と比べてネットに対しての見方は大きく変わったような気がする。
今はBlogやったりSNS覗いたり買い物してみたり。何年か前には考えられない状況なのは確か。
これを利用している人と利用していない人の格差（デジタルデバイド）はどんどん進んでいくんでしょう。
うちの嫁なんて、一応タッチタイプは出来るみたいなんだけどインターネットに対しての恐怖心がすごいのでIEの立ち上げ方すら知らない・・・（笑）

なおティム・オライリーの独占インタビューを読んで。 こちらのブログを読んでたら、Web2.0 EXPOなるものが11月に開催されるよう。
でもなぜ平日～～～。仕事じゃい。

■関連本

bizmemoさんがご自分のPing先を公開してたので便乗

http://api.my.yahoo.co.jp/rss/ping?u=[BlogのRSSアドレス]
http://api.my.yahoo.com/rss/ping?u=[BlogのRSSアドレス]
http://rpc.reader.livedoor.com/ping
http://ping.fc2.com
http://r.hatena.ne.jp/rpc
http://ping.myblog.jp
http://bulkfeeds.net/rpc
http://ping.blog360.jp/rpc
http://www.tagclick.net/ping
http://pingoo.jp/ping/

ちなみにGoogleとかテクノラティとかはPingooで一括送信してるので、このブログのPing先には指定してません。
Movable TypeだとあんまりPing先増やすとタイムアウトでエラーになっちゃうので、こうゆうサービスは便利。
でもYahooのPingがいっつもエラーになっちゃうのはなんでだろう・・・

Ping一括配信サービス Pingoo!

20人の芸術家による作品が、クールなインターフェースナビゲーションでお出迎え。

Flashは作ったことがないけど、こうゆうのを見ると需要がどんどん増えているのかな～と感じてしまう。

PENTAX Photo Gallery

やっぱりはてブが一番のようです。
以外にもYahooブックマークが2位なのにビックリ。
Yahoo利用者が多い証拠なんですね。

FC2ブクマ・・・
これからか？ｗ

Web2.0ナビ: ソーシャルブックマークサービス別の利用率を出してみた

なんと言うか衝撃的だった。
実際まだ梅田望夫氏のWeb進化論は読めていないのだが、まずはフューチャリスト宣言から読んでみた。

この本の楽しいところは梅田望夫氏と茂木健一郎氏の対談が一冊の本になった感じでとっても読み易い。
そしてこのお二人のお話はついつい朝方までかかっても読んでしまいたいほど、魅力のある話をされていて本当にバイブルになった。恐らくWeb進化論もそうなるだろうが。

お二人ともGeekなネットヘビーユーザーだからこその意見。Googleに対しての意見、はてなからのメッセージなど、本当にこっちが好きな人には堪らないないようになっている。
いつまでも応援していたいお二人です。プロフェッショナル今日も見ましたよ。茂木さん！笑

【関連リンク】
・茂木健一郎　クオリア日記
・My Life Between Silicon Valley and Japan

【関連の本】

Web2.0系のブログでよく見るBeta版のバナーをかっちょいい感じで作れるジェレネータをご紹介。
PCにインストールするアプリでBeta版だと、ちょっとインストールにためらっちゃいますが、Webの世界でBeta版が基本。
これは常にGUIやサービスを追加していきますよ～という意味でBetaなのです。

かっこいいロゴでブログのタイトルを彩ってみてはいかがだろうか。

以下に簡単な操作方法を。

表示させたい文字をText欄に入力し、右側にあるイメージのどれかを選択。
たったこれだけ。
後は、出来上がったイメージを右クリックから画像を保存しちゃえばいつでも使えるロゴの作成完了。

細かい部分の微調整は、各テキストボックスに値を入力すればOK。

APPLYを押しても設定を反映できます。

こんな感じで作ってみた。

これからブログのタイトル横くらいに表示してみようと思います。

以下のURLからどうぞ。
Web 2.0 Badges - Useful collection of stylish web 2.0 badges and badge generator.

Top 10 Twitter AppsこちらにTwitterアプリのTop10があったので紹介いたします。

ボクはまだTwitter歴は浅いほうだけど、毎日チェックせずにはいられない依存状態に陥っています。
Mixiとはまた違って楽しい。というかMixiはあんまりやっていないけど。

以下Top10

• 1位：Atlas - powered by Fresh Logic Studios


• 2位：Squawk: Connects Second Life up with Twitter and Jaiku.


• 3位：Twitticious


• 4位：Remember The Milk for Twitter


• 5位：Twitter Comic Book - TimWintle - SocialComicBook.com


• 6位：Mashing 30Boxes and Twitter


• 7位：Twit Bin


• 8位：TwittyTunes


• 9位：Twitterment


• 10位：Flotzam

英語圏用のアプリもあるので、日本だときついのもありますが、やっぱり英語だろうとTwitterをカリカリいじれるのが楽しい。
みなさんもいじってみてはいかがだろうか。

以下がボクのTwitter。もしよければ…
Twitter / hisasann

ブログのアクセス数を増やす21の戦略このエントリーがあまりにすばらしいのでちょっと言及。

ただし、SEOmozという海外ブログで書かれている内容なので、もちろんこのSEOも海外向け。

この中ですばらしいと感じた内容は、

1.適切なブログソフトを選ぶ（または自作する）
ぶっちゃけこれが一番難しいと思うが、自分がどのブログサービスを使うかが重要になってくる。
既存のブログサービスを使えばURLもそのブログサービスのドメインになってしまう。
それだと独自っぽさがなくなってしまうので、ブログ自体を愛するなら独自ドメインを作ったほうがいいのだろう。
それならMovable Typeを使ったブログ作成が望ましい。
ただし、この場合レンタルサーバ代とドメイン代が掛かってしまうが年間にして両方合わせて1万円もいかないだろう。

7.流行に飛びつかない
意外と飛びついちゃう。笑
つまり流行を追っても、そのネタに対して言及しているブログなんて腐るほどあるし、他のブログより面白い言及を続けていき、完全にブランド化しないとユーザは来てくれない。
そうではなく、ニッチに分野でもロングテールは意識されるので、ちょっと面白分野を突き詰めて評価されるのが重要ということである。

14.人間味を出す
これもすごく重要だと思う。
ボクは他にもニュース系のブログをやっているが、単純に画像や動画をペタペタ貼ったブログより、その画像を見てどう感じたとか、この動画のここがすばらしいとかのコメントを入れてエントリーを作成したほうが見ている人を飽きさせないと思う。

SEOという言葉が出てきて、ブログのHTMLを準拠させるとかに必死になっていたときがあるが、今はその中身がまさにSEO効果大な時代なんであろう。
SEOとSMOを駆使すれば、それなりのトラフィックを稼げるということである。

でもそう簡単にはいかないけどね。笑

*LOVE IS DESIGN*さんのところで今まであんまり見たことがない、検索サイトまとめをしてくれました。

らぶさんのページは相変わらず「無駄にエロい」し、いっつもホッテントリだし、見ててこっちが楽しくなってくるよん。ｗ

それにしても検索サイトってこんなにあったんだ。
普段Googleしか使わないから知らなかった…

ナウなヤングにバカウケな「検索サイト」まとめ | *LOVE IS DESIGN*