タグ: HTML5

  • ページ内リンクでもpopStateがfireする件。

    最近、popStateとかpushStateとかいい加減に活用しようと思いまして。

    というのも、6月頃にgoogleのアルゴリズム変更があったようで、js有効時はhashChangeにするようなサイトがSEO的に不具合が出てしまったんですよね。トップページは問題無いのですが、下層ページがトラッキングされないとか、色々SEO的に不具合が出たり等、色々トラブルがありまして・・・・ 参考jQuery hashchange event を使ってみた。
    1年前は全然普通に使えたのにねぇ・・・・

    まぁ、そんなこんなで、popState,pushStateを使うことになりました。
    使い方はこの記事が詳しいです。AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた | webOpixel

    で、ページ内リンクも使ったりで色々ごちゃごちゃやっていたのですが、ページ内リンクでもpopStateのイベントが発火してしまうようです。

    B1⇔B2の戻る/進むでページリロードが発生しない(=popstateイベントが送出される)ってところがポイントです。

    1点腑に落ちないのがページ内リンク(ハッシュが付与されるページリロードが発生しないページ履歴更新)でもpopstateイベントが発生するよう。

    [HTML5]History APIめも – l4l

    『同一ページ中でアドレスバーに変更があった場合にイベントが発火する』みたいな解釈って事ですね。なるほど。

    ページ内リンク主体で色々やりまくるようなサイト(http://www.cooper.com/みたいな。popstateとかは使って無いようだけど)を構築する際は色々注意しないといけない見たいですね。

  • HTML5の勉強

    会社で、研修生とアシスタントさん向けのHTML5のお話をしたときの参考資料。

    HTML5についてのおさらい
    http://w3g.jp/blog/studies/html5report
    続HTML5についてのおさらい
    http://w3g.jp/blog/studies/html5report2
    HTML4から変化したHTML5のマークアップ ここが違う!サンプルで見るHTML5(2)
    http://codezine.jp/article/detail/5600

    セクショニングの考え方をメインにやったので、自分のためのメモとして・・・

    (さらに…)