$30 off During Our Annual Pro Sale. View Details »

20190907 c4ljpconf2019 pre

Yuka Egusa
September 07, 2019

20190907 c4ljpconf2019 pre

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.       http://www.nier.go.jp/library/rarebooks/ HTML  

     4
  5. 1 •  5

  6. 2 •  6

  7. 3 •  7

  8. 4 •        8

  9.     • 5@>9?< Apache  :7 •

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

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

    # -' 9/ • G>H" #" # • 41G0D+%=2,*6+%;7()53E !" # • https://www.nier.go.jp/library/rarebooks/ • F3E<300A$C@B • .: • .: 3E?& @B 11
  12.   • 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
  13. Viewer.js • JavaScript •   • https://fengyuanchen.github.io/viewerjs/ • 

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

    +-*1MB!$&145ppi • )( $  JPG, • +-*100KB (!$&72ppi) • , )( $ PDF ,  • )( $JPG'%& # • )( $JPG " # 14
  15. (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;
  16. (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
  17.  (3)   viewerjs-xxx.zip*  • viewerjs-xxx.zip* 17 *

    2019.9.4  viewerjs-1.3.6.zip     USB !"#   $
  18. (4)  HTML   • viewerjs-xxx/docs/examples   viewer-in-modal.html

     18
  19. (5) HTML    • Lunch the demo 

      •     •  +  •   19
  20.  (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
  21. 21

  22.  (7)    • iwerjs-xxx/docs/images   

        1.jpg 2.jpg22
  23. (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
  24. 24  “tibet-”  

  25. (9) • viewerjs-xxx/docs/example/ viewer-in-modal.html  →  25

  26.  • .0 '")%  !($& ,   •

    -2+/ ! ($&1 *#),  26
  27.         • 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
  28.    28

  29. 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
  30.    (1) • </li>    30

  31.    (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>
  32. PDF  32 <ul> <li><a href="../images/normal.pdf">  </a></li> <li><a href="../images/orgdata.pdf">

    </a></li> </ul>
  33.     HTML (1) • HTML4 2 #$!

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

    Upload  •    • Check   • OK 34