<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>tech.ludicmind.net</title>
    <link rel="alternate" type="text/html" href="http://tech.ludicmind.net/" />
    <link rel="self" type="application/atom+xml" href="http://tech.ludicmind.net/atom.xml" />
    <id>tag:tech.ludicmind.net,2008-10-06://1</id>
    <updated>2011-05-24T07:10:56Z</updated>
    <subtitle>Webにまつわる様々な技術的情報を蓄積しています。</subtitle>
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type Commercial 4.21-ja</generator>

<entry>
    <title>AjaxFileUpload</title>
    <link rel="alternate" type="text/html" href="http://tech.ludicmind.net/javascript/jquery/ajaxfileupload.html" />
    <id>tag:tech.ludicmind.net,2011://1.146</id>

    <published>2011-05-23T10:48:02Z</published>
    <updated>2011-05-24T07:10:56Z</updated>

    <summary>通常は不可能なAjaxによるファイルアップロードを可能にするjQueryプラグイ...</summary>
    <author>
        <name>harry</name>
        <uri>http://www.ludicmind.net/</uri>
    </author>
    
        <category term="JavaScript" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="jQuery" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.ludicmind.net/">
        <![CDATA[<p>通常は不可能なAjaxによるファイルアップロードを可能にするjQueryプラグイン。以下は<a href="http://www.phpletter.com/Our-Projects/AjaxFileUpload/">AjaxFileUpload - Jquery Plugin</a>の和訳かつ要約。</p>]]>
        <![CDATA[<p><strong>訳者注：このプラグインはjQuery 1.5RCで削除された$.handleErrorを使用しているので、jQuery1.4.4以前でないと動作しない可能性がある。</strong></p>
<p>AjaxFileUploadプラグインは、yvind Saltvikによって作られたAjaxuploadプラグインを元に作成した。<br />Its idea is to create a iframe and submit the specified form to it for further processing.</p>
<p>AjaxFileUploadでは、指定されたファイルタイプのinputのみではなく、フォーム全体を送信する。</p>

<h3>使い方</h3>
<ol>
<li>jquery.jsとプラグインを読み込む</li>
<li>アップロードボタンが押された際の関数を作成する</li>
</ol>
<pre><code>function ajaxFileUpload(){
  //Ajaxが開始、終了した際のアニメーションを定義
  $("#loading")
  .ajaxStart(function(){
      $(this).show();
  })
  .ajaxComplete(function(){
      $(this).hide();
  });
 
  /*
      Ajaxファイルアップロードの準備
      url: ファイルをアップロードする先のスクリプトURL
      fileElementId: the file type of input element id and it will be the index of  $_FILES Array()
      dataType: jsonとxmlをサポート
      secureuri: セキュアプロトコルの使用
      success: Ajax成功時のコールバック関数
      error: Ajax失敗時のコールバック関数
     
          */
  $.ajaxFileUpload({
    url:'doajaxfileupload.php',
    secureuri:false,
    fileElementId:'fileToUpload',
    dataType: 'json',
    success: function (data, status)
    {
        if(typeof(data.error) != 'undefined')
        {
            if(data.error != '')
            {
                alert(data.error);
            }else
            {
                alert(data.msg);
            }
        }
    },
    error: function (data, status, e)
    {
        alert(e);
    }
  });
 
  return false;
}</code></pre>

<h3>動作デモ</h3>
<a href="http://www.phpletter.com/Demo/AjaxFileUpload-Demo/">デモ</a>]]>
    </content>
</entry>

<entry>
    <title>fleXcroll</title>
    <link rel="alternate" type="text/html" href="http://tech.ludicmind.net/javascript/flexcroll.html" />
    <id>tag:tech.ludicmind.net,2011://1.145</id>

    <published>2011-02-18T12:44:21Z</published>
    <updated>2011-02-19T03:32:41Z</updated>

    <summary>fleXcrollは、クロスブラウザ対応、ウェブ標準準拠のカスタムスクロールバー...</summary>
    <author>
        <name>harry</name>
        <uri>http://www.ludicmind.net/</uri>
    </author>
    
        <category term="JavaScript" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.ludicmind.net/">
        <![CDATA[<p>fleXcrollは、クロスブラウザ対応、ウェブ標準準拠のカスタムスクロールバースクリプト。以下は<a href="http://www.hesido.com/web.php?page=customscrollbar">fleXcroll</a>の和訳かつ要約。</p>]]>
        <![CDATA[<h3>導入</h3>
<p>fleXcrollは、OS標準のスクロールバー同様に、マウスホイール、キーボードスクロールをサポートし、テキスト選択も可能。overflow: autoを設定したdivのiPhoneタッチスクロールもサポート。</p>
<h3>サンプル</h3>
<p>fleXcrollを動的に設定してどのように使うかを、このHTMLで見てください。fleXcrollはAjaxのような動的なコンテンツ追加に対応しており、外部からコントロール可能。アンカーID、要素の追加、削除、幅の切り替え、相対的なスクロール、絶対的な位置指定のスクロールが可能。</p>
<h3>基本的な使い方</h3>
<h4>セットアップ</h4>
<ol>
<li>head要素内でflexcroll.jsを読み込む。</li>
<li>カスタムスクロールバーに関するスタイルをCSSに書く。fleXcrollは正しいCSSが書かれていないと機能しない。最低限必要なものは後述。</li>
<li>fleXcrollはdiv要素でしか機能しない。</li>
<li>そのdivはoverflow: autoにする必要がある。</li>
<li>height: autoは現在はサポートしていない。パーセント指定のheightはいくつかのブラウザで正常に機能しない。</li>
</ol>
<h4>divにfleXcrollを適用する</h4>
<h5>ページ読み込み時に適用</h5>
<p>divにflexcrollクラスを設定する。</p>
<pre><code>&lt;div class="flexcroll"&gt;</code></pre>
<p>より高速な適用：ページに画像が多いと、fleXcrollは初期化に時間がかかる。もしDomContentLoadedの為にJSライブラリを使っていなければ、高速な開始の為に次のようにできる。<br />&lt;/body&gt;の直前にコード追加</p>
<pre><code>&lt;div id='flexcroll-init'&gt;&lt;/div&gt;
&lt;/body&gt;</code></pre>
<h5>手動で適用する</h5>
<p>idを使って</p>
<pre><code>fleXenv.fleXcrollMain("your-div-id");</code></pre>
<p>JavaScript要素を使って</p>
<pre><code>fleXenv.fleXcrollMain(yourDivElement);</code></pre>
<p>classを使って</p>
<pre><code>fleXenv.initByClass("a-class-name-of-your-choice");</code></pre>
<h4>スクロールバーのスタイルを定義する</h4>
<h5>自動的に生成されるスクロールバー（推奨）</h5>
<p>fleXcrollは必要なdiv要素を生成するので、あなたはこれらのスタイルを指定するだけ。スタイル指定の為に、fleXcrollは生成したdivにクラス属性を設定する。</p>
<ul>
<li>.vscrollerbase : 縦スクロールのトラックとして使われ、縦スクロールバーを収容する</li>
<li>.vscrollerbasebeg : ユーザーが指定しない場合、高さはbaseに合わせて自動調整される</li>
<li>.vscrollerbaseend : 高さはユーザーが指定する必要がある</li>
<li>.vscrollerbar : 縦のスクロールバーとして使われる。ユーザーが指定しない場合、高さはコンテンツの高さが自動反映される。</li>
<li>.vscrollerbarbeg : ユーザーが指定しない場合、高さはbarに合わせて自動調整される</li>
<li>.vscrollerbarend : 高さはユーザーが指定する必要がある</li>
<li>.hscrollerbase : 横スクロールのトラックとして使われ、横スクロールバーを収容する</li>
<li>.hscrollerbasebeg</li>
<li>.hscrollerbaseend</li>
<li>.hscrollerbar</li>
<li>.hscrollerbarbeg</li>
<li>.hscrollerbarend</li>
<li>.scrollerjogbox : 縦横両方のスクロールバーが存在する場合のみ追加される。右下部分。</li>
</ul>
<p>※訳者注：上記では全然設定が足りない。以下のサンプルをペーストしてカスタマイズするといい。</p>
<pre><code>.scrollgeneric {
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1px;
	font-size: 1px;
}

.vscrollerbar {
	width: 10px;
	background: #FFF;
}
.vscrollerbarbeg {
	width: 10px;
	height: 24px !important;
	background: #000;
}
.vscrollerbarend {
	width: 10px;
	height: 24px;
	background: #000;
}
.vscrollerbase {
	width: 10px;
	background: #99F;
}
.vscrollerbasebeg {
	width: 10px;
	height: 15px !important;
	background: #F00;
}
.vscrollerbaseend {
	width: 10px;
	height: 15px;
	background:#9FF;
}

.hscrollerbase {
	height: 16px;
	background-color: white;
}
.hscrollerbar {
	height: 16px;
	background-color: black;
}

.vscrollerbar,
.hscrollerbar {
	padding: 0px;
	z-index: 2;
}

.scrollerjogbox {
	width: 36px;
	height: 16px;
	top: auto;
	left: auto;
	bottom: 0px;
	right: 0px;
	background: #37917A;
}</code></pre>

<h5>外部のスクロールバー</h5>
<p>バージョン2.0から、HTML要素で構成されるスクロールバーをサポートしている。詳細は後述。</p>

<h4>CSSトリック</h4>
<h5>固定サイズのスクロールバー</h5>
<p>縦スクロールバーの高さを固定</p>
<pre><code>.vscrollerbase { 
height: 100px !important; 
}</code></pre>
<p>横スクロールバーの幅を固定</p>
<pre><code>.hscrollerbase { 
width: 100px !important!; 
}</code></pre>
<h5>常にscrollbase（スクロールトラック）を表示する</h5>
<pre><code>.vscrollerbase { 
visibility: visible !important; 
}</code></pre>
<pre><code>.hscrollerbase { 
visibility: visible !important; 
}</code></pre>
<h5>縦スクロールバーを左に表示する</h5>
<pre><code>.vscrollerbase { 
.vscrollerbase {left: 0 !important;}
}</pre></code>
<p>※上記はコピペミスではなくドキュメントのまま</p>
<h4>fleXcrollと印刷</h4>
<p>下記を追加すると印刷可能になる。</p>
<pre><code>@media print { 
div { 
height: auto!important; width: auto!important; 
position: static!important; margin: 0!important; padding: 0!important 
} 
.scrollgeneric {display: none;} 
} </code></pre>
<p>fleXcollのコンテンツだけを印刷可能にしたいなら、</p>
<pre><code>@media print { 
.flexcrollactive, .flexcrollactive div  { 
height: auto!important; width: auto!important; 
position: static!important; margin: 0!important; padding: 0!important 
} 
.scrollgeneric {display: none;} 
} </code></pre>
<h4>fleXcrollとFlash</h4>
<p>※省略</p>
<h4>fleXcrollを使ったプログラミング</h4>
<p>※省略</p>
<h3>追加事項</h3>
<h4>正しく動作させる</h4>
<p>※省略</p>
<h4>料金：非商用利用は無料</h4>
<p>非商用利用は無料で、hesido.comにリンクしてくれるとありがたいが強制ではない。</p>
<p>商用利用は単一サイトなら$30(USD), 2つ目のサイトは$25, さらに$15で無制限。後でアップグレードも可能。例えばすでに1サイト分を払っていれば、＋$40で無制限にできる。</p>
<h4>It covers your back when it can't work!</h4>
<p>Degrading is the most important feature of the script, it degrades excellently without breaking anything if the user has turned off javascript, or when the User Agent has no javascript support. Why not try this page with Javascript turned off? You'll see the content in the srollable elements are still accessible.</p>

<h3>使用例</h3>
<p>※省略。「基本的な使い方」と大差ない。</p>

<h3>バーのスタイル指定</h3>
<p>※省略</p>

<h3>重要事項</h3>
<h4>動作するブラウザ</h4>
<p>iOS上のSafari、Opera 8.5以降、Firefox 1.5以降（いずれもPC、Mac、Linux）、Webkit（Mac）、IE 5以降はテスト済み。</p>
<p>Mac Safari 2.0.4には最新のWebkitで修正済みのバグがある。最新のWebkitを入れれば問題なく使える。</p>
<h4>アクセシブルで使いやすいサイトの為に</h4>
<ul>
<li>スクロールバーとして見分けやすいデザインを。</li>
<li>クリック、ドラッグしやすい大きさに。</li>
<li>コンテンツ自体よりも、見た目が重要な場合だけ使用するように。</li>
</ul>
<h4>一般的な意見</h4>
<p>※省略</p>
<h4>標準モード</h4>
<p>標準モードでは、全てのメジャーブラウザで全く同様に描画される。</p>
<h4>互換モード及びIE5</h4>
<p>※省略</p>


<h3>fleXcrollのライセンス購入方法</h3>
<p><a href="http://www.hesido.com/base.php?page=general&sub=contact">コンタクトのページ</a>からメールしてくれれば情報を送るが、PayPal等を使ってより早く行う事もできる。</p>
<h4>PayPalを使う</h4>
<p>emrahbaskaya at hesido dot com 宛に、以下の情報を添えて送金する。</p>
<ul>
<li>ライセンスのタイプ</li>
<li>ライセンスに登録する名前（個人名または法人名）　サイトオーナーで無くても良く、通常ウェブ開発者</li>
<li>サイトのベースURL（無制限ライセンスの場合は不要）</li>
<li>ライセンスを送るE-mail</li>
</ul>

<h4>PayPalを使わない</h4>
<p>※省略</p>

<h4>ライセンステキストを受け取ったら</h4>
<ul>
<li>届かなかったら連絡を。再送する</li>
<li>パブリックライセンステキストを購入したライセンステキストに置き換える</li>
<li>プロセスが良く分からなければ、コンタクトページから連絡を。</li>
</ul>
<p>ライセンスを購入したら、同じライセンスタイプの分はバージョンアップしても使える。価格変更の影響も受けない。もし非商用サイトで使用していても、気にいったらライセンス購入でサポートできる。</p>]]>
    </content>
</entry>

<entry>
    <title>PHP5からMySQL5への接続で文字化けする</title>
    <link rel="alternate" type="text/html" href="http://tech.ludicmind.net/php/php5mysql5.html" />
    <id>tag:tech.ludicmind.net,2010://1.143</id>

    <published>2010-07-26T10:41:41Z</published>
    <updated>2010-07-26T10:48:53Z</updated>

    <summary>タイトル通りの現象にハマった。/etc/php.iniでも、/etc/my.cn...</summary>
    <author>
        <name>harry</name>
        <uri>http://www.ludicmind.net/</uri>
    </author>
    
        <category term="PHP" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="mysql" label="MySQL" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://tech.ludicmind.net/">
        <![CDATA[<p>タイトル通りの現象にハマった。/etc/php.iniでも、/etc/my.cnfでも、DB作成時にもUTF-8を指定しているのに、2バイト文字が化ける。<br />
解決方法が下記に書かれていました。感謝。</p>
<ul>
<li><a href="http://d.hatena.ne.jp/takuji_mezawa/20090519/1242710031">MySQL5文字化け調査 - Dosanko*SE:覚書</a></li>
</ul>
<blockquote>
<p>...PHPはMySQLの定義ファイル(my.ini, my.cnf)でクライアントやサーバーの文字コードを設定しても、PHPのビルド時に指定した文字コードセットが活きる、ということ。...</p>
</blockquote>
<p>対策としては、my.cnfでskip-character-set-client-handshakeを使用する、アプリ側でmysqli::set_charset等を使用する、と。</p>
]]>
        
    </content>
</entry>

<entry>
    <title>abraham / twitteroauth</title>
    <link rel="alternate" type="text/html" href="http://tech.ludicmind.net/api/twitter/abraham_twitteroauth.html" />
    <id>tag:tech.ludicmind.net,2010://1.141</id>

    <published>2010-07-22T08:33:58Z</published>
    <updated>2010-07-23T12:45:57Z</updated>

    <summary>Twitter APIのOAuth認証を利用するためのPHPライブラリ。abra...</summary>
    <author>
        <name>harry</name>
        <uri>http://www.ludicmind.net/</uri>
    </author>
    
        <category term="API" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="PHP" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Twitter" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.ludicmind.net/">
        <![CDATA[<p>Twitter APIのOAuth認証を利用するためのPHPライブラリ。<a href="http://github.com/abraham/twitteroauth">abraham / twitteroauth</a>からダウンロード可能。以下は<a href="http://github.com/abraham/twitteroauth/blob/master/DOCUMENTATION">twitteroauth / DOCUMENTATION</a>の和訳かつ要約。</p>
]]>
        <![CDATA[<h3>コードの入手</h3>
<p>最終版をgitで入手可能：<br />git clone git://github.com/abraham/twitteroauth.git<br />もしくは下記でダウンロード可能：<br />http://github.com/abraham/twitteroauth/downloads</p>

<h3>フローの概要</h3>
<ol>
<li>クライアント証明書として使用するTwitterOAuthオブジェクトを作成する</li>
<li>Twitterからの仮証明書をリクエストする</li>
<li>TwitterのオーサライズURLを作成する</li>
<li>ユーザーをオーサライズURLへリダイレクトする</li>
<li>ユーザーがアクセスを認可し、Twitterから戻ってくる</li>
<li>クライアント証明書、仮証明書を使用してTwitterOAuthオブジェクトを再作成する</li>
<li>Twitterからトークン証明書を取得する</li>
<li>クライアント証明書、トークン証明書を使用してTwitterOAuthオブジェクトを再作成する</li>
<li>Twitter APIを利用する</li>
</ol>

<h3>専門用語</h3>
<p>専門用語は、draft-hammer-oauth IETF RFCによりマッチするよう0.1.xから変更された。RFCは<a href="http://tools.ietf.org/html/draft-hammer-oauth">http://tools.ietf.org/html/draft-hammer-oauth</a>で読める。いくつかの用語はTwitterで使用されているものと異なる。</p>
<ul>
<li>クライアント証明書：Consumer key/secret。Twitterにアプリ登録時に入手するもの。</li>
<li>仮証明書：以前にリクエストトークンとして知られていたもの。</li>
<li>トークン証明書：以前にアクセストークンとして知られていたもの。</li>
</ul>

<h3>パラメーター</h3>
<p>TwitterOAuthオブジェクト作成後に変更できるパラメーターがいくつかある。</p>
<dl>
<dt>JSONの代わりにXMLを使う</dt>
<dd>$connection-&gt;format = 'xml';</dd>
<dt>JSONの自動デコードをやめる</dt>
<dd>$connection-&gt;decode_json = FALSE;</dd>
<dt>独自のユーザーエージェント</dt>
<dd>$connection-&gt;useragent = 'Custom useragent string';</dd>
<dt>TwitterのSSL証明書を検証する</dt>
<dd>$connection-&gt;ssl_verifypeer = TRUE;</dd>
</dl>
<p>その他のパラメーターはTwitterOAuth.phpに書かれている。</p>

<h3>サンプルコードを使用した拡張フロー</h3>
<p>TwitterOAuthを使用するには、TwitterOAuth.php, OAuth.phpとクライアント証明書が必要。クライアント証明書は<a href="https://twitter.com/apps">https://twitter.com/apps</a>にアプリを登録することで得られる。</p>
<p>サンプルファイルは以下に解説する。</p>
<p>ステップ0.ユーザーは、redirect.phpにリンクした"Sign in with Twitter"ボタンを表示するconnect.phpから開始する。このボタンはログインセクションのホームページに表示されなければならない。クライアント証明書はCONSUMER_KEY、CONSUMER_SECRETとしてconfig.phpに保存されている。アプリ設定ページに静的なcallback URLを保存するか、動的なcallback URLをステップ2以降に使用できる。サンプルがhttp://example.com/callback.phpで動作する。</p>
<p>ステップ1.ユーザーがredirect.phpに到達した時に、クライアント証明書を使用してTwitterOAuthオブジェクトを作成します。config.phpを使わない事も可能。<br />
$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET);// config.php のクライアント証明書を使用<br />
$connection = new TwitterOAuth('abc890', '123xyz');</p>
<p>ステップ2.Twitterに仮証明書を問い合わせるために、作成した$connectionオブジェクトを使用する。動的なcallback URLを使用する場合は、パラメーターで渡せる。<br />
$temporary_credentials = $connection->getRequestToken(); // アプリケーションの登録済みcallbackを使用する<br />
$temporary_credentials = $connection->getRequestToken('http://example.com/callback.php?');</p>
<p>ステップ3.仮証明書があるので、ユーザーをTwitterに誘導してアプリを承認してもらう。第2のパラメーターとしてFALSEを渡すと、Twitterのサインインを使用しないようにできる。 http://apiwiki.twitter.com/Sign-in-with-Twitter<br />
$redirect_url = $connection->getAuthorizeURL($temporary_credentials); // Twitterのサインインを使用する<br />
$redirect_url = $connection->getAuthorizeURL($temporary_credentials, FALSE);</p>
<p>ステップ4.これでユーザーを送るTwitter URLの準備が完了した。パラメーターを付与することも可能。そのパラメーターはステップ5でTwitterから返される。<br />
https://twitter.com/oauth/authenticate?oauth_token=xyz123<br />
https://twitter.com/oauth/authenticate?oauth_token=xyz123&info=abc // info はユーザーと共に返ってくる</p>
<p>ステップ5.ユーザーはtwitter.comでログインしなければならない。その後アプリの許可/拒否を選択し、callbackに自動的に戻される。</p>
<p>ステップ6.ユーザーがcallback.phpに戻ってくる。仮証明書を使用して新しいTwitterOAuthオブジェクトを構築するアクセス許可は下りている。<br />
$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $_SESSION['oauth_token'],
$_SESSION['oauth_token_secret']);</p>
<p>ステップ7.Twitterにトークン証明書を問い合わせる。これらはアプリケーションとユーザーを特定し、リクエスト時にパスワードのように機能する。動的なcallback URLが使用されていれば、oauth_varifierパラメーターも渡さなければいけない。通常トークン証明書はデータベースに保存されるが、このサンプルではセッション中のみ使用している。<br />
$token_credentials = $connection->getAccessToken(); // アプリケーションの設定されたcallback URLを使用<br />
$token_credentials = $connection->getAccessToken($_REQUEST['oauth_verifier']);</p>
<p>ステップ7a.トークン証明書を入手したら、ユーザーをindex.phpへリダイレクトする。</p>
<p>ステップ8.トークン証明書を使って、新しいTwitterOAuthオブジェクトを作成する。<br />
$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $token_credentials['oauth_token'],
$token_credentials['oauth_token_secret']);</p>
<p>ステップ9.最後に、ユーザーによって認証されたリクエストを作成する。GET, POST, and DELETE APIメソッドが使用可能。APIドキュメントからパスをコピーし、curser、in_reply_to_status_idのようなパラメーターの配列を付与することもできる。<br />
$content = $connection->get('account/verify_credentials');<br />
$connection->post('statuses/update', array('status' => 'Text of status here',
'in_reply_to_status_id' => 123456));<br />
$content = $connection->delete('statuses/destroy/12345');</p>
]]>
    </content>
</entry>

<entry>
    <title>Adobe CS LiveのBrowserLabで、Dreamweaver CS5ローカルファイルのプレビューができない</title>
    <link rel="alternate" type="text/html" href="http://tech.ludicmind.net/cat32/dreamweaver/adobe_cs_livebrowserlabdreamwe.html" />
    <id>tag:tech.ludicmind.net,2010://1.140</id>

    <published>2010-06-29T10:57:37Z</published>
    <updated>2010-06-29T11:04:59Z</updated>

    <summary>Dreamweaver CS5を起動後、任意のHTMLファイルを開き、Brows...</summary>
    <author>
        <name>harry</name>
        <uri>http://www.ludicmind.net/</uri>
    </author>
    
        <category term="Dreamweaver" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="ツール" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.ludicmind.net/">
        <![CDATA[<p>Dreamweaver CS5を起動後、任意のHTMLファイルを開き、BrowserLabによるローカルファイルのプレビューを実行しても、「接続できませんでした」と表示され、立ち上がったプライマリブラウザにはBrowserLabの初期状態しか表示されないという現象が発生。<br />
調べてみたら、フォーラムに同様の現象のやり取りがありました。</p>
<ul>
<li><a href="http://forums.adobe.com/thread/658193?tstart=0">Adobe Forums: So frustrated with BrowserLab!</a></li>
</ul>
<p>うちの場合は、Joshの最初の回答、「DWを閉じてBrowserLabにアクセスできますか？ログインして公開されているウェブサイトをテストできたら、出だしは順調です。その後もう一度DWから実行してください」というのに従ったら解消されました。</p>]]>
        
    </content>
</entry>

<entry>
    <title>印刷時の不具合</title>
    <link rel="alternate" type="text/html" href="http://tech.ludicmind.net/htmlcss/post_22.html" />
    <id>tag:tech.ludicmind.net,2010://1.139</id>

    <published>2010-06-14T17:21:02Z</published>
    <updated>2010-06-16T13:04:08Z</updated>

    <summary>ウェブサイトの印刷時に遭遇した不具合とその対応をメモ。印刷プレビューだとコードイ...</summary>
    <author>
        <name>harry</name>
        <uri>http://www.ludicmind.net/</uri>
    </author>
    
        <category term="Firefox" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="HTML/CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Internet Explorer" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Safari" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="ブラウザ" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.ludicmind.net/">
        <![CDATA[<p>ウェブサイトの印刷時に遭遇した不具合とその対応をメモ。<br />印刷プレビューだとコードインスペクタも使えないし、なかなか原因が分からないですね。</p>
<h3>印刷の最後に真っ白なページが出る（主にFirefox3、IE8、IE7）</h3>
<p>ページ内のブロック要素にmin-heightを指定していると発生。印刷用CSSで<del>min-height: inherit</del> <ins>min-height: 0</ins>などとする。inheritだとIE7でまだ空白ページが出た。<br />
なお、印刷の途中に真っ白なページが出るのは、その前後のブロックのpaddingが原因の場合がある。</p>
<h3>印刷の最初に真っ白なページが出る（主にSafari4）</h3>
<p>先頭のブロック要素にpadding-topがある事が原因。印刷用CSSでpadding-top: 0に。</p>
<h3>画像が印刷されない（Opera10）</h3>
<p>印刷用CSSで、画像のwidth、heightに実際より小さい値を指定する。遭遇したケースの場合、600x848pxの画像に対し、width: 599px、height: 846pxを指定したら印刷された。</p>
<p>今時Operaのシェアなんて無きに等しいので、「印刷の際には別のブラウザを使用してください」という断り書きでもいいのではないかと思う。</p>]]>
        
    </content>
