arm-bandの投稿 - Crieit

JavaScript で互いにオブジェクトを要素に持つ配列2つを比較して、重複していない要素のみを取り出す

2022-07-14T23:39:50+09:00

経緯

JavaScript で、互いにオブジェクトを要素に持つ配列2つを比較して、重複していない要素のみを取り出す処理を試みたのでメモしておきます。

前提

前提として、次のような2つの配列があったとします。

互いにオブジェクトを要素として持つ配列
配列2は配列1の子集合(サブセット)

この2つの配列を比較して、配列1の中から配列2に含まれない要素のみの配列を作りたい、と考えました。

想定する最終結果も併せて付記しておきます。

配列1

[
    {
        "value": "value-0",
        "label": "Château d'If"
    },
    {
        "value": "value-1",
        "label": "Marseille"
    },
    {
        "value": "value-2",
        "label": "France"
    },
    {
        "value": "value-3",
        "label": "Le Comte de Monte-Cristo"
    },
    {
        "value": "value-4",
        "label": "Alexandre Dumas"
    },
    {
        "value": "value-5",
        "label": "Rhino"
    },
    {
        "value": "value-6",
        "label": "prison"
    },
    {
        "value": "value-7",
        "label": "François I"
    },
    {
        "value": "value-8",
        "label": "Jean-Baptiste Kléber"
    }
]

配列2

[
    {
        "value": "value-0",
        "label": "Château d'If"
    },
    {
        "value": "value-1",
        "label": "Le Comte de Monte-Cristo"
    },
    {
        "value": "value-2",
        "label": "Alexandre Dumas"
    }
]

得たい配列

[
    {
        "value": "value-1",
        "label": "Marseille"
    },
    {
        "value": "value-2",
        "label": "France"
    },
    {
        "value": "value-5",
        "label": "Rhino"
    },
    {
        "value": "value-6",
        "label": "prison"
    },
    {
        "value": "value-7",
        "label": "François I"
    },
    {
        "value": "value-8",
        "label": "Jean-Baptiste Kléber"
    }
]

「2つの配列で重複した要素を除去した配列を生成する」というのはいくつか記事を見かけました。

しかし、それらは1次元配列のサンプルばかりだった上に、今回はさらに「要素の中の labelキーの値で比較したい」という内容だったので、さらにハードルが上がりました。

コード

JavaScript：filter()を使って配列内の重複要素を削除・取得したり、2つの配列から共通要素を取得する方法 - NxWorld

最終的にはこちらのコードをベースにして作りました。

サンプルは以下。

Home - L'enfer de Chateau d'If

// 配列
const Ar1 = [
    // 略
];
const Ar2 = [
    // 略
];

// 重複要素を除去した配列を返す関数
const getArraysDiff = (array1, array2) => {
    // 引数の各々の配列から label のみの配列を生成
    const array1LabelArray = array1.map((itm) => {
        return itm.label;
    });
    const array2LabelArray = array2.map((itm) => {
        return itm.label;
    });
    // label のみの配列で比較
    const arr1 = [...new Set(array1LabelArray)];
    const arr2 = [...new Set(array2LabelArray)];
    return [...arr1, ...arr2].filter((val) => {
        return !arr1.includes(val) || !arr2.includes(val);
    });
};

// 上述関数で重複除去した label の配列を得る
const ChateuDiff = getArraysDiff(Ar1, Ar2);
// filter メソッドで、元配列 から該当する label が存在する要素を除去する
const enferChateuDiff = Ar1.filter((item) => {
    return ChateuDiff.includes(item.label);
});

ざっくりこのような処理で想定していた結果を得られました。

余談

何故このようなことをしようかと思ったかというと、 React Select で defaultCalue で指定した選択済みの項目が選択候補にも上がってしまっていたので、除外しようとしたためでした。

が、そもそも React Select 側は選択済み項目を除外する機能を元々持っていたので上述の処理は不要ということが分かったため、今回のコードは未使用となりました。

ちなみに、この機能が働かなかった原因は API で取得した値から上述のような label と value のオブジェクトを生成するループ処理の際に、 value に ID の数値を振り方を間違えていたため、 React Select から「異なる値」として認識されてしまっていたためでした。

また、仮に今回の処理をかけたとしても、初期表示では上手く選択済み項目が除外されますが、選択済み項目を削除した場合は選択可能な項目として再度選択肢に復活させる必要があるため、かなり手間がかかることが想定されたためオミットしていたと思います。

……本当、 React Select 側に標準搭載されていて良かったです。

参考

本題

React (create-react-app) で Clipboard API にアクセスするために localhost:3000 をhttpsにする

2022-07-14T23:32:07+09:00

経緯

React アプリ(create-react-app(react-scripts))で Clipboard API を使おうとしたところ、次のエラーが発生してしまいました。

Uncaught TypeError: Cannot read property ‘writeText’ of undefined ...

調べてみたところ、 https でないと使用できないようです。

そこで通常 npm start で自動起動してくる http://localhost:3000/ を https://localhost:3000/ にする必要に迫られたので、その方法を書き留めておきます。

対処

今回は XAMPP の入っているPCでそのオレオレSSL証明書が既にあったので、それを流用します。

証明書を server.crt、秘密鍵を server.key という名前でコピーして、 create-react-app プロジェクト配下に設置します(今回は ssl/ ディレクトリを切りました)。

次に、 .env に次の3行を足して再度 npm start します。

HTTPS=true
SSL_CRT_FILE=./ssl/server.crt
SSL_KEY_FILE=./ssl/server.key

これで https://localhost:3000/ でアプリにアクセスでき、無事 Clipboard API も動かすことができました。

参考

Clipboard API

Uncaught TypeError: Cannot read property ‘writeText’ of undefined

https化

create-react-app(react-scripts) の X high severity vulnerabilities の警告について

2022-07-12T23:57:06+09:00

経緯

create-react-app(react-scripts) で作ったアプリに対して、パッケージ追加等をすると次のような脆弱性の警告が表示されます。

up to date, audited 1485 packages in 5s

197 packages are looking for funding
run npm fund for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

脆弱性がある、と言われるとさすがに放置はできないのでどうにかできないものかと調べました。

対応

結論から言うと、今回のケースでは無視して良い、とのことでした。

create-react-appでは脆弱性の警告が出るが無視して良い

理由としては

警告の発出元である npm audit 自体の警告が不正確
今回のケース(create-react-app(react-scripts))では依存パッケージはビルドツールとして用いられており、殆どの場合は成果物に含まれるわけではない (と思われる)
ビルドツールとして脆弱性があればアップデートがあるはず

といったところのようです。

言われて見れば確かに、というところですね。

それでも気になる場合は

dependencies にある react-scripts を devDependencies に移動させる
- npm audit --production を使用する
パッケージインストール時は npm install --no-audit で audit を使用しないように指定する

とすることで警告を表示させなくすることができるとのこと。

参考

MySQL8.0 の再帰クエリを単独の Eloquent で使ってみる

2022-07-12T23:45:36+09:00

ちょうどやりたいことができそうだったので、 MySQL8.0 で新しく追加された再帰クエリを使ってみました。なお、単独インストールした Eloquent での使用を想定しているので、リレーションの機能をそのまま使うのは難しそうなケースでした。

経緯

内容としてはありがちな部署マスタのようなもので、親子関係まで見たいと考えたためでした。

id	parent	name
1	0	営業部
2	1	営業1課
3	1	営業2課
4	0	システム部
5	4	開発課
6	4	運用保守課
7	5	フロントエンドグループ
8	5	バックエンドグループ

イメージとしてはこんなイメージのテーブルがあったとして、例えば「システム部」と指定した場合、「開発課」「運用保守課」「フロントエンドグループ」「バックエンドグループ」のIDを子部署として参照したい、というようなケースです。

