ブログ更新を止めないための7つの方法と年の瀬のご挨拶

今年も早いもので大晦日です。

今年の8月から、何度も挫折したブログを再開し、
自分に鞭をうちつつ、なんとか8月から毎日更新を達成できました。

ブログ毎日更新を達成する際に自分に課したルールやTipsなどを
紹介させていただきます。
  1. 時間がある時にまとめて書き上げる
    • bloggerには予約反映の機能があるので活用しましょう
    • 毎日10分、よりも、週1回1時間、の方が楽でした
  2. Twitterをメモ代わりに使う
    • その時思ったことを気軽にTweetしておいて後で見返すと、自分が何を考えていたか思い出すきっかけになります。
  3. ソーシャルブックマークをメモ代わりに使う
    • ブックマークする時にコメントを残しておくと、自分が何を考えていたか思い出すきっかけになります
  4. メール下書き機能を使う
    • 地下鉄に乗ってるとき(電波が届かない時)など、思ったことは携帯メールに打ち込んでメールしておくと、ブログの下書きにためておけます
  5. 勉強したことの復習のつもりで書く
    • その週に学んだことを思い出しながら、正書するつもりで書く。
  6. アクセスログ解析を使い、アクセスしてくれる人の心理を読み取る
    • アクセスがあることを確認できてモチベーションにつながる
    • どういう経路で、なぜ自分のサイトに着てくれたかを考えることは楽しい。特に検索エンジンからの誘導の原因を考えるのは楽しい(自分の知り合いではない可能性が高いから)
  7. 控えめに広告を入れて少量のお金を稼ぐ
    • 収入がずっと0円で更新モチベーションを保つのは困難。
    • 広告だらけにはしない。できるだけ自然に読み手のためになる広告を入れる
    • ブログで大きく稼ぐのは目的にしない。あくまで自分のためのドキュメント置き場という感覚でやる(それが誰かの目に触れて役に立てば本望)
    • 大きく稼ぎたい場合は、別でサイトを構築し、そちらにブログから誘導することで稼ぐ。ブログはあくまで誘導口+宣伝場所とする
思いついたのはこんな感じです。

というわけで、今年1年このブログを見ていただき、ありがとうございました。
来年もごひいきのほど、よろしくおねがいします。

OpenIDでのログイン機能を動かしてみてなんとなくわかった気になる(PHP編)

OpenIDってなんだよ、っていうことは検索すればWikipediaをはじめ、
細かい説明が書いてあるページがたくさん見つかると思うので、
今回は、http://www.openidenabled.com/が提供するPHPライブラリを使って
動作確認できるページをセットアップしてみる。

まずは、XAMPPのセットアップ。
OpenIDでのログインでは、https通信をする必要があるので、
手っ取り早く環境を構築するには、XAMPPが一番だともいます。
XAMPPをインストールしたら忘れずに起動しておきます。

次に、http://www.openidenabled.com/が提供するPHPライブラリを
ダウンロードして、/opt/lampp/htdocs/以下に保存+解凍。
php-openid-*.*.* というディレクトリができるが、
わかりやすくするためバージョン情報をrenameで隠蔽。
$ cd /opt/lampp/htdocs
$ wget http://openidenabled.com/files/php-openid/packages/php-openid-*.*.*.tar.bz2
$ tar jxvf php-openid-*.*.*.tar.bz2
$ mv php-openid-*.*.* phpopenid
次に、自分のホスト名がlocalhostだとOpenID認証サーバ側で怒られる場合があるので、
/etc/hostsを編集して、適当に自分のサーバに名前をつける
$ cat /etc/hosts
127.0.0.1 my.example.com
これで基本的な準備は完了。
http://my.example.com/phpopenid/examples/consumer/
にアクセスしてみて、


このような画面がでたら、OK
Identity URLに以下のものを入力すると、それぞれのプロバイダでログインできる
  • yahoo.co.jp」 と入力
    • Yahoo! Japan IDでログイン
  • yahoo.com」 と入力
    • Yahoo! ID(アメリカのYahoo! ID)でログイン
  • livedoor.com」 と入力
    • ライブドアIDでログイン
  • https://www.google.com/accounts/o8/id」 と入力
    • Google accountでログイン
    • Googleは上記のURLを入力する必要あり
  • mixi.jp」 と入力
ログインに成功すると、「You have successfully verified *****」
というメッセージとともにログインに使われたOpenIDが、緑の枠に表示されます。

動かすだけでなんとなく理解がすすむ気がするので、
興味と時間がある人はおためしください。

以下、はまった点など
  • GoogleのIdentity URLはgoogle.comじゃだめ。http://code.google.com/intl/ja/apis/accounts/docs/OpenID.html 
  • mixi.jpの証明書登録がめんどう
  • XAMPPをhttp://localhostで見ているとOpenIDログインできない
  • XAMPPの場合、/opt/lampp/share/curl/curl-ca-bundle.crtに既存の証明書ファイルがある

