小粋空間  -  a cheap joke and a play on words site

インストール不要なスクリーンキャスト（動画キャプチャ）サービス「Screencast-O-Matic」を紹介します。

Screencast-O-Matic

スクリーンキャスト（動画キャプチャ）はクライアントにインストールするタイプが主流のようですが、「Screencast-O-Matic」はブラウザから起動するだけで簡単に録画が行えます。録画した動画はYouTubeに連携してアップロードすることも可能です。

「Screencast-O-Matic」は少なくとも2007年から続いている、ある意味老舗のサービスのようです。無償で利用する場合は最大15分録画できます。有償サービスを利用すれば無制限に録画できます。

以下、操作方法を紹介します。

１．録画の準備

Screencast-O-Maticのサイトにアクセスして、「Start Recording」をクリック。アカウント取得やログインを行わなくても動作可能です。

Screen Recorderのローディング画面が表示されます。いつまでたってもこの画面から切り替わらない場合は、ローカルPCにJavaがインストールされていないため、６項を参照してインストールしてください（「インストール不要」という謳い文句がうそっぽい感じになってしまいますがそれはおいといて）。

ローディングが完了しました。

完了すると同時に、次の画面（Screen Recorder）が表示されると思います。点線の矩形がスクリーンキャスト範囲になります。点線枠の四隅などに表示されている小さい四角をドラッグすれば、点線の範囲を変形できます。変更したときのサイズは下に表示されます。点線か真ん中のメッセージをドラッグすれば矩形を移動できます。マイクや音量などの設定も下部のアイコンで行えるようです。

２．録画

左下の赤い録画ボタンをクリックすると、次のようにカウントダウンが開始します。

「Go」が出て次の表示になれば録画開始です。左下の一時停止ボタンで録画を止めることができます。右側の「Done」は録音終了です。「Restart」をクリックすると最初からやり直します。

上のスクリーンショットは真っ白な背景でキャプチャしていますが、実際には録画したい画面が表示されます。ここでは「HTML5のcanvasを使ったお絵かきツール詳説」で作ったお絵かきツールの動画を録ってみました。

下の動画が実際に録ったものです。マウスポインタの移動やクリックなどもアニメーションで表示されるので非常に分かりやすいです。

３．プレビュー

録画を止めるとプレビュー画面が表示されます。

このような感じでプレビューできます。

４．YouTubeへのアップロード

録画した内容はローカルPCにダウンロードすることもできますが、ここではYouTubeにアップロードしてみます。「Publish to YouTube HD」をクリック。

タイトル、説明などを入力します。

「Upload to YouTube」をクリック。

初回の場合またはログインしていない場合は次のような承認リクエスト画面が表示されるので「アクセスを許可」をクリックします。

エンコード中です。

アップロード中です。

アップロード完了しました。アップロード先のリンクも表示されます。

リンクをクリックします。無事にYouTubeにアップロードされました。タイトルや説明なども反映されています。

５．録画内容の消去

録画内容の消去するには「Screencast-O-Matic」を再度起動します。起動すると、前回の録画とともに画面右側に次のメッセージが表示されます。

「Delete」をクリックすれば前回の録画が削除されて、新しいスクリーンキャスト画面が表示されます。「Use Recording」をクリックすれば前回の録画画面に戻ります。

６．Javaのインストール

Javaのダウンロードのページにある「無料Javaのダウンロード」をクリックして、ダウンロードしたファイルを実行すればインストールが行えます。

以上です。直感的に操作できるので個人的には大変重宝しています。他にも色々な機能がありそうなので、機会があればまた紹介したいと思います。

HTML5のWebsocket（Node.js+Socket.IO）を使って、チャットが行えるサンプルを作ってみました。Node.js+Socket.IOについては、下記のエントリーを参照してください。

Windows+Node.js+Socket.IO

環境を作ったのは自分のPCのためリアルでお見せできないのが残念ですが、動画をキャプチャしたのでそちらでご確認ください。

１．サンプル動画

2つのブラウザからそれぞれ「http://127.0.0.1:8124」にアクセスして、チャットを行います。入力した文字列を送信すると、送信者およびページにアクセスしているブラウザに内容を反映します。

下の表示は画面が小さいので、全画面表示にするかYoutubeのサイトで直接見た方がいいかもしれません。

Websocket Chat Sample

２．サンプルコード

Node.jsとSocket.IOを使ったサンプルコードを掲載しておきます。

色々ネットを探しましたが（探しきれてないかもしれません）、Node.js+Socket.IOでチャットを行う適当なコードがみつからなかったので自作しました。Node.jsやSocket.IOに精通されている方にとっては当たり前のような実装かと思います。冗長な部分等ありましたらご指摘ください。

app.js（サーバ側のソース）

var app = require('express').createServer()
  , io = require('socket.io').listen(app);
app.listen(8124);
 
app.get('/', function (req, res) {
    res.sendfile(__dirname + '/index.html');
});
 
io.sockets.on('connection', function (socket) {
 
    // クライアントからメッセージ受信
    socket.on('server send', function (msg) {
 
        // ブロードキャストで送信
        io.sockets.emit('send user', msg );
    });
 
    // 切断 
    socket.on('disconnect', function () {
        io.sockets.emit('user disconnected',count);
    });
});

index.html（クライアント側のソース）

<style>
body {
    margin: 20px;
}
p {
    margin: 5px 0;
    padding: 5px 0;
    border-bottom: 1px solid #000;
}
dt{
    margin-top: 5px;
    width: 100px;
    float: left;
    text-align: right;
}
dd{
    margin: 5px 0 5px 100px;
}
input {
    font-size: 100%;
    padding: 5px;
}
#message {
    width: 400px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
jQuery(function(){
  var socket = io.connect('http://localhost');
 
  // サーバからメッセージ受信
  socket.on('send user', function (msg) {
      jQuery('#chat').prepend('<p>'+msg+'</p>');
  });
  jQuery('input[type=submit]').click(function(){
      var name = jQuery('#name').val();
      var message = jQuery('#message').val();
 
      // サーバへメッセージ送信
      socket.emit('server send', name+'：'+message);
  });
});
</script>
<div>
  <dl>
    <dt>名前：</dt><dd><input type="text" id="name"></dd>
    <dt>メッセージ：</dt><dd><input type="text" id="message" size="140" /></dd>
    <dd><input type="submit" value="送信" /></dd>
  </dl>
  <hr />
  <div id="chat"></div>
</div>

３．サーバへのデータ送信方法

サーバへ文字列を送信するには、まず、クライアント側にsocket.emit()を記述します（青色部分）。

クライアント側

jQuery('input[type=submit]').click(function(){
    var name = jQuery('#name').val();
    var message = jQuery('#message').val();
    socket.emit('server send', name+'：'+message);
});

「emit」は「送信する」という意味の英単語で、サーバ・クライアントどちらでも使えます。赤色は送受信のためのカスタムイベントで、ここでは任意の文字列「server send」を記述しています。第2パラメータには送信ボタンをクリックしたときのテキストフィールドデータ（チャットの名前と文字列）の関数を定義しています。

そして、クライアントからのデータを受信できるよう、サーバ側にsocket.on()を記述します。

サーバ側

io.sockets.on('connection', function (socket) {
    socket.on('server send', function (msg) {
        // 受信メッセージの処理
    });
});

第1パラメータのカスタムイベント名はクライアントで設定したものと一致していなければいけません。ここが一致していないとサーバで受信できません。第2パラメータはデータ受信時の関数を定義します。パラメータ（ここではmsg）には受信時のデータを定義できます。

４．クライアントへの送信方法

クライアントへブロードキャストで文字列を送信するには、まず、サーバ側にio.sockets.emit()を記述します（青色部分）。

サーバ側

io.sockets.on('connection', function (socket) {
    socket.on('server send', function (msg) {
        io.sockets.emit('send user', msg);
    });
});

赤色は先程と同様、カスタムイベントで、ここでは任意の文字列「send user」を記述します。第2パラメータにはクライアントから受信したチャットデータ（msg）を設定しています。

そして、サーバからのデータを受信できるよう、クライアント側にsocket.on()を記述します。

クライアント側

socket.on('send user', function (msg) {
    jQuery('#chat').prepend('<p>'+msg+'</p>');
});

受け取るクライアントでは、サーバ側のemit()の第1引数（赤色のイベント名）を必ず指定します。ここが一致していないとクライアントで受信できません。第2パラメータはデータ受信時の関数を定義します。パラメータ（ここではmsg）には受信時のデータを定義できます。

受信後、チャットデータ（msg）をjQueryのprepend()を使って表示します。

以上です。サンプルのHTML・CSS・jQueryの説明は割愛しています。

Movable Type 5.1でお気に入りリストが作れる「Linklistプラグイン」をバージョンアップしました。

１．機能

このプラグインを利用すれば、次のようなリンクリストを簡単に作ることができます。

リンクはリンク作成画面から登録します。

登録したリンクは、MT5.1のリスティングフレームワークを利用して管理できます。

２．修正点

一旦保存したデータを更新すると、新規データとして保存される不具合を修正しました（大ボケでした、すいません…）。

また、MTLinkListタグに次の2種類のモディファイアを設定できるようにしました。これによりリンクリストの柔軟なソートが可能になります。

sort_byモディファイア

リンクリストの並び替え対象を設定します。

• 　title：「タイトル」フィールドでソート
• 　description：「説明」フィールドでソート
• 　url：「URL」フィールドでソート
• 　created_on：作成日時でソート
• 　modified_on：修正日時でソート

設定がない場合は「title」でソートします。

sort_orderモディファイア

リンクリストの並び替える方向を設定します。

• 　ascend：昇順にソート
• 　descend：降順にソート

設定がない場合は「ascend」でソートします。

モディファイアの設定サンプル

「説明」フィールドを使って降順にソートする場合は、次の青色部分を追加します。「説明」フィールドに、表示させたい順番に番号を設定すれば任意の順序で表示させることができます。

<mt:Linklist sort_by="description" sort_order="descend">
  <mt:LinklistHeader>
<div class="widget-archives widget">
  <h3 class="widget-header">お気に入り</h3>
  <div class="widget-content">
    <ul>
  </mt:LinklistHeader>
    <li><a href="<$mt:LinkURL$>"><$mt:LinkTitle$></a></li>
  <mt:LinklistFooter>
    </ul>
  </div>
</div>
  </mt:LinklistFooter>
</mt:Linklist>

３．プラグインのダウンロード

LinkListプラグインは以下のリンク先からダウンロードできます。

Movable Type 5でお気に入りリストが作れる「Linklistプラグイン」

節電のためか職場が異様に寒く、せめて買ってきた温かい缶コーヒーを温めようと思い購入しました（節電に貢献できなくてすいません）。

当初、USB式の「カップウォーマー」というもので探していたのですが、期待する温度に全く到達しないことが分かりました。

参考：ITmedia - 実験：USBカップウォーマーはどこまで実用的か

