基本的な要素・機能を提供するCore ElementsとMaterial Designを実現するPaper Elements
基本的な要素・機能を提供するCore ElementsとMaterial Designを実現するPaper Elements 泉水翔吾 この記事は、連載「基礎からわかるWeb Components徹底解説～仕様から実装まで理解する〜」の第4回目になります。今回は、前回紹介したGoogleが開発するWeb Componentsのライブラリ、Polymerを元に作られたコンポーネント群「Core Elements」と「Paper Elements」について紹介します。 Core ElementsとPaper Elements Core ElementsとPaper ElementsはGoogleが開発するWeb Components群です。Core Elementsは、Webを構成する要素をWeb Componentsとして切り出し抽象化したものであり、Paper Elementsはデザインコ
WebクリエイターのためのIoT/WoTの基礎知識
ここ数年、モノのインターネット: Internet of Things（IoT）が盛り上がってきています。今年のCES 2015（世界最大級のIT＆家電見本市）でも IoTが大きなテーマとなったようですね。具体的なプロダクトやサービスも数多くローンチされ、今年はIoT元年ともいわれています。 「IoTとは何なのか」「なぜ今注目を集めるのか」「Web of Thingsとは」について解説します。そこから今後のIoTと、我々Webクリエイターがどう関わるのか、についても考えてみましょう。 モノのインターネットとは？ IoTの本質を考える Internet of Thingsとは、さまざまなモノがインターネットに接続され、センサーなどによりデータを測定したりコントロール可能にする概念だと言われています。モノがインターネットに繋がっていろいろできるということですが、その実体はなんなのでしょう。単に
PolymerでMaterial Designなチャットアプリを作ろう
今年注目のオープンWebテクノロジーのひとつに、Web Componentsが挙げられると思います。HTML5Experts.jpでも今まで幾度も関連記事、Polymer.jsについての記事が紹介されてきました。今回は実際に、PolymerとMaterial Designのデザインコンセプトを用いて、視覚的にもユーザエクスペリエンスにも優れたチャットアプリを実際に作ってみましょう。 まず始める前にこのライブデモ、Kitteh Anonymousをデスクトップまたはモバイルのモダンブラウザで実際に試してみてください。ここでは、このデモの簡略版であるLiteバージョンを実際に作成する方法をステップ・バイ・ステップで紹介したいと思います。 必要な知識 Polymerの基礎知識 パッケージマネージャ、Bowerの基本的な使い方（Polymerと依存するファイルをインストール、アップデートするのに使
「エンタープライズとUX」ってテーマをふっかけたらめちゃくちゃ濃くて面白かった ─齋藤善寛＆新谷剛史ロングインタビュー
「エンタープライズとUX」ってテーマをふっかけたらめちゃくちゃ濃くて面白かった ─齋藤善寛＆新谷剛史ロングインタビュー 白石 俊平（HTML5 Experts.jp編集長） HTML5 Experts.jpが誇るエキスパートたちに、「UX」というテーマでインタビューするシリーズ第五弾です。 ぼくも昔はSIerの孫請けとして、エンタープライズ業界の片隅で働いていたので、エンタープライズというキーワードにはつい反応してしまいます。とはいえ、今のエンタープライズ業界がどういう状況かはよく知らないのですが、UXに関する特集を行うにあたっては、「エンタープライズとUX」というテーマで必ず誰かに話を聞きたいと考えていました。 そこで株式会社セカンドファクトリーの新谷剛史さんに、このテーマをぶつけてみたところ、取締役副社長 シニアUXストラテジストの齋藤善寛さんも参戦し、めちゃくちゃテンションが高くて密
Web Componentsでカルーセルギャラリーを作る─Web Components実践編
この記事は、連載「基礎からわかる Web Components 徹底解説 〜仕様から実装まで理解する〜」の第2回目になります。 カルーセルギャラリーをコンポーネント化する Web Componentsによってスコープが実現したものの、コンポーネント化する難しさは変わりません。分割しすぎればHTML ImportsによるHTTPリクエストが必然的に増加し、パフォーマンスへ懸念が残ります。コンポーネント化した要素のどの部分を変更可能にするかなどの、汎用性についても悩ましいところです。 複数の写真をコンパクトなスペースで表示するUIとして、カルーセルギャラリーはよく見かけるUIです。これを実装するには、例えばカルーセルを構築するためのJavaSciriptの処理、及びそのCSSを既存のHTMLに追加する必要があります。 カルーセルギャラリーを構成するためのjQueryのプラグインなどは多数配布さ
Webアクセシビリティの重要性が加速する！「アクセシビリティやるぞ！祭り」詳細レポート
このイベントは、「来るべき近未来のために業界の認識をアップデートすべく」（イベントページより）企画されたとのこと。近未来ってどういうことか、ちょっと気になります。 また、先日の木達一仁さんに行ったインタビューでも、「『アクセシビリティが当たり前の社会』というビジョンを実現するために、HTML5 Experts.jpとしても、お手伝いできることは何でもします！」と言った約束も守らねばなりません。 ということで、タイトルからしてちょっと楽しそうなこのイベント、無理を言って取材させてもらっちゃいました。今回はそのレポート記事になります。 「アクセシビリティ＝高齢者・障害者対応」は大間違い！ 最初のセッションはヤフーでマークアップエンジニア/フロントエンジニアを担当していらっしゃる（最近では「アクセシビリティエンジニア」と名乗っているそうです）福本翔さんによる「やはりお前らのWebアクセシビリテ
t32k、怒られる！セマンティック バージョニングしてますか？
どうも、バンクーバーでぶらぶらしている@t32kです。最近は暇なのでもっぱらOSS活動に勤しんでおります。そんなわけで日々のアプリケーション開発において重要になってくるのがバージョニングです。 今日はセマンティック バージョニングについて解説します。自身が公開しているライブラリやパッケージのコードを何かしら修正したら、それに伴いバージョンを上げるのが一般的だと思うのですが、実はどのようにバージョンを上げるのが適切なのか、昔の私は理解していませんでした。 『いっぱい変更したのでメジャーバージョン上げてみるか』、『今回の修正は軽微なものだし、マイナーバージョンを上げるか』などと、なんとなくにバージョニングをしていました。 If the plugin’s API changes dramatically (for example, when sortOrder option is renamed
ミツエーリンクスのCTOに「UXとWebアクセシビリティ」について聞いてきた─木達一仁ロングインタビュー
ミツエーリンクスのCTOに「UXとWebアクセシビリティ」について聞いてきた─木達一仁ロングインタビュー 白石 俊平（HTML5 Experts.jp編集長） HTML5 Experts.jpが誇るエキスパートたちに、「UX」というテーマでインタビューするシリーズ第二弾です。 株式会社ミツエーリンクスCTO、そしてエキスパートNo.40の木達一仁さんに、「UXとWebアクセシビリティ」について聞いてきました。 「UXとWebアクセシビリティって、関連あるのかな？」なんて、自分で企画したにも関わらず無責任な疑問を抱える中、そんな疑問を吹き飛ばすような気付きをいただける貴重なインタビューでした。 alt属性からWeb Componentsのアクセシビリティまで、たっぷり聞いてきました！皆さんどうぞ、お楽しみください。 Webアクセシビリティについての現状 白石: 今日は、「UXとWebアクセシ
いま、UXを語るのはなぜ悩ましいのか？─長谷川恭久ロングインタビュー
いま、UXを語るのはなぜ悩ましいのか？─長谷川恭久ロングインタビュー 白石 俊平（HTML5 Experts.jp編集長） UXという言葉は、専門家ではない筆者のような人間からすると、少し「怖い」言葉です。 筆者にとってUXという言葉は、概念はわかる気がするものの捉えどころがなく、絶えず論争の的になっている…そんな言葉に思えていました。 とはいえやはり、いまの時代Webに携わるものとして、UXに対する興味は尽きません。そこでHTML5 Experts.jpでUXを取り上げてみたいと思ったのですが、「炎上」は怖い…。 そもそも、なんでこんなにUXは論争が尽きないのか。「UXに関心はあるし、仕事として関連もあるのだけれど、どこから学べばいいのかよくわからない」筆者のような人間に、何を伝えることができるか。特集を行うにあたり、エキスパート No.37の長谷川恭久さんに相談させていただくことにしま
Web Componentsを構成する4つの仕様 ー Web Components基礎編
我々Web開発者がWeb Componentsという言葉を耳にしてから、もう2年程経ったでしょうか。Web Componentsが変えるWeb開発の未来という記事に、「今のWeb開発がどのような課題を抱えているか、それをWeb Componentsがどう解決するか」を書きました。これを踏まえて、本連載ではWeb Componentsの仕様から実装、PolymerやX-TagといったWeb Componentsを支えるライブラリなどの周辺知識まで解説していきます。 Web Componentsを支える4つの仕様 連載第1回目となる本記事では、Web Componentsを支える4つの仕様について解説します。Web Componentsは以下の4つの独立した仕様から構成されます。 Custom Elements – 独自のカスタム要素をユーザーが定義することを可能にする Shadow DOM
Googleのベストプラクティスに沿ったモダンな製作の出発点「Web Starter Kit」
Web Starter Kitで用意されている各種の設定ファイルなどは、そのまま使うのではなく、各自が自分のスタイルに合わせてカスタマイズするとよいでしょう。ファビコンやスマートフォンでサイトをホーム画面に追加した際に表示されるアイコンなど、各自で差し替える必要があります。 humans.txtやrobots.txtなども使用する場合には適宜編集する必要があります。 動作環境の構築 Web Starter Kitに用意されたツールを使用するためには、以下の言語の環境が必要となります。 Node.js (v0.10.x以上) Ruby (1.8.7以上) これに加えて、以下のツールのインストールが必要になります。 Nore.js上で動くタスクランナーのgulp (3.5.x以上) Sassのコンパイルを行うRubyのgem (3.3.x以上) それぞれのインストール方法について、簡単に紹介し
Web Componentsが変えるWeb開発の未来
Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。 「なぜWeb Componentsが生まれたのか」 「Web Componentsが何を解決してくれるか」 この2点を上記セッションに沿って解説していきます。 HTML/CSSが持つ弱点 Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。 しか
Googleはなぜモバイルに力を入れるのか？これからのWebパフォーマンスで注力すべきポイント
こんにちは、川田です。Googleはここ最近、デスクトップ向けWebに対して、ほとんどの関心を失っているように見えます。HTML5ブームも過ぎて、やることがなくなってしまったのでしょうか？……いえいえ、そうでもありません。昨今の待ったなしで進む技術革新の中で、彼らは「ある問題」と戦っているようです。 Webは「モバイル」中心の時代へ移っていく すでにご存知の方も多いと思いますが、GoogleのビジネスモデルはWebに強く依存しています。2014年1Qの決算で、Googleは全売上の約68%が自社のWeb系サービスの広告収入であり、約22%はAdsenseなどの他のWebサイト向けの広告であると報告しました。Webに依存したビジネスが実に9割を占め、1日に約120億円の収入をWebから得ています。もっと簡単に言えば、Webだけで、タイの国民全員の給料分ぐらい稼いじゃってます。当然、Webの進
Web技術者も知るべきデモ・プレゼンの極意（西脇資哲氏）「Microsoft de:code」イベントレポート
Web技術者も知るべきデモ・プレゼンの極意（西脇資哲氏）「Microsoft de:code」イベントレポート 岩瀬 義昌（HTML5 Experts.jp編集部） 5月29日、30日にかけてMicrosoftの開発者向けイベントである「de:code」が開催された。本記事では、Microsoftのエバンジェリストである西脇資哲氏のセッション「de:code参加者に捧げる最新Microsoftデモ・プレゼンの極意」について紹介する。 プレゼンテーション・デモとは プレゼンテーションでは相手に、話をする、画像・動画・デモを見せる等を行う。このプレゼンテーションにおいて、重要なことはまず相手に伝わること、そして相手に伝わった結果、さらに重要なのが相手が動いてくれることだ。相手が動いてくれるとは、例えばプロジェクトについて説明した結果、相手が人・お金のリソースを出してくれる、ということだ。 この
イベント生中継！ html5j パフォーマンス部 第一回勉強会の模様をライブでお届けします
イベント生中継！ html5j パフォーマンス部 第一回勉強会の模様をライブでお届けします 仲 裕介（HTML5 Experts.jp副編集長） この記事では、html5j パフォーマンス部 第一回勉強会の模様をライブでお届けします。勉強会に参加したくても参加できなかった方は必見です！ はじめに html5jでは部活動という形で様々な分野の勉強会が活発に行われています。今回の勉強会を主催するパフォーマンス部もその一つで、昨年暮れに構想が持ち上がり、今回第一回目の勉強会開催となりました。今回の会場はDeNAさんの会議室です。 本日の勉強会はWebパフォーマンスの最前線でどのような事が行われているのか、３名のスペシャリストが余すことなくしゃべります！ 開会の挨拶＆5jcupの告知 はじめに、html5j管理人の白石さんから、開会の挨拶と今絶賛開催中の5jcupの告知が行われました。 5jcup
CSS Text Decoration、ルビ、Shadow DOMに挑戦「Test the Web Forward Meetup (仮), Tokyo #2」レポート
CSS Text Decoration、ルビ、Shadow DOMに挑戦「Test the Web Forward Meetup (仮), Tokyo #2」レポート 矢倉 眞隆（myakura） Test the Web Forward (TestTWF)とは、W3Cの仕様を実装・勧告させるために必要なテストケースをみんなで書こうというイベントです。Adobeが中心となり世界各国で開催され、その成果を認められ昨年秋にW3Cに取り込まれました。 日本でも昨年6月にTestTWFが開催され、成功を収めました。この活動を続けていこうと始めたのがhtml5jテスト部とTestTWF Meetup (仮)です。昨年9月に第1回目を開催しています。 少し間が空いてしまいましたが、4月12日、Test the Web Forward Meetup (仮), Tokyo #2を開催しました。 3つの仕様
HTML5でネイティブアプリを作ろう！「Windowsストアアプリ」開発入門
HTML5でネイティブアプリを作ろう！「Windowsストアアプリ」開発入門 物江 修（日本マイクロソフト株式会社 Webエバン...） これまでのHTMLはオンライン上のドキュメントを記述する目的に設計され、発展してきましたが、HTML5ではそれに加え、アプリケーションのプラットフォームとしての仕様も盛り込まれています。 HTML5のマークアップや API、CSS3、SVGなどの関連技術を使用すれば、Webブラウザの独自の拡張機能に頼らずとも、Web標準から外れることなく、高機能なWebアプリケーションを開発することができるようになりました。また、HTML5とその関連技術が提供するさまざまな標準化された仕様は、Webブラウザ内で動作するコンテンツにとどまらず、クロスプラットフォーム開発が必要とされるネイティブアプリの開発でも使用されるようになっています。 こういったクロスプラットフォーム
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ 石本 光司（Kaizen Platform, Inc...） こんにちわ、@t32kだよ！ 私は仕事では主にHTML/CSSコーディングを担当しているのですが、自分の書いたCSSがイケてるのか、そうでないのか、気になります。私、気になります！そうでなくても、他プロジェクトのCSSのレビューをお願いされたりすることもあるので、そのCSSがどのような状態であるのか、すばやく簡単に理解する必要性がありました。 そこで私は、StyleStatsというNode.js製のツールを作りました。 t32k/stylestats – GitHub StyleStatsの使い方はとても簡単です。ターミナルから下記コマンドを打てば、すぐにCSSを解析した結果が得られます。 $ npm install -g stylestats $
HTML5で実現できる！環境光に合わせたレスポンシブなUI
HTML5で実現できる！環境光に合わせたレスポンシブなUI Tomomi Imura（Slack） フロントエンド開発やデザインに携っている皆さんにとって、ここ数年間「レスポンシブ・ウェブ」についての話題は避けて通れないものとなっているでしょう。モバイルやタブレット上でも、ユーザー・エクスペリエンスを失うことのないウェブを表現するには、CSS3 Media-queriesが欠かせないものとなってきました。 それでは実際、レスポンシブ・ウェブとは何についての対応（レスポンシブ）なのでしょうか。 現在のところ、私たちがいうレスポンシブ・ウェブデザインとは、どんなスクリーンの幅や表示領域、デバイスの画面解像度や画面の縦横の向きにも対応したウェブデザイン、というのが事実上の定義となっているようです。 そこで今回、私はその定義を超えたレスポンシブ・ウェブのユースケースについて考えてみました。 太陽光
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 上村 光星 10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。 Sass 3.2の「&」 「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。 // Sass 3.3よりも前の「&」の用途の例 .foo { &:hover
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
