Home > ライブラリ
ライブラリ Archive
[ライブラリ] Google Chart APIをPHPで簡単に使える「Chars with PHP and Google Charts API」
- 2008-04-16 (水)
- ライブラリ
URLだけでチャートが作れる「Google Chart API」ですが、URLを作るのが若干面倒です。
そこで、PHPで簡単にこのAPIを操ることができるライブラリが登場しました。
「Charts with PHP and Google Charts API」というこのライブラリを利用すると、次のようなコードでGoogle Chart APIを操ることができるようになります。
$chart = new googChart();
$chart->setChartAttrs( array(
'type' => 'pie',
'data' => $data,
'size' => array( 300, 200 )
));
echo $chart;
分かりやすくていいですね。使ってみましょう。
[ライブラリ] 西暦から和暦に変換する『和暦コンバーター』
- 2008-04-15 (火)
- ライブラリ
年月を扱うスクリプトを作っていると、やっかいなのは和暦と西暦を変換しなければならない時などです。
そんな時に便利そうな「和暦コンバーター」が 404 Blog Not Foundで公開されていました。
404 Blog Not Found:javascript - 和暦コンバーター:
明治から平成までしかサポートしていませんが、年単位ではなく日単位で対応してます。1989年1月7日とかにしてみてください。
コメント欄で、明治６年以前は正常に動作しないなどの言及がありますが、その辺りも考慮して便利に使わせていただきましょう。
いろいろカスタマイズできるツールチップが作れる『Prototip』
- 2008-02-13 (水)
- ライブラリ
ツールチップを作るライブラリは数々ありますが、このライブラリも便利そうです。
「Prototip」というこのライブラリは、ざっとあげるだけでも次のようなツールチップを作ることができます。
- HTMLを表示する
- エフェクトともに表示する
- クリックして表示させる
- 閉じるボタンを設置する
- リンクを設置する
かなりいろいろなことができます。さらに、見た目をCSSで制御できたり、スクリプトでツールチップの内容を変えたり等々、使いやすそう。
使い方はライブラリを読み込んで、画像をコピーし、次のようなスクリプトを1行書き込むだけ。
new Tip('【ターゲットのID属性】', '【内容など】');
使ってみましょう。
スライド作成ライブラリの決定版「Shadowbox.js」
- 2008-02-08 (金)
- ライブラリ
スライド作成ライブラリといえば、「Lightbox.js」が代名詞的存在です。しかし、Lightbox.jsは写真しか扱うことができません。
そんな中、「Shadowbox.js」というライブラリを見つけました。これがスゴイ。
写真、複数枚の写真のスライドショーはもちろんのこと、Flashアニメーション、QuickTimeムービーなどの映像、さらには外部Webサイトまで表示することができます。
さらに、オプションを駆使すれば、写真を自動縮小させるのか、それともドラッグドロップさせるのかといった、非常に細かい制御も可能。
さらにさらに、Shadowbox.jsには「アダプタ」という概念が導入されています。Prototype.js+script.aculo.usや、Yahoo! UI Library、jQueryなどの主要ライブラリをすでに使っていれば、アダプタを介在させることで、それらのライブラリを自動的に使ってくれます。ライブラリが肥大化することもなし。
これはすばらしいライブラリです。是非使っていきたいと思います。
日本の休日に対応したカレンダーコントロール『protocalendar.js』
- 2008-01-12 (土)
- ライブラリ
「予約希望日」など、フォームで日付を指定する機会はよくあります。しかし、ドロップダウンなどで選んでもらうと、「次の日曜日に」といったような指定がしにくい上、「2月 31日」など日付として不正なものが指定されるなどして、いろいろと面倒です。
そこで、JavaScriptでカレンダーを表示して日付を選ばせる方法があります。
『protocalendar.js』もその一つ。Yahoo! UI Libraryなどでも同種のものはありますが、ここで紹介するのは日本の方が日本向けに作成したカレンダー。祝祭日などもしっかり日本向けになっているため、非常に使いやすいと言えます。
使い方も、ライブラリをダウンロードして参照した後、次のように組み込むだけ。
<input id="simple_calendar" name="simple_calendar" type="text" /><br />
<script type="text/javascript">
InputCalendar.createOnLoaded('simple_calendar');
</script>
id属性を付加したテキストフィールドに、「InputCalendar.createOnLoaded」でidを指定するだけで、図のようなカレンダーが表示されます。
さらに、さまざまなカスタマイズを加えることもできるので、次のページなどを参考にして使い込んでみましょう。
MITライセンスで自由に利用でき、日々バージョンアップされているので、是非便利に使ってみましょう。
»スプーキーズラボブログ | シンプルな日時選択ライブラリ protocalendar.js v1.1.1 を公開しました
フォームチェックをスマートに行う『fValidator』
- 2007-11-21 (水)
- ライブラリ
Ajax（JavaScript）で行う代表的なことの一つに「フォームのチェック（バリデート）」があります。
Adobe Spryを初めとした、各種のライブラリでも同じような機能が実装されていますが、なかでも「fValidator」はおすすめです。
次のように利用します。
まずは、配布サイトからファイルをダウンロードしましょう。
»fValidator - An open source(free) unobtrusive javascript tool for easy handling from validation
ページの一番下に「packed version」と「full version」があるので、好きな方をダウンロードします。
また、このライブラリは「mootools」というライブラリを利用しているので、こちらもダウンロードしましょう。
オプションを選んでダウンロードできますが、ここではすべてにチェックを入れてダウンロードした方がよいでしょう。
そしたら、ファイルを適当な場所にコピーして次のようにして取り込みます。
<script type="text/javascript" src="_js/mootools.js"></script>
<script type="text/javascript" src="_js/fValidator.js"></script>
そして、フォームを作成してid属性を付加します。
<form id="form1">
...
</form>
そしたら、<head>要素で次のようなスクリプトを記述して、対象のフォームを指定します。
<script type="text/javascript">
window.onload = function() {
var myValidator = new fValidator('form1');
}
</script>
これで準備完了です。チェックをしたいコントロールにはclass属性を次のようにして追加します。
class="fValidate['required']”
これで、自動的にフォームの必須入力チェックが行われます。
有効になったコントロールは背景が黄色くなります。
もし、未記入のままフォーカスをはずそうとすると・・
このようにコントロールが赤くなって、エラーメッセージが表示されます。正しく記入すると・・
という具合に青く変わります。
この他にも、数値のチェックや電話番号のチェック、メールアドレスやパスワードなどの「確認のためにもう一度記入してください」といったチェックも行うことができます。
ただ、エラーメッセージが英語だったり、色などがあらかじめ決められているため、少し扱いにくいかも知れません。
先ほどダウンロードするときに「full version」というのが選べますが、こちらを選んでダウンロードすると、JavaScriptのコードを見ることができます。非常に分かりやすくかかれているため、メッセージや色などは簡単に変更することができるでしょう。また、よく見ると各種確認も正規表現で行われているので、処理を追加したりするのも簡単にできそうです。
ぜひ、便利に使ってみてください。
»fValidator - An open source(free) unobtrusive javascript tool for easy handling from validation
- Comments: 0
- TrackBack (Close): 0
Home > ライブラリ
- Search
- Feeds
- Meta