ということで、通常の100V電源が利用タイプにしようと思ったのですが、「1本だけを温めるコンパクトなタイプ」というのがなかなか見つからず、ようやく見つかったのがこの1種類のみです。余談ですが、コンビニにある、缶を温める機械のことを業界用語で「缶ウォーマー」と呼ぶらしいです。

購入の決め手になったのは、Amazonのレビューがほとんどなかった代わりに、楽天のレビューでかなり評価が良かったためです。以下のページには2012年1月現在で20件のレビューがありますが、全体で4.2とかなりの高評価です。また、多くのショップで売り切れ・在庫切れというのもありました。

楽天市場 - ポータブルドリンクヒーター＆クーラー電気式ホルダーで温め＆冷却オフィス・インドア・ドライブ・レジャー用MOBICOOL　D03AC/DC

レビューの内容も含めて、「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（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」を利用します。

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プラグイン」をバージョンアップしました。

１．変更点

カスタムフィールドの定義自体は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プラグインは下記のリンク先からダウンロードできます。

PageExporterプラグイン

WordPressのカテゴリーリストに新着マークを表示する「wp_list_categories_with_newmarkプラグイン」を公開します。以前コメントでご要望を頂いていたものです。

１．機能

カテゴリーリストの該当カテゴリーに新着記事がある場合、「New!!」などの新着表示を行います。新着マークに画像を表示させることもできます。

下のスクリーンショットはTwentyElevenテーマで表示させたサンプルです。

２．プラグインのダウンロード・インストール

以下のリンクからプラグインをダウンロードしてください。

変更履歴

2012.01.25 v0.1 初版

wp_list_categories_with_newmark_0_1.zip

プラグインのご利用および質問に対する回答等について、ご支援・ご賛同くださる方からの寄付をお待ち申し上げます。

アーカイブを展開し、中にある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でリセット（クリア）する方法を紹介します。

１．問題点

フォームの値をリセット（クリア）する場合、通常はtype属性が「reset」のボタンですべてクリアできます。<input type="file" />の値も同様にリセットされます。

HTML

<form id="bar" action="foo.cgi">
    <input type="file" />
    <input type="reset" value="リセット" />
</form>

サンプル1

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>

サンプル2

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>

サンプル3

３．値をクリアする方法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>

サンプル4

４．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>

サンプル5

preventDefault()を利用して、リセットボタンのデフォルト動作（＝全フィールドのリセット）を無効にして、ファイルアップロードフィールドのみをリセットします。

Facebook OGP（Open Graph Protocol）をブログやウェブサイトに設定されている方は多いと思いますが、2011年の後半に「og:locale」というパラメータが途中で追加されています。すでに修正されている方も多いと思いますが、本エントリーで紹介しておきます。

１．「og:locale」とは

Facebookのオープングラフ（Open Graph）のアクション／オブジェクトは多言語対応しており、サポートしているロケールを「og:locale」に定義することで適切な翻訳が行えるようです（説明が大雑把過ぎるかもしれませんが）。

本エントリーでお伝えしたいのはこの部分で、日本語しかサポートしていない場合は次のように「ja_JP」を設定したmeta要素を追加すると良いでしょう。

<meta property="og:locale" content="ja_JP" />

複数の言語をサポートしている場合は、次のように「alternate」を設定し、content属性をさらに追加します。

<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />

og:localeを含め、アクション／オブジェクトの国際化の詳細については「Internationalization」を参照してください。

２．「og:locale」の設定有無を調べる方法

ページのソースコードを直接参照するか、Facebookのデバッガ（Debugger）で該当のURLをチェックして、次のようなワーニング（赤枠部分）が表示されることで分かります。

エラーではなく警告ですが、メッセージは「That Should Be Fixed」となっています。また詳細メッセージでも、「他のタグから（ロケールの値を）推測できるとしても、og:localeは明示的に提供されるべき」とあるので、修正を推奨しているようです。

「モバツイ」の開発に関わる書籍の紹介です。著者の藤川真一さん（えふしんさん）から技術評論者様経由で献本いただきました。ありがとうございました。

「モバツイ」をご存知ない方はいないと思いますが、改めて紹介させていただくと、ツイッターをケータイやスマホなどで閲覧するためのウェブサービスです。2007年に開始し、現在の登録者数は150万人だそうです。

多くのウェブサービスが存在する中、モバツイは成功した数少ないウェブサービスのひとつと言えるでしょう。本書はそのモバツイの開発者であるえふしんさん自ら、ツイッターがどうしてメジャーになれたかといった分析や、モバツイのサービス開始から現在に至るまでに開発を通して感じたことが綴られています。

また、モバツイのユーザー数の増加やプラットフォームであるツイッターの障害によってさまざまな問題が発生し、それらに対してどのようにして対応、あるいは乗り越えてきたかというノウハウも記されており、ウェブサービスを作りたいと思っている人、あるいはすでにウェブサービスを運用されている方にとって、非常に参考になるのではないかと思います。

全体を通して、えふしんさんのツイッター・モバツイに対する想いの深さが読み取ることができると同時に、端々にえふしんさんの細やかな気遣いが感じられる、好感のもてる文章です。

以下、目次です。

第1章 僕の起動はウェブ2.0からだった

　ウェブ業界も製造業と同じ道をたどってきた

　知らず知らずのうちにプラットフォーマーの傘の中に

　フロンティア精神から，ガチッとした構造の時代へ

　多くの屍の中で成功するデザインパターンが生まれた

　ウェブ2.0は瞬間風速のバズワードではない！

　新たなサービスは「組み合わせ」と「仕組み」から生まれる

　トップをめぐる争いは新たな舞台の上でずっと続く

第2章 ツイッターがメジャーになった理由の僕なりの分析

　シンプルなようで意外と複雑なツイッター

　リアルタイムのように見えて実は"非同期同期"

　おっさんのモバゲーになったのは大人にとって心地よかったから

　有名人や芸能人とも相性がよかった

　ボケとツッコミの関係から，徐々に緊張が高まるように

　半年で飽きると思われていたツイッター

　再発見されたツイッターの強み，抱えている弱み

　「非公式リツイート」のドタバタで僕が考えたこと

　大震災でツイッターが果たしたプラスとマイナスの役割

　小さく小さく分断された世界の集合体

　企業アカウントが「擬人化」されてファンを集めることも

　ツイッターとマーケティングのハッピーなかたちを探して

　ラベルに過ぎないハッシュタグにも人の感情がこもっている

第3章 主戦場のモバイルで、今思うこと

　モバイルは「普通のユーザー」にとってのインターネットへの入口

　大きく成功したのは"一般人"向けのケータイインターネット

　ガラケービジネスはスマートフォンビジネスに置き換わる

　猫も杓子もスマートフォンでは，携帯デバイスの本質を見失いませんか？

　今の楽しさが求められるから，携帯と相性がよかった

　イベントから吐き出されるものをシェアする役目

　つながりにくさの中で生まれた発想

　スマートフォンの甘く危険なニオイ

　スマートフォンをめぐる争い　現場の見方は？

　ブツ切れだったネット同士が融合していくと

第4章 モバツイの開発を通して僕が実感したソーシャル

　やらない理由はいくらでもある中で，「やってみよう」と思えた

　本当にうれしかった"ソーシャルデバッグ"の経験

　爆発的にユーザー数が増える一方で寂しさもあった

　成長したサービスには二通りのユーザーがいる

　一定のサイズになればユーザーからの反発は必ず起きる

　「やるなら早いうちに」は本当のこと

第5章 一人で始めたサービスがここまで大きく育った理由

　毎日使ってくれる10人をスタートの拠点に

　レッドオーシャンに参入してはいけない？

　お互い顔が見えている時期にやるべきこと

　どんなウェブサービスにも当てはまる「笑顔と感動」

　いつも頭に入れている仕様変更のときの心構え

　手応えがほしい　その気持ちから寄付を募る

　僕がアマゾンEC2を選んだ理由

　二つの賞の受賞は続けてきたことへのご褒美

　なぜ150万人のサービスに育ったのか，理由は三つしかない

第6章 どうする!?プラットフォームとの距離感

　プラットフォームに乗ること，プラットフォームを作ること

　集客動線に紐づくゆるい関係のプラットフォーム

　携帯電話，スマートフォンの独自の利用シーンから成るプラットフォーム

　SNSによる人間関係をベースにしたプラットフォーム

　プラットフォームとしてはパワー不足が否めない

　イノベーションを狙うニューカマー

　どの針路をとるにしても最後はあなた次第

さて、書籍の後半で、えふしんさんはモバツイが成功したポイントとして、次の3つに集約されています。

• プラットフォーム（ツイッター）が好きであること
• サービス（モバツイ）を作ってみたいと思うこと
• 作ったサービスを継続すること

ツイッター自体がサービスとして大きく成長したという要因も考えられますが、ツイッターの2007年の最初のブームが一旦おさまってから2009年に次の波がやってくるまでに、モバツイはウェブサービスとして継続されていたことは大きいのではないかと思います。つまり、国内ではモバツイの存在がなければここまで発展しなかったのではないでしょうか。

紹介の最後に、印象に残ったフレーズを引用させて頂きます。

つぶやきの一つひとつは ～略～ たとえどんなにたわいのない一言だったとしても、誰かに読んでもらいたいという思いが込められているものです。～略～ 一つひとつのつぶやきを大事にして、それを一人でも多くの人に読んでもらいたいと思っています。大量のつぶやきをさばくことよりも、一つひとつのつぶやきをより高い表現力で閲覧できること、これがモバツイの目指すところです。（P.198）

この部分を読んで、「モバツイはなんて素敵なサービスなんだろう！」と思いました。

ということで、陰ながらモバツイのさらなる発展を期待しています。

HTML5書籍の紹介です。著者の藤本さんよりアスキー・メディアワークス様経由で献本いただきました。ありがとうございました。

書籍名の通り、HTML5に対応したタグリファレンスで、W3Cの2011年5月25日の最終草案に対応しています。

メインのタグリファレンスは、すべての要素についての解説やブラウザ対応状況はもちろんのこと、サンプルコードとサンプル実行画面が掲載されており、直感的に分かるようになっています。タグリファレンス以外に、HTML5の概要と新たに追加された概念についても解説されているので、HTML5をこれから学びたいという方の助けになるでしょう。

また付録として、書籍の内容を収録したWebアプリケーションも用意されています。スマートフォンからアクセスすれば閲覧できるようになっていてかなりいい感じです。本体もフルカラーで2100円という手頃な価格ですが、このWebアプリケーションだけでも十分元がとれそうです。

以下、目次です。

第1章 HTML5の概要

　[1-1]HTML5の背景

　[1-2]HTML4、XHTMLとHTML5の違い

　[1-3]要素、タグ、属性

　[1-4]コンテンツモデルとカテゴリー

　[1-5]セクションとアウトライン

　[1-6]HTML5未対応のWebブラウザへの対応

第2章 ルート要素とドキュメントメタデータ

　HTML文書のルート（html）

　文書のメタデータ群（head）

　文書のタイトル（title）

　相対URLのベースとブラウジングコンテキストの指定（base）

　リソースへのリンクの指定（link）

