Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
20190907 c4ljpconf2019 pre
Yuka Egusa
September 07, 2019
Technology
0
57
20190907 c4ljpconf2019 pre
Yuka Egusa
September 07, 2019
Tweet
Share
More Decks by Yuka Egusa
See All by Yuka Egusa
2021-11-26-LF2021-Enju
yegusa
0
61
c4ljp2021 presentation
yegusa
0
140
2020-11-27 Find Resources
yegusa
0
120
2020-11-04 saveMLAK LibraryFair2020
yegusa
0
85
2020-10-24 IFLA LRM
yegusa
0
65
小規模図書館における”必要十分な”デジタルアーカイブの構築について / Development of Digital Archives in small libraries, 2020
yegusa
2
530
20190923-DCMI2019-textbookLOD
yegusa
0
150
20190908 c4ljpconf LT
yegusa
0
94
小規模図書館における”必要十分な”デジタルアーカイブの構築について / Development of Digital Archives in Small Libraries
yegusa
0
630
Other Decks in Technology
See All in Technology
Who owns the Service Level?
chaspy
5
750
mROS 2のススメ
takasehideki
0
290
モデリング、コンテキスト トランジション +1 / Data modeling
ishiayaya
0
110
Devに力を授けたいSREのあゆみ / SRE that wants to empower developers
tocyuki
3
450
如何使用 Argo Event& Workflow 快速建置自定義的工作流程 @ #CNTUG #47
line_developers_tw
PRO
0
4.3k
⚡Lightdashを試してみた
k_data_analyst
0
140
20220510_簡単にできるコスト異常検出(Cost Anomaly Detection) /jaws-ug-asa-cost-anomaly-detection-20220510
emiki
2
310
HTTP Session Architecture Pattern
chiroito
1
380
Microsoft 365の中でのPower BIの利用 / M365VM2022
ishiayaya
0
1.5k
Adopting Kafka for the #1 job site in the world
ymyzk
1
270
220510 プロセスマイニングを学ぶ PLAY与田さん
comucal
PRO
0
640
Microsoft Power Automate で 始めるRPAと自動化
taikiyoshida
0
2k
Featured
See All Featured
Happy Clients
brianwarren
89
5.5k
Navigating Team Friction
lara
175
11k
A designer walks into a library…
pauljervisheath
196
16k
Web Components: a chance to create the future
zenorocha
303
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
21
14k
Git: the NoSQL Database
bkeepers
PRO
415
59k
Faster Mobile Websites
deanohume
294
28k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
268
11k
Debugging Ruby Performance
tmm1
65
10k
GitHub's CSS Performance
jonrohan
1020
410k
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