<?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/"
	>

<channel>
	<title>mobile | CHOICE</title>
	<atom:link href="https://choice-site.com/tag/mobile/feed/" rel="self" type="application/rss+xml" />
	<link>https://choice-site.com</link>
	<description>CentOS上での各種設定やTips、PHPやDB関係のことなど</description>
	<lastBuildDate>Wed, 16 Apr 2014 02:20:46 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.9.3</generator>
	<item>
		<title>iphoneやandroidでの表示を確認する方法</title>
		<link>https://choice-site.com/2012/09/26/iphone%e3%82%84android%e3%81%a7%e3%81%ae%e8%a1%a8%e7%a4%ba%e3%82%92%e7%a2%ba%e8%aa%8d%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/</link>
		
		<dc:creator><![CDATA[nakade]]></dc:creator>
		<pubDate>Wed, 26 Sep 2012 03:54:00 +0000</pubDate>
				<category><![CDATA[mobile]]></category>
		<guid isPermaLink="false">http://choice-site.com/?p=267</guid>

					<description><![CDATA[<p>iphoneやandroidなどのモバイル用のページを作成している際に、表示されているものが期待通りか確認する方法です。 今回、試してみたのは、 Chrome拡張機能「Ripple Emulator」 「Opera Mo&#8230; <a class="more-link" href="https://choice-site.com/2012/09/26/iphone%e3%82%84android%e3%81%a7%e3%81%ae%e8%a1%a8%e7%a4%ba%e3%82%92%e7%a2%ba%e8%aa%8d%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/">続きを読む <span class="screen-reader-text">iphoneやandroidでの表示を確認する方法</span></a></p>
The post <a href="https://choice-site.com/2012/09/26/iphone%e3%82%84android%e3%81%a7%e3%81%ae%e8%a1%a8%e7%a4%ba%e3%82%92%e7%a2%ba%e8%aa%8d%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/">iphoneやandroidでの表示を確認する方法</a> first appeared on <a href="https://choice-site.com">CHOICE</a>.<div class="wherego_related "><p class='my_h3'>こんな記事もおすすめ</p><ul><li><a href="https://choice-site.com/2012/09/25/%e3%80%8cwww%e3%81%82%e3%82%8a%e3%80%8d%e3%81%a8%e3%80%8cwww%e3%81%aa%e3%81%97%e3%80%8d%e3%82%92%e7%b5%b1%e4%b8%80%e3%81%99%e3%82%8b/"    ><span class="wherego_title">「WWWあり」と「WWWなし」を統一する</span></a></li></ul></div>]]></description>
										<content:encoded><![CDATA[<p>iphoneやandroidなどのモバイル用のページを作成している際に、表示されているものが期待通りか確認する方法です。</p>
<p>今回、試してみたのは、</p>
<ul>
<li>Chrome拡張機能「Ripple Emulator」</li>
<li>「Opera Mobile Emulator for desktop」ソフト</li>
</ul>
<p>の２つです。</p>
<h3>Chrome拡張機能「Ripple Emulator」</h3>
<h4>「Ripple Emulator」の導入</h4>
<p><a title="https://chrome.google.com/webstore/category/home?hl=ja" href="https://chrome.google.com/webstore/category/home?hl=ja" target="_blank">https://chrome.google.com/webstore/category/home?hl=ja</a><br />で「Ripple Emulator」を検索すると以下のように表示されるので、「Chromeに追加」ボタンを押して、拡張機能を導入します。</p>
<p><a href="http://choice-site.com/wp/wp-content/uploads/2012/09/ripple.gif"><img class="alignnone size-medium wp-image-269" title="ripple" src="http://choice-site.com/wp/wp-content/uploads/2012/09/ripple-300x72.gif" alt="" width="300" height="72" srcset="https://choice-site.com/wp/wp-content/uploads/2012/09/ripple-300x72.gif 300w, https://choice-site.com/wp/wp-content/uploads/2012/09/ripple.gif 684w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<h4>「Ripple Emulator」の利用</h4>
<p>まず、Chromeで確認したいページを表示します。<br />その後、Chromeの「Ripple Emulator」のボタンを押します。</p>
<p><a href="http://choice-site.com/wp/wp-content/uploads/2012/09/ripple2.gif"><img class="alignnone size-full wp-image-268" title="ripple2" src="http://choice-site.com/wp/wp-content/uploads/2012/09/ripple2.gif" alt="" width="207" height="128" /></a></p>
<p>コントロール画面が出ますので、「Enable」ボタンを押します。</p>
<p><a href="http://choice-site.com/wp/wp-content/uploads/2012/09/ripple3.gif"><img class="alignnone size-medium wp-image-270" title="ripple3" src="http://choice-site.com/wp/wp-content/uploads/2012/09/ripple3-300x271.gif" alt="" width="300" height="271" srcset="https://choice-site.com/wp/wp-content/uploads/2012/09/ripple3-300x271.gif 300w, https://choice-site.com/wp/wp-content/uploads/2012/09/ripple3.gif 370w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>「Mobile Web（Default）」ボタンを押します。</p>
<p><a href="http://choice-site.com/wp/wp-content/uploads/2012/09/ripple4.gif"><img class="alignnone size-medium wp-image-271" title="ripple4" src="http://choice-site.com/wp/wp-content/uploads/2012/09/ripple4-300x189.gif" alt="" width="300" height="189" srcset="https://choice-site.com/wp/wp-content/uploads/2012/09/ripple4-300x189.gif 300w, https://choice-site.com/wp/wp-content/uploads/2012/09/ripple4.gif 585w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>左上に表示されている「Devices」タブを押します。</p>
<p><a href="http://choice-site.com/wp/wp-content/uploads/2012/09/ripple5.gif"><img class="alignnone size-medium wp-image-272" title="ripple5" src="http://choice-site.com/wp/wp-content/uploads/2012/09/ripple5-300x248.gif" alt="" width="300" height="248" srcset="https://choice-site.com/wp/wp-content/uploads/2012/09/ripple5-300x248.gif 300w, https://choice-site.com/wp/wp-content/uploads/2012/09/ripple5.gif 502w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>「Devices」タブを開くと現在設定されている機種が表示されていますので、ここで変更したい機種を選びます。選ぶと自動的にページが再読み込みされます。</p>
<p><a href="http://choice-site.com/wp/wp-content/uploads/2012/09/ripple6.gif"><img class="alignnone size-medium wp-image-273" title="ripple6" src="http://choice-site.com/wp/wp-content/uploads/2012/09/ripple6-300x230.gif" alt="" width="300" height="230" srcset="https://choice-site.com/wp/wp-content/uploads/2012/09/ripple6-300x230.gif 300w, https://choice-site.com/wp/wp-content/uploads/2012/09/ripple6.gif 554w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p> なお、今後、「Enable」と設定したURLにアクセスすると自動的に「Ripple Emulator」が起動するようになります。設定を解除したい場合は、コントロール画面で「Disable」ボタンを押せばよいです。</p>
<h3>「Opera Mobile Emulator for desktop」ソフト</h3>
<h4>「Opera Mobile Emulator for desktop」のインストール</h4>
<p><a title="http://www.opera.com/developer/tools/mobile/" href="http://www.opera.com/developer/tools/mobile/" target="_blank">http://www.opera.com/developer/tools/mobile/</a><br />からソフトをダウンロードしてインストールすれば完了です。<br />特に難しい設定はないので、数分で終わります。</p>
<h4>「Opera Mobile Emulator for desktop」の起動と設定</h4>
<p>「Opera Mobile Emulator for desktop」を起動すると以下のようなウィンドウが表示されます。</p>
<p><a href="http://choice-site.com/wp/wp-content/uploads/2012/09/opera1.gif"><img class="alignnone size-medium wp-image-274" title="opera1" src="http://choice-site.com/wp/wp-content/uploads/2012/09/opera1-300x186.gif" alt="" width="300" height="186" srcset="https://choice-site.com/wp/wp-content/uploads/2012/09/opera1-300x186.gif 300w, https://choice-site.com/wp/wp-content/uploads/2012/09/opera1.gif 546w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>「Profile」から機種を選択し「Launch」ボタンを押します。</p>
<p>次に、ユーザエージェントの変更を行います。</p>
<p><a href="http://choice-site.com/wp/wp-content/uploads/2012/09/opera2.gif"><img class="alignnone size-medium wp-image-275" title="opera2" src="http://choice-site.com/wp/wp-content/uploads/2012/09/opera2-170x300.gif" alt="" width="170" height="300" srcset="https://choice-site.com/wp/wp-content/uploads/2012/09/opera2-170x300.gif 170w, https://choice-site.com/wp/wp-content/uploads/2012/09/opera2.gif 248w" sizes="(max-width: 170px) 100vw, 170px" /></a></p>
<p>右下の「O」を押します。</p>
<p><a href="http://choice-site.com/wp/wp-content/uploads/2012/09/opera3.gif"><img class="alignnone size-medium wp-image-276" title="opera3" src="http://choice-site.com/wp/wp-content/uploads/2012/09/opera3-171x300.gif" alt="" width="171" height="300" srcset="https://choice-site.com/wp/wp-content/uploads/2012/09/opera3-171x300.gif 171w, https://choice-site.com/wp/wp-content/uploads/2012/09/opera3.gif 250w" sizes="(max-width: 171px) 100vw, 171px" /></a></p>
<p>設定を押します。</p>
<p><a href="http://choice-site.com/wp/wp-content/uploads/2012/09/opera4.gif"><img class="alignnone size-medium wp-image-277" title="opera4" src="http://choice-site.com/wp/wp-content/uploads/2012/09/opera4-172x300.gif" alt="" width="172" height="300" srcset="https://choice-site.com/wp/wp-content/uploads/2012/09/opera4-172x300.gif 172w, https://choice-site.com/wp/wp-content/uploads/2012/09/opera4.gif 250w" sizes="(max-width: 172px) 100vw, 172px" /></a></p>
<p>詳細ツールを押します。</p>
<p><a href="http://choice-site.com/wp/wp-content/uploads/2012/09/opera5.gif"><img class="alignnone size-medium wp-image-278" title="opera5" src="http://choice-site.com/wp/wp-content/uploads/2012/09/opera5-172x300.gif" alt="" width="172" height="300" srcset="https://choice-site.com/wp/wp-content/uploads/2012/09/opera5-172x300.gif 172w, https://choice-site.com/wp/wp-content/uploads/2012/09/opera5.gif 250w" sizes="(max-width: 172px) 100vw, 172px" /></a></p>
<p>ユーザエージェントを押します。</p>
<p><a href="http://choice-site.com/wp/wp-content/uploads/2012/09/opera6.gif"><img class="alignnone size-medium wp-image-279" title="opera6" src="http://choice-site.com/wp/wp-content/uploads/2012/09/opera6-173x300.gif" alt="" width="173" height="300" srcset="https://choice-site.com/wp/wp-content/uploads/2012/09/opera6-173x300.gif 173w, https://choice-site.com/wp/wp-content/uploads/2012/09/opera6.gif 251w" sizes="(max-width: 173px) 100vw, 173px" /></a></p>
<p>Androidを選択した後は、「戻る」ボタンで最初のページに戻れば完了です。<br />アドレス入力欄に確認したいページのURLを入れてリターンキーを押せばandroid用のページが表示されます。</p>
<p>※参考<br /><a title="http://dev.opera.com/articles/view/opera-mobile-emulator/" href="http://dev.opera.com/articles/view/opera-mobile-emulator/" target="_blank">http://dev.opera.com/articles/view/opera-mobile-emulator/</a><br />に詳しい記事があります。（英語版）</p>
<p>みたところ、「Opera Mobile Emulator for desktop」で表示されているHTMLソースを確認しながらデバッグできる Opera Dragonfly というツールもあるようです。</p>The post <a href="https://choice-site.com/2012/09/26/iphone%e3%82%84android%e3%81%a7%e3%81%ae%e8%a1%a8%e7%a4%ba%e3%82%92%e7%a2%ba%e8%aa%8d%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/">iphoneやandroidでの表示を確認する方法</a> first appeared on <a href="https://choice-site.com">CHOICE</a>.<div class="wherego_related "><p class='my_h3'>こんな記事もおすすめ</p><ul><li><a href="https://choice-site.com/2012/09/25/%e3%80%8cwww%e3%81%82%e3%82%8a%e3%80%8d%e3%81%a8%e3%80%8cwww%e3%81%aa%e3%81%97%e3%80%8d%e3%82%92%e7%b5%b1%e4%b8%80%e3%81%99%e3%82%8b/"    ><span class="wherego_title">「WWWあり」と「WWWなし」を統一する</span></a></li></ul></div>]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
