iPhone 4 の壁紙

iOS5が発表になりましたね。
個人的には、Wi-Fi Sync と Notification Center が嬉しいです。
待ち遠しい

壁紙

iPhone 4 用の壁紙を作ってみました。
作ったというか、こちら[webtron]の素晴らしい壁紙と、
この壁紙でマッシュアップしたって感じです。

ダウンロード

ホーム画面

ロック画面①

ロック画面②

.

スケルトンカラーのトレンド

最近スケルトンカラーの筐体が完全に一周して超かっこ良くみえます。
もちろんそのトレンドを一躍広めたのは懐かしの旧 iMac ですね。

当時のCM

一番最初に家にきたパソコンが
この iMac Rev.C のタンジェリンカラーでした。

一時期、猫も杓子もスケルトンカラーで
急速に飽きちゃった感があったのですが
改めて見ると超かっこいい！
飽きと斬新の揺り戻しですかね。

クラムシェルのiBookとか今のスペックで再販してくれないかな。
欲しい。

She’s a Rainbow

さらにCMで使われてる曲が好きすぎる。
っで、おもわずこんなの作りました。

.

Twitterの公式クライアント

Mac 用の Twitter 公式クライアントのデザインがスゴい！
元々きれいなTweetieをブラッシュアップした形ですが、あまりに感心したのでちょっと説明します。

レイアウトの妙

普通Twitterのデスクトップクライアントには大きく分けて二種類のタイプがあるように思います。
一つはメニューバーに隠す通知型、もう一つは画面の隅っこで常時表示させる型です。
公式クライアントはどちらにも対応させていますが今回は常時表示を想定したレイアウトに感心したお話。

まずメニューなどは横においやり縦に並べることによって出来るだけ縦の長さを使おうとしています。
現行 Mac のディスプレイはワイドスクリーンが多いため縦に情報を詰め込むための工夫です。
これは自身のウィンドウのスペースを有効利用する工夫ですね。

大抵の人は常時表示を考えたとき画面の右端にクライアントを置いて
左の空いたスペースで他の作業を行おうとするのではないでしょうか。
このとき作業中のウィンドウをできるだけ広くしたいと思うのが普通です。
ここに公式クライアントアプリの素晴らしいアイディアが隠れています。

インジケーターをメニューの右端に設けることによって
左側の作業中ウィンドウをギリギリまで広げても通知を見ることができます。
これは自身以外のウィンドウのスペースを有効利用する工夫です。
タブやタイル配置で他のウィンドウに気を使うデザインはよく見かけますが
他のアプリに対してスマートに気を使うデザインってのはあまり見ないですよね。

さらに、このアイディアを根っことして逆算すると
TL部分が角丸になっているのは前面にウィンドウがかぶっていても
TL部分が独立したウィンドウに見えるようにする工夫ですし、
縦に並んだアイコンメニューが黒いのは前面の影に馴染み存在感を消すための工夫です。

ただ可愛いから角丸、かっこいいから黒メニューなんて浅くはないのです。
意味のあるレイアウトに意味のある質感、意味のある階層感。
さりげなくも最良の配置。

よく出来てる！スゴい！

.

Coda のフォント

Mac App Store がオープンしましたね。
今使ってる MacBook は OS 10.5 なので App Store とは無縁なのですが、
今回は Mac App Store でも購入可能な素晴らしいエディタ Coda について
どのフォントで使うのが一番いいかという話をしたいと思います。

Panic Sans は使えない

Coda には Panic Sans というとてもきれいなフォントがバンドルされています。
Panic Sans はもともと Vera Sans Mono というフリーフォントをもとに作られた、
Deja Vu Sans Mono をさらにいじって作られたという複雑な系譜のフォントのようです。
特徴は小さく表示してもコントラストが高く字にコシがあり、
英字 数字 記号の分離がよく視認性が高いといったとこでしょうか。
しかし当然欧文フォントなので日本語には対応していません。
なので Coda で日本語を使うとヒラギノ角ゴが代替されます。
ヒラギノは等幅フォントではないので字間が狂ってしまいます。
さらに Coda は行間をフォントの設計に依存しているようで、
英文だけの行と日本語が混ざった行では行間も狂ってしまいます。
字間の狂いはゆずって許せたとしても、行間の狂いはそうはいきません。
コードの改行にはブロックごとに区切ったり、
思考をすっきりさせるといった特別な意味があるからです。
行間がバラバラだと些細でも確実に思考がつまずくのではないでしょうか。

