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

Laravelで多次元データから任意のキーのみ取り出す方法です。

例えば、ユーザテーブルから複雑なクエリビルダで以下のデータを取得したとします。

$users = User::get_fukuzatsu();
Log::debug($users);
[
	{
		"id": 1,
		"name": "山田太郎",
		"kana": "ヤマダタロウ",
		"tel": "11122223333",
		"age": 30,
		"sex": 1,
		"mail": "taro@xxxxx"
		"postcode": "1112222",
		...
	},
	{
		"id": 2,
		"name": "山田花子",
		"kana": "ヤマダハナコ",
		"tel": "44455556666",
		"age": 25,
		"sex": 2,
		"mail": "hanako@xxxxx"
		"postcode": "4445555",
		...
	},
	...
]

このデータの電話番号など一部データを、APIで外部に展開します。ここで、以下の課題があります。

  • 全てのデータを出すにはデータ量が多い
  • プライバシーポリシー的に出せない情報がある
  • だからと言って、クエリビルダが複雑な事もあり、電話番号などキーを絞ったクエリ「get_fukuzatsu2」などを複製するのもスマートじゃない

最近、Vue.jsやReactなどを使用したSPA開発がトレンドで、API開発も需要も高まってきてます。
Laravelでは、APIに必要なルートやコントローラを簡単に生成できるしくみが用意されています。

今回はLaravelでAPIの開発を始める際の基礎をみてみます。
ちなみに、Laravel 6.xがインストール済みであることを前提とします。
また、任意の「Sample」データに対してAPIを開発するとします。

コントローラ作成

以下のコマンドで、APIに必要な関数を含んだコントローラ「app/Http/Controllers/API/SampleController.php」を作成することができます。

$ php artisan make:controller API/SampleController --api

作成されたコントローラの中身は以下のようになってます。

namespace App\Http\Controllers\API;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class SampleController extends Controller
{
	public function index()
	{
			//
	}

	public function store(Request $request)
	{
			//
	}

	public function show($id)
	{
			//
	}

	public function update(Request $request, $id)
	{
			//
	}

	public function destroy($id)
	{
			//
	}
}

Laravel×Reactの開発環境構築を構築します。

今回試した環境は以下の通りです。

  • Laravel 6.20.44
  • Node.js 14.16.1
  • React 18.1

Laravelはインストール済みの状態から解説します。

初期LaravelにReactのインストール

初期のLaravel環境に対してReactをインストール場合、laravel/uiパッケージを利用すると便利です。ターミナルから以下のコマンドを実行します。

$ php artisan ui react

または

$ php artisan preset react

Laravelの初期状態はVue.jsがプリセットとなっています。
このコマンドを実行する事で、プリセットがReactに変更され、React開発スタートに必要なファイルが追加、変更されます。
具体的には「resources/js/components/Example.js」などが追加され、「package.json」や「webpack.min.js」などの内容が変更されます。
一方で「resources/js/components/ExampleComponent.vue」などのVue.js関連の初期ファイルは削除されます。

次に「package.json」を元にReactパッケージをインストールします。

$ npm install

基本的にReactのインストールは以上です。

但し、既にLaravelの開発が進行している場合、既存ファイルが自動で変更、削除されると困という場合はこちらの方法はお勧めできません。

とうとうWindows 11デビューしました。
想像していた通り、いくつか環境構築がこれまでのようにうまくいかず。。
「この時間返して。。今後もOSが変わるたびに、この試練を突破しないといけないのかな。。経済損失ってどれぐらいだろう。。」
など考えながら作業しております。

さて、新PCのWindows 11 Homeのセットアップを終え、環境構築の作業に入ろうと思い、PowerShellを起動したら、以下のメッセージが表示されました。

Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

新機能と改善のために最新の PowerShell をインストールしてください!https://aka.ms/PSWindows

Windows Updateで最新の状態とかにしてくれないんですかね。

コマンドで現在のバージョンを調べてみると5.1のようです。

PS C:\Users\username> $PSVersionTable

Name                           Value
----                           -----
PSVersion                      5.1.22000.653
PSEdition                      Desktop
PSCompatibleVersions           {1.0, 2.0, 3.0, 4.0...}
BuildVersion                   10.0.22000.653
CLRVersion                     4.0.30319.42000
WSManStackVersion              3.0
PSRemotingProtocolVersion      2.3
SerializationVersion           1.1.0.1

PowerShellのバージョンが古いことで、いくつか実行できないコマンドもあるようです。

Windows 10で、Docker Desktopで使ってるWSL2のプロセス「Vmmem」のメモリ使用量を制限する方法です。

WSL2を使うようになってから、ローカル開発環境にアクセスするのが重く、また、その度に私のロースペックノートPCのファンがフル回転します。。
高負荷の原因はロースペックだと考えていましたが、調べてみるとプロセス「Vmmem」を制御すれば改善しそうです。

ローカル環境で作業中に、タスクマネージャーを確認してみました。

Vmmemにより、メモリが4.5GBほど消費しています。作業を続けているとメモリ使用量は増え続け、時には全体の使用率が95%を超える場面もあります。

Windows 10のプロジェクトにTypeScriptの開発環境を構築してみます。

WindowsにはNode.jsがインストール済みであることを前提とします。
WindowsでNode.js、gulp.jsをインストールして効率よい開発環境を目指す(準備編)

