Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20190907 c4ljpconf2019 pre

Avatar for Yuka Egusa Yuka Egusa
September 07, 2019

20190907 c4ljpconf2019 pre

Avatar for Yuka Egusa

Yuka Egusa

September 07, 2019
Tweet

More Decks by Yuka Egusa

Other Decks in Technology

Transcript

  1.  % #   "! $  $ 

    ! "   # 1 201997 Code4Lib JAPAN Conference 2019 
  2.  • AVQL IJ&KP -<,/9=)*6 & • /028:7<(0 ">E NU

    • >E   S  • 5'(;&5+;1-4#T )*6.3>E "&GC"  ORH U% # !D@?F "$B M 2
  3.  • 75 '*'*# & =(%-4$! "*+ ),6  •

    ;09.>3<JavaScript(Viewer.js) 2:/8 71  3
  4.     • 5@>9?< Apache  :7 •

    #) ,#)48/(2 PHPPostgreSQL3%'2 AC  •  ,,1$*0-1"33 %'2AC Flash; • 5@> ;6=+!.&' (JPG,PNG,PDF ;B  •       9
  5.    •    • HTML •

    CSS • (Bootstrap) • JavaScript • (Viewer.js) • JPG • PNG • PDF 10
  6.     • 8<  " #" 

    # -' 9/ • G>H" #" # • 41G0D+%=2,*6+%;7()53E !" # • https://www.nier.go.jp/library/rarebooks/ • F3E<300A$C@B • .: • .: 3E?& @B 11
  7.   • HA ?P • #+'3@C •  S8

    #+'3 DU M?P • <J:T?P • (1-!49TQF.2")7& • <J>K=NE/)*"75, • HA ?P • $6,@C • @C?PGR$6, $0, OV  $6,BL DU9T QF  ?P Viewer.js HA HTML37%<a href=…HA ; I 12
  8. Viewer.js • JavaScript •   • https://fengyuanchen.github.io/viewerjs/ • 

    ) •   Release  • https://github.com/fengyuanchen/viewerjs/releases 13
  9. (1)    • )( $ 1JPG,  •

    +-*1MB!$&145ppi • )( $  JPG, • +-*100KB (!$&72ppi) • , )( $ PDF ,  • )( $JPG'%& # • )( $JPG " # 14
  10. (1)’      • =%98!( 6!* '/@5

    • http://www.nier.go.jp/library/rarebooks/painting/370.9 8-314/ • ,F&7-)$2&53"#1.G  • :0<+4 D C  15 >? USBABE;
  11. (2) Viewer.js   • Viewer.js !!  • https://github.com/fengyuanchen/viewerjs/releases

    • %-' Source code (zip)$! 16 "/: 2019.9.4&)  viewerjs-1.3.6.zip *+ USB ! ,.0( $# 1
  12.  (3)   viewerjs-xxx.zip*  • viewerjs-xxx.zip* 17 *

    2019.9.4  viewerjs-1.3.6.zip     USB !"#   $
  13. (5) HTML    • Lunch the demo 

      •     •  +  •   19
  14.  (6)HTML       <ul class="pictures">

    <li><img data-original="../images/tibet-1.jpg" src="../images/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li> <li><img data-original="../images/tibet-2.jpg" src="../images/thumbnails/tibet-2.jpg” alt="Tibetan Plateau"></li>    20
  15. 21

  16. (8) • viewerjs-xxx/docs/example/ viewer-in-modal.html  •   • 

      •  •   <li><img data-original="../images/tibet-1.jpg" src="../images/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li> <li><img data-original="../images/tibet-2.jpg" src="../images/thumbnails/tibet-2.jpg" alt="Tibetan Plateau"></li> 23
  17.  • .0 '")%  !($& ,   •

    -2+/ ! ($&1 *#),  26
  18.         • ZT>;I@FL

      Q7A:viewer.js P=8G • _ • altOJU[!9NX • <title>,'U[!9NX • %0(4D^b  • 1)"6!a` • 2$5-?K<R • HC1,!  • ZW9N]\3"+6*(CC BY!VE • HTMLWY.#/&! • FBtwitter\9NBKMS •  27
  19. Viewer.js!        • 97*4JPG,PDF

    • ;<ul></ul>  /0 ) 36 8- ':  (+15 !#"%$& 2 97*4 • ,.<li> <img data-original=“../images/1.jpg” src=“../images/thumbnails/1.jpg” alt=“Cuo Na Lake”> </li> • 8-<li><a href=="../images/1.jpg”><img src="../images/thumbnails/1.jpg" alt="Cuo Na Lake"></a></li> 29
  20.    (2) 31 <ul class="pictures"> <li><img data-original="../images/tibet-1.jpg" src="../images/thumbnails/tibet-1.jpg"

    alt="Cuo Na Lake">1</li> <li><img data-original="../images/tibet-2.jpg" src="../images/thumbnails/tibet-2.jpg” alt="Tibetan Plateau">2</li>
  21.     HTML (1) • HTML4 2 #$!

     %+ • The W3C Markup Validation Service https://validator.w3.org/ • -175.92 '*& "(, )68 2 : • 0368 #$! /  33
  22. HTML  (2) • https://validator.w3.org/  • Validate by File

    Upload  •    • Check   • OK 34