これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発 花谷拓磨 Vue.jsでUniversalなSPAを開発できるフレームワークであるNuxt.jsのバージョン 1.0のリリースがいよいよ近づいてきました。 本稿では、シングルページアプリケーション（以下 SPA）開発によって生じた問題を解決するために生まれたサーバーサイドレンダリング （以下 SSR）を中心に、Vue.jsでの開発を強力にサポートするNuxtについて、その魅力と基本的な使い方をご紹介いたします。 Nuxt.jsとは？ Nuxt.js（ナクストと読みます）はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。 特にUIの描画サポート に主眼をおき、SSRをはじめとした様々なサポートを行ってくれるものとなります
Angular 2で10万行書いた人にナマの声を聞く─奥野賢太郎×白石俊平
Angular 2で10万行書いた人にナマの声を聞く─奥野賢太郎×白石俊平 白石 俊平（HTML5 Experts.jp編集長） 2016年9月のAngular 2リリースは、2016年のWeb業界で、最も重要なトピックの一つだったと言っても過言ではないでしょう。 本稿では、Angular 2を正式リリース以前から仕事で使い倒していた奥野賢太郎さん（armorik83）と、不肖白石が、Angular 2開発を実際にやってみている同士で語り合ってみました。 実際にAngular 2開発で苦労してきた二人のナマ声です。今後Angular 2を仕事で採用しようと考えている方々には必見の内容です（って、自分が出ている記事を紹介するのも微妙ですが…）。 編集部注: Angular 2の正式名称は「Angular」ですが、現状だと「AngularJS 1.x」のことを呼称していると誤解される可能性が高
Electronプログラミング入門 — インストールからミニブラウザ構築まで
Electronプログラミング入門 — インストールからミニブラウザ構築まで 古川陽介 Electronとは、デスクトップクライアントを作るためのフレームワークです。クロスプラットフォームで動作することをサポートしているため、Electronで作ったアプリケーションはMac、Windows、Linuxの環境でも動作します。Atomと呼ばれる GitHub社製のエディタがあります。 ElectronはAtomを作る際にフレームワークとして作られました。以前はAtomShellと呼ばれていましたが、Electronとして名前を変更し、2016年にはversion 1.0がリリースされるまでに成長しました。 ElectronはJavaScript / HTML / CSSを使ってクライアントアプリケーションを作成します。中のアーキテクチャはChromiumとNode.jsで作られており、Web開
Angular2の失敗しない始め方〜「ng-japan 2016」セッションレポート〜
Angular2の失敗しない始め方〜「ng-japan 2016」セッションレポート〜 仲 裕介（HTML5 Experts.jp副編集長） この記事は、「ng-japan 2016」のセッションレポートです。講演内容を再現していますが、ニュアンス等伝えきれない場合があるので、気になるところは、記事末尾に掲載の講演資料やYoutube動画でご確認ください。 Angular2の失敗しない始め方 / 稲富駿氏 株式会社トップゲートの稲富 駿氏によるセッションです。セッション資料や配信動画は記事末尾でご確認ください。このセッションでは、大きく3つの点について触れられました。それぞれのポイントを書き起こします。 Angular2に関するよくある質問や誤解について Angular2を構成する基礎技術について Angular2を学ぶために必要なこと 1. Angular2に関するよくある質問や誤解につ
Babelで始める！モダンJavaScript開発
Babelは最低限の機能をIE8以降で、フル機能をIE10以降でサポートします。 （実際にはIE9以降から使用することを推奨します） 当初Babelは6to5と呼ばれていましたが、ECMAScript7の仕様なども取り込むようになったため、バージョンを想定しないBabelという名前に変更されました。 Babelの特徴 Babelと同じように「トランスパイルすることでJavaScriptのコードを出力する」ツールにはTypeScriptやCoffeeScriptなどがあります。 それらと比較するとBabelは「ECMAScript標準仕様をベースにしている(*)」という特徴があります。 (*) 実際にはJSXもサポートしているため、必ずしもECMAScript標準仕様のみをサポートしているわけではありません。 このため、「いずれ標準実装される仕様を先取りできる」、「Babel自体が廃れても同
【エキスパートガチトーク】Web技術の未来を「Extensible Web」から探る！ (前編)─HTML5は問題だらけ？
【エキスパートガチトーク】Web技術の未来を「Extensible Web」から探る！ (前編)─HTML5は問題だらけ？ 白石 俊平（HTML5 Experts.jp編集長） 読者の皆様は、「Extensible Web」というキーワードについてご存知でしょうか。 Extensible Webは、現在のWebが抱える大きな問題点を解決しようとする考え方であり、ムーブメントです。 その問題点とは、誤解を恐れず言うなら、「HTML5の流れで生み出された様々なAPIが実際にはあまり使われておらず、役に立っていない」という点に尽きると思います。 Extensible Webはそうした問題を解決するために、「開発者によって拡張可能なWebを目指そう」と呼びかけます。そのために必要なのは、特定のユースケースを想定した粒度の粗いAPIではなく、粒度が細かく、より基本的な機能を提供する低レベルなAPIを
【速攻レビュー】よりモバイルフレンドリーになった「Twitter Bootstrap v4」
【速攻レビュー】よりモバイルフレンドリーになった「Twitter Bootstrap v4」 佐川 夫美雄（Ashiras, inc.） Twitter Bootstrapバージョン4アルファ版が8月19日に公開されました。既にご存知の通りTwitter BootstrapはレスポンシブでモバイルファーストなCSSフレームワークです。さっとレスポンシブなサイトを構築するのに多くの方が利用しているのではないかと思います。この記事ではTwitter Bootstrapバージョン4の変更点について、筆者が「これは！」と思ったところをピックアップしてまとめます。 バージョン4の変更内容はGitHub上のissueで確認することができます。この中で筆者が注目している事項は LESSからSASSへの変更 アイコン（グラフィックアイコン）の削除 IE8のサポート終了とjQuery1系からjQuery2系
【及川卓也・清水亮・羽田野太巳・藤村厚夫】すごい人達呼んで「Webは死ぬか？」をマジメに語り合ってもらった（後編）
【及川卓也・清水亮・羽田野太巳・藤村厚夫】すごい人達呼んで「Webは死ぬか？」をマジメに語り合ってもらった（後編） 白石 俊平（HTML5 Experts.jp編集長） スゴい人たちに集まってもらって、「Webは死ぬか」について語り合っていただいたスペシャル企画。前半は「Webメディア・コンテンツ」について、それぞれのご意見を伺いました。 メディアビジネスからCookie、ディープラーニングまで──ビジネス面に注目した 前半とは異なり、後半はWebのテクノロジー面にフォーカスして、「死ぬか？」を論じていただきたいと思います。今回は、（含蓄を多量に含んだ）脱線多めで失礼します！ 「ブラウザ」の存在感が薄れていく時代 白石 前半はビジネス面に注目してお話いただいたので、後半はテクノロジー面にフォーカスしていきたいと思います。いわば、「Webテクノロジーは死ぬか？」というお話になるかと思います。
すごい人達呼んで「Webは死ぬか？」をマジメに語り合ってもらった-前編- | HTML5Experts.jp
【及川卓也・清水亮・羽田野太巳・藤村厚夫】すごい人達呼んで「Webは死ぬか？」をマジメに語り合ってもらった（前編） 白石 俊平（HTML5 Experts.jp編集長） 今また、「Webの死」を予言する論調をそこここに見かけます。モバイルやウェアラブルといった新たなコンテキストが、プラットフォームネイティブな技術の優位性を後押ししているだけではなく、Webコンテンツの消費の仕方を大きく変え、Web上で成り立っていたビジネスモデルをも脅かしつつあります。 本当にWebはヤバいのか、気になってしょうがないので、スゴい人たちに集まってもらって、「Webは死ぬか」について語り合っていただきました。Webを取り巻く様々な論点を包括的に議論でき、貴重な場になったのではないかと自負しております。 Webに関わる人にとっては必読の対談だと思います！でもこの記事、長くて濃いので、心してかかってくださいね:-
HTML5でサイトを高速化─wri.peで学ぶ、イマドキのWebアプリの作りかた（後編）
HTML5でサイトを高速化─wri.peで学ぶ、イマドキのWebアプリの作りかた（後編） 増井 雄一郎（FrogApps, Inc.） 前回の記事では、 wri.peの紹介と、HTML5のApplication Cacheを使ったHTMLや画像などの読み込み高速化の話をしました。今回は、Web StorageのlocalStorage/sessionStorageを使い、Ajax通信部分と表示の高速化を行う手法を説明しましょう。 localStorageを用いた通信と表示の高速化 前回のApplication Cacheで、HTMLの読み込みが高速化されました。これでも十分速くはなったのですが、画面に全ての情報が表示されるまでには、ちょっと時間がかかります。 wri.peではメモの一覧や、メモ本体の読み込み・保存はXHR(XMLHttpRequestの略。Ajax通信で使うモジュール名)を
乗るしかない！Reactのビッグウェーブに！─isomorphic tokyo meetupに参加してきた
乗るしかない！Reactのビッグウェーブに！─isomorphic tokyo meetupに参加してきた 白石 俊平（HTML5 Experts.jp編集長） おはようございます。編集長の白石です。 昨日（2015年4月30日）、isomorphic tokyo meetupに参加してきました。 というのも実は近々、HTML5 Experts.jpでは「Webアプリケーション・アーキテクチャ」に関する特集を行う予定なのですが、そこでキーワードとして挙げられていたのがisomorphic。 サーバサイドとクライアントサイドでコードの共有を促進するのが主な目的の一つ、というところまでは理解できたのですが、実際のところ、アーキテクチャはどう変わるのか？ それを探りたいと思っていたところ、ちょうどよくイベントの開催がアナウンスされていたので、急遽取材させていただきました。 取材を快く受け入れてく
誰でもハイパフォーマンス！OnsenUIが変えるハイブリッドアプリ開発の常識ーng-japan 2015
誰でもハイパフォーマンス！OnsenUIが変えるハイブリッドアプリ開発の常識ーng-japan 2015 佐川 夫美雄（Ashiras, inc.） この記事は、Angularをテーマとした日本初のカンファレンス 「ng-japan」のイベントレポート（第2回目）です。 はじめに HTML5ハイブリッドアプリケーションとは、内部の実装にHTML5が利用されているモバイルアプリケーションです。アプリの内部実装にHTML5を使うことでクロスプラットフォーム対応が可能になりますが、その代わり問題となるのがUIとパフォーマンスです。このセッションでは、Angularの上に構築されたUIフレームワークであるOnsen UIを紹介しながら、Angularでどうすれば高速かつ快適なUIを持つモバイルアプリを作れるかについて話します。 AngularとOnsen UIで作る最高のHTML5ハイブリッドアプ
キミはionicを知っているか？AngularJS+PhoneGap+美麗コンポーネント群！
キミはionicを知っているか？AngularJS+PhoneGap+美麗コンポーネント群！ 金井 健一（フリーランス） ionic 概要 ionicはそのサイトのデザインからも見てわかるとおり、シンプルかつ美しいUIを取り揃えたコンポーネント群で、Apache Cordova を拡張して作られているフレームワークです。 また、動的なUIコンポーネントを実装するために、 AngularJS を採用してる点もその特徴の1つです。 ionicがサポートしているプラットフォームは、iOS 6+とAndroid 4+です。（ただしAndroidについては、2.3+でもいくつかの機能を提供してるとのこと） 現状ではこの2つのプラットフォームのみですが、Windows PhoneとFirefoxOSについても今後対応を進めていくようです。 特徴 Apache Cordovaを拡張して作られている、モバ
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を操作してインタラクションを付与してきました。 しか
理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference
理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。 font-size line-height vertical-align inline-block トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
Webエンジニアが、量産品のハードウェアを作るようになるまで─Cerevoの中の人に聞いてみた！
Webエンジニアが、量産品のハードウェアを作るようになるまで─Cerevoの中の人に聞いてみた！ 白石 俊平（HTML5 Experts.jp編集長） Arduinoなどのマイコンのおかげで、ハードウェア開発、特にプロトタイプづくりに関するハードルはだいぶ下がりました。自分（白石）のような人間でも、LEDをチカチカさせるくらいのことはやってみたことがあり、「こんなに簡単にハードを制御できるなんて！」と感動したのを覚えています。ただ、プロトタイプを一度作ってみると、更なる大きな疑問がわいてきます…身の回りにあるハードと、自分の作ったプロトタイプの落差に驚愕するのです。 自作したプロトタイプを、カッコいい量産ハードウェアに持っていくためには、どんな作業が必要なの？ 今回はそんな素朴な疑問に答えてもらうべく、Cerevoさんにお邪魔してプロダクトマネージャーの國舛さんにお話を聞いてきました。 C
【Webデザイナー必読】IoT時代のデザイン思考を探る─久下玄×秋葉秀樹 デザイナー対談
【Webデザイナー必読】IoT時代のデザイン思考を探る─久下玄×秋葉秀樹 デザイナー対談 白石 俊平（HTML5 Experts.jp編集長） IoTの時代、それはモノのデザインとWebのデザインが交錯する時代と言えます。 そんな時代に必要とされるデザイン思考とはなんでしょう？モノのデザインとWebのデザイン、そこにある違いは、そして共通するものは何でしょう？ この記事ではそんな疑問の答えを探るべく、この記事では、プロダクトデザインとWebデザインのプロフェッショナル2人を引き会わせて、デザインについて、デザイナーについて、UXについて、Webについて、IoTについて、気になることを全部語っていただきました。 プロダクトデザインとWebデザイン、その境界線から見える景色を、それぞれの分野のエキスパートが語ります。 〜登場人物紹介〜 久下玄（くげはじめ）: デザイナー／エンジニア／ストラテジ
PolymerでMaterial Designなチャットアプリを作ろう
今年注目のオープンWebテクノロジーのひとつに、Web Componentsが挙げられると思います。HTML5Experts.jpでも今まで幾度も関連記事、Polymer.jsについての記事が紹介されてきました。今回は実際に、PolymerとMaterial Designのデザインコンセプトを用いて、視覚的にもユーザエクスペリエンスにも優れたチャットアプリを実際に作ってみましょう。 まず始める前にこのライブデモ、Kitteh Anonymousをデスクトップまたはモバイルのモダンブラウザで実際に試してみてください。ここでは、このデモの簡略版であるLiteバージョンを実際に作成する方法をステップ・バイ・ステップで紹介したいと思います。 必要な知識 Polymerの基礎知識 パッケージマネージャ、Bowerの基本的な使い方（Polymerと依存するファイルをインストール、アップデートするのに使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
