<?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>hazumu.net/blog</title>
	<atom:link href="http://hazumu.net/blog/feed/" rel="self" type="application/rss+xml" />
	<link>http://hazumu.net/blog</link>
	<description>ゆるふわWebデベロッピング</description>
	<lastBuildDate>Tue, 13 Mar 2012 09:28:32 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>CSSを圧縮するとMediaqueryが効かない。。。というか文法ミス</title>
		<link>http://hazumu.net/blog/2012/03/13/css%e3%82%92%e5%9c%a7%e7%b8%ae%e3%81%99%e3%82%8b%e3%81%a8mediaquery%e3%81%8c%e5%8a%b9%e3%81%8b%e3%81%aa%e3%81%84%e3%80%82%e3%80%82%e3%80%82%e3%81%a8%e3%81%84%e3%81%86%e3%81%8b%e6%96%87%e6%b3%95/</link>
		<comments>http://hazumu.net/blog/2012/03/13/css%e3%82%92%e5%9c%a7%e7%b8%ae%e3%81%99%e3%82%8b%e3%81%a8mediaquery%e3%81%8c%e5%8a%b9%e3%81%8b%e3%81%aa%e3%81%84%e3%80%82%e3%80%82%e3%80%82%e3%81%a8%e3%81%84%e3%81%86%e3%81%8b%e6%96%87%e6%b3%95/#comments</comments>
		<pubDate>Mon, 12 Mar 2012 16:43:30 +0000</pubDate>
		<dc:creator>hazumu</dc:creator>
				<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://hazumu.net/blog/?p=172</guid>
		<description><![CDATA[CSSを圧縮したらメディアクエリが効かなくなりました もとのスタイル @media screen and (max-width: 1024px) { body &#123; background-color:red; &#125; &#125; 圧縮後 @media screen and(max-width:1024px){body{background-color:red;}} こうなるとメディアクエリが効かなくなりました。 何が原因？？ 結論からいうと、andと(の間のスペースが削除されたことが原因でした。 ここのスペースが抜けるとメディアクエリが利用できなくなるようです。 テスト1 @media screen and (max-width:1024px) →OK テスト2 @media screen and(max-width:1024px) →NG テスト3 @media(max-width:1024px) →OK 圧縮ツールは？ YUI Compressorを利用していました。 どうやら、この不具合はバージョン2.4.2以下で発生するようです。 2.4.6、2.4.7で試したところ問題はありませんでした。 古い圧縮ツールをご利用の方はご注意を。。 新しいYUI Compressorはこちらからダウンロードできます。 Downloads: YUI Compressor]]></description>
		<wfw:commentRss>http://hazumu.net/blog/2012/03/13/css%e3%82%92%e5%9c%a7%e7%b8%ae%e3%81%99%e3%82%8b%e3%81%a8mediaquery%e3%81%8c%e5%8a%b9%e3%81%8b%e3%81%aa%e3%81%84%e3%80%82%e3%80%82%e3%80%82%e3%81%a8%e3%81%84%e3%81%86%e3%81%8b%e6%96%87%e6%b3%95/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WordPressにいいねボタンを追加する方法（HTML5バージョン）</title>
		<link>http://hazumu.net/blog/2012/03/10/wordpress%e3%81%ab%e3%81%84%e3%81%84%e3%81%ad%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e8%bf%bd%e5%8a%a0%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95%ef%bc%88html5%e3%83%90%e3%83%bc%e3%82%b8%e3%83%a7%e3%83%b3/</link>
		<comments>http://hazumu.net/blog/2012/03/10/wordpress%e3%81%ab%e3%81%84%e3%81%84%e3%81%ad%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e8%bf%bd%e5%8a%a0%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95%ef%bc%88html5%e3%83%90%e3%83%bc%e3%82%b8%e3%83%a7%e3%83%b3/#comments</comments>
		<pubDate>Fri, 09 Mar 2012 18:52:46 +0000</pubDate>
		<dc:creator>hazumu</dc:creator>
				<category><![CDATA[facebook]]></category>

		<guid isPermaLink="false">http://hazumu.net/blog/?p=153</guid>
		<description><![CDATA[ブログ改修中です。 このブログを改修するにあたって、facebookの「いいね！」ボタンを追加することにしました。 以前はプラグインを適当に利用していたのですが、ちゃんとやろうと思ったら大変だったのでメモ。 ※参考 WordPressに『いいね』ボタンを設置 / Facebook基礎 こちらの記事を参考にさせていただきました。 この記事と違うところがいくつかあったのでそこを記述します。 アプリIDを取得 まずは、アプリIDを取得します。上から準に App Name：自分のブログの名前 App Namespace：未入力 Web Hosting：チェックしない でcontinueをクリックすると。文字認証ページ「Security Check Required」が出てくるので表示された文字を入力して次へ進みます。 余談ですが、Web Hostingサービスできたんですね。。 「いいね！」ボタン設置 「いいね！」ボタン作成フォームで、必要な情報を入力して、コードを作成。 Like Button &#8211; Facebook Developers 作成ボタンをクリックすと以下のようなコードが作成されます。 1.JavaScript SDK &#60;div id=&#34;fb-root&#34;&#62;&#60;/div&#62; &#60;script&#62;&#40;function&#40;d, s, id&#41; &#123; var js, fjs = d.getElementsByTagName&#40;s&#41;&#91;0&#93;; if &#40;d.getElementById&#40;id&#41;&#41; return; js = d.createElement&#40;s&#41;; js.id = id; js.src = &#34;//connect.facebook.net/en_US/all.js#xfbml=1&#38;appId=**********&#34;; [...]]]></description>
		<wfw:commentRss>http://hazumu.net/blog/2012/03/10/wordpress%e3%81%ab%e3%81%84%e3%81%84%e3%81%ad%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e8%bf%bd%e5%8a%a0%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95%ef%bc%88html5%e3%83%90%e3%83%bc%e3%82%b8%e3%83%a7%e3%83%b3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Titanium mobileで実機転送できない</title>
		<link>http://hazumu.net/blog/2012/03/07/titanium-mobile%e3%81%a7%e5%ae%9f%e6%a9%9f%e8%bb%a2%e9%80%81%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%84/</link>
		<comments>http://hazumu.net/blog/2012/03/07/titanium-mobile%e3%81%a7%e5%ae%9f%e6%a9%9f%e8%bb%a2%e9%80%81%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%84/#comments</comments>
		<pubDate>Tue, 06 Mar 2012 16:39:09 +0000</pubDate>
		<dc:creator>hazumu</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Titanium]]></category>

		<guid isPermaLink="false">http://hazumu.net/blog/?p=123</guid>
		<description><![CDATA[iPhoneアプリ作ってます。 iOS5の実機に転送できなかったときのメモ ※iOS4ではできてました。 １. xcodeとTitanium SDKのバージョン確認 xcode 4.2 Titanium Mobile SDK 1.7.X まず、xcodeは4.2以上でないとiOS5の開発ができません。 しかし、xcode4.3にしてしまうと、今度はTitanium SDKが使えなくなります。（※執筆時） なので4.2を選択。 ※4.3をインストールしてしまい古いバージョンを落としたい人はこちらから。 Downloads for Apple Developers 2. プロビジョニングファイルの確認 開発環境をととのえても、実機転送できず。訳が分からないので、最初からやり直す事に。 なにやら、ログに「アプリ名と、プロビジョニングフィアルが一致しません」のような事が出ていたので、とりあえずプロビジョニングの設定を確認。 Provisioning Profiles &#8211; iOS Provisioning Portal &#8211; Apple DeveloperのProvisioning Profileに設定してある、アプリの名前と、Titanium Studioで設定してあるプロジェクトのフォルダ名が違う事を発見。 修正すると別のバグでコンパイルエラー。3へ。 3. Certificateの確認 2の修正をすると、今度は以下のエラー CodeSign error: Certificate identity &#8216;iPhone Developer: （アカウント）&#8217; appears more than once in the keychain. The [...]]]></description>
		<wfw:commentRss>http://hazumu.net/blog/2012/03/07/titanium-mobile%e3%81%a7%e5%ae%9f%e6%a9%9f%e8%bb%a2%e9%80%81%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%84/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>macにnode.jsをインストール</title>
		<link>http://hazumu.net/blog/2011/11/01/mac%e3%81%abnode-js%e3%82%92%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab/</link>
		<comments>http://hazumu.net/blog/2011/11/01/mac%e3%81%abnode-js%e3%82%92%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab/#comments</comments>
		<pubDate>Mon, 31 Oct 2011 15:59:18 +0000</pubDate>
		<dc:creator>hazumu</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[node]]></category>

		<guid isPermaLink="false">http://hazumu.net/blog/?p=116</guid>
		<description><![CDATA[社内カンファレンスでnode.jsの話を聞いて触りたくなったので手元のmacにインストールしてみました。忘れては行けないのでログ 参考：Node.jsとnvmを初めてインストールするときのハマりポイントと対策 参考元にあった通り、nvmをgitから落としてきて。。 bashを使ってるのでスムーズに行きます。 $ git clone git://github.com/creationix/nvm.git ~/.nvm $ source ~/.nvm/nvm.sh とりあえず最新の安定板をインストール $ nvm install v0.4.11 で $ node うごいた！ てか、いつの間にmacでgitコマンドが使えるようになってたんだ。。]]></description>
		<wfw:commentRss>http://hazumu.net/blog/2011/11/01/mac%e3%81%abnode-js%e3%82%92%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>macのターミナルでビープ音を消す</title>
		<link>http://hazumu.net/blog/2011/10/19/mac%e3%81%ae%e3%82%bf%e3%83%bc%e3%83%9f%e3%83%8a%e3%83%ab%e3%81%a7%e3%83%93%e3%83%bc%e3%83%97%e9%9f%b3%e3%82%92%e6%b6%88%e3%81%99/</link>
		<comments>http://hazumu.net/blog/2011/10/19/mac%e3%81%ae%e3%82%bf%e3%83%bc%e3%83%9f%e3%83%8a%e3%83%ab%e3%81%a7%e3%83%93%e3%83%bc%e3%83%97%e9%9f%b3%e3%82%92%e6%b6%88%e3%81%99/#comments</comments>
		<pubDate>Wed, 19 Oct 2011 13:42:33 +0000</pubDate>
		<dc:creator>hazumu</dc:creator>
				<category><![CDATA[mac]]></category>

		<guid isPermaLink="false">http://hazumu.net/blog/?p=112</guid>
		<description><![CDATA[ホームディレクトリに vi .inputrc というファイルを作成。 set bell-style none と記述して保存。 その後、ターミナルを再起動すれば完了。]]></description>
		<wfw:commentRss>http://hazumu.net/blog/2011/10/19/mac%e3%81%ae%e3%82%bf%e3%83%bc%e3%83%9f%e3%83%8a%e3%83%ab%e3%81%a7%e3%83%93%e3%83%bc%e3%83%97%e9%9f%b3%e3%82%92%e6%b6%88%e3%81%99/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>参考にしているスマートフォンサイト4選（Webアプリ）2011秋</title>
		<link>http://hazumu.net/blog/2011/09/21/%e5%8f%82%e8%80%83%e3%81%ab%e3%81%97%e3%81%a6%e3%81%84%e3%82%8b%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e3%82%b5%e3%82%a4%e3%83%884%e9%81%b8%ef%bc%88web%e3%82%a2%e3%83%97/</link>
		<comments>http://hazumu.net/blog/2011/09/21/%e5%8f%82%e8%80%83%e3%81%ab%e3%81%97%e3%81%a6%e3%81%84%e3%82%8b%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e3%82%b5%e3%82%a4%e3%83%884%e9%81%b8%ef%bc%88web%e3%82%a2%e3%83%97/#comments</comments>
		<pubDate>Wed, 21 Sep 2011 12:48:35 +0000</pubDate>
		<dc:creator>hazumu</dc:creator>
				<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://hazumu.net/blog/?p=102</guid>
		<description><![CDATA[はじめに スマートフォンが市場に多く出回り始めるにつれ、ネット系企業もこぞって自社のサービスや、コーポレートサイトをスマートフォンに最適化してきています。 そんななか、私が開発する際に参考にしているスマートフォンに最適化されたサイトをいくつか紹介したいと思います。 ※基本iPhoneで表示確認しています。 Apple 言わずとしれたスマホ時代の仕掛人です。ただ、そのAppleはスマホサイトとPCのサイトに同じものを表示していると有名ですが・・ ここがすごい ・SVGで書かれたグローバルナビ サイト自体は同じものを表示しているのですが、グローバルナビゲーションはロゴとフォントをSVGで描画してあります（PCで開くとpng画像）。なので、iPhoneで拡大縮小を行っても、美しいグローバルナビゲーションを見られることになります。些細ですが、さすがですね。。 Apple Gmail WebメーラーのGmailもスマホ対応しています。Webクリップアイコンも用意してあり、一見アプリと見間違う程の出来です。 ここがすごい ・オフラインの動作 Gmailのスマホ版はオフラインでも動きます。どうやら初回ダウンロードの時点でWeb SQL Databaseに、過去のメールスレッドを保存し、キャッシュマニフェストを使ってファイルをすべてローカルに保存しているようです。なので、オフライン時でも、メーラーにたまった最近のメールを閲覧することもでき、さらには下書き保存することもできます。 ・引っ張って更新 iPhoneのツイッタークライアントに実装されている、下に引っ張って更新するUIもJavaScriptで実装してあり、ネイティブのアプリ顔負けの体験を提供してくれます。 Gmail Yahoo! 最近、CEOが解任されてしまった米Yahoo!ですが、スマホサイトに関しては草分けになったのではないでしょうか。 ここがすごい ・カルーセルだらけ 画面サイズにより表示できる情報量が減ってしまう、スマホサイトですが、カルーセルを数多く使い、使い心地が悪くならない方法でポータルサイトとしての情報量を担保しています。しかし、ここまで大量のカルーセルを利用するとは大胆ですね。。 Yahoo! vimeo カンファレンスの動画がよくあがっている動画共有サイトです。 ここがすごい ・起動時の画像 Webクリップから起動すると、ネイティブのアプリと同じく起動時に、ロゴが入った起動画面が表示されます。さらに、同様の起動方法で起動させると、アドレスバーも表示されず一見アプリと区別がつきません。 ・動画ページへの遷移が気持ちいい 一覧ページから動画詳細ページに横スライドで遷移しています。この遷移のスピードがなんともぬるぬるしていて気持ちがいいです。 vimeo まとめ スマホのページ最適化には以下の手法が現在の主流となっているようです。 PC版を最適化して同じものを表示 タッチUIであることを考慮して、PC版リンク領域を広くしたり、画像の最適化を行いPC版をスマホでも利用しやすくしています。他と比べて運用がかなり楽そうです。 ex.)Apple、New York Times ネイティブのアプリケーションに近づける Webの基本であるリンクでのページ遷移をなくし、各機能を持ったHTMLをAjaxで読み込むタイプのWebサイトです。Webアプリと呼ばれるものですね。 ex.))Gmail、Flikr、vimeo、YouTube、Gree スマホ用のページを準備する スマートフォン用に最適化されたWebサイトを用意する形です。 ex.)Yahoo!、Yahoo! JAPAN、ライブドア レスポンシブ・ウェブデザイン PC版をそのまま表示させているものですが、こちらは、デバイスの大きさによってCSSやJavaScriptでUIをかえています。コーポレートサイトとかは、このパターンが増えているような。 ex.)Web Designer Wall、Media Queries（利用したサイト一覧） これらの手法を吟味しつつ、お客様に対して提供したい情報の種類によってどの手法をとるかを選ぶべきなのですね。]]></description>
		<wfw:commentRss>http://hazumu.net/blog/2011/09/21/%e5%8f%82%e8%80%83%e3%81%ab%e3%81%97%e3%81%a6%e3%81%84%e3%82%8b%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e3%82%b5%e3%82%a4%e3%83%884%e9%81%b8%ef%bc%88web%e3%82%a2%e3%83%97/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Safariって配列のイテレーションがつかえるのね。</title>
		<link>http://hazumu.net/blog/2011/05/08/safari%e3%81%a3%e3%81%a6%e9%85%8d%e5%88%97%e3%81%ae%e3%82%a4%e3%83%86%e3%83%ac%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%8c%e3%81%a4%e3%81%8b%e3%81%88%e3%82%8b%e3%81%ae%e3%81%ad%e3%80%82/</link>
		<comments>http://hazumu.net/blog/2011/05/08/safari%e3%81%a3%e3%81%a6%e9%85%8d%e5%88%97%e3%81%ae%e3%82%a4%e3%83%86%e3%83%ac%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%8c%e3%81%a4%e3%81%8b%e3%81%88%e3%82%8b%e3%81%ae%e3%81%ad%e3%80%82/#comments</comments>
		<pubDate>Sat, 07 May 2011 15:30:17 +0000</pubDate>
		<dc:creator>hazumu</dc:creator>
				<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://hazumu.net/blog/?p=97</guid>
		<description><![CDATA[Safariでforeachが用意されていた件。 [1,2,4].forEach(function(elm){ alert(elm) }); // 1 // 2 // 4 Firefox4でもつかえたよ！]]></description>
		<wfw:commentRss>http://hazumu.net/blog/2011/05/08/safari%e3%81%a3%e3%81%a6%e9%85%8d%e5%88%97%e3%81%ae%e3%82%a4%e3%83%86%e3%83%ac%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%8c%e3%81%a4%e3%81%8b%e3%81%88%e3%82%8b%e3%81%ae%e3%81%ad%e3%80%82/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>HTML5の基礎用語を理解しておく</title>
		<link>http://hazumu.net/blog/2011/04/10/html5%e3%81%ae%e5%9f%ba%e7%a4%8e%e7%94%a8%e8%aa%9e%e3%82%92%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e3%81%8a%e3%81%8f/</link>
		<comments>http://hazumu.net/blog/2011/04/10/html5%e3%81%ae%e5%9f%ba%e7%a4%8e%e7%94%a8%e8%aa%9e%e3%82%92%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e3%81%8a%e3%81%8f/#comments</comments>
		<pubDate>Sat, 09 Apr 2011 18:29:43 +0000</pubDate>
		<dc:creator>hazumu</dc:creator>
				<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://hazumu.net/blog/?p=66</guid>
		<description><![CDATA[はじめに HTML5で正しいマークアップするためには「カテゴリー」、「コンテンツモデル」など今までのHTMLにはなかった用語を理解する必要があります。 参考文献を読んでもいまいちしっくりこないので自分の言葉でまとめてみようと思います。W3Cのドラフトから一次情報でがんばってみようかと。 英文が訳せなかったり、いまいちわからないところは「徹底解説HTML5マークアップガイドブック」を参考にさせていただきました。 まずはコンテンツ(content)の意味が・・ W3Cのドラフトを読んでいくとコンテンツ(contents)という単語を何度も見かけます。 コンテンツモデルという言葉自体にも含まれています。少し調べてみましたが以下の認識で大丈夫ではないでしょうか。 コンテンツ　＝　開始タグと終了タグに囲まれたすべてのもの Elements can also have content, including other elements and text. 参考：HTML_element &#8211; Wikipedia The element content is everything between the start and the end tag 参考：HTML Elements 基礎の基礎であるコンテンツの意味が分かったところで早速用語まとめへ。 用語まとめ ・カテゴリー 要素を同様の特性でカテゴリ化したものです。 「h1とh2って特性が似てるから同じグループでまとめようぜ！」ということです。 ・コンテンツモデル あるHTML要素が囲むべきコンテンツを定めたものです。 要素は、その要素のコンテンツモデルに従ったカテゴリのコンテンツしか囲めません。 例えば、p要素のコンテンツモデルはフレージングコンテンツ(後述)です。つまり、フレージングコンテンツというカテゴリに属す要素しか囲むことができません。したがって、カテゴリがフレージングコンテンツでない、section、div、h1などは囲むことができないということになります。 ・メタデータコンテンツ メタデータコンテンツ以外のコンテンツの動作や、スタイルを設定することができます。 ドキュメントと他のドキュメントを関連づけることができます。外部スタイルシートとか、外部のJavaScriptファイルとか。 ex:link style meta script &#8230; ・フローコンテンツ bodyタグの下におかれるものがフローコンテンツにあたります。 メタデータコンテンツの一部をのぞいてほとんどですね。 [...]]]></description>
		<wfw:commentRss>http://hazumu.net/blog/2011/04/10/html5%e3%81%ae%e5%9f%ba%e7%a4%8e%e7%94%a8%e8%aa%9e%e3%82%92%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e3%81%8a%e3%81%8f/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>iOSのアクセラレーターが使えるCSS3</title>
		<link>http://hazumu.net/blog/2011/02/24/css3%e3%81%a7ios%e3%81%ae%e3%82%a2%e3%82%af%e3%82%bb%e3%83%a9%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%82%92%e4%bd%bf%e3%81%86/</link>
		<comments>http://hazumu.net/blog/2011/02/24/css3%e3%81%a7ios%e3%81%ae%e3%82%a2%e3%82%af%e3%82%bb%e3%83%a9%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%82%92%e4%bd%bf%e3%81%86/#comments</comments>
		<pubDate>Thu, 24 Feb 2011 14:53:18 +0000</pubDate>
		<dc:creator>hazumu</dc:creator>
				<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://hazumu.net/blog/?p=44</guid>
		<description><![CDATA[はじめに iPhoneやiPadなどiOSに組み込まれているmobile SafariでJavaScriptを使ったアニメーションを動かすと動作が遅くなる事があります。 そこで、CSS3のアニメーションを利用して軽快なUIを実装しようという風潮が高まっているのですが、実はすべてのCSS3アニメーションがmobile safariで軽快に動くという訳ではないようです。 CSS3のアニメーションが軽快に動く(と言われている)理由 結論からいうと、safariというソフトウェアの力だけでなく、iPhoneやiPadのハードウェアの力を借りられるからです。 そういった、ハードウェアのことをアクセラレーターと呼ぶようです。詳しくは参考ページをご覧ください。 ※参考 Hardware acceleration &#8211; Wikipedia, the free encyclopedia アクセラレータとは【accelerator】 &#8211; 意味/解説/説明/定義 ： IT用語辞典 GPUとは【Graphics Processing Unit】 &#8211; 意味/解説/説明/定義 ： IT用語辞典 しかし先に述べた通りCSS3でアニメーションを書いたからといってすべてがアクセラレーターを利用して軽快に動作するとは限りません。 実際に、iPhoneのmobile safariのアクセラレーターがどこで動いているか見てみます。 アクセラレーターが機能している箇所を見る方法 お手元のmacにiOSシュミレーターをインストールして、ターミナルを開いて以下のコマンドを入力してください。 CA_COLOR_OPAQUE=1 /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\ Simulator.app/Contents/MacOS/iPhone\ Simulator すると画像のように色がついた状態でシュミレーターが立ち上がります。 そして、赤い色がついているところがアクセラレーターが効いているところです。 アクセラレーターの動作を見えるようにしたところで、CSS3でアニメーションを書いてみましょう。 実験方法 今回使用するサンプルは、表示という黄色いボタンを押すと、青いボックスが、画面左からスライドインしてくるものです。 アクセラレーターが作動している箇所は赤く表示されます。もし、青いボックスがアニメーションしているときにアクセラレーターが作動していたら青いボックスごと赤いオーバーレイがかかるはずです。 サンプル１〜３（アクセラレーターが作動しない） サンプル1 サンプル１は、マイナスマージンを利用して左側に隠した青いボックスを、CSS3のkeyframesアニメーションを利用して動かします。 #slideMenu.slideIn &#123; -webkit-animation-timing-function: ease; -webkit-animation-duration: 350ms; -webkit-animation-name: slidein; margin-left:0px; [...]]]></description>
		<wfw:commentRss>http://hazumu.net/blog/2011/02/24/css3%e3%81%a7ios%e3%81%ae%e3%82%a2%e3%82%af%e3%82%bb%e3%83%a9%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%82%92%e4%bd%bf%e3%81%86/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>mac購入後(2) – vim インストール</title>
		<link>http://hazumu.net/blog/2011/02/13/mac%e8%b3%bc%e5%85%a5%e5%be%8c2-%e2%80%93-vim-%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab/</link>
		<comments>http://hazumu.net/blog/2011/02/13/mac%e8%b3%bc%e5%85%a5%e5%be%8c2-%e2%80%93-vim-%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab/#comments</comments>
		<pubDate>Sun, 13 Feb 2011 07:27:33 +0000</pubDate>
		<dc:creator>hazumu</dc:creator>
				<category><![CDATA[vim]]></category>

		<guid isPermaLink="false">http://hazumu.net/blog/?p=34</guid>
		<description><![CDATA[やること vimのインストール vimrc設定 プラグインを入れる 1、vimのインストール こちらの記事を参考にしながら、MacVim-KaoriYaをインストールしました。 Mac OSXでのvim環境整理。.vimrcやらオヌヌメPlug inやらまとめ。CommentsAdd Star 2、vimrc設定 学生時代に先輩からもらった設定ファイルに自分でつぎはぎしたものを利用しているため、とても見せられるものではありません。。＞＜ とりあえず、お気に入りの設定だけメモメモ。(ファイルを紛失したときのために) ・基本 &#34; ビープ音を消す set vb t_vb= ・検索関係 &#34; 大文字小文字を判別なし set ignorecase &#34; 大文字小文字が混ざって入力されたら区別 set smartcase &#34; 検索文字列を色づけ set hlsearch &#34; インクリメンタルサーチ set incsearch ・インデント &#34; タブの左側にカーソル表示 set listchars=tab:&#62;\ set list &#34; タブ幅 set tabstop=4 set shiftwidth=4 &#34; 自動インデントを有効にする :set autoindent ・ステータスライン &#34; [...]]]></description>
		<wfw:commentRss>http://hazumu.net/blog/2011/02/13/mac%e8%b3%bc%e5%85%a5%e5%be%8c2-%e2%80%93-vim-%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

