今年の春からWeb業界に飛び込んできた新人Web屋さんたちは、そろそろ仕事にも慣れてきて、任される作業も少しずつ増えてくるので、制作が楽しく思えてくる時期かもしれませんね。

この春ドアズに入社した新人Web屋さんたちも、入社して早３ケ月が過ぎました。

でも、敢てこの時期だからこそ、仕事の基本に立ち返ってもらいたいと思います。（今回はドアズの新人さんたちに一番読んでもらいたい。）

※ドアズ的な考え方をshimanto独自の見解で書いてますので、相違がある場合は、こんな考え方もあるんだな的に眺めて下さい。

①常にクライアントの方向を向く

Web屋さんが仕事としてWebを制作する場合、どんな時もクライアントのことを忘れてはいけません。我々はクライアントに利益をもたらすための一つの手段としてWebをつくっているのです。

もっと言えば、クライアントのWebサイトは「クライアントのお客様」の為に存在します。つまり、エンドユーザーに利益をもたらすWebサイトを我々は提供し、そのことにより、クライアントが利益を得るのです。※利益とはもちろんお金だけの話ではありませんよ。

あなた（わたし）が作ったバナー、あなた（わたし）が書いたソースコード、あなた（わたし）が実装したスクリプト、あなた（わたし）がそれらをつくるために費やす時間、その全てがクライアントの方向を向いていて欲しいと願っています。

②森を見て木を考える。

新人の頃は、データ整理・コーディング・パーツ制作など、サイト全体のことよりも、数多くの細かい作業を任されるものです。するとどうしても目の前の作業のみに捕らわれがちになってしまいますが、そんな時こそ、距離をおいて自分の作業を眺めてみてほしいと思います。

自分が与えられた作業がそのWebサイト全体のなかでどのような意味を持っているのか、そのWebサイトのデザインの中で自分がつくるデザインはどのようにあるべきなのか、自分が書くソースコードはそのWebサイトの中では正しいのか、などなど、他にも色々なことが見えてくると思います。

③自分の意見や考えを常に持つ

最も陥りがちなのは、作業者になってしまうことです。全てに指示がなければ何もつくらなく（つくれなく）なってしまいます。

デザインであれば、出来上がったデザインに本人の意思が全く入っていなかったり、要件に対して質問すらないケースもあります。

コーディングであれば、ファイル同士の相関関係やルールなどを気にせず、独自のルールで構築してしまったりすることもあります。

要件に対して、こうすればもっと良くなるのではないかというような、自分の意見や考えを常に持つようにして欲しいと思います。

与えられたものを作るだけWeb屋さんにならないようにしましょう！

まとめ

新人さん！①クライアントの方向を見て、②全体から自分の作業の意味を考え、③制作物に自分の意思をしっかり注ぎ込む、そんなWeb屋さんを目指して下さい。

「作る」が「造る」になり、「造る」が「創る」になるように

去る2011年6月24日日経デジタルマーケティング主催の「Facebookページの作成＆活用の基礎講座！」というセミナーが行われました。ご縁があって参加させてもらうことができました。
講師は「パートナー型」Webプロダクション株式会社TAMの加藤洋氏。

第1部 Facebook時代のソーシャルメディア活用

Facebookの概要とソーシャルメディアの概念、Facebookページを使ってできるようになることなどのお話でした。
ポイントはフェースブックが、企業側の情報発信+拡散の仕組みと、顧客側の（情報収集+評価）の仕組みの両方を兼ね供えるプラットフォームだということです。

第2部 人気のFacebookページを分析

7つの目的別にFacebookを活用した国内外の成功事例を紹介していただきました。
7つの目的とは以下です。

• 製品の開発と革新を進める
• 注目を集める
• 気に入ってもらう、差別化をはかる
• サイト訪問数と売り上げを増やす
• お得意様をつくり、関係を深める
• おすすめや口コミを増やす
• 顧客のことをもっと知る

日本では一部の企業でテストケースが行われているFacebookクーポン。
チェックイン機能はこれからきそうです。
インサイト機能でしっかりと分析も忘れないようにすることも大事です。
twitterとの使い方・使われ方の違いを意識しないといけません。