google chrome for linux でFlashが見れない問題対策

google chrome on linux がめちゃめちゃ高速で、
本気で乗り換えようかと検討中なのですが、
Ustreamが見れなかったので、なんでだーと思って調査した時のメモ。
  1. 最近iceweaselが重い
  2. でもaddonもあるし、他にブラウザの候補がないので我慢
  3. google chrome on linux のベータ版がリリース
  4. なにこれ早い
  5. 拡張機能も今後できそうだし、本気で乗り換えるかな
  6. Ustream見れない orz ← いまここ
というわけで、検索してみたらあっさりと見つかりました。
http://tanarky.blogspot.com/2009/12/boost.html
これの通りに、
$ sudo mkdir /opt/google/chrome/plugins
$ sudo cp /usr/lib/iceweasel/plugins/libflashplayer.so /opt/google/chrome/plugins/
を実行して、chromeを再起動したら見れるようになれました。

これから、google chromeの拡張機能の作り方を調べたいと思います。

Debianのデフォルト画像ViewerがいまいちだったのでComixをインストール



Debianのデフォルト画像Viewerがいまいちだったので
何かいいものがないかな、と調べていたら、
Ubuntu 7.10で使える画像ビューア
を見つけたのでComixをインストールしてみた。
$ sudo aptitude install comix
でインストール完了。簡単。
あとは、Gnome menuのアプリケーション→グラフィックス
に追加されているはずなので、そこから起動。

いけてるのはZipファイルの中にある画像ファイルを
解凍せずに閲覧できるところ。
Zipで固められた画像ってなんだよ、というつっこみは無しでおねがいします。

Google Chromeもあるし、画像Viewerもあるし、
本当に最近はWIndowsから縁が切れてきました。

jquery-1.4は2010/01/14リリース予定

jquery-1.4は2010/01/14にリリース予定みたいです。
http://ejohn.org/blog/closestarray-in-jquery-14/
We're still on track to push out a new alpha very soon and the final release on January 14th.
このブログエントリーにある、closestってなんだ、と思って
DEMOを触って、サンプルコードを読んでみました。

要は、ul, li のようなliが複数ある配列構造のHTMLでも、
1回だけ、
$(e.target).closest("li").toggleClass("hilight");
と書けば、すべてのliに処理を追加できるすぐれもの、
ということを理解。
これは便利。さすが。
1.4系では、closestのような実験的機能が高速化されて、
正式な機能として提供されるようです。
http://docs.jquery.com/Traversing

Google Chrome for linux ベータ版をDebian lennyにインストール

http://www.google.com/chrome
google chromeのlinux版がでました。
まだベータ版ということらしいです。

インストールする前に、libnssのアップデートが必要みたいなので、
アップデートを実行しました。
sudo aptitude install libnss3-1d
これですね。
というわけで、準備完了したので、chrome本サイトから
ダウンロードしたパッケージファイルを
sudo dpkg -i /home/satoshi/Desktop/google-chrome-beta_current_i386.deb
でインストールできました。
インストール後にフォントをVL Pゴシックに変更しました。



エクステンション開発も公開されたようだし、
iceweaselもまんねり気味になってきたので、
chrome乗り換えを検討したいと思います。

bloggerのテンプレートをカスタマイズしてみる(カスタマイズ前下準備編)

バックアップも終わり、デザインテスト用ブログも作成して
外部ファイル置き場のサーバも確保できたので、
いよいよカスタマイズしていこうと思います。

まずは、レイアウト→新しいテンプレートの選択、で
自分がイメージするブログのデザインに近いテンプレートを選択します。
以下のものは、
  • 全体幅
  • フォントサイズや色
  • カラム数
後で細かくデザイン変更できるので、あまり気にしなくてOKですが、
自分ですべて細かく設定するのは大変なので、できるだけ近いものを
選ぶ方が後々楽です。

基本テンプレートが決まったら、レイアウト→HTMLの編集で
細かい設定をしていきます。この時に、「ウィジェットのテンプレートを展開」
というチェックボックスをONにして編集をしましょう。
これをONにすることで、設定できるすべての項目が表示されるようになります。

bloggerのテンプレートをカスタマイズしてみる(デコレーション編)

前回書いた通り、Bloggerのテンプレートは、1つのXHTMLファイルです。

