Search by rails

画像リサイズJavaScriptをセルフ添削

2009年10月17日 (Sat) | @技術/プログラミング

一個前のやつ、セルフ添削してみました。

if (imgWidth > imgHeight) のところで True でも False でも同じ処理になってて無意味だったし、i を初期化してなかったし全然ダメダメですね。userAgent っていう変数名も navigator のプロパティと同じだしダメ。以下のようにしてみました。

    // fit image for iPhone
    function imgReduction() {
        var i, uA, imgHeight, imgWidth, imgRatio;
        var newWidth = 440;
        uA = navigator.userAgent;
        if (uA.match(/iPhone/)) {
            for (i = 0; i < document.images.length; i++) {
                imgHeight = document.images[i].height;
                imgWidth = document.images[i].width;
                imgRatio = imgHeight / imgWidth;
                if (imgWidth > newWidth) {
                    document.images[i].width = newWidth;
                    document.images[i].height = newWidth * imgRatio;
                }
            }
        }
    }

これを <body onload="imgReduction();"> でロードします。

さてどうでしょう？

JavaScriptで画像を縮小表示

2009年10月16日 (Fri) | @技術/プログラミング

Google Readerみたく、iPhoneでアクセスしたときにJavaScriptで画像を縮小表示させるようにしてみた。当然ながら自サーバーにあるものだけでなく、Flickrとかの画像も縮小表示する。そしてこれまた当然ながら画像をリサイズするわけじゃなくてあくまで小さく表示させるだけなので、ページの読み込み速度とかは短くなったりしない。

    // fit image for iPhone
    function iPhone() {
        var userAgent, imgHeight, imgWidth, imgRatio;
        var newWidth = 440;
        userAgent = navigator.userAgent;
        if (userAgent.match(/iPhone/)) {
            for (i = 0; i < document.images.length; i++) {
                imgHeight = document.images[i].height;
                imgWidth = document.images[i].width;
                imgRatio = imgHeight / imgWidth;
                if (imgWidth > newWidth) {
                    if (imgWidth > imgHeight) {
                        document.images[i].width = newWidth;
                        document.images[i].height = newWidth * imgRatio;
                    } else {
                        document.images[i].width = newWidth;
                        document.images[i].height = newWidth * imgRatio;
                    }
                }
            }
        }
    }

関数名がアホっぽいのはご愛敬。

職場のサーバーは自分でセッティングしないと何もモジュール入ってないのでクライアントサイドで遊べるJavaScriptを気合い入れて勉強しようかな。

jQueryでMac OS XのDock風の動き

2009年10月04日 (Sun) | @技術/プログラミング

プロフィールのページにWakoopaのフィードから拾ってきた「最近使ったアプリケーション」を表示してるんですけど、これをjQueryを使ってMac OS XのDock風の動きをするものにしてみました。

Wakoopaの提供するアイコンの解像度が低いのでマウスオーバーするとシャギーなアイコンが表示されてしまいます。またCSSは細かくいじってないのであんまし見栄えは良くないですが、一応OS XのDock風の動きをしてくれます。参考にしたのは、というかまるまるソースコードを拝借したのは以下のサイト。

http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/

net.tutsplus.com

これとは別なんですけど、もう一個ぶったまげたのがこれ。

Page Not Found | Filament Group, Inc.

Read this page on the Filament Group website

www.filamentgroup.com

HTML 5とjQueryだけで、動的に生成されるテーブルとグラフを作ってます。テーブル内の数値が編集可能で、値を編集するとちゃんとグラフも再生成されちゃう。スゲー。

こんなにインタラクティブなものがJavaScript + CSSで実現できるわけですから、「HTML 5がフツーに使われるようになったらFlash死ぬんじゃね？」なんて思ってしまいます。少なくともナビゲーションメニューをロールオーバーさせるためだけにFlashを使ったりするのは下火になりそう。Flashはもっと本格的な、「魅せるサイト」を作るために使われるようになる気がする。Flasherな方々は今後より一層の研鑽が求められるでしょうね。

