GCalendar Holidaysを Datepickerの複数カレンダーに対応させました

匿名さんからのコメントで、jQuery UI Datepickerの複数カレンダー(numberOfMonths)の場合にGCalendar Holidaysで1つ目の月しか祝日が表示されないことを教えてもらったので、複数カレンダーでも祝日が表示されるようにアップデートしました。バージョン0.5.0です。

GoogleカレンダーからJSONPで日本の祝日一覧を取得 – GCalendar Holidays [ゼロと無限の間に]

GCalendar Holidaysの更新は久しぶりです。

それにしても、Googleカレンダーの祝日から今年の春分の日が消えているのはなぜだろう。この間まで表示されてた気がするけどなあ…。

jQuery UIの各テーマの色が人目で分かる便利ツール

jQueryのサブプロジェクトであるjQuery UIは、豊富なテーマとDatepicker等のウィジェットが用意されていて、なかなか便利です。

しかしウィジェットに比べて、class属性の指定だけで簡単にサイトを彩ることが出来て便利なThe jQuery UI CSS Frameworkの存在が意外と知られていない気がします。
そしてその原因は、jQuery UI ThemeRollerで簡単に見た目を確認できる各ウィジェットに比べて、その効果がすぐに分かるページが用意されていないからではないでしょうか。

そこで、各テーマを適用した時にそれぞれのCSSクラスがどんな背景やフォントになるかをひと目で確認できるツール、名付けてThe Colors Viewer for jQuery UI CSS Frameworkを作りました。

これがあれば、着せ替え感覚で気軽にテーマを選んだり、classを変更したりできると思います。ぜひご活用ください!

好きなキーワードで検索したTweetを地図上に表示する「なんでも速報」を作りました

昨日の天気速報に続いて、今度は天気だけでなく好きなキーワードでTwitterからつぶやきを検索し、地図上にマッピングして表示するなんでも速報 Tweets on the Mapを作りました。

中身は天気速報からの流用ですが。

こんなキーワードで検索すると面白いかも...?

 

GCalendar Holidays バージョンアップ(0.4.0)jQuery UI Datepickerの土日に背景色を表示

GoogleカレンダーからJSONPで日本の祝日情報を取得するJavaScriptライブラリのGCalendar Holidaysをバージョンアップしました。バージョン番号は0.4.0です。

大きな変更点は、jQuery UI Datepickerを合わせて使った場合に、Datepikcerの土曜日・日曜日に背景色を塗るようにしたことです。

jQuery UI DatepickerはCSSで土日をまとめて指定するのは簡単(class属性にui-datepicker-week-endがあるので)ですが、土曜日と日曜日を別々のスタイルにしようと思うと少しだけ面倒です。(やり方さえ知ってれば難しくはないのですが。)
そこで、祝日に色を付けるついてに土日にもそれぞれ色を付けるようにしてみました。

GCalHolidays.datepickerStylesにスタイルを設定すれば、表示するスタイルを変更することもできます。
文字色を変更したい場合や、逆に背景色を変更したくない場合などはこれを使ってください。
これに合わせて、これまでコードに埋めていた祝日のスタイル設定もGCalHolidays.datepickerStyles.holidayにセットすることにより外部から変更できるようにしました。

土日祝日の背景色は、Yahho Calendarに比べて濃い目にしてあります。
YUI Calendarに比べてjQuery UI Datepickerは全体的に濃いのでそれに合わせたというのと、jQuery UIはテーマを選択できるのでどのテーマでも無難にするには濃い目の方が都合が良かったためです。
(濃い目だと、背景が薄い感じのテーマでも、背景が黒で文字が白抜きのテーマでもどちらでもある程度なじめるので。)

また、その他の変更点として、Googleカレンダーに登録してあるイベントが月末日でかつ時間が0時0分でない場合、そのイベントが取得できない問題を解消しました。
(id:navさん、ありがとうございます。)

アメリカのAmazon.com新着商品をRSSでチェックできるサービスを作った

New Arrivals RSS Feed Generator

構想3ヶ月、製作10時間。アメリカのAmazon.comの新着アイテム情報をRSSフィードで購読できるサービスを作った。要は、最新作をRSSでお届け!のUS版。

本の場合は著者、映画の場合は監督や俳優(女優)など好きなキーワードで検索できる。

商品のカテゴリは、DVDや本・CDはもちろんのこと、アパレルから携帯まで幅広い。MP3ダウンロードやKindleストアなんてカテゴリもある。