複数のFacebookページを活用することがポイントになりそうです。企業サイトとしてのFacebookページとブランド訴求用のFacebookページは別々に用意し、使い方もきっちりと分けて考える必要があるのではないかと思います。

第3部 Facebookページの作成計画を立てる

参加者の所属する企業やクライアント企業のFacebookページをつくるという設定で実際にプランニングを行いました。
TAM様独自の現状分析シートからFacebookで実現できそうな事まで落とし込みます。落とし込んだ内容をPGST（目的・目標・戦略・戦術）シートにさらに落とし込みます。

第3部が今回のセミナーの肝だと感じました。PGSTシートに落とし込むためにFacebook自体を理解する必要があり、そのための第1部・第2部だったのかなと勝手に解釈しています。
この作業の流れはFacebookページの制作だけでなく、様々な業務や思考の流れを考える上でも活用できるものでした。

第4部 Facebookページを作成

事前に登録しておいたアカウントで、実際にFacebookページを設置し、アプリの組み込みまでを行いました。
非常に基本的な内容でしたが分かりやすかったです。Facebookページで使うメイン画像は縦長で訴求力アップです。

第5部 まとめ／質疑応答

実際にFacebookページをつくったあと、どのようにすれば良いかという方法や、Facebook独自のアルゴリズムの概要、広告、Facebookページがどのような成長過程をしていくのかなどを解説していただきました。

唯一残念だったのが時間が足らなかったことですね。第1部～2部で1日、第3部～5部で1日使っても充分すぎるくらいの内容でした。第3部で考えた内容を元に、第4部でFacebookページをつくるという流れであればもっと楽しいワークショップになりそうです。

おそらく企業のマーケティングやWeb担当者が主なターゲットだったと思うので、Facebookの導入として、非常に分かりやすく面白い内容だったと思います。質疑応答もとても具体的な質問が次々と飛び交ってました。ドアズでも新人さんなどにシェアしていこうかななどと考えています。

去る2011年6月18日、HTML5-WEST.jpの村岡正和氏が主催されている「第7回HTML5読書会」に参加してきました。第1回に参加してから実に6回ぶり。羽田野太巳氏の「徹底解説HTML5」を読み進める会です。色々と興味深い内容がありましたが、figure要素からの話の流れで、altコンテンツ属性（以下alt属性）について重要な議論がありました。今後のマークアップの考え方にも重要な意味があると思い、読書会と本の内容を踏まえつつ、独自に復習してみました。
※alt属性を指定すると、画像がリンク切れなどで表示されない場合は代替テキストが表示されます。また、スクリーンリーダーはaltタグの文章を読み上げます。
以下のような画面のコーディングを考えてみましょう。

これまでのコーディング

alt属性はHTML4では、画像の代替テキストとして使用されます。なので「ラベンダー畑の画像」などの文章を入れていました。

altに与えられた新しい役割

HTML4ではイメージを簡単に説明する代替テキストで良かったので、上記のような表記で良かったのですが、HTML5からは「フォールバック」という役割が与えられることになります。

もしイメージが表示されなかったとしても、ドキュメントの意味を損なわず、イメージの代役を果たすことが求められるのです。

イメージの代役を果たすというのは、イメージの前後の文章と、altコンテンツ属性のテキストをつなげて読み上げたときに、違和感なくユーザーに伝わることなのです。

引用元：「徹底解説HTML5」羽田野太巳著

「徹底解説HTML5」の中では、電話越しにイメージを説明することを想定して考えると良いとあります。
なるほど。なるほど。

これまでもalt属性はアクセシビリティのために使用されていましたが、さらに厳密にアクセシビリティに配慮して使用していく必要性が出てきたということですね。

では今回のケースでは具体的にどのように設定すべきか考えてみましょう。

イメージのタイトルをalt属性に入れない

alt属性に「爽やかな青空の下で一面に広がる鮮やかな紫色のラベンダー畑」と入れてみました。

一見、画像の情報は伝わりますし、良さそうなのですが、画像を詳しく説明していたとしても、alt属性に画像のタイトルとなるような文字を入れてはいけないようです。

このような書き方の場合は、イメージのタイトルとしての情報になりますので、alt属性ではなく、title属性で指定する形が正しいようです。

