昔作ったウェブサイトの近代化 スマホ対応

web Mar 22, 2020

10年以上も前に作ったウェブサイトの近代化、前回のhttps対応に次いでやっておいた方が良いスマホ対応のやり方。ここではすでに現在使ってるCSSを最小限の改変で対応する方法を説明します。

viewportによるレスポンシブデザイン

ウェブサイトをスマホ対応にするというのは、小さい画面でアクセスされた場合でも、そのサイズに合わせて見やすい表示に動的に変更するという事です。CSSはスクリーンのサイズによる条件分岐を設ける機能があり、これを利用します。

まず、CSSの前に、その条件分岐を利用するために以下の一文をhtmlの<head>の中に入れます。

<meta name="viewport" content="width=device-width, initial-scale=1">

次にCSSの方は、max-widthとmin-widthの値に依って条件分岐させます。例えばこのサイトの例だと、左が本文で右にメニューの2カラムレイアウト。スマホ向けにはそれを1カラムでメニューを本文の下に移動する様にしました。float:leftになってるboxはそれが入る余裕のある横幅だとすでに左にあるboxの上端揃いで右に置かれますが、入るだけの横幅がないと次の行、つまりすでにあるboxの左端揃えで下に来きます。以下、その大まかなイメージと実際のCSSです。#left のboxはデバイスに関わらず幅190px固定なので、スマホの条件の場合は#mainの右に入る余裕がなくなり、自動的に下に行きます。(#leftというboxは名前に反して右に置いてます。)

/* smart phones */
@media screen and (max-width:764px) {
#wrap {
  margin-right: auto; margin-left: auto;
  width: auto;}
#main {
  width:95%;
  padding: 5px;
  float: left;}
}

/* PC */
@media screen and (min-width:765px) {
#wrap {
  margin-right: auto; margin-left: auto;
  width: 765px;}
#main {
  width:510px;
  padding:20px;
  float: left;}
}

#left { float: left; width: 190px;}

横幅が764px以下のデバイスの場合はスマホ用、765px以上ではPC用のレイアウトにしてます。もっと細分化も出来ますが、それによる見る側のメリットがあるのはもっとカラムが分かれてるレイアウトだけで、2カラムだとスマホかPCの2択で十分でしょう。

他のデバイスでの見え方を実物なしで確認

html/CSSを変更したら、次にいろんな横幅のデバイスで実際見たときにちゃんと表示されるか確認したいですね。しかし実機がなくても確認する方法があります。PCのウェブブラウザ(Safari, Firefox, Chrome)には仮想的に他のデバイスでどう見えるか確認できるメニューがついてます。以下は、Safariの例。

モバイルフレンドリーテスト

Googleが提供している、モバイルフレンドリーテストがあります。このページで、テストしたいURLを入れると結果がすぐ表示されます。

サーチランキングへの影響

同じワードで検索してるのに、スマホからとPCからだとは違う結果が表示されます。それは、スマホからの検索ではスマホフレンドリーなサイトが上位に来る様になってるからです。具体的に何がランキングの考慮に入れられてるかは公表されてませんが、上のモバイルフレンドリーテストの結果を良くしておくことに間違いはないでしょう。

• • •
• • •

昔作ったウェブサイトの近代化 https

web Mar 17, 2020

10年以上も前に作ったウェブサイト、以前よりも訪問してくる人が減ってませんか? それはhttps対応かどうか、スマホ対応かどうかが関係しているかもしれません。特にhttps対応は5分でできる様な簡単なものなのでやらない手はありません。方法を具体的に紹介します。

Let’s Encrypt

cPanelの中にLet’s Encryptという項目があると思います。それを開いてEnableをクリックすると、もうhttpsでアクセスできる様になります。

理解する必要は無いんですが、これでTLS/SSL証明書を取得して、それをサーバーにインストールする作業を自動的にやってくれたことになります。

301リダイレクト (httpからhttpsへ)

サイト内部のリンクはhttpからhttpsに自分で書き換えられますが、外部のはそうは行きません。そこで昔からのhttpでアクセスされた場合に自動的にhttpsへリダイレクトする様にします。.htaccess に以下を追加します。

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]

内部リンクの更新

html内でhttp://で記述してる内部リンクを全部https://に自分で書き換えます。ついでに外へのリンクもほとんどのサイトはhttpsに対応してるので、書き換えておきましょう。

wordpress

Dashboardの中のSetting->Generalの中にあるURLをhttpsに書き換えます。

httpsのサーチランキングとの関わり

サイトアドレスのhttps://かhttp://によって検索に現れる順位が影響を受ける事を、Googleは公式ブログに於いて2014年の時点で公にしてます。具体的にはhttp://のアドレスは安全では無いサイトと認識されて、ランキングが下がってしまうという事です。

以上、すごく簡単にウェブサイトをhttps化できるという事を紹介しました。ではでは。

関連記事

• • •
• • •

パスワード管理のやり方

web Feb 27, 2020

各種オンラインサービスで使うIDとパスワード。たくさんあって覚えておくの大変です。ハッキングされないためには同じパスワードを使い回せないですからね。自分の分だけでも多いのに、親のとか家族の分も管理してるという場合も多いでしょう。ちゃんとメモったのにどこに書いたか見つからなくて、パスワードのリセットのお世話になったり。最近はブラウザーに覚えさせていて、他のパソコン使った時にパスワード分からないって事もある。

