PHPやCSSの構文チェックツール/Chromeデベロッパーツールのスマホサイトのデバッグ

プログラミング

cssやphpなどの構文チェックツール、Chromeデベロッパーツールのスマホサイトのデバッグについて簡潔にまとめていきます。

vs codeに移行したため、vs codeの部分を追記しました。

cssの構文チェックツール

cssの構文チェックツールはいくつかでていますが、こちらがおすすめかも。CSSが効かないとき利用しましょう。

W3C CSS 検証サービス

style.cssなどを丸ごとコピペで直接入力がお手軽ですかね。使い方はコードを入れたのち、「検証する」のボタンを押すだけです。

必要ならオプションもありますので、お好みでどうぞ。

こんなのものありますね。▽ボタンでオプションを設定できます。

CSS Lint
スポンサーリンク

電子書籍のおすすめ比較

cssのプロパティの順番を並べ換えるツール

プロパティも綺麗に並べ替えたい人もいるかもしれませんね。詳しくはこちらの記事をみてください。vs codeだけではなくオンライン版も紹介しています。

【stylelint-plusがおすすめ?】VS Codeでcssのプロパティをソートする拡張比較!
vs codeで「cssのプロパティをソートする拡張」や「プログラミングを整形する拡張」はいろいろありますので、覚書がてら、いろいろとまとめて紹介します。 後半はその中でも使い勝手がよさそうなstylelint-plusの使い方を紹介...

順番に関する基本的な解説はこちらがわかりやすく

【CSS】CSSプロパティの記述順について考えてみた | unitopi - ユニトピ -
こんにちは! 新米ライターのケインでございます。 前回の記事で予告した通り、今回は「CSSのプロパティ記述順」についてお話致します。 CSSプロパティ記述順の公式ルールは存在する? CSSプロパティの記述順については、厳密に定義されたルールは存在しません。 ですが、推奨記述順に関するガイドラインというのは、FireFo...

実際にプロパティの順番をリスト化したものは、qiitaあたりがわかりやすいかも。FireFoxのMozilaさんがリンク切れしていたので。

