NuxtからGatsbyに変えてLighthouseで100点を目指す、ついでにPWA対応もしてみた。

Nuxt から Gatsby に変えて Lighthouse の点数が 92 点まで上がりました。今回はさらに 100 点を目指したいと思います。ついで PWA に対応したいと思います。

SEO対応のため、NuxtからGatsbyに変更、さらにLighthouseを使って指摘内容を潰したいと思います。 詳しい記事は以下をご覧ください。

• 自宅サーバ x Web Arena(360円サーバ) x Netlify Speed対決をしてみた。
• Lighthouseの点数が34点と悪いのであれやこれやと対策、でも結局、70点止まりでした。
• Lighthouseの点数が伸び悩むのでNuxtからGatsbyに変えてみた。点数も70点から92点に跳ね上がりました。 
• NuxtからGatsbyに変えてLighthouseで100点を目指す、ついでにPWA対応もしてみた。

コンテナ用サーバをFedora CoreOSで構築、次いでにコンテナをIPv6対応してみました。

貧弱な自宅サーバをコンテナが最低限稼働するサーバに変えたいと思います。余計なものを入れないために Fedora Server から Fedroa Core OS に変えたいと思います。また合わせて Podman のコンテナを IPv6 に対応します。 詳しくはこちらをみてください。

自宅サーバーにNuxt+Composition-API+Typescriptでブログを構築してみた。全10回+SEO+レスポンシブ対応記事

自宅サーバにNuxtでプログを構築してみました。そのときの備忘録を載せてあります。 Macの開発環境整備からスマホ対応までを記載しています。フレームワークは、Nuxt+Composition-API+Typescriptで実装しています。

自宅サーバにNuxtでプログを構築してみました。

ブログ用サーバを立ち上げてみた。

自宅にブログ用サーバを作ってみました。

サーバは、小型で省電力そして静かなサーバShuttle DS77Uを選んでみました。OSはFedoraにしてDockerサーバとしました。webサーバはnuxtを利用しています。akiboi Blogに備忘録を書き溜めていきたいと思います。

alexaで家電を操作してみた。〜 Echo dot + Amazon Alexa + Node RED + Raspberry pi + eRemote 〜

年末にecho dot、eRemoteが届いたので、家電を操作してみた。「alexa、照明つけて」「alexa、エアコン消して」ちゃんと反応している。 ただ、数日後に突然「〇〇から応答ありません」とつれない反応、eRemoteのサポートフォーラム見ると同様の現象が出ているようでした。

また、iPhoneアプリ、eHomeからeRemoteで家電操作はできるのに、家電の追加や設定はWifiだとできない。4G経由だとできるのに・・ こちらのproxyの設定かなと思いサポートに聞きましたが、詳しい仕掛け教えてくれない、ルータリセットしてください。のレベルでした。 サポートは親切で反応も早くて好感は持てたんですけどね。 そう言えば、eRemoteは中国のベンダーだったような、日本の代理店のサポートに期待してもダメかな。観察していると、eRemoteは日本のAWSに頻繁にアクセス、eHomeはどうも中国のサーバにアクセスしているみたい。

eRemoteは、仕掛けBroadlink黒豆と一緒だよね。調べたらpython-broadlinkなるものを発見、仮想PC(Fedora)にセットアップして試してみました。

■python-broadlinkでeRemote検索

$ broadlink_discovery
###########################################
RM2
# broadlink_cli --type 0x2712 --host 192.168.1.XXX --mac 51XXXXXXXX
Device file data (to be used with --device @filename in broadlink_cli) : 
0x2712 192.168.1.XXX 51XXXXXXXX
temperature = 23.9

ちゃんとeRemoteを見つけてくれました。後述するnode-REDを入れてしばらく遊んでたんですが、Raspberry piにも入るとのこと。専用機にするならこちらかな。ということでRaspberry piにイスントールすることにしました。

Raspberry pi3,OSはRaspbian Liteです。Raspbianにはデスクトップでnode-redが入っているみたいですが、デスクトップ使うつもりないのでLiteにしてます。

■Raspberry piにpython-broadlinkをインストール

sudo apt-get install python-pip
sudo pip install broadlink

Broadlinkライブラリ入ったので、あとは、これを操作するコマンドをpython-broadlinkから取ってきます。
お好みで、broadlink_cli,broadlink_discoveryはシンボリックリンクで/usr/local/binに張っておきます。
コマンドの使い方は、こちらをみてください。

リモコンのデータを登録する。

broadlink_cli --device @eremote --learnfile TV.power

@eremoteはdiscoveryで取得情報を格納したファイル名、learnfileはリモコンの情報を保存しておくファイルです。

次はコマンドから家電を操作してみます。

broadlink_cli --device @eremote --send @TV.power

テレビがつきましたね。これでRaspberry piからeRemote経由で家電操作することが可能になりました。次はいよいalexaさんに家電を操作してもらう番です。これに使うスキルが「Node-RED」このスキルは、Node-RED Alexa Home Skill Bridgeを使ってNode-REDで記述したデバイスを操作します。

