[JS]実装はたった一行でOK！ページの選択した範囲を強調する超軽量スクリプト -Fokus選択した範囲を強調するために、アニメーションでページの残りを半透明なレイヤーで暗くするスクリプトを紹介します。 Chromeのエクステンションも用意されているので、自サイトだけでなく他サイトでも利用できます。 Fokus Fokus -GitHub Fokusのデモ Fokusの使い方 Fokusのデモ デモはCanvasを使用しているため、IEを除くモダンブラウザでご覧ください。 ※IE9もダメでした。 デモでは中央のエレメントを選択すると、それ以外が半透明なレイヤーで隠されます。
[JS]旧ブラウザにも対応、簡単な記述でMP3ファイルプレーヤーを設置できるスクリプト -Audio5js | コリス
Audio5jsのデモ 再生はHTML5でしており、非対応ブラウザではFlashプレーヤーで再生します。 Audio5jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="/js/audio5.js"></script> Step 2: Flashプレーヤーの設置 HTML5非対応ブラウザ用にFlashプレーヤーを設置します。ファイルの設置場所は下記の通りです。 / -/public --/js --- audio5.js --/swf --- audio5js.swf デフォルトで「/swf/audio5js.swf」を探します。 Step 3: HTML 再生はボタン要素だけです。 <button type="button" id="play" class="button round">Load Audio</button>
200行で作る、enchant.jsを使った簡単ぷよぷよプログラミング - あのねノート。
2013-08-24 200行で作る、enchant.jsを使った簡単ぷよぷよプログラミング やり方 はじめに この前enchant.jsでぷよぷよ by おっ立ち野郎を作って公開しました。 enchant.jsで作ったHTML5+JavaScriptな「ぷよぷよ」を公開しました これを知り合いR君に紹介したところ、嬉しい事に「僕もぷよぷよ作りたい！」といってもらえました。それでぷよぷよの解説サイトをネットで見つけて紹介しようと思いました。 しかし、テトリスの解説サイトは山ほどあるのに、ぷよぷよプログラミングの解説サイトが全然ありませんでした。特に完成まで解説しているサイトは見つけられませんでした。テトリスはあるのに。 ということで、今回ぷよぷよプログラミングの完成までの解説を書いてみました。これはenchant.jsの基礎をひと通り勉強された方におすすめです。クマをちょこちょこ動かすだけ
ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ
これは凶悪……コーディングのヤバいバグ＆仕様 Best5 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 コーディング中にバグやブラウザ仕様のせいで、「なんじゃこりゃアア」ってなること、皆さんありませんでしょうか。 今回は、その中でもとりわけ「なんじゃこりゃアア具合」が激しいトラブルを、僕の独断と偏見のランキング形式でお話しさせていただきます。 なんでランキング形式にしたかというと、そっちの方が面白いと思ったからです。面白くなかったらごめんなさい。 第5位 IE9.jsを入れると、IE7で謎の隙間が発生しまくる IE9.jsを採用したサイトをIE7,8で見ると、 <class="ie7_anon ie7_class6" id="ie7_pseudo2" style="overflow: hidden; display: block;"/> こんなものが追記されていたりします。 こいつに高さがあるせいで、隙間が生まれてしまいます。が、こいつがな
ユビキタスエンターテインメント，無料で使用できるHTML5/JavaScriptベースのゲームエンジン「enchant.js」をリリース
ユビキタスエンターテインメント，無料で使用できるHTML5/JavaScriptベースのゲームエンジン「enchant.js」をリリース 編集部：aueki ユビキタスエンターテインメントは，主にスマートフォン用のゲームをターゲットにしたHTML5とJavaScriptによるゲームライブラリ「enchant.js」を公開した。 このライブラリは，2Dゲームを作成するための基本システムをまとめたもので，スプライトやバックグラウンド（BG）などのほか，バーチャルゲームパッド機能などをサポートしており，利用者が無料でゲーム作成に利用できる。 HTML5は，Webページ記述に使われるHTMLを大幅に強化したもので，さまざまなオブジェクトを動的に扱う機能に優れており，現在Flashなどで作られているWebページの多くと同等なものを実現できる技術として期待されている。対応ブラウザを使えば，プラグインな
[JS]一行追加するだけで、IE6/7/8でもHTML5のvideoとaudioを利用できる -html5media
HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。 html5media デモページ [ad#ad-2] html5mediaの実装 html5mediaの利用方法は簡単です。 ページに追加する一行 下記をページのhead内に記述します。 <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。 video, audioに非対応のIE7でも期待通りに動画が再生されます。 IE6(IE Tester)でのキャプチャ 参考：video, audioのサポート状況 video, audio
「enchant.js」でゲームを作ろう！ HTML5とJavaScriptによるアクションゲーム制作入門
「enchant.js」でゲームを作ろう！ HTML5とJavaScriptによるアクションゲーム制作入門 ライター：Veki HTML5でゲームが作れるライブラリ「enchant.js」がユビキタスエンターテインメントから発表されました。Webブラウザだけでスプライトを使ったゲームが動くとのことで興味を持った人も多いのではないかと思います。ここではenchant.jsを使ったゲーム作りについて見ていきたいと思います。 enchant.jsがサポートしているHTML5は，長らく使われていたHTML4に代わる次世代Webシステムの要となるものです。HTML5ではWebページの動的な要素，とくにグラフィックスの描画機能などが大幅に強化されており，これまでFlashを使わないとできなかったようなことが，HTMLとJavaScriptだけでできるというのが最大の特徴となっています。 ここにきてIn
[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic
HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。 デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形） あとは、JavaScriptで記述するだけです。 var square = new Sonic({ width: 100, height: 100, fillColor: '#000', path: [ ['line', 10, 10, 90, 10], ['line', 90, 10, 90, 90], ['line', 90, 90, 10, 90], ['line', 10, 90, 10, 10]
HTML5開発者必見、最速のJavaScriptライブラリはどれだ!? パフォーマンスの徹底検証 | ICS MEDIA
HTML5で2次元のインタラクティブコンテンツを制作するには、さまざまなJavaScriptライブラリがあります。どれを選択するべきか迷いどころではないでしょうか？ そこで今回はHTML5の各種JavaScriptライブラリについて、パフォーマンスを比較検証してみました。 今回検証したフレームワーク メジャーなJavaScirptライブラリとして次の5種類でテストしました。バージョンは2013年4月10日現在の最新版を使っています。詳しい検証方法は記事の後半にまとめています。 CreateJS (EaselJS 0.6.0) Arctic.js (v0.1.11) enchant.js (v0.6.3-48) Pixi.js (v1.0.0) Processing.js (v1.4.1) 各種JavaScirptライブラリのベンチマーク結果 ※グラフの数値が高いほどパフォーマンスが高いこと
[JS]自分仕様のかなりかっこいいローディング用アニメーションを生成できる -Sonic Creator
かっこいいデザインのローディング用アニメーションのCanvas版、アニメーションGIF版、CSSスプライトPNG版を同時に作成できるオンラインサービスを紹介します。 Sonic Creatorの前に、まずはSonicのデモから。 Sonic Sonicは、HTML5 Canvasを使ってローディング用のアニメーションを作成する超軽量（約3K）のスクリプトで、実装方法などは下記をご覧ください。 かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic 今回紹介するのは、このSonicをコードベースでオンラインで簡単に設計でき、それをアニメーションGIFやCSSスプライト用のPNG画像を生成するオンラインツールです。
Firefox22が「asm.js」採用へ、JavaScriptがネイティブアプリに近い実行速度まで高速化
By Nathan E Photography 2013年6月にリリース予定のFirefox22に搭載されるJavaScriptエンジン「OdinMonkey」に、JavaScriptプログラムをネイティブコード速度の2倍程度の実行時間で済むように最適化するJavaScriptサブセットである「asm.js」が採用されることが発表されました。既に現時点で利用可能となっているFirefox22のNightlyビルドでは初期設定で「オン」となっており、どれぐらい高速化するかが各種デモとともに体験できます。 asm.js in Firefox Nightly | Luke Wagner's Blog https://blog.mozilla.org/luke/2013/03/21/asm-js-in-firefox-nightly/ 実際にasm.jsがどのようなものかというFAQも用意されてい
Minecraft4kJS - jsdo.it - Share JavaScript, HTML5 and CSS
A quick port of Minecraft4k to test what's possible in JS and HTML5. Because of the nature of this project (it was originally meant as an entry for the Java4k competition, which focuses on executable size), the code is HORRIBLE, but fairly small. You may use the code in here for any purpose in any way you want, at your own risk. var ctx; var pixels; var w = 200; var h = 200; var map = new Array(64
11歳の天才少女プログラマーも注目！ HTML5ゲームエンジン - 週刊アスキー
HTML5で、小学生でも簡単にゲームを作れてしまう、ゲームエンジン『enchant.js』（関連サイト）。オープンソースかつ無料での利用が可能で、enchant.jsで作られたゲームはすでに数多くリリースされています。このenchant.jsがいま、どれくらいすごいことになっているのか、開発元の株式会社ユビキタスエンターテインメントの清水亮代表取締役社長兼CEOにうかがいました。聞き手は角川アスキー総合研究所の遠藤 諭ゼネラルマネージャー。 なお、10月25日（木）から27日（土）まで、お台場・日本科学未来館で開催される『デジタルコンテンツEXPO』（関連サイト）で、実際にenchant.jsを体験できます。ぜひご来場ください！ ■アメリカでも大歓迎された、HTML5ゲームエンジン『enchant.js』 遠藤 先週、アメリカに行かれていたんですよね。 清水 一週間で5回ほど講演したんです
JavaScriptエディタ「Scripted」をVMware/SpringSourceがオープンソースで公開
VMwareのSpringSourceが、JavaScript/HTML5対応のエディタ「Scripted」をオープンソースで公開しました。 Scripted自身がHTML5/JavaScriptで記述されているためWebブラウザ上でエディタとして動作し、HTML/CSS/JavaScriptのシンタックスハイライト、JSLintによる文法チェック、エディタのカスタマイズ機能などを備えています。エディタ部分の機能はEclipse Orionを再利用したとのこと。 Scriptedの全体画面。右側に別ファイルを表示しているところ。
HTML5でロードオブナイツとかいうゲームを作った - mizchi log
陣取り戦争ゲーで、iPhoneのUnity版からの移植です。 ロードオブナイツ - Yahoo!モバゲー http://yahoo-mbga.jp/game/12011436/detail PC(Chrome/Firefox/IE9以上)とスマホ(Webkit)で同じ物が動きます。ヤバゲーとモバゲーでアカウントは共有してるので、どっちからでも入れます。 HTML版としては既存コードとか一切なかったんで、JSに関してはフルスクラッチです。というか全部CoffeeScriptです。 ある日会社で楽しくHaskellでKPI計算モジュール書いてたら、 「UnityのネイティブのゲームをHTML5に移植したい」 みたいな話が降ってきたので、移植しました。3ヶ月ぐらいで。 プラットフォームはモバゲー(スマホ) + ヤバゲーです。HTML5なのは、スマホとブラウザゲーで開発リソースを共通化したかったか
クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」:phpspot開発日誌
クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」 2012年08月24日- FileDrop ? cross-browser JavaScript Drag & Drop file upload ? Блог Прогера クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」。 対応ブラウザであれば以下のブラウザでドラッグ＆ドロップによるファイルアップロードが可能になります。どのJSフレームワークにも依存せず単体で使えます。 IEではIFrameを利用した画面遷移なしのファイルアップロードが可能。 ファイルをドロップすると、各種イベントハンドラが起動されて、タイミングに応じた好きな処理を記述することも出来るみたい。 関連エントリ HTML5を使ったファイルアップロード用プログラム集 jQuer
html5でアプリの壁を超える方法
制限 同時に再生できる音源は1ファイルのみ 再生できるタイミングはユーザイベントのハンドラ内だけ プリロード不可 OS自体のサイレントモードと連動せず BGMを流すだけならこんな方法も $('<div>BGMを再生しますか？</div>').appendTo('body').click(function () { $(this).remove(); (new Audio('bgm.mp3')).play(); }); $('body').on('click', 'a', function (e) { e.preventDefault(); $.get($(this).attr('href')).success(function (html) { $('body').html(''); $('body').append($(html).find('body')); }) });
ネットワーク図を美麗にビジュアル化できるJSライブラリ「sigma.js」:phpspot開発日誌
sigma.js | a lightweight JavaScript graph drawing library ネットワーク図を美麗にビジュアル化できるJSライブラリ「sigma.js」。 HTML5 canvasベースのスタンドアロンライブラリだそうです。マウスでドラッグしたりマウス位置に応じてインタラクティブに変化させることができます。 次のようにグラフィックが美麗であるので、個人的にはグラフィック作成用途に使っちゃってもいい気がしました。 関連エントリ 複数要素の関連をビジュアライズできるライブラリ「arbor.js」 HTML5のキャンバスと連動させて音声をビジュアライズしたデモ 組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