みんな困ってる。いや、困ってた。そう、もう誰かが解決法を考えた。それがパスワード管理app。これがあればパスワード覚える必要ない。インターネット使いこなしてる人ほど大量のIDとパスワード持ってるが、そういう人ほど強力なパスワードを使ってる上にパスワードを覚えるのに困ってない。それはパスワード管理appを使ってるからです。同じ様な機能のappがいくつもあります。一番人気のあるのが1Passwordでしょうか。

月額制で、月$2.99。ドルですが日本円で約300円、app自体は日本語で、日本から買えます。追加料金なしで自分の持ってるパソコンやスマホ複数端末に入れることができる。

具体的に、なぜこのappでパスワードを覚えなくて良くなるか。鍵がないと中が見れないメモ帳のイメージ。メモ帳を読み書きするには毎回鍵(パスワード)を使って開けます。そう、その唯一一個のパスワードだけ覚えないといけない。逆にそれだけでいい。メモ帳の各ページには、ウェブサイトのアドレス、ID、パスワードを書き留める。すでにあるパスワードを書き留めるだけじゃなくて、ランダムに強力なパスワード生成してもくれます。ウェブサイトにログインする時はそこからパスワードをコピーして貼り付ける感じです。自分でパスワードをキーボードで打ち込むなんて事はもうありません。あるパソコン上の1Password上で変更したパスワードとかのメモも、他のスマホとかの違う端末の全1Passwordに自動的に更新されます。

1Passwordはウェブサイトのパスワードだけじゃなくて、人に知られたくない個人情報は全部管理できる。例えば、クレジットカード番号、パスポート番号、運転免許番号、ダイヤルロック、金庫の番号等も安全に記録しておける。

パスワード管理app入れたら、せっかくなので過去に自分が設定した全ウェブサイトのパスワードをそれぞれ別の生成されたパスワードに更新しましょう。パスワード設定の基本:

  • 同じパスワードは使いまわさない
  • 簡単に覚えられるパスワードは使わない

これが、パスワド管理app使うことで何の面倒もなく実践可能。銀行口座とかメールのような重要なアカウントをハッカーに乗っ取られる心配は少なくなるでしょう。

鍵のついたメモ帳のイメージで説明しましたが、iPhone等のスマホの機能をフルに使って便利に使えるのは、実際使い始めたら分かると思います。TouchIDやFaceIDが使えますし、パスワードもコピーじゃなくてiOSの機能を使ってもっと自動化して入力できたり。

他のパスワード管理appのお勧め

  • pwSafe (iOS & Mac)
    • iCloud driveにセーブする様にすればほぼ1Passwordと同様に使用可能。初期費用だけで、その後の支払いは不要。メニューが英語だけど、入力は日本語問題なし。
• • •
• • •

Xmarks

xmarks-beta-v-125x122

複数の PC で bookmark を共有するのに以前は Google Browser Sync を使ってた。しかし、Firefox 3.0 からサポートされなくなってしまってからは、それだけのために 2.x を使ってた。それも間もなく Google 自体がサーバ側のサポートも終わらせてしまった。それ以来似たサービスを探しててようやく見つけたのが Xmarks。実は結構以前から存在してたようだが、気がつかなかったのは諦めきってしまってちゃんと探してなかったって事か。。

Xmarks、Google Browser Sync が持ってた機能は全て備えてる上に、version 管理もしてくれて、以前の version に戻ったりする事が出来るのはすばらしい。あと、同一 PC 内で複数の Browser 使ってるという状況にも適用出来る。うちでは Mac で Firefox と Safari 両方に入れてる。

• • •
• • •

PeerCast & Streamripper

Music,web Mar 04, 2009

最近また J-WAVE を PeerCast で流してくれてる方がいる。平日の日中の番組を流してくれてるので、BOOM TOWNGROOVE LINE が聞けてめちゃくちゃ嬉しい。

しかし、どちらも生で聞くのが時間的に難しい。BOOM TOWN は会社早く帰ってくればギリギリ最後の方が聞ける。GROOVE LINE は 1:30am からなので寝ながら聞いてる? 結局、後で聞くかどうかは別にしてとりあえずどちらも録音してる。

PeerCast の録音には PCR を使ってたんだが、Vista だとかなり不安定。Explore の操作全く出来なくなって、Task Manager も立ち上がらず、強制電源 off しか手段がなくなる事しょっちゅう。PCR は諦めて他のを探す事にする。

以前、internet radio の録音に使ってた Streamripper がまず思い浮かぶ。各種プラットフォーム用のバイナリが用意されてるが、コマンドラインが基本のようなので、Debian に apt-get でインストール。特に何の設定もする事なく PeerCast の J-WAVE のストリームが ogg のままファイルに落とせてる。

% streamripper http://192.168.1.1:7144/stream/58C724FF1...9E7C10AD20.ogg -a -A
Connecting...
stream: Streamripper_rips
server name: PeerCast/0.1218
bitrate: 0
meta interval: -1

[ripping...    ]  - J-Wave(mobaHO simul); Stops at 20:00 time; Ends [ 47.63M]

PeerCast は port0 を蹴る設定で動かしてる。接続に来てはしばらくして切断されてる port0 な人まあまあいる。ちゃんとポートフォワーディングの設定しましょう。。。

• • •
• • •
Ippei813 top
September 2020
S M T W T F S
 12345
6789101112
13141516171819
20212223242526
27282930  
Original Wordpress Themes by priss, customized by Ippei