isao | Branberyheag!! Lab

history.pushStateできれいなURLを

09/13

これは、従来だとhashタグを使って、URLを作っていたんだけど、このメソッドを使うとそれが必要ない。何気に便利。


<code></code>window.history.pushState(DATA, TITLE, [URL]);

これだけを定義しても戻るボタンを押しても戻らないので、popstateのイベントで取得する。


window.addEventListener('popstate', function(event) {

changeContents(location.pathname);

},false );

で取得して、画面遷移用の関数を用意しておくだけ。

文章だけだとイマイチぴーんと来ないので、あとで、検証をしてみることにする。

参考サイト

HTML5のカスタム属性について

09/12

isaohtml5 Tips No Comments

HTML5では、カスタムできる属性がある。

書式は


<h1 data-hoge="hoge">タイトル</h1>

というような感じでかけるようだ。かなり便利でしょ！

参考サイト

http://havelog.ayumusato.com/develop/html/e158-html5-custom-data-attribute.html

属性を作るにはルールがあって、最初「data-」をつけないといけない。

HTML5で作るんだったらぜひ、これを使ってみたい。

WordPressのログインフォームをテンプレートに実装する方法

09/1

isaowordpress Tips No Comments

お仕事用サイトで、クライアント案件だけをWordPressの認証画面を通してから表示したかった。
テンプレート上にログインフォームを付けれるようだったので、実際に試してみた。

More

iPhoneアプリを作ってみる。準備編。

08/24

isaoiPhone No Comments

サーバサイドの言語とかって、どうしてもあのコマンドプロンプトで躓いてしまう。

More

お仕事用サイト「Branberyheag!!.jp」をローンチしました〜

08/14

isaoJavaScript, wordpress JavaScript, jQuery, Tips, 作品 No Comments

お仕事用サイト「Branberyheag!!.jp」を公開。

最初は、自分のポートフォリオサイトを作るつもりなかったのですが、段々、システムが出来上がってくると、いい感じの完成度になってしまって、これを単純に公開するのも勿体ないなと思って、自分用のサイトにしてみた。

技術的な話をするとWordPressでできていて、カテゴリー、ページ、記事というようなシンプルな構成でできあがっている。ただ、ページ遷移は、なくてJQueryのload()を使って、HTMLを呼び出している。戻る、進むボタンを有効にするため、ハッシュタグをURLに組み込んで、あとはプラグインでの処理を行っている。

あとは、スライドショーは、Arrayに画像のパス、サイズをつっこんで、ページおくりしたときに呼び出している。DOMを操作して、消えたり出したりするよりは、処理が速いような気がする。

これを作ったときにいろいろとTipsが溜まったので、ネタを公開していきたい。

これ、フェーズ１なんで、もう少し手直しと機能を追加する予定。

以前やった、クライアント案件で、この技術を使えばもっといいものができたとこれを作りながら思った。いつか修正したいけどね。