Wordpress

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を更新したのでした。という記事でした。

WordPressから移植したい

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

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

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

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

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

今日はこんなとこ。

プレイ動画を見直す為の動画共有サービスを作りたい。

すっかり忙しくてまともにゲームも出来ておりませんりっくんですこんにちは。ゲームはできなくてもBlogだけは・・・!というわけで、ひっさびさに更新します。
(´・ω・`)

容量はそんないらんから限定公開したい

もう、すっごくニッチな需要だってわかってるんですけど,私のほしい動画共有サービスが無くて困っております。
具体的に挙げますと

  • 時間制限なし
  • 全体のストレージは2GBとかでいい
  • つまりすぐ消えてもいいから、1本は見れるようにしたい。
  • 動画の再生コントロールをしたい
    誰かが再生したら全員が一緒の時間で再生されるみたいな事。
  • コメントが残せればなお良い(非同期的に見直したい)

まぁぶっちゃけ、ゲームの見返しをしたいんです。復習がしたいのです。
動画の見返しって結構大事で、プレイしてる時には気づかなかったこととかが結構見えてきます。 正直周りを見きれてない場合も多いですし。

そういう時に見返したいのですけど、そこが・・・こう・・・・!

今は開始するときに「せーのっ!」とか言って開始してるわけです。
これを全力で自動化したい(ぶっちゃけ恥ずかしい)

実際、シークがめんどくさいとかもあるわけです。
「MM:SSから開始したい」とか、すごいめんどくさいんですよ、ホント。

でも何とか出来そう。

でもよく考えたら動画プレイヤーって、JSで制御できるじゃないですか。
なので、プッシュ的な形で同時再生って実装できると思うんですよねぇ。

video.js
とりあえずVideo.jsを使ってみようと持ってます。

そんなわけで、やります。
WebSocketとか使うのが本筋かもしれないけど、まぁWebRTC使えばいいかなぁと思ってます。
SkyWayありますし、一回やってるし。

WebSocketを使える環境も自分のサーバーに作りたいんだけども、というかNginxをフロントにおきたいんだけども時間がなくて設定できない・・・。

そいうわけで

とりあえずLoLを想定して、プレイ動画の見直しができるようなものを作ります。
まぁ完成したら簡単に配布できるようにしようかなぁと思ってます。

いつになるか・・・、書いたからにはやりたい。

誰か手伝って。

では!

関連記事を表示できるように・・・できるように・・・

ちょっとこれから少しでかけますりっくんです、夜やっぱりちょっと遅れるかも。

手短に

タグから関連記事を表示!

関連記事はありません!!!!!!!

ということで、いろいろ見てやったんですが、タグから検索するとなると、僕は偏ったタグになってないみたいで、この様に出てこない・・・と(笑)
記事を書けって感じです、書きます。これからもよろしくお願いします>< 

以上。

 

※追記

一応この記事の場合ちゃんとWordpressから検索していくつか持ってきてくれてますね。一応後からサムネイルも表示できるようにするつもりなので、少々お待ち下さい><

PHP APPSのWordPressでFTP接続できるようになった。

どうも連日の夜更かしが色々とよろしくない影響をりっくんです。今日こそ早く寝るので、夜更かしさせないでください。

PHP APPSのWordpress

ちょっと前に話題になったんですが、こちらです。
PHP APPS簡単に説明すると、PHPが設置してあってWordpressとかPuniwikiの設置がラクラク行えるサービスですよって感じ。
けどこれ、基本的にだいたいのことはできるんですが、FTPでの接続はできなかったんですよ。それが不便でプラグインとか入れられないものがあって残念だったんですが、今日の昼頃にFTP接続ができる設定つくったよーってメールがとどきました。

ってことでやってみました

設定方法

管理ツールから設定ページを開いて・・・

FTPアカウント設定をクリックします。

そこでFTPアカウントの設定を変更したいので、設定変更をクリック

パスワードを設定し(設定しないと、PHP APPSの設定が付けられるみたいですが・・・)有効を選択、
最後の設定変更(確認)を押します。

ここまでやると、確認ページが開くので、そこで再度OKを押してください。

これでFTP接続がOKになります。書いてありますが、接続先は/wp-contentになるようです。

 

それで設定をONにすると広告が表示されるんですが・・・

とまぁこんなかんじに、上部に結構大きな広告が表示されます。
これはCSS弄って少し気にならない感じにしたいですね・・・。

 

実はまだ接続してない

とまぁここまでやっておいて、まだFTPでつなげてません(笑)
ただこのサイズの広告が入るのに抵抗がある人も多いと思うので、公式の検索からのテーマ、プラグインで十分な人はそのまま使うのが良いでしょうね。そうでない人はCSSいじるとかがいいのかな・・・。

で、調べてたらこんな記事が。
『PHP APPS』WordPressにおける「FTP機能」提供開始のお知ら

確認してみるとWorspressにログオンしている状態の時のみ上部に広告が表示されるようです。ステータス:有効時には上部広告が表示されるようです。
追記
編集終了後ステータス:無効に設定すると上部広告は非表示になりました。

つまりFTPでアップロードとかして、終わったと無効にすれば広告が消えて万々歳ってこと・・・?
帰ったらやってみようかな・・・、なんかプラグイン入れたりテーマいれたりして。

PHP APPS雑感

なんにしても、FTPまでできるWordpress環境が簡単に構築できるのは素晴らしいですね! 無料ユーザーのディスク容量は小さいので、いろんなテーマを置きっぱなしとかは難しそうですが、ちょっとしたイベントのページに使ってみるなど、いろいろ幅が広そうです。
有料会員になると独自ドメインを設定したり、ディスク容量を拡張できるので普通に使うのもいいかもね・・・!

そんなわけで、ひとつの選択肢として使ってみると良いと思いますよ! 

 

Twitterアカウントでコメント書けます!

連日の夜更かしが僕を寝かせてくれません、りっくんですこんにちわ。今日もこんな時間に更新することに・・・。

Blogのコメント欄にはぜひTwitterアカウントでどうぞ

コメントする時にメールアドレスを求められると思うのですが、それって結構めんどくさいですよね。
こっちの方法も認証があるんで一手間かかりますが、それでもメアド使うよりはいいかなぁと思うので紹介しておきます。 

とまぁこの画像の様に、コメント欄をクリックして右下に出てくるTwitterマークをクリックすればOK
小さいTwitterの認証窓が開くので、そこで認証してくださいな。

 

WordPressにTwitterアカウントも使えるコメント欄を追加する方法

一応そういうニーズもあるかもしれないので紹介しておくと、 Jetpack by WordPress.comって言うプラグインを入れて、設定からJetpack コメントをONにすればOK!

ただし、これはカスタマイズされたコメント欄だと反映してくれないかもしれない。例えばデフォルトテーマであるTwentyElevenとかなら普通に適用されるんだけど、個人が作って色々カスタマイズしてるWordpressテーマだと反映されない可能性があるので注意。
※それについてはググって調べてみてください。

では!

GoogleAdSense申し込みと、トップページのThumbnail関係の更新とか

ちょいとやること終わったら、Blog書こうという気になったりっくんですこんばんわ。もう3時なのにね・・・(‘A`)

