memo:image-pass

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- memo:image-pass [2018/11/29 19:54] – [はじめに] 管理者
+++ memo:image-pass [2018/11/29 19:55] (現在) – [注意] 管理者
@@ 行 1: / 行 1: @@
+====== 📝パスワードつき画像 ======
+Web画像にパスワードをつける方法
+----
+===== はじめに =====
+Webサイトにアップロードする画像をパスワードを知っている人しか見られないようにするには通常.htaccessによるアクセス制御かパスワード付きのZIP圧縮する方法が一般的ですが、.htaccessはFTP側からは制限ができず、ZIP圧縮ではダウンロードして展開(解凍)作業が必要になります。
+FTP側から見ても暗号化されていてダウンロードと展開作業が不要な方法を考えると、PDFのパスワード設定とhtmlのobject要素を使えばWebサイト上でパスワードを入力するだけで画像が表示できそうだと気が付きました。
+閲覧にはPDFビュワーが必要ですが最近のブラウザはインストール済み、入って無くても各種OS用のPDFビュワーが無料で入手できます。
+===== デモ =====
+Windows版のChrome/Firefox/<del>EDGE</del>/Operaで試して下さい(IEはダウンロードリンクになる事があります)
+※Edgeはver42だと表示されません。ダウンロードをクリックしてご覧ください。
+パスワードに「test」と入力すると画像が表示されます。（PDFビューワーが無い場合はリンクからダウンロードしてください）
+<html>
+<object data="https://www.achiachi.net/blog/lib/exe/fetch.php?media=media:201711:20171115_pdfpass.pdf"
+type="application/pdf" width="300" height="300">
+</object>
+<p><a href="https://www.achiachi.net/blog/lib/exe/fetch.php?media=media:201711:20171115_pdfpass.pdf">PDFファイルダウンロード</a></p>
+</html>
+===== 説明 =====
+PDFファイルをパスワード付けて作成します。PDF作成にはAdobe Acrobatやフリーソフトなどパスワード付けて保存できる編集ソフトを使います。私はLiberOfficeのDrawを使用しました。
+パスワード付きで保存したPDFをアップロードし、Webサイトの表示したい部分に次のタグを書き込みます。（widthとheightは各自で調整してください）、後述のa要素はobject非対応ブラウザ用のダウンロードです（本来はダウンロードはobjectタグの内側に書いた方が良いのですがブラウザがEdgeだと正しく動作しないのでobject外に出しています）
+<code html>
+<object data="PDFファイルのアドレス" type="application/pdf" width="300" height="300">
+</object>
+<p><a href="PDFファイルのアドレス">PDFファイルのダウンロード</a></p>
+</code>
+===== 注意 =====
+ブラウザによって動作が違います
+^Firefox|object部分にパスワード入力表示|
+^Google Chrome|object部分にパスワード入力表示|
+^Opera|object部分にパスワード入力表示|
+^Microsoft EDGE|<del>ページ表示した時にパスワード入力のダイアログ表示、1ページに1つしか設置できない</del> → ver42だと表示されません|
+^IE11|ダウンロードしてPDFビューワーで表示(Adobe AcrobatReader インストール済みなら表示されるかも？)|