<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>ミワラボ</title>
<link rel="alternate" type="text/html" href="http://miwa.offside.ne.jp/" />
<link rel="self" type="application/atom+xml" href="http://miwa.offside.ne.jp/resources/feed/atom.xml" />
<id>tag:miwa.offside.ne.jp,2008-04-13://1</id>
<updated>2010-05-24T04:20:35Z</updated>

<generator uri="http://www.sixapart.com/movabletype/">Movable Type Open Source 4.1</generator>

<entry>
<title>IP Messenger for iPhone が配信開始されました</title>
<link rel="alternate" type="text/html" href="http://miwa.offside.ne.jp/blog/2010/05/ip-messenger-for-iphone-1.html" />
<id>tag:miwa.offside.ne.jp,2010://1.18</id>

<published>2010-05-24T04:17:07Z</published>
<updated>2010-05-24T04:20:35Z</updated>

<summary>IP Messenger for iPhone が無事配信開始されました。 よろ...</summary>
<author>
<name>miwalab</name>

</author>

<category term="ipmessengerforiphone" label="IP Messenger for iPhone" scheme="http://www.sixapart.com/ns/types#tag" />

<content type="html" xml:lang="ja" xml:base="http://miwa.offside.ne.jp/">
<![CDATA[<p>IP Messenger for iPhone が無事配信開始されました。<br />
よろしければ、ダウンロードしてみてください。<br />
<a href="/ipmsg/">http://miwa.offside.ne.jp/ipmsg/</a><br />
 <br />
iTunes に自分の名前が出てるのも不思議な感じですね。</p>]]>

</content>
</entry>

<entry>
<title>Javascript で gif 画像を生成</title>
<link rel="alternate" type="text/html" href="http://miwa.offside.ne.jp/blog/2006/05/javascript-gif.html" />
<id>tag:miwa.offside.ne.jp,2006://1.4</id>

<published>2006-05-27T10:17:21Z</published>
<updated>2008-04-13T14:34:21Z</updated>

<summary>Dataスキーム(RFC)を利用して、Javascript のみで gif画像を...</summary>
<author>
<name>miwalab</name>

</author>

<category term="javascript" label="JavaScript" scheme="http://www.sixapart.com/ns/types#tag" />

<content type="html" xml:lang="ja" xml:base="http://miwa.offside.ne.jp/">
<![CDATA[<p>Dataスキーム(<a href="http://www.faqs.org/rfcs/rfc2397.html" target="_blank">RFC</a>)を利用して、Javascript のみで gif画像を生成するライブラリを作ってみました。</p>]]>
<![CDATA[<p><a class="download" href="http://miwa.offside.ne.jp/blog/2006/05/MLgifLib.js" target="_blank" onclick="javascript:pageTracker._trackPageview('/download/MLgifLib.js');">MLgifLib.js</a></p>

<p>Dataスキーム対応ブラウザで動作します。（Firefox、Safari など）<br />
今のところ、2-256色、無圧縮のgif画像（アニメーションgifにも対応）が生成出来ます。<br />
遅いです。マシンパワーに依存するので、スペックの低いマシンではもっさり動きます。<br />
ぼちぼち更新していく予定。とりあえずソースをきれいにします。</p>

<h3>使用例</h3>

<p><a href="http://miwa.offside.ne.jp/blog/2006/05/javascript-gif.demo1.html?w=16&h=16" target="_blank">MLgifLib.js Demo | Simple GIF Editor</a></p>

<ul class="type-b clearfix">
<li>カラーパレットから描画色を選択して、キャンバスにクリックして描画します。</li>
<li>描画したgif画像を保存する場合は、キャンバス左上のプレビュー画像を右クリック（controlクリック）して保存を選んでください。</li>
<li>カラーパレットのグレーの四角は透過色です。</li>
<li>「/javascript_gif.demo1.html?w=32&h=32」とアクセスすると、画像のピクセル数を指定出来ます。（最大50px）</li>
<li>Shiftキーを押しながらキャンバスのドットをクリックすると、その色を取得出来ます。</li>
<li>プレビューの枠をクリックすると、前背面を切り替えることが出来ます。</li>
</ul>

<p><a href="http://miwa.offside.ne.jp/blog/2006/05/javascript-gif.demo2.html" target="_blank">MLgifLib.js Demo | Animation GIF Sample</a></p>

<ul class="type-b clearfix">
<li>矢印ボタンを押すとアニメーションのスピードを5段階に変更出来ます。</li>
<li>プレビューをクリックすると、再生・停止が出来ます。</li>
<li>描画したgif画像を保存する場合は、プレビュー画像を右クリック（controlクリック）して保存を選んでください。</li>
</ul>

<h3>バージョン履歴</h3>

<dl class="type-a clearfix">
	<dt><strong>0.3.4</strong></dt><dd>メソッドチェインに対応しました。<span class="param">(20060526)</span></dd>
	<dt><strong>0.3.3</strong></dt><dd>2-256色に対応しました。<span class="param">(20060523)</span></dd>
	<dt><strong>0.3.2</strong></dt><dd>すこしだけ早くなりました。8-256色にも対応しました。<span class="param">(20060522)</span></dd>
	<dt><strong>0.1</strong></dt><dd>最初のリリース<span class="param">(20060520)</span></dd>
</dl>]]>
</content>
</entry>

