アーカイブ

‘ウェブサイト構築’ カテゴリーのアーカイブ
スポンサーリンク
スポンサーリンク

フォントにこだわったこの10年

2017 年 3 月 16 日 コメントはありません

お母さんからフォントにこだわれと言われました。お母さんからフォントにこだわれと言われました。お母さんからフォントにこだわれと言われました。お母さんからフォントにこだわれと言われました。お母さんからフォントにこだわれと言われました。

私がフォントに注目したのは、Windows Vistaを買った時。2007年頃だったか。
そしてたまたま訪問したニュースサイトでメイリオが使われており、文字表示の綺麗さに驚いてからだ。
それまでWindowsでは、MSゴシックというフォントが使われており、ガタガタのそれに慣れすぎていた。

メイリオを知り、私はフォントを変えれば表示が綺麗になるのだと思った。
そしてMacを見るとヒラギノというフォントが入っており、それまた美しく、羨ましく思って、入手し、Windowsに入れた。数年後のことだ。

ところが、CSSでヒラギノを指定しているウェブサイトを見ると、思ったほど綺麗でなく、ボヤけ具合にガッカリしたものだ。
もちろん自分のサイトのfont-familyはヒラギノを指定していた。

なぜか?!
実はフォントの差ではなく、レンダリングの差。
Microsoftはフォントにこだわっていないのは事実だが(メイリオや游ゴシックを入れたのでだいぶ改善してきてるようだが)、それ以上にWindowsはフォントを表示するレンダリングに欠陥を抱えているのだった。
レンダリングさえしっかりされれば、MSゴシックすらまともに見えるのだ。
メイリオが綺麗に見えたのは、メイリオだけレンダリングを特別に調整しているかららしい。

その後Windows OSも何度か新しくなり、次こそは..と毎回思っていたが、ほとんど改められてない
英語などはアルファベットのみでそもそも文字種類が少ないが、日本語や中国語はしっかりしないと汚い表示のフォントになるのだ。
Windowsでも、まともな文字表示ができるようになってほしいものだ。

以前からこのブログではWebフォントを使うようになっているが、Windowsだと汚い表示になる。
今現在は有効な策がないので、Windowsからのアクセスはメイリオで表示する設定にし、他のOSだとWebフォントで表示されるようにしている。

実際の表示の違いを確かめるため、比較したブラウザのキャプチャ画像が下記である。Windowsでメイリオの場合とWebフォントの場合、そしてMacでWebフォントの場合の3種類だ。

WendowsのWebフォントレンダリングが酷い有様だ。

私もデザイナーの端くれの一人として、フォントをこの10年ずっと追求してきた。
Appleの公式ページもWebフォントを使ってるし、以前から彼らはフォントにこだわってたのは事実だ。創業者カリグラフィーが専門だからね。
しかし、無料のubuntuなどですら、綺麗なレンダリングなのだ!
なぜ一番高価なWindowsが一番汚いのか理解に苦しむ。

mod_pagespeedを試してみた

2017 年 3 月 12 日 コメントはありません

mod_pagespeedというGoogle謹製のページ表示速度アップのためのモジュールがある。
私の使っているエックスサーバーでも簡単に導入できるようなのでこのブログでも試してみた。

導入するに当たって、効果を確かめたくなるのが人情だ..
そこで以下のサイトで確認してみた。

変更前: モバイル53/100 パソコン61/100
変更後: モバイル63/100 パソコン76/100
これって数が増えるほどいいってことだよね..?!
Googleの作ったモジュールなので、効果があるのは当たり前であろう。


変更前: Performance gradeが大体C評価で、Load timeは5秒前後
変更後: Performance gradeが大体B評価で、Load timeは5秒前後

Dallas, Texas, USAのサーバーで試した。
圧縮効果か、サイズが数百KB下がっていた。評価もB連発に。
しかし、Load timeにはほぼ改善が見られなかった。


変更前: PageSpeed ScoreがEやFで、YSlow ScoreがEくらい
変更後: PageSpeed ScoreがEで、YSlow ScoreがEくらい

分析自体が遅い.. 変更前はFully Loaded Timeに30秒くらいかかることがあった.. Canadaのサーバーだからか?
圧縮効果か、サイズが数百KB下がっていた。また、Fully Loaded Timeも10秒台になった。
しかし、評価はほぼ同じまま。

mod_pagespeedはCPUが貧弱だと逆に遅くなるらしいが、エックスサーバーでは一定の効果を確認できたので、取り敢えず引き続き使っていくつもりだ。

ただ、最大の弱点はCSSなどを更新しても、その更新が反映されるまで時間がかなりかかることである。
設定でmod_pagespeedをOFFにすると一時的に更新が反映されるが、再びONにすると元の更新されていない状態になる。
これはエックスサーバーの設定と考えられる。サーバーに一旦古いデータが圧縮保存されているのであろう、更新してもなかなか反映されない。

