20190907 c4ljpconf2019 pre

Transcript

1.  % #   "! $
   $  ! "   # 1 201997 Code4Lib JAPAN Conference 2019 
   
2. 
   • AVQ
   L 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 PHP
   PostgreSQL3%'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
    =N
    E/)
    *"75, • HA ?P • $6,@C • @C?P
    GR$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\9NBK
    MS •
    
    
    
    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