iOSライクな惰性スクロールをデスクトップでも·Overscroll MOONGIFT
OverscrollはデスクトップのWebブラウザでiOSに似たスクロールを可能にするライブラリです。 iOSが直感的なデバイスである特徴の一つに惰性のスクロールがあります。指で弾くとその流れでスクロールが続く機能です。あの直感的スクロールをjQueryで再現したのがOverscrollです。 デモはiPhone風のデバイスになります。 クリックして滑らせると惰性でスクロールしていきます。 デモ動画です。スペックが高くないのでうまく再現できていませんので自分で試す事をお勧めします。 画面をドラッグしてスクロールさせるUIとして思いつくのはGoogleマップでしょう。他にも広い範囲のデータをさまよいながら見ていくようなUIとして使ってみると面白いかも知れません。より直感的で面白い効果が臨めそうです。すべりの具合を設定で変更したり、スクロール時のアクションをキャッチすることもできます。 Ove
デスクトップ用Webブラウザでもスマートフォンライクにタッチ操作を可能にする·Touché MOONGIFT
Touchéはデスクトップブラウザでタッチ、アンタッチ、移動のアクションを使えるようにするJavaScriptライブラリです。 Touchéはマウスイベントをタッチ操作として認識できるようにするJavaScriptです。デスクトップ向けWebブラウザでもスマートフォン風な操作ができるようになります。 画面のどこかをクリックするとタッチイベントとして認識されます。 認識できるのはタッチ（クリック）した時、タッチし終わった時そしてマウスを動かしている時になります。それぞれコールバック関数を指定しておいて何らかのアクションにつなげられます。 マウスムーブ時の認識 単純なタッチの他に、Ctrlキー、Altキー、コマンド/Windowsキーを押しながらタッチしたかどうかの認識もできます。ウィンドウ上のX/Y座標に加えて、画面上のX/Y座標も受け取れるようになっています。 指定できるイベントリスナーの
指先で描いたポイントをスムーズにつなぎ合わせる描画ライブラリ·Smooth line UIView MOONGIFT
Smooth line UIViewは指先で描いたラインをスムーズに描画するイラスト向けiPad用ライブラリ。 Smooth line UIViewはiPad用のフリーウェア（ソースコードは公開されている）。個人的に好きなソフトウェアの一つにSkitchがある。画像やスクリーンショットを読み込んで、その上にイラストを描けるソフトウェアなのだが、線を引いた後に自動的にスムースなラインに変換してくれるのだ。 こんな感じに引いたライン（灰色の部分） マウスで適当に線を引いたとしてもスムーズにしてくれるので、見栄えがいいイラストになる。SkitchはMac OSX用のソフトウェアだが、同じような機能をiPadで実現させたモックアプリがSmooth line UIViewだ、 Smooth line UIViewもiPad上で適当に引いたラインをスムーズに描画してくれる。最初に引いたラインにはポイン
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
クライアントサイドだけで作るスマートフォン最適化サイト·mobilize.js MOONGIFT
Mobilize.jsはデスクトップ向けのHTMLをJavaScriptで組み替えてスマートフォンに最適化された表示にするJavaScriptライブラリ。 Mobilize.jsはHTML5/JavaScript製のフリーウェア（オープンソースとなっているがライセンスはなし。ソースコードは公開されている）。スマートフォンのシェアが増えるに従って、従来のWebサイトにおけるスマートフォン最適化サイトのニーズが高まっている。iPhoneやAndroidからのアクセスに対して最適化されたUIを提供することでユーザビリティを高めるのだ。 最適化表示 幾つかのやり方があるが、一つはサーバ内でアクセスを判別してビューを切り替えたり、サブドメインを分けてしまうと言った方法がある。今回紹介するのはどちらでもない。なんとクライアントサイドだけで行ってしまうのだ。 Mobilize.jsはjQuery Mob
Apple公式のやり方を真似る。確認を必要とするボタン操作に使える·MAConfirmButton MOONGIFT
MAConfirmButtonはAppleのApp Storeアプリなどで使われている確認がある購入ボタンを再現するUIコンポーネント。 MAConfirmButtonはiOS用のオープンソース・ソフトウェア。iOSアプリ開発においてApple提供の公式アプリのUIを真似るのはとても良いことだ。公式アプリは利用者が多いので、他のアプリで同様の操作を提供してもすぐに使いこなしてくれるはずだ。 App Storeでよく見るボタン さらにAppleの手法はデザインとユーザビリティを考えた、とてもユニークな作りになっている。その一つ、アプリや音楽購入時のボタン操作を再現するのがMAConfirmButtonだ。 MAConfirmButtonはApp Storeアプリ等で使われている、購入時の確認ボタンを再現するUIコンポーネントだ。ボタンを一回タップすると別なメッセージを出し、さらにクリックする
Webアプリケーションの開発に。面白いコンポーネントが多数揃ったUIライブラリ·Ninja UI MOONGIFT
Ninja UIはHTMLを使わずにJavaScriptで画面を描画していくUIコンポーネント。 Ninja UIはjQuery/JavaScript製のオープンソース・ソフトウェア。思うにWebサイトというのは表現力が高く、かつ自由度が高すぎるのだ。そのため見栄えにこりだすと収集がつかなくなる。またデザインセンスがないと格好いいサイトが作れない。 ボタンやアイコン アイディアがどれだけ良く、技術力があっても見栄えがぱっとしないサイトは受け入れられない。もうHTMLは書かず、JavaScriptで組んでしまうのはどうだろう。それを可能にするのがNinja UIだ。 Ninja UIはjQuery Webjutsu（Web術？）を掲げているライブラリで、枠組みだけHTML5で組み、コンポーネントの配置は全てJavaScriptだけで記述するライブラリだ。ボタンやドロワー、アイコン、ポップアッ
MOONGIFT Androidアプリ開発のお供に「Android UI Utils」
Android UI UtilsはAndroid用のオープンソース・ソフトウェア。AndroidはGoogleという技術先行の企業がメインで開発しているだけに、あまりアプリケーションのデザイン部分に手が回っていない印象を受ける。開発者はよくとも、デザイナーにとっては問題だろう。 Pencil用の素材 とは言えAndroid自体がオープンソースということもあって、周辺のオープンソース・ソフトウェアも増えつつある。もしあなたがAndroidアプリのモックなどを作成するならばAndroid UI Utilsを試してみるといいだろう。 Android UI Utilsは幾つかのソフトウェアがセットになっている。まずFirefoxのプロトタイプ作成ツールであるPencil用のソフトウェアがある。これをインポートすると、Androidに適したUIコンポーネントが利用できるようになる。 HTML5で画像
ユーザインターフェースデザインのための情報源 - ネタフル
ウェブデザインをカテゴリ毎にコレクションしているサイトとして紹介した「MephoBox」の他、数多くのユーザインターフェースデザインのための情報源が紹介されています。 ライブラリ、ブログ、インスピレーション、良いインターフェースのウェブアプリケーション、フォローすべきツイッターアカウントなどに分かれています。 分かりやすいところでインターフェースデザインのライブラリサイトをご紹介しておきますね。 ▼MephoBox ▼UI-patterns.com ▼Yahoo! Design Pattern Library ▼Pattern Tap ▼UI Pattern Factory （via swissmiss）
UIプロトタイプ：autocomplete (jQuery plug-in jSuggest)
昨日に引き続いて、今日も作成中の Google App Engine アプリ用のUI部品の作成。HTMLの一部に記述された（もしくは別途JSONで取得した）ワード・リストの入力を autocomplete を使って簡単にしようという試み（Google Suggestのようにダイナミックにリストを取得する必要はない）。 そこで、まずは既存のライブラリ・プラグインの調査から。必要とする人も多いようで、少し調べただけで２０個ぐらい見つかる。デモを見て５つに絞ってからそれぞれのソースコードを解析。例によってどうしようもない品質のコードもあるので、結局のところたどり着いたのは、比較的コードがきれいなこの二つ。 jQuery Autocomplete Mod JQuery Plugins by Dylan Verheul - autocomplete どちらかをそのまま使っても良かったのだが、どちらも
ユーザビリティ向上に。デフォルト値を薄い文字で表示する·jQuery Watermark MOONGIFT
jQuery WatermarkはjQuery用のオープンソース・ソフトウェア。最近のWebサイトでは登録フォームにどういった文字を入力すべきかを提示するケースが多くなっている。例えばユーザIDと書かれていれば何を入力すれば良いか分かりやすい。他にも検索ボックスにSearch...と書かれているのもよく見かける。 予め文字を入力してユーザビリティを向上する そんなテキスト入力を補助する効果を実現するのがjQuery Watermarkだ。名前の通りjQueryプラグインなので、jQueryを使った開発の際にはぜひ使ってみたいライブラリだ。テキストボックスの他、テキストエリアに対しても適用できる。 テキストボックスに対して利用する他、パスワードボックスでも通常のテキストを表示しつつマウスがフォーカスしたら内容を消すこともできる。さらにSafari用の検索ボックスへのデフォルト表示にも対応して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
デジタルペンLivescribeがEvernoteに対応)
http://www.apptoiphone.com/2011/05/blog-post.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+apptoiphone%2FVJZQ+%28apptoi%29
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
