30 Ajax Lightboxから使えそうなものを9個ピックアップ
jQueryで複数画像サイズをスライドバーを使ってユーザーに自由に変更してもらう

タイトルだけでは何言ってんだこの野郎という感じかもしれない・・・。
上にある画像の上部にスライドバーが付いていて、バーを動かすと、全体的に画像のサイズが変わると言う代物。
なかなか面白そうなのでメモしておきたい。
導入が手軽なGoogleみたいなパスワード強度チェッカーJavaScript

Googleで採用されているパスワードの強度確認チェッカーみたいなものを作ろうぜ!という流れで、『作ってみた』という人が現れた。
パスワードを入力するごとにJavaScriptによってフォームを監視し、ゲージでお知らせしている。
ちょっとした小技として使えそうですね。
プレビュー付きエディタ『Google AJAX APIs Playground』を使ってみた

すごいねこれほんとすごい。ってか今まで知らなかったこんなのあるなんて・・・。
Learn & Test Google’s APIs Easilyで掲載されてて朝から色々触ってました。
その簡単なレポートです。
jQueryを使ったシンプルでかっこいいイメージギャラリー Simple Controls Gallery
JavaScript産の導入が簡単で強力なマークアップエディタ
20の優れたAjax効果

web開発者が知っておくべき20の上位リストを作成している記事がありましたのでご紹介。
何気なくAjax使ったりしますけど、色々あるものですねぇ。
中でもこれは使えそうだなぁと思う7点をピックアップいたしました。
画像にメッセージを埋め込むflickr見たいな機能のJavaScript

画像に領域を作成して、メッセージを残せるようにするJavaScript。
ダブルクリックすると領域を作成し、ツールチップを表示する。
そこにメッセージを残せばその領域にメッセージが表示される仕組み。
ちょっと面白いものが簡単に導入できるかもしれないですね。
CSSで様々なアクセサリをつける装飾CSS+jQuery
まるでphotoshop!JavaScriptで実装するクールなカラーピッカー[prototype.js]
jQueryサンプル公開後の反省会。みなさんからのアドバイスを5本サンプル化

