開発ツール・技術 Archive

兄弟サイトの百式の方で今日紹介した「WhenDidYouLast」ですが、ログインの仕方がちょっと面白かったのでご紹介。これ、ありかもですねぇ。

↑ メールアドレスを入れろ、といわれます。

↑ メールを送った、とメッセージが。

↑ メールにリンクが届くのでそれでログイン。

この方式だとパスワードの管理をしなくていいから楽チンかもしれませんね。ユーザーからしてみれば毎回メールとブラウザを行き来しないといけませんが、パスワードを覚えておくより手軽、という人もいる、のかな・・・。

ただ迷惑メールを大量生産しちゃうような気がしないでもないのでそれが微妙といえば微妙ですな・・・。他にもデメリット、メリットがあれば是非教えてください。

良し悪しはいろいろあるでしょうが、シンプルツールを作るときは検討してみたいインターフェースですね。

» WhenDidYouLast / Users

画像をアップロードするときって、「あれ、何の画像だったっけかな？」ということがたまにありますよね。長いファイル名だと「C:\My Documents\….」しか見えないこともしばしばです。

そこでその問題を解決してくれるのがAjax Uploadです。jQueryとあわせて使います。

これを導入するとファイルを選択した直後にどんな画像か縮小画像で表示してくれますよ。

↑ 画像をアップロードするためにファイルを選択すると・・・。

↑ 選択した直後にこのように縮小画像を表示してくれます。

つまりファイル選択時にアップロード処理が完了させる、という仕組みですな。

多少わかりにくい感じはありますが（従来のインターフェースと違うため）、複数ファイルをアップロードするときなんかに便利かもですね。

詳細＆ダウンロードは以下からどうぞ。

» Ajax Upload – ZURB Playground – ZURB.com

作者さんからリリースをいただいたのでご紹介。高機能かつインタラクティブな縮小画像をさくっと生成できるswf&JavaScriptですよ。

これを使えば一つの画像からさまざなサイズの縮小画像を作れたり、マウスオーバーで特定の処理を起動、だとか、ロゴを画像の上に設置したり、といったことが簡単にできますよ。

オリジナルの画像をいじらずにマークアップだけでさまざまな機能を追加できるのが魅力ですね。

↑ マウスオーバーしたところを波紋を出現させたりできるようです。

他のデモはとりあえずこちらからどうぞ。

» swfthumnail | Demos

利用するにはswfファイルと.jsファイルを設置する必要がありますね。マークアップも簡単なのでさくっと使いこなせそうです。

商用利用でも無料で使えるようですよ。画像をたくさん扱うようなサイトだと便利そうですね。詳細＆ダウンロードはこちらからどうぞ。

» これからは、賢く楽しくサムネイる。 | swfthumnail

へー、と思ったのでメモ的にエントリー。というか、かなり個人的メモですな、すみません。

var myVar   = "3.14159",
    str   = ""+ myVar,//  to string
    int   = ~~myVar,  //  to integer
    float = 1*myVar,  //  to float
    bool  = !!myVar,  /*  to boolean - any string with length and any number except 0 are true */
    array = [myVar];  //  to array

以下の記事で教えてもらいましたよ。他にも小粋な技があるのでご興味のある方は是非どうぞ。window.nameでsession管理とか知らなかったな・・・。

» 10 Small Things You May Not Know About Javascript | samuli.hakoniemi.net

こいつは便利。メモ的にエントリーしておきますよ。iPhone用サイトをつくるときに使えるショートコードですね。

いくつかピックアップして紹介してみます。

<rel="apple-touch-icon" href="images/template/engage.png"/>

↑ iPhoneでのアイコン画像を指定。

if(strstr($_SERVER[\'HTTP_USER_AGENT\'],\'iPhone\') || strstr($_SERVER[\'HTTP_USER_AGENT\'],\'iPod\')) {
  header(\'Location: http://yoursite.com/iphone\');
  exit();
}

↑ PHPでiPhoneもしくはiPod Touchを判定。

@media screen and (max-device-width: 480px){
  /* All iPhone only CSS goes here */
}

↑ iPhone用のCSSを指定。

<a href="tel:12345678900">Call me</a>
<a href="sms:12345678900">Send me a text</a>

↑ 電話やSMS用のタグを発行。

他にも画面の向きを検出するコードなどがありますよ。便利ですね・・・。

最近はiPhone対応のサイトを作ることも多いので参考にしたいところ。原文は以下からどうぞ。

» 10+ useful code snippets to develop iPhone friendly websites

ちょっと素敵なCSSファイルのご紹介。

このCSSを読み込んで、簡単なマークアップをするだけで簡単にスタイリッシュな角丸ボタンが作れますよ。

↑ こんなのが一発で作れます。

マークアップは以下のとおり。spanが二つあるのがまぁ、あれですが。

<button class="sexybutton"><span><span><span class="ok">Submit</span></span></span></button>

ちょっとしたWebサービスなんかに良いかもですね。詳細は以下からどうぞ。

» Sexy Buttons Quick Start Guide and Demo

分散バージョン管理システムのGitのビジュアルレファレンスがありましたよ。

すべての命令が網羅されているわけではないですが、gitに慣れてきたら見てみると良いですね。この命令って何やるんだっけ？をイメージするのに役立ちますよ。

↑ git addやらcommitやらの関係ですね。

↑ commitの説明。わかりやすいですね。

他にもresetやらmergeやらの説明がありますよ。gitってわかりにくいなぁ、という人は見ておくと良いのではないでしょうかね。

» A Visual Git Reference

えーと、恥ずかしすぎて正答数を言えませんよ・・・。JavaScriptのちょっぴり難しい（？）クイズがあったので腕に覚えのある人はどうぞ。

JavaScriptわかってきたかも！というときに勉強がてらやってみるのもいいですね。

↑ こんな感じの質問が全部で14個あります。

わからなかったものは自分で動作確認してみるといいですね。Javascriptはブラウザとテキストエディタだけでテストできるから楽ですよね・・・。

» Perfection kills » Javascript quiz

「へー、Tumblrってこういう風にも使えるんだぁ」と思ったので勢いでご紹介。RubyやRailsに関するTipsを紹介しているTumblrブログです。

↑ こんな感じ。

確かにTipsは短文が多いので、こうしてちょこちょことTumblrを使って投稿できると良いですね。検索もできますしね。サイト立ち上げるのが一瞬、という利点が一番大きいでしょうけど。

内容も良いですが、Tumblrの使い方として参考にしてみてはいかがでしょうかね。

» Ruby Quicktips

これすごいすね。先日Biz.IDでも取材させていただいたロプロスさんの新作ですよ。

Twitter API ViewerはTwitter APIの動作確認が簡単にできるツールですよ。パラメーターを入力してSubmitすればどんなリスポンスが返ってくるかがわかります。

↑ トップ画面。API種別ごとにうまいことまとまっています。

↑ たとえばUser情報。IDを指定してSubmitすると・・・。

↑ XMLが表示されます。

Twitterツールの開発者は必見ですな・・・。うむ、やっぱりセンス良い人ですねぇ。

ご利用は以下からどうぞ。右下のレッサーパンダの画像がなごみますねｗ。

» Twitter API Viewer