シンプルでわかりやすいのですが、
以下のようにデザインを変更しようとしたときちょっと困ります。
  • サイトロゴやアイコンなどの画像を追加したいとき
    • 画像置き場は正式に提供されていない
    • 投稿に画像を貼り付けて、それを参照する方法はあるが、めんどくさい
  • 外部のCSSを読み込みたいとき
    • XHTML内に記述することもできるがソースが汚くなる
    • XHTML内でコードを編集するのは大変
  • javascriptを動かしたいとき
    • XHTML内に記述することもできるがダブルクオートのエスケープなど面倒
    • XHTML内でコードを編集するのは大変
というわけで、外部ファイルサーバを用意する方が、
XHTMLはすっきりとした形で書けるので、
よさそうです。

問題はどこのサーバに置くか、ということですが、
まずはFC2においてみます。
国会議事堂
fc2に置いた画像:http://tanarky.web.fc2.com/img/gijido.png
ファイル自体は存在するのですが、外部ドメインのサイトから参照できません。
FC2側でリファラドメインをチェックして、参照をブロックしているようです。

check
geocitesに置いた画像:http://www.geocities.jp/tanarky/blogger/tanarky/img/check.png
は問題なく見れるようです。というわけで、置き場所はとりあえず、geocitiesにしてみます。

JS-Blogger-Client: inserted post

This is the body of the blog post. I can include HTML tags.

WordPress 2.9がリリースされました

wordpress 2.9がリリースされました。
追加された機能は以下の通り。
  • Undoとゴミ箱機能
  • 画像編集機能
  • プラグインの一括アップデートチェック
  • 簡単なEmbedタグの挿入による動画貼り付け機能
だそうです。早速開発マシンにインストールしてみようと思います。

bloggerのテンプレートをカスタマイズしてみる(基礎知識編)

bloggerのテンプレートをカスタマイズする方法を少しずつ学んでみる。

まずは、何はともあれ現状のバックアップから。
  1. bloggerにログインして、
  2. レイアウト→HTMLの編集
  3. テンプレートをすべてダウンロード、からXMLを保存しておく
これでバックアップは完了。

また、現状公開中のブログのデザインを編集すると、
編集中のタイミングで見にきた人に影響がでちゃうので、
それとは別にデザインテスト用のブログを用意することをおすすめします。
自分の場合は、こちらを用意しました。

bloggerのテンプレート+デザインは、結局1つのXHTMLファイルで表現されます。
このXHTMLでは、簡単なプログラミングをすることが可能になっている。
まずはb:***について。
  • b:include
    • 定義済みの共通部品をそこに表示する
  • b:if, b:else
    • 条件分岐
  • b:skin
    • CSS定義?
  • b:widget
    • 不明
  • b:includable
    • includeするための部品を定義する?
次に、data:***について。これは、投稿のタイトルやID、URLなどを
使用したいときに使う。
  • data:post.url
    • 個別記事のURL
  • data:post.id
    • 個別記事のID(一意な数字になるっぽい)
  • data:post.title
    • 個別記事のタイトル
などなど。
他にも色々項目はありそうですが、上記でやりたいことのほとんどを網羅できそうです。
これからもうちょっと細かく調べてみます。


YUI3 Galleryにプログラムを載せる方法3 モジュール追加承認

以前書いた自作のYUI3プラグインをGalleryに登録依頼していたところ
すぐに承認されました。
YUI3 querystring parser

承認までの流れとしては、
  1. サイトにログインしてプラグインについての説明を書く
  2. 待つ
  3. メールが届いて承認完了
という感じでした。
メールは、
Subject:  [Gallery Item Approved] - querystring
Body:
Dav Glass approved your gallery module: querystring
http://yuilibrary.com/gallery/show/45
という内容でした。
Dav Glassってのは、YQLのプラグインを作った人のようです。
このyuilibrary.comのgallery管理もしている人なのかも。
Yahoo!の社員かな?

何はともあれ、Galleryに追加登録されましたが、
まだ、コードをYahoo!が提供するCDNには置けていないので、
そちらに置いてもらえるようにコードを綺麗にしてから
再度申請したいと思います。

祝 世界デビュー

boost勉強会が面白かったのでまとめ

ちょっと前の話になるが、Boost勉強会をUstreamでストリーミングされてました。
土曜日にベッドに寝ながら見てましたが、面白かったので、資料のリンクなどを
まとめてみました。

Ustreamリンク
Boost.勉強会のまとめとか感想とか今後についてとか



Boostは少しだけ使ったことがあるけど、知らない機能ばっかりでした。
使いこなせるようになったら強力だとおもいましたが、
最近はJavascriptばっかり書いてるフロントエンドエンジニアなんで
機会ができたらやってみようっと。

またブログのレイアウトを変えました(Adsense+インタレストマッチ対策)

またブログのレイアウトを変えました。
レイアウトを変えた理由は、アクセス数が下がっているのに、
広告収入がめちゃくちゃ下がってしまったからです。

