今回はWebの駅を使っていてちょっと不便だなと思った事の解消方法みたいなものです。

 

Webの駅で日記(記事)を書いて、その中に画像を挿入したりする事があると思います。

その場合、画像サイズが大きくてそのまま表示すると枠からはみ出して、

画面レイアウトが崩れてちょっとなんだかなぁ・・・と思う事があります。

 

ネットワークドライブでNASに簡単アクセスで書いた記事がまさにそのようになってますw

 

さて、これを解消するためには画像の縮尺を調整して縮小表示するようにすれば

画面崩れはなくなりますが、今度は画像が小さくて見難くなってしまいますね。

その場合、画像をクリックすると原寸画像を表示するようにリンクを挿入する方法がありますが

Webの駅で普通に画像素材へのリンクを指定したらブラウザで画像が表示されずに

画像ファイルそのものをダウンロードしてしまおうとしてしまいます。

 

IEだとこんな感じのメッセージが出ますね↓動きも同じようになってるので画像をクリックしてみてください・・・

iv0002


パケットキャプチャのツールでHTTP通信の内容を見てみたところ、

HTTPヘッダに

content-disposition: attachment; filename=xxxxx.jpg

という部分を見つけました。

おそらくこれが原因なんじゃないかな~と思います。

Webに関してはあんまり詳しくないのでなんとも言えませんけどね・・・あくまで何となくそう思っただけです。

ちなみにMIMEはimage/jpegと言った感じできちんとイメージ用のMIMEタイプになっていました。

 

とりあえず、MIMEが画像としては返しているようなのでこれをクリックしたらきちんと原寸画像が開くように

ちょっとした工夫をしてみました。

試しに↓の画像をクリックしてみてください。

iv0002

 

ブラウザで拡大画像が開けましたか?

これがやりたかったのです。

 

どうしたかというと、画像表示用の簡単なjavascriptを書いただけです。

 

やり方ですが天草Webの駅で日記を書く時などに、右上に▼その他の操作なるものがあります。

そこに「HTMLコード編集」というものがあると思いますが、そこを開いてみてください。

 

そしたらごちゃごちゃとHTMLのタグが書いてあると思います(記事が空白なら何も書いてない)

そのHTMLの先頭に以下のタグ(緑の部分)を貼り付けてください。

 

<script src="https://amakusa-web.jp/Sozai/Mg/FileAccess.aspx?aplUseNo=12267&amp;angoFolderKey=FQ6vIUqE2H8UAXEKXn%2f5KQ%3d%3d&amp;angoFileKey=MvcjmBnnEhgsmm9fvphn4w%3d%3d" type="text/javascript"></script>

 

これは私が画像表示だけをするHTMLを吐くためのjavascriptを置いているURLです。

単純な関数ひとつなので自分で作って自分で置いても構いません。

 

そして「リンクの作成」でURLは「http://」と初期値があると思いますが、それを消して

以下のように書いてください。

javascript:imageView('Webの駅の素材画像のURL')

 

どうですか?

これで画像をクリックすると原寸画像がブラウザで表示されるようになったと思います。

 

このように不便だと感じた場合も工夫次第で色々と解消できたりします。

みなさんも是非色々と試してみてみてください。


追記2:

ブラウザの別ウィンドウで開くように変更しました。

コメント欄に追記でスマホだとうまく開けると書きましたが、

Android端末だとやはりダウンロードが始まるようです。

うまく開けるのはiOSデバイスの場合のようです。

よくわかりませんが、HTTPヘッダの

content-disposition: attachment; filename=なんとか

の部分がiOSでは意味をなさないのかもしれません。。。

コメント(1件)
1   追記
スマホとかのモバイル端末ではきちんと画像が表示されるみたい。
管理人 2013年12月13日 08時20分20秒     

 

■コメントを書く
タイトル
本文 *必須
お名前 *必須
メールアドレス
ホームページアドレス
削除パスワード*必須
コメントを削除する際に必要になります。
認証キー *必須 下の画像に表示されている数字をご記入下さい。
(画像は毎回変わります)