【お知らせ】サーバ移転し、HTTPS(SSL)化しました

2017 年 2 月 11 日 コメントはありません

長らく使っていたサーバ・・ロリポップから、ブロガー御用達のエックスサーバーに移転しました。

移転の際、参考にしたサイトはこちらこちらです。
心なしか速くなった感じ。エックスサーバーはメモリが192GBもあり、データベースにはSSDを使っているので速いとの評判です。

移転では特に大きな問題は発生しませんでしたが、データベースのsqlファイルをインポートしようとすると「CREATE DATABASE IF NOT EXISTS」のエラーが出ました。
それはこちらを見てさくっと解決できました。

最近は、SSL化が無料になったので移行後ついでにSSL通信をデフォルトにしました。
今後は、全ての通信が暗号化されるので安心閲覧、安心コメントできます。仮に会社でこのブログを見ても、管理者にも何を見たのか、どのページを見たのかバレません。分かるのはこのページのIPアドレスのみです。
どこかに何らかのエラーが発生していたら教えて下さい。

今後ともよろしくお願いいたします。

エックスサーバーとZenlogicとロリポップを使ってみた感想、そして常時SSL

2016 年 11 月 6 日 コメントはありません

今まで、10年以上、ロリポップのレンタルサーバーを借りていた。
借り始めた当時は価格が格安だったし、その後も特に大きな不満はなく、友人の分も含め、3つのサーバーを借りて、運営していた。
最近では、次世代のホスティングサービスなどと称し、新しいサーバーへの移転もあった。
このブログもロリポップで運用している(た)。

ところが、サーバーを検討するに至った事態が突然発生した。

きっかけは、SSL/TLSだった。
iPhoneをiOS 10にして、自作のウェブアプリ–ブラウザからGPSの位置情報を取得する–が使えなくなった。
調べて見るとブラウザのセキュリティ要求が高くなり、SSLに対応していないと使えなくなったことが判明した。

暗号化については以前から興味があったが、まさか個人サイトでもそれが必要になる時代が来るとは思っていなかった。
しかし、やりたいと思っても、SSL通信、つまり証明書は非常に高く、ハードルが高い。諦めて、ロリポップの共有SSLで我慢していた。

ところが、エックスサーバーというレンタルサーバーだと無料で独自ドメインのSSLが使えるということがたまたま分かった。
通常SSL証明書は有料だ。不思議に思って調べて見るとLet’s Encryptという無料証明書のサービスが始まったらしい。
エックスサーバーはそれを利用し、無料で独自ドメインの証明書を使うことができるらしいのだ。本来は面倒な設定が必要だが、エックスサーバーなら簡単に設定できるわけだ。
これは検討せざるを得ない。

問題は料金だ。
ロリポップはライトプランだと、1年契約で250円/月である。
エックスサーバーは一番安いX10プランで、1年契約で1000円/月。
4倍。かなりの差額だ・・ 私の場合はサーバーを3つ運営していたが、それでも躊躇せざるを得ない。
一時は3つのサーバーをロリポップのスタンダードプランに統合しようかとも考えたが、それではSSL通信はクリアできない。
ロリポップにも、SNI対応して、Let’s Encryptを導入しないのかと問い合わせたが、今のところ計画はなさそうだった。

と、ここで、新たな事実が判明する。
何と、第三のZenlogicというレンタルサーバーが、エックスサーバーと同じく、標準独自SSLとして、無料の独自SSLサービスを行っていると言うではないか・・!!
調べて見ると、驚くべきことに、通常は有料のRapidSSLの証明書も無料だそうだ(実際にはRapidSSLをベースにしたと謳われている)。
つまり、Zenlogicでは、Let’s EncryptかRapidSSLを選べる(もちろん別に有料の証明書もある)。

しかも!!
20周年記念として、2016年11月30日まで期間限定で、890円/月のプランSの申し込みができる。
期間限定は申し込みだけで、申し込んでしまえば、ずっとこの料金で使えるらしいのだ。
これには大きく惹かれた。

エックスサーバーは確かにネットでの評判が高く、ロリポップを卒業してエックスサーバーに移る人は多い。
一方Zenlogicは始まったばかりで知名度は高いとは言えない。以前、ファーストサーバという社名でサービスを行っていたが、数年前に大きな事故を起こしたことを覚えている人もいるかも知れない。
しかし、考えようによっては、事故対策は万全になっただろう・・とも思える。事実Zenlogicは大きくシステムを変換したらしい。

さて、エックスサーバーは10日間、Zenlogicは2週間の無料試用が可能だ。
もちろん独自ドメインの設定も可能である。ただ、エックスサーバーの方は、試用中にメールの利用ができない。メールのウェブアプリを構築している私としては、試せないのが不安だった。
一方Zenlogicはその点心配はなく、試用でもメールが使える。
早速申し込んで試用してみた・・

