5分で分かるレスポンシブWebデザイン
レスポンシブWebデザインとは単一のHTMLでスマートフォン、タブレットといった画面サイズが異なるデバイスへ対応できるWebサイト制作手法をいう。2010年に誕生し、今も進化をしている。言葉だけを引用するとレスポンシブとは“反応／変化”なので、それに環境に応じて変化するWebと広く理解する方もいるかもしれないが、基本的にはグリッドシステム、フルードイメージ、メディアクエリを利用してマルチデバイスに対応させる手法がレスポンシブWebデザインだ。 欧米でも2012年にはリニューアルとともにレスポンシブWebデザインをする大企業のサイトも続々とローンチされている。世界的に有名なオンライン・メディア「Mashable」でも、ポストデスクトップ時代の終わりとモバイル時代の幕開けを理由の1つとしてレスポンシブWebデザインが2013年のメガトレンドと予想している。
「OAuth」の基本動作を知る
デジタル・アイデンティティの世界へようこそ はじめまして、OpenID Foundation JapanでエバンジェリストをしているNovです。 この連載では、僕を含めOpenID Foundation Japanにかかわるメンバーで、OpenID ConnectやOAuthなどの「デジタル・アイデンティティ（Digital Identity）」にかかわる技術について紹介していきます。 APIエコノミー時代のデジタル・アイデンティティ 世界中で9億人のユーザーを抱える「Facebook」や5億人のユーザーを持つ「Twitter」など、巨大なソーシャルグラフを持つサービスが、日々その存在感を増しています。日本でも、グリーやモバゲーなどがそれぞれソーシャルゲームプラットフォームを公開し、国内に一気に巨大なソーシャルゲーム市場を作り上げました。最近では、ユーザー数が5000万人を突破し、プラット
DOM操作の主流になるか！？ セレクタAPIを使いこなそう
連載目次 従来、JavaScriptでは、以下のようなメソッドを利用して、操作対象の要素を特定していた。 getElementByIdメソッド：IDの値をキーにノードを取得する。 getElementsByTagNameメソッド：要素名をキーにノードを取得する。 getElementsByClassNameメソッド：class属性の値をキーにノードを取得する。 しかし、この方法で複雑な構造のHTML文書から要素を取り出す場合、コードが複雑になりやすいという課題もあった。例えば、以下は従来のgetElementXxxxxメソッドを利用した要素の取得例だ。 上記のJavaScriptコードでは、奇数番目の要素を特定するために全てのインデックス番号をif文で判定させている。ほかにも属性値やclass属性によって要素を絞り込むならば、同じような判定式を書いた経験が読者諸氏にもあるだろう。「もっと簡
ブラウザでストレージ？ Web Storageを使いこなそう
連載目次 ■Web Storageの概要と活用例 旧来（＝HTML 4.1以前）のWebブラウザでは、eコマース・サイトのカート情報やログイン状態の管理情報などのデータをブラウザに保存する仕組みとして、大半のWebサイトではクッキーを利用していた。しかし、クッキーでは、保存容量が4KBytesまでであることや、すべてのリクエストに対してサーバにデータを自動で送信するため、容量制限やセキュリティ対策に悩まされることも多くあった。 HTML5では、クッキーに代わるデータ保存の仕組みとして、「Web Storage」と呼ばれる機能を利用できる。Web Storageは、ブラウザ側でKey-Value型でデータを保存する機能のことで、現在のインターネットを取り囲む環境に対応した「クッキーの後継技術」ともいえる。 Web Storageとクッキーの機能の差異は、以下の表のとおりだ。
Internet Explorer 9正式版のHTML5／CSS3／SVG対応
Internet Explorer 9正式版のHTML5／CSS3／SVG対応：特集：Web制作者＆開発者のためのIE9概説（後編）（1/3 ページ） 連載目次 前編に引き続き、Internet Explorer 9（以降、IE9）正式版の新機能について解説する。後編である今回は、IE9の主要なHTML5／CSS3／SVG対応機能を紹介する。 ■4. HTML5対応 最近、HTML5への注目度が高まっている。2011年6月に米国で行われた「次期Windows 8（コード名）プレビュー・イベント」で、「“HTML5”で記述できるWindowsネイティブ・アプリケーション」（まだ詳細は不明）という新しいアプリケーション種別が登場することが発表されたことからも、その勢いは増すばかりだ。特にグーグルが強力に推進している印象のあるHTML5だが、マイクロソフト技術系である.NET開発者も大きな関心と
SassでCSSの弱点を克服しよう （1/2）－ ＠IT
maedana SonicGarden SUG（SKIP User Group）／日本Hamlの会 2009/5/22 Railsを使ったWebアプリケーション開発で、プログラマやデザイナを悩ませるものの1つがスタイルシートの記述だろう。Sassを使って、“クールで構造化された”スタイルシートを記述してみよう（編集部） Sassとは、Syntactically Awesome StyleSheetsの頭文字を取ったものです。あえて日本語に訳すと、「かっこいい構文のスタイルシート」といった感じでしょうか。 もう少しシンプルに表現すると「クールなCSS（Cascading Style Sheets）」でもいいかもしれません。Sassはスタイルシートを簡潔に表現するためのメタ言語であり、同時にSassからCSSを生成するための便利なライブラリやコマンドラインツールを提供します。 Sassを使うと
W3Cは賞味期限切れ組織？ － ＠IT
「W3Cの賞味期限はあと何年ぐらいだと思いますか？」。先日、あるパーティーでこう聞かれた。私は虚を衝かれたように、思わず真意を聞き返した。なぜなら、私にこの質問をしたのは、日本人として唯一、W3CのXMLワーキンググループで1997～98年のXML 1.0の標準化プロセスに携わった村田真氏だったからだ。村田氏は現在、Office Open XML（主にMicrosoft Officeで用いられる文書形式）の標準化についても情報処理学会 情報規格調査会の専門委員として国際標準化に携わっているなど、この道のエキスパートだ。 驚きはしたが、やはりとも思った。W3Cはもう標準化組織としての黄金期を過ぎ、権威が失われつつある。もしかすると標準化プロセスにしても、もっと良い別のやり方があるのではないか。このところずっとそう感じていたからだ。 W3Cのウィジェット標準を知っていますか？ 村田氏の見立てで
モダンブラウザでも使えるCSSハック18選（1/3） - ＠IT
有限会社タグパンダ 喜安 亮介 2009/12/16 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） モダンブラウザとMac OS XのIE 5でも使えるCSSハック 前回の「IE 6とIE 7のためのCSSハック16選」では、IE 6とIE 7のためのCSSハックのテクニックを紹介しましたが、今回は、モダンブラウザでも使えるCSSハックのテクニックを下記に分けて紹介します。 IE 6/7/8をハック（IE 6とIE 7、IE 8に効く、もしくはIE 6とIE 7とIE 8に効かないハック） IE 6とIE 7、IE 8に効くハック コンディショナルコメント ユーザーエージェントハック IE 6と
いまからでも遅くない！ ケータイデザインの基礎固め
いまからでも遅くない！ ケータイデザインの基礎固め：一撃デザインの種明かし（6）（1/2 ページ） 普段はPCサイトを作っているけど、ケータイサイトに興味が出始めた人向けの、初めてケータイのデザインハウツーです。日々変化するケータイデザインの基礎の基礎をご紹介 ケータイ機種のスペックが上がりデザイン表現の幅は広がっていますが、PCサイトに比べまだまだ容量やスタイル、キャリア対応などさまざまな制限があるのも確かです。 今回は、普段PCサイトを作っているけど、ケータイサイトに興味が出始めた人、初めてケータイのデザインに触れる人のための基礎固めとして、日々変化するケータイデザインの基礎の基礎をご紹介したいと思います。 誰でも最初は初心者だった！ ケータイデザインの基礎の基礎 ケータイの画面サイズを考える！ 一般的な画面サイズはQVGA（縦320px×横240px）ですが、最近ではQVGAワイド（
見えるグーグル、見えないグーグル − ＠IT
大ざっぱに言って、グーグルには2つの側面がある。見えるグーグルと、見えないグーグルだ。「見えない」は言い過ぎでも、グーグルの中には、普通に外から眺めているだけでは見えてこない、エッジな分散コンピューティングの世界が広がっている。 検索やメール、カレンダーなどは外から見えている分かりやすいグーグルだ。逆にこうしたサービスを支えるインフラ技術は、かなり一生懸命見る気にならないと、見えてこない。 ある技術系イベントの席で、たまたま隣になったグーグルの技術者が、私にこう言った。「アプリはあんまりやらないんですよ。画面とか、面倒くさいでしょ。グーグルドキュメントとか別に消えていいって感じ。インフラに興味があるんです。OS？ OSなんて、どうでもいいし」。 変わった人だなという印象を受けた。今の時代はインフラよりもサービスに華がある。フロンティアが広がっているのもサービスの分野だ。そう思っていた。しか
勢いを増すWebKit ― ＠IT
ランキングには入っていないが個人的に気になったのは「WebKitと統合したQtをデモ、Trolltech」というニュースだ。というのも、最近、WebKitに強い勢いを感じるからだ。開発ピッチが速いし、採用例も増えている。もしかすると、次世代のRIAプラットフォームの覇者の位置に最も近いのはWebKitではないか。 RIAといえば、Adobe AIRやSilverlightが思い浮かぶかもしれないが、そもそもこうしたフレームワークが必要だった理由はHTMLの表現力や、HTMLを使ったWebアプリケーション開発フレームワークが貧弱だったからだ。 しかし、HTMLでも十分なのではないか。 開発フレームワークは、Ruby on RailsやCake PHP、Python向けではDjangoなど優れたものが登場している。一方、HTMLは次バージョンのHTML 5で、オーディオやビデオといったマルチメ
Aptana Jaxerで解決するAjaxのSEO対策とは？（1/4） ─ ＠IT
Aptana Jaxerで解決するAjaxのSEO対策とは？：パターンとライブラリで作るAjaxおいしいレシピ（6）（1/4 ページ） 今回はAjaxの問題点であるSMO、SEOへの対応 今回はAjaxの「SMO」対応、「SEO」（Search Engine Optimization、検索エンジン最適化）対応について取り上げます。SEOについてはご存じの方も多いかと思いますが、SMOについてはあらかじめ簡単に説明しておきます。 「SMO」とは、ソーシャルメディア最適化（Social Media Optimization）のことです。ブログや掲示板、SNS上などで自分たちが作成したWebサイトについて言及してもらうことで、認知度や評判を高める施策のことを指します。 ■ Ajaxの“問題点”とは？ Ajaxを使ったWebページでは、画面遷移をすることなく画面内の一部のみを書き換えることで、スム
SaaSに追い風、桁違いに速い次世代Webブラウザたち ― ＠IT
2008/04/04 Webアプリケーションがローカルアプリケーションに比べてもたついて感じられるのには大きく2つの理由がある。1つはネットワーク遅延で応答性が悪いこと。もう1つはコンテンツを動的に扱うJavaScriptエンジンが遅いことだ。 前者のネットワークの遅延についてはAjaxと総称される非同期通信のテクニックが進化したことで、体感速度は大幅に向上した。単純な文字列の書き換え程度であれば、サーバからの応答データをパーズすることなく直接HTML中に埋め込むことで高速化する“innerHTML”と呼ばれるようなテクニックも、メジャーなWebブラウザで使えるようになっている。 後者の理由、JavaScriptエンジンが遅いという認識は、まだあまり広く共有されていないかもしれない。Webブラウザベースの（JavaScriptを使った）アプリケーションの動作は「モッサリ」している。ネイティ
HTML5が持つ本当の意味 ― ＠IT
2008/01/25 ウェブ関連技術の標準化団体「W3C」（World Wide Web Consortium）が「HTML5」の策定に向けて活動を本格化しました。1月22日には「HTML5」の最初の草案を公開。2010年9月に正式な勧告としてリリースする予定だと発表しました。 普段からウェブ関連技術をウォッチしている方は別として、「なぜ今ごろ？」と、この突然のW3Cの動きに驚かれた方が多いのではないでしょうか。「そもそもW3Cがやる意味があるの？」という疑問の声も聞こえてきそうです。 標準化団体としてのW3Cのプレゼンスは、近年あまりに高いとは言えません。かつて1990年代後半から2000年ごろにかけて、誰もがW3Cの一挙手一投足に注目していた時期がありました。彼らの出してくる標準技術仕様こそが、インターネットを形成する共通言語だと、多くの人が信じていました。 ところが、現在広く使われて
基盤が整い普及期に入るセマンティックWeb ― ＠IT
2007/11/09 「一時期話題になったセマンティックWebは一度沈静化した。しかし、研究開発は脈々と続けられていた。そして多くの人が知らないうちに、2008年には普及期の入り口に入ろうとしている」。野村総合研究所が11月9日に開催した「ITロードマップセミナー――企業情報システムは5年後こう変わる！」で講演した同社技術調査部 上級研究員の田中達雄氏は、そう語る。 「セマンティックWeb」は「Web 2.0」が騒がれるようになる以前の1990年代後半、XMLとほぼ同時期に登場した次世代インターネットのあり方を指す概念だ。Webの生みの親で、現在もW3Cの理事を務めるティム・バーナーズ＝リー氏は2000年代初頭に盛んにビジョンを語った。 セマンティックWebを実現するために必要な技術の標準化や辞書の整備に長い時間がかかったため、「セマンティックWebというのは、求心力を失いつつあったW3C
「言葉」を超えた説得力を持つAjaxの存在感と広がり (1/2) - ＠IT
ハイライト1・世界的なイベント、 「AjaxWorld Conference & Expo」を知ってますか？ AjaxWorld Conference & Expo 年2回開催される世界的なAjaxイベントである「AjaxWorld Conference & Expo」が、9月23～26日に開催されました。 とはいえ、個人的にほとんど意識していなかったイベントであり、私が見ている範囲内でこのイベントについて声高に語るブログなどもあまり見掛けません。なぜでしょうか？ ■ 「疑いがあれば、実際に動かしてみてくれ……」 漠然とした印象からいえば、Ajaxに関わる人たちの多くは、目の前の問題を解決するために手を動かすタイプが多いように感じられます。だから、知識や経験の幅が狭いことがある半面、自信を持って語る内容には強い説得力が感じられます。その説得力の背景にあるのは、実際に動くプログラムをいつでも
いまさら聞けない“Web標準”、そしてXHTML＋CSS
いまさら聞けない“Web標準”、そしてXHTML＋CSS：いまさら聞けないリッチクライアント技術（4）（1/3 ページ） 前回の「いまさら聞けない、“Ajax”とは何なのか？」の説明の中で、Ajaxの定義の1つとして「XHTMLとCSSを使った標準規格のプレゼンテーション」というのがありました。前回の記事では、この部分をしっかり解説できなかったので、今回はこれについて解説をしましょう。 といっても、Ajaxの補足説明が今回の目的ではありません。HTML／XHTMLとCSSを使った「Web標準」について紹介します。 「Web標準」という単語はよく耳にしますが、具体的にどんなものか？ HTML／XHTMLとCSSとどのような関係があるのか？ さらに、HTML／XHTMLやCSSって何？ といった点について見てみましょう。 「Web標準？ Webを標準化することかな？」 AjaxやXML、Jav
あなたのサイトはiPhoneで見られますか？ - ＠IT
「Java News.jp（Javaに関する最新ニュース）」の安藤幸央氏が、CoolなプログラミングのためのノウハウやTIPS、筆者の経験などを「Rundown」（駆け足の要点説明）でお届けします。（編集部） “小さな画面”の台頭 数々の新携帯端末が出るに従って、ごくごく普通にスマートフォンを使う人を見掛けることが多くなりました。WILLCOM（SHARP） W-ZERO3［es］が登場し、女性が普通にスマートフォンを使う姿も見掛けるようになり、不自然さもなくなってきたように思えます。 さらに最近、Apple社からiPhone/iPod touchの発表もあり、ますます携帯デバイスの利用者が増えてくることが予想されます。 そこで重要視されるのが、“小さい画面”のためのサービスや“小さい画面”で使いやすいWebデザインの手法です。 ■主なスマートフォンとその表示スペック（2007年9月14日
WiMAX免許、ドコモ、KDDI落選のシナリオ － ＠IT
2007/09/04 6月に設立された業界団体「WiMAXフォーラム」の日本オフィスは9月3日、都内で会見を開き、WiMAXフォーラムの現状や日本オフィスの紹介を行った。会見の最後には、招待講演として日本総合研究所 研究事業本部 理事・主席研究員である新保豊氏が｢2.5GHz帯を巡る課題と将来展望」と題した講演を行い、この秋予定されている国内での2.5GHz帯のブロードバンド無線通信（BWA）の免許交付についての見通しについて、総務省が取りうるロジックにまで踏み込み、予想されるシナリオを展開してみせた。 世界各地で導入が進むモバイルWiMAX WiMAX Forumを代表して講演を行ったマーケティング担当副代表のモハンマド・シャクリ氏によれば、現在同フォーラムのメンバー数は約460社で、年内にも500社を超える見通し。シャクリ氏は「メンバーの構成はサービスプロバイダーがいちばん多く、コンテ
欧州でFirefox 2がIE7のシェアを逆転 − ＠IT
2007/07/18 ヨーロッパでFirefox 2のシェアが引き続き伸びているようだ。仏XiTi Monitorが7月13日に発表した調査結果によれば、調査対象となった32カ国での、7月2日から8日までのWebブラウザシェアはFirefoxが27.8％、Internet Explorer（IE）が66.5％。1年前の調査ではFirefoxは21.1％のシェアで6.7ポイントの増加となった一方、IEは73.3％から6.8ポイント減で、FirefoxがIEからシェアを奪い続けている姿が浮き彫りとなった。Operaは3位で3.5％のシェア。 国によってFirefoxのシェアには大きな違いがあり、スロベニア（47.9％）、フィンランド（45.4％）、スロバキア（40.4％）、ハンガリー（39.7％）、ポーランド（39.5％）、クロアチア（39.5％）など、東欧諸国では4割前後と高いシェアとなって
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
