flickrの写真用のタグを生成するブックマークレット

このブログでもやっているのですが、ブログ記事のはじめの方にとりあえず何でもいいから写真を入れておくとそれだけで記事がなんだかわかりやすくなる、
Gigazine効果というテクニックがあります(ボクが勝手に命名しました)。
大変効果的な手法なのですけど、商用利用可能な写真素材は高いので、flickrの写真を使わせていただくと便利です。

Advanced Searchという機能を使うと、Creative Commons licenseで商用利用可能となっている写真に限定して検索することもできます。
flickr_cc.JPG

この場合、原著作者のクレジット表示をしないといけないので、写真だけを勝手に貼り付けるとまずくて、それなりにフォーマットを整える必要があります。
毎回同じ位置から同じようにテキストを切り出して組み立てるだけの作業は人間よりコンピュータの方が得意なはずなので、クリック一発で組み立てられるようなブックマークレットを作ってみました。

使い方
いつものようにflickrから写真を探してきます。
flickr_1.JPG
ブログに適したサイズの画像のページを開いて。
flickr_2.JPG
ぽちっとブックマークレットを押せば、こういうタグが生成されます。
flickr_3.JPG
あとはこれをブログ記事にコピーペーストすればOKですね。

ブックマークレットはこちら。
flickr写真用タグ

元のソースコードはこんな感じ。

