memo.xight.org

日々のメモ

カテゴリ : JavaScript

1ページ目 / 全9ページ

MSXplay - ブラウザのJavaScriptエンジンでPSG、SCC、OPLLをエミュレートする実験的なMSXサウンドプレイヤー

Summary

MSXplayは ブラウザのJavaScriptエンジンでPSG、SCC、OPLLをエミュレートする実験的なMSXサウンドプレイヤー。
Web Audio APIインタフェースを使用して、ブラウザ上で音楽を再生する。

Reference

MSXplay
https://msxplay.com/

GitHub - digital-sound-antiques/msxplay-js
https://github.com/digital-sound-antiques/msxplay-js

Macでスクリプトからデスクトップ通知 (Displaying Notifications)

Summary

Macでスクリプトからデスクトップ通知を行う方法。
Apple Developer ではAppleSciprtとJavaScriptの例が挙げられている。

AppleScriptの例 (Apple Developer - Listing 24-1 より)

display notification "All graphics have been converted." with title "My Graphic Processing Script" subtitle "Processing is complete." sound name "Frog"

JavaScriptの例 (Apple Developer - Listing 24-2より)

var app = Application.currentApplication()

app.includeStandardAdditions = true

app.displayNotification("All graphics have been converted.", {
	withTitle: "My Graphic Processing Script",
	subtitle: "Processing is complete.",
	soundName: "Frog"
})


Reference

Mac Automation Scripting Guide: Displaying Notifications
https://developer.apple.com/library/content/documentation/LanguagesUtilities/Conceptual/MacAutomationScriptingGuide/DisplayNotifications.html

Google Map Slider - Google Mapsと連動してパネル表示を切り替えるスクリプト

Summary

ナビゲーションの <li> に data-geo-lat, data-geo-long という属性を設定して、
Google Maps とパネル表示を連動させている。

Reference

Google Map Slider
http://css-tricks.com/examples/GoogleMapSlider/

Google Maps Slider | CSS-Tricks
http://css-tricks.com/google-maps-slider/

via

コリス - [JS]Google Mapsと連動してパネル表示も切り替えるスクリプト
http://coliss.com/articles/build-websites/operation/javascript/jquery-tutorial-google-maps-slider.html

Moments in Tokyo, Japan - Hitotoki
http://hitotoki.org/places/japan/tokyo/

InfoVis - 視覚化のためのJavaScriptライブラリ

Summary

InfoVis は 視覚化のためのJavaScriptライブラリ。
データをJSONで入力すればインタラクティブなグラフが得られる。
BSDライセンスで配布。

RGraphHyperTreeSpaceTree
TreeMapBar Charts

RGraph
SpaceTree
Composing-Visualizations

RGraph 同心円状に配置
HyperTree 魚眼レンズのように配置。hyperbolic tree
SpaceTree 階層構造の軸を持つ配置。各ノードは末端のノードが等間隔になるように配置する。
TreeMap 面積と色で表現。包含関係も有る。

これらをパイチャート、棒グラフと組み合わせることができる。

Reference

JavaScript InfoVis Toolkit - Interactive Data Visualizations for the Web
http://thejit.org/

InfoVis Toolkit Demo
http://thejit.org/demos/

Wikipedia - hyperbolic tree
Wikipedia - Treemapping

SpaceTree
http://www.cs.umd.edu/hcil/spacetree/

via

データを視覚化できるjavascriptライブラリ「InfoVis」 | Web活メモ帳
http://blog.verygoodtown.com/2010/04/javascript-data-library-infovis/

Akihabara - ファミコン風ゲーム用 JavaScript ライブラリ

Summary

Akihabara は HTML5 のCanvasタグとJavaScriptを用いて開発されたゲーム用ライブラリ。
Akihabara を用いて開発したゲームも公開。
iPhoneから起動すると、画面下部にコントローラが表示される。

Leave Me Alone (アクション)

Leave Me Alone

Solitude (シューティング)

Solitude

The Legend Of Sadness (アクションRPG)

The Legend Of Sadness

T-Spin (テトリス)

T-Spin

Capman (パックマン)

Capman

Reference

kesiev's akihabara at master - GitHub
http://github.com/kesiev/akihabara

Kesiev Norimaki
http://www.kesiev.com/

Akihabara
http://www.kesiev.com/akihabara/

via

Publickey - 2010-04-27 - HTML5/JavaScriptの遊べるゲームライブラリ「Akihabara」、iPhone/Androidにも対応
http://www.publickey1.jp/blog/10/html5javascriptakihabaraiphoneandroid.html

MOONGIFT - HTML5で実現するファミコン風ゲーム「Akihabara」:オープンソースを毎日紹介
http://www.moongift.jp/2010/04/akihabara/

GWT Quake II Port - HTML5 + JavaScript で Quake II

Summary

