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

<channel>
	<title>WebTecNote</title>
	<atom:link href="http://tenderfeel.xsrv.jp/feed/" rel="self" type="application/rss+xml" />
	<link>http://tenderfeel.xsrv.jp</link>
	<description>一人「MooTools」という沼にズブズブ嵌まっていき…気がつけば変人扱い……</description>
	<pubDate>Fri, 27 Jan 2012 16:15:21 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.7.1</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Aptana Studio 3のこと（その２：使い方等）　</title>
		<link>http://tenderfeel.xsrv.jp/memo/1193/</link>
		<comments>http://tenderfeel.xsrv.jp/memo/1193/#comments</comments>
		<pubDate>Tue, 10 Jan 2012 03:47:18 +0000</pubDate>
		<dc:creator>Tenderfeel</dc:creator>
		
		<category><![CDATA[Memo]]></category>

		<category><![CDATA[Aptana]]></category>

		<guid isPermaLink="false">http://tenderfeel.xsrv.jp/?p=1193</guid>
		<description><![CDATA[				Aptana3のβが出た頃に前のまとめを書いたんだけど、
				βが取れた後もWebStormなどの波に揉まれつつ相変わらずAptanaを使っているので
				前の記事に載せてない機能や使い方などについてまと [...]]]></description>
		<wfw:commentRss>http://tenderfeel.xsrv.jp/memo/1193/feed/</wfw:commentRss>
		</item>
		<item>
		<title>[js] WebStorageのサポートチェック</title>
		<link>http://tenderfeel.xsrv.jp/javascript/1192/</link>
		<comments>http://tenderfeel.xsrv.jp/javascript/1192/#comments</comments>
		<pubDate>Wed, 28 Dec 2011 06:37:22 +0000</pubDate>
		<dc:creator>Tenderfeel</dc:creator>
		
		<category><![CDATA[Javascript]]></category>

		<category><![CDATA[HTML5API]]></category>

		<guid isPermaLink="false">http://tenderfeel.xsrv.jp/?p=1192</guid>
		<description><![CDATA[				LocalStorage や SessionStorageが使えるかどうか確認する時の条件について。
				未サポート機種であればwindowにlocalStorageやsessionStorageというプロパ [...]]]></description>
		<wfw:commentRss>http://tenderfeel.xsrv.jp/javascript/1192/feed/</wfw:commentRss>
		</item>
		<item>
		<title>[js,css] テンキーがついているスマートフォンの罠</title>
		<link>http://tenderfeel.xsrv.jp/memo/1189/</link>
		<comments>http://tenderfeel.xsrv.jp/memo/1189/#comments</comments>
		<pubDate>Tue, 27 Dec 2011 03:51:49 +0000</pubDate>
		<dc:creator>Tenderfeel</dc:creator>
		
		<category><![CDATA[Memo]]></category>

		<category><![CDATA[Android]]></category>

		<guid isPermaLink="false">http://tenderfeel.xsrv.jp/?p=1189</guid>
		<description><![CDATA[				Androidを爆発し隊・投げ捨て隊に所属するみなさん、
				ますますスマホ戦線が活発化する中いかがお過ごしでしょうか。
				スマホといえばiPhoneがその美しいデザインでこれぞスマホ！という概念を決定 [...]]]></description>
		<wfw:commentRss>http://tenderfeel.xsrv.jp/memo/1189/feed/</wfw:commentRss>
		</item>
		<item>
		<title>[js] 画像をDataURLに変換するツール</title>
		<link>http://tenderfeel.xsrv.jp/mootools/1188/</link>
		<comments>http://tenderfeel.xsrv.jp/mootools/1188/#comments</comments>
		<pubDate>Mon, 19 Dec 2011 05:04:37 +0000</pubDate>
		<dc:creator>Tenderfeel</dc:creator>
		
		<category><![CDATA[Javascript]]></category>

		<category><![CDATA[MooTools]]></category>

		<category><![CDATA[Drag&Drop]]></category>

		<category><![CDATA[File API]]></category>

		<guid isPermaLink="false">http://tenderfeel.xsrv.jp/?p=1188</guid>
		<description><![CDATA[				中身はDrag&#038;Drop + File API なので何番煎じなんだか分からないけれども…
				
				ブックマークするならこちら
				できること
				
				画像ファイルをドラッグ＆ド [...]]]></description>
		<wfw:commentRss>http://tenderfeel.xsrv.jp/mootools/1188/feed/</wfw:commentRss>
		</item>
		<item>
		<title>[js] iScroll4でform要素が動作しなくなる問題</title>
		<link>http://tenderfeel.xsrv.jp/javascript/1184/</link>
		<comments>http://tenderfeel.xsrv.jp/javascript/1184/#comments</comments>
		<pubDate>Mon, 17 Oct 2011 08:49:04 +0000</pubDate>
		<dc:creator>Tenderfeel</dc:creator>
		
		<category><![CDATA[Javascript]]></category>

		<category><![CDATA[iScroll]]></category>

		<category><![CDATA[Mobile]]></category>

		<guid isPermaLink="false">http://tenderfeel.xsrv.jp/?p=1184</guid>
		<description><![CDATA[				テキストボックスとかセレクトメニューとかをタップしても動かなくなる症状が出る事があります。
				その解決方法についてのメモです。
				デモより抜粋
				form要素があるiScrollに下記オプションを設定すれば動くようになります。
				PLAIN TEXT
				JavaScript:
				
				
				
				
				var myScroll = new iScroll&#40;'wrapper',&#123;
				
				
				&#160; &#160; onBeforeScrollStart: function &#40;e&#41; &#123;
				
				
				&#160; &#160; &#160; &#160; var target = e.target;
				
				
				&#160; &#160; &#160; &#160; while &#40;target.nodeType != 1&#41; target = target.parentNode;
				
				
				&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; 
				
				
				&#160; &#160; &#160; &#160; if &#40;target.tagName != 'SELECT' &#38;&#38; target.tagName != 'INPUT' &#38;&#38; target.tagName != 'TEXTAREA'&#41;
				
				
				&#160; [...]]]></description>
		<wfw:commentRss>http://tenderfeel.xsrv.jp/javascript/1184/feed/</wfw:commentRss>
		</item>
		<item>
		<title>[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい</title>
		<link>http://tenderfeel.xsrv.jp/javascript/1182/</link>
		<comments>http://tenderfeel.xsrv.jp/javascript/1182/#comments</comments>
		<pubDate>Wed, 05 Oct 2011 04:32:40 +0000</pubDate>
		<dc:creator>Tenderfeel</dc:creator>
		
		<category><![CDATA[Javascript]]></category>

		<category><![CDATA[Android]]></category>

		<category><![CDATA[iphone]]></category>

		<guid isPermaLink="false">http://tenderfeel.xsrv.jp/?p=1182</guid>
		<description><![CDATA[				スマートフォンのブラウザアプリで画面の高さにきっちり収まる仕様で作っていると
				高さが足りないのでwindow.scrollToしてもアドレスバーが隠せない。
				でも隠した方が表示領域が増えるので何とかしたい。
				単純に考えればアドレスバー分bodyの高さを増やせばいい、ってことなんですが…
				
				※以下全てWebKitの話です。
				screenとwindowの高さに関する値が違う
				やっぱり一筋縄ではいかなかった。
				
				2011-10-04 1st - jsdo.it - share JavaScript, HTML5 and CSS
				直接見る
				Androidだと
				screen.height = screen.availHeight = window.innerHeight
				window.outerHeightが明らかに大きすぎるのはdevicePixelRatioの影響を受けているからで、
				 (window.outerHeight/window.devicePixelRatio) とすれば本来の値が得られる。
				OS2.2と2.3以外は見れてないのでバージョンによって違う可能性大。
				iOSだと
				3.xと4.xで値が変わる。
				iOS4
				screen.height - screen.availHeight = Status Bar Height
				screen.availHeight - window.outerHeight = Navigation Bar + Tab Bar Height
				iOS3
				screen.height が 396pxです。
				screen.height = screen.availHeight = window.outerHeight
				window.outerHeight - window.innerHeight =  Tab Bar Height (-4px)
				480 - window.innerHeight = Status Bar + Navigation Bar + Tab [...]]]></description>
		<wfw:commentRss>http://tenderfeel.xsrv.jp/javascript/1182/feed/</wfw:commentRss>
		</item>
		<item>
		<title>[css,js] Retinaディスプレイ対策</title>
		<link>http://tenderfeel.xsrv.jp/css/1180/</link>
		<comments>http://tenderfeel.xsrv.jp/css/1180/#comments</comments>
		<pubDate>Wed, 07 Sep 2011 08:11:59 +0000</pubDate>
		<dc:creator>Tenderfeel</dc:creator>
		
		<category><![CDATA[CSS]]></category>

		<category><![CDATA[CSS3]]></category>

		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://tenderfeel.xsrv.jp/?p=1180</guid>
		<description><![CDATA[				スマートフォンのRetinaディスプレイだとPCでくっきり見えてる画像がぼやけてしまう件。
				500px × 300pxの画像をRetinaディスプレイでくっきりさせたいなら
				1000px × 600pxの画像を作成してサイズを50%に指定すれば良い。
				その方法を以下に列挙する。
				
				基本
				Retinaディスプレイはdevice-pixel-ratioという値が1.5ないし2なので
				CSSなりJSなりでその値を判別して振り分ける
				CSS3 Meia Queries
				Androidで未対応機種があるため、上書きで使う方が無難。
				PLAIN TEXT
				CSS:
				
				
				
				
				@media only screen and (-webkit-min-device-pixel-ratio: 1) {
				
				
				&#125;
				
				
				@media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 1.5) {
				
				
				&#125; 
				
				
				
				
				
				スタイルシートの分離をするならこっち。
				PLAIN TEXT
				HTML:
				
				
				
				
				&#60;link rel="stylesheet" media="screen" type="text/css" href="style.css" /&#62;
				
				
				&#60;link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 1.5)" type="text/css" href="android.css" /&#62;
				
				
				&#60;link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" /&#62; 
				
				
				
				
				
				background-sizeとの併用
				２倍サイズで作った画像を等倍と同じサイズに指定してメディアクエリで上書きする。
				PLAIN TEXT
				CSS:
				
				
				
				
				.sprite&#123;
				
				
				&#160; &#160;background-image:url&#40;'sprite.png'&#41;;
				
				
				&#125;
				
				
				@media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 1.5) [...]]]></description>
		<wfw:commentRss>http://tenderfeel.xsrv.jp/css/1180/feed/</wfw:commentRss>
		</item>
		<item>
		<title>[css, css3, html] スマｰﾄフォン(iPhone, Android)ブラウザのバグまとめ</title>
		<link>http://tenderfeel.xsrv.jp/css/1177/</link>
		<comments>http://tenderfeel.xsrv.jp/css/1177/#comments</comments>
		<pubDate>Mon, 15 Aug 2011 12:14:44 +0000</pubDate>
		<dc:creator>Tenderfeel</dc:creator>
		
		<category><![CDATA[CSS]]></category>

		<category><![CDATA[Android]]></category>

		<category><![CDATA[CSS3]]></category>

		<category><![CDATA[iphone]]></category>

		<category><![CDATA[Mobile]]></category>

		<guid isPermaLink="false">http://tenderfeel.xsrv.jp/?p=1177</guid>
		<description><![CDATA[Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか、スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！]]></description>
		<wfw:commentRss>http://tenderfeel.xsrv.jp/css/1177/feed/</wfw:commentRss>
		</item>
		<item>
		<title>[jQuery] スマートフォン・タブレットPCのユーザーエージェントと判別プラグイン</title>
		<link>http://tenderfeel.xsrv.jp/jquery/1176/</link>
		<comments>http://tenderfeel.xsrv.jp/jquery/1176/#comments</comments>
		<pubDate>Fri, 12 Aug 2011 12:52:08 +0000</pubDate>
		<dc:creator>Tenderfeel</dc:creator>
		
		<category><![CDATA[jQuery]]></category>

		<category><![CDATA[jQuery.plugin]]></category>

		<category><![CDATA[Mobile]]></category>

		<guid isPermaLink="false">http://tenderfeel.xsrv.jp/?p=1176</guid>
		<description><![CDATA[				ユーザエージェント(userAgent)判別プラグインの焼き直しです。
				スマホ判別に特化させてみた。
				
				直接見る
				
				Usage
				PLAIN TEXT
				JavaScript:
				
				
				
				
				$&#40;document.body&#41;.checkSmartphone&#40; &#91;&#123;option&#125;&#93; &#41;; 
				
				
				
				
				
				対象にしたHTML要素にプラグインが得た情報に基づいたクラスを付与します。
				$.browser.agent
				プラグインが生成した情報の格納場所。キーはプラグインのオプションと同じです。
				判別ルールに関するメモ
				スマートフォンかそうでないかの判別
				Androidがフリーダムだったので見直した。
				加速度はAndroidの対応が微妙なので、現時点でuserAgent以外の何かを見るなら
				傾きとタッチに関するプロパティやイベントの有無で判断するのが手っ取り早いと思います。
				
				デバイスの確認
				Android か Appleのやつか
				傾きに関するプロパティ がある
				('orientation' in window)
				傾きに関するイベントがある
				('onorientationchange' in window)
				タッチイベントがある
				("ontouchstart" in document.documentElement)
				
				iOSの場合はiPad、Androidの場合はmobileという文字列がuserAgentに含まれていない場合に
				タブレットだと判断しますが、使用するブラウザによってはタブレット扱いになる事があります。
				orientationが取得できないシュミレーター等はPC扱いになります。
				（実機重視ってことで、困る時はセルフコメントアウト推奨）
				iPhoneの場合はフルスクリーンモードとWebViewでtrueであればブラウザ名がAppModeとなります。
				Webkit
				デフォルトブラウザとアプリのWebViewはWebkitです。
				Apple
				Mobile Safari
				
Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_3 like Mac OS X; ja-jp) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7E18 Safari/528.16

				Mercury (iOS)
				Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_3 like Mac OS X; ja-jp) AppleWebKit/528.18 (KHTML, like Gecko) Mobile/7E18
FullScreen(iOS4:4)
Mozilla/5.0 (iPhone; U; CPU iPhone OS [...]]]></description>
		<wfw:commentRss>http://tenderfeel.xsrv.jp/jquery/1176/feed/</wfw:commentRss>
		</item>
		<item>
		<title>[jQuery] ユーザエージェント(userAgent)判別プラグイン</title>
		<link>http://tenderfeel.xsrv.jp/jquery/1174/</link>
		<comments>http://tenderfeel.xsrv.jp/jquery/1174/#comments</comments>
		<pubDate>Wed, 22 Jun 2011 12:01:55 +0000</pubDate>
		<dc:creator>Tenderfeel</dc:creator>
		
		<category><![CDATA[jQuery]]></category>

		<category><![CDATA[jQuery.plugin]]></category>

		<category><![CDATA[userAgent]]></category>

		<guid isPermaLink="false">http://tenderfeel.xsrv.jp/?p=1174</guid>
		<description><![CDATA[				ユーザーエージェントからブラウザの情報をピックアップしてクラスを付与するjQueryプラグインを作ってみました。
				パソコン・スマートフォンの他に、JavaScriptの使用が可能だと思われるゲーム機・テレ [...]]]></description>
		<wfw:commentRss>http://tenderfeel.xsrv.jp/jquery/1174/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>

