これは面白い！奥行きを感じさせる動作をするjQueryプラグイン·jParallax MOONGIFT
な、なんじゃこりゃぁと思わざるを得ないようなJavaScriptの登場だ。JavaScriptはNetscapeがあった時代からあるもので、ずっと昔から存在している。単なるサイトの装飾扱いだった時代を経て、Ajax、prototype.js、YUI、Ext-JSなどここ数年で一気に進化を遂げている。 複数の画像によって、まるで中に入り込んだかのように動かすことができる その留まる所を知らない進化の最新系を見られるのがこのjParallaxというjQueryプラグインだ。JavaScriptなのでもちろんソースコードは公開されているが、ライセンスは特に明記されていなかったのでご注意いただきたい。 jParallaxは言わば複数の画像をレイヤーを重ねるがごとく表示して、マウスの動きにあわせて上下左右にちょっとずつずらして表示を切り替える。それによってまるで遠近感をもって動いているかのような印象
MOONGIFT: » チェック必須！Web上で動作するプレゼンテーションソフトウェア「Slimey」:オープンソースを毎日紹介
先日のConcrete5に続き、これまたどきどきしてしまうようなソフトウェア。こんなものがオープンソースで出るようになると、独自開発する意味はどんどんなくなっていきそうだ。 こ、こんなものがオープンソースだなんて… 280 Slidesと言うサービスがある。280 North, Inc.が開発しているAppleのプレゼンテーション作成ソフトウェアであるKeynote風のWebアプリケーションなのだが、その出来に衝撃を受けた覚えがある。同様にGoogleドキュメントのプレゼンテーションも良くできている。それをオープンソースで実現してしまうのがSlimeyだ。 SlimeyはGPLの下に公開されているオープンソース・ソフトウェアで、プレゼンテーションを作成するアプリケーションだ。 実現できることはまさにGoogleドキュメントのプレゼンテーションやKeynoteと同様のプレゼンテーション作成だ
JavaScriptで作るiPhoneアプリケーション·Big Five MOONGIFT
iPhone向けのアプリケーションを開発する場合、Objective-Cを習得する必要がある。オブジェクト指向の言語ではあるが、習得のためにはコストがかかるのは確かだ。開発することで一気に世界が開ける可能性もあるが、利用範囲の限られた言語を覚えることに躊躇してしまう人もいるのではないだろうか。 スプラッシュスクリーン そこで普段使い慣れているHTMLやJavaScriptを使ってアプリケーションを構築しようと言うのがこのフレームワークだ。 今回紹介するオープンソース・ソフトウェアはBig Five、Webベースの技術で実現するiPhone/iPod Touchアプリケーションフレームワークだ。 Big Fiveは言わばプロキシを提供するソフトウェアだ。HTMLからJavaScriptを使ってiPhone/iPod Touchの各APIにアクセスを可能にするのだ。現在位置の取得、内蔵カメラを
文字をJavaScriptで画像のようにレンダリングする·typeface.js MOONGIFT
Webサイトを見ていると、文字を画像に置き換えたサイトを見ることがある。思い描いている見せ方をそのまま表示させたいときなど、デザインを重視するサイトでよく見られる工夫だ。しかし問題はそのメンテナンス性の悪さだろう。 奇麗に文字が表示されるようになる それに適切に説明文を入れておかないと文字読み上げブラウザなどでは何も情報が得られなくなってしまう。そうした煩雑さから解放されるライブラリがこれだ。 今回紹介するオープンソース・ソフトウェアはtypeface.js、文字をSVG画像に変換するJavaScriptライブラリだ。 typeface.jsは指定した文字をそのままcanvasタグを使ったSVG画像に変換する。CSSを使って文字装飾を行うことができ、太字/イタリック/色変更を変更できる。他にもfont-stretch（横幅）、文字間隔、行の高さなどを指定することが可能だ。 選択すると文字全
窓の杜 - 【NEWS】高速JavaScriptエンジン“TraceMonkey”を搭載した「Firefox」v3.1 β1が公開
Mozillaは14日、Webブラウザー「Firefox」の次期バージョンv3.1のBeta 1を公開した。Windows 2000/XP/Server 2003/Vistaに対応するフリーソフトで、現在開発者向けサイト“Mozilla Developer Center”のリリース告知記事などから、日本語版を含む各言語版をダウンロードできる。なお、本ベータ版はテスト目的で公開されており、開発者やテスター以外の利用は推奨されていない。 v3.1 Beta 1では、レンダリングエンジンに現行のGecko 1.9を改良したGecko 1.9.1を搭載。Web標準へより準拠し、CSS 2.1およびCSS 3への対応が進んだ。Web標準への準拠度を測る指標として知られる“The Acid3 Test”では、100点満点中89点という高得点を取得している。 また、高速なJavaScriptエンジン“T
MOONGIFT: » 必見！JavaScriptのalert処理にさよならを「Blackbird」:オープンソースを毎日紹介
※ 画面は公式サイトデモより JavaScriptのデバッグによく利用されるものと言えば、alertだろう。簡単に使えて便利な関数だが、ブラウザの処理が止まってしまったり、長文の表示が難しいなどデメリットも数多い。 alertとお別れするためのJavaScriptデバッグツール そこで使ってみたいのがBlackbirdだ。Google Code上で公開されているオープンソースのJavaScriptアラートだ。 Blackbirdは見た目の格好いいフローティングダイアログにログを表示できる。デバッグ、インフォ、ウォーニング、エラー、プロファイルの5つのメッセージパターンが設定できる。Blackbirdのウィンドウでは各メッセージタイプの表示、非表示が切り替えられるようになっている。 表示位置の変更、表示するメッセージの種類が変更できる さらにF2キーを押して表示/非表示を切り替えたり、Shi
信州FM - サービス終了
信州FMは2021年3月31日をもってサービス終了とさせて頂きました。長きに渡りご愛顧頂き本当にありがとうございました。
MOONGIFT: » 要注目！時間と場所の二軸を効果的に演出する「TimeMap」:オープンソースを毎日紹介
当たり前ではあるが、過去は現在と同じではない。東京は元々江戸であったし、さらにその昔は武蔵野国の一部だったらしい。また、偉人が生まれたのは過去であり、多数の偉人は同じ地域で生まれながらも時間軸がずれているので知り合うことなく去っている。 時間軸と地図の妙技！ つまり歴史などを表現する際には地図だけでも、時間だけでも足りないのだ。この二つを効果的に組み合わせることで、情報が意味をもってくる。それを実現するのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはTimeMap、時間と地図を組み合わせるソフトウェアだ。 TimeMapはGoogleマップとSIMILE timelineとを組み合わせて情報を表示できる。デモが多数登録されており、使いどころは多いという実感を感じさせてくれる。地球環境を訴えたり、オリンピックの情報を表示したりなど色々な場面で役立つはずだ。 説明文をAja
MOONGIFT: » JavaScriptによる幾何学ライブラリ「JSXGraph」:オープンソースを毎日紹介
幾何学は学生のころ、割合好きな授業だった。特に数式で表される模様などはどれも見事で、ちょっとパラメータを変更するだけで豹変するのが面白かった。今となっては殆ど使われない知識なのが勿体ない。 JavaScriptで作られた幾何学ライブラリ だがこれなら少しは使えるかも知れない。JSXGraphはJavaScriptで作られた幾何学ライブラリで、オープンソース・ソフトウェアとして公開されている。 JSXGraphはFirefox、Opera、Safari、Google Chrome、IEなど幅広いブラウザをサポートしているライブラリで、様々な幾何学模様を描いたり、動的に描画したりすることができる。 内トロコイド デモとして、三角形の各辺から垂直線を引くもの（頂点は自由に変更でき、それに合わせて交点が変わる）、三角錐モデル、三角形の中に三角形を次々と描き出すもの、グラフ、内トロコイドなどがある。
MOONGIFT: » JavaScriptの物理エンジン「Box2DJS」:オープンソースを毎日紹介
※ 画像は公式サイトデモより コンピュータの中ながらにして、重力や慣性の影響を再現する物理エンジンはとても面白い。ビジュアルも関連することから、GUIを備え持ったプログラム言語で数多く実装されている。例えばJava、Flashなどだ。 JavaScriptで作られた物理エンジンだ そしてさらにもう一つ加わった。Box2DJSはJavaScriptで実装されているオープンソース物理エンジンだ。 Box2DJSはJavaScriptで実装されているので、ブラウザ上で物理エンジンを実現できる。ある一点を軸に回転するもの、固定位置のもの、クリックをした場所に出現し、落下していくものなど多彩なオブジェクトが用意されている。 ピストン運動のデモ デモも数多く登録されており、ピストンエンジン風に動くもの、振り子、ボックスやくさび形のオブジェクトが落下して相互作用しながら添加していくものなど様々だ。物理エ
Safari4 と IE8 で実装された DOM Storage とは何か - IT戦記
はじめに 皆様 JavaScript のスピード競争が激化し、 ECMAScript 3.1 の仕様の策定が進むなど、激動の JavaScript 時代をいかがお過ごしでしょうか。 さて今日は、今、ちまたで大ブレイクの兆しを見せている DOM Storage という仕様を紹介したいと思います。 DOM Storage とは何か まず、 DOM Storage とはどんなものなのでしょうか。 とても簡単に言ってしまえば、とてもたくさんのデータが保存できてサーバーに自動で送られない Cookie みたいなものです。 さらに、 Cookie とは違って JavaScript からとても扱い易く作られています。 では、この DOMStorage の具体的なソースコードを見てみましょう。 <!DOCTYPE html> <html> <head><title>DOMStorage の使い方</tit
MOONGIFT: » ブラウザだけで遊べるシヴィライゼーション「Freeciv-Forever」:オープンソースを毎日紹介
Civilization（シヴィライゼーション）は一時期はまったゲームだ。世界の7不思議をはじめ、地球を舞台に様々な文明を発展させることができるシミュレーションゲームで、とても面白い。FreeCivというオープンソース版のPC向けシヴィライゼーションも存在する。 シヴィライゼーションがブラウザだけで遊べる！ そんなシヴィライゼーションをブラウザだけでもプレイできるようにしてくれるソフトウェアがFreeciv-Foreverだ。これならどこでも遊べるようになる。 Freeciv-Foreverはブラウザベースのソフトウェアで、ユーザ登録することで各地で立ち上がっているCivilizationサーバに接続して遊ぶことができる。てっきりJavaで作られたものかと思っていたが、JavaScriptで作られたもの（？）のようだ。これは凄い。 都市情報 動作が若干遅くなることもあるが、遊牧民で都市を造
ASCII.jp：
アクセスランキング トピックス LINE新機能「スタンプアレンジ」の使い方 ヤバい組み合わせができて楽しい トピックス グーグル「Chrome」に重大なゼロデイ脆弱性 すぐ更新を iPhone アップル「iOS 18」ホーム画面のアイコンを自由に配置できるように? iPhone アップル「iPhone 17 Slim」2024年発売か トピックス 自動車税支払いで最大30％還元!? 驚愕のキャンペーン、わかりやすく解説します iPhone アップル新型「iPad Pro」実物を見たら欲しくてたまらなくなった AI まるで“いけない話ができるChatGPT” ローカルAI「Command R+」の爆発的な可能性 デジタル 家で使っているルーターが乗っ取られて「ゾンビ」になる!? 気をつけることは トピックス LINE、複数のスタンプを組み合わせて送れる新機能 iPhone 「iOS 17.5
MOONGIFT: » インラインで表示される小さなグラフ「jQuery Sparklines」:オープンソースを毎日紹介
※ 画像は公式サイトデモより Sparklineとは、折れ線や棒グラフのごく小さな簡単なグラフのことだ。例えば、株価の推移や、気温の変化を表示したりするのに向いている。そして文字と同じくらいの高さであるために、インラインで表示するような使い方も多い。 右側に並ぶのがSparkline 使い方にもよるが、通常のグラフとはまた違うインパクトでデータを表示することができて便利なグラフだ。そんなSparklineを作成するのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはjQuery Sparklines、Sparklineを作成するjQueryプラグインだ。 jQuery Sparklinesでは一般的な折れ線グラフの他、棒グラフ、円グラフ、組み合わせたグラフなどがさくせいできる。ごく小さなグラフだけに表示の分かりやすさ、シンプルさにこだわりが見られる。 右下のグラフの数値を変更
javascript - DOMをリサイズ可能に : 404 Blog Not Found
2008年06月07日17:30 カテゴリ書評/画評/品評Lightweight Languages javascript - DOMをリサイズ可能に これまた数ある車輪の再発明のうちの一つだけど、習作をかねて /lang/javascript/DOM.resize /- CodeRepos::Share - Trac 使い方 <script src="http://blog.livedoor.jp/dankogai/js/resize.js"></script> <div class="resizable"> この要素がリサイズ可能に </div> <script>make_dom_resizable('resizable');</script> 要は、JS fileをロードしておいて、最後にmake_dom_resizable()を呼ぶだけ。引数が、リサイズ指定したいDOMのクラス名に
Cookieなしでデータをストレージする·PersistJS MOONGIFT
Cookieは使うと便利なものだが、ブラウザの設定次第で使わないことにもできるので頼りにできない、そんな勿体ない技術だ。もっと便利に活用できれば、きっとWebサービスのあり方、データの保存する仕組みも変わってくるのではないだろうか。 Firefoxでテストしているところ という訳で代替え手段の提案だ。これはCookieがオフになっていても利用できる（JavaScriptが必須だが）。 今回紹介するオープンソース・ソフトウェアはPersistJS、クライアントサイドで使えるストレージシステムだ。 PersistJSはJavaScriptで作られており、Cookieをオフにしていても保存したデータを再度呼び出すことができる。同一ドメインであれば、タブが分かれていても即座に反映される。さらにブラウザを閉じて、再度開いても呼び出せる。 Safariでテストしているところ こうした技術は幾つか存在し
本気でやるならonclick属性は避けてライブラリを活用すべき - id:HolyGrailとid:HoryGrailの区別がつかない日記
第1回 そろそろ本気で学びませんか？ | Think IT これ、今この記事書いてる時点で650以上ものブクマがされているんだけれども、あまり内容がよろしくない。 というのも、解説はとても丁寧ですごくよい内容なのだけど、サンプルコードの書き方がどうも古くさい。 onclick属性とか、今時のフロントエンドエンジニアはそんな書き方はしない（と思う）。 なぜonclickをあまり推奨しないのか やっぱり、エンジニアとデザイナーorマークアッパーとの分業の点でHTMLの属性にスクリプトを書いちゃうのはあんまりよろしくない。 たとえばの話だけど関数の名前を変えたかったり、だとか、HTMLを変更したり、っていうときにミスが起こりやすくなってしまう。 これは分業していなくてもどちらにしろ発生してしまうことだと思う。 他にも前に書いたのだけど、aタグとかでonclickしちゃうとhrefにreturn
Processing.jsで魚の群れシミュレーション - p4lifeのメモ
Mozilla の John Resig さんが作った Processing.js をさっそく試してみました．プログラムのネタは今ホッテントリになっている「ほぼ日刊イトイ新聞 - がんばれ森川くんの遺伝子くん」の「群れの知能」に書いてある Boid（birdoid, Bird android）です． Boid は鳥や魚の群れの振る舞いを再現するアルゴリズムで，次の基本的なルールからなります．◆ルール1：近くの鳥たちと飛ぶスピードや方向を合わせようとすること◆ルール2：鳥たちが多くいる方へ向かって飛ぶこと◆ルール3：近くの鳥や物体に近づきすぎたら、ぶつからないように離れることhttp://www.1101.com/morikawa/2001-06-25.html群れの中の各個体をこのような単純なルールに従わせるだけで，一見複雑な動きを簡単にそれらしく再現することができます． 「群れの知能」を
ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記
はじめに 今日、 jQuery の作者として有名な John Resig さんが Processing.js という JavaScript のライブラリを公開しました。 John Resig - Processing.js このライブラリを使うと、比較的簡単に以下のようなグラフィックスやアニメーションを書くことができるようになります。 というわけで、公開されたばかりのこのライブラリを簡単な使い方から詳しい使い方までとことん掘り下げてみたいと思います。 Processing.js 概要 まず、 Processing.js とは何かという話をします。 Processing.js とは、ブラウザで Processing というプログラミング言語を実行する JavaScript のライブラリです。 では、 Processing とはどのようなプログラミング言語なのでしょうか。 Processing
簡単！YouTubeビデオをMP4でダウンロードできるブックマークレット | Google Mania - グーグルの便利な使い方
簡単！YouTubeビデオをMP4でダウンロードできるブックマークレット 管理人 @ 4月 14日 12:31pm YouTube 高画質になったYouTube動画 ですが、その高画質動画をMP4で簡単にダウンロードできるブックマークレットがGoogle Operating Systemで紹介されていました。 MP4だとiPodで閲覧できるので、とても便利です。 次のリンクを右クリックからブックマーク（お気に入り）に保存するか、ブックマークツールバー（リンクバー）にドラッグ＆ドロップして持っていきます。 Get YouTube video これで準備完了です。 使い方は次の通りです。 まず、YouTube へアクセスして、動画を閲覧します。 ダウンロードしたい動画があれば、ブックマークレットをクリックします。 すると、埋め込みコードの下に、ひっそりとダウンロードリンク『Download a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
