WordPressから移行しなくても良いかも

Notoも書いてなければBlogも書いていないのですがTwitterとDiscordには生息しているりっくんです。

去年の2月にこんな記事を書いていました。

「移植」って表現が正しいか?とは思っていますが、記事の中に書いてあるとおり少し表示が遅かったりいい加減WordPressに固執する必要も無いので今どきっぽい感じにしてもいいかも?という内容を書いた記憶があります。

移行したい記事書いたかのサマリー

  • 環境がSAKURAのVPS メモリー2GBプランでその上にKusanagiのDockerコンテナを建てている構成
  • Nginx+PHP-FPM+MariaDB
  • やけにアクセスに時間がかかっていて、メモリー使用量がやばかったから原因はメモリーかなと思っていた
  • ついでに、AWS Lightsailの4GBプランを移行用に契約までした

しなくていいかもの経緯

ちょっと前に、Next.jsのテンプレートに、WordPressからデータをフェッチしてきて静的サイトを生成する物があると知った。
ということは、静的サイト化できるじゃないか!爆速じゃん!ということで、すごい簡単にできそうだから試してみたんだけども、「WPGraphQL」プラグインがPHPのバージョン7.2以上じゃないと動かないとエラーが出てしまった。

実際に見てみたらPHP7.0系のPHP-FPMを使っていたのと、PHP8にしたほうがいいよ!的なメッセージが書いてあったから
「まぁWordPressだしPHP8くらい動くだろ!」
と、安易な気持ちでPHP8のイメージに差し替えたらテーマとプラグインが全滅して全くアクセスできなくなってしまった。

ちょっとだけなら直そうと思ったが延々と出てくるエラーに耐えきれず、

  • PHP7.4のイメージに変更して
  • WordPressも6系までバージョンアップして動かし
  • 無事WPGraphQLをインストールして
  • 実際にNext.jsの設定をして
  • Buildして動くところまではローカルで確認した

で、Next.js自体は正常に動いたんだけど(一部、next/Image関係のエラーは吐いていたけど簡単に直せるレベル)そもそもこの辺のバージョンアップをしたらそもそものWordPressがすごい速くなってしまったんですよ。

スコアも91で良い感じ

一部対応はしたけどそれでも高速化したので、あれ、移行する必要がなくない?という感じになってしまったというのがこの記事の趣旨です。

なんで遅かったの

結局メモリーが悪いのではないかというのは自分の思い込みだったのですが、PHP-7.2にした部分は多少影響があるのかなぁというの、WordPressのバージョン上げたのは・・・あるのかなぁ。

プラグインとかもあまり入れていないので思えば異常な遅さだったのですが、これ以上は掘り下げないと思います。

まぁそもそも7.2からもっと上げないとサポート的にはよろしくないのでテーマも標準にしちゃおうかな・・・、もうBlogのデザインに対するこだわりは無くなってきたので。

Kusanagiを使っていて

別にKusanagiである必要は全然ないのですが、標準的な環境でこの速度のWordPressになるのかは少し気になっています。

ただし、Dockerで動かすことのメリットは今回非常に感じていて、試しにPHP8化できたということは今後Kusanagiがメンテされている限りはPHPのバージョンに合わせて環境を上げていくこともできるのは非常に良い環境だなと思っています。
※普通にaptとかで入れちゃうと地味にバージョンアップめんどくさいので・・・

移行も楽なので、現在はAmong UsのDiscordプレイ用Botを動かすためだけに置いてあるLightsailのサーバーは、何かの時に遊べるサーバーとして動かしっぱなしにしておく予定です。

終わりに

ということで、無事高速化を果たしたのでBlogを更新したのでした。という記事でした。

ファイザーのワクチン1回目を打った話

何故か酷く寒い夏を越して、日々二酸化炭素濃度と戦っているりっくんですこんにちわ。
特に書く必要もないかなと思ったんだけど、自宅で使っているHHKBにアームレストを買ってみたはいいものの

  • 開発するときはMacbook Proを取り出してしまう
  • Windowsでやることはゲームかゲームの周回

ということで、全然キーボードを打つタイミングがないことに気がついてしまい、たまにはブログを書いてみようかなと思いました。

ワクチン接種1回目

