<nav>
    <ol itemscope itemtype="http://schema.org/BreadcrumbList">
        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <a itemprop="item" href="/">
                <span itemprop="name">TOP</span>
            </a>
            <meta itemprop="position" content="1">
        </li>
        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <a itemprop="item" href="/content">
                <span itemprop="name">content name</span>
            </a>
            <meta itemprop="position" content="2">
        </li>
    </ol>
</nav>

設置が終わったら、Googleの構造化データをテストするページでURLをテストする

developers.google.com

補足

itemprop="name"は、無くてもスキーママークアップ検証ツールではエラー出ないけど、Googleのリッチリザルトテストではエラーになり、サーチコンソールでも怒られたので、一応入れておいた方が無難。

2023-07-03

【BootStrap】今表示しているURLをコピーさせてツールチップを表示させる

HTML JavaScript CSS

BootStrapと、Clipboard.js を使ったサンプル

ボタンをクリックしたら、「URL copied!」にツールチップの表示が変わる。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
    />
    <title>Copy URL to Clipboard</title>
  </head>
  <body>
    <div class="container">
      <button
        class="btn btn-primary"
        id="copyButton"
        data-bs-toggle="tooltip"
        data-bs-placement="top"
        title="Click to copy URL"
      >
        Copy URL
      </button>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Clipboard.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // Initialize tooltip
        var tooltipTriggerList = [].slice.call(
          document.querySelectorAll('[data-bs-toggle="tooltip"]')
        );
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
          return new bootstrap.Tooltip(tooltipTriggerEl);
        });

        // Copy URL to clipboard
        var copyButton = document.getElementById("copyButton");
        copyButton.addEventListener("click", function () {
          var url = window.location.href;

          var clipboard = new ClipboardJS(copyButton, {
            text: function () {
              return url;
            },
          });

          clipboard.on("success", function (e) {
            e.clearSelection();
            copyButton.setAttribute("data-bs-original-title", "URL copied!");
            var tooltip = bootstrap.Tooltip.getInstance(copyButton);
            tooltip.update();
            tooltip.show();
            clipboard.destroy();

            // メッセージの表示時間を設定
            setTimeout(function () {
              copyButton.setAttribute(
                "data-bs-original-title",
                "Click to copy URL"
              );
              tooltip.update();
              tooltip.hide();
            }, 2000);
          });

          clipboard.on("error", function () {
            copyButton.setAttribute(
              "data-bs-original-title",
              "Failed to copy URL. Please manually copy the URL."
            );
            var tooltip = bootstrap.Tooltip.getInstance(copyButton);
            tooltip.update();
            tooltip.show();
            clipboard.destroy();

            // メッセージの表示時間を設定
            setTimeout(function () {
              copyButton.setAttribute(
                "data-bs-original-title",
                "Click to copy URL"
              );
              tooltip.update();
              tooltip.hide();
            }, 2000);
          });

          clipboard.onClick(event);
        });
      });
    </script>
  </body>
</html>

2023-07-01

【Laravel】さくらサーバー（スタンダードプラン）にLaravelをデプロイする方法

Laravel php

調べると、GitHubの手順も込みの情報が多くちょっとややこしかったので、シンプルにローカルで開発したLaravelのプロジェクトをさくらのレンタルサーバー（スタンダードプラン）に、デプロイする手順をメモしておく。

さくらサーバーのコントロールパネルで、DBを作成する
さくらサーバーの/home/ユーザー名/任意のプロジェクト名に、ローカルのvendorフォルダと、.env以外を全てアップロードする。※SSHでもFTPでもOK。
さくらサーバーにSSH接続する help.sakura.ad.jp
cdコマンドで、/home/ユーザー名/任意のプロジェクト名に移動
curl -sS https://getcomposer.org/installer | phpでcomposerをインストール
php composer.pharを実行
php composer.phar installを実行（vendorフォルダが作成される）
以下の部分をローカルのものと書き換えた.envファイルを作成し、アップロードする DB_CONNECTION=mysql DB_HOST=データベースサーバー DB_PORT=3306 DB_DATABASE=1で作成したデータベース名 DB_USERNAME=アカウント名 DB_PASSWORD=データベースパスワード
php artisan key:generate
php artisan migrate
publicフォルダを/home/ユーザー名/www/任意のプロジェクト名にアップロードする
index.phpの以下の部分を書き換える

require __DIR__.'/../vendor/autoload.php';
$app = require_once __DIR__.'/../bootstrap/app.php';

↓

require __DIR__.'/../../任意のプロジェクト名/vendor/autoload.php';
$app = require_once __DIR__.'/../../任意のプロジェクト名/bootstrap/app.php';

素肌にサスペンダー

個人的な備忘と日記

【Git】Visual Studio Codeで変更箇所がハイライトされない時

トレトレ店長の本読んだ感想

【mac】使用しているlocalhostのポート一覧を表示して特定のプロセスを終了する

ストレスの指標としてのしゃっくり

【構造化マークアップ】schema.orgに準拠したパンくずリスト

補足

【BootStrap】今表示しているURLをコピーさせてツールチップを表示させる

【Laravel】さくらサーバー（スタンダードプラン）にLaravelをデプロイする方法