2022-11-04

ウェブサイトのデザインを変更しました

今週は祝日もあったりして少し時間に余裕があったので、PC版サイトの小規模改修をしていました。主に左カラムにあるメニュー周りです。

ゲームプレイ日記の整理

今までは適当に羅列しているだけだったプレイ日記ですが、数も大分増えてきましたので、「サモンナイトシリーズ」「テイルズオブシリーズ」「ヴァニラウェア作品」「その他」に分類することにしました。


「人気のあるページ」の設置

新たに「人気のあるページ」をメニューに加えました。「投稿」「固定ページ」の中から、直近24〜48時間以内の閲覧回数をベースに表示されているそうです。最近までTOX2のエンディング集がランキングに上がっていたのですが、先日ちょうど10周年だったからですかね。

やっぱりゲームネタが人気なのか…


メニューの量も大分増えて長くなってしまいました。そろそろ左カラムのみの2分割だけじゃなくて、左右カラムを備えた3分割タイプにすべきなんですかね…。

このサイトをブログ化する時にも死ぬほど悩んだのですが、結局それまでのデザインを踏襲した結果2分割型にしました。でもいつか3分割にする日が来るかもしれないと思って、3分割に変更できるような仕込みはしてたはずなんだよな…ただその仕込みがどこに仕込まれてるのかもう思い出せない。


2022-10-23

TeraPadが10年ぶりにアップデート

テキストエディタの老舗「TeraPad」が10年ぶりにアップデートしたそうです。

まじ…かよ…

このサイトは大部分がWordpressで生成されていますが、一部(星界のページとか)は今でもHTMLを手打ちしながら組んでいます。その際に使っているのがTeraPadなんですよー。ありがたやありがたや。めっちゃシンプルなのに視認性が高くて、このサイトを作り始めた2000年当時から愛用しています。

今時テキストエディタでHTML手打ちとか流行らないにもほどがあると思うんですけど、HTMLの知識を維持するのには役立っていますし、そのおかげで今でもこのブログのデザインを維持できている(ブログのデザインカスタマイズにはHTMLやCSSの知識が必要)ので、捨てたもんじゃないです。それにテキストエディタについて知っていたことが仕事で役に立ったこともあるので、やっぱり知識って無駄がないなーと思いますね。この先もまだまだ使い続けていこうと思います。


2022-08-19

PHPをバージョンアップしたら「データベース接続確立エラー」が出た場合の対処法(続き)

昨日の記事に記載したとおり、PHPのバージョンを7.3.33に上げました。しかし調べているうちに、7.4に上げられないのはプラグインとかのせいではなく、データベース(MySQL)のバージョンが古いからである可能性が浮上しました。

幸いスターサーバーには、MySQL5.0を5.7にバージョンアップする「データベース移行ツール」というものがあります。

使い方はこちらでわかりやすくまとめてくれています。スターサーバーはこういうところが好き。

ただ手順8の「8. ご利用プログラムの設定ファイルを編集し、データベースホスト名を変更します。」というところはどうやってすればいいのかわかりにくいかもしれませんので、Wordpressを使用している場合の処理方法をまとめておきます。

1.「サーバー管理ツール」から「FTPアカウント設定」> データベースを移行したいドメインの「選択」 > WebFTPの「ログイン」を順にクリック

2.ファイル一覧から「wp-config.php」を探し(通常は「wp」フォルダの直下)、編集アイコン(真ん中辺にある紙とペンのアイコン)をクリック

3.開いたウィンドウで「/** MySQL のホスト名 */」の次の行にあるデータベースの名称を、指示通り書き換える

4.ウィンドウの上部にある「上書保存」をクリックして終了

という感じでした。

あとは上記サイト通り進めて、わずか5分ほどでデータベースのバージョンアップが完了しました。その状態であればPHPも7.4.28に上げることが出来たので一安心です。

 

2022-08-18

PHPをバージョンアップしたら「データベース接続確立エラー」が出た場合の対処法

これまでうちのサイトではPHP7.1.33を使用していたのですが、昨日あたりからWordpressのダッシュボードに入ると、そろそろPHPをバージョンアップしろという警告が出るようになったので、サクサクバージョンアップしました。ちなみにyukkun20はスターサーバー(旧ファイアバード)というサービスを使っていますが、その場合のPHPのバージョンアップの方法については以前扱っていますのでそちらをご確認ください。

