<?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>The Designium - デザイニウム</title>
	<atom:link href="http://www.thedesignium.com/blog/feed" rel="self" type="application/rss+xml" />
	<link>http://www.thedesignium.com/blog</link>
	<description>Just another WordPress weblog</description>
	<pubDate>Thu, 04 Feb 2010 11:30:43 +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>ブラウザの画面サイズリサイズされてもこれでOK Tips（ActionScript3.0）</title>
		<link>http://www.thedesignium.com/blog/skill/2142</link>
		<comments>http://www.thedesignium.com/blog/skill/2142#comments</comments>
		<pubDate>Thu, 04 Feb 2010 11:30:43 +0000</pubDate>
		<dc:creator>ミズタニキリン</dc:creator>
		
		<category><![CDATA[スキル]]></category>

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

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

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

		<guid isPermaLink="false">http://www.thedesignium.com/blog/?p=2142</guid>
		<description><![CDATA[フルFlashサイトでブラウザの画面サイズが変更されてしまったときActionScriptでな～んしてないとムービークリップの大きさが画面サイズに連動して変わってしまいます。
それだと結構こまったチャンになってしまうとき [...]]]></description>
			<content:encoded><![CDATA[<p>フルFlashサイトでブラウザの画面サイズが変更されてしまったときActionScriptでな～んしてないとムービークリップの大きさが画面サイズに連動して変わってしまいます。</p>
<p>それだと結構こまったチャンになってしまうときが多いのでキリンはコピペでこれ↓をよく使います(ﾉﾟοﾟ)ﾉ ｵｵｵｵｫｫｫｫｫｫ-</p>
<p><a href="http://www.thedesignium.com/blog/wp-content/uploads/2010/02/center.swf" target="_blank">このサンプルswf</a>を見てブラウザの画面サイズを変更してもらえればわかるかと思いますが、あらま！中央にムビクリが表示させて大きさが変わらないではありませんか！ActionScript3.0です！</p>
<p><img src="http://www.thedesignium.com/blog/wp-content/uploads/2010/02/resize.gif" alt="resize" title="resize" width="388" height="352" class="alignnone size-full wp-image-2145" /></p>
<p><a href='http://www.thedesignium.com/blog/wp-content/uploads/2010/02/resize.zip'>Flaファイルダウンロード！！！</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.thedesignium.com/blog/skill/2142/feed</wfw:commentRss>
		</item>
		<item>
		<title>Processingおもしろい＆使えるライブラリ10</title>
		<link>http://www.thedesignium.com/blog/skill/2105</link>
		<comments>http://www.thedesignium.com/blog/skill/2105#comments</comments>
		<pubDate>Fri, 08 Jan 2010 06:30:59 +0000</pubDate>
		<dc:creator>ミズタニキリン</dc:creator>
		
		<category><![CDATA[スキル]]></category>

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

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

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

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

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

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

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

		<category><![CDATA[ミズタニキリンのクレイジーセンサー]]></category>

		<guid isPermaLink="false">http://www.thedesignium.com/blog/?p=2105</guid>
		<description><![CDATA[仕事でProcessingを使うことがありましたので今回はProcessingでおもしろい＆使えるライブラリ10個をリンク集スタイルでご紹介します！
01．顔認識ライブラリ
　「Face Detection Librar [...]]]></description>
			<content:encoded><![CDATA[<p>仕事でProcessingを使うことがありましたので今回はProcessingでおもしろい＆使えるライブラリ10個をリンク集スタイルでご紹介します！</p>
<p><span style="color: #b02100;"><strong>01．顔認識ライブラリ</strong></span><br />
　「<a href="http://www.bryanchung.net/?page_id=251" target="_blank">Face Detection Library</a>」を使うと顔認識ができちゃいます。導入方法は<a href="http://ameblo.jp/fujimonia/entry-10252920053.html" target="_blank">このサイト</a>で紹介されていますよ！</p>
<p><span style="color: #b02100;"><strong>02．Processingでセンサー（Phidgets編）</strong></span><br />
　ブログでもよく紹介しているPhidgets。ProcessingでPhidgetsを使えますよ♪Phidgetsのサイトの「<a href="http://www.phidgets.com/programming_resources.php" target="_blank">Programming Resources</a>」にはProcessing用のライブラリは置いていませんが、Java版をそのまま使えるようです！導入方法は<a href="http://naka.sfc.keio.ac.jp/public/2009/02/processing-phidgets/" target="_blank">このサイト</a>で紹介されていますよ！</p>
<p><span style="color: #b02100;"><strong>03．Processingでセンサー（Gainer編）</strong></span><br />
　知っている方も多いとは思いますが、GainerにもProcessingライブラリがあります！詳しくは<a href="http://gainer.cc/Tutorial/HowToUseGainerWithProcessing" target="_blank">Gainer.cc</a>で紹介されていますよ！</p>
<p><span style="color: #b02100;"><strong>04．ProcessingでAR</strong></span><br />
　「<a href="http://nyatla.jp/nyartoolkit/wiki/index.php?NyAR4psg" target="_blank">NyARToolkit for proce55ing</a>」でARできます！！やってみると楽しいですよ！ただ現在は1種類の1マーカを検出のみなので認識できるマーカーの数を増やしてもらえるとうれしいですね。</p>
<p><span style="color: #b02100;"><strong>05．メタセコイア形式データを表示するライブラリ</strong></span><br />
　「<a href="http://www.hyde-ysd.com/reco-memo/mqoview.html" target="_blank">MqoViewer Library for Processing</a>」3Dモデリングデータ使いたい！ってときは便利！</p>
<div id="more1100108-1526">
<p><span style="color: #b02100;"><strong>06．サウンド制御</strong></span><br />
　「<a href="http://sonia.pitaru.com/" target="_blank">Sonia</a>」音の逆再生や音の大きさでグラフィックを変えるできるようになります。このライブラリを使用するには「<a href="http://www.softsynth.com/jsyn/plugins/" target="_blank">JSyn Plugin</a>」が必要になりますよ！</p>
<p><span style="color: #b02100;"><strong>07．QRコード生成、読み取り</strong></span><br />
　「<a href="http://www.shiffman.net/p5/pqrcode/" target="_blank">Processing QRCode Library</a>」QRコードの生成、読み取りができます。読み取りはかなり近づかないと認識してくれません(^^;)ので生成専門で見た方がいいのかもしれません。</p>
<p><span style="color: #b02100;"><strong>08．Wiiリモコンで制御</strong></span><br />
　「<a href="http://sourceforge.jp/projects/wrj4p5/wiki/FrontPage" target="_blank">Wrj4P5</a>」WiiリモコンがProcessingで使えるようになります。楽しい！！</p>
<p><span style="color: #b02100;"><strong>09．Macの中に入っている加速度センサーを使う</strong></span><br />
　「<a href="http://www.shiffman.net/p5/sms/" target="_blank">Processing Sudden Motion Sensor Library</a>」Macの中に入っている加速度センサーを使う。</p>
<p><span style="color: #b02100;"><strong>10．ビデオライブラリ</strong></span><br />
「<a href="http://webcamxtra.sourceforge.net/" target="_blank">JMyron</a>」標準のキャプチャではできないビデオキャプチャができたり、ビデオ解析のためのライブラリです。QuickTimeを使用していないため速いです！！使用方法は<a href="http://yoppa.jpn.org/presen.php?itemid=202" target="_blank">こちらのサイト</a>で紹介されてますよ！
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.thedesignium.com/blog/skill/2105/feed</wfw:commentRss>
		</item>
		<item>
		<title>会津若松市の閉塞感を象徴するグラフとその改善策</title>
		<link>http://www.thedesignium.com/blog/sr/2092</link>
		<comments>http://www.thedesignium.com/blog/sr/2092#comments</comments>
		<pubDate>Fri, 08 Jan 2010 03:27:39 +0000</pubDate>
		<dc:creator>fujii</dc:creator>
		
		<category><![CDATA[地域/SR]]></category>

		<category><![CDATA[会津若松]]></category>

		<category><![CDATA[地域]]></category>

		<category><![CDATA[地域、会津]]></category>

		<guid isPermaLink="false">http://www.thedesignium.com/blog/?p=2092</guid>
		<description><![CDATA[冬真っ盛りの会津若松は今、雪に覆われて大変不便。気軽に出かけられないというのは若干の閉塞感を感じるものです。こんにちは藤井です。
ここで、さらに閉塞感を加速させるようなデータをご覧いただきます。
会津若松市(Wikipe [...]]]></description>
			<content:encoded><![CDATA[<p>冬真っ盛りの会津若松は今、雪に覆われて大変不便。気軽に出かけられないというのは若干の閉塞感を感じるものです。こんにちは藤井です。</p>
<p>ここで、さらに閉塞感を加速させるようなデータをご覧いただきます。</p>
<p><a href="http://ja.wikipedia.org/wiki/%E4%BC%9A%E6%B4%A5%E8%8B%A5%E6%9D%BE%E5%B8%82" target="_blank">会津若松市(Wikipedia)</a></p>
<p>注目は、このページの「年齢別人口分布」の部分です。色分けによって全国の人口分布と会津若松市のそれとを比べています。<br />
パッと見てすぐに気づきますが、会津若松市は２０～４０代の人口比率が全国と比べて極端に低いのです。いわゆる「働き盛り」の年代が完全に流出。</p>
<p>この年代が減ってしまうと、地域全体に漠然とした閉塞感、保守的な空気が漂います。</p>
<p>まだあまり失うものがない若者は積極的に革新を起こしていける立場にあります。<br />
しかし年代が上がると一般的には保守的になる傾向が強いので、街に若者がいないというのは行き詰まりの状況というか、ひたすら守りながら衰えていく一番ダメなパターンに陥る可能性が非常に高いのです。</p>
<p>もちろん若者も、数が多けりゃ良いっていうものではありませんが、量が質を生むのは間違いありません。<br />
パレートの法則と言われるように、数が増えれば増えるほど、そのうちの２割くらいは面白いことをやる人間が出てきます。</p>
<p>だからまず絶対数の確保は最低限必要な課題です。</p>
<div id="more1100108-0327">さて、その課題の解決を阻む最大の原因は「雇用」です。この年代を留めるだけの「雇用」が今の会津若松市に絶対的に足りないのです。<br />
もちろん雇用が厳しいのは会津若松市に限ったことではありませんが、少しでも状況の良いところへと移動していった結果、おかしな人口分布になってしまったということですね。</p>
<p>ならば雇用を生み出すための産業強化を、となるわけで、実際<a href="http://www.city.aizuwakamatsu.fukushima.jp/ja/joho/choki/keikaku_06/index.htm" target="_blank">会津若松市の長期総合計画</a>にも産業強化は言及されています。<br />
まあこの手の計画は八方美人でないと叩かれるので、逆に言及してないとかなり問題ですが。</p>
<p>計画中で産業について触れられてはいますが、やはり主になっているのは「観光産業」。<br />
会津圏は観光地として有名なので当然と言えば当然ですが、このまま観光産業をメインとして押していくのは、個人的にはリスキーだと思います。というのは、ここ最近の会津の産業構成がだいぶ変わってしまったからです。</p>
<p>これまで会津は大きく分けて次のような産業が柱になってきました。<br />
１．観光<br />
２．製造業<br />
３．IT産業</p>
<p>しかしSpansion Japan、富士通という２大工場がコケたことにより解雇者が続出、産業の柱としての製造業の立場が危うくなってきました。<br />
これだけの大打撃だと、もはや元の状態に戻すには相当の資金と時間をつぎ込まなくてはなりません。それよりは、将来的なリスクヘッジの意味でも別の産業を新たな柱として打ち出すべきではないかと思うのです。</p>
</div>
<div id="more1100108-0329">例えば、医療・福祉分野。看護士も男性が増えてきたとは言えまだまだ女性比率の高い産業ですので、この分野を強化し雇用を生み出せば効率良く人口を増やせます。なんと言っても男は女性のいるところに集まりますから。<br />
さらに保育・教育分野を併せて強化すれば、「ゆりかごから墓場まで」カバーできる都市の誕生です。会津若松市は教育・福祉の充実した暮らしやすい都市として移住者が増えるのでした。めでたしめでたし。<br />
　<br />
完璧だ。<br />
　<br />
医療、福祉は今思いつきで書いたんですがなかなか良いですね。もちろんそう簡単に事は運ばないと思いますが、方向としては悪くないと思います。</p>
<p>１つ新たな柱ができればその産業はもちろん、それに付随したりサポートしたりする産業も伸びていきます。IT産業との相性も悪くないのでこちらも伸びるでしょう。そうすると雇用が生まれ、若者が残る。</p>
<p>給付金や緊急雇用などの場当たり的な対策も必要ですが、長期的に見て会津の閉塞感を打ち破るには、新しい産業を伸ばして若者の雇用と新しい地域ブランドを生み出すべきではないかと思うわけです。</p>
<p>うちの近くのハローワーク前の殺人的渋滞が早く解消されますように。</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.thedesignium.com/blog/sr/2092/feed</wfw:commentRss>
		</item>
		<item>
		<title>2010年、HTML5を学ぶつもりならスマートフォンを買おう</title>
		<link>http://www.thedesignium.com/blog/skill/2082</link>
		<comments>http://www.thedesignium.com/blog/skill/2082#comments</comments>
		<pubDate>Mon, 04 Jan 2010 09:57:24 +0000</pubDate>
		<dc:creator>asai</dc:creator>
		
		<category><![CDATA[CMS]]></category>

		<category><![CDATA[スキル]]></category>

		<category><![CDATA[プライベート]]></category>

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

		<category><![CDATA[HTML/CSS]]></category>

		<guid isPermaLink="false">http://www.thedesignium.com/blog/?p=2082</guid>
		<description><![CDATA[浅井です。明けましておめでとうございます。
さて、2010年一発目の記事はHTML5についてです。
「現在」W3CのアナウンスによるとHTML5が正式に勧告されるのは2012年。
勧告候補となるのは2010年。そう、今年 [...]]]></description>
			<content:encoded><![CDATA[<p>浅井です。明けましておめでとうございます。</p>
<p>さて、2010年一発目の記事はHTML5についてです。</p>
<p>「現在」W3CのアナウンスによるとHTML5が正式に勧告されるのは2012年。<br />
勧告候補となるのは2010年。そう、今年です。（まぁ、おそらく予定はまた延び延びになりますが。）</p>
<p>※W3Cの規格策定は、Working Draft(作業草稿)→Candidate Recommendation(勧告候補)→Proposed Recommendation(勧告案)→Recommendation(勧告)と進みます。<br />
勧告になってから実装されるのではなく、たいてい勧告候補の段階で本格的な実装がスタートします。（CSS2.1なんてまだ勧告候補の状態ですから）</p>
<p>自分も少しずつHTML5の勉強を行っていますが、クライアントワークでHTML5を採用出来るのは当分先になりそうです。</p>
<p>理由はやっぱりInternet Explorer。<br />
色々な思惑があるんでしょうが、他のブラウザに比べてHTML5への対応が明らかに遅れています。<br />
その上、IE8以降でHTML5への対応が促進されたとしても未だ高シェアを誇るIE6,7がそのままなら意味がありません。<br />
PC向けのWEBにHTML5の面白さが広がるためには、どうしてもIEがネックなんですよねぇ。</p>
<p>ただ、Internet Explorerが圧倒的シェアを誇っているのは、あくまでもPCの話。<br />
スマートフォンに注目してみると事情は変わってきます。</p>
<div id="more1100104-0942">
市場調査会社ImpressR&amp;Dの「<a href="http://www.impressrd.jp/news/091210/smartphone2010" target="_blank">スマートフォン利用動向調査報告書</a>」によると、国内のスマートフォンのシェアでiphoneが占める割合は46％という数字が出ています。<br />
現時点でiphoneからのアクセスはWebkitベースのsafariが大半、さらに同じくWebkitベースのブラウザを搭載したAndroid携帯も今後増えていくことが予想されます。（今年はgoogle独自の携帯が発売されるという噂もありますね）<br />
業界一位のノキアもWebkitの採用を決定していますし、今後、スマートフォンのレンダリングエンジンはWebkitが独占状態になるんじゃないかと思っています。</p>
<p>何しろ、先の資料を見るに2007年には(W-ZERO3により支えられていた)Windows Mobile搭載のスマートフォンのシェアは3分の1以下となっている状態です。<br />
Webkitがスマートフォン界のIEになる、と考えると、良いか悪いかは微妙なところなんですが、こういった事情からHTML5はPCより先にスマートフォン側で普及していくんでしょうね。</p>
<p>HTML5の仕様的にも、特にローカルDBやアプリケーションキャッシュなどは、通信回線が増大して常時高速な状態となっているPCよりモバイルの方が有効活用出来るんじゃないかと思っています。<br />
(弊社のmixiアプリ担当を見ていると、やはりサーバー⇔クライアント間の通信の削減は重要な課題のようですし)<br />
オフラインgmailなんて、HTML5をどう活用するか？という問いへの模範的回答ですよね。</p>
<p>とりあえず、今年はiphoneでも買って、何か面白いもの作れないか色々いじってみようと思います。</p>
<p>それでは、2010年もよろしくお願いいたします。</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.thedesignium.com/blog/skill/2082/feed</wfw:commentRss>
		</item>
		<item>
		<title>マルチタッチディスプレイ vol.02</title>
		<link>http://www.thedesignium.com/blog/private/2056</link>
		<comments>http://www.thedesignium.com/blog/private/2056#comments</comments>
		<pubDate>Thu, 03 Dec 2009 07:26:23 +0000</pubDate>
		<dc:creator>ミズタニキリン</dc:creator>
		
		<category><![CDATA[プライベート]]></category>

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

		<category><![CDATA[マルチタッチディスプレイ]]></category>

		<category><![CDATA[ミズタニキリンのクレイジーセンサー]]></category>

		<guid isPermaLink="false">http://www.thedesignium.com/blog/?p=2056</guid>
		<description><![CDATA[ミズタニキリンです！今回はマルチタッチディスプレイのほぼ完成版のご紹介です。「マルチタッチディスプレイ vol.01」から時間が経ってしまいましたがようやく形になりました！！写真は反応テストをしたときのものです！！tbe [...]]]></description>
			<content:encoded><![CDATA[<p>ミズタニキリンです！今回はマルチタッチディスプレイのほぼ完成版のご紹介です。「マルチタッチディスプレイ vol.01」から時間が経ってしまいましたがようやく形になりました！！写真は反応テストをしたときのものです！！tbeta＋Flashで実装していますよ！！</p>
<div id="attachment_2060" class="wp-caption alignnone" style="width: 430px"><img class="size-thumbnail wp-image-2060" title="blog1" src="http://www.thedesignium.com/blog/wp-content/uploads/2009/12/blog1-420x370.jpg" alt="座標設定の様子" width="420" height="370" /><p class="wp-caption-text">座標設定の様子</p></div>
<p>ちょっと見難いですがアクリル板後ろから指を押しています。すると写真の通り5本指を無事反応してくれました！</p>
<div id="attachment_2061" class="wp-caption alignnone" style="width: 430px"><img class="size-thumbnail wp-image-2061" title="blog2" src="http://www.thedesignium.com/blog/wp-content/uploads/2009/12/blog2-420x370.jpg" alt="押し押しテスト" width="420" height="370" /><p class="wp-caption-text">押し押しテスト</p></div>
<div id="more1091203-1612">
<p>実際にFlashで反応を見てみるとこの通り！押したところにマーカーが出て周りにリングができたではありませんか！！</p>
<div id="attachment_2059" class="wp-caption alignnone" style="width: 430px"><img class="size-thumbnail wp-image-2059" title="blog3" src="http://www.thedesignium.com/blog/wp-content/uploads/2009/12/blog3-420x370.jpg" alt="フラフラテスト" width="420" height="370" /><p class="wp-caption-text">フラフラテスト</p></div>
<p>ハード側の作り方はまた次回に説明します。まだ反応が鈍かったりするときがあるのでそこはブラッシュアップしていかないとですね。</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.thedesignium.com/blog/private/2056/feed</wfw:commentRss>
		</item>
		<item>
		<title>ふくしまデジタル情報化フェア2009で講演させて頂きました</title>
		<link>http://www.thedesignium.com/blog/news/2049</link>
		<comments>http://www.thedesignium.com/blog/news/2049#comments</comments>
		<pubDate>Tue, 27 Oct 2009 16:18:12 +0000</pubDate>
		<dc:creator>maeda</dc:creator>
		
		<category><![CDATA[デザイニウムニュース]]></category>

		<category><![CDATA[地域/SR]]></category>

		<guid isPermaLink="false">http://www.thedesignium.com/blog/?p=2049</guid>
		<description><![CDATA[前田です。
昨日は福島県高度情報化推進協議会が主催する「ふくしまデジタル情報化フェア2009」が福島市のコラッセ福島で開催され、その中で『地域SNSから始まる地域活性化 ～会津sicon（シコン）の事例～』と題して講演さ [...]]]></description>
			<content:encoded><![CDATA[<p>前田です。</p>
<p>昨日は福島県高度情報化推進協議会が主催する<a href="http://www.fukushima-koudo.jp/modules/news/article.php?storyid=53" target="_blank">「ふくしまデジタル情報化フェア2009」</a>が福島市のコラッセ福島で開催され、その中で『地域SNSから始まる地域活性化 ～会津sicon（シコン）の事例～』と題して講演させて頂きました。</p>
<p>話の流れとしては、siconを立ち上げた理由は会津にそれなりの期間暮らしたからわかることもあり、そういう意味で自己紹介から会社を作るに至った経緯、事業の内容から実際にsiconを立ち上げるまでを説明させて頂きました。</p>
<p>後半はsiconを立ち上げてわかったこと、ビジョンやコンセプト、siconと地域のリアルなつながりの事例、今後のことなどをお話ししました。前半がゆっくりだったせいか後半少し早足になってしまった部分もあったのですが、ただの事例発表という形にはしたくなかったので、ひとつのストーリーとして見て頂けたなら幸いと思います。</p>
<p>本番で使用したものから冗長な部分をカットしたり一部修正してありますが、プレゼンテーションの資料を下記に公開しますので地域SNSや会津SNS siconに興味のある方はご覧になってみて下さい。</p>
<p><a href='http://www.thedesignium.com/blog/wp-content/uploads/2009/10/fukushima_digiinfofair_sns_091027.zip'>会津sicon事例 プレゼン資料</a></p>
<div id="more1091027-1551">
<div id="image1091027155132" class="blog_addImage"></div>
<p><script type="text/javascript">Dsn.addImage("image1091027155132", "http://www.thedesignium.com/blog/wp-content/uploads/2009/10/digital_info_fair.jpg", 592, 420);</script>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.thedesignium.com/blog/news/2049/feed</wfw:commentRss>
		</item>
		<item>
		<title>11/7 CSS Nite in 新潟 開催!</title>
		<link>http://www.thedesignium.com/blog/private/2043</link>
		<comments>http://www.thedesignium.com/blog/private/2043#comments</comments>
		<pubDate>Tue, 27 Oct 2009 03:08:44 +0000</pubDate>
		<dc:creator>hata</dc:creator>
		
		<category><![CDATA[プライベート]]></category>

		<category><![CDATA[イベント]]></category>

		<guid isPermaLink="false">http://www.thedesignium.com/blog/?p=2043</guid>
		<description><![CDATA[
11/7にCSS Niteの新潟版が新潟県民会館で開催されます。新潟は県が違いますが、実はデザイニウムがある会津若松からは1時間ほどの距離にあります。
今回は「ブランディングとワークフロー」ということでコミュニケーショ [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.thedesignium.com/blog/wp-content/uploads/2009/10/cssnite_niigata_logo.png" alt="cssnite_niigata_logo" title="cssnite_niigata_logo" width="250" height="77" class="alignleft size-full wp-image-2044" /></p>
<p>11/7にCSS Niteの新潟版が新潟県民会館で開催されます。新潟は県が違いますが、実はデザイニウムがある会津若松からは1時間ほどの距離にあります。</p>
<p>今回は「ブランディングとワークフロー」ということでコミュニケーションメディアに進化を遂げたWebサイトはテクニックに頼るのではなくブランディングで勝負をする時代とマーケティング寄りな内容となっているので、業界でも幅広い職種の人が聞いて価値のある内容ではないでしょうか。</p>
<p>お申し込みは以下からどうぞ!<br />
<a href="http://cssnite.deez.jp/vol01/" target="_blank"><img src="http://www.thedesignium.com/blog/wp-content/uploads/2009/10/vol01.png" alt="vol01" title="vol01" width="200" height="220" class="alignleft size-full wp-image-2045" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.thedesignium.com/blog/private/2043/feed</wfw:commentRss>
		</item>
		<item>
		<title>サイト構築のための正しいCMS選択</title>
		<link>http://www.thedesignium.com/blog/cms/2037</link>
		<comments>http://www.thedesignium.com/blog/cms/2037#comments</comments>
		<pubDate>Mon, 26 Oct 2009 09:58:36 +0000</pubDate>
		<dc:creator>sakuma</dc:creator>
		
		<category><![CDATA[CMS]]></category>

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

		<category><![CDATA[Movable Type]]></category>

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

		<guid isPermaLink="false">http://www.thedesignium.com/blog/?p=2037</guid>
		<description><![CDATA[・ デザイニウムで使用しているCMS機能比較表
最近のサイト構築のプロジェクトでは、クライアント側での更新システムの導入＝CMSの導入は必須になってきています。一時はCMSやブログツールも群雄割拠という趣で、様々なCSM [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.thedesignium.com/cms/compare_cms.html" target="_blank">・ デザイニウムで使用しているCMS機能比較表</a></p>
<p>最近のサイト構築のプロジェクトでは、クライアント側での更新システムの導入＝CMSの導入は必須になってきています。一時はCMSやブログツールも群雄割拠という趣で、様々なCSMがオープンソース・商用問わず発表されていましたが、そろそろ有力な候補が絞り込まれてきています。</p>
<p>弊社で主に使用しているCMSは「<a href="http://ja.wordpress.org/" target="_blank">WordPress</a>」と「<a href="http://www.sixapart.jp/movabletype/" target="_blank">Movable Type</a>」で、先日担当させていただいた会津大学オフィシャルサイトの構築には「<a href="http://www.joomla.org/" target="_blank">Joomla!</a>」を使用しました。前述の2つはブログ構築のツールとしては2大巨頭と言える定番ですが、定番であるがゆえサポートや拡張機能も豊富で信頼性も高く、お勧めできるシステムです。</p>
<p>WPはオープンソースなのでフリーで使用できプラグインも豊富で、また使い勝手が非常によいため一番よく使います。MTは商用サイトでの使用にはライセンス料が必要ですが、システムとしての信頼度と構築の自由度は全CMS含めてもトップクラスですので、やはりこれも採用頻度が高いです。さらに最近ではオープンソース版も登場しているので、さらに採用する機会は増えそうです。</p>
<p>Joomla!はWPやMTよりもやや規模が大きめのサイト向けのCMSで、競合には「Xoops」や「Drupal」がありますが、インターフェースの使いやすさ、拡張機能の豊富さなどを検討した結果Joomla!を採用しました。中規模以上向けのCMSにはクセのあるものも多いですが、Joomla!はその中ではわりとスマートに使えるものではないでしょうか。特に多彩な拡張機能には会津大サイト構築中もかなり助けられました。</p>
<p>このような感じでデザイニウムで使用している<a href="http://www.thedesignium.com/cms/compare_cms.html" target="_blank">各CMSについて、機能・特徴などを一覧にしてまとめてみました（別ウィンドウで開きます）</a>。運用や構築の際に気になる一通りの情報を網羅しているつもりです。ご参考になれば幸いです。</p>
<p>この他にも、非常にグラフィカルなUIを持ったCMS「<a href="http://concrete5-japan.org/" target="_blank">Concrete5</a>」やECサイト専用のCSM「<a href="http://www.ec-cube.net/" target="_blank">EC-Cube</a>」など気になっているCMSはありますし、これらも機会があればプロジェクトで採用していきたいと考えています。意見・感想などまとまったら表に追加していきたいと思います。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.thedesignium.com/blog/cms/2037/feed</wfw:commentRss>
		</item>
		<item>
		<title>「くままり」で使用したBox2D AS3テクニック</title>
		<link>http://www.thedesignium.com/blog/skill/1919</link>
		<comments>http://www.thedesignium.com/blog/skill/1919#comments</comments>
		<pubDate>Fri, 23 Oct 2009 08:13:34 +0000</pubDate>
		<dc:creator>sakuma</dc:creator>
		
		<category><![CDATA[スキル]]></category>

		<category><![CDATA[プロジェクト]]></category>

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

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

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

		<category><![CDATA[webアプリ]]></category>

		<guid isPermaLink="false">http://www.thedesignium.com/blog/?p=1919</guid>
		<description><![CDATA[弊社で製作しmixiアプリとして公開させていただいている「くくまり」は、主にFlash ActionScript3を用いて開発しました。その中でもゲームの根幹部分を担っている2D物理演算処理については、「Box2D」とい [...]]]></description>
			<content:encoded><![CDATA[<p>弊社で製作しmixiアプリとして公開させていただいている「<a href="http://mixi.jp/run_appli.pl?id=5774" target="_blank">くくまり</a>」は、主にFlash ActionScript3を用いて開発しました。その中でもゲームの根幹部分を担っている2D物理演算処理については、「<a href="http://www.box2d.org/" target="_blank">Box2D</a>」という物理演算ライブラリを使用しています（実際に使用しているのはBox2DのAS3移植版）。ボールの落下速度、衝突時の跳ね返りといった処理はすべてこのライブラリを使用して実現しています。</p>
<p>以前「<a href="http://www.box2d.org/" target="_blank">Drop Burger</a>」を製作した際もこのライブラリを利用したのですが、今回はより発展的な使い方をしています。開発中は主にネットで解説記事を探して問題解決していましたが、中には参考ドキュメントが見つからず苦労した部分がありましたので、その箇所について解説をしておきたいと思います。同じ事でお悩みの方がいましたらぜひ参考にして下さい。</p>
<p>なおBox2Dの基本的な使い方に関してはこの記事では解説しませんので、これから勉強しようという方は以下の記事を参考にしていただけるとよいと思います。</p>
<p><a href="http://gihyo.jp/dev/feature/01/box2d" target="_blank">・ 「特集：Box2DでActionScript物理プログラミング｜gihyo.jp」</a></p>
<p><strong>1．生成したオブジェクトに固有の属性（ID）を持たせる</strong></p>
<p>「くままり」では落下するボールに種類があり、それぞれグラフィック、重さ、大きさなどに違いがあります。Box2Dで扱える物体オブジェクト（b2body）には固有IDや属性といった概念がないため、これらを実装するには一工夫必要です。b2bodyオブジェクトには「m_userData」という空のオブジェクトが用意されているので、ここにMovieClipオブジェクトを作成して、そこに必要な属性を入れていきます。</p>
<pre style="width: 420px; overflow: auto; overflow-y: hidden; margin:0 0 20px; font-family:courier new; font-size:10px; letter-spacing: -1px;">newBall.m_userData = <font color="blue"><b>new</b></font> <font color="olive"><b>MovieClip</b></font>();
newBall.m_userData.id = '<font color="magenta">panda</font>';
newBall.m_userData.flag = <font color="blue"><b>false</b></font>;
newBall.m_userData.enable = <font color="blue"><b>true</b></font>;</pre>
<p>こんな感じです。m_userDataに作成するオブジェクトのデータ型はSprite型でもString型でも大丈夫ですが、複数の属性を持たせる事を考えるとMovieClip型が一番使いやすいでしょう。もちろんライブラリ内のMCのクラス名を指定してもOKです。くままりではIDの他にXY座標やボールのレベル（リフティング回数）などを持たせています。これをEnterFrameイベント中の処理分岐に使うわけです。</p>
<p><strong>2．反発の強さ（ベクトル）を操作する</strong></p>
<p>「くままり」では自機とボールの衝突の際、マウスクリックで一瞬反発力が強まり、より勢いよくはじき飛ばせるという仕様を取り入れています。通常ではb2Bodyに設定されたdensity（密度）・restitution（反発計数）・friction（摩擦係数）を元に物理運動が再現されます。これらを動的に動かす事も可能ではありますが、物体に初速度を与える処理を実現したい場合はこの方法では難しいため、別の方法をとる必要があります。</p>
<p>b2Bodyクラスには「b2Vec2」というオブジェクトがあり、ここには物体の運動ベクトルが格納されています。この値を操作する事で、物体に初速度を与えたり、勢いを強める、進行方向を変えるといった処理が可能になります。</p>
<pre style="width: 420px; overflow: auto; overflow-y: hidden; margin:0 0 20px; font-family:courier new; font-size:10px; letter-spacing: -1px;"><font color="blue"><b>var</b></font> vec:b2Vec2 = cbb.m_shape1.m_body.GetLinearVelocity();
<font color="blue"><b>if</b></font> (vec.Length() &lt; minimumBallVec) vec.Multiply(minimumBallVec / vec.Length());
<font color="blue"><b>if</b></font> (vec.Length() &gt; maximumBallVec) vec.Multiply(maximumBallVec / vec.Length());
vec.Multiply(myBallStatus.restitution);
cbb.m_shape2.m_body.SetLinearVelocity(vec);
</pre>
<div id="more20091023-0718">
<p>b2BodyのGetLinearVelocityメソッドでベクトルを受け取り、SetLinearVelocityメソッドで計算し直したベクトルを設定します。b2Vec2クラスに計算に使えるメソッドがいくつか設定されているので、それを使うとよいでしょう。詳しくはソースファイル、ドキュメントを参照下さい。<br />
「くままり」では何度も衝突させているとボールの勢いが弱まって、自機とボールがぶつかってもバウンドしなくなるという問題があったため、ベクトルの大きさに最小値（minimumBallVec）を設ける事で勢いが弱まった状態でも一定量以上バウンドさせるようにしました。またこの例では自機に反発力（myBallStatus.restitution）のパラメーターを設けています。反発力は通常1ですが、マウスをクリックする事で一瞬2に設定され、この間に衝突したボールのベクトルにその計数を乗算しています。この反発力に<a href="http://blog.greensock.com/tweenmax/" target="_blank">TweenMax</a>を使って変化を付け、自然にバウンドするよう調整しました。</p>
<p><strong>3．衝突時に処理が重なる仕様を回避する。</strong></p>
<p>Box2Dでオブジェクト同士の衝突を検出するには「b2world.m_contactList」を使用します。基本的にはEnterFrameイベント中で以下のようなforループを回して使用します。</p>
<pre style="width: 420px; overflow: auto; overflow-y: hidden; margin:0 0 20px; font-family:courier new; font-size:10px; letter-spacing: -1px;"><font color="blue"><b>for</b></font> (<font color="blue"><b>var</b></font> cbb:b2Contact = world.m_contactList; cbb; cbb = cbb.m_next) {
  trace(cbb.m_shape1.m_body.m_userData.id
      + '<font color="magenta"> : </font>' + cbb.m_shape2.m_body.m_userData.id);
}</pre>
<p>これで衝突したボールのIDをTraceできます。出力をみれば分かりますが、「A：B」と「B：A」のような順序違いはひとつの衝突として見なされ重複しません。<br />
ただここでひとつ問題が発生します。m_contactListに格納される判定リストは<strong>「衝突した瞬間」</strong>ではなく<strong>「衝突と言っていいくらい近い距離にいる」</strong>という基準で取得されているようで、フレーム数が細かいと1度の衝突で2、3回のイベントを重複して実行したり、接触している状態だと延々とイベントを実行し続けてしまったりします。これはBox2Dの仕様上の問題であるため、実装で回避するしかありません。</p>
<p>くままりではこれを「衝突後に数フレームの処理間隔を与える」事で解決しています。</p>
<pre style="width: 420px; overflow: auto; overflow-y: hidden; margin:0 0 20px; font-family:courier new; font-size:10px; letter-spacing: -1px;">const crashInterval:int = 5;

<font color="blue"><b>function</b></font> enterFrameEvent (e:Event) {
    <font color="green">// 全b2Bodyオブジェクトを走査</font>
    <font color="blue"><b>for</b></font> (<font color="blue"><b>var</b></font> b:b2Body = world.GetBodyList(); b; b = b.GetNext()) {
        <font color="green">// 衝突インタ&#12540;バルをデクリメント</font>
        <font color="blue"><b>if</b></font> (b.GetUserData() is <font color="olive"><b>MovieClip</b></font> &amp;&amp; b.GetUserData().crashinterval &gt; 0) {
            b.GetUserData().crashinterval--;
        }
    }

    <font color="green">// 衝突イベント&#20966;理</font>
    <font color="blue"><b>for</b></font> (<font color="blue"><b>var</b></font> cbb:b2Contact = world.m_contactList; cbb; cbb = cbb.m_next) {
        <font color="green">// 長ったらしいので代入</font>
        <font color="blue"><b>var</b></font> u_data1:<font color="olive"><b>MovieClip</b></font> = cbb.m_shape1.m_body.m_userData;
        <font color="blue"><b>var</b></font> u_data2:<font color="olive"><b>MovieClip</b></font> = cbb.m_shape2.m_body.m_userData;
        <font color="green">// 衝突オブジェクトの&#20966;理間隔が0なら何かする</font>
        <font color="blue"><b>if</b></font> (u_data1.crashinterval &lt;= 0 &amp;&amp; u_data2.crashinterval &lt;= 0) {
            <font color="green">// ここで何かする</font>
        }
        <font color="green">// &#20966;理間隔を設定</font>
        u_data1.crashinterval = u_data2.crashinterval = crashInterval;
    }
}</pre>
<p>こうする事で衝突処理の重複を回避できました。「くままり」の場合、crashIntervalの値は調整した結果5になりましたが、この値はフレームレートなどによって変わってくると思います。</p>
</div>
<div id="more20091023-0718">
<p><strong>4．衝突したオブジェクトの種類により処理を分岐する</strong></p>
<p>Box2Dは基本的には『動く物体』と『動かない物体』の2種類でしかオブジェクトを判別しておらず、たとえばブロック崩しのようなゲームでも「壁」と「自機のバー」は同じ『動かない』オブジェクトですが、ボールがそれぞれと衝突した際の反応は異なっています。たとえば衝突音を変化させたい、反発度を変えたい場合などは処理を区別しなくてはなりません。<br />
これはオブジェクトの種類によりIDを割り振って処理分岐を作る事で実現できます。項目1の内容が出来ていればもうほとんど解決なのですが、「くままり」ではそれぞれのオブジェクトに割り振ったIDを判別してSwitch文で分岐処理しています。</p>
<pre style="width: 420px; overflow: auto; overflow-y: hidden; margin:0 0 20px; font-family:courier new; font-size:10px; letter-spacing: -1px;"><font color="blue"><b>for</b></font> (<font color="blue"><b>var</b></font> cbb:b2Contact = world.m_contactList; cbb; cbb = cbb.m_next){
  <font color="blue"><b>if</b></font> (cbb.m_shape1.m_body.m_userData &amp;&amp; cbb.m_shape2.m_body.m_userData) {

    <font color="blue"><b>var</b></font> u_data1:<font color="olive"><b>MovieClip</b></font> = cbb.m_shape1.m_body.m_userData;
    <font color="blue"><b>var</b></font> u_data2:<font color="olive"><b>MovieClip</b></font> = cbb.m_shape2.m_body.m_userData;

    <font color="blue"><b>switch</b></font> (u_data1.id) {
      <font color="green">// 自機との衝突</font>
      <font color="blue"><b>case</b></font> '<font color="magenta">myball</font>':
      <font color="blue"><b>if</b></font> (u_data2.crashinterval &lt;= 0) {
        <font color="green">/* ここで何かする */</font>
      }
      <font color="blue"><b>break</b></font>;

      <font color="green">// 床との衝突</font>
      <font color="blue"><b>case</b></font> '<font color="magenta">floor</font>':
      <font color="blue"><b>if</b></font> (u_data2.crashinterval &lt;= 0) {
        <font color="green">/* ここで何かする */</font>
      }
      <font color="blue"><b>break</b></font>;

      <font color="blue"><b>case</b></font> '<font color="magenta">wleft</font>':
      <font color="blue"><b>case</b></font> '<font color="magenta">wright</font>':
      <font color="blue"><b>if</b></font> (u_data2.crashinterval &lt;= 0) {
        <font color="green">/* ここで何かする */</font>
      }
      <font color="blue"><b>break</b></font>;

      <font color="blue"><b>case</b></font> '<font color="magenta">border</font>':
      <font color="blue"><b>if</b></font> (u_data2.crashinterval &lt;= 0) {
        <font color="green">/* ここで何かする */</font>
      }
      <font color="blue"><b>break</b></font>;

      <font color="green">// ボ&#12540;ル同士の衝突</font>
      <font color="blue"><b>default</b></font>:
      <font color="blue"><b>if</b></font> (u_data2.crashinterval &lt;= 0) {
        <font color="green">/* ここで何かする */</font>
        <font color="green">// 衝突インタ&#12540;バルを設定</font>
        u_data1.crashinterval = u_data2.crashinterval = crashInterval;
      }
      <font color="blue"><b>break</b></font>;
    }
  }
}
</pre>
<p>以上のコードをEnterFrameイベント中で実行しています。毎フレーム実行する処理なので、負荷に気をつけながらコンパクトなコードに仕上げるのがよいでしょう。</p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.thedesignium.com/blog/skill/1919/feed</wfw:commentRss>
		</item>
	</channel>
</rss>