円高な今日この頃、アメリカのAmazon.comで割安な買い物はいかが?

New Arrivals RSS Feed Generator

で、ここからは技術的な話。

今回CSSフレームワークとしてYUI2(Reset・Fonts・Grids・Base)、jQuery UI CSS FramworkとPryn.cssを併用した。YUIとjQuery UIが共存できることが分かったのは大きな収穫。
残念なのはjQuery UIのbuttonがIEで角丸にならないこと。filterを使ってボタンらしく見せることで妥協した。

また、HTMLにはHTML5を使った。いわゆるVideoやCanvas等の「HTML5的」な目立つ使い方はしていないが、単にValidなHTMLを書くというだけでもHTML5はシンプルで使いやすい。
もうこれからはHTML5だけでいいと思う。(携帯も早くHTML5が標準にならないかな。)

しかしAmazon Product Advertising API(かつてAmazon Web Serviceと呼ばれていたものが何回かの改名を経て今はこの名前)の統一性の無さには困った。カテゴリによってsortのパラメータがバラバラ。場合によっては同じsortパラメータでもsort順が正反対。と思ったらReferenceが間違っているだけだったり。実際に動かしてみないと何が正しいかわからない。登録されてるデータもいい加減そうだから、あまり正確なsort順は期待できないかも...。

何はともあれ、New Arrivals RSS Feed Generatorをよろしくお願いします。 🙂

Pryn.js & Pryn.cssバージョンアップ(0.2.5)

読み込むだけでWebページの「おもてなし度」を向上 – Pryn.js & Pryn.css [ゼロと無限の間に]

Pryn.jsの主な変更点

  • HTML5のautofocus属性に対応(autofocus未対応のブラウザでもautoでfocusできる)
  • HTML5のplaceholder属性に対応(placeholder未対応のブラウザでも、テキストボックスに未入力の場合のみメッセージをグレイアウトで表示できる)
  • select要素の選択されているoption要素を簡単に取得できるfunctionを追加(Pryn.getSelected())
  • 四角いBOXをちょっとだけ角丸っぽく見せられるfunctionを追加(Pryn.round())
  • formをsubmitした時のマウスカーソルを「待ってる」感が出るものに変更
  • Stringを拡張してword2regexp()を持たせるのをやめた

Pryn.cssの主な変更点

  • importするYUIのCSSのスキームをスキーム指定無しからhttpsに変更(スキームなしだとIEが2回読み込んでしまう問題を回避するため)
  • テキストボックスの背景色を変えたときに枠線の見た目が変わらないようにした(IE6は非対応)
  • ボタンの見た目のブラウザ間の差異を小さくした。かつ、ボタンを押しやすいように左右のpaddingを広めにした
  • フォントはIE7・IE8はメイリオ、Macはヒラギノ角ゴ、それ以外はブラウザの設定のフォントになるようにした
    (IE6やFirefoxは設定しないとClearTypeが有効にならないので自動でメイリオにするのはやめた。ブラウザの設定等でメイリオにしている人にはFirefox等でもメイリオになる)
  • リンクの色を綺麗な青等にした
  • 角丸(border-radius)のブラウザ別のサンプルを入れた

なんかゴチャゴチャしてきたので、JavaScriptはjQueryベースで書き直したくなってきた。

CSSはjQuery UI CSS Framworkベースで?でもYUIないとクロスブラウザ的に辛いかな...

GCalendar Holidaysバージョンアップ(0.3.0) jQuery UIのDatepickerに対応

GoogleカレンダーからJSONPで日本の祝日一覧を取得 – GCalendar Holidays [ゼロと無限の間に]

フォームへの日付入力補助用カレンダーのjQuery UI Datepickerでも祝日を表示できるようにした。

使い方は、Daitepickerを使うページでGCalendar Holidaysを読み込むだけ。
GCalendar HolidaysでjQuery UI Datepickerに祝日を表示するのサンプルを参照。)

これでYUIとjQuery UIという2大(?)カレンダーに対応。

jQuery UIのDatepikcerってよくできてるよね。テキストボックスへの入力制限とか。親切にいろいろやってくれるのがおせっかいになる時もあるけど...

昔は英語のカレンダーだけだったけど、いつの間にか日本語にも対応してた。Yahho Calendar作る前にこれがあれったら、Yahho Calendarは作らなかったと思う。