[2992] そのデータは誰のもの？

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■データ・デザインの地平［02］
そのデータは誰のもの？

薬師寺　聖
< https://bn.dgcr.com/archives/20110124140300.html
>
───────────────────────────────────

●「存在のデバイス化」が開発者に投げかける、3つの課題

前回、UXデザインは、ブレーン・マシン・インターフェースを経て、「ヒトの存在のデバイス化」へと向かう、と述べました。この「存在のデバイス化」は、開発者に重い課題を投げかけるようになります。

その影響のおよぶ範囲たるや、デバイスたるユーザーが直接関わる、操作性や認証の問題にとどまりません。バックエンドで動くデータベースにも及び、RDB（リレーショナル・データベース）やXMLのデータ設計（データ・デザイン）の常識に対して、次の3つの課題を投げかけます。

（1）一意性の定義（一意なものは何か？）
（2）一意性の承認（一意なものは、ほんとうに一意か？）
（3）多重CRUD（入れ子化する一意なものの、境界は？）

（1）の「一意なもの」とは、RDBでいえば主キー、XMLでいえば一意であると定義されている特定のノード、それらによって表される「対象」のことです。たとえば、このメルマガの筆者データベースを設計すると仮定しましょう。「筆者ID」を一意であるよう設計したとき、「一意なもの」とは、筆者IDが表す対象、一人の筆者という存在です。

同一の筆者IDを持つ筆者が複数存在するために、ライターAさんの連絡先や記事タイトルのデータが、ライターBさんやライターCさんのレコード（あるいはノード）にも登録されてしまう、といったことはありません。

（2）は、現在一意であるとされているものが、今後も一意であるかどうか、という問題です。「筆者データベース」でいえば、一人の筆者という存在が分割できないという常識を前提として、データベースは設計されます。この社会的な承認に対する問いです。

（3）は、データのCRUD（Create／生成、Read／読み取り、Update／更新、Delete／削除）において、たとえば、
・Aさんの所有するデータが、（Aさん自身というデータも含めて）、Bさんのデータになった。
・Bさんの所有するデータが、（Bさん自身というデータも含めて）、Cさんのデータになった。
・Cさんの所有するデータが、（Cさん自身というデータも含めて）、Aさんのデータになった。
といった入れ子化が発生する場合、どの段階でデータを処理するか、その境界を問うものです。

今回は、「（1）一意性の定義」について取り上げます。

●そもそも一意なものとは、何なのか？

ひとつ生活上の身近な例で、考えてみましょう。読者の皆さんの中には、そろそろ確定申告の処理を始めている方もおられるかと思います。申告書の中の社会保険料控除のうち、健康保険料の申告は個人単位です。しかし、納付や高額医療費給付、発行される保険証は世帯単位です。世帯主以外の者が個人の健康保険証を必要とする場合は、別途作成してもらう必要があります。

一方、国民年金保険料は控除だけでなく納付も個人単位です。健康つながりで、診察券も個人単位。受診する者は、健康保険証の世帯に含まれる（健康か病気かという属性を持たない）個人ではなく、患者であるから、世帯単位になるはずがない、といえば、それまでかもしれません。

医療関係者ではない、診療を受ける側の一住民の立場からすれば、健康保険加入者の情報や「診療情報を含まない」患者の情報は、おしなべて医療に関する個人の基本情報ですから、MML（電子カルテ用XML言語）などのような、何か業界標準の統一規格があり、それに則って記録・管理・運用され、納付や給付に係る情報も連携可能な形で記録されているのではないか、と考えたくなります。

そして、近い将来、僻地の診療所にいたるまでデータの標準化が進み、出張先でも、自身がデバイスとなって紐付けられた診療情報が呼び出され、デスクの引き出しに置き忘れてきたのと同じ薬を、簡単に入手できるようになると夢想するかもしれません。そこでは、一意なものとは、一人のヒトです。

では、健康保険の世帯とは何なのでしょう？　一人のヒトの親ノードでしょうか。それとも、世帯の構成員であるヒトは、世帯の子ノードなのでしょうか。一意なものとは、個人でしょうか、世帯でしょうか。

我々は、平生の目まぐるしい生活の中で、一意性の定義は、常に変わらないと思い込みがちです。が、未来永劫それは変わらないものなのでしょうか。

そもそも一意なものとは、一意性とは、何なのでしょうか？

●いまなぜ、一意なものを問うのか？

