<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>Goodpic</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/" />
    <link rel="self" type="application/atom+xml" href="http://www.goodpic.com/mt/atom.xml" />

   <id>tag:www.goodpic.com,2006:/mt//1</id>

    <link rel="service.post" type="application/atom+xml" href="http://www.goodpic.com/admin/mt-atom.cgi/weblog/blog_id=1" title="Goodpic" />
    <updated>2010-02-08T15:12:41Z</updated>
    <subtitle>湘南　茅ヶ崎の海、サーフィンの写真やレストラン紹介。ブログやWEBサービスAPI、アフィリエイトなどのネット技術。自然エネルギーなどがテーマです。</subtitle>
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type 5.01</generator>
 

<entry>
    <title>マイクロソフト戦記 （読書感想）</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2010/02/post_251.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://www.goodpic.com/admin/mt-atom.cgi/weblog/blog_id=1/entry_id=1332" title="マイクロソフト戦記 （読書感想）" />
    <id>tag:www.goodpic.com,2010:/mt//1.1332</id>
    
    <published>2010-02-08T15:11:21Z</published>
    <updated>2010-02-08T15:12:41Z</updated>
    
    <summary></summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="book" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[
<p><a href="http://smallworld.west-tokyo.com/">にっくさん</a>からいただいた、『<a class="item url" href="http://www.amazon.co.jp/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%BD%E3%83%95%E3%83%88%E6%88%A6%E8%A8%98%E2%80%95%E4%B8%96%E7%95%8C%E6%A8%99%E6%BA%96%E3%81%AE%E4%BD%9C%E3%82%89%E3%82%8C%E6%96%B9-%E6%96%B0%E6%BD%AE%E6%96%B0%E6%9B%B8-%E3%83%88%E3%83%A0%E4%BD%90%E8%97%A4/dp/4106102986%3FSubscriptionId%3D15SMZCTB9V8NGR2TW082%26tag%3Dgoodpic-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4106102986">マイクロソフト戦記--世界標準の作られ方 (新潮新書)</a>』を読み終わりました。１９８０年代後半から１９９０年代まで、MS-DOS、MSX、OS/2、そしてウィンドウズへと続くデファクトスタンダードを巡る戦い。マイクロソフト日本法人のマーケティング担当として、その真っ只中を駆け抜けた、著者の実体験が記されています。</p>
<p>マイクロソフトというと、最近は巨大企業、つねにチャレンジを受ける側、というイメージがありますが、本書の中心はウィンドウズの成功以前。特にMSXやOS/2での失敗体験にも、大きくページ数が割かれています。失敗の裏には、どのような原因があったのか。それを教訓に、次のプロジェクトではどのような手を打ったのか。現場の奔走劇を、克明に綴っている。現場の担当者の労力の大きさを考えると、これは果たして成功した物語なのか？と思ってしまうほどの紆余曲折ぶりです。</p>
<p>しかし、常にぎりぎりの選択を迫られ続けられることで、初めて見えてくるものもある。限られた情報を元に決断を下すためには、判断の指針を強くイメージする必要がある。そのための「最大多数の最大幸福」というシンプルな論理。また、限られたリソースで、最大多数に最大幸福を提供するためには、どのような仕組みが必要なのか。プロジェクトをスケールアウトさせていくためには、パートナーや開発者の協力が不可欠だが、そのためにはどのような技術情報、サポート体制が必要か。いつか来るテクノロジーの大波に備えるためには、「三回はバージョンアップするぐらいの資金力と開発担当者の体力が要る」という言葉にも、経験者の重みがあります。</p>
<p>実は今、『<a href="http://www.amazon.co.jp/%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%AE%E8%82%B2%E3%81%A6%E6%96%B9-Karl-Fogel/dp/4873114128%3FSubscriptionId%3D15SMZCTB9V8NGR2TW082%26tag%3Dgoodpic-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4873114128" target="_top">オープンソースソフトウェアの育て方</a>』（<a href="http://producingoss.com/ja/">オンラインで全文読めます</a>）も同時に読んでいるのですが、プロジェクト運営における現場の経験則という面では、共通する部分も多々あり、興味深かったです。こちらは、また別の機会にまとめたいと思います。</p>

<div class="section refer">
<p>『 <cite><a href="http://www.amazon.co.jp/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%BD%E3%83%95%E3%83%88%E6%88%A6%E8%A8%98%E2%80%95%E4%B8%96%E7%95%8C%E6%A8%99%E6%BA%96%E3%81%AE%E4%BD%9C%E3%82%89%E3%82%8C%E6%96%B9-%E6%96%B0%E6%BD%AE%E6%96%B0%E6%9B%B8-%E3%83%88%E3%83%A0%E4%BD%90%E8%97%A4/dp/4106102986%3FSubscriptionId%3D15SMZCTB9V8NGR2TW082%26tag%3Dgoodpic-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4106102986">マイクロソフト戦記--世界標準の作られ方 </a></cite>』 より</p>

<blockquote cite="http://www.amazon.co.jp/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%BD%E3%83%95%E3%83%88%E6%88%A6%E8%A8%98%E2%80%95%E4%B8%96%E7%95%8C%E6%A8%99%E6%BA%96%E3%81%AE%E4%BD%9C%E3%82%89%E3%82%8C%E6%96%B9-%E6%96%B0%E6%BD%AE%E6%96%B0%E6%9B%B8-%E3%83%88%E3%83%A0%E4%BD%90%E8%97%A4/dp/4106102986%3FSubscriptionId%3D15SMZCTB9V8NGR2TW082%26tag%3Dgoodpic-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4106102986" title="マイクロソフト戦記--世界標準の作られ方 ">
<p>「ベンサムは、産業革命下の十八世紀から十九世紀にかけて活躍した哲学者です。彼は『最大幸福論』を唱え、国民全体が豊かになる政策が必要だと訴えました。ユニバーシティ・カレッジの創業者は、その考えをもとに宗教や階級、人種に関係なく、平等に教育を受けられる大学を設立したのです。ベンサムの遺言に従って亡骸はミイラにされ、その後、構内で展示されるようになりました。」（p.20）</p>

<p>（中略）</p>

<p>しかし将来的にはGUIの時代になると考えたゲイツは、「インタフェイス・マネージャ（IM）」構想を練り上げていた。この頃のIM構想は、マイクロソフトが開発していた表計算ソフト・マルチプランのように、画面下にメニューが並ぶシステムだったが、基本概念としてはディバイス・インディペンダンス、GUI、WYSIWYG（フォントがグラフィックスが画面で表示されたように印刷される機能）の三つがあった。</p>
<p>その中でゲイツが最も重要と考えたのは、ディバイス・インディペンダンス。どんなハードでも、ウィンドウズ用のソフトなら改変しなくても動くシステムである。ソフト開発者が機種対応する手間から開放され、どこのメーカーのPCでも動けば市場が大きく広がる。ベンサムが提唱した「最大多数の最大幸福」に通じるコンセプトである。（p.127）</p>

<p>（中略）</p>

<p>それでは、デファクトスタンダードを作り出す定石はないのだろうか。</p>
<p>私はその問いに対して、こう答えたい。絶対作り出せるというような魔法は存在しないが、デファクトスタンダードを作り出すことを可能にする条件を挙げることはできる、と。</p>
<p>最後に、少しまとめてみたいと思う。</p>
<p>まず、核となるテクノロジーを持っていることが大事だ。共同開発とかライセンスでは、アスキーやIBMのようになってしまう。テクノロジーをベースに「最大多数の最大幸福」の論理で、そのテクノロジーをディベロッパーに使ってもらえるように分け隔てなく、オープンにしなければならない。大勢が参加してデファクトとなることで、多数が利益を得られるような仕組みが不可欠である。胴元だけが儲かるようなシステムには、ディベロッパー達は集まることはない。</p>
<p>ディベロッパーズ・リレーション部隊を設立し、開発キットを提供する。内容は開発システムやデバッグツール、完全なAPI仕様書と開発チュートリアル、初心者向けのサンプルソースコードや練習用システムなどが含まれる。開発者が困った場合は、サポートするようなメカニズムが必要である。</p>
<p>第二に必要なのは、ネットワークを正確に把握することだ。デファクトスタンダードは、市場のコンセンサスなくしては実現しない。だから、市場に受け入れられるような個別の戦略が必要だ。その市場を見渡して理解し、市場参加者の人間関係やニーズを把握する。人間関係のネットワークの形を理解し、どこの誰を巻き込んで、どこのハブを取り込めば良いのかを知っておく。そして最終的には、デファクトのホルダーとして、市場の中心として収まるのを常に忘れないことである。</p>
<p>そして、テクノロジーの波を理解し、少なくとも三波前から準備をしておくことも重要だ。初期からの市場参加者として知名度を得ることは重要だし、長い時間で経験を積むことで、大波が来たときに、一気に市場普及へと動けるようにしておかないといけない。テクノロジーの進歩と普及の度合いを敏感に感じ取り、的確なスペックの商品を出荷する。そのためには、三回はバージョンアップするぐらいの資金力と開発担当者の体力が要る。</p>
<p>ネットのみならず目に見えるイベントで、人間関係を構築しておくことも大切である。満場の人だかりを確認して初めて、市場関係者はテクノロジーの流行を確信する。</p>
<p>だから、イベントには市場のメジャープレイヤーを取り込んでおくことが不可欠である。一方、意識的に市場でのバズ（騒ぎ）を発生させる、メイブンのような人材を集めておき、ここぞというときに流行を起爆させることも重要だ。</p>
<p>そして最後に、自分のテクノロジーには、人を魅惑し引きつけることができる特徴を持たせる必要がある。テクノロジーとは何もパソコンでもネットにもかぎらない。</p>
<p>はっきりしているのは、そのテクノロジーが、あるいは商品が「最大多数の最大幸福」をもたらすものでなくてはならないということである。（p.248）</p>

</blockquote>
</div>




<div class="hreview" ><a class="item url" href="http://www.amazon.co.jp/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%BD%E3%83%95%E3%83%88%E6%88%A6%E8%A8%98%E2%80%95%E4%B8%96%E7%95%8C%E6%A8%99%E6%BA%96%E3%81%AE%E4%BD%9C%E3%82%89%E3%82%8C%E6%96%B9-%E6%96%B0%E6%BD%AE%E6%96%B0%E6%9B%B8-%E3%83%88%E3%83%A0%E4%BD%90%E8%97%A4/dp/4106102986%3FSubscriptionId%3D15SMZCTB9V8NGR2TW082%26tag%3Dgoodpic-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4106102986"><img src="http://ecx.images-amazon.com/images/I/41C-CL1hzdL._SL160_.jpg" alt="photo" class="photo" style="border:none;" /></a><dl style="margin-bottom:0.5em; text-align:left;"><dt class="fn"><a class="item url" href="http://www.amazon.co.jp/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%BD%E3%83%95%E3%83%88%E6%88%A6%E8%A8%98%E2%80%95%E4%B8%96%E7%95%8C%E6%A8%99%E6%BA%96%E3%81%AE%E4%BD%9C%E3%82%89%E3%82%8C%E6%96%B9-%E6%96%B0%E6%BD%AE%E6%96%B0%E6%9B%B8-%E3%83%88%E3%83%A0%E4%BD%90%E8%97%A4/dp/4106102986%3FSubscriptionId%3D15SMZCTB9V8NGR2TW082%26tag%3Dgoodpic-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4106102986">マイクロソフト戦記--世界標準の作られ方 (新潮新書)</a><img src='http://www.assoc-amazon.jp/e/ir?t=goodpic-22&l=ur2&o=9' width='1' height='1' border='0' alt='' /></dt><dd>新潮社 2009-01</dd></dl><p class="similar"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798118397/goodpic-22/ref=nosim/" target="_top"><img src="http://images.amazon.com/images/P/4798118397.09._SCTHUMBZZZ_.jpg"  alt="マイクロソフト ビル・ゲイツ不在の次の10年" style="border:none;font-size:10px;" /></a> <a href="http://www.amazon.co.jp/exec/obidos/ASIN/4413042255/goodpic-22/ref=nosim/" target="_top"><img src="http://images.amazon.com/images/P/4413042255.09._SCTHUMBZZZ_.jpg"  alt="進化するグーグル (青春新書INTELLIGENCE)" style="border:none;font-size:10px;" /></a> <a href="http://www.amazon.co.jp/exec/obidos/ASIN/4484091046/goodpic-22/ref=nosim/" target="_top"><img src="http://images.amazon.com/images/P/4484091046.09._SCTHUMBZZZ_.jpg"  alt="リーダー・セラピー マイクロソフトの強さの秘密" style="border:none;font-size:10px;" /></a> <a href="http://www.amazon.co.jp/exec/obidos/ASIN/4106102927/goodpic-22/ref=nosim/" target="_top"><img src="http://images.amazon.com/images/P/4106102927.09._SCTHUMBZZZ_.jpg"  alt="カラオケ秘史--創意工夫の世界革命 (新潮新書)" style="border:none;font-size:10px;" /></a> <a href="http://www.amazon.co.jp/exec/obidos/ASIN/479735092X/goodpic-22/ref=nosim/" target="_top"><img src="http://images.amazon.com/images/P/479735092X.09._SCTHUMBZZZ_.jpg"  alt="病院はもうご臨終です (ソフトバンク新書)" style="border:none;font-size:10px;" /></a> </p><p class="gtools" style="font-size:10px;">by <a href="http://www.goodpic.com/mt/aws/index.html" >G-Tools</a> ,  <abbr class="dtreviewed" title="2010/02/08">2010/02/08</abbr></p></div>
]]>
        
    </content>
</entry>

