portal shit!

今日はFlickrの話をさせてください。

唐突ですけど僕はFlickrが好きです。もう2年Proアカウントだし、先日また更新してしまった。無職の僕に$24.95はとてつもない大金です。払わずに済ませられるものなら払いたくない。$24.95（今日のレートで2,406.21082円）あれば、映画を見て松屋で豚めしの並を食べ、ドトールコーヒーでMブレンドを嗜むことが可能ですし、あるいは1,000円カットのQB Houseを二軒ハシゴしたあと、スターバックスで小粋にダブルトールラテを頼むことだって可能です。あるいはもう1,600円足してcrocsの最新サンダルを買うことだって可能ですし、そうでなければ146,400円つぎ足してアルミユニボディのMacBookを買うことだって可能です。そんな大金を僕はもう3年もFlickrに貢いでいるのです。自分でも信じられません。一体Flickrの何が僕を惹きつけるのでしょうか？

Flickrのデザインが良い

第一にFlickrの見た目が好きです。写真共有サイトは沢山あるけど、ごちゃごちゃしてるサイトが多い。Flickrはシンプルで使いやすい。広告は出ないし（FreeアカウントだとトップページにMooやプリントの広告が出るけど、フォト蔵みたいに口臭のGoogle Adsenseが表示されたりはしない）、ごちゃごちゃうるさいアニメーションバナーとかもありません。

メタ情報を使っていろいろ出来る

第二に写真のメタ情報（Exif）を使っていろいろ出来るところが良いです。カメラの機種ごとに写真を絞り込んだり、カメラ小僧的にはFナンバーとかシャッタースピードとか撮影情報を（ユーザーが削除していなければ）見られるのが楽しいです。グループやタグといったソーシャルな機能も良い。さらに一昨年くらいからジオタグに対応していて、位置情報を含んだ写真をアップロードすると地図上に撮影位置をドロップしてくれます。日本の地図はしょぼいのでこの機能はあまり使えませんですけどね。

Web 2.0なところが良い

第三には他のサイトやサービスとの連携がいかしてます。Picnikと連携してて、Flickrにアップロードした写真の簡単なレタッチができますし、上にも書いたけどMooカードとか、オンラインプリント注文（日本から頼むと送料がクソ高い）とかFlickrの収入源的なサービスから、ユーザーのブログにJavaScriptコードを貼り付けられたりとか、APIを公開してるのでectoみたいなブログクライアントから画像を操作したりもできます。こういうオープンなのがやっぱいいわ、Flickr。

使い方が自由

第四には雰囲気がいい。Flickrは入魂の作品を発表する場としても使えるし、撮りまくった写真をじゃんじゃんアップロードするオンラインストレージとしても使えるし、ブログのイメージリソース置き場としても使えます。使い方はユーザー次第で自由自在。たとえばfotologueとかはシャレオツで見た目もかっちょいいけど、僕なんかは「シャレオツじゃない人お断り」みたいなオーラを感じるわけですよ。ふざけんなバカヤロー、人間だったら松屋で豚めしだって食べるしうんこもするだろが！ って感じです。Flickrはシャレオツな使い方もできるし僕みたいなうんこな使い方もできる。そこが好きです。

Flash Free

さらにはFlashが少ないのもいい。Organize（複数ファイルの一括編集画面）やSlideshowこそFlashですが、基本的にAjaxで何でも実現してます。むやみにFlash使ってない。fotologueは確かにシャレオツです。かっちょいいです。作り手もユーザーもハイセンスでしょう。しかしオールFlashがうざい。僕のおんぼろMacBookでアクセスするとしんどい。巷間には僕のおんぼろMacBookよりももっとぼろいPC/AT互換機でWinnyの片手間に写真共有サイトをブラウズしていらっしゃるハイセンスな御仁もおられるわけで、Winnyをバックグラウンドで動かしながらFlashだらけのサイトを見るとかほとんど拷問ですよ。シャレオツだから何でも許されると思ったら大間違いだ。

要するにFlickrが好き