HTML5 + JavaScript で Quake II を動作。
ノートPCで 30 fpsとのこと。



ムービーでは、以下のURLにて動作しているが、
現在のところ、 Google Code にリダイレクトされる。
http://quake2-gwt-port.appspot.com/

Reference

Google Code - GWT Quake II Port
http://code.google.com/p/quake2-gwt-port/

via

ギズモード・ジャパン - これがHTML5の実力! フル3Dゲーム「Quake」をブラウザ上でプレイしてみた(動画)
http://www.gizmodo.jp/2010/04/html53dquake.html?utm_source=atom&utm_medium=rss

Publickey - HTML5、WebGL、WebSockets、JavaScriptを駆使して、ゲーム「QuakeII」をブラウザに移植中
http://www.publickey1.jp/blog/10/html5webglwebsocketsjavascriptquakeii.html

Google Maps jQuery Plugin - jQueryでGoogle Mapsを簡単に扱えるプラグイン

Summary

jQueryでGoogle Mapsを簡単に扱えるプラグイン。

Sample code

$(document).ready(function() {
  $('selector').googleMaps({
    latitude: 49.26063518364422,
    longitude: -123.15673828125
  });
});


Reference

Shawn Mayzes - Google Maps jQuery Plugin
http://www.mayzes.org/googlemaps.jquery.html

via

IDEA*IDEA - 2010-01-08 - jQueryでGoogle Mapsを簡単に扱えるようになるプラグイン『Google Maps jQuery Plugin』
http://www.ideaxidea.com/archives/2010/01/jquery_google_maps.html

jsLaTeX - 数式を出力できるjQueryプラグイン

Summary

TeX形式で記述した数式を画像として出力するjQueryプラグイン。

指定したクラス内のテキストを、以下のURLにリクエストしているようだ。
http://latex.codecogs.com/gif.latex

Sample

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.jslatex.js"></script>
<script>
$(function () {
    $(".latex").latex();
});
</script>

<div class="latex">
    \int_{0}^{\pi}\frac{x^{4}\left(1-x\right)^{4}}{1+x^{2}}dx =\frac{22}{7}-\pi
</div>


jsLaTeXの出力

Reference

Knowledge-aholic: jsLaTeX: A jQuery plugin to directly embed LaTeX into your website or blog
http://knowledge-aholic.blogspot.com/2009/12/jslatex-jquery-plugin-to-directly-embed.html

CODECOGS
http://www.codecogs.com/

via

複雑な数式を出力したい際に使えるjQueryプラグイン「jsLaTeX」:phpspot開発日誌
http://phpspot.org/blog/archives/2009/12/jqueryjslatex.html

ページを自動スクロールするBookmarklet

Summary

ディスプレイを眺めながら、単純作業をするときのお共に。

高速バージョン
javascript:var%20wN2scRl;Sa5gNA9k=new%20Function('clearTimeout(wN2scRl)');document.onmousedown=Sa5gNA9k;Sa5gNA9k();void(wN2scRl=setInterval('if(pageYOffset%3Cdocument.height-innerHeight)%7Bwindow.scrollBy(0,2)%7Delse%7BSa5gNA9k()%7D',50))


ゆっくりバージョン
javascript:var%20wN2scRl;Sa5gNA9k=new%20Function('clearTimeout(wN2scRl)');document.onmousedown=Sa5gNA9k;Sa5gNA9k();void(wN2scRl=setInterval('if(pageYOffset%3Cdocument.height-innerHeight)%7Bwindow.scrollBy(0,1)%7Delse%7BSa5gNA9k()%7D',50))


Reference

Going My Way - 2004-03-23 - ページを自動スクロールするBookmarklet
http://kengo.preston-net.com/archives/001239.shtml

Internet Explorer で HTML5 を表示する JavaScript

Summary

html5doctor.com は HTML5で記述されているが、Internet Explorer 8で閲覧しても表示される。
これは、 html5shiv を利用しているため。

Source

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Reference

html5shiv - Project Hosting on Google Code
http://code.google.com/p/html5shiv/

HTML5 enabling script
http://remysharp.com/2009/01/07/html5-enabling-script/

Remy Sharp (rem) on Twitter
http://twitter.com/rem

HTML5 Doctor, helping you implement HTML5 today
http://html5doctor.com/

HTML5.JP
http://html5.jp/

w3voiceIM.js - 音声認識テキスト入力Javascriptライブラリ

Summary

一行追加するだけで,Webページの上のテキスト入力フォームに
音声認識機能を追加できるJavascriptライブラリ.

Reference

音声認識テキスト入力Javascriptライブラリ w3voiceIM.js
http://w3voice.jp/engine/

via

スラッシュドット ジャパン | 全てのフォームに音声認識機能を!
http://slashdot.jp/article.pl?sid=07/07/09/0715202