効果的なプロトタイプを早く作るコツ
プロトタイプを作るのは重要ですが、作るためにおおくの時間を割きたくないところ。特に作ったあとも何回か調整をするわけですから、あまり作り込むわけにはいきません。しかし、あまりに単純な見た目だと情報共有が難しくなります。自分が使い慣れているツールを使うのは第一歩ですが、ちょっとしたことを気をつけることで、効果的なプロトタイプを早く作れるようになります。 スゴいコツだ！というのはありませんが、心がけてるだけでも少しばかり早く作れるようになりますよ。 使えるパレットを用意する よく使う UI 要素やコメントを付けるためのパーツはパレットにしておくと効率的。以前紹介した、OmniGraffle用とPowerPoint用を利用すると手軽です。 テンプレートを用意する OmniGraffle では、通常のファイルを新規作成が出来るだけでなく、テンプレートを作成することが出来ます。単位をピクセルにし、グリ
お勧めのオンラインコラボツールいろいろ : could
UXサービス お勧めのオンラインコラボツールいろいろ 基本的なコミュニケーションはメールやチャットといった文字情報のみで出来ますが、ビジュアルに関する考えを共有する場合、文字だけでは難しいです。スクリーンショットに手軽に情報を入れたり、スクリーンキャスト (動画) を作るツールが充実してきたので、ビジュアルを共有するのも難しくなくなってきました。絵を見せて意見を交換するというやりとりだけならメールでも難しくありません。しかし情報共有したり、共同作業をしたいと考えると、オンラインツールが最適です。今回はウェブサイト制作に役立つオンラインでコラボレーションを可能にするツールを幾つか紹介します。 Protonotes 以前builder.comの記事として紹介したことがありますね。ウェブサイトに JavaScript のコードを埋め込むだけで、どのサイトにも付箋を貼付けることが出来るサービス。使
Writeboard : 複数で書き込み作業ができるオンライン・ホワイトボード
Writeboard : 複数で書き込み作業ができるオンライン・ホワイトボード Writeboard 複数の人間とで書き込み作業が行なえるオンライン・ホワイトボード。 面倒な手間要らずで共同でテキストを作れる手軽さが特徴です。 利用するには、1.ボードのタイトルを決めて、2.ボードにログインするためのパスワードを設定して、3.あなたのメルアドを入力して、「I agree...」にチェックをいれて「Create...」をクリックすると、テキスト入力画面が現れるので、まずは、適当に入力し自分の名前を入れてSAVEします。 （ボードで使えるタグフォーマットは横のリンクから参考にすることができます。） すると入力したテキストと共に、このボードのリンクが表示されます。 このリンクと、最初に設定したパスワードを共同作業する仲間に教えるわけですが、右上の「Invite people」で相手のメルアドを入
SpaceSniffer : ドライブの使用状況をビジュアルで認識できるソフト
SpaceSniffer : ドライブの使用状況をビジュアルで認識できるソフト SpaceSniffer ドライブ内にある各フォルダやファイルが占める割合を、マス目の大きさに置き換えて視覚化してくれるソフト。 どのファイルがどれだけの占有率かが一目で分かる他、インターフェイスもおしゃれで使いやすいソフトです。 使用はアーカイブをダウンロードして適当な所に解凍するだけ、特にインストールなどの必要はありません。 プログラムを起動すると、まず対象のドライブの選択ダイアログが現れるので、目的のドライブをダブルクリック。 （パスを指定すればそこをルートにして作成されます。） すると、解析が始まり次々とマス目が形成されていきます。 場合によっては解析終了までしばらく時間がかかりますが、その様子を眺めていても、なかなか面白いものがあります。 なお、右上のバーで進行状況が確認できます。 各マスはデフォルト
アウトライン解析と秀丸 | Takazudo Clipping*
秀丸にはアウトライン解析機能がありまして、これがとても便利です。 アウトライン解析っていうのは、テキストファイルの中で、一定のパターンにマッチするテキストを見出しの様に扱って、そのファイルはどんな構造なんだってのを概観できる機能です。具体的にはこんな感じに使ってます。 サイトマップを考えるときなどなど 秀丸のメニューより、「その他」→「ファイルタイプ別の設定」→「アウトライン - 解析」にて、こんな感じで指定します。 これは、Lv1が、行頭の文字「.」ということで、行頭に「.」がくる行がLv1。 Lv2は、「^\t\.」にマッチする行（行頭にタブが来て、その次に「.」がくる行）、Lv3はここにタブがもう一個入った行…という風に、見出しに当たる行のパターンを指定していきます。 こうすると、タブでぺこぺこテキストを打ちながら、ここを見出しにしたいという時に、頭に「.」をつけることで、テキスト
input type=fileをCSSでクールにスタイルするサンプル:phpspot開発日誌
CSS2/DOM - Styling an input type="file" input type=fileをCSSでクールにスタイルするサンプル。 input type=fileのファイル選択ボックスをスタイルしてクロスブラウザで動作させるのはそれなりに大変そうなのですが、そのサンプルが公開されています。 綺麗にデザインされたサイトなのに、ファイルの部分だけ「参照」ってなってて普通のボタンだとかっこ悪いかもという場合にこのサンプルが使えそうです。 実際にスタイルされたボックスは以下。 ファイル名が入る部分も角丸になっていて、ボタンもなかなかクールに仕上がっています。 一応ですが覚えておくとよさそうなテクニックですね。 関連エントリ JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」 CSSでデザインされたテーブルレスでクールなフォームサンプル クリー
Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」:phpspot開発日誌
Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」 2009年04月20日- Firediff - In Case of Stairs Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」。 これは欲しかった！という機能がついにリリースされました。 インストールにはFirebug1.4が必要で、Firebug1.4a17以降が推奨されています。 Firebug1.4のダウンロードはこちらから可能です。 まず、インストールすると、次のように、FirebugにChangesタブが表示されます。 で、実際どうやって使えるか？見てみましょう。 (1) DOMインスペクタをいじった結果をDIFF たとえば、DOMインスペクタの中で、要素を編集してみます。 2009年4月16日を2009年にしてみました。 す
IEでJavaScriptを動かす際のメモリリークの調査方法:phpspot開発日誌
Screencast: JavaScript Memory Leaks in the Windows IE Browser IEでJavaScriptを動かす際のメモリリークの調査方法を紹介するスクリーンキャストが公開されており、分かりやすく調査方法について紹介されています。 3分ぐらいの動画になっています。 メモリリークの調査を行うのは、Process Explorer というソフトを使っているようです。 Process Explorer を使えば、Spy++みたいな感じで、調べたいウィンドウ部分にドラッグ＆ドロップして、該当ウィンドウのメモリサイズについて調査できるみたい。 具体的な操作方法については動画を見れば分かります。 メモリサイズがあがっていく様子を捉えた図。 これは知っておいたほうがよさそうですね。
利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」:phpspot開発日誌
Notimo Demos site 利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」。 次のリンクをクリックしてみてください。 → 通知を表示してみる ページの右上にフェードインで表示するのはなかなかインパクトが大きいですね。 スクロールしても、いやみではない感じにちゃんとついてきてくれます。 使い方もかなり簡単で、必要なJSとCSSを読み込んだ後、インスタンスをnewして show メソッドを呼び出すだけです。 showは２回連続で呼び出しても、ちゃんと１個目と区別して表示してくれます。 <script type="text/javascript"> var notimooManager = new Notimoo(); // 通知を表示 notimooManager.show({ title: 'タイトル', message: 'メッセージ
複数のテキスト入力に適したインタフェース実現用JavaScript「TextboxList」:phpspot開発日誌
TextboxList ・Devthought 複数のテキスト入力に適したインタフェース実現用Javascript「TextboxList」。 テキスト入力→改行を繰り返せば、アイテムがどんどん追加されていきます。 以下にデモを設置してみました。 ・テキストに入力して改行でアイテム追加 ・×ボタンでアイテム削除 ・バックスペースでアイテムどんどん削除 複数アイテム、例えば、アイテムにタグを追加したいというな場合に使えますね。 で、このform内容を実際にPOSTした場合、Array ( [test] => a,b,c,d ) のように、カンマ区切りのデータが得られます。 PHPなら、サーバ側で、このデータをexplodeしてリストに出来ますね。 この仕組みを利用したオートコンプリートの仕組みも同時に配布されています。 以下のようにサジェストされます。 これはなかなかクールですね。 Moot
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
「書く」ためのツール、選んでいますか？ Mac の文章作成支援ツールの魅力 | シゴタノ！
佐々木正悟さんに紹介していただいた本で、いま非常に気になっています。慢性的なストレスの感覚を、一つのことに対する注意力や集中力を高めることで取り除くマインドフルネスという認知療法について解説されています。ストレスを癒す心地よい言葉や優しいものに触れるのもいいですが、時にはストレスを生み出す根幹にさかのぼって、この敵と向かい合いたい。そう思うのです。 ▼編集後記： 思い立って Mac OS X 上のアプリケーションを開発するための言語である Objective-C と Cocoa フレームワークについて勉強を始めました。若い頃はあっというまに新しい言語に親しんでいたのに、今はなかなか古い考え方を捨てられずに苦労しています。はてさて、人様に使ってもらえるようなアプリケーションを開発できるまでにいつまでかかるのでしょうか？
サイトのレイアウトがサクサク作れるAIRアプリ「Boks」:phpspot開発日誌
Boks - A Visual Grid Editor サイトのレイアウトがサクサク作れるAIRアプリ「Boks」。 Boksを使えば、グリッド内をドラッグ＆ドロップして直感的にレイアウトを作っていけます 作ったレイアウトは「Export」で簡単にHTML+CSSに出来ます。 HTMLとCSS複数が吐き出されます 基本設定として、グリッドの設定なんかも調整できて、自由度はあります サイトのレイアウトがめんどくさいという方はこういうものでサクっと済ませちゃうというのもありですね。 関連エントリ CSSレイアウトのチート集「CSS Layout Cheats」 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 フリーで使えるCSSレイアウトのテンプレート配布サ
一日で学ぶ jQuery(ラボブログ)
スパイスラボ神部です。 OpenSocial アプリの開発を効率化するために、jOpenSocial か opensocial-jquery のどちらかを使いたいのですが、そのためにはまず jQuery について学ばないと行けないようなので、jQuery についてざっと調べてみました。 -AJAXが好きだ！ - Favorites! Write less, Do more -jQuery: The Write Less, Do More, JavaScript Library まずは公式。 リファレンス -jQuery 1.3.2 日本語リファレンス 参考になりそうなリソース いろんな記事を見ると、とりあえずは jQuery を使うと、構造化された状態でリッチアプリケーションが組めるという部分が強調されている記事が多いような気がします。「jQuery + AJAX で RIA な UI
美味しいオニオングラタンスープの作り方！:アルファルファモザイク
1.タマネギをスライス。できるだけ薄く均一に。スライサーを使ってもよし。 2.レンジでチン。 3.厚手のフライパンか鍋に油（オリーブオイルがいい。最後にバターを足す）を敷き、弱火で炒める。蓋をして、水滴を落としながらだと焦げにくい。 4.白ワインを少量注いで、鍋についた焦げを溶かしだしてから、コンソメスープを加えてしばらく煮る。 5.その間にバゲット（フランスパン）を好きな大きさに切って焼いておく。 6.耐熱皿にバターを塗り（俺は省略してるけど問題ないみたい）、バゲットを置き、4のスープをかける。 7.好みのチーズをかけ、焦げ目が付くまでオーブンで焼く。 タマネギは余分に炒めて、冷凍しておくと便利。 うちでは四〜五個ずつやってる。 ※ところで「パゲット」と「バゲット」、どっちが正しいんだっけ？
The jQuery Style - Awesome sites built with jQuery
Captcha security check jquerystyle.com is for sale Please prove you're not a robot View Price Processing
Diggの高速化技術MXHRを解説してみる - by edvakf in hatena
これのこと。 AJAXサイトをスピード化するMXHR - huixingの日記 Digg the Blog » Blog Archive » DUI.Stream and MXHR どこにも解説が無かったので、詳しく読んだ。 上の記事から引用すると、「サーバーとクライアント間で、ただひとつだけのHTTPコネクションを開く。これによりサーバーがページのどのパーツを先行して読み込むかをコントロールすることが可能になり、ユーザーにとってはページ読み込みがほぼ一瞬で済むことを意味する。」という技術。XMLHttpRequest を使って複数のデータを受信する場合に効果がある。 まずデモから デモ1は10個のテキストをダウンロードして表示するもの。 デモ2は300個の画像をダウンロードして表示するもの。 どちらも左側 (MXHR 有効) が完了した後に右側 (MXHR 無効) を開始するので驚かない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
調整さん (beta)- 簡単みんなのスケジュール調整ツール
JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」:phpspot開発日誌
apple.com風の超クール検索候補窓作成チュートリアル＆サンプル:phpspot開発日誌
自由に使えるオープンソースの日本語フォント - SourceForge.JP Magazine
商用サイトでも無料で利用できる日本語のフリーフォント集