<?xml version="1.0" encoding="utf-8" ?>


<?xml-stylesheet href="http://d.hatena.ne.jp/appakumaturi/rssxsl" type="text/xsl" media="screen"?>


<rdf:RDF
xmlns="http://purl.org/rss/1.0/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xml:lang="ja">
<channel rdf:about="http://d.hatena.ne.jp/appakumaturi/rss">
<title>残像ブログ</title>
<link>http://d.hatena.ne.jp/appakumaturi/</link>
<description>残像ブログ</description>

<dc:creator>appakumaturi</dc:creator>
<dc:date>2012-05-25T21:36:45+09:00</dc:date>
<items>
<rdf:Seq>
<rdf:li rdf:resource="http://d.hatena.ne.jp/appakumaturi/20120414/1334334986"/>
<rdf:li rdf:resource="http://d.hatena.ne.jp/appakumaturi/20120128/1327766640"/>
<rdf:li rdf:resource="http://d.hatena.ne.jp/appakumaturi/20120121/1327143125"/>
<rdf:li rdf:resource="http://d.hatena.ne.jp/appakumaturi/20111113/1321191276"/>
<rdf:li rdf:resource="http://d.hatena.ne.jp/appakumaturi/20110816/1313504888"/>
</rdf:Seq>
</items>
</channel>



<item rdf:about="http://d.hatena.ne.jp/appakumaturi/20120414/1334334986">
<title>[その他]UnicodeとかUTF-8とかShift_JISとか色々複雑なので自メモ</title>
<link>http://d.hatena.ne.jp/appakumaturi/20120414/1334334986</link>
<description> 下記の書籍を参考にしてますこの記事内の記述には私の理解不足により誤りがある可能性があるので、こちらの本を読むのがとてもおすすめ プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ) 作者: 矢野啓介 出版社/メーカー: 技術評論社</description>

<content:encoded><![CDATA[<br>
<div class="section">
<p>下記の書籍を参考にしてます<br>この記事内の記述には私の理解不足により誤りがある可能性があるので、こちらの本を読むのがとてもおすすめ</p>
<div class="hatena-asin-detail">
  <a href="http://www.amazon.co.jp/dp/477414164X/?tag=hatena_st1-22&ascsubtag=d-5gug3"><img src="http://ecx.images-amazon.com/images/I/51b7R1hZL-L._SL160_.jpg" class="hatena-asin-detail-image" alt="プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)" title="プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)"></a>
  <div class="hatena-asin-detail-info">
    <p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/dp/477414164X/?tag=hatena_st1-22&ascsubtag=d-5gug3">プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)</a></p>
    <ul>
      
      <li><span class="hatena-asin-detail-label">作者:</span> <a href="http://d.hatena.ne.jp/keyword/%CC%F0%CC%EE%B7%BC%B2%F0" class="keyword">矢野啓介</a></li>
      
      <li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a href="http://d.hatena.ne.jp/keyword/%B5%BB%BD%D1%C9%BE%CF%C0%BC%D2" class="keyword">技術評論社</a></li>
      
      <li><span class="hatena-asin-detail-label">発売日:</span> 2010/02/18</li>
                                                      <li><span class="hatena-asin-detail-label">メディア:</span> 単行本（ソフトカバー）</li>
      <li><span class="hatena-asin-detail-label">購入</span>: 33人 <span class="hatena-asin-detail-label">クリック</span>: 527回</li>
      <li><a href="http://d.hatena.ne.jp/asin/477414164X" target="_blank">この商品を含むブログ (120件) を見る</a></li>
    </ul>
  </div>
  <div class="hatena-asin-detail-foot"></div>
</div>
<p><br></p>
<h4>そもそも文字コードとは</h4>
<p>任意の文字を重複無く集めたものを文字集合という<br><a href="http://f.hatena.ne.jp/appakumaturi/20120414013600" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/appakumaturi/20120414/20120414013600.png" alt="f:id:appakumaturi:20120414013600p:image" title="f:id:appakumaturi:20120414013600p:image" class="hatena-fotolife"></a><br>その文字集合とビット組み合わせを対応付けたものを文字コードまたは符号化文字集合という<br><a href="http://f.hatena.ne.jp/appakumaturi/20120414013559" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/appakumaturi/20120414/20120414013559.png" alt="f:id:appakumaturi:20120414013559p:image" title="f:id:appakumaturi:20120414013559p:image" class="hatena-fotolife"></a><br>文字コードは収録している文字の種類・数、ビット組み合わせの桁数などの違いがある<br>ASCII、JIS X 0208、Unicodeなどが文字コードにあたり、それぞれの特徴は以下の通り</p>

<table>
<tr><th>文字コード名</th><th>説明</th><th>ビット桁数</th></tr>
<tr><td>ASCII</td><td>英数字と一部の記号のみを収録した基礎的な文字コード</td><td>7ビット単位の1バイト</td></tr>
<tr><td>JIS X 0208</td><td>日本語で使用される主な文字を収録した文字コード。漢字はJIS第1・第2水準漢字が収録されている</td><td>7ビット単位の2バイト</td></tr>
<tr><td>Unicode</td><td>全世界の文字の収録を目的とした文字コード。2バイト</td><td>作成当初は16ビットだったが、今は8ビット単位の1〜4バイト</td></tr><br>

</table>
<h4>UTF-8やShift_JISは文字符号化方式</h4>
<p>UTF-8やShift_JISなどは上記参考資料では「文字符号化方式」と呼ばれています<br>文字符号化方式は、文字コードのビット組み合わせに対して、計算などによってビット値を与える<br>文字コードでもうビット組み合わせが定義されてるんだからそのまま使えばいいじゃん！！！！と思うところだが（実際ASCIIなどは文字コードのビット組み合わせをそのまま使う）、そうも行かない場合がある。その場合とは</p>
<ul>
<li>複数の文字コードを組み合わせて使う場合</li>
<li>文字コードがUnicodeの場合</li>
</ul>
<p>などがあるらしい<br></p>
<h5>複数の文字コードを組み合わせて使う場合</h5>
<p>たとえばJIS X 0208は英数字も収録された文字コードだが、先発のASCIIとの後方互換を保つためには、1バイトの文字は1バイト、2バイトの文字は2バイトで表現できなければならない<br>そのためにJIS X 0208とASCIIを同時に使えるように符号化方式が必要になる<br></p>
<h5>文字コードがUnicodeの場合</h5>
<p>Unicodeは作成当初はビット組み合わせの桁は16ビットだったが、それでは世界中の文字を収録しきれない事が判明したため桁数を増やさなければならなくなった<br>そのため、従来の16ビットのUnicodeと後方互換を保つ為には符号化方式を使用してビット値を与える必要ができた<br></p>
<h4>どれが何の文字符号化方式か</h4>

<table>
<tr><th>文字符号化方式</th><th>文字コード</th></tr>
<tr><td>UTF-8,UTF-16,UTF-32</td><td>Unicode</td></tr>
<tr><td>EUC-JP,Shift_JIS,ISO-2022=JP</td><td>JIS X 0208</td></tr><br>

</table>
<h4>まとめ</h4>

<table>
<tr><td>Unicode</td><td>文字コード</td></tr>
<tr><td>UTF-8</td><td>「Unicode」という文字コードのビット値を計算する方式</td></tr>
<tr><td>Shift_JIS</td><td>「JIS X 0208」という文字コードのビット値を計算する方式</td></tr>

</table>
</div>
]]></content:encoded>
<dc:creator>appakumaturi</dc:creator>
<dc:date>2012-04-14T01:36:26+09:00</dc:date>
<dc:subject>その他</dc:subject>
</item>
<item rdf:about="http://d.hatena.ne.jp/appakumaturi/20120128/1327766640">
<title>[web製作]IE8のドキュメントモードやブラウザモードについて</title>
<link>http://d.hatena.ne.jp/appakumaturi/20120128/1327766640</link>
<description> 先日ローカル環境で作成していたwebページを社内のファイルサーバ（？）にアップしたら、なぜかサーバ上のページだけ表示が崩れるという事があった。観覧に使用していたのはIE8だったが、どうやらIE8の互換表示によるものだったらしいので自分用に調べた。 参考 IE8互換モー</description>

