この文書の現在のバージョンと選択したバージョンの差分を表示します。
両方とも前のリビジョン 前のリビジョン | |||
memo:image-pass [2018/11/29 19:55] 管理者 [注意] |
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 インストール済みなら表示されるかも?)| | ||