August 20, 2008 9:52 PM
[Willcom 03/MT4.1]iPhoneテンプレートfor MTをカスタムして、Opera Mobile 9.5用に表示を整えてみた。
Category:Movable Type ＞ Movable Type 4.1
Tags:iPhone Movable Type Opera Mobile Willcom 03 テンプレート
iPhoneに対応したMovable Typeテンプレート
「CMSとして使うMovable Typeガイドブック」をyujiro（荒木勇次郎）さんと共著していることでお馴染みのcrema（黒野明子）さんが、"既存のMovable Typeの構成にテンプレートを追加するだけでOK"というiPhone対応テンプレートを公開されています！
「iPhoneテンプレートfor MT」を公開いたします。｜iPhone｜東京Webデザイナー日記リターンズ｜crema design
最初は物珍しさで導入してみたのですが、愛機のWillcom 03(WS020SH)で自ブログを閲覧するのにもうってつけなのではないか！？と思うに至りました。最適化というのは大げさすぎるのですが、Willcom 03のOpera Mobile 9.5でも違和感なく閲覧できるようにこのテンプレートをカスタマイズしてみることにしました。
鍵を握るViewport プロパティはOpera Mobile 9.5もサポートしてるよ！
iPhoneの開発者向け（For Developers）の情報ページを見ている内に、HTMLページ中のMETA要素のViewport(表示領域)プロパティが、iPhone端末での表示に大きく影響を与えてることがわかってきました。そして、Willcom 03に搭載されているOpera MobileでもVer9.5からこのViewportプロパティをサポートしている事を知りました
The viewport meta tag contains information about the preferred settings of the viewport for viewing the HTML page it is contained within. Just like any other meta tag, viewport sits inside the head element of your HTML page?browsers that support it use the information to display the web page more appropriately for that device, while browsers that don't simply ignore it. It was originally created by Apple to improve the way web pages display on the iPhone, but we have added support for it in Opera Mobile 9.5 because it is a good way of optimizing display information for different mobile devices.
viewport プロパティを指定したメタ要素はそのメタ要素を含むHTMLページを見る際のviewport(表示域)の設定についての情報を指定するための要素です。他のメタ要素と同様、viewportプロパティを指定したメタ要素はHTMLページのhead要素に位置します。viewportプロパティをサポートするブラウザは、このプロパティを指定したメタ要素が持つ情報を、そのデバイスにとってWebページをより適切に表示するために使います。viewportプロパティは本来、Apple社によって創られました。iPhoneにおけるWebページの表示のされ方を向上させるためです。しかし、我々はviewportプロパティに対するサポートをOpera Mobile 9.5において開始しました。なぜならこの方法は異なるモバイルデバイスにおける画面の情報をできるだけ能率的に利用するのに最適なものだからです。(かなり不安な訳。突っ込み待ちです。)
Opera Mobile 9.5 - the developer angle - Opera Developer Community
iPhoneテンプレートfor MTのViewportプロパティの設定を調整する
index.mtml(iPhone用トップページ・テンプレート)の12行目を
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />↓
<meta name="viewport" content="width=device-width, user-scalable=no" />
individual.mtml(iPhone用個別ページ・テンプレート)の11行目を
<meta name="viewport" content="width=480, user-scalable=no, maximum-scale=0.6667" />↓
<meta name="viewport" content="width=device-width, user-scalable=no" />
のようにそれぞれ変更します
この変更の意図は、Opera Mobile 9.5でも縦横表示を切り替えた際に、デバイスの横幅に表示が切り替わるようにすることです。SafariとOpera Mobile、それぞれのviewportプロパティの仕様については以下のページを参照してください。
Safari HTML Reference: HTML Extensions: developer.apple.com
Opera Mobile 9.5 - the developer angle - Opera Developer Community
最低限やりたかったこと、画像をjavascriptで任意のサイズに縮小する（追記あり、cssでスマートに行う方法も）
iPhone用個別ページ・テンプレートの26行目～28行目の
<$MTEntryBody$> <$MTEntryMore$>
この部分をdiv要素で囲います。任意のid（僕の場合はentrybodyという値をつけました）を定めてください
そしてiPhone用個別ページ･テンプレートの<head>～</head>内に以下のjavascriptの記述を追加してください
<script language="javascript">
window.onload = function() {
var IMG=document.getElementById('entrybody').getElementsByTagName('img');
for(var i=0;IMG[i];i++)
{
if(IMG[i].width > 280) {
IMG[i].style.width='280px';
IMG[i].style.height='auto';
}
}
}
</script>
このjavascriptの意味は、「id属性がentrybodyの要素の配下のimg要素で、もしwidth(横幅）280pxを超えているものがあったら280pxに縮小する」という意味です。Willcom 03でiPhoneテンプレートfor MTを縦画面表示している際に、画像の横幅がちょうど収まるのが280pxなので。このコードは人力検索はてなでid:Marsさんに教えてもらいました！（あとnowaのsuniti兄さんにもアドバイスを貰いました！）
[追記]CSSでもっと簡単にやっちゃおう
実は難しく考えなくてもCSSの記述を変更するだけでも画像のサイズは制御できました。Opera Mobile 9.5は「max-widthプロパティ」をサポートしているので
#entrybody img {
max-width:280px;
}
この記述をstyle.cssに足してやるだけで、目的は達せられます。
出来たのはコレ！
http://tadateto.net/i/
Willcom 03を持っている方は是非試しに表示させてみてください！なおこのカスタマイズはあくまで自分用にしてみた記録なので、取り入れてみたい！という方は「いいとこどり」をしてみてください。それで僕に改善の余地を教えてください！
改善したい点
- pre要素が溢れて表示されるのを直す
- javascriptの読み込みを速くする
- MTタグを自分用にもう少し練る
 | CMSとして使うMovable Typeガイドブック 黒野 明子,荒木 勇次郎 Amazonで詳しく見る by G-Tools |
関連記事
Tweetbacks
Comment一覧
Leave Your Words
Trackback URL
![[北京五輪/男子サッカー]8月19日は、ブラジルとアルゼンチンが激突！BS1で放送予定（21:50～、シンクロ放送の場合もあり）](http://tadateto.net/icon/older.jpg){kind=icon}
TBありがとうございます！
なーるーほーどー！
こんな方法もあるのですね！
めちゃめちゃ勉強になりました＞＜
画像サイズの件は自分でも気になっていたので、
自分のサイトにも適用しようと思います。
ありがとうございました！
わお！コメントありがとうございます。
元記事に寄せられたTBをざっと見てみたんですが
皆さん色々なカスタマイズをしてますね。
なんだかMovable Typeの醍醐味を感じました！
cremaさん、これからも頑張ってください。