<content:encoded><![CDATA[<br>
<div class="section">
<p>先日ローカル環境で作成していたwebページを社内のファイルサーバ（？）にアップしたら、なぜかサーバ上のページだけ表示が崩れるという事があった。<br>観覧に使用していたのはIE8だったが、どうやらIE8の互換表示によるものだったらしいので自分用に調べた。<br></p>
<h4>参考</h4>
<ul>
<li><a href="http://blogs.technet.com/b/jpieblog/archive/2009/09/09/3280034.aspx" target="_blank">IE8互換モードについて - Japan IE Support Team Blog - Site Home - TechNet Blogs</a></li>
<li><a href="http://msdn.microsoft.com/ja-jp/library/ie/cc288325%28v=vs.85%29.aspx" target="_blank">ドキュメント互換性の定義</a></li>
<li><a href="http://msdn.microsoft.com/ja-jp/library/cc848894%28v=vs.85%29.aspx#doccompat" target="_blank">  Internet Explorer 8 の開発者ツールの概要</a></li>
<li><a href="http://blogs.msdn.com/b/jpwin/archive/2009/04/06/ie8.aspx" target="_blank">IE8 の互換表示について - Windows 開発統括部 Blog - Site Home - MSDN Blogs</a></li>
<br></ul>
<h4>ブラウザの表示はドキュメントモードで決まる</h4>
<p><span style="font-weight:bold;" class="deco">ドキュメントモード</span>とは、ページのレンダリング方法（HTMLやCSSの解釈方法）をIEのどのバージョンの方法でやるか指定するもの。<br>IE8のドキュメントモードは「Quirk」、「IE7標準」、「IE8標準」の3つがある。<br>各ドキュメントモードの意味は以下の通り。</p>

<table>
<tr><th>ドキュメントモード</th><th>解釈方法</th></tr>
<tr><td>Quirk</td><td>IE5のレンダリング方法を使う。互換モード</td></tr>
<tr><td>Internet Explorer 7 標準</td><td>IE7のレンダリング方法を使う</td></tr>
<tr><td>Internet Explorer 8 標準</td><td>IE8のレンダリング方法を使う</td></tr>

</table>
<p>IEのバージョンごとにレンダリング方法が異なるので、自分の意図するドキュメントモードで表示されなかった場合（たとえばIE8用に作ったサイトがIE5仕様で表示された場合）私のようにぐぬぬう！ってなるようだ。<br><br>今観覧しているページがどのドキュメントモードで表示されているかは[F12]キーを押して開発者ツールウィンドウを表示すると、メニュー部分に「ドキュメントモード」という欄があるのでそこを確認する。<br><a href="http://f.hatena.ne.jp/appakumaturi/20120128194846" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/appakumaturi/20120128/20120128194846.png" alt="f:id:appakumaturi:20120128194846p:image" title="f:id:appakumaturi:20120128194846p:image" class="hatena-fotolife"></a><br></p>
<h4>ドキュメントモードの指定方法</h4>
<p>解決策から先に書くが、ページ作成者側でドキュメントモードを指定するにはmetaタグを使えばよい（他の方法は参考サイトを参照）。<br><span style="color:#FF0000;" class="deco">このmetaタグはlink要素などより下の行に記述した場合動作しないので注意（title要素や他のmeta要素よりは下でもよい）</span></p>
<pre class="syntax-highlight">
<span class="synIdentifier">&#60;</span><span class="synStatement">head</span><span class="synIdentifier">&#62;</span>
<span class="synPreProc">  </span><span class="synIdentifier">&#60;</span><span class="synStatement">meta</span><span class="synIdentifier"> </span><span class="synType">http-equiv</span><span class="synIdentifier">=</span><span class="synConstant">&#34;X-UA-Compatible&#34;</span><span class="synIdentifier"> </span><span class="synType">content</span><span class="synIdentifier">=</span><span class="synConstant">&#34;IE=互換モード&#34;</span><span class="synIdentifier"> /&#62;</span>
<span class="synPreProc">  </span>
<span class="synIdentifier">&#60;/</span><span class="synStatement">head</span><span class="synIdentifier">&#62;</span>
</pre>

<p>上の「互換モード」でドキュメントモードを指定するわけだが、指定する互換モードによってはDOCTYPE宣言の影響をうける事がある。<br>具体的にはDOCTYPE宣言の内容により「古いブラウザ用」「標準仕様」の2つの状態に判断され、それぞれに対応したドキュメントモードが設定される。</p>
<ul>
<li>HTML3.0以下用のDOCTYPE宣言が書かれている</li>
<li>HTML4.0FramesetとHTML4.0TransitionalでDTDのURLが書かれていない</li>
<li>そもそもDOCTYPE宣言が書かれていない</li>
</ul>
<p>上記のDOCTYPE宣言の場合は「古いブラウザ用」と判定される。それ以外は「標準仕様」となる。<br><br>それを踏まえて互換モードとそれに対応するドキュメントモードの一覧を示す。</p>

<table>
<tr><th>互換モード</th><th>適用されるドキュメントモード</th><th>DOCTYPE宣言の影響</th></tr>
<tr><td>EmulateIE8</td><td>「古いブラウザ用」の時Quirkモード、「標準仕様」の時IE8標準モード</td><td>受ける</td></tr>
<tr><td>EmulateIE7</td><td>「古いブラウザ用」の時Quirkモード、「標準仕様」の時IE7標準モード</td><td>受ける</td></tr>
<tr><td>IE8</td><td>IE8標準モード</td><td>受けない</td></tr>
<tr><td>IE7</td><td>IE7標準モード</td><td>受けない</td></tr>
<tr><td>IE5</td><td>Quirkモード</td><td>受けない</td></tr>
<tr><td>edge</td><td>使ってるブラウザで使用できる最新のバージョンでの標準モード（IE8ならIE8標準）</td><td>受けない</td></tr><br>

</table>
<p>たとえばIE8標準モードで表示してほしいなら以下のように書く</p>
<pre class="syntax-highlight">
<span class="synIdentifier">&#60;</span><span class="synStatement">meta</span><span class="synIdentifier"> </span><span class="synType">http-equiv</span><span class="synIdentifier">=</span><span class="synConstant">&#34;X-UA-Compatible&#34;</span><span class="synIdentifier"> </span><span class="synType">content</span><span class="synIdentifier">=</span><span class="synConstant">&#34;IE=IE8&#34;</span><span class="synIdentifier"> /&#62;</span>
</pre>
<br>
<h4>X-UA-Compatibleを指定していない場合は？</h4>
<p>metaタグで互換モードの指定が行われていなかった場合、DOCTYPE宣言より「古いブラウザ用」と判定されたらQuirkモードで表示、「標準仕様」と判定されたらIE8標準モードで表示される。普通ならこれで問題ないはず。<br><br>ただし、この時「<span style="font-weight:bold;" class="deco">互換表示</span>」という状態になるとIE8標準モードで表示されなくなってしまう。<br>私が引っかかっていたのはこれでした。<br></p>
<h4>ブラウザモードと互換表示</h4>
<p>IE8にはドキュメントモードの別にブ<span style="font-weight:bold;" class="deco">ラウザモード</span>という設定がある。[F12]キーで表示される開発者ツールを見ると、ドキュメントモードの左にあるのがそれ。<br><a href="http://f.hatena.ne.jp/appakumaturi/20120128194847" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/appakumaturi/20120128/20120128194847.png" alt="f:id:appakumaturi:20120128194847p:image" title="f:id:appakumaturi:20120128194847p:image" class="hatena-fotolife"></a><br><br>ブラウザモードは「IE7」「IE8」と「IE8互換表示」の3つがある。<br>ブラウザモードによってユーザーエージェント、条件付コメント（[if IE 6 ]みたいなやつ）、そしてデフォルトのドキュメントモードが指定される。<br>たとえIE8を使っていてもブラウザモードがIE7になっていたら、UAはIE7になり、[if IE 7 ]の条件付コメントには引っかかり、デフォルトのドキュメントモードはIE7標準モードになる。<br><br>ここでやっと出てくるのが「IE8互換表示」というブラウザモードである。これが「互換表示の状態」にあたる。<br>互換表示状態になると先ほど出てきた「互換モード」がEmulate IE7になってしまう。つまりDOCTYPE宣言の判定の結果「古いブラウザ用」の時Quirkモード、「標準仕様」の時IE7標準モードで表示されるようになる。<br></p>
<h4>互換表示になる条件と互換表示にしない方法</h4>
<p>IE8標準モードで表示されているサイト（たとえば<a href="http://maps.google.co.jp/help/maps/streetview/gallery.html#okunai" target="_blank">      ギャラリー - Google マップのストリートビュー    </a>）では、アドレスバーの右に紙が破れたような縁起悪いボタンがある。<br><a href="http://f.hatena.ne.jp/appakumaturi/20120128194848" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/appakumaturi/20120128/20120128194848.png" alt="f:id:appakumaturi:20120128194848p:image" title="f:id:appakumaturi:20120128194848p:image" class="hatena-fotolife"></a><br>このボタンを押すとそのサイトでのブラウザモードが「IE8互換表示」になる（もう一度ボタンを押さない限りそのサイトは次回以降も互換表示される）。<br><span style="font-weight:bold;" class="deco">このような互換表示を避けたいならX-UA-Compatibleのmetaタグ等で互換モードを明示的に指定してしまえばよい。</span>こうすれば互換表示ボタンも表示されない。<br><br>互換モードを指定していない場合は以下の状態で互換表示に切り替わってしまう。</p>
<ol>
<li>ユーザが互換表示ボタンを押す（ユーザの互換表示リストに載っている）</li>
<li>サイトがマイクロソフトの互換表示一覧DBに登録されている</li>
<li>サイトがイントラネット上にあり、イントラネットサイトを互換表示する設定になっている</li>
<li>すべてのサイトを互換表示する設定になっている</li>
</ol>
<p>これに関する設定はIE8のメニューの[ツール]→[互換表示設定]で確認できる。<br>（下図の番号はリストの番号に対応）<br><a href="http://f.hatena.ne.jp/appakumaturi/20120128194850" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/appakumaturi/20120128/20120128194850.png" alt="f:id:appakumaturi:20120128194850p:image" title="f:id:appakumaturi:20120128194850p:image" class="hatena-fotolife"></a><br></p>
<h5>ユーザが互換表示ボタンを押す（ユーザの互換表示リストに載っている）</h5>
<p>互換表示ボタンを押して互換表示設定の「互換表示に追加したWebサイト」にサイトを登録した状態である。<br>互換表示設定でリストを編集するか、そのサイトで互換表示ボタンを再度押せば解除できる</p>
<h5>サイトがマイクロソフトの互換表示一覧DBに登録されている</h5>
<p>これはそのサイトがマイクロソフトが用意した「このサイトは互換表示したほうがよい」リストに登録されている場合である。</p>
<h5>サイトがイントラネット上にある</h5>
<p>サイトがイントラネット上に存在し、かつ互換表示設定で「互換表示でイントラネットサイトを表示する」にチェックが入っている場合である。<br>デフォルトではチェックされている</p>
<h5>すべてのサイトを互換表示する設定になっている</h5>
<p>そのまんまである。</p>
</div>
]]></content:encoded>
<dc:creator>appakumaturi</dc:creator>
<dc:date>2012-01-29T01:04:00+09:00</dc:date>
<dc:subject>web製作</dc:subject>
</item>
<item rdf:about="http://d.hatena.ne.jp/appakumaturi/20120121/1327143125">
<title>[その他]補色のRGB値を計算する</title>
<link>http://d.hatena.ne.jp/appakumaturi/20120121/1327143125</link>
<description> 色彩の知識は皆無なので詳細は良く知らんのだけど、補色のRGB値算出方法を探していたらIllustratorの補色の計算方法が載ってたのでメモ 補色の説明 下図みたいなRGBカラーの輪を作った時、その色の対角線上にある色が補色になる。組み合わせるとちょっといい感じになる Illu</description>