では、なぜ、いまさら一意なものを問う必要があるのでしょうか。

それは、データベースの連携に厄介な問題を持ち込むからです。モノが動けば、それに伴ってデータが、そして（XMLでは）メタデータも、動きます。もし、Aさんの所有する「モノ」が移動して、Bさんの所有するところとなれば、モノを表すデータも、モノの意味を表すメタデータも、AさんからBさんへと動きます。XMLでいえば、品物が動けば、＜品名＞品名データ＜/品名＞も、それに伴って動きます。

Aさんのデータベース、Bさんのデータベース、それぞれの設計者が異なっていたとしても、一意なものが同じ「一人のヒト」であるならば、データの連携は比較的スムースに行われます。

しかし、一意なものが異なっていると、構造変換処理などが必要になりかねません。そのうえ、「存在のデバイス化」時代には、境界明瞭でない「モノ」と、それを表すメタデータが数多く流通し始めます。

問題を想像しやすくするために、極端な例、ここでは、境界が分かりにくい献血と輸血を例として説明を試みましょう。チューブの中を流れている時、パックに入った時、患者の体内に入った時、互いに一意である献血者と患者の両方のものである瞬間があり、一意なものにのみ属するはずのモノやデータが重なってしまう瞬間があるでしょうか。

献血者は、誰かを助けたい気持ちはあっても、この瞬間までは自分のものであると主張したりしません。これが、大気であっても、どこまでが「私」の呼吸、私の所有する大気だと、誰も主張しませんし、水道管を流れる水でも同様です。一意なものと、それに属するデータには社会的な承認があります。

現在のデータ・デザインにおいて、このようなことについて悩むのは、ナンセンスでしかありません。しかし、動くモノが在庫商品などではなく、デバイスたる存在＝「生命体」あるいは、その一部となった時には、どうでしょうか。将来、簡単に身体の一部を交換し合うような社会が到来した暁には、どうなるでしょうか。

一意性の定義は、排他制御（トランザクションが完了するまで、別の更新を防ぐ仕組み）に絡む問題を引き起こしはしないでしょうか。連携可能性のあるデータベースすべてにおいて、一意性の定義が同一でなければ、デバイスたる存在（あるいはその一部）が動き、それを表すデータが動くとき、整合性を維持できるでしょうか。

●一意な「私」は、どこから、どこまで？

いくらか先、再生医療が広く普及した暁に、ネットショップで申し込めば、自分の体の一部を増やして届けてくれるサービスが登場して、一般化したとしましょう（あくまで仮定の話です）。

ネットショップという決済窓口の先には、注文生産を引き受けた会社があります。そして、その会社にも、外注先があるとします。

ユーザーのAさんは、指を火傷し、認証のために必要な皮膚を発注しました※。日本のネットショップのB社が受け付け、C社で製造し、C社は海外のD社に一部を委託するとします。

返品はできないでしょうから、Aさんが［注文］ボタンを押した時点、あるいは、製造業者が注文請書を発行した時点で、Aさんの身体は、外注先のD社まで拡大することになるかもしれません。他方、別人で同様の怪我をしたZさんの身体は、D社とは異なる国のW社にまで拡大するかもしれません。もはやこうなると、ユーザーである個人が、複数の法人にまで拡大し、さらには注文者によって、拡大する範囲が異なり、輸送、納品、皮膚が根付いた時点で、拡がりの範囲が縮まるという、なんとも奇妙なことになります※※。

一意なものであるヒトのデータをXMLの木構造の中に押し込み、仮に、「存在とは、各個体の意識の座のある座標値を中心点とする拡がりのある場に属する情報のセット」として、拡がりの範囲（リーフノードに至る構造）を定義するとしましょう。

ノードは、どこまで拡がるのでしょう？
「私」は、どこまで拡大するのでしょう？
いったい、どこからどこまでが「私」、一意な存在の「私」、なのでしょうか。

存在のデバイス化時代には「生命体」がデバイスとなるのですから、デバイスたる一意な「生命」とは何か？　「存在」とは何か？　という問いに対する回答が用意されていなければなりません。そうでなければ、標準化されたデータ・デザインは難しくなります。

一意性の定義に対する社会的な承認が曖昧なまま構築されたシステムは、運用が長期化するほど、定義の変更による影響を受けやすくなり、更新や連携処理の際に問題を引き起こしかねません。そうなった時、しわ寄せに苦しむことになるのは、修復や変換処理を手がける現場の開発者（筆者含む）であろうと思います。

