あちあち情報局

趣味や日曜プログラムなどを書いています

ユーザ用ツール

サイト用ツール


サイドバー

メニュー

現在リニューアル中

タグ一覧

imgpass

以前のリビジョンの文書です


パスワードつき画像

Webサイトにアップロードする画像をパスワードを知っている人しか見られないようにするには通常.htaccessによるアクセス制御かパスワード付きのZIP圧縮する方法が一般的ですが、.htaccessはFTP側からは制限ができず、ZIP圧縮ではダウンロードして展開(解凍)作業が必要になります。

FTP側から見ても暗号化されていて、ダウンロードと展開作業が不要な方法を考えてみると、PDFのパスワード設定とhtmlのobject要素を使えばWebサイト上でパスワードを入力するだけで画像が表示できます。

閲覧にはPDFビュワーが必要ですが最近のブラウザはインストール済み、入って無くても各種OS用のPDFビュワーが無料で入手できます。

デモ

Windows版のChrome/Firefox/EDGE/Operaで試して下さい(IEはダウンロードリンクになる事があります)

※Edgeのver42だと表示されなくなりました。リンクをクリックしてください。

パスワードに「test」と入力すると画像が表示されます。(PDFビューワーが無い場合はダウンロードリンクが表示されます)

PDFファイルダウンロード

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ビュワーの無い時用にダウンロードを表示します。

<object data="PDFファイルのアドレス" type="application/pdf" width="300" height="300">
  <a href="PDFファイルのアドレス">PDFファイルのダウンロード</a>
</object>

注意

ブラウザによって動作が違います

Firefoxobject部分にパスワード入力表示
Google Chromeobject部分にパスワード入力表示
Operaobject部分にパスワード入力表示
Microsoft EDGEページ表示した時にパスワード入力のダイアログ表示、1ページに1つしか設置できない
IE11ダウンロードしてPDFビューワーで表示(Adobe AcrobatReader インストール済みなら表示されるかも?)
imgpass.1543149563.txt.gz · 最終更新: 2018/11/25 21:39 by 管理者