Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 可及的速やかにReactが絶滅しますように。 以下はFront-End Developer Handbook 2018の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール 開発者向けドキュメント、APIリファレンス Dash 200以上のAPIリファレンス、100以上のチートシートを一括ダウンロードできる。有料、Mac用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。有料、Windows用。

W3CのWebAssemblyワーキンググループは、「WebAssembly」仕様に関する初めてのワーキングドラフトを公開した。WebAssemblyはすでに主要なブラウザで実装が進んでいるため、このまま順調に勧告となるのではないか。 マイクロソフト、Google、Mozilla、Appleなどの主要なWebブラウザベンダが協力して、Webブラウザ上でネイティブコードに近い実行速度で高速に実行できるバイナリフォーマット「WebAssembly」の開発に取り組んでいます。 すでに実装の面では、昨年2017年11月の時点でChrome、Firefox、Safari、Edgeの主要なWebブラウザでのWebAssembly対応が揃っていますが、同時にW3CにおいてWebAssemblyの標準化作業が進められています。 そのW3Cから、WebAssembly仕様について初めてのワーキングドラフトが

嫁を面接した企業が「あれ、これって……。」となる画像 はじめに 最近嫁が転職活動をしていたのですが、デザイナーは転職活動をする際に「ポートフォリオ」なるものが必要になるそうです。Webデザイナーである嫁は、このポートフォリオをWebサイトとして製作したいとのこと。 エンジニアリングを生業とする旦那として、ここは一肌脱がねばと思い、ポートフォリオサイトの構築をしました。 コントラクター（僕）のスペック iOSエンジニア Webアプリは過去にやっていた クライアント（嫁）のスペック デザイナー（仕事はWeb系） Ruby, JavaScriptはほぼ書けない HTML, CSSは書ける Git, GitHubは使える クライアント（嫁）の要望 パブリックに公開するのではなく、履歴書に添えたい URLを知っている人しかアクセスしない パスワード（BASIC認証）が欲しい デザインはいちから自分で

こんにちは、@armorik83です。こういう煽ったタイトルを書きたいってずっと思っていたので今回やってみます。 z-indexの値付けどうしてる? z-indexの説明は省略しますが、この値は取りうる範囲が膨大1でそれに対する指標が無いことから、複数のWeb設計者が入り混じる場合にバッティングする恐れがあります。 1から10までの範囲で収めていた設計者のサイトに100刻みの値付けをするプラグインが導入されると、一気に関係が崩れてしまうことが想像できます。 W3Cではこの値についての明確な指標を載せていないようにみえます。（調査不足だったらすいません） 広告業界では Web広告業界の展開は日本国内外問わず盛んで、さまざまな手法でうっとうしい広告を載せてきます。この時、元のコンテンツにオーバーレイする形で表示される広告や、マウスオーバーで拡大する広告などが普及してきたことで、2012年にこの

Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回は、「Nintendo SwitchとWeb」という講演をされていた任天堂さんに、Switch開発におけるWeb技術の活用方法や、開発秘話を伺ってきました。任天堂のお二人は京都から、リモートでの取材に応じていただきました。 Nintendo SwitchではWeb技術が大活躍！ 白石 簡単に自己紹介をお願いで

はじめに ちょっと前に自分なりに調べて放置になっていたのでまとめておく まず前提としてiPhoneとAndroidで全然違う。 で、さらにios10とios9以下とでちがうのとchrome53以上と53未満でちがう。 端末やブラウザのバージョンで処理を切り分けるのがよいのかと思われる iPhone > ios9以下 videoタグを使ってインライン再生するのは無理ぽい。 なので、videoタグで読み込んだ動画をcanvasにsetintervalで随時描画してゆく形になると思う。 また、音声についてはcanvasでは全然関係ないので別途audio要素を作って再生する形になると思う。 > ios10 videoタグを使ってインライン再生ができるようになった。 が、自動再生については音声なしのときの場合のみ使える。 Android videoタグを使ってインライン再生が可能。 > chrome

10年ぶりくらいに Web 開発に再デビューしなくてはならなくなった筆者が見た、現代のフロントエンド開発の基本知識についてまとめます。フレームワークを使ったシングルページアプリケーション開発が対象です。若干の不正確には目をつむってズバリ言い切るスタイルで書いていきます。 Node.js 現代のフロントエンド開発には Node.js を使います。フロントエンド開発を強力にサポートするいくつものツールが Node.js で実装されているからです。 Web 開発で言語処理系というと、Ruby on Rails のような Web アプリケーションフレームワークを思い浮かべるかもしれません。もちろん Node.js にもそのようなフレームワークはいくつも存在しますが、フロントエンド開発で使うツールはそれとは全然関係ありません。 これらのツールを使うことによって解決するのは、以下のような要望です :