<content:encoded><![CDATA[
<div class="section">
<p>色彩の知識は皆無なので詳細は良く知らんのだけど、補色のRGB値算出方法を探していたらIllustratorの補色の計算方法が載ってたのでメモ<br></p>
<h4>補色の説明</h4>
<p>下図みたいなRGBカラーの輪を作った時、その色の対角線上にある色が補色になる。<br><a href="http://f.hatena.ne.jp/appakumaturi/20120121193004" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/appakumaturi/20120121/20120121193004.png" alt="f:id:appakumaturi:20120121193004p:image" title="f:id:appakumaturi:20120121193004p:image" class="hatena-fotolife"></a><br><br>組み合わせるとちょっといい感じになる<br></p>
<h4>Illustrator流補色計算</h4>
<p>Illustratorの補色機能では次のように計算しているらしい</p>
<blockquote title="404 Not Found" cite="http://help.adobe.com/ja_JP/Illustrator/14.0/WS714a382cdf7d304e7e07d0100196cbc5f-6288a.html">
<p>現在のカラーの RGB 値のうち最大と最小の値が合計され、その値から各構成要素の値を引いて、新しい RGB 値が生成されます。</p>
<cite><a href="http://help.adobe.com/ja_JP/Illustrator/14.0/WS714a382cdf7d304e7e07d0100196cbc5f-6288a.html" target="_blank">Adobe Illustrator CS4 * カラーの反転色または補色への変更</a></cite></blockquote><br>
<p>この方法で下図のような黄色（R:255,G:216,B:31）の補色を求めてみる。<br><a href="http://f.hatena.ne.jp/appakumaturi/20120121193005" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/appakumaturi/20120121/20120121193005.png" alt="f:id:appakumaturi:20120121193005p:image" title="f:id:appakumaturi:20120121193005p:image" class="hatena-fotolife"></a><br><br>まずRGBの最大値はRの<span style="font-weight:bold;" class="deco">255</span>、最小値はBの<span style="font-weight:bold;" class="deco">31</span>なので、この合計値（xとする）は<span style="font-weight:bold;" class="deco"><span style="color:#006633;" class="deco">286</span></span>になる。<br><br>このxから各値を引けば良いので、この色の補色のRGB値は以下のようになる。<br>R: <span style="color:#006600;" class="deco">286</span> - 255 =  31<br>G: <span style="color:#006600;" class="deco">286</span> - 216 =  70<br>B: <span style="color:#006600;" class="deco">286</span> -  31 = 255<br><br><a href="http://f.hatena.ne.jp/appakumaturi/20120121193006" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/appakumaturi/20120121/20120121193006.png" alt="f:id:appakumaturi:20120121193006p:image" title="f:id:appakumaturi:20120121193006p:image" class="hatena-fotolife"></a><br>Illustrator流の計算では黄色（R:255,G:216,B:31）の補色は青（R:31,G:70,B:255）になった。<br><br>なお元色のRGB値に同じ値が複数含まれて居る場合（255,255,19とか）でも、値のみに注目して最大値と最小値を探せばよい。<br><a href="http://f.hatena.ne.jp/appakumaturi/20120121193008" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/appakumaturi/20120121/20120121193008.png" alt="f:id:appakumaturi:20120121193008p:image" title="f:id:appakumaturi:20120121193008p:image" class="hatena-fotolife"></a><br></p>
<h4>まとめ</h4>
<ol>
<li>R,G,Bの値のうち最大値と最小値を探す</li>
<li>最大値と最小値を加算する（この結果をxとする）</li>
<li>xから元のRGB値をそれぞれ引く</li>
</ol>
</div>
]]></content:encoded>
<dc:creator>appakumaturi</dc:creator>
<dc:date>2012-01-21T19:52:05+09:00</dc:date>
<dc:subject>その他</dc:subject>
</item>
<item rdf:about="http://d.hatena.ne.jp/appakumaturi/20111113/1321191276">
<title>[pixiv][ユーザCSS]ユーザCSSでpixivの特定ユーザの画像を非表示にするナンチャッテNG機能</title>
<link>http://d.hatena.ne.jp/appakumaturi/20111113/1321191276</link>
<description> pixivではユーザの投稿した画像のURLにユーザIDが含まれているので、CSSで特定ユーザのイラストを非表示にすることができます大量に登録するにはあまり効率よくないと思います。Firefox3.6での動作を確認しています。 @-moz-document domain(&#34;www.pixiv.net&#34;) { img</description>

<content:encoded><![CDATA[<br>
<div class="section">
<p>pixivではユーザの投稿した画像のURLにユーザIDが含まれているので、CSSで特定ユーザのイラストを非表示にすることができます<br>大量に登録するにはあまり効率よくないと思います。<br>Firefox3.6での動作を確認しています。</p>
<pre>
@-moz-document domain(&#34;www.pixiv.net&#34;) {
  img&#91;src&#42;=&#34;/ユーザID/&#34;] ,   /&#42;複数指定する場合はカンマ（,）で区切る&#42;/
  img&#91;src&#42;=&#34;/ユーザID/&#34;] ,   
  img&#91;src&#42;=&#34;/ユーザID/&#34;]    /&#42;最後の行にはカンマをつけない&#42;/
  {
    display: none !important;
  }
}
</pre>

<p>上記コードの「ユーザID」の部分に非表示にしたいユーザのユーザIDを書けばOK<br>カンマで区切れば複数指定できます<br><br>ユーザIDを調べるにはそのユーザのスタックフィードのURLを見るのが手っ取り早いと思います<br>pixiv公式アカウントの場合なら</p>
<pre>
http://www.pixiv.net/stacc/pixiv
</pre>

<p>というURLですが、このURLのstacc/より右の英数字がユーザIDです<br>この例なら「pixiv」がユーザIDになります<br><br>指定するときはimg[src*="/pixiv/"]のように必ずユーザIDの両端に/をつけてください<br>つけないと意図しないユーザを非表示にしてしまう可能性があります<br>img[src*="/pixiv/"]は「URLに『/pixiv/』を含む画像を対象にする」という意味なので<br>img[src*="pixiv"]とした場合URLに『pixiv』を含む画像が対象になり、恐らく全てのユーザの画像が見えなくなると思います<br><br>私は一々スタックフィード見たりするのがめんどくさいので、下記のユーザスクリプトで、プロフ画像下部にユーザIDが表示されるようにしています。<br><a href="http://f.hatena.ne.jp/appakumaturi/20111113222847" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/appakumaturi/20111113/20111113222847.png" alt="f:id:appakumaturi:20111113222847p:image" title="f:id:appakumaturi:20111113222847p:image" class="hatena-fotolife"></a><br>もっといい方法があると思うんですが、Javascriptは良くわからず</p>
<pre>
// ==UserScript==
// @name           pixiv
// @namespace      a
// @include        http://www.pixiv.net/&#42;
// ==/UserScript==

//プロフィール画像を取得
var getID = document.getElementsByClassName(&#39;profile_area&#39;)&#91;0].getElementsByTagName(&#39;img&#39;)&#91;0];
//画像srcを抽出
var userID = getID.src;

//画像がデフォルトか判定
if (userID == &#34;http://source.pixiv.net/source/images/no_profile.png&#34;){
     //スタックフィードのリンクを取得
     getID = document.getElementsByClassName(&#39;extaraNavi&#39;)&#91;0].getElementsByTagName(&#39;a&#39;)&#91;3];
     //リンクからURLを取得
     userID = getID.href;
     //URLからIDを抽出
     var SrcNum =userID.indexOf(&#34;/stacc/&#34;);//切り取り開始位置特定
     userID = userID.slice(SrcNum + 7);//切り取り実行
     
}else{
//画像がデフォルトでないなら画像srcを使う
     var SrcNum =userID.indexOf(&#34;/profile/&#34;);
     userID = userID.slice(SrcNum + 9);
     SrcNum =userID.indexOf(&#34;/&#34;);
     userID = userID.slice(0,SrcNum);
}

//cssを追加 11/7/14 ADD
userID= &#34;  img&#91;src&#42;=&#92;&#34;/&#34; + userID +&#34;/&#92;&#34;],&#34;;

//テキストエリアを作成
var CopyID = document.createElement(&#34;input&#34;);
CopyID.type=&#34;text&#34;;
//ユーザIDを表示
CopyID.value= userID;
CopyID.setAttribute(&#34;onclick&#34;, &#34;CopyID.select();&#34;);

//テキストエリアを挿入
var objBody = document.getElementsByClassName(&#39;icon_mail&#39;);
var title_node = objBody&#91;0];
title_node.appendChild(CopyID);
</pre>

</div>
]]></content:encoded>
<dc:creator>appakumaturi</dc:creator>
<dc:date>2011-11-13T22:34:36+09:00</dc:date>
<dc:subject>pixiv</dc:subject>
<dc:subject>ユーザCSS</dc:subject>
</item>
<item rdf:about="http://d.hatena.ne.jp/appakumaturi/20110816/1313504888">
<title>[WordPress]WordPressのdefaultテーマを改造してコメント欄を作る：後編（コメント一覧のカスタマイズ）</title>
<link>http://d.hatena.ne.jp/appakumaturi/20110816/1313504888</link>
<description> 前編：WordPressのdefaultテーマを改造してコメント欄を作る：前編（準備と入力欄） - 残像ブログ前編で改造したcomments.phpで、コメント一覧の出力をしていたwp_list_comments()の改造を行う wp_list_comments()について wp_list_comments()はデフォルトのままだと下記の</description>

<content:encoded><![CDATA[
<div class="section">
<p>前編：<a href="http://d.hatena.ne.jp/appakumaturi/20110813/1313235512" target="_blank">WordPressのdefaultテーマを改造してコメント欄を作る：前編（準備と入力欄） - 残像ブログ</a><br><br>前編で改造したcomments.phpで、コメント一覧の出力をしていたwp_list_comments()の改造を行う<br></p>
<h4>wp_list_comments()について</h4>
<p>wp_list_comments()はデフォルトのままだと下記のようなHTMLを生成する。<br>このHTMLはwp-includes/comment-template.phpのWalker_Commentクラスのstart_el()メソッドに記述された内容から出力されている。</p>
<pre class="syntax-highlight">
<span class="synIdentifier">&#60;</span><span class="synStatement">li</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&#34;comment even thread-even depth-1&#34;</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">&#34;comment-2&#34;</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">&#34;div-comment-2&#34;</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&#34;comment-body&#34;</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&#34;comment-author vcard&#34;</span><span class="synIdentifier">&#62;</span>
 <span class="synIdentifier">&#60;</span><span class="synStatement">cite</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&#34;fn&#34;</span><span class="synIdentifier">&#62;</span>名前<span class="synIdentifier">&#60;/</span><span class="synStatement">cite</span><span class="synIdentifier">&#62;</span> <span class="synIdentifier">&#60;</span><span class="synStatement">span</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&#34;says&#34;</span><span class="synIdentifier">&#62;</span>より:<span class="synIdentifier">&#60;/</span><span class="synStatement">span</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;/</span><span class="synStatement">div</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&#34;comment-meta commentmetadata&#34;</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">a</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">&#34;http://localhost/blog/memo/246.html/comment-page-1#comment-2&#34;</span><span class="synIdentifier">&#62;</span>
<span class="synUnderlined">2011年7月31日 8:36 PM</span><span class="synIdentifier">&#60;/</span><span class="synStatement">a</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;/</span><span class="synStatement">div</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">p</span><span class="synIdentifier">&#62;</span>コメント本文<span class="synIdentifier">&#60;/</span><span class="synStatement">p</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&#34;reply&#34;</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">a</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">'comment-reply-link'</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">'/blog/memo/246.html?replytocom=2#respond'</span><span class="synIdentifier"> </span><span class="synSpecial">onclick='</span><span class="synStatement">return</span><span class="synSpecial"> addComment.moveForm</span>(<span class="synConstant">&#34;div-comment-2&#34;</span><span class="synSpecial">, </span><span class="synConstant">&#34;2&#34;</span><span class="synSpecial">, </span><span class="synConstant">&#34;respond&#34;</span><span class="synSpecial">, </span><span class="synConstant">&#34;246&#34;</span>)<span class="synSpecial">'</span><span class="synIdentifier">&#62;</span><span class="synUnderlined">返信</span><span class="synIdentifier">&#60;/</span><span class="synStatement">a</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;/</span><span class="synStatement">div</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;/</span><span class="synStatement">div</span><span class="synIdentifier">&#62;</span>
</pre>

<p>このHTMLを図にすると下図のようになる<br><a href="http://f.hatena.ne.jp/appakumaturi/20110816212615" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/appakumaturi/20110816/20110816212615.png" alt="f:id:appakumaturi:20110816212615p:image" title="f:id:appakumaturi:20110816212615p:image" class="hatena-fotolife"></a><br><br>引数によってliをdivにする('style=div'）などの変更はできるが、名前をコメント本文の後に持ってくるなどの変更は引数では指定できないので、細かく変えたい場合はfunctions.phpを使う。<br></p>
<h4>functions.phpに出力コードをコピー</h4>
<p>wp_list_comments()の出力内容が記述してあるstart_el()メソッドの最初の方に下記のようなコードがある</p>
<pre>
if ( !empty($args&#91;&#39;callback&#39;]) ) {
  call_user_func($args&#91;&#39;callback&#39;], $comment, $args, $depth);
  return;
}
</pre>

<p>wp_list_comments()にcallback関数が設定してあれば、callback関数の方を実行してメソッドを抜ける感じの内容っぽい。<br>なのでwp_list_comments()の引数にcallback関数を設定して、functions.phpにcallback関数の内容を書きます。<br></p>
<h5>wp_list_comments()にcallback関数を設定</h5>
<p>comments.phpのwp_list_comments()の引数を書き換える。関数名は任意に考えてよい。</p>
<pre class="syntax-highlight">
<span class="synSpecial">&#60;?php</span> wp_list_comments<span class="synSpecial">(</span>'<span class="synConstant">type=comment&#38;callback=関数名</span>'<span class="synSpecial">)</span>; <span class="synSpecial">?&#62;</span>
</pre>
<br>
<p>functions.phpに関数を作り、start_el()のcallback読み込み以降のコード（$GLOBALS['comment'] = $comment;からメソッドの終わりまで）をコピーする。<br>関数名はwp_list_comments()で指定したものと同じにする。</p>
<pre>
function 関数名($comment, $args, $depth){
  $GLOBALS&#91;&#39;comment&#39;] = $comment;
  extract($args, EXTR_SKIP);
  （略）
  &#60;/div&#62;
  &#60;?php endif; ?&#62;
}
</pre>
<br>
<h4>callback関数を改造</h4>
<p>あとはfunctions.phpにコピーしたコードを好みに合わせて改造すればよい。</p>
<h5>投稿者名表示部</h5>
<pre>
&#60;div class=&#34;comment-author vcard&#34;&#62;
&#60;?php if ($args&#91;&#39;avatar_size&#39;] != 0) echo get_avatar( $comment, $args&#91;&#39;avatar_size&#39;] ); ?&#62;
&#60;?php printf(__(&#39;&#60;cite class=&#34;fn&#34;&#62;%s&#60;/cite&#62; &#60;span class=&#34;says&#34;&#62;says:&#60;/span&#62;&#39;), get_comment_author_link()) ?&#62;
&#60;/div&#62;
</pre>

<p>div内1行目でアバターの処理、2行目で投稿者名を表示している。<br>「%s」が投稿者名、「says:」の部分は日本語環境だと「より：」にあたる。</p>
<h5>承認待ち時表示部</h5>
<pre class="syntax-highlight">
<span class="synSpecial">&#60;?php</span> <span class="synStatement">if</span> <span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">comment</span><span class="synType">-&#62;</span>comment_approved <span class="synStatement">==</span> '<span class="synConstant">0</span>'<span class="synSpecial">)</span> <span class="synStatement">:</span> <span class="synSpecial">?&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">em</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&#34;comment-awaiting-moderation&#34;</span><span class="synIdentifier">&#62;</span><span class="synSpecial">&#60;?php</span> _e<span class="synSpecial">(</span>'<span class="synConstant">Your comment is awaiting moderation.</span>'<span class="synSpecial">)</span> <span class="synSpecial">?&#62;</span><span class="synIdentifier">&#60;/</span><span class="synStatement">em</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">br</span><span class="synIdentifier"> /&#62;</span>
<span class="synSpecial">&#60;?php</span> <span class="synStatement">endif</span>; <span class="synSpecial">?&#62;</span>
</pre>

<p>コメントの承認待ち時に表示される部分。<br>comment_approvedにはコメントの承認状態が記録されている（DBのwp_commentsテーブルのフィールド）これが"0"だと承認待ち、"1"だと承認済みになる。（参照：<a href="http://wpdocs.sourceforge.jp/%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E6%A6%82%E8%A6%81#Table:_wp_comments" target="_blank">データベース構造 - WordPress Codex 日本語版</a>）<br>承認待ちの場合、承認待ちである旨のメッセージ（Your comment is awaiting moderation.）を表示する。</p>
<h5>投稿日時表示部</h5>
<pre class="syntax-highlight">
<span class="synIdentifier">&#60;</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&#34;comment-meta commentmetadata&#34;</span><span class="synIdentifier">&#62;&#60;</span><span class="synStatement">a</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">&#34;</span><span class="synSpecial">&#60;?php</span> <span class="synPreProc">echo</span> <span class="synIdentifier">htmlspecialchars</span><span class="synSpecial">(</span> get_comment_link<span class="synSpecial">(</span> <span class="synStatement">$</span><span class="synIdentifier">comment</span><span class="synType">-&#62;</span>comment_ID <span class="synSpecial">)</span> <span class="synSpecial">)</span> <span class="synSpecial">?&#62;</span><span class="synConstant">&#34;</span><span class="synIdentifier">&#62;</span>
<span class="synSpecial">&#60;?php</span> <span class="synComment">/* translators: 1: date, 2: time */</span>
<span class="synIdentifier">printf</span><span class="synSpecial">(</span> __<span class="synSpecial">(</span>'<span class="synConstant">%1$s at %2$s</span>'<span class="synSpecial">)</span>, get_comment_date<span class="synSpecial">()</span>,  get_comment_time<span class="synSpecial">())</span> <span class="synSpecial">?&#62;</span><span class="synIdentifier">&#60;/</span><span class="synStatement">a</span><span class="synIdentifier">&#62;</span><span class="synSpecial">&#60;?php</span> edit_comment_link<span class="synSpecial">(</span>__<span class="synSpecial">(</span>'<span class="synConstant">(Edit)</span>'<span class="synSpecial">)</span>,'<span class="synConstant">&#38;#160;&#38;#160;</span>','' <span class="synSpecial">)</span>; <span class="synSpecial">?&#62;</span>
<span class="synIdentifier">&#60;/</span><span class="synStatement">div</span><span class="synIdentifier">&#62;</span>
</pre>

<p>投稿日時を表示してコメントのパーマリンクをしている。<br>「%1$s」が投稿日時（get_comment_date()）、「%2$s」が投稿時間（get_comment_time()）になる。<br>デフォルトだと「2011年7月31日 11:36 PM」と表示されるが、書式を変更したい場合は各関数の引数に書式を指定する（参照：<a href="http://wpdocs.sourceforge.jp/Formatting_Date_and_Time" target="_blank">日付と時刻の書式 - WordPress Codex 日本語版</a>）<br>編集権限がある場合のみedit_comment_link()によりコメント編集リンクが出力される（(Edit)）</p>
</div>
]]></content:encoded>
<dc:creator>appakumaturi</dc:creator>
<dc:date>2011-08-16T23:28:08+09:00</dc:date>
<dc:subject>WordPress</dc:subject>
</item>
</rdf:RDF>