いろいろごちゃごちゃ書いてきたけど言いたいのはこういうことです。僕はFlickr使うまで特別に写真が好きというわけじゃありませんでした。デジカメも持ってなかったし、写真は携帯で撮ったり、人に撮ってもらったのをもらったりしてました。でもFlickrを始めてからカメラ好きになって一眼レフ買ったりレンズ買ったりするようになった。それまで桜とか新緑とか蛍とか紅葉とか阿蘇山の野焼きとかまじどうでもいいと思ってたのに、写真を撮るようになってから自然を見る目が変わった。何かあったら写真を撮りたいと思うようになった。そして人に見せたいと思うようになった。

2007年の春、僕は病気で入院してた。抗がん剤やってたから自由に外を出歩くことは出来なかった（抗がん剤の副作用で免疫力が極端に低下し、すぐ風邪をひくから。免疫力が低下している状態で風邪をひくとすぐに肺炎になり、死に至る）。せっかく辺りに桜が咲いているのに、それを見に行くことも出来ない。でもFlickrがあった。僕はWILLCOMの遅い回線でFlickrにアクセスし、「桜」で検索した。健康な人達がアップロードした桜の写真を見ることが出来た。2007年春のささやかな花見でした。

多分僕はFlickrがなかったらそんなに写真は撮らなかったと思うし、携帯で撮った写真で満足してたと思う。Flickr前夜は写真は僕にとって縁遠い物だったけど、Flickrのおかげで写真が近くなった。なによりFlickrは誰でもアカウントを取ることが出来て（招待制とかクソだろ）、児童ポルノみたいなヤバい写真じゃなければ素人でも写真をアップロードして公開できるようになった。これはささやかだけれども良いことだと思う。三脚ジジイたちから写真を開放したFlickrの功績はでかい。

Flickr is the photo publication for the rest of us.

思いつきでこのサイトをHTML 5でマークアップしてみました（ここはIE6とかは切り捨ててどんどん新しいものを試す実験場にしていこうと思ってるので）。accesskey属性とかrev属性とかいくつか削除しなきゃいけないものがあるけど、Firefox、Safari、Opera、Chromiumでは正常に閲覧できてます。ちなみに大したことはしてなくて、<header> とか <nav> とか <article> みたいなHTML 5に特有の新しいタグを書き足して、冒頭の文書型宣言をそれっぽく書き直してみただけです。動的コンテンツとかないので効果は？ですが、自己満足は出来ました。

関連

• YouTube HTML5 Demo
  Firefox 3.5b4では動画再生できませんでした。Safari 4でならいけます。
• HTML 5 ― HTML 4 からの変更点
  ここを参考にしました。

Codaが半額になってます。

404 Not Found

www.panic.com

CodaってのはTransmitの開発元のPanicっていう会社の製品なんですけど、エディターとFTPクライアントが一緒になってるソフトで、Dreamweaverみたいなもんです。でも個人的にはDreamweaverよりも軽いし使いやすくて好き。サーバーに置いているファイルを直接編集できるし、CUIでサーバーにアクセスできるし、これ一本でHTMLやCSSからJavaScript、ActionScript、PHP、Python、Ruby、Perlなどメジャーな言語を全部扱える！（本格的なプログラミングには向かないと思うけど、僕の用途には完全マッチなんです） なによりCocoaアプリなのでUIがMac調でOS Xとの親和性高いです。

試用版を使っていた15日間はめくるめくような日々で、こりゃ欲しいなーと思ってたんですけどなんとお値段99ドル！ ちょっと高いですよねー。それが今日からの3日間限定でTransmitなど同社の主力ソフトウェア群が半額で買えるんです。

これはもう買うしかないってことでポチっと行ってしまいました。

実は春先にEspressoにつられてMacHeist Bundle 3を買ってました。EspressoってのはCSSEditの開発元が作ったエディターで、これがMacHeist Bundle 3に含まれてたんです。Espressoも悪いソフトじゃないと思います。HTMLに限っていうならCodaよりも良いかも知れない。しかし何から何まで一つでこなせるCodaの快適性にはかないません。さすがにCSSの編集はCSSEditの方がやりやすいけど、PHPやJavaScriptはこれからはCodaで書いていこうと思います。僕みたいなアマグラマーにはコードの自動補完がうれしいです。

いやー、生きてて良かった。