コード

$hogeObjectsArray = $this->dbConnect->connection('hogera')
                                ->select("
                                    WITH recursive child(
                                        depth,
                                        id,
                                        parent,
                                        name
                                      ) AS (
                                        SELECT 0,
                                               id,
                                               parent,
                                               name
                                          FROM hoge
                                         WHERE id = {$foo}
                                         UNION ALL
                                        SELECT child.depth + 1,
                                               hoge.id,
                                               hoge.parent,
                                               hoge.name
                                          FROM hoge, child
                                         WHERE hoge.parent = child.id
                                      )
                                      SELECT depth,
                                             id,
                                             parent,
                                             name
                                        FROM child
                                       ORDER BY
                                             depth
                                ");

最終的には上述の形で取得できました。

->table($this->table) 等でテーブルを指定せず、いきなり ->select() しているのがミソです。

参考

with recursive

単独の Eloquent 内で with recursive を使用したい

メソッド確認

Illuminate\Database\Capsule\Manager | Laravel API
query(): Illuminate\Database\Connection | Laravel API
Builder: Illuminate\Database\Query\Builder | Laravel API
selectRaw(): Illuminate\Database\Query\Builder | Laravel API
select(): Illuminate\Database\Query\Builder | Laravel API
raw(): Illuminate\Database\Connection | Laravel API

unionAll

(未使用) 外部パッケージ

GitHub - soda-framework\/eloquent-closure

(未使用) もはや生PDOに回帰するか

Laravelでクエリ結果を配列で取得する方法 - Qiita

whereIn()

laravel クエリビルダ whereInを使って賢く取得情報を絞ろう - Qiita

Eloquent 単独で COUNT(*) を使用したいが DB:raw() を使用すると A facade root has not been set. エラーになる

2022-06-09T23:58:40+09:00

経緯

Eloquent 単独利用しているプログラムの中で COUNT(*) を使用したくなったのでその方法をメモ。

単純に件数をカウントしてその数値を使いたいだけであれば

$data_count = $dbConnect->table('hoge')
              ->count();

で済ませることができます。が、今回はサブクエリとして使用した方がコード的にすっきりしそうな状況でした。

先の方法ではコード上は関連性のない別のクエリをもう1つ記述しなければならないので如何なものかと思い……。

調査

LaravelのEloquentで集計関数Count()などを使うとき - バックエンドとフロントエンドを行き来するWEBプログラマ―のメモ帳

検索したところ、 SQL で COUNT(*) を使用する場合は DB:raw() を使うとのこと。

ただし、 Laravel の中ならばいざ知らず今回は Eloquent 単独使用なので、 DB なるクラスはどこから来るのか……となってしまいました。しかも ::raw() は static メソッドですし。

データベース：クエリビルダ 8.x Laravel

引き続き検索すると、 DB はファサードでした。

しかし、 Laravel 公式のサンプルのように

use Illuminate\Support\Facades\DB;

を追加すると、

A facade root has not been set.

というエラーが発生して怒られてしまいます。

通常の Laravel 内で使用する場合はインスタンスとの紐付けが上手く行われますが、今回は Eloquent のみの単体使用なのでこのパターンではできそうにないように見受けられました (できたとしても素直に Laravel を使った方が早そう)。

最終的には

Eloquentを単体で導入している時にDBファサードを使用する方法 - Qiita

この記事の方法で

use \Illuminate\Database\Capsule\Manager as DB;

を DB::raw() を使うクラスのファイルの中で再度読み込ませる (別のファイルでDB接続用のインスタンスを生成していて、それを DI していたので今回は「再度読み込ませる」という表現) ことで乗り越えることができました。

参考

count()

DB::raw()

A facade root has not been set. エラー

LaravelのFacade(ファサード)とは? 何気なく使用していた裏側の仕組みを解説! | RE:ENGINES
Laravel｜DBデータ操作(DBファサード, クエリビルダ, Eloquent) - わくわくBank (バージョン古い)
エンジニアブログ (バージョン古い)
php - How can I query raw via Eloquent? - Stack Overflow (バージョン古い)
Eloquentを単体で導入している時にDBファサードを使用する方法 - Qiita

Illuminate\Support\Collection を配列に変換する

2022-05-31T23:48:56+09:00

経緯

Eloquent で取得したデータはそのままだと Object の Collection になっているのですが、配列として扱いたいケースが出てきました。そこで先の Collection を配列に変換するメモを残しておきます。

コード

$employeesCollectionObject = $dbConnect->table($this->table)
                    ->where(
                        [
                            ['id', '=', $id],
                        ]
                    )
                    ->select(
                        'employee_id',
                        'depart',
                    )
                    ->get();
$employeesCollectionArray = $employeesCollectionObject->map(function ($item, $key) {
    return [
        'tori_id' => $item->employee_id,
        'domain' => $item->depart,
    ];
});

例えばこうすることで、

object(Illuminate\Support\Collection)[xxx]
  protected 'items' => 
    array (size=10)
      0 => 
        object(stdClass)[yyy]
          public 'employee_id' => string '001' (length=3)
          public 'depart' => string 'sales' (length=5)
      1 => 
        object(stdClass)[zzz]
          public 'employee_id' => string '002' (length=3)
          public 'depart' => string 'accounting' (length=10)
      2 => 
      ...

このようなコレクション→オブジェクトの配列が

object(Illuminate\Support\Collection)[xxx]
  protected 'items' => 
    array (size=10)
      0 => 
        array (size=2)
          'employee_id' => string '001' (length=3)
          'depart' => string 'sales' (length=5)
      1 => 
        array (size=2)
          'employee_id' => string '002' (length=3)
          'depart' => string 'accounting' (length=10)
      ...

このようなコレクション→連想配列の配列になります。各プロパティへのアクセス等が犠牲になりますが、今回は織り込み済み。

さらに ->toArray() を使って

$employeesCollectionArray = $employeesCollectionObject->map(function ($item, $key) {
    return [
        'tori_id' => $item->employee_id,
        'domain' => $item->depart,
    ];
});
$customersArray = $employeesCollectionArray->toArray();

こうすることで

array (size=10)
  0 => 
    array (size=2)
      'employee_id' => string '001' (length=3)
      'depart' => string 'sales' (length=5)
  1 => 
    array (size=2)
      'employee_id' => string '002' (length=3)
      'depart' => string 'accounting' (length=10)
  ...

配列→連想配列にできました。

今回はこれで対応。

参考

Docker Compose で条件に応じてマウントするボリュームを切り替える

2022-05-31T00:00:59+09:00

経緯

Docker Compose を使って複数の似たようなユースケースで検証を繰り返している中で、

この検証では Apache のドキュメントルートと MySQL のデータを永続化して試験したい
その検証ではどちらも永続化しないで試験したい
あの検証ではファイル数が膨大な上にオペレーションでその膨大なファイルに変更ををかけるので Apache のファイル永続化をしているとディスクIOがボトルネックになって検証に時間がかかり過ぎる

という具合に、同じ Docker Compose のベースを使いつつもユースケースに応じてボリュームをマウントするかどうかを条件によって切り分けたくなりました。

検証ごとに別リポジトリにフォークなりブランチなり切っていくと数が多くなってしまい管理しきれなくなる恐れがあるので、なるべくベースのコードは共通にしておきたいところです。

そこで、「同じ Docker Compose のコードで、条件に応じて処理を変化させる(今回はマウントするボリュームを切り替える)」ということが必要になりました。

結果

最初に結果を記すと、今回は docker-compose を up する際に -fオプションを付ける、という方法を選択しました。

ボリュームをマウントしない場合

> docker-compose up -d

ボリュームをマウントする場合

> docker-compose -f docker-compose.yml -f docker-compose.volumes.yml up -d

このように使い分けるイメージです。

コード

上述で指定した各 yml ファイルは次のようになっています。

docker-compose.yml

version: '3.8'
services:
  web:
    build:
      context: ./apache/docker
      dockerfile: Dockerfile
      args:
        WEB_ROOT_DIRECTORY: $WEB_ROOT_DIRECTORY

      ## 略

    volumes:
      # workspace
      - ./workspace:/workspace
      # docker settings template
      - ./template:/template

      ## 略

  db:
    build:
      context: ./mysql/docker
      dockerfile: Dockerfile

      ## 略

      volumes:
      # workspace
      - ./workspace:/workspace
      # docker settings template
      - ./template:/template

      ## 略

オプションなしで使用するデフォルトの docker-compose.yml はエントリポイントのシェルスクリプトや設定、ログの置き場所など最低限のディレクトリをマウントするに留めています。

docker-compose.volumes.yml

version: '3.8'
services:
  web:
    volumes:
      # apache virtual host
      - ./apache/www:/var/www/$WEB_ROOT_DIRECTORY/web
  db:
    volumes:
      # mysql data
      - ./mysql/data:/var/lib/mysql/data

一方、ボリュームマウント用の yml ファイルでは冒頭の通り Apache のドキュメントルート想定のディレクトリや MySQL のデータファイルのディレクトリをマウントするようにしています。

これにより、オプション指定のない場合は後者のファイルが読み込まれないことによりドキュメントルートやデータファイルをマウントせず、オプションを付けるとマウントする、というように挙動を切り替えられる、という寸法です。

ただし、このくらいで済むのでまだ良いですがこれが複雑化すると大量の -fオプションと Composeファイルによる長大なコマンドになってしまう恐れがあるのでその点は要改善ですかね。現時点でも readme.md とかにコマンドを書いておかないと一々打ち込んでいられないレベルですし。

参考

-f オプション

-f オプションの先

Compose ファイルの指定

Compose CLI 環境変数 — Docker-docs-ja 20.10 ドキュメント

(未使用) 環境変数

Compose における環境変数 | Docker ドキュメント

ボリュームのマウント

Dockerのマウントについて

Dockerコンテナ上の名前解決とホストマシンの Windows の hosts

2022-05-30T23:58:04+09:00

とある試験で Dockerコンテナからのみ特別に名前解決したい、というケースが生じました。

そこでホストマシンの Windows の hosts が使えないか検証したのでメモ。

検証

# yum install -y bind-utils

まず今回検証したい Dockerコンテナはデフォルトだと nslookup コマンドが入っていないのでインストール (bind-utils の中に含まれている)。

#192.0.2.1  hoge.example1.jp

続いてホストマシンの Windows の hosts を上述のように記述。あえてコメントアウトしてあります。

なお、 hoge.example1.jp は公開 DNSサーバにはレコードが存在しないドメインだとします。

# nslookup
> hoge.example1.jp
Server:         127.0.0.11
Address:        127.0.0.11#53

** server can't find hoge.example1.jp: NXDOMAIN

この状態で Dockerコンテナ上から nslookup 。上述の通り DNSサーバにレコードが存在しない前提なので、名前解決できません。

# nslookup
> example1.jp
Server:         127.0.0.11
Address:        127.0.0.11#53

Non-authoritative answer:
Name:   example1.jp
Address: 192.0.2.11

逆に、 DNSサーバにレコードが存在する example1.jp は名前解決できます。想定通りですね。

192.0.2.1   hoge.example1.jp

続いてホストマシンの Windows の hosts に記述をした場合です。

# nslookup
> hoge.example1.jp
Server:         127.0.0.11
Address:        127.0.0.11#53

Non-authoritative answer:
Name:   hoge.example1.jp
Address: 192.0.2.1

名前解決できました。このことから、 Dockerコンテナはホストマシンの hosts を参照することが分かりました。

これで検証が進められます。

参考

使えないコマンドがある時の対応方法 - Qiita

Docker Compose で使用する環境変数にデフォルト値を設定する

2022-05-23T23:59:20+09:00

Docker Compose で使用する .env の環境変数にデフォルト値を設定する方法についてメモ。

経緯

PHP Webアプリケーション用のコンテナからDB用のコンテナに接続する際、DB名やユーザ名・パスワードを任意の値に設定したい。

ただし .env は Git 管理にはしたくないので標準では sample.env 等に逃がしており、うっかりファイルをコピー・リネームし忘れていたり、あるいはキー名をタイポして値が消えてしまったりすると困る……ということでデフォルト値を設定できないか、と考えました。

コード

docker-compose.yml

version: '3.7'

volumes:
    logs:
        driver: local

services:
    php:
        build:
            context: ./_docker/dockerfiles/
            dockerfile: Dockerfile
        working_dir: /var/www
        command: php -S 0.0.0.0:8080 -t public
        ports:
            - 8080:8080
    db:
        image: mariadb
        restart: always
        ports:
            - ${MYSQL_PORT:-3306}:${MYSQL_PORT:-3306}
        environment:
            - MYSQL_ROOT_PASSWORD=pwd
            - MYSQL_DATABASE=${MYSQL_DBNAME:-test}
            - MYSQL_USER=${MYSQL_USER:-user}
            - MYSQL_PASSWORD=${MYSQL_PASSWORD:-pwd}

.env (サンプル)

MYSQL_DBNAME=foo_db
MYSQL_USER=foo_user
MYSQL_PASSWORD="Password-1234"
MYSQL_HOST=192.0.2.1
MYSQL_PORT=3306

早速ですが用意したコード。

まず基本的に .env を用意すれば、 ${HOGE} の形式で環境変数をセットできます。

今回はそこに ${HOGE:-FUGA} と、コロン(:)とハイフン(-)を付けた値を追加しました。これにより、「.env に HOGE=PIYO のように HOGE に値がセットされていれば PIYO を、そうでなければデフォルト値として :- の後の文字列 (この場合は FUGA) をセット」となります。

例えば上述の - MYSQL_DATABASE=${MYSQL_DBNAME:-test} の部分では、 MariaDB のコンテナイメージに対して MYSQL_DATABASE キーへ .env の MYSQL_DBNAME に値がセットされていればその値を、そうでなければ test をセット、となります。

なお - がない場合は empty も許容されるので、空文字列が環境変数にセットされるようです。今回はどれも空文字列では都合が宜しくないので全てハイフンありで統一。

参考

デフォルト値

Docker Compose に渡す環境変数ファイルを変更する

2022-05-23T23:58:56+09:00

Docker Compose に渡す環境変数に .env 以外のファイルから渡したいと考えたのでメモしておきます。

経緯

アプリケーション開発環境等で開発環境用の .development.env と本番環境用の .production.env を用意したとして、この2つのどちらかから Docker Compose に環境変数を渡したい。

開発環境なのでアプリ側で使用する環境変数と Dockerコンテナ内で使用する環境変数を統一したい、と。

ただし、デフォルトでは Docker Compose は .env からしか環境変数を読み取ってくれません。これをどうにかしたい。

コマンド

> docker-compose --env-file .development.env up -d

ということでコマンドですが、 docker-compose コマンドに --env-file でパラメータを渡してあげると .env 以外のファイルも環境変数のソースとして渡すことができます。

(余談) コマンド実行時の --env-file パラメータと .envファイルと docker-compose.yml の env_file キー

さて、ここから少しややこしい話を。

Docker Compose 周りでは環境変数関連で見出しに挙げた3つの方法があるようです。

.env については Docker Compose で使用できる環境変数ファイル。これは良いですね。

この .env をそれ以外のファイル名・ディレクトリのファイルから読み取るように変更できるのが docker-composeコマンド実行時の --env-file パラメータ。

ここまでは docker-compose.yml 内で使用できる 環境変数です。

それでは最後、 docker-compose.yml の env_fileキーは何か。

version: '3.7'

services:
    db:
      env_file:
        - .dvelopment.env

最後の env_file は docker-compose.yml 内に記述できるパラメータで、これを使って環境変数のファイルを指定することができます。

ただし、このパラメータで指定した環境変数は、 起動したコンテナ内からは参照できますが、 docker-compose.yml 内からは参照できません。

ということで、今回やりたいこととはマッチしません。そもそもの目的が異なる、ということですね。

過去の先人達のように自分も嵌まったのでこのことも併せてメモしておきます。

参考

(PHP) Phoenix でデータ関係が依存しているDBをマイグレーションする

2022-05-19T23:55:46+09:00

lulco/phoenix でデータ関係が依存しているDBをマイグレーションする方法をメモ。

ドキュメントが全然ないので地道にやっていきます……。

コード

早速コードを。

phoenix.php

return [
    'migration_dirs' => [
        'first'  => __DIR__ . '/migrations/first',
        'second'  => __DIR__ . '/migrations/second',
    ],
    'environments' => [
        'local'      => [
            'adapter'  => 'mysql',
            'host'     => $_ENV['MYSQL_HOST'],
            'port'     => (int)$_ENV['MYSQL_PORT'], // optional
            'username' => $_ENV['MYSQL_USER'],
            'password' => $_ENV['MYSQL_PASSWORD'],
            'db_name'  => $_ENV['MYSQL_DBNAME'],
            'charset'  => 'utf8mb4',
        ],
        'production' => [
            'adapter'  => 'mysql',
            'host'     => $_ENV['MYSQL_HOST'],
            'port'     => (int)$_ENV['MYSQL_PORT'], // optional
            'username' => $_ENV['MYSQL_USER'],
            'password' => $_ENV['MYSQL_PASSWORD'],
            'db_name'  => $_ENV['MYSQL_DBNAME'],
            'charset'  => 'utf8mb4',
        ],
    ],
    'default_environment' => 'local',
    'log_table_name'      => 'phoenix_log',
];

肝は migration_dirs で first と second でそれぞれ対応するディレクトリを指定しているところ。

/migrations/first/hoge.php

table('hoge')
             ->addColumn('create_date', 'datetime')
             ->addColumn('name', 'string')
             ->create();

        // insert
        $hogeData = [
            [
                'name' => 'foo'
            ],
            [
                'name' => 'bar'
            ],
            [
                'name' => 'buz'
            ],
            // 略
        ];
        $rows = [];
        foreach ($hogeData as $key => $val) {
            $rows[] = [
                'create_date' => date('Y-m-d H:i:s'),
                'name' => $val['name'],
            ];
        }
        $this->insert('hoge', $rows);
    }

    protected function down(): void
    {
        $this->table('hoge')
             ->drop();
    }
}

