タグ

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

  • 「改めまして、Progressive Web Appsと申します」── Web UXの新たな基準を考える

    Progressive Web Appsというワードが世に出て約2年半が経ちました。2015年10月に開催されたChrome Dev SummitにてFlipkartの事例をもってお披露目となったそのコンセプトは、2018年現在までに徐々に成功事例を増やしながらWeb界隈の注目を集め、ついに先日(忘れもしない2018年3月30日!)iOS 11.3からiOSデバイスでも一部の機能が利用できるようになるまで成長しました。これは、まるで進学する我が子を見ているかのような、新年度にふさわしい晴れやかなニュースですし、いい機会なので PWAとは何かを改めて振り返ってみようと思います。 Webに足りなかったもの 私はWebが大好きです。リンクを1つクリックしたら(インストールなど煩わしい手続きなしで)すぐに新しいコンテンツを読めるのは最高の体験だなと常日頃感じています。ただし、今までのWebアプリの

    「改めまして、Progressive Web Appsと申します」── Web UXの新たな基準を考える
    takeodon
    takeodon 2018/04/19
  • 冬休みに読み返そう!2016年の年間読まれた記事ランキングTOP20

    HTML5 Experts.jp編集部の仲です。 HTML5 Experts.jpも開設から3年5カ月が経ちました。2016年もエキスパートやコントリビューターの皆様のご協力のお陰で、様々な技術トレンドをタイムリーに記事として取り上げることができました。また、白石編集長と豪華なパネリストによる対談企画や、実際に企業にお邪魔し、開発スタイルについてエンジニアの方々に直接話を聞いちゃうインタビュー企画にも挑戦しました。皆様、お楽しみいいただけましたでしょうか? 今年最後の記事は、恒例の「2016年の年間読まれた記事ランキングTOP20!」をお届けします。このランキングは、記事公開後1週間の閲覧数を元に作成しております。冬休みに気になる記事を読み返してみてはいかがでしょうか。 <1位> モバイルWebのUIを速くする基テクニックがわかる──Google I/O 2016 High Perfor

    冬休みに読み返そう!2016年の年間読まれた記事ランキングTOP20
  • 初心者でも絶対わかる、WebGLプログラミング<基礎知識編>

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

    初心者でも絶対わかる、WebGLプログラミング<基礎知識編>
  • 初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩>

    初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩> 小山田 晃浩(株式会社 ピクセルグリッド) WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま

    初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩>
  • HTML5の技術だけで実装!「YouTubeみたいなWebGLプレーヤー」とは?

    HTML5の技術だけで実装!「YouTubeみたいなWebGLプレーヤー」とは? 松田光秀(jThree合同会社) この記事では、HTML5 Japan Cup 2014で優秀賞を頂いた「YouTubeみたいなWebGLプレーヤー」で利用されている技術を解説します。 はじめに 「YouTubeみたいなWebGLプレーヤー」はコンテンツそのものとは分離された、オープンソースJavaScriptライブラリ「jThree」のプラグインです。オープンソースとして公開していますので、誰でも自身の作品に差し替えてブログなどに掲載することができます。WebGLの描画部分は全てjThreeで管理しています。この記事では、プレーヤーで採用している2つのHTML5 APIとjThreeの概要をご紹介します。 プレーヤーの機能 このプレーヤーは、まるで動画のごとくWebGLコンテンツを楽曲付きで再生できます。動

    HTML5の技術だけで実装!「YouTubeみたいなWebGLプレーヤー」とは?
  • HTML5で実現できる!環境光に合わせたレスポンシブなUI

    HTML5で実現できる!環境光に合わせたレスポンシブなUI Tomomi Imura(Slackフロントエンド開発やデザインに携っている皆さんにとって、ここ数年間「レスポンシブ・ウェブ」についての話題は避けて通れないものとなっているでしょう。モバイルやタブレット上でも、ユーザー・エクスペリエンスを失うことのないウェブを表現するには、CSS3 Media-queriesが欠かせないものとなってきました。 それでは実際、レスポンシブ・ウェブとは何についての対応(レスポンシブ)なのでしょうか。 現在のところ、私たちがいうレスポンシブ・ウェブデザインとは、どんなスクリーンの幅や表示領域、デバイスの画面解像度や画面の縦横の向きにも対応したウェブデザイン、というのが事実上の定義となっているようです。 そこで今回、私はその定義を超えたレスポンシブ・ウェブのユースケースについて考えてみました。 太陽光

    HTML5で実現できる!環境光に合わせたレスポンシブなUI
  • 1