この文書の現在のバージョンと選択したバージョンの差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
imgpass [2018/11/25 21:39] 管理者 [デモ] |
— (現在) | ||
---|---|---|---|
ライン 1: | ライン 1: | ||
- | ====== パスワードつき画像 ====== | ||
- | 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:20171115_pdfpass.pdf" | ||
- | type="application/pdf" width="300" height="300"> | ||
- | <a href="https://www.achiachi.net/blog/lib/exe/fetch.php?media=media:20171115_pdfpass.pdf">PDFファイルダウンロード</a> | ||
- | </object> | ||
- | </html> | ||
- | |||
- | https://www.achiachi.net/blog/lib/exe/fetch.php?media=media:20171115_pdfpass.pdf | ||
- | |||
- | ===== 説明 ===== | ||
- | PDFファイルをパスワード付けて作成します。PDF作成にはAdobe Acrobatやフリーソフトなどパスワード付けて保存できる編集ソフトを使います。私はLiberOfficeのDrawを使用しました。 | ||
- | |||
- | パスワード付きで保存したPDFをアップロードし、Webサイトの表示したい部分に次のタグを書き込みます。(widthとheightは各自で調整してください)、中央のa要素はobject非対応ブラウザやPDFビュワーの無い時用にダウンロードを表示します。 | ||
- | |||
- | <code html> | ||
- | <object data="PDFファイルのアドレス" type="application/pdf" width="300" height="300"> | ||
- | <a href="PDFファイルのアドレス">PDFファイルのダウンロード</a> | ||
- | </object> | ||
- | </code> | ||
- | |||
- | ===== 注意 ===== | ||
- | ブラウザによって動作が違います | ||
- | ^Firefox|object部分にパスワード入力表示| | ||
- | ^Google Chrome|object部分にパスワード入力表示| | ||
- | ^Opera|object部分にパスワード入力表示| | ||
- | ^Microsoft EDGE|ページ表示した時にパスワード入力のダイアログ表示、1ページに1つしか設置できない| | ||
- | ^IE11|ダウンロードしてPDFビューワーで表示(Adobe AcrobatReader インストール済みなら表示されるかも?)| | ||