SlideShare a Scribd company logo
1 of 47
Download to read offline
電大     つ電
          組る
           く子
    子矢
    情研
    報究
    工室
    学     版ク籍
            書
           ラ
    科
    五     シウを
    年
          スド
矢        のテ
口
裕
         開ム
也        発
概要


•
日本語用縦書き電子書籍
システムを開発した
既存技術への不満
Amazon Kindle


•日本語組版→☓

• 多デバイス対応→○
TeaTime, XMDF(国産
ビューア・フォーマット)


•日本語組版→○

• 多デバイス対応→☓
evalbook
  (本研究で開発)


•日本語組版→◎

• 多デバイス対応→◎
<html>
              <title>こころ</title>
HTML          <author>夏目漱石</author>
              <h2>上 先生と私</h2>
              <rb>私</rb><rt>わたくし</
           rt>はその人を常に先生と呼
           んでいた。<br />
evalbook   ......




 PDF
従来    evalbookの方式


端末          端末

              PDF / image
                viewer
     電子書籍
     アプリ
            サーバ

                 evalbook
従来     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   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}
<%= %>の部分に動的に値/
       文字列が埋め込まれる
1 documentclass[a4j,<%=t.column%>]{tarticle}




        ・onecolumn
        ・twocolumn
normalsize, largeなどを再定義する.
     フォントの大きさは対象デバイス・
      ユーザの指定により毎回変化する
12 makeatletter
13 DeclareFontShape{JT1}{hmc}{m}{n}{<-> s *
[0.9375] brsgnmlminr-v}{}
14 renewcommand{normalsize}{@setfontsize
normalsize{<%=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)%>}}
normalsize, largeなどを再定義する.
     フォントの大きさは対象デバイス・
      ユーザの指定により毎回変化する
                         フォントサイズ
                         13pt

14 renewcommand{normalsize}{@setfontsize
normalsize{<%=t.normalsize%>pt}{<
%=t.lineskip(t.normalsize)%>}}

                 行送り
                 19.5pt = 13pt × 1.5
本の作者・タイトルの情報があ
     れば各ページのヘッダに挿入
21 defps@myhead{letps@jpl@inps@headnombre
22   let@oddfoot@emptylet@evenfoot@empty
23   def@evenhead{{tiny <%= t.title || ''
%> <%= t.author || '' %>hfill thepage{}}}%
24   def@oddhead{{tiny <%= t.title || '' %> 
<%= t.author || '' %>hfill thepage{}}}%
25   let@mkbothmarkboth
26 }
27 pagestyle{myhead}
28 makeatother
本の作者・タイトルの情報があ
     れば各ページのヘッダに挿入
                                タイトル
          奇数ページ                 こころ

23  def@evenhead{{tiny <%= t.title || ''
%> <%= t.author || '' %>hfill thepage{}}}%
24   def@oddhead{{tiny <%= t.title || '' %> 
<%= t.author || '' %>hfill thepage{}}}%


         偶数ページ                著者
                              夏目漱石
HTML Parser

•
HTMLをpLaTeXのコー
ド片に変換
・Ruby ・Nokogiri
・内部DSL(自作)
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}nn
101 nnnoindent
102 hfil
103 rule{#{@t.textwidth_consider_column *
0.7}pt}{.01zw}
104 hfillnn"
Ruby内部DSLによる再帰的なHTMLパー
 サ・pLaTeXコードジェネレータ使用例
93   tag(:rb) {"kana{#{recur}}"}
94   tag(:rt) {"{#{recur}}"}


     <rb>檸檬</rb><rt>れもん</rt>
     → kana{檸檬}{れもん}
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 *.pdf
27       platex -interaction=nonstopmode #{$dir_tmp}/
#{filename}.tex
28       dvipdfmx -f #{$dir_sty}/notembed.map -p
#{t.width}pt,#{t.height}pt #{$dir_tmp}/#{filename}.dvi
29       mv #{filename}.pdf #{$dir_public_tmp}
30       rm #{filename}.tex #{filename}.dvi
31   EOF
32   do_command($dir_tmp, "sh #{filename}.sh")
組版
•
基本的な箇所は既存パッ
ケージを利用

•
カバーできない箇所は
pLaTeXコード生成時に自
力対応(Ruby側で)
利用したパッケージ
•ふりがな
 •furiganaパッケージ
