Blog

【Snow Monkey】Google Adsense

Googleアドセンスに申請

https://snow-monkey.2inc.org/forums/topic/googleadsense%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/
アプリケーション層プロトコル

HTTP

HTTP（Hyper Text Transfer Protocol）とはクライアント（Webブラウザなど）とWebサーバ間でデータを送受信するためのプロトコルです

HTTPの仕組み

クライアントが「HTTPリクエスト」を送信し、それに応じてWebサーバが「HTTPレスポンス」が返信されます。

HTTPメソッド

HTTPリクエストにはGET（サーバにページの取得をリクエスト）やPOST（サーバにデータを送信）などのメソッドが用意されています。

https://ntorelabo.com/?p=4677

HTTPS

HTTPS（HyperText Transfer Protocol Secure）は安全に通信ができるよう暗号化されています。

  • SSLサーバ証明書を用いてWebサーバの正当性を保証する
  • SSL/TLSを用いてデータを暗号化する

SSL/TLSを用いてデータを暗号化する

SSL（Secure Sockets Layer）とTLS（Transport Layer Security）はどちらも暗号化の技術です。

SSLをもとにTLSが開発され、現在はセキュリティ上の問題からTLSが使用されています。（SSL/TLSと表記）

FTP

FTP（File Transfer Protocol）はクライアントとサーバ間でファイル転送を行うためのプロトコルです。

  • TCPポート20番（データ転送用）と21番（制御用）を使用する
  • TCP/IPネットワーク経由で信頼性のあるファイル転送機能を提供。
  • サーバークライアント型
  • 暗号化の機能を持たない
  • 認証の機能を持つ

TFTP

TFTP（Trivial File Transfer Protocol）

  • UDP
  • 効率の良いコネクションレス型のファイル転送機能。
  • サーバークライアント型
    • CiscoルータはTFTPサーバクライアントとして動作できる
    • (config)#tftp-server { ファイルパス }で TFTPサーバとして動作できる
  • 暗号化、認証の機能を持たない
  • IOSのアップグレードする際などに利用

SMTP

  • SMTP（Simple Mail Transfer Protocol）は電子メールを送信するために使用するアプリケーション層のプロトコルです。
  • TCP

POP3

POP3（Post Office Protocol version3）はクライアントがメールサーバからメール受信

Telnet

サーバやルータを遠隔で操作する（リモート接続、遠隔ログイン）ためのプロトコルです。

  • TCP
  • データをクリアテキストで送るため盗聴の危険性があります。

＜必要な設定＞

  • IPアドレスの設定
  • デフォルトゲートウェイの設定
  • VTYパスワードの設定
  • enableパスワードの設定

VTYパスワード

VTYパスワードは仮想端末でログインする際のパスワードで、セキュリティー上の理由から、VTYパスワードを設定していないデバイスではTELNETを許可しないものとなっています。

VTYパスワードの設定

Router(config)#line vty 0 4
Router(config-line)#password [ パスワード ]
Router(config-line)#login

SSH

  • SSH（Secure Shell）
  • 認証というプロセスを経て、リモートコンピューターへアクセスができるようになっています。
  • 遠隔操作する仮想端末機能を提供。
  • Telnetと違いデータは暗号化される

＜認証方法＞

  1. パスワード認証
    • (config)#username {ユーザ名} password {パスワード}
    • 仮想端末回線にアクセスしてきたユーザをローカルデータベースで認証する
      (config)#line vty {開始VTY番号} [{終了VTY番号}]
      (config-line)#login local
  2. 公開鍵・秘密鍵による認証
    • ホスト名の設定
      (config)#hostname {ホスト名}
    • ドメイン名の設定
      (config)#ip domain name {ドメイン名}
      または
      (config)#ip domain-name {ドメイン名}
    • RSAホスト鍵の生成
      (config)#crypto key generate rsa [ modulus { 鍵の長さ } ]
      （※鍵の長さは1024以上が推奨）
    • SSHバージョンの指定（任意）
      ip ssh pubkey-chain
    • 仮想端末回線（VTY）の設定
      transport input ssh
    • ログイン認証の設定
      login local

SSH接続を行う
#ssh {-l ユーザ名} [-v SSHバージョン] [-p 接続先ポート番号] {宛先IPアドレス|ホスト名}

SNMP

SNMP（Simple Network Management Protocol）はTCP/IPネットワーク上のルータ、スイッチ、サーバなどの通信機器の監視、制御。

DHCP

DHCP （Dynamic Host Configuration Protocol）とは、インターネットなどのIPネットワークに新たに接続した機器に、IPアドレスなど通信に必要な設定情報を自動的に割り当てるための通信規約（プロトコル）。

トランスポート層にUDPを使用する。

DHCPサーバがポート67、DHCPクライアントがポート68を使用する

【DHCPメッセージ】

メッセージ名送信する側説明
DHCP DISCOVERクライアント側使用可能なDHCPサーバを探すためのメッセージ
DHCP OFFERサーバDHCPクライアントのDHCP DISCOVERに応答し設定情報の候補を通知する
DHCP REQUESTクライアント設定情報を正式に取得するためにDHCPサーバへ要求する
DHCP ACKサーバ設定情報をDHCPクライアントに提供する

DHCPリレーエージェント

DHCPクライアントからのブロードキャストによる要求送信を、特定の相手と一対一の通信である「ユニキャスト」方式に変換して隣のネットワークのDHCPサーバに届けてくれる。

NTP（Network Time Protocol）

システムクロックを正しく調整（同期）。

DNS

DNS（Domain Name System）とは、インターネットなどのIPネットワーク上でドメイン名とIPアドレスの対応関係を管理するシステム。
→複雑なIPアドレスを使用しなくてよくなりました。

  • DNSルックアップにおいてDNSサーバへホスト名を問い合わせ、IPアドレスを得る方法をフォワードルックアップ(正引き)といいます。
  • DNSサーバへIPアドレスを問い合わせ、ホスト名を得る方法をリバースルックアップ(逆引き)といいます。
  • ネームリゾルバとは名前解決を行うソフトウェア

名前解決

  1. クライアントから、IPアドレスを得たいホスト名がセットされたDNS要求をDNSキャッシュサーバに送信する（再帰問い合わせ）
  2. DNSサーバは自身のキャッシュの検索や、ルートDNSサーバへの問い合わせを行います。
  3. ルートDNSサーバは届いた問い合わせ内容から、どの権威DNSサーバへ問い合わせをするべきなのかをDNSキャッシューサーバへ返答します。
  4. DNSキャッシュサーバは、ルートDNSサーバから指示された権威DNSサーバへ、問い合わせをし直します。（非再帰問い合わせ）そこでまた別のDNSサーバへ問い合わせるよう指示があれば、そのサーバへ問い合わせし直します。
  5. DNSサーバは解決した結果（得られたIPアドレス、もしくは該当情報なしといったエラー応答）がセットされたDNS応答をクライアントに送信する

DNSキャッシュサーバ

DNSキャッシュサーバはクライアントからの問い合わせに応答するDNSサーバです。保持している情報に該当する問い合わせがきた場合は権威DNSサーバに問い合わせずに応答します。

  • 権威DNSサーバに問合せを行い、得た情報をキャッシュに保持します。
  • ことで、クライアントへの応答速度を上げます。
  • 権威DNSサーバの負荷も減らします。

【コマンド構文：ルータをDNSクライアントとして動作させる】

(config)#ip domain lookup ・・・DNSによる名前解決を行う
(config)#ip name-server {IPアドレス} ・・・DNSサーバのIPアドレスを設定する
(config)#ip domain name {ドメイン名} ・・・（任意）自身の所属するドメイン名を登録

TCP、UDP

TCP（Transmission Control Protocol）

UDP（User Datagram Protocol）

ポート番号TCP/IPプロトコル用途
20TCPftp-dataファイル転送（データ本体）
21TCPftpファイル転送（コントロール）
22TCPsshリモートログイン（セキュア）
23TCPtelnetリモートログイン
25TCPsmtpメール送信
53TCP/UDPdomain、DNSDNS（名前解決はUDP,ゾーン転送はTCP）
67、68UDPDHCPIPアドレスを自動に割り当てる
67→サーバ
68→クライアント
69UDPTFTPファイル転送
80TCPhttpwww
110TCPpop3メール受信
123UDPNTP時刻合わせ
143TCPimapメール受信
161UDPSNMP通信機器の監視、制御。
443TCPhttpswww（セキュア）
520UDPRIPルーティングプロトコル
−UDPRTPIP電話、使用するポートはアプリケーションが定める
ARP

ICMP

ICMP（Internet Control Message Protocol）はエラー通知や問い合わせ情報を転送するためのプロトコル。

  • ベストエフォート型のため通信状況やエラーの確認を行わないIPを補う役割を担い、IPとセットで用いられる。
  • インターネット層のプロトコルであり、IPの上位に位置付けられます。
  • ICMPメッセージはIPデータグラムによってカプセル化されます。
IPヘッダICMPメッセージ

ICMPメッセージは次の２種類に大別できます。

  • エラー通知‥何かしらの理由でパケットが破棄されてしまった場合、Destination Unreachable（宛先到達不能）メッセージで送信者へ通達します。
  • 問い合わせ‥特定のノードに対して問い合わせをしてネットワーク診断をします。ICMPを利用した代表的なツールにpingやtracerouteがあります。

ping

  • pingは特定のノードと通信できるかを確認する際に用いられるコマンド。
  • エコー要求（タイプ8）を発信し、対象のノードからエコー応答（タイプ0）が帰ってきたら、接続OKとする。

ARP

ARP（Address Resolution Protocol）はIPアドレスに基づくMACアドレス（レイヤ2アドレス）を調べるためのプロトコル。

IPアドレスからMACアドレスを調べる一連の処理をアドレス解決といいます。

ARPリクエスト（要求）

ARP要求はブロードキャストで送信するため、宛先MACアドレスは「ffff.ffff.ffff」を使用します。

ARPリプライ（応答）

ユニキャストで応答

ARPテーブル

何度もブロードキャストしないため、一回ARPリプライで取得したMACアドレスを記憶する

OSI参照モデル

OSI参照モデル

OSI参照モデルとは、コンピュータネットワークに求められる機能（通信機能）を7階層の構造に分割し定義したものです。

＜OSIとTCP/IPの比較＞

  • TCP/IPOSI参照モデルよりも運用重視

物理層

ビット列（0と1の情報）と物理的な電気信号を変換

https://ntorelabo.com/2022/10/08/%e3%83%8d%e3%83%83%e3%83%88%e3%83%af%e3%83%bc%e3%82%af%e3%83%87%e3%83%90%e3%82%a4%e3%82%b9%e3%81%ae%e3%82%bb%e3%82%ad%e3%83%a5%e3%83%aa%e3%83%86%e3%82%a3/

ネットワーク層

異なるネットワークを相互に接続しエンドツーエンドで通信するために論理アドレス（IPアドレス）をもとに宛先までの最適ルートを決定します。

プレゼンテーション層

文字コードや圧縮方法などデータの表現形式を定義

トランスポート層

  • エンドツーエンドのデータ通信の信頼性を向上させるための機能が定義されています。
  • トランスポート層プロトコルにはTCPとUDPがあります。

PDU

データ＋ヘッダ（＋トレーラ）のデータ単位をPDU（Protocol Data Unit）といい各層の呼び名がOSI参照モデルと少し異なります。

OSI参照モデルのPDU

フレームヘッダ

フレームヘッダはデータリンク層でカプセル化されるときに付与される情報です。

  • 送信元MACアドレス
  • 宛先MACアドレス

TCP/IPのPDU

TCPプロトコルの場合
UDPプロトコルの場合

カプセル化非カプセル化

MACアドレス

MACアドレスはコンピュータのNIC（network interface card：LANケーブルを挿す穴がくっついている、パソコンに合体させる部品のこと）やネットワーク機器の各ポートに対して製造時に割り当てられます。

フレームの送信元や宛先を識別するためにデータリンク層で利用される。

  • 一意のアドレスである
  • 物理アドレスと呼ばれる
  • 46ビット（6バイト）で16進数12桁
  • 同じネットワーク内に存在するデバイス間の通信で使用される

MACアドレスの構成

  • 前半の24ビット（3バイト）はOUI（ベンダーコード）と呼ばれ、IEEEが各製造会社に割り当てた番号。
  • 後半24ビット（3バイト）は各製造会社が製品に割り当てた番号で、シリアル番号といいます。

特別なMACアドレス

ブロードキャストMACアドレス

ブロードキャストで送信するとき宛先にFFFF.FFFF.FFFF（ブロードキャストMACアドレス）を使用する。

この際送信されるフレームはブロードキャストフレームといわれる。

マルチキャストMACアドレス

マルチキャストで送信したいときはマルチキャストグループに設定された、マルチキャストMACアドレスを指定する。

イーサネット、CSMA/CD

イーサネット（Ethernet）は物理層〜データリンク層を規定するネットワーク規格の一つ。

イーサネットにはDIXイーサネットとIEEE 802.3の2つの企画が存在する。

通信速度

Ethernetは最大10Mbpsの速度に対応しているインターフェイスです。ネットワーク図では「E 」、「Eth」で省略する

省略通信速度
Gi1000Mbps
Fa100Mbps
E10Mbps

※対向と異なるインターフェイスで接続した場合低い方の通信速度に合わせる

Ethernetのフレーム

イーサネットで扱われるフレームはDIX仕様とIEEE 802.3仕様の2種類で、DIX仕様が一般的。

フレームの一つ一つをフィールドといいます。

FCS

FCSは4バイトで（32ビット）バイトのフィールドで宛先アドレスからデータまでの合計ビットを元に送信元で「CRC」と呼ばれる計算方法で算出したCRC値を格納しています。CRC値エラー確認の際にエラー検出スキーマによって使用される

イーサネットのケーブル

CSMA/CD

CSMA/CDはイーサネットで使用される媒体アクセス制御方式の一つ。
半二重通信における交通事故（コリジョン）に対応する仕組みのひとつが「CSMA/CD」です。

⓪ケーブルが使用されている間はデータを送信せずに待機する

①コリジョン（データの衝突）が起こる

②ジャム信号を送る

③バックオフ（ランダム秒待ってから再送処理）

レイトコリジョン

64バイト（イーサネット企画のフレーム最小）を送信した後起こるコリジョンをレイトコリジョンといいます。

【レイトコリジョンが起きる原因】

  • CSMA/CDを使用している
  • 100メートル以上の長さで発生

全二重通信、半二重通信

  • 全二重通信は送信、受信を同時に行える半二重通信は不可。
  • 全二重通信の方が通信速度、効率が良い
  • コリジョンは起きない
  • ハブを使うと全二重通信ができない

コリジョンドメイン

コリジョンの伝わる範囲をコリジョンドメインという。

  • 半二重通信（ハブ、リピータ）と接続する全てのリンクがコリジョンドメインとなります。（カスケード接続）
  • カスケードドメインはコリジョンドメインを拡大させる。
  • レイヤ2以上のデバイス（スイッチ）はコリジョンドメインを分割する。
【WordPress】Search Everythingプラグイン代替え

オリジナルプラグイン作成

ソースファイル

wp-content/
　┣　plugins/
　　　　┣　simple-image-search/
　　　　　　　┣　simple-image-search.php
　　　　　　　┣　js/search.js
　　　　　　　┗　css/style.css

simple-image-search.php

下記のようにすればひとまずプラグインとして登録できており、有効化すると編集画面でショートコード[simple_image_search]でフォームが表示されます。

<?php
/**
 * Plugin Name: Simple Image Search
 * Description: シンプルな画像検索プラグイン
 * Version: 0.1
 * Author: Your Name
 */

// 直接アクセス禁止
if (!defined('ABSPATH')) exit;

class SimpleImageSearch {
    public function __construct() {
        // 初期化フック
        add_action('init', array($this, 'init'));
        
        // Ajax処理の登録（ログイン・非ログインユーザー両方用）
        add_action('wp_ajax_simple_image_search', array($this, 'handle_search'));
        add_action('wp_ajax_nopriv_simple_image_search', array($this, 'handle_search'));
        
        // スクリプトとスタイルの読み込み
        add_action('wp_enqueue_scripts', array($this, 'enqueue_assets'));
    }

    /**
     * 初期化処理
     */
    public function init() {
        // ショートコードの登録
        add_shortcode('simple_image_search', array($this, 'render_search_form'));
    }

    /**
     * スクリプトとスタイルの読み込み
     */
    public function enqueue_assets() {
        // CSSの登録と読み込み
        wp_enqueue_style(
            'simple-image-search',
            plugins_url('css/style.css', __FILE__),
            array(),
            '0.1'
        );

        // JavaScriptの登録と読み込み
        wp_enqueue_script(
            'simple-image-search',
            plugins_url('js/search.js', __FILE__),
            array(), // 依存関係なし
            '0.1',
            true    // フッターで読み込み
        );

        // Ajax URLとnonceをJavaScriptに渡す
        wp_localize_script(
            'simple-image-search',
            'simpleImageSearch',
            array(
                'ajax_url' => admin_url('admin-ajax.php'),
                'nonce' => wp_create_nonce('simple_image_search_nonce')
            )
        );
    }

    /**
     * 検索フォームの表示
     */
    public function render_search_form() {
        ob_start();
        ?>
        <div class="simple-image-search">
            <div class="search-header">
                <input type="text" 
                    id="image-search-input" 
                    placeholder="画像を検索..."
                    autocomplete="off">
            </div>
            <div id="image-search-results" class="search-results"></div>
        </div>
        <?php
        return ob_get_clean();
    }

    /**
     * 検索処理のハンドラー（Ajax）
     */
    public function handle_search() {
        // nonceチェック
        check_ajax_referer('simple_image_search_nonce', 'nonce');

        // 検索キーワードを取得して整形
        $search_term = sanitize_text_field($_POST['search_term'] ?? '');

        // 検索クエリの設定
        $args = array(
            'post_type' => 'attachment',
            'post_mime_type' => array(
                'image/jpeg',
                'image/png',
                'image/gif'
            ),
            'post_status' => 'inherit',
            'posts_per_page' => 20,
            's' => $search_term,
            'orderby' => 'date',
            'order' => 'DESC'
        );

        // 検索実行
        $query = new WP_Query($args);
        $results = array();

        if ($query->have_posts()) {
            while ($query->have_posts()) {
                $query->the_post();
                $attachment_id = get_the_ID();
                
                // 画像情報の取得
                $thumbnail_url = wp_get_attachment_image_url($attachment_id, 'thumbnail');
                $full_url = wp_get_attachment_image_url($attachment_id, 'full');
                $metadata = wp_get_attachment_metadata($attachment_id);
                
                // ファイルサイズの取得
                $file_path = get_attached_file($attachment_id);
                $file_size = file_exists($file_path) ? filesize($file_path) : 0;
                
                $results[] = array(
                    'id' => $attachment_id,
                    'title' => get_the_title(),
                    'thumbnail_url' => $thumbnail_url,
                    'full_url' => $full_url,
                    'width' => $metadata['width'] ?? '',
                    'height' => $metadata['height'] ?? '',
                    'filesize' => size_format($file_size),
                    'date' => get_the_date()
                );
            }
        }

        wp_reset_postdata();
        wp_send_json_success($results);
    }
}

// プラグインのインスタンス化
new SimpleImageSearch();

search.js

/**
 * 画像検索用のJavaScript
 */
document.addEventListener("DOMContentLoaded", function () {
  const searchInput = document.getElementById("image-search-input");
  const resultsContainer = document.getElementById("image-search-results");

  let searchTimer = null;
  let isSearching = false;

  // 検索入力イベントの設定
  searchInput.addEventListener("input", function () {
    clearTimeout(searchTimer);

    const searchTerm = this.value.trim();

    if (searchTerm === "") {
      resultsContainer.innerHTML = "";
      return;
    }

    // 入力から300ms後に検索実行
    searchTimer = setTimeout(() => {
      performSearch(searchTerm);
    }, 300);
  });

  /**
   * 検索実行関数
   */
  async function performSearch(searchTerm) {
    if (isSearching) return;

    isSearching = true;
    resultsContainer.innerHTML = '<div class="searching">検索中...</div>';

    try {
      const formData = new FormData();
      formData.append("action", "simple_image_search");
      formData.append("nonce", simpleImageSearch.nonce);
      formData.append("search_term", searchTerm);

      const response = await fetch(simpleImageSearch.ajax_url, {
        method: "POST",
        body: formData,
      });

      const data = await response.json();

      if (data.success) {
        displayResults(data.data);
      } else {
        resultsContainer.innerHTML =
          '<div class="error">検索中にエラーが発生しました</div>';
      }
    } catch (error) {
      console.error("Search error:", error);
      resultsContainer.innerHTML =
        '<div class="error">検索中にエラーが発生しました</div>';
    } finally {
      isSearching = false;
    }
  }

  /**
   * 結果表示関数
   */
  function displayResults(results) {
    resultsContainer.innerHTML = "";

    if (results.length === 0) {
      resultsContainer.innerHTML =
        '<div class="no-results">画像が見つかりませんでした</div>';
      return;
    }

    const gridContainer = document.createElement("div");
    gridContainer.className = "image-grid";

    results.forEach((image) => {
      const imageItem = createImageItem(image);
      gridContainer.appendChild(imageItem);
    });

    resultsContainer.appendChild(gridContainer);
  }

  /**
   * 画像アイテム要素作成関数
   */
  function createImageItem(image) {
    const imageItem = document.createElement("div");
    imageItem.className = "image-item";

    // クリックでオリジナル画像を新しいタブで開く
    imageItem.addEventListener("click", () => {
      window.open(image.full_url, "_blank");
    });

    imageItem.innerHTML = `
            <div class="image-preview">
                <img src="${image.thumbnail_url}" 
                     alt="${image.title}"
                     loading="lazy">
            </div>
            <div class="image-info">
                <div class="title">${image.title}</div>
                <div class="meta">
                    ${image.width}x${image.height}px
                    <span class="separator">|</span>
                    ${image.filesize}
                </div>
            </div>
        `;

    return imageItem;
  }
});

style.css

.simple-image-search {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* 検索入力エリア */
.search-header {
    margin-bottom: 20px;
}

#image-search-input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

#image-search-input:focus {
    border-color: #0073aa;
    outline: none;
}

/* 検索結果グリッド */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

/* 画像アイテム */
.image-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
}

.image-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 画像プレビュー */
.image-preview {
    position: relative;
    padding-top: 75%; /* 4:3のアスペクト比 */
    background: #f0f0f0;
}

.image-preview img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 画像情報 */
.image-info {
    padding: 10px;
}

.image-info .title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-info .meta {
    font-size: 12px;
    color: #666;
}

.image-info .separator {
    margin: 0 5px;
    color: #ddd;
}

/* ステータスメッセージ */
.searching,
.error,
.no-results {
    text-align: center;
    padding: 20px;
    color: #666;
}

.error {
    color: #d63638;
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
    .image-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }
    
    .image-info .title {
        font-size: 12px;
    }
    
    .image-info .meta {
        font-size: 11px;
    }
}

検索のロジック

メディアライブラリに画像をアップロードしたときの流れ

1. 画像アップロード
   ↓
2. wp_postsテーブルにレコード作成
   - post_type = 'attachment'
   - post_mime_type = 'image/jpeg'（など）
   - post_title = ファイル名（自動設定）
   ↓
3. wp_postmetaテーブルにメタ情報を保存
   - _wp_attachment_metadata（サイズ情報など）
   - _wp_attachment_image_alt（Alt テキスト）
WordPressメディア管理フロー 画像アップロード メディアライブラリから サーバー処理 1. ファイル保存 2. サムネイル生成 データベース登録 wp_posts wp_postmeta 画像削除 メディアライブラリから ファイル削除 1. 元ファイル 2. サムネイル データベース削除 関連レコード削除 メタデータ削除 ファイル保存場所 wp-content/uploads/年/月/ 例: wp-content/uploads/2024/01/image.jpg データベース保存情報 タイトル、説明、Alt属性 サイズ情報、アップロード日時
FTP操作のリスク 正常な状態 サーバー 画像ファイル サムネイル データベース 画像情報 メタデータ データの整合性が保たれている メディアライブラリ 正常に表示・動作 すべての機能が利用可能 FTP操作後の問題 サーバー ファイル削除/追加 サムネイル欠落 データベース 古い情報のまま 不整合発生 データの整合性が失われる メディアライブラリの問題 – 404エラー – 壊れた画像リンク – サムネイル表示エラー

WordPressの基本的なデータベース構造

/**
 * wp_posts テーブル（メインテーブル）
 * すべての投稿、ページ、メディアファイルの基本情報を格納
 */
CREATE TABLE wp_posts (
    ID bigint(20) NOT NULL AUTO_INCREMENT,    -- 投稿/メディアのユニークID
    post_title text NOT NULL,                 -- タイトル
    post_name varchar(200) NOT NULL,          -- スラッグ（URL用）
    post_content longtext NOT NULL,           -- 本文/説明
    post_excerpt text NOT NULL,               -- 抜粋/キャプション
    post_type varchar(20) NOT NULL,           -- 投稿タイプ（attachment=メディア）
    post_mime_type varchar(100) NOT NULL,     -- メディアタイプ（image/jpeg等）
    post_status varchar(20) NOT NULL,         -- 状態
    /* その他のフィールド */
);

/**
 * wp_postmeta テーブル（メタ情報テーブル）
 * 追加の情報を格納（Alt テキスト、画像サイズなど）
 */
CREATE TABLE wp_postmeta (
    meta_id bigint(20) NOT NULL AUTO_INCREMENT,  -- メタ情報のID
    post_id bigint(20) NOT NULL,                 -- 関連する投稿/メディアのID
    meta_key varchar(255),                       -- メタデータの種類
    meta_value longtext,                         -- メタデータの値
);

参考サイト

https://internet.mints.ne.jp/%e3%83%af%e3%83%bc%e3%83%89%e3%83%97%e3%83%ac%e3%82%b9%e3%81%ae%e3%83%a1%e3%83%87%e3%82%a3%e3%82%a2%e3%81%ab%e4%bf%9d%e5%ad%98%e3%81%97%e3%81%9f%e7%94%bb%e5%83%8f%e3%81%a8%e3%83%87%e3%83%bc%e3%82%bf/
ネットワークデバイスのセキュリティ

セキュリティ対策

ユーザーアカウントの権限レベル

AAA

AAAとはAutentication（認証）、Authorization（許可）、Accounting（アカウンティング）の頭文字を繋げたものです。これら3つのセキュリティ機能を提供する仕組みを表しています。

認証：ユーザの識別

ユーザID／パスワード、デジタル証明書などの有効なクレデンシャルを確認し、正当なユーザかどうかを識別します。

許可：認証に成功したユーザに対して権限を制限

認証されたユーザに対して提供するネットワークサービスを制限します。

アカウンティング：認証に成功したユーザの情報を収集

ユーザがネットワークに接続したり、機器にログインしたりする際のログを記録することができます。

RADIUSとTACACS+

RADUSとTACACS+はAAAのセキュリティ機能を提供するプロトコルです。

RADUS

  • IETF標準
  • UDP
  • パスワードのみ暗号化
  • 認証と許可を統合

TACACS+

  • シスコ独自
  • TCP
  • パケット全体を暗号化
  • AAA機能をすべて独立

AAAによる認証の設定

(config)#aaa authentication { タイプ } { default | リスト名 } { メソッド名 }

例）(config)#aaa authentication login default group radius local

CoA

CoA（Change-of-Authorizaition）はRADIUS許可の変更を意味します。AAAサーバがAAAクライアントにCoA要求パケットを送信し、すでに存在しているセッションの再認証を行います。これにより新しいポリシーを適用できます。

プロトコルRADIUSTACACS+
標準化IETF標準（RFC2865、2866）シスコ独自
TCP/UDPUDPTCP
ポート番号1812、181349
暗号化パスワードのみ暗号化パケット全体を暗号化
AAAアーキテクチャ認証と許可は1つに統合、アカウンティングは独立している認証、許可、アカウンティングはすべて独立している

IEEE 802.1X

IEEE 802.1Xの構成要素

コマンド

AAAによる認証の設定

(config)#aaa authentication [ タイプ ] [ デフォルト | リスト名 ] [ method1 ] [ method2 ] …

認証タイプ説明
loginログイン認証
enable特権モードの移行するための認証（適用回線はdefaultのみ）
dot1xIEEE 802.1xの認証
リスト種類説明
default全ての回線（aux、console、vtyなど）にデフォルトで適用されているリスト
リスト名
（任意の名前）		回線ごと個別に適用可能なリスト
method種類説明
group radiusRadiusサーバによる認証を行う
group tacacs+TACACS+サーバによる認証を行う
localローカルデータベースで指定した「ユーザ名」と「パスワード」で認証を行う
(config)#username [ ユーザ名 ] password [パスワード]
linelineで指定した「パスワード」で認証を行う
(config-line)#password [パスワード]
enableenableで指定した「パスワード」で認証を行う
(config)#enable [ password | secret ] [パスワード]
none認証せずログインを許可

