あなただけのデモムービー

Pocket

GoogleのAdSenseのデモムービーが新しくなったようなのでご紹介。

素敵なのはあなたのサイトを使ってデモしてくれる点。URLを入れれば、そのサイトを画面に見せながら説明してくれるのだ(日本語はばけちゃうけど)。

adsense.gif

↑ 百式の画面で説明。いいですね。こちらからどうぞ。

これならぐっと感情移入できますね。見ている人に感情移入させるクリエイティブな方法はまだまだありそうですね。

CSSでここまで実現!

Pocket

先日Six Apart社の上ノ郷谷氏と呑みにいった。彼はHinagataというMovableTypeのテンプレートサイトをつくっているのでCSSにとても詳しい。ふたりでCSSはすごい!と盛り上がったのだが(その後上ノ郷谷氏は2杯目で撃沈)、CSS関連で話題になっているサイトがあったのでこちらでご紹介。

これはCSS+HTML+JavascriptだけでつくったWindowsXPの画面である。IEではうまく見れなくて、Firefoxで見てもらいたいのだが、CSSでここまでできるのだなぁ、と感動すること請け合いだ。

windowsxp.jpg

↑ WindowsXPそっくり・・・すご。実物はこちら

ちなみにアイコンとかをダブルクリックしても何もならないのだが、(1) アイコンをドラッグできる、(2) スタートメニューが開く、という機能は実装しているようだ。ウェブの表現力もここまで来たか、と思えるので是非試してもらいたい。

ちなみにブラウザ上でOSを表現、というサイトは他にもあって、個人的に昔感動したのがブラウザからMacOSをインストールする次のサイト。最初ちょっと怖い画面が出てくるがあまり気にせずにじっと待っていると昔なつかしのMacOS(Ver.8)の画面が出てくる。こちらはアイコンなどをクリックしても楽しいのでいじり倒してみるといいだろう。

macos.jpg

↑ こちらはむしろIEで。DHTMLですね。実物はこちらクリックすると怖い画面が出てきますので注意。でも大丈夫ですから。

またもうちょっとシンプルなところでは1bit Mac :-)というサイトもありますね。これはFlashを使ったものですが。こちらもご参考までに。

1bitmac.jpg

だからなんだと言われればそれまでですが、クリエイティブな人がいるものだな、と。

三色フォルダーのすすめ

Pocket

さきほどのエントリーにてFlickrをつかったLifehack共有を紹介したが、自分でも思いついてアップしてみた。半年ぐらい実践している情報処理手法(ってほどたいしたものでもないが)。コメントつくかな・・・。

三色フォルダーHack

3folders.jpg

赤、青、黄のフォルダーを持ち歩いている。赤は「今日やるべきこと」、青は「持ち歩きたい資料」、黄は「作業用の裏紙」。なにかしなくちゃいけないこと(TODOリスト、読むべき記事とか)は赤にほおりこんでおく。一日の最後に赤が空になっていればOK。原色を選んでいるのはバッグの中で視認性を高めるため。いまのところうまくいっとります。

他にも思いついたらHackをUpしてみようかな、と。

Lifehacker and Flickr

Pocket

このサイトのテーマであるLife Hacksであるが、海外にももちろん同様のテーマを扱ったブログがある。

もっとも有名なのは(そのままだが)Life Hackerであろう。Gawker Mediaが仕掛けるこのブログには以前から注目していたし、「こういうのやりたいなぁ」と漠然と重なった思いがこのサイトになったような気がしないでもない。

lifehacker.gif

そのLife Hackerからもいくつか気に入った記事を紹介していきたいがその一発目。

» Flickr Lifehack Fun

Flickrを使ってみんなのLife Hackを共有しよう!という試みである。これはクレバー。

人生や仕事をちょっとしたやり方で楽しく、簡単にする小技を写真とキャプションで紹介している。

個人的に気に入ったHackをいくつか。

Kittyhack

lifehack1.jpg

仕事で滅入っているときでもこの受話器を肩と耳ではさめば、いつでもぬいぐるみが僕を抱きしめてくれるのさ!

My New Tatoo

lifehack2.jpg

右手に一インチと半インチの感覚で刺青。もう定規を持ち歩く必要はないね。左手にはセンチメーターの単位で刺青しようと考えているんだ・・・。

LIFEH4CK!

lifehack3.jpg

左に「未」、右に「済」と書かれた壁紙をつくってみた。このディスプレイにTODOを書いたポストイットをはりつけておけば作業管理が楽になる。ディスプレイは明るいから重なっている後ろのポストイットに何が書いてあるかもわかるんだ。作業が終わったら左から右にポストイットを移せばいいのさ。

なーるほど。このブログでもこういうのやってみたいですね。それにしてもFlickrをクリエイティブに使う人々の多いこと。いいサービスですね。

海外サイトの歩き方(瞬間単語訳の巻)

Pocket

さきほどの記事とマウスオーバーつながりでもう一つツールをご紹介。

百式を書いているとよく海外記事を読んだりするのだが、困ってしまうのが単語の意味がわからないとき。辞書サイトに行って調べてもいいが、それも面倒だし、何度もやっていられない。

そこで登場するのがPOP辞書。このサイトで提供しているBookmarkletを使えばあらゆるページを「わからない単語にマウスオーバーすると意味を教えてあげるよ!」ページに変換してくれる。

pop.gif

↑ 例えばこんな感じ。

