Fine Software Writings
最近のもの 目標でなく恐怖を明確にすべき理由 (Tim Ferriss) 我々が築き、掘っている未来 (Elon Musk) 表計算ソフト誕生の話 (Dan Bricklin) Linuxの背後にある精神 (Linus Torvalds) 先延ばし魔の頭の中はどうなっているか (Tim Urban) 好きになる仕事はどうしたら見つかるのか (Scott Dinsmore) 人間に新たな感覚を作り出すことは可能か？ (David Eagleman) 人工知能が人間より高い知性を持つようになったとき何が起きるか？ (Nick Bostrom) 厄介な問題を解決したい？ ではトーストの作り方を説明してください (Tom Wujec) 子供の夢を奪う学校というシステム (Seth Godin) 彼らがいなくなってしまう前に (Jimmy Nelson) 頭良さそうにTED風プレゼンをする方法 (W
パワフル機能を備えたデータ視覚化サイト「ManyEyes」 | ライフハッカー・ジャパン
「見せる化」すべきデータを「どう見せるか」に悩んだら、まずはコレ。 データを投げると、様々な形式でカンタンに可視化(ヴィジュアライズ)してくれる無料ツールでおなじみの「ManyEyes」です。ユーザーが生データをアップロードして、グラフを作ったり統計分析を行ったり、共有することができるソーシャルグラフサービスをIBMが運営しています。 自分のデータセットだけでなく、既に「Many Eyes」サイトに登録されているデータセットを使って、インフォグラフィックの自動生成をすることができますので、ぜひ一度遊んでみてください。初めての方でも挑戦しやすいシンプルさなので、英語のWebサイトですが、ハードルは低めかと。 自分でデータをアップロードするには、ユーザ登録が必要です。「upload data set」メニューから、視覚化したい手持ちのデータをサイトのフォームに貼り付けます。ただし、TSV(タブ
Firefox に outerHTML を実装する - IT戦記
outerHTML について outerHTML とは Mozilla 系のブラウザ以外のすべてのブラウザで使える要素の HTML が文字列として取得できるプロパティです。 alert(document.body.outerHTML); // => body の HTML がすべて見える（例：<body><h1>It works!</h1></body>） というわけで 以下のコードを書いてみました。 if (!('outerHTML' in document.createElement('div'))) { HTMLElement.prototype.__defineGetter__('outerHTML', function() { return this.ownerDocument.createElement('div').appendChild(this.cloneNode(tru
要素が document につながっているかを高速に調べる方法 - IT戦記
とある要素が document につながっているかどうかを調べたい！ とりあえず、ほとんどすべてのブラウザで出来る方法としては、 parentNode で確認することができますね。 function isElementInDocument(node) { do { if (node === document) { return true; } } while (node = node.parentNode) return false; } でも 前の例だとちょっと遅いので contains や、 compareDocumentPosition を使うといいです！ コードにすると以下のような感じ function isElementInDocument(node) { if (document === node) { return true } else if (document.compa
おそらくはそれさえも平凡な日々: モダンなPerlを「読む」上で覚えておくとよい構文 第2回「リストを理解すれば配列とハッシュをより活用できる」
第1回から大分時間が空きましたが、なんと続きます。「次回は無名関数について書く」とか書いていましたが、先にリストについて言及することにします。 混同されがちですがこのエントリーでは「リスト」と「配列」を厳密に違うものとして扱います。結論を先に簡単に言ってしまうと、リストを配列に代入すれば配列になるし、リストをハッシュに代入すればハッシュになるということです。 Perlの式は値を返す サブルーチンに限らずPerlのあらゆる式は評価された値を返します。返された値は代入先があれば代入され、代入先がなければ捨てられます。 値を返さないケース ブロックは値を返しません(doを使えばブロックに値を返させることが出来ます)。例外的にuse文やpackage文は値を返しません。この二つはコンパイル時にコードを実行する前に最初に評価されるので値の返しようがありません。 さて、本題です。Perlの式の値の返し
ゲームから学ぶ「おもしろさ」と「ハマる」の秘密
シナリオ ＜ ゲームプレイ 今はゲームと一言でいってもかなり意味が広い時代です。ジャンル、機器、オフライン／オンラインなど分類すればキリがありまません。最近 Web ではソーシャルゲームという人とのコミュニケーションを軸にしたゲームが幾つか出て来ています。日本でも流行しはじめている foursquare もその部類に該当します。人気になるゲームは「おもしろい！ハマる！」という言葉で表現されることが多いですが、おもしろいゲームとは一体どういった特徴をもっているのでしょうか。なぜ人はゲームにハマるのでしょうか。 Jesse Schell 氏の著書「The Art of Game Design」によれば、素晴らしいゲームには５つの要素があると定義しています。 Surprise (驚き) 自分が予測もしていなかったことが起こる。それに対して自分の経験と直感を活かし反応しなければならない Risk
価値のあるコンテンツを提供しているかを調べる方法
以前 Google のウェブマスターツールを利用して簡単にコンテンツが最適化されているかを見る方法を紹介しました。自分のサイトがどのようなキーワードを通して露出しているのかを知るのに手軽で便利なツールですが、検索エンジン (Google) からみた視点なので、訪問者全体を表しているわけではありません。そこで Google Analytics を利用して、読者がどのコンテンツを好むかを調べることが出来ます。機能が多い Analytics ですが、今回紹介する方法はほんの数分でできます。 Analytics の右側のメニューにある「コンテンツ」から「タイトル別のコンテンツ」を選択すればどのコンテンツが見られているのかを調べることが出来ます。ディフォルトの状態だとページビューでランキングされますが、これでは単なる人気順です。読者が好むと思われるコンテンツの配信したいという目的があるわけですから、
1991年の資料から学ぶ情報デザインチェックリスト
Web デザインをきっかけに知ることになった方も多いと思いますが、IA (Information Architecture) の歴史は長く 30,40 年ほど遡ることが出来ます。IA と明確に書かれていない書籍でも IA に関わる資料が昔からたくさんあるわけですが、当時はどのようなことが書かれていたのでしょうか。今と変わらないもの、そして今とは違う事柄はあるのでしょうか。Volkside の「17 guidelines for better information architecture…from 1991」という記事で Kent L. Norman が執筆した「The Psychology of Menu Selection: Designing Cognitive Control at the Human/Computer Interface」という書籍が紹介されています。 1991
Google Font API で手軽に始めるフォント遊び
昨日開催された WDE ex -vol9 (Twitter TL) の懇親会で「Google がフォントのホスティングやれば良いじゃないか」という話題が出ていたのですが、朝起きたら Google Font API として現実的なものとなっていました。Web Font をホスティングしているサービスは海外で既に幾つかありますが、ほとんどが JavaScript のコードを貼付ける方法が採用されており、中には body 内に記述しなければならないものもあり、エレガントな方法とはいえませんでした。 今回公開された Google の API は JavaScript を使うのではなく、CSS をリンクするだけ。使いたいフォントをディレクトリから選び、リンクした CSS ファイルに変数としてフォント名を記述するだけになります。シンプルかつ簡単です。 <link rel="stylesheet" ty
使いやすいさと認知負荷のバランス感覚
私たちが「使いやすい、直感的」だといっている機器やソフトウェアでも、脳や身体は何かしらの処理を行っています。自分が使いやすいと思っていることも、人にとってはそうではない場合があります。これはリテラシーの高い／低いということで片付けることが出来ることでしょうか。デザインを考えるにおいて「簡単に（気軽に）使ってもらう」ということはひとつの課題であると同時に目標です。 インストラクショナルデザインは、人がいかに学習するのかを研究しデザインする分野です。Wikipedia では「より良い学習の環境を総合的にデザイン」と書かれているので、教育分野のデザインと考える方も少なくありません。20世紀後半から今世紀になると人の学習の仕方だけでなく、脳がどのように情報を処理するのかにも注目が集まりはじめます。こうした背景から認知負荷理論 (Cognitive Load Theory) が登場します。 人の認知
自社にUX文化を広めるコツ
UX や HCD の勉強をしてみたり、ワークショップに参加しても、会社内での理解を獲得するのが難しい場合があります。装飾より広い範囲でデザインを考えことは時間 (コスト) が必要だけでなく、同僚のデザインプロセスの参加は不可欠です。しかし、成果物として見え難いプロセスですし、「自分はデザイナーではない」と最初から拒否されることもあります。外で入手した様々なデザインアプローチをひとりでいきなり始めても何も変わりませんし負担が大きくなるだけです。UX を社内の文化として取り入れるよう働きかけ、デザインがしやすい環境作りがまず必要になります。 つまり、勉強の次は啓蒙活動です。 社内勉強会をしているところであれば、そこで外で学んできた知識を共有することはできると思います。やっていない企業でも忙しいスケジュールの中から2,3時間ほど共有する時間を絞り出すことは出来るはずです。では、そこで何を話せば良
OmniGraffleを便利に使うあれこれ
制作のためにいろいろなソフトを使っていますが、数年経っても相変わらず使っているもののひとつに OmniGraffle があります。ダイアグラムやワイヤーフレームを手軽に作れますが、多機能なので奥が深いソフトのひとつ。以前もOmniGraffleを使ったテンプレート作りで便利な使い方を幾つか紹介しましたが、今回も最近（やっと）見つけたものも含めて6つ紹介します。 下準備を忘れずに Webサイトのワイヤーフレームを作るのであれば新規文書をそのまま使わず、キャンバスのサイズをきちんと調整しましょう。ディフォルトではルーラの単位がインチになっている場合もあるので、まずはピクセルに切り替えます。グリッドの間隔もインチではなくピクセルにしておくと設計がしやすくなります。OmniGraffleでは、グリッドをオブジェクトに手前に表示させることが出来るので、厳密な設計を好む方は手前に表示したほうが作りやす
最近Geek Outしてる？
「Geek」はオタクとか熱中している人という意味ですが、「Geek out」は聞いたことがないという人もいるのではないでしょうか。モノを作ったり何かを伝えたいと思っている人にとって（良い意味でもそうでない意味でも）覚えておきたいフレーズだと思います。Urban Dictionaryには以下のように書かれています。 The act of becoming emotionally and physically aroused by the sight or the thought of a technicality of a certain topic of major interest. 自分が興味をもっている何かに対して興奮したりワクワクしたことはありますか？「Helvetica」のようなドキュメンタリー映画をみて熱くなったり、CSS3の最新情報をみつけて仕事を放り出して早速試してみたり、
効率よくタグ付けをするツールとサービス
「コンテンツを繋ぎ合わせる理由とメリット」で、コンテンツにメタデータを付随することの重要性を解説しました。発行日・更新日・筆者といったデータは CMS から簡単に引き出せますが、コンテンツの文脈を示すタグ (キーワード) をどう記入するかが難しいところです。執筆したコンテンツを全体から捉え、短くて明確なキーワードを考えるのはなかなか難しい作業です。個人サイトであればまだいいですが、一日に複数のコンテンツを配信しなければならない環境だとひとつひとつタグを考える時間はないでしょう。複数人の人がタグの記述に携われば言葉のブレも発生するかもしれません。 そこでコンテンツを解析し、的確なキーワードを提示するサービスの利用が欠かせなくなります。SmartLogic や Nstein が解析・分析を行っているサービスですが、いずれも大企業向けのソリューションしか提供しておらず、誰でも利用できるというもの
ブレないワイヤーフレームを作るコツ
すべてのワイヤーフレームは平等ではない 「ワイヤーフレーム制作の５つのアプローチ」で一見同じようにみえるワイヤーフレームにはそれぞれ特徴があり、目的に応じて使い分けた方が良いという話をしました。違うアプローチが幾つもあることは分かりますが、ではどのようなときにどれを使えば良いのでしょうか。選択するためのチェックポイントは４つあります。 ワイヤーフレームを作る目的はなにか 作ることで何を達成させたいのかを明確にします 制作プロセスのどのフェイズで用いるのか どのタイミングで作るかによってワイヤーフレームが果たさなければならない役割は変わります 誰がワイヤーフレームを見るのか クライアントなのか、デザイナーなのか、開発者なのかで異なりますし、彼等のプロジェクトに対する理解度にもよります 誰がワイヤーフレームを活用するのか ワイヤーフレームを使ってデザインをするのか、開発を進めるのか、それとも特
01MATHERY
Two young designers-One idea a day 100 ideas. from: 11.06.10 'till: 05.10.10 see also: www.mathery.it www.02mathery.com
Macで設定とかインストールいらずで静的コンテンツ用のサーバーを立ち上げる方法 - Webtech Walker
Macで簡単に静的コンテンツを配信するサーバーを立ち上げる方法を紹介します。 Macには最初からApacheが入っているのでこれを有効にすればいいんですけど、バーチャルホストの設定とかが面倒だし、XAMPPみたいのはインストールして設定するのが面倒です。そこでpythonのSimpleHTTPServerというモジュールを使います。これは最初からMacにインストールされているので特にインストールなどは必要ありません（たぶん10.5からはデフォルトで入ってる）。 まずターミナル.appを開きます。次にドキュメントルートに設定したいディレクトリに移動します。以下のようにcdコマンドで移動できます。 $ cd /Users/hokamura/Sites パスとかよくわかんない人はFinderでフォルダをターミナルにドラッグアンドドロップすればそのディレクトリのパスがコピーされます。 cdしたら以
i-sourceview
About iPhoneやiPadなどでHTMLのソースを見るためのサービスです。HTMLのソースを取得するのにJSで取得する方法とServer側からHTTPリクエストで取得するする二つの方法を用意しています。 JS版 JSのdocument.documentElement.outerHTMLでHTMLを取得する JSでDOMが書き換えた後のソースが取れる XML宣言やDOCTYPE宣言が取れない 認証がかかっているページも見れる JS版Bookmarklet Server版 Server側からHTTP RequestでHTMLを取得する JSでDOMが書き換えられていない元のソースが取れる XML宣言やDOCTYPE宣言なども取れる 認証がかかっているページを取れない Server版Bookmarklet Author @hokaccha github github: i-sourcvi
jQuery 1.4.3 Offline Learning Kit
Welcome To AddyOsmani.com ” Hey guys. My name is Addy and I'm a passionate Web Developer. On my site you can find useful tutorials on jQuery, JavaScript and User Interface design. Who Am I? I'm a passionate 24 year old Irish Web Designer & Developer and (currently) a Project Manager who loves creating exciting new user interfaces and writing about topics that can help other web designers out there
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - hokaccha/svg2raphael: svg2raphael web site