<entry>
<title>Amazon 商品画像のカスタマイズ</title>
<link rel="alternate" type="text/html" href="http://miwa.offside.ne.jp/blog/2005/12/amazon-image.html" />
<id>tag:miwa.offside.ne.jp,2005://1.3</id>

<published>2005-12-27T17:54:21Z</published>
<updated>2008-05-12T03:02:20Z</updated>

<summary>Amazon の商品画像は、URLの書き方によって回転させたり影をつけたりといっ...</summary>
<author>
<name>miwalab</name>

</author>

<category term="amazon" label="Amazon" scheme="http://www.sixapart.com/ns/types#tag" />

<content type="html" xml:lang="ja" xml:base="http://miwa.offside.ne.jp/">
<![CDATA[<p>Amazon の商品画像は、URLの書き方によって回転させたり影をつけたりといったことができます。<br />
独自に調べたものなので、正確ではない（推奨されていない）かもしれませんが、分かったものを簡単に解説していきます。</p>]]>
<![CDATA[<h3>URLについて</h3>

<p>商品画像のURLはこのようになっています。</p>

<p><code>http://<strong>images-jp</strong><sup>1</sup>.amazon.com/images/P/<strong>B0000AIRN3</strong><sup>2</sup>.<strong>09</strong><sup>3</sup>.<strong>_OU09_PE20_SCTZZZZZZZ_</strong><sup>4</sup>.jpg</code></p>

<p>各パートはこのようになっています。</p>

<ul class="type-a clearfix">
<li><strong>リクエストを送るサーバ</strong><br />サブドメインは、「images」、「images-eu」などがあります。amazon.co.jp の商品を扱うのであれば、「images-jp」にしておくのが無難です。</li>
<li><strong>ASIN</b>、本の場合は ISBN</strong><br />「ASIN」 は Amazon Standard Identification Number の略です。</li>
<li><strong>カントリーコード</strong><br />「01」は、アメリカ（amazon.com）とカナダ（amazon.ca）「02」は、イギリス（amazon.co.uk）「03」は、ドイツ（amazon.de）「09」は、日本（amazon.co.jp）</li>
<li><strong>加工コマンド</strong><br />「_」で区切って、画像を加工するコマンドを記述します。</li>
</ul>

<h3>同じ商品のその他の画像</h3>

<p>商品画像には、パッケージなどのメインの画像の他に、ディスクレーベルや特典などの画像がある場合があります。<br />
それらを表示する場合は、<strong>IN[01-0N]</strong> を使います。</p>

<p><code>http://images-jp.amazon.com/images/P/B0000AIRN3.09.<strong>IN01</strong>._OU09_PE20_SCTZZZZZZZ_.jpg</code></p>

<p>例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09.IN01._OU09_PE20_SCTZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">その他の画像1を見る</a>、<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09.IN02._OU09_PE20_SCTZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">その他の画像2を見る</a></p>

<ul class="type-b clearfix">
<li><a href="http://www.amazon.co.jp/exec/obidos/redirect?tag=miwalab-22&path=subst/associates/join/webservices.html" target="_blank">Amazon Web Service</a> を利用すれば、一覧を得ることが出来ます。</li>
<li><a href="http://webservices.amazon.co.jp/onca/xml?Service=AWSECommerceService&AWSAccessKeyId=10WGCAD7WP8R9W09ECG2&AssociateTag=miwalab-22&Operation=ItemLookup&ItemId=B0000AIRN3&ResponseGroup=Medium" target="_blank">取得した XML</a> の &lt;ImageSet Category="variant"&gt; にあります。</li>
</ul>

<h3>加工コマンド</h3>

<h4>画像サイズ</h4>

<ul class="type-a clearfix">
<li><strong>SCTHUMBZZZ</strong><br />画像サイズ（サムネイル）。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._SCTHUMBZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">サムネイル画像</a></li>
<li><strong>SCTZZZZZZZ</strong><br />画像サイズ（小）。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._SCTZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">小画像</a></li>
<li><strong>SCMZZZZZZZ</strong><br />画像サイズ（中）。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._SCMZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">中画像</a></li>
<li><strong>SCLZZZZZZZ</strong><br />画像サイズ（大）。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._SCLZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">大画像</a></li>
</ul>

<h4>バッジ関連</h4>

<ul class="type-a clearfix">
<li><strong>PE[01-99]</strong><br />プライスオフバッジを付ける。<br />カントリーコードによってバリエーションがあります。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._PE30_SCMZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">30%off のバッジ画像</a><br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.03._PE30_SCMZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">カントリーコード03のバッジ画像</a></li>
<li><strong>PD[01-99]</strong><br />プライスオフバッジを左に付ける。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._PD35_SCMZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">35%off の左バッジ画像</a></li>
<li><strong>PF</strong><br />ディスクの画像を付ける。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._PF_SCTZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">ディスクの画像</a></li>
<li><strong>PIsitb-st-arrow,TopLeft,[X],[Y]</strong><br />「なか見！検索」バッジ（1）を付ける<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._PIsitb-st-arrow,TopLeft,80,-20_SCMZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">「なか見！検索」バッジ（1）画像</a></li>
<li><strong>PIsitb-sm-arrow,TopLeft,[X],[Y]</strong><br />「なか見！検索」バッジ（2）を付ける<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._PIsitb-sm-arrow,TopLeft,70,-30_SCMZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">「なか見！検索」バッジ（2）画像</a></li>
</ul>

<h4>カントリーコード</h4>

<ul class="type-a clearfix">
<li><strong>OU[01,02,03,09]</strong><br />カントリーコードを強制的に変更する。<br />加工コマンドに影響を与えます。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._OU01_PIsitb-sm-arrow,TopLeft,70,-30_SCMZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">カントリーコード09から01に変更</a></li>
</ul>

<h4>フィルタ</h4>

<ul class="type-a clearfix">
<li><strong>BL[N]</strong><br />ぼかし。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._BL5_SCMZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">画像をぼかす</a></li>
<li><strong>SH[1-99]</strong><br />シャープ。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._PIsitb-sm-arrow,TopLeft,70,-30_SH40_SCMZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">画像をシャープにする</a></li>
<li><strong>PA[M],[X],[Y],[N]</strong><br />ドロップシャドウ。[M] は画像周りの余白、[N] はぼかしの強さ。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._PA10,2,2,10_SH30_SCLZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">画像に影をつける</a></li>
<li><strong>PB</strong><br />ドロップシャドウの簡易版。左下に影を付ける<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._PB_SH30_SCMZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">画像の左下に影をつける</a></li>
<li><strong>PC</strong><br />ドロップシャドウの簡易版。右下に影を付ける<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._PC_SH30_SCMZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">画像の右下に影をつける</a></li>
<li><strong>BO[N],[R,G,B]</strong><br />枠線。[N] は枠線の太さ、[R,G,B] は枠線の色です。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._BO10,255,102,0_SCMZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">オレンジの枠線をつける</a></li>
</ul>

<h4>回転</h4>

<ul class="type-a clearfix">
<li><strong>PV[1-99]</strong><br />右回りに回転。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._PV45_SH30_SCTZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">右回りに45度回転</a></li>
<li><strong>PU[1-99]</strong><br />左回りに回転。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._PU45_SH30_SCTZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">左回りに45度回転</a></li>
</ul>

<h4>リサイズ</h4>

<ul class="type-a clearfix">
<li><strong>SS[N]</strong><br />[N] px の正方形の中に収まるようにリサイズします。<br />画像よりも大きい値を指定した場合は余白を追加します。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._SS100_SCMZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">100px にリサイズ</a></li>
<li><strong>SX[N]</strong><br />[N] px の幅になるようにリサイズします。高さも同じ比率でリサイズされます。<br />画像よりも大きい値を指定した場合はリサイズしません。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._SX50_SCMZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">幅を 50px にリサイズ</a></li>
<li><strong>SY[N]</strong><br />[N] px の高さになるようにリサイズします。幅も同じ比率でリサイズされます。<br />画像よりも大きい値を指定した場合はリサイズしません。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._SY100_SCMZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]">高さを 100px にリサイズ</a></li>
<li><strong>SL[N]</strong><br />[N] px の幅または高さになるようにリサイズします。<br />画像よりも大きい値を指定した場合はリサイズしません。<br />例：<a href="http://images-jp.amazon.com/images/P/B0000AIRN3.09._SL100_SCMZZZZZZZ_.jpg" class="lightview" rel="gallery[amazon-image]"> 100px にリサイズ</a></li>
</ul>]]>
</content>
</entry>

</feed>
