{"id":5226,"date":"2019-12-07T02:47:04","date_gmt":"2019-12-06T17:47:04","guid":{"rendered":"https:\/\/blog.capilano-fw.com\/?p=5226"},"modified":"2021-01-12T04:45:46","modified_gmt":"2021-01-11T19:45:46","slug":"%e8%87%aa%e5%8b%95%e5%8c%96%ef%bc%81laravel%e3%81%ab%e3%83%87%e3%83%bc%e3%82%bf%e7%99%bb%e9%8c%b2%e3%81%95%e3%82%8c%e3%81%9f%e3%82%89twitter%e3%81%ab%e6%8a%95%e7%a8%bf%e3%81%99%e3%82%8b%ef%bc%88","status":"publish","type":"post","link":"https:\/\/blog.capilano-fw.com\/?p=5226","title":{"rendered":"Laravel\u3067Twitter\u6295\u7a3f\uff08\u753b\u50cf\u3064\u304d\uff09\u3010\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u53ef\u3011"},"content":{"rendered":"

\u3055\u3066\u3055\u3066\u3001\u524d\u56de\u30fb\u524d\u3005\u56de\u3068\u753b\u50cf\u306b\u95a2\u9023\u3059\u308b\u6a5f\u80fd\u3092Laravel<\/code>\u3067\u958b\u767a\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n

\u305d\u3057\u3066\u3001\u753b\u50cf\u95a2\u9023\u3067\u4ed6\u306b\u3082\u4f55\u304b\u304a\u5c4a\u3051\u3067\u304d\u308b\u5185\u5bb9\u304c\u306a\u3044\u304b\u3068\u8003\u3048\u3066\u3044\u305f\u3068\u3053\u308d\u3001\u753b\u50cf\u304c\u30e1\u30a4\u30f3\u3068\u3044\u3046\u308f\u3051\u3067\u306f\u306a\u3044\u306e\u3067\u3059\u304c\u3001\u3072\u3068\u3064\u3042\u308b\u30a2\u30a4\u30c7\u30a2\u304c\u6d6e\u304b\u3093\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n

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

Laravel\u304b\u3089Twitter\u6295\u7a3f\u3059\u308b\uff08\u753b\u50cf\u3064\u304d\uff09<\/strong><\/p>\n

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

\u5b9f\u306f\u4ee5\u524dPHP<\/code>\u304b\u3089\u30c4\u30a4\u30c3\u30bf\u30fc\u6295\u7a3f\u3059\u308b\u6a5f\u80fd\u3092\u958b\u767a\u3057\u305f\u3053\u3068\u304c\u3042\u3063\u305f\u3093\u3067\u3059\u304c\u3001\u305d\u308c\u306f\u753b\u50cf\u306a\u3057\u306e\u30c6\u30ad\u30b9\u30c8\u30fb\u30aa\u30f3\u30ea\u30fc\u3067\u3057\u305f\u3002<\/p>\n

\u305d\u306e\u305f\u3081\u3001\u4eca\u56de\u306f\u3061\u3087\u3046\u3069\u3044\u3044\u6d41\u308c\u306a\u306e\u3067\u30b5\u30a4\u30c8\u306b\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u304c\u3042\u3063\u305f\u5834\u5408\u306b\u81ea\u52d5\u7684\u306bTwitter<\/code>\u306b\u6295\u7a3f\u304c\u3067\u304d\u308b\u6a5f\u80fd\u3092\u3064\u304f\u3063\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n

\u305c\u3072\u7686\u3055\u3093\u306e\u304a\u5f79\u306b\u7acb\u3066\u308b\u3068\u5b09\u3057\u3044\u3067\u3059\ud83d\ude0a\u2728<\/p>\n

\"\"<\/p>\n

\u958b\u767a\u74b0\u5883\uff1a<\/strong> Laravel 5.8\u3001Vue 2.6<\/p>\n

\u3084\u308a\u305f\u3044\u3053\u3068<\/h1>\n

\u4eca\u56de\u958b\u767a\u3059\u308b\u5177\u4f53\u7684\u306a\u6a5f\u80fd\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n

    \n
  1. \u5546\u54c1\u60c5\u5831\u3092DB\u306b\u767b\u9332\u3059\u308b<\/li>\n
  2. \u767b\u9332\u3055\u308c\u305f\u3089\u81ea\u52d5\u7684\u306b\u30c4\u30a4\u30c3\u30bf\u30fc\u306b\u300c\u65b0\u7740\u300d\u3068\u3057\u3066\u6295\u7a3f<\/li>\n<\/ol>\n

    \u3067\u306f\u3001\u5b9f\u969b\u306b\u3084\u3063\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002
    \n\u4eca\u65e5\u3082 Let’s Code!<\/p>\n

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

    \u4eca\u56de\u306e\u6a5f\u80fd\u3092\u5b9f\u88c5\u3059\u308b\u305f\u3081\u306b\u306f\u3001Twitter<\/code>\u3067API\u30ad\u30fc\u3068\u30a2\u30af\u30bb\u30b9\u30fb\u30c8\u30fc\u30af\u30f3\u3092\u3064\u304f\u3063\u3066\u304a\u304f\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n

    \u3082\u3057\u307e\u3060\u4f5c\u6210\u3057\u3066\u3044\u306a\u3044\u65b9\u306f\u3001\u30c4\u30a4\u30c3\u30bf\u30fc\u3067API\u30ad\u30fc\u3068\u30a2\u30af\u30bb\u30b9\u30fb\u30c8\u30fc\u30af\u30f3\u3092\u53d6\u5f97\u3059\u308b<\/a>\u3092\u53c2\u8003\u306b\u3057\u3066\u5148\u306b\u3053\u308c\u3089\u306e\u60c5\u5831\u3092\u53d6\u5f97\u3057\u3066\u304a\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

    Laravel\u5074\u306e\u4f5c\u696d<\/h1>\n

    API\u30ad\u30fc\uff06\u30a2\u30af\u30bb\u30b9\u30fb\u30c8\u30fc\u30af\u30f3\u3092\u30bb\u30c3\u30c8\u3059\u308b<\/h2>\n

    \u53d6\u5f97\u3057\u305fAPI\u30ad\u30fc\u3068\u30a2\u30af\u30bb\u30b9\u30fb\u30c8\u30fc\u30af\u30f3\u306f.env<\/code>\u5185\u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u66f8\u304d\u8fbc\u3093\u3067\u304a\u304d\u307e\u3059\u3002<\/p>\n

    TWITTER_CONSUMER_KEY=\uff08\"API key\" \u306e\u5185\u5bb9\uff09\r\nTWITTER_CONSUMER_SECRET=\uff08\"API secret key\" \u306e\u5185\u5bb9\uff09\r\nTWITTER_ACCESS_TOKEN=\uff08\"Access token\" \u306e\u5185\u5bb9\uff09\r\nTWITTER_ACCESS_SECRET=\uff08\"Access token secret\" \u306e\u5185\u5bb9\uff09<\/strong><\/pre>\n
    \u307e\u305f\u3001\u3053\u308c\u3089\u306e\u60c5\u5831\u3092config()<\/code>\u3067\u53d6\u5f97\u3067\u304d\u308b\u3088\u3046config\/services.php<\/code>\u3092\u958b\u3044\u3066\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u767b\u9332\u3057\u307e\u3059\u3002<\/p>\n
    <?php\r\n\r\nreturn [\r\n\r\n    \/\/ \u7701\u7565\r\n\r\n    'twitter' => [<\/strong>\r\n        'consumer_key'    => env('TWITTER_CONSUMER_KEY'),<\/strong>\r\n        'consumer_secret' => env('TWITTER_CONSUMER_SECRET'),<\/strong>\r\n        'access_token'    => env('TWITTER_ACCESS_TOKEN'),<\/strong>\r\n        'access_secret'   => env('TWITTER_ACCESS_SECRET')<\/strong>\r\n    ]<\/strong>\r\n\r\n];<\/pre>\n
    \u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<\/h2>\n
    \u4eca\u56de\u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002
    \n\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
    composer require laravel-notification-channels\/twitter<\/strong><\/pre>\n
    composer require sukohi\/clamp-bolt:4.*<\/strong><\/pre>\n
    \uff08\u3061\u306a\u307f\u306b\uff12\u3064\u76ee\u306f\u79c1\u304c\u516c\u958b\u3057\u3066\u3044\u308b\u30d1\u30c3\u30b1\u30fc\u30b8<\/a>\u3067\u3001\u4fdd\u5b58\u753b\u50cf\u3068DB\u30c7\u30fc\u30bf\u3092\u7e4b\u3052\u3066\u7ba1\u7406\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308b\u30d1\u30c3\u30b1\u30fc\u30b8\u3067\u3059\uff09<\/p>\n
    \u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u304c\u5b8c\u4e86\u3057\u305f\u3089\u3001\u30d5\u30a1\u30a4\u30eb\u7528\u306eDB\u30c6\u30fc\u30d6\u30eb\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
    php artisan vendor:publish --provider=\"Sukohi\\ClampBolt\\ClampBoltServiceProvider\"<\/strong><\/pre>\n
    php artisan migrate<\/strong><\/pre>\n
    \u4f5c\u6210\u3055\u308c\u305f\u30c6\u30fc\u30d6\u30eb\u306f\u3053\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002
    \n\u3053\u3053\u306b\u4eca\u56de\u306f\u753b\u50cf\u30c7\u30fc\u30bf\u304c\u4fdd\u5b58\u3055\u308c\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
    \"\"<\/p>\n
    \u30e2\u30c7\u30eb\u3068\u30de\u30a4\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u3064\u304f\u308b<\/h2>\n
    \u3067\u306f\u3001\u4eca\u56de\u306fproducts<\/code>\u3068\u3044\u3046\u30c6\u30fc\u30d6\u30eb\u306b\u5546\u54c1\u30c7\u30fc\u30bf\u3092\u767b\u9332\u3057\u3066\u3044\u304d\u307e\u3059\u306e\u3067\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3067\u30e2\u30c7\u30eb\u3068\u30de\u30a4\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u3064\u304f\u3063\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
    php artisan make:model Product -m<\/strong><\/pre>\n
    \u3059\u308b\u3068app\/Product.php<\/code>\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u3001\u753b\u50cf\u3082\u7ba1\u7406\u3067\u304d\u308b\u3088\u3046\u306bClampBoltTrait<\/code>\u3092\u767b\u9332\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n
    <?php\r\n\r\nnamespace App;\r\n\r\nuse Illuminate\\Database\\Eloquent\\Model;\r\nuse Sukohi\\ClampBolt\\ClampBoltTrait;<\/strong>\r\n\r\nclass Product extends Model\r\n{\r\n    use ClampBoltTrait;<\/strong>\r\n}<\/pre>\n
    \u305d\u3057\u3066\u3001database\/migrations\/****_**_**_******_create_products_table.php<\/code>\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u3082\u4f5c\u6210\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u4e2d\u8eab\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3059\u3002\uff08\u592a\u5b57<\/strong>\u304c\u8ffd\u52a0\u3057\u3066\u3068\u3053\u308d\u3067\u3059\uff09<\/p>\n
    <?php\r\n\r\nuse Illuminate\\Support\\Facades\\Schema;\r\nuse Illuminate\\Database\\Schema\\Blueprint;\r\nuse Illuminate\\Database\\Migrations\\Migration;\r\n\r\nclass CreateProductsTable extends Migration\r\n{\r\n    \/**\r\n     * Run the migrations.\r\n     *\r\n     * @return void\r\n     *\/\r\n    public function up()\r\n    {\r\n        Schema::create('products', function (Blueprint $table) {\r\n            $table->bigIncrements('id');\r\n            $table->string('name')->comment('\u5546\u54c1\u540d');<\/strong>\r\n            $table->unsignedInteger('price')->comment('\u4fa1\u683c');<\/strong>\r\n            $table->timestamps();\r\n        });\r\n    }\r\n\r\n    \/**\r\n     * Reverse the migrations.\r\n     *\r\n     * @return void\r\n     *\/\r\n    public function down()\r\n    {\r\n        Schema::dropIfExists('products');\r\n    }\r\n}<\/pre>\n
    \u5909\u66f4\u3057\u305f\u3089\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3067\u30de\u30a4\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n
    php artisan migrate<\/strong><\/pre>\n
    \u5b9f\u884c\u3059\u308b\u3068DB\u30c6\u30fc\u30d6\u30eb\u306f\u3053\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
    \"\"<\/p>\n
    Notification\u3092\u3064\u304f\u308b<\/h2>\n
    \u5148\u307b\u3069\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305f\u30d1\u30c3\u30b1\u30fc\u30b8laravel-notification-channels\/twitter<\/code>\u306fLaravel<\/code>\u304c\u63d0\u4f9b\u3059\u308b\u30e1\u30c3\u30bb\u30fc\u30b8\u6a5f\u80fdNotification<\/code>\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3057\u307e\u3059\u306e\u3067\u3001\u5c02\u7528\u306eNewProductArrived<\/code>\u3068\u3044\u3046Notification<\/code>\u3092\u3064\u304f\u308a\u307e\u3059\u3002<\/p>\n
    \u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
    php artisan make:notification NewProductArrived<\/strong><\/pre>\n
    \u3059\u308b\u3068\u3001app\/Notifications\/NewProductArrived.php<\/code>\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u3001\u958b\u3044\u3066\u4e2d\u8eab\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
    <?php\r\n\r\nnamespace App\\Notifications;\r\n\r\nuse App\\Product;\r\nuse Illuminate\\Notifications\\Notification;\r\nuse NotificationChannels\\Twitter\\TwitterChannel;\r\nuse NotificationChannels\\Twitter\\TwitterStatusUpdate;\r\n\r\nclass NewProductArrived extends Notification\r\n{\r\n    private $product;\r\n\r\n    public function __construct(Product $product)\r\n    {\r\n        $this->product = $product;\r\n    }\r\n\r\n    public function via($notifiable)<\/strong>\r\n    {<\/strong>\r\n        return [TwitterChannel::class];<\/strong>\r\n    }<\/strong>\r\n\r\n    public function toTwitter($notifiable)<\/strong>\r\n    {<\/strong>\r\n        $text = \"\u65b0\u7740\uff01\\n\u3010\". $this->product->name .\"\u3011\u3068\u3044\u3046\u5546\u54c1\u304c\u767b\u9332\u3055\u308c\u307e\u3057\u305f\\n\".<\/strong>\r\n                url('product\/'. $this->product->id);<\/strong>\r\n        $attachment = $this->product->getAttachment('product_image');<\/strong>\r\n        return (new TwitterStatusUpdate($text))->withImage($attachment->path);<\/strong>\r\n    }<\/strong>\r\n}<\/pre>\n
    \u30eb\u30fc\u30c8\u3092\u3064\u304f\u308b<\/h2>\n
    \u7d9a\u3044\u3066\u3001\u30eb\u30fc\u30c8\u3067\u3059\u3002
    \n\u4ee5\u4e0b\u3092routes\/web.php<\/code>\u306b\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
    Route::get('product\/create', 'ProductController@create');<\/strong>\r\nRoute::post('product', 'ProductController@store');<\/strong>  \/\/ Ajax<\/pre>\n
    \u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u3064\u304f\u308b<\/h2>\n
    \u6b21\u306b\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3067\u3059\u3002
    \n\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
    php artisan make:controller ProductController<\/strong><\/pre>\n
    \u3059\u308b\u3068\u3001app\/Http\/Controllers\/ProductController.php<\/code>\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u4e2d\u8eab\u3092\u6b21\u306e\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n
    <?php\r\n\r\nnamespace App\\Http\\Controllers;\r\n\r\nuse App\\Notifications\\NewProductArrived;\r\nuse Illuminate\\Http\\Request;\r\nuse NotificationChannels\\Twitter\\TwitterChannel;\r\n\r\nclass ProductController extends Controller\r\n{\r\n    public function create() {<\/strong>\r\n\r\n        return view('product.create');<\/strong>\r\n\r\n    }<\/strong>\r\n\r\n    public function store(Request $request) {<\/strong>\r\n\r\n        $request->validate([<\/strong>\r\n            'name' => 'required|string',<\/strong>\r\n            'price' => 'required|integer|min:0',<\/strong>\r\n            'image' => 'required|image'<\/strong>\r\n        ]);<\/strong>\r\n\r\n        $product = new \\App\\Product();<\/strong>\r\n        $product->name = $request->name;<\/strong>\r\n        $product->price = $request->price;<\/strong>\r\n        $product->attach('product_image', $request->image);<\/strong>\r\n        $result = $product->save();<\/strong>\r\n\r\n        \/\/ \u30c4\u30a4\u30c3\u30bf\u30fc\u306b\u6295\u7a3f<\/strong>\r\n        \\Notification::route(TwitterChannel::class, '')->notify(new NewProductArrived($product));<\/strong>\r\n\r\n        return ['result' => $result];<\/strong>\r\n\r\n    }<\/strong>\r\n}<\/pre>\n
    create()<\/code>\u304c\u5546\u54c1\u306e\u767b\u9332\u30d5\u30a9\u30fc\u30e0\u3067\u3001store()<\/code>\u304cAjax<\/code>\u3067\u767b\u9332\u60c5\u5831\u3068\u753b\u50cf\u3092\u53d7\u3051\u53d6\u308b\u30e1\u30bd\u30c3\u30c9\u3067\u3059\u3002<\/p>\n
    store()<\/code>\u306e\u4e2d\u3067\u306f\u3001products<\/code>\u30c6\u30fc\u30d6\u30eb\u306b\u65b0\u3057\u3044\u5546\u54c1\u3092\u8ffd\u52a0\u3057\u3001attach()<\/code>\u3067\u753b\u50cf\u306e\u30c7\u30fc\u30bf\u3092attachments<\/code>\u306b\u4fdd\u5b58\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
    \u305d\u3057\u3066\u3001\u4fdd\u5b58\u304c\u5b8c\u4e86\u3057\u305f\u3089NewProductArrived()<\/code>\u3092\u547c\u3073\u51fa\u3057\u3066\u305d\u306e\u60c5\u5831\u3092\u5143\u306b\u30c4\u30a4\u30c3\u30bf\u30fc\u6295\u7a3f\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n
    \u30d3\u30e5\u30fc\u3092\u3064\u304f\u308b<\/h2>\n
    \u305d\u3057\u3066\u3001\u5546\u54c1\u30c7\u30fc\u30bf\u3092\u767b\u9332\u3059\u308b\u30d5\u30a9\u30fc\u30e0\u3092\u3064\u304f\u308a\u307e\u3059\u3002
    \nresources\/views\/product\/create.blade.php<\/code>\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u3092\u3064\u304f\u3063\u3066\u4e2d\u8eab\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
    <html>\r\n<head>\r\n    <link href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n<\/head>\r\n<body class=\"p-4\">\r\n<div id=\"app\" class=\"container\">\r\n    <div class=\"row\">\r\n        <div class=\"col-4\">\r\n            <div class=\"form-group\">\r\n                <label>\u5546\u54c1\u540d<\/label>\r\n                <input class=\"form-control\" type=\"text\" v-model=\"name\">\r\n                <div class=\"text-danger\" v-if=\"errors.name\" v-text=\"errors.name\"><\/div>\r\n            <\/div>\r\n            <div class=\"form-group\">\r\n                <label>\u4fa1\u683c<\/label>\r\n                <input class=\"form-control\" type=\"text\" v-model=\"price\">\r\n                <div class=\"text-danger\" v-if=\"errors.price\" v-text=\"errors.price\"><\/div>\r\n            <\/div>\r\n            <div class=\"form-group\">\r\n                <label>\u753b\u50cf<\/label>\r\n                <input class=\"form-control\" type=\"file\" accept=\"image\/*\" @change=\"onFileChange\"<\/strong>>\r\n                <div class=\"text-danger\" v-if=\"errors.image\" v-text=\"errors.image\"><\/div>\r\n            <\/div>\r\n            <button class=\"btn btn-primary\" type=\"button\" @click=\"onSubmit\"<\/strong>>\u753b\u50cf\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3059\u308b<\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@2.6.0\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/axios\/0.19.0\/axios.min.js\"><\/script>\r\n<script>\r\n\r\n    new Vue({\r\n        el: '#app',\r\n        data: {\r\n            name: '',\r\n            price: 0,\r\n            imageFile: null,\r\n            errors: {\r\n                name: '',\r\n                price: '',\r\n                image: ''\r\n            }\r\n        },\r\n        methods: {\r\n            onFileChange(e) {\r\n\r\n                \/\/ \u9078\u629e\u3055\u308c\u305f\u753b\u50cf\u3092\u5909\u6570\u3067\u4fdd\u6301\u3059\u308b\r\n                this.imageFile = e.target.files[0];\r\n\r\n            },\r\n            onSubmit() {\r\n\r\n                \/\/ \u753b\u50cf\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\r\n                const url = '\/product';\r\n                let formData = new FormData();\r\n                formData.append('name', this.name);\r\n                formData.append('price', this.price);\r\n                formData.append('image', this.imageFile);\r\n\r\n                axios.post(url, formData)\r\n                    .then(response => {\r\n\r\n                        if(response.data.result) {\r\n\r\n                            alert('\u5546\u54c1\u767b\u9332\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002');\r\n\r\n                        }\r\n\r\n                    })\r\n                    .catch(error => {\r\n\r\n                        this.errors = {};\r\n                        const errors = error.response.data.errors;\r\n\r\n                        for(let key in errors) {\r\n\r\n                            this.errors[key] = errors[key][0];\r\n\r\n                        }\r\n\r\n                    });\r\n\r\n            }<\/strong>\r\n        }\r\n    });\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
    \u3053\u306e\u4e2d\u3067\u91cd\u8981\u306a\u306e\u306f\u3001onFileChange()<\/code>\u3068onSubmit()<\/code>\u3067\u3059\u3002<\/p>\n
    onFileChange()<\/code>\u3067\u306f\u3001\u753b\u50cf\u304c\u9078\u629e\u3055\u308c\u305f\u3068\u304d\u306b\u753b\u50cf\u30c7\u30fc\u30bf\u3092\u5909\u6570\u306b\u683c\u7d0d\u3057\u3001onSubmit()<\/code>\u3067\u306f\u305d\u306e\u30c7\u30fc\u30bf\u3092\u542b\u3081\u3066\u5165\u529b\u30c7\u30fc\u30bf\u3092Ajax<\/code>\u3067\u9001\u4fe1\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
    \u306a\u304a\u3001FormData<\/code>\u3092\u4f7f\u3063\u3066\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u4f5c\u3063\u3066\u3044\u308b\u3053\u3068\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u3053\u308c\u306f\u30d5\u30a1\u30a4\u30eb\u30c7\u30fc\u30bf\u306e\u9001\u4fe1\u304c\u5fc5\u8981\u3060\u304b\u3089\u3067\u3059\u3002<\/p>\n
    \u30c6\u30b9\u30c8\u3057\u3066\u307f\u308b<\/h1>\n
    \u3067\u306f\u3001\u5b9f\u969b\u306b\u5546\u54c1\u3092\u767b\u9332\u3057\u3066\u30c4\u30a4\u30c3\u30bf\u30fc\u6295\u7a3f\u304c\u3067\u304d\u308b\u304b\u30c1\u30a7\u30c3\u30af\u3057\u3066\u307f\u307e\u3057\u3087\u3046\uff01<\/p>\n
    \u307e\u305a\u30da\u30fc\u30b8\u3092\u958b\u3044\u3066\u5fc5\u8981\u306a\u9805\u76ee\u3092\u5165\u529b\u3057\u307e\u3059\u3002<\/p>\n
    \"\"<\/p>\n
    \u305d\u3057\u3066\u3001\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<\/p>\n
    \u3059\u308b\u3068\u3001\u4ee5\u4e0b\u306e\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n
    \"\"<\/p>\n
    \u3067\u306f\u3001\u30c4\u30a4\u30c3\u30bf\u30fc\u306e\u65b9\u304c\u3069\u3046\u306a\u3063\u3066\u308b\u304b\u30c1\u30a7\u30c3\u30af\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
    \"\"<\/p>\n
    \u306f\u3044\uff01\u3046\u307e\u304f\u753b\u50cf\u3064\u304d\u3067\u6295\u7a3f\u3055\u308c\u3066\u3044\u307e\u3059\u3002
    \n\u304a\u75b2\u308c\u69d8\u3067\u3057\u305f\ud83d\ude0a\u2728<\/p>\n
    \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b<\/h1>\n
    \u4eca\u56de\u5b9f\u969b\u306b\u958b\u767a\u3057\u305f\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u4e00\u5f0f\u3092\u4ee5\u4e0b\u304b\u3089\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
    \u203b \u305f\u3060\u3057\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3001\u30b3\u30f3\u30d5\u30a3\u30b0\u30d5\u30a1\u30a4\u30eb\u306e\u8a2d\u5b9a\u306a\u3069\u306f\u3054\u81ea\u8eab\u3067\u884c\u3063\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\tLaravel\u306b\u30c7\u30fc\u30bf\u767b\u9332\u3055\u308c\u305f\u3089Twitter\u306b\u6295\u7a3f<\/a>\n\n
    <\/div>\n
    \u30c4\u30a4\u30c3\u30bf\u30fc\u3067API\u30ad\u30fc\u3068\u30a2\u30af\u30bb\u30b9\u30fb\u30c8\u30fc\u30af\u30f3\u3092\u53d6\u5f97\u3059\u308b<\/h1>\n
    Laravel<\/code>\u304cTwitter<\/code>\u3068\u9023\u643a\u3059\u308b\u305f\u3081\u306b\u306f\u3001Twitter<\/code>\u304c\u63d0\u4f9b\u3059\u308b\u30ad\u30fc\u3068\u30c8\u30fc\u30af\u30f3\u3092\u53d6\u5f97\u3057\u306a\u3051\u308c\u3070\u3044\u3051\u307e\u305b\u3093\u3002\uff08\u6b63\u78ba\u306b\u306f\u4ee5\u4e0b\u306e\uff14\u3064\uff09<\/p>\n