内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
📝雑記
»
📝パスワードつき画像
memo:image-pass
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 📝パスワードつき画像 ====== 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 インストール済みなら表示されるかも?)|
memo/image-pass.txt
· 最終更新: 2018/11/29 19:55 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