<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>E-riverstyle Vanguard | CSSやXHTML,Javascriptやweb製作に関する事を紹介</title>
    <link rel="alternate" type="text/html" href="http://blog.e-riverstyle.com/" />
    <link rel="self" type="application/atom+xml" href="http://blog.e-riverstyle.com/atom.xml" />
    <id>tag:blog.e-riverstyle.com,2008-05-25://1</id>
    <updated>2010-03-08T09:54:23Z</updated>
    <subtitle>CSSやJavaScriptからWebアクセシビリティなどのWeb製作に関する事を紹介するブログ</subtitle>
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type 4.1</generator>

<entry>
    <title>ジャパンアクセシビリティ公開シンポジウム2010＠神戸大学で開催されます。</title>
    <link rel="alternate" type="text/html" href="http://blog.e-riverstyle.com/2010/03/2010.html" />
    <id>tag:blog.e-riverstyle.com,2010://1.596</id>

    <published>2010-03-08T09:52:28Z</published>
    <updated>2010-03-08T09:54:23Z</updated>

    <summary>アクセシビリティに関する課題をより深く探求して理解し、サステイナビリティとアクセ...</summary>
    <author>
        <name>e-river</name>
        <uri>http://www.e-riverstyle.com/</uri>
    </author>
    
        <category term="セミナー関連" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="セミナー" label="セミナー" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.e-riverstyle.com/">
        <![CDATA[<p>アクセシビリティに関する課題をより深く探求して理解し、サステイナビリティとアクセシビリティ・ユニバーサルデザイン・インクルーシブデザインの関係を議論することを目的とするシンポジウムであるジャパンアクセシビリティ公開シンポジウム2010が開催されます。</p>
<p><a href="http://symposium.hypatia.no/index-jp.html">ジャパンアクセシビリティ公開シンポジウム2010</a></p>]]>
        <![CDATA[
<p>開催日は3月16日で、公式サイトでは、木曜日となっていますが火曜日の間違いだそうです。関係者に問い合わせしましたが、未だに修正がありません。</p>

<p>参加は無料ですが、3月10日までに一応メールで事前申込をしてるほうが良いみたいです。</p>
<p>会場は、神戸大学の瀧川記念館となっていますが、細かいですが、正式名称は、瀧川記念学術交流会館です。</p>

<p><iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?f=q&amp;source=s_q&amp;hl=ja&amp;geocode=&amp;q=%E7%A5%9E%E6%88%B8%E5%A4%A7%E5%AD%A6%E3%80%80%E7%80%A7%E5%B7%9D%E8%A8%98%E5%BF%B5%E5%AD%A6%E8%A1%93%E4%BA%A4%E6%B5%81%E4%BC%9A%E9%A4%A8&amp;sll=34.79864,135.335144&amp;sspn=0.011665,0.015557&amp;brcurrent=3,0x60008c10c2a863df:0x49a5fd845c7c63d0,0&amp;ie=UTF8&amp;hq=%E7%80%A7%E5%B7%9D%E8%A8%98%E5%BF%B5%E5%AD%A6%E8%A1%93%E4%BA%A4%E6%B5%81%E4%BC%9A%E9%A4%A8&amp;hnear=%E7%A5%9E%E6%88%B8%E5%A4%A7%E5%AD%A6&amp;ll=34.728055,135.234722&amp;spn=0.024689,0.036478&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.jp/maps?f=q&amp;source=embed&amp;hl=ja&amp;geocode=&amp;q=%E7%A5%9E%E6%88%B8%E5%A4%A7%E5%AD%A6%E3%80%80%E7%80%A7%E5%B7%9D%E8%A8%98%E5%BF%B5%E5%AD%A6%E8%A1%93%E4%BA%A4%E6%B5%81%E4%BC%9A%E9%A4%A8&amp;sll=34.79864,135.335144&amp;sspn=0.011665,0.015557&amp;brcurrent=3,0x60008c10c2a863df:0x49a5fd845c7c63d0,0&amp;ie=UTF8&amp;hq=%E7%80%A7%E5%B7%9D%E8%A8%98%E5%BF%B5%E5%AD%A6%E8%A1%93%E4%BA%A4%E6%B5%81%E4%BC%9A%E9%A4%A8&amp;hnear=%E7%A5%9E%E6%88%B8%E5%A4%A7%E5%AD%A6&amp;ll=34.728055,135.234722&amp;spn=0.024689,0.036478&amp;z=14&amp;iwloc=A" style="color:#0000FF;text-align:left">大きな地図で見る</a></small></p>

<p>関連トピックとして、下記があります。</p>

<ol>
<li>協調技術とアクセシビリティ<ul><li>. どうすれば同時に多様なユーザに対応するのか。 </li></ul>
</li>
<li>モバイルデバイス<ul><li>アウェアネス</li>
<li>アクセシビリティのための拡張現実（AR）</li>
<li>位置情報サービス（LBS）</li>
<li>ジャストインタイム（JIT）採用の活用例 </li></ul>
</li>
<li>サステイナブルテクノロジーとアクセシビリティ<ul><li>. オープンソース、規格及びインターオペラビリティの役割</li></ul>
</li>
<li>高齢化社会と技術<ul><li>. 人間中心のアプローチの必要な支援技術（AT）</li>
<li>アクセシビリティへのホリスティックアプローチ</li></ul>
</li>
<li>支援技術の再考<ul><li>. 支援技術とグラフィカルインターフェイス</li></ul>
</li>
<li>アダプタビリティ<ul><li>代替リソース（DAISY、手話など） </li></ul>
</li>
<li>トロントオープンソースとアクセシビリティ会議からの知見</li>
<li>日本の規格（アクセシビリティ）<ul><li>. 日本の法律 </li></ul>
</li>
<li>認知/精神科の課題<ul><li>どうすればストレス状況（災害など）下で一致情報を発信できるのか。</li></ul>
</li>
<li>eLearningにおける学習者の多様なニーズ</li>
</ol>

<p>アクセシビリティ関連に興味のある方はぜひ参加してください。僕も参加予定です。</p>
]]>
    </content>
</entry>

<entry>
    <title>Opera 10.50がリリース！！</title>
    <link rel="alternate" type="text/html" href="http://blog.e-riverstyle.com/2010/03/opera-1050.html" />
    <id>tag:blog.e-riverstyle.com,2010://1.595</id>

    <published>2010-03-02T10:35:16Z</published>
    <updated>2010-03-02T10:36:42Z</updated>

    <summary>本日、3月2日にOperaの最新版Opera 10.50がリリースされました。...</summary>
    <author>
        <name>e-river</name>
        <uri>http://www.e-riverstyle.com/</uri>
    </author>
    
        <category term="Browser" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="browser" label="browser" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="opera" label="Opera" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.e-riverstyle.com/">
        <![CDATA[<p>本日、3月2日にOperaの最新版Opera 10.50がリリースされました。</p>]]>
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="" src="http://blog.e-riverstyle.com/2010/03/02/image/op1003021.jpg" width="510" height="316" class="mt-image-none" style="" /></span>

<p class="sp">Opera 10.50では、従来の7倍高速な新しいJavaScriptエンジン「Carakan」を搭載し、また、HTML 5やCSS3のサポートも改善されたとのことです。</p>
<p>現時点では、Windows版のみのリリースとなっています。</p>

