サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね！ これは、ajaxで次のページを読み込むのと同時に「HistoryAPI」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり！！SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました！！！ これからWebサービスを作るなら、導入したいですね！！！ これpjaxを使えば簡単に導入できるんです！！！よし！！！ PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、HistoryAPIとajaxを使った非同期の画面遷移を簡単に導入すること
jQuery Mobileでは、ページ遷移の際に自動的にajaxが利用されています。特に何もしなくても遷移先のページをajaxで取得してアニメーションをつけて遷移するというのがjQuery Mobileの大きな特徴のひとつになっています。 しかしながら、巷では、何か問題があるとすぐにこのajaxを無効にするという対処方法が蔓延しているようです。ちなみにajaxを無効にする方法というのは、以下のようなものを指します。 a要素やform要素に data-ajax="false" を指定する。 グローバル設定で $.mobile.ajaxEnabled = false; を設定する。 もちろん、このajaxの挙動を理解した上で、ajaxを無効にするという方法を取ることは何ら問題ないのですが、とにかく困ったらajaxを無効にするということが多いようです。 具体的には以下のようなケースが挙げられるで
pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る／進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax
2011年 04月 06日 重たい画像やFLASHアニメーションを読み込む際に生じる「ストレスを軽減」する為のローディングアニメーション画像を扱っているサイトを5点紹介 カテゴリ： フリー素材 タグ：フリー素材ユーザビリティ作成支援ツール WEBサイトの読み込み中に白い画面だけが出て長時間待たされるとユーザはサイトを閉じてしまいます。これを避けるために、ユーザーを少しでも楽しませるためにフルフラッシュのサイト等で頻繁に使われていたローディング画像を紹介します。 ローディング画像を利用する理由、メリット 最近ではjQueryを利用した画像の読み込み時でも活用されるようになり、ローディング画面はもはや一般的なものになりました。そもそもWEBサイトで待たせるということはユーザーに取って非常にストレスを与えます。1秒の待ちならさほど影響はないかと思いますが、数秒待たされるとユーザーは注意力が散漫し
先日予告したSNBinderのオープンソース化、GitHubに簡単なREADME付きでアップロードしたのでご覧いただきたい。 https://github.com/snakajima/SNBinder SNBinderは、ひと言で言えば「ブラウザー上でView(テンプレート)とData（JSON）を結合してHTML を生成するテンプレートエンジン」である。 ９０年の半ばから急速に広まったインターネット。サーバー側でダイナミックに生成したHTMLページをブラウザーで閲覧するだけ、というシンプルでエレガントなアーキテクチャゆえの成功だ。しかし、ブラウザーの高機能化に伴い、JavaScriptを駆使して使いやすさを向上しようという試みが色々なウェブサイトで行われている。GMail、Google Docs、Facebookなどは良い例だ。 その方向性を究極にまで突き詰めると、サーバー側は（MVC
AJAXコンテンツが増えるにつれて問題になるのは、SEOというか、検索エンジンにどうクローリング、インデックスさせるのか、という点ですよね。 この前JavaScriptの実装を担当した松本クリニックは、AJAXでほぼ全てのページを切り替えるっていうのが最大のポイントなんですけど、これの良いところはWordPressで全てのページを生成してて、JSオンでもオフでも見られるんですね。つまり、クローラはオフのコンテンツを見るような作りにしてあります。 で、こういうのって小規模～中規模なサイトならまだいいと思いますけど、大規模なサイトになってきたりするとページは存在しないでデータだけが存在したりする（ハンドラにリクエストをかけてJSONだけを返してもらって内容を入れ替える、など・・・）わけで、実現が難しくなるんですね。 この問題に対してGoogleが現在公表している方法は、HTML snapsho
2010年08月17日06:45 カテゴリLightweight Languages Ajax -Goodbye, JSONP. Hello, Access-Control-Allow-Origin もうそろそろJSONPとはお別れできるのではないかと思い立ったので。 XMLHttpRequestとその問題 AjaxといえばXHRの愛称で親しまれているXMLHttpRequestですが、これには一つ重大な欠点がありました。 これを発行するDHTMLページのドメインが、Request先のドメインと一致する必要があったのです。いわゆる Same Origin Policy というやつです。おかげでサイトをまたがって使えなかったのです。これではマッシュアップできない。どうしよう。 JSONPとその問題 そこで生まれたのが、JSONPという手法です。 これは、scriptノードを追加した時に、単
現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoader」 2010年04月12日- prettyLoader | Stphane Caron ? No Margin ForErrors 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoader」 通常、ローディング中というと、ボックス要素の中身にローディングするGIFアニメーションなんかがはいっていたりしますが、prettyLoaderはマウス追従型のローディング表示実装用ライブラリです。Windowsでいう砂時計みたいな扱いですが、どんなページにも違和感ない実装が可能で、応用範囲が広そうです。 次のような、比較的古いブラウザにも対応しているようです。 Firefox 2.0+ Safari 3.1.1+ Opera 9+ Internet Explo
今週に入って、Tiny Message に続く二つ目のGoogle App Engine ベースのサービスをリリースした。３日ぐらいで試験的に作った Tiny Message とは異なり、今回のものは、丸二ヶ月間寝る間も惜しんで作った力作である。 米国向けのサービスな上に招待制のSNSなので、ここではサービスそのものは公開しないが、いくつかこだわって作った部分があるので、それについて語ってみようかと思う。 1. 対象となるユーザーの絞り込み FacebookやTwitterのような巨人が存在している中で、それにまっこうから対抗するようなソシアル・ネットワーク・サービスを作ったところで無謀なだけである。そこで、逆に対象にするユーザー層を究極にまで絞り込んで、彼らのライススタイルに徹底的にマッチしたサービスを作ることにより差別化をはかる、という戦略を選択。対象は「LAに住む２０〜３０代の社交
サキとは彼女の自宅近く、湘南台駅前のスーパーマーケットで待ち合わせをした。彼女は自転車で後から追いつくと言い、僕は大きなコインパーキングへ車を停めた。煙草を一本吸ってからスーパーマーケットへ向かうと、ひっきりなしに主婦的な女性かおばあちゃんが入り口を出たり入ったりしていた。時刻は午後5時になる。時計から目を上げると、待たせちゃったわねと大して悪びれてない様子でサキが手ぶらでやってきた。 お礼に料理を作るとはいえ、サキの家には食材が十分足りていないらしく、こうしてスーパーマーケットに寄ることになった。サキは野菜コーナーから精肉コーナーまで、まるで優秀なカーナビに導かれるように無駄なく点検していった。欲しい食材があると、2秒間程度それらを凝視し、一度手に取ったじゃがいもやら豚肉やらを迷うことなく僕が持っているカゴに放り込んだ。最後にアルコール飲料が冷やされている棚の前へ行くと、私が飲むからとチ
またまた登場！凄くリッチなWEBアプリ作成フレームワーク「Ajax.org Platform」 2009年12月16日- またまた登場！凄くリッチなWEBアプリ作成フレームワーク「Ajax.org Platform」。 Ext.js ばりにきれいなUIと多機能さで今後が期待されるJSフレームワークです。 次のような綺麗でリッチなインターネットアプリケーションが作れます。 デモページには多数のコンポーネントが掲載されていて色々できることがわかります。GoogleMapや、各種UIパーツの他、３Dグラフなんかも面白いです。JavaScript でクネクネ動く3Dグラフです。 以下のページを参照してください。 Ajax.org - The real-time collaborative application platform
2009年11月5日，Googleは自社サービス製品であるGmail，GoogleMaps，Google Docsなどの開発に使用しているJavaScriptアプリ開発ツール群「Google Closure Tools」を一般公開しました。 "Closure"は一般的に，閉鎖や閉店といった意味で使われます。ツールの命名としては少しネガティブなニュアンスを感じますが，Google Closure Toolsの場合は，終結といった意味で，開発プロジェクトにおける最終ステップの仕上げ用ツール。すなわち“栓”という意味で中身があふれ出さないようにキッチリ閉めておくものといった意味合いから命名されているようです。 Ultimate（究極）に近い意味でGoogleの自信の表れと受け取った方がいいかもしれません。Googleで新規公開になったプロジェクトとしては珍しく，ベータ版の表記もありません（Go
マイクロソフトのAjaxに関する動きが目立ってきました。以前のエントリで紹介したように、9月にはAjaxによるWebアプリケーションを最適化して起動速度を改善するツール「Doloto」の配布を開始。 Ajaxの起動を高速化するツール「Doloto」、マイクロソフトが発表 － Publickey 10月には、Ajaxのライブラリとして最も人気のあるjQueryのマイクロソフト自身による配布を開始すると同時に、Ajaxライブラリを高速に配布するためコンテンツデリバリネットワーク、「Microsoft Ajax CDN」を立ち上げています。 マイクロソフトも配布を開始したjQuery、今後のバージョンでは大幅な性能向上とモバイル対応へ － Publickey AnnouncingMicrosoft Ajax Library (Preview 6) and theMicrosoft Ajax
HTML5 Web Workersを超簡単に使えるようにするフレームワーク、AlexServiceを公開しました。 AlexServiceは、普通のJavaScript関数定義と呼び出しを行うだけで、Web Workersを使用したバックグラウンド処理を行うことができるようになります。試作して使ってみたところ、「これは使える」と言う手応えを得ましたので、機能を追加してテストも割としっかりやり、公開するに至りました。現在のバージョンを0.5としたのは、割と完成度高いよ、と言う気持ちの現れです。 AlexServiceとは何か、を説明する前に、そもそもWeb Workersについてご存じない方も多いと思うので、簡単に説明します。 Web Workersは、JavaScriptでバックグラウンド処理を実現するための非常にシンプルで強力なAPIです。 バックグラウンドで動作するスレッド（ワーカスレ
フォトギャラリを作ろうとしたときの参考になりそうなのがありました。 興味のある人は是非一度触ってみるといいかもしれない。 色々なFlashフォトギャラリー Make Your Visitors Be AllEyesより 色々ありますが、とにかくお勧めが以下。 SERGEY TYUKANOV ARTWORKS これはすごい。 訪問すると目の前に扉があり、中へはいっていく。 中は美術館となっており、展示絵はマウスポインタを乗せると拡大し、絵を見て回れる。 ここまでは確かによさげだけと普通。 これから下にある紙をクリックすると・・・。 びゅーっと中を歩き出す。 仕組みとしては触ればわかりますが、単純な仕掛け。 ただ、こうして美術館の中をあるくような臨場感は、とても素晴らしい。 上記で紹介した記事には、さらにFlashのCMSについて書かれている。 実際にダウンロードして見た。 ものすごく簡単な
ASimple jQuery StylesheetSwitcher 5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプルが公開。 ページで、小・中・大のように文字サイズを変えられるようにしておくと便利ですね。 asahi.com の導入例 実装方法が、微妙に面倒という場合もこのサンプルを使えば簡単に実装できる筈です。 文字サイズに限らず、CSSを丸ごと変えてしまえるので、スタイルを変更して保存ということも簡単に出来ます。 デモページHTMLは、次のように、href は # ですが、rel属性に付け替えたいcssを指定しておきます。 <ul id="nav"> <li><a href="#" rel="/path/to/style1.css">DefaultCSS</a></li> <li><a href="#" rel="/path/to/style2.css">Larg
「DESIGN LABEL」で、JSでモーダルウィンドウやダイアログボックスを実装する方法がたくさん紹介されています。 ざっといくつかご紹介。 » Prototype Window prototypeフレームワークをベースにしたjavascript »Simple Modal いろいろなタイプのモーダルダイアログボックスを作るjQueryベースのプラグイン » Moodalbox Ajaxで外部コンテンツを表示する。mootoolsを使用 » jqModal マルチモーダルダイアログ（モーダルの中にモーダル）が可能なjQueryプラグイン » Lightwindowpdf、flash、QuickTimeなどのファイルをJSダイアログボックスで開ける » Facebox 画像やdiv、ページ全体を表示するためのFacebookスタイルのlightbox クールなインターフェースが揃ってい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
