もう、アルゴリズム自分で書いてる場合じゃない？機械学習が開発手法を変える─de:code 2016セッションレポート
もう、アルゴリズム自分で書いてる場合じゃない？機械学習が開発手法を変える─de:code 2016セッションレポート 白石 俊平（HTML5 Experts.jp編集長） de:code 2016に参加中の、編集長の白石です。 今回は、編集部のメンバーそれぞれが興味あるセッションに参加してセッションレポートを書こう、ということになってまして、ぼくは「Big Data/機械学習がソフトウェア開発手法を変える! 〜静的アルゴリズム生成から動的アルゴリズム生成への道〜」というセッションを聴講しました。 スピーカーである田丸健三郎さんの語り口が心地よく、機械学習についてはかじったことくらいしかないぼくにとってはレベル感もちょうど良く、知らなかったことも数多く学べてとても満足でした。 以下に、簡単なセッションレポートを掲載します。機械学習については素人の、Webエンジニアによるレポートではありますが
コードリーディングに最適！たった200行で作れるHTML5製テトリスのプログラミング学習ムービー - Chrome Life
みなさんは、フルスクラッチでテトリスを作ることができますか？ プログラマーといってもゲームを作る機会が少ないと、なかなかすぐには作れないと思います。 JavaScriptでなんとか作れそうな感じもしますが、すんなり実装はできない感じがします。 特にグラフィックやアニメーションをうまく使ったものを作るには、それなりの経験値が必要だと思います。 そこで、今回ご紹介するのが、教育目的で作られたHTML5製テトリスのプログラミング学習ムービーです。 HTML5 tetris - making of HTML5 tetris - making of 驚くべきことに、 たったの４５分でテトリスが完成！ それもフルスクラッチで、jQueryなどのライブラリーを一切使っていません。 Youtubeのムービーは早送りしていますが、動きを確認しながら実装しているのが分かります。 実際に、こちらでテトリスをプレ
技術トレンドを追わないという勇気
技術トレンドを追わないという勇気 昨日、「第19回 HTML5+JS 勉強会 【オレオレフロントエンド開発環境 ～際限なき修正を攻略せよ！～/甦れFlasher「swf2js」でswfをリアルタイムでcanvasに出力】」というイベントに参加してきました。 そこで講師の沖さん(@448jp)が、�「技術は目的を達成する手段なので、あまり新しい技術に振り回されてはいけない。」的なことをおしゃっていて、それはそうだなと思いながら私が最近感じている事をすこし書き留めておこうと思います。 技術トレンド圧力 フロントエンド界隈ではJavaScript/node.jsの盛況もあって毎日のように新しいライブラリ/フレームワークやツールがリリースされています。そして、それらの技術に対してアーリーアダプター的なフロントエンダーが試してはブログやQiitaでレビュー内容を記事にしたり、TwitterやFace
CSSとHTML Canvasで作るモーショングラフィック - ICS MEDIA
ICS MEDIAのトップページに掲載しているモーショングラフィック。これはCSSとHTML Canvas要素を使って作成したものです。時間経過とともに波の形状と色彩が変化し、多彩な表現を楽しめるようになっています。 本記事ではCSSとHTML Canvasの理解につながることを目標に、このモーショングラフィックの作成方法をステップ形式で解説します。サンプルのソースコードはすべてGitHubにて公開していますので、あわせて参照ください。 ▲ 完成版サンプル ステップ1. CSSでグラデーション背景の作成 サンプルを別ウインドウで開く ソースコードを確認する はじめに、時間経過で色彩が変化するグラフィックを作成しましょう。CSSで縦に長いグラデーションの背景を用意し、CSSアニメーションを使って縦方向に移動させることでグラデーションが変化する表現ができます（ステップ1のソースコード)。 #b
いまさら聞けないHTML5概要
2016年5月24日に実施された「第14回HTML5ビギナーズ つまずくこともあるけどこうやって成長したよ！」での講演資料です。
CSSのmix-blend-modeで実現するドローイング表現 - ICS MEDIA
CSSはPhotoshopライクなグラフィカルなブレンドモードを搭載しています。デザイナーやモーションクリエイターにとっては直感的に利用しやすいのではないでしょうか。しかし、CSSのブレンドモードは執筆時点（2015年9月現在）はMicrosoft EdgeやInternet Explorerが対応していないのがデメリットです（追記：2022年現在はほぼすべてのブラウザで利用できます）。 Canvas要素は旧式ブラウザを含め多くのブラウザで利用できるものの、Canvas要素はブレンドモードの種類が少ないという制約があります。ここで挙げたように、それぞれのテクノロジーには一長一短があるのでコンテンツに応じて最適な手段を検討するのが現実解となります。 デモ作成で選んだのはCSS3のブレンドモード デモ作成にあたり2つのレイヤーを作成しました。1つはカラフルな背景のレイヤー、もう1つはドローイン
これからはHTML5ゲームの時代が来る？ 月間総PV611億のYahoo! JAPANが放つ，“第三のゲームプラットフォーム”
これからはHTML5ゲームの時代が来る？ 月間総PV611億のYahoo! JAPANが放つ，“第三のゲームプラットフォーム” 編集長：Kazuhisa カメラマン：佐々木秀二 12→ この記事を読む人にとっては釈迦に説法でしかないが，国内コンシューマ市場はやや停滞状況に差し掛かり，かつて一世を風靡したPCの“MMORPG”は昔ほどの精彩を放たなくなっている。それらに取って代わるかのようにスマートフォンのゲームが猛威をふるっているのが，昨今のゲーム業界の情勢だ（PCのブラウザゲームは割と元気）。 法人の多くがスマホに注力し始めていてゲーム業界全体に少なからぬ影響があるうえ，射幸性をクローズアップしたマネタイズ手法や，もはや“不正”といってもよいランキング操作，開発費の高騰によるリクープの難しさなど「いろいろ言いたいこと」もあるにはある。 それでも，いままでのゲーム業界が努力してもあまりうま
新ブラウザMicrosoft Edgeの実力はいかに？ Web制作者が抑えておきたい各ブラウザを上回るHTML5描画性能 – ICS LAB
新ブラウザMicrosoft Edgeの実力はいかに？ ウェブ制作者がおさえておきたい各ブラウザを上回るHTML5描画性能 Microsoft Windowsの最新OS「Windows 10」では、従来の標準ブラウザ「Internet Explorer」に代わって新ブラウザ「Microsoft Edge」が標準ブラウザとなりました。ウェブ制作者としては、Microsoft Edgeのパフォーマンスはどれくらいなのかが気になりませんか？ 今回はDOM + CSS3、HTML5 Canvas、WebGLについて、Microsoft Edgeと他Windowsブラウザのパフォーマンスを比較してみました。 検証に用いたデモについて 今回の検証はBunnyMarkで検証しています。Bunnyの表示は「移動スピード・方向」「回転」「拡縮」「透明度」をランダムで適用し、毎フレーム移動をさせています。時間
HTML5+Canvasで学ぶ物理アニメーションの基礎
Posted: 2015.07.28 / Category: javascript / Tag: HTML5, アニメーション HTML5+Canvasを使用して物体が落下するという簡単な物理アニメーションを作成してみます。 Canvasアニメーションの基礎については下記を参考にしてください。 この記事は下記をベースとして進めます。 HTML5で作るCanvasアニメーションの基礎 HTML5+Canvasでパーティクルっぽいのを作ってみる 基本となるオブジェクトを作成する 前回作成したParticleオブジェクトを少し編集します。 var Particle = function(scale, color, vx, vy) { this.scale = scale; //大きさ this.color = color; //色 this.vx = vx; //X速度 this.vy = vy
HTML5オールスターズ勉強会 資料まとめ - dackdive's blog
6/13 (土) は htmlday ということで、こちらのイベントに参加してきました。 HTML5オールスターズ勉強会｜IT勉強会ならTECH PLAY［テックプレイ］ 第58回 HTML5とか勉強会 - HTML5最新情報@Google I/O, de:code 2015｜IT勉強会ならTECH PLAY［テックプレイ］ とりあえず今の時点で公開されてるスライド資料やらキーワードやらをまとめ。 （随時更新します） Twitter でのハッシュタグは #dotshtml5 , #htmlday , #html5j などなど。 （2015/06/15追記） 若狭さんの『ハードウェアこわい』、川田さんの『The next generation mobile web!』 のスライドを追加しました。 （2015/06/19追記） 『Edge だけじゃない! Build 2015 で発表されたそれ
WebGLで抑えておきたいシェーダーの定番画像処理8選 – ICS MEDIA
WebGLのシェーダーGLSLでの画像処理の作り方（モノクロ、セピア、モザイク、渦巻き） WebGLを使うと画像処理が実現でき、HTMLコンテンツに多彩なグラフィカル表現をもたらすことができます。たとえば、表示をモノクロームやモザイクにするといった画像エフェクトは簡単に実現できます。 WebGLはGPUの恩恵を受けれるため高速に実行でき、他の代替手法（canvas要素Context2Dオブジェクトによる画像処理等）よりも負荷が軽いのが利点です。 今回はWebGLの定番JSライブラリ「Three.js」とGLSLというシェーダー言語を使った、9種類の画像処理の実装方法を紹介します。ソースコードは「GitHub」からダウンロードして読み進めてください。 サンプルを試してみよう 次のサンプルでは複数のシェーダーを適用できます。画面左上のチェックボックスで画像加工を選択でき、ラジオボタンから画像と
Extensible Web を支える低レベル API 群 - Block Rockin’ Codes
Intro 最近 Extensible Web の話がたまに出るようになりましたが、なんというかレイヤの高い概念(ポエム)的な話が多い気がしてます。 もう少し具体的な API とか、「それコード書く上で何が変わるの？」って話があまりないので、今日はそこにフォーカスして、 Extensible Web 的な流れの中で整理された API の話をします。 しかし、実際には API が 「Extensible Web という理念で生まれたかどうか」は自明ではないので、 今標準化されている低レベルな API を拾い、それを整理するというエントリだと思ってもらと良いかもしれません。 あまり知られてない API もあると思うので、これを期に「これがあれば、今までできなかったアレが、標準化や実装を待たなくても、できるようになるな」と思ったら是非書いてみると良いと思います。 実際はそれこそが Extensi
HTML5 Conference に登壇します――GLSL や Blender に関するハンズオンもやるよ！！ - WebGL 総本山
まもなく開催！ HTML5 Conference ! 2015 年 1 月 25 日に、北千住で開催される HTML5 Conference に登壇します。 今回は「【ハンズオン】やってみたら実は簡単！ WebGLで開ける新しい表現」と題し、WebGL にあまり馴染みのない方にも楽しんでいただけるような、ハンズオン形式のセッションになる予定です。 私が全編しゃべるわけじゃなくて GLSL に関する発表の部分だけ、一部担当します。 事前の準備が必要な部分もあるので注意！ HTML5 Conference は残念ながら参加募集が既に満員御礼状態…… 参加者枠は 1200 人でしたが既に数百人のキャンセル待ちが発生している状態です。 これだけの人数が一堂に会することになるため、当日は Wifi など、通信関係はほぼ使えない状態になることが予想されています。 そこで私たちのセッションでは、ハンズオ
「HTML5日本コミュニティグループ」をW3Cが設立。参加者募集中！
W3Cが「HTML5 Japanese Community Group」を設立し、参加者を募集しています。 W3CのHTML5日本コミュニティグループが設立されました！参加者募集中： http://t.co/Tw1mnTfNJy #w3ccommunity — W3C (@w3c) 2015, 1月 15 W3Cは2009年12月に、HTML5について日本語で議論するW3Cのグループ「HTML5 Japanese Interest Group」を設立していましたが期限が切れ、それと入れ替わるように今回「HTML5 Japanese Community Group」の設立となっています。 「HTML5 Japanese Community Group」の共同議長である村上真雄氏に、メールで設立の経緯などをうかがいました。 W3C HTML5 Japanese Interest Groupを引
面白法人カヤックに「UX」というテーマをぶつけていろいろ聞いてみました
HTML5 Experts.jpが誇るエキスパートたちに、「UX」というテーマでインタビューするシリーズ、いよいよ最終回です。 今回は、面白法人カヤックでHTML5を使ってバリバリ仕事をしていらっしゃる田島真悟さんと君塚史高さんに、いろいろとお話を聞いてきました。 カヤックさんに聞いてみたかったテーマは主に二つあります。 技術力に定評のあるカヤックさんが、HTML5やJavaScriptとUXについてどう考えているのか？ 一見自由が利きそうにない「受託開発」という形態の中で、いかにUXを追求しているか？ ではどうぞ、お楽しみください！ クライアントのニーズを掘り下げると「体験」に行き着く 白石: 今回は、HTML5を普段からお仕事で活用していらっしゃるお二人に、UXというテーマでいろいろお話をお聞きしたいと思っています。どうぞよろしくお願いします。 田島＆君塚: よろしくお願いします。 白
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
初心者のためのWeb標準技術
Web制作者はブックマークしておくと便利！HTMLやCSSやOGPやTwitterカードなどのコードを生成できるオンラインサービス
ゲームエンジンの最新版「Unreal Engine 4.7」がリリース、HTML5とWebGLにも対応
【HTML5 Conference 2015】ウェブが“どこにでもあるもの”になったその先にあるものとは、ウェブ技術者の祭典「HTML5 Conference」 