Node-REDは、ハードウェアデバイス/APIおよびオンラインサービスを接続するためのツール。今回調べてこれすごいわ、ちょっと感激、Node-RED Alexa Home Skill Bridgeを使うことでalexaとつなぐことができるんです。

(^○^) あれくさ >>> echo Dot--Amazon Alex(Skill node-RED) -- Node-RED Alexa Home Skill Bridge -- Raspberry pi(Node-RED,python-broadlink) -- eRemote ))) TV☆☆

な感じになります。

それでは環境を整えていきます。まずは、Raspberry piにNode-REDを入れます。

■Raspberry piにNode-REDをインストール

$ sudo apt-get install -y nodejs npm
$ sudo npm cache clean
$ sudo npm install npm n -g
$ sudo n stable
$ sudo apt-get install nodered
$ update-nodejs-and-nodered 
$ node-red-start
$ sudo systemctl enable nodered.service

これでhttp://raspberry piサーバ:1880/でNode-REDがページにアクセスできたらOKです。次にNode-REDにnode-red-contrib-alexa-home-skillを入れていきます。
デプロイ横の三本線をクリツクし設定を選択します。次にノード追加タグからnode-red-contrib-alexa-home-skillを検索して登録します。

Node-REDに家電を操作する処理を入れる前に、Node-RED Alexa Home Skill Bridgeへ操作したいデバイスの登録やAmazon AlexaにNode-REDスキルを登録します。

■Node-RED Alexa Home Skill Bridgeにデバイス登録
Node-RED Alexa Home Skill Bridgeにアクセスして自分のアカウントを登録します。登録はユーザ名、e-Mailとパスワードのみです。 登録したアカウントで操作したいデバイスを登録したします。Add DeviceからName,Description,Actionsを登録します。日本語名も問題ないです。alexaもこの日本語に応答してくれます。

ちなみに照明は、点灯、消灯に加えて二色に対応させてます。二色って言わないのかなぁ、周りに言ったら通じなかった。アクションは-%をチェックしています。照明を暗くしてというと、二色になります。寝るときに豆球のみつけるあのオレンジのみ点きます



■ Amazon AlexaにNode REDスキルを登録
Amazon Alexaにアクセスして、Node REDスキルを覚えさせます。スキルからNode-REDを検索しNode-REDスキルを登録してください。次にスマートホームのデバイスから検出を実行してください。先ほどNode-RED Alexa Home Skill Bridgeベージに登録したデバイスが検出されればOKです。

次はRaspberry piでNode-REDを使って家電を操作する処理を埋め込みます。

■ Node-REDで家電操作の処理を登録
Raspberry piのNode-REDにアクセスしたら、左のパーツからalexa homeをフローにドラッグします。同様に、switch、change、exec、debugパーツを配置してそれぞれ繋げます。



こんな感じです。照明を例に説明します。最初にalexa homeパーツの設定、灰色のパーツです。これをダブルクリックするとプロパティが開きます。Account横の鉛筆マークをクリックしこれにNode-RED Alexa Home Skill Bridgeに登録したユーザ名、パスワードを入力するとDeviceに登録したデバイスが表示されます。
次にswitchです。ここにはalexaの反応に応じたアクションに応じて設定をします。詳しくはこちらをみてください。



changeは、それぞれon, off,darkと設定します。



あとはexecです。コマンドにbroadlink_cli --device @xxxx --send @xxxみたいにeRemoteを操作するコマンドを入れればOKです。私の場合は、汎用的なシェルを一つ作り引き数により、各家電をコントロールするようにしました。あとはデプロイしてアレクサと呼びかければ家電が反応してくれると思います。


echo dotがきてから一番便利になったと感じるのは、zwiftで屋内トレーニング中に、アレクサ、エアコン止めてとか、もっとポップな曲かけてとかできるようになったことかなぁ、そのうち、温度上がってきたら冷房にするとか、自伝車のパワーが落ちてきたらテンポの良い音楽に変えていくとか・・・夢は広がるまた一つおもちゃができました。

古いMac mini(Mid 2011)でWindows10

まだ間に合う！Windows10の無償アップグレードはまだ出来たという記事をみて、Mac miniのWindows8.1を10に入れ換えることにしました。

クリーンインストールしたいと思い、Windows10用のISOファイルをダウンロードした後、MacOSにてWindowsパーティションを消して、いざBootCampからインストール。これが長い道のりになりました。

macOSは、 High Sierraにしています。これも厄介なことに。

■ Boot CampからWindows10ダメじゃん
Windows10を使用できるMacモデルがMid2012以降になっています。
最初に確認しておけばよかったと後悔、仕方なくWindows8.1からアップデートするしかありません。Windows8.1をインストールすることに。

■ Boot CampからWindowsパーティション作成できない。
USBにファイル作成がやっと終わり、つぎにパーティション作成、しかしこのパーティション作成でこけます
仕方なく、ディスクユーティリティからFirsr Aidを実行し、パーティション作成を試みますが、これもだめ、apfsが縮小できないとエラーを吐いています。
タイムマシンのローカルスナップショットが悪さしているとわかりました。タイムマシンの自動作成をオフして