<p class="sp">
	<a href="http://jp.opera.com/browser/">ダウンロードはこちらから</a>
</p>
]]>
    </content>
</entry>

<entry>
    <title>Zen-Codingを秀丸マクロで試しました。</title>
    <link rel="alternate" type="text/html" href="http://blog.e-riverstyle.com/2010/02/zencoding.html" />
    <id>tag:blog.e-riverstyle.com,2010://1.594</id>

    <published>2010-02-26T10:32:22Z</published>
    <updated>2010-02-26T10:52:00Z</updated>

    <summary>ここ最近、Zen-Coding関連のエントリは非常に多い中、秀丸を愛用しています...</summary>
    <author>
        <name>e-river</name>
        <uri>http://www.e-riverstyle.com/</uri>
    </author>
    
        <category term="CSS+XHTML" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="その他" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="editor" label="Editor" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.e-riverstyle.com/">
        <![CDATA[<p>ここ最近、Zen-Coding関連のエントリは非常に多い中、秀丸を愛用していますので、<a href="http://exoego.net/archives/zencoding-in-hidemaru">秀丸マクロでZen-Coding</a>を参考にZen-Codingを秀丸マクロで試しました。</p><div menubottom="0" menuright="0" menutop="0" menuleft="0" activeid="-1" expanded="0" style="display: none;" id="divCleekiAttrib"></div><div menubottom="0" menuright="0" menutop="0" menuleft="0" activeid="-1" expanded="0" style="display: none;" id="divCleekiAttrib"></div>]]>
        <![CDATA[

<h2 class="split">Zen-Codingとは</h2>

<p>CSSセレクタ風の簡単な記述を、複雑なHTMLソースへ素早く変換することを軸にしたコーディング支援ツールです。</p>
<p><a href="http://exoego.net/archives/zencoding-in-hidemaru">秀丸マクロでZen-Coding</a>参照</p>

<p>例えば、aが<code class="trackbackBG">&lt;a href=""&gt;&lt;/a&gt;</code>となり、h1#idnameが
<code class="trackbackBG">&lt;h1 id="idname"&gt;&lt;/h1&gt;</code>、h2.classnam2が<code class="trackbackBG">&lt;h2 class="classnam2"&gt;&lt;/h2&gt;</code>となります。</p>

<h2 class="split">Zen-Codingを秀丸マクロに設定</h2>
<p>
<a href="http://hide.maruo.co.jp/lib/macro/zencoding-macro.html">秀丸マクロライブラリ</a>で公開されている<a href="http://exoego.net/archives/zencoding-macro.zip">zencoding-macro.zip ver 0.3</a>をダウンロードし、解凍すると下記図のような2つのファイルがあります。</p>

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="" src="http://blog.e-riverstyle.com/2010/02/26/image/zen1002261.jpg" class="mt-image-none" style="" height="88" width="135" /></span>

<p class="sp">マクロフォルダを設定している場合はそこに、設定していない場合は、そのままHidemaru.exeと同じフォルダ内に移動します。僕の場合は、マクロフォルダを設定していないので、下記図のようにHidemaru.exeと同じフォルダ内に移動しました。</p>

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="" src="http://blog.e-riverstyle.com/2010/02/26/image/zen1002262.jpg" class="mt-image-none" style="" height="647" width="321" /></span>

<p class="sp"><a href="http://exoego.net/archives/zencoding-in-hidemaru">秀丸マクロでZen-Coding</a>によると、秀丸エディタの [マクロ] - [マクロ登録] で、zencoding.macを任意の番号に、別々に2つ登録する必要があるようです。そのため下記図のように登録をしました。</p>

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="" src="http://blog.e-riverstyle.com/2010/02/26/image/zen1002263.jpg" class="mt-image-none" style="" height="345" width="500" /></span>

<p class="sp">また、上記サイトを参考にすると、登録した2つのマクロにそれぞれ別のショートカットキーをマクロに割り当てる必要があるようです。ですので、[その他] - [キー割り当て]で、キーを割り当てます。下記図のように、僕は、F2とF4に割り当てました。</p>

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="" src="http://blog.e-riverstyle.com/2010/02/26/image/zen1002264.jpg" class="mt-image-none" style="" height="283" width="500" /></span>
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="" src="http://blog.e-riverstyle.com/2010/02/26/image/zen1002265.jpg" class="mt-image-none" style="" height="294" width="523" /></span>
<p class="sp">これで、Zen-Codingを秀丸エディタで使用することができます。</p>
<p>p aと入力し、先程割り当てたF2もしくはF4を押すとp aが<code class="trackbackBG">&lt;p&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/p&gt;</code>となり、div h1.classnameが<code class="trackbackBG">&lt;div&gt;&lt;h1 class="classname"&gt;&lt;/h1&gt;&lt;/div&gt;</code>となります。</p>
<p>非常に、マークアップの効率が上がります。非常に素晴らしいコーディング支援ツールです。</p>
]]>
    </content>
</entry>

<entry>
    <title>スクリーンリーダと音声ブラウザの種類とそれらの概要</title>
    <link rel="alternate" type="text/html" href="http://blog.e-riverstyle.com/2010/02/post-75.html" />
    <id>tag:blog.e-riverstyle.com,2010://1.593</id>

    <published>2010-02-21T00:47:17Z</published>
    <updated>2010-02-21T00:49:29Z</updated>

    <summary>日本語に対応している代表的なスクリーンリーダと音声ブラウザの種類を以下にまとめま...</summary>
    <author>
        <name>e-river</name>
        <uri>http://www.e-riverstyle.com/</uri>
    </author>
    
        <category term="Accessibility" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="accessibility" label="accessibility" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.e-riverstyle.com/">
        <![CDATA[<p>日本語に対応している代表的なスクリーンリーダと音声ブラウザの種類を以下にまとめました。</p><div menubottom="0" menuright="0" menutop="0" menuleft="0" activeid="-1" expanded="0" style="display: none;" id="divCleekiAttrib"></div>]]>
        <![CDATA[
<h2 class="split2">スクリーンリーダ</h2>

<h3 class="split">PC-Talker</h3>
<p>日本国内で一般ユーザに多く利用されているスクリーンリーダであり、音声読み上げソフトとして、いち早くPortable Document Format（PDF）やFlashの音声読み上げにも対応してきた。PC-Talker Vista では、新たに英語のエンジンを採用し、自動的にエンジンを切り替えながら、日本語混在の英文をネイティブな発音で読み上げる。</p>
<p><a href="http://www.aok-net.com/">高知システム開発</a></p>

<h3 class="split">JAWS</h3>
<p>Freedom Scientific 社が開発したJAWSを静岡県立大学教授の石川准氏を中心とするプロジェクトチームによって日本語化したもので、画面上に表示される情報を音声合成や点字ディスプレイでユーザに伝え、幅広いキーボードによる入力を可能としており、世界で最も多くの視覚障害者のユーザに利用されているスクリーンリーダである。Internet ExplorerやFirefoxやMicrosoft Office などの各種主要ソフトウェアに対応しているほか、
さらに高機能なJAWS スクリプティング機能により、音声読み上げに対応していなかったソフトウェアでも、JAWS Scripting Language というスクリプト言語で独自のスクリプト7を作成することにより、 読み上げが可能となるなど、 最も高機能なスクリーンリーダである。</p>
<p><a href="http://www.extra.co.jp/jaws/index.html">JAWS for Windows</a></p>


<h3 class="split">95Reader（XP Reader)</h3>
<p>95Readerは、Windows 95を視覚障害者にも使えるようにした我が国初のスクリーンリーダで、画面を音声で説明し、マウスは使わずキーボードだけで操作できるようになっている。このスクリーンリーダは、日本障害者雇用促進協会の障害者職業総合センターが開発し、株式会社システムソリューションセンターとちぎから発売されている.Windows XP、Internet Explorer 6に対応しているが、Windows Vista、Internet Explorer 7以降には対応していない。ちなみに、XP Readerは、95Reader Ver.6 及びVer.5 の愛称である。</p>
<p><a href="http://www.ssct.co.jp/barrierfree/95reader/">95Reader（XP Reader)</a></p>