まずは最初に hoge というDBを作成し、そこにデータを流し込みます。

/migrations/second/fuga.php

table('fuga')
             ->addColumn('create_date', 'datetime')
             ->addColumn('name', 'string')
             ->addColumn('hoge_id', 'integer')
             ->create();

        // select hoge data
        $hogeRows = $this->select('SELECT id, name FROM hoge');
        // insert
        $fugaData = [
            [
                'name' => 'un'
            ],
            [
                'name' => 'deux'
            ],
            [
                'name' => 'trois'
            ],
            // 略
        ];
        $rows = [];
        foreach ($fugaData as $key => $val) {
            $id = 0;
            // hoge の name と fuga の name が一致する要素を array_filter() で抽出し、 array_values() で番号を詰める
            $hogeArray = array_values(
                array_filter(
                    $hogeRows,
                    function($hogeRow) use ($val) {
                        $needle = mb_strlen(mb_strtolower($val[0])) > 0 ? mb_strtolower($val[0]) : 'NOTHING';
                        return mb_strpos(mb_strtolower($hogeRow['name']), $needle) !== false;
                    }
                )
            );
            // $hogeArray の要素が1つ (一意に定まる) 場合はその値を、そうでない場合はデフォルト値をセット
            $id = count($hogeArray) === 1 ? (int)$hogeArray[0]['id'] : 0;
            $rows[] = [
                'create_date' => date('Y-m-d H:i:s'),
                'name' => $val[0],
                'hoge_id' => $id, // 上述でセットした id を使用
            ];
        }
        $this->insert('fuga', $rows);
    }

    protected function down(): void
    {
        $this->table('fuga')
             ->drop();
    }
}

