Use web workers to run JavaScript off the browser's main thread | Articles | web.dev
In the past 20 years, the web has evolved dramatically from static documents with a few styles and images to complex, dynamic applications. However, one thing has remained largely unchanged: we have just one thread per browser tab (with some exceptions) to do the work of rendering our sites and running our JavaScript. As a result, the main thread has become incredibly overworked. And as web apps g
JavaScriptでファイル操作！？ File APIを使いこなそう
<textarea id="text" placeholder="テキストを入力してください。"></textarea><br /> <button id="btndownload">ファイル作成</button> <div id="disp"> </div> <script type="text/javascript"> document.getElementById("btndownload").addEventListener("click", function () { var text = document.getElementById("text").value; var blobBuilder; // （1）BlobBuilderの作成 if ("MozBlobBuilder" in window) { blobBuilder = new MozBlobBuilder();
JavaScriptでローカルにファイルを保存する方法（その1） - るさんちまん
JavaScriptでローカルにファイルを保存する方法を調べたので、メモ。 動作確認はMac OS X10.9.2、Google Chrome 33で行っています（他のブラウザについては、参考リンクにもある JavaScriptからローカルファイルを作成する方法まとめ - あらびき日記 をご覧ください）。 Chromeでローカルにファイルを保存するには、File API: Writerを使います。 単純なテキストファイルをローカルに保存するサンプルは下記のようになります。 サンプルコード <script type="text/javascript"> function writeToLocal(filename, content) { // chrome以外は弾く var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf('chr
[HTML5] FileSystem APIの概要と活用 #1 ｜ Developers.IO
FileSystem API FileSystem APIとはWebアプリケーションでユーザのローカルにデータの保存、読込ができるAPIです。 ただし残念なことに対応してるブラウザが多くはありません。 今回はChrome※１を使っていますが、Chomeもブラウザのバージョンが上がるごとに仕様が少しずつ変わっていたりしています。APIのメソッドにもベンダプレフィックスがついていることからまだ実験的な段階といえます。 それでも可能性が色々あるAPIですので、今回取り上げてみました。 ※１ chromeのはバージョン31を使用しています。 保存方法について FileSystem APIには「TEMPORARY」「PERSISTENT」の形式が2種類があります。 TEMPORARYで保存したファイルは空き容量が必要になった時などブラウザの判断でファイルを削除することができるので一時的に保存すること
![[HTML5] FileSystem APIの概要と活用 #1 ｜ Developers.IO](https://cdn-ak-scissors.b.st-hatena.com/image/square/81a65728920e1ab9b31f24ef152965e537453665/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F11%2Fhtml5.png)
HTML5のFile API:Writerで、動的データのダウンロードを実装してみた。 - kurukuru-papaのブログ
前回の記事では、HTML5のBlobを使用して、動的データのダウンロードを行いました。非常に簡単に実装できたのですが、ひとつ残念だったのは、ファイル名を指摘できないことでした。 今回、HTML5のFile API:Writerを使って、ファイル名を指定して、動的データのダウンロードを行なってみました。難しいことなく、出来上がったのですが、現状では、対応ブラウザがGoogle Chromeだけとなってしまいました。File API:Writerは、各種ブラウザの実装が普及していないようですね。 では、作成してみたサンプルプログラムを説明します。 画面イメージ 作成したプログラムをブラウザで表示した画面イメージです。ダウンロード時のファイル名と、ファイルの内容を指定するテキストボックスがあります。ダウンロードリンクから、ローカル環境にダウンロードする事ができます。 プログラム HTMLです。
Read files in JavaScript | Articles | web.dev
Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, when sharing photos or submitting tax documents. It also allows sites to read and manipulate them without ever having to transfer the data across the network. This page walks through how to use JavaScript to
今から３分で，HTML5のドラッグ＆ドロップAPIと File APIを習得しよう（JSの実装サンプル付き） - 主に言語とシステム開発に関して
JavaScriptプログラミングのTOPへ 今から３分で，HTML5の JavaScript API の使い方を２つ覚えよう。 １：ドラッグ＆ドロップAPI 画面上の要素を。 画面外から。 ２：File API 読み込み。 書き込み ※これは覚える必要はない。 シンプルなサンプルコード付きで，これらの実装の方法を素早く学習する。 ※サンプルは，IE8のようなHTML5未サポートの古いブラウザでは動かないので注意。FirefoxやChromeを使うこと。 では，ここから３分の時間のカウントを開始。集中して読もう。 （0：00〜前半の１分半） 画面内でのドラッグ・ドロップ （後半の1：30〜3：00） 画面外からのドラッグ・ドロップ 参考資料 （0：00〜前半の１分半）画面内でのドラッグ・ドロップ まず，動作例を見てみる。「リンゴ」をバスケットにドロップしてみてほしい。 動作サンプル１ ht
HTML5でクロスプラットフォームなデスクトップアプリを開発できる「Electron」とは
Electron（旧Atom-Shell）とは、Web開発者がHTML5とNode.jsでMac、Windows、Linuxのデスクトップアプリを作れるクロスプラットフォーム実行環境です。Electronはオープンソースで無料で使える上に、MITライセンスであるため、商用利用も可能です。開発元はGitHub社です。 最近はJavaScript、HTML5の進化によって、多機能なWebアプリケーションが増えてきました。それに伴い、モバイルでは、WebViewやApache Cordovaなどを使ったハイブリッドアプリも注目されています。Electronはその流れの中から生まれた新しい実行環境です。 ElectronはChromiumブラウザを内蔵しているのが一番の特徴です。Chromiumブラウザは、Google製のChromeブラウザのオープンソース版にあたります。ウェブ開発者がChrom
HTML5やJavaScriptでゲームが作れる！ ゲーム制作のためのアプリケーション、フレームワーク、ゲームまとめ
HTML5で誰でもゲームが作れる！？ 最近webで何かを作るためのフレームワークというものがどんどん出てきており、ゲームにしろwebサイトにしろ、さわりを学べばそれを作る組み合わせだけなら抑えることが可能になってきています。 それを実際に使いこなし、またそれで作るものの内容がしっかりしていなければ何人もの人が使ったり遊んでくれるものにはならないわけですが…。優れた構想を持ったクリエイターが自力でゲームを作る、ということは実際に出来るようになっていると言えます。 今回は、それを実現するフレームワークやゲームエンジンと言われているものをまとめて紹介します。プログラミングやCanvasについてはちょっと知識が浅いので、調べたことをまとめるに留めています。今後の勉強課題ということで…。 ゲームエンジンまとめ よくHTML5でゲームが作れる、JavaScriptゲームエンジンというように紹介されるも
[63] インラインフレームで 他のHTMLファイルを組み込もう iframe要素
<iframe>要素の HTML5 での変更点は、frameborder属性・marginheight属性・marginwidth属性・scrolling属性・longdesc属性・align属性・scrolling属性が廃止されたこと。 代わりに新しく、srcdoc属性・seamless属性・sandbox属性が追加されました。 インラインフレームを配置してみよう ●サンプル1：インラインフレームの基本形 src属性で、別のHTMLファイルを指定するのが基本形です。 サイズを指定しなければ、デフォルトサイズ （300px×150px）になります。 <iframe src="smp63_1.html"></iframe> サイズを指定すると、こんなかんじ。 <iframe src="smp63_1.html" width="280" height="120"></iframe> width
![[63] インラインフレームで 他のHTMLファイルを組み込もう iframe要素](https://cdn-ak-scissors.b.st-hatena.com/image/square/a26e5fad85b325c1cc4d0ad723644a71960ab58a/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-45.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2Ftsubu_icon2s.jpg)
［速報］マイクロソフト、HTML5/JavaScriptアプリをiOS／Android／Windows対応に一括変換する「ManifoldJS」をオープンソースで発表。Build 2015
［速報］マイクロソフト、HTML5/JavaScriptアプリをiOS／Android／Windows対応に一括変換する「ManifoldJS」をオープンソースで発表。Build 2015 マイクロソフトが米サンフランシスコで開催中のイベント「Build 2015」。2日目の基調講演では、iOSやAndroid、Windows 10などクロスプラットフォーム対応のアプリケーションを一括で生成するツール「ManifoldJS」を発表しました。 マイクロソフト チーフエヴァンジェリストのスティーブ・グッゲンハイマー氏。「Windows対応だけではなく、クロスプラットフォーム対応のアプリケーションをどう作ればいいのかとよく聞かれる。2年前、われわれはゲーム向けにUnityを発表し、昨年はiOSとAndroid対応でXamarinの採用を発表した。今年はWebアプリケーションにフォーカスしよう」
HTML5のFile APIを使用して、ドラッグ＆ドロップでファイルをアップロード | Soraxism
社内で使用するファイルアップローダを作ることになりました。 実装段階では従来の「ファイルを選択」ボタンを押して、ダイアログ内でファイルを選択する仕様だったのですが、操作を見ているとかなり深い階層のファイルをアップロードするようなこともあるようで、階層たどっていくのが手間なように感じたため、ドラッグ&ドロップでファイルをアップロードできるように仕様を変更しました。 実装手順をメモとして残しておきます。 仕様、完成図 まずは完成図から。 仕様は、 ドラッグ&ドロップでファイルをアップロード 従来の「ファイルを選択」ボタンからでも可 複数ファイルに対応 という感じにしてみました。 htmlの内容 <div id="drag-area"> <p>アップロードするファイルをドロップ</p> <p>または</p> <div class="btn-group"> <input type="file" m
ときどきWEB | HTML5のFile APIでローカルファイル情報取得してやんよ!!!
そろそろHTML5 APIのひとつでもリファレンスしていこうかな・・・ かといって今さらcanvasとかやってもしょうがないし、MathMLみたいなマニアックなものは覚えても使う機会があるかどうか・・・という事で 『File API』というヤツを手始めに覚えようかと思います。 『File API』について HTML5以前はブラウザ(またはWebアプリ)からローカルファイルを扱うには<input type="file">タグを利用してユーザーがファイルをアップロードする必要がありましたが、 File APIの登場でJavaScriptからローカルファイルを直接読み取ることができる様になりました。 このAPIはユーザーが指定したローカルファイル(Webブラウザが動作するパソコンのHDDやSSDといったストレージに置かれたファイル)の情報やデータを取得できます。 主なAPIの種類 File AP
JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, when sharing photos or submitting tax documents. It also allows sites to read and manipulate them without ever having to transfer the data across the network. This page walks through how to use JavaScript to
モダンJavaScriptアプリケーション開発 in Salesforce - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに HTML5でのアプリケーション開発は、エンタープライズ向けアプリケーションでも当たり前のようになってきました。これはSalesforceにおけるアプリケーション開発でも同じです。 Salesforceでのアプリケーション開発はVisualforce/Apexで行うというのが数年ほど続いてきたので、HTML5つまりJavaScriptを主体とするアプリケーション開発にはなれていないベンダーも多数あるかと思います。自分は創業当時からJavaScriptでのSPA(Single Page Application)をメインプロダクトに
Chrome 43から各種Permissionの状態を問い合わせるPermissions APIが提供されます - Qiita
Webブラウザが提供するAPIの中には、事前にユーザが許可しなければ結果を得られないAPIがいくつかあります。GeolocationやNotificationなどがそうなのですが、ユーザから権限を取得するための方法や、権限を得たのかどうか問い合わせるための仕組みが、今まではAPIごとに異なるやり方になっていました。これを改善するために、Permissions APIがChrome 43から提供されます。そのアナウンスがHTML5Rockの更新情報として流れていましたので、さっそく日本語訳してみました。そのようなAPIを利用されている方々は、ぜひ下記の内容を読んで、今後の実装作業の参考にしてください。 原文: http://updates.html5rocks.com/2015/04/permissions-api-for-the-web Permissions API for the We
★Web Storage
■sessionStorageは、一回限りのセッションで有効なストレージ sessionStorageは、ウィンドウやタブ単位での一回限りのセッションで有効なストレージです。 ウィンドウやタブが開いている間のみデータが保存され、閉じるとデータが失われます。 同じドメインのサイトを別々のウィンドウで開いている場合には、それぞれが別のsessionStorageとなります。 クッキーとは異なり、ウィンドウ間でデータが共有されることはありません。 sessionStorageを利用する一例を挙げてみます。 例えば、2つのウィンドウで同じサイトを開きながら航空券を注文する場合、 クッキーでは買い物かご情報が混在してしまって、同じフライトのチケットを気づかずに2枚注文してしまう可能性があります。 sessionStorageでは、それぞれが別のセッションとなるため、 別ウィンドウの買い物かご情報が混
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Introduction to Service Worker: How to use Service Worker - HTML5 Rocks
ウェブアプリケーションからのファイルの使用 - Web API | MDN
HugeDomains.com
