<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>はなとみかん &#187; 携帯サイト</title>
	<atom:link href="http://hanatomikan.com/tag/mobile-site/feed" rel="self" type="application/rss+xml" />
	<link>http://hanatomikan.com</link>
	<description>「はなとみかん」はWebデザイン、ホームページ作成、ネットショップ（ショップサーブ、楽天市場、Yahoo!ストア）のデザイン・カスタマイズなどをしているフリーランスのWebデザイナーです。</description>
	<lastBuildDate>Tue, 04 Jan 2011 01:16:14 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://hanatomikan.com/tag/mobile-site/feed" />
		<item>
		<title>WPtouch導入と日本語化</title>
		<link>http://hanatomikan.com/blog/wordpress/wptouch-introduction-and-japanization</link>
		<comments>http://hanatomikan.com/blog/wordpress/wptouch-introduction-and-japanization#comments</comments>
		<pubDate>Tue, 08 Dec 2009 13:00:22 +0000</pubDate>
		<dc:creator>はなとみかん</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[wptouch]]></category>
		<category><![CDATA[プラグイン]]></category>
		<category><![CDATA[携帯サイト]]></category>

		<guid isPermaLink="false">http://hanatomikan.com/?p=556</guid>
		<description><![CDATA[WPtouchというプラグインを入れてみました。 このプラグインはWPサイトをiPhone・iPod touch用に表示を最適化してくれるプラグインです。 iPhoneもiPod touchも持ってないんですけど携帯対応 [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://hanatomikan.com/wp-content/uploads/iphone.jpg" title="WPtouch導入と日本語化" width="225" height="225" class="alignleft size-full wp-image-658" />WPtouchというプラグインを入れてみました。</p>
<p>このプラグインはWPサイトをiPhone・iPod touch用に表示を最適化してくれるプラグインです。</p>
<p>iPhoneもiPod touchも持ってないんですけど携帯対応にしたついでに入れてみました^^;</p>
<p>で、プラグインのインストールについては通常手順なので問題ないのですが、defaultテーマを日本語化する時に手間取ったので忘れないようにメモ。</p>
<p>まず、WPtouch本体と日本語化パッケージをダウンロード。</p>
<ul>
<li><a href="http://www.bravenewcode.com/wptouch/">WPtouch本体</a></li>
<li><a href="http://blog.yamk.net/yamk/wptouch-ja">日本語化パッケージ</a>
<p class="attention">※日本語化パッケージはWPtouchのdefaultテーマを日本語化する為のもので、管理画面などを日本語化するファイルではありません。</p>
</li>
</ul>
<h2>日本語化の手順</h2>
<h3>1.準備</h3>
<p><a href="http://blog.yamk.net/yamk/">yamk blog</a>さんで配布されている日本語化パッケージをダウンロードして解凍すると、defaultテーマの日本語ファイルja.moとja.po、WPtouchの修正差分の「wptouch-195-ja.diff」というファイルが入っています。</p>
<p>日本語化パッケージの使い方は配布サイトに書かれているのですが・・・</p>
<blockquote><p>WPtouch がインストールされたフォルダ、縲鰀/wp-content/plugins/ 内で、以下のとおり実行する。 XXX はバージョンに合わせること。</p>
<pre><code># unzip 縲鰀/XXXXXX/wptouch-XXX-ja.zip
Archive: wptouch-XXX-ja.zip
inflating: wptouch-XXX-ja.diff
inflating: README-WPtouch-ja-UTF8.txt
inflating: wptouch/themes/default/ja.mo
inflating: wptouch/themes/default/ja.po
# cd wptouch
# patch -p1 &lt; ../wptouch-XXX-ja.diff
patching file themes/core/core-functions.php
patching file themes/default/comments.php
patching file themes/default/functions.php
patching file themes/default/header.php
patching file themes/default/single.php
# cd ..
# rm -f wptouch-*.diff</code></pre>
</blockquote>
<p>う～ん、全然何のことやら^^;　勉強不足ですね。</p>
<p>さらに、配布サイトのコメントをみると</p>
<blockquote><p>このページの説明は Linux サーバ上で直接ファイルを操作できる方を前提に書いており、それ以外の環境での方法は私も試したことがありません。例えば Windows 等で作業しようとするとむしろ難しい作業になったり、より多くの前提知識 (差分、patchコマンドの使い方、Linux とファイル形式の違い等) が必要になるかもしれず、私もうまく説明できることができないので、申し訳ありませんがご了承ください。</p></blockquote>
<p>とあるので、diffファイルはパッチファイルで、Windowsで使うには別の準備と手順がありそう。</p>
<p>で、Windowsでのdiffファイルの使い方、パッチのあて方をググってみると、小粋空間さんの<a href="http://www.koikikukan.com/archives/2006/01/22-235056.php">パッチをあてる（その1：適用方法） </a>を発見。記事を読むと、Windowsにはpatchコマンドが無いのでpatchコマンドを準備しないといけないとあります。</p>
<p>早速、紹介されている<a href="http://cetus.sakura.ne.jp/softlab/toolbox1/index.html">プログラミング・ツール（移植ソフト）</a>のpatc254w.zipをダウンロードしてpatchコマンドを導入。導入方法は小粋空間さんに詳しく書かれているので割愛。</p>
<p>これでやっと、日本語化ファイルを使う<strong>準備</strong>ができました^^</p>
<h3>2.日本語化パッチをあてる</h3>
<p>パッチのあて方も小粋空間さんの記事を参考にやっていきます。</p>
<p>まず、パッチをあてるためにコマンドプロンプトを起動させます。</p>
<pre class="win"><code>C:\Documents and Settings\ユーザー名&gt;</code></pre>
<p>このように表示されるので、ユーザー名ディレクトリに「wordpress」というフォルダを作成して、その中に解凍した「WPtouch本体」と日本語化パッケージの「wptouch-195-ja.diff」ファイルを入れます。</p>
<p>コマンドプロンプトに</p>
<pre class="win"><code>C:\Documents and Settings\ユーザー名&gt;cd wordpress</code></pre>
<p>と、入力して今作成した「wordpress」ディレクトリに移動。</p>
<p>次に日本語化パッチの使い方にあるとおりに入力します。</p>
<pre><code>cd wptouch
patch -p1 &lt; ../wptouch-XXX-ja.diff</code></pre>
<p class="none">-pオプションについては小粋空間さんの<a href="http://www.koikikukan.com/archives/2006/02/17-235135.php">パッチをあてる（その3：patchコマンドの-pオプションについて）</a>が参考になります。</p>
<pre class="win"><code>C:\Documents and Settings\ユーザー名\wordpress&gt;cd wptouch
C:\Documents and Settings\ユーザー名\wordpress\wptouch&gt;patch -p1 &lt; ../wptouch-195-ja.diff</code></pre>
<p>これでコマンド実行。</p>
<pre class="win"><code>patching file themes/core/core-functions.php
patching file themes/default/comments.php
patching file themes/default/functions.php
patching file themes/default/header.php
patching file themes/default/single.php</code></pre>
<p>このように表示されると成功です。成功したらコマンドプロンプトは終了してＯＫです。</p>
<p>最後に日本語化パッケージに入っているdefaultテーマの日本語ファイルja.moをwptouch/themes/default/に入れて日本語化完了。</p>
<p>あとは、「wptouch」フォルダを丸ごとwp-content/plugins/にアップロード、WP管理画面のプラグイン画面でアクティブにすればインストール完了です。</p>
<p>これでiPhoneやiPod touchで当サイトにアクセスするとこのように見えます。</p>
<ul class="photo02">
<li>
<p><div id="attachment_655" class="wp-caption alignnone" style="width: 255px"><a href="http://hanatomikan.com/wp-content/uploads/wptouch.jpg"><img src="http://hanatomikan.com/wp-content/uploads/wptouch-245x536.jpg" alt="デフォルトの表示" title="デフォルトの表示" width="245" height="536" class="size-large wp-image-655" /></a><p class="wp-caption-text">デフォルトの表示</p></div></li>
<li class="listEnd">
<p><div id="attachment_654" class="wp-caption alignnone" style="width: 255px"><a href="http://hanatomikan.com/wp-content/uploads/wptouch-ja.jpg"><img src="http://hanatomikan.com/wp-content/uploads/wptouch-ja-245x536.jpg" alt="日本語化した表示" title="日本語化した表示" width="245" height="536" class="size-large wp-image-654" /></a><p class="wp-caption-text">日本語化した表示</p></div></li>
</ul>
<p>ちなみにこのキャプチャはシミュレーターのものです。</p>
<p>auからiPhoneが出たら私もiPhoneにするんですけど。auから出ないかな～</p>
]]></content:encoded>
			<wfw:commentRss>http://hanatomikan.com/blog/wordpress/wptouch-introduction-and-japanization/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://hanatomikan.com/blog/wordpress/wptouch-introduction-and-japanization" />
	</item>
		<item>
		<title>[WP]携帯対応にしました</title>
		<link>http://hanatomikan.com/blog/wordpress/mobile-correspondence</link>
		<comments>http://hanatomikan.com/blog/wordpress/mobile-correspondence#comments</comments>
		<pubDate>Tue, 17 Nov 2009 14:31:26 +0000</pubDate>
		<dc:creator>はなとみかん</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[KtaiStyle]]></category>
		<category><![CDATA[アドオン]]></category>
		<category><![CDATA[プラグイン]]></category>
		<category><![CDATA[携帯サイト]]></category>

		<guid isPermaLink="false">http://hanatomikan.com/?p=397</guid>
		<description><![CDATA[WPの携帯対応プラグインとして有名な「Ktai Style」を入れました。]]></description>
			<content:encoded><![CDATA[<p><img src="http://hanatomikan.com/wp-content/uploads/ktai.jpg" title="携帯対応にしました" width="225" height="225" class="alignleft size-full wp-image-472" />WPの携帯対応プラグインとして有名な「<a href="http://wppluginsj.sourceforge.jp/ktai_style/">Ktai Style</a>」を入れました。</p>
<p>このプラグインは対応している携帯キャリアの数がスゴイです。主要3キャリア（au、docomo、SoftBank）の他にも色々と対応しているのでとてもありがたい。</p>
<p>同梱のテーマも6種類あるので好みに応じて変更可能です。テーマが6種類もあるので、カスタマイズして独自のテーマを作成することもできます。</p>
<p>ということで、携帯サイト作成の練習に早速defaultテーマを使って「はなとみかん」用にテーマを作ってみました。</p>
<p>auとdocomoでは表示確認済み。SoftBankは周りに持ってる人が居ないので実際の表示は確認していませんが、シミュレーターでは確認しました。</p>
<p class="note">使用したシミュレーター：<a href="http://firemobilesimulator.org/">FireMobileSimulator</a> （Firefoxのアドオン）</p>
<p>実際に携帯サイトを作ってみて感じた事は、<strong>ホント3キャリア対応ってムズイっ(&gt;_&lt;)</strong>てこと。</p>
<p>各キャリアで使えるタグ・属性が違う、認識できる画像のファイル形式も違う、などなど。<br />
統一規格を作ってほしい(;つД｀)</p>
<p>元となったテーマは各キャリア対応ですが、PCサイトっぽいデザインにカスタマイズしてみようとしたので、なかなか思い通りの表示にならない・・・</p>
<p>で、役に立ったのが <a href="http://www.amazon.co.jp/%E6%90%BA%E5%B8%AF%E3%82%B5%E3%82%A4%E3%83%88-%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-%E9%AB%98%E6%9C%A8-%E6%82%A0%E4%BB%8B/dp/4797348488%3FSubscriptionId%3DAKIAIU36OUAW55K7EXCQ%26tag%3Dhanatomikan-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4797348488">携帯サイト コーディング&amp;デザイン</a></p>
<p>いやぁ、この本わかりやすい！<br />
１つのファイルで3キャリアに対応させる手法や、3キャリアの動作比較などが分かりやすく書かれていて私のような初心者にはオススメですよ。</p>
<p>着手すること数日。</p>
<p>やっと皆様にお披露目する日が来ました。ヽ(ﾟ∀ﾟ)メ(ﾟ∀ﾟ)メ(ﾟ∀ﾟ)ノ</p>
<p>各キャリアで全く同じ表示とはいきませんが、とりあえず現状が妥協点です(；´∀｀)<br />
今後、修正を加えながら携帯サイト作成の勉強をしていきます。</p>
<p>携帯サイトを難なく作れるようになると仕事の幅が広がるのでがんばろ。</p>
]]></content:encoded>
			<wfw:commentRss>http://hanatomikan.com/blog/wordpress/mobile-correspondence/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://hanatomikan.com/blog/wordpress/mobile-correspondence" />
	</item>
	</channel>
</rss>

