タグ

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

  • Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーasm.jsを高速に動作させる新しいコンパイラーターゲットWASMとは? | HTML5Experts.jp

    現在はその仕様策定が固まり、ブラウザへの実装も済み、リリースを待つばかりです。またコンパイラへの実装も進んでいます。特にBinaryen(後述します)への最適化処理の実装のおかげで、asm.jsより高速に実行できるようになりました。 下記のグラフ(MozillaのHacksブログより引用)はasm.jsとWASMの速度を比較したものです。値はネイティブの実行スピードに対する相対的な速度を表していて、1に近づけは近づくほどネイティブに近いスピードで動いていることを表しています。Bulletを除く全てのベンチマークでasm.jsより高速に動いています。これはコンパイラの行う最適化処理のおかげです。 この評価は2016年10月末の時点に、Intel Core i7-2600 @ 3.40GHzで動作するLinux版 64-bit Firefox 52 (Nightly)で計測されました。現在は最

    Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーasm.jsを高速に動作させる新しいコンパイラーターゲットWASMとは? | HTML5Experts.jp
  • Firebaseで楽々シグナリング──WebRTC入門2016番外編

    こんにちは! 2014年に連載した「WebRTCを使ってみよう!」シリーズのアップデートとしてお送りしているこの連載ですが、今回はもとの連載にはなかった内容を番外編としてお届けします。 httpsのハードル 前回は複数人、複数会議室で利用できるようにして、実用的なアプリを作る準備ができました。ところが実際に使おうとすると、Chromeセキュリティポリシーと向き合わなくてはなりません。 「getUserMedia()やService Workerなどの強力なAPIは、セキュアな環境でなくては利用できない」というポリシーは今のWebの状況に合わせたものだと思います。では、その環境をどうやって用意すればよいのでしょうか? もちろん証明書を取得して、きちんとサーバーを立てるのがまっとうなやり方です。最近はLet’s Encryptなど無料で証明書を発行するサービスもあります(参考:“Let’s

    Firebaseで楽々シグナリング──WebRTC入門2016番外編
    t_furu
    t_furu 2017/03/02
    WebRTC のシグナリング部分を Firebase のりアルタムデータベースで実装 / 実装楽そう試す。
  • Cordovaは今やMicrosoftが主導!?最新状況と基本を素早く再チェック!

    Cordovaは今やMicrosoftが主導!?最新状況と基を素早く再チェック! 田中 正裕(アシアル株式会社) Web技術でアプリ開発2016特集・第二弾は、Cordovaの最新状況と基をご紹介。その歴史からプラットフォーム/ライブラリの特徴、ネイティブな機能を呼び出す方法などを解説していきます。 概要 CordovaはPhoneGapと呼ばれていた時代を含めると、8年以上の歴史があります。PhoneGapが産声を上げたのは2008年、Nitobi社がハッカソンでPhoneGapを発表しました。オープンソースで提供されていたPhoneGapは注目され、2011年にはNitobiはAdobe社に買収されます。その結果、オープンソースで提供されているフレームワーク(PhoneGap体)はCordovaと名前がつけられ、Apache Foundationの仲間入りします。 その結果、Ad

    Cordovaは今やMicrosoftが主導!?最新状況と基本を素早く再チェック!
    t_furu
    t_furu 2017/02/15
    “Hello, World” / ネイティブ機能も呼び出せる
  • Firebaseで作る簡単リアルタイムウェブアプリケーション(前編)

    Firebaseは2014年10月にGoogleに買収されたことで一躍有名になったBaaS(Backend as a Service)です。記事ではちょっとしたリアルタイムウェブアプリケーションを作りながらFirebaseの機能を紹介します。 Firebaseとは Firebaseはデータストレージ、ユーザー管理などアプリケーションのバックエンドとして必要となる機能をサービスを提供することで、アプリケーション開発者がクライアントサイドの開発に集中できるようにしてくれるBaaS(Backend as a Service)の一種です。 2014年10月にGoogleに買収され、Google Cloud PlatformGCP)の一員となりました。この買収によりGCPにはPaaS(Platform as a Service)としてGoogle App Engine、IaaS(Infrastr

    Firebaseで作る簡単リアルタイムウェブアプリケーション(前編)
  • Googleが語る、WebRTCテクノロジーの最前線

    こんにちは、編集長の白石です。 日は、WebRTC Conference 2016に来ております。 WebRTCの「今」をお伝えするレポートを、HTML5 Experts.jp編集部一同よりお送りいたします。 まずは基調講演より。「Status Update on WebRTC from Google」と題した、GoogleプロダクトマネージャーWebRTC ニコラス・ブルーム氏によるセッションです。 ブルーム氏のセッションは非常に専門性が高く、情報量も凄まじかったため、ここではポイントを絞って簡潔にお伝えいたします。 セッションのスライドは以下のURLからからご覧いただけます(Google Slides)。 WebRTC Status Update WebRTCのエンドポイントは30億台! まずセッションは、WebRTCの5年間についてのサマリーから始まりました。 WebRTCは、5年

    Googleが語る、WebRTCテクノロジーの最前線
    t_furu
    t_furu 2016/02/17
    音声の出力デバイスを選べるjavascript api/"canvasで加工した動画をWebRTCで送信…といったことも可能になる"
  • シグナリングサーバーを応用! 「WebRTCを使って複数人で話してみよう」

    こんにちは! 前回はシグナリングサーバーを動かして、WebRTCでPeer-to-Peer通信をつなぐ処理を作りました。最後に書いた通り、前回の実装ではサーバーあたり2人だけしか同時に通知できません。今回はこれをもっと実用的にしていきましょう。 ※今回もNode学園祭2013で発表した内容と共通の部分が多いです。その時の資料も併せてご参照ください。 ※こちらの記事は2014年に書かれました。2016年8月のアップデート記事がありますので、そちらもご参照ください。 複数会議室を作ろう 前回作ったのは、いわばカップル1組限定サイトのシングルテナントアプリでした(左)。これを複数組が共存できる、マルチテナント(複数会議室)のアプリに改造します(右)。 複数組が共存できない理由は、シグナリングの通信が同じシグナリングサーバーに接続している全員に飛んでしまうからです。これを混線しないように分離してあ

    シグナリングサーバーを応用! 「WebRTCを使って複数人で話してみよう」
    t_furu
    t_furu 2015/12/11
    複数で会話
  • WebRTCに触ってみたいエンジニア必見!手動でWebRTC通信をつなげてみよう

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

  • ネイティブでもWebRTCを使おう!―Android/iOSでWebRTC

    ネイティブでもWebRTCを使おう!―Android/iOSでWebRTC がねこまさし(インフォコム株式会社) こんにちは!今回はGoogle I/O 2015の小セッションから、Justin UbertiさんとSam Duttonさんによる、”Video chat for Web, Android and iOS”のお話をお届けします。このセッションではWebRTCを使ってビデオチャットアプリを作る方法について、WebRTCの中の人であるお二人が説明してくれました。 WebRTCはWeb Realtime Communication の略で、Webブラウザ上でカメラやマイクの映像/音声を取得したり、他のブラウザと通信するための技術です。過去のHTML5Experts.jpの記事に解説がありますので、併せてそちらもご覧ください。 HTML5でWebRTCを使ってみよう!「カメラを使ってみ

    ネイティブでもWebRTCを使おう!―Android/iOSでWebRTC
  • 『現実世界をWeb化する』「Physical Web」そして「Eddystone」について詳しく聞いてきた!

    『現実世界をWeb化する』「Physical Web」そして「Eddystone」について詳しく聞いてきた! 白石 俊平(HTML5 Experts.jp編集長) 読者の皆様、「Physical Web」って知っていますか? 昨年10月、Googleが発表したIoT技術で、iBeaconなどのBluetooth Low Energyを活用した技術と、Web技術者にとっては馴染みの深いURL (URI)を組み合わせた技術です。 IoTに関心のあるWeb技術者であればスルーは許されない「Physical Web」について、詳しい人(株式会社リクルートテクノロジーITソリューション統括部 アドバンスドテクノロジーラボ 加藤亮さん)に詳しく聞いてきました! ▲株式会社リクルートテクノロジーITソリューション統括部 アドバンスドテクノロジーラボ 加藤亮さん 編集部より注意 このインタビューの

    『現実世界をWeb化する』「Physical Web」そして「Eddystone」について詳しく聞いてきた!
    t_furu
    t_furu 2015/08/19
    全ての物がURLを持つようになる/ 情報やサービスのフックが世の中に増えていく
  • Webエンジニアが、量産品のハードウェアを作るようになるまで─Cerevoの中の人に聞いてみた!

    Webエンジニアが、量産品のハードウェアを作るようになるまで─Cerevoの中の人に聞いてみた! 白石 俊平(HTML5 Experts.jp編集長) Arduinoなどのマイコンのおかげで、ハードウェア開発、特にプロトタイプづくりに関するハードルはだいぶ下がりました。自分(白石)のような人間でも、LEDをチカチカさせるくらいのことはやってみたことがあり、「こんなに簡単にハードを制御できるなんて!」と感動したのを覚えています。ただ、プロトタイプを一度作ってみると、更なる大きな疑問がわいてきます…身の回りにあるハードと、自分の作ったプロトタイプの落差に驚愕するのです。 自作したプロトタイプを、カッコいい量産ハードウェアに持っていくためには、どんな作業が必要なの? 今回はそんな素朴な疑問に答えてもらうべく、Cerevoさんにお邪魔してプロダクトマネージャーの國舛さんにお話を聞いてきました。 C

    Webエンジニアが、量産品のハードウェアを作るようになるまで─Cerevoの中の人に聞いてみた!
  • ネットワークのないところでも使え、サクサク動く。これからのWebゲームアプリが備えるべき機能とは「HTML5 Conference 2013」

    ネットワークのないところでも使え、サクサク動く。これからのWebゲームアプリが備えるべき機能とは「HTML5 Conference 2013」 馬場 美由紀(HTML5 Experts.jp編集部) 今後モバイルWebアプリはどこを目指すのか──。このヒントが得られたのが、DeNA小原隆郎氏の「地下鉄 x サクサク x これからのWebゲームアプリが備えるべき8つの機能」というセッション。 小原氏は昨年秋にDeNAに入社。「@uupaaというネームは知っている人もいるかもしれないが、ほとんどこのような場所に出ることがない。今日会えた人はラッキーだと思う」という前置きをしてセッションは始まった。 SPAでページをまたがった音楽の再生が可能に 同セッションは検証は必要ながらも、小原氏自身が気になっているWebアプリの技術的なトピックスを紹介するというもの。 まず最初に取り上げたのはネイティブに

    t_furu
    t_furu 2013/12/30
    WebWorker もうちょっと色々できるようになるといいな
  • Bootstrap3超速レビュー!刷新されたグリッドシステムを理解しよう!

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

    Bootstrap3超速レビュー!刷新されたグリッドシステムを理解しよう!
  • 1