フォールバック的な設定

画像をテキストに代えて読んでも、スクリーンリーダーで順番に読み上げられても、イメージが表示されているのと同じ内容が違和感なく伝わらなければいけません。

なので、alt属性に「爽やかな青空の下で鮮やかな紫色のラベンダーが一面に広がっています。」と指定しました。

これであれば、全てテキストで表示された際も、
「この季節、北海道ではラベンダーが見どころの一つです。爽やかな青空の下で鮮やかな紫色のラベンダーが一面に広がっています。壮大な景観に感動」
と内容に繋がりを持たせつつ、情報を伝えることができているのではないでしょうか。

上記は使い方のほんの一例で、HTML5ではalt属性の使い方がかなり細かく規定されているようです。title属性とalt属性の使い分けや考え方は、実務の中でも今から慣れていく必要がありますね。次回以降の読書会でalt属性が記述されている個所がでてくるので、それまでに事前に勉強しておこうと思います。

京都GTUG（http://www.kyoto-gtug.org/home/）
HTML5-WEST.jp（http://www.html5-west.jp/）

６月１日に京都で開催された「次世代電子出版とWeb 表現技術フォーラム in 京都」行ってきました。W3C CSS WGメンバーの方々やadobeの開発の方などが参加され、意見交換や質疑応答や熱いディスカッションの場となりました。関西でこういった方々に直接お会いできたり、こういった大きいフォーラムに参加できる機会がなかなか少ないので、平日ではありましたが参加させてもらいました。日本語独自の組版をWeb技術でどのように再現していくのかということを軸に各セッションが行われました。

私が全体を通して感じた結論を言うと、出版関連・印刷関連の方々がWeb技術で求めていることと、Web制作関係者が求めていることとは根本的なところで食い違っているのではないかということです。前者は紙でできる表現を如何にデジタル上で再現できるかに執着しているように感じました。逆に私を含め後者はそこにはほとんど拘りはなく、新しい表現方法の一つとして何ができるかを模索しているのではないかと思います。

簡単に各セッションを紹介します。

Session1：CSSにおける将来の日本語レイアウト～webと電子出版～

まずアドビシステムズの Nat McCully 氏が InDesign においての日本語と英語の処理の違いや、InDesign と CSS の違いの技術的な説明で幕を開けました。マニアックすぎて後半はさっぱり分かりませんでした。

次に W3C CSS WG Editor の石井宏治氏から、東京で開催されたフォーラムの際に電子書籍関連に携わった企業の意見が紹介されました。美しく組みたいという観点からは、フォントの容量とダウンロード時間の問題や、禁則処理・割注の問題などが指摘されました。Web技術としては、ブラウザやリーダーの縦組み実装が追いついていないために生じる表示の問題が大きいようです。

完全な再現を目指すなら「PDFを使え」という名言が。会場全体が納得。

Session2：KUMIHANプロジェクト

合同会社アライアンスポートの山辺真幸氏が手掛けた、JavaScriptを用いた縦組み組版への取り組みが紹介されました。５年も前に「天童荘（http://www.tendoso.jp/）」において、JavaScriptを使った縦組みを実装。一文字ずつ div で括り、フロートさせるという力技ではありますが、ただ単に縦に並べるのではなく、追い出し禁則処理や句読点の位置を微妙に調整したり、「」などを縦組み用文字の置き換えたり、数字表記をアラビア文字から漢数字に自動変更したりと、デザインに対するこだわりがすさまじかったです。日本語組版コントロールの可能性２００６年にすでに感じていたことに感動しました。あとは「新聞ブログ」はリリースの時に話題になりましたよね。

KUMIHANプロジェクトの取り組みは「http://kumihan.org/」で公開されています。縦組みのJavaScriptも公開されています。

ランチミーティング

バイキング形式の料理をいただきながらのフリートークタイム。Session2でお話いただいたアライアンスポートの @masakick さんと@yamato さんのお話を伺うことができました。

Session3：端末メーカーによる電子書籍ビジネスの動向