CSSプロパティ記述順序 - Qiita
abc順やcss combなどプロパティの記述順序は様々だとおもいますが、自分はこれでやってます。 ~~ ```content.css /*...

「視覚整形モデル」はdisplayなどの表示とpositonなどの配置を分けていたところもありましたね。どこのサイトも大差はありません。

スポンサーリンク

phpの構文チェックツール

phpの構文チェックツールはいくつかでていますが、こちらですかね。Wordpressに直接書くとエラーで動かなくなるかもしれませんからね。

PHP Code Checker - Syntax Check for Common PHP Mistakes
An advanced, custom PHP code checker that searches your code for common, hard to find typos and mistakes; includes a syntax check.

ちょっと使うにはいいんじゃないでしょうか。

エラー:PHP Syntax Check: Parse error: syntax error, unexpected ‘;’

ちなみに、こんな感じのエラーがでていたとき

PHP Syntax Check: Parse error: syntax error, unexpected ‘;’

括弧の対応ではなく全角スペースが混じっていたなんていうオチもありますね。

wordpressに直入力ではなく、codepenも活用する

少し難しいものを作成する場合、codepenを利用しています。ブラウザに依存しないため助かります。使い方はNewPenをクリックしてhtmlとcssを入れれば0Kです。

Attention Required! | Cloudflare

こちらで動作確認が取れていればコードの問題ではなく、Wordpressのプラグインやテーマやブラウザの問題であることがわかります。

無料で登録なしでも使えます。大変便利なサービスですね。

codepenとjsfiddleの比較

codepenと似たサービスにjsfiddleがあります。

Create a new fiddle - JSFiddle
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

違いとして次のような点があげられます。

  • jsfiddleの方が速度が速いと言われる
  • jsfiddleはvue.jsで使われているのもよくみる
  • codepenはブログに埋め込むとパフォーマンスがよくない
  • codepenはスマホ対応がしっかりとしている
  • codepenはエディタ下にある「Console」というボタンをクリックすると、console.logの状況がみれます(jsfiddleも拡張するスクリプトがあるみたいだけど、今はリンク切れ。。https://getfirebug.com/firebug-lite-debug.js)

Googleトレンドは以下のとおりです。

個人的には両方とも使った結果、codepen派です。ただし、ブログには埋め込んでいません。

スポンサーリンク

php、javascript、vue.jsで本格的に開発するならvisual studio code(VSCode)

codepenやjsfiddleは簡易開発です。本格的に開発するなら、マイクロソフトのvisual studio codeなどを導入しましょう。

というか今後もプログラミングをいじる可能性があるなら早めの導入をおすすめします。作業効率がいいからです。
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and availa...

visual studio codeの特徴は以下のとおりです。

  • Visual Studioコードはマイクロソフトが開発。
  • Windows専用ではなく、Linux、Mac OS、Windowsで使えるクロスプラットフォームエディタで、必要に応じてプラグインを拡張できます。
  • 無料です。
  • Visual StudioのようなIDEではなく、あくまでエディタなので動作が高速、軽量です。
  • コードの補完も強力です。
  • エディタとは言え、拡張機能でコンパイルもデバッグもできます。
  • Visual Studio(IDE/統合開発環境)とは共存可能。

macとwinの違いはないようです。

2015年にリリースされてものすごい勢いで使う人が増えています。phpだとbracketsからvisual studio codeに乗り換え組も。

stackoverflowのMost Popular Development Environmentsをみましょう。シェアがわかります。

Stack Overflow Developer Survey 2018
Get insights on the world’s developers from the largest and most comprehensive survey ever. Demographics. Technologies. Salaries. Career satisfaction.

個人的にも開発環境は言語を問わず、すべてvisual studio codeに統合していく流れになっています。マイクロソフトは最近いい感じかもですね。

プログラミングを書くなら最良のエディタかもしれません。

vue.jsの場合、nodo.jsをインストールして環境変数を指定する流れになります。

windows10でpathを上書きせず複数設定する方法

通常の指定方法は以下のとおりですね。

Windowsのここに入力して検索で「コントロールパネル」と入力 > システムとセキュリティ > システム > システム詳細設定 > 環境変数 > 新規

しかし、個人的にはffmpegなどの動画コーディックでもpathを使っているため、上書きしてしまいました。。

複数指定する場合はセミコロンで区切りますが、Windows10からはuiが改善されて編集モードで複数指定できるようになりました。

Windowsのここに入力して検索で「コントロールパネル」と入力 > システムとセキュリティ > システム > システム詳細設定 > 環境変数 > 編集

あとはこのようにインストール先を指定すればいいだけです。

C:\Program Files\nodejs

ちなみに、環境変数は大文字と小文字が混在している場合もありますが、PATH と Path は同一のものであり区別はしていません。気分的には揃えておきたいですけど…。

Macにローカル環境に移行したらhttp://localhost:8080/に繋がらない解決方法

Macにローカル環境に移行したらhttp://localhost:8080/に繋がりませんでした。

原因はesetでした。。

接続しようとすると、chromeでは以下のエラーがでます。

このページは動作していません
localhost からデータが送信されませんでした。
ERR_EMPTY_RESPONSE

解決方法は以下のとおりです。

ESET Cyber Security を開く > 設定 > Webアクセスの保護の[設定] > HTTPプロトコルで使用するポート 有効にする

無効にする、もしくは有効するの中にある8080を削除すると解決します。

vs codeでトラブりましたが、xcode等でも不具合が報告されていました。

eset結構振り回されるな…。

visual studio code(VS Code)のデフォルトのブラウザをsafariからchromeに

vs codeからジャンプするとsafariに飛びます。VS Codeではなくこの問題はmac側の設定を変えます。

りんごの[アイコン] > システム環境設定 > 一般 > デフォルトWebブラウザ

visual studio code(VS Code)のターミナルのシェルを変更(terminal.integrated.shell)

1行settings.jsonに追記して保存、ターミナルの再起動によりターミナルの表示を変更できます。

{
    "terminal.integrated.shell.osx": "/bin/csh",
}

もしくはターミナルの画面右上のセレクトボックスから選択すると、settings.jsonが書き換わります。

以下のような設定があり、どれかをチョイスする感じです。

"terminal.integrated.shell.osx": "/bin/bash",
"terminal.integrated.shell.osx": "/bin/sh",
"terminal.integrated.shell.osx": "/bin/zsh",

上記のパスは現在値だけ表示されます。

"terminal.integrated.shell.osx": "/bin/csh",
"terminal.integrated.shell.osx": "/bin/tcsh",

上記はフルパスが表示されます。

"terminal.integrated.shell.osx": "/bin/ksh",

上記は現在値が表示されません。

windowsの場合はコマンドプロンプトを指定できます。

"terminal.integrated.shell.windows": "C:\\Windows\\system32\\cmd.exe",

visual studio code(VS Code)の拡張のインストール

画面左のExtensions(マイクロソフトのロゴみたいなアイコン) > キーワードをいれて検索 > install

visual studio code(VS Code)の共通の拡張機能

phpやjavascript言語関係なく共通で使えます。

  • indent-rainbow インデントをカラーでわかりやすくする
  • Bracket Pair Colorizer2 括弧の対応をカラーでわかりやすくする

Bracket Pair ColorizerとBracket Pair Colorizer2の違いは公式サイトによると以下のとおり。

Differences between v1 and v2?
v2 Uses the same bracket parsing engine as VSCode, greatly increasing speed and accuracy. A new version was released because settings were cleaned up, breaking backwards compatibility.

ベースが同じで速度があがっています。β版だが、今のところ困ったことがないためBracket Pair Colorizer2を使っています。

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

vue.jsのおすすめ拡張機能

Vue.js Extension Packがありますが、いろいろとインストールされすぎます。

個人的にはveturをとりあえず、入れておけばいいかなっと。シンタックスハイライトが表示されるようになります。

PHPのおすすめ拡張機能

PHPのおすすめ拡張機能は以下のとおりです。

PHP Intellisense:コードの補完や整形を行うもの

個人的にはPHPで今のところ開発をするつもりはなく、Wordpressのカスタマイズする際に直接やるとエラーが見れないため、VS Codeを利用しています。わかりやすいから。そのため、上記ぐらいしかいれていませんが、もっと便利な拡張がたくさんあります。

visual studio code(VS Code)のPHP導入(構文チェック)

PHPの場合は最初文法エラーが表示されません。それじゃ困りますよね。

PHPを読みこむと、画面右下に以下のようなエラーがでているはず。

C:\php\php.exe が有効な PHP 実行可能ファイルではないため、検証できません。設定 ‘php.validate.executablePath’ を使用して PHP 実行可能ファイルを構成してください。
PHP executable not found. Install PHP 7 and add it to your PATH or set the php.executablePath setting

先に拡張機能をインストールすると、そちらでもでる場合があります。

このエラーをとる作業としてはローカル環境にPHPをインストールし、パスを指定します。

XAMPP Installers and Downloads for Apache Friends
XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl.

XAMPP(ザンプ)とは、ウェブアプリケーションの実行に必要そうなものをフリーソフトウェアをパッケージ化したものです。まとめといたよと。Webサーバの「Apache」、データベースサーバーの「MariaDB」(旧バージョンはMySQL)、Webプログラミング言語はPHPやPerlなど。あとphpMyAdminなどの管理ツールです。

インストール場所は「C:\xampp」です。

XAMPPを使っている人が多そうですが、PHP単体でインストールする場合はこちらです。XAMPPは約700mbぐらいあるため結構容量が大きいです。

PHP: Downloads

インストール後、VS Codeで以下の手順で設定します。

ファイル > 基本設定 > 設定 > PHPで検索 > setting.jsonで編集

setting.jsonで編集のテキストボタンは2つあるけどどっちも一緒みたいです。

xamppの場合、以下の指定になります。

"php.validate.executablePath": "C:\\xampp\\php\\php.exe", //パスを指定
"php.validate.run": "onType", //リアルタイム構文チェックをオン

この問題をとると、PHPの文法が間違えていると、エラーがでて教えてくれるようになります。

chrome developer toolsはiosやandroidのスマホサイトのデバッグもできる

Chromeデベロッパーツールはスマホサイトのデバッグもできます。レスポンティブWebサイトをブラウザで幅を縮めるのではなく、iosやandroidのスマホのコードをみたいと思ったことはないでしょうか。

右クリック > 検証 > 左上のスマホのアイコン

これだけでいろいろな端末が選べます。表示サイズ等を変更することもできます。

とはいえ、やはり実機で検証した方が安心という人もいるでしょう。持っているAndroidの実機で調べる場合は、

  1. 設定 > 開発者オプション ON
  2. 同じところにある、USBデバッグ ON
  3. USBケーブルの接続。接続したときにAndoroid側で「このPCのデバッグを許可しますか?」と聞かれる場合があるため許可します。
  4. PCのGoogle Chrome を開き、 chrome://inspect にアクセス(新規タブをひらいてアドレスを入れましょう) Deviceのタブをみます。
  5. すると、AndroidのChromeで開いている、ページが表示されます。ページを開いていない場合はテストしたいページを開きます。
  6. 各ページのinspectを開きます。スマホ側もChromeを開いている必要があります。
  7. スマホの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のチェックボックスが入っているか確認しましょう。

プログラミングを動画、質問掲示板全まとめ、チャットで学習する

プログラミングを動画やチャットで学習する方法はこちらです。動画は書籍より安い場合が多いですよ。

【比較】安いオンラインプログラミングスクール/おすすめの無料プログラム教室は?
エンジニア・プログラマーになりたい人のために、オンライン版のプログラミングスクール比較していきます。初心者大人向けにおすすめで安いプログラム教室も紹介しますよ。 個人的にはブログを運営しているためwordpressのphpやcssもカ...

プログラミングの質問掲示板も便利ですよ。

【有料9選】プログラミング質問掲示板/質問し放題【無料15選】
有料無料とわず、プログラミング有料質問掲示板/質問し放題のメンターマッチングサービスを調べました。国内海外とわず、覚書としてまとめておきます。 【有料】プログラミング質問掲示板/質問し放題スキルシェアサービス MENTA(プログ...

たくさんありますね。

人気記事  【比較表あり】安いオンラインプログラミングスクールはおすすめ?【無料あり】
  1. プログラミングスクールは格安に!cssやphpも楽勝に!
  2. 電子書籍並みの価格で買える格安のプログラム動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
プログラミング
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました