自販機レベルまで温める／冷やすことができる1本用ドリンク・クーラー＆ヒーター「MOBICOOL D03AC/DC」
節電のためか職場が異様に寒く、せめて買ってきた温かい缶コーヒーを温めようと思い購入しました（節電に貢... [ all ]
節電のためか職場が異様に寒く、せめて買ってきた温かい缶コーヒーを温めようと思い購入しました（節電に貢献できなくてすいません）。
当初、USB式の「カップウォーマー」というもので探していたのですが、期待する温度に全く到達しないことが分かりました。
ということで、通常の100V電源が利用タイプにしようと思ったのですが、「1本だけを温めるコンパクトなタイプ」というのがなかなか見つからず、ようやく見つかったのがこの1種類のみです。余談ですが、コンビニにある、缶を温める機械のことを業界用語で「缶ウォーマー」と呼ぶらしいです。
購入の決め手になったのは、Amazonのレビューがほとんどなかった代わりに、楽天のレビューでかなり評価が良かったためです。以下のページには2012年1月現在で20件のレビューがありますが、全体で4.2とかなりの高評価です。また、多くのショップで売り切れ・在庫切れというのもありました。
レビューの内容も含めて、「MOBICOOL D03AC/DC」のメリット・デメリットを挙げておきます。
メリット
- 温・冷ともに自販機並の温度になる（冷やすと水滴がつくくらい、温めると持てないくらい）
- 高さの異なる缶やペットボトルが利用可能
デメリット
- 常温から冷やしたり温めるする場合は時間がかかる
- 190ml缶は温まりにくい
「ファンの音がうるさい」という評価もありましたが、そうでないという方もいるので製品でばらつきがあるのかもしれません。
なお、このペルチェ式というもので、環境に良くないフロンガスが発生することはありません。さらにアルミマグカップが付属でついているので、自分で淹れた珈琲や他の飲料を保温するのにも使えそうです。
以下、製品仕様です（ドリンク・クーラー D03AC/DCより引用）。
| 機能 | 冷却・加熱 |
| 容量 | 350mL、500mL缶 同様サイズのペットボトル等もOKです。 |
| 電源 | 12VDC |
| 消費電力 | 最大20W |
| 保冷/保温方式 | ペルチェ式 |
| 保冷/保温温度 | 冷却：外気温マイナス最大22℃ 加熱：最大60℃（いずれも外気温による） |
| 付属品 | アルミマグカップ、AC/DCアダプター付きAC電源ケーブル、シガーオスプラグ付きDC電源ケーブル、 |
| サイズ | 145 x 110 x 130mm |
| 重量 | 600g |
ちなみに到着した品物はすべて英語か他の外国語で書かれていました（もちろん国内で使えます）。
2012年1月現在では、Amazonといくつかのオンラインショップで購入可能です。売り切れているショップも再入荷されるのかもしれませんが、気になる方はお早めにどうぞ。
FacebookのOGPをチェックする方法
すでにご存知の方も多いと思いますが、FacebookのOGP（Open Graph Protocol... [ all ]
すでにご存知の方も多いと思いますが、FacebookのOGP（Open Graph Protocol）がウェブサイトのページ上に適正に設定されていることをチェックする方法を紹介します。
１．OGP（Open Graph Protocol）とは
OGPとは、ソーシャルグラフ内で任意のウェブページを表現するための情報を提供する技術で、次のようなmeta要素を指します。
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />OGPを設定すれば、Facebook上で該当のページを紹介するときにページのURLを貼り付けるだけで、次のように適切な内容が反映されます。犬の画像はog:imageに設定した画像、説明はog:descriptionに設定した内容です。
またOGPを設定しておけば、ページに設定した「いいね！」ボタンを押したときの公開範囲が友達のニュースフィードに拡大されるという大きなアドバンテージがあります。
ちなみにOGPはミクシィやグリーでも利用されているようです。それらの設定方法については別途エントリーしようと思います。
２．OGPをチェックする
本題です。OGPの設定はページごとに手作業で設定するのではなく、Movable TypeやWordPressなどのCMSでOGPを自動出力するケースが多いと思います。
<meta property="og:title" content="<$mt:EntryTitle$>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<$mt:EntryPermalink$>" />
<meta property="og:image" content="<mt:EntryAssets lastn="1"><$mt:AssetURL<></mt:EntryAssets>" />このような場合、きちんとしたOGPが出力されていることを確認する必要があると思います。また、OGPの設定内容（つまりCMSのテンプレートタグ）を変更した場合も確認した方が良いでしょう。
OGPをチェックするには、Facebookの「Debugger」を利用します。
「Input URL」に、確認したいページのURLを入力して「デバッグ」をクリック。
次のように青色のメッセージだけが表示されればOKです。「Object Properties」にOGPの取得内容が表示されます。
プロパティの設定が不足している場合などは次のような警告が表示されます。
致命的な問題がある場合は次のようなエラーが表示されます。ちなみにこのエラー原因は、og:urlの内容が存在しないURLを設定したためです。
３．その他
Debuggerではmeta要素部分のみのチェックのようですが、html要素にも次のような設定が必要となりますので、忘れないようにしましょう。
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#">Movable Typeのテーマにウェブページを利用できる「PageImExporterプラグイン」バージョンアップ（カスタムフィールド対応）
Movable Typeのテーマにウェブページを利用できる「PageImExporterプラグイン」... [ all ]
Movable Typeのテーマにウェブページを利用できる「PageImExporterプラグイン」をバージョンアップしました。
１．変更点
カスタムフィールドの定義自体はMTのデフォルト機能でエクスポート・インポートができますが、ウェブページに入力したカスタムフィールドデータについてはエクスポート・インポートができませんでした。
今回のバージョンアップで、ウェブページのエクスポート時にカスタムフィールドデータを含むようにしました。カスタムフィールドはすべての種類に対応しています。
ウェブサイト構築で開発環境から本番環境にウェブページのデータを移行する場合などにご利用ください。
今回のバージョンアップでプラグイン名も「PageExporter」から「PageImExporter」に変更しました。
２．カスタムフィールドのtheme.yamlでの定義方法
theme.yamlのカスタムフィールドデータは「field.ベースネーム」で定義します。theme.yamlのサンプルは以下の通りです。青色の部分がカスタムフィールドの定義イメージになります。
…前略…
elements:
plugin_default_pages:
component: ~
data:
30:
allow_comments: 1
allow_pings: 1
asset_labels: ''
authored_on: 20100403174432
basename: post
convert_breaks: __default__
created_on: 20110707144724
excerpt: ~
field.cfimage: オレンジ
field.cfselect: 100
field.cftext: 北海道
field.cfcehckbox: 0
field.cfurl: http://user-domain/
…後略…手動でtheme.yamlを作成する場合はこのように設定してください。チェックボックスは「0」または「1」、アイテムについては、アイテムの名前を設定すると同時に
「asset_labels:」の項目を追加します。アイテムの設定方法については後述します。
３．カスタムフィールドのデータ移行時の注意
カスタムフィールドを含むウェブページのエクスポートデータを開発環境から本番環境に移行する場合、カスタムフィールドの定義を事前にインポートしてください。
４．カスタムフィールドのアイテムについて
３項に加え、カスタムフィールドに画像などのアイテムを含む場合、利用するアイテムを事前にインポートしてください。
アイテムのエクスポート・インポートには「AssetExporterプラグイン」で行えます。
インポート済みのアイテムと、ウェブページのカスタムフィールドで利用するアイテムをひもづけるのは、アイテムのラベル（アイテム編集画面の「名前」）です。テーマ適用時に同じラベル名のアイテムが存在すれば、自動的にプログ記事のカスタムフィールドのアイテムとして登録することができます。
例えば、ブログ（またはウェブサイト）のアイテムに3つの画像「車」「オレンジ」「コーヒー」が登録されているものとします。
そしてウェブページのカスタムフィールドのアイテムに、この3つの画像を登録しています。
このウェブページをテーマに（バージョンアップしたプラグインを使って）エクスポートします。
エクスポートすれば、エクスポートしたtheme.yamlの該当記事にカスタムフィールド（青色部分）と「asset_labels:」にカスタムフィールドのアイテムに登録しているラベル名が設定されます（赤色部分）。
---
author_link: ''
class: blog
description: ''
elements:
plugin_default_pages:
component: ~
data:
30:
allow_comments: 1
allow_pings: 1
asset_labels: コーヒー,車,オレンジ
authored_on: 20120125173322
basename: post
convert_breaks: __default__
created_on: 20120125173322
excerpt: ~
field.pagecfimage1: コーヒー
field.pagecfimage2: 車
field.pagecfimage3: オレンジ
…後略…このテーマを別のブログにインポート（適用）する際に、同名のラベル名のアイテムが予め登録されていれば、テーマ適用後にウェブページのカスタムフィールドに該当のアイテムが登録される、という仕組みです。
５．プラグインのダウンロード
PageImExporterプラグインは下記のリンク先からダウンロードできます。
WordPressのカテゴリーリストに新着マークを表示する「wp_list_categories_with_newmarkプラグイン」
WordPressのカテゴリーリストに新着マークを表示する「wp_list_categories_w... [ all ]
WordPressのカテゴリーリストに新着マークを表示する「wp_list_categories_with_newmarkプラグイン」を公開します。以前コメントでご要望を頂いていたものです。
１．機能
カテゴリーリストの該当カテゴリーに新着記事がある場合、「New!!」などの新着表示を行います。新着マークに画像を表示させることもできます。
下のスクリーンショットはTwentyElevenテーマで表示させたサンプルです。
２．プラグインのダウンロード・インストール
以下のリンクからプラグインをダウンロードしてください。
変更履歴
2012.01.25 v0.1 初版
プラグインのご利用および質問に対する回答等について、ご支援・ご賛同くださる方からの寄付をお待ち申し上げます。
アーカイブを展開し、中にあるwp_list_categories_with_newmarkフォルダをpluginsディレクトリにアップロードしてください。
アップロード後、管理画面で「List Folder」の有効化をクリックします。
３．カテゴリーリストの設定
「外観」→「ウィジェット」をクリックして、「新着表示つきカテゴリー」を使用中の任意のウィジェットエリアにドラッグ＆ドロップします。これで冒頭のスクリーンショットのようなカテゴリーリストが表示されるようになります。
ドラッグ＆ドロップしたウィジェットを開けば、以下の設定が可能です。
- タイトル：リストタイトルを設定します
- 新着にする記事投稿経過時間：新着扱いとする記事の投稿経過時間を設定します（デフォルト24時間）
- 新着マーク：「New!!」などの文字列またはimg要素を設定します
- 階層を表示：カテゴリーを階層表示します
４．新着表示のCSS
「New!!」などの新着表示部分のCSSは、以下のセレクタで行ってください。
.new { ... }デフォルトは、プラグインファイルに含まれるnewmark.cssで以下の設定を行っています。
.new {
color: #e50003;
}５．新着表示記事の条件について
新着記事の定義は「各カテゴリーに属する、公開日時が最新の記事」です。具体的な取得条件は、プラグインファイルに含まれるwp_list_categories_with_newmark.phpの254行目あたりにある、
$posts = get_posts('numberposts=1&category='.$category->cat_ID.'&orderby=date&order=DESC');となっています。
フォームの<input type="file" />の値をjQueryでリセット（クリア）する方法
フォームの<input type="file" />の値をjQueryでリセット（クリア... [ all ]
フォームの<input type="file" />の値をjQueryでリセット（クリア）する方法を紹介します。
１．問題点
フォームの値をリセット（クリア）する場合、通常はtype属性が「reset」のボタンですべてクリアできます。<input type="file" />の値も同様にリセットされます。
HTML
<form id="bar" action="foo.cgi">
<input type="file" />
<input type="reset" value="リセット" />
</form>JavaScript（jQuery）でリセットしたい場合、次のように記述すればいいように思われます。
HTML
<form id="bar" action="foo.cgi">
<input type="file" id="file" />
<input type="button" value="リセット" />
</form>jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$('input[type=button]').click(function(){
$('#file').val('');
});
</script>Firefoxやchromeでは期待する動作になるようですが、IEではブラウザの仕様（セキュリティ？）で、type属性「file」の値を書き換えることができないようです。
２．値をクリアする方法1
クロスブラウザでtype属性「file」の値をクリアするには、次の方法で実現できます。厳密にはクリアではなく、replaceWith()で要素を置き換えています。
HTML
<form id="bar" action="foo.cgi">
<input type="file" id="file" />
<input type="button" value="リセット" />
</form>jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$('input[type=button]').click(function(){
$('#file').replaceWith('<input type="file" id="file" />');
});
</script>３．値をクリアする方法2
２項よりHTMLマークアップがやや冗長になりますが、次の方法でもクリアできます。
HTML
<form id="bar" action="foo.cgi">
<span id="file"><input type="file" /></span>
<input type="button" value="リセット" />
</form>jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$('input[type=button]').click(function(){
$('#file').html($('#file').html());
// または $('#file').html('<input type="file" />');
});
</script>４．resetボタンでクリアする
本題からそれますが、type属性「reset」のボタンでファイルアップロードフィールドのみをリセットする場合は次のようにします。
HTML
<form id="bar" action="foo.cgi">
<input type="file" id="file" />
<input type="text" id="text" />
<input type="reset" value="リセット" />
</form>jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$('input[type=reset]').click(function(){
// resetボタンのデフォルト動作（フォーム全体のクリア）を抑止
e.preventDefault();
$('#file').replaceWith('<input type="file" id="file" />');
});
</script>preventDefault()を利用して、リセットボタンのデフォルト動作（＝全フィールドのリセット）を無効にして、ファイルアップロードフィールドのみをリセットします。