日本語もいける等幅フォント

Mac には Osaka フォントという日本語対応の等幅フォントが標準で入っています。
しかし Panic Sans を一度でも使ってしまうと見劣りしてどうも使う気にはなれません。
そこで日本語に対応した等幅フォントを探してみたらいいフォントがありました。
「M+ と IPAフォントの合成フォント」こちらで配布されている M+1VM+IPAG circle です。
このフォントは M+ フォントと IPA ゴシックと Vera Sans Mono の合成フォントです。
Vera Sans は Panic Sans の祖にして美しくプログラムに適したフォントです。
M+1VM+IPAG circle は Panic Sans と比べると若干コシが弱いように感じますが、
全角と半角のウェイトのバランスもとれていておすすめです。

参考にしたページ

プログラミング・フォントTop10
CODAの使い勝手は絶品〈その２〉

.

モダンとレガシー

ジブリ映画の中で一番好きなタイトルバックは魔女の宅急便かもしれません。
ラジオの電源を入れてふわっと上昇し、満月を背にしたシルエットがとても印象に残ります。
あと音楽がいいですよね。「目にうつる〜全てのこと〜は〜メッセージ〜♪」
ということで、魔女の宅急便に描かれているメッセージについて考えてみました。

魔女の宅急便では普遍的なテーマが二つ織りまぜられているように思います。
ひとつは、才能で食べている人にとっては普遍的な恐怖である「才能の枯渇問題」
魔法の力が弱まり空を飛べないスランプに悩むキキのドラマですね。
これはあらゆる職業の人に言える普遍的なテーマで、
特に創造的な仕事に従事している人にとっては重要なテーマかと思います。
劇中でキキがいかにしてスランプを打開するか、
込められたポジティブなメッセージを読みとることができます。
なりふりかまわずにつまらない見栄を忘れたらいい。
デッキブラシでも空は飛べるさ。といった感じでしょうか。

そしてふたつめのテーマは、伝統的なものと現代的なものに挟まれた若者の苦悩です。
キキは時代遅れな魔女に対して冷たい都会に困惑し、
自分の伝統的な黒い服装にコンプレックスを持ちます。
冒頭でキキの母親は１３歳でひとり立ちなんて現代的じゃないと嘆き、
魔法の薬や技術の伝承が先細りであることを嘆いています。
魔女や田舎に象徴される伝統的なものと飛行船や都会に象徴される現代的なもの、
この両者は放っておくといつまでも反発しあい建設的ではありません。
特に次の時代を担う若者にとっては両者に挟まれることに大きなストレスを感じるはずです。
しかし、若者代表として描かれるトンボは伝統的なものと現代的なものを区別しません。
トンボは空を飛ぶことに強いロマンを感じています。
その強いロマンの前では伝統的なものと現代的なものの差なんてちっぽけなのです。
空を飛べることがかっこよく、方法よりも目的に生きています。
時代の過渡期に必要なのはこういったパワーのある馬鹿なのだというメッセージでしょうか。

なぜ今この話をしたかというと昨日がちょうど成人式で、
「成人の日の社説がウザい件」この記事がとてもおもしろかったからです。
今の日本が過渡期に見えて、責任のなすり付け合いがひどいなーっと。
そして今ちょうど自分の研究がある理由で頓挫していて、
慣例とか常識とかくそ喰らえだ！っと沸いているときに
魔女の宅急便を見たら心がなんか爽やかになった、という個人的なお話でした。

.

Skype を起動するリンク

Skype はとても便利なツールですが、リアルな知人以外のコンタクトが増えなくて少し寂しいですね。
そこで mailto: リンクのようにスカイプアカウントをウェブページに載せたいと思います。

