カテゴリー
Community iPhone/iPod touch Web

Flickr2Twitterは便利

写真を共有する楽しみを知って久しい訳ですが、iPhoneからflickrへ投稿してTwitterで共有するのもまた楽しいです。少し前にベータ期間を設けてテストされ、つい最近正式に採用されました。
既存の写真をTwitterで共有するにはツールバーにある「BLOG THIS」ボタンでTwitterアカウント選びます。あ、その前にTwitterのOAuth認証を完了させておく必要があります。ツールバーにある「You」メニューから設定を行います。
You => Your Account => Extending Flickr => Your blogs
と進み編集(edit)リンクボタンを押します。Your blog listで「Add another blog」リンクボタンでAdd a blog画面を表示させて「Twitter』を選びOAuth認証を済ませます。
iPhoneでFlickr2Twitterを利用するにはメールを使用します。宛先に「[email protected]」アドレスを使用します。xxx部分はflickrが自動生成するランダムな英数字となります。このアドレスを確認するには
You => Your Account => Email
を表示させて確認できます。確認できたら、これをアドレスブックへ追加しておきましょう。入力の手間がなくなります。
iPhoneでお気に入りの写真を撮影したらメールへ転送してFlickr2Twitter宛にメッセージを送信します。本文に書かれたテキストは、flickrの説明フィールドへ入ります。
では、iPhoneとflickrで写真共有を楽しみましょう!!

カテゴリー
Web

FlickrがTwitterへの自動送信機能をメールによる写真アップロードで試行

Flickrがついに、ユーザに自分の写真のリンクをTwitter上で共有させることの持つ威力に、目覚めたようだ。Flickrの会員は今日(米国時間6/12)からFlickr Twitter Betaに登録できる。これにより、Oauthを使ってFlickrとTwitterのアカウントをリンクし、メールで新しい写真をアップロードするたびにTwitterにリンクのメッセージが行く。

(Via FlickrがTwitterへの自動送信機能をメールによる写真アップロードで試行)

この手のサービスはいくつかあるので迷ってしまう。ただ、flickrがやることに意味があるのかな。アップロードした写真をどれもこれもTwitterへ投げるのではなく、ユーザが選択できるようにしているところはよく考えている。また、flickr独自の短縮URL(http://flic.kr)を使うところもTwitterのことを考慮している。
正式リリースでは、メールによるアップロードだけじゃなく、もっと間口を広げてほしいところです。
追記 (2009-06-14T09:12:10+09:00): Blog This からもTweetできるようです。
The Okano Mail: Tweeting a photo from Flickr

カテゴリー
HTML/CSS

CSS3でフォトフレームを付けてみた

写真を掲載するのにフォトフレームを付けて少しでも見栄えを良くしようと、まずはflickr経由の写真を対象に付けてみました。
R0010110
いつものごとく、WebKit独自拡張プロパティを使用しているのでWebKit系ブラウザ以外だとフォトフレームは表示されません。

.frame, img[src*="flickr.com"] {
  display: inline-block;
  margin: 0 auto; padding: 4px;
	background-color: #fff;
	border: 1px 3px 4px 3px solid #d7d7d7;
	-webkit-border-image: url("images/frame.png") 1 3 4 3 / 1px 3px 4px 3px;
	-moz-border-image: url("images/frame.png") 1 3 4 3 / 1px 3px 4px 3px;
	border-image: url("images/frame.png") 1 3 4 3 / 1px 3px 4px 3px;
}

frame.png
この画像を `-webkit-border-image` プロパティで指定して、`stretch` パラメータで画像を引き延ばしています。`-webkit-background-clip` プロパティは画像が枠内に収まるよう指定してます。`border-width` でまとめるとシンプルなソースになるので書き換えました。
参照:
DigitalSandbox – Blog – Fancy Frames with border-image
border-image を利用したボックスデザイン