{"id":12981,"date":"2024-08-04T07:00:36","date_gmt":"2024-08-03T22:00:36","guid":{"rendered":"https:\/\/blog.capilano-fw.com\/?p=12981"},"modified":"2024-07-30T18:11:02","modified_gmt":"2024-07-30T09:11:02","slug":"%e3%80%90%e5%a4%8f%e3%81%ae%e8%87%aa%e7%94%b1%e7%a0%94%e7%a9%b6%e3%80%91%e5%a5%bd%e3%81%bf%e3%83%86%e3%83%b3%e3%83%9d%e3%81%a730%e5%9b%9e%e3%82%af%e3%83%aa%e3%83%83%e3%82%af%e3%81%97%e3%81%a6%e3%80%81","status":"publish","type":"post","link":"https:\/\/blog.capilano-fw.com\/?p=12981","title":{"rendered":"\u3010\u590f\u306e\u81ea\u7531\u7814\u7a76\u3011\u597d\u307f\u306e\u30c6\u30f3\u30dd\u306730\u56de\u30af\u30ea\u30c3\u30af\u3057\u3066\u3001\u30de\u30c3\u30c1\u30f3\u30b0\u3057\u3066\u307f\u307e\u305b\u3093\u304b\uff1f"},"content":{"rendered":"<p>\u3055\u3066\u3055\u3066\u3001\u590f\u4f11\u307f\u3082\u3069\u771f\u3093\u4e2d\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u3053\u3093\u306a\u3053\u3068\u3092\u601d\u3044\u51fa\u3057\u305f\u308a\u3057\u307e\u305b\u3093\u304b\uff1f<\/p>\n<p>\u300c\u81ea\u7531\u7814\u7a76\u3084\u3063\u305f\u3088\u306d\u3002\u5f53\u6642\u306f\u3081\u3093\u3069\u3046\u3060\u3063\u305f\u3051\u3069\u3001\u4eca\u306f\u3084\u3063\u3066\u307f\u305f\u3044\u304b\u3082\u2026\u300d<br \/>\n\u300c\u5b50\u4f9b\u304c\u81ea\u7531\u7814\u7a76\u306e\u5bbf\u984c\u3092\u3084\u3063\u3066\u308b\u3002\u89aa\u3068\u3057\u3066\u898b\u672c\u306b\u306a\u308a\u305f\u3044\u306a\u300d<br \/>\n\u300c\u30b7\u30f3\u30d7\u30eb\u306b\u8ab0\u5f97\u306a\u9762\u767d\u3044\u30cd\u30bf\u3001\u5927\u597d\u304d\u306a\u3093\u3060\u3088\u306d\uff01\u300d<\/p>\n<p>\u305d\u3093\u306a\u65b9\u306b\u3001\u4eca\u56de\u306f\u3044\u3064\u3082\u3068\u9055\u3044\u300c\u590f\u306e\u81ea\u7531\u7814\u7a76\u300d\u7684\u306a\u8a18\u4e8b\u3092\u304a\u5c4a\u3051\u3057\u307e\u3059\u3002<\/p>\n<p>\u30c6\u30fc\u30de\u306f\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n<p><strong style=\"font-size: 35px;\">\u30c6\u30f3\u30dd&amp;\u30de\u30c3\u30c1\u30f3\u30b0<\/strong><\/p>\n<p>\u3067\u3059\u3002<\/p>\n<p>\u307f\u306a\u3055\u3093\u3001\u300c<strong>\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd<\/strong>\u300d\u3063\u3066\u805e\u3044\u305f\u3053\u3068\u306f\u3042\u308b\u3067\u3057\u3087\u3046\u304b!?<\/p>\n<p><mark>\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u3068\u306f\u3001\u500b\u4eba\u304c\u3082\u3063\u3066\u3044\u308b\u300c<strong>\u5fc3\u5730\u3088\u3044\u30c6\u30f3\u30dd<\/strong>\u300d\u306e\u3053\u3068\u3067\u3059\u3002<\/mark><\/p>\n<p>\u4f8b\u3048\u3070\u3001\u6c17\u3065\u3044\u305f\u3089\u6307\u3067\u30ea\u30ba\u30e0\u3092\u3068\u3063\u3066\u305f\u308a\u3057\u307e\u305b\u3093\u304b\uff1f<br \/>\n\u305d\u308c\u304c\u3042\u306a\u305f\u56fa\u6709\u306e\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u3067\u3059\u3002<\/p>\n<p>\u4eca\u56de\u306f\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u3067\u30de\u30c3\u30c1\u30f3\u30b0\u3067\u304d\u308b\u6a5f\u80fd\u3092\u3064\u304f\u3063\u305f\u3089\u9762\u767d\u3044\u3093\u3058\u3083\u306a\u3044\u304b\u3068\u8003\u3048\u307e\u3057\u305f\u3002\u307e\u3055\u306b\u81ea\u7531\u7814\u7a76\u3067\u3059\uff01<\/p>\n<p>\u3061\u306a\u307f\u306b\u3001\u7532\u5357\u5927\u5b66\u3067\u884c\u308f\u308c\u305f<code>144<\/code>\u4eba<code>72<\/code>\u30da\u30a2\u3092\u5bfe\u8c61\u3068\u3057\u305f\u8ad6\u6587\u306b\u3088\u308b\u3068\u3001\u3084\u306f\u308a\u53cb\u4eba\u306f\u4f3c\u3066\u308b\u50be\u5411\u304c\u3042\u308b\u3068\u3044\u3046\u7d50\u679c\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\ud83d\udcdd <a href=\"https:\/\/www.konan-u.ac.jp\/hp\/econ_keizaigakkai\/gakusei-ronsyu\/2016nendo_kenshoronbun_ichinozemi_yu-jinhahontouniniteirunoka.pdf\" target=\"_blank\" rel=\"noopener\">2016\u5e74\u5ea6\u63b2\u8f09\u8ad6\u6587\uff1a\u53cb\u4eba\u306f\u672c\u5f53\u306b\u4f3c\u3066\u3044\u308b\u306e\u304b\uff08PDF\uff09<\/a><\/p>\n<p><mark>\u3064\u307e\u308a\u3001\u300c<strong>\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u304c\u4f3c\u3066\u308b=\u4ef2\u826f\u304f\u306a\u308a\u3084\u3059\u3044\u4eba<\/strong>\u300d\u3068\u3044\u3046\u4eee\u8aac\u3067\u3059\u306d\u3002<\/mark><\/p>\n<p>\u305d\u3053\u3067\u2757<\/p>\n<p>\u4eca\u56de\u306f\u4ee5\u4e0b\u306e\u624b\u9806\u3067\u3001\u30de\u30c3\u30c1\u30f3\u30b0\u3067\u304d\u308b\u3088\u3046\u306b\u5b9f\u88c5\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n<ol>\n<li>30\u56de\u300c\u5fc3\u5730\u3088\u3044\u30c6\u30f3\u30dd\u300d\u3067\u30de\u30a6\u30b9\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b<\/li>\n<li>\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u3092\u8a08\u7b97<\/li>\n<li>X\u306b\u7d50\u679c\u3092\u6295\u7a3f\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\uff08\u203b\uff09<\/li>\n<\/ol>\n<p>\u203b\u30cf\u30c3\u30b7\u30e5\u30bf\u30b0\u300c#\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u6e2c\u5b9a\u300d\u3092\u3064\u3051\u308b\u306e\u3067\u3001X\u3067\u4f3c\u305f\u4eba\u3092\u63a2\u305b\u308b\u3068\u3044\u3046\u6d41\u308c\u3067\u3059\u3002<\/p>\n<p>\u305c\u3072\u6700\u5f8c\u307e\u3067\u8aad\u3093\u3067\u304f\u3060\u3055\u3044\u306d\uff01\uff08\u4eca\u3059\u3050\u8a66\u3057\u305f\u3044\u4eba\u306f\u3053\u3061\u3089<a href=\"https:\/\/personal-tempo.capilano-fw.com\" target=\"_blank\" rel=\"noopener\">\u3053\u3061\u3089<\/a>\uff09<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9809 aligncenter\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2021\/11\/no_9.png\" alt=\"\" width=\"370\" height=\"220\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2021\/11\/no_9.png 370w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2021\/11\/no_9-300x178.png 300w\" sizes=\"auto, (max-width: 370px) 100vw, 370px\" \/>\u300c\u6e2c\u3063\u305f\u3053\u3068\u306a\u3044\u3051\u3069\u3001<br \/>\n\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u3001<br \/>\n\u3081\u3063\u3061\u3083\u65e9\u3044\u3068\u601d\u3044\u307e\u3059\ud83e\udd41\u26a1\u300d<\/p>\n<p><strong>\u958b\u767a\u74b0\u5883\uff1a<\/strong> Laravel 11.x\u3001Vue 3<\/p>\n<h2>\u3010\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3011\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u6e2c\u5b9a\u3060\u3051\u3057\u305f\u3044\u65b9\u3078<\/h2>\n<p>\u305b\u3063\u304b\u304f\u306a\u306e\u3067\u3001\u5b9f\u969b\u306b\u30da\u30fc\u30b8\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002<br \/>\n\u3082\u3057\u6e2c\u5b9a\u3060\u3051\u3057\u305f\u3044\u65b9\u306f\u3001\u4ee5\u4e0b\u304b\u3089\u3069\u3046\u305e\uff01<\/p>\n<p>\ud83d\udcdd <a href=\"https:\/\/personal-tempo.capilano-fw.com\">\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u6e2c\u5b9a\uff08\u7121\u6599\uff09<\/a><\/p>\n<h2>\u3010\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3011\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u3092\u6e2c\u5b9a\u3059\u308b\u6a5f\u80fd\u3092\u958b\u767a\u3059\u308b\u6e96\u5099\u3092\u3059\u308b<\/h2>\n<h3>1\uff1aPHP\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<\/h3>\n<p>\u4eca\u56de\u306f\u4ee5\u4e0b\u306e\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u3092\u4f7f\u3063\u3066\u958b\u767a\u3092\u3059\u3059\u3081\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<ul>\n<li>Vue 3<\/li>\n<li>Inertia.js<\/li>\n<\/ul>\n<p>\u305d\u3053\u3067\u3001\u624b\u3063\u53d6\u308a\u65e9\u304f<code>Laravel Breeze<\/code>\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<div>\n<pre><strong>composer require laravel\/breeze --dev<\/strong><\/pre>\n<div>\n<pre><strong>php artisan breeze:install<\/strong><\/pre>\n<p>\u9078\u629e\u80a2\u304c\u8868\u793a\u3055\u308c\u308b\u306e\u3067\u3001<code>Vue with Inertia<\/code>\u3092\u9078\u629e&amp;\u30a8\u30f3\u30bf\u30fc\u30ad\u30fc\u3092\u62bc\u3059\u3002<br \/>\n\u3042\u3068\u306f\u305d\u306e\u307e\u307e\u30a8\u30f3\u30bf\u30fc\u30ad\u30fc\u30922\u56de\u30bf\u30fc\u30f3\uff01\u3057\u307e\u3059\u3002<\/p>\n<p>\u3053\u308c\u3067\u5b8c\u6210\u3067\u3059\u3002<br \/>\n\u7c21\u5358\u3067\u3059\u306d\uff01\ud83d\ude0a<\/p>\n<h3>2\uff1aJavaScript\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<\/h3>\n<p>\u4ee5\u4e0b2\u3064\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<ul>\n<li>Lodash\uff1a\u4fbf\u5229\u6a5f\u80fd\u304c\u6e80\u8f09<\/li>\n<li>SweetAlert2\uff1a\u304a\u3057\u3083\u308c\u306a\u30a2\u30e9\u30fc\u30c8\u8868\u793a<\/li>\n<\/ul>\n<p>\u305d\u308c\u305e\u308c\u4ee5\u4e0b2\u3064\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\n<pre><strong>npm i lodash --save-dev<\/strong><\/pre>\n<div>\n<pre><strong>npm i sweetalert2 --save-dev<\/strong><\/pre>\n<p>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u304c\u5b8c\u4e86\u3057\u305f\u3089\u3001\u767b\u9332\u3057\u3066\u6709\u52b9\u306b\u3057\u307e\u3059\u3002<\/p>\n<p><strong>resources\/js\/bootstrap.js<\/strong><\/p>\n<div>\n<pre>\/\/ \u7701\u7565\r\n\r\n\/\/ Lodash\r\n<strong>import _ from 'lodash';<\/strong>\r\n<strong>window._ = _;<\/strong>\r\n\r\n\/\/ SweetAlert2\r\n<strong>import Swal from 'sweetalert2';<\/strong>\r\n<strong>window.Swal = Swal;<\/strong><\/pre>\n<p>\u3053\u308c\u3067\u3001<code>_<\/code>\u3068<code>Swal<\/code>\u304c<code>JavaScript<\/code>\u5185\u3067\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<pre><strong>npm run dev<\/strong><\/pre>\n<p>\u3067<code>Vite<\/code>\u3092\u8d77\u52d5\u3057\u3066\u304a\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2>\u3010\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u3064\u304f\u308b\u3011\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u6e2c\u5b9a\u306e\u30d9\u30fc\u30b9\u306b\u306a\u308b\u90e8\u5206\u3092\u3064\u304f\u308b<\/h2>\n<p>\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u4e2d\u3067\u306f\u3001\u30d3\u30e5\u30fc\u3092\u547c\u3073\u51fa\u3059\u30e1\u30bd\u30c3\u30c9\u304c1\u3064\u3060\u3051\u3067<code>OK<\/code>\u3067\u3059\u3002<br \/>\n\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\n<pre><strong>php artisan make:controller PersonalTempoController<\/strong><\/pre>\n<p>\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u30fb\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u4e2d\u8eab\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n<p><strong>app\/Http\/Controllers\/PersonalTempoController.php<\/strong><\/p>\n<div>\n<pre><strong>&lt;?php<\/strong>\r\n\r\n<strong>namespace App\\Http\\Controllers;<\/strong>\r\n\r\n<strong>use Illuminate\\Http\\Request;<\/strong>\r\n\r\n<strong>class PersonalTempoController extends Controller<\/strong>\r\n<strong>{<\/strong>\r\n<strong>    public function create()<\/strong>\r\n<strong>    {<\/strong>\r\n<strong>        return inertia('PersonalTempo\/Create');<\/strong>\r\n<strong>    }<\/strong>\r\n<strong>}<\/strong><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2>\u3010\u30d3\u30e5\u30fc\u3011\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u3092\u5b9f\u969b\u306b\u6e2c\u5b9a\u3059\u308bJavaScript\u90e8\u5206\u3092\u3064\u304f\u308b<\/h2>\n<p>\u4eca\u56de\u306f\u3053\u3053\u304c\u30e1\u30a4\u30f3\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n<code>Vue 3<\/code>\u306e<code>SFC<\/code>\uff08<code>Single-File Component<\/code>\uff09\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u306a\u304a\u3001\u753b\u50cf\u306f\u4ee5\u4e0b\u306e\u3082\u306e\u3092\u4f7f\u3044\u307e\u3057\u305f\u3002\uff08<code>from ChatGPT<\/code>\u3067\u3059\uff09<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12993\" style=\"border: 3px solid #000;\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/08\/drum.png\" alt=\"\" width=\"400\" height=\"400\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/08\/drum.png 400w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/08\/drum-300x300.png 300w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/08\/drum-150x150.png 150w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/08\/drum-100x100.png 100w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<p><strong>resources\/js\/Pages\/PersonalTempo\/Create.vue<\/strong><\/p>\n<div>\n<pre><strong>&lt;template&gt;<\/strong>\r\n<strong>    &lt;Head title=\"\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u6e2c\u5b9a\"&gt;&lt;\/Head&gt;<\/strong>\r\n<strong>    &lt;div class=\"container mx-auto flex flex-col items-center justify-center min-h-screen p-4\"&gt;<\/strong>\r\n<strong>        &lt;h1 class=\"text-2xl font-bold mb-4\"&gt;\u3010\u3059\u3050\u308f\u304b\u308b\u3011\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u6e2c\u5b9a&lt;\/h1&gt;<\/strong>\r\n<strong>        &lt;ol class=\"list-decimal list-inside text-left mb-6\"&gt;<\/strong>\r\n<strong>            &lt;li&gt;\u30c9\u30e9\u30e0\u306e\u4e2d\u5fc3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30b9\u30bf\u30fc\u30c8&lt;\/li&gt;<\/strong>\r\n<strong>            &lt;li&gt;\u305d\u306e\u307e\u307e\u300c\u5fc3\u5730\u3088\u3044\u30c6\u30f3\u30dd\u300d\u3067{{ clickMaxCount }}\u56de\u30af\u30ea\u30c3\u30af\u3059\u308b&lt;\/li&gt;<\/strong>\r\n<strong>            &lt;li&gt;\u3042\u306a\u305f\u56fa\u6709\u306e\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u304c\u308f\u304b\u308a\u307e\u3059\uff01&lt;\/li&gt;<\/strong>\r\n<strong>        &lt;\/ol&gt;<\/strong>\r\n<strong>        &lt;div class=\"mb-6\"&gt;<\/strong>\r\n<strong>            &lt;img src=\"\/images\/drum.png\" alt=\"\u30c9\u30e9\u30e0\" class=\"cursor-pointer\" @click=\"onClick\"\/&gt;<\/strong>\r\n<strong>        &lt;\/div&gt;<\/strong>\r\n<strong>        &lt;div class=\"text-center\" v-if=\"clickTimes.length &gt; 0\"&gt;\u56de\u6570: {{ clickTimes.length }}\u56de&lt;\/div&gt;<\/strong>\r\n<strong>    &lt;\/div&gt;<\/strong>\r\n<strong>&lt;\/template&gt;<\/strong>\r\n\r\n<strong>&lt;script setup&gt;<\/strong>\r\n<strong>import {computed, ref} from 'vue';<\/strong>\r\n<strong>import {Head} from \"@inertiajs\/vue3\";<\/strong>\r\n\r\n<strong>\/\/ \u5171\u901a<\/strong>\r\n<strong>let mode = 'measuring'; \/\/ measuring, done<\/strong>\r\n\r\n<strong>\/\/ \u30c6\u30f3\u30dd\u6e2c\u5b9a<\/strong>\r\n<strong>const clickMaxCount = ref(30);<\/strong>\r\n<strong>const bpm = computed(() =&gt; {<\/strong>\r\n\r\n<strong>    const times = clickTimes.value;<\/strong>\r\n\r\n<strong>    if(times.length &lt; 2) {<\/strong>\r\n\r\n<strong>        return 0;<\/strong>\r\n\r\n<strong>    }<\/strong>\r\n\r\n<strong>    let intervals = [];<\/strong>\r\n\r\n<strong>    for (let i = 1; i &lt; times.length; i++) { \/\/ \u6642\u9593\u306e\u9593\u9694\u3092\u8a08\u7b97<\/strong>\r\n\r\n<strong>        intervals.push(times[i] - times[i - 1]);<\/strong>\r\n\r\n<strong>    }<\/strong>\r\n\r\n<strong>    const averageInterval = _.mean(intervals); \/\/ \u5e73\u5747\u5024\u3092\u53d6\u5f97 (\u30df\u30ea\u79d2\uff09<\/strong>\r\n\r\n<strong>    return Math.round(60000 \/ averageInterval); \/\/ \u30df\u30ea\u79d2\u3092 BPM \u306b\u5909\u63db<\/strong>\r\n\r\n<strong>});<\/strong>\r\n\r\n<strong>\/\/ \u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8<\/strong>\r\n<strong>const clickTimes = ref([]);<\/strong>\r\n<strong>const onClick = () =&gt; {<\/strong>\r\n\r\n<strong>    if (mode === 'done') {<\/strong>\r\n\r\n<strong>        return;<\/strong>\r\n\r\n<strong>    }<\/strong>\r\n\r\n<strong>    const currentTime = new Date().getTime();<\/strong>\r\n\r\n<strong>    clickTimes.value.push(currentTime);<\/strong>\r\n\r\n<strong>    if (clickTimes.value.length === clickMaxCount.value) {<\/strong>\r\n\r\n<strong>        mode = 'done';<\/strong>\r\n\r\n<strong>        Swal.fire({<\/strong>\r\n<strong>            title: `${bpm.value} BPM`,<\/strong>\r\n<strong>            html: `\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u306f&lt;b&gt;\u300c${bpm.value} BPM&lt;\/b&gt;\u300d\u3067\u3059&lt;br class=\"\"&gt;\u203bBPM = Beats Per Minute&lt;br class=\"block sm:hidden\"&gt;\uff081\u5206\u9593\u306e\u62cd\u6570\uff09\u306e\u7565\u3067\u3059`,<\/strong>\r\n<strong>            icon: \"info\",<\/strong>\r\n<strong>            showCloseButton: true,<\/strong>\r\n<strong>            showCancelButton: true,<\/strong>\r\n<strong>            focusConfirm: false,<\/strong>\r\n<strong>            confirmButtonText: 'X\u306b\u7d50\u679c\u3092\u6295\u7a3f\u3059\u308b',<\/strong>\r\n<strong>            cancelButtonText: `\u3082\u3046\u4e00\u56de\u3084\u308b`,<\/strong>\r\n<strong>        })<\/strong>\r\n<strong>        .then((result) =&gt; {<\/strong>\r\n\r\n<strong>            if (result.isConfirmed) {<\/strong>\r\n\r\n<strong>                location.href = intentUrl.value;<\/strong>\r\n\r\n<strong>            } else {<\/strong>\r\n\r\n<strong>                clickTimes.value = [];<\/strong>\r\n<strong>                mode = 'measuring';<\/strong>\r\n\r\n<strong>            }<\/strong>\r\n\r\n<strong>        });<\/strong>\r\n\r\n<strong>    }<\/strong>\r\n\r\n<strong>};<\/strong>\r\n\r\n<strong>\/\/ X \u306b\u7d50\u679c\u3092\u6295\u7a3f<\/strong>\r\n<strong>const intentUrl = computed(() =&gt; {<\/strong>\r\n\r\n<strong>    const targetUrl = location.href;<\/strong>\r\n<strong>    const text = `\u79c1\u306e\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u306f\u300c${bpm.value} BPM\u300d\u3067\u3057\u305f\uff01\\n\\n${targetUrl}\\n\\n@SukohiKuhoh\\n#\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u6e2c\u5b9a`;<\/strong>\r\n\r\n<strong>    return `https:\/\/twitter.com\/intent\/tweet?text=${encodeURIComponent(text)}`;<\/strong>\r\n\r\n<strong>});<\/strong>\r\n\r\n<strong>&lt;\/script&gt;<\/strong>\r\n\r\n<strong>&lt;style scoped&gt;<\/strong>\r\n<strong>.container {<\/strong>\r\n<strong>    max-width: 640px;<\/strong>\r\n<strong>}<\/strong>\r\n<strong>&lt;\/style&gt;<\/strong><\/pre>\n<p>\u3053\u306e\u4e2d\u3067\u3084\u3063\u3066\u3044\u308b\u3053\u3068\u306f\u3001\u4ee5\u4e0b4\u3064\u3067\u3059\u3002<\/p>\n<ol>\n<li>\u30c9\u30e9\u30e0\u753b\u50cf\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u306e\u6642\u9593\u3092\u4fdd\u5b58\u3057\u3066\u304a\u304f<\/li>\n<li>30\u56de\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3089\u904e\u53bb\u306e\u6642\u9593\u306e\u9593\u9694\u3092\u5168\u3066\u53d6\u5f97<\/li>\n<li>\u9593\u9694\u306e\u5e73\u5747\u5024\u3092\u51fa\u3059<\/li>\n<li>BPM\uff08Beats per Minute\u30021\u5206\u9593\u306e\u62cd\u6570\uff09\u306b\u5909\u63db<\/li>\n<li>\u7d50\u679c\u3092\u8868\u793a<\/li>\n<\/ol>\n<p>\u3061\u306a\u307f\u306b\u3001\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305f<code>JavaScript<\/code>\u30d1\u30c3\u30b1\u30fc\u30b8\u306e<code>Lodash<\/code>\u3092\u4f7f\u3063\u3066\u3044\u308b\u306e\u306f\u4ee5\u4e0b\u3067\u3059\u3002<br \/>\n\u3053\u306e\u3088\u3046\u306b\u3044\u308d\u3093\u306a\u51e6\u7406\u3092\u624b\u3063\u53d6\u308a\u65e9\u304f\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002<\/p>\n<div>\n<pre><strong>_.mean(intervals); \/\/ \u5e73\u5747\u5024\u3092\u53d6\u5f97 (\u30df\u30ea\u79d2\uff09<\/strong><\/pre>\n<p>\u3067\u306f\u3001\u3053\u308c\u3067\u4f5c\u696d\u306f\u3053\u308c\u3067\u5b8c\u4e86\u3067\u3059\uff01<br \/>\n\u304a\u75b2\u308c\u69d8\u3067\u3057\u305f\u3002\ud83d\ude0a<\/p>\n<h2>\u3010\u30eb\u30fc\u30c8\u3011\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u6e2c\u5b9a\u3059\u308bURL\u3092\u3064\u304f\u308b<\/h2>\n<p>\u6700\u5f8c\u306b\u30d6\u30e9\u30a6\u30b6\u304b\u3089\u30a2\u30af\u30bb\u30b9\u3059\u308b<code>URL<\/code>\u3092\u30eb\u30fc\u30c8\u3067\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p><strong>routes\/web.php<\/strong><\/p>\n<div>\n<pre>&lt;?php\r\n\r\n<strong>use App\\Http\\Controllers\\PersonalTempoController;<\/strong>\r\n\r\n\/\/ \u7701\u7565\r\n\r\n<strong>Route::prefix('personal_tempo')-&gt;group(function () {<\/strong>\r\n<strong>    Route::get('create', [PersonalTempoController::class, 'create'])-&gt;name('personal_tempo.create');<\/strong>\r\n<strong>});<\/strong>\r\n\r\n\/\/ \u7701\u7565<\/pre>\n<\/div>\n<h2>\u3010\u30c6\u30b9\u30c8\u3011\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u304c\u6e2c\u5b9a\u3067\u304d\u308b\u304b\u30c1\u30a7\u30c3\u30af\u3059\u308b<\/h2>\n<p>\u5b9f\u969b\u306b\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u6e2c\u5b9a\u3067\u304d\u308b\u304b\u30c1\u30a7\u30c3\u30af\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u2757<\/p>\n<h3>1\uff1a\u30d6\u30e9\u30a6\u30b6\u3067\u30a2\u30af\u30bb\u30b9\u3059\u308b<\/h3>\n<p>\u30d6\u30e9\u30a6\u30b6\u3067\u300chttps:\/\/******\/personal_tempo\/create\u300d\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3068\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12994\" style=\"border: 3px solid #000;\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/08\/laravel_personal_tempo_1.png\" alt=\"\" width=\"444\" height=\"585\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/08\/laravel_personal_tempo_1.png 444w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/08\/laravel_personal_tempo_1-228x300.png 228w\" sizes=\"auto, (max-width: 444px) 100vw, 444px\" \/><\/p>\n<h3>2\uff1a\u5fc3\u5730\u3088\u3044\u30c6\u30f3\u30dd\u3067\u30c9\u30e9\u30e0\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b<\/h3>\n<p>\u3067\u306f\u300130\u56de\u30c9\u30e9\u30e0\u306e\u4e2d\u5fc3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u8a66\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<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12995\" style=\"border: 3px solid #000;\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/08\/laravel_personal_tempo_2.png\" alt=\"\" width=\"558\" height=\"421\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/08\/laravel_personal_tempo_2.png 558w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/08\/laravel_personal_tempo_2-300x226.png 300w\" sizes=\"auto, (max-width: 558px) 100vw, 558px\" \/><\/p>\n<p>\u306f\u3044\u2757<br \/>\n\u3046\u307e\u304f\u8a08\u7b97\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n<p>\u203b\u601d\u3063\u305f\u3068\u304a\u308a\u3001BPM\u9ad8\u3081\u3067\u3057\u305f\u306d\u3002\u3053\u308a\u3083\u4eba\u751f\u77ed\u3044\u304b\u3082\u2026\ud83d\ude31<\/p>\n<h3>3\uff1aX\u3078\u306e\u6295\u7a3f\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u307f\u308b<\/h3>\n<p>\u6700\u5f8c\u306b\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n<p>\u3046\u307e\u304fX\u3078\u79fb\u52d5\u3059\u308b\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-12999\" style=\"border: 3px solid #000;\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/08\/laravel_personal_tempo_3.png\" alt=\"\" width=\"600\" height=\"350\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/08\/laravel_personal_tempo_3.png 600w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/08\/laravel_personal_tempo_3-300x175.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>\u306f\u3044\u2757<br \/>\n<code>X<\/code>\u306e\u6295\u7a3f\u30d5\u30a9\u30fc\u30e0\u304c\u81ea\u52d5\u3067\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n<p>\u3059\u3079\u3066\u6210\u529f\u3067\u3059\ud83d\ude0a\u2728<\/p>\n<h2>\u3010\u4f01\u696d\u69d8\u3078\u306e\u3054\u63d0\u6848\u3011\u30d1\u30fc\u30bd\u30ca\u30eb\u30c6\u30f3\u30dd\u6e2c\u5b9a\u306e\u3088\u3046\u306a\u30b3\u30f3\u30c6\u30f3\u30c4\u3067SNS\u3092\u62e1\u6563<\/h2>\n<p>\u4eca\u56de\u306e\u3088\u3046\u306a\u30b5\u30fc\u30d3\u30b9\u3092\u63d0\u4f9b\u3059\u308b\u3068\u3001\u8a3a\u65ad\u7d50\u679c\u3092X\u3078\u6295\u7a3f\u3059\u308b\u3088\u3046\u8a98\u5c0e\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u3064\u307e\u308a\u3001\u4eba\u6c17\u306e\u30b5\u30fc\u30d3\u30b9\u306b\u306a\u308c\u3070\u306a\u308b\u307b\u3069X\u3067\u62e1\u6563\u3092\u3057\u3066\u3082\u3089\u3048\u308b\u308f\u3051\u3067\u3059\u306d\u3002<\/p>\n<p>\u3082\u3057\u3053\u3046\u3044\u3063\u305f\u30a2\u30a4\u30c7\u30a2\u3092\u304a\u6301\u3061\u306e\u65b9\u306f\u3001\u305c\u3072\u304a\u554f\u3044\u5408\u308f\u305b\u304b\u3089\u3054\u76f8\u8ac7\u304f\u3060\u3055\u3044\u3002\u5b9f\u73fe\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3059\u3002<\/p>\n<p>\u304a\u5f85\u3061\u3057\u3066\u304a\u308a\u307e\u3059\u3002\ud83d\ude0a\u2728<\/p>\n<h2>\u304a\u308f\u308a\u306b<\/h2>\n<p>\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u4eca\u56de\u306f\u300c<strong>\u590f\u306e\u81ea\u7531\u7814\u7a76<\/strong>\u300d\u3068\u3057\u3066100%\u79c1\u304c\u3084\u308a\u305f\u3044\u3060\u3051\u306e\u4f01\u753b\u306b\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<p>\u5b9f\u306f\u3001\u5b50\u4f9b\u306e\u3053\u308d\u3082\u30e1\u30a4\u30f3\u306e\u5bbf\u984c\u305d\u3063\u3061\u306e\u3051\u3067\u81ea\u7531\u7814\u7a76\u3092\u3057\u3066\u3044\u305f\u8a18\u61b6\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u30d6\u30ed\u30b0\u304c\u7d9a\u3044\u3066\u3044\u308b\u306e\u3082\u305d\u306e\u5ef6\u9577\u7dda\u306b\u3042\u308b\u304b\u3089\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u306d\u3002<\/p>\n<p>\u305c\u3072\u7686\u3055\u3093\u3082\u6614\u3092\u601d\u3044\u51fa\u3057\u306a\u304c\u3089\u3001\u51b7\u305f\u3044\u30b5\u30a4\u30c0\u30fc\u3067\u3082\u98f2\u307f\u3064\u3064\u3044\u308d\u3093\u306a\u7814\u7a76\u3092\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u306d\u3002<\/p>\n<p>\u3067\u306f\u3067\u306f\u301c\ud83c\udf90\u2728<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6071 aligncenter\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2020\/03\/no_8.png\" alt=\"\" width=\"216\" height=\"320\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2020\/03\/no_8.png 216w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2020\/03\/no_8-203x300.png 203w\" sizes=\"auto, (max-width: 216px) 100vw, 216px\" \/>\u300c\u6b69\u304f\u306e\u3082<br \/>\n\u3081\u3061\u3083\u304f\u3061\u3083<br \/>\n\u65e9\u3044\u3067\u3059\u2757\u300d<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u3055\u3066\u3055\u3066\u3001\u590f\u4f11\u307f\u3082\u3069\u771f\u3093\u4e2d\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u3053\u3093\u306a\u3053\u3068\u3092\u601d\u3044\u51fa\u3057\u305f\u308a\u3057\u307e\u305b\u3093\u304b\uff1f \u300c\u81ea\u7531\u7814\u7a76\u3084\u3063\u305f\u3088\u306d\u3002\u5f53\u6642\u306f\u3081\u3093\u3069\u3046\u3060\u3063\u305f\u3051\u3069\u3001\u4eca\u306f\u3084\u3063\u3066\u307f\u305f\u3044\u304b\u3082\u2026\u300d \u300c\u5b50\u4f9b\u304c &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/blog.capilano-fw.com\/?p=12981\" class=\"more-link\"><span class=\"screen-reader-text\">&#8220;\u3010\u590f\u306e\u81ea\u7531\u7814\u7a76\u3011\u597d\u307f\u306e\u30c6\u30f3\u30dd\u306730\u56de\u30af\u30ea\u30c3\u30af\u3057\u3066\u3001\u30de\u30c3\u30c1\u30f3\u30b0\u3057\u3066\u307f\u307e\u305b\u3093\u304b\uff1f&#8221; \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":13006,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[247,3],"tags":[],"class_list":["post-12981","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-inertia-js","category-laravel"],"_links":{"self":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/12981","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=12981"}],"version-history":[{"count":20,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/12981\/revisions"}],"predecessor-version":[{"id":13072,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/12981\/revisions\/13072"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/media\/13006"}],"wp:attachment":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}