WEB／システム／IT技術ブログ

「Laravel Sail」で開発環境を構築

これまで、開発環境にはxamppやDockerを使用していました。
今回、Dockerを簡易的に操作できるという「Laravel Sail」での開発環境構築を試してみます。

今回、開発環境を構築したのは以下の環境です。

  • Windows 11 Home
  • Ubuntu-22.04 WSL2
  • Docker Desktop 4.15.0
  • Laravel 9.52.0
  • Laravel Sail 1.20

WindowsにUbuntuやDockerはインストール済みとします。
また、新規プロジェクトではなく、既存プロジェクトに適用してみました。プロジェクトソースはWindows上ではなく、Ubuntu上に展開されています。

Laravel Sailのインストール

最近、Laravelを新規インストールした場合、Sailはデフォルトで組み込まれているようですが、今回の古くから運用しているプロジェクトには含まれてなかったので、まずはパッケージをインストールします。

$ composer require laravel/sail --dev

次に、以下のコマンドでインストールします。

$ php artisan sail:install

すると対話型で、必要なサービスが問われます。今回はmariadbを選択します。

 Which services would you like to install? [mysql]:
  [0] mysql
  [1] pgsql
  [2] mariadb
  [3] redis
  [4] memcached
  [5] meilisearch
  [6] minio
  [7] mailpit
  [8] selenium
  [9] soketi
> 2
Sail scaffolding installed successfully.
...
Sail images installed successfully.
...
Sail build successful.

この処理には少々時間がかかります。

「「Laravel Sail」で開発環境を構築」のつづきを読む

Laravel MixからViteに移行する

Laravel 6から9へアップグレードしたので、これまで利用していたLaravel Mixから、Laravel 9でデフォルトで採用されている「Vite」に移行してみます。
Vite | Next Generation Frontend Tooling
ちなみにViteの読み方は「ヴィート」のようです。

今回は、以下の移行ガイドを参考にして作業を進めてみます。
vite-plugin/UPGRADE.md at main · laravel/vite-plugin

プラグインのインストール

初めに、viteとLaravelのviteプラグイン「laravel-vite-plugin」をインストールします。

> npm install --save-dev vite laravel-vite-plugin

VueやReactを使用する場合、それぞれのプラグインをインストールします。

> npm install --save-dev @vitejs/plugin-vue

> npm install --save-dev @vitejs/plugin-react
「Laravel MixからViteに移行する」のつづきを読む

WordPressでエラーログを取得する

WordPressでエラーログを取得する方法です。
WordPressはデフォルトではエラーログを出力しない設定になっているので、テンプレート開発やプラグイン開発をする場合は有効にしたほうがよいでしょう。

設定ファイル変更

まず、設定ファイル「wp-config.php」を編集します。
WP_DEBUGでデバッグモードを有効にすることで、エラーが出力されるようになります。

// define('WP_DEBUG', false);
define('WP_DEBUG', true);

但し、このままではエラーが画面に表示されてしまうので、以下の設定も追加します。
これにより、エラーは画面に表示されずにログファイルに出力されるようになります。

define('WP_DEBUG_DISPLAY', false);
define('WP_DEBUG_LOG', true);

ログファイルは「…/wp-content/debug.log」に出力されます。
サーバ環境によりますが、ログファイルは外部からアクセスできないように、パーミッションを640などに変更しましょう。

「WordPressでエラーログを取得する」のつづきを読む

Vue.jsを2から3にアップグレード

個人のお遊びプロジェクトのVue.jsを、2から3にアップグレードしてみます。

Vue.js 3をインストール

手探りな感じですが、とりあえず、package.jsonを以下のように修正して、Vue.js 3をインストールしてみます。

- "vue": "^2.5.17",
+ "vue": "^3.0",

アップデートします。

> npm update
（中略）
32 vulnerabilities (8 moderate, 24 high)

案の定、依存パッケージで脆弱性エラーが32件発生しました。

> npm audit fix --force
（中略）
found 0 vulnerabilities

上記コマンドを実行。すごい、一発で直った。

また、3ではパッケージ「vue-loader」が必要みたいなので、事前にインストールしておきます。

