タグ

ブックマーク / html5experts.jp (8)

  • PostCSSとcssnextで最新CSS仕様を先取り!

    どうも、Kaizen Platform, Inc.の@t32kです。今日はPostCSSについて解説しようと思います。PostCSSについてはそれを解説した同僚のスライドも素晴らしいので、そちらも参考にしてもらえば幸いです。 PostCSS とは何か // Speaker Deck PostCSSとはなにか? PostCSSは、Autoprefixerの作者でも有名なロシアのAndrey Sitnik氏が開発しているツールです。 postcss/postcss 公式のレポジトリのREADMEには以下のように書かれています。 PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax,

    PostCSSとcssnextで最新CSS仕様を先取り!
  • フレームワーク対決!Angular VS React仮想パネルディスカッション

    フレームワーク対決!Angular VS React仮想パネルディスカッション 吉川 徹 特集企画「アプリケーションアーキテクチャ最前線」では、さまざまな視点からアプリケーションアーキテクチャをエキスパートたちに語っていただきます。今回は、今話題のAngularJSなどのJavaScript MVCフレームワークの台頭と進化、そして新しいアーキテクチャであるFluxとそのフレームワークであるReactなどについて、既に先行して学んでいるエキスパートたちにその知見を聞いてみました。 今回はフレームワーク対決ということで、エキスパートたちがAngularReactという陣営に分かれ、それぞれのフレームワークについて疑問点をぶつけたり、議論したりする仮想パネルディスカッションという形式でお伝えします。単なるパネルディスカッションとは違って、キーワードは「プロレス」です。まさかりの投げ合い、di

    フレームワーク対決!Angular VS React仮想パネルディスカッション
  • 初心者でも絶対わかる、WebGLプログラミング<基礎知識編>

    HTML5に関連する技術のひとつに、WebGLがあります。WebGLは、ブラウザー上で3DCGプログラミングを実現できる技術です。今回のレポートでは、WebGLプログラミングの基礎知識についてご紹介します。 WebGLって? WebGLでどんなことができるのか──百聞は一見にしかず。まずは例を見てみましょう。demo内のスライダー部分をドラッグすることでカメラの位置などを任意に変更できますので、リアルタイムでレンダリングされていることがわかるでしょう。 (invalid jsdo.it code) このように、ブラウザー上でプラグインに頼ることなく、なめらかな表面、自然な影、高FPSでのリアルタイムレンダリング(アニメーション)など、まるで最近の家庭用ゲーム機にも匹敵する高度な3DCG表現ができるわけです。 WebGLは2013年10月現在、Chrome、Firefox、Operaで標準対

    初心者でも絶対わかる、WebGLプログラミング<基礎知識編>
  • よくある3つのデザインから考える、マークアップの最適解

    Web制作においてHTMLのマークアップには絶対の正解というものがありません。ページを制作しているとき、特にセマンティクスを意識したとき「このマークアップで正しいのだろうか」と悩むことがあると思います。 そんなマークアップについて考えるイベント「MarkupCafe」がhtml5jマークアップ部の主催のもと開催されました。「MarkupCafe」では参加者同士がチームに分かれ、お題となるデザインに対して議論し、自分たちならこうマークアップするといった考えを発表し合いました。 記事では「MarkupCafe」で出された”フッター”、”パンくずリスト”、”求人情報”の3つのお題をもとに、Web制作におけるマークアップの捉え方、誤った使い方をしがちな要素などについて考え、マークアップの最適解を探ります。 ※html5jは、HTML5などのWebプラットフォーム技術を使った「ものづくり」に関わる

    よくある3つのデザインから考える、マークアップの最適解
  • モバイルブラウザでもサクサクに動作する最適化6つのノウハウ

    「Webサイト・アプリ高速化テクニック徹底解説」第8回は、モバイルブラウザに向けた最適化について紹介します。 モバイル端末はPCに比べ、CPUやネットワークなどの性能面で劣ることからボトルネックの影響が出やすく、またゲーム開発など突き詰めたチューニングを行う場面では、特殊なノウハウも必要になります。 しかしきちんと最適化を行えば、その効果もその分著しく、比較的低スペックな端末や3G回線であっても、サクサク軽量なサービス提供が可能です。今回の記事では、その勘所をお伝えしたいと思います。 1. ボトルネックを取り除く まずはやってしまいがちなボトルネックの事例について、挙げていきたいと思います。前述のようにモバイル端末では、その性能からPCよりも顕著に、未最適化箇所が体感に影響を及ぼします。 仕事がらそこそこの数のアプリケーションを見てきましたが、モバイル向けに特化したチューニングができていな

    モバイルブラウザでもサクサクに動作する最適化6つのノウハウ
  • Bootstrap3超速レビュー!刷新されたグリッドシステムを理解しよう!

    Bootstrap3超速レビュー!刷新されたグリッドシステムを理解しよう! 白石 俊平(HTML5 Experts.jp編集長) 人気のCSSフレームワーク「Bootstrap」のバージョン3が正式にリリースされました。この記事では早速Bootstrap3をレビューし、特にグリッドシステムを掘り下げて解説してみます。 フラットデザイン採用、フルレスポンシブ! Bootstrap2からの変更点のリストは、公式のリリース文を参照してください。特に大きな変更点は以下のとおりです。 フラットデザインの採用 現在流行のフラットデザインを採用しました。ただこれは「流行りに乗った」のではなく、テーマの一つとして提供されているという位置付けのようです。 例えば以下は、Bootstrap3のボタングループです。 レスポンシブWebデザインの全面採用 以前までのBootstrapは、レスポンシブWebデザイン

    Bootstrap3超速レビュー!刷新されたグリッドシステムを理解しよう!
  • RAIZIN Coolで学ぶ、イマドキのWebサイトの作りかた

    HTML5 Canvasを利用した冷気の演出が話題となった「RAIZIN JAPAN」のデモサイト。エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ第二弾は、RAIZIN Coolの実装を徹底解説します。 HTML5 Canvasを利用した簡易的な冷気の演出 最近の仕事で実装したものが海外の、しかも米シリコンバレーで話題になりました。 社内でもそうした簡単にできる(けど簡単そうに見えない)簡易的な実装に注目が集まり、ちょっとした話題になったので解説しつつ紹介したいと思います。 ※今回の解説用に、jsdo.itに実際に動くサンプルをアップしました。 さらに今回の解説用に特別に動作が分かりやすくなるオプションも追加しています。↓ (invalid jsdo.it code) 今回紹介するのはRAIZINというエナジードリンクの新バージョン「Cool」のLPです。 当初は

    RAIZIN Coolで学ぶ、イマドキのWebサイトの作りかた
  • HTML5Experts.jp

    進化するWeb ~Progressive Web Appsの実装と応用~(de:code2018より) 物江 修 2018年5月に開催された日マイクロソフト主催のイベントde:code 2018で「進化するWeb ~Progressive Web Appsの実装と応用~」というセッションを担当しました。 イベントに参加できなかった...

    HTML5Experts.jp
  • 1