[3229] EPUBデータを作ってみよう! 〜ちょっと濃いめの話〜

投稿:  著者:  読了時間:23分(本文:約11,300文字)


《アニメが盛んな日本に生まれて幸せです。(^^)》

■明日もデザインで食べていこう![31]
 WebデザイナーでもiPhoneアプリを!──はじめてのTitanium Studio(2)
 秋葉秀樹

■クリエイター手抜きプロジェクト[310]FinalCut Pro 7編
 オリジナルのフィルタを作る(1)
 古籏一浩

■講師だって、最初は初心者だもの[番外]
 EPUBデータを作ってみよう! 〜ちょっと濃いめの話〜
 森 和恵

--PR------------------------------------------------------------------
★吉田印刷所が電子書籍販売サイト「印刷の泉」をオープンしました
https://www.ddc.co.jp/estore/ ≪≪≪

刷 ●オリジナルの電子書籍・デジタルコンテンツを自由に販売可能
の ●販売価格は50円〜設定可能なので小さなコンテンツでも対応可能

★デザイン・印刷・製本・DTPなどの印刷関係コンテンツ専門のサイトです
-----------------------------------------------------------------PR---




━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■明日もデザインで食べていこう![31]
WebデザイナーでもiPhoneアプリを!──はじめてのTitanium Studio(2)

秋葉秀樹
< http://bn.dgcr.com/archives/20120319140300.html >
───────────────────────────────────
こんにちは、秋葉です。さて、前回は初めてTitanium Studioを使ったiPhoneアプリを起動させることにトライしました。今回は、iPhoneとサーバ上のPHPに文字列をやりとりすることににチャレンジしましょう。

●iPhoneからPHPに文字を送信する

私たちWebデザイナーであれば、form要素を使ってお問い合わせフォームを作ったことがありますよね? 例えばこんな感じです。
<form action="xxx.php" method="post">

これでsubmitボタンが押されたらxxx.phpにフォームの情報が送信されます。このようにWeb上のデータをPHPに送信する感覚で、iPhone内のデータをPHPに送信します。

上記の例以外に、最近ではAjaxというJavaScriptで非同期にサーバへ送受信することがよくあります。

そして今回iPhone⇄PHPの流れはAjaxとほぼ同じだと思ってください。ページ遷移なく、iPhoneからPHPに何かを送って、さらに返答をiPhoneで受け取る。ページの内容をダイナミックに切り替えることも出来るんです。

つまり、こちらから文字列を送って、PHPから返事の文字列をもらうこともできます。まずはそのサンプルを作ってみましょう。

このアドレスにアクセスしてみてください。
< http://akibahideki.com/digicre/120317/index.php >

ページには「をPHPが受け取りました!」と出るはずです。

このPHPでは、iPhoneから送られてきた文字をくっつけて
「(iPhoneから送られてきた文字列)+をPHPが受け取りました! 」
という目的で作りました。

ではPHPはどう書かれているかというと、とてもシンプルです。

【index.php】< http://akibahideki.com/digicre/120317/index.php >
<?php
header("Content-type: text/html; charset=utf-8");
$msg = $_POST["name"];
print($msg."をPHPが受け取りました!");
?>


これだけです。
「header...」と書かれている部分には、文字エンコードをUTF-8にしないと文字が化けることがあるので、その対策です。
基本的には$_POSTには「配列」とよばれるデータが格納されます。これは複数の情報をワンセットで送られるので、分かりにくい方は以下のようにとらえてください。

例えば、フォームでは、

名前:秋葉秀樹,
性別:男性,
住所:大阪

というように、複数の情報が、「キー:バリュー」のセットで送られますよね?
上記の例では3つの情報が「キー:バリュー」のセットで送られます。
これをJavaScriptっぽく書くと、

{
name: "秋葉秀樹",
sex: "男性",
address: "大阪"
}

のように書きます。:で区切っているところはCSSっぽいですね。
今回はiPhoneからPHPにnameだけを送ってみましょう。

それでは前回まで使ったapp.jsをTitanium Studioで立ち上げ、最終行に以下のコードを入力してみましょう。

