つまらないブログだとしても、文章の合間にflickrのオサレ画像が入るだけで何となくいい感じになることを日々痛感している。良いブログにするためには、本当はどうにかして文章力を上げるべきなんだろうが、ついついflickrでの画像探しに時間をかけてしまっている。
探すだけでなくサイズ変更やトリミングにも時間がかかっていたので、今回ブラウザ上で簡単にトリミングするためのWebアプリを作ったわけだ。
今までは「商用無料の写真検索さん」というサイズ調整が行えるflickrのラッパーサイトを利用してきたのだが、詳細な検索条件を指定できなかったり、新着画像がなかなか反映されなかったり、検索結果の並び替えができなかったりと、色々不満があった。
そこで今回作ってみたのがこちら。
トリミングしつつ、著作権表示とflickrへのリンクも自動で追加してくれる。cssのclipを使って表示位置をずらしているだけなので、厳密にはトリミングとは言わないかも。
直感的に理解できるとは思うが一応、使い方は以下の通り。
1 flickrで画像を検索する
2 右下のShareのボックスからサイズを選んでHTMLコードをコピーする
※ EmbedではなくHTMLにチェックを入れる
3 http://rama.rosx.net/flickr/の左下textareaにコピーしたコードを貼り付ける
4 「画像読み込み」ボタンをクリック
5 黒い枠を適当に動かして範囲を絞り、コード生成ボタンを押す
6 右下textarea内のトリミング済みコードをブログに貼る
著作権厳守
当たり前だが、改変が許可されている画像しか使えず、著作権表示も必須であることに注意されたい。画像を検索する際はflickrの検索条件の設定で、Creative Commons onlyを選択し、Modifications allowedをチェックすればよい。
photo by flickrfavoritesもっと使いやすいサイトが既にいくらでもありそうではあるが、jQuery.UIの勉強（要素のリサイズ機能）になったので良しとする。
自分のブログではとりあえず正常に表示されているが、ブログによってはネイティブCSSの影響などで色々問題があるかもしれないので悪しからず。
