サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
都知事選
www.h2o-ajax.com
データを見せるときは、表よりもグラフの方が見やすい。しかし、なかなか複雑な画像なので、簡単には作れません。 そこで、便利で美しいのがグラフ描画 jQueryプラグイン『flot』。 かわいらしいグラフから、細かいデータのグラフまで、さまざまなグラフを簡単に描くことが出来ます。 ダウンロードは Google Codeから。ぜひ使ってみましょう。 flot - Google Code Flot Examples(デモはこちらから) [PR] Ajax開発のホームページ制作はエイチツーオー・スペースにお任せください
Webブラウザ経由のファイルアップロードといえば、味気ないテキストフィールドに「参照」ボタンでファイルを指定し、送信時に一緒にアップロード・・ こんな手続きが一般的ですが、jQueryプラグイン「uploadify」を使えば、非常にスマートにアップロードができます。 「BROWSE」ボタンをクリックしてファイルを選び、アップロードしたいファイルを全部選んだら「Upload Files」リンクをクリック。すると、プログレスバーのアニメーションと共にアップロードしている様子が見て分かります。 これなら、ストレスなく美しく、アップロードが可能。是非使いたいですね。 JQuery File Upload Plugin Script - What is Uploadify - Uploadify JQuery File Upload Plugin Script - Demo - Uploadify(
テキストフィールドに一部の文字を打ち込むと、残りの文字の候補を出してくれる「オートサジェスト」。そんなオートサジェストを、かわいい吹き出しの形で表示してくれるライブラリが「Autosuggest / Autocomplete with Ajax」です。 候補データは、XMLでもJSONでもOKで、なかなか使いやすそう。デモンストレーションもあるので、まずは使ってみてください。 Ajax Auto Suggest v.2 : CSS . XHTML . Javascript . DOM : Brand Spanking New Ajax auto-suggest / auto-complete | BrandSpankingNew(デモはこちらで)
メニューの数が多くなったりすると、いくつかまとめて「ドロップダウンメニュー」を作りたくなることがあります。 そんな時に便利なのが「Simple jQuery Dropdowns」。 シンプルな実装ながら、多段階のメニューも簡単に作ることが出来ます。 Webサイトのメニューや、Webアプリケーションのメニューなど、幅広く活用できそうですね。 デモンストレーションもあるので、まずはご覧くださいませ。 Simple jQuery Dropdowns Simple jQuery Dropdowns(デモはこちらで)
画像を、スライドショーのように見せるライブラリは多くありますが、演出が凝っていて逆に使いにくい時もあります。 James Padolseyというサイトで紹介されている「imgPreview」は、超軽量。リンクにマウスを重ねると、画像がツールチップのように表示されるだけという演出です。 これなら、ちょっとした画像の確認などに重宝しそうですね。設置の仕方も簡単のようです。ぜひ、お試しください。 New jQuery plugin: ‘imgPreview’ - James Padolsey jQuery : imgPreview Demos(デモはこちら)
ログインフォームやお問い合わせフォームは、人によっては必要だけどいつもは必要ないという、ちょっと扱いに困るもの。 そこで、いつもは上に隠しておいて必要なときにスライドして表示できる「Sliding login panel with jQuery」というスクリプトがありました。 これを使えば、簡単にスライド式のログインフォームを作ることができます。デモやダウンロードはこちらから。mootools版もあるようです。 Web-kreation - Nice & Clean Sliding Login Panel built with jQuery [PR] Ajax開発はエイチツーオー・スペースにお任せください
AjaxLineの「10 Best jQuery Plugins for working with Tables」で、「テーブルを作る」時の便利なプラグイン 10個が紹介されていました。 TableSorter ページを再読込せずに、テーブルの並び替えができるプラグイン。テーブル操作の基本ですね。 Colorize マウスオーバーしている行や列を、背景色を変えて目立たせるためのプラグイン。また、クリックして選択した行や列の背景色を変えたままにすることもできます。 tableRowCheckboxToggle テーブルの各行にチェックボックスを表示させて、チェックできるようにするためのプラグイン。複数行を選択して、まとめて削除といったインタフェースを簡単に実現することができます。 TablePagination 大量のデータを、何ページかに分けて、簡単に「ページング」を行えるようにするプラグ
Ajaxで通信をしていると、通信待ちの間に表示しておくいわゆる「ローディングアイコン」が欲しくなります。「アニメーションGIF」を作るツールで手作りできるものの、なかなか手間がかかってしまいます。 そこで、簡単な操作でいろいろなアイコンを手に入れることができるのが「Chimply」です。 円タイプや、バータイプの他、ボタンやバッヂなども簡単な操作で作ることができ、色や大きさなどをカスタマイズして入手することができます。 Webサイトの雰囲気にあわせて、ユニークなアイコンを手に入れたいですね。 Chimply generates your images
フォームの入力で、間違えてしまったときなどにバルーンを横に表示して注意を促したりするとスムーズです。 そんなときに使えるのが「ツールチップ」という演出。今回紹介する「BeautyTips」はその決定版といえる存在でしょう。 非常に簡単に設置して、こんな風にツールチップを出すことができます。 さらに、見た目をフルカスタマイズできるので、こんな見た目にすることも可能。 他にも、中に画像を埋め込んだり、レイアウトをしたりなどかなり自由度の高いツールチップです。 ちょっとした注意を促したいときや、補足情報を表示するときなど、使い道はいろいろありそうですね。 Plugins | jQuery Plugins デモンストレーションはこちら [PR] Ajaxでツールチップを表示するならエイチツーオー・スペースにご相談ください
お問い合わせ画面などで、ユーザーに文章を打ち込んでもらうときは「テキストエリア」を使います。 しかし、テキストエリアの大きさは大きい方がユーザーにとってはうれしいものの、場所を取ってしまうので、ページ制作者にとっては邪魔なもの。 そこで、「文字を打ち始めたら大きくなる」テキストエリアはいかがでしょうか。 James Pdolsey氏のサイトで『jQuery plugin: ‘autoResize’』が紹介されていました。 大きくなるときに、ちょっとしたアニメーションで「にょきっ」と大きくなるのが、なんとも粋でかわいらしいです。こんな演出なら使ってみたいですね。 文字を打ち始めるとテキストエリアが大きくなる『jQuery plugin: ‘autoResize’』 ※ 動作デモは、ページ上部の「Demo」からどうぞ [PR] Ajax開発のお手伝いは、エイチツーオー・スペースにお任せく
使用するスクリプト # 記憶 【DSオブジェクト】.put() # 読み出し query = 【DSオブジェクト】.all() datas = query.fetch(【件数】) サンプル # -*- coding: utf-8 -*- import wsgiref.handlers from google.appengine.ext import db, webapp class DSSample(db.Model): name = db.StringProperty(required=True) class MainHandler(webapp.RequestHandler): def get(self): # 情報の記録 data = DSSample.all().fetch(100) db.delete(data) sample = DSSample(name='Recent
使用するスクリプト なし サンプル なし 解説 Google App Engineを始めるには、最初にログインする必要があります。GmailのアカウントやGoogleアカウントを持っていれば、ログインが可能です。なくても、無料で作成できます。 Google App Engineにログイン 続いて、App Engine SDKをダウンロードしましょう。このソフトを利用して、アプリケーションを開発していきます。 App Engine SDKのダウンロード セットアップすると、次のような画面が表示されます。 そしたら、[File][New Application]メニューを選んで、次のように記入します。 [Create]ボタンをクリックすると、リストに表示されます。画面上部の「Run」ボタンをクリックしましょう。 続いて「Browse」ボタンをクリックすると、Webブラウザが起動して次のように表
Name (必須) Mail address (非公開) (必須) URI Remember personal info Yes No Commentスタイル指定用の一部の HTMLタグが使用できます。 Add Your Comment Trackbacks:0 Trackback URL for this entry http://www.h2o-ajax.com/ajax_dic/trackback Listed below are links to weblogs that reference Ajax逆引き辞典 from Ajax入門情報サイト Recently Ajax by H2O Space.
ユーザーが画像をアップロードできるフォームなどで、「参照」ボタンのあるフォームコントロールを使うことはよくあります。 しかし、なかなか見栄え良くならない上に、アップロードのためにフォームを送信しなければならず、いまいち素敵なフォームになりません。 そこで、「Ajax file upload with jquery」を使えば、素敵なアップロードページを作ることができます。 ライブラリを利用すると、大きなボタンが表示され、クリックするといつも通りファイル指定ダイアログが表示されます。 ファイルを選択すると、画面がリロードすることなくボタン上でアニメーションが展開されます。 利用には jQuery 1.2が必要だとか。素敵ですね。 Ajax file upload with jquery - valums.com
FCKEditorや、TinyMCEなど、ブラウザ上でHTMLを記述できる「リッチテキストエディタ」は一般的になってきました。 しかし、これらが作り出すHTMLはお世辞に美しいとは言えず、なかなか歯がゆい思いをします。そこで、少し変わったアプローチのオンラインエディタをご紹介。 『SmartMarkUP』というこのスクリプトは、「見たまま」ではなくてHTMLがそのまま表示されます。 ボタン類をクリックすれば、タグが自動的に入っていきますが、あくまでも編集するのはタグそのもの。 そして、画面上部の「チェック」ボタンをクリックすると、スムーズなアニメーションと共に「プレビュー」を行うことができるというわけ。 それなりにHTMLの知識が必要となるため、誰でも利用できるわけではないですが、HTMLを知っていてキレイなHTMLを書きたいという方には良いかも知れませんね。 SmartMarkUP U
使用するスクリプト var http = new JKL.ParseXML(【PHPプログラムのパス】); http.parse(); 解説 JavaScriptは、セキュリティ上の関係でサーバー外のファイルにはアクセスすることができない設計になっています。そこで、Web APIを公開しているサービスの XML等を解析するためには、別途橋渡しをする役目が必要です。 Perl、Rubyなど、サーバーサイドで動作するスクリプトであれば何でもかまいませんが、ここではPHPを利用して作ってみます。 なお、XMLの解析にはJKL.ParseXMLを利用します。 まずは、先のサイトからライブラリをダウンロードして適当なフォルダに展開します。続いて、XMLファイルを準備しましょう。ここでは「sample.xml」という名前で保存します。 <?xml version="1.0" encoding="UT
使用するスクリプト var http = new JKL.ParseXML(【XMLのパス】); func = function() { } http.async(func); http.parse(); 解説 XMLを受信して解析するには、時間がかかる場合があります。この時、「同期通信」の場合はWebブラウザが処理の終了を待ってしまうため、操作ができなくなってしまい不便です。そこで、「非同期通信」を行うと良いでしょう。 JKL.ParseXMLなら、非同期通信も簡単に行うことができます。 まずは、先のサイトからライブラリをダウンロードして適当なフォルダに展開します。続いて、XMLファイルを準備しましょう。ここでは「sample.xml」という名前で保存します。 <?xml version="1.0" encoding="UTF-8"?> <books> <book> <name>
使用するスクリプト var http = new JKL.ParseXML(【XMLのパス】); var data = http.parse(); 解説 XMLを受信して、ページ内にデザインして展開する方法はさまざまありますが、JKL.ParseXMLを利用するのが最も簡単です。 まずは、先のサイトからライブラリをダウンロードして適当なフォルダに展開します。続いて、XMLファイルを準備しましょう。ここでは「sample.xml」という名前で保存します。 <?xml version="1.0" encoding="UTF-8"?> <books> <book> <name>基本からしっかりわかる Adobe Spryプログラミングブック</name> <url>http://www.amazon.co.jp/dp/4839926212/h2ospacelim09-22</url> </bo
解説 フェードインをするには、「Effect」オブジェクトの「Appear」メソッドを利用します。 まずは、HTMLを準備しましょう。 <div id="areaMain" style="display: none;"> <p>このエリアがフェードインしながら表示されます</p> </div> ここでは、id属性を付加しておくことと、あらかじめdisplayプロパティをnoneにして、隠しておくことがポイントです。 displayプロパティは、外部ファイルやhead要素で適用してしまうと、このあと JavaScriptで操作ができなくなってしまうため、必ずインラインで記述するなどしましょう。 次にスクリプトです。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0
ページ内リンクの時に、スルスルとスクロールしている様子を見せるいわゆる「スムーススクロール」の演出は、一般的なものになってきています。 しかし、よくあるライブラリは組み込んだ後で、特定のclass名を付加したり、idを指定したりと組み込み方が煩雑。 この「df Smooth Scroll」はファイルを読み込むだけという、非常にシンプルなライブラリです。 依存ライブラリなども必要なく、1KB程度のファイルを読み込むだけ。クロスブラウザにももちろん対応で、非常に使いやすいライブラリと言えるでしょう。 » Deziner Folio» Blog Archive » df Javascript Smooth Scroll
昨日の投稿で気になっていた「Python」ですが、少し勉強を進めてみることにしました。 ネットを探し回って、見つけた入門サイトはこちら。 » 基礎からはじめるPython—目次:ITpro なかなか丁寧に書かれて楽しめそうです。 まずは、Pythonの環境構築ですが、こちらのドキュメントでは Ubuntu Linuxでの方法しか書かれていません。しかし、筆者の環境は Mac OS X。 Ubuntuでは、「aptitude」というパッケージ管理コマンドがあるようですが、Macにはありません。 Macでよく使うのが「Mac Ports」というパッケージ管理コマンド(だと思います)なので、これで同様のパッケージがないものか調べてみました。 が・・いろいろ調べていると、どうも Macにはあらかじめ Pythonがインストールされているようです。見つけたドキュメントはこちら。 » Pytho
筆者も愛用している、PANIC社のWeb開発ソフト「CODA」ですが、バージョンアップのお知らせが届きました。 1.5では、「Web books」のカスタマイズや、複数ファイルに渡っての検索が可能になるなど、細かい改良が加えられていますが、最もわくわくするバージョンアップが「Subversion」への対応です。 Subversionは、ご存じの方も多いでしょうがバージョン管理システムのスタンダード。チェックインやコミットを行うことで、複雑にバージョンアップを繰り返すライブラリなどをスマートに管理することができます。 サーバーを自分で立てることもできますが、Google Codeなどを利用すれば、無料でサーバーをレンタルすることも。 Codaでは、この Subversionサーバーで管理されているプロダクトをチェックアウトしたりチェックインしたりすることができるそうです。 Mac用にはス
Ajaxと関係なく恐縮ですが、知って感動したのでエントリー。 例えば、「このアンケートの集計期間は 2008/08/01〜2008/08/31です」などと、一ヶ月の範囲を表示することがあります。 しかしこの時「最後の日」を求めるのはなかなか難儀。2,4,6,9,11(西向くサムライ)は一ヶ月が短くて、さらに 2月は閏年の時だけちょっと長い・・などと、非常に複雑なルールがあります。 しかし、PHPなら次の関数一発で知ることができます。 echo date('t'); 「t」は、「その月の日数」を求めるパラメータ。要するにこれが最終日になるというわけです。いやはや、こんなに簡単に求められるとは・・ 筆者は、「翌月の初日から -1をする」などという計算式を思い立ち、「月に +1した時に 13になっちゃったら翌年だから、年を +1して・・」などと、かなり複雑なプログラムを作ってしまうところで
Adobe Dreamweaver CS3(DW)には、Adobe Spryの開発補助機能がついているため、マウス操作だけでほとんどの機能を作ることができます。 ここでは、Adobe Spryと Dreamweaverで都道府県を選ぶと、市区町村のリストが出てくる Ajaxプログラムを作成してみます。2007年 11月に開催された「Adobe MAX Japan 2007」でお見せしたデモンストレーションです。 中で利用しているXMLファイルはこちらからダウンロードください。(林 岳里さんにご提供いただきました!) » アドレスデータのダウンロード 作り方はこちらから。 ムービー中で挿入している、JavaScriptコードはこちらです。 dsPref.setCurrentRowNumber(this.selectedIndex); また、ムービー中に「Spry領域を挿入しますか?」という
Home > 02.ニュース > 『Google Code』 - Wiki 、Subversion、100MBのディスクが無料で使えるプロジェクト管理ツール Newer Older 自作のソフトを配布したいとか、オープンソースとして公開してみんなで編集したいとか。そんなときに、わざわざサイトを構築したりするのは面倒です。 Wikiをインストールしたり、Subversionを設定したりと行ったことも、サーバー管理者でないと容易ではありません。 そこで、Google Code。無料で、WikiやSubversionと100MBのディスクスペースを使って、プロジェクトを公開することができます。 使い方は非常に簡単、Google(Gmail)アカウントを持っていれば、誰でもプロジェクトを作成することが可能です。 作っているところをムービーに撮影しましたので、こちらからどうぞ。
日本語は、同音異義語や送り仮名の間違いなど、勢いづいて書いているとなかなか見つけられない間違いをよくします。 そこで、そんな間違いを指摘してくれる「校正支援」をYahoo! JapanがWebサービスとして提供しているので、早速使ってみました。 まずは、次のサイトからアプリケーションIDを登録します。 » Yahoo!デベロッパーネットワーク - テキスト解析 - 校正支援 そして、JavaScriptを作り込んでいくわけですが、XMLの解析が必要なので「JKL.ParseXML」と定番の「Prototype.js」を組み込んでおきましょう。 » Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications » [ajax] JKL.ParseXML/ajax通信処理
Home > Aptana > [Aptana] Aptana Studioに、Subversionを追加する方法(ムービー) Newer Older 先日、AptanaでPHPの開発環境を整えたわけですが、それ以来、かなりの頻度で Aptana Studioを活用しています。 そんな中、最近バージョン管理に Subversionを使っているのですが、Mac用のクライアントソフトがないため、仕方なく Parallelsで稼働している Windowsに「TortoiseSVN」をインストールして利用していました。 そこで、ふと「Aptanaで Subversionが使えないかな?」と探してみたところ、ばっちりプラグインがありました。 インストールした様子と、設定して実際にチェックアウトするところまでをスクリーンキャストに撮影してみましたので、参考にどうぞ。 » その1 インストールまで
Googleから、またまた素敵なプレゼントが届けられました。「Google AJAX Language API」は、Google翻訳のエンジンを利用することができるAPIです。 日本語から英語や、英語から日本語へ。さらには、イタリア語、スペイン語、ドイツ語等々10ヶ国語以上に対応しています。 使い方も非常に簡単で、次のようなスクリプトを記述するだけ。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <!– スクリプト –> <script type="text/javascript"> google.load(’language’, ‘1′); window.onload = function() { google.language.translate(’hello’, ‘en’,
Home > ライブラリ > いろいろカスタマイズできるツールチップが作れる『Prototip』 Newer Older いろいろカスタマイズできるツールチップが作れる『Prototip』 ツールチップを作るライブラリは数々ありますが、このライブラリも便利そうです。 「Prototip」というこのライブラリは、ざっとあげるだけでも次のようなツールチップを作ることができます。 HTMLを表示する エフェクトともに表示する クリックして表示させる 閉じるボタンを設置する リンクを設置する かなりいろいろなことができます。さらに、見た目をCSSで制御できたり、スクリプトでツールチップの内容を変えたり等々、使いやすそう。 使い方はライブラリを読み込んで、画像をコピーし、次のようなスクリプトを1行書き込むだけ。 new Tip('【ターゲットのID属性】', '【内容など】'); 使ってみましょう
次のページ
このページを最初にブックマークしてみませんか?
『Ajaxの最新情報レポートblog : Recently Ajax』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く