<h3 class="split">VDMシリーズ</h3>
<p>VDMは、基本的なWindowsの操作・機能(メモ帳やコントロールパネル等)を音声でガイドするスクリーンリーダであり、 高知システム開発のPC-Talkerをカスタマイズしたものである。</p>
<p><a href="http://accesstechnology.co.jp/">株式会社アクセステクノロジー</a></p>


<h3 class="split">FocusTalk</h3>
<p>いち早くWindows Vista、Windows 7に対応したスクリーンリーダである。36段階のスピード設定、音質、感情表現音声（喜び、平常、怒り、悲しみ、冷たい）など多彩な音声読み上げが可能で、テキストを音声に変換し、Waveファイルに書き出す機能が搭載されている。そして、Waveファイルに書き出すことで、書き出した音声をプレイヤーで再生したり、携帯オーディオプレイヤーなどで持ち運ぶことが出来る。</p>
<p><a href="http://www.skyfish.co.jp/focustalk/">FocusTalk</a></p>


<h3 class="split">NVDA</h3>
<p>NVDAは、Windows用のオープンソースのスクリーンリーダです。オーストラリアのMichael Curran氏をはじめとし、2006年から開発され、20ヶ国語以上の言語に対応しています。また、日本語にも対応できるようにとNVDA日本語化プロジェクトがあります。</p>
<p><a href="http://nvdajp.sourceforge.jp/">スクリーンリーダNVDA日本語化プロジェクト</a></p>

<h2 class="split2">音声ブラウザ</h2>

<h3 class="split">IBMホームページリーダー</h3>
<p>ホームページリーダーは、一般のブラウザとほぼ同様の表示と、音声で読み上げていることが明確にわかるテキストのみの表示部分とが同期する形で表現され、これにより、視覚障害者が音声を聞き取って理解している様子が、画面上からも把握できる仕組みになっている。さらに、フォントの大きさや種類の変更、背景色を変更してコントラストをつけるなど、利用者が自分の好みに応じた調整を行うこともできる。また、テンキーやフルキーに必要な機能が割り付けられており、 全ての機能はキー操作だけでも行える設計になっており、Version3.04で、PDFやFlashのコンテンツの読み上げに対応しているが、Windows Vista およびInternet Explorer 7には対応しないことが公式発表されている。</p>
<p><a href="http://www-06.ibm.com/jp/accessibility/solution_offerings/hpr/index.html">IBMホームページリーダー</a></p>


<h3 class="split">ボイスサーフィン</h3>
<p>明瞭な合成音で読み上げ、リンクやボタン、その他各種場面が音質で区別でき、全ての機能がマウスだけでなく、キーで簡単に操作できる. 弱視のユーザにも使いやすいようにテキストの表示色の切り替えができ、読み上げ用のテキスト画面と一般的な表示画面同時に表示することができる。なお、Windows Vista、Windows 7 にも対応している。</p>
<p><a href="http://www.amedia.co.jp/product/vsurfing/">ボイスサーフィン</a></p>

<h3 class="split">NetReader</h3>
<p>ネットショッピングやネットバンクが簡単に利用できるように独自の検索機能を装備しており、PCTalkerと連携しながら、Web サイトをナビゲーションできる。文字を大きく表示する拡大表示機能を装備し、好みに応じて、閲覧画面、プルダウンメニュー、設定画面、検索画面が拡大できる。</p>
<p><a href="NetReader">http://www.aok-net.com/products/netreader.htm</a></p>

<h3 class="split">Fire Vox</h3>
<p>Firefoxに音声読み上げ機能を搭載できるCharles L. Chenが開発を行ったFirefoxのアドオンの一つで、WAI-ARIAのLive Regionの仕様に対応している唯一の音声読上のアプリケーションです。</p>
<p><a href="http://www.firevox.clcworld.net/">Fire Vox</a></p>
]]>
    </content>
</entry>

<entry>
    <title>ちょっとアクセシブルになるエレガントなjQueryスライダー[js]</title>
    <link rel="alternate" type="text/html" href="http://blog.e-riverstyle.com/2010/02/jqueryjs-21.html" />
    <id>tag:blog.e-riverstyle.com,2010://1.592</id>

    <published>2010-02-15T10:21:00Z</published>
    <updated>2010-02-15T10:25:09Z</updated>

    <summary>Fancy FAQs with jQuery Slidersのエントリーを読んで...</summary>
    <author>
        <name>e-river</name>
        <uri>http://www.e-riverstyle.com/</uri>
    </author>
    
        <category term="Accessibility" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="JavaScript" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="accessibility" label="accessibility" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="javascript" label="javascript" 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://blog.e-riverstyle.com/">
        <![CDATA[<p><a href="http://davidwalsh.name/jquery-sliders">Fancy FAQs with jQuery Sliders</a>のエントリーを読んで、こうすればさらにアクセシブルになるのではないかと思いましたので、ちょっとだけ書かせて頂きます。</p>]]>
        <![CDATA[
<p><a href="http://davidwalsh.name/dw-content/fancy-faqs-jquery.php">Fancy FAQs with jQuery Slidersのデモページ</a>を見てもらったら、すぐにわかると思いますが、何かの要素をクリックすると、ゆっくりとスライドしながら文字などが表示されるようなテクニックってよくありますよね。</p>

<p>今回、このFancy FAQs with jQuery Slidersを見て、こういう風にマークアップするだけで、Ajaxのコンテンツをアクセシビルにできるのです。</p>

<p>使うHTMLは、<strong>label要素</strong>です。</p>

<h2 class="split">label要素</h2>
<p>label要素とは、フォームのコントロール部品の各部が何であるかを示すもので、識別子として使われます。</p>

<p>ですので、Fancy FAQs with jQuery Slidersのような、質問内容に対して、回答が動的に表示されたりするコンテンツを識別されるので、スクリーンリーダを使っているユーザにとって非常に有効的になるのです。</p>

<h2 class="split">元のHTMLソースコード</h2>
<pre><code>&lt;h3&gt;This is question 1?&lt;/h3&gt;
&lt;div&gt;
	&lt;p&gt;This is the answer to question #1.  Pellentesque habitant morbi....&lt;/p&gt;
&lt;/div&gt;
&lt;h3&gt;This is question 2?&lt;/h3&gt;
&lt;div&gt;
	&lt;p&gt;This is the answer to question #2.  Pellentesque habitant morbi....&lt;/p&gt;
&lt;/div&gt;</code></pre>


<h2 class="split">label要素を用いたHTMLソースコード</h2>
<pre><code>&lt;h3&gt;&lt;label for="q1"&gt;This is question 1?&lt;/label&gt;&lt;/h3&gt;
&lt;div id="q1"&gt;
	&lt;p&gt;This is the answer to question #1.  Pellentesque habitant morbi....&lt;/p&gt;
&lt;/div&gt;
&lt;h3&gt;&lt;label for="q2"&gt;This is question 2?&lt;/label&gt;&lt;/h3&gt;
&lt;div id="q2"&gt;
	&lt;p&gt;This is the answer to question #2.  Pellentesque habitant morbi....&lt;/p&gt;
&lt;/div&gt;</code></pre>


<p class="sp">一応、自身で「label要素を用いたHTMLソースコード」で動作したことを、確認をしましたが、Fancy FAQs with jQuery Slidersの動作を保障するものではありませんので、一応、ご注意ください[無責任]。</p>]]>
    </content>
