<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>STAFF_01 [KYS-LAB]</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/" />
    <link rel="self" type="application/atom+xml" href="http://www.kys-lab.com/sasaki/atom.xml" />
    <id>tag:www.kys-lab.com,2008-03-10:/sasaki//2</id>
    <updated>2012-02-29T10:09:30Z</updated>
    
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type Pro 4.23-ja</generator>

<entry>
    <title>「写植の時代」展パンフレット</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2012/02/post-9.php" />
    <id>tag:www.kys-lab.com,2012:/sasaki//2.187</id>

    <published>2012-02-29T07:48:55Z</published>
    <updated>2012-02-29T10:09:30Z</updated>

    <summary> 「写植の時代」展（「大阪DTPの勉強部屋」さん主催）が、2012年2月17日（...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="DESIGN" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="EXHIBITION" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="design" label="DESIGN" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="dtp" label="DTP" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="パンフレット" label="パンフレット" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="写植" label="写植" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="展示会" label="展示会" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="syasyoku_Pamphlet-main.jpg" src="http://www.kys-lab.com/sasaki/img/syasyoku_Pamphlet-main.jpg" class="mt-image-none" style="" height="270" width="500" /></span>

<p><a href="http://www.osakadtp.com/?p=1079" target="_blank">「写植の時代」展</a>（「大阪DTPの勉強部屋」さん主催）が、2012年2月17日（金）～21日（火）に大阪メビック扇町で開催され、盛況のうちに終了しました。</p>]]>
        <![CDATA[<p>一連の展示物を閲覧し、当時のお話を聴いていると、写植の時代の「誇りと熱い想い」が伝わってきました。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_82-2/syasyoku_1.jpg" alt="手動機" class="Slash" />
<p class="captxt">実動する「MC-6型」と文字盤</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_82-2/syasyoku_2.jpg" alt="写植" class="Slash" />
<p class="captxt">印字していただいた写植（「き」の字がずれてる！）</p>

<p>現物の手動機で写植が打てる体験がよかったですね。手動機にはモニターがなく、当然コマンドZも効きません。当時の職人さんのすさまじい集中力と、文字組みの設計力の高さが想像できました。</p>

<p>↓「写植の時代」展に関するつぶやきから、みなさんの生の声が聞くことができます。</p>
<p><a href="http://togetter.com/li/264556" target="_blank" class="allow">写植TL（「写植の時代」展感想など）- Togetter</a></p>

<h3>「写植の時代」展パンフレット</h3>

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://www.kys-lab.com/sasaki/img/syasyoku_Pamphlet-1.jpg"><img alt="syasyoku_Pamphlet-1.jpg" src="http://www.kys-lab.com/sasaki/assets_c/2012/02/syasyoku_Pamphlet-1-thumb-480x679-134.jpg" class="Slash" style="" height="679" width="480" /></a></span>

<p>今回の展示会では、<a href="http://www.kys-lab.com/sasaki/2011/12/post-8.php" target="_blank">チラシ</a>に続いてパンフレットのデザインもお手伝いさせていただきました。執筆者も内容も組版もとても濃いので（笑）、表紙もそれに負けないように濃い味付けにしています（わかりづらいけど、黒ベタの箇所はリッチブラック）。</p>
<p>そんな写植の時代の内容がぎっしりと詰まったパンフレット（A4 72ページ）はかなり好評で、なかには二冊購入される方もおられ（一冊は保存用でしょうか）、嬉しい限りです。</p>

<h3>「写植の時代」展パンフレットの購入先</h3>

<p>「写植の時代」展のパンフレットは大阪DTPの勉強部屋さんのサイトから購入できます。文字や組版に興味のある方はぜひ！</p>

<p><a href="http://www.osakadtp.com/?page_id=1210" target="_blank" class="allow">「写植の時代」展パンフレット｜大阪DTPの勉強部屋</a></p>]]>
    </content>
</entry>

<entry>
    <title>「写植の時代」展</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2011/12/post-8.php" />
    <id>tag:www.kys-lab.com,2011:/sasaki//2.186</id>

    <published>2011-12-21T05:40:02Z</published>
    <updated>2011-12-26T00:47:15Z</updated>

    <summary> 大阪DTPの勉強部屋さん主催の「写植の時代」展。 写植や版下世代の人たちだけで...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="EXHIBITION" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="dtp" label="DTP" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="モリサワ" label="モリサワ" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="写植" label="写植" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="展示会" label="展示会" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="type_main.jpg" src="http://www.kys-lab.com/sasaki/img/type_main.jpg" width="500" height="270" class="mt-image-none" style="" /></span>

<p><a href="http://www.osakadtp.com/" target="_blank">大阪DTPの勉強部屋</a>さん主催の<strong>「写植の時代」展</strong>。</p>
<p>写植や版下世代の人たちだけではなく、文字や組版に興味ある人やデザイナーさんもぜひ行ってみましょう！ きっと、明日の制作の糧となるはずです。</p>
<p>私も微力ながら、今回のチラシをデザイン制作させていただきました。</p>]]>
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://www.kys-lab.com/sasaki/assets_c/2011/12/typesetting_flier-130.php" onclick="window.open('http://www.kys-lab.com/sasaki/assets_c/2011/12/typesetting_flier-130.php','popup','width=595,height=842,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="http://www.kys-lab.com/sasaki/assets_c/2011/12/typesetting_flier-thumb-480x679-130.jpg" alt="typesetting_flier.jpg" class="Slash" style="" width="480" height="679" /></a></span>

<h3>日時</h3>
<h4>2012年2月17日（金）～21日（火）</h4>
<p>展示時間　14時～21時<br />
※19日（日）は閉館<br />
展示を観るのは無料<br />
</p>

<h3>場所</h3>
<h4>クリエイティブネットワークセンター大阪 メビック扇町</h4>
<p>〒530-0025 大阪市北区扇町2-1-7<br />
扇町キッズパーク　3F　交流スペース（3）</p>

<h3>内容</h3>
<h4>モリサワ MC-6型の実機展示と写植体験</h4>
<ul>
<li>17日（金）19時30分　「写植の時代」解説講座</li>
<li>20日（月）19時30分　「写植の時代」解説講座</li>
<li>21日（火）19時30分　「写植の時代」を語る［座談会］</li>
</ul>
<p>3つの催しには参加費500円</p>
<p><a href="http://www.osakadtp.com/?p=1079" title="大阪DTPの勉強部屋「写植の時代」展" target="_blank">詳細はコチラにて！</a></p>]]>
    </content>
</entry>

<entry>
    <title>InDesign CS 5.5 で 縦書きに対応した EPUB 3 の電子書籍作成</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2011/07/indesign-cs-55-epub-3.php" />
    <id>tag:www.kys-lab.com,2011:/sasaki//2.185</id>

    <published>2011-07-20T05:20:48Z</published>
    <updated>2011-07-22T07:13:14Z</updated>

    <summary> 電子書籍の新規格「EPUB 3」は、 HTML 5 や CSS 3 をベースに...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="EPUB" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="InDesign" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="dreamweaver" label="Dreamweaver" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="epub" label="ePub" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="indesign" label="Indesign" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="iphone" label="iPhone" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="epub3_main.gif" src="http://www.kys-lab.com/sasaki/img/epub3_main.gif" class="mt-image-none" style="" width="500" height="270" /></span>