　各種メタデータの指定（meta）

　埋め込みスタイルの指定（style）

第3章 セクション

　HTML文書のメインコンテンツ（body）

　文書内のセクション（section）

　文書内の個別記事（article）

　補足的な情報（aside）

　見出し（h1～h6）

　見出しのグループ化（hgroup）

　文書内のナビゲーション部分（nav）

　ヘッダー部分（header）

　フッター部分（footer）

　連絡先（address）

第4章 コンテンツのグループ化

　段落（p）

　区切り（hr）

　整形済み書式（pre）

　引用（blockquote）

　順序付きリスト（ol）

　順序なしリスト（ul）

　リストの項目（li）

　記述リスト（dl）

　用語、名前（dt）

　説明、定義（dd）

　図表などのフロー･コンテンツ（figure）

　図表などのキャプション（figcaption）

　汎用要素（div）

第5章 テキスト

　ハイパーリンク（a）

　強調（em）

　重要（strong）

　注釈（small）

　不正確、無関係（s）

　引証（cite）

　引用（q）

　定義（dfn）

　略語（abbr）

　日時（time）

　プログラムなどのコード（code）

　変数（var）

　出力サンプル（samp）

　入力（kbd）

　下付き（sub）

　上付き（sup）

　一般の文章との区別（i）

　注意（b）

　注意喚起（u）

　ハイライト（mark）

　ルビ（ruby）

　ルビとして振るテキスト（rt）

　かっこで囲むルビ（rp）

　双方向アルゴリズムからの分離（bdi）

　文字の流れる方向（bdo）

　特定部分を指定（span）

　改行（br）

　改行可能箇所（wbr）

第6章 編集

　追加（ins）

　削除（del）

第7章 埋め込みコンテンツ

　画像の表示（img）

　インラインフレーム（iframe）

　外部コンテンツの埋め込み（embed）

　オブジェクトの埋め込み（object）

　object要素のパラメータ（param）

　動画の再生（video）

　音声の再生（audio）

　動画、音声リソースのアドレス（source）

　メディア要素のテキスト・トラック（track）

　イメージマップ（map）

　イメージマップの領域定義（area）

　グラフィック描画用のキャンバス（canvas）

第8章 テーブル

　表（table）

　表の本体（tbody）

　表の見出し（thead）

　表の最後の見出し（tfoot）

　表の行（tr）

　表のデータセル（td）

　表の見出しセル（th）

　表のキャプション（caption）

　列のグループ化（colgroup）

　列（col）

第9章 フォーム

　フォーム（form）

　フィールドのグループ化（fieldset）

　フィールドのグループのキャプション（legend）

　フィールドのラベル（label）

　各種の入力（input）

　入力 隠し値（input type="hidden"）

　入力 各種1行テキストの入力（input【1行入力系】）

　入力 日付、時刻の入力（input【日時入力系】）

　入力 数値の入力（input type="number"）

　入力 大まかな数値の入力（input type="range"）

　入力 色の入力（input type="color"）

　入力 チェックボックス（input type="checkbox"）

　入力 ラジオボタン（input type="radio"）

　入力 アップロード（input type="file"）

　入力 送信（input type="submit"）

　入力 画像ボタンでの送信（input type="image"）

　入力 フォームのリセット（input type="reset"）

　ボタン（button）

　選択肢一覧からの選択（select）

　選択肢（option）

　選択肢のグループ化（optgroup）

　入力候補値のリスト（datalist）

　複数行テキストの入力（testarea）

　暗号鍵の送信（keygen）

　計算結果の表示（output）

　作業の進捗度の表示（progress）

　割合（meter）

第10章 インタラクティブ

　詳細部分の表示、非表示（details）

　details要素の要約（summary）

　コマンド（command）

　コマンドのリスト（menu）

第11章 スクリプティング

　スクリプトの組み込み（script）

　スクリプト非対応時の動作を指定（noscript）

HTMLの基礎知識はあるけれどHTML5がよく分からない方はもちろん、仕事でHTML5のマークアップをされている方も手元にあると便利な1冊です。

フォームのテキスト入力中にうっかりリターン（Enterキー）を押してしまい、中途半端なフォームが送信されてしまったという経験をした人は結構多いのではないかと思います。

ということで、リターン（Enterキー）でフォームを送信しないようにする方法を紹介します。この記事の投稿時点でのGoogle Chrome・Firefoxの最新版とIE9で同じ動作になることを確認しています。

１．リターンでフォームが送信される原因

次のように、type属性が「text」のinput要素、いわゆるテキストフィールドが含まれるフォームで、テキストフィールドがアクティブなときにリターンを押すとフォームが送信されてしまいます。

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="bar" />
  <input type="submit" value="送信" />
</form>

または

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="bar" />
  <button type="submit">送信</button>
</form>

type属性が「password」の場合も同様です。

２．送信ボタンを書き換える

送信ボタンを赤色のように、「type="button"」のinput要素またはbutton要素に書き換えることで、リターンによる送信を回避できます。

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="bar" />
  <input type="button" onclick="submit();" value="送信" />
</form>

または

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="bar" />
  <button type="button" onclick="submit();">送信</button>
</form>

つまり、type属性が「submit」のinput要素またはbutton要素を作らない、ということがポイントです。

onclick属性の部分をjQueryで書き直すと、次のようになります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
  $("input[type=button]").click(function(){
    $("form").submit();
  });
});
</script>
<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="bar" />
  <input type="button" value="送信" />
</form>

なお、フォームにテキストフィールドが1つしかない場合は次の対処も併せて行う必要があります。

３．テキストフィールドがフォームに1つしかない場合

次のように、テキストフィールド（またはパスワードフィールド）がフォームに1つしかない場合、２項の対処を行っても送信されてしまいます（下）。textareaや他のtype属性のinput要素が複数存在しても挙動は同じです。

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="button" onclick="submit();" value="送信" />
</form>

このような場合はダミーのテキストフィールドのinput要素を用意して、テキストフィールドが2つある状態にします。

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="dummy" style="display:none;">
  <input type="button" onclick="submit();" value="送信" />
</form>

４．押されたキーを判定して抑止する

３項まではtype属性が「submit」の要素を排除することで実現しましたが、ここでは押されたキーによって判定する方法を紹介します。

押されたキー（リターンは「13」）で判定するには次のようにします。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
  $("input[type=text]").keypress(function(ev) {
    if ((ev.which && ev.which === 13) ||
        (ev.keyCode && ev.keyCode === 13)) {
      return false;
    } else {
      return true;
    }
  });
});
</script>
<form action="hoge.cgi">
  <input type="text" name="foo" onkeypress="return entsub()" />
  <input type="submit" value="送信" />
</form>

この方法であればtype属性がsubmitのinput要素を使えるようです。

５．参考サイト

参考サイトは以下です。ありがとうございました。

• Netsphere Laboratories - Enterキーを打ってもsubmit（送信）しないようにするには
• xykの日記 - jQueryでENTERキーによるSubmitを防止する
• blog.nomadscafe.jp - エンターキーの押下でフォームの送信を行わないようにする
• Technical　Info - 各ブラウザのenterキー押下時の動作（submit)

Movable Typeの記事編集画面に登録アイテムを表示する「ShowAssetImage」プラグインを公開します。

１．機能

ブログ記事・ウェブページ編集画面の右下にある「アイテム」エリアで画像を登録した場合、保存後はファイル名にカーソルをあてないと画像が表示されませんが、プラグイン適用後は画像をダイレクトに表示します（保存後のみ）。

プラグイン適用前

プラグイン適用前（ファイル名にカーソルをあてたところ）

プラグイン適用後

２．プラグインのダウンロード・インストール

下記のリンクをクリックして、プラグインアーカイブをダウンロードします。

ShowAssetImage_0_01.zip

プラグインアーカイブを展開し、中にあるShowAssetImageフォルダごと、Movable Type のアプリケーションディレクトリのpluginsディレクトリにアップロードします。

システム管理画面のプラグイン設定画面で、「ShowAssetImage～」が表示されればインストール完了です。

10分くらいで作ったので表示がいまひとつですいません。今後は表示する画像のサイズも（可能であれば）設定可能なようにしたいと思います。

onsubmitイベントと「return false」を組み合わせてsubmitを適切に中断する方法を紹介します。

１．onsubmitイベントとは

onsubmitイベントは、フォームの送信ボタン（type属性がsubmitのボタン）がクリックされた時に発生するイベントです。

<form method="post" action="foo.cgi" onsubmit="foo();">
  <input type="text" value="" />
  <input type="submit" value="送信" />
</form>

２．submitを中断する（＝フォームを送信しない）方法

onsubmitイベントを使ってsubmitを中断するケースとして、送信時にJavaScriptでフォームのチェックをして、フォームデータに未入力の項目がある場合、「return false;」で送信を中止するというパターンがあると思いますが、中止したはずのに送信が実行されてしまうということがあります。

次のソースコードはその例で、未入力の項目がある場合に「return false」を行ってますが、送信は中断されません。

<script type="text/javascript">
function check() {
    for(i = 0; i < document.foo.length; i++) {
        if (document.foo.elements[i].type == "text") {
            if (document.foo.elements[i].value == '') {
                 alert("未入力の項目があります。");
                 return false;
            }
        }
    }
}
</script>
<form name="foo" action="foo.cgi" onsubmit="check();">
  <input type="text" id="a" value="" />
  <input type="text" id="b" value="" />
  <input type="submit" value="送信" />
</form>

原因は、赤色で示したform要素のonsubmit属性の記述が誤っているためです。

送信を中止するためには、onsubmit属性で起動した関数の返却値（false）をさらに返却する必要があります。つまり、

onsubmit="関数名"

ではなく、

onsubmit="return 関数名"

としなければなりません。

また、常に送信を中止したい場合は、

onsubmit="関数名; return false;"

と書けばよいでしょう。

先程のサンプルでは、次の青色部分のように修正すれば送信を中止します。

<script type="text/javascript">
function check() {
    for(i = 0; i < document.foo.length; i++) {
        if (document.foo.elements[i].type == "text") {
            if (document.foo.elements[i].value == '') {
                 alert("未入力の項目があります。");
                 return false;
            }
        }
    }
}
</script>
<form name="foo" action="foo.cgi" onsubmit="return check();">
  <input type="text" id="a" value="" />
  <input type="text" id="b" value="" />
  <input type="submit" value="送信" />
</form>

「true」はonsubmitイベントのデフォルト返却値なので、OKの場合に「return true;」を明示的に記述する必要はないと思います。

３．jQueryでの記述

jQueryで記述する場合は、次のようになるみたいです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
    $('#foo').submit(function(){
        var flag = 0;
 
        // フォームチェック
        $(this).find('input[type=text]').each(function(){
            if ($(this).val() == '') {
 
                // NGの場合
                flag = 1;
                return false; // break
            }
        });
        if (flag) {
            return false; // return
        }
    });
});
</script>
<form id="foo" action="foo.cgi">
  <input type="text" id="a" value="" />
  <input type="text" id="b" value="" />
  <input type="submit" value="送信" />
