javascript Archive

CSS NITE IN SHIZUOKAでLTしたSenchaTouchについてなんですが、LTに用いたソースが0.9.3用だったのですが、現在の0.9.5のバージョンでは動かない事が判明 orz。なので、補足として0.9.5用にブログに残しておくことにしました。

Sencha Touch とは

• iPhone、アンドロイド向けサイトを作成するためのjavaScriptライブラリ
• javaScriptの値を調整するようにプログラムを組むだけで、iPhoneアプリで見かけるようなエレガントで一貫したデザインのUIが簡単に作成可能。

まぁ、百聞は一見にしかず。下のデモページをスマートフォン、PCの場合はChromeかSafariでご確認ください。

SenchaTouchのデモページ

かちびと.netさんも紹介されています。

iPhone等のWebアプリをHTML5で構築する為のフレームワーク・Sencha Touchを触ってみた – かちびと.net

続きを読む

最近浅く広い、この手のエントリ多いです。Yahoo UIが何気に優秀という噂を聞きつけて、どうしても試してみたくなったので。
Ajaxのおさらいをしていて、ちょうどYahooUIの項目もあったのでサンプルプログラムを改良して、多少実践向けにして晒してみたくなったという事情もあります。
おさらいに使用した本はこちら。

この本、結構おススメ。IEでAjaxする方法を解説⇒次はFireFoxで⇒各ブラウザ毎に処理を振り分け⇒innterHTMLやCSSの説明⇒prototype.js登場といった感じで、Ajaxに必要なことを基礎から追って順に説明してくれるので分かりやすいです。
Yahoo UI Library リファレンスの[■Calendar]⇒[Calendar]も参考にしてます。
で、カスタマイズしたプログラムはこんな感じ。

• カレンダー表示リンクを押すとカレンダーが表示。
• 入力欄が空でリンクを押された場合は当月を表示、日付が入力されていたら対象月を表示。
• カレンダー上で日付をクリックするとyyyy/mm/dd形式で入力欄に日付が入り、カレンダーが閉じる。
• (入力欄の日付エラーチェックはしてません。アルファベットとか入れるとトンデモカレンダーが表示されます(>_<))

では、実際に作ってみましょう。まずはYahooUIをダウンロードしてきます。
http://developer.yahoo.com/yui/

使用するのはbuildフォルダ内のファイル群になります。作成するプログラムと同じフォルダ階層にbuildフォルダを移し、フォルダ名をyuiに変更してください。
肝心のプログラムは、下記の通り。

カレンダー表示

変数がやたら多くて美しくないですなぁ、即興で作ったのでご勘弁を。
バグ等あったら教えてください。