HTML5で楽譜表示して再生したり編集したり : 研究開発
総合研究大学院大学 複合科学研究科 情報学専攻 卒 博士（情報学） 自然言語処理や機械学習、データ分析に関する研究内容とwebシステムの開発と運用について書いています。 シリコンバレーベンチャーみたいに深い技術の事業化をしたいと思っています。 ご興味ある方はご連絡ください。 どういう感じかは、こちらから確認できます 画像ではない手段で楽譜を作るには.... Audiofile.cc, ABC.js, VexFlow , など Audiofile.cc 読み込むjsファイルは <script src="jquery.js" type="text/javascript"></script> <script src="audiofile.js" type="text/javascript"></script> だけです。 そして、 $(document).ready(function() {
第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開発者ができるだけ違和感なく利用できるように工夫されてる点
HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
古いIEでもHTML5 canvasを使えるようにするJSライブラリ「uupaa-excanvas.js」
uupaa-excanvas.js 古いInternet Explorerでも、HTML5 canvasを使えるようにするJavaScriptライブラリ「uupaa-excanvas.js」が公開されています。 SilverlightとVMLを使うようです。 ライセンスはMITとApache License 2.0のようです。
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 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
PDFをHTML5でレンダリングするプラグイン不要の「pdf.js」をMozillaが発表
「pdf.js」はHTML5とJavaScriptで構築するオープンソースのPDFレンダリングツール。MozillaはFirefoxに近い将来このツールを組み込む計画だ。 Mozillaの研究者であるアンドレアス・ガル氏が6月15日（現地時間）、プラグイン不要のPDFレンダリングツール開発プロジェクト「pdf.js」を発表した。HTML5とJavaScriptで構築しており、三条項BSDライセンス（3-clause BSD license）の下、githubで公開している。 現在、PDFをWebブラウザで開くには米Adobe Systemsやサードパーティーが提供するプラグインやアプリが必要だ。だが、こうしたプラグインではPDFのレンダリングに時間がかかり、PDFに備わる機能を完全には利用できない。また、セキュリティ上の問題もある。米GoogleはChrome 8から、サンドボックスでPD
もうFLASH不要かも? HTML5アニメ作成ソフト｢Hype｣登場 iOSにも対応! 【増田(@maskin)真樹】 | TechWave（テックウェーブ）
[読了時間:1分] ウェブコンテンツに魅力的な動きを付与できるFLASH。しかし、Adobe社の公式オーサリングツールは高額で、デザイナーじゃないと手が届きにくかった。その対抗馬として注目を浴びている次期ウェブ標準仕様のHTML5をベースに、手軽にアニメやスライドを作成できるツール「Hype」が米時間の5月20日にお目見えした。 Mac OS X用ソフトとして既にApp Storeで販売中。価格はUSストアでは29ドルで、日本だと3500円と割高だが日本語ローカライズ版が入手できる。 ツールは、FLASHオーサリングツールなどを使用したことがある人なら、数分もあれば使い始められるだろう。始めてこの手の作品を手がける人は少し手まどうかもしれないが、チュートリアル動画があるので、これを一通り見れば見よう見まねでスタートできるだろう。また、今回のバージョンでどのようなことができるのかは、ギャラリ
ユビキタスエンターテインメント，無料で使用できるHTML5/JavaScriptベースのゲームエンジン「enchant.js」をリリース
ユビキタスエンターテインメント，無料で使用できるHTML5/JavaScriptベースのゲームエンジン「enchant.js」をリリース 編集部：aueki ユビキタスエンターテインメントは，主にスマートフォン用のゲームをターゲットにしたHTML5とJavaScriptによるゲームライブラリ「enchant.js」を公開した。 このライブラリは，2Dゲームを作成するための基本システムをまとめたもので，スプライトやバックグラウンド（BG）などのほか，バーチャルゲームパッド機能などをサポートしており，利用者が無料でゲーム作成に利用できる。 HTML5は，Webページ記述に使われるHTMLを大幅に強化したもので，さまざまなオブジェクトを動的に扱う機能に優れており，現在Flashなどで作られているWebページの多くと同等なものを実現できる技術として期待されている。対応ブラウザを使えば，プラグインな
HTML5時代が目前！ 本気で学ぶJavaScript
登場当時、動きのあるWebページを作る技術として注目されたJavaScriptは、その後“不遇”の時代を経て、Ajaxで再び脚光を浴びました。jQueryなどのライブラリの普及で、開発生産性やブラウザ互換性の問題がほぼ解決した現在、HTML5時代を目前にして、JavaScriptの重要度はさらに高まっています。この特集では、今、知っておきたいJavaScriptを一気に解説します。 目次
今、知っておきたいJavaScript
Webブラウザとテキストエディタさえあれば、プログラミングして実行できるシンプルで手軽な言語――。それがJavaScriptが初めて登場してからしばらくの間、多くの人が抱いた印象でした。しかし、Ajaxの登場に伴う第2のブーム以降、ハードルが高くなったように感じられます。 その大きな理由の一つが、DOM（Document Object Model）に基づくJavaScriptプログラミングでしょう。DOMは、HTMLやXMLを構成する各要素に対して、プログラムからアクセスして内部の情報を取得・変更したり、機能を利用したりするためのAPI（Application Programming Interface）です。DOMを使うことによって、WebページをリロードせずにWebページを部分的に書き換えたり、HTMLドキュメントの構造を動的に変えたりといったことが可能になります。 DOMは便利な仕組
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
WebSocketを使っていない、サーバ無用なリアルタイム通信ライブラリ·Easy WebSocket MOONGIFT
Easy WebSocketはWebSocketではなくリアルタイム通信を行うJavaScriptライブラリ。 Easy WebSocketはnode.js製のオープンソース・ソフトウェア。HTML5界隈が賑わっているが、なかなか実用的なものは出てきていない。動画共有サイトのスマートフォン向けインタフェースやWebブラウザ用のゲームがせいぜいではないだろうか。 チャット画面 やはりデスクトップ向けのブラウザで一部のブラウザしか対応していないのが問題なのだろう。HTML5に関連した技術、WebSocketは特にサーバ側の準備も必要で扱いづらいイメージがある。そんな常識を覆すソフトウェアがEeasy WebSocketだ。 Easy WebSocketは正しくはHTML5の仕様ではないがWebSocketを擬似的に再現する。まるでWebSocketではないかと思えるほど、リアルタイムで更新され
head要素に読み込むべき唯一のスクリプト「headjs」 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 「Modernizr」や「html5.js」等、 モダンな環境の為の便利なスクリプトは多々ありますが、 「headjs」はそんな彼らの仕事を一気に引き受けてくれる働き者のスクリプトです。 使い方 Head JS :: The only script in your HEAD 謳い文句はhead要素に読み込む唯一のスクリプト ダウンロードして読み込むだけ。おしまい。 <script type="text/javascript" src="head.js"></script> その多彩な機能 環境の判別 CSS3のプロパティの対応状況、画面のサイズ、ブラウザなどの情報を Modernizrと同じ手法でHTML要素のクラスに出力してくれます。 こんな感じに… <html lang="ja" id="test-page" class="
HTML5のCanvasによって画像加工が出来る「CamanJS」:phpspot開発日誌
CamanJS - Image Manipulation in Javascript HTML5のCanvasによって画像加工が出来る「CamanJS」。 画像編集ツールによってコントラストや露光量を変えたり、ガンマ値を変えたりといった処理で画像を加工できますが、このCamanJSを使えば、Canvasを使ってJavaScriptのメソッドで色を変えられます。 ビフォア アフター 次のようにメソッドをチェーンさせることで画像を加工しちゃえるツールです。 こんなことも出来るのか、ということで覚えておくとサーバに負荷をかけず、便利に使えそうです。 関連エントリ 画像にぼかし効果を与えられるjQueryプラグイン「Image Blur」
モダンJavaScriptを無理なく学べる5冊+3
この5冊で一通り学べます。 最近のJavaScriptが書きたいなあ、と思ったときに、キーとなるのは・・・。jQuery、クロージャ、無名関数、HTML5、スマートフォン対応！？ それらを「わかりやすく」学べる、という視点で選んだ5冊。そもそもJavaScriptって何？という方は、まず以下の記事から。 JavaScript講座 [Smart] ＞＞書き方、構文、演算子・・・。基礎を学べます。 「目指せ！ウェブマスター」JavaScript講座 ＞＞サンプルたくさん！ ハタさんのブログ(復刻版) : javascriptを初めて学ぶ人についてのおさらい。その１ ＞＞今風の書き方の基礎
これからは電子書籍でもJavaScriptプログラミングができる
これから普及が予想される電子書籍や電子雑誌がインタラクティブになっていくことは間違いありません。映像が埋め込まれたニュース、好きな角度から洋服が見られるファッション雑誌、操作しながら解いていけるパズル、途中で登場するモンスターを倒さないとその先が読めないロールプレイング小説、なんていうのもあるかもしれませんね。 将来の電子書籍はアプリケーションと区別がつかなくなる、と僕は考えています。 先日ワーキングドラフトが公開された次世代電子書籍フォーマット「EPUB 3」では、JavaScriptが仕様の中に組み込まれる予定です。将来の電子書籍でのインタラクティブな実装はJavaScriptによって行われることになります。 HTML5/SVGで定義されたスクリプティングをサポート 昨年の12月22日にインプレスR&Dが創刊した電子出版をテーマにした電子雑誌「On Deck（オンデッキ）」の1月18日
スマホサイト：Webアプリモードで意外と書かれていない落とし穴 - Kaleidoscope
ちょっと今回はまめ知識的な内容です。 最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。 （jQuery Mobileなどを利用した開発方法は置いといて） HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。 とくに、よくmetaタグを使った「Webアプリモード（フルスクリーンモード）」にする方法が書かれていたりします。 <meta name="apple-mobile-web-app-capable" content="yes" /> これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。 これで、サイトをアプリっぽく見せられる！ってちょっと興奮しちゃいますよね。 ただ、これって意外な落とし穴があるんです(￣▽￣;) 今回は、僕が知ってる大きな２つの注意点を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch
TechCrunch