tmutil listlocalsnapshots /
:
com.apple.TimeMachine.2017-12-09-141149
com.apple.TimeMachine.2017-12-09-160421
:

このファイルを削除するといいのですが、選ぶの面倒なのでまとめて消します。

tmutil thinlocalsnapshots / 9999999999999999

ローカルスナップショット全て消した後にディスクユーティリティでWindows用パーティションを作成しました。

Boot Campを最初からやり直してもいいですが、あの長いUSB作成するのは嫌なので、手動でインストールします。作成したUSBをさしたままoptionキーを押しながら再起動します。
Startup Managerが出たらUSBを選んでWindowsインストール画面に従いインストールします。

■えっ、今度は「新しいシステムパーティションをできなかったか既存の・・・」だと　
ところが、Windows用に作成したパーティションをWindowsインストール先にしても「新しいシステムパーティションをできなかったか、既存の・・・」エラーが出て先に進めない。NTFSにフォーマットしてもだめ。・・・
ググると他の増設Diskを全て切り離してやるといいらしい。再度リブートしてインストール開始、今度はすんなり先に進みました。
やっとWindows8.1がインストールされましたので、Windows8.1から10にアップデート。こちらはなんの問題なくアップデート。最初からBootCampなど使わず、Windows8.1からアッブデートすればよかった。

■ WindowsとMacOS切り替えはStartup Managerからやるしかないそうです。
apfsがBootCamp認識していないらしい。apfs利用している環境でのBootCamp曲者ですね。

■ まとめ
High Sierraでブートディスクをapfsにしている場合は、「タイムマシーンをOff」にして、 おまじない「tmutil thinlocalsnapshots / 9999999999999999」を打ったあとに、「外付けディスクを全て外して」Boot Campをやりましょう。

古いMac Minは、Boot Camp使わないで、Windows8.1から素直にWindows10にアップデートしましょう。(笑)

EdgeRouter XとGCP(Google Cloud Platform)をVPN接続 その2

前回は、EdgeRouterXを設定しましたので、今回は、GCP(Google Cloud Platform)の設定をします。GCPはあらかじめ、静的なグローバルIPと仮想サーバを準備しておいてください。

1.VPNの設定

VPNの設定をしていきます。IPアドレスにグローバルIPを選択してください。それ以外は適宜設定してください。

次にトンネルの設定です。リモートピアIPアドレスに家庭内LANのグローバルIPを設定し、IKEバージョンはV2としました。共通シークレットはEdeRouterXに設定したものと同じものを設定します。リモートネットワークIPの範囲は、家庭内LANの192.168.10.0/24と設定し、ローカルIP範囲はGCP側の10.140.0.0/20を設定します。

しばらくすると、緑色のレ点がつくと思います。これで接続完了です。うまく接続されない場合はログを確認して見てください。

2.接続テスト　

GCPの仮想サーバにログインし、家庭内LANにあるサーバにpingが通るか試します。

ping -c 5 192.168.10.202
PING 192.168.10.202 (192.168.10.202) 56(84) bytes of data.
64 bytes from 192.168.10.202: icmp_seq=1 ttl=63 time=48.0 ms
64 bytes from 192.168.10.202: icmp_seq=2 ttl=63 time=46.4 ms
64 bytes from 192.168.10.202: icmp_seq=3 ttl=63 time=46.4 ms
64 bytes from 192.168.10.202: icmp_seq=4 ttl=63 time=48.1 ms
64 bytes from 192.168.10.202: icmp_seq=5 ttl=63 time=48.3 ms

--- 192.168.10.202 ping statistics ---
5 packets transmitted, 5 received, 0% packet loss, time 4005ms
rtt min/avg/max/mdev = 46.423/47.468/48.321/0.879 ms

接続確認できたので、次に家庭内LANのサーバからGCPのサーバにPingして見ます。

ping -c 5 10.140.0.3
PING 10.140.0.3 (10.140.0.3) 56(84) bytes of data.
64 bytes from 10.140.0.3: icmp_seq=1 ttl=63 time=47.5 ms
64 bytes from 10.140.0.3: icmp_seq=2 ttl=63 time=46.5 ms
64 bytes from 10.140.0.3: icmp_seq=3 ttl=63 time=46.5 ms
64 bytes from 10.140.0.3: icmp_seq=4 ttl=63 time=57.3 ms
64 bytes from 10.140.0.3: icmp_seq=5 ttl=63 time=51.3 ms

--- 10.140.0.3 ping statistics ---
5 packets transmitted, 5 received, 0% packet loss, time 4002ms
rtt min/avg/max/mdev = 46.529/49.875/57.382/4.151 ms

こちらも接続できたようです。これでedgerouterXからGCP(Google Cloud Platform)とVPN接続できました。あまりにもすんなり接続されるのでちょっと拍子抜けかな・・・便利な世の中になってきました。