もっとも、今回述べたことは、一人のヒトが一意であることを前提とした話です。では、もし、一人のヒトが一意ではなくなったら？次回は「子ノード化する脳」について述べてみます。

※想像しやすくするために、怪我の部位は皮膚としておきます。認証のために必要なものを、認証の必要なショップで注文するのはおかしな話ですが、異なる認証方法が採用されているものとします。

※※本稿でいう「拡大」とは単純な「expand」であって、拡張する心（extended mind）の「extend」ではありません。

【薬師寺聖／個人事業所セイザインデザイン】
個人事業所　< http://www.seindesign.net/
>
ブログ　< http://blogs.itmedia.co.jp/seindesign/
>
PROJECT KySS　< http://www.projectkyss.net/
>
< infosei@seindesign.net >

ヴィジュアル、サウンド、テキスト、コードの間を彷徨っている、四国の個人事業主。科学技術や医療・福祉分野のXML案件の企画デザインに実績があり、コラボレーションユニットPROJECT KySS名義で、XML、RIA、.NETに関する書籍や記事、多数。
Microsoft MVP for Development Platforms - Client App Dev
(Oct 2003-Sep2011)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト［265］Photoshop CS3/CS4/CS5編
画像をHTMLのTableタグに変換する

古籏一浩
< https://bn.dgcr.com/archives/20110124140200.html
>
───────────────────────────────────
今回のネタは、画像をHTMLのTableタグに変換するスクリプトです。画像を変換するプログラムはいくつか存在しますが、ここではHTML5のタグをベースにしてTableタグで画像を書き出します。

変換する画像はなるべく小さいものにしてください。というのも、実行に時間がかかるためです。MacPro（Xeon 2.26/8CPU）の場合、32×41ピクセルで変換に27秒ほど時間がかかります。


// Photoshopの画像をtableタグに変換
function pixelToTable(){
preferences.rulerUnits = Units.PIXELS;
for (var y=0; y<docObj.height.value; y++) {
text += '<tr>';
for (var x=0; x<docObj.width.value; x++){
var rgb = getPixel(x,y);
var R = rgb[0].toString(16);
var G = rgb[1].toString(16);
var B = rgb[2].toString(16);
if (R.length < 2){ R = "0" + R; }
if (G.length < 2){ G = "0" + G; }
if (B.length < 2){ B = "0" + B; }
text += '<td style="background-color:#'+R+G+B+'"></td>';
}
text += '</tr>';
}
activeDocument.selection.deselect();
}
//---------------------------------------------
// ピクセル値を取得する(8bitモード専用)
//---------------------------------------------
function getPixel(x,y){
var R = G= B= 0,data,i;
docObj.selection.select([[x,y],[x+1,y],[x+1,y+1],[x,y+1],[x,y]]);
data = docObj.channels[0].histogram;
for (i=0; i<256; i++) if (data[i] > 0) { R = i; break; }
data = docObj.channels[1].histogram;
for (i=0; i<256; i++) if (data[i] > 0) { G = i; break; }
data = docObj.channels[2].histogram;
for (i=0; i<256; i++) if (data[i] > 0) { B = i; break; }
return [R,G,B];
}
// 保存ファイル選択
var saveFile, text="", docObj;
(function(){
if (app.documents.length == 0){
alert("変換する画像ファイルを開いてから実行してください");
return;
}
docObj = activeDocument;
saveFile = File.saveDialog("保存するHTMLファイル名を入力してください");
if (!saveFile) { return; }
var flag = saveFile.open("w");
if (!flag){ alert("ファイルが開けません"); }
var s = (new Date()).getTime();
pixelToTable();
var e = (new Date()).getTime();
var time = Math.round((e - s) / 1000);
saveFile.write('<!DOCTYPE html><head><title>pixeltable</title></head><body>');
saveFile.write('<table style="border:0px solid black;border-collapse: collapse;">');
saveFile.write(text);
saveFile.write('</table></body></html>');
alert("HTMLファイルの作成が終了しました。変換にかかった時間："+time+"秒");
})();


【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/
>

今回のネタは、Twitterで、HTML5でHTML5のロゴをTableタグで出力したらというジョークから採用しました。意外とPhotoshopは、こういった画像処理というか画像変換には向いていないアプリケーションだったりします。
それから、来月は2冊本が出ます。
1冊は

・JavaScriptコーディング ベストプラクティス
< http://www.amazon.co.jp/dp/4844361791
>