</form>

青色で示した、submit()ブロック内で「return false;」をすればフォームの送信を中止するようです。

each()ブロック内の赤色で示した「return false;」は、each()のループを脱出しているだけなので、間違えないように注意しましょう。

HTML5のcanvasを使ったお絵かきツールを勉強がてら作ってみました。下記の画像リンクをクリックすればサンプルページにジャンプします。

サンプル

以下、サンプルのHTMLとJavaScript（jQuery）を使って、canvasのお絵かきツールについて解説します。

探しきれてないだけと思いますが、お絵かきツールのjQueryでの実装が見つからなかったので、自力で書いてみました。いろいろ間違ってたらすいません。

１．HTML

サンプルのHTMLは次のようになっています。

<canvas width="500" height="400">お使いのブラウザはHTML5のCanvas要素に対応していません。</canvas>
<ul>
<li style="background-color:#000"></li>
<li style="background-color:#f00"></li>
<li style="background-color:#0f0"></li>
<li style="background-color:#00f"></li>
<li style="background-color:#ff0"></li>
</ul>
<div id="button">
<input type="button" id="save" value="画像で保存" />
<input type="button" id="clear" value="消去" />
</div>

1行目のcanvas要素はブラウザ上に図を描くためのものです。width属性・height属性でcanvas要素のサイズを設定します。

canvas要素はフォールバック（問題発生時の代替手段）も考慮されており、HTML5のcanvas要素に対応していないブラウザなどでは要素のコンテンツを出力します。

そのあとにあるli要素は、Canvas上で色を変更するためのものです。また、input要素でcanvasに描画された内容の消去と保存を行えるようにしています。

２．JavaScript

とりあえず全体のコードです。jQueryで書いてますがjQueryの解説は割愛しますので、分からない方は他のサイトや書籍等で調べてください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var offset = 5;
    var startX;
    var startY;
    var flag = false;
    var canvas = $('canvas').get(0);
    if (canvas.getContext) {
        var context = canvas.getContext('2d');
    }
 
    $('canvas').mousedown(function(e) {
        flag = true;
        startX = e.pageX - $(this).offset().left - offset;
        startY = e.pageY - $(this).offset().top - offset;
        return false; // for chrome
    });
 
    $('canvas').mousemove(function(e) {
        if (flag) {
            var endX = e.pageX - $('canvas').offset().left - offset;
            var endY = e.pageY - $('canvas').offset().top - offset;
            context.lineWidth = 2;
            context.beginPath();
            context.moveTo(startX, startY);
            context.lineTo(endX, endY);
            context.stroke();
            context.closePath();
            startX = endX;
            startY = endY;
        }
    });
 
    $('canvas').on('mouseup', function() {
        flag = false;
    });
 
    $('canvas').on('mouseleave', function() {
        flag = false;
    });
 
    $('li').click(function() {
        context.strokeStyle = $(this).css('background-color');
    });
 
    $('#clear').click(function(e) {
        e.preventDefault();
        context.clearRect(0, 0, $('canvas').width(), $('canvas').height());
    });
 
    $('#save').click(function() {
        var d = canvas.toDataURL('image/png');
        d = d.replace('image/png', 'image/octet-stream');
        window.open(d, 'save');
    });
});
</script>

変数定義・初期化

最初に変数の定義と初期化を行います。

    var offset = 5;
    var startX;
    var startY;
    var flag = false;

offsetは、描画するときに描画線がマウスカーソルの左上になるようにするための補正値です。startX/startYは描画の開始位置、flagは描画要否を示すフラグです。

描画コンテキストの取得

「HTML5のcanvas要素の描画コンテキストをgetElementById()の代わりにjQueryで取得する」でも紹介しましたが、以下の部分で「2D描画コンテキスト」を取得します。

    var canvas = $('canvas').get(0);
    if (canvas.getContext) {
        var context = canvas.getContext('2d');
    }

この部分はcanvasを利用するときのおまじないと思っておけばよいでしょう。

mousedownイベントでの動作

mousedownイベント（マウスボタンをクリック）で次の処理を行います。

    $('canvas').mousedown(function(e) {
        flag = true;
        startX = e.pageX - $(this).offset().left - offset;
        startY = e.pageY - $(this).offset().top - offset;
        return false; // for chrome
    });

flagに「true」を設定します。この値はマウスを動かしたときに利用します。startXにマウスをクリックしたカーソル位置のX座標、startYにY座標を設定します。

「pageX」は、ブラウザの左端からの位置（もっと厳格な定義があるかもしれません）、「offset().left」はブラウザの左端からcanvas要素の左端のオフセットです。例えば、「pageX」が200、「offset().left」が20であれば、X座標のカーソル位置は180になり、そこからさらに補正値のoffsetを減算します。

「return false;」は、Google chromeでcanvas上でmousedownした後カーソルが「cursor:text」の形状になってしまうので、それを回避するための設定です。

mousemoveイベントでの動作

mousemoveイベント（マウスをクリックした状態で移動）で次の処理を行います。

    $('canvas').mousemove(function(e) {
        if (flag) {
            var endX = e.pageX - $('canvas').offset().left - offset;
            var endY = e.pageY - $('canvas').offset().top - offset;
            context.lineWidth = 2;
            context.beginPath();
            context.moveTo(startX, startY);
            context.lineTo(endX, endY);
            context.stroke();
            startX = endX;
            startY = endY;
        }
    });

mousedownイベントで設定したflagを判定して、trueの場合のみ処理を続行します。これは、たとえばcanvasの外側からマウスをクリックした状態でcanvasに進入してきた場合に描画動作を行わないようにするためです。

endX/endYはさきほどのstartX/startYと同じです、マウスをクリックした位置よりも僅かでもマウスが動くとこのmousemoveが発動して、endX/endYを取得します。

次に、描画コンテキストに値を設定します。lineWidthは描画線の太さ、beginPath()は現在のパスをリセットします。

moveTo()で新しいサブパスの開始点を座標指定し、lineTo()で直前の座標と指定座標を結ぶ直線を引きます。stroke()は現在の線のスタイルでサブパスを輪郭表示するためのものです。さきほど設定したlineWidthがスタイルに該当します。

描画を終えたら次のmousemoveイベントに備えて、endX/endYの値をstartX/startYに設定します。

これで大体お分かりと思いますが、お絵かきツールは短い線の描画の集合ということです。

mousemoveイベント・mouseleaveイベントでの動作

mouseupイベント（マウスのクリックをやめたとき）またはmouseleaveイベント（マウスがcanvas要素からはずれたとき）で次の処理を行います。

    $('canvas').on('mouseup', function() {
        flag = false;
    });
 
    $('canvas').on('mouseleave', function() {
        flag = false;
    });

flagに「false」を設定して、その状態でcanvas要素上でマウスを動かしても描画されないようにします。

描画色の変更

次のコードで描画色の変更をできるようにします。

    $('li').click(function() {
        context.strokeStyle = $(this).css('background-color');
    });

li要素で用意した背景色の部分をクリックすることで、その色を描画コンテキストのstrokeStyleに設定します。strokeStyleは線や輪郭の色などを指定するためのものです。

canvasのクリア

id属性「clear」のinput要素のclickイベントを契機にcanvasのクリアを行います。

    $('#clear').click(function(e) {
        e.preventDefault();
        context.clearRect(0, 0, $('canvas').width(), $('canvas').height());
    });

preventDefaultはイベントのキャンセルを通知するメソッドです。clearRect()は、引数で指定したcanvas上の矩形のすべてのピクセルを背景色でクリアします。

canvasの描画を画像で保存

canvasの内容は画像で保存できるようです。id属性「save」のinput要素のclickイベントを契機に画像の保存を行います。

    $('#save').click(function() {
        var d = canvas.toDataURL('image/png');
        d = d.replace('image/png', 'image/octet-stream');
        window.open(d, 'save');
    });

toDataURL()は、canvasのイメージに対するdata:URLを返却（＝ピクセルデータをBase64形式に変換）します。replace()でMIME形式の「image/png」を「image/octet-stream」に変換して、window.open()することでファイルとして出力できます。

保存したあとは、ファイル名に拡張子「.png」を付与してください。

３．参考サイト

参考サイトは下記です。ありがとうございました。

• ASCII.jp - HTML5のCanvasで作る、Flash不要のお絵かきツール
• dangirubaの日記 - Webkit系ブラウザのCanvasでのドラッグあれこれ

1ページのPDFファイルを2ページに分割する方法を紹介します。ここではAdobe Acrobatを利用しています。PrimoPDFやFoxit J-Readerなどでもページ分割可能なようなので、それらについては別途紹介したいと思います。

これを調べることになった発端は、音楽サークルの関係でPDFファイルでもらった楽譜がA3で、これを印刷しようと思ったのですが、自宅のプリンタではA4までしか印刷できません。これをなんとかA4で印刷したかったためです。

ここでは1ページしかないファイルを2ページに分割していますが、何ページあっても手順は同じです。たとえば10ページのPDFファイルは、20ページのPDFファイルになります。

サンプルにするドキュメントはA3サイズでこのようになっています。これを真ん中で区切って2ページに分割します。

分割前

分割後はA4サイズ2ページになります。ここでは1ページ分しか表示していませんが、スクロールバーから2ページ分あることが分かります。

分割後

１．ページを分割する

メニューバーの「ファイル」→「印刷」で開いたダイアログの「プリンタ」→「名前」で「Adobe PDF」を選択（スクリーンショットはクリックすれば拡大します）。

すぐ右にある「プロパティ」をクリック。

「レイアウト」タブの「印刷の向き」を「縦」に設定。ここではA3横のファイルをA4縦に2分割するので、分割後のレイアウトを設定します。

「Adobe PDF 設定」タブの「Adobe PDF のページサイズ」を「A4」に設定。さきほどと同様、分割後のサイズを設定します。設定したら右下の「OK」をクリック。

ひとつ前のダイアログに戻って、「ページの拡大 / 縮小」から「すべてのページを分割」を選択。

選択後に表示される「倍率」を99%にします。右側のプレビューがスクリーンショットのようにきれいに2分割されていればOKです。100%ではプレビューが適正にならず、色々試した結果、99%がいいように思いました。もし99%でプレビューが適正な表示にならない場合は他の倍率で試してみてください。

これで「OK」をクリックすれば、次のように分割されたPDFファイルが出力されます。

２．出力後の向きを変更する

出力後の向きを変更するには、メニューバーの「文書」→「ページの回転」を選択して、回転させます。

３．ページの順序を入れ替える

ページの順序を入れ替えるには、左にあるサムネールのアイコンをクリック。

ページのサムネールをドラッグすれば順序を入れ替えられます。

以上です。サンプルで用いている楽譜は著作権切れのはずですが、問題あるようでしたらぼかしを入れますのでご指摘ください。

Movable Typeのテンプレート編集画面でシンタックスハイライトを無効にする「InvalidateCodeMirrorプラグイン」をバージョンアップしました。

１．プラグインの機能