<entry>
    <title>jQuery の oEmbed プラグインで、FlickrやYouTubeなどのコンテンツを取得する</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2010/02/jquery_oembed.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://www.goodpic.com/admin/mt-atom.cgi/weblog/blog_id=1/entry_id=1331" title="jQuery の oEmbed プラグインで、FlickrやYouTubeなどのコンテンツを取得する" />
    <id>tag:www.goodpic.com,2010:/mt//1.1331</id>
    
    <published>2010-02-06T15:17:34Z</published>
    <updated>2010-02-06T15:36:03Z</updated>
    
    <summary> 今日は MT Hackathon だったので、oEmbed を試しに使ってみた...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="tech" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[
<p>今日は MT Hackathon だったので、oEmbed を試しに使ってみた。oEmbedは、Flickr、YouTubeなどの対応サービスのURLから、コンテンツの内容をXMLやJSON形式で取得するためのAPI仕様です。ブログなどに貼付けるためのHTMLを、共通のAPIコールで取得できるのがメリットですね。</p>

<ul>
<li><a href="http://www.oembed.com/">oEmbed</a></li>
<li><a href="http://d.hatena.ne.jp/lyokato/20080815/1218767965">URLを埋め込みコンテンツに変換するoEmbedの仕様 - Codin' In The Free World</a></li>
</ul>

<p>oEmbedを利用するためのライブラリも、<a href="http://search.cpan.org/‾miyagawa/Web-oEmbed/">Perl</a>, <a href="http://github.com/netshade/oembed_links">Ruby</a>, <a href="http://code.google.com/p/php-oembed/">php</a> などそろっていますが、手軽な<a href="http://code.google.com/p/jquery-oembed/">jquery-oembed プラグイン</a>を使ってみた。動作サンプルがこちら。</p>

<ul>
<li><a href="http://s3.goodpic.com/samples/oembed-sample.html">jquery-oembed 動作サンプル</a></li>
</ul>

<p>使うのは非常に簡単。こんなフォームに対して、</p>

<pre class="source">
&lt;form action="" id="oembed_form"&gt;
  &lt;label&gt;oEmbed対応URL&lt;/label&gt;
  &lt;input id="oembed_url" type="text" value="" style="width: 300px;" /&gt;
  &lt;input id="oembed_load" type="submit" value="コンテンツ取得" /&gt;
&lt;/form&gt; 
</pre>

<p>以下のようなjavascriptで、oEmbedライブラリを利用する。</p>

<pre class="source">
$(document).ready(function(){

  // oembed ライブラリの設定。コンテンツの最大表示サイズや、
  // コンテンツをDomエレメントに追加する方法を選ぶ。
  $.fn.oembed.defaults = {
        maxWidth: 500, maxHeight: 400,
        embedMethod: "append" // "replace", "auto", "append", "fill"
  };

  // 指定したHTMLエレメントにoEmbedで取得したHTMLコンテンツをappendする
  $("form#oembed_form").submit( function () {
  
    $("#oembed_contents").oembed($("#oembed_url").attr("value"));
    return false;
  });
}); 
</pre>

<p>プラグインのファンクションは、oembed(url, options, callback) の三つの引数を指定できます。url は oEmbed 対応ウェブサイトのURL。オプションは前述の maxWidth, maxHeight, embedMethod の三つ。callback を指定して、oEmbed API から取得したデータを自由に整形、表示できます。ブックマークレットなどにも応用できそうですね。</p>
]]>
        
    </content>
</entry>

<entry>
    <title>Mac OSXの Java セキュリティアップデートでJuniper Network Connect がつながらなくなる問題の対処</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2010/02/mac_osx_java_ju.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://www.goodpic.com/admin/mt-atom.cgi/weblog/blog_id=1/entry_id=1330" title="Mac OSXの Java セキュリティアップデートでJuniper Network Connect がつながらなくなる問題の対処" />
    <id>tag:www.goodpic.com,2010:/mt//1.1330</id>
    
    <published>2010-02-03T14:31:42Z</published>
    <updated>2010-02-03T14:41:55Z</updated>
    
    <summary>前にもMac OSX のセキュリティアップデートでPerlの環境をブチ壊れた記憶...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="mac" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[<p>前にもMac OSX のセキュリティアップデートでPerlの環境をブチ壊れた記憶がありますが、、、再びやってきましたよ。12月のJava のセキュリティ アップデート以降に、Juniper SSL VPN の Network Connect がつながらなくなった。「いくつかのネットワークコンポーネントが見つかりません」的なエラーで起動しない。色々検索したらありました。</p>

<ul><li><a href="http://kb.juniper.net/index?page=content&id=KB16134&actp=LIST">Juniper Networks - NC fails to install on Mac OS X with error message "An error occurred while extracting one of the Network Connect components" - Knowledge Base</a></li></ul>

<p>上記ページに問題の詳細と、ワークアラウンドが記載されていました。具体的には、ターミナルで以下のコマンドを入力する。その後、ネットワークコネクトを接続したら、正常につながりました。</p>

<pre class="source">
$ sudo keytool -storepasswd -new changeit -keystore /System/Library/Frameworks/JavaVM.framework/Resources/Deploy.bundle/Contents/Home/lib/security/cacerts -storepass changeme
</pre>]]>
        
    </content>
</entry>

<entry>
    <title>HTML5における、仕様と実装のデリケートなダンス</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2010/01/dive_into_html5.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://www.goodpic.com/admin/mt-atom.cgi/weblog/blog_id=1/entry_id=1329" title="HTML5における、仕様と実装のデリケートなダンス" />
    <id>tag:www.goodpic.com,2010:/mt//1.1329</id>
    
    <published>2010-01-31T14:20:11Z</published>
    <updated>2010-02-01T01:42:12Z</updated>
    
    <summary>HTML5とは何なのか？を知るうえで、Dive into HTML5 の第一章『...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="xml" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[<p>HTML5とは何なのか？を知るうえで、Dive into HTML5 の第一章『<a href="http://diveintohtml5.org/past.html">How Did We Get Here? - Dive Into HTML5</a>』が非常に参考になったので、ちょっと整理してみます。</p>

<p>注意 : この記事は原文の翻訳が目的ではないので、内容については原文を参照ください。</p>

<p>第一章は、まるごと、HTML5からさかのぼったHTMLの歴史を説明しています。歴史といっても年表的なものなく、その背景で、どのような人たちが、どのように仕様策定を進めていったのか、現場のリアルな実情を描き出している。というのも、HTML5は独立したひとつの仕様というよりは、様々な人の努力の結果が凝縮され、さらに現在進行形で変化し続けている、ウェブ全体の大きな動きの一断面ともいえるからです。</p>

<img width="526" height="116" src="http://b.wearehugh.com/dih5/openclipart.org_johnny_automatic_animals_on_see_saw.png" alt="" />


<div class="section refer">
<p>『 <cite><a href="http://diveintohtml5.org/past.html">How Did We Get Here? - Dive Into HTML5</a></cite>』 より</p>

<blockquote cite="http://diveintohtml5.org/past.html" title="How Did We Get Here? - Dive Into HTML5">
<p>Implementations and specifications have to do a delicate dance together. You don't want implementations to happen before the specification is finished, because people start depending on the details of implementations and that constrains the specification. However, you also don't want the specification to be finished before there are implementations and author experience with those implementations, because you need the feedback. There is unavoidable tension here, but we just have to muddle on through.</p>

<p>仕様と実装は、つねにデリケートなダンスを踊らなければいけない。仕様が決まる前に実装してしまうと、こまかい実装に人々が依存するようになってしまう。それは、仕様を制限することにもなるから避けたいところだ。しかし、実装が出てくる前に仕様を完了するのも望ましくない。著者は、実装によるフィードバックが必要だからだ。そこには避けられない緊張関係が存在する。だが、なんとか切り抜けて進むしかない。</p>
</blockquote>



</div>

<p>その過程を&lt;img &gt; エレメントを例に、1993年のMarc Andreessenの提案からスタートした議論を、具体的にたどりつつ説明しています。</p>


<div class="section refer">
<p>『 <cite><a href="http://diveintohtml5.org/past.html">How Did We Get Here? - Dive Into HTML5</a></cite>』 より</p>
<blockquote cite="http://diveintohtml5.org/past.html" title="How Did We Get Here? - Dive Into HTML5">
<p>Obviously someone must have created it. These things don't just appear out of nowhere. Every element, every attribute, every feature of HTML that you've ever used -- someone created them, decided how they should work, and wrote it all down. These people are not gods, nor are they flawless. They're just people. Smart people, to be sure. But just people.</p>
<p>One of the great things about standards that are developed "out in the open" is that you can go back in time and answer these kinds of questions.</p>

<p>間違いなく、誰かがつくったんだ。なにもないところから、突然現れるわけがない。すべてのエレメント、アトリビュート、あなたも使ったことがある、すべてのHTMLの機能 ー　それは誰かがつくったものだ。望ましい動作を考え、それをすべて書き上げた。彼らは神じゃない。欠点が無い訳でもない。彼らだって、ただの人間だ。才能ある人たち、でも確かなことに、ただの人なんだ。</p>
<p>スタンダード（標準）が素晴らしいのは、"すべてがオープン（out in the open）"に開発されているので、当時に戻って質問の解答を探すことができることだ。</p>

</blockquote>


</div>

  
<p>続く、&lt;img &gt; エレメントを巡る、Marc Andreessen 、Tony Johnson 、Tim Berners-Lee 、Jim Davis 、Jay C. Weber、 Dave Raggett らの議論は読み応えがあるので、ぜひ本文で。ここでは少し飛んで、『An unbroken line』の章に。</p>


<div class="section refer">
<p>『 <cite><a href="http://diveintohtml5.org/past.html">How Did We Get Here? - Dive Into HTML5</a></cite>』 より</p>

<blockquote cite="http://diveintohtml5.org/past.html" title="How Did We Get Here? - Dive Into HTML5">

<ul>
  <li>HTTP still exists. HTTP successfully evolved from 0.9 into 1.0 and later 1.1. <a href="http://www.ietf.org/dyn/wg/charter/httpbis-charter.html">And still it evolves</a>.</li>

  <li>HTPP は存在し続けている。HTTPは0.9から1.0、そして1.1に進化した。</li>
  <li>HTML still exists. That rudimentary data format -- it didn't even support inline images! -- successfully evolved into 2.0, 3.2, 4.0. HTML is an unbroken line. A twisted, knotted, snarled line, to be sure. There were plenty of "dead branches" in the evolutionary tree, places where standards-minded people got ahead of themselves (and ahead of authors and implementors). But still. Here we are, in 2010, and <a href="http://www.w3.org/People/Berners-Lee/FAQ.html#Examples">web pages from 1990</a> still render in modern browsers. I just loaded one up in the browser of my state-of-the-art Android mobile phone, and I didn't even get prompted to "please wait while importing legacy format..."</li>
  <li>HTMLも存在している。最初はインライン イメージにさえ対応していなかったのに！　未熟なデータ形式は、2.0, 3.2 そして 4.0へと進化した。HTML は途切れることの無い線だ。からまったり、結び目がついたり、もつれたラインには違いないけど。進化の系統樹には、沢山の"死んだ枝（Dead Branches）"、標準化を目指す人たち（著者も実装者も）が一度は目指した場所、が残っている。それでもなお、2010年のいま、1990年につくられたウェブページを、最新のブラウザ見ることができる。最新のアンドロイド携帯電話のブラウザで今見たって、"レガシー フォーマットを読み込んでいます。しばらくお待ちください" なんて言われることはない。</li>
  
  <li>HTML has always been a conversation between browser makers, authors, standards wonks, and other people who just showed up and liked to talk about angle brackets. Most of the successful versions of HTML have been "retro-specs," catching up to the world while simultaneously trying to nudge it in the right direction. Anyone who tells you that HTML should be kept "pure" (presumably by ignoring browser makers, or ignoring authors, or both) is simply misinformed. HTML has never been pure, and all attempts to purify it have been spectacular failures, matched only by the attempts to replace it.</li>
  
  <li>HTML は常に、ブラウザ制作者、著者、標準関係者、その他の多くの鍵括弧について語るのが好きな人々の間で議論されてきた。成功したHTMLのバージョンのほとんどは、"回顧仕様（retro-specs）"だ。ちょっとづつ正しい方向に修正しながら、世の中の動きにあわせて遅れずについてきた。「HTMLは"純粋"でなければいけない（おそらくはブラウザ制作者や著者、あるいはその両方を無視すること）」、という人がいたら、その人は単に間違った情報を聞いたのだろう。HTMLは純粋であったことなんかないし、純粋化しようとした全ての試みは、壮大に失敗してきた。</li>

  
  <li>None of the browsers from 1993 still exist in any recognizable form. Netscape Navigator was <a href="http://en.wikipedia.org/wiki/History_of_Mozilla_Application_Suite#Open_sourcing_of_Communicator">abandoned in 1998</a> and <a href="http://en.wikipedia.org/wiki/History_of_Mozilla_Application_Suite#Rewriting_from_scratch">rewritten from scratch</a> to create the Mozilla Suite, which was then <a href="http://en.wikipedia.org/wiki/History_of_Mozilla_Firefox">forked to create Firefox</a>. Internet Explorer had its humble "beginnings" in "Microsoft Plus! for Windows 95," where it was bundled with some desktop themes and a pinball game. (But of course that browser <a href="http://en.wikipedia.org/wiki/Spyglass_Mosaic">can be traced back further too</a>.)</li>

  <li>1993年当時のブラウザは、分かる形では残っていない。Netscape Navigatorは1998年に放棄され、Mozilla Suite を作成するためにフルスクラッチで書き直された。その後、Firefoxへとフォークすることになる。Inter Explorer は、"Microsoft Plus! for Windows 95," にピンボールゲームやデスクトップテーマと一緒に同梱されるかたちで"つつましやかに"に始まりを迎えた。（ただしもちろん、そのブラウザの過去をさらにたどることもできる。）</li>

  <li>Some of the operating systems from 1993 still exist, but none of them are relevant to the modern web. Most people today who "experience" the web do so on a PC running Windows 2000 or later, a Mac running Mac OS X, a PC running some flavor of Linux, or a handheld device like an iPhone. In 1993, Windows was at version 3.1 (and competing with OS/2), Macs were running System 7, and Linux was distributed via Usenet. (Want to have some fun? Find a graybeard and whisper "Trumpet Winsock" or "MacPPP.")</li>

  <li>1993年当時のオペレーティングシステムのいくつかは残っている。ただし、それらは全部、モダンウェブとは関係ない。ほとんどの人が今ウェブを"体験"しているのは、windows 2000以降が動作するPCか、Mac OS X、Linux 系の動くPC、iPhoneのようなハンドヘルドデバイスだろう。1993年当時、Widowsはバージョン3.1（OS/2と競争していた）で、Mac はシステム７で動作し、LinuxはUsenetで配布されていた。（興味がある？ 髭の賢者を見つけて小声で聞いてみよう"Trumpet Winsock" あるいは "MacPPP."と ）</li>
  
  <li>Some of the same <em>people</em> are still around and still involved in what we now simply call "web standards." That's after almost 20 years. And some were involved in predecessors of HTML, going back into the 1980s and before.</li>
  <li>何人かはいまだ現役で、我々がいまや"ウェブ標準"と読んでいるものに関わっている。２０年の歳月をこえて、１９８０年代、あるいはそれ以前の、HTMLの先祖に関わっていた人々である。</li>

  <li>Speaking of predecessors... With the eventual popularity of HTML and the web, it is easy to forget the contemporary formats and systems that informed its design. Andrew? Intermedia? HyTime? And HyTime was not some rinky-dink academic research project; <a href="http://xml.coverpages.org/hytime.html">it was an ISO standard</a>. It was approved for military use. It was Big Business. And you can read about it yourself... <a href="http://www.sgmlsource.com/history/hthist.htm">on this HTML page, in your web browser</a>.</li>
  <li>先祖について話すとなると... 結果としてのHTMLとウェブが有名すぎて、影響を与えた同時代のフォーマットやシステムについて忘れがちにだ。Andrew? Intermedia? HyTime?  HyTime は旧態然とした学術探究のプロジェクトなどでは無かった。それらはISO標準だったのだ。軍事利用にも承認され、大きななビジネスだった。もっと詳しく興味があれば、HTMLで書かれたページをブラウザで読める。</li>
  
</ul>

<p>But none of this answers the original question: why do we have an <code>&lt;img&gt;</code> element? Why not an <code>&lt;icon&gt;</code> element? Or an <code>&lt;include&gt;</code> element? Why not a hyperlink with an <code>include</code> attribute, or some combination of <code>rel</code> values? Why an <code>&lt;img&gt;</code> element? Quite simply, because Marc Andreessen shipped one, and shipping code wins.</p>

<p>しかし、いずれも元の質問の答えにはなっていない。なぜ <code>&lt;img&gt;</code> エレメントがあるのか？ <code>&lt;icon&gt;</code> エレメントでも、<code>&lt;include&gt;</code> エレメントでもなく？  <code>include</code> アトリビュートを持ったハイパーリンク、あるいは何らかの<code>rel</code>バリューの組み合わせではなく？　なぜ<code>&lt;img&gt;</code> エレメントなのか？　実は答えはシンプル。 Marc Andreessen が出荷したから、そして出荷されるコードが勝つからだ。</p>

<p>That's not to say that <em>all</em> shipping code wins; after all, Andrew and Intermedia and HyTime shipped code too. Code is necessary but not sufficient for success. And I <em>certainly</em> don't mean to say that shipping code before a standard will produce the best solution. Marc's <code>&lt;img&gt;</code> element didn't mandate a common graphics format; it didn't define how text flowed around it; it didn't support text alternatives or fallback content for older browsers. And 17 years later, <a href="http://tools.ietf.org/html/draft-abarth-mime-sniff">we're still struggling with content sniffing</a>, and it's still <a href="http://code.google.com/p/doctype/wiki/ArticleContentSniffing">a source of crazy security vulnerabilities</a>. And you can trace that all the way back, 17 years, through the <a href="http://en.wikipedia.org/wiki/Browser_wars">Great Browser Wars</a>, all the way back to February 25, 1993, when Marc Andreessen offhandedly remarked, "MIME, someday, maybe," and then shipped his code anyway.</p>

<p>The ones that win are the ones that ship.</p>

<p>ただ、<em>すべての</em>出荷されたコードが勝つというわけではない。だって Andrew と Intermedia と HyTime だってコードを出荷していたから。コードは成功には欠かせないが、十分という訳ではない。また、標準化の前にコードを出荷するのがベストなソリューションだとは、私は断じて言っていない。Marcの<code>&lt;img&gt;</code>エレメントは、汎用的なグラフィックのフォーマットを扱えなかった。テキストの画像の回り込みについては定義しなかったし、代替テキストや古いブラウザ用の代替コンテンツもサポートしなかった。そして１７年たっても、いまだにコンテンツ スニッフィングの問題と格闘していて、ひどいセキュリティー脆弱性の温床にもなっている。その理由は <a href="http://en.wikipedia.org/wiki/Browser_wars">Great Browser Wars</a>の１７年の足跡をたどり、１９９３年の２月２５日の、 Marc Andreessenのぶっきらぼうな"MIME、いつか、もしかしたらね" という所見にもとづいてコードを出荷した事実に戻ることができる。</p>
<p>勝ったのは、出荷したものだったのだ。</p>

</blockquote>

</div>

<p>その後の流れを、本文をもとにざっくりとまとめてみます。</p>

<p>W3CはHTML4.0を公開後は、XHTMLに注力し、"the next generation of HTML."として、XHTML 1.1を2001年５月に公開した。しかしその後、W3Cと、Webブラウザの開発ベンダーの間は、異なるビジョンを志向するようになる。W3Cが、XHTMLによるウェブのXML化を強く志向する一方で、Webブラウザ開発ベンダーは、より現実的な問題に向き合っていた。ブラウザやOS、過去のバージョンとの互換性の維持や、ウェブの使い勝手を向上するためのアプリケーション的な進化を志向するようになった。</p>
<p>そして、2004年の6月の『<a href="http://www.w3.org/2004/04/webapps-cdf-ws/papers/opera.html">Position Paper for the W3C Workshop on Web Applications and Compound Documents</a>』が、大きな分かれ道となった。Opera SoftwareのIan Hicksonは、OSレベルのAPIに依存せずにウェブ アプリケーションを開発するための、HTML、CSSおよびDOMのミドルウェア的な拡張を提案したが、W3Cで否決されてしまった。その結果、主要なWebブラウザ開発ベンダーは <a href="http://www.whatwg.org/news/start">WHAT（Web Hypertext Application Technology） Working Group </a> を立ち上げ、Web Forms 2.0 、Web Apps 1.0、Web Controls 1.0 などの、ウェブ アプリケーションのための仕様の標準化に取り組み始めた。</p>
<p>仕様（W3C）と実装（Webブラウザ開発ベンダー）の分断は、その後数年の停滞期間をもたらすことになる。この状況にたいし、Tim Berners-Lee氏が2006年に声明を発表する。W3CとWHAT WGが再び協力して、HTMLを継続的に進化させるべきであると訴えた（<a href="http://dig.csail.mit.edu/breadcrumbs/node/166">Reinventing HTML | Decentralized Information Group (DIG) Breadcrumbs</a>）。これに呼応して、W3Cは経過措置として2007年からXHTML2 と HTML5 の両方のWorking Group を開設する。最終的には2009年7月に、HTML5への一本化を決定した。XHTML2 のWorking Groupを閉鎖し、Web Applications 1.0 を HTML5 と改名して、次世代のWeb標準として中心に位置づけた。</p>
<p>この説明を読んで、なぜHTML5が重要なのかを理解できました。５年以上の分断の時期を越えて、再び始まった『仕様と実装のデリケートなダンス』、その舞台がHTML5というわけです。HTML5は、仕様書の完成を待って、読解すればよいというものではない。仕様の策定、Webブラウザの実装、Webアプリケーションでの利用が、相互にフィードバックを受けながら進められている。そのインクリメンタルな進化の過程こそが、HTML5の最も重要なポイントなのでしょう。</p>
]]>
        
    </content>
