jQuery Mobile初めての方にお勧めの記事
jQuery Mobile初めての方にお勧めの記事 「jQuery Mobile スマートフォンサイト デザイン入門」のプロモーションとしてASCII.jpでjQuery Mobileの紹介記事がいくつかアップされています。jQuery Mobileがどういったものかというのがわかりますので興味がある方はご覧になってみてください。 jQuery Mobileでどんなサイトができるの？ jQuery MobileのサイトギャラリとしてはjQuery Mobile Galleryが有名ですが海外のサイトがほとんどです。 そこで「jQuery Mobileを使った国内スマホサイトまとめ」ではjQuery Mobileで作成された国内サイトの事例が21サイト紹介されています。 jQuery Mobileでどうやってサイトをつくるの？ 10分でわかる！ jQuery MobileのキホンではjQue
スマホサイト案件の見積もりについて
スマホサイト案件の見積もりについて 「Android案件の見積り」や「スマホ案件の見積もりについて」を受けて、アプリではなくHTML+CSSでつくるスマホサイト制作の見積もりではまりやすいポイントをまとめています。 HTML+CSS構築ではPCの0.７倍くらいの単価 スマホサイトはPCより小さいのでHTML+CSSの構築コストも安くみます。ただ、CSS3で作ったほうが良いところで画象の切り出しより手間がかかることもあります。ならすとページ単価はPCの0.７倍くらいの感じじゃないでしょうか？ 検証コストは増大 対応端末が多く検証コストはPCと比較して増大します。iPhone3G、iPhone3GS、iPhone4、iPhone4Sの中から2端末ぐらい(iOS4.x系とiOS5系)。Android2.2、Android2.3から売れてる端末で2端末ぐらい検証するのがよいでしょう。(場合によって
CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transitionAnimate」[to-R]
CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」 iPhone / iPadではjQueryのanimateメソッドが重いのでCSS3のアニメーションを使いましょうというのがセオリーになっていますが、CSSでアニメーションって結構めんどくさかったりします。 そこで、jQueryのanimateメソッドと同じような記述をするとCSS3のtransition でアニメーションするjQueryプラグイン「jQuery transitionAnimate」を作成しました。 jQuery.transitionAnimate.js 新しいバージョンを「transitionAnimateをバージョンアップ」からダウンロード可能です $(セレクタ).transitionAnimate(params, duration, easi
iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」
iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」 iPhone/iPadでダブルタップをJavaScriptで実装するで紹介してたダブルタップの実装方法をjQueryプラグインにしてみました。 利用方法 jQuery本体とjquery.event.dblTap.jsをhead要素などで読み込みます。 <script src="jquery-.min.js"></script> <script src="jquery.event.dblTap.js"></script> 後は「dblTap」をbindするとdblTapイベントが実装できます(クリックにも反応するようにしています)。 $("button").bind("dblTap",function(){ alert("duble tap"); }) デモ 初期設定では5
14のjQueryベストプラクティス[to-R]
14のjQueryベストプラクティス 原文:14 Helpful jQuery Tricks, Notes, and Best Practices 良かったので翻訳してみました。かなりの意訳で、上手に訳せてない箇所も多いので詳しくは原文を参照してください。 1.メソッドはjQueryオブジェクトを返す ほとんどのメソッドがjQueryオブジェクトを返すのが重要です。 これにより次のようなメソッドチェーンが可能になっています。 $someDiv .attr('class', 'someClass') .hide() .html('new stuff'); jQueryオブジェクトを返すのがわかっていれば次のように分割して書くことも出来ます。 var someDiv = $('#someDiv'); someDiv.hide(); 次のように一行で書くことも出来ます。 var someDiv
mixiチェックのチェックボタンを設置
mixiチェックのチェックボタンを設置 mixiチェックのチェックボタンを設置してみました。（参考:mixiチェックとは？）FacebookのLike Button(いいねボタン)のmixi版のような感じです。 設置方法 mixi Developer Centerのmixiチェックに設置方法が書かれていますが、設置には「mixi チェックキー」が必要のようです。 mixi チェックキーの取得 チェックキーの取得にはデベロッパー登録が必要で、mixi Developer Centerでデベロッパー登録ができます。 個人の場合はmixiアカウントとメール認証が出来る携帯電話が必要です。 デベロッパー登録が終了したら、mixi Developer Centerの右上のログインリンクからダッシュボードに移動し、mixi プラグインに新規登録からチェックボタンを設置するサイトを登録します。URL許可
jQueryでiPhone/iPadの向きを検出する[to-R]
jQueryでiPhone/iPadの向きを検出する iPhone/iPadで向きの概念が存在し、横向き(landscape)と縦向き(portrait)によって幅が変わるのでデザインやスクリプトを変更することがあります。 そういった場合に利用できるのがメディアクエリーのorientationです。 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> このように記述をすると縦向き(portrait)の場合はportrait.cssを横向き(landscape)の場合はlandscape.cssを読み込むことが出
![jQueryでiPhone/iPadの向きを検出する[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1788fe5c4e0abeec501baa392c032db6a3514abe/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimages%2F20100817_01.jpg)
iPhone/iPadでダブルタップをJavaScriptで実装する
iPhone/iPadでダブルタップをJavaScriptで実装する iPhone/iPadのJavaScriptでは「onclick≒タップ」なのに「ondblclick≠ダブルタップ」となるのでダブルタップを利用したい場合は独自に実装しなくてはいけない。 次のように記述するとjQueryで擬似的にダブルタップを実装することが出来ます。 $("p").data("dblTap",false).click(function(){ if($(this).data("dblTap")){ //ダブルタップ時の命令 console.log("ダブルタップ"); $(this).data("dblTap",false); }else{ $(this).data("dblTap",true); } setTimeout(function(){ $("p").data("dblTap",false);
iPhone/iPadでPCと同じJavaScriptのイベントを実装する
iPhone/iPadでPCと同じJavaScriptのイベントを実装する PC向けに作ったサイトをiPhoneやiPadでも利用できるようにする際に注意しなくてはいけないのがJavaScriptのイベントです。 iPhone/iPadではonmouseoverやonmousedownなどのonMouse系のイベントが利用できず、代わりにontouchstartやontouchmove、ontouchendなどのonTouch系のイベントが用意されています。 使い分けとしてはだいたい次のようになります。 ontouchstart = onmousedown ontouchmove = onmousemove ontouchend ≒onmouseup ですのでjQueryを利用した場合、 var ua =navigator.userAgent; if(ua.indexOf('iPhone'
Web Developerで行うCSSデバッグ
Web Developerで行うCSSデバッグ Web Developerはナトラボさんが公開しているWeb制作をアシストしてくれるFirefoxの拡張機能(アドオン)です。 インストール Firefoxで配布ページにアクセスし「ダウンロード：Webdeveloper for Firefox (399kb)」をクリックすることでインストールが開始されます。 インストール開始時にページ上部に「このサイト(lab.tubonotubo.jp)からはFirefoxにソフトウェアをインストールできない設定になっております。」と表示されますが、右の「許可(A)」ボタンをクリックすることでインストールが可能です。 インストール画面が表示されます。画面下部に『インストール(5)』といったグレーのボタンが表示されますが、すこし待つと『今すぐインストール』に変わります。変わりましたらボタンをクリックしてイン
Google Chrome でAjaxを利用しローカルファイルにアクセスする
Google Chrome でAjaxを利用しローカルファイルにアクセスする Google Chrome5.0.335以降でどうやらローカルファイへのアクセスポリシーが変更されており、AjaxのXMLHttpRequest でローカルのHTMLなどからローカルファイルにアクセスが出来なくなってしまったようです。[5.0.335 Update] ローカルサーバーなどを立てて開発している場合は問題ないんですが、たんなるローカルファイルとして開発しているとやっかいですね。 解決方法としては、Google Chromeの起動オプションに次のコードを追加します。 -allow-file-access-from-files 起動オプションはWindowsですと、アプリのショートカットアイコンを右クリックしてプロパティを選択、リンク先を次のように変更することで付加できます。 C:\Users\...(中
jQueryを利用してDeliciousのブックマーク数を表示する
jQueryを利用してDeliciousのブックマーク数を表示する このブログにjQueryを利用してDeliciousのブックマーク数を表示してみましたので、やり方を紹介しておきます。 DeliciousはjsonpのAPIを公開していますので、同一ドメインの制約を受けずAjaxで情報を取得することが出来ます。 jsonpの情報は次のようなURLで取得できます。 http://feeds.delicious.com/v2/json/urlinfo/[md5ハッシュ化したURL] URLをmd5ハッシュ化しなくてはいけないのですが、それにはmd5.jsを利用して行いました。 $(function(){ var md5hash = MD5_hexhash(location.href); $.ajax({ type: 'GET', dataType: 'jsonp', url: 'http:/
jQueryにおける:first-childと:firstの違い
jQueryにおける:first-childと:firstの違い jQueryには「:first-child」というセレクタと「:first」というセレクタが存在しており、混同されがちですが異なる意味を持っております。 例えば、次のようなHTMLがあるとします。 <ul> <li>list1-1</li> <li>list1-2</li> <li>list1-3</li> <li>list1-4</li> </ul> <ul> <li>list2-1</li> <li>list2-2</li> <li>list2-3</li> <li>list2-4</li> </ul> :first-childで指定できるのは「<li>list1-1</li>」と「<li>list2-1</li>」です。 $("li:first-child").css("color","red"); サンプル 一方:f
jQuery.suggestをIEの日本語に対応
jQuery.suggestをIEの日本語に対応 jQuery.suggestでサジェスト機能を実装しようとしたところIEでの日本語の認識が上手に行きませんでした。 調べてみたところ原因は100行目あたりの以下のコード。 } else if ($input.val().length != prevLength) { if (timeout) clearTimeout(timeout); timeout = setTimeout(suggest, options.delay); prevLength = $input.val().length; } 文字数で変化を取得しているので、たとえば「か」と入力したい場合、最初の「k」を入力した時点でサジェスト機能が動作し、「a」を入力して「か」になった段階では文字数が変わらないのでサジェスト機能が動作しない形になる。 } else if ($inpu
8のjQueryのすごいTIPS
8のjQueryのすごいTIPS 原文：8 awesome JQuery tips and tricks 微妙なTIPSもあるのですが、役に立つのもあるのでご紹介。 target="_blank" のリンクの作成 XHTML 1.0 Strict ではtarget=blank属性が利用できない。そこでjQueryを利用して別ウィンドウを開く方法を紹介しよう。 $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); <a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a> [to-R補足] 実際に利用する際はjavascript部分を$(function(){...})などで包む必要があります。[
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