広告収入が下がった原因は、
レイアウトをフリーのテンプレートに変更したところ
細かい広告設定がBloggerのエラーチェックに引っかかって
変更できなくなってしまったから、と考えました。

特に、広告の位置が悪かったんであろうという考察をしまして、
結局デフォルトのレイアウトからカスタマイズすることに。

やったことは以下
  • 削除していたYahoo!インタレストマッチを復活させた
  • Adsenseのサイズを調整した。ナビに配置した広告は小さく、投稿ごとに表示される広告は大きくした
  • 広告の色を背景色に溶け込ませるようにした。目立たなくなるけど主張しすぎないようにした
  • CSSを若干変更した。blockquoteを点線で囲むようにした
  • 投稿タイトルが目立つようにアイコンをつけてみた
カスタマイズがわかってきたので、Twitterやソーシャルブックマークのリンクが
表示されるようにしてみたい

Twitter APIのドキュメントを読んでみて雑感

ほりえもんのTwiterとamebaなうに対する考察がおもしろい。
芸能人が大挙してTwitterを使い始めたらこまると考え「なう」をオープンさせたのかもしれない。
(略)
一つは、そもそもアメブロの主要コンテンツである芸能人ブログはTwitterの140文字つぶやきと、現状でもほとんど変わらないということ。ページビュー稼ぐために1行毎に行間が数行もあることで見た目を水増ししているにすぎず、きちんと要約してまとめればほとんどのエントリが140文字に収まるはず。
ワロス。amabeなうはうまくやらなければ流行らないのは完全に同意。
芸能人blogのように、アイデア次第である程度のお金を生み出したり、
話題になってある程度の人を集めることは可能かもしれないが、
Twitterには到底およばないと自分は考える。
Twitterが本体のサービスを極限までしぼって、オプションサービスは全てサードパーティに自由にやらせているところである。これが実はTwitterがここまで広まった大きな理由のような気がする。
これも完全に同意。
APIを公開してここまで成功したサービスは他に思い当たらないし、
自分のサイト(の見た目など)を構築する労力を削ってまで、
API+プラットフォームに心血を注いでいるのがTwitterのやり方なのは、
Twitter API Documentを見ればわかる。

例えば、search APIは、
Requires Authentication (about authentication):
false
このAPIを使うのに、認証は不要となっている。
これにはかなり驚いた。
http://search.twitter.com/search?q=%23yshop
このHTMLページと
http://search.twitter.com/search.atom?q=%23yshop
このAPIのレスポンスは等価である、ってこと。
# 2つとも、認証不要で参照できるし、内容も同等だから

おれはデータを集めて簡単に使えるようにするから、
あとはお前らがうまいこと使って面白いもん作ってくれよ、
というスタンス。なんという男前。

限られた人数で世界を驚かせるには
自分たちは何を作るか、と同じくらい、何を作らないか、
ということを明確化するのが大切なんだな、と気づかされました。

ヤフオクにTwitterにつぶやくリンクが表示された件について

ヤフオクの商品詳細ページにTwitterにつぶやくリンクが表示されたようです。
Javascript Offだとリンクが表示されない仕様なようです。

リンクをクリックすると、
RT @8209 - Twitter★「ツイッター」でビジネスが変わる!★格安!!・美品!! http://page13.auctions.yahoo.co.jp/jp/auction/r59740614
といったメッセージが初期表示されます。
@8209は、Yahoo!オークションの公式アカウントのようです。

Twitterボタンが表示されている反応は、こんなかんじ
「ライバルを増やすからTweetしない」という入札側としては正直な意見も。

で、@8209に対する投稿を見てみると、
こんな感じで、なかなかのスピードで投稿されている。
内容を見ると、出品者が自分でTweetしているのかな、と予想される。
出品者としてはいろんな人に注目されたいのでこれまた理解できる行動。

ヤフー側のこれからのサービス展開に期待。

Yahoo!オークションとショッピングのアフィリエイトリンク作成bookmarklet

Yahoo!オークションには
オークション用のアフィリエイトリンク作成ツールがあって、
Yahoo!ショッピングには
ショッピング用のアフィリエイトリンク作成ツールがあり、
作成されるアフィリエイトURLはパラメータの値が微妙に違ってめんどくさい。

2つのブックマークレットを用意するのもいいけど、
使い分けるのがめんどくさいので、
if文で分岐した1つのブックマークレットにした。
javascript:var p,n,l=location.href,e=encodeURIComponent;if(l.search(/shopping\.yahoo/)!=-1){n='shpg';p=877935733}else if(l.search(/auctions\.yahoo/)!=-1){n='auct';p=877775177}else{alert('error');exit}var u='http://atq.ck.valuecommerce.com/servlet/atq/referral?sid=2219441&pid='+p+'&vcptn='+n+e('%2Fp%2FNqNP7flCUN49xU3KOQg-')+'&vc_url='+e(l);done=prompt(n,u);location.href=u;
上記の太字の部分を自分専用に変える必要がある。
自分の文字列を知る手順が以下。