7.1.33より上のバージョンで選択できるのは、7.2.34、7.3.33、7.4.28(推奨)、8.0.16、8.1.6なのですが、どれがいいかよく分からなかったのでとりあえず推奨の7.4.28にしておきましょう。ポチッとな。これでサイトにアクセスすると…

サイトが飛んでしまいました。Y.A.S.ここに眠る。「データベース接続確立エラー」が致命傷でした(ノД`)シクシク

…あまりのことに思考が停止してしまいましたが、どう考えてもPHPのバージョンアップが原因なのでひとまず7.1.33に戻したところ、ひとまず復旧しました。助かった。

さて、それで良しとするわけにはいかないので、抜本的な解決を図りましょう。いろいろググったところによると、おそらくプラグインかテーマがPHPの新しいバージョンに対応していないのが原因っぽいです。ではどのプラグインやテーマが悪さをしているのか調べましょう。

1.プラグイン「PHP Compatibility Checker」を導入する

このプラグインは、サイト上のテーマとプラグインのコードを精査し、PHPのバージョンごとの互換性を調べてくれるプラグインです。

インストールについては特筆すべき事はないので省略。インストールできたら、「ダッシュボード > ツール PHP Compatibility」を開きます。

とりあえず「PHP 7.3」「有効化中のプラグインとテーマのみをスキャン」にチェックを入れてサイトをスキャンします。1回目はエラーが出たのですが、無視して「サイトを再スキャン」を選択するとうまくいきました。結構時間かかりますので気長に待ちましょう。

終わるとこんな感じでレポートが出ます。結果は「互換性あり」「警告:○」(○は警告の個数)「エラー:○」のような感じで出ます。

2.原因となっているプラグインやテーマを修正する

「エラー」が出たものについては修正した方が良さそうです。

一番簡単なのは、そのプラグインやテーマを無効化することだと思います。ただどうしても使い続けたい場合は、先ほどの結果の「詳細切り替え」をクリックすると、プラグインやテーマのうち、どのPHPファイルのコードの何行目に問題があるのか示してくれるので、そこを個別に修正しましょう。

yukkun20の場合、エラーは4つ出ました。

  • プラグイン「Commented entry list」→いつ入れたのかも覚えてないくらい古いプラグイン。現在は「WP-RecentComments」を使っていて不要なので無効化。
  • プラグイン「SyntaxHighlighter TinyMCE Button」→使い勝手が悪く、導入したものの一度も利用していなかったので無効化。
  • プラグイン「Wp Pagenavi Style」→以前から問題があると言われていたものの、デザインの都合上使い続けていたプラグイン。プラグイン「WP-Pagenavi」のCSSを一括設定するためのものだったので、必要なCSSを「WP-Pagenavi」のpagenavi-css.cssにコピーし、設定画面で「pagenavi-css.css を使用」にチェックを入れれば「Wp Pagenavi Style」は不要になる。無効化。
  • テーマ→「Assigning the return value of new by reference is deprecated in PHP 5.3 and has been removed in PHP 7.0」というエラーメッセージが出ました。意味が分からずググったところ、こちらのサイトに簡単な解決策が記載されていたのでそれに従って修正。

もう一度「PHP Compatibility Checker」でスキャンするとエラーはすべてなくなっていました。そこでPHPのバージョンを上げたところ、7.3.33までは問題無く上げられました。(ついでにPHP高速化設定もできました)
7.4以上にするとまた「データベース接続確立エラー」が出るので、おそらく7.4に対応できていないプラグインがあるんでしょうね。ただ現在の「PHP Compatibility Checker」ではPHP7.3までしか調査できないですし、7.3.33は現在公式にサポートされているので当面はこれで安心です。「PHP Compatibility Checker」がPHP8に対応したら、再び修正をしようと思います。(ただサポートページを見ると、開発が止まっているっぽい感じもします…)

Y.A.S.のテーマは、このブログを立ち上げたときにyukkun20が見よう見まねで作ったもので、yukkkun20自身も意味が分からず扱っているところがあるので、もし何か致命的な不具合が出たら自力で対処できる気がしないんですよね…。一般に配布されている最新のテーマに乗り換えるのも一つの選択肢ですが、そうするとこのサイトのデザインを捨てないといけないんです。もう18年くらいこのデザインを使っていて(マイナーチェンジはしていますが)自分でもすごく気に入っているので、捨てたくないんですよね。今回のエラーは軽いもので助かりました。

※2022-08-19追記

7.4にバージョンアップできました。こちらの記事をご覧ください。


2022-06-16

テイフェス情報まとめページがスマホからでも見やすくなりました

「テイフェス情報まとめ」のデザインを修正して、スマホやタブレットからでも見やすく調整しました。

テーブルはPCとスマホでは全然見え方が違うので、最近は両方に気を使ったデザインにしないといけないから難しいですね…。そもそもテーブルをデザインに使うのがよくないということは十分分かっているのですが。

これでデザイン関係の修正は一段落ですかね。日曜くらいからTOF2021の更新を真面目に始めようと思います。


2022-06-15

テイフェス出演者リストがスマホからでも見やすくなりました

テイフェス出演者リストのデザインを修正して、スマホやタブレットからでも見やすく調整しました。また同時に見出し列(出演者名と作品名/キャラ名を記載した列)を固定し、横スクロールをしても見出し列が見えたままになるようにしました。

PCではこれでほぼ問題はないのですが、スマホで見ると微妙にセルがずれます。ただこれはもうyukkun20の技術力では直りそうにないのでお許しください。

<<以下ひとりごと>>

これまでスマホ等では全く表の体裁をなしていなかったのですが、それはWPtouchのカスタムCSSで、モバイルテーマにおいてはテーブルの要素をすべてdisplay:blockでブロック化していたのが原因です。これをすると、表をスマホ等で閲覧した場合、左上のセルから始まり左から右、上から下のセルの順に一列に並べて表示できるため、小さめの表を見やすく表示するには向いています。ただ大きめの表を表示しようとすると極めて縦に長い表になるため、視認性が下がります。

そのためこのページではカスタムCSSをはずそうとしたのですが、あいにく特定のページでのみカスタムCSSを解除する方法が分かりませんでした(これが分かれば前述の微妙なセルのズレも直せると思うのだが…また後日きちんと調べよう)

仕方なくWPtouchのカスタムCSSよりも優先順位の高い、TablepressのカスタムCSSで、対応するプロパティにデフォルトの値を設定することで、事実上打ち消すことにしました。

各プロパティのデフォルト値は以下の通りです。

  • table:table
  • tbody:table-row-group
  • tr:table-row
  • th:table-cell
  • td:table-cell

2022-05-29

ポータブル電源買ってみました

Amazonのタイムセールで、ポータブル電源を購入しました。

以前から防災グッズとして興味はあったんですけど、yukkun20がお世話になっているAnkerの512Wh電源が今回のセールで10,000円引きだったので購入を決めました。まじで防災のことを考えるなら1000Whくらいのものを購入すべきですが、そういうのは価格が3倍くらいするからな…

ただこの製品は、バススルー機能(充電しながら給電する機能)がついていて、コンセントと家電の間に挟むことで、簡易的な無停電電源装置(急な停電が起きたときも家電での電気供給が途絶えないようにするためのもの)として使えるという利点があります。またAnkerは使わなくなった製品を無償で引き取ってくれるので、廃棄するときにも安心です。小さいので保管場所も取らないし。

3ヶ月放置してもわずか7%しかバッテリー容量が減らないらしく、災害時に慌てなくて済むというのもずぼらなyukkun20に合っている気がします。雷が鳴っているときにゲームするときとか、停電で冷凍庫のアイスが溶けちゃいそうなときとか、バーベキューしながら扇風機に当たりたいときとか、いろいろ使ってみようと思います。


2022-05-13

【周辺機器】Anker SoundCore 2 レビュー

ゼノブレイドDE、10章に入りました。フィオルーーーーン!

それはそうと章をまたぐたびに山のようなサブイベントが発生するので、最近はメインストーリーを1日進めて、サブイベントを3日こなす、みたいなペース配分になっています。ところで今作はサブイベントも、目的のアイテムがどこにあるかとか人がどこにいるかとかきちんとマップ上に表示されるようになっていますけど、これってオリジナル版からそうでしたっけ?オリジナル版は人がどこにいるかキズナグラムから探すしかなくて、すごく面倒くさかった記憶があるんですが…

Anker SoundCore 2

価格:5199円

レビュー

yukkun20が2017年に購入したスピーカーですが、昨日から急に電源を入れるとジジジジ…というノイズが発生するようになりました。

スピーカーをつないでいる機器(ゲーム機)が作動中かどうかにかかわらずノイズが出ていてかなり耳障りでした。電源ケーブルかAUXケーブルかどちらかを抜けば音は止まるのですが…。とはいえ元々3000円で購入したものですし、5年も経てば寿命でしょう。ということで、後継機のSoundCore2を購入しました。実はすでにPCのスピーカーも1年前にこの機種にしているので、これは2台目になります。

ちなみにすでにこの機種にも後継機がある(SoundCore 3)のですが、そちらは充電ケーブル用のポートがMicro USBからUSB-Cに変更されています。今後のことを考えるとUSB-Cの方が何かといいのは分かっているのですが、そうするとまたケーブルを張り直さないといけないのが面倒なので、yukkun20はこちらを購入しました。方落ちしてるからって別に安くなってないのはちょっとつらい所です。Ankerはしょっちゅうセールしているので、もし購入を考えておられるならそのタイミングを待った方がいいかもしれません。yukkun20的にはゲームのスピーカーが故障したというのは死活問題なので、即購入せざるを得ませんでしたけど。

SoundCoreシリーズは、小さくてモニターの下にすっぽり収まりますし、頑丈で、外に持ち出しても使えますし、カラーバリエーションも豊富です。音質も不満点はありませんし、使い方も簡単で、ユーザーサポートもしっかりしているので安心して使っていけますね。


2022-03-10

マクロコントローラー「GuliKit KingKong2 PRO Controller」の使い方

Switch/PC/スマホ用のマクロコントローラー「GuliKit KingKong2 PRO Controller」を購入しました。

取扱説明書が英語と中国語しか付属していないので、適当に日本語訳したものを用意しました(※正確さについては保証できないので、誤りを発見された方はご指摘ください)。英語の取扱説明書はインターネットからも閲覧できます。

PCとのペアリング

無線接続(PC側にBluetoothが必要)

  1. モードボタン(上面、Rボタンのすぐ左側にある丸いボタン)を2秒押して、「PC XINPUT モード」(WindowsロゴとXが記載されたアイコン)に切り替えます。
  2. ペアリングボタン(上面、Lボタンのすぐ右側にある丸いボタン)を2秒間押し、ボタンの上にあるLEDを点灯させます。
  3. PCでBluetoothの設定画面を開き、「GuliKit Controller XW」と接続してください。
  4. 新しいコントローラーとして認識されれば接続は完了です。

有線接続

モードボタンを押して「有線接続モード」に切替え、PCとUSBケーブル(USB-C―USB-Aケーブル)で接続してください。
デスクトップPCを使用している場合、可能ならUSBポートはPC本体背面のものを使用してください。

*「PC DINPUT モード」(WindowsロゴとDが記載されたアイコン)は、Windowsで過去使用されていた形式で、レトロゲームをプレイするときにご使用ください。現在はXINPUT方式が主流です。

Switchとのペアリング

  1. モードボタン(上面、Rボタンのすぐ左側にある丸いボタン)を2秒押して、「Switch モード」(Switchのアイコン)に切り替えます。
  2. Switch側で、HOMEメニューの「コントローラー」を選択し、「持ち方/順番を変える」を選択します。
  3. ペアリングボタンを2秒間押し、ボタンの上にあるLEDを点灯させます。
  4. 新しいコントローラーとして認識されれば接続は完了です。

Swith本体をドックに置き、HOMEメニューから「設定」「コントローラーとセンター」を選択、「Proコントローラーの優先接続」をONにして、コントローラーとドックをUSBケーブル(USB-C―USB-Aケーブル)で接続することでもペアリングが可能です。自動的にペアリングが行われ、その後はケーブルをつないだまま有線コントローラーとして使用することも、ケーブルを抜いて無線コントローラーとして使用することも可能です。

Android/iOS/macOSとのペアリング

PCとのペアリングの「無線接続」と同じです。モードは「Androidモード」(Androidロゴのアイコン)を使用してください。


コントローラーの具体的な使用方法については、こちらのサイトでまとめてくださっています。説明は旧型(GuliKit KingKong PRO Controller)についてのものですが、新型も基本的には同じです。

上記サイトに付け加える情報は以下の通りです。(「~ようです」とあるのは、取扱説明書には記載されていない、yukkun20調べのものです)

自動シャットダウンについて

  • コントローラーは、10分間入力がないと自動的にシャットダウンします。その場合、A/B/X/Y/HOME/モードボタンのいずれかを押すと復帰します。ただし、連射中、マクロ実行中、有線接続中はシャットダウンしません。
  • ゲーム機と接続せずに充電だけしている時(例えば、USB充電器に接続している等)はシャットダウンするようです(シャットダウンしても充電はされます)。

設定の保存について

  • 設定ボタン(中央にある歯車マークのボタン)とモードボタンを同時に押すと、コントローラーが短く振動し、「プロフェッショナルプレイヤーモード」に切り替わります。このモードでは、コントローラーがシャットダウンしても設定が維持されます。もう一度設定ボタンとモードボタンを同時に押すと、長く振動し、「プロフェッショナルプレイヤーモード」が終了します。この状態でコントローラーがシャットダウンすると、設定は全て初期化されます。
  • 各モードの接続先は保存されていて、モードを切り替えると、そのモードで以前接続していたデバイスに切り替わるようです。

各種設定について

  • 設定ボタンと十字キーの上または下を同時に押すと、バイブレーションの強さを変更できます。強さは4段階(OFF/弱/中/強)に切り替え可能です。

マクロについて

  • コントローラーの電源が入った状態で、設定ボタンとマクロボタン(設定ボタンのすぐ下にあるボタン)を同時に押すと、「読み込み/書き込みモード」に切り替わります。この状態でPCと有線接続すると、「GuliKit dat」というドライブが認識されます。入力したマクロの情報は、そのドライブ内にある「Auto.apg」というファイルに記録されています。このファイルをコピーすることで、他の同機種コントローラーでも同じマクロが使用できます。

その他

  • 純正コントローラーと同じく、このコントローラーから、直接スイッチのスリープを解除することができます。
  • Steamで使用する場合、Proコンとしてではなく、Xboxコントローラーとして認識されます。従って、コントローラーのAボタンとBボタン、XボタンとYボタンがそれぞれ入れ替わっています。「Nintendo ボタンレイアウトを使用」にチェックを入れても改善されないようです。ゲーム画面の表示とコントローラーの表示を合わせたい場合は、ソフト側のコントローラー設定でボタンを入れ替えましょう。

マクロはかなり自由度が高く(ボタン入力・スティック入力いずれも対応)、記録時間も10分間と長いので、放置稼ぎの幅も広がりそうですね。これまで使っていた連射コンは、ボタンを押している間しか連射せず結構不便だったので、これを見つけた時は衝動買いしてしまいました。

購入する際は、旧型「GuliKit KingKong PRO Controller」(形状も型番(NS09)も同じ)、旧旧型「GuliKit Kingkong Controller」(A/B/X/Yボタンに色が付いている。型番NS08)と間違わないように注意してください。

たぶん公式ショップ(↓)が一番安いと思いますが、yukkun20は楽天で購入したので、公式ショップがどういうところなのかは不明です。


2022-03-02

WordPressにoEmbedで埋め込んだYouTubeの表示をカスタマイズする方法

WordPressには、oEmbedという仕組みが導入されていて、YouTubeの動画のアドレスを貼り付けるだけで(わざわざコードを貼り付けなくても)、自動的に動画の埋め込みタグに変換してくれます。(詳しくはこちら

ただYouTubeの場合、埋め込まれる動画は、640*360の大きさに固定され、左寄せになってしまいます。どうにかしたいと思っていたのですが、ようやく解決方法がわかりましたので備忘のために記録しておきます。

1.プラグイン「Jetpack」を導入する

いきなりプラグイン頼みですが勘弁してください。function.phpを書き換える方法でも可能なようですけど、yukkun20にはそういう高度な技術はありませんので…。

Jetpackはサイトのセキュリティや高速化にも役立つプラグインだと思うので、この機会に導入を検討してもらってもいいかもしれません。

導入したら、ダッシュボードから「Jetpack >設定 >執筆 > 作成」を開き、「」をONにします。↓こうなっていればOK。

これをONにすることで、YouTubeの埋め込みタグ(iframe)の前後に、

<span class="embed-youtube" style="text-align:center; display: block;"></span>

というタグが挿入されますので、これを使ってカスタマイズしましょう。

2.CSSを追加する

うちのサイトの場合は、幅を80%にしてセンタリングしているので、

/***** YouTube 埋め込み用CSS *****/
.embed-youtube {
    position: relative;
    display: block;
    width: 80%;
    height: 0;
    padding-bottom: 45%;
    overflow: hidden;
    margin: 0 auto 25px;
}
.embed-youtube iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
/***** YouTube 埋め込み用CSS 終わり *****/

としています。ちなみにpadding-bottomはwidthの9/16倍にするときれいに表示できます(一般的な動画のアスペクト比が16:9のため)。

こちらのサイトを参考にさせていただきました。ありがとうございます。