シャープ株式会社の花田恵太郎氏による、XMDFの解説とCSSにおける将来の日本語レイアウトを電子書籍技術ベンダー・事業者の観点からのお話でした。XMDFはシャープさんが提唱している電子書籍技術とフォーマットのことですね。最新の規格では、「イメージ型」「マルチレイアウト型」「ハイブリッド型」の３種類のフォーマットがあるそうですが、実は第４のフォーマット「HTMLレビュー」というフォーマットがあるそうです。現状ではHTMLでは表示が統一しないということが大きくアナウンスしていない理由とのことでした。バージョンアップや古いバージョンに対応しきれないとも。

デジタルの場合、制作者の意図したデザイン・レイアウトと、ユーザーにとっての使いやすさや読みやすさという二面性があり、これを両立させることを目指しているとのことでした。また、技術ベンダーがビューア実装に寄与することで見え方の統一に責任を持つことができるともおっしゃられていました。

HTMLビューワーでepubの仕様を実装していってくれれば、epubコンテンツ作成用のプラットフォームとしての可能性もあるんじゃないかと感じました。

Session4：CSSにおける文字とフォント

日本電信電話の川幡太一氏によるフォントの話。難しすぎてさっぱり分からない。。。質疑応答で議論が白熱。英語が飛び交いさらに分からない。なんとなく雰囲気は伝わるのが不思議でしたが。技術者がフォントを表示させる仕組みを構築する際に（検索システムやブラウザ表示など）便利になるのかなというくらいしか理解できませんでした。

フォントを簡単に生成・共有できるグリフウィキ(GlyphWiki)とそこで作成された花園フォントは要チェックです。

Session5：Web表現技術から見た日本語レイアウトの課題

W3C CSS WG Editor の芦村和幸氏による東京のフォーラムでの議論のフィードバックと電子出版技術の将来に関するディスカッションが行われました。デバイスによる表示の違いや安定実装されたリーダーがまだ存在していないことなどが問題としては大きそうです。

まとめ：

全体的に出版・印刷からの視点が多かったように感じました。冒頭で書いたように再現性を重視されていて、如何に「かっこよく」「美しく」レイアウトできるかということに拘りがあったように感じました。現状では「お金がとれるデザインができない」というような話もありましたが、それはちょっと違うんじゃないかなという気がします。デザイン自体にもちろん価値はあると思いますが、お金を取るためにと考えると、デザインよりもむしろ情報のほうが重要なのではないかと考えます。Webは表現の一つの手段であり、Web上でいかに情報を効率良く伝えることができるかを考えることが重要ではないでしょうか。そこに紙を完全に再現する必要はなく、それならば「PDFを使え」ということになります。大手企業が持つ強みは一般の方が簡単には入手・公開できない情報を発信することができることにあると思います。石川遼選手のスイング指導のビデオなんて一般の方の入手はまず無理でしょうし、有名な作家の原稿なんて手に入りません。そのあたりで価値の差別化が図れるのだと思います。

Web技術そのものよりも、標準化された仕様が実装されているビューワーの開発と、古いバージョンに対してどのように取り組んでいくかということが、共通した大きな問題点のように感じました。レコードがCDに変わったり、アナログが地上波デジタルに変わるときのように、どこかで古いバージョンを切り捨てることが必要なのかもしれませんね。（少々乱暴ですが。。。）

おまけ：どうでもいいですけど、英語は理解できるようになりたいな。。。

当日のプログラム。裏面は英語でした。常に通訳しながら進行。。。

epubを勉強している過程でaudio要素を使う機会があったので、試してみたところ「楽」の一言につきましたので、ネタ的には今さら的な感じがしますが備忘録を兼ね紹介しようと思います。

動画や音楽ファイルをWeb上で扱う場合は、FlashなりMediaPlayerなりの準備をする必要があるのですが、HTML５ではファイルをaudio要素（もしくはvideo要素）で指定するだけ。超かんたん。

<audio src="hoge/hoge.mp3" autoplay="" controls="" loop=""></audio>

• autoplay属性⇒ autoplay  もしくは autoplay=”" で自動再生を設定
• controls属性⇒ controls もしくは controls=”" で制御用のプレイヤーを表示
• loop属性⇒ loop もしくは loop=”" でループ再生を設定

（video要素も同様です。）