【app.js】
var xhr = Ti.Network.createHTTPClient({
onload: function (e){
alert(this.responseText);
}
});
xhr.open("POST", "http://akibahideki.com/digicre/120317/index.php");
xhr.send({name:"秋葉秀樹"});


うまくいったら結果は以下のようになります。

nameで送った文字列をPHPが受け取り、文字列をくっつけて送り返されたTitanium Studio側でalertしてます。
onload: function (e){
alert(this.responseText);
}
の部分が、PHPからの返答を受け取る事に成功したときに処理されます。
this.responseTextがその文字列を表示します。
【図版1 < http://akibahideki.com/digicre/120317/fig01.png > 】

●エラー時の処理も忘れずに...

さて、今回は文字列を送受信する方法ということで、Ajaxみたいな感覚でiPhoneからPHPと非同期通信をしました。
場合によって、接続に失敗したときの対策も必要になるでしょう。
ここでは5秒以内に通信ができなかったり、そもそもネット回線が切れていたらアラートを出すことにしましょう。
下記のコードではon errorとtimeoutを追加しています。

【app.js】
var xhr = Ti.Network.createHTTPClient({
onload: function (e){
alert(this.responseText);
},
onerror : function(e) {
alert('接続エラーが起こりました');
},
timeout : 5000
});
xhr.open("POST", "http://akibahideki.com/digicre/120317/index.php");
xhr.send({name:"秋葉秀樹"});


オフライン状態にして(ネットを切って)上記のコードで実行しましょう。
以下の結果になるはずです。
【図版2 < http://akibahideki.com/digicre/120317/fig02.png > 】

以上です。
なんだか思ったより少ないコードで書けたと思います。
さて次回は、位置情報を取得して、サーバに結果を残すところまでやってみたいと思います。それではまた。おつかれさまでした!

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

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

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト[310]FinalCut Pro 7編
オリジナルのフィルタを作る(1)

古籏一浩
< http://bn.dgcr.com/archives/20120319140200.html >
───────────────────────────────────
今回は、FinalCut Proでオリジナルのフィルタを作成してみます。と言っても書いている本人も勉強しながらなので、おかしな部分もあるかもしれません(理解しきれていない部分は多々ありますので......)。

おまけに、すでにFinalCut Pro Xがでているという状況なので、このネタを出すタイミングを間違えたかも、と思ったりもしてます。が、FinalCut Pro Xは以前のバージョンとはまったく別もので、簡単に乗り換えることができない人も多いかと思います。

それはともかく、FinalCut Pro 7やそれ以前のバージョンを使っている人も多いでしょうから、何らかの役に立つかもしれません。

ということで本題に入ります。まず、FinalCut Proでフィルタ処理を行う場合には、ツールメニューからFXBuilderの項目を選択します。すると、FXBuilderテキストエントリというウィンドウ(タブ)が表示されます。

ここにスクリプトを入力します。ここで入力するのはFXScriptと呼ばれています。FinalCut ProのフィルタでもFXScriptで作成されているものが多くあり、FXBuilderで開いて中身を見ることができます。

それでは、簡単なところから作ってみましょう。とりあえず緑の四角を描くスクリプトを作成します。実際のスクリプトは以下のようになります。


scriptid "GreenRect"
filter "緑の四角";
group "自分のフィルタ";

code
point rectPoint[4];
MakeRect(rectPoint, -50, -50, 100, 100 );
FramePoly(rectPoint,dest, kGreen ,10 );


FXScriptは3つの部分に分かれています。1つ目がフィルタのカテゴリや名前を指定するヘッダー部分、2つ目が入力値を指定するスライダーなどUI部分、3つ目が実際のコードになります。上記の場合はUI部分がないのでヘッダーとコード部分の2つになります。

まず、ヘッダー部分ですがscriptidにはフィルタの固有の名前を割り当てます。次のfilterには、エフェクトウィンドウ上に表示されるフィルタ名を指定します。groupにはフォルダ名(カテゴリ名)を指定します。既存のカテゴリを指定することもできますし、新しいカテゴリ名を指定することもできます。

ヘッダー部分が終わったら以後が実際のプログラムコードだ、ということを示すcodeという1行を書きます。これで以後に続く内容がプログラムだと解釈されます。

