Video marketing platform and animated video makerCreate, host, and share marketing videos with Wave.video, a powerful video marketing platform. Make animations and explainer videos with Animatron Studio.
MediaRecorder APIをつかってCanvas/WebAudioなゲーム画面を録画する - Qiita
この記事は『ドワンゴ AdventCalendar 2017』5日目の記事です(๑˃̵ᴗ˂̵)و 昨日は @kinoppyd さんの『Gitをバックエンドにしたタスク管理bot』でした。 普段使ってるgitの裏側の世界はとても興味深いですね。 僕は以前から自分用のメモアプリをつくりたいな〜と思っていろいろ考えていたのですが、 データ保存のバックエンドにgitを使うのも面白いかもなぁと思いました！ さて、5日目の今日は『HTML5なブラウザゲームを録画したい話』をします。 どういうわけか：ゲームをつくったら録画したい 僕は昔からゲームをつくるのが好きで、個人でいろいろつくったりしています。 ここ数年はHTML5なブラウザゲームをメインでつくっています。 （といっても、その前はFlashゲームだったので、だいぶ前からブラウザなんですけどね） ゲームが完成し、それをインターネットで公開する際、
sw-precacheでお手軽にオフラインWebアプリケーションを作る | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近、プログレッシブWebアプリ（Progressive Web Apps、PWA）に興味津々なフロントエンドエンジニア、いなばです。 今回は、オフラインWebをまずは自分で実際に手を動かしてやってみよう！ と調べていたところ、sw-precache というモジュールで、リソースのキャッシュ制御がとても簡単にできたのでご紹介したいと思います。 まずは簡単に使ってみる まずはシンプルな構成で試してみました。 ソースコードはこちらになります。 https://github.com/i78s/sandbox/tree/develop/sw-precache-sample 手っ取り早くデモを確認したい場合は、 下記のコマンドを実行してService Workerに対応しているブラウザ( ここで確認できます )で実際の動作を見ることができます。 $ git clone https://github.
Web Messaging API を使ってみる - Qiita
目的 HTML5 に Web Messaging API というのがある。サーバを介さずブラウザ間で通信ができるインターフェイスが提供されている。 調査がてら把握したことを整理。 概要と用途 Web Messaging API はブラウザの任意のドキュメント間での通信をサポートするインターフェイス。現在、postMessage と MessageChannel という API が用意されている。どちらも任意の window オブジェクト同士で、任意のタイミングでデータの受送信をさせることが可能。 よく使われる用途として、iframe で別ドメインのコンテンツを読み込み、そのドメインと通信させる。 例えば、Facebook のいいねボタンは、 iframe で facebook.com のドメインを埋め込み通信させ、その中の cookie の値を取得してそのブラウザが保持するユーザ情報を表示
I am mitsuruog | SPAを構築するときに知っておいた方がいい7つの課題
ブラウザでの Javascript の高速化と Backbone や Angular のような JavascriptMVC フレームワークの登場により、以前より SPA（Single page application）が構築しやすくなりました。 さらに、Yeoman に代表される SPA を作成するするための scaffold（土台）が整備されてきましたので、結構さくっと SPA が作れるようになったのも事実です。 さくっと作った SPA がさくさく動かない・・・作ったけど使えない・・・なんてことにならないように、SPA を構築する前に知っておいた方がいい課題について調べてたり考えてみました。 目次 1. パフォーマンス 2. メモリリーク 3. セキュリティ 4. フレームワークロックイン 5. 画面設計から UI コンポーネント設計への思想転換 6. フロントエンジニア不足 7. 番外
Webix を使ってみた - Qiita
はじめに HTML＋JavaScript でアプリ開発するにあたって、UI ライブラリをどうするか悩みました。独自に CSS＋JavaScript で書ければいいのですが、無理なので既存のライブラリを使うことにします。jQuery UI や jQuery Mobile に始まり、Twitter Bootstrap 、Adobe Topcoat 、Intel App Framework など試しました。モバイルアプリは Onsen UI がよさそうです。デスクトップアプリは Titanium 、Sencha Ext JS 、Kendo UI など見てみました。その上で Webix が気に入りました。 参考 サクサク書けて柔軟なカスタマイズが可能な、UIフレームワーク「Webix」 | #GUNMAGISGEEK Webix とは Webix は、クロスブラウザの（主要ウェブブラウザで動作する
hifive - HTML5企業Webシステムのための開発プラットフォーム
ダウンロード Download ダウンロード カスタムダウンロード ツール/ライブラリ ギャラリー Gallery ギャラリー ガイド Guide チュートリアル Webアプリ入門 基本編 データモデル編 データバインド編 リソースFW編 リファレンス APIドキュメント レシピ Recipe レシピ 資料室 Reference HTML5資料室 HTML5用語辞典 開発者向け Developers Developer Channel ユーザーグループ 開発リポジトリ リリースノート コードホスティング 開発者ブログ hifive開発情報 ヘルプ Help 本サイトについて FAQ 本ウェブサイトでは、利便性及び品質の維持・向上を目的に、クッキーを使用しております。本ウェブサイトにおけるクッキーの使用についてはプライバシーポリシーをご参照いただき、クッキーの使用にご同意頂ける場合は「同意す
HTML5を使ったハイブリッドアプリ開発に使えるUIライブラリまとめ | BACKEND AS A SERVICE mbaas BLOG
PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得られるようになるでしょう。PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。 そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得
ブラウザのみで音声認識とテキスト読み上げを実現する Web Speech API | CYOKODOG
HTML5 の Web Speech API をご存知でしょうか？ ブラウザベースで音声認識とテキストの読み上げを実現する API です。 今回はこの Web Speech API について試したことをまとめてみました。 ちなみに少し前の Chrome では Speech Input API という INPUT 要素に x-webkit-speech という属性を記述するのみで、手軽に音声認識を実現できるという機能がありましたが現バージョンでは廃止されてるようです・・・ Web Speech API の対応ブラウザは Can I Use よりご確認ください。 テキストの読み上げを行う Speech Synthesis API Speech Synthesis API を使用すると、指定したテキストを PC に読み上げさせることできます。 使い方は非常に簡単で、new SpeechSynth
Web コンテンツを開発するための Node.js 簡易 Web サーバー
de:code 2015 にご参加された皆様、ありがとうございました。ご参加されなかった皆様も、そのうちスライドや動画が公開されると思いますので、ぜひご覧ください。 de:code が終わって、前回の記事の続きで「HTML5 を使ったシンプルな 2 D ゲームの作り方(複数インスタンスの生成)」を書こう、と思ったのですが、このシリーズを書いている間に build 2015 があり、その中で、Windows はもちろん、Mac、Linux 環境でも使用できるコーディングツール Visual Studio Code が発表されました。 そして、そのタイミングで公開された Visual Studio 日本チームブログの記事では、このブログの「「HTML5 を使ったシンプルな 2 D ゲーム…」の記事を紹介してくれているのですが、紹介文にはこう書いてありました。 「(Visual Studio 2
Homepage | GSAP
GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff. GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff.
SVGで作成されたローディングアイコンセット「SVG Loaders」
ローディングアニメーションを使いたい時に重宝しそうなSVGアイコンセット。スムーズなアニメーションで動くフラットなデザインが12種類あり、サイズやカラーの変更も簡単にできるので様々なケースで活用できそうです。
チャットを作りながら学ぶSocket.IO〈Node.jsシリーズ vol.4〉
Node.jsの基本を順を追って展開していくこの連載。 今回は中級編の第2回目として、リアルタイムWebを実感してみましょう。 Socket.IOでリアルタイムWebを実感しよう 前回はTwitter Streaming APIにアクセスしてそのデータをリアルタイムに表示しました。 今回はSocket.IOというフレームワークを組み合わせ、クライアント同士でリアルタイムな通信を実現します。 リアルタイムWebとは リアルタイムWebとは、その名の通り、Web上の異なるクライアント間でリアルタイムに通信を行うことです。 現在は主に以下の技術が提唱されています。 ポーリング クライアントがサーバーに一定間隔で問い合わせ続け、変更があり次第処理を行う ロングポーリング サーバーがクライアントからのリクエストを保留し、変更があった場合にレスポンスを返す すぐには答えず「何かあったら返事する」という
srcset属性について - Qiita
とりあえず3行で srcsetはHTML5で策定された新属性 この要素はブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができる IEでは使うことが出来ないので注意(http://caniuse.com/#search=srcset) srcset属性について詳しく 詳しく書いてあり、良い記事です。 srcset と sizes エリック・ポーティス 文と絵 鈴木丈 訳 個人的には、印象に残ったのは グリンピースおいしい^q^ でした メリット Retinaディスプレイ用に画像を切り替える ウィンドウサイズに合わせて画像を切り替える ウィンドウサイズに合わせて動的に画像を切り替える ->環境ににあった最適な画像をブラウザが選んでくれる（余計な画像は読み込まない） 引用元:HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう デメリ
ビデオチャット＆テキストチャット作成チュートリアル！WebRTCを簡単＆柔軟に使える「SkyWay」を使ってみよう
ビデオチャット＆テキストチャット作成チュートリアル！WebRTCを簡単＆柔軟に使える「SkyWay」を使ってみよう 桂健太（HTML5 Experts.jp編集部） WebRTCを簡単に利用するためのプラットフォームSkyWayをご存知ですか？本連載では、WebRTCを簡単に利用するためのプラットフォームSkyWayについて、基本的なチュートリアルから、各種ライブラリの紹介までしていきます。 連載第1回目である今回は、まず、WebRTCの基本的な説明をした後に、実際にSkyWayを使って、ビデオチャットの作成とデータチャンネルを使ったチャットの作成をしていきます。 WebRTCとは WebRTCとは、ブラウザやアプリ間でビデオや音声、データのやり取りをP2P(Peer to Peer)で行うことを可能にする規格です。 従来のビデオチャットは互換性のない独自技術で実装されていましたが、Web
crocro.jscam
「crocro.jscam」JavaScriptでWebカメラの画像を取得するライブラリ はじめに 「crocro.jscam」は、JavaScriptで、Webカメラの画像を取得するためのライブラリです。 動作対象はHTML5以上、PCとなります。デバッグを行ったのは、Chrome16、IE9、Firefox9になります。 本ライブラリは、以下のようなことを行なえます。 Webカメラの画像のキャプチャ。 キャプチャした画像の2値化（白黒化）。 2値化を元にしたラベリング（領域分割）。 ドットパターンの検出、あるいはマーカーの検出（4隅の位置と向き）。 キャプチャを指定した場合の即時コールバック処理（各種解析データの取得）。 検出時のコールバック処理（各種解析データの取得）。 Webカメラで取得した画像をHTML5で利用したいといった用途や、マーカーをコントローラー代わりに使った簡単なゲー
スマートフォンはセンサーの塊！ たった数行のHTML5とJSで扱えるセンサーまとめ(デモ・動画あり) – ICS MEDIA
Figmaでイージングを理解しよう！ プロトタイプの基礎から実装方法の紹介 10月19日公開海老江 優太♥ 17
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jsによるCSSの動的定義 - Qiita
GitHub - glassesfactory/kazitori.js: pushState library.
Processing.js drug and drop
