2020年

本番環境→開発環境の移行メモです。

ローカルにあったWPファイルが,なんやらかんやらで使えなくなったので,FTPサーバー先から開発用にダウンロードしてきました。

そして,Mac の Apache で動かせるようにフォルダを配置します。
~/Site の下ですね。

さて,この先です。
本番環境のMySQLデータをエクスポート,ローカル(Mac)のMySQLにインポートさせます。

しかし,これだけでは動かないので,次の作業を行います。

1. DB接続先の修正

"wp-config.php"のDB接続情報を書き換えます。

2. パーミッションの修正

こちらのサイトを参考に修正します。

参考:「WordPressで推奨されるパーミッション設定について

ただ,今回ローカルのMac で動かすにあたって,Apache が_www グループで動いているため,ファイルやディレクトリにグループの読み取り権限を与える必要がありました。
(Permission denied とApacheのエラーログに出力される。)

なので,上の参照サイトを例に,WordPress を置いたフォルダから,ターミナルで次のコマンドを実行します。

$ find ./ -type d -exec chmod 755 {} \;
$ find ./ -type f -exec chmod 644 {} \;

3 .htaccess の修正

RewriteBase と, RewriteRule を書き換えます。

RewriteBase /ルートからのパス
RewriteRule . /ルートからのパス/index.php [L]

参考:「WordPress引越しで403 Forbiddenが起きる原因と対処法
参考:「WordPress(ワードプレス) 移行での不具合事例:トップページ以外表示されない

4. DB情報の書き換え

本番環境のドメインを持っているので,このままでは動きません。置換します。

置換のためには,「Search Replace DB」を使います。
MySQL8にも対応した最新版が出ているので,公式ホームページからダウンロードします。

参考:「【WordPress】DBの置換には「Search Replace DB」を使おう

公式ホームページ

ページの下の方に 3.xバージョンや 2.x バージョンも置いていますが,最新のもので良いでしょう。メールアドレスを入力して送信すると,ダウンロードリンクを送ってもらえます。

ダウンロードしてきたものを,WordPress のフォルダにコピーし,アクセスします。

「Search Replace」の「replace」に「本番環境」のURLを,「with」に「開発環境」のURLを入力します。

データベースへの接続情報を入力,確認した後,「Do a safe test run」を走らせます。その後,テーブル名など確認次第,「Search and Replace」を実行します。

置換は,「http,https のプロトコルを含めたURL」と,それを含めない「//」以下のURLの2回で実行しておくと良いかと思います。

また,https を http に置換する必要もあるかもしれません。

本番環境なら,「Search Replace DB」は「Delete me」で消した方が良いですね。
開発環境でも,動作を確認して必要なくなったら,「Delete me」で消しておきましょう。


以上になります。

本番環境をhttps で動かしていて,開発環境がhttpでしかアクセスできない場合,意図しないリダイレクトが生じるかもしれません。
その場合,別のブラウザで開いたりするとうまくアクセスできると思います。

この記事は,続きがあります。
下の通りやって動かない場合は,こちも参照してください。


私はCakePHP2.x系(今は,CakePHP2.10.x)で,サクッとWEBサイトを作りたい人です。今,CakePHPは4までリリースされており,PHPのフレームワーク自体も,「LARAVEL」が優勢だと聞きました。Ruby on Rails とかは最近どうなんでしょうね。どれぐらい使われているんだろう。
でも,それらを新しく勉強してサイトを構築する気はなく,CakePHP2系で十分だと思っています。もしくは,WordPress。あるいは,それらを並行して使う。CSSやJSの書き出しはwebpackを走らせれば良いので(SCSSも,TypeScriptも使える)。

さて,CakePHP2での大事な機能の1つに認証機能があります。
ユーザーのログインを管理するものですね。

大概は,ユーザー名とパスワードをフォームに打ち込んで,DBにあるデータと参照し,OKならログイン状態となります。

が,今リリースされているCakePHP2系では,どうもそこがうまく動きません。(私の環境だけ?!)
CakePHPの公式ドキュメント通りにやっても,認証がうまく機能しません。

「CakeBook 2 系:認証」
「CakeBook 2 系:シンプルな認証と承認のアプリケーション」

原因を辿っていくと,どうやら,Core.phpファイルにあるSecurity.Salt 値を,パスワードを平文から暗号化するときに,読み違えていることが分かりました。