下のスクリーンショットのように、テンプレート編集画面のシンタックスハイライト（Codemirror）を無効にします。

Movable Type 5.1テンプレート編集画面（プラグイン適用前）

Movable Type 5.1テンプレート編集画面（プラグイン適用後）

２．変更点

MT5.1版でテンプレートのプレビューを実行すると保存動作になってしまう不具合を修正しました。

不具合の原因は、修正前のバージョンでは単純にシンタックスハイライトするためのcodemirror.jsを読み込まないようにしていたためです。読み込む処理を削除したせいで、プレビュー時にJavaScriptエラーが発生し、フォームのデフォルト動作である保存が実行されてしまっていたようです。

３．プラグインのダウンロード

InvalidateCodeMirrorプラグインは下記のリンク先からダウンロードできます。

InvalidateCodeMirrorプラグイン

CSS3本の紹介です。以前マイナビ様より献本頂いたもので、紹介ができていなかったので遅ればせながら紹介させていただきます。

書籍の構成は、セレクタや擬似クラス、スタイルシートの優先順位といった基本解説、レイアウト、カラーアレンジと背景・罫線のデザイン、コンテンツのデザイン、特殊効果、インターフェースのデザインに分かれています。

それぞれのページの左半分にプロパティの説明、右側にサンプルのCSSとHTML、表示例が載っていて、ひとつひとつがコンパクトにまとめられています。CSS3で新しく追加された機能には「CSS3」というマークがつけられています。

アルファベットで調べたい場合は、巻末のプロパティ＆ブラウザ対応一覧か索引で調べることができます。

この本が出版されたのは昨年の6月で、その後ブラウザのバージョンアップが行われてますが、ブラウザ別のサポート状況はサポートサイトに掲載されています。

CSS3以前のプロパティも網羅されているので、CSS3も含めてこれからCSSを勉強したいという方におすすめです。

以下、目次です。

Chapter1 基本

　セレクタ

　文法

　メディアクエリ

　ページメディア

Chapter2 レイアウト

　ボックスモデル

　フレキシブルボックスレイアウト

　グリッドレイアウト

　マルチカラムレイアウト

　ポジショニング

Chapter3 カラーアレンジと背景・罫線のデザイン

　カラー

　背景と罫線

　画像

Chapter4 コンテンツのデザイン

　フォント

　テキスト

　行のレイアウト

　書字方向

　ルビ

　リスト

　コンテンツの挿入と置換

　テーブル

Chapter5 特殊効果

　2Dトランスフォーム

　3Dトランスフォーム

　トランジション

　アニメーション

Chapter6 インターフェース

　インターフェース

HTML5のcanvas要素の描画コンテキストを、getElementById()の代わりにjQueryで取得する方法です。jQueryな方はタイトルだけで記事の主旨がお分かりと思いますので読み飛ばしてください（笑）。

１．canvas要素の描画コンテキストとは

前置きになりますが、canvas要素は描画機能にアクセスするためのgetContext()というDOMメソッドを持っています。canvas要素のDOMノードを取り出し、取り出したDOMノードに対してgetContext('2d')を実行することで、描画機能にアクセス可能な「描画コンテキスト」を取得します。

getContext()の引数の「2d」は、描画コンテキストの種類を示し、現在「2d」固定です。要するに「2d」を指定することで「2D描画コンテキスト」を取得します。将来的に、例えば「3d」という引数が増えて3D描画コンテキストを取得できるようになるかもしれません。

２．getElementById()が使われる箇所

ネットで色々調べたところ、描画コンテキスト取得のサンプルは概ね次のようになっていました。以下はMDNからの引用です。

Canvas チュートリアル - 基本的な使いかた

<script>
var canvas = document.getElementById('tutorial');
if (canvas.getContext){ // 未サポートブラウザでの実行を抑止
  var ctx = canvas.getContext('2d');
  // 描画用のコードを記述
}
</script>
<canvas id="tutorial" width="150" height="150"></canvas>

ポイントは、getContext()を実行するためのDOM要素「canvas」を取得するためにgetElementById()を実行している赤色部分で、単純にこの部分をjQueryで表現できないかと思った次第です。

３．jQueryを適用する

getElementById()の代わりにjQueryを適用するには、次のように記述します。

<script>
var canvas = $('#tutorial').get(0);
if (canvas.getContext){ // 未サポートブラウザでの実行を抑止
  var ctx = canvas.getContext('2d');
  // 描画用のコードを記述
}
</script>
<canvas id="tutorial" width="150" height="150"></canvas>

または、

<script>
var canvas = $('#tutorial')[0];
if (canvas.getContext){ // 未サポートブラウザでの実行を抑止
  var ctx = canvas.getContext('2d');
  // 描画用のコードを記述
}
</script>
<canvas id="tutorial" width="150" height="150"></canvas>

このように指定する理由は、$()で返却される値が配列になっているためです。id指定で返却値が1つと分かっている場合でも配列で返却されます。

jQueryオブジェクトとして扱う場合は配列を意識することはあまりないと思いますが、ここではDOM要素として取得するために配列を意識した処理を行っています。

ちなみに、未サポートブラウザのチェックが不要であれば次のように書けます。

<script>
var context = $('#tutorial').get(0).getContext('2d');
// 描画用のコードを記述
}
</script>
<canvas id="tutorial" width="150" height="150"></canvas>

以上です。認識誤り等ありましたらご指摘ください。

JavaScriptで今日の日付と時刻を取得・表示する方法です。

毎回同じものを作っているような気がするのと、JavaScriptのビギナーの方むけの情報という意味で、このエントリーで動作サンプルを掲載しておきます。

１．現在日時を取得するサンプル

現在日時を取得するサンプルを以下に掲載します。このサンプルをウェブページに丸ごとコピー＆ペーストすれば、サンプル下にある「出力結果例」の表示になると思います。

<script type="text/javascript">
var get_current_timestamp = function() {
    var weeks = new Array('日', '月', '火', '水', '木', '金', '土');
    var d = new Date();
 
    // 年月日・曜日・時分秒の取得
    var month  = d.getMonth() + 1;
    var day    = d.getDate();
    var week   = weeks[ d.getDay() ];
    var hour   = d.getHours();
    var minute = d.getMinutes();
    var second = d.getSeconds();
 
    // 1桁を2桁に変換する
    if (month < 10) {month = "0" + month;}
    if (day < 10) {day = "0" + day;}
    if (hour < 10) {hour = "0" + hour;}
    if (minute < 10) {minute = "0" + minute;}
    if (second < 10) {second = "0" + second;}
 
    // 整形して返却
    return d.getFullYear()  + "/" + month + "/" + day + "（" + week + "） " + hour + ":" + minute + ":" + second;
}
 
// 現在の日付・時刻を表示する
document.write(get_current_timestamp());
</script>

出力結果例

2012/01/12（木） 00:03:03

青色部分は現在日時の取得処理を関数にまとめたもので、その下の行にある「document.write( ... );」は、その関数を呼び出して動作を確認するためのものです。

２．別の関数から現在時刻を取得する

別の関数から現在時刻を取得したい場合、たとえばfoo()という関数から取得するには、赤色部分のように記述してください。青色は、１項のサンプルの青色部分が相当します。

<script type="text/javascript">
var get_current_timestamp = function() {
  // 中略
}
function foo() {
    var current = get_current_timestamp();
    // 変数currentを使った処理を記述
}
</script>

３．出力フォーマットを変更する

出力フォーマットを変更するには次の部分を書き換えてください。

return d.getFullYear() + "/" + month + "/" + day + "（" + week + "） " + hour + ":" + minute + ":" + second;

例えば「xxxx年xx月xx日 xx時xx分」にするには、次のように書き換えます。

return d.getFullYear() + "年" + month + "月" + day + "日 " + hour + "時" + minute + "分";

４．月日時分秒を1桁で出力する

月日時分秒の「1」～「9」を1桁で出力したい場合は、次の部分をまるっと削除してください。

// 1桁を2桁に変換する
if (month < 10) {month = "0" + month;}
if (day < 10) {day = "0" + day;}
if (hour < 10) {hour = "0" + hour;}
if (minute < 10) {minute = "0" + minute;}
if (second < 10) {second = "0" + second;}

５．注意事項

get_current_timestamp()は関数リテラルによる定義（var xx = function(){ ... }という形式）のため、関数定義の前にdocument.write()などの処理を記述すると正常に動作しません。

<script type="text/javascript">
document.write(get_current_timestamp()); // これはエラー
var get_current_timestamp = function() {
  // 中略
}
</script>

要するに１項のサンプルや２項のように、get_current_timestamp()の定義の後方に、get_current_timestamp()を呼び出す処理を記述してください。

HTML5のWebsocket（Node.js+Socket.IO）を使って、現在の同時接続数をサーバから送信するサンプルを作ってみました。

環境を作ったのは自分のPCのためリアルでお見せできないのが残念ですが、動画をキャプチャしたのでそちらでご確認ください。

１．サンプル動画

2つのブラウザからそれぞれ「http://127.0.0.1:8124」にアクセスして、そのページの同時接続数を各ブラウザに表示します。接続数の増減によって、ページに接続しているコネクションすべてに、サーバから情報を送信します。操作をしていないブラウザにも即時に接続数が反映されます。

非常にシンプルなものですが動いたときはちょっと感動しました。

２．サンプルコード

Node.jsとSocket.IOを使ったサンプルコードを掲載しておきます。

色々ネットを探しましたが（探しきれてないかもしれません）、Node.js+Socket.IOで動作するコードがみつからなかったので自作しました。Node.jsやSocket.IOに精通されている方にとっては当たり前のような実装かと思います。冗長な部分等ありましたらご指摘ください。

app.js（サーバ側のソース）

var app = require('express').createServer()
  , io = require('socket.io').listen(app);
 
// カウンタ初期化
var count = 0;
app.listen(8124);
 
app.get('/', function (req, res) {
    res.sendfile(__dirname + '/index.html');
});
 
io.sockets.on('connection', function (socket) {
 
    // 接続時にカウンタのインクリメント
    count++;
 
    // ブロードキャストで送信
    io.sockets.emit('user connected',count);
 
    // 切断
    socket.on('disconnect', function () {
 
        // カウンタのデクリメント
        count--;
 
        // ブロードキャストで送信
        io.sockets.emit('user disconnected',count);
    });
});

index.html（クライアント側のソース）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
jQuery(function(){
  var socket = io.connect('http://localhost');
 
  // 接続時の動作
  socket.on('user connected', function (data) {
      jQuery('span').html(data);
  });
 
  // 切断時の動作
  socket.on('user disconnected', function (data) {
      jQuery('span').html(data);
  });
});
</script>
<div>このページにアクセスしているのは<span></span>人です。</div>

サンプルコードの配置や起動方法については、Windows限定ですが「Windows+Node.js+Socket.IO」を参照してください。

また、このコードを実行する前に、上記記事の最後に掲載している「npm install socket.io express」を実行してください。

３．クライアントへの送信方法

サーバからブロードキャストで送信するには次のように記述するようです。赤色はイベント名で、任意の文字列を記述します。

