Flickr4Twitter

iPhone用TwitterクライアントとしてTweetieを愛用しています。使いやすさでは抜群なのですが、画像アップロードサービスにflickrが選択技にないことやプッシュ通知が装備されていないのでユーティリティアプリやサービスを使って補っています。

プッシュ通知は「Boxcar」を利用して、画像をflickrへアップロードするのに「Flickr4Twitter」を利用してます。以前は「GDZLLA」を利用してましたが、短縮URLを独自URLに変換してTweetするので使用するのをやめました。

Flickr4Twitter

Flickr4TwitterページでOAuth認証を済ませ、発行されるURLをTweetieのカスタムフィールドへ入力します。設定はここまで。

###Tweetie2への登録方法

Flickr4TwitterでFlickrとTwitterへのOAuth認証を済ませるとプロフィールページ上部にエンドポイントURLが表示されます。

flickr4twitter.png

これをコピーして、Tweetie2のサービス設定 => イメージサービス => カスタムフィールドへペーストします。

IMG_0778.PNG

これでTweetie2での設定は終わりです。Tweetが画像タイトルとなってFlickrへアップロードされます。Twitterのタイムラインには、画像タイトルとflickrが発行する短縮URLがTweetされます。

ちなみに再度エンドポイントURLを確認するにはFlickr4Twitterサイドメニューにある「Edit Profile」リンクから行えます。

PNGPress – PNG画像をさらに圧縮

icn_PNGPress_128.png

ネットへの転送速度もディスクスペースもあまり考えなくてもよくなったので、いまさら感があるけど持っていると安心する画像圧縮ユーティリティ「PNGPress」のご紹介。これまでにも同様なソフトPing!というのを使ってましたが、いつの間にかデベロッパがなくなってしまってどうしたものかと考えていたところPNGPressに出会ったのでした。

圧縮率は元画像によりますが、1割から2割程度はファイルサイズを縮小してくれます。

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 を利用したボックスデザイン