● 1. VS Code の拡張機能で接続サーバーに「PHP Debug」をインストールする

バージョンは3系がおすすめです

● 2. VSコードでリモートサーバに接続しブレークポイントをセットしたいファイルを開いた状態でF5を押す

● 3. launch.jsがない場合は作成を促されるので以下内容で保存する

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "pathMappings": {
                "${workspaceRoot}": "${workspaceRoot}"
            }
        },
    ]
}

No.2079

10/15 13:47

edit

VS Code のカラーをカスタマイズする

● VS Code のカラーをカスタマイズする

settings.json を開いたら以下のように入力します。

    "workbench.colorCustomizations": {
        "list.activeSelectionBackground": "#ff0000",        
    },

添付ファイル1

vs-code-color.png ( 334.7 KBytes )　ダウンロード

No.2028

08/06 09:57

edit

添付ファイル

VS Code MarkDown Preview Enhanced サンプル

● サンプル1

\```flow
  st=>start: Start
  op=>operation: Your Operation
  cond=>condition: Yes or No?
  e=>end
  st->op->cond
  cond(yes)->e
  cond(no)->op
\```

● サンプル2

\```flow
   st=>start: Start|past:>http://www.google.com[blank]
   e=>end: End:>http://www.google.com
   op1=>operation: get_hotel_ids|past
   op2=>operation: get_proxy|current
   sub1=>subroutine: get_proxy|current
   op3=>operation: save_comment|current
   op4=>operation: set_sentiment|current
   op5=>operation: set_record|current
       cond1=>condition: ids_remain empty?
       cond2=>condition: proxy_list empty?
       cond3=>condition: ids_got empty?
       cond4=>condition: successful crawling??
       cond5=>condition: ids_remain empty?
   io1=>inputoutput: ids-remain
   io2=>inputoutput: proxy_list
   io3=>inputoutput: ids-got
   st->op1(right)->io1->cond1
   cond1(yes)->sub1->io2->cond2
   cond2(no)->op3
   cond2(yes)->sub1
   cond1(no)->op3->cond4
   cond4(yes)->io3->cond3
   cond4(no)->io1
   cond3(no)->op4
   cond3(yes, right)->cond5
   cond5(yes)->op5
   cond5(no)->cond3
   op5->e
\```

● サンプル3

\```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
\```

● サンプル4

\```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
\```

No.1998

05/28 16:45

edit

VS Code で Vim ショートカットを使用する

● VS Code - Vim

https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

● 行末にいる時　→　で次の行へ移動できるようにする

設定で vim.whichwrap を検索して次の値をセットします。

h,l,<,>,[,].

● 検索

[esc] の次に /
検索キーワードを入力して　「Enter」で検索　↓

続けて次の検索結果へ移動

「n」で次の検索結果へ
「shift + n」で前の検索結果へ

● カーソルの単語で検索

[esc] の次に * で今カーソルが当たっているところの単語を検索 ↓
[esc] の次に # で今カーソルが当たっているところの単語を検索 ↑

No.1877

10/09 14:02

edit

安全な Cookie

● 安全な Cookie

https://qiita.com/Kohei-Sato-1221/items/80ff7a0bba6ac9128f56
https://laboradian.com/same-site-cookies/

・HttpOnly
・Secure
・SameSite

No.1820

07/21 15:15

edit

VS Code で正規表現のテストケースを作成してテストする

● VS Code で正規表現のテストケースを作成してテストする

● Regex Previewer のインストール

https://marketplace.visualstudio.com/items?itemName=chrmarti.regex

● テストする正規表現とテストケースを作成する

00 〜 24 にマッチする正規表現をテストします。

regex.php にテストしたい正規表現を記述します。（この時に先頭にスペース一番最後に改行コードを入れておきます。また　/g で全てにマッチするようにしておきます。）

<?php

if ( preg_match("/\s((0?[0-9])|(1[0-9])|(2[0-4]))\n/g", $file) ){
	echo 'マッチします。';
}

Command + Shift + P からGoogle Books プレビュー「Toggle Regex Preview In Side-By-Side Editors」を選択します。

右側に開いたウィンドウに次のようなテキストを貼り付けます。

testcase.txt

● テストを実行する

「Test Regex...」をクリックするとテスト結果が右のウィンドウに表示されます。

正規表現にマッチした文字列だけ背景色が変わって表示されます。

セットはこちら https://pgmemo.tokyo/data/filedir/1803_2.zip

添付ファイル1

Regex Previewer - Visual Studio Code.png ( 42.1 KBytes )　ダウンロード

添付ファイル2

vs_code_regex_test_set.zip ( 1.4 KBytes )　ダウンロード

No.1803

07/30 13:26

edit

添付ファイル

便利な emmet ショートカット（ Mac ）

● 複数行を1行に変換する（Merge lines ）

Command + Shift + M

emmet コマンド実行例

<div>
    <p>
        TEST TEXT
        TEST TEXT
        TEST TEXT
    </p>
</div>

　　↓

<div><p>TEST TEXTTEST TEXTTEST TEXT</p></div>

● 略語を展開する

Tab

emmet コマンド実行例

.myclass

　　↓

<div class="myclass"></div>

● 選択したテキストをタグで囲む

Command + Shift + A

emmet コマンド実行例

    TEST TEXT
    TEST TEXT
    TEST TEXT

（選択した状態で Command + Shift + A ）　　↓

<p>
    TEST TEXT
    TEST TEXT
    TEST TEXT
</p>

● 現在いるタグの内側または外側を選択する

外側 : Control + D
内側 : Alt + D

・VisualStudio Code

・Sublime Text

    // emmet balanceIn , balanceOut
    { "keys": ["ctrl+d"],"command": "emmet_balance","args": { "direction": "outward" } },
    { "keys": ["ctrl+shift+d"],"command": "emmet_balance","args": { "direction": "inward" } },

添付ファイル1

emmet_shortcut_key_02.png ( 25.3 KBytes )　ダウンロード

添付ファイル2

emmet_shortcut_key_01.png ( 17.2 KBytes )　ダウンロード

添付ファイル3

emmet_shortcut_key_03.png ( 25.9 KBytes )　ダウンロード

添付ファイル4

emmet_shortcut_key_04.png ( 41.0 KBytes )　ダウンロード

No.1796

09/24 16:33

edit

添付ファイル

Sublime Text に LSP をインストールしてPHP開発を楽にする

● Sublime Text に LSP をインストールしてPHP開発を楽にする

1. ~/.composer/composer.json に次の行を追加

    "minimum-stability": "dev",

2. composer モジュールをインストール

 composer global require jetbrains/phpstorm-stubs
composer global require felixfbecker/language-server

3. php-language-server　の起動

cd 
cd .composer
composer run-script --working-dir=vendor/felixfbecker/language-server parse-stubs
php vendor/felixfbecker/language-server/bin/php-language-server.php

4. SublimeText から LSPの起動

[Command] + [shift] + P から次を選択

LSP: Enable Language Server

● LSP-intelephense をインストールする

1. Sublime Text の Package Control から LSP-intelephense をインストールする

次に [Command] + [shift] + P から次を選択

LSP: Enable Language Server

LSP-intelephense を実行すると起動します。

VS CodeのPHP Intelliphenseがとても心地よくコードを補完してくれる件 - Qiita

● 参考

https://langserver.org/

No.1598

12/10 10:33

edit

WEBサイトのある要素に現在効いているcssだけを抽出・保存する

WEBサイトのある要素に現在効いているcssだけを抽出・保存するには次の拡張機能を使用します。

● Google Chrome 拡張機能 CSS Used

https://chrome.google.com/webstore/detail/css-used/cdopjfddjlonogibjahpnmjpoangjfff

● CSS Used の使い方

1. 抽出したいWEBサイトを開く

2. 抽出したい要素を右クリックして「検証」

3. 右のパネルで「CSS Used」を選択する

添付ファイル1

google_chrome_css_used.png ( 116.5 KBytes )　ダウンロード

No.1424

01/25 11:51

edit

添付ファイル

Sublime Text で sass(scss)の最速構文チェック（lint）を行う

● SublimeLinter-contrib-sass-lint

1. SublimeTextのパッケージ SublimeLinter-contrib-sass-lintのインストール

Sublime Text から「Command + Shift + P」 → 「Package Control : Install Package」を選択し、「SublimeLinter-contrib-sass-lint」をインストールします。

2. node sass-lint のインストール

npm install -g sass-lint

インストール後にインストールされたパスが表示されるのでそれをコピーして .bash_profile に書き込みます。

vi .bash_profile

#sass-lint
export PATH="$HOME/.anyenv/envs/ndenv/versions/v9.11.2/bin/:$PATH"

2. sass-lint のバージョンの確認

 sass-lint -V

バージョン 1.2.0 以上 であればOKです。

3. 構文チェック（lint）の実行

sass (sass)ファイルを開くと画面一番下に lint 結果が自動的に表示されます。ファイル更新のたびに自動チェックが走ります。

4. 構文チェック（lint）のルールの変更

デフォルトではlintルールが厳しめなのでホームディレクトリに .sass-lint.yml ファイルを作成して lintルールをゆるくします。

・デフォルトのルール設定ファイルはこちら

https://github.com/sasstools/sass-lint/blob/master/lib/config/sass-lint.yml

・オススメのルール設定ファイルはこちら

options:
  formatter: stylish
files:
  include: '**/*.s+(a|c)ss'
rules:
  # Extends
  extends-before-mixins: 1
  extends-before-declarations: 1
  placeholder-in-extend: 1

  # Mixins
  mixins-before-declarations: 1

  # Line Spacing
  one-declaration-per-line: 1
  empty-line-between-blocks: 0
  single-line-per-selector: 0

  # Disallows
  no-attribute-selectors: 0
  no-color-hex: 0
  no-color-keywords: 0
  no-color-literals: 0
  no-combinators: 0
  no-css-comments: 0
  no-debug: 1
  no-disallowed-properties: 0
  no-duplicate-properties: 1
  no-empty-rulesets: 1
  no-extends: 0
  no-ids: 1
  no-important: 0
  no-invalid-hex: 1
  no-mergeable-selectors: 1
  no-misspelled-properties: 1
  no-qualifying-elements: 0
  no-trailing-whitespace: 0
  no-trailing-zero: 0


  no-transition-all: 0
  
  
  no-universal-selectors: 0
  no-url-domains: 1
  no-url-protocols: 1
  no-vendor-prefixes: 0
  no-warn: 1
  property-units: 0

  # Nesting
  declarations-before-nesting: 1
  force-attribute-nesting: 1
  force-element-nesting: 0
  force-pseudo-nesting: 0

  # Name Formats
  class-name-format: 0
  function-name-format: 1
  id-name-format: 0
  mixin-name-format: 1
  placeholder-name-format: 1
  variable-name-format: 0

  # Style Guide
  attribute-quotes: 1
  bem-depth: 0
  border-zero: 1
  brace-style: 1
  clean-import-paths: 0
  empty-args: 1
  hex-length: 0
  hex-notation: 0
  indentation: 0
  leading-zero: 0
  max-line-length: 0
  max-file-line-count: 0
  nesting-depth: 1
  property-sort-order: 0
  pseudo-element: 0
  quotes: 0
  shorthand-values: 0
  url-quotes: 1
  variable-for-property: 1
  zero-unit: 0

  # Inner Spacing
  space-after-comma: 0
  space-before-colon: 0
  space-after-colon: 0
  space-before-brace: 0
  space-before-bang: 1
  space-after-bang: 1
  space-between-parens: 0
  space-around-operator: 0

  # Final Items
  trailing-semicolon: 1
  final-newline: 1

No.1290

01/06 09:33

edit

Visual Studio Code で SCSS（SASS）のコンパイルを行う

● 1. node-sass のインストール

npm install -g node-sass

● 2. Visual Studio Code で SCSSのビルドファイルを作成する

　　 1. Visual Studio Code で何かの .scss ファイルを開く

　　 2. メニューの「タスク」→「規定のビルドタスクの構成」を選択

　　 3. tasks.json を下記のようにする

（例 scss ファイルをビルドして ../../www/assets/css/ へ書き出します。ディレクトリは適宜書き換えてください）

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "echo",
            "type": "shell",
            "command": "node-sass",
            "args": [
                "${fileBasenameNoExtension}.scss", "../../www/assets/css/${fileBasenameNoExtension}.css"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

● 3. ビルドの実行

こちらの test.scss ファイルを test.cssファイルヘ変換してみます。 test.scss

body {
  color: #333;
  h1 {
    color: #666;
  }
}

test.scss を開き、メニューの「タスク」→「ビルドタスクの実行」でビルドを実行します。 .scss ファイルから .css ファイルが生成されていることを確認します。

● 4. 保存した時に自動的にビルドを実行するようにする

毎回ビルドを実行するのは面倒なので、保存した時に自動的にビルドをするように設定します。

　　 1. 拡張機能「Save and Run」をインストールする

　　 2. メニューの「基本設定」→「設定」を開く。（フォントサイズ等を指定する画面が開きます。）

　　 3. 右側のウィンドウに下記項目を追加

   "saveAndRun": {
        "commands": [
          {
            "match": "\\.scss$",
            "cmd": "node-sass ${fileBasenameNoExt}.scss ../../www/assets/css/${fileBasenameNoExt}.css",
            "useShortcut": false
          }
        ] 
      }

これで保存するだけで自動的に scss → css 変換が行われます。

No.1211

04/25 12:42

edit

スマホアプリ、スマホWEB制作アプリSketchのテクニック

Sketchのテクニック

● シンボルを作成していろんなページで同じパーツを使い回す

シンボルにしたいオブジェクトを選択した状態で「Layer」→「Create Symbol」を選択してシンボルを作成。後はそのシンボルをコピーペーストでいろんなページに配置すれば、シンボル修正時にすべてのページで反映されます

● Sketchのプラグインを検索して自動でインストールする

こちらのアプリ sketchtoolbox をインストールすると簡単にプラグインを追加することができます。
http://sketchtoolbox.com/

こちらのアプリ Sketchpacks for macOS も簡単にプラグインを追加することができます。
Sketchpacks for macOS https://sketchpacks.com/

● Sketchのプラグインを手動sketchplugin手動でインストールする

・その1. プラグインファイル（xxxxx.sketchplugin）をダブルクリックする

・その2. 自力でプラグインフォルダに移動させる

Finderのメニューから「移動」「フォルダ移動」を選択し

~/Library/Application Support/com.bohemiancoding.sketch3/Plugins

移動する。ここにダウンロードしたプラグインファイルを置く。

● スケッチおすすめプラグイン一覧

・画像、アイコン貼り付け系

・Unsplash It Sketch Plugin（Unsplash Itから自然の風景画像を取得して貼り付けてくれる）
・day-player（Unsplash Itから画像を取得して貼り付けてくれる。ぼかしエフェクト有り）
・Content Generator for Sketch（適当な人物画像データを入れてくれる）
・Craft（適当な画像を生成して貼り付けてくれる）
・sketch-iconfont（Font Awesomeなどのアイコンフォントを検索して使用できるようにする）
・Clipboard Fill（クリップボードにコピーした画像をペーストするだけでクリッピングマスク状態でペーストできる）

・レイアウト系

・Pixel Perfecter（ Command + Option + control + P で小数点の値が入っているオブジェクトを自動選択）
・Sketch Guides（「Show Rulers」で定規を表示しているときにガイドを簡単に作成する）
・Autolayout	（レスポンシブ対応のwebページを作成時に自動でセンタリングをキープや背景自動伸縮など）

・ユーティリティ系

・Export All Text（全てのテキストオブジェクトを書き出し）
・Sketch Palettes（良い感じのカラーセットを自動で生成してくれる）
・Sketch Measure	（オブジェクトの情報を簡単に調べる）
・Sketch Page Switch	（ページ切り替えショートカットで行えるようにする）
・Sketch Style Inventory	（スタイルを楽に扱えるようにする）
・Sketch Distributor	（便利な整列プラグイン）
・Duplicator	（連続して複製する）
・Rename It	（レイヤー名一括変更）
・Sort Lauyers	（レイヤーをソートする）
・CSSketch	（cssを編集する）
・Font Finder（同じフォントを選択する）

● 他のレイヤーからスタイルを取ってくる

レイヤーのスタイルをコピー ⌘ + Option + C

レイヤーのスタイルをペースト ⌘ + Option + V

● レイヤーの順序を移動

レイヤーを上位に移動 ⌘ + Option + ↑

レイヤーを下位に移動 ⌘ + Option + ↑

● カラーピッカーを表示

Ctrl + C

No.1157

07/06 15:25

edit

MacのWEB制作（コーディング・プログラミング）用エディター・統合開発環境（IDE）

MacWEB制作（コーディング・プログラミング）用エディター・統合開発環境（IDE）を紹介します（おすすめ順）

● visual studio code （フリーソフト）

https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx

真っ先に選択すべきエディタです。
バージョンが上がるごとにだんだん良くなっています。

● sublime text （シェアウェア・無料試用可能）

https://www.sublimetext.com/

とにかく高速。色々パッケージを追加しても遅くなりません。
各種パッケージも豊富に揃っています。

● Atom （フリーソフト）

https://atom.io/

とにかくフリーソフトで良いエディターをお探しならこれをお勧めします。
動作はかなりもったりしていますがプログラミングに必要なパッケージはほとんど揃っています。
一番最初に使うエディターとしておすすめです

● PhpStorm （シェアウェア・無料試用期間あり）

https://www.jetbrains.com/phpstorm/

php 専用の統合開発環境。（【IntelliJ IDEA】のPHP版）
色々なエディタや開発環境を試して最終的に行き着くのがこれなのかなという気がします
ある程度他のエディターのくせや良さがわかった上で使うことをおすすめします。

● vim （フリーソフト）

mac の場合ターミナルから vim と入力して起動します

ネットワーク管理者、サーバー管理者の標準エディター。元々は unix のコマンドラインから使用できる vi エディターが拡張されたものが vim エディターです。 mac os x も unix 系 os なので標準でインストールされています。拡張もかなり豊富で自分好みにカスタマイズしたい方にはお勧めのエディターです。

No.1112

07/28 18:27

edit

● 1. VS Code の拡張機能で接続サーバーに「PHP Debug」をインストールする

● 2. VSコードでリモートサーバに接続しブレークポイントをセットしたいファイルを開いた状態でF5を押す

● 3. launch.jsがない場合は作成を促されるので以下内容で保存する

● VS Code のカラーをカスタマイズする

● サンプル1

● サンプル2

● サンプル3

● サンプル4

● VS Code - Vim

● 行末にいる時 → で次の行へ移動できるようにする

● 検索

● カーソルの単語で検索

● 安全な Cookie

● VS Code で正規表現のテストケースを作成してテストする

● Regex Previewer のインストール

● テストする正規表現とテストケースを作成する

● テストを実行する

● 複数行を1行に変換する（Merge lines ）

● 略語を展開する

● 選択したテキストをタグで囲む

● 現在いるタグの内側または外側を選択する

・VisualStudio Code

・Sublime Text

● Sublime Text に LSP をインストールしてPHP開発を楽にする

1. ~/.composer/composer.json に次の行を追加

2. composer モジュールをインストール

3. php-language-server の起動

4. SublimeText から LSPの起動

● LSP-intelephense をインストールする

1. Sublime Text の Package Control から LSP-intelephense をインストールする

● 参考

● Google Chrome 拡張機能 CSS Used

● CSS Used の使い方

1. 抽出したいWEBサイトを開く

2. 抽出したい要素を右クリックして「検証」

3. 右のパネルで「CSS Used」を選択する

● SublimeLinter-contrib-sass-lint

1. SublimeTextの パッケージ SublimeLinter-contrib-sass-lintのインストール

2. node sass-lint のインストール

2. sass-lint のバージョンの確認

3. 構文チェック（lint）の実行

4. 構文チェック（lint）のルールの変更

・デフォルトのルール設定ファイルはこちら

・オススメのルール設定ファイルはこちら

● 1. node-sass のインストール

● 2. Visual Studio Code で SCSSのビルドファイルを作成する

1. Visual Studio Code で 何かの .scss ファイルを開く

2. メニューの「タスク」→「規定のビルド タスクの構成」を選択

3. tasks.json を下記のようにする

● 3. ビルドの実行

● 4. 保存した時に自動的にビルドを実行するようにする

1. 拡張機能「Save and Run」をインストールする

2. メニューの「基本設定」→「設定」を開く。（フォントサイズ等を指定する画面が開きます。）

3. 右側のウィンドウに下記項目を追加

● シンボルを作成していろんなページで同じパーツを使い回す

● Sketchのプラグインを検索して自動でインストールする

● Sketchのプラグインを手動sketchplugin手動でインストールする

・その1. プラグインファイル（xxxxx.sketchplugin）をダブルクリックする

・その2. 自力でプラグインフォルダに移動させる

● スケッチおすすめプラグイン一覧

・画像、アイコン貼り付け系

・レイアウト系

・ユーティリティ系

● 他のレイヤーからスタイルを取ってくる

● レイヤーの順序を移動

● カラーピッカーを表示

● visual studio code （フリーソフト）

● sublime text （シェアウェア・無料試用可能）

● Atom （フリーソフト）

● PhpStorm （シェアウェア・無料試用期間あり）

● vim （フリーソフト）

● 1. VS Code の拡張機能で接続サーバーに「PHP Debug」をインストールする

● 行末にいる時　→　で次の行へ移動できるようにする

3. php-language-server　の起動

1. SublimeTextのパッケージ SublimeLinter-contrib-sass-lintのインストール

　　 1. Visual Studio Code で何かの .scss ファイルを開く

　　 2. メニューの「タスク」→「規定のビルドタスクの構成」を選択

　　 3. tasks.json を下記のようにする

　　 1. 拡張機能「Save and Run」をインストールする

　　 2. メニューの「基本設定」→「設定」を開く。（フォントサイズ等を指定する画面が開きます。）

　　 3. 右側のウィンドウに下記項目を追加