control属性を指定するとこんなプレイヤーが表示されます。画像はGoogle Chrome のものです。

プレイヤーはブラウザによって表示が異なるのが少し難儀ですよね。でもJavaScriptを使えば簡単な数行のコードでオリジナルのプレイヤーも実装できます。今回は再生と停止ボタンを実装してみます。

まずはHTMLの設定。定義リストを使って設定してみました。

<dl>
<dt>BGM</dt>
<dd><audio src="hoge/hoge.mp3" autoplay="" controls="" loop="" id="audio"></audio></dd>
<dd><button id="play"><img src="hoge/hoge/hoge.gif" alt="再生" /></button></dd>
<dd><button id="pause"><img src="hoge/hoge/hoge.gif" alt="停止" /></button></dd>
</dl>

オリジナルデザインにするのでcontrol属性は指定していません。JavaScriptの判別用にaudio要素とbutton要素にそれぞれidを設定します。

JavaScriptのコードは以下を記述（外部ファイルでも直接でも可）します。

(function () {
	var audio = null;
	window.addEventListener("load",function() {
		audio = document.getElementById("audio");

		/* 再生 */
		document.getElementById("play").addEventListener("click", playAudio, false);

		/* 停止 */
		document.getElementById("pause").addEventListener("click", pauseAudio, false);

		},false);

	/* 再生 */
	function playAudio(evt) {
		evt.target.disabled = true;
		document.getElementById("pause").disabled = false;
		audio.play();
	}

	/* 停止 */
	function pauseAudio(evt) {
		evt.target.disabled = true;
		document.getElementById("play").disabled = false;
		audio.pause();
	}

})();

id=”audio”を取得し、id=”play”・id=”pause”を振られた要素をクリックすると、playAudioもしくはpauseAudioが実行される仕組みです。すると下記のようなプレイヤーが使えるようになります。（epub縦書き用のプレイヤーだったので縦並びのボタンになりました。）

再生・停止だけではなく、音量表示・音量の上げ下げ・ミュートや再生秒数などもJavaScriptで設定できます。video要素もほとんど同じように実装できるので、プレイヤーのソーステンプレートを用意しておくと効率的になりそうです。

参考：
徹底解説HTML5マークアップガイドブック（羽田野 太巳 著）

今回は強烈な腰痛に耐えながら書いてます。腰大事。。。前回はEPUBの全体の構成要素を書き出してみました。今回は各ファイルをもう少し細かく見ていきましょう。

mimetype（必須）：「俺はEPUBファイルだ」と宣言するファイル

application/epub+zip

これだけ。これでEPUBファイルだと認識してくれます。何も考えずに設置しましょう。

META-INF（必須）

これも何も考えずに設置。

container.xml（必須）：content.opfの位置を指定

先ほど設置したMETA-INFディレクトリ内に作成します。次に記すcontent.opfへのファイルパスを記述します。

<?xml version="1.0"?>
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
    <rootfiles>
        <rootfile full-path="content.opf" media-type="application/oebps-package+xml"/>
   </rootfiles>
</container>

EPUBコンテンツの直下に設置すると仮定すると上記のような記述になります。ファイルのパスだけを気にしておきましょう。

content.opf（必須）：epubファイルを構成するファイルへのパスとファイル名を記述。

先ほどのcontainer.xmlで指定したファイルです。大きく下記の要素で構成されています。

<package xmlns="http://www.idpf.org/2007/opf" unique-identifier="issue" version="2.0">
    <metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
        <dc:hogehoge>hogehogehogehoge</dc:hogehoge>
        <dc:hogehoge>hogehogehogehoge</dc:hogehoge>
    </metadata>
    <manifest>
        <item id="hogehoge" href="hogehoge" media-type="hogehoge"/>
        <item id="hogehoge" href="hogehoge" media-type="hogehoge"/>
    </manifest>
    <spine toc="ncx">
        <itemref idref="hogehoge"/>
        <itemref idref="hogehoge"/>
    </spine>
    <guide>
        <reference type="hogehoge" title="hogehoge" href="hogehoge"/>
    </guide>
</package>

<metadata>,<manifest>,<spine>,<guide>を<package>タグで括っている形です。

