壁を越えろ！WebRTCでNAT/Firewallを越えて通信しよう
こんにちは！がねこまさしです。前回は複数人の同時通話まで実現しました。社内で使うには十分なレベルです。 しかし本格的な企業ユースとなると、まだまだ障害があります。会社と家、自社と別の会社さんなど、実際に通信しようとするとNATやFirewallといった壁が立ちはだかります。 NATを越えよう NATの役割は NAT(+IPマスカレード)は企業だけでなく、一般家庭でも使われています。ブロードバンドルーターやWiFiルーターでは、1つのグローバルIPアドレスを、複数のPCやデバイスで共有することができます。このとき、NATには2つの役割があります。 インターネットにつながったグローバルなIPアドレスと、家庭内/社内のローカルなネットワークでのIPアドレスの変換 複数のPC/デバイスが同時に通信できるように、ポートマッピングによるポート変換 WebRTCでNAT越しに通信すること考えてみましょう
WebAssemblyの基礎から最新動向まで、@chikoskiに聞いてきた！
WebAssemblyの基礎から最新動向まで、@chikoskiに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に、様々なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、WebAssemblyコミュニティを率いてらっしゃる清水 智公さん（@chikoski）です。清水さんのセッションは「WebAssembly MVPまとめと、今の議論の内容からいくつか」でした。 ※スライド資料はこちらで公開されています。 WebAssemblyとは何か？ 白石: 今日はよろしくお願いします。まずは自
ノンプログラマーがJavaScriptを初めて学ぶときにありがちな9つの失敗 - WPJ
Webデザイナーにとってもっとも身近なプログラミング言語といえばJavaScriptですよね。ところがいざ勉強を始めたものの挫折してしまった…という人のために、典型的な失敗例と学習のコツを教えます。 JavaScriptの学習をしても挫折する人の多くは、「JavaScriptは分かりにくい」「自分はWeb開発に向いていない」と言います。悲観的になってあきらないでください。アプローチの仕方を変えることが大切です。 この記事では、多くの人が学習中に経験する失敗の対処法を取り上げます。JavaScriptだけではなく、Web開発全体に当てはまる内容なのでぜひ活用してください。 失敗その1：始める前にあれこれ調べすぎる JavaScriptの学習を始める前に、たくさんのことを調べたくなるかもしれません。ちょっと調べるだけでJavaScriptがどれだけすばらしいものか、逆にいかに悪いものかといった
人とAIの共存を主とする「Google PAIR」、機械学習（NN含む）をブラウザ上で全て実行できるWebMLライブラリ「deeplearn.js 0.1.0」をリリース
人とAIの共存を主とする「Google PAIR」、機械学習（NN含む）をブラウザ上で全て実行できるWebMLライブラリ「deeplearn.js 0.1.0」をリリース 2017-08-12 人を中心としたAIシステムの研究と設計をするGoogleのプロジェクト「The People + AI Research Initiative（PAIR）」は、ブラウザ上で機械学習（Machine learning）を全て実行できるオープンソースライブラリ「deeplearn.js 0.1.0」をリリースしました。 deeplearn.js 本ライブラリは、可能な限り多くの人に機械学習を開かせたいという思いのもと開発されました。その為、インストールやバックエンドなし、ブラウザ上で全て実行できる仕様になっています。 今までもWeb Machine learning（WebML）ライブラリは存在していま
なぜJavaScriptだけではダメなのか？ 開発者が第2言語を学ぶべき理由
フロントエンドもサーバーサイドも、JavaScriptで何でも書ける時代。それでも他のプログラミング言語を学ぶメリットとは？ プログラミング言語をいくつ知っていますか。最近の調査によると、SitePoint読者の約80％は少なくとも2つの言語を知っています。ゆうに半数以上の読者は日々PHPを使っています。私と同じように非常に多くの人がPHPを使ってWeb開発を始めたと思います。 最近「学習予定」リストがまだ不十分だと思い、この機会に履歴書に別の言語を追加しようと考えました。そして、オンラインでScalaを学ぶことにしたのです。Scalaになじみのない人のために簡単に説明すると、Scalaは静的に型付けされた汎用コンパイル言語（たとえば、移植可能なバイトコードにコンパイルするJavaのようなもの）です。ScalaはJavaScriptのように複数のパラダイムがありますが、Haskellのよう
面倒な作業も発狂しない！Web制作を超効率化するgulp.jsの始め方（2017年版）
面倒なWeb制作の作業を効率化できるタスクランナー。もう使っていますか？ 現在もっともポピュラーなタスクランナーであるgulp.jsの使い方を解説します。 開発者は、限りある大事な時間をコーディングに費やします。たとえ面倒な会議をさぼっても、仕事時間の大半は地味な作業に奪われています。 テンプレートとコンテンツファイルからHTMLを生成する 新しい画像と変更された画像を圧縮する SassをCSSコードにコンパイルする スクリプトからconsoleとdebuggerのステートメントを削除する ES6をブラウザーとの互換性が高いES5に変換する コードの埋め込みと検証 CSSとJavaScriptファイルの連結と縮小 開発サーバー、ステージングサーバー、運用サーバーにファイルを展開する なにか変更があるたびに、作業は繰り返されます。作業を繰り返すうちに、一番優秀なエンジニアでさえ画像のひとつや
GLSL で暖を取るための準備をしよう！ GLSL お役立ちマニュアル - Qiita
はじめに 本稿は、WebGL で GLSL を使って暖を取るために個人的にまとめたもので、もしかしたら仕様と異なるような表記や勘違いがあるかもしれません。そういうの見つけたときはぜひ教えてください。🔥🔥🔥 GLSL やシェーダに気軽に触れてみてほしい、楽しく取り組んでみてほしいという観点からやや崩れた文体で、イメージのしやすさ優先で書いてます。そういうの苦手な人は公式の仕様を見ましょうね。 GLSL について知る GLSL がなんであるかは、たぶんこの記事を読んでいる方には説明不要かと思いますが、あえて簡単に説明します。 まず、PC などのコンピュータを用いて二次元、あるいは三次元のグラフィックスを描画するための世界標準の規格として OpenGL という API が存在します。その名のとおり、オープンな規格として策定されている OpenGL は、OpenCL や Vulkan などと
【乖離性MA】開発者必見！PC版『乖離性』で採用されたWebGLの魅力を聞いてきた | ファミ通App【スマホゲーム情報サイト】
WebGLでブラウザゲーの未来がアツい！！スクウェア・エニックスから好評配信中のキャラクターコマンドRPG『乖離性ミリオンアーサー』（以下、『乖離性』）。 2016年10月より、本作のPCブラウザ版（以下、PC版）が、Yahoo! JAPANの運営するオンラインゲームサービス”Yahoo!ゲーム”で配信中だ。 すでに体験した人なら分かるように、スマホ版の魅力である3Dグラフィックを使用した派手な戦闘演出はPC版でも健在。そうしたブラウザベースでの動作にひと役買っているのが、WebGLという技術である。 今回は、PC版『乖離性』開発ディレクターの加島直弥氏、Mozilla Japanの清水智公氏、そしてUnity Technologies Japanの大前広樹氏に、WebGLについて話を伺った。 ※本インタビューはPC版配信前の9月末に実施されたものです。 WebGLの鍵を握るのはasm.j
Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーJavaScript が動く仕組み
Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーJavaScript が動く仕組み 清水智公（Mozilla） Webブラウザの上で動作するアプリを書くための言語、といえば何が想起されるでしょうか。Flash、Sliverlight、Java、さまざまな言語が利用されてきましたが、やはり今のメインストリームはJavaScriptでしょう。 JavaScriptはさまざまな言語の特徴を併せ持つ動的言語で、Web技術の発展とAPIの整備の結果、Virtual Reality(VR)や画像認識、DAW(Desktop Audio Workstation)といった、少し前まではネイティブでの実装しかありえなかった種類のアプリケーションもWebブラウザをランタイムとするJavaScripで実装されるようになってきました。 そのようなアプリの代表例がゲームで
メインスレッド以外での WebGL の利用方法
この記事は 2016 年 1 月 22 日にポストされた “WebGL Off the Main Thread” の抄訳です。 Firefox 44 以降で、WebGL を Web Workers で利用出来るようになりました！OffscreenCanvas API を利用することで、メインスレッド以外で利用可能な WebGL コンテキストを作成できるようになります。 以下の例を実行するためには、Firefox 44 以降が必要です。現在のところ Firefox Developer Edition もしくは Firefox Nightly が該当します（訳注：記事執筆当時。現在はリリース版の Firefox でも利用可能です）。また API は利用するためには about:config から gfx.offscreencanvas.enabled の値を true に設定する必要があります
JavaScript の並列処理機能を味見してみる
この記事は “A Taste of JavaScript’s New Parallel Primitives” の抄訳です。 まとめ：複数の Worker と共有メモリを利用して、本当の意味で並列アルゴリズムの JavaScript 実装を可能にするために、JavaScript の基本機能を拡張しようとしています。 複数コアを用いた計算 JavaScript (JS) は成熟しました。モダンな Web ページのほとんど全てで、大量の JavaScript が利用され、それらが動作するのは当たり前のことになっています。また JS の適用領域も拡大しています：クライアントサイドでは、Facebook や Lightroom が行っているように画像処理が JavaScript で実装されていますし、Google Docs のようなブラウザで動作するオフィススイートも JS で実装されています。P
MITがブラウザの表示を34%高速化するJavaScriptフレームワークを開発
MITがブラウザの表示を34%高速化するJavaScriptフレームワークを開発2016.03.28 16:00 mayumine インターネットはどんどん速くなっていくのに、ウェブサイトはどんどん複雑になっていきます。いまだに私たちは、PCやスマートフォンの画面を見つめながらウェブページが表示されるのを待っています。そんな｢ウェブページの待ち時間｣を短くする技術が登場。 マサチューセッツ工科大学(MIT)の研究チームが、ページ表示速度を最大34%も高速化するフレームワークを開発しました。 ウェブブラウザは、URLを入力してエンターボタンを押したり、リンクをクリックした瞬間、HTMLファイル、JavaScript、動画、広告…その他諸々のオブジェクトを異なるサーバーからせっせとかき集めます。1つ1つのオブジェクトは評価され、表示させるページに追加されていきます。さらに1つ1つのオブジェクト
「RxJS」初心者入門 - JavaScriptの非同期処理の常識を変えるライブラリ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。 みなさん、「RxJS」をご存知でしょうか？ すごく大雑把に言うと、RxJSとは非同期処理（マウスクリックなどのイベントベースの処理も含める）をするときに超絶便利なライブラリです！ イメージしやすいように「便利」とは言いましたが、決して「便利」という言葉ではおさまらないくらいのインパクトがあると思います。ちょっとした「イノベーション」に近い感覚です。 今回は、RxJSを全く知らない初心者でもとっつきやすいように説明してみたいと思います。少し記事が長くなりますが、最後までお読みいただければ幸いです！ 目次 ReactiveXについて 非同期処理の問題点 RXと「Observerパターン」 ウォーミングアップ イベントを配列のように操る？ Stream（ストリーム） ストリームを操作する「オペレーター」 オペレーションチェーン ObserverとObservable Col
エフェクト作成入門講座 Three.js編 RPGのセーブポイント風の魔法陣 - ICS MEDIA
昨今のWebサイトではWebGLを利用した3Dコンテンツをしばしば見かけるようになってきました。WebGLに対応した端末が普及してきていることや、Three.jsなどのライブラリが充実していることもあり、実案件での採用が現実的になってきているからです。 しかし、いざ3Dコンテンツを作ってみると、どこか味気のないものになってしまう事があります。そんな時はエフェクトの追加をオススメです。エフェクトを追加することで、コンテンツの見栄えが派手になったり、キャラやゲームの状態が伝わりやすくなります。今回エフェクトの例として、RPGのセーブポイントや回復ポイントで使用されそうなデモを制作してみました。 デモを別ウインドウで再生する ソースコードを見る ※このデモはThree.js r146とTypeScript 4.9によって書かれています。 本記事では、セーブポイント風なエフェクトの作成を通して、T
JSだけでVRできる！『WebVR』ことはじめ
今年はVR元年と呼ばれています。 実は過去にも何度かVR元年と呼ばれ、VRが来る、と言われていた年があります。 ですが、今年はいよいよそれが本格的になりそうな状況になってきました。 そこで今回は、「今からWebVRに備えよう！」ということで、WebVRとはなにか、それを利用して何ができるのか、利用シーンはどうか、といったことに焦点を当てたいと思います。 VR元年 本格的になりそうなのはなぜか。まずひとつ挙げられるのはOculus Rift（詳細は後述）に代表される、いくつかのヘッドマウントディスプレイ（以下、HMD）が比較的安価に家庭で利用できるようになったことです。 今年に発売される予定のものだけでも、Oculus Rift、HTC Vive、PlayStation VR、FOVE(開発キット版)など様々なHMDが市場に登場する予定になっています。 またこれらが注目される理由として、現在
難しいことを簡単に学ぶ方法 ― 強力なスキルを新たに身に着けるための3つのステップ | POSTD
ここ数年、私はWeb開発と機械学習の自習に多くの時間を割いてきました。 学習のテーマは、Javascript、Node、ReactからPython、scikit-learn、ニューラルネットワークに至るまで多岐にわたりましたが、全てに対して私は一貫したアプローチで取り組みました。 そのアプローチとは、単純な（陳腐と言ってもいい）3ステップで進める、という手法です。しかし、 Web開発のシロウトだった私が5カ月で、プロだと自覚できるほどになった のはひとえに、このアプローチで臨んだ自習の成果だと思っています。 そこで私は、この自習法がほかの誰かのお役に立てるかもしれないと思い、少し記事を書いてみることにしました。 この記事は、何も分からないままやみくもに挑戦を始めた、2012年当時の自分自身に教えるつもりで書いています。 ステップ1：習うより慣れろ 新しいテクノロジを学ぶためにまず実行する最
MozillaはWebのVR化を牽引するか? VRサイト作成フレームワーク「A-FRAME」の利用例が公開
Home » MozillaはWebのVR化を牽引するか? VRサイト作成フレームワーク「A-FRAME」の利用例が公開 MozillaはWebのVR化を牽引するか? VRサイト作成フレームワーク「A-FRAME」の利用例が公開 ※本記事は技術的な内容を含みます。 Firefoxで知られるMozillaは、同社の開発するWebブラウザを通しWebプラットフォームの形成に多大な影響を及ぼしてきました。現在は、Web VR(WebブラウザでVRを表現すること)を促進しており、2015年12月17日には、Web VRでの知見を集積したフレームワーク「A-FRAME」を公開しています。 関連記事:1行のコードでWebサイトにVRを。Mozillaより、Web VRライブラリ「A-Frame」がリリース A-FRAMEを開発するMozillaのチーム「MozVR」は、同社のWeb VRにおける挑戦を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RxMarbles: Interactive diagrams of Rx Observables
http://getar.jp/19010/
KidsScript - Let's Enjoy Programming !