io.sockets.emit('user connected', count);

受け取るクライアントでは、サーバ側のemit()の第1引数（赤色のイベント名）を必ず指定します。ここが一致していないと受信できません。第2引数のデータは引数として扱えます。

socket.on('user connected', function (data) {
    // ...
});

サンプルコードはブロードキャストで行ってますが、次のように記述すれば送信先を変更できるようです。

// 自分以外の全員に送る
socket.broadcast.emit('user connected',count);

// 自分だけに送る
socket.emit('user connected', count);

４．参考サイト

参考サイトは下記です。ありがとうございました。

• 自分の感受性くらい - ExpressとSocket.ioを使ったWebSocketのサンプルを作る
• オデの日記＠WEB系 - socket.ioをv0.6.xからv0.7.xへ変更する

Windowsを使ってNode.js+Socket.IOを試してみました。

マシンはWindows VISTAですが、Windows 7でも同じだと思います。以前はCygwinでコンパイルをしないといけなかったようですが、現在はWindows用のexeファイルが提供されていて、かなり簡単に動かすことができるようになっています。

１．Node.jsとは

Node.jsは、サーバサイドJavaScriptの実装の1つで、グーグルが開発したV8 JavaScriptエンジン上で実行します。要するにサーバ側の処理をJavaScriptで書くことができます。

サーバサイドJavaScriptには「CommonJS」という仕様が策定されており、Node.jsはCommonJSに準拠して開発されています。2012/01/10追記：独自仕様もあるようです。

Node.jsの特徴として、非同期処理を行うための「イベントループ」と呼ばれる技術を用います。「イベントループ」というのは「C10K問題（クライアント1万台問題）」で有名になった技術で、大量のクライアントからのリクエストを処理するためのアーキテクチャです。

Node.jsはシングルスレッドなので、イベントループ処理はノンブロッキングI/O（データ送受信（I/O）の完了を待たずに、他の処理を開始する処理方式）で実現します。

つまり、すべての処理をノンブロッキングI/Oにしておかないと、イベントループ処理が止まってしまいます。例えば他の言語でノンブロッキングI/Oを実現するにあたってライブラリを利用する場合、ライブラリでブロックしていないことが要件となりますが、JavaScriptはそもそもブロッキングI/Oをもっていないので、相性が良い（そういうことを心配する必要がない）らしいです。

２．Node.jsのインストール

Node.js公式サイトにある「DOWNLOAD」をクリック。

「Windows Installer」をクリック。

ダウンロードしたファイルを実行します。「Next」をクリックすればすぐにインストールが開始します。

インストール中です。

完了しました。めちゃくちゃあっさりしています。

Node.jsは「C:¥Program Files¥nodejs」というフォルダにインストールされます。実行ファイルは「C:¥Program Files¥nodejs¥node.exe」です。「npm」という、Node.js用のパッケージマネージャも一緒にインストールされており（ネットで調べると以前は別にインストールする必要があったようですが不要）、同じフォルダにある「npm.cmd」が該当します。

３．Node.jsの動作確認

Nodeはコマンドプロンプトから操作します。ということで、コマンドプロンプトを起動します。

まずバージョンを表示する「node --version」を入力してみます。インストール時にパスは通っているはずなので、どのフォルダからでも起動できると思います。

バージョンが表示されました。「node --help」を入力すれば利用可能なオプションが表示されます。

パスが通っているかどうかは、「コンピュータ」→右クリックで「プロパティ」→「システムの詳細設定」→「詳細設定」タブ→「環境変数」→「システム環境変数」の「Path」を選択して「編集」をクリックすれば分かります。

Node.jsはV8エンジン上で動いているので、通常の処理もできるようです（というかNode.jsはネットワーク処理に特化したライブラリらしいです）。単に「node」と入力すると「＞」というプロンプトが表示されるので、計算などが行えるようです。

こちらを終了させる場合はCtrl-cを2回行います。

４．ブラウザからNode.jsにアクセスする

ブラウザからNode.jsにアクセスして何かを表示するにはnode起動時にクライアントを通信を行うためのJavaScriptファイルを指定します。クライアントから任意のURL（後述）にアクセスすると、このJavaScriptファイルが動作するという仕組みです。

Node.jsの公式サイトにあるサンプルファイルを用いて、ブラウザからアクセスして「Hello World!」を表示させてみます。次のファイルをexample.jsというファイル名でnodejsフォルダ直下に作成します。

var http = require('http');
 
http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello World\n');
}).listen(8124);
 
console.log('Server running at http://127.0.0.1:8124/');

コマンドプロンプトから「node example.js」を入力します。

「Server running at http://127.0.0.1:8124/」は、console.log()の内容なので、これが表示されていれば正常に動作しています。この状態でブラウザから「http://127.0.0.1:8124/」にアクセスしてみます。

おぉ！表示されました。

５．Socket.IOのインストール

Socket.IOはHTML5のWebSocket（クライアント・サーバの双方向通信）を実現するために必要なライブラリのようです。WebSocketで双方向通信を確認したかったのですが、この記事では簡単なサンプル動作にとどまってます。

ネットで調べたところ、Googleの「Socket.IO」というのがみつかったのでこれを利用してみます。「Socket.IO」の「How to use」をクリック。

ここに以下のようなnpmコマンドが載っていました。

npm install socket.io

ということで、コマンドプロンプトからこのコマンドを実行します。

インストールされたようです。

６．Socket.IOのサンプル作成（Node HTTP server）

「How to use」のページに掲載されているサンプルを動かしてみます。

サーバ側のファイルです。app.jsというファイル名でとりあえずnodejsフォルダに作成します。

var app = require('http').createServer(handler)
  , io = require('socket.io').listen(app)
  , fs = require('fs')
 
app.listen(80);
 
function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }
 
    res.writeHead(200);
    res.end(data);
  });
}
 
io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

クライアントが読み込むファイルをindex.htmlというファイル名で、app.jsと同じフォルダに配置します。script要素でsocket.io.jsをインクルードしています。このパスはこのままでOKです。

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>

コマンドプロンプトから「node app.js」を実行してみましたが、「Error: listen EADDRINUSE」というエラーが発生しました。

これは、app.jsで指定しているリスンポートが正しくないためです（ポート80はPC上でXAMPPを起動しているためと思われます）。ということで、app.jsのポートを8124に変更します。

app.listen(8124);

これで再度起動します。多分うまく動作していると思います。

このサンプルは、ブラウザからアクセスすると真っ白な画面になります。

ソースコードはindex.htmlの内容が表示されているので、正常に動作しているようです。

表示されたソースコード上のsocket.io.jsをクリックしたところ、こちらも正常に表示されました。

とりあえずここまでです。「How to use」のページには他にもサンプルがあるので色々試してみるとよいでしょう。サンプルによっては、次のコマンドを実行する必要があるようです。

npm install socket.io express

書籍「ソーシャルコマース ～業界キーマン12人が語る、ソーシャルメディア時代のショッピングと企業戦略～」の紹介です。マイナビ様から献本頂きました。ありがとうございました。

Eコマース業界では「ソーシャルコマース（＝ソーシャルメディアを利用して商品やサービスの電子商取引を促進すること）」が注目されつつあるようで、海外ではすでにトレンドになっており、日本でも注目され始めているキーワードになっています。

本書は、Facebookを利用したソーシャルコマースである「F-Commerce」を中心に、海外や国内の動向や事例などを紹介しています。個人的に目新しいところでは「O2O（Online to Offline）コマース」やチェックイン（自分の居場所を友達に伝える機能）を使ったソーシャルコマースの拡大や、将来的な技術であるNFC（短距離無線通信規格）の可能性についても触れられています。

紹介されている数多くの事例に触れた感想としては、ネットがFacebook・Twitter・mixiなど、ソーシャルの時代に突入している中、Eコマースも「ソーシャル」がキーワードとなるサービスが確実に拡大・多様化していく予感がしました。

今後、ソーシャルコマースの導入を検討されている企業担当者はもちろん、Eコマース業界の最新動向を知りたい方や、Facebookページの活用方法を知りたい方にもおすすめの1冊です。

以下、目次です。

Chapter1 ソーシャルコマースがもたらす変化

　1-1 ソーシャルメディアとは

　1-2 ソーシャルメディアがビジネスをどう変える？

　1-3 「ソーシャルコマース」は何を変えるか

　1-4 F-Commerceは売れない？

Chapter2 海外ソーシャルコマース最新動向

　2-1 F-Commerce最新動向

　2-2 O2Oコマース海外最新動向

　2-3 注目スタートアップの動向

Chapter3 国内ソーシャルコマース最新動向

　3-1 国内F-Commerce最新動向

　3-2 国内O2Oコマース最新動向

　3-3 国内スタートアップ最新動向

Chapter4 ソーシャルコマース展開にあたってのポイント

　4-1 プラットフォームやモールの動きについて

　4-2 展開の方法

　4-3 取り組む際の心構え

　4-4 海外への展開について

　4-5 効果測定

Chapter5 国内事例紹介＆インタビュー

　5-1 BAD LAND

　5-2 RICE FORCE

　5-3 iQON

　5-4 アラタナ・GMOペイメントゲートウェイ

　5-5 リトルムーン

　5-6 漫画全巻ドットコム

Chapter6 プラットフォーム／モール担当者に聞くソーシャルコマース戦略

　6-1 bidders

　6-2 paperboy&co.

　6-3 Yahoo!JAPAN

　6-4 楽天市場

　6-5 mixi

さらに、書籍で触れられている主なサイトのリンクを掲載しておきます。どのサイト（またはアプリ）がどのような役割や効果を表しているかは書籍をご覧いただければと思います。

• Magma（Facebookページ）
• Starbucks（Facebookページ）
• GetGlue（Facebookアプリ）
• Retty
• 気仙沼味屋酒店（Facebookページ）
• Payvment（Facebookアプリ）
• ThirdEyeBlind（Facebookページ）
• ASOS（Facebookページ）
• sears（Facebookページ）
• Etsy
• Grannies Inc.
• Shopkick
• Deside
• Square
• Tagstand
• foursquare
• SocialGateWay（Facebookアプリ）
• ライスフォース（Facebookページ）
• Uniqlooks
• ローソン
• 丸亀製麺
• FlutterScape
• giftee
• Wishscope
• iQON
• COODE
• ソーシャルPLUS
• BADLAND（Facebookページ）
• リトルムーン
• 漫画全巻ドットコム

CSS3本の紹介です。以前マイナビ様より献本頂いたものでのすが、当時は執筆やらプラグイン開発やらでばたばたしていて紹介ができておらず、そのままになってしまっていました。遅ればせながら本エントリーで紹介したいと思います。

本書はCSS3をターゲットとしたもので、構成は、CSS3の基本・リファレンス・CSS3ビジュアルサンプルの3つに分かれています。

「CSS3の基本」ではCSS3を使って何ができるか、CSS3を利用する場合の注意点などが紹介されています。「リファレンス」は15のセクションに分かれており、各セクションではCSS3のプロパティについて、サンプルのHTML・CSSおよび表示例つきで詳細に解説されています。