http://special.auctions.yahoo.co.jp/html/affiliate/index.html
から、
URLに「http://auctions.yahoo.co.jp/jp/」といれて、
テキストにはなんでもいいので、文字列をいれて、
リンク作成ボタンを押して遷移したページで、
HTMLソースにある「vcptn=auct*****」の*****部分が
自分のアフィリエイトIDっぽい。

上記のブックマークレットに貼り付ける際には、
auctの部分は取り除いて貼ってください。
auctの部分はショッピングの場合、shpgになるみたい。
# Yahoo IDが同じなら*****の部分は共通

複数のYahooIDでログインして、ツールと格闘して
ようやく仕様を理解するところまでたどり着きました。
ちゃんと明文化して仕様を公開してくれればいいのに。

さて、次は、bitly連携して、アフィリエイトURLを
短くするブックマークレットに挑戦してみます。

YUI3 Galleryにプログラムを載せる方法2 モジュール登録

http://tanarky.blogspot.com/2009/12/javascriptquery-string-parseryui3.html
以前、YUI3のプラグインを書いてみたので、yuilibrary.comが提供するCDNに
登録してもらうように、準備をしてみた。

手順は
http://yuilibrary.com/gallery/developer#pullrequest

まずは、OpenIDでログインしてみて、
My Moduleに登録を開始。

ソースの場所とかを書かないといけないので、
git push origin master
して、
http://github.com/tanarky/yui3-gallery
で見れる状態にしておきました。
(まだコードは整理していないが)

で、登録完了
http://yuilibrary.com/gallery/show/45
登録時点では、pendingとなっているが、
何か審査があるのか、自分の入力が足りないのか謎。

とりあえず、しばらくこのまま待ってみるとするか。

OAuth認証アプリを作るためTwitterにアプリケーション登録をする

OAuth認証を使ったアプリケーションの勉強のために、
Twitterでアプリケーションアカウントを取ったのでメモ。

まず、なぜTwitterにしたか、というと、
Yahoo! JapanでもOAuth用のアプリケーションIDは取得できるが、
なぜか自分のサイトのドメイン認証をしないと
アプリケーションIDが取得出来なかったので、
作りたいものが明確になって環境がそろうまで後回しにしました。

TwitterでアプリケーションIDを取得するには、
まず、http://twitter.com/appsにいって、
 
「Register a new application」をクリックしてフォームページに遷移します。
入力内容は以下の通り
  • Icon: 適当にアップロード。自分はここで選びました
  • Application Name: 適当に入力。testhogehogeとか
  • Description: 適当に入力。テストほげほげ
  • Organization/Website: 空
  • Application Type: ウェブアプリを作ろうと思っているのでBrowserを選択
  • Callback URL: 空。後で変更できる。
  • Default Access Type: write予定はなくても、read/writeで。
  • Use Twitter for login: Yesで。
これで、英単語を入力して保存すればアプリケーションの登録は完了。

Twitterアプリの準備が整ったので、OAuthまわりの調査をして
何か作ってみようと思います。

iPhone 3GS 16G 黒を割賦で購入(実質無料)

http://mb.softbank.jp/mb/iphone/everybody/
2009年12月4日から2010年1月31日まで、
iPhone for everybodyキャンペーンということで、
iPhone 3GSの値下げになったので、
とうとうiPhoneにのりかえることにしました。

ちょうどauの年割のはざまで、お金を取られることなく
au -> softbank へのMNPで乗り換えが完了しました。

といってもauの解約からあわせて、手続きに
2時間以上かかりました。時間がないときは危険。

1週間ほどiPhoneを使ってみた感想は、
携帯の概念が変わりすぎて最初は辛いけど、
なれるとめちゃ快適、です。

今のところ、お気に入りのiPhoneアプリは
Dropboxです。これにPDFを入れまくれば、
電車の中では暇しません。

JavascriptによるQuery String ParserをYUI3のプラグインとして作ってみた

JavascriptでQuery String Parserがほしいな、と思ったので、
Query String ParserをYUI3のプラグインとして作ってみた。

以前、環境は作ったので、ビルドは簡単でした。
手順は↓
http://yuilibrary.com/gallery/setup

問題は、コードですが、Parse部分は
http://adamv.com/dev/javascript/querystring
にあるコードを参考に書いてみました。

プラグインのお作法については、yqlやbitlyのコードを参考に
悪戦苦闘しつつ、なんとかできました。

ビルド後のjavascriptのコードはこちら
http://github.com/tanarky/sample-codes/tree/master/js/yui/htdocs/gallery/gallery-querystring/