Targus社製のマウスを買った

2009年09月21日 (Mon) | @散財

一年くらい前にLogicoolのMX-Rというマウスを買った、とブログに書きました（そろそろワイヤレスマウスについて一言いっとくか）。そのときはデザインが気持ち悪いとかレシーバーが邪魔であるとか散々な書き方をしていたのですが、いまではすっかり慣れてしまって手放せなくなっています。やっぱ多ボタンマウスは便利だわ。バッテリー内蔵式なので乾電池用意せんでもいいし。そういうわけでこいつは職場で使うことにしました。

さて、では自宅で使うマウスをどうするかということなんですが、MX-Rは一万円ちかくして高いし、やっぱUSBポートを占拠するレシーバーの出っ張りが気になるし、Bluetoothマウスで良いのはないかなー、とAmazonを徘徊していてこういうのを見つけました。

Mac専用らしいです。特徴を箇条書きにすると以下の通り。

BluetoothなのでMac本体にレシーバーを取り付ける必要なし
スクロール部は光学式なのでWireless Mighty Mouseの最大の弱点であるスクロールボールのゴミつまりと無縁
5ボタン式
専用のドライバーを入れるとサイド下部のボタン二個に好きな動作を割り当てられる
乾電池式なので充電は面倒くさい

色はグレーっぽい感じなのでアルミiMacやUnibody MacBookにはマッチするデザインだと思います。しかし光学式のスクロール部が微妙。ズバズバっと大量にスクロールしたり、逆に高速スクロールしたいときにゆっくりしか動かなかったり、なかなか意図したとおりには動かせないです。

とはいえ、Bluetoothマウスは非常に選択肢が少なく、あとはマイクロソフト製の物くらいしかないので、アンチMSな人はこれを購入候補に加えても良いかも。値段も手頃です。

MacBook Proポチった

2009年09月12日 (Sat) | @Mac/iPhone

MacBook Pro 15"

一昨日のジョブズ復帰イベントで新しいMacが発表されなかったので、昨日は価格.comで急激にMacが値上がりしてた。前々からそろそろMacを買い替えようと思って15inchのMacBook Proを物色してはいたんだけど、なかなか踏ん切りが付かなかった。そしたら急激に値段が上がり始めたので焦った。奇跡的にまだ安い価格で売ってるところを発見したので、いまを逃したらこの価格では買えないだろうなと思って飛びついた。

現行のMacはSnow Leopard前に発売された機種ということもあり、発売直後から買い控え対策のためすごく安い値段で売られてた。4年前に買ったPowerBook G4 17”もTigerの発売前の機種だったためかなり安く買うことができた。貧乏な人がMac買うんだったらOSの変わり目が狙い目ですな。

費用対便益で考えたら明らかにiMacの方がコストパフォーマンス良いんだけど、ついついノートを選んでしまった。iMacだと家でしか使えないですからね。確かに24inch液晶や圧倒的な低価格は魅力なんだけど、iMacは雷に弱いイメージがあるし、最近働き始めたので一日中家にいるわけでもなくなり、職場でも使えるようノートにしときました。はやいとこWindows XPのひたすらシャギーなフォントや変態的UIのExplorerにおさらばしたい！

ISBN変換プラグイン、今度こそProduct Advertising APIに対応

2009年08月19日 (Wed) | @技術/プログラミング

「対応した」って高らかに宣言しながら対応してなかったISBN変換プラグインですが、やっと対応させました。ISBN変換プラグイン利用者の方には随分お待たせいたしました。

なんで手こずってたかっていうとSOAPでアクセスしてたからです（元々の開発元の福耳Cafeさんで公開されたときからSOAPでリクエストしてたので）。SOAPはいろんなことが出来る反面、速度がとろいらしく、フツーの人はRESTでリクエストするみたいです。だもんであんまりネットに情報がなくて。Amazon自身もSOAPについてのドキュメントは少なめにしか用意してくれてなくて難儀しました。結局、認証情報はSaopHeaderに埋め込まなきゃいけないっていうところが理解できてなかったわけでした。

