デバッグモードでのデフォルトのコンパイルフラグに/JMCが追加されていて、これが有効になっているとstdのソースコードにステップ・インできない。よってこれを無効にする（以下の画像を参照）
デバッグオプションのJust My Codeはモジュールごとに区分けしていると思うので、どうでもいいはず。
コールバック関数（これは自分で定義したもの）のデバッグを効率良く行うには/JMCを有効にしたほうが良い。このフラグを有効にすると、コールバックを引数にするAPIを呼んだときに、そのコールバックにステップ・インしてくれる。
Vueのrouternのヒストリーモードとは通常のハッシュモードとは違い、#なしの普通のURLで１ページアプリを実現する方法。これをサイトのルートで運用するときはマニュアルに書いてある通りなのでハマることはないのだが、サブディレクトリでやろうとすると大変だったので覚書。
ここではサブディレクトリを/homepageとする。
vue.config.jsを以下のように書く。
|
1 2 3 4 5 |
module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/homepage/' : '/' } |
src/router.jsを以下のように書く。
|
1 2 3 4 5 6 7 8 |
... export default new Router({ mode: 'history', base: process.env.NODE_ENV === 'development' ? '/' : '/homepage/', routes: [ ... ] .. |
public/.htaccessを以下のように書く
|
1 2 3 4 5 6 7 8 |
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase /homepage RewriteRule ^homepage/index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /homepage/index.html [L] </IfModule> |
CORSはクロスサイト間のリソース管理。Javascriptから他のサイトのリソース取得を管理するためのプロトコル。
通常こういったクロスオリジンのアクセスは許されないが（ブラウザが許さない）サーバがあるhttpヘッダを返すことで許すことができる。
このヘッダを付けることで、クライアントはその値と自分のJSのサイトが一致していたら通信を許可する。.htaccessに以下のように記述すると、すべてのクロスオリジンアクセスを許す。
|
1 2 3 |
<IfModule mod_headers.c> Header add Access-Control-Allow-Origin "*" </IfModule> |
通常は完全にアクセスを許すことはしたくないはずなので自分のサイトだけを登録するが、サイトが複数ある場合はデバッグ中のlocalhostを加えたい場合は面倒なことになる。
更にサイトがディレクトリを掘っていて、ディレクトリごとに.htaccessがある場合とかだっともっと複雑になる。
とりあえず動いているものとして、以下の.htaccess。
|
1 2 3 4 5 6 |
<IfModule mod_headers.c> SetEnvIf Origin "^https?://(localhost:8080|tango\.dip\.jp)" AccessControlAllowOrigin=$0 Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE" Header set Access-Control-Allow-Headers "Content-Type, Authorization" </IfModule> |
これはlocalhostとtango.dip.jpを許可する。返されるヘッダにはアクセス元のサイトのみが返るのだと思われる。
仕様によると以下の記述でもいいらしい。（試していない）
|
1 2 3 4 5 |
<IfModule mod_headers.c> Header set Access-Control-Allow-Origin "http://localhost:8080;http://tango.dip.jp" Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE" Header set Access-Control-Allow-Headers "Content-Type, Authorization" </IfModule> |
上記の.htaccessにはメソッドの記述もあるが、これは許すメソッドを定義しているものと思われる。そのためにブラウザはOPTIONメソッドでリクエストしてこの情報を得るものと思われる。このときのURLはサイトのURLと同じと思われるので、PHPなどが動くときは２００が返るようにしておかないと、Chromeなどはエラーを出す。OPTIONのときはPHPの$_POSTがないと思われるので、このとき５００とかを返すとCORSがうまくいかない。
ChromeなどのエラーResponse to preflight request doesn’t pass access control checkはこのOPTIONを指しているものと思われる。
このように非常に面倒で、ヘッダとかを調べるのも面倒なので適当に書いた。ヘッダを確認するにはChromeのDEVTOOLSを使うといい。３０４になってしまう場合は、シフトキーを押しながらリロードするか、リロードボタンで右クリックして、ハードリロードなどを選ぶ。タイプコラムがxhrになっているのがスクリプトからのアクセス。
設定を開いてHotExitをoffにする。
あるいはjsonの設定を開いて以下を追加
|
1 |
"files.hotExit": "off" |
axiosでpostしたオブジェクトはjson形式でサーバに送られる。content-typeはapplication/jsonで送られる。PHPはこれを$_POSTに入れない。通常のhtmlのformで送られるデータとはcontent-typeも中身も違う。このjsonで送られたデータをどうやってPHPで取得すればいいか。
１つの解決法はaxiosでPOSTするときにフォーム形式で送る方法。これはオブジェクトの代わりにformDataを設定する方法とcontent-typeを設定する方法があるようだがここでは考えずサーバで対応する方法を考える。
ここではapache2+PHPのサーバを考える。その前にクライアントからポストしたデータ（HTTPのボディ）はどのように扱われるのだろうかをはっきりさせたい。
PHPのマニュアルによるとcontent-typeがapplication/x-www-form-urlencodedかmultipart/form-dataの場合は$_POSTにデータが入るらしい。マルチパートというのはもともとは１つのファイルに複数のファイルを埋め込む方式でメールなどで添付ファイルを送るときに使われたものだと思う。境界となる長い文字列を設定し、それでファイルを分割する。大きいファイルを送るとき、あるいは単にファイルをおくるときはブラウザはこの形式を使うのかもしれない。あるいはバイナリを送りたいときエンコードを指定して送るから必要になるのかもしれない。
いずれにしろ$_POSTにデータが入るのはこの２つの場合だけなのでapplication/jsonの場合は$_POSTには入らない。ではどこへ行くのか？あるいは単に捨てられてしまうのだろうか。
結論を言うとここにあるように、php://inputに行くらしい。これはPHPにおいて標準入力を表すときにphp://stdinなどと書くが、php://inputはPHPによってHTTPボディからの入力にリダイレクトされていてPHPスクリプトからはここから読み込めばHTTPボディが取得できることになる。
今回のデータはjson形式なのであとはこれを$_POSTに変換してあげればその他のコードは変更せずに動くはず。
|
1 2 3 4 5 6 7 8 9 10 11 |
/* * https://www.quora.com/How-do-I-post-form-data-to-a-PHP-script-using-Axios * Axios posts data in JSON format (Content-Type: application/json) Standard $_POST * array is not populated when this content type is used. So it will always be empty. * In order to get post parameters sent via a json request, you need to use */ if ($_SERVER ['REQUEST_METHOD'] === 'POST' && empty ( $_POST )) { // set true to return array $_POST = json_decode ( file_get_contents ( 'php://input' ), true ); } |
元のサイトのコードが少しおかしかったので修正した。
以下のようにpostmanで送るとPHPで取得できた。
多くの似たようなSQLを発行したい場合、例えばプログラムのfor文で回せば処理できるような場合どうすればいいか。一般にSQLはfor文はないから、pythonなどでスクリプトを書くのもいいかもしれない。がスクリプトでDBを開いてとか書くのが面倒。そこでpythonでSQLだけを出力して、それを実行してしまえばいい。
こういうときのちょっとしたpythonスクリプトを書くにはjupyterが便利。
まずは１個のSQLをpythonのprintで出力してみる
|
1 |
print('RENAME TABLE `eitango`.`old_2019_tango_111_111` TO `eitango`.`old__2019_tango_111_111`;') |
次にfor文で回す。SQLはformatで置換する。
|
1 2 3 |
for i in range(1, 13): for j in range(1,21): print('RENAME TABLE `eitango`.`old_2019_tango_{0:03}_{1:03}` TO `eitango`.`old__2019_tango_{0:03}_{1:03}`;'.format(i,j)) |
文字列中の{0:03}はformat引数の０番目の値を３桁で０で埋めることを指定している。これを実行すると以下のようなSQLが得られる。
|
1 2 3 4 5 6 7 8 9 |
RENAME TABLE `eitango`.`old_2019_tango_001_001` TO `eitango`.`old__2019_tango_001_001`; RENAME TABLE `eitango`.`old_2019_tango_001_002` TO `eitango`.`old__2019_tango_001_002`; RENAME TABLE `eitango`.`old_2019_tango_001_003` TO `eitango`.`old__2019_tango_001_003`; RENAME TABLE `eitango`.`old_2019_tango_001_004` TO `eitango`.`old__2019_tango_001_004`; RENAME TABLE `eitango`.`old_2019_tango_001_005` TO `eitango`.`old__2019_tango_001_005`; RENAME TABLE `eitango`.`old_2019_tango_001_006` TO `eitango`.`old__2019_tango_001_006`; RENAME TABLE `eitango`.`old_2019_tango_001_007` TO `eitango`.`old__2019_tango_001_007`; RENAME TABLE `eitango`.`old_2019_tango_001_008` TO `eitango`.`old__2019_tango_001_008`; RENAME TABLE `eitango`.`old_2019_tango_001_009` TO `eitango`.`old__2019_tango_001_009`; |
あとはこれはphpMyAdminにコピペしたり、mysqlに直接流し込んでもいいかもしれない。DBの変更は間違うと大変なのでよくチェックしてから行おう。
ubuntu16.04のaptでインストールするnodeは古くてvue cliを使えなかったので最新にしたい。
しかしすでに３２ビットはnode 8までしかないようだ。
ここを参考にインストール
これは８をインストールする場合。６４ビットUbuntuの場合は最新をインストールできる。
|
1 2 |
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs |
インストール後
$ node –version
v8.16.0
$ npm –version
6.4.1
$ vue –version
3.9.1
$
nodeのnpmに近いphpのパッケージと依存マネージャ。
composerはパッケージマネージャではなく依存マネージャ。パッケージやライブラリの管理は行うがあくまでプロジェクト単位で行う。パッケージやライブラリはvendorディレクトリ配下にインストールされ、デフォルトではグローバルにインストールされない。npmやbundlerに近い。
プロジェクトが多数のライブラリに依存し、そのライブラリも他のライブラリに依存している場合に依存関係を解決してインストールしてくれる。
動作にはPHP5.3.2以上が必要。いくつかのphpフラグやコンパイルフラグも必要。インストーラを使えば警告で知らせてくれる。
詳しくは省略。
https://getcomposer.org/installerをダウンロードしてphpで実行するか（Windows以外）。https://getcomposer.org/Composer-Setup.exeを実行してインストール。
composerはcomposer.pharという１つのファイルになっているので、これをプロジェクトに含めてもいいかもしれない。
以下のバッチファイルをつくって、プロジェクトのルートに置くと便利。
|
1 2 |
@echo off php composer.phar %* |
composerの設定はcomposer.jsonに記述する。プロジェクトの依存関係が記述される。プロジェクトのルートディレクトリに置く。
|
1 2 3 4 5 |
{ "require": { "monolog/monolog": "1.0.*" } } |
デフォルトではPackagistというレポジトリからrequireで記述されたパッケージをインストールする（installコマンド）。パッケージ名はベンダー名／プロジェクト名になる。上記のバージョン指定は、1.0以上で1.1以下のパッケージを指定している。
php composer.phar install
このコマンドを最初に実行したとき（まだcomposer.lockがない）は、必要なすべてのパッケージをvendor配下にインストールしてcomposer.lockにインストールしたバージョンを記述する。インストール時にcomposer.lockがあればこのファイルに記載されたバージョンをインストールする。このファイルを共有しておけば、開発者間でパッケージのバージョンを一致させられる。
php composer.phar update
PHPそのものはcomposerでインストールするものではないが、依存関係は記述したい場合PHPをプラットフォームパッケージまたは仮想パッケージと呼ぶ。show –platformコマンドで一覧を表示できる。
ライブラリがautoloadの指定を行っていれば、composerはvendor/autoload.phpを作成する。ユーザはこのファイルをインクルードしてライブラリを使うことができる。
|
1 2 3 4 5 |
require __DIR__ . '/vendor/autoload.php'; $log = new Monolog\Logger('name'); $log->pushHandler(new Monolog\Handler\StreamHandler('app.log', Monolog\Logger::WARNING)); $log->addWarning('Foo'); |
自分自身のコードをautoloadに指定することもできる。
|
1 2 3 4 5 |
{ "autoload": { "psr-4": {"Acme\\": "src/"} } } |
ここではネームスペースとディレクトリのマップをしている。srcディレクトリはプロジェクトのルートでvendorと同じ階層。これでたとえばsrc/Foo.phpはAcme\Fooクラスを含んでいることになる。
autoloadフィールドを追加した場合はvendor/autoload.phpを再構築するためにdump-autoloadコマンドを実行する必要がある。
上記のautoloadの設定を行うとプロジェクトはほぼパッケージになる。違いは名前があるかどうかでこれはcomposer.jsonのnameプロパティを設定すればいい。
|
1 2 3 4 5 6 |
{ "name": "acme/hello-world", "require": { "monolog/monolog": "1.0.*" } } |
バージョンはVCSから推論するのでcomposer.jsonには記述しない。がVCSを使っていない場合はcomposer.jsonに記述できる。
ヘルプ。引数にサブコマンドを指定すると、そのコマンドのヘルプ。
php composer init
composer.jsonを作成
ヘルプを表示
パッケージをインストール
パッケージをアップデート
レポジトリからパッケージを探す。composer.jsonでリポジトリを指定していない限りpackagist（デフォルトのレポジトリ）から探す。
php composer.phar search monolog
インストールされているパッケージを表示。*を指定してフィルタできる。パッケージを指定すると詳細を表示。
パッケージのウェブサイトをブラウザで表示
php composer.phar browse p3k/picofeed
指定されたパッケージに依存しているパッケージを表示
composerの設定情報の設定と表示。設定にはグローバルとローカルがある。ローカルはcomposer.jsonに保存される。レポジトリの設定などがある。
php composer.phar config –list
エラー診断。エラーが出たときやってみるといい。
Vueはコンポーネントでページを構成するフレームワークなのでグローバルな関数や変数というのは基本的には使わないと思われる。データのやり取りはpropsやeventで行うが、グローバル関数が欲しい場合もある。
Vueにはmixinという仕組みもあるみたいだが、これはVueコンポーネントにフックするために使うようで、プラグインなどにも影響するようなので、もっと普通のグローバルな関数を定義したい。
public/index.htmlにjavascriptを置いてもいいがここではvueらしくimportを使って行う。
まずはsrc/global.jsを新規に作成して、ここにグローバルな関数や変数を書く。
|
1 2 3 4 5 6 7 |
const DEBUGGING = true export var dtrace; if (DEBUGGING) { dtrace = console.log; } else { dtrace = function() {}; } |
ここではdtraceをexportしている。
つぎにコンポーネントでこれをインポートして使う。
|
1 2 3 4 |
... <script> import {dtrace} from '@/globalFunction' </script> |
nodeでjavascriptを実行する場合、通常はnodeにファイルを渡してスクリプトを実行するが短いスクリプトの場合はコマンドラインにスクリプトを書くことができる。ちょっとしたスクリプトを書きたい場合はこうすることですべての情報がコマンドラインにしか存在しないのでよりポータブルになる。しかしコマンドラインの制約から文字列を囲むクォートやダブルクォートが書きにくいので、その点は注意する必要がある。Windowsではシングルクォートは通常の文字のように扱われるので、スクリプト全体をダブルクォートで囲い、スクリプト内部での文字列はシングルクォートで囲むようにする。
次にスクリプトに引数を渡したいときはnodeに渡す引数と区別するために、通常は最後に–（２つのハイフン）をつけて、それ以降の引数はスクリプトに渡されるものであることを指示する。
上記のことを組み合わせて、スクリプト内で引数を受け取り、コマンドラインでスクリプトとそれに渡す引数を渡すことができる。これを応用してnpm runに記述しておけば、ちょっとしたコマンドをpackage.jsonに登録することができる。jsonでダブルクォートを扱うときはバックスラッシュでエスケープすればいいので矛盾は生じない。
-eでスクリプトをそのまま指定。
–のあとのコマンドライン引数はスクリプトに渡される。
|
1 2 3 |
>node -e "console.log('aaa',process.argv[1])" -- bbb aaa bbb > |
スクリプト内では引数はprocess.argvで受け取る。
npm runはそのまま実行するだけのようなので以下のように書く。ダブルクォートはバックスラッシュでエスケープする。
|
1 2 3 4 |
"scripts": { ... "myscript": "node -e \"console.log('aaa',process.argv[1])\" --" }, |
|
1 2 3 4 5 6 7 8 |
>npm run myscript ccc > myapp@0.1.0 myscript > node -e "console.log('aaa',process.argv[1])" -- "ccc" aaa ccc > |