「CSS3ビジュアルサンプル」では、ウェブサイト制作に役立つ、CSS3を使った実践的かつクールなサンプルが掲載されています。サンプルはサポートサイトでも動作を確認できるようになっています。

アルファベットで調べたい場合は、巻末の索引で調べることができます。

以下、目次です。

Chapter1 CSS3の基本

　Section1 CSS3をWebクリエイターが使う意義

　Section2 CSS3で何ができるか

　Section3 CSS3を積極的に利用するために

　Section4 CSS3書き方の基本

Chapter2 CSS3リファレンス

　Section1 Values and Units（プロパティの値の種類、単位の種類）

　Section2 Color（値として利用する色

　Section3 Font（フォント、文字の形）

　Section4 Text（文字列や行の装飾、制御、制限）

　Section5 CSS basic box model（ボックスの大きさ、基本的なレイアウトフロー）

　Section6 Backgrounds and Borders
　　　　　Backgrounds（背景色、背景画像とその複数指定）
　　　　　Rounded Corners（角丸を適用する）
　　　　　Border-Images（枠線に画像を適用する）
　　　　　Miscellaneous Effects（背景、ボーダー以外のボックスへの効果）

　Section7 Multi-column Layout（段組とそれに関する設定）

　Section8 Flexible Box Layout（柔軟に制御可能な横並び/縦並びレイアウト）

　Section9 Basic User Interface（ユーザーの動作や入力に関してスタイルを適用）

　Section10 Image Values Gradients（CSSでグラデーションを生成する）

　Section11 Transforms（拡大・回転・ゆがみ・移動など、様々な要素の変形を制御する）

　Section12 Transitions（時間的変化によるアニメーションを設定する）

　Section13 Animations（キーフレームによるアニメーションを設定する）

　Section14 Media Queries（環境に合わせてスタイルを切り替える）

　Section15 Selectors（スタイルを適用するための選択子）

Chapter3 CSS3ビジュアルサンプル

　Section1 ボタン

　Section2 アニメーション

　Section3 レイアウト

　Section4 テーブル

　Section5 ギャラリー

　Section6 フォーム

　Section7 ナビゲーション

Appendix

　Section1 HTML5の基本

　Section2 作業時間を短縮するCSS3ジェネレーター

　Section3 CSS3の学習に役立つWebサイト

ということで、「CSSは知っているけど、これからCSS3について知りたい」という方におすすめの書籍です。

Movable Typeの記事一覧画面にアイテムを表示する「EntryAssetListingプラグイン」に不具合があったため、バージョンアップしました。

このプラグインの機能は、下のスクリーンショットのように、記事一覧画面の右端に「アイテム」を表示します。1つの記事に複数のアイテムがある場合は並べて表示します。

EntryAssetListingプラグインを適用したところ

１．修正点

システム管理画面のブログ記事一覧にあるオプションのチェックボックスで「アイテム」をチェックしてもアイテムが表示されず、代わりに、

Can't call method "id" on an undefined value at C:\xampp\htdocs\MT-5.12-ja\plugins\EntryAssetListing\lib/EntryAssetListing/CMS.pm line 91.

というエラーが発生する不具合を修正しました。

エラーが表示されたところ

原因は、もともとこのプラグインはブログ・ウェブサイトのブログ記事一覧画面のみを対象にしていたのですが、システム管理画面の表示に関する考慮が不足していたためです。ご迷惑をおかけ致しました。

この修正により、システム管理画面のブログ記事一覧でもアイテムが正常に表示されるようになります。

システム管理画面のブログ記事一覧

また、システム管理画面のプラグイン設定画面で、システム管理画面のブログ記事一覧のアイテムに関する設定を行えるようにしました。

システム管理画面のプラグイン設定画面

ウェブサイト・ブログの設定はこれまで通り、それぞれの管理画面のプラグイン設定で制御できます。

２．プラグインのダウンロード

EntryAssetListingプラグインは以下のリンク先からダウンロードできます。

EntryAssetListingプラグイン

Movable Typeのインデックステンプレートの再構築コストを削減する「RebuildIndexFilterプラグイン」をバージョンアップしました。

このプラグインは2008年に公開したものです。ということで、このプラグインをご存知ない方のために、改めて紹介も兼ねたいと思います。

１．インデックステンプレートの再構築について

プラグインの機能を説明する前に、Movable Typeのインデックステンプレートの再構築の振舞いについて解説します。

インデックステンプレートは、その公開設定が「スタティック」になっている場合、管理画面からの再構築を除き、次のいずれかのイベントが発生すると、すべて再構築されるようになっています。

• ブログ記事の投稿・編集
• ウェブページの作成・編集
• コメント投稿
• トラックバック受信

具体例を示します。「クラシックブログ」テーマでは次の6つのインデックステンプレートが登録されています。

• アーカイブインデックス
• スタイルシート
• メインページ
• JavaScript
• RSD
• 最新記事のフィード

この6つのテンプレートの「公開」設定が、次のように「スタティック」になっているとします。

「公開」設定

そうすると、再構築時間に差はありますが、6つのインデックステンプレートがすべて再構築対象になります。ファイルの内容に変更がない場合、ファイル自体は出力されませんが、再構築データと出力ファイルの比較処理まで実施されると思います。

つまり、インデックステンプレート再構築の問題点は、「再構築の必要がないテンプレートまで再構築対象になってしまう」ことです。

もうひとつ例をあげると、コメント投稿では「メインページ」テンプレート以外のインデックステンプレートを再構築する必要はないのですが、MTのデフォルト機能ではそういった制御を行っていないので、再構築対象となってしまいます。公開設定を「手動」にすれば再構築対象外にできますが、そうすると必要なイベントで再構築できなくなります。

また、デフォルトで用意されているインデックステンプレート以外に、Googleサイトマップやサイドメニューなど、多くのページをインデックステンプレートで作っていると、さらに再構築対象のインデックステンプレートが増加し、イベントの応答時間に影響します。

ちなみに当サイトでは、図のように多くのインデックステンプレートを登録しており、ブログ記事投稿やコメント投稿でかなりの再構築コストがかかってました。以前、別のサーバを使っていたときは500エラーも発生することがありました。「最近のブログ記事」などのサイドメニュー類は、各ページで表示内容を統一させたいのでインデックステンプレートで生成し、Ajaxで表示させています。

当ブログのインデックステンプレート

インデックステンプレートだけでなく、インデックステンプレートからインクルードしているテンプレートモジュールも当然再構築対象になります。

２．プラグインの機能

このプラグインを適用すれば、イベントごとに再構築対象のインデックステンプレートを指定できるようになります。

当ブログではこのプラグインを導入して、図のような設定を行いました。これによりイベントごとの再構築時間がかなり短縮されました。

プラグインの具体的な機能ですが、インデックステンプレートの再構築トリガを、次の5種類のイベントから選択することができます。

• ブログ記事の投稿
• ウェブページの作成
• コメント投稿
• トラックバック受信
• すべて

例えば、フィードなどは「ブログ記事の投稿」のみをトリガに再構築することで、コメント投稿などによる再構築から除外することができます。設定画面は３項をご覧ください。

３．変更点

今回のバージョンアップでMT5.1に対応できるようにしました。画面処理の変更のみです。インデックステンプレートのオプション設定部分に、次のように「再構築イベント」が表示されます。

インデックステンプレートのオプション設定部分

４．プラグインのダウンロード

RebuildIndexFilterプラグインは、以下のリンク先からダウンロードできます。

RebuildIndexFilterプラグイン

Facebookのニュースフィードやタイムラインに表示されている「シェア」の使い方を詳しく解説します。

１．基本

まず基本情報として「シェア」というリンクがどこに表示されているか、下のスクリーンショットでご確認ください。

タイムラインに表示されている「シェア」

ニュースフィードに表示されている「シェア」

現在、Facebookで非推奨となっている「シェア」ボタンのことではありません。

Facebook Share（非推奨）

以下、この「シェア」リンクを使った操作方法を詳しく解説します。「シェア」の機能や「シェア」と「いいね！」との違いなどについては、他のサイトで良記事が公開されているので、この記事の９項にあるリンクから辿ってください。

２．登場人物

動作確認はいつもの通り、テストユーザーを使っています。

説明で登場する人物は以下です。

• Davidさん：ウォールにネタを投稿する人
• Karenさん：Davidさんの投稿をシェアする人
• Bobさん：シェアされた投稿を読む人

Davidさんが「おいしいラーメン屋がある」という投稿をし、それを読んだKarenさんがその投稿をシェアします。そして、Bobさんがシェアされた投稿を読むという図式です。

３．Davidさんの投稿

Davidさんが自分のウォールに次のような投稿をします。

４．Karenさんによるシェア

KarenさんはDavidさんの投稿をシェアしようと思い、「シェア」をクリックします。

ダイアログが開くので、テキストエリアにシェアするときのメッセージを入力します。

「シェア」のところが「自分のウォール」になっていれば、自分のウォールに投稿されます。

「友達のウォール」を選択することもできます。「友達のウォール」を選択した場合、投稿したい友達の名前を入力します。

例えば、Karenの友達のBobを選択することもできます。友達の名前はインクリメンタル検索で表示されます。また「グループ」の選択やメッセージ送信を行うことも可能です。

公開範囲も設定できます。

すべての設定を行って「近況をシェア」をクリックすれば投稿完了です。

フォームボタンの表示は、シェアする内容によって「リンクをシェア」「写真をシェア」などに変わります。また、リンクや写真などはニュースフィードからもシェアできるようです。

リンクのシェアの場合

写真のシェアの場合

５．シェアされた投稿

シェアされたKarenさんの投稿はBobさんのニュースフィードに次のように表示されます。

そして、Davidさんの投稿には「シェア1件」というテキストリンクが表示されます。

そのテキストリンクをクリックすると、シェアしてくれた人が分かります。

６．シェアされた投稿をさらにシェアするとどうなるか

シェアされた投稿をさらにシェアすると、どのように表示されるか確認してみましょう。

ここではKarenがシェアした投稿を、Bobがさらにシェアすることにします。

Bobがシェアした投稿です。シェア元のKarenの名前は消えています。

ただし、元ネタを提供したDavidさんのウォール投稿のシェア数は変わりません。

その代わり、Karenさんのウォール投稿のシェア数が上がっていました。6つ手前の画像と比べてみてください。

ちなみに、シェアされたものをシェアするときには、「xxより」という表示と「（削除）」のテキストリンクが表示されるようです。

「（削除）」のテキストリンクをクリックすると表示が消えます。

消した状態で投稿してみましたが、消さない場合との違い（例えばDavidさんにシェアがカウントされる等）はありませんでした。実際のユーザーでは何か違いがあるのかもしれません。ご存知の方、情報お待ちしています。

７．Facebookページの「シェア」

これまではユーザーのニュースフィードを例に解説しましたが、Facebookページでも同じように「シェア」が行えます。

Facebookページでの「シェア」

８．その他

