アーカイブ

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

【CSS】夜になったら自動でダークモードにする【JavaScript】

2019 年 11 月 24 日 コメントはありません

CSSとJavaScriptの組み合わせで夜になったら自動でダークモードにしてみます。流行ですもんね~
ちなみにこの記事でも18:00~翌06:00に適用されるようになっています。

下記を参考に、適当にヘッダーに入れるなり、該当のブロックにインラインで入れるなりしてみて下さい。

Enjoy!

ConoHa VPSとエックスサーバーを比較してみた

2019 年 1 月 13 日 コメントはありません

開設当初、サーバーはロリポップを使っていたが、遅くなったため、評判の良いエックスサーバーに移転した。
しかし当初は満足していたはずのエックスサーバーにも徐々に不満が出ている。
運営サポートが勝手にアクセスを遮断する事が何度かあったのだ。共有サーバー故に何かと厳しいのは分かるが、これでは安定した運営ができないではないか..
また、2016年に約束されたはずのサーバーのメモリ増強が私のサーバーでは2年経っても一向に実施されない。これでは嘘つきではないか..
そのため、より自由度の高いVPSなどへの移転を模索していたが、サーバー運営の経験はほとんどなく、コンソールの操作にも不安があるし、本業の方が忙しく、時間も取れない。
そんな時、たまたまよく行く中国でVPNに対する規制が強化され、その対策として試しにShadowsocksRのサーバーを立ち上げようと思い、初期費用も不要なConoHaでVPSを借りてみた。
そうこうするうちに、コンソールにも徐々に慣れて来て、SSHによるアップロードにも問題がなくなったので、せっかくなので、この機会に、ConoHa VPSとエックスサーバーのウェブサーバーとしての速度を比較してみたい。

まずは回線速度の比較をした。
約157MBのビデオファイルを両者にアップロードし、ブラウザで開く。どちらが速く見られるだろうか?
アクセスは日本国内から。どちらのサーバーも日本国内である。計測は日曜の夜、光回線(v6プラス)からパソコンのChromeを使った。
バイアスがかからないよう、計測時にはスマホでビデオを撮影し、記録を取った。ビデオファイルにブラウザからアクセスし、シークバーが満タンになるまでの時間(秒単位になるのはご了承頂きたい)である。
また、1回だけではたまたまということがあるため、同時間帯ではあるが、各サーバーとも交互に5回計測した。

回目 ConoHa VPS エックスサーバー
1 41秒 54秒
2 41秒 54秒
3 40秒 62秒
4 39秒 49秒
5 39秒 51秒
平均 40秒 54秒

上記は時間が短いのが速いということだ。
ConoHa VPSが平均40秒、エックスサーバーが平均54秒。
つまり、結果としては、ConoHa VPSの方が速かった!
時、場所、場合にもよるだろうが、ConoHa VPSの回線はエックスサーバーよりも上かも知れない。

ビデオファイルではサーバーのハードウェアとしての能力は測れないと思われたので、今度は自作のCMS(PHPで作成)を両者にアップロードし、第三者のサイトをいくつか使って測定を行った。
どちらのスコアが高く、速いのか?

計測サイト ConoHa VPS エックスサーバー
Google 100点 92点
GTmetrix Fully Loaded Time 2.6秒 4.0秒
pingdom Load time 0.64秒 1.38秒

何と全てでConoHa VPSがエックスサーバーを上回っている(公平に言うとGtmetrixのPageSpeed Scoreなどではエックスサーバーの方が僅かながら上だった)。
なお、ConoHa VPSは、最も安いプラン(1円/時間|630円/月)にて、LAMPのテンプレートで立ち上げている(影響しているかどうか分からないがBBRも導入している)。
価格もエックスサーバーより安いのに、やるじゃないか。

さて、ConoHa VPS以外にもVPSは沢山あり、Amazonなども出している。どれも高くない。
ただ、VPSはレンタルサーバーより自由な反面、立ち上げや運営は色々と大変なこともある。そんな時はConoHa WINGというレンタルサーバーを借りるのも手である。同じConoHaの運営なので期待ができそうだ。

早くサーバー運営の腕を上げて嘘つきのエックスサーバーとおさらばしたい。

■sv2115.xserver.jp 以前のサーバーの増強について2017年より順次、同様に搭載メモリを増強する予定です。

本当にやるならやれよ.. 2年もずっと期待させやがって、ガッカリだわ。

フォントにこだわったこの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アドレスのみです。
どこかに何らかのエラーが発生していたら教えて下さい。

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

スポンサーリンク