<p>電子書籍の新規格「EPUB 3」は、 HTML 5 や CSS 3 をベースにしているため、ビデオやオーディオなどのマルチメディアに対応したコンテンツや、JavaScript によるインタラクティブなコンテンツの作成が可能となります。</p>
<p>また、いままでの EPUB では表現できなかった日本語の縦書きとルビ、圏点などの機能が実装されています。</p>
<p>今回は、EPUB 3 への書き出しに対応している「InDesign CS 5.5」を使用して、EPUB 3 の縦書きとルビ機能を試してみました。</p>]]>
        <![CDATA[<h3>InDesign CS 5.5 から EPUB 書き出し</h3>

<p>テキストの素材は、青空文庫さんから太宰治の「走れメロス」をダウンロードしました。ありがとうございます。</p>
<p><a href="http://www.aozora.gr.jp/" target="_blank" class="allow" >青空文庫</a></p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_81/epub3_00.gif" width="480" height="343" alt="縦書きに組版" class="Slash" />
<p>InDesign でルビを入れて縦書きで組んでみました（とりあえず組んだので、文字組みに関する突っ込みはナシの方向で）。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_81/epub3_01.gif" width="480" height="555" alt="タグを書き出し" class="Slash" />
<p>本文や見出し、文中の縦中横などを「段落スタイル」と「文字スタイル」で設定しておくと、書き出される CSS にもスタイル設定が引き継がれるので、必ず設定しておく。</p>
<p>各スタイルから「タグを書き出し」で書き出されるタグを編集できるようですね。</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_81/epub3_02.gif" width="480" height="269" alt="すべての書き出しタグを編集" class="Slash" />
<p>「段落スタイル」と「文字スタイル」のオプションメニューから「すべての書き出しタグを編集」を選ぶと、複数のスタイルのタグやクラス名の編集が一括でできるので便利。</p>

<p>スタイルの設定ができたら、EPUB への書き出し。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_81/epub3_03.gif" width="480" height="505" alt="一般" class="Slash" />
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_81/epub3_04.gif" width="480" height="505" alt="目次" class="Slash" />
<p>【ファイル → 書き出し】で「EPUB 書き出しオプション」は、「一般」と「画像」はデフォルトで、「目次」の「CSS オプション」の「埋め込みフォントを含む」はチェックをはずしました（※フォントを埋め込んでも、正常に表示しなかったので）。</p>

<h3>Dreamweaver で編集</h3>
<h4>■ HTML ファイルの編集</h4>
<p>EPUB ファイルの拡張子を「.epub」から「.zip」に変更後、解凍。「OEBPS」フォルダにある HTML ファイルを開く。</p>
<p>EPUB ファイルの解凍と圧縮方法は、以前 EPUB に動画を埋め込んだ記事を参考にしてくださいませ。</p>
<p> <a href="http://www.kys-lab.com/sasaki/2010/07/iphoneibooksepub.php" target="_blank" class="allow">iPhoneのiBooks用EPUBに動画を埋め込む - STAFF_01 [KYS-LAB] </a></p>
<p>HTML ファイルを開くと、XHTML 1.1 形式で書き出されてますね。EPUB 3 の記述は HTML 5 ベース（XHTML5）だったはず。InDesign CS 5.5 からは EPUB3 への書き出しにに対応しているとのことだが、このへんはアップグレードで解消されていくのかな？ 設定を見落としていたらスミマセン。</p>
<p>とりあえず、HTML 5 の記述に修正していく。</p>
<p>自動で書き出された DTD と html の属性を変更。</p>
<h5>（変更前）</h5>
<pre>
&lt;?xml version="1.0" encoding="utf-8" standalone="no"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 //EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
</pre>
<h5>（変更後）</h5>
<pre>
&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;!DOCTYPE html&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2011/epub" lang="ja" xml:lang="ja"&gt;
</pre>
<p>link 要素に設定する type 属性も省略できるので削除しました。</p>
<h5>（変更前）</h5>
<pre>
&lt;link href="template.css" rel="stylesheet" type="text/css" /&gt;
</pre>
<h5>（変更後）</h5>
<pre>
&lt;link href="template.css" rel="stylesheet" /&gt;
</pre>

<h4>■ CSS ファイルの編集</h4>
<p>つづいて、CSS ファイルを開く。</p>
<p>body タグに縦書きに反映させるベンダープレフィックスを追加（「-epub-」と「-webkit-」）。</p>
<pre>
body {
	writing-mode : vertical-rl;
	-epub-writing-mode : vertical-rl;
	-webkit-writing-mode : vertical-rl;
}
</pre>

<div style=" border : 1px solid #d8eb00; border-left : 5px solid #d8eb00; padding:10px; margin-left : 10px;">
<h4>■メモ（ writing-mode のプロパティ）</h4>
<p>このプロパティは行送り方向を設定する。</p>
<dl>
<dt>horizontal-tb</dt>
    <dd>行送り方向は上から下。横書き。</dd>
<dt>vertical-rl</dt>
    <dd>行送り方向が右から左。縦書き。</dd>
<dt>vertical-lr</dt>
    <dd>行送り方向が左から右。縦書き。</dd>
</dl>
</div>

<p>Windows では MS 明朝以外のフォントでは縦書きにならなかったので、使用フォントを変更。</p>
<pre>
font-family : "Hiragino Mincho ProN W3", "@ＭＳ 明朝", serif;
</pre>
<p>本文の文字サイズをブラウザ標準サイズの 1em に。</p>
<pre>
font-size : 1em;
</pre>

<h4>■ content.opf ファイルの編集</h4>
<p>タイトルと著者名を追加。</p>
<pre>
	&lt;dc:title&gt; 走れメロス&lt;/dc:title&gt; 
	&lt;dc:creator&gt; 太宰治&lt;/dc:creator&gt; 
</pre>

<h3>EPUB の確認</h3>

<p>現時点では EPUB 3 に対応した正式なリーダーがまだ出ていないとのことなので、EPUB 3 に対応した Web ブラウザ「Google Chrome」で確認。その他、バリデートや各種リーダーでもどのように表示するのか一応確認してみました。</p>

<h4>■「Validate EPUB」で確認</h4>
<p>とりあえず、修正した EPUB が正しいのか、「Validate EPUB」でチェックしてみました。
<p>「Validate EPUB」は、EPUB をバリデートして構文チェックをしてくれる便利な Web サービスです。<br />
<a href="http://threepress.org/document/epub-validate/" target="_blank" class="allow">Validate EPUB</a></p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_81/epub3_validate.gif" width="480" height="413" alt="Validate EPUB " class="Slash" />
<p>エラーでまくり。。。（140個も）<br />
まだ EPUB 3 には対応していないのか、「ruby」要素は許容してないよ的なエラー内容も。</p>

<h4>■「Google Chrome」で確認</h4>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_81/epub3_05.gif" width="480" height="505" alt="GoogleChrome" class="Slash" />
<p>気をとりなおして「Google Chrome」で確認。お、縦書きで表示されますね。ルビもちゃんとふられてます。</p>

<h4>■「iBooks」で確認</h4>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_81/epub3_ibooks.gif" width="320" height="480" alt="iBooks" class="Slash" />
<p>現時点（2011.7.20）では、EPUB 3 に対応してませんが、iPhone の「iBooks」で一応確認。うーん、やはり縦書きで表示されない。</p>

<h4>■「Stanza」で確認</h4>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_81/epub3_stanza.gif" width="320" height="480" alt="Stanza" class="Slash" />
<p>「Stanza」でも確認。やはり縦書きで表示されませんでした。</p>

<h4>■「espur（エスパー）」で確認</h4>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_81/epub3_espur.gif" width="480" height="505" alt="espur" class="Slash" />
<p>EPUB 3.0 に対応している PC 専用リーダー「espur（エスパー）」で確認。あ、縦書きで表示されていますね。ページ送りは逆になってましたが。サンプルの「草枕」ではきちんとページ送りできていたので、ボクの設定がおかしいんだと思います。</p>
<p><a href="http://espur.jp/" target="_blank" class="allow">espur（エスパー）：縦書き用電子書籍リーダー/eBook Reader for EPUB3(EPUB Enhancements for Japanese Text Layout)</a></p>

<h4>■Murasaki</h4>
<p>今回は検証してませんが、Mac な方には「Murasaki」という EPUB リーダーが縦書きに対応しているそうです。</p>
<p><a href="http://dl.dropbox.com/u/160781/apps/mac/Murasaki/index.html" target="_blank" class="allow">Murasaki - Simple EPUB Previewer</a></p>

<h3>感想</h3>
<p>InDesign 5.5 になって、EPUB の書き出しがかなり便利になっていますが、完全に自動化ってわけにはいきませんね。</p>
<p>EPUB 3 については、対応したリーダーが出ていないので、広がっていくのはもう少し先かもしれません。今回は正式なマニュアルもなく、自分で調べた範囲内で制作したので、工程で間違っている箇所もあるかと思います。コメント等で突っ込んでいただけたら嬉しいです。</p>

<h3>サンプルソース（追記）</h3>
<p>HTML と CSS のソースは、「jsdo.it」に上げときました。</p>
<p><a href="http://jsdo.it/sasaki808/fRhY" target="_blank" class="allow" >走れメロス - jsdo.it - Share JavaScript, HTML5 and CSS</a></p>

<h3>参考サイト</h3>
<p><a href="http://www.slideshare.net/youjisakai/epub-30" target="_blank" class="allow" >EPUB 3.0 - 電子書籍の表現力</a></p>
<p><a href="http://www.informe.co.jp/useful/epublish/epub10.html" target="_blank" class="allow" >EPUB 3に見る日本語組版機能</a></p>
<p><a href="http://epubcafe.googlecode.com/svn/trunk/tutorial/OEBPS/Text/Chapter030202.xhtml" target="_blank" class="allow" >制作基本チュートリアル</a></p>]]>
    </content>
</entry>

<entry>
    <title>Dreamweaber CS 5.5 の「PhoneGap」でスマホのネイティブアプリ制作</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2011/07/dreamweaber-cs-55-phonegap.php" />
    <id>tag:www.kys-lab.com,2011:/sasaki//2.184</id>

    <published>2011-07-07T10:07:58Z</published>
    <updated>2011-07-09T01:20:30Z</updated>

    <summary> 前回、Dreamweaber CS 5.5 の「jQuery Mobile」対...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="Android" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Dreamweaver " scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="android" label="Android" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="dreamweaver" label="Dreamweaver" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="phonegap" label="PhoneGap" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="phonegap_main.gif" src="http://www.kys-lab.com/sasaki/img/phonegap_main.gif" class="mt-image-none" style="" width="500" height="270" /></span>
