タグ

ブックマーク / www.koikikukan.com (9)

  • jQuery.ajax()の非同期通信で実行順序を保証する方法

    jQuery.ajax()の非同期通信で実行順序を保証する方法を紹介します。 具体的には、jQuery.ajax()による非同期通信を連続して実行する場合やjQuery.ajax()メソッドによる非同期通信と他の処理を続けて実行する場合、お互いの実行順序を保証する方法です。 エントリーではjQuery1.8を使って解説します。その関係で、done()メソッドを使っています。done()がサポートされていないバージョンであればsuccess()に読み替えてください。 1.jQuery.ajax()の仕様 「仕様」という表現は適切でないかもしれませんが、例えばjQuery.ajax()による非同期通信を連続実行した場合、実行結果の順序は不定です。 簡単なサンプルとして、for文の中でjQuery.ajax()を実行するコードを用意しました。 <meta charset="utf-8" />

    jQuery.ajax()の非同期通信で実行順序を保証する方法
    sometk
    sometk 2018/11/07
    ここはいつもわかりやすいな
  • HTMLやCSSでのプロトコル表記(http:、https:)の省略について

    HTMLCSSではプロトコル表記(http:、https:)の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記(http:,https:)を省略する。 <!-- Not recommended --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> 1.プロトコ

    sometk
    sometk 2014/04/27
    [//]この問題には悩まされた。もしもhttpとhttps両方あるのであれば、とりあえずhttpsを書いておくほうが保険になるんじゃないのだろうか(納品する側としては)
  • 「ノンプログラマーのためのjQuery生成ツール」作りました

    ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基的な設定とメソッドチェーンまでできるようにしています。 追記:イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。 追記:イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。 ツールチップを表示 やっつけで作ったので中のコードはかなりひどいです。あしからず。 1.使い方 エン

  • jQueryで遅延ロードを汎用的に実現する「ScrollTrigger」プラグイン

    jQueryで遅延ロード(遅延読み込み)を汎用的に実現する「ScrollTrigger」プラグインを紹介します。スクロールで要素が表示されたときに任意の関数を実行できます。 当ブログでも、記事ページ文下にあるソーシャルブックマークボタンとFacebookのLikeBoxの表示にこの仕組みを使っています。 1.目的 Facebookの「いいね!」ボタンなど、最近ソーシャル系のパーツをブログなどに表示している方が少なくないと思います。 ですが、パーツの表示にはJavaScriptを使っているものがほとんどで、そのまま設置するとページのロード時間が遅くなるケースが多く、結果的にページ表示時間に影響することになります。 プラグインは、そういったソーシャル系のJavaScriptのロードを遅延させることができ、初回のロード時間を短縮したいときに効果があります。 2.機能 ページをスクロールして、

  • jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説

    jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。 ThemeRoller こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します(2012/01/11頃まで)。 このエントリーで紹介する情報は2011年12月のものです。 1.ThemeRollerへのアクセス方法と全体レイアウト jQuery Mobileのトップページにある「Themes」をクリック。 ウェルカムメッセージが表示されるので、「Get Rolling」をクリック。 冒頭の編集画面が現れます。左ペインにテーマの各種設定項目、右ペインにプレビュー画面が表示されます。プレビュー画面は複数表示させることができるので出来栄えを見比べるこ

    jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説
    sometk
    sometk 2011/12/12
    念のため、ブクマ。
  • WordPressのTwenty Elevenテーマ解説:メインインデックスのテンプレート (index.php)

    WordPressの勉強も兼ねて、Twenty Elevenテーマの各テンプレートについて解説してみたいと思います。確認バージョンは3.2.1です。 メインインデックスのテンプレート (index.php) Twenty Elevenテーマの「メインインデックスのテンプレート (index.php)」で出力されるページは次のようになります。 テンプレートのソースコードは次のとおりです。 <?php /** * The main template file. * * This is the most generic template file in a WordPress theme * and one of the two required files for a theme (the other being style.css). * It is used to display a pa

    WordPressのTwenty Elevenテーマ解説:メインインデックスのテンプレート (index.php)
  • WordPressでカスタムフィールドを出力する方法のまとめ

    WordPressでカスタムフィールドの出力方法についていろいろ調べてみました。 大丈夫と思いますが、以下に示すサンプルは次のようなループタグの中で使ってください。 <?php if(have_posts()) : while(have_posts()) : the_post(); ?> ここにサンプルコードを挿入 <?php endwhile; endif; ?> 1.値を出力する(キーと値が1:1の場合) キーと値が1:1の場合、値を出力するにはpost_custom()を使います。 <?php echo post_custom($key); ?> 冒頭の画像の「サイズ」の値「3000」を出力するには次のように記述します。 <?php echo post_custom('サイズ'); ?> 2.値を出力する1(キーと値が1:nの場合) WordPressではひとつのキーに複数の値を記述

    WordPressでカスタムフィールドを出力する方法のまとめ
  • サイト全体で未使用のCSSセレクタを見つけるFirefoxアドオン「Dust-Me Selectors」

    不要なCSSセレクタを見つけてくれるFirefoxアドオン「Dust-Me Selectors」を紹介します。 古くからあるアドオンなのでご存知の方も多いかと思います。ページ単位のチェックができる他、サイトマップを使って、サイト全体で使っていないCSSセレクタを見つけてくれる機能もあるようです。 1.インストール 「Dust-Me Selectors」のページにアクセスして、「Continue to Download」のリンクをクリックすればダウンロード画面が表示されます。 Dust-Me Selectors 2011年5月現在では、Firefox4には対応していないようです。Firefox4にインストールしたい場合は「Firefox4で動作しないアドオンを動作させる方法」を試してみてください。 2012年6月現在、最新のFirefoxに対応しています。 2.ページ単位のチェック ページ単

  • IE6/IE7/IE8/IE9の共存まとめ

    Windows 7やWindows VISTAでIE6/IE7/IE8/IE9を共存させる方法です。IE9はまだベータ段階ですが、周辺ツールも対応してきた頃なのでまとめてみました。 公式ブラウザの共存はできませんが、以下に示す方法で各バージョンの表示を確認することができます。最近はIETesterが主流になってきたようなので、そこを踏まえてます。 IETesterを利用+IETesterでIE9を確認できるようにカスタマイズする 「Microsoft Expression Web SuperPreview for Windows Internet Explorer」と「Internet Explorer Platform Preview(「Internet Explorer 9 Platform Preview」)」を併用する IE9のブラウザーモードとドキュメントモードを利用する 以下、

    IE6/IE7/IE8/IE9の共存まとめ
  • 1