</entry>

<entry>
    <title>jQueryで滑らかなアニメーションのスライドを簡単に実装できるナビゲーション[js]</title>
    <link rel="alternate" type="text/html" href="http://blog.e-riverstyle.com/2010/02/jqueryjs-20.html" />
    <id>tag:blog.e-riverstyle.com,2010://1.591</id>

    <published>2010-02-11T02:34:14Z</published>
    <updated>2010-02-11T02:37:30Z</updated>

    <summary>CSS-Tricksより、jQueryで滑らかなアニメーションのスライドを実装で...</summary>
    <author>
        <name>e-river</name>
        <uri>http://www.e-riverstyle.com/</uri>
    </author>
    
        <category term="JavaScript" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="javascript" label="javascript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="jquery" label="jQuery" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="navigation" label="navigation" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.e-riverstyle.com/">
        <![CDATA[<p><a href="http://css-tricks.com/jquery-magicline-navigation/">CSS-Tricks</a>より、jQueryで滑らかなアニメーションのスライドを実装できるナビゲーションの紹介です。</p>
<p><a href="http://css-tricks.com/examples/MagicLine/">デモページはコチラから</a></p><div menubottom="0" menuright="0" menutop="0" menuleft="0" activeid="-1" expanded="0" style="display: none;" id="divCleekiAttrib"></div>]]>
        <![CDATA[
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="" src="http://blog.e-riverstyle.com/2010/02/11/image/jq1002111.jpg" class="mt-image-none" style="" height="77" width="455" /></span>


<p class="sp">設置方法はビックリすぎるぐらい簡単でした。</p>

<h2 class="split">HTML</h2>
<pre><code>&lt;div class="nav-wrap"&gt;
 &lt;ul class="group" id="example-one"&gt;
    &lt;li class="current_page_item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Buy Tickets&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Group Sales&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Reviews&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;The Show&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Videos&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Photos&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Magic Shop&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;</code></pre>

<p>ソースコード例として載ってあるHTMLをそのまま使うのが一番楽ですね。もっとも簡単に実装できます。そうでない場合は、ポイントは、ul要素に付加されている<code>id="example-one"</code>とli要素に付加されている<code>class="current_page_item"</code>です。</p>

<p>これらの部分には、下記のjQueryのソースコードでも使われているので、それらの部分のid名やclass名を変更すると、jQueryのソースコードの箇所も変更しなければなりません。</p>

<h2 class="split">jQuery</h2>
<pre><code>$(function() {

    var $el, leftPos, newWidth,
        $mainNav = $("#example-one");

    $mainNav.append("&lt;li id='magic-line'&gt;&lt;/li&gt;");
    var $magicLine = $("#magic-line");

    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $("#example-one li a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
    });
});</code></pre>]]>
    </content>
</entry>

<entry>
    <title>MySQLのデータベースを作成</title>
    <link rel="alternate" type="text/html" href="http://blog.e-riverstyle.com/2010/02/mysql.html" />
    <id>tag:blog.e-riverstyle.com,2010://1.590</id>

    <published>2010-02-08T23:49:16Z</published>
    <updated>2010-02-08T23:51:15Z</updated>

    <summary>前回のメモの続きになるのですが、今回は、使用するデータベースを作成していきます。...</summary>
    <author>
        <name>e-river</name>
        <uri>http://www.e-riverstyle.com/</uri>
    </author>
    
        <category term="その他" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="linux" label="Linux" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.e-riverstyle.com/">
        <![CDATA[<p><a href="http://blog.e-riverstyle.com/2010/02/centos53mysql.html">前回</a>のメモの続きになるのですが、今回は、使用するデータベースを作成していきます。</p><div menubottom="0" menuright="0" menutop="0" menuleft="0" activeid="-1" expanded="0" style="display: none;" id="divCleekiAttrib"></div>]]>
        <![CDATA[
<p>MySQLにrootでログインします。</p>

<pre><code>[root@hoge ~]#  mysql -u root -p
Enter password:</code></pre>

<p>パスワードが設定されていますので、パスワードを入力してログインします。</p>

<p>そして、MySQLには、初期でtestという空のデータベースが存在します。以下のように、コマンドを入力すると登録されているデータベースが確認することができます。</p>

<h2 class="split">データベースの確認</h2>
<pre><code>mysql&gt; show databases;</code></pre>

<p>下記のように表示されます。</p>

<pre><code>+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| test               |
+--------------------+
3 rows in set (0.00 sec)</code></pre>

<p>使ってもよいのですが、使わない場合は削除します。以下のようにコマンドを入力すると削除することができます。</p>

</h2><h2 class="split">データベースの削除</h2>
<pre><code>mysql&gt; drop database test;</code></pre>

<p>確認すると、削除されているのが、わかります。</p>
<pre><code>mysql&gt; show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
+--------------------+
2 rows in set (0.00 sec)</code></pre>


<p>使用するデータベースを作成します。以下のようにコマンドを入力します。</p>

<h2 class="split">データベースの作成</h2>
<pre><code>mysql&gt; create database データベース名;</code></pre>

<p>今回は、sysdataというデータベースを作成しました。確認すると下記のように表示されるはずです。</p>

<pre><code>mysql&gt; show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| sysdata            |
+--------------------+
3 rows in set (0.00 sec)</code></pre>

<p>これで、下準備完成です。ここからテーブルなどを作成していきますが、テーブル作成などは、別のエントリでまとめます。</p>
]]>
    </content>
</entry>