•正方形フォントメトリック・
ぶら下げ組

•OTF beta
自力対応した箇所


•版面のパラメタの値

• 画像の貼り付け
版面のパラメタの値
•
版面(画面)の大きさはデバ
イス毎に異なる

•
Ruby側でWebUIからの入
力(画面サイズ・アスペクト
比など)をもとに計算する
各パラメタの計算
66   def textheight
67     ((width * 0.925 / lineskip(@fontsize)).to_i - 1) *
lineskip(@fontsize) + @fontsize
68   end
69
70   def oddsidemargin
71     (width - textheight - tiny / 2) / 2
72   end
73
74   def column
75     if textwidth / @fontsize > 40
76       "twocolumn"
77     else
78       "onecolumn"
79     end
80   end
版面のパラメタの値(出力例)
paperwidth=143.90825102604714pt
paperheight=206.86811084994275pt
textwidth=177.1875pt
textheight=119.25pt
topmargin=4.5pt
oddsidemargin=11.20412551302357pt
columnsep=16.875pt
headheight=4.5pt
headsep=13.480610849942753pt
topskip=0pt
画像


•
pLaTeX, ghostscript
に画像を扱わせない戦略
画像

•
Ruby側で画像の情報を取得,
全ての画像をPDFに変換しgs
を不要に
→ImageMagickを利用
画像のハイパーリンク
•
pLaTeX及びgraphicx
パッケージの命令では対
応できない
→dvipdfmxにspecial
命令を送る
171   def a_img width, height
172     "
173 begingroup
174 catcode`_=11
175 catcode`%=11
176 catcode`#=11
177 catcode`$=11
178 catcode`&=11
179 special{pdf:ann width #{width}pt height
#{height}pt 
180 << /Subtype /Link /A << /S /URI /URI
(#{@a_url}) >> >>}endgroup 
181     "
182   end
URLに使う記号(_%#...)
                          をTeXで通常の文字列

174   catcode`_=11
                          として扱うように
175   catcode`%=11
176   catcode`#=11
177   catcode`$=11
178   catcode`&=11
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
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.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.6875
10         right -52.047943115234375
11         down -319.6875
12         dir tate
13         down -437.59375
14             fnt brsgnmlminr-v 10.3125
15             set ち
16             w -0.0062408447265625
17             set な
18             w0 -0.0062408447265625
19             set み
今ある/今後でる
  ほぼ全てのデバイスに対応
             PC
               Kindle DX
                  Kindle 2
                    PSP
                      iPad
                        iPhone
evalbook                   Android
                          WindowsPhone7
                     Galapagos
                 携帯電話(au)
             携帯電話(docomo)
           携帯電話(softbank)
が 人 分 い い う
   感 つ ひ か に か の
  じ も ど ら は し だ     も と
 ま そ い 悪 、 ら か     の こ
し の 思 く 言 、 ら     に そ
    攻 い 言 い と 、 い違 、
   撃 違 わ 争 思 も な    謂
  を い れ い い は い    わ
                  ば


      両立
 黙 を る も 込 や 、
し し と 自 ん 人 自    万
   て 、 己 で 間 分 一世
  い い 弁 し と に 系
 る か 解 ま 一 は の
よ に も う 緒 そ 人
   も 出 の に の 間
  、 来 で 住 真 の
 も な し め 理 ﹁
っ い た な を 真
まとめ

•美しい組版

• 多くのデバイスに対応

• 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.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
今後の展開

•evalbookのさらなる開発

• pure javascriptな
 evalbookの開発
http://
j.mp/evalbookdemo

More Related Content

What's hot

京都IT研修講座
京都IT研修講座京都IT研修講座
京都IT研修講座annulus
 
it研修講座
it研修講座it研修講座
it研修講座annulus
 
kyoto IT
kyoto ITkyoto IT
kyoto ITannulus
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月annulus
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月annulus
 
itkensyukouza2008
itkensyukouza2008itkensyukouza2008
itkensyukouza2008annulus
 
2011 10-satalabo-naaon
2011 10-satalabo-naaon2011 10-satalabo-naaon
2011 10-satalabo-naaonNaoki Okino
 
