ntorelabo
Difyローカル開発環境セットアップガイド
https://dify.ai/jp

ローカル環境で動かすメリット

  1. セキュリティ管理
    • 機密データや会社の情報をローカルで完全に管理可能
  2. カスタマイズの自由度
    • 環境設定やモデルの詳細な調整が可能
    • 必要に応じてソースコードの修正も可能
  3. コスト管理
    • クラウド利用料金の削減
    • リソース使用量の直接的なコントロール
  4. 開発効率
    • ローカルでの即時デバッグが可能
    • 開発サイクルの短縮

Dockerセットアップ手順

1. リポジトリのクローン

プロジェクトディレクトリにて公式のリポジトリをクローンします

git clone https://github.com/langgenius/dify.git .

2. Docker起動

cd .\docker\
docker-compose up -d

Dockerのリソース制限 初回起動時のコンテナビルド処理でロードに時間がかかる場合あります

まずは、test@test.comなどのテストアカウントで設定を進め、基本的な動作を確認することをお勧めします。その後、必要に応じて実際のメールアドレスに変更することもできます。

Dify での OpenAI の設定

「設定」→「Model Provider」

APIキーのみを入力

チャットボット作成

Web公開

「公開する」から「ウェブサイトに埋め込む」で下記の通りWeb上にアップできます

注意)Docker起動しておかないと接続はできません

選択肢(1)OpenAI APIキーを使用(Dify標準)

  • メリット:
    • 設定が簡単
    • GPT-4の高性能な応答
    • 日本語対応が完璧
  • デメリット:
    • 質問内容がOpenAIサーバーに送信される
    • コストがかかる
    • APIキー管理のリスク

選択肢(2)ローカルAIモデル(完全オフライン)

  • メリット:
    • データが外部に漏れない
    • ランニングコストなし
    • カスタマイズ可能
  • デメリット:
    • セットアップが複雑
    • 計算リソースが必要
    • GPT-4より性能は劣る

Tiny-Llamaとは

  • Meta社のLlamaモデルを小型化したバージョン
  • オープンソースで商用利用可能
  • 元のLlamaの機能を維持しながら、サイズを大幅に縮小

バリエーション

Tiny-Llama-1.1B: 基本モデル
Tiny-Llama-Chat: チャット特化
Tiny-Llama-Code: プログラミング特化

必要スペック

最小構成:
- メモリ:4GB以上(8GBのPCで動作可能)
- CPU:一般的なCore i3/i5でOK
- ストレージ:3GB程度の空き容量

参考外付けSSD

容量が不足しそうであれば外付けSSD

推奨スペック:
- 容量:最低128GB以上
- タイプ:USB 3.0/3.1以上
- 読み書き速度:500MB/s以上
通常のLlama-2: 7GB-70GB
Tiny-Llama: 約1.1GB-2GB
GPT-3: 175GB以上
容量速度特徴
Samsung T7500GB〜2TB500MB/s以上信頼性が高く、ポータブルで耐衝撃性もあるため、持ち運びにも適しています。
Sandisk Portable SSD250GB〜2TB500MB/s以上コストパフォーマンスが良く、一般的な使用に十分な性能です。
Crucial X8500GB〜2TB1050MB/s以上耐久性が高く、速度も速いので、長期間の使用に向いています。

APIキーの設定

  • 右上のプロファイルアイコン → Settings をクリック
  • 左メニューの「API Keys」を選択
  • OpenAI APIキーを入力




参考サイト

https://note.com/en2enzo/n/nb1d179215a37
PHP

PHPの概要

PHPはサーバサイドスクリプト言語(Webサーバ実行される)です。

PHPの動作環境

CGI(Common Gateway Interface※)規格をサポートするWebサーバで機能します。

※Webサーバでプログラムを実行する仕組み

テキストと数の操作

ホワイトスペース

ホワイトスペースを入れることで、プログラムの可読性が上がります。

半角スペース、タブ、改行がホワイトスペースとしてみなされます。

演算子