さて、緑の四角を描くには(x1,y1)-(x2,y2)と4つの座標点が必要になります。この点を入れておく容れ物を用意します。座標点はpointの後に変数名を必要な座標点の数を指定します。

用意した点に座標を入れるにはMakeRect()を使います。これはまとめて四角形の座標を設定できる命令です。最初のパラメータに変数名、以後は(x1,y1)-(x2,y2)の順番で座標点を指定します。なお、原点は映像の中心になっており、右下にいくに従って座標値は大きくなります。

最後にFramePoly()を使って四角形を描きます。最初のパラメータに座標点がある変数を、2番目が四角形を描画する先、3番目が描画する色、最後が線の幅になります。

ここで、いきなりdestとkGreenという変数名がでてきます。これらはあらかじめFinalCut Pro側で用意(定義)されているものです。destは表示されている映像を示しています。つまり映像上に描画する場合にはdestを指定すればよいことになります。

kGreenのように小文字のkで始まる変数名は、多くの予約語があります。kの後に色の名前を指定することができます。kRedなら赤、kWhiteなら白色を示すことになります。

無事に入力が終わったら、コマンドキーとKキーを押してください。小さいウィンドウがに緑色の四角形が表示されるはずです。スクリプト中の数値や色名などを変えてみるとよいでしょう。

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

New iPadネタにしようと思ってましたが、届くのが月曜日ということで一年以上前に書いた原稿を引っ張り出してきました。New iPadは1080pなので、ハイビジョン映像素材の60pのページにアクセスが増えるかなと思いましたが、特に増加傾向なく平穏無事にサーバーが動いてます......。

・毎度おなじみASCII.jpの連載
「Googleマップ有料化でYahoo! APIを使ってみた」
< http://ascii.jp/elem/000/000/677/677027/ >

・クリエイター手抜きプロジェクト【2011年分まで用意しました】
< http://www.openspc2.org/projectX/ >

・新標準HTML5 & CSS3辞典【少しだけお手伝いしました】
< http://www.amazon.co.jp/dp/4844331752/ >

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

・JavaScriptテクニックブック
< http://www.amazon.co.jp/dp/4903111520/ >

・改訂5版JavaScriptポケットリファレンス
< http://www.amazon.co.jp/dp/4774148199 >

・10日で覚えるHTML5入門教室
< http://www.amazon.co.jp/dp/4798124184 >

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

・PIXTA【PIXTAでも映像素材を販売中】
< http://pixta.jp/movie/ >

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/ >
吉田印刷所の「印刷の泉」でも購入できるようになりました。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■講師だって、最初は初心者だもの[番外]
EPUBデータを作ってみよう! 〜ちょっと濃いめの話〜

森 和恵
< http://bn.dgcr.com/archives/20120319140100.html >
───────────────────────────────────
こんにちは。森和恵です。
引き続き、電子書籍フォーマットEPUBについてご紹介します。

前回は、FUSEe(フュージー)を使ってEPUB文書を作る所まで進めました。
|EPUBデータを作ってみよう!〜FUSEe超入門〜
|< http://bn.dgcr.com/archives/20120220140100.html >

今回は、TOCと呼ばれる書籍情報のことやEPUBファイルのデータ構成など、ちょっとマニアックな内容をお話しします。

●EPUBデータ構成

EPUBデータは、圧縮されたファイルです。前回作成したepubデータをダウンロードし、拡張子をzipに変更した後に解凍してみましょう。OEBPSフォルダ内にHTML+CSS3 で作られたデータが確認できます。

 |前回作成したEPUBデータ
 |< http://r360studio.com/dgcr/dgcr-extra15-sample.epub >
 |【画面】< http://r360studio.com/dgcr/dgcr-extra16-01.jpg >

つまり、解凍してしまえば、書籍情報を指定するテキストファイル+書籍ページ用のHTMLページデータになるので、DreamweaverなどWebを作る感覚でページが作れてしまう! というわけです。既にWeb制作の知識がある人なら、電子書籍出版業界に入ると重宝されること間違いなし! です(実は、私が勉強しだしたのも、この辺を狙ってのことでした)。