プラグインを使ったサンプルコードはこちら
http://www.geocities.jp/tanarky/yui/yui3_qs.html

さて、なんとなく動いているようなので、
あとは公開といきたいところです。
parseコードを公開している人にメールしてみるのと
公開のための手順を調べてみます。

Google App Engineで全文検索

google app engineで全文検索できるようになるライブラリを見つけた

普通、Google App Engineでは、文字列型(String)はインデックスされるが、
文書型(Text)は検索対象外である。Stringの最大長は500バイト。
Textは1Mバイト。

ホームページを見ようとしても、真っ白でみれないが、
googleのキャッシュから判断するに、
スペースやハイフンでTextを分割して、Stringにして
突っ込んでいるような処理に見えた。

英語ってスペースで簡単に単語を区切れるからいいよなー、とちょっと嫉妬。
これに形態素分割機能をつけたら神だな。

YUI3のbitly galleryを使ってショートURLを作成する

bit.lyは、短いURLを発行し、クリック率などを
trackできるようにしてくれるサービスで、
主にTwitterクライアントで採用されていることで有名です。

ショートURLの作成には、APIが公開されているので、
そちらを使うと便利です。

今回は、そのAPIをJavascriptからYUI3のbitlyプラグインを使って叩いてみました。

今回用意したサンプルはこちら

コードの要所部分を解説すると、

    // bitly api の "login" と "apiKey" を設定する
    var b = new Y.bitly({
        username: 'tanarky',
        key: 'R_e0cbd9274f2301ce3f0bc62e45b975f7'
    });
    // 今のURLからショートURLを作成する
    b.shorten(location.href, function(e) {
        Y.one('#bitly').setContent('このページのショートURLは、「'+e.shortUrl+'」です。');
    });

b.shortenのコールバック関数の引数eに対して、
e.shortUrlで簡単に取得できます。

便利な世の中になったなぁー

HTMLのtarget属性とかJavascriptのwindow.openとかブラウザのポップアップブロックとかについて

HTML 4.01 strictではtarget属性が認められていない。
参考:Yahoo知恵袋の質問

一方、HTML5では
The target attribute, if present, must be a valid browsing context name or keyword. It gives the name of the browsing context that will be used. User agents use this name when following hyperlinks.
と認められるらしい。
A valid browsing context name or keyword is any string that is either a valid browsing context name or that is an ASCII case-insensitive match for one of: _blank, _self, _parent, or _top.
また、javascriptでwindow.openするときに、
ブラウザのポップアップブロックされる場合と
されない場合についてあるので、備忘録としてメモ。


これはブロックされる
これはブロックされません

aタグにonclick属性で直接window.openすると、ブロックにはひっかからない、
間接的にwindow.openを呼ぶと、ブロックされる、みたいです。

ブラウザのセキュリティレベルを変更すると、target属性でも警告が出たり
するようになるが、デフォルトでは上記のような挙動になります。

追記:
あれ、、、ブログが公開されて確認してみたら、
両方ともポップアップできました。@ iceweasel-3.0系
もうちょっと確認してみます

jquery-1.4 alpha released

jqueryの1.4 alphaがリリースされました。
http://blog.jquery.com/2009/12/04/jquery-14-alpha-1-released/
satoshi@debian:~/src$ ls -l jquery-*js
-rw-r--r-- 1 satoshi satoshi 57254 2009-11-24 03:54 jquery-1.3.2.js
-rw-r--r-- 1 satoshi satoshi 89994 2009-12-05 02:55 jquery-1.4a1.min.js
サイズがだいぶ大きくなっているようですが、
  • live was drastically overhauled and now supports submit, change, mouseenter, mouseleave, focus, and blur events in all browsers. Also now supports context and data.
  • append, prepend, etc. have been heavily optimized.
  • add has been adjusted to always return elements in document order.
  • find, empty, remove, addClass, removeClass, hasClass, attr, and css have been heavily optimized.
速度の改善と、マウスイベントが追加されたのが主な変更点みたいです。

作者のTwitterに、これから情報がアップされそうなので、
気になる方は、フォローすることをおすすめします。
http://twitter.com/jeresig

はじめてのYUI3 Galleryをビルドしてみる

手順はこちらを参考にやってみた。
名前は、gallery-tanarky としている。
# ビルドにantを使うのでinstall
$ sudo aptitude install ant
# バージョンの確認
$ ant -version
$ java -version

# あらかじめforkしていたyui3-galleryをclone
# forkする手順はhttp://yuilibrary.com/gallery/developer
$ git clone git@github.com:tanarky/yui3-gallery.git
$ cd yui3-gallery/

