MootoolsとPowerToolsでPC、IPadに対応したギャラリーサイトのテンプレートを作成しました。
閲覧するデバイスに最適な形式で表示するようにしています。
もちろんiPadの傾き変更にも対応済みです。
PowerToolsはMootoolsのコアデベロッパーのChristoph Pojerが開発したMootoolsベースのライブラリです。
Mobileデバイス用イベント、クラスユーティリティ、ツリーUIなどのコンポーネントを配布しています。
サイトとソースコード
Mootools Photo Gallery
ソースコード
http://code.google.com/p/mootools-photo-gallery/source/checkout
ライブラリ
ライブラリは下記のサイトから入手できます。
Mootools
PowerTools
PowerToolsの使用したコンポーネント
今回iPadに対応するために、PowerToolsの下記のコンポーネントを使用しました。
Custom-Event
| 名称 | 説明 |
|---|---|
| Element.defineCustomEvent | カスタムイベントを定義できる機能を提供する。 |
Mobile
| 名称 | 説明 |
|---|---|
| Browser.Mobile | Mootools CoreのBrowserにiPad/iPhone/iPodのモバイルデバイスの情報を追加する。 |
| Browser.Features.Touch | Mootools CoreのBrowserにTouchイベントのサポート情報を追加する。 |
| Mouse | Touchイベントに対応していないデバイスの際に、イベントmousedown, mousemove, mouseupをベースにtouchstart, touchmove, touchendイベントをカスタムイベントで提供する。 これによりモバイルデバイスを使用しなくてもPCで動作テストをすることができる。 |
| Touch | touchendイベントをベースにカスタムTouchイベントを提供する。 |
| Click | Touchイベントをサポートしている場合に、ClickイベントをカスタムTouchイベントに置換する。 これによりモバイルデバイスを使用しなくてもPCで動作テストをすることができる。 |
| Pinch | Touchイベントをサポートしている場合に、カスタムPinchイベントを提供する。 |
| Swipe | Touchイベントをサポートしている場合に、カスタムSwipeイベントを提供する。 |
| Touchhold | Touchイベントをサポートしている場合に、カスタムTouchholdイベントを提供する。 |
Interface
| 名称 | 説明 |
|---|---|
| Interface | Javaのようなインターフェース定義機能を提供する。 |
便利だったコンポーネント
通常、iPad対応のサイトを制作する際に、iPadで途中の状態を表示して確認する必要があると思うのですが、
Mobile/Mouse、Mobile/Clickの二つはTouchイベントの対応していないPCでの動作確認ができて非常に便利でした。
iPadの場合、Clickイベントの変わりにTouchイベントを使用してイベントを処理をする必要があり、コードもそのように書く必要がありました。
しかし、Mobile/Clickを使用するとiPadの時だけ、ClickイベントをTouchイベントに置き換えてくれるので、通常のPCサイトのようにコードを書くことができます。
それに、Mobile/MouseでMouseイベントをTouchイベントに置き換えるので、Swipeイベントもマウスをクリックして画面をなぞるだけで実行できます。
試しに、ギャラリーサイトを表示し、ページ上でマウスをクリックしてをなぞって見てください。
写真がイベントに反応して切り替わると思います。
サイトのスクリーンショット
縦表示(portrait)の場合
横表示(landscape)の場合
最後に詳しいドキュメントを作成している途中ですので、完了次第ブログに記事として書きます。
PHPの軽量なフレームワークを使用して、画像をアップロードするだけで最適表示する感じにしてもいいと思っています。
Related Post:
It is a list of related articles.
Trackback:
It is a comment that has been gotten before.
トラックバックを下記のURLに送ってください。
http://sharedhat.com/project/1673/trackback/
Reply:
Please give the comment to this article.