＜特権モードに移行するための認証の優先度＞

優先度
1(config)#aaa authentication enable default [ method ]左記の「method」で指定した方法で認証を行う
2(config)#enable secret [ パスワード ]左記で指定した「パスワード」で認証を行う
3(config)#enable password [ パスワード ]左記で指定した「パスワード」で認証を行う

リスト名を使用した適用

(config)#line [ aux | console | vty ] [ 番号 ] [ 終了番号 ]

(config-if)#login authentication [ デフォルト | リスト名 ]

auxauxポートの設定モードに移行
consoleコンソールポートの設定モードに移行
vtyvtyポートの設定モードに移行
番号ポートの開始番号を指定
終了番号ポートの終了番頭を指定
ポートの開始番号を「0」、終了番号を「4」とすることで「0〜4」のポートにまとめて同じ設定ができる
defaultデフォルトで適用されているリスト
リスト名リストで定義したリスト名
回線に適用したいメソッドリストを指定

PKI

PKI（PUblic Key Infrastructure：公開鍵基盤）は公開鍵暗号方式による通信を安全に行うための基盤です。

構成管理ツール、REST API、JSON

構成管理ツール

ネットワーク上のサーバなどに対して、アプリケーションの自動インストールや設定の自動化を行うツールを構成管理ツールと呼びます。

代表的な構成管理ツール

  • Ansible
    • リモードデバイス通信にSSHを使用します。
  • Puppet
  • Chef
比較項目AnsiblePuppetChef
　開発組織RedHatPuppet LabsChef Software
　使用言語PythonRubyRuby
　アーキテクチャエージェントレスエージェントエージェント
　構成管理方法Push型通信Pull型通信Pull型通信
　制御ファイルplaybook
（｛プレイ｛タスク）		manifestRecipe
　コード記述言語YAML独自言語Ruby
　使用プロトコルSSH/NETCONFHTTP/HTTPSHTTP/HTTPS
　サーバ側待ち受けポート–TCP 8140TCP 10002

自動管理

ネットワークの自動化によるメリットとして次の2つを挙げています。

  • デバイス構成の自動化…デバイス構成の設定を自動化することで、設定ミスを減らせるメリットがあります。
  • デバイスのソフトウェアの管理…デバイス管理の作業負荷を軽減することができます。

REST API

REST（REpresentational State Transfer）とは、URLでデバイスを指定し、デバイスの設定や情報収集を行うための仕組みのことです。プロトコルはHTTPまたはHTTPSを使用します。

  • REST APIが対応しているデータフォーマットはJSON形式とXML形式
  • ステートレスなクライアント/サーバプロトコル
  • 階層構造

HTTPリクエスト

データに対する基本処理のことを、CRUD（クラッド）といいます。

リクエストメソッド動作CRUD
POST新規作成C（Create）
GET読み出しR（Read）
PUT更新（置き換え）U（Update/Replace）
PATCH更新（一部変更）U（Update/Modify）
DELETE削除D（Delete）

HTTPリクエストヘッダ

Accepttext/html、application/jsonクライアントが理解できるコンテンツタイプ
Accept-Encodinggzip、deflate、brクライアントがサポートする圧縮形式
Accept-Languageja、en-USクライアントが理解できる自然言語

HTTPレスポンスヘッダ

content-encodingbrサーバが応答に使用した圧縮形式
content-typetext/htmlサーバが応答に使用したコンテンツタイプ

HTTPステータスコード

クラス意味
情報レスポンスリクエストを受理し、処理を継続している
100：現時点まで問題はなく、クライアントはリクエストを継続できる
成功レスポンスリクエストを理解し、処理された
200：リクエストが成功した
リダイレクト要求されたリソースの代わりに新しいリソースを使用した
301：リクエストしたリソースが恒久的に移動した
クライアントエラークライアントが送信したリクエストに問題があった
404：リクエストしたリソースが見つからない
サーバエラーサーバ上のエラーでリクエストの処理に失敗した
500：サーバの内部でエラーが発生した

URI

URIとは、リソースを識別する名前の統一された書式です。HTTPでは、リクエストするリソースをURIで指定します。

（使用するプロトコル）://（APIを提供するホスト名、IPアドレス）/(APIのリソース名）/（APIに渡すパラメータ）

JSON

JSON（JavaScript Object Notation）は、テキスト形式（他にはXML、CSV）のデータフォーマットの一つです。

人間にもプログラムにも扱いやすいフォーマットのため、コントローラとプログラムの間の通信（NBI）で使われる

  • keyとvalueの間は:
  • データの区切りは,
  • オブジェクトは{}で囲む（順番関係ないデータ）
  • 配列は[]で囲む（順番関係あるデータ）
  • キーは「”（ダブルクオーテーション）」で囲む
  • 値が数値の場合はそのまま記述し、値が文字列の場合は「”（ダブルクオーテーション）」で囲む

【Next.js】Service Worker を使用してプッシュ通知の実装

Service Worker とは

Webアプリケーションのバックグラウンドで動作するスクリプト

  • ブラウザのメインスレッドとは別に動作
  • オフライン動作が可能
  • プッシュ通知を受信可能
  • バックグラウンドで同期処理が可能

プッシュ通知の流れ

Service Workerのライフサイクル 1. 登録 (Registration) navigator.serviceWorker.register() 2. インストール ‘install’ イベント 3. アクティブ化 ‘activate’ イベント 実行中 通知の受信と表示 登録処理の実行場所: • アプリケーション起動時（layout.tsxやapp.tsx） • ユーザーアクション時（ボタンクリックなど） イベントの実行場所: • service-worker.js 内でイベントをリスン • プッシュ通知やキャッシュの処理を実装

制作手順

Next.jsプロジェクトの作成

PS C:\test> npx create-next-app@latest 1231_push-notification --typescript
Need to install the following packages:
create-next-app@15.1.3
Ok to proceed? (y) y

√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack for `next dev`? ... No / Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
√ What import alias would you like configured? ... @/*
Creating a new Next.js app in C:\ida_test\1231_push-notification.

web-pushのインストール

# 必要なパッケージのインストール
npm install web-push  # プッシュ通知送信用
npm install @types/web-push --save-dev  # TypeScript型定義

web-pushは、プッシュ通知を送信するためのNode.jsライブラリです。

  1. VAPIDキーの生成
    • プッシュ通知の認証に必要な鍵ペアを生成
    • サーバーとブラウザ間の安全な通信を確保
  2. 通知の送信
    • サーバーからブラウザへプッシュ通知を送信
    • 暗号化された通信を管理

VAPID キーの生成

これはプッシュ通知の認証に必要なキーペアです

# web-pushコマンドラインツールをグローバルにインストール
npm install -g web-push

# VAPIDキーを生成
web-push generate-vapid-keys

.env.local（生成されたキーを記載）

# VAPIDキー（web-push generate-vapid-keysで生成したものを設定）
NEXT_PUBLIC_VAPID_PUBLIC_KEY=あなたのパブリックキー
VAPID_PRIVATE_KEY=あなたのプライベートキー
VAPID_SUBJECT=mailto:your-email@example.com  # 連絡先メールアドレス

構成ファイル群

プロジェクトのフォルダ構造
push-notification-project/
├── public/
│   ├── service-worker.js     # プッシュ通知を受け取るためのService Worker
│   ├── manifest.json         # PWAのマニフェストファイル
│   └── icon.png             # 通知用のアイコン画像（192x192px推奨）
│
├── src/
│   ├── components/
│   │   └── NotificationTest.tsx  # 通知テスト用のコンポーネント
│   │
│   ├── pages/
│   │   ├── index.tsx         # メインページ
│   │   ├── api/             # APIルート
│   │   │   ├── subscribe.ts  # 購読情報を保存するAPI
│   │   │   └── push.ts       # 通知を送信するAPI
│   │   │
│   │   └── _app.tsx         # アプリケーションのルート
│   │
│   └── lib/
│       └── pushUtils.ts      # 通知関連のユーティリティ関数
│
├── .env.local               # 環境変数（VAPIDキーなど）
├── package.json
└── tsconfig.json

package.json

{

...

  "scripts": {
    "dev": "next dev --experimental-https",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "15.1.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "web-push": "^3.6.7"
  },
  ...

}

service-worker.js

// public/service-worker.js
self.addEventListener("install", (event) => {
  console.log("Service Worker: インストール完了");
});

self.addEventListener("activate", (event) => {
  console.log("Service Worker: アクティブ化完了");
});

self.addEventListener("push", (event) => {
  const options = {
    body: "プッシュ通知テスト",
    icon: "/icon.png",
    requireInteraction: true,
    renotify: true,
    tag: "push-test",
    data: {
      url: self.location.origin,
    },
  };

  event.waitUntil(self.registration.showNotification("プッシュ通知", options));
});

self.addEventListener("notificationclick", (event) => {
  event.notification.close();
  event.waitUntil(clients.openWindow("/"));
});

manifest.json

{
    /* アプリケーションの基本情報 */
    "name": "プッシュ通知デモ",           // アプリの正式名称
    "short_name": "通知デモ",            // ホーム画面での短い名称
    "description": "プッシュ通知のデモアプリケーション",
    
    /* 表示設定 */
    "start_url": "/",                    // 起動時のURL
    "display": "standalone",             // 表示モード
    "background_color": "#ffffff",       // 背景色
    "theme_color": "#000000",           // テーマ色
    
    /* アイコン設定 */
    "icons": [
        {
            "src": "/icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    
    /* プッシュ通知の許可設定 */
    "permissions": [
        "notifications"
    ]
}

src\app\components\ClientWrapper.tsx

'use client';

import dynamic from 'next/dynamic';

const NotificationTest = dynamic(
  () => import('@/app/components/NotificationTest'),
  { ssr: false }
);

export default function ClientWrapper() {
  return <NotificationTest />;
}

src\components\NotificationTest.tsx

// src/components/NotificationTest.tsx
'use client';

import { useState, useEffect } from 'react';

export default function NotificationTest() {
  const [permission, setPermission] = useState<NotificationPermission>('default');
  const [registration, setRegistration] = useState<ServiceWorkerRegistration | null>(null);

  useEffect(() => {
    setPermission(Notification.permission);
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/service-worker.js')
        .then(reg => {
          console.log('ServiceWorker登録成功:', reg);
          setRegistration(reg);
        })
        .catch(err => console.error('ServiceWorker登録エラー:', err));
    }
  }, []);

  const sendNotification = async () => {
    try {
      // 通知許可確認
      const currentPermission = await Notification.requestPermission();
      setPermission(currentPermission);
      if (currentPermission !== 'granted') {
        alert('通知が許可されていません');
        return;
      }

      console.log('===通知テスト開始===');

      // Service Worker通知
      if ('serviceWorker' in navigator && registration) {
        console.log('SW通知試行');
        await registration.showNotification('SW通知', {
          body: 'SW経由テスト',
          requireInteraction: true,
          renotify: true,
          tag: 'test-sw'
        });
        console.log('SW通知完了');
      }

      // ブラウザ通知
      console.log('ブラウザ通知試行');
      const notification = new Notification('ブラウザ通知', {
        body: 'ブラウザ経由テスト',
        requireInteraction: true,
        renotify: true,
        tag: 'test-browser'
      });
      notification.onclick = () => {
        window.focus();
        notification.close();
      };
      console.log('ブラウザ通知完了');

    } catch (error) {
      console.error('通知エラー:', error);
    }
  };

  return (
    <div className="p-4">
      <button 
        onClick={sendNotification}
        className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
      >
        テスト通知を送信
      </button>
      <p className="mt-2">通知許可状態: {permission}</p>
    </div>
  );
}

src\components\NotificationTest.tsx

// src/components/NotificationTest.tsx
'use client';

import { useState, useEffect } from 'react';

export default function NotificationTest() {
  const [permission, setPermission] = useState<NotificationPermission>('default');
  const [registration, setRegistration] = useState<ServiceWorkerRegistration | null>(null);

  useEffect(() => {
    setPermission(Notification.permission);
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/service-worker.js')
        .then(reg => {
          console.log('ServiceWorker登録成功:', reg);
          setRegistration(reg);
        })
        .catch(err => console.error('ServiceWorker登録エラー:', err));
    }
  }, []);

  const sendNotification = async () => {
    try {
      // 通知許可確認
      const currentPermission = await Notification.requestPermission();
      setPermission(currentPermission);
      if (currentPermission !== 'granted') {
        alert('通知が許可されていません');
        return;
      }

      console.log('===通知テスト開始===');

      // Service Worker通知
      if ('serviceWorker' in navigator && registration) {
        console.log('SW通知試行');
        await registration.showNotification('SW通知', {
          body: 'SW経由テスト',
          requireInteraction: true,
          renotify: true,
          tag: 'test-sw'
        });
        console.log('SW通知完了');
      }

      // ブラウザ通知
      console.log('ブラウザ通知試行');
      const notification = new Notification('ブラウザ通知', {
        body: 'ブラウザ経由テスト',
        requireInteraction: true,
        renotify: true,
        tag: 'test-browser'
      });
      notification.onclick = () => {
        window.focus();
        notification.close();
      };
      console.log('ブラウザ通知完了');

    } catch (error) {
      console.error('通知エラー:', error);
    }
  };

  return (
    <div className="p-4">
      <button 
        onClick={sendNotification}
        className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
      >
        テスト通知を送信
      </button>
      <p className="mt-2">通知許可状態: {permission}</p>
    </div>
  );
}

プッシュ通知許可

  1. Windowsシステム通知設定
  • Windowsキー + I（設定を開く）
  • システム > 通知とアクション
  • 「Chrome」を探して許可に設定
  1. Chromeブラウザ通知
  • Chrome右上の⋮ > 設定
  • プライバシーとセキュリティ > サイトの設定 > 通知
  • または chrome://settings/content/notifications を直接入力
  1. localhostサイト許可
  • localhost:3000にアクセス
  • アドレスバー左の🔒をクリック
  • 通知設定を「許可」に変更
  • または上記Chrome通知設定画面で手動で追加
  • 通知送信ボタンを含むコンポーネント
  • Service Workerの初期化コードがある場所
  • pages/api/またはapp/api/内の通知関連のAPIハンドラ
仮想化とインテリジェントネットワーク（SDN）

サーバ仮想化

1台の物理マシン上に複数の論理サーバを構成して運用することをサーバ仮想化といいます。サーバ仮想化を導入するには、仮想マシンを構成管理するソフトウェア（ハイパーバイザ）を物理マシンにインストールします。

仮想マシンごとにそれぞれ固有のIPアドレスとMACアドレスを割り当てます。

クラウドコンピューティング

クラウドコンピューティングとは、インターネットをクラウドベンダーが所有するサーバのサービスをサーバの場所を意識することなく利用できるコンピューティング形態をいいます。

＜クラウドコンピューティングの特徴＞

NIST（National Institute of Standards and Technology：アメリカ国立標準技術研究所）によって以下のように定義

  • オンデマンド、セルフサービス：ユーザが必要に応じて自身でコンピューティング能力を設定できる
  • 幅広いネットワークアクセス：ネットワークを通じて利用可能で、様々なプラットフォームから利用できる
  • リソースの共用：集積されたコンピューティングリソースを複数のユーザで共用する。リソースは需要に応じて動的に変更される。
  • スピーディな拡張性：需要に応じて即座にリソースの追加、拡張が可能
  • サービスが計測可能であること：コンピューティングリソースの利用状況をモニタ、コントロールし、報告される
オンプレミスクラウド
・初期費用が高い
・どれだけ使用しても追加費用はかからない
・機器の導入に時間がかかる
・自社の要件に応じて物理構成を自由にカスタマイズできる		・初期費用が安い
・使用した分だけ費用がかかる
・契約してすぐに使用可能
・提供されているサービスの範囲でしかカスタマイズできない

プライベートクラウド

  • オンプレミス型：自社でクラウド環境を構築・管理しユーザに提供する。
  • ホスティング型：クラウド業者のパブリッククラウド内にその企業専用の環境を用意する。

パブリッククラウド型

  • SaaS（Softwere as a Service）：「サービスの形で提供されるソフトウェア」クラウド上のアプリケーションを利用できる。
  • PaaS（Platform as a Service）：「サービスの形で提供されるプラットフォーム」ソフトウェアを構築および稼働させるために必要なハードウェアやOSなどのプラットフォーム（土台）をサービスとしてとして提供する形態です。クラウド上でアプリケーションを開発できる。
  • IaaS（Infrastructure as a Service）：「サービスの形で提供されるインフラストラクチャ」独自のオペレティングシステム（OS）を利用できる。クラウド上で仮想サーバなどのインフラ環境を開発できる。
  • NaaS（Network as a Service）：クラウド上でネットワークサービスを利用できる。

＜SaaS、PaaS、IaaS、オンプレミスの違い＞

＜クラウドの仕組み（仮想化）＞

SDN

  • SDN（Software-Defined Nerworking）でネットワーク機器の管理・制御できる。
  • コントロールプレーンとデータプレーンを分離し、ソフトウェアによって柔軟に定義することができる。
  • SDNコントローラでVTN（仮想テナントネットワーク）を用いてネットワークを仮想化できる。

データプレーン

  • コントロールプレーンの処理によって確定したパケットやフレームの転送先情報に従って、実際にパケットやフレームを転送します。
  • コントロールプレーンによって学習されていない宛先へのデータの破棄またはフラッティング
  • 802.1Qヘッダを編集
  • アクセスリストによる破棄
  • パケットのカプセル化、非カプセル化
  • NAT変換

コントロールプレーン

  • ルーティングプロトコル
  • MACアドレス学習
  • ARP
  • NDP

SDNアーキテクチャ

SDNアーキテクチャは次の3つのレイヤから構成されます。

  • アプリケーション層
  • コントロール層
  • インフラストラクチャ層

SDNアーキテクチャの各階を接続するために、次の2つのAPIがあります。

ノースバウンドAPIコントロール層とアプリケーション層の間のインターフェイス。ネットワークを制御するプログラミングが可能

HTTP/HTTPSによってRESTful APIにアクセスする。
データ形式は主にXML、JSON
サウスバウンドAPIインフラストラクチャ層とコントロール層（サービス抽象化層）の間のインターフェイス。

OpenFlow、OpFlex、telnet、SSH、SNMP、NETCONF、RESTCONF

CEF

スイッチング処理はコントロールプレーンとデータプレーンで実行されますが、CEF（Cisco Express Forwarding）はデータプレーンでのみでスイッチングを行うことで高速なパケット転送を実現しています。

データプレーンで
使用するテーブル		説明
FIBテーブル　ルーティングテーブルに該当する役割（ ルーティングテーブルをもとに作成 ）
Adjacencyテーブル　ARPテーブルに該当する役割（ ARPテーブルをもとに作成 ）

インテントAPI

インテントAPIとはCisco DNA CenterのNorthboundのAPIで、ネットワーク上で動作するサービスやアプリケーションとCisco DNA Centerが通信するために使われます。ポリシーベースの操作により、ネットワーク構築の複雑な過程ではなく、最終的な結果を意識してネットワークを構築できることが特徴です。

  • 一般的にはRESTful APIを使用
  • HTTPメソッド（GET、POST、PUT、DELETE ）でネットワークを制御します。

OpenFlow

OpenFlowではこれまで一つのネットワーク機器の内部に同居していた経路制御の機能とデータ転送の機能をそれぞれ別に機器に分離し、制御装置（OpenFlowコントローラ）が複数の中継・転送装置（OpenFlowスイッチ）の設定や振る舞いを一括して管理する。

OpFlex

OpenFlowと比べて、シンプルなポリシーのみでSDNの構築を可能にしたAPIのこと。
Ciscoが独自に開発した。

Cisco ACI

  • シスコによって提供されるデータセンター向けのSDNソリューションです。
  • SDNコントローラにはAPIC（シスコ）
  • サウスバウンドAPIにはOpFlex
  • スパイン/リーフ型
Cisco ACI・Ciscoが提供する次世代のSDN製品
APIC・データセンター向けのSDNコントローラ
APIC-EM
（APIC Enterprise Module）		 
・LAN/WAN向けのSDNコントローラ
・Ciscoによる企業向けのコントローラ
・OpenDaylight SDN Controller
・Cisco Open SDN Controller		Open SDNで使われるコントローラ
Open SDNCisco ACIAPIC
Enterprise
Module
コントロール
プレーンが
変わる		○○×
コントロール
プレーンの
集中度		ほぼ全て一部分散
（集中管理無し）
SBIOpenFlowOpFlexCLI（Telnet、SSH）、
SNMP
代表的な
コントローラ		OpenDaylight SDN Controller
Cisco Open SDN Controller		APICAPIC-EM

ACIで使われるネットワークトポロジ

APIC Enterprise Module

APIC-EM

シスコが提供するエンタープライズ（企業）向けのSDNコントローラ。

  • ネットワーク情報データベース
  • ネットワークのトポロジの可視化
  • ゼロタッチ導入
  • ポリシーマネージャ
  • ACL分析
  • QoS導入
  • Cisco IWANアプリケーション

Cisco SD-Access

  • シスコが提供する企業向けの新しいSDNソリューションです

＜SDAの構成＞

アンダーレイ

  • ルータやスイッチ、ケーブルなどの物理的なネットワーク
  • OSPFやIS-ISといったリンクステート型のプロトコルを使用
  • すべてがレイヤ3での接続（STP/RSTPは使用しない）

オーバーレイ

  • VXLANトンネルの宛先アドレスを解決するプロトコルとしてLISP（Locator Identity Separation Protocol）を使用

Cisco DNA Center

Cisco DNA（Digital Network Architecture）は、Ciscoが提唱するインテントベースネットワーク（意図主導型ネットワーク、Intent-based Network: IBN）をエンタープライズ（企業）ネットワークに適用するためのアーキテクチャです。Cisco SD-Accessで使用されるSDNコントローラです。

  • Cisco DNAのコントローラ
  • 設定運用の自動化…個別に設定しなくても、統一したポリシーでネットワークを構築できます。
  • 分析とアシュアランス（保証）
  • 管理しているネットワーク機器が自身の情報をCisco DNA Centerに通知する際にはSNMP/Syslogでデータを送信します。
  • SBIとしてTelnet/SSH/SNMPやNETCONF/RESTCONFを使用
  • ネットワーク状況の可視化による安全性の向上

  • Cisco DNA CenterはNBIとしてREST APIを提供
特徴将来型コントローラベース
コンロトールプレーン自律分散中央集中
管理の単位ネットワーク機器ネットワーク
機器の設定各ネットワーク機器各ネットワーク
ファームウェアの管理各ネットワーク機器ごとにファームウェアを管理する。各機器ごとに更新する。コントローラで一括管理、更新
セキュリティインターフェイス、ネットワークの境界でフィルタリングNetFlowのようなネットワークトラフィックを分析する機能を用いて、ネットワーク全体に対処。
障害復旧手動でトラブルシューティングAIや機械学習。迅速かつ正確。

アシュアランス

Cisco DNA Centerには、アシュアランスと呼ばれるモニタリングを行う機能があります。SNMPやSyslog、NetFlowなどの様々なソースからデータを収集し、監視、分析し問題の早期発見、解決が可能になります。

テンプレートエディタ

Cisco DNA Centerには、テンプレートエディタと呼ばれるCLIテンプレートを作成するツールがあります。CLIテンプレートを利用しネットワーク機器の設定を行うことで機器設定の一貫性を保つことができます。

REST API

自作プログラムなどから、Cisco DNA Centerの機能にアクセスできる。利用したい機能を組み合わせることができる。

https://ntorelabo.com/2022/10/08/%e6%a7%8b%e6%88%90%e7%ae%a1%e7%90%86%e3%83%84%e3%83%bc%e3%83%ab%e3%80%81rest-api%e3%80%81json/#restapi

マルチベンダSDK

Cisco DNA Centerが非Cisco機器を制御できるように機能を追加するためのソフトウェア開発キット。

インベントリ

Cisco DNA Centerのインベントリ機能は、IPアドレスやMACアドレスなどネットワーク内のデバイスの情報を保持する機能です。定期的にこれらの情報を収集して一元的に管理します。デバイスに依存せず設定変更時の管理等が容易になります。

Scalable Groups

SDNコントローラであるCisco DNA Centerでは、IPアドレスに依存しないスケーラブルグループによるアクセス制御をGUI上にて設定できます。先ず、管理者がユーザやデバイスをグループとして定義します。次に、SGT（Scalable Group Tag）と呼ばれるタグを管理者が定義したグループに割り当てます。最後にそのSGTごとに、許可や拒否のアクセスポリシーを適用すれば完了します。

「グループ」を表すもの、「送信元」や「宛先」を識別するときに使うものです。

  • セキュリティーポリシー適用のコンポーネント
  • ネットワーク機器への直接的な設定は必要ない

インテントベースネットワーク（IBN：Intent Base Network）：意図ベースネットワーク）

ネットワークで意図した状態を確保することを目指す新しいテクノロジーの概念。

EPG間の通信の許可・拒否を決めたポリシーを作成する⇒物理的な配慮に関係なくシンプルなポリシーのみでネットワーク全体の通信ルールを設定・運用できる。

スパイン／リーフ構成

スパイン／リーフ構成は、Cisco ACIが提供しているネットワーク形態のことです。次の3つのコンポーネントで構成されています。

  • APIC…Cisco ACIのコントローラ
  • スパインスイッチ…スパイン（背骨）
  • リーフスイッチ…リーフ（枝葉）

スパイン／リーフ構成の特徴は、リーフスイッチは全てスパインスイッチと接続し、リーフスイッチ同士およびスパインスイッチどうしは接続しない構成となります。

全ての転送は2ホップ内に収まる。

3階層キャンパス設計モデル

大規模環境向け。拠点追加が容易。

コア層と、ディストリビューション層で冗長化

コア層フルメッシュディストリビューション層のスイッチを収容する
ディストリビューション層パーシャルメッシュ・アクセス層のスイッチを収容する、VLAN間ルーティングを行います。
・ポリシーに基づくフィルタリングを行う
アクセス層スターユーザーを直接収容する
2階層キャンパス設計モデル

小規模環境向け。3階層で使われているコア層はディストリビューション層に統合されいます。コラプストコア（Collapsed core：つぶれたコア）設計とも呼びます。

  • ディストリビューション層…アクセス層のスイッチを収容する、VLAN間ルーティングを行います。
  • アクセス層…ユーザーを直接収容する

CEF

CEF（Cisco Express Forwarding）はハードウェアでパケットで高速転送を行うシスコ独自のスイッチング方式です。

  • FIBテーブル…Forwarding Information Base：転送情報ベース。ルーティングテーブルに相当
  • Adjacency（隣接）テーブル…ARPテーブルに相当

スイッチがフレームを転送する方式

  • ストアアンドフォワード…現在ほとんどのスイッチで使用されている方式。完全に受信してからエラーチェック、MACアドレステーブル検索をする。
  • カットスルー…フレームヘッダの先頭6バイト（宛先MACアドレス）を読み込むと転送処理を開始します。
  • フラグメントフリー…フレームヘッダの先頭64バイト（宛先MACアドレス）を読み込むと転送処理を開始します。コリジョンを防ぐ。
管理型、監視型プロトコル

CDP

