20190907 c4ljpconf2019 pre

Transcript

1. 
   %
   
   #
   
   
   "!
   $
   $
   
   !
   "
   
   # 1
   201997
   Code4Lib JAPAN Conference 2019
   
   

   View Slide

2. 
   • AVQL IJ&KP
   -<,/9=)*6
   &
   • /028:7<(0
   ">E
   NU
   • >ES
   • 5'(;&5+;1-4#T
   )*6.3>E"&GC"
   ORH
   U%
   #!D@?F"$B
   M
   2
   

   View Slide

3. 
   • 75 '*'*# &
   =(%-4$!
   "*+ ),6
   • ;09.>3<JavaScript(Viewer.js)
   2:/8
   71
   3
   

   View Slide

4. 
   
   
   http://www.nier.go.jp/library/rarebooks/ HTML
   
   
   4
   

   View Slide

5. 1
   •
   5
   

   View Slide

6. 2
   •
   6
   

   View Slide

7. 3
   •
   7
   

   View Slide

8. 4
   •
   
   
   
   
   8
   

   View Slide

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

   View Slide

10. 
    
    
    •
    
    • HTML
    • CSS
    • (Bootstrap)
    • JavaScript
    • (Viewer.js)
    • JPG
    • PNG
    • PDF
    10
    

    View Slide

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

    View Slide

12. 
    
    • HA?P
    • #+'3@C
    • S8 #+'3 DU
    M?P
    • • (1-!49TQF.2")7&
    • K=NE/)*"75,
    • HA
    ?P
    • $6,@C
    • @C?PGR$6, $0,
    OV
    $6,BL
    DU9T QF
    ?P
    Viewer.js HA
    HTML37%;
    I
    12
    

    View Slide

13. Viewer.js
    • JavaScript
    •
    
    • https://fengyuanchen.github.io/viewerjs/
    • )
    •
    Release
    • https://github.com/fengyuanchen/viewerjs/releases
    13
    

    View Slide

14. (1)
    
    • )( $ 1JPG,
    
    • +-*1MB!$&145ppi
    • )( $ JPG,
    • +-*100KB (!$&72ppi)
    • , )( $ PDF ,
    
    • )( $JPG'%& #
    • )( $JPG
    " #
    14
    

    View Slide

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;
    

    View Slide

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
    

    View Slide

17. (3)
    
    viewerjs-xxx.zip*
    
    • viewerjs-xxx.zip*
    17
    * 2019.9.4
    
    viewerjs-1.3.6.zip
    USB
    
    !"#
    $
    

    View Slide

18. (4)
    
    HTML
    • viewerjs-xxx/docs/examples
    
    viewer-in-modal.html
    18
    

    View Slide

19. (5)
    HTML
    
    • Lunch the demo
    •
    
    • +
    •
    19
    

    View Slide

20. (6)HTML
    
    
    
    
    
    src="../images/thumbnails/tibet-1.jpg"
    alt="Cuo Na Lake">
    src="../images/thumbnails/tibet-2.jpg”
    alt="Tibetan Plateau">
    
    
    
    20
    

    View Slide

21. View Slide

22. 
    (7)
    
    
    • iwerjs-xxx/docs/images
    
    
    1.jpg 2.jpg22
    

    View Slide

23. (8)
    • viewerjs-xxx/docs/example/
    viewer-in-modal.html
    •
    •
    
    •
    •
    src="../images/thumbnails/tibet-1.jpg" alt="Cuo Na
    Lake">
    src="../images/thumbnails/tibet-2.jpg" alt="Tibetan
    Plateau">
    23
    

    View Slide

24. 24
    
    “tibet-”
    
    

    View Slide

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

    View Slide

26. 
    • .0 '")% !($&
    ,
    • -2+/ !
    ($&1
    *#),
    
    26
    

    View Slide

27. 
    
    
    • ZT>;I@FL
    
    Q7A:viewer.jsP=8G
    • _
    • altOJU[!9NX
    • ,'U[!9NX
    • %0(4D^b
    • 1)"6!a`
    • 2$5-?K• HC1,!
    • ZW9N]\3"+6*(CC BY!VE
    • HTMLWY.#/&!
    • FBtwitter\9NBKMS
    •
    27
    

    View Slide

28. View Slide

29. Viewer.js!
    
    
    
    
    • 97*4JPG,PDF
    • ;/0 )
    368-':
    
    (+15
    !#"%$& 2
    97*4
    • ,. src=“../images/thumbnails/1.jpg” alt=“Cuo Na Lake”>
    
    • 8-src="../images/thumbnails/1.jpg" alt="Cuo Na
    Lake">
    29
    

    View Slide

30. 
    
    
    (1)
    •
    
    30
    

    View Slide

31. 
    
    
    (2)
    31
    
    src="../images/thumbnails/tibet-1.jpg"
    alt="Cuo Na Lake">1
    src="../images/thumbnails/tibet-2.jpg”
    alt="Tibetan Plateau">2
    

    View Slide

32. PDF
    
    32
    
    
    
    
    
    
    

    View Slide

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

    View Slide

34. HTML
    (2)
    • https://validator.w3.org/
    • Validate by File Upload
    •
    
    • Check
    • OK
    34
    

    View Slide