<entry>
    <title>CentOS5.3にMySQLをインストールから起動までのメモ</title>
    <link rel="alternate" type="text/html" href="http://blog.e-riverstyle.com/2010/02/centos53mysql.html" />
    <id>tag:blog.e-riverstyle.com,2010://1.589</id>

    <published>2010-02-08T10:12:09Z</published>
    <updated>2010-02-08T23:53:14Z</updated>

    <summary> ここ最近、サーバ関連のことばかりやっているのですが、僕が行ったCentOSにM...</summary>
    <author>
        <name>e-river</name>
        <uri>http://www.e-riverstyle.com/</uri>
    </author>
    
        <category term="その他" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="linux" label="Linux" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.e-riverstyle.com/">
        <![CDATA[ <p>ここ最近、サーバ関連のことばかりやっているのですが、僕が行ったCentOSにMySQLのインストールから起動までの一連の流れをﾒﾓとして表記します。使用CentOSはCentOS5.3です。</p>
<div menubottom="0" menuright="0" menutop="0" menuleft="0" activeid="-1" expanded="0" style="display: none;" id="divCleekiAttrib"></div>]]>
        <![CDATA[<h2 class="split">MySQLをインストール</h2>
<pre><code>[root@hoge ~]# yum -y install mysql-server</code></pre>

<p>CentOSは、yumコマンドでMySQLをインストールすることができます。</p>

<p>インストールできたら、MySQLの設定ファイルを編集しなければならないのですが、ここでは省略します。</p>
<ul>
<li><a href="http://blog.mizoshiri.com/archives/166">CentOSにMysqlをインストールのメモ</a></li>
<li><a href="http://centossrv.com/mysql.shtml">データベースサーバー構築(MySQL)</a></li>
</ul>

<p>などを参考にしてください。</p>

<h2 class="split">MySQLを起動</h2>
<p>MySQLをインストール後、MySQLを起動を起動させます。下記のようにコマンドを入力します。</p>
<pre><code>[root@hoge ~]# /etc/rc.d/init.d/mysqld start</code></pre>

<p>別にしなくてもよいのですが、MySQLのバージョンチェックは下記のようなコマンドです。</p>

<pre><code>mysql&gt; select version();</code></pre>
<p>下記のように、MySQLのバージョンが表示されます。</p>

<pre><code>+-----------+
| version() |
+-----------+
| 5.0.86    |
+-----------+
1 row in set (0.00 sec)
</code></pre>


<p>MySQLは、CentOSを起動後には、起動しませんので、CentOSを起動後に、MySQLを自動で起動するようにします。</p>

<h2 class="split">MySQLを自動起動設定</h2>
<pre><code>[root@hoge ~]# chkconfig mysqld on</code></pre>

<p>下記のようにコマンドを入力し、下記のように3：onになっていたら自動設定完了です。</p>
<pre><code>[root@hoge ~]# chkconfig --list mysqld
mysqld          0:off   1:off   2:on    3:on    4:on    5:on    6:off</code></pre>

<h2 class="split">MySQLへrootでログイン</h2>
<pre><code>[root@hoge ~]#  mysql -u root</code></pre>


<h2 class="split">登録済ユーザ、パスワード確認</h2>

<pre><code>mysql&gt; select user,host,password from mysql.user;</code></pre>

<p>上記のようにコマンドを打つと、下記のように表示されます。</p>

<pre><code>+------+-----------------------+------------------+
| user | host                  | password         |
+------+-----------------------+------------------+
| root | localhost             |                  |
| root | localhost.localdomain |                  |
| root | 127.0.0.1             |                  |
+------+-----------------------+------------------+</code></pre>

<p>パスワードが設定されていないことが、確認できます。そこで、パスワードを設定。</p>

<h2 class="split">localhostのrootユーザにパスワード設定</h2>
<pre><code>mysql&gt; set password for root@localhost=password('パスワード');</code></pre>


<p>そして、再度、登録済ユーザ、パスワード確認すると、*の部分が、暗号化されたパスワードが表示されます。</p>
<pre><code>mysql&gt; select user,host,password from mysql.user;
+------+-----------------------+------------------+
| user | host                  | password         |
+------+-----------------------+------------------+
| root | localhost             | **************** |
| root | localhost.localdomain |                  |
| root | 127.0.0.1             |                  |
+------+-----------------------+------------------+</code></pre>

<p>あとは、テーブル作成など行っていくのですが、これらについては<a href="http://blog.e-riverstyle.com/2010/02/mysql.html">別エントリ</a>でまとめます。</p>

<p>作業を終了すると、MySQLからログアウトします。</p>
<h2 class="split">MySQLからログアウト</h2>
<pre><code>mysql&gt; exit
Bye</code></pre>

<p>Byeと表示されれば、ログアウト完了</p>]]>
    </content>
</entry>

<entry>
    <title>XAMPP 1.7でSOY CMSのブログが表示されない件</title>
    <link rel="alternate" type="text/html" href="http://blog.e-riverstyle.com/2010/02/xampp-17soy-cms.html" />
    <id>tag:blog.e-riverstyle.com,2010://1.588</id>

    <published>2010-02-03T12:09:19Z</published>
    <updated>2010-02-03T12:12:44Z</updated>

    <summary>以前、SOY CMSをXAMPPにインストール時のバージョンによる動作の違いにつ...</summary>
    <author>
        <name>e-river</name>
        <uri>http://www.e-riverstyle.com/</uri>
    </author>
    
        <category term="CMS" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="cms" label="CMS" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.e-riverstyle.com/">
        <![CDATA[<p>以前、<a href="http://blog.e-riverstyle.com/2010/01/soy-cms-xampp.html">SOY CMSをXAMPPにインストール時のバージョンによる動作の違い</a>について、書かせていただきましたが、それとは別に、XAMPP環境（バージョン1.7）とLAMP環境では、SOY CMSのブログの動作が異なります。</p>
<p>ブログを新規に作成しましたが、表示されないという状態になっていました。</p><div menubottom="0" menuright="0" menutop="0" menuleft="0" activeid="-1" expanded="0" style="display: none;" id="divCleekiAttrib"></div><div menubottom="0" menuright="0" menutop="0" menuleft="0" activeid="-1" expanded="0" style="display: none;" id="divCleekiAttrib"></div>]]>
        <![CDATA[

<p>オチは、ApacheのAllowOverrideの設定がNoneになっていたことです。</p>

<h2 class="split">AllowOverride</h2>
AllowOverrideとは、<q cite="http://httpd.apache.org/docs/2.2/mod/core.html">.htaccess で許可されるディレクティブの種類</q>であり、<a href="http://httpd.apache.org/docs/2.2/mod/core.html">core - Apache HTTP サーバ</a>によれば、

<blockquote cite="http://httpd.apache.org/docs/2.2/mod/core.html">
<p>このディレクティブを None に設定すると、.htaccessファイルは完全に 無視されます。 この場合、サーバはファイルシステムの .htaccessファイルを読むことを 試みさえしません。</p>
</blockquote>

<p>というふうになっています。</p>
<p>SOY CMSのsqlite版のほうは、.htaccessが生成されますので、必ずAllowOverrideを有効にしなければなりませんね。すっかり忘れてました（汗）。</p>
<p><a href="http://www.wakhok.ac.jp/biblion/1998/netadmin/node257.html">AllowOverrideについては、さらにここも参照</a></p>

<h2 class="split">AllowOverrideを変更</h2>
<p>AllowOverrideをAllに変更すれば動作します。</p>

<p>変更前</p>
<pre><code> AllowOverride None </code></pre>

<p>変更後</p>
<pre><code> AllowOverride All </code></pre>

<p>但し、これはLAMP環境の場合です。</p>
<p>LAMP環境とえらそうに書いてますが、実際に試したLAMP環境は、以下になります。</p>

<ul>
<li>CentOS 5.3</li>
<li>PHP 5.2.11</li>
<li>Apache 2.2.14 </li>
</ul>

<p>しかし、これだけだと、XAMPP環境では、ブログは動作しません。</p>
<p>SOY CMSの開発元の<a href="http://www.n-i-agroinformatics.com/">株式会社日本情報化農業研究所</a>の岡田さんからオプションも必要というアドバイスをいただきまして、XAMPPのhttpd.confの以下のAllowOverrideの設定をNoneからAllに変更しました。XAMPPのhttpd.confは、<code>xampp/apache/conf</code>に、あります。</p>

<!--
<p>変更前 191行あたり（秀丸エディタの場合）</p>
<pre><code>
&lt;Directory /&gt;
    Options FollowSymLinks
    AllowOverride None
    Order deny,allow
    Deny from all
&lt;/Directory&gt;
</code></pre>
-->

<p>変更前 228行あたり（秀丸エディタの場合）</p>
<pre><code>AllowOverride None</code></pre>

<p>変更前 338行あたり（秀丸エディタの場合）</p>
<pre><code>&lt;Directory "C:/xampp/htdocs"&gt;
    AllowOverride None
    Options Indexes FollowSymLinks MultiViews ExecCGI Includes
    Order allow,deny
    Allow from all
&lt;/Directory&gt;</code></pre>

<!--
<p>変更後 191行あたり（秀丸エディタの場合）</p>
<pre><code>&lt;Directory /&gt;
    Options FollowSymLinks
    AllowOverride All
    Order deny,allow
    Deny from all
&lt;/Directory&gt;</code></pre>
-->

<p class="sp">変更後 228行あたり（秀丸エディタの場合）、AllowOverride Allに変更</p>
<pre><code>AllowOverride All</code></pre>

<p>変更後 338行あたり（秀丸エディタの場合）、AllowOverride Allに変更</p>
<pre><code>&lt;Directory "C:/xampp/htdocs"&gt;
    AllowOverride All
    Options Indexes FollowSymLinks MultiViews ExecCGI Includes
    Order allow,deny
    Allow from all
&lt;/Directory&gt;</code></pre>


<p>このように設定を変更することにより、動作しました。</p>
<p>httpd.confには、191行あたり（秀丸エディタの場合）に以下のような記述があります。</p>
<pre><code>&lt;Directory /&gt;
    Options FollowSymLinks
    AllowOverride None
    Order deny,allow
    Deny from all
&lt;/Directory&gt;</code></pre>

<p>ここにも、AllowOverrideがあるのですが、ここはNoneでもブログは動作しました。</p>


<h2 class="split">あとがき</h2>
<p>変な記述があれば、ご指摘くださると幸いです。</p>]]>
    </content>
