【備忘録】Google DriveのフォルダやファイルのURLが変更される

一般的には特に影響はないですけど、そのURLに対してプログラムでゴニョゴニョしている人には影響があるかもしれませんね。

• ドライブのフォルダとページの URL 構造が変わります（Google Appsチーム公式ブログ）

今回の特徴は

• URLにハッシュマーク（#）が含まれなくなる
• URL構造にHTML5 History APIが採用される

HTML5 History APIってなんだ？

HTML5に含まれるこの技術については見てなかったので概要について調べてみた。

HTML5 History APIで検索してみると、下記が上位にヒットした。

• No 11. Manipulating History for Fun & Profit (Dive Info HMTL5） 

HTML 5のHistory APIについて説明されており、上記の日本語訳や読みやすかったので読んでみた。日本語訳末尾に、原文は HTML5: UP & Running というタイトルで2010年8月にO'Reilly Mediaより出版されているということですね。

で、この日本語訳をざっと見ただけなのですが、下記のような考えなのかなぁと思います。

「A」から「B」ページへ移動する際に、実際には移動せず変更データだけを引っ張ってきて表示する

現状では、移動の際にはサーバーへ再度全データを取りに行くことになっているが、これなら変更情報だけを取りに行くだけでよいので、パフォーマンスがあがるってことか。

この作業は「スクリプト」を仕込んで実装するようで、手法やその具体例も書かれてますね。

どういった時に使うの？

ほとんどデータが変わらないページ構成になっているサイトだと効力が発揮しそうです。
履歴保存されるので、ブラウザの進むや戻るボタンを押しても履歴を保存できるとか。
ページ遷移の伴うデータで使えるみたいですね。もともと履歴保存のAPIみたいですし。

• ページ内スライドショーなど、ページ内の写真等一部データのみ表示変更したい場合
• Ajaxで戻るボタンで前のコンテンツを表示したい場合
   AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた（Web Pixel）

あたりが考えられるかな。。

WordPerssでの実装

WordPressでも「HTML pushState」っていうプラグインがあったみたいですけど、現在２年以上メンテされてませんね。
jquery-pjax + WordPressでスニペット集を作ってみたの「サーバーサイド」
を見ると、それほど難しいことはないのかなぁと思います。

PJAX（PUSHSTATE + AJAX）で遷移するウェブページを作るのブログをみると、実際の具体例がもう少し分かりやすく書かれているかなと思います。
pjax = Pushstate  + Ajax のことらしく、未対応ブラウザも含めてどうするか考える

Googleなどのビックデータを扱う場合には、この処理でかなり負担が軽減されることが予想されますねぇ。Googleドライブも確かにUIは共通なので、使えるのかもしれませんね。

私自身はデザイン設計しないのですが、こういう機能があるということを知っておくのは、たとえば負担軽減しなければならないサイトを構築するときに使えるかもしれないなぁと思いました。

2015年5月18日 @kimipooh