うちの自治体では8月の頭に30代の予約が始まったので、早速取って8/18に1回目の摂取を終えてきました。
巷で言われている通り、スムーズな進行となっていて、ものの10分ほどで注射完了→待機15分で何事もなく(スイーツを購入してしまう副反応だけあり)帰宅して安静にしていました。

今回は市の公民館を使った集団摂取会場で受けてきたのですが、振り返ってみてもかなり余裕がある人員数で運営されていて、間隔は広く、こちらから声を発することもほぼない(頷けば良い感じ、徹底している人は少ないかもしれないですが)素晴らしい進行でした。

携わっている方々、ありがとうございます。

副反応

スイーツに関しては冗談ですが、熱などは出ずに腕がだるい、筋肉痛のような痛みがあり腕が上がらない症状は翌日まで出ていました。
二日目にはまぁ違和感はあるけど?くらいの症状になっていて、ほぼ問題ない感じで過ごしています。

コロナ・ワクチンに関する様々な情報について

個別の事象についてはあまり外では語らないようにしています。
巷に流れる様々な情報はときにセンセーショナルであり、冷静な心で情報を得続けることが難しいと思っていて、そうはいっても情報は仕入れなくては怪しい情報に振り回されてしまうような昨今。

何より精神的に安定していることが非常に重要だと強く実感しつつ、得る情報の取捨選択だけでもかなりの労力を要するところではありますが、できることは結局のところあまり外に出ないことに変わりはない、ということを強く意識して生きています。

親族、知人に関してもワクチン接種が進んでいてひとまず安心ですが、マクロの話なので辛抱強くできることをやっていこうと思う今日このごろ。

ということで終わりです、家でゲームやっていこう。

WordPressから移植したい

すっかりこのBlogも放置しちゃってる。

タイトルの件だけど、かれこれ10年くらい稼働させているこのWordPressも実際にはWordPressである必要が全く無い状況だったりする。

具体的には、プラグインとかほとんど使ってないしけしてもいい感じのものが多い。
さらに言えば、Kusanagiで建ててるんだけど、Docker環境にしているのもあってちょっとメモリ使いすぎで思ったよりも(サーバースペックに依存してるとは思うんだけど)早くならないなぁという課題感がある。

個人的にNext.jsを最近触っていることもあり、Blog自体を静的サイトとして再構築するのが一番良さそうだし、モダンな技術の勉強になりそうなのでモチベーションとしては高め。
その時の課題としては、現状のWordPressの記事データとか画像データとかを、プロジェクトに移植するのがめんどくさいなぁというのが・・・。

とりあえず、まずはそのへんの調査を行おうかなぁと。
Next.jsでBlog作るとかいっぱいあると思うし、後は画像とかも自動で小さくしたのを配信できるのかな?ちょっと調査が必要そう

今日はこんなとこ。

#02 create-react-appについて

ということで久々にReact.jsを触っているわけだけど、create-react-appが使いやすくなったように感じる。
初期からあるApp Componentがいつの間にかFunctional Componentになっていたりと、そっちに寄せてるのも良いなぁと。

ほとんど

yarn start

だけで良いというのは、とりあえず始めるときにすごく便利だけど、やっぱしボイラープレート的なものは作っておいたほうがいいかも。
reduxもreact-router-domも無いので・・・。

material-ui

やっぱし良く出来てるなぁと思いつつ、Style部分がよくわかってない。
今回のBlogシリーズはひたすらよくわからないところとかを垂れ流して、どこかで見直す・・・のか?って感じになりそう。

Github Actions

これもちょっと触ってみた。
Firebaseと相性良すぎて困る。今後もうこれでいいんじゃないですかね・・・。

#01 久々にReact.js

この間のUdemyのセールで久々に動画を買った。
フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 | Udemy

業務で使う機会がないから結構すっぽり忘れててなかなかつらい。
というか、Hook周りあまり追えてないのでその辺は書きながらやっていこうと思う。

とりあえずcreate-react-appの使い勝手が上がってる気がしてよい。

Vue.js Nuxt.js

この間、業務でVue、Nuxtを使う機会があったけど、その前にReact.jsをやってた関係もあって結構混乱した。
ちょっとやった感じだと個人的にはReact.jsのほうが書きやすい。

macOS Catalinaでlsyncdが動かなくなった話

1週間くらいハマっていたりっくんですこんにちわ。

lsyncdとmacOS Catalinaについて