<p><a href="http://www.kys-lab.com/sasaki/2011/06/dreamweaber-55-jquery-mobile.php" target="_blank">前回、Dreamweaber CS 5.5 の「jQuery Mobile」対応機能で、スマートフォンサイトのサンプルを作った</a>ので、今回は、これも 5.5 で新しく追加された「PhoneGap」の機能で、Android のネイティブアプリケーションに変換してみました。</p>]]>
        <![CDATA[<h3>PhoneGap とは</h3>
<p><a href="http://www.nitobi.com/" target="_blank" >Nitobi 社</a>が開発したクロスプラットフォーム・モバイルアプリケーションの開発フレームワークで、HTML ＋ CSS  ＋JavaScript を用いて、iPhone / Android のネイティブアプリケーションを開発できます。通常　Objective-C や Java を習得しないとできないことを代わりにゴニョゴニョしてくれる非常にありがたいオープンソースソフトウェア。</p>
<p><a href="http://www.phonegap.com/" target="_blank" class="allow" >PhoneGap 公式サイト</a></p>

<h3>PhoneGap の変換工程</h3>
<p>スマートフォンサイトが完成したら、PhoneGap でアプリに変換。</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_80/phonegap01.gif" width="480" height="339" alt="アプリケーションフレームワークの設定選択" class="Slash" />
<p>まず最初に、【サイト → モバイルアプリケーション → アプリケーションフレームワークの設定】で Android SDK のパスを設定する（ Mac 版は iOS も可能）。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_80/phonegap02.gif" width="480" height="154" alt="アプリケーションフレームワークの設定" class="Slash" />
<p>「簡易インストール」で任意の場所に Android SDK をインストール（今回はデスクトップに）。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_80/phonegap03.gif" width="480" height="285" alt="ネイティブアプリケーション設定" class="Slash" />
<p>続いて、【モバイルアプリケーション → アプリケーション設定】で、アプリ名や作成者名、アイコンなどの画像を設定。</p>
<p>※アイコン画像（36 x 36 px）とスタートアップスクリーン画像（320 x 480 px）は、あらかじめ PNG 形式で作成しておこう。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_80/phonegap04.gif" width="480" height="271" alt="ビルドおよびエミュレート" class="Slash" />
<p>最後に、【モバイルアプリケーション → ビルドおよびエミュレート → Android 】でスマホアプリに一発変換。<br />
※DW が機嫌のいい時とわるい時があるみたいで、エミュレータが開いてくれないことがある。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_80/phonegap05.gif" width="480" height="191" alt="変換中" class="Slash" />
<p>変換中...</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_80/phonegap06.gif" width="480" height="444" alt="エミュレータ画面1" class="Slash" />
<p>お、Android が起動</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_80/phonegap07.gif" width="480" height="444" alt="エミュレータ画面2" class="Slash" />
<p>ロックを解除して</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_80/phonegap08.gif" width="480" height="444" alt="エミュレータ画面3" class="Slash" />
<p>アプリを選択すると</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_80/phonegap09.gif" width="480" height="444" alt="エミュレータ画面4" class="Slash" />
<p>アイコンが表示された</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_80/phonegap10.gif" width="480" height="444" alt="エミュレータ画面5" class="Slash" />
<p>スタートアップ画面も</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_80/phonegap11.gif" width="480" height="444" alt="エミュレータ画面6" class="Slash" />
<p>jQuery Mobile で作成したサイトもちゃんと表示しました！</p>
<br />
<p>たったこれだけの作業で、スマホアプリが作成できるってスゴイっすね（内容はともかく...）。こんなボクでも何か作れるんじゃないかって勘違いさせてくれますわ（笑</p>]]>
    </content>
</entry>

<entry>
    <title>Dreamweaber CS 5.5 の「jQuery Mobile」対応機能</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2011/06/dreamweaber-55-jquery-mobile.php" />
    <id>tag:www.kys-lab.com,2011:/sasaki//2.183</id>

    <published>2011-06-28T01:52:20Z</published>
    <updated>2011-06-28T05:11:00Z</updated>

    <summary> 5月下旬に発売された「Dreamweaber CS 5.5」がスマートフォン対...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="Dreamweaver " scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="JQUERY" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="dreamweaver" label="Dreamweaver" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="jquery" label="jQuery" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="jquerymobile" label="jQuery Mobile" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="jqm-main.gif" src="http://www.kys-lab.com/sasaki/img/jqm-main.gif" class="mt-image-none" style="" height="270" width="500" /></span>
<p>5月下旬に発売された「Dreamweaber CS 5.5」がスマートフォン対応機能が強化されたとのことなので、「jQuery Mobile」を少し触ってみました。</p>]]>
        <![CDATA[<h3>jQuery Mobile とは</h3>

<p>jQuery Mobileとは、iPhone、Android、Windows Phone、BlackBerry などのスマートフォンに対応したサイト構築するためのフレームワーク。jQuery のプラグインとして動作します。</p>
<h4>■ jQuery Mobileのダウンロードページ</h4>
<p><a href="http://jquerymobile.com/" target="_blank" class="allow" >jQuery Mobile</a></p>

<h3>Dreamweaber CS 5.5 の jQuery Mobile 作成手順</h3>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_79/jqm-1.gif" width="480" height="245" alt="新規作成" class="Slash" />

<p>【ファイル ＞ 新規】で、「サンプル作成」から「モバイルスターター」 → 「jQuery Mobile (CDN)」を選択すると、</p>


<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_79/jqm-2.gif" width="480" height="480" alt="4ページ分のテンプレート" class="Slash" />
<p>4ページ分のテンプレートが自動で出来上がる。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_79/jqm-3.gif" width="480" height="480" alt="ウィンドウサイズ" class="Slash" />
<p>ウィンドウサイズもいくつか用意されており、「320 × 480」を選択すると iPhone のサイズに。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_79/jqm-4.gif" width="440" height="707" alt="ライブビュー" class="Slash" />
<p>デザインビューを「ライブビュー」に切り替えると、実際の画面を確認できる。</p>

<p>基本のテンプレートが用意されているので、こんなぐらいのサイトなら、あっちゅーまに出来てしまいます。</p>


<h3>jQuery Mobile のカスタマイズ</h3>

<p>現時点（2011.06.27現在）で、jQuery Mobile のBETA版がでているので、最新版を読み込むように変更（デフォルトでは前のバージョンの Alpha 版を読み込むように設定されている）。</p>

<pre>
&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /&gt;
&lt;script src="http://code.jquery.com/jquery-1.6.1.min.js">&lt;/script&gt;
&lt;script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"&gt;&lt;/script&gt;
</pre>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_79/jqm-5.gif" width="321" height="481" alt="ページタイトル" class="Slash" />
<p>&lt;h1&gt;のタイトルを書き換えると、ページのタイトルが変わります。</p>
<pre>
&lt;div data-role="header"&gt;
	&lt;h1&gt;KYS-LAB&lt;/h1&gt;
&lt;/div&gt;
</pre>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_79/jqm-6.gif" width="321" height="481" alt="ブログのfeed読み込み" class="Slash" />

<p>Back ボタンを追加したい場合は、下記を header に追加（Alpha 版ではツールバーにデフォルト表示）。</p>
<pre>
    &lt;a href="#page" data-rel="back"&gt;Back&lt;/a&gt;
</pre>

<p>つづいて、各ページのコンテンツ部分。2ページ目に弊サイトブログの feed を読み込ませました（ Google AJAX Feed API を利用。参考記事： <a href="http://ascii.jp/elem/000/000/407/407910/" target="_blank" >Google Feed APIで3分マッシュアップ</a>）。</p>

<p>ajaxのリンク先が php の場合、うまく認識してくれなかったので、通常のページ移動をさせるために、a タグの属性に「rel="external"」を追加しました。

  <img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_79/jqm-7.gif" width="321" height="481" alt="プロフィールページ" class="Slash" />
<p>3、4ページ目はそれぞれプロフィールと問い合わせ先を追加しました。スクリプトを書かずにマークアップだけで構築できるのはとても便利。</p>

<h3>jQuery Mobile サンプルページ</h3>
<p><a href="http://www.kys-lab.com/sasaki/jqm/" target="_blank" class="allow">KYS-LAB</a>（スマホバージョン）</p>

<p>凝ったスマホサイトやアプリを作るわけじゃなければ十分かも。今後、スマホをターゲットにしたサイトやアプリは必須だと思うので、その他の機能もちょっとずつ覚えよっと。</p>

<h3>参考サイト</h3>
<p><a href="http://yst.web.infoseek.co.jp/jquerymobile/#1" target="_blank" class="allow">jQuery Mobile [基礎編]</a></p>
<p><a href="http://kachibito.net/web-design/jquery-mobile-mark-up-list.html" target="_blank" class="allow">jQuery Mobile使用時によく使いそうなマークアップのリストと動作サンプル - かちびと.net</a></p>
<p><a href="http://coliss.com/articles/build-websites/operation/javascript/jquery-mobile-tips-and-snippets-to-get-you-started-by-webdesignerdepot.html" target="_blank" class="allow">[JS]jQuery Mobileでスマフォ対応ページをはじめて作成する際に役立つコード集とつまづきやすいポイント | コリス</a></p>
<p><a href="http://havelog.ayumusato.com/develop/javascript/e267-jqm_beta1_upgrade.html" target="_blank" class="allow">jQuery Mobile Beta1へのアップデートについてまとめたメモ ::ハブろぐ</a></p>

<p>↓このぐらいカスタマイズできたらスゴイっすね。<br />
  <a href="http://www.jqmgallery.com/" target="_blank" class="allow">jQuery Mobile Examples - JQM Gallery</a></p>]]>
    </content>
</entry>

<entry>
    <title>「KYS-LAB」サーバー移転のお知らせ</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2011/06/kys-lab.php" />
    <id>tag:www.kys-lab.com,2011:/sasaki//2.182</id>

    <published>2011-06-14T06:27:43Z</published>
    <updated>2011-06-16T05:02:17Z</updated>

    <summary> 「KYS-LAB」は本日6月14日から明日にかけてサーバー移転をします。しばら...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="NEWS" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="news" label="news" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="サーバー移転" label="サーバー移転" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="Move.gif" src="http://www.kys-lab.com/sasaki/img/Move.gif" class="mt-image-none" style="" height="270" width="500" /></span>

<p>「KYS-LAB」は本日6月14日から明日にかけてサーバー移転をします。しばらくサーバーにつながりにくくなるかと思いますが、何卒ご了承くださいませ。</p>]]>
        <![CDATA[<h3>【追記】サーバー移転メモ（2011.06.16）</h3>
<p>主要コンテンツの移転はほぼ完了しました。いやぁ、CMSだけでも7つあったのでなかなか大変でした。</p>
<p>以下、サーバー移転でハマったんで自分用メモ。同症状でもサーバーによっては解決しない可能性が高いので、鵜呑みにしないでくださいね。</p>
<h4>■WordPress</h4>
<dl>
<dt>【問題】ログイン画面に入ろうとすると「application/x-httpd-php」を開こうとする！</dt>
<dd>【解決】前サーバーで、PHP を CGIモードで動かすために記述した wp-admin 内の「.htaccess」を削除。</dd>
<dt>【問題】Cookie を削除しても「自動転送がループ」エラーで管理画面にさえ入れない！</dt>
<dd>【解決】WP（同バージョン）を再インストール後、phpMyAdmin から DB をインポート。</dd></dl>

<h4>■MovableType</h4>
<dl>
<dt>【問題】ダイナミックパブリッシングのページが全て真っ白に！</dt>
<dd>【解決】古い「.htaccess」を削除。いったんスタティック設定で保存後、再度ダイナミック設定で保存し「.htaccess」を新規に自動作成。</dd>
</dl>

<h4>■PHP</h4>
<dl>
<dt>【問題】プログラムの動作に不具合が！</dt>
<dd>【解決】サーバにインストールされてる「PEAR」確認。必要なパッケージがなければインストールし、「php.ini」の記述（パスなど）も見直す。</dd>
</dl>]]>
    </content>
