UXデザイン、よくある3つの失敗とは？
UXデザイン、よくある3つの失敗とは？：もう迷わない！ ビジネスを成長させるUXデザイン手法の使い方（1） B2C、B2B問わず、ITサービスがビジネスに不可欠な存在となった近年、UXデザインに対する企業や社会の認識は一層深まっている。にもかかわらず、「使いにくいサービス」が減らない原因とは何か？――「VAIO」のUXデザイナーとして、「SONY PlayStation4」のプロダクトマネジャーとして、またその他システム／サービスのUXデザインを15年以上手掛けてきた筆者が「本当に使いやすいITサービス」の作り方を分かりやすく解説する。 デジタルトランスフォーメーションが急速に進展し、さまざまな業種でITサービス開発競争が激化している。ビジネスが「ソフトウェアの戦い」に置き換えられていることは社会に広く認識されているし、アプリケーションの使いやすさが、収益・ブランドを左右することは、多くの
Angularの特徴とは？ 開発環境を構築するには？
※現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が＠ITの通常の記事とは異なる場合があります。
エンドユーザーの言語を取得するには？［JavaScript］
[山本康彦，BluewaterSoft／Microsoft MVP for Windows Development] 連載目次 Webアプリなどで、エンドユーザーの使っている言語によって処理を変えたいことがある。例えば、エンドユーザーが日本語を使っているときは日本語のメッセージを出し、それ以外の言語のときは英語のメッセージを出すといったような場合だ。 本稿ではJavaScriptでエンドユーザーの言語を取得する方法を解説する。 Accept-Languageヘッダについて エンドユーザーがブラウザに設定している言語は、HTTPリクエストヘッダの「Accept-Language」としてWebサーバに送信される（複数の言語を設定している場合は、その優先順位も）。Webサーバ側で、Accept-Languageヘッダに含まれるロケール（言語を表す「ja-JP」といった文字列）を解析して処理を変え
多国語対応のサイトを構築する（JSTL編）
「リソースファイルで多国語対応のサイトを構築する」では、リソースファイルとjava.util.ResourceBundleクラスを用いて、ソースコードから地域依存のデータ（文字列）を分離する「国際化対応」の手法を紹介しました。しかし、決まりきったリソースファイルの読み込みとプロパティ値取得のために、いちいちスクリプトレットを記述しなければならないのは、あまり好ましくありません。 そこで本稿では、JSTL（JSP Standard TagLibrary）のi18n（Internationalization）タグライブラリに用意された<fmt:message>タグを利用して、スクリプティング要素を使わずに国際化対応のJSPページを作成する方法を紹介します。なお、JSTLタグライブラリのインストール、利用方法については、「個別のJSPページでJSTL宣言を省略する」を参照してください。 解説 （
いまさら聞けないAngularJSの基礎知識と5つの主な特徴、インストール、簡単な使い方
連載目次 前回記事、「いまさら聞けないMongoDBの基礎知識とインストール、CRUD操作の基本、モデリングツールMongooseの使い方」では、ハイパフォーマンスなNoSQLデータベース「MongoDB」の概要と、Node.jsからMongoDBにアクセスするモジュール「mongoose」の使い方の基本を紹介しました。今回は、MEANスタックの「A」部分、AngularJSの基本について解説します。 なお、本記事を見て実際にサンプルを動かしたい場合、以前の連載記事（第1回、第2回）を見て環境を作成しておきましょう。 AngularJSとは MEANスタックではフロント側のフレームワークとして、AngularJSを使用します。AngularJSとは、グーグルとユーザーコミュニティによって開発されているオープンソースソフトウエアのJavaScriptフレームワークです。2012年にバージョン
第1回 TypeScriptの概要
TypeScriptとは この連載の目的はTypeScriptの基本的なコードの書き方を初歩から学ぶことである。プログラミングの経験がない読者を対象としているので、パソコンの基本操作ができるぐらいの前提知識があれば読み進められるようにできるだけやさしく解説していくこととする。現在、TypeScript関連の資料にはJavaScriptの知識を前提として、JavaScriptとの差分を掲載しているものが多いが、ここではそういった前提を設定せずに1からTypeScript（とJavaScript）を学ぶこととする。 初回の恒例として、TypeScriptの概要がこの後に続くのだが、能書きはいいからとにかくやってみたいという方は、この先を飛ばして「いちばん簡単なTypeScriptのプログラム」に進んでもらって構わない。 さて、その「TypeScriptとは」なのだが、ひと言で表すなら「Java
ブラウザでストレージ？ Web Storageを使いこなそう
sessionStorageオブジェクトの型を参照することで、「Web Storageを利用できるかどうか」を確認できる。条件分岐することで、利用できる場合だけではなく、利用できない場合に対処することも可能だ。 では、順に使用方法を見てみよう。 ●セッション状態を管理する「sessionStorageグローバル変数」 最初に、ブラウザのウィンドウまたはタブの中でデータを共有するサンプルを記述する。 ……省略…… <script type="text/javascript"> // （1）Web Storageの実装確認 if (typeof sessionStorage === 'undefined') { window.alert("このブラウザはWeb Storage機能が実装されていません"); } else { window.alert("このブラウザはWeb Storage機能を
ITエンジニアとして2020年に向けて活躍するための3つの「習慣」
＠ITは2014年9月、日本のITエンジニアの現状や課題、技術への「思い」などを知るための読者調査を実施した。2000人近い読者から回答を得て、その結果の一部を記事としてすでに公開している。 このアンケート結果を元に、「IT投資が増加していくとされる2020年に向けて、エンジニアが技術との関わりを楽しみ社会でその能力を存分に発揮するために何ができるのか」について、現役エンジニアによる座談会が行われた。本稿では、座談会から見えてきた誰でもすぐに試せるスキルアップサイクルを紹介したい。スキルアップサイクルは下記の3つの要素で構成されている。 出席者は、日本マイクロソフトでエバンジェリストを務める井上章氏。デジタルアドバンテージ代表取締役の小川誉久氏。そして、co-meeting取締役CTOであり、「パブリッククラウドエバンジェリスト」としての活動も意欲的に行っている吉田雄哉氏である（以下、敬称
アプリ開発者もインフラ管理者も知っておきたいDockerの基礎知識
関連記事 共同プロジェクトも展開：Red Hat、Linuxコンテナ技術で米新興企業と提携 米Red Hatは、Linuxの次世代コンテナ技術に関して、米新興企業と提携を結んだと発表した。Red Hat Enterprise Linuxに「Docker」を組み合わせて、Red HatのPaaS製品の強化を目指す。 認定ホスト間でのシームレスな機能を保証：米レッドハット、コンテナー化されたアプリケーションの認定プログラムを発表 米レッドハットは2014年3月11日、コンテナー化されたアプリケーションの認定プログラム「Red Hat Container Certification」を発表した。既存のアプリケーション認定プログラムの延長だ。 ユーザーは「PaaS」「IaaS」を求めているわけではない：狭義の「PaaS」を超えようとするレッドハットのOpenShift レッドハットは、PaaS製品
10分でわかるSVG 基礎編
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
git-flowのインストールとブランチ運用前のリポジトリ準備
git-flowのインストールとブランチ運用前のリポジトリ準備：Gitブランチを使いこなすgit-flow／GitHub Flow入門（2）（1/2 ページ） 数回にわたってgit-flowとGitHub Flowを使ったGitの活用テクニックを紹介します。今回は、git-flowのWindows、Mac、Linux別でのインストール手順、利用の仕方の流れ、ブランチ運用前のリポジトリ準備の流れを紹介。 前回の「いまさら聞けない、成功するブランチモデルとgit-flowの基礎知識」では、git-flowで利用するブランチモデルの概要について解説しました。今回は、git-flowのインストールとgit-flowを利用し始める前のリポジトリの準備について解説します。 git-flowをコマンドベースで利用 git-flowを利用するには、コマンドラインから利用するCUIのgit-flowを利用す
いまさら聞けない、成功するブランチモデルとgit-flowの基礎知識
いまさら聞けない、成功するブランチモデルとgit-flowの基礎知識：Gitブランチを使いこなすgit-flow／GitHub Flow入門（1）（1/2 ページ） 数回に渡ってgit-flowとGitHub Flowを使ったGitの活用テクニックを紹介します。初回は、ブランチ管理の課題と効率的にバージョン管理できる5つのブランチモデルと、ブランチの管理を簡単に行えるツール「git-flow」について。 Gitなどの次世代のバージョン管理ツールの特徴として、ブランチの機能を高度に活用できるという利点があります。Gitのブランチを生かしたツール・フローとして「git-flow」「GitHub Flow」が注目を浴びていますが、本連載では数回に渡ってgit-flowとGitHub Flowを使ったGitの活用テクニックを紹介します。初回は、git-flowの概要を紹介します。 効率的にバージョ
いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール
連載目次 前回から始まった「MEANスタックで始めるWebアプリ開発入門」ですが、第1回、「LAMPに代わる構成として注目のMEANスタックの基礎知識とインストール、ひな型作成」では、MEANスタックの概要について説明とセットアップ、サンプルアプリの作成を通して最初のMEANスタックアプリに触れてみました。 今回からはMEANスタックの各構成要素についてもう少し詳細な解説をしていきます。第2回となる本記事では、MEANスタックの中心となる技術、Node.jsについて基本的な部分やインストール方法、その周辺ツールを紹介していきます。 サーバーサイドJavaScriptの実行環境「Node.js」とは 前回も少し説明しましたが、Node.jsとはサーバーサイドJavaScriptの実行環境です。2009年にRyan Dahl氏によって開発され、Google Chrome用JavaScript実
WebページをRetina対応させるテクニック～実践編
WebページをRetina対応させるテクニック～実践編：jQuery×HTML5×CSS3を真面目に勉強（5）（1/3 ページ） 前回のWebにおけるピクセルの基本的な話を踏まえ、今回はRetinaディスプレイをはじめとした高精細ディスプレイにWebページを対応させるテクニックを紹介する。 前回（WebページをRetina対応させるテクニック～基礎知識編）はWebにおけるピクセルの基本的な話をしました。今回はそれを踏まえた上で、Retinaディスプレイをはじめとした高精細ディスプレイにWebページを対応させるテクニックを紹介します。 CSS Spriteで複数の解像度に対応 最も原始的な対応方法です。一般的なPCディスプレイと同じ要領で作成した画像をRetinaディスプレイに使用すると、にじんだように表示されてしまいます。デバイス上では同じサイズでも、使われているピクセル数のタテ・ヨコが2
知らないと働けないPHPの基本文法／構文と注意点
オープンソースのWeb開発向けスクリプト言語「PHP」の文法を一から学ぶための入門連載「Web業界で働くためのPHP入門」。前回の「初心者がPHPプログラミングを始めるための基礎知識とXAMPPのインストール」では、PHPの概要や特徴を紹介し、環境構築や「Hello World!」までの手順などを解説しました。 今回からは環境がセットアップできている前提で進めますので、まだの方は前回を参照して準備をしておきましょう。 PHPタグでPHPのコードを埋め込む PHPでは、テキストファイルにコードを書けば、それをそのまま実行できます。このような言語は、他にPythonやRuby、Perl、JavaScriptなどがあります。ただ、PHPの場合はテキストファイルに一定の形式で書くことが必要です。 それは、コードは「<?php」と「?>」というPHPタグの間に書かなくてはならない、ということです。例
iPadでデュアルディスプレイ環境を構築する － ＠IT
無料ツールのDisplayLinkを使うと、iPadをサブディスプレイにしてノートPCの画面を広げることができる。 出張などの出先でノートPCを利用する場合、画面が狭く、作業がしにくく感じることが多いのではないだろうか。特に画面解像度が1024×600ドット程度と狭いネットブックを利用している場合、外部ディスプレイを接続してデュアルディスプレイ環境を構築できたら思うことも多いと思う。 しかし別途ディスプレイを持ち歩くのは現実的ではない。だがiPadを持っているなら、このディスプレイをノートPCのサブディスプレイとしてデュアルディスプレイ環境の構築が可能だ。iPadの画面は9.7インチで、解像度は1024×768ドットとネットブックの画面サイズに近く、デュアルディスプレイ環境を構築するのに違和感が少ないものとなっている。そこで本稿では、無料ツール「DisplayLink」を使って、iPadを
UXとは何ぞや？ UXを高める武器を手に入れよう！ ― 開発者は、いかにユーザー・エクスペリエンス（UX）と付き合うべきか ―
連載目次 ◇本連載の趣旨 ユーザー・エクスペリエンス（以下、UX）とは、大ざっぱにいうと、ある製品（アプリケーション）をエンド・ユーザーが使った際に経験する「楽しさ・心地よさといったプラスの感情」を、（エンド・ユーザーに提供する）価値として重視するコンセプトだ。具体的には、見た目のみではなく、使い勝手や信頼性などの側面を重視した設計を行い価値を実現する。（UXの詳細な定義については後述）。そのUXが注目されるようになって久しい。が、UXの定義や意味するところ、もたらされる恩恵は、一般の開発者レベルまで伝わっているだろうか。 開発者にUXについて尋ねると「UXはデザイナーの仕事（なので、自分には関係がない）」というような意見を持っている方に出会う。本当にUXに関係のない開発者がいるのだろうか。 アプリケーションに対するエンド・ユーザーの不満を例に、不満の原因が誰の責任か見てみよう。 これら、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
夏休みの子どもの自由研究に最適！ 植物からメールをもらおう
連載インデックス「インタラクションデザインパターン」 - ＠IT