読みたいページがあればBookmarkletからボタン一発で変換可能だから楽々。分からない単語があればマウスをもっていくだけでいいというシンプルさ。よくセミナーなどで紹介したりするが、知らない人が多いのが不思議なツールのうちの一つである。おすすめ。

ちなみにPOP辞書では英語→日本語以外の変換もできるし、そこに出ている英単語でクイズを創ってくれたりする機能もあるのでいじりたおしてみると素敵です。

追記:

この記事を書くときにマウスカーソルも含めてスクリーンショットを撮るのにてまどった。使ったツールはScreen Shot!。こちらもいいプログラムですね。

Aardvark AHHHHH!

Pocket

GW中は全体的にサイトをリニューアルしまくっていたおかげですっかりCSS技術が向上した(まだまだだけど)。また詳しくなればなるほどもっと知りたくなるわけで、きれいなサイトを見るたびに「これってどうやってんの?」と調べてみたりしてみた。

以前まではそうした調べ物にはFireFoxのWeb Developerを使っていたりしたのだが、これは便利なようで(一部)ちょっと不便だったりする。

例えばこれを使えばある要素の枠を表示したり、そこに指定されているクラスの名称を表示したりできるのだが、これがいっぺんに表示される&要素名や枠が見やすいように表示されるため、オリジナルのレイアウトがくずれてしまうのだ。するとかっこよかったのはどこだったっけかな、とまた枠を非表示にしたりとわけわからなくなる。

web_dev.gif

↑ Web Developerで要素の枠線と要素名を表示。くずれる、くずれる・・・。

そこで今回のリニューアル作業には各所で話題になっていたAardvarkを使ってみた。FireFoxの拡張機能なのだが、マウスオーバーするとその箇所だけの情報を必要最小限だけ教えてくれる。またその部分だけのソースコードも見せてくれたりするのでミニマムな感じで使い勝手が良い。

adver.gif

↑ このサイトでやるとこんな感じ。

使い方は簡単で、Aardvarkのサイトでインストール後、FireFoxを再起動、右クリックから「Start Aardvark」で準備完了だ。

それ後、サイト上でマウスを動かせば上のように必要な情報を表示してくれる。またそこからいくつかのコマンドで便利機能も実現している。背景色だけ変えたり、その要素を囲む親要素を表示したり、一時的に要素を非表示にしたり・・・。

ウェブを創る人向けですが、手放せない一品ですね。僕の作業時間を大幅に減らしてくれたであろうことに敬意を表してLife Hackとして取り上げておきます。

Complimentary Music on iTunes

Pocket

自宅ではもっぱらiTunesを使って音楽を聴いている。ラジオはとても便利だ。また無線でアンプ+スピーカーに飛ばしているので音質にも満足。さらにデスクトップとノートブックでライブラリを共有していたりしていてもう言うことがない。

itunes.gif

↑ 同じネットワーク上なら上のように他のコンピューターのライブラリを共有できる。

さて、それはそれで別にいいのだが、先日外国のホテルに泊まっていたらちょっと小粋なサービスに出くわした。いつものようにネットワークにつなげて、なんとなくiTunesを開いたら、ホテル側が音楽ライブラリーをiTunesを通じて提供していたのだ。ホテルの内装もおしゃれだったが、ネットワークの中までおしゃれとは・・・はげしく好感度アップであった。

日本のホテルも最近はネットワークにつながることが前提になっているが、こうした小粋なサービスも提供してもらいたいかもですね。

百式リニューアルしました。

Pocket

百式リニューアルしました。リニューアルの要点は以下のとおり。

・ ドットコム記事と管理人の独り言を分離。
・ シンプルに。
・ CSSでがしがしと(Thanks to Yasuhisa!)
・ 過去記事をPHPでがーっと流し込み完了。
・ MovableTypeのVersionをあげた。

残したいもの、新しく追加したいもの、と悩みましたがとりあえず現在のスタイルでしばらくいっときます。なお、メルマガにはあいかわらずドットコム情報と僕の近況(運動記録含む)が書かれていますのでそこらへん興味のあるかたはメルマガ登録なぞがおすすめです。

よろしければ新しいサイトの感想などお聞かせくださいね。

i d e a * i d e a について

Pocket

百式リニューアルに伴い、管理人の独り言というかコラムを別ブログに移行します。百式は百式でドットコム情報に特化します。逆にこちらは、百式でとりあげられない情報をつらつらとゆるい感じでつづっていきたいと思います。

100top.gif

↑ 新しい百式。過去記事全部移行しました。すごい時間かかった・・・。

主に海外からのLife Hacks、僕が運営しているサイトの近況、イベント情報などなどを取り扱っていきます。

なおテーマにしている「Life Hacks」という言葉はあまりなじみがないかもしれません。Hackについては技術用語かと思われる方も多いかもしれませんが、山形さんのページを引用すると、

Hackについて

「ハッカーは、正しいことを雑にやる。スーツどもは、まちがったことを綿密にやる」という格言のようなものがあるけれど、まさにこの「正しいことを雑に」が hack ってことなの

といった具合です。

つまり「簡単にちょこちょこっと生活の質を向上させるようなさまざまな技」ぐらいが「Life Hacks」の意味しているところでしょうか(個人的に)。自分で使っていて「使えるなぁ」「楽しいなぁ」「美しいなぁ」と思えるものをとりあげていきたいですね。

不定期更新ですが気が向いたらのぞいてみてくださいね。