</entry>

<entry>
    <title>GIMPスーパーテクニック「デジタルアートを作成」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2011/05/gimp-4.php" />
    <id>tag:www.kys-lab.com,2011:/sasaki//2.181</id>

    <published>2011-05-30T01:55:42Z</published>
    <updated>2011-05-30T02:30:46Z</updated>

    <summary> 「GIMPスーパーテクニック教本」（晋遊舎）にて作例を1点執筆しました。 「光...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="GIMP" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="gimp" label="GIMP" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="graphic" label="GRAPHIC" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="gimp2011.jpg" src="http://www.kys-lab.com/sasaki/img/gimp2011.jpg" class="mt-image-none" style="" height="270" width="500" /></span>

<p><a href="http://www.amazon.co.jp/gp/product/4863912978/ref=as_li_ss_tl?ie=UTF8&tag=kyslab01-22&linkCode=as2&camp=247&creative=7399&creativeASIN=4863912978" target="_blank">「GIMPスーパーテクニック教本」</a>（晋遊舎）にて作例を1点執筆しました。</p>

<h3>「光輝く天空を翔るペガサス」作例</h3>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_78/Pegasus_Fix.jpg" alt="GIMP作例" class="Slash" />
<p class="captxt">「馬と鳥の写真（上）からペガサスのCG（下）に」</p>
<p>月と宇宙空間を一から作成後、馬と鳥の羽の写真を合成・加工し、ペガサスのCGを作成しました。</p>

<h4>素材画像</h4>
<ul>
<li>馬の画像：<a href="http://www.yunphoto.net/" title="ゆんフリー写真素材集" target="_blank" >ゆんフリー写真素材集</a>さん</li>
<li>鳥の画像：<a href="http://www.everystockphoto.com/" title="everystockphoto" target="_blank" >everystockphoto</a>さん</li>
</ul>

<p>詳しくは、ムックを見てください～ (^_^;</p>
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=kyslab01-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4863912978" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>]]>
        
    </content>
</entry>

<entry>
    <title>アートなデジタル額縁「FRAMED*」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2011/05/framed.php" />
    <id>tag:www.kys-lab.com,2011:/sasaki//2.180</id>

    <published>2011-05-10T01:29:13Z</published>
    <updated>2011-05-10T01:43:04Z</updated>

    <summary> 昨年、モリサワ文字文化フォーラムで、中村勇吾氏がチラッと話されてたデジタルな額...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="DESIGN" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="design" label="DESIGN" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="framed" label="FRAMED*" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="tha" label="THA" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="framed.jpg" src="http://www.kys-lab.com/sasaki/img/framed.jpg" class="mt-image-none" style="" height="270" width="500" /></span>

<p>昨年、<a href="http://www.kys-lab.com/sasaki/2010/04/2010.php" title="モリサワ文字文化フォーラム「文字とデザイン2010」に参加 - STAFF_01 [KYS-LAB]">モリサワ文字文化フォーラム</a>で、中村勇吾氏がチラッと話されてたデジタルな額縁<strong>「FRAMED*」</strong>が正式に公開されました。</p>

<iframe width="499" height="284" src="http://www.youtube.com/embed/Rh9mc1PTj08?rel=0" frameborder="0" allowfullscreen></iframe>

<p><a href="http://frm.fm/" target="_blank" class="allow">「FRAMED*」公式サイト</a></p>
<blockquote>
<p>ソフトウェアアート／映像／モーショングラフィックといった様々な形式の表現を、暮らしの中で日常的に体験して頂けるようデザインされた新しい「額縁」。それが「FRAMED」です。</p>
<p>via <a href="http://twitter.com/#!/yugop/status/67497776598097920" target="_blank">中村勇吾氏のTwitterより</a></p>
</blockquote>

<p>ほんと素敵ですね。</p>
<p>確か、デバイスから海外の企業と共同で開発しているとおっしゃっていたので、それなりのお値段になるでしょうが、インテリアに欲しい！（そんなシャレた家に住んでへんけど）</p>]]>
        
    </content>
</entry>

<entry>
    <title>WordPress 3.1 「アップロードファイルの設定」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2011/03/wordpress-31.php" />
    <id>tag:www.kys-lab.com,2011:/sasaki//2.179</id>

    <published>2011-03-08T02:13:10Z</published>
    <updated>2011-03-08T02:23:15Z</updated>

    <summary> WordPress 3.1 でサイトを構築していて、アップロードファイルのサイ...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="WordPress" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="wordpress" label="WordPress" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="アップロードファイル" label="アップロードファイル" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="wp_uploadmain2.gif" src="http://www.kys-lab.com/sasaki/img/wp_uploadmain2.gif" width="500" height="270" class="mt-image-none" style="" /></span>

<p>WordPress 3.1 でサイトを構築していて、アップロードファイルのサイズで少しハマったんでメモ。</p>

<p>投稿画面でお客さんから送られてきた PDF データを挿入しようとしたら、<strong>「●●.pdfは、エラーのためアップロードに失敗しました　このファイルは、このサイトのアップロード上限を超えています。」</strong>のエラー表示。</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_76/wp_upload01.gif" alt="アップロードサイズが1MBって" class="Slash" />
<p>よく見ると、「アップロードファイルの最大サイズ：1MB」となっていました。1MB って。</p>

<p>ボクたちのような仕事をしていて、画像や PDF のサイズを変更できれば別ですが、ふつう一般の方でそこまで気をつけて、サイズを調整されないはずです。デジカメで撮った大きい画像もバンバン掲載していかれるでしょうし、アップロードファイルサイズの上限値を上げる必要があります。</p>]]>
        <![CDATA[<h3>「.htaccess」や「php.ini」でアップロードファイルの上限値変更</h3>

<p>ファイルサイズの上限値を変更しようとググってみると、「.htaccess」や「php.ini」ファイルで設定するとのこと。</p>

<p><a href="http://www.ideaxidea.com/archives/2009/02/wordpress_import_hacks.html" title="WordPressのインポート機能で2MB制限を突破する方法 - IDEA*IDEA ～ 百式管理人のライフハックブログ" target="_blank" class="allow" >WordPressのインポート機能で2MB制限を突破する方法 - IDEA*IDEA ～ 百式管理人のライフハックブログ</a></p>

<p><a href="http://word-express.net/kowaza-2/" title="php.iniを編集してインポートできるファイル・サイズを増量する 初めてのWordPress＆PC" target="_blank" class="allow">php.iniを編集してインポートできるファイル・サイズを増量する 初めてのWordPress＆PC</a></p>

<p><span style="font-size:30px; color:red">が、</span>上記サイトを参考に設定を変えても WordPress 3.1 では、エラーをはき出したり、上限値が変更されませんでした。おそらくバージョン 2.9以下の WordPress なら可能なんだと思います（※試していません、ゴメンなさい）。</p>

<h3>アップロードファイルの設定</h3>

<p>あっちこち、ダッシュボード内をさがしていると、<strong>「サイトネットワーク管理者」＞「設定」＞「アップロード設定」</strong>にありました（※「サイト管理」のほうではありません。サイトネットワーク管理者」です。慣れるまでややこしい）。アップロード容量や最大サイズ、可能なファイル形式など、ここで設定できます。</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_76/wp_upload02.gif" alt="アップロード設定" class="Slash" />
<p>「アップロードファイルの最大サイズ」が「1500KB」になってました。いくらなんでもデフォルトで 1500KB はないやろって。</p>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_76/wp_upload03.gif" alt="最大ファイルが増えた" class="Slash" />
<p>とりあえず、アップロードファイルの最大サイズを「30000KB（30MB）」まで増やすと、「29MB」に変更されました。1MB 減るのもよくわからんが。</p>

<h3>マルチサイト化していない WordPress 3.1 の場合</h3>

<p>これは、ネットワーク化（マルチサイト化）設定をしないと出てこないのかなと思い、ネットワーク化していないシングルシステムの WordPress 3.1 を調べてみると、上記のようなアップロードファイルの設定画面が見当たりませんでした（今のところ2011.3.8）。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_76/wp_upload04.gif" alt="デフォルトで200MBって" class="Slash" />
<p>その代わりにアップロードファイルの最大サイズが 200MB となってます。なんで 200MB やねん。差ありすぎやん。まぁ、もっと本読んで勉強せなあきませんな。</p>]]>
    </content>
</entry>

