フリック操作が楽しい web ページを作りたい
Mobile Safari や NetFront 3.5 concept などでは、つまはじきスクロールでいい具合に画面を滑らすことができるわけだけど、あのつまはじき操作って正式にはなんていうんだ、と調べたら「フリック」というらしい。いっこ賢くなった。
- ITpro：噂の「iPod touch」のあの操作，何て呼ぶの？ -- フリック， ピンチ，…
まあそのフリックだよ。あれを使ってなんかやりたい。というのは、フリックで縦スクロールしてると楽しいんだよ。2 ボタンマウスにマウスジェスチャーがくっついたときの感覚に近いかも。ちなみにフリックによる横スクロールは楽しくないのかというと…微妙。理由は二つで「片手縦持ちの場合親指でフリックするわけなんだけど、持ったとき親指の可動範囲が横より縦に長い」「（たぶん理由 1 のせいもあって）スモールスクリーンなブラウザでは横の寸法は自動的にリサイズされがち（なのであんま横スクロールする必要はないし、その機会も少ない）」とか。XY 両軸の操作もあるべという話になるけど、スクロールは一軸のほうが気持いい。斜めスクロールは、フリックのベクトルが意図したとおりに決まらない場合きもちよくないし、それに一番気持ち良いフリック操作って、画面を親指で軽く袈裟切りにしたとき一方向にだけ滑る、という体験に集約できる気がする。切っていくかんじなんだよ。あるいは、水の上を漕いで行くかんじでもいいかもしれない。
というわけで二つ考えた。「ゲームごっこ的ななにか」と「巻き物コンテンツ」。
- たぶんおもしろいのは後者、巻き物コンテンツ。
- 縦スクロールさせるだけでおもしろいものってなにかって考えたとき最初におもいついたのが四コマ漫画なんだよね。たぶん四コマ漫画を縦並べに次々読んでいくようなサイト作ればそこそこウケるよ。画面の狭さから「初期表示状態ではオチが見えない」という仕様にも都合よくなってる。でも四コマって問題もあって、いや問題ってほどではないんだけど、「下方向へスクロールさせるのはおもしろいんだけど、たぶん上方向へは巻き戻さない（リプレイ性が低い）」「縦方向にスクロールさせるのに、四コマは短いだろ。もっとなんか 32 コマとかでもいいんじゃないか」とか。
- でふと思ったんだけど、あれよやたら縦長の漫画文化ってなくはなかった。おれ自身は触れてなかったけど「DEATH NOTE」全盛期にデスノコラ文化ってあったじゃない、いまでいう「ニコニコ動画で MAD」みたいなかんじの。あれの iPhone での表示に最適化されたようなまとめサイトとかができるとだいぶ時間潰せそう。…いや今考えてんのは別に世の中がどうとかじゃなくて自分がなにやって遊ぶかという話だった。脱線おわり。
- ある程度の長さを持ち、わりかし中身が詰まってて、巻き戻って確認したりするような楽しみもある、縦巻き物形式に向いている、て考えると年表とかかなーという話になる。とにかく縦一本のフローで説明するなにか。いやそれ普通の web ページでいいじゃんという話にもなるけど、ここは画像でやることによってレイアウトや絵と文のミックス自由度が高いというのがポイント。基本的はプレゼン資料みたいな形で大きく作って、それを縦に全部つないでみて、そこから間を補完してつないでいく、みたいなかんじになるか。「5 分でわかる三国志」みたいなノリで「縦 5000pixel でわかる三国志」とか。インスタントな娯楽に要約感は重要。
- イラスト＆漫画を描ければ、百コマ漫画くらいで源氏物語とかやってもおもろいかもわからんな。そういう巻き物的なイラスト作法ってたぶんあって、pixiv とか見ててもたまに見かける、すげえ縦長のストーリー絵とか、すげえ横長の以下同文とか。ああいうパワーがあれば世の中おもろいんだろうなあ。
- 「実際縦長なものをそのまんま見せる」というのもアリだな。縦シューのステージ解説とか。STG の場合進行方向が上なので、初期位置が最上段になる web ページとは思想が逆なんだけど。まあ「画像ではステージを 180 度反転させておき、読み込みが終わったら EM ONE 自体をひっくりかえして上方向にフリックしていく」という操作で対応可能か。あーいやでもそれ加速度センサで自動的に表示方向を調整してしまう iPhone の場合は無理か。
まあなんにせよ、なんかおもしろそうなものが見付かれば、あとはコツコツ作ってくだけなのでどうにかできそう。で、もう一方のゲームごっこだが、これはなー。巻き物ほど頑張らなくていいけど、それはそれで大変そうなんだよな。やっぱ雰囲気重要なので、グラフィックを多少はがんばらないといけない。とにかくフリック操作で「ゲームごっこをやってるかんじ」になれる題材を考えればいいだけなので、咄嗟に思いつくのは「電車で Go! 的ななにか」「走り幅跳び的ななにか」「東海道五十三次的ななにか」「ミシシッピ河の河下り的ななにか」など。どうやるのかというと、
- background-image に基準となる（正面＝画面下方向を向いている）キャラクタを置く。電車とか旅人とかボートとか。自キャラだな。GIF で簡単なループアニメとかしてるとそれっぽいかも。この画像は fixed で、画面をスクロールさせても位置は動かない。かわりにフリックすることで、背景のほうが上に流れていく（キャラクタが前に進んでいくように見える）という仕組み。
- コースのほうは、普通に img で貼り付けていく。もちろん背景画像である自キャラにかぶさっては仕方ないので、自キャラ軸線上は透過しておく。容量勿体無いので使いまわせるパーツはタイリングするのがよかろう。電車なら一定間隔で駅を並べていくだけでよし。街道なら宿場町。走り幅跳びの場合踏み切り線から先はグリッド並べとくだけで OK。気合入れてフリック一回でスクロールさせ、どこまで距離を伸ばせるか、あるいは何回の操作で駅や宿場にビタ止めできるか、を楽しむ仕組み。
ためしに「一回のフリックで何 pixel くらい滑るのか」を調べてみた。方法は「実際やってみる」。まだゲームごっこに仕立てる必要はないので、グリッドを引いたテスト画像を作って fotolife にアップロード、それを実際に表示させた状態でフリック操作し、目測で大雑把に測定。EM ONE と初代 W-ZERO 3 も iPhone もだいたい一緒で「1,000pixel 前後スクロールする」だった。EM ONE でかなり気合入れてフリックしたら、一回だけ 2,000pixel を越えたが、まあ普通の方法だと「頑張って 1,500 程度」というかんじだろう。iPhone はもっと滑るもんだろうと思っていたのに 1,000pixel 程度だったのが意外。やっぱ「画面が小さいので（指の）助走距離が取れない（EM ONE は縦最大 800pixel ぶん助走できるので、それだけでも相当稼げる）」「iPhone の Mobile Safari は WM の NetFront 3.5 concept よりリフレッシュレートが高いので、そのぶんスクロールが滑らかに見える（遷移が滑らかなだけで、スクロール距離自体はあまり変わらない）」みたいな理由だろうか。あと NetFront 3.5 では background-image がきちんと fixed 表示できることを確認済。
- テスト画像（width 300 x height 6,050）
しかしまあ、たぶんあんまおもしろくないなー。ゲーム「ごっこ」なだけで、実際にゲームじゃないしな。おもしろさを追求したいんだったら、実際に iPhone 用のアプリでも開発したほうがよかろう。じゃあなぜゲームごっこのなにがいいのかというと、巻き物コンテンツと違って、それがコンテンツじゃなくてもいいってあたりのラクさ。巻き物って中身ちゃんと考えなきゃいけないけど、ゲームごっこだったらデータ揃えればとりあえず OK じゃん的な安易な流れで…。いややっぱダメだろ。
- 電車で Go! とか東海道五十三次みたいなんだとビタ止めの判定は必要だろうし、それがないごっこ遊びとして楽しむなら、そこには巻き物的なコンテンツとしての内容が要る（ポイントウンチクみたいなんとかか？）。
- あと位置調整ゲーとして絶対に必要なのは「入力の柔軟性」だが、これがうまいこと働いてるのかどうか微妙。「だいたい 1,000 くらい」とか「ほんのちょびっと 200 弱」とかは出せるんだけど、「中途半端に 500 くらい」とかの入力が、NetFront だとかなりむずい。一応その距離が出ないわけじゃないので、たぶんコツがあるんだろうけど。しかし最低入力単位が 200 pixel 弱ってのも厳しいわけよな。「あと 30 pixel だけ欲しい」みたいなときどうしようもないわけだから。弾いてからタップでビタ止めもアリ、くらいのルールでやらないと。
- 走り幅跳びと考えたのは要するにフリック操作によるハイパーオリンピック的ななにかだが、これも「結局最大幅が決まってる」という時点で競技的な意味はあんまない。ごっこなので記録とかもできないしなー。
…とか考えて残るのは、「なんか占いっぽいやつ」「サイコロのかわりにフリックによる偶然性で進行するすごろく的ななにか」の二つくらいかなー。むずい。
ともかく、フリック操作による web 閲覧というのは、ハイパーリンクが代表するような、瞬間切り替え、文脈またぎ、不連続性の、インターネットではない。前後の連続性のなかで一軸の移動を行うという操作感に合致したなにか、を思いつくことができれば、五分間くらいおもしろがれるものが見付かるかもしれない。
