<?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>cap&#039;n webb &#187; Web</title>
	<atom:link href="http://blog.dataich.com/tag/web/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.dataich.com</link>
	<description>almost all things about it</description>
	<lastBuildDate>Thu, 12 Jan 2012 03:38:00 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Balsamiq Mockups For Desktop</title>
		<link>http://blog.dataich.com/2009/08/27/balsamiq-mockups-for-desktop/</link>
		<comments>http://blog.dataich.com/2009/08/27/balsamiq-mockups-for-desktop/#comments</comments>
		<pubDate>Thu, 27 Aug 2009 14:55:18 +0000</pubDate>
		<dc:creator>dataich</dc:creator>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://blog.dataich.com/?p=272</guid>
		<description><![CDATA[Balsamiq Mockups For Desktop WEBページのデザイン・構成を考えたり、誰かに見せたい時にラフスケッチされる方も多いと思う。 これまで私はあまり絵が得意でないので、ざっとHTMLコーディングして [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.dataich.com/wp-content/uploads/Balsamiq-Mockups-For-Desktop.png" rel="lightbox[272]"><img title="Balsamiq Mockups For Desktop" src="http://blog.dataich.com/wp-content/uploads/Balsamiq-Mockups-For-Desktop.png" alt="Balsamiq Mockups For Desktop" width="100%" /></a></p>
<p><a href="http://www.balsamiq.com/products/mockups" target="_blank" onclick="pageTracker._trackPageview('/outgoing/www.balsamiq.com/products/mockups?referer=');">Balsamiq Mockups For Desktop</a></p>
<p>WEBページのデザイン・構成を考えたり、誰かに見せたい時にラフスケッチされる方も多いと思う。<br />
これまで私はあまり絵が得意でないので、ざっとHTMLコーディングしていた。<br />
しかしもう少し楽にならないものかと考えてモックアップツールを探して見つけたのが79ドルのこれ。</p>
<p>WEBページに必要な手書きパーツが多く用意されていて、ドラッグしていくだけ。<br />
サイズを広げたりするのも自由自在。<br />
基本的なパーツはダブルクリックで入力エリアが出てくるのでタイトルを設定したりもできる。<br />
テーブルパーツでは下記のようにカンマ、改行を入れることでデータを入れることができる。</p>
<p><a href="http://blog.dataich.com/wp-content/uploads/Balsamiq-Mockups-For-Desktop-Editing-Table-Data.png" rel="lightbox[272]"><img title="Balsamiq Mockups For Desktop Editing Table Data" src="http://blog.dataich.com/wp-content/uploads/Balsamiq-Mockups-For-Desktop-Editing-Table-Data.png" alt="Balsamiq Mockups For Desktop Editing Table Data" width="100%" /></a></p>
<p>ボタンやリンクパーツには遷移先ページを設定することができ、全画面プレビュー時に動かすことができる。<br />
これはちょっとしてプレゼンなんかで使えるかもしれない。<br />
他にも作成したモックアップからFlexアプリケーションを生成する仕組みもある。（ここのところはもう少し詳しくアップしたい）</p>
<p>また、他のユーザが作成したパーツ群を<a href="http://www.mockupstogo.net/" target="_blank" onclick="pageTracker._trackPageview('/outgoing/www.mockupstogo.net/?referer=');">サイト</a>からダウンロードして追加することもできる。<br />
残念なのはコンポーネントとして恒久的に取り込めるわけではなく、<br />
ダウンロードしたモックアップからパーツをコピペする必要があること。<br />
ここは改善していただけるとありがたい。</p>
<p>ソフトウェアの説明はここまでとして、デフォルトの状態だと手書きフォントが英字しか対応していない。<br />
日本語でも手書き風にしたいのであれば、手書きフォントをインストールして設定する必要がある。<br />
手書きフォントは「あくあフォント」が有名だが、私は「<a href="http://hp.vector.co.jp/authors/VA039499/#hui" target="_blank" onclick="pageTracker._trackPageview('/outgoing/hp.vector.co.jp/authors/VA039499/_hui?referer=');">ふい字</a>」を使わせていただいている。（フリーで商用利用も可とのこと、ありがとうございます。）<br />
フォントのインストールの説明は省略して、Balsamiq Mockupsへの設定方法は下記の通り。</p>

<div class="wp_syntax"><div class="code"><pre class="shell" style="font-family:monospace;">#Local Store以下が存在しない場合は作成する
~/Library/Preferences/BalsamiqMockupsForDesktop.ランダム文字列/Local\ Store/BalsamiqMockups.cfg</pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;config<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #808080; font-style: italic;">&lt;!--フォント名--&gt;</span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fontFace<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>HuiFontP<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fontFace<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/config<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<div style="float: right; margin-left: 10px;"><a href="http://twitter.com/share?url=http://blog.dataich.com/2009/08/27/balsamiq-mockups-for-desktop/&via=dataich&text=Balsamiq Mockups For Desktop&related=:&lang=en&count=vertical" class="twitter-share-button" onclick="pageTracker._trackPageview('/outgoing/twitter.com/share?url=http_//blog.dataich.com/2009/08/27/balsamiq-mockups-for-desktop/_via=dataich_text=Balsamiq_Mockups_For_Desktop_related=_lang=en_count=vertical&amp;referer=');">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>]]></content:encoded>
			<wfw:commentRss>http://blog.dataich.com/2009/08/27/balsamiq-mockups-for-desktop/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ハイパフォーマンスWEBサイト</title>
		<link>http://blog.dataich.com/2008/08/29/%e3%83%8f%e3%82%a4%e3%83%91%e3%83%95%e3%82%a9%e3%83%bc%e3%83%9e%e3%83%b3%e3%82%b9web%e3%82%b5%e3%82%a4%e3%83%88/</link>
		<comments>http://blog.dataich.com/2008/08/29/%e3%83%8f%e3%82%a4%e3%83%91%e3%83%95%e3%82%a9%e3%83%bc%e3%83%9e%e3%83%b3%e3%82%b9web%e3%82%b5%e3%82%a4%e3%83%88/#comments</comments>
		<pubDate>Fri, 29 Aug 2008 13:41:51 +0000</pubDate>
		<dc:creator>dataich</dc:creator>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[Book]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://dataich.s15.coreserver.jp/blog/2008/08/29/%e3%83%8f%e3%82%a4%e3%83%91%e3%83%95%e3%82%a9%e3%83%bc%e3%83%9e%e3%83%b3%e3%82%b9web%e3%82%b5%e3%82%a4%e3%83%88/</guid>
		<description><![CDATA[市立図書館にふらっと寄ったらあったので、通勤バスの中で読んだ。 要はフロントエンドでWEBのパフォーマンスをぐぐっとあげようという本。 １４だったか１５のルールでまとめられてて、うなってしまった。 WEB開発者の方には必 [...]]]></description>
			<content:encoded><![CDATA[<div class="section">市立図書館にふらっと寄ったらあったので、通勤バスの中で読んだ。</div>
<div class="section">
要はフロントエンドでWEBのパフォーマンスをぐぐっとあげようという本。<br />
１４だったか１５のルールでまとめられてて、うなってしまった。<br />
WEB開発者の方には必須の良書だと思う。是非実践してみたいことばかりが書かれていた。<br />
Javascriptはページ下部に書こうとか、Expire使おうよとか、CSSインライン画像使おうよとか、いろいろ。</p>
<p>読み切りやすい薄さで値段も手頃。</p></div>
<p><iframe src="http://rcm-jp.amazon.co.jp/e/cm?t=dataich-22&#038;o=9&#038;p=8&#038;l=as1&#038;asins=487311361X&#038;fc1=000000&#038;IS2=1&#038;lt1=_blank&#038;m=amazon&#038;lc1=0000FF&#038;bc1=000000&#038;bg1=FFFFFF&#038;f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>
<div style="float: right; margin-left: 10px;"><a href="http://twitter.com/share?url=http://blog.dataich.com/2008/08/29/%e3%83%8f%e3%82%a4%e3%83%91%e3%83%95%e3%82%a9%e3%83%bc%e3%83%9e%e3%83%b3%e3%82%b9web%e3%82%b5%e3%82%a4%e3%83%88/&via=dataich&text=ハイパフォーマンスWEBサイト&related=:&lang=en&count=vertical" class="twitter-share-button" onclick="pageTracker._trackPageview('/outgoing/twitter.com/share?url=http_//blog.dataich.com/2008/08/29/_e3_83_8f_e3_82_a4_e3_83_91_e3_83_95_e3_82_a9_e3_83_bc_e3_83_9e_e3_83_b3_e3_82_b9web_e3_82_b5_e3_82_a4_e3_83_88/_via=dataich_text=_WEB_related=_lang=en_count=vertical&amp;referer=');">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>]]></content:encoded>
			<wfw:commentRss>http://blog.dataich.com/2008/08/29/%e3%83%8f%e3%82%a4%e3%83%91%e3%83%95%e3%82%a9%e3%83%bc%e3%83%9e%e3%83%b3%e3%82%b9web%e3%82%b5%e3%82%a4%e3%83%88/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

