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
110
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
68
2022-11-16-lf2022-da
yegusa
0
200
2022-11-15-lf2022-enju
yegusa
0
120
2022-10-21-jp-cos-jp-textbook-LOD-intro
yegusa
0
180
2022-09-04-c4ljpconf-10th-anniversary
yegusa
0
86
2021-11-26-LF2021-Enju
yegusa
0
180
c4ljp2021 presentation
yegusa
0
220
2020-11-27 Find Resources
yegusa
0
160
2020-11-04 saveMLAK LibraryFair2020
yegusa
0
140
Other Decks in Technology
See All in Technology
VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの理想的な分離を目指して~ / 20241019_cloudsign_VueFesJapan2024_1
bengo4com
8
4.9k
最新のWasm事情
askua
5
2.6k
Amplify Gen 2ではじめる 生成AIアプリ開発入門
tsukuboshi
0
410
Vue.js、Nuxtの機能を使い、 大量のコピペコードをリファクタリングする
igayamaguchi
3
1.7k
0x5F3759DF
ykozw
0
370
S3上のログを分析したいだけなのに
mitsuo_sys
0
130
自然言語処理を役立てるのはなぜ難しいのか
pfn
PRO
17
4.6k
WebRTC と AI の組み合わせ
tnoho
0
390
40代後半で開発エンジニアからクラウドインフラエンジニアにキャリアチェンジし、生き残れる自信がようやく持てた話
iwamot
9
8.3k
JPOUG_10_20241018_OracleDB_AWS_v1.3.pdf
asahihidehiko
1
200
巨大企業でDX革新を起こすということ BTCONJP 2024
yamaken66
1
490
データ分析基盤のためにS3を深堀りする~アーキテクチャ設計の考え方のヒントに~
nrinetcom
PRO
1
790
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
43
13k
A Tale of Four Properties
chriscoyier
156
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.7k
How to Ace a Technical Interview
jacobian
275
23k
Agile that works and the tools we love
rasmusluckow
327
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Navigating Team Friction
lara
183
14k
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
350
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