プログラマあるあるだけど友人からホームページ作ってよ!と言われることがある。 大体は適当な理由をつけて断るけど、1日程度で作る方法を模索してみた。 テンプレートをダウンロード 1から書いてる暇はないので適当なテンプレートを使います。今回はHTML5 UP!を使います。 HTML5 UP!のLicense 控え目でもCreditsをサイトに乗せれば無料で使用可能です。 以下はサンプル テーマはDirectiveを使用します。 フォームが付いててマークアップはそのままで使えそうですね。 開発環境 テーマがダウンロードできたら開発環境を準備します。 サーバーサイドは書きません。 Cloud9が便利そうだったので登録してワークスペースを作ります。Cloud9のワークスペースは一つなら非公開でも利用可能です。 以下のようにプロジェクトの情報を指定します。 ライブプレビュー準備 生成されたプロジェクト

(function(){ var width = window.innerWidth, height = window.innerHeight; var button; //scene var scene = new THREE.Scene(); //mesh var geometry = new THREE.SphereGeometry( 5, 60, 40 ); geometry.scale( - 1, 1, 1 ); //動画 var video = document.createElement( 'video' ); video.width = 640; video.height = 360; video.autoplay = true; video.loop = true; video.src = "test.MP4"; var texture = new THREE.Video

RICOH THETAで撮影した360°画像をthree.jsで全天球処理したついでにFileAPIのDrag&Drop対応してみた 職場の同僚がRICOH THETAなる 360° 写真が撮影できるカメラを買って、何やら面白そうなことをやりたがってたので、three.js を使って全天球処理するところを手伝いました。 全天球処理はさほど難しくなかったのですが、欲を出して行った Drag&Drop 処理が結構ハマったので、その辺りを話ます。 下の DEMO サイトに THETA で撮影した画像を Drag&Drop すると、いい感じに全天球にしてくれます。ソースコードもすべて Github に公開してますので参考にしてください。 DEMO：http://mitsuruog.github.io/richo-theta-with-threejs リポジトリ：https://github.com

近い将来WebSocketがRailsで使用できるようになると聞くと、デベロッパはみんな舞い上がって興奮します。 しかし、 あなたのユーザは、あなたがWebSocketを使用しているかどうかなんて気にしません 。 ユーザは、”快適なリアルタイムWebアプリ”を求めている。 デベロッパは、”快適でビルドが簡単なリアルタイムWebアプリ”を求めている。 オペレーションは、”デプロイ、スケール、管理が簡単なリアルタイムWebアプリ”を求めている。 上記全ての要望をWebSocketがかなえてくれるのなら素晴らしいことですが、この実装の詳細は高いコストがかかります。 超高性能で全二重なクライアントとサーバ間の通信は、本当に私たちに必要なのか？ WebSocketは、クライアントに情報を配信するための簡単なAPIと、クライアントからWebサーバへ情報を送信するための簡単なAPIを提供します。 サーバ

HTML5はもっとも身に付けたいWEB技術とされており、 本認定制度もスキルアップやキャリアアップのために様々な会社や 職種の方に活用されています。

1990年代初頭から記者としてまた起業家としてITスタートアップ業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア（スペイン）の元日本編集長、World Innovation Lab(WiL)などを経て、現在、スタートアップ支援側の取り組みに注力中。 [読了時間:2分] HTML5でやれることが増加してきた。今後の標準化と各主要ブラウザの対応度合いによって、ウェブアプリケーションの可能性が飛躍的に向上するであろうが「どうせウェブはウェブ、オンラインにならないと使えないわけで、いつでも起動できるネイティブ

先週Facebookがネイティブ化したiOS用のFacebookアプリをリリースした。外観に大きな変化はないが、中身は前バージョンからまったくの別物になった。従来のFacebookアプリはHTML5アプリをiOSアプリのように仕立てたハイブリッド・アプリだった。乱暴に言えばHTML5コードを走らせるFacebook専用ブラウザのようなアプリで、デバイスやプラットフォームを越えた互換性が高く、アプリ自体をアップデートしなくてもサービスの機能追加を反映させられる。Web企業であるFacebookらしいアプリと言える。 しかし、最近は「起動が遅い」「動作がぎこちない」という、ユーザーからの批判的な意見に直面していた。実際Facebookアプリを使っていると、そのぎこちない動作から「Facebookはやはりデスクトップ時代のWeb企業」という印象を抱いてしまうほど。それでは「モバイル重視」の姿勢と

こちらの“ドラえもん”のイラスト、どうやって描かれていると思いますか？PhotoshopやIllustratorなどの画像編集ソフトで描かれているようにも見えますが、実はこのイラスト、なんと画像を一切使わずに「XHTML」と「CSS3」のソースコードのみで描かれているとのことです。 ▽CSS3 ドラえもん インターネット上でイラストを公開するには、JPGやGIFといった画像ファイルでアップロードするのが一般的。しかしこちらのドラえもんはそういった画像ファイルではなく、Webサイトを構築する際に使われるXHTMLとCSS3のソースコードのみで作られています。そのため“右クリックで保存”ができなかったり、ブラウザの種類やバージョンによって見え方が異なるのが特徴です。 こちらはFirefox3.6の場合です。FirefoxやGoogle ChromeはCSS3に対応しているので、グラデーションま