Flash不要！JavaScriptで派手なWebデザイン
ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント／Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション／エフェクト処理を
[JS]jQueryのプラグイン33+1選 -2008年9月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 MopSlider オート・マニュアルに対応したコンテンツスライダー。 MopBox スライド機能付きの移動可能なボックスを表示。
Yahoo!地図API入門
Yahoo!地図APIはYahoo!地図Webサービスを使用してウェブページやブログに地図を利用したWebアプリケーションの作成するためのAPIです。単に地図を表示するだけではなくアイコンやポリゴンなどの表示の他、イベント処理を行うことも出来ます。 ここではYahoo!地図APIの使い方についてサンプルを作成しながら確認していきます。 関連サイト:Yahoo!デベロッパーネットワーク - Yahoo!地図 関連サイト:Yahoo!デベロッパーネットワーク - クレジット表示 地図の表示 地図の縮尺 地図の種類 測地系 アイコンと吹き出し コントロール ポリライン/ポリゴン 地図の移動 イベント処理
各サイトのパスワードをたった一つのマスターパスワードだけですべて管理できるすごいブックマークレット「SuperGenPass」
ブックマークレットとは、ページのアドレスをお気に入りに入れる代わりにJavaScriptのプログラムコードを入れておくことで、それを選んだ時にちょっとした機能がすぐに実行できるという便利なもの。 で、今回の「SuperGenPass」は単一のマスターパスワードさえ覚えておけば、各サイトごとにすべて違うパスワードを極めて簡単に利用できるというかなりすごいブックマークレットで、別途ソフトウェアや拡張機能をインストールする必要なし、覚えておくのはたった一つのパスワード、なおかつ各サイトごとに違うパスワードを設定できるというスグレモノとなっています。 設定方法や使い方は以下から。 SuperGenPass: A Free Bookmarklet Password Generator. http://supergenpass.com/ まず「Browser compatibility ?」で使用して
ステップ・バイ・ステップで Pathtraq の API を使ってみよう - IT戦記
はじめに 「このサイトの人気ページを見たい！」 「このページに、皆いったいどうやって来てるんだろう？」 「このページを見たあとは、どこを見に行ってるんだろう？」 そんなこと思ったことありませんか？ Pathtraq API を使うことで、そんな情報をあなたのソフトウェア、ウェブアプリケーションに組込めるようになりました！やった！ でも、難しいんでしょ＞＜？ 違うよ。全然違うよ。超簡単だよ。 というわけで、今日は JavaScript から Pathtraq API を使ってみましょう！ Step 1 Pathtraq API を目で見てみよう！ やり方は、簡単です。 http://api.pathtraq.com/pages?url=**ここに調べたい URL** とやるだけです。 試しに、このブログを見てみましょう。 RSS が出力されました。 これは、 IT 戦記内で最近人気のページを
[JS]ブラウザの幅に合わせてレイアウトを最適化するスクリプト -Dynamic Layout
Dynamic Layoutは、ユーザーのブラウザの幅を認識し、それに適したスタイルシートでページのレイアウトを最適化するスクリプトです。 Dynamic Layout デモ Dynamic Holy Grail 1～3カラムのシンプルなレイアウト、ブラウザ幅600, 800, 1000に設定 Fortes ブラウザ幅600, 800, 1000, 1200, 1400に設定 fil-ter ブラウザ幅600, 1000に設定 Dynamic Layoutの設置方法は、body直下に外部ファイルとして指定します。 <textarea name="code" class="html" cols="60" rows="5"> <body> <script src="http://static.fortes.com/projects/dynamiclayout/dynamiclayout-1.0
奥から手前にズームするJavaScript「Spacegallery.js」
twitter facebook hatena google pocket 最近はappleのcoverflowやらamazonのぐるぐるやら画像の見せ方が豊富になってきました。 今回紹介する「Spacegallery.js」はありそうでなかった、手法かもしれません。 奥から手前にずんずんとズームしながら画像を表示していきます。 sponsors 使用方法 Spacegallery.jsのDownLoadからファイル一式をダウンロードします。 あとは以下を記載します。 <link rel="stylesheet" media="screen" type="text/css" href="css/spacegallery.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text
チェックボックス、ラジオボックスをオシャレに表示するJS:phpspot開発日誌
Custom Checkboxes, Custom Radio Buttons, Custom Select Lists チェックボックス、ラジオボックスをオシャレに表示するJS。 次のようなチェックボックス、ラジオボックスにスタイルできるJSです。 <input type="checkbox" class="styled" /> のように、class="styled" で自動スタイルされます。 CSSを変更でデザイン変更可能です。 関連エントリ CSSデザインされたTextAreaサンプル inputのtype=fileをCSSでクールにスタイルするサンプル サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ
ウノウラボ Unoh Labs: Ext JSをUIに使って携帯サイトのシミュレータを作ってみた
五十川です。 携帯サイトの見栄えをシミュレートするウェブアプリ作りました。と言っても、実際に作ったのはかれこれ半年以上前で、手直ししてから公開しようと思ってたら、結局「guid=ON」を付け足したくらいであとは放置だったので、さすがにいい加減晒そうと。 任意のヘッダでリクエストして、レスポンスの絵文字とか変換してサイトの見栄えを確認するというものですが、これはそもそもExt JSをいじってた頃に、Ext JSでこういうの作ればいい感じになるんじゃね？ということで、丁度2.0がリリースされた頃にデモ用に作ったものなのでした（なので、かれこれ半年以上前） 実機テストの代用になるわけでは、もちろんありませんが、絵文字も含めたマルチキャリアでの見栄えを手軽に確認したいときなどに、わりと便利に使えてたりします。 スクリーンショット 機種ごとのプリセットのヘッダグループをYAMLファイルに書いておいて
フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント
&lt;script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&amp;pid=877160106″&gt;&lt;/script&gt;&lt;noscript&gt;&lt;a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&amp;pid=877160106″ target=”_blank” &gt;&lt;img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&amp;pid
武器ジェネレータ
入力した名前によって曲線具合が変化しますので、一人一人異なるオリジナルの武器となります。 武器の強さが1〜100で表示されますが、25が平均的な強さです。 自分の武器を「武器バトル」に参加させることができます。 武器バトル ご自由にリンクして頂いて構いません。 番組や雑誌などでのご紹介は、管理人に無許可でご自由に紹介して頂いて構いません。 画面のスクリーンショットなどは、ブログなどにご自由に載せて頂いて構いません。 トラブルに関する一切の責任は負いません。
[JS]jQueryのプラグイン33+1選 -2008年6月 | コリス
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 (1) ドラッグ&ドロップでカラム幅を変更可能 | エンタープライズ | マイコミジャーナル
Webアプリケーションの操作性を向上させるために、いまや欠かすことのできないJavaScript。Prototype.jsやjQueryといった各種フレームワークを使用して、ユーザビリティを高めている開発者も少なくないだろう。 ここ数年の間でYahoo! UI LibraryやExt JS、Dojo Toolkitといった、開発のしやすさや・操作性の向上はもちろんのこと、綺麗なデザインも兼ね備えているライブラリが増えてきた。既存のWebアプリケーションに少しのコードを追加するだけで、機能もデザインも付加できるこれらのライブラリは非常に魅力的だ。 ここではテーブルで組んだリストに対して、まるで表計算ソフトのような操作性を提供するFlexigridライブラリを紹介したい。 ネイティブアプリケーション並みのリストを実現 FlexigridとはPaulo P. Marinas氏が開発・公開している
HTML&CSS、プログラミング、データベースなどのチートシート集
Webmasters by Designのエントリーから、HTML, CSS, XML,やプログラミング、データベース、htaccess、DOCTYPE、SEOなどウェブ開発者のためのチートシートを紹介します。 The Best Developer Cheat Sheets Around HTML & CSS HTML HTML Cheat Sheet (PNG, PDF) HTML Help Sheet. Panic Over. (PDF) XHTML cheat sheet (HTML) CSS CSS Cheat Sheet (PNG, PDF) CSS Cheat Sheet (PDF) CSS Cheat Sheet (HTML) XML XML Quick Reference (PDF) XSLT Quick Reference (PDF) XML Syntax Quick R
★[JS]省スペースにも最適なアコーディオンのスクリプト集 | コリス
WebTeckerのエントリーから、jQueryやPrototypeやMooToolsなどライブラリを使用するものや、単独で動作するアコーディオンのスクリプトを紹介します。 Great Accordion Scripts
jQueryのテスティングフレームワークQUnit (でぃべろっぱーず・さいど)
jQueryのSubversionリポジトリにtestフォルダがあって、jQuery自身のテストが納められていたのですが、そこで使われているテスティングフレームワークがQUnitとしてトップレベルのプロジェクトになったようです。 QUnit - jQuery JavaScript Library これを使うと簡単にjQueryプラグインのテストコードが書けちゃいます。 使い方は以下の通り。 提供されているメソッド test( name, test ) : nameにテストの名称、testには実行するテストを関数の形で渡します。 module( name ) : テストの途中で、テスト対象のモジュールや関数の目印を付けたいときに使います。nameにはモジュールの名称を渡します。 ok( state, message ) : stateがtrueならOK、falseならNGという判定になります
たった6行でWebサイトのUIをガラッと変える
「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
透明感のあるデザインをJavaScriptで実装する（glassbox.js） - youmos
ストリートビュー(GStreetviewPanorama) - Google Maps JavaScript API入門
IDEA * IDEA
