kenko 58mm UVフィルターをポチった

だいぶ前に、サイトのタイトルを変えたんですよね!「アリエクでポチったJunkHack」と。ずっとポチポチしてるんですがあまり紹介記事だしていなかったんで、ネタに詰まった時にはこういう記事を出していこうかと。

今回は、随分前に 58mm UV Filterのフィルターをポチりました。ですが、コロナの影響かだいぶ遅れたようです。IMG 20200319 232935 0

中古で 58mm のレンズを購入したんですが5000円だったのでフィルター付けなくていいかなと思ってましたが、アリエクだと160円くらいで送料無料なんでポチっておきました。

Choose Size Kenko lens 37MM 40 5MM 43MM 46MM 49MM 52MM 55mm 58mm UV Filter For Canon nikon sony Pentax 58mm uv filter filter for canon uv filter AliExpress

中国から輸入で、JAPAN とある部分はツッコミなしで。OEMの横流しなのかコピーなのかは不明です。

IMG 20200319 232825 3

使用上は問題なさそうなんで、小物類は思いついたときにポチるようにしています。

mac の画面輝度調整MonitorControlが便利すぎる!

日本で Hackintosh 関連の情報が一番豊富なサイトである Boot macOS さんのところを見ていたら、こんな情報が!

Boot macOS:APPLEキーボードの☀︎キーで明るさ調整する

ずっと、キーボードの画面明るさ調整のキーが使いたいなって思っていました。

0

早速入れてみました。この時の最新、MonitorControl.1.7.1では 10.14.6 の自分の環境では動作しなかったので、v1.3.0を使っています。

MonitorControl v1.3.0
https://github.com/the0neyouseek/MonitorControl/releases/tag/v1.3.0

これ、最高ですね。アプリを入れて、設定して起動するとメニューにこんな感じで出てきます。4

各種設定をして、F1とF2 キーを押すと個別に輝度調整が可能です! すばらしぃ!

Desktop

3画面あるんで、モニターの輝度が微妙に調整したかったんですよね。これはめちゃ便利です。

5

v1.3.0 の設定画面はこんな感じになっています。

6

ボリュームは画面から出していないので、明るさ調整だけにしています。

7

Change 〜 for all screens にチェックを入れると全部の画面を一度に調整できます。

ということで、Boot macOS さんのとこは面白い情報がありますのでちょくちょく遊びに行ってみることにします!

高速化その3:画像圧縮してみた!次世代画像フォーマット「WebP(ウェッピー)」を使う

以前、スマホからのアクセスをもっと速くしたいなと思っていたのですが、高速化その3で手をつけることにしました!
まず、手をつける前の状態は以下です。

E383a2e3838fe38299e382a4e383abe382b5e382a4e38388e381aee9809fe5baa6e38292e6af94e8bc83e38197e381bee38197e38287e38186

はい、2.2秒かかっていたようです。レポートには、いろいろ書いてありますが画像の項目は以下のようにアドバイスされていました。

次世代フォーマットで画像を配信する
JPEG 2000、JPEG XR、WebP で画像をエンコードすると、読み込み時間が短くなり、モバ
イル通信のデータ量も少なくすることができます。フォールバック用に PNG 画像や JPEG 画
像も用意し、未対応ブラウザにはそちらを配信するようにしましょう。

ということで、WebP に変換することことにしました。変換には方向性として2つあり、1つはクラウドサービスでWebPに変換してもらうのを利用する方法。もう1つは、自サーバの機能を使ってWebP に変換する方法です。後者は、PHPがimagemagic をサポートしていてそのフォーマットにWebP がある場合に有効です。

phpinfo.phpにアクセス → サーバー設定のレポートを見る。
「imagick」項目の “ImageMagick supported formats” という行に「webp」があればサポートしています。

現在はまだテストサーバで mamp でやっていますので、これはサポートしていないことがわかりました。自分でサーバを作るときは対応させる予定ですが、今のところは外部クラウドのWEBサービスを使って高速化がどのくらい進むか確認してみようと思います。

パッと思いつくのは、https://tinypng.com/ のサービスです。

TinyPNG Compress PNG images while preserving transparency

これをWordPress(ClassicPressでも利用可)で利用するPlugin があるので使うことにします。

Compress JPEG & PNG images
https://ja.wordpress.org/plugins/tiny-compress-images/

Plugin を有効にして、API をゲット(月に500まで利用可)です。メディア設定の自動リサイズを無効にして、medium_large_size_h のパラメータも以下から0 にしておきます。

https://yourdomain/wp-admin/options.php

設定は以下のようにしておきました。

高速化 アリエクでポチった JunkHack と Compress JPEG PNG images アリエクでポチったJunkHack ClassicPress