</entry>

<entry>
    <title>Webサービス、クラウドと連携するアプリケーションフレームワークの概念図</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2010/01/web_framework_on_cloud.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://www.goodpic.com/admin/mt-atom.cgi/weblog/blog_id=1/entry_id=1327" title="Webサービス、クラウドと連携するアプリケーションフレームワークの概念図" />
    <id>tag:www.goodpic.com,2010:/mt//1.1327</id>
    
    <published>2010-01-20T14:36:35Z</published>
    <updated>2010-01-20T14:58:30Z</updated>
    
    <summary>最近のウェブサービス、あるいはサーバーにインストールするソフトウェアは、お互いに...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="tech" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[<p>最近のウェブサービス、あるいはサーバーにインストールするソフトウェアは、お互いに連携するのが当たり前になってきている。ウェブサイトの作成と運用という意味でも、サイト単体だけを考えていては成り立たない。そのような概念を図に表せないかなと思い、ちょっと描いてみました。最初の図は、Model View Contoroller フレームワークの概念に、クラウドや外部ウェブサービスを含めてみる。</p>

<p><img src="http://www.stokeshot.com/capture/mvc-on-cloud-20100120-233400.gif" alt="MVC on cloud"/></p>

<p>次に、もう少し具体的なアプリケーションを意識して、アプリケーション フレームワークの構成要素を上の図にマッピングしてみる。ポイントとしては、ローカルとネットワークの区別を完全に無くして、仮想的にすべてのコンポーネントを並列につなげたこと。</p>

<p><img src="http://www.stokeshot.com/capture/Application-fremework-on-cloud-20100120-235316.gif" alt="Application-fremework-on-cloud"/></p>

<p>この図にたどり着くまでに、何回かノートで下書きを繰り返したのですが、結構シンプルにまとまったかな。それぞれの内容について、これから色々と調べつつ考えを深めていく予定。</p>
]]>
        
    </content>
</entry>