<metadata>内に出版物のタイトル、著者、出版日、記述した言語、コンテンツの識別子となる文字列とidなどを記載します。使用できる代表的な要素は以下。

• <dc:title>⇒出版物のタイトル
• <dc:creator opf:role=”aut”>⇒出版物の一次の作成者または著者
• <dc:publisher>⇒出版社
• <dc:date opf:event=”publication”>⇒出版日／eventに使用できるのは「creation」「publication「modification」など
• <dc:language>⇒出版物の知的内容を記述した言語／「ja」など
• <dc:identifier id=”issue” opf:scheme=”IRD”>⇒リソースを一意に識別するための文字列や数字／id 属性は必須

<manifest>内には出版物内で使用されているすべての画像ファイルやxhtmlを記述し、すべてにidを割り振ります。次に説明するtoc.ncxもここで指定します。使用できる要素は<item>。

• id=”hoge”⇒その構成ファイルを表すid
• href=”hoge”⇒その構成ファイルへのパス
• media-type=”hoge”⇒その構成ファイルのファイル形式／”image/jpeg”,”image/gif”,”application/xhtml+xml”など

<spine>内には実際のxhtmlファイルの表示順を記載するようです。<spine>で指定するidは<manifest>で指定したidと対になります。使用できる要素は<itemref>。

• idref=”hoge”⇒そのファイルの<item>で指定したid

<guide>は表紙になるxhtmlを指定するようです。

toc.ncx（必須）：epubファイルの目次を設定

出版物の目次を記述します。おそらくですがEPUBリーダーの目次機能で利用されるのではないかと想像しています。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN"
   "http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">
<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1">
    <head>
        <meta name="dtb:uid" content="hogehoge"/>
        <meta name="dtb:depth" content="1"/>
    </head>
    <docTitle>
        <text>hogehogehogehoge</text>
    </docTitle>
    <navMap>
        <navPoint id="hogehoge" playOrder="1">
            <navLabel>
                <text>hogehogehogehoge</text>
            </navLabel>
            <content src="hogehogehogehogehogehoge"/>
        </navPoint>
        <navPoint id="hogehoge" playOrder="2">
            <navLabel>
                <text>hogehogehogehoge</text>
            </navLabel>
            <content src="hogehogehogehogehogehoge"/>
        </navPoint>
    </navMap>
</ncx>

<head>,<docTitle>,<navMap>を<ncx>でタグで括っている形です。

<head>内のdtb:uidはcontent.opfで指定したidを設定します。dtb:depthはコンテンツ階層の深さを表すようです。（あるページの下に別のページがあるようなWebサイト的な構造の時に値を変える必要があるということ？調査不足。すいません。）

<docTitle>は<text>要素を使って出版物のタイトルを記述します。

<navMap>は出版物の目次となる内容を記述します。使用できる要素は以下。

• <navPoint>⇒その目次の項目にidを付与し、playOrderで目次の連番を振るようです。
• <navLabel>⇒<text>を使ってその目次のタイトルを記述します。
• <content>⇒その目次のページへのパスを記述します。

これで基本的なEPUBの形式が整うのではないでしょうか。制作の順で行くと、まずコンテンツをつくってしまってから、最後にこれらのファイルをつくると効率的っぽいですね。

最近考える作業が多く、脳に糖分が不足しがちなshimantoです。しばらくEPUB関連記事で攻めていきたいと思います。

EPUBの技術書がほとんど見つからないなので、手探りで調べていくしかない状況です。今回はEPUBファイルの構造を調べていきます。adobeの「サンプルebookライブラリ」で小説やノンフィクション作品などの、eBookや電子雑誌をダウンロードできるので、このファイルを調べてみましょう。

サンプルebookライブラリ

Alice’s Adventures in Wonderland をダウンロードしてみました。拡張子が「.epub」になっています。EPUBは電子書籍に必要なファイルがzip圧縮されたものです。「.epub」を「.zip」に変更して解凍すれば中身を見ることができます。

ファイルの構成は以下の通りでした。

• chapter01～12までのxhtmlファイル
• titlepage.xhtml
• style.css
• fontsディレクトリ
• imagesディレクトリ
• META-INFディレクトリ（中にcontainer.xml）
• Thumbnailsディレクトリ
• content.opf
• page-template.xpgt
• toc.ncx