おそらく,次のタイミングで,違う値を読んでいるのだと思います。

・平文のパスワードを,DBに書き込む際(beforeSave)
・平文のパスワードを,DBから読み出す際($this->Auth->login() )

なので,DBにパスワードを書き込む際に,beforeSave を使って自動的に暗号化されないようにします。すべて,コントローラー側で,パスワードを暗号化します。

具体的には次のような具体です。
(モデルでは,beforeSaveを使って暗号化しません。)

0)パスワードを暗号化するライブラリを読み込み

// コントローラーのいずれかの場所で
App::uses('SimplePasswordHasher', 'Controller/Component/Auth');

1)新しくユーザーを増やす場合

// POST されてきたデータを変数に代入
$data = $this->request->data;
// パスワードをハッシュ化
$password = $data['User']['password'];
$passwordHasher = new SimplePasswordHasher(['hashType' => 'sha256']);
$password = $passwordHasher->hash($password);
// POSTされてきたデータを上書き
$data['User']['password'] = $password;
// DBに保存
$this->User->create();
$this->User->save($data);

2)パスワードを再設定する場合

// ポストされたデータ($user)にて,
// パスワードを暗号化
$password = $user['User']['password'];
$passwordHasher = new SimplePasswordHasher(['hashType' => 'sha256']);
$password = $passwordHasher->hash($password);

// 上書き用のデータを作成
$data = [
  'User' => [
    'password' => $password,
],];

// 任意のIDの User データを指定
$this->User->id = $user['User']['id'];
// DBに保存
$this->User->save($data);

上の具合です。

ちなみに,この例では「sha256」を使っています。
Authコンポーネントを呼び出す際にも,パスワードはsha256を使うと明示してあげてください。

示す箇所は,おそらく,AppController.phpになると思います。

例えば,次のようになります。

public $components = [
  'Auth' => [
    'authenticate' => [
      'Form' => [
        'passwordHasher' => [
          'className' => 'Simple',
          'hashType' => 'sha256',
]]]]];

以上です。

さて,昨日,passwordHasher を使って「解決した」と書きましたが,色々運用試験してみると,全く解決していないことが分かりました。

そこで,現在,SimplePasswordHasher ではなく,BlowfishPasswordHasher を使うことで対応しています。

具体的には,次の通りです。

1)Controller にて明示

AppController.phpにて,BlowfishPasswordHasherを使うことを明示します。つまり,class を宣言する前に次の行を入れます。

App::uses('BlowfishPasswordHasher', 'Controller/Component/Auth');

そして,AuthComponent が BlowfishPasswordHasher を使うように設定します。

public $components = [
      'Auth' => [
        'authenticate' => [
          'Form' => [
            'passwordHasher' => 'Blowfish',
          ],
        ],
      ],
      'Session',
    ];

Auth の下には,loginAction や,loginRedirectなど色々設定すべきプロパティがありますが,今回は割愛。

とにかく,Form で passwordHasher に Blowfish を使うと明示。

また,前回の記事で,コントローラー内部のパスワードの保存時に,直にPasswordHasher を使って暗号化し,保存していた部分は全て削除
受けとったデータをそのまま,保存するようにします。

暗号化は次の2)Model 側の,beforeSave を用います。
(昨日は,使わない・・・って書いたのに)

2)Model で明示

昨日の記事では,BeforeSave なんぞ使わないとしましたが,使います。

パスワードを保管するModel,例えば User.php にて,classの宣言前に,次のように明示。

App::uses('BlowfishPasswordHasher', 'Controller/Component/Auth');

そして,class の中で,beforeSave 関数を設定。

public function beforeSave($options = []) {
  // パスワードの暗号化
  if (!empty($this->data[$this->alias]['password'])) {
      $passwordHasher = new BlowfishPasswordHasher();
      $this->data[$this->alias]['password'] = $passwordHasher->hash(
        $this->data[$this->alias]['password']
      );
  }
  return true;
}

これでどうでしょうか。

前回,CakePHP2.x系で大丈夫じゃわい!

と書きましたが,今回のように,公式チュートリアルどおりにやって動かないときに,ちょっと不安になってきますね。
マイナーバージョンは更新され続けているとはいえ,メジャーアップデートは4までいっちゃいましたからね・・・。切り捨てられているような雰囲気もじゅうぶんに感じます。