<entry>
    <title>jQuery で可変グリッドレイアウト</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2011/02/jquery.php" />
    <id>tag:www.kys-lab.com,2011:/sasaki//2.178</id>

    <published>2011-02-08T08:03:33Z</published>
    <updated>2011-02-08T08:22:43Z</updated>

    <summary>  可変グリッドレイアウトとは、ブラウザのウインドウサイズを広げたり縮めたりする...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="JQUERY" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="css" label="CSS" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="jquery" label="jQuery" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[ <span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="liquid_main.jpg" src="http://www.kys-lab.com/sasaki/img/liquid_main.jpg" width="500" height="270" class="mt-image-none" style="" /></span>

<p>可変グリッドレイアウトとは、ブラウザのウインドウサイズを広げたり縮めたりすると、コンテンツが再配置されるグリッドレイアウトのこと。一昨年ぐらいから流行ってますよね。</p>
<p><a href="http://www.kys-lab.com/sasaki/" title="STAFF_01 [KYS-LAB]" target="_blank" >トップページ</a>でも試してみようと思いながらも、ずっとほったらかしてたので、突然思い立ってやってみました。</p>]]>
        <![CDATA[<h3>Smart Columns w/ CSS & jQuery</h3>

<p>リキッドレイアウト上に、配置されたコンテンツの幅や空きスペースをうまいことゴニョゴニョしてくれる優れものスクリプト（※<a href="http://jquery.com/" title="jQuery: The Write Less, Do More, JavaScript Library" target="_blank">jQuery.js</a>が必要）。</p>

<p>解説とスクリプトは下記サイトからどうぞ。</p>

<a href="http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/" title="Smart Columns w/ CSS & jQuery | jQuery Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka" target="_blank" ><img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_75/liquid_01.jpg" alt="Smart Columns w/ CSS & jQuery" class="Slash" /></a>

<p><a href="http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/" title="Smart Columns w/ CSS & jQuery | jQuery Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka" target="_blank" class="allow" >Smart Columns w/ CSS & jQuery | jQuery Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka</a></p>

<h3>トップページに導入</h3>
<p>当ブログのトップページに導入してみました。サイドバーは固定で表示させたかったので、コンテンツエリアだけを CSS でリキッドレイアウトにしました（IE6 では少しくずれるのはご愛敬）。</p>
<a href="http://www.kys-lab.com/sasaki/" title="STAFF_01 [KYS-LAB]" target="_blank"  ><img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_75/liquid_02.jpg" alt="トップページ" class="Slash" /></a>

<p><a href="http://www.kys-lab.com/sasaki/" title="STAFF_01 [KYS-LAB]" class="allow" target="_blank">STAFF_01 [KYS-LAB]トップページ</a></p>

<p>お時間ございましたら、ウィンドウの幅を変更してみてください。こんなことが、簡単にできてしまうのが jQuery のスゴイところですねー。開発者に感謝。</p>

<p>こちらのプラグインもすごそうっす。いずれ試してみようと思います。</p>

<p><a href="http://blog.xlune.com/2009/09/jqueryvgrid.html" title="可変グリッドレイアウトのjQueryプラグイン書いたよ | Xlune::Blog" target="_blank" class="allow" >可変グリッドレイアウトのjQueryプラグイン書いたよ | Xlune::Blog</a></p>

<h3>参考サイト</h3>
<p><a href="http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-smart-columns.html" title="[JS]リキッドレイアウト上のカラムの幅や数を自動調整するスクリプト -Smart Columns | コリス" target="_blank" class="allow" >[JS]リキッドレイアウト上のカラムの幅や数を自動調整するスクリプト -Smart Columns | コリス</a></p>

<p><a href="http://www.css-designsample.com/csslayout/float-2column-w.html" title="2カラムリキッドレイアウトのCSSサンプルソース｜floatレイアウトサンプルソース" target="_blank" class="allow">2カラムリキッドレイアウトのCSSサンプルソース｜floatレイアウトサンプルソース</a></p>]]>
    </content>
</entry>

<entry>
    <title>WordPressの勉強-08「ネットワーク化した各ブログの情報を取得」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2011/01/wordpress-08.php" />
    <id>tag:www.kys-lab.com,2011:/sasaki//2.177</id>

    <published>2011-01-06T06:49:24Z</published>
    <updated>2011-01-06T07:02:24Z</updated>

    <summary> Wordpress 3.0 から、ネットワーク化すると複数のブログを管理できる...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="WordPress" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="php" label="PHP" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="wordpress" label="WordPress" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="wp-switch_main.gif" src="http://www.kys-lab.com/sasaki/img/wp-switch_main.gif" class="mt-image-none" style="" height="270" width="500" /></span>

<p>Wordpress 3.0 から、ネットワーク化すると複数のブログを管理できるマルチサイトの運営が可能になりました。そうなると、追加した各ブログの情報（新着情報やページ情報など）を取得したい場合が増えてきますよね。</p>

<p>Movabletype では「<a href="http://www.movabletype.jp/documentation/designer/multiblog/multiblog_template_tags.html" title="MultiBlog 機能を利用したテンプレートのカスタマイズ | Movable Type 4 ドキュメント" target="_blank"> MultiBlog </a>」で、複数ブログの情報をテンプレートタグで簡単に取得できたので、Wordpress も何か似たようなタグがあるだろうと調べてみると、WPMUで使用されていた「<a href="http://codex.wordpress.org/WPMU_Functions/switch_to_blog" title="WPMU Functions/switch to blog ? WordPress Codex" target="_blank">switch_to_blog</a> 」という関数を利用するとのこと。</p>

<p>それまでは、各ブログの RSS からタイトルやパーマリンクを抜き出して、最新情報に表示させていたけど、表示が重いしリアルタイムに反応してくれなかったので困っていました。これで一気に解決っす。</p>]]>
        <![CDATA[<h3>switch_to_blog() 関数</h3>

<p>ポイントは、「 switch_to_blog() 」の引数にサイト（ブログ）のIDを入れ、各ブログに切り替えて情報を取得する。</p>
<pre>
&lt;?php switch_to_blog(サイトのID) ?&gt; 
</pre>

<p>サイトの ID は、ダッシュボード内で調べることができます。</p>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_74/wp-switch01.gif" alt="サイトID" class="Slash" />
<p class="captxt">ダッシュボード内の「サイトID」</p>

<p>処理が終わると、最後に元のブログに戻す記述を忘れないように。</p>
<pre>
&lt;?php restore_current_blog(); ?&gt;
</pre>

<h3>サンプルコード</h3>
<h4>【新着情報サンプル】</h4>
<p>例えば、子ブログの新着情報を親ブログに表示させる場合なら、こんな感じで記述できます。</p>

<pre>
&lt;?php
// ブログIDが2の情報を取得する場合
switch_to_blog(2);
?&gt;
&lt;dl&gt;
&lt;?php
// 最新記事の5件を表示
query_posts('showposts=5');
while(have_posts()) : the_post();
?&gt;
&lt;dt&gt;&lt;?php the_time('Y年m月d日'); ?&gt;&lt;/dt&gt; 
&lt;dd&gt;&lt;a href="&lt;?php the_permalink() ?&gt;" rel="bookmark"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;
（&lt;?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat-&gt;cat_name ;} ?&gt;）&lt;/dd&gt;
&lt;?php endwhile; ?&gt;
</pre>


<h4>【サイトマップサンプル】</h4>
<p>簡単なサイトマップならこんな感じで取得できます。</p>

<pre>
&lt;?php
echo "&lt;h1&gt;サイトマップ&lt;/h1&gt;";
// 各ブログの情報を格納
$blog_list = get_blog_list();
// 各ブログの情報をID順で表示させる
foreach (array_reverse($blog_list) as $blog) {

	// ブログIDを切り替える
	switch_to_blog($blog['blog_id']);
	
	// 各ブログの概要
	echo "&lt;h2&gt;";
	bloginfo('description');
	echo "&lt;/h2&gt;\n";
	
	// 各ブログのページリスト
	echo "&lt;ul&gt;\n";
	wp_list_pages('title_li=');
	echo "&lt;/ul&gt;\n";
	
	// 元のブログにもどる
	restore_current_blog();
}
?&gt;
</pre>

<p>「 switch_to_blog 」は、ネットワーク化してマルチサイトを管理する場合、必ず必要となってくる機能だと思います。</p>

<h3>参考サイト</h3>

<p><a href="http://www.goldmine1969.com/blog/wordpress/4849" title="switch_to_blog：マルチサイトのポータルを作成する | Goldmine1969 :: BLOG" target="_blank" class="allow">switch_to_blog：マルチサイトのポータルを作成する | Goldmine1969 :: BLOG</a></p>

<p><a href="http://www.umbrellaprocess.com/archives/503" title="#WordPress マルチサイトネットワーク内の各ブログから最新の投稿1件を取得し時系列で並べる方法 | umbrella_process blog" target="_blank" class="allow">#WordPress マルチサイトネットワーク内の各ブログから最新の投稿1件を取得し時系列で並べる方法 | umbrella_process blog</a></p>]]>
    </content>
</entry>

<entry>
    <title>WordPressの勉強-07「ウィジェット作成」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2010/12/wordpress-07.php" />
    <id>tag:www.kys-lab.com,2010:/sasaki//2.176</id>

    <published>2010-12-07T07:24:27Z</published>
    <updated>2010-12-07T07:54:08Z</updated>

    <summary> WordPress では「ウィジェット」機能を使うと、サイドバーやフッターの項...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="WordPress" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="widget" label="Widget" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="wordpress" label="WordPress" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="widget_main.gif" src="http://www.kys-lab.com/sasaki/img/widget_main.gif" class="mt-image-none" style="" height="270" width="500" /></span>

<p>WordPress では「ウィジェット」機能を使うと、サイドバーやフッターの項目の中身や並び順を、管理画面から簡単にレイアウトできます。</p>

<p>その中の「テキスト」ウィジェットを使用すると、任意のテキストや HTML が作成できます。ただ、PHP や WordPress の機能を活用しようと思えば、やはり新規にウィジェットを作成しておいたほうが便利ですね。</p>

<p>で、今回はオリジナルウィジェットの作成方法のメモ書き。</p>]]>
        <![CDATA[<h3>ウィジェットの作成</h3>

<h4>【大まかな流れ】</h4>
<ol>
<li>WP_Widget クラスを継承するサブクラスとしてウィジェットを定義。</li>
<li><ul>
<li>ウィジェットのコンストラクタ</li>
<li>widget()</li>
<li>update()</li>
<li>form()</li>
</ul>の各メソッドに処理を記述。</li>
<li>widgets_init フックに作成したウィジェットを登録。</li>
<li>作成したコードを「 functions.php 」に追加。</li>
</ol>
<h4>【サンプルコード】</h4>
<pre>
//クラス名は任意
class クラス名 extends WP_Widget {
	//コンストラクタ　クラスと同じ名称
	function クラス名() {
		// ウィジェットの初期設定
		$widget_ops = array('classname' =&gt; 'ウィジェットのクラス', 'description' =&gt; 'ウィジェットの概要')
		$this->WP_Widget('ウィジェットID', 'ウィジェット名', $widget_ops);
	}

	function widget($args, $instance) {
		// ウィジェットのコンテンツ出力
	}

	function update($new_instance, $old_instance) {
		extract($args);
		echo $before_widget;
		echo $before_title . ウィジェットのタイトル . $after_title;
		//ウィジェットの内容
		echo $after_widget;
	}

	function form($instance) {
		// 管理画面のウィジェットに出力するフォームを記述（オプションの設定など）
		// $instanceには保存したオプションが連想配列で引き渡される。
	}
}
//MyWidgetInit関数
function MyWidgetInit() {
	//ウィジェットのクラス名を登録
	register_widget('クラス名');
}
//widgets_initアクション時にMyWidgetInit関数を実行
add_action('widgets_init', 'MyWidgetInit');
</pre>

<p>複数ブログを管理する場合、同じ内容の項目を別データに作成しておき、「 include 」で読み込むだけのウィジェットを作成していると、修正があれば元データをいじるだけなので便利なはず。</p>

<h3>参考サイト</h3>

<p><a href="http://digitalbox.jp/happy-go-lucky-computing/wordpress/develop-my-widget/" title="WordPress のウィジェットを自作してみる（ただし 2.8以降用） - digitalbox" target="_blank" class="allow">WordPress のウィジェットを自作してみる（ただし 2.8以降用） - digitalbox</a></p>

<p><a href="http://nulldesign.jp/blog/wordpress/109.html" title="WordPress カスタムウィジェットの作り方 ≪ nulldesign"  target="_blank" class="allow">WordPress カスタムウィジェットの作り方 ≪ nulldesign</a></p>

<p><a href="http://ascii.jp/elem/000/000/428/428044/" title="ASCII.jp：WordPress 2.8登場！新ウィジェットAPIの使い方"  target="_blank" class="allow">ASCII.jp：WordPress 2.8登場！新ウィジェットAPIの使い方</a></p>]]>
    </content>