ちなみにEPUB作成用エディタSigilでファイル作成した場合のデフォルトの構成は以下でした。

• META-INFディレクトリ（中にcontainer.xml）
• OEBPSディレクトリ
• mimetypeファイル
• OEBPSディレクトリ内に以下のファイルが生成されるようです。（各ディレクトリが空の場合、そのディレクトリは書き出されていませんでした。）
• Textディレクトリ（中にSection0001.xhtml）
• Stylesディレクトリ（中は空）
• Imagesディレクトリ（中は空）
• Fontsディレクトリ（中は空）
• Miscディレクトリ（中は空）
• content.opf
• toc.ncx

各ファイルの意味は下記ページに詳細が掲載されていました。「電子書籍 ePub電子書籍の作り方2 シンプル ePUB フォーマット ガイド」以下、抜粋してまとめます。

• mimetype（必須）：「俺はEPUBファイルだ」と宣言するファイル
• META-INF（必須）：container.xmlを格納
• container.xml（必須）：content.opfの位置を指定
• content.opf（必須）：epubファイルを構成するファイルへのパスとファイル名を記述。タイトルとかmetaデータとかドキュメントのリストとか。
• toc.ncx（必須）：epubファイルの目次を設定

その他設定できる項目は以下。

• fonts：ドキュメントで使用するフォントデータ
• thumbnails：リーダー等で表示される書籍のサムネイル画像

配布できるフォントがあれば指定できるということでしょうか。Webフォントの流れもありますし、フォントの使い方は幅が広がりそうです。Miscディレクトリはおそらく、音楽ファイルや動画ファイルを格納する場所ではないかと推測します。

コンテンツの作成は基本的にはHTML+CSSなので特に問題はなさそうですが、mimetypeやMETA-INFなどのEPUB独自の必須ファイルの設定を抑えることが先決になりそうです。

2011.4.27追記：
@lost_and_foundさんのご指摘を受け、toc.ncxを必須に変更しました。EPUBの仕様書を日本語化されてまして、そちらで確認させていただきました。ありがとうございます。
日本語化された仕様書は@lost_and_foundさんのブログからアクセスできます。

年度末の長いトンネルをようやく抜けようと最後にもがいているshimantoです。

EPUB３.０のドラフトがいつの間にか発表されていて、なんと５月には正式版が完成予定とか。。。もがいている間に話題に取り残されてしまった感があります。日本語に対応できていなかったことで、これまで日本ではあまり盛り上がっていなかったEPUBですが、夏に向けて燃え上がりそうな気がします。

EPUB３.０で縦書き・日本語対応が注目されていますが、私が注目している理由は以下の２点です。

• ビデオやオーディオ などのリッチコンテンツに対応

JavaScript（一部だとは思いますが）にも対応するとも風のうわさで聞きました。紙媒体と明確な差別化が図れます。我々WEB屋が蓄えてきたノウハウをそのまま活かした提案・企画を提供することができるということが非常に大きいメリットです。

• HTML５とCSS３がベースなので特別な技術を覚える必要がほとんどない

おそらく電子書籍化の波に逆らうことはできません。これまで紙が中心だった方々は、業界自体の大きな変化の中で、これから電子書籍のノウハウ・WEBの知識を得ていかなくてはいけませんので大変な状況なのではないかと思います。逆に我々WEB屋は基本的な技術を既に持っています。また、デバイスに対してのリッチコンテンツ提供の概念も長年培われたものがあります。これは非常に大きなアドバンテージです。

不明瞭な点は多々あるのですが、個人的には非常に注目しているところなので、今の間にしっかり勉強しておきたいですね。

参考：
WebとE-Bookの融合を進めるePUB 3最終段階（EBook2.0 Magazine）
EPUB3.0の最新状況レポート（Impress Innovation Lab.）
epubcafé

徐々にその地位を確立しつつある電子書籍ですが、フォーマットやらデバイスやらが乱立してて良く分からないので、覚え書きとして自分なりにまとめてみました。

■フォーマットについて

電子書籍として読むことができる代表的な仕様は下記になるでしょう。

