【更新】東北地方太平洋沖地震の義捐金等受付先まとめ – LifeHacker
http://www.lifehacker.jp/2011/03/post_1701.html

EPUBとは？

EPUB（いーぱぶ、electronic publication）は、米国の電子書籍標準化団体の1つであるInternational Digital Publishing Forum（IDPF）が普及促進するオープンな電子書籍ファイルフォーマット規格。ネット上では「epub」「ePub」などと表記される場合もある。そのオープン性と単純さから、対応する電子書籍ハードウェアや電子書籍アプリケーションは多い。- Wikipediaより

EPUBファイル作成ツール

• sigil・・・テキストベースの書籍向け。
• ChainLP・・・コミックや雑誌など、画像をスキャンする書籍向け。

EPUBのファイル構造

EPUBの.zipファイルを解凍すると、こんな構成になっています。

mimetype

必須ファイル。zip圧縮されたePubであることを示す。

META-INF

必須フォルダ。container.xmlを含む。

– container.xml

必須ファイル。content.opfのファイル名とパスを指定。

content.opf

必須ファイル。ePubファイルを構成するファイルのパス

– toc.ncx

任意ファイル。epubファイルの目次

page001.xhtml

任意ファイル。コンテンツページ

style.css

任意ファイル。CSS フォント埋め込み指定

cover.jpg

任意ファイル。画像ファイル

XMLや使えるHTMLタグのフォーマットについてはこちらを参考に。

■Open Publication Structure (OPS) 2.0 v1.0
Open Publication Structure (OPS)日本語訳

■Open Packaging Format (OPF)
OPF 2.0 v1.0 日本語訳

■OEBPS Container Format (OCF) 1.0
OEBPS Container Format (OCF) 1.0

.epubファイルを作成する

上記のXHTMLや画像を編集したら、zipファイル化します。
しかし、「metafileがZIPファイルの最初のファイルで、しかも圧縮されてないことが条件。」
が、通常の圧縮方法ではできないので、cleanarchiverというツールを使ってzipファイルを作ります。
※gzipではなく、zip形式を選択します。

ファイル拡張子を「.zip」→「.epub」に変換します。

iBookにいれてみる。

iTunesのBookに、つくったepubを放り込んでみます。

こんな形で、書籍形式になりました。

ePubの問題点

-Wikipediaより抜粋

仕様上の問題

• 縦組みを指定することはできない（縦中横も当然できない）。
• 圏点を指定することはできない。
• 割注（本文一行に小さな文字で二行詰め込まれた注）を指定することはできない。
• 漢文の返り点を指定することはできない。
• これらの問題点は、EPUB 2.0.1のベースとなっているXHTML1.1とCSS2に起因する。現在、HTML5とCSS2.1及びCSS3の一部機能を用いてEPUB 3.0を制定する作業が行われており、2011年5月に完成を予定している。
• 縦組み、縦中横、圏点は、EPUB 3.0で対応することが予定されている。

実装上の問題

• ルビの実装は知られていない。
• 禁則処理などの処理が実装されていないことがある。
• 正字（たとえば、「嘘」や「頬」や「湮」の正字）をうまく出せない実装がある。
• ────　のような直線を連続させたとき、この直線が繋がって見えない実装がある。
• 繰り返し記号（　く　を縦に細長くした記号：縦書きのみ）を表示できない実装がある。

これらの問題点は、閲覧ソフトが対応すれば解決する問題である。

ePub3.0のタイムライン

revision timeline and milestones

• June 15 & 16, 2010: Kickoff F2F
• June 24: Subgroup requirements: start
• July 23: Subgroup requirements: submission to WG
• August 27: Subgroup requirements: finalization
• August 27: Subgroup implementation proposals: start
• August 27: FWD production: start
• October 18-20: San Francisco F2F
• October 20: Subgroup implementation proposals for first draft: finalization
• October 29: First Working Draft
• November 30: Second Working Draft
• December 23: Public Draft
• January 28, 2011: Draft standard for trial use
• May 15, 2011: final specification

所感

ePubは簡単なので、導入は簡単ですが、文書構造以外のことはあまりできないので、紙媒体に対してのアドバンテージは、販売PF以外あまりない印象です。
HTML5/CSS/JSがサポートされると、よりインタラクティブなコンテンツが出来ると思いますが、そうなると、ePubというフォーマットとはページの概念と、ビューワーとの相性ぐらいになって、全部Webコンテンツになるのかな、と感じました。