うーん,今後は,CakePHP4系に乗り換えた方がよいのかな。

もしくは,Laravel
フレームワークなので,学習コストが低ければ,CakeでもLaravelでも良いのですが。Ruby on Rails は,別にRails サーバー立てないとダメなので,レンタルサーバーだと厳しいですね。いちいち,Herokuとか使わないといけないのは,避けたい・・・。

教材開発は難航しています。
いや,あれこれ手を出しすぎて,難航してしまいました。

Nuxt Type Script で開発している中,どうもコードが煩雑になっている気がして,もっと綺麗に書けないものかな・・・と微妙な雰囲気に。
今にして思えば,ちゃんと仕様書を記録,書いていればそんなことにはならなかったのだろう。

そこで,Canvas + JavaScript で,アニメーション豊かな教材開発をしようとしたのですが,Canvas を使用した場合,要素の判定が非常に面倒くさい!

どれくらいかというと,例えば,画面に表示されている,テンポとか拍とかを変更するために,それらをクリックして変更しようとした際の場合。

(1)まず,テンポとか拍とかを描画した位置情報を変数に格納しておく。
(2)そして,Canvas に対してクリックがある度に,マウスの位置情報を取得して,(1)で格納した変数から,マッチするものがあるかループして探す。
(3)それに応じて,任意の関数を呼び出す。
・・・ここからさらに,変数を設定するコードを用意しなければならない。

めちゃくちゃ面倒。
いま,自分がつくりたい教材には全く向いていない。

Canvas の描画自体はとても素晴らしいです。
HTMLのタグ+JavaScript ではできないアニメーションを実現してくれます。

が,

これは,ちょっときつい。

ほかに救いがないか,今週は,「Adobe Animate(昔のFlash)」や「Unity」まで手を伸ばしてみました。

結果,それらを習得する時間が足りないので,それも頓挫。

Adobe Animate に関しては,まず日本語資料が少ない。
「Adobe Edge Animate 標準ガイドブック [CC/1.5対応] (DESIGN & WEB TECHNOLOGY) (日本語) 大型本 – 2013/7/20」

これぐらい。しかも,2013年の本で情報は古く,Edge Animate という,FlashAnimate の間にあったソフトウェアの解説本。Edge Animate は,無償でダウンロードできるということが売りでしたが,現在は無情にも「Edge Animate、Edge Inspect、Edge Reflow、および Edge Code。Adobe Edge のすべての製品が Creative Cloud から削除されました。」とのこと。さすが,Adobe。大企業。

Unity に関しては,資料は豊富にあるものの,リファレンスを読む限り,自分が作ろうと思っている教材を作るのはかなり手間そう(どう取りかかって良いか,想像できない)。
例えば,レスポンシブルデザインで出力する方法や,要素の内容を動的に変更したり,追加したり,Javascript と連携したり(これはできそうだったが),それらを習得している時間が足りない。

そして,最終的には,今年の頭に取り入れていた「Nuxt Ts」に戻ることにしようかと,今考えているところです。最悪

さらに,久しぶり Nuxt TS で作っていたプロジェクトをビルドしたところ,fibers モジュールでエラーが頻発。

ERROR ## There is an issue with node-fibers ##

サーバーが起動しません。

解決方法として,XCode のコマンドラインツールの再インストール(ちょうど,XCode の V.12 がリリースされ,コマンドラインツールもv. 12のGMが配付されていた)。
参考:https://developer.apple.com/download/more/

次に,fibersのアンインストールと,再インストール。
これでビルドできました。

参考:「fibers.nodeが見つからないため、流星バンドルが失敗する

仕様は大きく変わったので,やや1から作り直しに近い部分もありますが,使い回せる部分もあるでしょう。根気強くコーディングしていくのみです。

大会発表まで,あと1ヶ月(切りました)。

====================

ただ,Type Script に関する知識はかなり身についたし,最新のJavaScript の動向も追えている。ループ処理もかなり理解したし,Canvas に取り組んでいたことは無駄ではなかったでしょう。あと,エディターとして,Visual Studio 使うようになりました。大変便利。

Canvas で実装していたView の部分を,HTMLのタグで書き出すようにコーディングしなおせば済む(暴論)ことなので,問題はWEB Audio APIの部分ですね。ここをいかにクリアするか!