カテゴリー: Web / design / develop

現象：
Docker MarinaDB11.3 → さくらレンタルサーバー MySQL5.7でSQL dumpできない。

解決策：
DockerのSQLをMySQL5.7で合わるしかない。
（MarinaDBのデータはphpMyAdminでエクスポートしてから取り込む）

Movefileのdatabase設定 charset: “utf8″で解決できなかった。

具体的にはデータベース内の特定の文字列がUTF-8化できないというエラーなので、特定して潰せるならMarinaDBでもいける。（SQL操作が必要）

かなり昔にWordpressをVagrantでローカル構築して作ったWebサイトを、最近dockerで再開発した。
最近までApple Sillicon MacのdockerでMySQL5.7を使っていたが、どうしてもRossetaで無理やり動作させているため注意マークがでるのが気になっていた。
それならとMarinaDBに切り替えて、他案件ではうまくいっていたのだが、古い案件で特定の文字コードが変換できないみたいなエラーが出た。

テストサイトのデータなのでそこまで時間かけたくなかったこともあって、力技で解決したという備忘録。
困り人の役に立てば幸い。

結論

チェックボックスと同じ名前で、hiddenを作る
hiddenはチェックボックスの前に配置（空白を無理やり挿入する）

タグの構造としては以下になる。例えばcheckboxの名前が checkbox_name の場合

[hidden checkbox_name]
[checkbox checkbox_name use_label_element "チェックボックス項目A" "チェックボックス項目B" "チェックボックス項目C"]

checkboxは何も選択していない場合ではnullを返す。Contact Form 7の機能である「nullを空白に変換」にContact Form 7 Multi-Step Formsが対応しておらず、メールテンプレートで呼び出された [checkbox_name] がそのままメールの文面に出力されてしまう。
そこでhiddenを前に設定し、値として空白を渡す。もしチェックボックスが選ばれた場合は、空白は上書きされるという寸法。(nullは出力出来ないけど、空白はデータとして扱えるため)

checkboxのnullを、 [hidden checkbox_name] で空白に事前設定するという対抗策。

When checkbox fields are left unchecked they appear as [field-name] in the email. How do I resolve this?

チェックボックスフィールドのチェックを外したままにしておくと、メールに[フィールド名]として表示されます。どうすれば解決できますか？

When checkboxes are not checked they aren’t submitted through the form so the last step of the form doesn’t know the unchecked checkbox field exists. To get around this issue add a hidden form tag like [hidden field-name] to the last step. This way the last step will either submit the previously set value or a blank value.

チェックボックスがチェックされていないとき、それらはフォームを通して送信されないので、フォームの最後のステップはチェックされていないチェックボックスフィールドの存在を知りません。この問題を回避するには、最後のステップに [hidden field-name] のような hidden フォームタグを追加します。こうすることで、最後のステップでは前回設定した値か空白の値が送信されます。

https://ja.wordpress.org/plugins/contact-form-7-multi-step-module/

地味に厄介でQ&Aに書いてある英文翻訳は解決策がよくわからなかったので備忘録メモ。
ボクも確認画面いるかー？派なのだけど、これ好きな人多いんだよな……。

困り人の役に立てば幸い。

簡潔に結論。公開鍵形式に起因。
ed25519形式は認証できない。
RSA形式で再作成して再登録する。

XSERVERに登録したSSH公開鍵がed25519形式の場合、ssh接続は可能でも、データベース操作でdumpファイルを出力しようとするとSSHで認証ゴケする。マジで謎。
（ed25519形式でも、rsyncによるテーマファイルやプラグイン等のダウンロード・アップロードは可能。 wordmove push / pull -dだけ失敗する）

256 SHA256:####################### (ED25519). ← DB dumpのときにSSH認証エラー
4096 SHA256:****************************** (RSA) ← こちらはOK

さくらインターネットはいつもどおり上手くいくのに、Xserverだとできないのマジで謎だった。Docker / nginx / wordpree / wordmoveというニッチな環境でやってると類例がでなくて大変困る。

何回やってもエラーが発生するし、サーバー側のデータベース指定の箇所を、XSERVERがMySQL5.7からMariaDBに変更され、mysql***.xserver.jpからlocalhost指定になったのが原因なのでは？これ詰んだかなー？と試行錯誤した結果、SSHの鍵の種類だった。マージでうんこー。

