タグ

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

  • 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以上) それぞれのインストール方法について、簡単に紹介し

    Googleのベストプラクティスに沿ったモダンな製作の出発点「Web Starter Kit」
  • モバイルWeb開発に役立つ!Chrome DevToolsの新機能「デバイスモード」

    モバイルWeb開発に役立つ!Chrome DevToolsの新機能「デバイスモード」 Tomomi Imura(Slack) 今回のGoogle I/OはAndroidに特化していた傾向が強く、WebテクノロジーChromeの扱いが比較的小さかったせいもあり、多くのWebフロントエンドディベロッパーは不満を感じた部分もありました。 そこでその中の数少ないChromeのセッションの中から、私が興味深く感じたクロスデバイス開発にはこの先欠かせなくなると思われる Chrome DevToolsの新機能についてレポートします。 このセッションを行ったPaul Bakaus氏(以下、ポール氏)は、かつてjQuery UIやAvesゲームエンジンを開発したことでも知られています。一時期日に在住していたこともあるので、この記事を読んでいる皆さんには既になじみのある方かもしれません。現在はGoogle

    モバイルWeb開発に役立つ!Chrome DevToolsの新機能「デバイスモード」
  • Googleはなぜモバイルに力を入れるのか?これからのWebパフォーマンスで注力すべきポイント

    こんにちは、川田です。Googleはここ最近、デスクトップ向けWebに対して、ほとんどの関心を失っているように見えます。HTML5ブームも過ぎて、やることがなくなってしまったのでしょうか?……いえいえ、そうでもありません。昨今の待ったなしで進む技術革新の中で、彼らは「ある問題」と戦っているようです。 Webは「モバイル」中心の時代へ移っていく すでにご存知の方も多いと思いますが、GoogleのビジネスモデルはWebに強く依存しています。2014年1Qの決算で、Googleは全売上の約68%が自社のWeb系サービスの広告収入であり、約22%はAdsenseなどの他のWebサイト向けの広告であると報告しました。Webに依存したビジネスが実に9割を占め、1日に約120億円の収入をWebから得ています。もっと簡単に言えば、Webだけで、タイの国民全員の給料分ぐらい稼いじゃってます。当然、Webの進

    Googleはなぜモバイルに力を入れるのか?これからのWebパフォーマンスで注力すべきポイント
  • WebRTCに触ってみたいエンジニア必見!手動でWebRTC通信をつなげてみよう

    WebRTCに触ってみたいエンジニア必見!手動でWebRTC通信をつなげてみよう がねこまさし(インフォコム株式会社) こんにちは! がねこまさしです。前回はWebRTCでカメラを使いましたが、今回は通信をしてみましょう。 ※こちらの記事は2014年に書かれました。2016年6月のアップデート記事がありますので、そちらもご参照ください。 WebRTCの通信はどうなっているの? WebRTCでは、映像や音声などリアルタイムに取得されたデータ(バイトストリーム)を、ブラウザ間で送受信することができます。それを司るのが RTCPeerConnection です。 RTCPeerConnectionには2つの特徴があります。 Peer-to-Peer(P2P)の通信 → ブラウザとブラウザの間で直接通信する UDP/IPを使用 → TCP/IPのようにパケットの到着は保障しないが、オーバーヘッドが

  • 攻撃シナリオを使って解説するApplicationCacheのキャッシュポイズニング

    攻撃シナリオを使って解説するApplicationCacheのキャッシュポイズニング 吾郷 協 最近ウィンナーと燻製の自作にはまっています。@kyo_agoです。 この記事は1/28に行われた、第44回HTML5とか勉強会(HTML5とセキュリティ編)で発表した内容を元に書いています。 今回はApplicationCacheのキャッシュポイズニングに関してお話したいと思います。 最初に用語について説明します。 キャッシュポイズニングとは、キャッシュに対して攻撃コードを送り込み、そのキャッシュ経由で攻撃コードを実行させる攻撃手法です。 Googleで「キャッシュポイズニングを検索」した場合、検索結果の上位はDNSのキャッシュポイズニングに関する内容がほとんどですが、最近はクライアントサイドのキャッシュポイズニングも話題に上がるようになっています。 「クライアントサイドのキャッシュポイズニング

    攻撃シナリオを使って解説するApplicationCacheのキャッシュポイズニング
  • 初心者でも絶対わかる、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最初の一歩>
  • NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(ハード組立編)

    NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(ハード組立編) 高橋 登史朗(牛久大仏システム担当(ただし、牛久大仏の...) 2012年11月からインテルが出荷をはじめたNUC (Next Unit of Computing)という製品群が自作系PCながら意外にひそかな(?)注目を集めています。※1 今回はこのNUCを使って、手のひらサイズの格安 WebSocket サーバーを立ち上げ、それで動くアプリを作ってみました。 NUCって何? NUCは、体にメモリやストレージなどを追加して自分で組み立てる、いわゆる自作パソコンの仲間ですが、その特徴は、10com四方の超小型でありながら、最新性能で格安ということです。 それは、こんな外観です。 手のひらサイズで総額3~7万円程度で仕上がるにも関わらず、ストレージはminiSSDCPUはCore i5も選べて無線 LAN・

    NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(ハード組立編)
  • JavaScript Promises、CSS変数、Quartz ComposerのプラグインOrigamiなど海外WEBテク20本を一挙公開

    JavaScript PromisesCSS変数、Quartz ComposerのプラグインOrigamiなど海外WEBテク20を一挙公開 斉藤 祐也(株式会社リッチメディア) 斉藤祐也の海外WEBテク定点観測<Issue.9: 2013/12/01-2013/12/31> 今月の定点観測は、JavaScriptにおけるPromises実装について、CSSの変数(Custom Properties)、Quartz ComposerのプラグインOrigamiなど合計20件の記事や動画などを紹介します。 注目ニュースピックアップ JavaScriptにおけるPromises実装について – HTML5 Rocks 原題: JavaScript Promises: There and back again これまでJavaScriptの『限界』であるシングルスレッドを解決するために、コールバ

  • JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例

    JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例 佐川 夫美雄(Ashiras, inc.) フロント開発の現場では、Java中心の開発から、HTMLCSSJavaScript中心の開発にかわりつつあります。今回は具体的な事例をもとに、実装アーキテクチャや開発インフラに、どのような変化が起きているかレポートします。 はじめに HTML5が2014年に正式勧告されることを受け、フロント業務アプリケーションに影響を与えています。より多くのことがHTMLCSSでできるようになり、現場レベルでは開発スタイルそのものの見直しも行われています。実際、私が担当しているプロジェクトではJava中心の開発からHTMLCSSJavaScript中心の開発へと開発環境を変えています。具体的に何をどのように変更しているのかを、私が担当しているプロジェクトの内容に沿ってご説明

    JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例
  • iOS7におけるMobile Safariの主な変更点

    iOS7上のSafariがどのように変化したかについて、Maximiliano Firtman氏(@firt)がブログで詳細に解説しています。 この記事では、同氏のブログから、Web制作者/開発者にとって重要と思われる情報を引用して、Web技術者にとっても大きな影響を持つこのアップデートについて紹介していきたいと思います。 元記事は非常に長大、かつ詳細なため、全てのポイントを紹介することはとてもできません。素晴らしい記事ですので、関心のある人は、ぜひ元記事を参照してください。 ちなみに、最初にガッカリさせることになってしまいますが、@firt氏によれば、「1.0以降最もバグの多いバージョンだ」(this is the buggiest Safari version since 1.0)だそうです… UIが大幅に変更、フルスクリーン(に近いサイズ)がデフォルトに Webブラウジングをしている

    iOS7におけるMobile Safariの主な変更点