次に fuga を作成し、そこに徐に $this->select() で SQL文を発行、先程流し込んだデータを抽出します。

その抽出したデータと fuga に流し込みたいデータを突き合わせて初期データを生成し、それを fuga に流し込む……という算段。

これで意図したデータをマイグレーションすることができました。

参考

GitHub - lulco\/phoenix: Framework agnostic database migrations for PHP.
- phoenix\/PdoAdapter.php at master · lulco\/phoenix · GitHub

ドキュメントがないのでコードを読んで普通に select とか使えそう、と思って試したりしていました。

Eloquent で複数DBに接続する

2022-05-19T23:50:29+09:00

単独の Eloquent を利用して異なるデータソースにアクセスしてみたのでメモしておきます。

コード

db = new Manager;
        // default
        $this->db->addConnection([
            'driver'    => 'mysql',
            'host'      => $_ENV['MYSQL1_HOST'],
            'database'  => $_ENV['MYSQL1_DBNAME'],
            'username'  => $_ENV['MYSQL1_USER'],
            'password'  => $_ENV['MYSQL1_PASSWORD'],
            'charset'   => 'utf8',
        ]);
        // second
        $this->db->addConnection([
            'driver'    => 'mysql',
            'host'      => $_ENV['MYSQL2_HOST'],
            'database'  => $_ENV['MYSQL2_DBNAME'],
            'username'  => $_ENV['MYSQL2_USER'],
            'password'  => $_ENV['MYSQL2_PASSWORD'],
            'charset'   => 'utf8',
        ],
        'second'); // addConnection() メソッドの第二引数に接続名を指定する (1つ目はなしだと default になる)
        $this->db->setAsGlobal();
        $this->db->bootEloquent();
    }
    // 略
}

肝はコメントにも記した通り Managerクラスの addConnection()メソッドについて、第二引数に接続名を指定することです (1つ目はなしだと default になり、後で使用する分にも指定は不要) 。

あ、しれっと書いていますが dotenv を使用した想定です。


$db = new DBConnection();

$secondDBrows = $db->connection('second')->table('hoge_db')
                   ->where( /* 略 */ )
                   ->select( /* 略 */ )
                   ->get();

こちらもしれっと書いていますがイメージとしては先程のDB接続用クラス DBConnection をインスタンス化して、その中から connection()メソッドで引数に先程指定した接続名を記述することで二つ目の接続を利用してDBにアクセスできる、ということです。

これで意図したことを実装することができました。

参考

PHP の array_filter() で条件に一致した配列の要素を抽出する

2022-05-18T00:05:39+09:00

PHP で array.filter のようなことをしたくなったのでメモ。

コード

getDeptName() === $dept_name;
            }
        )
    );
}

イメージとしてこのような感じで意図した挙動になることを確認しました。

やっていることととしては、「ある部署に所属する (部署名 $dept_name で抽出) 社員全員の一覧」を抽出しています。

なお、前提として社員データの配列 $employees (各要素が予め定義された Employeeオブジェクト) があるものとしています。