前回公開したjQueryの自作サンプルエントリー。
これはほんと有意義なコメントを方々から受けることができて、公開してよかったなと思いました。
今回は指摘を受けた箇所の再勉強をかねて、ブログにコードを書いていただいた方々のサンプルを作成いたしました。(コード勝手に使ってんじゃないよという人が万が一いるならご連絡ください)
学んだ部分を全て活用し、一本のサンプルも一番下においておきましたので、興味があったらご自由にもってっちゃってください。
また、前回利用したjQueryはバージョンが低いものを使ってましたので、最新版にしておきました。
一晩で覚えるjQueryの逆引き基礎サンプル7つ
一個のサンプルは非常に単純な構造になっておりますゆえ、jQueryをすでにやったことがある人にとって必要ないものだということをあらかじめご了承くださいませ。
エフェクト関係とかそれ以前に、どんなことをすればどうなるのかという基礎的なサンプルです。
プラグイン関係は以前書いた記事を参照してください。
jQueryでweb制作をする時にキープしておきたい30リスト
そもそもjQueryって何ですかという人は以下を。
今更ですが、jQueryにはまりました
追記:ほんとすいませんローカルで動作確認したところ動くのですが、オンラインではfirefoxしか動作確認せずに公開。
IE7では上の4つが動きません。
いくつか確認したのですが、どうしてもIE7でJavaScriptエラー。ダメすぎる自分・・・。
追記2:まいりました。他のサイトの記述を見てもミスが見つかりません。言語問題でしょうか・・・アクティブXでしょうか・・・。なぜか動きません。どなたか万が一わかる方がいらっしゃいましたら教えていただきたいと思います。どうぞよろしくお願いします。
追記3:Re:一晩で覚えるjQueryの逆引き基礎サンプル7つ (でぃべろっぱーず・さいど)
言及ありました〜。ありがとうございます。あとでじっくり見させていただきます。
追記4:IE7のAjaxローディング問題が解決しました。
トラックバックとコメントから原因がcharset=noneを吐き出していると推測。ローカルのApacheインストールして確認したところ、たぶん間違いない。管理会社に連絡入れて了承いただけましたので、きっと今日中には直るはず!・・・たぶん・・・。
エフェクト関係とかそれ以前に、どんなことをすればどうなるのかという基礎的なサンプルです。
プラグイン関係は以前書いた記事を参照してください。
jQueryでweb制作をする時にキープしておきたい30リスト
そもそもjQueryって何ですかという人は以下を。
今更ですが、jQueryにはまりました
追記:ほんとすいませんローカルで動作確認したところ動くのですが、オンラインではfirefoxしか動作確認せずに公開。
IE7では上の4つが動きません。
いくつか確認したのですが、どうしてもIE7でJavaScriptエラー。ダメすぎる自分・・・。
追記2:まいりました。他のサイトの記述を見てもミスが見つかりません。言語問題でしょうか・・・アクティブXでしょうか・・・。なぜか動きません。どなたか万が一わかる方がいらっしゃいましたら教えていただきたいと思います。どうぞよろしくお願いします。
追記3:Re:一晩で覚えるjQueryの逆引き基礎サンプル7つ (でぃべろっぱーず・さいど)
言及ありました〜。ありがとうございます。あとでじっくり見させていただきます。
追記4:IE7のAjaxローディング問題が解決しました。
トラックバックとコメントから原因がcharset=noneを吐き出していると推測。ローカルのApacheインストールして確認したところ、たぶん間違いない。管理会社に連絡入れて了承いただけましたので、きっと今日中には直るはず!・・・たぶん・・・。
prototype-uiで、簡単スライドショーの設置
ユーザーが2〜3カラムや800pxか1000pxか等を動的に変更できるすごいJavaScript

これは面白すごい。
なかなかさわり心地の良い動き。
しかも無料でダウンロードまでできるし、使えるし、なんともありがたい一品に、思わず勢いで記事にしてしまいました。
まずは以下のサンプルを触ってみると感動しますよ!(たぶん)
無料でダウンロードして使えるAjaxでインタラクティブなPHPメールフォーム

以前ご紹介したCSSclipの運営者のご友人からメールが来ました。
『こんなの作りましたけどどうでしょうか?』
早速ダウンロードして見てみるとなかなか素敵なメールフォームだった為記事に。
■ユーザビリティ向上により、メールフォームからの離脱率を下げる取り組み
■ノン・プログラマーでもカスタマイズが可能な仕様
というのが主な考え方で、お問合せ率向上を目指す仕様になってますね。
JavaScriptで実装するweb型FTPクライアントアプリケーション『F->IT』

オープンソースのJavaScript『F->IT』。
日本語に対応しているかは確認しておりませんが、F->ITからHTMLをいじる事が可能。
対応していたら顧客先などでもちょっとしたHTMLの編集が可能になりますね。
jQueryを使った、ランダム画像で様々なシャッフル演出効果のあるプラグイン

