タグ

JavaScriptに関するtnn-jpのブックマーク (16)

  • gmaps.js — the easiest way to use Google Maps

    gmaps.js Google Maps API with less pain and more fun Examples Maps Basic Map events Markers Services Geolocation Geocoding Overlays Polylines Overlays Polygon GeoJSON Polygon Routes Routes Routes (advanced) GMaps.Route Static maps Static maps With markers With polylines Utils Context menu Geofences Custom controls Fusion Tables layers KML and GeoRSS layers Map Types Overlay Map Types Street View P

    tnn-jp
    tnn-jp 2012/06/09
    GoogleMapを使いやすくするライブラリ
  • Oliver's simple fluid dynamics simulator

    Simple fluid dynamics simulator based on the navier-stokes equations, implemented in JavaScript. Click and drag to add density and velocity Add density source with alt-click or anything other than the left-button

  • [JS]面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free

    ページにたった一行記述するだけで、CSS3のベンダープレフィックスを自動で付与してくれるスクリプトを紹介します。 Prefix free via: PrefixFree: Break Free From CSS Prefix Hell [ad#ad-2] Prefix freeの機能 ベンダープレフィックスとは、CSS3で採用予定のプロパティがブラウザに先行実装されており、それらを各ブラウザごとに機能させるためプロパティに加える接頭辞のことです。 「-moz-」「-webkit-」「-o-」「-ms-」などがあります。 例えば、CSS3グラデーションを通常のベンダープレフィックスを使用すると、下記のようなスタイルシートになります。 .download { background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.3

  • 今すぐフォローすべきnode.js界のスーパーエンジニア - 小さい頃はエラ呼吸

    はじめに 最近、サーバサイドJavaScript環境であるnode.jsをいじったりしています。 node.jsはまだ書籍も出ていない新しい分野なので、情報収集の手段はインターネットがすべてになります。Webサイトやブログなどを読みながら勉強していくにつれて、node.js界のすごい人たちというのがだんだんとわかってきました。 そこで、これからnode.jsを勉強する人のために、日におけるnode.js界隈のスーパーエンジニアたちをまとめてみました。彼らの代表的なエントリを書かせていただきましたが、これ以外にもたくさん有用なエントリがあると思いますので、ぜひ探してみてください。 @mesoさん twitter:http://twitter.com/#!/meso おすすめエントリ Node.jsについてのよくある誤解 - 自分の感受性くらい @sugyanさん twitter:https

    今すぐフォローすべきnode.js界のスーパーエンジニア - 小さい頃はエラ呼吸
  • 今更聞けないcanvasの基礎の基礎 - KAYAC Engineers' Blog

    はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね!」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ? 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル(かつ動的な)表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、

    今更聞けないcanvasの基礎の基礎 - KAYAC Engineers' Blog
  • Canvasによる3Dテクスチャマッピングとパフォーマンスチューニング(仮題) - 最速チュパカブラ研究会

    MAX 打ち上げのときに川崎さんに「英語の記事書いたら絶対ウケるから書くべきだよ」と言われていつ書こうかなーと思ってたら、そういえば11日は休日だったので、日語の下書きだけでも一気に書いてみることにしました。 といっても、欲を出してあれもこれも書こうとして、結局まだ書ききれてませんけど。 タイトル案 Javascript と Canvas によるフルスクラッチ3Dプログラミング Javascript と Canvas 3Dプログラミング入門 ドキッ JSだらけの あと、今日(11日)は私の誕生日でもあります。25になりました。そろそろ鏡を見るのが怖くなってきますね。 以下、書きかけ Introduction Adobe MAX 2009 で Spark Project は、拡張現実(AR)のデモを展示し、来場者の注目を集めていた。Shibuya.JS のメンバーもこのデモに感激し、是非

    Canvasによる3Dテクスチャマッピングとパフォーマンスチューニング(仮題) - 最速チュパカブラ研究会
  • CSS Decorative Gallery - Web Designer Wall

    Did you like my previous CSS tutorial on how to create gradient text effects? I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple

    CSS Decorative Gallery - Web Designer Wall
  • MooToolsドキュメント カテゴリー「MooTools」 | 高橋文樹.com

    MooToolsは中級から上級のJavaScript開発者のために設計された軽量で、モジュール化された、オブジェクト志向のJavaScriptフレームワークです。これを使えば、エレガントで、きちんとした裏付けのある、一貫したAPIにより、パワフルに、柔軟に、そしてクロス・ブラウザなコードを書くことができます。 MooToolsのコードは標準準拠しており、どんな警告も出しません。拡張性のあるコーディングと、わかりやすい変数名:ブラウズしやすく、わかりやすい。 オープンソース・ライセンス MooToolsはオープンソースMITライセンスの元にリリースされています。つまり、あなたはどんな状況でもこれを使用し、修正することができるのです。

    tnn-jp
    tnn-jp 2008/11/04
    MooToolsのリファレンス
  • Web制作会社が作った!超使えるJavaScriptライブラリ (1/2)

    「Webサイトを作るときに当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL(MITSUE-LINKS JavaScript Library)」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規

    Web制作会社が作った!超使えるJavaScriptライブラリ (1/2)
    tnn-jp
    tnn-jp 2008/10/28
    便利そう。
  • コナミコマンドをJSで実装してみた。 - >& STDOUT

    Google社員にコナミファンでもいるの?w に触発されて。 いままで何百人やったかわかりませんが、やってみました。こんだけ有名なお題なので、被ってたらごめんなさい。 //usage: document.onkeydown = konamiCommandChecker; //body function konamiCommandChecker(e){ var commandArray = new Array(); var correctArray = new Array(38, 38, 40, 40, 37, 39, 37, 39, 66, 65); var hitCount = 0; commandArray.push(e.keyCode); if(commandArray[commandArray.length-1] == correctArray[commandArray.lengt

    コナミコマンドをJSで実装してみた。 - >& STDOUT
    tnn-jp
    tnn-jp 2008/10/24
    キー入力をスタックに積んで随時チェックしてるみたい。面白い。
  • XML を JSON に変換するサービス - ベータ版を公開 :: Drk7jp

    JavaScript 2.0 支援ツール「XML 2 JSON service」って何? XML を JSON に変換するサービスです。この技術を用いることで、 クロスドメイン制限を超えて JSON 形式で XML 形式のデータを利用することが可能となります。 JSON は XML と比較して JavaScript 上で非常に扱いやすいため、コツを掴めば簡単に自分のサイトで利用できます。 既に幾つかのサイトで実装されていますが、不特定多数の方にサービス提供するために負荷対策を施し、XML 2 JSON service ベータサービスを公開することにしました。 最近良く聞く Ajax とは何が違うの? 最近、流行りまくっている Web 2.0 と呼ばれるものの基礎技術の1つとして Ajax があげられます。Ajax は大変便利な技術なのですが、セキュリティの観点から自ドメインへのアクセスしか

    tnn-jp
    tnn-jp 2008/10/12
    クロスドメイン制限を超えてAPIを利用することが可能になる。
  • 第1回 まずは実装してみよう | gihyo.jp

    はじめに この連載では、Javascriptは知っているけどAjaxは実装したことがないという方に向け、YouTube APIを利用したWebアプリケーションを題材に、実装の方法を解説します。 JavascriptのライブラリはjQueryを使用します。jQueryによるAjax実装、基的な使い方、また、UIへの応用実装も合わせて解説します。 Ajaxってなに? Ajaxとは、Asynchronous Javascript+XMLの略称です。Javascriptを使い、Webページとは非同期(Asynchronous)にXML形式(もしくはテキスト形式)のデータ通信を行う手法を指します。 Ajaxを使うと特別なプラグインなどを必要とせず、Webページの必要な部分だけ必要に応じて書き換えることができるため、ユーザビリティの高いWebアプリケーションを作ることができます。また、異なるWebサ

    第1回 まずは実装してみよう | gihyo.jp
    tnn-jp
    tnn-jp 2008/10/03
    YoutubeAPIを利用して、動画検索を作成。ちゃんと動いた。感動。
  • https://book.mynavi.jp/wd/sampledata/200403view/javascriptlab/index.htm

  • JavaScript Library Archive

    JavaScript Library Archiveについて JavaScriptライブラリをまとめたサイトです。用途別に探すことができ、配布元、使用方法、ライセンスなどについて解説をしております。 新着JavaScriptライブラリ プログラムのコードに色を付ける「google-code-prettify」 角丸を表現する「jQuery Corners 0.3」 jQueryベースのカラーピッカー 「Farbtastic」 水平方向のアコーディオンメニュー「horizontal accordion」 セレクトボックスをカスタマイズする「Script.aculo.us Select Box」 IE6でhover,active,focus擬似要素を使う為の「csshover」 画像に光沢を与えるjsライブラリ『Glossy.js』 IE6以下をIE7と同じようにするライブラリ『IE7.js』

  • わずか565バイトテトリスのプログラミング解説

    「往年の名作「スーパーマリオブラザーズ」、あの濃い内容でわずか40キロバイト」に載っていたわずか565バイトのテトリス。文字数にして551文字。79文字*7行のプログラミングで、テトリスが動きます。 以下のソースコードをメモ帳に貼り付けて、htmlで保存すればテトリスが動きます。 <body onKeyDown=K=event.keyCode><script>X=[Z=[B=A=12]];h=e=K=t=P=0;function Y() {C=[d=K-38];c=0;for(i=4;i--*K;K-13?c+=!Z[h+p+d]:c-=!Z[h+(C[i]=p*A-Math.round(p/ A)*145)])p=B[i];!t|c+4?c-4?0:h+=d:B=C;for(f=K=i=0;i<4;f+=Z[A+p])X[p=h+B[i++]]=1 if(e=!e){if(f|B){fo

    わずか565バイトテトリスのプログラミング解説
  • Ajaxを勉強しよう

    このページはAjaxを勉強してみたい人向けの学習用ページです。サーバーを入れ替えたため一部CGIを使用したものが動作していません。時間のある時に修正します。また、書いてから、かなり時間が経過しているため内容的に古いものもあります。ご了承ください。 Ajaxで利用されるエフェクトに関しては別ページ(Ajax Effect)に移動しました。 Ajax関連書籍に関してはAjax関連書籍一覧ページを用意しました。 Prototype系ライブラリ サンプルプログラム【New !!】のページを用意しましたので、Prototype系のライブラリを利用している方は参考にしてみてください。 ミスや間違いなどがありましたらopenspc@po.shiojiri.ne.jpまでお願いします。 第一章 Ajaxって? AjaxとRIA AjaxとDHTML AjaxとFlash Ajaxに必要な知識と技術 Aja

  • 1