アサガヤデンショをささえる 技術(っぽい何か)

小嶋智

はじめに

•変なものつくってんじゃねえよ

•みたいな罵倒は甘んじて受け入れます

•アドバイス頂けると泣いて喜びます

2010年ごろからEPUBを細々とつくってます

電書部

電書部•2010年

•ゲームデザイナ米光一成氏

•現在は発展的解消

• iPhoneアプリ「電書カプセル」は正統な後継者(なのではないかなあ）

• 2011年

•阿佐ヶ谷および近辺在住のイラストレータ・デザイナ・SE・お菓子屋・建築士・飲食店経営・プログラマ・ライターなど

宣伝

宣伝

• 2012年

•ライター古田靖氏編集長がはじめる

•参加人数不明(50人超?)

• メンバーの職業・住所多彩

• (5号もうすぐ、もうすぐ出ます…)

さて

EPUBとは

•メタデータを含むxmlファイルと本文のXHTMLを、zipで固めたもの

なにをいまさら (ですよね)

要素

メタデータ

本文

パッケージング

技術

電書部/アサガヤデンショ/トルタル では

メタデータとパッケージ と制作

•gepub (拙作rubyライブラリ)

• 各種スクリプト

• epubcheck

• GitHub

• 今日はこっちの話はしません

本文HTML

こっちを話します

手打ち時代 (2010)

電書部最初のEPUB (2010/3/18)

•全部「手作り」OPFも手で書いた

• XHTML手打ち

•いろいろスタイル使ってみた

YDML時代 (2010～2011)

電書部EPUB (2010/5/23 文学フリマ)

•レイアウト単純化

• cssも超シンプル

•マークアップ原稿から自動生成PDFも生成していた。

YDML<bold>【世界初!?の電子書籍フリマ】</bold> <center><img="01.jpg"></center> <center>米光・小沢</center>

<bold>小沢　</bold>電子書籍フリマってのをやるんでしょ？ <bold>米光　</bold>今年(2010年)の夏と秋に。5/23に文学フリ マで電子書籍の販売をやるので，その成果を発展させるつもり。「デジタルで バーチャルな電書をアナログでリアルな対面販売で」ってお祭りをやろうと思 ってる。 <bold>小沢　</bold>「電子書籍フリマをやろう」というアイデ アは，そもそもどこから？ <bold>米光　</bold>去年の10月にキンドルを手に入れてから， これでいったいどんなことができるんだろう，何が変わるんだろう，っていう のをずっと考えていて。

YDMLの特徴レイアウト指向で、論理構造指向ではない

レイアウトは著者がみずから行いたい。

文章の要素はすべて論理的に意味が決まるとは限らない。

記述能力は(意図的に)かなり限定的。「新書や文庫程度」というガイドラインが示された。

使い捨てマークアップ時代 (2011～2012)

電書オトノハ (2011/5/19)

XHTMLソース

せっかくだから そこそこ凝った レイアウト

(電書部でできなかったけどやってみたかった)

でも手で打つのは たいへん

使い捨てマークアップ

処理スクリプト

電子雑誌トルタル (2012/4/1)

XHTML

使い捨てマークアップ

処理スクリプト

行だけマークアップ(不便) ブロックはHTML直書

作るたびになんか微妙に違う…

我慢の限界

オレオレマークアップ 作るぞ

•使い捨ては面倒だし間違える

• Markdownでは記述力ちょっと足りない特に雑誌的なものでは足りない

• hamlは原稿マークアップにはしづらい

• ReVIEWは近いけどちょっと違う

•てか自分で作ってみたいし

作った

ArtiMark時代 (2013～)

電子雑誌トルタル4号 （2013/2/28)

給水塔と赤い屋根 ～阿佐ヶ谷住宅のおはなし～

マークアップ原稿

マークアップ原稿

このへんは 藤井太洋氏のパクリ

XHTML

ArtiMarkの特徴

(1) 段落