ところで、この形 Eloquent の複合条件抽出でも見かけました……そう、 array_filter() の第二引数(コールバック関数)がクロージャで、スコープを越えて外部変数を使うために use句を用いる、という形がそっくりそのままですね。

デジャヴも良いところですね。

参考

arra_values()

PHP: array_values - Manual

array_filter()

Eloquent で複合条件の抽出をする

2022-05-18T00:03:50+09:00

Eloquent を実践的に使い始めたばかりなので初歩的なところですが、複合条件を組み立てるところについてメモ。

コード

やりたいこととしては、 WHERE A AND B AND (C OR D) という条件。

$departName = [
    '総務部',
    '営業部',
];
$dataRows = $dbConnect->table('hoge_db')
                      ->where(
                          [
                              ['user_id', '>', 23],
                              ['age', '<', 42],
                          ]
                      )
                      ->where(function($query) use ($departName) {
                          $query->orWhere('depart_name', '=', $departName[0])
                                ->orWhere('depart_name', '=', $departName[1]);
                      })
                      ->select(
                          'fuga_db.name',
                          'fuga_db.attribute',
                          'fuga_db.parameter'
                      )
                      ->join('fuga_db', 'hoge_db.user_id', '=', 'fuga_db.employee_id')
                      ->get();

$dbConnect にDB接続情報が入ったインスタンスがあるという前提ですが、イメージとしてこのようなコードです。

肝は以下。

OR 条件の括弧の中身を where()メソッドの中にクロージャとして無名関数で記述する。
関数の引数はクエリ。そこに orWhere()メソッドを足していく。
クロージャの外部の変数はスコープの関係で Undefined Variable になってしまうので use句でクロージャ内に持ち込む

これで意図した挙動になることを確認しました。

参考

Slim4 をサブディレクトリかつ本体はドキュメントルートより上にデプロイした状態で動作させる

2022-05-10T22:43:05+09:00

経緯

slimphp/Slim-Skeleton をサブディレクトリに配置しつつ、 app/ や src/, vendor/ 等のディレクトリはドキュメントルートより上の階層にデプロイした状態で動作させることができたのでメモしておきます。

ディレクトリ構造

var/
  └ www/
     └ sampleapp/
          ├ slim-app/                   // Slim4-Skeleton 本体 ( public/ ディレクトリ以外) デプロイ先
          │    ├ app/
          │    ├ src/
          │    ├ vendor/
          │    └ etc.
          │
          └ public_html/                // ドキュメントルート
               └ subdirectory/          // サブディレクトリ
                    └ sub2/             // 2個目のサブディレクトリ
                         ├ .htaccess    // Slim4-Skeleton の public/ ディレクトリにある .htaccess
                         └ index.php    // Slim4-Skeleton の public/ ディレクトリにある index.php

今回の最終的な構成はこのようになりました。

この階層構成は

アプリケーション本体はドキュメントルート下には置きたくない
複数の Slim アプリケーションを配置する可能性がある
サブディレクトリも深い階層に設置する可能性がある

ということで、本体のデプロイディレクトリやドキュメントルート下のサブディレクトリをそれぞれ1つずつ余計に掘っています。

手順

すぐ削除するデモ環境なので割と雑に設定を。

# cd /var/www/sampleapp/
# mkdir slim-app
# chown apache:apache slim-app/
# chmod 775 slim-app/
# ls -al
合計 16
drwxr-xr-x  4 ADMIN  ADMIN  4096  MM月 dd  yyyy hh:ii .
drwxr-xr-x 18 ADMIN  ADMIN  4096  MM月 dd  yyyy hh:ii ..
drwxrwxr-x  2 apache apache 4096  MM月 dd  yyyy hh:ii slim-app
drwxrwxr-x  4 apache apache 4096  MM月 dd  yyyy hh:ii public_html

#
# pwd
/var/www/sampleapp/

FTP 等で subdirectory/, subdirectory/sub2/ を掘ります。

この状態になったら、

/var/www/sampleapp/slim-app/ に public/ 以外(他不要なファイル・ディレクトリは都度省く)をアップロード
/var/www/sampleapp/slim-app/logs/ の権限を 777 、 /var/www/sampleapp/slim-app/logs/app.log を 666 にする
ソースコードの public/index.php 内で __DIR__ . '/../～～～.php'; となっているパスを __DIR__ . '/../../../slim-app/～～～.php'; とデプロイ先の環境のパス階層に合わせる
/var/www/sampleapp/public_html/subdirectory/sub2 に public/ 以下のファイルをアップロード

として動作することを確認しました。なお、 public/.htaccess はデフォルトのままでOKでした。

なお、DBがある場合でDBサーバ上で必要な場合は接続情報を変更すること (接続元Webサーバがローカルの開発環境とサーバで異なるので別権限が必要)。

参考

Docker の php:7-alpine イメージで Composer と Xdebug を使えるようにする

2022-05-10T22:39:48+09:00

経緯

slimphp/Slim-Skeleton を利用したいと考えました。

手元の端末で開発しようとしたところ、 XAMPP に Xdebug を入れ忘れていたことに気付きました。しかも、 XAMPP の PHP のバージョンで Xdebug のインストールが止まってしまいました。

そこで、スケルトンプロジェクトに付随している Docker Compose での開発を試みましたが、この Docker Compose 内で pull してくるイメージは Composer も Xdebug もないので入れることにしました。

コード

ディレクトリ構造

root/
    ├ _docker/                               // Dockerに関する設定置き場
    │    ├ dockerfiles/
    │    │    ├ settings/
    │    │    │    └ php.ini                 // PHPの設定 (Xdebug 有効化)
    │    │    │
    │    │    └ Dockerfile
    │    │
    │    ├ mysql/                            // MariaDB 用ディレクトリ
    │    │    └ .gitkeep
    │    │
    │    └ phpmyadmin/
    │         ├ conf/
    │         │    └ phpmyadmin-misc.ini     // phpMyAdmin の設定 (メモリ上限など)
    │         │
    │         └ sessions/
    │              └ .gitkeep
    │
    └ docker-compose.yml

Docker に関する部分のみ列挙。

docker-compose.yml

version: '3.7'

volumes:
    logs:
        driver: local

services:
    slim:
        build:
            context: ./_docker/dockerfiles/
            dockerfile: Dockerfile
        working_dir: /var/www
        command: php -S 0.0.0.0:8080 -t public
        environment:
            docker: "true"
        ports:
            - 8080:8080
        volumes:
            - .:/var/www
            - ./logs:/var/www/logs
    db:
        image: mariadb
        restart: always
        ports:
            - 3306:3306
        volumes:
            - ./_docker/mysql/mysql:/var/lib/mysql
            - ./_docker/mysql/initdb.d:/docker-entrypoint-initdb.d
        environment:
            - MYSQL_ROOT_PASSWORD=pwd
            - MYSQL_DATABASE=test
            - MYSQL_USER=user
            - MYSQL_PASSWORD=pwd
    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        volumes:
            - ./_docker/phpmyadmin/sessions:/sessions
            - ./_docker/phpmyadmin/conf/phpmyadmin-misc.ini:/usr/local/etc/php/conf.d/phpmyadmin-misc.ini
        environment:
            - PMA_ARBITRARY=1
            - PMA_HOST=db
            - PMA_USER=user
            - PMA_PASSWORD=pwd
        ports:
            - 8081:80

変更点は以下。

PHP 用環境: Dockerfile を使ったイメージにカスタマイズ
DB: MariaDB のイメージをそのまま利用
- environment のパラメータはそのまま使用。アプリケーションや phpMyAdmin 側と動機は取れていないですがひとまずはこれで……
phpMyAdmin: これも phpMyAdmin 公式イメージを流用

_docker/dockerfiles/Dockerfile