</entry>

<entry>
    <title>title属性についての疑問をこれまたぐだぐだと書いてみた。</title>
    <link rel="alternate" type="text/html" href="http://blog.e-riverstyle.com/2010/02/title.html" />
    <id>tag:blog.e-riverstyle.com,2010://1.587</id>

    <published>2010-02-01T10:21:10Z</published>
    <updated>2010-02-01T10:22:58Z</updated>

    <summary>HTMLのtitle属性は、本当にアクセシビリティに本当に有効なのだろうかと、前...</summary>
    <author>
        <name>e-river</name>
        <uri>http://www.e-riverstyle.com/</uri>
    </author>
    
        <category term="Accessibility" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="ボヤキ" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="accessibility" label="accessibility" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.e-riverstyle.com/">
        <![CDATA[<p>HTMLのtitle属性は、本当にアクセシビリティに本当に有効なのだろうかと、前々から疑問に思っていてので、自分が感じている疑問を書きます。</p>]]>
        <![CDATA[
<h2 class="split">title属性</h2>
<p>title属性というのは、ある要素に対して補足情報を付け足す属性です。そして、以下のように説明されています。</p>

<blockquote cite="http://www.mozilla.gr.jp/standards/webtips0024.html">
<p>
    title = text [CS]

        この属性は、当該要素に関する助言的情報を提供する。

    文書全体に関する情報を提供し1文書に1度しか出現し得ないTITLE要素とは異なり、 title属性は幾つの要素に現れてもよい。 ある要素がtitle属性をサポートしているかどうかについては、当該要素の定義を参照されたい。

    title属性の値は、ユーザエージェントによって様々にレンダリングされるであろう。 例えば、視覚系ブラウザはタイトルを「ツールチップ」 (ポインティングデバイスがオブジェクトの上にある際に現れる短いメッセージ) として表示しがちである。音声ユーザエージェントは、同様の文脈で、タイトル情報を話すであろう。 次のようにリンクにtitle属性を設定すると、視覚系か非視覚系かを問わず、 ユーザエージェントはユーザに対してリンク先資源の性質を知らせることができる。
</p>
</blockquote>

<p>また、いろんなアクセシビリティTipsなどでも書かれており、さらに、以前、自分のブログの「<a href="http://blog.e-riverstyle.com/2010/01/web10webtips.html">今日から始れるWebページをアクセシブルにする10のWebアクセシビリティTips</a>」でも、書いたとおり、意味のあるtitle属性をつけることにより、リンク先のページなどの補足説明になるため、スクリーンリーダ・ユーザにとってユーザフレンドリーな属性であると書きました。</p>
<p>ユーザフレンドリーな属性であるのは間違いないと思うのですが、しかし、実際、スクリーンリーダ・ユーザはどれくらいtitle属性を参考にしているのでしょうか？</p>

<h2 class="split">スクリーンリーダなどにおけるtitle属性</h2>

<p>実際問題、僕自身がスクリーンリーダを持っていないので、なんとも言えないのですが、スクリーンリーダによれば、title属性の読み上げのための設定がされていなければならなく、そういう設定がされていないことが多いということだ。</p>
<p>もし、これが事実ならば、title属性というのは、それほどアクセシビリティ的に大きな効果を与えることがないように思える。</p>

<h2 class="split">title属性と同じ効果を与える方法</h2>
<p>ぜひ「<a href="http://www.amazon.co.jp/gp/product/4873114322?ie=UTF8&tag=erc-22&linkCode=as2&camp=247&creative=1211&creativeASIN=4873114322">ウェブアプリケーションのためのユニバーサルデザイン</a><img src="http://www.assoc-amazon.jp/e/ir?t=erc-22&l=as2&o=9&a=4873114322" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />」の43ページを参考にしていただきたい。</p>
<p>その書籍には、spanタグとCSSを使っている。</p>
<p>通常、title属性を用いた補足は以下のようになる</p>
<pre><code>&lt;a href="./hoge.html" title="hogeについて書かれたページ"&gt;hogeのページ&lt;/a&gt;</code></pre>

<p>こうだと、title属性の読み上げの設定がされていないスクリーンリーダなどでは、title属性が読み上げられず、title属性の意味が無く、補足説明にならない。</p>

<p>そして、上記の書籍では、以下のようになる。</p>
<pre><code>&lt;a href="./hoge.html"&gt;hogeのページ&lt;span class="fuga"&gt;hogeについて書かれたページ&lt;/span&gt;&lt;/a&gt;</code></pre>

<p>補足説明の箇所をspanタグでマークアップし、これをCSSのleftプロパティを使って画面上で見えなくするのである。</p>
<p class="sp">注：画面上で見えなくするときに、<code>display:none;</code>は使わないことが重要である。<code>display:none;</code>を指定している要素はスクリーンリーダだと、読み上げてくれないからだ。</p>

<p class="sp">とまあー相変わらずぐだぐだと書きましたが、僕もわからないことばかりなので、何かtitle属性とスクリーンリーダなどに関するリソースや情報があれば教えていただければ幸いです。</p>
<p>さらに、間違いなどあればご指摘ください。</p>



<h2 class="split sp">参考</h2>
<ul>
<li><a href="http://www.mozilla.gr.jp/standards/webtips0024.html">img要素でalt属性の内容がポップアップしない</a></li>
<li><a href="http://www.amazon.co.jp/gp/product/4873114322?ie=UTF8&tag=erc-22&linkCode=as2&camp=247&creative=1211&creativeASIN=4873114322">ウェブアプリケーションのためのユニバーサルデザイン</a><img src="http://www.assoc-amazon.jp/e/ir?t=erc-22&l=as2&o=9&a=4873114322" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>
<li><a href="http://blog.e-riverstyle.com/2010/01/web10webtips.html">今日から始れるWebページをアクセシブルにする10のWebアクセシビリティTips</a></li>
<li><a href="http://blog.e-riverstyle.com/2009/07/displaynone.html">display:none;は、アクセシビリティを低下させる要因</a></li>
</ul>]]>
    </content>