<entry>
    <title>リアルタイム情報のソーシャル探索と、成長のためのフレームワーク</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2009/12/realtimeweb-movabletype-framework.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://www.goodpic.com/admin/mt-atom.cgi/weblog/blog_id=1/entry_id=1322" title="リアルタイム情報のソーシャル探索と、成長のためのフレームワーク" />
    <id>tag:www.goodpic.com,2009:/mt//1.1322</id>
    
    <published>2009-12-23T08:59:34Z</published>
    <updated>2009-12-23T14:48:57Z</updated>
    
    <summary> 法政大学ビジネススクールで教える友人の講座で、先週、ゲストとして講義をしてきま...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="service" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[
<p>法政大学ビジネススクールで教える友人の講座で、先週、ゲストとして講義をしてきました。Web制作や企業のCGM活用など、主にビジネス的な側面からみたMovable Typeの役割についてまとめてみました。せっかくなので、ブログでも公開してみます。プレゼンテーション自体は、Slideshare 『<a href="http://www.slideshare.net/goodpic/movable-type-2768942">Movable Type 成長のためのプラットフォーム</a>』で。</p>

<p>以下は、Movable Type というプラットフォームだけに留まらず、Webビジネス全般に共通する部分を抜き出してサマリーしてみます。</p>

<div class="section">
<h3>CGMの活用で、変化の遺伝子を組み込む</h3>
<p>ブログが本格的に普及して５年以上がたちます。成功したビジネスブログの特徴として、長く続く、継続的な関係を読者と築いていることがあげられます。有名な事例として、RICHOのGRブログがあります。</p>

<p><img src="http://www.stokeshot.com/capture/richo-gr-blog-20091223-162148.png" alt="richo-gr-blog"/></p>

<p>GRブログは、開設から４年が経過した今でも、非常に活発なコミュニケーションが続けられています。GR Digital というデジタルカメラは、現在すでに３世代目。単一のモデルのライフサイクル、あるいは製品ラインナップを越えて、企業とユーザーが対話する場となっている。</p>

<p>IAアーキテクトのDonna Spencerさんは、『<a href="http://www.boxesandarrows.com/view/four_modes_of_seeking_information_and_how_to_design_for_them">Four Modes of Seeking Information and How to Design for Them - Boxes and Arrows: The design behind the design</a>』で、人が情報を探すときには以下の４つのモードがある、と述べています。</p>

<ol>
<li>Known Item <br />
探す内容を理解している（機種毎の性能表）</li>
<li>Re-finding <br />
見たことのある情報（買う前にもう一度確認）</li>
<li>Exploratory <br /> 
探しながら理解を深める（自分の用途にあったカメラは？）</li>
<li>Don't know what you need to know <br />
何を探すか把握していない（なんとなくデジカメが欲しい）</li>
</ol>

<p>この内の、1. Known Item と 2. Re-finding に関しては、Richoの企業ホームページおよび、GR Digitalの製品サイトが答えを提供している。</p>

<p><img src="http://www.stokeshot.com/capture/find-on-site-20091223-161939.png" alt="find-on-site"/></p>

<p>しかし、3 Exploratory と 4. Don't know what you need to know という、曖昧な情報の探索にたいしては、通常の製品サイトだけでは完結することができない。</p>

</div>

<div class="section">
<h3>ソーシャル探索</h3>

<p>曖昧な情報の探索においては、ブログ、SNS、掲示板、マイクロブログなどの様々なソーシャルメディアの役割が増しています。</p>

<p><img src="http://www.stokeshot.com/capture/social-search-20091223-161815.png" alt="social-search"/></p>

<p>ソーシャル探索は、通常の企業ホームページの閲覧とは異なる特性をもっています。</p>

<div class="section">
<h4>個人的</h4>
<p>曖昧な情報を探すときには、対話が重要。利用する場所や、用途、あるいはユーザー像などをイメージできると、単なる情報ではなく、個人的な体験として内容を理解することができる。</p>

<p><img src="http://www.stokeshot.com/capture/social-personal-20091223-171755.png" alt="social-personal"/></p>

</div>

<div class="section">
<h4>具体的</h4>
<p>内容が具体的であること。製品カタログでは紹介しきれない、細かい部分を、詳しく説明できるのがWebの長所。そして、そのようなディテールこそがユーザー体験のなかで、重要な位置を占めています。また、ユーザーからコメントやトラックバックをもらうことで、個別の機能の問題点や改善点を知ることができます。</p>

<p><img src="http://www.stokeshot.com/capture/social-specific-item-20091223-180525.jpg" alt="social-specific-item"/></p>

</div>

<div class="section">
<h4>イベント発生的</h4>
<p>個人的かつ具体的な情報に、どうやってたどり着くか？ そのためのフックを提供する。季節感やイベント性の高いアクションを定期的に発信することで、「たまたま知った」ユーザーを継続的に獲得できます。</p>

<p><img src="http://www.stokeshot.com/capture/social-event-20091223-172151.png" alt="social-event"/></p>
</div>

<div class="section">
<h4>リアル＆タイムリーな情報発信</h4>
<p>ユーザーのソーシャル探索に、企業が答えるためには、単に流行しているサービスに広告を載せるのではなく、自ら積極的に情報を発信する体質になることが重要です。</p>

<p><img src="http://www.stokeshot.com/capture/social-realtime-20091223-172442.png" alt="social-realtime"/></p>
</div>

<p>ユーザーとのリアルタイムな関係性から、Webサイトや製品を即座に改善する。そうすることで、フィードバックの効果を認識したユーザーから、さらにフィードバックが集まるという、ポジティブなスパイラルが発生します。</p>
</div>

<div class="section">
<h3>変化に適応するWeb制作と運営</h3>

<p>リアルタイム性の高いWebサイトを運営するためには、どのような仕組みが必要なのでしょうか？</p>

<div class="section">
<h4>定期的な更新の無いサイト</h4>

<p>定期的な更新の無いサイトは、集客をリニューアルと広告に依存することになり、集客コストの費用対効果は一定のまま改善しません。</p>

<p><img src="http://www.stokeshot.com/capture/access-occasional-20091223-173826.png" alt="access-occasional"/></p>
</div>

<div class="section">
<h4>変化に適応するフレームワーク</h4>

<p>ウェブサイトを構成する要素を分類すると、サイト構造などの変化しづらい層から、ブログ記事のように変化が早いコンテンツまで、様々なレイヤーに分かれます。変化の速度にあわせて、レイヤーを体系的に管理するPace Layering という概念があります。もともとは、建築業界で提唱されていた概念ですが、Web制作の情報設計に導入されています（<a href="http://www.usability.com.au/resources/evolving-web.cfm">Web Usability - The Evolving Web</a>）。</p>

<p><img src="http://www.stokeshot.com/capture/pace-layering-20091223-174407.png" alt="pace-layering"/></p>
</div>

<div class="section">
<h4>フレームワークとしての CMS|ブログ</h4>
<p>CMSやブログは、ウェブサイトの構成要素を体系的に管理するための仕組みです。Pace Layering が概念的なフレームワークであるならば、CMSやブログなどのソフトウェアは、いわばその概念の実装であるといえるでしょう。ブログはその中でも、特に変化が速いコンテンツ（日記）から発生したシステムです。</p>

<p><img src="http://www.stokeshot.com/capture/framework-and-blog-20091223-175623.png" alt="framework-and-blog"/></p>

</div>

<div class="section">
<h4>フレームワーク導入によるコスト削減</h4>

<p>Pace Layering 的な概念を取り入れた運営体制や、CMSあるいはブログの導入によって、Webサイトはより変化に適応しやすくなります。リニューアルの度にすべてを作り直すのではなく、必要な場所を、随時更新できます。また、現場の担当者が直接コンテンツを投稿することで、運用のノウハウが蓄積され、サイト運営の効率が高まります。</p>
<p><img src="http://www.stokeshot.com/capture/framework-to-lower-cost-20091223-220949.jpg" alt="framework-to-lower-cost"/></p>
</div>

<div class="section">
<h4>更新頻度とリピート率のアップ</h4>

<p>コンテンツの更新をユーザーに通知する手段は近年さらに増えています。RSSとフィードリーダーだけでなく、TwitterやSNSへのクロスポストをおこなうことで、読者は自分の好きな方法で、更新を知ることができます。一度、関係性を築くことができれば、読者は定期的にWebサイトを訪れてくれるようになるでしょう。</p>

<p><img src="http://www.stokeshot.com/capture/access-grow-20091223-221704.jpg" alt="access-grow"/></p>
</div>

</div>


<div class="section">
<h3>Web制作の分業体制</h3>

<p>Webサイトの役割が大きくなるにつれ、関係者も増えてきます。Webサイトの制作、運営は、それぞれ専門的な技能をもったメンバーによるチームワークが重要です。</p>

<div class="section">
<h3>Web チームを成功に導く９つの柱</h3>
<p>『<a href="http://www.adaptivepath.com/ideas/essays/archives/000242.php">adaptive path » the nine pillars of successful web teams</a>』で、Adaptive Path の Jesse James Garrett氏は、Web チームが成功するための９つの柱をあげています。</p>

<p><img src="http://www.stokeshot.com/capture/9polls-20091223-225657.jpg" alt="9polls"/></p>

</div>

<div class="section">
<h3>分業体制</h3>
<p>今日のWeb制作では、チームが複数の企業、あるいはフリーランスのメンバーによって構成されることが珍しくありません。</p>

<p><img src="http://www.stokeshot.com/capture/9polls-coorpolation-20091223-225839.png" alt="9polls-coorpolation"/></p>

<p>Movable Typeは、ソフトウェア開発に特化することで、『技術戦略』と『技術の実装』という面から、Web制作を支援しています。</p>

<p><img src="http://www.stokeshot.com/capture/cooperation-20091223-230253.jpg" alt="cooperation"/></p>

<p>Movable Type は自由に拡張可能なフレームワークをもっており、プラグインあるいはテーマなどを活用して、独自のアプリケーションを開発することができます。分業体制といっても、その枠は柔軟で、Web制作を通じて蓄積した技術力を活用してソフトウェア・ベンダーになることも可能なのです。</p>

<p><img src="http://www.stokeshot.com/capture/mt-framework-20091223-230914.jpg" alt="mt-framework"/></p>

</div>

</div>

<p>以上がダイジェストになります。より詳しくは、以下のプレゼンテーションをご覧ください。。</p>

<div style="width:425px;text-align:left" id="__ss_2768942"><a style="font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;" href="http://www.slideshare.net/goodpic/movable-type-2768942" title="Movable Type 成長のためのプラットフォーム">Movable Type 成長のためのプラットフォーム</a><object style="margin:0px" width="425" height="355"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=web-business-and-movabletype-091223014825-phpapp02&stripped_title=movable-type-2768942" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=web-business-and-movabletype-091223014825-phpapp02&stripped_title=movable-type-2768942" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object><div style="font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px;">View more <a style="text-decoration:underline;" href="http://www.slideshare.net/">documents</a> from <a style="text-decoration:underline;" href="http://www.slideshare.net/goodpic">Jun Kaneko</a>.</div></div>

]]>
        
    </content>
</entry>

<entry>
    <title>波打ち際の温もり</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2009/12/post_250.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://www.goodpic.com/admin/mt-atom.cgi/weblog/blog_id=1/entry_id=1321" title="波打ち際の温もり" />
    <id>tag:www.goodpic.com,2009:/mt//1.1321</id>
    
    <published>2009-12-20T15:53:42Z</published>
    <updated>2009-12-20T16:15:52Z</updated>
    
    <summary>
</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="ocean" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[<p>週末は土日ともに、昼過ぎから南西風が強く吹き、風波でそこそこサイズアップしました。二日とも夕方に裏パークでサーフィン。</p>

<p><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2768/4199596865_cdf9cdcaf9_b.jpg"><img alt="12/20 windy breaks 1" src="http://farm3.static.flickr.com/2768/4199596865_cdf9cdcaf9.jpg" /></a><br /><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2540/4200353450_93cbd2981a_b.jpg"><img alt="12/20 windy breaks 1" src="http://farm3.static.flickr.com/2540/4200353450_93cbd2981a.jpg" /></a></p>

<p>強風に、海までボードを持つ手が凍えます。浜辺の砂は、素足にキンキン冷たい。ただ、海水温はまだ高くて、波打ち際ではぬくもりを感じるぐらい。夕陽の色は、夏よりも暖かく、澄んだ水に色を写す。冬の本格的な寒さを予感させつつも、なぜかホッとする風景。</p>

<p><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2552/4199604749_de9cab9297_b.jpg"><img alt="wind shore br /eak 1" src="http://farm3.static.flickr.com/2552/4199604749_de9cab9297.jpg" /></a><br /><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2606/4199601671_187fd7f677_b.jpg"><img alt="wind shore br /eak" src="http://farm3.static.flickr.com/2606/4199601671_187fd7f677.jpg" /></a></p>
]]>
        
    </content>
</entry>

<entry>
    <title>Lumix GH1 と Sigama DP2 を取り比べ</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2009/12/lumix_gh-1_siga.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://www.goodpic.com/admin/mt-atom.cgi/weblog/blog_id=1/entry_id=1320" title="Lumix GH1 と Sigama DP2 を取り比べ" />
    <id>tag:www.goodpic.com,2009:/mt//1.1320</id>
    
    <published>2009-12-20T15:07:41Z</published>
    <updated>2009-12-20T15:51:20Z</updated>
    
    <summary>
</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="pic" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[
<p>なぜか我が家にそろってしまった３台のカメラ、Sigma DP2とPanasonic Lumix GH1、そして Canon 30Dは長く使って気に入っているのですが、やはり旅行で持ち歩くのは重い。軽くて画質もよいSigma DP2 が気になって買ってしまったのが夏。画質は想像以上に素晴らしいものの、暗い場面と電池の持ちで、旅行にこれ一台というのは心もとない。GF1 + LUMIX G 20mm/F1.7 に興味をもちつつ、実際に触って見るとGH1のホールド感と、高精細な液晶ファインダーでおもわず即決してしましました。</p>

<p><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2599/4200359834_9bcb8103b8_b.jpg"><img alt="sigma dp2, lumix gh-1, canon 30d" src="http://farm3.static.flickr.com/2599/4200359834_9bcb8103b8.jpg" /></a></p>

<p>キリッと冷たい南西の風が吹きつける茅ヶ崎の海で、二台の写真を撮り比べ。GH1には 20mm/F1.7 を装着。</p>

<p>
Sigma DP2 <br />
<a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2751/4200339930_a2cd0d9b1f_b.jpg"><img alt="dp2 test" src="http://farm3.static.flickr.com/2751/4200339930_a2cd0d9b1f.jpg" /></a><br />
Lumix DMC-GH1<br />
<a rel="lightbox[photo]" href="http://farm5.static.flickr.com/4010/4200343890_5788a85eaf_b.jpg"><img alt="gh-1 test 1" src="http://farm5.static.flickr.com/4010/4200343890_5788a85eaf.jpg" /></a>
</p>

<p>DP2の、こってりとしたスカイブルーはかなり好みです。両方ともRAWで撮影して現像処理をしているので、色は自分好みに調整しているのですが、他のカメラでは、なかなかこの色が出てこない。</p>

<p>
Sigma DP2 <br />
<a rel="lightbox[photo]" href="http://farm5.static.flickr.com/4041/4199586811_5ef8e9ec3d_b.jpg"><img alt="dp2 test 2" src="http://farm5.static.flickr.com/4041/4199586811_5ef8e9ec3d.jpg" /></a><br />
Lumix DMC-GH1 <br /> <a rel="lightbox[photo]" href="http://farm5.static.flickr.com/4004/4200346740_c30fea387a_b.jpg"><img alt="gh-1 test 2" src="http://farm5.static.flickr.com/4004/4200346740_c30fea387a.jpg" /></a>
</p>

<p>空のグラデュエーションは、結構違いがでています。逆光はどちらがいいとも言いかねるけれど、確実にテイストが違う。</p>

<p>
Sigma DP2 <br /><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2551/4200340452_b95601ded2_b.jpg"><img alt="dp2 test" src="http://farm3.static.flickr.com/2551/4200340452_b95601ded2.jpg" /></a><br />
Lumix DMC-GH1 <br /><a rel="lightbox[photo]" href="http://farm5.static.flickr.com/4008/4200349018_a49c76de12_b.jpg"><img alt="gh-1 backlight" src="http://farm5.static.flickr.com/4008/4200349018_a49c76de12.jpg" /></a>
</p>

<p>GH1は、間違いなく写真を撮るのが楽しいカメラですね。キビキビと動作して、望遠レンズ LUMIX G VARIO HD 14-140mm/F4.0-5.8 の手ぶれ補正も強力。一方で、DP2は撮影時には忍耐が必要なカメラ。そのかわりに、Macで現像するときに初めて見えてくる色がある。対極とも言えるカメラなので、結構使い分けるシーンは多そうです。</p>

<div class="hreview" ><a class="item url" href="http://www.amazon.co.jp/Panasonic-%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E4%B8%80%E7%9C%BC%E3%82%AB%E3%83%A1%E3%83%A9-%E3%83%AC%E3%83%B3%E3%82%BA%E3%82%AD%E3%83%83%E3%83%88-%E3%82%B3%E3%83%B3%E3%83%95%E3%82%A9%E3%83%BC%E3%83%88%E3%83%96%E3%83%A9%E3%83%83%E3%82%AF-DMC-GH1K-K/dp/B0021L90IE%3FSubscriptionId%3D15SMZCTB9V8NGR2TW082%26tag%3Dgoodpic-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB0021L90IE"><img src="http://ecx.images-amazon.com/images/I/51DgF9wJSGL._SL160_.jpg" alt="photo" class="photo" style="border:none;" /></a><dl style="margin-bottom:0.5em; text-align:left;"><dt class="fn"><a class="item url" href="http://www.amazon.co.jp/Panasonic-%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E4%B8%80%E7%9C%BC%E3%82%AB%E3%83%A1%E3%83%A9-%E3%83%AC%E3%83%B3%E3%82%BA%E3%82%AD%E3%83%83%E3%83%88-%E3%82%B3%E3%83%B3%E3%83%95%E3%82%A9%E3%83%BC%E3%83%88%E3%83%96%E3%83%A9%E3%83%83%E3%82%AF-DMC-GH1K-K/dp/B0021L90IE%3FSubscriptionId%3D15SMZCTB9V8NGR2TW082%26tag%3Dgoodpic-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB0021L90IE">Panasonic デジタル一眼カメラ LUMIX GH1 レンズキット コンフォートブラック DMC-GH1K-K</a><img src='http://www.assoc-amazon.jp/e/ir?t=goodpic-22&l=ur2&o=9' width='1' height='1' border='0' alt='' /></dt><dd>パナソニック 2009-04-24</dd></dl><p class="gtools" style="font-size:10px;">by <a href="http://www.goodpic.com/mt/aws/index.html" >G-Tools</a> ,  <abbr class="dtreviewed" title="2009/12/21">2009/12/21</abbr></p></div>

<div class="hreview" ><a class="item url" href="http://www.amazon.co.jp/%E3%82%B7%E3%82%B0%E3%83%9E-DP2-%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E3%82%AB%E3%83%A1%E3%83%A9/dp/B001W3429E%3FSubscriptionId%3D15SMZCTB9V8NGR2TW082%26tag%3Dgoodpic-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB001W3429E"><img src="http://ecx.images-amazon.com/images/I/411AJfkzh9L._SL160_.jpg" alt="photo" class="photo" style="border:none;" /></a><dl style="margin-bottom:0.5em; text-align:left;"><dt class="fn"><a class="item url" href="http://www.amazon.co.jp/%E3%82%B7%E3%82%B0%E3%83%9E-DP2-%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E3%82%AB%E3%83%A1%E3%83%A9/dp/B001W3429E%3FSubscriptionId%3D15SMZCTB9V8NGR2TW082%26tag%3Dgoodpic-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB001W3429E">シグマ デジタルカメラ DP2</a><img src='http://www.assoc-amazon.jp/e/ir?t=goodpic-22&l=ur2&o=9' width='1' height='1' border='0' alt='' /></dt><dd>シグマ 2009-04-24</dd></dl><p class="gtools" style="font-size:10px;">by <a href="http://www.goodpic.com/mt/aws/index.html" >G-Tools</a> ,  <abbr class="dtreviewed" title="2009/12/21">2009/12/21</abbr></p></div>
]]>
        
    </content>
