覚書をかねて、PHPの開発環境の構文チェックツール、vs codeの拡張機能についてまとめていきます。
オンラインの文法チェックツールも紹介していますが、マイクロソフトのvisual studio codeなどを導入しましょう。
Contents
ローカル環境の構築
PHPのローカル環境は、Vueなんかより、なんかややこしいので、めもしておきます。
- XAMPP
- MAMP
- Laragon(Windowsのみ、LaragonはXAMPPの上位互換っぽい)
- Local by Flywheel
#今日のタスク
— とらまる | Web制作 (@mr_trj0507) December 4, 2023
✅コーディング
✅ブログ執筆
ローカルでのWP環境を、MAMP→local by Flywheelに変えましたが、めちゃくちゃいい
・cssの自動更新可能
・UIがわかりやすい
・テンプレ作成して、すぐ構築ができる
・メール受信ができる
・リンク共有ができる#Web制作
WordPressに特化している、UIが直感的で設定が簡単という理由で、WordPressのローカル環境は、Local by Flywheelがおすすめされていますね。
swellやcocoonの開発者が使っているのです。
1. ローカル環境の構築
— 了🌊SWELL | Arkhe開発 (@ddryo_loos) January 20, 2020
僕はいつも「Local by Flywheel」使ってますが、なにで立ち上げてもいい。最初はレンタルサーバーでもいいけど、FTPとかでファイル送信するのクソ面倒なのでローカルでWordPress立ち上げといた方が学習効率は上がります
PHPをWordPressだけしか使わない場合は、Local by Flywheelでいいのではないでしょうか。
Local by FlywheelはWordPressの環境ですが、プログラムを書くときはエディタでしょう。Local by Flywheelの保存先から、VsCodeで開くことができます。
また、Local by Flywheelを使わず、Ftpソフトから右クリックでVsCodeで開くこともできます。
(functions.phpなどちょっとした編集はこれでOKかも)
VsCodeでPHPを使う場合、Macは元から入っています。
ターミナルを起動 > php -v
しかし、バージョンがよいとは限りません。
バージョンを変えたいとき便利なのがhomebrewです。
(Windowsはまた別のもの)
実際の作業は、Udemyのたにぐちまことさんの講座を見るとわかりやすいです。環境構築は無料でみれます。
WordPress開発マスター講座
PHP+MySQL（MariaDB） Webサーバーサイドプログラミング入門
PHP 7/8 プログラミング マスター講座
そのあと、構文チェックツールを導入する流れです。
【windows編】VSCodeのphpの構文チェック・文法チェック
PHP Intellisense
PHPのおすすめ拡張機能は以下のとおりです。
個人的にはPHPで今のところ開発をするつもりはなく、Wordpressのカスタマイズする際に直接やるとエラーが見れないため、VS Codeを利用しています。わかりやすいから。そのため、上記ぐらいしかいれていませんが、もっと便利な拡張がたくさんあります。
visual studio code(VS Code)のPHP導入
PHPの場合は最初文法エラーが表示されません。それじゃ困りますよね。
PHPを読みこむと、画面右下に以下のようなエラーがでているはず。
先に拡張機能をインストールすると、そちらでもでる場合があります。
このエラーをとる作業としてはローカル環境にPHPをインストールし、パスを指定します。
https://www.apachefriends.org/jp/index.html
XAMPP（ザンプ）とは、ウェブアプリケーションの実行に必要そうなものをフリーソフトウェアをパッケージ化したものです。まとめといたよと。Webサーバの「Apache」、データベースサーバーの「MariaDB」（旧バージョンはMySQL）、Webプログラミング言語はPHPやPerlなど。あとphpMyAdminなどの管理ツールです。
インストール場所は「C:\xampp」です。
XAMPPを使っている人が多そうですが、PHP単体でインストールする場合はこちらです。XAMPPは約700mbぐらいあるため結構容量が大きいです。
https://www.php.net/downloads.php
インストール後、VS Codeで以下の手順で設定します。
ファイル > 基本設定 > 設定 > PHPで検索 > setting.jsonで編集
setting.jsonで編集のテキストボタンは2つあるけどどっちも一緒みたいです。
xamppの場合、以下の指定になります。
"php.validate.executablePath": "C:\\xampp\\php\\php.exe", //パスを指定 "php.validate.run": "onType", //リアルタイム構文チェックをオン
この問題をとると、PHPの文法が間違えていると、エラーがでて教えてくれるようになります。
【mac編】VSCodeのphpの構文チェック・コードチェック
windowsタブレットが調子が悪くなってしまったため、macメインに開発環境を切り替えました。
macでも開発環境を作成したことがあります。
php cs fixer
php cs fixerを使いました。整形ツールです。
まず、Extensions(拡張機能)を入れます。php cs fixerで検索すると似たようなものがいくつかでてきますが、全部小文字のものが正解です。ダウンロード数が圧倒的に違うのでわかるでしょう。実際はvs codeから操作するはずですが一応紹介。
https://marketplace.visualstudio.com/items?itemName=junstyle.php-cs-fixer
しかし、これだけでは動作しません。githubにいきます。いくつかインストール方法があるようですが、PHP CS Fixerの本体をインストールします。
https://github.com/FriendsOfPHP/PHP-CS-Fixer
Download the php-cs-fixer.phar file and store it somewhere on your computer.
にある、php-cs-fixer.pharをダウンロードします。macのユーザ名直下に.vscode(隠しファイル)があるため、ダウンロードした物を移動して保存します。
.vscode/php-cs-fixer-v2.phar
そして、settings.jsonで設定します。
"php-cs-fixer.executablePath": "~/.vscode/php-cs-fixer-v2.phar", "php-cs-fixer.rules": "@PSR2", "php-cs-fixer.formatHtml": true, "php-cs-fixer.onsave": true
rulesは@PSR2を採用、formatHtmlはhtmlも整形、onsaveは保存時に動作させるものですね。
settings.jsonの開き方はvs codeの使い方の記事をみてください。
以上でおしまいですが、他にもcomposerでインストールする方法があるようです。
composer global require friendsofphp/php-cs-fixer
ただ、composerが入っていないと実行できないですね。command not foundがかえってきます。.bash_profileなどの設定も必要かもしれません。面倒なので今回は採用を見送りました。
composerの公式サイトは以下です。
単純にphpはブログ運営でちょっとしか使っていないため、あまりいろいろと入れたくなかっただけです。
【オンライン】簡単phpやcssの構文チェックツール
過去記事で今はオンラインでチェックすることはほとんどありません。
phpの構文チェックツール
phpの構文チェックツールはいくつかでていますが、こちらですかね。Wordpressに直接書くとエラーで動かなくなるかもしれませんからね。
ちょっと使うにはいいんじゃないでしょうか。
ちなみに、こんな感じのエラーがでていたとき
PHP Syntax Check: Parse error: syntax error, unexpected ';'
括弧の対応ではなく全角スペースが混じっていたなんていうオチもありますね。
cssの構文チェックツール
cssの構文チェックツールはいくつかでていますが、こちらがおすすめかも。CSSが効かないとき利用しましょう。
https://jigsaw.w3.org/css-validator/validator.html.ja#validate_by_input
style.cssなどを丸ごとコピペで直接入力がお手軽ですかね。使い方はコードを入れたのち、「検証する」のボタンを押すだけです。
必要ならオプションもありますので、お好みでどうぞ。
こんなのものありますね。▽ボタンでオプションを設定できます。
PHPを動画、質問掲示板全まとめ、チャットで学習する
プログラミングの動画学習ができるudemyのおすすめはこちらです。
プログラミングを動画やチャットで学習する方法はこちらです。
プログラミングの質問掲示板も便利ですよ。
たくさんありますね。
chrome developer toolsはiosやandroidのスマホサイトのデバッグもできる
Chromeデベロッパーツールはスマホサイトのデバッグもできます。レスポンティブWebサイトをブラウザで幅を縮めるのではなく、iosやandroidのスマホのコードをみたいと思ったことはないでしょうか。
右クリック > 検証 > 左上のスマホのアイコン
これだけでいろいろな端末が選べます。表示サイズ等を変更することもできます。
とはいえ、やはり実機で検証した方が安心という人もいるでしょう。持っているAndroidの実機で調べる場合は、
- 設定 > 開発者オプション ON
- 同じところにある、USBデバッグ ON
- USBケーブルの接続。接続したときにAndoroid側で「このPCのデバッグを許可しますか?」と聞かれる場合があるため許可します。
- PCのGoogle Chrome を開き、 chrome://inspect にアクセス(新規タブをひらいてアドレスを入れましょう) Deviceのタブをみます。
- すると、AndroidのChromeで開いている、ページが表示されます。ページを開いていない場合はテストしたいページを開きます。
- 各ページのinspectを開きます。スマホ側もChromeを開いている必要があります。
- スマホのChromeとPCのChromeが連動し、ソースコードの確認ができます。
エラー：Pending authentication: please accept debugging session on the device.
chrome://inspectにスマホサイトが表示されない場合、Pending authentication: please accept debugging session on the device.というエラーがでる場合があります。大抵の場合はAndoroid側にデバッグの許可を求めるメッセージがでていて許可していないだけです。
あと、Discover USB devicesのチェックボックスが入っているか確認しましょう。
コメント