RIAトピックス
リッチクライアント/RIAを主テーマに取り扱います。Flex、Ajax、AIR、Silverlight、JavaFX、etc。
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

要素が document につながっているかを高速に調べる方法
要素が document につながっているかを高速に調べる方法 - IT戦記
http://d.hatena.ne.jp/amachang/20100624/1277359266

Javascriptで要素がdocumentに繋がっているかを調べる場合、parentNodeを辿って比較する方法が最初に浮かびます。
が、それでは速度に難があるため、「compareDocumentPosition」と「contains」を使用すると高速に調べることができるようです。

「compareDocumentPosition」はそのままズバリ繋がっているかを調べる事が出来ます。
実装されていない場合は、IE由来の関数「contains」を使用する事で同様の結果を得られるようです。

Javascriptは速度が問題になる事が多いので、よくある処理とは言えませんが覚えておくとよいと思います。



compareDocumentPosition 【nazonoDiaryより】
http://d.hatena.ne.jp/nazoking/20070118/1169104142

K.Y
スポンサーサイト

テーマ:システム開発 - ジャンル:コンピュータ

マイナーだけどオススメのjQueryプラグイン12選
【3つ以上知ってたら】マイナーだけどオススメのjQueryプラグイン12選【情報強者】
http://smkn.xsrv.jp/blog/2009/10/very-unique-jquery-plugin-12/

jQueryのプラグインは当ブログでも数多く紹介している通り山のようにありますが、その中でもあまり紹介されていないマイナーな物をよりすぐった紹介です。
やはりマイナーなだけあってアクが強いモノが多いですが、用途があってさえいれば機能自体はしっかりしていますので、使用したい機能がありましたら試してみてはいかがでしょうか?

個人的には4つ目に紹介されている「Simple Page Peel Effect」の右上がペロってめくれる表現が印象に残りました。
使い方は難しいですが、インパクトはかなり強いと思います。

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

html5 ざっくりメモ
html5 ざっくりメモ 【CSS HappyLifeより】
http://css-happylife.com/archives/2010/0327_1056.php

HTML5について様々な記事がありますが、良く考えてみると実際に関係ある部分なんて言うのは一部分です。

そんな訳で今回紹介する記事は、実際に使用する頻度が高いと思われる要素を中心にCSSと絡ませながら紹介しています。

最低この位の知識は持っているべきと言う指針にもなりますので、HTML5について自信のない方は目を通しておくと良いかと思います。



RIAトピックス HTML5 videoでニコニコ動画風プレーヤーを作ろう
http://mfria.blog106.fc2.com/blog-entry-1838.html

RIAトピックス HTML5の可能性を肌で感じる事ができるWebサイト
http://mfria.blog106.fc2.com/blog-entry-1793.html

RIAトピックス HTML5であそんでみたクエスト
http://mfria.blog106.fc2.com/blog-entry-1790.html

いま,見ておきたいウェブサイト 【gihyo.jpより】
http://gihyo.jp/design/serial/01/website-pickup/0016

RIAトピックス HTML5 基礎知識
http://mfria.blog106.fc2.com/blog-entry-1751.html

HTML5.JP - 次世代HTML標準 HTML5情報サイト
http://www.html5.jp/

HTMLで図まで描ける!進化した「HTML5」ってどんなもの? 【はてなブックマークニュースより】
http://b.hatena.ne.jp/articles/201002/795

Flashだとここまでできる! HTML5とFlashの機能比較 【ClockMaker Blogより】
http://clockmaker.jp/blog/2010/02/flash-vs-html5/

HTML5サンプル集 【(株)あゆた へようこそより】
http://ayuta.co.jp/html5-samples/

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

団塊~シニア層向けのWeb設計 やっちゃいけない10のUI
キャズムを超えろ! 【キャズムを超えろ!より】
http://d.hatena.ne.jp/wa-ren/20061117/

これからどんどん増えてくるのが確定しているシニア層向けのユーザビリティの記事です。
2006-11-17と大変古い記事ですが、ターゲットが完全な盲点だったので紹介。