</entry>

<entry>
    <title>Movable Type 5 勉強会 : テーマ作成のプレゼン資料</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2009/12/movable_type_5.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://www.goodpic.com/admin/mt-atom.cgi/weblog/blog_id=1/entry_id=1318" title="Movable Type 5 勉強会 : テーマ作成のプレゼン資料" />
    <id>tag:www.goodpic.com,2009:/mt//1.1318</id>
    
    <published>2009-12-06T14:51:01Z</published>
    <updated>2009-12-06T14:54:17Z</updated>
    
    <summary>先週の土曜日、Movable Type 5 勉強会に参加してきました。いつにもま...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="tech" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[<p>先週の土曜日、Movable Type 5 勉強会に参加してきました。いつにもまして、強力なMTハッカーの皆さんが参加されていて、とても刺激を受けることができました。ワークショップは、５つのテーブルに分かれて作業。プラグインの作成、管理画面のカスタマイズ、テーマの作成、MT5の活用方法、いずれも濃い内容で、できればすべてのテーブルに参加したかったところです。</p>
<p>改めて考えると、この５つの視点はMovable Typeの特徴をよく現しています。Movable Typeを一本の木に例えると、太い幹の部分にあたるレジストリという仕組みがあります。レジストリを柔軟に拡張することで、管理画面やテンプレートタグ、あるいはテーマといった、枝葉の部分を自由に設計できるようになっている。プラグインの confing.yaml や、テーマの theme.yaml などの設定ファイルを書くだけで、太い幹から枝分かれした独自の機能を簡単に実現できる。実際に自分で試してみることで、Movable Type だけでなく、ウェブフレームワークという概念のもつ力を直感的に理解できるのではないでしょうか。</p>
<p>これはPlaggerをはじめて触ったときの感覚とも似ているので、CPANをはじめとするPerl文化に共通するのかもしれませんが、興味をもって調べ始めると、どんどん深いところに連れて行ってくれる雰囲気がある。というわけで、さらに勉強したいというモチベーションがアップした勉強会でした。私のプレゼン資料は以下の通りです。関係者のみなさま、お疲れ様＆ありがとうございました！ </p>

<div style="width:425px;text-align:left" id="__ss_2600501"><a style="font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;" href="http://www.slideshare.net/goodpic/movable-type-5-how-to-create-theme" title="Movable Type 5 : How to create a Theme">Movable Type 5 : How to create a Theme</a><object style="margin:0px" width="425" height="355"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=mt5-theme-091127220329-phpapp02&stripped_title=movable-type-5-how-to-create-theme" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=mt5-theme-091127220329-phpapp02&stripped_title=movable-type-5-how-to-create-theme" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object><div style="font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px;">View more <a style="text-decoration:underline;" href="http://www.slideshare.net/">documents</a> from <a style="text-decoration:underline;" href="http://www.slideshare.net/goodpic">Jun Kaneko</a>.</div></div>


<ul>
  <li><a href="http://www.dakiny.com/archives/movable-type/movabele_type_5_study_societyvol1/">第1回MT5勉強会を開催しました: 世界中の１％の人々へ</a></li>
  <li>【第1回MT5勉強会】の参加レポート : 広報ブログ - Six Apart<br>     <a target="_blank" href="http://www.sixapart.jp/pressroom/2009/11/mt5_study_society.html">http://www.sixapart.jp/pressroom/2009/11/mt5_study_society.html</a></li>     <li>第1回MT5勉強会に参加しました - The blog of H.Fujimoto<br>     <a target="_blank" href="http://www.h-fj.com/blog/archives/2009/11/29-135644.php">http://www.h-fj.com/blog/archives/2009/11/29-135644.php</a></li>     <li>CMSContextプラグインとか今日の勉強会の資料とか。 - Junnama Online<br>     <a target="_blank" href="http://junnama.alfasado.net/online/2009/11/cmscontext.html">http://junnama.alfasado.net/online/2009/11/cmscontext.html</a></li>     <li>MT5勉強会に行ってきた｜linker journal｜linker<br>     <a target="_blank" href="http://linker.in/journal/2009/11/mt5.php">http://linker.in/journal/2009/11/mt5.php</a></li>     <li>MT-column &gt; Event &gt; 第1回MT5勉強会に参加しました - ToI<br>     <a target="_blank" href="http://tec.toi-planning.net/mt-column/event/1mt5/">http://tec.toi-planning.net/mt-column/event/1mt5/</a></li>     <li>第1回MT5勉強会　参加してきました - slog<br>     <a target="_blank" href="http://www.dream-creation.biz/slog/2009/11/1mt5.html">http://www.dream-creation.biz/slog/2009/11/1mt5.html</a></li><li>「第1回MT5勉強会」行ってきた - WolaWola<br><a target="_blank" href="http://www.zelazny.mydns.jp/archives/002648.php">http://www.zelazny.mydns.jp/archives/002648.php</a></li><li>第1回MT5勉強会に参加しました - かたつむりくんのWWW<br><a href="http://www.tinybeans.net/blog/2009/12/03-053418.html" target="_blank">http://www.tinybeans.net/blog/2009/12/03-053418.html</a></li><li>» 第1回MT5（MovableType5）勉強会に参加しました | CMSソリューションズ代表ブログ<br><a href="http://www.cmssol.jp/blog/20091202_1885.html" target="_blank">http://www.cmssol.jp/blog/20091202_1885.html</a></li><li>第1回MT5勉強会へ行ってきました。 - SOHOカアチャン通信<br><a href="http://msg.nattydesign.com/2009/12/5.html" target="_blank">http://msg.nattydesign.com/2009/12/5.html</a></li> </ul>]]>
        
    </content>
</entry>

<entry>
    <title>風波と夕日と１５年前のボード</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2009/11/post_249.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://www.goodpic.com/admin/mt-atom.cgi/weblog/blog_id=1/entry_id=1317" title="風波と夕日と１５年前のボード" />
    <id>tag:www.goodpic.com,2009:/mt//1.1317</id>
    
    <published>2009-11-15T14:59:08Z</published>
    <updated>2009-11-15T14:59:55Z</updated>
    
    <summary>
</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="wave" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[<p>
	海岸沿いのサイクリングロードに立つと、ビシビシと細かい砂の粒が顔に打ちつける。目を細めて海をみると、強風でジャンクなコンディションながら、胸頭ぐらいの波が割れている。週末を通じて吹き荒れた南風、土曜日は夕方にパークで、日曜日は午前中に白樺でサーフィン。</p>
<p>
	土曜日は１５年前に初めて買ったRustyのショートボードを引っ張りだしてみた。何の知識もなくロスで買った、６フィートで薄めのパフォーマンス系ボード。全然初心者向けではない（笑）。どうりで立つまで時間がかかったはずです。久しぶりに乗ってみると、回転性が高く、頭ぐらいの掘れた波だと面白い。それにしても、土曜日は夕焼けがすごかった。空全体を覆っていた雲と、西の山脈の間に、５センチぐらいのスキマがうまれて、強烈な西日が差し込む。濃いオレンジの日差しは雲を突き抜けて青空を照り返し、ダークブルーの波間に強いコントラストをつくりだしていた。日が落ちると、東の空から淡いブルーとピンクのグラデュエショーンが広がり、諧調を取り戻した白い雲が浮かぶ水平線で色彩が移り変わる様は、なかなかにサイケデリック。</p>
<p>
	日曜日は、今年の夏に買ったクラシカルなボンザーでライド。テイクオフのバランスが狭い、かなりやんちゃなボードだけれど、走り始めれば長いセンターフィンが、抜群のスピードとドライブを生み出す。風波の割にロングライドを楽しめました。</p>
<p>
	<a href="http://farm3.static.flickr.com/2593/4105899290_f5496548aa_b.jpg" rel="lightbox[photo]"><img alt="wind br /eaks" src="http://farm3.static.flickr.com/2593/4105899290_f5496548aa.jpg" /></a><br />
	<a href="http://farm3.static.flickr.com/2694/4105129381_2071f130bd_b.jpg" rel="lightbox[photo]"><img alt="shore dragon" src="http://farm3.static.flickr.com/2694/4105129381_2071f130bd.jpg" /></a><br />
	<a href="http://farm3.static.flickr.com/2534/4105898018_48b33caec4_b.jpg" rel="lightbox[photo]"><img alt="twilight shore br /eaks" src="http://farm3.static.flickr.com/2534/4105898018_48b33caec4.jpg" /></a></p>
]]>
        
    </content>
</entry>