FROM php:7-alpine
RUN apk --update add curl
RUN set -ex \
  && apk --no-cache add \
  autoconf build-base
RUN pecl install xdebug
RUN docker-php-ext-enable xdebug
RUN docker-php-ext-install pdo_mysql
COPY settings/php.ini /usr/local/etc/php/conf.d
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/bin --filename=composer

php:7-alpine をベースに Xdebug と Composer を追加。

_docker/dockerfiles/settings/php.ini

xdebug.mode=coverage

Xdebug でカバレッジを有効化するための設定を追加するため。なお、 Dockerfile で COPY する際のホストマシンでのパスは Dockerfile の存在するディレクトリから下でないと参照できない という地味な制約があるので dockerfiles ディレクトリをわざわざ掘りました。

_docker/phpmyadmin/conf/phpmyadmin-misc.ini

allow_url_fopen = Off
max_execution_time = 600
memory_limit = 64M
post_max_size = 64M
upload_max_filesize = 64M

メモリ上限等のカスタマイズ。

これで今回はカバレッジ出力まで動作することを確認しました。

参考

Xdebug

PHPUnitでHTMLコードカバレッジを出すまで(Docker使用) - Qiita

Warning: XDEBUG_MODE=coverage or xdebug.mode=coverage has to be set

が出たので step3 について実施。

なお、今回のケースでは

extension=xdebug.so

は不要だった。

Dockerfile

Dockerで作るNginx + PHP7 + Xdebug環境 | Crudzoo

ほぼこれでOK.

php-alpineコンテナにxdebugをインストールする時にハマったメモ - Qiita

こちらも参照。 php -v で with Xdebug と付いていればOK。

Dockerfile の COPY

【Docker】COPYで指定されたファイルは、Dockerfileが存在するディレクトリからの相対パスで、親ディレクトリを見れない - タカの技術ノート

Mariadb

could not find driver

普通に考えたら確かにドライバがないので追加して解決。

シェル

dockerでalpine linux ベースのcontainerに入って、shellを使いたいとき。 - Qiita

bash ではなく ash 。 bin/ash 指定。

sr -c

docker-compose.ymlのcommandプロパティに複数コマンドを設定する方法 | ゲンゾウ用ポストイット

最終的には使わずに済みましたが念のためメモ。

脱jQuery メモ

2022-04-30T00:03:10+09:00

経緯

Bootstrap でブレークポイント未満(スマホ時)のナビゲーションリンクにアンカーリンクがある場合、アンカーリンクをタップしてもナビゲーションリンクのメニューが開いたままアンカーリンクへ遷移するので、それを制御するコードを自前で書いていました。その部分を脱 jQuery したのでメモしておきます。

コード

jQuery

まずは Bootstrap 4 までの jQuery でのコード。

// ナビゲーションバー
const $navbar = $('#navbar');
// ブランド名とドロップダウンコンポーネント以外のナビゲーションリスト
$navbar.find('.navbar-brand, .nav-item:not(.dropdown) a, .dropdown-item').on('click', function (e) {
    // 略
    const navBarListID = 'navbarList';
    if ($(e.currentTarget).closest('#' + navBarListID).length > 0) {
        let breakpoint = 0;
        if (/(^|\s)navbar-expand-(\S*)/g.test($navbar.children('.navbar').prop('class'))) {
            switch (RegExp.$2) {
                case 'sm':
                    breakpoint = 576;
                    break;
                case 'md':
                    breakpoint = 768;
                    break;
                case 'lg':
                    breakpoint = 992;
                    break;
                case 'xl':
                    breakpoint = 1200;
                    break;
                default:
                    breakpoint = 0;
                    break;
                }
            }
            if ($(window).outerWidth() < breakpoint && !$navbar.find('.navbar-toggler[data-target="#' + navBarListID + '"]').hasClass('collapsed')) {
                // 現在の表示がハンバーガーメニューの場合
                $navbar.find('.navbar-toggler[data-target="#' + navBarListID + '"]').trigger('click'); // 移動したらハンバーガーを折りたたむ
            } else if ($(e.currentTarget).hasClass('dropdown-item') && $(e.currentTarget).closest('.dropdown').hasClass('show')) {
                // 現在の表示がハンバーガーメニューではなく、ドロップダウン内のメニューをクリックした場合
                $(e.currentTarget).closest('.dropdown').trigger('click'); // 移動したらドロップダウンを折りたたむ
            }
        }
        return false;
    }
};

ざっくりこんなコードでした。やっていることとしては

