<?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>橋本商会 &#187; iPhone</title>
	<atom:link href="http://shokai.org/blog/archives/tag/iphone/feed" rel="self" type="application/rss+xml" />
	<link>http://shokai.org/blog</link>
	<description>なんか作ったりした記録を忘れないうちに書くblog</description>
	<lastBuildDate>Mon, 06 Feb 2012 13:32:44 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
<atom:link rel="hub" href="http://pubsubhubbub.appspot.com/" />
			<item>
		<title>iPhone JavaScript Console作った</title>
		<link>http://shokai.org/blog/archives/5523</link>
		<comments>http://shokai.org/blog/archives/5523#comments</comments>
		<pubDate>Tue, 31 May 2011 09:24:46 +0000</pubDate>
		<dc:creator>shokai</dc:creator>
				<category><![CDATA[未分類]]></category>
		<category><![CDATA[EventMachine]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[iPhone-JS-Console]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Ruby]]></category>
		<category><![CDATA[Tech]]></category>
		<category><![CDATA[WebSocket]]></category>

		<guid isPermaLink="false">http://shokai.org/blog/?p=5523</guid>
		<description><![CDATA[作った → https://github.com/shokai/iphone-js-console iPhone用のJavaScript shellのようなもの。FirebugやChromeの開発パネルみたいな感じで使う [...]]]></description>
			<content:encoded><![CDATA[<p>
作った → <a href="https://github.com/shokai/iphone-js-console">https://github.com/shokai/iphone-js-console</a><br />
<br />
iPhone用のJavaScript shellのようなもの。FirebugやChromeの開発パネルみたいな感じで使う。<br />
<br />
chrome拡張やiPhoneシミュレータでiPhone用のwebページの動作は確認できるが、加速度センサやGeo Location APIなんかは実機で動かさないとデバッグできない。<br />
しかしデバッグをしようにも、iPhone上で大量のalertを出すと気が狂ってしまう。iPhoneで実行中のwebページ上の任意のオブジェクトの中身を、Macから覗いたり値を書き換えたり関数を実行したりするツールが必要だったので作った。<br />
<br />
なお、Androidのブラウザにはwebsocketが無いのでこのツールは動かない。Androidではlogcatで<br />
<pre class="prettyprint">
adb logcat | grep "^./browser" --color=auto<br />
</pre>
すればconsole.log、console.errorの出力は見れるので、それで何とか我慢している。<br />
<br />
<br />
<br />
■セットアップ<br />
MacとiPhoneを用意する。MacとiPhoneは同じ無線LANの下に接続して、互いに通信できるようにしておく。<br />
<br />
<a href="https://github.com/shokai/iphone-js-console">github.com/shokai/iphone-js-console</a>からcloneしてくる。<br />
<br />
iphone-js-console.jsをhtmlに読み込ませる。JsConsole.startで自分のMacに接続させるようにする。<br />
<pre class="prettyprint">
&lt;script src='iphone-js-console.js' type='text/javascript' /&gt;<br />
&lt;script type='text/javascript'&gt;<br />
    JsConsole.start('ws://192.168.1.38:8088'); // Addr of Console Server<br />
&lt;/script&gt;<br />
</pre>
（あらかじめconsoleを起動するMacのIPアドレスは調べておこう）<br />
<br />
<br />
Macで、iphone-js-consoleを起動する<br />
<pre>
./iphone-js-console<br />
</pre>
<br />
iphone-js-consoleの起動時に、rubygemsが足りないという警告がでたら足りないgemをインストールする。<br />
<pre>
gem install eventmachine em-websocket<br />
</pre>
多分これで足りる。<br />
あとreadlineを使っているけど、Macの最初から入っているreadlineは腐ってた気がするので、brewかportsで入れるといい。（わからなかったら飛ばしても多分良い）<br />
<br />
<br />
<br />
■使う<br />
Macのiphone-js-consoleで<br />
<pre class="prettyprint">
alert(document.title)<br />
</pre>
と打つと、<br />
<a href="http://www.flickr.com/photos/shokai/5779918365/" title="Untitled by shokai, on Flickr"><img src="http://farm4.static.flickr.com/3410/5779918365_58d0f513cf.jpg" width="333" height="500" alt=""></a><br />
<br />
このようにiPhoneのSafari上でJavaScriptが実行される。<br />
<br />
<br />
また、iPhoneのSafariの変数を参照することもできる。<br />
<pre>
&gt; window.navigator.appVersion<br />
&lt;1&gt; "5.0 (iPod; U; CPU iPhone OS 4_3_3 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"<br />
</pre>
<br />
<br />
中身が複雑なオブジェクトは整形されて表示される。<br />
<pre>
&gt; location<br />
&lt;1&gt; <br />
{"href"=&gt;"http://192.168.1.38:8080/debug-sample.html",<br />
 "hash"=&gt;"",<br />
 "port"=&gt;"8080",<br />
 "protocol"=&gt;"http:",<br />
 "origin"=&gt;"http://192.168.1.38:8080",<br />
 "pathname"=&gt;"/debug-sample.html",<br />
 "hostname"=&gt;"192.168.1.38",<br />
 "host"=&gt;"192.168.1.38:8080",<br />
 "search"=&gt;""}<br />
</pre>
<br />
<br />
もちろん、エラーも出力される。<br />
<pre>
&gt; homu<br />
&lt;1&gt; "error : Can't find variable: homu"<br />
&gt; 1+2<br />
&lt;1&gt; 3<br />
&gt; 1+<br />
&lt;1&gt; "error : Parse error"<br />
</pre>
<br />
<br />
iPhoneのJSで、あらかじめ<br />
<pre class="prettyprint">
console.log(foo);<br />
</pre>
とか書いておけばもちろんMacのiphone-js-consoleにfooの値が表示される。<br />
<br />
<br />
一度入力したコマンドは、キーボード上下で履歴を呼び出したりできる。<br />
大変便利ですね。<br />
<br />
<br />
<br />
<br />
■技術的なこと<br />
iPhoneとiphone-js-consoleの接続にはWebSocketを使っている。EventMachine::WebSocketが便利だった。<br />
<br />
iphone-js-consoleからiphoneへ送信された文字列は、そのままiPhone上でevalで実行させている。<br />
iphoneからiphone-js-consoleへのオブジェクトの送信は、iPhone上でJSON.stringifyでシリアライズして送信して、iphone-js-consoleでparseして適当に整形して表示している。<br />
<br />
別に難しいことはしていない。<br />
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://shokai.org/blog/archives/5523/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>glitchtweet.com作った</title>
		<link>http://shokai.org/blog/archives/5486</link>
		<comments>http://shokai.org/blog/archives/5486#comments</comments>
		<pubDate>Wed, 06 Apr 2011 14:27:25 +0000</pubDate>
		<dc:creator>shokai</dc:creator>
				<category><![CDATA[未分類]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[glitch]]></category>
		<category><![CDATA[glitchtext.js]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Ruby]]></category>
		<category><![CDATA[Sinatra]]></category>
		<category><![CDATA[Tech]]></category>

		<guid isPermaLink="false">http://shokai.org/blog/?p=5486</guid>
		<description><![CDATA[2ヶ月ぐらい前に作った。blog書くのめんどくさくて放置してた。 http://glitchtweet.com 俺がやっているような素敵な装飾がついたツイートがだれでもできるwebサービスです。しかも気に入ったのがでるま [...]]]></description>
			<content:encoded><![CDATA[<p>
2ヶ月ぐらい前に作った。blog書くのめんどくさくて放置してた。<br />
<br />
<a href="http://glitchtweet.com">http://glitchtweet.com</a><br />
<br />
<br />
俺がやっているような素敵な装飾がついたツイートがだれでもできるwebサービスです。しかも気に入ったのがでるまで何度でもやりなおせる。<br />
iPhoneやAndroidから使うことを想定している。<br />
<img src="http://farm6.static.flickr.com/5229/5594731593_8d274cbaef.jpg"><img src="http://farm6.static.flickr.com/5301/5594731077_0a8c5f3925.jpg">
<br />
<br />
<br />
ライブラリ以外のコードを数えたら、286行しかなかった。<br />
その他は以前作ったテキストに文字装飾を行う<a href="http://shokai.org/blog/archives/5460">glitchtext.js</a>が500行ぐらい。sinatra、haml、jqueryのおかげでシンプルに書けた。<br />
<br />
ソースはここにある<br />
<a href="https://github.com/shokai/glitchtweet-web-app">shokai/glitchtweet-web-app &#8211; GitHub</a><br />
<br />
<br />
<br />
以下細かいことなどを書く<br />
<br />
■ファイルサイズ<br />
でかい。glitchtext.jsが辞書が巨大すぎて300kb以上ある。けどしょうがないし、まあキャッシュ効くからいいか<br />
<br />
<br />
■サーバー<br />
さくらVPSのdev.shokai.orgに、virtualhostでglitchtweet.com割り当てて使ってる。<br />
<br />
<br />
■開発環境<br />
まずglitchtext.jsはv8とRakeで単体でテストをしている。<a href="http://shokai.org/blog/archives/5460">前に書いた</a>。<br />
glitchtweet.comのwebアプリ自体はローカルでwebrickで起動して、chromeの開発パネルでjsなどのデバッグをした。あとはiPhoneとAndroidのsafariのブラウザで開いて、見た目を調整した。<br />
<br />
<br />
■なるべく画面遷移しない<br />
jquery mobileやjQTouchを使うとネイティブアプリ風に外見で、横にスライドして表示を切り替えるwebアプリを作れるけど<br />
面倒だったので使わなかった。visibleをon/offしてtweetボタンを表示したりしなかったり等している。<br />
なのでviewのテンプレートは1つしかない。<br />
<br />
<br />
■twitterログイン<br />
生成したglitchテキストはoAuthでログインしてtweetされるが、ユーザ情報管理にDBは使っていない。<br />
cookieにtwitterのoauth tokenとsecretを保存している。<br />
最初の画面でログイン済みかどうかは、haml template上でtokenとsecretがあるかどうかだけで表示を分岐しているので、実際glitchtweet.com側では誰がどんなtweetをしているかは把握していない（しようと思えばできる）<br />
<br />
<br />
■cookieでsession<br />
sinatraでcookieベースのsessionを使うようにしている。<br />
<a href="http://d.hatena.ne.jp/shokai/20110324/1300999147">Rack::Session::Cookieを使う &#8211; 橋本詳解</a>に書いた。<br />
glitchtweet.comでは2週間cookieで保存するようにしている。<br />
use Rack::Sessioin::Cookieしたらsinatraのsession関数がcookieを使うようになってくれた。<br />
（これで大丈夫ですよね？）<br />
<br />
<br />
■ホーム画面アイコン<br />
<pre class="prettyprint">
&lt;link href='http://glitchtweet.com/img/icon.png' rel='apple-touch-icon' /&gt;<br />
</pre>
これをheadに書いておくと、iPhoneのホーム画面にブックマーク保存するとアイコンが付く。<br />
Android2.3でもホーム画面にブックマークショートカットを作ったらアイコンが出るようになった。しかも角丸化される。apple-touch-iconって名前なのに処理してくれるAndroidえらい。<br />
<br />
<br />
■テスト環境にwebrick使うようにした<br />
開発中にSinatra1.2.1が出たのでupdateしたら、thinを使うとhttpリクエスト送った瞬間に問答無用で強制終了するようになった。<br />
webrick使うようにした。<br />
<a href="http://d.hatena.ne.jp/shokai/20110324/1300985987">Sinatra1.2.1とthin1.2.10を同時に使うと死ぬ &#8211; 橋本詳解</a><br />
<br />
<br />
■viewport<br />
@hitoriblogさんに教えてもらった。<br />
適当なhtml/cssを書いていてもiPhoneではそれなりに正しいサイズで表示されるんだけど、Androidではテキストエリアをクリックした瞬間にものすごいズームをされてしまう。<br />
これはviewportをheadに指定しておくとなんとかなる。Androidはデバイスがたくさんあるので、画面サイズが微妙に違うのでwebサービス作ってる人は大変そう。<br />
<pre class="prettyprint">
&lt;meta content='width=device-width, user-scalable=no' name='viewport' /&gt; <br />
</pre>
このへんも参考になる。<br />
<ul>
  <li><a href="http://togetter.com/li/109343">Togetter &#8211; 「Android Viewportとの戦い」</a></li>
  <li><a href="http://www.techdoctranslator.com/android/webapps/targeting">2. ウェブアプリの画面対応 &#8211; ソフトウェア技術ドキュメントを勝手に翻訳</a></li>
</ul>
<br />
<br />
■shakeイベント<br />
ネイティブアプリではshakeのイベント、つまりiPhone本体を振ったイベントを取得して、undoに使われている。<br />
全く、操作と実行内容の関連付けが最も意味不明な機能だと思う。<br />
<br />
でもiOS4.2からsafariでも加速度センサーが使えるようになったので、せっかくだからshakeイベントを取れるjsライブラリを作った。<br />
<a href="https://github.com/shokai/js-iphone-shake-event">shokai/js-iphone-shake-event &#8211; GitHub</a><br />
<br />
glitchtweet.comでも使っている。tweet後に、もう一度同じソースからglitchしたい時にshakeすると消えた文字が復元される。<br />
<br />
これについてはあとで書く。<br />
<br />
<br />
■iphone-js-console<br />
<a href="https://github.com/shokai/iphone-js-console">shokai/iphone-js-console &#8211; GitHub</a><br />
iphone-shake-event.jsを作っている時に、iPhone実機でのデバッグをする為に作った。<br />
パソコンのterminal上でjsを書くと、iPhone上で実行されたり、パソコン上でiPhoneのブラウザ上のjsの値を読み出したりできて便利。<br />
<br />
これについてもあとで書く。<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://shokai.org/blog/archives/5486/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WPtouchをインストールした</title>
		<link>http://shokai.org/blog/archives/1909</link>
		<comments>http://shokai.org/blog/archives/1909#comments</comments>
		<pubDate>Sat, 30 Aug 2008 09:06:59 +0000</pubDate>
		<dc:creator>shokai</dc:creator>
				<category><![CDATA[未分類]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://shokai.org/blog/?p=1909</guid>
		<description><![CDATA[wordpress用のiPhone/iPodTouch用プラグイン WPtouchを入れた ダウンロードしたアーカイブを解凍して、wp-content/plugins以下に配置して管理画面からプラグインを「使用する」にチ [...]]]></description>
			<content:encoded><![CDATA[<p>
wordpress用のiPhone/iPodTouch用プラグイン <a href="http://www.bravenewcode.com/wptouch/">WPtouch</a>を入れた<br />
<br />
<a href="http://www.flickr.com/photos/shokai/2810002119/" title="WPtouch by shokai, on Flickr"><img src="http://farm4.static.flickr.com/3270/2810002119_c7d66f4122_o.jpg" width="320" height="480" alt="WPtouch" /></a><br />
<br />
ダウンロードしたアーカイブを解凍して、wp-content/plugins以下に配置して管理画面からプラグインを「使用する」にチェック入れるだけで動いた。<br />
<br />
useragentを見て表示をiPhone/iPodTouch用に切り替えてるので、専用URLが生成されるのではないので良い。<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://shokai.org/blog/archives/1909/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>iPhone買った</title>
		<link>http://shokai.org/blog/archives/1556</link>
		<comments>http://shokai.org/blog/archives/1556#comments</comments>
		<pubDate>Mon, 21 Jul 2008 14:56:48 +0000</pubDate>
		<dc:creator>shokai</dc:creator>
				<category><![CDATA[未分類]]></category>
		<category><![CDATA[iPhone]]></category>

		<guid isPermaLink="false">http://shokai.org/blog/?p=1556</guid>
		<description><![CDATA[たしかに携帯電話としては色々問題はある気もするけど、パソコンのメールもRSSもtwitterも全部見れるので、朝家でメールチェックしてるうちにいつのまにかLDR見てて時間が経っているという事がなくなって良かった。 他の買 [...]]]></description>
			<content:encoded><![CDATA[<p>
<p>たしかに携帯電話としては色々問題はある気もするけど、パソコンのメールもRSSもtwitterも全部見れるので、朝家でメールチェックしてるうちにいつのまにかLDR見てて時間が経っているという事がなくなって良かった。</p>
<p>他の買った人はみんなiPhone買ったと言わずにi.softbank.jpのメアドだけ送ってくる。</p>
<p>■発見方法<br /><br />
先週の土曜の朝に何店か回って2時間ぐらいであきらめたんだけど、最後に電話した近所のダイクマのお姉さんが「入荷時期は言えないが予約しますか」と言う。契約に時間がかかる事は知っていたので、最近忙しくて平日にたまたま売っている店を見つけても契約する時間が無くて買い逃しそうだったので予約してみた。</p>
<p>3時間後に「入荷しました」と連絡が入り、すぐ取りに行った。</p>
<p>auからMNPした。移行した瞬間に、ケータイがつながらなくなった<br /><br />
<a title="DSCF2513 by shokai, on Flickr" href="http://www.flickr.com/photos/shokai/2679967279/"><img src="http://farm4.static.flickr.com/3008/2679967279_4421e865ee_m.jpg" alt="DSCF2513" width="240" height="180" /></a><br /><br />
auに電話して、「MNP予約番号」という何週間か有効なIDをもらい、それをsoftbankに持って行って免許証などで本人確認すると番号を移転できるらしい。</p>
<p>softbankのシステムはダウンしていて、結局自分のPCでアクティベートした。なのでYahooボタンとかがインストールされていない。</p>
<p>■設定<br /><br />
bootcampなので、音楽とpodcastとAppStoreはWindows、メールとアドレス帳はMacとシンクロしている。その辺が細かくできるので良い。MobileMeはiTunes上で登録画面が出たのでアカウント取ったが使い方がわからない。</p>
<p>アドレス帳はsoftbankでもらったツールの使い方がよくわからなかったけど、W51S→メモリースティックにアドレス帳書き出し(VCF形式)→Macでアドレスブックにドラッグアンドドロップ→iTunesでsyncで移行できた。<br /><br />
やっぱ基本的にMacと相性が良いように出来ている気がする。</p>
<p>5A347にアップデートしたらちょっと日本語入力速くなった気がする→<a href="http://xzzx.blog98.fc2.com/blog-entry-387.html">iPhone 2.0 ソフトウェア・アップデート【5A347】恐龍の卵</a><br /><br />
でもしばらく使っていると遅くなるので、たまに再起動する。</p>
<p>■safari<br /><br />
よく落ちるけど、bookmarkletも使えるし、表示している画面のURIが見えるというのがとても快適。<br /><br />
<a href="http://www.flickr.com/photos/shokai/2680792104/" title="DSCF2527 by shokai, on Flickr"><img src="http://farm4.static.flickr.com/3173/2680792104_f5dfb16f21_m.jpg" width="180" height="240" alt="DSCF2527" /></a><a href="http://www.flickr.com/photos/shokai/2680790506/" title="DSCF2524 by shokai, on Flickr"><img src="http://farm4.static.flickr.com/3204/2680790506_7267fbace9_m.jpg" width="180" height="240" alt="DSCF2524" /></a></p>
<p><a href="http://www.flickr.com/photos/shokai/2680791560/" title="DSCF2526 by shokai, on Flickr"><img src="http://farm4.static.flickr.com/3112/2680791560_826ff1ea61_m.jpg" width="240" height="180" alt="DSCF2526" /></a></p>
<p>■SMS<br /><br />
Twitterやmixinやjaikuなど海外のwebサービスはSMSで使えるようになっている。これ便利。<br /><br />
海外からのSMS受信は無料(海外への送信は有料)なので→<a href="http://mb.softbank.jp/mb/iphone/mail/sms.html">SMS|SoftBank</a><br /><br />
受信には便利。ただtwitterは1週間に250通の制限があるのでユーザ絞らないと制限超える。<br /><br />
番号は国番号から入れるので、日本は81だから090-1111-1111だったら+81-90-1111-1111にすれば良い。<br /><br />
<a href="http://www.flickr.com/photos/shokai/2680790082/" title="DSCF2523 by shokai, on Flickr"><img src="http://farm4.static.flickr.com/3257/2680790082_6c47c4a0ec.jpg" width="500" height="375" alt="DSCF2523" /></a></p>
<p>■ロック<br /><br />
iPhoneにいろいろ入っていると落とした時ヤバそう。一応、起動時のロックかけた。</p>
<p>■SIMロック<br /><br />
本体はロックがかかっていて、日本のiPhone用のSIMでなければ認識しないが<br /><br />
SIMロックフリーの3G対応ケータイにiPhone用のSIMを刺したら普通に使えた。<br /><br />
ふつう、SIM自体にPIN番号というSIMを勝手に使えなくするパスワードをかける事ができるんだけどそれができないのがちょっと怖い。</p>
</p>
]]></content:encoded>
			<wfw:commentRss>http://shokai.org/blog/archives/1556/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