<entry>
    <title>電子書籍 Kindle を購入。ボーダレスな手のひら書店。</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2009/11/_kindle.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://www.goodpic.com/admin/mt-atom.cgi/weblog/blog_id=1/entry_id=1314" title="電子書籍 Kindle を購入。ボーダレスな手のひら書店。" />
    <id>tag:www.goodpic.com,2009:/mt//1.1314</id>
    
    <published>2009-11-08T14:34:04Z</published>
    <updated>2009-11-08T15:02:27Z</updated>
    
    <summary></summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="book" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[
<p>Amazonの電子書籍 Kindleを手に入れました。色々と不思議な感覚を受けたので、感想を書いてみます。</p>
<p>注文は日本ではなく、米国のAmazon.comに。１０月２８日に注文すると、即日に米国ケンタッキー州から発送されて、１１月３日の朝には日本の我が家にデリバリーされました。まずは、このスピード感にびっくり。早速、開封して電源を入れると、Jun's Kindleと表示されます。Amazonが設定まで済ませてくれているようで、ログイン名の入力などは一切なし。</p>

<p><a rel="lightbox[photo]" href="http://farm4.static.flickr.com/3155/4085997490_ab5b444e01_b.jpg"><img alt="2000-01-01 00-01-28" src="http://farm4.static.flickr.com/3155/4085997490_ab5b444e01.jpg" /></a></p>

<p>そして不思議なのは、いきなり無線ネットワークにつながること。Amazonが米国のAT&Tと包括契約をしていて、国際ローミングによって世界中の携帯3Gネットワークに契約不要でつながるようです。通信料は無料。Kindleの端末を持っていれば、世界中、どこでもいつでもAmazonから本を買うことができるのです。</p>

<p><a href="http://client0.cellmaps.com/tabs.html#cellmaps_intl_tab">Kindle with U.S. & International Wireless</a></p>

<p>天気もよいので、キンドルを持ってビーチに散歩に出てみた。同時に購入したパタゴニアのケースに入れると、こんな雰囲気。</p>

<p><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2617/4086004440_c90b1b7c96_b.jpg"><img alt="2000-01-01 00-00-09" src="http://farm3.static.flickr.com/2617/4086004440_c90b1b7c96.jpg" /></a></p>

<p>液晶とは異なり、電子ペーパー（eインク）の画面は太陽の下でもくっきり見えます。電子ペーパーのもうひとつの特徴は、電源を切っても、文字はそのまま表示され続けるということ。本体も非常に薄い。多くのハードカバーの書籍より、薄くて軽いでしょう。</p>

<p><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2538/4085242025_6013dd78fa_b.jpg"><img alt="2000-01-01 00-00-40" src="http://farm3.static.flickr.com/2538/4085242025_6013dd78fa.jpg" /></a></p>

<p>画面も高精細で、地図のページなども普通に見えます。ただ、サイズ的にはもう一回り大きい方が、ガイドブックなどを見るのにはよい気がする。大画面のKindle DXも国際版として出荷してほしいですね。</p>

<p><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2530/4085245843_8f44f29451_b.jpg"><img alt="2000-01-01 00-00-14" src="http://farm3.static.flickr.com/2530/4085245843_8f44f29451.jpg" /></a></p>

<p>ウェブブラウザも一応搭載しています。例えば、ガイドブックにホテルや現地の情報のURLが記載されていると、リンクをクリックしてホームページを見ることができます。ブラウザの速度、表示はいまひとつですが、これが全世界、無料で使えるならば十分有用でしょう。</p>

<p><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2557/4086001952_5732ffe786_b.jpg"><img alt="2000-01-01 00-00-25" src="http://farm3.static.flickr.com/2557/4086001952_5732ffe786.jpg" /></a></p>

<p>書籍の購入は、Kindle本体からできますが、書籍を探すのはPCの方が効率的。こんな感じで書籍の検索、購入をしています。</p>

<ol>
<li><a href="http://www.amazon.com/gp/redirect.html?ie=UTF8&location=http%3A%2F%2Fwww.amazon.com%2Fkindle-store-ebooks-newspapers-blogs%2Fb%3Fie%3DUTF8%26node%3D133141011%26ref%255F%3Dtopnav%255Fstoretab%255Fkinc&tag=goodpiccom-20&linkCode=ur2&camp=1789&creative=390957">Amazon.comのKindleストア</a><img src="https://www.assoc-amazon.com/e/ir?t=goodpiccom-20&l=ur2&o=1" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />で、面白そうな本を探して、"Send sample now"ボタンをクリックします。</li>
<li>無料で読めるサンプルが、Kindleに自動送信されます。とにかく片っ端からSampleをゲット。</li>
<li>数十冊サンプルがたまったら、Kindleで流し読み。面白そうなものをピックアップ。</li>
<li>Kindle本体から購入手続き（といっても１クリック）すると、書籍全体を読めるようになる。</li>
</ol>

<a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2802/4086001474_f1a4e98b64_b.jpg"><img alt="2000-01-01 00-00-30" src="http://farm3.static.flickr.com/2802/4086001474_f1a4e98b64.jpg" /></a>

<p>英語の書籍だけれども、分からない単語は、英英辞書ですぐに調べられるようになっているので、自分の興味のある領域であれば結構読めてしまいます。音声で読み上げてくれるテキストtoスピーチにも対応しているので、目と耳の両方で理解することもできる。まずは、これでどれぐらい英語の書籍を読むようになるかどうか、しばらく使ってみようと思います。</p>

<div class="hreview" ><a class="item url" href="http://www.amazon.com/exec/obidos/ASIN/B0015T963C/goodpiccom-20/ref=nosim/"><img src="http://ecx.images-amazon.com/images/I/41t7SWZ2vpL._SL160_.jpg" alt="photo" class="photo" style="border:none;" /></a><dl style="margin-bottom:0.5em; text-align:left;"><dt class="fn"><a class="item url" href="http://www.amazon.com/exec/obidos/ASIN/B0015T963C/goodpiccom-20/ref=nosim/">Kindle Wireless Reading Device (6" Display, Global Wireless, Latest Generation)</a></dt><dd>Amazon.com 2009-10-19</dd></dl><p class="similar"><a href="http://www.amazon.com/exec/obidos/ASIN/B002GYVVWY/goodpiccom-20/ref=nosim/" target="_top"><img src="http://images.amazon.com/images/P/B002GYVVWY.01._SCTHUMBZZZ_.jpg"  alt="2-Year Extended Warranty for Kindle (6" Display, Global Wireless, Latest Generation)" style="border:none;font-size:10px;" /></a> <a href="http://www.amazon.com/exec/obidos/ASIN/B001JAH7OM/goodpiccom-20/ref=nosim/" target="_top"><img src="http://images.amazon.com/images/P/B001JAH7OM.01._SCTHUMBZZZ_.jpg"  alt="Amazon Kindle Leather Cover (Fits 6" Display, Latest Generation Kindle)" style="border:none;font-size:10px;" /></a> <a href="http://www.amazon.com/exec/obidos/ASIN/B002P3LPNG/goodpiccom-20/ref=nosim/" target="_top"><img src="http://images.amazon.com/images/P/B002P3LPNG.01._SCTHUMBZZZ_.jpg"  alt="Built Neoprene Kindle Sleeve (Fits 6" Display,  Latest Generation Kindle), Black" style="border:none;font-size:10px;" /></a> <a href="http://www.amazon.com/exec/obidos/ASIN/B002HIE10S/goodpiccom-20/ref=nosim/" target="_top"><img src="http://images.amazon.com/images/P/B002HIE10S.01._SCTHUMBZZZ_.jpg"  alt="M-Edge e-Luminator2 Kindle Booklight (Fits 6" Display, Latest Generation Kindle)--ON BACKORDER, SHIPS IN 7 - 10 DAYS" style="border:none;font-size:10px;" /></a> <a href="http://www.amazon.com/exec/obidos/ASIN/B001S074H8/goodpiccom-20/ref=nosim/" target="_top"><img src="http://images.amazon.com/images/P/B001S074H8.01._SCTHUMBZZZ_.jpg"  alt="M-Edge Platform Genuine Leather Kindle Jacket (Fits 6" Display, Latest Generation Kindle), Pebbled Cream w/ Saddle" style="border:none;font-size:10px;" /></a> </p><p class="gtools" style="font-size:10px;">by <a href="http://www.goodpic.com/mt/aws/index_us.html" >G-Tools</a> ,  <abbr class="dtreviewed" title="2009/11/09">2009/11/09</abbr></p></div>

<ul>
<li><a href="http://www.itmedia.co.jp/news/articles/0911/05/news050.html">次のホットな電子書籍リーダーは――iPhone？ - ITmedia News</a></li>
<li><a href="http://www.itmedia.co.jp/news/articles/0911/04/news030.html">MarvellとE-Ink、電子書籍リーダー用プロセッサを提供 - ITmedia News</a></li>
<li><a href="http://mrrsblg.wordpress.com/2009/11/01/kindle-2%e3%81%a7%e9%9d%92%e7%a9%ba%e6%96%87%e5%ba%ab%e3%82%92%e6%89%8b%e8%bb%bd%e3%81%ab%e8%aa%ad%e3%82%80%e3%80%82/">Kindle 2で青空文庫を手軽に読む。 « The Air of Marr's Blog</a></li>
<li><a href="http://www.ytsuboi.org/wp/archives/781">yoshi's blog » Kindle 2 国際版へのM+IPAフォント導入はっく</a></li>
<li><a href="http://enterprise.watch.impress.co.jp/docs/series/infostand/20091102_326012.html">Kindleに挑む新製品群−電子書籍端末が続々 - Enterprise Watch</a></li>
<li><a href="http://japanese.engadget.com/2009/10/07/kindle-100/">アマゾンの電子ブックリーダーKindle、日本を含む100か国以上で購入可能に</a></li>
</ul>
]]>
        
    </content>
</entry>

<entry>
    <title>海風に乗る</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2009/07/post_248.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://www.goodpic.com/admin/mt-atom.cgi/weblog/blog_id=1/entry_id=1297" title="海風に乗る" />
    <id>tag:www.goodpic.com,2009:/mt//1.1297</id>
    
    <published>2009-07-26T14:33:52Z</published>
    <updated>2009-11-08T15:15:12Z</updated>
    
    <summary></summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="ocean" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[<p><a rel="lightbox[photo]" href="http://farm4.static.flickr.com/3471/3758139172_a22b2208ea_b.jpg"><img alt="twin on blue cloud" src="http://farm4.static.flickr.com/3471/3758139172_a22b2208ea.jpg" /></a></p>

<p>先週から今週末にかけて、梅雨に戻ったような天気でしたが、波には恵まれていたようです。土日も強まった南風でサイズアップ。風波ながら、フィッシュなら、インサイドまで乗り継げる波も多く、楽しめました。そして何といっても、ついにウェットのいらない季節に！ 夏の日差しに、ひんやりとした海水が肌に気持ちがいい。朝からたっぷりと３時間以上サーフィン。</p>

<p><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2555/3755245744_c158eaae45_b.jpg"><img alt="surf windy waves on july 25th" src="http://farm3.static.flickr.com/2555/3755245744_c158eaae45.jpg" /></a></p>

<p>夕暮れ時に、久しぶりにカメラを持って浜辺に戻ってみると、吹き上げる上昇気流に乗る鳩の一群。夕闇がせまるなか、あと一本、もう一本と、名残惜しく波に乗るサーファーを眼下に見ながら、浜風を翼にうけて、気持ち良さそうに上昇と急降下を繰り返していました。</p>

<p><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2649/3757340177_e033f63765_b.jpg"><img alt="into the dusk" src="http://farm3.static.flickr.com/2649/3757340177_e033f63765.jpg" /></a><br /><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2574/3757336963_393b8f76e3_b.jpg"><img alt="glide" src="http://farm3.static.flickr.com/2574/3757336963_393b8f76e3.jpg" /></a><br />
<a rel="lightbox[photo]" href="http://farm4.static.flickr.com/3434/3757337899_f53c7e745a_b.jpg"><img alt="flip" src="http://farm4.static.flickr.com/3434/3757337899_f53c7e745a.jpg" /></a><br /><a rel="lightbox[photo]" href="http://farm4.static.flickr.com/3437/3757337443_8ac93ec8a2_b.jpg"><img alt="flap" src="http://farm4.static.flickr.com/3437/3757337443_8ac93ec8a2.jpg" /></a><br /><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2534/3757335277_2a95305d3c_b.jpg"><img alt="up" src="http://farm3.static.flickr.com/2534/3757335277_2a95305d3c.jpg" /></a><br /><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2576/3758130926_aa9eaee00e_b.jpg"><img alt="catapult" src="http://farm3.static.flickr.com/2576/3758130926_aa9eaee00e.jpg" /></a><br /><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2588/3758134206_e2b29aec5a_b.jpg"><img alt="cloud is more blue than the ocean" src="http://farm3.static.flickr.com/2588/3758134206_e2b29aec5a.jpg" /></a></p>

<div class="photoicons"><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2604/3758138410_62b4be2c71_b.jpg"><img alt="crossing orange and blue line" src="http://farm3.static.flickr.com/2604/3758138410_62b4be2c71_s.jpg" /></a><a rel="lightbox[photo]" href="http://farm4.static.flickr.com/3474/3758136276_0fa09cabc8_b.jpg"><img alt="2009-07-26 18-45-42" src="http://farm4.static.flickr.com/3474/3758136276_0fa09cabc8_s.jpg" /></a><a rel="lightbox[photo]" href="http://farm4.static.flickr.com/3534/3758133660_0cf7671efc_b.jpg"><img alt="a formation flight" src="http://farm4.static.flickr.com/3534/3758133660_0cf7671efc_s.jpg" /></a><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2671/3758133096_51dd38ca2a_b.jpg"><img alt="2009-07-26 18-45-23" src="http://farm3.static.flickr.com/2671/3758133096_51dd38ca2a_s.jpg" /></a><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2518/3757334855_e0a36930aa_b.jpg"><img alt="two" src="http://farm3.static.flickr.com/2518/3757334855_e0a36930aa_s.jpg" /></a><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2580/3757334541_28a46c9bf5_b.jpg"><img alt="2009-07-26 18-43-53" src="http://farm3.static.flickr.com/2580/3757334541_28a46c9bf5_s.jpg" /></a><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2665/3758131310_2a1c120271_b.jpg"><img alt="up on the blue hill" src="http://farm3.static.flickr.com/2665/3758131310_2a1c120271_s.jpg" /></a><a rel="lightbox[photo]" href="http://farm4.static.flickr.com/3429/3757333057_57c73cefc6_b.jpg"><img alt="2009-07-26 18-36-59" src="http://farm4.static.flickr.com/3429/3757333057_57c73cefc6_s.jpg" /></a><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2542/3758130164_683f0b707f_b.jpg"><img alt="2009-07-26 18-36-51" src="http://farm3.static.flickr.com/2542/3758130164_683f0b707f_s.jpg" /></a><a rel="lightbox[photo]" href="http://farm3.static.flickr.com/2575/3757332339_f616d3ae7b_b.jpg"><img alt="birds on the jet cloud" src="http://farm3.static.flickr.com/2575/3757332339_f616d3ae7b_s.jpg" /></a><a rel="lightbox[photo]" href="http://farm4.static.flickr.com/3443/3757331955_4f9aaac3a8_b.jpg"><img alt="2009-07-26 18-55-02" src="http://farm4.static.flickr.com/3443/3757331955_4f9aaac3a8_s.jpg" /></a></div>
]]>
        
    </content>