内容がショッキングなので、まずは題目をどうぞ。
・ID,ニックネームを考えさせてはいけない。半角英字開始限定は論外
・パスワードに英数混在や5文字以上を強制すると問い合わせ激増,アクティブ会員率減
・チェックボックスで項目選び、別のボタンで操作を決定するUIはわかりにくい
・フォントサイズはブラウザ設定で可変できないとだめ
・アイコンは理解されない 使う場合は添え書きを
・ブラウザにてリンクを新しいウィンドゥで開くのはNG
・1つの画面に多数の機能を並べてはいけない
・AJAXやFlashで可能になったからといってドラッグ&ドロップは使うな
・ダブルクリックされるとまずいボタンはダブルクリック禁止にせよ
・「かんたんモード」を設定しても使わない

どうでしょうか?
あなたが作成したシステムではこれらの事を意識しているでしょうか?
題目を見て納得ができなくても、元記事の詳細を見ることで納得ができるはずです。

ただ、パスワードの件だけは納得はできてもセキュリティにうるさい現在では実現は難しいですね。
別の手段を取る必要があるでしょう。
これから先のシステム開発に興味のある方は必見です。

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

HTML5 videoでニコニコ動画風プレーヤーを作ろう
HTML5 videoでニコニコ動画風プレーヤーを作ろう 【ASCII.jpより】
http://tech.ascii.jp/elem/000/000/521/521366/

勉強するモチベーションを保つために必要なこと。
それは楽しいと言うこと。

ということで、ニコニコ動画風プレイヤーをHTML5のvideoタグを使用して作ってしまおうという記事がASCII.jpに挙がっていたので紹介します。

実装方法としては、videoタグで動画を表示しjavascriptでコメントを流しています。
コメントの内容は、jQueryを使用してJSON形式で書いたデータを読み込みます。

実際にvideoタグを使用して何かを作った方は少ないと思いますので、実際にサンプルを作ってみると楽しいですよ。
又、上記したようにjQueryも使用していますので、こちらを勉強中の方も是非。

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

HTML5のポテンシャルを感じられる48のサンプルサイト
HTML5のポテンシャルを感じられる48のサンプルサイト 【phpspot開発日誌より】
http://phpspot.org/blog/archives/2010/06/html5_3.html

当サイトでもいくつか紹介しているものもありますが、HTML5の凄さを感じられるサンプルサイトです。

百聞は一見にしかずという言葉の意味を身をもって感じる事ができるので、いくつか覗いてみると楽しいと思います。



RIAトピックス HTML5の可能性を肌で感じる事ができるWebサイト
http://mfria.blog106.fc2.com/blog-entry-1793.html

RIAトピックス HTML5であそんでみたクエスト
http://mfria.blog106.fc2.com/blog-entry-1790.html

いま,見ておきたいウェブサイト 【gihyo.jpより】
http://gihyo.jp/design/serial/01/website-pickup/0016

RIAトピックス HTML5 基礎知識
http://mfria.blog106.fc2.com/blog-entry-1751.html

HTML5.JP - 次世代HTML標準 HTML5情報サイト
http://www.html5.jp/

HTMLで図まで描ける!進化した「HTML5」ってどんなもの? 【はてなブックマークニュースより】
http://b.hatena.ne.jp/articles/201002/795

Flashだとここまでできる! HTML5とFlashの機能比較 【ClockMaker Blogより】
http://clockmaker.jp/blog/2010/02/flash-vs-html5/

HTML5サンプル集 【(株)あゆた へようこそより】
http://ayuta.co.jp/html5-samples/

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

HTML5+JavaScriptでFlashコンテンツを再現する「Smokescreen」
HTML5+JavaScriptでFlashコンテンツを再現する「Smokescreen」 【マイコミジャーナルより】
http://journal.mycom.co.jp/news/2010/06/02/088/index.html

Apple社がiPhone、iPadでFlashをサポートいないのは周知の事実です。
しかし、Flashは現在のWebになくてはならないものになっています。
Apple社の動向に関わらずいずれはHTML5に置き換わるのでしょうが、まだしばらくはFlashの重要性は揺るがないでしょう。
そんな、FlashをHTML5とJavaScriptを使用して再現するのが、今回記事になっている「Smokescreen」です。

本体はJavascriptなのでWebページで読み込むだけでOKなので、Web製作者、ユーザ共に何も特別な操作がいらない所もポイントが高いです。
しかし、まだサンプルのみで実際に私達が使用できるものはないようですが、近いうちに登場予定らしいので注目していきたいですね。



FlashからHTML5/JavaScriptへ「Smokescreen」 【MOONGIFTより】
http://www.moongift.jp/2010/05/smokescreen/

FlashをHTML5に自動変換するSmokescreen、iPadでも動作 【Engadget Japaneseより】
http://japanese.engadget.com/2010/05/31/flash-html5-smokescreen-ipad/

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