どのくらい高速化が進んだか確認してみましょう!

モバイルサイトの速度を比較しましょう

結果、1.7秒です。0.5秒改善しましたね!

あとついでなので、Autoptimize プラグンで JS と CSS の最適化をしておきました。これは有名なんで説明は省略。

Autoptimize
https://ja.wordpress.org/plugins/autoptimize/

結果、高速化その3では最終的に、1.2 秒にまで改善できました。

モバイルサイトの速度を比較しましょう

あと、0.3秒ほど頑張れば1秒以下になって「速い」の部類に入るかと! あとはサーバ側でがんばりましょうか。

・・・高速化その4 に続く

高速化その2:ClassicPress を入れてテーマを調整

宅内サーバのテスト環境で、テーマの調整とClassicPress を試しにインストールしてみました。Classicpress logo wordmark gradient on transparent

enひかりの IPv6 トンネルもかなり有効だと思いますが、なかなか良いスコアが出たので記録しておきます。ちにみに、純粋なClassicPress にした速度向上というのはわずかです。テーマの部分が大きいかなという印象です。

PageSpeed Insights

Google の PageSpeed Insights の結果です。ずっと99% であと1% が上がらなかったのですが、画像の遅延読み込み(※1)を行なったら100% になりました。現在のWordPress.com 上にあるデータと変わりないのに、テーマとかWordPress 本体を ClassicPress にして enひかりの v6ひかり+固定IPの環境にしただけです。 1秒未満なので、とりあえずは十分な結果がPCは出ていますね。ちなみに、開発環境は以下の通り。

WEB:NGINX1.13.2(MAMP Pro)
PHP:php7.4.1(MAMP Pro)
DB:MySQL 5.7.26(MAMP Pro)

Server CPU:AMD Ryzen 5 3600
RAM:32GB
DISK:SSD

CMS:ClassicPress 1.1.2
テーマ:Sustyバージョン: 1.0.0
WP Plugin:
 Akismet Anti-Spam 4.1.4
 AMP 1.4.4
 Broken Link Checker 1.11.11
 Catch Infinite Scroll 1.7
 Lazy Load 0.6.1
 Switch to ClassicPress 1.2.0
 WordPress インポートツール 0.7
 WP Super Cache 1.7.1

 ※1・・・画像の遅延読み込みとは、ブラウザが最初に「スクロールせずに見える」ページの画像のみを表示し、スクロールしたときに画像を読み込むということです。これらを簡単に実現するため、Lazy Loadを使っていますがやり方はいろいろあるようです。

モバイル環境については、まだ向上の余地がありそうです。JS の調整がまだ残っています。

PageSpeed Insights

ClassicPress は、wordpress5.3.2 から switch-to-classicpress プラグインを入れて行いましたがなんのトラブルもなくできました。ClassicPress にして明確になったのが、jetpackプラグインはない方が絶対的に速いです。また、ストレージ容量が ClassicPress は20MB くらい減りファイル数も300くらい減りました。

今の所、可もなく不可もなくといったところでしょうか? しかし、良いなと思うのは ClassicPressバージョン1.xは、長期サポート(LTS)バージョンということで安定して動作してくれそうな気がします。プラグインも同じようにインストールすることができて、動作するものは「Compatible with your version of ClassicPress」と表示されますので目安になりますね。

プラグインを追加 アリエクでポチったJunkHack ClassicPress

というわけで、方針としては ClassicPress を使っていくことにしました。そして、jetpackプラグインはもう使わないことにします。テーマは、Sustyをカスタマイズして使うことにします。

宅内サーバのWEBアプリと高速化のキャッシュ方法を検討!

自宅サーバに適用する構成について、最近のWebアプリ周りのサーバ側事情を調査していました。
まず、このブログを宅内で動作させるには WordPress を動作させることが必要です。で、その構成をどうするか検討することにします。以下のようなことを考えないといけないですね。

OS:Linux で動作させますが、どのディストロビューション
(CentOS とか Fedora とか ubuntuとか)にするか?
Web:NGINX とか apache とか。
PHP:PHP7 とか HHVM とか。またはその動作方法php_fpm とか、mod_php とか。
データベース:MariaDB とか、MySQL とか。

また以下の点については、趣味のブログなので作りながら考えていくことにします。

冗長性:これは当面、1台動作で考えないことにします。落ちたら、なるはやで復旧。
運用監視:外部監視をどうするか?
バックアップ:どっかにデータをバックアップしないとです。
保守:マシンが壊れた時、または停電時など。

めんど臭いですね!(笑)ま、当初からわかっていたことですが改めて書くと考えることが多いです。

