jQuery Mobileでサクッと作るスマートフォン向けWebアプリの基本 ─ ＠IT
大日本印刷 森川 裕美 2011/9/29 jQueryMobileを使って、スマートフォン向けのWebアプリケーションを手軽に作成する方法をおばかアプリを例に紹介します おばかアプリの開発にjQuery Mobileを使ってみました 先月8月20日に開催されました「第5回おばかアプリ選手権（見よ！ コレジャナーイアプリの数々を！）」にて、jQuery MobileとHTML5の要素を使用した、iPhoneのMobile Safariで動作するミニアプリiBooNを紹介させていただきました。本記事では、jQueryMobileを使って、お手軽にスマートフォン向けのWebアプリケーションを作成する方法をiBooNを例に紹介します。 iBooNは、iPhoneの傾きに応じて車の音が変わるミニアプリです。まず、Color Select画面から好きな色の車を選びます。ミニカーの画像が表示された画面
JavaScript 動画: 遊びのページ： GIF、アニメ
当ページではごく普通で平易な javascript を使用しています。 （ケータイ電話 は javascript がOFFとなっているため十分な閲覧ができません。） ＜ＧＩＦ画像と javascript アニメ＞ アニメーションは普通 FLASH で作成されることが多く それで十分なのですが、 簡単なものは javascript でも出来ます。 FLASH でうまく出来ないことを javascript でおこなうことが多いようです。 例えば どんな背景にもうまくとけこめる 透過ＧＩＦ でアニメーションを作成し任意の場所で動かすなどです。 この場合 ＧＩＦアニメとJavascriptアニメ とのダブルアニメーションになりますね。 だた javascript の主な役割は アニメを作ることだけではなく WEBページを生き生きしたものにする他の多くの役割をもになっています。 ＜ＧＩＦアニメー
5記事連続で1000ブクマを目指した結果とその方法
密かに私が進めていた計画があります。 それが、5記事連続1000ブクマ達成と言う目標。 ブログを開始してから1年くらいたってから、一度でいいからやってみたいなぁと考えてはや3年。 1000ブクマいったらとりあえず狙ってみようかな程度で考えてきました。 今回、11月17日のjQueryのまとめで1000ブクマ達成した為、このチャレンジを密かに開始したのです。 結果は4記事連続でストップ とても悔しくて残念でしたがこれも結果です。 そもそも1000ブクマを量産する事自体、記事の内容が縛られる為、ブロガーとしてはかなり面白くないというかつらいものなんだなぁと感じました。 今回の5記事は以下です。 jQueryプラグインのベストトレンド総まとめ2010 webデザインのセンスを磨く『○○系のwebデザインまとめ』の総まとめ 人生を素敵に変える今年1年の究極のライフハック記事まとめ あなたの生活を確
かなりクールにデザインされたPhotoshop用のボタンテンプレート集:phpspot開発日誌
Best of Free Clean PSD Buttons ready for web2.0 | djavupixel.com かなりクールにデザインされたPhotoshop用のボタンテンプレート集。 CSS3でかなりボタンをデザインできるようになったとはいえ、そこまでやるなら画像にしちゃったほうが、という場面も多くあります。 Photoshop用のボタンテンプレートが色々まとまっていたのでデザインの際の参考にできそうです。 36 Free High Quality Web Buttons Different buttons and states with sliders and drop downs by James McDonald Download 60 glossy web buttons in PSD & PNG Grey Button with hover by Ignaci
[jQuery]TwitterAPIから読み込んだつぶやきをスクロール – twiline.jsつぶやきが流れるバナーを簡単に作成できるjQueryプラグイン | レポート | 日本電子工藝社
つぶやきが流れるバナーを簡単に作成できるjQueryプラグイン Twitterのつぶやきをヘッドラインニュースとして流したり、ブログパーツのように表示したい時、jQueryで簡単にマーキー風（文字が流れる）表示ができるプラグインを作成しました。特定のユーザーのつぶやきを流したい場合以外に、キーワードで検索してヒットしたつぶやきを流すこともできます。（※個人利用・商用利用を問わず自由に改変してご利用いただけますが、ライセンスをご理解いただき、自己責任の上でご使用ください。） 動作サンプル 対応 InternetExplorer6～8、Firefox3～、Chrome2～、Safari3～ jQuery1.3.2、1.4.2で動作確認済み。 設置方法（特定のユーザーのつぶやきを表示する） 「#twiline」は、プラグインを適用したいdivのidに置き換えてください。「search」の箇所（サ
jQueryで魅せる動きのテクニック「10 jQuery Transition Effects: Moving Elements with Style」
TOP > WebService > jQueryで魅せる動きのテクニック「10 jQuery Transition Effects: Moving Elements with Style」 先日「最新の使えるjQueryプラグイン集「25 Amazing and Fresh jQuery Plugins」」と言う記事で、最新の機能のjQueryプラグインをまとめたエントリーを紹介致しましたが、今日紹介するのはjQueryで動きが特徴的な魅せる動きを集めたエントリー「10 jQuery Transition Effects: Moving Elements with Style | DevSnippets」を紹介したいと思います。 Fluid Navigation – How to create an informative menu-bar with jQuery & CSS ス
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
Google Map Apiを試してみた(ついでにjQueryのプラグイン化)
先日、Google Mapを利用する機会があったのですが、最初は単に地図があればいいということだけだったようなので、Google MapのAPIとかを利用せずに、地図の右上にあるリンクの作成ででてくるiflameを表示させようと思っていた。 しかし、APIの利用方法ってどうだったかなー？なんて思ったので、以前利用したことがあったのですが、再度調べてみることに。 今はバージョンが３も出ているのですが、それは利用したことがなかったので、それの利用方法メモです。 Google Map APIの利用 バージョン３からはAPIキーが不要とのこと。利用が楽になってますね。 まずはMapを利用するためのライブラリの読み込み <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></scri
jQueryを使ってCSSを補強するテクニック15 – creamu
Web Developer Plusで、jQueryを使ってCSSを補強するテクニックが紹介されています。 ざっといくつかご紹介。 jQueryでカラムの高さを統一する equalHeights pluginを使って、一行でカラムの高さを同じにする 入力中のフォームをハイライトする highlighting the label along with the selected input fieldを使って、フォームのユーザビリティーを上げるテクニック 角丸 jQuery Curvy Cornersで角丸を実装する メニューの背景をアニメーションさせる メニューにマウスオーバーしたときに、一瞬でhover画像に切り替えるのではなく、ふわ〜っとアニメーションして切り替えるテクニック。例：Create an Attractive jQuery Menu with Fade In and Fade
サイトを魅力的にするjQuery10+ – creamu
cats who codeで、サイトを魅力的にするjQueryがいろいろ紹介されています。 いくつかご紹介。 Easy Display Switch with CSS and jQuery ボタンクリックでリスト表示とカラム表示を切り替えられる Turn any webform into a powerful wizard with jQuery 長くて退屈なフォームを、ウィザード形式でStep1〜3のように分けられる Beautiful tag clouds with jQuery and flir タグクラウドをかっこよく見せてくれる Twitter-like login panel using jQuery Twitterライクなログインパネル。↑のキャプチャはこちら Disappearing “Scroll to top” link with jQuery and CSS ページが
利用しやすいjQueryで作るツールチップを集めた「25 Useful jQuery Tooltip Plugins and Tutorials」
TOP > WebDesign > 利用しやすいjQueryで作るツールチップを集めた「25 Useful jQuery Tooltip Plugins and Tutorials」 マウスオーバーしたときに出現するツールチップ、その対象物の内容を説明したり、補足的なデータを表示したりとユーザーインターフェイスを向上させてくれるテクニックの一つです。今日紹介するのは利用しやすいjQueryで作るツールチップを集めた「25 Useful jQuery Tooltip Plugins and Tutorials」です。 qTip – The jQuery Tooltip Plugin 吹き出しタイプやフェードタイプなど様々なもの集められていますが、今回はそのなかからいくつか気になったツールチップをピックアップして紹介したいと思います。 詳しくは以下 ■Prototip 2 – Crea
一日で学ぶ jQuery(ラボブログ)
スパイスラボ神部です。 OpenSocial アプリの開発を効率化するために、jOpenSocial か opensocial-jquery のどちらかを使いたいのですが、そのためにはまず jQuery について学ばないと行けないようなので、jQuery についてざっと調べてみました。 -AJAXが好きだ！ - Favorites! Write less, Do more -jQuery: The Write Less, Do More, JavaScript Library まずは公式。 リファレンス -jQuery 1.3.2 日本語リファレンス 参考になりそうなリソース いろんな記事を見ると、とりあえずは jQuery を使うと、構造化された状態でリッチアプリケーションが組めるという部分が強調されている記事が多いような気がします。「jQuery + AJAX で RIA な UI
jQuery版script.aculo.usの「Interface elements」がすごい:phpspot開発日誌
Interface elements for jQuery - Real examples of Interface elements jQuery版script.aculo.usの「Interface elements」。 script.aculo.us 同様、エフェクト、ドラッグ＆ドロップ、アニメーション、スライダー、オートコンプリートのほか、 ３Dアニメーション、アイテム選択用UI、テキストエリアリサイズ、ツールチップヒント、MacOS X の Dock 風UI を実装するためのライブラリが同梱されています。 詳しくは以下のデモを使ってみればそのすごさが分かるはず。 Effects [opens in new window] (combined showcase) Test new animate function [opens in new window] Use new func
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作関連のチートシートをまとめたポータルサイト -Quickly Code
css-lecture.com
IDEA * IDEA