</entry>

<entry>
    <title>ウェブサイトの情報を組織化する６つの体系</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2009/06/website-organize-information.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://www.goodpic.com/admin/mt-atom.cgi/weblog/blog_id=1/entry_id=1291" title="ウェブサイトの情報を組織化する６つの体系" />
    <id>tag:www.goodpic.com,2009:/mt//1.1291</id>
    
    <published>2009-06-20T05:19:04Z</published>
    <updated>2009-06-20T05:19:56Z</updated>
    
    <summary>前回の二つの記事に続いて、ウェブサイトの情報設計について。コンテンツの内容を分析...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="tech" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[<p>前回の二つの記事に続いて、ウェブサイトの情報設計について。コンテンツの内容を分析した後は、分類、組織化するステップです。</p>

<p><img src="http://www.stokeshot.com/capture/organize-20090620-121812.png" alt="organize"/></p>

<p>情報を組織化することで、ウェブサイトを訪れる人が理解しやすくなります。ウェブサイトに多くのコンテンツがある場合は、目的の情報を見つけるためのナビゲーション設計にもつながります。『<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873114101/goodpic-22/">デザイニング・ウェブナビゲーション</a>』によると、情報の分類とは、</p>

<div class="section refer">
  <blockquote cite="http://www.amazon.co.jp/exec/obidos/ASIN/4873114101/goodpic-22/" title="デザイニング・ウェブナビゲーション">
    <p>分類とは、ある共通した側面に基づいたアイテムの組織化です。それは、ある共通項をもったアイテムと、そうでないアイテムの間に先を引くことです。カテゴリ、組織化体系、ラベルは密接に関係しており、そのうちのひとつだけを取り出して考えることは困難です。</p>

    <p>それでも、分類体系の一般的な種類をいくつか挙げることはできます。これらは、２つのタイプに分類できます。それは、客観的ではっきりした体系と、主観的で漠然とした体系です。</p>
  </blockquote>
  <p>『 <cite><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873114101/goodpic-22/">デザイニング・ウェブナビゲーション</a></cite> P.207』 より</p>
</div>

<p>客観的体系の３種類と、主観的体系の３種類を、それぞれ、具体的な例で考えてみます。</p>

<div class="section">
  <h3>客観的体系 : Exact (Objective) schemes</h3>

<p>『 <a href="http://www.amazon.co.jp/exec/obidos/ASIN/0596527349/goodpic-22/" target="_top">Information Architecture for the World Wide Web 3e</a>（Chapter 5, p.7）』による客観的体系とは、</p>

<blockquote cite="http://www.amazon.co.jp/exec/obidos/ASIN/0596527349/goodpic-22/" title="Information Architecture for the World Wide Web 3e" class="refer">
  <p>This is called kwon-item searching. You know what you're looking for, and it's obvious where to find it. No ambiquity involved.</p>
  <p>ユーザーが何を探しているのか知っていて、それがどこで見つかるかが明確なケース。曖昧さは一切ない。</p>
</blockquote>

<p>客観的な組織化体系として、両書共に  Alphabetical, Chronological, Geographicalの三つをあげています。</p>


<div class="section">
  <h4>アルファベット順（Alphabetical schemes）</h4>

  <p><img src="http://www.stokeshot.com/capture/organize-alphabetical-20090620-114659.png" alt="organize-alphabetical"/></p>
  <p>意味的な関連性はないので、訪問者が目的の情報を具体的に把握している場合のみ有効。主に辞書や百科事典でなどで使われる。ウェブサイトでも、コンテンツを索引から閲覧する場合など。</p>
</div><!-- h4 -->

<div class="section">
  <h4>時系列（Chronological schemes）</h4>

  <p><img src="http://www.stokeshot.com/capture/organize-chronological-20090620-120825.png" alt="organize-chronological"/></p>
  
  <p>年月日（と時間）に沿って組織化する。歴史的な事実などは年表形式でまとめるとわかりやすい。企業であればプレスリリース、イベント情報など。個人ではフォトアルバムなど。マイクロブログのTwitterは、完全な時系列。ブログも時系列をベースにした組織化だが、最新の更新情報を伝えると共に、個別アーカイブも作成する。アーカイブでは、カテゴリーやキーワードに応じて、情報を時系列で並べて表示する。このように時系列は、他の手法と組み合わされることも多い。</p>
  <p>時系列から、過去の記事を読む理由には、二種類あるのではないだろうか。ひとつは単純に、その著者に興味があって、記事を読み進める場合。もうひとつは、将来的に興味のある記事が更新されそうかを判断するため。過去記事の内容や更新頻度を見て、RSSフィードリーダーに登録するかどうかを判断することも多い。　</p>
</div><!-- h4 -->


<div class="section">
  <h4>地理的（Geographical scheme）</h4>

  <p><img src="http://www.stokeshot.com/capture/organize-geographical-20090620-121252.png" alt="organize-geographical"/></p>
  
  <p>国、地域、都市、街などの位置情報で分類。天気予報や旅行、レストランなど地理と結びついた情報は多い。ニュースも、地理的に分類される。自分で地名をクリックする意外にも、最近ではiPhone、携帯GPSなどで位置情報を取得して、自動でコンテンツを表示することも可能。</p>
</div><!-- h4 -->
</div><!-- h3 -->


<div class="section">
  <h3>主観的体系（Subjective schemes）</h3>

<p>『 <a href="http://www.amazon.co.jp/exec/obidos/ASIN/0596527349/goodpic-22/" target="_top">Information Architecture for the World Wide Web 3e</a>（Chapter 5, p.10）』による、主観的体系の説明。</p>

<div class="section refer">
  <blockquote cite="http://www.amazon.co.jp/exec/obidos/ASIN/0596527349/goodpic-22/" title="Information Architecture for the World Wide Web 3e">

    <p>There's a simple reason why people find ambiguous organization schemes so useful: we don't always know what we're looking for. In some cases, you simply don't know the correct label. In others, you may have only a vague information need that you can't quite articulate. For these reasons, information seeking is often iterative and interactive. What you find at the beginning of your search may influence what you look for and find later in your search. This information-seeking process can involve a wonderful element of associative learning. Seek and ye shall find, but if the system is well designed, you also might learn along the way. This is web surfing at its best.</p>
    <p>Ambiguous organization supports this serendipitous mode of information seeking by grouping items in intellectually meaningful ways.</p>
<p>人々が、曖昧な体系を非常に便利だと感じるのには、シンプルな理由がある。それは、自分で何を探しているのかを、常に知っているわけではないから。あるケースでは、単に正しいラベルをしらないだけかもしれない。あるいは、はっきりとしない、漠然とした情報を求めている場合もある。このような理由で、情報の探索は、しばしばインタラクティブで繰り返しをともなう行為になる。最初に見つけた情報が、その後に何を探すかに影響をあたえるかもしれない。このような情報探索のプロセスは、連想的に情報を知るという素晴らしい側面も持っている。システムがうまくデザインされていれば、目的のものを探す過程でも、何かを学ぶことができる。これはウェブサーフィンの醍醐味のひとつである。</p>
  <p>曖昧な情報の組織化は、物事を知的で意味のある形にグルーピングすることであり、探索の過程でのセレンディピティを高める効果がある。</p>
  </blockquote>
  
  <p>『 <cite><a href="http://www.amazon.co.jp/exec/obidos/ASIN/0596527349/goodpic-22/">Information Architecture for the World Wide Web 3e</a>（Chapter 5, p.10）</cite>』 より</p>

</div>

<p>そして、Topic, Task, Audience, Metaphor の４種類をあげています（Metaphor については、ちょっと今回は割愛）。</p>


  <div class="section">
    <h4>トピックまたはテーマ（By topic or subject）</h4>

	<p><img src="http://www.stokeshot.com/capture/organize-topic-20090620-121400.png" alt="organize-topic"/></p>
	
    <p>トピックだけで情報を整理するサイトは多くないが、逆にほとんどのサイトでは、何らかのトピックを提示する必要がある。ウェブサイトのトピックとは、見る人に対して、そのウェブサイトがどのような目的を持っているかを説明するということ。
企業サイトであれば、製品、サービス、コンテンツなどをグループ分けして、目的の情報を探しやすくする。トップページのナビゲーションは、それ自体がサイトのテーマを説明する必要がある。ユーザーがトップページを訪れた際に、「そのウェブサイトで何ができるのか」を一目で理解できること。情報量が多い場合は、ディレクトリやツリー構造で表示され、少なければタブ・バー・垂直メニューなどで表現が可能。</p>

  </div><!-- h4 -->

  <div class="section">
    <h4>対象ユーザー（By audience group）</h4>

	<p><img src="http://www.stokeshot.com/capture/organize-user-20090620-121511.png" alt="organize-user"/></p>
    <p>訪問するユーザーごとにコンテンツを切り替えて表示したり、個別のナビゲーションに誘導する。Audienceによる情報の組織化は、ウェブサイトをブックマーク保存して、頻繁に訪れる場合に特に有効。ユーザーは、自分の用途にあったウェブサイトのセクションをブックマークすることで、絞り込まれた情報にすぐにアクセスできる。逆に言うと、明らかに自分には必要ない情報を除外することで、迷うことが少なくなる。大きなウェブサイトを、対象とするユーザー毎に、いくつかの小さなウェブサイトに分割して見せるような効果がある。</p>
  </div><!-- h4 -->

  <div class="section">
    <h4>タスク（By Task）</h4>
	
	<p><img src="http://www.stokeshot.com/capture/organize-task-20090620-121558.png" alt="organize-task"/></p>
    <p>ユーザーに提供する機能ごとの組織化。eコマースサイトでの買い物、問い合わせ、ブログでの記事の更新、スケジューラーへの要件追加など、いくつかのプライオリティの高いタスクを行いやすいように組織化する。GmailなどのWeb化されたソフトウェアを除くと、タスクによる組織化だけで、ウェブサイトとして完結するケースは少ない。ウェブサイトのトピックの中に、機能モジュールとして埋め込まれることが多い。</p>
  </div><!-- h4 -->

</div><!-- h3 -->

<div class="section">
  <h3>LATCH法</h3>
  <p>『<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4862670105/goodpic-22/" target="_top">ウェブの仕事力が上がる標準ガイドブック2 Webデザイン</a> p.33』では、Richard Saul Wurman氏のLATCH法が紹介されている。これは情報の組織化の方法を５つに定義するもの。ウェブサイトに限らず、情報を整理するための包括的な組織化体系です。</p>

  <ul>
    <li>Location：位置</li>
    <li>Aiphabet：アルファベット</li>
    <li>Time：時間</li>
    <li>Category：分野</li>
    <li>Hierarchy：階層、または連続体</li>

  </ul>
</div><!-- h3 -->
  
<div class="section">
<h4>関連記事</h4>
<ul>
  <li><a href="http://www.goodpic.com/mt/archives2/2009/06/post_247.html">ウェブサイトの情報を構造化する５つのパターン</a></li>
  <li><a href="http://www.goodpic.com/mt/archives2/2009/06/context_content_usershtml.html">ウェブサイトのコンテンツ内容を分析・定義する８項目</a></li>
</ul>
</div>]]>
        
    </content>
</entry>