インストール

コマンドプロンプトを開き、npmコマンドでTypeScriptをインストールします。

> npm install -g typescript

インストール完了後、以下のコマンドでバージョンが表示されれば、インストール成功です。

> tsc -v
Version 4.6.4

tsファイルをコンパイル

任意のTypeScriptファイル「script.ts」を用意します。今回はtsファイルの中身については割愛します。
以下のコマンドを実行すると、tsファイルがコンパイルされ、ファイル「script.js」が出力されます。

> tsc script.ts

Docker ComposeでWordPress開発環境を構築します。

今回、以下の環境に構築しました。

  • Windows 10 Home
  • Docker Engine v20.10.14

開発環境の構成はWordPress、DBはMariaDB、DB参照用にphpMyAdminです。
WordPressのプラグイン、アップロード画像やテンプレートを含むフォルダ「wp-content」はgitで管理しています。
WordPressは本番環境に合わせて、ドキュメントルートからサブフォルダ「wp」に展開します。

docker-compose.ymlを用意する

WordPress開発環境構築用に以下の「docker-compose.yml」を用意します。ファイル「docker-compose.yml」はルートに配置します。

version: '3.8'

services:
  wordpress:
    image: wordpress:5.9.3
    ports:
      - 8000:80
    depends_on:
      - db
    working_dir: /var/www/html/wp
    volumes:
      - ./public_html/wp/wp-content:/var/www/html/wp/wp-content
      - ./public_html/.htaccess:/var/www/html/.htaccess
      - ./public_html/index.php:/var/www/html/index.php
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_NAME: ${MYSQL_DATABASE}
      WORDPRESS_DB_USER: ${MYSQL_USER}
      WORDPRESS_DB_PASSWORD: ${MYSQL_PASSWORD}

  phpmyadmin:
    image: phpmyadmin/phpmyadmin:latest
    depends_on:
      - db
    ports:
      - 8888:80
    environment:
      PMA_HOST: db
      PMA_USER: ${MYSQL_USER}
      PMA_PASSWORD: ${MYSQL_PASSWORD}

  db:
    image: mariadb:10.5
    volumes:
      - db-volume:/var/lib/mysql
    environment:
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_USER: ${MYSQL_USER}
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      TZ: Asia/Tokyo

volumes:
  db-volume:

DockerでphpMyAdminの環境を構築し、DBに10M程度のデータをインポートしようとしたのですが、以下のエラーが発生しました。

Warning: POST Content-Length of xxxxxxx bytes exceeds the limit of xxxxxxx bytes in Unknown on line 0

アップロードしようとしたファイル容量が、PHP設定の上限を超えてるようです。

この場合、PHPの以下の設定項目を調整すればよいのですが、、

  • memory_limit
  • post_max_size
  • upload_max_filesize

過去記事を参考にphp.iniを設置してみますが、なかなかコンテナに設定が反映されません。
phpMyAdminなどPHPシステムで扱えるファイルの最大サイズを変更する

Windows 10 HomeにDocker Desktopをインストールします。

過去の記事にも書きましたが、WindowsにDockerをインストールするには、以下のシステム要件を満たす必要があります。
Windows Subsystem for Linux 2(WSL 2)をインストールしてみる

  • Windows 10のバージョンが2004以上
  • WSL2(Windows Subsystem for Linux 2)がインストール済み
  • CPUが仮想化に対応していること

ちなみに、今回検証した環境は、Windows 10 Home バージョン21H1です。

Docker Desktopをインストール

以下のページの「Docker Desktop for Windows」をクリックして、インストーラー「Docker Desktop Installer.exe」をダウンロードします。
Install Docker Desktop on Windows | Docker Documentation

ダウンロードしたファイルをクリックして、インストールを実行します。
インストールは簡単で、細かいオプション選択などはありません。
ダウンロードとインストールには少々時間がかかります。私の場合、5分ほどかかりました。また、インストールにはOSの再起動が必要です。

以下の画面が表示されて、インストール完了です。

最近の世界情勢の影響なのかスパムが多くなった気がするので、reCAPTCHAを使ってフォームのスパム対策を実装してみます。

reCAPTCHAとはGoogleが提供するスパム対策サービスです。
reCAPTCHA  |  Google Developers

お問い合わせフォームや、会員登録フォームなどに設置される「私はロボットではありません」チェックボックスや、9枚ほど画像が表示されて「この中から車の画像を全て選択してください」というやつですね。
これらはreCAPTCHA v2で、ユーザの操作や判断の手間が1つ増えることになります。人によっては、この手間が不快に感じる方もいらっしゃるはずです。コンバージョン率低下の懸念がありますね。
それに対して、reCAPTCHA v3はプログラム側(AI)でスパムかどうかを判断するので、ユーザへの影響はほとんどありません。

サイト登録

Goolgeアカウントでサインインした状態で、以下のページにアクセスします。
reCAPTCHA
メニュー「v3 Admin Console」をクリックして、サイトを登録します。

  • ラベルには任意で分かりやすいラベル名をセットします
  • reCAPTCHAタイプは「reCAPTCHA v3」を選択します
  • ドメインにはAPIを使用するドメインをセットします。ローカルで開発、テストなどする場合は「localhost」も有効です。

利用条件に同意して送信します。送信時に発行される「サイトキー」と「シークレットキー」を控えておきます。

Monthly Archives