デフォルトの管理ファイルは画像のサムネイル表示しないし、一ページに全部のファイルを表示して見にくかったので見やすいように改良してみました。これで画像ファイルの管理のためにFTPクライアントを起動する必要がなくなると思います。一ページに100ファイルずつサムネイル付きで表示します。詳しくはダウンロードページを見てください。

DOWNLOAD : P_BLOGの resources フォルダ管理ファイル改善版

配列の操作とPOSTメソッドでのPaginationの勉強になったなー。あとはファイルの作成日時ごとにソートできるようにとかしたいですね。

ところでWordPressは画像をアップロードした場合もいちいちデータベースに情報を保存してるっぽいですよね。画像のためにそこまでやるのは無駄なような気もするけど、どの画像がどの記事で使われているのかといった情報が参照できるのは確かに便利かなーと思った。DBにこういう情報が保存してあるなら日付ごとのソートとかファイル管理も劇的にやりやすくなりそう。

差し替えました

PHP 4でも動くものに差し替えました。ご迷惑おかけしました。

portal shit!

森井ゴンザレス（ morygonzalez ）のブログ。 ブログを書くこと、プログラミング、インターネット、 Mac の便利なソフト、働くこと、ランニングについて書いています。

www.portalshit.net

最近のコメントのページ（Recent Comments）で、各コメントのタイトルにマウスオーバーするとコメントの本文を取ってきてぬるっと表示するようにした。Tumblrの notes を読み込むときみたいなアクション。結構かっこいい。

コードはこんな感じ。相変わらず無駄な変数が多い気がする。もうちょっと行数減らせそうなんだけど書き方が分からん。

// load entire comment
$(document).ready(function() {
	$("#recent-comments a.taggedlink").mouseover(function() {
		var loadUrl = $(this).attr("href");
		var id = loadUrl.match(/#.*/);
		var cid = 'div' + id;
		var cip = 'div' + id + ' + p.auth' ;
		var loadPath = loadUrl + ' ' + id + ' div[class=comment-content]';
		$(cid).load(loadPath, function() {
			$(cip).css("clear", "both");
			$(this).slideDown("slow");
		});
	});
});

今回はonclickとか使わずに極限までJavaScriptだけでアクションを実現しようとしたけどやっぱ無理だった。諦めて途中でHTMLの構造をいじってしまった（idを指定した）。もっと勉強しないといけないなー。

Tribe Called Questの人のことじゃないよ（古）

ToolTip系のPlug-inはブログを作ったばかりの結構最初の頃から長いことArekorePopupを使ってました。透過やtext-shadowが美しいのでいまでも好きなんですけど、SafariがVersion 3.xになってからポップアップの位置がずれるようになった。誰か解決方法をブログに書いてないかなーってずーっと探してたんだけど、なかなか見つからない。

さらに先日、Googleの（Googleとは直接関係ないらしい）Chromiumを試してみたところこちらでもArekorePopupの表示位置がずれる。どうやらこれはSafariに固有の問題じゃなくてWebKit系全般の問題のようだ。

ArekorePopupは長らくバージョンアップとかされてないし、jQueryのプラグインに似たようなやつがあったので思い切って外してみることにした。それがこのqTipってやつです。

qTip - The jQuery tooltip plugin - Home -

qTipの特徴はと言いますと、

• スタイルを簡単にカスタマイズできる
• 透過pngとか画像を使ってなくて完全にCSSとHTMLだけでスタイリングされてる
• クロスブラウザなのでIEのこととかなんも考えずに使える
• ファイルサイズが小さい
• APIとかが充実しててカスタマイズ魂を刺激する
• 画像とかHTMLもポップアップで表示できるらしい

text-shadowとか背景の透過表示はできないところがArekorePopupに負けてますが、ToolTip自体の表示位置だとか矢印の表示位置を激しくカスタマイズできるのが結構良い感じです。

ちなみにこのブログでは以下のように記述して使ってます。

$("a[title], img[alt]").qtip( {
	style: {
		padding: 5,
		background: '#191919',
		color: '#FFFFFF',
		title: {
			'font-size': 10
		},
		border: {
			width: 7,
			radius: 5,
			color: '#191919'
		},
		tip: 'topLeft',
		name: 'dark' // Inherit the rest of the attributes from the preset dark style
	},
	position: {
		target: 'mouse'
	}
});