iPhoneサイトを「writing-mode」で縦書きにして「似非電子書籍化」してみた。
Vertical site to your smartphone-site, using CSS3 writing-mode.
like a "Fake e-Books"
http://blog.imagedrive.jp/web/research/2011/01/14/css3-chgov-writing-mode
▲ここ見て最近知ったんですけど、CSSのプロパティに「writing-mode」なるものがあるらしいです。
( ´･∀･`)へｰ…そうなんだ…。
スルーしようと思っていたんですが、もともとDTP（というか雑誌編集業）の業界にいて、そのときの知り合いが「いや、これからは電子書籍だよ！」みたいなことを言ってたんで、チャレンジしてみることにしました。
自分でゴリゴリやろうかと思ったのですが、なんかサンプルないかな～と探していたら、くらげだらけさんのページにそれっぽいのがあったんで、(勝手に)流用することにしました。
いや、ほんとごめんなさい。
自分でやればできるんですょ、ホント。
だってめんどくさ(ry
…。
おかげさまで、サクっと３時間くらいで出来ちゃいました。
(ﾟ∀ﾟ)ｳﾎｰｲ！
いろいろやってみたんだけど、iPhoneを横にしたときに見づらい（つか、縦書きなんで当然）ので、以下のJSコードを入れて、アラートを出すようにしました。
なんか、「縦画面固定」はできないらしいです。
window.onorientationchange = function () {
switch ( window.orientation ) {
case 0:
break;
case 90:
alert('横向きには対応していません');
break;
case -90:
alert('横向きには対応していません');
break;
}
}画面左下の矢印を押したときに、一番最初（一番右側）にスルスルとアニメーションで戻るようにしたかったので（くらげだらけさんのサンプルはjQueryとか使ってなかったので、アニメーションなしです）、以下のようにコードを変更。
function autoScroll (e){
document.getElementById(e).scrollLeft +=document.getElementById(e).scrollWidth;
}
$(document).ready(function(){
autoScroll('auto-scroll');
$(".left").click(function(){
var area = $(".content");
var HashOffset = area.width();
$('#auto-scroll').animate({scrollLeft: HashOffset},2000);
return false;
});
}); とりあえず、CDNでjQuery-mobileも読み込みです。
<script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
あ、そだ。
jQuery-MobileはCSSも忘れずに読み込んでね。
僕の場合、くらげだらけさんのように「全画面表示」を使わないUIがよかったので、そこいらへんのコードは削除です。
というより、後々ネイティブアプリで読み込むスタイルにしようとか、広告枠を確保しようとかそういうことを考えてたらめんどくさくなって、いっそのこと外しちゃって最初から全画面に近い感じにしよう…ってことになりました。
もちろん、CSSの方もいらない部分はお掃除しました。
<header>部分もいらないので削除です。
あとは、jQuery-Mobileのお約束なのでメインコンテンツ部分を
<div data-role="page" id="page">～</div>
で囲んで終了。
ネイティブアプリにしたらいらないかな～とは思ったけど、ナビゲーションバーだけは付けておきました。
（Web単体で動かすことも想定しつつ…）
▼で、出来上がったのがこれです。iPhoneの人だけ見てね。
キャプチャはこれです…。
休みの間に、ジュンク堂で長時間立ち読みを行なった結果、Webを読み込んできて表示するくらいのかんたんなアプリなら、FLASHで作れるってことが分かったのでアプリ化してみようと思います。
なんか、MCに読み込んできて表示するだけみたいなんで、わりと簡単そうです。
が、その前にMAC版のAdobe FLASHを入手だなぁ…。
iMac (Late 2006)
MacBook(13-inch, Mid 2010)
MacBook-Air(13-inch, Mid 2011）
と、使っているPCはMACなのに、ほとんどOSXを使わずにBootCampでWIN7なので、AdobeソフトもWin版しかない…。
ｱﾎﾞｰﾝ(´・ｪ・｀)
何かと使う機会も多いし、買うか…。
アカデミック版を。