リソースが読み込まれない

Download as PDF

問題

リソースが読み込まれない理由は？

ソリューション

新しいタブでURLに移動する際、リソースを正しく読み込んで表示する必要があります。 そうでない場合、そのフォーマットはリソースとして利用できません。

リソースがLightboxでは読み込まれないが、新しいタブでリンクを開くと正常に読み込まれる場合、問題の原因はおそらくウェブサイトのX-Frame-Optionsにあります。 これはつまり、Lightboxで読み込もうとしているウェブサイトの読み込みが、表示しようとしているページ上のiFrameで妨害されているということです（LightboxはiFrameだからです）。 この設定を管理できるのはサイト管理者のみです。 X-Frame-Optionsの詳細については、こちらを参照してください。

この一般的な例としては、Dropboxのリンク、Zendeskの記事、一部のPDF、動画などがあります。 ここで重要なのは、 大部分のサイトがX-Frame-Optionsのヘッダーを利用している、ということです。

読み込もうとしてるリソースがファイルタイプで（.pdfまたは.mp4など）、Lightboxで読み込まれない場合は、サポート にご連絡ください。これらのファイルをサーバーにアップロードし、Lightboxでレンダリングできる可能性があるリンクをお送りします（これは、通常のウェブページでは不可能です）。

Google DocsまたはGoogle Driveからのリンクまたはファイルを利用しようとしている場合、詳細についてはこちらを参照してください。

Lightboxでリソースを開こうとする際にサーバーエラーは表示されますか？ この場合、リソースのURLに特殊な文字があるかどうかを確認します。

• リソースのURLに「%」という文字がある場合、それがサーバーエラー発生の理由である可能性があります。 通常、ホストされたファイルにスペースがある場合、URLでは言葉と言葉の間にあるスペースを埋めるために「%20」が使われます。 例えば、リソース用のホストされた動画のURLが次のようなものだったとします。https://econtent.t-mobile.com/econtent/HR_Resources/Workday/Manager_Resources/Videos/Job%20Change%20Comp%20and%20Position.MP4
• このURLをリソースでそのままコピー＆ペーストして開こうとすると、URLがDOM内で変更されることがわかります。
  • 上のスクリーンショットから分かるように、iFrameで読み込まれるURLは次のようになりました。https://econtent.t-mobile.com/econtent/HR_Resources/Workday/Manager_Resources/Videos/Job%2520Change%2520Comp%2520and%2520Position.MP4
  • 元のURLにある「20」の前に、「25」が挿入されていることが分かります。 こういうことになるのは、URLのインターネット上での送信にはASCIIフォーマットを利用しなければならず、そのためには特殊文字またはスペースは新しいフォーマットに変換する必要があるためです。 上記の例では、もともと「20」の前にあった文字「%」が、このフォーマットに一致するように「%25」に変換されてしまいました。 この問題を解決するには、リソースのURLを編集し、「%20」を削除して言葉と言葉の間にスペース文字を入れます。https://econtent.t-mobile.com/econtent/HR_Resources/Workday/Manager_Resources/Videos/Job Change Comp and Position.MP4
  • こうすれば、iFrameが自動的に「%20」を挿入して有効なURLに変えるため、サーバーエラーメッセージも発生せず、問題は解決します。