Amazon Web Services Documentation

docs.amazonwebservices.com

// Authentication
$xmlns_aws = 'http://security.amazonaws.com/doc/2007-01-01/';
$kidheader = new soapheader($xmlns_aws, 'AWSAccessKeyId', $this->awsaccess_key_id, false);
$tsheader = new soapheader($xmlns_aws, 'Timestamp', gmdate('Y-m-dTH:i:s'), false);
$sigheader = new soapheader($xmlns_aws, 'Signature', $signature, false);
$soapclient->__setSoapHeaders(array($kidheader, $tsheader, $sigheader));

と書き加えたことで無事動くようになりました。ダウンロードは以下から。

portal shit!

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

www.portalshit.net

Snippet.appでお気軽お手軽にコードの断片管理

2009年08月05日 (Wed) | @Mac/iPhone

最近、映画の感想を書くときはなるべくMicroformatsのhReviewで書くようにしてます。検索ロボットにもっと僕の映画評読んでもらいたいと思って。Googleの映画検索はとても便利なんですけど、レビューの点数拾ってきてるのは映画生活とgoo映画が殆ど。これ一般人のブログからも点数拾ってきたらすごく面白いだろうなー、そのうち僕の映画レビューの点数も拾ってくれるようになんないかなー、と思って今んとこ無駄な労力かも知んないけどhReviewにこだわって映画評書いてます。

で、hReviewなんですが、どういうのかっつったらこういうのです。

<div class="hreview">
 <span class="reviewer vcard">
  <span class="fn">anonymous</span>, 
  <abbr class="dtreviewed" title="20050418">April 18th, 2005</abbr>
 </span>
 <div class="item">
  <a lang="zh" class="url fn" href="http://www.imdb.com/title/tt0299977/">
  Ying Xiong (<span lang="en">HERO</span>)
  </a>
 </div>
 <div>評価：5 点満点中 <span class="rating">4</span> 点</div>
 <div class="description"><p>
  この映画は音楽と映像が素晴らしい。 </p></div>
</div>

こいうのを毎回入力するのはさすがにしちめんどくさい！ HTMLとかプログラミング言語とかのコードの断片をスニペットって言うんですけど、入力する頻度が高いスニペットはクリップボードみたいのに常に保持できたら便利ですよね。ワンクリックで呼び出してコピペできたら手間が省ける。そういうののイカしたアプリねーかなーと思ってたら、先日macZOTでSnippetというソフトに出会いました。これがなかなか良い感じ。

詳しくは開発元が公開してるビデオを見て欲しいんですけど、こんな感じです。

Snippet App from Stephen Korecky on Vimeo.

ちょっと英語が「うぇいうぇいあ〜」みたいな感じで聞き取りにくいですけど、HUDライクなUIでかっちょよくスニペット管理が出来ます。僕がこれまでに試してみたことのあったスニペット管理アプリはメニューバーから呼び出すのではなくアプリケーションウィンドウで管理するものばかりで、結局常用するに至りませんでした。気軽にコピペする気にならない。

翻ってSnippet.appは Control + s でお気軽お手軽に呼び出せます。ホットキーが充実してるのでマウス操作なしでスニペットの追加、参照が可能。加えて検索が高速で、Tag付けも可能なので大変気に入ってしまいました。MobileMe経由で同期することも可能なので、自宅のMacと職場のMacでスニペットを一元管理みたいなエロい使い方もできますね。

Codaとかはアプリケーションのなかにスニペット管理機能が付いてますけど、コードの断片はアプリケーションを横断してやり取りしたくなるもの。軽くてホットキーで呼び出したらメニューバーからにょきにょきっと現れて高速にスニペットを参照できるSnippet.appはかなりオススメです。シェアウェア$12.95ですが、Twitter（@snippetapp）でよくディスカウント情報流してます。良かったらチェキラーしてください。