XMLデータベースについて
XMLデータベースについてXMLデータベースについて
XMLデータベースについてKoji Kawaguchi
 
Wikibana - 戦うblogに恋するWiki
Wikibana - 戦うblogに恋するWikiWikibana - 戦うblogに恋するWiki
Wikibana - 戦うblogに恋するWikiMasafumi Otsune
 
it研修講座
it研修講座it研修講座
it研修講座annulus
 
it研修講座 aki
it研修講座 akiit研修講座 aki
it研修講座 akiannulus
 

What's hot (13)

京都IT研修講座
京都IT研修講座京都IT研修講座
京都IT研修講座
 
It01
It01It01
It01
 
it研修講座
it研修講座it研修講座
it研修講座
 
kyoto IT
kyoto ITkyoto IT
kyoto IT
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月
 
itkensyukouza2008
itkensyukouza2008itkensyukouza2008
itkensyukouza2008
 
2011 10-satalabo-naaon
2011 10-satalabo-naaon2011 10-satalabo-naaon
2011 10-satalabo-naaon
 
XMLデータベースについて
XMLデータベースについてXMLデータベースについて
XMLデータベースについて
 
実践スクレイピング
実践スクレイピング実践スクレイピング
実践スクレイピング
 
Wikibana - 戦うblogに恋するWiki
Wikibana - 戦うblogに恋するWikiWikibana - 戦うblogに恋するWiki
Wikibana - 戦うblogに恋するWiki
 
it研修講座
it研修講座it研修講座
it研修講座
 
it研修講座 aki
it研修講座 akiit研修講座 aki
it研修講座 aki
 

Similar to 卒研発表

pythonでオフィス快適化計画
pythonでオフィス快適化計画pythonでオフィス快適化計画
pythonでオフィス快適化計画Kazufumi Ohkawa
 
Cocoa勉強会pdf関連
Cocoa勉強会pdf関連Cocoa勉強会pdf関連
Cocoa勉強会pdf関連OCHI Shuji
 
コミケの取りまとめをしたので
コミケの取りまとめをしたのでコミケの取りまとめをしたので
コミケの取りまとめをしたのでKenichiro MATOHARA
 
Cli mini Hack!#1 ~Terminalとの親睦を深めよう~
Cli mini Hack!#1 ~Terminalとの親睦を深めよう~Cli mini Hack!#1 ~Terminalとの親睦を深めよう~
Cli mini Hack!#1 ~Terminalとの親睦を深めよう~Kei IWASAKI
 
2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talk2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talkmitamex4u
 
コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践
コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践
コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践LINE Corporation
 
CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011Shuyo Nakatani
 
ソースコードリーディングの基礎
ソースコードリーディングの基礎ソースコードリーディングの基礎
ソースコードリーディングの基礎hogemuta
 
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyotoGo言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyotoShoot Morii
 
F#+Erlangで簡単なシューティングゲームを作ってみている
F#+Erlangで簡単なシューティングゲームを作ってみているF#+Erlangで簡単なシューティングゲームを作ってみている
F#+Erlangで簡単なシューティングゲームを作ってみているpocketberserker
 
長いの
長いの長いの
長いのemasaka
 
第2回品川Redmine勉強会(日本語全文検索)
第2回品川Redmine勉強会(日本語全文検索)第2回品川Redmine勉強会(日本語全文検索)
第2回品川Redmine勉強会(日本語全文検索)Masanori Machii
 