</entry>

<entry>
    <title>Webアプリケーションに使えそうなソーシャルメディアのベクターアイコン</title>
    <link rel="alternate" type="text/html" href="http://blog.e-riverstyle.com/2010/01/web-18.html" />
    <id>tag:blog.e-riverstyle.com,2010://1.586</id>

    <published>2010-01-31T00:54:01Z</published>
    <updated>2010-01-31T00:56:33Z</updated>

    <summary>icondock.comより、また、素敵なソーシャルメディアのアイコンがでました...</summary>
    <author>
        <name>e-river</name>
        <uri>http://www.e-riverstyle.com/</uri>
    </author>
    
        <category term="アイコン(icon)" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="icon" label="icon" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.e-riverstyle.com/">
        <![CDATA[<p><a href="http://icondock.com/free/vector-social-media-icons">icondock.com</a>より、また、素敵なソーシャルメディアのアイコンがでましたね。Webアプリケーションなどに使えそうです。</p><div menubottom="0" menuright="0" menutop="0" menuleft="0" activeid="-1" expanded="0" style="display: none;" id="divCleekiAttrib"></div>]]>
        <![CDATA[<p></p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="画像：アイコン" src="http://blog.e-riverstyle.com/2010/01/31/image/icon100131.jpg" class="mt-image-none" style="" height="986" width="461" /></span>

<p class="sp">サイズは、32*32と16*16のPNGとGIFの2つのフォーマットが用意されています。</p>
<p>ライセンスで転売は不可で、利用の際には、<code><a href="http://icondock.com">http://icondock.com</a></code>のリンクをどこなに貼らなければならないそうです。</p>

<p class="sp"><a href="http://icondock.com/free/vector-social-media-icons">ダウンロードはコチラから</a></p>]]>
    </content>
</entry>

<entry>
    <title>IEのみに対応させるCSSの条件指定方法 -補足</title>
    <link rel="alternate" type="text/html" href="http://blog.e-riverstyle.com/2010/01/iecss.html" />
    <id>tag:blog.e-riverstyle.com,2010://1.585</id>

    <published>2010-01-27T00:04:40Z</published>
    <updated>2010-01-27T00:07:58Z</updated>

    <summary>前回（といっても結構前なのですが・・・）、「IEの各バージョンだけに対応させるC...</summary>
    <author>
        <name>e-river</name>
        <uri>http://www.e-riverstyle.com/</uri>
    </author>
    
        <category term="CSS+XHTML" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="css" label="css" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ie" label="IE" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.e-riverstyle.com/">
        <![CDATA[<p>前回（といっても結構前なのですが・・・）、「<a href="http://blog.e-riverstyle.com/2009/10/iecsscss.html">IEの各バージョンだけに対応させるCSSの条件指定[CSS]</a>」を、書かせていただきましたが、どうやら好評のようでそれなりのブックマック数を獲得させていただきました。ありがとうございます。</p>

<p>そこで、今回は、それに対しての補足を付け加え、さらに見やすく書こうと思います。</p><div menubottom="0" menuright="0" menutop="0" menuleft="0" activeid="-1" expanded="0" style="display: none;" id="divCleekiAttrib"></div><div menubottom="0" menuright="0" menutop="0" menuleft="0" activeid="-1" expanded="0" style="display: none;" id="divCleekiAttrib"></div>]]>
        <![CDATA[
<h2 class="split sp">すべてのバージョンのIEのみに定義</h2>
<pre><code>&lt;!--[if IE]&gt;
	&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;![endif]--&gt;</code></pre>



<h2 class="split sp">IEには対応させない</h2>
<pre><code>&lt;!--[if !IE]&gt;
	&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;![endif]--&gt;</code></pre>
<p>上記には、「！」がついています。これは、条件分岐の「Not」を意味しますので、IE以外を指します。</p>


<h2 class="split sp">IE7のみに対応</h2>
<pre><code>&lt;!--[if IE 7]&gt;
	&lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
&lt;![endif]--&gt;</code></pre>



<h2 class="split sp">IE6のみに対応</h2>
<pre><code>&lt;!--[if IE 6]&gt;
	&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;![endif]--&gt;</code></pre>


<h2 class="split sp">IE5.5のみに対応</h2>
<pre><code>&lt;!--[if IE 5.5000]&gt;
&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;![endif]--&gt;</code></pre>


<h2 class="split sp">IE5のみに対応</h2>
<pre><code>&lt;!--[if IE 5]&gt;
	&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;![endif]--&gt;</code></pre>



<h2 class="split sp">IE6以下のバージョンに対応</h2>
<pre><code>&lt;!--[if lt IE 7]&gt;
	&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;![endif]--&gt;</code></pre>

<p>上記の「lt」はLess Thanを差しますので、IE7は含まないのでIE6以下になります。</p>

<pre><code>&lt;!--[if lte IE 6]&gt;
	&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;![endif]--&gt;</code></pre>
<p>上記の「lte」はLess Than Equalを意味し、IE6を含みますので、IE6以下になります。</p>



<h2 class="split sp">IE7以下のバージョンに対応</h2>
<pre><code>&lt;!--[if lt IE 8]&gt;
	&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;![endif]--&gt;
</code></pre>
<pre><code>&lt;!--[if lte IE 7]&gt;
	&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;![endif]--&gt;</code></pre>

<h2 class="split sp">IE8以下のバージョンに対応</h2>
<pre><code>&lt;!--[if lt IE 9]&gt;
	&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;![endif]--&gt;</code></pre>
<pre><code>&lt;!--[if lte IE 8]&gt;
	&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;![endif]--&gt;</code></pre>

<h2 class="split sp">IE6以上のバージョンに対応</h2>
<pre><code>&lt;!--[if gt IE 5.5]&gt;
	&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;![endif]--&gt;</code></pre>

<p>上記のgtはGreater Thanを意味し、IE5.5を含まないので、IE6以上</p>

<pre><code>&lt;!--[if gte IE 6]&gt;
	&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;![endif]--&gt;</code></pre>

<p>上記のgtはGreater Than Equalを意味し、IE6を含みますのでIE6以上</p>

<h2 class="split sp">IE7以上のバージョンに対応</h2>
<pre><code>&lt;!--[if gt IE 6]&gt;
	&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;![endif]--&gt;</code></pre>
<pre><code>&lt;!--[if gte IE 7]&gt;
	&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;![endif]--&gt;</code></pre>

<h2 class="split sp">IE8以上のバージョンに対応</h2>
<pre><code>&lt;!--[if gt IE 7]&gt;
	&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;![endif]--&gt;</code></pre>
<pre><code>&lt;!--[if gte IE 8]&gt;
	&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;![endif]--&gt;</code></pre>



<h2 class="split sp">参考</h2>
<a href="http://css-tricks.com/how-to-create-an-ie-only-stylesheet/">CSS-Tricks</a>]]>
    </content>