</entry>

<entry>
    <title>PHP の勉強「複数の外部 CSV ファイルを連想配列に」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2010/11/php-csv.php" />
    <id>tag:www.kys-lab.com,2010:/sasaki//2.175</id>

    <published>2010-11-17T10:14:31Z</published>
    <updated>2010-11-17T11:03:04Z</updated>

    <summary> 今回は、CSV ファイルを読み込んで、連想配列にする勉強をしてみました。配列に...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="PHP" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="csv" label="CSV" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="php" label="PHP" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="連想配列" label="連想配列" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="php_img.gif" src="http://www.kys-lab.com/sasaki/img/php_img.gif" class="mt-image-none" style="" height="270" width="500" /></span>

<p>今回は、CSV ファイルを読み込んで、連想配列にする勉強をしてみました。配列にすることによって、各データの値が参照できるようになるので重宝するはず。</p>

<p>なにぶん、PHP の勉強を始めたばかりなので、ソースにムダがあると思いますが、大目に見てね。こうしてコードをさらすことで、上達すると思うので。多分。</p>]]>
        <![CDATA[<h3>外部の CSV ファイル</h3>

<p>サンプル用に2つの簡単な CSV ファイルを用意しました。</p>

<p>基本的に、 CSV はエクセルから書き出されることが多いので、文字コードを「 Shift-JIS 」、ダブルクオーテーションなしの「,（カンマ）」区切りにしています（一行目は項目名）。</p>

<h4>text1.csv</h4>

<pre>
ID,ソフト名
01,Illustrator
02,Photoshop 
03,InDesign
04,Flash
05,Dreamweaver
06,After Effects
</pre>

<h4>text2.csv</h4>

<pre>
ID,説明
01,お絵かきソフト
02,レタッチソフト
03,編集ソフト
04,アニメーションソフト
05,コーディングソフト
06,動画ソフト
</pre>

<h3> PHP コード</h3>

<pre>
&lt;?php
//外部ファイルを配列に
$csvFiles = array("text1.csv","text2.csv");
//読み込んだファイルの配列に対して繰り返し処理
foreach($csvFiles as $key){
	//読み込んだファイルの各行のデータを文字列に格納して返す
	$str = @file_get_contents($key);
	//SJISからUTF-8に変換
	$str = $str = mb_convert_encoding($str, "UTF-8", "SJIS");
	//ファイルの改行を&lt;br /&gt;に置換（置換する文字は何でもよい）
	$array = str_replace("\r\n", '&lt;br /&gt;', $str);
	//&lt;br /&gt;を区切り文字として分割
	$array = explode('&lt;br /&gt;', $array);
		
	foreach($array as $koumoku =&gt; $value){
		if($value){
			if($koumoku == 0){ //項目名（一行目）は$headerに格納
				$header = explode(',', $value) ;
			}else{
				$item = explode(',', $value) ; //その他は$itemに格納
				//「CSV名」、「ID」（$item[0]）をキーに連想配列作成
				$assoArray[$key][$item[0]] = array_combine($header, $item);
			}
		}
	}
}
print_r($assoArray); //出力確認
?&gt; 
</pre>

<p><a href="http://www.kys-lab.com/sasaki/php_sample/01/array_sample.php" title="" target="_blank" class="allow">出力結果はコチラ</a></p>

<h4>【 MEMO 】</h4>
<ul>
<li style="margin:10px 0">CSV を読み込む時は、<strong>「fgetcsv」</strong>という関数があるようですが、PHP5 から Shift-JIS エンコードの場合、文字列が「"..."」（ダブルクオーテーション）で囲まれていないと、読み込めない文字もあるらしいので、<strong>「 file_get_contents 」</strong>関数でファイルの中身を丸ごと変数に格納。</li>

<li style="margin:10px 0">変数 $str に入れたファイルを<strong>「 mb_convert_encoding 」</strong>関数で Shift-JIS から UTF-8 文字コードに変換。</li>

<li style="margin:10px 0"><strong>「 str_replace 」</strong>関数で、CSV ファイルの改行を置換し、<strong>「 explode 」</strong>関数で分割して配列に格納。</li>

<li>CSV の一行目（項目名）と項目をそれぞれ「 $header 」と「 $item 」の配列に格納。</li>

<li style="margin:10px 0"><strong>「 array_combine 」</strong>関数で、CSV 名と項目名の連想配列を作成。</li>
</ul>

<h3>参考サイト</h3>

<p><a href="http://nyx.pu1.net/reference/typearray/func_array.html" title="PHPスクリプト講座：array()による配列生成 -- そふぃのphp入門" target="_blank" class="allow">PHPスクリプト講座：array()による配列生成 -- そふぃのphp入門</a></p>

<p><a href="http://yossy.iimp.jp/wp/?p=56" title="PHP5でfgetcsvが正常に動作しない : ::yossy.blog::" target="_blank" class="allow">PHP5でfgetcsvが正常に動作しない : ::yossy.blog::</a></p>

<p><a href="http://php.net/manual/ja/function.array-combine.php" title="PHP: array_combine - Manual" target="_blank" class="allow">PHP: array_combine - Manual</a></p>]]>
    </content>
</entry>

<entry>
    <title>PHP の勉強「開発環境の構築メモ（ XAMPP の導入）」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2010/11/php-xampp.php" />
    <id>tag:www.kys-lab.com,2010:/sasaki//2.174</id>

    <published>2010-11-17T08:11:29Z</published>
    <updated>2010-11-17T08:22:20Z</updated>

    <summary> これからはデザイナーでも、サーバサイドのスクリプトもある程度わかっていないとっ...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="PHP" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="php" label="PHP" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="xampp" label="XAMPP" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="xampp_main.jpg" src="http://www.kys-lab.com/sasaki/img/xampp_main.jpg" class="mt-image-none" style="" height="270" width="500" /></span>

<p>これからはデザイナーでも、サーバサイドのスクリプトもある程度わかっていないとってことで、「 PHP 」の勉強も始めました。</p>

<p>あれもこれも覚えるのは大変ですが、「 WordPress 」も PHP で開発されているので、勉強しておいて損はないはず。</p>

