JavaScriptを活用した奇麗なWebアルバム·PhotoFloat MOONGIFT
PhotoFloatはJavaScriptを活用したWebアルバム。パーマネントURL対応。 PhotoFloatはJavaScript/PHP製のオープンソース・ソフトウェア。写真で重要なのは見せ方だ。ただ撮りためていても面白くはない。それを誰かに見せたり、公開しなければいけない。そしてその見せ方にもこだわらなければならない。 一覧 写真を全てZipで圧縮してメールで送られても何も面白くはない。FlickrやPicasa、Facebookを使う手もあるが、自分の写真は手元にあるのが良いと考える人はPhotoFloatを使ってみよう。 PhotoFloatの特徴としては、最低限のPHPファイルを除けばほとんどはJavaScriptで実装されているということだ。写真の一覧、アルバム表示、写真の詳細などが全てJavaScriptで作られている。写真の詳細画面では同じアルバムにある写真がサムネイ
これは便利！ブラウザ/レンダリングエンジンごとのCSS設定をJavaScriptで解決する·CssUserAgent MOONGIFT
CssUserAgentはJavaScriptを使ってブラウザ/レンダリングエンジンごとのクラス定義を生成する。 [/s2If] CssUserAgentはJavaScript製/Web用のオープンソース・ソフトウェア。CSSは便利だが、ブラウザによって指定が異なってしまうケースに対応しようと思うと途端に煩雑になってしまう。特にここ数年のようにWebブラウザの種類が増えると大変だ。 このようなクラスが定義される レンダリングエンジンで考えても数多く、さらにバージョンによってレンダリング結果が異なるとなると発狂しそうになってしまうほどだ。そんな苦しむWebデザイナーの方々を救うかもしれないのがCssUserAgentだ。 CssUserAgentはua-*というクラス名を自動的に定義するJavaScriptファイルだ。「ua-（ブラウザ名）」「ua-（ブラウザ名）-（メジャー番号）」「ua-
シンプルながらユーザビリティに大きな貢献。郵便番号から住所を入力補完する·js-zip2address MOONGIFT
js-zip2addressはGoogle日本語入力APIを使い、Webブラウザ上での郵便番号から住所を入力補完する。 [/s2If] zip2address.jsはJavaScript製のオープンソース・ソフトウェア。ECサイトをはじめとして個人情報の入力フォームでは一般的になってきている郵便番号から住所を引く機能。実装方法は様々だか、この郵便番号と住所の変更は意外と回数が多い。 サンプル 回数が多いということはメンテナンスコストが大きいことを意味している。都度アップデートされるだけでなく、削除されるデータも多い。そこでメンテナンスフリーで使える手法を紹介しよう。それがzip2address.jsになる。 zip2address.jsの特徴は大きく分けて二つある。一つはデータ元としてGoogle日本語入力APIを利用しているという点だ。確かにGoogle日本語入力では郵便番号を入れると住
Webブラウザ上で楽譜を描く·Vexflow MOONGIFT
VexflowはJavaScript製のオープンソース・ソフトウェア。Web上には無数のコンテンツが存在するが、それは主にテキストが主体になっている。数式のようなものでさえ画像で表現されることが多い。これは非常に勿体ないことだ。 テキストを使って表現できればシステムとの連携も容易になったり、Webクローラーに拾われてインデックス化することも考えられる。同様に表現しづらい情報である楽譜をJavaScriptで表示するのがVexflowだ。 Vexflowは一定のフォーマットに従って書かれたテキストをJavaScriptを使ってCanvas/SVGで表現したものだ。その表現力は非常に高く、音符を描くのはもちろん、数字やアルファベットを表示することもできる。ピアノのみならず様々な楽器に対応できるだろう。 他にも音符を線でつないだり、ト音記号を描いたりと高機能だ。JavaScriptなので、変更と
JavaScript製のガントチャート·JSGantt MOONGIFT
JSGanttはJavaScript製/Webベースのオープンソース・ソフトウェア。多人数、または複数社が関わるプロジェクトでは一つのタスクの結果が別なタスクに関わっていることが多々ある。そうした時の遅延はプロジェクト全体の調整が必要であり、滞りなく進めるのは至難の業だ。 JavaScriptでガントチャートを生成 そのためタスク間のスケジュールや関わり方を示すのにガントチャートがよく使われる。これまでのガントチャートは画像出力型が多く、生成後の再利用性が今ひとつだった。そんな不満を解消してくれるのがJSGanttだ。 JSGanttはその名の通りJavaScriptによるガントチャート生成ソフトウェアだ。縦にタスクが並び、横に日程が並ぶ。各タスクごとにスケジュールが帯になって表示され、その結果が別なタスクに線でつなげられる。タスクの関連性が見いだせるはずだ。 折りたたんだり表示範囲を変更
ページ内スクロールのjQueryプラグインいろいろ
ページ内、要素間のスムースな スクロールを実装する事が可能な jQueryプラグインのメモ。使ってい るサイトも随分見かけるようになっ てきましたね。 ページ内、要素間のスムースな スクロールを実装する事が可能な jQueryプラグインのメモ。使ってい るサイトも随分見かけるようになっ てきましたね。 個人的には特定のものしか使っておらず、いろいろと挑戦したいと考えているのでそのとき用にメモ。カルーセルとかギャラリーみたいなスライダータイプは今回割愛しています。 ScrollTo Posts With jQuery ページ内をダイナミックにスクロール。サイドのメニューっぽいところで操作します。 ScrollTo Posts With jQuery Create a Vertical, Horizontal and Diagonal Sliding Content Website with
Lightbox JOJO
Lightbox JS は画像をクールに見せる便利なスクリプトです。 ただ、荒木飛呂彦度が若干足りません。そこで新しいスクリプトを作ってみました。
まさに発想の転換。Jailbreak無しでiPhoneをFlash対応にする方法。
まさに発想の転換。Jailbreak無しでiPhoneをFlash対応にする方法。2010.01.22 11:30 iPhoneがFlashに対応するのを首を長ーくして待っている方。なんと、Jailbreak無しでもFlashがiPhoneで再生できるプレイヤーが登場しました。 JavaScriptで書かれたオープンソースFlashプレイヤー｢Gordon｣は、FlashファイルをJavascriptを通してブラウザに指示することができるもの。このプレイヤーをページに組み込めば、iPhoneのSafariからFlashが見れてしまうということなんです。いやぁ、この発想はなかったわ。 開発者のページではソースコードのダウンロードとデモが見れます。 [Gordon via Slash dot japan] （遠藤充）
Google AJAX Feed API - Google Code
å©ç¨æ¹æ³ Google AJAX API ãã¼ãç³ãè¾¼ã¿ã¾ãã ãããããã¼ ã¬ã¤ããèªã¿ã¾ãã ã¦ã£ã¶ã¼ãã使ç¨ãã¦ããèªèº«ã®ã¦ã§ããµã¤ãã«ãã£ã¼ã管çæ©è½ã追å ãã¾ãã ãµã³ãã« ããã¸ã§ã¯ããåç §ãã¾ãã ããããã®ãã㪠Google AJAX Feed API ã«ã¤ã㦠AJAX Feed API ã使ç¨ããã¨ãJavaScript ã ãã使ç¨ãã¦ã
これは面白い！JavaScriptだけで作られたOpenSocialポータル·OpenSocial Dashboard MOONGIFT
OpenSocial DashboardはJavaScript製のオープンソース・ソフトウェア。OpenSocialというと、MySpaceやmixiといったSNS向けのツールであって、あまり一般サイトには無縁なように感じていた。だがガジェットとして捉えるとiGoogleのように個々人で使える可能性もある。 JavaScriptだけで作られているのが驚き！ OpenSocial DashboardはそんなOpenSocialの可能性を存分に感じさせるソフトウェアだ。まるでMac OSXのDashboardのようなインタフェースで、OpenSocialガジェットを自由に配置できるようになっている。しかもこれがJavaScriptのみで作られているというのだから驚きだ。 仕組みとしてGoogleの提供するFriend Connectが用いられている。mixiアプリも一部については動作もできるだ
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」:phpspot開発日誌
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」がGoogle Codeに公開されています。 jQというだけあって当然ながらjQueryプラグインの形式です。 適用前の普通のSelect ボックスが便利に変化します 都道府県の縦に長かったものが横方向に超分かりやすく表示 日付も次のように超分かりやすいセレクトに。縦に長いのとはもうオサラバできそうです。 更に、コールバック関数によってクリックした後の動作も定義できるっぽいです。 はじめから日本対象という点でも使いやすいですね。 実装も、jQueryプラグインなので超使いやすいです。 次のように初期化するだけのようです。 $(".simpleBox").jQselectable({ set: "fadeIn", setDuration: "fast", opacity: .9 }); 以下のエント
Google，JavaScriptアプリ開発ツール「Closure」を公開
米Googleは米国時間2009年11月5日，JavaScriptアプリケーション開発用のツール・セット「Closure」を公開したと発表した。JavaScriptコードを最適化するツールやライブラリ，テンプレートなどをオープンソース・ソフトウエアとして提供していく。 Closureは，JavaScriptコードを高速化／コンパクト化するツール「Closure Compiler」，デバッガ「Closure Inspector」，ライブラリ「Closure Library」，テンプレート「Closure Templates」で構成する。Googleは，これらを「Gmail」や「Google Docs」「Google Maps」などのWebアプリケーション開発に使っている。 Closure Compilerは，JavaScriptコードの無駄な部分を削除したり修正したりすることで，サイズを小さ
「吹き出し」をツールチップとして実装するjsいろいろ
マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウスをあわせるとバルーンが現れます。角はcssで丸くしました。デフォルト状態だとマウスカーソルにarrow部分が重なってしまうので
Web ブラウザに表示されている画面を直接編集する方法
これはすごい。Web ブラウザのアドレスバーに以下を入力し Enter すると、 今表示されている内容を直接編集できる。Firefox 3.0.14 と IE8 で出来 ることを確認した。 javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 WEBブラウザーに表示されている画面を直接編集する方法 - sanonosa システム管理コラム集 追記(2009-10-04): 戻す方法はないものかなあ。‘false’ と ‘off’ では出来なかった。 追記(2009-10-17): 「戻す方法」というのは、「編集モードから閲覧モードに戻す方法」のこ とです。端折った書き方ですみませんでした。もう少し楽な方法が見つかっ たので、以下に追記します。 IE では、以下を入力し Enter
【ハウツー】JavaとHTMLだけでWebアプリケーションを作る「Apache Wicket」 (1) Apache Wicketとは | エンタープライズ | マイコミジャーナル
Apache WicketはオープンソースのJava Webアプリケーションフレームワークのひとつである。Java用のWebアプリケーションフレームワークは多数存在するが、Wicketが特徴的なのは、XMLなどによる設定ファイルを排除し、ほぼHTMLとJavaのコードだけでWebアプリケーションが作成できるようになっている点だ。それも画面デザインとロジックを明確に分離し、デザインのためのマークアップとJavaのコードを混ぜて記述する必要がないように作られている。 Wicketを使えば、モデル定義も画面遷移もすべてJavaのコードで書くことができる。複雑なXMLに気を煩わせる必要はない。その上、Wicketで利用するオブジェクトはコンテナで制御されるのではないため、プログラマが自由に扱うことができる。ページデザインのためのHTMLにしても、JSPのような特別なコードをいっさい必要としない。そ
便利！jQueryのアクションをビジュアル的に作成する·IxEdit MOONGIFT
jQueryを使って画面のアクションを作ろうと思うと、そのコーディングの仕方を含めて習得する必要がある。イベントにもマウスやフォーカス、クリックなどの様々な種類が存在し、その結果として起こすアクションも無数に存在する。それらを適切に判断しながら構築するというのは意外と難しい。 jQueryを使った開発にぜひ！ 単純なJavaScriptであれば、オーサリングツールで対応しているものもある。だがjQueryのような高度なJavaScriptフレームワークには対応していない。そこで使うのがIxEditだ。 今回紹介するオープンソース・ソフトウェアはIxEdit、jQueryのビジュアルアクションビルダーだ。 IxEditは既に組み上がっているWebサイトに対して使うライブラリだ。指定されたJavaScriptファイルとCSSを読み込むと、Webサイトにフローティングウィンドウが表示される。そし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
http://e0166nt.com/blog-entry-738.html
IDEA * IDEA
[JS]jQueryのプラグイン33+1選 -2009年10月