困っている方のお役に立てば幸いです。（’A’

マージでハマったので備忘録

解決策

devServer: {
  static:path.resolve(__dirname, 'public_html/***/wp-content/themes/***/assets/dest'),
  hot: 'only',
  compress: true,
  port: 3000,
  https: true,
  proxy: {
    '*': {
      target: 'https://localhost:＊＊＊＊', // nginxで稼働してるwordpressのアドレス
      secure: false,
      changeOrigin: true,
    },
  },
  devMiddleware: {
  	writeToDisk: true,
  }
}

devMiddlewareでwriteToDisk:trueで解決できた。
海の彼方にいる名も知らぬ友よ。
幾千の感謝を。

Docker / nginxでWordpressを立ち上げて開発しつつ、webpackでbrowserSyncしていたのだけど、browserSyncのバージョンがあがってしまい、browserSync-webpack-pluginが死んだ。
正直pluginだけの問題だからバージョン下げるってのも考えはしたけど、そういうのが嫌でgulpを投げ捨ててwebpackにしたので、なんとか解決した。

ニッチな製作していると突然死んでしまう。

解決策ででてくるblogのタグが動かないのでお願いChatGPTで解決したので備忘録。

function generate_image_tag($atts) {
    $atts = shortcode_atts( array(
        'img' => '',
        'alt' => '',
        'webp' => true,
        'theme_url' => get_bloginfo('template_url'),
        'picture_class' => '',
    ), $atts );

    // File path details
    $file_info = pathinfo($atts['img']);
    $file_dir = $file_info['dirname'] != '.' ? $file_info['dirname'].'/' : '';
    $file_url = $file_dir . $file_info['filename'];

    $output = '<picture';

    // クラスが指定されていれば追加
    if (!empty($atts['picture_class'])) {
        $output .= ' class="' . esc_attr($atts['picture_class']) . '"';
    }

    $output .= '>';

    if (strtolower($file_info['extension']) === 'svg') {
        // If the file is an SVG
        $output .= '<source media="(min-width: 768px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'.svg" type="image/svg+xml">';
        $output .= '<source media="(max-width: 767px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'_mobile.svg" type="image/svg+xml">';
        $output .= '<img src="'.$atts['theme_url'].'/images/'.$file_url.'.svg" alt="'.esc_attr($atts['alt']).'">';
    } else {
        // For other image types (non-SVG)
        $use_webp = $atts['webp'] && in_array(strtolower($file_info['extension']), array('png', 'jpg'));

        // WebPが指定されている場合
        if ($use_webp) {
            $output .= '<source media="(min-width: 768px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'.webp" type="image/webp">';
            $output .= '<source media="(max-width: 767px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'_mobile.webp" type="image/webp">';
            $output .= '<img src="'.$atts['theme_url'].'/images/'.$file_url.'.'.$file_info['extension'].'" alt="'.esc_attr($atts['alt']).'">';
        } else {
            // WebPが指定されていない場合
            $output .= '<source media="(min-width: 768px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'.'.$file_info['extension'].'" type="image/'.$file_info['extension'].'">';
            $output .= '<source media="(max-width: 767px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'_mobile.'.$file_info['extension'].'" type="image/'.$file_info['extension'].'">';
            $output .= '<img src="'.$atts['theme_url'].'/images/'.$file_url.'.'.$file_info['extension'].'" alt="'.esc_attr($atts['alt']).'">';
        }
    }

    $output .= '</picture>';

    return $output;
}
add_shortcode('generate_image', 'generate_image_tag');

これで固定ページに以下のショートコードを挿入することで、SVGの時はSVGとして、jpg/pngでwebp用意している・していない時を切り替えることができる。

使い方は

[generate_image img="ディレクトリ+ファイル名" picture_class="pictureへのclassを入力（複数可）" alt="alt属性を入力" webp="true/false"]

img=””にファイル名を入力。拡張子がsvgの時は、webp=””は省略可能。
webp=””はファイル拡張子がpngまたはjpgの時、用意しているのであればtrue、用意していないときはfalseを設定。

迷い人の解決になれば。