11 月 25 日 (木) /26日(金)@ザ・プリンス パークタワー東京
Professional Developer Conference 10 Japan (PDC 10 Japan)に行ってきました。

User Experienceの方のセッションに参加してきました。
２日目は、SilverlgihtとIE9に関するセッション
※一部、編集中となります。

11/26(金）

UX4 　つながる、取り込む、活用する

組み込み系エバンジェリスト　太田寛さん

□Any Device and Every Where
　すべてのデバイスがネットワークにつながる　データ連携／ネットワーク

・Windows 7
・Windows Embedded CE(Windows Phone OS)
・ .NET Micro Framework

The .NET Micro Framework is .NET for small and resource constrained devices. It offers a complete and innovative development and execution environment that brings the productivity of modern computing tools to this class of devices.

デモ）
・Continua health Device 体重計のデータをクラウドへ、.NET Micro Frameworkで表示。
・ドライヤーのデバイスデータ（ワット数、電力とか）を.NET で作ったUIで表示

・C#での、データグリッドのデモ　SOAP→RESTが主流
・「Tech Fielders センサー クライアント　クラウド」
・Sync Frameworkによるデータ通信

UX5 ここまでできる HTML5 with Internet Explorer 9

鈴木章太郎さん: http://blogs.msdn.com/b/shosuz/
Silverlightをずっとやってきた。

http://www.theshodo.com/

・HTML5はWebの未来
・IE9とVisual Studio / Expression WebでHTML

HTML５を適材適所に

・IE9β
高速
　　JSエンジン　チャクラ　GPU-Powered HTML5
　洗練
　　
　信頼、
　相互運用
　　W3C HTML5/CSS3/DOM/SVG/ECMA Script/WOFF

□HTML5構築ツール
　VS2010 Web Developer Express Edition 無償
　インテリセンス
　SVGタグ　VSでエディットできる
　Expression Web 4 – HTML5

IE8 F12 起動

□HTML5 リッチなUI
canvas
Video
Audio
セマンティック要素

□文書構造

□video/audioのデモ

□Canvas
JS 2D ブロック要素
アニメーション2種類
FrameBased:オブジェクト
TimeBased:オブジェクト

□SVG
1.1.2 Edtionに対応

□CSS3
Media Query
角丸程度

□ECMAScript 5th Edition
ECMA-262 Standard をサポート
indexOf lastIndexOf forEach eery

中国国家博物館のデモ

□フォーム要素、リッチ要素
フォーム　ブラウザ依存
リッチテキスト編集用API
contentEditable属性　designModeプロパティ
execCommmand() API
デモ
divタグが編集できるようになる

□ドラッグ＆ドロップ
画像のドラッグ＆ドロップのデモ
親プロパティに伝搬しないコツ

UX6 SilverlgihtのことをメディアとRIAから語ります。

UX6-1 IIS Media Services

・田辺茂也さん

・動画配信
　アダプティブストリーミング
　スムーズストリーミング
・Expression Encoder 4
WindowsAzure IIS Media Serviseのモジュール追加
iOS(iPad)にも配信できるデモ videoタグで実装

UX6-2.Silverlight RIA 最新情報

・大西彰さん

・PDC10 メディアプレーヤーの内側
US本社

http://player.microsoftpdc.com/schedule/sessions

1000人いたので、配信した。

・スクリーンが２つ Silverlightベース
・同時通訳、メニューから日本語だけでなく選べる
・Twitter連携、Live中のQ＆A対応
・Windows Azure上にホスト
・CDN企業とスケールアップ

・Expression Blend 4 SP1 – WindowsPhone対応　Adobe FXG対応

□RIA開発の課題1
従来型の開発じゃ駄目
設計して、詳細設計のウォータフォールでは、アジャイルに対応できない。
いいデザイナーがいるから解決できる、Developerがいらないというわけではない。
プロトタイプを試しながら進める。

Sketch Flowの実演

VisualStudioしか使ったことがないDeveloper向けの
BlendとXAMLの説明。

Blend サンプル
・開発者が先にViewモデルを作る
・スケルトンをデザイナーに渡して構成要素や肉付けを行う。
・先にデータ入れた画面を渡すことで、デザインがやりやすくなる。

□RIA開発の課題2
クライアント・サーバー両方デバッグできるようになる
WCF RIA Service 1.0 SP1 Beta

・Silverlight 今後

イベント名 : Silverlight Firestarter

日時 : 2010年12月2日(木) 9:00～ (米国西海岸時間)
　　　
日本時間の2010年12月3日(金) 深夜2時開始です。

http://blogs.msdn.com/b/ttanaka/archive/2010/11/17/silverlight-firestarter-silverlight.aspx

11 月 25 日 (木) /26日(金)@ザ・プリンス パークタワー東京
Professional Developer Conference 10 Japan (PDC 10 Japan)に行ってきました。

User Experienceの方のセッションに参加してきました。
１日目は、Windows Phone 7アプリ開発に関するセッション
※一部、編集中となります。

11/25（木）

UX1 ついに公開! Windwos Phone 7 知っておくべき開発の心得

エバンジェリスト：田中達彦氏　ブログ

目指しているもの

・デザイン：ユーザ最優先
・プラットフォーム：よりリッチでシンプルなアプリを簡単に
・ハードウェア：よりスピーディな開発

デザインコンセプト

コードネーム：メトロ
・地下鉄　ある人が目的を目指す→いかに簡単にたどり着けるかを提供
・東京の地下鉄わかりづらい　色分けたり、デザインで工夫
・ユーザーのやりたいことをすぐ実現できるように。

デモ

届いたばかりという、HTC HD7で実演。Windows Phone 7初めて見ました。
・LandScape/Portrait対応はしている模様。
・基本的なタッチジェスチャーの概念用語は、iPhone同様
・ハードウェアキー３つ　スタートボタンでホーム画面に戻る

ユーザーの決定タイミングで動作するUIが望まれる（イベントドリブン）。

ライブタイル

・iPhoneでいうホームスクリーンにリッチなUIをのせられるので、アプリを作る際の見せ所
　Androidのウィジェットみたいなものか。

ハブ

・複数の情報がまとまった情報ポータル
　　・アプリからではなく目的志向
　　・柔軟性
　　　カスタマイズ可能　
　　　クラウドとの連携
　　横スライド時の動きが独特

特徴的なコントロール

パノラマ
・絵巻のようなUI
・ハブでも採用

ピボット
・タブ切り替え＋パノラマ形式

ハードウェア用件

・800×480 480×320　この二つに固定！
・４ポイント以上のマルチタッチ
・A-GPS 加速度センサー　電子コンパス、焦土
・カメラ
・マルチメディア　コーデック対応
・メモリ　２５６MB以上　８GBのフラッシュROM
・GPU DirectX 9
・CPU ARM Cortex Scropion 以上
・ハードウェアボタン　Back, Start, Search

以上の要件がWindows Phone 7 必須！
デバイス差異をなくして開発負担を回避している（ありがたい！）
　

アプリケーションプラットフォーム

1. Silverlight

・XAML/イベントドリブン型アプリケーションのUIフレームワーク
・UIロジック分離
・メトロ対応コントロール
・PC共有

2. XNA

・FPS(Frame Per Second)
・２D／３Dゲームを開発
・XBOX360 Windows, Zune, PCでの実績
・メディア再生、入力など

開発イメージ

・Visual StudioでPJ生成時、
　 Silverlight fro windows phone から、デザインパターンを選択（パノラマとかピボットとか）
・コントロールがメトロ対応、ボタンイベントなどは、Silverlightと同様。

【特徴】
・設定のテーマで、dark/lightを選べ、カラー変更すると、フォントカラーとタイルの背景色、コントロールのカラーが変わる。（デフォルト？XAMLで指定？）
・アイコンやデザインの際に注意が必要。

XNA
FPS(30 WindwosPhone7 デフォルト) Spirte

マーケットプレイス

様々な分野　”try” or “buy”　トライアル版と、製品版をひとつのバイナリに入れられる。
　
□App Hub
http://create.msdn.com/ja-JP/

□WindwosPhone向けに提出
・アプリ申請、アプリパケッケージング＆確認、メタデータ入力、審査、サイン
・年間登録費99$
・アプリの申請日
・有償：アプリ数に関わらず無償
・無償：５アプリまで無償　それ以降　$１９．９９/アプリ

・70%収入シェア
・トライアルAPI
　１つのバイナリでどちらも対応
　使用期間は自分で決められる
　有償、フリーミアム、広告サポート、無償

・アニメーション、Windows Phone7規定のものがある
・オリジナルアニメーションは、Blendで作る必要がある。

関連リンク

アプリ&ゲームの投稿 http://create
Windows phome デベロッパーセンター
http://msdn.microsoft.com/ja-jp/windowsphone/default.asp

Windows Phone Blog
Silverlight Viedo REsources
Wp7 Training Kit

□おまけ）Windows Phoneアプリケーション開発入門

http://gihyo.jp/dev/serial/01/windows-phone/0010

UX2 カンタン、ハヤイ、キレイ！　WindowsPhone7アプリケーション開発

ここでは、アプリケーションプラットフォーム一つ目である、Silverlightでのアプリ開発について。

高橋忍さん
日本版Windows Phone ７ スケジュールは未定だが、順調に開発は進んでいる

Silverlight for Windows Phone

・ほぼ、Silverlight3で間違いなし。　
※メディア再生は１個に限られる。などプラットフォームの制約はある。
・開発環境は無料、ダウンロード提供 全パッケージ入り。
・Blend/VS 日本語版はExpression Editionが入る

Windows 版と WP7 版の Silverlight の違い
MSDNより）
・Differences Between Silverlight and Silverlight for Windows Phone
・Features Supported in Silverlight for Windows Phone
ブラウザでのサポートがない、通信方法等は制約がある、高機能言語系はまだサポートされていない

デバイスエミュレーター

・センサーとかハードウェア関連は非対応
・F5でインスタント起動
・GPUエミュレーション
・画面の回転、サイズ変更、スキン

ポーズキーを押すと、ソフトウェアキーボドを閉じて、PCから文字入力できる。

Silverlight Tweeterクライアントデモ。

→詳しくはブログで
・特定の人のTweetをとってくる
・Blendのデバイスでのテーマで　確認できる。　プレビュー先がエミュレーターなど
・ListBoxコントロールを使って、レイアウトを整形　 StackPlnelで。
・フォントカラーの色リソースを　PhoneAccentcolorで、ユーザーのテーマカラーを反映。
・ユーザーの設定色か、固定色か選べる
・アプリの最初のページに戻る、を押すと　アプリの終了
・基本、Blendは一緒、コントロールと画面の制限があるというイメージ。

ナビゲーション

・フレーム
　最上位のコンテナコントロール
　PhoneApplicationFrameクラス
・ページ
　フレーム内のコンテンツエリア
　PhoneApplicationPage派生クラス
・ページナビゲーション
　画面の移動＝ページの変更
　NavigatedTo / NavigatedFrom

ハードウェアキーの戻るとの関係性が重要。

　WP7では、テンプレートでLandScape/Portraitは固定してしまったほうがいい。

ページ遷移は２通り

1. HyperlinkButton
　　navigateurl /Page1.xaml　に遷移。

　2. NavigationService.Navigate(new Uri(“/Page1.xaml”, UnKind.Relative));

戻る履歴は永遠に残るので注意!

・Storybordで、画面遷移のアニメーションエフェクトが作れる　

Pivot / Panorama

・ ストレスのないページ間移動を実現するコントロール
・画面サイズの小ささをカバーするUIテンプレート
・パノラマは広告ストレスを軽減するw
・ピボット、パノラマは画面遷移じゃなくて、コンテンツ内切り替えなので戻るボタンでは戻れない。
　・戻るボタンで終了されたら困る場合、イベントフックして、ほんとうに終了していいですか？
　　を表示させることができる。
　・クラウドとPUSH配信に対応　LiveTitleに表示
　　Wether Notification Server
　IEの天気更新→アプリへ天気データ
　　タイルの更新はローカルでも可能。
　・中断と再開　
　　WP7では動作するアプリは１つ
　　背面のアプリは停止、戻ると再開する
　　イベントが発生するので、データ退避する必要がある。
　・４つのイベント
　　起動、中断、再開、終了

　Programming
　Charles Petzold氏の１０００pageが、フリーでPDFで落とせます！
http://www.charlespetzold.com/

UX3 XNAがスマートフォンにやってきた！Windows Phone 7 のXNAゲーム開発

XNA4.0

・ゲームを作ろう
・3Dグラフィックス
・最適化

XNA4.0 fpsゲーム用アプリケーション用フレームワーク

Compact Framework3.7ベース
・Windwos Phone 7
・XBOX 360
・Windows 7 / Vista

XNA4.0 コードには２つのプロジェクト

・コード用
・コンテンツ用 画像や３Dモデルを読み込む

オーバライドメソッドは４つ

initialize()
loadContent()
Update()
Draw()

画像フォーマット

・DXTフォーマットはフットプリントが小さい。
・GPU内でデコード
・コンテンツプロセッサ
　・テクスチャフォーマット
　　・任意の画像フォーマットをビルド時に、DXTに変換

・GC(ガベージコレクション)
　・１MBごとに約１０ミリ秒
　・メモリを１MB確保するたびにGC
　・GCを動かさないようにコーディングする。

・Windows Phone 7 Development Best Practices Wiki V0.1
　http://wp7dev.wikispaces.com/
　Windows Phone 7 のための新しい情報ポータルとして新しいWikiが公開されています。

jQuery Mobile
http://jquerymobile.com/

スマートフォンやタブレットデバイス向けに開発されているJavaScriptフレームワーク。
iOS、Androind、Blackberry Torch v.6、Palm WebOS Pre/Pixiなどに対応。

デバイスに最適化されたWebアプリを届けたい – jQuery開発者John Resig氏 – マイコムジャーナルより

jQuery Mobile Alpha 2が公開。
大幅なバグ修正、機能拡張、性能改善が実施されたバージョン
※動作にはjQuery 1.4.4が必要。

• jQuery Mobile全体の品質を向上
• 多くのサブシステムを書き換え
• クロスブラウザ互換性品質の向上

2. デモ

こちらから、実際のデモを閲覧できます。
http://jquerymobile.com/demos/1.0a2/

3. 対応環境

各プラットフォームと、ブラウザ対応状況は、こちらから。

Mobile Graded Browser Support
http://jquerymobile.com/gbs/

特に、ネイティブと、PhoneGapとの相性がいいですね。

4. ダウンロード

jQuery Mobileを使うには、下記のホストされているファイルを組み込むか、

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

もしくは、こちらからhttp://jquerymobile.com/download/

※jQuery1.4.4が必要なので、なければこちらからもDLします。
http://docs.jquery.com/Downloading_jQuery

さて、これを組み込んで、
画面遷移、ボタン、スライダーを試してみました。

サンプルURL
http://splitchin.com/sample/iPhone/jquery-mobilea2/

※SafariかChromeで閲覧してください。

個人的には、senchaフレームワークより、扱いやすかったです。

1. シミュレーターを起動する

パス結構深いです。
「Macintosh HD」→「Developer」→「Platforms」→
「iPhoneSimulator.platform」→「Developer」→「Applications」
→ iPhone Simulator

2. シミュレーターの種類

3種類、シミュレーターが入っています。
・「iPhone」320×480　アスペクト比3:2（3G/GS）※実機は、163ppi
・「iPad」1024×768 　アスペクト比4:3 ※実機は、132ppi
・「iPhone4」960×640　アスペクト比3:2　※実機は、326ppi

3. iPhone4 Safariを起動してみる。

iPhone最適化されたページも、
テキストやレイアウトは高精細モードに対応してますね。
ただ、画像やアイコンは荒くなりますね。

ホームスクリーンのアイコン

iPhone用の52pxと、恐らくiPhone4用に最適化された
高精細モードのアイコンとでは、画質に差が出ますね。

これは、Retinaディスプレイ3.5inch,
iPhone3Gモデルのディスプレイの4倍に当たる326 ppiで
見るとどうなるか、実機で見てみたいですね。

とりあえず、環境テストを兼ね、AndroidでHello Worldを試してみます。
ちなみに、環境はMac OSXでの履歴です。

1. Eclipseを起動し、「New」-「Project」を選択します。

2. Android Projectを選択し、プロジェクト情報を入れます。

3. 左メニューから、「HelloWorld」-「src」- 「jp.android.helloworld」のHelloWorld.javaファイルを探して選択します（プロジェクト設定によってファイルパスは変わります

HelloWord.javaを以下のように書き換えます。

//HelloWorld.java
package jp.android.helloworld;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView; //文字列を表示するためにのTextViewオブジェクト

public class HelloWorld extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //TextViewクラスのインスタンスを作成。
        TextView show = new TextView(this);
        //showのテキストをHello World!!にセット
        show.setText("Hello World!!");
        //showを画面に表示
        setContentView(show);
    }
}

4.「Run」-「Android Application」を選択します。エミュレーターが起動します。（起動に割と時間がかかります）

5. 左下の「Menu」を押してロックを解除すると、HelloWorldが表示されます。

これで、AndroidのHelloWorldは完了です！