Catalinaに更新してから、lsyncdのファイル変更検知が効かなくなっていた。
権限周りで色々初期化されたからそのへんかなぁと思って、追加してみたりしたけどだめだったから切れそうになってたんだけど、これっぽい。

macOS Catalina の読み取り専用のシステムボリュームについて - Apple サポート
macOS Catalina で NFS が動かない問題に対応する - Qiita

つまり、lsyncd.confとかにはこういう書き方をしないといけない。

sync{
  default.rsync,
  delete = false,
  source = "/System/Volumes/Data/Users/{username}/{sync_dir},
  target = "centos@192.168.xxx.xxx:/home/centos/share/web",
  exclude = {
    ".DS_Store",
    "node_modules/*",
    ".git/*",
  },
  rsync = {
    binary = "/usr/local/bin/rsync",
    archive = true,
    compress = true,
    group = false,
    owner = false,
    update = true,
    sparse = false,
    _extra = {
        "--omit-dir-times",
        "--omit-link-times",
    },
  }
}

絶対他にもハマってる人いると思う。
Docker for Macのファイルマウントが遅い問題で、rsync系使ってる人が自動更新でlsyncd使ってるとか・・・。

Firebaseがすげー便利でびっくりした

なるべくBlogに記事を書いていきたいと言ったので積極的に「良い!」と思ったことは記事にしたいりっくんですこんにちは。

とりあえず、進捗はこんな感じです。

Firebaseいいかもしれない

先日の記事で、Firebaseを使おうと思う、でもここまで手を広げていくと大変かなぁとか言ってましたが、
React.js(やっと)使ってみてる | SteadyWorX

firebase
バックエンドは書かなくていいかなぁなんて思ってたんですが、この感じだと適当にAPIサーバーくらい作ったほうが良いかもとなって、もういっそfirebase試すか!って感じになっています。で、ググってたところで整理がてらBlogにまとめてる。
firebaseもちょっとだけ触ったんですけど、RDBばかり触ってたのでNoSQLはまともに触ったことがなくて、どういうDB設計にしたら良いかからちょっと記事を読んでる段階です。
Firebase Realtime DBを実践投入するにあたって考えたこと – Qiita
でもこうやっていろいろな技術に手を加えていくと、だんだんわからないことの許容量が増えて死ぬというミライが見えますね、ツライ。

実際に触ってみたら結構簡単で、且つやりたいことがそのままできそうなのでこのまま採用しようと思いました。という話です。

Realtime Database

FirebaseのDB機能、NoSQL系だってことしかしらなくて、よく見たらRealtimeって入ってるんですね。
で、そこから色々見ていったら、やっぱし更新を検知することができるっぽいんですよ(というか、そういう使い方がメインなのかな?)

ということで、現在のリロール状況を保持しつつ、更新があったらstateを変更する感じのコードを買いてみました。
実際の動きがこちら

これはいいですね、これならチームごとに更新をリアルタイムに取ってこれます。

後はこの辺に所持チャンプ情報周りもすべて格納していけば結構いい感じになるんじゃないかなぁというのが今のところの感覚です。
楽しくなってきた!!!!

React.js(やっと)使ってみてる

ちょっと体重がやばい感じになっていてゆるくダイエット中のりっくんですこんにちは。
Blogの更新、いよいよちゃんとやっていきたいので最近やってることでも書いておきます。

React.js触ってる

  • 作りたい物
  • 作る時間
  • モチベーション

全部がないとなかなか新しい技術がさわれません。
すげー広くの分野でHello Worldレベルは触ってるんですけど、なかなか理解できないですね。

2周遅れくらいではあるものの、Reactは触りたかった技術の一つなのでこれを気にちょっと使ってみています。

こんなの作ってる


League of Lgendsっていう神ゲーがあるんですけど、いま一緒にゲームをしている人はARAM(All Random All Mid)をよくやるメンバーで、5人を超えると8人、ないしは10人頑張って集めてカスタムゲームを開催しています。
ですが、カスタムゲームのARAMではリロールが出来なくて、しょうがなくドラフトピックのARAM(Randomではない、ハウリングアビスマップのドラフトピックというだけ)を行っていました。
※リロール = 完全にランダムだとツライので、最高2回、自分のチャンプをまた振り直すことができる。

それを雑にWebアプリ化すればなんとかならんかなぁと思ってふらーっと休日、夜間にポチポチ作っているという状況です。