で、もう1冊が

・HTML5+JavaScriptアイデア＆実践サンプル

です。「HTML5+JavaScriptアイデア＆実践サンプル」は現時点ではAmazonでは取り扱ってないようです。あと、Acrobat XのJavaScriptのページも用意しました。

・Adobe Acrobat X + JavaScript例文辞典
< http://www.openspc2.org/reibun/AcrobatX/
>

・Google API Expertが解説するHTML5ガイドブック
< http://www.amazon.co.jp/dp/4844329278
>

・プロならば知っておくべきWebコーディング＆デザインの定石100
< http://www.amazon.co.jp/dp/4844361538
>

・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/
>

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集　発売中
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■明日もデザインで食べていこう！［09］
CSSのみでシンプルなスライドを実現・新セレクタtargetを使う

秋葉秀樹
< https://bn.dgcr.com/archives/20110124140100.html
>
───────────────────────────────────
今年1回目の記事です、どうぞよろしくお願いします。
CSS3で策定されている疑似クラスと呼ばれるセレクタ「target」のキホンを書いてみようと思います。

簡単に言うならば、:targetは、「マウスがクリックされたとき」をキッカケにして、他の要素のスタイルをコントロール出来る、というもの。今までは、:hover（マウスが乗った時）や、:active（マウスボタンが押された、押されっぱなしの状態の間）など、マウスの動きによってCSSだけで状態、スタイルを変えていく事ができました。

まずはシンプルなサンプルから。
< http://akibahideki.com/digicre/case_09/index.html
>

今までだと、「マウスが乗った時に子要素をdisplay: block;にする」というのは、:hover状態を作れば簡単にできました。この例のような「クリックされた時」をキッカケにそう言った事を行うにはJavaScriptが必要でしたが、今回のサンプルではJavaScriptを使わずにこういった事を可能にします。

■HTMLソース
<p><a href="#content">押してください。</a></p>
<div id="content">内容が表示されます。</div>

■CSSソース
div#content {
display: none;
}

div#content:target {
display: block;
}

まず、aタグ内にページ内リンクを作ります。#（ハッシュ）つきのid名を呼び出し、pタグからdivタグのスタイルをコントロールするのです。

呼び出されたid名「#content」（div#content）のtarget時のCSSの指定をします。もともとdiv#contentはdisplay:noneされていて見えないのですが、呼び出す側のaタグに呼び出される側のid名をハッシュ付きで、
div#content:targetとし、スタイルを記述します。
これによって、aタグがクリックされた事をキッカケに:targetが書かれている通りのスタイルに変更されます。

例えば、簡単なスライドのようなものならCSSのみで実現できます。
次のサンプルを見てみましょう。
< http://akibahideki.com/digicre/case_09/example.html
>

このサンプルでは1番目から5番目の「呼び出し」があり、その下にそれに対応する内容が表示されます。

順を追って解説していきたいと思います。

<div>
<ul class="nav">
<li><a href="#id1">1番目</a></li>
<li><a href="#id2">2番目</a></li>
<li><a href="#id3">3番目</a></li>
<li><a href="#id4">4番目</a></li>
<li><a href="#id5">5番目</a></li>
</ul>

<ul class="content">
<li id="id1">1番目の内容です。</li>
<li id="id2">2番目の内容です。</li>
<li id="id3">3番目の内容です。</li>
<li id="id4">4番目の内容です。</li>
<li id="id5">5番目の内容です。</li>
</ul>
</div>

上のul.navがいわゆる「呼び出し元」で、下のul.contentが「呼ばれる側」とでも言いましょうか。1番目のボタンには、ul.content内の「li#id1」が文字通りのターゲットになります。そして:targetと指定されたスタイルの内容に「一時的」に変更されます。

ここで「一時的」と書きましたが、:hoverの場合、マウスが外れると元の状態に戻りますよね？　targetも似てます。他のtargetが指定されたら、今までのターゲットのスタイルは元に戻ります。

「1番目」のボタンを押した次に「2番目」を押してください。「1番目」は、元の状態、透明度がゼロに戻って見えなくなります。「ターゲットが外れたら元にもどる」を覚えておきましょう。

このサンプルでは、「ふわっと」押されたときに透明度が浮かび上がってくるようにtransitionを指定していますが、割愛してシンプルに書くと今回で言えば重要な事は以下のこれだけ、と言って良いでしょう。

ul.content li {
opacity: 0;
}