20130228 Goノススメ(BPStudy #66)
20130228 Goノススメ(BPStudy #66)20130228 Goノススメ(BPStudy #66)
20130228 Goノススメ(BPStudy #66)Yoshifumi Yamaguchi
 
Exgettextの話
Exgettextの話Exgettextの話
Exgettextの話k1complete
 
C++コミュニティーの中心でC++をDISる
C++コミュニティーの中心でC++をDISるC++コミュニティーの中心でC++をDISる
C++コミュニティーの中心でC++をDISるHideyuki Tanaka
 
Xbyakの紹介とその周辺
Xbyakの紹介とその周辺Xbyakの紹介とその周辺
Xbyakの紹介とその周辺MITSUNARI Shigeo
 

Similar to 卒研発表 (20)

pythonでオフィス快適化計画
pythonでオフィス快適化計画pythonでオフィス快適化計画
pythonでオフィス快適化計画
 
Cocoa勉強会pdf関連
Cocoa勉強会pdf関連Cocoa勉強会pdf関連
Cocoa勉強会pdf関連
 
Haikara
HaikaraHaikara
Haikara
 
コミケの取りまとめをしたので
コミケの取りまとめをしたのでコミケの取りまとめをしたので
コミケの取りまとめをしたので
 
Cli mini Hack!#1 ~Terminalとの親睦を深めよう~
Cli mini Hack!#1 ~Terminalとの親睦を深めよう~Cli mini Hack!#1 ~Terminalとの親睦を深めよう~
Cli mini Hack!#1 ~Terminalとの親睦を深めよう~
 
2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talk2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talk
 
コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践
コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践
コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践
 
CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011
 
ソースコードリーディングの基礎
ソースコードリーディングの基礎ソースコードリーディングの基礎
ソースコードリーディングの基礎
 
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyotoGo言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
 
F#+Erlangで簡単なシューティングゲームを作ってみている
F#+Erlangで簡単なシューティングゲームを作ってみているF#+Erlangで簡単なシューティングゲームを作ってみている
F#+Erlangで簡単なシューティングゲームを作ってみている
 
長いの
長いの長いの
長いの
 
第2回品川Redmine勉強会(日本語全文検索)
第2回品川Redmine勉強会(日本語全文検索)第2回品川Redmine勉強会(日本語全文検索)
第2回品川Redmine勉強会(日本語全文検索)
 
SocketStream入門
SocketStream入門SocketStream入門
SocketStream入門
 
計算機理論入門09
計算機理論入門09計算機理論入門09
計算機理論入門09
 
20130228 Goノススメ(BPStudy #66)
20130228 Goノススメ(BPStudy #66)20130228 Goノススメ(BPStudy #66)
20130228 Goノススメ(BPStudy #66)
 
Perl勉強会#2資料
Perl勉強会#2資料Perl勉強会#2資料
Perl勉強会#2資料
 
Exgettextの話
Exgettextの話Exgettextの話
Exgettextの話
 
C++コミュニティーの中心でC++をDISる
C++コミュニティーの中心でC++をDISるC++コミュニティーの中心でC++をDISる
C++コミュニティーの中心でC++をDISる
 
Xbyakの紹介とその周辺
Xbyakの紹介とその周辺Xbyakの紹介とその周辺
Xbyakの紹介とその周辺
 

More from yayugu

効率的なアプリ開発のベストプラクティス
効率的なアプリ開発のベストプラクティス効率的なアプリ開発のベストプラクティス
効率的なアプリ開発のベストプラクティスyayugu
 
Procon 2010/10/16
Procon 2010/10/16Procon 2010/10/16
Procon 2010/10/16yayugu
 
Mitoh youth presen 2010/10/30
Mitoh youth presen 2010/10/30Mitoh youth presen 2010/10/30
Mitoh youth presen 2010/10/30yayugu
 
Auaubook
AuaubookAuaubook
Auaubookyayugu
 
Seika happyou
Seika happyouSeika happyou
Seika happyouyayugu
 
プログラミングとは
プログラミングとはプログラミングとは
プログラミングとはyayugu
 
Twitter20
Twitter20Twitter20
Twitter20yayugu
 
Twitter20
Twitter20Twitter20
Twitter20yayugu
 

More from yayugu (8)

効率的なアプリ開発のベストプラクティス
効率的なアプリ開発のベストプラクティス効率的なアプリ開発のベストプラクティス
効率的なアプリ開発のベストプラクティス
 
Procon 2010/10/16
Procon 2010/10/16Procon 2010/10/16
Procon 2010/10/16
 
Mitoh youth presen 2010/10/30
Mitoh youth presen 2010/10/30Mitoh youth presen 2010/10/30
Mitoh youth presen 2010/10/30
 
Auaubook
AuaubookAuaubook
Auaubook
 
Seika happyou
Seika happyouSeika happyou
Seika happyou
 
プログラミングとは
プログラミングとはプログラミングとは
プログラミングとは
 
Twitter20
Twitter20Twitter20
Twitter20
 
Twitter20
Twitter20Twitter20
Twitter20
 

卒研発表