CDP ( Cisco Discovery Protocol ）はCisco社独自のプロトコルであり、データリンク層で動作します。

デフォルトで60秒ごとに機器の情報をマルチキャストで送信しています。
送信間隔を早めれば、隣接デバイスの認識が早まる。

＜CDPのコマンド＞

特定のインターフェイスでCDPを無効にする
(config-if)#no cdp enable

CDPにより収集した隣接機器（ルータ、スイッチ…）に関する情報を表示
(config)#show cdp neighbors

CDPにより収集した隣接機器（ルータ、スイッチ…）に関する詳細情報（IPアドレスやIOSなど）を表示
(config)#show cdp neighbors detail

＜CDPにより収集できる情報＞

情報説明
Device-ID　隣接デバイスのホスト名
Local Interface　自身のインターフェース情報
Holdtime　CDP情報を保持する時間　（デフォルト：180秒 ）
Capability　隣接デバイスのデバイスタイプ　（スイッチの場合 ： S ）
Platform　隣接デバイスのモデル情報 （例：CISCO2921 ）
Port ID　隣接デバイスのインターフェース情報 ( 例：Gig 0/1 )
Address　隣接デバイスのネットワーク層のアドレス
IOS Software　隣接デバイスのIOSソフトウェア、バージョン情報
VTP Domain Name　隣接デバイスのVTPドメイン名 ( only CDPv2 )
Native VLAN　隣接デバイスのネイティブVLANの情報 ( only CDPv2 )
Full/Half Duplex　隣接デバイスのインターフェースのDuplexの情報 ( only CDPv2 )

【CDPとLLDPの主な伝達情報】

伝達情報CDPLLDP
ホスト名○○
接続ポート○○
IPアドレス○○
機器の種類○○
トポロジチェンジ×○

LLDP 【Link Layer Discovery Protocol】

  • LLDPはIEEE 802.1ABとして標準化されてます。
  • デフォルトで30秒ごとに機器の情報をマルチキャストで送信しています。
  • レイヤ2プロトコル
  • 隣接しているデバイスの情報を確認できる。

LLDPのコマンド

グローバルでLLDPを有効化
(config)#lldp run

IPアドレスを伝えたくない場合
(config)#no lldp tlv-select management-address

接続ポートを伝えたくない場合
(config)#no lldp tlv-select port-description

特定のインターフェイスでLLDPの送信/受信を有効/無効にする
(config-if)#[no] lldp transmit [receive]

LLDPパケットの送信時間を10秒に変更する
(config)#lldp timer 10

LLDPでパケットが届かなくなってから200秒後に破棄する
(config)#lldp holdtime 200

再初期化時の遅延時間の変更
(config)#lldp renit <秒数>

IOSのソフトウェア管理

Cisco IOSとは、米シスコシステムズ（Cisco Systems）社製のルータやスイッチなどのネットワーク機器に組み込まれた制御用のオペレーティングシステム（OS）。

IOS起動手順

コンフィギュレーションレジスタ値

値内容
0x2100ROMMON（ROM）モード
0x2102IOSを起動させる、通常のオペレーション
0x2142パスワードリカバリ

IOSイメージファイルの読み込み

startup-configの読み込み

ROMMON（ROM）モード

ROMMON（ROM）モードはルータの起動モードの一つで、パスワードリカバリーやIOSのリカバリーなどで使用します。

＜ROMMONモード起動の条件＞

  • コンフィグレーションレジスタが0x2100
  • IOSが破損している
  • ルータの電源を入れてから60秒以内にBreak信号を送る

IOSのバックアップ

フラッシュメモリのファイルをTFTPサーバへコピー
#copy flash: tftp:

現在のコンフィギュレーション（running-config）をTFTPサーバへコピー
copy running-config tftp

TFTP（Trivial File Transfer Protocol)

TFTP（Trivial File Transfer Protocol) とは、特定のコンピュータ間でファイル転送する時に使用するアプリケーション層プロトコル。FTPとの違いは大きく2つあります。1つは、FTPのようにユーザ名とパスワード認証が行われない点、もう1つはFTPはTCP上で動作する信頼性のある通信ですが、TFTPではUDP上で動作しており信頼性よりも転送効率を重視しているという点です。

NTP

NTP（Network Time Protocol）は、コンピュータに内蔵されているシステムクロックをネットワークを介して正しく同期させるためのプロトコル。NTPにより時刻同期を行うことで指定時間に正しくサービスを動作させたり、出力ログを正しく管理できたり、証明書を利用した認証なども正しく行うことができます。

NTPクライアントがNTPサーバにアクセスする際、宛先ポート番号としてUDPポート番号123を使用。

＜階層構造＞

NTPはstratumと呼ばれる階層構造を持っており、最上位のNTPサーバが原子時計やGPSの正確な
時刻源から正しい時刻情報を得て、下位のNTPサーバはそれを参照して時刻同期を行っていきます。
最上位のNTPサーバは「stratum 1」であり、階層を降りるごとにstratumの値が増えていきます。
最大でstratum 15までNTPサーバを構築できます。なお、stratum 16には同期できません。

＜NTPの設定＞

NTPクライアントの設定
(config)#ntp server [ IPアドレス ]

NTPサーバの設定
(config)#ntp master

NTPサーバのNTP認証の設定

■NTP認証の有効化
(config)#ntp authenticate

■認証キーの作成
(config)#ntp authentication-key <number> md5 <srting>

■認証キーの指定
(config)#ntp trusted-key <number>

■認証キーの指定
(config)#ntp trusted-key <number>

Telnet

リモートルータ（Telnetクライアント）からTCP/IPネットワークを経由して他のデバイスのVTY（仮想端末）にログインするには、特権EXECモード（またはユーザEXECモード）でTelnetコマンドを使用します。

https://ntorelabo.com/2022/10/13/tcp-ip%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e5%b1%a4%e3%83%97%e3%83%ad%e3%83%88%e3%82%b3%e3%83%ab/#co-index-6

syslog

  • syslogはIPネットワーク上でログメッセージを転送する標準規格でありクライアント/サーバ型プロトコル。
  • Syslogサーバを利用することで、ルータやスイッチのメモリを圧迫せずにより多くのログを保存することが可能です。

指定したレベル以下（重要度が高い）のメッセージが出力されます。例えば、logging trap 4コマンドを使用すると、severity値が0〜4のsyslogメッセージが送信されます。

Syslogのデフォルトの出力先はコンソール画面です。

severity名前説明
0（高い）Emergency（緊急）システムの利用ができなくなる緊急
1Alerts（アラート）迅速な対処が必要
2Critical（重要）危険な状態
3Errors問題を究明できるエラー状態
4Warnings重大な問題ではないが注意
5Notifications（通知）正常だが注意
6Informational情報通知
7（低い）Debugging（デバッグ）トラブルシュート用

コンソールに送信するSyslogメッセージの重大度レベルは、デフォルトで「7」になっています。

コンソール(config)#logging console [ レベル ]
デバイスに直接コンソール接続しているPCの画面に出力する設定
リモート端末
（VTY）		(config)#logging monitor [ レベル ]
デバイスのVTYポートにTelnetなどでリモート接続しているPCの画面に出力する設定
バッファ(config)#logging buffered [ バッファサイズ ] [ レベル ]
デバイス自身のバッファ（RAM）に出力（保存）する設定
syslogサーバ(config)#logging host [ syslogサーバ ]
(config)#logging trap [ レベル ]
(config)#logging facility [ ファシリティ ]
syslogサーバに出力（保存）するsyslog情報を設定

SNMP

SNMP（Simple Network Management Protocol）は、UDP/IPベースのネットワーク監視、ネットワーク管理を行うためのプロトコルです。

  • SNMPマネージャ‥SNMPエージェントから情報収集を機器を管理するデバイス。解析する。
  • SNMPエージェント‥管理対象機器（ルータ、スイッチ、サーバなど）の情報を送信する、機器または常駐するプログラム。自身の内部の装置やソフトウェアの状態や設定を「MIB」（Management Information Base：管理情報ベース）と呼ばれるデータベースにまとめます。
  • MIB‥管理データベース

MIB

  • MIB（Management Information Base）はツリー構造のデータベース
  • 情報（オブジェクト）には識別するためのOID（Object IDentifier）がついています。

＜メッセージ＞

  • SNMPポーリング‥マネージャから要求を出しエージェントの情報を得る
  • SNMPトラップ‥エージェントからマネージャに通知する（一度のみ）
  • SNMPインフォーム‥エージェントからマネージャに通知する。
    マネージャから応答がない場合再送する。

GetRequest
（マネージャ発信）		マネージャから
エージェントへ情報を要求するコマンド
GetNextRequest
（マネージャ発信）		マネージャから
エージェントへ次の情報を要求するコマンド
GetBulkRequestマネージャから
エージェントへ複数のOIDをまとめて要求するコマンド
SetRequest
（マネージャ発信）		マネージャから
エージェントへOID内の情報の変更を要求するコマンド
GetResponse
（エージェント発信）		マネージャから
要求されたOIDに対して、値を挿入して返信する
Trap
（エージェント発信）		エージェント機器に変化があった場合自発的に送信する
infomationRequest
（エージェント発信）		エージェントからマネージャへのイベント通知、
マネージャからの確認も要求する

SNMPトラップの設定
(config)#snmp-server host <host-addr> [ version { 1 | 2c | 3 { auth | noauth | priv }}] <community-string>

コミュニティストリングの設定内容の確認
（※マネージャーから、エージェントへアクセスする際にパスワードのように使う文字列です。）
show snmp community

シリアルナンバーの確認
show snmp chassis

SNMPエージェントが通知するトラップを受信するホストの情報を確認
show snmp host

SNMPv3

ユーザ及びグループごとにセキュリティポリシーを定義し、必要に応じてアクセスを制限することができます。ユーザ認証を行うために、グループとユーザの定義が必要です。

認証、暗号化メッセージの完全性が追加されセキュリティーが強化された

バージョンセキュリティレベル認証暗号化内容
SNMPv1noAuthNoPrivコミュニティストリング無しコミュニティストリングを照合して認証
SNMPv2noAuthNoPrivコミュニティストリング無しコミュニティストリングを照合して認証
SNMPv3noAuthNoPrivユーザ名無しユーザ名を照合して認証
SNMPv3AuthNoPrivMD5またはSHA無しHMAC-MD5またはHMAC-SHAに基づいて認証
SNMPv3AuthPrivMD5またはSHADES/3DES/AESHMAC-MD5またはHMAC-SHAに基づいて認証
MD5またはSHAによって暗号化

NetFlow

  • ネットワークを利用するアプリケーションやユーザの監視
  • トラフィックを集計し、セキュリティの解析
  • リソースの使用率に対する従量制の課金

フローの識別で見るフィールド

  • 送信元IPアドレス
  • 宛先IPアドレス
  • 送信元ポート番号
  • 宛先ポート番号
  • レイヤ3プロトコル
  • ToS（Type of Service）
  • 入力インタフェイス

◆設定例 ： Gi0/0での受信パケットのフロー情報と、Gi0/0からの送信パケットのフロー情報を収集

Cisco(config)# interface GigabitEthernet 0/0
Cisco(config-if)# ip flow ingress
Cisco(config-if)# ip flow egress

◆設定例 ： NetFlowバージョン「5」、NDE出力先IPアドレス「10.1.1.1 (UDP2055)」、送信元I/Fを「loopback0」とする

Cisco(config)# ip flow-export version 5
Cisco(config)# ip flow-export destination 10.1.1.1 2055
Cisco(config)# ip flow-export source loopback 0

NetFlowの情報を確認

show ip cache flow

Flexible NetFlow

トラフィックフローをモニターできるIOS機能の1つです。

IP SLA

IP SLAは、IOS機能の１つであり、ネットワークインフラのサービスレベル性能をモニターする方法です。

  • ネットワークパフォーマンスの監視と表示
  • エンドツーエンドのネットワーク接続性の確認

IP SLAレスポンダ

IP SLAレスポンダ（ターゲットもIOSを搭載しIP SLAをサポートしているデバイス）を用意することで、測定精度が向上し、VoIPの遅延やジッタを測定することも可能になります。

IP SLA ICMPエコー動作

ICMPパケットの頻度を定義します。

show ip sla statisticsコマンドを実行するとエコーテストの出力結果を確認できます。

Xserverドメインでドメイン取得しXserverでワードプレスをインストール

ネームサーバーの設定

ネームサーバーとは

ネームサーバーは、どのサーバーを使用するか決定するためのアドレス、とお考えください。例えば、Xserverドメインで取得したドメインを他社のサーバーで使用する際に、Xserverアカウントよりネームサーバーを他社指定のものに変更する必要があります。

ネームサーバーの変更手順

Xserverドメインで取得したドメインを確認します。

https://www.xdomain.ne.jp/
https://secure.xserver.ne.jp/xapanel/xdomain/index

ドメイン設定

取得した独自ドメインをエックスサーバーでご利用になるには、サーバパネルにてドメイン設定の追加が必要です。
ドメイン設定の追加と同時に、無料独自SSL設定も追加されます。

ドメインの追加設定

サーバパネルにログインします。

https://secure.xserver.ne.jp/xapanel/login/xserver/server/

ドメイン設定をクリックします。

ドメイン設定追加のタブを選択し、追加したいドメイン名を入力します。

ご利用サーバーにドメイン設定が反映されるまで数時間～最大24時間程度かかる場合があります。

【CCNA】ワイヤレスLAN、Cisco Wireless LAN Controller

ワイヤレスLAN

  • 半二重通信
  • CSMA/CA「Carrier Sense Multiple Access with Collision Avoidance」でコリジョンを防ぐ
  • 2.4GHz帯→障害物に強く、電波が遠くまで届きやすい
    電波干渉が起こりやすいので不安定で速度低下が起きやすい。
  • 5HzG帯→障害物が多いと電波が届きにくい
    電波干渉が起こりにくく安定で高速通信が可能です。

＜規格＞

  • 無線LANについてはIEEE 802.11で標準化が行われています。
    （有線LAN（主にEthernet）の関連技術はIEEE 802.3で標準化が行われています）
  • アクセスポイントと通信機器は同じ規格で通信する必要がある。
規格周波数帯最大通信速度
IEEE 802.11a5GHz
利用可能なチャネル数は20
チャネル間の重複がないため、
間隔を空ける必要がない		54Mbps
IEEE 802.11b2.4GHz11Mbps/22Mbps
IEEE 802.11g2.4GHz54Mbps
IEEE 802.11n2.4GHz/5GHz65〜800Mbps
IEEE 802.11ac5GHz292.5M〜6.9Gbps
IEEE802.11 ( 無線LAN規格 ) の詳細
IEEE802.11a伝送規格　5GHz帯での最大54Mbpsの無線LANの物理層仕様
IEEE802.11b伝送規格2.4GHz帯での最大11Mbpsの無線LANの物理層仕様
IEEE802.11g伝送規格　2.4GHz帯での最大54Mbpsの無線LANの物理層仕様
IEEE802.11iセキュリティ　802.11のMAC層を拡張し、セキュリティ機能と認証機構を強化するための仕様
IEEE802.11eQoS関連規格　802.11のMAC層を拡張し、QoS機能を追加するための仕様
IEEE802.11n伝送規格　実効速度100Mbps以上の伝送速度を実現するための仕様（2009年9月標準化）
IEEE802.11ac伝送規格　802.11n後継の理論上6.93Gbpsの伝送速度を実現する仕様（2014年2月標準化）
IEEE802.11r認証の際にFT（Fast Transition）と呼ばれる高速認証プロトコルを利用することで、高速ローミングが可能となっています。

2.4GHz・障害物に強い
・遠くまで届く
・電波干渉が起きやすい⇒不安定、速度が低下しやすい
5GHz・障害物に弱い
・通信距離が長くなると電波が弱くなりやすい
・電波干渉が起きにくい⇒安定、高速通信

アドホックモード

  • 無線LANクライアントが相互に接続して通信する方式です。
  • APを使用しない
  • IBSSとも呼ばれる

インフラストラクチャモード

  • 無線LANアクセスポイント（AP）を設置しAPを経由して接続する方式です。

BSS

1台のAPとAPに接続するクライアントで構成されたネットワークを、BSS（Basic Service Set）といいます。

ESS

複数台のAPを設置し、複数のBSSで構成された無線LANのネットワークをESS（Extended Service Set）といいます。

周波数帯

【アクセスポイント設定の注意点】

  • カバレッジホール（通信できないエリア）ができないようにする
  • オーバーラップ（周波数の重なり）ができないようにチャンネルを割り当てる

＜覚え方：b5のノートは4g＞

規格オーバーラップをさせないチャンネル
IEEE802.11b5ch以上あける
IEEE802.11g4ch以上あける
高速通信技術
mimo送信側と受信側がそれぞれ複数のアンテナを用意し、同時刻に同じ周波数で複数の異なる信号を送受信できるようにするもの。
チャンネルボンディング複数の通信チャネルをまとめて一つの通信に使用することで通信の高速化を図る技術

RF

RF（Radio Frequency）とは、電波や電気信号のうち、無線通信で使用する周波数。

DCA

  • WLCの機能の一つ
  • オーバーラップ（周波数の重なり）が起きないよう動的にチャンネルをAPに割り当てる
  • 電波強度・干渉・ノイズ・負荷・利用率を解析する

AP

AP（アクセスポイント）は電波を使って無線LANクライアントと通信を行うデバイスです。無線LANクライアントは有線LANに繋がったAPを経由して、有線LANに接続します。

ローミング

無線LANクライアントが接続中のAPから別のAPに接続し直すこと

ダイナミックアンカー

異なるサブネットに属しているAPへローミングするとき、ローミング前と同じIPアドレスを使用した通信を可能にする機能

WDS

WDS（Wireless Distribution Systeｍ）はAP同士を無線接続する機能を指します。

  • 複数の有線LANを無線接続する
  • リピーター（中継機）として使用する。無線接続エリアを広げたり、電波の死角となっている場所へ電波を届けることができます。

802.11w

管理フレームの保護を目的としたIEEE規格は、802.11wです。

＜IEEE802.11のMACフレーム＞

  • 制御フレーム（送信要求、応答要求）
  • 管理フレーム
  • データフレーム

管理フレーム

管理フレームのサブタイプ内容
ビーコンフレームAPが無線LANクライアントにSSIDなどを知らせるフレーム
プローブ要求フレームネットワークを見つけるため無線LANクライアントが送信するフレーム
プローブ応答フレームプローブ要求フレームにAPが応答するフレーム
認証フレーム
関連付け要求フレーム
（アソシエーション要求）		APに接続を要求するフレーム
関連付け応答フレーム
（アソシエーション応答）		関連付け要求フレームに応答するフレーム
再関連付け要求フレームローミングにより別のAPに接続を要求するフレーム
  1. クライアント　← ビーコン　←　AP
  2. クライアント　→　プローブ要求　→　AP
    （ビーコンを受信できなかった場合）
  3. クライアント　← プローブ応答　←　AP
  4. クライアント　→　認証要求　→　AP
  5. クライアント　← 認証応答　←　AP
  6. クライアント　→　アソシエーション要求　→　AP
  7. クライアント　← アソシエーション応答　←　AP

ワイヤレスLANのセキュリティ

ワイヤレスLANのセキュリティには4つの規格があります。

  • WEP
  • WPA
  • WPA2…現在最も普及。
  • WPA3…SAEという新しい認証方式

WPA3

  • 認証方式にSAEを使用
  • 前方秘匿性（前方秘匿性とは、鍵交換プロトコルに要求される性質の一つで、鍵交換に使った秘密鍵が漏えいしたとしても、過去の暗号文は解読されないという性質のこと）
  • PMFの必須化
  • 地所攻撃への耐性


【無線LANで使われる主なセキュリティ規格】

規格WEPWPAWPA2WPA3
暗号化方式TKIP（必須）または、
CCMP（任意）		CCMP（必須）または、
TKIP（任意）		GCMP
暗号化アルゴリズムRC4RC4AESAES
整合性の検証CRC32MICCCM
認証方式IEEE802.1X（EAP）IEEE802.1X（EAP）
PSK認証		IEEE802.1X（EAP）
PSK認証		IEEE802.1X（EAP）
SAE認証
改ざん検出
（MIC）		MichaelCBC-MACGMAC
セキュリティレベル△○◎

【認証方式の別名】
PSK認証、SAE認証 ⇒ WPAパーソナル
IEEE802.1X（EAP）⇒ WPAエンタープライズ

Enhanced Open

  • 主に飲食店やホテルなどの公衆Wi-Fiで使用されるセキュリティ規格です。WPA3の拡張機能として分類されます。
  • パスワード認証は不要でネットワーク接続の容易さを維持しながら、尚且つ安全な通信を実現することができる。
  • OWE（Opportunistic Wireless Encryption）という技術を用いて通信の暗号化を行います。

PSK

PSK（Pre-Shared Key）はユーザー認証方式です。PSKで採用されている暗号化アルゴリズムはAESで、暗号化キーの長さは128ビット/192ビット/256ビットをサポートしています。ビット数が大きほど暗号化強度は高くなります。

＜PSKのパスワード文字列のフォーマット＞

  • HEX‥‥16進数（Hexadecimal）を意味し、0〜9、A〜Fで64桁
  • ASCLL‥‥半角英数字で8〜63文字

AES

  • AESは第三者による解読は不可能と言われている暗号化アルゴリズム
  • RC4よりも暗号化強度は強いAES > RC4
  • 暗号化キーの長さが大きいほど強度は強くなります。128ビット/192ビット/256ビット

IEEE802.1X

IEEE802.1Xとは、有線LANや無線LANにおけるユーザ認証の規格です。

IEEE802.1X認証を行うためにはサプリカント、認証装置、認証サーバの3つの構成要素が必要となります。

構成要素説明
サプリカント
（Supplicant)		　IEEE802.1Xにおけるクライアントのこと。またはクライアントにインストールするソフトウェア。
　認証を受けるクライアントはPCにインストールする必要があるが、最近のPCには標準搭載されている。
認証装置
(Authenticator)		　サプリカントと認証サーバの仲介役となるネットワーク機器。IEEE802.1X対応のLANスイッチまたは
　無線LANアクセスポイントのこと。これらの機器はサプリカントと認証サーバとの認証結果を受けて、
　ネットワークへのアクセス制御を行う。Ciscoは有線/無線LANスイッチともにIEEE802.1Xに標準対応。
認証サーバ
(Authentication Server)		　ユーザ認証を行うサーバのこと。IEEE802.1X/EAPに対応したRadiusサーバを使用する。

EAP

EAPは、IEEE802.1xで採用されている認証用のプロトコルです。

＜EAPの認証方式＞

認証方式クライアント
証明書		サーバ
証明書		セキュリティ
レベル		認証方法
LEAP不要不要△クライアントとサーバがIDとパスワードを使用して相互に認証する
EAP-FAST不要不要○クライアントとサーバがPAC（Protected Access Credential）を使用して相互に認証する
EAP-TLS必要必要◎クライアントとサーバが電子証明書によって相互に認証する
PEAP不要必要○クライアントはユーザIDとパスワードで認証サーバは電子証明書によって認証する

Cisco無線LANソリューション

＜Ciscoが提供する、WLANで使用するAPには以下の2種類があります。＞

分散管理型

分散管理型で使用されるAPのことを、Autonomous AP（自律型AP）といいます。

  • 家庭用やSOHO（Small Office/Home Office）環境
    • <SOHO>
      • 小規模ネットワークになる
      • 様々な機能をあわせ持ったルータが適している
      • 外部へのアクセスにはブロードバンド回線が適している
  • 個々のAPが独立して動作し、管理者はそれぞれのAPに対してSSIDやセキュリティの設定などを行います。
    • GUIを使用して自律型APにアクセスする際、事前に管理IPアドレスの設定が必要
    • ＜SSHでのログイン＞
      最新のIOSではSSHバージョン1、2のどちらもサポートしており、バージョン指定しない場合はバージョン2が使用されます。

＜ログイン方法＞

  • Console Portへの直接接続（CLI操作）
  • Telnet/SSHを使ったリモート接続（CLI操作）
  • HTTP/HTTPSを使ったリモート接続（ブラウザを使ったGUI操作）

集中管理型

  • 大規模環境（エンタープライズ）向けの管理ソリューションです。
  • シスコ無線LANコントローラ（WLC）とLightweight AP（集中管理型AP）の２つのコンポーネントで構成されています。
DHCP option43

DHCP option43を利用することで、APにWLCの管理インターフェースのIPアドレスを教えることができます。

＜通信の流れ＞

  1. LAPは、無線LANクライアントから電波によってデータを受けとる
  2. LAPは受信したデータをCAPWAPでカプセル化してWLCに転送する
  3. WLCはCAPWAPカプセル化を解除し、SSIDに対応したVLAN番号をデータに付加して有線LANに転送する
  4. スイッチは付加されているVLANにしたがって適切なネットワークに転送する
  • WLCとスイッチ間は複数のVLANを通すためにトランクリンクにする必要があります。
  • LAPとスイッチとWLCはそれぞれLANケーブルで接続します。

LAG

＜WLCとスイッチ間のLAG（Link Aggregation Group）＞

  • LAGはWLCとスイッチの両方で設定します。
  • WLCでは、LACPおよびPAgPをサポートしていないため、対抗スイッチのEtherChennelのモードは「on」にする。
  • スイッチとWLC間のリンクはトランクリンクにする
  • LAPとスイッチ間はアクセスリンクにする
  • 設定を変更した時は再起動する必要がある
  • リングアグリケーションを構成している物理ポートが一つでもUPしていれば、集約した論理ポートはユーザトラフィックの転送を行う。
  • ディストリビューションシステムポートで使用可能である

スプリットMACアーキテクチャ

スプリットMAC（Media Access Control）アーキテクチャとは、アクセス制御の役割をAPとWLANコントローラで分割（スプリット）する方式です。

シスコ無線LANコントローラ

シスコ無線LANコントローラー（Cisco WLC：Wireless LAN Controller）

<シスコ無線LANコントローラの推奨設定>

  • PSKではなくIEEE 802.1Xを使用
  • トランクポートでは必要なVLANのみ許可
  • コントローラの内部DHCPを無効にする
  • 隣接APには異なるチャネルを割り当てる

WLANの作成では次の２つのパラメータを設定する必要があります。

  • プロファイル名
  • SSID‥Lightweight APに割り当てるSSID

※＜BSSIDとESSID＞
・BSSID（BSS IDentifier）は無線ネットワーク識別子の1つで、48ビットの数値で構成されます。BSSIDは通常、APのMACアドレスと同じものになります。

・ESSID（ESS IDentifier）は無線ネットワーク識別子の1つで、最大32文字までの任意の英数字を設定できます。
無線LANクライアントを扱うユーザは、ESSIDを選択して無線ネットワークに接続します。
なお、「SSID」と呼ぶ場合は一般的に「ESSID」を指しています。

  1. LAPは自身のIPアドレスの取得を試みます
  2. 自身のIPアドレスが取得できた場合次のいずれかの方法でWLCのIPアドレスを検出し、WLCへのjoinを試みます
    • DHCPオプション43
    • DNSによるcisco-capwap-controllerの名前解決
    • WLCを検出するブロードキャストをサブネットに送信
    • 静的に指定されたIPアドレスを使用

Lightweight APには、FlexConnectと呼ばれる動作モードが用意されています。FlexConnectで動作しているLightweight APはWLCとの接続が切断された状態でも、クライアントの認証や、クライアントデータのスイッチング処理をLightweightで行うことができ、引き続きサービスを提供することが可能です。

モード概要
Local・LAPのデフォルトのモード
・電波を使って無線LANクライアントとデータを送受信する
・無線通信に1つのチャネルを利用し、他のチャネルとの干渉を監視する
FlexConnect
（Hybrid REAP）		・WAN経由でWLCと接続するときに使用するモード
・WLCとの接続が切断された場合でも対応可能（ローカルスイッチング）
Monitor不正なAPの検出、および侵入検知（IDS）用の専用センサーやRFIDタグ追跡用のセンサーとして動作するモード
Rogue Detector有線ネットワーク上に不正なAPやクライアントがいない監視するモード
Sniffer特定のチャネル上のすべてのパケットを収集して、指定したデバイスに送信するモード
Bridge・APがブリッジとして動作するモード
・メッシュネットワークでの距離が離れたAPの中継などに利用する
SE-Connectスペクトラムアナライザ専用モード
（無線電波の干渉などの状況を調べるモード）

CAPWAP

無線アクセスポイントとWLC間（WLCとLAPとの間）で、無線LANクライアントのデータや制御情報の送受信で使用されるプロトコル。

WLCとLightweight APの間のCAPWAPによる接続は、CAPWAPトンネルと呼ばれます。

SSIDブロードキャスト

SSIDブロードキャストとは、APが自身のSSIDを無線LANクライアント側に表示させるためにビーコン信号を発信する機能のことです。

【WLCのセキュリティ設定】

レイヤパラメータ
Layer2なし（None）
WPA＋WPA2
802.1X
静的WEP
Layer3なし（None）
Web Policy

CPU ACL

CPU ACLでは次のようなトラフィック、アクセスの制御が可能です。

  • SNMP、HTTPS、SSH、Telnetなどの管理プロトコル
  • RADIUSやDHCPなどのネットワークサービスプロトコル

【Cisco無線LANコントローラ（WLC）には管理用の特別なポートやインターフェイスが用意されています。】

物理ポート

コンソールポート・コンソールケーブルによりPCと接続
・WLCの設定や障害対応を行うために使われる
ディストリビューション
システムポート		・LANケーブルによりスイッチと接続（スイッチ側はトランクポート）
・通常のトラフィックや管理トラフィックを送受信するために使われる
・LAGに対応
サービスポート・LANケーブルによりスイッチと接続（スイッチ側はアクセスポート）
・ネットワークの緊急時のシステムの復旧とメンテナンスで使用する
・アウトオブバンド管理（通常トラフィックは流さない）なのでディストリビューションポートで服装などがあっても影響を受けない
・離れた場所からWLCを操作
冗長ポート・LANケーブルによりWLCと接続
・大規模なネットワークでWLCを冗長化するために使われる
  • ディストリビューションシステムポート…スイッチとWLCを接続するための物理ポート
  • サービスポート…WLCを制御するための管理専用ポート、管理用と通常のトラフィックを完全に分離することができる。（out-of-band）

論理インターフェイス

インターフェイス特徴
Service Port
インターフェイス		サービスポートとの関連付されるインターフェイス
Management
インターフェイス
（管理インターフェイス）		・WLCやLightweight APの管理に使用
・Pingの宛先や、WLC間の通信の制御などで使用
APマネージャインターフェイスこのインターフェイスに割り当てられたIPアドレスは、Lightweight APがクライアントのフレームをCAPWAPでカプセル化して転送する際の宛先IPアドレスとして使用される。

