HTML5 Experts.jp 2015年の年間読まれた記事ランキングTOP20！
HTML5 Experts.jp 2015年の年間読まれた記事ランキングTOP20！ 仲 裕介（HTML5 Experts.jp副編集長） 日本初のHTML5技術専門サイト「HTML5 Experts.jp」も開設から2年5カ月が経ちました。2015年も2014年に引き続き、エキスパート・コントリビューターの方々に、ホットな技術トレントをタイムリーに、記事として取り上げていただきました。また、白石編集長と豪華なパネリストによる様々な対談企画や、当メディアをネタにしたパフォーマンス改善企画等、新しい試みにも挑戦してきました。皆様、お楽しみいただけましたでしょうか？ 今年最後の記事は、記事公開後１週間の閲覧数（PV）をもとに、2015年の年間読まれた記事ランキングTOP20！をお届けします。 ＜1位＞ 【及川卓也・清水亮・羽田野太巳・藤村厚夫】すごい人達呼んで「Webは死ぬか？」をマジメに語り
WebRTC初心者でも簡単にできる！Node.jsで仲介（シグナリング）を作ってみよう
WebRTC初心者でも簡単にできる！Node.jsで仲介（シグナリング）を作ってみよう がねこまさし（インフォコム株式会社） こんにちは！ がねこまさしです。前回はWebRTCの通信を手動でつなぎましたが、今回は仲介役のサーバーを作ってみましょう。 ※今回の内容は、Node学園祭2013で発表した内容(の一部)とほぼ同じです。その時の資料もご参照ください。 ※こちらの記事は2014年に書かれました。2016年7月のアップデート記事がありますので、そちらもご参照ください。 シグナリングサーバーを立てよう 前回は手動でコピー＆ペーストしてシグナリングを実現しました。今回はそれを楽にしましょう。 シグナリングサーバーはどうして必要なの？ シグナリングの過程では、お互いのIPアドレスやポート番号を渡す必要があります。この段階ではお互い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を使ってみよう！「カメラを使ってみ
JavaScriptエンジニアへのIoTのすすめ：Node.jsとArduinoでスマートデバイスのプロトタイプをしてみよう
JavaScriptエンジニアへのIoTのすすめ：Node.jsとArduinoでスマートデバイスのプロトタイプをしてみよう Tomomi Imura（Slack） ここ、HTML5Experts.jpでも今年になって IoTやWoT関連の話題がことかかず、みさなんも関心を持ち始めていることかと思われます。 私もフロントエンド・エンジニアではありますが、もともと関心があったことと、去年からデータ・ストリームのPaaS (platform as a service) 会社であるPubNubで働いていることもあって、IoTを避けずには通れなくなり、電子工作を始めるようになりました。 そこで、最近東京・渋谷で行われた、東京Node学園で登壇した際に話したテーマ、Hardware Hacking for JavaScript Developers から、ArduinoとNode.jsを使ってプロト
Web技術でここまでできるのか！IoT/WoTの可能性を探る、「第59回 HTML5とか勉強会」レポート
Web技術でここまでできるのか！IoT/WoTの可能性を探る、「第59回 HTML5とか勉強会」レポート 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 昨日（2015年8月27日）、「IoT / WoT」をテーマにした「第59回 HTML5とか勉強会」に参加してきました。 この記事では、イベントの模様や参加した感想をレポートしたいと思います。 ちなみに、「IoT」（Internet of Things）はバズワードなのでご存じの方も多いと思いますが、「WoT」というのは「Web of Things」の略です。「IoTのWeb版」と言えばわかりやすいでしょう。個人的には「WoT」という言葉にはどうも「IoTブームに乗ってやれ」という（何者かの）意図があるような気がしていて、ちょっと懐疑的でした。リソース食いだし、デバイスの機能を自由に使うこともできない
【HTML5とか勉強会】HTML5最新トピックスが分かる＠Google I/O＆de:code 2015レポート #htmlday
【HTML5とか勉強会】HTML5最新トピックスが分かる＠Google I/O＆de:code 2015レポート #htmlday 馬場 美由紀（HTML5 Experts.jp編集部） 毎年6月第2土曜日に開催される＜htmlday＞。日本のWebを盛り上げようというお祭りで、日本全国でWebに関する27ものイベントが開催され、イベント参加人数は総勢1233人にも及んだ。 東京では懇親会を含め22時で終了する「第58回 HTML5とか勉強会」が、＜htmlday＞の最後を締めくくるイベントとなった。そのトリを飾った勉強会で発表された「Google I/O 2015」と「de:code 2015」の最新技術情報をダイジェストでレポートする。 Google I/O 2015の会場は非常にオープン 最初に登壇したのはGoogleの鈴木拓生氏。セッションタイトルは『Google I/O 2015
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
「ぶっちゃけ感」とバリエーションが魅力のUI/UX勉強会！第57回 HTML5とか勉強会レポート
「ぶっちゃけ感」とバリエーションが魅力のUI/UX勉強会！第57回 HTML5とか勉強会レポート 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 2015年5月20日、第57回 HTML5とか勉強会「UI/UX」に参加してきました！簡単で恐縮ですが、レポートとまとめをお届けします。 チームでつくるUIデザイン 最初のセッションは、Goodpatch社の小島芳樹さん、ひらいさだあきさんによる「チームでつくるUIデザイン」です。 彼らが日々の業務で実践している、UIデザインやプロトタイピングについてのTipsが紹介されました。 チームでつくるUIデザイン マシュマロ・チャレンジで理解する、プロトタイピングの重要性 まずはマシュマロ・チャレンジというワークショップについて、TEDで動画が公開されているプレゼンテーションを引き合いに出しつつ、プロトタイピングの
フレームワーク対決！Angular VS React仮想パネルディスカッション
フレームワーク対決！Angular VS React仮想パネルディスカッション 吉川 徹 特集企画「アプリケーションアーキテクチャ最前線」では、さまざまな視点からアプリケーションアーキテクチャをエキスパートたちに語っていただきます。今回は、今話題のAngularJSなどのJavaScript MVCフレームワークの台頭と進化、そして新しいアーキテクチャであるFluxとそのフレームワークであるReactなどについて、既に先行して学んでいるエキスパートたちにその知見を聞いてみました。 今回はフレームワーク対決ということで、エキスパートたちがAngularとReactという陣営に分かれ、それぞれのフレームワークについて疑問点をぶつけたり、議論したりする仮想パネルディスカッションという形式でお伝えします。単なるパネルディスカッションとは違って、キーワードは「プロレス」です。まさかりの投げ合い、di
理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference
理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。 font-size line-height vertical-align inline-block トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚
HTML5 Experts.jp 2014年の年間読まれた記事ランキングTOP20！
HTML5 Experts.jp 2014年の年間読まれた記事ランキングTOP20！ 仲 裕介（HTML5 Experts.jp副編集長） 日本初のHTML5技術専門サイト「HTML5 Experts.jp」も開設から1年5カ月が経ちました。2014年は時事ネタをタイムリーに取り入れた特集記事を充実させて参りましたが、皆様、お楽しみいただけましたでしょうか？今年最後の記事は、記事公開後１週間の閲覧数（PV）をもとに、2014年の年間読まれた記事ランキングTOP20！をお届けします。 ＜1位＞ Googleはなぜモバイルに力を入れるのか？これからのWebパフォーマンスで注力すべきポイント ── 川田寛 ＜2位＞ モバイルWeb開発に役立つ！Chrome DevToolsの新機能「デバイスモード」 ── Tomomi Imura ＜3位＞ Googleのベストプラクティスに沿ったモダンな製作の
t32k、怒られる！セマンティック バージョニングしてますか？
どうも、バンクーバーでぶらぶらしている@t32kです。最近は暇なのでもっぱらOSS活動に勤しんでおります。そんなわけで日々のアプリケーション開発において重要になってくるのがバージョニングです。 今日はセマンティック バージョニングについて解説します。自身が公開しているライブラリやパッケージのコードを何かしら修正したら、それに伴いバージョンを上げるのが一般的だと思うのですが、実はどのようにバージョンを上げるのが適切なのか、昔の私は理解していませんでした。 『いっぱい変更したのでメジャーバージョン上げてみるか』、『今回の修正は軽微なものだし、マイナーバージョンを上げるか』などと、なんとなくにバージョニングをしていました。 If the plugin’s API changes dramatically (for example, when sortOrder option is renamed
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でWebRTCを使ってみよう！「カメラを使ってみよう」編
こんにちは！ がねこまさしです。これから数回に渡って、WebRTCについて書かせていただきます。 内容は2013年10月にNode学園祭2013で発表したプレゼンを、再構成したものになる予定です。 ※こちらの記事は2014年に書かれました。2016年6月現在のアップデート記事がありますので、そちらもご参照ください。 WebRTCとは？ WebRTCとは”Web Real-Time Communication”の略で、Webブラウザ上でビデオ/オーディオの通信や、データ通信を行うための規格です。HTML5で新しく策定されたもので、複数の技術の連携で成り立っています。 ちなみに策定には複数の団体が絡んでいています。 API → WWW ビデオ/オーディオのコーデック → IETF WebRTCで何ができるの？ WebRTCには大きく分けて2つの要素があります。 カメラ、マイクといったメディアへ
シグナリングサーバーを応用！ 「WebRTCを使って複数人で話してみよう」
こんにちは！ 前回はシグナリングサーバーを動かして、WebRTCでPeer-to-Peer通信をつなぐ処理を作りました。最後に書いた通り、前回の実装ではサーバーあたり2人だけしか同時に通知できません。今回はこれをもっと実用的にしていきましょう。 ※今回もNode学園祭2013で発表した内容と共通の部分が多いです。その時の資料も併せてご参照ください。 ※こちらの記事は2014年に書かれました。2016年8月のアップデート記事がありますので、そちらもご参照ください。 複数会議室を作ろう 前回作ったのは、いわばカップル1組限定サイトのシングルテナントアプリでした（左）。これを複数組が共存できる、マルチテナント（複数会議室）のアプリに改造します（右）。 複数組が共存できない理由は、シグナリングの通信が同じシグナリングサーバーに接続している全員に飛んでしまうからです。これを混線しないように分離してあ
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（後編）
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（後編） 西田慎吾（株式会社アイ・エム・ジェイ） WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（後編） 前回に引き続きHTML5 Japan Cup 2014にてWebGL賞と優秀賞をいただいたオンラインレースゲーム、JS-Racingの技術解説をさせていただきます。 サーバサイドの使用技術 サーバサイドの技術としてNode.jsを使用しています。Node.jsはサーバーサイドで動作するJavaScriptで、ノンブロッキングI/Oというモデルを採用しています。非同期処理でデータベースへのアクセスとWebページの表示を別々に行ってくれるので、ストレスなく大量のページの表示が出来ます。また、Socket.ioというライブラリを扱うことで、WebSocke
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（前編）
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（前編） 西田慎吾（株式会社アイ・エム・ジェイ） 今回はHTML5JapanCup2014にてWebGL賞と優秀賞を受賞したオンラインレースゲーム、JS-Racingの技術解説を書かせていただきます。 このコンテンツはWebGLの3D表現を活かした3Dレースゲームです。 また、WebSocketを使用しサーバを介して、複数のクライアントでの同時走行が可能なオンラインゲームになっています。同時に、ソケット通信時に発行されるソケットIDをPCとスマートフォンで共有することで、スマートフォンからPC上の車を操作することも可能です。 クライアントサイドの使用技術 クライアントサイドの構築において、目的・用途に応じて使用した言語やライブラリに関して解説します。 TypeScriptによるクラス設計 クライアン
Web Componentsが変えるWeb開発の未来
Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。 「なぜWeb Componentsが生まれたのか」 「Web Componentsが何を解決してくれるか」 この2点を上記セッションに沿って解説していきます。 HTML/CSSが持つ弱点 Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。 しか
CSS Regionsに対する問題提起、新picture要素仕様、Webスタンダードの新フェーズなど海外WEBテク20本を一挙公開
CSS Regionsに対する問題提起、新picture要素仕様、Webスタンダードの新フェーズなど海外WEBテク20本を一挙公開 斉藤 祐也（株式会社リッチメディア） 斉藤祐也の海外WEBテク定点観測＜Issue.10: 2014/01/01-2014/01/31＞ 今月の定点観測は、CSS Regionsに対する問題提起、新picture要素仕様、Webスタンダードの新フェーズなど合計20件の記事や動画などを紹介します。 注目ニュースピックアップ CSS Regionsへの問題提起 – An A List Apart Blog Post 原題: CSS Regions Considered Harmful タイトルからしてすでに議論を呼び込むようなタイトルとなっている、CSSの父であるHåkon Wium Lie氏によるCSS Regionsの仕様に対する問題提起。 時を同じくして、G
Web Componentsベストプラクティス、 誰のためのWebなのか、どうコードレビューをするかなど海外WEBテク20本を一挙公開
Web Componentsベストプラクティス、 誰のためのWebなのか、どうコードレビューをするかなど海外WEBテク20本を一挙公開 斉藤 祐也（株式会社リッチメディア） 斉藤祐也の海外WEBテク定点観測＜Issue.13: 2014/04/01-2014/04/30＞ 今月の定点観測はWeb Componentsベストプラクティス、誰のためのWebなのかについて、そしてソースコード・レビューをどう行うかなどを紹介します。 注目ニュースピックアップ Web Components ベストプラクティス – WebComponents.org 原題: Web Components Best Practices Web Componentsはまだこれからの技術であることを念頭に、この記事では現時点でのベストプラクティスを紹介しています。 名前空間: 名前空間が他のWeb Componentと重複
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
