第32回 HTML5によるリッチコンテンツ作成のためのJavaScriptライブラリ「CreateJS」 | gihyo.jp
CreateJSで提供される5つのツール 今回は、4月に公開されたばかりの「CreateJS」を紹介します。CreateJSはHTML5を利用したリッチコンテンツ作成のためのJavaScriptライブラリ/ツール集です。著名なFlashエンジニアであるGrant Skinner氏が開発しており、ActionScriptに似た使用感を実現している点が大きな特徴と言えます。 CreateJSでは、次の5つのツールが提供されています。 EaselJS TweenJS SoundJS PreloadJS Zoe それぞれ、以下のような機能を備えています。 EaselJS EaselJSはHTML5のキャンバス上にコンテンツを描画するためのJavaScriptライブラリです。提供されるAPIがActionScript風になっており、Flash開発者ができるだけ違和感なく利用できるように工夫されてる点
jQueryをロードする際のナイス！と思った書き方
概要 ▶ 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds!先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。このブログも実はPC版は形式上HTML5のページになっているんです。見た目はほとんど変わって本ページはプロモーションが含まれている場合があります 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds! 先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。 このブログも実はPC版は
UFOを操ろう！ HTML5+JavaScriptで実装するスマホコントローラーの仕組み。
HTML5ゲームの投稿プラットフォーム「jsdo.it HTML5-Games」がスタート！ HTMLファイ部ほんだです。 カヤックの新規開発事業部「ブッコミジャパン」が、 HTML5ゲームをあそべる、つくれるプラットフォーム「jsdo.it HTML5-Games」をリリースしました！ jsdo.it（弊社運営のHTML5コード共有サイト）からHTML5ゲームを簡単に投稿でき、 他のクリエイターによって投稿されたゲームを無料で遊べます！ また、スマートフォンをコントローラーにしたゲームを簡単につくれるようになる JavaScriptライブラリ「jsdoitController.js」もリリースしました。 今回は「jsdoitController.js」で使えるようになる 「jsdo.it WebSocket Controller」（以下：jsdo.it コントローラー）の 仕組みについて
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
Bootstrapを使ったサイトに組み込みたいWYSIWYGエディタ·Bootstrap-wysihtml5 MOONGIFT
Bootstrap-wysihtml5はTwitter Bootstrapで使えるWYSIWYGエディタです。 最近よく目にするようになったTwitter Bootstrapを使ったWebサイト。そんなWebサイトでWYSIWYGエディタを使うならば導入したいのがBootstrap-wysihtml5です。 Bootstrapらしい、すっきりとしたUIです。 漢字を変換した後の動きがちょっと妙です。 テキストのヘッダー変換があります。 リストや装飾もあります。 Bootstrap-wysihtml5は現時点では日本語を入力する際の変換処理を行った後、表示がずれてしまうことがあります。しかしそれさえ修正すればBootstrapとマッチしたデザインで利用できる場面が多いのではないでしょうか。 Bootstrap-wysihtml5はHTML5/JavaScript製、GPLのオープンソース・ソ
ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」:phpspot開発日誌
Resumable.js: Fault Tolerant Resumable File Uploads in JavaScript - Badass JavaScript ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」。 HTML5のAPIを使ってこうしたことが実現できるようになるみたいです。 ファイルが大きくなり、回線も太くなりますがブラウザベースだと落ちちゃったらまたやり直しと回線も無駄ですし、何より時間のムダですね。 こういった機能が広まれば沢山の人の無駄を減らせそうです 動作ムービーは以下に。 何年後かには当たり前になっていてそんな時代があったの？ということになるかもしれませんね githubにてソースが公開されています 関連エントリ HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 HTML5のcan
HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
HTML5 開発者に便利なツール 14 個
先日 Google+で Addy Osmani 氏が紹介していたオンラインツールが便利そうだったので紹介します。 DocHub.io # CSS, HTML, JavaScript, DOM, jQuery, PHP, Python の API リファレンス。インクリメンタルサーチできるので、開発中は常に開いておきたい。 Dillinger.io # 最近 GitHub 関連で使われるようになって流行り始めた Markdown 記法を、視覚的に確認しながら入力できるツール。Dropbox や GitHub のアカウントで繋ぐと、アップロードできるようです。Mac 用デスクトップアプリの Mou というのも合わせて紹介されていました。 HTML5Please # 今から使える HTML5 機能のリストとブラウザの対応状況に応じたアドバイス、そして Pollyfill (未対応ブラウザ向けに機
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～
HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。 その大きな理由の一つに挙げられているのが、iPhoneやAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。 というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ
HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog
Flashでよく見かけるテキストシャッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんｗ)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンと、HTML5の新要素Canvasを使うバージョンの二種類を用意しました。 【2017年4月26日 追記】 【重要】JSライブラリーはGitHubで更新しています。使用したい方は次のGitHubのリポジトリを御覧ください。 Canvas版はCreateJS 2015年版でも動作するよう更新しました。 デモ demo (HTMLエレメント版) demo (Canvas版) ソースコードはMITライセンスで公開してしますので、個人・商用問わずご自由にお使いください。 ShuffleText.js (HTMLエレメント版) ShuffleEaselText.js (Canvas版) それでは以下で使い方を紹介して
HTML5 Canvasを始めよう：EaselJSを使った流体パーティクル入門 | ClockMaker Blog
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」で流体パーティクルのデモを作ってみました。 demo source EaselJSを使えばFlashのようにHTML5 Canvasを使うことができるので、ActionScriptから概念だけではなくコードの再利用性が高まります。今回は流体パーティクルの表現を通して、EaselJSとCanvasのテクニックを紹介していきます。 デモの作り方 冒頭のデモですが、私が以前作成したFlashの作品「Flashの高速化を試す、BitmapDataを配列に格納することで2〜3倍の高速化」から移植したものです。 さて、このデモをHTML5 Canvasに展開するにあたり、特に抑えておきたいのは次の点だと思いました。 フォースマップの作成 パーティクル情報を付与した表示クラスの作成 フォースマップ
HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
HTML5やJavascriptで制作された非常にシンプルな3D弾幕避けゲーム「Fastkat」と「Fastkat 2」が凄い « doope! 国内外のゲーム情報サイト
数々の実験的なソフトウェアやゲームなどを制作しているOMIODが新たにリリースしたブラウザゲームが非常に単純ながらユニークで楽しいタイトルとして海外のソーシャルメディアなどで話題となっています。 これはHTML5とCanvas、CSS3とJavascriptライブラリで制作された3D弾幕避けゲーム「Fastkat」と、HTML5とWebGL、Javascriptライブラリを利用した続編「Fastkat 2」で、非常に手軽且つ熱い弾幕避けが妙に癖になるタイトルに仕上がっています。また、Web技術的な側面から興味が引かれる方も多いのではないでしょうか。
DeNA、HTML5開発支援フレームワーク「Arctic.js」をオープンソースとして公開【訂正あり】 | gamebiz
DeNA、HTML5開発支援フレームワーク「Arctic.js」をオープンソースとして公開【訂正あり】 ディー・エヌ・エー（DeNA)<2432>は、本日（1月24日）、人気ゲームタイトルで使用されているHTML5開発支援フレームワーク「Arctic.js」をオープンソースとして公開した、と発表した。 「Arctic.js」は、スマートフォン向けブラウザゲームにおけるインタラクティブなアクションゲーム操作や、複雑なアニメーション表現を支援するJavaScript1フレームワーク。アプリ開発者は、「Arctic.js」を用いてJavaScriptのコーディングを行うことで、短期間かつ一度の開発でAndroidとiOSに対応した高品質なゲームが提供できる。 「Arctic.js」は、以下の特徴があるとのこと。 ・豊富なアニメーション作成支援機能 ・表示ツリー、イベント伝播モデル ・Action
noscript要素をhead要素で使う
様々なライブラリのお陰でJavaScriptでドキュメントをゴニョゴニョするのが簡単になったので、代替コンテンツを用意することはあまりなくなった。そのためnoscript要素が使われているページを見ることはまず無い。などと始めながらそういう代替コンテンツのためのnoscript要素の話ではなく、head要素内でうまく使うとJavaScriptの有効・無効でユーザーを振り分けられるという話。 具体的には以下のように書く。 <head> <noscript> <meta http-equiv="Refresh" content="0; URL=noscript.html"> </noscript> </head> これでJavaScriptが無効になっている場合noscript.htmlにリダイレクトされる。HTML4.01ではこういったことはできなかったのでつい最近まで知らなかった。印刷向け
JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Adobe、HTML/CSS/JavaScriptでできた次世代コードエディター「Brackets」を発表
シンプルデザインがいい感じのHTML5オーディオプレイヤー「audio.js」:phpspot開発日誌
GitHub - madrobby/dom-monster
