Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20190907 c4ljpconf2019 pre
Search
Yuka Egusa
September 07, 2019
Technology
0
140
20190907 c4ljpconf2019 pre
Yuka Egusa
September 07, 2019
Tweet
Share
More Decks by Yuka Egusa
See All by Yuka Egusa
2023-11-24-dashorttalk
yegusa
0
120
2022-11-16-lf2022-da
yegusa
0
240
2022-11-15-lf2022-enju
yegusa
0
180
2022-10-21-jp-cos-jp-textbook-LOD-intro
yegusa
0
310
2022-09-04-c4ljpconf-10th-anniversary
yegusa
0
140
2021-11-26-LF2021-Enju
yegusa
0
230
c4ljp2021 presentation
yegusa
0
290
2020-11-27 Find Resources
yegusa
0
200
2020-11-04 saveMLAK LibraryFair2020
yegusa
0
190
Other Decks in Technology
See All in Technology
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
380
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
230
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
150
Operating Operator
shhnjk
1
580
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
OPENLOGI Company Profile for engineer
hr01
1
34k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
250
What’s new in Android development tools
yanzm
0
310
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Cult of Friendly URLs
andyhume
79
6.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
For a Future-Friendly Web
brad_frost
179
9.8k
Code Reviewing Like a Champion
maltzj
524
40k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Music & Morning Musume
bryan
46
6.6k
Become a Pro
speakerdeck
PRO
29
5.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Transcript
% # "! $ $
! " # 1 201997 Code4Lib JAPAN Conference 2019
• 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
• 75 '*'*# & =(%-4$! "*+ ),6 •
;09.>3<JavaScript(Viewer.js) 2:/8 71 3
http://www.nier.go.jp/library/rarebooks/ HTML
4
1 • 5
2 • 6
3 • 7
4 • 8
• 5@>9?< Apache :7 •
#) ,#)48/(2 PHPPostgreSQL3%'2 AC • ,,1$*0-1"33 %'2AC Flash; • 5@> ;6=+!.&' (JPG,PNG,PDF ;B • 9
• • HTML •
CSS • (Bootstrap) • JavaScript • (Viewer.js) • JPG • PNG • PDF 10
• 8< " #"
# -' 9/ • G>H" #" # • 41G0D+%=2,*6+%;7()53E !" # • https://www.nier.go.jp/library/rarebooks/ • F3E<300A$C@B • .: • .: 3E?& @B 11
• 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
Viewer.js • JavaScript • • https://fengyuanchen.github.io/viewerjs/ •
) • Release • https://github.com/fengyuanchen/viewerjs/releases 13
(1) • )( $ 1JPG, •
+-*1MB!$&145ppi • )( $ JPG, • +-*100KB (!$&72ppi) • , )( $ PDF , • )( $JPG'%& # • )( $JPG " # 14
(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;
(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
(3) viewerjs-xxx.zip* • viewerjs-xxx.zip* 17 *
2019.9.4 viewerjs-1.3.6.zip USB !"# $
(4) HTML • viewerjs-xxx/docs/examples viewer-in-modal.html
18
(5) HTML • Lunch the demo
• • + • 19
(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
(7) • iwerjs-xxx/docs/images
1.jpg 2.jpg22
(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 “tibet-”
(9) • viewerjs-xxx/docs/example/ viewer-in-modal.html → 25
• .0 '")% !($& , •
-2+/ ! ($&1 *#), 26
• 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
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
(1) • </li> 30
(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>
PDF 32 <ul> <li><a href="../images/normal.pdf"> </a></li> <li><a href="../images/orgdata.pdf">
</a></li> </ul>
HTML (1) • HTML4 2 #$!
%+ • The W3C Markup Validation Service https://validator.w3.org/ • -175.92 '*& "(, )68 2 : • 0368 #$! / 33
HTML (2) • https://validator.w3.org/ • Validate by File
Upload • • Check • OK 34