七星結界 - jsdo.it - Share JavaScript, HTML5 and CSS
var ctx,canvas,timer,isstart,count,step,bun,yrad,krad; window.onload=function(){ var a; canvas = document.getElementsByTagName('canvas')[0], ctx = canvas.getContext('2d'); canvas.width=canvas.height=400; ctx.fillRect(0,0,400,400); gime=ctx.getImageData(0,0,400,400); ctx.globalCompositeOperation = "lighter"; ctx.strokeStyle=a="hsla(222,70%,50%,0.5)"; ctx.fillStyle=a; bun=["正方形を回転させます", "時間を適当な値で割った
canvasをバイト単位で修正する方法（ImageDataの使い方） - KAYAC Engineers' Blog
引っ越ししました。agoです。 思いっきりネタがかぶってますが、あまり気にせずcanvasネタを書いてみたいと思います。 今回はcanvasの中でもImageData関係をまとめて見ました。 ImageDataってなに？ canvas内のバイト列を扱うためのObjectです。 canvas内の各バイト毎に赤、緑、青、透明度の情報を配列として保持しています。 何に使うの？ canvas内をバイト単位で修正したい場合に使います。 canvas内に図形等を書く場合、通常提供されているlineTo等を使用することも出来ますが、こういった抽象メソッドは一回ごとの呼び出しコストが大きいため、細かい単位の操作には向きません。 その点、ImageDataであればバイト単位での操作しかできない代わりに呼び出し毎のコストが小さいため、細かい単位の操作も高速に行うことができます。 ただ、もちろん線を引く、丸を書
インタラクティブな時系列グラフを描くJavaScriptツールキット「Rickshaw」
あらかじめ決めておいたデータやリアルタイムに刻一刻と変化するデータをグラフ化する際に使いやすくできています。しかもグラフ作成の時に迷いがちなカラーリングについても、最初からいくつかきれいなカラーパレットが付属しているので迷うことなくグラフ化できます。 Rickshaw http://shutterstock.github.com/rickshaw/ D3 libraryをベースにし、1721万枚のロイヤリティフリーなストックフォトを有する「Shutterstock」が開発したグラフ用のJavaScriptツールキット・時系列グラフ用フレームワークとなっており、以下のようなグラフ作成が可能です。 通常のグラフ http://shutterstock.github.com/rickshaw/examples/start.html 右下のチェックマークによって各グラフのオンオフが可能、マウスがグ
サイトに来た人のブラウザ画面をリアルタイム閲覧できる「SiteSupport」 - GIGAZINE
訪れたユーザーがページのどこをどう見て、どのように移動し、どのあたりで詰まるのか、そういった各種行動を把握するためにユーザーのデスクトップ自体をリアルタイムにリモートデスクトップっぽく見ることを可能にするというのがこの「SiteSupport」です。 SiteSupport - Remote Desktop for Web Apps http://sitesupport.com/ ブラウザのセッションを共有し、特別なソフトウェアをインストールする必要性は一切無し。JavaScriptのウィジェットをサイトに設置すればユーザーのデスクトップをリモートで見せてもらう仕組みを簡単に導入することが可能であり、APIが提供されているので自分の好きなようにカスタマイズすることも可能、全部のコネクションはSSL経由であるためセキュリティも万全です。 実際にどのような感じで動作するかというのは以下のムービ
JavaScriptによるcross domain & streamingなAPIアクセスの方法色々 - Nakamap APIの場合 - - KAYAC Engineers' Blog
こんにちは。すぎゃーん(@sugyan)です。 先日、Nakamap APIを公開しましたが、今回はそれをJavaScriptから使うためのライブラリを用意してみましたので紹介させていただきます。 使い方 <script type="text/javascript"http://developer.nakamap.com/js/nakamap.js"></script> とscriptを読み込むことで使用できます。 access_tokenが既に取得できていれば、 var client = new Nakamap.Client({ token: '*********' }); /* REST API */ client.get('/me', function (result) { console.log(result); }); /* Streaming API */ client.lis
テキストリンクをクリッカブルに変換してくれる「Linkify Plus」 | ライフハッカー・ジャパン
Chrome/Firefox/Opera/Safari：WEBページによっては、記載されているURLがプレインテキストのままでリンクになっておらず、アドレスバーにいちいちコピー＆ペーストしなければならないケースがありますよね。そんなときは、無料のGreasemonkeyスクリプト「Linkify Plus」を使いましょう。プレーンテキストで書かれているURLやメールアドレスを、クリッカブルなリンクに変換してくれます。 Linkify Plusのインストールはとても簡単ですが、JavaScriptを有効にしないと動作しないので注意。もし、JavaScriptのことで煩わされたくない方は「Linkify ting」を使いましょう。ただし、こちらは「mailto」をリンクへ変換してくれません。 以前、米Lifehackerが「Linkify」を紹介していました（英文）が、現在はGreasemon
ブラウザのアドレスバーで計算ができるJavaScript | ライフハッカー・ジャパン
Googleさんにお願いすれば、計算でも何でも簡単にやってくれます。 ですが、ブラウザのアドレスバーでも、JavaScriptを使って計算はできます。これならネットに繋がってなくても使用可能です。 ブラウザのアドレスバーはショートカットを使うとかなり便利になりますが、計算機としても使うことができるなんてスゴイですよね。これならGoogleに頼らなくてもできる！ ということで、やってみましょう。 少しでも速くてパワフルな方がいいという人は、JavaScriptを使ってください。例えば「7×12」の計算がしたい時は、以下のようにアドレスバーに入力します。FirefoxとChromeでは多少書き方が変わりますので、ご注意を。 Firefoxの場合：javascript:7*12 Chromeの場合：javascript:alert(7*12) ※ Chromeの場合、カッコは半角で入力してくださ
HTML5の魅力。Webブラウザ上で楽譜を表示し、MIDIを使って奏でる·ABC.js MOONGIFT
ABC.jsはWeb上で楽譜を表示し、演奏するJavaScriptライブラリ。 ABC.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5によってWeb上の表現力は高まっている。SVGでベクター画像を描いたり、WebGLによって3Dオブジェクトを描き出すこともできる。Canvasを使うプロジェクトも多い。 きれいな楽譜表示 これまではFlashを使ったり、画像を使わなければならなかった表現もHTMLだけでできるようになる。その一つ、楽譜を描き出して音まで鳴らせるのがABC.jsだ。 ABC.jsは特定の記法に沿って記述することでWebブラウザ上に楽譜を書くライブラリだ。JavaScriptを使っているので、その場で手直ししてレンダリングし直すこともできる。楽譜共有サイトのようなものを作ることさえできるだろう。 Firefoxなら演奏とダウンロードも そして描
モジラ、「Firefox」を大幅改修へ--グラフィックスとJavaScriptを高速化
Mozillaは、「Firefox」のJavaScriptエンジンとグラフィックスエンジンの刷新に取り組み始めた。新しいJavaScriptエンジンには、「IonMonkey」と呼ばれるコンパイラが含まれ、ウェブベースのプログラムをより速く動かすとともに、ガベージコレクションと呼ばれるメモリ消去プロセスによる処理中断を少なくすることを目的としている。また、「Azure」と呼ばれるグラフィックスエンジンは、Windowsのグラフィックインターフェースとの親和性を高めると同時に、Mac OS XやLinuxでも動作することを目的としている。 Azureは、パフォーマンスを向上するためのものであると同時に、プロセスを異なるメモリ区画に分離する「Electrolysis」と呼ばれる長期プロジェクトの基礎を築くものでもある。区画に分割することで、セキュリティやパフォーマンスの向上が期待できるが、その
RPGや2Dスクロールアクション対応。スマートフォン向けWebブラウザベースのゲーム開発に·enchant.js MOONGIFT
enchant.jsは主にスマートフォン向けのゲームを開発する際に使えるJavaScriptライブラリ。 enchant.jsはJavaScript製のオープンソース・ソフトウェア。かつてはゲームを開発するためには専用の機器が必要だった。パソコンでも開発できるようになり、さらにFlashを使ってWebベースでゲームが開発、遊べるようになった。次はJavaScriptだ。 RPG風デモ JavaScriptでゲームを作ることで、デスクトップはもちろんスマートフォンでもゲームが開発できるようになった。とは言えできるようになったというだけでは不十分で、開発を補助するライブラリは必須だろう。その一つがenchant.jsだ。 enchant.jsは2Dのゲームを作るのに使えるライブラリだ。スクロールマップや当たり判定、仮想パッドを使ったキャラクター操作ができる。デモゲームとしてRPGのようにマップ
画一的なプレゼンテーションにさよならを。HTML5/JavaScript/CSS3によるプレゼン·CSSS MOONGIFT
CSSSはHTML5/JavaScript/CSS3で作られたWebベースのプレゼンテーションテンプレート。 CSSSはHTML5/JavaScript/CSS3によるオープンソース・ソフトウェア。最近はHTMLやJavaScriptを使って作られたプレゼンテーションが増えている。JavaScriptでキーの動きに合わせてスライドを動かす類のものだ。 奇麗なHTMLプレゼン コンテンツがHTMLベース、つまりテキストで作れるのが大きな魅力だろう。そして最新のWeb技術を盛り込んで作られたのがCSSSだ。 CSSSは矢印キーによるスライドと切り替えと、Ctrlキーと組み合わせたキーボードショートカットをサポートしている。Ctrl+Hでスライドのサムネイル一覧を作ることもできる。矢印を押すたびに文字が追加表示されていくと言ったアクションも実装できる。 スライド一覧 良いと思ったのは、スライドの
WindowsのJSONを使った開発のお供に。JSONをツリービューに展開する·JSON Viewer, MOONGIFT
JSON ViewerはVisual Studioとの連携も可能なJSONビューワー。 JSON ViewerはWindows用のオープンソース・ソフトウェア。XMLを面倒なものに感じていたのはタグの仕組みによって記述が冗長的になってしまうからだった。ライブラリがあるので利用はさほど難しくないが、自分で作成するのは面倒だった。 貼付け そこで登場したのがJSONだ。XMLほど複雑な表記に対応できる訳ではないが、その代わりにとてもシンプルに記述できる。また、大抵の場合はそこまで複雑な定義は必要としないだろう。JSONは元々Web向けの技術だったが、最近は変わってきている。そこで登場したのがJSON Viewerだ。 JSON ViewerはWindows用のソフトウェアで、JSONフォーマットの文書を貼付けると、ツリー状に展開してくれるソフトウェアだ。JSONは改行などをなくして送受信される
Chromeのブックマークを新規タブで開くように設定する方法 | ライフハッカー・ジャパン
毎日訪れるサイトがあり、毎回新規タブで開いてくれたら便利なのに...と思ったことのある方へ、オススメの設定方法があります。読者Java-Princessさんが、その設定方法を伝授してくれたのでそちらをご紹介！ Chromeのブックマークは、アドレスに下記のjavaスクリプトを追加することで個々にそのアクションをカスタマイズできます。 URLは「http://」付きのアドレスを入力しましょう。「http://」がない場合、エラーが出ます。新規タブで開きたいブックマークにこのスクリプトを使用してみてください。 ただこのスクリプトを使うと、ファビコンがデフォルトのものに変わってしまい、それぞれのブックマークをテキストIDで見分ける必要が出てきます。 このスクリプトは、Chromeでは問題なく作動しますが、Firefoxでは少々手を加えてやる必要があります。Firefoxで使いたい方は、下記スクリ
どんなWebサイトも「塊魂」に変えるブックマークレットがスゴい
遊びすぎに注意！ 地震発生以降、2日にわたり地震関連の話題をお届けしてきましたが、本日より「日々是遊戯」は通常運行に戻ります。被災地ではまだまだ大変な時期が続いていますが、各自が「今できることをする」のが復興への何よりの近道ということで、ご理解いただければ幸いです。被災された方々の安息と、一刻も早い被災地の復興をお祈りしております。 さて、本日紹介するのは、クリックするだけでどんなWebページも「塊魂」にしてしまうブックマークレット。このブックマークレットを使うと、例えば今見ているITmedia Gamezのトップページで、こんな風に塊を転がして遊べるようになります。 どんなページもたちまち「塊魂」に。文字や画像を巻き込んで、どんどん塊を大きくしていきましょう 対応ブラウザはFirefox4またはGoogle Chrome。ブックマークレットの使い方は、この「Katamari!」（java
この表現は凄い。ダイナミックに変化するテキストイフェクト·gui-dat MOONGIFT
gui-datは流体のようなイフェクトを文字に対して行うJavaScriptライブラリ。 gui-datはHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。Flashや画像を使えばできることをテキストベースでやることに意義がある。テキストであれば検索もできるし、システム連動もしやすい。サイズも軽く済む場合が多い。 左上の文字がアニメーションする テキストであってもイフェクトを加えれば画像のロゴに負けないくらいのインパクトは生み出せる。むしろダイナミックにイフェクトできる分、画像よりも有利な場合だってあるはずだ。そんな可能性を感じさせるソフトウェアがgui-datだ。 gui-datは実物を見てもらえれば何がすごいのかすぐに分かるはずだ。テキストの中を丸が通り抜けていくような、水が流れているようなイフェクトがJavaScriptによって実現している。文字を変え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web開発に便利な機能を「Visual Studio」へ追加してくれる「Web Essentials」NOT SUPPORTED
JSLinux
「Opera」に同梱のWeb開発者向けツール「Opera Dragonfly」が正式版に
Site Under Maintenance
https://csswarp.eleqtriq.com/