<p>今回は、自分用に PHP 開発環境の簡単なメモ書き。</p>]]>
        <![CDATA[<h3>XAMPP</h3>
<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_71/xampp_02.jpg" alt="XAMPP" class="Slash" />
<p>PHP をローカルの Windows で開発するために、「 XAMPP 」をインストールしました。</p>

<p>XAMPP は、 PHP の開発に必要な PHP や Apache 、MySQL などのソフトがパッケージ化された無償のソフトで、Windows 版も Mac 版もあります（最新バージョンは 1.7.3、2010年11月17日現在）。</p>

<h4>■ XAMPP for Windowsインストールページ</h4>

<p><a href="http://www.apachefriends.org/jp/xampp-windows.html" title="apache friends - xampp for windows" target="_blank" class="allow" >apache friends - xampp for windows</a></p>

<h4>■ XAMPP for Mac OS X インストールページ</h4>

<a href="http://www.apachefriends.org/jp/xampp-macosx.html" title="apache friends - xampp for mac os x" target="_blank" class="allow" >apache friends - xampp for mac os x</a>

<h4>■ XAMPP に梱包されている主なソフト</h4>

<ul>
<li>Apache（Webサーバー）</li>
<li>MySQL（データベース）</li>
<li>PHP（ PHP5 と PHP4 ）</li>
<li>PEAR（ PHP のライブラリ）</li>
<li>PHPMyAdmin（ MySQL の管理）</li>
<li>その他</li>
</ul>

<h3>Eclipse＋PDT</h3>

<p>なお、PHP の開発には「 Eclipse＋PDT 」が便利なようです。</p>

<p><a href="http://mergedoc.sourceforge.jp/" title="Pleiades - Eclipse プラグイン日本語化プラグイン" target="_blank" class="allow" >Pleiades - Eclipse プラグイン日本語化プラグイン</a></p>


<p>今のところ、Adobeの「Dreamweaver」を PHP のエディタにしていますが、今後「 Eclipse 」も試してみようと思います。</p>

<p>これから少しずつですが、 PHP も触っていきますよ。しっかし、やることいっぱい。。。</p>
<h3>参考サイト</h3>

<p><a href="http://liosk.blog103.fc2.com/blog-entry-13.html" title="[XAMPP+Eclipse PDT] WindowsでPHP開発環境 / LiosK-free Blog" target="_blank" class="allow" >[XAMPP+Eclipse PDT] WindowsでPHP開発環境 / LiosK-free Blog</a></p>

<p><a href="http://www.hi-ho.ne.jp/tadokoro/menu/xampp.html" title="XAMPPによるサーバー設置メモ" target="_blank" class="allow" >XAMPPによるサーバー設置メモ</a></p>

<p><a href="http://takahashifumiki.com/web/700/" title="ド素人によるPHP開発環境構築・ツール紹介（Mac・Windows） ｜高橋文樹.com" target="_blank" class="allow" >ド素人によるPHP開発環境構築・ツール紹介（Mac・Windows） ｜高橋文樹.com</a></p>]]>
    </content>
</entry>

<entry>
    <title>Twitter で「禁煙」</title>
    <link rel="alternate" type="text/html" href="http://www.kys-lab.com/sasaki/2010/10/twitter.php" />
    <id>tag:www.kys-lab.com,2010:/sasaki//2.173</id>

    <published>2010-10-01T08:39:01Z</published>
    <updated>2010-10-05T00:53:14Z</updated>

    <summary> いよいよ今月からタバコが値上げされましたね。 たばこ、4年ぶり値上げ＝過去最大...</summary>
    <author>
        <name>SASAKI</name>
        
    </author>
    
        <category term="DIARY" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Twitter" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="togetter" label="Togetter" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="twitter" label="Twitter" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="禁煙" label="禁煙" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.kys-lab.com/sasaki/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="kinen_main.gif" src="http://www.kys-lab.com/sasaki/img/kinen_main.gif" class="mt-image-none" style="" height="270" width="500" /></span>

<p>いよいよ今月からタバコが値上げされましたね。</p>

<p><a href="http://headlines.yahoo.co.jp/hl?a=20101001-00000004-jij-bus_all" title="たばこ、4年ぶり値上げ＝過去最大、1箱110～140円 （時事通信） - Yahoo!ニュース" target="_blank" class="allow">たばこ、4年ぶり値上げ＝過去最大、1箱110～140円 （時事通信） - Yahoo!ニュース</a></p>

<p>ボクも一ヶ月前までは、ヘビースモーカーで毎日二箱以上吸ってました（計40～50本）。飲みに行ったら、それこそ60本以上スパスパ。</p>

<p>今回の大幅値上げは、ただでさえ少ないおこづかいをさらに圧迫させ、まともな生活ができないだろうと判断したので、<strong>「2010年9月1日」</strong>に禁煙を決意しました。</p>

<p>自分のような意志の弱いヘビースモーカーでも、本当にタバコがやめられるのか不安でしたが、禁煙してかれこれ一ヶ月が経ちます。</p>

<p>単なる自分の禁煙体験談ですけど、禁煙しようか悩んでいるヘビースモーカーさんたちに参考になればと思います。痛いほど気持ちが分かるので。</p>