</entry>

<entry>
    <title>IE6、シェア10％を割る</title>
    <link rel="alternate" type="text/html" href="http://tech.ludicmind.net/cat30/cat43/ie610.html" />
    <id>tag:tech.ludicmind.net,2010://1.138</id>

    <published>2010-04-25T05:39:02Z</published>
    <updated>2010-07-02T02:24:46Z</updated>

    <summary>StatCounter Global Statsの日本におけるブラウザシェアで、...</summary>
    <author>
        <name>harry</name>
        <uri>http://www.ludicmind.net/</uri>
    </author>
    
        <category term="ブラウザ" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="調査" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.ludicmind.net/">
        <![CDATA[<p><a href="http://gs.statcounter.com/">StatCounter Global Stats</a>の日本におけるブラウザシェアで、ようやくIEが10％を切る結果に。以下はStatCounterからダウンロードしたCSVより。</p>
<table style="margin: 15px auto 0;width: 320px">
<tr>
<th>ブラウザ</th>
<th>シェア % 2010年4月</th>
</tr>
<tr>
<th>IE 8.0</th>
<td>35.41</td>
</tr>
<tr>
<th>IE 7.0</th>
<td>17.25</td>
</tr>
<tr>
<th>Firefox 3.6</th>
<td>16.58</td>
</tr>
<tr>
<th>IE 6.0</th>
<td>9.51</td>
</tr>
<tr>
<th>Safari 4.0</th>
<td>5.61</td>
</tr>
<tr>
<th>Chrome 4.0</th>
<td>4.63</td>
</tr>
<tr>
<th>Firefox 3.5</th>
<td>4.38</td>
</tr>
<tr>
<th>Firefox 3.0</th>
<td>1.41</td>
</tr>
<tr>
<th>Opera 10.5</th>
<td>1.04</td>
</tr>
<tr>
<th>Chrome 5.0</th>
<td>0.78</td>
</tr>
</table>
]]>
        
    </content>
</entry>

<entry>
    <title>無料で始める、企業向けTwitter分析術</title>
    <link rel="alternate" type="text/html" href="http://tech.ludicmind.net/cat17/twitter.html" />
    <id>tag:tech.ludicmind.net,2010://1.137</id>

    <published>2010-04-20T02:43:33Z</published>
    <updated>2010-04-20T02:47:30Z</updated>

    <summary> 無料で始める、企業向けTwitter分析術 - リアルアクセス解析 素晴らしい...</summary>
    <author>
        <name>harry</name>
        <uri>http://www.ludicmind.net/</uri>
    </author>
    
        <category term="アクセス解析" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="ウェブサービス" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.ludicmind.net/">
        <![CDATA[<ul>
<li><a href="http://d.hatena.ne.jp/ryuka01/20100420/p1">無料で始める、企業向けTwitter分析術 - リアルアクセス解析</a></li>
</ul>
<p>素晴らしい。Twitterを広報に活用、提案しようと思ったら必読ですね。</p>]]>
        
    </content>
</entry>

<entry>
    <title>Movable Typeで～が？に文字化けしてしまう問題</title>
    <link rel="alternate" type="text/html" href="http://tech.ludicmind.net/cms/movabletype/movable_type.html" />
    <id>tag:tech.ludicmind.net,2010://1.136</id>

    <published>2010-04-15T18:04:36Z</published>
    <updated>2010-04-16T02:46:36Z</updated>

    <summary>この問題に遭遇。そのものずばりな回答が下記ページにありました。 Movable ...</summary>
    <author>
        <name>harry</name>
        <uri>http://www.ludicmind.net/</uri>
    </author>
    
        <category term="CMS" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="MovableType" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="MySQL" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="サーバ" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.ludicmind.net/">
        <![CDATA[<p>この問題に遭遇。そのものずばりな回答が下記ページにありました。</p>
<ul>
<li><a href="http://revilog.com/2006/07/007330.html">Movable Typeで～が？に文字化けしてしまう問題解決orz - レビログ</a></li>
</ul>
<p>DBをSQLでエクスポートして、UTF-8で保存、「ujis」を「utf8」に、「ujis_japanese_ci」を「
utf8_general_ci」に変更してインポートして完了。<br />
DROP DATABASEをエクスポートファイルに入れ忘れたので、手書きでファイル先頭に追加してインポート完了。でないとDBが存在するのでエラーになる。</p>]]>
        
    </content>
</entry>

<entry>
    <title>MTEntries等で使用可能な特別な変数</title>
    <link rel="alternate" type="text/html" href="http://tech.ludicmind.net/cms/movabletype/mtentries.html" />
    <id>tag:tech.ludicmind.net,2010://1.134</id>

    <published>2010-04-01T13:37:48Z</published>
    <updated>2010-04-01T13:49:00Z</updated>

    <summary>MTテンプレートタグリファレンスのMTForのページで解説されている以下の変数は...</summary>
    <author>
        <name>harry</name>
        <uri>http://www.ludicmind.net/</uri>
    </author>
    
        <category term="CMS" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="MovableType" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.ludicmind.net/">
        <![CDATA[<p><a href="http://www.movabletype.jp/documentation/appendices/tags/for.html">MTテンプレートタグリファレンスのMTForのページ</a>で解説されている以下の変数は、MTEntries等のファンクションタグでも有効と思われる。__index__だけは違うかもしれない。</p>
<ul>
<li>__first__</li>
<li>__last__</li>
<li>__odd__</li>
<li>__even__</li>
<li>__index__</li>
<li>__counter__</li>
</ul>
<p>少なくとも、MTEntries内で、__first__と__last__が動作する事は確認済み。MT5にて。</p>
<p>問題は、MT5のドキュメントではMTFor等、一部の特殊なタグでしか記述されていない事。もっとも使用頻度の高いMTEntriesのページになぜ書かないのか。理解に苦しむ。</p>]]>
        
    </content>
