Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする こんにちは。 pushStateやpopStateというHTML5 HISTORY APIをご存知でしょうか。 もともとhistory APIは前からあり、history.back();などでブラウザの戻ると同じ挙動をさせることができます。 今回はHTML5で追加されたpushStateとpopStateに注目していきましょう。 よくAjaxなど、画面遷移を伴わずコンテンツなどの入れ替えを行う際に活用されています。 Facebookの例 ※個人情報の観点からスクリーンショットがご用意できずすみません。 メッセージページでは左側にメッセージのやり取り相手の写真が並びます。 それらをクリックすることによってメインのやり取りが表示されていく
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.
HTML5によって表現力が高まっていき、さらにハードウェアとJavaScriptエンジンが高性能化することでWebベースのゲーム開発も現実的なものになってきました。高度なゲームはまだ難しいかも知れませんが、パズルゲームやRPGであれば十分こなせるようになっています。 今回はそんなHTML5ベースのゲームエンジンKiwi.jsを紹介します。デスクトップ、スマートフォンの両方に対応したゲームエンジンです。 Kiwi.jsの使い方 Kiwi.jsでは様々な機能のデモが用意されています。例えばスプライト画像による動きのあるアニメーション。マウスの動きに合わせて動きます。 アニメーションとして自動再生されるタイプもあります。 カメラ。オブジェクトを中心に映し続けます。 多くのオブジェクトを描画しても動きは遅くなりません。 キーボード入力もサポートしています。 テキストについても表示場所、フォント、色
HTML5 FileSystem APIを使うと、ユーザのローカルファイルシステムにファイルを書いたりすることができます。もちろん自由にファイルを読み込めるわけではなく、Chrome Webブラウザが持っているサンドボックス内に通常は限定されます(Chromeアプリの場合はその限りではないですが)。オフライン対応アプリケーションを開発する場合には、非常に魅力的なAPIです。 僕の場合はChromeアプリ内でFileSystem APIを使っていたのですが、「既存ファイルの上書き処理」をする際に困ったことと解決策を、本エントリで紹介してみたいと思います。FileSystem API自体の説明は、「 FileSystem API について知る」をご覧ください。 まず、普通にファイルに何か書き込みを行いたい場合、以下のようにコーディングすると思います。 function onInitFs(fs)
こんにちは、古見澤です。 アルバイト時代以来となるので、実に7年ぶりの投稿となります。今後共よろしくお願いします。 久しぶりに技術畑に帰ってきたためブランクを取り戻すのに苦労していますが、鉄板の技術から胡散臭い(褒め言葉)新技術まで、色々なことが体験できる環境は楽しいですね。 さて、今回はプライベートで少し node-webkit を触る機会があったので、その紹介記事となります。 node-webkitとは node-webkitはChromium と node.js ベースで作られた、GUIアプリを動作させるランタイムです。 アプリはHTMLやJavascriptで記述を行い、作ったアプリはLinux、Mac OS X、Windowsで動作が可能です。 配布元:https://github.com/rogerwang/node-webkit node-webkitを利用したアプリケーショ
最近、ますますJavaScriptの勢いが増しています。特に注目すべきはデスクトップ分野ではないかと思います。nodeが安定してくるのに合わせて、Webアプリケーションやサーバサイド以外の分野でもnodeが使われるようになっています。ということで今回はnode-webkitの面白さ、実際にどういったアプリケーションが作れるのかを紹介します。 マルチプラットフォーム対応 node-webkitはWindows(32bit)、Mac OSX(32/64bit)、Linux(32/64bit)に対応しています。最新の0.10.4ではnode 0.11.13/Chromuim 35.0.1916.157がベースになっており、Chromeの最新の機能が使えるようになっています。 Webアプリケーションのネイティブ化 やはりJavaScriptでネイティブアプリが書けるのは魅力です。それもTitani
2014/8/30に開催された「HTML5とか勉強会 in IWATE 2014」のセッション資料です。
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
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
Create any product you can imagine and sell it everywhere. We remove the roadblocks—supply chain, global shipping, and customer service—so you can focus on your creativity. With automatic storefronts on platforms like YouTube, TikTok and more, your fans can easily buy what they love from you. You create. We handle the rest.
Today we’re going to be creating a file uploader using HTML5 drag and drop, along with the file reader API and some PHP. We’ll also be using local storage to remember which files were uploaded by the user. Getting Started For this tutorial I’m using jQuery and an icon font called symbolset. If you don’t want to get symbolset you could use an alternative or just not use a symbol font all together!
KineticJSはCanvasタグを使ったベクターグラフィックをより簡単に使えるようにするJavaScriptライブラリです。 HTML5の登場によって、Web上でも高度な表現が可能になっています。とはいえそのためにすごい量のコーディングをしなければならないイメージがあります。しかしKineticJSを使えば分かりやすいコードで、ゲームやドローを伴ったグラフィックスが描けそうです。 サンプル。ボタンを押すとオブジェクトが動く。 こちらは星をドラッグアンドドロップできる。 世界地図のベクター画像。 ビルのマップ。マウスに反応して格好いい。 動物の絵と影をマッチさせるゲーム。 ここからは実際に利用されている例。ロボットアバターを作成する。 こんな感じに自由に選べる。 かつてはFlashでやっていたようなグラフィックがJavaScriptで実現する。 ひげを載せる遊び。これもKineticJS
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
sketch.jsはマウスの入力に反応するデジタルアートを作成するフレームワークです。 Webは表現の場です。必ずしも何かのサービスを作らないといけない訳ではありません。そこで今回はsketch.jsを紹介しします。クリエイティブなコーディングを助けてくれるJavaScriptフレームワークになります。 デモの作品です。マウスを動かすとボールが表示されます。 最初は大きく、次第に小さくなっていきます。 sketch.jsはProcessingやOpen Frameworksを使った事がある方であればすぐに使い方が習得できるそうです。基本的にはマウスの動きによって何らかのオブジェクトを描いたりアクションを起こすという使い方になるそうです。グラフィックスはCanvasまたはWebGLを使って描きます。 sketch.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウ
もともと、Appleが主にDashboardウィジェットの描画のためにWebKitに導入したCanvas API。サンプルコードと見比べながら、効率良く学習しよう Canvas APIの基礎 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。今回はHTML5のcanvas要素で使える2次元描画コンテキスト、俗にいう「Canvas API」を取り上げます。 Canvas APIは、もともとAppleが主にDashboardウィジェットの描画のためにWebKitに導入したものです。それがFirefoxやOpera、Internet Explorer(9以降)に実装され、現在はW3Cによって標準化が進められています。JavaScriptのメソッドで直接図形を描画するのが特徴で、ビットマップ画像の加工や、ゲームのようなインタラクティブ性の高いアプリケーションに向
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く