Virtual
インターフェイス
（仮想インターフェイス）		・WLCのモビリティー機能で使用される。（モビリティー機能とは、複数のWLCでグループ構成し、クライアント情報などを共有する機能。）
・代理DHCPサーバや、Web認証などの宛先になる仮想的のインターフェイス
Dynamic
インターフェイス
（動的インターフェイス）		SSIDとVLANのマッピングを行うインターフェイス

GUIメニュー

  • WLCはコンソールポートを使った CLI（コマンドラインインターフェイス）による操作や、ブラウザを使った GUIによる操作が可能です。
  • CLIログインのタイムアウト値はデフォルトで「5分」

GUIを使用して自立型APにアクセスする際、管理IPアドレスの設定必要

  • MONITOR　…WLC・LAP・無線LANクライアントの情報を確認できます。
  • CONTOROLLER　…WLCのインターフェースの設定などを行えます。
  • WLANs　…WLANに割り当てるプロファイル名や SSIDなどの設定を行えます。「Band Select」機能を使用することで、アクセスポイントと無線LANクライアントがデュアルバンドに対応している場合に、5GHz帯の周波数を優先的に使用する
    • Layer 2タブ　…WPA2-PSK
    • Layer 3タブ　…Web認証の有効化/無効化
    • Advancedタブ　…AAAオーバライドの設定を有効　⇒RADIUSサーバが持つユーザ情報に基づいてユーザを特定のVLANに動的に割り当てることができます。
  • WIRELESS　…LAPの設定を行えます。
  • SECURITY　…RADIUSサーバの宛先指定などのセキュリティに関する設定を行えます。
  • MANAGEMENT　…HTTP/HTTPSによるWLCへのアクセスを許可/拒否などの WLC自体の管理に関する設定を行えます。
  • COMMANDS　…WLCへのコンフィグのダウンロードや、WLCからのコンフィグのアップロードなどの操作が行えます。

PMF

PMF（Protected Management Frame）はWLCで管理フレームのセキュリティを強化するためのサービスです。PMFの設定では以下の2つのパラメータを指定します。

  • Combackタイマー…関連付け要求を拒否されたクライアントが再度要求を施行するまでに待機する時間
  • SAクエリタイムアウト…WLCがSAクエリプロセス（なりすましのアソシエーション要求を拒否するために正当なクライアントとWLCの間で行われるやりとり）の待機する時間

シスコ3階層

https://ntorelabo.com/2022/10/07/%e4%bb%ae%e6%83%b3%e5%8c%96%e3%81%a8%e3%82%a4%e3%83%b3%e3%83%86%e3%83%aa%e3%82%b8%e3%82%a7%e3%83%b3%e3%83%88%e3%83%8d%e3%83%83%e3%83%88%e3%83%af%e3%83%bc%e3%82%af/#co-index-16

Cisco Meraki

Cisco Merakiとは、自律型アクセスポイント(AP)を始めとしたネットワーク機器の設定やネットワークの管理をクラウド上で行うシステムです。

  • クラウド上でネットワークを管理するシステムである
  • GUIで操作できる
  • 通常のAPを導入するには、APにコンソールケーブルを接続してCLIで設定を行う必要があります。
  • クラウド管理型の場合、LANケーブルを差し込みインターネットに接続するだけで、クラウド管理システムに事前に設定された情報を取得、自動で設定を適用しAPが利用可能になります（ゼロタッチ）。
【CCNA】ネットワークの設計（WAN・VPN）

WAN

WAN（Wide Area Network）は地理的に離れたLANとLANを相互に接続する広域ネットワークです。

【主なWANサービス】

WANサービス特徴、主なサービス名称プロトコル
専用線・シリアルインターフェイスを使用
・1対1で常時接続、ポイントツーポイント
・コストが高い
・1つの回線を自社専用で借りるため、帯域とセキュリティと信頼性を確保できる		PPP
HDLC
広域イーサネット
（イーサネットWAN）		・イーサネットインターフェイスを使用
・LANと同じインターフェースを使用する
・LANと同じプロトコルを使用する
・専用線よりも高速通信が可能
・プロバイダが用意している独自の通信網を使うため、インターネットよりは危険が低い
・EoMPLS		Ethernet
インターネットVPN・イーサネットインターフェイスを使用
・公衆回線を仮想的に専用線のように利用できる		IP

＜専用線＞

回線帯域幅
T4274.176Mbps
T344.736Mbps
T26.312Mbps
T11.544Mbps

CPE

CPE(Customer Premises Equipment)。
ユーザ宅内に設置される機器です。CPEとしてDTEとDCEがあります。

  • DTE…ユーザー側の機器、ルータ、電話機、コンピュータ
  • DCE…データ回線終端装置、モデム
  • ローカルループ…分界点からサービスプロバイダの機器までの回線（アクセス回線）
  • CSU/DSU…ISDN（デジタル通信網）やフレームリレーなどの通信回線とDTEのシリアルインターフェイスを相互接続する装置

DCE

DCE(Data Circuit terminating Equipment)。DCEはDTEの信号をアクセス回線に適した信号に変換します。

アナログ回線モデム
デジタル回線
ISDN（デジタル通信網）		CSU/DSU
(Channel Service Unit)/DSU(Digital Service Unit)
光ファイバ回線ONU(Optical Network Unit)

データリンク層のカプセル化

シリアルポイントツーポイントのデータリンク層のプロトコルはHDLCとPPPがあります。

HDLC

HDLC（ High-level Data Link Control ）は、シリアルインターフェースで専用線などのポイントツーポイント接続で使用するデータリンク層プロトコル。HDLCは、ISO（ 国際標準化機構 ）で標準化されていますが、ネットワーク層を識別するフィールドがないため複数のプロトコルを扱えないことからメーカの多くが独自方式をHDLCに実装し、ネットワーク層で複数のプロトコルを使用できるようにしています。

  • オプションとして認証機能を使用することができない。
  • CiscoルータはデフォルトでHDLCが設定されている。
  • HDLCはレイヤ2の技術である
  • Ciscoでは、ISO標準のHDLCにタイプフィールドを追加した、独自のHDLCを使用している

PPP

PPP（ Point-to-Point Protocol ）は、専用線、PSTN、ISDNなどのポイントツーポイント接続で最もよく使用されるデータリンク層のプロトコル。同期及び非同期のシリアル回線をサポートします。PPPはHDLCをベースに開発されていますが、PPPの場合プロトコルフィールドが設けられているのでIP、IPXなど複数のプロトコルを使用した環境をサポートします。また、PPPはオプションとして認証、圧縮、マルチリンク、エラー制御をサポートしています。

PPPを設定
(config-if)#encapsulation ppp
PPPの認証プロトコル

PAP 2ハンドシェイク

CHAP 3ハンドシェイク

PPP認証のデバッグ（PPP イベントを表示する）
#debug ppp authenthication

PPPoE

PPPoEとはPPPの機能をイーサネットLAN上で利用するためのプロトコルです。

  1. ディスカバリステージ
  2. PPPセッションステージ（PPPの認証）
  • RFC2516で定義

物理インターフェイスと論理インターフェイスが対応しているか確認
show pppoe session

VPN

Virtual Private Network （仮想プライベートネットワーク）はインターネット接続とオンラインのプライバシーを保護する仕組みです。VPN接続は、仮想的な専用線（トンネル）を構築することで確立されます。

  • コスト削減
  • 通信を暗号化する
  • 通信相手の認証を行う
  • 拡張性（スケーラビリティ）

インターネットVPN

インタネットVPNには2つの接続形態があります。

  • サイト間VPN
  • クライアントVPN（リモートアクセスVPN）

サイト間（Site-to-Site）VPN

  • 拠点間がVPNの端点
  • IPsecを使ったトンネル接続
  • 拠点内のクライアントはトンネルを通っている認識はない
  • ルータ同士でトンネル接続を行う

リモートアクセスVPN（クライアントVPN）

  • IPsecや、SSLまたはTLSを使ったVPN接続
    （SSL/TLSとはSecure Sockets Layer/Transport Layer Securityの略称であり、TLSは情報を暗号化するSSLの次世代規格です。）
  • Cisco AnyConnect

DMVPN

DMVPN（Dynamic Multipoint VPN）とは、複数の拠点を接続するVPNの設定作業を簡略化する、Cisco独自のVPN設計です。

  • トポロジのタイプはハブ&スポーク
  • シスコ独自
  • ハブルータの負荷を軽減
  • NHRP（next hop resolution protocol）プロトコルを使用して、IPsec-VPNゲートウェイのグローバルIPアドレスを解決します。
  • トンネルモードをマルチポイントGRE（mGRE）に設定する必要がある。

MPLS 

MPLS（Multi-Protocol Label Switching）マルチプロトコルラベルスイッチングではレイヤ2ヘッダとレイヤ3ヘッダの間に「ラベル」と呼ばれるタグを付加する技術です。IPv4、IPv6、IPXなど様々なプロトコルに対応

  • CE（Cusotmer Edge）…顧客側のルータ
  • PE（Provider Edge）…サービスプロバイダ側のルータ

レイヤ2ヘッダMPLSヘッダレイヤ3ヘッダ

＜MPLSヘッダフォーマット＞

  • ラベル（VPNなどで利用）
  • EXP（QoSで利用）
  • S（ラベルが続くかの情報）
  • TTL（生存時間）

＜MPLSは以下の機能を実現＞

  • ルータ間を高速転送
  • VPN（仮想的にネットワークを分離）
  • QoSに従ってパケットの転送に優先度を設定できる
  • IP-VPN

IP-VPNとは、地理的に離れた構内ネットワーク（LAN）同士を接続して一体的に運用するVPN（Virtual Private Network：仮想専用ネットワーク）の方式の一つで、通信事業者の運用するIP（Internet Protocol）ベースの閉域網を経由して拠点間を接続するもの。

  • 高速転送
  • VPN（各顧客のネットワークを仮想的に分離）
  • QoS（EXPフィールドに設定した値を使ったサービスクラス定義（Class of Service：CoS）に従って、パケットの転送に優先度が設定できる）
  • マルチプロトコル（IPv4、IPv6、Ethernet、ATM、フレームリレーなどをサポート）

IPsec

IPsec「Internet Protocol Security」はIPパケットを暗号化し、安全に接続する規格です。

  • ネットワーク層のセキュリティ技術
  • 機密性
  • 整合性
  • 送信元認証
  • リプレイ攻撃防止
  • ユニキャストしかできないというデメリット（GREとIPsecを組み合わせた GRE over IPsec VPNを使用することで、ブロードキャストやマルチキャストにも対応できるようになります。）
  • トランスポートモード：IPヘッダの暗号化は行わない
  • トンネルモード：IPヘッダを含めたパケットの全体

ISDN

ISDNとは、Integrated Services Digital Networkの略で、電話、映像、データを総合的に扱うデジタル回線である。

GRE

シスコが開発したトンネルリングプロトコル。トンネルインターフェイスを使用して仮想のポイントツーポイントの接続を構成。

GRE over IPsec

  • マルチキャストが使用可能である
    ⇒OSPFやRIPなどのルーティングプロトコルが使用できる
  • 暗号化を行う

【GREトンネルインターフェイスの状態がup/downの理由】

  • tunnel sourceで使用したインターフェイスがダウンしている
  • tunnel destinationのアドレスへのルートが存在しない
  • トンネルの宛先アドレスへのルートをトンネル経由で学習している

トンネルインターフェイスの作成
(config)#interface tunnel <number>

トンネルインターフェイスにIPアドレスを設定
(config-if)#ip address <ip-address> <subnet-mask>

GREトンネルの送信元IPアドレスの指定
(config-if)#tunnel source { <ip-address> | <interface> }

GREトンネルの宛先IPアドレスの指定
(config-if)#tunnel destination <ip-address>

トンネルモードをGREに設定（デフォルト）
(config-if)#tunnel mode gre ip

BGP

BGP（Border Gateway Protocol）は、AS間でルート情報の交換を行うEGPに分類されるルーティングプロトコルです。

【BGPの有効化】
(config)#router bgp <as-number>
(config-router)#neighbor <ip-address> remote-as <as-number>（ネイバーのIPアドレス、AS番号）
(config-router)#network 172.16.0.0 mask 255.255.255.0（サブネットアドレス）

BGPテーブルの表示
show ip bgp

EBGP

EBGP（External BGP）は異なるASに属するネイバーとルート情報を交換します。

  • ルータが調節接続されている必要がある。
  • デフォルトのアドミニストレーティブディスタンスの値はEBGPは20、IBGPは200

Cisco AnyConnect

Cisco AnyConnect Secure Mobility Client

  • SSL/TLS VPNを使用する
  • リモートアクセスVPN構成である

ISP

企業がISP（Internet Service Provider：インターネット接続事業者）と契約しインターネットを接続する場合いくつかパターンがあります。

ISPとの接続リンク数接続するISPの数
シングルホーム11
デュアルホーム2本以上
マルチホーム複数
【CCNA】NAT

NAT（Network Address Translation）

プライベートIPアドレスをグローバルIPアドレスに変換する技術とされています。

  • IPアドレスを節約することができます。
  • 内部ネットワークのIPアドレスを隠蔽することができます。
  • 外部ローカルアドレスと外部グローバルアドレスは一般的に同じになり、グローバルIPアドレスになります。

＜アドレスの定義＞

考え方：変換前→ローカル、変換後→グローバル

  • 内部ローカルアドレス…内部ホストに割り当てられたIPアドレス（プライベートアドレスを使用）
  • 内部グローバルアドレス…外部ホストから見た内部ホストのIPアドレス、ISPから割り当てられる
  • 外部ローカルアドレス…内部ホストが宛先として指定する、外部ホストのIPアドレス
  • 外部グローバルアドレス…外部ホストに実際に割り当てられたIPアドレス

スタティックNAT

  • スタティックNATは1対1のアドレス変換を行います。
  • スタティックNATは双方向NATに分類されます。

＜設定＞

  1. ルータのインターフェイスにインサイド、アウトサイドを指定
  2. 内部ローカルアドレスと内部グローバルアドレスの組み合わせをNATテーブルに登録
内部/外部ネットワークの定義
(config-if)#ip nat inside
(config-if)#ip nat outside
スタティックNAT変換アドレスの定義
(config)#ip nat inside source static <local-ip> <global-ip>

ダイナミックNAT

  • ダイナミックNATはアドレスプールから内部グローバルアドレスを任意に選んで対応付けます。
  • 1対1のアドレス変換になります。
  • ダイナミックNATは1方向NATに分類されます。

＜設定＞

  1. ルータのインターフェイスにインサイド、アウトサイドを指定
  2. 返還の対象となる内部ローカルアドレスのリストを作成
  3. アドレスプールを作成
  4. 内部ローカルアドレスリストとアドレスプールを紐付ける
①内部/外部ネットワークの定義
(config-if)#ip nat inside
(config-if)#ip nat outside
②変換対象となる内部ローカルアドレスをACLで指定
(config)#access-list <acl> permit <source> [ <wildcard> ]
③NATテーブルの作成
(config)#ip nat pool <pool-name> <start-ip> <end-ip> { netmask <mask> | prefix-length <length> }
④ダイナミックNATの定義
(config)#ip nat inside source list <acl> pool <pool-name>

NAPT

PAT

※NAPTは一般的な呼び方でPATはCISCOの独自の呼び名です 

  • NAPT（Network Address Port Translation）
  • 複数の内部ローカルアドレスを1つ内部グローバルアドレスに変換する技術
  • 1方向NAT
  • overloadオプションを付加することで、ポート番号を含めたアドレス変換が可能になります。
  • RFC2663ではNAPTで規定していますが、シスコではPAT（Port Address Translation）の名称で呼ばれています。
  • 複数のローカルアドレスに対して1つのグローバルアドレスを対応づける方式です。
  • overloadキーワードを付与するとPATが有効になります。
  • IPv4アドレスの枯渇対策
(config)#ip nat inside source list [ ACL番号 ] interface [ インターフェイス ] [ overload ]

【PATの設定手順】

  1. 標準ACLで内部ローカルアドレスを指定（名前付きACLでも指定可能）
  2. アドレスプールの定義（3の内部グローバルアドレスで使用する場合)
  3. 内部ローカルアドレスと内部グローバルアドレスの対応付け
  4. インターフェースへのNAT設定（内部と外部）

順番はいずれからでも設定可能です。

RFC1918

IPv4のグローバルアドレスの枯渇問題を軽減するために作成されたプライベートアドレスのアドレス空間はRFC1918で予約されています。

【プライベートアドレスの範囲】

クラス範囲
A10.0.0.0 〜 10.255.255.255
B172.16.0.0 〜 172.31.255.255
C192.168.0.0 〜 192.168.255.255

NATテーブル

  • スタティックNATの変換アドレスは常にNATテーブルに載っている
NATテーブルの内容を確認する
#show ip nat translations
NATテーブルの内容を削除
#clear ip nat translations
NextAuth　Githubアカウントを利用

そもそも認証とは

認証とは、「あなたが本当にあなたであること」を確認するプロセスです。

ユーザー アプリ 認証プロバイダー (GitHub/Google/Email等) 1. ログイン要求 2. 認証リクエスト 3. 認証情報返却 主な認証方式: – ソーシャルログイン: GitHub, Google, Twitter, Facebook等 – メール/パスワード認証: 独自のユーザーデータベースを使用 – Magic Links: メールアドレスのみでワンタイムリンクを使用
https://authjs.dev/

手順

パッケージをインストールします

npm install next-auth

認証の設定ファイルを作成します

app/api/auth/[…nextauth]/route.tsを作成します

import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"

const handler = NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID!,
      clientSecret: process.env.GITHUB_SECRET!,
    }),
  ],
})

export { handler as GET, handler as POST }

環境変数を設定します

プロジェクトのルートに.envファイルを作成します

GITHUB_ID=あなたのGitHub Client ID
GITHUB_SECRET=あなたのGitHub Client Secret
NEXTAUTH_SECRET=任意の安全な文字列
NEXTAUTH_URL=http://localhost:3000

GitHubの認証情報を取得

GitHub.comにログイン Settings > Developer settings > OAuth Apps “New OAuth App”をクリック 以下を入力:

NextAuthのプロバイダーを設定します

app/layout.tsxを編集します

import { SessionProvider } from "next-auth/react"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <SessionProvider>{children}</SessionProvider>
      </body>
    </html>
  )
}

ログインボタンを作成します

app/page.tsxを編集します

'use client'
import { signIn, signOut, useSession } from "next-auth/react"

export default function Home() {
  const { data: session } = useSession()

  if (session) {
    return (
      <div>
        <p>ようこそ, {session.user?.name}さん</p>
        <button onClick={() => signOut()}>ログアウト</button>
      </div>
    )
  }

  return (
    <div>
      <p>ログインしていません</p>
      <button onClick={() => signIn('github')}>GitHubでログイン</button>
    </div>
  )
}

動作確認：

  1. http://localhost:3000 にアクセス
  2. 「GitHubでログイン」ボタンをクリック
  3. GitHubの認証画面が表示され、承認後にログイン完了
【CCNA】IPv6

IPv6

ISP（Internet Service Provider）…エンドユーザーにIPv6の割り当てをしている

  • IPv4のアドレス枯渇問題を解決するため32ビットから128ビット（16ビットずつ8個のフィールドでフィールドでフィールドで16進数で表記）に拡張
  • ヘッダの簡素化
  • ブロードキャストの廃止
  • 階層構造による効率的なルート集約
  • 自動設定
  • IPsecのサポート必須

IPv6には、次の3種類のアドレスがあります。

  • ユニキャスト‥1体1の通信で利用される単一インターフェイス用のアドレス
  • マルチキャスト‥特定のグループに対する通信で利用されるアドレス
  • エニーキャスト‥グループ内の最も近いデバイスとの通信で利用されるアドレス
アドレス説明・覚え方
fc00::/7
ユニークローカルユニキャストアドレス		FC Tokyo 7人のユニークな住所はプライベートな話題
FE80::/10リンクローカルアドレス
鉄也を十分リンスしろ
・FF0e::1同じインターネット上の全てのノードに送信
・FF01::1同じノード上の全てのノードに送信
・FF02::1同じリンク上の全てのノードに送信
・FF02::5同じリンク上の全てのOSPFルータ
・FF02::6同じリンク上の全てのOSPF指定ルータ
・FF02::9同じリンク上の全てのRIPルータ
・FF02::101同じリンク上の全てのNTPサーバ
・FF05::1同じサイト内の全てのノードに送信
・FF05::101サイトローカル上の全てのNTPサーバ
・FF08::1同じ拠点内の全てのノードに送信

IPv6ヘッダ

  • フィールドの簡素化⇒処理が簡単に
  • IPv6ヘッダの方がサイズが大きくなっている
  • 40バイト固定長
  • チェックサムの削除
  • フローラベル（効率的にアプリケーションフローを識別）の追加
  • オプション機能は拡張ヘッダ
  • ルータでのフラグメント処理は禁止
  • ホップリミットは（IPv4のTTL：Time To Live生存期間）に相当

グローバルユニキャストアドレス

  • 世界中で一意
  • IANAで管理される
  • 最初の3ビットが001で始まる、2000::/3で表記されます。
  • 2001::/16 インターネット用のアドレス
  • 2002::/16 6to4トンネリング用のアドレス
  • 2003::/16〜3FFD::/16 役割が未定

グローバルプレフィックス（ランダム値、48ビット） サブネット（16ビット） インターフェースID（64ビット）

  • グローバルプレフィックス、サブネット、インターフェースIDの3フィールドで構成される
  • 前半64ビットはIPv4のネットワークアドレスに該当する
  • 一般的に64ビットのインターフェースIDを使用する

リンクローカルユニキャストアドレス

  • ホスト間で一意となる。
  • 同じサブネット上（同一リンク間）での通信が可能なアドレス
  • 最初の10ビットが1111111010で始まる、FE80::/10で表記されます。
  • 最初に続く54ビットは0
  • IPv6を扱う必ずインターフェース全てに設定されます。
  • ルーティングの対象になりません、このアドレスが送信元や宛先となっている場合、ルータはデータを転送しません。
  • リンクローカルアドレスを手動で設定しない場合、自動生成されたリンクローカルアドレスが設定される

ユニークローカルユニキャストアドレス

  • 企業などのローカルで使用されるアドレスで、IPv4のプライベートIPアドレスに相当します。
  • 最初の7ビットが1111110で始まる、FC00::/7で表記されます。

fd ランダム値（40ビット） サブネット（16ビット） インターフェースID（64ビット）

ユニキャストアドレスの特別なアドレス

  • ::/128 未指定アドレス
  • ::1/128 ループバックアドレス
  • ::FFFF:<IPv4> IPv4射影アドレス
    （例　0:0:0:0:0:FFFF:192.168.10.1）

マルチキャストアドレス

エニーキャストアドレス

エニーキャストアドレスでは、複数ノードのインターフェースに対して同じユニキャストアドレスを割り当てます。エニーキャストアドレス宛のパケットはそのアドレスを持つ最も近いノードのインターフェースに転送されます。

エニーキャストを使用しることでサーバの冗長化と負荷分散ができます。

IPv6アドレス割り当て

設定方法設定範囲
手動設定128ビット(config-if)#ipv6 address （アドレス/プレフィックス長）IPv6アドレス全桁設定
手動設定64ビット(config-if)#ipv6 address （サブネットID/64） eui-64サブネットIDを手動設定しインタフェースIDをeui-64で自動設定
ステートレス
自動設定
（SLAAC）		指定なし(config-if)#ipv6 address autoconfig [default]インタフェースIDをeui-64で自動設定
ステートフル
自動設定
（DHCPv6）		指定なし(config-if)#ipv6 address dhcp

EUI-64

EUI-64による自動生成は、48ビットのMACアドレスの中央に16ビットの「FFFE」を追加して64ビットに拡張することでインターフェースIDが生成されます。

  1. 48ビットを24ビットに分割
  2. 16ビットのFFFEを挿入
  3. インターフェイスの元のMACアドレスの7番目のビットを反転

インターフェイスをEUI-64で自動生成する場合はコマンドの末尾にeui-64キーワードを付加します。

(config-if)#ipv6 address <ipv6-address> / <prefix-length> [ eui-64 ] [ anycast ]

IPv6アドレスの手動設定

ルータのインターフェイスに対してIPv6ユニキャストアドレスを手動設定するには、ipv6 addressコマンドを使用してIPアドレスとプレフィックス長を設定します。

IPv6アドレスの自動設定

SLAAC

手動設定、DHCPサーバによる自動設定に加え、IPv6ではSLAAC(Stateless Address Auto Configuration : ステートレスアドレス自動設定)という自動設定機能があります。

  • SLAACのRAメッセージには64bitのプレフィックスが含まれる
  • 各ホストのIPv6アドレス＝ルータが送信したプレフィクス(64ビット) ＋modified EUI-64形式でMACアドレスから生成したインタフェースID(64ビット)

(config-if)#ipv6 address autoconfig

前半64bit後半64bit
（アドバタイズされた）
リンクローカルプレフィックス		インターフェースID

IPv6ネイバーテーブル

IPv4のARPテーブルに似た役割を持ちます。

#show ipv6 neighbors

IPv6の近隣探索(ND)

ネイバー検出は、同じリンク上の異なるノードが近隣に存在をアドバタイズし、近隣の存在について学習できるプロトコルです。

IPv4ではデータリンク層のアドレス（MACアドレス）を解決するために、ARPブロードキャストによりアドレスを解決します。IPv6ではNeighbor Discovery（ND）機能を使用しアドレスを解決しています。

タイプメッセージ
133RS:Router Solicitation（ルータ要請）
134RA:Router Advertisement（ルータ広告）
135NS:Neighbor Solicitation（近隣要請）
136NA:Neighbor Advertisement（近隣通知）
137Redirect（リダイレクト）

IPv6ルーティングの有効化

(config)#ipv6 unicast-routing

IPv6への移行技術

デュアルスタック

デュアルスタックとは、IPv4とIPv6の両方のプロトコルが処理できるように構築することです。

トランスレータ

トランスレータは、パケット変換を行います。（カプセル化しない）
NAT-PT、NAT64などの種類があります。

手動トンネル

デュアルスタックルータを使用してIPv6パケットをIPv4プロトコルでカプセル化する。

管理者が宛先と送信元のルータを手動で設定します。

GREトンネル

IPv6パケット以外にも多くのパケットを転送できます。手動トンネルよりもオーバーヘッドが大きくなります。

自動トンネル（6to4トンネル）

IPv4グローバルアドレスを一つ以上持つサイトに対してIPv6アドレスを割り当て、カプセル化したIPv6パケットを転送します。

IPv6アドレスの名前解決

pingコマンドやtalentコマンドを実行する際に、長いIPv6アドレスを指定するのは面倒です。そこでホスト名とIPv6アドレスのマッピング情報を事前に用意しておくと、ホスト名を指定して通信できるため便利です。

ホスト名とIPv6アドレスのマッピング情報の登録
(config)#ipv6 host <word> <ipv6-address1> [ <ipv6-address> ……<ipv6-address4> ]
*word…任意のホスト名、*IPv6-address…最大4つまで指定

IPv6 ACL

IPv6でサポートするのは、名前付きACLのみです。

IPv6はアドレス解決にARPではなくICMPを使用します。そのため、IPv6 ACLではIPv6近接探索を有効するために、「暗黙のpermit」条件も設定されています。

  • permit icmp any any nd-ns（ICMP NSを許可）
  • permit icmp any any nd-na（ICMP NSを許可）
  • deny ipv6 any any

【ACLを作成】

Exampleという名前でIPv6 ACLを作成
(config)#ipv6 access-list Example

サブネット2001:db8: 0:1::/64からサーバ2001:db8:0:3::200へのUDPトラフィックを無視する
(config-ipv6-acl)#deny udp 2001:db8: 0:1::/64 host 2001:db8:0:3::200

ホスト2001:db8:0:1::11からのTelnetを全て拒否する
(config-ipv6-acl)#deny tcp host 2001:db8:0:1::11 any eq telnet（またはeq 23）

その他IPv6トラフィックを全て許可する
(config-ipv6-acl)#permit ipv6 any any（省略可能）

ルータのFa0/0インターフェイスのアウトバウンド方向にIPv6 ACL「Example」
(config)#interface fa0/0
(config-if)#ipv6 traffic-filter Example out

「2001:db8:0:3::/64からのpingを拒否する」条件のステートメントをシーケンス番号15で追加
(config-ipv6-acl)#sequence 15 deny icmp 2001:db8:0:3::/64 any any echo-request

IPv6 ACLの検証

IPv6 ACLの表示
#show [ ipv6 ] access-list [ <acl-name> ]

インターフェイスへ適用したACLの確認
#show ipv6 interface [ <interface-id> ]

NDP