代数演算子
算術演算子
+ – * / % ++ — など
比較演算子== === !== < > <= >= ?:
論理演算子&& and || or xor !
ビット演算子& | ^ << >> など
その他文字列演算子()、実行演算子(`)、
エラー制御演算子()

比較演算子

==左辺と右辺が同じ値
===左辺と右辺が同じ値で同じデータ型
<=>
宇宙船演算子
左辺が右辺より小さい場合は-1、左辺んが右辺と等しい場合は0、
左辺が右辺より大きい場合は1
??左辺がnullでなければその値、左辺がnullであれば右辺の値、
左辺も右辺もnullであればnull

エスケープ

単一引用符

単一引用符(’ ‘)は特殊文字はそのまま文字列として動作します。

二重引用符

二重引用符(” “)は特殊文字は意味する値として動作します。(変数展開変数のParse

\n改行
\r復帰
\tタブ
\\\
\$$

ヒアドキュメント

長い文字列を変数に代入したり、出力するときに使います。

<?php
$変数 = <<<_DATA_
 
「文字列を記述」
 
_DATA_;
?>
<?php
echo = <<<_DATA_
 
「文字列を記述」
 
_DATA_;
?>

配列

作成方法

1. $配列名 = array(値1, 値2, …); 

2. $配列名[キー] = 値;
<?php
$ary = array(20, 21, 27, 29, 32);
foreach ($ary as $aryi) {
    print $aryi."<br/>\n";
}
?>

//結果
20
21
27
29
32

連想配列

文字列をキーとした配列

配列関数

sort関数

sort()配列の値を昇順に並べる
asort()連想配列の値を、キーと値の関係を保持しつつ昇順に並べる
ksort()キー配列のキーをキーと値の関係を保持しつつ昇順に並べる
rsort()配列の値を降順に並べる
arsort()連想配列の値、をキーと値の関係を保持しつつ降順に並べる
krsort()キー配列のキーをキーと値の関係を保持しつつ降順に並べる
explode($d, $str)$str(文字列)を$d(文字列)で分割し、配列を返す
implode($d, $ary)$ary(配列)を$d(文字列)で連結し、文字列を返す

関数

function

ユーザ独自の関数を定義します。

function 関数名(引数) {
//処理内容
}
  • 引数は変数以外は指定できません。

関数の呼び出し

  • 関数の呼び出すときは、関数名と引数※を記述します。
    ※引数の指定がなければデフォルト値を使用します。(引数に値を指定すればその値がデフォルト値より優先されます。)
  • 関数名の大文字と小文字は区別されません。
  • 先頭の文字はアルファベットまたはアンダースコア
  • 2文字目以降はアルファベット、アンダースコア、数字
function 関数名(引数 = デフォルト値) {
//処理内容
}

return

関数から値を返す際記述します。

  • 関数が何も値を返さない場合returnは省略できます。
  • 複数の値を返す場合は配列に格納します。

ユーザー定義関数

ユーザーが独自に定義した関数。

組み込み関数

PHPにはじめから用意されている関数。

文字列関数

printf
(フォーマット,フォーマット中に変換する値)
フォーマットされた文字列を出力
mb_strlen()文字列の長さ
strlen()はマルチバイト文字に対応していない
substr($string, 開始位置, 長さ)文字列の一部を取り出す
「print substr(‘abcde’, 0, 3);」の実行結果は「abc」
str_replace
(置換前の文字列, 置換後の文字列, $string)
一部の文字列を置き換える
trim()文字列前後の空白を取り除く
ucwords()最初の文字を大文字にする
strtolower()すべて小文字にする
strtoupper()すべて大文字にする

変数

命名規則

  1. 「$名前」
  2. 名前の先頭は文字か_(アンダースコア)
  3. 名前の2文字以降は2.に加えて数字も可
  4. 大文字、小文字は区別される

スコープ

グローバル変数

関数の外部で定義された変数

ローカル変数

関数内で定義された変数

  • 関数内で有効

global

global命令を利用すると、関数ブロック内で強制的にグローバル変数にわりあてることができます。

$num = 30;
foo();
function foo() {
 global $num;
 print $num;
}

$GLOBALS

グローバル変数は通常、関数外部のみで有効になりますが、配列$GLOBALSは関数内でもアクセスが可能です。

$num1 = 30;
foo();
function foo() {
 print $GLOBALS['num'];
}

オブジェクト

オブジェクトはデータ(変数)とデータを操作する関数の集合体です。

オブジェクトはクラスをインスタンス化したものです。

クラス

新しくオブジェクトを生成するためのひな型で、クラスからオブジェクトは生成されます。

  • classで定義する
class Msg{ // Carクラス

// プロパティ
public $color; // アクセス範囲をプロパティ前に記述

// メソッド
public function start(){ // 開始
echo '開始します';
}
}

アクセス権

publicどこからでもアクセス可能
protectedクラス自身、継承したクラス、親クラスが使用可能
private定義したクラスのみ使用可能
  • varを使って宣言したプロパティは、publicとして定義されます。
  • アクセス権を設定せずに定義したメソッドは、publicと同等となります。

インスタンス

クラスから生成された実体。

newキーワードを使ってインスタンスを作成します。

new クラス名();

$obj = new Person();

オブジェクトとインスタンスの違い

「インスタンス化」と「オブジェクトの生成」は同じ意味を表すことになります。
また、オブジェクトとは、さまざまな実体の総称であり、インスタンスもオブジェクトの1つとなします。

プロパティ

クラスで定義された変数。

インスタンスのプロパティを設定するには、->キーワードを使います。

$インスタンス名 -> プロパティ名

静的メソッド

静的メソッドはクラス自体で保持しているメソッドです。

インスタンス化しなくても利用できます。

$thisをつかうことができません。

クラス名::静的メソッド名()

コンストラクタ

オブジェクトがインスタンス化されるときに自動的に呼び出されるメソッドです。

__constructで定義されます。

サブクラス

サブクラスを定義すると、既存のクラスを再利用することができます。

サブクラスを作成するにはextendsキーワードをつかいます。

class サブクラス名 extends クラス名
  • 基本的に親クラスで定義したメソッドプロパティをサブクラスで記述せずに使用できます。

名前空間

名前空間を定義することで、クラスや関数がその空間に所属していると区別ができるようになります。
→クラス名や関数名の重複によるエラーを防ぐことができます。

名前空間でクラスを定義する場合、ファイルの先頭でnamespaceキーワードと名前空間名をし記述します。

namespace 名前空間名;

階層構造

名前空間は階層構造を持たせることができます。

階層は ¥¥(バックスラッシュ)で区切り記載します。

use キーワード

エイリアスの作成

名前空間で定義されたクラスを呼び出すとき、簡単な別名(エイリアス)を使うことができます。

エイリアスを指定するには use 名前空間 as エイリアス;と記載します。

名前空間のインポート

use 名前空間;と記述することで名前空間をインポートすることができます。

ユーザとの情報交換:Webフォームの作成

$_SERVER

$_SERVER(サーバー変数)Webサーバが生成するヘッダ情報、パス情報、スクリプトの位置情報情報を使うときに使用します。

<!-- サンプルコード -->

<?php
//現在実行しているスクリプトのファイル名です。
echo $_SERVER['PHP_SELF']."<br/>\n";
//現在のスクリプトが実行されているサーバの IP アドレスです。
echo $_SERVER['SERVER_ADDR']."<br/>\n";
?>
$_SERVER[‘PHP_SELF’]Webサーバに要求するURL
$_SERVER[‘SERVER_NAME’]PHPは実行されているWebサーバの名前
$_SERVER[‘SERVER_ADDR’]IPアドレス
$_SERVER[‘REQUEST_METHOD’]リクエストのメソッド名
$_SERVER[‘REMOTE_ADDR’]ユーザの IP アドレス
$_SERVER[‘REMOTE_HOST’]現在のページにアクセスしているホストの名前
$_SERVER[‘QUERY_STRING’]検索引数

フォームで利用する関数

filter_input()

フォームで送信される内容をチェックします。

filter_input(判定対象, 判定する内容)

filter_input(INPUT_POST, 'id', FILTER_VALIDATE_INT)整数か判定
FILTER_VALIDATE_INT整数か判定
FILTER_VALIDATE_FLOAT浮動小数点か判定

trim()

文字列の前後のスペースを削除

strlen()

文字列の長さを返します

htmlentities()

HTML文字をエンコードします。クロスサイトスクリプティング攻撃を防ぎます。

変換前変換後
&&amp;
<&lt;
>&gt;
&quot;

情報の保存:データベース

PDO

PHP Data Object

PHPからデータベースにアクセスするためのインターフェースです。

//データベースへの接続
$db = new PDO('データソース名', 'ユーザ名', 'パスワード');

//例:ローカルホスト
$user = 'root';
$password = 'root';
$host = 'localhost';
$dbName = 'sample_0713';
$dsn = "mysql:host={$host};port=8889;dbname={$dbName}";


$db = new PDO($dsn, $user, $password);

PDOException

DB接続(new PDO()でインスタンスを生成する)時に何らかの問題があると、PDOクラスはPDOException例外が発行されます。

<?php
try {
$db = new PDO($dsn, $user, $password);
} catch (PDOException $e) {
exit('データベースに接続できませんでした。' . $e->getMessage());
}
?>

SQL

SELECT

SELECT 列名1, 列名2, … 
 FROM テーブル名 WHERE 条件;

INSERT

//すべての列の値を追加
INSERT INTO テーブル名 VALUES(値1, 値2, …);

UPDATE

//すべての列の値を追加
UPDATE SET テーブル名 SET 列名=値1, 値2, 値3, …
 WHERE 条件;

DELETE

DELETE FROM テーブル名 WHERE 条件;

query()

指定したSQL文をデータベースに対して実行してくれます。

prepare()

プリペアドステートメント

SQL文の値をパラメータ化したもの(プレースホルダ)で、テンプレートのようなものです。

execute()

$sql = "SELECT name, price FROM foods WHERE price >=? AND price <=?;

$q = $db->prepare($sql);

// パラメータ値の配列を渡す
$q->execute(array ($POST['min_price'], $POST['max_price']));

フェッチモード

定数取得の形式値の取得例
PDO::FETCH_ASSOC連想配列$row[‘name’]
PDO::FETCH_CLASS指定されたクラスにフェッチ$row->name

fetch

該当する結果を1行で返す

fetchAll

結果の内容をまとめて配列で返す

fetchColumn

該当するデータから単一のカラムを返す

https://www.javadrive.jp/php/pdo/index8.html

ファイルの操作

file_get_contents

file_put_contents


<?php
$file = "text.txt";
$string = "書き込む内容";
var_dump( file_put_contents($file, $string) );
?>


file_get_contents(ファイル名)ファイルの内容を読み込む
file_put_contents(ファイル名,文字列)文字列をファイルに書き込む

ローカルファイルだけでなくリモートファイル(他のコンピュータにあるファイル)にも書き込み可能です。

fopen()

fopen()関数はファイルにアクセスするときに使うファイルポインタを返します。

$ファイルポインタ = fopen(ファイル名, ファイルのモード);

モード操作ファイルポインタの位置・上書き
rb読み込み先頭
上書きしない
rb+読み込み、書き出し先頭
上書きしない
wb書き出し先頭
上書きする
wb+読み込み、書き出し先頭
上書きする
ab書き出し末尾
上書きしない
ab+読み込み、書き出し末尾
上書きしない
xb書き出し先頭
上書きしない
xb+読み込み、書き出し先頭
上書きしない
  1. ファイルへの接続をオープン
    fopen()関数
  2. 読み書き
    fgets()関数、fwrite()関数
  3. ファイルをクローズ
    fclose()関数

fgetcsv()

CSVファイルを読み込む

$配列 = fgetcsv(ファイルポインタ, 行の長さ);

header()

//header('Content-Type: ファイルの種類'); クライアントにファイルの種類を知らせる
header('Content-Type: sample/csv');

//sample.csvという名前でダウンロード
header('Content-Disposition: attachment; filename="sample.csv"');

is_readable()

ファイルが読み込み可能か判定

is_writable()

ファイルが書き込み可能か判定

file_exists()

ファイルやディレクトリが存在しているか判定

ユーザの記憶:クッキーとセッション

Cookie

クッキーを定義

setcookie(name, value, expire, path, domain, secure, httponly)

1.name … クッキーの名前
2.value … クッキーの値
3.expire … 有効期限
4.path … URLのパス
5.domain … 有効なドメイン
6.secure … secure属性(HTTPS通信時のみ許可)
7.httponly … httponly属性(JavaScriptによるクッキーの操作を防ぐ)

セッション

session_start()

session_start()関数によってセッションを作成、セッションIDをPHPSESSIDの値に設定しクライアントに返送します。

基本的にサーバ上に値を保持

session_destroy()

Webサーバが保持しているセッションのデータを削除します。

  • unset() … 配列から指定のキーの値を取り除きます。
  • reset() … 再初期化

cURL

cURLとはPHPの拡張機能(ライブラリ)です。

cURLを使うことで、外部サイトにアクセスし情報を取得するこどができます。

  1. curl セッションを初期化
  2. curl のオプションを設定
  3. curl を実行
  4. curl セッションを終了
  • curl_init() アクセスしたいURLを指定
  • curl_exec() ハンドルを利用して、PHPの動作をリクエストを取得
$url = "https://ntorelabo.com/";

//cURLセッションを初期化
$ch = curl_init();

//URLとオプションを指定
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // SSL化されているサイトも取得可能にする
curl_setopt($ch, CURLOPT_FAILONERROR, true); // HTTPステータスが400以上なら処理失敗と判断
  
//セッションを実行
$html = curl_exec($ch);

// ページに出力
if($html){
  echo $html;
}else{
  echo "サイトが見つかりませんでした";
}
  
//セッションを終了
curl_close($ch);

curl_setopt

オプション
CURLOPT_RETURNTRANSFERTRUEを設定すると、curl_exec()関数の返り値を文字列で返す
CURLOPT_HEADERTRUEを設定するとヘッダの内容も出力する
CURLOPT_POSTTRUEを設定するとPOSTのリクエストを宣言する
CURLOPT_POSTFIELDSHTTP POST で送信するデーターを設定する
CURLOPT_COOKIEJAR・TRUEを指定するとクッキーを追跡する
・ファイル名を指定すると指定のファイルにクッキーの情報が保存される
CURLOPT_COOKIEFILEクッキーのファイルを指定することでクッキーの情報を読み込む

curl_getinfo()

curlハンドルをもとにリクエスト情報を返す

$info = curl_getinfo($ch);
var_dump($info);

フレームワーク

Laravel

  • オープンソースのPHPフレームワーク、無償で利用可能
  • Bladeテンプレートエンジンをサポート

テンプレートエンジン

動的な処理プログラムと表示内容を記述したHTMLを別で管理する仕組みです。

テンプレート(HTMLのひな型)を必要に応じて書き換えて画面に出力するライブラリ

Symfony

  • オープンソースのPHPフレームワーク、無償で利用可能
  • YAML、XML、PHP、Annotationsによってルーティングを設定
  • Twigテンプレートをサポート

Zend Framework

  • オープンソースのPHPフレームワーク、無償で利用可能
  • デフォルトのテンプレートはPHP

phpコマンド

php -S Webサーバ名:ポート番号
オプション名
-S組み込みサーバを開始
-hコマンドのヘルプを表示
-mPHPに組み込まれたモジュールを表示
-aPHPを対話的に実行(PHP REPL)
※REPLとは 入力・評価・出力をできる対話型実行環境
-t組み込みWebサーバのドキュメントルートを設定
-d設定ファイル(php.ini)で設定ディレクティブにカスタム値を設定
-iphpinfo()関数を実行し、PHPの設定情報を出力

Swift Maile

// オブジェクト作成
$message = Swift_Message::newInstance;

// タイトル
$message->setSubject('タイトル');

// 送信元の設定(送信元メールアドレスと送信者名)
$message->setFrom(['name@example.com' => 'NAME']);

// 宛先(受信者のメールアドレスと受信者名)
$message->setTo['name@example.com' => 'NAME']);

// 本文
$message->setBody('本文');

// メール送信
$result = $mailer->send($message);

Composer

Composerは拡張ライブラリをインストールするためのツールです。

Composerアプリ単位で個別でパッケージをインストール
PEARすべてのアプリでパッケージを共通にしている

Packagist

Composerでインストール可能なパッケージ一覧リストです。

デバッグ、テスト

例外処理

前もって起こる可能性のあるエラーを想定しておき、その際の行う処理です。

例外処理はtry~catch~finally命令を利用します。

try~catchブロックの中で未補足の例外が発生した場合プログラムは停止します。

try {
// 例外が発生するかもしれないコード
} catch(発生するかもしれない例外の種類 例外を受け取る変数名) {
// 例外発生時の処理
} finally {
// 例外の有無にかかわらず実行する処理
}

Exception

Exceptionクラスではプログラム実行中のエラー(例外)を扱います。

<?php
 
try {
    //throw new 例外クラス名(引数)でインスタンスを作成
    throw new Exception('例外処理発生');
} catch(Exception $e) {
    //getMessageで例外メッセージを取得
    echo $e->getMessage();
}
 
?>

set_exception_handler

ユーザ定義の例外ハンドルを設定するときにset_exception_handler()関数を使います。

<?php
function test_exception_handler($exception) {
 …
}

set_exception_handler("test_exception_handler");
throw new Exception("例外ハンドル!!");
?>

PHPUnit

PHPUnitはPHPのコードのテストを記述するためのデファクトスタンダードです。

  1. アサーション
  2. アノテーション

assertEquals()

アサーションメソッドの一つです。1つ目と2つ目の引数が一致しない場合にエラーを報告します。

parse_ini_file()

parse_ini_file()をつかうと構成ファイル(PHP設定ファイルのphp.iniファイルと同じ形式)内容を一度に読み込むことができます。

display_errors

PHPでエラーを表示するとき、PHPのファイル(php.ini)で

display_errors = On

log_errors

PHPでエラーログをサーバに送信するとき、PHPのファイル(php.ini)で

log_errors = On

error_reporting

error_reportingはphp.iniの設定値です。

設定するレベルによって出力する内容がかわります。

Parse Errorプログラムに構成上の問題があるE_PARSE
Fatal Error
(致命的なエラー)
プログラムの内容に関わる重大の問題がある
発生した場合は処理を停止
E_ERROR
Warningプログラムに疑わしい箇所があるE_WARNING
Notice
(注意)
マナー違反のまま動作しているE_NOTICE
Strict Notice
(厳格注意)
コーディングスタイルについての注意E_STRICT

Git

バージョン管理システム

タイムゾーン

タイムゾーンを指定しない場合デフォルトでUTC(Universal Time Coordinated:協定世界時間)が設定されます。

<タイムゾーン設定法>

  • php.iniファイルのdate.timezoneの項目で設定する
  • スクリプト内でdate_default_timezone_set関数で設定する

phpインストール Mac

https://www.stub-create.com/blog/php/mamp-brew.html
Ctrl+Alt+Deleteの使い方完全ガイド

基本的な使い方

  1. キーボードの「Ctrl」キー、「Alt」キー、「Delete」キーを同時に押します
  2. 画面が切り替わり、以下のメニューが表示されます:
  • タスクマネージャー
  • ログオフ
  • パスワードの変更
  • タスクの切り替え
  • シャットダウン

主な活用シーン

1. プログラムがフリーズした時

  • タスクマネージャーを開いて問題のプログラムを強制終了できます
  • 「応答なし」となっているプログラムを選択して「タスクの終了」をクリック

2. セキュリティ対策として

  • 席を離れる時にログイン画面に戻せます
  • 不正アクセスが疑われる時に安全にロックできます

3. システム管理

  • 実行中のプログラムやプロセスの確認
  • メモリやCPU使用率の監視
  • パフォーマンスの確認

注意点

  • 作業中のデータは事前に保存しておきましょう
  • フリーズ時に連打するのは避けましょう
  • 通常の操作では必要ありません
【Next.js TypeScript 】React Swiper カルーセルスライダー実装、スライドが中央寄せにする方法

完成イメージ

手順

Next.js プロジェクトを用意します

npx create-next-app@latest my-carousel-app

プロジェクトに必要な依存関係をインストール

Swiperと必要なアイコンライブラリをインストールします

# Swiperのインストール
npm install swiper

# Font Awesome(ナビゲーション用アイコン)のインストール
npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

# 型定義のインストール(TypeScriptを使用する場合)
npm install --save-dev @types/react-fontawesome

コンポーネントの実装

my-nextjs-app/
├── src/
│   ├── app/
│   │   └── page.tsx          # メインページ
│   ├── components/
│   │   └── ReactSwiper.tsx   # カルーセルコンポーネント
│   └── styles/
│       └── reactSwiper.module.css  # コンポーネント用スタイル
├── package.json
└── ...その他の設定ファイル
ReactSwiper.tsx # カルーセルコンポーネント
"use client";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay, Mousewheel } from "swiper/modules";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faChevronLeft,
  faChevronRight,
} from "@fortawesome/free-solid-svg-icons";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import styles from "@/styles/reactSwiper.module.css";

interface CarouselProps {
  images?: string[];
}

const ReactSwiper: React.FC<CarouselProps> = ({ images }) => { 
  // 画像がない場合のデフォルト画像
  const defaultImages = [
    "https://bizlabo.site/assets/sample-img/column1.jpg",
    "https://bizlabo.site/assets/sample-img/column2.jpg",
    "https://bizlabo.site/assets/sample-img/column3.jpg",
    "https://bizlabo.site/assets/sample-img/column4.jpg",
    "https://bizlabo.site/assets/sample-img/column5.jpg",
    "https://bizlabo.site/assets/sample-img/column6.jpg",
    "https://bizlabo.site/assets/sample-img/column7.jpg",
    "https://bizlabo.site/assets/sample-img/column8.jpg",
  ];

  const imagesToUse = images || defaultImages;

  return (
    <div className={styles.container}>
      <Swiper
        modules={[
          Navigation, // ナビゲーション(次へ/前へボタン)を有効にするモジュール
          Pagination, // ページネーション(スライドのインジケーター)を有効にするモジュール
          Autoplay,   // 自動再生を有効にするモジュール
          Mousewheel  // マウスホイールでスライドをスクロールできるようにするモジュール
        ]}        spaceBetween={10} // スライド間のスペースを30pxに設定
        navigation={{
          nextEl: `.${styles.swiperButtonNext}`, // 次へボタン
          prevEl: `.${styles.swiperButtonPrev}`, // 前へボタン
        }}
        pagination={{
          clickable: true, // ページネーションをクリック可能に
          bulletClass: styles.bullet,
          bulletActiveClass: styles.bulletActive,
        }}
        // autoplay={{ delay: 3000 }}
        loop
        centeredSlides // スライドを中央に表示
        slidesPerView={1}
        breakpoints={{
          0: {
            slidesPerView: 1.4,
          },
          768: {
            slidesPerView: 2.2,
          },
          1024: {
            slidesPerView: 4,
          },
        }}
        speed={800}
        className={styles.reactSwiper} // Swiperコンポーネントにクラス名を追加
      >
        {imagesToUse.map((image, index) => (
          <SwiperSlide key={index} className={styles.slide}>
            <img
              src={image}
              alt={`Slide ${index}`}
              className={styles.slideImage}
            />
          </SwiperSlide>
        ))}
        <div className={styles.swiperButtonPrev}>
          <FontAwesomeIcon icon={faChevronLeft} />
        </div>
        <div className={styles.swiperButtonNext}>
          <FontAwesomeIcon icon={faChevronRight} />
        </div>
      </Swiper>
    </div>
  );
};

export default ReactSwiper;
reactSwiper.module.css # コンポーネント用スタイル
.container {
  position: relative;
  padding: 2rem 0;
  overflow: hidden;
}

.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
}

.slideImage {
  width: 100%;
  height: auto;
  cursor: pointer;
}

.swiperButtonPrev,
.swiperButtonNext {
  position: absolute;
  top: calc(50% - 20px);
  transform: translateY(-50%);
  z-index: 2;
  cursor: pointer;
  color: #000;
  font-size: 4vw;
  transition: color 0.3s ease;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  width: 6vw;
  height: 6vw;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.swiperButtonPrev:hover,
.swiperButtonNext:hover {
  color: #666;
  background-color: rgba(255, 255, 255, 0.6);
  width: 7vw;
  height: 7vw;
}

.swiperButtonPrev {
  left: 10px;
}

.swiperButtonNext {
  right: 10px;
}

.bullet {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 50%;
  background: #ccc;
  margin: 0 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.bullet:hover {
  background: #666;
  width: 14px;
  height: 14px;
}

.bulletActive {
  background: #000;
}

.reactSwiper {
  padding-bottom: 40px;
}

/* .reactSwiper :global(.swiper-slide) {
  opacity: 1;
} */

/* .reactSwiper :global(.swiper-slide:not(.swiper-slide-active)) {
  opacity: 0.2;
} */

.reactSwiper :global(.swiper-pagination) {
  bottom: 0;
}

スライドの中に画像だけでなくテキストも入れる場合

reactSwiperVoice.tsx # コンポーネント
'use client'
import React, { ReactNode } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Pagination, Autoplay } from 'swiper/modules'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
    faChevronLeft,
    faChevronRight,
} from '@fortawesome/free-solid-svg-icons'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'
import styles from '@/styles/reactSwiperVoice.module.css'

interface SlideItem {
    id: number
    customerSrc: string
    customerAlt: string
    text: ReactNode
}

const ReactSwiperVoice: React.FC = () => {
    const slideItems: SlideItem[] = [
        {
            id: 1,
            customerSrc: 'https://bizlabo.site/assets/staff-img/staff-1.png',
            customerAlt: 'Customer01',
            text: (
                <>
                    テキスト
                    <span className={styles.marker}>テキストテキストテキストテキスト</span>
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                    <br />
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                    <br />
                    <span className={styles.marker}>テキストテキストテキストテキスト</span>
                    <br />
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                </>
            ),
        },
        {
            id: 2,
            customerSrc: 'https://bizlabo.site/assets/staff-img/staff-2.png',
            customerAlt: 'Customer02',
            text: (
                <>
                    テキスト
                    <span className={styles.marker}>テキストテキストテキストテキスト</span>
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                    <br />
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                    <br />
                    <span className={styles.marker}>テキストテキストテキストテキスト</span>
                    <br />
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                </>
            ),
        },
        {
            id: 3,
            customerSrc: 'https://bizlabo.site/assets/staff-img/staff-3.png',
            customerAlt: 'Customer03',
            text: (
                <>
                    テキスト
                    <span className={styles.marker}>テキストテキストテキストテキスト</span>
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                    <br />
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                    <br />
                    <span className={styles.marker}>テキストテキストテキストテキスト</span>
                    <br />
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                </>
            ),
        },
        {
            id: 4,
            customerSrc: 'https://bizlabo.site/assets/staff-img/staff-4.png',
            customerAlt: 'Customer04',
            text: (
                <>
                    テキスト
                    <span className={styles.marker}>テキストテキストテキストテキスト</span>
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                    <br />
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                    <br />
                    <span className={styles.marker}>テキストテキストテキストテキスト</span>
                    <br />
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                </>
            ),
        },
        {
            id: 5,
            customerSrc: 'https://bizlabo.site/assets/staff-img/staff-5.png',
            customerAlt: 'Customer05',
            text: (
                <>
                    テキスト
                    <span className={styles.marker}>テキストテキストテキストテキスト</span>
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                    <br />
                    <span className={styles.marker}>テキストテキストテキストテキスト</span>
                    <br />
                </>
            ),
        },
        {
            id: 6,
            customerSrc: 'https://bizlabo.site/assets/staff-img/staff-6.png',
            customerAlt: 'Customer06',
            text: (
                <>
                    テキスト
                    <span className={styles.marker}>テキストテキストテキストテキスト</span>
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                    <br />
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                    <br />
                    <span className={styles.marker}>テキストテキストテキストテキスト
                        
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                    </span>
                    <br />
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                </>
            ),
        },
        {
            id: 7,
            customerSrc: 'https://bizlabo.site/assets/staff-img/staff-7.png',
            customerAlt: 'Customer07',
            text: (
                <>
                    テキスト
                    <span className={styles.marker}>テキストテキストテキストテキスト</span>
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                    <br />
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                    
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                    <br />
                    <span className={styles.marker}>テキストテキストテキストテキスト</span>
                    <br />
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                </>
            ),
        },
        {
            id: 8,
            customerSrc: 'https://bizlabo.site/assets/staff-img/staff-8.png',
            customerAlt: 'Customer08',
            text: (
                <>
                    テキスト
                    <span className={styles.marker}>テキストテキストテキストテキスト</span>
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                    <br />
                    <br />
                    <span className={styles.marker}>テキストテキストテキストテキスト</span>
                    <br />
                    テキストテキストテキストテキストテキストテキストテキストテキスト
                </>
            ),
        },
    ]

    return (
        <div className={styles.container}>
            <h2 className={styles.title}>お客様の声</h2>
            <Swiper
                modules={[Navigation, Pagination, Autoplay]}
                spaceBetween={1} // スライド間のスペース
                navigation={{
                    nextEl: `.${styles.swiperButtonNext}`, // 次へボタン
                    prevEl: `.${styles.swiperButtonPrev}`, // 前へボタン
                }}
                pagination={{
                    clickable: true, // ページネーションをクリック可能に
                    bulletClass: styles.bullet,
                    bulletActiveClass: styles.bulletActive,
                }}
                autoplay={{ delay: 2000 }} // 自動再生
                loop
                centeredSlides // スライドを中央に表示
                // 1画面に表示するスライド数
                breakpoints={{
                    0: {
                        slidesPerView: 1.2,
                    },
                    768: {
                        slidesPerView: 2.4,
                    },
                    1024: {
                        slidesPerView: 4,
                    },
                }}
                speed={800} // スライドアニメーションのスピード
                className={styles.reactSwiper} // Swiperコンポーネントにクラス名を追加

                slideActiveClass={styles.slideActive} // アクティブなスライドにクラス名を追加
                slidePrevClass={styles.slidePrev} // 前のスライドにクラス名を追加
                slideNextClass={styles.slideNext} // 次のスライドにクラス名を追加
            >
                {slideItems.map((slideitem, index) => (
                    <SwiperSlide key={index} className={styles.slide}>
                        <div className={styles.slideHeader}>
                            <img
                                src={slideitem.customerSrc}
                                alt={slideitem.customerAlt}
                                className={styles.slideCustomer}
                            />
                        </div>
                        <p className={styles.slideText}>{slideitem.text}</p>
                    </SwiperSlide>
                ))}
                <div className={styles.swiperButtonPrev}>
                    <FontAwesomeIcon icon={faChevronLeft} />
                </div>
                <div className={styles.swiperButtonNext}>
                    <FontAwesomeIcon icon={faChevronRight} />
                </div>
            </Swiper>
        </div>
    )
}

export default ReactSwiperVoice
reactSwiperVoice.module.css # コンポーネント用スタイル
.container {
    position: relative;
    padding: 2rem 0;
    overflow: hidden;
}

.title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 2rem;
    text-align: center;
}

.swiper-wrapper {
    align-items: stretch;
}

.slide {
    border: solid 6px #555;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    height: auto; /* 高さをそろえるため */
    box-sizing: border-box;
    transition: all 0.3s ease;
    transform: scale(0.9)!important;
}

.slideActive {
    transform: scale(1)!important;
}



.slideHeader {
    background-color: #ececec;
    text-align: center;
}

.slideCustomer {
    width: 40%;
    height: auto;
    object-fit: contain;
    vertical-align: bottom;
}

.slideText {
    padding: 1rem;
    font-size: clamp(0.75rem, 1.2vw, 1.5rem);
}

.marker {
    background-size: 0 0;
    background-position: left bottom;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, #ffb180, #ffb180);
    transition: background-size 0.8s ease;
}

.slidePrev .marker,
.slideNext .marker {
    background-size: 0 0;
}

.slideActive .marker {
    background-size: 100% 0.5rem;
}

.swiperButtonPrev,
.swiperButtonNext {
    position: absolute;
    top: calc(50% - 20px);
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
    color: #fff;
    font-size: 4vw;
    transition: color 0.3s ease;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    width: 6vw;
    height: 6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.swiperButtonPrev:hover,
.swiperButtonNext:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.swiperButtonPrev {
    left: 10px;
}

.swiperButtonNext {
    right: 10px;
}

.bullet {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
    background: #ccc;
    margin: 0 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bullet:hover {
    background: #666;
    width: 14px;
    height: 14px;
}

.bulletActive {
    background: #000;
}

.reactSwiper {
    padding-bottom: 40px;
}

.reactSwiper :global(.swiper-pagination) {
    bottom: 0;
}

アクティブなスライドを中央寄せにならないときの解決方法

(問題)アクティブなスライドを中央に表示させるにはcenteredSlides: trueでなるはずですが、ずれてしまう

box-sizing: border-box;に指定

スライドに聞いているプロパティが何かしら影響していることがあるので要注意です

.slide {
    border: solid 6px #555;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    height: auto; /
    box-sizing: border-box;* 中央寄せに */
    transition: all 0.3s ease;
    transform: scale(0.9)!important;
}

参考サイト

https://b-risk.jp/blog/2022/04/swiper/
WordPress自作、カスタマイズ

便利なプラグイン

WP Multibyte Patch

https://ja.wordpress.org/plugins/wp-multibyte-patch

Show Current Template

https://ja.wordpress.org/plugins/show-current-template

テンプレートタグ

テンプレートタグとはWordPressで用意されたカスタマイズするためのPHPの関数です

home_url()

現在のブログのホームURLを返します。

無害化(サニタイズ)を行う必要があります。

echo esc_url( home_url() );

the_content();

現在の投稿ページの本文を出力します。このテンプレートタグはWordPressループの中で使わなければなりません。

single.phpなど個別の投稿記事ページで管理画面で入力した本文を表示させるために使います。使い方は、テンプレートファイル(single.phpなど)の表示させたい箇所でWordPressループさせて表示させます。

get_template_part($slug, $name, $args)

header.php、footer.php、sidebar.phpなどを除いたテンプレートファイルを読み込みます。

wp_head();

wp_headアクションをスタートさせます。(アクションフックを登録する関数) テーマテンプレートファイル内の</head>タグの直前で使います。

このテンプレートタグがなければhead内に必要な情報が出力されません。スタイルシートJavaScriptが読み込まれなかったりします。

wp_footer();

wp_footerアクションフックをスタートさせます。 テーマテンプレートファイル内の</body>タグの直前で使う。</body>タグの直前に記述します。 このテンプレートタグがなければ、ログイン中にサイト上部に管理バーが表示ず、またスクリプトがエラーになったりします。

bloginfo( );

bloginfo( 'name' ); // サイトタイトル出力
bloginfo( 'description' ); // キャッチフレーズ出力

wp_nav_menu();

管理画面で設定したナビゲーションメニューを表示します。 このテンプレートタグで出力されるメニューは「管理画面→外観→メニュー」で作成できます。

<?php
  wp_nav_menu(
    array(
      'theme_location'  => 'top',
      'menu_id'         => 'top-menu',
      'container'       => 'nav',
      'container_class' => 'header-navigation-container',
    )
  );
?>
キー説明
theme_locationメニューを構成するul 要素に適用するID
menu_idregister_nav_menu()やregister_nav_menus()で設定したテーマの中で使われる位置
containerメニューを囲むコンテナのタグを変更
container_classメニューを囲むコンテナのクラスを変更
https://retval.jp/blog/wp-function-navigation

オリジナルテーマ作成手順

https://ntorelabo.com/?p=3224
https://siennahare23.sakura.ne.jp/wp-lesson/%e3%82%aa%e3%83%aa%e3%82%b8%e3%83%8a%e3%83%ab%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ae%e4%bd%9c%e6%88%90

テーマユニットテスト

様々なテスト用データをインストールできる

フック

「特定のタイミング」で「外部からの処理を追加できる」ようにするもの

  • 特定のタイミング → WordPress本体やテーマ、プラグインが用意してくれている。
  • 外部からの処理
    1. 関数を実行 … アクションフック
    2. 変数を上書き … フィルターフック

アクションフック

処理を追加するときに使います。WordPressの処理のタイミングで作成した処理を割り込ませることができます。

do_actionでフックを設置し、add_actionでそのフックに処理を追加する

add_action

<?php add_action( $hook, $function_to_add, $priority, $accepted_args ); ?>

add_action( 'フックさせたい場所の名前', '呼び出してほしい関数名', 優先順位(省略可能),引数の数(省略可能) );

フィルターフック

データベースに追加する前やブラウザに表示する前などに、様々な形のテキストをカスタマイズするためのフックです。

apply_filtersでフックを設置し、add_filterでそのフックに処理を追加する

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

既存のテーマの子テーマによるカスタマイズ

1からテーマを作成するより、子テーマによるカスタマイズのほうがよい理由がいくつかあります。

  • WordPressの多くの機能を把握しておく必要がない(関数など)
  • 毎回のアップデート影響をうけず、親テーマにまかせることができる

上記の観点から、親テーマの選定は長期で使われていて、アップデートを頻繁にしているものがよいといえます。

親テーマより小テーマのテンプレートファイルが優先して読み込まれる

小テーマがある場合WordPressは小テーマでファイルを探し、なければ親テーマのファイルを読み込みます。※functions.phpは上書きではなく子→親両ファイル読み込みます

例えばヘッダー部分をカスタマイズしたい場合親テーマのheader.phpを小テーマのディレクトリに複製して内容を書き換えます。

https://siennahare23.sakura.ne.jp/wp-lesson/%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ae%e4%bd%9c%e6%88%90

Lightningの子テーマカスタマイズ

▼フォルダ構成

  • lightning-child
    • style.css
    • functions.php
    • assets
      • css
        • style.css
    • _g3
      • template-parts
        • site-header.php

style.css

/*
Theme Name: lightning Child
Template: lightning
*/

functions.php

<?php
add_action('wp_head', function() {
    ?>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
    <?php    
});
add_action(
    'wp_enqueue_scripts', function() {
        wp_enqueue_style('parent-style', get_template_directory_uri() .'/style.css');
        wp_enqueue_style('child-style', get_stylesheet_directory_uri() .'/assets/css/style.css', array('parent-style'), date("ymdHis", filemtime( get_stylesheet_directory() .'/style.css')));
    }
);

Lightning ヘッダーカスタマイズ

実現したいこと画面上部追従、ロゴは中央

_g2/header.phpを作成し編集

参考サイト:https://qiita.com/healing_code/items/1be7ca44b4a5b63436b7

今回のケースでは上記テンプレートファイルではなく、_g3/template-parts/site-header.phpでした

Lightning ヘッダー設定

  • ヘッダーレイアウト →中央揃え
  • グローバルナビスクロール時のレイアウト →固定しない

Lightning ハンバーガーメニューカスタマイズ

Lightningのハンバーガーメニューは画像

参考サイト:https://wordpress.org/support/topic/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B_g3%E3%80%81inc%E5%86%85%E3%81%AEvk-mobile-nav%E6%94%B9%E5%A4%89%E5%8F%8D%E6%98%A0%E3%81%AE%E4%BB%B6/

特定のページのみCSS/JSファイルを読み込ませる方法

add_action( 'wp_enqueue_scripts', function(){
// トップページにだけCSSファイルを追加
if( is_front_page() ){
wp_enqueue_style(
'front',
get_template_directory_uri() . '/assets/css/front.min.css',
array(),
''
);
}
// 投稿IDが30のページにのみJSファイルを追加
if(is_page(30)){
wp_enqueue_script(
'page30js',
get_template_directory_uri() . '/assets/js/page30.js',
array(),
array(),
true
);
}
}
https://flex-box.net/wordpress-css-ispage

特定の固定ページだけ処理をする方法

function getPostList(){
// 検索条件の登録
$arg = [
'posts_per_page' => 20,
'order' => 'ASC',
'post_status' => 'publish'
];
$queryObject = new WP_Query($arg);
// 取得した投稿一覧はpostsに格納されている
return $queryObject->posts;
}
// 取得した記事一覧をループさせ、HTML化
foreach(getPostList() as $post){
~...
// 投稿名
$post->post_title;
// 本文
$post->post_content;
https://b-risk.jp/blog/2022/12/wp-functions

トラブル

エラーの種類

Error
エラー
構文がおかしかったり、関数名が重複している場合になるエラー
エラーになった時点でプログラムは停止する
Warning
警告
引数が足りない場合等になるエラー
プログラムは動作しているが、正常に動作していない可能性が高い
Notice
注意
未定義の関数の使用など、軽微な問題
プログラムは動作しているが、正常に動作していない可能性が高い

デバッグモード

WordPressはデフォルトでエラーメッセージを出力しない設定となっていますが、デバッグモードを有効にすることで表示することができます。

define( 'WP_DEBUG', false ); define( 'WP_DEBUG', true ); 

よくある内容

(構文がおかしいときに発生)
Parse error: syntax error, unexpected ○○ in ファイル名 on line 行数
(関数が未定義のときに発生)
Fatal error: Call to undefined function 関数名() in ファイル名 on line 行数
(同じ関数名で関数を定義したときに発生)
Fatal error: Cannot redeclare 関数名() (previously declared in ファイル名 on line 行数A) in ファイル名 on line 行数B
(変数が未定義のときに発生)
Notice: Undefined variable: 変数名 ~ in ファイル名 on line 行数

https://site-manage.net/archives/3346
FTPソフトでホームページを公開

FTP(File Transfer Protocol) … ファイル転送プロトコル

サーバにホームページのファイルをアップロードしたり、バックアップとしてダウンロードすることが可能

主なFTPソフト

  • FileZilla

FTPアカウント情報

  • FTPホスト名(FTPサーバー名)
  • FTPユーザー名(FTPアカウント名)
  • FTPパスワード

public_html

public_htmlはレンタルサーバにホームページのHTMLファイル(html、css、画像等のファイル)をアップロードするフォルダです。

xserverのサーバーパネルにてドメイン、サブドメインを作成しそちらのpublic_htmlフォルダにアップロードする

index.html

トップページはindex.htmlが表示されます。

FTPではなくGitの利用

現在FTPはレガシーな手段という印象で、ヒューマンエラーが発生しやすい問題があります。

Gitでファイルの転送をすることが多いです。小規模で管理するサイトでは問題ないですが、大規模で大人数で管理する場合は特に推奨されます。

生産管理システム

生産管理システムの成果

  • 業務効率の向上
    • 時間短縮(在庫確認、発注、変更登録、製造履歴検索)
  • 管理精度向上
    • 発注量
    • 在庫管理
    • 生産管理
  • クラウド管理 → いつでもどこでも管理可能

生産管理の定義

  • 生産計画の作成
    1. 出荷指示書
    2. ピッキング
    3. 荷造り
    4. 配送先仕分け
    5. 出荷書類
    6. 積込み
    7. 出荷記録
  • 購買管理
  • 受注管理
  • 工程進捗管理
  • 在庫管理
  • 原価管理
  • 生産性管理

CAD

  • Computer Aided Design
  • 設計作業において効率よくするためのコンピュータ利用した支援

CAE

  • Computer Aided Engineering
  • 製造業等で活用されるシミュレーション解析

E-BOM

製品データベース

M-BOM

E-BOMに様々な情報を付加

ERP

  • Enterprise Resource Planning(企業資源計画)
  • 「会計」「人事」「生産」「物流」「販売」を統合的に管理

生産形態

業務の把握

受注

  • 最新の受注内容
  • 受注変更の調整
  • EDIシステムへの対応

購買

  • 発注先の進捗 → 生産調整

生産

  • リアルタイムの生産進捗

販売

  • 販売状況
  • 製品在庫
  • 需要予測

顧客の要求

  • 7つのサブシステム「生産計画」「工程管理」「在庫管理」「原価・生産性管理」「販売管理」「購買管理」「マスタ管理」
  • 販売管理 … 需要情報
  • 生産計画は時間経過とともに具体的に

生産間の周辺システム

関係の深いシステム

  1. 販売管理システム
  2. EC•EDI受発注システム
  3. POPシステム
  4. 在庫管理システム
  5. 会計システム

関係の薄いシステム

  1. 設計開発管理CAD/CAM/ CAE
  2. 製品管理PDM /PLM
  3. 自動倉庫システム
  4. 給与・労務システム

MRP

Material Requirement Planning資材所要量計画

  • 製品を作るのに必要な材料、部品の所要量の計算法
  • BOMが必須

BOM

BOMはP/N(Parts Number:品名マスタ)とP/S(Parts Structure:部品構成マスタ)から構成されます。

品名マスタ

製品部品の基礎情報として、製造業の全ての業務で扱う全情報の個々の情報を集めたものです。

属性データ、調達データ、管理データの3つに分けられます。

属性データ

  • 製品・部品名称
  • 設計番号
  • 材質
  • 品質レベル
  • 変換比率

調達データ

  • 内・外製区分
  • 購入先
  • 価格
  • 調達リードタイム

管理データ

  • 担当工場
  • ストップコード
  • 状態コード

名称コード

意味づけコード意味なしコード
認知性コードを見れば概要がわかるコード表の参照が必要
永続性時間経過でリスクありあり
採番性・管理者が必要
・分散で採番可
・集中管理必要
・自動的に採番可能
システム化コードに翻訳が必要対応性高
利便性習熟が必要未経験者に便利
【基本情報】表計算

相対

相対(セル, x, y)セルの行番号にx、列番号にy移動

例)相対(B3,3,2)

整数部

引数を超えない一番大きな整数を返す

整数部(-2.9)→-3

余剰

割り算の余を求める

剰余(8,3)→2
剰余(40,7)→5

切上げ

切上げ(算術式,桁位置)
切上げ(429,0) → 429
切上げ(429.001,0) → 430

切捨て

切捨て(算術式,桁位置)
切捨て(429.857,0) → 429
切捨て(429.857,-2) → 400
切捨て(算術式,桁位置)
切捨て(429.857,0) → 429
切捨て(429.857,-2) → 400

IF

IF (論理式,式1,式2)
・論理式がtrue → 式1
・論理式がfales → 式2 

論理積

論理積(論理式1,論理式2,論理式3,…)
・論理式1,論理式2,論理式3,…が全てtrueのとき → true
・それ以外 → fales

論理和

論理積(論理式1,論理式2,論理式3,…)
・論理式1,論理式2,論理式3,…がいずれかtrueのとき → true
・それ以外 → fales

垂直照合

垂直照合( 式 , セル範囲 , 返却値の列の位置 , 検索の指定 )

・検索の指定は1か0が指定可能で、1 → 式の数値以下で最大値を検索する

水平照合

水平照合( 式 , セル範囲 , 返却値の行の位置 , 検索の指定 )

・検索の指定は1か0が指定可能で、1 → 式の数値以下で最大値を検索する

照合検索

照合検索 (式, 検索のセル範囲, 抽出のセル範囲)

検索のセル範囲(※1行または1列で指定する必要がある。)の○番目で一致
 → 抽出のセル範囲の○番目の値を返す

表引き

行と列を指定して値を返す

表引き (表の範囲, 行の位置, 列の位置)

照合一致

検索結果の位置を返す

照合一致 (式, セルの範囲, 検索の指定)
  1. 検索語を指定
  2. 範囲を指定※1行または1列で指定する必要がある。
  3. 完全一致かどうかを指定
  4. 結果
    • 検索の指定が0 … セル範囲での位置を返します。(左側か上側が基準、行列番号ではない)
    • 検索の指定が1 … 値以下の最大値を検索する。
    • 検索の指定が-1 … 値以上の最小値を検索する。

条件付個数

検索条件と一致する個数を求める

条件付個数(セル範囲,検索条件)

検索条件 … 数えるセルの条件(例)≦C9、≦20、='文字列'

条件付合計

条件付合計(セル範囲,検索条件,合計セルの範囲)

【基本情報】アルゴリズム

擬似言語

分岐

選択処理

条件式が真 → 処理を実行する

繰り返し

処理を実行する前、条件式が真の限り処理を繰り返す

処理を実行後、条件式が真の限り処理を繰り返す

条件式が真の間、繰り返し処理
開始時に初期値を格納し、繰り返すたび増分を加える

解答手順

以下の点を書き出して整理して考えてみる

  • プログラム目的は?
  • 配列定義添字
  • 変数定義添字
  • 変数具体的な数値を代入してイメージしてみる

符号つき2進数

最上位ビットで正負を示した2進数

シフト演算

論理シフト

  • 符号を考慮しない
  • 溢れたビットは捨てる
  • 開いたビットは0を入れる
  • 論理左シフト … 2n
  • 論理右シフト … −2n

算術シフト

  • 符号を考慮する … 1番左の数が1 → 負の数
  • 先頭の符合を表すビットは固定で残りビットに対して処理が行われる

2の補数

<2の補数の計算方法>

【基本情報】データベース

データベース設計

トランザクション

複数の処理を一つの処理とみなし、全て成功か、全て失敗のどちらかになる。

ACID特性

原子性
ATOMICITY
完全に実行されるか、全く実行されないかどちらか
一貫性
CONSISTENCY
トランザクションの実行前後で整合性をもち、一貫したデータである
独立性
ISOLATION
他のトランザクションへ影響しない
耐久性
DURABILITY
データが失われることは無い

ロック

共有ロック

  • データを参照する時
  • 共有ロック中は他のトランザクションからもデータを参照できる
  • 共有ロック中は更新はできません。

占有ロック

  • データを更新する時
  • 占有ロック中は他のトランザクションからもデータを参照できない
  • 占有ロック中は更新はできません。

デッドロック

2つのトランザクションが、お互いが共有資源解放待ち状態となり、どちらも処理も進行できなくなる状態

コミット

トランザクション処理を確定させる。

アボート

中止、強制終了

ロールバック

トランザクション処理失敗 → トランザクション前に戻す

ロールフォワード

データベースの内容を障害前の変更時の状態に戻す

選択

必要な行だけを抜き出す

射影

データの中から、必要な列だけを抜き出す

結合

同じ列を基準に2つの表をくっつける

正規化

  • 整合性の向上

第1正規化

  • 繰り返し要素をなくす
  • 行の結合を解除

第2正規化

主キーの一部の関数従属性を排除。
関数従属性…ある列に別の列が連動する、例)従業員番号→氏名

  • 主キー … 行を特定できる列
  • 複合キー … 行をを特定できる複数の列

第3正規化

主キー以外の列の関数従属性を排除

https://it-biz.online/it-skills/normalization/

外部キー

  • 参照整合性制約
  • 参照先の表の列の値しかとれない

非NULL制約

NULLが入れられない

SQL

AS

SELECTで抽出したものに別名をつける。

SELECT
customer AS '顧客'
, cost AS '費用'
, category AS 'カテゴリ'
FROM
item;

CHECK

条件に合わなければ、書き込みを拒否される

CHECK( 条件式 )

GROUP BY

  • 特定の列の数値によって、切り分ける。(最大値、最小値など)

IN

複数の値のうちいずれかと一致している行を抽出する。

SELECT * FROM テーブル名 WHERE カラム名? IN ('値1', '値2');

LIKE

  • 文字列検索

ワイルドカード

  • % … 0文字以上の任意の文字列
  • _ … 任意の1文字

ORDER BY

SELECT

SELECT 列名,列名,…
 FROM テーブル名

*(アスタリスク) … 全ての列

DISTINCT

SELECTで抽出した、レコードで重複しているものを除外する

WHERE

条件を指定して選択します。

SELECT 列名 FROM
 テーブル名 WHERE 条件A AND 条件B;

{SQLの命令文} WHERE [列1] = [値];

解答法

HAVING

集合関数を使って行を絞る

CASE

CASE
 WHEN {条件式} THEN {真の場合の値}
 WHEN {条件式} THEN {真の場合の値}
 …
 ELSE {偽の場合の値}
END

集合関数

AVG

平均値を求める

COUNT

個数を求める

MIN

最小値を求める

MAX

最大値を求める

SUM

合計値を求める

select SUM(列名) from (テーブル名) 

条件付き
select SUM(列名) from (テーブル名) where (条件式)

グループ
select SUM(列名) from (テーブル名) group by (列名)

副問合せ

<手順>

  1. 副問合せ
  2. ①の結果を使用して主問合せをする
SELECT * FROM 従業員表
 WHERE 年齢 <> ( SELECT MAX(年齢) FROM 従業員表 )

… 副問合せ
https://www.foresight.jp/fe/column/sql/
https://tech-blog.rakus.co.jp/archive/category/PostgreSQL
【Snow Monkey】Googleサーチコンソール登録

Googleサーチコンソール登録手順

1)【Googleサーチコンソール】HTMLタグの値を確認

▼Googleサーチコンソールにログイン「設定」→「ユーザーと権限」を選択

▼三点ドットを選択→「所有権の確認の詳細」をクリック

▼HTMLタグが確認できます

2)【Snow Monkey】HTMLタグの入力

▼ワードプレス管理画面→「外観」「カスタマイズ」→「SEO」→「Googleサーチコンソール」を選択

▼先ほど確認したHTMLタグのxxxxxの部分を張り付け→公開

3)【Googleサーチコンソール】プロパティを追加

▼「プロパティを追加」をクリック

▼プロパティタイプの選択でドメインの入力欄に該当サイトのドメインを入力

▼確認をクリック

参考サイト

この<meta name=”google-site-verification” content=”xxxxx” />をどこで確認したら良いのかがわからないです。
https://snow-monkey.2inc.org/forums/topic/%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%aegoogle%e3%82%b5%e3%83%bc%e3%83%81%e3%82%b3%e3%83%b3%e3%82%bd%e3%83%bc%e3%83%ab%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6

GoogleサーチコンソールのHTMLタグを再確認する方法
https://kikuchi-web.com/googlesearchconsole-reconfirmation

Laravelの開発環境をDockerで構築

手順

必要な準備

  • Dockerのインストール: Docker Desktopをインストールしておいてください。
  • Docker Compose: Docker DesktopにはDocker Composeが含まれているので、追加インストールは不要です。

ディレクトリ構成

laravel-circulation
├── docker-compose.yml        # Docker Compose設定ファイル
├── nginx
│   └── default.conf          # Nginxの設定ファイル
└── src
    ├── app                   # Laravelのアプリケーションコード
    ├── bootstrap             # Laravelのブートストラップファイル
    ├── config                # 設定ファイル
    ├── database              # データベースマイグレーション等
    ├── public                # Webサーバが公開するディレクトリ (index.phpなど)
    ├── resources             # ビューやフロントエンドリソース
    ├── routes                # ルーティング設定
    ├── storage               # ストレージ関連 (ログなど)
    ├── tests                 # テストファイル
    └── vendor                # Composerでインストールされたパッケージ

docker-compose.yml の作成

Laravelとその関連サービス(Webサーバーやデータベース)の設定を行います。

以下の例は、NginxをWebサーバーに使い、MySQLをデータベースに設定しています。

version: '3.8'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: laravel_app
    working_dir: /var/www/html
    volumes:
      - ./src:/var/www/html
    networks:
      - laravel_network

  webserver:
    image: nginx:alpine
    container_name: laravel_webserver
    working_dir: /var/www/html
    volumes:
      - ./src:/var/www/html
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    ports:
      - "8080:80"
    networks:
      - laravel_network

  db:
    image: mysql:8.0
    container_name: laravel_db
    environment:
      MYSQL_ROOT_PASSWORD: root_password
      MYSQL_DATABASE: laravel
      MYSQL_USER: laravel_user
      MYSQL_PASSWORD: laravel_password
    volumes:
      - dbdata:/var/lib/mysql
    ports:
      - "3306:3306"
    networks:
      - laravel_network

networks:
  laravel_network:
    driver: bridge

volumes:
  dbdata:

Nginxの設定ファイル nginx/default.conf の作成

server {
    listen 80;
    index index.php index.html;
    server_name localhost;
    root /var/www/html/public;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        fastcgi_pass app:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

Dockerfile

DockerfileでComposerのインストール

# ベースイメージを指定
FROM php:8.1-fpm

# システムの依存関係をインストール
RUN apt-get update && apt-get install -y \
    git \
    unzip \
    libzip-dev \
    libicu-dev \
    libonig-dev \
    libpng-dev \
    libjpeg-dev \
    libfreetype6-dev \
    && docker-php-ext-configure gd --with-freetype --with-jpeg \
    && docker-php-ext-install \
        pdo_mysql \
        zip \
        intl \
        opcache \
        gd

# Composerのインストール
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

# 作業ディレクトリを設定
WORKDIR /var/www/html

# アプリケーションファイルの権限を設定
RUN chown -R www-data:www-data /var/www/html

Laravelのインストール

次に、Dockerコンテナ内でLaravelをインストールします。

# Dockerコンテナを起動
docker-compose up -d

# Laravelをインストール
docker-compose exec app composer create-project --prefer-dist laravel/laravel .

参考サイト

UnexpectedValueException PHP 8.1.30 10.48.22 The stream or file “/var/www/html/storage/logs/laravel.log” could not be opened in append mode: Failed to open stream: Permission denied The exception occurred while attempting to log: The stream or file “/var/www/html/storage/logs/laravel.log” could not be opened in GitHub Copilot このエラーは、Laravelアプリケーションがログファイルに書き込もうとした際に、 ファイルの書き込み権限が不足しているために発生しています。以下の手順で解決できます。 1)Dockerコンテナに入る docker exec -it <コンテナ名> /bin/bash 2)権限を変更する chmod -R 775 /var/www/html/storage chown -R www-data:www-data /var/www/html/storage 【Laravel】 Bladeテンプレートエンジンを使用する場合、 ファイル名の末尾に.blade.phpを付ける必要があります。 php artisan serveは、Laravelアプリケーションのためのビルトイン開発サーバーを起動するコマンドです https://reffect.co.jp/laravel/laravel-breeze-next-js https://www.udemy.com/course/nextjslaravelbreeze/?srsltid=AfmBOop6AB002927qfNnmtNHzLx2oS9NSaeWHsnH8TJoPRcB0iE2DFNa&couponCode=ST6MT103124 Breezeとは Laravel Breezeは、Laravelアプリケーションにシンプルで軽量な認証機能を提供するスターターパッケージです。 ユーザー登録、ログイン、パスワードリセットなどの基本的な認証機能をすぐに利用できるようにします。 Breezeのインストール手順 以下の手順に従って、Laravel Breezeをインストールします。 ComposerでBreezeをインストール docker exec -it laravel_app composer require laravel/breeze –dev Breezeのインストール docker exec -it laravel_app php artisan breeze:install NPMパッケージのインストールとビルド docker exec -it laravel_app npm install docker exec -it laravel_app npm run dev マイグレーションの実行 docker exec -it laravel_app php artisan migrate Dockerに入る docker exec -it laravel_app /bin/bash コンテナ内でLaravelの開発サーバーを起動 root@25a3630a398d:/var/www/html# php artisan serve php artisan serveは不要: Dockerを使用する場合、php artisan serveコマンドは通常必要ありません。 このコマンドは主に、Dockerを使用せずにローカル環境で開発する場合に便利です。

「WordPress」をDockerで構築(初心者)

【簡単】WordPress環境をDockerで構築手順

1)作業フォルダを作成

2)1)内に「docker-compose.yml」を作成

version: "3.7"
services:
 db:
  image: mysql:8.0
  container_name: mysql8
  restart: always
  environment:
    MYSQL_ROOT_PASSWORD: password # rootユーザのパスワード
    MYSQL_DATABASE: db_local # WordPress用データベース名
    MYSQL_USER: wp_user # WordPress用データベース接続ユーザ名
    MYSQL_PASSWORD: password # WordPress用データベース接続パスワード
 WordPress:
  image: wordpress:latest
  container_name: wordpress
  restart: always
  depends_on:
     - db
  ports:
     - 10090:80
  environment:
    WORDPRESS_DB_HOST: db:3306 # データベースサーバ名:ポート番号
    WORDPRESS_DB_USER: wp_user # WordPress用データベース接続ユーザ名(dbの内容に合わせる)
    WORDPRESS_DB_PASSWORD: password # WordPress用データベース接続パスワード(dbの内容に合わせる)
    WORDPRESS_DB_NAME: db_local # WordPress用データベース名(dbの内容に合わせる)
    WORDPRESS_DEBUG: 1 # デバッグモードON
  volumes:
    - ./wp-content:/var/www/html/wp-content
  #    - ./html:/var/www/html
 phpmyadmin:
  image: phpmyadmin/phpmyadmin:latest
  container_name: phpmyadmin_ingrid
  restart: always
  depends_on:
     - db
  ports:
     - 10099:80

volumesは画像のパス等にあわせてください

ボリュームマウントの概念

Dockerコンテナは、デフォルトで隔離された環境を提供します。これにより、コンテナ内のファイルシステムはホストマシンから独立しています。しかし、多くの場合、ホストマシン上のファイルやディレクトリをコンテナ内で直接利用したい場合があります。このような場合にボリュームマウントが使用されます。

ボリュームマウントの構文は以下の通りです

volumes:
  - <ホストのパス>:<コンテナのパス>
Host Machine ./wp-content/ themes/ plugins/ uploads/ languages/ WordPress Container /var/www/html/wp-content/ themes/ plugins/ uploads/ languages/

3)作業ディレクトリにて下記コマンド

docker-compose up -d

多少時間がかかるかもしれません。

4)「Docker Desktop」で確認

エラーログの確認方法

1. Dockerコンテナ内でWordPressのエラーログを有効化

まず、WordPressのwp-config.phpにエラーログを有効にする設定を追加します。

phpコードをコピーするdefine('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

この設定により、エラーログがwp-content/debug.logに保存されます。

2. Dockerコンテナ内でエラーログを確認する

方法1: docker-compose execでコンテナ内に入って確認

Dockerコンテナ内に直接アクセスして、エラーログを確認することができます。

bashコードをコピーするdocker-compose exec <コンテナ名> bash

コンテナ内に入ったら、エラーログファイルにアクセスします。

bashコードをコピーするcat /var/www/html/wp-content/debug.log

<コンテナ名> は、WordPressが稼働しているコンテナの名前に置き換えてください。

方法2: docker-compose logsでコンテナのログを直接表示

WordPressやApache/Nginxのエラーログは、コンテナの標準出力にも表示される場合があります。以下のコマンドでログ全体を確認できます。

bashコードをコピーするdocker-compose logs -f <コンテナ名>

上記コマンドで、リアルタイムにエラーログを追跡しながら確認できます。

方法3: ログファイルをホストマシンにマウント

Dockerのdocker-compose.ymlファイルで、WordPressのwp-contentディレクトリをホストマシンと共有すると、ホスト側で直接debug.logを確認できます。たとえば、以下のように設定を変更します。

yamlコードをコピーするservices:
  wordpress:
    volumes:
      - ./wp-content:/var/www/html/wp-content

これにより、./wp-content/debug.logでホスト側からログを確認できるようになります。

参考サイト

【入門】Dockerで環境構築|WordPress環境をローカルPCに作ろう!
https://coosy.co.jp/blog/docker-environment

【基本情報】テクノロジ

ハードウェア

AND演算(論理積)

入力入力出力
000
010
100
111

NOR演算(否定論理和)

入力入力出力
001
010
100
110

NAND演算(否定論理積)

入力入力出力
001
011
101
110

XOR演算(排他的論理和)

入力入力出力
000
011
101
110

データベース

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

セキュリティ

動的解析(ブラックボックス解析)

検体を実際に動作させる

静的解析(ホワイトボックス解析)

動作させず、内部構造の解析をする

公開鍵暗号方式

  • 公開鍵暗号方式は、共通鍵暗号方式より処理が遅い

<暗号化:受信者がペアで作る>

<デジタル著名:送信者がペアで作る>

暗号化受信者が作成受信者公開鍵で暗号化、受信者秘密鍵で複合
デジタル著名送信者が作成送信者秘密鍵で作成、送信者公開鍵で検証

RSA

公開鍵暗号方式の暗号技術

公開鍵基盤

  • PKI
  • 公開鍵の認証

共通鍵暗号化方式

  • 暗号化複合化で同じ鍵
  • 処理速度が速い
  • 事前に鍵を渡す必要があり、限られた相手との通信に向いている。

ファイアウォール

DMZ

内部(Inside)ゾーン外部から守るべきネットワーク。基本的に信頼できるものとして扱う。
外部(Outide)ゾーン攻撃元となる可能性のあるネットワーク。基本的に信頼できないものとして扱う。
DMZ
(DeMilitarized Zone)
非武装ゾーン:内部と外部の中間。基本的に外部からアクセスできるのはこのゾーン

プロキシサーバ

  • インターネット接続ができていない内部ネットワーク代理でインターネットに接続する
  • キャッシュ機能 → 高速マルウェアを検出

リバースプロキシ

  • ウェブ閲覧者代理でウェブサーバに接続する
  • ウェブサーバへの攻撃を防ぐ

基礎理論

浮動小数点数

32ビット形式

  • 符合 … 正→0、負→1
  • 指数部 … 2のn乗のn数値を2進数で表記
  • 仮数部 … 正規化した小数点以下の数値
    (※正規化 0.01 → 0.1 × 2の−1乗)

EEE754

例)

  1. 元の数  -(1000111)(2進数) × 2(0乗)
  2. 正規化  (1.000111)(2進数) × 2(6乗)
  3. 符合、指数、仮数を計算
    • 符合:+ → 0、− → 1
    • 指数:+127
      6 + 127 = 133
      =(10000101)(2進数)
    • 仮数:整数部1を削除
      1000111 → 000111
  4. 110000101000111

誤差

桁落ち

絶対値の差が小さい2つの値の差

情報落ち

大きい値と小さい値の計算で小さい値の情報が無視されてしまう

CRC方式

生成多項式によって、誤り検出用データを付加

システム開発技術

スタブ

トップダウンテストで、下位のモジュールとしての、テスト用モジュール

ドライバ

ボトムアップテストで、上位のモジュールとしての、テスト用モジュール

E-R図

  • Entity(実体) Relationship Diagram
  • エンティティと呼ばれる四角形ををリレーションと呼ばれる線でつなぎます。
Photoshop

デザインのコツ

黄金比を意識した縦横比

1.618で割るもしくはかける

メニューバー

イメージ

色調補正

カラーバランス

レイヤー

切り抜き等で生じた、境界線の不自然な状態を調節します。

メニューバーのレイヤー → マッティング → フリンジ削除、黒マット削除、白マット削除

編集メニュー

画像の移動と変形

フィルターメニュー

ぼかし → ぼかし(放射状)

ツールバー

自動選択ツール

許容値高いほどより広い範囲の色が選択。
アンチエイリアスキレイになるので基本チェック
隣接チェックを外すと隣接していない部分もまとめて選択。

スポット修正ブラシツール

汚れやテキストを消すことができます。

グラデーションツール

https://mappyedit.com/photoshop-add-gradients/

テキストツール

テキストボックス

横書き文字ツールを選択してテキストボックスの設置したい範囲をドラッグで指定。
テキストは貼り付け。

文字マスクツール

画像を文字で切り抜くとき使います。

カスタムシェイプツール

オプションバーから色んな種類を選択できます。

パネル

レイヤーパネル

レイヤースタイルを追加

ベベルとエンボス

クリッピングマスクを作成

  • 2枚のレイヤーを使用して作成
JavaScript基本サンプルコード

JavaScriptローカル実行環境構築

https://qiita.com/Toshihiro_Watanabe_/items/19e4b83bc9718451984f

上記サイト参考にしたところWindows環境だとエラーが起きたため下記のように修正しました。

{
    "scripts": {
        "1": "node main < case1.txt",
        "2": "node main < case2.txt",
        "3": "node main < case3.txt",
        "4": "node main < case4.txt",
        "5": "node main < case5.txt",
        "new": "copy main.template.js main.js && type nul > case1.txt && type nul > case2.txt && type nul > case3.txt && type nul > case4.txt && type nul > case5.txt"
    }
}
要素(画像、動画、音声、フォーム)

media属性

media属性の値説明
all全てのメディア(デフォルト)
screen一般的なディスプレイ
printプリンタ
projectionプロジェクター
handheld携帯電話などの小さな機器
braille点字ディスプレイ
embossed展示プリンタ
speech音声読み上げソフト
ttyターミナル
tvテレビ

media要素

img要素

属性
srcデータのアドレス(必須
alt画像が利用できない場合に代わりに使用されるテキスト
限定的な場合で省略可能
srcset候補画像 … URLと記述子
sizesメディアクエリと表示幅
width
height
幅、高さ(整数)
  • 「x」は必ず小文字
  • 浮動小数点数
  • デフォルト値は「1x」

picture要素

picture要素は子要素にsource要素とimg要素をもち、画面幅にあわせて画像を切り替えて表示することができます。

CSSのdisplayプロパティを使い、表示・非表示を切り替える場合と違い、最適な画像のみ読みこむので、不要な画像の読み込みによる表示速度の低下が起きません。

<picture>
  <source media="(min-width: 961px)" srcset="img-pc.jpg">
  <source media="(min-width: 641px)" srcset="img-medium.jpg">
  <img src="img-small.jpg">
</picture>
  • imgは1個必須
  • sourceは0個以上

source要素

picture要素内のsource要素に指定可能な属性

source要素src属性は指定できない

属性
media画像の使用条件 メディアクエリ
srcset候補画像 … URLと記述子
必須
sizesメディアクエリと表示幅
type画像の種類 … MINEタイプ
width
height
幅、高さ(整数)

video、audio要素内のsource要素に指定可能な属性

  • src
  • crossorigin
  • poster
  • preload
  • autoplay(論理属性)
  • loop(論理属性)
  • muted(論理属性)
  • controls(論理属性)
  • width
  • height
属性
srcデータのアドレス
必須
type画像の種類 … MINEタイプ

audio要素

video要素

video要素で指定可能な属性

  • autoplay:自動再生
  • loop:ループ再生
  • muted:ミュート
  • controls:コントロール表示
  • playsinline:インライン再生
  • preload:事前読み込み
  • poster:サムネイル画像

<javascriptで操作可能>

  • コンテンツの再読み込み
  • 再生開始、中断
  • 再生位置の変更

<データを取得利用>

  • コンテンツが再生・早送り可能な状態か
  • 再生メニューの表示、非表示
  • ネットワークの状態
  • エラー内容
  • コンテンツの場所
  • コンテンツの長さ
  • 音量(0〜1)
  • トラック情報
<video controls>
<source src="〇〇/〇〇" type="video/〇〇">
<source src="〇〇/〇〇" type="video/〇〇">
</video>

コーデック

ファイルを圧縮・変換するためのアルゴリズム

オーディオコーデック … AAC(スタンダード、MP3(古い動画圧縮形式、Vorbis(Google陣営の標準)
ビデオコーデック … H.264(最新規格、VP8、VP9(Google陣営の標準、Theora(低普及、主にOGGコンテナで利用)

コンテナ

複数のコーデック(圧縮変換アルゴリズム)、データの種類をまとめたもの

<video要素がサポートしているコンテナ>

  • WebM
  • MP4
  • Ogg
ファイル形式(コンテナ)拡張子MINEタイプ
MPEG
古い動画形式
.mpg .mpegvideo/mpeg
MP4.mp4video/mp4
WebM
Google陣営の標準動画形式
.webmvideo/webm
Ogg
低普及
.ogvvideo/ogg
QuickTime.movvideo/quicktime
ファイル形式(コンテナ)拡張子MINEタイプ
MP3.mp3audio/mpeg
AAC.m4aaudio/aac
Ogg.oggaudio/ogg
WAVE.wavaudio/wav

track要素

  • audio要素もしくはvideo要素の子要素
  • 外部テキスト・トラックを指定する空要素
    テキスト用ファイル(WebVTT:Web Video Text Tracks)に、hh:mm:ss:tttの時間単位で指定

canvas要素

  • JavaScriptで図を作成できる要素
  • ビットマップで描画
  • ベクター画像の描画はできない
  • 拡大縮小で画像が荒くなる
  • PNG、GIF、JPEGなどの画像を利用できる
属性説明
width正の整数描画できる領域の幅
(デフォルト300px)
height正の整数描画できる領域の高さ
(デフォルト150px)




form要素

<<form>タグで定義したidを指定することで、<form>タグ外で定義したタグと、<form>の関連付けをします。>

<form action="" method="post" id="form1">
<textarea name="in1" cols="30" rows="3" maxlength="90" required>
</textarea>
</form>
<input type="submit" name="test1" value="送信" form="form1">

<部品が外部にあるとき>
部品のform属性をform要素のid属性を指定して関連づけができる

【formの部品】

氏名:


【form要素】

<p>【formの部品】</p>
<p>氏名:<input type="text" name="name" form="test"></p>
<br>
<p>【form要素】</p>
<form method="post" action="" id="test">
<p><input type="submit" value="送信する"></p>
</form>

<label要素にfor属性>

<form action="" method="post">

<p>
<label for="name1">お名前1:</label>
<input type="text" id="name1" name="name1">
</p>

<p><input type="submit" value="送信"></p>

</form>
属性名
novalidate入力データのチェックを行わない
論理属性
autocomplete・前に入力した内容が入力候補として表示
on(規定値)/off

input要素

属性名
typeフォーム部品の種類
accepttype=”file”のとき受付可能なファイル
MINEタイプ(カンマ区切り)
autocomplete要素のオートコンプリート機能
formフォーム部品を特定のform要素(id属性の値で指定)と関連づける
formnovalidate入力データのチェックを行わない
論理属性

<autocompleteの属性値>

属性値
on自動保管機能ON
off自動保管機能OFF
name氏名
email電子メール
new-password新規パスワード

<input要素type属性一覧>

text : password : search : email : url : tel : number : range : checkbox : radio : submit : reset : button : image(画像ボタン) : file : color : range : date : month : week : time : datetime-local(タイムゾーンなし) : hidden(表示させず送信する) :
type属性
email「@」をがないと警告が出る
range・スライダー
fileaccept=”MIMEタイプ” … ファイルの種類
multiple=”論理属性” … 複数データの許可
required=”論理属性” … 入力・選択を必須に

textarea要素

属性
cols1行に入力可能な文字数
rows入力欄の行数
resizenone … リサイズ不可。
horizontal … 水平方向のみリサイズ可。
vertical … 垂直方向のみリサイズ可。
both … 水平・垂直方向ともリサイズ可。(デフォルト)

capture 属性

説明
userスマートフォンの画面側のカメラやマイクが起動
environment外向きのカメラやマイク起動

progress要素

  • 進捗状況
  • value=”〇〇” … 現在の値
  • max=“〇〇” … 全体の値
<p>progress要素 … 進捗状況 
<progress value="40" max="100">40%</progress>
</p>
<p>progress要素 … value属性指定なし
<progress>処理中</progress>
</p>
<p>meter要素 … 〇〇の測定値
<meter value="91200000000" min="0" max="160000000000">91,200,000,000バイト使用</meter>
</p>

meter要素

value=””現在の値
必要属性
min=””最小値
max=””最大値
low=””低い領域
high=””高い領域
optimum=””最適な値

keygen

  • 公開鍵暗号方式
  •  秘密キーはローカル環境に保存され、公開キーはサーバーに送信
<form>
  <keygen name="key"/>
  <button>送信</button>
</form>

datalist要素

  • option要素でドロップダウン選択肢を作成
  • 【関連づける】datalist要素のid要素input要素のlist属性
<p>
 <label>
  学習している資格:
 <input type="text" list="study">
 <datalist id="study">
  <option value="HTMLプロフェッショナル認定試験">
  <option value="CCNA">
 </datalist>
 </label>
</p>

label要素

<label要素とフォーム部の関連付け>

(labelの中にフォームを入れる)

<label><input type="radio" name="form1" value="father">父</label>
<label><input type="radio" name="form1" value="mother">母</label>
(フォームのid属性を指定 → labelのfor属性でid属性を関連付ける)

<input type="radio" name="form1" value="father" id="id1">
<label for="id1">父</label>

fieldset要素

  • フォーム関連の要素をグループ化

legend要素

  • fieldset要素のグループ名(キャプション)を表示させる

select要素

  • option要素でドロップダウン選択肢を作成
  • 選択肢以外は入力不可
<select id="drink">
  <option value="0">選択してください</option>
  <option value="1">オレンジジュース</option>
  <option value="2">コーヒー</option>
  <option value="3">紅茶</option>
  <option value="4">ウーロン茶</option>
</select>

embed要素

プラグインを使用して外部データを組み込むための空要素

object要素

  • 様々な形式の外部データを組み込みます
  • data属性でファイルを指定し、type属性でMIMEタイプを指定

param要素

  • この要素は廃止されてる
  • object要素によって呼び出されたプラグインのパラメータを設定
  • object要素の子要素

data属性

  • カスタムデータ属性と呼ばれる
  • JavaScriptと組み合わせて使う
  • 制限あり
    • xml始めない
    • コロン (:)  ×
    • 大文字のAからZ ×
<div data-〇〇=”□□”>サンプル</div>

セレクタ[data-○○=”□□”]{
 プロパティ:値;
}

kbd要素

キーボード入力

samp要素

コンピュータからの出力

さくらインターネットにGitHubからクローンする手順

ローカルからさくらインターネットにssh接続

.sshディレクトリ作成

.sshディレクトリとは?

.sshディレクトリは、SSH(Secure Shell)に関する鍵や設定ファイルを保存するためのディレクトリです。SSHでの安全な接続を確立するために、公開鍵や秘密鍵が必要になるため、このディレクトリが使用されます。

ユーザーのホームディレクトリ直下(~/.ssh/)に作成

このディレクトリは通常、ユーザーのホームディレクトリ直下(~/.ssh/)に配置されます。

アクセス権限を自分のみに制限し、セキュリティを確保するための設定

mkdir ~/.ssh
# アクセス権限を自分のみに制限し、セキュリティを確保するための設定
chmod 700 ~/.ssh

SSH鍵の生成

もしまだSSH鍵を作成していない場合、以下のコマンドをPowerShellで実行して鍵を作成できます

# SSH鍵を生成する(RSA方式、鍵長4096ビット)
ssh-keygen -t rsa -b 4096
.ssh/
├── id_rsa             # 秘密鍵(サーバーにアクセスする際に使用)
├── id_rsa.pub         # 公開鍵(サーバーに登録し、鍵認証で接続)
└── known_hosts        # 接続したことのあるホスト(サーバー)のリスト
sakura internet

開鍵のさくらサーバーへの登録

さくらの管理画面から、生成した公開鍵(~/.ssh/id_rsa.pub の内容)を登録します。

「サーバー情報」→「SSH公開鍵」→「新規追加」クリック

.ssh/configファイルの設定

.ssh/config ファイルに追加する設定は、SSH接続を簡略化し、複数のサーバーにアクセスする際の手間を減らすためのものです。ここでは、さくらインターネットのレンタルサーバーに接続するための設定について詳しく説明します。

~/.ssh/configファイルに以下のような設定を追加します:

# 接続名を定義する(例として「sakura」を設定)
# 「ssh sakura」と入力するだけで接続できるようになる
Host sakura
    # 接続先のIPアドレスまたはドメイン名を指定
    # ここにはさくらインターネットのサーバーのIPやホスト名を記述
    HostName [さくらサーバーのIPアドレスまたはホスト名]
    # SSHでログインするユーザー名
    # さくらのアカウント名を記述
    User [さくらのアカウント名]
    # SSH接続に使用するポート番号
    # 通常22がデフォルトポート
    Port 22
    # 使用する秘密鍵ファイルのパスを指定
    # デフォルトの鍵(~/.ssh/id_rsa)を使用
    IdentityFile ~/.ssh/id_rsa
.ssh/
├── config             # SSHの接続設定ファイル(複数サーバーの設定が可能)
├── id_rsa             # 秘密鍵(サーバーにアクセスする際に使用)
├── id_rsa.pub         # 公開鍵(サーバーに登録し、鍵認証で接続)
└── known_hosts        # 接続したことのあるホスト(サーバー)のリスト

さくらインターネットにssh接続

ssh sakura

Are you sure you want to continue connecting (yes/no/[fingerprint])?

このメッセージは、初めて新しいホストに接続しようとしている際に表示される標準的なセキュリティ警告です。

さくらインターネットの管理画面やドキュメントでホストのフィンガープリントを確認 → ”yes” と入力して続行します。

さくらインターネットからGitHubにssh接続

bashに変更

% bash
[siennahare23@www3910 ~]$

公開鍵と秘密鍵を作成

[siennahare23@www3910 ~]$ cd ~/.ssh
[siennahare23@www3910 ~/.ssh]$ ssh-keygen -t rsa -b 4096

鍵の名前、パスフレーズを要求されますが、「Enter」で進めるとデフォルトの名前(「id_rsa」、「id_rsa.pub」)でパスフレーズを必要としない鍵のペアが生成されます

SSH鍵を生成すると、以下のようなメッセージが表示されます。このメッセージには秘密鍵の保存場所、公開鍵の指紋(Fingerprint)、ランダムアート画像などが含まれます。

Generating public/private rsa key pair.en -t rsa -b 4096
Enter file in which to save the key (/home/siennahare23/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /home/siennahare23/.ssh/id_rsa.
Your public key has been saved in /home/siennahare23/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:3x+egZ5oS58YhHEoWZbiDnzFg+00qH2/y/Da9G1olgQ siennahare23@www3910.sakura.ne.jp
The key's randomart image is:
+---[RSA 4096]----+
|       =o.       |
|      ++O.       |
|   . +o=oo.      |
|    + +.o+E      |
|     + .S...     |
|      .  o....   |
|        . =oooo  |
|         BoB=*.+ |
|        .oO=*.=  |
+----[SHA256]-----+

実際に使用する際には、秘密鍵 (id_rsa) の内容は絶対に公開しないように注意しましょう。

Githubに公開鍵を登録

公開鍵の内容を表示し、全文コピーします

cat ~/.ssh/id_rsa.pub

コピーした公開鍵の内容をはりつけ

configファイルの作成

[siennahare23@www3910 ~/.ssh]$ touch ~/.ssh/config

config

※秘密鍵の名前を変更している場合はデフォルトの「id_rsa」から変更する必要があります

Host github.com
  HostName github.com
  IdentityFile ~/.ssh/id_rsa
  User git
# GitHubにSSH接続のテストを行うためのコマンド
ssh -T git@github.com

このコマンドを実行すると、GitHubに鍵を登録していれば次のようなメッセージが表示されます

Hi username! You've successfully authenticated, but GitHub does not provide shell access.

GitHubからリポジトリをクローン

方法1:HTTPS方式 (https://github.com/...)

  • パスワードまたはPersonal Access Tokenが必要
  • プロキシ環境でも動作
  • 認証の度に認証情報の入力が必要
git clone https://github.com/yourusername/your-repository.git .

方法2:SSH方式 (git@github.com:…):

git clone git@github.com:ida240609/src.git .
  • SSH鍵による認証 より安全
  • パスワード入力不要 一度設定すれば再認証不要
  • セキュアな通信
APIの基礎知識

マルチメディア・
グラフィック系

SVG

  • ベクターイメージ(情報を数値化して記録)
  • → 複雑な画像の表示は処理速度が低下
  • XML
  • 拡大・縮小後も画像が劣化しない
  • 描写した図形はDOM要素 → JavaScriptで操作可能

ストリーミング配信

  • HLSMPEG-DASH
  • ダウンロードの完了待たずに再生可能
  • HTTPサーバで配信隣ブラウザでの再生が主流
  • プラグイン不要
  • ファイルとして残らないため → 著作権の保護

HLS

  • HTTP Live Streaming
  • Apple社
  • ストリーミングプロトコル
  • HTTP

MPEG-DASH

  • 「Dynamic Adaptive Streaming over HTTP」
  • 国際標準ストリーミングプロトコル
  • HTTPベース
  • ファイルのコーデックに依存しない

Media Source Extensions

  • video要素とaudio要素を拡張
  • JavaScriptのAPI
  • HLS、MPEG-DASHをサポート
  • プラグイン無しでサポート
  • 動画を分割 → 編集、広告挿入
  • ネットワークに応じてストリーミングのビットレートを変更 → 途切れず再生
  • ライブ配信は時間を過ぎれば視聴不可

DRM

  • Digital Rights Management
  • 特定のソフトウェアまたはハードウェアでのみ再生可能

Encrypted Media Extensions

DRMで暗号化されたコンテンツをブラウザで復号する際使用

DOM

  • Document Object Model
  • HTML、XMLを取り扱うためのAPI 
  • 階層構造のドキュメントツリー(DOMツリー

デバイスアクセス系

Payment Request API

HTML5で利用できる決済API

Generic Sensor API

デバイスのセンサーにアクセスするAPIは値を取得する方法はバラバラですが、Generic Sensor APIは統一的にするAPIです。

  • JavaScriptから各種センサーにアクセスする方法を統一
  • 環境光、近接、磁気、加速度、線形加速度、ジャイロスコープ、絶対方位、相対方位、重力

Geolocation API

  • 緯度、経度
  • 高度、経度の精度
  • 高度
  • 高度の精度
  • 方角
  • 速度
  • ユーザの許可が不要
  • ユーザの環境依存

Notifications API

通知

Ambient Light Event

デバイス付近の照度(光量レベル)を取得

Drag and Drop API

ファイルをドラッグ&ドロップ

File API

<input type=file multiple> → JavaScriptで処理

Progress Events

プログレスバー

DeviceMotion Event

加速度センサー

UI Events

DOM3 Events(UI Events)マウス、キーボード
Touch Eventsタッチパネル、トラックパッド
Pointer Eventsマウス、ペン、タッチパネル
DeviceOrientation Eventデバイスの方角や傾き(ジャイロセンサー)

オフライン・ストレージ系API

Web Storage

  • ブラウザ側でデータを保存する機能
  • Key-Value形式
  • 文字列のみ保存可能
  • JavaScriptでデータを操作
sessionStorageブラウザ閉じるとデータ消失
localStorageブラウザ閉じてもデータを保持

Indexed Database API

  • ブラウザ側でデータを保存する機能
  • Key-Value形式
  • JavaScriptを使用
  • 高速な検索や、トランザクションでデータの整合性を維持
  • 文字列、ファイル、blobBinary Large OBject)などを格納できる
  • ブラウザを閉じても明示的に破棄しない限りデータを保持
CookieWeb StorageIndexed
Datebase
Web SQL
(参考)
4KBブラウザによるブラウザによるブラウザによる
保存期間は有限保存期限は無制限
/セッション
保存期限は無制限保存期限は無制限
文字列文字列ネイティブ/
オブジェクト
ネイティブ/
オブジェクト
非同期でない非同期でない
Key-Value形式
非同期
Key-Value形式
非同期
セッションで
使用される
シンプルで
大容量保存可
実装が進んでいる非推奨

通信系API

Web Workers

Webコンテンツのスクリプトをバックグラウンドで実行するための手段

Service Workers

  • ブラウザがWebページとは別バックグラウンドでスクリプトを実行
  • リソースをキャッシュしてオフラインで利用可能

Push API

  • プッシュ通知を受信するだけ
  • fetchを利用し通知の表示、メッセージ本体の受信
  • Service Workersアプリケーション起動不要
  • メッセージをサーバに問い合わせにはfetchが必要

fetch

  • 検索結果から1件抜き出す処理
  • リソースを非同期で取得
  • サーバに問い合わせ

XMLHttpRequest

  • JavascriptHTTP通信をする
  • Webサーバと非同期通信全体を更新せずに必要なデータを更新)を行うAPI
  • Ajaxで利用される

XHTML

  • 空要素 → 終了タグつける開始タグの閉じを「/>」
  • html要素の開始タグにXHTML用の名前空間を指定

Ajax

  • Webブラウザ内非同期通信動的なページ処理
  • Asynchronous(非同期) JavaScript + XML
  • XMLHttpRequestJavaScriptを用いて使用(実際にはjQueryが一般的)

Server-Sent Events

  • サーバからのプッシュ送信を実現するAPI
  • 非同期でサーバからブラウザにデータを送信
  • MINEタイプはtext-event-stream

WebSocket API

  • Webサーバとクライアントで双方向通信(サーバ側からも能動的にメッセージを送信)を可能にするJavaScriptのAPI
  • 例)チャット
  • テキストデータ、バイナリデータ OK

<WebSocket APIのイベント>

openブラウザとサーバ間の接続が確立されるまでは非同期、接続が確立するとopenイベントが発生
closeブラウザとサーバ間が切断
errorブラウザとサーバ間でエラー発生
messageメッセージを受信した

WebRTC

  • Web Real-Time Communication
  • ウェブブラウザ
  • 映像や音声
  • P2P(Peer to Peer) … デバイス間で対等(ブラウザ⇄サーバでなくブラウザ同士)で通信
レスポンシブ、マルチデバイス

Mobile First

  • Luke Wroblewski氏が提唱
  • 制約が大きいモバイルサイトにおいての利用を優先的に設計

メディアクエリ

メディアクエリによって、条件にあわせてCSSを適用するかどうか指示を出すことができます。

論理積and
論理和,orは使用しない
■link要素でCSSを読み込む際に、media属性を使用
<link rel="stylesheet" media="screen and (max-width: 480px)" href="style.css">

■CSSに条件を記述
@media screen and (max-width: 480px) {
/* CSSを記述する */
}

■「@import」で外部スタイルシートを読み込み時デバイスの条件を記載
@import "style.css" screen;
  • not … 条件が逆に
  • or … 使用不可

メディア型

all全ての機器(デフォルト)
screenPC、スマートデバイスの画面
printプリンタ
projectionプロフェクタ
tvテレビ
handheld携帯用機器
tty文字幅が固定の端末(テラタイプ、ターミナル
speechスピーチ、シンセサイザー
braille点字ディスプレイ
embossed点字プリンタ

メディア特性

width
min-width
max-width
ビューポートの幅
整数(負の値は×)
heigh
min-heigh
max-heigh
ビューポートの高さ
整数(負の値は×)
device-width
min-device-width
max-device-width
デバイスの幅
整数(負の値は×)
device-heigh
min-device-heigh
max-device-heigh
デバイスの高さ
整数(負の値は×)
aspect-ratio
min-aspect-ratio
max-aspect-ratio
表示領域のアスペクト比
水平/垂直の整数で指定
device-aspect-ratio
min-device-aspect-ratio
max-device-aspect-ratio
デバイスのアスペクト比
水平/垂直の整数で指定
resolution
min-resolution
max-resolution
デバイスの解像度(最小最大)
整数+dpidpcmdppx
orientationlandscape:横置き
portrait:縦置き
color
min-color
max-color
デバイスの色数
整数(負の値は×)
monochrome
min-monochrome
max-monochrome
デバイスがモノクロ階調数。
モノクロでない場合は0。

整数(負の値は×)
scanテレビの時のスキャン方式

Web Clip

  • ウェブサイトへのショートカット
  • rel属性に「apple-touch-icon
  • rel属性に「apple-touch-icon-precomposed」 … 自動装飾OFF
  • href属性で画像を指定
  • iOSではsizes属性でサイズ別に指定可能

ビューポート

  • ブラウザの表示領域
  • HTMLのmeta要素から設定
<meta name="viewport" content="width=device-width">content="width=device-width"と記述することで、
 表示領域の幅を端末画面の幅に合わせられる

フルードグリッド

  • グリッド幅、グリッドの数を画面サイズに合せて変化
  • メディアクエリを使用
  • JavaScript使用する場合あり

フルードイメージ

  • img要素でwidth、max-widthパーセントなど相対値で設定
  • height → auto 既に縦横幅を指定してある画像も縦横比維持
  • max-heightプロパティは使用不可
    (いくつかのWebブラウザで、ウインドウ幅に応じて高さが変化しない)
■スタイル設定
img {
    max-width:100%;
    height:auto; … 縦横比を保持
 }

CSSスプライト

  • 複数の画像を連結、1つにまとめる
  • background-imagebackground-positionプロパティで設定
  • リクエスト回数を減らす → ページ速度の向上、通信が不安定でも表示
  • 修正が複雑

高解像度画面

  • アイコンにSVG、Webフォントを使うことで、拡大によるぼやけを防ぐ
  • ピクセル密度2 … 4デバイスピクセルが1CSSピクセル

Retinaディスプレイ

  • 4デバイスピクセルが1CSSピクセル

ファビコン

  • Favorite Icon
  • ブックマークやタブのアイコン
<link rel="icon" href="/favicon.png">
<link rel="shortcut icon" href="/favicon.png">

ショートカットアイコン、Webクリップ

  • Webサイトへのショートカットをホーム画面上に追加
<link rel="apple-touch-icon" href="">

※OSによるハイライト、影を避けたい場合
rel属性にapple-touch-icon-precomposedを指定

スタンドアロンモード

  • iOS限定アドレスバーやツールバーを消す
<meta name="apple-mobile-web-app-capable" content="yes">

format-detection

  • 勝手にリンクされないようにmetaタグで制御
自動でハイパーリンクとして認識する機能を無効化
<meta name="format-detection" content="telephone=no, email=no, address=no">
CSS

CSSの基礎知識

セレクタ

セレクタ { プロパティ名 : 値 ;}

link要素

<!doctype html>
<html>
<head>
.....
<link rel="stylesheet" href="style.css">
</head>
.....

style要素

<!doctype html>
<html>
<head>
.....
<style>
p { color: red; }
</style>
</head>
.....

style属性

.....
</head>
<body>
<p style="color: red;">
.....
</p>

@import

  • @import “style.css“;(シングルクオーテーションでも省略も可能)
  • @import url(“style.css“);(シングルクオーテーションでも省略も可能)
  • @import “style.css” screen, print;

単位

em親要素のフォントサイズを1とする
remhtml要素のフォントサイズを1とする root em 指定していないデフォルトは16px
ex要素のフォントのx-height(小文字xとほぼ同じ)を1
ch要素のフォント0の幅を1
pxピクセル、1/96インチ
ptポイント、1/72インチ
pcパイカ、12ポイント
inインチ、2.54センチ

単位の使い分け

emは親要素のフォントサイズを参照するのでletter-spacing疑似要素の間隔に使い、絶対的な値はborderでそれ以外はremにすることで、レスポンシブデザインに対応するスタイルにできます。

  • em … letter-spacingや疑似要素との間隔
  • px … border等可変でない値

セレクタ

属性セレクタ

属性セレクタ対象
[属性名]属性名の属性が指定されている(属性値は何でも良い)
[属性名=”属性値”]属性値全体が一致
[属性名~=”属性値”]スペース区切りの値どれかと一致
[属性名=”属性値”]ハイフン区切りの前半が一致
[属性名^=”属性値の始め”]属性値の始めで始まる
[属性名$=”属性値の終わり”]属性値の終わりで終わる
[属性名*=”属性値の一部”]属性値の一部を含む

擬似クラス

  • 擬似要素はセレクタの最後にのみ配置可能
  • :擬似クラス コロンは1つ
  • ::疑似要素 コロンを2つ
属性セレクタ対象
:nth-child(式)先頭からn個目の要素から(式)おき
:nth-last-child(式)最後からn個目の要素から(式)おき
:nth-of-type(式)先頭からn個目の要素から(式)おき
(指定要素と同じ)
:nth-last-of-type(式)最後からn個目の要素から(式)おき
(指定要素と同じ)
:first-child子要素の中で最初の要素
:last-child子要素の中で最後の要素
:first-of-type子要素の中で最初の要素
(指定要素と同じ)
:last-of-type子要素の中で最後の要素
(指定要素と同じ)
:only-child唯一の子要素
:only-of-type唯一の子要素
(指定要素と同じ)

属性セレクタ

  • p[class=”abc”]
    完全一致
  • p[class|=”abc”]
    「-」(ハイフン)区切りの属性値の前半が一致
  • p[class~=”abc”]
    複数の属性名のうち一つが一致
  • p[class^=”abc”]
    属性値で始まる
  • p[class$=”abc”]
    属性値で終わる
  • [p*=”abc”]
    「属性値の一部」の文字列を含む

擬似要素

セレクタ全体の最後部に1つだけしかつけることができない

擬似要素適用先
::first-line1行目
::first-letter1文字目
::before先頭にコンテンツ追加
::after最後にコンテンツ追加

結合子

ベンダープレフィックス

  • 草案段階の際
  • プロパティの先頭に付けます。
ベンダープレフィックスブラウザ
-moz-Firefox
-ms-FireaInternet Explorer、Microsoft Edgefox
-o-Opera
-webkit-Google Chrome, Safari

背景

background

<一括指定の順番>

background: url background-position / background-size background-repeat;

background-position / background-size の記述は決まっている

liner-gradient

background: linear-gradient(red, #eee);
background: linear-gradient(to bottom, red, #eee);
background: linear-gradient(180deg, red, #eee);

背景を2色にする

background: linear-gradient(90deg, #333 0%, #333 30%, #f4f7f8 30%, #f4f7f8 100%);

背景画像にオーバーレイ(透過カラー)を重ねる方法


background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../) center center / cover no-repeat;

hsl

object-fit

画像を様々な縦横比に対応するように整えてくれる便利なプロパティです。

cover表示エリアに余白がなくなるよう表示し、はみ出した部分はトリミングされます。
contain表示エリアをはみ出さないよう、最大の大きさで表示します。足りない部分は余白ができます。

フォント

font

  1. font-weight、font-style、font-variant(順不同、省略可
  2. font-size(省略不可)
  3. 「/」(スラッシュ)で区切る
  4. line-height(省略可)
  5. font-family(省略不可)

font-size

単位付きの数値
パーセンテージ親要素に対して指定
xx-small、x-small、small、medium、large、x-large、xx-large7種類のキーワードで指定
smaller、larger親要素に対して1段回小さい、大きい

font-familyプロパティ

  • family-nameまたはgeneric-familyの値を指定
    (※family-nameはインストールされたフォント名、@font-face{}で指定したフォント名)

font-variantプロパティ

  • スモールキャピタル(大文字を小さくした)の書体にする
  • 初期値「nomal」 → 「small-caps
  • woff、truetype、opentype、embedded-opentype、svg

line-height

  • normal … 自動的に指定、規定値は1.2
  • 単位付き数値
  • 単位なし数値 … フォントサイズ × 数値(推奨)

Webフォント

  • @font-faceで読み込む
  • インストール不要環境に依存しない
@font-face{
 font-family: mytestfont;
 src: url("fonts/testfont.woff") format("woff");
}
p{font-family: "mytestfont";}
■最初に任意のフォント、最後に総称ファミリを指定
font-family: フォントファミリ名1, フォントファミリ名2, 総称ファミリ名;

generic-family

  • 汎用フォントファミリー名
総称ファミリ名字体
serif明朝体
sans-serifゴシック体
cursive筆記体
fantasy装飾体
monospace等幅

writing-modeプロパティ

writing-modeプロパティは縦書きのプロパティに使用します。

.vertical {
 -ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
}

縦書きレイアウトのDEMO
123456789

text-shadow

p {
text-shadow: 1px 4px 8pxぼかし rgba( 0,0,0,0.4), -1px -4px 8px rgba( 255,0,0,0.4);
}

テキスト

text-decoration

関連プロパティを空白で区切って設定

  • text-decoration-line  下線・上線・取消線
  • text-decoration-style  線の種類(波線や二重線、破線)
  • text-decoration-color  色

word-break

break-all全ての文字の間で折り返し
keep-all空白以外折り返ししない(日本語は折り返さない)
normalその言語のルールに合わせる(初期値)

hyphens

manual&shy;でハイフネーション(初期値)
none一切行わない
auto言語に応じて

white-space

  • 連続する空白文字を1つの半角スペースに変換するか
  • 折り返しをどうするか
改行
ソースコード
まとめ折返し
normal×
pre××
nowrap××
pre-wrap×
pre-line

word-spacing

単語単語間隔

text-transform

テキストの大文字小文字を切り替える

uppercase半角アルファベット → 大文字
lowercase半角アルファベット → 小文字
capitalize半角アルファベット → 先頭の文字だけ大文字
none元の状態のまま
p { text-transform: capitalize;}

capitalize abc

direction

文字表記の方向

ltr左から右
rtl右から左

unicode-bidi

文字表記に関する指示、上書き

normal(初期値) UNICODEを組み込まない
embedインライン要素の場合UNICODEを組み込む
bidi-overrideUNICODE上書き

ボックス

box-sizing

content-boxpadding、borderはコンテンツのwidthとheightにを含めない(初期値)
border-boxpadding、borderはコンテンツのwidthとheightにを含める
inherit親要素継承

box-shadow

  1. 水平方向(必須)
  2. 垂直方向(必須)
  3. ぼやけかたの大きさ(省略可)
  4. 影の大きさ(省略可)
  5. 影の色(省略可)
  6. 影を内側にする(inset)(省略可)

filter: drop-shadow

filter:drop-shadow(水平方向 垂直方向 ブラー量 影色);

box-shadowとの違い

border

線の種類 太さ

width

max-width

  • 要素を親要素からはみ出さないようにする
  • max-width: 100%;にすると画面幅が画像より大きいときは画像のサイズで、小さいときは画面幅にあわせてはみ出ないようになります。
    ※画像の縦横幅が崩れたらheight: auto;

margin

  • 値が1つ … 上下左右
  • 値が2つ … 上下 左右
  • 値が3つ …  左右
  • 値が4つ … 

padding

display: flex;

row左から右への横並び
column上から下
row-reverserowの逆
column-reversecolumnの逆
<flex-directionプロパティ>

flex-shrink

flexアイテムの縮小率を指定するプロパティです。親要素のflexコンテナからはみ出た要素を縮小することができます。

また幅を縮めたくないときは、flex-shrink: 0;を指定します。

親要素にdisplay: flex;を指定し、子要素にflex-shrinkを指定します。

flex

flexとは、flex-growflex-shrinkflex-basisを同時に指定できるプロパティです。

flex: 1;

flex-grow: 1;flex-shrink: 1;flex-basis: 0;を同時に指定できるプロパティです。

flex-grow: 1;親要素の余っているスペースを整数で設定した比率で分配
flex-shrink: 1;親要素からはみ出たスペースを整数で設定した比率で縮める
flex-basis: 0;width、heightのように幅を初期値を設定できる
デフォルト値=autoを0で記載
https://miyattiblog.com/explanation-of-flex-property/

gapプロパティー

gapプロパティーはFlexboxおよびGridで要素間の間隔を設定できます。

display: grid;

CSS Gridで中央揃え

.sample {
background: #222;
color: #fff;
display: grid;
place-items: center;
padding: 60px;
}
gridで中央寄せ
https://developer.mozilla.org/ja/docs/Web/CSS/grid-template-columns


position

position: static; … プロパティ無し。既定値
position: relative;  親要素、または画面の左上を基準に位置を指定
position: absolute ;  親要素から top right bottom left の値によって決定 
position: fixed;
position: sticky; … 親要素から、追従する
【領域1】
sticky
【領域2】

z-index

  • 0が基準
  • 初期値はauto
  • positionプロパティにstatic以外が指定されている場合に適用
  • 後に書いたものが上に来る、擬似要素も
  • z-indexが有効なのは同一階層で

マルチカラム、フレキシブルボックス

columun-count

  • 何段組にするか
  • 初期値はauto

columun-width

columunsプロパティ

columns: カラムの幅 カラムの数;

columun-gapプロパティ

<p style="
width: 100%;
height: 160px;   /*--高さを指定--*/
column-count: 3; /*--3列--*/
column-fill: balance; /*--balanceを指定--*/
column-gap: 1px; /*--隙間--*/
line-height: 1.8;"> … </p>

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーで

columun-ruleプロパティ

columun-spanプロパティ

アニメーション

transform

擬似クラス説明
none初期値
rotate(角度)時計回りの回転
rog、rad
scale(数値,数値)・横方向、縦方向の順の倍率に拡大縮小
・値を一つ → 縦横両方適用
translate(単位付きの数値, 単位付きの数値)・右方向、下方向の順に移動を指定
・値を一つ → 右方向だけ適用
skew()x軸、y軸に沿った傾斜の角度を指定
値を一つ → x軸に沿った角度の傾斜だけ適用

transition-property

  • 効果を適用するプロパティを指定
  • 複数設定はカンマ区切り
  • 値 → プロパティ名、none、all(適用可能な全てのプロパティ、デフォルト値)

transition-duration

変化にかかる時間を指定

transition-timing-function

  • ease … ゆっくり始まり → ゆっくり終わる(デフォルト値)
  • ease-in … ゆっくり始ま → 一定速度で終わる
  • ease-out … 一定速度で始まり → ゆっくり終わる
  • ease-in-out … ゆっくり始まり → ゆっくり終わる
  • linear … 一定速度で変化

transition-delay

  • 開始する時間を遅らせる
  • 初期値0

transition

transition-delay → transition-durationの順に指定

@keyframes

.animation{
animation-name: animation;
animation-duration: 2s;
animation-iteration-count:infinite;
background: #bisque;
height: 60px;
text-align: center;
}
@keyframes animation{
0%{
width: 50%;
}
100%{
width: 100%;
}
}
  • 「0%」→「from」、「100%」→「to」が使用可能
アニメーションサンプル

animation

  • animation-name キーフレームの名前
  • animation-duration 再生時間
  • animation-timing-function 加速、減速
  • animation-delay 開始時間を遅らせる
  • animation-iteration-count 繰り返す回数
  • animation-direction 逆再生

animation-iteration-count

アニメーションの再生を繰り返す回数を指定

その他

table

プロパティ名機能
caption-sideキャプションの表示位置(top、bottom、left、right)
border-collapse罫線の間の隙間の有無
・あり→separate(デフォルト) → border-radius無効
・なし→collapse
border-spacing罫線のあいだの間隔の大きさを指定します。
empty-cells内容が空のセルの背景とボーダーを表示させるかどうか
table-layoutレイアウト方式
auto、fixed表の表示が速くなる

内容を追加するプロパティ

  • content … CSSで内容を追加
  • quotes … qようその前後につける引用符を設定
  • counter-reset … カウンタの値をリセット
  • counter-increment … カウンタの値を進める
<style media="screen">
    li {
      counter-increment: number;
    }
    li::before {
      content: counter(number);
    }
  </style>
<ul>
<li>見出し</li>
<li>見出し</li>
<li>見出し</li>
</ul>
  • 見出し
  • 見出し
  • 見出し

SMACSS

SMACSS(スマックス:Scalable and Modular Architecture for CSS)拡張可能でモジュール的なCSSの設計手法です。

CSSのルールを5種類

  1. ベース
  2. レイアウト
  3. モジュール
  4. 状態(ステート)
  5. テーマ

CSS設計

CSS設計のポイント

GoogleのエンジニアであるPhilipWalton氏が提唱しているCSSが目指す4つのゴールがあります。

  • 予測できる
    • クラス名から影響は範囲が想像できる
    • クラス名から機能・役割が創造できる
  • 再利用できる
  • 保守できる
    • 影響範囲が広すぎない
  • 拡張できる
    • 詳細度が高すぎない
    • HTMLに依存しない

レイアウトに関する記述

以下のようなプロパティーはモジュールクラス自体に直接設定せず、別のレイアウトグループのクラスにてスタイリングすることで、使い回しが可能になります。

  • position
  • zindex
  • top/right/bottom/left
  • float
  • width
  • margin

例えばレイアウトに関するスタイリングをするために以下のようにクラスを設定する方法があります。

.ly_cont {
 width: 1200px;
 padding: 0 16px;
 margin-right: auto;
 margin-left: auto;
}

※SMACSSではレイアウトに関するクラスに接頭辞にl-をつけます。

HTMLに依存しない

HTML要素名をセレクターに使用しないことで、HTMLに依存しない設計が可能です。

これにより何かの事情によりpタグからdivタグに変更しなければならない時に、その影響を考える必要がありません。

SMACSSのモジュールルール

モジュール(見出し、ボタン、カード…)は別のレイアウトに埋め込んでも見た目が崩れたりしないように使用できることが求められます。

影響範囲を広くしすぎない

正しく計算した上で範囲を広く設定することは問題ありませんが、意味もなく範囲を広くしてしまうとそれを打ち消すコードの記述やレイアウト崩れが起きる可能性があります。以下の点がポイントになります。

  • 影響範囲を絞る
    • (例 … 子孫セレクタでなく子セレクタで指定するSMACSS推奨
  • 影響範囲が広い範囲の場合、最小限のスタイリングにとどめる

詳細度を高くしすぎない

必要以上に詳細度を高くすると以下のデメリットがあります。

  • コードが見づらい
  • 上書き、打ち消すのが難しい

詳細度を均一に保つ

<a class="button button_primary" href="#">ボタン</a>

.button.button_primary {…} 詳細度が高い×
.button_primary {…} 詳細度が均一○(BEM)

クラス名から機能・役割が創造できる

汎用的に使用可能な単語

  • __wrapper
  • __inner
  • __header
  • __body

クラス名のつけ方

  • main … 主要な
  • faq … よくある質問
  • title … (サイト、セクションの)タイトル、見出し
  • heading … 見出し
  • lead … 見出しの補足
  • wrapper … 容器(レイアウト)
  • wrapper … 容器(レイアウト)
  • container … 容器(全体的な囲むもの)
  • desc … 概要(description)
  • detail … 詳細
  • wrapper … 概要(description)
  • desc … 概要(description)
  • feature … 特徴

BEMの基本規則

BEMではBlock、Element(Blockの外では独立で使用できない)という構成でクラス名をつけます。

<!-- Block -->
<ul class="menu">
    <!-- Element エレメントはブロックを構成する要素-->
    <li class="menu__item"><a href="" class="menu__link">アイテム1</a></li>
    <li class="menu__item"><a href="" class="menu__link">アイテム2</a></li>
    <!-- Modifier モディファイアはエレメントに対するオプション-->
    <li class="menu__item menu__item__actived"><a href="" class="menu__link">アイテム3</a></li>
</ul>

各名前はアンダースコア2つでつなぎます。

BEMの命名規則

  • ElementとModifierにはBlockの名前を含める
  • Element、Modifier、Blockに2つ以上の単語が含まれる場合、ハイフンで繋ぐ

CSSよく使う記述

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

カスタムプロパティの定義

@charset "UTF-8";

:root {
    --primary-color: #45CCC4;
    --red: #EB4E45;
    --blue: #0158A8;
    --bg-color: #ECFCFB;
    --text-color: #333;
    --breakpoint-sm: 576px;
}

@charset “UTF-8”;

この表記によりhtmlやcssがどの文字コードで書かれているかをブラウザが判断(文字化けを防ぐ)
→現在はブラウザ自動で判断することから、不要論もあります。

画像の大きさの最適化

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}
※親要素より横幅が大きい場合のみ縮小され、
高さも自動で縮小され、歪みません

※画像の上下に余白(line-height分の余白)ができない
要素(HTMLの書式)

HTMLの基礎知識

文字実体参照

数値文字参照

タグ

開始タグも閉じタグも省略できるタグ

htmlheadbodytbodycolgroup

※「要素が存在しない」のではなく、ブラウザ側で付け足される

空要素

「/」「>」の間に空白文字入れられない → 文法エラー

グローバル属性

全要素に指定できる

属性説明
accesskeyショートカットを生成する
class
contenteditableユーザによる編集が可能か
contextmenuコンテキストメニュー
data-*カスタムデータ属性。
dir書字方向
draggableドラッグ可能か
ドラッグ&ドロップ API 
hidden関連性があるか
id
lang言語コード
nonceコンテンツセキュリティポリシーのためのワンタイムトークンを示す属性
spellcheckスペルチェックをするか
styleスタイルシート
title補足情報

論理属性

  • 属性名だけで指定できる
  • 属性を指定するとtrue
  • 値を指定する場合「属性名=””」「属性名=”属性名”」

DOCTYPE宣言

  • HTML5では、DOCTYPE宣言は1種類<!DOCTYPE html>
  • srcdoc属性に指定するHTML文書では省略可能 → 宣言をせずとも正確に表示される

全体構造メタ情報

title要素

  • head要素の中で使用
  • 1つのhtml文書の中で1つまで
  • なくても良いケースあり
  • 開始終了タグの省略不可

head要素

  • 通常のHTMLではtitle要素を1つ入れる必要がある(条件により省略可能)

meta要素

属性
charset・文字のエンコーディング(文字に割り当てられた数字)
文書の先頭から1024バイト以内に指定する<title>より前
・HTML5から追加
contentメタ情報の値
http-equivプラグマディレクティブ(HTMLの状態や挙動を指示)
nameメタデータの名前

HTML基本タグ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

link要素

  • <link rel=”stylesheet” href=”/style.css” type=”text/css”>
  • <link rel=”canonical” href=”https://〇〇.com/”>

base要素

  • 相対URLの基準相対パスの基準位置
  • head要素中、HTML文書に対して1つ記述
  • href属性target属性を指定

a要素

  • href=”URL” … リンク先URL
    tel:xxxxxxxxxx 電話発信リンク
  • target=”ブラウジング・コンテキスト” … 表示するウィンドウ、タブ
  • rel=” “ … 関係
  • type=”MIMEタイプ”
  • hreflang=”言語コード” … リンク先言語
  • download=”ファイル名” … href属性で指定したダウンロード
  • 要素にはインタラクティブコンテンツ(interactive content)は入れられない
    • a要素
    • label要素
    • iframe要素
    • tabindex属性を指定している要素
target属性値開き方
_blank新規ウィンドウ
_self現在のウィンドウ
_parent親ウィンドウ
_topウィンドウ全体
ウィンドウ名指定したウィンドウ名
フレーム名指定したフレーム名

セクションと基本構造

コンテンツ・モデル

各要素の中身を定義

カテゴリ 説明
フローコンテンツ ブラウザに表示する
フレージングコンテンツ テキストを構成
セクショニングコンテンツ セクションを構成
ヘディングコンテンツ 見出しを構成
組込コンテンツ 画像や動画を埋め込む要素
フレージングコンテンツ テキストを構成
インタラクティブコンテンツ ユーザが操作できる
メタデータコンテンツ ページの情報を表す

トランスペアレント

  • 親要素のコンテンツモデルを継承
  • a、audio、video、canvas、ins、del、map、noscript(body要素内)、object、slot

セクショニングコンテンツ要素

セクションの範囲を定義

article雑誌や新聞の記事、ブログの投稿
aside広告やサイドバー、メインコンテンツと関連性の薄いコンテンツ
nav
section意味のもつまとまりを表す

セクショニング・ルート要素

  • 2022年7月(?)廃止
    • body
    • blockquote
    • details
    • fieldset
    • figure
    • td
  • ドキュメント全体から独立した独自の階層構造

main属性

  • 複数配置可能だが、同時に表示はできない(hidden属性が必要)
  • html、body、div、formのみmain属性を含むことができる

address属性

  • 一番近いarticle要素か、body要素の問い合わせ先を示す
  • 内容に入れれるのは問い合わせ先のみ

テキスト

b要素

  • 以前は太字
  • 製品名キーワードリード文
  • 他のものと区別

em要素

  • アクセントをつける

i要素

  • 以前はイタリック体
  • 異なる性質の部分
  • 学名専門用語外国語の慣用句

s要素

  • 以前は取消線(strike-through)

mark要素

  • 検索結果
  • 注目してもらいたい部分

hr要素

  • もともとは横罫線
  • 段落レベルでの主題の変わり目

small要素

  • 付帯情報
  • 以前はテキストを小さく表す

cite要素

  • 作品名
  • 引用文を含めれない

q要素

  • その内容が行内の引用であることを意味する
  • 長文の引用 … blockquote要素を使用

blockquote要素

<blockquote>
<p>吾輩は猫である。名前はまだない。…</p>
</blockquote>
<p><cite>吾輩は猫である</cite>より引用</p>

吾輩は猫である。名前はまだない。…

吾輩は猫であるより引用

u要素

  • 以前は下線(underline)
  • 中国語の固有名詞、スペルミス

bdi要素

bpi要素のテキストは周囲に影響を及ぼさない

ins要素

  • 追加した部分
  • 一般的なブラウザでは下線

del要素

  • 削除した部分
  • 一般的なブラウザでは打ち消し線
del要素 ins要素

その他の要素

li要素

list-style-type
  • list-style-imageが優先される
none記号を無し
disc塗り潰し丸(初期値)
circle白抜き丸
square四角
decimal数字
lower-roman
upper-roman
ローマ字(子文字/大文字)
lower-latin
upper-latin
アルファベット(子文字/大文字)
hiragana
katakana
平仮名、カタガナ

menu要素

  • ツールバー、操作メニュー
  • li要素を使用
<menu>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</menu>
  • 項目1
  • 項目2
  • 項目3
  • dl要素

    • description list
    • dt要素(用語)」「dd要素(説明)」
    • 0以上のdt要素、1つ以上のdd要素
    <dl>
    <dt>作者</dt>
    <dd>松本</dd>
    <dd>渡辺</dd>
    </dl>
    作者
    松本
    渡辺

    dfn要素

    • definition list(定義リスト)
    • 「用語の定義」に使用

    <dl>
    <dt><dfn>プロフェッショナル</dfn></dt>
    <dd>技術と知識を持つ</dd>
    </dl>
    プロフェッショナル
    技術と知識を持つ

    ruby要素要素

    • <rt> Ruby Text
    • <rp> Ruby Parentheses テキストを囲む記号を指定
    • <rb> ルビをふる対象、漢字を分割してrt要素と指定する場合に使用
    • <rtc> rt要素をグループ化
    <ruby>
    要<rt>よう</rt>
    素<rt>そ</rt>
    </ruby>
    よう

    table要素

    • border要素は指定できない

    <table要素内の配置順>

    1. caption要素0か1個
    2. colgroup要素(0か1個
    3. thead(0か1個
    4. tbody0個以上)要素またはtr要素1個以上
    5. tfoot要素0か1個
    <table border="">
      <tr> … 横1列
        <th>見出し内容A</th> … 見出し
        <th>見出し内容B</th>
      </tr>
      <tr>
        <td>データA</td> … 表の中の1つ1つの項目
        <td>データB</td>
      </tr>
    </table>
    見出し内容A 見出し内容B
    データA データB

    thead要素

    thead、tbody、tfoot … 行をグループ化

    <th、theadの使い分け>

    <table border="">
    <thead>
    <tr>
    <th>氏名</th>
    <th>メールアドレス</th>
    <th>電話番号</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>〇〇〇〇</td>
    <td>xxxx@xxx.xxx</td>
    <td>0x0-xxxx-xxxx</td>
    </tr>
    </tbody>
    </table>
    氏名 メールアドレス 電話番号
    〇〇〇〇 xxxx@xxx.xxx 0x0-xxxx-xxxx

    figure要素

    figcaption要素

    figure要素内の一番前か一番後ろに配置

    details要素

    • open属性(論理属性)を指定すると常に見出し(summary要素)が表示される
    • summary要素は最初の子要素で指定する
    <hr>
    <details>
      <summary>概要</summary>
      コンテンツ詳細内容
    </details>
    <hr>
    
    <hr>
    <details>
      <summary>概要</summary>
      コンテンツ詳細内容
    </details>
    <hr>
    <br>
    <hr>
    <details>
      summary省略するとsummary省略するとsummary省略するとsummary省略するとsummary省略すると
    </details>
    <hr>

    概要 コンテンツ詳細内容



    summary省略するとsummary省略するとsummary省略するとsummary省略するとsummary省略すると

    script要素

    • HTML内にスクリプトまたはデータブロックを埋め込む
    • type=”MIMEタイプ” … スクリプトの種類(デフォルト値は「text/javascript
    • async=”論理属性”defer=”論理属性”で同時に指定した場合は、asyncに対応しているブラウザではasyncを、非対応のブラウザではdefer
    属性
    src外部スクリプトのアドレス
    <script src=”〇〇.js”></script>
    typeMINEタイプ
    asyncスクリプトを非同期で読み込み → 読み込み完了後すぐ実行
    deferスクリプトを非同期で読み込み → ページ全体の解析後実行 

    データブロックscriptタグでJavaScripでないもの)を指定する場合type属性は必須で、src属性は使用できない

    noscript要素

    • scriptが無効のときに読み込む
    • HTML構文でのみ使用可能、XML構文では使えない

    WAI-ARIA

    • Web Accessibility Initiative – Accessible Rich Internet Applications
    • role属性役割)とaria属性状態・性質)を定義
    • ブラウザの読み上げ機能を使った場合などに使用
    • banner … 大見出し、タイトル
    • main … メインコンテンツ
    • navigation … ナビゲーション
    • search … 検索

    正規表現

    正規表現説明マッチする該当
    [abc]abcのうち1文字「a」「b」「c」のいずれか
    [^abc]abc以外の1文字「d」など
    [A-Za-z]AからZ、aからzのうちの1文字「d」など
    基礎理論、技術要素(データベース)、ネットワーク

    スタック

    最後に入力したデータを最初に出力する

    キュー

    最初に入力したデータを最初に出力する

    関係データベース

    関係演算

    選択

    必要な行だけを抜き出す

    射影

    データの中から、必要な列だけを抜き出す

    結合

    同じ列を基準に2つの表をくっつける

    正規化

    データに矛盾が発生しにくい

    • レコードの長さを揃える
    • 部分関数従属しているレコードの切り出し

    データとデータの間の関連を示す

    E-R図

    DFD

    特性要因図

    フィッシュボーン図

    管理図

    製品の重量のばらつきを分析

    上方管理限界、下方管理言外

    正規分布

    平均値を中心に左右対象

    バスタブ曲線

    ポアソン分布

    • 滅多に起こらない出来事が任意の時間当たりに起こる回数
    • 発生確率は一定

    データクレンジング

    データの品質を高め、精度を上げる

    レプリケーション

    常に最新の状態でバックアップを保存

    DBMS

    • データベース管理システム(database management system)
    • データの検索や更新
    • データ構造の定義
    • トランザクション管理 …  複数利用者の同時処理において一貫性を保持
    • アクセス制御

    キャリアアグリゲーション

    周波数帯の異なる電波を集約

    プロキシサーバ

    • インターネットへのアクセスを代理で行う
    • 匿名性を確保
    • URLフィルタリング
    • キャッシュ機能

    WPA

    • Wi-Fi Protected Access(無線LAN暗号化方式)
    • WPA2はAES(Advanced Encryption Standard)共通鍵暗号方式を利用

    ESSID

    • 無線LANのネットワークを識別するためのID
    • 最大32文字の英数字

    MACアドレスフィルタリング

    • 無線LANのセキュリティ対策

    BLE

    • 近距離無線通信規格(Bluetooth Low Energy
    • 低消費電力
    • 低速

    ZigBee

    • 近距離無線通信規格
    • 多数のセンサを使用
    セキュリティ

    情報セキュリティ

    • 機密性:許可された人だけが情報にアクセス可能
    • 完全性:情報や処理方法が正確かつ完全
    • 可用性:必要なときに情報にアクセス可能

    追加

    • 真正性:本人だと認証
    • 責任追跡性:ログ情報の追跡
    • 信頼性:処理が正しく確実に行われるか
    • 否認防止:契約などの処理を後から否認できないようにする措置
    https://ntorelabo.com/2023/02/04/4157/#co-index-0

    公開鍵暗号方式

    <暗号化:受信者がペアで作る>

    <デジタル著名:送信者がペアで作る>

    S/MIME

    電子メールの送受信の際公開鍵暗号方式やディジタル署名によってセキュリティを強化

    SMTP

    メール送信転送プロトコル

    POP3

    メールサーバから取り出すプロトコル

    IMAP

    • POP3 … ローカルにダウンロード
    • IMAP … メールサーバーを直接管理

    TPM

    • Trusted Platform Module
    • セキュリティ機能を持つチップ

    ハッシュ関数

    • ハッシュ値から元のデータを特定するのは、ほぼ無理
    • 元のデータが同じならハッシュ値も同じ
    • メッセージダイジェストの長さは一定

    MITB攻撃

    MITB(Man In The Browser)攻撃とは、不正な動作を起こすように作成したマルウェアに感染させ盗聴や改ざんをする攻撃です。

    SQLインジェクション

    SQL文を利用しサーバ内のデータを不正に取得、削除する攻撃方法

    ソーシャルエンジニアリング

    人間の心理的な隙や行動のミス利用

    ブルートフォース攻撃

    ブルートフォースアタック(総当たり攻撃)は、文字の組合せを順に入力する方法

    パスワードリスト攻撃

    別のサイトから流出したパスワードを利用しログイン

    クリプトジャッキング

    所有者の知らない間に暗号資産のマイニング(採掘)を不正に行う

    クロスサイトスクリプティング

    第3者が埋め込んだスクリプトを利用者に起動させる

    DoS攻撃

    サーバの処理能力を超える大量の通信を送りつける

    DDoS攻撃

    • 分散型DDoS攻撃

    RAT

    • Remote Administration Tool
    • 遠隔操作のよって重要情報を不正に入手

    サイバーセキュリティ基本法

    • 目的
    • 定義
    • 基本理念
    • 国の責務
    • 地方公共団体の責務
    • 重要社会基盤事業者の責務
    • サイバー関連事業者その他の事業者の責務
    • 教育研究機関の責務
    • 国民の努力
    • 法制上の措置等
    • 行政組織の整備等

    CSIRT

    • Computer Security Incident Response Team
    • セキュリティ事故、インシデント対応
    • 政府や企業に設置

    J-CRAT

    • Cyber Rescue and Advice Team against targeted attack of Japan
    • 標的型サイバー攻撃に対応

    デジタルフォンレンジックス

    コンピュータ犯罪に対する科学的捜査

    BCP

    • Business Continuity Plan(事業継続計画
    • バックアップ、発電機

    RFID

    • Radio Frequency Identification
    • 通信距離は数cm~数m程度
    • ICチップを無線通信装置を使って、情報の読み書きをする
    • Suica

    NFC

    • Near Field Communication
    • 通信距離は10cm
    • ICカード、スマートフォン
    • NFCはRFIDに属する技術

    PCI DSS

    • Payment Card Industry Data Security Standard
    • クレジットカードの国際的なセキュリティ基準
    【ITパスポート】【基本情報】システム、戦略開発技術

    リスクマネジメント

    リスクマネジメントのプロセス

    1. コミュニケーション及び協議
    2. 適用範囲,状況及び基準
    3. リスクアセスメント
      • リスク特定 … リスクを洗い出し
      • リスク分析 … 発生頻度・確率などを分析、被害を検討
      • リスク評価 … 受容可能か判断
    4. リスク対応
    5. モニタリング及びレビュー
    6. 記録作成及び報告

    対処方法

    • リスク回避:リスクの発生原因を元から絶ったり、別の手段に変更して、リスクの発生を防ぎます。
    • リスク移転リスク共有リスク転嫁:情報システムの運用を他社に依頼したり、保険に加入するなどして、リスク発生時の損失を他者に肩代わりさせます。
    • リスク低減、リスク軽減
      代替のシステムを用意するなどし、リスクの発生率を減らします 
    • リスク保有リスク受容:リスク対策費用のほうが大きくなる場合、リスク対策を行わない

    ITIL

    • ITIL(Information Technology Infrastructure Library)とは、
    • ITSM(ITサービスマネジメント)のベストプラクティス

    解決プロセス

    インシデント管理

    • インシデント発生時に、応急処置
    • チャットボット

    問題管理

    インシデントの根本的解決

    総合的制御プロセス

    構成管理

    サービスを体系化

    変更管理

    変更が与える影響をを考慮してリリースを承認

    リリース管理

    変更管理プロセスで承認された変更作業を行うスケジュール、手順を管理して実装

    RCM

    • リスクコントロールマトリクス
    • リスクの低減の程度を評価

    RPA

    • RPA(Robotic Process Automation)
    • 人がしていた、定型的な事務作業のソフトウェアによって自動化

    WBS

    コスト見積もり、スケジュール作成を行えるレベルまで要素分解

    マトリックス組織

    技能部門と事業を遂行する部門、両方に所属


    EA

    • エンタープライズアーキテクチャ
    • 企業構造の計画
    • ギャップ分析で理想との差を埋める

    CAD

    • Computer Aided Design
    • コンピュータ支援設計
    • コンピュータで設計、作図
    • データの管理や共有、修正、再利用

    CAM

    • Computer Aided Manufacturing
    • コンピュータ支援による製造

    SLA

    • SLA(Service Level Agreement:サービスレベル契約
    • サービスの提供者がサービスの品質を保証する契約
    • サービス提供者とその利用者との間で交わされる

    SLM

    • SLM(Service Level Management:サービスレベル管理)
    • SLAに基づいて、サービスの品質を継続的・定期的に点検・検証

    RFI

    • 情報提供依頼書(Request for Information
    • ベンダの技術を情報収集

    RFP

    • RFP(Request For Proposal:提案依頼書
    • システムの発注元の企業が開発ベンダに提出される文書
    • システムの概要や調達条件等を明示

    NDA

    • NDA(Non-Disclosure Agreement:秘密保持契約
    • 機密情報を取引先に公開する際に、目的以外で使用や漏洩したりすることを防ぐための契約

    SaaS

    ソフトウェアライフサイクルプロセス

    ソフトウェアライフサイクルプロセスとは、企画、要件定義、開発、運用、保守のそれぞれのプロセスについて、各プロセスで行うべきことをまとめたガイドラインです。

    • 企画プロセス:システム化方針を査定し、システム化計画を作成。開発順序や概算コスト、費用対効果やリスク、納期
    • 要件定義:業務上実現すべき性能や、機能などを明確にし、業務要件を定義
    • 開発
      • システム開発:要件定義、方式設計、結合、適格性確認
      • ソフトウェア実装:要件定義、方式設計、構築、結合、適格性確認
    • 運用
    • 保守

    結合テスト

    モジュールをつなげてテスト

    システムテスト

    定めた性能をチェック

    受入れテスト

    • 仕様書の内容を満たしているかチェック
    • 利用者主体

    回帰テスト

    • リグレッションテスト
    • 修正した時、修正箇所以外に問題が発生していないかテスト

    SoE

    • System of Engagement
    • 企業とユーザをどう繋ぐかを重視したシステム

    SoR

    • System of Record
    • 企業内の情報を安全に運用管理することを重視したシステム

    アジャイル開発

    ソフトウェア開発プロセスのプログラミングやテストを重視し、要件定義やシステム設計を柔軟に見直しながら進めていく手法です。

    イテレーション

    • アジャイル開発で繰り返す工程の単位
    • 繰り返すことで、システムの完成度を高めます。

    XP

    • エクストリーム・プログラミング
    • ソフトウェア品質を向上させ、変化する顧客の要求への対応力を高める
    • ペアプログラミングリファクタリング推奨
    • 変更や削除の勇気

    参考URL

    https://ja.wikipedia.org/wiki/%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%88%E3%83%AA%E3%83%BC%E3%83%A0%E3%83%BB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0
    ペアプログラミング

    二人1組、コーディングとレビュー

    リファクタリング

    • 内部構造をすっきり
    • メンテナンス性向上
    • 外から見て影響がないように作業

    スクラム

    • アジャイル開発の手法の一つ
    • 3つのロール
      • プロダクトオーナ
      • 開発チーム
      • スクラムマスタ
    • 5つのイベント
      • スプリント
      • スプリント計画
      • デイリースクラム
      • スプリントレビュー
      • スプリントレトロスペクティブ
    • 3つの作成物
      • スプリントバックログ
      • プロダクトバックログ
      • インクリメント

    コンカレントエンジニアリング

    各プロセスを並行して進める

    リバースエンジニアリング

    既存のシステムを解析 → 設計

    オブジェクト指向

    対象物(オブジェクト)役割(関係性)を定義し、システムを作る

    データと操作手順をカプセル化(一体化)

    クラス

    機能、役割ごとにプログラムをまとめる

    継承

    下位のクラスが上位の特性を受け継ぐ

    UML

    オブジェクト指向型のシステム開発の記法

    • 構造を表現: クラス図
    • 振る舞いを表現: シーケンス図

    クラス図

    アクティビティ図

    親和図法

    似たものをグループにまとめて問題解決

    PMBOK

    • プロジェクト管理の手法をまとめたもの
    • 10種類の知識エリア
    • プロジェクト統合マネジメント
      • プロジェクト検証
    • プロジェクト・スコープ・マネジメント
      • プロジェクトの成果物と作業の過不足を管理
    • プロジェクト・スケジュール・マネジメント
    • プロジェクト・コスト・マネジメント
    • プロジェクト品質マネジメント
      • 品質を保つ
    • プロジェクト資源マネジメント
    • プロジェクト・コミュニケーション・マネジメント
    • プロジェクト・リスク・マネジメント
    • プロジェクト調達マネジメント
    • プロジェクト・ステークホルダー・マネジメント

    プロジェクト検証

    • 初めに作る
    • プロジェクト統合マネジメントでつくる
    • プロジェクトの取り決め

    アローダイアグラム

    ガンチャート

    UX

    • User Experience
    • 優れたインターファイスを利用することで得られるポジティブな概念

    UI

    User Interface

    スケールアウト

    サーバの台数を増やす

    スケールアップ

    サーバをより高性能のものに変える

    IT資格

    IT資格

    資格試験名種類/分野説明
    ITパスポート国家資格
    開発者
    CCNA
    (シスコ技術者認定)
    ベンダー
    ネットワーク
    ネットワークの基礎
    セキュリティの基本
    AWS認定試験ベンダー
    クラウド
    LPIC
    (Linux技術者認定試験)
    ・LInuxのスキル証明
    ・国際基準
    LinuC
    (Linux技術者認定資格)
    ・LInuxのスキル証明
    ・日本国内向け
    HTML5
    プロフェッショナル
    認定資格試験
    プログラミング・HTML5、CSS
    ・7割の正答で合格といわれている
    ・勉強時間の目安はおよそ40時間(レベル1)
    Photoshop®クリエイター
    能力認定試験
    Photoshop・スタンダードで24時間、エキスパートで22時間程度

    AWS認定試験

    マイクロソフト認定試験

    LPIC

    LinuC

    LPI-Japanが実施している試験です。LPICが国際的な資格に対して、LinuCは日本向けの資格となってます。

    Linuxの基礎操作の知識を要求される試験で、サーバーエンジニア向けの資格です。

    Linucレベル1

    • 出題形式はCBT形式
    • 101試験と102試験、両試験に合格すること
    • 試験時間は両試験 90分
    • 60問出題
    • 受験料は両試験 16,500円
    • 有効期限 5年

    ITパスポート

    ITパスポートは基礎的なITの知識を証明できる国家資格です。

    • 未経験者向け

    ストラテジ系

    • 企業と法務
    • 経営戦略
    • システム戦略

    マネジメント系

    • システム開発プロジェクトのマネジメント

    テクノロジ系

    • コンピュータ
    • ネットワーク
    • データベース
    • セキュリティ

    合格率

    過去数年をみてみると、大体50%前後

    <合格基準、条件>

    1. 総合得点が全体の60%以上
    2. 3つの分野ごとにそれぞれ満点の30%以上
    • 出題形式はCBT形式
    • 試験時間は120分
    • 100問出題
    • 受験料は7500円

    受験の感想

    • 後で見直しできるフラグ機能があった。
    • Ping-tと情報が最新化されている参考書の学習でカバーできる。
    • 制限時間は余裕あり。40分程余った。
    • キーボード入力1問ほどあった。(参考書等に出ている内容から)
    • 試験終了のボタン押下後すぐ画面にて合否、自分の得点、合格点が発表される
    • アンケートがあった。
    • 要素、APIの問題が難しく感じた。

    基本情報技術者試験

    メリット

    • IT関係の網羅的な知識の取得

    学習期間

    IT初心者50時間(1日2時間で1ヶ月ほど)
    IT経験者200時間(1日3時間で2.2ヶ月ほど)

    試験内容

    日程

    2023年4月より、基本情報技術者試験が通年で受験が可能になりました。

    合格率

    合格率は20〜30%

    問題数時間合格点
    午前80問150分60/100点
    午後11問のうち5問選択150分60/100点

    午後の問題

    • 情報セキュリティ必須

    以下の問題から2問選択

    • ハードウェア
    • ソフトウェア
    • データベース
    • ネットワーク(難易度高い
    • ソフトウェア設計
    • プロジェクトマネジメント
    • サービスマネジメント
    • システム戦略
    • 経営戦略・企業と法務
    • データ構造/アルゴリズム必須

    以下の問題から1問選択

    • C
    • Java
    • Python
    • アセンブラ
    • 表計算ソフト(無難

    学習方法

    • 過去問道場
    • 公式サイトからPDFダウンロード(実践に近い)
    • キタミ式イラストIT塾 基本情報技術者 令和04年
    • 基本情報技術者 パーフェクトラーニング過去問題集

    試験直前

    • 計算用紙は使い切ったらもらう(計算だけでなく、表やアルゴリズムなどを手元で確認できるよう、書き写す用)
    • 時間配分の計算を(表計算、アルゴリズムは長めに想定)
    • 選択問題のチェックが抜けてないか確認を
    https://www.fe-siken.com/fekakomon.php
    https://www.ipa.go.jp/shiken/mondai-kaiotu/index.html

    Photoshop®クリエイター能力認定試験(スタンダード)

    • Photoshop®クリエイター能力認定試験にはスタンダード、エキスパート2種類のグレードがあります。
    Photoshopクリエイター能力認定試験

    試験内容

    • 受験料 … 7600円
    • 試験会場のパソコンを使用
    実技40分
    実践90分

    合格ライン

    • 実技問題の得点率65%以上で、かつ実践問題の得点率70%以上
    • 74.1%(2021年)

    日程

    随時試験全国各地、毎週実施
    試験会場検索
    ・直接会場のサイトで申し込み
    公開試験リモートの自宅受験可能

    <photoshopバージョン確認>

    • CC 2018 … Ver.19
    • CC 2019 … Ver.20
    • CC 2020 … Ver.21
    • CC 2021 … Ver.22
    • CC 2022 … Ver.23

    学習法

    • 公式サイト(サンプル問題)
    • 公式テキスト(Photoshop®クリエイター能力認定試験問題集)を周回

    <学習時間>

    • スタンダード … 24時間程
    • エキスパート … 22時間程

    受験後の感想

    • もともとphotoshopは単純な編集程度しか使っていない状態から、公式テキストでトータル20時間ほど学習しました。
    • 全問対応できた感触でした。
    • 1部は時間ギリギリで、2部は15分ほど余りました。
    • 普段使っているものでない慣れていないPC、マウスで戸惑った。
    • 問題をダウンロードし、解答をアップロードするのは若干慣れず、慎重にした。
    • 別の受験者でフリーズし強制終了している方もいたので、こまめに保存するのが良い。

    シスコ技術者認定試験

    ネットワークエンジニアの資格として有名です。

    世界最大手のネットワーク関連機器メーカーシスコシステムズが実施している試験です。
    同社の主力商品であるCiscoルータ、Catalystスイッチに関する技術力の証明となるだけでなく、基礎的なネットワーク技術(TCP/IPなど)を持つことの証明にもなります。

    メリット

    • ネットワークエンジニアとしての基本的スキルの証明ができる。
    • 就職や転職の際に有利

    試験内容

    試験番号200-301 CCNA
    問題数100〜105問程度
    試験時間120分
    受験料33,600円+税
    出題形式CBT(コンピュータ入力)方式
    受験の前提条件なし(ただし年齢制限あり)
    試験日、試験会場ピアソンVUE社のサイトで希望の日時、場所を指定可能

    出題範囲

    • 1.ネットワークの基礎(20%)
    • ネットワークアクセス(20%)
    • IPコネクティビティー(25%)
    • IPサービス(10%)
    • セキュリティーの基礎(15%)
    • 自動化とプログラマビリティ(10%)

    CBT方式

    試験会場で自宅を選べるらしいですが、もしネットワーク環境の関係等で動作がうまくいかない場合があるので、不安であれば自宅以外がいいかも知れません。

    日時も自由に予約可能です。モチベーションを高めるために、あらかじめ何ヶ月前に予約するのもありです。

    おすすめ学習法

    参考書としておすすめは「1週間でCCNAの基礎が学べる本」です。
    公式に過去問を出していません。問題を解く上でお勧めがPing-tCCNAイージスです。料金高いですがCramMediaもあります。問題を解いて解説を見たいときにはYouTubeおすすめです。

    受験後の感想

    • ルーティングテーブルを読み解く問題が多かった気がします。
    • WLCのGUI設定問題も3、4問出てきました。
    • 自分が暗記が苦手なのもありますが、割と悩むものが多かったです。暗記は問題演習と別で時間を割いてしたらよかったと思いました。
    • 時間は7分ほど余りましたが、前半必要以上に考えたりしていて、後半焦って割り切りスピード重視でしました。
    https://ntorelabo.com/?cat=5

    オラクルマスター(ORACLE MASTER)

    SQL

    資格をもっていると、任せられるという風になります。

    参考サイト

    https://qiita.com/KNR109/items/d67da9b34df2256f488b
    https://www.sikaku.gr.jp/ns/ps/introduction/
    HULFTとは

    HULFTとは

    HULFT(Harmonious Universal Link File Transfer)は、日本で最も使われているファイル転送ソフトウェアです。

    HULFTの機能

    • 同期転送と非同期転送
    • 同報配信
    • ジョブ機能
    • 圧縮転送
    • 集配完了通知
    • 制御範囲や管理権限
    • 世代や履歴の管理
    • データ形式や文字コードの変換
    • 整合性検証
    • 複数ファイルの結合
    • 間欠転送
    • その他各種機能

    企業活動、法務、経営戦略

    貸借対照表

    資産 = 負債 + 純資産 右と左で合計は必ず一致

    流動比率

    流動比率 = 流動資産 ÷ 流動負債

    損益計算書

    損益計算書(P/L:Profit & Loss statement)

    売上高200
    売上原価150
    売上総利益50(売上高)-(売上原価)
    販売費及び
    一般管理費
    20
    営業利益30(売上総利益)-(販売費及び一般管理費)
    営業外収益6
    営業外費用14
    経常利益22(営業利益)+(営業外収益)-(営業外費用)
    特別利益0
    特別損失4
    税引前当期純利益18(経常利益)+(特別利益)-(特別損失)
    法人税,
    住民税及び事業税
    6
    当期純利益12(税引前当期純利益)-(法人税,住民税及び事業税)

    財務指標

    総資産回転率 = 売上高 ÷ 総資産
    会社の資産を有効活用しているかの指標

    自己資本比率 = 自己資本 ÷ 総資本
    総資本のうちどれだけ自己資本化の指標

    ROE

    • Return On Equity(自己資本)
    • ROE = 当期純利益 ÷ 自己資本

    ROA

    • Return On Assets
    • 総資本利益率 = 営業利益 ÷ 総資本

    流動比率 = 流動資産 ÷ 流動負債
    短期的な資金繰りをみる指標
    ・流動資産…1年以内に現金化できる資産
    ・流動負債…1年以内に返さないといけない負債

    減価償却

    固定資産を購入した場合に耐用年数を決めて、費用をその年数に分配する計算方法

    • 定額法
    • 定率法

    PDCA

    CSR

    • Corporate Social Responsibility…企業の社会的責任

    リスクアセスメント

    1. リスク特定 管理すべき情報資産洗い出しと脅威・脆弱性の明確化
      • 脅威 情報システムや組織に損失や損害・危害をもたらす事故の潜在的な原因
      • 脆弱性 脅威の発生を誘引する、資産固有の欠陥やセキュリティホールなどの弱点
    2. リスク分析 情報資産に対するリスクの識別とリスク値(リスクの大きさ)の算出
    3. リスク評価 リスク影響度の検討とその許容可能性の判定

    リスクの大きさ = 脅威の大きさ × 脆弱性の大きさ × 資産価値

    参考URL

    Wikipedia 「リスクアセスメント」

    不正アクセス禁止法

    • 他人のID・パスワードを盗みだし、その者になりすまして不正にシステムにアクセスする
    • システムの欠陥・不備などを悪用してシステムの制御機能を回避し、そのシステムに不正にアクセスする
    • 本人の承諾なしに、第三者にID・パスワードを教える
    • 上記を助長する行為

    不正競争防止法

    • 営業秘密や営業上のノウハウの不正取得、使用
    • 他人の商品と類似する商品、商品名、デザイン、ロゴマーク

    限定提供データ

    • 新たに保護される
    • ビッグデータ等を念頭においた、データ。例)携帯電話位置情報、POS

    オプトアウト

    • 勝手に広告メールを送ってくる
    • 個人情報の取得、提供の拒否

    オプトイン

    承諾した時だけ送ってくる

    プロバイダ責任制限法

    送信防止措置ができるのに対処をしないプロバイダは、損害を賠償する責任が問われる

    知的財産権

    著作権

    • 権利を取得するための申請や登録などの手続が不要である。
    • フリーソフトウェアマニュアル 
    • プログラム言語アルゴリズム ×

    産業財産権

    特許権

    • 機能を実現するために考え出された独創的な発明
    • 特許出願から20年存続

    実用新案権

    物品の形状や構造または組み合わせ

    意匠権

    工業製品のデザインや形状

    商標権

    トレードマーク

    DRM

    • Digital Rights Management(ディジタル著作権管理
    • コンテンツの著作権を保護するため、利用や複製を制御、制限する技術

    労働基準法

    • 賃金や就業時間、休暇などに関する最低基準を定めた
    • 時間外労働や休日労働 → 労使の協定を書面で締結し,行政官庁に届け出
    • “労働者”に該当
      • アルバイト
      • 正社員
      • パートタイマ
      • 派遣労働者

    労働者派遣法

    • 雇用期間が終了後、派遣先は雇用OK
    • 派遣元企業と派遣先企業間で労働者派遣契約 → 派遣労働者と派遣先企業の指揮命令関係
    • 他社の労働者を派遣することは不可
    請負契約派遣契約
    著作権の帰属先請負業者派遣先

    OSS

    • オープンソース
    • ソフトウェア著作権の保持
    OSLinaxAndroid
    Web サーバApache
    メールソフトThunderbird
    ブラウザFirefox
    データベースMySQL、PostgreSQL

    クロスライセンス

    クロスライセンス互いの特許を許諾
    アクティベーション不正防止のため認証を行う

    個人情報保護法

    • 個人情報の項目や提供に変更は本人への通知の必要あり。削除は不要。

    要配慮個人情報

    人種、信条、社会的身分、病歴、犯罪の経歴

    公益通報者保護法

    私的な

    ISO

    ISO(国際標準化機構)

    ISO9000品質管理
    ISO14000環境管理
    ISO20000ITサービス
    ISO27000セキュリティ管理
    ISMS適合性評価制度

    ISMS

    ITU

    ITU(国際電気通信連合:International Telecommunication Union)とは、電気通信の標準化を行う国際標準化機関です。

    IEC

    IEC(国際電気標準会議:International Electrotechnical Commission)とは、電気および電子技術の標準化を行う国際標準化機関です。

    ICANN

    ICANN(The Internet Corporation for Assigned Names and Numbers)とはインターネットで使用されるドメイン名やIPアドレスなどの管理を世界規模で行う非営利団体です。

    経営戦略

    SWOT分析

    強み(Strengths)、弱み(Weaknesses)、機会(Opportunities)、脅威(Threats)

    3C分析

    Customer(顧客)、Competitor(競合)、Company(自社)

    PPM

    VRIO分析

    Value「経済的な価値」、Rareness「希少性」、Imitability「模倣可能性」、Organization「組織」の4項目から、自社の経営資源を評価

    ポジショニング分析

    • 自社と他社の相対的比較
    • ポジショニングマップ

    RFM分析

    最終購入日(Recency)、購入頻度(Frequency)、購入金額(Monetary)

    回帰分析

    相関関係のあるデータを直線や曲線で近似し関数を得る

    主成分分析

    数の多い変数を集約する手法

    BSC

    • バランススコアカード
    • 財務、顧客、業務プロセス、学習と成長

    KPI

    • Key Performance Indicator(重要業績評価指標)
    • 目標達成のための進捗状況
    • 新規顧客獲得 → 顧客訪問回数

    KGI

    • Key Goal Indicator(重要目標達成指標)
    • 明確な目標設定
    • 例)「2024年度に利益額20億円を達成」

    IoT

    • Internet of Thing
    • コンピュータ以外のモノがインターネットを利用し相互にサービスを提供すること

    テレマティクス

    • IoTの一種です。
    • コネクテッドカー(運転中ネット接続)
    • テレマティクス保険(実際の運転状況を保険料に反映)

    エッジコンピューティング

    IoTデバイスの近くIoTサーバの負荷低減リアルタイム性向上となる処理をする。

    M2M

    • Machine to Machine
    • 機械同士が自律的に情報のやり取りをする

    P2P

    • Peer to Peer
    • PC等端末間接続でお互いの機能のやり取りをする

    API

    • API(Application Programming Interface)Web API ともいいます。
    • アプリケーションを公開し、他のアプリケーションから起動し連携する仕組み
    • 例)Google Maps API

    RPA

    https://ntorelabo.com/2023/02/04/4157/#co-index-5

    ITガバナンス

    • ITを適切に活用する組織能力
    • IT戦略の策定・実行
    • 経営戦略とIT戦略との整合性の評価のフレームワークを適用

    ITIL

    • ITIL(Information Technology Infrastructure Library)とは、
    • ITSM(ITサービスマネジメント)のベストプラクティス

    ロードマップ

    • ロードマップは、プロジェクトマネジメントの際の工程表です。
    • 技術ロードマップは、自社の技術の未来の動向などを予測し、取り組むべき技術の道のりを時系列で示したものです。

    ダイバーシティ

    多様性として性別や年齢、人種の様々な人材を採用し、企業の成長を狙う考え方

    スマー卜シティ

    ICTやIoT、AIによって課題解決を狙う都市

    SCM

    • SCM(Supply Chain Management:サプライチェーンマネジメント)
    • 資源調達・製品の製造・流通・販売などの一連の業務を統合

    バリューチェーン分析

    • 主活動 … 製造、出荷物流、販売、サービス
    • 支援活動 … 人事管理、技術開発

    セグメントマーケティング

    • セグメントマーケティングあるいはターゲットマーケティング
    • 対象となる顧客(市場)を、年齢、性別、地域、所得、趣味などの各要素を用いて細かく分類し、その分類された顧客(市場)に絞って広告やプロモーション活動を行うことです。

    インバウンドマーケティング

    • プル型
    • ブログ、SNS

    アウトバウンドマーケティング

    • プッシュ型
    • 広告、イベント

    オムニチャネル

    将来の販売経路とインターネット通販を統合

    マーチャンダイジング

    消費者のニーズに合った商品を、適切な数量、価格、販売形態などで提供するための企業活動

    ビジネスモデルキャンバス

    既存のビジネスモデルの認識を共有するためのフレームワーク

    カンバリゼーション

    自社、グループ企業の製品間で売り上げを奪い合う

    BPR

    • Business Process Reengineering
    • 組織の構造、管理体制の抜本的に見直し、再構築

    ジョイントベンチャ

    • 2社以上の企業が共同出資して経営する企業
    • 買収合併より即効性がある

    アライアンス

    業務提携

    M&A

    企業の合併や買収によって相手企業の支配権を取得すること

    JIT

    • ジャストインタイム(just in time)
    • 在庫最小化

    カンバン方式

    • 生産指示票を”かんばん”と呼ぶ
      (納期、生産量が記載されている、ICタグ)

    セル生産方式

    一人、少人数で完成まで担当(対義語:ライン生産)

    アマゾフの成長マトリクス

    製品と市場から4つの成長戦略

    デザイン思考

    利用者を中心にサービスをデザインするアプローチ

    ハッカソン

    ハッカソンは、技術者が、短期間で作ったソフトウェアやサービスの成果物を評価するイベント

    「ハック」と「マラソン」

    ダーウィンの海

    PoC

    • Proof of Concept
    • 開発前の検証

    機械学習

    教師あり学習

    正解を与える

    教師なし学習

    正解がない状態から法則性を学習させる

    RFP

    提案依頼書(Request for Proposal

    https://ntorelabo.com/2023/02/04/4157/#co-index-9
    【WordPress】オリジナルテーマ作成手順

    1)テーマのディレクトリ作成する

    wp-content/themes/ ディレクトリ内にテーマ名のディレクトリを作成します。

    public\wp-content\themes\テーマ名

    2)テーマに必要なファイルの作成(最小構成)

    最小構成

    テーマ名ディレクトリ直下にstyle.cssとindex.phpを作成します。

    • index.php:テーマの基本テンプレート
    • style.css:テーマの名前などを記述
      ※テーマ名も必須

    「style.css」を作成

    style.cssにコメント形式で詳細情報を記述します。

    @charset "UTF-8"; 
    /*
     Theme Name: mytheme 
    */

    「index.php」を作成

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    
      <?php wp_head(); ?>
    </head>
    <body>
      
      <?php wp_footer(); ?>
    </body>
    </html>
    

    <?php wp_head(); ?>、<?php wp_footer(); ?>の記述によって下記の通りになります

    • WordPressの基本機能のコードの出力(管理ツールバーが表示)
    • プラグイン機能のコードが出力

    パーツファイルを作成

    「header.php」を作成

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="<?php bloginfo( 'description' )?>">
      <title><?php bloginfo( 'name' ); ?></title>
      <?php wp_head(); ?>
    </head>
    <body>

    「footer.php」を作成

    <?php wp_footer(); ?>
    </body>
    </html>

    「index.php」を編集

    <?php get_header(); ?>
    
    <?php get_footer(); ?>

    メニュー表示

    外観>メニューからナビゲーションの編集

    ※初期状態ではOFF状態で表示されていません

    「functions.php」もしくはプラグイン「WPCode」PHP スニペットで下記を記述

    add_action('after_setup_theme', //テーマ初期化のタイミングで関数を読み込み
    	function() {
    		add_theme_support('menus'); //メニュー機能をON 
    		register_nav_menus([ //メニューの表示位置を作成
    			'header_nav' => 'ヘッダーナビゲーション'
    		]);
    	}
    );

    ▼header.phpを編集

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="<?php bloginfo( 'description' )?>">
      <title><?php bloginfo( 'name' ); ?></title>
      <?php wp_head(); ?>
    </head>
    <body>
        <header>
        <?php wp_nav_menu(); ?>
        </header>

    投稿ページ用テンプレートの作成

    single.phpを作成

    <?php
    /**
     * Template Name: テンプレート1
     * Template Post Type: post,page
     */
    ?>
     
    <?php get_header(); ?>
      <?php
      if (have_posts()) :
        while (have_posts()) : the_post();
      ?>
          <h1><?php the_title(); ?></h1>
          <?php the_content(); ?>
      <?php
        endwhile;
      endif;
      ?>
    <?php get_footer(); ?>

    アイキャッチ機能を有効化する

    「functions.php」もしくはプラグイン「WPCode」PHP スニペットで下記を記述

    add_action('after_setup_theme', //テーマ初期化のタイミングで関数を読み込み
    	function() {
    		add_theme_support( 'post-thumbnails' ); //アイキャッチ画像をON
    	}
    );

    ↓テンプレートファイルに追記

    <?php if (has_post_thumbnail()) : ?> 
        <?php the_post_thumbnail( array(200,150), array( 'class' => 'icatch' ) ); ?>
    <?php endif; ?>

    投稿一覧用テンプレートの作成

    ↓index.phpを編集

    <?php get_header(); ?>
      <h1>投稿一覧</h1>
      <hr>
      <?php
      if (have_posts()) :
        while (have_posts()) : the_post();
      ?>
        <?php if (has_post_thumbnail()) : ?> 
          <?php the_post_thumbnail( array(200,150), array( 'class' => 'icatch' ) ); ?>
        <?php endif; ?>
        <h2><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h2>
        <?php the_category( ' / ' ); ?>
        <hr>
      <?php
        endwhile;
      endif;
      ?>
    <?php get_footer(); ?>

    固定ページ用テンプレートの作成

    3)「functions.php」、「header.php」、「footer.php」、「sidebar.php」

    functions.php

    cssやjsファイルの読み込みの記述等

    <?php
    add_action( 'after_setup_theme', function(){
      register_nav_menus( array(
      'global-nav' => 'グローバルメニュー'
      ));
    });
    add_action( 'after_setup_theme', function(){
      add_theme_support( 'custom-logo' );
    } );
    add_action('wp_head', function () {
    	?>
    	<!-- Googleフォント -->
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&display=swap" rel="stylesheet">
    	<?php
    });
    add_action(
      'wp_enqueue_scripts',
    	function() {
        wp_enqueue_style( 'destyle', 'https://cdn.jsdelivr.net/npm/destyle.css@4.0.1/destyle.css' );
        wp_enqueue_style( 'style', get_template_directory_uri() .'/assets/css/style.css' );
      }
    );
    add_action(
      'wp_enqueue_scripts',
      function(){
        wp_enqueue_script( 'main-js', get_stylesheet_directory_uri() . '/assets/js/main.js', array( 'jquery' ), true, true);
      }
    )
    wp_enqueue_style($handle, $src, $deps, $ver, $media);
    引数説明初期値
    $handleスタイルシートのハンドル名を指定。なし
    $srcスタイルシートへのパスfalse
    $deps依存する(このスタイルシートより前に読み込まれる必要がある)他のスタイルシートのハンドル名を配列で指定する。
    依存関係がない場合は falseを指定する。
    array()
    $verバージョンを指定。
    ブラウザキャッシュ対策にもなる。
    false
    $mediamedia属性に関する指定all

    第4引数でキャッシュをクリア

    searchform.php

    検索フォームパーツを記載したファイルです。

    get_search_form()関数でphpform.phpを呼び出します。

    search.php

    検索結果を表示するページです。

    Next.jsでGoogleタグマネージャーの実装、アンチフリッカータグ(Anti-flicker snippet)

    Next.js 13以降では、@next/third-partiesの使用が推奨

    タイミングの問題:

      • インラインスクリプトは即時実行されますが、loadingクラスを使用して可視性を制御しています
      • 2000msのタイムアウトが設定されており、その間にGTMが正しく初期化されない可能性があります

      layout.tsxでGTMの実装が2箇所で重複しています:

      インラインスクリプトでの実装、@next/third-partiesを使用した実装、GTMが2回初期化される可能性がある。タイミングの競合が発生する可能性がある。

      アンチフリッカータグ

      アンチフリッカータグ(Anti-flicker snippet)は、A/Bテストツール(Google Optimize等)使用時に発生する「ちらつき」(FOOC: Flash of Original Content)を防ぐための重要な仕組みです。

      (function(p,r,o,j,e,c,t,g){
          // 1. ページ読み込み開始時にスタイルを追加
          p['_'+t]={}; // タイマーオブジェクトの初期化
          g=r.createElement('script');
          g.src='https://www.googletagmanager.com/gtm.js?id=GTM-'+t;
          r[o].prepend(g); // GTMスクリプトの読み込み
          
          // 2. 非表示用のスタイルを追加
          g=r.createElement('style');
          g.innerText='.'+e+t+'{visibility:hidden!important}';
          r[o].prepend(g);
          
          // 3. 非表示クラスを追加
          r[o][j].add(e+t);
          
          // 4. タイムアウト処理
          setTimeout(function(){
              if(r[o][j].contains(e+t)){
                  r[o][j].remove(e+t); // タイムアウト時にクラスを削除
                  p['_'+t]=0;
              }
          },c) // cはタイムアウト時間(ミリ秒)
      })(window,document,'documentElement','classList','loading',2000,'[GTMのID]')

      ページ読み込み開始時に、コンテンツを一時的に非表示にする Google Optimize(またはGTM)がロードされるまでコンテンツを隠し続ける 設定された時間(この場合2000ミリ秒)以内にバリエーションが適用されない場合、オリジナルコンテンツを表示

      環境変数

      優先順位

      1. .env.development.local / .env.production.local
      2. .env.local
      3. .env.development / .env.production
      4. .env

      next dev実行時は開発用GTM IDが使用される next build && next start実行時は本番用GTM IDが使用される

      // .env.development
      NEXT_PUBLIC_GTM_ID=GTM-開発用ID
      
      // .env.production
      NEXT_PUBLIC_GTM_ID=GTM-本番用ID

      Next.jsではクライアントサイドで使用する環境変数には必ずNEXT_PUBLIC_プレフィックスが必要です。

      .env

      NEXT_PUBLIC_GTM_ID=GTM-xxxxxxx

      layout.tsx等

      // layout.tsxの先頭で確認
      console.log('GTM ID:', process.env.NEXT_PUBLIC_GTM_ID);
      
      const gtmId = process.env.NEXT_PUBLIC_GTM_ID;
      
      <GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID as string} />

      ネットワークセキュリティ

      OSアプリケーションの
      定期的な更新
      セキュリティホール(プログラムの不具合のよるセキュリティ上の弱点)を防ぐため
      ネットワークデバイスの
      物理的な保護
      鍵付きのラックに保護
      ユーザに対する
      セキュリティ教育
      FW、IDS/IPS、
      ウィルス対策ソフトなど
      のセキュリティシステムの配備
      ネットワークセキュリティの要件に応じて、以下のシステムを組み合わせて配置します。
      ・FW(FireWall):パケットフィルタリング
      ・IDS(Intrusion Detection System):侵入者を通知
      ・IPS(Intrusion Prevention System):侵入行為を防ぐ
      簡単なパスワードを
      使用しない
      多要素認証認証の要素を複数組み合わせる
      ・知識要素:記憶している情報(ID、パスワード、PIN番号)
      ・所有要素:所有している物(電話番号を使ったSMS認証、ワンタイムパスワード発生器、MACアドレス)
      ・生体要素:(指紋、網膜)

      ネットワークデバイスのセキュリティ

      CDPの無効化隣接する危機に情報を与えることになるので、必要ない場合は無効化します。
      【CDPの無効化】(config)#no cdp run
      HTTPサーバとHTTPSサーバの無効化リモートアクセスにHTTP/HTTPSを使ったGUI操作を提供するサービスで、通常SSHを使うので必要ない場合は無効化します。
      【HTTPサーバの無効化】(config)#no ip http server
      【HTTPSサーバの無効化】(config)#no ip http secure-server
      セキュアなプロトコルの使用リモートアクセスには暗号化権限のないTelnetではなく、暗号化権限のあるSSH接続のみを使用する
      【Telnetを無効化、SSH接続のみ有効化】
      (config)#line vty 0 4
      (config-line)#transport input ssh
      RSAホスト鍵を生成
      (SSHサーバの設定)
      Router(config)#hostname R1
      ※機器名をデフォルトから変える必要がある
      R1(config)#crypto key generatersa
      未使用なポートの無効化スイッチはデフォルトで全てのポートが有効化されているので、使用したいポートは無効化しておきます。
      (config-if)#shutdown
      パスワードの暗号化現在設定されているパスワードも、これから設定するパスワードも全て暗号化する
      (config)#service password-encryption
      簡単なパスワードは使用しない
      バナーに不要なメッセージを載せないホスト名など、不正ログインのヒントになるような情報

      スイッチのセキュリティ

      • アクセスポートにする…トランクポートやネイティブVLANがデフォルトになっていると狙われる
      • ネイティブVLANを未使用のVLANに変更する
      • shutdownする

      情報セキュリティポリシー

      • ポリシー(基本方針)…考え方や方針
      • スタンダード(対策基準)…対策内容
      • プロシージャ(実地手順)…

      人を狙った攻撃

      ソーシャルエンジニアリング人を狙った攻撃のうち、コンピュータネットワークを使わない攻撃の総称。
      例:パスワードの覗き見
      フィッシング正規の業者を装ったメールを送り、偽のサイトに誘導して個人情報をを入力させようとする行為
      ヴィッシング正規の業者を装ったメールを送り、偽のフリーダイヤルに誘導して個人情報をを入力させようとする行為
      スピアフィッシング特定の企業や人物を狙ったフィンシング
      ホエーリング社長や政治関係者など、重要な人物を狙ったフィッシング
      スミッシングSMS(ショートメッセージサービス)を使ったフィッシング
      ファーミングDNSを悪用して偽のサイトに誘導するフィッシング
      水飲み場攻撃攻撃対象が普段アクセスするサイトを改竄しておき、サイトにアクセスするだけでマルウェアに感染させる攻撃
      ブルートフォースアタックブルートフォースアタック(総当たり攻撃)はパスワードを破る手法の一つで、パ スワードに使用されている文字列を推測し、パスワードが解除できるまで考えられ るパターンを試行し続ける攻撃手法です。

      ゼロデイ攻撃

      まだ対策が行われていない、脆弱性を狙った攻撃をさします。無防備な状態をゼロデイといいます。

      スプーフィング

      スプーフィングとは送信元を偽装する行為です。

      DoS攻撃1台のコンピュータからターゲットに大量のパケットを送る
      DDoS攻撃複数のコンピュータからターゲットに大量のパケットを送る
      リフレクション攻撃送信元を偽った要求をサーバに送り、ターゲットに大量の応答を返すように仕向ける攻撃
      中間者攻撃正規の送信者と受信者の間に入りデータの盗聴や改変をする攻撃
      バッファーオーバーフロー攻撃バッファ容量を超えるデータを使い、悪意のある命令を実行させる攻撃

      マルウェア

      マルウェアとは、悪意のあるプログラムの総称です。

      <主なマルウェア>

      ウィルス他のプログラムに寄生して悪さをするプログラム。規制されたプログラムを使用することで感染が広がる
      ワーム単独で増殖し、自ら感染を拡大させる
      トロイの木馬有益なプログラムを装ってコンピュータに侵入するマルウェア

      Cisco AMP

      Cisco Advanced Malware Protection(AMP)はCiscoが提供するマルウェア対策製品です。

      • サンドボックス機能
      • リアルタイムのマルウェア検知による侵入防御
      • ネットワーク内のファイルの継続的分析によって、進入してしまったマルウェアの封じ込み

      ファイアウォール

      【ファイアウォールの機能】

      • パケットフィルタリング…ルールに従って、パケットの通過を許可、破棄をする機能
      • ステートフルインスペクション…通信のフローを監視し、不適切な通信を拒否する機能

      内部(Inside)ゾーン外部から守るべきネットワーク。基本的に信頼できるものとして扱う。
      外部(Outide)ゾーン攻撃元となる可能性のあるネットワーク。基本的に信頼できないものとして扱う。
      DMZ
      (DeMilitarized Zone)
      非武装ゾーン:内部と外部の中間。基本的に外部からアクセスできるのはこのゾーン

      NGFW

      NGFW:Next-Generation FireWall:次世代ファイアウォール

      • 従来型ファイアウォールの機能:IPアドレスやポート番号を基にしたフィルタリング
      • AVC(Application Visibility and Control:アプリケーションの識別と制御):アプリケーションの情報を基にしたフィルタリング(同じポート番号80のHTTP通信でも、Googleは許可するがTwitterは許可しないなどが可能)
      • URLフィルタリング:悪意のあるWEBサイトにアクセスしてしまうことを防ぐ

      SYNフラッド攻撃

      接続開始を要求するSYNパケットだけを次々送りつけ、ACKパケットの返信をわざと怠り放置する。相手側には応答待ちのままTCPコネクションの確立ができません、このようなハーフオープン状態を大量に発生させサーバのリソースを奪います。

      NGIPS

      NGIPS(Next-Generation Intrusion Prevention System:次世代侵入防止システム)はこれまで使われていたIPSよりも高度な機能を備えたIPS。

      • 必要なイベントのみが記録される
      • マルウェアの防御
      • 将来のIPSの機能 … シグネチャ(悪意の攻撃を識別するための情報)を参照し、悪意あるパケットの受信やネットワークの侵入を防ぐ

      Cisco Firepower

      Cisco FirepowerとはNGFWNGIPSを搭載したCiscoのセキュリティ製品です。

      username

      ※強力な暗号化アルゴリズムとして、sha256(PBKDF2)とscryptの使用がCiscoにより推奨。

      特権レベル説明
      15・特権モードでセッションを開始する(Router#)
      ・特権コマンドの全てのコマンドが使用可能
      1・ユーザモードでセッションを開始する(Router>)
      ・ユーザコマンドの全てのコマンドが使用可能
      0・ユーザモードでセッションを開始する(Router>)
      ・ユーザコマンドの一部のコマンドが使用可能

      <注意事項>

      • 1つのユーザーに対して設定できるパスワードは1つのみ(後から入力したパスワードが有効になる)
      • 1つのユーザーに対して「password」または「secret」のどちらか一方しか使用できない(後から入力したコマンドは受け付けられない)

      enableパスワード

      lineパスワード

      ※イネーブルパスワードとイネーブルシークレットパスワードが両方ともに設定されている場合、イネーブルシークレットパスワードの方が優先されます。

      【特権モードに移行するためのパスワードを設定】
      (config)#enable password
      
      【特権モードに移行するための暗号化されたパスワードを設定】
      (config)#enable secret 
      【コンソールパスワードの設定】
      
      (config)#line console 0
      (config-line)#password < password >
      (config-line)#login
      
      ※コンソールポートは一つしかないためライン番号は常に0を指定

      <コンソールポートでの認証>

      • コンソールポートのデフォルトはloginコマンドなし(no login)
      • loginコマンドなし ⇒ パスワード要求なし(認証機能は無効)
      • loginコマンドあり ⇒ パスワード入力が必要(認証機能は有効)

      <VTYでの認証>

      • VTYポートのデフォルトはlogin
      • passwordコマンドなしの場合「Password required, but none set」と表示される

      クリアテキストで表示されているパスワードを全て暗号化するコマンド
      (config)#service password-encription

      ローカルデータベースで使用するユーザアカウントの作成
      (config)#username {ユーザ名} password {パスワード}

      仮想端末回線にアクセスしてきたユーザをローカルデータベースで認証する
      (config)#line vty {開始VTY番号} [{終了VTY番号}]
      (config-line)#login local

      VTYポートへ接続する際に使えるプロトコルの指定
      (config)#line vty {番号} {終了番号}
      (config-line)#transport input {プロトコル} {プロトコル}

      sshを使うを使いREMOTEルータに外部からログイン

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

      VTYアクセス制御

      VTYアクセス制御とは、Telnet/SSHリモートアクセスのアクセス制御です。

      • 管理者のホストなど特定のIPアドレスからのみVTYアクセスできるようにするとよりセキュアです。
      • 標準ACLを使用する

      L2セキュリティ

      【ポートセキュリティの設定で使用する主なコマンド】

      ARPスプーフィング

      • ARPを使った中間者攻撃
      • DAIで防ぐことができる

      <ARPスプーフィングの動作>

      DAI

      • DAI(Dynamic ARP Inspection)ARPスプーフィングを防ぐ
      • DAIは、ARPパケットを検査する機能です。
      • 「Trustedポート」(信頼するポート)と、「unTrustedポート」(信頼しないポート) に分類します。
      • DAIを有効にするとデフォルトで全てのポートが信頼できないポートになります。

      <DAIでは、以下の2種類のバインディングテーブルを利用>

      バインディングテーブルDHCPスヌーピングバインディングテーブル
      DHCP環境必要 DHCPスヌーピングバインディングテーブル
      非DHCP環境不要 スタティックに設定されたIPアドレスとMACアドレスの関連付けテーブル

      <DAIの動作>

      <DAIの設定>

      1. DAIの有効化
      2. 信頼できるポートの指定
      3. 着信したARPパケットに対して行う検査の追加(オプション)
      1. (config)#ip arp inspection vlan {VLAN番号}
      2. (config-if)#ip arp inspection trust
      3. (config)#ip arp inspection validate {src-mac | dst-mac | ip}

      src-mac … イーサネットヘッダの送信元MACアドレスと、ARPパケットのデータの送信元MACアドレスが同じかを検査
      dst-mac … イーサネットヘッダの宛先MACアドレスと、ARPパケットのデータの宛先MACアドレスが同じかを検査
      ip … ARPパケットのデータに含まれるIPアドレスを検査

      DHCPスプーフィング

      DHCPスプーフィング(なりすまし)とは、攻撃者が不正なDHCPサーバを立ち上げて、DHCP OFFERで自身のIPアドレスをデフォルトゲートウェイにするよう通知し、ユーザからのパケットを盗聴する攻撃です。

      【DHCPの動作】

      【DHCPスプーフィングの動作】

      DHCPスヌーピング

      • DHCPスヌーピングは DHCPパケットを監視する機能です。
      • 各ポートを「trustedポート」(信頼するポート)と、「untrustedポート」(信頼しないポート) に分類します。
      • trustedポートに着信したDHCPパケットは全て許可します。
      • untrustedポートに着信したDHCPパケットは、クライアントからサーバに送られるDHCPパケット(DISCOVER…クライアント接続、REQUEST …DHCP要求)は許可しますが、サーバからクライアントに送られるDHCPパケット(OFFER、ACK)は拒否します。

      [DHCPスヌーピングの設定]

      1. DHCPスヌーピングの有効化
      2. DHCPスヌーピングを有効にするVLANの指定(同時に複数の指定が可能)
      3. 信頼できるポートの指定(DHCPサーバが接続している方向のポートに適用)
      4. 信頼できないポートでDHCP Option 82付きパケットの受信を許可(オプション)

      1. (config)#ip dhcp snooping
      2. (config)#ip dhcp snooping vlan {VLAN番号} [VLAN番号]
      3. (config-if)#ip dhcp snooping trust
      4. (config)#ip dhcp snooping information option allow-untrusted

      DHCPスヌーピングで処理されたパケットの数の確認
      ・#show ip dhcp snooping statistics
      ・#show ip dhcp snooping statistics detail

      DHCPパケットのレート制限
      インターフェースが受信できる1秒あたりのDHCPパケット数を設定することでDoS攻撃を防ぎます。
      trustedポートとuntrustedポート両方に設定が可能

      (config-if)#ip dhcp snooping limit rate {1秒あたりに受信可能なDHCPパケット数}

      DHCPスヌーピングバインディングデータベース

      DHCPスヌーピングを有効にすると、「DHCPスヌーピングバインディングデータベース」を作成します

      <以下の情報が記録されます>

      • DHCPクライアントのMACアドレス
      • DHCPクライアントに割り当てられたIPアドレス
      • IPアドレスのリース時間
      • ポートが属するVLAN
      • スイッチのポート番号

      ポートセキュリティ

      セキュアMACアドレス

      ポートセキュリティが有効なポートで許可されるMACアドレスをセキュアMACアドレスと呼びます。

      スティッキーラーニング

      動的に学習したセキュアMACアドレスをrunning-configに書き込む

      【セキュリティ違反時の動作】

      【err-disabled状態になったポートを復旧させる方法】

      err-disableは、機械的にポートをshutdownさせていますので、人の手で1度 shutdown状態にします。
      その後は、通常通り no shutdownコマンドでポートを有効化させてあげるだけです。

      MACアドレス(セキュアMACアドレス)を静的に設定

      Switch(config)#interface { インターフェイス }
      Switch(config-if)#switchport mode access ←インターフェイスモードを選択
      Switch(config-if)#switchport port-security ←ポートセキュリティを有効化
      Switch(config-if)#switchport port-security mac-address { MACアドレス } ←セキュアMACアドレスを設定

      err-disabled自動復旧の有効化
      (config)#errdisable recovery cause {all | 理由}

      err-disabled自動復旧までの秒数変更
      (config)#errdisable recovery interval {秒}
      30秒~86400秒で指定(デフォルトは300秒)

      特定のインターフェースに設定してあるポートセキュリティの詳細情報を確認
      #show port-security interface

      <VLANポートのセキュリティ>

      • 接続予定の無いポートをトランクにする
      • 接続予定の無いポートをshutdownする
      • 通常使用するVLANはデフォルトで存在するVLANやネイティブVLAN以外にしておくことが推奨
        (※VLAN1はデフォルトで存在するVLANであり、全てのポートがデフォルトで属しているVLANのため、攻撃の対象になりやすいという危険性があります。)

      show port-security interface [interface-id]

      <ポートセキュリティの設定を確認>

      show port-security interface [interface-id]

      • インタフェースのセキュアMAC アドレスの最大許容数
      • インターフェイスのセキュアMAC アドレスの数
      • キュリティ違反の数
      • 違反時の違反モード
      WordPressの編集画面にCSSをあてる方法

      1)CSSファイルを用意

      下記のように実際の表示に近いスタイルをあてれるよう記載

      https://siennahare23.sakura.ne.jp/e-style/editor.css

      h2.wp-block-heading {
      	font-size: 1.3rem;
      	border-top: 1px solid var(--main-color);
      	border-bottom: 1px solid var(--main-color);
      	padding: .625em 1em;
      }
      
      h3.wp-block-heading {
      	font-size: 1.25rem;
      	border-bottom: 1px solid var(--main-color);
      	padding: .5em 1em;
      }
      
      h4.wp-block-heading {
      	font-size: 1.125rem;
      }
      
      .wp-block-group {
      	padding: 1rem;
      }
      
      .wp-block-code {
          background-color: #f2f2f2;
          overflow-x: auto;
          padding: 1rem;
      }

      2)functions.phpを編集

      「functions.php」もしくはプラグイン「WPCode」PHP スニペットで下記を記述

      add_action('after_setup_theme', //テーマ初期化のタイミングで関数を読み込み
      	function() {
      		add_theme_support( 'editor-styles' );
      	}
      );
      
      // エディターにCSS読み込み
      add_action('admin_init',
      	function() {
      		add_editor_style( 'https://siennahare23.sakura.ne.jp/e-style/editor.css' );
      	}
      );
      Next.js + TypeScriptで作る!画像ギャラリー実装(map関数)

      完成イメージ

      このチュートリアルでは、以下のような機能を持つギャラリーを作成します

      ソースファイル

      imageGallery.tsx

      // src/components/imageGallery.tsx
      'use client'
      import { useState } from 'react'
      import { X, ChevronLeft, ChevronRight } from 'lucide-react'  // Lucide Reactのアイコンを使用
      import styles from '@/styles/imageGallery.module.css'
      
      const ImageGallery = () => {
        const [selectedImage, setSelectedImage] = useState<string | null>(null);
        const [currentIndex, setCurrentIndex] = useState<number>(0);
      
        const images = [
          "https://bizlabo.site/sample-img/column1.jpg",
          "https://bizlabo.site/sample-img/column2.jpg",
          "https://bizlabo.site/sample-img/column3.jpg",
          "https://bizlabo.site/sample-img/column4.jpg",
          "https://bizlabo.site/sample-img/column5.jpg",
          "https://bizlabo.site/sample-img/column6.jpg",
          "https://bizlabo.site/sample-img/column7.jpg",
          "https://bizlabo.site/sample-img/column8.jpg",
        ];
      
        // 引数はReact.MouseEvent型として、イベントオブジェクトを受け取り、イベント伝播を停止する
        const handleNext = (e: React.MouseEvent) => {
          e.stopPropagation(); // 親要素へのイベント伝播を停止
          setCurrentIndex((prev) => (prev + 1) % images.length); // 画像の数で割った余りを新しいインデックスとするため、画像の数を超えた場合は0に戻る
          setSelectedImage(images[(currentIndex + 1) % images.length]);
        };
      
        const handlePrev = (e: React.MouseEvent) => {
          e.stopPropagation();
          setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
          setSelectedImage(images[(currentIndex - 1 + images.length) % images.length]);
        };
      
        return (
          <div className={styles.container}>
            <div className={styles.grid}>
              {images.map((image, index) => (
                <img
                  key={index}
                  src={image}
                  alt={`画像 ${index + 1}`}
                  className={styles.image}
                  onClick={() => {
                    setSelectedImage(image);
                    setCurrentIndex(index);
                  }}
                />
              ))}
            </div>
      
            {selectedImage && (
              <div className={styles.modal} onClick={() => setSelectedImage(null)}>
                <div className={styles.modalContent}>
                  <button className={styles.closeButton} onClick={() => setSelectedImage(null)}>
                    <X size={32} />  {/* Xアイコン */}
                  </button>
                  <button className={styles.prevButton} onClick={handlePrev}>
                    <ChevronLeft size={40} />  {/* 左矢印アイコン */}
                  </button>
                  <img
                    src={selectedImage}
                    alt="拡大画像"
                    className={styles.modalImage}
                    onClick={(e) => e.stopPropagation()}
                  />
                  <button className={styles.nextButton} onClick={handleNext}>
                    <ChevronRight size={40} />  {/* 右矢印アイコン */}
                  </button>
                </div>
              </div>
            )}
          </div>
        );
      };
      
      export default ImageGallery;

      imageGallery.module.css

      .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .modalContent {
        position: relative;
        max-width: 90vw;
        max-height: 90vh;
      }
      
      .closeButton {
        position: absolute;
        top: -40px; /* 画像の上に配置 */
        right: -40px; /* 画像の右に配置 */
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        padding: 8px;
        z-index: 1;
        transition: all 0.2s;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .closeButton:hover {
        background-color: rgba(255, 255, 255, 0.1);
        transform: scale(1.1);
      }
      
      .prevButton,
      .nextButton {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        padding: 16px;
        z-index: 1;
        transition: all 0.2s;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .prevButton:hover,
      .nextButton:hover {
        background-color: rgba(255, 255, 255, 0.1);
        transform: translateY(-50%) scale(1.1);
      }
      
      .prevButton {
        left: -60px;
      }
      
      .nextButton {
        right: -60px;
      }
      
      /* 既存のスタイル */
      .container {
        padding: 1rem;
      }
      
      .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
      }
      
      .image {
        width: 100%;
        height: auto;
        object-fit: contain;
        cursor: pointer;
        transition: transform 0.2s;
      }
      
      .image:hover {
        transform: scale(1.05);
      }
      
      .modalImage {
        max-height: 90vh;
        max-width: 90vw;
        object-fit: contain;
      }
      
      @media (min-width: 768px) {
        .grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      
      @media (min-width: 1024px) {
        .grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }
      

      map関数について

      map関数の特徴

      1. 元の配列の各要素に対して処理を行う
      2. 新しい配列を返す
      map関数の重要な2つの特徴 元の配列: [1, 2, 3] 特徴1: 各要素に対して同じ処理を適用 1 → multiply by 2 → 2 2 → multiply by 2 → 4 3 → multiply by 2 → 6 特徴2: 新しい配列を返す(元の配列は変更されない) 元の配列: [1, 2, 3] (変更されない) 新しい配列: [2, 4, 6] (処理結果の新しい配列)
      Web制作便利ツール

      ダミーテキスト

      https://webtools.dounokouno.com/dummytext/

      この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

      ダミー画像

      https://placehold.jp/

      サンプル

      <link rel="icon" href="https://placehold.jp/100px/fcf0ed/f55229/150x150.png?text=jQ&css=%7B%22border-radius%22%3A%2215px%22%2C%22font-weight%22%3A%22%20bold%22%7D">

      「clamp」ジェネレーター「Min-Max-Value Interpolation」

      https://min-max-calculator.9elements.com/

      ベーシック認証用ファイル作成

      1) 下記サイトにて以下のファイルを作成します。

      • .htaccecc
      • .htpasswd

      2) ユーザー、パスワード、サイトパスを入力すると各ファイルに記述する文字が出力されます。

      ※サイトパスは各レンタルサーバによって異なります。

      エックスサーバー/home/サーバーID/独自ドメイン名/public_html/
      さくらのレンタルサーバ/home/アカウント名/www/
      ロリポップ/home/users/{数字}/ロリポップID/web/
      mixhost/home/ユーザー名/public_html/

      3) 作成したファイルを該当サイトの所定ディレクトリに設置します。

      https://www.htaccesseditor.com/#a_basic

      テーブルタグ作成

      https://www.tagindex.com/tool/table.html

      キャッチコピー参考

      https://cacopy.com/
      Twitter、Facebookのタイムラインを埋め込む

      Twitterタイムラインの埋め込み

      https://publish.twitter.com/#

      こちらのページに行き、タイムラインを表示したいツイッターアカウントのURLを入れて、エンターキーを押します。

      次に、左側の「Embedded Timeline」をクリックします。

      コードが表示されるのでこれをコピーして、カスタムHTMLブロックで貼り付けます。

      これでタイムランが表示されるようになります。

      細かくカスタマイズする方法

      デフォルトだと縦に長いです。

      これをカスタマイズするには、まず「set customization options」の箇所のリンクをクリックします。

      すると以下のような表示に切り替わります。

      ここで以下の4つの項目をカスタマイズ可能です。

      1. タイムラインの高さ(px単位)
      2. タイムラインの幅(px単位)
      3. タイムラインのテーマ色(Lightモード又はDarkモードの2択)
      4. 言語指定

      カスタマイズの設定が完了したら「Update」ボタンをクリック。

      コードが表示されるので、「Copy Code」をクリック(自動的にコピーされます)。これをサイトに貼り付けます。

      サンプル↓

      コードでカスタマイズする方法

      直接、コードに追加してカスタマイズする方法もあります。

      埋め込み用コードの「“twitter-timeline”」の後ろに、カスタマイズ用のコードを追加します。
      追加する際は、必ず前後に半角スペースを空けてください。

      タイムラインの高さ(px単位)data-width=”**”
      タイムラインの幅(px単位)data-height=”**”
      テーマ色を「Darkモード」にdata-theme=”dark”
      リンクの色data-link-color=”#***”
      境界線の色data-border-color=”#***”
      ヘッダーを非表示にするdata-chrome=”noheader”
      フッターを非表示にするdata-chrome=”nofooter”
      境界線を消すdata-chrome=”noborders”
      スクロールバーを非表示にするdata-chrome=”noscrollbar”
      背景を透明にするdata-chrome=”transparent”

      「data-chrome=”***”」系のコードを複数まとめて記入する場合は
      たとえば、
      「data-chrome=”noheader nofooter”」
      と、半角スペースを空けて複数入れます。

      Facebookタイムラインの埋め込み

      https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP

      safariで表示されない場合の対処

      https://digitalyze.net/chrome_facebook_page-plugin/#toc2
      【ITパスポート】【基本情報】コンピュータシステム

      5大機能

      制御装置他の4つの装置を協調して動作させる装置。全体をコントロールする。
      演算装置計算をする装置。
      記憶装置動作速度(クノック周波数)で性能を表す
      入力装置キーボード、マウス…
      出力装置ディスプレイ、プリンタ…

      CPU

      • 制御装置と演算装置
      • CPUの値は一度に処理できるデータ量

      クノック周波数

      • CPUの性能を示す
      • 1秒間に繰り返すクロックの回数

      MIPS

      • Million Instructions Per Second
      • 1秒間に実行できる命令の数

      ベンチマークテスト

      利用者の体感に即した「性能の目安」を測定するものです。

      マルチコアプロセッサ

      • 見かけは1個のCPUなのに、内部には複数のCPUがある
      • デュアルコア…コアが2つ
      • クアッドコア…コアが4つ

      ターボブースト

      特定コアの動作周波数を規格よりも引き上げること。

      スループット

      単位時間当たりに処理される仕事の量

      <影響>

      • CPUのクロック周波数
      • ハードディスクの回転数
      • OS

      スプーリング

      • スプーリングはスループットを向上させる
      • 例)処理の遅いプリンタの出力に合わせてデータを転送 … 遊休時間が生じる

        出力データを補助記憶装置へ転送 … すぐに次の処理に移れる

      GPU

      CPUに変わって画像の処理を行う

      記憶装置

      記憶装置は主記憶装置と補助記憶装置に別れます。CPUが直接読み書きできるのが主記憶装置、できないのが補助記憶装置です。

      • 主記憶装置…直接読み書きできる。電源落とすと、記憶内容が消えてしまう(揮発性)
      • 補助記憶装置…直接読み書きできない。

      記憶装置の階層化

      記憶装置は容量が小さいほど高速で、容量が大きくなるほど低速になります。

      高速低速
      CPU内部の記憶装置(レジスタ主記憶装置補助記憶装置

      各記憶装置間の処理速度の差で、CPUは待たされることになります。そこで間にキャッシュメモリ、ディスクキャッシュという装置を設置します。

      CPU→キャッシュメモリ→主記憶装置→ディスクキャッシュ→補助記憶装置

      DRAM

      • Dynamic Random Access Memory
      • 定期的にリフレッシュをしてデータの消失を防いでいる
      • PCの主記憶として利用される

      SRAM

      • Static Random Access Memory
      • リフレッシュをしなくてもデータの消失はしない
      • 読み書きの速度が速いのでCPU、キャッシュとして利用される
      • フリップフロップ回路を利用

      リフレッシュ読み書き価格容量揮発性
      DRAM必要遅い安い大きい消える
      SRAM不要速い高い小さい消える

      補助記憶装置

      ハードディスク安価、大容量で読み書き速度が速い。
      SSD・半導体を用いた装置。高価。
      ・書込み回数に上限がある。
      磁気テープ安価、大容量だか読み書きの速度は遅い。バックアップ用によく使われる。
      CD-ROM安価だが、容量はハードディスクや磁気テープに劣る。読み書きの速度はハードディスクより遅い。追記のみできるCD-Rや書き換えのできるCD-RWがある。
      DVD性質的にはCD-ROMと一緒
      Blue-ray Discデータの大容量化や動画のハイビジョン化に対応するために開発された光ディスク。
      フラッシュメモリ・主記憶と同様の技術が用いられるが、不揮発性。
      ・記録素子として半導体メモリが使われています。

      OS

      コンピュータを動かすためには、様々なソフトウェアが必要です。

      「コンピュータを使う以上は、だれがどんな用途に使っても基本的に必要な機能」を集めたソフトがOS(基本ソフトウェア)です。

      ディレクトリ

      OSの仕事1つでファイルの管理があります。

      • ディレクトリ…ファイルを入れる入れもの。ファイルをグループに分けられる。
      • ルートディレクトリ…ファイルを管理するツリー構造の頂点。
      • カレントディレクトリ…自分が今みているディレクトリ。

      ファイルを指定する方法は以下の2つがあります。

      • 絶対パス…ルートディレクトリからそのファイルまでのパスを全部書く方法
      • 相対パス…自分が今みているディレクトリを起点にパスを書く方法

      BIOS

      BIOS(Basic Input/Output System)最も基本的なハードウェアの操作を司るプログラムです。コンピュータが動作するのに必須のハードウェア(メモリ、ハードディスク、キーボードなど)を動かします。BIOSがOSを起動します。

      デバイスドライバ

      プリンタ、スキャナなど各種のハードウェアを動作させるためのハードウェアです。

      プラグアンドプレイ

      デバイスドライバのインストールは周辺機器の接続時に自動的に行わせるようになりました。

      デュアルシステム

      • 2つのコンピュータで同じ仕事、冗長化
      • コスト高、信頼性高

      デュプレックスシステム

      一つの処理に手システム、予備システムの2つを用意

      クラスタシステム

      複数のホストを連携、故障しても待機しているホストが引き継ぐ

      RAID

      • 複数のハードディスクを1つのディスク(仮想ディスク)とする技術。
      • Redundant Array of Inexpensive Disks
      • アクセス性の向上
      • 耐障害性の向上

      ストライピング

      • RAID0
      • 複数のハードディスクに分散して保存
      • アクセスの高速化

      ミラーリング

      • RAID1
      • 1台のハードディスクのデータを別のハードディスクに保存。(データの2重化)

      パリティディスク

      • RAID5
      • RAID6
      • パリティ(誤り訂正符号)を常に付加

      稼働率

      MTBF

      • Mean Time Between Fairures
      • 何時間に一回故障するか

      MTTR

      何時間で直せるか

      CCNAとは

      CCNA(Cisco Certified Network Associate)」は、世界最大手のネットワーク関連機器メーカーであるシスコシステムズ社が実施する、ネットワークエンジニアの技能を認定する試験です。

      同社の主力商品であるCiscoルータ、Catalystスイッチに関する技術力の証明となるだけでなく、基礎的なネットワーク技術(TCP/IPなど)を持つことの証明にもなります。

      認定資格の取得は、IT業界でキャリアを築くための第一歩です。ネットワークエンジニアのスタンダードな資格として世界的に知られています。

      CCNAの位置付け

      シスコ技術者認定には6つのグレードがあり、簡単な方から「エントリー」「アソシエイト」「スペシャリスト」「プロフェッショナル」「エキスパート」「アーキテクト」の順です。その中で最もポピュラーなものがアソシエイトレベルに属する「CCNA」です。

      CCNA取得のメリット

      資格を得ることで、客観的な判断基準でネットワークエンジニアとしての基本的スキルが備わっているということが証明できる。

      就職や転職の際に有利になったり、仕事上での新体制が高くなります。

      CCNA試験範囲は、ネットワーク の基礎を系統だって、とても丁寧に網羅しています。固定の業務をこなしていると、どうしても知識が偏ってくる場合があります。自分に足りない知識はないか、また得意な分野はどこなのか、客観的にチェックすることができます。

      試験の概要について

      試験番号200-301 CCNA
      問題数100〜105問程度
      試験時間120分
      受験料33,600円+税
      出題形式CBT(コンピュータ入力)方式
      受験の前提条件なし(ただし年齢制限あり)
      試験日、試験会場ピアソンVUE社のサイトで希望の日時、場所を指定可能

      出題範囲

      1.ネットワークの基礎(20%)

      ネットワーク機器、ネットワークトポロジ、TCP、UDP、ワイヤレスの原理、仮想マシン、スイッチング

      2.ネットワークアクセス(20%)

      3.IPコネクティビティー(25%)

      4.IPサービス(10%)

      5.セキュリティーの基礎(15%)

      6.自動化とプログラマビリティ(10%)

      CBT方式

      試験会場で自宅を選べるらしいですが、もしネットワーク環境の関係等で動作がうまくいかない場合があるので、不安であれば自宅以外がいいかも知れません。

      日時も自由に予約可能です。モチベーションを高めるために、あらかじめ何ヶ月前に予約するのもありです。

      【試験の流れ】 pcログイン(試験監実施) →注意事項確認 →チュートリアル(15分以内) →本番解答(100問/120分) →アンケート →終わり。

      おすすめ学習法

      参考書としておすすめは「1週間でCCNAの基礎が学べる本」です。

      公式に過去問を出していません。問題を解く上でお勧めがPing-tCCNAイージスです。

      料金高いですがCramMediaもあります。

      Ping-t

      無料で半分、有料(2,400円/月)で全部が利用可能で、過去の回答結果も分析できます。

      CCNAイージス

      量が多いです。

      補足情報

      • 合格は試験終了後にすぐ確認できる。
      • 合格一週間後に登録したアドレスにメールが届き、届いたメールから電子の合格証明書のPDFがダウンロードができる。
      • 紙の証明書は2ヶ月かかる。

      試験後の感想

      • 問題を後で振り返ることができないため、いかに問題と解答を素早く理解できるかが「カギ」だと思います。
      • Ping-tの模擬試験で8〜9割でうけました。
      • ルーティングテーブルを読み解く問題が多かった気がします。
      • WLCのGUI設定問題も3、4問出てきました。
      • 自分が暗記が苦手なのもありますが、割と悩むものが多かったです。暗記は問題演習と別で時間を割いてしたらよかったと思いました。
      • 問題をあとから見直しができないのは、知っていいたが、不安になりました。
      • 時間は7分ほど余りましたが、前半必要以上に考えたりしていて、後半焦って割り切りスピード重視でしました 。(後から見直しができないこともあり)
      【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サーバポート67DHCPクライアントポート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電話、使用するポートはアプリケーションが定める

      ICMP

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

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

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

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

      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参照モデルとは、コンピュータネットワークに求められる機能(通信機能)を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アドレスはコンピュータのNIC(network interface card:LANケーブルを挿す穴がくっついている、パソコンに合体させる部品のこと)やネットワーク機器の各ポートに対して製造時に割り当てられます。

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

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

      MACアドレスの構成

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

      特別なMACアドレス

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

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

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

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

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

      イーサネット(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:公開鍵基盤)は公開鍵暗号方式による通信を安全に行うための基盤です。

      構成管理ツール

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

      代表的な構成管理ツール

      • 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の間は:
      • データの区切りは,
      • オブジェクトは{}で囲む(順番関係ないデータ)
      • 配列は[]で囲む(順番関係あるデータ)
      • キーは「”(ダブルクオーテーション)」で囲む
      • 値が数値の場合はそのまま記述し、値が文字列の場合は「”(ダブルクオーテーション)」で囲む

      Service Worker を使用してプッシュ通知の実装

      Service Worker とは

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

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

      サーバ仮想化

      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インフラストラクチャ層コントロール層サービス抽象化層)の間のインターフェイス。

      OpenFlowOpFlex、telnet、SSH、SNMP、NETCONFRESTCONF

      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/SNMPNETCONF/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機能の1つであり、ネットワークインフラのサービスレベル性能をモニターする方法です。

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

      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時間程度かかる場合があります。