ブランド(.navbar-brand), ドロップダウンではないナビゲーションリンク(.nav-item:not(.dropdown) a, ドロップダウン内のリンク(.dropdown-item) がクリックされた場合
- クリック(タップ)された要素の直近の祖先要素に #navbarList の id属性がある要素が存在する場合
  - ナビゲーションバー要素のクラスにある .navbar-expand-XX のクラスのブレークポイントの文字列を取得してブレークポイント値をセット
  - その値と現在のウィンドウの幅を比較してウインドウ幅の方が小さい (=ハンバーガーメニューに表示が切り替わっている) 、かつ .navbar-toggler 要素が .collapsed のclass属性を持っている (=メニュー展開) 場合
    - ハンバーガーメニューを折りたたむ (ハンバーガーアイコンを1度クリックする)
  - またはクリックされた要素が .dropdown-item class属性を持っている (=ドロップダウンメニュー) 、かつ直近の祖先要素で .dropdown class属性を持つ要素が .show class属性を持っている (=ドロップダウンが開かれている) 場合
    - ドロップダウン要素を折りたたむ

という挙動。

プレーン JavaScript

これを Bootstrap 5 対応でプレーンな JavaScirpt に書き換え。

const navbar = document.querySelector('#navbar');
const navBarListID = 'navbarList';
if (
    typeof e.currentTarget.closest(`#${navBarListID}`) !== 'undefined'
     && e.currentTarget.closest(`#${navBarListID}`) !== null
) {
    let breakpoint = 0;
    if (/(^|\s)navbar-expand-(\S*)/g.test(navbar.className)) {
        switch (RegExp.$2) {
            case 'sm':
                breakpoint = 576;
                break;
            case 'md':
                breakpoint = 768;
                break;
            case 'lg':
                breakpoint = 992;
                break;
            case 'xl':
                breakpoint = 1200;
                break;
            case 'xxl':
                breakpoint = 1400;
                break;
            default:
                breakpoint = 0;
                break;
        }
    }
    if (window.innerWidth < breakpoint) {
        // ブレークポイント未満の幅のとき
        const navbarTogglers = navbar.querySelectorAll(`.navbar-toggler[data-bs-target="#${navBarListID}"]`);
        navbarTogglers.forEach((navbarToggler) => {
            if(!navbarToggler.classList.contains('collapsed')) {
                // 現在の表示がハンバーガーメニューの場合、
                // 移動したらハンバーガーを折りたたむ
                navbarToggler.dispatchEvent(new Event('click'));
            }
            else if(
                e.currentTarget.classList.contains('dropdown-item')
                 && e.currentTarget.closest('.dropdown').classList.contains('show')
            ) {
                // 現在の表示がハンバーガーメニューではなく、ドロップダウン内のメニューをクリックした場合
                // 移動したらドロップダウンを折りたたむ
                e.currentTarget.closest('.dropdown').dispatchEvent(new Event('click'));
            }
        });
    }
}

やっていることは大体同じです。ただし、いくつか置き換えが必要な部分があったので以下その点について触れていきます。

置き換えた部分

複数のクラス指定で要素を取得

const elms = document.querySelectorAll('.hoge, .fuga');

jQuery のようにカンマ区切りで document.querySelectorAll() でOK。

.on()

脱jQuery .on() .off() | q-Az

普通に .addEventListener('eventName', function) でOK。

複数の要素に対するイベントハンドラ

どうして！？document.querySelectorAll(selector).addEventListener()が動かないわけ | フロントエンドBlog | ミツエーリンクス

const elms = document.querySelectorAll('.hoge, .fuga');
elms.forEach(elm => {
    elm.addEventListener('click', process);
},
false);

.querySelectorAll() で取得した要素を .forEach() で反復処理させます。

親要素・祖先要素

【Javascript】親要素や祖先要素を取得する方法 parentNode\/closest | ゆうやの雑記ブログ

普通に .closet('.parent') 。

子要素

jQuery の .children('selectorName') は一応プレーンな JavaScript にも .childrenプロパティがある模様。

ただし、 jQuery のように .children へセレクタ指定はできなさそうなので、この部分は HTML のクラスを子要素の方に付けることで回避しました。

クラス名全てを取得

クラス名（class属性の値）をすべて取得 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website

jQuery では .prop('class') としていたところですが、 .className でOK。

子孫要素の中から探す

脱jQuery .find() | q-Az

jQueryでは .find() だったところを、 elm.querySelector('selectorName') と指定すればOK。

ウインドウ幅

jQuery で $(window).outerWidth() としてたところを、今回の用途では window.innerWidth へ置き換えました。

クラスの存在チェック

脱jQuery .addClass() .hasClass() .removeClass() .toggleClass() | q-Az

jQuery では .hasClass('className') だったところを、 .classList.contains('className') へ置き換え。

イベントハンドラの指定とイベント発火要素の取得

普通に関数指定で elm.addEventListener('click', hoge(elm), false) と書いてしまっていました。

しかし、参考記事に拠るとこれだとその関数の実行結果が渡されるとのこと。しかもイベント発火時ではなく該当コード読み込み時に実行されてしまうため、挙動がおかしくなってしまいます。

これについては第二引数はオブジェクト (または JavaScript の純粋な関数) なので elm.addEventListener('click', hoge, false) と関数名だけにしなければならず、その通りに書けばOK。

一方、 const hoge = (e) => { /* 処理 */ }; で普通にイベントは渡ってくるので、「クリックされた要素」をイベントハンドラ内で利用したい場合は e.currentTarget とすれば問題ないですね。

最初これに気付かずしばらく嵌まっていました。参考記事に感謝。

イベント発火

jQueryを使わない書き方 ajax, each, trigger, on\/off, extend, deferred, animate, css編 | maesblog

イベントがクラスで渡す必要がありますがほぼ同じで、 elm.dispatchEvent(new Event('click')) とすればOK。

このような形でガシガシ書き換えていけば大きな問題はなさそうです。

とはいえ、この置き換えは地味にアンカーリンクへのスクロールアニメーションを scroll-behavior: smooth; に移行したおかげで上述以外の大半の JS を破棄しても問題ないと判断できたのが非常に大きいですね。そうでなければもっと大きなボリュームと対峙する必要がありました……。

しかも Scroll-margin-top で上部固定ナビゲーションバーの裏側にアンカーリンクが隠れてしまう問題を回避できる、というのも JS コードを削減できた要因の一つなので、この2つのプロパティは個人的にかなり神がかっていると感じます。細かいイージングは犠牲になりますが、今回は全然目を瞑ることができるレベルなので良しとします。

参考

複数のクラス指定で要素を取得

.on()

脱jQuery .on() .off() | q-Az

複数の要素に対するイベントハンドラ

どうして！？document.querySelectorAll(selector).addEventListener()が動かないわけ | フロントエンドBlog | ミツエーリンクス

親要素・祖先要素

【Javascript】親要素や祖先要素を取得する方法 parentNode\/closest | ゆうやの雑記ブログ

子要素

クラス名全てを取得

クラス名（class属性の値）をすべて取得 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website

子孫要素の中から探す

脱jQuery .find() | q-Az

ウインドウ幅

クラスの存在チェック

脱jQuery .addClass() .hasClass() .removeClass() .toggleClass() | q-Az

イベントハンドラの指定とイベント発火要素の取得

イベント発火

jQueryを使わない書き方 ajax, each, trigger, on\/off, extend, deferred, animate, css編 | maesblog

その他

JQueryをVanilla JSに緩やかに置き換える - Qiita

Bootstrap 5 のブレークポイント

PDF からテキストをコピペしたときに稀に見られる潰れた文字のメモ

2022-04-29T23:58:08+09:00

あるとき、エディタ上で「入」の文字が化けてしまって困ったので原因を探ったのでメモしておきます。

経緯

エディタ上でファイル名をコピペしたら「入」の文字が化けてしまいました。エクスプローラ上で見ると一見普通の「入」の文字のように見えたのですが……。

メモ帳に貼り付けたところ、明らかに様子がおかしいことに気付きました。

左が文字化けした「入」、右が手入力した「入」です。

何故か今回文字化けした「入」は半分くらいに潰れていますね……。字形が異なるということは、もちろん、文字コードも別です。ユニコードで見ると左が \u2F0A 、右が \u5165 です。

何でしょうこれ……。

調査

調べてみると、他にもこうした文字があることが分かりました。

⼊入
⼈人
⻄西
⾃自
⾞車
⼒力
⼿手
⾮非
⼤大
⼯工

今回採集した例が上述。

メモ帳で見るといずれも半分くらいの大きさに潰れています。エクスプローラで見るとほとんど違いが分からないのですが、先述の通り文字コードが別なのでファイル名はしっかり別物と認識されます。

そのため、同じファイル名が複数あるように見えるというなかなか~~面白い~~困った状況に陥ります。

さらに調べた結果、原因が判明しました。原因は PDF でした。

PDFの中のテキストは文字コードとは別の固有の番号で文字を出力しているが、Unicodeのような文字コードとは互換性はない
一応文字コードとPDF固有の番号の変換テーブルはある
が、この変換テーブルがない PDF が存在する
そうした場合、昇順で文字を参照するが本来の文字ではなく部首に当たる文字が先にヒットしてしまう
この部首に当たる文字が先の半分潰れたような文字の正体
結果、コピペ等 PDF の中からテキストを抜く際に本来の文字ではなく、部首に当たる文字が抜き出される。その文字は通常の文字ではないため、一部の環境では化ける

ざっくり言うとこんな感じの原因の模様。確かに、今回のケースでも PDF の中から見出しのテキストをコピペしてファイル名にしていました。その際に先の条件に当てはまり、通常の 入 ではなく、 ⼊ を混入させてしまった、ということのようです。

原因が分かれば納得ですが、なんと面倒な……。

参考

(余談)

「文字コードを自動判別する」と言う幻想を打ち砕く👊 - Qiita

今回の件とは別件ですが、まあ文字コードがらみは厄介ですよね、というお話。

Bootstrap 5 + scroll-margin-top + ダークモード + パララックスについてメモ

2022-04-28T00:04:15+09:00

経緯

Bootstrap 5 で JavaScript の記述なしにアンカーリンクへのアニメーション付きスクロールが scroll-behavior で実装されていることを最小限構成で確認したので、改めて Bootstrap 5 で検証したいと思います。

デモ

Home - Vault Celestia

早速ですがデモを。

scroll-margin-top

上述の通り、 Bootostrap 5 ではアンカーリンクへのアニメーション付きスクロールは scroll-behavior: smooth; で実装されているのでこの部分はそちらに任せて、 scroll-margin-top のみ自前で記述。

// foundation/_variable.scss
$navbar-height: 56px;

/* css変数 + Scss変数 */
:root {
    --navbar-height: #{$navbar-height};
}


// object/utility/_u-ssnapmt.scss
.u-ssnapmt {
    scroll-margin-top: var(--navbar-height);
}

今回は css変数 + Scss の併用で記述してみました。

css変数 + ページごとのキービジュアル画像の変更

キービジュアル (ページ最上部にある画像 + 見出し + キャッチコピー等のパーツ) の背景画像について、ページごとに異なる画像を表示させたい、というのはよくある話だとは思います。

今回は css変数を使って

予め headタグ内の styleタグでは background-image: var(--img); でcss変数で指定しておく
各要素で変数の値を都度差し替える

という形で画像を切り替える形式を採ってみました。

なお、今回はデモなので Jumbotron風の実装で。

ダークモード

// layout/_l-main.scss
@charset "utf-8";

@use "../foundation" as f;

.l-main {
    background-color: f.$bg-color;
    color: f.$color;
    #dark > & {
        /* ダークモード対応 */
        @media (prefers-color-scheme: dark) {
            background-color: f.$color;
            color: f.$bg-color;
        }
    }
}