NDP（Neighbor Discovery Protocol：近隣探索プロトコル）

＜NDPの機能＞

  • MACアドレスの解決（IPv4のARPに相当）
  • SLAAC（StateLess Address Auto Configuration：アドレスの自動設定）
  • DAD（Duplicate Address Detection：重複アドレスの検出）
  • 同一セグメント上の機器を探索する

＜NDPとICMPv6＞

  • ICMPv6パケットを使用する
  • NDPは同一セグメント上のデバイスのMACアドレスを調べるために以下ICMPv6パケットを使用します。
    • NS（Neighbor Solicitation：近隣要請）：MACアドレスを問い合わせるパケッ
    • NA（Neighbor Advertisement：近隣広告）：NSへの応答パケット
  • NDPは同一セグメント上のデバイスのIPv6アドレスを調べるために以下のICMPv6パケットを使用します。
    • RS（Router Solicitation：ルータ要請）：RAを要請するパケット
    • RA（Router Advertisement：ルータ広告）：セグメントのプレフィックスなどを伝えるパケット

ICMPv6

ICMPv6は、IPv6用のICMPです。

  • エラー通知：パケットが破棄された理由を送信元に通知する機能
  • 近隣探索：同一セグメント上のデバイスのアドレスを調べる機能（NDやNDPとも呼ばれる）
【CCNA】ACL

ACL

アクセスリスト（ACL：Access Control List）は、特定のパケットフローを識別し制御するための条件を記述したリストです。

ACLを使用すると、ルータを通過するパケットのフィルタリングを行うことができます。※ルータ自身から発信されるパケットはフィルタリングの対象にはなりません。

＜ACLの種類＞

  • 標準ACL…条件として送信元IPアドレスだけ指定できる。宛先に近い位置に設置推奨（不要なフィルタリングを防ぐため）。
  • 拡張ACL…条件として送信元IPアドレス、宛先IPアドレス、プロトコル、送信元ポート番号、宛先ポート番号を指定できる。送信元に近い位置に設置推奨。

＜ACLの照合＞

  • シーケンス番号の小さい順（小さい順）に行われる
  • 限定された条件ほど先に設定する必要がある
  • ACLの最終行には自動的に「暗黙のdeny」が存在する

番号付きACL

番号を指定して作成するACL

番号付き標準ACLの作成
(config)#access-list <acl-number> { permit | deny | remark } <source> [<wildcard>] [ log ]
*permit‥許可、*deny‥拒否

番号付き標準ACLをインターフェイスに適用
(config-if)#ip access-group <acl-number> { in | out }

番号付き拡張ACL

条件に送信元IPアドレスだけでなく、宛先IPアドレスやプロトコル、ポート番号を指定できます。

【指定可能な項目とその順番】

  1. プロトコル
  2. 送信元アドレス
  3. 送信元ポート（オプション）
  4. 宛先IPアドレス
  5. 宛先ポート（オプション）

番号付き拡張ACLの作成
(config)#access-list <acl-number> { permit | deny | remark } <protocol> <source> <wildcard> [<operator-port>] <destination> <wildcard> [<operator-port>] [established] [ log ]
*source‥送信元アドレス、*destination‥宛先アドレス、*log‥パケットが条件に一致した場合にログメッセージを表示（オプション）

＜番号付き拡張ACLステートメントの例＞

条件ステートメントの例
192.168.1.64/27から全てのping（ICMPエコー/エコー応答）を許可access-list 100 permit icmp 192.168.1.64 0.0.0.31 any echo
access-list 100 permit icmp 192.168.1.64 0.0.0.31 any echo-reply
プロトコル・種類ACL番号
IPv4標準1〜99、1300〜1999
Ipv4拡張100〜199、2000〜2699
Apple Talk600~699
IPX標準800~899
IPX拡張900~999
プロトコルプロトコルナンバー
ICMP1
TCP6
UDP17
EIGRP88
OSPF89

名前付きACL

名前を指定して作成するACLです。、標準と拡張IPアクセスリストがあります。

名前付きACLの作成（標準/拡張）
(config)#ip access-list < standard/extended > < acl-name >

インバウンドACL、アウトバウンドACL

  • インバウンドACL…ACL照合⇒ルーティングテーブル参照
  • アウトバウンドACL…ルーティングテーブル参照⇒ACL照合
  • パケットフィルタリングのためにインターフェースに適用できるACLの数は、レイヤ3プロトコル（IPやIPX）ごとに in方向とout方向に1つずつ

ワイルドカードマスク

ACLのステートメント（条件文）の中でIPアドレスを指定するときには、ワイルドカードマスクを使用します。

  • 0を指定した場合一致
  • 1を指定した場合無視

プロトコルとポート番号

ポート番号TCP/IPプロトコル用途
20TCPftp-dataファイル転送（データ本体）
21TCPftpファイル転送（コントロール）
22TCPsshリモートログイン（セキュア）
23TCPtelnetリモートログイン
25TCPsmtpメール送信
53TCP/UDPdomainDNS（名前解決はUDP,ゾーン転送はTCP）
66bootpc
67bootpc
69UDPTFTPファイル転送
80TCPhttpwww
110TCPpop3メール受信
123UDPNTP時刻合わせ
143TCPimapメール受信
161UDPSNMP通信機器の監視、制御。
443TCPhttpswww（セキュア）
520UDPRIPルーティングプロトコル

VTYポート

TelnetやSSHなどのリモートアクセスは、ルータのリモートアクセス用の仮想ポートで処理されます。この仮想ポートのことをVTYポートと呼びます。ルータにTelnetやSSHでアクセスした場合、物理インターフェイスではなくVTYポートにログインする形になります。

このVTYポートにACLを割り当てることでTelnetやSHHのリモートアクセスを効率よく制御できます。

アクセスクラス（access-class）

仮想回線に適用するアクセスリストのことをアクセスクラスと言います。アクセスクラスを使うことにより、ルータへのTelnetアクセスを制限できます。

仮想回線（vty回線）にアクセスリストを適用する

Router(config)#line vty 0 4
Router(config-line)#access-class {アクセスリスト番号} {in | out}

ACLステートメントの編集

シーケンス番号によるステートメントの挿入

■標準ACL
(config)#ip access-list standard { <acl-number> | <acl-name> }
(config-std-nacl)#<sequence-number> { permit | deny } <source> [ <wildcard> ] [log]

■拡張ACL
(config)#ip access-list extended { <acl-number> | <acl-name> }
(config-ext-nacl)#<sequence-number> { permit | deny } <protcol> <source> <wildcard> [ <operator-port> ] <destination> <wildcard> [ <operator-port> ] [ established ] [log]

標準ACL

ステートメントの確認

ACLの表示

#show [ ip | ipv6 ] access-lists [ 番号 | 名前 | interface { インターフェイス } ] [ in | out ]

・全てのACLの表示…show access-lists
・ACL100の表示…show access-lists 100

ステートメントの削除

ACL99にあるシーケンス番号20のステートメントを削除
(config)#ip access-list standard 99
(config-std-nacl)#no 20

【CCNA】OSPF

OSPF

OSPF （Open Shortest Path First）は以下の特徴があります。

  • リンクステートルーティングプロトコル
    リンクステート型のルーティングプロトコルのため、リンクステート情報を交換します。
    ディスタンスベクター型よりも高速なコンバージェンスを実現します。
    （ルートまたはメトリックに変更があった場合、トリガーアップデートによって変更情報を通知し、LSDB、ルーティングテーブルに反映させます。⇒高速）
  • クラスレスルーティングプロトコル
    VLSM（variable length subnet mask）可変長サブネットマスクや不連続サブネットをサポートし、アドレスを効率的に使用できます。
  • メトリックはコスト
    メトリックには、リンクの帯域幅をもとにしたコストを使用しています。

  • エリアの概念による階層型ルーティング
    不安定なネットワークによる影響もエリア内のルータに抑えることができ、コンバージョンも高速になります。
    エリアの境界ではルート情報を１つに集約することができ、ルーティングテーブルのサイズも小さくなり、ルーティングのオーバーヘッドも減少します。

LSA

OSPFルータはルーティングテーブルではなく、LSA（Link State Advertisement：リンク状態広告）と呼ばれるリンクステート情報を交換します。

LSAはLSDB（ Link State Database ：トポロジテーブル）に格納されます。
各ルータはLSDBに格納されたLSAからネットワーク全体のトポロジ図を把握しています。

OSPFはネイバーを検出すると、LSAを交換し合いSPFアルゴリズムを用いて最適パスを計算します。

＜OSPFのテーブル＞

  • ネイバーテーブル‥認識しているネイバーのリスト
  • LSDB（トポロジテーブル）‥LSAを格納したデータベース
  • ルーティングテーブル‥実際のルーティングで使用される最適ルートのリスト

＜OSPFのパケット＞

Helloネイバー関係を確立、維持するためのパケット
DBDDataBase Description。LSDBに含まれるLSAのリストをネイバーに提示し、同期するためのパケット
LSRLink State Request。ネイバーにLSAを要求するためのパケット
LSULink State Update。ネイバーから要求されたLSAを送信するためのパケット
LSAckLink State Acknowledgement。DBDやLSUの受信による確認応答

※OSPFルータがトポロジデータベースの構築および維持するために必要な情報
⇒Helloパケット、LSA

Helloパケット

Helloパケットは、224.0.0.5のマルチキャストアドレスで定期的に送信されます。

＜Helloパケットに含まれる情報＞

  • ルータID
  • ネットワークマスク
  • Hello/Deadインターバル
  • ネイバーリスト
  • エリアID
  • OSPFプライオリティ
  • DR/BDRのIPアドレス
  • 認証パスワード
  • スタブエリアフラグ

＜2台のOSPFルータ間でLSDBの同期を完了するまでの手順＞

  1. DOWN状態…起動直後、Helloパケットをまだ受信していない状態
  2. INIT状態…受信したHelloパケット内のネイバーリストに自身のルータIDがなく、双方向通信は確立していない状態
  3. 2WAY状態…双方でHelloパケットを受信し、お互いに存在を認識した状態、双方向通信が確立
  4. EXSTART状態…先にDBDパケットの送信を開始するルータ（マスター）と後からDBDを送信するルータ（スレーブ）を決定している状態
  5. EXCHANGE状態…自身のLSDBで保持しているLSAのリスト（要求情報）を提示している状態です。
  6. LOADING状態…自身のLSDBに存在しないLSA情報があれば、LSAパケットを送信して要求します。
  7. FULL状態…必要なLSA情報を全て受け取り、LSDBが完全に同期された状態

＜ネイバー関係の確立＞

  • Helloインターバル
  • Deadインターバル
  • エリアID
  • サブネットマスク
  • 認証パスワード
  • スタブエリアフラグ

※ルータIDが重複しているとネイバー関係を確立できません。

OSPFの設定

基本的なOSPFの設定は、次の2つの手順になります。

  1. OSPFプロセスの有効化
  2. OSPFを有効にするインターフェイスとエリアの設定

＜①OSPFプロセスの有効化＞

OSPFを有効化するには、以下のコマンドを使用します。

(config)#router ospf < process-id >

プロセスID

  • プロセスIDとは、1台のルータ上で複数のOSPFプロセスを起動するときに、データベース内の情報を識別するための番号です。
  • プロセスIDは1〜65535の中から任意の番号を指定

＜②OSPFを有効にするインターフェイスの指定＞

インターフェイスでOSPFを有効化すると、OSPFパケットが送受信されます。また、そのインターフェイスのネットワークアドレスは、OSPFネットワークの一部としてアドバタイズされます。

  • network コマンド
  • ip ospf コマンド

OSPFを有効化するインターフェイスの指定（ワイルドカードマスクとともに指定します。）

(config-router)#network < address > < wildcard-mask > area < area-id >
*address…ネットワークアドレス、サブネットアドレス、インターフェイスのIPアドレスのいずれか

インターフェイスでOSPFを有効化する

(config)#router ospf < process-id >
(config)interface < interface >
(config-if)#ip ospf < process-id > area < area-id >

DR、BD

OSPFでは、イーサネットのようなマルチアクセスネットワークでDRと、BDRが選出されます。

  • DR (Designated Router)…LSAの交換を取りまとめる代表ルータ
  • BDR(Backup Designated Router)…DRのバックアップとして動作するルータ
  • DROTHER…プライオリティは0、0だとDR、BDRに選出されない

プライオリティ

  • OSPFルーターのランク付けに使用する
  • 0～255の範囲で任意に設定できます。初期値は1です。
  • ルーター全体で一つの値を設定するのではなく、インターフェースごとに個別の値を設定します。
  • プライオリティは0、0だとDR、BDRに選出されない

OSPFプライオリティの設定
Router(config-if)#ip ospf priority < priority >

＜DRとBDRの選出方法＞

DRとBDRはセグメントごとに選出されます。

  1. OSPFプライオリティ値が最も大きいルータがDRになる。
    2番目に大きいルータがBDRになる。

  2. OSPFプライオリティ値が同じ場合、ルータIDが最も大きいルータがDR、２番目に大きいルータがBDR。

＜ルータIDの決定優先順＞

  1. router-idコマンドで手動で定義
  2. ループバックインターフェースがあれば最も大きいIPアドレスがルータID
  3. ルータのアクティブな物理インターフェース上で最も大きいIPアドレスがルータID

※ただし、ルータIDが決まった後にルータIDとして優先的に採用される別の値が設定されてもルータIDは変わりません。ルータIDを変更したい場合はOSPF（プロセス）を再起動する必要があります。

ループバックインターフェイス

管理者が自由に作成できる仮想的なインターフェイスです。

＜DRとBDRの動作＞

  • 224.0.0.5‥全OSPFルータ宛
  • 224.0.0.6‥DR、BDR宛

OSPFネットワークタイプ

OSPFではリンクの種類に応じて、次の5つのネットワークタイプが定義されています。

  • ポイントツーポイント
  • ブロードキャストマルチアクセス
  • NBMA（ノンブロードキャストマルチアクセう）
  • ポイントツーマルチポイント
  • ポイントツーマルチアクセスノンブロードキャスト

■OSPFのネットワークタイプの設定（インターフェイスコンフィグレーションモード）
(config)#interface [ インターフェイス ]
(config-if)#ip ospf network [ broadcast | point-to point ]

5つのNBMAモードネイバー検出DR/BDR選出適切なトポロジーip ospf network –Hello/Dead
NBMA手動有フルメッシュnon-broadcast　30/120
ブロードキャスト自動有フルメッシュbroadcast10/40
ポイントツーポイント自動無スター
( サブInterface使用 )		point-to-point10/40
ポイントツーマルチポイント自動無スターpoint-to-multipoint30
ポイントツーマルチポイント
（Non Broadcast )		手動無スターpoint-to-multipoint
nonbroadcast		30

マルチエリアのOSPF

OSPF階層構造

  • バックボーンエリア…エリア間のトラフィックを中継するエリア。エリア0を設定するとバックボーンエリアとして認識される。
  • 標準エリア…バックボーンエリア以外のエリア。必ずバックボーンエリアに接続していなければならない。
  • スタブエリア…無駄なLSAトラフィックを少なくするために考えられたエリア。ASBRから再配布された外部ルート（LSA5）を受信せず、スタブエリアとの接続点にいるABRがスタブエリアに注入してくれたデフォルトルートを使用して、非OSPFネットワークにアクセスする。※スタブエリアは、ASBRの配置不可。仮想リンク設定不可。バックボーンでは不可。

LSAにはいくつかのタイプがあり、その性質から特定のエリアないだけでフラッティングされるものがあります。

  • LSAタイプ1：ルータLSA
    全てのルータが生成、エリア内フラッディング
  • LSAタイプ2：ネットワークLSA
    DRルータが生成、エリア内フラッディング
  • LSAタイプ3：ネットワーク集約LSA
    ABRルータが生成、OSPFドメイン全体フラッディング
  • LSAタイプ4：ASBR集約LSA
    ABRルータが生成、OSPFドメイン全体フラッディング
  • LSAタイプ5：AS外部LSA
    ASBRルータが生成、OSPFドメイン全体フラッディング
OSPFルータのタイプ説明
内部ルータ　内部ルータは、全てのインターフェースを同じエリアに接続しているルータ。
バックボーンルータ　バックボーンルータは、1つ以上のインターフェースをバックボーンエリアに接続しているルータ。
ABR
( Area Border Router)		　エリア境界ルータ。ABRは、異なるエリアを接続しているルータ。ABRではエリアごとの LSDB を
　保持しており、エリア間のルーティングを行う。ABRでは異なるエリアのリンクステート情報を集約
　して内部ルータに通知するので内部ルータのLSDBのサイズは縮小できる。集約ルートはABRで設定。
ASBR
( AS Boundary Router )		　AS境界ルータ。ASBRは、1つ以上のインターフェースが外部ASのルータと接続しているルータ。
　外部ASのルータとは、例えばRIPを稼働しているルータなどの非OSPFネットワークにいるルータ。
　ASBRにルート再配送をすることにより、OSPFネットワークと非OSPFネットワークとが通信できる。

OSPFのメトリック

宛先ネットワークまでの各インターフェイスのコストの合計値になります。

デフォルトのコスト ＝ 基準帯域幅100（Mbps） ÷ インターフェイスの帯域幅（Mbps）

下記コマンドによって基準帯域幅（デフォルトの100Mbpsから）やインターフェースの帯域幅を変更する場合がある

例）基準帯域幅を「10000Mbps」に設定
auto-cost reference-bandwidth 10000

例）インターフェイス帯域幅を「10000000Kbps」に設定
bandwidth 10000000

【負荷分散】
同じ宛先の最小メトリックのルートが複数ある場合、その複数ルートを使ってパケット送信します。

OSPFのコマンド

モードプロント説明
ユーザモード>Pingなどの一部のコマンドしか使用できないモード
特権EXECモード#設定などの情報を確認できるモード
グローバル
コンフィグレーションモード		(config)#デバイス本体に関する設定を行うモード
ライン
コンフィグレーションモード		(config-line)#アクセス回線に関係する設定を行うモード
インターフェイス
コンフィグレーションモード		(config-if)#インターフェイスに関係する設定を行うモード
ルータ
コンフィグレーションモード		(config-router)#ルーティングプロトコルの設定を行うモード

■OSPFの有効化（ルータコンフィグレーションモード）
(config)#router ospf [ プロセスID ]
(config-router)#network [ アドレス ] [ ワイルドカードマスク ] area [ エリアID ]

プロセスID1~65535の中から任意の番号を指定。（OSPFの内部処理のために使用される番号なので、他のルータと一致させる必要はない）
アドレスOSPFを有効にしたいインターフェイスのネットワークアドレス、またはIPアドレスを指定
ワイルドカードマスクアドレスを読み取るためのワイルドカードマスク
エリアID所属させるエリアIDを指定（シングルエリアOSPFの場合は0を指定）

■OSPFの有効化（インターフェイスコンフィグレーションモード）
(config)#interface [ インターフェイス ]
(config-if)#ip ospf [ プロセスID ] area [ エリアID ]

■LSDBの情報を確認する
#show ip ospf database

■OSPFルートの検証
show ip routeコマンドを使用してルーティングテーブルを確認します。最後にospfを付加すると、OSPFルートのみ確認できます。
#show ip route [ ospf ]

＜OSPFを確認するコマンド＞

■ルータID、タイマー、接続しているエリア、SPFアルゴリズムの実行回数、LSA情報など表示
#show ip ospf
■ネイバーを確認
#show ip ospf neighbor
■OSPFが動作するインターフェイスの情報を確認
コスト、OSPFプライオリティ、Hello/Deadインターバル*、インターフェイスのアドレス、DR/BDRのルータIDとIPアドレス、エリアID*などを確認できます。

#show ip ospf interface [ brief ]

（※brief‥OSPFが有効なインターフェイスの要約情報を表示）
*ネイバー確立

Router1# show ip ospf interface xxxx
xxxx is up, line protocol is up 
  Internet Address xx.xx.xx.xx/xx, Area x 
  Process ID 1, Router ID xxx.xxx.xx.x, Network Type BROADCAST, Cost: 10
  Transmit Delay is 1 sec, State BDR, Priority 1 
  Designated Router (ID) xxx.xx.xx.xx, Interface address 10.10.10.2
  Backup Designated router (ID) xxx.xxx.xx.xx, Interface address 10.10.10.1
  Timer intervals configured, Hello 10, Dead 40, Wait 40, Retransmit 5
    Hello due in 00:00:06
  Index 1/1, flood queue length 0
  Next 0x0(0)/0x0(0)
  Last flood scan length is 2, maximum is 2
  Last flood scan time is 0 msec, maximum is 4 msec
  Neighbor Count is 1, Adjacent neighbor count is 1 
    Adjacent with neighbor 172.16.10.1  (Designated Router)
  Suppress hello for 0 neighbor(s)
#show ip ospfルータID、タイマー、接続しているエリア、
SPFアルゴリズムの実行回数、LSA情報
#show ip ospf neighbor
#show ip ospf interface [ brief ]コスト、OSPFプライオリティ、Hello/Deadインターバル、インターフェイスのアドレス、DR/BDRのルータIDとIPアドレス、エリアID
（※brief‥OSPFが有効なインターフェイスの要約情報を表示）
■MTU不一致の検出を停止
MTU不一致によるネイバー関係の問題を解決

ip ospf mtu-ignore

■基準帯域幅の設定
デフォルトは100Mbs
(config)#router ospf [ プロセスID ]
(config-router)#auto-cost reference-bandwidth [ 基準帯域幅 ]

■インターフェイスの帯域幅の設定
コストを算出する際に参照する帯域幅を変更
(config)#interface [ インターフェイス ]
(config-if)#bandwidth [ 帯域幅 ]

基準帯域幅（Mbps）1〜4292967の中から指定
インターフェイスの帯域幅（kbps）1〜1000000の中から指定
OSPFのコスト基準帯域幅÷インターフェイスの帯域幅
※必ず整数値で小数点以下は切り捨て

■ハロータイムを設定するコマンド

switch(config)#spanning-tree vlan { VLAN番号 } { タイマーの種類 } { 秒 }
タイマーの種類…hello-time 、max-age 、foward-time いずれか指定

パッシブインターフェイス

パッシブインターフェイスを設定すると、特定のインターフェイス上でOSPFルーティングアップデートの送受信を制御できます。

パッシブインタフェイスが有効になると、OSPFのパケットの送信は停止されます。Helloパケットも送信されなくなりネイバー関係が確立されることもありません。

■パッシブインターフェイスの設定
設定すると、特定のインターフェイス上でOSPFパケットの送信が停止されます。不要なトラフィックを抑えることができます。
(config-router)#passive-interface { <interface-id> | default }
（※brief‥OSPFが有効なインターフェイスの要約情報を表示）

OSPFデフォルトルートの配布

OSPFでデフォルトルートをアドバタイズ（通知）するには、default-information originateコマンドを使用します。

※デフォルトルートは、ルーティングテーブルに登録されていないネットワーク宛のパケットを転送する際に使用します。

OSPFデフォルトルートの配布
(config-router)#default-information originate [ always ]

・always…自身のルーティングテーブルにデフォルトルートが存在しない状態でも、常にOSPFデフォルトルートを生成する（オプション）

OSPFv3

OSPFv3はOSPFv2に変更を加えたIPv6対応版です。

  • Ipv6ヘッダ内のネクストヘッダは89
  • 新しく2つのLSAを定義
  • IPsecによって、より安全な認証を行う

■OSPFv3の基本設定

  1. OSPFv3プロセスの起動
    (config)#ipv6 router ospf < process-id >
    (config-rtr)#
  2. ルータIDの設定
    (config-rtr)#router-id <router-id>
  3. インターフェイスでOSPfv3の有効化
    (config-if)#ipv6 ospf <process-id> area <area-id>

■OSPFルートが学習しているか確認
show ipv6 route

【CCNA】レイヤ3冗長化

FHRP

冗長化のために別のファールソホップルータを活用するプロトコルをまとめてFHRP（First Hop Redundancy Protocol）といます。

  • Cisco製：「HSRP」（Hot Standby Router Protocol）や「GLBP」（Gateway Load Balancing Protocol）
  • 標準化：「VRRP」（Virtual Router Redundancy Protocol）

HSRP

「HSRP」（Hot Standby Router Protocol）は、デフォルトゲートウェイの冗長化のためにシスコが開発したプロトコルです。

  • HSRPは複数のファーストホップルータをグループ化して仮想ルータを構成します。
  • PCに設定するデフォルトゲートウェイのIPアドレスはHSRPでルータに設定した仮想IPアドレスになります。（※スタンバイルータに変わってもデフォルトゲートウェイのアドレスを変える必要がない）
HSRPの有効化（仮想IPアドレスの設定）
(config-if)#standby [グループ番号] ip {仮想IPアドレス}

＜HSRPのグループ＞

  • 仮想ルータ…仮想IPアドレス、仮想MACアドレスを持つ
  • アクティブルータ…実際にパケットの転送を行うルータ
  • スタンバイルータ…アクティブルータの障害時に、次に転送ルータになるバックアップルータ

＜HSRP仮想MACアドレス＞

仮想MACアドレスの先頭から5バイトは固定で残り1バイトはグループ番号になります。

【HSRPの仮想MACアドレス】
0000.0c07.acXX

＜HSRPの仮想IPアドレス＞

仮想IPアドレスは、HSRPを有効にするインターフェースと同じネットワークに属する空きIPアドレスの中から任意のIPアドレスを設定します。

PCに設定するデフォルトゲートウェイのIPアドレスはHSRPでルータに設定した仮想IPアドレスになります。

＜HSRPの状態遷移＞

【アクティブルータの選定方法】

  • プライオリティが最大のルータ（デフォルトは100）
  • IPアドレスが最大のルータ（プライオリティが同じ場合）
ステート説明
イニシャルHSRP開始時のステート。設定変更、またはインターフェイスを有効化した最初のステート
ラーニング仮想IPアドレスを認識しておらず、まだHelloメッセージを受信していない
リスニングHelloメッセージをリスニング（受信）している
スピーク定期的にHelloメッセージを送信し、アクティブおよびスタンバイの選定に参加している
スタンバイアクティブルータがダウンしたときにアクティブルータとなるために待機している。定期的なHelloメッセージを送信している
アクティブ仮想MACアドレス宛のパケットを転送する。定期的なHelloメッセージを送信している。

＜アクティブルータとスタンバイルータの動作＞

  • Helloタイマー：Helloメッセージの送信間隔（デフォルトは3秒）
  • Holdタイマー：Helloメッセージが届かなくなってからアクティブに切り替わるまでの時間（デフォルトは10秒）

プリエンプト

プリエンプト機能を設定しておくと、あとから追加した場合でも即時にプライオリティが最大のルータをアクティブルータとして動作させることができます。

(config-if)#standby [<group-number>] preempt

＜基本設定＞

  1. priorityを設定（デフォルトは100）
  2. もし障害が起こったら、どれだけpriority値を下げるか（デフォルトは10）
  3. プリエンプト機能を有効にする
  4. どこのインタフェイスを追跡するか
  5. ルータ1の設定を確認する
  6. アクティブになっているのは？（ローカル＝自分）
  7. スタンバイになっているのは？

HSRPインターフェイストラッキング

HSRPスタンバイルータはHSRPを有効化しているインターフェイス上でHelloメッセージが届かなくなることでアクティブルータがダウンしたと判断し、スタンバイからアクティブステートに切り替わります。

HSRPインターフェイストラッキングは、インターフェイスの状態を追跡する機能です。トラッキング対象のインターフェイスで障害が発生すると、自動的にHSRPプライオリティを小さくしたHelloメッセージを送信し、グループ内のスタンバイルータをアクティブルータに切り替えます。

HSRPインターフェイストラッキングを設定する。
(config-if)#stanby [ <group-number> ] track <interface-type> [ <decrement> ]

＜HSRPグループの情報の表示＞

#show standby [ <interface-type> ] [ <group-number> ] [ brief ]
  • <interface-type>…インターフェイス名を指定。省略した場合、全てのHSRP表示。
  • <group-number>…HSPRグループ番号を指定。全てのHSRP表示。
  • brief…HSRPグループの要約情報を1行で表示

＜以下の点が確認できる＞

  • 有効になっているインターフェイス、グループ、役割
  • 仮想IPアドレス
  • 仮想MACアドレス
  • プリエンプトが有効かどうか
  • HSRPプライオリティ
  • HSRPのタイマー（デフォルト：Hello 3秒、hold time 10秒）
  • 現在のアクティブルータの情報（アクティブルータの実IPアドレス、プライオリティ。localは自身を表す）
  • 現在のスタンバイルータの情報（スタンバイルータの実IPアドレス、プライオリティ。localは自身を表す）

HSRPv2

  • HSRPv1はグループ番号を0~255に設定しますが、HSRPv2では0~4095の範囲が有効です。
HSRPv1HSRPv2
Helloパケットの宛先224.0.0.2224.0.0.102
グループの範囲0～2550～4095
仮想MACアドレス0000.0c07.acXX0000.0c9f.fXXX
IPv6サポートなしあり

