ラベル Web技術 の投稿を表示しています。 すべての投稿を表示
ラベル Web技術 の投稿を表示しています。 すべての投稿を表示

2018年10月28日日曜日

Mobile Usability: Clickable elements too close together, Content wider than screen, Text too small to read

さて、テンプレートを読み下すのが面倒で放置しておいた残りのエラーを直す必要に迫られました。Google Search Console のエラー・カウントがポン、ポンと跳ね上がって行くので。

悩みましたね。

ですが、テンプレートで様々な分岐を行なっていても、結局それはサーバ・サイドで処理されてしまう部分であって、実行時の画面サイズに依存した処理ではないのです。
<b:if ...> とかで分岐している奴ですね。

で、実行環境での解像度を読みとってうまい処理ができないかと、考えたのですが、それもうまく使える変数やタグが無い。

で、諦めて、<head>タグの直後に次のように書いて、お茶を濁すことにしました。



<script>
if (location.search != '?m=1')
 if (window.screen.width < 598)
  location.search = '?m=1';
</script>



多分、大丈夫じゃないかな。



2018年10月12日金曜日

DNS セカンダリ・サーバー

当校も現在の名称になってから、もうじき7年になります。

当時障害対策の観点で、当校ドメインのDNSにセカンダリ・サーバーを指定していました。

最近、これも主に Google さんから、時々「サイトが機能していない/リンクが無効である」というような通知を貰うようになり、一体何が原因なのか暫く分かりませんでした。

ふと、何気に dig してみたところ、いつの間にか DNSのセカンダリ・サーバーが機能していない事に気付きました。まぁ、そりゃそうかもしれませんね。無料で使えるってんで登録していたところなので。調べるとそこは5年位前からまともにサイト/システムも更新していないようで、恐らく止める訳にいかないが、メンテは放棄したという状態だったのでしょう。

うちがセカンダリとして指定したDNSサーバーも、3つのうち2つ迄もが死んでいる状態でした。

そのままここを使い続けるのも危険なので、どっか無料で利用できるサービスは無いか探してみましたが、昔はあんなに沢山あったのに、今は殆んど見つかりませんでした。

…どうも、時期的に AWS が流行り出した 2012〜2013年頃から徐々に、その手のサービスは無くなっていったようです。そりゃ、そうですね。昔は自前でサーバー立ち上げる為に色々設定して、その関連で DNSのセカンダリ・サーバーの需要があったんです。

今はサーバーを自前で立ち上げずとも、お気楽お手軽に AWS で従量契約してしまえば、その辺のインフラ全部揃うのでしょうから。

ちょっと脱線しましたが、殆んど唯一と言えるサービスが、 Cloudflare で、ここを使えば DNS を預けることができ、小規模な利用なら無料でいけそうです。

…っと思って設定し利用したところ、そもそもプライマリをここにして、自前のDNSサーバーは全て削除することを求められました。
セカンダリは欲しいんですけど、ちょっと主権譲渡は嫌だなぁ、と、思いました。

で、結局これも止め。

有料サービスに移行すべきか考えましたが、今うちはサイト運営に使っているサーバーは、実質自前のもの1つなので、それも無駄です。

で、セカンダリのエントリは全部消してしまう事にしました。

インターネット黎明期と違い、TTL指定のキャッシュは広範囲に有効でしょうから、まぁ、うちのような小規模サイトには実害は無いでしょう。





2018年10月5日金曜日

Mobile Usability: Viewport not set to "device-width"

このラベル「Web技術」は、裏方IT担当の当方の愚痴です(笑)。

ここに書くのも何だなぁと思うけれど、メモしておきます。

うちは最近の世の中の大勢である WordPress に逆らって(笑) Google さんの Blogger で懸命にこのサイトを作っています。テンプレートも Google さん標準提供の Simple に必要に応じ手を加えて使ってます。

ところが Google さんが暫く前からサーチ・コンソールで "Mobile Usability" のエラーを表示し始めました。

見ると、モバイルの筈なのに PC版サイトを表示するオプションである m=0 をわざわざ指定して、これらのエラーを提示しています。
「おいおい…」と思って放置しておいたのですが…

エラー・ページのカウントが徐々に増えてくばかりでなく、気のせいかそれに従って検索順位もカクン、カクンと落ちていきます。

仕方が無いので対処してみます。

先ずはこれ、 Viewport not set to "device-width"。

膨大な行数のテンプレート解読するの面倒なので放置しておいたのですが、意外と冒頭部にすぐ見つかりました。

元は

<meta expr:content='data:blog.isMobile         ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot;         : &quot;width=1100&quot;' name='viewport'/>

となってました。つまり、PC版サイト指定時は 1100px 固定になってたんですね。これがお気に召さないようです。

若干の視察により、このように書き換えたら文句を言われなくなりました。

<meta expr:content='data:blog.isMobile         ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot;         : &quot;width=device-width,initial-scale=1.0,maximum-scale=1.0&quot;' name='viewport'/>

minimum-scale=1.0 指定しちゃうと縮小表示できないですからね、それだけ外して、後はモバイル版と同じ内容を指定したものです。

エラーは未だあと2つありますね…

片方は思い当たりがあるけど、もう一方は果してどこのことを言っているものやら…