デモはこちら

Skype ボタン

まず skype.com の Get a Skype button のページに行きます。
このページを利用すると自分のページに Skype を促進するためのボタンを設置することができます。
しかしデザイン的にちょっとどのボタンも使いたくないといった人もいると思います。

<!--
Skype 'Skype Me™!' button
http://www.skype.com/go/skypebuttons
-->
<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
<a href="skype:アカウント名?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_white_124x52.png" style="border: none;" width="124" height="52" alt="Skype Me™!" /></a>

ソースを読んでみるとシンプルで、どうやら javascript を読み込んで、
a タグで href=”skype:アカウント名?call” 、これだけのようです。
なので以下のソースのアカウント名の部分を自分のアカウントにしてコピペすればOKです。

<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
<a href="skype:アカウント名?call">Skype Me!!</a>

まとめ

wordpress.com ではどうしても javascript を走らせられないみたいなので、
ここのプロフィール欄には置けませんでした。残念。

.

jQueryでタイマーの実装

jQuery の Timer プラグイン を使ってカウントダウンタイマーを作ってみたいと思います。

プラグインの読み込み

まず始めに jQuery とダウンロードした jquery.timer.js を読み込みます。
jQuery は Google Ajax API を利用して読み込みます。

<!-- Google CDN の jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<!-- Timer plugin -->
<script src="jquery.timer.js" type="text/javascript"></script>

Timer プラグインの使い方は簡単で、$.timer(インターバルミリ秒, 実行する関数) です。

$.timer(1000, function (timer) {
  alert("hello");
  timer.stop();
});

setInterval の落とし穴

Javascript の setInterval 関数は実行のタイミングが直感とやや違っていて、
これについては 「JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念」
こちらの記事に詳しく書かれています。

jQueryのTimerプラグインも中身は setInterval を使用しているので、同じ誤解がありそうです。
ためしに下のコードを実行してみると、結果は hoge piyo (1000msおいて) fuga の順番になりした。

$(function() {

  $( 'body' ).append( 'hoge<br />' );
  //タイマーをセット
  $.timer(1000, function( timer ) {
    $( 'body' ).append( 'fuga<br />' );
    timer.stop();
  });
  $( 'body' ).append( 'piyo<br />' );

});

Timer プラグインは timer.stop() をかけるまでインターバルをおいて、
関数を実行キューに登録し続けるといったものです。
なので timer.stop() をかけるタイミングを間違うと、
一回余計に関数が実行されてしまうといった類のバグがおこりそうです。

カウントダウンタイマーを作ってみる

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>timerテスト</title>
  
  <!-- Google CDN の jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
  <!-- Timer plugin -->
  <script src="jquery.timer.js" type="text/javascript"></script>

  <script type="text/javascript">
  $(function() {
  
    //タイマー作動中のフラグ
    var timer_state = false;
    
    function timerStart() {
      $.timer(1000, function(timer) {
        
        if(timer_state == true){
          var time = $( '#time' ).val();
          time = ( ~~time - 1 );
          
          if( ~~time > 0 && timer_state == true ) {
            $( '#time' ).val(time);
          }
          else {
            $( '#time' ).val('time out!');
            timer.stop();
          }
        }
        
      });
    }
    
    $('#start').click(function(){
      timer_state = true;
      timerStart();
    });
    
    $('#stop').click(function(){
      timer_state = false;
    });
    
  });
  </script>
</head>
<body>
  <input id="time" type="text" />
  <button id="start">start</button>
  <button id="stop">stop</button>
</body>
</html>

この実装でもタイマーとしては機能します。
しかし致命的なバグがあります。
それは stop → start のクリックが 1 秒以内にあると、
カウントダウンの関数が二重で実行キューに登録されてしまうのです。
こうなるとタイマーは1秒で2回実行されおかしな挙動となります。

まとめ

今回はタイマーの二重起動を解決するうまい方法が思いつかなかったので、
stop → start を1秒以内にクリックすることを禁止する関数を挟む
といった泥臭い方法でしのぎました。
なにかいい方法がありそうですけどね。

.