Zenlogicが分かり難いという記事もネットに見かけたが、私にとってこの辺りは特に大きな差を感じなかった。
レンタルサーバーを借りている人なら特に問題なく使えると思う。
速度も体感できるほどの差は感じなかった。その辺は、ここが大きな参考になった。

そして、一番の目的だったSSLの証明書。
これはどちらも簡単に導入できた。
まず、サーバー側で使用するドメインの設定を行う。
次に、サーバーに必要なファイルをアップロードする。
そして、ドメインのネームサーバーの設定で、サーバーのネームサーバーを指定するか、G Suite(Google Apps)などのメールを使っているなら、AレコードでIPアドレスを指定する
少し時間が経つと、独自ドメインで新しいサーバーにアクセスできるようになる。
その状態で、サーバーでSSLの申し込みを行う。無料SSLはあくまでドメインによる認証なので、サーバーとドメインが結びついた状態でないと申し込めないのだ。
もちろん認証レベルに違いは合っても、暗号化レベルに差は基本的にない。
もし常時SSLを導入するなら、.htaccessファイルなどで、常にSSLへアクセスされるように設定すればいい。
試用でも、常時SSLになるように設定した(というか基本的に常時SSL化される)。

さて、SSL証明書の認証方法に差があっても、暗号化に差はないと書いたが、実は各サーバーでの暗号化レベルには設定や対応に差が出る。
いくら高価なEV証明書を導入しても、セキュリティレベルの低いサーバーが存在するのだ。
つまり、セキュリティはサーバーのレベル次第・・となる。
それを検証できるのがSSL LABSだ。
このサイトでドメインを入力すると、そのドメインのサーバーのセキュリティレベルの判定をしてくれる。
自分も色々試したが、日本有数のECサイトでも最低のFレベルだったりするから恐ろしい。
SSLは証明書を導入したら終わりではない。もちろん平文垂れ流しよりはマシなのだろうけど、しっかりセキュリティ対策されたサーバーが必要なのだ。
ここで調べた結果、エックスサーバーはA-評価、ZenlogicはOpenSSL Padding Oracle vuln.(CVE-2016-2107)の対応ができていないらしく、評価は若干低くなっていた。
これについて問い合わせたところ、問題は認識しており、2016年度内を目途に対応するとのことだった。対応されれば評価はAレベルになるだろう。

ところで、上に書いた常時SSLだが、AOSSLとも言われる。
今までは、会員登録や個人情報を取り扱うページのみを暗号化していることが多かったが、今後はトップページを含む全てを暗号化するのがスタンダードになりそうなのだ。
Zenlogicがなぜ無料でRapidSSLの証明書が使えるかと言うと、どうやらこの常時SSLに力を入れているからのようだ。

事実、常時SSL Lab.という特設サイトも作って、常時SSL普及に努めている。
つまり、SSLを導入するなら、Zenlogicは期待できるだろう。

ここまで来ればあとは好みの問題かも知れない。
エックスサーバーは独自ドメインのプレゼントキャンペーンをやっているので、それを考えればコストは少し安くなると言えるかも知れないが、やはり890円/月のZenlogicも魅力的である。しかも、レンタルサーバー契約につきものの、初期費用もZenlogicは無料である。
コスト面ではZenlogicに分があると言えるだろう。

SSLが導入したくなって、サーバー移転を検討しているのなら参考にしてほしい。
これまでは試用だったが、このブログも間もなくSSLを本導入するつもりである。その際には当然常時SSL化するつもりだ。

GoogleのランキングでもHTTPS化(SSL化)されているかどうかが評価の基準になったそうだ。
私の場合はウェブアプリがきっかけだったが、個人サイトでもメールを送ったり、コメントを記入したり、個人情報の取り扱いには注意が必要だ。
そういった意味でも常時SSL化することは求められている。
SSL化を検討されては如何だろうか。

レスポンシブ対応に改造しました

2015 年 2 月 22 日 コメントはありません

今更ながら、このブログはWordPressを使っています。
iNove」というテーマを使っているのですが、長らく更新されておらず、昨今のスマホに対応できていませんでした。
そこで、「WPtouch」というプラグインで長らく対応していましたが、デザインが好きになれなかったので、iNoveのテーマをレスポンシブ化してみました。

と言っても、単純にスタイルシートをスクリーンサイズで分け、その他細かい調整を行っただけです。
サイズはiPhone 6 Plusを基準にしたので、413px以下までスマホ向け表示、414px以上でPC向け表示になります。なるはずです..

まだ発展途上なので、色々問題もあるかと思いますが、まあまあ満足できる所まで来ました。
見た目はいいとしても、HTMLはゴチャゴチャして汚いですけどね!

スマホでもどうかよろしくお願いいたします。

スポンサーリンク