<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>Ghostpia</title>
    <link rel="alternate" type="text/html" href="http://ghostpia.com/" />
    <link rel="self" type="application/atom+xml" href="http://ghostpia.com/atom.xml" />
    <id>tag:ghostpia.com,2010-04-07://5</id>
    <updated></updated>
    <subtitle>WEBデザインの事とか。日記とか。</subtitle>
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type Pro 5.02</generator>

<entry>
    <title>Tumblrのポストをサイトに表示する方法 - Weblog</title>
    <link rel="alternate" type="text/html" href="http://ghostpia.com/weblog/2010/09/04-21:41.html" />
    <id>tag:ghostpia.com,2010:/weblog//1.432</id>

    <published>2010-09-04T12:41:19Z</published>
    <updated>2010-09-04T15:36:08Z</updated>

    <summary>Tumblr公式が提供してくれてるスクリプトによる一番簡単な方法を。強調部分は自...</summary>
    <author>
        <name>ethertank(幽)</name>
        <uri>http://ghostpia.com/</uri>
    </author>
    
        <category term="JavaScript" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="tumblr" label="tumblr" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://ghostpia.com/weblog/">
        <![CDATA[<p><a href="http://www.tumblr.com/goodies#second" title="Goodies | Tumblr">Tumblr公式が提供してくれてるスクリプト</a>による一番簡単な方法を。強調部分は自分のTumblrのモノに書き換えて使う。</p>

<pre><code>&lt;script src="http://<strong style="color: red;">yourtumblr-id</strong>.tumblr.com/js"&gt;&lt;/script&gt;</code></pre>

<p>上記をHTML内の表示させたい箇所に記述する。olでマークアップされた10件分のポストが表示される。画像は MAX 500px のものが表示されちゃうけど、吐かれるソース内の img には幸い height / width 属性 は指定されていないので、

</p><pre><code>.tumblr_photo_post img { width: 100%; /* 任意の絶対値でも可 */ }</code></pre>

などとスタイル指定すれば、少なくともPCブラウザでは問題なく表示されるはず。

<p>順序リストの番号も多くの場合は邪魔だと思うので、

</p><pre><code>.tumblr_post {
  list-style: none;
  padding: 0px;
  margin: 0 0 1em;
  /* 余白とマージンは任意の値でOK */
} </code></pre>

辺りも必要かも。

<p>下記のHTMLファイルをサーバーにアップロードして、親ページからこれをインラインフレームで読み込むのも有りかも。</p>

<pre><code>&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8" /&gt;&lt;title&gt;Tumblr&lt;/title&gt;

&lt;style&gt;/*任意のスタイル*/&lt;/style&gt;

&lt;/head&gt;&lt;body&gt;

&lt;script src="http://<strong style="color: red;">yourtumblr-id</strong>.tumblr.com/js"&gt;&lt;/script&gt;

&lt;/body&gt;&lt;/html&gt;</code></pre>

<p>但し上記のスクリプトを使う方法だと、読み込む記事の種類を限定したり、件数を増減したり出来ない。</p>

]]>
        <![CDATA[<hr />

<p>より細かい設定を望む場合は、別途用意された<a href="http://www.tumblr.com/docs/ja/api" title="API | Tumblr">API</a>を使う。json形式で読み込めるものとxml形式のものがあり、読み込むスクリプトのsrcの値の末尾に決められた<strong style="color:blue;">パラメータ</strong>を記述すれば、読み込む範囲、読み込む記事数（一度に50件まで）、特定タグが付けられたPOSTのみの抽出などが可能。</p>

<p>以下はjson形式を用い、photoタイプのエントリーの最新５０件を簡素なHTMLで書き出す例。（スクリプトはうん子。）</p>

<pre><code>&lt;!DOCTYPE html&gt;&lt;html lang="ja"&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;<br />&lt;title&gt;Tumblrの最新のポスト(Photoタイプのみ)の50件分のリンク付きサムネイルを表示するテスト&lt;/title&gt;<br />&lt;style&gt;<br />body { font-size:0.9em; background:#946372; color:#fff; font-family:Meiryo,sans-serif; }<br />a:link,a:visited{color:#fff} a:hover,a:active { color:#ccf; }<br />a img { border:4px solid; margin:4px; vertical-align:middle; -moz-box-shadow:0 2px 3px 1px #000;webkit-box-shadow:0 2px 3px 1px #000; box-shadow:0 2px 3px 1px #000; }<br />section { display:block; }<br />&lt;/style&gt;<br /><br />&lt;script src="http://<strong style="color: red;">yourtumblr-id</strong>.tumblr.com/api/read/json<strong style="color:blue;">?start=0&amp;amp;num=50&amp;amp;type=photo</strong>"&gt;&lt;/script&gt;<br /><br />&lt;/head&gt;&lt;body&gt;<br /><br />&lt;h1&gt;Tumblrの最新の "Photoポスト" 50件分のリンクとかを表示するテスト&lt;/h1&gt;<br /><br />&lt;script&gt;<br />var<br />    d = document,<br />    tStart = 0,<br />    tNum = tumblr_api_read["posts"].length ;<br /><br />for ( i = tStart; i &lt;= tNum; i++ ){	<br />    var pl =tumblr_api_read["posts"][i]["photo-url-250"];<br />    d.writeln( '&lt;a href="' + tumblr_api_read["posts"][i].url + '"&gt;&lt;img src="' + pl +'" /&gt;&lt;/a&gt;' );<br />};<br />&lt;/script&gt;<br /><br />&lt;/body&gt;&lt;/html&gt;</code></pre>

<ul>
 <li><a href="http://ethertank.tumblr.com/api-test-03" title="Tumblrの最新のポスト(Photoタイプのみ)の50件分のリンク付きサムネイルを表示するテスト">DEMO（※URL変更や削除の可能性あり。）</a></li>
</ul>

<p>ブログパーツとして表示する以外に、特殊なビューワーなどのアプリケーションを作成する事も可能。<br />
投稿の為のAPIも用意されている。</p>

<hr />

<aside>
<p>Tumblrのサイト自体が日本語じゃないので英語アレルギーの人はとっつきにくかったり、引用に抵抗があったりする人もいるのかな。周りにはあんまりTumblr自体やってる人がいない。面白いのに(･ω･)<br />
・・・まぁ、別に友達と「リブログ！リブログ！(・∀・)」とか騒ぎながらやる様なモノでもないとは思うけど（笑）</p>
</aside>]]>
    </content>
</entry>

<entry>
    <title><![CDATA[Safari&reg;5入れてみた]]> - Weblog</title>
    <link rel="alternate" type="text/html" href="http://ghostpia.com/weblog/2010/06/08-20:06.html" />
    <id>tag:ghostpia.com,2010:/weblog//1.418</id>

    <published>2010-06-08T11:06:05Z</published>
    <updated>2010-06-10T12:46:09Z</updated>

    <summary>2010年06月07日、WEBブラウザ「Safari5」がリリースされた。 あま...</summary>
    <author>
        <name>ethertank(幽)</name>
        <uri>http://ghostpia.com/</uri>
    </author>
    
        <category term="Browser" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="boxshadow" label="box-shadow" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="extension" label="Extension" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="safari" label="Safari" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://ghostpia.com/weblog/">
        <![CDATA[<p><time datetime="2010-06-07">2010年06月07日</time>、WEBブラウザ「Safari5」がリリースされた。<br />
あまり一般的には認知されていない感もあるが、Safari3からはWindows版も用意されている。以前と同じく英語版のみからの試験的リリースかと思いきや、インストールしてみると既に日本語化されていた。</p>
]]>
        <![CDATA[<p><strong>Windows版を</strong>実際に使用してみた感じでは、取り敢えずまだ動作が重い。前バージョンよりは若干軽いと云う印象。</p>

<p>CSS3に関しては、「<code>box-shadow</code>」の「<code>inset</code>」値に対応してくれていたのが嬉しい。ここでもIEを除く主用ブラウザで足並みが揃った形。</p>

<p>ウェブフォントに関しては、指定フォント読み込みまでの間、代替フォントを表示してくれない。現行版のOperaと共通の挙動。<br />
（この表示の遅延の問題をクリアしていると謳う「<a href="http://code.google.com/apis/webfonts/" title="Google Font API - Google Code">Google Font API</a>」を利用したWEBページでも同様の結果だった。こちらは直ぐにアップデートしてくれそう。）</p>

<p>「<a href="http://www.apple.com/safari/whats-new.html" title="Apple - Safari - See the new features in Safari for Mac and PC.">Apple - Safari - See the new features in Safari for Mac and PC.</a>」を見れば開発者向けの変更点が羅列されている。HTML5へのサポートがより強化されている。</p>

<p>今回のメジャーバージョンアップでの最大の目玉は、「ブラウザ拡張機能（Extension。FirefoxではAdd-onと呼称される。）」の追加か。一般の中・上級ユーザーの使用感に関わってくる部分なので、普及率に影響を与えそう。Safariと同じく「Webkit」を搭載している「Google Chrome」では早い段階からエクステンションに対応していたので、この点では本家が追従した型に。</p>

<p>但し。「あいほ～ん」のアプリはAppleの厳しい認証をクリアして初めて登録されると云う閉ざされた世界で、ある種の宗教的な認証基準に関して批判があった。Safariの拡張機能にもAppleによるデジタル認証が必要との事で、あいほ～んの二の轍を踏むのではないかとの云う懸念も。<br />
自身のブランドやユーザーの安全を守る為にねずみ返し的なモノが必要なのは理解出来るので、Appleとしても難しいところだろうなとは思う。</p>

<p>リーダビリティに特化した「Safari Reader」も搭載されている。広告や装飾を省いてウェブページを閲覧出来る機能のようだ（未確認）。</p>

<p>その他にも、様々な新機能が追加されている。<br />
ダウンロードは以下のリンクから可能。</p>

<ul>
<li><a href="http://www.apple.com/safari/download/" title="Apple - Safari - Download the world's most innovative browser.">Apple - Safari - Download the world's most innovative browser.</a></li>
</ul>

<ins datetime="2010-06-10">
<p>※追記：<em>先日Safari5が重かったのはバックグラウンドでMicrosoft Updateが動いてたからかも。今は割りと軽い。４より遥かに速い。</em></p>
</ins>]]>
    </content>
</entry>

<entry>
    <title>『Witches&apos; Loaves』 - Weblog</title>
    <link rel="alternate" type="text/html" href="http://ghostpia.com/weblog/2010/06/04-19:49.html" />
    <id>tag:ghostpia.com,2010:/weblog//1.417</id>

    <published>2010-06-04T10:49:32Z</published>
    <updated>2010-06-04T11:10:09Z</updated>

    <summary>O・ヘンリーの作品に『Witches&apos; Loaves』と云う短編がある。...</summary>
    <author>
        <name>ethertank(幽)</name>
        <uri>http://ghostpia.com/</uri>
    </author>
    
        <category term="政治・社会" scheme="http://www.sixapart.com/ns/types#category" />
    
    <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://ghostpia.com/weblog/">
        <![CDATA[<p>O・ヘンリーの作品に『Witches' Loaves』と云う短編がある。</p>]]>
        <![CDATA[<p>小学生の頃、給食の時間に「お昼の放送」ってのが有って（何処の小学校でも有るものなのかな？）、短編小説の音読とか、当時流行ってたポップスのカセットテープなんかが流れてた。<br />
５インチのフロッピーディスクが流通してた時代・・・。</p>

<p>------その中で一番記憶に残っているのが『Witches' Loaves』。<br />
「魔女のパン」若しくは「善女のパン」でググれば、なんやかんやと出る。</p>

<p>正直、あんまり気分の良い話じゃなかった。<br />
パン屋で働く女性と、そこに客としてくる画家と思しき男性の話。</p>

<p style="margin-bottom:1000px;">※以下は当時自分が受けた良くない印象と、拭いきれ無い主観を含むであろう、大体のあらすじです。詳細な描写も当時聴かされた「お昼の放送」と同じく意図して省いています。ネタバレも有り。</p>

<p><i>パン屋を営むマーサはいつも来る興味深い男性客の事を、その風貌や所作から「まだ世に認められていない才能を持つ貧しい画家」と思い込み、好意を寄せる。金銭的な支援を申し出たいけど失礼に当たるかもしれない。彼がいつも買っていくコッペパンに、バターを入れてあげたら喜んでくれるかも知れない。これくらいなら彼のプライドを傷つける事は無いだろうし、自分が抱く好意にも気付いてもらえるかも知れない。彼女は実行する。喜んでくれるかなと楽しみにしていたマーサの元に鬼の形相の男性客が現れ、彼女を怒鳴り散らす。実は彼は設計士で、パンはよく消える消しゴムとして使っていた。ペン入れの後に、鉛筆で描いた下書きを消そうとして使ったパンにバターが入っていて、設計図が台無しになってしまったのだ。</i><br />
～おわり～</p>

<p>・・・と云う話。</p>

<figure>(´・  ω   ・｀)</figure>

<p>・・・最初に原作を読めば随分と全く印象は違っただろうなとは思う。実際、原作はシニカルな点では同じなのだけれども、もっと描写が細やかで、そこはかと無く諧謔性もあったりして、そこまで絶望的な印象も受けない。<br />
しかし、<em>忌まわしき「お昼の放送」</em>では、出典も読まれずに淡々と始まり、ラストシーンでの男性客は「禿のズラを被ってカミナリ親父を演じる加藤茶」より激しいキレっぷりで、しかも棘々しい（おどろおどろしい）音効付きで、かなり救いの無い雰囲気の漂う仕上がりだった。</p>

<p>しかも小学１年生から６年生までの間に、数十回は聴かされた筈。異常なヘビーローテーションだった。この話に対して教員のフォローなんて一度も無かった。はっきり言って嫌がらせ以外の何物でもない。</p>

<p>道徳の授業とかで一度だけ取り上げるならまだ分かるんだけど。幼い自分には「いやな話だなぁ」とか「またこれか～」と思う事しか出来なかった。教員を集めて抗議！・・・なんて発想もなく、同級生と<br />
「あの話、キモいよねー(´・ω・)」<br />
「キモイねー(・ω・｀)」<br />
・・・なんて遣り取りをする事さえ無かった。<br />
凡庸な自分が嫌になる。</p>

<aside>
<p>（ちなみに他には『羅生門』もよく流れていた。<q>脱兎の如く走り去る</q>下人を演ずる声優は、やはり病的なテンションだった。）</p>
</aside>

<p>原作では、彼女の親切心も下心も割とはっきり描かれている。「下心」の部分でマーサに同情しない人もいるとは思う。建築士はコンペの締め切りに間に合わなくなった訳だし。</p>

<p>だけど、それでも。<br />
マーサを「おせっかいな女」と評するだけで済ませてしまう人とは、多分あんまり仲良くなれないだろうなぁ。<br />
今でも。</p>

<p>別に作者のヘンリーさんに恨みは無いよ。凄い人だと思う。<br />
有名ドコロでは他に『最後の一葉』とかも書いてる方。<br />
ただ、「お昼の放送」で使われてたカセットがアレだったのと、それをヘビロテさせる学校がキモかっただけ。</p>

<hr />

<p>「コンタんトコのアンヤの行っちょる小学校でも何こそ教えちょっか分からんじやー！」</p>

<figure>(n'∀')η</figure>]]>
    </content>
</entry>

<entry>
    <title>国民が聞く耳を持たなくなった - Weblog</title>
    <link rel="alternate" type="text/html" href="http://ghostpia.com/weblog/2010/06/03-07:51.html" />
    <id>tag:ghostpia.com,2010:/weblog//1.416</id>

    <published>2010-06-02T22:51:38Z</published>
    <updated>2010-06-02T23:58:59Z</updated>

    <summary> ただ残念なことにそのような私たち政権与党のしっかりとした仕事が必ずしも国民の心...</summary>
    <author>
        <name>ethertank(幽)</name>
        <uri>http://ghostpia.com/</uri>
    </author>
    
        <category term="政治・社会" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://ghostpia.com/weblog/">
        <![CDATA[<figure>

<blockquote>ただ残念なことにそのような私たち政権与党のしっかりとした仕事が必ずしも国民の心に映っていない。<mark>国民が徐々に徐々に聞く耳を持たなくなってきてしまった</mark>。その事は残念でなりませんし、まさにそれは私の不徳の致すところと、そのように思っている。</blockquote>
<figcaption><cite>民主党両院議員総会 loopy Japanese Prime Minister Yukio Hatoyama 退任表明</cite></figcaption>

</figure>

<p>昨日辞意を表明した鳩山氏の弁。さらっと国民のせいにするその発言には、やはり耳を疑わざるを得なかった・・・。<br />
日本語の不自由な彼が表現を誤っただけなのかもしれない。しかし氏の発言に対し党内から特に批判や意見が挙がっていないところを見ると、民主党内全てが同レベルの認識なのだと思われても仕方ないだろう。</p>

<p>本来自戒の為の言葉である筈の「初心に戻る」を、許しを乞う為に使い続けた鳩山氏。しかし実質的には「ふりだしに戻る」だった。沖縄・日本政府・アメリカ政府が長い期間をかけて探り続けた妥協点を否定し、もう一度最初から洗い直すポーズだけ見せて、結局、「ダメでした」。</p>

<p>ワシントンポスト誌はその迷走を2010年4月14日付の紙面のコラム上で "loopy"と揶揄。鳩山の不可解な言動は、自身の評価のみならず、日米関の信頼関係にも影を落とした。（参考URL : <a href="http://www.washingtonpost.com/wp-dyn/content/article/2010/04/13/AR2010041304461.html?sub=AR" title="Al Kamen - Among leaders at summit, Hu's first">Al Kamen - Among leaders at summit, Hu's first</a>）</p>


<p>先日、<em>赤松農相の外遊中に農相代理を務めていた福島瑞穂氏</em>を連立ごと切り落としたのも、表向きの理由とは異なり、これからじわじわと沸き起こるであろう口蹄疫に関する福島氏への責任追求を鎮火させつつ、民主党自身への飛び火を回避する為の寸劇の様に、少なくとも自分の目には映った。考えすぎだろうか。</p>
]]>
        <![CDATA[
<p>「５月以内に」の間の迷走によって多くの国費が<strong>無駄に</strong>消費された事だろう。そして、沖縄県民に対して無駄に期待を抱かせた事によって、今後の感情論が強まり、反対論者の冷静な認識にもノイズが混じる事になる。傷は浅くない。より長い期間、多くの人にジクジクと生傷の痛みを残す結果になった。</p>

<p>以前、政治資金で不動産を購入し、これに関する報道を名誉毀損であるとして、<strong>講談社やジャーナリストを訴え敗訴した民主党の小沢</strong>氏。</p>

<p>汚沢氏は米軍基地問題に関する日米合意直後の平成17年11月28日に、沖縄県の宜野座村で約5200平方メートルの土地を購入している。値上がり後の転売を目論での事だったのではないかと疑われても仕方ないだろう。今回の辞任の直接的な理由である西松問題以外にも、彼の歴史は汚いカネの問題で覆われている。</p>

<hr />

<p>動機や体裁はともかく、小沢と鳩山はそのポストを捨てた。</p>

<p>しかし果たして、両者が退けば何かが解決するのだろうか。不利が予想される選挙を前にして小沢から鳩山へ頭だけをすげ替える手法は、昨年の総選挙前にも行われている。明らかな票集めの為のパフォーマンスでしかない。<br />
選挙での大勝後、何事も無かったかのように鳩山が小沢を幹事長に任命したのもその証左だ。</p>

<p>子ども手当ては「日本で働く両親」を対象に、国籍に関わらず支給されている。子ども手当ての名の下に、日本人の収めた税金を外国に流出させた鳩山。かつて日本の右翼団体になりすまして日の丸を掲げながら中国領事館に街宣車で突っ込んだ「日本皇民党」なる反日組織の幹部（在日韓国人）やその仲間たちの家庭にも、日本人の税金は「友愛」の名の下に、子ども手当としてバラ撒かれているのだろうか・・・。</p>

<p>口蹄疫や豚インフルエンザなどの発生で中断されていた韓国からの日本向け豚肉輸出を、総選挙での大勝直後の2009年9月より解禁した民主党。一ヶ月後の2009年10月には宮崎牛の冷凍精子1300本が盗難にあっている。これらは一朝一夕で作れる品質のものでは無い。長い年月を改良されてきたもの。</p>

<p>・・・かつてレッドパールと云う日本の苺の苗床（種子？）が韓国に流出した事がある。正規に苗床を購入した韓国の農家はたった一軒だけであるにも関わらず、現在韓国で栽培・販売されている苺の多くは、レッドパールだそうだ。正規に購入した一軒の農家以外は、ライセンス料を支払っていない。そして韓国政府もこれを容認している。韓国と云う国家による窃盗と呼んで差し支えないだろう。</p>

<p>仮に「諸外国」による和牛ブランドの盗難疑惑が持ち上がったとしても、異様なまでの「親アジア」を示す民主党が彼等を捜査対象から除く事は想像に容易い。</p>

<p>現在の法曹である民主党の千葉景子氏が死刑を一件たりとも執行していない事からも見て取れる事。日本人拉致犯シンガンスの釈放単願書にも民主党議員の署名が最も多く連なり、その中には千葉景子、菅直人らの名もあった。彼等の下では、司法も刑法もまともに機能しない。</p>

<p>かつて民主党の菅直人氏は、O-157の発生を無関係なカイワレ業者の責任とし、結果として多くの農家を倒産・破産に追いやり、自殺者まで出した事があった。<br />
今回の口蹄疫問題では、誰がスケープゴートに仕立て上げられるのだろうか。<br />
口蹄疫発生後から充分な行動を続けていた東国原知事の責任を追求しようとする取材陣の言動を知ると、事後（業者の方の自殺後）に安全性アピールの為に笑顔でカイワレにしゃぶりついたカン氏の見苦しいパフォーマンスが脳裏に浮かぶ。</p>

<p>中央畜産会を仕分けし、口蹄疫対策を後手回らせる原因を作ったとされる、民主党の蓮舫氏。<br />
海外でも評価の高い日本国内のソフト産業の求心力として期待された「国立メディア芸術総合センター」も「国営マンガ喫茶」と揶揄され、仕分けの対象となった。</p>

<p>民主党は日本が特に力を入れて開発していたスーパーコンピューターをも仕分けの対象にしようと目論んだ。</p>

<p>宇宙開発予算も仕分け対象とされた。しかし、有ろう事か今日まで日本の首相であった<em>loopy Japanese Prime Minister Yukio Hatoyama</em>は「日本は有人宇宙船やらないのか？」と平気で発言していた。予算を大幅に削減した民主党の長たる者自身の言として、そして宇宙開発戦略本部本部長を努める者との発言として、凡そ理解出来る範疇を超えていた。</p>

<p>2010年10月8日、独立行政法人「水産総合研究センター」は世界で初めてウナギの完全養殖に成功した。しかし彼等も民主党によって事業仕分けが検討されている。現在国内で流通するウナギの多くは中国産であり、この仕分けについて、「日本にウナギを輸出したい中国と商業的な協力関係を持つ者による妨害ではないか」と云う意見もある。正確なところについては不明だが、民主党の行動はやはりこの様に疑われても仕方の無いものだと云う点については間違いない。</p>

<p>幼い我が子のソフトウェア違法コピーを悪びれもせず公にしてしまう程度の知識・良識しか持ち合わせない蓮舫氏を主導者として導き出された仕分け対象は、日本の先端技術を潰すモノばかりだった。</p>

<hr />

<p>既知の問題を少し抜き出しただけでもこの有様だ。ここには新事実なんて一つもない。彼等のデタラメな行動に期待出来ない事は誰の目にも明らかな筈なのに。もしかするとテレビのみを情報源にしている人には、まったく違った景色が見えているのだろうか。</p>

<p>係る行為を目の当たりにしても、沖縄の（特に中高年の）方々は社民党を信じ、民主党を信じ、時期が来れば「騙された」と騒ぎ出すのだろうか。正直、もっと早い段階で彼等の根本的な姿勢をよく観察すれば、与えられた選択肢の中から最善のものを選び出せる筈なのに、と思う。基地に対する想いは、自分には測り切る事は無理だけど・・・、それでも。</p>

<p>上向かない生活を前に事業仕分けに一定の評価を下す方は、自分と遠からぬ位置にも少数だがいらっしゃった。「これまで誰もやらなかった事だ」、と。<br />
しかし実情は、世界的に評価されている事業を潰し国益を損ね、近い未来の自分や子供達に負担を強いるものだった。これまでの過程を見ても、彼等の評価は変わらないのだろうか。近い内に、もう一度伺ってみようと思う。</p>

<hr />

<p>自民党の石破氏はつい先日ネット上で、「ここで試されているのは自民党だ」と云う旨の発言をしている。党内からこういった発言が出る事は自浄作用の顕れと見ていいかも知れない。</p>

<p>票の為に甘言を振りまくの事も必要悪だろう。議席が無ければ何も出来ないのは分かる。問題はその先に何があるかであって。</p>

<p>・・・しかし民主党のソレは、詐欺と呼んで差し支えないものだ。マニフェストの時点で公開されたモノと実際のモノ（政策集iNDEX2009）との間に乖離があった。<br />
民主党政権が長く続けば、日本は国家としての機能を失ってしまう。</p>

<p>他の政党には、出来ればあまり言葉を選び過ぎずに、可能な限り真意を伝えて欲しいものだ。</p>

<aside>
<p>（支持してる訳じゃないからあまり言いたくは無いが、正直この辺りの点については民主党より日本共産党の方が随分清潔なものに見える。民主みたいにこっそり何かを企んでるわけではなく、あまりイメージの良くない「共産」の看板を掲げ、意見が割れそうな政治思想も随分全面に出してる点では。）</p>
</aside>

<hr />

<p>自民党には「消去法で自民」以外の選択肢を与えてくれる事を願うばかりだ。</p>]]>
    </content>
</entry>

<entry>
    <title>CSSのセレクタの記述方法の違いに纏わるアレコレ - Weblog</title>
    <link rel="alternate" type="text/html" href="http://ghostpia.com/weblog/2010/05/20-23:51.html" />
    <id>tag:ghostpia.com,2010:/weblog//1.415</id>

    <published>2010-05-20T14:51:47Z</published>
    <updated>2010-05-23T17:12:24Z</updated>

    <summary>CSSの記述法の違いによるパフォーマンスの違いや、それに纏わるソースの更新性や視...</summary>
    <author>
        <name>ethertank(幽)</name>
        <uri>http://ghostpia.com/</uri>
    </author>
    
        <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://ghostpia.com/weblog/">
        <![CDATA[<p>CSSの記述法の違いによるパフォーマンスの違いや、それに纏わるソースの更新性や視認性の問題に関する話題がちょっとホットになってるっぽい。随分前にこの話題は先駆者達の手によって一度完結してたように見えるんだけど、今また再燃してる。</p>

]]>
        <![CDATA[<p>実は自分もこの辺りがちょっと気になっていたのだけど、その理由は、XHTML2で登場した「<strong>h要素</strong>」に対するスタイリング絡みの問題。h要素はXHTML2の終焉 (HTML5への統合) とともに無くなったのだけれども、実はHTML5でもh要素は姿を変えて生きてると自分は解釈してて。「sectionタグが現れる度にその中の見出しをh1から始めてもいいんよー」って仕様。「アウトラインの階層で見出しのレベルを表現出来るよー」って話で、その場合、h1がXHTML2のh要素と同じ様な役割だなと。取り敢えずこの辺りは一先ず置いておいて、先ずは完結した話題から。</p>

<p>ブラウザにはディフォルトスタイルってものが予め指定されていて、それのお陰で順序リストには連番が表示されるし、段落タグは上下にマージンが勝手についてくれたりする。h1タグの内容は大きな文字で太字で表示されて、h2はそれよかちょっと小さい。引用文は斜体になってくれたり。CSSを書かなくても大体意味が通じる。でも細かくデザインをコントロールしたい場合や、ブラウザ毎の表示差異を無くしたい場合は大概邪魔になるので、現在の多くのCSSではディフォルトスタイルを消す必要がある。一つの方法として、全称セレクタを使用する方法がある。</p>

<figure>
<pre><code>* { margin:0; padding: 0; }</code></pre>
<figcaption>※全称セレクタを用いたマージンとパディングのリセット</figcaption>
</figure>

<p>アスタリクスは全ての要素を表すセレクタ。上記の様な記述によって全ての要素のマージンとパディングが消える。しかしこの方法を用いた場合、各ブラウザ毎に個性の強いフォーム絡みのスタイルまでリセットしてしまう事になる。特にsafariのbutton要素とかは元からかなり綺麗なので、是等のディフォルトスタイルを活用したい場合は全称セレクタを使用せず、是等以外のスタイルを個別に操作する方法が考えられる。</p>

<figure>
<pre><code>html,body { margin:0; paddhig:0; height: 100%; } 
html { overflow-y: scroll; }</code></pre>
<figcaption>※htmlとbodyのリセットの例</figcaption>
</figure>

<p>ちなみに上記はhtmlとbodyのマージンとパディングを初期化し、それぞれに背景画像を敷いた場合に起こる背景描画領域のブラウザ差異を無くし、縦に短いページでもfirefoxでスクロールバー表示領域を出現させて、縦長の同デザインページに移動した際のガタつきを無くす為のモノ。こんな感じでリセットを行えば、全称セレクタを用いた場合と異なり、他の要素には影響を与えないので、活かしたいデフォルトスタイルを残す事が出来る。仮にフォーム内要素に対して一度リセットを行い、その上で各ブラウザごとのデザインを活かしたスタイルを再度当てようとすると、各ブラウザに対して別のスタイルを適用させる必要が出るなど、ちょっと面倒な事になる。IE6なんかは&lt;input type="submit"&gt;&lt;/input&gt;に対して背景画像が指定出来なかったりするので、背景絡みのスタイルまでリセットしようモノなら後々、どうしようも無くなっちゃったり。</p>

<p>それでも何もかも全部リセットして、緻密にスタイル指定をしてる人もいる。この場合、一度リセットした値を再度上書きする過程がレンダリング時に必ず含まれる事になるので、ほんの僅かに描画が遅くなる気がしなくも無いけど、ミリ秒の世界の妖精さん達がちょっと頑張れば解決する話なので、「ここで速度について論じる必要は特に無い。だから、好きな方法でリセットすればいい。」って話でリセット時に関するレンダリングのパフォーマンスの話は何年も前に終わってる。</p>

<p style="width:60%;float:left">個人的に自分が気にしてるのは、最初に書いたHTML5での「<del>セクショニング</del><ins>アウトラインの入れ子構造</ins>で見出しレベルを表す」ようなHTMLを書いた時のスタイル指定方法。<br />
（ちなみにh要素が無くなってh1～h6が残ったのは多分、hgroup要素内でサブタイトルをマークアップする時にどうしてもh2～h6が必要になるからだと思ってるんだけど、真相は知らない。）<br />
例えばブログでよく有りそうな「entry」ってクラスを振ったarticle要素・・・「article.entry」ってものが有ったとして、内容物にも適切なセクショニングを<mark id="meizitekini"><sup>※1</sup>明示的に</mark>切り分け、セクショニングコンテンツ直下の見出しを全てh1でマークアップしたと仮定して。</p>

<aside style="width:30%;float:right;"><a href="#meizitekini">※1</a>  section等を使用しなくても、見出しを書けばその見出し自身と、対応する内容を内包するセクショニングがあると見做される事になってるらしい。ここでは見出しに対してsectionタグなどでセクショニングを明示してマークアップする場合に焦点を絞っての話をしてる。</aside>

<figure style="clear:both;">
<pre><code>.entry > h1,
.entry > header h1,
.entry > hgroup h1 {
  font-size: 2em;
  letter-spacing: 2px;
  background: url(mayomayo.jpg) no-repert left bottom;    
}</code></pre>
</figure>

<p>上記の様に書けば、html側でブログの各記事タイトルに対して「.entry-title」みたいなクラスを指定しなくても、同じ箇所にスタイルを指定出来る。同時により下層のセクショニングコンテンツやその内容に対しても同様の方法でスタイリングしていけば、少なくともHTML側はよりシンプルになるし、どっちかと云うと自分はHTML側がすっきりしている方が好み。なので、これを主軸に置いて<code>h1</code>や<code>section</code>にスタイルを当ててみたいと思ったんだけど、ただその場合、流石にマッチングコストを喰い過ぎてレンダリング速度に影響するんじゃないかと云う懸念が。ちなみにCSSセレクタに於けるマッチングコストについては以下の記事が大変参考になった。他の記事を拝見しても、かなり深い制作思想でコードを書いてる方っぽい。</p>

<ul>
<li><a href="http://simpleism.net/blog/2009/10/method-of-describing-high-performance-css" title="ハイパフォーマンスCSSの記述方法 : Weblog : SimpleIsm">ハイパフォーマンスCSSの記述方法 : Weblog : SimpleIsm</a></li>
</ul>

<p>通常は「心の隅に留めとく程度で良い話」って事で、方々で結論が付いてたし、自分も納得してたんだけど、今自分が考えてる方法の場合は流石に心の隅に留めて於いて良い話じゃない。仮に<del>セクショニング</del><ins>アウトライン</ins>の階層が旧来の見出しレベルと同じ６階層あるとし、それら全ての階層に別スタイルを当てる場合のコストが如何程のモノなのか気になってた訳で‥。モヤモヤしてたらまた素晴らしい記事が。</p>

<ul>
<li><a href="http://d.hatena.ne.jp/os0x/20100518/1274204934" title="CSSセレクタの高速化の話を検証 - 0xFF">CSSセレクタの高速化の話を検証 - 0xFF</a></li>
</ul>

<p>実測して下さってる。なんとタイムリーな・・。<br />
実測値を拝見する限り、やっぱり自分の妄想通りやるとかなり無理が来そう・・・。基準点のクラスを何層か毎に幾つか設けて、そこからせいぜい１～２階層くらいまでに収めたセレクタグループじゃないと使いものになりそうにないなぁ。残念。<br />
しかし、素晴らしい記事のお陰で無謀な事をしなくて良かったー、と言う事で。</p>

<figure>(。-∀-)</figure>

<hr />


<aside>

<p>もしかすると、HTML5で見出しからレベルが無くならなかったのは、hgroup要素内での使用に対する考慮だけじゃなくて、この辺の事も考えての事だったのかな。</p>

<p>関連性は薄いかもしれないけど、W3Cが例示してる「MathMLのデフォルトスタイル」も結構重そうな指定方法だった。MathML（数学マークアップランゲージ？）は昔から有ったけど、従来は表示する為にMathPlayerって名前のプラグインとかをブラウザに入れる必要が有った（らしい）。HTML5では普通に利用出来るようになるらしい。ちなみに（現在の）nightly buildのフォクすけちゃんにはこれとは随分違うスタイルが当たっていて、W3Cで例示されていたスタイルを適用したMathMLをnightryフォクすけちゃんで見ると、デフォルトスタイルと干渉しあい、崩れた。（特に平方根のマークが。かたや画像、かたやボーダー。）<p>

<p>まだMathMLのデフォルトスタイルを持っていない他のブラウザでの正式実装時に差異が有った場合なども考慮すると、borderやbackgroundなど、色々なプロパティに対する完全な初期化を噛ませた上でスタイリングするか、デフォルトスタイルが主要なブラウザに正式に載っかるのを待って、スタイル調整を施すか。もしくはスタイル指定しないか。指定せず、デフォルトスタイルに任せるなら、将来的にMathMLを利用したいと考えてるサイトでは、全称セレクタを利用したリセット方法は後々ネックになってくるかも。数式の所だけインラインフレームにするって手も有りそうではあるけども。HTML5のインラインフレームは何か面白い事になってるみたいだし。</p>

<p>なかなかお脳がとろける。先走り過ぎって思われるかも知れないけど、今しか出来ない体験だから、もうちょっと考えよう。（何れ仕様や実装が固まった後に優れた解法やら手法を誰かが作って公開してそれが普及してしまえば、それに頼り切って、考える機会を逸してしまうかも知れないし。）</p>

</aside>]]>
    </content>
</entry>

<entry>
    <title>すべてのものは二度つくられる - Weblog</title>
    <link rel="alternate" type="text/html" href="http://ghostpia.com/weblog/2010/05/20-19:48.html" />
    <id>tag:ghostpia.com,2010:/weblog//1.414</id>

    <published>2010-05-20T10:48:43Z</published>
    <updated>2010-05-23T17:14:27Z</updated>

    <summary> 「すべてのものは二度つくられる」 万物にはまず「第一の創造」（知的創造）があり...</summary>
    <author>
        <name>ethertank(幽)</name>
        <uri>http://ghostpia.com/</uri>
    </author>
    
        <category term="日常・他" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://ghostpia.com/weblog/">
        <![CDATA[<figure>
<blockquote>
<h1>「すべてのものは二度つくられる」</h1>
<p>万物にはまず「第一の創造」（知的創造）があり、それから「第二の創造」（物的創造）がある。</p>
<p>設計図にあたる「知的創造」で、本当に欲しい姿が描けているかどうかを確認しておかなければならない。前もって考えておくのである。それが出来て初めて、セメントや木材を使って形にしていける。</p>
</blockquote>
<figcaption>
<cite>『<a href="http://www.amazon.co.jp/gp/product/4906638066?ie=UTF8&amp;tag=ethertank-22&amp;linkCode=as2&amp;camp=247&amp;creative=1211&amp;creativeASIN=4906638066">7つの習慣 名言集</a><img src="http://www.assoc-amazon.jp/e/ir?t=ethertank-22&amp;l=as2&amp;o=9&amp;a=4906638066" width="1" height="1" alt="" style="border:none !important; margin:0px !important;" />
』</cite>より
</figcaption>
</figure>

<p>『七つの習慣　名言集』って本の一節。『七つの習慣』と云う名著からキーワードだけを抽出して再構築した感じの本。漠然とした不信感や、自分の無知ゆえに曲解してしまうのではないかと云う危惧から、遍く啓発本やビジネス本の類に全く手を出さない自分が初めて買ったそれ系の本。</p>

<p>何かを形にする時はその直前までに頭の中で既に作り進められてるって事で、ここまでは当たり前の事なんだけど。それを認識した上で、設計（知的創造）の部分をちゃんとしようぜって言ってる。「もの」も「つくられる」も平仮名で書いてあるのもポイントだわな。建築に例えてるけど、物質に限った話じゃない。</p>

<p>この一文をたまにでも思い出せば、設計段階を疎かにしなくなるかも。</p>

<p>自戒も込めて。</p>

<figure>(・ω・)</figure>]]>
        
    </content>
</entry>

<entry>
    <title>田口賢司『メロウ』 - Weblog</title>
    <link rel="alternate" type="text/html" href="http://ghostpia.com/weblog/2010/05/12-23:06.html" />
    <id>tag:ghostpia.com,2010:/weblog//1.413</id>

    <published>2010-05-12T14:06:01Z</published>
    <updated>2010-05-23T21:43:09Z</updated>

    <summary>HTML5の本と一緒に注文してて、今日届いた。田口賢司の『メロウ』。Amazon...</summary>
    <author>
        <name>ethertank(幽)</name>
        <uri>http://ghostpia.com/</uri>
    </author>
    
        <category term="日常・他" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://ghostpia.com/weblog/">
        <![CDATA[<p>HTML5の本と一緒に注文してて、今日届いた。田口賢司の『<a href="http://www.amazon.co.jp/gp/product/4103969024?ie=UTF8&amp;tag=ethertank-22&amp;linkCode=as2&amp;camp=247&amp;creative=1211&amp;creativeASIN=4103969024">メロウ</a><img src="http://www.assoc-amazon.jp/e/ir?t=ethertank-22&amp;l=as2&amp;o=9&amp;a=4103969024" width="1" height="1" alt="" style="border:none !important; margin:0px !important;" />』。Amazonマーケットプレイスで１円。・・・１円て。貧民としては安いのは結構だけど、何とも複雑な心境だ。</p>

<p>ちなみに、「Amazon １円」とかでググッてみると、１円でも商売が成り立つらしいって事がいろんな所に書いてある。ちなみに送料は固定３４０円なので、支払いは３４１円になる。）</p>

<aside style="float:left;width:250px;margin-right:20px;">
<img alt="mellow.jpg" src="http://ghostpia.com/weblog/images/blog/mellow.jpg" width="250" height="333" class="mt-image-none" style="" />
</aside>

<p>田口賢司さんは自分が高校の頃に傾倒した小説家。彼の文章は美しい。・・・健康的な美しさじゃないかも知れないし、登場人物のセリフは下品極まりないんだけども。</p>

<p>これまでに読んだのは３冊。『boy's don't cry』、『sentimental education』、『ラブリィ』。これまで彼についてはその美しい文体以外何も知らなかったんだけど、Wikipediaの記述（<a href="http://ja.wikipedia.org/wiki/%E7%94%B0%E5%8F%A3%E8%B3%A2%E5%8F%B8#" title="田口賢司 - Wikipedia">田口賢司 - Wikipedia</a>）を見て初めてどんな人か知った。『メロウ』が芥川賞候補作品であった事も。そして『メロウ』が最新作で、以降に作品が無い事も・・・。</p>

<p>この表紙は恐らく、プースカフェ（虹色カクテル）なんだろな。比重の違う数種類のリキュールをゆっくり注いで、タンブラーの中で層を作ったカクテル。一回呑んだことあるような、無いような。何れにしても、あんまり美味くなさそうな酒だよねｗ</p>

<p>・・・どうでもいいけど、何処かの作りかけブログデザインのヘッダーにも似ていなくもない気がするなぁ。</p>

<p class="clear">・・・理解してもらえないかも知れないけど、ちょっと読んじゃうのが勿体無い気もする。次回作があるなら別だけど。・・・死にそうなタイミングで読もうかな。</p>

<p>死にそうなタイミングって何だｗ<br />
今かｗｗ
</p>

<figure>(。-∀-)</figure>
]]>
        
    </content>
</entry>

<entry>
    <title>[FC2Blog]Sound_of_Silence_W - Weblog</title>
    <link rel="alternate" type="text/html" href="http://ghostpia.com/weblog/2010/05/12-20:12.html" />
    <id>tag:ghostpia.com,2010:/weblog//1.412</id>

    <published>2010-05-12T11:12:35Z</published>
    <updated>2010-05-23T17:18:08Z</updated>

    <summary>FC2ブログ共有テンプレート５作目、「Sound_of_Silence_W」。「...</summary>
    <author>
        <name>ethertank(幽)</name>
        <uri>http://ghostpia.com/</uri>
    </author>
    
        <category term="素材" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="fc2" label="FC2" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://ghostpia.com/weblog/">
        <![CDATA[<p>FC2ブログ共有テンプレート５作目、「Sound_of_Silence_W」。「W」は「（笑）」じゃないです。ワイドです。</p>

<figure>( ・   　ω　   ・ )</figure>

<ul>
<li><a href="http://ethertank100design.blog75.fc2.com/?share=32892&amp;index&amp;mob=0">Sound_of_Silence_Wのプレビュー</a></li>
</ul>

<p>仕様は以下のリンクに。</p>

<ul>
<li><a href="http://ethertank100design.blog75.fc2.com/blog-entry-18.html" title="Sound_of_Silence_W : Ethertank FC2 Template">Sound_of_Silence_W : Ethertank FC2 Template</a></li>
</ul>

<p>やっつけ感バシバシ出てますが、一応はニーズに応えてみた格好です。他のテンプレートと同様、ちょこまかとアップデートしていくつもりです。前より大きいイラストやら写真とかが貼れます。ほぼ同デザインの前作は、イラスト描きさんやキャメラマンさんのブログでよく使ってもらえてるので、今作も同じ流れを期待してたりします。前回くらいの細身の方がアート系の方には受けるのかも知れませんが・・・。はてさて。</p>

<p>前作は、台湾の方もちょこちょこ使ってくれたりします。日本や簡体字以上に画数の多い繁体字は、シンプルデザインとの親和性が高い様な気もします。そっちはそっちで突き詰めていくのも面白そう。</p>

<p>以下はマニア野郎向け。</p>]]>
        <![CDATA[<p>HTML5のテンプレートも発表したいけど、色々と混乱を産み出しそうなので流石に躊躇してる。他のテンプレから乗り換えてくれる人の問題もあるし。当分、XML宣言無しのXHTMLトランディショナル且つ、文字コードは国によって異なると云うお宜しくない書式で行く事になりそう。本来、XHTMLに於いてXML宣言を省略していいのは文字コードがUTF-8とかUTF-16の時だけなのは知ってる。投稿用のエディタで改行タグにスラッシュが入らないならHTML4.01でやってる。前にも書いたっけか・・・？</p>

<figure>(。｀-ω-´)</figure>

<p>領域サイズ以上の幅の画像を放り込まれた時のIE6でのカラム幅拡張問題なんかにも対策を当てないといけない。今の所固定幅ばっかりだからIE6にのみアンダースコアハックやら何やらで「width: 絶対値」と「overflow: hidden」を指定すればすむ話だけど、可変レイアウトともなるとIEのCSS独自拡張のexpressionでの対策か、同等のスクリプトが必須になる。プロ作ったのブログテンプレートでも、この辺が甘いのはいっぱいある。そもそも一定サイズ以上の画像はアップロード出来なくしてあるとか、約束事としてクライアントに要求してるのかも知れないけど。そう云うわけにも行かないレンタルブログテンプレート世界。なかなかどうして。</p>]]>
    </content>
</entry>

<entry>
    <title>『徹底解説 HTML5マークアップガイドブック』 - Weblog</title>
    <link rel="alternate" type="text/html" href="http://ghostpia.com/weblog/2010/05/10-22:29.html" />
    <id>tag:ghostpia.com,2010:/weblog//1.411</id>

    <published>2010-05-10T13:29:10Z</published>
    <updated>2010-05-23T21:53:53Z</updated>

    <summary>先日注文してたのが届いた。「徹底解説 HTML5マークアップガイドブック」。 H...</summary>
    <author>
        <name>ethertank(幽)</name>
        <uri>http://ghostpia.com/</uri>
    </author>
    
        <category term="HTML" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="html5" label="HTML5" 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://ghostpia.com/weblog/">
        <![CDATA[<p>先日注文してたのが届いた。「<a href="http://www.amazon.co.jp/gp/product/4798025291?ie=UTF8&amp;tag=ethertank-22&amp;linkCode=as2&amp;camp=247&amp;creative=1211&amp;creativeASIN=4798025291">徹底解説 HTML5マークアップガイドブック</a><img src="http://www.assoc-amazon.jp/e/ir?t=ethertank-22&amp;l=as2&amp;o=9&amp;a=4798025291" width="1" height="1" alt="" style="border:none !important; margin:0px !important;" />」。<br />
HTML5.jpを書いてる羽多野さんの著書。先日Adobeさんに貰った金券で購入。</p>


<aside style="float:left;margin-right:20px;">
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=292623&amp;lc1=005599&amp;t=ethertank-22&amp;o=9&amp;p=8&amp;l=as1&amp;m=amazon&amp;f=ifr&amp;asins=4798025291" style="width:120px;height:240px;"></iframe>
</aside>

<p>他の本とどちらを買おうか迷ってたんだけど、最近頻繁に見に行ってるHTML5.jpの中の人の著作であると云う点や、発売時期、著者さんの方向性等を比較してこちらに。</p>

<p>HTML5の概要は把握してたつもりだけど、やはり本で見るといい。まだパラパラめくっただけだけど、実際「そんなの有りましたっけ」的なモノも有った‥。</p>

<figure>(・ω・｀；)</figure>

<p>旧来の要素の中にも、HTML5で物理要素から意味的要素に変わったものもある。廃止された要素も有れば、新しく追加された属性 / 属性値も多数ある。「全要素・全属性完全収録」のサブタイ通りそれら全てに言及した、非常に網羅性の高い本書。</p>

<p style="clear:both;">バージョン8以前のInternet Explorerや、Firefox2で発生する問題への対処方法も。また、CGIのサイトを運営されている方だけに、HTML5のウェブアプリケーション的側面への理解が感じられる内容。インパクトの強い新要素「canvas」についてはサンプルのスクリプトもある。</p>

<p>大まかに捲った後、最初から読みはじめて、今50頁辺り。全部覚えるまで、時折遡りながらゆっくり何回も読もうと思う。読んでて楽しい！</p>

<p>２色刷、575頁。装丁美麗。<br />
是非お手元に一冊、御実家に一冊。社内に１０冊。良書也。</p>

<figure>(。-∀-)b</figure>]]>
        
    </content>
</entry>

<entry>
    <title>1pxの線を端部に向かって徐々に細くする - Weblog</title>
    <link rel="alternate" type="text/html" href="http://ghostpia.com/weblog/2010/05/10-20:07.html" />
    <id>tag:ghostpia.com,2010:/weblog//1.410</id>

    <published>2010-05-10T11:07:17Z</published>
    <updated>2010-05-10T11:58:13Z</updated>

    <summary> 表題通り。 CSS3で月（CSS3対応ブラウザのみ） 1pxはモニタ上の最小単...</summary>
    <author>
        <name>ethertank(幽)</name>
        <uri>http://ghostpia.com/</uri>
    </author>
    
        <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="1px" label="1px" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="after" label=":after" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="before" label=":before" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="borderradius" label="border-radius" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="css3" label="CSS3" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="gradient" label="gradient" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://ghostpia.com/weblog/">
        <![CDATA[<figure>
<img alt="2010-05-10-20-10.png" src="http://ghostpia.com/weblog/images/blog/2010-05-10-20-10.png" width="500" height="159" class="mt-image-none" style="" />
</figure>

<p>表題通り。</p>

<ul>
<li><a href="http://ghostpia.com/sample/crescent_moon/" title="CSS3で月">CSS3で月</a>（CSS3対応ブラウザのみ）</li>
</ul>

<hr />

<p>1pxはモニタ上の最小単位なので正確には無理だけど、擬似的には可能だったりする。単純に色を薄くしていってるだけなんだけど、細くなっていっている様に見えん事も無いと云う小技。地味だけど、細い溝が無くなっていく感じを表現したい時等に使えば効果も高い。<p>

<p>本来は画像のテクニックだけど、せっかくなので、ここでは単純な背景画像ではなくCSS3を用い、gradientで500×1pxの背景を描画し、領域下部に繰り返し無しで指定する事で実現してみた。なので現段階でgradientに対応していないOperaやIEでは表示されない（※IEでも２点間のグラデーションなら「-ms-filter」で可能）。「background-size」プロパティを指定する事で、グラデーションのサイズをコントロールしている。</p>
]]>
        <![CDATA[
<hr />

<p>ついでにCSSだけで三日月っぽいモノも描いてみた。こちらは「<a href="http://blog.creativityden.com/the-hidden-power-of-border-radius-2/" title="The hidden power of border-radius - CreativityDen">The hidden power of border-radius - CreativityDen</a>」で紹介されているようなテクを「:after擬似クラス」と「:before擬似クラス」で生成した二つの擬似要素に対して使用し、これらを重ねる事で実現している。</p>

<p>画像を使った場合と比べての利点もある。上記サンプルでは擬似要素の位置及びサイズをemで指定する事により、月マークのサイズをテキストズームに追従させる事が出来る。</p>



<figure>
<pre><code>.entry-title  {
  margin:0 0 1em 0;
  padding:0.25em /*擬似要素を放り込むスペースを確保*/;
  position:relative /*afterの位置の基準とする*/;
  background-color: #002; /*対象要素の背景色*/
  background-image: -moz-linear-gradient(left, transparent, rgba(255,255,255,0.4), transparent);
  background-image: -webkit-gradient(linear, left bottom, right bottom, from(transparent), color-stop(0.5, rgba(255,255,255,0.4)), to(transparent));
  -moz-background-size: 500px 1px;
  -webkit-background-size: 500px 1px;
  background-position:bottom left;
  background-repeat: no-repeat;
}

.entry-title:before {
  content:"";
  display:inline-block; width:1em; height:1em; /*1em×1emの要素を作る*/
  background-color:#fdc901 /*黄色っぽくする*/ ;
  -moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em; /*丸くする*/
  position: absolute; top:0.25em; left:-1em; /* 予め用意したスペースに入れる */
}

.entry-title:after {
  content:""; display:inline-block; width:1em; height:1em;
  -moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em; /*丸くする*/
  background-color: #002 /*対象の背景と同じ色を指定*/ ;
  position:absolute; left:-0.8em; top:0.32em; /*beforeの丸の上に少し位置をずらして重ねる*/
}</code></pre>
</figure>

<p>IEでもborder-radiusを再現する類のライブラリも一つだけ使ってみたけど、擬似要素には効かなかった。手打ちで-ms-filterを書いても効かない。それなら・・・と言う事で、分かりやすいようにそのままにしてあるけど、実際に使う場合には何らかのフォールバックが必要になる。<br />
（IEとOperaのみCSS上書きで消しちゃうとか、消した上で背景画像を指定するとか別の指定をするとか。）</p>

<p>他にも、擬似要素内のcontentプロパティの値に何か入れる・ボーダーを付ける・背景画像を使う・・・等すれば、色々と応用が効きそう。</p>]]>
    </content>
</entry>

<entry>
    <title>spacer.gif - Weblog</title>
    <link rel="alternate" type="text/html" href="http://ghostpia.com/weblog/2010/05/01-19:13.html" />
    <id>tag:ghostpia.com,2010:/weblog//1.408</id>

    <published>2010-05-01T10:13:22Z</published>
    <updated>2010-05-02T09:10:00Z</updated>

    <summary> spacer.gif BASE64でエンコードしたもの コード R0lGODl...</summary>
    <author>
        <name>ethertank(幽)</name>
        <uri>http://ghostpia.com/</uri>
    </author>
    
        <category term="素材" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://ghostpia.com/weblog/">
        <![CDATA[<ul>
<li><a href="http://ghostpia.com/weblog/images/blog/spacer.gif" title="spacer.gif">spacer.gif</a></li>
</ul>

<section>

<h1>BASE64でエンコードしたもの</h1>

<h2>コード</h2>
<pre><code>R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEHAAIALAAAAAABAAEAAAICVAEAOw==</code></pre>

<h2>imgタグでの使用例</h2>
<pre><code>&lt;img src="data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEHAAIALAAAAAABAAEAAAICVAEAOw==" width="1" height="1" /&gt;</code></pre>

<h2>CSSでの使用例</h2>
<pre><code>background: url(data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEHAAIALAAAAAABAAEAAAICVAEAOw==)</code></pre>

</section>

<p>ちょっと実験で使いたかったけど無かったので、1×1pxの透明gifを作った。今更テーブルレイアウトに走った訳でも無ければPNG絡みでも無い。</p>

<p>近い将来に使い道がありそうな予感がするので、<a href="http://ja.wikipedia.org/wiki/Base64" title="Base64 - Wikipedia">Base64</a>でエンコードしたデータと一緒に置いときます。要る人はどうぞダウンロードなりコピペなりして使って下さい。</p>
<figure>(。｀-ω-´)っ□</figure>]]>
        
    </content>
</entry>

<entry>
    <title>test(CSS) - Weblog</title>
    <link rel="alternate" type="text/html" href="http://ghostpia.com/weblog/2010/04/22-00:05.html" />
    <id>tag:ghostpia.com,2010://1.342</id>

    <published>2010-04-21T15:05:00Z</published>
    <updated>2010-05-31T22:08:51Z</updated>

    <summary>css example...</summary>
    <author>
        <name>ethertank(幽)</name>
        <uri>http://ghostpia.com/</uri>
    </author>
    
        <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="webkitreflect" label="-webkit-reflect" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="after" label=":after" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="nthchild" label=":nth-child()" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="borderradius" label="border-radius" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="boxshadow" label="box-shadow" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="css3" label="CSS3" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="fontin" label="Fontin" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="gradient" label="gradient" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="jquery" label="JQuery" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="mathml" label="MathML" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="textshadow" label="text-shadow" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="transform" label="transform" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://ghostpia.com/weblog/">
        <![CDATA[<p>css example</p>]]>
        <![CDATA[<ul>

<li><a href="http://ghostpia.com/sample/text-shadow/" title="text-shadow">text-shadow</a></li>

<li><a href="http://ghostpia.com/sample/mathml/" title="MathML">MathML</a></li>

<li><a href="http://ghostpia.com/sample/crescent_moon/" title="CSS3で月">CSS3で月</a></li>

<li><a href="http://ghostpia.com/sample/aftertransform/" title="after擬似クラスで書いたものに変形プロパティかけてみる。">after擬似クラスで書いたものに変形プロパティかけてみる。</a></li>

<li><a href="http://ghostpia.com/sample/wft-makiba/" title="CSS3 「gradient」と「@font-face」">CSS3 「gradient」と「@font-face」</a></li>

<lI><a href="http://ghostpia.com/sample/sizuku/" title="CSS3でなんだかよくわからないボタンを作る">CSS3でなんだかよくわからないボタンを作る</a></li>

<li><a href="http://ghostpia.com/sample/wft-fontin/" title="web font (Fontin)" target="_blank">webfont表示テスト(Fontin)</a></li>

<li><a href="http://ghostpia.com/sample/nth-child_idea/" title="CSS3「:nth-child」のサンプル" rel="nofollow">CSS3「:nth-child」のサンプル</a></li>

<li><a href="http://ghostpia.com/sample/reflect" title="-webkit-box-reflect">CSS3 「-webkit-reflect」 （※Safari&Chromeのみ）</a></li>

<li><a href="http://ghostpia.com/sample/famfatal">マウスオーバー時にリンクのサイズと位置を変えるサンプル</a></li>

<li><a href="http://ghostpia.com/sample/headline2/" title="見出しデザイン">見出しデザイン２</a></li>

<li><a href="http://ghostpia.com/sample/headline/" title="見出しデザイン１">見出しデザイン１</a></li>

<li><a href="http://ghostpia.com/sample/html5css3/" title="HTML5 &amp; CSS3 DEMO">HTML5 &amp; CSS3 DEMO</a></li>

<li><a href="http://ghostpia.com/sample/et_css-dock-menu/">CSS DOCK MENU実装テスト</a></li>

<li><a href="http://ghostpia.com/sample/neko/">「猫」宮沢賢治（青空文庫より）</a></li>

<li><a href="http://ghostpia.com/sample/ame_nimo_makezu/">「雨ニモマケズ」宮澤賢治（青空文庫より）</a></li>

</ul>]]>
    </content>
</entry>

<entry>
    <title>視点 - Weblog</title>
    <link rel="alternate" type="text/html" href="http://ghostpia.com/weblog/2010/04/21-19:48.html" />
    <id>tag:ghostpia.com,2010:/weblog//1.404</id>

    <published>2010-04-21T10:48:54Z</published>
    <updated>2010-05-07T23:52:08Z</updated>

    <summary>コーディングコンテスト審査員のプルプリンさんの会社のブログから。（ちなみに、この...</summary>
    <author>
        <name>ethertank(幽)</name>
        <uri>http://ghostpia.com/</uri>
    </author>
    
        <category term="日常・他" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://ghostpia.com/weblog/">
        <![CDATA[<p>コーディングコンテスト審査員のプルプリンさんの会社のブログから。（ちなみに、この方がCSSハックなどについて解説してらっしゃる動画を拝見したのが、自分も本格的に XHTML / CSS をやってみたいと思った大きなきっかけの一つだったりする。確か、gihyo.jp内のコンテンツだった気が。）</p>

<figure>

<blockquote>
<p>上の６名の方々と・・そしてあまりにもマニアックで目に止まった３作品：</p>
<ul>
<li>XMLで書いていらっしゃった原田直貴さん</li>
<li>SVGで書いていらっしゃったHitoyamさん</li>
<li>表示高速化（リクエスト数最小化）の究極を実現、画像もCSSもスクリプトも何もかもひとつのHTMLにしていらっしゃった岡部和昌さん</li>
</ul>
<p>以上の皆様を推薦させていただきました。</p>
</blockquote>

<figcaption>
<cite><a href="http://www.escafrace.co.jp/blog/10/04/20/1521" title="CSS Nite LP9 & 第2回コーディングコンテストレポート - エスカフラーチェLLC">CSS Nite LP9 & 第2回コーディングコンテストレポート - エスカフラーチェLLC</a></cite></figcaption>

</figure>


<p>これは‥‥。超見たい！<br />
公開されてるのかな？(･ω･)</p>]]>
        
    </content>
</entry>

<entry>
    <title>Firefoxでの謎挙動 - Weblog</title>
    <link rel="alternate" type="text/html" href="http://ghostpia.com/weblog/2010/04/21-00:26.html" />
    <id>tag:ghostpia.com,2010:/weblog//1.403</id>

    <published>2010-04-20T15:26:59Z</published>
    <updated>2010-04-21T10:34:39Z</updated>

    <summary>コーディングコンテストで、自分のソースに解決策が分からない部分が残ってたけど、す...</summary>
    <author>
        <name>ethertank(幽)</name>
        <uri>http://ghostpia.com/</uri>
    </author>
    
        <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://ghostpia.com/weblog/">
        <![CDATA[<p>コーディングコンテストで、自分のソースに解決策が分からない部分が残ってたけど、すっかり忘れてた。</p>

<p>一応ページズームだけじゃなく「テキストズーム」にもある程度対応させたつもりだったんだけど‥‥WinXP環境・Firefox3.6でズームボタンを連打した後に、標準の文字サイズに戻すボタンを押すと、縦に拡がったボックスの幅が戻らず、下部に大きな余白が残ってしまう（表現が適切でないかも）箇所がある。</p>

<figure>
<img alt="20100421.png" src="http://ghostpia.com/weblog/images/blog/20100421.png" width="500" height="447" class="mt-image-none" />
</figure>

<p>自分と同じく「display:box」を使っていても、同様の問題が発生してない人もいらっしゃるので、他の部分で自分のコードに難があるのかなとは思うけど‥。CSS3とは関係なく、他の初歩的な原因があるのかも知れない‥。</p>

<p>未解決。取り敢えずメモ。</p>]]>
        
    </content>
</entry>

<entry>
    <title>入賞 - Weblog</title>
    <link rel="alternate" type="text/html" href="http://ghostpia.com/weblog/2010/04/20-01:10.html" />
    <id>tag:ghostpia.com,2010:/weblog//1.402</id>

    <published>2010-04-19T16:10:48Z</published>
    <updated>2010-05-02T23:46:28Z</updated>

    <summary>今気付いた‥。「がんばったで賞」みたいなポジションで選んでいただけたんだろうけど...</summary>
    <author>
        <name>ethertank(幽)</name>
        <uri>http://ghostpia.com/</uri>
    </author>
    
        <category term="日常・他" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://ghostpia.com/weblog/">
        <![CDATA[<p>今気付いた‥。「がんばったで賞」みたいなポジションで選んでいただけたんだろうけど、それでもびっくり。そして、<em>「もうちょっとちゃんと書いとけば良かったー！！」</em>と後悔。aly属性とか、謎のスペルミスもあるし。更新性も皆無だし。スクリプトに至っては、ゴミだし。</p>

<p>まぁ、うじうじ君はこの辺までにして(。｀-ω-´)</p>
]]>
        <![CDATA[<p>最優秀賞は「該当無し」との事なので、優秀賞の方々が実質同着一位と見ていい感じなんだと思う。購読させて戴いてるブログの方が何人か入賞されてる。結果発表に先んじて公開してくれてるコードは既に二つ三つだけ拝見したけど、流石のプロ品質。<br />
じゅるり(。-∀-)</p>

<p>HTML側では見出しタグの設定とかセクショニングの切り分け方、HTML5のfigureやらtimeやらの各新要素や新しい属性・属性値の使い方が気になる。CSSの方は、はみ出し部分の書き方やナビゲーションとかのボタンの背景部分の実装方法がやっぱり気になる。件の「safari4非対応のボックス内側の影の部分」の実現方法も。</p>

<p>あと、応募要項上、自分みたいに古いブラウザは殆ど無視して制作された人も多いんだろうけど、「<code>display:box</code>」を使用した上で、フォールバックなんかをやってる方もいるのかも知れない。「<code>display:box</code>」は対応ブラウザだと子要素が横並びに高さも揃えてくれるって云うCSS3の便利指定なんだけど、非対応ブラウザだと当然縦積みになるし、高さも揃わない。非対応ブラウザに対してのみ「<code>display:inline-block</code>」やら「<code>float:left</code>」やらで横並びにした上で、スクリプトやらCSSのギミックで高さも揃えている猛者もいるのかも。そもそも最初からツラの揃うtableタグで書いて、横並びの手法を気にしたりしなかった人や、<a href="http://www.adobe.com/jp/newsletters/edge/february2009/articles/article4/index.html" title="Adobe Edge: 2009年2月 クロスブラウザからProgressive Enhancementという制作コンセプトへ">プログレッシブ・エンハンスメント</a>（前方最適化とでも意訳すればいいのかな？）を実践して、非対応ブラウザに対してのみ全く違った見せ方をしてる人もいるのかも。やっぱり今回の場合はそう云う手間の掛かりそうなのが気になる。色んな理由で「現場」ではまだ使われない方法だとはもちろん分かってはいるんだけど。</p>

<p>それにしても、課題のデザイン。脳内で細かいところのグリッドを切り分けにくい、何とも意地悪なデザインだったけども、コード面で色んな悩みどころを提供してくれた事を考えると、かなり良く出来た課題だったなあと思う。本当に、色んな落とし穴に落ちたしｗ(。-∀-)</p>

<p>まだ見てないのもこれから拝見しにいって、良い部分を全部吸収させていただく事にしよう。ちゅーちゅー。</p>]]>
    </content>
</entry>

</feed>