#id1:target, #id2:target, #id3:target, #id4:target, #id5:target {
opacity: 1;
}

初期設定でopacityをゼロにしておけば、要素は存在するけど透明な状態なので見えない状態となります。ターゲット状態は共通なので、複数同じ指定をしてopacityを1にしています。

今回は最も単純なスライドのようなものでしたが、実は、ボタン一つでスクロールをして写真を切り替えるようなビジュアルも実現可能です。
Web Designing 2011年2月号には、そちらのサンプル記事を寄稿していますので、興味がある方は是非ご覧下さい。
< http://www.amazon.co.jp/exec/obidos/ASIN/B004GY3UQW/dgcrcom-22/
>

ではでは、今年もどうぞよろしくお願いします！！

【あきば・ひでき】hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。
HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記（1/24）

・1月末の日曜日は、マンションの年一回の定期総会である。もう7回になる。総会は欠かさず出席しているが、満足できたことは一度もない。とにかく議事運営が稚拙で、テキパキ進まない。会議中ずっとイライラが続行する。わがマンションは、管理会社により管理組合役員のローテーションが決められていた。引き渡しの説明会で初めて知らされた。第一期の組合役員を引き受けていいと思っていたわたしだったが、今から10年くらい後に役員が回ってくるようだ。その頃はもう関心はないのではないか。役員は一年交代で継続性がないから、ワンマン理事長の長期政権などという弊害はないが、諸問題は常に先送りされる傾向にある。こういうときは管理会社のサポートが万全であればいいのだが、いささか頼りない。議長（理事長）と管理会社の担当の連係プレーも悪く、出席者の質問に両者が立ち往生している。よくしたもので、出席者のなかに建築や管理、経理などのプロがいて、彼らが代わってうまく説明してくれたりする。相変わらず管理会社の担当は「させていただきます」「というかたちになっております」の連発だ。やはり冒頭で「させていただきます」禁止を動議すべきだったと思うが、そういう意見は異端で大人げないか。今回の収穫は、マンション住人に隠れた各分野のプロがいることがわかったことで、組織化好きの血が騒ぐ。（柴田）

・確定申告の準備のことは今は忘れよう......。／ウエストラインがかゆくなってきた。やばし。帯状疱疹の時も最初はこんな感じだった。仕事が一区切りして、無理して飲みに行く（飲まないが）→かゆくなる→泊まりで遊びに行く→痛みに発展→時間が経ったら治るだろうと思い、仕事があるので放置→痛さ増強→放置→座ることもできなくなる、難病なんじゃないかと恐れる→病院に行く。待合室で待つ事も困難。先生に経緯やら症状やらを説明しつつ患部を診てもらったら、一目見るなり「帯状疱疹ですね」。難病ではなかった......。たぶん今、ちゃんとした生活をしたら治ると思うのだが、山積みの仕事が......。それでなくても肩こり腰痛、腕の痛みに風邪。夜食代わりにチョコレート食べ過ぎて、口にするのも嫌。あっ、ちょっと前に、ミスタードーナツのエンゼルテディパンを買ってきてもらった。スイーツ好きの友人に写真と感想を送った。いまいちだと連絡したのに、食べないと気が済まなかったのだろう、違う味のを買った友人が写真を送ってきた。仕事のストレスのせいか、その写真を見た途端、笑いが止まらなかった。ヒステリー現象？　友人のコメント「ひどくない？　このくま見たとたんに写真送らねばと。縦にぎゅーぎゅーに入っていて耳しか見えなかったの。耳の下の分、食べるとこ多かったかも!?」。かわいそうなんだけど、ブサかわいくて、愛おしい。甥が楽しみにしていたお菓子のパッケージ開くのをミスって、床に全部ばらまいてしまった、そんなかわいそうで同情はするんだけど笑いを誘う、可愛くて仕方が無い、そんな感じ。（hammer.mule）
< https://bn.dgcr.com/archives/20000108000000.html
>
2000年だったのか
< http://www.ne.jp/asahi/web/oki/health/taijohosin.html
>
痛かった......。同じ箇所にはならないらしいから大丈夫そう
< http://ja.wikipedia.org/w/index.php?oldid=35087610#.E6.96.B9.E8.A8.80
>
帯状疱疹に方言が
< http://www.misterdonut.jp/m_menu/new/101227_001/index.html
>
エンゼルテディパン公式写真
< >
これを送ったら
< >
これが届いた