Tech Sample

iPhoneの場合に水平方向へスクロールせず、垂直方向のみスクロールします。
次の設定を行います。

画面横サイズを320px(scala=1の場合)にする。
次のメタタグを設定する。
<meta name="viewport" content = "width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" //>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

このMetaタグを使用すると、ホーム画面にアイコンを置いた場合に画面の上部がステイタスバーに隠れてしまいます。onloadなどで次のJavaScriptを実行すると隠れる部分がないように位置調整することができます。
var clientHeight
= document.documentElement.clientHeight;
if (isIOS && clientHeight < 460) {
window.scrollTo(0,0);
}

詳しくはブログをご覧ください。

This page scrolled only vertically on iPhone, and is locked horizontally.
You can accomplish it by the following settings:

Set the screen width to 320px.(in case of scale=1)
Add the following meta tags:
<meta name="viewport" content = "width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" //>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

The above meta tags cause a top portion of page hidden by the status bar, when the icon is put on Home Screen, so that you may want to adjust the layout to avoid it, by using the following JavaScript in onload event:
var clientHeight
= document.documentElement.clientHeight;
if (isIOS && clientHeight < 460) {
window.scrollTo(0,0);
}

...............................
..............................
.............................
............................
..........................
.........................
........................
.......................
......................
.....................
....................
...................
..................
.................
................
...............
..............
.............
............
...........
..........
.........
........
.......
......
.....
....
...
..
.

iPhoneの場合に画面固定となり、スクロールしません。
水平固定画面に加え、このdivに次の設定行い、moveイベントを無効にします。

<div ontouchmove="event.preventDefault()">

詳しくはブログをご覧ください。

This page is fixed for either direction on iPhone. It doesn't scroll at all.
The following setting is required for the DIV tag of this page to invalidate the move event, in addition to the settings of "Fixed Horizontally".
<div ontouchmove="event.preventDefault()">

iOSのSwipe動作をJavaScriptで実装したものです。iOSではSwipe、デスクトップの場合はマウスでドラッグすると削除ボタンが表示されます。
削除ボタンクリックで行が削除されます。リロードすると再度表示されます。
IEでは動作不良です。
詳しくはブログをご覧ください。

This page emulates the swipe motion on iOS. By swiping (or mouse dragging on desktop), a delete button appears. By tapping (or clicking) it, the line will be deleted. All lines will be displayed when this page is reloaded.
It does not work on IE.

360°のパノラマ写真をスワイプで回転します。水平方向のみの対応です。デスクトップではマウスドラッグで回転します。

This is a 360°panorama photo which rotates by swiping action (or mouse drag on desktop). Only for horizontal direcion.

Gyroと連動したパノラマ写真はこちらへ

Visit another panorama site with gyro movement.

垂直方向回転 Virtical Rotation

One

Two

Three

Four

スワイプ（またはマウスドラッグ）で直方体が回転します。
CSS3のtransform、transitionを使用しています。
詳しくはブログをご覧ください。

The quadratic prism rotates by swipe or mouse drag.

One

Two

Three

Four

Five

Six

Seven

Eight

スワイプ（またはマウスドラッグ）で八角柱が回転します。
3D 四面のモデリングを変更したものです。
詳しくはブログをご覧ください。

The octagonal prism rotates by swipe or mouse drag.
It's a variation of 3D Four Faces with modification of moddeling.

One

Two

Three

Four

Five

Six

スワイプ（またはマウスドラッグ）で立方体が回転します。

The cube rotates by swipe or mouse drag.