「ログインフォーム」は慣れが大事
ログイン画面はよくある画面の一つです。
よくある画面というのは、意識しないでいても身体が操作を覚えて勝手に動いてくれるものです。

人によって操作は異なるでしょうが、私の場合はこんな感じです。

 1.ユーザIDを入力
 2.TABキー(PASSWORD欄にフォーカス移動)
 3.PASSWORDを入力
 4.エンターキー押下


意識しないで入力しているため、よくあるのが「2のTABキーでチェックボックスやボタンにフォーカス移動」、「4のエンターキーでSubmitされない」という事。
自分がよく見ていないのが悪いのですが、少しイライラしてしまいます。
又、ログイン画面はPASSWORDを入れなおす必要がある場合が多いので、クリアされていて余計にイライラが募ります。
こんな経験、みなさんもありますよね?

っと言う事で、今回紹介する記事です。

「ログインフォーム」は慣れが大事 【ユーザビリティ実践メモより】
http://www.bebit.co.jp/memo/2010/05/post_183.html

やはり、慣れを意識することが大事ですね。
いくつかのログイン画面のパターンを例として説明した結果、下記のようにまとめられています。
「どんなユーザが使うのか」を想定することが重要

たかがログイン画面、されどログイン画面。
少しのストレスですが、これが大きな差に繋がります。
こういう小さな所でマイナスされないように、意識していきたいですね。



タブキー利用にも対応するフォームのちょっとした改善【ユーザビリティ実践メモより】
http://www.bebit.co.jp/memo/2010/05/post_181.html

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

HTML5の最小構成サンプルとその説明
【レビュー】HTML5の最小構成サンプルとその説明 【マイコミジャーナルより】
http://journal.mycom.co.jp/articles/2010/05/26/minimal-html5/index.html

HTML言語の最新バージョンとして、現在標準化作業が進められている「HTML5」。
その最小構成のサンプルと説明した記事がありましたので紹介致します。
説明は元記事を見ていただくとして、サンプルは以下の通り。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- page content -->
  </body>
</html>
従来のHTML4と比較すると細かい部分が変わっているので、説明を読みつつ理解するのがよいと思います。



RIAトピックス HTML5の可能性を肌で感じる事ができるWebサイト
http://mfria.blog106.fc2.com/blog-entry-1793.html

RIAトピックス HTML5であそんでみたクエスト
http://mfria.blog106.fc2.com/blog-entry-1790.html

いま,見ておきたいウェブサイト 【gihyo.jpより】
http://gihyo.jp/design/serial/01/website-pickup/0016

RIAトピックス HTML5 基礎知識
http://mfria.blog106.fc2.com/blog-entry-1751.html

HTML5.JP - 次世代HTML標準 HTML5情報サイト
http://www.html5.jp/

HTMLで図まで描ける!進化した「HTML5」ってどんなもの? 【はてなブックマークニュースより】
http://b.hatena.ne.jp/articles/201002/795

Flashだとここまでできる! HTML5とFlashの機能比較 【ClockMaker Blogより】
http://clockmaker.jp/blog/2010/02/flash-vs-html5/

HTML5サンプル集 【(株)あゆた へようこそより】
http://ayuta.co.jp/html5-samples/

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

オーバーレイ表示を行う際の注意点
オーバーレイ表示を行う際の注意点 【ユーザビリティ実践メモより】
http://www.bebit.co.jp/memo/2010/05/post_179.html

最近、画像であったり動画をオーバレイ表示するWebサイトが増えてきました。
ページを遷移せずに詳細情報を得ることができるため、非常に便利な方法だと言えると思います。
しかし、モーダルダイアログ形式(アラートの様に閉じるまで元画面の操作が不能)で表示する場合には、戻るボタンを押すユーザが多いと言う大きなリスクが存在しています。

特に、以下のような状況の場合に戻るボタンを押すことが多かったようです。
1. オーバーレイで表示される領域が、画面の大部分を占める。
2. 背景の透明度が十分ではない。
3. 「閉じる」ボタンが明示的ではない。

ユーザは戻るボタンを押下する事で意図しないページに遷移し、ストレスを感じます。

非常に便利なオーバレイ表示ですが、上記のような点に気を付けることで更なるユーザビリティの向上を目指していきたいですね。

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

copyright © 2005 RIAトピックス all rights reserved.
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。