電大     つ電          組る           く子    子矢    情研    報究    工室    学     版ク籍            書           ラ    科    五     シウを    年   ...
概要•日本語用縦書き電子書籍システムを開発した
既存技術への不満
Amazon Kindle•日本語組版→☓• 多デバイス対応→○
TeaTime, XMDF(国産ビューア・フォーマット)•日本語組版→○• 多デバイス対応→☓
evalbook  (本研究で開発)•日本語組版→◎• 多デバイス対応→◎
<html>              <title>こころ</title>HTML          <author>夏目漱石</author>              <h2>上 先生と私</h2>              <rb>私<...
従来    evalbookの方式端末          端末              PDF / image                viewer     電子書籍     アプリ            サーバ            ...
従来     evalbook        1つのサーバ上端末毎にアプリ で動作するプロの開発が必要 グラムだけで済        む
evalbook           Web UI pLaTeX code generator           HTML parser           pLaTeX
Web UI•Ruby• Sinatra• 簡単なWebアプリ
pLaTeX code   generator•テンプレート• 生成されるpLaTeXコードの外枠
<%= %>の部分に動的に値/          文字列が埋め込まれる 1   documentclass[a4j,<%=t.column%>]{tarticle} 2   usepackage[dvipdfm]{graphicx} 3   u...
<%= %>の部分に動的に値/       文字列が埋め込まれる1 documentclass[a4j,<%=t.column%>]{tarticle}        ・onecolumn        ・twocolumn
normalsize, largeなどを再定義する.     フォントの大きさは対象デバイス・      ユーザの指定により毎回変化する12 makeatletter13 DeclareFontShape{JT1}{hmc}{m}{n}{<->...
normalsize, largeなどを再定義する.     フォントの大きさは対象デバイス・      ユーザの指定により毎回変化する                         フォントサイズ                      ...
本の作者・タイトルの情報があ     れば各ページのヘッダに挿入21 defps@myhead{letps@jpl@inps@headnombre22   let@oddfoot@emptylet@evenfoot@empty23   def@...
本の作者・タイトルの情報があ     れば各ページのヘッダに挿入                                タイトル          奇数ページ                 こころ23  def@evenhead{{t...
HTML Parser•HTMLをpLaTeXのコード片に変換・Ruby ・Nokogiri・内部DSL(自作)
Ruby内部DSLによる再帰的なHTMLパー  サ・pLaTeXコードジェネレータ使用例 93   tag(:rb) {"kana{#{recur}}"} 94   tag(:rt) {"{#{recur}}"} 95   tag(:rp) {...
Ruby内部DSLによる再帰的なHTMLパー サ・pLaTeXコードジェネレータ使用例93   tag(:rb) {"kana{#{recur}}"}94   tag(:rt) {"{#{recur}}"}     <rb>檸檬</rb><rt...
pLaTeX等の実行24   open("#{$dir_tmp}/#{filename}.tex", w){|fp|fp.write(Erubis::Eruby.new(template).result(binding))}25   open(...
組版•基本的な箇所は既存パッケージを利用•カバーできない箇所はpLaTeXコード生成時に自力対応(Ruby側で)
利用したパッケージ•ふりがな •furiganaパッケージ•正方形フォントメトリック・ぶら下げ組•OTF beta
自力対応した箇所•版面のパラメタの値• 画像の貼り付け
版面のパラメタの値•版面(画面)の大きさはデバイス毎に異なる•Ruby側でWebUIからの入力(画面サイズ・アスペクト比など)をもとに計算する
各パラメタの計算66   def textheight67     ((width * 0.925 / lineskip(@fontsize)).to_i - 1) *lineskip(@fontsize) + @fontsize68   en...
版面のパラメタの値(出力例)paperwidth=143.90825102604714ptpaperheight=206.86811084994275pttextwidth=177.1875pttextheight=119.25pttopmar...
画像•pLaTeX, ghostscriptに画像を扱わせない戦略
画像•Ruby側で画像の情報を取得,全ての画像をPDFに変換しgsを不要に→ImageMagickを利用
画像のハイパーリンク•pLaTeX及びgraphicxパッケージの命令では対応できない→dvipdfmxにspecial命令を送る
171   def a_img width, height172     "173 begingroup174 catcode`_=11175 catcode`%=11176 catcode`#=11177 catcode`$=11178 ca...
URLに使う記号(_%#...)                          をTeXで通常の文字列174   catcode`_=11                          として扱うように175   catcode`%=1...
special命令(TeXでは解釈され                         ずdviwareにそのまま届く命                         令)で画像の上に同じ大きさの    480                ...
1行の長さは40∼45文字を超えると読みづらい →40文字を超えると自動的に2段組に
幅を5.5cmに指定したとき →長さが足りないと自動的に収まるサイズに
幅をページいっぱいに指定したとき
その他細かい調整•和欧間文字比• kanjiskip, xkanjiskip• 禁則(行頭の「っ」を許すなど)• dvipdfmxのfontMap
1 bop [8]                  ParseDVI 2 down 3113.3460235595703125 3     down -3164.9630889892578125 4             right -52...
今ある/今後でる  ほぼ全てのデバイスに対応             PC               Kindle DX                  Kindle 2                    PSP            ...
が 人 分 い い う   感 つ ひ か に か の  じ も ど ら は し だ     も と ま そ い 悪 、 ら か     の こし の 思 く 言 、 ら     に そ    攻 い 言 い と 、 い違 、   撃 違 わ ...
まとめ•美しい組版• 多くのデバイスに対応• HTMLのURLで入力
利用したプログラム・コ     ンテンツ•Ruby, 各種gemライブラリ•pLaTeX, 各種マクロファイル• Google Search API• 青空文庫
画像などの引用•   http://www.apple.com/jp/iphone/gallery/•   http://www.au.kddi.com/seihin/ichiran/    smartphone/is12t/index.htm...
今後の展開•evalbookのさらなる開発• pure javascriptな evalbookの開発
http://j.mp/evalbookdemo
卒研発表
Upcoming SlideShare
Loading in...5
×

卒研発表

567

Published on

evalbook

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
567
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

卒研発表

  1. 1. 電大 つ電 組る く子 子矢 情研 報究 工室 学 版ク籍 書 ラ 科 五 シウを 年 スド矢 のテ口裕 開ム也 発
  2. 2. 概要•日本語用縦書き電子書籍システムを開発した
  3. 3. 既存技術への不満
  4. 4. Amazon Kindle•日本語組版→☓• 多デバイス対応→○
  5. 5. TeaTime, XMDF(国産ビューア・フォーマット)•日本語組版→○• 多デバイス対応→☓
  6. 6. evalbook (本研究で開発)•日本語組版→◎• 多デバイス対応→◎
  7. 7. <html> <title>こころ</title>HTML <author>夏目漱石</author> <h2>上 先生と私</h2> <rb>私</rb><rt>わたくし</ rt>はその人を常に先生と呼 んでいた。<br />evalbook ...... PDF
  8. 8. 従来 evalbookの方式端末 端末 PDF / image viewer 電子書籍 アプリ サーバ evalbook
  9. 9. 従来 evalbook 1つのサーバ上端末毎にアプリ で動作するプロの開発が必要 グラムだけで済 む
  10. 10. evalbook Web UI pLaTeX code generator HTML parser pLaTeX
  11. 11. Web UI•Ruby• Sinatra• 簡単なWebアプリ
  12. 12. pLaTeX code generator•テンプレート• 生成されるpLaTeXコードの外枠
  13. 13. <%= %>の部分に動的に値/ 文字列が埋め込まれる 1 documentclass[a4j,<%=t.column%>]{tarticle} 2 usepackage[dvipdfm]{graphicx} 3 usepackage[deluxe, burasage]{otf} 4 usepackage[dvipdfm]{color} 5 usepackage[dvipdfm,% 6 bookmarks=true,% 7 bookmarksnumbered=true,% 8 colorlinks=true]{hyperref} 9 usepackage{fancyvrb}10 usepackage{fancyhdr}
  14. 14. <%= %>の部分に動的に値/ 文字列が埋め込まれる1 documentclass[a4j,<%=t.column%>]{tarticle} ・onecolumn ・twocolumn
  15. 15. normalsize, largeなどを再定義する. フォントの大きさは対象デバイス・ ユーザの指定により毎回変化する12 makeatletter13 DeclareFontShape{JT1}{hmc}{m}{n}{<-> s *[0.9375] brsgnmlminr-v}{}14 renewcommand{normalsize}{@setfontsizenormalsize{<%=t.normalsize%>pt}{<%=t.lineskip(t.normalsize)%>}}15 renewcommand{tiny}{@setfontsizetiny{<%=t.tiny%>pt}{<%=t.lineskip(t.tiny)%>}}........19 renewcommand{huge}{@setfontsizehuge{<%=t.huge%>pt}{<%=t.lineskip(t.huge)%>}}
  16. 16. normalsize, largeなどを再定義する. フォントの大きさは対象デバイス・ ユーザの指定により毎回変化する フォントサイズ 13pt14 renewcommand{normalsize}{@setfontsizenormalsize{<%=t.normalsize%>pt}{<%=t.lineskip(t.normalsize)%>}} 行送り 19.5pt = 13pt × 1.5
  17. 17. 本の作者・タイトルの情報があ れば各ページのヘッダに挿入21 defps@myhead{letps@jpl@inps@headnombre22 let@oddfoot@emptylet@evenfoot@empty23 def@evenhead{{tiny <%= t.title || %> <%= t.author || %>hfill thepage{}}}%24 def@oddhead{{tiny <%= t.title || %> <%= t.author || %>hfill thepage{}}}%25 let@mkbothmarkboth26 }27 pagestyle{myhead}28 makeatother
  18. 18. 本の作者・タイトルの情報があ れば各ページのヘッダに挿入 タイトル 奇数ページ こころ23 def@evenhead{{tiny <%= t.title || %> <%= t.author || %>hfill thepage{}}}%24 def@oddhead{{tiny <%= t.title || %> <%= t.author || %>hfill thepage{}}}% 偶数ページ 著者 夏目漱石
  19. 19. HTML Parser•HTMLをpLaTeXのコード片に変換・Ruby ・Nokogiri・内部DSL(自作)
  20. 20. Ruby内部DSLによる再帰的なHTMLパー サ・pLaTeXコードジェネレータ使用例 93 tag(:rb) {"kana{#{recur}}"} 94 tag(:rt) {"{#{recur}}"} 95 tag(:rp) {""} 96 97 tag(:br) {par{}} 98 tag :hr do 99 "100 vspace{1zw plus .1zw minus .4zw}nn101 nnnoindent102 hfil103 rule{#{@t.textwidth_consider_column *0.7}pt}{.01zw}104 hfillnn"
  21. 21. Ruby内部DSLによる再帰的なHTMLパー サ・pLaTeXコードジェネレータ使用例93 tag(:rb) {"kana{#{recur}}"}94 tag(:rt) {"{#{recur}}"} <rb>檸檬</rb><rt>れもん</rt> → kana{檸檬}{れもん}
  22. 22. pLaTeX等の実行24 open("#{$dir_tmp}/#{filename}.tex", w){|fp|fp.write(Erubis::Eruby.new(template).result(binding))}25 open("#{$dir_tmp}/#{filename}.sh", w){|fp|fp.write(<<-"EOF")}26 ebb *.pdf27 platex -interaction=nonstopmode #{$dir_tmp}/#{filename}.tex28 dvipdfmx -f #{$dir_sty}/notembed.map -p#{t.width}pt,#{t.height}pt #{$dir_tmp}/#{filename}.dvi29 mv #{filename}.pdf #{$dir_public_tmp}30 rm #{filename}.tex #{filename}.dvi31 EOF32 do_command($dir_tmp, "sh #{filename}.sh")
  23. 23. 組版•基本的な箇所は既存パッケージを利用•カバーできない箇所はpLaTeXコード生成時に自力対応(Ruby側で)
  24. 24. 利用したパッケージ•ふりがな •furiganaパッケージ•正方形フォントメトリック・ぶら下げ組•OTF beta
  25. 25. 自力対応した箇所•版面のパラメタの値• 画像の貼り付け
  26. 26. 版面のパラメタの値•版面(画面)の大きさはデバイス毎に異なる•Ruby側でWebUIからの入力(画面サイズ・アスペクト比など)をもとに計算する
  27. 27. 各パラメタの計算66 def textheight67 ((width * 0.925 / lineskip(@fontsize)).to_i - 1) *lineskip(@fontsize) + @fontsize68 end6970 def oddsidemargin71 (width - textheight - tiny / 2) / 272 end7374 def column75 if textwidth / @fontsize > 4076 "twocolumn"77 else78 "onecolumn"79 end80 end
  28. 28. 版面のパラメタの値(出力例)paperwidth=143.90825102604714ptpaperheight=206.86811084994275pttextwidth=177.1875pttextheight=119.25pttopmargin=4.5ptoddsidemargin=11.20412551302357ptcolumnsep=16.875ptheadheight=4.5ptheadsep=13.480610849942753pttopskip=0pt
  29. 29. 画像•pLaTeX, ghostscriptに画像を扱わせない戦略
  30. 30. 画像•Ruby側で画像の情報を取得,全ての画像をPDFに変換しgsを不要に→ImageMagickを利用
  31. 31. 画像のハイパーリンク•pLaTeX及びgraphicxパッケージの命令では対応できない→dvipdfmxにspecial命令を送る
  32. 32. 171 def a_img width, height172 "173 begingroup174 catcode`_=11175 catcode`%=11176 catcode`#=11177 catcode`$=11178 catcode`&=11179 special{pdf:ann width #{width}pt height#{height}pt 180 << /Subtype /Link /A << /S /URI /URI(#{@a_url}) >> >>}endgroup 181 "182 end
  33. 33. URLに使う記号(_%#...) をTeXで通常の文字列174 catcode`_=11 として扱うように175 catcode`%=11176 catcode`#=11177 catcode`$=11178 catcode`&=11
  34. 34. special命令(TeXでは解釈され ずdviwareにそのまま届く命 令)で画像の上に同じ大きさの 480 ハイパーリンクを重ねる179 special{pdf:ann width #{width}pt height#{height}pt 180 << /Subtype /Link /A << /S /URI /URI(#{@a_url}) >> >>} 640 http://example.com/hoge_fuga.php?a=b&c=d
  35. 35. 1行の長さは40∼45文字を超えると読みづらい →40文字を超えると自動的に2段組に
  36. 36. 幅を5.5cmに指定したとき →長さが足りないと自動的に収まるサイズに
  37. 37. 幅をページいっぱいに指定したとき
  38. 38. その他細かい調整•和欧間文字比• kanjiskip, xkanjiskip• 禁則(行頭の「っ」を許すなど)• dvipdfmxのfontMap
  39. 39. 1 bop [8] ParseDVI 2 down 3113.3460235595703125 3 down -3164.9630889892578125 4 right -52.047943115234375 5 xxx color push gray 0 6 xxx pdf:dest (page.8) [@thispage /XYZ @xpos @ypos] 7 right 442.75 8 xxx color pop 9 down 319.687510 right -52.04794311523437511 down -319.687512 dir tate13 down -437.5937514 fnt brsgnmlminr-v 10.312515 set ち16 w -0.006240844726562517 set な18 w0 -0.006240844726562519 set み
  40. 40. 今ある/今後でる ほぼ全てのデバイスに対応 PC Kindle DX Kindle 2 PSP iPad iPhoneevalbook Android WindowsPhone7 Galapagos 携帯電話(au) 携帯電話(docomo) 携帯電話(softbank)
  41. 41. が 人 分 い い う 感 つ ひ か に か の じ も ど ら は し だ も と ま そ い 悪 、 ら か の こし の 思 く 言 、 ら に そ 攻 い 言 い と 、 い違 、 撃 違 わ 争 思 も な 謂 を い れ い い は い わ ば 両立 黙 を る も 込 や 、し し と 自 ん 人 自 万 て 、 己 で 間 分 一世 い い 弁 し と に 系 る か 解 ま 一 は のよ に も う 緒 そ 人 も 出 の に の 間 、 来 で 住 真 の も な し め 理 ﹁っ い た な を 真
  42. 42. まとめ•美しい組版• 多くのデバイスに対応• HTMLのURLで入力
  43. 43. 利用したプログラム・コ ンテンツ•Ruby, 各種gemライブラリ•pLaTeX, 各種マクロファイル• Google Search API• 青空文庫
  44. 44. 画像などの引用• http://www.apple.com/jp/iphone/gallery/• http://www.au.kddi.com/seihin/ichiran/ smartphone/is12t/index.html• http://jp.samsungmobile.com/galaxys/• http://www.android.com/• http://www.microsoft.com/ja-jp/windowsphone/ design/7/phones.aspx• http://itunes.apple.com/jp/app/id369061574? mt=8
  45. 45. 今後の展開•evalbookのさらなる開発• pure javascriptな evalbookの開発
  46. 46. http://j.mp/evalbookdemo
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×