アプリの外側とのやりとりをModelから取り除く - ✘╹◡╹✘
変更前 これはクライアントサイドのアプリケーションの例で、Modelの背後でWeb APIやonpopstate/pushStateを利用しており、Modelが太くなってる様子。 HTTP History | ^ | ^ | | | | v | v | .---- View <-- M o d e l <-- Intent <--. | | `----------------> DOM -------------------' 変更後 Web APIもonpopstate/pushStateもアプリケーションの外側にあり、DOMと同レイヤに存在するものであると位置づける。アプリケーションの外界とのやりとりを行う、ビジネスロジックを含まないアダプタを、ドライバーと呼んで抽象化する。ドライバーには入力を受け取る機能と出力を購読させられる機能がある。いまつくってるアプリでは以下の2つのドライバー
HTML5 History APIで非同期通信時にURLを変更する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアの店長です。 先日記事が出てましたが改めて自己紹介します。 大学卒業後はカフェで仕事をしていたのですが、退職して1年半ほどWebデザイナーをしていました。そして、LIGにはフロントエンドエンジニアとしてジョインすることに。 お察しのとおり、店長というアダ名はカフェで働いていたためです。 今後ともよろしくお願いします。 さて、今回はHTML5のHistory APIについてお話したいと思います。 History APIについて History APIには以前からブラウザの履歴（スタック）を行き来する機能があったのですが、HTML5でさらに以下のような機能が追加されました。 画面を遷移せず、履歴に新たなURLを追加する。 現在のページの履歴を変更する。 ブラウザの戻る・進むボタンをクリックしたときにイベントを検知する。 このような機能がどんな場面で使われてい
pushStateのstateObjでハマった。 - Qiita
どもども、フロントはそんなに得意じゃないのですが、かなりハマったバグだったので一応Qiitaに投稿しておこうとおもいます。 pushStateすると、Chromeが謎の挙動 現象はちょっと説明しにくいので割愛しますが、pushStateするとChromeのブラウザバックの挙動が謎の動きをするようになった。 原因を調査していたら、pushStateのstateObjectの扱いが問題だったことがわかったので共有しておきたいと思います。 pushStateとは 詳しくはリンク先を参照してください。 Manipulating the browser history - Web developer guide | MDN state オブジェクト — state オブジェクトは pushState() によって作成される新しい履歴エントリに関連付けられる JavaScript オブジェクトです。ユ
jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)
Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php on line 77 Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary
Webデザイナーが捗る！知識を増やす最近のトレンドまとめ
作成：2014/09/29 更新：2014/11/01 Webデザイン > Webデザインの流行りを知るために、トレンド感のある配色や洗練されたレイアウトをつくり上げるために、知っておきたいことや方法など。他に、Web制作において今後積極的に挑戦してみたいものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 配色 １．ネオンカラー ２．washed out ３．グラデーション ４．マテリアルデザイン 模様 ５．ジオメトリー 背景 ６．背景色を時間の経過で変化させる ７．スクロールで背景固定、コンテンツだけ動かす 一部に動きをつける ８．シネマグラフ ９．線画 (SVG) １０．グリッチ UI・他 １１．ゴーストボタン １２．プレースホルダー １３．ローディングエフェクト １４．pushState １５．ドロアー レイアウト １６．タイルレイアウ
“#”が付いたAjaxのURLをそのままGoogleがインデックスし始めた？
[対象: 上級] “#”（ハッシュ）が入ったAjaxのURLを、Googleがそのまま検索結果に表示するようになる日が近いうちに来るかもしれません。 #以降も含めたURLをインデックス SEOコンサルタントのJohn Doherty（ジョン・ドハーティ）氏がこんなツイートを投稿していました。 Google is definitely indexing Ajax now, including URLs behind a hash. Game changing. — John Doherty (@dohertyjf) 2014, 8月 23 グーグルは、ハッシュ (#) のあとに付いたURLも含めて、今間違いなくAjaxをインデックスしている。大変革が起きている。 具体的なURLは明かせないと言いつつ、自分が関与していないサイトで何度か目撃したとのことです。 通常のAjaxをインデックスさせる
試して学ぶ Backbone.js入門5 | Remote TestKit
Backbone.jsの最終回の今回は、Backbone.Router（以降、Router）について説明します。 はじめに 前回の「試して学ぶ Backbone.js入門4」 では実際に動くアプリケーションを作成しながらBackbone.Viewについて説明しました。 今回は本連載も最終回となり、Backbone.Router（以降、Router）について説明します。 今回のソースの全体はこちらで確認することができます。 Backbone.Router Backbone.jsが提供するRouterコンポーネントは、クライアント側でのページ遷移のイベントとその後の処理（コールバック関数）をマッピングするルーティング機能を提供します。 ViewがDOMイベントの発生を監視して、対応するメソッドに関連付けるように、Rounterはrouteイベントを監視して、対応するメソッドに関連付けます。 W
AJaxとかhistoryとかの補遺 - 愛と勇気と缶ビール
なんか自分で「hashとpushStateの両対応はこういう風にめんどくさいんです」とか煽っておいてアレだけど、ここ最近は「（スマートフォンに関しては）別に両対応いらなくね？」という気分になっている。 というのは、元々両対応のコードはスマートフォンのブラウザを想定して書いたのだけど、今のスマートフォンでpushStateをサポートしてない端末のシェアってだいぶ少ないとおもう（正確な数値とかしらんけど）。具体的にはiOS3系とかAndroid2.1以下とかなんだけど。だから、対応してないやつは通常遷移！でもう全然構わない。 スマートフォン以外のブラウザはどうなんだっていうと、IE大先生が9になっても実装してないとのことなので、PCだと要るっちゃいるのか。うーん。時代の足を引っ張ってくれる。
Using HTML5 pushstate on angular.js
I am trying to implement html5's pushstate instead of the # navigation used by Angularjs. I have tried searching google for an answer and also tried the angular irc chat room with no luck yet. This is my controllers.js: function PhoneListCtrl($scope, $http) { $http.get('phones/phones.json').success(function(data) { $scope.phones = data; }); } function PhoneDetailCtrl($scope, $routeParams) { $scope
Pjax に挑戦したら思っていた以上に苦労した話 - present
GitHub が採用している、非同期でぬるぬる動く画面遷移、これ pushState と Ajax を組み合わせたテクニックで実現されているんですね。その名も Pjax。 HTML5 の history.pushState を使うからブラウザの履歴にも対応でき、しかも URL がキレイ。Pjax についての詳細な説明は下記のエントリが参考になりました。 pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ Pjax 始まったな。 |i ＼ |.| ﾄ＼ /| ﾄ | ﾄヽ / | | ﾄ | | ﾄヽ＼/| | | ﾄ ／ | | | ト＼≧三ミゞ=イ/ ム彡''´￣￣ ￣ ヽ{__.. / Ｖ´ ﾉ ＿＿ ', ,. =＝ y￣, __､＼＿
pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ
pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る／進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
history.pushState対応をブラウザ判定に使うと危険 - Qiita
preventDefault の検索結果 - 愛と勇気と缶ビール
using AngularJS html5mode with nodeJS and Express
AngularJS - html5Mode - Cannot GET /login
How to config routeProvider and locationProvider in angularJS?
Human verification
https://github.com/oampo/oampo.co.uk/blob/master/server.py
http://blog.yuku-t.com/entry/20110823/1314111340
しんめたる on Twitter: "@hogedigo html5modeじゃダメなので？"