JavaScriptだけで複数のファイルをまとめて画像化·PNGDrive MOONGIFT
PNGDriveはファイルを画像化してサイズを小さくするソフトウェアです。 ファイルを相互に別形式に変換するというソフトウェアは多いですが、PNGDriveはちょっと一風変わっています。任意のファイルを画像化し、デコードできるソフトウェアになります。 メイン画面です。 ドロップしました。Zipファイルの場合、サイズが大きくなってしまいました。ファイルは複数ドロップできます。 テキストの場合は54%まで縮まっています。 面白いのはやはりサーバサイドの仕組みを使わずに画像だけで行っているということでしょうか。画像化されたデータは特に意味がない、砂嵐のようになっていますが、可逆変換なのもユニークです。 PNGDriveはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。 MOONGIFTはこう見る インターネット上の圧縮技術としては現在Gzipがメイ
JavaScriptオブジェクト用問い合わせ言語·SpahQL MOONGIFT
SpahQLはJavaScriptオブジェクトのデータ抽出に使えるクエリライブラリです。 WebアプリケーションではデータをJSONで利用するのが一般的です。データが大量にあるのであれば、そこから欲しいデータだけを抽出する仕組みが必要になるでしょう。JavaScriptでそれを可能にするのがSpahQLです。 例です。hash1というキーに対応したデータを取り出しています。 ネストして調べられます。 配列、ハッシュどちらにも使えます。 配列の場合は0などとキー指定もできます。 配列でサイズが1以上のものをピックアップしています。 データは抽出するだけでなく、プロパティを使ってサイズやデータの種別を調べることもできます。さらに正規表現を絡めてマッチするか否かをチェックするといった機能もあります。node.js、Webブラウザどちらでも使えるライブラリになっています。 SpahQLはJavaS
サウンドプログラミング用のJavaScriptライブラリができた！！！！ - 音の鳴るブログ
とりあえず疲れた。リポジトリもめちゃくちゃだし。暴飲暴食もした。 timbre - JavaScript Library for Objective Sound Programming http://mohayonao.github.com/timbre/ 新しいデモもつくった http://mohayonao.github.com/timbre/examples/004_timbresynth.html ライブラリにはUIついていないけど、デモのときは分かりやすいのでわざわざ書いた。バッハとJavaScriptは相性が良いとおもう。JSだけに。 そういえば、前につくった これ もバッハだった。 関連エントリ サウンドプログラミング用のJavaScriptライブラリをつくっている
JavaScript でドラッグ＆ドロップで画像を切抜くことができる jsCropperUI
自作しようと思っていましたが、既に作って公開してくれている人がいました。ファイルは下記からダウンロードできます。サンプルが色々入っていますので、要点を抑えて説明させて頂きます。 DEfusion.org.uk » JavaScript Image Cropper UI, using Prototype & script.aculo.us DEfusion.org.uk » Demo » Prototype JavaScript Image Cropper UI jsCropperUI の特徴 範囲を指定することができる 指定した範囲外を再度指定することができる 一度指定した範囲を後から変更することができる Shift キーを押しながら指定で縦横1:1で範囲指定可能 縦横を固定した範囲指定も可能 tests フォルダに色々とサンプルが入っています。基本的には example-Basic.ht
ブックマークレットなどの難読化された JavaScript のコードをデコードする方法
javascript:var d=document,w=window,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),f='http://www.tumblr.com/share',l=d.location,e=encodeURIComponent;if(/nicovideo.jp/.test(l.host)){var params=location.href.match(/.*(sm[0-9]{8})/)[1];s='<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/'+params+'"></script><noscript><a href="http://
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
面白い。回転させながら撮った写真をスムーズに閲覧·Image Rotation MOONGIFT
Image Rotationは対象を回転しながら撮影した写真をマウス操作で回転させられるソフトウェアです。 通常、写真は平面にしか撮影できません。そのため後で写真を見た時に、これを横から見たかった…と思ったりするかも知れません。そこで試して欲しいのがImage Rotationです。マウス操作で自由な角度から写真を楽しめます。 デモです。二つの画像、どちらもImage Rotationに対応しています。 マウスを動かすと左右に回転します。回転の細かさは撮影した写真の枚数に依存します。上の写真は360度を20回に分けています。 ちょっとずつ、自分の好みの速度で回転させられます。 一つ一つは画像です。 Image Rotationは複数の画像を読み込んで、マウスの状態に応じて自動で回転された写真に変更します。予めそのような素材を用意する必要がありますが、一度できあがると面白い効果が生まれるでし
第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開発者ができるだけ違和感なく利用できるように工夫されてる点
何と！JavaScriptにマニュアルのメモリ管理機能を実装する·*JS MOONGIFT
*JSはJavaScriptにC言語ライクのメモリ管理を実装するライブラリです。 JavaScriptがどうも手になじまない…そう感じているコンパイル系言語を得意とする方に試してもらいたいのが*JSです。JavaScriptにC言語に似た特性を追加するJavaScriptライブラリです。 変数の型を指定できます。異なる型にキャストしようとするとエラーになります。 データ型と演算です。 ポインタです。 関数の戻り値も指定できます。 swap関数で変数を入れ替えている例です。 mallocもあります。 *JSを使うと型の定義、構造体、ポインタ、メモリの確保と解放などおおよそスクリプト言語のJavaScriptとは思えないほどの機能が追加されます。これまでにないJavaScriptを体験したい人はぜひお試しを。 *JSはJavaScript製のソフトウェア（ソースコードは公開されていますがライセ
ブラウザゲームを作ろう。様々な種類に対応したJavaScriptゲームエンジン·The Render Engine MOONGIFT
The Render Engineはクロスブラウザに対応したデスクトップブラウザ向けのJavaScriptゲームエンジンです。 ここ数年ゲームが人気です。特にWebブラウザやスマートフォンなどで遊べるものが注目を集めています。そこで知っておきたいのがThe Render Engineです。クロスプラットフォームで使えるデスクトップ向けJavaScriptゲームエンジンです。 オブジェクトが回転するデモです。 アステロイドです。十字キーで移動しつつ、Zキーで弾を撃ちます。 スーパーマリオ風の画面描画（操作はできません）。 オブジェクトが落下してくるデモ。 人間が倒れるデモ（関節などでオブジェクトが接続されていて、それらが関連しつつ動きます）。 シム系で使えそうなデモ。 The Render Engineはクロスブラウザではありますが、それでもIE6〜8についてはCanvasをサポートしていな
[JS]iOS向けのページ制作に役立つ便利機能がたくさん詰まったスクリプト -iOS.js
iPhone, iPadなどのiOS向けのページを制作するのに役立つCSSやJavaScriptの便利機能をたくさん備えたスクリプトを紹介します。 iOS.js [ad#ad-2] iOS.jsの特徴 iOS.jsのデモ iOS.jsの特徴 iOS.jsではデスクトップのブラウザ向けページとは異なる点を中心に、より簡単に実装できるよう便利な機能がたくさん用意されています。 改善 min-height ページがスクリーンより小さい時は常にアドレスバーが表示されてしまいますが、スクリーン全部を使って表示します。 ※下記にデモがあります。 リンク ページ内の全てのリンクをWebAppで開きます。 100% height 通常「height=100%」はロードした最初の画面の高さを元にしますが、アドレスバーが隠された後のサイズ変更に対応します。 ※下記にデモがあります。 アドレスバー ページがロー
[JS]ウェブページのUIエレメントにちょっとだけ便利な機能を加えるスクリプト -minjs
フォーム、テーブル、カレンダーなど、ウェブページで使用するUIエレメントに便利な機能を加えるjQueryのプラグインを紹介します。 minjs - Minimalist JavaScript [ad#ad-2] minjsは現在、3つのモジュールが公開されています。 minform longtable drcal minform HTML5のフォーム周りの便利な機能を非サポートブラウザでも利用できるようにします。 デモ ダウンロード minform -GitHub [ad#ad-2] minformの使い方 minformはスクリプトを外部ファイルとして記述するだけで、下記のフォーム関連の機能が非サポートブラウザでも利用できるようになります。 placeholders 入力欄にヒントのテキストを表示します。 autofocus 入力欄をフォーカスします。 required 必須入力の欄で、
JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
JavaScriptで処理を同期的に行いたいと考えている人向け·JSDeferred MOONGIFT
JSDeferredはJavaScriptの非同期処理を扱うライブラリです。 JavaScriptの魅力は非同期処理にあると思いますが、これまでのコーディングスタイルと異なるのでやりづらいと感じる人も多いのではないでしょうか。そこでJavaScriptで同期処理的な実行を可能にするライブラリJSDeferredを使ってみましょう。 サンプルコードです。wait(3)で3秒間処理を停止しています。 サンプルのコードです。 ステップ実行のデモコードです。クリックアクションを受けて処理が実行されます。 Beforeです。ネストが深くなって非常に見づらい、汚いコードです。 Afterです。パラレルを使って平行にデータを読み込みつつ、全てが終わった段階でresultsに結果をまとめて次のメソッドを実行しています。 JSDeferredを使わずに書いている場合に比べて、コードがとても見やすいのが分かる
コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」:phpspot開発日誌
screenfull.js demo コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」 FullScreen API のクロスブラウザで動作するラッパーライブラリです。 例えば、ページ内に画像や動画があったとしてクリックするとフルスクリーンで楽しめる、的な使い方ができます。 screenfull.request( $('#container')[0] ); のように、screenfull.requrest( element ) でフルスクリーンが開始されます。 フルスクリーン化 フルスクリーンした後のイベントハンドラなんかも設定できるみたい。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル １見の価値あり！なフルスクリーンWEBサイトのまとめ
[JS]ソーシャルメディアの不揃いなボタンを統一した美しいデザインでブログに設置するスクリプト -Koottam
Twitter, Facebook, Google+, RSSなど、ソーシャルメディアの不揃いなデザインのボタンを統一した美しいデザインにしてブログやサイトに設置するjQueryのプラグインを紹介します。 Koottam Social jQuery Plugin [ad#ad-2] Koottamの主な特徴 Koottamのデモ Koottamの使い方 Koottamの主な特徴 Twitter, Facebook, Google+などのアカウントを設定するだけで設置できます。 7種類のテーマがあり、CSSベースでカスタマイズも可。 カウントの表示はスタティック・アニメーションに対応。 カラーは簡単に変更できます。 より大きいカウント用に省略表記も対応。 MITライセンスのため、あらゆるブログ・サイトに使用しても無料！ Koottamのデモ
JavaScriptを使ってExifデータを読み取る·exif.js MOONGIFT
exif.jsはJavaScriptを使って写真のExifデータを読み取るライブラリです。 スマートフォンの普及によって写真データをオンライン上に扱うケースが増えています。そんな写真のメタデータであるExifをJavaScriptで扱ってしまおうというのがexif.jsです。 サンプルです。写真を指定するとそのExifから位置情報を読み取ってGoogleマップにマーカーを立てています。 コードです。FileReaderでデータを読み取った上で解析しています。 exif.jsは位置情報のみならずホワイトポイントやフラッシュ、シャッタースピードなどExifで取得できるデータが網羅されています。これだけのデータが取れれば、面白い使い方が考えられそうです。 exif.jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFT
mootoolsをベースとしたオープンソースのモバイル向けフレームワーク・Moobile
いつもjQueryなのでたまには別のライブラリ の話題でもご紹介。mootoolsをベースとした モバイル向けフレームワーク・Moobileです。 mooltoolsベースのものは個人的には初見です が、他にもあるんですかね・・あまり使った 事が無いので良く分かりませんが。 mootoolsを使ったモバイル向けOSSフレームワークです。個人的に使う予定は無いんですけど、一応備忘録的に。 見た目はjQuery Mobileな感じです。 こんなエフェクトもありました。 シミュレーターが付属してました。iPhone、iPadとそれぞれの縦横の表示を確認出来るみたいです。 時間が取れず、あんまり見てませんので情報少なくてすみません。ダウンロードは以下でどうぞ。 Moobile
スパークラインに対応したJavaScript製のグラフライブラリ·Grafico MOONGIFT
GraficoはJavaScriptによるグラフライブラリです。棒、折れ線、スパークラインがサポートされています。 Web上でグラフを描くライブラリも充実してきています。Flash、画像など様々な選択肢がありますが今回はGrafico、JavaScriptベースのグラフライブラリを紹介します。 サンプルです。まず棒グラフ。 エリアグラフ。 積み上げ型のエリアグラフ。 こんな複雑な感じにも。 棒グラフ。 積み上げの棒グラフ。 横棒グラフ。 スパークライン。 棒型のスパークライン。 エリア型のスパークライン。 GraficoはPrototype.jsを使ってSVGでグラフを描いています。対応ブラウザはIE6以上、Firefox3以上、Google Chrome、Safari、Operaとなっています。単純に表示する他、マウスを載せた際に説明を出す機能もあります。 GraficoはJavaScr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
XMLHttpRequestを生で書く時 - くじらぶろぐD