GLBP

複数のアクティブフォワーダ（転送ルータ）によって、発信トラフィックのロードバランシングを行うシスコ独自のFHRP。

  • GLLPグループは0〜1024まで作成可能
  • 最大で4つの仮想MACアドレスを使用
  • Cisco独自
  • ホスト単位で負荷分散を行える

【GLLPの仮想MACアドレス】
0000.b40X.XXYY
Xはグループ番号
YにはMACアドレス01〜04

VRRP

  • VRRP（Virtual Router Redundancy Protocol）はデフォルトゲートウェイの冗長化を行う標準化プロトコルです。
  • 0〜255のグループ
  • 役割としてマスタールータ、バックアップルータ

【VRRPの仮想MACアドレス】
0000.5e00.01XX

FHRPの比較（頻出）

オススメ【WordPressプラグイン】

Show Current Template

Show Current Template

Show Current Template 代用

header.phpかfooter.phpを編集

<?php
global $template; // $template 変数をグローバルスコープで使用
$template_name = basename($template); // 現在のテンプレートファイル名を取得
echo '<!-- 現在使用しているテンプレートファイル名は ' . esc_html($template_name) . ' です。 -->'; // コメントとして出力
?>

EWWW Image Optimizer

「EWWW Image Optimizer」はインストールするだけで、画像サイズを圧縮してくれる手軽で便利なプラグインです。

※インストールするとWordpressにアップロードする画像のファイルサイズを小さくします。アップロード済みの画像を一括で小さくすることも可能です。

EWWW Image Optimizer

エラー）「埋め込みブロック」が正しく反応しない不具合がおきました

ホバーしてカーソルは反応しているのですが、クリックしてもリンクにとばない事象が発生

テーマによってエラーが発生するようですかね、、

→「EWWW Image Optimizer」無効化で正しくリンクにとびました

Intuitive Custom Post Order

ワードプレス投稿記事をドラッグアンドドラッグ操作で直感的に並び替えができる様になります

Intuitive Custom Post Order

Password Protected

とても手軽に、WordPress サイトにパスワード保護をかけられます。

Password Protected – Password Protect your WordPress Site, Pages, & WooCommerce Products – Restrict Content, Protect WooCommerce Category and more

Easy FancyBox

WordPressで、画像をモーダルで拡大するためのプラグインです。

WordPressで画像を拡大表示するなら「Firelight Lightbox」（旧名：Easy Fancybox）
Firelight Lightbox

GTranslate

https://ja.gtranslate.io

Smash Balloon Instagram Feed

タイムラインを表示

Smash Balloon Social Photo Feed – 簡単なソーシャルフィードのプラグイン

＜エラー対処＞

https://granvi.jp/skillup/smash-balloon-instagram-feed-error

WordPress Popular Posts

人気記事ランキングを作成できるプラグインです。

WordPress Popular Posts

表示されない場合

https://norinorikazu-miyao.com/?p=4365

Search Everything

WordPressの検索対象は固定ページ、投稿ページのタイトル、本文となっていますが、Search Everythingをしようすることで、カテゴリーやタグ等、検索対象を広げることができます。

Search Everything

Auto Upload Images

投稿記事を移行やコピーしたいとき、「編集画面でコピー元の記事を全選択し全ブロックをコピー先に貼り付ける」と、その中に含まれている画像が自動で移行先のワードプレスのメディアにアップロードされます。

WP Sitemap Page

HTMLサイトマップを作成

WPCode

FTPクライアントソフト使わなくても、functions.phpのコード記述ができます。

コードスぺニットごとの有効無効の切り替えもできるのでコード管理もしやすいです。

Search Regex

Search Regexは、WordPressサイトの文章を一括で探して変更できる便利ツールです。

  1. サイト全体の文章検索：投稿やページなど、サイト内のあらゆる場所の文章を探せます
  2. 一括置換：見つかった文章をまとめて変更できます
  3. 変更前確認：変更する前に結果を確認できるので安心です
  4. パターン検索：特殊な検索方法（正規表現）を使って複雑な条件での検索もできます
    • 正規表現とは：特定のパターンの文字列を見つける特殊な記号の組み合わせです
Search Regex
【CCNA】VLAN

VLAN

VLAN（Virtual Local Area Network）とはスイッチ（L2）の技術の一つです。スイッチ部でネットワークを仮想的に分けることができます。

  • 端末の物理的な配置に依存せずネットワークを構築できます。
  • ブロードキャストドメインを分割できます。
  • セキュリティ対策になります。
  • 宛先MACアドレスがMACアドレステーブルに登録されていない場合、受信したポートと同じVLANに属する全ポート（受信ポートは除く）から転送する
【VLANの作成】

(config)#vlan <vlan-id>
(config-vlan)#name <vlan-name>　…省略可能
(config-vlan)#exit　…このタイミングで作成完了
【スッチポートにVLANの割り当てる】

(config)#interface FastEthernet 0/1
(config-if)#switchport access vlan <vlan-id>

VLAN ID

  • デフォルトVLAN（1、1002〜1005）は削除したり、名前変更することができない

＜VLAN IDの範囲＞

ID
範囲		説明
0、4095
予約		システム内部で使用
1
標準		シスコのイーサネットのデフォルトVLAN
2〜1001
標準		イーサネット用の標準VLAN
1002〜1005
標準		FDDIおよびトークンリング用のデフォルトVLAN
1006〜4094
拡張		イーサネット用の拡張VLAN

アクセスポート

  • 一つのVLANに所属しているポートをアクセスポートといいます。
  • アクセスポートに繋がっているリンクのことはアクセスリンクといいます。
  • デフォルトでVLAN1を転送する

アクセスポートとして動作させる

switchport mode access

トランクポート

  • 複数のVLANに所属しているポートをトランクポートといいます。
  • トランクポートに繋がっているポートをトランクリンクといいます。
  • トランクリンクではIEEE 802.1Qを使用して、VLAN情報を識別します。

トランクポートは、1本の物理リンク上で複数のVLANトラフィックを伝送するための技術です。同じVLANが複数のスイッチにまたがって構成されるケースで使用することで、スイッチ間の接続リンク数を減らすことができるため、通常は複数の同じVLANを持つスイッチ間を接続するリンクはトランクポートで接続します。

VLANの割り当てには、手動のポートベースVLAN（スタティックVLAN）と自動のダイナミックVLANがあります。

DTP

  • ポートのネゴシエーションは DTP（Dynamic Trunking Protocol）によって行われます。
  • Cisco独自
  • 30秒ごとにマルチキャストドメイン宛にフレームを送信する。
  • DTPはVTPドメインが一致している場合にのみ利用する
モード動作
trunkトランクポートになります！
accessアクセスポートになります！
dynamic desirableできればトランクがいいです‥
dynamic auto何が都合がいい？交渉ないならアクセスになります
trunkaccessdynamic desirabledynamic auto
trunktrunkaccesstrunktrunk
accessaccessaccessaccessaccess
dynamic desirabletrunkaccesstrunktrunk
dynamic autotrunkaccesstrunkaccess

【スイッチポートモード変更（DTPの設定）】

(config-if)#switchport mode {access | trunk | dynamic {auto | desirable}}

【DTPの無効化】

(config-if)#switchport nonegotiate

トランキングプロトコル

  • トランキングプロトコルにはIEEE802.1QとISLの2つがあります。
  • トランクリンクの両サイドで、トランキングプロトコルを合わせておく必要があります。

IEEE802.Q

  • IEEE802.Qはトランクポート上でフレームにタグと呼ばれる情報を挿入し、VLANを識別します。
  • 最大通信速度が10Mbpsのインターフェースを使用することができます。
  • IEEE802.Qではタグを挿入するため、FCSの再計算が必要になります。
  • IEEE802.QではネイティブVLANをサポートしています。ネイティブVLANはタグは付加されません。（ネイティブVLANのVLAN IDは、トランクリンクの両端で同じにする必要があります。）
  • 1522バイト

ISL

  • Cisco独自
  • ISLではISLヘッダ（26バイト）と新しいFCS（4バイト）を付けてカプセル化する。
  • 1548バイト

プロトコルの設定

(config-if)#swichport trunk encapsulation { isl | dot1q | negotiate }
*negotiate …デフォルト

ネイティブVLAN

  • IEEE802.QではトランクポートごとにひとつだけネイティブVLANを設定できる
  • ネイティブVLANはタグは付加されない
  • ネイティブVLANは、管理トラフィック（CDP）を通す
  • スイッチ間（トランクポート間）でネイティブVLANを合わせておく必要があります
  • ネイティブVLANが一致していないとVLANホッピングと呼ばれる攻撃（VLANを越える攻撃）に悪用される危険性がある
  • デフォルトのネイティブVLANはVLAN1になっている
ネイティブVLANの変更

(config-if)#switchport trunk native vlan { vlan-ID }
全てのVLANにタグを付加

(config)#vlan dot1q tag native

ISLフレーム（Cisco独自）

トランクプトコルIEEE802.1QISL
規格IEEEによって標準化シスコ独自
方式タギング方式カプセル方式
ネイティブV LANサポートなし
フレームの増加幅4バイト30バイト
（ヘッダ：26、FCS：4）
最大フレームサイズ1,522バイト1,548バイト
FCSの処理再計算フィールドの増加
VLAN ID12ビット10ビット
サポートするVLAN数4,096（2の12乗）1,024（2の10乗）

VLANタギング

フレームにタグフィールドを付加することによって、対向の機器がフレームのVLAN番号を識別できるようにする技術

  • 1つのインターフェースで複数のVLANを扱うための方法
  • トランクポートを使用する
  • アクセスポートから送信するフレームにVLANタグは付きません。

ダブルタギング

送信するフレームにVLANタグを2つ付加することで通常はアクセスできないほかのVLANにアクセスする攻撃。予防策としてネイティブVLANに未使用のVLANを割り当てることでセキュリティを強化できる

ルータオンナスティック（Router on a Stick）

ルータオンナスティック（Router on a Stick）の時、必要なルータの設定

  • ルータとスイッチ間はトランクリンク
  • VLANごとのサブインターフェースを作成
  • ルータにはサブインターフェイスを設定する。（IPアドレスの設定）
  • スイッチとサブインターフェイス間のトランキングプロトコル（カプセル化の種類）を一致させる必要があります。

各PCのデフォルトゲートウェイは、サブインターフェイスのIPアドレスになります。

【ルータに必要なコマンド】
(config)#interface < interface-id >.<subinterface number >
(config-subif)#encapsulation dot1q < vlan-id >
(config-subif)#ip address < ip-address > < subnet >
【スイッチに必要なコマンド】
(config)#interface < interface-id >
(config-if)#switchport mode trunk

【サブインターフェースの作成】

(config)#interface {インターフェース} . [サブインターフェース番号]
インターフェース ・・・自身に搭載している物理インターフェースを指定「FastEthernet 0/0」など
サブインターフェース番号 ・・・任意の番号を指定

【VLANカプセル化方式の指定とVLAN IDの指定】

(config-subif)#encapsulation dot1q {VLAN番号}

L3スイッチ

https://ntorelabo.com/2022/09/13/etherchannel/

レイヤ3の情報（IPアドレス）を基に転送処理を行うスイッチをレイヤ3スイッチといいます。複数の層の情報を制御できる機器をマルチスイッチといいます。

  1. レイヤ3EtherChannel は、レイヤ3スイッチのルーテッドポートで行います。物理インターフェイスをno switchportコマンドでルーテッドポー トに変更する
  2. IP アドレスの設定は EtherChannel の設定を行った後に作成された Port-channel インターフェイス上で行います。
  • マルチレイヤスイッチはルーティング機能が無効になっているのでルーティング作業を有効にする必要かあります。
  • VLANのデフォルトゲートウェイはSVI（Switch Virtual Interface）を設定します。

レイヤ 3 スイッチにはスイッチポート、ルーテッドポート、SVI の 3 つのポートが 存在します。それぞれの役割について整理しておきましょう。

スイッチポート

レイヤ 2 スイッチのポートと同様に、アクセスポートやトランクポートの設定を行 う物理ポートです。レイヤ 3 スイッチの物理ポートはデフォルトでスイッチポート として動作していますが、一度ルーテッドポートに変更したポートを再度レイヤ 3EtherChannel は、レイヤ 3 スイッチのルーテッドポートで行います。 ポートに戻すには、該当ポートで (config-if)#switchport コマンドを実行します。

ルーテッドポート

物理ポートをルータのインターフェイスとして動作させるポートです。IP アドレス の設定や ACL の設定など、ルータのインターフェイスと同様の設定が可能になり ます。スイッチポートからルーテッドポートに切り替えて動作させるには、該当 ポートで(config-if)#no switchportコマンドを実行します。

SVI

SVI(Switch Virtual Interface)はスイッチ内部に存在する仮想インターフェイスで、各 VLAN に紐づく内部のスイッ チと接続するルータのインターフェイスとして動作します。ルーテッドポートと同 様に、IPアドレスの設定やACLの設定などが可能です。SVIを作成するには、 (config)#interface vlan <VLAN番号>コマンドを実行します。

VTP

  • VLAN trunking Protocol
  • トランクリンクで接続された複数のスイッチ間でVLAN情報を共有する
  • シスコ独自のプロトコル
  • VTPドメイン名が同じスイッチ間で同期が行われる

  • サーバモート（デフォルト）…VLAN作成・変更・削除し、他のスイッチにアドバタイズ（通知できる）モードです。また他から受信したVTPアドバタイズに基づいてVLAN情報を同期します。
  • クライアントモード…VLANの作成・変更・削除はできないモードです。他から受信したVTPアドバタイズに基づいてVLAN情報を同期し、転送します。
  • トランスペアレントモード…トランクリンクを介して受信したVTPアドバタイズを他に転送するモードです。
モード作成、変更、削除同期アドバタイズメント転送
サーバ○○○○
クライアント×○×○
トランスペアレント○××○

VTPリビジョン番号

VTPリビジョン番号は、VLANの設定があるたびに1つずつ増えていく数値です。リビジョン番号が一番大きいものが最新として同期させます。

VTPプルーニング

ブロードキャストの宛先VLANが存在しない（使われていない）スイッチへはフレームを送らないようにする技術は、VTPプルーニングです。

音声VLAN

  • 1つのアクセスポートに混在しているIP PhoneとPCのデータを別々に識別する機能です。
  • Cisco IOSの独自機能
  • アクセスポートでありながら1つのポートで2つのVLANトラフィックを転送することができます。このようなポートをマルチVLANアクセスポートといいます。
  • フレームの優先度を表す値を、CoS（Class of Service）といいます。
  • パケットに優先順位をつけて通信品質を保証する技術を、QoS（Quality of Service）といいます。
  • 音声VLANを設定するポートではCDPを有効にしておく（CDPはデフォルトで有効になっているため、CDPの設定は必要ありません）音声VLANを設定するポートではCDPを有効にしておく（CDPはデフォルトで有効になっているため、CDPの設定は必要ありません）
  • 音声VLANを設定すると自動的にPortFastが有効になる

【音声VLANで使用する主なコマンド】

音声VLANを使用する場合、ポートはアクセスポートにします。
(config-if)#switchport mode access

音声用のVLANを指定します。ここで設定された音声用のVLANは、CDPによってCisco IP Phoneに通知されます。
(config-if)#switchport voice vlan {VLAN_ID}

PCデータ用のVLANを指定します。
(config-if)#switchport access vlan {VLAN_ID}

vSwitch

vSwitchとは、サーバ上のソフトウェアによって仮想的に作成するL2スイッチで、仮想サーバを接続するために使用します。

  • 仮想的に作成するL2スイッチ
  • 仮想サーバ同士を接続する
  • 仮想サーバと物理ネットワークを接続します。

コマンド

【コマンド スイッチポートにVLANを割り当てる】

(config-if)#switchport access vlan <vlan-id>

switchport modeで設定したモードと、実際の動作モードを確認

#show interfaces switchport

VLANと、VLANとポートのマッピングを確認

#show vlan

#show interfaces status

#show interfaces trunk

【インターフェイスのトランク設定を確認する】

show interfaces trunk

show interfaces swichport

Swich#show interfaces fastethernet 0/1 trunk enter

PortModeEncapsulationStatusNative vlan
Fa0/1‥①on‥②802.1q‥③trunking‥④1‥⑤
Port
Fa0/1		Vlans allowed on trunk‥⑥
1-4096
Port
Fa0/1		Vlan allowed and active in management domain‥⑦
1,10,20,30
Port
Fa0/1		Vlan in spanning tree forwarding state and not pruned‥⑧
1,10,20,30
  1. トランクポートとして動作しているポート名
  2. 設定しているスイッチポートのモード（固定のtrunkの場合「on」、accessの場合「off」
  3. トランクプロトコルのタイプ（DTPによって動的に選択された場合「n-802.1q」）
  4. 現在のトランク状況（非トランクの場合は「non trunking」）
  5. ネイティブVLAN
  6. トランクで許可されてるVLAN（デフォルトではすべてのVLANを許可）
  7. ⑥で表示されたVLANのうちアクティブなもの
  8. ⑦で表示されたVLANのうち、STPのフォワーディング状態でVTPプルーニングされたいないVLAN

【サブインターフェイスの作成】

Router(config)# interface gigabitethernet0/1.10
Router(config-subif)# encapsulation dot1q 10
Router(config-subif)# ip address 192.168.10.1 255.255.255.0

【トランクプロトコルとVLAN IDの指定】

(config-subif)#encapsulation dot1q <vlan-id> [ native ]

（ISLを使用する場合⇒escapsulation isl <vlan-id>

【サブインターフェイスにIPアドレスの割り当て】

(config-subif)#if address <ip-adress> <subnet-mask>

（ISLを使用する場合⇒escapsulation isl <vlan-id>

【トランクポートを通過できるVLANの変更】

(config-if)#switchport trunk allowed vlan [ add | remove | except ] [ VLAN番号 ]

add：許可、remove：拒否、except：指定したVLAN以外許可

【NextAuth】Credentials ProviderでシンプルなID/パスワード認証システム

Credentials Providerとは

Credentials Providerは、NextAuthで独自のユーザー名/パスワード認証を実装するためのプロバイダーです。

Credentials Provider の認証フロー ログインフォーム Credentials Provider (authorize関数) データベース 処理ステップ: 1. ユーザーがフォームに入力 – email – password 2. Credentials Providerが認証処理を実行 – 入力値のバリデーション – データベースでユーザー検索 – パスワードの照合 3. 認証結果 – 成功: JWTトークン生成＆セッション作成 – 失敗: エラーメッセージを返却

データベースの準備

DB準備し.envファイルを編集

データベース接続設定 (.env)

DATABASE_URL="mysql://ユーザー名:パスワード@ホスト:3306/データベース名"

今回はPrisma不使用

ORM (Object-Relational Mapping)

SQLを直接書くことなく、オブジェクトのメソッドでDB操作ができる
SQL文詳しくなくてもDB操作ができる

  1. PHP APIを作成した理由：
    • さくらインターネットのデータベースにアクセスするため
    • 外部からの直接接続ができないため、PHPを介してアクセス
  2. Prismaは：
    • データベースに直接接続する必要がある
    • さくらインターネットの制限により使用が難しい
    • PHP APIの作成はPrismaとは無関係

これからの進め方:

  1. PHP APIを使用してデータベース操作を行う
  2. Next.jsからそのAPIを呼び出す
  3. NextAuthの実装を進める
さくらインターネットのデータベースにさくらのWebサーバ以外からAPI経由でアクセスする方法

NextAuthの設定

NextAuthのインストール

npm install next-auth

認証APIルートの作成 (src/app/api/auth/[...nextauth]/route.ts)

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

const handler = NextAuth({
  providers: [
    CredentialsProvider({
      name: "Email & Password",
      credentials: {
        email: { 
          label: "メールアドレス", 
          type: "email",
          placeholder: "email@example.com"
        },
        password: { 
          label: "パスワード", 
          type: "password" 
        }
      },
      async authorize(credentials) {
        try {
          // PHP APIを呼び出してユーザー認証
          const res = await fetch("https://あなたのドメイン/auth-api.php", {
            method: 'POST',
            body: JSON.stringify({
              email: credentials?.email,
              password: credentials?.password
            }),
            headers: { "Content-Type": "application/json" }
          });

          const user = await res.json();

          if (user.success) {
            return {
              id: user.data.id,
              name: user.data.name,
              email: user.data.email
            }
          }
          return null;
          
        } catch (error) {
          console.error("Auth Error:", error);
          return null;
        }
      }
    })
  ],
//  pages: {
//    signIn: '/auth/signin',  // カスタムログインページのパス
//  }
});

export { handler as GET, handler as POST };

認証用のPHP API作成 (auth-api.php)

<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

// POSTデータの取得
$json = file_get_contents('php://input');
$data = json_decode($json, true);

// データベース接続情報
$host = 'xxxx';
$dbname = 'xxxx';
$user = 'xxxx';
$pass = 'xxxx';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);
    $stmt = $pdo->prepare('SELECT * FROM users WHERE email = ? AND password = ? LIMIT 1');
    $stmt->execute([$data['email'], $data['password']]);
    $user = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($user) {
        echo json_encode([
            'success' => true,
            'data' => [
                'id' => $user['id'],
                'email' => $user['email'],
                'name' => $user['name']
            ]
        ]);
    } else {
        echo json_encode([
            'success' => false,
            'error' => 'Invalid credentials'
        ]);
    }
} catch(PDOException $e) {
    echo json_encode([
        'success' => false,
        'error' => $e->getMessage()
    ]);
}
?>

特定のページのみを認証必須にする

認証状態を確認するためのミドルウェアを作成

src/middleware.tsを作成
import { withAuth } from "next-auth/middleware"

// 特定のパスのみ認証を必須にする
export default withAuth({
  // ここで指定したパスのみ認証が必要
  pages: {
    signIn: "/api/auth/signin",
  }
})

// 認証が必要なパスを指定
export const config = {
  matcher: ["/nextauth-demo/:path*"]
}

デモページの作成

src/app/nextauth-demo/page.tsx
'use client';
import { useSession, signOut } from "next-auth/react"  // signOutをインポート
import { redirect } from "next/navigation"

export default function ProtectedPage() {
  const { data: session, status } = useSession()

  if (status === "loading") {
    return <div>Loading...</div>
  }

  if (status === "unauthenticated") {
    redirect("/api/auth/signin")
  }

  // ログアウト処理の追加
  const handleLogout = async () => {
    await signOut({ 
      callbackUrl: '/nextauth-demo'  // ログアウト後のリダイレクト先
    })
  }

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">認証が必要なページ</h1>
      <p className="mb-4">ようこそ {session?.user?.email ?? 'ゲスト'} さん</p>
      
      {/* ログアウトボタン追加 */}
      <button 
        onClick={handleLogout}
        className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
      >
        ログアウト
      </button>
    </div>
  )
}
/nextauth-demo/layout.tsx を作成
'use client';

import { SessionProvider } from "next-auth/react";

export default function AuthLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <SessionProvider>
      {children}
    </SessionProvider>
  );
}
【Laravel】Sailを使用せずにDockerで開発、TinyMCEを使用したWeb回覧システム設計

XserverにそのままアップできるLaravelプロジェクトをローカルで開発する

Xserver上では原則「composer は使えない」

※Xserverは共用サーバー。つまり、root権限はないし、OSレベルで自由にツールをインストールすることもできない。

→ローカルで composer install を済ませて vendor/ をUPする、npm run buildも同様

そもそも開発環境について整理すると

composer（PHPのパッケージマネージャー）、npm（Node.jsのpm）を2つ使用します！

Laravel + Vite構成で開発してる場合、開発サーバーは実質2つになりますね

項目内容
ComposerはXserverで使える？❌ ローカルで完了させて vendor/ をアップ
npm run build は必要？✅ public/build/ に出力してアップ必須
artisanコマンドはXserverで？❌ 基本ローカルで済ませておく
public_html/ の中身は？index.php, .htaccess, build/, css/, etc
Laravel本体はどこに？public_html/ の外に laravel_project/ として設置

Dockerコンテナ作成手順（Sailでない）

Laravel Sailは、LaravelをDockerで簡単に構築できるツールで便利ですが、今回はローカルでのみcomposerを使用するので、本番でcomposerコマンドを使用しない想定なので使用しません、、

docker-compose.yml

laravel-xserver-dev/
├── docker/
│   ├── php/
│   │   └── Dockerfile
│   └── mysql/
├── docker-compose.yml
├── .env
└── laravel/        ← Laravel本体（後で Composer で生成）
services:
  app:
    build:
      context: .
      dockerfile: docker/php/Dockerfile
    container_name: laravel-app
    volumes:
      - ./laravel:/var/www
    ports:
      - "8000:8000"
    depends_on:
      - db
    working_dir: /var/www

  db:
    image: mysql:8.0
    container_name: laravel-db
    restart: unless-stopped
    environment:
      MYSQL_DATABASE: laravel
      MYSQL_ROOT_PASSWORD: secret
      MYSQL_USER: laravel
      MYSQL_PASSWORD: secret
    ports:
      - "3306:3306"
    volumes:
      - dbdata:/var/lib/mysql

volumes:
  dbdata:

Dockerfile

FROM php:8.2-fpm

RUN apt-get update && apt-get install -y \
    git curl zip unzip libonig-dev libxml2-dev \
    && docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath

# Composer install
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

WORKDIR /var/www

Laravelをインストール（コンテナ内で）

docker compose up -d
docker compose exec app bash
# コンテナ内で以下を実行
composer create-project laravel/laravel .
exit

結構時間かかります

タイムアウトしてしまったらcomposer config –global process-timeout 900

コンテナ内でLaravelがHTTPサーバーを立てる
→ホスト側（ブラウザ）から http://localhost:8000 でアクセス可能になる。

docker compose exec app php artisan serve --host=0.0.0.0 --port=8000
サーバを 0.0.0.0 にバインド（全てのインターフェースでListen）にしておく

Laravelの開発サーバはデフォルトで 127.0.0.1:8000（localhost）（ループバック）で起動ます

そしてコンテナ内部のネットワークのため

php artisan serveのみだとホストからアクセスできず、「–host=0.0.0.0 –port=8000」が必要です

（全てのインターフェースでListen→ポートをマッピング）

※Laravelは、起動時に環境変数を読み込んで設定クラスにバインドします

どの.env？

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=laravel
DB_PASSWORD=secret
.env のキー反映される場所
APP_ENVconfig/app.php の 'env' => env('APP_ENV')
APP_DEBUGconfig/app.php の 'debug' => env('APP_DEBUG')
DB_*config/database.php で使用される
MAIL_*config/mail.php で使用される

マウントの設定を修正し、スピードパフォーマンスを改善

原因はvendorとstorageがDocker環境でファイルI/O（Input/Output）が極端に遅くなるから

Laravelは、リクエストごとに以下を行う：

  • vendor/autoload.php からオートロード
  • .env を読んで構成
  • storage/logs/ にログ書き込み
  • cache/, sessions/, views/ を操作

つまり、毎回100回以上ディスクアクセスしてる。
そのたびに「ホストマシンとコンテナ間のファイルシステム同期」が発生してたら、そりゃ爆遅に

DockerでLaravelが重すぎたのでvendorとstorageをマウントしないことで解決した気がする
https://qiita.com/ryo_one/items/cced7c7b6e21527ad81e

名前付きボリューム初期化手順

毎回同期をしない名前付きボリュームを導入すればOK

「バインドマウント」と「ボリュームマウント」については下記の記事参考に

Dockerのマウントについて
https://zenn.dev/randd_inc/articles/84ac7de7f22800

docker-compose.ymlに名前付きボリュームの設定を追記

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: laravel-app-fast
    volumes:
      - ./laravel:/var/www
      
      - storage-volume:/var/www/html/storage/framework
      - vendor-volume:/var/www/html/vendor
    ports:
      - "8000:8000"

    ...


volumes:
  dbdata:
  storage-volume:
  vendor-volume:

コンテナとVolumeを含めて完全再起動（vendor-volがマウントされる）

docker-compose down -v
docker-compose up -d

vendorが空になるので、Volume上に再構築

docker-compose exec app composer install

   INFO  Discovering packages.

  laravel/pail ................................................................................................................... DONE
  laravel/sail ................................................................................................................... DONE
  laravel/tinker ................................................................................................................. DONE
  nesbot/carbon .................................................................................................................. DONE
  nunomaduro/collision ........................................................................................................... DONE
  nunomaduro/termwind ............................................................................................................ DONE

79 packages you are using are looking for funding.
Use the composer fund command to find out more!


# Laravelのキャッシュ・権限系を整える
docker-compose exec app php artisan config:clear
docker-compose exec app chmod -R 777 storage bootstrap/cache

# アクセス確認（localhost:8000）
docker-compose exec app php artisan serve --host=0.0.0.0 --port=8000

名前付きボリュームが正しく設定されているか確認