こういうテキスト

自分達にとっては、それが阿佐ヶ谷住宅という場所でした。阿佐ヶ谷住宅と同じ時間を生き、体感できたことは恵まれていました。あの空間に包まれていた感覚を忘れたくない。

もう伐採されてしまいましたが、阿佐ヶ谷住宅の大きな桜の下で集まり花見をしたことがありました。 そして、花見をするように集まり作ったのが「給水塔と赤い屋根 ～阿佐ヶ谷住宅のおはなし～」。この世から完全に姿を消してしまう前に、せめて目で見て思い出せる形に残しておきたい。そんな、思いもありました。

こうなる<div class='pgroup'><p>自分達にとっては、それが阿佐ヶ谷住宅という場所でした。阿佐ヶ谷住宅と同じ時間を生き、体感できたことは恵まれていました。あの空間に包まれていた感覚を忘れたくない。</p></div><div class='pgroup'><p>もう伐採されてしまいましたが、阿佐ヶ谷住宅の大きな桜の下で集まり花見をしたことがありました。</p><p>そして、花見をするように集まり作ったのが「給水塔と赤い屋根 ～阿佐ヶ谷住宅のおはなし～」。この世から完全に姿を消してしまう前に、せめて目で見て思い出せる形に残しておきたい。そんな、思いもありました。</p></div>

•改行は<p></p>に

•空行があると<div class=“pgroup”></div>に

• (松島さんに教えていただいたHTMLのマークアップです)

こうなる

こうなる

(2) マークアップの文法

形式を固定行 h1: 第一章

ブロック section.one { そもそものはじまりは }

インライン その建物は築[tcy{50}]年だった。

マークアップ名の形式もマークアップ名.クラス名#ID(パラメータ)

例: image.img-wrap#the_image(img/path_to_img.jpg, altテキスト): キャプション

生成されるHTML片 <div class=“img-wrap” id=“the_image”> <img src=“img/path_to_img.jpg”, alt=“altテキスト”> <p>キャプション</p> </div>

(3) マークアップ追加可能

class CoverParser include ArtiMark::BaseParser def accept?(lines) lex_line_command(lines[0])[:cmd] =~ /cover/ end  def parse(lines, context, syntax) lexed = lex_line_command(lines[0]) raise 'CoverParser called for #{lines[0]}' unless lexed[:cmd] =~ /cover/ lines.shift lexed[:cls] << 'cover-wrap' if lexed[:cls].size == 0 src = lexed[:text].strip alt = lexed[:params][0].strip if !lexed[:params][0].nil? context << "<div#{class_string(lexed[:cls])}>" context << "<img class='cover' src='img/#{src}' alt='#{alt}' />" context << "</div>\n" context.start_html endend

(ただしかなり面倒)

(4) プリプロセッサも 追加可

このへんは 藤井太洋氏のパクリ

プリプロセッサ

arti.preprocessor do |text| text.gsub(/\[\[(.+?)\/\/(.+?)\]\]/, '\2') end

こっちは比較的簡単

ArtiMark課題

ドキュメンテーションが貧弱すぎる

エラーメッセージが意味不明

マークアップの 追加しにくい

このままでは単なるXHTMLの

簡易記法

ArtiMarkこれから

•課題の解決

• EPUB生成との連携(生成中のメタデータ参照とか)

• githubにプッシュしたらEPUB自動生成

•というか根本的に

•論理構造のXMLに直接変換→XSLTでXHTMLにできるくらいがよい…のかもしれない

ありがとうございました

•以下、ちょっとだけアサガヤデンショの宣伝をさせてください

『給水塔と赤い屋根』展 巡回展

•11/30～12/4 鵜ノ木 Hasu no hana

• 阿佐ヶ谷住宅にまつわる作品いろいろ

•展示で来場者が思い出を重ねていった「想層地図」展示

•小嶋が毎日撮影した給水塔写真のスライドショーとポスターもあります

ありがとうございました