{"id":12196,"date":"2023-12-17T07:00:58","date_gmt":"2023-12-16T22:00:58","guid":{"rendered":"https:\/\/blog.capilano-fw.com\/?p=12196"},"modified":"2023-11-24T18:34:53","modified_gmt":"2023-11-24T09:34:53","slug":"laravel-pusher-%e3%81%a7%e3%83%aa%e3%82%a2%e3%83%ab%e3%82%bf%e3%82%a4%e3%83%a0%e3%81%aa%e4%bd%8d%e7%bd%ae%e6%83%85%e5%a0%b1%e3%81%ae%e5%85%b1%e6%9c%89%e3%82%b7%e3%82%b9%e3%83%86%e3%83%a0%e3%82%92","status":"publish","type":"post","link":"https:\/\/blog.capilano-fw.com\/?p=12196","title":{"rendered":"Laravel + Pusher \u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306a\u4f4d\u7f6e\u60c5\u5831\u306e\u5171\u6709\u30b7\u30b9\u30c6\u30e0\u3092\u3064\u304f\u308b"},"content":{"rendered":"

\u3055\u3066\u3055\u3066\u3001\u3053\u308c\u306f\u500b\u4eba\u7684\u306b\u306f\u300c\u3048\u3001\u305d\u3053\u307e\u3067\u3059\u308b\u3093\u3060\u2026\ud83d\ude05<\/strong>\u300d\u3068\u3044\u3046\u6c17\u6301\u3061\u306b\u306a\u3063\u3066\u3057\u307e\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u3042\u308b\u300c\u30b0\u30eb\u30fc\u30d7\u5185\u3067\u5229\u7528\u3055\u308c\u308b\u3068\u8a00\u308f\u308c\u308b\u300d\u6a5f\u80fd\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n

\u305d\u308c\u304c\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n

\u4f4d\u7f6e\u60c5\u5831\u306e\u5171\u6709\u30b7\u30b9\u30c6\u30e0<\/strong><\/p>\n

\u3067\u3059\u3002<\/p>\n

\u3064\u307e\u308a\u3001\u7279\u5b9a\u306e\u30b0\u30eb\u30fc\u30d7\u3084\u30ab\u30c3\u30d7\u30eb\u9593\u3067\u300c\u3042\u3001\u4eca A\u3055\u3093\u306f\u99c5\u306b\u3044\u308b\u306a<\/strong>\u300d\u3068\u3044\u3046\u306e\u304c\u5206\u304b\u308b\u30b7\u30b9\u30c6\u30e0\u3067\u3059\u3002<\/p>\n

\u500b\u4eba\u7684\u306b\u306f\uff08\u3084\u307e\u3057\u3044\u3053\u3068\u306f\u3057\u3066\u307e\u305b\u3093\u304c\u2757\uff09\u81ea\u5206\u306e\u4f4d\u7f6e\u60c5\u5831\u3092\u8ab0\u304b\u3068\u30b7\u30a7\u30a2\u3055\u308c\u308b\u306e\u306f\u7aae\u5c48\u306a\u30a4\u30e1\u30fc\u30b8\u3067\u3059\u304c\u3001\u707d\u5bb3\u6642\u3092\u60f3\u5b9a\u3057\u305f\u3082\u306e\u3082\u3042\u308b\u3088\u3046\u3067\u4f7f\u3044\u65b9\u6b21\u7b2c\u306a\u306e\u304b\u306a\u3068\u3044\u3046\u5370\u8c61\u3067\u3057\u305f\u3002<\/p>\n

\u305d\u3053\u3067\u2757<\/p>\n

\u4eca\u56de\u306f\u300cLaravel + Alpine.js<\/strong>\u300d\u3092\u4f7f\u3063\u3066\u3053\u306e\u300c\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306a\u4f4d\u7f6e\u60c5\u5831\u306e\u5171\u6709\u30b7\u30b9\u30c6\u30e0<\/strong>\u300d\u3092\u3064\u304f\u3063\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n

\u305c\u3072\u4f55\u304b\u306e\u53c2\u8003\u306b\u306a\u308a\u307e\u3057\u305f\u3089\u5b09\u3057\u3044\u3067\u3059\u3002\ud83d\ude04\u2728<\/p>\n

\"\"\u300c\u30d5\u30a1\u30df\u30b3\u30f3\u30df\u30cb\u306e\u672a\u4f7f\u7528\u30fb\u65b0\u54c1\u304c
\n\u30d7\u30ec\u30df\u30a2\u304c\u3064\u3044\u3066
\n50,000\u5186 \u3067\u58f2\u3089\u308c\u3066\u307e\u3057\u305f \ud83d\ude2f\u300d<\/p>\n

\u958b\u767a\u74b0\u5883\uff1a<\/strong> Laravel 10.x\u3001Alpine.js<\/p>\n

\u524d\u63d0\u3068\u3057\u3066<\/h1>\n

\u30d6\u30e9\u30a6\u30b6\u3067\u4f4d\u7f6e\u60c5\u5831\u3092\u53d6\u5f97\u3059\u308b\u306b\u306f\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u3067\u3042\u3063\u3066\u3082https<\/code>\u63a5\u7d9a\u304c\u5fc5\u8981\u3067\u3059\u3002\uff08\u3061\u306a\u307f\u306b\u3001self.crypto.randomUUID()<\/code>\u00a0\u3082\u3067\u3059\uff09<\/p>\n

\u5148\u306b\u74b0\u5883\u3092\u6574\u3048\u3066\u304b\u3089\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002\ud83d\ude04\ud83d\udc4d<\/p>\n

\u307e\u305f\u3001\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u5bfe\u5fdc\u3059\u308b\u305f\u3081\u306b Pusher<\/a><\/strong> \u3092\u5229\u7528\u3057\u307e\u3059\u3002<\/p>\n

\u3053\u3061\u3089\u3082\uff08\u3061\u3087\u3063\u3068\u53e4\u3044\u8a18\u4e8b\u3067\u3059\u304c\uff09\u4ee5\u4e0b\u306e\u30da\u30fc\u30b8\u3092\u53c2\u8003\u306b\u3057\u3066Pusher<\/code>\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u305f\u3081\u306b\u5fc5\u8981\u306a\u30ad\u30fc\u3092\u53d6\u5f97\u3057\u3066\u304a\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

\ud83d\udcdd \u53c2\u8003\u30da\u30fc\u30b8\uff1a<\/strong>\u00a0\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u66f4\u65b0\u3059\u308b\u90e8\u5206\u3092\u3064\u304f\u308b<\/a><\/p>\n

\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<\/h1>\n

\u307e\u305a\u306f\u4eca\u56de\u5fc5\u8981\u306b\u306a\u308b\u4ee5\u4e0b\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u5148\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n

\n
composer require pusher\/pusher-php-server<\/strong><\/pre>\n
\n
npm install --save-dev laravel-echo pusher-js leaflet<\/strong><\/pre>\n<\/div>\n<\/div>\n
Laravel Echo \u304c\u4f7f\u3048\u308b\u3088\u3046\u306b\u3059\u308b<\/h1>\n
Pusher<\/code>\u306fLaravel Echo<\/code>\u3092\u4f7f\u3063\u3066\u30a2\u30af\u30bb\u30b9\u3059\u308b\u306e\u3067\u3059\u304c\u3001\u521d\u671f\u72b6\u614b\u3067\u306f\u6709\u52b9\u306b\u306a\u3063\u3066\u3044\u306a\u3044\u306e\u3067\u3001\u6709\u52b9\u306b\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n
\u307e\u305a\u3001Pusher<\/code>\u3067\u30c1\u30e3\u30f3\u30cd\u30eb\u3092\u4f5c\u3063\u305f\u3089.env<\/code>\u306e\u4ee5\u4e0b\u306e\u90e8\u5206\u3092\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n
.env<\/strong><\/p>\n
\n
BROADCAST_DRIVER=pusher<\/strong>\r\n\r\n\/\/ \u7701\u7565\r\n\r\nPUSHER_APP_ID=*******************<\/strong>\r\nPUSHER_APP_KEY=*******************<\/strong>\r\nPUSHER_APP_SECRET=*******************<\/strong>\r\n\r\n\/\/ \u7701\u7565\r\n\r\nPUSHER_APP_CLUSTER=ap3<\/strong><\/pre>\n
Laravel Echo<\/code>\u306e\u300c\u3059\u3067\u306b\u30b3\u30fc\u30c9\u306f\u5b58\u5728\u3057\u3066\u3044\u308b\u3051\u3069\u3001\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\u3055\u308c\u3066\u3044\u308b\u90e8\u5206<\/strong>\u300d\u306e\u30b3\u30e1\u30f3\u30c8\u3092\u89e3\u9664\u3057\u307e\u3059\u3002<\/p>\n
resources\/js\/bootstrap.js<\/strong><\/p>\n
\n
\/\/ \u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u306f\u521d\u671f\u72b6\u614b\u3067\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\u3055\u308c\u3066\u307e\u3059\u304c\u89e3\u9664\u3057\u307e\u3059\r\n\r\nimport Echo from 'laravel-echo';<\/strong>\r\n\r\nimport Pusher from 'pusher-js';<\/strong>\r\nwindow.Pusher = Pusher;<\/strong>\r\n\r\nwindow.Echo = new Echo({<\/strong>\r\n    broadcaster: 'pusher',<\/strong>\r\n    key: import.meta.env.VITE_PUSHER_APP_KEY,<\/strong>\r\n    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',<\/strong>\r\n    wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,<\/strong>\r\n    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,<\/strong>\r\n    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,<\/strong>\r\n    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',<\/strong>\r\n    enabledTransports: ['ws', 'wss'],\r\n    authEndpoint: '\/user_location\/auth', \/\/ \ud83d\udc48 \u72ec\u81ea\u306e\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u307e\u3057\u305f<\/strong>\r\n});<\/strong><\/pre>\n
\u203b \u3061\u306a\u307f\u306b\u3001\u4eca\u56de\u306f\u8a18\u4e8b\u304c\u8907\u96d1\u306b\u306a\u308a\u3059\u304e\u3066\u3057\u307e\u3046\u3068\u601d\u3063\u305f\u306e\u3067\u3001\u72ec\u81ea\u306e\u8a8d\u8a3c\u7528\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u3066\uff11\u3064\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u5185\u3067\u5b8c\u7d50\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/span><\/p>\n
\u306a\u304a\u3001\u8a8d\u8a3c\u7528\u306e\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306fCSRF<\/code>\u30c8\u30fc\u30af\u30f3\u306e\u30c1\u30a7\u30c3\u30af\u3092\u5916\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n
app\/Http\/Middleware\/VerifyCsrfToken.php<\/strong><\/p>\n
\n
<?php\r\n\r\nnamespace App\\Http\\Middleware;\r\n\r\nuse Illuminate\\Foundation\\Http\\Middleware\\VerifyCsrfToken as Middleware;\r\n\r\nclass VerifyCsrfToken extends Middleware\r\n{\r\n    \/**\r\n     * The URIs that should be excluded from CSRF verification.\r\n     *\r\n     * @var array<int, string>\r\n     *\/\r\n    protected $except = [\r\n        'user_location\/auth', \/\/ \ud83d\udc48 \u3053\u3053\u3092\u8ffd\u52a0\u3057\u307e\u3057\u305f<\/strong>\r\n    ];\r\n}<\/pre>\n
Leaflet \u304c\u4f7f\u3048\u308b\u3088\u3046\u306b\u3059\u308b<\/h1>\n
Leaflet<\/code>\u306f\u5730\u56f3\u306e\u305f\u3081\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u304c\u3001\u3053\u308c\u3082\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u3060\u3051\u3067\u306f\u6709\u52b9\u306b\u306f\u306a\u3063\u3066\u3044\u306a\u3044\u306e\u3067\u3001\u5148\u307b\u3069\u306eLaravel Echo<\/code>\u306e\u4e0b\u3042\u305f\u308a\u306b\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
resources\/js\/bootstrap.js<\/strong><\/p>\n
\n
\/\/ \u7701\u7565\r\n\r\n\/\/ \u5730\u56f3\r\nimport L from 'leaflet';<\/strong>\r\nimport 'leaflet\/dist\/leaflet.css';<\/strong>\r\nimport markerIcon from 'leaflet\/dist\/images\/marker-icon.png';<\/strong>\r\nwindow.markerIcon = markerIcon;<\/strong><\/pre>\n<\/div>\n
\u30d3\u30eb\u30c9\u3059\u308b<\/h1>\n<\/div>\n
\u3067\u306f\u3001\u6e96\u5099\u304c\u6574\u3044\u307e\u3057\u305f\u306e\u3067\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u30d3\u30eb\u30c9\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n
\n
npm run build<\/strong><\/pre>\n
\u3053\u308c\u3067\u4ee5\u4e0b\u3092blade<\/code>\u5185\u306b\u30bb\u30c3\u30c8\u3059\u308c\u3070\u81ea\u52d5\u7684\u306b\u30d3\u30eb\u30c9\u3057\u305fjs<\/code>\u3084css<\/code>\u306b\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u3001\u5148\u307b\u3069\u306eLaravel Echo<\/code>\u3084Leaflet<\/code>\u3060\u3051\u3067\u306a\u304f\u3001axios<\/code>\u3084Alpine.js<\/code>\u3082\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\n
@vite(['resources\/css\/app.css', 'resources\/js\/app.js'])<\/strong><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\u30e2\u30c7\u30eb\uff06\u30de\u30a4\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u3064\u304f\u308b<\/h1>\n
\u3067\u306f\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u5468\u308a\u3092\u3064\u304f\u308a\u307e\u3059\u3002
\n\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\n
php artisan make:model UserLocation -m<\/strong><\/pre>\n<\/div>\n
\u3059\u308b\u3068\uff12\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u3001\u4e2d\u8eab\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n
app\/Models\/UserLocation.php<\/strong><\/p>\n
\n
<?php<\/strong>\r\n\r\nnamespace App\\Models;<\/strong>\r\n\r\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;<\/strong>\r\nuse Illuminate\\Database\\Eloquent\\Model;<\/strong>\r\nuse Illuminate\\Support\\Str;<\/strong>\r\n\r\nclass UserLocation extends Model<\/strong>\r\n{<\/strong>\r\n    use HasFactory;<\/strong>\r\n\r\n    protected $fillable = [<\/strong>\r\n        'uuid',<\/strong>\r\n        'name',<\/strong>\r\n        'latitude',<\/strong>\r\n        'longitude',<\/strong>\r\n    ];<\/strong>\r\n\r\n    \/\/ Accessor<\/strong>\r\n    public function getNameAttribute($value)<\/strong>\r\n    {<\/strong>\r\n        return (Str::length($value) === 0) ? '\u540d\u524d\u306a\u3057' : $value;<\/strong>\r\n    }<\/strong>\r\n}<\/strong><\/pre>\n<\/div>\n
database\/migrations\/****_**_**_******_create_user_locations_table.php<\/strong><\/p>\n
\n
\/\/ \u7701\u7565\r\n\r\npublic function up(): void\r\n{\r\n    Schema::create('user_locations', function (Blueprint $table) {\r\n        $table->id();<\/strong>\r\n        $table->uuid('uuid')->unique()->comment('UUID');<\/strong>\r\n        $table->string('name')->nullable()->comment('\u540d\u524d');<\/strong>\r\n        $table->decimal('latitude', 10, 7)->comment('\u7def\u5ea6');<\/strong>\r\n        $table->decimal('longitude', 10, 7)->comment('\u7d4c\u5ea6');<\/strong>\r\n        $table->timestamps();<\/strong>\r\n    });\r\n}\r\n\r\n\/\/ \u7701\u7565<\/pre>\n<\/div>\n
\u3067\u306f\u3001\u3053\u306e\u72b6\u614b\u3067\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3092\u521d\u671f\u5316\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002
\n\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\n
php artisan migrate<\/strong><\/pre>\n<\/div>\n
\u3059\u308b\u3068\u3001\u5b9f\u969b\u306e\u30c6\u30fc\u30d6\u30eb\u306f\u3053\u3046\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n
\"\"<\/p>\n
\u4f4d\u7f6e\u30c7\u30fc\u30bf\u306e\u305f\u3081\u306e\u72ec\u81ea\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u3064\u304f\u308b<\/h1>\n
\u3067\u306f\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u4f5c\u6210\u3059\u308b\u524d\u306b\u3001\u4f4d\u7f6e\u60c5\u5831\uff08\u4f8b\uff1a 35.710054<\/code>\u3001 139.811226<\/code>\uff09\u304c\u6b63\u3057\u3044\u5f62\u5f0f\u304b\u3069\u3046\u304b\u3092\u30c1\u30a7\u30c3\u30af\u3059\u308b\u72ec\u81ea\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30fb\u30eb\u30fc\u30eb\u3092\u3064\u304f\u3063\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n
\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\n
php artisan make:rule Location<\/strong><\/pre>\n<\/div>\n
\u3059\u308b\u3068\u3001app\/Rules<\/code>\u306b\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u4e2d\u8eab\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n
app\/Rules\/Location.php<\/strong><\/p>\n
\n
<?php<\/strong>\r\n\r\nnamespace App\\Rules;<\/strong>\r\n\r\nuse Closure;<\/strong>\r\nuse Illuminate\\Contracts\\Validation\\ValidationRule;<\/strong>\r\n\r\nclass Location implements ValidationRule<\/strong>\r\n{<\/strong>\r\n    public function __construct(private string $mode)<\/strong>\r\n    {}<\/strong>\r\n\r\n    public function validate(string $attribute, mixed $value, Closure $fail): void<\/strong>\r\n    {<\/strong>\r\n        $valid_modes = ['latitude', 'longitude'];<\/strong>\r\n\r\n        if(! in_array($this->mode, $valid_modes, true)) {<\/strong>\r\n\r\n            throw new \\Exception('$mode \u304c\u6b63\u3057\u304f\u3042\u308a\u307e\u305b\u3093');<\/strong>\r\n\r\n        }<\/strong>\r\n\r\n        $patterns = [<\/strong>\r\n            'latitude' => '\/^-?([1-8]?[1-9]|[1-9]0)(\\.{1}\\d{1,6})?\/',<\/strong>\r\n            'longitude' => '\/^-?([1]?[1-7][1-9]|[1]?[1-8][0]|[1-9]?[0-9])(\\.{1}\\d{1,6})?\/',<\/strong>\r\n        ];<\/strong>\r\n\r\n        if($this->mode === 'latitude' && preg_match($patterns['latitude'], $value)) {<\/strong>\r\n\r\n            return; \/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u901a\u904e<\/strong>\r\n\r\n        } elseif($this->mode === 'longitude' && preg_match($patterns['longitude'], $value)) {<\/strong>\r\n\r\n            return; \/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u901a\u904e<\/strong>\r\n\r\n        }<\/strong>\r\n\r\n        $fail('\u7def\u5ea6\u307e\u305f\u306f\u7d4c\u5ea6\u306e\u5f62\u5f0f\u304c\u6b63\u3057\u304f\u3042\u308a\u307e\u305b\u3093'); \/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30a8\u30e9\u30fc<\/strong>\r\n    }<\/strong>\r\n}<\/strong><\/pre>\n
\u3061\u306a\u307f\u306b\u6b63\u898f\u8868\u73fe\u304c\u6b63\u3057\u304f\u52d5\u304f\u304b\u3069\u3046\u304b\u3092\u30c1\u30a7\u30c3\u30af\u3059\u308b\u306b\u306f\u3001regex101<\/a><\/strong> \u304c\u4fbf\u5229\u3067\u3059\u3002\u30ed\u30b0\u30a4\u30f3\u306a\u3057\u3067\u4f7f\u3048\u307e\u3059\u3088\ud83d\udc4d<\/p>\n<\/div>\n
API \u30ea\u30bd\u30fc\u30b9\u3092\u3064\u304f\u308b<\/h1>\n
\u305b\u3063\u304b\u304f\u306a\u306e\u3067\u300cAPI \u30ea\u30bd\u30fc\u30b9<\/strong>\u300d\u3092\u4f5c\u3063\u3066\u300c\u5916\u306b\u51fa\u308b\u30c7\u30fc\u30bf\u3092\u53d6\u6368\u9078\u629e<\/strong>\u300d\u3082\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
\u4f8b\u3048\u3070\u3001\u8ab0\u3067\u3082\u95b2\u89a7\u304c\u3067\u304d\u308b\u30da\u30fc\u30b8\u3067\u4f4f\u6240\u3084\u96fb\u8a71\u756a\u53f7\u306e\u3088\u3046\u306a\u300c\u91cd\u8981\u306a\u30c7\u30fc\u30bf\u300d\u304c\u542b\u307e\u308c\u3066\u3044\u305f\u3089\u56f0\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3088\u306d\u3002<\/p>\n
\u305d\u3093\u306a\u3068\u304d\u300cAPI \u30ea\u30bd\u30fc\u30b9<\/strong>\u300d\u3092\u4f7f\u3048\u3070\u300c\u3053\u308c\u3068\u3053\u308c\u3001\u3042\u3068\u306f\u3053\u3053\u306e\u30c7\u30fc\u30bf\u3060\u3051 OK<\/strong>\u300d\u306e\u3088\u3046\u306b\u30c7\u30fc\u30bf\u306e\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
\uff08\u5143\u30c7\u30fc\u30bf\uff09<\/strong><\/p>\n
\n
[\r\n    'name' => '\u5c71\u7530\u592a\u90ce',<\/strong>\r\n    'address' => '\u6771\u4eac\u90fd\u25cf\u25cf\u533a\u25cf\u25cf...',<\/strong>\r\n    'tel' => '090-1234-5678',<\/strong>\r\n]<\/pre>\n
\uff08API \u30ea\u30bd\u30fc\u30b9\u306b\u3088\u308b\u30d5\u30a3\u30eb\u30bf\u30fc\u5f8c\uff09<\/strong><\/p>\n
\n
[\r\n    'name' => '\u5c71\u7530\u592a\u90ce',<\/strong>\r\n]<\/pre>\n<\/div>\n<\/div>\n
\u3067\u306f\u5c11\u3057\u8aac\u660e\u304c\u9577\u304f\u306a\u308a\u307e\u3057\u305f\u304c\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\n
php artisan make:resource UserLocationResource<\/strong><\/pre>\n
\u3059\u308b\u3068\u3001app\/Http\/Resources<\/code>\u30d5\u30a9\u30eb\u30c0\u306b\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u4e2d\u8eab\u3092\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<\/div>\n
app\/Http\/Resources\/UserLocationResource.php<\/strong><\/p>\n
\n
<?php<\/strong>\r\n\r\nnamespace App\\Http\\Resources;<\/strong>\r\n\r\nuse Illuminate\\Http\\Request;<\/strong>\r\nuse Illuminate\\Http\\Resources\\Json\\JsonResource;<\/strong>\r\n\r\nclass UserLocationResource extends JsonResource<\/strong>\r\n{<\/strong>\r\n    \/**<\/strong>\r\n     * Transform the resource into an array.<\/strong>\r\n     *<\/strong>\r\n     * @return array<string, mixed><\/strong>\r\n     *\/<\/strong>\r\n    public function toArray(Request $request): array<\/strong>\r\n    {<\/strong>\r\n        return [<\/strong>\r\n            'id' => $this->id,<\/strong>\r\n            'name' => $this->name,<\/strong>\r\n            'latitude' => $this->latitude,<\/strong>\r\n            'longitude' => $this->longitude,<\/strong>\r\n        ];<\/strong>\r\n    }<\/strong>\r\n}<\/strong><\/pre>\n<\/div>\n
Pusher \u306e\u7528\u30a4\u30d9\u30f3\u30c8\u3092\u3064\u304f\u308b<\/h1>\n
\u3053\u308c\u3082\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u5185\u3067\u4f7f\u3046\u3053\u3068\u306b\u306a\u308bPusher<\/code>\u7528\u306e\u300c\u30a4\u30d9\u30f3\u30c8\u300d\u3092\u3064\u304f\u308a\u307e\u3059\u3002\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\n
php artisan make:event UserLocationUpdated<\/strong><\/pre>\n
\u3059\u308b\u3068\u3001app\/Events<\/code>\u306b\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u4e2d\u8eab\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002\uff08\u592a\u5b57\u90e8\u5206\u3092\u8ffd\u52a0\u3057\u307e\u3057\u305f\uff09<\/p>\n
app\/Events\/UserLocationUpdated.php<\/strong><\/p>\n
\n
<?php\r\n\r\nnamespace App\\Events;\r\n\r\nuse Illuminate\\Broadcasting\\Channel;\r\nuse Illuminate\\Broadcasting\\InteractsWithSockets;\r\nuse Illuminate\\Broadcasting\\PresenceChannel;\r\nuse Illuminate\\Broadcasting\\PrivateChannel;\r\nuse Illuminate\\Contracts\\Broadcasting\\ShouldBroadcast;\r\nuse Illuminate\\Foundation\\Events\\Dispatchable;\r\nuse Illuminate\\Queue\\SerializesModels;\r\n\r\nclass UserLocationUpdated implements ShouldBroadcast<\/strong>\r\n{\r\n    use Dispatchable, InteractsWithSockets, SerializesModels;\r\n\r\n    \/**\r\n     * Create a new event instance.\r\n     *\/\r\n    public function __construct()\r\n    {\r\n        \/\/\r\n    }\r\n\r\n    \/**\r\n     * Get the channels the event should broadcast on.\r\n     *\r\n     * @return array<int, \\Illuminate\\Broadcasting\\Channel>\r\n     *\/\r\n    public function broadcastOn(): array\r\n    {\r\n        return [<\/strong>\r\n            new PrivateChannel('user-location-updated'),<\/strong>\r\n        ];<\/strong>\r\n    }\r\n}<\/pre>\n<\/div>\n<\/div>\n
\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u3064\u304f\u308b<\/h1>\n
\u3067\u306f\u3001\u6b21\u306f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u3064\u304f\u308a\u307e\u3057\u3087\u3046\u3002
\n\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\n
php artisan make:controller UserLocationController<\/strong><\/pre>\n<\/div>\n
\u3059\u308b\u3068\u3001app\/Http\/Controllers<\/code>\u306b\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u4e2d\u8eab\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
app\/Http\/Controllers\/UserLocationController.php<\/strong><\/p>\n
\n
<?php<\/strong>\r\n\r\nnamespace App\\Http\\Controllers;<\/strong>\r\n\r\nuse App\\Events\\UserLocationUpdated;<\/strong>\r\nuse App\\Http\\Resources\\UserLocationResource;<\/strong>\r\nuse App\\Models\\UserLocation;<\/strong>\r\nuse App\\Rules\\Location;<\/strong>\r\nuse Illuminate\\Http\\Request;<\/strong>\r\nuse Pusher\\Pusher;<\/strong>\r\n\r\nclass UserLocationController extends Controller<\/strong>\r\n{<\/strong>\r\n    public function index()<\/strong>\r\n    {<\/strong>\r\n        return view('user_location.index');<\/strong>\r\n    }<\/strong>\r\n\r\n    public function list()<\/strong>\r\n    {<\/strong>\r\n        $minutes = 10; \/\/ \u672c\u6765\u306f config \u306a\u3069\u306b\u5165\u308c\u3066\u304a\u304f\u3079\u304d\u3067\u3059<\/strong>\r\n        $base_dt = now()->subMinutes($minutes);<\/strong>\r\n        $user_locations = UserLocation::query()<\/strong>\r\n            ->where('updated_at', '>=', $base_dt) \/\/ 5\u5206\u4ee5\u5185\u306b\u66f4\u65b0\u3055\u308c\u305f\u30c7\u30fc\u30bf\u3060\u3051\u53d6\u5f97<\/strong>\r\n            ->get();<\/strong>\r\n\r\n        UserLocationResource::withoutWrapping(); \/\/ \u521d\u671f\u72b6\u614b\u3067\u306f\u3001data \u3068\u3044\u3046\u30ad\u30fc\u3067\u30c7\u30fc\u30bf\u304c\u8fd4\u3063\u3066\u304d\u307e\u3059\u304c\u3001\u3081\u3093\u3069\u3046\u306a\u306e\u3067\u6d88\u3057\u307e\u3059<\/strong>\r\n\r\n        return UserLocationResource::collection($user_locations);<\/strong>\r\n    }<\/strong>\r\n\r\n    public function create(Request $request)<\/strong>\r\n    {<\/strong>\r\n        $validated_data = $request->validate([<\/strong>\r\n            'uuid' => 'required|uuid',<\/strong>\r\n            'name' => 'nullable|string|max:255',<\/strong>\r\n            'latitude' => new Location('latitude'),<\/strong>\r\n            'longitude' => new Location('longitude'),<\/strong>\r\n        ]);<\/strong>\r\n\r\n        $uuid = $validated_data['uuid'];<\/strong>\r\n        $user_location = UserLocation::firstOrCreate(<\/strong>\r\n            ['uuid' => $uuid], \/\/ UUID \u304c\u4e00\u81f4\u3059\u308b\u30c7\u30fc\u30bf\u3092\u63a2\u3059<\/strong>\r\n            $validated_data    \/\/ \u898b\u3064\u304b\u3089\u306a\u304b\u3063\u305f\u3089\u3001\u4f5c\u6210<\/strong>\r\n        );<\/strong>\r\n        $result = $user_location->update($validated_data);<\/strong>\r\n\r\n        UserLocationUpdated::dispatch();<\/strong>\r\n\r\n        return ['result' => $result];<\/strong>\r\n    }<\/strong>\r\n\r\n    public function auth() \/\/ Pusher \u306b\u8a8d\u8a3c\u3059\u308b\u305f\u3081\u306e\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8<\/strong>\r\n    {<\/strong>\r\n        $pusher = new Pusher(<\/strong>\r\n            config('broadcasting.connections.pusher.key'),<\/strong>\r\n            config('broadcasting.connections.pusher.secret'),<\/strong>\r\n            config('broadcasting.connections.pusher.app_id'),<\/strong>\r\n        );<\/strong>\r\n        $request = request();<\/strong>\r\n        $channel_name = $request->channel_name;<\/strong>\r\n        $socket_id = $request->socket_id;<\/strong>\r\n\r\n        return $pusher->authorizeChannel($channel_name, $socket_id);<\/strong>\r\n    }<\/strong>\r\n}<\/strong><\/pre>\n<\/div>\n
\u30d3\u30e5\u30fc\u3092\u3064\u304f\u308b<\/h1>\n
\u7d9a\u3044\u3066\u3001\u5148\u307b\u3069\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u4e2d\u3067\u30bb\u30c3\u30c8\u3057\u305f\u300c\u30d3\u30e5\u30fc<\/strong>\u300d\u3092\u3064\u304f\u308a\u307e\u3059\u3002
\n\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002\uff08\u30b3\u30de\u30f3\u30c9\u3067\u30d3\u30e5\u30fc\u304c\u4f5c\u6210\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u4fbf\u5229\u3067\u3059\u306d \ud83d\udc4d\uff09<\/p>\n
\n
php artisan make:view user_location.index<\/strong><\/pre>\n<\/div>\n
\u3059\u308b\u3068\u3001resources\/views\/user_location<\/code>\u306b\u30d3\u30e5\u30fc\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u4e2d\u8eab\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n
resources\/views\/user_location\/index.blade.php<\/strong><\/p>\n
\n
<!DOCTYPE html><\/strong>\r\n<html lang=\"ja\"><\/strong>\r\n<head><\/strong>\r\n    <meta charset=\"UTF-8\"><\/strong>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/strong>\r\n    <title>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306a\u4f4d\u7f6e\u60c5\u5831\u306e\u5171\u6709\u30b7\u30b9\u30c6\u30e0<\/title><\/strong>\r\n    @vite(['resources\/css\/app.css', 'resources\/js\/app.js'])<\/strong>\r\n<\/head><\/strong>\r\n<body><\/strong>\r\n<div class=\"flex flex-col\" x-data=\"userLocation\"><\/strong>\r\n    <!-- \u5730\u56f3\u306e\u30bb\u30af\u30b7\u30e7\u30f3 --><\/strong>\r\n    <div class=\"flex-grow bg-gray-200\"><\/strong>\r\n        <div class=\"p-4 text-center\"><\/strong>\r\n            <div id=\"map\" style=\"height:350px;\"><\/div> <!-- \u30b5\u30a4\u30ba\u8abf\u6574 --><\/strong>\r\n        <\/div><\/strong>\r\n    <\/div><\/strong>\r\n\r\n    <!-- \u5165\u529b\u30d5\u30a9\u30fc\u30e0\u3068\u30dc\u30bf\u30f3\u306e\u30bb\u30af\u30b7\u30e7\u30f3 --><\/strong>\r\n    <div class=\"bg-white p-4\"><\/strong>\r\n        <div class=\"mb-4\"><\/strong>\r\n            <label for=\"name\" class=\"block text-gray-700 text-sm font-bold mb-2\">\u540d\u524d\uff1a<\/label><\/strong>\r\n            <input<\/strong>\r\n                type=\"text\"<\/strong>\r\n                class=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\"<\/strong>\r\n                placeholder=\"\u540d\u524d\u3092\u5165\u529b\"<\/strong>\r\n                x-model=\"params.name\"><\/strong>\r\n        <\/div><\/strong>\r\n        <div class=\"mb-4\"><\/strong>\r\n            <template x-if=\"isSharingLocation\"><\/strong>\r\n                <button<\/strong>\r\n                    class=\"bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline\"<\/strong>\r\n                    type=\"button\"<\/strong>\r\n                    @click=\"onStop\"><\/strong>\r\n                    \u4f4d\u7f6e\u60c5\u5831\u3092\u5171\u6709\u505c\u6b62<\/strong>\r\n                <\/button><\/strong>\r\n            <\/template><\/strong>\r\n            <template x-if=\"! isSharingLocation\"><\/strong>\r\n                <button<\/strong>\r\n                    class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline\"<\/strong>\r\n                    type=\"button\"<\/strong>\r\n                    @click=\"onStart\"><\/strong>\r\n                    \u4f4d\u7f6e\u60c5\u5831\u3092\u5171\u6709\u3059\u308b<\/strong>\r\n                <\/button><\/strong>\r\n            <\/template><\/strong>\r\n        <\/div><\/strong>\r\n    <\/div><\/strong>\r\n\r\n    <!-- \u30e6\u30fc\u30b6\u30fc\u30ea\u30b9\u30c8\u306e\u30bb\u30af\u30b7\u30e7\u30f3 --><\/strong>\r\n    <div class=\"bg-white p-4\"><\/strong>\r\n        <h2 class=\"text-xl font-semibold mb-2 text-gray-800\">\u30e6\u30fc\u30b6\u30fc\u30ea\u30b9\u30c8<\/h2><\/strong>\r\n        <template x-if=\"userLocations.length === 0\"><\/strong>\r\n            <p>\u30e6\u30fc\u30b6\u30fc\u306f\u3044\u307e\u305b\u3093<\/p><\/strong>\r\n        <\/template><\/strong>\r\n        <template x-if=\"userLocations.length > 0\"><\/strong>\r\n            <ul><\/strong>\r\n                <template x-for=\"(userLocation) in userLocations\" :key=\"userLocation.id\"><\/strong>\r\n                    <li class=\"mb-2 p-2 border-b border-gray-200 hover:bg-gray-100 flex justify-between items-center\"><\/strong>\r\n                        <span x-text=\"userLocation.name\"><\/span><\/strong>\r\n                        <!-- \u300c\u73fe\u5728\u5730\u3078\u300d\u30dc\u30bf\u30f3 --><\/strong>\r\n                        <button<\/strong>\r\n                            class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded text-xs focus:outline-none focus:shadow-outline\"<\/strong>\r\n                            @click=\"onCurrentLocationClick(userLocation)\"><\/strong>\r\n                            \u73fe\u5728\u5730\u3078<\/strong>\r\n                        <\/button><\/strong>\r\n                    <\/li><\/strong>\r\n                <\/template><\/strong>\r\n            <\/ul><\/strong>\r\n        <\/template><\/strong>\r\n    <\/div><\/strong>\r\n<\/div><\/strong>\r\n<script><\/strong>\r\n\r\n    const userLocation = () => {<\/strong>\r\n\r\n        \/\/ Alpine.js \u306e\u4e2d\u3067\u4f7f\u3046\u3068\u30a8\u30e9\u30fc\u306b\u306a\u308b\u5834\u5408\u304c\u3042\u308b\u306e\u3067\u3001\u5916\u3067\u5b9a\u7fa9\u3059\u308b<\/strong>\r\n        let map = null;<\/strong>\r\n        let mapMarkers = [];<\/strong>\r\n\r\n        return {<\/strong>\r\n\r\n            \/\/ Data<\/strong>\r\n            params: {<\/strong>\r\n                uuid: '',<\/strong>\r\n                name: '',<\/strong>\r\n                latitude: '',<\/strong>\r\n                longitude: '',<\/strong>\r\n            },<\/strong>\r\n            userLocations: [],<\/strong>\r\n            isSharingLocation: false,<\/strong>\r\n            isInitialized: false,<\/strong>\r\n            locationWatchId: null,<\/strong>\r\n\r\n            \/\/ Methods<\/strong>\r\n            init() {<\/strong>\r\n\r\n                if(this.isInitialized === false) {<\/strong>\r\n\r\n                    this.initialized = true;<\/strong>\r\n                    this.initBroadcast();<\/strong>\r\n                    this.initUuid();<\/strong>\r\n                    this.initMap();<\/strong>\r\n                    this.getUserLocations();<\/strong>\r\n\r\n                }<\/strong>\r\n\r\n            },<\/strong>\r\n            initBroadcast() {<\/strong>\r\n\r\n                Echo.private('user-location-updated')<\/strong>\r\n                    .listen('UserLocationUpdated', () => {<\/strong>\r\n\r\n                        this.getUserLocations();<\/strong>\r\n\r\n                    });<\/strong>\r\n\r\n            },<\/strong>\r\n            initUuid() {<\/strong>\r\n\r\n                let uuid = localStorage.getItem('uuid');<\/strong>\r\n\r\n                if(! uuid) { \/\/ uuid \u304c\u306a\u3044\u3068\u304d<\/strong>\r\n\r\n                    uuid = self.crypto.randomUUID();<\/strong>\r\n                    localStorage.setItem('uuid', uuid);<\/strong>\r\n\r\n                }<\/strong>\r\n\r\n                this.params.uuid = uuid;<\/strong>\r\n\r\n            },<\/strong>\r\n            initMap() {<\/strong>\r\n\r\n                map = L.map('map').setView([35.680545109582106, 139.76822649218585], 13);<\/strong>\r\n                L.Marker.prototype.setIcon(L.icon({<\/strong>\r\n                    iconUrl: markerIcon,<\/strong>\r\n                    iconSize: [25, 41],<\/strong>\r\n                }));<\/strong>\r\n\r\n                L.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {<\/strong>\r\n                    maxZoom: 19,<\/strong>\r\n                    attribution: '&copy; <a href=\"http:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>'<\/strong>\r\n                }).addTo(map);<\/strong>\r\n\r\n            },<\/strong>\r\n            getUserLocations() {<\/strong>\r\n\r\n                const url = '\/user_location\/list';<\/strong>\r\n                axios.get(url)<\/strong>\r\n                    .then((response) => {<\/strong>\r\n\r\n                        this.userLocations = response.data;<\/strong>\r\n                        mapMarkers.forEach((marker) => marker.remove()); \/\/ \u30de\u30fc\u30ab\u30fc\u3092\u5168\u524a\u9664<\/strong>\r\n                        mapMarkers = [];<\/strong>\r\n\r\n                        let bounds = [];<\/strong>\r\n\r\n                        this.userLocations.forEach((userLocation) => {<\/strong>\r\n\r\n                            const latitude = userLocation.latitude;<\/strong>\r\n                            const longitude = userLocation.longitude;<\/strong>\r\n                            const mapMarker = L.marker([latitude, longitude])<\/strong>\r\n                                .addTo(map)<\/strong>\r\n                                .bindPopup(userLocation.name, { closeButton: false, autoClose: false }) \/\/ \u5e38\u306b\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u3092\u8868\u793a<\/strong>\r\n                                .openPopup();<\/strong>\r\n                            mapMarkers.push(mapMarker);<\/strong>\r\n\r\n                            bounds.push([latitude, longitude]);<\/strong>\r\n\r\n                        });<\/strong>\r\n\r\n                        map.fitBounds(bounds); \/\/ \u30de\u30fc\u30ab\u30fc\u304c\u5168\u3066\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u5730\u56f3\u306e\u8868\u793a\u3092\u81ea\u52d5\u3067\u5909\u66f4<\/strong>\r\n\r\n                    });<\/strong>\r\n\r\n            },<\/strong>\r\n            onWatchPositionSuccess(position) {<\/strong>\r\n\r\n                this.params.latitude = position.coords.latitude;<\/strong>\r\n                this.params.longitude = position.coords.longitude;<\/strong>\r\n                this.isSharingLocation = true;<\/strong>\r\n\r\n                const url = '\/user_location';<\/strong>\r\n                axios.post(url, this.params); \/\/ \u73fe\u5728\u306e\u4f4d\u7f6e\u60c5\u5831\u3092\u4fdd\u5b58<\/strong>\r\n\r\n            },<\/strong>\r\n            onWatchPositionError(error) {<\/strong>\r\n\r\n                this.isSharingLocation = false;<\/strong>\r\n                console.log('\u4f4d\u7f6e\u60c5\u5831\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f', error);<\/strong>\r\n\r\n            },<\/strong>\r\n            onStart() {<\/strong>\r\n\r\n                if(! this.params.name) {<\/strong>\r\n\r\n                    alert('\u540d\u524d\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044');<\/strong>\r\n                    return;<\/strong>\r\n\r\n                } else if(confirm('\u4f4d\u7f6e\u60c5\u5831\u3092\u5171\u6709\u3057\u307e\u3059\u304b\uff1f') === true) {<\/strong>\r\n\r\n                    const options = {<\/strong>\r\n                        enableHighAccuracy: true, \/\/ \u3088\u308a\u7cbe\u5ea6\u306e\u9ad8\u3044\u4f4d\u7f6e\u60c5\u5831\u3092\u53d6\u5f97\u3059\u308b<\/strong>\r\n                        timeout: 30000,<\/strong>\r\n                        maximumAge: 0,<\/strong>\r\n                    };<\/strong>\r\n                    this.locationWatchId = navigator.geolocation.watchPosition(<\/strong>\r\n                        (position) => this.onWatchPositionSuccess(position), \/\/ \u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u5148\u3067 this \u3092\u4f7f\u3048\u308b\u3088\u3046\u306b\u3059\u308b<\/strong>\r\n                        (error) => this.onWatchPositionError(error), \/\/ \u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u5148\u3067 this \u3092\u4f7f\u3048\u308b\u3088\u3046\u306b\u3059\u308b<\/strong>\r\n                        options<\/strong>\r\n                    );<\/strong>\r\n\r\n                }<\/strong>\r\n\r\n            },<\/strong>\r\n            onStop() {<\/strong>\r\n\r\n                navigator.geolocation.clearWatch(this.locationWatchId);<\/strong>\r\n                this.isSharingLocation = false;<\/strong>\r\n\r\n            },<\/strong>\r\n            onCurrentLocationClick(userLocation) {<\/strong>\r\n\r\n                map.setView([userLocation.latitude, userLocation.longitude], 20);<\/strong>\r\n\r\n            },<\/strong>\r\n        };<\/strong>\r\n\r\n    };<\/strong>\r\n\r\n<\/script><\/strong>\r\n<\/body><\/strong>\r\n<\/html><\/strong><\/pre>\n<\/div>\n
\u30eb\u30fc\u30c8\u3092\u3064\u304f\u308b<\/h1>\n
\u3067\u306f\u3001\u6700\u5f8c\u306b\u30eb\u30fc\u30c8\u3092\u3064\u304f\u308a\u307e\u3059\u3002<\/p>\n
routes\/web.php<\/strong><\/p>\n
\n
use App\\Http\\Controllers\\UserLocationController;\r\n\r\n\/\/ \u7701\u7565\r\n\r\nRoute::get('user_location', [UserLocationController::class, 'index'])->name('user_location.index');<\/strong><\/pre>\n<\/div>\n
\u3053\u308c\u3067\u4f5c\u696d\u306f\u5b8c\u4e86\u3067\u3059\u3002
\n\u304a\u75b2\u308c\u69d8\u3067\u3057\u305f\u3002\ud83d\ude04\u2728<\/p>\n
\u30c6\u30b9\u30c8\u3057\u3066\u307f\u308b<\/h1>\n
\u3067\u306f\u3001\u5b9f\u969b\u306b\u30c6\u30b9\u30c8\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u2757<\/p>\n
\u3061\u306a\u307f\u306b\u3001\u4eca\u56de\u306f\u4f4d\u7f6e\u60c5\u5831\u3092\u81ea\u7531\u306b\u5909\u66f4\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002
\n\u307e\u305a\u3001Google Chrome<\/code>\u306e\u958b\u767a\u30c4\u30fc\u30eb\uff08devTool<\/code>\uff09\u3092\u958b\u304d\u307e\u3059\u3002<\/p>\n
\u305d\u3057\u3066\u3001\u53f3\u4e0a\u306e\u300c\u4e09\u70b9\u30b3\u30fc\u30c0 \uff1e More tools \uff1e Sensors<\/strong>\u300d\u3092\u9078\u629e\u3002<\/p>\n
\"\"<\/p>\n
\u3059\u308b\u3068\u3001\u958b\u767a\u30c4\u30fc\u30eb\u306e\u4e0b\u5074\u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u4f4d\u7f6e\u60c5\u5831\u3092\u81ea\u7531\u306b\u5909\u66f4\u3067\u304d\u308b\u30c4\u30fc\u30eb\u304c\u51fa\u3066\u304d\u307e\u3059\u306e\u3067\u3001\u3053\u308c\u3092\u4f7f\u3063\u3066\u30c6\u30b9\u30c8\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
\"\"<\/p>\n
\u3067\u306f\u3001\u307e\u305a\u306f\u30d6\u30e9\u30a6\u30b6\u3067\u300chttps:\/\/******\/user_location<\/strong>\u300d\u3078\u30a2\u30af\u30bb\u30b9\u3057\u540d\u524d\u3092\u5165\u529b\u3057\u3066\u300c\u4f4d\u7f6e\u60c5\u5831\u3092\u5171\u6709\u3059\u308b<\/strong>\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<\/p>\n
\"\"<\/p>\n
\u3059\u308b\u3068\u3001\u300c\u4f4d\u7f6e\u60c5\u5831\u3092\u5171\u6709\u3057\u307e\u3059\u304b\uff1f<\/strong>\u300d\u3068\u78ba\u8a8d\u304c\u3067\u308b\u306e\u3067\u3001\u3053\u308c\u3092OK<\/code>\u3059\u308b\u3068\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n
\"\"<\/p>\n
\u306f\u3044\u2757
\n\u81ea\u52d5\u7684\u306b\u5730\u56f3\u304c\u66f4\u65b0\u3055\u308c\u3066\u3001\u300c\u5c71\u7530\u592a\u90ce<\/strong>\u300d\u3055\u3093\u304c\u6771\u4eac\u306b\u3044\u308b\u3053\u3068\u304c\u308f\u304b\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n
\u3067\u306f\u3001\u6b21\u306b\u300c\u4f50\u85e4\u6b21\u90ce<\/strong>\u300d\u3055\u3093\u3067\u540c\u3058\u3053\u3068\u3092\u3057\u307e\u3059\u304c\u3001\u4eca\u5ea6\u306f\u300c\u4e2d\u56fd\u306e\u4e0a\u6d77\u300d\u306b\u3044\u308b\u3053\u3068\u306b\u3057\u3066\u5b9f\u884c\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002\uff08\u306a\u304a\u3001\u5225\u74b0\u5883\u304c\u5fc5\u8981\u306a\u306e\u3067Chrome<\/code>\u306e\u30d7\u30e9\u30a4\u30d9\u30fc\u30c8\u30d6\u30e9\u30a6\u30b8\u30f3\u30b0\u3092\u4f7f\u3063\u3066\u5b9f\u65bd\u3057\u307e\u3059\uff09<\/p>\n
\u3059\u308b\u3068\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n
\"\"<\/p>\n
\u306f\u3044\u2757
\n\u592a\u90ce\u3055\u3093\u304c\u6771\u4eac\u3001\u6b21\u90ce\u3055\u3093\u304c\u4e0a\u6d77\u306b\u3044\u308b\u3053\u3068\u304c\u5206\u304b\u308b\u5730\u56f3\u306b\u5909\u66f4\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n
\u3067\u306f\u3001\u6700\u5f8c\u306b\u5730\u56f3\u306e\u4e0b\u306b\u3042\u308b\u6b21\u90ce\u3055\u3093\u306e\u300c\u73fe\u5728\u5730\u3078<\/strong>\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
\"\"<\/p>\n
\u3069\u3046\u306a\u3063\u305f\u3067\u3057\u3087\u3046\u304b\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n
\"\"<\/p>\n
\u306f\u3044\u2757
\n\u6b21\u90ce\u3055\u3093\u306e\u3044\u308b\u5834\u6240\u306b\u5730\u56f3\u304c\u79fb\u52d5\u3057\u307e\u3057\u305f\u3002<\/p>\n
\u5168\u3066\u6210\u529f\u3067\u3059\ud83d\ude04\u2728<\/p>\n
\u4f01\u696d\u69d8\u3078\u306e\u3054\u63d0\u6848<\/h1>\n
\u4eca\u56de\u306f\u30ed\u30b0\u30a4\u30f3\u6a5f\u80fd\u306f\u8a2d\u3051\u3066\u3044\u306a\u3044\u306e\u3067\u3001\u7279\u5b9a\u30b0\u30eb\u30fc\u30d7\u3060\u3051\u3067\u4f4d\u7f6e\u5171\u6709\u3059\u308b\u3053\u3068\u306f\u3067\u304d\u307e\u305b\u3093\u304c\u3001\u305d\u3046\u3044\u3063\u305f\u6a5f\u80fd\u3092\u3064\u3051\u308b\u3053\u3068\u3067\u300c\u7dca\u6025\u6642\u306e\u5bb6\u65cf\u3084\u793e\u54e1\u3055\u3093\u306e\u4f4d\u7f6e\u60c5\u5831<\/strong>\u300d\u3092\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u628a\u63e1\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\u307e\u305f\u3001\u7dca\u6025\u6642\u3067\u306a\u304f\u3068\u3082\u5de5\u5834\u5185\u3084\u30d3\u30eb\u5185\u3067\u4f4d\u7f6e\u60c5\u5831\u3092\u5171\u6709\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u5834\u5408\u3084\u3001\uff08\u8cdb\u5426\u3042\u308b\u3068\u306f\u601d\u3044\u307e\u3059\u304c\uff09\u55b6\u696d\u3055\u3093\u306e\u5916\u56de\u308a\u306e\u4f4d\u7f6e\u78ba\u8a8d\u306a\u3069\u306b\u4f7f\u3048\u308b\u306e\u3067\u306f\u306a\u3044\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n
\u3082\u3057\u305d\u3046\u3044\u3063\u305f\u6a5f\u80fd\u3092\u3054\u5e0c\u671b\u3067\u3057\u305f\u3089\u3044\u3064\u3067\u3082\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304b\u3089\u3054\u76f8\u8ac7\u304f\u3060\u3055\u3044\u3002<\/p>\n
\u304a\u5f85\u3061\u3057\u3066\u304a\u308a\u307e\u3059\u3002\ud83d\ude04\u2728<\/p>\n
\u304a\u308f\u308a\u306b<\/h1>\n
\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u4eca\u56de\u306f\u300cLaravel + Pusher<\/strong>\u300d\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u5909\u5316\u3059\u308b\u4f4d\u7f6e\u60c5\u5831\u5171\u6709\u30b7\u30b9\u30c6\u30e0\u3092\u3064\u304f\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n
\u3061\u306a\u307f\u306b\u3001\u3061\u3087\u3063\u3068\u82e6\u52b4\u3057\u305f\u306e\u306f\u300cleaflet.js<\/code>\u306e\u305f\u3081\u306e\u5909\u6570\u3092Alpine.js<\/code>\u5185\u306b\u3082\u305f\u305b\u308b\u3068\u30a8\u30e9\u30fc\u304c\u51fa\u308b\u5834\u5408\u304c\u3042\u308b\u300d\u3068\u3044\u3046\u90e8\u5206\u3067\u3057\u305f\u3002<\/p>\n
\u3069\u3046\u3084\u3089\u3053\u308c\u306f\u5909\u6570\u304cProxy<\/code>\u5316\u3055\u308c\u308b\u305f\u3081\u3001\u305d\u308c\u304c\u539f\u56e0\u3068\u306e\u3053\u3068\u3067\u3057\u305f\u3002\u305d\u306e\u305f\u3081\u3001Vue<\/code>\u306a\u3069\u3067\u3082\u540c\u3058\u3053\u3068\u304c\u8d77\u3053\u308b\u3088\u3046\u3067\u3059\u3002\uff08\u5909\u6570\u3092\u6bce\u56de\u901a\u5e38\u306e\u5909\u6570\u306b\u30b3\u30f3\u30d0\u30fc\u30c8\u3057\u3066\u3042\u3052\u308c\u3070OK<\/code>\u306a\u3088\u3046\u3067\u3059\u304c\u3001\u305d\u308c\u3082\u3061\u3087\u3063\u3068\u9762\u5012\u3067\u3059\u3088\u306d\ud83d\ude05\uff09<\/p>\n
\u305d\u308c\u306b\u3057\u3066\u3082\u3084\u306f\u308aPusher<\/code>\u3063\u3066\u4fbf\u5229\u3067\u3059\u306d\u3002
\n\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u306a\u3093\u3067\u3082\u3067\u304d\u3061\u3083\u3044\u307e\u3059\u306e\u3067\u3002<\/p>\n
\u305c\u3072\u7686\u3055\u3093\u3082\u4f55\u304b\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306a\u5b9f\u88c5\u3092\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u306d\u3002<\/p>\n
\u3067\u306f\u3067\u306f\u301c\u2757<\/p>\n
\"\"\u300c\u5e74\u672b\u306b\u5948\u826f\u3067\u98df\u3079\u308b
\n\u3046\u307e\u3044\u304a\u5bff\u53f8\u304c
\n\u3068\u3063\u3066\u3082\u697d\u3057\u307f\u2757\u300d<\/p>\n","protected":false},"excerpt":{"rendered":"
\u3055\u3066\u3055\u3066\u3001\u3053\u308c\u306f\u500b\u4eba\u7684\u306b\u306f\u300c\u3048\u3001\u305d\u3053\u307e\u3067\u3059\u308b\u3093\u3060\u2026\ud83d\ude05\u300d\u3068\u3044\u3046\u6c17\u6301\u3061\u306b\u306a\u3063\u3066\u3057\u307e\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u3042\u308b\u300c\u30b0\u30eb\u30fc\u30d7\u5185\u3067\u5229\u7528\u3055\u308c\u308b\u3068\u8a00\u308f\u308c\u308b\u300d\u6a5f\u80fd\u304c\u3042\u308a\u307e\u3059\u3002 \u305d\u308c\u304c\u30fb\u30fb … <\/p>\n
“Laravel + Pusher \u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306a\u4f4d\u7f6e\u60c5\u5831\u306e\u5171\u6709\u30b7\u30b9\u30c6\u30e0\u3092\u3064\u304f\u308b” \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":12213,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[255,3],"tags":[],"class_list":["post-12196","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-alpine-js","category-laravel"],"_links":{"self":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/12196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12196"}],"version-history":[{"count":5,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/12196\/revisions"}],"predecessor-version":[{"id":12215,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/12196\/revisions\/12215"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/media\/12213"}],"wp:attachment":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}