IKEAでも似たようなことをしていたが、それよりセレクションが多そうなのでご紹介。
SnapShopを使えば、ARを使って家具選びができるようだ。
使い方は簡単で、iPhoneアプリを起動して家具を選択、カメラの映像と重ね合わせるだけである。
もちろん家具は回転させたり、大きさを調整したりすることもできる。
実際の自分の部屋に家具を置くとこうなるのかぁ、とイメージできて良いですな。日本の家具屋さんにも展開してもらいたいところだ。
Objective-CからjQTouchに逃げているわけですが（汗）、こちらも癖がありますね。今日中にマスターしたいところ。
初めての皇居ランに行ってきた！雨ふってたけど気持ちよかったなぁ。
Easy Accordion plugin will get your definition lists (DTs) and generate a nice and smooth horizontal accordion. You can then decide to make it a timed slideshow or leave it still.
Easy Accordion plugin keeps the HTML to the minimum, is SEO friendly and fully accessible, uses the CSS rotation to rotate the slide titles (no need for images), works in all the major browsers, allows for autoplay, it’s opensource and fully customizable and, what count most, it’s free! And it has been tested on Firefox 3.5+, IE6/7/8, Safari 5+ and Google Chrome.
Requirements: jQuery Framework
Demo: http://www.madeincima.eu/samples/jquery/easyAccordion/
License: MIT, GPL License
Easy Accordion plugin will get your definition lists (DTs) and generate a nice and smooth horizontal accordion. You can then decide to make it a timed slideshow or leave it still.
Easy Accordion plugin keeps the HTML to the minimum, is SEO friendly and fully accessible, uses the CSS rotation to rotate the slide titles (no need for images), works in all the major browsers, allows for autoplay, it’s opensource and fully customizable and, what count most, it’s free! And it has been tested on Firefox 3.5+, IE6/7/8, Safari 5+ and Google Chrome.
Requirements: jQuery Framework
Demo: http://www.madeincima.eu/samples/jquery/easyAccordion/
License: MIT, GPL License
前回紹介したTotalFinderを使っていて、ふとメニューバーのアイコンに気づいたんですが、クリックすると、Finderの環境設定にTotalFinderのタブがついています。
その中の調整タブに、「不可視ファイルを表示」のチェックボックスが！ショートカットは「command + shift + .(ドット)」ですね。さっそくチェックをつけてみると、すぐに不可視ファイルが表示されます。
MAMPで管理しているローカルサイトで、.htaccessを使うことがよくあって、今まではターミナルにフォルダをドラッグしてcdして、mvでリネームしてファイルをFinderに表示させて、編集してまた.htaccessにリネームして、ってやっていたんですが、すぐにテキストエディットで開けるようになるので便利。
Total Finderは使ってみた感じ、タブ化された他のタブにファイルをドラッグすると、ちゃんと移動してくれるしいい感じです。
ぜひ使ってみてください。
前回紹介したTotalFinderを使っていて、ふとメニューバーのアイコンに気づいたんですが、クリックすると、Finderの環境設定にTotalFinderのタブがついています。
その中の調整タブに、「不可視ファイルを表示」のチェックボックスが！ショートカットは「command + shift + .(ドット)」ですね。さっそくチェックをつけてみると、すぐに不可視ファイルが表示されます。
MAMPで管理しているローカルサイトで、.htaccessを使うことがよくあって、今まではターミナルにフォルダをドラッグしてcdして、mvでリネームしてファイルをFinderに表示させて、編集してまた.htaccessにリネームして、ってやっていたんですが、すぐにテキストエディットで開けるようになるので便利。
Total Finderは使ってみた感じ、タブ化された他のタブにファイルをドラッグすると、ちゃんと移動してくれるしいい感じです。
ぜひ使ってみてください。
ある Anonymous Coward 曰く、
今月末から米国で販売開始予定の Apple TV が既に Jailbreak されたとのこと (本家 /. 記事より) 。
iPhone Dev Team で紹介されているのは、Apple TV 用 Jailbreak ツール「SHAtter」。Apple TV はまだ出荷前だがファームウェアは公開されており、SHAtter はそのキーを解読したとのこと。SHAtter は元々最新の iPod Touch を Jailbreak するツールであった。Apple TV の OS は Apple TV の旧 OS と iOS のマッシュアップのようなものであるため、Apple TV にも応用できたという。この Jailbreak を利用すれば、理論上は iPhone や iPad などのアプリケーションなどは全て Apple TV 上でも使えるようになるはずとのことだ。
ちなみに元記事によると今回リリースされる Apple TV の OS のバイナリは全て iPad と互換性があるとのことで、今後の方向性が垣間見えるようで興味深い。
ある Anonymous Coward 曰く、
オープンソースの図書館システム Next-L Enju を採用する図書館が徐々に増加しているらしい (第 4 回 Next-L オフラインミーティング議事録より) 。
先日に公開された国立国会図書館サーチも Enju をベースにしたものが使われているとのことで、運用は NTT データがしているとのこと。また、三菱総合研究所は自治体へのクラウド活用に向けたクラウドユーザー研究会のプロトタイプ検証において図書館システムに Enju を使う予定とのことだ。
ソースコードリポジトリは Next-L Enju の github で公開されている。
すべて読む | オープンソースセクション | ソフトウェア | オープンソース
9月末まで限定でSourceForge.JP/Slashdot Japanユーザー向けにマイクロソフト製品の 特価キャンペーンを実施中。Visual Studioを中心にOffice 2010やWindows 7など、全 製品について破格の価格設定です。Visual Studio Pro 2010 53,550円、Office Pro Plus 2010 キャッシュバックで44,869円相当ほか。また、新規購入以外にもライセンス購入も特価 となっています。詳しくはキャンペーンページへ。
「ZumoCast」は、PC内のファイルをクラウド経由でストリーミング再生できるソフトだ。DropboxやSugarSync、ZumoDriveなどと同様、別のPC上にあるファイルをクラウド経由で参照できるサービスの一種だが、「ZumoCast」ではファイル本体が常時クラウドにアップロードされるのではなく、必要になった時に初めて転送が行われるのが特徴だ。
あらかじめすべてのファイルをクラウドにアップロードしておく仕組みの場合、すばやいダウンロードが可能であるほか、クライアントのデータが破損した際も、バックアップとして参照することができる。その一方、すべてのファイルを保存するにはクラウド上に莫大なディスク容量が必要になるため、ローカルのすべてのファイルを同期対象に指定するのは困難だった。
ZumoCastでは、リクエストがあった際に初めてファイルが転送される仕組みになっている。例えば、元のデータが保管されているPCをA、外出先に持ち歩いているノートPCがBだとすると、Bからリクエストがあった際にAからクラウドにデータが送信され、それをBが受信する流れになる。クラウド上にデータが保管されない点が、Dropboxなどとの大きな違いだ。
この仕組みのメリットは、ディスク容量をほぼ気にしなくてよいことだ。マイドキュメント全体を共有するのはもちろんのこと、数百GBあるドライブをまるごと共有することもできる。さらにネットワークドライブ全体を同期対象にすることも可能だ。外出先から参照する可能性があるドライブをまるごと同期対象にしておき、必要な時に参照するという、ファイル同期ソフトというよりもリモートソフトのような使い方が可能になる。iPhone/iPadアプリも提供されており、これらを経由して同期対象のPC内のファイルを参照することもできる。
では実際に設定方法と使い方を見ていこう。今回は自宅内のLAN上にあるデータを、iPhoneから参照する場合の手順を説明する。
まずはZumoCastのサイトにアクセスし、クライアントソフトをダウンロードする。日本語メニューが用意されているように見えるが、実際には英語となる。
クライアントソフトはWindowsとMac OS X用が用意されている。今回はWindows用を選んでインストールする。データを参照する側のiPhoneアプリはこのあとの手順で必要になるので、別途インストールしておく。
ソフトをダウンロードしたらインストールを行う。メニューは英語だが特に迷う項目はない。
インストールが完了すると設定ウィザードが起動する。アカウントはZumoDriveと共用なので、すでに取得済みであれば上段の「I already...」を選んでログインする。アカウントがなければ下段の「I'm new...」を選んでサインアップし、その後ログインする。
どのフォルダを同期対象にするかを選択する。ZumoDriveを利用していれば、ZumoDriveで設定済みのフォルダが表示される。ここではいったんチェックを外してウィザードを終了させる。
ウィザードが終了するとタスクトレイにZumoCastのクライアントソフトが常駐するようになる。右クリックから「Preferences」を選んで設定画面を起動する。
同期対象のフォルダを追加する。画面下部の「フォルダを追加」からそのまま追加できる場合もあれば、このように該当フォルダの右クリックメニューから指定するよう促される場合もある。
同期したいフォルダを右クリックして「Add to ZumoCast」を選択すると、同期対象に追加される。Cドライブをまるごと指定したり、ネットワークドライブを指定することもできるが、今回の試用時はフォルダやドライブによってはうまくいかない場合もあった。
今回はとりあえずデスクトップと、ネットワークドライブの「W」と「Z」を同期対象に指定してみた。実際の容量の合計はテラバイトを超えるが、それでも問題なく指定できる。
iPhoneアプリでログインしたところ。クライアントソフトがインストールされたPCの名前である「DESKTOP」がオンラインであることが表示されている。
「DESKTOP」をタップすると、クライアントソフト側で設定した3つのフォルダが表示されている。
フォルダを開くとファイルの一覧が表示されているので、参照したいファイルをタップする。ちなみにクライアントソフトがインストールされたPCでタスクマネージャを起動しておくと、転送開始の瞬間にCPU使用率が上昇する様子が見られる。
ファイルが転送され表示された。同じ手順でPDFを参照したり、音楽ファイルや動画ファイルをストリーミング再生することもできる。ただし転送できるデータの最大容量は50MBまでとされているので、大容量の動画データのストリーミング再生には不向きだ。
ファイルはストリーミングで表示するだけではなく、iPhone側にダウンロードすることもできる。ちなみにiPhoneアプリ側では「Transfer Queue」として上限30GBのバーが表示されているが、これが通算の転送容量なのか、それとも月次でリセットされるのかは今回試用した限りでははっきりしなかった。
実際に使った限りでは、DropboxやSugarSync、ZumoDriveといったソフトとは別に、万が一、いざという時のためにファイルを参照できるようにしておく用途が考えられる。外出先で必要になったファイルが同期対象のフォルダに含まれておらず、作業が進められなかったというアクシデントは、同期ソフトを使っているとよく起こりうる。このZumoCastでファイルの入ったドライブすべてを同期対象にしておけば、こうした事態を防げるというわけだ。出張などで自宅や会社を数日間離れるといった場合に重宝しそうだ。
また、iPhoneアプリの画面の下段に「Music」「Videos」のアイコンが並んでいることからも分かるように、PC上にある音楽ファイルや動画ファイルをストリーミングで楽しむのにも向いている。細かいライブラリ管理などの機能こそないものの、iPhone内にないファイルをリモートで参照し、再生できるのは非常に便利だ。Wi-Fiはもちろんのこと3Gでも利用できるほか、今回試用した限りでは3G回線でもHD動画がコマ落ちなく再生できるなど、パフォーマンスはかなりのものだ。
その一方、クラウド上にデータがあるわけではないので、クライアントソフトが起動していなければOfflineのままで利用できないことは注意したい。Wake on LANなどで利用のたびにPCの電源を投入することもできなくはないが、コンセプトを考えるとあまり現実的ではないだろう。常時接続環境が前提にあって初めて成立する仕組みであることは、前提として考慮しておいたほうがよさそうだ。
まだ登場したばかりのソフトということもあって動作はやや不安定なところもあり、試用中にクライアント側がハングアップしてOffline状態になってしまうこともしばしばあった。安心して日々の業務などに使えるようになるにはもうすこし時間がかかりそうだが、クラウドの使い方として非常に興味深いソフトであることは間違いない。今後の展開に要注目だ。
ソフト名
ZumoCast
http://www.zumocast.com/
作者
Zecter Inc.
利用料
無料
eggy 曰く、
マイクロソフト社は、Windows Live Spaces (Windows のブログサービス) は既存の人気ブログプラットフォームに太刀打ちできないとし、2600 万人以上のユーザーを持つ WordPress の運営・開発を行っている Automatic 社と手を組む事を発表した (TechCrunch の記事、Windows Live Blog の記事, 本家 /. 記事より) 。
TechCrunch Disrupt カンファレンスで、Windows Live のプロダクトマネジメントディレクター Dharmesh Mehta 氏が Automatic 社の CEO である Toni Schneider 氏と共に壇上に上がり、Windows Live Spaces のユーザーを WordPress に移す事を明らかにした。新機能の追加を待ち望んでいた Windows Live Spaces のユーザーは、WordPress に移行することですぐに新しい機能を使用することができ、また移行後は、旧 URL の速やかなリダイレクト処理が行われるため、ビジターを失う心配がないとのこと。
さらに今後は、WordPress のブログに新しい記事がアップされると、Messenger がフィードの登録を行っている友人にお知らせしてくれるので、もともとの WordPress のユーザーにもメリットがあるようだ。
Luke (@ls_n) posted this snippet in response to a question the other day, and I thought it was worth sharing here as a quick tip.
As with most selector-based idioms, a lot of YUI 3’s expressive power comes from what you can do once you have reference to one or more HTMLElements — in YUI 3, that means having a Node reference, which you usually get via Y.one(selector string) or Y.all(selector string). So, Y.one("#foo").doSomethingInteresting is a common pattern.
It’s easy to extend YUI 3’s expressiveness by adding your own magic to Node (and/or NodeList). Here’s one way to make your extension modular and reusable.
First, create a new custom module (we’ll call it node++):
YUI.add('node++', function (Y) {
//define a function that will run in the context of a
//Node instance:
function doSomethingAwesome() {
Y.log("Do something awesome here.");
}
//use addMethod to add doAwesomeThing to the Node prototype:
Y.Node.addMethod("doAwesomeThing", doSomethingAwesome);
//extend this functionality to NodeLists:
Y.NodeList.importMethod(Y.Node.prototype, "doAwesomeThing");
}, '0.0.1', { requires: ['node'] });
With that definition on the page, node++ can be used in any instance. In your implementation code, you would do:
YUI().use('node++', function (Y) {
//use from a single Node:
Y.one('#foo').doAwesomeThing();
//use from a NodeList:
Y.all('p').doAwesomeThing();
});
Note that only the YUI instance(s) to which you bind your node++ module will have access to doAwesomeThing. One feature of this design that you’ll like as you build complex apps is that your implementation logic won’t need to change if the dependency list for node++ evolves — that will get handled for you automatically at use() time, and the dependency declaration stays with the code to which it pertains.
Ryan Dahl’s work on Node.js — and the community forming around that project — has joined HTML5 as one of the big stories of 2010. YUI engineer Dav Glass has been working to make YUI 3 a powerful ally for Node.js implementers, and in this video he shows you what he’s done so far — including demos of progressively enhanced widgets running the same code on client and server. Don’t miss this one.
If the video embed below doesn’t show up correctly in your RSS reader, click through to watch or download the high-resolution version of the video on YUI Theater.
Thanks to the hard work of the Fog Creek team, including ten great summer interns, we have just released amazing new upgrades to FogBugz and Kiln.
To kick off the new releases, we’re about to start another one of our famous world tours. I’ll be flying to 20 (yes, twenty) different cities to demo FogBugz 8.0 to anyone who wants to come see it in person.
As an added bonus, I’m also going to bring along someone from the Kiln team to teach a one-hour course in distributed version control. If you’ve been wondering what all the fuss is about, this is a painless way to learn the basics of the new generation of version control.
The events are absolutely free but they always fill up right away, so go sign up now!
Map generated by the
Great Circle Mapper -
copyright © Karl L. Swartz
Need to hire a really great programmer? Want a job that doesn't drive you crazy? Visit the Joel on Software Job Board: Great software jobs, great people.
Wonderful sculpture by Jonna Pohjalainen. Pencils growing wild jutting out into the sky.
via monster-munch
This is a collection of buttons that show what is possible using CSS3. Almost all of these buttons look best in Chrome and Safari on OSX. They look almost as good in Firefox, with all other browsers receiving a less-styled button.
Requirements: CSS3
Demo: http://ubuwaits.github.com/css3-buttons/
License: License Free
FourSquareをはじめとするソーシャルちっくなサイトでは「バッジ」なる機能が人気だ。
これはユーザーがなんらかのアクションを起こせば起こすほどなんらかの「勲章＝バッジ」がもらえるというものだ。
そこで「あらゆるサイトをバッジ対応にしちゃえばいいんじゃね？」と考えたのがBadgevilleだ。
確かに自分のサイトをバッジ対応にしてしまえば、再訪するインセンティブになるかもしれない。ランキングなどもつければさらに楽しいだろう。
アクセスアップを狙っているサイトの人は参考にしてみてもいいですな。
うーん、iPhone対応はムズカシイナァ・・・。
良い感じ！
ある Anonymous Coward 曰く、
Apple はカメラのストロボに関する新技術の特許を申請したそうだ (本家 /. 記事より) 。
このストロボは、ユーザが選択した「光を当てたい場所」に対して発光するとのこと。iPhone 4 などのタッチセンサー付きのファインダー内でオートフォーカスの焦点を選択するように、ファインダー内の光を当てたい場所を指で押して発光対象を決定できるということらしい。
元記事に掲載されている図解をみるとストロボ発光箇所が 6 か所あり、これによって発光に方向をつけられるようになっているようだ。ストロボ光は発光対象に応じて「リダイレクト装置」を通じて方向付けされ、光量などは通常のカメラのように撮影シーンに応じて算出され決定されるという。
hylom 曰く、
2010 年 10 月 10 日より米国立議会図書館が Twitter のアーカイブを開始する (/.J 記事) が、これに対し「自分のつぶやきをアーカイブされないようにするサービス」が登場した (カレントアウェアネスの記事より) 。
このサービス「NoLOC.org」は、「#noloc」というハッシュタグが付いたつぶやきを発言後 23 週間が経過したら自動削除する、というものらしい。米国立議会図書館はつぶやかれてから 6 か月 (24 週間) が経過したものをアーカイブするとのことで、その前につぶやきを削除することでアーカイブさせないようにするようだ。
なお、利用には NoLOC.org による Twitter アカウントの操作を許可する設定 (OAuth 認証) が必要となる。
すべて読む | ITセクション | インターネット | SNS
関連ストーリー：
米国議会図書館、全てのTweetをアーカイブへ
2010年04月16日
馬鹿みたいにあつかった今夏ですが、ようやく秋の兆しというかむしろ寒いぐらいです。日本から四季が消えつつあるというのは本当なんでしょうか。。
さて今回から新しいテーマです。
分散計算フレームワークであるHadoopを導入から実践までを連載します。
よろしくお願いします。
■Googleの技術から生まれたHadoop
わたしたちは日常、ごく当たり前にgoogleのサービスを使っています。
あそこの店の情報を知りたい、有名人xxさんってどんな人？、あの大事件を振り返って調べたい、などなど。
生活に密着した情報だったり、過去を振り返って社会現象を調べたり、あるいは芸能人のゴシップネタを検索したりと、知りたいことは人それぞれで目的も全く違いますが、googleの検索を利用すれば一発で目的の情報（あるいは近い情報）にたどり着くことができます。
世界中の何億というウェブページについて文言によってインデックス化してなければとうていできない芸当です。そしてウェブページは新たに作られ、または消えてしまうものでもあります。
ものすごく膨大なテキストデータの解析を行っているわけですが、いったいどのような技術が使われているんでしょうか？
答えは、googleの内製インフラの一つである、Mapreduceという仕組みによって大規模解析は行われています。
Mapreduceの技術そのものは論文で公開されており(http://labs.google.com/papers/mapreduce.html)、その概要に触れることができます。
Mapreduceの技術詳細仕様については社外秘となっており、論文以外は世に出ていません。
しかし、驚くべき事にその論文をベースにゼロから開発されたのが、Hadoop MapReduceです。
Hadoopプロジェクトは現在Apache Software Foundationで開発・管理されており、ソースコードは全てオープンソースなため誰でも入手が可能となっています。
Hadoopで開発されているシステムとgoogleのシステムは以下のように対比が可能です。
| 機能 | googleでは・・ | hadoopでは・・ |
| ファイルシステム | Google File System | Hadoop Distributed File System |
| 計算フレームワーク | Mapreduce | Hadoop MapReduce |
| データベース | BigTable | Hadoop HBase |
この連載では主にHadoop MapReduceとHadoop Distributed File Systemについて触れたいと思います。
■Hadoop MapReduceの概要
最初に書いたように、何億ページという膨大なデータを処理するには1台のコンピュータでは処理の限界に容易に到達してしまいます。（下図左参照）
しかし、Hadoopの技術を用いることでデータの分割が行われ(Hadoop Distributed File System)、分割されたファイルに対する処理(Map)、それぞれのMap処理の結果を処理する(Reduce)という風にプロセスが遷移します。(下図右参照)
そして最終的な出力結果を出力します。
ずいぶん簡略化された絵になりましたが、入力データの分割により並列に処理が可能になり、それぞれの結果を集約することであたかも1台のサーバで処理を行ったかのように結果を得ることができます。
繰り返しになりますが、上の処理を行うには、2つの技術が必要となります。
一つはHadoop Distributed File Systemで、もう一つがHadoop MapReduceです。
■Hadoop Distributed File Systemについて
Hadoop Distributed File System(以下HDFS)は、ネットワーク上に分散したファイルシステムです。
ファイルをブロックという単位に分割し（通常64MB）、データノードと呼ばれるPC群にデータを分散させます。
それらのデータノード群を管理するのがネームノードと呼ばれるPCで、これはHDFSを構成するPC群では1台だけとなっています。ネームノードが停止するとHDFSには一切アクセスが不能となりますので、注意が必要です。
ブロック単位に分割することで、巨大なファイルは多くのデータノードに分散されます。しかし、ブロック化しない場合はその巨大なファイルが収まるだけのさらに巨大なストレージが必要となります。
スケールアップ(1台のPCをハイスペックにする)ではなくスケールアウト(PCを追加して全体としてのリソースを増やす)で対応できるようにというのがHDFSの理念でもあります。
このように散らばったブロックを意識することなくアクセスできるようにコマンドラインのインターフェイスが用意されています。
基本的にはUNIXやftpのコマンドに習っており、ほぼ直感的に使えるモノばかりです。
以下に一例を挙げます。(hadoop dfs と入力するとhelpで全てのコマンドが確認できます）
| UNIX/ftpコマンド | HDFSコマンド | 概要 |
| ls | hadoop dfs -ls | HDFS内のファイルリストを出力する。 |
| rm -r | hadoop dfs -rmr hdfspath | HDFS内のファイルやディレクトリを再帰的に削除する。 |
| put | hadoop dfs -put localpath hdfspath | ローカルのファイルやディレクトリをHDFSにコピーする。 |
| get | hadoop dfs -get hdfspath localpath | HDFSのファイルやディレクトリをローカルにコピーする。 |
HDFS操作コマンドの一例
そしてブロック化されていることはMapReduce処理において大きな意味を持ちます。
■Hadoop MapReduceについて
Hadoop MapReduce(以下MapReduce)は、データ処理のフレームワークで、機能的にはMapとReduceタスクの2つに分割されます。
以下にMapReduceの流れを示します。
1. Mapタスクは、データの最初の入力を受け持つタスクで、この処理においてデータはキーとバリューの形式に変換されます。(変換します)
2. Mapされたデータはキーバリュー形式で出力され、キー順にソートされ、さらにキーごとにバリューを配列にまとめた状態でReduceタスクに渡されます。
3. Reduceタスクは、受け取ったキーについてバリューを処理し、最終的な出力を行います。
このような流れでMapReduce処理が行われますが、ユーザが処理を作らないといけない部分は1と3のMapタスク、Reduceタスクになります。2はHadoopの機能として勝手にやってくれます。そのためにはデータ構造がキーバリュー形式であるという前提が必要になります。
つまり、データ形式を規定することでユーザは2つの処理を作るだけで計算フレームワークを享受できるわけです。
しかしこれだけではまだMapReduceらしさは発揮できていません。ここで重要になってくるのが、前述のHDFSによるファイルの分散です。
入力データをHDFS上に置くことにより、Hadoopは入力データが存在するデータノードでMapタスクを実行しようとします。つまり、ファイルが分散すればするほどMapタスクは並列で処理を進めることが可能となるわけです。
極端な例を出すと、1台のPCで100秒かかるMapタスクが、100台のPCに分散されると1秒で処理が終わってしまうと言うことです。(実際には処理のオーバーヘッドがあるので単純に言えませんが)
ざっくりと説明してきましたが、これが大まかなHDFS, MapReduceの仕組みです。
次回は環境構築をやってみましょう。
 | 期間中に1回以上取引で2，000円！さらに150万通貨取引で3，000円！マネパ |
ブラウザ同期ツール「Xmarks」が来年 1 月 11 日をもってサービスを終了する (Xmarks Blog の記事、Xmarks からのお知らせ) 。運用を持続する資金を調達できる目処がつかなかったのが原因とのこと。
200 万ユーザ、500 万台のマシンで利用された非常に使い勝手の良い同期ツールだった。僕は Firefox でしか使っていなかったが、IE、Safari、Chrome をまたいで同期することも可能だった事を今頃知った。乗換先として Firefox では Firefox Sync、Chrome では Chrome Sync、IE では Windows Live Essentials、Safari では MobileMe が挙げられている。
お引っ越しはお早めに。
すべて読む | ITセクション | インターネット | ソフトウェア | Google | アップル | Firefox | インターネットエクスプローラ
関連ストーリー：
Google Browser Syncがオープンソース化
2008年07月11日
どこでも同じ状態のFirefoxを使える「Google Browser Sync」リリース
2006年06月11日
houvds, kdngxwjp, un, http://DANSCOINSANDCOLLECTIBLES.COM skin and vein center gzqboo, ifkbrnig, fi,
citizenM is short for citizen mobile, and a new series of hotels with interiors designed by Concrete in Amsterdam.
About the author:
Stefan Klopp is the Director of Development for ExpressITech, the parent company of Car Rental Express. Stefan has been developing highly usable web solutions for the car rental industry in various roles over the last 6 years. He currently lives and works in Vancouver, British Columbia, Canada.
Car Rental Express is the leading independent car rental comparison website on the Internet. It lets users rent cars online in more than 1000 cities and airports around the world.
Our user base is largely non-technical, which means they want to compare prices and rent cars as easily as possible. With the relaunch of our website in June of 2010 we have implemented many components of YUI 2 to help provide our customers with an intuitive experience.
Which YUI components are we using?
The components that we’ve been using include Connection Manager, AutoComplete, DataSource, Calendar, Animation, JSON, and Container.
Why we chose YUI
When reviewing the different JavaScript libraries that we could potentially use on Car Rental Express, we found that the YUI was the most complete for our needs. The biggest selling features for us was the very modular approach the YUI took to implement different design patterns, as well as the robust documentation and examples they provided. From a development standpoint this led to rapid development of our application without having to struggle with a library.
How we use YUI
We utilize the YUI in a number of ways. Our 4 most used components are AutoComplete, Calendar, Container, and Connection Manager. Here are some of the ways we use each of these components.
The AutoComplete component is used extensively on our site to help users find a city or airport in which to rent a car. We really liked how easy it was to implement this component, and how quickly it responds. We cache search results server-side to help improve search results; however, having the client-side caching also helped tremendously in speeding up the response of the component. Another feature that we really took to was how easy the results were to style. When displaying the locations to the user this was crucial as we needed to identify which locations where found in cities and which were found at airports.
The Calendar component is also used throughout the site when a renter is filling in dates to conduct a search. We are using a customized version of John Peloquin’s Interval Selection Calendar and displaying it in a YUI Dialog. Essentially what we wanted to do was give the renter a two-month view when choosing their dates, as well as visually show them what date range they currently have selected. Again, this was extremely straightforward to implement using YUI 2 Calendar, and it basically came down to creating a YUI Dialog, setting the body to contain a div for the Calendar, then attaching a YUI Interval Calendar to that div.
We utilize YUI Containers throughout our website in a number of different ways. In the example above we were using a Dialog to help us display the Interval Calendar when a user was selecting a date. On our rate search results page we make heavy use of Containers to give the renter more information on different aspects of the car rental agency and the vehicle they might potentially rent. Most of the containers on this page are Panels that we re-use for each different listing. For example, the vehicle display features Panel:
Things got a little more fun with the Renter Rated agency ratings. When displaying the ratings, we really wanted to focus the user’s attention to the scores an agency received and to display this information in a clean, easy-to-view way. By utilizing the Dialog Control we were able to constrain the viewport and center the dialog easily to help us achieve this goal. By setting a blank header and footer it made styling simple by just adding the appropriate styles to our CSS. The end result was a clean ratings container that provides the renter with the information they want.
Connection Manager is used throughout the site whenever we need to pull data via a XHR request. In some of the examples above we utilize this component for requesting cities and airports for the AutoComplete implementaitons and pulling the rating information for the Renter Rated Dialog.
One interesting way we utilize Connection Manager is with our rental center block that sits on most pages. To help with performance we do a lot of full-page caching on many of our content pages. However, we still wanted to display the dynamic rental center block on these pages. This presented us with a problem we were able to solve with Connection Manager. Rather than having to break up our fully cached page and cache only aspects of the page we found it was easier to just include the rental center block via a simple asynchronous request. We found that this allowed us to retain the performance from having a fully cached page, yet still display dynamic content in our rental center box.
Final Thoughts
Overall we have been extremely happy with our choice to use YUI. It provides us with a modular library that is well documented, easy to use and implement.
I realize the concern,I am very sad to hear that you got your Supra fixed. I remember reading about some of your problems.
Nicely designed new items from Joseph Joseph.
先輩の友人のツイートで知ったんですが、MacのFinderをタブ化してくれるアプリがありました！
ずっと探していたのでうれしいです。
早速インストール。14日間のトライアルで、10回タブを移動すると購入アラートが出るという厳しい制限がありますが、試してみるといい感じ。
$15で購入できるので、よさそうだったら買おうかなと思っています。
10.6（Snow Leopard）がシステム要件となっていますね。
探していた方はぜひ！
あるAnonymous Coward 曰く、
OpenOffice.orgの開発者らがOracleとは独立した新団体「The Document Foundation」を設立、新たに「LibreOffice」という名称でオフィススイートの開発を進めていくと発表した（SourceForge.JP Magazine）。
The Document FoundationにはOpenOffice.orgの開発に関わる多くの開発者が参加しており、すでにLibreOfficeのベータ版も公開されている。また、Oracleに対しては「OpenOffice.org」というブランド名をThe Document Foundationに寄付するよう要請しているとのこと。
関連ストーリー：
仮面ライダー OOO (オーズ) のハッシュタグ、OpenOffice.org のタグとかぶる
2010年09月06日
OpenSolarisプロジェクト、終了
2010年08月16日
Illumos: OpenSolaris をさらに Open に
2010年08月06日
OpenOffice.org の導入、自治体で進む。
2010年08月04日
Most jQuery image sliders hover at around 8 kbs for minified versions, and around 15kbs or more for uncompressed development files, but what if there was a way to keep the simple fades, slides, and a couple other nifty bits, but strip the bloated and corny diagonal-cross fades or spiral dissolves.
Orbit is a killer jQuery plugin that lets you create a simple, effective and beautiful slider for images of any size, and even includes some parameters for making awesome captions and a sweet timer.
Requirements: jQuery Framework
Demo: http://www.zurb.com/playground/jquery_image_slider_plugin
License: MIT License
「コンテンツを繋ぎ合わせる理由とメリット」で、コンテンツにメタデータを付随することの重要性を解説しました。発行日・更新日・筆者といったデータは CMS から簡単に引き出せますが、コンテンツの文脈を示すタグ (キーワード) をどう記入するかが難しいところです。執筆したコンテンツを全体から捉え、短くて明確なキーワードを考えるのはなかなか難しい作業です。個人サイトであればまだいいですが、一日に複数のコンテンツを配信しなければならない環境だとひとつひとつタグを考える時間はないでしょう。複数人の人がタグの記述に携われば言葉のブレも発生するかもしれません。
そこでコンテンツを解析し、的確なキーワードを提示するサービスの利用が欠かせなくなります。SmartLogic や Nstein が解析・分析を行っているサービスですが、いずれも大企業向けのソリューションしか提供しておらず、誰でも利用できるというものではありません。精度は発展途上ですが、無料で手軽に使える文字解析ツールは幾つかあります。
私が利用しているのは Simple Tagという WordPress 専用のプラグイン。これはタグを管理するためのツールですが、中でも注目なのがコンテンツから最適なタグを提案してくれる機能。本文の中に今まで蓄積したタグがあるかをチェックし提示してくれます。タグを考える手間が省けるだけでなく、ちょっとした言葉のブレを防ぐのに最適です。もちろん日本語に対応しています。
Simple Tag は他の文字解析サービスの API を介して、より精度の高いタグを見つけ出すことも可能です。例えば Calais の無料会員に登録したあと、取得した API コードを Simple Tag の設定画面に記入すればサービスを WordPress 経由で利用出来ます。幾つものプラグインをインストールしなくても Simple Tag でオールインワン管理が出来るのも魅力です。残念ながら、海外の文字解析サービスは今のところ日本語には対応していませんが、今後状況が変わるかもしれません。
CMSと連動して使えるものは他にもあり、Zemanta がそのひとつ。WordPress, MT, Drupal 向けのプラグインと配布しているだけでなく、ブラウザのプラグインとしても配布されているセマンティックツールです。インストール後コンテンツ制作ページのサイドバーに Zemanta のウィジェットが表示されます。書き込んでいる文章を解析し、該当すると思われる画像や記事をリストアップしてくれます。Zemanta から該当するコンテンツをドラッグ＆ドロップ形式で貼付けることが出来ます。残念ながらこちらも日本語に対応していませんが、CMS との連携具合と自社サイト以外での関連性を深めるのに使えそうなツールです。
関連したコンテンツを表示・生成するという部分は CMS で出来ますが、その前にコンテンツＡとコンテンツＢが関連していということを CMS に理解してもらう必要があります。そのためにタグを記入してコンテンツの文脈を CMS や検索エンジンに理解してもらいやすくするわけですが、文章を解析するセマンティックサービスへの投資が今後さらに重要になるでしょう。
今回紹介したサイトの他にも、文章解析とインライン広告を連動しているInfolinks、タグ付けや関連コンテンツを提示するツールを提供しているTextDiggerなど幾つかあります。日本でも Knowledge Works や Metadata あたりがソリューションを提供しています。有料・無料様々なサービスが次々に出て来ているこの分野。長期的にサイトを最適化することを考えているのであればメタデータ化はひとつ欠かせないステップです。
あー、なるほど、と思ったのでエントリー。
Solve Mediaは新しい広告ネットワークである。彼らが目をつけたのはいわゆるCAPTCHAである。
ユーザー認証やらなんやらで広く使われているこのCAPTCHAに「ブランドメッセージをタイプさせればいいんじゃね？」と気付いたのである。
クラックされないように多少の工夫は必要だと思うが、確かに実際にタイプさせることで広告主のメッセージを浸透させることができるかもですな。
ユニークなことを考える人がいるものですねぇ。
洗濯物がかわかない＝稽古に行けない、という悪循環に陥りそうだ・・・。
昨日はがっつりやった。
やはり、これは「あり」だな。最近のスマートフォンブームを目の当たりにして、そんなふうに思った。何のことかと言うと、以前書いた「個人のパソコンが企業情報システムのクライアントになる日」の話。この記事のタイトルは「パソコン」としたが、まずは個人所有のスマートフォンを情報システムのクライアントにすることが一般化する。それから、個人所有のパソコンも・・・。これはクラウド＝ユビキタス時代には、当たり前になるかもしれない。
wrzmje, ulrregwi, ot, http://DANSCOINSANDCOLLECTIBLES.COM skin and vein center wffuvj, vdsyegbr, tg,
vczjwz, aauinzjq, uh, http://DANSCOINSANDCOLLECTIBLES.COM Dr. eric seiger hdguks, llcdkwjh, qq,
Matt Taylor (@rhyolight, blog) works for Yahoo! on an internal browser-side JavaScript framework. He enjoys working with graphics, and he’s worked with drawings and animations before using Java2d libraries. Before moving to Silicon Valley to work for Yahoo!, Matt worked in the St. Louis area as a software contractor. He’s also worked extensively with Groovy and Grails technologies for SpringSource. He was the original lead programmer for the YUI2-based GrailsUI plugin for the Grails web framework.
RaphaelJS is a powerful JavaScript library that manages SVG drawings and animations. It allows you to easily create SVG canvases and draw basic shapes and paths very easily, even grouping them into sets and applying transformations to one or many vectors. You can draw shapes, manipulate images, and animate everything. RaphaelJS provides a nice API to create and modify SVG elements with ease.
While the library is impressive, but I’ve found that I can add some important features to elements of the RaphaelJS library with YUI3. I’ve started off these efforts with the new RaphaelJS Gallery Module.
The first feature is the lazy-loading of not only the RaphaelJS library, but any RaphaelJS plugins you might need. The RaphaelJS Gallery Module will only load these files when you declare you’ll be using them within a YUI sandbox. For example:
YUI({gallery: 'gallery-2010.09.22-20-15'}).use('gallery-raphael', function(Y) {
Y.Raphael().use(function(Raphael) {
// use Raphael here just like you would outside YUI
var paper = Raphael('myPaper', 500, 500);
});
});
If you are using RaphaelJS plugins, specify their paths in an array and send that as the first parameter in the Y.Raphael().use() function:
YUI({gallery: 'gallery-2010.09.22-20-15'}).use('gallery-raphael', function(Y) {
var myPlugins = ['plugins/raphael.awesomePlugin.js', 'plugins/raphael.wickedPlugin.js'];
Y.Raphael().use(myPlugins, function(Raphael) {
// use Raphael here just like you would outside YUI
var paper = Raphael('myPaper', 500, 500);
// the 'paper' will have any new functions added by your plugins now
});
});
The RaphaelJS library is loaded first, then any specified plugins are loaded before your callback function is executed with the Raphael object as the only parameter.
Once you’ve created a drawing space with the Raphael object, then you can immediately get down to the drawing. When you call methods like rect, circle, and path on the drawing space, you’ll receive back objects representing SVG vectors. Normally, you’ll have access to their corresponding DOM elements through the node property. For example:
var paper = Raphael('myPaper', 500, 500);
var square = paper.rect(0, 0, 100, 100);
This creates a rectangular vector object at coordinates [0,0] with a width and height of 100 pixels. You have access to the underlying DOM element (which is an SVG rect element) like so:
var rectNode = square.node;
rectNode.onclick = function() {
alert('Congratulations, you clicked a square!');
};
If you are an avid YUI user, you’d probably like something more than this. How about a built in Y.Node as well? Just like the node property refers to the HTMLElement behind the SVG object, the $node property refers to the Y.Node wrapper for that element. So you can do things like this:
square.$node.on('mouseover', function() {
alert('Congratulations, you can move a mouse!');
});
Let’s try something more complex now. An interaction with one vector should be able to cause other drawn vectors to update their styles, right? How about we create some bars that all render their colors dependent on where a the mouse is located on a circle on the page:
var paper = Raphael('rcanvas', 600, 800);
var circ = paper.circle(350, 200, 100).attr({fill: 'pink', stroke: 'black'});
// pushing a bunch of rectangles into an array
var i=0; rectangles = [];
for (; i<10; i++) {
rectangles.push(paper.rect(0, 40*i, 200, 20).attr({fill: 'red', stroke: 'yellow'}));
}
// looping through the rectangles, adding specific circle mousemove handlers for each
Y.Array.each(rectangles, function(rect, index) {
var i = index + 1;
circ.$node.on('mousemove', function(evt) {
// the fill color is dynamic, dependent on the location of this rectangle
// in the array as well as the location of the mouse
var lf = circ.attrs.cx - circ.attrs.r,
rt = 2 * circ.attrs.r + lf,
x = evt.clientX - lf,
top = circ.attrs.cy - circ.attrs.r,
btm = 2 * circ.attrs.r + top,
y = evt.clientY - top;
red = (((128 * x) / (2 * circ.attrs.r))-1) * i/6,
green = 256 - ((((128 * x) / (2 * circ.attrs.r))-1) * i/6),
blue = (((128 * y) / (2 * circ.attrs.r))-1) * i/6;
rect.attr('fill', 'rgb(' + red + ', ' + green + ', ' + blue + ')');
});
});
This example is running here, but as you can see in the snapshots below, the color of each bar is dependent on the mouse location over the circle as well as the order of the bar.
Depending on where your mouse cursor is located over the circle, the bar colors change individually.
So you can see that $node is a useful shortcut, but nothing spectacular. It would really be fantastic if each SVG object you create with RaphaelJS could fire custom events. That would allow your individual drawing elements to fire custom events, and anything on the page could listen and respond. This can be useful in many ways. For starters, it provides rich interactions between your drawings. User interactions with one vector can now notify any other vectors of the interaction on demand. This means you can programatically fire events from your drawings when certain conditions are met. Not only does this allow your drawings to notify other vectors, but anything on the page can listen in.
var paper = Raphael('rcanvas', 600, 800);
var circ = paper.circle(350, 200, 100).attr({fill: 'pink', stroke: 'black'});
// making arrays of rectangles and circles
var i=0, rectangles = [], circles = [];
for (; i<10; i++) {
rectangles.push(paper.rect(0, 40*i, 40*i, 20).attr({fill: 'red', stroke: 'yellow'}));
circles.push(paper.circle(0,0,20).hide());
}
Y.Array.each(rectangles, function(rect, index) {
var i = index + 1;
circ.$node.on('mousemove', function(evt) {
var lf = circ.attrs.cx - circ.attrs.r,
rt = 2 * circ.attrs.r + lf,
x = evt.clientX - lf,
top = circ.attrs.cy - circ.attrs.r,
btm = 2 * circ.attrs.r + top,
y = evt.clientY - top;
newWidth = (((256 * x) / (2 * circ.attrs.r))-1) * i/6,
red = (((128 * x) / (2 * circ.attrs.r))-1) * i/6,
green = 256 - ((((128 * x) / (2 * circ.attrs.r))-1) * i/6),
blue = (((128 * y) / (2 * circ.attrs.r))-1) * i/6;
// this time, not only changing the color, but also the rectangle width
rect.attr({
width: newWidth,
fill: 'rgb(' + red + ', ' + green + ', ' + blue + ')'
});
// firing custom event to notify that this rectangle width has changed
rect.fire('width-changed', {width:newWidth, source: rect, order: index});
});
// each rectangle gets a listener that fires on width-changed
rect.on('width-changed', function(evt) {
var attrs = evt.source.attrs;
// get the corresponding circle and move it to the right end of the rectangle
circles[evt.order].attr({
cx: attrs.x + attrs.width,
cy: attrs.y,
fill: 'cornflowerblue'
}).show();
});
});
Take a look at this running example here. You can also see from the snapshot below that circles are being drawn on the right ends of the rectangles. This is occuring in response to each individual rectangle’s custom event firing, being caught by a handler that moves the circle to a position relative to the current attributes of the rectangle.
This opens up some interesting possiblities for RaphaelJS within YUI3. For example, what if we could create a group of vector shapes with the group itself being the entity that fires events to the outside world? Internally, each vector drawing could communicate with its container via custom events, and the container would make decisions about what data it fires to the outside world. This opens up the idea of fully encapsulated, interactive SVG controls.
With the ascendance of HTML5 and its satellite technologies, there are so many more options other than Flash for rich interactions. Ideally, any vectored elements on the page should be fully accessible and standardized. This opens up wonderful possiblities for us to create accessible, standard web controls without resorting to Flash. SVG is an appealing option because every vector drawn on the page is backed up by a DOM node that we can modify with YUI just like any other DOM node. That’s what allows the RaphaelJS Gallery Module to augment all SVG objects being created by RaphaelJS, and that is a key to rich interaction with these elments from elsewhere on the page.
The above image shows the default bounding box handles.
To change this to the outside border of the stroke, go to the Illustrator menu and choose Preferences > General. There you check Use Preview Bounds and click OK.
Now you have the bounding box handles at the outside of the stroke, which makes it easier for precise resizing. Changing this also affects the width and height info in the option bar and the X and Y coordinates.
Another short tip is, that you can reset the bounding box via Object > Transform > Reset Bounding Box. This can be handy in situations where you end up with a bounding box that is really hard or impossible to work with.
You've created a triangle shape by first drawing square, rotate it 45° using shift, and then you remove the bottom anchor point with the Pen tool, as shown in the different steps in the 2 images below. In this situation, resetting the bounding box is really welcome.
These are small tips, and maybe you've known them already, but in case you didn't I hope you find them useful.
He owns
TJK Design and
ez-css.org. You can follow Thierry on Twitter at
@thierrykoblentz
.
clearfix and overflow:hidden may be the two most popular techniques to clear floats without structural markup.
This short article is about enhancing the first method and shedding some light on the real meaning of the second.
In everything you know about clearfix is wrong I explain the issues this method creates across browsers and I suggest to only use clearfix on elements that are not next to floats (e.g. a modal window), although as authors we still have to deal with collapsing margins. This demo page demonstrates the issue.
Margin-collapse behavior in the first two boxes shows that it is the generated (non-empty) content that keeps the bottom margin inside the box (which makes perfect sense according to spec).
So, to create the same box layout across browsers we can enhance the original method by generating content using both pseudo-classes :before and :after:
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */
Don’t simply replace your clearfix rules with these new ones in existing projects, though, as you may have already patched issues related to collapsing margins via other methods.
overflowIn most discussions about clearing floats the overflow:hidden method comes up, and it is always shot down by a "If you’re placing absolutely positioned elements inside the div, you’ll be cutting off these elements". But this is not necessary true. overflow:hidden will always clip relatively positioned elements, but it will not always hide absolutely positioned ones. This is because it all depends on the containing block:
10.1 Definition of “containing block”:
4. If the element has ‘position: absolute’, the containing block is established by the nearest ancestor with a ‘position’ of ‘absolute’, ‘relative’ or ‘fixed’, …
This means absolutely positioned elements will show outside of a box styled with overflow:hidden unless their containing block is the box itself or an element inside the said box.
You can check this demo page to see how things work.
If you can apply a width to the element containing floats, then your best option is to use:
display: inline-block; width: <any explicit value>;
Powerful gridmaker by Paul Holiday.