</entry>

<entry>
    <title>Microsoft Expression Web SuperPreview for Windows Internet Explorer</title>
    <link rel="alternate" type="text/html" href="http://tech.ludicmind.net/browser/internet_explorer/microsoft_expression_web_super.html" />
    <id>tag:tech.ludicmind.net,2010://1.133</id>

    <published>2010-03-28T03:02:01Z</published>
    <updated>2010-03-28T03:16:54Z</updated>

    <summary>Microsoftが提供する無償ツール。IE6～8の表示確認が可能（ただしIE7...</summary>
    <author>
        <name>harry</name>
        <uri>http://www.ludicmind.net/</uri>
    </author>
    
        <category term="Internet Explorer" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="ブラウザ" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.ludicmind.net/">
        <![CDATA[<p>Microsoftが提供する無償ツール。IE6～8の表示確認が可能（ただしIE7、IE8はマシンにインストールされているバージョンのみ）。ダウンロードは以下から。</p>
<ul>
<li><a href="http://www.microsoft.com/downloads/details.aspx?FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677&displaylang=en">Download details: Expression Web SuperPreview for Windows Internet Explorer</a></li>
</ul>
<p>使ってみたけど、リンク先ページへの遷移がクリックでできないっぽい。毎回URLを直打ちしなきゃいけないって事か？本当に？</p>
<p>ちなみに他にもこういうものがあるが、いまいち信頼できずVMware Player上の実OSで確認。<br />使った事はないんですが、「実は実機のIEと表示が違いました」という事がありそう＆ホストOSに悪い影響がありそうで...。</p>
<ul>
<li><a href="http://www.my-debugbar.com/wiki/IETester/HomePage">IETester</a></li>
<li><a href="http://finalbuilds.edskes.net/iecollection.htm">IECollection</a></li>
</ul>
]]>
        
    </content>
</entry>

<entry>
    <title>TinyMCE-MTPluginにおけるテンプレートの使用</title>
    <link rel="alternate" type="text/html" href="http://tech.ludicmind.net/cms/movabletype/tinymce-mtplugin.html" />
    <id>tag:tech.ludicmind.net,2010://1.132</id>

    <published>2010-03-15T08:36:32Z</published>
    <updated>2010-04-09T03:35:29Z</updated>

    <summary>セットアップ 以下のJSファイルに、TinyMCEのプラグインオプションを記述。...</summary>
    <author>
        <name>harry</name>
        <uri>http://www.ludicmind.net/</uri>
    </author>
    
        <category term="CMS" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="MovableType" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.ludicmind.net/">
        <![CDATA[<h3>セットアップ</h3>
<p>以下のJSファイルに、TinyMCEの<a href="http://tech.ludicmind.net/cms/movabletype/tinymcepluginstemplate.html#more">プラグインオプション</a>を記述。<br />
mt-static/plugins/TinyMCE/js/initialize.js<br />
本文欄のテキストフォーマットは「リッチテキスト」でなければ利用できない。</p>
<h3>テンプレート挿入時のプレビューのCSSを有効にする</h3>
<p>プレビュー表示時に使用されるHTMLファイルは<br />
mt-static/plugins/TinyMCE/lib/jscripts/tiny_mce/plugins/template/blank.htm<br />
なので、これにstyle要素を追加すればとりあえずそのCSSが有効となる。<br />
ちなみに同じ場所にあるtemplate.htmはテンプレートボタンを押した際のポップアップページで、css/、js/にあるファイルはこのtemplate.htmに使用されている。</p>
<h3>TinyMCEのプレビューボタン押下時のプレビューCSSを有効にする</h3>
<p>プレビュー表示時に使用されるHTMLファイルは<br />
mt-static/plugins/TinyMCE/lib/jscripts/tiny_mce/plugins/preview/preview.htm<br />
なので、これにstyle要素を追加すればとりあえずそのCSSが有効となる。</p>]]>
        
    </content>
</entry>