調べてみたところ、タイムライン機能を使っている人の近況（テキストのみ）投稿は、友達のニュースフィードに「シェア」リンクが表示されないようです。その人のタイムラインを見れば「シェア」リンクが表示されます。間違ってたらすいません。

また、Twitter連携アプリでの投稿などでは、「シェア」リンクはニュースフィードにもタイムラインにも表示されないようです。

９．「シェア」の機能や「シェア」と「いいね！」の違い

「シェア」の機能や「シェア」と「いいね！」の違いを知りたい方は、以下の記事をご覧ください。

• 案外知られていないFacebook「いいね！」「コメント」「シェア」の違いを解説（熊坂仁美）
• ガイアックスソーシャルメディア ラボのブログ - Facebookの「いいね！」「シェア」の違いを徹底解剖！

2011年に当ブログで公開したMovable Typeプラグイン一覧です。

用途別+アルファベット順に並べています。2011年に作成したプラグインは合計36と、過去最多となりました。

１．一覧画面関連のプラグイン

AddCFQuickFilterプラグイン

ブログ記事一覧などのリスト画面をカスタムフィールドの値で絞り込めるようにします。MT5.0x専用です。ListingCustomFieldプラグインと組み合わせれば強力です。

AssetFolderViewerプラグイン

アイテム一覧にフォルダを表示します。MT5.0x専用です。

EntryAssetListingプラグイン

記事一覧画面にアイテムを表示します。MT5.1x専用です。

LimitPerPageChangerプラグイン

管理画面の一覧表示で任意の表示件数を指定できるようにします。MT5.0x専用です。

プラグイン適用後（「表示数」に任意の数値を入力可能）

ListingCustomFieldプラグイン

カスタムフィールドで作成したデータを管理画面の一覧に表示します。表示項目はチェックボックスで増減可能です。MT5.0x専用です。

ListingFieldEditorプラグイン

カスタムフィールドを一覧画面で編集できるようにします。MT5.1x専用です。

SearchResultsCFListingプラグイン

管理画面の検索結果一覧の表示項目を追加します。

プラグイン適用後の検索結果画面（タグ・カスタムフィールドを表示）

２．再構築関連のプラグイン

RebuildByChangeWidgetプラグイン

ウィジェットセット更新時にインデックステンプレートを再構築します。

RebuildByUpdateAssetプラグイン

アイテム更新時に、該当アイテムを利用しているブログ記事ページ・ウェブページを再構築します。MT5.x用です。

RebuildEntryByIdプラグイン

ブログ記事保存時に別のブログ記事を再構築します。

３．アイテム関連のプラグイン

DeleteAssetWithDeleteCFAssetプラグイン

アイテムのカスタムフィールド削除に連動して、ウェブページやブログ記事の「関連アイテム」も同時に削除します。

カスタムフィールドの「画像を削除する」をクリックすると

該当の画像をブログ記事アイテムから削除

ImageSizeModifierプラグイン

携帯サイト向けに画像を縮小します。MT4.x/MT5.0x/MT5.1xに対応します。

RevisableAssetプラグイン

ブログ記事・ウェブページに関連づけたアイテムをリビジョン対象にできるようにします。

UploadImageResizerプラグイン

画像アップロード時にリサイズを可能にします。

４．カテゴリ関連のプラグイン

AllCategorySelectorプラグイン

記事編集画面でカテゴリを一括選択できるようにします。

CategorySelectorFilterプラグイン

選択できるカテゴリを限定します。

選択後の状態（選択したカテゴリ以外のカテゴリのチェックボックスはdisable）

ParentCategorySelectorプラグイン

記事編集画面で親カテゴリを一括選択できるようにします。

５．コメント関連のプラグイン

ApproveCommentPermissionプラグイン

「ユーザー」のロールにコメント公開権限を与えることができます。

プラグイン適用後（「公開」ボタンを表示）

CommentEmailByteChangerプラグイン

投稿コメントのメールアドレスを半角に変換します。

投稿時のメールアドレス（全角）

投稿後のメールアドレス（半角に変換）

CustomizedCommentfilterプラグイン

指定文字列を含むコメントを受け付けません。

６．記事編集画面関連のプラグイン

BodyFieldCustomizerプラグイン

記事作成編集画面の本文・追記フィールドの動作をカスタマイズできるようにします。MT5.1x専用です。

プラグイン適用後かつ本文・追記フィールドを非表示にしたところ

BodyFieldEraserプラグイン

記事作成編集画面の本文・追記フィールドを非表示にします。MT5.0x専用です。

PublishButtonChangerプラグイン

Movable Type 5.1のブログ記事投稿画面・ウェブページ作成画面の公開ボタンの動作を変更します。例えば記事公開時に確認ダイアログを表示します。

TextareaTabEnablerプラグイン

テンプレート編集画面でタブ文字が入力できるようにします。

タブ文字挿入後のカーソル位置

７．その他管理画面関連のプラグイン

AssociationBlogDiscriminatorプラグイン

ブログ権限付与時に親ウェブサイト名を表示します。

CustomFieldDataCheckerプラグイン

カスタムフィールドで入力したデータの重複チェックを行えるようにします。

EmulateIEプラグイン

IE9でMT4/MT5.0x/MT5.1xの管理画面を操作できるようにします。

EntryExporterプラグイン

テーマ機能を使って、ブログ記事（アイテム・カスタムフィールド含む）のインポート・エクスポートを行えるようにします。

Linklistプラグイン

お気に入りリストが作れるプラグインです。

ReturnArgsChangerプラグイン

ブログ記事・ウェブページ削除後の遷移画面を指定できます。本番環境でいわゆる「ゴミ」を残したくない場合などに利用できます。

RevisionRemoverプラグイン

記事更新履歴をクリアします。

UserEmailCheckerプラグイン

管理画面からのユーザー登録時やコミュニティ機能を使ったユーザー登録時に、同一メールアドレスのユーザー有無をチェックします。

８．拡張テンプレートタグ

CommentAuthorIdentityプラグイン

MTCommentAuthorIdentityタグ（認証サービスに登録しているプロフィール・ページへのリンクを表示する）の改良版プラグインです。

CurrentStyleプラグイン

テンプレートに適用しているスタイルとレイアウトを表示するためのMTCurrentStyleタグとMTCurrentLayoutタグを提供します。

EntryAuthorDataプラグイン

ブログ記事投稿ユーザーの情報を出力するためのMTEntryAuthorDataブロックタグを提供します。

MondayCalendarプラグイン

カレンダーを月曜日始まりにするためのMTMondayCalendarブロックタグを提供します。

ブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法です。ここではCSSを使った方法を紹介します。

動作は主要ブラウザ（IE/FF/Chrome/Safari/Opera）の現時点での最新版で確認しています。

動作確認は以下のサンプルをご利用ください。

サンプル

１．ウィンドウの高さに合わせて画像を拡大・縮小する

ウィンドウの高さにあわせて画像を拡大・縮小するには、次のようにします。

HTML

<div id="box">
  <img src="画像のURL" alt="coffee" />
</div>

CSS

#box {
  height: 20%;
}
#box img {
  height: 100%;
}

img要素を括ったdiv要素にheightプロパティを設定し、画像の高さを%で指定します。また、img要素に「height:100%」を設定します。

２．ウィンドウの幅に合わせて画像を拡大・縮小する

ウィンドウの幅にあわせて画像を拡大・縮小するには、次のようにします。

HTML

<div id="box">
  <img src="画像のURL" alt="coffee" />
</div>

CSS

#box {
  width: 20%;
}
#box img {
  width: 100%;
}

img要素を括ったdiv要素にwidthプロパティを設定し、画像の幅を%で指定します。また、img要素に「width:100%」を設定します。

３．画像の拡大・縮小サイズを制限する

ウィンドウの高さにあわせて画像の拡大・縮小サイズを制限するには、div要素にmax-heightプロパティ、min-heightプロパティを設定します。

#box {
  height: 20%;
  max-height: 256px;
  min-height: 10px;
}

ウィンドウの幅にあわせて画像の拡大・縮小サイズを制限するには、div要素にmax-widthプロパティ、min-widthプロパティを設定します。

#box {
  width: 20%;
  max-width: 256px;
  min-width: 10px;
}

以上です。このテクニックはFirefoxのホームページを参考にしています。

以前から間近で見たいと思っていた東京スカイツリーに、クロスバイクに乗って行ってきました。自宅から1時間余りで着き、スカイツリーの周りには見物客が大勢いました。

写真は南側のほぼ真下から見上げたところです。リアルで間近から見ると圧巻でした。たいした写真ではありませんが、クリックして拡大するとかなり迫力あると思います。

どの位高いのかうまく説明できませんが、真下から見上げると近くのビルが視界の上側に入ってくる感じです。

以前、NHKでスカイツリー建設の特集をやっていて、鉄骨の部分はすべてひとつひとつ形が違うもので組み立てているそうです。また一番上（634m部分）の中心誤差は2cm以下になってないといけないようで、測定時はたしか8mmだったと思います。

根元の部分はこのようになってます。

周辺の商業施設もいい感じで出来上がりつつあります。

奥に見えるビルもそれほど低くないのですが、スカイツリーは半端ない高さです。

スカイツリーのオープンは2012年5月です。オープンするとかなり混雑が予想されます。「中に入って昇りたい」という人は別として、外観を見学に行くのは今のうちがいいかもしれません。電車で行く場合、東武伊勢崎線業平橋（なりひらばし）が最寄駅です。

フレームにおさまりきらないスカイツリーをバックに、まだ紹介していないマイ自転車も撮りました。

Facebookの開発者ブログでPlatform SDKについて告知がありましたので、本エントリーで情報展開します。

Facebook Platform SDK Support

１．SDKの種類とソース・ドキュメント

Facebookで現在サポートしているSDKの種類と、それぞれのソース・ドキュメントのURLは次の通りです。JavaScriptとPHPのgithubリポジトリはURLが変更になっているようなので注意が必要です。

JavaScript SDK

• ソース
  https://github.com/facebook/facebook-js-sdk
• ドキュメント
  https://developers.facebook.com/docs/reference/javascript/

PHP SDK

• ソース
  https://github.com/facebook/facebook-php-sdk
• ドキュメント
  https://developers.facebook.com/docs/reference/php/

iOS SDK

• ソース
  https://github.com/facebook/facebook-ios-sdk
• ドキュメント
  https://developers.facebook.com/docs/reference/iossdk/

Android SDK

• ソース
  https://github.com/facebook/facebook-android-sdk
• ドキュメント
  https://developers.facebook.com/docs/reference/androidsdk/

２．バグについて

バグや問題の報告には「バグツール」を使ってください、とアナウンスされています。

Bugs Tool（要ログイン）

３．非推奨APIのSDK

以下のSDKは非推奨です。

• Python SDK: 2012年4月1日にGitHubのリポジトリが非公開になる予定です。
• C# SDK: 2012年4月1日にGitHubのリポジトリが非公開になる予定です。
• Facebook iPhone SDK: iOS SDKと置き換えられます。リポジトリはすでに非公開です。