> npm install vue-loader
「Vue.jsを2から3にアップグレード」のつづきを読む

WSL2でドメイン名が解決できないためアップグレードできない

ある日突然、WSL2でドメイン名が解決できないためにアップグレードできない事象に陥りました。

$ sudo apt-get update
Ign:1 http://archive.ubuntu.com/ubuntu jammy InRelease
Ign:2 http://security.ubuntu.com/ubuntu jammy-security InRelease
Ign:3 https://ppa.launchpadcontent.net/ondrej/php/ubuntu jammy InRelease
Ign:4 http://archive.ubuntu.com/ubuntu jammy-updates InRelease
Ign:2 http://security.ubuntu.com/ubuntu jammy-security InRelease
（中略）
Err:5 http://archive.ubuntu.com/ubuntu jammy-backports InRelease
  Temporary failure resolving 'archive.ubuntu.com'
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
34 packages can be upgraded. Run 'apt list --upgradable' to see them.
W: Failed to fetch http://archive.ubuntu.com/ubuntu/dists/jammy/InRelease  Temporary failure resolving 'archive.ubuntu.com'
W: Failed to fetch http://archive.ubuntu.com/ubuntu/dists/jammy-updates/InRelease  Temporary failure resolving 'archive.ubuntu.com'
W: Failed to fetch http://archive.ubuntu.com/ubuntu/dists/jammy-backports/InRelease  Temporary failure resolving 'archive.ubuntu.com'
W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/jammy-security/InRelease  Temporary failure resolving 'security.ubuntu.com'
W: Failed to fetch https://ppa.launchpadcontent.net/ondrej/php/ubuntu/dists/jammy/InRelease  Temporary failure resolving 'ppa.launchpadcontent.net'
W: Some index files failed to download. They have been ignored, or old ones used instead.
「WSL2でドメイン名が解決できないためアップグレードできない」のつづきを読む

ExpoでHello World

Expoを使ってスマホアプリの実装環境を構築してみたいと思います。

個人的にはコンテンツはWebアプリで十分、スマホアプリはコストメリットが少ないという考えです。

  • 市場の大きさはAndroid、iPhoneよりもWebが広い
  • 常にAndroid、iPhoneのバージョン依存に付き合わないといけない開発・運用コスト
  • 公開するための審査のコスト

ただ、知らずして思い込んでいる部分もあるという反省から、アプリ開発にも触れてみようと思います。

今回はアプリ開発の中でもコストを抑えられると「Expo」を使って、React Nativeアプリの開発環境を構築してみます。
Expo
Expo開発には以下のメリットが期待できます

  • iSOやAndroidなどクロスプラットフォーム開発が可能
  • カメラや位置情報機能などを比較的容易に実装できる
  • アプリ公開に必要な審査のサポートがある

ちなみに、以下の環境を前提にご紹介します。

  • Windows 11 Home
  • Node.js 16.18.1
  • npm 8.19.2

※この時点でのExpo CLIがNode.js 17以下にしか対応していないという事で、意図的にNode.jsのバージョンを落としています。

「ExpoでHello World」のつづきを読む

Googleカレンダーに誕生日が表示されない

Googleカレンダーに誕生日が表示されない時の対処法です。

知人に「Googleカレンダーで、連絡先に登録した誕生日を表示させたい」といった相談を受けました。
私は、簡単にできるといってその方法を教えようとしましたが、実際にやってみると意外と難しかったので、そのときのメモです。

ちなみに、私も知人も、Googleアカウント使用歴は10年以上で、連絡先は電話番号の保存程度にしか活用してませんでした。
恐らく、10年ほどこれらの設定まわりを放置してたことが、今回の問題の原因だと考えられるため、事象としてはレアケースかもしれません。

マイカレンダーに「誕生日」がない

「Googleカレンダーに誕生日が表示されない」でWebを検索すると「マイカレンダーの誕生日にチェックを入れると表示される」といった記事を見かけますが、我々のマイカレンダーの選択肢には「誕生日」がありません。

原因は不明ですが、以下の方法で選択肢に「誕生日」を表示させることができます。