docker-compose exec app ls /var/www/html/
storage  vendor

docker-compose exec app mount | grep /var/www/html/vendor
/dev/sde on /var/www/html/vendor type ext4 (rw,relatime)

/dev/sde はDockerの内部（ext4）のボリューム領域です、つまりホストにマウント（同期）していないことが分かります

Named Volumeは、Dockerが管理する永続的なデータ保存領域

項目Bind MountNamed Volume
書き方./laravel:/var/wwwvendor-volume:/var/www/vendor
保存場所ホストのフォルダDocker内部領域
速度遅い（特にWindows/Mac）高速
ホストからアクセス可能不可
永続性ホストファイルに依存コンテナ削除後も残る
リアルタイム同期ありなし

Breeze インストール時の補足

Breeze 導入は コンテナ内で実行（composer require laravel/breeze --dev）

resources/, routes/, app/Http/Controllers/Auth/ などはホストから見える

vendor/ 内のコードは見えないが、触る必要がないので問題なし

本番アップロード前

docker-compose.ymlのバインドマウントに切り替える

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: laravel-app-fast
    volumes:
      - ./laravel:/var/www

      # 開発用（volume）
      # - vendor-volume:/var/www/vendor
      # - storage-volume:/var/www/storage/framework

      # デプロイ用（bind mount）
      - ./laravel/vendor:/var/www/vendor
      - ./laravel/storage/framework:/var/www/storage/framework

FTPでxservernのサブディレクトリにデプロイする場合、本番サーバーでもローカルと同じ構成にするのが、ベストプラクティス

vendor/ は 1万ファイル以上あるからFTPクライアント（WinSCPやFileZilla）でアップするのに時間かかります。

Xserver/public_html/
└── laravel-xserver/
    ├── app/
    ├── public/（中身あり）
    ├── .env
    ├── index.php      ← public/index.phpを書換コピペ
    ├── .htaccess      ← public/.htaccessをコピー
    └── ... その他Laravel一式
  • public/index.php → laravel-xserver/index.php にコピーして、以下のように修正：
require __DIR__.'/vendor/autoload.php';
$app = require_once __DIR__.'/bootstrap/app.php';
  • public/.htaccess → laravel-xserver/.htaccess にそのままコピー

環境変数を編集してデプロイ

ローカルと本番のDBは「違って当然」、だからマイグレーションで定義する。

XserverはMySQLをサービスとして提供している

┌─────────────┐           ┌────────────┐
│ ローカルPC  │           │   Xserver  │
│ Docker(MySQL)│          │  MySQL提供  │
│ Laravel dev │           │ Laravel prod │
└────┬────────┘           └────┬───────┘
     │ DB接続 → localhost       │ DB接続 → mysql1234.xserver.jp
     │                         │
     │ migrate                 │ 手動インポート（phpMyAdmin）
     ▼                         ▼
  OK                          OK
内容ローカル本番
DBサーバーDockerで構築したMySQLXserverのMySQL（管理画面で作成）
接続情報.env に DB_HOST=127.0.0.1.env に DB_HOST=mysql1234.xserver.jp
DB中身（データ）開発用のサンプル／テストデータ本番の実データ
DB構造（テーブル定義）Laravelのマイグレーションで定義する← 同じマイグレーションで生成される

構造（スキーマ）をマイグレーションで共通化し、
中身（データ）は環境に応じて分ける

https://github.com/idw-coder/laravel-xserver

XserverでMySQLデータベースのデータ構造を反映する手段

  • SSH接続でphp artisan migrate
  • phpMyAdminでインポート

phpMyAdminでインポート方法

レンタルサーバーではDB接続はSSHでなくphpMyAdminからインポートはあり

むしろXserverのような共有ホスティングでは、SSHやCLIよりphpMyAdminの方が標準手段。

ローカルMySQLコンテナから .sql ファイルをエクスポートする

ローカルDBをダンプ

docker exec [DBコンテナ名] mysqldump -u root -p laravel > /tmp/laravel.sql

コンテナからホストにコピー

docker cp laravel-db:/tmp/backup.sql ./backup.sql

xserverレンタルサーバーコントロールパネル画面から「phpMyAdmin」を開き上記で生成したファイルをインポート

レンタルサーバーにssh接続してphp artisan migrate

client_loop: send disconnect: Connection reset
PS C:\Users\user\.ssh> ssh server
Last login: Wed Jun 25 06:38:32 2025 from 192.168.1.100
[user@server ~]$ cd mysite.com/public_html/laravel-app/
[user@server laravel-app]$ php8.3 artisan migrate
APPLICATION IN PRODUCTION.
Are you sure you want to run this command?
Yes
INFO
Running migrations.
2025_06_24_093122_add_qualification_and_role_to_users_table
.....................................................................
100.27ms
DONE
【Laravel】Laravelの主な認証方法

laravel Breeze

前提条件

  • Dockerでローカル開発し、xserver（レンタルサーバー）にデプロイしてます
  • composer が使える（Xserver本番環境は使えない、ローカルでやる）
  • npm が使える（ローカルでフロントビルド用）
  • .env に DB 接続ができている（マイグレーションで users テーブルが作られる）

Breeze インストール

Laravel Breezeパッケージがプロジェクトの開発依存関係（dev-dependencies）としてインストールされます

composer require laravel/breeze --dev

インストール後は以下のコマンドを実行して認証システムをセットアップします

php artisan breeze:install
root@dc586cadb708:/var/www# php artisan breeze:install Which Breeze stack would you like to install? ● Blade with Alpine ○ Livewire (Volt Class API) with Alpine ○ Livewire (Volt Functional API) with Alpine ○ React with Inertia ○ Vue with Inertia ○ API only

● Blade with Alpineを選択

選択肢内容
Blade with Alpine最もシンプルな構成。Laravel標準のBladeテンプレート + Alpine.js（軽量JS）
Livewire（Volt API）フロントのリアクティブ処理をPHPだけで書ける魔改造スタック。SPA風味
React/Vue with InertiaガチのSPA構成。React/VueとLaravelの融合
API only認証付きAPI構成（SPAやモバイル用）
Which testing framework do you prefer? ● Pest ○ PHPUnit

今度はテストフレームワークの選択

● Pestを選択

項目PestPHPUnit
記述の簡潔さ✅ 圧倒的に短くて読みやすい❌ 冗長なクラス宣言が必須
学習コスト✅ 初心者でも感覚的に書ける⛔ 「setUp()」だの「TestCase」だの面倒
Laravel公式推し✅ Breezeのデフォルト選択✅ 同じくサポートされてるが古い

npmビルドはホスト側で（Dockerコンテナ内ではなく）

Node.js入りDockerは構成が複雑になりすぎる

Breezeは「npmビルドさえ済めば」それでOK

cd \laravel-xserver-dev\laravel
npm install --save-dev vite
npm run build

xserver デプロイ用にパスを修正する

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    base: '/laravel-xserver/build/', // xserverデプロイ時の構成に合わせて設定
});

今度はDockerコンテナ内で

php artisan migrate

http://localhost:8000/registerにアクセスで認証画面の確認OK

Name Email Password Confirm Password Already registered? REGISTER

現状の整理

laravel/
├── app/
│   ├── Http/
│   │   ├── Controllers/
│   │   │   ├── Auth/         ← Breezeの認証系コントローラ
│   │   │   └── Controller.php
├── database/
│   ├── migrations/           ← users, sessionsなどが定義されてる
├── resources/
│   ├── views/
│   │   ├── auth/             ← login, registerなど
│   │   ├── layouts/          ← app.blade.php 等のレイアウト
├── routes/
│   ├── web.php               ← Breezeが登録ルート追加済
├── public/
│   ├── build/                ← npm run build で生成されたフロントJS
breezeDirダウンロード
breezeダウンロード

laravel\app\Http\Requests\Auth\LoginRequest.php

メールアドレスではなくIDで認証できるように変更（Breeze）

ログイン機能をadmin_idを使用するように変更し、関連するバリデーションとエラーメッセージを更新。ユーザーモデルにadmin_idでユーザーを検索するメソッドを追加。ユーザー一覧ビューを改善し、テーブルにadmin_idを表示。ログインフォームのラベルと入力フィールドを更新。
https://github.com/idw-coder/laravel-xserver/commit/e00b58546117998e2cf6096fc89fb55817d54866

https://www.asobou.co.jp/blog/web/laravel-breeze-2

ユーザー新規作成をログインしている特定の権限のユーザーのみに公開

npm run buildでフロントのビルド後xserverのサブディレクトリにデプロイしたら表示崩れ、、

原因①「Laravelアプリを本番でサブディレクトリ配下にデプロイする」とローカルとディレクトリ構成がズレる→パスがおかしくなる

結局、臨時処置ですが、public配下のbuildディレクトリをコピーし、publicディレクトリと同配下に複製しました。

具体的には私はxserverのサブディレクトリにデプロイしたのですが、以下の通りです

local

/project-dir/
 ┣ docker
 ┣ laravel
 ┃  ┣ public
 　 ┃    ┣ build
 　 ┃    ┃  ┣ assets
 　 ┃    ┃  ┃  ┣ app-xx.js     ※デプロイしたら移動
 　 ┃    ┃  ┃  ┣ app-xx.css    ※デプロイしたら移動
 　 ┃    ┃  ┗ manifest.json
 　 ┃    ┃
 　 ┃    ┣ js

xserver

/your-domain.com/public_html/laravel-dir/
 ┣ public 
 ┃  ┣ js
 ┃  ┣ build
 ┃  ┃  ┗ manifest.json
 ┃
 ┣ build            ※public配下とは別で作成
 ┃  ┗ assets        ※public配下から移動
 ┃    ┣ app-xx.js
 ┃    ┗ app-xx.css
 ┃

表示はくずれなくなりました。

原因②Laravel はまだ「開発モード」と判断した状態でviteでbuildしてしまった場合

<script type="module" src="http://[::1]:5173/@vite/client"></script>
<link rel="stylesheet" href="http://[::1]:5173/resources/css/app.css">
<script type="module" src="http://[::1]:5173/resources/js/app.js">

上記のように検証画面でソースコードみると、Vite Dev Server（http://[::1]:5173）を使おうとしているパスのままであればVite の開発モードの挙動です

.env（ローカルでビルドしてるからローカルの.env）を修正したらどうだろう、、

# APP_DEBUG=true
APP_DEBUG=false
APP_URL=http://localhost:8000 # @vite() とは無関係
# APP_ENV=local
APP_ENV=production

でもかわらず、、

npm run build で埋め込まれる URL（例：http://[::1]:5173）は、Laravel の .env じゃなくて Vite 側の環境変数定義から来てる。

つまり

✅ APP_ENV=production とか Laravel 側にいくら書いても、
❌ Vite 側には 伝わらない。

そもそも@vite()の仕様を確認すると（下記resources\views\welcome.blade.php）

<!-- Styles / Scripts -->
@if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
@vite(['resources/css/app.css', 'resources/js/app.js'])
@else

アセットバンドル（Vite）
https://laravel.com/docs/12.x/vite

Laravel Viteでフロントと管理画面のビルドを分ける方法
https://www.webopixel.net/php/1796.html

そもそもローカルでnpm run build → FTPでデプロイがまずいのか、、本番でbuildしないといけないのか、、

あきらめかけていたとこに原因判明「hot ファイル」

🔥 hot ファイルとは？
npm run dev（開発モード）を実行したときに public/hot が作成されます。

Laravel は public/hot が存在すると manifest.json を無視して localhost:5173 を参照します。

$ ls -l public
合計 12
drwx---r-x 3 jingtian members  53  6月 13 06:27 build
-rw----r-- 1 jingtian members   0  5月 27 02:17 favicon.ico
-rw----r-- 1 jingtian members  17  6月 21 08:42 hot
-rw----r-- 1 jingtian members 543  5月 27 02:17 index.php
drwx---r-x 3 jingtian members  29  6月 18 21:21 js
-rw----r-- 1 jingtian members  24  5月 27 02:17 robots.txt
drwx---r-x 2 jingtian members 290  6月 25 06:27 uploads

rm public/hot

ユーザー一覧画面を作成（練習）

https://github.com/idw-coder/laravel-xserver/blob/dev_breeze/laravel/resources/views/users/index.blade.php

Undefined variable $slot

上記エラー発生

{{ $slot }} を使おうとしているにも関わらず、その変数が定義されていないことが原因

こちらおそらくlaravel Breezeをインストールした際、自動生成された下記コンポーネント

<!-- resources/views/components/app-layout.blade.php -->
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- CSS読み込み -->
</head>
<body>
    <div class="min-h-screen bg-gray-100">
        <!-- ナビゲーション -->
        @include('layouts.navigation')
        
        <!-- ページヘッダー -->
        @if (isset($header))
            <header class="bg-white shadow">
                <div class="max-w-7xl mx-auto py-6 px-4">
                    {{ $header }} <!-- 名前付きスロット -->
                </div>
            </header>
        @endif
        
        <!-- メインコンテンツ -->
        <main>
            {{ $slot }} <!-- メインのコンテンツエリア -->
        </main>
    </div>
</body>
</html>

上記に合わせて形でlaravel/resources/views/users/index.blade.phpを修正でエラー解消

そもそも$slotってなに？

$slot：コンポーネントタグの開始タグと終了タグの間に書かれた内容を受け取る変数

項目従来の方法Bladeコンポーネント
主な機能@yield / @section$slot
ファイル名layouts/app.blade.phpcomponents/app-layout.blade.php
使用方法@extends(‘layouts.app’)<x-app-layout>
内容の渡し方@section(‘content’)タグの中に直接記述
導入時期Laravel初期からLaravel 7以降

Breezeをインストールすると、新しい方式のBladeコンポーネントが使われるため、$slotを見かけるようになります。これは正常な動作で、現在のLaravelで推奨されている方法です。

LaravelのBreezeを使った時にパスワードをリセットする方法

posts テーブルの作成

新しいマイグレーションファイルが生成されます

php artisan make:migration create_posts_table --create=posts

Enum = Enumeration（列挙型）で管理

Enum = 選択肢を限定する仕組み

  • 従来： 文字列なので何でも入る → バグの原因
  • Enum： 決められた値だけ → 安全

つまり、「決められたルールの中でしか選べない」ようにして、プログラムをより安全にする技術です！

Laravel Enum完全ガイド

https://github.com/idw-coder/laravel-xserver/blob/add_post/laravel_enum_guide.md

マイグレーション実行

php artisan migrate:status で現在の状況を確認
php artisan migrate

Tinkerを使ってテストデータを作成

php artisan tinker
  1. 必要なクラスを読み込み
>>> use App\Models\{User, Post};
>>> use App\Enums\PostStatus;
  1. ユーザーのIDを確認
>>> User::count()
>>> $user = User::first();
>>> $user
  1. 投稿データを作成
>>> Post::create([
...   'user_id' => $user->id,
...   'title' => 'はじめての投稿',
...   'slug' => 'first-post',
...   'body' => 'これは最初のテスト投稿です。',
...   'status' => PostStatus::DRAFT
... ]);
  1. 作成されたか確認
>>> Post::count()
>>> Post::first()

本番環境にPOSTのデータ構造を反映する

xserverにssh接続してmigrateする場合

もしphp コマンドのバージョンエラーが起きたら下記記事を参考に

【Xserver】エックスサーバーにssh接続、PHPバージョン変更方法
[username@sv12345 laravel-xserver]$ php8.3 artisan migrate

   INFO  Running migrations.  

  2025_06_14_074533_create_posts_table .............. 87.84ms DONE

php my adminでも確認できました。

表示 構造 SQL 検索 挿入 エクスポート インポート 操作 トリガ テーブルの構造 リレーションビュー # 名前 タイプ 照合順序 属性 Null デフォルト値 コメント その他 操作 1 id 🔑 bigint(20) UNSIGNED いいえ なし AUTO_INCREMENT ✏️ 変更 ❌ 削除 2 user_id 🔑 bigint(20) UNSIGNED いいえ なし ✏️ 変更 ❌ 削除 3 title varchar(255) utf8mb4_unicode_ci いいえ なし ✏️ 変更 ❌ 削除 4 slug 🔑 varchar(255) utf8mb4_unicode_ci いいえ なし ✏️ 変更 ❌ 削除 5 excerpt text utf8mb4_unicode_ci はい NULL ✏️ 変更 ❌ 削除 6 body longtext utf8mb4_unicode_ci いいえ なし ✏️ 変更 ❌ 削除 7 status 🔑 enum(‘draft’,’published’,’archived’) utf8mb4_unicode_ci いいえ draft ✏️ 変更 ❌ 削除 8 published_at 🔑 timestamp はい NULL ✏️ 変更 ❌ 削除 9 created_at timestamp はい NULL ✏️ 変更 ❌ 削除 10 updated_at timestamp はい NULL ✏️ 変更 ❌ 削除 11 deleted_at timestamp はい NULL ✏️ 変更 ❌ 削除 ↑ すべてチェックする 表示 変更 削除 主 ユニーク インデックス 空間 全文

User → Post (HasMany)で既存のUserテーブルと関連づけ、詳細は下記のPDFリンクから👇

https://github.com/idw-coder/laravel-xserver/blob/add_post/blog_erd.md

PostControllerを作成

php artisan make:controller PostController --resource

LaravelにWYSIWYGを実装

WYSIWYGのメリデメ

  • ユーザーにとって使いやすい（リンク、見出し、画像アップ）
  • 実装が難しい（JSライブラリ + Upload + XSS対策）
  • 要サニタイズ処理必須（XSSの温床）
  • 簡単に実装できるのはMarkdown

TinyMCE

TinyMCEは「WYSIWYGエディタの具体的な製品・ライブラリの名前」

https://www.tiny.cloud

TinyMCE 無料 (Cloud) プランの制限

無料枠では月間 1,000 エディタ読み込み（editor load）まで。それを超えるとエディタが読み込み専用モードになり、閲覧はできても編集不可になる

100ユーザーが各10ページでTinyMCEを起動すれば、100 × 10 = 1000

方法概要
Self-hostedCDN 経由ではなく、自前サーバや public/static に TinyMCE スクリプトを置けば、読み込み回数に制限なし(tiny.cloud)。
有料プランへ移行5,000 loads/月の Essential ($79/月)、20,000 loads/月の Professional などから選べる（超過分も課金）。

動作確認手順

  1. npm install fs-extra
  2. npm run dev（またはnpm run build）
  3. public/js/tinymce/にコピーされているか確認

ローカル、グローバルIPアドレスの違いと確認手順

ローカルIPアドレスとグローバルIPアドレスの違い

インターネットに接続したことがある人なら、「IPアドレス」という言葉を目にしたことがあるでしょう。しかし、ローカルIPとグローバルIPの違いは何なのか、そしてどうやって確認するのかわからない人も多いでしょう。ここでは、その違いと確認方法を分かりやすく解説します。

ローカルIPアドレス

  • あなたのネットワーク内で一意に認識されるためのアドレスです。
  • Wi-Fiやモバイルルーターのネットワークで使用されます。
  • たとえば「192.168.xxx.xxx」や「10.xxx.xxx.xxx」といった形式をしています。
  • インターネットの外側からは認識されません。

ローカルIPアドレスの確認方法

  1. 「コマンドプロンプト」を開く
    • 「Windowsキー」を押しながら「R」を押し、「run」ダイアログを開き「cmd」を打ち込んで「OK」をクリック
  2. 「ipconfig」を入力
    • 出力された情報の中から「IPv4 Address」を探します。

グローバルIPアドレス

  • インターネットの外側にあなたを特定するためのアドレスです。
  • プロバイダの構築者やISPにより配分されます。
  • たとえば「203.0.113.xxx」のようなフォーマットをしています。
  • インターネット全体で一意に認識されるユニークなアドレスです。

グローバルIPアドレスの確認方法

  1. ラウザを開き、下記のようなサイトを利用
  2. 「What is my IP」と検索
    • Googleや他の検索エンジンで、上記のようなキーワードを打ち込むだけで、接続先のグローバルIPを表示してくれます。

IPアドレス

IPv4においてIPアドレスアドレスは32ビット持ち、ネットワークを表すネットワーク部と個々のノードを表すホスト部で構成される。

ネットワーク部とホスト部

IPアドレスのクラス

ネットワーク部とホスト部の分け方のパターンクラスといいます。A、B、Cが一般的なネットワークで用いられるクラスです。Dがマルチキャストで使用されるクラス、Eが実験用に予約されたクラスです。

クラスを識別するために第1オクテット先頭値はクラスごとに決められた固定値が設定さてれます。

クラスBネットワークで使用可能なサブネットマスク

サブネットマスクサブネットマスク の長さ(ビット数)サブネット数サブネット当たり のホスト数
255.255.255.2523016,3822
255.255.255.248298,1906
255.255.255.240284,09414
255.255.255.224272,04630
255.255.255.192261,02262
255.255.255.12825510126
255.255.255.024254254
255.255.254.023126510
255.255.252.022621,022
255.255.248.021302,046
255.255.240.020144,094
255.255.224.01968,190
255.255.192.018216,382

クラスCネットワークで使用可能なサブネットマスク

サブネットマスクサブネットマスク の長さ(ビット数)サブネット数サブネット当たり のホスト数
255.255.255.25230622
255.255.255.24829306
255.255.255.240281414
255.255.255.22427630
255.255.255.19226262

サブネットマスク

サブネットマスクはIPアドレスと同じ32ビットの数値で、ネットワーク部は「1」、ホスト部は「0」で示します。

サブネットを用いてネットワーク部が決定されるアドレスはクラスレスアドレスと呼ばれます。
クラスフルアドレスはネットワーク部とホスト部を8ビット毎に分解したものです。

CIDR表記またはプレフィックス長表記

マイクロセグメンテーション

コリジョンドメインを分割化、セグメントの最小化

予約済みIPアドレス

  • ネットワークアドレス‥そのネットワーク自体を表す
  • ブロードキャストアドレス‥ブロードキャストする際に使用されるアドレス
  • ループバックアドレス‥自分自身を表す仮想的なアドレス。（127〜）
  • リンクローカルアドレス‥DHCPが機能せずIPアドレスが付与されなかった際、仮に割り当てられるアドレス。
  • マルチキャストアドレス…特定のグループを指定するアドレス。（224.0.0.0 ～ 239.255.255.255）

グローバルIPアドレス

IANA（ICANN）が管理する、インターネットに接続する機器が使用できるIPアドレスです。

  • グローバルアドレスを使用するにはISP（Internet Service Provider）との契約が必要
  • 自由に割り当てることができない

プライベートIPアドレス

プライベートIPアドレスとは、組織内のネットワーク（プライベートネットワーク）でのみ使用できるIPアドレスです。

プライベートIPアドレスの範囲はRFC1918によってクラスごとに定義されています。

CIDR

CIDR(Classless Inter-Domain Routing)は、クラスに縛られずIPアドレスのネットワーク部・ホスト部の桁数を自由に決めることができるようにした仕組みです。

WordPressで画像を拡大表示するなら「Firelight Lightbox」（旧名：Easy Fancybox）

ワードプレスのプラグイン「Easy FancyBox」について

ワードプレスのサイトで「画像をクリックしたら拡大表示」させたいなら、Easy FancyBoxというプラグインがおすすめです。この記事では、サイトのビジュアル効果を抜群に高めるEasy FancyBoxの特徴、インストール方法、使い方などを紹介します。

実際に見てみる方が早いでしょう。下の画像をクリックしてみてください。
こちらの画像をクリックすると、拡大表示されます。

Easy FancyBoxの特徴

特徴①：画像のポップアップ表示

Easy FancyBoxは、画像のポップアップ表示を簡単に実現できるプラグインです。

画像をクリックするだけでなく、マウスオーバーすることでも表示されるため、ユーザーにとってより使いやすい機能となっています。

画面の中央に拡大表示され、背景が暗くなることで、画像をより鮮明に見せるだけでなく、サイトのデザイン性も向上させます。また、様々なカスタマイズオプションもあり、ユーザーが自分のサイトに合わせて設定できるため、高い自由度を持っています。

さらに、Easy FancyBoxは、画像だけでなく、YouTubeやVimeoなどの動画のポップアップ表示にも対応しているため、より多様なコンテンツを扱うサイトにも最適です。

特徴②：ビデオやオーディオのサポート

Easy FancyBoxは、画像のほかに、YouTube、VimeoやSoundCloudなど、動画や音声の埋め込みにも対応しています。これにより、サイト訪問者はコンテンツをより身近に感じ、情報をより多角的に理解することができます。

また、Easy FancyBoxの使い方も簡単なため、初心者でもストレスなく使いこなすことができます。さらに、多彩なカスタマイズオプションも用意されており、自分のサイトのデザインに合わせてカスタマイズすることができます。これにより、サイト訪問者はより快適な閲覧体験を得ることができます。

特徴③：iFrameの対応

iFrameコンテンツをポップアップで表示することも可能です。

この機能は、外部サイトのコンテンツをスムーズに表示できるだけでなく、サイト内でのナビゲーションが容易になります。 また、iFrameを使用することで、サイト内でのユーザーエクスペリエンスを向上させることができます。

例えば、iFrameを使用して、インタラクティブなコンテンツをサイトに組み込むことができます。さらに、iFrameを使用して、外部サイトから収集したデータをサイト内で表示することもできます。 iFrameは、ウェブサイトの機能性を向上させるための重要なツールであり、ぜひ活用してください。

Easy FancyBoxのインストールと設定方法

インストール

  1. WordPressの管理画面にログインし、​「プラグイン」→「新規追加」を選択します。​
  2. 検索欄に「Easy FancyBox」と入力し、​検索します。​
  3. 表示されたEasy FancyBoxのプラグインを「今すぐインストール」します。​
  4. インストールが完了したら、​「有効化」ボタンを押下します。​

以上で、​Easy FancyBoxのインストールは完了です。​基本的にインストール・​有効化したら設定は不要で、​ブロック挿入時にリンク先をメディアファイルに設定するだけです。

https://ja.wordpress.org/plugins/easy-fancybox/

①画像の利用方法

Easy FancyBoxを使って画像のポップアップ表示を行うには、次の方法があります。

  1. 画像を投稿に挿入し、「リンク先」の設定で「メディアファイル」を選択します。
  2. 画像のHTMLタグに**rel=”lightbox”**属性を追加します。

これで、画像がEasy FancyBoxのポップアップで表示されるようになります。

拡大したい画像のリンク先がメディアファイルになっているか確認します。

②動画やオーディオの埋め込み方法

動画やオーディオの埋め込みは、以下の手順で行います。

  1. 動画サイトから埋め込み用のコードをコピーします。
  2. コードに「class=”fancybox”」属性を追加し、投稿に貼り付けます。

これで、動画やオーディオがEasy FancyBoxでポップアップ表示されます。

③iFrameコンテンツの使用方法

iFrameコンテンツをEasy FancyBoxで表示するには、iFrameタグに「class=”fancybox-iframe”」属性を追加し、投稿に貼り付けます。

これで、iFrameコンテンツがポップアップ表示されるようになります。

※Easy FancyBoxが他のプラグインとの競合が疑われる場合、一時的に他のプラグインを無効化して機能するか確認してください。競合が確認された場合は、プラグインの設定を調整するか、代替のプラグインを検討してください。

設定の変更

設定画面で、​表示の寸法や操作形式などについての設定を行います。​主な設定項目は、​以下の通りです。​

  • Media: 拡大表示したいファイルタイプの選択
  • Overlay: 画像の背景の透明度と色設定
  • Window: 画像周辺の設定項目
  • Miscellaneous: 画像読み込みに関わる設定
  • Images: 有効化する画像とスライドショー機能の設定
  • PDF: 拡大表示するPDFのサイズ、枠線、タイトル設定
  • YouTube: 拡大表示するYouTube動画のサイズ、枠線、タイトル設定

Easy FancyBoxのオプションのカスタマイズ

Easy FancyBoxには、多くのカスタマイズオプションがあります。これにより、サイトに合わせたデザインを実現できます。例えば、以下のようなカスタマイズオプションがあります。

  • ポップアップの背景色
  • ポップアップの透明度
  • アニメーション速度
  • ポップアップのサイズ
  • ポップアップの位置
  • ポップアップのエフェクト
  • サムネイル画像のカスタマイズ
  • ポップアップのテキストカラー

これらのオプションを使用することで、サイトの雰囲気に合わせたポップアップを作成することができます。さらに、オプションの組み合わせによって、より多様なデザインを実現することができます。

FAQ（よくある質問）

Q1: Easy FancyBoxは無料で使えますか？

A1: はい、Easy FancyBoxは無料で利用できるプラグインです。

Q2: 他のポップアップ表示プラグインとの違いは何ですか？

A2: Easy FancyBoxは、シンプルで使いやすく、カスタマイズ性が高い点が他のプラグインとの違いです。また、画像だけでなく動画やオーディオ、iFrameコンテンツにも対応しています。

Q3: Easy FancyBoxはレスポンシブデザインに対応していますか？