GoogleAdSense

PCでご覧の皆様は右上に広告が出てると思いますが、勉強も兼ねてGoogleAdSenseに申し込んでみました。2次審査までありましたが、問題なく通過して今日の夜に広告が表示されるようになりました。

基本的に自分のBlogにはあまり広告のせるつもりなかったんですが、Web広告についてあまり積極的に情報収集してないのは良くないなぁと思ったのと、まぁ単純な好奇心が・・・!(まぁでも右上は気になるからエントリ下部に配置しようかな・・・)

そんなわけでちょいちょいいじられると思います。

TopページのThumbnail関係

このテーマのデフォルトだと、サムネイル登録されてない記事が出た場合そこに画像が表示されず、他と違ったスタイルになってたんですが、なんか不均等で気持ち悪かったので”No Image”って書かれた画像を表示するように変更しました。
あまりPHPいじってなくて慣れてないからだと思うんですが、HTML内にあるPHPコードっていうか、もうタグがぐちゃぐちゃしてて読みにくかった・・・。

とりま!できてよかった。

次の記事前の記事

とりあえず置くだけ置く。今のままだとデザイン的に非常によろしくないけど(previous_post _link()とnext_post_link()を並べて設置しただけという・・・。でもいろいろ便利ですねWordpress・・・。

Sass

Sassの基礎 (全15回) – ドットインストール

これ見てSass(記法はscss)をやってみたんですが、普通に便利すぎてびっくりした。もうね、変数宣言できるだけで素敵そう。関数とかMixinとかも使えそうだ!書き出されるファイルは普通のCSSだし!次なんか作るときは使ってみよう。

 

おわり。

問題点洗い出し

バグりまくりんぐで泣きそう、りっくですこんにちわ。

一応Blogのテーマ更新したんですけど問題点ありすぎるので、これは8月以降の課題として、ひとまず洗い出し作業をしておこうとおもいます。特にスマフォ利用で辛いと思われますw

 

予期しなかった☆一覧とその対策

  • トップページで写真が多いためか重く、スクロールにひっかかりを感じる → サムネ画像を小さくして4列2行、8エントリにまとめ直す。
  • トップページのマウスオーバーで表示されるエントリーDescription部分をクリックしてもエントリーに飛ばない。 → おそらく仕様であるが、使いにくいのでこの部分をクリックしてもエントリー記事に飛ぶようにしておきたい。
  • トップページのエントリーDescription部分、FileGalleryプラグインのタグがそのまま反映されてしまう。 → 現在、これ以外のものが見つかっていないのでphp自体を修正する予定。
  • トップページのエントリーDescription部分の日本語が、最後の文字で化けることがある。 → そもそも英語用の文字数換算をしてるきがしている。これもphp自体をいじって直す!
  • Tablet向け、Smartphone向けの横幅にするとmixiチェックボタンが肥大化する。 → そもそもこのソーシャルボタン自体を見直す予定。
  • Tablet向け、Smartphone向けの横幅にするとFile Galleryというプラグインで表示してる画像が崩れる。 → CSSいじってなんとか・・・。

ひとまずこんな・・・こんないっぱい・・・。頑張ります(‘A`)

 

追記

  • タグ検索がうまくいかない → ヽ(`Д´)ノウワァァァン!!
  • サムネイルのないエントリーが検索結果に表示されない → 無かった場合の処理を書いておいて何とかする。・・・できなかったらMySQL弄ってなんとかできないかな・・・。
  • ついでにメールアドレス必須もなくす。これによって自動ログインができないみたいなレスを前頂いたんだけど、真偽は不明・x・

jQueryでスライド表示してみた

jQueryおもしろいじゃない。
当Blogの右側のカラムに、Aboutmeというウィジェットが配置されているのですが、そこの more ボタンを押してみてください。

とまぁそんな感じでスライドするように出来ました。

<span class="bold">name</span>:Ricck(21)</br>
<span class="bold">occupation</span>:College Student</br>
(economics)</br>
<span class="bold">favorite</span>:</br>
FPS,FEZ:Aエル</br>
Camera:D80</br>
Android,Xperia</br>
</br>
<!-- ここから隠す -->
<div id="aboutmemore">
	<span class="bold">Server</span>(http,ftp,mumble,etc)</br>
	<span class="bold">Web</span>(html css js jQuery)</br>
	<span class="bold">PC</span>(Corei7,HD5850)</br></br>
	<span class="bold">Link</span></br>
	<a href="http://www.facebook.com/profile.php?id=100001176943922">Facebook</a></br>
	<a href="http://mixi.jp/show_profile.pl?id=24333775">mixi</a></br>
	<a href="http://fesns.com/?m=pc&a=page_f_home&target_c_member_id=50928">FESNS</a></br>
	<a href="http://fez-sns.jp/?m=pc&a=page_f_home&target_c_member_id=1932">FEZ-SNS</a></br>
	<a href="http://steamcommunity.com/id/ricckn">Steam</a></br>
</div>
<!-- ここまで -->
<a id="aboutmeclick" style="position: relative; margin-left: 100px;">
	<img src="//www.remicck.net/wp-content/themes/wp.vicuna/skins/style-mono/images/common/more.png">
</a>

んでjQuery

$(document).ready(function(){
    $("#aboutmemore").hide()
    $("#aboutmeclick").click(function(){
        $("#aboutmemore").slideToggle();
    });
});

初め躓いたのは一行目の

$(document).ready(function(){ 

が無くてまったく動かなかったこと。実はまだこれがどういうものか正確に把握してないんだけど、サンプルコードを見る限りこれ必要そうだったから入れておいた・・・。

#aboutmemoreを隠しておいて、#aboutmeclick(moreの画像のaタグに付与しておいて)をクリックすると、スライドして出てくる、っと。

とりあえず動く部分ができたから中のHTMLはもう少しこってもいいかもしれない。
問題はなんかロードしてる段階でみえちゃう場合があるんだよね。隠れるまで時間がかかる的な。これどうやって対処したらいいかまったくわからん。高速化的な部分になるのだろうか、謎。

まぁそこは後々。

Blog作成記

今回はそこそこ(結果的に)自分好みなデザインに成ったんだけど、今回気がついたのは配色が一つ難しいっていう事。寝る前のヒマ潰しがてらに書いてみよと思いますよ。

続きを読む