昨今のCSS設計事情からみるCSS設計のあり方とは
本記事は2015年1月に開催されたHTML5 Conferenceでお話させていただいた、 「Beyond CSS Architecture」というCSS設計のセッションをフォローアップする記事です。 本記事では、このセッションの概要と補足、またセッション中に説明できなかった点などについて書いていきます。 ※当日のセッションの動画・スライドも公開されているので、文末からご覧ください。 CSSの難しさと、昨今のCSS設計事情 この近年、CSSにおける設計論というのが話題に出てくるようになりました。筆者も拙著『Web制作者のためのCSS設計の教科書』を書いたり、各地でCSS設計をテーマとした講演をする機会が多くありました。 CSSの難しさというのは、石本氏によるCSSコードの評価についての記事にも書かれているのですが、CSSは良くも悪くも厳格なコード規約は少なく、ただ宣言的に書けばいいだけです
【UIデザイナー不要説は本当か】現役クリエイターが「UI Crunch」で語った本音とは？
【UIデザイナー不要説は本当か】現役クリエイターが「UI Crunch」で語った本音とは？ 馬場 美由紀（HTML5 Experts.jp編集部） DeNAとGoodpatchの現役クリエイターが中心となって立ち上げられた、UIデザインを追求していくコミュニティ「UI Crunch」。11月27日に開催された第2回目の勉強会のテーマは「UIデザイナー不要説について語る」。 サービスやプロダクトを作る上で大きな差別化要因となっているUIデザイン。とはいえUIデザインに携わるUIデザイナーが、業界や企業において高い評価を受けているわけではない。そんな状況にもやもやした状況からネット上では「UIデザイナー不要論」まで飛び出すことに。「UI Crunch #2」はそのホットな話題「UIデザイナー不要説」について、徹底討論が繰り広げられた。 「UIデザイナー不要説」を書いた真意 最初のスピーカーとし
いま、UXを語るのはなぜ悩ましいのか？─長谷川恭久ロングインタビュー
いま、UXを語るのはなぜ悩ましいのか？─長谷川恭久ロングインタビュー 白石 俊平（HTML5 Experts.jp編集長） UXという言葉は、専門家ではない筆者のような人間からすると、少し「怖い」言葉です。 筆者にとってUXという言葉は、概念はわかる気がするものの捉えどころがなく、絶えず論争の的になっている…そんな言葉に思えていました。 とはいえやはり、いまの時代Webに携わるものとして、UXに対する興味は尽きません。そこでHTML5 Experts.jpでUXを取り上げてみたいと思ったのですが、「炎上」は怖い…。 そもそも、なんでこんなにUXは論争が尽きないのか。「UXに関心はあるし、仕事として関連もあるのだけれど、どこから学べばいいのかよくわからない」筆者のような人間に、何を伝えることができるか。特集を行うにあたり、エキスパート No.37の長谷川恭久さんに相談させていただくことにしま
壁を越えろ！WebRTCでNAT/Firewallを越えて通信しよう
こんにちは！がねこまさしです。前回は複数人の同時通話まで実現しました。社内で使うには十分なレベルです。 しかし本格的な企業ユースとなると、まだまだ障害があります。会社と家、自社と別の会社さんなど、実際に通信しようとするとNATやFirewallといった壁が立ちはだかります。 NATを越えよう NATの役割は NAT(+IPマスカレード)は企業だけでなく、一般家庭でも使われています。ブロードバンドルーターやWiFiルーターでは、1つのグローバルIPアドレスを、複数のPCやデバイスで共有することができます。このとき、NATには2つの役割があります。 インターネットにつながったグローバルなIPアドレスと、家庭内/社内のローカルなネットワークでのIPアドレスの変換 複数のPC/デバイスが同時に通信できるように、ポートマッピングによるポート変換 WebRTCでNAT越しに通信すること考えてみましょう
エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方
エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方 酒巻瑞穂（html5jエンタープライズ部） 現在エンタープライズシステムの開発現場では、シングルページアプリケーション（SPA: 単一のWebページで構成されているWebアプリケーションのこと）アーキテクチャの採用が模索されるなど、根本的な開発パラダイムにおいて大きな変化が起きようとしています（全体的にどのような変化があるかはエキスパートNo59の佐川夫美雄さんの書かれた「JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例」によくまとまっています）。 こうした変化の一部を支えているのが、JavaScriptによるMVCフレームワークです。数あるフレームワークの中で、実際にどのフレームワークを採用するかというのは、開発コストだけではなく学習・運用コストにも関わる、非常に大きな
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を操作してインタラクションを付与してきました。 しか
ServiceWorker解説 – オフラインWebアプリケーション開発技術の最前線
ServiceWorker解説 – オフラインWebアプリケーション開発技術の最前線 岩瀬 義昌（HTML5 Experts.jp編集部） 今月上旬5月8日に、W3CよりServiceWorkerの草案初版が提示されました。ServiceWorkerは、オフラインWebアプリケーションの開発者が問題と考える点を解決する、非常に魅力的な仕様です。日本語の情報がほとんどないこのタイミングで、HTML5 Expert.jp編集部が解説いたします！ ServiceWorkerとは ServiceWorkerは、リソースの永続的なキャッシュを可能にする、およびWebアプリケーションのリソース要求の処理を可能にする新しい機能です。Webページを開く前であっても（ネットワークの接続/切断の有無にかかわらず）、独自の処理を挟み込めるのがポイントです。クライアント側に、一種のプロキシサーバがあるようにイメー
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
ネットワークのないところでも使え、サクサク動く。これからのWebゲームアプリが備えるべき機能とは「HTML5 Conference 2013」
ネットワークのないところでも使え、サクサク動く。これからのWebゲームアプリが備えるべき機能とは「HTML5 Conference 2013」 馬場 美由紀（HTML5 Experts.jp編集部） 今後モバイルWebアプリはどこを目指すのか──。このヒントが得られたのが、DeNA小原隆郎氏の「地下鉄 x サクサク x これからのWebゲームアプリが備えるべき8つの機能」というセッション。 小原氏は昨年秋にDeNAに入社。「@uupaaというネームは知っている人もいるかもしれないが、ほとんどこのような場所に出ることがない。今日会えた人はラッキーだと思う」という前置きをしてセッションは始まった。 SPAでページをまたがった音楽の再生が可能に 同セッションは検証は必要ながらも、小原氏自身が気になっているWebアプリの技術的なトピックスを紹介するというもの。 まず最初に取り上げたのはネイティブに
「英語のオープンソースドキュメントを日本語翻訳する」html5j英語部キックオフレポート
「英語のオープンソースドキュメントを日本語翻訳する」html5j英語部キックオフレポート 谷拓樹（株式会社サイバーエージェント） html5j英語部では、英語のオープンソースドキュメントを日本語に翻訳する活動を開始しました。そのキックオフとなる11/1（土）に開催された、html5j英語部のイベントの報告をします。 世界を日本に。日本から世界へ。Web開発者のための架け橋となる。 html5j英語部の谷です。html5j英語部では、英語のオープンソースドキュメントを日本語に翻訳する活動を行っています。ただそれだけではなく、日本語の情報を世界に届けるために、日本語を英語に翻訳するといった活動にも今後取り組んでいく予定です。 今回のキックオフイベントでは、部長の斎藤（@cssradar）からこうした英語部発足の目的についての話や、英語部での翻訳フローなどについてのプレゼンテーションをおこないま
モバイル対応Webアプリケーションのキャッシュ戦略
近年、モバイルブラウザ上でアプリケーションを作るにあたり、JavaScriptでも不安定な回線上で動作する設計が求められるようになってきました。 ここでは、「オフラインファースト」をはじめとする、モバイルなどの回線が不安定な状況を想定したWebアプリケーション設計に関して、キャッシュ方法やよく使われるAPIなどを紹介したいと思います。 「オフラインファースト」とは2012年ごろから提唱されていた、「回線がオフラインになることを前提にアプリケーションの設計を行う思想」のことで、オフライン前提に設計することにより回線状況によらないサービス提供や、効率的な通信をベースにした高速な動作を目指すものです。 それではここからはキャッシュ方法とそれぞれ向いているコンテンツの紹介を行います。 読み込みデータのキャッシュ ApplicationCacheやlocalStorage、オンメモリキャッシュなどを
テストを書いてWebを前進させよう！「Test the Web Forward Meetup (仮), Tokyo #1」
テストを書いてWebを前進させよう！「Test the Web Forward Meetup (仮), Tokyo #1」 矢倉 眞隆（myakura） こんにちは。html5jテスト部の部長を務めています矢倉です。 今回は9月14日に行われた「Test the Web Forward Meetup (仮), Tokyo #1」について報告します。 Test the Web Forwardとは 今回のイベントをレポートするにあたり、まずはTest the Web Forward (TestTWF) について説明しないといけませんね。Test the Web Forwardとは、HTMLやCSSなどW3Cが策定している仕様のテストケースを、参加者で一緒に書こうというコミュニティイベントです。 W3Cの仕様が勧告されるには、仕様の実装が必要なのですが、その実装が正しいかを確かめるテストケースも
モダンな言語でHTML5を開発しよう！ 俯瞰して理解するaltJSの比較 (前篇 – TypeScript, CoffeeScript, Haxe)
※いずれの言語もマルチプラットフォームであり、Windows, Mac OS Xともにどちらでも利用することができます。 比較対象のサンプル サンプルとしてシンプルなスライドショーのWebコンテンツを用意しています。それぞれの言語でどのように記述して実装するのか、また生成されたJavaScriptがどのようなものであるか確認していきましょう。このサンプルでは言語の特性を紹介するために、実用的な要素として「クラス構造の利用」「既存JSライブラリの利用」「ユーザー操作」を含めています。 デモを開く 「Change Photo」ボタンをクリックすると写真が切り替わります。CSS3の3D TransformsをjQueryを用いて制御します（確認の際には、CSS3の3D Transformsが利用できるブラウザをご利用下さい） 概要 TypeScriptはマイクロソフトが開発するオープンソースの言
マイクロソフト中の人が徹底解説！<br>InternetExplorer 11 F12 開発者ツールの新機能
マイクロソフト中の人が徹底解説！ InternetExplorer 11 F12 開発者ツールの新機能 物江 修（日本マイクロソフト株式会社 Webエバン...） Windows8.1に搭載されるInternet Explorer 11には、より機能強化されたF12開発者ツールが搭載されています。今回の記事ではF12開発者ツールの主要な新機能について紹介します。 Windows 8のアップデート版である新しいOS Windows 8.1の配布が10月18日から開始されます。 この配布はWindows 8用のアプリ ストアであるWindowsストアを介してダウンロード提供され、Windows 8ユーザーであれば、誰しもが無償でアップグレードすることができます。 Windows 8.1には InternetExplorer(以降、IE) の最新バージョンであるInternetExplorer
HTML5Experts.jp
進化するWeb ～Progressive Web Appsの実装と応用～(de:code2018より) 物江 修 2018年5月に開催された日本マイクロソフト主催のイベントde:code 2018で「進化するWeb ～Progressive Web Appsの実装と応用～」というセッションを担当しました。 イベントに参加できなかった...
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
