タグ

ブックマーク / blog.mach3.jp (4)

  • "Pjax" - Alphabetical Advent Calendar 2013 - Mach3.laBlog

    Pjax とは、pushState + Ajax から作られた言葉で、 History の pushState メソッドでURLを管理しつつ、 コンテンツの遷移を Ajax を使って行う手法です。 おおまかな流れはこのような感じ。 ページ内のリンクをクリックした時にページ遷移を行わずに、 対象のHTMLファイルの内容を Ajax で取得します。 取得に成功したら History.pushState でURLを変更して履歴に追加します。 ファイルの内容から必要なコンテンツ部分を抽出して、コンテンツのコンテナに流し込みます。 ページごと遷移しない為余計な部分の再描画が必要なく、 遷移時に好みのエフェクトをかけられる点などが特徴です。 また、サイト全体に共通にかかるような JavaScript などの処理をページ移動毎に行わなくて済む為、 高速化にも一役かっています。 その実用性についてはこちら

    "Pjax" - Alphabetical Advent Calendar 2013 - Mach3.laBlog
    puzzeljp
    puzzeljp 2013/12/15
  • Googleスプレッドシートを簡易DBとして利用する - PHP+Ajax編 - Mach3.laBlog

    この記事は賞味期限切れです。(更新から1年が経過しています) このお題は以前にも何度か関連記事を書いていますが、 いずれの方法もパフォーマンスがあまり良くなかったり、安定性に問題があるなどしました。 今回はその辺を解決する為のライブラリを考えてみるお話です。 やりたい事 書いてみたもの 基的な使い方 Ajaxで利用する JSONPで利用する その他オプション・機能など 必ず気をつけなければならないこと まとめ : Googleスプレッドシートの活用について 「新しくなったスプレッドシートと簡易データベース化」でGhostsheetが使えなくなったと書きましたが、新スプレッドシートでもAPIが整備された様で、2014年11月20日現在では正常に動作する事を確認しています。但し、スクリーンショット類は古い物なのでご注意ください。(スプレッドシートIDの取得はURLを参照されるのが良いでしょう

    Googleスプレッドシートを簡易DBとして利用する - PHP+Ajax編 - Mach3.laBlog
    puzzeljp
    puzzeljp 2013/06/04
  • 条件分岐に特化したリソースローダー「yepnope.js」を試してみる - Mach3.laBlog

    この記事は賞味期限切れです。(更新から1年が経過しています) 最近ブログ記事のソースコードで見かけるようになった「yepnope.js」を試してみました。 条件分岐によって読むリソースを切り分ける事に特化したライブラリです。 yepnope.jsとは yepnope.js | A Conditional Loader For Your Polyfills! 手書き風のロゴがかわいい。 yepはyes、nopeはnoの口語体で、固く言えば「yesno.js」。 与えた条件がtrueの場合とfalseの場合で読むJS/CSSを切り替えるのが得意な リソースローダーです。 最も簡単なサンプル yepnope("hoge.js"); yepnope("style.css"); 単一ファイルをロードするだけの簡単なサンプルです。 内部的には、ドキュメント内で一番最初のScript要素を探して、 その

    条件分岐に特化したリソースローダー「yepnope.js」を試してみる - Mach3.laBlog
    puzzeljp
    puzzeljp 2011/04/21
  • head要素に読み込むべき唯一のスクリプト「headjs」 - Mach3.laBlog

    この記事は賞味期限切れです。(更新から1年が経過しています) 「Modernizr」や「html5.js」等、 モダンな環境の為の便利なスクリプトは多々ありますが、 「headjs」はそんな彼らの仕事を一気に引き受けてくれる働き者のスクリプトです。 使い方 Head JS :: The only script in your HEAD 謳い文句はhead要素に読み込む唯一のスクリプト ダウンロードして読み込むだけ。おしまい。 <script type="text/javascript" src="head.js"></script> その多彩な機能 環境の判別 CSS3のプロパティの対応状況、画面のサイズ、ブラウザなどの情報を Modernizrと同じ手法でHTML要素のクラスに出力してくれます。 こんな感じに… <html lang="ja" id="test-page" class="

    head要素に読み込むべき唯一のスクリプト「headjs」 - Mach3.laBlog
    puzzeljp
    puzzeljp 2011/03/10
  • 1