# ファイルとディレクトリ作成
$ mkdir -p build/gallery-tanarky
$ mkdir -p src/gallery-tanarky/tests
$ mkdir -p sandbox/tanarky/gallery-tanarky
$ mkdir -p src/gallery-tanarky/js
$ touch src/gallery-tanarky/build.xml
$ touch src/gallery-tanarky/build.properties
$ touch src/gallery-tanarky/js/tanarky.js
$ emacs src/gallery-tanarky/build.xml
$ emacs src/gallery-tanarky/build.properties
$ emacs src/gallery-tanarky/js/tanarky.js
$ cd src/gallery-tanarky/

# ビルドする
$ ant all
------
BUILD SUCCESSFUL
Total time: 16 seconds
------
と出力されたので、うまくいったんだろう。
とりあえず、満足。

YUI3 Galleryにプログラムを載せる方法

調べてみた
  1. http://yuilibrary.com/forum/ucp.php?mode=registerでアカウントを取得
  2. githubのアカウントを取得
  3. 寄付募集中というコンテンツをサラッと読んで
  4. http://github.com/yui/yui3-gallery/からforkすれば後は自由に開発
ギャラリーのコードは以下にあるが
http://github.com/yui/yui3-gallery/tree/master/src/
2009年 12/4現在、25個ある。思ってたより少ないかな。

なんか面白そうなのに、
http://github.com/yui/yui3-gallery/tree/master/src/gallery-event-konami/js/
http://en.wikipedia.org/wiki/Konami_Code
こんなものがあった。
なんのために、どこで使えばいいんだ?

もうちょっと色々読んでみて、わかってきたら何か1つ上げてみようとおもう。

YUI Library Gallery が面白そう

YUI Library :: Galleryが面白そう。
意訳すると、
  • 手早く配れて
  • たっぷりの容量で
  • だれでもアクセスできて
  • 簡単に追加+公開できて、
  • BSDライセンスじゃなくても問題無し
という感じでしょうか。
http://yuilibrary.com/gallery/popular
には有名で便利なものがそろっています。
気になったのは
ってところですかね。bitlyまであるなんて、素敵です。
おれも何かつくってアップしてみます。

YUI3を使って、Javascriptから外部ドメインにPOSTリクエストをする

なんでわざわざそんなことをするのかはさておき、
YUI3を使って、Javascriptから外部ドメインにPOSTリクエストをしてみた。

主に障害となるのが、クロスドメイン問題。
この問題を回避するために、色々な手順や準備が必要なので、
備忘録として残しておく。

環境の準備として、用意するのは以下の2つ
  1. APIサーバ
  2. javascriptからデータをPOSTするクライアント