作成したデータを再圧縮し、EPUBデータに戻すときには注意が必要です。フリーソフトなどで普通に圧縮しただけでは元に戻りません。"mimetype"という名前のファイルが非圧縮の状態で、データの先頭に位置しないとならないためです。

Windowsならコマンドライン、MacならターミナルからZIP圧縮のコマンドを叩いて、"mimetype"ファイルを一番最初に非圧縮の状態でZIPファイルに入れ、次に残りを圧縮して入れる必要があります。くわしくは下記のブログ記事を参考にしてください。

 |簡単にePubに圧縮(Mac)
 |< http://www.mycupoftea.cc/archives/2010/05/24/easy_to_epub.html >
 |編集したファイルをEPUBにする
 |< http://epubcafe.googlecode.com/svn/trunk/tutorial/OEBPS/Text/Chapter030205.xhtml >

●書籍情報や目次

EPUBでは、書籍情報(TOC)を付加することができます。例えば、FUSEeでは[書籍情報]タブでタイトル・著者・出版社・日付、などの情報を指定します。

< http://r360studio.com/dgcr/dgcr-extra16-02.jpg >

EPUBに目次ページを追加すると、EPUBビューアーソフトで目次閲覧ができるようになります(目次ページ機能が働く)。例えば、FUSEeでは[環境設定]-[カバー・目次]で、目次の作成方法を指定するとnav.xhtmlというファイルを自動生成し、目次ファイルとしてへ指定します。

< http://r360studio.com/dgcr/dgcr-extra16-03.jpg >

書籍情報や目次ページの指定は、指定した情報は、OEBPSフォルダのcontent.opfファイルに記述されます。書籍情報は、
<dc:×××>〜</dc:×××>という形式で指定されます。目次情報は、
<item id="nav" href="目次ファイル名" media-type="application/xhtml+xml" properties="nav" />
と指定されます。

< http://r360studio.com/dgcr/dgcr-extra16-04.jpg >

●著作権保護について

電子データなEPUBは、すぐに複製が出来ます。複製が簡単ということは...残念ながら、心ない方が不正利用(コピーして無断で配布する・内容の一部を流用するなど)しやすいということです。

そのために、電子書籍ではさまざまな著作権保護の取り組みが行われています。まず、電子書籍を販売するマーケットで、データに付加してくれるサービスがあります。DL-MARKETでは、購入者の名前やメールアドレスを記載したり、パスワードロックをかけたり等が行えます。

|DL-MARKET
|< http://community.dlmarket.jp/uploader5.html >

次に、DRM(デジタル著作権管理)と呼ばれる処理を電子書籍に施してくれるサービスがあります。かなり高額になるので、個人で細々と出版する場合には難しいかもしれませんが...。収益分岐点の計算次第では、必要になるかもしれませんね。

|KEYRING.NET
|< http://www.keyring.net/ >

●参考サイトを紹介

まだ始まったばかりの電子出版。新技術がでたり、サービスが生まれたり。めぐるましく変わる業界です。そんな電子書籍関連の情報収集は、下記のサイトがおすすめです。

|インプレスが発行する電子出版ビジネスの情報誌
|Impress Digital Magazine「OnDeck」
|< http://on-deck.jp/ >

|境祐司さんが運営されている電子書籍のプロジェクト
|@common style(Twitterアカウント)
|< https://twitter.com/#!/commonstyle >
|電子書籍メディア論(Facebookページ)
|< http://www.facebook.com/eBookStrategy >

|EPUBまわりの最新情報をいち早く掲載。技術的な話に速い。
|epub caf'e
|< http://www.epubcafe.jp/ >

|FUSEe(R)β公式マニュアルが、発行されました。
|内容にも興味がありますが、どんなデータで配信しているのかも興味あり。
|< http://epubunraku.com/category/select/cid/314/pid/278 >

......ということで、今回は終わりです。

次回は、4月14日に大阪で開催されるイベント、「まにまにフェスティバル」の直前おすすめレビューをお届けしようかと思います。Web業界の多方面なセッションがあり...どれを見ようか? と悩んでいる方に「私はコレに注目してるよ!」的な話をしたいなと思います。

|まにまにフェスティバル(P1)
|< http://m2.cap-ut.co.jp/fes/ >

ではまた!(^θ^)