img=window.document.images[3];
url=window.document.links[0].href;
ret='<a href="#{url}"><img src="#{src}" width="#{width}" height="#{height}" alt="photo by #{name}" /></a>'
ret=ret.replace(/#{url}/,url).replace(/#{src}/,img.src).replace(/#{width}/,img.width).replace(/#{height}/,img.height).replace(/#{name}/,url.split('/')[4]);
alert(ret);

chromeとFireFox,IE6で動くことを確認してありますので、最近のブラウザであればたいてい動くんじゃないかと思います。

SOY CMSの人に聞いた開発秘話

(2009-11-07 08:46:44追記) 「受託をとめたんじゃなくて、とまっちゃったんだ」、とコメントをいただきました。
Twitter / FURUSHO Takashi: 受託をとめたんじゃなくて、とまっちゃった(仕事なくな …
(追記終わり)

photo by Captain Future

 ウェブテコ第9回 – CMS – ウェブテコ – 神戸のウェブ勉強会
で、SOY CMSの人が来ていました。
 SOY CMSというのは、株式会社日本情報化農業研究所さんが作っているCMSツールで、日本初のCMSとしてそれなりの知名度になってきた結果、日本情報化農業研究所さんは現状これのカスタマイズ案件で食べていけているらしいです。

ExpressionEngineのカスタマイズ案件を受注したいボクとしては、どんな風にして今の位置にたどり着いたのか興味津々なので、どういう経緯でここまで来たのかを聞かせていただきました。
#ボクが聞いた話を思い出しながら書いているので、100%正確とは限りません。

・開発

 もともと受託開発していたのだけれど、SOY CMSを作るぞ!ということで受託開発を止めて、2人×3ヶ月で作った。
受託開発を止めた結果、会社の収入が止まったので、開発中は社員のお給料も出ない状態になった。
まあでも、4人しかいない会社だったので、みんな別に逃げ出したりはしなかった。会社に住んでいる人もいるし。

・その後

 しばらくは全然売れなかった。しょうがないので、自腹で勉強会を開いてユーザーさんに来てもらっていた。
自腹なので、会場費を節約するため、公民館の畳の部屋を借りて勉強会をしていた。会議室に比べると安く借りることができるし、京都の会社なので、京都らしくていいよね!

・ヒットしたきっかけ

 SOY CMSは、SOHOやWebデザイナーの救世主になるかもしれない: 世界中の1%の人々への記事にはてなブックマークが集まった。
これをきっかけに、ユーザーさんが増え始めた。

プレゼン作る時に注意すべき点

photo by Sam Fakhreddine
ウェブテコ第9回 – CMSに行ってきました。
もちろん、ExpressionEngineについてお話してきましたよ!

今回は、正直ちょっと失敗したと思っていて。最初に「今日はこんな順序で話をします」というのを入れるのを忘れたので、
なんだかノペーっと長いプレゼンになってしまいました。
そもそも準備が不足していたので、素材を片っ端からしゃべる形になってしまったのが敗因だと思うのですが。

次回に向けて、プレゼンを作る時に注意することをまとめてみました。

・見出しを作る
 最初に、今日はどんな順序で話をするかの説明を最初に入れる
 これがないと、話を聞く準備ができないので、聞く人の集中力が持ちません。

・最後まで一気に行かずに、途中に質問の時間を作る
 「いつでも質問してください」と一応いいますが(あ。でもこれも今回忘れたなぁ)。言ってもそうそう聞けるものではないので、15分に一回くらいはプレゼンを止めて、「この辺までで質問とかありますか?」と聞いて質問が出ると、聞いている方をうまく巻き込めるかと思います。

・デモ大事

 かずみちさんがa-blogでやっていた、試しにWEBサイトを一個作ってみせるのはいいやり方だな、と思いました。
EEでも、既存のサイトを丸ごとCMSベースに置き換える、とかやってみせれば良かったですね。

はてなメカニカルターク

photo by mandiberg
Amazon.comのサービスに、メカニカルタークというのがあって。
たとえば、写真に写っているものが何かを判断するとか、音声を聞き取って文字にするとか、そういうコンピュータには難しい仕事を依頼することができます。
答える方は回答一件○セントという形で謝礼が出るので、うまくいけば、インターネットの向こうにいる人々の力を借りて、コンピュータには難しそうな問題を解決することができます。

で、ボクもちょうどいい問題があったので、人力検索にお願いしてみました。

位置情報から住所を表示するプログラムを作ったのですが、日本全国正しくでる自信がないので、テストを手伝ってください。.. – 人力検索はてな

うまく回答が集まって、はてなから怒られなかったら、これはなかなかいい使い方になるんじゃないかと思うのですけど、さて、どうなるでしょう?気が向いた方がおられたら、協力していただけると嬉しいです。


2009-09-24 14:48:01
・GoogleMapに逆ジオコーディング(GPS座標から住所を取得する)という機能があって。
・ところがこれが、たまに「東北自動車道」とか、すっとぼけた回答を返すので、プログラミング上工夫が必要です。
F’s Garage:google mapsの逆ジオコーディング使い辛っ!
Googleの逆ジオコーディングをためしてみた | クレコ

・で、それをJavaScriptオンリーでやったのですが、あまり自信がなかったので、ちゃんと住所がでるかどうか確かめたかったのです。

・ところが、IPアドレスからGPS座標を取得とか余計なことをしたものだから、みなさまに意図がちゃんと伝わらなかった次第。

最初からこうやって、地図と住所だけの単純なインターフェイスを作るべきでしたね。
逆ジオコーディングのテスト2

[GoogleMapsAPI]GoogleMapを非表示でロードする

photo by caveman_92223
 たとえば、最初は地図なんて見えないけど、ボタンを押したらGoogleMapを表示するようなWEBアプリケーションを作りたいとか、逆ジオコーディング(だけ)のためにGoogleMapsを使いたい(!)とか、そういう理由で 見えないオブジェクト上にGoogleMapsオブジェクトをロードしたいという要求がたまにあって。

ところが、display:noneのオブジェクトにGoogleMapをロードすると、GoogleMapは自分自身のサイズが取れないので、ちゃんと表示されない。

display:none の状態で初期化するとバグる – てっく煮ブログ

上記ブログでは、だからdivを表示した状態でロードしましょう (つまり、GoogleMapはボタンを押した時にロードしましょう)ということになっているのですが。

GMap2だと、sizeプロパティを指定できるので、非表示のままロードすることも可能になっています。

Google Maps API リファレンス – Google Maps API – Google Code

/* googleマップ */
var currentPos = new Array();
currentPos['latitude'] = 35.7301;
currentPos['longitude'] = 139.7090;/* デフォルト値:池袋駅西口公園*/
var zoom = 14;
google.load("maps", "2",
{
"callback" : function() {
if (google.maps.BrowserIsCompatible()) {
jQuery(window).unload = google.maps.Unload;
var map = new google.maps.Map2(
document.getElementById("map_canvas"),
{ size:new GSize(500,500) }
);
map.setCenter(new google.maps.LatLng(currentPos['latitude'], currentPos['longitude']), zoom);
map.enableGoogleBar();
map.enableDoubleClickZoom();
map.addControl(new google.maps.SmallMapControl());
map.addControl(new google.maps.MapTypeControl());
}else{
window.alert('Browser is not compatible for Google Maps');
return;
}
}
}
);

何が嬉しいかというと、ボタンを押した時にロードするよりも、あらかじめロードしていた方が、多少スムーズに表示されます。