いまさら聞けないUX（User eXperience：ユーザー体験）の歴史、現状、今後はどうなる？
いまさら聞けないUX（User eXperience：ユーザー体験）の歴史、現状、今後はどうなる？：安藤幸央のランダウン（69）（1/2 ページ） 現在に至るまで「UX」的なものがどのように発展してきたのかを振り返り、今後どうなっていくのかを考えます。あらためてユーザビリティやUXを考えるヒントにしてください。 少し前になりますが、著名Webサービスについて、登場から現在まで、Webデザインの変化を振り返り、そのサービスの体験が変化していく様子、洗練されていく様子を時系列に従って見る「UX Timeline」というサイトが話題になりました。 音楽検索サービス「Shazam」、メーリングリストサービス「Mailchimp」、動画共有サービス「Vimeo」、ファイル共有サービス「Dropbox」、定額制音楽視聴サービス「Spotify」、車のシェアリングサービス「Uber」、宿泊に関するシェア
JavaScriptでHTMLをダイナミックに書き換える 後編
まとめて更新を行う（DocumentFragment） これまで、HTMLの要素をDOMを使って自由に操る方法を学んできました。基本はすでに身についていますので、あとは応用で、いろいろなWebアプリケーションを作ることができるはずです。しかし、Webアプリケーションを作り込むうえで、パフォーマンスという問題から逃れることはできません。 サーバー上で動作するアプリケーションの場合は、サーバーの負荷を軽減するためにさまざまな工夫をしますが、JavaScriptといえども例外ではありません。近年のWebアプリケーションにおいては、ブラウザ側で実行されるJavaScriptの役割が重要になり、複雑な処理が求められるようになってきました。JavaScriptの書き方によって、表示速度が大きく変わってしまうことがあります。この処理時間とは、ブラウザのレンダリング時間のことです。この点を考慮に入れてJa
10分でわかるSVG 基礎編
基本図形の描画方法 ■ SVGの基本図形 ここからはSVGで図形を描画する方法を具体的に説明していきます。SVGで描画できる図形は以下の9種類で、それぞれ固有のタグがあります。 四角形（rectタグ） 円（circleタグ） 楕円（ellipseタグ） 直線（lineタグ） 折れ線（polylineタグ） 多角形（polygonタグ） パス（pathタグ） 画像（imageタグ） 文字列（textタグ） 比較的複雑な指定が必要なパス、画像、文字列は個別に取り上げることにして、その他の基本図形の描画方法を解説します。これは文章で説明するよりも実際のコード例を見た方が早いでしょう。 ※ 簡略化のため、今後も含めてコード例はsvgタグ内部の記述のみを示します。 rectタグは四角形を描画するタグです。x、y、width、height属性でそれぞれ左上座標と幅、高さを定義します。さらに省略可能なr
「Vagrant」って何ぞ？（・o・）
「Vagrant」って何ぞ？（・o・）：Vagrant開発者 Mitchell Hashimoto氏に聞いた 仮想の開発環境作成ツールとして人気が高まっている「Vagrant（ベイグラント）」。その開発者であるMitchell Hashimoto（ミッチェル ハシモト）氏が来日するとの情報を聞き、2013年7月12日、VOYAGE GROUPで行われたミートアップに駆け付けた。 「Vagrant」とは Vagrantとは、違う環境に移行可能な開発環境を簡単に構築・管理し、配布することができる開発環境作成ツール。「ほんの数行書くだけで開発用の仮想マシンを構築できる」という優れものだ。 Vagrantのビジョンは、「開発者とシステム管理者にとって最高の『開発フロー』を提供すること」。Vagrantをダウンロードして「vagrant up」と入力し、実行するだけでそれが可能となる。 システム管理
impress.jsでド派手なスライドをつくろうぜ！
“HTML5アプリ作ろうぜ！”連載がスタートしました！ デジタルハリウッドの現役アプリクリクリエイター専攻講師が、最近はやりの「HTML5・JavaScriptライブラリ・CSS3・API」の紹介、またそれらを組み合わせた「sampleアプリケーションの紹介と解説」を厳選し執筆していきます。 最近、セミナーでこの「impress.js」を利用する機会が多いのですが、その際に参加者から評判が良いので、まずはこれを紹介します。 impress.jsとは？ CSS3を活用したオープンソース（ライセンスMIT）のプレゼンテーションJavaScriptライブラリです。 対象ブラウザ Safariブラウザが現状では最もスムーズに動作します。一応、Chromeも推奨ブラウザです。 特徴 【1】ド派手なスライド動作 最大の特徴は派手でイケイケなスライド。始めてみた人は必ず見入ること間違いありません。シンプ
画像スライドショーでjQueryプラグインの基本を学ぶ
画像スライドショーでjQueryプラグインの基本を学ぶ：jQuery×HTML5×CSS3を真面目に勉強（2）（1/4 ページ） はじめに この連載で取り扱っているjQueryはJavaScriptのライブラリエンジンです。 世の中には実にさまざまなプログラミング言語があります。昨今主流となっているものの大半は、オブジェクト指向プログラミング言語と呼ばれているものです。 代表的な例を挙げると、Java、C#、Ruby、Python、Objective-Cといったところでしょう。これらの言語はクラスベースというカテゴリに属しています。クラスベースはアプリケーションにおけるさまざまな機能をクラスと呼ばれる単位でキッチリと分割することで、プログラム全体をキレイに整理整頓できるという特徴を持っています。大規模な開発になるほど、この特徴が威力を発揮するため、先に挙げたプログラミング言語が積極的に採用
Chrome拡張機能にpush通知をしよう
Chrome拡張機能にpush通知をしよう：Google Cloud Messaging for Chrome入門(1)（1/2 ページ） 簡単なGoogle Chrome拡張機能を作成し、それにGoogle Cloud Messaging for Chrome機能を追加しましょう。 Google Cloud Messaging for Chromeとは何か 2013年5月より、Google Cloud Messaging for Chromeのサービスが開始されました。 Google Cloud Messaging for Chrome - Google Chrome chrome.pushMessaging - Google Chrome API Reference for GCM service - Google Chrome Google Cloud Messaging (GCM)
Edge Animateでスライドショーを作ってみよう
Edge Animateでスライドショーを作ってみよう：無料でCreative Cloudを使い倒せ（4）（1/3 ページ） 人の目を引く魅力的な動くサイトが増えてきました。実装はFlashではなくJavaScriptが用いられることが多く、jQueryをベースにさまざまなプラグインを組み合わせることもあれば、スクロールポジションをチェックして、各エレメントの座標を決定する関数を独自実装するケースもあります。 Adobe Creative Cloudのメンバーであれば無償使用が可能なソフトウェアに、Adobe Edge Animateがあります。これは、HTML5のアニメーションを、専門的な知識を必要とせず、スクリプトをほとんど書かず、直感的に素早く作成することができるソフトウェアです。 今回は、Adobe Edge Animateを使ってインタラクティブなコンテンツを作る方法を紹介します
『UXデザイン』にプロセスって必要ですか？
前回の「もし新人女子営業が『UXデザイン入門』を読んだら」では、新人女子営業の服好舞さんが『UXデザイン』を実践して最優秀賞を受賞しました。興味を持った上司・同僚から、「UXデザインについて教えてほしい」とお願いされます。 ※この記事は、ソフトウェア開発現場のシーンを切り出し、4コマ漫画形式（漫画作成ソフト「コミPO!（コミポ）」を使用）で紹介いたします。 次回以降、舞さんが実践した『UXデザイン』についてもう少し詳しくお話ししていきますが、まず今回は『UXデザイン』の全体像をご紹介いたします。 以下の図が『UXデザイン』のプロセスを表したものになります。 利用者のニーズを把握する「1. デザイン調査」から始まり、調査結果から「2. ユーザーモデリング」を行います。「2. ユーザーモデリング」はユーザー要件を表すことになり、ほかのビジネス要件や技術要件も踏まえて、「3. ストーリーボード」
JavaScriptのテストを開発工数に入れてもらうには？
2013年4月27日、六本木ヒルズ森タワーのグーグルにて「第38回HTML5とか勉強会」が開催された。HTML5とか勉強会とは、HTML5に関心のあるエンジニアやWebデザイナ向けの勉強会だ。今回のテーマはJavaScriptのテストフレームワーク。別室のサテライト会場を用意しなくてはならないほど会場は多くの参加者であふれた。テーマへの関心の高さがうかがわれる。テストフレームワークを使いこなす現場のプロたちの解説により、その最新事情と基本的な使い方が分かった。 JavaScriptテストの必要性と最新事情 サイボウズの佐藤鉄平氏は、JavaScriptのテストの基礎知識と全体像について語った。 公開スライド 佐藤氏は、結合テストやユニット（単体）テスト、そのほかにユーザビリティテストなど、そもそもテストにはどんな種類があるのかを解説した後、ユニットテストの重要性を強調した。技術面で開発チー
W3C、DRMのためのAPI標準仕様「EME」のワーキングドラフトを発表
W3C、DRMのためのAPI標準仕様「EME」のワーキングドラフトを発表：「オープンなWebに反する」との声も W3CのHTML作業部会は5月9日、HTMLで動画などのコンテンツを保護するためのAPI標準化仕様「Encrypted Media Extensions」（EME）のパブリックワーキングドラフトを発表した。 World Wide Web Consortium（W3C）のHTML作業部会は5月9日、HTMLで動画などのコンテンツを保護するためのAPI標準化仕様「Encrypted Media Extensions」（EME）の初のパブリックワーキングドラフトを発表した。EMEに対しては米フリーソフトウェア財団などを中心に反対の声も出ているが、W3Cは引き続き策定作業を進める意向だ。 W3Cによれば、EMEはデジタル著作権管理（DRM）システムの一部であるコンテンツ暗号解除モジュール
もう、Webはブラウザという制約に縛られなくていい ─ ＠IT
えーじ 2012/7/10 10年前、旅行先で道に迷わず目的地に辿り着くのがこんなに簡単になるなんて思わなかった。スマホとHTML5が、Webを自由に解き放つ まずは、食事のシチュエーションというUXの話から 唐突ですが、あなたはレストランでアルバイトをしたことがありますか？ 経験のある方なら、分かるかもしれませんが、レストランでアルバイトしていると、賄いで食事を出してもらえる場合があります。もちろん、お店によるので、一概にいえませんが、ちょっとしたファミレスでも、通常、顧客に出すものとほぼ同じ料理を食べられます。 そのとき、味はどうだったでしょう？ 1000円以上の価値があるものを無料で食べられるのだから、店によっては、実にうらやましい話だろうと思いきや、筆者の場合、そうでもないという感想を持った経験があります。 確かに、同じ料理なのですが、いわゆるバックヤードと呼ばれる従業員専用の、お
ReadiumについてACCESSと達人出版会に聞いた ─ ＠IT
特集：ReadiumについてACCESSと達人出版会に聞いた 電子出版の日本語表示に問題提起してみる 山崎潤一郎 2012/7/12 WebKitベースの電子書籍オープンソースのプロジェクト「Readium」に関わるACCESSとユーザー代表の達人出版会に聞いた 「いつか来た道」で終わらせないために 電子出版をめぐる日本語表示の状況を俯瞰すると「いつか来た道」というフレーズが頭をよぎる。というのは、EPUB規格に対応した電子ブックリーダ（ビューワ）の表示にまつわる問題が、Webブラウザにおけるコンテンツ表示の状況に似ているからだ。 EPUBは、オープンな規格であり、筆者が知り得るだけでも、パソコン、スマートフォン、タブレット向けに十数種類のビューワが登場している。昨年、日本語組版処理に対する基本的な要求をカバーするEPUB3が策定されたことで、今後も日本語対応のEPUBビューワはその数を増
Google I/Oでユーザーに優しいモバイルアプリの条件を考えた
初めに、なぜワイヤレスについて注意を払うべきかの説明があった。調査によると驚くべきことに85％のユーザーが、モバイル環境でもデスクトップ同様のスピードを期待していることが分かった。しかしながら57％ものユーザーはページのパフォーマンスに不満を抱いており、一部のユーザーは結果としてサイトを離脱してしまう。 Aberdeen Groupの調査により、たった1秒の遅延が成約率の著しい低下につながり、またページビューや顧客満足度も下がり、全体で莫大な損害を生み出していることが指摘された。 Wi-Fiの成功と問題点 Wi-FiはLANを拡張することを目的に設計されたため、フレーミングやプロトコルはLANと基本的に同じであり、無線インターフェイスを追加しただけである。そのため容量に限りのあるバッテリーを持つモバイルデバイス向けには設計されてない。 またWi-Fiは輻輳を防ぐため、ランダムアクセスを用い
ズルいデザイン（2）：SassやCompassを使って、ズルいデザインテクニック (1/2) - ＠IT
SassやCompassを使って、ズルいデザインテクニック：ズルいデザイン（2）（1/2 ページ） SassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介。グラデーション、角丸のお手軽かつ効果的な使い方とは？ シリーズ第2回、前回に続き、今回もSassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介します。 今回は、グラデーション、角丸のお手軽かつ効果的な使い方について解説します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 1: ズルいグラデーション CSS3ではグラデーションを扱えるようになったことから、画像を使わずに自在にグラデーションを描画して、CSSだけでよりリッチなビジュアル表現が可能になりましたが、一口にグラデーションといっても、う
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