<p>ボクでもやめられたんで、皆さんも絶対にやめられます！</p>]]>
        <![CDATA[<h3>禁煙のきっかけ</h3>

<p>禁煙のきっかけは、もちろん今回の大幅値上げですが、ある友人の言葉が引き金になりました。</p>

<p>以前からタバコを値上げすることは分かっていたし、10月になる前にやめれたらええやろ、と緩い感じでずっと吸い続けていました。</p>

<p>値上げまであと一ヶ月ちょっという、まだ残暑厳しい8月のある日、友人家族が家に遊びに来たときのことです。</p>

<p>その友人は二年前に禁煙に成功していて、タバコを吸ってるボクを見るなり、</p>
<br />
<p><span style="color:red; font-size:x-large; margin:60px 0px; font-weight:bold">「え！まだ吸ってんの？」</span>（ニヤリ）</p>
<br />
<p>と、その言葉の後には「かわいそうに」とか「アホちゃう」みたいな言葉がつづきそうな感じで、ちょっぴり上から目線で言われたような気がしました。</p>
<p>いや、本人はそんな気がなかったとは思います。喫煙者の単なる被害妄想ですな。</p>
<p>でもね。自分でもずっと疑問に思っていたんです。「なんで吸ってるんやろ」と。</p>
<p>体に悪いと知っていながら、惰性で吸い続けて二十年以上。風邪ひこうが、肺が痛かろうがゴホゴホ咳き込みながらタバコを吸ってました。完全にニコチン中毒。</p>
<p>絶対にタバコをやめる気もなかったし、タバコがタブーな話題には耳をふさいでいました。</p>
<p>それが、なんで急にやめようと思ったか。</p>
<p>カチンとはきましたが、友人の<strong>「え！まだ吸ってんの？」</strong>の一言で、気づいたんです。当たり前のことに。</p>
<p>「ほんまや、なんでこんなに気分悪いのにタバコ吸ってるんやろ」と。</p>
<p>いや、ほんま急に気づいた（気づくの遅すぎ！）。</p>
<p>「昼飯代を削って、タバコ買ってるって、たいがいアホやで」と。</p>

<p>さらに、</p>
<p>「禁煙なんか絶対無理やって思われてるのも腹立つ。もし、タバコやめたら、オレめちゃカッコよくね？」</p>
<p>って、自分のテンションを無理矢理上げました。</p>

<p>今まで、これといった努力をしてこなかったけど、禁煙できたらマジすごいわって思ったら、いてもたってもいられなくなり、絶対にその日でやめてやると決意しました。</p>

<p>それが、<strong>「2010年9月1日」</strong>の事でした。</p>


<h3>Twitter を利用して禁煙</h3>

<img src="http://www.kys-lab.com/sasaki/images/lab_img/lab_70/kinen01.jpg" alt="タバコグッズ" class="Slash" />
<p class="captxt">禁煙前日に捨てたタバコグッズの一部</p>

<p>ボクの禁煙方法は二つ。</p>

<p>一つは<strong>「気合い」</strong>です。</p>

<p>禁煙外来や禁煙グッズを利用するなど、色んな禁煙方法がありますが、ボクは何も利用しませんでした。「気合い」のみです。</p>

<p>そんなの長続きしないだろうと思われますが、どんな方法を使おうが、結局は本人の意志の強さであり、「気合い」やろうと。禁断症状もどんとこい！ってな感じで、ニコチンガムやパッチも一切利用しませんでした。</p>
<p>電子タバコも購入しませんでした。聞くところによると「ハンコ」をくわえてる感じだとか。そんな偽物くわえるんやったら、本物のタバコを吸うわと。</p>

<p>もう一つは、<strong>「Twitter」</strong>です。</p>

<p>禁煙についてつぶやくと、フォロワーさんや検索でみつけられた方からアドバイスやはげましを受けるようになりました。これは、本当にうれしかったですね。あと、みんなの前で宣言したんだから、吸ったらカッコわるいですよね。</p>
<p>自分だけが監視しているとどうしても甘くなるので、Twitterでつぶやきながら、どんどん自分を追い込んでいきました。</p>
<p>あとまぁ、吸いたくなったらつぶやいてたので、ストレス発散にもなりました。</p>

<p>約一ヶ月間の悪戦苦闘するつぶやきを、Twitter のツィートをまとめるサービス「Togetter」にまとめています。</p>

<p><a href="http://togetter.com/li/55114" title="Togetter - 「元ヘビースモーカーの禁煙日記」" target="_blank" class="allow">Togetter - 「元ヘビースモーカーの禁煙日記」</a></p>


<h3>節煙はダメ、一気にやめる</h3>

<p>まず、最初のつぶやき。</p>
<blockquote>
<p>【禁煙計画】あしたから、タバコを一本ずつ減らす <strong>（予定）</strong></p>
<p style="font-size:small; text-align:right; margin:0">2010-08-31 16:32:21</p>
</blockquote>

<p>これ、禁煙初心者が必ずやって、100%挫折するそうです（笑）。未練たらたらなのは分かりますが、やめておいたほうがいいです。</p>

<p>「節煙」や「減煙」でググってみてください。禁煙よりしんどいようです。</p>

<p>で、ボクも節煙はやめてスパッと禁煙する決意をしました。</p>

<blockquote>
<p>【禁煙 1 日目】節煙ではなく、一気にやめることにした。きょうは朝から一本も吸ってないぞ。どこまで続くのか？ #kinen</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-02 09:29:16</p>
</blockquote>

<p>あと、必ずけじめをつけたほうがいいです。いわゆる「卒煙式」。</p>
<p>ボクも最後のタバコをくゆらせながら、厳かに実行しました。</p>

<blockquote>
<p>本気出すため、ライターと灰皿を処分した。</p>
<p>タスポもハサミで切り刻んで捨てた。← めちゃ勇気いった。</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-02 09:32:35</p>
</blockquote>

<p>このようにタバコグッズは全部処分したほうがいいです。タスポなんか5ミリ間隔ぐらいに切り刻みましたよ。自分の顔の部分を切ってると、うっすらと涙が出てきました。</p>

<p>でも、このぐらいやらないとダメなんです。このときの何とも言えない寂しさは、一生忘れないでしょう。一人卒業式みたいな感じ。</p>


<h3>禁断症状</h3>

<p>で、平日にいきなり医者にもいかず禁煙を始めたもんだから、強烈な禁断症状が出てきます。</p>

<blockquote>
<p>なんか、めまいがしてきたぞ。禁断症状？ きょうは、まったく仕事に集中できない。 #kinen</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-02 15:49:14</p>
</blockquote>

<p>体を動かすたびに、立ちくらみのようなめまいが。ドヨーンとした頭痛もずっと続いてました。</p>
<p>でも、このぐらいの症状がないと、禁煙する意味がないっていうか、楽してやめたくなかったんです。それ相当の罰を自分に与えたかったので。ちょっとM？</p>

<p>その後、禁煙の決意を強固にしたのが、これです。</p>

<blockquote>
<p>家族の前で正式に「禁煙宣言」。娘が感激して大泣き。これは絶対に裏切られないぞ。親として男として。 #kinen</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-02 21:21:51</p>
</blockquote>

<p>これは効きました。娘の涙を見たとき、胸がしめつけられるような思いでした。今までもさんざん「おとうさん、タバコやめて！」って言われてましたし。</p>

<p>それでも、最初の三日間はほんときつかったです。</p>

<blockquote>
<p>禁断症状ピーク。。。ぐわー！！！</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-03 20:20:05</p>

<p>@Hiroshi0831 ぎりぎりのところで踏ん張ってます。く、くるちぃー</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-04 02:16:47</p>

<p>【禁煙 3 日目】今までの人生の中で、一番がんばってんじゃねぇーかって思う。そう思わないとやってられない。 #kinen</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-04 08:53:12</p>
</blockquote>

<p>今までいかに、がんばってなかったかというか（笑）、苦しんでますねー。</p>

<p>あと、今もときどき顔出すもう一人の自分がいるんです。</p>

<blockquote>
<p>【たまに顔を出すもう一人の自分】簡単にタバコを止められるわけないやんけ。頭では分かっていても出来へんのが人間とちゃうんか。簡単に止められたら以前の自分を全否定するというか、そんな軽い問題ちゃうわ。それ相当の苦しみを味わな値打ちないんじゃ。ヘビースモーカーをなめんな！ #kinen</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-24 23:43:17</p>
</blockquote>

<p>魂の叫びかと（笑）。相当イライラしてますね。これも日が経つうちに少しずつなくなってきます。</p>


<h3>口寂しさは？</h3>

<p>禁断症状はなくなっても口寂しいので、飴や昆布などを口に入れてました。</p>

<blockquote>
<p>「ノンシュガー果実のど飴」の白桃味うまっ♪</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-07 09:28:25</p>

<p>「ノンシュガー ミルク酪園」キャラメルミルク味、うまっ♪</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-09 13:29:50</p>

<p>「おしゃぶり昆布」うまっ。とまんなう。</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-12 10:43:46</p>
</blockquote>

<p>今でも、会社の机には飴を常備しています。</p>

<h3>体調の変化</h3>

<p>体調の変化もあらわれてきました。</p>

<blockquote>
<p>【禁煙 10 日目】犬並みに嗅覚がするどくなった気がする。特にタバコの臭いに敏感。あと、味覚も変わってきたっぽい。塩っからいものが、より塩っからく感じる。なんで？ #kinen</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-11 08:41:17</p>
</blockquote>

<p>ニコチンでふさがれていた嗅覚と味覚が復活しだしました。</p>

<blockquote>
<p>@629lov あと、なぜかブラックコーヒーが嫌いになりました（毎日飲んでたのに）。天然水ばっかり飲んでます。おなかタップタプっす。</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-11 08:49:34</p>
</blockquote>

<p>コーヒーはタバコとセットだからでしょう。ほんとブラックコーヒー飲まなくなりました。今はミルクたっぷりのカフェオレ。</p>

<blockquote>
<p>禁煙してから眠気がひどい。もう寝ます。おやすみなさい ZZz...</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-13 21:46:49</p>
</blockquote>

<p>これは、禁断症状の一つかもしれませんが、以前はニコチンが脳みそを覚醒させていたのかも。</p>

<h3>禁煙のメリット</h3>

<p>まず、これが一番大きいでしょう。お金の節約。</p>

<blockquote>
<p>@works014 すでに、6000円（タバコ代 × 10日間）節約できましたよ。やめると、焼酎もっと呑めますよー！</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-11 10:19:26</p>
</blockquote>

<p>次に、これ</p>

<blockquote>
<p>出かける前や帰る前に、タバコの火の元チェックをしなくていいのも楽だ。 #kinen</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-08 09:06:57</p>
</blockquote>

<p>火の元チェックは、何回もしていたから結構面倒くさかったんですよね。</p>

<blockquote>
<p>【禁煙 15 日目】顔色がよくなったって言われるようになった。 #kinen</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-16 13:12:31</p>
</blockquote>

<p>女性ならなおさらでしょう。くすみがとれます。</p>

<blockquote>
<p>【禁煙 17 日目】ウチのおかんに「禁煙してん」と電話したら、かなり喜んでた。ちょっと照れくさかった。 #kinen</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-18 13:22:56</p>
</blockquote>
<p>いくつになっても、子どもの健康を願わない親はいません。ちょっとした親孝行かも。</p>

<blockquote>
<p>【禁煙 19 日目】家族で行動するとき、超スムーズと好評☆　今までどんだけタバコの休憩時間をとってたんかと。 #kinen</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-20 13:54:06</p>
</blockquote>

<p>これも団体行動では大切ですよね。家族間のしょーもないケンカもなくなります。</p>

<blockquote>
<p>【禁煙 23 日目】きのう、近所の子どもたちと鬼ごっこをしたけど、息切れしなかった。筋肉痛だけど。 #kinen</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-24 10:42:41</p>
</blockquote>

<p>息切れがなくなる。なんか、いいことだらけっすね。</p>

<h3>禁煙のゴール</h3>

<p>これ難しいですね。人によって異なるでしょうし。10年やめていた人が突然吸い始めることもあるそうです。なので、自分で目標を決めたらいいと思います。</p>

<p>ボクの場合は、まず１ヶ月としました。その次は３ヶ月、そして１年と延ばしていってそのうち忘れられたらいいかなと。それと、飲み会で吸わなかったら、まず成功といっていいのではないでしょうか。</p>

<p>飲み会に行くと、必ず現役スモーカーたちにいじられます。</p>

<blockquote>
<p>【禁煙 25 日目】飲み会で、煙を吹きかけられたり、目の前にタバコを置かれたり、いっぱいイジワルされたけど、耐えたよボク。 #kinen</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-26 05:50:42</p>
</blockquote>

<p>自分もしたことがあるので、罰だと思って耐えましょう（笑）。</p>

<p>そして、値上がり前日のツィート。</p>

<blockquote>
<p>【禁煙 29 日目】いよいよ明日からタバコの値上げか。今日、最後の吸いだめをするスモーカーさんも多そうっすね。明日からいっしょにがんばりましょー☆ #kinen</p>
<p style="font-size:small; text-align:right; margin:0">2010-09-30 14:29:32</p>
</blockquote>


<p>ちょっと、先輩面して余裕こいでますな。でも、この体験がこれから禁煙しようと考えているスモーカーのみなさんの参考になれば幸いです。</p>

<p>興味がありましたら、Togetter に禁煙ツィートをまとめてるので、読んでみてください。</p>

<p><a href="http://togetter.com/li/55114" title="Togetter - 「元ヘビースモーカーの禁煙日記」" target="_blank" class="allow">Togetter - 「元ヘビースモーカーの禁煙日記」</a></p>

<p>下記のサイトさんも参考になるので、ご自分にあった禁煙方法を見つけてくださいね。</p>
<p>ま、お医者さんに行くのが一番とは思いますが。</p>

<h3>参考サイト</h3>

<p><a href="http://jp.techcrunch.com/archives/20100823twitter-for-quitters/" title="私はTwitterで禁煙に成功した" target="_blank" class="allow">私はTwitterで禁煙に成功した</a></p>

<p><a href="http://kitakazekozo082.blog69.fc2.com/blog-entry-535.html" title="北風小憎夫の「ニコチン・アンインストール・マニュアル」 ニコアンって、何？ ～twitterからお越しの方へ～" target="_blank" class="allow">北風小憎夫の「ニコチン・アンインストール・マニュアル」 ニコアンって、何？ ～twitterからお越しの方へ～</a></p>

<p><a href="http://e0166.blog89.fc2.com/blog-entry-726.html" title="1日50本くらいタバコを吸っていた人がタバコをやめると色んな変化が襲ってくる*ホームページを作る人のネタ帳" target="_blank" class="allow">1日50本くらいタバコを吸っていた人がタバコをやめると色んな変化が襲ってくる*ホームページを作る人のネタ帳</a></p>

<p><a href="http://ikegayaishiguro.blog2.fc2.com/blog-entry-974.html" title="池谷石黒ウェブログ 「吸わない人」が考える「吸う人」のこと" target="_blank" class="allow">池谷石黒ウェブログ 「吸わない人」が考える「吸う人」のこと</a></p>]]>
    </content>
</entry>

</feed>

