風柳メモ

ソフトウェア・プログラミング関連の覚書が中心

FileZillaでアップロードしたときに、タイムスタンプが維持されないレンタルサーバに困っている

FileZillaを使用してファイルをアップロードした際に、レンタルサーバによっては、タイムスタンプが維持されないことがあり、割と困っていたりする。
具体的には、ファーストサーバのレンタルサーバを使用していると、タイムスタンプが維持されない(少なくとも自分が会社で使用しているマネージド共有・専用サーバーにおいては。Zenlogic等の比較的新しいサービスについては不明)。
当然ながら、転送(T)→転送したファイルのタイムスタンプを維持(P)には、チェックが入っている前提。

回避方法があれば、ご教示ください。
まぁ、FFFTPでは、ファーストサーバにおいてもタイムスタンプが維持されるようなので、そちらを使えばいいという話もあるのだが……ただ FFFTPは、逆にダウンロード時にタイムスタンプが維持されなかったり等の問題があった気がするんだよな……(うろ覚え)。

レンタルサーバの比較

レンタルサーバのサービス元 アップロード時のタイムスタンプの維持 詳細
ファーストサーバ × アップロードした時刻になってしまう
お名前.com(GMO) 秒の単位については0にされてしまう
また、半年以上前のファイルは、FileZillaで見ると日の単位までしかタイムスタンプが表示されない(ダウンロードすると、分の単位までは一致)
さくらインターネット 秒の単位まで維持される

いずれもプレーンなFTPを使用した場合。
FTP over TLSや、SFTPを使用した場合には結果が異なるかもしれないが、現時点では細かくは検証していない(ただ、ファーストサーバ・お名前.comはFTP over TLSで、さくらはSFTPで常用しているが、結果は変わらなかった気がする←これもうろ覚え)。

手動で FTP ログインしたときのサポートコマンド表示

tadtak.jugem.jp
の記事中に、

クライアントは FileZilla。FileZilla は Wikipedia によると、

FTPの場合、サーバがMFMTコマンドをサポートする場合のみ、アップロードされたファイルの日付/タイムスタンプ属性が保持される。
SFTPの場合、FileZilla 3.0.8 以降では同属性が保持される

らしいです。

vsftpd 経由で ftp アップロードするとタイムスタンプを維持してくれない | 日頃の行い

という記述があり、実際、

アップロード

  • FTPモード: サーバがMFMTコマンドをサポートする場合のみ、アップロードされたファイルの日付/タイムスタンプ属性が保持される。
  • SFTPモード: FileZilla Client 3.0.8 以降では同属性が保持される。
FileZilla - Wikipedia

となっている。

そこで、試しに各レンタルサーバに手動でログインしてもみると……いずれもMFMTコマンドはサポートされていない……?
ということは、FileZillaでも、MFMTコマンド以外でタイムスタンプを維持する努力はしているが、ファーストサーバではそれもうまくいっていないということ……?

