PDFをLightbox風に表示する『LightWindow』(Androidはキビしい。。)

2019/03/05 What's Up, サイト制作, 技術系 投稿者:竹内

「PDFをWebサイトに掲載したい」という要望を受けました。
PDFよりもPNGやJPG画像の方が良いのですが、「エクセルファイル → PDFは出来るが、画像化は出来ないのでPDFで更新したい」というお客様も多いのです。

Webサイト上にPDFのリンクを設置しクリックするとブラウザ機能のPDFビューワー表示で立ち上がったり、別途PDFビューワーアプリが立ち上がったりするのであまりスマートではありません。
閲覧者がPDFであることを意識せずにPDFを開けるような挙動を目指したいと思いまして、「PDFをLightbox風に表示する」ことを目標に設定しました。


結果からお話すると、
今回の検証では、スマホ対応の部分で満足いく結果が得られませんでした。

まずは調査

まずはどんな手法が良いか調査してみました。

Lightboxでは対応していない

試しに、Lightboxの画像指定の箇所をPDFに差し替えてみましたが、サムネイルもクリック後の挙動も対応していませんでした。

HTML5で対応しているか?

objectタグでPDFの指定が出来るとのことですが、PDFがブラウザ内で立ち上がるだけのようです。今回の目的は「Lightbox風に立ち上げる」ことですので別の手法を探します。

LightWindowでPDFを表示する

調べましたところ、「LightWindow」が良いらしいので試してみたいと思います。

ファイルのダウンロードと実装

LightWindow V2.0
http://www.p51labs.com/lightwindow/

公式サイトからファイルをダウンロードしてさっくりと実装してみます。
ダウンロードしたファイルを展開し、.jsと.cssとローディングアイコンや背景画像を適宜配置します。
lightwindow.js内、lightwindow.css内にローディングアイコンや黒背景の画像を読み込む箇所がありますので、環境にあわせて画像ファイルのパスを調整します。

HTML側は公式サイトの実装方法のPDFの箇所を見ながら設定します。

※ PDFファイルは相対パスではなく「https://~~」と書かないとダメみたいです。

lightwindow.js内の画像パスを調整

3箇所ありました。「images」でファイル内検索を行うと該当箇所を見つけやすいと思います。
今回は common/images/ 内に画像ファイルを置いたので common/ を付け足しています。

HTMLへ組み込み

[JavaScript]の設置と[div]でPDFを読み込みます。

想定どおりの挙動となり良い感じに設置出来ました。

しかし、
GoogleChromeの開発ツールのエミュレータでは正常動作したのですが、スマートフォンの実機ではPDFがウィンドウからはみ出してしまい、スクロール等で隠れている部分を表示したりすることが出来ません。

スマートフォン対応出来るか挑戦します

公式サイトでは、「ブラウザサイズが極端に大きくなければ対応していますよ」といったことが書かれています。
スクリプト内やCSS内を確認しましたところ、ウィンドウ内のPDFサイズを調整する部分はあるようですが、スマートフォンの実機ではその部分が動いていないのかもしれません。
パラメーター設定が出来るようですので試してみます。

ウィンドウサイズとウィンドウタイプをそれぞれ指定してあげることでスマートフォンでも無事はみ出ることなく表示されました。
が、今度はlightwindow_type=imageをつけるとPCでは動作しないという状況になってしまいました。
結局は下の通りに記述を行い、CSSでPCとスマートフォンで表示を切り替える方法を取ることに。。。
(デモページではCSSでの切り替えを行わず、PCとスマートフォンの両方を表示しています。)

さらにAndroidでうまくいかない

AndroidのスマートフォンではPDFを開くときにどうしてもダウンロード表示が出て、アプリを起動するよう誘導されてしまいます。
これであれば、単純なPDFファイルへのリンクの方が挙動としてスマートです。

まとめ

PCではうまく動作し、調整を加えればiOSでも見やすく正常に動作しました。

大問題なのはAndroid端末でのPDFの挙動です。AndroidOS依存なのでしょうが、スムーズに表示することが出来ませんでした。
Androidでは実装すると逆効果になってしまうので致命的です。

私の考えですが「PDFであることを意識せずに閲覧させる」この行為がGoogleのポリシーに反するのかもしれません。

今回の検証では満足する結果が得られませんでした。実装方法もPCとスマートフォン両方の記述を行うというスマートではない手法となってしまいました。

次回は別の手法を試して、もっとスマートにPDFの閲覧が出来るようにしたいと思います。

Windows 7 の延長サポート終了まで

days
1
1
6
hours
0
5
minutes
3
8
seconds
2
9

Office 2010 の延長サポート終了まで

days
3
8
9
hours
0
5
minutes
3
8
seconds
2
9

カレンダー

      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
    123
45678910
11121314151617
18192021222324
25262728   
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
   1234
567891011
12131415161718
19202122232425
262728    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

U・Iターン転職しませんか?
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)