EPUB
・・・電子書籍の標準化団体IDPF（http://www.idpf.org/）によるフォーマット。海外においては事実上の標準と考えられる。
iPad/iPhone,Google eBook,Sony Reader,Nook  など

AZW
・・・Amazon のフォーマット。 Kindle Store 専用と言ってよいと思う。
Kindle

PDF
・・・今さら説明は不要ですね。電子書籍の流れで、また最近脚光を浴びてきました。
Adobe Reader など

Apps
・・・各アプリのことです。日本含め、多くの電子書籍購入サービスで独自のアプリが開発・配布されているようです。各々に対応したアプリのダウンロード・インストールが必要です。

SWF
・・・Flash で作成されたファイル。本のメタファーで制作されていることが多いようです。
Flash Player

●日本独自の仕様として

XMDF
・・・シャープ（株）（http://www.sharp.co.jp/）が開発したフォーマット。ブンコビューアというソフトが必要。シャープ製品には大体入っている。
電子出版とXMDF技術（PDFファイル）

.book
・・・（株）ボイジャー（http://www.voyager.co.jp/）が開発したフォーマット。専用のビュワー「T-Time」が必要。

■各フォーマットの閲覧について

代表的なデバイスから閲覧可能なフォーマットを表にしてみました。

※独自調べなので間違ってたらすいません。※1携帯電話系は機種により機能が異なるのですべて適用される訳ではありません。

■PCで各フォーマットを確認する方法

PCで各フォーマットを閲覧したい場合は、それぞれ下記のようなリーダーをインストールすれば閲覧可能です。代表的なソフトを集めました。

EPUB・・・EPUBReader（Firefoxのアドオン）／Adobe Digital Edition

AZW・・・Kindle for PC

PDF・・・Adobe Reader

XMDF・・・ブンコビューア

.book・・・T-Time

■EPUBに注目！

EPUBやAZWが日本語に対応していないため、日本ではXMDFや.bookなどの独自のフォーマットかAppsやSWFでの配信が主流になっています。しかも、XMDFや.bookは法人契約・利用料金が必要らしいです。EPUBはXHTMLとCSSベースのフォーマットなので（新しい技術を一から覚える必要がない！）、WEB制作者なら、非常に馴染みやすいのではないでしょうか。EPUBの次のバージョンが文字の縦組み／日本語対応になるのではないかという情報もあるので、そうなれば一気に広まる可能性が高いですね。

EPUB作成には Google が無償で配布している「Sigil」というソフトがあるので、まずはこれで色々作ってみると面白いのかなと思います。

制作の時の留意点とか色々あるようなので、機会があればまとめてみたいと思います。

1歳を過ぎたの子どものために歌ってる「みんなの歌」に自分がはまってしまってるshimantoです。

字面だけみると当たり前のことですが、自分の行動を改めて振り返ると当たり前のことが実践できていないことが良く分かります。

「かばんはハンカチの上に置きなさい」という本を最近読みました。生命保険会社のトップセールスマンの方が書かれた本です。私はディレクターなので営業ではありません。しかし、直接お客様に接して、お客様のために提案から納品までを行いますので、やることは違えども仕事への姿勢としては営業に通じます。最近自分の中で、御客様に対しての対応が緩くなってきているなという自覚があり、まずいなぁと思っていたときに出会った本でした。その中でタイトルのような意味のことが随所にでてきました。

「私は訪問者であっても『お客様』ではありません」

今の自分に一番響いたのがこの言葉でした。お客様にとって、我々はお客様ではなく、訪問者に過ぎない。卑屈になるのではなく、相手を尊敬する。すべての中心にお客様を置いて考えれば、何を求められ、どのように行動し、どのように接するべきかが見えてきます。日々の仕事の中で心の中に積み重なっていた、気持ちの整理がつかないモヤモヤした霧のような部分がパッと晴れたような気がしました。

お客様と直接接する機会が少ない制作の現場でも、クライアントを中心において取り組めば、サイトの設計、デザイン、コピー、HTMLの書き方など、あらゆることにおいて少しづつ違ったものが現れてくると思います。

これ以外にも、この本には仕事に対する大切なことがたくさんちりばめられていて大変参考になりました。