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
130
2022-11-16-lf2022-da
yegusa
0
250
2022-11-15-lf2022-enju
yegusa
0
200
2022-10-21-jp-cos-jp-textbook-LOD-intro
yegusa
0
340
2022-09-04-c4ljpconf-10th-anniversary
yegusa
0
160
2021-11-26-LF2021-Enju
yegusa
0
250
c4ljp2021 presentation
yegusa
0
300
2020-11-27 Find Resources
yegusa
0
200
2020-11-04 saveMLAK LibraryFair2020
yegusa
0
200
Other Decks in Technology
See All in Technology
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
190
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
200
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
120
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
130
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
160
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
360
o11yで育てる、強い内製開発組織
_awache
3
120
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
430
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
0
150
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
130
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
480
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
1.1k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
RailsConf 2023
tenderlove
30
1.2k
Embracing the Ebb and Flow
colly
88
4.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Unsuck your backbone
ammeep
671
58k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
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