<entry>
    <title>TinyMCE:Plugins/Template</title>
    <link rel="alternate" type="text/html" href="http://tech.ludicmind.net/cms/movabletype/tinymcepluginstemplate.html" />
    <id>tag:tech.ludicmind.net,2010://1.131</id>

    <published>2010-03-14T14:29:52Z</published>
    <updated>2010-03-15T08:27:48Z</updated>

    <summary>Movable Typeの編集画面に高機能なWYSIWYGを追加するTinyMC...</summary>
    <author>
        <name>harry</name>
        <uri>http://www.ludicmind.net/</uri>
    </author>
    
        <category term="CMS" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="MovableType" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.ludicmind.net/">
        <![CDATA[<p>Movable Typeの編集画面に高機能なWYSIWYGを追加する<a href="http://tec.toi-planning.net/mt/tinymce/">TinyMCE-MTPlugin</a>でも使用されている、<a href="http://wiki.moxiecode.com/index.php/TinyMCE:Index">TinyMCE</a>。以下は<a href="http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/template">TinyMCE:Plugins/Template</a>の和訳かつ要約です。</p>]]>
        <![CDATA[<h3>Plugin: template</h3>
<p>このプラグインはカスタムテンプレート機能を追加する。2つのタイプ、テンプレートとスニペットが使用可能。</p>
<h4>インストール</h4>
<ol>
<li>TinyMCEプラグインオプションリストにプラグインを追加する。例：plugins : "template"</li>
<li>ボタンリストにテンプレートボタン名を追加する。例：theme_advanced_buttons3_add : "template"</li>
<li>テンプレートを設定する（後述）。</li>
<li>テンプレートオプションを設定する（後述）</li>
</ol>
<h4>プラグインオプション</h4>
<dl>
<dt>template_external_list_url</dt>
<dd>テンプレートファイルの配列を含むJSファイル。PHPなどでも可</dd>
<dt>template_cdate_classes</dt>
<dd>スペースで区切られたクラス名のリスト。このクラス名を持つテンプレート要素の中身は、'template_cdate_format'で指定されたフォーマットのテンプレート作成日で置き換えられる。A creation date is one that is set if no previous date existed within the element. Once set the original date is stored inside the element in a HTML comment and is designed not to change even with a template change.</dd>
<dt>template_mdate_classes</dt>
<dd>スペースで区切られたクラス名のリスト。このクラス名を持つテンプレート要素の中身は、'template_mdate_format'で指定されたフォーマットのテンプレート変更日で置き換えられる。</dd>
<dt>template_cdate_format</dt>
<dd>日付フォーマット文字列。</dd>
<dt>template_mdate_format </dt>
<dd>日付フォーマット文字列。</dd>
<dt>template_selected_content_classes</dt>
<dd>スペースで区切られたクラス名のリスト。このクラス名を持つテンプレート要素の中身は、最初に挿入される際、選択されているエディタの内容に置き換えられる。</dd>
<dt>template_replace_values</dt>
<dd>挿入されたテンプレートのコンテンツ置き換えをコントロールするアイテムの配列。配列のキーはテンプレート内で使用されているクラス名。このクラス名を持つテンプレート要素の中身は、配列の中身に置き換えられる。下にサンプルを示す。</dd>
<dt>template_templates</dt>
<dd>テンプレートオブジェクトの配列。それぞれのオブジェクトではテンプレートタイトル、ソースURLと説明を指定する。URLが相対パスの場合は、表示中のページからの相対パスである必要がある。</dd>
<dt>template_popup_width</dt>
<dd>テンプレートダイアログの幅。デフォルトは700。</dd>
<dt>template_popup_height</dt>
<dd>テンプレートダイアログの高さ。デフォルトは600。</dd>
</dl>
<h4>値の置き換えのサンプル</h4>
<p>クラス名はテンプレートに使用され、変数名はスニペットに使用される。</p>
<pre><code>template_replace_values : {
	className : "Replace with this content",
	anotherClassName: "Replacement content"
}</code></pre>
<h4>値の置き換え（関数）サンプル</h4>
<p>置き換えるコンテンツ配列値には関数も使用可能。テンプレート要素がマッチするクラス名を持っていた場合、関数が呼ばれ、要素が引数として渡される。</p>
<pre><code>template_replace_values : {
	className : function(element) {
		// do something and then:
		// element.innerHTML = something
	}
}</code></pre>
<h4>テンプレートサンプル</h4>
<pre><code>template_templates : [
	{
		title : "Editor Details",
		src : "editor_details.htm",
		description : "Adds Editors Name and Staff ID"
	}
]</code></pre>
<h4>外部リストのサンプル</h4>
<p>これはtemplate_external_list_url optionを使用してURLを指定した場合に、バックエンドページが返す内容。テンプレートを指定する単純な配列。このURLはPHPのようなバックエンドページも可能。</p>
<pre><code>var tinyMCETemplateList = [
	// Name, URL, Description
	["Simple snippet", "templates/snippet1.htm", "Simple HTML snippet."],
	["Layout", "templates/layout1.htm", "HTML Layout."]
];</code></pre>
<h4>スニペットの作成</h4>
<p>スニペットは挿入されるHTMLコードの塊。値は、テンプレートDIV要素に囲まれた部分以外は、スニペットが挿入される時のみ置き換えられる。template_replace_values配列にsomevar1を定義した場合、プレビュー、または挿入時に置き換えられる。</p>
<pre><code>This is a simple &lt;strong&gt;snippet&lt;/strong&gt;. Will be replaced: {$somevar1}.</code></pre>
<h4>テンプレートの作成</h4>
<p>テンプレートは、DIVで括られたテンプレートデータのファイル。DIVの外側の全てのHTMLは、プレビューフレームで単純に表示される。テンプレートは単純なスニペットよりも拡張性があり、template_replace_valuesに配置された関数により、動的コンテンツ/スマートコンテンツを取得可能。これらの関数は処理がクリーンアップされるごとに実行され続ける。</p>
<h5>テンプレートは下のベースHTMLを使用する必要がある</h5>
<pre><code>&lt;!-- This will not be inserted --&gt;
&lt;div class="mceTmpl"&gt;
&lt;table width="98%%"  border="0" cellspacing="0" cellpadding="0"&gt;
  &lt;tr&gt;
    &lt;th scope="col"&gt; &lt;/th&gt;
    &lt;th scope="col"&gt; &lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt; &lt;/td&gt;
    &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;&lt;/div&gt;</code></pre>
<h5>初期化サンプル</h5>
<pre><code>tinyMCE.init({
	theme : "advanced",
	mode : "textareas",
	plugins : "template",
	theme_advanced_buttons3_add : "template",
	template_cdate_classes : "cdate creationdate",
	template_mdate_classes : "mdate modifieddate",
	template_selected_content_classes : "selcontent",
	template_cdate_format : "%m/%d/%Y : %H:%M:%S",
	template_mdate_format : "%m/%d/%Y : %H:%M:%S",
	template_replace_values : {
		username : "Jack Black",
		staffid : "991234"
	},
	template_templates : [
		{
			title : "Editor Details",
			src : "editor_details.htm",
			description : "Adds Editor Name and Staff ID"
		},
		{
			title : "Timestamp",
			src : "time.htm",
			description : "Adds an editing timestamp."
		}
	]
});</code></pre>
]]>
    </content>
</entry>