「Googleカレンダーに誕生日が表示されない」のつづきを読む

Googleユニバーサルアナリティクス（UA）からGoogleアナリティクス4（GA4）へ切替え

Googleユニバーサルアナリティクス（UA）からGoogleアナリティクス4（GA4）へ切替え時の作業メモです。

Googleより、2023/7/1にUAのサポートを終了するという発表がありました。
ユニバーサル アナリティクスのサポートは終了します – アナリティクス ヘルプ

サポート期限までに、次世代の解析ツールであるGA4に切り替えましょうという案内があるので、今回はその対応をします。
ちなみに、対象サイトはUAとGoogleタグマネージャー（GTM）を利用中であることを前提とします。また、UAとGA4は平行して利用可能ということなので、現時点で利用中のUAは残したまま、GA4を新規導入したいと思います。

GA4のプロパティを新規作成

まず、GA4のプロパティを新規作成するためにGoogle Analyticsに移動します。
Google Analytics
UA利用中のアカウントを開くと、ヘッダ部分に
「2023 年 7 月 1 日より、ユニバーサル アナリティクスでは標準プロパティで新しいデータの処理ができなくなります。それまでに Google アナリティクス 4 プロパティに切り替えて設定を進めておきましょう。」
といったアラートメッセージが表示されているので（※2022年8月時点）、その帯の「開始」ボタンをクリックします。
すると以下の画面が表示されるので、タイトル部分の「未接続」であることを確認して、「新しい Google アナリティクス 4 プロパティを作成する」の「はじめに」ボタンをクリックします。

モーダルが開き、注意事項が記載されてるので、その内容を確認して「プロパティを作成」をクリックします。
すると、先ほどの「未接続」が「接続済み」になりました。

「Googleユニバーサルアナリティクス（UA）からGoogleアナリティクス4（GA4）へ切替え」のつづきを読む

WSL2 + Docker + Xdebug + PHP Debug（Visual Studio Code）を使ってPHPをデバッグする

WSL2 + Docker + Xdebug + PHP Debug（Visual Studio Code）を使ってPHPをデバッグします。

日頃、VSCodeの「PHP Debug」を使ってデバッグを行っていたのですが、WSL2とDockerの環境下ではちょっとした設定が必要だったので、メモとして残しておきます。

ちなみに今回、以下の環境で実現しました。

  • Docker Engine 20.10.17
  • PHP 7.3.33
  • Xdebug 3.1.5
  • Windows 11 Home
  • Ubuntu 22.04
  • Visual Studio Code 1.63.2

WSL2でUbuntu上にソースを展開し、Dockerでマウントして開発しているプロジェクトを想定しています。

Xdebugのインストール

DockerのPHPコンテナにXdebugがインストールされてない場合、以下のコマンドでインストールします。

# pecl install xdebug && docker-php-ext-enable xdebug

Dockerfileに以下を追記すれば、未インストール時にインストールできます。

RUN bash -c '[[ -n "$(pecl list | grep xdebug)" ]]\
  || (pecl install xdebug && docker-php-ext-enable xdebug)'
「WSL2 + Docker + Xdebug + PHP Debug（Visual Studio Code）を使ってPHPをデバッグする」のつづきを読む

TanStack TableのReact Tableでリッチなテーブルを実装してみる

TanStack TableのReact Tableでリッチなテーブルを実装してみます。
TanStack | High Quality Open-Source Software for Web Developers

あるプロジェクトで脱jQueryの流れがあり、jQueryベースのプラグイン「DataTables」に代わるライブラリを探していて、React Tableにたどり着きました。

本記事の内容は、ほとんど公式サイトのガイド通り、かつ、雑な解説となっておりますが、、初導入時の記憶としてメモを残したいと思います。

  • React 18.1
  • React Table 8.2.2

ここではユーザ情報ををTableで表示する、シンプルな例を取り上げます。
また、コード量が多くなるので、要点を絞り紹介しています。

React Tableのインストール

npmコマンドを使ってReact Tableをインストールします。

$ npm install @tanstack/react-table
「TanStack TableのReact Tableでリッチなテーブルを実装してみる」のつづきを読む

Monthly Archives