ファーストサーバ
$ telnet ftp.***.*** ftp
Trying ***.***.***.***...
Connected to ftp.***.***.
Escape character is '^]'.
220 Firstserver FTP Server Ready
user ***
331 Password required for ***
pass ***
230 User *** logged in
help
214-The following commands are recognized (* =>'s unimplemented):
 CWD     XCWD    CDUP    XCUP    SMNT*   QUIT    PORT    PASV
 EPRT    EPSV    ALLO*   RNFR    RNTO    DELE    MDTM    RMD
 XRMD    MKD     XMKD    PWD     XPWD    SIZE    SYST    HELP
 NOOP    FEAT    OPTS    AUTH    CCC*    CONF*   ENC*    MIC*
 PBSZ    PROT    TYPE    STRU    MODE    RETR    STOR    STOU
 APPE    REST    ABOR    USER    PASS    ACCT*   REIN*   LIST
 NLST    STAT    SITE    MLSD    MLST
214 Direct comments to root@***.***.***.***
quit
221 Goodbye.
Connection closed by foreign host.
お名前.com(GMO)
$ telnet ftp.gmoserver.jp ftp
Trying 157.7.144.19...
Connected to ftp.gmoserver.jp.
Escape character is '^]'.
220 ProFTPD 1.3.2d Server (ftp.gmoserver.jp) [157.7.144.19]
user ***@gmoserver.jp
331 Password required for ***@gmoserver.jp
pass ***
230 User ***@gmoserver.jp logged in
help
214-The following commands are recognized (* =>'s unimplemented):
 CWD     XCWD    CDUP    XCUP    SMNT*   QUIT    PORT    PASV
 EPRT    EPSV    ALLO*   RNFR    RNTO    DELE    MDTM    RMD
 XRMD    MKD     XMKD    PWD     XPWD    SIZE    SYST    HELP
 NOOP    FEAT    OPTS    AUTH    CCC*    CONF*   ENC*    MIC*
 PBSZ    PROT    TYPE    STRU    MODE    RETR    STOR    STOU
 APPE    REST    ABOR    USER    PASS    ACCT*   REIN*   LIST
 NLST    STAT    SITE    MLSD
214 Direct comments to root@ftp02-ext.sd.internal-gmo
quit
221 Goodbye.
Connection closed by foreign host.
さくらインターネット
$ telnet ***.sakura.ne.jp ftp
Trying ***.***.***.***...
Connected to ***.sakura.ne.jp.
Escape character is '^]'.
220 ProFTPD 1.3.5a Server (SAKURA Internet FTP Server) [::ffff:***.***.***.***]
user ***
331 Password required for ***
pass ***
230 User *** logged in
help
214-The following commands are recognized (* =>'s unimplemented):
 CWD     XCWD    CDUP    XCUP    SMNT*   QUIT    PORT    PASV
 EPRT    EPSV    ALLO*   RNFR    RNTO    DELE    MDTM    RMD
 XRMD    MKD     XMKD    PWD     XPWD    SIZE    SYST    HELP
 NOOP    FEAT    OPTS    AUTH    CCC*    CONF*   ENC*    MIC*
 PBSZ    PROT    TYPE    STRU    MODE    RETR    STOR    STOU
 APPE    REST    ABOR    USER    PASS    ACCT*   REIN*   LIST
 NLST    STAT    SITE    MLSD    MLST
214 Direct comments to root@www998.sakura.ne.jp
quit
221 Goodbye.
Connection closed by foreign host.

余談

お名前.com(GMO)のレンタルサーバーに関する愚痴

FTPで、ときどきうまく接続できなかったり(詳細は忘れたが、接続数が上限に達した、みたいなエラーが出る)、多数のファイルのアップロード/ダウンロード時に脈絡なく失敗したりと、動作が不安定なのが困る(これらの現象は、FileZillaでもFFFTPでも発生)。
FTPクライアントの設定をいじれば、どうにかなったりするのだろうか……?

あと、SSHをサポートするようになったのはいいのだが、SFTPには対応していないのだろうか?
これは自分が設定をわかっていないだけかもしれないが。

SSHといえば、アカウント(ユーザー名)が「xxx@gmoserver.jp」のように"@"を含んでいるのも、

$ ssh -l xxx@gmoserver.jp ssh.gmoserver.jp

とかしないといけなくて、地味に面倒……。
ホームディレクトリにファイルが置けない(~/.bash_profile等もいじれない)というのも不満。

【覚書】 Windows 7 → 10 アップグレード時に引っかかったところなど(EPSON NJ5700E)

勢いで、メインPCである EPSON NJ5700E を Windows 7 から Windows 10 へとアップグレードしてしまった。
(いくつか問題はあるものの)ひとまず Windows 7 のときとほぼ遜色なく使えるようにはなってきたが、そこに至るまでに引っかかったりつまづいたりした箇所について、覚え書き。



■ アップグレード前

アップグレード抑制のために使っていたアプリケーション

Windows10へ勝手にアップグレードさせないツール「GWX Control Panel」の使い方 - ぼくんちのTV 別館経由で知った、GWX Control Panelというものを使用していた。
アップグレードするためには、基本、抑制時と逆の操作をして(Informationの"No."を"Yes."になるようにして)、おなじみの Windows 10 アップグレードアイコンを出してやればよい。
なお、これは Windows 10 にアップグレードした際には不要なものであるが、Windows 10 上でも律儀にタスクトレイに常駐してくれるので、アンインストールしておくことを推奨。
Windows 10 上からでもアンインストールは可能だった。

■ アップグレード中

C: ドライブの空き容量に注意

NJ5700E の場合

<Cドライブの残容量が10GBよりも少ない場合>
USBフラッシュメモリーなどのドライブとして認識のできるUSB外付けメディア(16GB以上)が必要です。事前にCドライブの残容量をご確認ください。

[FAQ番号:023135]NJ5700E : Windows 10アップグレード技術情報|FAQ Search|エプソンダイレクト

という注意書きがあった。

結構空き容量がギリギリだったのだが、なんとかやり繰りして約15GB程の空きを確保。

なお、C: ドライブの空き容量不足でも、
少ない空き領域のハード ディスク/ストレージ のパソコンやタブレットを Windows 10 にアップグレードする方法 - Windows - Microsoft
にあるように、大きめの外部ドライブ等があれば、そちらを利用してインストールできる模様。

ただ、むしろ

  • アップグレードで使用した外部ストレージには以前の Windows に戻すために必要なファイルの一部または全部が保存されます。
少ない空き領域のハード ディスク/ストレージ のパソコンやタブレットを Windows 10 にアップグレードする方法 - Windows - Microsoft

ということだったら、空き容量が足りる場合であっても、外部ストレージにこれらの(前の Windows に戻すのに必要な)ファイルを保存したいところなのだが、そういう選択肢が出るかと思っていたら、特に何もなくインストールが進められてしまった。
現在 C: ドライブに、前の Windows に戻さなければ不要なファイルが 24GB 強ほど居座っているので……むしろ、わざと空き容量を確保せずに外部に押し出したほうがよかったのかも……?

プライバシー設定に注意

アップグレード自体、基本的には指示に従っていけばよいのだが、


のように、プライバシー設定に関して気になる方は、インストール途中で「詳細のカスタマイズ」から機能をOFFにしておいたほうがよいかも。
インストール後でも、設定→プライバシー画面から選択可能ではある。

その他、NJ5700E 用ツール等の再インストール

faq.epsondirect.co.jp
を参考に、「インスタントキーユーティリティー + 電源管理」の Windows 8/8.1版をダウンロードして、再インストール。

また、
faq.epsondirect.co.jp
を参考に、「Endeavor 電源プラン設定ツール」の Windows 10 対応版をダウンロードして、再インストール。


■ アップグレード後に発生したが、解決した問題

アップグレード(Windows 10 のインストール)自体は、特に大きな問題もなく終了した。

ここでは、アップグレード後に各種設定やアプリケーションの動作を確認して行く中で、ひっかかったところなどを書いておく。

なにはともあれ、Caps Lock → Ctrl

自宅だけに限れば Realforce91UDK-G を使っているから切り替えスイッチ使えばいい話なのだけれど、ノートPCを単独で使う場合も多いので、Caps Lock → Ctrl 切り替えは必須。
これは、
Windows 10 にちょっとだけ触れてみました。そして[CAPS]キーを[CTRL]キーにするレジストリについて。 | 株式会社バンブーゲートのホームページ
を参考にして、レジストリの編集をするだけで大丈夫だった。

動作しないプログラムが通知された→アンインストールできない……?

Windows 7 のときに WIDCOMM® Bluetooth Windows® Software が入っていたのだが(Bluetoothアダプタ・たぶんLBT-UAN03C2BK8用)、互換性の問題なのか使用できない旨の通知が出ていたので、(占有サイズも大きいことだし)アンインストールしようとしたところ……

このアプリは保護のためにブロックされました。

のようなダイアログが表示され、アンインストールすることができない。

試行錯誤の結果、Administrator でログインすることで、ようやくアンインストールできた。
なお、Administrator アカウントの有効/無効切り替えは、ローカル セキュリティ ポリシーで設定できる(セキュリティの設定→ローカル ポリシー→セキュリティ オプション→アカウント: Administrator アカウントの状態)。

localhost:80 にアクセスできない(404エラー)

PuTTY の SSH トンネル設定にて localhost のポートフォワーディングを設定をしているのだが、他のポートは大丈夫なのに、なぜか 80 番(http://localhost)だけが正常にアクセスできない(404エラーになる)。

これもいろいろ当たってみると、どうやら IIS が干渉していたらしい。
コントロールパネル→プログラムと機能→Windows の機能の有効化または無効化
で確認すると、

■ インターネット インフォメーション サービス
  ■ World Wide Web サービス
    ■ アプリケーション開発機能
      ■ .NET 拡張機能 4.6
    ■ セキュリティ
      ■ 要求のフィルタリング

にチェックが入っていたので、これを外してから試してみると、無事 80 番もアクセス可能となった。

スタートメニューが使いづらい……

自分の場合、Windows 7 ではスタートメニューのアプリケーションをカテゴリごとにフォルダを作って整理することでアクセスしやすくしていたのだが、Windows 10 になると、これがまぁ使いづらいこと……特に、すべてのアプリが頭文字でソートされているのは、アプリを探しづらくて、非常に不便。
名前でソートされても、アプリの名前なんていちいち覚えてないんだってばさ……。

どうにか Windows 7 と同様のスタイルにできないか……と探すと、
weekly.ascii.jp
経由で知ったClassic Shell - Start menu and other Windows enhancementsがよさそうだったので、とりあえず Classic Start Menu のみインストール。
うん、いい感じ。
スタートボタンの[Shift]+左クリック/右クリックで標準の動作も可能なので、使い分けも効く。右クリックで出てくるメニューのほうは、Windows 10 のものが便利そうだし。

なお、同記事で紹介されていたHomepage M. Hoefs - Softwareも入れて、テーマを Aero 7 にしたかったのだが、
f:id:furyu-tei:20160522143859p:plain
のようなエラーが出て、インストールできない。Windows 10 の最新のリビジョンには未対応なのか……残念。
どうでもいいけれど、Windows 10 のアイコンとかフラットデザイン(?)、全般にダサいよね……

Open Hardware Monitor がスタートアップ起動できない

以前、突然電源が落ちてしまう謎の現象が頻発したとき(その後、原因は熱暴走だと判明)に懲りたのもあり、Windows 7 のときはOpen Hardware Monitor - Core temp, fan speed and voltages in a free software gadgetを常駐させてCPU温度を監視していた。
ところが、Windows 10 になってから、スタートアップ時に起動しなくなっていた(手動で起動することは可能)。
Options → Run On Windows Startup で自動起動を設定しようとしても、エラー終了してしまう。
起動に管理者権限が必要なので、単純にスタートアップに入れるというわけにもいかない。

そこで、
pc-karuma.net
を参考に、タスク スケジューラで起動するよう、設定しておくことにした。
セキュリティ オプションで、「☑ 最上位の特権で実行する」にチェックを入れるのを忘れないこと。

空き容量の謎→どうやら Windows Search が原因だった模様



Windows 10 インストール用&Windows 7 復旧用のファイル分、ディスク容量が減ってしまうことを覚悟していたら、なぜか Windows 7 の時よりも空き容量が増えていた、という……なぜ?

→その後、どうやら Windows Search のインデックスが原因だったと判明。


Windows7: PCが重い!SearchIndexer.exe (Windows Search)を停止するには−教えて!HELPDESKを参考にしてWindows Search を無効化したことで、空き容量表示は安定したように思える。
なお、ファイル検索には代わりにvoidtoolsを使用している。

■ 【助言求む!!】アップグレード後に発生した、未解決問題

Windows10 バックアップと復元 (Windows 7) でエラー

これが今、一番の問題。

バックアップと復元 (Windows 7) を使って、定期的に C: ・ D: 丸ごとのバックアップを取得したかったのだが、

バックアップの設定(S)→バックアップを次に保存(B)
↓
SeagateGoFlex (P:) [推奨] 空き領域 417.03GB 合計サイズ 1.82TB を選択
↓
●自動選択 (推奨)
↓
[設定を保存してバックアップを実行(S)]

とすると、すぐに
f:id:furyu-tei:20160522150705p:plain
というダイアログが表示されてしまい、バックアップの実行ができない現象。

同様の事例が無いか検索してみると、

  • (0x80070002)指定されたファイルが見つかりません

ユーザーフォルダがおかしかったのが原因でした。
Windows7でマイドキュメントなどの場所を別のディレクトリに指定していたのですが、
そのためかWindows10にアップグレード後、見た目マイドキュメントなどのフォルダが2つ存在していました。Σ⊂(>∀< )なんでやねん!
新しく作られてしまったフォルダの方を削除し1つだけある形にしたところ解決しました。

Windows10でバックアップ時にエラーが出たので仲間にした - Nyampusノートブック「情報技術」

という記事が見つかった。
確かに自分も場所を C: → D: に変更していた関係上、ユーザーディレクトリ下にフォルダが2つずつできていたので、重複しているもの(中身が空のもの)を削除してから試してみたが、やはりダメ。

次に、イベント ビューアーで Application ログを調べてみると、

暗号化サービスで、システム ライター オブジェクトで OnIdentity() の呼び出しを処理中にエラーが発生しました。

Details:
AddLegacyDriverFiles: Unable to back up image of binary Microsoft Link-Layer Discovery Protocol.

System Error:
アクセスが拒否されました。
。

というエラー(ソース: CAPI2、イベント ID: 513)が出ていることに気付いたので、再び対処方法を検索。

Error source CAPI2 id 513 - Cryptographic Services failed while processing the OnIdentity() call in the System Writer Object
等を参考にしつつ、

> sc sdset MSLLDP D:(D;;CCDCLCSWRPWPDTLOCRSDRCWDWO;;;BG)(A;;CCDCLCSWRPWPDTLOCRSDRCWDWO;;;SY)(A;;CCDCLCSWRPDTLOCRSDRCWDWO;;;BA)(A;;CCDCLCSWRPWPDTLOCRSDRCWDWO;;;SO)(A;;LCRPWP;;;S-1-5-80-3141615172-2057878085-1754447212-2405740020-3916490453)(A;;CCLCSWLOCRRC;;;SU)S:(AU;FA;CCDCLCSWRPWPDTLOCRSDRCWDWO;;;WD)

を試してみると、確かにイベントログのエラーの方は消えることがわかった。

しかし、バックアップを実行しようとした直後のエラーダイアログは変わらず表示され、バックアップができない状況は改善されない……困った。
バックアップする対象を手動で色々変えてみたりもしたが、結果は同じ。
なお、「システム イメージの作成」からのフルバックアップについては特に問題なく取得でき、システム修復ディスクも作成できている。

◆ その他の確認等

やむを得ず、現在は代替として、
www.forest.impress.co.jp
jp.easeus.com

を試用中。

GIMP 2 で wacom のペンタブレットが認識されたりされなかったり

これも謎。

wacom の Intuos (CTL-490/W0)なのだけれど、GIMP2を起動するたびに、
f:id:furyu-tei:20160522155905p:plain
認識されていなかったり(グレーアウト)
f:id:furyu-tei:20160522155915p:plain
問題なく認識されていたり。

いまひとつ、条件がつかめない……。
一度認識されると、その後はログアウトするまでは認識された状態になっているようだが……。
[2016.05.22 追記]うーん、マウスではなく、ペンタブレットを使って GIMP2 を起動した場合には、認識されている確率が高い……?

「タスクバーを自動的に隠す」設定が効かないことがある……?

ときどき、どうやってもタスクバーが出っぱなしになってしまい、隠れないことがある。
タスクバーが自動的に隠れない - マイクロソフト コミュニティ
うーん、通知も無いし、アクティブになりたがっている(通知しようとしている)起動中アプリも無さそうなんだけれど……。
http://s.jkunblog.com/article/170049522.htmls.jkunblog.com
これ(エクスプローラーの再起動)をやると、確かに隠れるようにはなるのだけれど、タスクトレイに常駐しているアプリがいくつか見えなくなってしまうので、困る。

その後、今度はタスクバーが隠れっぱなしになって、どうやっても出てこない現象も発生した……どうなっているんだ。

【覚書】 Twitterのタイムラインなどで、表示位置(スクロール位置)を固定したまま、ポップアップ表示させる方法

Twitter 原寸びゅーで、原寸画像をオーバーレイ(ポップアップ)表示させる際、タイムラインのスクロール位置はそのままにするためにはまっていたので、覚え書き。
つくづく、CSS は苦手やわぁ……。

ヘッダ及び表示範囲に相当する要素を、position: fixed を指定することで固定する、ところまではすぐ思いついたのだが、原寸画像が表示範囲よりも大きい場合にどうすればよいのかが当初は思い付かなかった。

苦肉の策として、オーバーレイ表示時には、

  • 表示範囲を、position: absolute で BODY の上端に合わせる
  • タイムラインについては、ネガティブマージンを設定して、見かけ上、オーバーレイ表示したときと同じ位置のものが表示されるようにする

のようにして対処していた(0.1.5.500まで)

しかし、どうしても無理があったので、パフォーマンスが悪く(反応がにぶく)なってしまった。

その後、

  • 表示範囲は、position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto; を指定
  • BODY には、overflow-y: hidden; を指定

のようにしておけば、原寸画像を表示している範囲だけをスクロールさせることが出来ることに気付き、対応。

パフォーマンスについても改善されたように思われる。

なお、このようにした場合、表示範囲の操作(スクロール)に関しては(ブラウザでBODY(HTML)の標準的なキー操作として用意されている)[Space][Home][End]等のキーによる移動は効かなくなるので、自前で用意する必要があった。

TABLE の TD 要素内全てをチェックボックス化したいが……

HTMLのチェックボックス要素(input[type="checkbox"])で表示される□は、閲覧環境によっては小さく表示されてしまい、チェックを入れたり外したりしにくい場合がある。

その場合の対処法として、

  1. チェックボックスそのものをCSSで拡大する(参考:チェックボックスやラジオボタンを大きくする方法: 小粋空間チェックボックスを大きくしたい - Qiita
  2. LABEL 要素を用いて、有効な範囲を拡大する
  3. チェックボックスの代替として、画像+JavaScript 等でなんとかする

といった方法があると思われる。

で、2. の手法でやろうとしたのだが、条件を

  • チェックボックスを、TABLE 内の TD 要素下に置く
  • TD の高さや横幅は不定
  • TD 内部全体を有効範囲としたい
  • チェックボックスそのものは、TD要素の上下左右中央に表示

のように定めたところ、どうやって CSS を書けばよいのかわからなくて、悩んでしまった。




    td {
        position: relative;
    }
    
    label {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: lime;
    }
    
    input[type="checkbox"] {
        display: block; /* 無くてもよい模様 */
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

どうにも、冗長な書き方をしている気がしてならない。

もっとシンプルな記述方法を知りたい……ご存知の方はご教示いただきたい。

【覚書】 z-index により手前に来ている透明要素が原因でイベントが発火しないときには、 pointer-events をうまく使う

Twitter 原寸びゅーで、画像クリック時に原寸画像を開くようにしようとして、ギャラリー表示時にはうまくクリックイベントが発火しないことに気が付いた。

原因は(z-index 指定により)画像の手前に透明な要素が存在したため*1
pointer-eventsの設定を行うことで対処できそうということが分かったので、メモ書き。
なお、pointer-events は IE では IE11 以上でサポート(IE10 以下は未サポート)となる。

サンプル




(A)




(B)




(C)


画像(BUTTON)や枠の部分をクリックしたときの動作に違いがある。

覚え書き

目的として、透明要素(枠の部分・"z-index: 1"が指定されている)のクリックイベントは残しつつ、画像をクリックしたときには別のイベントを発火させたい。

  1. 最初は、単に画像にクリックイベントを設定するだけにしていた(A)。
    ところが、実際には手前に来る透明要素(枠)のイベントしか発火しない(なお、サンプルでは、画像(BUTTON)の CSS に "cursor: pointer" を設定してあるが、これも効いていないのが判る)。
  2. 手前に来る要素の CSS に "pointer-events: none" を設定(B)。
    これで、画像をクリックしたときのイベントは発火するようになったが、逆に手前の透明要素(枠)のイベントが発火しなくなってしまう。
  3. 画像を含む要素の z-index 値を、透明要素(枠)のものより大きくし、かつ、CSS に "pointer-events: none" を設定。また、このままだと、画像のイベントも発火しなくなるため、画像の方には "pointer-events: auto" を設定(C)。
    これで、画像と枠それぞれのイベントが発火するようになった。
HTMLソースコード
<div>

    <div style="width: 120px; height: 120px; position: relative; float: left; margin: 5px; background: pink;">
        <div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba( 0, 0, 0, 0 )">
            <button style="display: block; width: 50%; height: 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; font-size: 12px; cursor: pointer;" onclick="alert( '画像をクリック' )">画像</button>
        </div>
        <div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba( 0, 0, 0, 0 ); z-index: 1;" onclick="alert( '枠をクリック')">(A)</div>
    </div>

    <div style="width: 120px; height: 120px; position: relative; float: left; margin: 5px; background: limegreen;">
        <div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba( 0, 0, 0, 0 )">
            <button style="display: block; width: 50%; height: 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; font-size: 12px; cursor: pointer;" onclick="alert( '画像をクリック' )">画像</button>
        </div>
        <div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba( 0, 0, 0, 0 ); z-index: 1; pointer-events: none;" onclick="alert( '枠をクリック')">(B)</div>
    </div>

    <div style="width: 120px; height: 120px; position: relative; float: left; margin: 5px; background: lightblue;">
        <div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba( 0, 0, 0, 0 ); z-index: 2; pointer-events: none;">
            <button style="display: block; width: 50%; height: 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; font-size: 12px; cursor: pointer; pointer-events: auto;" onclick="alert( '画像をクリック' )">画像</button>
        </div>
        <div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba( 0, 0, 0, 0 ); z-index: 1;" onclick="alert( '枠をクリック')">(C)</div>
    </div>

    <br style="clear:both;">
</div>

*1:前後移動用のナビで、こちらもクリックイベントが設定されている