結構昔からあったんですが、使ってみると意外と素敵なので記事に残しておきます。
イメージギャラリーを作成する時などにも使えそうですし、非常に高度な動きを簡単に実装できますので便利です。
※この記事はJQueryJavaScriptを使ったプラグインの紹介です。
Re:zapa氏 今更ですが、jQueryにはまりました
ZAPA氏の記事。
ニュータイプなJSライブラリjQueryを使ってみよう!
これを見てから3日間。
ブログもあまりかけずこればっかりいじって遊んでました。
睡眠時間も1日2時間くらいになり、今日は書こうと思います。
まずZAPA氏、きっかけをありがとう。
私はJavaScriptの知識がほぼ皆無な人間です。
そんな私でもjQueryは簡単に使える為、面白くてはまりました。
ただ、お恥ずかしい話、PHPを使ってJavaScriptをある程度制御しなければ私は使いこなせません。
ですが恐ろしく簡単にこれまでこのブログで紹介してきたようなJavaScriptアプリと同等のものを作れる為、これははまります。
ニュータイプなJSライブラリjQueryを使ってみよう!
これを見てから3日間。
ブログもあまりかけずこればっかりいじって遊んでました。
睡眠時間も1日2時間くらいになり、今日は書こうと思います。
まずZAPA氏、きっかけをありがとう。
私はJavaScriptの知識がほぼ皆無な人間です。
そんな私でもjQueryは簡単に使える為、面白くてはまりました。
ただ、お恥ずかしい話、PHPを使ってJavaScriptをある程度制御しなければ私は使いこなせません。
ですが恐ろしく簡単にこれまでこのブログで紹介してきたようなJavaScriptアプリと同等のものを作れる為、これははまります。
透明なプレートのCSS・JavaScript(ジャバスクリプト)ドックメニュー
『10のJavaScript、Ajaxタブメニュー』他、タブまとめ
HTMLテーブルの行を見やすくするテーブルクロスJavaScript

» Introducing Tablecloth
テーブルクロスを導入する。
この記事がWEB関連のなかで話題になっていました。
はて・・テーブルクロス・・・。
何のことやらさっぱりだったんですが、使ってみるとなかなか素敵な動きをしてくれましたので記事に。
同一ページ内でインタラクティブに表示するモーダルメッセージのJavaScript

リンクをクリックすると同一ページ内で他のテキストファイルを読み込み表示するJavaScriptです。
特徴はmodal message script(モーダルメッセージ)で、開いたダイアログが閉ざされるまで、他の作業が出来なくなるという仕組みです。
デモページはこちら
webでの使用方法は以下に。
MySQLとAjaxによる星型評価ボタンの設置方法

最近よく見かけるシステムで、MySQLに対応した星型レビューボタンの設置方法です。
サンプルデモ
ダウンロード方法の英語は以下に。
Star Rater Ajax Version
興味のある方は簡易翻訳しましたので以下に。So, I found this great star rater script made in css. But I missed the web 2.0 stuff. So i played arround with it so it would work on a database without having to refresh any pages (but updating the database with AJAX). In this version i use it for rating a image (with unique id = imgId).
ただし、多少PHPの知識が必要とされますので、あらかじめご了承ください。
文字を隠すように貼るシールを表現するJavaScript
ウェブやブログページを簡単にPDFで提供可能にするJavaスクリプト

ウェブサイトや、ブログのページそのものを、PDFで提供するボタンをJavaSCRIPTを貼り付けるだけで可能にするサービスです。
特にPDF化に手を焼いている人も、この方法であっという間にPDF文章を提供することが可能になる。
5分もあれば、以下の手順で試してもらえれば設置できるでしょう。
スケジュールの進行状況アプリに使えそうなAjax
横にスライドするきれいな動きのアコーディオンJavaScript
WEB制作者が一度は触ってみておくべきオープンソース『Ext』

(2007.7.20 記事更新)
誰かがそろそろExtについて詳しい事を書いてくれるのではとか、甘い期待をしていたけど、ぜんぜん出てこないって事は人気がないって事なんでしょうか。
でもこれ、相当すごいものだと思うんです。
例えば、このページ(hello worldをクリック)だけをとっても良い動きをしてくれるのが確認できると思います。
なので今回はJavaスプリクト+Ajaxなオープンソース『Ext』をご紹介しておきます。
Ajaxでおしゃれな小窓を作る6つのサンプル

これはなかなかおしゃれな小窓が作れそう。
ウェブサイトでちょっとしたお知らせなどを入れる時に役に立つと思います。
特に、フォームを利用しただけではあまりおしゃれなものになりませんので、この技術を応用してみてはいかがでしょうか。
ドラッグ&ドロップAjaxの遊べるライブラリ6個
FC2ブログ 紹介予定派遣












































