djeeno.log: HTML

2018年1月31日水曜日

Webページを完全に単一のHTMLファイルで保存（cssや画像もhtml内に埋め込み）

Chromeの話です。

Ctrl+Sで保存しようとすると、以下2通りの選択があります。

ウェブページ、HTMLのみ
ウェブページ、完全

しかし何れも一長一短で、
「HTMLのみ」は、単純にhtmlファイルダウンロードするだけなので、cssやなどはリンクのままになり、
逆に「完全」は、リンクされているcssやイメージ画像などを全てダウンロードしてしまいます。

そこでこちら。

ウェブページ、1つのファイル

こいつを使うと、cssはファイル内に埋め込まれ、
画像ファイルはbase64変換され、
ひとつのHTMLファイルとしてWebページを保存できます。

Web魚拓などにも使われている技術らしいですね。
絶対にロストしたくないページについてはこれで
ローカルにでもアーカイブするのがよさそうです。

以下、機能の有効化の手順です。

まずは以下URLをChromeで開きます。

chrome://flags/#save-page-as-mhtml

すると以下画面が表示されるため、 Sage Page as MHTML の
有効にするをクリックします。

☑ Sage Page as MHTML チェックが入ったことを確認し、
今すぐ再起動をクリックします。

以後、 ウェブページ、1つのファイル が利用できるようになります。

MHTMLってのがあるんですね。

2018年1月16日火曜日

htaccess等による30xリダイレクトが使えない際のページリダイレクト

サーバ側で301、302リダイレクトができない状況下で、
特定のURLへのアクセスを、特定ページへリダイレクトさせたい、というお話。

window.location.hrefに、http-equiv="refresh"もおまけして、
以下な感じのリダイレクト用index.htmlを設置しました。

<!DOCTYPE html>
<html>
<head>
<title>Redirect page</title>
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url=//djeeeno.blogspot.com/">
<script>window.location.href = "//djeeeno.blogspot.com/";</script>
</head>
<body>
Please click <a href="//djeeeno.blogspot.com/">here</a> if you are not redirected automatically.
</body>
</html>

コピペする際には//djeeeno.blogspot.com/を置換してください。

余談ですが、Googlebotさん的には、以下な感じらしいです。

基本的にはサーバ側で30xリダイレクト使ってね。（Google推奨）
クロールする際はJavaScriptは解釈するよ。
~~http-equiv="refresh"は、W3Cが推奨してないよ。~~
- →そうでもないらしいです。
- H76: クライアントサイドで瞬間的にリダイレクトするたために、meta 要素の refresh を使用する | WCAG 2.0 達成方法集

可能なら、htaccessなり、サーバ側で30xリダイレクトの方が良いみたいですね。

参考
Google がサポートしているメタタグ - Search Console ヘルプ

2018/02/05 追記そのHTMLの書き方、本当に合ってますか？ - HTMLの検証を行う「Nu Html Checker」を以て修正したものを追記しました。

<!DOCTYPE html>
<html>
<head>
<title>Redirect page</title>
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url=//djeeeno.blogspot.com/">
<script>window.location.href = "//djeeeno.blogspot.com/";</script>
</head>
<body>
Please click <a href="//djeeeno.blogspot.com/">here</a> if you are not redirected automatically.
</body>
</html>