<entry>
    <title>ウェブサイトのコンテンツ内容を分析・定義する８項目</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2009/06/context_content_usershtml.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://www.goodpic.com/admin/mt-atom.cgi/weblog/blog_id=1/entry_id=1289" title="ウェブサイトのコンテンツ内容を分析・定義する８項目" />
    <id>tag:www.goodpic.com,2009:/mt//1.1289</id>
    
    <published>2009-06-15T15:22:13Z</published>
    <updated>2009-06-15T15:25:56Z</updated>
    
    <summary>   前回の記事『ウェブサイトの情報を構造化する５つのパターン』に引き続き、ウェ...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="xml" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[  
<p>前回の記事『<a href="http://www.goodpic.com/mt/archives2/2009/06/post_247.html">ウェブサイトの情報を構造化する５つのパターン</a>』に引き続き、ウェブサイトの情報設計についての勉強エントリーです。今回は、ウェブサイトで公開する情報、コンテンツをどのように定義するか。</p>

<div class="section">
  <h3>情報設計の三要素 : Context, Content, Users</h3>

  <p>『 <a href="http://www.amazon.co.jp/exec/obidos/ASIN/0596527349/goodpic-22/" target="_top">Information Architecture for the World Wide Web 3e</a>（Chapter2, p.10）』では、情報アーキテクチャを構成する要素として、Context, Content, Users をあげています。</p>

<p><img src="http://www.stokeshot.com/capture/webdesign-with-mt-ja-20090615-202630.png" alt="Contents, Context, User"/></p>

<p>Context は、ウェブサイトを運営する組織が、何を目標としているのか、その組織としてのミッションをベースに組み立てられます。どのような方法で、何の価値を生み、また、どういった組織文化をもっているのか。さらには、（企業であれば）他社に比べて、どうユニークなのか。今は何が強みで、将来的にどこに向かっているのか。あるいは、人員、技術、予算面などでの制約や、必要なプロセスなどの制限事項も含まれます。そのような、個々の組織のコンテキストにあわせて情報設計がなされるべきであると。</p>
<p>User は、ウェブサイトを訪れるユーザーや、サービスの顧客が、どのような属性をもっているのか。いつ、どのようにウェブサイトを利用しているか。そして、最も重要なのは、どのような情報を、ユーザーが求めているのか。</p>

<div class="section">
  <h4>Content</h4>
  <p>Content については、以下の６つの側面から定義づけられている（Chapter2, p.13）。</p>
  <ul>
    <li>Ownership（所有者）<br />
      誰がそのコンテンツを作成し、管理するのか。一部門で集中しておこなうのか、各部門に分散しているのか。社外のコンテンツも含まれるか？ライセンスは？
    </li>
    <li>Format（フォーマット）<br />
      コンテンツの形式。文章、写真、ビデオ、あるいはMS WordやPDFなどの特定のファイル形式など。
    </li>
    <li>Structure（構造）<br />
    コンテンツは、その種類によって独自の構造を持っている。例えば、１００文字足らずの重要なメモもあれば、何百ページにおよぶ製品マニュアルもある。</li>
    <li>Metadata（メタデータ）<br />
      既存のコンテンツが、どの程度、分類されているか。カテゴリーやタグ付けはされているか。そこで使われている用語は統一、管理されているか。現状の管理体系を、ウェブサイトでのコンテンツ整理にも役立てる。
    </li>
    <li>Volume（量）<br />
      対象にするコンテンツのボリューム。十数ページの文章と、数百のカタログ情報では、適する管理方法は異なる。
    </li>
    <li>Dynamism（変化）<br />
      どれぐらいの頻度でコンテンツが作成され、各コンテンツはどのぐらいの寿命があるか。
    </li>
  </ul>  
</div><!-- h4 -->
</div><!-- h3 -->

<div class="section">
  <h3>ナビゲーション設計からみた、コンテンツ分析</h3>
  <p>一方、『<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873114101/goodpic-22/" target="_top">デザイニング・ウェブナビゲーション --最適なユーザーエクスペリエンスの設計</a>（p.166）』では、ナビゲーション設計の観点から、以下のようにコンテンツを分析します。</p>

  <ul>
    <li>頻度（Frequency）<br />
      コンテンツが生成される頻度。情報が頻繁に更新される場合は、適応型ナビゲーションメカニズムなどの動的なものが適しており、柔軟性も求められる。
    </li>
    <li>寿命（Longevity）<br />
      すぐに時代遅れになってしまうコンテンツよりも、価値が長持ちするコンテンツを扱うほうが、ナビゲーション設計の計画は立てやすくなる。
    </li>
    <li>量（Quantity）<br />
      対象の分野での、平均的な文章の長さや、適切な情報の量。サイト全体での典型的な量を把握することで、ページの長さがコンテンツをまとめる単位を判断できる。
    </li>
    <li>リンクと相互参照（Linking and Cross Referencing）<br />
      対象の分野で、引用や参照、情報のリンクがどのような意味合いを持っているか。学術論文では引用は大きな意味をもつが、ニュースなどでは相互参照の意味合いは低い。
    </li>
    <li>権威性（Authority）<br />
      内容に関する信頼性を向上させるために、どのような権威性が重要か。重要人物の名前や、検証方法などを考慮してユーザーをナビゲートする必要があるかどうか。
    </li>
    <li>ジャンル（Genres）<br />
      対象とする領域での、標準的なジャンル分けや、一般的な文章形式があるかどうか。
    </li>
  </ul>
  
</div><!-- h3 -->

<div class="section">
  <h3>まとめ</h3>
  <p>二冊の書籍は、それぞれ、情報設計とナビゲーション設計という面から、コンテンツを定義しています。以下の表にまとめてみました。確かに、コンテンツの状況を分析、定義するのに役に立ちそうです。</p>

<table cellpadding="3" cellspacing="1" style="width:550px; font-size:90%;" >
  <tr style="background-color: #cccccc;"><th style="width: 275px;">Information Architecture</th><th style="width:275px;">デザイニング・ウェブナビゲーション</th></tr>
  <tr><td>Ownership（所有者）</td><td></td></tr>
  <tr><td>Format（フォーマット）</td><td></td></tr>
  <tr><td>Structure（構造）</td><td></td></tr>
  <tr><td>Metadata（メタデータ）</td><td>ジャンル（Genres）</td></tr>
  <tr><td>Volume（量）</td><td>量（Quantity）</td></tr>
  <tr><td>Dynamism（変化）</td><td>頻度（Frequency）<br />寿命（Longevity）</td></tr>
  <tr><td></td><td>リンクと相互参照<br />（Linking and Cross Referencing）</td></tr>
  <tr><td></td><td>権威性（Authority）</td></tr>
</table>  
  
</div><!-- h3 -->

<div class="section">
  <h4>参考文献</h4>
  <ul>
<li><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873114101/goodpic-22/" target="_top">デザイニング・ウェブナビゲーション --最適なユーザーエクスペリエンスの設計</a></li>
<li><a href="http://www.amazon.co.jp/exec/obidos/ASIN/0596527349/goodpic-22/" target="_top">Information Architecture for the World Wide Web 3e</a></li>
</ul>
</div>
]]>
        
    </content>
</entry>

<entry>
    <title>ウェブサイトの情報を構造化する５つのパターン</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2009/06/post_247.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://www.goodpic.com/admin/mt-atom.cgi/weblog/blog_id=1/entry_id=1288" title="ウェブサイトの情報を構造化する５つのパターン" />
    <id>tag:www.goodpic.com,2009:/mt//1.1288</id>
    
    <published>2009-06-14T07:23:38Z</published>
    <updated>2009-06-17T11:08:27Z</updated>
    
    <summary> ウェブサイトと一口に言っても、個人ブログから企業サイト、あるいは大規模なコミュ...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="tech" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[
<p>ウェブサイトと一口に言っても、個人ブログから企業サイト、あるいは大規模なコミュニティーまで、多様なウェブサイトが存在します。公開するコンテンツの内容、目的、ページ数、参加するユーザー数などの条件は、個々のウェブサイト毎に異なります。ウェブサイトを制作するためには、このような多様な形態から、最も目的にあったパターンを選ぶ、情報設計が不可欠です。</p>

<p><img width="450" src="http://www.stokeshot.com/capture/structure-polyhierarchy-20090614-155338.png" alt="polyhierarchy" /></p>

<p>この『ウェブサイトの情報設計』について、基本を勉強してみたいと思い、主に以下の書籍を参照しながら、何回かにわけてまとめてみたいと思います。なを、記述内容や図については、書籍を読解しつつ、自分で書き起こしているので、正確な引用ではありません。内容に興味がわいたら、ぜひ原書を読まれることを、おすすめします。</p>

<ul>
<li><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873114101/goodpic-22/" target="_top">デザイニング・ウェブナビゲーション --最適なユーザーエクスペリエンスの設計</a></li>
<li><a href="http://www.amazon.co.jp/exec/obidos/ASIN/0596527349/goodpic-22/" target="_top">Information Architecture for the World Wide Web 3e</a></li>
<li><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4862670105/goodpic-22/ref=nosim/" target="_top">ウェブの仕事力が上がる標準ガイドブック2 Webデザイン</a></li>
</ul>

<p>まず初回は『情報構造のパターン』について。『<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873114101/goodpic-22/" target="_top">デザイニング・ウェブナビゲーション --最適なユーザーエクスペリエンスの設計</a>（p.200）』では、以下の５つのパターンに分類されている。</p>

<div class="section">
<h3>直線型（Linear）</h3>
<p>そのサイトの目的が明確で、ゴールがはっきりしている場合に有効。例えばキャンペーンの告知と申し込み用のサイトなど。ユーザーはいくつかのステップを経由して、最終的な目的を達成する。ECサイトなどは、階層型と直線型の組み合わせで、商品の発見は階層型だが、その後の購入までのステップは直線型になる。</p>
<p><img src="http://www.stokeshot.com/capture/structure-linear-20090614-125043.png" alt="structure-linear"/></p>
</div>

<div class="section">
<h3>ハブとスポーク型（A hub and spoke）</h3>
<p>直線型の派生系ともいえる。中心（ハブ）から、ユーザーの目的を選択して、ゴールに向かってステップを進んでいく。ひとつの目的が達成されたら、サイトの利用を終了するか、出発点であるハブに戻る。複数の直線型が、一つのハブから始まる型。</p>
<p><img src="http://www.stokeshot.com/capture/structure-hub-spoke-20090614-152821.png" alt="structure-hub-spoke"/></p>
</div>

<div class="section">
<h3>ウェブ型</h3>
<p>開始ページや最終ページが明確に定められていない。各ページは、リンクや相互参照でつながっていて、中心のない構造。インターネット（WWW）全体を見ると、このような構造。</p>

<p><img src="http://www.stokeshot.com/capture/structure-web-20090614-153517.png" alt="structure-web"/></p>

<p>ウェブ型の各ページは『ハブとスポーク型』のハブとして機能する可能性を秘めている。例えば、ソーシャルネットワーク・サービスのユーザー同士のリンク。閲覧者はその間を自由に移動しつつ、各ユーザーのプロフィールページを起点に、日記などの情報を見たり、メッセージを送るなどのアクションを開始できる。ページ同士のリンクをナビゲーションとして整理することで、ウェブ型の情報を、構造化することが可能、ということでしょうか。</p>

<p><img src="http://www.stokeshot.com/capture/structure-web-hub-20090614-153702.png" alt="structure-web-hub"/></p>
</div>


<div class="section">
<h3>階層型（hierarchy）</h3>
<p>通常のウェブサイトでよく見られるパターン。サイトのトップページ（ホームページ）を起点に、情報を親子関係で整理する。階層構造内で、下の階層のコンテンツは、親コンテンツの意味や内容を受け継ぎ、それを次の階層につなげる。</p>
<p>『<a href="http://www.amazon.co.jp/exec/obidos/ASIN/0596527349/goodpic-22/" target="_top">Information Architecture for the World Wide Web 3e</a>』の5.4.1. The Hierarchy: A Top-Down Approachでは、階層型をさらに二種類に分類しています。</p>

<div class="section">
<h4>横の幅が狭く、階層が深いもの Narrow-Deep</h4>
<p><img src="http://www.stokeshot.com/capture/structure-narrow-deep-20090614-154420.png" alt="structure-narrow-deep"/></p>
</div>

<div class="section">
<h4>横の幅が広く、階層が浅いもの Broad-Shallow</h4>
<p><img src="http://www.stokeshot.com/capture/structure-broad-shallow-20090614-154230.png" alt="structure-broad-shallow"/></p>
</div>


<p>階層の横の幅と深さ、この二つの間のバランスがとれた構造が望ましいとされる。ただし、ユーザーにとっては、クリックして進んだ先を確認するより、カテゴリーのリストをざっと見て選ぶ方が、瞬間的に判断できるので、深い階層より、浅くて幅広いもののほうがナビゲーションしやすい。トップページは階層構造への入り口になるため、ユーザーが「ぱっと見て、どこに行けばいいのか」わかるように、選択肢を並べておくのが有効。</p>

<p><img src="http://www.stokeshot.com/capture/structure-hierarchy-20090614-155241.png" alt="structure-hierarchy"/></p>

<p>階層型の情報構造では、適切なラベル付け、グループ分けがされていることが非常に需要。理想的にはトップページのナビゲーションを見ることで、ウェブサイト全体に、どのようなコンテンツがあるのかを理解できること。また、ウェブ制作においては、後からコンテンツが随時追加されていく場合も多いので、それを見越してバランスを設計したり、必要に応じて定期的に見直す必要があるだろう。</p>

<div class="section">
<h4>ポリヒエラルキー</h4>
<p>ひとつのページやコンテンツが、複数の親に所属するケースは、ポリヒエラルキー（複合型階層）と呼ばれる。例えば、複数のコンテンツの『連絡先』をクリックすると、ひとつの連絡用フォームのページに遷移する場合など。パン屑ナビゲーションなどで、表示がおかしくならないように気をつけて設計をする必要がある。</p>
<p><img width="550" height="324" src="http://www.stokeshot.com/capture/structure-polyhierarchy-20090614-155338.png" alt="polyhierarchy" /></p>
</div>

</div>

<div class="section">
<h3>ファセット型（Facets）</h3>
<p>ファセット型は階層型の代わりに利用することができる。馴染みのない名前だが、ECサイトなどでは頻繁に用いられる。例えば、一眼レフカメラのレンズをECサイト上で探す場合。目的の機種を探すために、様々な絞り込み条件を組み合わせることになる。</p>
</div>

<ol>
<li>メーカーを一覧から選ぶ</li>
<li>対応するカメラの機種から選ぶ</li>
<li>レンズの焦点距離を選ぶ</li>
<li>レンズの明るさを選ぶ</li>
<li>価格帯を指定する</li>
</ol>

<p><img src="http://www.stokeshot.com/capture/structure-facets-20090614-155822.png" alt="structure-facets"/></p>

<p>これらの条件は、どこから指定してもよいし、また一部を組み合わせるだけでもよい。予算が決まっている人は、まず価格帯を選び、望遠・広角などの焦点距離を指定して、そのなかで最も安いレンズを選ぶ。一方で、より専門的な目的でレンズを探している人は、レンズの焦点距離、明るさから選び、最終的に予算を決定するかもしれない。このように、「ユーザーはさまざまな角度から情報にアクセスしようとする（P.203）」という特性にあわせつつ、情報検索に大きな柔軟性を持たせることができる。</p>
<p>また、ファセットを構成するカテゴリは、相互に排他的なので、新たにカテゴリを追加したり、既存のカテゴリの内容を変更しても、それが他のカテゴリに影響をあたえることがない。これは親子関係が定義されている階層型と大きな違いで、高い拡張性をもたらす。</p>

<div class="section">
<h3>発生型</h3>
<p>Wikipedia のように、事前に計画するのではなく、コンテンツの投稿者によって自律的に構造がつくられるもの。投稿者が一定のルールや規則に基づきながらも、自由にコンテンツの方向性をきめることができる。発生型の多くはウェブ型の階層をもつことになる。Wikipediaのように、wikiというツールの操作性がナビゲーションや情報の構造を規定するケースもある。</p>
</div>
　
]]>
        
    </content>
</entry>

</feed> 

