{"id":12091,"date":"2023-11-05T07:00:18","date_gmt":"2023-11-04T22:00:18","guid":{"rendered":"https:\/\/blog.capilano-fw.com\/?p=12091"},"modified":"2023-10-14T05:02:10","modified_gmt":"2023-10-13T20:02:10","slug":"laravel-%e3%81%a7%ef%bc%92%e8%80%85%e9%96%93%e3%81%ae%e3%80%8c%e5%90%8c%e6%84%8f%e7%bd%b2%e5%90%8d%e3%80%8d%e6%a9%9f%e8%83%bd%e3%82%92%e3%81%a4%e3%81%8f%e3%82%8b","status":"publish","type":"post","link":"https:\/\/blog.capilano-fw.com\/?p=12091","title":{"rendered":"Laravel \u3067\uff12\u8005\u9593\u306e\u300c\u540c\u610f\u7f72\u540d\u300d\u6a5f\u80fd\u3092\u3064\u304f\u308b"},"content":{"rendered":"

\u3055\u3066\u3055\u3066\u3001\u500b\u4eba\u30b5\u30a4\u30c8\u3092\u904b\u55b6\u3057\u3066\u3044\u308b\u3053\u3068\u3082\u3042\u3063\u3066\u304b\u5c11\u3057\u524d\u304b\u3089YouTube<\/code>\u3067\u3082\u30d3\u30b8\u30cd\u30b9\u306b\u95a2\u9023\u3059\u308b\u52d5\u753b\u3092\u307f\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n

\u305d\u3057\u3066\u305d\u3093\u306a\u4e2d\u3001\u3068\u3042\u308b\u52d5\u753b\u306e\u4e2d\u3067\u30c6\u30fc\u30de\u306b\u306a\u3063\u3066\u3044\u305f\u6a5f\u80fd\u3067\u300c\u9762\u767d\u305d\u3046\u2757\u305c\u3072\u3053\u306e\u6a5f\u80fd\u3092\u3064\u304f\u3063\u3066\u307f\u305f\u3044\ud83d\ude0a<\/strong>\u300d\u3068\u601d\u3046\u3082\u306e\u304c\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n

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

\uff12\u8005\u9593\u306e\u300c\u540c\u610f\u7f72\u540d\u300d\u6a5f\u80fd\u00a0<\/strong><\/p>\n

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

\u3053\u308c\u306f\u3001\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u3084\u30a2\u30d7\u30ea\u3092\u4f7f\u3063\u3066\u300cA\u3055\u3093\u3068B\u3055\u3093\u304c\u540c\u610f\u3092\u3057\u305f<\/strong>\u300d\u3068\u3044\u3046\u8a3c\u62e0\u304c\u6b8b\u308b\u3088\u3046\u306b\u3059\u308b\u3068\u3044\u3046\u6a5f\u80fd\u3067\u3001\u52d5\u753b\u306e\u4e2d\u3067\u306f\u30ab\u30c3\u30d7\u30eb\u305f\u3061\u306e\u591c\u306e\u55b6\u307f\u306b\u95a2\u3059\u308b\u3082\u306e\u304c\u30c6\u30fc\u30de\u3068\u306a\u3063\u3066\u3044\u307e\u3057\u305f\u3002\uff08\u305d\u3046\u3067\u3059\u3002\ud83d\udc2f\u306eYouTube<\/code>\u3067\u3059\uff01\uff09<\/p>\n

\u3067\u3082\u3001\u305d\u3046\u3044\u3063\u305f\u30b1\u30fc\u30b9\u3060\u3051\u3067\u306a\u304f\u624b\u8efd\u306b\u8ab0\u304b\u3068\u540c\u610f\u3067\u304d\u3066\u3001\u305d\u308c\u304c\u8a3c\u62e0\u306b\u306a\u308b\u306e\u306f\u4fbf\u5229\u3060\u306a\u3068\u601d\u3063\u305f\u3093\u3067\u3059\u306d\u3002<\/p>\n

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

\u4eca\u56de\u306f\u3053\u306e\uff12\u8005\u9593\u306e\u300c\u540c\u610f\u7f72\u540d<\/strong>\u300d\u6a5f\u80fd\u3092Laravel + JavaScript<\/code>\u3067\u5b9f\u88c5\u3057\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n

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

\"\"\u300c\u30cf\u30df\u30ac\u30ad\u7c89\u3063\u3066
\n\u3082\u3046\u7121\u304f\u306a\u308b\u306a\u2026
\n\u304b\u3089\u304c\u9577\u3044\u3067\u3059\u3088\u306d \ud83e\udd14\u300d<\/p>\n

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

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

\u4eca\u56de\u3054\u7d39\u4ecb\u3059\u308b\u6a5f\u80fd\u306f\u3001\u57fa\u672c\u7684\u306a\u90e8\u5206\u306e\u307f\u4f5c\u6210\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u4f8b\u3048\u3070\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u306a\u3069\u306f\u4e00\u5207\u8003\u616e\u3057\u3066\u3044\u307e\u305b\u3093\u3002<\/p>\n

\u305d\u306e\u305f\u3081\u3001\uff08\u3068\u3044\u3046\u304b\u3053\u306e\u30d6\u30ed\u30b0\u8a18\u4e8b\u3059\u3079\u3066\u306b\u5171\u901a\u3057\u3066\u3044\u307e\u3059\u304c\uff09\u7279\u306b\u305d\u306e\u307e\u307e\u4f7f\u7528\u3059\u308b\u305f\u3081\u306e\u3082\u306e\u3067\u306f\u306a\u3044\u3053\u3068\u306b\u3054\u6ce8\u610f\u304f\u3060\u3055\u3044\u3002m(_ _)m<\/p>\n

DB \u5468\u308a\u3092\u3064\u304f\u308b<\/h1>\n

\u3067\u306f\u3001\u306f\u3058\u3081\u306b\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u95a2\u4fc2\u3057\u3066\u3044\u308b\u90e8\u5206\u304b\u3089\u3064\u304f\u3063\u3066\u3044\u304d\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:model Agreement -mc<\/strong><\/pre>\n
\u3059\u308b\u3068\u3001\u300c\u30e2\u30c7\u30eb<\/strong>\u300d\u300c\u30de\u30a4\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3<\/strong>\u300d\u300c\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc<\/strong>\u300d\u306e\uff13\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u3001\u305d\u308c\u305e\u308c\u4e2d\u8eab\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<\/div>\n
app\/Models\/Agreement.php<\/strong><\/p>\n
\n
<?php\r\n\r\nnamespace App\\Models;\r\n\r\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\r\nuse Illuminate\\Database\\Eloquent\\Model;\r\n\r\nclass Agreement extends Model\r\n{\r\n    use HasFactory;\r\n\r\n    protected $casts = [<\/strong>\r\n        'first_signed_at' => 'datetime',<\/strong>\r\n        'second_signed_at' => 'datetime',<\/strong>\r\n    ];<\/strong>\r\n}<\/pre>\n
\u3053\u3053\u3067\u306f\u3001\u30de\u30a4\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u5185\u3067\u3064\u304f\u308b\uff12\u3064\u306e\u300c\u7f72\u540d\u3057\u305f\u6642\u9593<\/strong>\u300d\u3092\u6642\u9593\u30af\u30e9\u30b9\uff08Carbon<\/code>\uff09\u306b\u81ea\u52d5\u5909\u63db\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<\/div>\n
database\/migrations\/****_**_**_******_create_agreements_table.php<\/strong><\/p>\n
\n
\/\/ \u7701\u7565\r\n\r\npublic function up(): void\r\n{\r\n    Schema::create('agreements', function (Blueprint $table) {\r\n        $table->id();<\/strong>\r\n        $table->uuid('uuid')->comment('UUID');<\/strong>\r\n        $table->text('body')->comment('\u540c\u610f\u5185\u5bb9');<\/strong>\r\n        $table->dateTime('first_signed_at')->nullable()->comment('\u4e00\u4eba\u76ee\u306e\u7f72\u540d\u65e5\u6642');<\/strong>\r\n        $table->dateTime('second_signed_at')->nullable()->comment('\u4e8c\u4eba\u76ee\u306e\u7f72\u540d\u65e5\u6642');<\/strong>\r\n        $table->timestamps();<\/strong>\r\n    });\r\n}\r\n\r\n\/\/ \u7701\u7565<\/pre>\n
\u30ab\u30e9\u30e0\u306e\u5185\u5bb9\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n
    \n
  • uuid\uff1a \u4ed6\u3068\u91cd\u8907\u3057\u306a\u3044\uff08\u304b\u3076\u3089\u306a\u3044\uff09ID\u3002\u3053\u306e ID \u3067\u3059\u3079\u3066\u306e\u30c7\u30fc\u30bf\u3092\u8b58\u5225\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/li>\n
  • body\uff1a \u540c\u610f\u3059\u308b\u5185\u5bb9\u3067\u3059\u3002\u6539\u884c OK\uff01<\/li>\n
  • first_signed_at\uff1a \u4e00\u4eba\u76ee\u304c\u7f72\u540d\u3057\u305f\u65e5\u6642\u3067\u3059\u3002\u30e2\u30c7\u30eb\u3067\u81ea\u52d5\u5909\u63db\u3059\u308b\u30c7\u30fc\u30bf\u3067\u3059\u3002<\/li>\n
  • second_signed_at\uff1a \u4e8c\u4eba\u76ee\u306e\u7f72\u540d\u65e5\u6642\u3067\u3059\u3002<\/li>\n<\/ul>\n
    \u203b \u3061\u306a\u307f\u306b\u3001\uff08\u305f\u3057\u304b\uff09id<\/code>\u3092uuid<\/code>\u306b\u5909\u66f4\u3059\u308b\u65b9\u6cd5\u304c\u3042\u3063\u305f\u3068\u601d\u3046\u306e\u3067\u3059\u304c\u3001\u30b3\u30fc\u30c9\u3092\u66f8\u304d\u304d\u3063\u3066\u304b\u3089\u6c17\u3065\u3044\u305f\u306e\u3067\ud83d\ude06\u3001\u305d\u308c\u306f\u307e\u305f\u4eca\u5ea6\u306e\u6a5f\u4f1a\u306b\u3057\u307e\u3059\u3002<\/p>\n<\/div>\n
    app\/Http\/Controllers\/AgreementController.php<\/strong><\/p>\n
    \n
    <?php<\/strong>\r\n\r\nnamespace App\\Http\\Controllers;<\/strong>\r\n\r\nuse App\\Models\\Agreement;<\/strong>\r\nuse Illuminate\\Http\\Request;<\/strong>\r\nuse Illuminate\\Support\\Str;<\/strong>\r\n\r\nclass AgreementController extends Controller<\/strong>\r\n{<\/strong>\r\n    public function create()<\/strong>\r\n    {<\/strong>\r\n        return view('agreement.create');<\/strong>\r\n    }<\/strong>\r\n\r\n    public function store(Request $request)<\/strong>\r\n    {<\/strong>\r\n        \/\/ \u6ce8\u610f\uff1a \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306f\u7701\u7565\u3057\u3066\u3044\u307e\u3059<\/strong>\r\n\r\n        $uuid = Str::uuid(); \/\/ \u4e00\u4eba\u76ee\u306e UUID<\/strong>\r\n\r\n        $agreement = new Agreement();<\/strong>\r\n        $agreement->uuid = $uuid;<\/strong>\r\n        $agreement->body = $request->body;<\/strong>\r\n        $agreement->save();<\/strong>\r\n\r\n        return to_route('agreement.sign', [<\/strong>\r\n            'agreement' => $uuid,<\/strong>\r\n            'user_type' => 'first',<\/strong>\r\n        ]);<\/strong>\r\n    }<\/strong>\r\n\r\n    public function sign(Request $request, Agreement $agreement)<\/strong>\r\n    {<\/strong>\r\n        $user_type = $request->user_type; \/\/ first or second<\/strong>\r\n\r\n        return view('agreement.sign')->with([<\/strong>\r\n            'agreement' => $agreement,<\/strong>\r\n            'user_type' => $user_type,<\/strong>\r\n        ]);<\/strong>\r\n    }<\/strong>\r\n\r\n    public function update(Request $request, Agreement $agreement)<\/strong>\r\n    {<\/strong>\r\n        \/\/ \u6ce8\u610f\uff1a \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306f\u7701\u7565\u3057\u3066\u3044\u307e\u3059<\/strong>\r\n\r\n        \/\/ \u7f72\u540d\u65e5\u6642\u3092\u4fdd\u5b58<\/strong>\r\n        $user_type = $request->user_type; \/\/ first or second<\/strong>\r\n\r\n        if($user_type === 'first') {<\/strong>\r\n\r\n            $agreement->first_signed_at = now();<\/strong>\r\n\r\n        } else {<\/strong>\r\n\r\n            $agreement->second_signed_at = now();<\/strong>\r\n\r\n        }<\/strong>\r\n\r\n        \/\/ \u753b\u50cf\u3092\u4fdd\u5b58<\/strong>\r\n        $signature_data = $request->signature_data;<\/strong>\r\n        list(, $signature_data) = explode(';', $signature_data);<\/strong>\r\n        list(, $signature_data) = explode(',', $signature_data);<\/strong>\r\n        $decoded_signature_data = base64_decode($signature_data);<\/strong>\r\n\r\n        $image_path = storage_path('app\/public\/signatures\/'. $agreement->uuid .'_'. $user_type .'.png');<\/strong>\r\n        file_put_contents($image_path, $decoded_signature_data);<\/strong>\r\n\r\n        $result = $agreement->save();<\/strong>\r\n\r\n        return ['result' => $result];<\/strong>\r\n    }<\/strong>\r\n\r\n    public function confirm(Agreement $agreement)<\/strong>\r\n    {<\/strong>\r\n        return view('agreement.confirm')->with([<\/strong>\r\n            'agreement' => $agreement,<\/strong>\r\n        ]);<\/strong>\r\n    }<\/strong>\r\n}<\/strong><\/pre>\n<\/div>\n
    \u3061\u306a\u307f\u306b\u3001\u30b3\u30fc\u30c9\u3068\u3057\u3066\u306f\u305d\u308c\u307b\u3069\u8907\u96d1\u306a\u90e8\u5206\u306f\u306a\u3044\u304b\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u6d41\u308c\u304c\u308f\u304b\u308a\u306b\u304f\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u306e\u3067\u3001\u624b\u9806\u304c\u3069\u3046\u306a\u308b\u304b\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n
      \n
    1. \u300c\u4f55\u306b\u540c\u610f\u3059\u308b\u306e\u304b\u300d\u306e\u5185\u5bb9\u3092\u9001\u4fe1\u3059\u308b<\/li>\n
    2. DB \u30c6\u30fc\u30d6\u30eb\u306b\u30c7\u30fc\u30bf\u304c\u8ffd\u52a0\u3055\u308c\u3001\u7f72\u540d\u30da\u30fc\u30b8\u3078\u30ea\u30c0\u30a4\u30ec\u30af\u30c8<\/li>\n
    3. \uff08\u53cc\u65b9\u304c\uff09\u305d\u308c\u305e\u308c\u7f72\u540d\u3092\u3057\u3066\u9001\u4fe1<\/li>\n
    4. \uff12\u3064\u306e\u7f72\u540d\u753b\u50cf\u304c\u4fdd\u5b58\u3055\u308c\u308b<\/li>\n
    5. \u78ba\u8a8d\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u8868\u793a<\/li>\n
    6. \u79fb\u52d5\u3059\u308b\u3068\u540c\u610f\u5185\u5bb9\u3068\u753b\u50cf\uff12\u3064\u304c\u8868\u793a\u3055\u308c\u308b<\/li>\n<\/ol>\n
      \u5fd8\u308c\u3066\u306f\u3044\u3051\u306a\u3044\u3053\u3068<\/h1>\n
      \u5148\u307b\u3069\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3068\u95a2\u9023\u3057\u3066\u304f\u308b\u3093\u3067\u3059\u304c\u3001\u753b\u50cf\u3092\u4fdd\u5b58\u3059\u308b\u30d5\u30a9\u30eb\u30c0\u3092\u3064\u304f\u308a\u3001\u305d\u308c\u3092\u30b5\u30a4\u30c8\u3067\u516c\u958b\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u304a\u304f\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
      \u305d\u306e\u305f\u3081\u3001\u307e\u305a\u306f\/storage\/app\/public\/signatures<\/code>\u30d5\u30a9\u30eb\u30c0\u3092\u3064\u304f\u308a\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
      \n
      php artisan storage:link<\/strong><\/pre>\n<\/div>\n
      \u3059\u308b\u3068\u3001public\/storage<\/code>\u3068\u3044\u3046\u30b7\u30f3\u30dc\u30ea\u30c3\u30af\u30ea\u30f3\u30af\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u3001\u300chttps:\/\/*******\/storage\/******<\/strong>\u300d\u3067\u30a6\u30a7\u30d6\u4e0a\u306b\u516c\u958b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
      \u203b \u3061\u306a\u307f\u306b\u3001\u30d5\u30a1\u30eb\u30c0\u306b\u306f\u66f8\u304d\u8fbc\u307f\u6a29\u9650\u3092\u4e0e\u3048\u3066\u304a\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
      \u30d3\u30e5\u30fc\u3092\u3064\u304f\u308b<\/h1>\n
      \u4eca\u56de\u5fc5\u8981\u306a\u30d3\u30e5\u30fc\u306f\u4ee5\u4e0b\uff13\u3064\u3067\u3059\u3002<\/p>\n
        \n
      • \u6700\u521d\u306b\u540c\u610f\u5185\u5bb9\u3092\u9001\u4fe1\u3059\u308b\u30d3\u30e5\u30fc<\/li>\n
      • \u7f72\u540d\u3092\u3059\u308b\u30d3\u30e5\u30fc<\/li>\n
      • \u7f72\u540d\u3057\u305f\u5185\u5bb9\u3092\u78ba\u8a8d\u3059\u308b\u30d3\u30e5\u30fc<\/li>\n<\/ul>\n
        \u3068\u3044\u3046\u3053\u3068\u3067\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\uff13\u3064\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
        \n
        php artisan make:view agreement.create\r\nphp artisan make:view agreement.sign\r\nphp artisan make:view agreement.confirm\r\n<\/strong><\/pre>\n<\/div>\n
        \u3059\u308b\u3068\u3001\u305d\u308c\u305e\u308c\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u3001\u4e2d\u8eab\u3092\u6b21\u306e\u3088\u3046\u306b\u3057\u307e\u3059\u3002\uff08\u4eca\u56de\u306f\u30b7\u30f3\u30d7\u30eb\u3055\u3092\u6c42\u3081\u3066\u3001\u3059\u3079\u3066CDN<\/code>\u304b\u3089\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u547c\u3073\u51fa\u3057\u3066\u3044\u307e\u3059\ud83d\udc4d\uff09<\/p>\n
        resources\/views\/agreement\/create.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>\u540c\u610f\u5185\u5bb9\u306e\u9001\u4fe1\u30d5\u30a9\u30fc\u30e0<\/title><\/strong>\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.16\/dist\/tailwind.min.css\" rel=\"stylesheet\"><\/strong>\r\n<\/head><\/strong>\r\n<body class=\"bg-gray-200 h-screen flex justify-center items-center\"><\/strong>\r\n<form method=\"POST\" action=\"{{ route('agreement.store') }}\" class=\"w-full max-w-xs mx-auto\"><\/strong>\r\n    @csrf<\/strong>\r\n    <div class=\"bg-white shadow-md rounded px-4 py-4 mb-4\"><\/strong>\r\n        <div class=\"mb-4\"><\/strong>\r\n            <label class=\"block text-gray-700 text-sm font-bold mb-2\"><\/strong>\r\n                \u540c\u610f\u3059\u308b\u5185\u5bb9<\/strong>\r\n            <\/label><\/strong>\r\n            <textarea<\/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                name=\"body\"<\/strong>\r\n                rows=\"7\"><\/textarea><\/strong>\r\n        <\/div><\/strong>\r\n        <div class=\"flex items-center justify-between\"><\/strong>\r\n            <button class=\"w-full 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=\"submit\"><\/strong>\r\n                \u9001\u4fe1\u3059\u308b<\/strong>\r\n            <\/button><\/strong>\r\n        <\/div><\/strong>\r\n    <\/div><\/strong>\r\n<\/form><\/strong>\r\n<\/body><\/strong>\r\n<\/html><\/strong><\/pre>\n
        \u3053\u308c\u306f\u540c\u610f\u3059\u308b\u5185\u5bb9\u3092\u9001\u4fe1\u3059\u308b\u305f\u3081\u306e\u30d5\u30a9\u30fc\u30e0\u3067\u3001\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u304c\u4e00\u3064\u3060\u3051\u3042\u308b\u3001\u3068\u3066\u3082\u30b7\u30f3\u30d7\u30eb\u306a\u5185\u5bb9\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<\/div>\n
        \n
        resources\/views\/agreement\/sign.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>\u540c\u610f\u306e\u7f72\u540d<\/title><\/strong>\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.16\/dist\/tailwind.min.css\" rel=\"stylesheet\"><\/strong>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@3.2.20\/dist\/vue.global.js\"><\/script><\/strong>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/signature_pad@4.0.0\/dist\/signature_pad.umd.min.js\"><\/script><\/strong>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.js\"><\/script><\/strong>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/axios\/1.5.1\/axios.min.js\"><\/script><\/strong>\r\n<\/head><\/strong>\r\n<body class=\"bg-gray-200 h-screen flex flex-col justify-center items-center\"><\/strong>\r\n<div id=\"app\"><\/strong>\r\n    <div class=\"mb-4 bg-white p-4 text-sm\" v-if=\"isFirstUser\"><\/strong>\r\n        <div class=\"mb-2\"><\/strong>\r\n            \u540c\u610f\u3057\u3066\u6b32\u3057\u3044\u4eba\u306bQR\u30b3\u30fc\u30c9\u3092\u8aad\u307f\u53d6\u3063\u3066\u3082\u3089\u3063\u3066\u304f\u3060\u3055\u3044<\/strong>\r\n        <\/div><\/strong>\r\n        <div id=\"qrcode\" class=\"flex justify-center\"><\/div><\/strong>\r\n    <\/div><\/strong>\r\n    <div class=\"bg-white shadow-md rounded px-4 py-4 mb-4 text-sm\"><\/strong>\r\n        \u540c\u610f\u5185\u5bb9<\/strong>\r\n        <div class=\"whitespace-pre mb-4 max-h-32 overflow-auto text-xs\">{{ $agreement->body }}<\/div><\/strong>\r\n    <\/div><\/strong>\r\n    <div class=\"bg-white shadow-md rounded px-4 py-4 mb-4 text-sm\"><\/strong>\r\n        \u4ee5\u4e0b\u306b\u7f72\u540d\u3057\u3066\u304f\u3060\u3055\u3044<\/strong>\r\n        <canvas id=\"canvas\" height=\"150\" class=\"border rounded my-1 w-full\"><\/canvas><\/strong>\r\n        <div class=\"text-right\"><\/strong>\r\n            <a href=\"#\" @click.prevent=\"clearSignature\" class=\"text-blue-500 hover:underline\">\u30af\u30ea\u30a2<\/a><\/strong>\r\n        <\/div><\/strong>\r\n    <\/div><\/strong>\r\n    <button @click=\"save\" class=\"w-full 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        \u7f72\u540d\u3092\u4fdd\u5b58\u3059\u308b<\/strong>\r\n    <\/button><\/strong>\r\n    <div class=\"flex justify-center pt-4\"><\/strong>\r\n        <a<\/strong>\r\n            href=\"{{ route('agreement.confirm', $agreement->uuid) }}\"<\/strong>\r\n            class=\"underline\"<\/strong>\r\n            v-if=\"isCompleted\"><\/strong>\r\n            \u540c\u610f\u5185\u5bb9\u3092\u78ba\u8a8d\u3059\u308b<\/strong>\r\n        <\/a><\/strong>\r\n    <\/div><\/strong>\r\n<\/div><\/strong>\r\n\r\n<script><\/strong>\r\n    const app = Vue.createApp({<\/strong>\r\n        data() {<\/strong>\r\n\r\n            return {<\/strong>\r\n                uuid: '{{ $agreement->uuid }}',<\/strong>\r\n                userType: '{{ $user_type }}',<\/strong>\r\n                signaturePad: null,<\/strong>\r\n                isCompleted: false,<\/strong>\r\n            };<\/strong>\r\n\r\n        },<\/strong>\r\n        methods: {<\/strong>\r\n            showQrcode() {<\/strong>\r\n\r\n                const el = document.getElementById('qrcode');<\/strong>\r\n                const url = '{{ route('agreement.sign', [$agreement->uuid, 'user_type' => 'second']) }}';<\/strong>\r\n\r\n                new QRCode(el, {<\/strong>\r\n                    text: url,<\/strong>\r\n                    width: 150,<\/strong>\r\n                    height: 150,<\/strong>\r\n                    colorDark : \"#000000\",<\/strong>\r\n                    colorLight : \"#ffffff\",<\/strong>\r\n                    correctLevel : QRCode.CorrectLevel.H<\/strong>\r\n                });<\/strong>\r\n\r\n            },<\/strong>\r\n            showSignature() {<\/strong>\r\n\r\n                const canvas = document.getElementById('canvas');<\/strong>\r\n                canvas.width = canvas.offsetWidth;<\/strong>\r\n                canvas.height = canvas.offsetHeight;<\/strong>\r\n                this.signaturePad = new SignaturePad(canvas);<\/strong>\r\n\r\n            },<\/strong>\r\n            clearSignature() {<\/strong>\r\n\r\n                this.signaturePad.clear();<\/strong>\r\n\r\n                \/\/ \u672c\u6765\u306f\u3053\u3053\u3067\u3059\u3067\u306b\u4fdd\u5b58\u3055\u308c\u305f\u753b\u50cf\u3092\u524a\u9664\u3059\u308b\u51e6\u7406\u3092\u884c\u3046\u3079\u304d\u3067\u3059\u304c\u3001\u4eca\u56de\u306f\u7701\u7565\u3057\u307e\u3059<\/strong>\r\n\r\n            },<\/strong>\r\n            save() {<\/strong>\r\n\r\n                if (this.signaturePad.isEmpty()) {<\/strong>\r\n\r\n                    alert('\u7f72\u540d\u3092\u3057\u3066\u304f\u3060\u3055\u3044');<\/strong>\r\n\r\n                } else {<\/strong>\r\n\r\n                    const dataURL = this.signaturePad.toDataURL();<\/strong>\r\n                    const url = '{{ route('agreement.update', $agreement->uuid) }}';<\/strong>\r\n                    const params = {<\/strong>\r\n                        _method: 'PUT',<\/strong>\r\n                        uuid: this.uuid,<\/strong>\r\n                        user_type: this.userType,<\/strong>\r\n                        signature_data: dataURL,<\/strong>\r\n                    };<\/strong>\r\n\r\n                    axios.post(url, params)<\/strong>\r\n                        .then(response => {<\/strong>\r\n\r\n                            if(response.data.result === true) {<\/strong>\r\n\r\n                                this.isCompleted = true;<\/strong>\r\n\r\n                            }<\/strong>\r\n\r\n                        });<\/strong>\r\n\r\n                }<\/strong>\r\n            }<\/strong>\r\n        },<\/strong>\r\n        computed: {<\/strong>\r\n            isFirstUser() {<\/strong>\r\n\r\n                return this.userType === 'first';<\/strong>\r\n\r\n            }<\/strong>\r\n        },<\/strong>\r\n        mounted() {<\/strong>\r\n\r\n            \/\/ \u7f72\u540d<\/strong>\r\n            this.showSignature();<\/strong>\r\n\r\n            \/\/ QR\u30b3\u30fc\u30c9<\/strong>\r\n            this.showQrcode();<\/strong>\r\n\r\n        }<\/strong>\r\n    });<\/strong>\r\n\r\n    app.mount('#app');<\/strong>\r\n<\/script><\/strong>\r\n<\/body><\/strong>\r\n<\/html><\/strong><\/pre>\n
        \u3053\u3053\u304c\u4eca\u56de\u306e\u30e1\u30a4\u30f3\u306b\u306a\u308b\u300c\u7f72\u540d<\/strong>\u300d\u306e\u90e8\u5206\u3067\u3059\u3002<\/p>\n
        \u7f72\u540d\u306f\u3001signature_pad<\/strong>\u3068\u3044\u3046\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u4f7f\u3063\u3066\u3044\u3066\u3001\u5b9f\u969b\u306e\u7b46\u8de1\u306e\u3088\u3046\u306b\u7dda\u3092\u66f8\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
        \u305d\u3057\u3066\u3001\u3053\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u304b\u3089\u53d6\u5f97\u3057\u305f\u7b46\u8de1\u30c7\u30fc\u30bf\uff08\u30ad\u30e3\u30f3\u30d0\u30b9\u304b\u3089\u53d6\u5f97\u3057\u305fdataURL<\/code>\uff09\u3092Ajax<\/code>\u3067\u9001\u4fe1\u3057\u3066\u3001\u305d\u308c\u3092PHP<\/code>\uff08Laravel<\/code>\uff09\u5074\u3067\u4fdd\u5b58\u3057\u3066\u3044\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n<\/div>\n
        \n
        resources\/views\/agreement\/confirm.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>\u540c\u610f\u5185\u5bb9\u306e\u78ba\u8a8d<\/title><\/strong>\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.16\/dist\/tailwind.min.css\" rel=\"stylesheet\"><\/strong>\r\n<\/head><\/strong>\r\n<body class=\"bg-gray-200 h-screen flex justify-center items-center\"><\/strong>\r\n<form method=\"POST\" action=\"{{ route('agreement.store') }}\" class=\"w-full max-w-xs mx-auto\"><\/strong>\r\n    @csrf<\/strong>\r\n    <div class=\"bg-white shadow-md rounded px-4 py-4 mb-4\"><\/strong>\r\n        <div class=\"mb-4\"><\/strong>\r\n            <label class=\"block text-gray-700 text-sm font-bold mb-2\" for=\"message\"><\/strong>\r\n                \u540c\u610f\u5185\u5bb9<\/strong>\r\n            <\/label><\/strong>\r\n            <div class=\"whitespace-pre mb-4 max-h-32 overflow-auto text-xs bg-gray-200 p-2 rounded\">{{ $agreement->body }}<\/div><\/strong>\r\n            <label class=\"block text-gray-700 text-sm font-bold mb-2\" for=\"message\"><\/strong>\r\n                \u7f72\u540d<\/strong>\r\n            <\/label><\/strong>\r\n            @foreach(['first', 'second'] as $user_type)<\/strong>\r\n                @if(! is_null($agreement->{$user_type . '_signed_at'}))<\/strong>\r\n                    <img src=\"\/storage\/signatures\/{{ $agreement->uuid }}_{{ $user_type }}.png\" alt=\"\u7f72\u540d\" class=\"border rounded my-1 w-full\"><\/strong>\r\n                    <div class=\"text-right text-xs mb-2\"><\/strong>\r\n                        {{ $agreement->{$user_type . '_signed_at'}->format('Y\u5e74m\u6708d\u65e5 H\u6642i\u5206') }}<\/strong>\r\n                    <\/div><\/strong>\r\n                @endif<\/strong>\r\n            @endforeach<\/strong>\r\n            <div class=\"flex justify-center mt-5\"><\/strong>\r\n                <a href=\"\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full text-center\"><\/strong>\r\n                    \u518d\u8aad\u8fbc\u3059\u308b<\/strong>\r\n                <\/a><\/strong>\r\n            <\/div><\/strong>\r\n        <\/div><\/strong>\r\n    <\/div><\/strong>\r\n<\/form><\/strong>\r\n<\/body><\/strong>\r\n<\/html><\/strong><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
        \u3053\u3053\u3067\u306f\u3001\u4fdd\u5b58\u3055\u308c\u305fagreement<\/code>\u306e\u30c7\u30fc\u30bf\u3092\u8868\u793a\u3057\u3066\u3044\u308b\u3060\u3051\u3067\u7279\u5225\u306a\u3053\u3068\u306f\u3057\u3066\u3044\u307e\u305b\u3093\u3002<\/p>\n
        \u3053\u308c\u3067\u4f5c\u696d\u306f\u5b8c\u4e86\u3067\u3059\uff01
        \n\u304a\u75b2\u308c\u69d8\u3067\u3057\u305f\ud83d\ude0a\ud83d\udc4d<\/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\u3002
        \n\u307e\u305a\u3001\u300chttps:\/\/********\/agreement\/create<\/strong>\u300d\u306b\u30d6\u30e9\u30a6\u30b6\u3067\u30a2\u30af\u30bb\u30b9\u3057\u307e\u3059\u3002<\/p>\n
        \"\"<\/p>\n
        \u306f\u3044\uff01
        \n\u30d5\u30a9\u30fc\u30e0\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n
        \u3067\u306f\u3001\u3053\u306e\u30d5\u30a9\u30fc\u30e0\u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5165\u529b\u3057\u3066\u9001\u4fe1\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
        \"\"<\/p>\n
        \u3059\u308b\u3068\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u7f72\u540d\u30da\u30fc\u30b8\u306b\u79fb\u52d5\u3057\u307e\u3057\u305f\u3002<\/p>\n
        \"\"<\/p>\n
        \u3067\u306f\u3001\u307e\u305a\u306f\u3082\u3046\u4e00\u65b9\u306e\u4eba\u304cQR\u30b3\u30fc\u30c9\u3092\u8aad\u307f\u53d6\u3063\u3066\u30da\u30fc\u30b8\u79fb\u52d5\u3057\u307e\u3059\u3002<\/p>\n
        \u3059\u308b\u3068\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n
        \"\"<\/p>\n
        \u306f\u3044\u2757
        \n\u540c\u610f\u5185\u5bb9\u304c\u8868\u793a\u3055\u308c\u3066\u540c\u3058\u304f\u7f72\u540d\u3059\u308b\u30a8\u30ea\u30a2\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n
        \u3068\u3044\u3046\u3053\u3068\u3067\u3001\u307e\u305a\u306f\u7247\u65b9\u306e\u4eba\u3067\u7f72\u540d\u3092\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
        \"\"<\/p>\n
        \u9001\u4fe1\u3057\u307e\u3059\u3002<\/p>\n
        \u3069\u3046\u306a\u308b\u3067\u3057\u3087\u3046\u304b\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n
        \"\"<\/p>\n
        \u306f\u3044\u2757
        \n\u7f72\u540d\u306e\u9001\u4fe1\u304c\u5b8c\u4e86\u3057\u3001\u78ba\u8a8d\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n
        \u6210\u529f\u3067\u3059\ud83d\ude0a\u2728<\/p>\n
        \u3067\u306f\u3001\u3082\u3046\u4e00\u65b9\u3082\u7f72\u540d\uff06\u9001\u4fe1\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
        \"\"<\/p>\n
        \u3053\u3061\u3089\u3082\u3046\u307e\u304f\u4fdd\u5b58\u304c\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n
        \u3067\u306f\u3001\u6700\u5f8c\u306b\u78ba\u8a8d\u30da\u30fc\u30b8\u304c\u3069\u3046\u306a\u308b\u304b\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
        \u3046\u307e\u304f\u3044\u304f\u3067\u3057\u3087\u3046\u304b\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n
        \"\"<\/p>\n
        \u306f\u3044\u2757
        \n\u540c\u610f\u5185\u5bb9\u3068\u7f72\u540d\u304c\uff12\u3064\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n
        \u3053\u308c\u3067\uff12\u4eba\u306e\u540c\u610f\u304c\u5b8c\u4e86\u3057\u305f\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002
        \n\u3081\u3067\u305f\u3057\u3081\u3067\u305f\u3057\u2728\ud83d\ude0a\ud83d\udc4d<\/p>\n
        \u4f01\u696d\u69d8\u3078\u306e\u3054\u63d0\u6848<\/h1>\n
        \u4eca\u56de\u306e\u3088\u3046\u306b\u3044\u308d\u3044\u308d\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u3001\u300c\u540c\u610f\u6a5f\u80fd<\/strong>\u300d\u3060\u3051\u3067\u306a\u304f\u69d8\u3005\u306a\u6a5f\u80fd\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
        \u306a\u304a\u3001\u4eca\u56de\u306f\u30c6\u30b9\u30c8\u306a\u306e\u3067\u7701\u7565\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u672c\u756a\u74b0\u5883\u3067\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u6a5f\u80fd\u3082\u5b9f\u88c5\u3059\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n