Subscribed unsubscribe Subscribe Subscribe

Kengo's blog

Technical articles about original projects, JVM, Static Analysis and JavaScript.

I've remade my personal site by jQuery mobile (updated)

javascript

My site, hosted by GitHub Pages, is remade by jQuery mobile. It's my 1st case to use this framework, but it's easy for me to learn because it's similar to jQTouch. So I've finished it in only 3 hours.
GitHub Pagesで運営している個人用のサイトをjQuery mobileで書き換えました。jQuery mobileを使うのは初めてだったのですが、jQTouchに似ていたので学習は容易でした。所要時間約3時間。

why I wrote it in English

I wrote it in English because the greater part of the engineers around me speaks it, not Japanese. I'll shift this blog to English or same reason. Adapting to the environment is important to use the web as a communication tool.
最近は身近に日本人技術者がおらず、むしろ英語ユーザーの方が圧倒的に多いため、サイトを全面的に英語化しました。同じ理由でこのブログも徐々に英語化していくつもりです。コミュニケーション手段としてwebを使う以上、環境変化への適応はまぁ自然なことだろうと判断しています。

points to use jQuery mobile

put navbar in header

I put navbar in footer at first, but it cause bad UX because jumping to the top of the page occurred when buttons are clicked. So I put it in header at last.
Navbar in header looks inconvenience to click at finished to read page, but it's no problem because the iPhone has a feature to scroll fast to top I think.
最初はナビゲーションバーをフッターに入れたのですが、ボタンをクリックするたびにページ上端にジャンプしてしまうのが残念だったのでヘッダーに入れることにしました。「ページを読み終えて次のページに遷移する」シナリオでは若干不便な配置かなとも思いましたが、iPhoneにはトップに高速スクロールする機能があるので問題にならないかと。

highlighting the button for current page

Highlighting the button for current page is good UI because it enables user knows 'where am I', I think. But jQuery mobile doesn't handle navigation button's state, so we should handle it by own. I used 'ui-btn-active' class to highlight buttons.
今いるページがどこなのかを明示するために、今いるページのボタンをハイライト表示するのが有効だと考えています。jQuery mobileにはこうした機能がまだなさそうなので、自分でコードを書いてこれを実現しました。'ui-btn-active'クラスでボタンをハイライト表示できます。

$(document).bind('pagebeforechange', function (e, data) {
	$('a').removeClass('ui-btn-active')
			.filter('[href="#' + data.toPage[0].id + '"]').addClass('ui-btn-active');
});