わからんことだらけでつまりまくって入るんですが、これが結構面白いですね。
jQueryで作ったらまぁ形はできるんだろうけど、データがごっちゃごっちゃになるので今回はReact.jsを使っておいてよかったような気がします。

eslint

後ついでに、eslintも入れてAirbnb JavaScript Style Guideも適用させてます。
これはTwitterに書いたんですが、

でもこの大リーグボール養成ギブス的な感じ、好きだわ。出来上がったコードも読みやすいし。

です

機能が足りない・・・

で、まぁとりあえずリロールできるところまで来たんですが(くっそ見にくいけど、名前の横にREROLLボタンが有る)話していて

  • やっぱし自分が持ってないキャラが出て来るのって微妙だよね
    ユーザー管理と所持チャンプ登録したい
  • この状況を共有できないとめんどいよね
    これは、URLで共有できるようにしたい、パラメーターに全部突っ込んで的な
  • デザイン、案はあるけどちょっとまともにしないと

等々、色々課題があります。

firebase

バックエンドは書かなくていいかなぁなんて思ってたんですが、この感じだと適当にAPIサーバーくらい作ったほうが良いかもとなって、もういっそfirebase試すか!って感じになっています。で、ググってたところで整理がてらBlogにまとめてる。

firebaseもちょっとだけ触ったんですけど、RDBばかり触ってたのでNoSQLはまともに触ったことがなくて、どういうDB設計にしたら良いかからちょっと記事を読んでる段階です。
Firebase Realtime DBを実践投入するにあたって考えたこと - Qiita

でもこうやっていろいろな技術に手を加えていくと、だんだんわからないことの許容量が増えて死ぬというミライが見えますね、ツライ。

何にしても楽しい

実はいろいろあってこんなことしてる場合じゃないんですが、割りと楽しいです。
ぱぱっと作ってやることやらないと。

2017年クリスマスイブ

どうももう全然Blog書けてませんりっくんですこんにちは。
来年の目標は週1(か、消極的に月1)のBlog投稿にしようかな・・・、ココ3年位アウトプットが少なすぎる。

みなとみらいの赤レンガ倉庫に行きました。

ということでクリスマスイブなんですが、横浜市で1泊していたので、ふらっと夜、赤レンガ倉庫に寄りました。

すごい人ですよ。

後関係ないけどほしいメガネと、最終的な戦果です。

花、良い。

以上です、とりあえず年末最低1本は振り返りの記事でも書きます。
個人的にもかなり色々あった1年ですので。

Franzが良い

どうもこんにちは、会社にWQHDの27インチモニターを持ち込んでいるのですが、会社を4Kに、家にそのモニターを戻したくてたまりませんりっくんですこんにちは。
FullHDはツライ体になってしまった・・・。

とまぁそれは関係なくもないんですが、Slackのアプリが重いなぁとずーっと思っていて、Twitterを眺めていたら「Franz」というアプリが良いと聞いて入れてみました。

Franz

Franz – a free messaging app for Slack, Facebook Messenger, WhatsApp, Telegram and more

まぁ何かといえば、いろんなアプリを一つのウインドウで管理、タブで表示が切り替えできて、中身はWebView的なものが表示されるってだけなんですが。
それでSlackの幾つかのチャンネルと、Discord、Google Play Music何かを突っ込んで一つのウインドウで完結させてます。便利です。

詳細は適当にぐぐって見てみてください。

で、Google Play Musicなんですがこれ、デフォルトでは利用可能なサービスに入っていません。
それらはまだBetaっぽいのですがプラグインで対応できるようで、有志がGithubなんかにコードを上げてくれています。

meetfranz/plugins: Franz Plugin Repository

ここからGoogle Play Musicのプラグインを落としましたけど、普通に便利です。

自作プラグイン

中身をみてみたらすごい簡単なので、とりあえず今日ちらっと雨が降った的なTweetを見たので、アメッシュのプラグインを作ってみました。
こちらのレポジトリからZipでDLして、Pluginフォルダに突っ込んでください。多分動きます。

Remicck/ameshu_franz

これ、自作のIRKIT操作アプリなんかを突っ込んでおくのも良いかもしれないなぁ・・・。

※でも、4Kモニターになったらいらなくなるかもなぁ・・・w