iPod touch/iPhone向けブログテンプレート
2010.02.02
こんにちは、okadaです。
ちまたで話題のブログ「農場日記」にiPhone向けのページを作ってみました。
cremaさんの「iPhoneテンプレートfor MT」にヒントを得て作ったものです。
（「iPhoneテンプレートfor MT」をSOY CMS向けに改造したものは社長日記（かも日記）で見られます。）
twitterでつぶやいてから十日以上経つのですが、テンプレートパックにして公開するのが面倒ちょっと時間がかかりそうなので貼り付けちゃいます。
- 諸注意
-
- PHP使いまくりなのでテンプレートでのPHP使用を許可していないと使えません。
- iUIライブラリが必要です。各自ダウンロードしてiui.cssとiui.jsを設置してください。
- ブログの設定で記事の表示件数を、フィード出力のみ20件（recent_entryの出力件数）で他は10件にしてください。
テンプレートは「続き」でどうぞ。
トップページのテンプレート
<?php if(!$page["prev_link_visible"]){ //トップページのみヘッダーを表示する
?><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charsetUTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>TITLE</title>
<!-- 以下のiuiのCSSとJavaScriptへのパスはご利用の環境に合わせて変更してください -->
<link rel="stylesheet" href="/i/iui/iui.css" type="text/css" />
<script type="application/x-javascript" src="/i/iui/iui.js"></script>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="robots" content="noindex" />
<style type="text/css">.entry .nav{</style>
clear: both;
}
.entry .nav p.prev_entry{
float: left;
}
.entry .nav p.next_entry{
float: right;
}
.entry .note{
clear: both;
font-size: 13px;
}
.entry h2{
color: slateblue;
}
.entry .comment_link{
font-size: 13px;
clear: both;
}
.entry .content{
clear: both;
border-top: 1px solid lightgray;
border-bottom: 1px solid lightgray;
margin: 1ex 0;
}
</head>
<body>
<div class="toolbar">
<h1 id="pageTitle">ホーム</h1>
<a id="backButton" class="button" href="#"></a>
<!-- PC版へのリンクも適宜変更してください -->
<a class="button" href="#" target="_self">PC版</a>
</div>
<ul id="home" selected="true" title="ホーム">
<li class="group">@@blog_name; 新着記事</li>
<?php }
//2ページ目以降は以下の<li>の繰り返しのみ
//以下、トップと2ページ目以降共通
?>
<!-- b_block:id="entry_list" -->
<li><a href="#" cms:id="entry_link"><!-- cms:id="title_plain" /-->［<!-- cms:id="create_date" cms:format="Y年n月j日" /-->］</a></li>
<!-- /b_block:id="entry_list" -->
<?php
if($page["prev_link_visible"]){//2ページ目以降は以下のリンクを出力して終了
?>
<li><a href="#" b_block:id="next_link" target="_replace">次の10件</a></li>
<?php
//exit; exitしない
}else{ //こここから下はトップページのみ
?>
<li><a href="#recentEntries">もっと見る</a></li>
<li class="group">過去記事アーカイブ</li>
<li><a href="#monthlyArchives">年月別一覧を見る</a></li>
<li><a href="#categoryArchives">カテゴリー一覧を見る</a></li>
<li class="group">コメント・トラックバック</li>
<li><a href="#comments">新着コメントを見る</a></li>
<li><a href="#trackbacks">新着トラックバックを見る</a></li>
</ul>
<?php
//トップページはでnext_linkを3ページ目にする
$page["next_link_attribute"]["href"] = preg_replace("/(\d+)$/e", "$1+1", $page["next_link_attribute"]["href"]);
$counter = 0;
?>
<ul id="recentEntries" title="最新記事">
<!-- b_block:id="recent_entry_list" --><?php if($counter++ < 10){ continue; } ?>
<li><a href="#" cms:id="entry_link"><!-- cms:id="title" /-->［<!-- cms:id="create_date" cms:format="Y年n月j日" /-->］</a></li>
<!-- /b_block:id="recent_entry_list" -->
<li><a href="#" b_block:id="next_link" target="_replace">次の10件</a></li>
</ul>
<ul id="monthlyArchives" title="年月別一覧">
<!-- b_block:id="archive" -->
<li><a cms:id="archive_link"><!-- cms:id="archive_month" cms:format="Y年n月" /--> (<!-- cms:id="entry_count" /-->)</a></li>
<!-- /b_block:id="archive" -->
</ul>
<ul id="categoryArchives" title="カテゴリー一覧">
<!-- b_block:id="category" -->
<li><a cms:id="category_link"><!-- cms:id="category_name" /--> (<!-- cms:id="entry_count" /-->)</a></li>
<!-- /b_block:id="category" -->
</ul>
<ul id="comments" title="新着コメント">
<!-- b_block:id="recent_comment_list" -->
<li><a href="#comment_<?php echo $recent_comment_list_counter; ?>" ><!-- cms:id="author" cms:alt="名無しさん" /-->［<!-- cms:id="submit_date" cms:format="Y年n月j日" /-->］</a></li>
<!-- /b_block:id="recent_comment_list" -->
</ul>
<ul id="trackbacks" title="新着トラックバック">
<!-- b_block:id="recent_trackback_list" -->
<li><a href="#trackback_<?php echo $recent_trackback_list_counter; ?>" ><!-- cms:id="title" cms:alt="タイトルなし" /--> from <!-- cms:id="blog_name" /-->［<!-- cms:id="submit_date" cms:format="Y年n月j日" /-->］</a></li>
<!-- /b_block:id="recent_trackback_list" -->
</ul>
<!-- b_block:id="recent_comment_list*" -->
<div id="comment_<?php echo $recent_comment_list_counter; ?>">
<a href="#" cms:id="entry_link"><!-- cms:id="entry_title" /--></a>へのコメント
<dl>
<dt>日時</dt><dd cms:id="submit_date"></dd>
<dt>名前</dt><dd cms:id="author" cms:alt="名無しさん"></a></dd>
<dt>コメント</dt><dd cms:id="body"></dd>
</dl>
</div>
<!-- /b_block:id="recent_comment_list*" -->
<!-- b_block:id="recent_trackback_list*" -->
<div id="trackback_<?php echo $recent_trackback_list_counter; ?>">
<a href="#" cms:id="entry_link"><!-- cms:id="entry_title" /--></a>へのトラックバック
<dl>
<dt>日時</dt><dd cms:id="submit_date"></dd>
<dt>タイトル</dt><dd><a href="#" cms:id="url" target="_self"><!-- cms:id="title" /--></a></dd>
<dt>ブログ</dt><dd cms:id="blog_name"></dd>
<dt>記事</dt><dd cms:id="excerpt"></dd>
</dl>
</div>
<!-- /b_block:id="recent_trackback_list*" -->
</body>
</html>
<?php } ?>
アーカイブページのテンプレート
<?php if(!$page["prev_link_visible"]){ ?>
<ul id="archives" title="<!-- b_block:id="current_category_or_archive" --><!-- cms:id="archive_name" cms:format="Y年n月" /--><!-- /b_block:id="current_category_or_archive" -->">
<?php } ?><!-- b_block:id="entry_list" --><li><a href="#" b_block:id="next_link" target="_replace">次の10件</a></li>
<li><a href="#" cms:id="entry_link"><!-- cms:id="title_plain" /-->［<!-- cms:id="create_date" cms:format="Y年n月j日 H:i" /-->］</a></li>
<!-- /b_block:id="entry_list" -->
<?php if(!$page["prev_link_visible"]){ ?>
</ul>
<?php } ?>
<?php //exit; ?>
記事毎ページのテンプレート
<?php if(isset($_GET["comment"])){ ?>
<ul title="コメント一覧">
<!-- b_block:id="comment_list" -->
<li><a href="#entry_<?php echo $page["entry"]["entry_id"]; ?>_comment_<?php echo $comment_list_counter; ?>"><!-- cms:id="author" cms:alt="名無しさん" /-->［<!-- cms:id="submit_date" cms:format="Y-m-d H:i" /-->］</a></li>
<!-- /b_block:id="comment_list" -->
<?php if(count($page["comment_list"])==0){ ?>
<li>コメントはありません。</li>
<?php } ?>
</ul>
<!-- b_block:id="comment_list*" -->
<div id="entry_<?php echo $page["entry"]["entry_id"]; ?>_comment_<?php echo $comment_list_counter; ?>" class="comment">
<dl>
<dt>日時</dt><dd cms:id="submit_date"></dd>
<dt>名前</dt><dd cms:id="author" cms:alt="名無しさん"></dd>
<dt>コメント</dt><dd cms:id="body"></dd>
</dl>
</div>
<!-- /b_block:id="comment_list*" -->
<?php /* exit; */ }elseif(isset($_GET["trackback"])){ ?>
<ul title="トラックバック一覧">
<!-- b_block:id="trackback_list" -->
<li><a href="#entry_<?php echo $page["entry"]["entry_id"]; ?>_trackback_<?php echo $trackback_list_counter; ?>"><!-- cms:id="title" cms:alt="タイトルなし" /-->［<!-- cms:id="submit_date" cms:format="Y-m-d H:i" /-->］</a></li>
<!-- /b_block:id="trackback_list" -->
<?php if(count($page["trackback_list"])==0){ ?>
<li>トラックバックはありません。</li>
<?php } ?>
</ul>
<!-- b_block:id="trackback_list*" -->
<div id="entry_<?php echo $page["entry"]["entry_id"]; ?>_trackback_<?php echo $trackback_list_counter; ?>" class="trackback">
<dl>
<dt>日時</dt><dd cms:id="submit_date"></dd>
<dt>ブログ</dt><dd><a href="#" cms:id="url" target="_self"><!-- cms:id="blog_name" /--></a></dd>
<dt>タイトル</dt><dd cms:id="title" cms:alt="タイトルなし"></dd>
<dt>記事</dt><dd cms:id="excerpt"></dd>
</dl>
</div>
<!-- /b_block:id="trackback_list*" -->
<?php /* exit; */ }else{ ?>
<div title="<!-- b_block:id="entry*" --><!-- cms:id="title_plain" /--><!-- /b_block:id="entry*" -->"
class="entry"
id="entry_<!-- b_block:id="entry*" --><!-- cms:id="entry_id" /--><!-- /b_block:id="entry*" -->"
>
<div class="nav">
<p class="prev_entry"><!-- b_block:id="prev_entry" --><a href="#" cms:id="entry_link">« 前の記事へ</a></p><!-- /b_block:id="prev_entry" --></p>
<p class="next_entry"><!-- b_block:id="next_entry" --><a href="#" cms:id="entry_link">次の記事へ »</a></p><!-- /b_block:id="next_entry" --></p>
</div>
<!-- b_block:id="entry" -->
<p class="note">
<span><a href="#home">トップ</a></span> » <span cms:id="create_date" cms:format="Y年n月j日" class="createdate"></span>
<!-- cms:id="category_list" -->
<span class="category"><a cms:id="category_link"><!-- cms:id="category_name" /--></a></span>
<!-- /cms:id="category_list" -->
</p>
<h2><!-- cms:id="title_plain" /--></h2>
<div class="comment_link">
<span><a href="<?php echo $entry["entry_link_attribute"]["href"]; ?>?comment">コメント (<!-- cms:id="comment_count" /-->)</a></span>
<span><a href="<?php echo $entry["entry_link_attribute"]["href"]; ?>?trackback">トラックバック (<!-- cms:id="trackback_count" /-->)</a></span>
</div>
<?php<div class="content">
//記事内のリンクを修正する
$entry["content"] = str_replace(
array(
//外部リンクはtarget=_selfでAJAX読み込みを解除する
'href',
//ブログ内記事へのリンクはtarget=_self不要なので削除する
//ドメイン、パスは各自変更してください
'target="_self" href="http://www.example.com/article/',
'target="_self" href="http://www.example.com/category/',
'target="_self" href="http://www.example.com/month/',
'target="_self" href="/article/',
'target="_self" href="/category/',
'target="_self" href="/month/'
),
array(
'target="_self" href',
'href="http://www.example.com/i/article/',
'href="http://www.example.com/i/category/',
'href="http://www.example.com/i/month/',
'href="/i/article/',
'href="/i/category/',
'href="/i/month/'
),
$entry["content"]
);
//追記部分もcontentと同様の処理を行う
$entry["more"] = str_replace(
array(
'"http://www.example.com/article/',
'"http://www.example.com/category/',
'"http://www.example.com/month/',
'"/article/',
'"/category/',
'"/month/'
),
array(
'"http://www.example.com/i/article/',
'"http://www.example.com/i/category/',
'"http://www.example.com/i/month/',
'"/i/article/',
'"/i/category/',
'"/i/month/'
),
$entry["more"]
);
?>
<!-- cms:id="content" /-->
<!-- cms:id="more" /-->
</div>
<div class="comment_link">
<span><a href="<?php echo $entry["entry_link_attribute"]["href"]; ?>?comment">コメント (<!-- cms:id="comment_count" /-->)</a></span>
<span><a href="<?php echo $entry["entry_link_attribute"]["href"]; ?>?trackback">トラックバック (<!-- cms:id="trackback_count" /-->)</a></span>
</div>
<!-- /b_block:id="entry" -->
<div class="nav">
<p class="prev_entry"><!-- b_block:id="prev_entry" --><a href="#" cms:id="entry_link">« 前の記事へ</a></p><!-- /b_block:id="prev_entry" --></p>
<p class="next_entry"><!-- b_block:id="next_entry" --><a href="#" cms:id="entry_link">次の記事へ »</a></p><!-- /b_block:id="next_entry" --></p>
</div>
</div>
<?php /* exit; */ } ?>
おまけ - Mobile Link Discovery
元のブログのトップの<head>に以下のような<link>を書くといいことがあるかも知れません。
<link rel="alternate" media="handheld" type="application/xhtml" href="http://www.example.com/i/" />
参考：Mobile Link Discovery 仕様 : Docs - Six Apart
修正（2010-03-19）
exitすると隠し機能のキャッシュが効かなくなるので、exitをしないように修正しました。
Google Analytics導入プラグインを使っている場合は最新版（1.3）にして、プラグインからGoogle Analyticsのコードが出ないようにしてください。Google Analyticsのコードは直接テンプレートに書いてください。
Comments
Trackbacks