で、改めて最新の動向も探りながら、ざっくり検討することにしました。動作させるマシンはもうすでに決定済みで、前回までに決めた Ryzen 5 Pro 3400GE が動作するマシンです。Kernel を最新にしたいということもあり、Fedora かubuntuあたりにしようかと思っています。

肝心の Webサーバは、NGINX + HHVM という構成が有力でしたがどうやら最近は事情が変わっているようです。2013年〜2014年に検討した時、HHVM の高速性にはびっくりしたのが印象的でした。24時間アクセス(vmで2台構成)のベンチマーク耐久テストでも落ちなかったのを覚えています。24時間で、400万PVを達成しました。1秒間に、約46回の処理をした計算になります。ま、その直後は vmホストのSSD がぶっ壊れましたが(笑)しかし、残念なことにHHVM は、今やPHPコードを動作させることができなくなったようです。

RIP WordPress and HHVM – We’ve Had a Good Run

ちょっとショックだったので、オフィシャルサイトのドキュメントも確認しておきました。HHVM v3.30 がPHPサポートの最終とのこと! 2018/12/17 だって。もう1年以上前か。

Ending PHP Support, and The Future Of Hack

改めて最新の動向を見てみると、どうやら LiteSpeed というWEBサーバのほうが良さそうです。2015年のネタなので現在は状況が変わっているかもしれません。

PHP7 vs HHVM Benchmark Series 1: Hello World

そして、現在は HHVM よりもPHP7 が良い結果が出ているそうなので、LiteSpeed のオープンソース版である OpenLiteSpeed を使うことにしました。とりあえず、以下のような構成でいこうかと。openlitespeed-logo-1200x300.png

OS:Linux(Fedora 31 server)
Web:OpenLiteSpeed 1.6.x
PHP:PHP7.x
データベース:MariaDB10.x
WordPress代替:ClassicPress ★代替えの必要があるかちょっと使ってみる
キャッシュ:LiteSpeed Cache WordPress

LiteSpeed のWEBサーバと、WordPress のPlugin であるキャッシュ(LiteSpeed Cache WordPress)は専用設計のようです。そして、このキャッシュはWordPress代替のClassicPressでも動作するようです。

LiteSpeed Cache for WordPress
::
LiteSpeed Cache Works With ClassicPress

LSCache(青いグラフ)がそれみたいですが、速そうですね。

screenshot-1.png

また、OpenLiteSpeed と LiteSpeed との違いは以下に機能比較があります。

OpenLiteSpeed or LiteSpeed Enterprise?
https://www.litespeedtech.com/products/litespeed-web-server/editions

WordPress代替のClassicPress は一度、ローカルに入れて検討してみないとですね。

Get ClassicPress
https://www.classicpress.net/get-classicpress/

ということで、今後の課題が見えてきました。ちょっと目を話すとどんどん状況が変わるからこの業界は面白いんですよね!

CDNを使わずWEBアクセスのロードタイムが1秒を切った!

ちょっと前に、このブログのロードタイム、1秒を切りたいと話していました。

スマホからの表示速度を1秒以下にしたい!

で、enひかりの固定IP配下に作ったテスト環境でこのブログと同等のデータを引っ越して速度向上を検討していました。まず、現在の結果から出してみたいと思います。モバイルサイトの速度を比較しましょう

3.8秒から、2.2秒までアップしました。スマホ表示にはまったく手をいれていませんが、1.6秒縮まりましたね!

また、PCでのアクセスは別サイトで計測しました。まずは現状の確認。

WebPageTest Test Result Tokyo junkhack gpl jp 03 16 20 02 26 41

「LoadTime」の部分が全体を表示するまでにかかっている時間です。では、検証用に立ち上げているサイトでも同様に見ていきます。

WebPageTest Test Result Tokyo hoge gpl jp 03 16 20 03 10 36

なんと、1秒を切っています!4.5秒からなんと0.98秒までアップしました。
CDN を使わなくてもここまでアップできるものなんですね。まだチューニングする部分はたくさんありますが、今年の夏引っ越しに向けて、あれこれ研究していきたいと思います。

今回速度の向上に関して、確認したことといえば以下となります。

・WordPress のテーマは軽いのがいい → Susty WP に変えた
・CDNは使っていないが、Jetpack のCDN機能を使いました → これはあまりよろしくないかも(要研究)
・表示を10から3に変えた → もっと見たい人はほぼいないし、見たければ検索なりしてくれるから
・回線をenひかりの IP固定 v6プラス の自宅サーバにしてみた → WordPress.com はデータセンターがUSにあります。v6網のバイパスはかなり有効!

