どうも！LSSです！！
このブログでも、これまで、HTML・CSS・JavaScriptについて色々記事を書いてきました。
が、LSSがそれらを学んだのは20年以上前の、まだHTML4.0の時代で、ブログを始めてからちょこちょこと学び直してはアウトプットしてる、といった感じなんですね。
まぁたいして違いはないだろう、と（CSSはめっちゃ進歩してるようですが）思いつつ、かつてのHTML4.0時代の認識を持っていると、どうも今の「HTML5」には4.0時代の常識を覆すような仕様が実現されていたりするみたいです！！
今日の記事は、その一例となります。
まるいの 画像ファイルへの通常のリンク
例えばこう…以前使った、３D版「まるいの」の画像があったとしますよね。
この画像のURLは、
https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20200308/20200308184417.png
なんですが、これを
<a href="https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20200308/20200308184417.png">まるいの</a>
といったタグでリンクをかけると、
となります。
クリックすると、そのままブラウザで画像が表示されますね。
今までの認識
HTML4.0時代の自分の認識では、
「画像ファイルやHTMLファイルなど、ブラウザで表示可能なファイルへのリンクは、クリックするとそのままブラウザ上で表示される。『ローカルにファイルとして保存』されるのはzipなどの『ブラウザで表示できないもの』に限られる」
という認識でした。
画像ファイルの素材サイトなどでは「ファイルのお持ち帰り」前提なので、じゃあどうするかというと、
- わざわざzip圧縮してダウンロードしてもらう（ダウンロードした人も解凍して取り出す手間がかかる）
- 「右クリックして『名前をつけて保存』してください」と書く。
のどちらかの対応を取る必要がありますね。
ところが、今のHTML5では簡単に
クリックだけで、画像やHTMLファイルでもダウンロードできるようになってるみたいです！
<a href="https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20200308/20200308184417.png" download>まるいの</a>
のように、aタグ内に download と書き足すだけ^^
もしくは、
<a href="https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20200308/20200308184417.png" download="maruino.png">まるいの</a>
のようにすると、ダウンロードした時のファイル名も指定できます。
…ところが。
↑実際に書いてみました。
ブラウザによって挙動が違う？みたいな話もあるようですが、LSSが使っているGoogleChromeでは、downloadを書かなかったのと同様に、クリックしてもそのままブラウザで開くだけになってます^^;
対象のファイルが「同一ドメイン」である必要アリ
どういう事かというと、例えば今みていただいているLSSのブログ、URLが
https://little-strange.hatenablog.com/
で始まっていますが、ここでこの方法でダウンロードできるようにしようとすると、
「画像ファイルもhttps://little-strange.hatenablog.com/内に置かないとできない」
って事になっちゃうんですね^^;;;
はてなブログでは、画像のアップロードは「はてなフォトライフ」にあげる事になり、別サーバ・別ドメインになってしまいます。
というわけで、「画像ファイルのダウンロード」はページと同じドメイン下に画像ファイルを置く事ができないと無理、って事ですね^^;
同一ドメインであれば、ホントに簡単！
例えば、画像ファイルにこだわらず、
<a href="/" download="top.html">ダウンロード</a>
のようなコードを書いたとします。
↑すると、こうなります。
これをクリックすると、PC版Chromeの場合、
↑画面下にこんな風に「top.html」をダウンロードした表示が出ます^^
…とは言え、記事のHTMLを保存するメリットはあまり無いように思いますが^^;;;
（オフラインでじっくり読む用には使える？？ｗ）
特定の記事のダウンロードリンクを作りたい時には、
<a href="/entry/2020/02/06/022402" download="aiueo.html">ダウンロード</a>
のように、 / で始まるentry以下の部分 を指定すると、
こうなります。
あとがき
素材サイトを作ろうとされている、さじさんの記事で
に、ダウンロードについて触れておられましたが、今のこのHTML5の仕様があってのものなんですね（多分）
HTML4.0脳では、WordPressといえどもブラウザで表示する時にはHTML形式に従うハズだし、レンタルサーバなので.htaccessの設定とか難しそうなところを触ったりするのかな？と思ってました^^;
うーん、浦島太郎気分を満喫しておりますｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