<entry>
    <title>ソーシャルブックマークボタンの利用状況</title>
    <link rel="alternate" type="text/html" href="http://tech.ludicmind.net/cat30/post_21.html" />
    <id>tag:tech.ludicmind.net,2010://1.130</id>

    <published>2010-02-18T05:58:38Z</published>
    <updated>2010-02-18T06:56:45Z</updated>

    <summary>Yahoo!検索で「ニュース」と検索して出てきたトップ10のサイトでの、ソーシャ...</summary>
    <author>
        <name>harry</name>
        <uri>http://www.ludicmind.net/</uri>
    </author>
    
        <category term="ウェブサービス" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="調査" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.ludicmind.net/">
        <![CDATA[<p>Yahoo!検索で「ニュース」と検索して出てきたトップ10のサイトでの、ソーシャルブックマーク等の登録ボタン利用状況。</p>
<table style="margin-top: 20px">
<tr>
<th></th>
<th>Yahoo!ニュース</th>
<th>asahi.com</th>
<th>MSN 産経ニュース</th>
<th>日テレNews24</th>
</tr>
<tr>
<th>はてなブックマーク</th>
<td style="text-align: center">○</td>
<td style="text-align: center">○</td>
<td style="text-align: center">×</td>
<td style="text-align: center">○</td>
</tr>
<tr>
<th>Yahoo!ブックマーク</th>
<td style="text-align: center">○</td>
<td style="text-align: center">○</td>
<td style="text-align: center">×</td>
<td style="text-align: center">○</td>
</tr>
<tr>
<th>ライブドアクリップ</th>
<td style="text-align: center">○</td>
<td style="text-align: center">○</td>
<td style="text-align: center">×</td>
<td style="text-align: center">○</td>
</tr>
<tr>
<th>del.icio.us</th>
<td style="text-align: center">×</td>
<td style="text-align: center">○</td>
<td style="text-align: center">×</td>
<td style="text-align: center">○</td>
</tr>
<tr>
<th>Newsing</th>
<td style="text-align: center">○</td>
<td style="text-align: center">×</td>
<td style="text-align: center">×</td>
<td style="text-align: center">×</td>
</tr>
<tr>
<th>Buzzurl</th>
<td style="text-align: center">○</td>
<td style="text-align: center">○</td>
<td style="text-align: center">×</td>
<td style="text-align: center">○</td>
</tr>
<tr>
<th>Choix</th>
<td style="text-align: center">○</td>
<td style="text-align: center">×</td>
<td style="text-align: center">×</td>
<td style="text-align: center">×</td>
</tr>
<tr>
<th>イザ！</th>
<td style="text-align: center">○</td>
<td style="text-align: center">×</td>
<td style="text-align: center">×</td>
<td style="text-align: center">×</td>
</tr>
<tr>
<th>Twitter</th>
<td style="text-align: center">×</td>
<td style="text-align: center">○</td>
<td style="text-align: center">×</td>
<td style="text-align: center">○</td>
</tr>
<tr>
<th>ブログ</th>
<td style="text-align: center">×</td>
<td style="text-align: center">○</td>
<td style="text-align: center">○</td>
<td style="text-align: center">×</td>
</tr>
</table>
<p>YOMIURI ONLINEは独自の「クリップ」、gooニュースはgooブログのみ、livedoorニュースは無し、NIKKEI NETも無し、Googleニュースは各ニュースサイトに飛ばすのでそもそも無し。<br />
この状況を見る限りだと、ソーシャルブックマークは徐々に衰退中のように思えるけど、実際どうでしょうね。</p>]]>
        
    </content>
</entry>

<entry>
    <title>Safari CSS Reference: -webkit-transition</title>
    <link rel="alternate" type="text/html" href="http://tech.ludicmind.net/browser/safari/safari_css_reference_-webkit-t.html" />
    <id>tag:tech.ludicmind.net,2010://1.129</id>

    <published>2010-02-15T02:49:58Z</published>
    <updated>2010-02-15T03:30:05Z</updated>

    <summary>以下はSafari CSS Referenceの-webkit-transiti...</summary>
    <author>
        <name>harry</name>
        <uri>http://www.ludicmind.net/</uri>
    </author>
    
        <category term="Safari" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="iPhone" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="ブラウザ" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="モバイル" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.ludicmind.net/">
        <![CDATA[<p>以下は<a href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html">Safari CSS Reference</a>の-webkit-transitionに関する項目も和訳かつ要約です。</p>]]>
        <![CDATA[<h3>-webkit-transition</h3>
<p>-webkit-transition-delay,-webkit-transition-duration,-webkit-transition-property, そして -webkit-transition-timing-functionを、1つのプロパティで組み合わせる。</p>
<h4>構文</h4>
<pre><code>-webkit-transition: property duration timing_function delay [, ...]</code></pre>
<h3>-webkit-transition-delay</h3>
<p>トランジッションの開始タイミングを定義する。</p>
<h4>構文</h4>
<pre><code>-webkit-transition-delay: time [, ...]</code></pre>
<h4>パラメータ</h4>
<dl>
<dt>time</dt>
<dd>0は即開始。If the value is negative, the transition executes the moment the property changes but appears to begin at the specified negative offset--that is, begins part-way through the transition. 0でない値は単位が必要。秒ならs、ミリ秒ならms、マイナス値は不可。デフォルトは0。</dd>
</dl>
<h4>定数</h4>
<dl>
<dt>now</dt>
<dd>即開始。iPhone OS 2.0 以降。</dd>
</dl>
<h4>使用可能</h4>
<p>iPhone OS 2.0以降、Safari 4.0以降。</p>
<h3>-webkit-transition-duration</h3>
<p>トランジッションにかかる時間。</p>
<h4>構文</h4>
<pre><code>-webkit-transition-duration: time [, ...]</code></pre>
<h4>パラメータ</h4>
<dl>
<dt>time</dt>
<dd>0ならアニメーションなし。マイナス値は0として扱われる。0以外は単位が必要。s、ms。マイナスは不可。デフォルトは0。</dd>
</dl>
<h4>使用可能</h4>
<p>iPhone OS 2.0以降、Safari 3.1以降。</p>
<h3>-webkit-transition-property</h3>
<p>トランジッションが適用されるCSSプロパティ名を指定する。</p>
<h4>構文</h4>
<pre><code>-webkit-transition-property: name;</code></pre>
<h4>パラメータ</h4>
<dl>
<dt>name</dt>
<dd>トランジッション名。複数指定可能。そのまま書き、クォートは必要ない。デフォルト値はall。</dd>
</dl>
<h4>定数</h4>
<dl>
<dt>none</dt>
<dd>指定なし。</dd>
<dt>all</dt>
<dd>デフォルト値。</dd>
</dl>
<h4>使用可能</h4>
<p>iPhone OS 2.0以降、Safari 3.1以降。</p>
<h3>-webkit-transition-timing-function</h3>
<p>トランジッション中どのように処理するかを指定する。</p>
<h4>構文</h4>
<pre><code>-webkit-transition-timing-function: timing_function [, ...]</code></pre>
<h4>パラメータ</h4>
<dl>
<dt>timing_function</dt>
<dd>タイミング関数</dd>
</dl>
<h4>定数</h4>
<dl>
<dt>ease</dt>
<dd>cubic-bezier(0.25, 0.1, 0.25, 1.0)と等しい。</dd>
<dt>linear</dt>
<dd>cubic-bezier(0.0, 0.0, 1.0, 1.0)と等しい。</dd>
<dt>ease-in</dt>
<dd>cubic-bezier(0.42, 0, 1.0, 1.0)と等しい。</dd>
<dt>ease-out</dt>
<dd>cubic-bezier(0, 0, 0.58, 1.0)と等しい。</dd>
<dt>ease-in-out</dt>
<dd>cubic-bezier(0.42, 0, 0.58, 1.0)と等しい。</dd>
</dl>
<h4>Discussion</h4>
<p>タイミング関数は立方体のベジェ曲線を使用して指定される。詳しくは<a href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/Functions.html#//apple_ref/css/func/cubic-bezier">cubic-bezier</a>を参照。デフォルトはease。</p>
<h4>使用可能</h4>
<p>iPhone OS 2.0以降、Safari 3.1以降。</p>
]]>
    </content>
</entry>

</feed>