この時、1.と2.は、ドメインが別のサーバにわけておく。
例えば、1.はレンタルサーバ上のWebサーバ(http://example.com/api.php)、
2.は、ローカルにたてたWebサーバ(http://localhost/foo.html)、など。

この環境で、foo.htmlから、api.phpに対してPOSTでデータを送信する。

このときに、foo.htmlの中に、
<form action="http://example.com/api.php" method="post">
とは書いてはいけない、という縛りを設ける。

なんでそんな縛りを設けるか、というと、
http://example.com/api.phpは、データの更新APIという位置づけで、
ページの表示処理をいれたくない。成功か失敗かだけを判定するAPIとして
存在したい。ページの表示処理は、http://localhost/foo.htmlの役割、
http://example.com/api.phpはデータのCRUD操作をする役割として
明確にわけたいからである。

というわけで、foo.htmlからjavascriptをつかって、外部ドメインに対して
データをPOSTしなければいけない、というわけ。

で、結論としては以下の手順でできました。
  1. http://example.com/crossdomain.xmlを設置
  2. http://localhost/以下にYUI3が提供するio.swfを置く
  3. YUI3を用いて、http://localhost/foo.htmlを以下のように記述する
1.に関しては、こちらを参考に。
2.に関しては、YUI3のサンプルページにあるので、ダウンロードしておく。
foo.htmlと同一のドメインから参照できるようにしておかないとだめ。

で、3.のコードはこちらを参考にどうぞ。

セキュリティ?なにそれ、うまいの?
って感じですが、やりたいことが実現できたので、よしとす。

はじめてのGoogle App Engine in python on Debian lenny

はじめてGoogle App Engineを、Debian lenny上で、
pythonを使って遊んでみた履歴です。
あまりに簡単すぎてワロタ。
実行したコマンドは、ガチで、以下のみ。
satoshi@debian:~/tmp/google_appengine$ wget http://googleappengine.googlecode.com/files/google_appengine_1.2.7.zip
satoshi@debian:~/tmp/google_appengine$ unzip google_appengine_1.2.7.zip
satoshi@debian:~/tmp/google_appengine$ cd google_appengine/
satoshi@debian:~/tmp/google_appengine$ ./dev_appserver.py -h | less
satoshi@debian:~/tmp/google_appengine$ mkdir tanargle
satoshi@debian:~/tmp/google_appengine$ cd tanargle/
satoshi@debian:~/tmp/google_appengine$ e app.yml
satoshi@debian:~/tmp/google_appengine$ e tanargle.py
satoshi@debian:~/tmp/google_appengine$ cd ..
satoshi@debian:~/tmp/google_appengine$ ./dev_appserver.py tanargle/
satoshi@debian:~/tmp/google_appengine$ ./appcfg.py update tanargle/
Application: tanargle; version: 1.                                                                                                                          
Server: appengine.google.com.
Scanning files on local disk.
Initiating update.
Email: *****@gmail.com ←自分のgoogleアカウント
Password for *****@gmail.com: ←上で入力したアカウントのパスワード
Cloning 1 application file.
Uploading 1 files and blobs.
Uploaded 1 files and blobs
Deploying new version.
Checking if new version is ready to serve.
Will check again in 1 seconds.
Checking if new version is ready to serve.
Will check again in 2 seconds.
Checking if new version is ready to serve.
Closing update: new version is ready to start serving.
Uploading index definitions.
satoshi@debian:~/tmp/google_appengine$
App Engineのアカウントは以前取得してました。
すっかり忘れていましたが。


というわけで、本番公開完了。これからいじり倒す予定なので、↑のアドレスをみても、
違うページになってるかもしれないので、
はじめて記念にスクリーンショットを貼っておきました。

Debian lennyからのGoogle App Engineは、はちゃめちゃ簡単でした。
ほかのlinux系OSでも同じようなもんだと思います。
興味がある人は、是非どうぞ。

参考:第4回 Google App EngineでPythonプログラムを公開してみる

はじめてのYUI3 > YUI3を実際に使ってみた個人的雑感

YUI3をはじめて使っていろいろなサンプルコードを書いてみたが、
実際にプログラムを書いて、使ってみた感想。
  • YUI2よりもすっきりした文法でかけるようになった
    • より直感的な文法
      • Y.one('#id') // 短い表現
      • YUI().use("node",function(Y){}) // メソッドチェーン
    • グローバル変数としてYAHOOを使っていたが、YUIに変更し、内部でYを使用するルールとすることで、実際のコード量が減った
  • YUI2よりも発展性がありそう
    • jqueryが採用していた外部プラグインという考えを取り込んだことにより、jqueryに対して見劣りしなくなった
    • 公式ブログのネタがYUI3の話が多くて参考になる
  • YQLとの連携が強力すぎる
    • YUIとは別軸で存在するYQLとの親和性が高い(要外部ライブラリ)
    • YQLからみても、YQLを簡単に使える術としてのYUI3は存在価値が高い
Yahoo!の本気度がうかがえる出来栄えで、個人的にかなり満足。
YUI2のコードの冗長さに辟易してjqueryに移ろうか、と思っていたが
これはまたYUIに回帰するかもわからんね。

jqueryも含めた最近のjavascriptをいじっていると、
画面の表示はjavascript+CSSのクライアントサイド処理で
100%できるはずなので、サーバサイドで動く表示系処理って
いらないんじゃないか、と。
サーバサイドに必要なのは、CRUD系のAPIだけ。
こうすることで、デザインとの完全分離が実現できる。

デザイナーという職種が、サイトの絵を描いて、
Web Devという職種が、その絵をHTML/CSS/Javascriptで実装し、
エンジニアという職種が、APIを用意しデータを守る、
という業務分担が個人的に理想だなぁ。

最後の問題は、SEO、ということになるので、
クローラーには頑張ってjavascriptを解読してもらいたいもんです。

はじめてのYUI3 > イベント処理

YUI3でイベント処理をするコードを書いてみた。
イベント処理とは、マウス操作(クリック、ダブルクリック、マウスオーバなど)
があったときに、それが起こったタイミングで何かを実行するコードを書くこと。

デモはこちら

コードはこちら。
YUI().use("console", "console-filters", "dump", "node-base", function (Y) {
    new Y.Console({boundingBox: '#mylogconsole',style:"block"}).render();

    function handle(e, name){
        Y.log("event_type="+ e.type+ ", node="+ name, "info");
    }

    function search(e){
        var q = Y.one("#query");
        Y.log("query="+ q.get('value'), "info");
    }

    Y.on('click',    handle, '#foo', {}, "foo");
    Y.on('dblclick', handle, '#foo', {}, "foo");
    Y.on('click',    handle, '#bar', {}, "bar");
    Y.on('dblclick', handle, '#bar', {}, "bar");
    Y.on('click',    search, '#search');
});
参考にしたページはこちら

基本的に、
Y.on(イベント名, コールバック関数, イベント監視対象)
でイベントを登録できる。

なかなか簡潔で直感的な文法でいけてる。