{"id":12628,"date":"2024-05-12T07:00:09","date_gmt":"2024-05-11T22:00:09","guid":{"rendered":"https:\/\/blog.capilano-fw.com\/?p=12628"},"modified":"2024-05-12T05:46:18","modified_gmt":"2024-05-11T20:46:18","slug":"laravel-%e3%81%a7-x%ef%bc%88%e6%97%a7twitter%ef%bc%89%e3%81%ae%e8%89%af%e3%83%9d%e3%82%b9%e3%83%88%e3%82%92%e6%8e%a2%e3%81%99%e4%be%bf%e5%88%a9%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0%e3%82%92%e3%81%a4","status":"publish","type":"post","link":"https:\/\/blog.capilano-fw.com\/?p=12628","title":{"rendered":"Laravel \u3067 X\uff08Twitter\uff09\u306e\u826f\u30dd\u30b9\u30c8\u3092\u63a2\u3059\u4fbf\u5229\u30d5\u30a9\u30fc\u30e0\u3092\u3064\u304f\u308b"},"content":{"rendered":"<p>\u3055\u3066\u3055\u3066\u3001\u6700\u8fd1\u306e\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\u3067\u306f\u6b20\u304b\u305b\u306a\u3044\u5b58\u5728\u3068\u8a00\u3048\u3070\u3001\u3084\u306f\u308a\u3001<\/p>\n<p><strong style=\"font-size: 35px;\">SNS\uff08YouTube\u3001Instagram\u3001X \u306a\u3069\uff09<\/strong><\/p>\n<p>\u3067\u3059\u3088\u306d\u3002<\/p>\n<p>\u3068\u3044\u3046\u306e\u3082\u3001\u3082\u3057<code>SNS<\/code>\u306b\u30d5\u30a9\u30ed\u30ef\u30fc\u3055\u3093\u304c\u591a\u3051\u308c\u3070\u3001<br \/>\n\u826f\u3044\u3053\u3068\u3070\u304b\u308a\u3060\u304b\u3089\u3067\u3059\u3002<\/p>\n<p>\u4f8b\u3048\u3070\u3001<\/p>\n<ul>\n<li>\u5e83\u544a\u8cbb\u306a\u3057\u3067\u96c6\u5ba2\u3067\u304d\u308b<\/li>\n<li>\u30d5\u30a1\u30f3\u5316\u3057\u3066\u3044\u308b\u306e\u3067\u6210\u7d04\u7387\u304c\u9ad8\u3044<\/li>\n<li>\u540c\u3058\u7406\u7531\u304b\u3089\u3001\u9ad8\u5358\u4fa1\u306e\u3082\u306e\u304c\u58f2\u308c\u308b<\/li>\n<li>\u540c\u3058\u7406\u7531\u304b\u3089\u3001\u4ed6\u306e\u5546\u54c1\u3082\u8cb7\u3063\u3066\u3082\u3089\u3048\u308b<\/li>\n<li>\u4e8b\u524d\u306b\u7406\u5ff5\u3092\u5171\u6709\u3067\u304d\u308b\u306e\u3067\u3001\u8cea\u306e\u3044\u3044\u63a1\u7528\u304c\u3067\u304d\u308b<\/li>\n<\/ul>\n<p>\u306a\u306e\u3067\u3001\u4f01\u696d\u3055\u3093\u3082<code>SNS<\/code>\u306b\u529b\u3092\u5165\u308c\u3066\u3044\u308b\u3088\u3046\u3067\u3059\u3002<br \/>\n\uff08\u305f\u3060\u3057\u3001\u5c5e\u4eba\u5316\u3057\u3066\u3057\u307e\u3046\u306e\u304c\u60a9\u307f\u3060\u305d\u3046\u3067\u3059\u2026\u62c5\u5f53\u8005\u304c\u3084\u3081\u3061\u3083\u3046\u306e\u3067\ud83d\ude05\uff09<\/p>\n<p>\u305d\u3057\u3066\u3001\u3053\u306e\u6d41\u308c\u3092\u8003\u3048\u308b\u3068\u79c1\u3082\u672c\u683c\u7684\u306b<code>SNS<\/code>\u306e\u52c9\u5f37\u3092\u3059\u308b\u3079\u304d<br \/>\n\u3068\u3044\u3046\u7d50\u8ad6\u306b\u306a\u308a\u3001\u5c0a\u656c\u3059\u308b\u793e\u9577\u3055\u3093\u306e\u6709\u6599\u6559\u6750\u3092\u8cfc\u5165\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<p><strong>\ud83d\udcdd \u53c2\u8003\u30da\u30fc\u30b8\uff08PR\uff09\uff1a\u00a0<\/strong><a href=\"https:\/\/brmk.io\/JVYM\" target=\"_blank\" rel=\"noopener\">Twitter\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\u30de\u30b9\u30bf\u30fc\u8b1b\u5ea7<\/a><\/p>\n<p>\u3084\u306f\u308a\u6709\u6599\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u3053\u308c\u307e\u3067\u5168\u304f\u60f3\u50cf\u3057\u3066\u3044\u306a\u304b\u3063\u305f\u30a2\u30d7\u30ed\u30fc\u30c1\u65b9\u6cd5<br \/>\n\u3092\u5b66\u3076\u3053\u3068\u304c\u3067\u304d\u3066\u3001\u3068\u3066\u3082\u6e80\u8db3\u3057\u3066\u307e\u3059\u3002\ud83d\ude0a\u2728<\/p>\n<p>\u305d\u3057\u3066\u3001\u305d\u306e\u6559\u6750\u306e\u4e2d\u3067\u306f<code>X<\/code>\u3067\u826f\u30dd\u30b9\u30c8\u3092\u63a2\u3059\u65b9\u6cd5\u3092\u52c9\u5f37\u3059\u308b\u306e\u3067\u3059\u304c\u3001<br \/>\n\u6bce\u56de\u691c\u7d22\u30b3\u30de\u30f3\u30c9\u3092\u5165\u529b\u3059\u308b\u306e\u304c\u9762\u5012\u3067\u3057\u305f\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12629\" style=\"border: 3px solid #000;\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_1.png\" alt=\"\" width=\"592\" height=\"159\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_1.png 592w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_1-300x81.png 300w\" sizes=\"auto, (max-width: 592px) 100vw, 592px\" \/><\/p>\n<p>\u3058\u3083\u3042\u3001\u4f7f\u3044\u3084\u3059\u3044\u691c\u7d22\u30d5\u30a9\u30fc\u30e0\u3092\u30d1\u30d1\u30c3\u3068\u4f5c\u3063\u3061\u3083\u304a\u3046\uff01<br \/>\n\u3068\u3044\u3046\u306e\u304c\u4eca\u56de\u306e\u8da3\u65e8\u3067\u3059\u3002<\/p>\n<p>\u203b \u306a\u304a\u3001<code>X<\/code>\u306e\u691c\u7d22\u30b3\u30de\u30f3\u30c9\u306f\u516c\u958b\u3055\u308c\u3066\u3044\u308b\u60c5\u5831\u3092\u5143\u306b\u3057\u3066\u3064\u304f\u3063\u3066\u307e\u3059\u3002\u5ff5\u306e\u305f\u3081\uff01<\/p>\n<p>\u4eca\u56de\u306f\u30b7\u30f3\u30d7\u30eb\u306a\u306e\u3067\u3001\u305c\u3072<code>Laravel<\/code>\u306e\u52c9\u5f37\u3092\u3057\u305f\u3044\u65b9\u3082<br \/>\n\u771f\u4f3c\u3057\u3066\u4f5c\u3063\u3066\u3082\u3089\u3063\u305f\u3089\u30b9\u30ad\u30eb\u30a2\u30c3\u30d7\u306b\u306a\u308b\u3068\u601d\u3044\u307e\u3059\uff01<\/p>\n<p>\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<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3344 aligncenter\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2019\/04\/no_22.png\" alt=\"\" width=\"320\" height=\"320\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2019\/04\/no_22.png 320w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2019\/04\/no_22-150x150.png 150w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2019\/04\/no_22-300x300.png 300w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2019\/04\/no_22-100x100.png 100w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/>\u300c\u6709\u6599\u306e\u60c5\u5831\u3063\u3066<br \/>\n\u60f3\u50cf\u3057\u3066\u305f\u306e\u3068\u5168\u7136<br \/>\n\u9055\u3063\u3066\u305f\u306a\u3041\uff08\u611f\u5fc3\uff09\u300d<\/p>\n<p><strong>\u958b\u767a\u74b0\u5883\uff1a<\/strong> Laravel + Inertia + Vue 3\uff08<code>Composition API<\/code>\uff09<\/p>\n<h1>\u74b0\u5883\u3092\u6574\u3048\u308b<\/h1>\n<p><code>Laravel + Inertia + Vue 3<\/code>\u304c\u4f7f\u3048\u308b\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u306b<br \/>\n\u4e00\u756a\u624b\u3063\u53d6\u308a\u65e9\u3044\u306e\u304c<code>Laravel breeze<\/code>\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u3053\u3068\u3067\u3059\u3002<\/p>\n<p><code>Laravel breeze<\/code>\u306f\u30ed\u30b0\u30a4\u30f3\u5468\u308a\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3067\u3059\u304c\u3001\u4eca\u56de\u306e\u74b0\u5883\u3092\u3059\u3079\u3066<br \/>\n\u6e80\u305f\u3057\u3066\u3044\u308b\u306e\u3067\u5148\u306b\u3053\u308c\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u4e0b\u3055\u3044\u3002<\/p>\n<div>\n<pre><strong>composer require laravel\/breeze --dev<\/strong><\/pre>\n<p>\u3059\u308b\u3068\u30d1\u30c3\u30b1\u30fc\u30b8\u304c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u308b\u306e\u3067\u3001<br \/>\n\u7d9a\u3051\u3066\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u4e0b\u3055\u3044\u3002<\/p>\n<\/div>\n<div>\n<pre><strong>php artisan breeze:install<\/strong><\/pre>\n<\/div>\n<p>\u3059\u308b\u3068\u3001\u3069\u306e\u30e2\u30fc\u30c9\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u304b\u805e\u304b\u308c\u308b\u306e\u3067\u3001<br \/>\n\u4eca\u56de\u306f<code>Vue with Inertia<\/code>\u3092\u9078\u629e\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12630\" style=\"border: 3px solid #000;\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_2.png\" alt=\"\" width=\"626\" height=\"242\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_2.png 626w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_2-300x116.png 300w\" sizes=\"auto, (max-width: 626px) 100vw, 626px\" \/><\/p>\n<p>\u7d9a\u304f\u30aa\u30d7\u30b7\u30e7\u30f3\u306f\u4f55\u3082\u9078\u629e\u305b\u305a\u30a8\u30f3\u30bf\u30fc\u30ad\u30fc\u3092\u62bc\u3057\u307e\u3059\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12631\" style=\"border: 3px solid #000;\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_3.png\" alt=\"\" width=\"610\" height=\"155\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_3.png 610w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_3-300x76.png 300w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/p>\n<p>\u30c6\u30b9\u30c8\u3082\u305d\u306e\u307e\u307e\uff08\u305d\u306e\u3046\u3061<code>Pest<\/code>\u3082\u52c9\u5f37\u3057\u306a\u304d\u3083\u2026\ud83d\ude05\uff09<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12632\" style=\"border: 3px solid #000;\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/Screenshot-from-2024-04-08-17-57-21.png\" alt=\"\" width=\"612\" height=\"126\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/Screenshot-from-2024-04-08-17-57-21.png 612w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/Screenshot-from-2024-04-08-17-57-21-300x62.png 300w\" sizes=\"auto, (max-width: 612px) 100vw, 612px\" \/><\/p>\n<p>\u3053\u308c\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u3042\u3068\u306f\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308c\u3070\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n<div>\n<pre><strong>php artisan migrate<\/strong>\r\n<strong>npm install<\/strong>\r\n<strong>npm run dev<\/strong><\/pre>\n<p>\u3061\u306a\u307f\u306b\u8868\u793aURL\u306f<code>.env<\/code>\u5185\u306e<code>APP_URL<\/code>\u304c\u9069\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n<p><strong>.env<\/strong><\/p>\n<div>\n<pre><strong>APP_URL<\/strong>=\uff08\u3053\u3053\u306b\u3042\u306a\u305f\u306e\u74b0\u5883\u306eURL\u3002localhost\u3068\u304bl11x.test\u3068\u304b\u3067\u3059\u306d\uff09<\/pre>\n<h1>JS \u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<\/h1>\n<p>\u4eca\u56de\u4ee5\u4e0b\uff12\u3064\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u4f7f\u3046\u306e\u3067\u3001\u5148\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<ul>\n<li>dayjs\uff1a \u65e5\u4ed8\u3092\u7ba1\u7406\u3059\u308b<\/li>\n<li>Lodash\uff1a \u4fbf\u5229\u6a5f\u80fd\u304c\u6e80\u8f09\u306a\u30d1\u30c3\u30b1\u30fc\u30b8<\/li>\n<\/ul>\n<p>\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u4e0b\u3055\u3044\u3002<\/p>\n<div>\n<pre><strong>npm i lodash --save-dev<\/strong>\r\n<strong>npm i dayjs --save-dev<\/strong><\/pre>\n<p>\u3059\u308b\u3068\u3001\u30d1\u30c3\u30b1\u30fc\u30b8\u304c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u307e\u3059\u304c<br \/>\n\u307e\u3060\u3053\u306e\u72b6\u614b\u3067\u306f<code>Vue<\/code>\u304b\u3089\u547c\u3073\u51fa\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n<p>\u4ee5\u4e0b\u306b\u767b\u9332\u3092\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p><strong>resources\/js\/bootstrap.js<\/strong><\/p>\n<div>\n<pre>\/\/ \u7701\u7565\r\n\r\n<strong>\/\/ dayjs<\/strong>\r\n<strong>import dayjs from \"dayjs\";<\/strong>\r\n<strong>import 'dayjs\/locale\/ja';<\/strong>\r\n<strong>window.dayjs = dayjs;<\/strong>\r\n<strong>dayjs.locale('ja');<\/strong>\r\n\r\n<strong>\/\/ Lodash<\/strong>\r\n<strong>import _ from 'lodash';<\/strong>\r\n<strong>window._ = _;<\/strong><\/pre>\n<p>\u3053\u308c\u3067\u3001<code>Vue<\/code>\u5074\u304b\u3089\u3082<code>dayjs<\/code>\u3068<code>_<\/code>\u306b\u30a2\u30af\u30bb\u30b9\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<\/div>\n<\/div>\n<h1>Vue \u30d5\u30a1\u30a4\u30eb\u3092\u3064\u304f\u308b<\/h1>\n<p>\u3067\u306f\u3001\u4eca\u56de\u306f\u30b7\u30f3\u30d7\u30eb\u306a\u69cb\u9020\u306a\u306e\u3067\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306f\u4f5c\u3089\u305a<br \/>\n\u3044\u304d\u306a\u308a<code>Vue<\/code>\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n<p>\u203b \u3082\u3057\u5b9f\u969b\u306b\u30b5\u30a4\u30c8\u3092\u3064\u304f\u308b\u5834\u5408\u306f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u4f5c\u3063\u305f\u307b\u3046\u304c\u3044\u3044\u3067\u3059\u3002<\/p>\n<\/div>\n<\/div>\n<p><strong>resources\/js\/Pages\/UsefulForm.vue<\/strong><\/p>\n<div>\n<pre><strong>&lt;script setup&gt;<\/strong>\r\n<strong>import {computed, onBeforeMount, onMounted, ref} from 'vue';<\/strong>\r\n<strong>import { Head } from '@inertiajs\/vue3';<\/strong>\r\n\r\n<strong>\/\/ Form<\/strong>\r\n<strong>const keyword = ref('');<\/strong>\r\n<strong>const params = ref({<\/strong>\r\n<strong>    from: '',<\/strong>\r\n<strong>    min_faves: 100,<\/strong>\r\n<strong>    min_retweets: 100,<\/strong>\r\n<strong>    min_replies: 100,<\/strong>\r\n<strong>    since: '',<\/strong>\r\n<strong>    until: ''<\/strong>\r\n<strong>});<\/strong>\r\n<strong>const toggle = ref({});<\/strong>\r\n<strong>onBeforeMount(() =&gt; {<\/strong>\r\n\r\n<strong>    let toggleValues = {};<\/strong>\r\n\r\n<strong>    for(let key in params.value) {<\/strong>\r\n\r\n<strong>        toggleValues[key] = false;<\/strong>\r\n\r\n<strong>    }<\/strong>\r\n\r\n<strong>    toggle.value = toggleValues;<\/strong>\r\n\r\n<strong>});<\/strong>\r\n<strong>\/\/ Inputs<\/strong>\r\n<strong>const onInputChange = (key) =&gt; {<\/strong>\r\n\r\n<strong>    toggle.value[key] = params.value[key] !== '';<\/strong>\r\n\r\n<strong>};<\/strong>\r\n<strong>const onClearKeywordClick = () =&gt; {<\/strong>\r\n\r\n<strong>    keyword.value = '';<\/strong>\r\n<strong>    document.getElementById('keyword-input').focus();<\/strong>\r\n\r\n<strong>};<\/strong>\r\n<strong>const setDate = (paramKey, type) =&gt; {<\/strong>\r\n\r\n<strong>    let dt = dayjs();<\/strong>\r\n\r\n<strong>    if (type === 'year') {<\/strong>\r\n\r\n<strong>        dt = dt.subtract(1, 'year');<\/strong>\r\n\r\n<strong>    } else if (type === 'month') {<\/strong>\r\n\r\n<strong>        dt = dt.subtract(1, 'month');<\/strong>\r\n\r\n<strong>    } else if (type === 'week') {<\/strong>\r\n\r\n<strong>        dt = dt.subtract(1, 'week');<\/strong>\r\n\r\n<strong>    } else if (type === 'yesterday') {<\/strong>\r\n\r\n<strong>        dt = dt.subtract(1, 'day');<\/strong>\r\n\r\n<strong>    }<\/strong>\r\n\r\n<strong>    params.value[paramKey] = dt.format('YYYY-MM-DD');<\/strong>\r\n<strong>    toggle.value[paramKey] = true;<\/strong>\r\n\r\n<strong>};<\/strong>\r\n\r\n<strong>\/\/ Search<\/strong>\r\n<strong>const searchUrl = computed(() =&gt; {<\/strong>\r\n\r\n<strong>    let searchParams = [];<\/strong>\r\n\r\n<strong>    if (keyword.value) {<\/strong>\r\n\r\n<strong>        searchParams.push(keyword.value);<\/strong>\r\n\r\n<strong>    }<\/strong>\r\n\r\n<strong>    for (const [key, value] of Object.entries(params.value)) {<\/strong>\r\n\r\n<strong>        if (toggle.value[key] &amp;&amp; value) {<\/strong>\r\n\r\n<strong>            searchParams.push(`${key}:${value}`);<\/strong>\r\n\r\n<strong>        }<\/strong>\r\n\r\n<strong>    }<\/strong>\r\n\r\n<strong>    let searchUrl = `https:\/\/twitter.com\/search?q=${searchParams.join(' ')}`;<\/strong>\r\n\r\n<strong>    if(currentIncludeItems.value.length &gt; 0) {<\/strong>\r\n\r\n<strong>        searchUrl += ' filter:';<\/strong>\r\n\r\n<strong>        for(let i = 0; i &lt; currentIncludeItems.value.length; i++) {<\/strong>\r\n\r\n<strong>            searchUrl += currentIncludeItems.value[i];<\/strong>\r\n\r\n<strong>            if(i &lt; currentIncludeItems.value.length - 1) {<\/strong>\r\n\r\n<strong>                searchUrl += ' ';<\/strong>\r\n\r\n<strong>            }<\/strong>\r\n\r\n<strong>        }<\/strong>\r\n\r\n<strong>    }<\/strong>\r\n\r\n<strong>    return searchUrl;<\/strong>\r\n<strong>});<\/strong>\r\n<strong>const currentIncludeItems = ref([]);<\/strong>\r\n<strong>const includingItems = ref([<\/strong>\r\n<strong>    { value: 'images', label: '\u753b\u50cf\u3092\u542b\u3080' },<\/strong>\r\n<strong>    { value: 'videos', label: '\u52d5\u753b\u3092\u542b\u3080' },<\/strong>\r\n<strong>    { value: 'links', label: '\u30ea\u30f3\u30af\u3092\u542b\u3080' },<\/strong>\r\n<strong>]);<\/strong>\r\n\r\n<strong>\/\/ DataList<\/strong>\r\n<strong>const dataList = ref({<\/strong>\r\n<strong>    keyword: [],<\/strong>\r\n<strong>    from: [],<\/strong>\r\n<strong>});<\/strong>\r\n<strong>const onSearchButtonClick = () =&gt; {<\/strong>\r\n\r\n<strong>    setDataList('keyword', keyword.value);<\/strong>\r\n<strong>    setDataList('from', params.value.from);<\/strong>\r\n\r\n<strong>    localStorage.setItem('dataList', JSON.stringify(dataList.value));<\/strong>\r\n\r\n<strong>};<\/strong>\r\n<strong>const setDataList = (dataListKey, text) =&gt; {<\/strong>\r\n\r\n<strong>    if(text.length &gt; 0) {<\/strong>\r\n\r\n<strong>        const targetDataList = dataList.value[dataListKey];<\/strong>\r\n<strong>        let hasDataListItem = false;<\/strong>\r\n\r\n<strong>        for(let i = 0; i &lt; targetDataList.length; i++) {<\/strong>\r\n\r\n<strong>            let dataListItem = targetDataList[i];<\/strong>\r\n\r\n<strong>            if(dataListItem.text === text) {<\/strong>\r\n\r\n<strong>                dataListItem.count++;<\/strong>\r\n<strong>                hasDataListItem = true;<\/strong>\r\n<strong>                break;<\/strong>\r\n\r\n<strong>            }<\/strong>\r\n\r\n<strong>        }<\/strong>\r\n\r\n<strong>        if(! hasDataListItem) {<\/strong>\r\n\r\n<strong>            targetDataList.push({<\/strong>\r\n<strong>                text: text,<\/strong>\r\n<strong>                count: 1<\/strong>\r\n<strong>            });<\/strong>\r\n\r\n<strong>        }<\/strong>\r\n\r\n<strong>    }<\/strong>\r\n\r\n<strong>};<\/strong>\r\n<strong>const dataListKeywords = computed(() =&gt; {<\/strong>\r\n\r\n<strong>    return _.sortBy(dataList.value.keyword, 'count').reverse(); \/\/ \u691c\u7d22\u304c\u591a\u3044\u9806\u306b\u4e26\u3073\u66ff\u3048<\/strong>\r\n\r\n<strong>});<\/strong>\r\n<strong>const dataListFroms = computed(() =&gt; {<\/strong>\r\n\r\n<strong>    return _.sortBy(dataList.value.from, 'count').reverse(); \/\/ \u691c\u7d22\u304c\u591a\u3044\u9806\u306b\u4e26\u3073\u66ff\u3048<\/strong>\r\n\r\n<strong>});<\/strong>\r\n<strong>onMounted(() =&gt; {<\/strong>\r\n\r\n<strong>    const storage = localStorage.getItem('dataList');<\/strong>\r\n\r\n<strong>    if (storage) {<\/strong>\r\n\r\n<strong>        try {<\/strong>\r\n\r\n<strong>            dataList.value = JSON.parse(storage);<\/strong>\r\n\r\n<strong>        } catch (e) {}<\/strong>\r\n\r\n<strong>    }<\/strong>\r\n\r\n<strong>});<\/strong>\r\n\r\n<strong>&lt;\/script&gt;<\/strong>\r\n\r\n<strong>&lt;template&gt;<\/strong>\r\n<strong>    &lt;Head title=\"X \u30dd\u30b9\u30c8 \/ \u30ea\u30b5\u30fc\u30c1\" \/&gt;<\/strong>\r\n<strong>    &lt;div class=\"max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8 bg-gray-200\"&gt;<\/strong>\r\n<strong>        &lt;div class=\"text-center text-2xl mb-6 font-bold\"&gt;<\/strong>\r\n<strong>            X \u30dd\u30b9\u30c8 \/ \u30ea\u30b5\u30fc\u30c1<\/strong>\r\n<strong>        &lt;\/div&gt;<\/strong>\r\n<strong>        &lt;table class=\"mx-auto table-auto\"&gt;<\/strong>\r\n<strong>            &lt;tbody&gt;<\/strong>\r\n<strong>            &lt;tr&gt;<\/strong>\r\n<strong>                &lt;td colspan=\"3\" class=\"pb-1\"&gt;<\/strong>\r\n<strong>                    &lt;input id=\"keyword-input\" list=\"keyword\" v-model=\"keyword\" type=\"text\" class=\"w-full border border-gray-300 px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" placeholder=\"\u30ad\u30fc\u30ef\u30fc\u30c9\"&gt;<\/strong>\r\n<strong>                    &lt;datalist id=\"keyword\"&gt;<\/strong>\r\n<strong>                        &lt;option v-for=\"keyword in dataListKeywords\" :value=\"keyword.text\"&gt;&lt;\/option&gt;<\/strong>\r\n<strong>                    &lt;\/datalist&gt;<\/strong>\r\n<strong>                    &lt;div class=\"text-right px-2 py-1 text-sm\"&gt;<\/strong>\r\n<strong>                        &lt;a href=\"#\" class=\"text-indigo-600 hover:text-indigo-800 text-sm cursor-pointer\" @click.prevent=\"onClearKeywordClick\"&gt;\u30af\u30ea\u30a2&lt;\/a&gt;<\/strong>\r\n<strong>                    &lt;\/div&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>            &lt;\/tr&gt;<\/strong>\r\n<strong>            &lt;tr&gt;<\/strong>\r\n<strong>                &lt;td class=\"w-10 align-top\"&gt;<\/strong>\r\n<strong>                    &lt;input type=\"checkbox\" v-model=\"toggle.from\" id=\"toggleFrom\" class=\"w-6 h-6 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500\"&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>                &lt;td class=\"w-40 align-top\"&gt;<\/strong>\r\n<strong>                    &lt;label for=\"toggleFrom\" class=\"text-sm font-medium text-gray-700 text-nowrap\"&gt;\u30a2\u30ab\u30a6\u30f3\u30c8ID:&lt;\/label&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>                &lt;td class=\"w-64\"&gt;<\/strong>\r\n<strong>                    &lt;input v-model=\"params.from\" list=\"from\" type=\"text\" class=\"w-full border border-gray-300 px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" @input=\"onInputChange('from')\"&gt;<\/strong>\r\n<strong>                    &lt;datalist id=\"from\"&gt;<\/strong>\r\n<strong>                        &lt;option v-for=\"from in dataListFroms\" :value=\"from.text\"&gt;&lt;\/option&gt;<\/strong>\r\n<strong>                    &lt;\/datalist&gt;<\/strong>\r\n<strong>                    &lt;div class=\"pt-0.5 p-1 text-gray-600\"&gt;<\/strong>\r\n<strong>                        &lt;small&gt;\u4f8b\uff1aelonmusk&lt;\/small&gt;<\/strong>\r\n<strong>                    &lt;\/div&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>            &lt;\/tr&gt;<\/strong>\r\n<strong>            &lt;tr&gt;<\/strong>\r\n<strong>                &lt;td&gt;<\/strong>\r\n<strong>                    &lt;input type=\"checkbox\" v-model=\"toggle.min_faves\" id=\"toggleMinFavorites\" class=\"w-6 h-6 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500\"&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>                &lt;td&gt;<\/strong>\r\n<strong>                    &lt;label for=\"toggleMinFavorites\" class=\"text-sm font-medium text-gray-700 text-nowrap\"&gt;\u6700\u5c0f\u3044\u3044\u306d\u6570:&lt;\/label&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>                &lt;td&gt;<\/strong>\r\n<strong>                    &lt;input v-model=\"params.min_faves\" type=\"number\" class=\"w-full border border-gray-300 px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" placeholder=\"0\" @input=\"onInputChange('min_faves')\"&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>            &lt;\/tr&gt;<\/strong>\r\n<strong>            &lt;tr&gt;<\/strong>\r\n<strong>                &lt;td&gt;<\/strong>\r\n<strong>                    &lt;input type=\"checkbox\" v-model=\"toggle.min_retweets\" id=\"toggleMinRetweets\" class=\"w-6 h-6 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500\"&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>                &lt;td&gt;<\/strong>\r\n<strong>                    &lt;label for=\"toggleMinRetweets\" class=\"text-sm font-medium text-gray-700 text-nowrap\"&gt;\u6700\u5c0f\u30ea\u30c4\u30a4\u30fc\u30c8\u6570:&lt;\/label&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>                &lt;td&gt;<\/strong>\r\n<strong>                    &lt;input v-model=\"params.min_retweets\" type=\"number\" class=\"w-full border border-gray-300 px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" placeholder=\"0\" @input=\"onInputChange('min_retweets')\"&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>            &lt;\/tr&gt;<\/strong>\r\n<strong>            &lt;tr&gt;<\/strong>\r\n<strong>                &lt;td&gt;<\/strong>\r\n<strong>                    &lt;input type=\"checkbox\" v-model=\"toggle.min_replies\" id=\"toggleMinReplies\" class=\"w-6 h-6 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500\"&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>                &lt;td&gt;<\/strong>\r\n<strong>                    &lt;label for=\"toggleMinReplies\" class=\"text-sm font-medium text-gray-700 text-nowrap\"&gt;\u6700\u5c0f\u30ea\u30d7\u30e9\u30a4\u6570:&lt;\/label&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>                &lt;td&gt;<\/strong>\r\n<strong>                    &lt;input v-model=\"params.min_replies\" type=\"number\" class=\"w-full border border-gray-300 px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" placeholder=\"0\" @input=\"onInputChange('min_replies')\"&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>            &lt;\/tr&gt;<\/strong>\r\n<strong>            &lt;tr&gt;<\/strong>\r\n<strong>                &lt;td class=\"align-top\"&gt;<\/strong>\r\n<strong>                    &lt;input type=\"checkbox\" v-model=\"toggle.since\" id=\"toggleSince\" class=\"w-6 h-6 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500\"&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>                &lt;td class=\"align-top\"&gt;<\/strong>\r\n<strong>                    &lt;label for=\"toggleSince\" class=\"text-sm font-medium text-gray-700 text-nowrap\"&gt;\u958b\u59cb\u65e5:&lt;\/label&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>                &lt;td&gt;<\/strong>\r\n<strong>                    &lt;input v-model=\"params.since\" :max=\"params.until\" type=\"date\" class=\"w-full border border-gray-300 px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" @input=\"onInputChange('since')\"&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>            &lt;\/tr&gt;<\/strong>\r\n<strong>            &lt;tr&gt;<\/strong>\r\n<strong>                &lt;td colspan=\"3\"&gt;<\/strong>\r\n<strong>                    &lt;div class=\"text-right p-1 text-gray-400\"&gt;<\/strong>\r\n<strong>                        &lt;a href=\"#\" @click=\"setDate('since', 'year')\" class=\"text-indigo-600 hover:text-indigo-800 text-sm cursor-pointer\"&gt;\uff11\u5e74\u524d&lt;\/a&gt; \/<\/strong>\r\n<strong>                        &lt;a href=\"#\" @click=\"setDate('since', 'month')\" class=\"text-indigo-600 hover:text-indigo-800 text-sm cursor-pointer\"&gt;\uff11\u30f6\u6708\u524d&lt;\/a&gt; \/<\/strong>\r\n<strong>                        &lt;a href=\"#\" @click=\"setDate('since', 'week')\" class=\"text-indigo-600 hover:text-indigo-800 text-sm cursor-pointer\"&gt;\uff11\u9031\u9593\u524d&lt;\/a&gt; \/<\/strong>\r\n<strong>                        &lt;a href=\"#\" @click=\"setDate('since', 'yesterday')\" class=\"text-indigo-600 hover:text-indigo-800 text-sm cursor-pointer\"&gt;\u6628\u65e5&lt;\/a&gt; \/<\/strong>\r\n<strong>                        &lt;a href=\"#\" @click=\"setDate('since', 'today')\" class=\"text-indigo-600 hover:text-indigo-800 text-sm cursor-pointer\"&gt;\u4eca\u65e5&lt;\/a&gt;<\/strong>\r\n<strong>                    &lt;\/div&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>            &lt;\/tr&gt;<\/strong>\r\n<strong>            &lt;tr&gt;<\/strong>\r\n<strong>                &lt;td class=\"align-top\"&gt;<\/strong>\r\n<strong>                    &lt;input type=\"checkbox\" v-model=\"toggle.until\" id=\"toggleUntil\" class=\"w-6 h-6 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500\"&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>                &lt;td class=\"align-top\"&gt;<\/strong>\r\n<strong>                    &lt;label for=\"toggleUntil\" class=\"text-sm font-medium text-gray-700 text-nowrap\"&gt;\u7d42\u4e86\u65e5:&lt;\/label&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>                &lt;td&gt;<\/strong>\r\n<strong>                    &lt;input v-model=\"params.until\" :min=\"params.since\" type=\"date\" class=\"w-full border border-gray-300 px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" @input=\"onInputChange('until')\"&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>            &lt;\/tr&gt;<\/strong>\r\n<strong>            &lt;tr&gt;<\/strong>\r\n<strong>                &lt;td colspan=\"3\"&gt;<\/strong>\r\n<strong>                    &lt;div class=\"text-right p-1 text-gray-400\"&gt;<\/strong>\r\n<strong>                        &lt;a href=\"#\" @click=\"setDate('until', 'year')\" class=\"text-indigo-600 hover:text-indigo-800 text-sm cursor-pointer\"&gt;\uff11\u5e74\u524d&lt;\/a&gt; \/<\/strong>\r\n<strong>                        &lt;a href=\"#\" @click=\"setDate('until', 'month')\" class=\"text-indigo-600 hover:text-indigo-800 text-sm cursor-pointer\"&gt;\uff11\u30f6\u6708\u524d&lt;\/a&gt; \/<\/strong>\r\n<strong>                        &lt;a href=\"#\" @click=\"setDate('until', 'week')\" class=\"text-indigo-600 hover:text-indigo-800 text-sm cursor-pointer\"&gt;\uff11\u9031\u9593\u524d&lt;\/a&gt; \/<\/strong>\r\n<strong>                        &lt;a href=\"#\" @click=\"setDate('until', 'yesterday')\" class=\"text-indigo-600 hover:text-indigo-800 text-sm cursor-pointer\"&gt;\u6628\u65e5&lt;\/a&gt; \/<\/strong>\r\n<strong>                        &lt;a href=\"#\" @click=\"setDate('until', 'today')\" class=\"text-indigo-600 hover:text-indigo-800 text-sm cursor-pointer\"&gt;\u4eca\u65e5&lt;\/a&gt;<\/strong>\r\n<strong>                    &lt;\/div&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>            &lt;\/tr&gt;<\/strong>\r\n<strong>            &lt;tr&gt;<\/strong>\r\n<strong>                &lt;td colspan=\"3\" class=\"pt-4\"&gt;<\/strong>\r\n<strong>                    &lt;div class=\"text-sm font-medium text-gray-700 mb-2\"&gt;\u542b\u3080\u30a2\u30a4\u30c6\u30e0:&lt;\/div&gt;<\/strong>\r\n<strong>                    &lt;div class=\"flex flex-wrap\"&gt;<\/strong>\r\n<strong>                        &lt;div class=\"mr-2\" v-for=\"item in includingItems\"&gt;<\/strong>\r\n<strong>                            &lt;label class=\"text-sm font-medium text-gray-700 ml-1 flex items-center\"&gt;<\/strong>\r\n<strong>                                &lt;input type=\"checkbox\" v-model=\"currentIncludeItems\" :value=\"item.value\" class=\"w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500 mr-1\"&gt;<\/strong>\r\n<strong>                                {{ item.label }}<\/strong>\r\n<strong>                            &lt;\/label&gt;<\/strong>\r\n<strong>                        &lt;\/div&gt;<\/strong>\r\n<strong>                    &lt;\/div&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>            &lt;\/tr&gt;<\/strong>\r\n<strong>            &lt;tr&gt;<\/strong>\r\n<strong>                &lt;td colspan=\"3\" class=\"pt-3 text-right\"&gt;<\/strong>\r\n<strong>                    &lt;a :href=\"searchUrl\" class=\"inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\" target=\"_blank\" @click=\"onSearchButtonClick\"&gt;<\/strong>\r\n<strong>                        \u691c\u7d22<\/strong>\r\n<strong>                    &lt;\/a&gt;<\/strong>\r\n<strong>                &lt;\/td&gt;<\/strong>\r\n<strong>            &lt;\/tr&gt;<\/strong>\r\n<strong>            &lt;\/tbody&gt;<\/strong>\r\n<strong>        &lt;\/table&gt;<\/strong>\r\n<strong>    &lt;\/div&gt;<\/strong>\r\n<strong>&lt;\/template&gt;<\/strong><\/pre>\n<\/div>\n<div>\n<p>\u3061\u306a\u307f\u306b\u3001\u4eca\u56de\u5b9f\u88c5\u3057\u3066\u3044\u308b\u5185\u5bb9\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n<ul>\n<li>\u691c\u7d22\u3057\u305f\u30ad\u30fc\u30ef\u30fc\u30c9\u304c LocalStorage \u306b\u4fdd\u5b58\u3055\u308c\u3066\u3001\u6b21\u56de\u304b\u3089\u5165\u529b\u88dc\u5b8c\u304c\u3067\u304d\u308b<\/li>\n<li>\u691c\u7d22\u56de\u6570\u304c\u591a\u3044\u9806\u306b\u81ea\u52d5\u3067\u4e26\u3079\u66ff\u3048\u308b<\/li>\n<li>\u30a2\u30ab\u30a6\u30f3\u30c8ID\u3082\u540c\u3058\u5f62\u3067\u5165\u529b\u88dc\u5b8c\u3067\u304d\u308b<\/li>\n<li>\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3067\u691c\u7d22\u3057\u305f\u3044\u5185\u5bb9\u3092\u9078\u629e\u3067\u304d\u308b<\/li>\n<li>\u65e5\u4ed8\u306f\u9078\u629e\u304c\u9762\u5012\u306a\u306e\u3067\u30ef\u30f3\u30af\u30ea\u30c3\u30af\u3067\u5b8c\u4e86\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b<\/li>\n<li>\u305d\u306e\u4ed6\u30aa\u30d7\u30b7\u30e7\u30f3\u3082\u9078\u629e\u53ef\u80fd\u306b\u3059\u308b<\/li>\n<\/ul>\n<p>\u3061\u306a\u307f\u306b\u3001\u305d\u306e\u4ed6\u306e\u30b3\u30de\u30f3\u30c9\u306f\u3053\u3061\u3089\u304c\u308f\u304b\u308a\u3084\u3059\u3044\u3067\u3059\u3002<\/p>\n<p><strong>\ud83d\udcdd \u53c2\u8003\u30da\u30fc\u30b8\uff1a\u00a0<\/strong><a href=\"https:\/\/tech-camp.in\/note\/technology\/99382\/#Twitter\" target=\"_blank\" rel=\"noopener\">\u3010Twitter\u30e6\u30fc\u30b6\u30fc\u5fc5\u898b\u3011\u4fbf\u5229\u306a\u691c\u7d22\u30b3\u30de\u30f3\u30c925\u9078\uff01\u3044\u3044\u306d\u6570\u3084\u7279\u5b9a\u30e6\u30fc\u30b6\u30fc\u3067\u691c\u7d22<\/a><\/p>\n<p>\u305d\u3057\u3066\u3001<code>LocalStorage<\/code>\u306f\u3001\u4ee5\u4e0b\u306e\uff12\u30d1\u30bf\u30fc\u30f3\u306e\u307f\u3067\u3059\u3002<\/p>\n<ul>\n<li>\u30da\u30fc\u30b8\u8aad\u307f\u8fbc\u307f\u6642\u306b\u53d6\u5f97<\/li>\n<li>\u691c\u7d22\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u305f\u3089\u4fdd\u5b58<\/li>\n<\/ul>\n<h1>\u30eb\u30fc\u30c8\u3092\u3064\u304f\u308b<\/h1>\n<\/div>\n<p>\u4eca\u56de\u30eb\u30fc\u30c8\u306f\u3068\u3066\u3082\u30b7\u30f3\u30d7\u30eb\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<p><strong>routes\/web.php<\/strong><\/p>\n<div>\n<pre>&lt;?php\r\n\r\n<strong>use Illuminate\\Support\\Facades\\Route;<\/strong>\r\n<strong>use Inertia\\Inertia;<\/strong>\r\n\r\n<strong>Route::get('x_useful_form', fn() =&gt; Inertia::render('UsefulForm'));<\/strong><\/pre>\n<\/div>\n<div>\n<p>\u203b \u306a\u304a\u3001<code>Laravel Breeze<\/code>\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u3068\u3044\u304f\u3064\u304b\u30eb\u30fc\u30c8\u304c\u8ffd\u52a0\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u4eca\u56de\u306f\u4e0d\u8981\u306a\u306e\u3067\u524a\u9664\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u3055\u3041\u3001\u3053\u308c\u3067\u4f5c\u696d\u306f\u5b8c\u4e86\u3067\u3059\u3002<br \/>\n\u304a\u75b2\u308c\u69d8\u3067\u3057\u305f\u3002\ud83d\ude0a<\/p>\n<h1>\u30c6\u30b9\u30c8\u3057\u3066\u307f\u308b<\/h1>\n<p>\u3067\u306f\u3001\u5b9f\u969b\u306e\u30c6\u30b9\u30c8\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u2757<\/p>\n<p>\u30d6\u30e9\u30a6\u30b6\u3067\u300c<strong>https:\/\/******\/x_useful_form<\/strong>\u300d\u3078\u30a2\u30af\u30bb\u30b9\u3057\u307e\u3059\u3002<\/p>\n<p>\u3059\u308b\u3068\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12633\" style=\"border: 3px solid #000;\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_5.png\" alt=\"\" width=\"502\" height=\"619\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_5.png 502w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_5-243x300.png 243w\" sizes=\"auto, (max-width: 502px) 100vw, 502px\" \/><\/p>\n<p>\u306f\u3044\u2757<br \/>\n\u691c\u7d22\u7528\u306e\u30d5\u30a9\u30fc\u30e0\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n<p>\u3067\u306f\u3001\u30ad\u30fc\u30ef\u30fc\u30c9\u306b\u300c<strong>\u30ab\u30ec\u30fc\u3046\u3069\u3093<\/strong>\u300d\u3068\u5165\u529b\u3057\u3001<br \/>\n\u6700\u5c0f\u3044\u3044\u306d\u6570\u306b\u30c1\u30a7\u30c3\u30af\u3092\u5165\u308c\u3066\u300c\u691c\u7d22\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n<p>\u3069\u3046\u306a\u308b\u3067\u3057\u3087\u3046\u304b\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12634\" style=\"border: 3px solid #000;\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_6.png\" alt=\"\" width=\"484\" height=\"62\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_6.png 484w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_6-300x38.png 300w\" sizes=\"auto, (max-width: 484px) 100vw, 484px\" \/><\/p>\n<p>\u306f\u3044\uff01<br \/>\n\u30da\u30fc\u30b8\u79fb\u52d5\u3057\u305f\u5148\u306e\u691c\u7d22\u30ef\u30fc\u30c9\u304c\u60f3\u5b9a\u901a\u308a\u306b\u306a\u3063\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n<p>\u3067\u306f\u3001\u6b21\u306b\u5165\u529b\u88dc\u5b8c\u306e\u30c1\u30a7\u30c3\u30af\u3067\u3059\u3002<\/p>\n<p>\u300c<strong>\u8c5a\u9aa8\u30e9\u30fc\u30e1\u30f3<\/strong>\u300d\u3067\uff12\u56de\u30c1\u30a7\u30c3\u30af\u3057\u3066\u4e00\u756a\u4e0a\u306b\u6765\u3066\u3044\u308b\u304b<br \/>\n\u78ba\u8a8d\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u3046\u307e\u304f\u3044\u304f\u3067\u3057\u3087\u3046\u304b\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12635\" style=\"border: 3px solid #000;\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_7.png\" alt=\"\" width=\"530\" height=\"245\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_7.png 530w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/04\/laravel_x_useful_form_7-300x139.png 300w\" sizes=\"auto, (max-width: 530px) 100vw, 530px\" \/><\/p>\n<p>\u306f\u3044\u2757<br \/>\n\u8c5a\u9aa8\u30e9\u30fc\u30e1\u30f3\u306f\uff12\u56de\u691c\u7d22\u3055\u308c\u305f\u306e\u3067\u3001\u4e00\u756a\u4e0a\u306b\u8868\u793a\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u3059\u3079\u3066\u6210\u529f\u3067\u3059\u3002\ud83d\ude0a\u2728<\/p>\n<h1>\u5b9f\u969b\u306b\u516c\u958b\u3057\u307e\u3057\u305f<\/h1>\n<p>\u4eca\u56de\u306e\u30b3\u30fc\u30c9\u3092\u5b9f\u969b\u306b\u4f53\u9a13\u3067\u304d\u308b\u3088\u3046\u306b<br \/>\n\u30da\u30fc\u30b8\u3092\u516c\u958b\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u305c\u3072\u4ee5\u4e0b\u304b\u3089\u8a66\u3057\u3066\u307f\u3066\u4e0b\u3055\u3044\u3002<\/p>\n<p><strong>\ud83d\udcdd \u516c\u958b\u30da\u30fc\u30b8\uff1a<\/strong>\u00a0<a href=\"https:\/\/social-digger.capilano-fw.com\/\">https:\/\/social-digger.capilano-fw.com\/<\/a><\/p>\n<h1>\u4f01\u696d\u69d8\u3078\u306e\u3054\u63d0\u6848<\/h1>\n<p>\u6628\u4eca\u3001<code>X<\/code>\u3092\u59cb\u3081\u3068\u3059\u308b<code>SNS<\/code>\u306e\u91cd\u8981\u6027\u306f<br \/>\n\u3088\u308a\u5927\u304d\u304f\u306a\u3063\u3066\u304d\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u3057\u304b\u3057\u3001\u305d\u308c\u3089\u306e\u904b\u7528\u306f\u306a\u304b\u306a\u304b\u6642\u9593\u304c\u304b\u304b\u3063\u3066\u3057\u307e\u3057\u307e\u3059\u3002<\/p>\n<p>\u305d\u306e\u305f\u3081\u3001\u4eca\u56de\u306e\u3088\u3046\u306b\u904b\u7528\u3092\u652f\u63f4\u3059\u308b\u30c4\u30fc\u30eb\u3092<br \/>\n\u3054\u7528\u610f\u306b\u306a\u3063\u3066\u307f\u3066\u306f\u3044\u304b\u304c\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n<p>\u8cb4\u793e\u3084\u305d\u306e\u696d\u754c\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u305f\u5c02\u7528\u30ea\u30b5\u30fc\u30c1\u30c4\u30fc\u30eb\u3092<br \/>\n\u3064\u304f\u3063\u3066\u304a\u304f\u3068\u96c6\u5ba2\u306e\u52b9\u7387\u5316\u306b\u5f79\u306b\u7acb\u3064\u3053\u3068\u304c\u671f\u5f85\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u305c\u3072\u305d\u3046\u3044\u3063\u305f\u30c4\u30fc\u30eb\u3092\u3054\u5e0c\u671b\u3067\u3057\u305f\u3089\u3001<br \/>\n\u3044\u3064\u3067\u3082\u304a\u6c17\u8efd\u306b\u3054\u76f8\u8ac7\u4e0b\u3055\u3044\u3002<\/p>\n<p>\u304a\u5f85\u3061\u3057\u3066\u304a\u308a\u307e\u3059\u3002\ud83d\ude0a\u2728<\/p>\n<h1>\u304a\u308f\u308a\u306b<\/h1>\n<p>\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u4eca\u56de\u306f<code>SNS<\/code>\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\u3092\u652f\u63f4\u3059\u308b\u30c4\u30fc\u30eb\u3068\u3057\u3066<br \/>\n<code>X<\/code>\u306e\u4fbf\u5229\u306a\u691c\u7d22\u30d5\u30a9\u30fc\u30e0\u3092\u3064\u304f\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<p>\u5e38\u306b\u3001\u512a\u79c0\u306a\u3082\u306e\u306b\u89e6\u308c\u308b\u306e\u306f\u30b9\u30ad\u30eb\u30a2\u30c3\u30d7\u306b\u3064\u306a\u304c\u308b\u3068\u601d\u3044\u307e\u3059\u306e\u3067\u3001<br \/>\n\u305c\u3072\u7686\u3055\u3093\u3082\u4eca\u56de\u306e\u30d5\u30a9\u30fc\u30e0\u3092\u6d3b\u7528\u3057\u3066\u3044\u305f\u3060\u3051\u308b\u3068\u5b09\u3057\u3044\u3067\u3059\u3002<\/p>\n<p>\u307e\u305f\u3001\u3054\u81ea\u8eab\u306e\u696d\u754c\u3084\u72b6\u6cc1\u306b\u3088\u3063\u3066\u5fc5\u8981\u306a\u9805\u76ee\u3082\u51fa\u3066\u304f\u308b\u304b\u3068\u601d\u3046\u306e\u3067\u3001<br \/>\n\u305d\u306e\u5834\u5408\u306f\u62e1\u5f35\u3057\u3066\u5165\u529b\u9805\u76ee\u3092\u5897\u3084\u3057\u3066\u307f\u3066\u306f\u3044\u304b\u304c\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n<p>\u79c1\u3082\u307e\u3060\u307e\u3060\u52c9\u5f37\u3057\u307e\u3059\uff01<\/p>\n<p>\u3067\u306f\u3067\u306f\u301c\u2757<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6068 aligncenter\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2020\/03\/no_12.png\" alt=\"\" width=\"226\" height=\"320\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2020\/03\/no_12.png 226w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2020\/03\/no_12-212x300.png 212w\" sizes=\"auto, (max-width: 226px) 100vw, 226px\" \/>\u300c\u3064\u3044\u3067\u306b\u3001<br \/>\n(PR) <a href=\"https:\/\/brmk.io\/aRXt\" target=\"_blank\" rel=\"noopener\">\u30d3\u30b8\u30cd\u30b9\u30e2\u30c7\u30eb\u30de\u30b9\u30bf\u30fc\u8b1b\u5ea7<\/a><br \/>\n\u3082\u8cb7\u3063\u3061\u3083\u3063\u305f \ud83d\ude0a\ud83d\udc4d\u300d<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3055\u3066\u3055\u3066\u3001\u6700\u8fd1\u306e\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\u3067\u306f\u6b20\u304b\u305b\u306a\u3044\u5b58\u5728\u3068\u8a00\u3048\u3070\u3001\u3084\u306f\u308a\u3001 SNS\uff08YouTube\u3001Instagram\u3001X \u306a\u3069\uff09 \u3067\u3059\u3088\u306d\u3002 \u3068\u3044\u3046\u306e\u3082\u3001\u3082\u3057SNS\u306b &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/blog.capilano-fw.com\/?p=12628\" class=\"more-link\"><span class=\"screen-reader-text\">&#8220;Laravel \u3067 X\uff08Twitter\uff09\u306e\u826f\u30dd\u30b9\u30c8\u3092\u63a2\u3059\u4fbf\u5229\u30d5\u30a9\u30fc\u30e0\u3092\u3064\u304f\u308b&#8221; \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":12642,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,258],"tags":[192],"class_list":["post-12628","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","category-258","tag-twitter"],"_links":{"self":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/12628","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=12628"}],"version-history":[{"count":9,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/12628\/revisions"}],"predecessor-version":[{"id":12690,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/12628\/revisions\/12690"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/media\/12642"}],"wp:attachment":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}