メディアクエリ @media (prefers-color-scheme: dark) によるダークモードを試しに記述。

ブログのような色に対して中立性の高いコンテンツの場合は使えそうですが、ブランドカラーが決まっている場合は難しそうな感。

個人的には基本ダークモードの方がありがたいのですが……。

パララックス

最後はパララックス。これについてはパッケージを利用しました。

    "dependencies": {
        "ukiyojs": "^3.0.0"
    },

import Ukiyo from 'ukiyojs';

window.addEventListener( 'load', () => {
    const ukiyoParallaxes = document.querySelectorAll( '.ukiyo' );
    ukiyoParallaxes.forEach( ( ukiyoParallax ) => {
        new Ukiyo( ukiyoParallax, {
            scale: 1.75,
            speed: 1.75,
        } );
    });
});

公式のドキュメント通りです。

GitHub - yitengjun\/ukiyo-js: ⛰️Modern parallax library for picture elements and any images

検索すると自前実装も出てくるのですが、後々を考えるとパッケージの方が良さそうな気がするので。

参考

scroll-margin-top

Bootstrap 5 での jumbotron

背景が画像のジャンボトロンの実例～Bootstrap5設置ガイド

css変数で背景画像指定

CSS変数でbackground-imageを指定するとChromeとSafariで挙動が異なるのを解決する - Qiita

ダークモード

Webサイトをダークモードに対応させよう | Webクリエイターボックス

パララックス

(css) scroll-behavior と scroll-margin-top についてメモ

2022-04-27T23:58:57+09:00

css の scroll-behavior と scroll-margin-top について検証したのでメモ。

経緯

Bootstrap 5 で何気なく検証をしていたら、特に何をしたわけでもないのに同一ページ内のアンカーリンクにアニメーション付きでスクロールしたので気になりました。

自前の JavaScript では何も記述していないプレーンな状態だったので、 Bootstrap 5 の JavaScript かと思ったのですが、該当の CDN からの読み込みの scriptタグを削除しても動作したので「すわ css 側か？」となり調べてみることにしました。

調査結果

結果、 scroll-behaviorプロパティに依るものと分かりました。具体的には、

html {
    scroll-behavior: smooth;
}

この記述でページ全体にスクロールアニメーションが付与されていました。

しかも調べてみると、別ページのアンカーリンクに遷移する場合は

ページ遷移
遷移先のページでアンカーリンクまで自動的にアニメーション付きでスクロール

という挙動をすることが分かりました。

css で別ページのアンカーリンクまで対応しているのであれば、上述の挙動が気になる場合を除けばもはやこれ1つで済んでしまうのではないでしょうか……。

注意点としては、 iOS Safari が15.4(2022/3/14リリース、2022/4/27記事執筆時点で最新版) のみサポートとなっているため、最新版以外の Safari のサポートが必要な場合は polyfill 等の代替手段を講じる必要性がありそうです。

PJAX 等のデフォルトではない遷移をした際の挙動については未検証なので何ともですが少し気になります。

それと、もう一点気になったのは Bootstrap のケースで言うとナビゲーションバーに .fixed-top を付けていた場合。つまりナビゲーションバーが画面上部に固定表示で追従するパターンですね。

頻出するパターンですが、このケースでは工夫しないとアンカーリンク移動時にナビゲーションバーの裏側にコンテンツが隠れてしまうという課題がありました。

かつてはこれを margin-top: -80px; padding-top: 80px; 等とネガティブマージンとパディングで調整・相殺するテクニックを使っていましたが……。

scroll-margin-top

ここで兼ねてより目を付けていたのが scroll-margin-top 。 scroll-snap と呼ばれるスクロール時に特定の位置で止めたり誘導するプロパティの1つで、上述のアンカーリンク遷移時にナビゲーションバーの裏側に隠れてしまう問題を解決する方法として利用できます。

.anchor-link {
    scroll-margin-top: 80px;
}

これまで上述のようなネガティブマージョンとパディングの相殺や、あるいは before疑似要素を利用した方法で調整していた手間が、上述の通り1行指定するだけで解決できます。

css変数を使用するならば、

:root {
    /* 変数定義 */
    --navbar-height: 80px;
}
html {
    /* スムーススクロール */
    scroll-behavior: smooth;
}
.header {
    /* ナビゲーションバーを上部固定表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    /* css変数を使用して高さを指定 */
    height: var(--navbar-height);
}
.main {
    /* スクロール可能なコンテンツ領域の上端部分はめり込むのでここは普通に margin-top でナビゲーションバー分下げる。css変数使用。 */
    margin-top: var(--navbar-height);
}
.anchor-link {
    /* アンカーリンクが裏側に隠れるのを抑止。css変数使用。 */
    scroll-margin-top: var(--navbar-height);
}

このようなイメージですね。

"scroll-margin-top" | Can I use... Support tables for HTML5, CSS3, etc

ちなみにこちらは iOS Safari 14.7 以降で有効ですが、やはりそこそこ新しめの Safari である必要があるので、こちらもケースによっては注意が必要そうです。

ネガティブマージン・パディングで固定ヘッダー使用時のアンカーリンクに対応する
【CSS】ページ内リンクのジャンプ先の位置を調整する at softelメモ
- 疑似要素を使う手法もあり

arm-bandの投稿 - Crieit

JavaScript で互いにオブジェクトを要素に持つ配列2つを比較して、重複していない要素のみを取り出す

React (create-react-app) で Clipboard API にアクセスするために localhost:3000 をhttpsにする

create-react-app(react-scripts) の X high severity vulnerabilities の警告について

MySQL8.0 の再帰クエリを単独の Eloquent で使ってみる

Eloquent 単独で COUNT(*) を使用したいが DB:raw() を使用すると A facade root has not been set. エラーになる

Illuminate\Support\Collection を配列に変換する

Docker Compose で条件に応じてマウントするボリュームを切り替える

Dockerコンテナ 上の名前解決とホストマシンの Windows の hosts

Docker Compose で使用する環境変数にデフォルト値を設定する

Docker Compose に渡す環境変数ファイルを変更する

(PHP) Phoenix でデータ関係が依存しているDBをマイグレーションする

Eloquent で複数DBに接続する

PHP の array_filter() で条件に一致した配列の要素を抽出する

Eloquent で複合条件の抽出をする

Slim4 をサブディレクトリかつ本体はドキュメントルートより上にデプロイした状態で動作させる

Docker の php:7-alpine イメージで Composer と Xdebug を使えるようにする

脱jQuery メモ

PDF からテキストをコピペしたときに稀に見られる潰れた文字のメモ

Bootstrap 5 + scroll-margin-top + ダークモード + パララックス についてメモ

Dockerコンテナ上の名前解決とホストマシンの Windows の hosts

Bootstrap 5 + scroll-margin-top + ダークモード + パララックスについてメモ