A3: はい、Easy FancyBoxはレスポンシブデザインに対応しており、スマートフォンやタブレットなどのデバイスでも適切な表示がされます。

Q4: Easy FancyBoxのポップアップ表示速度を変更することはできますか？

A4: はい、Easy FancyBoxの設定画面から、ポップアップ表示速度を変更することができます。

Q5: Easy FancyBoxがうまく動作しない場合、どうすればいいですか？

A5: Easy FancyBoxがうまく動作しない場合、まず設定や属性の追加が正しく行われているか確認してください。それでも解決しない場合は、他のプラグインとの競合がないか確認し、必要に応じて設定の変更や代替のプラグインを検討してください。

参考サイト

https://jo-sys.net/easyfancybox/#index_id5
https://junpei-sugiyama.com/easy-fancybox/#st-toc-h-2
https://allbeginners.net/easy-fancybox/
https://webst8.com/blog/wordpress-easy-fancybox
https://magazine.techacademy.jp/magazine/6990
【CCNA】TCP/IP

TCP/IP

TCP/IPはプロトコルスタックの一種です。
OSI参照モデルよりも運用重視で、普及していきました。

TCPとIPという2つのプロトコルを中心に4つのレイヤで構成されています。

  • アプリケーション層…ネットワークアプリケーションに必要なサービスを定義
  • トランスポート層…アプリケーション層のプロトコルに信頼性のあるサービスを提供
  • インターネット層…エンドツーエンドのデバイス間でパケットを転送するためのサービスを提供
  • リンク層…同一の物理ネットワークの隣接ノードと通信を行うために必要なプロトコルを定義

PDU

データ＋ヘッダ（＋トレーラ）のおデータ単位をPDU（Protocol Data Unit）といい各層の呼び名がOSI参照モデルと少し異なります。

＜OSI参照モデルのPDU＞

＜TCP/IPのPDU＞

【TCPヘッダとUDPヘッダ】

  • トランスポート層ではTCPヘッダまだはUDPヘッダを付加してカプセル化します。
  • UDPにはないけど、TCPにはシーケンス番号、確認応答番号があります。

Eahernetフレーム

  • ブリアンブル（7バイト）
  • SFD（1バイト）
  • 宛先MACアドレス（6バイト）
  • 送信元MACアドレス（6バイト）
  • タイプ（6バイト）
  • IPヘッダ、データ等（46〜1500バイト）
  • トレーラ（FCS）（4バイト）
    …Frame Check Sequenceと呼ばれるエラー検出用のフィールド。FCSはCRC値を格納しています。

IP

  • IP（Internet Protocol）はインターネット層で中心的な役割を担うプロトコルです。
  • IPアドレス（論理アドレス）を使用してエンドツーエンドの通信を可能にします。
  • コネクションレス型‥送りっぱなし、届いたかどうかは関知しない
  • ベストエフォート型‥保証はしないが最善は尽くすという通信タイプ
  • データ回復機能なし‥データ破棄したら、再要求しない
  • 階層型アドレス方式…IPアドレスは、ネットワーク部とホスト部の2階層で構成する、階層型のアドレス方式になっています。

IPヘッダ（IPv4）

  • サービスタイプ‥パケットの送信優先度に応じた最適な通信を行うて目の仕組み
  • TTL（生存時間）‥ルータを中継できる回数
  • プロトコル‥上位のプロトコルを表す番号
  • ヘッダチェックサム‥送信時の情報が、受診時に壊れていないかチェックする

フラグメンテーションフラグメント処理

一度に伝送したいデータがMTU（エムティーユー / Maximum Transmission Unit）を超えた場合に、分割して送信することをフラグメント処理、フラグメンテーションといいます。

識別子、フラグ、フラグメントオフセットはフラグメント処理に関与しています。

IPアドレス

https://ntorelabo.com/2022/09/08/ip%e3%82%a2%e3%83%89%e3%83%ac%e3%82%b9/

IPv4においてIPアドレスアドレスは32ビット持ち、ネットワークを表すネットワーク部と個々のノードを表すホスト部で構成される。

IPアドレスのクラス

https://ntorelabo.com/2022/10/13/arp/

TCP

  • TCP（Transmission Control Protocol）はインターネットにおいて標準的に利用されているプロトコルです。
  • 3ハンドシェイクによるコネクション型（信頼性を高めるために送信元、宛先双方で状況を確認し合う）という通信方式です。
  • オーバーヘッドが大きい
  • ウィンドウサイズを利用したフロー制御
  • 同期通信（データが正しく受信されたかどうか確認しながらやりとりする通信）

３ウェイハンドシェイク

  • ACKによる到達確認
  • TCPコネクションはデータを送信し始める前に確立する

TCPヘッダ

送信データはセグメント（ヘッダーとデータ）という単位送信されます。

  • 送信元、宛先ポート番号（16）
  • シーケンス番号（32）
  • 確認応答番号（32）
  • データオフセット（4）、予約（6）、制御ビット（6）
  • ウィンドウサイズ（16）
  • チェックサム（16）
  • 緊急ポインタ（16）
  • オプション・パディング（可変）

シーケンス番号

送信元→返信に送信する、分割データが元データと比較してどの位置にあるかを示す番号。送信時に分割されたデータはこれを手がかりに再構成される。

確認応答番号（ACK番号）

宛先→送信元に送信する、次に受信したいデータのシーケンス番号を送信元に示す番号。送信元はこれを受け取ると、「直前までのデータの送信の成功」を理解する。

ウィンドウ制御

ウィンドウと呼ばれる送信可能なサイズ幅を管理しつつ、確認応答を待たずに次々とデータを送信する、送信側の機能。

フロー制御

高負荷で処理がもたつきバッファ（データを一時的に保存ができる領域）が溢れそうな時などにウィンドウサイズを調整することで受信料（送信側の送信量）をコントロールする受信側の機能。

輻輳制御

ウィンドウサイズ分一気に送ってしまうと受信側の状況によっては処理しきれえず輻輳（ネットワーク上の混雑）を起こしてしまう可能性があるため、輻輳が起きないよう慎重にデータを送信していく機能。

UDP

  • コネクションレス
  • ベストエフォート
  • UDPで扱うデータの単位はUDPデータグラムといわれます。

＜UDPヘッダ＞

  • 送信元、宛先ポート番号（16）
  • データ長（16）
  • チェックサム（16）

プロトコル

https://ntorelabo.com/2022/10/13/tcp-ip%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e5%b1%a4%e3%83%97%e3%83%ad%e3%83%88%e3%82%b3%e3%83%ab/
【CCNA】ルーティング基礎

ルーティング

ネットワーク層でL3（レイヤー3）スイッチ、ルータが経路情報を制御して、最適な経路を選択して転送することです。

  1. 非カプセル化をおこない、パケットを取り出す。
  2. ルーティングテーブルから、ネットワーク部が完全に一致しているエントリを探す。（ルーティングテーブルに載っていない宛先アドレスのパケットを受信した場合は、そのパケットを破棄します。）
  3. IPパケットをカプセル化する。
  4. ネクストホップと出力インターフェースに従ってパケットを転送する。
  • 宛先MACアドレスはARPで調べる。ARPテーブルに情報がば無ければARP要求を送信して問い合わせることになる。
  • 宛先MACアドレスや送信MACアドレスは、ルータを経由するたびに付け替えられる。

ルーティングテーブルの表示

show ip routing

宛先の指定方法説明
ホストルートホストルートとはそのアドレスを持つホストへの経路です
宛先アドレスにホストアドレスを指定しサブネットに255.255.255.255を利用します。
(config)#ip route 192.168.1.1 255.255.255.255 10.1.1.1
ネットワークルートネットワークルートとは、そのネットワークへの経路です。
宛先アドレスにネットワークアドレスを指定し、サブネットに255.255.255.0などを利用します。
(config)#ip route 192.168.1.0 255.255.255.0 10.1.1.1
デフォルトルートデフォルトルートとは、未知のネットワークにパケットを転送する際に使用する経路です。宛先アドレスに0.0.0.0を指定し、サブネットに0.0.0.0を使用します。
(config)#ip route 0.0.0.0 0.0.0.0 10.1.1.1

ロンゲストマッチ

ネットワークアドレスのプレフィックス長が最も長く一致しているルートに転送する（ロンゲストマッチ）

デフォルトルート

  • デフォルトルートは、ルーティングテーブルに登録されていないネットワーク宛のパケットを転送する際に使用します。
  • デフォルトルートを使用すると、ルーティングテーブルの情報量を少なくすることができます。
  • 手動での設定とプロトコルでの設定があります。
  • デフォルトルートは「Gateway of last resort is」にも表示されます。

【デフォルトルートの設定】
(config)#ip route0.0.0.0 0.0.0.0 {<next-hop> | <interface>} [<distance>] [permanent]
…スタティックルートの設定と同じで、宛先ネットワークとサブネットの両方に0.0.0.0 を指定します。

スタティックルート

スタティックルートとは管理者が手動で設定したルート情報です。ルータの負荷を最小限に抑え、セキュリティも強化されます。

(config)#ip route <address> <mask> { <interface> | <next-hop> } [<distance>] [permanent]

*distance…アドミニストレーティブディスタンス値
*AD値のデフォルトは「1」

直接接続
スタティックルート		出力インターフェイスのみ指定
IPアドレスで指定しない？
再帰
スタティックルート		ネクストホップアドレスのみ指定
完全指定
スタティックルート		出力インターフェイスとネクストホップ両方を指定

フローティングスタティックルート

フローティングスタティックルートとはスタティックルートをバックアップルートとして扱う手法です。
スタティックルートのアドミニストレーティブディスタンス値をメインルートより大きくし通常はメインルート、障害が発生した時にスタティックルートを使用します。

ダイナミックルーティング

ダイナミックルーティングの場合、障害が発生しても自動でルートを切り替え切り替えられます。スタティックルーティングよりも帯域やCPUに負担がかかります。

メトリック

同じ宛先ネットワークに対して複数のルートが存在する場合、各ルーティングプロトコルはルートごとにメトリックと呼ばれる数値を比較して最適ルートを決定します。

プロトコルメトリック説明
RIPv1、RIPv2ホップカウントルータから宛先ネットワークまでに経由するルータ数
OSPFコストインターフェイスの帯域幅から算出される値
コスト=基準帯域幅÷インターフェイスの帯域幅
EIGRP帯域幅
遅延		インターフェイスの帯域幅と遅延から算出される値
複合メトリック=（帯域幅＋遅延）×256

アドミニストレーティブディスタンス

宛先に対して複数の情報源がある場合、最も優先度の高いプロトコルからのルート情報だけをルーティングプロトコルに学習します。この優先度を決定するのが、アドミニストレーティブディスタンスです。

ルートの情報源デフォルトのAD値
直接接続0
スタティックルート1
EIGRP集約5
EBGP（外部BGP）20
EIGRP（内部）90
OSPF110
IS-IS 115
RIPv1、RIPv2120
EIFRP（外部）170
IBGP（内部BGP）200
不明
AD値が255の場合は到達不能		255

ルーティングプロトコルの分類

＜使用する場面による分類＞

自立システム

自立システム（AS：Autonomous System）は同じ運用ポリシーのもとで動作するネットワーク（ルータの集合）のこと

EGP（Exterior Gateway Protocol）…AS間で経路情報をやり取りするプロトコル
⇒BGP

IGP（Interior Gateway Protocol）…AS内で経路情報をやり取りするプロトコル
⇒RIP、OSPF、EIGRP

＜アルゴリズムによる分類＞

パスベクタ型

デフォルトでは経由するASが少ない経路をベストパスとして使用します。

BGPが該当します。

ディスタンスベクタ型

  • ティスタンス（距離）とベクトル（方向）をもとに、ベルマンフォード法（アルゴリズム）によって計算
  • ルーティングテーブル全体を直接接続されている隣接ルータに送信する。
    （定期的なルーティングアップデートも行われる）
  • 代表的なディスタンスベクタープロトコルは、RIP と IGRP です。
    （EIGRPはリンクステート型の特徴も取り入れており、拡張ディスタンスベクタ型といわれます。）
  • メトリックにはホップカウントを使用
スプリットホライズン

スプリットホライズンは、ディスタンスベクターによるネットワークで、情報 がやってきた方向に送り返すことを禁止することにより、不正なルーティング情報とル ーティングのオーバーヘッドを軽減します。

リンクステート型

各ルータはリンクステート（接続情報）からネットワークの全体像を把握しSPFアルゴリズム（ダイクストラのアルゴリズム）によって計算します。代表的なリンクステートプロトコルは、 OSPF です。

リンクステートプロトコルは、自身のリンクの状態を含む更新をネットワーク内に ある他の全てのルータに送信する。

コンバージェンスは早く、ルータへの負荷は大きい

  • スケーラブル…階層型設計
  • 最初にネイバー関係を確立
  • リンク情報を交換
  • SPFアルゴリズム
  • トポロジ全体を把握
  • イベントトリガーアップデート
  • コンバージェンス（収束）が高速

クラスフルルーティングプロトコルとクラスレスルーティングプロトコル

クラスフルルーティングプロトコル

  • ルーティングアップデートにサブネットマスク情報を含めない
  • VLSMや不連続サブネットをサポートできません。
  • RIPv1、IGRPなどがあります。

クラスレスルーティングプロトコル

  • サブネットマスク情報を含めるルーティングプロトコル
  • VLSMや不連続サブネットをサポートします。
  • RIPv2、OSPF、EIGRPなどがあります。

等コストロードバレンシング

Ciscoルータでは4つまでメトリックが最小のルートをルーティングテーブルに登録し、トラフィックを複数に分配する機能があります。この機能を等コストロードバランシングといいます。

異なるルーティングプロトコルで学習した経路を使ったロードバランシングは行わない

ルート集約

複数のルート情報を一つにまとめることをルート集約といいます。

ルーティングテーブルの検索にかかる負荷を軽減できます。

ルーティングアップデートのトラフィックを軽減できます。

コマンド構文

IPv6のルーティングの有効化

(config)#ipv6 unicast-routing

固定ページの新規追加方法

1.固定ページを新規追加する

固定ページ＞固定ページ一覧(新規追加でもOK)をクリックします。

2.タイトルや本文などブロックを入力する

下記のような編集画面が表示されます。大きく、メインのエディターエリアと上部ツールバー、右のツールバーがあります。

メインエリアではタイトルのほか、ブロック単位で文章や見出し、画像、などの各種ブロックを追加していくことができます。

繰り返し挿入したい箇所を選びブロックを追加していきます。

任意のブロックにカーソルを合わせると、（「ブロック」タグが選択されている状態の）右側メニューでそのブロックの設定ができます。

ページを公開する

ページを公開しても良い場合は、「公開」ボタンを押下して保存しましょう。ページが公開されて一般の人も閲覧できるようになります。

プレビューで確認することもできます。

メニューに固定ページを設定する

  1. 管理画面メニューの「外観」>「メニュー」
  2. 固定ページのエリアでヘッダーメニューに追加したい項目を選ぶ
  3. 「メニューに追加」を選択する
  4. ドラッグ&ドロップで追加項目の表示したい位置を決める
  5. 「メニューを保存」を選択する
WordPressの固定ページ編集方法

サイトのページを修正・管理するには固定ページを編集します。

【固定ページとは〜例】

  • トップページ
  • 会社概要
  • 採用（リクルートページ）
  • お問い合わせ
  • 利用規約・プライバシーポリシー
  • サイトマップなど

固定ページを編集する

WordPressの管理画面から、「固定ページ」＞「固定ページ一覧」を開きます。

編集したい記事にマウスカーソルを合わせると、「編集」が出てくるのでそれをクリックか、「記事のタイトル名」をクリックすると、編集画面を開くことができます。

「ブロックエディター」とは

ページの編集画面はブロックといわれる単位でコンテンツを作っていくブロックエディターが採用されています。

見出し・段落・箇条書きリスト・画像・動画など、さまざまな要素を組み合わせることができます。このような個別のコンテンツ要素を「ブロック」単位で管理できるのが、ブロックエディタの特徴です。

ブロックエディタの画面は、以下のエリアから構成されています。

①ツールバーブロックの新規追加、元に戻す／やり直す、文書構造の確認など
②保存／公開、オプション下書き保存、公開、オプション設定など
③コンテンツ編集メインコンテンツの編集エリア
④ブロックツールバーブロックごとの各種設定
⑤パネル記事全体／ブロックごとの各種設定
⑥パンくずリスト編集／選択中のブロックの位置を階層で表示

新しくブロックを追加する

プラスをクリックして追加したいブロックを選びます。

ブロックを編集する

①ブロックを移動する

ブロックツールバーの上下マーク、掴みマークをドラッグして移動できます。

②ブロックを削除する

ブロックツールバーの右のオプションメニューから削除を選択します。

テキストの編集方法

編集したいテキストを選択するとツールバーが表示されるので、そこから編集します。

各種メニューから目的に沿って選択し、編集します。

WordPressのブログの編集方法

記事の作成

新規記事の作成方法は、サイドバーの「投稿」→「新規追加」をクリックします。

タイトルをつける

タイトルは、上記の「タイトルを追加」と書いてある部分に書き込みます。

SEO的な観点から、タイトルの長さは32文字前後がおすすめです。

本文を書く

タイトルを入力するボックスの下は、本文を書き込むエディターです。

ブロックの左の「＋」を押すと、段落・画像・スペースなどを追加できる仕組みです。

本文はボックス内に文字を入力してけばOKです。

見出しをつける

ボックスに文字を入力した後に、マウスのカーソルを入力した文字あたりで動かすと、ボックス上部にツールバーのようなものが出てきます。

一番左をクリックすると、「変換」→「見出し」を選択できるので、クリックします。

見出しは、H2→H3→H4という風に構造化されていきます。（H2が大きな見出し）

画像を挿入する

本文に画像を挿入する方法は、ブロック横もしくは下の「＋」をクリックして、「一般ブロック」→「画像」をクリックします。

画像挿入の方法は３つある

  • アップロード
  • メディアライブラリ
  • URLから挿入

上記の3つから、画像挿入の方法を選択することになります。

ワードプレス内に画像を保存しておける「メディアライブラリ」を選択するのがおすすめです。

「メディアライブラリ」をクリックした後に、挿入したい画像をドラッグ&ドロップすると、画像が保存されるので、あとは画像を選択すると挿入が完了です。

カテゴリーを決める

ブログカテゴリーを考えている人は、右サイドバーから「カテゴリー」をクリックして、自分の好きなカテゴリーをクリックまたは「新規カテゴリーを追加」からカテゴリー追加できます。

アイキャッチ画像を入れる

右サイドバーの「アイキャッチ画像」→「アイキャッチ画像を設定」で、メディアライブラリから選択します。（新規画像を使いたい場合は、ドラッグ&ドロップ）

投稿の仕方

記事を投稿できる状態になったら、右上の「プレビュー」をクリックして、内容をチェックします。

内容がOKなら、右上のプレビュー横の「公開する」をクリックします。

「公開してもよいですか？」と確認されるので、「公開」をクリックすると投稿完了です。

記事の編集/リライトの仕方

「WordPress管理画面」→「投稿」→「投稿一覧」をクリックします。

編集したい記事タイトルをクリックするか、タイトルにカーソルを合わせると表示される「編集」をクリックすると編集画面になります。

リライトや編集が完了したら、右上の「更新」をクリックすれば更新完了です。

コンタクトフォーム7 の設定方法とカスタマイズ方法

コンタクフォーム7とは

WordPressのプラグイン「Contact Form 7」は、初心者でも簡単に問い合わせページを作ることができます。またこのプラグインは問い合わせだけでなく、自動返信メールやサンクスページなどのカスタマイズも可能です。

Contact Form 7 のインストールと初期設定

https://contactform7.com

インストール方法

  1. WordPress管理画面 → プラグイン → 新規追加 をクリック
  2. 右上の検索ボックスに「Contact Form 7」と入力
  3. 該当プラグインが表示されたら「今すぐインストール」をクリック
  4. インストールが完了したら「有効化」をクリック

フォームの作成・編集方法

左側の【お問い合わせ】から【コンタクトフォーム】を選択します。

フォームを編集する部分には、あらかじめ「名前」「メールアドレス」「題名」「メッセージ本文」の項目が設けられています。

自動返信メールの設定

【メール】のタブをクリックして自動返信メールを設定します。
自動返信メールとは、フォームを使って問い合わせを行った人に対して自動で送られるメールです。

たとえば問い合わせをした方に対して「お問い合わせありがとうございます。」といった内容のメールを送ることができます。

【メール】のタブに移動し、スクロールすると【メール (2)】という項目があります。
そちらのチェックボックスにチェックを入れると自動返信メールを作成できるようになります。

次に、自動返信メールで送られるメッセージ内容を作成します。

初期設定のままでは問い合わせ内容がそのまま送り返されるだけですが、問い合わせに対するコメントや返信までにかかる日数などを記載することもできます。
また、自動返信により送られたメールであることを伝えられます。

設置する

ショートコードをコピーし固定ページ・投稿ページに貼り付け

フォーム設定画面の上部、または一覧の「ショートコード」欄に表示されている下記のようなコードをコピーします。

エラー: コンタクトフォームが見つかりません。
ユーザーがフォームに入力 Contact Form 7プラグイン WordPressから管理者へメール送信

フォーム項目のカスタマイズ

Contact Form 7 は多様なフィールドタイプを用意しています。主なものを表にまとめると、次のようになります。

フィールドタイプショートコード例必須指定説明
テキスト[text your-text][text*]単一行の文字入力
メールアドレス[email your-email][email*]メールアドレス入力（フォーマットチェック）
電話番号[tel your-tel][tel*]電話番号入力
テキストエリア[textarea your-message][textarea*]複数行の文字入力
ドロップダウン[select your-select "選択1" "選択2"][select*]プルダウン式の選択
ラジオボタン[radio your-radio "選択1" "選択2"][radio*]1つだけ選択する場合
チェックボックス[checkbox your-check "選択1" "選択2"][checkbox*]複数の選択肢から複数選ぶ場合
ファイルアップロード[file your-file][file*]ファイルを添付して送信
送信ボタン[submit "送信"]なしフォーム送信ボタン

上記のショートコードを、Contact Form 7 の「フォーム」タブで自由に組み合わせることで、柔軟なフォームを作成できます。

エラーメッセージ・送信完了メッセージの編集

Contact Form 7 では、送信時に表示される下記のようなメッセージをカスタマイズできます。

  • 送信完了メッセージ
  • 入力エラー時のメッセージ
  • 不正なメールアドレス入力時のエラー など

これらは「メッセージ」タブで編集できます。デフォルトでは英語でのメッセージも含まれていますが、日本語に変更しておくとユーザーにとってわかりやすい表示になります。

スパム対策 (reCAPTCHA 連携)

Contact Form 7 には「reCAPTCHA」を活用できる機能があり、ロボットやスパム投稿を防止することが可能です。

  • Google reCAPTCHA のサイトキー・シークレットキーを取得
  • WordPress 管理画面 → 「お問い合わせ」→「インテグレーション」タブでキーを設定

これにより、フォームに自動的に reCAPTCHA が組み込まれ、スパムメールを大幅に減らすことが期待できます。

管理者通知メールのしくみ

CF7では、ユーザーがフォームを送信したタイミングで、WordPressのメール送信機能 (wp_mail) を通じて指定のメールアドレス宛に通知が飛ぶ仕組みになっています。

  • 送信元 (From) : 送信者情報をメールの送信元として指定
  • 送信先 (To) : 管理者通知メールを受け取る宛先
  • 件名 (Subject) : 通知メールの件名
  • 本文 (Message Body) : フォームで送られたデータを反映

これらの項目は、CF7の「メール」タブで柔軟に編集できます。

メールタブの各項目の詳細

CF7のフォーム編集画面を開くと、上部に「フォーム」「メール」「メッセージ」「追加設定」などのタブがあります。管理者通知メールに関わる設定は主に「メール」タブで行います。

2-1. メールタブの基本構成

デフォルトの例 (メールタブ)

送信先 (To): [your-email] ← ここを管理者のアドレスに変える場合があります
件名 (Subject): お問い合わせ: [your-subject]
送信元 (From): [your-name] <[your-email]>
追加ヘッダー (Additional headers): Reply-To: [your-email]
メッセージ本文 (Message Body):
お名前: [your-name]
メールアドレス: [your-email]
件名: [your-subject]
メッセージ本文:
[your-message]

-- 
このメールはお問い合わせフォームから送信されました

送信先 (To)

  • デフォルトでは [your-email] が設定されている場合が多いですが、管理者側で受け取りたいメールアドレスを入力することがほとんどです。例えば、info@example.com など。
  • 必要に応じてカンマ区切りで複数設定も可能です。例:
info@example.com, support@example.com

件名 (Subject)

  • ユーザーが入力した件名をメール件名に反映する場合は、ショートコード [your-subject] を使用します。
  • 固定の文言を含めることもできます。例: 【お問い合わせ】[your-subject]

送信元 (From)

  • 通常、「誰からのメールか」 がわかるように [your-name] <[your-email]> とするケースが多いです。
  • この際、メールの送信元（「From:」欄）にユーザーのメールアドレスをそのまま設定してしまうと、メールサーバー側でスパム判定されやすいことがあります。
    • そのため、一部環境では wordpress@example.com など、自社ドメインのメールアドレスにしておき、本文中にユーザーのアドレスを含める形が望ましい場合もあります。

追加ヘッダー (Additional headers)

  • Reply-To: [your-email] のように設定しておけば、管理者が返信ボタンを押すだけで、自動的にユーザー宛に返信できます。
  • CC や BCC などを指定することも可能です。例:
Cc: cc@example.com
Bcc: bcc@example.com

メッセージ本文 (Message Body)

  • ユーザーの入力値を適切に表示するため、各フォームタグを本文に入れておきます。
  • よくある例としては以下のような内容です。
お名前: [your-name]
メールアドレス: [your-email]
電話番号: [your-tel]
ご要望: [your-request]

-- 
このメールはお問い合わせフォームから送信されました

ここで使用する [your-name] などのタグは、「フォーム」タブ で設定しているショートコードと同じ名前になるよう注意しましょう。そうしないと、正しく反映されません。

wp_mail関数とは

1-1. wp_mailはPHPMailerのラッパ関数

WordPressでは内部的にPHPMailerというライブラリが使用されています。wp_mail() は PHPMailer を呼び出すためのラッパ関数で、以下のような形で利用します。

wp_mail(
  $to,      // 送信先 (文字列 or 配列)
  $subject, // 件名
  $message, // 本文
  $headers, // ヘッダ情報 (任意)
  $attachments // 添付ファイル (任意)
);
  • $to: 送信先のメールアドレス（または複数アドレスを配列で指定）
  • $subject: メールの件名
  • $message: メールの本文（HTMLメールも可）
  • $headers: 追加のヘッダ情報（From, Cc, Bcc, Reply-Toなど）
  • $attachments: 添付ファイルのパスを指定（配列）

※ $headers や $attachments は不要であれば省略できます。

1-2. WordPressが標準で行う処理

  • From アドレスの指定がない場合、WordPressの設定に従って wordpress@サーバードメイン などのアドレスから送信されます。
  • ホスティングサーバーによっては、PHPのmail関数 が使われていたり、サーバー独自のセキュリティや設定が影響する場合があります。

2. デフォルト設定とカスタマイズの方法

2-1. フィルターフック (wp_mail_from / wp_mail_from_name)

WordPressはメール送信時に、下記のようなフィルターフックを用意しています。

  1. wp_mail_from
    • 送信元メールアドレス (From) を変更するためのフック
  2. wp_mail_from_name
    • 送信元名 (From Name) を変更するためのフック

たとえば、以下のようにテーマの functions.php などにコードを追加すると、送信元アドレスや送信元名を統一できます。

/**
 * wp_mail で送信されるメールの送信元アドレスを変更
 */
add_filter( 'wp_mail_from', function( $email ) {
    return 'no-reply@example.com'; // ここを任意のアドレスに
});

/**
 * wp_mail で送信されるメールの送信元名を変更
 */
add_filter( 'wp_mail_from_name', function( $name ) {
    return 'Example Site'; // ここを任意の送信者名に
});

2-2. 直接 wp_mail 呼び出し時のヘッダー指定

wp_mail() を直接呼ぶ際に、引数 $headers を指定する方法もあります。
たとえば、From と Reply-To を指定する例は以下のようになります。

$to = 'info@example.com';
$subject = 'テストメール';
$message = 'このメールはテスト送信です。';

// ヘッダ情報を配列で指定
$headers = [
    'From: Example Site <no-reply@example.com>',
    'Reply-To: support@example.com'
];

wp_mail( $to, $subject, $message, $headers );

$headers を文字列の配列として指定することで、好きなだけヘッダーを追加することが可能です。

  • Cc, Bcc などを含めることも可能です。
$headers = [
    'From: Example Site <no-reply@example.com>',
    'Cc: cc@example.com',
    'Bcc: bcc@example.com',
    'Reply-To: support@example.com'
];