</entry>

<entry>
    <title>Firefox 3.6にアップグレードしてみた。</title>
    <link rel="alternate" type="text/html" href="http://blog.e-riverstyle.com/2010/01/firefox-36.html" />
    <id>tag:blog.e-riverstyle.com,2010://1.584</id>

    <published>2010-01-23T03:32:12Z</published>
    <updated>2010-01-23T03:34:14Z</updated>

    <summary>表題通りです。日本時間の1月22日午前2時についに、Firefox 3.6がリリ...</summary>
    <author>
        <name>e-river</name>
        <uri>http://www.e-riverstyle.com/</uri>
    </author>
    
        <category term="Browser" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="firefox" label="firefox" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.e-riverstyle.com/">
        <![CDATA[<p>表題通りです。日本時間の1月22日午前2時についに、Firefox 3.6がリリースしました。そこで、早速、Firefox 3.5から3.6にアップグレードしてみました。</p>]]>
        <![CDATA[
<p>Firefoxのメニュバーの「ヘルプ」から「ソフトウェアの更新確認」を押すと、下記図のように「アップグレードしますか？」のメッセージ。</p>


<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="101023fx1.jpg" src="http://blog.e-riverstyle.com/2010/01/23/image/101023fx1.jpg" width="482" height="437" class="mt-image-none" style="" /></span>

<p class="sp">そして、アドオンの互換性のチェック。下記図のように、自分のFirefoxにインストールしているアドオンで「HTML Validator」のみが、まだFirefox 3.6に未対応でした。Firebugなどの重宝しているアドオンはすでに対応しています。</p>

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="100123fx2.jpg" src="http://blog.e-riverstyle.com/2010/01/23/image/100123fx2.jpg" width="469" height="414" class="mt-image-none" style="" /></span>

<p class="sp">そして、アップグレード完了。しかし、かんじんのメモリ使用量や速度のテストをするのを忘れていました。</p>
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="100123fx3.jpg" src="http://blog.e-riverstyle.com/2010/01/23/image/100123fx3.jpg" width="335" height="517" class="mt-image-none" style="" /></span>]]>
    </content>
</entry>

<entry>
    <title>WCAGのガイドラインに沿ったWebアクセシビリティ・テストサイト「TAW」</title>
    <link rel="alternate" type="text/html" href="http://blog.e-riverstyle.com/2010/01/wcagwebtaw.html" />
    <id>tag:blog.e-riverstyle.com,2010://1.583</id>

    <published>2010-01-19T11:59:14Z</published>
    <updated>2010-01-19T12:02:10Z</updated>

    <summary>かなり前にブックマークをしていて、そのまま忘れていたというありがちなことなのです...</summary>
    <author>
        <name>e-river</name>
        <uri>http://www.e-riverstyle.com/</uri>
    </author>
    
        <category term="Accessibility" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="accessibility" label="accessibility" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="webサービス" label="webサービス" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.e-riverstyle.com/">
        <![CDATA[<p>かなり前にブックマークをしていて、そのまま忘れていたというありがちなことなのですが（汗）、WCAG1.0と2.0のガイドラインに沿ったWebアクセシビリティ・テストを行なうことができるサイト「<a href="http://www.tawdis.net/ingles.html">TAW</a>」を紹介します。</p>
<p>しかし、WCAG2.0はベータ版です。</p>]]>
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="100119acc3.jpg" src="http://blog.e-riverstyle.com/2010/01/19/image/100119acc3.jpg" width="500" height="289" class="mt-image-none" style="" /></span>


<p class="sp">原文はスペイン語なので、英語にするか、Googleツールバーの翻訳機能で日本語にしちゃってください。<br />しかし、余談ですが、ヨーロッパ圏内のサイトって少なくとも、数カ国語には対応してますよね。</p>

<p>あとは、使い方は簡単で、テストを行いたいサイトのURLを入力するだけです。下記図が結果の画面です。今回はWCAG2.0で確認を行いました。</p>

<a href="http://blog.e-riverstyle.com/2010/01/19/image/100119acc1.jpg"><img alt="100119acc2.jpg" src="http://blog.e-riverstyle.com/2010/01/19/image/100119acc2.jpg" width="500" height="288" class="mt-image-none" style="" /></a>

<p class="sp">「0 Problemas」なので大きな問題はなさそうですが、「It is necessary a human review」、「Completety human review」と記されている通り、人が実際にテストを行わなければならないということですね。</p>
<p>こういうのでWebサービスで改めて、読み上げなどのアクセシビリティの確認は、読み上げの場合は、必ずスクリーンリーダなどを用いなければならないと確信しました。</p>]]>
    </content>
</entry>

<entry>
    <title>jQuery 1.4のチートシート[js]</title>
    <link rel="alternate" type="text/html" href="http://blog.e-riverstyle.com/2010/01/jquery-14js.html" />
    <id>tag:blog.e-riverstyle.com,2010://1.582</id>

    <published>2010-01-15T09:49:52Z</published>
    <updated>2010-01-15T09:51:41Z</updated>

    <summary>いよいよjQuery 1.4がリリースされました。Future Colorsより...</summary>
    <author>
        <name>e-river</name>
        <uri>http://www.e-riverstyle.com/</uri>
    </author>
    
        <category term="JavaScript" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="cheatsheet" label="cheat sheet" 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://blog.e-riverstyle.com/">
        <![CDATA[<p>いよいよjQuery 1.4がリリースされました。<a href="http://futurecolors.ru/jquery/">Future Colors</a>より、jQuery 1.4のチートシートが公開されていますので、紹介します。</p>]]>
        <![CDATA[
<p>チートシートはWeb上でのドキュメントとPNGでの一覧とPDFでの一覧のタイプあります。</p>


<h2 class="split"><a href="http://futurecolors.ru/jquery/">HTMLドキュメント</a></h2>
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="100115jq1.jpg" src="http://blog.e-riverstyle.com/2010/01/15/image/100115jq1.jpg" width="500" height="393" class="mt-image-none" style="" /></span>


<h2 class="split sp"><a href="http://www.futurecolors.ru/jquery/jquery.cheatsheet.1.4.png">PNG</a></h2>
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="100115jq2.jpg" src="http://blog.e-riverstyle.com/2010/01/15/image/100115jq2.jpg" width="500" height="386" class="mt-image-none" style="" /></span>

<h2 class="split sp"><a href="http://www.futurecolors.ru/jquery/jquery.cheatsheet.1.4.pdf">PDF</a></h2>
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="100115jq3.jpg" src="http://blog.e-riverstyle.com/2010/01/15/image/100115jq3.jpg" width="500" height="388" class="mt-image-none" style="" /></span>]]>
    </content>
</entry>

</feed>