※記事へのご意見・ご要望は下記より受付ます。
< http://bit.ly/gIHFfu >

【森和恵 r360studio 〜Web系インストラクター〜】
<site: http://r360studio.com > <twitter: http://twitter.com/r360studio >
<mail: r360studio@gmail.com >
サイト制作の教科書 r360study:< http://www.facebook.com/r360study >

月末に、ANIME CONTENTS EXPOへ行ってきます。2年ぶりの開催なので、各ブース気合い入っていることでしょう。楽しみです!(ステージチケットの抽選は外れたけど!(>_<))アニメが盛んな日本に生まれて幸せです。(^^)

|ANIME CONTENTS EXPO
|< http://www.animecontentsexpo.jp/ >

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記(03/19)

●"絶体絶命"テーマの映画DVDを続けて見た。2本目は「絶体絶命、壮絶サバイバル! 生きるためにその"決断"はくだされた」という惹句の映画「遭難者」だ。パッケ−ジは断崖の峡谷みたいなところが描かれているが、偽装にもほどがある。こんなシーンは全くない。あまり緊張感のない明るい原野や森林が舞台だ。サバイバルキャンプで森に入った経験者二人と初心者一人。サバイバルキャンプの三つの要素はシェルターに水に食料だと言いながら、ペットボトル一本ずつとゴミ袋、ナイフ、拾ったシャベルだけとはどういうことだ。虫を食い、腕時計を使って方位を確かめ、砂漠で水を得る細工をし、ライターなしで火を起こし......など初めのうちは実用的なことも見せるが、その程度。シェルターなしで大地に寝て、いつ何を食べているのかわからないが、何日も弱らずに活動できるのは謎だ。イノシシを捕らえる罠を仕掛けるが、不注意で一人(一番まともな男)が瀕死の重傷を負い、やがて......。ここが"決断"なんだろう。たぶん。

最初から反目しあっていた、残る二人の関係はさらに悪化して行く。経験者の方は初めから変に不機嫌で、何考えているかわからない奴だったが、幻覚を見てからさらにおかしくなり......。「3週間経っても戻らなければ捜索願いを」と車に残して来たメッセージが現実となり、とんでもない結末が......。物語の冒頭に、既に家を出た初心者あてに"まともだった方"の経験者から留守番電話の伝言が入る。これは彼が戻ってから聞くはずだったメッセージだ。「君はまだ戻っちゃいない。一部はあの森に残っている。俺たちは自らの悪魔を背負い、母なる大地に埋めてきた。その悪魔は残るかもしれない」と、わけわからんこと言ってたが、結局そのような結果になったわけか。オチを知ると、あー、見なければよかった......。(柴田)
< http://www.amazon.co.jp/exec/obidos/ASIN/B004SE9VXQ/dgcrcom-22/ >
→アマゾンで見る(レビュー3件)

●今日は森さんのお誕生日。おめでとうございます!/Firefox 11でサイトを表示させ、そのサイト上で右クリック(コントロール+クリック)すると出てくるコンテキストメニューで「要素を調査」を選ぶと、右下に「3D」という表示が出てくる。この3Dをクリックすると構造が立体化されて見える。これはマウスで360度動かすことができる。裏から見たり、横から見たり。拡大縮小も。仕事で作ったサイトをいくつか見てみたら、デザイン表現のために結構深い階層のものがあって、ちょっと恥ずかしい。しかし、驚くほど深いサイトがあるという情報があり、見てみると、異様なほど深くなっていた。なぜこんな構造に? コメントを見ると「つい先日客に要求されたぜ。ソースコードの総ライン数寄こせって。」と、書かれてあって驚いた。聞かれたことないよ。(hammer.mule)
< http://www.meti.go.jp/speeches/data_ej/ej040325j.html >
ページはこれ。普通のテキストページ
< http://blog.esuteru.com/archives/6003419.html >
経済産業省のHPのソース見たらなんか凄いことになってる件
< http://blog.livedoor.jp/goldennews/archives/51577463.html >
もう少し詳しく語り合ってる
< http://www.meti.go.jp/speeches/data_ed/ed041222-2j.html >
修正されたらしいのだが、なぜpを使わないのだろう。何かで書き出し?