CDN は、DNS の ns を切り替えないといけなしそれなりに弊害もあるのでたぶんやらないと思います。使わなくてもここまでできるなら、あとは微調整でもっと速くなるかもしれません。Jetpack のCDN機能を使った影響なのか、それ以外が原因なのかわかりませんが、以下のように空白の時間があります。

Latest Performance Report for http hoge gpl jp GTmetrix

ということで、ロードタイムが1秒を切ったという話でした。まだまだ研究する部分がたくさんありますので、継続してあれこれやってみたいと思います。

 

 

 

 

3.3万で買える4コア8スレッドのRyzen5マシンをポチった!

ついこの間、検討していた3.3万で買える4コア8スレッドのRyzen5マシンをポチりましたので、ご報告(ジャンクじゃないですよ)

3.3万で買えるマシン!サーバ用候補のThinkCentre M75q-1 Tiny:価格.com限定モデル

いやー、この価格は激安を超えて破格なんじゃないかと思います。最初のネタ元はYouTubeを見ていて岡ちゃんねるっていう、自分と似た異様な匂いがするチャンネルがあるんですが、この方が紹介していたのがきっかけです。ちょっと改めて値段とスペックを見ていきましょう。

まず、外観から。こんな感じの弁当箱サイズの筐体です。

ThinkCentre M75q 1 Tiny コンパクトなボディでパワフル性能 レノボジャパン

なかなかシンプルで赤のLenovoのロゴもかっこいいんじゃないでしょうか。IBMって入ってたら最高なんですがね。

ThinkCentre M75q 1 Tiny コンパクトなボディでパワフル性能 レノボジャパン

1. 電源ボタン
2. マイク入力
3. ヘッドホン出力
4. USB 3.1 Gen1
5. USB 3.1 Gen1 (Powered USB)

ThinkCentre M75q 1 Tiny コンパクトなボディでパワフル性能 レノボジャパン

6. セキュリティ キーホール
7. ACアダプター電源ジャック
8. DisplayPort
9. USB 3.1 Gen1
10. HDMI
11. USB2.0 (Powered USB)
12. USB2.0
13. イーサネット・コネクター(RJ-45)
14. アンテナ端子

というようなインターフェイスが付いています。ちなみに、8と10 のモニター出力がどういう構成でつくのかあまりよくわかっていません。自分が選んだ構成は以下のようになります。

ThinkCentre M75q-1 構成内容

AMD Ryzen 5 Pro 3400GE (3.30GHz, 2MB)
Windows 10 Home 64bit
Windows 10 Home 64bit – 日本語版/英語版選択可能
Tiny
8GB PC4-21300 SODIMM
内蔵グラフィックス
128GB M.2 2242 NVMe
内蔵ギガビットイーサネット
HDMIポート
65W ACアダプター
内部モノラルスピーカー (1.5W)
日本語
1 Year On-site

小計(税込):¥33,220
配送料金:¥0
配送方法:標準配送
合計:¥33,220

NVMe の SSD が付いてくるのは嬉しいです。容量は128GB で、WEB+DBサーバ利用には十分すぎます。メモリも8GB あれば当分は十分ですね。Windows10 はどうでもいいんですが、まぁ、最初の動作確認ですかね。32インチモニタの裏側につけて一体型PCっていうのも5万台で作れます。
WiFi は、4000円くらいしたので外しました。サーバ機は有線ギガビットでしかつなぎませんので。

 ! このスペックをクラウドのインスタンスで表現するなら以下な感じ。

・東京リージョン
・vCPU x 8、メモリ 8 GB
・128GB SSD

すばらしい!じゃありませんか!(笑)月額だと、この値段は2万くらい(想像)はします。

 

これと同等のCPUは、Ryzen 5 3400G ですがこの値段は2020/03/15時点で約2万します。

価格 com AMD Ryzen 5 3400G BOX 価格比較

価格推移は以下。

価格 com AMD Ryzen 5 3400G BOX 価格推移グラフ

3.3万のうち、2万はCPUで残り、1.3万は 128GB の NVMeのSSD がアリエク価格で2,734円。あと1万はマザーや電源やファン、OSといったところでしょうか。そうやって計算すると、ギリギリ採算は取れるのでしょうかね。いずれにしてもこの小さな筐体ではDIYでは作れないのです。

で、さらに購入の決め手は分割払い金利0%!

JACCS ショッピングクレジット 個人向け分割払い レノボジャパンジャンクハックの研究予算は月額2万以内と決めているので、迷っていまいましたがこれはもう、買うしかないですね。

ということで、到着するまでにネットワーク周りの下準備をしておかないとですね。今年の9月まではテスト期間ということになりそうです。夏場を超えますね。さて、どうなることやら。

・・・続く