おねえさんのコンピュータを作ってみた
まだやってたのか、と言われてしまいそうですが、おねえさんが計算にかけた時間と比べればまだまだです。 『フカシギの数え方』 おねえさんといっしょ！ みんなで数えてみよう！ この動画で出てくるおねえさんのコンピュータを作ってみた、というお話。 おねえさんのコンピュータからアクセスできます。 検索アルゴリズム HTML+CSSでコンピュータの画面を再現してみました。Javascriptを組むより、そっちの方に時間がかかった気がする。 経路の描画にはCanvasを使ってます。 この問題は自己回避歩行(Self-avoiding walk)と呼ばれるものらしいです。 単にグラフ上を移動するだけなので、小さいなサイズなら単純な深さ優先検索(DFS)で解けます(大きなサイズで何が起こるのか・・・それは動画で)。 実装では、DFSによる検索プログラムをWeb Workerを使って走らせ、スタートとゴールを
Chromeブラウザ初の「WebRTC」実装発表 - JavaScript/HTML5でIMを簡単開発 | エンタープライズ | マイコミジャーナル
Google Chrome runs web pages and applications with lightning speed. WebRTC実装のChromeへのマージが開始されたことが報告された。WebRTCはJavaScriptおよびHTML5技術でリアルタイムコミュニケーションアプリケーション(いわゆるインスタントメッセンジャー)の開発を可能にするためのオープンソースプロジェクト。テキストのみならず、音声や動画などを使ったリアルタイムコミュニケーションをJavaScript APIとHTML5のみで利用できるようにすることを目指している。 GoogleはChromeにWebRTCの機能を取り込むことを発表。まだマージは始まったばかりで、これから実際に利用できる状況まで仕上げていくことになる。Googleは自社のGmailにおいてインスタントメッセージング機能を提供している。W
HTML5とJavaScriptでネイティブPDFリーダを実装へ、Firefox | エンタープライズ | マイコミジャーナル
Firefox web browser - Faster, more secure & customizable FirefoxでPDFを閲覧する場合、Adobe Readerやそのほかサードパーティベンダが提供するプラグインまたはエクステンションを使うことになる。ブラウザ内にPDFを表示する場合でも、一旦ダウンロードして外部アプリケーションで閲覧する場合でも、ユーザ体験の面ではそれまでのWebブラウジングとの一貫性が消失するという問題がある。インタラクションはブラウザやWebのそれからアプリケーションのものに置き換わることになるし、ブラウザとの連動性も低い。 Firefoxにおいてこうした問題を解決しようという取り組み「pdf.js」が進められている。CanvasやSVGといったHTML5技術とJavaScriptのみでPDFリーダを実装し、FirefoxからネイティブにPDFを閲覧でき
Firefox 5 の後方互換性に関わる修正のまとめ
先日 Firefox 5 のベータ版が公開されました。Firefox 5 の正式版は 6/22 のリリースを予定しており、Firefox 4.0.1 のユーザは自動的に更新されます。 Firefox 4 以降では Rapid Release プロセスと呼ばれる新しいリリースプロセスに移行し、セキュリティと安定性の改善と共に、新機能や高速化を含めた新しいバージョンを 6 週間毎に公開します (Firefox 6 まではプロセス移行に伴い異なる間隔)。 基本的には後方互換性が維持されるよう開発されていますが、最新 Web 標準への対応や、他のブラウザとの互換性確保のため、細部では後方互換性に関わる変更も含まれています。 そこで、後方互換性に関わる Firefox 5 の主な変更点をまとめてみました。Beta 版で互換性テストをされる Web 開発者の皆様などの参考になれば幸いです。 後方互換性
Windows 8では、HTML5とJavaScriptでWindowsアプリを開発可能に
Windows 8がどのようなOSになるのか、マイクロソフトは始めてその詳細を同社のWebサイトの記事「Previewing ‘Windows 8’」で開示し、動画でのデモンストレーションも公表しました。 Previewing ‘Windows 8’: Article by Julie Larson-Green, corporate vice president, Windows Experience. 多くのメディアでは、タイル形式の新しいタッチユーザーインターフェイスに注目していますが、Windows 8の注目すべき特徴の中の1つとして、HTML5とJavaScriptに対応することが明らかにされています。 Web-connected and Web-powered apps built using HTML5 and JavaScript that have access to th
GameBoy Emulation in JavaScript: The CPU
This is part 1 of an article series on emulation development in JavaScript; ten parts are currently available, and others are expected to follow. Part 1: The CPU Part 2: Memory Part 3: GPU Timings Part 4: Graphics Part 5: Integration Part 6: Input Part 7: Sprites Part 8: Interrupts Part 9: Memory Banking Part 10: Timers The emulator described in this series is available in source form: https://git
jsMSX - The first MSX Emulator 100% written in Javascript
Currently at version 0.9.2 About | Introduction | Download | To Do | Acknowledgements | Disclaimer | Requirements | The Online Emulator | ChangeLog jsMSX is a MSX emulator 100% written in Javascript. Yes, you read it: Javascript! It emulates the underlying Z80 CPU, TMS9918 Video Display Processor (VDP), PPI, RAM slots and Megaram. In its present form, it should be able to run any program or game d
Java MIDP 実装 on HTML5 and Flash@Firefox Developers Conference 2010 - yukobaのブログ
English今日は、Shibuya.js のイベントの一環として、Firefox Developers Conference 2010 で、「Java MIDP implementation on HTML5 and Flash」というタイトルでしゃべらせていただきました。 jQuery の作者の John Resig さんなど外国の方がいらした関係で、スライドがすべて英語です。 最近、携帯電話 の Java の MIDP の処理系を HTML5 および Flash で実装しています。それのプレゼンです。 http://orto-app.com/ でαバージョンを公開しましたので、よかったらご覧ください。IE8でみると、Flashで動きます。全体として、だいぶ、バグが多いのです。ごめんなさい。（画面転送が半分くらいのアプリでしか動いていません）。アプリももっといろいろ動くようにしたいです
Indexed Database API について
Indexed Database API（以下、indexedDB）について、これまで追いかけてきた情報をとりまとめたので公開します。 indexedDBは当初は仕様が固まっておらず、サンプルコードも当然のように動かなかったので（今も動きませんが…）、検証するにはかなりハードな状況でした。最近になってどうにか動くようになってきたので、@komasshu さんと色々やり取りしながら一通りの動作を確認しました。 現時点で利用できるブラウザは Chrome 9 以降 または Firefox 4 beta 8 以降となります。まだまだ仕様は動いていますので、検証の際は、なるべく最新の開発版を使うことをおすすめします。本エントリーでは、Chrome 9 beta 、Firefox 4 beta 8 にて検証します。また、資料は、2011年1月20日時点の W3C Editor's Draft を参照
W3C File APIを使ってJavaScriptでファイル加工 - しばそんノート
現在W3Cで仕様策定が進められているFile APIを使うと、JavaScriptからローカルファイルの情報や内容にアクセス出来るようになります。 Firefoxでは3.0時代から似たような機能が実装されていたようですが*1、今回やや仕様を変更した上で標準化されます。 まだワーキングドラフトの段階ですが、Firefox 3.6 RC1*2に既にほとんどのAPIが実装されていますので、今すぐに使ってみることができます。 そこで、試しにこんなサンプルを作ってみました。Firefox 3.6で以下のページにアクセスしてみてください。 JavaScriptでネガポジ反転 ファイル選択欄でビットマップファイル（.bmp）を選択、あるいはブラウザにドラッグアンドドロップすると、その画像をネガポジ反転（階調の反転）して表示します。複数選択も可です。*3 *4 ↓実行例 ファイル加工の際にサーバと一切通信
JavaScript(Audio Data API)でMMLシーケンサーを書いた - つまみ食う
HTML5にはAudio要素って言うのがあって、プラグインを使わずに音声を扱うことができるのだけど、 FireFox4(ベータ版)にはさらに Audio Data API っていうのがあって、これを使うと音声データを生成することすらできる。 このあたりに解説がある https://wiki.mozilla.org/Audio_Data_API http://ascii.jp/elem/000/000/564/564098/ こんなこともできる！！すげぇ。 http://weare.buildingsky.net/2010/06/17/html5-audio-data-api 要するにブラウザがシンセサイザーになるわけですな。 色々面白そうなので、練習をかねてMMLを再生するシーケンサーを作ってみた。 JavaScriptだけで音を生成して再生しています。 複雑なことをすると音がブチブチとぎ
MikuMikuDance 遊び - 兼雑記
MikuMikuDance のデータについて結構 web に情報があるみたいだったので、適当に parser 書いて 2D canvas とか WebGL で動かして遊んでみて、 SDL off 2010 summer で紹介してみたりしました。 で、動く URL にリンクはろうかと思ったんですが、よく考えるとこのデータのライセンスどこにも書いてないなーと思ったのでやめておくことに。まぁ本当はボーンのあれこれとかやりたかったのにやってないのとかで、激しく作りかけなのでまぁどうでもいいでしょう的な。 http://shinh.skr.jp/dat_dir/mmd.tgz 一応このソースコードをダウンロードして、本家のパッケージから拾ってきた pmd ファイルとかを、例えば miku.pmd という名前で保存して、 % ruby mmd.rb miku.pmdとかで miku.pmd.js が
まずは基本から・HTML5のCanvasについて参考になったサイトまとめ - かちびと.net
ようやくHTML5に興味を持ち始めました。 サンプルを以前記事にして、凄いなーと 思っていましたが、なかなか時間がなく、 先延ばしに。で、ようやく頭に入れ始めま した。なにするにも行動が遅くて困ります。 HTML5でも話題になっているCanvasを勉強し始めました。そんな中で、勉強の参考になりそうなサイトをブクマしたのでこれから学ぼう、とお考えの方とシェアしたいと思ってエントリー。 というわけで、基本的な情報がほとんどです。大量の情報を見ても混乱するのである程度絞っています。 html5.jp リファレンスサイトです。リンク先はcanvasカテゴリに。ここからスタート、というか最後までたぶんお世話になりそう。 html5.jp ～HTML 5で導入されるcanvas要素の使い方～ 同じく教科書的なサイト。ありがたい。まだ、ざっと読んだだけですが、すごく分かりやすかったです。 ～HTML 5
JSパーティクル崩し - os0x.blog
canvasをバイト単位で修正する方法（ImageDataの使い方） | tech.kayac.com - KAYAC engineers' blogを少し改良してFirefox、Operaでも動くようにしてみた。 JSパーティクル崩し 修正点 Firefoxはcanvas外(幅100pxのcanvasにx:100.1とか)にputImageDataしようとするとエラーになるのでそれを回避するように OperaはCanvasRenderingContext2D.prototype.createImageDataが実装されてないなので、代わりにnew ImageDataを使う(そのうち修正されるでしょう) // for Opera 10.5- if (window.CanvasRenderingContext2D && !CanvasRenderingContext2D.prototype.
canvasをバイト単位で修正する方法（ImageDataの使い方） - KAYAC Engineers' Blog
引っ越ししました。agoです。 思いっきりネタがかぶってますが、あまり気にせずcanvasネタを書いてみたいと思います。 今回はcanvasの中でもImageData関係をまとめて見ました。 ImageDataってなに？ canvas内のバイト列を扱うためのObjectです。 canvas内の各バイト毎に赤、緑、青、透明度の情報を配列として保持しています。 何に使うの？ canvas内をバイト単位で修正したい場合に使います。 canvas内に図形等を書く場合、通常提供されているlineTo等を使用することも出来ますが、こういった抽象メソッドは一回ごとの呼び出しコストが大きいため、細かい単位の操作には向きません。 その点、ImageDataであればバイト単位での操作しかできない代わりに呼び出し毎のコストが小さいため、細かい単位の操作も高速に行うことができます。 ただ、もちろん線を引く、丸を書
canvasでキラキラした背景を作る方法 - KAYAC Engineers' Blog
tech.kayac.com、ささやかにリニューアルしました！ tech.kayac.comをご覧の皆さん、はじめまして。意匠部ME課のfuchigamiといいます。 どうして技術部ブログに意匠部の野郎が？って感じですが、 技術部ブログのリニューアル記念ということで、ちゃっかりcanvasについて記事を書こうと思います。 最初なので、、、 簡単にぼくの属性を説明すると、html5とか好き、CSS3とか好き、canvasとか興味ある、非モテ、javascriptはjQueryがなんとなくわかる程度、非リア充。こんな感じです。 今回のリニューアルではコーディング全般を担当しました。 特に、プログラミングに関してはド素人だ！ということを強調しておきます。 そんなぼくが、canvasを使ってキラキラした背景を作ってみました 「リニューアルするからには新しいことがやりたいよね。だったらhtml5とc
今更聞けないcanvasの基礎の基礎 - KAYAC Engineers' Blog
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - andreasgal/pdf.js: PDF Reader in JavaScript
Dance Party
Engadget | Technology News & Reviews
