# MIXEDER For Developersへようこそ！

{% hint style="info" %}
MixederCloud SAを利用している方は、サポートセンターからお問い合わせを行うことでサービスを上手く活用した導入方法や価格の相談を行うことができます。
{% endhint %}

## 概要

**利用する上での注意点**

> MIXEDERでは一部の文章をAIに生成したものを人間の目によって確認した後、公開している記事、文章があります。
>
> こちらの文章では、誤った内容や誤解を生む内容が含まれている場合がりますのでご注意ください。
>
> もしもこのような文章を見つけた場合は、サポートセンターまでお知らせください。

> ドキュメント内で公開されているコードは自由に自社のサービスに利用することができます。
>
> コードを利用して、コンピューターで損害が発生した場合でも、MIXEDERでは一切の責任を負いません。ご注意ください。

## API

{% content-ref url="/pages/lVP5UFJOpF6kXlbR99YO" %}
[GrapeAPI](/grapeapi/grapesapinitsuite)
{% endcontent-ref %}

{% content-ref url="/pages/H9VXgKUVHFBZ4ZCVxsKt" %}
[MixederPublicAPIs](/mixederpublicapis/mixederapi)
{% endcontent-ref %}


# まずはここから！

WEBやネットの知識をよく理解していない、もっと知りたい方はStart From Beginnerを利用することをお勧めします。

## Start From Beginnerとは？

初心者向けに特化したWEBエンジニアリングの学習ドキュメント「StartFrom Beginner きょうからWEBエンジニア」は、プログラミングの経験がゼロの方でも安心して学べる内容になっています。

このドキュメントでは、WEB開発に必要な基本知識をわかりやすく丁寧に解説。HTMLやCSS、JavaScriptなどの基礎的な技術から、実際にWEBアプリケーションを作成するステップまでを順を追って学べます。


# GrapesAPIについて

GrapesAPIはGrapeToolsによって公開されている無料APIプラットフォームです。

様々なAPIを無料で公開しているので低コストで高品質なサービスをユーザーに提供する事が可能になります。

利用する際はGrapesAPIs利用規約をご確認の上ご利用ください。


# GrapesAPIs 利用規約

## Grape API 利用規約

最終更新日: 2024年10月19日

本利用規約（以下「本規約」）は、Grape API（以下「本API」）を利用するすべてのユーザーに適用されます。本APIを利用することで、ユーザーは本規約に同意したものとみなされます。

本サービスはMIXEDERのサービスであり、ご利用にはMIXEDERの[利用規約](https://help.mixeder.net/?page=tos)が適用されます。

***

### 1. **サービス内容**

* Grape APIは、以下の各APIを提供します：
  * **GrapeQRAPI**：QRコードの生成
  * **GrapeFaviconAPI**：指定したドメインからのファビコン取得
  * **GrapeAvatarAPI**：ファイルのアップロードおよび削除
  * **ファイルアップロードAPI**：画像のアップロードと期限設定

これらのサービスは予告なく変更または追加、廃止される可能性があります。

***

### 2. **利用条件**

1. **APIキーの使用**
   * 一部のAPIには、APIキーが必要です。APIキーは指定された利用者にのみ提供され、他者と共有することは禁止されています。
   * 不正利用が発覚した場合、APIキーは無効化される可能性があります。
2. **リクエスト制限**
   * 各APIには、IPアドレスごとに1日あたり100リクエストの制限が適用されます（GET・POSTリクエストを含む）。失敗したリクエストもカウントされます。
   * 過度のリクエストやシステムへの負荷をかける行為は禁じられます。
3. **データの有効期限**
   * アップロードされたファイルは指定された有効期限が過ぎると自動的に削除されます。期限後のファイルに関する保証は行いません。
   * **例**：ファイルアップロードAPIで「expiration=3600」と指定した場合、1時間後にファイルは削除されます。

***

### 3. **禁止事項**

以下の行為を禁止します：

* **不正アクセス**：システムの脆弱性を攻撃する行為
* **APIの不正利用**：APIキーの共有や偽装したリクエストの送信
* **違法行為**：著作権侵害や他者の権利を侵害する行為
* **サービスの妨害**：大量のリクエスト送信やDDOS攻撃

***

### 4. **免責事項**

* サービス提供者は、システムメンテナンスや障害によってAPIが一時的に使用できなくなった場合の損害について一切の責任を負いません。
* 本APIを利用したことで発生したいかなる損害についても、サービス提供者は責任を負いません。
* 提供されるQRコードやファビコンの使用について、第三者の権利侵害がないことを保証しません。

***

### 5. **サポートとお問い合わせ**

APIの利用に関する質問やAPIキーの取得は、以下のメールアドレスからお問い合わせください：

```
support@mixeder.net
```

***

### 6. **利用停止と制限**

* 本規約に違反した場合、APIの利用停止や制限を行うことがあります。
* システムの運営に支障が生じると判断した場合、事前通知なしにサービスを停止する場合があります。

***

### 7. **プライバシーポリシー**

* IPアドレスやリクエスト情報などの個人情報は、本APIの運営および改善のために収集されます。詳細は[プライバシーポリシー](https://help.mixeder.net/?page=privacy)をご確認ください。

***

### 8. **規約の変更**

* 本規約は予告なく変更される場合があります。変更後の利用規約は、本ページに掲載された時点で効力を有します。利用者は、最新の規約を定期的に確認する責任を負います。

***

### 9. **準拠法および管轄**

* 本規約の解釈および適用には、日本国法が適用されます。
* 本APIに関連して生じた紛争については、東京地方裁判所を第一審の専属的合意管轄裁判所とします。

***

**以上**\
本利用規約に同意の上、Grape APIをご利用ください。


# GrapesDrive セキュリティホワイトペーパー

## ホワイトペーパー: GrapesDrive セキュリティとプライバシー保護の設計思想

### 1. はじめに

GrapesDriveは、ユーザーの皆様の重要なデータを安全に保管し、プライバシーを最大限に保護することを最優先事項として設計されたクラウドストレージ基盤です。本ドキュメントでは、データのアップロードから保管、共有に至るまで、GrapesDriveがどのようなセキュリティ技術を用いて皆様のデータを守っているのかを解説します。

### 2. 強固な暗号化システム (Encryption Architecture)

GrapesDriveに保存されるすべてのファイルは、軍事レベルの暗号化標準技術を用いて保護されます。データはオブジェクトストレージに保存される前に、GrapesDriveのサーバーシステム内で強力に暗号化され、元のデータとして読み取れない状態に変換されます。さらに、オブジェクトストレージに保存する段階でもデータ本体には**AES-256ビット暗号化をもう一度適用しています。**

#### 独自の暗号化仕様

| **項目**       | **詳細仕様**        | **ユーザーにとってのメリット**                                                |
| ------------ | --------------- | ---------------------------------------------------------------- |
| 暗号アルゴリズム     | AES-256-CTR     | 現在のコンピュータ技術では解読不可能な、世界最高水準の暗号化方式です。                              |
| 鍵の独立性        | ユーザーごとの専用マスターキー | 全体で1つの鍵を使い回すのではなく、ユーザーごとに専用の鍵（32バイトランダム生成）を割り当て、データを完全に分離・保護します。 |
| 初期化ベクトル (IV) | ファイルごとのランダム生成   | 同じファイルをアップロードしても毎回異なる暗号データになるため、攻撃者によるパターンの推測を完全に防ぎます。           |

*※本システムは、ユーザー固有の鍵を用いてサーバー側で強力に暗号化を行う「高度なサーバーサイド暗号化」を採用しており、クラウドストレージの基盤側からデータの中身を覗き見られるリスクを排除しています。*

### 3. 安全なファイル転送と分散処理 (Secure Data Transfer)

大容量のファイルを安全かつ確実にクラウドへ保存するため、通信経路と処理プロセスの両面で保護対策を行っています。

* チャンクアップロード技術:

  ユーザーのデバイスからファイルが送信される際、データはブラウザ上で自動的に細かなブロック（10MBのチャンク）に分割されて転送されます。これにより、ネットワークが不安定な環境でもデータの破損を防ぎ、サーバーのメモリを圧迫することなく安全に暗号化処理へと引き継がれます。
* 一時データの確実な破棄:

  アップロード時に使用された一時ファイル（チャンクデータ）は、暗号化とクラウドストレージへの保存が完了した直後に、サーバー上から完全に自動削除（強制削除処理）されます。

### 4. 厳格なアクセス制御と安全な共有 (Access Control & Sharing)

ユーザーのワークスペースは外部から完全に遮断されており、認証された本人のみがアクセスできます。

* OAuth連携による安全な認証:

  GrapesDriveは独自にパスワードを管理せず、安全な独自認証システム（MIXEDERアカウント）を経由したOAuth認証を採用しています。これにより、パスワード漏洩のリスクを最小限に抑えています。
* 排他制御（スペースロック）の導入:

  フォルダの作成やファイルの削除など、データを操作する際は「スペースロック（排他制御）」という技術が働きます。これにより、複数の操作が同時に行われた場合でも、データが矛盾したり破損したりすることを防ぎます。
* 時限式のセキュア共有リンク:

  第三者にファイルを共有したい場合、推測不可能なランダム文字列（12バイトの暗号論的疑似乱数）を用いた専用リンクを発行できます。このリンクには7日間の有効期限が自動的に設定されており、期限切れ後はシステムがアクセスを完全に遮断するため、永続的なデータ流出の心配がありません。

### 5. クライアント（ブラウザ）側の安全性 (Client-side Security)

GrapesDriveは、ユーザーが操作する画面（フロントエンド）においても、安全性と快適性を両立する設計を行っています。

* ローカルキャッシュによる通信リスクの低減:

  一度読み込んだプレビュー用のデータやサムネイル画像は、ブラウザ内の安全なローカルデータベース（`IndexedDB`）にキャッシュされます。これにより、サーバーとの不要な通信回数を減らし、データがネットワーク上を行き来するリスクを抑止しています。
* 安全なファイルプレビュー:

  PDFやコードファイルなどをブラウザ上でプレビューする際、悪意のあるスクリプトが実行されないよう、サンドボックス化された環境（例：Monaco Editorの読み取り専用モードや外部通信を制限したiframe）で展開します。ユーザーはファイルをダウンロードしてウイルス感染の危険に晒されることなく、安全に内容を確認できます。
* リソース制限（クォータ制限）:

  ストレージ容量（50GB）や帯域幅（100GB）の制限をシステム側で厳密に管理することで、一部のユーザーによる異常なトラフィック（DDoS攻撃やリソース枯渇攻撃など）からシステム全体を保護し、すべてのユーザーに安定したサービスを提供します。

### 6. おわりに

GrapesDriveは、使いやすさを犠牲にすることなく、裏側で高度なセキュリティ技術が自動的に機能するシステムを目指して開発されました。今後も最新のセキュリティ標準に準拠し、ユーザーの大切な資産を守り続けます。


# APIリファレンス

個人(大量のファイルのアップロード)などでAPIを利用したい方はGrapesAPIをご利用ください。

それ以外のサービスは開発者向けのサービスになります。自分のアプリやサービスにAPIを導入したい場合などにご利用ください。

全てのサービスは基本無料でご利用いただけますが、GrapeAvaterAPIは利用にはAPIキーが必要となります。APIキーをリクエストする場合はサポートセンターまでお問い合わせください(一部有料)


# GrapeQRAPI リファレンス

#### QRコード生成API

このAPIを使用すると、指定したURLに基づいてQRコードを生成できます。以下のフォーマットでリクエストを送信してください：

```
https://grape.mixeder.net/qrapi/output.png?url=YOUR_URL
```

例えば、次のようにリクエストを送信することで、QRコードを生成できます：

```
https://grape.mixeder.net/qrapi/output.png?url=https://mxsl.net/YF3vm580w
```

このリクエストを実行すると、指定したURLに基づくQRコード画像が生成されます。

***

### サンプルコード

#### **Curl**

```bash
curl -o qr_code.png "https://grape.mixeder.net/qrapi/output.png?url=https://mxsl.net/YF3vm580w"
```

***

#### **Node.js**

```javascript
const https = require('https');
const fs = require('fs');

const url = 'https://grape.mixeder.net/qrapi/output.png?url=https://mxsl.net/YF3vm580w';
const file = fs.createWriteStream('qr_code.png');

https.get(url, (response) => {
  response.pipe(file);
  file.on('finish', () => {
    console.log('QRコードが生成されました: qr_code.png');
  });
}).on('error', (err) => {
  console.error('エラー:', err);
});
```

***

#### **Python**

```python
import requests

url = "https://grape.mixeder.net/qrapi/output.png?url=https://mxsl.net/YF3vm580w"
response = requests.get(url)

if response.status_code == 200:
    with open("qr_code.png", "wb") as f:
        f.write(response.content)
    print("QRコードが生成されました: qr_code.png")
else:
    print("エラー:", response.status_code)
```

***

これらのコードを使用することで、指定したURLのQRコードを簡単に生成・取得できます。


# GrapeFaviconAPI リファレンス

GrapeFaviconAPI リファレンス

#### 任意のドメインから簡単にファビコンを取得

***

### API概要

`GrapeFaviconAPI` を使用すると、指定されたドメインのファビコンをURL形式、または画像ファイルとして取得できます。

***

### エンドポイント

| **メソッド** | **エンドポイント**           | **説明**                  |
| -------- | --------------------- | ----------------------- |
| GET      | `/api-fav/output.png` | 指定されたドメインからファビコンを取得します。 |

***

### リクエストパラメータ

| **パラメータ** | **型**  | **必須** | **説明**                             |
| --------- | ------ | ------ | ---------------------------------- |
| `domain`  | string | Yes    | ファビコンを取得する対象のドメイン (例: example.com) |
| `type`    | string | No     | `'image'` を指定すると、ファビコン画像が直接返されます。  |

***

### レスポンス例

```json
{
  "icons": [
    "http://example.com/favicon.ico",
    "http://example.com/apple-touch-icon.png"
  ]
}
```

***

### 使用例

#### **Python**

```python
import requests

response = requests.get('https://grape.mixeder.net/api-fav/output.png', params={'domain': 'example.com'})
print(response.json())
```

***

#### **PHP**

```php
<?php
$response = file_get_contents('https://grape.mixeder.net/api-fav/output.png?domain=example.com');
print_r(json_decode($response, true));
?>
```

***

#### **cURL**

```bash
curl -X GET "https://grape.mixeder.net/api-fav/output.png?domain=example.com"
```

***

#### **Node.js**

```javascript
const https = require('https');

https.get('https://grape.mixeder.net/api-fav/output.png?domain=example.com', (res) => {
  let data = '';
  res.on('data', (chunk) => {
    data += chunk;
  });

  res.on('end', () => {
    console.log(JSON.parse(data));
  });
}).on('error', (err) => {
  console.error('エラー:', err);
});
```

***

#### **Go**

```go
package main

import (
    "encoding/json"
    "fmt"
    "io/ioutil"
    "log"
    "net/http"
)

func main() {
    resp, err := http.Get("https://grape.mixeder.net/api-fav/output.png?domain=example.com")
    if err != nil {
        log.Fatalln(err)
    }
    defer resp.Body.Close()

    body, err := ioutil.ReadAll(resp.Body)
    if err != nil {
        log.Fatalln(err)
    }

    var result map[string]interface{}
    if err := json.Unmarshal(body, &result); err != nil {
        log.Fatalln(err)
    }

    fmt.Println(result)
}
```

***

#### **Ruby**

```ruby
require 'net/http'
require 'json'

uri = URI('https://grape.mixeder.net/api-fav/output.png?domain=example.com')
response = Net::HTTP.get(uri)

data = JSON.parse(response)
puts data
```

***

これらのコードを使用することで、指定されたドメインのファビコンを簡単に取得できます。\
ファビコンを画像として取得する場合は、`type=image` をリクエストに追加してください。


# GrapeAvaterAPI リファレンス

## GrapeAvatarAPI リファレンス

### API説明と利用例

`GrapeAvatarAPI` を使用すると、APIキーを利用してファイルの**アップロード**および**削除**が可能です。\
このAPIは、ユーザーからの大量アップロードを効率的に処理し、サーバーの容量やトラフィックの増大を気にすることなくファイル管理機能を提供します。

***

### 1. APIキーの取得

APIキーとフォルダー名を取得するには、メールでのお問い合わせが必要です。取得したAPIキーを使ってファイルのアップロードと削除を実行できます。

メール:<apply@grape.mixeder.net>

***

### 2. ファイルアップロード

#### **エンドポイント**

`POST` `https://grapes-avatarapi.mixeder.net/upload`

#### **使用例**

**cURL**

```bash
curl -X POST https://grapes-avatarapi.mixeder.net/upload \
     -F "file=@/path/to/yourfile.png" \
     -F "apiKey=your_api_key"
```

**Python**

```python
import requests

url = "https://grapes-avatarapi.mixeder.net/upload"
files = {"file": open("/path/to/yourfile.png", "rb")}
data = {"apiKey": "your_api_key"}

response = requests.post(url, files=files, data=data)
print(response.json())
```

**PHP**

```php
<?php
$ch = curl_init("https://grapes-avatarapi.mixeder.net/upload");
$file = new CURLFile('/path/to/yourfile.png');
$data = ["file" => $file, "apiKey" => "your_api_key"];

curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($ch);
curl_close($ch);
echo $response;
?>
```

**Node.js**

```javascript
const axios = require('axios');
const FormData = require('form-data');
const fs = require('fs');

const form = new FormData();
form.append('file', fs.createReadStream('/path/to/yourfile.png'));
form.append('apiKey', 'your_api_key');

axios.post('https://grapes-avatarapi.mixeder.net/upload', form, { headers: form.getHeaders() })
  .then(response => { console.log(response.data); })
  .catch(error => { console.error(error); });
```

**Go**

```go
package main

import (
    "fmt"
    "log"
    "mime/multipart"
    "net/http"
    "os"
)

func main() {
    file, err := os.Open("/path/to/yourfile.png")
    if err != nil {
        log.Fatal(err)
    }
    defer file.Close()

    body := &multipart.Writer{}
    req, err := http.NewRequest("POST", "https://grapes-avatarapi.mixeder.net/upload", body)
    req.Header.Set("Content-Type", body.FormDataContentType())

    resp, err := http.DefaultClient.Do(req)
    if err != nil {
        log.Fatal(err)
    }
    defer resp.Body.Close()

    fmt.Println("アップロード結果:", resp.Status)
}
```

アップロード後、ファイルは次のURLからアクセスできます：

```
https://grapes-avatarapi.mixeder.net/フォルダ名/ファイル名
```

例：

```json
{
  "message": "ファイルが正常に保存されました。",
  "fileName": "68fea2b2d25d1100.png"
}
```

***

### 3. ファイル削除

#### **エンドポイント**

`DELETE` `https://grapes-avatarapi.mixeder.net/delete`

#### **使用例**

**cURL**

```bash
curl -X DELETE https://grapes-avatarapi.mixeder.net/delete \
     -H "Content-Type: application/json" \
     -d '{"apiKey": "your_api_key", "fileName": "uploaded_file_name.png"}'
```

**Python**

```python
import requests

url = "https://grapes-avatarapi.mixeder.net/delete"
payload = {"apiKey": "your_api_key", "fileName": "uploaded_file_name.png"}

response = requests.delete(url, json=payload)
print(response.json())
```

**PHP**

```php
<?php
$ch = curl_init("https://grapes-avatarapi.mixeder.net/delete");
$data = json_encode(["apiKey" => "your_api_key", "fileName" => "uploaded_file_name.png"]);

curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "DELETE");
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($ch);
curl_close($ch);
echo $response;
?>
```

**Node.js**

```javascript
const axios = require('axios');

const deleteData = { apiKey: "your_api_key", fileName: "uploaded_file_name.png" };

axios.delete('https://grapes-avatarapi.mixeder.net/delete', { data: deleteData })
  .then(response => { console.log(response.data); })
  .catch(error => { console.error(error); });
```

**Ruby**

```ruby
require 'net/http'
require 'json'

uri = URI('https://grapes-avatarapi.mixeder.net/delete')
http = Net::HTTP.new(uri.host, uri.port)
http.use_ssl = true

request = Net::HTTP::Delete.new(uri.path, { 'Content-Type' => 'application/json' })
request.body = { apiKey: "your_api_key", fileName: "uploaded_file_name.png" }.to_json

response = http.request(request)
puts response.body
```

***

これらのコードを使用することで、ファイルの**アップロード**および**削除**が簡単に実行できます。APIキーを適切に管理し、安全なファイル操作を行いましょう。


# GrapesAPI サンプルコード

以下の手順で、GrapesAvatorAPIを利用し、PHPでのファイルアップロードアプリを作成し、APIキーをバックエンドで管理しつつ、ユーザーに説明付きで出力を表示します。

#### 1. フロントエンド (HTMLフォーム)

この部分はシンプルなファイルアップロードフォームで、APIキーの入力は不要です。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ファイルアップロード</title>
</head>
<body>
    <h1>ファイルをアップロード</h1>
    <form action="upload.php" method="POST" enctype="multipart/form-data">
        <label for="file">アップロードするファイルを選択してください:</label>
        <input type="file" name="file" id="file" required><br><br>
        <button type="submit">アップロード</button>
    </form>
</body>
</html>
```

#### 2. バックエンド (PHPでファイルアップロード)

`upload.php`で、APIキーをバックエンド側に保存し、ファイルをアップロードした後に結果を説明付きで出力します。アップロードされたファイルのURLも出力します。

```php
<?php
// APIキーをサーバーサイドに保存（例：configファイルに保存、またはデータベース管理）
$apiKey = "your_api_key"; // APIキーをハードコードするか、安全な場所に保存

// ファイルが正しくアップロードされたか確認
if ($_FILES['file']['error'] !== UPLOAD_ERR_OK) {
    echo "<p>ファイルのアップロードに失敗しました。エラーコード: " . $_FILES['file']['error'] . "</p>";
    exit;
}

// アップロードされたファイルを処理
$file = new CURLFile($_FILES['file']['tmp_name'], $_FILES['file']['type'], $_FILES['file']['name']);

// cURLを使用してAPIにリクエストを送信
$ch = curl_init('https://grapes-avatarapi.mixeder.net/upload');
$data = [
    'file' => $file,
    'apiKey' => $apiKey
];

// cURLオプションを設定
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

// リクエストを実行してレスポンスを取得
$response = curl_exec($ch);

// cURLセッションを閉じる
curl_close($ch);

// レスポンスをJSON形式でデコード
$result = json_decode($response, true);

// アップロード成功メッセージとファイルURLを出力
if (isset($result['fileName'])) {
    $folderName = "フォルダ名"; // 実際のフォルダ名に変更
    $fileName = $result['fileName'];
    $fileUrl = "https://grapes-avatarapi.mixeder.net/{$folderName}/{$fileName}";
    
    echo "<h2>アップロード結果</h2>";
    echo "<p>ファイルが正常にアップロードされました。以下のURLからファイルにアクセスできます。</p>";
    echo "<p><strong>アップロードされたファイルのURL:</strong> <a href='{$fileUrl}'>{$fileUrl}</a></p>";
    echo "<p>ファイル名: {$fileName}</p>";
} else {
    echo "<p>アップロードに失敗しました。レスポンス:</p>";
    echo "<pre>{$response}</pre>";
}
?>
```

#### 3. 説明付き出力

アップロードが成功した場合、以下のように説明とURLが表示されます：

```
アップロード結果
ファイルが正常にアップロードされました。以下のURLからファイルにアクセスできます。
アップロードされたファイルのURL: https://grapes-avatarapi.mixeder.net/フォルダ名/68fea2b2d25d1100.png
ファイル名: 68fea2b2d25d1100.png
```

#### 4. セキュリティ対策

* **APIキーの保護**: APIキーはサーバー側でハードコードするか、設定ファイルや環境変数で管理して、外部に漏れないようにします。
* **ファイルバリデーション**: 不正なファイルやウイルスのアップロードを防ぐために、ファイル形式やサイズのチェックを行う必要があります。

これで、PHPを使ってAPIキーを安全に管理しつつ、ファイルアップロードを行い、説明付きで結果を表示するアプリケーションが完成します。


# GrapesAPI(個人向け) リファレンス

## ファイルアップロードAPIドキュメント

#### 利用用途とユースケース

このファイルアップロードAPIは、画像を一時的に保存し、有効期間が経過した後に自動的に削除することで、効率的かつ安全なファイル共有や画像ホスティングが可能です。以下は、このAPIの具体的な利用用途とユースケースの例です。

***

#### 利用用途

1. **一時的な画像共有**
   * チャットアプリやメッセージングサービスで、ユーザーが一定期間だけ画像を共有できるようにする場合に便利です。
2. **画像添付付きのフィードバックフォーム**
   * フォームやサポートリクエストで、スクリーンショットや画像を一時的に添付し、処理が完了した後に削除することで、プライバシーを保護します。
3. **期間限定のマーケティングコンテンツ**
   * 広告やマーケティングキャンペーンで、期間限定の画像コンテンツを提供し、有効期限が過ぎると自動的に削除されることで管理が簡単になります。
4. **セキュリティ重視の画像ホスティング**
   * 特定の時間だけアクセス可能な画像をホスティングすることで、データの流出や不要な保存を防ぎます。
5. **テンポラリファイルの管理**
   * ウェブアプリケーションで一時的な画像データを処理し、有効期限が過ぎればサーバーから自動的に削除するための解決策として使用できます。

***

#### ユースケース

1. **SNSやコミュニティサイトでの投稿画像**
   * 投稿が一定期間のみ有効な場合に、このAPIを利用して画像をアップロードし、有効期間後に自動削除します。
2. **オンラインチケット販売プラットフォーム**
   * イベント用の画像やポスターが有効期間中だけ表示されるように管理できます。イベント終了後、画像は自動的に削除されます。
3. **プライバシー重視の取引プラットフォーム**
   * 商品画像を一時的にアップロードし、一定時間後に削除することで、ユーザーのデータ保護に配慮できます。
4. **教育用プラットフォーム**
   * 生徒が課題に関連する画像を提出する際、期間限定で有効にして、一定時間後に画像を削除することで、ストレージの効率的な管理ができます。
5. **カスタマーサポートのスクリーンショット提出**
   * サポートのためにスクリーンショットを一時的に共有する場合に使用し、問題解決後は自動削除でセキュリティを保護します。

{% hint style="info" %}
**ビジネスでのご利用をご検討の場合はお問い合わせください。**

**個人的なサービスの開発の場合やビジネスでの開発段階には申請は必要ありませんが、本番環境でご利用の場合はGrapesAvaterAPIをご利用ください。**
{% endhint %}

***

### **エンドポイント**

ファイルをアップロードするためのエンドポイント:

```
POST https://grape.mixeder.net/api
```

***

### **リクエスト**

ファイルアップロードは以下の形式で送信します。

#### **リクエストヘッダー**

```
Content-Type: multipart/form-data
```

#### **リクエストボディ**

* **file**: アップロードする画像ファイル
* **expiration**: 画像の有効時間（秒）例: `expiration=3600`（1時間）

***

### **レスポンス**

#### **成功時のレスポンス例**

```json
{
  "url": "https://grape.mixeder.net/files/API67d6d2d3-0819-4ff7-b150-6033f55442d1/example.mp4",
  "hosturl": "https://grape.mixeder.net/dist/API67d6d2d3-0819-4ff7-b150-6033f55442d1/example.mp4"
}
```

#### **エラー時のレスポンス例**

```json
{
    "error": "エラーメッセージ"
}
```

***

### **コード例**

#### **cURL**

```bash
curl -X POST https://grape.mixeder.net/api \
    -F 'file=@path_to_your_image.jpg' \
    -F 'expiration=3600'
```

***

#### **Python**

```python
import requests

url = 'https://grape.mixeder.net/api'
files = {'file': open('path_to_your_image.jpg', 'rb')}
data = {'expiration': '3600'}

response = requests.post(url, files=files, data=data)
print(response.json())
```

***

#### **JavaScript (jQuery)**

```javascript
var formData = new FormData();
formData.append('file', file);
formData.append('expiration', 3600);

$.ajax({
    url: 'https://grape.mixeder.net/api',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
        console.log(response);
    },
    error: function(xhr, status, error) {
        console.error(error);
    }
});
```

***

#### **PHP**

```php
<?php
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, 'https://grape.mixeder.net/api');
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, array(
    'file' => new CURLFile('path_to_your_image.jpg'),
    'expiration' => '3600'
));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($ch);
curl_close($ch);

echo $response;
?>
```

***

#### **Node.js**

```javascript
const axios = require('axios');
const FormData = require('form-data');
const fs = require('fs');

const form = new FormData();
form.append('file', fs.createReadStream('path_to_your_image.jpg'));
form.append('expiration', '3600');

axios.post('https://grape.mixeder.net/api', form, {
    headers: form.getHeaders()
})
.then(response => console.log(response.data))
.catch(error => console.error(error));
```

***

#### **Go**

```go
package main

import (
    "fmt"
    "log"
    "mime/multipart"
    "net/http"
    "os"
)

func main() {
    file, err := os.Open("path_to_your_image.jpg")
    if err != nil {
        log.Fatal(err)
    }
    defer file.Close()

    body := &multipart.Writer{}
    req, err := http.NewRequest("POST", "https://grape.mixeder.net/api", body)
    req.Header.Set("Content-Type", body.FormDataContentType())

    resp, err := http.DefaultClient.Do(req)
    if err != nil {
        log.Fatal(err)
    }
    defer resp.Body.Close()

    fmt.Println("アップロード結果:", resp.Status)
}
```

***

### **注意事項**

* **有効期限**: アップロードされた画像は、指定された有効時間が経過すると自動的に削除されます。
* **リクエスト制限**: IPアドレスごとに1日あたり100リクエストが許可されます（GET, POST両方に適用。失敗したリクエストもカウントされます）。
* **IP確認**: 利用中のIPアドレスは次のURLから確認できます：

  ```
  https://grape.mixeder.net/ip
  ```


# Conversion APIとは？

Conversion APIは様々な形式のメディアをAPI一つで完結することができるメディア変換APIプラットフォームです。

変換の際に利用したデータは処理が完了すると即座に削除されるため、セキュリティーやプライバシーの面でも安全に利用することができ、様々なビジネスの業種で活用することができます。

MixederPublicAPIのAPIキーを保有している方なら誰でも簡単に利用することができます。

料金はすべて定額で1000変換で100円となっております。


# APIドキュメント


# SVG Via PNG API

#### **PNGtoSVG API ドキュメント**

PNGtoSVG API は、PNG形式の画像をSVG形式に変換するための便利なツールです。このAPIは、ウェブやアプリケーションでSVG画像を必要とするデザイナー、開発者、マーケティングチーム向けに設計されています。

***

SVG形式はスケーラブルで、解像度に依存しないため、ウェブサイト、グラフィックツール、モバイルアプリで広く利用されています。本APIを使用することで、以下のようなメリットを得られます。

* **画像最適化**: PNGをベクター形式に変換することで、画像の解像度を問わず高品質な表示を実現。
* **開発効率化**: 手動での変換作業を自動化し、開発効率を向上。
* **デザイン管理**: SVGは編集が容易で、アイコンやロゴの管理に適しています。

***

#### **料金体系**

* **1000アクセスごとに 100円**\
  大量の画像変換が必要なプロジェクトに最適な価格設定です。
* 一度に複数の画像を選択しても料金は変わりませんが、処理に時間がかかったり失敗する場合があります。また、一度にアップロードできるファイルサイズは100MBまでです。

***

#### **エンドポイント**

```
https://events-front.mixeder.net/v2/convertion/pngtosvg/
```

***

#### **利用方法**

**HTTPメソッド**

`POST`

**リクエストヘッダー**

| ヘッダー名     | 説明         | 必須 |
| --------- | ---------- | -- |
| `api-key` | ユーザーのAPIキー | はい |

**リクエストボディ**

以下の形式でPNG画像ファイルを送信してください。

| パラメーター名 | タイプ      | 説明                | 必須 |
| ------- | -------- | ----------------- | -- |
| `files` | `file[]` | PNG形式の画像ファイル（複数可） | はい |

**レスポンス例**

**成功時**

```json
[
  {
    "success": true,
    "fileName": "example.png",
    "svg": "<svg>...</svg>"
  }
]
```

| フィールド名     | タイプ       | 説明                  |
| ---------- | --------- | ------------------- |
| `success`  | `boolean` | 変換成功のステータス          |
| `fileName` | `string`  | アップロードされたファイル名      |
| `svg`      | `string`  | SVG形式に変換されたデータ（文字列） |

**失敗時**

```json
[
  {
    "error": "PNGからSVGへの変換に失敗しました。"
  }
]
```

| フィールド名  | タイプ      | 説明       |
| ------- | -------- | -------- |
| `error` | `string` | エラーメッセージ |

***

#### **活用事例**

1. **ウェブアイコンの自動生成**\
   PNG形式で提供されたアイコンをSVG形式に変換し、ウェブサイトやアプリでの軽量化を実現。
2. **ロゴの再利用**\
   解像度に依存しないSVG形式で企業ロゴを保存し、様々なデバイスや解像度で利用可能に。
3. **デザインツールの統合**\
   グラフィックツールで利用するために、PNG画像をベクター形式に変換。

***

#### **サンプルコード**

以下は、さまざまなプログラミング言語での利用例です。

**Python**

```python
import requests

url = "https://events-front.mixeder.net/v2/convertion/pngtosvg/"
headers = {
    "api-key": "your_api_key"
}
files = {
    "files": open("example.png", "rb")
}

response = requests.post(url, headers=headers, files=files)
print(response.json())
```

**PHP**

```php
$apiUrl = "https://events-front.mixeder.net/v2/convertion/pngtosvg/";
$apiKey = "your_api_key";

$file = new CURLFile('example.png', 'image/png', 'example.png');
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $apiUrl);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    "api-key: $apiKey"
]);
curl_setopt($ch, CURLOPT_POSTFIELDS, [
    'files' => $file
]);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($ch);
curl_close($ch);

echo $response;
```

**Node.js**

```javascript
const axios = require('axios');
const FormData = require('form-data');
const fs = require('fs');

const url = "https://events-front.mixeder.net/v2/convertion/pngtosvg/";
const apiKey = "your_api_key";

const formData = new FormData();
formData.append("files", fs.createReadStream("example.png"));

axios.post(url, formData, {
    headers: {
        ...formData.getHeaders(),
        "api-key": apiKey
    }
}).then(response => {
    console.log(response.data);
}).catch(error => {
    console.error(error);
});
```

**cURL**

```bash
curl -X POST \
  -H "api-key: your_api_key" \
  -F "files=@example.png" \
  https://events-front.mixeder.net/v2/convertion/pngtosvg/
```

***

#### **注意事項**

1. **APIキーの管理**: APIキーは他人と共有せず、安全に管理してください。
2. **ファイルサイズ制限**: アップロードするPNGファイルのサイズが制限を超えないよう注意してください。
3. **サポートされる形式**: 現在、PNG形式のみサポートしています。

***


# PNG Via HEIC API

HEICtoPNG APIは、HEIC形式の画像をPNG形式に変換するためのAPIです。iOSやmacOSデバイスで利用されるHEIC形式の画像を、より一般的なPNG形式に変換することで、ウェブやアプリケーションでの互換性を向上させます。

***

#### **概要**

このAPIは、高品質な画像変換を迅速かつ確実に行うために設計されています。以下の特徴を備えています：

* **互換性向上**: HEIC形式をサポートしないプラットフォームやブラウザでも利用可能に。
* **迅速な変換**: サーバー側で高速に画像変換を処理。
* **自動化対応**: システムやワークフローに組み込んで効率化。

***

#### **料金体系**

* **1000アクセスごとに100円**\
  大量の画像変換が必要なプロジェクトでもコストを抑えて利用可能です。

***

#### **エンドポイント**

```
https://events-front.mixeder.net/v2/convertion/heictopng/
```

***

#### **利用方法**

**HTTPメソッド**

* `POST`

**リクエストヘッダー**

| ヘッダー名     | 説明         | 必須 |
| --------- | ---------- | -- |
| `api-key` | ユーザーのAPIキー | はい |

**リクエストボディ**

| パラメーター名 | タイプ    | 説明            | 必須 |
| ------- | ------ | ------------- | -- |
| `file`  | `file` | HEIC形式の画像ファイル | はい |

**レスポンス例**

**成功時**

```json
{
  "success": true,
  "converted_image": "data:image/png;base64,iVBORw0..."
}
```

| フィールド名            | タイプ       | 説明                  |
| ----------------- | --------- | ------------------- |
| `success`         | `boolean` | 成功ステータス             |
| `converted_image` | `string`  | Base64エンコードされたPNG画像 |

**失敗時**

```json
{
  "error": "Conversion failed"
}
```

| フィールド名  | タイプ      | 説明       |
| ------- | -------- | -------- |
| `error` | `string` | エラーメッセージ |

***

#### **利用の流れ**

1. **APIキーの準備**\
   サービスから発行されたAPIキーを取得し、リクエストヘッダーに設定します。
2. **HEIC画像のアップロード**\
   リクエストボディにHEIC形式の画像ファイルを添付して、エンドポイントにリクエストを送信します。
3. **PNG画像の取得**\
   レスポンスとして返されるBase64エンコードされたPNG画像を取得し、保存または表示に利用します。
4. **利用状況の確認**\
   利用状況はAPIの請求システムで自動的に処理されます。

***

#### **活用事例**

* **写真管理システム**\
  HEIC形式で撮影された写真を自動的にPNGに変換し、Webアプリで表示可能に。
* **クラウドストレージ**\
  HEIC画像をアップロード時に変換して互換性を確保。
* **マルチデバイス対応**\
  モバイル端末で撮影されたHEIC画像を変換し、デスクトップ環境での利用を可能に。

***

#### **注意事項**

1. **APIキーの保護**\
   APIキーは他人と共有しないでください。
2. **ファイルサイズの制限**\
   HEIC画像のサイズが制限を超えないよう注意してください。

***

このAPIを利用することで、効率的な画像変換プロセスを構築し、異なるフォーマット間の互換性を向上させることが可能です。

## サンプルコード

***

#### **1. PHP**

```php
<?php
// APIエンドポイントとAPIキー
$endpoint = 'https://events-front.mixeder.net/v2/convertion/heictopng/';
$apiKey = 'YOUR_API_KEY';

// 送信するファイルパス
$filePath = '/path/to/your/image.heic';

// cURLを使用してAPIにPOSTリクエストを送信
$curl = curl_init();
curl_setopt_array($curl, [
    CURLOPT_URL => $endpoint,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POST => true,
    CURLOPT_HTTPHEADER => [
        "api-key: $apiKey",
        "Content-Type: multipart/form-data"
    ],
    CURLOPT_POSTFIELDS => [
        'file' => new CURLFile($filePath)
    ]
]);

$response = curl_exec($curl);
if (curl_errno($curl)) {
    echo 'cURL Error: ' . curl_error($curl);
    exit;
}
curl_close($curl);

// レスポンスを表示
$data = json_decode($response, true);
if (isset($data['success']) && $data['success'] === true) {
    // PNG画像の保存
    file_put_contents('/path/to/output/image.png', base64_decode($data['converted_image']));
    echo "Image converted successfully.";
} else {
    echo "Error: " . ($data['error'] ?? 'Unknown error');
}
```

***

#### **2. Python**

```python
import requests

# APIエンドポイントとAPIキー
url = "https://events-front.mixeder.net/v2/convertion/heictopng/"
api_key = "YOUR_API_KEY"
file_path = "path/to/your/image.heic"

# ファイルをPOSTリクエストで送信
with open(file_path, "rb") as file:
    headers = {"api-key": api_key}
    files = {"file": file}
    response = requests.post(url, headers=headers, files=files)

# レスポンスを解析
if response.status_code == 200:
    data = response.json()
    if data.get("success"):
        # PNG画像の保存
        with open("output_image.png", "wb") as output:
            output.write(base64.b64decode(data["converted_image"]))
        print("Image converted successfully.")
    else:
        print(f"Error: {data.get('error')}")
else:
    print(f"HTTP Error: {response.status_code}")
```

***

#### **3. Node.js**

```javascript
const axios = require("axios");
const fs = require("fs");
const FormData = require("form-data");

// APIエンドポイントとAPIキー
const url = "https://events-front.mixeder.net/v2/convertion/heictopng/";
const apiKey = "YOUR_API_KEY";

// ファイルを送信
const filePath = "./path/to/your/image.heic";
const formData = new FormData();
formData.append("file", fs.createReadStream(filePath));

axios.post(url, formData, {
    headers: {
        "api-key": apiKey,
        ...formData.getHeaders()
    }
}).then(response => {
    if (response.data.success) {
        // PNG画像を保存
        const buffer = Buffer.from(response.data.converted_image, "base64");
        fs.writeFileSync("./output_image.png", buffer);
        console.log("Image converted successfully.");
    } else {
        console.error("Error:", response.data.error);
    }
}).catch(error => {
    console.error("Error:", error.message);
});
```

***

#### **4. Ruby**

```ruby
require "net/http"
require "uri"
require "json"
require "base64"

# APIエンドポイントとAPIキー
url = URI.parse("https://events-front.mixeder.net/v2/convertion/heictopng/")
api_key = "YOUR_API_KEY"

# ファイルを読み込む
file_path = "path/to/your/image.heic"
file = File.open(file_path, "rb")

# リクエストを送信
request = Net::HTTP::Post.new(url)
request["api-key"] = api_key
form_data = [["file", file]]
request.set_form(form_data, "multipart/form-data")

response = Net::HTTP.start(url.hostname, url.port, use_ssl: true) do |http|
  http.request(request)
end

# レスポンスを解析
if response.code.to_i == 200
  data = JSON.parse(response.body)
  if data["success"]
    File.open("output_image.png", "wb") do |f|
      f.write(Base64.decode64(data["converted_image"]))
    end
    puts "Image converted successfully."
  else
    puts "Error: #{data['error']}"
  end
else
  puts "HTTP Error: #{response.code}"
end
```

***

#### **5. cURL（CLI）**

```bash
curl -X POST \
  -H "api-key: YOUR_API_KEY" \
  -F "file=@/path/to/your/image.heic" \
  https://events-front.mixeder.net/v2/convertion/heictopng/ -o output_image.png
```

***

#### **注意点**

* **APIキーの管理**: APIキーは安全に保管してください。外部に公開されると不正利用のリスクがあります。
* **ファイルサイズ**: ファイルサイズの制限(100MBまで)を確認し、それを超えないようにしてください。
* **エラーハンドリング**: 各サンプルコードにはエラーハンドリングを含めていますが、運用環境に合わせて最適化してください。


# HTML to PDF API

現時点でHTML to PDF APIは開発段階(BETA Version)であり、APIはまだ公開されていません。

{% embed url="<https://htmlviapdf.mixeder.com/>" %}
ブラウザ版のHTML to PDF API
{% endembed %}

ブラウザ版をご利用いただくか、サポートセンターまで[お問い合わせ](https://help.mixeder.net/)いただき、サービスの事前利用申請を行ってください。


# DomainConnectでの画像変換について

## 画像リアルタイム変換・最適化機能について

当サービス（Domainconnect）では、画像ファイルのURLにパラメータを付与することで、リアルタイムに画像のリサイズ、フォーマット変換、圧縮率の調整を行うことができます。

変換された画像はエッジサーバーでキャッシュされるため、2回目以降のアクセスは高速に配信されます。

料金は無料です。

### 基本的な使い方

画像URLの末尾に `?` をつけ、続けてパラメータを指定します。複数のパラメータを指定する場合は `&` で繋ぎます。

例:

Plaintext

```
https://example.com/images/photo.jpg?w=800&q=80
```

***

### 利用可能なパラメータ一覧

| **パラメータ** | **説明**                                                                | **指定例**     |
| --------- | --------------------------------------------------------------------- | ----------- |
| w         | 画像の幅 (width) をピクセル単位で指定します。                                           | `?w=300`    |
| h         | 画像の高さ (height) をピクセル単位で指定します。                                         | `?h=300`    |
| q         | 画像の品質 (quality) を `1`〜`100` で指定します。数値を下げるとファイルサイズが軽量化されます。（デフォルト: 80） | `?q=60`     |
| fmt       | 画像のフォーマットを変換します。(`jpg`, `png`, `webp` など)                             | `?fmt=webp` |

***

### 詳細仕様

#### 1. リサイズ (`w`, `h`)

画像のサイズを変更します。

* 幅 (`w`) のみ指定した場合:
  * アスペクト比（縦横比）を維持したまま、指定した幅にリサイズされます。
* 高さ (`h`) のみ指定した場合:
  * アスペクト比を維持したまま、指定した高さにリサイズされます。
* 幅 (`w`) と 高さ (`h`) の両方を指定した場合:
  * 「Cover」モードで動作します。指定されたサイズになるように画像を拡大・縮小し、はみ出た部分は自動的にトリミング（中央切り抜き）されます。画像の歪みは発生しません。

#### 2. 画質調整 (`q`)

画像の圧縮率を制御します。Webサイトの表示速度を向上させるために有効です。

* 範囲: `1` (低画質/軽量) 〜 `100` (高画質/重量)
* デフォルト: 指定がない場合は `80` が適用されます。
* 推奨値: 通常のWeb表示であれば `60`〜`80` 程度が推奨されます。

#### 3. フォーマット変換 (`fmt`)

元の画像の形式に関わらず、指定した形式に変換して配信します。次世代フォーマット（WebP）への変換に利用できます。

* 対応フォーマット: `jpg` (または `jpeg`), `png`, `webp`
* 利用シーン: 背景透過が必要な場合は `png` や `webp` を利用してください。写真などのファイルサイズを劇的に減らしたい場合は `webp` が有効です。

***

### 具体的な使用例

**ケース1：サムネイル用に幅を300pxにする**

アスペクト比を維持したまま小さくします。

Plaintext

```
https://example.com/banner.jpg?w=300
```

**ケース2：正方形のアイコンとして切り抜く**

幅と高さを同じ値に指定すると、画像の中央を基準に正方形にトリミングされます。

Plaintext

```
https://example.com/profile.jpg?w=150&h=150
```

**ケース3：WebP形式に変換して軽量化する**

元の画像がJPEGやPNGであっても、WebPとして配信します。

Plaintext

```
https://example.com/photo.png?fmt=webp
```

**ケース4：画質を落として通信量を節約する**

モバイル回線向けなどに、画質を50%に落として配信します。

Plaintext

```
https://example.com/hero-image.jpg?q=50
```

***

### キャッシュとパフォーマンスについて

* キャッシュ:

  一度パラメータ付きでアクセスされた画像は、変換後の状態でサーバーにキャッシュ（保存）されます。同じパラメータでの2回目のアクセスからは、画像処理を行わずキャッシュを返すため、非常に高速に表示されます。
* オリジンへの負荷:

  画像処理は当サーバー上で行われるため、オリジンサーバー（元の画像があるサーバー）へのCPU負荷はかかりません。


# MixederPublicAPIについて

MixederPublicAPIはMIXEDERの保護されたインフラストラクチャを活用し、貴方のAPIを保護し、配信することができたり、APIキーを取得し、MIXEDERや企業が作成したサービスを安全に利用することができるようになるプロダクトです。

{% hint style="info" %}
**APIの公開や配信に必要となるKeyCheckAPIについては、プライバシーやセキュリティーの観点から現在一部企業のみでのサービス提供とさせていただいております。**
{% endhint %}

### APIキーの取得方法

<https://console.mixeder.net/studio/?category=publicapis><br>

こちらのリンクより、PublicAPIのサービス画面に移動してください

<figure><img src="https://2154475259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAekuhKDtil6aRY6dFEMZ%2Fuploads%2FmYkf8aE5gO7VTN0YUawd%2Fimage.png?alt=media&amp;token=8d808a34-331a-4b0b-be05-e86b218df6d3" alt=""><figcaption></figcaption></figure>

アクセスできたら、「PublicAPI認証情報を作成」をクリックして下さい。

<figure><img src="https://2154475259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAekuhKDtil6aRY6dFEMZ%2Fuploads%2F3HoOI5FXF2J617Tv7QUz%2Fimage.png?alt=media&amp;token=24615294-f940-4ecb-bd22-c4baa802706a" alt=""><figcaption></figcaption></figure>

こちらのフォームにAPIキーの名前と補足情報などを入力してください。

補足情報には利用用途などを入力するとわかりやすいです。

<figure><img src="https://2154475259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAekuhKDtil6aRY6dFEMZ%2Fuploads%2FxKLAYLHqKUpOKQBDvj7z%2Fimage.png?alt=media&amp;token=9825cc77-1bb0-4add-83ac-11b03e1bd1b6" alt=""><figcaption></figcaption></figure>

APIキーの作成が完了するとAPIキーとメトリクス（分析情報）が表示されます。

このキーをAPI利用時にサービスに送信することでサービスのアクセスが許可されます。


# サンプルコードを利用する前に

{% embed url="<https://player.vimeo.com/video/1024350540>" %}

1. **セキュリティの確保**:
   * パスワードまたはAPIキーは必ずハッシュ化して保存してください。ハッシュ化を行う場合は、強力なハッシュアルゴリズムを選択してください。
   * SQLインジェクションやクロスサイトスクリプティング（XSS）などの攻撃を防ぐために、ユーザーからの入力を適切にバリデーションおよびサニタイズしてください。
2. **セッション管理**:
   * セッションは、ユーザーの認証情報を保持するための重要な手段です。セッションハイジャックを防ぐために、セッションIDの再生成を行い、セキュアな接続（HTTPS）を使用することを推奨します。
3. **エラーハンドリング**:
   * エラーが発生した場合の処理を適切に行い、ユーザーにわかりやすいメッセージを表示してください。詳細なエラーメッセージを表示することは、攻撃者に情報を与えることになりますので注意が必要です。
4. **APIの使用**:
   * APIのエンドポイントが正しいことを確認し、APIキーが適切に設定されていることを確認してください。悪意のあるアクセスを防ぐため、APIキーの管理には十分な注意を払ってください。
5. **データの暗号化**:
   * 重要なデータは、通信中および保存中に暗号化することを考慮してください。特に個人情報を取り扱う場合は、データのセキュリティに細心の注意を払うべきです。


# APIリファレンス


# WhoisAPI

## DNSWhoisAPI リファレンス

### サービス名

**DNSWhoisAPI**

### 利用用途

`DNSWhoisAPI`は、指定されたドメインのWhois情報を取得するためのAPIです。ドメインの所有者情報や登録状況などを取得するために使用されます。このAPIを利用することで、さまざまなドメインの情報を簡単に取得できます。

***

### API エンドポイント

```
https://events-front.mixeder.net/v1/Whois
```

***

### パラメータ

| パラメータ    | 必須 | 説明                 |
| -------- | -- | ------------------ |
| `key`    | 必須 | 利用者のAPIキー          |
| `domain` | 必須 | Whois情報を取得したいドメイン名 |

***

### 利用方法

1. 有効なAPIキーを用意します。
2. Whois情報を取得したいドメイン名を`domain`パラメータに指定します。
3. APIリクエストを送信すると、指定されたドメインのWhois情報が返されます。

***

### サンプルコード

#### cURL

```bash
curl "https://events-front.mixeder.net/v1/Whois?key=YOUR_API_KEY&domain=example.com"
```

#### Node.js

```javascript
const https = require('https');

const url = 'https://events-front.mixeder.net/v1/Whois?key=YOUR_API_KEY&domain=example.com';

https.get(url, (res) => {
    let data = '';
    res.on('data', (chunk) => {
        data += chunk;
    });
    res.on('end', () => {
        console.log(data);
    });
}).on('error', (err) => {
    console.error('Error: ' + err.message);
});
```

#### Python

```python
import requests

url = "https://events-front.mixeder.net/v1/Whois"
params = {
    "key": "YOUR_API_KEY",
    "domain": "example.com"
}

response = requests.get(url, params=params)
if response.status_code == 200:
    print(response.text)
else:
    print(f"Error: {response.status_code}")
```

***

### エラーメッセージ

* **API Key not provided.**: APIキーが指定されていません。
* **Domain not provided.**: ドメイン名が指定されていません。
* **API key is wrong**: APIキーが無効です。

***

### 注意事項

* 有効なAPIキーが必要です。指定がない場合や無効な場合はリクエストは拒否されます。
* `domain`パラメータには、Whois情報を取得したいドメイン名を正確に指定してください。
* サポートされているTLD（トップレベルドメイン）のリストは、こちらのページに定義されています。


# WhoisAPI TLDリスト

以下は、MIXEDERAPIで参照されている各TLD〔トップレベルドメイン〕のWHOISサーバーのリストです。

## WHOISサーバー一覧

* **.aero**: [whois.aero](http://whois.aero) - 航空業界向けドメイン
* **.arpa**: [whois.iana.org](http://whois.iana.org) - インターネット技術用のドメイン
* **.asia**: [whois.nic.asia](http://whois.nic.asia) - アジア地域向けドメイン
* **.biz**: [whois.biz](http://whois.biz) - ビジネス用ドメイン
* **.cat**: [whois.cat](http://whois.cat) - カタルーニャ文化向けドメイン
* **.com**: [whois.verisign-grs.com](http://whois.verisign-grs.com) - 一般商用ドメイン
* **.coop**: [whois.nic.coop](http://whois.nic.coop) - 協同組合向けドメイン
* **.edu**: [whois.educause.edu](http://whois.educause.edu) - 教育機関向けドメイン
* **.gov**: [whois.dotgov.gov](http://whois.dotgov.gov) - 米国政府向けドメイン
* **.info**: [whois.afilias.net](http://whois.afilias.net) - 情報提供用ドメイン
* **.int**: [whois.iana.org](http://whois.iana.org) - 国際機関向けドメイン
* **.jobs**: [jobswhois.verisign-grs.com](http://jobswhois.verisign-grs.com) - 求人情報用ドメイン
* **.mil**: [whois.nic.mil](http://whois.nic.mil) - 米国軍向けドメイン
* **.mobi**: [whois.dotmobiregistry.net](http://whois.dotmobiregistry.net) - モバイル用ドメイン
* **.museum**: [whois.museum](http://whois.museum) - 博物館向けドメイン
* **.name**: [whois.nic.name](http://whois.nic.name) - 個人名用ドメイン
* **.net**: [whois.verisign-grs.com](http://whois.verisign-grs.com) - ネットワーク用ドメイン
* **.org**: [whois.pir.org](http://whois.pir.org) - 非営利団体向けドメイン
* **.pro**: [whois.registrypro.pro](http://whois.registrypro.pro) - 専門職向けドメイン
* **.tel**: [whois.nic.tel](http://whois.nic.tel) - 電話番号向けドメイン
* **.travel**: [whois.nic.travel](http://whois.nic.travel) - 旅行関連向けドメイン

#### 各国のWHOISサーバー

* **.ac**: [whois.nic.ac](http://whois.nic.ac) - アセンション島
* **.ad**: [whois.ripe.net](http://whois.ripe.net) - アンドラ
* **.ae**: [whois.nic.ae](http://whois.nic.ae) - アラブ首長国連邦
* **.af**: [whois.nic.af](http://whois.nic.af) - アフガニスタン
* **.ag**: [whois.nic.ag](http://whois.nic.ag) - アンティグア・バーブーダ
* **.ai**: [whois.ai](http://whois.ai) - アングィラ
* **.al**: [whois.ripe.net](http://whois.ripe.net) - アルバニア
* **.am**: [whois.amnic.net](http://whois.amnic.net) - アルメニア
* **.as**: [whois.nic.as](http://whois.nic.as) - アメリカ領サモア
* **.at**: [whois.nic.at](http://whois.nic.at) - オーストリア
* **.au**: [whois.aunic.net](http://whois.aunic.net) - オーストラリア
* **.az**: [whois.ripe.net](http://whois.ripe.net) - アゼルバイジャン
* **.ba**: [whois.ripe.net](http://whois.ripe.net) - ボスニア・ヘルツェゴビナ
* **.be**: [whois.dns.be](http://whois.dns.be) - ベルギー
* **.bg**: [whois.register.bg](http://whois.register.bg) - ブルガリア
* **.bm**: [rwhois.ibl.bm](http://rwhois.ibl.bm) - バミューダ
* **.bo**: [whois.adsib.gob.bo](http://whois.adsib.gob.bo) - ボリビア
* **.br**: [whois.registro.br](http://whois.registro.br) - ブラジル
* **.bt**: [whois.nic.bt](http://whois.nic.bt) - ブータン
* **.bv**: [whois.ripe.net](http://whois.ripe.net) - ブーベ島
* **.by**: [whois.ripe.net](http://whois.ripe.net) - ベラルーシ
* **.bz**: [whois.belizenic.bz](http://whois.belizenic.bz) - ベリーズ
* **.ca**: [whois.cira.ca](http://whois.cira.ca) - カナダ
* **.cc**: [ccwhois.verisign-grs.com](http://ccwhois.verisign-grs.com) - ココス（キーリング）諸島
* **.cd**: [whois.nic.cd](http://whois.nic.cd) - コンゴ民主共和国
* **.ch**: [whois.nic.ch](http://whois.nic.ch) - スイス
* **.ci**: [whois.nic.ci](http://whois.nic.ci) - コートジボワール
* **.ck**: [whois.ck-nic.org.ck](http://whois.ck-nic.org.ck) - クック諸島
* **.cl**: [whois.nic.cl](http://whois.nic.cl) - チリ
* **.cn**: [whois.cnnic.cn](http://whois.cnnic.cn) - 中国
* **.co**: [whois.nic.co](http://whois.nic.co) - コロンビア
* **.cx**: [whois.nic.cx](http://whois.nic.cx) - クリスマス島
* **.cy**: [whois.ripe.net](http://whois.ripe.net) - キプロス
* **.cz**: [whois.nic.cz](http://whois.nic.cz) - チェコ
* **.de**: [whois.denic.de](http://whois.denic.de) - ドイツ
* **.dk**: [whois.dk-hostmaster.dk](http://whois.dk-hostmaster.dk) - デンマーク
* **.dm**: [whois.nic.dm](http://whois.nic.dm) - ドミニカ国
* **.do**: [whois.nic.do](http://whois.nic.do) - ドミニカ共和国
* **.dz**: [whois.ripe.net](http://whois.ripe.net) - アルジェリア
* **.ee**: [whois.eenet.ee](http://whois.eenet.ee) - エストニア
* **.eg**: [whois.ripe.net](http://whois.ripe.net) - エジプト
* **.es**: [whois.ripe.net](http://whois.ripe.net) - スペイン
* **.eu**: [whois.eu](http://whois.eu) - 欧州連合
* **.fi**: [whois.ficora.fi](http://whois.ficora.fi) - フィンランド
* **.fj**: [whois.usp.ac.fj](http://whois.usp.ac.fj) - フィジー
* **.fo**: [whois.ripe.net](http://whois.ripe.net) - フェロー諸島
* **.fr**: [whois.nic.fr](http://whois.nic.fr) - フランス
* **.ga**: [whois.nic.ga](http://whois.nic.ga) - ガボン
* **.gb**: [whois.iana.org](http://whois.iana.org) - グレートブリテン
* **.gd**: [whois.nic.gd](http://whois.nic.gd) - グレナダ
* **.ge**: [whois.ripe.net](http://whois.ripe.net) - ジョージア
* **.gf**: [whois.nic.gf](http://whois.nic.gf) - フランス領ギアナ
* **.gg**: [whois.gg](http://whois.gg) - ガーンジー
* **.gh**: [whois.nic.gh](http://whois.nic.gh) - ガーナ
* **.gi**: [whois.gi](http://whois.gi) - ジブラルタル
* **.gl**: [whois.nic.gl](http://whois.nic.gl) - グリーンランド
* **.gm**: [whois.nic.gm](http://whois.nic.gm) - ガンビア
* **.gn**: [whois.nic.gn](http://whois.nic.gn) - ギニア
* **.gq**: [whois.nic.gq](http://whois.nic.gq) - 赤道ギニア
* **.gr**: [whois.iana.org](http://whois.iana.org) - ギリシャ
* **.gt**: [whois.gt](http://whois.gt) - グアテマラ
* **.gu**: [whois.gu](http://whois.gu) - グアム
* **.gw**: [whois.nic.gw](http://whois.nic.gw) - ギニアビサウ
* **.gy**: [whois.nic.gy](http://whois.nic.gy) - ガイアナ
* **.hk**: [whois.hkcert.net](http://whois.hkcert.net) - 香港
* **.hm**: [whois.registry.hm](http://whois.registry.hm) - ハード島とマクドナルド諸島
* **.hn**: [whois.nic.hn](http://whois.nic.hn) - ホンジュラス
* **.hr**: [whois.dns.hr](http://whois.dns.hr) - クロアチア
* **.ht**: [whois.nic.ht](http://whois.nic.ht) - ハイチ
* **.hu**: [whois.nic.hu](http://whois.nic.hu) - ハンガリー
* **.id**: [whois.pandi.or.id](http://whois.pandi.or.id) - インドネシア
* **.ie**: [whois.domainregistry.ie](http://whois.domainregistry.ie) - アイルランド
* **.il**: [whois.isoc.org.il](http://whois.isoc.org.il) - イスラエル
* **.im**: [whois.nic.im](http://whois.nic.im) - マン島
* **.in**: [whois.registry.in](http://whois.registry.in) - インド
* **.io**: [whois.nic.io](http://whois.nic.io) - インド洋地域
* **.iq**: [whois.cmc.iq](http://whois.cmc.iq) - イラク
* **.ir**: [whois.nic.ir](http://whois.nic.ir) - イラン
* **.is**: [whois.isnic.is](http://whois.isnic.is) - アイスランド
* **.it**: [whois.nic.it](http://whois.nic.it) - イタリア
* **.je**: [whois.je](http://whois.je) - ジャージー
* **.jm**: [whois.nic.jm](http://whois.nic.jm) - ジャマイカ
* **.jo**: [whois.jo](http://whois.jo) - ヨルダン
* **.jp**: [whois.jprs.jp](http://whois.jprs.jp) - 日本
* **.ke**: [whois.kenic.or.ke](http://whois.kenic.or.ke) - ケニア
* **.kg**: [whois.domain.kg](http://whois.domain.kg) - キルギス
* **.kh**: [whois.nic.kh](http://whois.nic.kh) - カンボジア
* **.ki**: [whois.nic.ki](http://whois.nic.ki) - キリバス
* **.km**: [whois.nic.km](http://whois.nic.km) - コモロ
* **.kn**: [whois.nic.kn](http://whois.nic.kn) - セントクリストファー・ネイビス
* **.kp**: [whois.kcc.gov.kp](http://whois.kcc.gov.kp) - 北朝鮮
* **.kr**: [whois.kr](http://whois.kr) - 韓国
* **.kw**: [whois.paci.gov.kw](http://whois.paci.gov.kw) - クウェート
* **.ky**: [whois.ky](http://whois.ky) - ケイマン諸島
* **.kz**: [whois.nic.kz](http://whois.nic.kz) - カザフスタン
* **.la**: [whois.nic.la](http://whois.nic.la) - ラオス
* **.lb**: [whois.nic.lb](http://whois.nic.lb) - レバノン
* **.lc**: [whois.nic.lc](http://whois.nic.lc) - セントルシア
* **.li**: [whois.nic.li](http://whois.nic.li) - リヒテンシュタイン
* **.lk**: [whois.nic.lk](http://whois.nic.lk) - スリランカ
* **.lr**: [whois.nic.lr](http://whois.nic.lr) - リベリア
* **.ls**: [whois.co.ls](http://whois.co.ls) - レソト
* **.lt**: [whois.domreg.lt](http://whois.domreg.lt) - リトアニア
* **.lu**: [whois.dns.lu](http://whois.dns.lu) - ルクセンブルク
* **.lv**: [whois.nic.lv](http://whois.nic.lv) - ラトビア
* **.ly**: [whois.nic.ly](http://whois.nic.ly) - リビア
* **.ma**: [whois.iam.net.ma](http://whois.iam.net.ma) - モロッコ
* **.mc**: [whois.montecarlodomain.com](http://whois.montecarlodomain.com) - モナコ
* **.md**: [whois.nic.md](http://whois.nic.md) - モルドバ
* **.me**: [whois.nic.me](http://whois.nic.me) - モンテネグロ
* **.mg**: [whois.nic.mg](http://whois.nic.mg) - マダガスカル
* **.mh**: [whois.nic.mh](http://whois.nic.mh) - マーシャル諸島
* **.mil**: [whois.nic.mil](http://whois.nic.mil) - 米国軍
* **.mk**: [whois.marnet.mk](http://whois.marnet.mk) - 北マケドニア
* **.ml**: [whois.nic.ml](http://whois.nic.ml) - マリ
* **.mm**: [whois.myanmar.gov.mm](http://whois.myanmar.gov.mm) - ミャンマー
* **.mn**: [whois.nic.mn](http://whois.nic.mn) - モンゴル
* **.mo**: [whois.monic.mo](http://whois.monic.mo) - マカオ
* **.mp**: [whois.nic.mp](http://whois.nic.mp) - 北マリアナ諸島
* **.mq**: [whois.nic.mq](http://whois.nic.mq) - マルティニーク
* **.mr**: [whois.nic.mr](http://whois.nic.mr) - モーリタニア
* **.ms**: [whois.nic.ms](http://whois.nic.ms) - モントセラト
* **.mt**: [whois.maltadomains.com](http://whois.maltadomains.com) - マルタ
* **.mu**: [whois.nic.mu](http://whois.nic.mu) - モーリシャス
* **.mv**: [whois.nic.mv](http://whois.nic.mv) - モルディブ
* **.mw**: [whois.nic.mw](http://whois.nic.mw) - マラウイ
* **.mx**: [whois.mx](http://whois.mx) - メキシコ
* **.my**: [whois.domainregistry.my](http://whois.domainregistry.my) - マレーシア
* **.mz**: [whois.nic.mz](http://whois.nic.mz) - モザンビーク
* **.na**: [whois.na-nic.com.na](http://whois.na-nic.com.na) - ナミビア
* **.nc**: [whois.nc](http://whois.nc) - ニューカレドニア
* **.ne**: [whois.nic.ne](http://whois.nic.ne) - ニジェール
* **.nf**: [whois.nic.nf](http://whois.nic.nf) - ノーフォーク島
* **.ng**: [whois.nic.ng](http://whois.nic.ng) - ナイジェリア
* **.ni**: [whois.nic.ni](http://whois.nic.ni) - ニカラグア
* **.nl**: [whois.domain-registry.nl](http://whois.domain-registry.nl) - オランダ
* **.no**: [whois.norid.no](http://whois.norid.no) - ノルウェー
* **.np**: [whois.registry.np](http://whois.registry.np) - ネパール
* **.nr**: [whois.nic.nr](http://whois.nic.nr) - ナウル
* **.nu**: [whois.nic.nu](http://whois.nic.nu) - ニュージーランド
* **.nz**: [whois.srs.net.nz](http://whois.srs.net.nz) - ニュージーランド
* **.om**: [whois.registry.om](http://whois.registry.om) - オマーン
* **.pa**: [whois.pa](http://whois.pa) - パナマ
* **.pe**: [whois.nic.pe](http://whois.nic.pe) - ペルー
* **.pf**: [whois.nic.pf](http://whois.nic.pf) - フランス領ポリネシア
* **.pg**: [whois.nic.pg](http://whois.nic.pg) - パプアニューギニア
* **.ph**: [whois.ph](http://whois.ph) - フィリピン
* **.pk**: [whois.pknic.net.pk](http://whois.pknic.net.pk) - パキスタン
* **.pl**: [whois.dns.pl](http://whois.dns.pl) - ポーランド
* **.pm**: [whois.nic.pm](http://whois.nic.pm) - サンピエール島・ミクロン
* **.pn**: [whois.nic.pn](http://whois.nic.pn) - ピトケアン諸島
* **.pr**: [whois.nic.pr](http://whois.nic.pr) - プエルトリコ
* **.pro**: [whois.registry.pro](http://whois.registry.pro) - プロ
* **.pt**: [whois.dns.pt](http://whois.dns.pt) - ポルトガル
* **.pw**: [whois.nic.pw](http://whois.nic.pw) - パラオ
* **.py**: [whois.nic.py](http://whois.nic.py) - パラグアイ
* **.qa**: [whois.registry.qa](http://whois.registry.qa) - カタール
* **.re**: [whois.nic.re](http://whois.nic.re) - フランス領レユニオン
* **.ro**: [whois.rotld.ro](http://whois.rotld.ro) - ルーマニア
* **.rs**: [whois.rnids.rs](http://whois.rnids.rs) - セルビア
* **.ru**: [whois.ripn.net](http://whois.ripn.net) - ロシア
* **.rw**: [whois.rw](http://whois.rw) - ルワンダ
* **.sa**: [whois.nic.sa](http://whois.nic.sa) - サウジアラビア
* **.sb**: [whois.nic.sb](http://whois.nic.sb) - ソロモン諸島
* **.sc**: [whois2.afilias-grs.com](http://whois2.afilias-grs.com) - セイシェル
* **.sd**: [whois.nic.sd](http://whois.nic.sd) - スーダン
* **.se**: [whois.iis.se](http://whois.iis.se) - スウェーデン
* **.sg**: [whois.sgnic.sg](http://whois.sgnic.sg) - シンガポール
* **.sh**: [whois.nic.sh](http://whois.nic.sh) - セントヘレナ
* **.si**: [whois.arnes.si](http://whois.arnes.si) - スロベニア
* **.sj**: [whois.sj](http://whois.sj) - スバールバル・ヤンマイエン
* **.sk**: [whois.sk-nic.sk](http://whois.sk-nic.sk) - スロバキア
* **.sl**: [whois.nic.sl](http://whois.nic.sl) - シエラレオネ
* **.sm**: [whois.nic.sm](http://whois.nic.sm) - サンマリノ
* **.sn**: [whois.nic.sn](http://whois.nic.sn) - セネガル
* **.so**: [whois.nic.so](http://whois.nic.so) - ソマリア
* **.sr**: [whois.sr](http://whois.sr) - スリナム
* **.st**: [whois.nic.st](http://whois.nic.st) - サントメ・プリンシペ
* **.su**: [whois.ripn.net](http://whois.ripn.net) - ソ連
* **.sv**: [whois.nic.sv](http://whois.nic.sv) - エルサルバドル
* **.sx**: [whois.sx](http://whois.sx) - シント・マールテン
* **.sy**: [whois.ripe.net](http://whois.ripe.net) - シリア
* **.sz**: [whois.nic.sz](http://whois.nic.sz) - スワジランド
* **.tc**: [whois.nic.tc](http://whois.nic.tc) - タークス・カイコス諸島
* **.td**: [whois.nic.td](http://whois.nic.td) - チャド
* **.tf**: [whois.nic.tf](http://whois.nic.tf) - フランス領南方・南極地域
* **.tg**: [whois.nic.tg](http://whois.nic.tg) - トーゴ
* **.th**: [whois.thnic.co.th](http://whois.thnic.co.th) - タイ
* **.tj**: [whois.nic.tj](http://whois.nic.tj) - タジキスタン
* **.tk**: [whois.nic.tk](http://whois.nic.tk) - トケラウ
* **.tl**: [whois.nic.tl](http://whois.nic.tl) - 東ティモール
* **.tm**: [whois.nic.tm](http://whois.nic.tm) - トルクメニスタン
* **.tn**: [whois.ati.tn](http://whois.ati.tn) - チュニジア
* **.to**: [whois.to](http://whois.to) - トンガ
* **.tr**: [whois.nic.tr](http://whois.nic.tr) - トルコ
* **.tt**: [whois.tt](http://whois.tt) - トリニダード・トバゴ
* **.tv**: [whois.tv](http://whois.tv) - ツバル
* **.tz**: [whois.tznic.or.tz](http://whois.tznic.or.tz) - タンザニア
* **.ua**: [whois.ua](http://whois.ua) - ウクライナ
* **.ug**: [whois.co.ug](http://whois.co.ug) - ウガンダ
* **.uk**: [whois.nic.uk](http://whois.nic.uk) - イギリス
* **.us**: [whois.nic.us](http://whois.nic.us) - アメリカ合衆国
* **.uy**: [whois.uy](http://whois.uy) - ウルグアイ
* **.uz**: [whois.cctld.uz](http://whois.cctld.uz) - ウズベキスタン
* **.vc**: [whois2.afilias-grs.com](http://whois2.afilias-grs.com) - セントビンセントおよびグレナディーン
* **.ve**: [whois.nic.ve](http://whois.nic.ve) - ベネズエラ
* **.vg**: [whois.vg](http://whois.vg) - 英領バージン諸島
* **.vi**: [whois.nic.vi](http://whois.nic.vi) - 米領バージン諸島
* **.vn**: [whois.vnnic.vn](http://whois.vnnic.vn) - ベトナム
* **.vu**: [whois.vu](http://whois.vu) - バヌアツ
* **.wf**: [whois.nic.wf](http://whois.nic.wf) - フランス領ウォリス・フツナ
* **.ws**: [whois.website.ws](http://whois.website.ws) - サモア
* **.ye**: [whois.ye](http://whois.ye) - イエメン
* **.yt**: [whois.nic.yt](http://whois.nic.yt) - マヨット
* **.za**: [whois.registry.net.za](http://whois.registry.net.za) - 南アフリカ
* **.zm**: [whois.zm](http://whois.zm) - ザンビア
* **.zw**: [whois.nic.zw](http://whois.nic.zw) - ジンバブエ


# ConvertAPI

## ConvertAPI リファレンス

### サービス名

**ConvertAPI**

### 利用用途

`ConvertAPI`は、指定した画像ファイルをアスキーアート(ASCII Art)に変換するAPIです。アスキーアートは、画像の輝度情報を基に文字を組み合わせて生成される視覚的表現で、画像をテキスト形式に変換して表示したい場合に利用されます。

{% hint style="info" %}
**このAPIの利用にはAPIキーが必要ですが、料金は発生しません。また、請求書にも記載されません。**
{% endhint %}

***

### API エンドポイント

```
https://events-front.mixeder.net/ConvertAPI/
```

***

### パラメータ

| パラメータ  | 必須 | 説明             |
| ------ | -- | -------------- |
| `key`  | 必須 | 利用者のAPIキー      |
| `from` | 必須 | 変換する画像ファイルのURL |

***

### 利用方法

1. 有効なAPIキーを用意します。
2. 変換したい画像のURLを`from`パラメータに指定します。
3. 上記のパラメータを使ってリクエストを送信すると、アスキーアートが返されます。

***

### サンプルレスポンス

```plaintext
@@@@@@@@@@@@@@@@@@
@@&&&*******::::::
@@&&&*******::::::
@@@@@@@@@@@@@@@@@@
```

***

### サンプルコード

#### cURL

```bash
curl "https://events-front.mixeder.net/ConvertAPI/?key=YOUR_API_KEY&from=https://example.com/sample.jpg"
```

#### Node.js

```javascript
const https = require('https');

const url = 'https://events-front.mixeder.net/ConvertAPI/?key=YOUR_API_KEY&from=https://example.com/sample.jpg';

https.get(url, (res) => {
    let data = '';
    res.on('data', (chunk) => {
        data += chunk;
    });
    res.on('end', () => {
        console.log(data);
    });
}).on('error', (err) => {
    console.error('Error: ' + err.message);
});
```

#### Python

```python
import requests

url = "https://events-front.mixeder.net/ConvertAPI/"
params = {
    "key": "YOUR_API_KEY",
    "from": "https://example.com/sample.jpg"
}

response = requests.get(url, params=params)
if response.status_code == 200:
    print(response.text)
else:
    print(f"Error: {response.status_code}")
```

***

### エラーメッセージ

* **API Key not provided.**: APIキーが指定されていません。
* **Query\[From] not provided.**: 画像のURLが指定されていません。
* **API key is wrong**: APIキーが無効です。

***

### 注意事項

* 画像ファイルのURLは外部から直接参照できる形式である必要があります。
* 適切なAPIキーを使用しないと、リクエストは拒否されます。

***

これで、`ConvertAPI`を利用して画像をアスキーアートに変換するための手順が整いました。


# TimeZoneAPI

## Timezone API リファレンス

### サービス名

**Timezone API**

### 利用用途

`Timezone API`は、指定されたタイムゾーンにおける現在の日時を取得するためのAPIです。このAPIを利用することで、異なる都市や地域の現在時刻を取得し、アプリケーションやウェブサイトでの時間表示に役立てることができます。

***

### API エンドポイント

```
https://events-front.mixeder.net/v1/timezone
```

***

### パラメータ

| パラメータ      | 必須 | 説明                               |
| ---------- | -- | -------------------------------- |
| `key`      | 必須 | 利用者のAPIキー                        |
| `timezone` | 必須 | 取得したい都市のタイムゾーン名（例: `Asia/Tokyo`） |

***

### 利用方法

1. 有効なAPIキーを用意します。
2. 取得したいタイムゾーンを`timezone`パラメータに指定します。
3. APIリクエストを送信すると、指定されたタイムゾーンの現在時刻が返されます。

***

### サンプルコード

#### cURL

```bash
curl "https://events-front.mixeder.net/v1/timezone?key=YOUR_API_KEY&timezone=Asia/Tokyo"
```

#### Node.js

```javascript
const https = require('https');

const url = 'https://events-front.mixeder.net/v1/timezone?key=YOUR_API_KEY&timezone=Asia/Tokyo';

https.get(url, (res) => {
    let data = '';
    res.on('data', (chunk) => {
        data += chunk;
    });
    res.on('end', () => {
        console.log(data);
    });
}).on('error', (err) => {
    console.error('Error: ' + err.message);
});
```

#### Python

```python
import requests

url = "https://events-front.mixeder.net/v1/timezone"
params = {
    "key": "YOUR_API_KEY",
    "timezone": "Asia/Tokyo"
}

response = requests.get(url, params=params)
if response.status_code == 200:
    print(response.json())
else:
    print(f"Error: {response.status_code}")
```

***

### エラーメッセージ

* **API Key not provided.**: APIキーが指定されていません。
* **Timezone not provided.**: タイムゾーンが指定されていません。
* **API key is wrong**: APIキーが無効です。

***

### 注意事項

* 有効なAPIキーが必要です。指定がない場合や無効な場合はリクエストは拒否されます。
* `timezone`パラメータには、正確なタイムゾーン名（例: `Asia/Tokyo`, `America/New_York`）を指定してください。


# WEBFetchAPI

## リファレンス

### 利用用途

`Proxy URL Fetch API`は、指定されたURLのコンテンツをプロキシ経由で取得するためのAPIです。このAPIを使用することで、指定されたウェブページのコンテンツを取得し、必要に応じてリクエストのユーザーエージェントをカスタマイズできます。主にデータ収集やウェブサイトの情報取得に活用されます。

***

### API エンドポイント

```
https://events-front.mixeder.net/v1/SS
```

***

### パラメータ

| パラメータ | 必須 | 説明        |
| ----- | -- | --------- |
| `key` | 必須 | 利用者のAPIキー |
| `url` | 必須 | 取得したいURL  |

***

### 利用方法

1. 有効なAPIキーを用意します。
2. 取得したいURLを`url`パラメータに指定します。
3. APIリクエストを送信すると、指定されたURLのコンテンツが返されます。

***

### サンプルコード

#### cURL

```bash
curl "https://events-front.mixeder.net/v1/SS?key=YOUR_API_KEY&url=https://example.com"
```

#### Node.js

```javascript
const https = require('https');

const url = 'https://events-front.mixeder.net/v1/SS?key=YOUR_API_KEY&url=https://example.com';

https.get(url, (res) => {
    let data = '';
    res.on('data', (chunk) => {
        data += chunk;
    });
    res.on('end', () => {
        console.log(data);
    });
}).on('error', (err) => {
    console.error('Error: ' + err.message);
});
```

#### Python

```python
import requests

url = "https://events-front.mixeder.net/v1/SS"
params = {
    "key": "YOUR_API_KEY",
    "url": "https://example.com"
}

response = requests.get(url, params=params)
if response.status_code == 200:
    print(response.text)
else:
    print(f"Error: {response.status_code}")
```

***

### エラーメッセージ

* **API Key not provided.**: APIキーが指定されていません。
* **URL not provided.**: URLが指定されていません。
* **API key is wrong**: APIキーが無効です。
* **Error: Unable to fetch the URL.**: 指定されたURLを取得できませんでした。
* **Error: Page size exceeds the limit (15MB).**: 取得したページのサイズが15MBを超えています。

ユーザーエージェントは以下の通りです。

```
Mixederbot (For details: https://www.mixeder.net/bot/)
```

***

### 注意事項

* 有効なAPIキーが必要です。指定がない場合や無効な場合はリクエストは拒否されます。
* `url`パラメータには、取得したいウェブページのURLを正確に指定してください。
* 取得したページのサイズが15MBを超える場合、APIはエラーメッセージを返します。


# NETRecordAPI

## DNS Record API リファレンス

### サービス名

**DNS Record API**

### 利用用途

`DNS Record API`は、指定されたホスト名に関連するDNSレコードを取得するためのAPIです。このAPIを使用することで、DNSレコードの種類（A、CNAME、MXなど）に応じた情報を取得し、ネットワーク管理やドメイン解析などに活用できます。

***

### API エンドポイント

```
https://events-front.mixeder.net/v1/recordapi
```

***

### パラメータ

| パラメータ  | 必須 | 説明                           |
| ------ | -- | ---------------------------- |
| `key`  | 必須 | 利用者のAPIキー                    |
| `host` | 必須 | DNSレコードを取得するホスト名             |
| `type` | 任意 | DNSレコードのタイプ（例: A、CNAME、MXなど） |

***

### 利用方法

1. 有効なAPIキーを用意します。
2. 取得したいDNSレコードのホスト名を`host`パラメータに指定します。
3. オプションで、取得するDNSレコードのタイプを`type`パラメータに指定します（指定がない場合はデフォルトでAレコードが取得されます）。
4. APIリクエストを送信すると、指定されたホスト名に関連するDNSレコードがJSON形式で返されます。

***

### サンプルコード

#### cURL

```bash
curl "https://events-front.mixeder.net/v1/recordapi?key=YOUR_API_KEY&host=example.com&type=A"
```

#### Node.js

```javascript
const https = require('https');

const url = 'https://events-front.mixeder.net/v1/recordapi?key=YOUR_API_KEY&host=example.com&type=A';

https.get(url, (res) => {
    let data = '';
    res.on('data', (chunk) => {
        data += chunk;
    });
    res.on('end', () => {
        console.log(data);
    });
}).on('error', (err) => {
    console.error('Error: ' + err.message);
});
```

#### Python

```python
import requests

url = "https://events-front.mixeder.net/v1/recordapi/"
params = {
    "key": "YOUR_API_KEY",
    "host": "example.com",
    "type": "A"
}

response = requests.get(url, params=params)
if response.status_code == 200:
    print(response.text)
else:
    print(f"Error: {response.status_code}")
```

***

### エラーメッセージ

* **API Key not provided.**: APIキーが指定されていません。
* **Hostname not provided.**: ホスト名が指定されていません。
* **API key is wrong**: APIキーが無効です。
* **Error**: DNSレコードの取得に失敗しました。

***

### 注意事項

* 有効なAPIキーが必要です。指定がない場合や無効な場合はリクエストは拒否されます。
* `host`パラメータには、DNSレコードを取得したいホスト名を正確に指定してください。
* `type`パラメータには、取得したいDNSレコードのタイプを指定できます。無効なタイプが指定された場合は、デフォルトのAレコードが取得されます。


# WebInfoAPI

**Website Data API リファレンス**

Website Data API は、指定されたウェブサイトのタイトル、メタ情報、ファビコン、および IP アドレスを取得するためのシンプルなAPIです。ウェブサイト情報の集約やメタデータ解析などに便利で、WebスクレイピングやSEOツール、コンテンツ管理システム (CMS) の補助として活用できます。

### エンドポイント

```
https://events-front.mixeder.net/v2/webinfoapi
```

### パラメータ

| パラメータ | 必須 | 説明                  |
| ----- | -- | ------------------- |
| `url` | はい | 情報を取得したいウェブサイトのURL。 |
| key   | はい | APIキー               |

### レスポンス形式

* レスポンスはJSON形式で返され、以下の情報が含まれます。

| フィールド     | 説明               |
| --------- | ---------------- |
| `title`   | ウェブサイトのタイトル      |
| `meta`    | ウェブサイトのメタ情報 (配列) |
| `favicon` | ウェブサイトのファビコンURL  |
| `ip`      | ウェブサイトのIPアドレス    |

#### サンプルレスポンス

```json
{
    "title": "MixederInternet - 高速で安全なサービスを全ての人に",
    "meta": {
        "viewport": "width=device-width,initial-scale=1,shrink-to-fit=no",
        "description": "高速で安全なサービスを全ての人に",
        "keywords": "{{ MixederInternet,MIXEDERInternet,MIXEDER,ミキサー,Mixeder }}",
        "format-detection": "telephone=no,email=no,address=no"
    },
    "favicon": "https:\/\/www.mixeder.net\/static.mixeder.net\/favicon.png",
    "ip": "104.21.67.124"
}
```

### エラーレスポンス

* パラメータが不足している、または無効な場合、エラーメッセージが返されます。

| フィールド   | 説明       |
| ------- | -------- |
| `error` | エラーメッセージ |

#### エラー例

```json
{"error": "URL parameter is missing."}
{"error": "Invalid URL."}
{"error": "Failed to fetch the website."}
```

***

### 利用用途

Website Data API は以下のような用途に使用できます。

1. **SEOおよびコンテンツ管理**\
   各ページのタイトルやメタ情報を抽出してSEOデータベースを作成したり、各ウェブページの重要なメタデータを分析・管理する用途で使用できます。
2. **スクレイピングツールや情報収集アプリ**\
   ウェブサイトの基本情報 (タイトルやメタデータ) を収集し、データベースとして蓄積したり、他のツールで利用するためのベースデータとして活用可能です。
3. **コンテンツのプレビュー**\
   ソーシャルメディアなどで共有する際にページのタイトルやファビコンを取得し、見やすいプレビュー表示を作成するのに役立ちます。
4. **ウェブ分析とパフォーマンスモニタリング**\
   ウェブサイトのIPアドレスを取得して地域別の分析やアクセス時間帯の調査、またネットワークパフォーマンスを監視するツールの一部として使用できます。
5. **ドキュメンテーションや教育目的**\
   サンプルサイトのメタ情報を取得し、JSONデータの使い方やDOM解析の実例として教育目的で活用することが可能です。

***

#### 利用例

**PHPコードサンプル**

特定のURLの情報を取得し、表示するPHPコード例：

```php
<?php
$url = 'https://example.com';
$response = file_get_contents('https://events-front.mixeder.net/v2/webinfoapi?url=' . urlencode($url));
$data = json_decode($response, true);
print_r($data);
```


# ImageConvertAPI

## Image Conversion API リファレンス

### サービス名

**Image Conversion API**

### 利用用途

`Image Conversion API`は、指定された画像ファイルを別の形式に変換するAPIです。さまざまな画像フォーマット（JPEG、PNG、GIFなど）を互いに変換できるため、異なる用途に応じて画像の形式を変更する際に利用されます。

***

### API エンドポイント

```
https://events-front.mixeder.net/v1/image
```

***

### パラメータ

| パラメータ  | 必須 | 説明                     |
| ------ | -- | ---------------------- |
| `key`  | 必須 | 利用者のAPIキー              |
| `from` | 必須 | 変換元の画像ファイルのURLまたはパス    |
| `to`   | 任意 | 変換先の画像形式（デフォルトは`webp`） |

***

### 利用方法

1. 有効なAPIキーを用意します。
2. 変換したい画像のURLまたはパスを`from`パラメータに指定します。
3. オプションで、変換先の形式を`to`パラメータに指定します（指定がない場合は`webp`形式に変換）。
4. APIリクエストを送信すると、指定した形式に変換された画像が返されます。

***

### サンプルコード

#### cURL

```bash
curl "https://events-front.mixeder.net/v1/image?key=YOUR_API_KEY&from=https://example.com/sample.jpg&to=png"
```

#### Node.js

```javascript
const https = require('https');

const url = 'https://events-front.mixeder.net/v1/image/?key=YOUR_API_KEY&from=https://example.com/sample.jpg&to=png';

https.get(url, (res) => {
    let data = '';
    res.on('data', (chunk) => {
        data += chunk;
    });
    res.on('end', () => {
        console.log(data);
    });
}).on('error', (err) => {
    console.error('Error: ' + err.message);
});
```

#### Python

```python
import requests

url = "https://events-front.mixeder.net/v1/image/"
params = {
    "key": "YOUR_API_KEY",
    "from": "https://example.com/sample.jpg",
    "to": "png"
}

response = requests.get(url, params=params)
if response.status_code == 200:
    print(response.text)
else:
    print(f"Error: {response.status_code}")
```

***

### エラーメッセージ

* **API Key not provided.**: APIキーが指定されていません。
* **API key is wrong**: APIキーが無効です。
* **Query\[From] not provided.**: 変換元の画像ファイルが指定されていません。
* **ERROR**: 画像の変換に失敗しました。無効な画像形式の場合や処理中にエラーが発生した場合に表示されます。

***

### 注意事項

* 有効なAPIキーが必要です。指定がない場合や無効な場合はリクエストは拒否されます。
* `from`パラメータには、変換したい画像のURLまたはパスを正確に指定してください。
* サポートされている画像形式は、BMP、JPEG、PNG、GIF、WEBPです。これ以外の形式は変換できません。


# Profanity Detection and Cleaning API

APIエンドポイント: **`https://events-front.mixeder.net/v2/wordetect/`**

***

#### **API概要**

Profanity Detection and Cleaning APIは、テキストから不適切な単語を検出し、指定の文字やパターンで置換する機能を提供します。ユーザーは、簡単なAPIコールで不適切な表現の除去や検出を行うことができます。以下は具体的な利用手順とサンプルコードです。

***

### **APIの使い方**

#### **1. API キーの提供方法**

APIを利用するには、**有効なAPIキー**を以下のいずれかの方法で渡してください。

* **GETパラメータ**: `?key=<API_KEY>`
* **POSTパラメータ**: `api-key=<API_KEY>`
* **HTTPヘッダー**: `api-key: <API_KEY>`

***

### **パラメータ一覧**

| **パラメータ名**  | **型**  | **必須** | **説明**                                                |
| ----------- | ------ | ------ | ----------------------------------------------------- |
| `key`       | string | 必須     | APIキー。GET/POSTまたはヘッダーで提供可能。                           |
| `text`      | string | 必須     | 不適切単語を検出・置換する対象テキスト。                                  |
| `add`       | string | 任意     | カンマ区切りで追加する不適切単語リスト。                                  |
| `fill_text` | string | 任意     | 置換時に使用する文字列（デフォルト: `*`）。                              |
| `fill_char` | string | 任意     | 置換時、単語長に応じて使う文字（例: `#`）。                              |
| `method`    | string | 任意     | 実行モード: `json` / `xml` / `plain` / `containsprofanity` |

***

### **モードの説明**

1. **containsprofanity**
   * テキスト内に不適切な単語があるかどうかを検出します。
   * **戻り値**: `true` / `false` (JSON形式)
2. **json**
   * 入力テキストと置換後のクリーンなテキストをJSONで返します。
3. **xml**
   * テキストの置換結果をXML形式で返します。
4. **plain**
   * 置換後のクリーンなテキストをプレーンテキスト形式で返します。

***

### **サンプルコード**

#### **1. JSON形式のクリーンテキスト取得**

**リクエスト**

```bash
curl "https://events-front.mixeder.net/v2/wordetect/?key=YOUR_API_KEY&text=This is a bad word&method=json"
```

**レスポンス**

```json
{
  "original": "This is a bad word",
  "cleaned": "This is a *** word"
}
```

***

#### **2. XML形式での出力**

**リクエスト**

```bash
curl "https://events-front.mixeder.net/v2/wordetect/?key=YOUR_API_KEY&text=This is ugly&method=xml"
```

**レスポンス**

```xml
<?xml version="1.0" encoding="UTF-8"?>
<response>
  <original>This is bad</original>
  <cleaned>This is ****</cleaned>
</response>
```

***

#### **3. プレーンテキスト形式の出力**

**リクエスト**

```bash
curl "https://events-front.mixeder.net/v2/wordetect/?key=YOUR_API_KEY&text=Bad example&method=plain"
```

**レスポンス**

```
*** example
```

***

#### **4. 不適切単語検出 (containsprofanity モード)**

**リクエスト**

```bash
curl "https://events-front.mixeder.net/v2/wordetect/?key=YOUR_API_KEY&text=Bad words here&method=containsprofanity"
```

**レスポンス**

```json
"true"
```

***

#### **5. カスタムの追加単語と置換文字の指定**

**リクエスト**

```bash
curl "https://events-front.mixeder.net/v2/wordetect/?key=YOUR_API_KEY&text=Special bad words&add=special&fill_char=#&method=json"
```

**レスポンス**

```json
{
  "original": "Special bad words",
  "cleaned": "####### bad words"
}
```

***

#### **6. HTTPヘッダーでのAPIキー提供例**

**PHPサンプルコード**

```php
$apiUrl = "https://events-front.mixeder.net/v2/wordetect/";
$text = "This is inappropriate content.";
$headers = [
    "api-key: YOUR_API_KEY"
];

$options = [
    'http' => [
        'header' => implode("\r\n", $headers),
        'method' => 'GET',
        'content' => http_build_query(['text' => $text, 'method' => 'json'])
    ]
];

$context = stream_context_create($options);
$response = file_get_contents($apiUrl, false, $context);
echo $response;
```

***

#### **7. POSTメソッドの利用例**

**リクエスト**

```bash
curl -X POST "https://events-front.mixeder.net/v2/wordetect/" \
-H "Content-Type: application/x-www-form-urlencoded" \
-d "api-key=YOUR_API_KEY" \
-d "text=Some bad words here" \
-d "method=json"
```

**レスポンス**

```json
{
  "original": "Some bad words here",
  "cleaned": "Some *** words here"
}
```

***

### **エラーハンドリング**

#### **1. APIキーが未提供の場合**

```json
"API Key not provided."
```

#### **2. 無効なAPIキーの場合**

```json
"API key is wrong"
```

***

### **不適切単語の管理**

* **基本の不適切単語リスト**はMIXEDERによってリストされたベース学習リストから取得されます。
* **カスタム追加単語**は、`add` パラメータで指定します。\
  例: `&add=dummy,offensive`

***

### **まとめ**

このAPIは、不適切な表現の検出およびフィルタリングを効率的に行います。多彩な出力形式やカスタム単語の追加機能により、柔軟な対応が可能です。ぜひ、Profanity Detection and Cleaning APIを活用して、ユーザーフレンドリーなテキスト管理を実現してください。


# Similarity Determination API

以下は、APIキーのチェック機能を含めた類似度判定APIのリファレンスです。

***

**概要**

このAPIは、2つの単語の類似度を計算し、単語が同一かどうかと類似スコアを返します。APIの利用には有効なAPIキーが必要で、エンドポイントは `https://events-front.mixeder.net/v2/similar` です。APIキーはクエリパラメータ、POSTデータ、またはリクエストヘッダーから提供できます。

***

#### エンドポイント

```
GET /v2/similar
```

#### 認証

認証には、以下の方法でAPIキーを提供する必要があります。

1. **クエリパラメータ**: `?key=YOUR_API_KEY`
2. **POSTデータ**: `api-key=YOUR_API_KEY`
3. **ヘッダー**: `api-key: YOUR_API_KEY`

#### クエリパラメータ

| パラメータ   | 必須 | 説明                |
| ------- | -- | ----------------- |
| `word1` | はい | 比較したい最初の単語を指定します  |
| `word2` | はい | 比較したい2つ目の単語を指定します |
| `key`   | はい | APIキー             |

#### レスポンス

レスポンスはJSON形式で返され、以下の情報が含まれます。

| フィールド             | タイプ     | 説明                               |
| ----------------- | ------- | -------------------------------- |
| `isSame`          | boolean | `true` ならば `word1` と `word2` は同じ |
| `similarityScore` | float   | `0～100` の範囲で示される類似度スコア           |

#### 使用例

**1. 正しいAPIキーと単語を指定する場合**

リクエスト:

```http
GET https://events-front.mixeder.net/v2/similar?word1=hello&word2=halo&key=YOUR_API_KEY
```

レスポンス:

```json
{
    "isSame": false,
    "similarityScore": 75
}
```

**2. 無効なAPIキーの場合**

リクエスト:

```http
GET https://events-front.mixeder.net/v2/similar?word1=hello&word2=halo&key=INVALID_KEY
```

レスポンス:

```
API key is wrong
```

**3. APIキーが提供されていない場合**

リクエスト:

```http
GET https://events-front.mixeder.net/v2/similar?word1=hello&word2=world
```

レスポンス:

```
API Key not provided.
```

#### 使用上の注意

* APIキーが無効な場合にはエラーメッセージが返されます。

***

このAPIは、単語の比較や類似性のチェックを手軽に行うために設計されており、フィルタリング、データクレンジング、入力補完などの用途に活用可能です。


# API利用料金

| API名                                 | 料金（円）            |
| ------------------------------------ | ---------------- |
| ImageConvertAPI                      | 0.01円            |
| LocateAPI (スポンサーのみ提供)                | 0.01円            |
| NETRecordAPI                         | 0.03円            |
| WEBFetchAPI                          | 0.1円             |
| TimeZoneAPI                          | 0.001円           |
| WhoisAPI                             | 0.01円            |
| Profanity Detection and Cleaning API | 0.001円           |
| WebInfoAPI                           | 0.8円             |
| Similarity Determination API         | 0.0001円          |
| JSON Scalable Database (JSDB) API    | 0.001円(全てのアクション) |
| EventFront MAIL API                  | 0.05円            |

※請求機能は現在準備中のため、すべてのサービスが現在無料でご利用いただけます。


# CompanyResearchAPI

***

## 📘 法人番号情報取得API ドキュメント

### 📌 概要

このAPIは、日本の法人番号を入力すると、様々な情報を一元的にを取得し、法人の基本情報を返すサービスです。取得された情報はキャッシュされ、次回以降は高速に応答されます。

***

### 💰 利用料金

* **1リクエスト：5円（税込）**

***

### 🔗 エンドポイント

```
GET https://events-front.mixeder.net/v2/companyapi/?company={法人番号}
```

***

### 🔐 認証（オプション）

#### 認証

認証には、以下の方法でAPIキーを提供する必要があります。

1. **クエリパラメータ**: `?key=YOUR_API_KEY`
2. **POSTデータ**: `api-key=YOUR_API_KEY`
3. **ヘッダー**: `api-key: YOUR_API_KEY`

***

### 🧾 パラメータ

| パラメータ名 | 型      | 必須 | 説明       |
| ------ | ------ | -- | -------- |
| number | string | ✅  | 13桁の法人番号 |

***

### 📤 レスポンス例（JSON）

```
※JSONとして返答されるデータは
https://console.mixeder.net/studio/?category=enterdata&company=法人番号
こちらのURLでコンソールから確認することができます。
```

```json
{
  "status": "success",
  "cached": true,
  "last_updated": "2024-09-01",
  "number": "1234567890123",
  "name": "株式会社テスト",
  "address": "東京都千代田区丸の内１丁目",
  "kind": "株式会社",
  "google_results": [
    {
      "title": "株式会社テスト｜会社概要",
      "url": "https://www.example.com/about",
      "description": "株式会社テストの公式サイト。企業概要、サービス紹介、採用情報など。"
    },
    ...
  ]
}
```

***

***

### 🔄 ステータスコード

| ステータスコード | 内容         |
| -------- | ---------- |
| 200      | 正常取得成功     |
| 400      | リクエスト形式エラー |
| 404      | 該当する法人番号なし |
| 500      | サーバー内部エラー  |

***

### 🛠️ サンプルコード

#### 📌 JavaScript (fetch)

```javascript
async function getCorporateInfo(number) {
  const res = await fetch(`https://events-front.mixeder.net/v2/companyapi/?company=${number}`);
  const data = await res.json();
  console.log(data);
}
getCorporateInfo("1234567890123");
```

***

#### 🐍 Python (requests)

```python
import requests

number = "1234567890123"
res = requests.get(f"https://events-front.mixeder.net/v2/companyapi/?company={number}")
data = res.json()
print(data)
```

***

### 💡 ユースケース

#### ✅ 1. 顧客企業の正確な情報取得に

* 営業リストの整備
* クライアント情報の自動確認

#### ✅ 2. Webサービスの登録審査時に

* 登録時に法人番号を照合
* Google結果から不正・詐欺の兆候チェック

#### ✅ 3. 自社サービスへの連携

* データベース構築やBIツールへの連動
* 法人データの統一管理

***

### 🧾 利用上の注意

* 法人番号は必ず13桁で指定してください。

***

#### 掲載情報の修正・削除依頼

当サイトの掲載情報に関する修正・削除依頼はお願いいたします。

#### 掲載情報について

掲載情報は、以下の出典元の情報をもとに、EnterData独自が調査した情報を加えて作成しています。

<figure><img src="https://2154475259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAekuhKDtil6aRY6dFEMZ%2Fuploads%2Fne9MHxMNBmQD4TU65p8l%2Fimage.png?alt=media&amp;token=a81a495e-0ef0-4a6b-ab4b-6cce695467c3" alt=""><figcaption></figcaption></figure>

<br>


# JSON Scalable Database (JSDB) API

<figure><img src="https://2154475259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAekuhKDtil6aRY6dFEMZ%2Fuploads%2FlmHOWuuL4Opfhw6Pu9di%2F%E9%9D%92%E3%80%80%E3%83%9B%E3%83%AF%E3%82%A4%E3%83%88%E3%80%80%E4%BC%81%E6%A5%AD%E3%80%80%E4%BC%9A%E7%A4%BE%E3%80%80%E3%83%93%E3%82%B8%E3%83%8D%E3%82%B9%E3%80%80%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%80%80ZOOM%E8%83%8C%E6%99%AF.gif?alt=media&amp;token=c8765d6b-380a-40ae-b483-a32677383026" alt=""><figcaption></figcaption></figure>

JSON Scalable Database (JSDB) は、クエリパラメータ `key` で指定したJSONDBに対してデータの読み込み、追加、更新、削除を行うAPIです。各操作は `action` パラメータによって指定され、レスポンスはJSON形式で返されます。

以下は「JSON Scalable Database (JSDB)」の利用用途についての説明です。

***

## JSON Scalable Database (JSDB) 利用用途

JSON Scalable Database (JSDB) は、軽量でシンプルなAPIインターフェースを通じてデータの読み書きを行いたい場合に最適なツールです。以下のような用途でご利用いただけます。

1. **小規模データベースの代替**\
   小規模なデータセットをJSON形式で管理する場合、データベースサーバーやその設定を必要とせず、JSDBを用いることで、シンプルに読み書き操作を行うことが可能です。
2. **迅速なプロトタイピング**\
   アプリケーション開発の初期段階や試作において、ユーザーデータ、設定データ、ログなどの読み書き操作をJSDBで素早く実装でき、フロントエンドやバックエンドのテストを効率的に進められます。
3. **JSONデータの動的管理**\
   APIによりJSONデータを追加、更新、削除できるため、ファイルを手動で編集することなく、クエリによる自動化されたデータ操作を実現します。特定IDのデータ検索や部分的なデータ更新も可能であり、柔軟なデータ管理をサポートします。
4. **データ共有**\
   複数のアプリケーション間でJSONデータの同期が必要な場合や、クラウド環境でのデータ共有に役立ちます。JSDBを用いてJSONファイルのデータを簡単に取得し、他のシステムやサービスと連携させることが可能です。
5. **教育目的のデータストレージ**\
   学習管理システム（LMS）やその他の教育アプリケーションにおいて、学生情報、成績データ、課題データなどの情報を一時的に保存するためのストレージとして利用可能です。

このように、JSON Scalable Database (JSDB) は、データベースやバックエンドサーバーの導入が不要な軽量アプリケーションでのデータ管理や、アジャイルな開発のための仮データベースとして広く活用することができます。

APIキーを利用すると自動的にAPIキーに紐づけられたDBが生成されます。

### エンドポイント

```
https://events-front.mixeder.net/v2/jsdb
```

### パラメータ

| パラメータ    | 必須  | 説明                                                    |
| -------- | --- | ----------------------------------------------------- |
| `key`    | はい  | APIキー(JSONデータベースのIDとなります。)                            |
| `action` | いいえ | 実行する操作の種類。`read` (デフォルト)、`add`、`update`、`delete` から選択 |
| `id`     | いいえ | 更新や削除時に使用するデータID。`read` の場合に指定すると特定のデータのみ返却           |
| `data`   | いいえ | 追加や更新時に使用するJSON形式のデータ                                 |

### 操作一覧

#### 1. 読み込み (`read`)

JSONファイル全体、または特定のIDのデータを取得します。

* **リクエスト例**:

  ```plaintext
  GET https://events-front.mixeder.net/v2/jsdb?key=example&action=read
  GET https://events-front.mixeder.net/v2/jsdb?key=example&action=read&id=1
  ```
* **レスポンス例**:

  ```json
  [
    {"id": 0, "name": "Alice", "age": 25},
    {"id": 1, "name": "Bob", "age": 30}
  ]
  ```

  または、IDが指定された場合：

  ```json
  {"id": 1, "name": "Bob", "age": 30}
  ```

#### 2. 追加 (`add`)

新しいデータをJSONファイルに追加します。

* **リクエスト例**:

  ```plaintext
  GET https://events-front.mixeder.net/v2/jsdb?key=example&action=add&data={"name":"Charlie","age":28}
  ```
* **レスポンス例**:

  ```json
  {"success": "Data added successfully."}
  ```

#### 3. 更新 (`update`)

指定したIDのデータを新しいデータで更新します。

* **リクエスト例**:

  ```plaintext
  GET https://events-front.mixeder.net/v2/jsdb?key=example&action=update&id=1&data={"name":"Bob","age":32}
  ```
* **レスポンス例**:

  ```json
  {"success": "Data updated successfully."}
  ```

#### 4. 削除 (`delete`)

指定したIDのデータを削除します。

* **リクエスト例**:

  ```plaintext
  GET https://events-front.mixeder.net/v2/jsdb?key=example&action=delete&id=1
  ```
* **レスポンス例**:

  ```json
  {"success": "Data deleted successfully."}
  ```

### エラーレスポンス

* パラメータが不足している、または無効な場合は、以下のようにエラーメッセージが返されます。

```json
{"error": "Key parameter is missing."}
{"error": "Invalid URL."}
{"error": "ID or data missing for update."}
{"error": "Data not found."}
```

### サンプルコード

#### PHPコードサンプル

**1. JSONファイルから全データを取得する**

```php
<?php
$response = file_get_contents('https://events-front.mixeder.net/v2/jsdb?key=mydatabase&action=read');
$data = json_decode($response, true);
print_r($data);
```

**2. 新しいデータを追加する**

```php
$newData = json_encode(["name" => "John", "age" => 29]);
$response = file_get_contents("https://events-front.mixeder.net/v2/jsdb?key=mydatabase&action=add&data=" . urlencode($newData));
echo $response;
```

**3. 特定のデータを更新する**

```php
$updateData = json_encode(["name" => "Alice", "age" => 26]);
$response = file_get_contents("https://events-front.mixeder.net/v2/jsdb?key=mydatabase&action=update&id=0&data=" . urlencode($updateData));
echo $response;
```

**4. データを削除する**

```php
$response = file_get_contents("https://events-front.mixeder.net/v2/jsdb?key=mydatabase&action=delete&id=0");
echo $response;
```

#### 注意点

* `key`パラメータには、JSONファイル名を指定しますが、`.json`拡張子は不要です。
* `data`パラメータに渡すデータはJSON文字列にエンコードしてから、URLエンコードします。

***


# ログイン・サインインシステムのサンプル

{% hint style="info" %}
このコードは少人数(1～10000)程向けのユーザーに対応したログインシステムを想定しています。
{% endhint %}

**PHPとJSDB API** を利用したシンプルな**アカウント登録・ログインシステム**の実装例です。\
ユーザーのアカウント情報をJSDBに保存し、セッションを使ってログイン状態を管理します。

***

### ファイル構成

```
/auth_system
├── index.php        // ホームページ（ログイン後に表示）
├── login.php        // ログインページ
├── register.php     // サインアップ（アカウント登録）ページ
├── logout.php       // ログアウト処理
├── style.css        // 簡易スタイルシート（オプション）
└── functions.php    // APIやセッション管理を行う共通関数
```

***

### `functions.php` (共通関数)

```php
<?php
session_start();

$apiKey = "";  // APIで使用するデータベース名
$apiEndpoint = "https://events-front.mixeder.net/v2/jsdb";

// JSDBからユーザーを取得する関数
function getUsers() {
    global $apiKey, $apiEndpoint;
    $response = file_get_contents("$apiEndpoint?key=$apiKey&action=read");
    return json_decode($response, true) ?? [];
}

// 新しいユーザーをJSDBに保存する関数
function registerUser($username, $password) {
    global $apiKey, $apiEndpoint;
    $hashedPassword = password_hash($password, PASSWORD_BCRYPT);  // パスワードのハッシュ化
    $newUser = json_encode(["username" => $username, "password" => $hashedPassword]);

    $response = file_get_contents("$apiEndpoint?key=$apiKey&action=add&data=" . urlencode($newUser));
    return json_decode($response, true);
}

// ユーザーが存在するかを確認する関数
function findUser($username) {
    $users = getUsers();
    foreach ($users as $user) {
        if ($user['username'] === $username) {
            return $user;
        }
    }
    return null;
}

// ログイン状態を確認する関数
function isLoggedIn() {
    return isset($_SESSION['username']);
}
?>
```

***

### `register.php` (サインアップページ)

```php
<?php
require 'functions.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = $_POST['username'];
    $password = $_POST['password'];

    if (findUser($username)) {
        $error = "このユーザー名は既に使用されています。";
    } else {
        registerUser($username, $password);
        header('Location: login.php');
        exit();
    }
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サインアップ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>サインアップ</h1>
    <form method="POST">
        <input type="text" name="username" placeholder="ユーザー名" required>
        <input type="password" name="password" placeholder="パスワード" required>
        <button type="submit">登録</button>
    </form>
    <?php if (isset($error)) echo "<p>$error</p>"; ?>
    <a href="login.php">ログインはこちら</a>
</body>
</html>
```

***

### `login.php` (ログインページ)

```php
<?php
require 'functions.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = $_POST['username'];
    $password = $_POST['password'];
    $user = findUser($username);

    if ($user && password_verify($password, $user['password'])) {
        $_SESSION['username'] = $username;
        header('Location: index.php');
        exit();
    } else {
        $error = "ユーザー名またはパスワードが間違っています。";
    }
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ログイン</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>ログイン</h1>
    <form method="POST">
        <input type="text" name="username" placeholder="ユーザー名" required>
        <input type="password" name="password" placeholder="パスワード" required>
        <button type="submit">ログイン</button>
    </form>
    <?php if (isset($error)) echo "<p>$error</p>"; ?>
    <a href="register.php">アカウント登録はこちら</a>
</body>
</html>
```

***

### `index.php` (ホームページ)

```php
<?php
require 'functions.php';

if (!isLoggedIn()) {
    header('Location: login.php');
    exit();
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ホーム</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>ようこそ、<?= htmlspecialchars($_SESSION['username']) ?>さん！</h1>
    <a href="logout.php">ログアウト</a>
</body>
</html>
```

***

### `logout.php` (ログアウト処理)

```php
<?php
session_start();
session_destroy();
header('Location: login.php');
exit();
?>
```

***

### `style.css` (簡易スタイルシート)

```css
body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    margin-top: 50px;
}

input {
    margin: 10px;
    padding: 10px;
    width: 80%;
}

button {
    padding: 10px 20px;
    margin-top: 10px;
}

p {
    color: red;
}

a {
    display: block;
    margin-top: 20px;
}
```

***

### 説明

1. **アカウント登録** (`register.php`): ユーザー名とパスワードを登録し、JSDBに保存します。
2. **ログイン** (`login.php`): 登録済みのユーザー名とパスワードでログインし、セッションを開始します。
3. **ホームページ** (`index.php`): ログイン後、ユーザー名を表示するページです。
4. **ログアウト** (`logout.php`): セッションを破棄してログアウトします。

***

### 注意点

* **パスワードのハッシュ化**: `password_hash()` 関数でパスワードを安全に保存します。
* **JSDBのAPI**: ユーザーデータをJSON形式で管理するため、DBサーバーは不要です。
* **セッション管理**: PHPセッションでログイン状態を管理します。


# シンプルなメモ帳のサンプル

#### JSDB API を利用した PHP メモ帳サンプル

以下は、JSON Scalable Database (JSDB) API を活用したシンプルなメモ帳アプリケーションのサンプルコードです。PHP を使用して、メモの追加、表示、編集、削除が行えます。

***

### ファイル構成

```
/notepad
├── index.php      // メモ帳のUIと操作ページ
├── style.css      // 簡易スタイルシート（オプション）
```

***

### `index.php` (メインのPHPファイル)

```php
<?php
$apiKey = "";  // 使用するAPIのkey名（データベース名）
$apiEndpoint = "https://events-front.mixeder.net/v2/jsdb";

// メモ一覧を取得する関数
function getNotes() {
    global $apiKey, $apiEndpoint;
    $response = file_get_contents("$apiEndpoint?key=$apiKey&action=read");
    return json_decode($response, true) ?? [];
}

// メモを追加する関数
if (isset($_POST['add'])) {
    $newNote = json_encode(["text" => $_POST['note']]);
    file_get_contents("$apiEndpoint?key=$apiKey&action=add&data=" . urlencode($newNote));
    header("Location: index.php");
    exit();
}

// メモを削除する関数
if (isset($_GET['delete'])) {
    $id = $_GET['delete'];
    file_get_contents("$apiEndpoint?key=$apiKey&action=delete&id=$id");
    header("Location: index.php");
    exit();
}

// メモの更新
if (isset($_POST['update'])) {
    $id = $_POST['id'];
    $updatedNote = json_encode(["text" => $_POST['note']]);
    file_get_contents("$apiEndpoint?key=$apiKey&action=update&id=$id&data=" . urlencode($updatedNote));
    header("Location: index.php");
    exit();
}

// すべてのメモを取得
$notes = getNotes();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>メモ帳</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>メモ帳</h1>

    <!-- メモ追加フォーム -->
    <form method="POST">
        <textarea name="note" rows="3" placeholder="新しいメモを入力してください..." required></textarea>
        <button type="submit" name="add">追加</button>
    </form>

    <!-- メモ一覧表示 -->
    <ul>
        <?php foreach ($notes as $note): ?>
            <li>
                <form method="POST" style="display:inline;">
                    <input type="hidden" name="id" value="<?= $note['id'] ?>">
                    <input type="text" name="note" value="<?= htmlspecialchars($note['text']) ?>" required>
                    <button type="submit" name="update">更新</button>
                </form>
                <a href="?delete=<?= $note['id'] ?>" onclick="return confirm('このメモを削除しますか？')">削除</a>
            </li>
        <?php endforeach; ?>
    </ul>
</body>
</html>
```

***

### `style.css` (簡易スタイルシート)

```css
body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}

h1 {
    text-align: center;
}

form {
    margin-bottom: 10px;
}

textarea, input[type="text"] {
    width: 80%;
    margin-right: 5px;
    padding: 10px;
}

button {
    padding: 10px;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
```

***

### 説明

1. **メモの追加**: 新しいメモを入力して「追加」ボタンを押すと、JSDB API を通じてメモが保存されます。
2. **メモの表示**: すべてのメモはリスト形式で表示され、各メモには更新フォームと削除リンクがあります。
3. **メモの更新**: 各メモのテキストを変更し、「更新」ボタンを押すと、JSDB API を使用してその内容が更新されます。
4. **メモの削除**: 削除リンクを押すと、メモが削除されます。

***

### 注意点

* **APIのkey** (`$apiKey`) は一意のものを使用してください。
* APIエンドポイントが有効であることを確認してください。
* `data` パラメータは **JSONエンコード** および **URLエンコード** が必要です。

***

このサンプルを使えば、JSDB API を使った軽量なメモ帳アプリをすぐに構築できます。


# JSDB V1とV2の相違点

#### 1. **エンドポイント URL**

* **1つ目**: `https://events-front.mixeder.net/v2/jsdb`
* **2つ目**: `https://events-front.mixeder.net/v2/jsdbv2`

#### 2. **HTTPメソッド**

* **1つ目**: `GET` のみでリクエスト
* **2つ目**: `GET` と `POST` の両方をサポート（アクションによって使い分け）

#### 3. **データ管理方法**

* **1つ目**: データのIDを手動で指定（更新・削除時に指定）
* **2つ目**: 自動的に連番のIDが付与される（追加時）

#### 4. **パラメータ**

* **1つ目**: `action`, `key`, `id`, `data` の4つのパラメータ
* **2つ目**: `action`, `key`, `id`, `data` の4つのパラメータだが、`POST` メソッドでも使用可能。`data` と `id` が条件付きで使用。

#### 5. **レスポンス**

* **1つ目**: レスポンスは基本的にJSON形式で全データ、または特定のIDを返却
* **2つ目**: レスポンスはJSON形式だが、全データ取得時は `{ "ID": { ... } }` 形式で、特定のID取得時はそのデータの内容のみを返す

#### 6. **エラーレスポンス**

* **1つ目**: `Key parameter is missing` や `Invalid URL` など
* **2つ目**: 400や404ステータスコードで、具体的なエラーメッセージ（例: `Invalid action specified`, `Key parameter is missing`）

#### 7. **アクションのデフォルト**

* **1つ目**: `action=read` がデフォルト
* **2つ目**: `action=read` がデフォルトだが、`GET` でのリクエストも `POST` でのリクエストも可能

#### 8. **データの保存**

* **1つ目**: 指定された `key` に対応するJSONファイルにデータを保存
* **2つ目**: 指定された `key` に対応するJSONファイルにデータを保存。データが存在しない場合、新しい空のファイルが自動で作成される

#### 9. **レスポンス例**

* **1つ目**: レスポンスが直接的に成功メッセージ（例: `{ "success": "Data added successfully." }`）
* **2つ目**: レスポンスにID情報が含まれることがあり、追加時の成功レスポンスにID（例: `{ "success": "Data added successfully.", "id": 3 }`）

### **APIの違い（表形式）**

| 項目           | jsdb                            | jsdbv2                              |
| ------------ | ------------------------------- | ----------------------------------- |
| **エンドポイント**  | `/v2/jsdb`                      | `/v2/jsdbv2`                        |
| **対応メソッド**   | GET のみ                          | GET / POST 両方対応                     |
| **データの追加**   | IDを手動で指定                        | IDが自動で連番管理される                       |
| **レスポンス形式**  | 配列 `[ {id: 1, name: "Alice"} ]` | オブジェクト `{ "1": { name: "Alice" } }` |
| **エラー処理**    | 文字列メッセージのみ                      | HTTPステータスコード+詳細なエラーJSON             |
| **データがない場合** | `{"error": "Data not found."}`  | 空のJSONファイルが自動作成される                  |

#### `jsdb` と `jsdbv2` の違いと特徴

現在、`https://events-front.mixeder.net/v2/` では **`jsdb`** と **`jsdbv2`** という2つのJSONデータ管理APIが提供されています。\
この2つのAPIは基本的な目的は同じですが、仕様やデータの管理方法に違いがあります。\
ここでは、それぞれのAPIの違いを詳しく説明します。

***

### **1. エンドポイントの違い**

APIのベースURLは同じですが、アクセスするエンドポイントが異なります。

* **`jsdb`** → `https://events-front.mixeder.net/v2/jsdb`
* **`jsdbv2`** → `https://events-front.mixeder.net/v2/jsdbv2`

**`jsdbv2` は `jsdb` の改良版** であり、新しい機能やより柔軟なデータ管理が可能になっています。

***

### **2. リクエスト方法の違い**

* **`jsdb`** は **GETメソッドのみ対応** しており、データの取得専用です。
* **`jsdbv2`** は **GETとPOSTの両方** に対応しており、新しいデータの追加が可能です。

`jsdb` ではデータの追加や更新ができないため、データを変更したい場合は別の方法が必要になります。\
一方、`jsdbv2` では **POSTリクエストを使用することで、データを新規追加することができます。**

***

### **3. データ管理の違い**

#### **jsdb の場合**

データを取得する際には **データIDを明示的に指定** する必要があります。\
例えば、特定のIDのデータを取得する場合は、以下のようなリクエストになります。

```
bashコピーする編集するGET /v2/jsdb?id=1
```

#### **jsdbv2 の場合**

データを追加すると、**IDが自動的に付与** されます。\
IDは1からの連番になり、ユーザーが手動で指定する必要はありません。\
これはデータの一貫性を保つのに役立ちます。

***

### **4. レスポンス形式の違い**

#### **jsdb のレスポンス**

`jsdb` のデータ取得時のレスポンスは **配列形式** になっています。\
例えば、ID 1 のデータを取得すると、以下のようなレスポンスが返されます。

```json
jsonコピーする編集する[
  { "id": 1, "name": "Alice" }
]
```

#### **jsdbv2 のレスポンス**

`jsdbv2` のレスポンスは **オブジェクト形式** になっており、IDがキーとして扱われます。\
例えば、データを取得すると以下のようなレスポンスになります。

```json
jsonコピーする編集する{
  "1": { "name": "Alice" }
}
```

この形式では、データを簡単に検索・管理しやすくなります。

***

### **5. エラーハンドリングの違い**

#### **jsdb のエラーハンドリング**

`jsdb` はエラーが発生した際、シンプルな文字列メッセージを返します。\
例えば、データが存在しない場合、以下のようなレスポンスになります。

```json
jsonコピーする編集する{ "error": "Data not found." }
```

#### **jsdbv2 のエラーハンドリング**

`jsdbv2` は **HTTPステータスコード** と **詳細なエラーメッセージ** を返します。\
例えば、リクエストが不正だった場合、以下のようなレスポンスが返されます。

```json
jsonコピーする編集する{
  "status": 400,
  "message": "Invalid request."
}
```

この違いにより、`jsdbv2` の方がエラー処理がしやすく、APIの利用時にトラブルが発生した際に原因を特定しやすくなっています。

***

### **6. データが存在しない場合の挙動の違い**

* **`jsdb`** では、データが存在しない場合に `"error": "Data not found."` のエラーメッセージを返します。
* **`jsdbv2`** では、データが存在しない場合でも空のJSONオブジェクト `{}` が返され、新しいデータが追加される際に自動的にJSONファイルが作成されます。

### **まとめ**

**`jsdbv2` は `jsdb` の改良版** であり、以下のような利点があります。\
✅ **データの追加が簡単に可能（POST対応）**\
✅ **IDが自動管理される（手動指定不要）**\
✅ **エラーハンドリングが詳細化**\
✅ **データのレスポンスがオブジェクト形式で扱いやすい**

一方で、**シンプルなデータ取得のみが必要な場合は、`jsdb` でも十分に利用できます。**\
どちらのAPIを使用するかは、プロジェクトの要件に応じて選択するとよいでしょう。


# JSON Database API V2

APIエンドポイント: `https://events-front.mixeder.net/v2/jsdbv2`

### 概要

このAPIは、JSONデータベースに対するCRUD操作（読み込み、追加、更新、削除）を提供します。連番を自動的に管理し、簡単にデータを操作できます。

***

### リクエスト形式

* ベースURL: `https://events-front.mixeder.net/v2/jsdbv2`
* メソッド: `GET` / `POST`（アクションによる）

### 共通パラメータ

| パラメータ名   | 必須   | 説明                       |
| -------- | ---- | ------------------------ |
| `key`    | はい   | JSONファイルを特定するためのキー       |
| `action` | いいえ  | 実行するアクション（デフォルト: `read`） |
| `id`     | 条件付き | 特定のデータを指定するID（更新/削除時に必要） |
| `data`   | 条件付き | JSON形式のデータ（追加/更新時に必要）    |

***

### エンドポイントの詳細

#### 1. データの取得 (Read)

* **概要**: 指定されたJSONデータを取得します。
* **HTTPメソッド**: `GET`
* **リクエスト例**:

  ```
  GET /v2/jsdbv2?key=mydata&action=read
  ```

  特定IDの取得:

  ```
  GET /v2/jsdbv2?key=mydata&action=read&id=1
  ```
* **レスポンス例**（全データ取得時）:

  ```json
  {
      "1": { "name": "Item 1", "price": 100 },
      "2": { "name": "Item 2", "price": 200 }
  }
  ```
* **レスポンス例**（特定ID取得時）:

  ```json
  {
      "name": "Item 1",
      "price": 100
  }
  ```

***

#### 2. データの追加 (Add)

* **概要**: 新しいデータを追加し、自動連番のIDを付与します。
* **HTTPメソッド**: `GET` or `POST`
* **リクエスト例**:

  ```
  POST /v2/jsdbv2?key=mydata&action=add&data={"name":"Item 3","price":300}
  ```
* **レスポンス例**:

  ```json
  {
      "success": "Data added successfully.",
      "id": 3
  }
  ```

***

#### 3. データの更新 (Update)

* **概要**: 特定のIDを指定してデータを更新します。
* **HTTPメソッド**: `GET` or `POST`
* **リクエスト例**:

  ```
  POST /v2/jsdbv2?key=mydata&action=update&id=1&data={"name":"Updated Item","price":150}
  ```
* **レスポンス例**:

  ```json
  {
      "success": "Data updated successfully."
  }
  ```

***

#### 4. データの削除 (Delete)

* **概要**: 特定のIDを指定してデータを削除します。
* **HTTPメソッド**: `GET` or `POST`
* **リクエスト例**:

  ```
  POST /v2/jsdbv2?key=mydata&action=delete&id=1
  ```
* **レスポンス例**:

  ```json
  {
      "success": "Data deleted successfully."
  }
  ```

***

### エラーレスポンス

<table><thead><tr><th>ステータスコード</th><th>メッセージ</th><th width="199">説明</th></tr></thead><tbody><tr><td>400</td><td><code>{"error": "Invalid action specified."}</code></td><td>不正なアクションが指定された場合</td></tr><tr><td>400</td><td><code>{"error": "Key parameter is missing."}</code></td><td><code>key</code> パラメータが不足している場合</td></tr><tr><td>404</td><td><code>{"error": "Data not found."}</code></td><td>指定されたIDのデータが存在しない場合</td></tr><tr><td>400</td><td><code>{"error": "Invalid data format."}</code></td><td>提供されたデータ形式が不正な場合</td></tr></tbody></table>

***

### 注意事項

1. データは指定された `key` を基にJSONファイルとして保存されます。
2. データが存在しない場合、APIは自動で空のJSONファイルを作成します。
3. データのインデックスは1から始まり、連番で自動管理されます。

***

これでAPIの仕様が明確に伝わるはずです！他に追加情報が必要であれば教えてください。


# JSONDB Login System (Node.js)

This is a simple login and signup system using Node.js and the JSONDB API. It allows users to sign up, sign in, and access a user-specific dashboard. User data is stored and retrieved using the JSONDB API.

### Project Structure

```
/               # Root directory
|-- index.js    # Node.js server code
|-- index.html  # Landing page
|-- signin.html # Login page
|-- signup.html # Signup page
|-- public/     
    |-- app.html  # Dashboard for logged-in users
```

### Endpoints

#### 1. `/`

**Method**: GET\
Serves the landing page.

#### 2. `/signin`

**Method**: GET\
Serves the login page.

**Method**: POST\
Processes login requests. Authenticates the user by comparing the provided credentials with the data stored in JSONDB.

#### 3. `/signup`

**Method**: GET\
Serves the signup page.

**Method**: POST\
Processes signup requests. Checks if the username already exists, and if not, registers a new user in JSONDB.

#### 4. `/app`

**Method**: GET\
Serves the dashboard page for logged-in users. Requires authentication. Displays the logged-in username.

#### 5. `/logout`

**Method**: GET\
Logs out the user by destroying their session.

***

### Code Overview

#### **`index.js`** (Node.js server)

The main server script manages the routes and handles interactions with the JSONDB API.

Key Features:

* **Session management** using `express-session`.
* **Static file serving** for HTML files.
* **User authentication and registration** integrated with JSONDB.

#### **`index.html`** (Landing Page)

A basic welcome page with navigation links to the login and signup pages.

#### **`signin.html`** (Login Page)

Form for user login. Sends a POST request to the `/signin` endpoint.

#### **`signup.html`** (Signup Page)

Form for user registration. Sends a POST request to the `/signup` endpoint.

#### **`app.html`** (User Dashboard)

Displays a personalized greeting with the logged-in username. Includes a logout link to end the session.

***

### How to Run

1. **Install dependencies**:

   ```bash
   npm install express body-parser axios express-session
   ```
2. **Run the server**:

   ```bash
   node index.js
   ```
3. **Access the application**: Open your browser and navigate to `http://localhost:3000`.

***

### File Contents

#### **`index.js`**

```javascript

const express = require('express');
const bodyParser = require('body-parser');
const axios = require('axios');
const path = require('path');
const session = require('express-session');

const app = express();
const PORT = 3000;
const JSONDB_API = 'https://events-front.mixeder.net/v2/jsdbv2';
const JSONDB_KEY = 'YOUR_Public_API_KEY';

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(session({
    secret: 'your-secret-key',
    resave: false,
    saveUninitialized: true,
}));

// Serve static files
app.use(express.static(path.join(__dirname, 'public')));

// Landing page
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
});

// Login page
app.get('/signin', (req, res) => {
    res.sendFile(path.join(__dirname, 'signin.html'));
});

// Signup page
app.get('/signup', (req, res) => {
    res.sendFile(path.join(__dirname, 'signup.html'));
});

// User dashboard (protected)
app.get('/app', (req, res) => {
    if (!req.session.user) {
        return res.redirect('/signin');
    }
    res.sendFile(path.join(__dirname, 'public', 'app.html'));
});

// Handle signup
app.post('/signup', async (req, res) => {
    const { username, password } = req.body;
    try {
        // Check if username already exists
        const response = await axios.get(`${JSONDB_API}?key=${JSONDB_KEY}&action=read`);
        const users = response.data;

        if (Object.values(users).some(user => user.username === username)) {
            return res.status(400).send('Username already exists.');
        }

        // Add new user
        const newUser = { username, password };
        await axios.get(`${JSONDB_API}?key=${JSONDB_KEY}&action=add&data=${encodeURIComponent(JSON.stringify(newUser))}`);

        res.redirect('/signin');
    } catch (error) {
        console.error(error);
        res.status(500).send('Error during signup.');
    }
});

// Handle signin
app.post('/signin', async (req, res) => {
    const { username, password } = req.body;
    try {
        // Retrieve user data
        const response = await axios.get(`${JSONDB_API}?key=${JSONDB_KEY}&action=read`);
        const users = response.data;

        const user = Object.values(users).find(user => user.username === username && user.password === password);
        if (user) {
            req.session.user = user;
            res.redirect('/app');
        } else {
            res.status(401).send('Invalid username or password.');
        }
    } catch (error) {
        console.error(error);
        res.status(500).send('Error during signin.');
    }
});

// Logout
app.get('/logout', (req, res) => {
    req.session.destroy();
    res.redirect('/');
});

app.listen(PORT, () => {
    console.log(`Server is running at http://localhost:${PORT}`);
});

```

#### **`index.html`**

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome</title>
</head>
<body>
    <h1>Welcome to the JSONDB Login System</h1>
    <a href="/signin">Sign In</a> | <a href="/signup">Sign Up</a>
</body>
</html>
```

#### **`signin.html`**

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign In</title>
</head>
<body>
    <h1>Sign In</h1>
    <form action="/signin" method="POST">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">Sign In</button>
    </form>
    <a href="/">Back to Home</a>
</body>
</html>
```

#### **`signup.html`**

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up</title>
</head>
<body>
    <h1>Sign Up</h1>
    <form action="/signup" method="POST">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">Sign Up</button>
    </form>
    <a href="/">Back to Home</a>
</body>
</html>
```

#### **`app.html`**

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Dashboard</title>
</head>
<body>
    <h1>Welcome, <span id="username"></span>!</h1>
    <p>You are logged in.</p>
    <a href="/logout">Log Out</a>
    <script>
        fetch('/session-user').then(res => res.json()).then(data => {
            document.getElementById('username').textContent = data.username || 'User';
        }).catch(() => {
            document.getElementById('username').textContent = 'User';
        });
    </script>
</body>
</html>
```

***

### Download

{% file src="/files/je9aipVmmzw42a2GTSFh" %}

This code is sample code and may lack API key management and back-end processing. Therefore, please use at your own risk.


# JSONDB管理アプリの紹介

JSONDBV2の管理は\
<https://events-front.mixeder.net/playground/jsondbv2/>

こちらのアプリにAPIキーを入力していただくことでデータを変更することができます。\
料金はJsonDBv2の利用料金のみ発生し、追加の費用は掛かりません。

<figure><img src="https://2154475259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAekuhKDtil6aRY6dFEMZ%2Fuploads%2FudAvaFhJ2GZXWRgFTs4e%2Fimage.png?alt=media&amp;token=2fde34e1-e878-41f3-9e8d-b9d7bb70b417" alt=""><figcaption></figcaption></figure>

項目名は名前、著者、内容、更新日時と指定されています。(そのほかの項目で利用したい場合はAPIをご利用下さい)

コーポレートサイトやブログサイト、ウェブサイトのアクセス計測、URL短縮などで御利用ください。


# EventFront MAIL API ドキュメント

### 概要

EventFront MAIL API は、メールアドレスが個人メールプロバイダーのものかを判定するAPIです。API認証を行い、リクエストされたメールアドレスのドメインが個人向けのものかを確認します。

100リクエスト当たり5円の利用料がかかります。

### エンドポイント

```
https://events-front.mixeder.net/v1/mail/
```

### 認証方式

このAPIを利用するには、APIキーが必要です。APIキーは以下のいずれかの方法で送信できます。

1. **GET パラメータ**: `?key=YOUR_API_KEY`
2. **POST パラメータ**: `api-key=YOUR_API_KEY`
3. **HTTP ヘッダー**: `api-key: YOUR_API_KEY`

### リクエスト形式

#### **POST リクエスト**

```
POST /v1/mail/ HTTP/1.1
Host: events-front.mixeder.net
Content-Type: application/x-www-form-urlencoded
api-key: YOUR_API_KEY

mail=user@example.com
```

#### **GET リクエスト (APIキーのみ確認用)**

```
GET /v1/mail/?key=YOUR_API_KEY HTTP/1.1
Host: events-front.mixeder.net
```

### レスポンス形式

| フィールド         | 型      | 説明                           |
| ------------- | ------ | ---------------------------- |
| `email`       | string | 確認対象のメールアドレス                 |
| `is_personal` | bool   | `true`なら個人メール、`false`なら企業メール |
| `error`       | string | エラー時のメッセージ (オプション)           |

#### **成功時のレスポンス例**

```
{
    "email": "user@gmail.com",
    "is_personal": true
}
```

```
{
    "email": "user@company.com",
    "is_personal": false
}
```

#### **エラー時のレスポンス例**

```
{
    "error": "Invalid email address"
}
```

```
{
    "error": "API key is missing"
}
```

### 導入事例・利用ケース

#### **1. ユーザー登録時のメールドメイン確認**

ユーザー登録フォームで、個人メールアドレスの利用を制限するために活用できます。

#### **2. 企業向けサービスのドメインフィルタリング**

企業メールのみ登録可能なサービスの実装に利用できます。

#### **3. メール分類システムの構築**

受信したメールアドレスを分類する用途で使用できます。

### サンプルコード

#### **PHP (file\_get\_contents 使用)**

```php
<?php
$url = 'https://events-front.mixeder.net/v1/mail/';
$apiKey = 'YOUR_API_KEY';
$mail = 'user@example.com';

$data = [
    'mail' => $mail
];

$options = [
    'http' => [
        'header'  => "Content-Type: application/x-www-form-urlencoded\r\n" .
                     "api-key: $apiKey\r\n",
        'method'  => 'POST',
        'content' => http_build_query($data)
    ]
];

$context  = stream_context_create($options);
$response = file_get_contents($url, false, $context);

if ($response === FALSE) {
    die('Error accessing API');
}

echo $response;
```

#### **PHP (cURL 使用)**

```php
<?php
$url = 'https://events-front.mixeder.net/v1/mail/';
$apiKey = 'YOUR_API_KEY';
$mail = 'user@example.com';

$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(['mail' => $mail]));
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Content-Type: application/x-www-form-urlencoded',
    'api-key: ' . $apiKey
]);

$response = curl_exec($ch);
curl_close($ch);

if ($response === FALSE) {
    die('Error accessing API');
}

echo $response;
```

#### **Python (requests 使用)**

```python
import requests

url = 'https://events-front.mixeder.net/v1/mail/'
api_key = 'YOUR_API_KEY'
mail = 'user@example.com'

headers = {
    'Content-Type': 'application/x-www-form-urlencoded',
    'api-key': api_key
}

data = {
    'mail': mail
}

response = requests.post(url, headers=headers, data=data)

if response.status_code == 200:
    print(response.json())
else:
    print(f"Error: {response.status_code}")
```

### 備考

* APIキーは第三者に漏れないようにしてください。
* APIの利用制限や料金プランについては、管理者にお問い合わせください。
* メールドメインリストは定期的に更新されるため、常に最新のリストを参照してください。


# (ベータ版)EventFront SQL Speed Storage

## 📘 EventFront SQL Speed Storage 利用ガイド

EventFront SQL Speed Storageを使ってデータベース操作が行える軽量サーバーです。\
ポート `3307` を通じてMySQLクライアントから接続できます。

***

### 🚪 接続情報

* **ホスト**：sql-speed-ja.mixedercloud.com
* **ポート**：3307
* **ユーザー名**：APIキー
* **パスワード**：なし
* **データベース名**：指定不要（無視されます）

***

### ✅ サポートされるSQL文

| 機能    | 文法例                                                      |
| ----- | -------------------------------------------------------- |
| データ取得 | `SELECT * FROM users`                                    |
| 条件検索  | `SELECT * FROM users WHERE age > 20 AND gender = 'male'` |
| 並び替え  | `SELECT * FROM users ORDER BY age DESC`                  |
| 件数制限  | `SELECT * FROM users LIMIT 10 OFFSET 5`                  |
| データ追加 | `INSERT INTO users (name, age) VALUES ('Alice', 22)`     |
| データ更新 | `UPDATE users SET age = 23 WHERE id = 1`                 |
| データ削除 | `DELETE FROM users WHERE id = 1`                         |

***

### ❌ 非対応のSQL機能と代替案

| 機能                    | 状況  | 代替方法・備考                                     |
| --------------------- | --- | ------------------------------------------- |
| `JOIN`                | 非対応 | 各テーブルを個別に読み込んで結合処理はクライアント側で実装               |
| `GROUP BY`            | 非対応 | クライアント側でデータ集計（例：`Array.prototype.reduce()`） |
| `HAVING`              | 非対応 | 同上                                          |
| `LIKE`                | 非対応 | クライアント側で部分一致チェック（`includes`, `match`等）      |
| `IN`, `BETWEEN`       | 非対応 | WHEREを工夫しクライアント側でフィルタリング                    |
| 複数行INSERT             | 非対応 | 1行ずつINSERTを繰り返す                             |
| `CREATE TABLE` 等      | 非対応 | 最初のINSERT時に自動でテーブルが生成されます                   |
| `Prepared Statements` | 非対応 | 入力値の整形・エスケープはクライアント側で実装                     |
| トランザクション              | 非対応 | 同時更新やロールバックはサポートしていません                      |

***

### 🧠 WHERE条件の詳細

* `AND`, `OR` の複雑な組み合わせに対応（※ただし括弧によるグルーピングは非対応）
* 使用可能な比較演算子：
  * `=`, `!=`, `<`, `>`, `<=`, `>=`

```sql
sqlCopyEditSELECT * FROM users WHERE age >= 18 AND gender = 'male' OR name = 'Alice';
```

***

### 🖥 GUIでの接続方法（DBeaver, HeidiSQL, TablePlusなど）

1. **新しい接続を作成**
2. **MySQL** を選択
3. **ホスト**：`localhost`
4. **ポート**：`3307`
5. **ユーザー名**：`root`（任意）
6. **パスワード**：空白でOK
7. データベース名は空でも可。必要に応じて仮の名前を入力

> ✅ 注意：EventFront SQL Speed StorageはSQL互換のチューニングサーバーのため、`SHOW TABLES` や `DESCRIBE` 等のメタ情報取得コマンドは使えません。

***

### 💻 各言語での接続サンプル

#### Node.js（mysql2）

```bash
bashCopyEditnpm install mysql2
```

```js
jsCopyEditconst mysql = require("mysql2/promise");

(async () => {
  const conn = await mysql.createConnection({ host: "localhost", port: 3307, user: "root" });

  const [rows] = await conn.query("SELECT * FROM users WHERE age >= 20 ORDER BY age DESC LIMIT 10");
  console.log(rows);

  await conn.end();
})();
```

***

#### Python（mysql-connector-python）

```bash
bashCopyEditpip install mysql-connector-python
```

```python
pythonCopyEditimport mysql.connector

conn = mysql.connector.connect(
    host="localhost",
    port=3307,
    user="root"
)
cursor = conn.cursor(dictionary=True)

cursor.execute("SELECT * FROM users WHERE age >= 18")
for row in cursor.fetchall():
    print(row)

conn.close()
```

***

#### PHP（PDO）

```php
phpCopyEdit<?php
$pdo = new PDO('mysql:host=127.0.0.1;port=3307;', 'root', '');

$stmt = $pdo->query("SELECT * FROM users WHERE gender = 'female'");
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

foreach ($rows as $row) {
  echo $row['name'] . "（" . $row['age'] . "歳）<br>";
}
?>
```

***

#### Java（JDBC）

```java
javaCopyEditimport java.sql.*;

public class App {
  public static void main(String[] args) throws Exception {
    Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3307/", "root", "");
    Statement stmt = conn.createStatement();
    ResultSet rs = stmt.executeQuery("SELECT * FROM users");

    while (rs.next()) {
      System.out.println(rs.getString("name") + " - " + rs.getInt("age"));
    }

    conn.close();
  }
}
```

***

#### C#（.NET + MySql.Data）

```csharp
csharpCopyEditusing MySql.Data.MySqlClient;

var conn = new MySqlConnection("server=localhost;port=3307;user=root;");
conn.Open();

var cmd = new MySqlCommand("SELECT * FROM users", conn);
var reader = cmd.ExecuteReader();
while (reader.Read())
{
    Console.WriteLine($"{reader["name"]} ({reader["age"]})");
}

conn.Close();
```

***

### 💡 ヒント：未対応機能の代替処理

| SQL未対応機能   | 代替手段（クライアント側）                                           |
| ---------- | ------------------------------------------------------- |
| `JOIN`     | 複数回SELECTしてロジックで結合（マッチするIDを手動で照合）                       |
| `GROUP BY` | `Array.reduce()` や `groupby`でクライアント側集計                  |
| `LIKE`     | `includes`, `match`, `RegExp` を用いた文字列部分一致検索             |
| `IN (...)` | `WHERE column = x OR column = y OR ...` または `.filter()` |

***

### 📞 サポート

* 不明点・バグ報告・新機能の要望などは開発者までお問い合わせください。
* EventFront SQL Speed Storageはベータ版のため、高負荷環境や複数同時接続には向きません。

***

### 📦 補足

* 一般的なSQLサーバーよりも高い負荷に対応したサーバーです。
* 管理者がテーブル構造をあらかじめ定義しなくても使用可能です。


# TINYTOOLSAPIについて

<figure><img src="https://2154475259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAekuhKDtil6aRY6dFEMZ%2Fuploads%2FVM5ZTxHTtPa40y1SyyQ7%2F%E9%9D%92%E3%81%A8%E7%99%BD%E3%80%80%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%80%80%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AA%E3%82%AA%E3%80%80%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E3%83%86%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3.png?alt=media&amp;token=68a9a59a-1b77-4de5-8ba2-58a84364e2e6" alt=""><figcaption></figcaption></figure>

TINYTOOLSAPIはシンプル、安全、高速を実現するAPIサービスです。

様々なカテゴリで多種多様なビジネスに対応するAPIを公開予定です。

また、TINYTOOLSAPI for Enterpriceでは貴社のサービスにフィットするAPIを依頼することが可能です。開発から保守までを一括してサポートするため、可用性、安全性を高めることができます。


# TINYTOOLSAPI for Enterpriceについて(英語)

<figure><img src="https://2154475259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAekuhKDtil6aRY6dFEMZ%2Fuploads%2FHBaGrN5ZKXu1INsvrq8p%2F1.png?alt=media&amp;token=9ab3f56a-877b-42a3-a290-9f5e67b69dae" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2154475259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAekuhKDtil6aRY6dFEMZ%2Fuploads%2Fr93aSiauz8P77XG4zrk8%2F2.png?alt=media&amp;token=ed1ab7b1-51c0-4f9b-b8bb-7433626c8f58" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2154475259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAekuhKDtil6aRY6dFEMZ%2Fuploads%2Fr5MqvzNKZrlLLvZWb2d3%2F3.png?alt=media&amp;token=b8a6512a-20ed-489b-85ff-a5390b148fd0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2154475259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAekuhKDtil6aRY6dFEMZ%2Fuploads%2FzM10GVfi0un35z4CrpdY%2F4.png?alt=media&amp;token=a132cc9d-59c0-455e-9760-fef67a7e498d" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you have any question, feel free to ask us!&#x20;

Mail: <tinytoolsapi@devsupport.mixeder.net>
{% endhint %}


# How to configure MTM(Mixeder Traffic Manager) with MixederWaterStorage

## Step 1 - Creating a MTM CI

{% embed url="<https://dashboard.mixeder.net/studio/?category=traffic-manager>" %}

Access the MTM Console from the link provided above.

![](https://2154475259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAekuhKDtil6aRY6dFEMZ%2Fuploads%2F9KhEkVsUVca27mDAFc39%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-20%20211301.png?alt=media\&token=bafc37cc-44e1-4250-9d50-de72592a9c4f)

Click the blue (Create CI) button to create a CI.

Set the access origin to MixederWaterStorage. By selecting MixederWaterStorage, the images stored in the MWS of your MixederCloudID will be output to MTM.

When the CI creation is complete (WZUEHHUBOD), an MTM CIID is generated. Please note down the MTM CIID as you will need it later!

## Step 2 - Using Mixeder Access API

Use MTM to access MWS files.

First, access the MTM Access API Base URL in your browser.

{% embed url="<https://msp.mixeder.net/mtm/>" %}

Access and specify the CIID obtained earlier in the query string in (ciid) and the file name of the MWS image to be accessed in (content) (e.g., MWS\_56ce634a961d935a66e51d54113648f3), and the image will be output. Unlike MWS public access, it is possible to change the error image output in the event of an error on a CI-by-CI basis and to change access settings in real time.

{% embed url="<https://msp.mixeder.net/mtm/?ciid=WZUEHHUBOD&content=MWS_56ce634a961d935a66e51d54113648f3>" %}


# VMC Machine specs per plan

![](https://2154475259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAekuhKDtil6aRY6dFEMZ%2Fuploads%2FOjsPyVOueTPUS1gUN5aX%2FBlue%20And%20Pink%20Simple%20Weekly%20Pricing%20Table%20.png?alt=media\&token=c24c7147-d28d-4dba-b637-2b1f18085a3e)


# MIXEDER ISSHとは？

MixederISSHとはMIXEDERが運営するレンタルサーバーサービスです。

パブリッククラウドの可用性、スケーラビリティとレンタルサーバーの可用性とわかりやすいUI、安価な料金を兼ね備えたサービスです。

**特徴**

* 1時間ごとに課金される時間制(後払い料金や隠れた契約などは存在しません)
* わかりやすいコントロールパネルとファイルマネージャー
* 再販業者やプロバイダーも利用しやすいような管理コンソール
* ファイル容量が10GBを超えるか、帯域幅が10GBを超えない限り時間料金のみで利用する事ができます。
* PHPファイルも利用可能(HighSpeedプランから)


# 開発者向けAPIの公開について

{% hint style="info" %}
**MixederGroupでは現在、MixederCloudServiceのサービス、プロダクトを包括的にアクセスできるAPIプラットフォームを構築しています。**

提供には数年ほどかかる見込みとなっております。

現在、MTMやMSなどのパブリックAPIには認証なしにアクセスすることはできます。
{% endhint %}

## :thumbsup:


# MixederIAM(Permissions)

## IAM Permissions list


# MixederCloudのサービス料金・お支払サイクルについて

MixederCloudの利用料金はすべて従量課金制で行われます。利用した分のみのお支払いになるため、サービスを利用しない場合の利用料金を節約できます。

| Service                       | Rate  |
| ----------------------------- | ----- |
| MixederPaper                  | 0.1   |
| MixederVideo                  | 0.1   |
| MixederWaterStorage           | 0.04  |
| MixederADM                    | 0     |
| GrapesRealtimeStreaming       | 1000  |
| MixederPublicAPI(APIキーの作成、変更) | 5     |
| CodeShareLeap                 | 10    |
| MixederTrafficManager         | 0.1   |
| MixederIAM                    | 0.1   |
| MixederBoard                  | 0.4   |
| MixederADs                    | 10000 |
| MixederManagedScript          | 10    |
| MixederVMC                    | 250   |
| MixederISSH                   | 300   |
| MixederWorkstorage            | 200   |
| ChatFlowAI                    | 10    |

基本的には、この表通りに1リクエスト(作成、編集、削除)に以上の表の料金(円)が発生します。

APIの料金は[API料金表](https://developer.mixeder.net/mixederpublicapis/apirifarensu/api-li-yong-liao-jin)記載されている料金が発生します。(エラーリクエストも課金されます。)

それぞれのアクションでの料金変更は近日中にアップデートし、記載予定です。

※請求機能は現在準備中のため、すべてのサービスが現在無料でご利用いただけます。

利用した料金は数分以内にCostManagementに反映されます。

詳しくは[そちら](https://console.mixeder.net/studio/?category=billing)をご覧ください。

## お支払サイクルについて

MixederCloudで発生したお支払や請求はMixederCloudIDを作成する際に利用したMIXEDERアカウントに請求されます。

月の始め(1\~10日前後)にその月の前の月にご利用された分のMixederCloudの請求書が確定され、MIXEDERアカウントの[お支払センターの残高](https://myaccount.mixeder.net/?category=payment)から自動的に料金が差し引かれます。

請求書はMixederCloudConsoleから確認することができます。

残高が不足している場合やお支払いに失敗した場合はメールに通知が届きます。

<mark style="color:red;">**残高が0を下回っている状態が60日以上経過すると、MixederCloudID、MIXEDERアカウントのサービス停止、アカウントの削除が自動的に開始されます。早急にお支払ください。**</mark>

<figure><img src="https://2154475259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAekuhKDtil6aRY6dFEMZ%2Fuploads%2Fnb9tBxYppBEBvA2kZB3I%2Fimage.png?alt=media&amp;token=b4fcf576-2cb8-44f0-aac6-27d3f2e44bc6" alt=""><figcaption><p>MixederCloudお支払コントロールパネル</p></figcaption></figure>


# MixederCloudでウェブサイトを作成しよう

このページではMixederCloudを活用し、安く簡単に自分のWebサイトを作成する方法を紹介していきます。

#### 1. Webサイトの仕組み

Webサイトは、インターネット上で情報を表示するためのページの集まりです。普段ブラウザ（ChromeやSafariなど）で見るページは、HTML、CSS、JavaScriptといった「コード」でできています。このコードが、ページの見た目や配置、色などを決めています。

* **HTML**: ページに表示する内容を定義します（見出し、テキスト、画像など）。
* **CSS**: HTMLで作った内容を、どのように見せるかを設定します（色、文字の大きさ、配置など）。
* **JavaScript**: ページに動きをつけたり、ユーザーの操作に応じてページの内容を変えるために使われます。

まずは、HTMLとCSSの基本を書いてみましょう。これは、Webサイトの基礎的な「見た目」と「内容」を決める部分です。

***

#### 2. HTMLとCSSの書き方、サンプルコード

Webサイトのコードは、メモ帳や無料のテキストエディタ（例: Visual Studio CodeやAtomなど）を使って書きます。

**HTMLの基本**

まず、HTMLという「内容」を書くファイルを作ります。以下のコードをコピーし、「`index.html`」という名前で保存しましょう。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サンプルWebサイト</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>私のWebサイト</h1>
        <p>ようこそ、私のWebサイトへ！</p>
    </header>
    <main>
        <section>
            <h2>自己紹介</h2>
            <p>こんにちは、これはサンプルのWebサイトです。</p>
        </section>
    </main>
</body>
</html>
```

**CSSの基本**

次に、HTMLで作成した内容に「デザイン」を付けるCSSファイルを作ります。このファイルを「`style.css`」という名前で保存してください。

```css
/* 全体のスタイル */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* ヘッダーのスタイル */
header {
    background-color: #f4f4f4;
    text-align: center;
    padding: 20px;
}

/* セクションのスタイル */
section {
    padding: 20px;
    margin: 10px;
}
```

これで、Webサイトの「`index.html`」と「`style.css`」という2つのファイルができました。ブラウザで「index.html」を開くと、自分のWebサイトが表示されます。

***

#### 3. ファイルのアップロード方法

Webサイトをインターネットに公開するには、作成したファイルを「サーバー」にアップロードします。サーバーは、インターネット上でファイルを公開するための「データを置く場所」です。サーバーを借りると、世界中の人が自分のサイトにアクセスできるようになります。サーバーを利用するために必要な情報は、以下の手順で確認・取得できます。

1. **サーバーとドメインを取得する**
   * **サーバー**：ファイルを置く「場所」です。サーバーはホスティング会社から借ります。今回はMixederCloudのMixederISSHを利用します。
   * **ドメイン**：Webサイトの「住所」にあたるもので、例として「example.com」のようなものです。今回はMixederCloudのドメインを利用するため不要です。
2. **ファイルをアップロードする**

**今回はMixederCloudのMixederISSHを利用するため、ウェブで簡単に利用することができるファイルマネージャーを利用していきます。**

* MixederCloudの[ISSH](https://console.mixeder.net/studio/?category=issh/manage_post\&id=13037)、ドメインエイリアスを入力しましょう。このエイリアスは英数文字で入力してください

<https://hosting.mixedercloud.com/エイリアス/\\>
でウェブサイトにアクセスできるようになります。\
\
パスワードにはウェブサイトのファイルを管理するコントロールパネルに利用したいパスワードを入力しましょう。

ISSHの作成が完了したら、早速先ほどのファイルをアップロードしてみましょう

「ファイルマネージャーにログイン」をクリックすると、ファイルマネージャーにアクセスすることができます。

3. **ファイルをアップロードする**
   * 「index.html」や「style.css」を、フォルダにドラッグ＆ドロップでアップロードします。
4. **Webサイトを確認する**
   * アップロードが完了したら、ブラウザを開いて取得したドメインにアクセスします
   * Webサイトが表示されれば成功です。自分のWebサイトがインターネットに公開され、誰でもアクセスできるようになっています。

***

このように、HTMLとCSSで作ったファイルをサーバーにアップロードし、ドメインを通じて公開することで、自分のWebサイトをインターネット上に簡単に表示できます。


# MIXEDER SSO Developer Portal

〜 申請から連携までをシームレスに。DXを追求した自動審査プラットフォーム 〜

サードパーティアプリケーションへのSSO連携導入時、APIの利用申請から承認までに何日も待たされた経験はありませんか？ MIXEDER SSO 開発者ポータルは、開発者のボトルネックを解消するために設計されました。安全かつ迅速な自動審査プロセスにより、思い立ったその日に認証基盤の統合テストを開始できます。

### 🚀 開発者を加速させる3つのコア機能

#### 1. ブロッカーを排除する「自動審査システム」

従来の「人力による数日間の審査待ち」はもう必要ありません。 申請されたアプリケーションの安全性や妥当性を、システムがバックグラウンドで即座に解析・審査します。当プラットフォームの基準を満たすアプリケーションであれば短時間で自動承認され、開発の進行を止めることがありません。

#### 2. ブラックボックス化しないフィードバックループ

万が一、申請が「却下 (rejected)」となった場合でも、その理由は隠されません。 ダッシュボード上で「申請内容のどこが基準を満たさなかったのか」「どう修正すべきか」という具体的なシステムフィードバックを即座に確認できます。問題箇所を修正し、ワンクリックで再申請が可能です。

#### 3. セキュアで直感的なアプリケーション管理

開発者のパスワード保護（bcryptによる強固なハッシュ化）から、OAuth/OIDC連携に必要な情報の管理までを一元化。 任意のClient IDの指定や、暗号論的擬似乱数を用いた安全な `Client Secret` の自動生成、複数アプリのステータス管理などを、直感的なダッシュボード上で完結できます。

### ⚙️ 連携完了までのワークフロー

OAuth連携の実装にすぐに着手できるよう、ステップは最小限に抑えられています。

1. 開発者アカウントの登録 ポータルにて、メールアドレスと所属組織名でアカウントを作成します。
2. アプリケーション情報の登録 ダッシュボードから以下を設定し、申請を行います。
   * 任意の Client ID
   * サービス名 / 組織名
   * サービスの概要（機能、およびMIXEDER SSOを利用する技術的・ビジネス的理由）
   * 公式サイトURL / コールバックURL
3. バックグラウンド解析 申請完了後、ステータスは「審査中 (pending)」となり、システムが非同期でセキュリティと妥当性のチェックを実行します。
4. Client Secret の取得と実装開始 審査を通過しステータスが「承認済 (approved)」になれば、生成された `Client Secret` を取得し、すぐにアプリケーション側の連携コード実装へ移行できます。

### 📋 システムの審査基準

安全なエコシステムを維持するため、自動解析エンジンは主に以下のポイントを検証しています。申請前に要件を満たしているかご確認ください。

* セキュリティ: 登録されたコールバックURL（リダイレクトURI）や公式サイトのドメインが、不審なものでないこと。
* 情報の妥当性: サービス概要が明確で、無意味な文字列やテストデータが入力されていないこと。
* 利用目的: MIXEDERの認証基盤を利用する目的が、サービス内容から見て合理的であること。
* 適法性: 違法性がなく、一般公開されるサービスとして倫理的・機能的に問題がないこと。

> 💡 Tips: 却下された場合はダッシュボードのフィードバックメッセージを確認してください。指摘事項に沿って入力情報をアップデートし、再申請を行うことで、即座に再審査プロセスがトリガーされます。


# MixederCloud PTB Terms

本規約は、MIXEDERが提供するMixederCloudベータ版サービスの利用に関する規定です。ベータ版サービスは、MixederCloudの開発中のサービスのため、予告なく機能追加や変更、またはサービスの提供中止が行われる場合があります。

### 利用資格

* MixederCloudID、MixederIAM Accountを所有している方
* MIXEDER統合利用規約、MixederCloud追加規約、PTBTerms（こちらの規約）に同意していただける方
* 利用資格を満たさない利用者の利用は制限される場合があります。

### 利用規約の変更

弊社は、本規約を随時変更することができます。変更後の規約は、MIXEDERが定める方法でユーザーに通知し、効力を生じます。

### サービス提供の停止・中断

ベータ版サービスの提供を予告なく停止・中断する場合があります。その場合、ユーザーに対して事前に通知することができない場合があります。

### 免責事項

MIXEDERはベータ版サービスの提供に関し、一切の責任を負いません。また、ユーザーがベータ版サービスを利用したことにより生じた損害についても、一切の責任を負いません。

### 知的財産権

ベータ版サービスに関する一切の知的財産権は、MIXEDER又は、関係する第三者に帰属します。ユーザーは、MIXEDERの事前の承諾なしに、ベータ版サービスに関する知的財産権を使用、複製、公開、翻訳、変更、逆アセンブル、逆コンパイル、逆エンジニアリング、その他の方法で利用することはできません。

### ユーザーの責任

ユーザーは、ベータ版サービスを利用する際に、以下の行為を行わないこととします。

* 第三者の権利を侵害する行為
* 不正アクセス、コンピュータウイルスの配布、スパムメールの送信など、セキュリティに関する行為
* 公序良俗に反する行為、その他法令に違反する行為
* 弊社または第三者に対して損害を与える行為

ユーザーが本規約に違反した場合、弊社は、ユーザーのアカウントを停止または削除し、ベータ版サービスの利用を禁止することがあります。

### 準拠法・管轄裁判所

本規約は、日本法に準拠します。


# Start From Beginnerとは？

初心者向けに特化したWEBエンジニアリングの学習ドキュメント「StartFrom Beginner きょうからWEBエンジニア」は、プログラミングの経験がゼロの方でも安心して学べる内容になっています。

このドキュメントでは、WEB開発に必要な基本知識をわかりやすく丁寧に解説。HTMLやCSS、JavaScriptなどの基礎的な技術から、実際にWEBアプリケーションを作成するステップまでを順を追って学べます。

さあ、今日からあなたもWEBエンジニア！一歩一歩着実にスキルを積み上げて、夢を現実にしていきましょう！

Presented by [MIXEDER](https://www.mixeder.net)


# 初心者でもわかりやすいWEB用語集！

初心者の方でも理解しやすいように、Webに関する用語を分かりやすく紹介します！まずは「これだけ知っておけばOK！」という形でシンプルにまとめました。

***

#### **1. HTML（エイチティーエムエル）**

Webページを作る「設計図」みたいなもの。\
👉 例：「ここに文字を入れて」「ここに画像を置いて」といった指示を書く。

***

#### **2. CSS（シーエスエス）**

Webページの「おしゃれ担当」。\
👉 例：「文字を赤くする」「背景を青くする」「文字を中央にする」といったデザインを決める。

***

#### **3. JavaScript（ジャバスクリプト）**

Webページに動きをつける魔法。\
👉 例：「ボタンを押したら画像が変わる」「時間がカウントダウンされる」など。

***

#### **4. URL（ユーアールエル）**

インターネット上の「住所」。\
👉 例：「<https://example.com」はWebページの住所。>

***

#### **5. HTTP/HTTPS（エイチティーティーピー／エイチティーティーピーエス）**

インターネットでお話しする「ルール」。\
👉 HTTPSは、秘密の手紙みたいに内容を暗号化して送る方法。

***

#### **6. サーバー**

Webページのデータをしまっておく「倉庫」。\
👉 あなたがページを見たいとき、この倉庫がデータを送ってくれる。

***

#### **7. クライアント**

ページをお願いする側。\
👉 あなたのパソコンやスマホのこと。

***

#### **8. ブラウザ**

Webページを見るためのアプリ。\
👉 例：「Google Chrome」や「Safari」。

***

#### **9. SEO（エスイーオー）**

検索で目立つためのコツ。\
👉 例：検索で自分のサイトを一番上に出したいときに工夫すること。

***

#### **10. レスポンシブデザイン**

スマホでもパソコンでも見やすいページ作り。\
👉 例：画面サイズに合わせて文字や画像が自動で調整される。

***

#### **11. Cookie（クッキー）**

あなたのWebでの行動をちょっとだけ覚えておく仕組み。\
👉 例：「前に見た商品」が次にサイトを開いたときに表示される。

***

#### **12. API（エーピーアイ）**

アプリやサービス同士の「やりとりを手助けする窓口」。\
👉 例：地図アプリを使っているWebサイトはAPIを通じて地図データを取得している。

***

#### **13. DNS（ディーエヌエス）**

Webの「電話帳」。\
👉 例：「example.com」をIPアドレス（数字の住所）に変換してくれる。

***

#### **14. キャッシュ**

よく使うデータを「引き出し」にしまっておく仕組み。\
👉 例：ページをもう一度開くときに早く表示される理由。

***

#### **15. 404エラー**

「ページが見つかりません」というお知らせ。\
👉 倉庫にないものを頼んでしまったときに出る。

***

#### **16. Git（ギット）**

「作業の記録帳」。\
👉 例：間違えても「戻る」ボタンを押せるようにする仕組み。

***

#### **17. CMS（シーエムエス）**

誰でも簡単にWebサイトを作れるツール。\
👉 例：「WordPress」でブログを作る感覚。

***

#### **18. フロントエンド**

画面に見える部分を作ること。\
👉 例：デザインやボタンの配置。

***

#### **19. バックエンド**

画面の裏側で動いている部分を作ること。\
👉 例：ログイン情報を管理したり、データベースとやりとりする。

***

#### **20. クラウド**

データやサービスがインターネット上にあること。\
👉 例：「写真をスマホからクラウドに保存する」と、どこからでもアクセスできる。

***

**21. アクセシビリティ**

誰でも使いやすいWebページを作る工夫。\
👉 例：目が不自由な人のために文字を読み上げる機能をつける。

***

#### **22. フォーム**

名前やメールアドレスを入力する「記入欄」。\
👉 例：お問い合わせページの入力ボックス。

***

#### **23. メディアクエリ**

画面サイズに合わせてデザインを変える方法。\
👉 例：スマホ用に「文字を大きくする」指示を出す。

***

#### **24. バリデーション**

入力内容が正しいかチェックすること。\
👉 例：「メールアドレスが間違っていませんか？」と確認する。

***

#### **25. パフォーマンス**

Webページの動きや表示の速さ。\
👉 ページが「サクサク動く」かどうかの重要なポイント。

***

#### **26. SSL/TLS**

データを暗号化して安全に通信する仕組み。\
👉 例：ネットショッピングでカード情報を守る。

***

#### **27. CDN（シーディーエヌ）**

ページを早く表示するための仕組み。\
👉 例：遠いサーバーではなく、近くのサーバーからデータを届ける。

***

#### **28. Webサーバー**

Webページを「保管して配達するシステム」。\
👉 あなたが見ているページは、ここから送られてくる。

***

#### **29. データベース**

情報をまとめて保存する「大きなノート」。\
👉 例：ユーザー名やパスワードをここで管理。

***

#### **30. フレームワーク**

Webサイトを作るための「便利なセットツール」。\
👉 例：「React」や「Vue.js」で簡単に動きのあるページを作る。

***

#### **31. GitHub（ギットハブ）**

作ったコードを共有・管理するサービス。\
👉 例：仲間と一緒にWebサイトを作るときに使う。

***

#### **32. コミット**

「作業の途中経過を記録すること」。\
👉 例：「ここまでの進捗を保存しよう」という感じ。

***

#### **33. プルリクエスト**

作業内容を他の人にチェックしてもらうお願い。\
👉 チーム開発で「これを追加してもいい？」と聞く。

***

#### **34. タグ**

HTMLで「要素」を指定する記号。\
👉 例：`<h1>`は大見出し、`<p>`は段落。

***

#### **35. クラス**

CSSでデザインを指定するための「グループ名」。\
👉 例：「赤文字クラス」を作って、好きな文字に適用。

***

#### **36. ID**

HTMLで一つだけの要素を特定するための名前。\
👉 例：「トップページの一番上だけデザインを変える」ときに使う。

***

#### **37. ナビゲーションバー**

ページの上や横にある「メニュー」。\
👉 例：「ホーム」「お問い合わせ」などのリンク。

***

#### **38. ヘッダー**

Webページの「一番上の部分」。\
👉 例：タイトルやロゴがよく置かれる。

***

#### **39. フッター**

Webページの「一番下の部分」。\
👉 例：著作権や連絡先情報を表示することが多い。

***

#### **40. ランディングページ**

特定の目的に特化したページ。\
👉 例：商品を紹介して購入を促す専用ページ。

***

#### **41. スクリーンリーダー**

画面の内容を音声で読み上げるソフト。\
👉 視覚障害者がWebページを使いやすくするためのツール。

***

#### **42. キャッチコピー**

ページの「目を引く一言」。\
👉 例：「この商品で人生が変わる！」のような印象的なフレーズ。

***

#### **43. モバイルファースト**

スマホ向けにまずデザインを考える考え方。\
👉 スマホで見やすいサイトが求められる時代に重要。

***

#### **44. フィードバックループ**

利用者の意見を取り入れて改善すること。\
👉 例：「アンケートを参考にデザインを変える」。

***

#### **45. 404エラー**

ページが見つからないときに出るメッセージ。\
👉 例：「このページはもうありません」。

***

#### **46. ビルドツール**

開発を効率化するための道具。\
👉 例：「コードを短くして軽くする」などを自動化。

***

#### **47. フロントエンド**

画面に見える部分を作ること。\
👉 例：ボタンや画像、テキストのデザイン。

***

#### **48. バックエンド**

見えない部分を支えるしくみ。\
👉 例：ログイン情報を管理するプログラム。

***

#### **49. ページの最適化**

Webページを軽くしたり、早く表示させる工夫。\
👉 例：画像を圧縮してデータを軽くする。

***

#### **50. アニメーション**

Webページで動きをつける技術。\
👉 例：ボタンが押されたときに色が変わる。

***


# HTTP/HTTPSとは？

### 1. HTTPとは？

HTTP（HyperText Transfer Protocol）は、インターネット上で情報をやり取りするためのルール（プロトコル）です。\
具体的には、以下のような役割を果たします：

* **ブラウザ**（Google Chrome、Safariなど）と**サーバー**が通信する際に使われる。
* ウェブページのデータ（テキスト、画像、動画など）をブラウザに届ける。

#### HTTPの特徴

* 情報が**暗号化されない**状態で送られる。
* 通信内容が第三者に**盗み見られる**可能性がある。
* 通信が高速でシンプル。

***

### 2. HTTPSとは？

HTTPS（HyperText Transfer Protocol Secure）は、HTTPに「暗号化機能」を追加した通信プロトコルです。

#### HTTPSの特徴

* **通信内容が暗号化**される。
* 第三者に情報を盗まれたり、改ざんされたりするリスクが低い。
* 安全性が高いため、ネットバンキングやオンラインショッピングなどに必須。

***

### 3. HTTPとHTTPSの主な違い

| **項目**         | **HTTP**       | **HTTPS**          |
| -------------- | -------------- | ------------------ |
| **暗号化の有無**     | なし             | あり                 |
| **安全性**        | 低い             | 高い                 |
| **URLの始まり**    | `http://`      | `https://`         |
| **SSL/TLS証明書** | 不要             | 必要                 |
| **利用シーン**      | 個人ブログなどの簡単なサイト | クレジットカード情報などを扱うサイト |

***

### 4. HTTPSの仕組み

#### 主な技術

HTTPSでは**SSL/TLS**という暗号化技術が使われています。これにより：

1. **データの盗聴**を防ぐ。
2. サイトが**本物であること**を証明する（なりすまし防止）。
3. **データの改ざん**を防ぐ。

***

### 5. なぜHTTPSが重要？

* プライバシーを守るため。
* 安全性を保証し、信頼できるサイトだと訪問者に示せる。
* Googleの検索結果で優遇され、SEO（検索エンジン最適化）の観点でも有利。

***

### 6. まとめ

* HTTPは通信内容が暗号化されておらず、セキュリティリスクが高い。
* HTTPSはSSL/TLSを利用して暗号化を行い、安全な通信を提供する。
* 現代ではほとんどのウェブサイトがHTTPSを採用しており、特に個人情報を扱う場合は必須です。

もしウェブサイトを作成する場合、HTTPS対応を検討しましょう！


# SEOとは？

### 1. SEOの基本的な意味

SEO（Search Engine Optimization）は、**検索エンジンにおいてウェブサイトを上位に表示させるための工夫や対策**のことです。

簡単に言うと：

* GoogleやYahoo!などの検索エンジンで、あなたのサイトが検索結果の上位に表示されるようにすること。
* 上位表示されることで、多くの人にウェブサイトを訪問してもらいやすくなります。

***

### 2. なぜSEOが重要？

インターネット利用者の多くは、情報を探す際に検索エンジンを使います。\
検索結果で上位に表示されると、以下のようなメリットがあります：

#### 1. **訪問者数が増える**

* 上位のページほどクリックされやすく、アクセス数が増加。

#### 2. **信頼感が高まる**

* 上位表示されることで、サイトの信頼性が高いと認識される。

#### 3. **売上や成果に直結する**

* 商品やサービスを提供している場合、集客や売上の向上につながる。

***

### 3. SEOの仕組み

検索エンジン（Googleなど）は、ウェブページを次のようなプロセスで評価し、順位を決定します：

#### 1. **クロール**

* 検索エンジンがウェブページを自動的に巡回し、データを収集。

#### 2. **インデックス**

* 集めたデータを整理し、検索エンジンのデータベースに保存。

#### 3. **ランキング**

* ユーザーの検索に対して、最も適切なページを順位付けして表示。

SEOは、この「ランキング」で上位に入るための対策を指します。

***

### 4. SEOの主な対策方法

SEO対策には、大きく分けて以下の2つがあります：

#### 1. **内部対策**

ウェブサイト自体を最適化して、検索エンジンに評価されやすくする対策。

**主なポイント：**

* **タイトルタグとメタディスクリプションの最適化**\
  → 検索結果に表示されるタイトルや説明文をわかりやすく魅力的に書く。
* **キーワードの活用**\
  → ユーザーが検索しそうなキーワードを、タイトルや本文に自然に含める。
* **モバイル対応**\
  → スマートフォンやタブレットでも見やすいデザインにする。
* **ページ速度の改善**\
  → サイトの読み込みが速いほど評価が高まる。

***

#### 2. **外部対策**

他のウェブサイトからの評価を高めて、自分のサイトの信頼性を向上させる対策。

**主なポイント：**

* **被リンクを増やす**\
  → 他のサイトからリンクをもらうことで、「信頼されているサイト」として評価される。
  * 例：ブログやニュースサイトから紹介される。
* **SNSでの拡散**\
  → TwitterやFacebookなどでシェアされることで、アクセス数と評価が向上。

***

### 5. SEOで注意すべきこと

SEO対策をする際には、以下の点に注意しましょう：

#### 1. **不自然なキーワードの詰め込みはNG**

* キーワードを入れすぎると、かえって検索エンジンからペナルティを受けることがあります。

#### 2. **質の低い被リンクを避ける**

* 無関係なサイトや質の低いリンクを大量に得ると、逆効果になる場合があります。

#### 3. **ユーザーの満足度を第一に考える**

* 検索エンジンだけでなく、訪問者にとって役立つコンテンツを作成することが重要。

***

### 6. SEOの成功例

#### 成功のシナリオ：

1. ユーザーが「初心者向け英会話レッスン」と検索。
2. あなたのサイトが検索結果の1位に表示される。
3. 多くのユーザーがサイトを訪問し、レッスンを申し込む。

***

### 7. 無料で使えるSEOツール

SEO対策を効率的に進めるために、以下のツールを活用しましょう：

#### 1. **Google Search Console**

* 自分のサイトが検索エンジンでどのように表示されているかを確認できる。

#### 2. **Google Analytics**

* サイトのアクセス数や訪問者の行動を分析。

#### 3. **Ahrefs（無料プランあり）**

* 被リンクや競合サイトの分析が可能。

***

### 8. SEOとコンテンツ作り

SEOで最も重要なのは「コンテンツの質」です。

#### 良いコンテンツの条件：

* **わかりやすく、役に立つ情報があること。**
* **信頼性が高いこと。**
* **読者が満足できる内容であること。**

***

### 9. まとめ

* SEO（検索エンジン最適化）は、ウェブサイトを検索エンジンで上位に表示させるための工夫。
* 内部対策と外部対策の両方が重要。
* ユーザーのニーズを満たす良質なコンテンツを作ることがSEO成功の鍵。
* 定期的にサイトを分析し、改善を続けることが成功につながります。

SEO対策をすることで、多くの人に自分のウェブサイトを見てもらえるようにしましょう！


# サーバーとは？

### 1. サーバーの基本的な意味

サーバーとは、**ネットワーク上で他のコンピュータ（クライアント）にサービスや情報を提供するコンピュータ**やその仕組みのことです。

簡単に言うと：

* **サービスを提供する側**が「サーバー」。
* **サービスを受け取る側**が「クライアント」（例：あなたのスマートフォンやPC）。

***

### 2. サーバーの役割

サーバーは、さまざまな情報や機能を提供するために働いています。以下はその主な役割です：

#### 1. **データの保管**

* ウェブサイトの画像や文章、動画などのデータを保存。
* クライアント（ユーザー）がアクセスしたときにデータを提供。

#### 2. **リクエストの処理**

* クライアントからのリクエスト（例：ウェブページを表示して！）を受け取り、対応するデータを返す。

#### 3. **サービスの提供**

* ウェブサイトを表示する。
* メールを送受信する。
* ゲームのオンラインプレイを支える。

***

### 3. サーバーの種類

サーバーには、用途に応じてさまざまな種類があります。以下に代表的な例を紹介します：

#### 1. **ウェブサーバー**

* ウェブサイトのデータを保管し、ユーザーにウェブページを表示する役割。
* 例：Googleの検索エンジン、YouTubeの動画配信。

#### 2. **データベースサーバー**

* データを整理・保存し、必要に応じて提供する。
* 例：オンラインショッピングサイトの商品情報や在庫データ。

#### 3. **メールサーバー**

* メールの送受信を行う。
* 例：GmailやYahoo!メール。

#### 4. **ゲームサーバー**

* オンラインゲームでプレイヤー間の通信を仲介する。
* 例：MMORPGやFPSのサーバー。

***

### 4. サーバーの形態

サーバーは形態によっても分類されます：

#### 1. **物理サーバー**

* 実際に存在するコンピュータ。
* 大型のコンピュータが専用の部屋やデータセンターで稼働している。

#### 2. **仮想サーバー**

* 物理サーバーを仮想化し、複数のサーバーとして動作させる仕組み。
* 一つの物理サーバーで複数の仮想サーバーを動かせる。

#### 3. **クラウドサーバー**

* インターネット経由で利用できるサーバー。
* 必要なときにだけ使うことができ、柔軟に拡張可能。
* 例：Amazon Web Services（AWS）、Microsoft Azure。

***

### 5. サーバーはどこにあるの？

サーバーは**データセンター**と呼ばれる専用の施設に設置されていることが多いです。\
データセンターには：

* 膨大な数の物理サーバー。
* 冷却設備（サーバーは熱を持つため）。
* 停電対策のための電源装置。

***

### 6. サーバーを使うときの身近な例

以下の行動は、すべてサーバーが関わっています：

* Googleで検索するとき → **Googleのウェブサーバー**に接続。
* YouTubeで動画を観るとき → **YouTubeのストリーミングサーバー**からデータ取得。
* オンラインショッピング → **ショップのウェブサーバーとデータベースサーバー**を利用。

***

### 7. まとめ

* サーバーは、ネットワーク上で情報やサービスを提供する仕組みのこと。
* ウェブサイト、メール、ゲームなど、あらゆるインターネットのサービスはサーバーによって成り立っている。
* クラウドの普及により、サーバーはさらに身近で柔軟に使えるようになっている。

インターネットを使う上で、サーバーはなくてはならない存在です！


# クライアントとは？

### 1. クライアントの基本的な意味

クライアントとは、**サーバーに情報やサービスをリクエスト（要求）して、それを受け取るコンピュータやプログラムのこと**です。\
簡単に言うと：

* **サービスを受け取る側**が「クライアント」。
* **サービスを提供する側**が「サーバー」。

例えば：

* あなたのスマートフォンでWebサイトを見るとき、スマートフォンが「クライアント」、そのWebサイトを提供するシステムが「サーバー」です。

***

### 2. クライアントの役割

クライアントは、サーバーとやり取りしてさまざまなサービスを受け取ります。以下はクライアントの具体的な役割です：

1. **リクエストを送る**
   * クライアントは「情報が欲しい」とサーバーにリクエストを送る。
   * 例：ブラウザで「<https://example.com」と入力すると、クライアントがそのWebページをリクエスト。>
2. **レスポンスを受け取る**
   * サーバーから返された情報を受け取り、それをユーザーに表示する。
   * 例：Webページのデータを表示する、動画を再生する。
3. **ユーザーとサーバーをつなぐ役割**
   * クライアントは、ユーザーが簡単にサーバーのサービスを利用できるようにサポート。

***

### 3. クライアントの種類

クライアントにはいろいろな種類があります。用途に応じて使われるクライアントの例を見てみましょう：

#### 1. **ウェブクライアント**

* サーバーからウェブページのデータを取得して表示する。
* 例：Google Chrome、Safari、Firefoxなどのウェブブラウザ。

#### 2. **メールクライアント**

* メールを送受信するためのアプリケーション。
* 例：Outlook、Thunderbird、Gmailアプリ。

#### 3. **ゲームクライアント**

* オンラインゲームで、サーバーとの通信を行いながらゲームを動かす。
* 例：Steam、Minecraftのゲームアプリ。

#### 4. **ファイルクライアント**

* ファイルをサーバーからダウンロードしたりアップロードしたりする。
* 例：FTPクライアント（FileZillaなど）。

***

### 4. クライアントの仕組み

クライアントはサーバーと通信することで成り立っています。その流れを簡単に説明します：

1. **ユーザーが操作**
   * ユーザーがクライアント（例：ブラウザ）でWebサイトにアクセスする。
2. **リクエストの送信**
   * クライアントは、アクセスしたい情報をサーバーにリクエスト。
3. **サーバーがレスポンスを送信**
   * サーバーがリクエストに応じて必要なデータをクライアントに送信。
4. **クライアントが表示**
   * クライアントが受け取った情報を整理して画面に表示。

***

### 5. クライアントとサーバーの関係

クライアントとサーバーの関係は、簡単に言うと\*\*「注文する人（クライアント）」と「注文を作る人（サーバー）」\*\*のようなものです。

* クライアントが「注文」を出す（リクエスト）。
* サーバーがその注文を「調理して届ける」（レスポンス）。
* クライアントがその結果を「受け取って使う」。

***

### 6. クライアントの身近な例

以下のようなものがすべてクライアントとして動作しています：

#### スマートフォンのアプリ

* YouTubeアプリ → 動画サーバーからデータを取得。
* Googleマップ → 地図データのサーバーにアクセス。

#### ウェブブラウザ

* SafariやChrome → Webページのデータをサーバーから取得。

#### ゲームアプリ

* スプラトゥーン → ゲームサーバーと通信して他のプレイヤーと対戦。

***

### 7. クライアントとサーバーの違いを比較

| **項目**    | **クライアント**            | **サーバー**          |
| --------- | --------------------- | ----------------- |
| **役割**    | サービスをリクエストし、それを利用する。  | サービスや情報を提供する。     |
| **例**     | ブラウザ、スマートフォン、ゲームアプリなど | ウェブサーバー、メールサーバーなど |
| **動作の主体** | ユーザーが操作することが多い。       | ユーザーが意識しなくても動作。   |

***

### 8. まとめ

* **クライアント**は、サーバーにリクエストを送り、サービスやデータを受け取る役割。
* ブラウザ、スマホアプリ、ゲームなど、私たちが日常的に使っているものの多くがクライアントとして動作している。
* クライアントとサーバーの関係があるからこそ、インターネット上の便利なサービスが成り立っています！


# ブラウザとは？

### 1. ブラウザの基本的な意味

ブラウザ（Webブラウザ）とは、**インターネット上のウェブページを閲覧するためのアプリケーションソフトウェア**です。

簡単に言うと：

* インターネット上の情報（ウェブサイト）を「見るための窓」のようなもの。
* サーバーからデータを受け取り、ユーザーが見やすい形で画面に表示する役割を果たします。

***

### 2. ブラウザの役割

ブラウザは以下のような役割を持っています：

#### 1. **ウェブページの表示**

* ウェブサイトのアドレス（URL）を入力すると、そのページのデータをサーバーから取得して表示します。

#### 2. **データの送受信**

* ブラウザを通じて情報を入力したり、データを送信することができます（例：フォームへの入力、ファイルアップロード）。

#### 3. **プログラムの実行**

* ウェブサイトにはHTMLだけでなく、JavaScriptなどのプログラムが含まれています。ブラウザはこれを実行して、動きのあるページを表示します。

***

### 3. 主なブラウザの種類

現在、世界中で利用されている代表的なブラウザは以下の通りです：

#### 1. **Google Chrome**

* 世界で最も利用されているブラウザ。
* シンプルで高速。

#### 2. **Safari**

* Appleが提供するブラウザ。
* iPhoneやMacで標準搭載。

#### 3. **Microsoft Edge**

* Windowsの標準ブラウザ。
* 最新技術を取り入れた使いやすいデザイン。

#### 4. **Firefox**

* オープンソースで開発されているブラウザ。
* プライバシー保護に注力。

#### 5. **Opera**

* 独自のデザインと機能（例：無料のVPN）が特徴。

***

### 4. ブラウザの仕組み

ブラウザは以下の流れで動作します：

1. **URLを入力**
   * 例：`https://example.com`と入力。
2. **サーバーにリクエストを送信**
   * ブラウザは入力されたアドレスのサーバーにデータを要求します。
3. **サーバーからデータを受信**
   * サーバーがHTML、CSS、JavaScriptなどのデータを返します。
4. **ウェブページを表示**
   * ブラウザは受け取ったデータを解析し、ユーザーが見やすい形に変えて画面に表示します。

***

### 5. ブラウザの主な機能

#### 1. **タブ機能**

* 複数のウェブサイトを同時に開くことができます。

#### 2. **ブックマーク**

* よく利用するページを保存しておける機能。

#### 3. **履歴**

* 過去に閲覧したウェブページを記録します。

#### 4. **拡張機能**

* ブラウザに追加機能をインストールできます。
* 例：広告ブロック、パスワード管理。

#### 5. **プライベートブラウジング**

* 履歴やCookieを保存しない「プライベートモード」での閲覧が可能。

***

### 6. ブラウザが使われる具体例

1. **ウェブサイトを見る**
   * ニュースサイトやブログを閲覧する。
2. **オンラインショッピング**
   * 商品を検索し、購入する。
3. **動画視聴**
   * YouTubeやNetflixなどの動画を再生する。
4. **メールの送受信**
   * ウェブメールサービス（例：Gmail、Outlook）を利用。
5. **リモート作業**
   * GoogleドキュメントやMicrosoft Teamsなどのウェブアプリを操作。

***

### 7. ブラウザの安全性

ブラウザを使う上で、セキュリティにも注意が必要です：

#### 1. **HTTPS対応サイトを利用する**

* URLが`https://`で始まるサイトは、通信が暗号化されて安全です。

#### 2. **アップデートを怠らない**

* ブラウザを最新バージョンに保つことで、セキュリティリスクを軽減できます。

#### 3. **怪しいサイトに注意**

* ポップアップ広告やフィッシング詐欺の可能性があるサイトには注意。

***

### 8. まとめ

* ブラウザは、ウェブサイトを閲覧するための基本的なツール。
* 代表的なブラウザには、Google ChromeやSafariなどがある。
* ユーザーがインターネット上で情報を取得したり、操作したりする際に不可欠な存在。
* 安全に利用するために、HTTPS対応サイトを選び、定期的にブラウザをアップデートしましょう！


# HTMLとは？

HTML（HyperText Markup Language）は、Webページを作成するための言語です。HTMLを使うことで、テキスト、画像、リンクなどの要素を整理してWebブラウザに表示させることができます。

***

### HTMLの基本構造

HTML文書は以下のような基本構造を持っています。

```html
<!DOCTYPE html>
<html>
<head>
    <title>ページのタイトル</title>
</head>
<body>
    <h1>ようこそ！</h1>
    <p>これはHTMLの基本例です。</p>
</body>
</html>
```

#### 各部分の説明

1. **`<!DOCTYPE html>`**\
   HTML文書であることをブラウザに伝えます（HTML5を指定）。
2. **`<html>`**\
   HTML文書全体を囲むタグです。
3. **`<head>`**\
   メタ情報（ページタイトルやCSSなど）を記述します。
4. **`<body>`**\
   実際に画面に表示される内容を記述します。

***

### よく使うHTMLタグ

#### 見出し（Heading）

見出しを作るには`<h1>`から`<h6>`までのタグを使用します。

```html
<h1>大見出し（重要）</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
```

* \*\*`<h1>`\*\*は最も重要な見出し
* \*\*`<h6>`\*\*は最も小さい見出し

***

#### 段落（Paragraph）

段落を作るには`<p>`を使います。

```html
<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>
```

***

#### リンク（Anchor）

他のページやURLにリンクを貼るには`<a>`を使用します。

```html
<a href="https://www.example.com">Exampleに行く</a>
```

* **`href`属性**でリンク先を指定します。

***

#### 画像（Image）

画像を表示するには`<img>`を使用します。

```html
<img src="https://via.placeholder.com/150" alt="サンプル画像">
```

* **`src`属性**: 画像のURLやパス
* **`alt`属性**: 画像が表示されないときの説明

***

#### リスト（List）

**順序付きリスト（番号付き）**

```html
<ol>
    <li>最初のアイテム</li>
    <li>次のアイテム</li>
</ol>
```

**順序なしリスト（番号なし）**

```html
<ul>
    <li>最初のアイテム</li>
    <li>次のアイテム</li>
</ul>
```

***

#### 表（Table）

表を作るには`<table>`タグを使います。

```html
<table border="1">
    <tr>
        <th>名前</th>
        <th>年齢</th>
    </tr>
    <tr>
        <td>田中</td>
        <td>25</td>
    </tr>
    <tr>
        <td>佐藤</td>
        <td>30</td>
    </tr>
</table>
```

* **`<table>`**: 表全体
* **`<tr>`**: 行
* **`<th>`**: ヘッダー（見出しセル）
* **`<td>`**: 通常のセル

***

### 簡単なサンプル

以下は基本的なHTMLページの例です。このコードをコピーして、ファイル名を`index.html`として保存し、ブラウザで開いてみましょう。

```html
<!DOCTYPE html>
<html>
<head>
    <title>はじめてのHTML</title>
</head>
<body>
    <h1>HTMLへようこそ</h1>
    <p>これはHTMLの基本例です。ここでは、Webページの構造を学びます。</p>
    
    <h2>リンク</h2>
    <p><a href="https://www.google.com">Googleに行く</a></p>
    
    <h2>画像</h2>
    <img src="https://via.placeholder.com/150" alt="サンプル画像">
    
    <h2>リスト</h2>
    <ul>
        <li>アイテム1</li>
        <li>アイテム2</li>
        <li>アイテム3</li>
    </ul>
</body>
</html>
```

***

### 次に進むには？

HTMLを学んだら、次は以下を学ぶとWebページ作成がもっと楽しくなります。

1. **CSS**: ページのデザインを美しくする方法
2. **JavaScript**: ページに動きをつける方法

あなたも今日からWeb開発を始めましょう！ 😊


# CSSとは？

CSS（Cascading Style Sheets）は、HTMLで作成したWebページの見た目（デザインやレイアウト）を指定するための言語です。\
**文字の色やサイズ、背景色、余白、レイアウトの調整**など、Webページを美しく整えるために使用します。

***

### CSSの基本的な使い方

CSSを適用するには3つの方法があります。

#### 1. **インラインスタイル**

HTML要素に直接スタイルを指定する方法です。

```html
<p style="color: red; font-size: 20px;">これは赤い文字の段落です。</p>
```

**メリット**: 簡単に使える。\
**デメリット**: スタイルが分散して管理しづらい。

***

#### 2. **内部スタイルシート**

HTML文書の`<head>`内に`<style>`タグで記述する方法です。

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>これは青い文字の段落です。</p>
</body>
</html>
```

**メリット**: HTMLファイル内でスタイルをまとめて記述可能。\
**デメリット**: 他のHTMLファイルには適用できない。

***

#### 3. **外部スタイルシート**

CSSを別ファイルに分けて管理する方法です。

**HTMLファイル**（例: `index.html`）

```html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>これは外部スタイルシートでスタイルを適用しています。</p>
</body>
</html>
```

**CSSファイル**（例: `styles.css`）

```css
p {
    color: green;
    font-size: 16px;
}
```

**メリット**: 複数のHTMLファイルで同じCSSを使える。管理が簡単。\
**デメリット**: HTMLとCSSファイルを分ける必要がある。

***

### CSSの基本構文

CSSは以下のような構文を持っています。

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

#### 例

```css
h1 {
    color: red; /* 文字色を赤に設定 */
    font-size: 24px; /* フォントサイズを24pxに設定 */
}
```

#### 各部分の説明

* **セレクタ**: スタイルを適用したいHTML要素（例: `h1`）。
* **プロパティ**: 変更したい属性（例: `color`や`font-size`）。
* **値**: プロパティに設定する値（例: `red`や`24px`）。

***

### よく使うCSSプロパティ

#### 文字関連

```css
color: blue; /* 文字の色 */
font-size: 20px; /* 文字のサイズ */
font-family: Arial, sans-serif; /* フォントの種類 */
font-weight: bold; /* 太字 */
text-align: center; /* テキストの中央揃え */
```

#### 背景関連

```css
background-color: lightgray; /* 背景色 */
background-image: url('background.jpg'); /* 背景画像 */
```

#### 余白関連

```css
margin: 20px; /* 外側の余白 */
padding: 10px; /* 内側の余白 */
```

#### ボーダー（枠線）

```css
border: 2px solid black; /* 枠線の太さ、種類、色 */
border-radius: 10px; /* 枠線の角を丸くする */
```

***

### CSSのセレクタ

セレクタは、どの要素にスタイルを適用するかを指定します。

#### 1. **タグセレクタ**

HTMLタグ全体に適用します。

```css
p {
    color: green;
}
```

#### 2. **クラスセレクタ**

特定の要素に適用します。クラス名は`.`で指定します。

```html
<p class="important">これは重要な段落です。</p>
```

```css
.important {
    font-weight: bold;
    color: red;
}
```

#### 3. **IDセレクタ**

特定の1つの要素に適用します。ID名は`#`で指定します。

```html
<p id="highlight">これはハイライトされた段落です。</p>
```

```css
#highlight {
    background-color: yellow;
}
```

***

### 簡単なサンプル

以下のHTMLとCSSを使って、簡単なスタイル付きWebページを作ってみましょう。

#### HTMLファイル（`index.html`）

```html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <title>CSSの基本</title>
</head>
<body>
    <h1>CSSでスタイルを学ぼう！</h1>
    <p class="highlight">この段落はハイライトされています。</p>
    <p>普通の段落ももちろん表示できます。</p>
</body>
</html>
```

#### CSSファイル（`styles.css`）

```css
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 20px;
    padding: 20px;
}

h1 {
    color: blue;
    text-align: center;
}

.highlight {
    color: white;
    background-color: orange;
    padding: 10px;
    border-radius: 5px;
}
```

***

### 次に進むには？

CSSを学んだら、次は以下を学ぶとWebページ作成がさらに楽しくなります。

1. **レスポンシブデザイン**: スマホやタブレットでも見やすいページを作る方法。
2. **CSSアニメーション**: 動きのあるデザインを作る方法。

CSSを使って、あなたのWebページを魅力的にデザインしてみましょう！ 😊


# Javascriptとは？

JavaScriptは、Webページに**動き**や**インタラクション**を追加するためのプログラミング言語です。\
HTMLとCSSで作った静的なページに、アニメーションやボタンのクリックイベント、データの動的更新などの機能を追加できます。

***

### JavaScriptの特徴

1. **動的な動作を実現**\
   ボタンをクリックしたり、フォームに入力したりしたときに、Webページの内容を変更できます。
2. **ブラウザで動作**\
   JavaScriptコードは、特別な環境を用意しなくてもブラウザ内で動作します。
3. **HTMLやCSSと連携**\
   JavaScriptを使えば、HTMLの要素やCSSスタイルを動的に操作できます。

***

### JavaScriptを使う方法

JavaScriptはHTMLファイルに以下のように記述して使います。

#### 1. **HTML内に直接記述（インラインスクリプト）**

HTML内の`<script>`タグにJavaScriptを書きます。

```html
<!DOCTYPE html>
<html>
<head>
    <title>JavaScriptの例</title>
</head>
<body>
    <h1>こんにちは！</h1>
    <script>
        alert("ページが読み込まれました！");
    </script>
</body>
</html>
```

***

#### 2. **外部ファイルを使う方法**

JavaScriptコードを別ファイル（拡張子: `.js`）に保存して、HTMLから読み込む方法です。

**HTMLファイル**

```html
<!DOCTYPE html>
<html>
<head>
    <title>外部JavaScriptの例</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>外部ファイルで管理</h1>
</body>
</html>
```

**JavaScriptファイル（`script.js`）**

```javascript
alert("外部ファイルからJavaScriptが読み込まれました！");
```

***

### JavaScriptの基本構文

JavaScriptを書くための基本ルールを紹介します。

#### 1. **変数**

データを保存するために使います。

```javascript
let name = "太郎"; // 変数nameに文字列を代入
const age = 25;    // 変更できない定数
let isStudent = true; // 真偽値（true/false）
```

#### 2. **データ型**

JavaScriptでは、さまざまなデータ型を扱えます。

| データ型           | 例                         |
| -------------- | ------------------------- |
| 数値（Number）     | `42`, `3.14`              |
| 文字列（String）    | `"こんにちは"`, `'Hello'`      |
| 真偽値（Boolean）   | `true`, `false`           |
| 配列（Array）      | `[1, 2, 3]`, `["A", "B"]` |
| オブジェクト（Object） | `{key: "value"}`          |

***

#### 3. **関数**

特定の処理をまとめておく仕組みです。

```javascript
function sayHello() {
    console.log("こんにちは！");
}
sayHello(); // 関数を実行
```

***

#### 4. **条件分岐**

条件に応じて異なる処理を実行します。

```javascript
let age = 20;

if (age >= 18) {
    console.log("成人です。");
} else {
    console.log("未成年です。");
}
```

***

#### 5. **繰り返し処理（ループ）**

同じ処理を繰り返します。

```javascript
for (let i = 0; i < 5; i++) {
    console.log("繰り返し: " + i);
}
```

***

### DOM（Document Object Model）操作

JavaScriptでHTMLを動的に操作するためには、DOM（文書オブジェクトモデル）を使います。

#### 例1: 要素の取得と変更

```html
<!DOCTYPE html>
<html>
<head>
    <title>DOM操作の例</title>
</head>
<body>
    <h1 id="title">最初のタイトル</h1>
    <button onclick="changeTitle()">タイトルを変更</button>

    <script>
        function changeTitle() {
            document.getElementById("title").textContent = "変更後のタイトル";
        }
    </script>
</body>
</html>
```

***

#### 例2: イベントの追加

JavaScriptでイベントを設定できます。

```html
<!DOCTYPE html>
<html>
<head>
    <title>クリックイベント</title>
</head>
<body>
    <button id="myButton">クリックして！</button>
    <script>
        document.getElementById("myButton").addEventListener("click", function() {
            alert("ボタンがクリックされました！");
        });
    </script>
</body>
</html>
```

***

### 簡単なサンプル

以下はJavaScriptを使って動きを加えた例です。

```html
<!DOCTYPE html>
<html>
<head>
    <title>簡単なJavaScript例</title>
</head>
<body>
    <h1>カウントアップ</h1>
    <p>クリックするとカウントが増えます。</p>
    <button onclick="increment()">カウントアップ</button>
    <p id="counter">0</p>

    <script>
        let count = 0;

        function increment() {
            count++;
            document.getElementById("counter").textContent = count;
        }
    </script>
</body>
</html>
```

***

### 次に学ぶこと

JavaScriptを学んだら、次は以下を学ぶとさらに応用が広がります。

1. **JavaScriptの配列やオブジェクトの操作**
2. **APIとの連携（データを取得する方法）**
3. **JavaScriptフレームワーク（React, Vue.jsなど）**

JavaScriptを使って、Webページに動きを加える楽しさを体験してみましょう！ 😊


# URLとは？

以下に、URL（Uniform Resource Locator）について初心者向けにわかりやすく解説します。

***

## URL入門ガイド

### URLとは？

**URL（Uniform Resource Locator）** は、インターネット上のリソース（Webページ、画像、動画など）の住所のようなものです。\
ブラウザのアドレスバーに入力することで、特定のリソースにアクセスできます。

たとえば、以下はGoogleのURLです。

```
https://www.google.com/
```

***

### URLの構造

URLは、いくつかの部分で構成されています。それぞれの部分を分解して解説します。

#### 例:

```
https://www.example.com:8080/path/to/page?query=example#section
```

| 部分               | 説明                                                            | 例                 |
| ---------------- | ------------------------------------------------------------- | ----------------- |
| **スキーム（プロトコル）**  | どの通信方式を使うかを指定します。通常は`http`または`https`。                         | `https://`        |
| **ホスト（ドメイン名）**   | サーバー（Webサイト）の名前です。                                            | `www.example.com` |
| **ポート番号（省略可能）**  | 通信に使うポートを指定します。多くの場合、省略されます（`80`が`http`、`443`が`https`のデフォルト）。 | `:8080`           |
| **パス（パス名）**      | サーバー上の特定のファイルやページの場所を指定します。                                   | `/path/to/page`   |
| **クエリパラメータ**     | サーバーに送信する追加情報。キーと値の組み合わせで指定します。                               | `?query=example`  |
| **フラグメント（アンカー）** | ページ内の特定の位置を指定します（特定のセクションに飛ぶために使われる）。                         | `#section`        |

***

### URLの各部分の詳細

#### 1. **スキーム（プロトコル）**

通信の種類を指定します。

* `http`: 安全でない通常の通信（古いサイトで使用されることが多い）。
* `https`: 暗号化された安全な通信（ほとんどの現代的なサイトで使用）。

例:

```
https://example.com  （安全な通信）
http://example.com   （安全でない通信）
```

***

#### 2. **ホスト（ドメイン名）**

Webサイトの名前で、リソースがどこにあるかを指定します。

例:

```
www.google.com
```

ホストは、IPアドレス（例: `192.168.1.1`）に変換されて通信が行われます。

***

#### 3. **ポート番号**

特定のサービスが動作している番号を指定します。通常は省略されます。

* `80`: `http`用のデフォルトポート。
* `443`: `https`用のデフォルトポート。

例:

```
http://example.com:8080  （8080番ポートを指定）
```

***

#### 4. **パス（パス名）**

サーバー上のどのファイルやページをリクエストするかを指定します。

例:

```
/about/contact
```

上記は、サイト内の`contact`というページを指します。

***

#### 5. **クエリパラメータ**

追加情報をサーバーに渡すための部分です。`?`で始まり、`=`でキーと値を指定します。

例:

```
https://example.com/search?q=javascript&lang=ja
```

* `q=javascript`: 検索キーワードが`javascript`。
* `lang=ja`: 言語が`日本語`。

***

#### 6. **フラグメント（アンカー）**

ページ内の特定の場所を指します。`#`で始まります。

例:

```
https://example.com/docs#section3
```

`section3`というセクションに移動します。

***

### URLの実際の使い方

#### 1. **ブラウザでURLを入力**

ブラウザのアドレスバーにURLを入力すると、そのリソースにアクセスできます。

例:

```
https://www.google.com
```

***

#### 2. **リンク**

HTMLでリンクを作るとき、`href`属性にURLを指定します。

例:

```html
<a href="https://www.example.com">Exampleへ移動</a>
```

***

#### 3. **画像やリソースの指定**

Webページ内で画像やCSSファイルなどを指定する場合もURLを使用します。

例:

```html
<img src="https://via.placeholder.com/150" alt="サンプル画像">
```

***

### URLの種類

1. **絶対URL**\
   サイト全体の住所を含むURLです。\
   例: `https://www.example.com/page`
2. **相対URL**\
   現在のページを基準にした簡略化されたURLです。\
   例: `/page`（同じサイト内で使用）

***

### よくある疑問

#### Q: **`www`は必ず必要？**

いいえ。`www`はサブドメインであり、省略可能な場合があります。たとえば、`https://example.com`と`https://www.example.com`は同じサイトを指すことがあります。

#### Q: **HTTPSのほうが良い？**

はい。`https`は暗号化されており、セキュリティが向上しています。特に個人情報を扱う場合は必須です。

***

### 簡単な練習問題

以下のURLを分解して、それぞれの部分を確認してみましょう。

```
https://www.shop.com/products?id=1234&ref=google#details
```

1. プロトコル: `https`
2. ホスト: `www.shop.com`
3. パス: `/products`
4. クエリパラメータ: `id=1234`, `ref=google`
5. フラグメント: `details`

***

### 次に進むには？

URLについて理解したら、次は以下を学ぶと役立ちます。

1. **DNS（ドメイン名システム）**: URLをIPアドレスに変換する仕組み。
2. **REST API**: URLを使ってデータを取得・送信する方法。

URLを正しく理解して、インターネットをもっと便利に使いこなしましょう！ 😊


# DNSとは？

**DNS（Domain Name System）** は、インターネット上で使われる名前解決システムです。\
簡単に言うと、**「Webサイトの名前（ドメイン名）をコンピュータが理解できるIPアドレスに変換する仕組み」** です。

たとえば、以下のような変換を行います：

```
www.google.com → 142.250.190.46
```

人間は覚えやすい「名前」を使い、コンピュータは通信に必要な「数字（IPアドレス）」を使います。DNSはこの橋渡しをする役割を担っています。

***

### なぜDNSが必要なの？

1. **覚えやすい名前を使用するため**\
   IPアドレス（例: `192.168.1.1`）は数字の羅列で覚えにくいですが、ドメイン名（例: `www.example.com`）は直感的で覚えやすいです。
2. **柔軟な管理が可能**\
   サーバーのIPアドレスが変更されても、DNSを更新するだけでアクセス可能な状態を維持できます。
3. **インターネットの広がりを支える**\
   数十億のデバイスやWebサイトが接続されている現在のインターネットは、DNSの仕組みなしには成り立ちません。

***

### DNSの仕組み

DNSは名前解決の際に、以下の手順で動作します。

#### 1. **ドメイン名の入力**

ユーザーがブラウザに`www.example.com`を入力します。

#### 2. **DNSサーバーへの問い合わせ**

ブラウザは、DNSサーバーに「`www.example.com`のIPアドレスを教えて」と問い合わせます。

#### 3. **DNSサーバーがIPアドレスを返す**

DNSサーバーが対応するIPアドレス（例: `93.184.216.34`）を返します。

#### 4. **IPアドレスを使った接続**

ブラウザが返されたIPアドレスを使ってWebサーバーに接続し、Webページを表示します。

***

### DNSの階層構造

DNSは階層構造を持つ分散型のシステムです。この構造により、大量のドメイン名を効率的に管理できます。

1. **ルートDNSサーバー**\
   全てのDNSクエリの起点。ドメイン名のトップレベルドメイン（TLD）を管理します。
   * 例: `.com`, `.org`, `.jp`
2. **TLD（トップレベルドメイン）サーバー**\
   特定のTLDに属するドメイン名を管理します。
   * 例: `.com`用のサーバーは、`example.com`や`google.com`の情報を管理。
3. **権威DNSサーバー**\
   実際のドメイン名とIPアドレスの対応を管理します。
   * 例: `www.example.com → 93.184.216.34`
4. **キャッシュDNSサーバー**\
   よく使われる名前解決結果を一時的に保存して高速化します。
   * 例: ISP（インターネットサービスプロバイダー）の提供するDNSサーバー。

***

### DNSクエリの種類

DNSクエリ（問い合わせ）には以下のような種類があります。

#### 1. **正引き**

ドメイン名からIPアドレスを取得します。

* 例: `www.google.com → 142.250.190.46`

#### 2. **逆引き**

IPアドレスからドメイン名を取得します。

* 例: `142.250.190.46 → www.google.com`

***

### DNSの記録（DNSレコード）

DNSにはさまざまな種類のレコードがあります。それぞれの役割を理解すると、DNSの動作がよりわかりやすくなります。

| 種類            | 説明                           | 例                                    |
| ------------- | ---------------------------- | ------------------------------------ |
| **Aレコード**     | ドメイン名をIPv4アドレスに変換する。         | `www.example.com → 93.184.216.34`    |
| **AAAAレコード**  | ドメイン名をIPv6アドレスに変換する。         | `www.example.com → 2606:2800:220:1`  |
| **CNAMEレコード** | 別のドメイン名へのエイリアスを設定する。         | `blog.example.com → www.example.com` |
| **MXレコード**    | メールサーバーの情報を指定する。             | `example.com → mail.example.com`     |
| **TXTレコード**   | テキスト情報を保存する（SPFや認証情報に使用される）。 | `example.com → v=spf1 include:...`   |

***

### キャッシュとTTL

#### キャッシュ

DNSサーバーやブラウザは、名前解決の結果を一時的に保存して高速化します。この保存された情報が「キャッシュ」です。

#### TTL（Time To Live）

キャッシュの有効期限を指定する値です。TTLが切れると新たにDNSサーバーに問い合わせます。

例:

* TTL = 3600秒（1時間）の場合、キャッシュは1時間後に無効になります。

***

### DNSの利用例

#### 1. **Webサイトにアクセス**

ブラウザでURLを入力すると、DNSがIPアドレスを返して接続が可能になります。

#### 2. **メールの送受信**

メール送信時、DNSはMXレコードを使って相手のメールサーバーを特定します。

#### 3. **カスタムドメイン設定**

独自ドメインを取得し、Webホスティングやメールサービスに紐付ける際にDNS設定を行います。

***

### よくあるDNSの問題

1. **名前解決エラー** ドメイン名が正しく設定されていない場合やDNSサーバーが応答しない場合に発生します。
   * 解決策: DNS設定の確認や別のDNSサーバーを試す。
2. **DNSキャッシュの古さ** キャッシュが古くなり、正しい名前解決が行われないことがあります。
   * 解決策: キャッシュを手動でクリアする。
3. **遅い名前解決** DNSサーバーの応答が遅い場合、Webページの読み込みも遅くなります。
   * 解決策: 高速なDNSサーバー（例: Google Public DNSやCloudflare DNS）を利用。

***

### DNSを試してみよう

WindowsやMacで以下のコマンドを使って、DNSの動作を確認できます。

#### 1. **nslookup**

ドメイン名からIPアドレスを調べるツール。

```bash
nslookup www.google.com
```

#### 2. **dig**（Mac/Linux）

DNS情報を詳しく調べるコマンド。

```bash
dig www.google.com
```

***

### 次に進むには？

DNSを理解したら、次は以下を学ぶとさらに応用が広がります。

1. **DNSSEC**: DNSにセキュリティを加える技術。
2. **CDN（Content Delivery Network）**: DNSを活用してWebページを高速化する仕組み。

DNSはインターネットの基盤とも言える重要な技術です。この仕組みを知ることで、Webの仕組みへの理解が深まります！ 🌐


# ビジネスAI APIとは？

{% embed url="<https://businessai.mixeder.com/>" %}

様々なAIをHTTPAPIにしてより簡単にアクセスできるようにしてクラウド動作型AIコンピューティングサービスです。

サービスご利用にはサーバーやGPUなどの初期投資が必要なく従量課金で利用した分のみお支払いただきます。


# CloudTranslateAPI

***

### **CloudTranslateAPI Reference**

CloudTranslateAPI は、高性能なテキスト翻訳を提供する RESTful API です。シンプルなインターフェースで、多言語間の翻訳を簡単に統合できます。機械学習モデルを活用して、正確かつ効率的な翻訳を実現します。

***

#### **導入用途**

1. **ウェブアプリケーションの多言語化**\
   Web サイトや SaaS アプリケーションに CloudTranslateAPI を統合することで、多言語対応を効率的に行えます。ユーザーの言語設定に応じた動的なコンテンツ翻訳が可能です。
2. **カスタマーサポートの強化**\
   サポートチャットやメール翻訳に利用することで、異なる言語を話す顧客との円滑なコミュニケーションを実現します。
3. **Eコマースサイトの国際化**\
   商品説明やレビューを自動翻訳することで、国際市場での競争力を高めます。
4. **教育分野での活用**\
   学習プラットフォームで教材や質問の翻訳に使用し、多文化対応の学習環境を提供します。
5. **ドキュメント管理の効率化**\
   翻訳されたドキュメントを作成・管理し、グローバルチーム間の情報共有を容易にします。

***

#### **Base URL**

```
https://cloudtranslate-mixederapi.mixeder.com/
```

***

#### **Endpoints**

**POST /**

指定されたテキストを翻訳するメインエンドポイントです。

**Headers**

| ヘッダー名          | 必須 | 説明                 |
| -------------- | -- | ------------------ |
| `Content-Type` | はい | `application/json` |

**Request Body**

| パラメーター名  | 必須 | 説明                |
| -------- | -- | ----------------- |
| `key`    | はい | 使用する API キー       |
| `text`   | はい | 翻訳対象のテキスト         |
| `source` | はい | 翻訳元言語コード（例: `en`） |
| `target` | はい | 翻訳先言語コード（例: `fr`） |

**Response**

* 成功時:\
  **HTTP Status**: 200\
  **Body**:

  ```json
  {
    "message": "API authentication, translation, and billing completed successfully",
    "username": "username",
    "inputs": {
      "text": "Welcome to MixederCloud!",
      "source_lang": "en",
      "target_lang": "ja"
    },
    "translation": {
      "translated_text": "MixederCloudへようこそ!"
    },
    "billingResponse": "{\"status\":\"success\"}"
  }
  ```
* エラー時:\
  **HTTP Status**: 400 または 500\
  **Body**:

  ```json
  {
    "error": "Error message"
  }
  ```

***

#### **サンプルコード**

**JavaScript Fetch Example**

```javascript
async function translateText(apiKey, text, sourceLang, targetLang) {
  const apiUrl = 'https://cloudtranslate-mixederapi.mixeder.com/';

  const body = {
    key: apiKey,
    text: text || 'Tell me a joke about Cloudflare',
    source: sourceLang || 'en',
    target: targetLang || 'fr',
  };

  try {
    const response = await fetch(apiUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    });

    if (!response.ok) {
      throw new Error(`API error: ${response.statusText}`);
    }

    const data = await response.json();
    console.log('Translation:', data.translation.result);
    return data.translation.result;
  } catch (error) {
    console.error('Error during translation:', error.message);
    throw error;
  }
}

// 使用例
translateText('your-api-key', 'Hello, world!', 'en', 'es')
  .then((result) => console.log('Translated text:', result))
  .catch((err) => console.error('Translation failed:', err));
```

***

**Python Requests Example**

```python
import requests

def translate_text(api_key, text, source_lang, target_lang):
    api_url = 'https://cloudtranslate-mixederapi.mixeder.com/'
    payload = {
        "key": api_key,
        "text": text or "Tell me a joke about Cloudflare",
        "source": source_lang or "en",
        "target": target_lang or "fr",
    }
    try:
        response = requests.post(api_url, json=payload)
        response.raise_for_status()
        data = response.json()
        print("Translation:", data["translation"]["result"])
        return data["translation"]["result"]
    except requests.exceptions.RequestException as e:
        print("Error during translation:", e)
        raise

# 使用例
translate_text("your-api-key", "Hello, world!", "en", "es")
```

***

**cURL Example**

```bash
curl -X POST https://cloudtranslate-mixederapi.mixeder.com/ \
  -H "Content-Type: application/json" \
  -d '{
    "key": "your-api-key",
    "text": "Hello, world!",
    "source": "en",
    "target": "es"
  }'
```

***


# CloudTalkAPI

**CloudtalkAPI** は、高性能な会話生成およびタスク処理を提供する API です。複数の AI モデルを活用して、自然な対話生成やタスクの実行が可能です。簡単な入力インターフェースを持ち、幅広いシナリオで活用できます。

***

#### **導入用途**

1. **カスタマーサポートの自動化**\
   サポートボットを通じて、顧客の質問に迅速かつ正確に応答します。
2. **コンテンツ生成の効率化**\
   ジョーク、物語、ブログ記事など、さまざまなコンテンツを自動生成します。
3. **教育アシスタント**\
   質問への回答や課題のサポートを行い、教育現場での利用をサポートします。
4. **会話型アプリケーションの構築**\
   人工知能を活用したチャットボットや仮想アシスタントを作成します。
5. **クリエイティブライティングの補助**\
   執筆支援やアイデアのブレインストーミングに役立ちます。

***

#### **Base URL**

```
https://cloudtalk-mixederapi.mixeder.com/
```

***

#### **Endpoints**

**POST /**

指定されたタスクを処理し、会話の生成または関連タスクの実行を行います。

**Headers**

| ヘッダー名          | 必須 | 説明                 |
| -------------- | -- | ------------------ |
| `Content-Type` | はい | `application/json` |

**Request Body**

| パラメーター名  | 必須  | 説明                                                         |
| -------- | --- | ---------------------------------------------------------- |
| `key`    | はい  | 使用する API キー                                                |
| `system` | いいえ | AI モデルに与えるシステムプロンプト（デフォルト: "You are a helpful assistant."） |
| `user`   | いいえ | ユーザーからの入力メッセージ（デフォルト: "Who won the world series in 2020?"） |

**Response**

* 成功時:\
  **HTTP Status**: 200\
  **Body**:

  ```json
  {
    "message": "API authentication, task processing, and billing completed successfully",
    "username": "user",
    "tasks": [
      {
        "inputs": {
          "messages": [
            {
              "role": "system",
              "content": "You are a helpful assistant."
            },
            {
              "role": "user",
              "content": "Who won the world series in 2020?"
            }
          ]
        },
        "response": {
          "response": "The Los Angeles Dodgers won the World Series in 2020, defeating the Tampa Bay Rays in six games (4-2). It was the Dodgers' first World Series title since 1988!"
        }
      }
    ],
    "billingResponse": "{\"status\":\"success\"}"
  }
  ```
* エラー時:\
  **HTTP Status**: 400 または 500\
  **Body**:

  ```json
  {
    "error": "Error message"
  }
  ```

***

#### **リクエストはすべてGETメゾットで行います。クエリ文字列に変数を代入してください。**


# CloudImageClassfyAPI

**CloudImageClassfyAPI** は、画像分類機能を提供する API です。指定した画像を AI モデルで解析し、ラベルやカテゴリを返します。簡単なインターフェースで、高精度な画像分類を実現します。

***

#### **導入用途**

1. **画像データの自動分類**\
   商品画像、ユーザー投稿画像、またはストック画像を自動分類します。
2. **コンテンツモデレーション**\
   アップロードされた画像に不適切な内容が含まれていないかを確認します。
3. **視覚データ分析**\
   サービスのインサイトを得るために画像データを解析します。
4. **画像認識システムの構築**\
   画像検索や画像分類を含むアプリケーションのバックエンドとして利用します。

***

#### **Base URL**

```
https://cloudimageclass-mixederapi.mixeder.com/
```

***

#### **Endpoints**

**GET /**

画像データを指定して分類タスクを実行します。

**Headers**

| ヘッダー名          | 必須 | 説明                 |
| -------------- | -- | ------------------ |
| `Content-Type` | はい | `application/json` |

**Query Parameters**

| パラメーター名    | 必須 | 説明          |
| ---------- | -- | ----------- |
| `key`      | はい | 使用する API キー |
| `imageurl` | はい | 解析する画像の URL |

**Response**

* 成功時:\
  **HTTP Status**: 200\
  **Body**:

  ```json
  {
    "message": "API authentication, image processing, and billing completed successfully",
    "username": "user",
    "response": [
      {
        "label": "BARRACOUTA",
        "score": 0.44505077600479126
      },
      {
        "label": "GAR",
        "score": 0.27577465772628784
      },
      {
        "label": "COHO",
        "score": 0.12319006025791168
      },
      {
        "label": "ELECTRIC RAY",
        "score": 0.03162669017910957
      },
      {
        "label": "HAMMERHEAD SHARK",
        "score": 0.0204053595662117
      }
    ],
    "billingResponse": "{\"status\":\"success\"}"
  }
  ```
* エラー時:\
  **HTTP Status**: 400 または 500\
  **Body**:

  ```json
  {
    "error": "Error message"
  }
  ```

***

#### **サンプルコード**

**JavaScript Fetch Example**

```javascript
async function classifyImage(apiKey, imageUrl) {
  const apiUrl = 'https://cloudimageclass-mixederapi.mixeder.com/';
  
  const queryParams = new URLSearchParams({ key: apiKey, imageurl: imageUrl });
  
  try {
    const response = await fetch(`${apiUrl}?${queryParams.toString()}`, {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
    });

    if (!response.ok) {
      throw new Error(`API error: ${response.statusText}`);
    }

    const data = await response.json();
    console.log('Image classification result:', data.response);
    return data.response;
  } catch (error) {
    console.error('Error during image classification:', error.message);
    throw error;
  }
}

// 使用例
classifyImage('your-api-key', 'https://example.com/image.jpg')
  .then((result) => console.log('Classification Result:', result))
  .catch((err) => console.error('Classification failed:', err));
```

***

**Python Requests Example**

```python
import requests

def classify_image(api_key, image_url):
    api_url = 'https://cloudimageclass-mixederapi.mixeder.com/'
    params = {
        "key": api_key,
        "imageurl": image_url,
    }
    try:
        response = requests.get(api_url, params=params)
        response.raise_for_status()
        data = response.json()
        print("Image classification result:", data["response"])
        return data["response"]
    except requests.exceptions.RequestException as e:
        print("Error during image classification:", e)
        raise

# 使用例
classify_image("your-api-key", "https://example.com/image.jpg")
```

***

**cURL Example**

```bash
curl -X GET 'https://cloudimageclass-mixederapi.mixeder.com/?key=your-api-key&imageurl=https://example.com/image.jpg' \
  -H "Content-Type: application/json"
```

***

このリファレンスを活用することで、CloudImageClassfyAPI を簡単に統合し、画像データの分類を効率的に実現できます。


# TextVectorAPI

***

### **TextVectorAPI Reference**

**TextVectorAPI** は、入力されたテキストをベクトル形式に変換するための API です。この API を利用することで、テキストデータを機械学習モデルやデータ分析ツールで扱いやすい形式に変換できます。

***

#### **導入用途**

1. **自然言語処理（NLP）**\
   テキストデータのベクトル化により、クラスタリングや類似性分析を実現します。
2. **検索エンジンの強化**\
   ベクトル検索を用いて、意味的に関連性のあるドキュメントや回答を検索できます。
3. **推薦システムの構築**\
   テキストコンテンツ間の類似性を分析して、コンテンツの推薦機能を実装します。
4. **AIモデルの前処理**\
   テキストデータをエンコードして、ディープラーニングモデルの入力として使用します。

***

#### **Base URL**

```
https://textvectorapi-mixederapi.mixeder.com/
```

***

#### **Endpoints**

**GET /**

指定されたテキストをベクトル形式に変換します。

**Headers**

| ヘッダー名          | 必須 | 説明                 |
| -------------- | -- | ------------------ |
| `Content-Type` | はい | `application/json` |

**Query Parameters**

| パラメーター名 | 必須 | 説明          |
| ------- | -- | ----------- |
| `key`   | はい | 使用する API キー |
| `text`  | はい | ベクトル化するテキスト |

**Response**

* 成功時:\
  **HTTP Status**: 200\
  **Body**:

  ```json
  {
    "message": "API authentication, vectorization, and billing completed successfully",
    "username": "user",
    "vectorization": {
      "shape": [
        1,
        768
      ],
      "data": [
        [
          -0.0062803165055811405,
          0.02522544004023075,
          0.02596879191696644,
          0.0022791167721152306,
          0.014218125492334366,
          0.019512472674250603,
          0.006175754591822624,
          0.0308975987136364,
          -0.04236556962132454
        ]
      ]
    },
    "billingResponse": "{\"status\":\"success\"}"
  }
  ```
* エラー時:\
  **HTTP Status**: 400 または 500\
  **Body**:

  ```json
  {
    "error": "Error message"
  }
  ```

***

#### **サンプルコード**

**JavaScript Fetch Example**

```javascript
async function vectorizeText(apiKey, text) {
  const apiUrl = 'https://textvectorapi-mixederapi.mixeder.com/';
  
  const queryParams = new URLSearchParams({ key: apiKey, text });

  try {
    const response = await fetch(`${apiUrl}?${queryParams.toString()}`, {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
    });

    if (!response.ok) {
      throw new Error(`API error: ${response.statusText}`);
    }

    const data = await response.json();
    console.log('Text vectorization result:', data.vectorization);
    return data.vectorization;
  } catch (error) {
    console.error('Error during text vectorization:', error.message);
    throw error;
  }
}

// 使用例
vectorizeText('your-api-key', 'example text')
  .then((result) => console.log('Vectorization Result:', result))
  .catch((err) => console.error('Vectorization failed:', err));
```

***

**Python Requests Example**

```python
import requests

def vectorize_text(api_key, text):
    api_url = 'https://textvectorapi-mixederapi.mixeder.com/'
    params = {
        "key": api_key,
        "text": text,
    }
    try:
        response = requests.get(api_url, params=params)
        response.raise_for_status()
        data = response.json()
        print("Text vectorization result:", data["vectorization"])
        return data["vectorization"]
    except requests.exceptions.RequestException as e:
        print("Error during text vectorization:", e)
        raise

# 使用例
vectorize_text("your-api-key", "example text")
```

***

**cURL Example**

```bash
curl -X GET 'https://textvectorapi-mixederapi.mixeder.com/?key=your-api-key&text=example%20text' \
  -H "Content-Type: application/json"
```

***

#### **料金計算**

1. **サービス名**: `TextVectorAPI`
2. **単位あたり料金**: 0.05


# EmotionalClassificationAPI

**EmotionalClassificationAPI** は、指定されたテキストの感情を分類するための API です。この API を使用することで、感情分析や感情分類を効率的に実行できます。

***

#### **導入用途**

1. **顧客フィードバックの分析**\
   ユーザーレビューやカスタマーサポートメッセージの感情を把握します。
2. **SNS分析**\
   ソーシャルメディア投稿の感情を特定し、トレンド分析を行います。
3. **マーケティング戦略の強化**\
   コンテンツがユーザーに与える感情的な影響を分析します。
4. **テキスト解析アプリケーション**\
   感情分析機能を組み込むことで、アプリケーションの価値を高めます。

***

#### **Base URL**

```
https://emotionalclassification-mixederapi.mixeder.com/
```

***

#### **Endpoints**

**GET /**

指定されたテキストに対して感情分析を実行します。

**Headers**

| ヘッダー名          | 必須 | 説明                 |
| -------------- | -- | ------------------ |
| `Content-Type` | はい | `application/json` |

**Query Parameters**

| パラメーター名 | 必須 | 説明          |
| ------- | -- | ----------- |
| `key`   | はい | 使用する API キー |
| `text`  | はい | 感情分析を行うテキスト |

**Response**

* 成功時:\
  **HTTP Status**: 200\
  **Body**:

  ```json
  {
    "message": "API authentication, sentiment analysis, and billing completed successfully",
    "username": "user123",
    "analysis": {
      "text": "example text",
      "sentiment": "positive", 
      "confidence": 0.98
    },
    "billingResponse": "Billing processed successfully"
  }
  ```
* エラー時:\
  **HTTP Status**: 400 または 500\
  **Body**:

  ```json
  {
    "error": "Error message"
  }
  ```

***

#### **サンプルコード**

**JavaScript Fetch Example**

```javascript
async function analyzeSentiment(apiKey, text) {
  const apiUrl = 'https://emotionalclassification-mixederapi.mixeder.com/';
  
  const queryParams = new URLSearchParams({ key: apiKey, text });

  try {
    const response = await fetch(`${apiUrl}?${queryParams.toString()}`, {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
    });

    if (!response.ok) {
      throw new Error(`API error: ${response.statusText}`);
    }

    const data = await response.json();
    console.log('Sentiment analysis result:', data.analysis);
    return data.analysis;
  } catch (error) {
    console.error('Error during sentiment analysis:', error.message);
    throw error;
  }
}

// 使用例
analyzeSentiment('your-api-key', 'I love this product!')
  .then((result) => console.log('Sentiment Analysis Result:', result))
  .catch((err) => console.error('Analysis failed:', err));
```

***

**Python Requests Example**

```python
import requests

def analyze_sentiment(api_key, text):
    api_url = 'https://emotionalclassification-mixederapi.mixeder.com/'
    params = {
        "key": api_key,
        "text": text,
    }
    try:
        response = requests.get(api_url, params=params)
        response.raise_for_status()
        data = response.json()
        print("Sentiment analysis result:", data["analysis"])
        return data["analysis"]
    except requests.exceptions.RequestException as e:
        print("Error during sentiment analysis:", e)
        raise

# 使用例
analyze_sentiment("your-api-key", "I am very happy with this service!")
```

***

**cURL Example**

```bash
curl -X GET 'https://emotionalclassification-mixederapi.mixeder.com/?key=your-api-key&text=I%20love%20this%20product' \
  -H "Content-Type: application/json"
```

***

#### **料金計算**

1. **サービス名**: `EmotionalClassificationAPI`
2. **単位あたり料金**: 0.05


# Page


# Mini-VPS Object Storage API Documentation

Learn more about documenting APIs in GitBook.

Mini-VPS のオブジェクトストレージを操作するためのREST API仕様書です。

このAPIを使用することで、アプリケーションから直接ファイルのアップロード、一覧取得、削除、アクセス制御を行うことができます。

### 🌐 基本情報 (General Info)

* Base URL: `https://mini-vps.mixeder.com/api/storage`
* 課金について:
  * ストレージ操作（アップロード、削除、一覧取得）は、ユーザーのクレジット残高を使用します。
  * クレジットが `0` 以下の場合、アップロードやAPI操作は `402 Payment Required` エラーとなります。

### 🔑 認証 (Authentication)

APIを利用するには、以下のいずれかの認証が必要です。

#### 1. APIキー認証 (推奨: 外部アプリ向け)

バケットごとに発行されたAPIキーを使用します。特定のバケットに対する操作のみが許可されます。

* Header Name: `x-api-key`
* Value: バケット設定画面で発行したAPIキー

#### 2. セッション認証 (ブラウザ・管理画面向け)

ブラウザでログイン済みの場合、セッションを利用して認証します。バケットの作成や削除など、管理者権限が必要な操作に使用します。

***

### 📂 1. ファイル操作 (File Operations)

#### 1.1 ファイル一覧取得 (List Files)

指定したバケット内のファイルとフォルダ構造を取得します。

* Endpoint: `GET /files/list`
* Auth: API Key / Session
* Use Case: ファイルマネージャーの表示、画像ギャラリーの構築。

**パラメータ (Query Parameters)**

| **パラメータ**  | **必須** | **説明**                       | **例**          |
| ---------- | ------ | ---------------------------- | -------------- |
| `bucketId` | ✅      | 対象のバケットID                    | `b1234-uuid`   |
| `prefix`   |        | 特定フォルダ内を表示する場合のパス (末尾に`/`必須) | `images/2024/` |

**cURL Request**

Bash

```bash
curl -G "https://mini-vps.mixeder.com/api/storage/files/list" \
  -H "x-api-key: YOUR_API_KEY_HERE" \
  --data-urlencode "bucketId=YOUR_BUCKET_ID" \
  --data-urlencode "prefix=photos/"
```

**Response Example**

JSON

```json
{
  "success": true,
  "currentPrefix": "photos/",
  "folders": [
    { "name": "2024", "path": "photos/2024/", "type": "folder" }
  ],
  "files": [
    { 
      "name": "vacation.jpg", 
      "path": "photos/vacation.jpg", 
      "size": 1048576, 
      "lastModified": "2024-02-07T12:00:00.000Z", 
      "type": "file" 
    }
  ]
}
```

***

#### 1.2 ファイルアップロード (Upload File)

ファイルをバケットにアップロードします。成功時、課金用ストレージ容量が加算されます。

* Endpoint: `POST /file/upload`
* Auth: API Key / Session
* Content-Type: `multipart/form-data`
* Use Case: ユーザーアイコンのアップロード、バックアップデータの保存。

**パラメータ (Form Data)**

| **パラメータ**      | **必須** | **説明**                                 |
| -------------- | ------ | -------------------------------------- |
| `file`         | ✅      | バイナリデータ (File Object)                  |
| `bucketId`     | ✅      | アップロード先のバケットID                         |
| `targetPrefix` |        | 保存先フォルダパス (例: `uploads/`)。指定しない場合はルート。 |

**cURL Request**

Bash

```
curl -X POST "https://mini-vps.mixeder.com/api/storage/file/upload" \
  -H "x-api-key: YOUR_API_KEY_HERE" \
  -F "bucketId=YOUR_BUCKET_ID" \
  -F "targetPrefix=uploads/images/" \
  -F "file=@/local/path/to/image.png"
```

**Response Example**

JSON

```
{
  "success": true,
  "size": 10245000 // 更新後のバケット合計サイズ(bytes)
}
```

***

#### 1.3 ファイル削除 (Delete File)

ファイルを削除し、ストレージ容量を解放します。

* Endpoint: `POST /file/delete`
* Auth: API Key / Session
* Content-Type: `application/json`

**パラメータ (JSON Body)**

| **パラメータ**  | **必須** | **説明**                                      |
| ---------- | ------ | ------------------------------------------- |
| `bucketId` | ✅      | バケットID                                      |
| `key`      | ✅      | 削除するファイルのパス (例: `uploads/images/image.png`) |

**cURL Request**

Bash

```
curl -X POST "https://mini-vps.mixeder.com/api/storage/file/delete" \
  -H "x-api-key: YOUR_API_KEY_HERE" \
  -H "Content-Type: application/json" \
  -d '{
    "bucketId": "YOUR_BUCKET_ID",
    "key": "uploads/images/image.png"
  }'
```

***

### 📁 2. フォルダ操作 (Folder Operations)

#### 2.1 フォルダ作成 (Create Folder)

空のフォルダ（プレフィックス）を作成します。

※ オブジェクトストレージの仕様上、0バイトのオブジェクトとして作成されます。

* Endpoint: `POST /folder/create`
* Auth: API Key / Session

**パラメータ (JSON Body)**

| **パラメータ**       | **必須** | **説明**                       |
| --------------- | ------ | ---------------------------- |
| `bucketId`      | ✅      | バケットID                       |
| `folderName`    | ✅      | 作成するフォルダ名 (例: `new_docs`)    |
| `currentPrefix` |        | 親フォルダがある場合 (例: `project_a/`) |

**cURL Request**

Bash

```
curl -X POST "https://mini-vps.mixeder.com/api/storage/folder/create" \
  -H "x-api-key: YOUR_API_KEY_HERE" \
  -H "Content-Type: application/json" \
  -d '{
    "bucketId": "YOUR_BUCKET_ID",
    "folderName": "logs",
    "currentPrefix": "server_a/"
  }'
# 結果: "server_a/logs/" が作成されます
```

***

#### 2.2 フォルダ一括削除 (Delete Folder)

指定したフォルダと、その中にあるすべてのファイルを再帰的に削除します。

※ 削除されたファイル分の容量がクレジット計算から減算されます。取り消しできません。

* Endpoint: `POST /folder/delete`
* Auth: API Key / Session

**パラメータ (JSON Body)**

| **パラメータ**    | **必須** | **説明**                            |
| ------------ | ------ | --------------------------------- |
| `bucketId`   | ✅      | バケットID                            |
| `folderPath` | ✅      | 削除対象のフォルダパス (例: `server_a/logs/`) |

**cURL Request**

Bash

```
curl -X POST "https://mini-vps.mixeder.com/api/storage/folder/delete" \
  -H "x-api-key: YOUR_API_KEY_HERE" \
  -H "Content-Type: application/json" \
  -d '{
    "bucketId": "YOUR_BUCKET_ID",
    "folderPath": "server_a/logs/"
  }'
```

***

### 🔗 3. アクセス共有 (Access Control)

#### 3.1 署名付きURL発行 (Generate Signed URL)

プライベートなファイルに対して、一定時間だけアクセス可能なURLを発行します。

* Endpoint: `POST /url/sign`
* Auth: API Key / Session
* Use Case: チャットでのファイル共有、期限付きダウンロードリンク。

**パラメータ (JSON Body)**

| **パラメータ**  | **必須** | **説明**    |
| ---------- | ------ | --------- |
| `bucketId` | ✅      | バケットID    |
| `key`      | ✅      | 対象ファイルのパス |

**cURL Request**

Bash

```
curl -X POST "https://mini-vps.mixeder.com/api/storage/url/sign" \
  -H "x-api-key: YOUR_API_KEY_HERE" \
  -H "Content-Type: application/json" \
  -d '{
    "bucketId": "YOUR_BUCKET_ID",
    "key": "private/contract.pdf"
  }'
```

**Response Example**

JSON

```
{
  "success": true,
  "url": "/s/my-bucket/private/contract.pdf?expires=1738999999&signature=a1b2c3d4..."
}
```

※ ブラウザでこのURLにアクセスするとファイルが表示・ダウンロードされます。

***

### ⚙️ 4. 管理・設定 (Management)

これらのAPIは通常、APIキーではなく\*\*セッション認証（管理画面）\*\*から呼び出されます。

#### 4.1 バケット作成 (Create Bucket)

* Endpoint: `POST /create`
* Auth: Session Only (Cookie)
* Body: `{ "bucketName": "unique-name" }`

#### 4.2 バケット削除 (Delete Bucket)

バケットごと全データを削除します。

* Endpoint: `POST /delete`
* Auth: Session Only (Cookie)
* Body: `{ "bucketId": "..." }`

#### 4.3 容量同期 (Sync Stats)

データベース上の容量表示と、実際のクラウドストレージ上の容量にズレが生じた場合に実行し、正しい値に修正します。

* Endpoint: `POST /sync`
* Auth: API Key / Session
* Body: `{ "bucketId": "..." }`

**cURL Request**

Bash

```
curl -X POST "https://mini-vps.mixeder.com/api/storage/sync" \
  -H "x-api-key: YOUR_API_KEY_HERE" \
  -H "Content-Type: application/json" \
  -d '{ "bucketId": "YOUR_BUCKET_ID" }'
```

***

#### 4.4 APIキー管理

* 作成: `POST /apikey/create` - Body: `{ "bucketId": "..." }`
* 削除: `POST /apikey/delete` - Body: `{ "bucketId": "...", "apiKey": "..." }`

***

### 🚨 エラーコード一覧 (Error Codes)

APIはHTTPステータスコードで成否を返します。レスポンスボディには `{ "error": "詳細メッセージ" }` が含まれます。

| **Status** | **Code** | **説明**           | **対処法**                       |
| ---------- | -------- | ---------------- | ----------------------------- |
| ✅          | 200      | OK               | リクエスト成功。                      |
| ❌          | 400      | Bad Request      | パラメータ不足、またはファイルサイズ制限超過。       |
| ❌          | 401      | Unauthorized     | ログインしていない、またはセッション切れ。         |
| ❌          | 402      | Payment Required | クレジット残高不足。チャージしてください。         |
| ❌          | 403      | Forbidden        | APIキーが無効、または対象バケットへの権限がありません。 |
| ❌          | 404      | Not Found        | 指定されたバケットIDやファイルが存在しません。      |
| ❌          | 500      | Server Error     | サーバー内部エラー。管理者へ連絡してください。       |


# S3 APIでのアクセス

Mini-VPS オブジェクトストレージ（S3互換）への接続マニュアルを作成しました。

ユーザーに配布するドキュメントとして、あるいはWebサイトのヘルプページとしてご利用ください。

***

## Mini-VPS オブジェクトストレージ 接続マニュアル

Mini-VPSのオブジェクトストレージは S3互換プロトコル をサポートしています。

Cyberduck、WinSCP、AWS CLIなどの一般的なツールや、各種プログラミング言語のAWS SDKを使用して、ファイルのアップロードや管理が可能です。

### 📋 事前準備

接続には以下の情報が必要です。管理画面の「Storage」メニューから取得してください。

| **項目**            | **説明**       |
| ----------------- | ------------ |
| Access Key ID     | 発行したAPIキー    |
| Secret Access Key | 発行したシークレットキー |
| バケット名             | 作成したバケットの名前  |

### ⚙️ 基本接続設定 (共通)

どのツールを使用する場合でも、基本となる設定値は以下の通りです。

* 接続タイプ: S3 Compatible (S3互換) / HTTPS
* サーバー (Endpoint): `mini-vps.mixeder.com`
* ポート: `443`
* リージョン: `auto` (または `us-east-1`)
* パススタイル (Path Style): 有効 (ON) ※非常に重要

***

### 🦆 Cyberduck での接続方法 (Mac / Windows)

Cyberduckは設定が簡単で推奨されるクライアントです。

1. 「新規接続 (Open Connection)」 をクリックします。
2. 最上部のプロファイル選択リストから 「S3 (HTTPS)」 を選択してください。
   * ⚠️ 注意: 「Amazon S3」は選択しないでください。接続エラーになります。
3. 以下の通りに入力します。
   * Server: `mini-vps.mixeder.com`
   * Port: `443`
   * Access Key ID: (あなたのAPIキー)
   * Secret Access Key: (あなたのシークレットキー)
4. 「詳細設定 (More Options)」 を開き、Path (パス) が 空欄 であることを確認します。
   * ※もし `/api/...` などが入っている場合はすべて削除してください。
5. 「接続 (Connect)」 をクリックします。

<figure><img src="https://1682384196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiuTLjrObY2r3mTOGEnR0%2Fuploads%2FGRDNi3GmGmcRTWh3hE01%2Fji.png?alt=media&amp;token=7e011bf7-4e04-41df-be9f-c747bb9277de" alt=""><figcaption></figcaption></figure>

***

### 📂 WinSCP での接続方法 (Windows)

WinSCPを使用する場合は、詳細設定でバケット名を指定する必要があります。

1. 「新しいセッション」 画面を開きます。
2. 以下の通りに入力します。
   * 転送プロトコル: `Amazon S3`
   * ホスト名: `mini-vps.mixeder.com`
   * ポート番号: `443`
   * アクセスキーID: (あなたのAPIキー)
   * シークレットキー: (あなたのシークレットキー)
3. 「設定 (Advanced)...」 ボタンをクリックします。
4. 左メニューの 「環境 (Environment)」 > 「ディレクトリ (Directories)」 を選択します。
5. 「リモートディレクトリ (Remote directory)」 に `/あなたのバケット名` と入力します。
   * 例: バケット名が `my-app` なら `/my-app` と入力。
6. 「OK」を押して設定を閉じ、「ログイン」 をクリックします。

***

### 💻 AWS CLI での接続方法

コマンドラインから操作する場合の設定例です。

1\. プロファイルの設定

`~/.aws/credentials` に以下を追記します。

Ini, TOML

```
[minivps]
aws_access_key_id = (あなたのAPIキー)
aws_secret_access_key = (あなたのシークレットキー)
```

2\. コマンドの実行

必ず `--endpoint-url` オプションを指定してください。

Bash

```
# バケット内のファイル一覧を表示
aws s3 ls s3://(バケット名)/ --endpoint-url https://mini-vps.mixeder.com --profile minivps

# ファイルをアップロード
aws s3 cp test.txt s3://(バケット名)/ --endpoint-url https://mini-vps.mixeder.com --profile minivps
```

***

### 🐘 PHP (AWS SDK) での実装例

PHPからアクセスする場合、`use_path_style_endpoint` を `true` に設定するのがポイントです。

PHP

```
require 'vendor/autoload.php';

use Aws\S3\S3Client;

$s3 = new S3Client([
    'version' => 'latest',
    'region'  => 'auto',
    'endpoint' => 'https://mini-vps.mixeder.com',
    'use_path_style_endpoint' => true, // 【重要】これが必要です
    'credentials' => [
        'key'    => 'あなたのAPIキー',
        'secret' => 'あなたのシークレットキー',
    ],
]);

// ファイルアップロード
$s3->putObject([
    'Bucket' => 'あなたのバケット名',
    'Key'    => 'folder/image.png',
    'SourceFile' => './image.png',
]);
```

***

### ❓ よくある質問とトラブルシューティング

Q. "Access Denied" と表示される

A. APIキーまたはシークレットキーが間違っている可能性があります。また、APIキーはそのキーを発行したバケットに対してのみ有効です。別のバケットにアクセスしようとしていないか確認してください。

Q. フォルダが削除できない

A. フォルダの中にファイルが残っていると削除できない場合があります。中身を空にしてから削除してください。また、クライアントソフトによっては表示上のラグがあるため、一度「更新（リロード）」を行ってください。


# ユースケース

停止中は 「CPUとメモリの料金は止まるが、ディスク（ストレージ）料金は場所を確保しているため発生し続ける」 という、一般的なVPSの仕様に合わせたシミュレーションを作成しました。

この条件では、「いかにVPSのディスクサイズを小さく保つか」 が節約の最大の鍵となります。（VPSディスク単価はS3の200倍高いため）

***

#### 💡 料金計算の前提（1ヶ月 = 30日 = 43,200分）

比較しやすいように、1MBあたりの月額単価を算出しておきます。

* VPSディスク (確保分): 0.864 Credits / 1MB / 月 (停止中も発生)
* メモリ (稼働分): 4.32 Credits / 1MB / 月 (稼働時のみ)
* S3ストレージ: 0.0043 Credits / 1MB / 月 (常に発生)

***

#### 🎮 ケース1：週末限定のマインクラフトサーバー

「ハイスペックだが稼働時間は短い」 パターンです。

停止中もディスク料金がかかるため、ワールドデータ以外の不要なファイルは置かないのがコツです。

構成条件:

* 稼働時間: 週末のみ月20時間 (1,200分)
* VPSスペック:
  * メモリ: 2 GB (2,048 MB) - 起動時のみ課金
  * CPU: 平均 30% - 起動時のみ課金
  * ディスク: 1 GB (1,024 MB) - 常時課金
* バックアップ (S3):
  * 過去のワールドデータ: 5 GB

💰 月額コスト内訳

| **項目**        | **状態**    | **計算式**                                      | **コスト (Credits)** |
| ------------- | --------- | -------------------------------------------- | ----------------- |
| メモリ (2GB)     | 稼働 (20時間) | $$ $2,048 \times 0.0001 \times 1,200$ $$     | 245.76            |
| CPU (30%)     | 稼働 (20時間) | $$ $30 \times 0.0002 \times 1,200$ $$        | 7.20              |
| VPSディスク (1GB) | 常時 (1ヶ月)  | $$ $1,024 \times 0.00002 \times 43,200$ $$   | 884.74            |
| S3保存 (5GB)    | 常時 (1ヶ月)  | $$ $5,120 \times 0.0000001 \times 43,200$ $$ | 22.12             |
| 合計            |           |                                              | 約 1,160 Credits   |

> 分析: 稼働時間が短くても、VPSのディスク（1GB）を確保し続けているため、コストの 約75%がディスク代 になります。遊ばない期間が長いなら、S3にデータを退避してVPS自体を削除すれば、月額30クレジット以下に抑えられます。

***

#### 🤖 ケース2：常時稼働のDiscord Bot / APIサーバー

「ロースペックで24時間365日動かす」 パターンです。

メモリとディスクを極限まで削る構成です。

構成条件:

* 稼働時間: 24時間フル稼働 (43,200分)
* VPSスペック:
  * メモリ: 128 MB
  * CPU: 平均 2%
  * ディスク: 200 MB (コードと最小限のログのみ)
* S3ストレージ: なし

💰 月額コスト内訳

| **項目**          | **状態** | **計算式**                                  | **コスト (Credits)** |
| --------------- | ------ | ---------------------------------------- | ----------------- |
| メモリ (128MB)     | 常時     | $$ $128 \times 0.0001 \times 43,200$ $$  | 552.96            |
| CPU (2%)        | 常時     | $$ $2 \times 0.0002 \times 43,200$ $$    | 17.28             |
| VPSディスク (200MB) | 常時     | $$ $200 \times 0.00002 \times 43,200$ $$ | 172.80            |
| 合計              |        |                                          | 約 743 Credits     |

> 分析: ディスクを200MBまで節約したことで、初期クレジット(1000)の範囲内で1ヶ月以上の連続稼働が可能です。もしディスクを1GB確保してしまうと、それだけで+884クレジットかかり、赤字になります。

***

#### 🌐 ケース3：画像投稿サイト（Webアプリ + S3）

「VPSのディスクはコードだけ。データは全てS3」 という最も効率的な構成です。

VPSディスクを「プログラム実行用の一時領域」と割り切ることで、停止中のコストも最小化します。

構成条件:

* 稼働時間: 日中のみ稼働（1日12時間 = 月21,600分）
* VPSスペック:
  * メモリ: 512 MB
  * CPU: 平均 5%
  * ディスク: 100 MB (アプリ本体のみ。ログはS3へ転送して即削除)
* S3ストレージ:
  * ユーザー画像データ: 10 GB (10,240 MB)
  * 月間リクエスト: 20,000回

💰 月額コスト内訳

| **項目**          | **状態** | **計算式**                                       | **コスト (Credits)** |
| --------------- | ------ | --------------------------------------------- | ----------------- |
| メモリ (512MB)     | 半日稼働   | $$ $512 \times 0.0001 \times 21,600$ $$       | 1,105.92          |
| CPU (5%)        | 半日稼働   | $$ $5 \times 0.0002 \times 21,600$ $$         | 21.60             |
| VPSディスク (100MB) | 常時     | $$ $100 \times 0.00002 \times 43,200$ $$      | 86.40             |
| S3保存 (10GB)     | 常時     | $$ $10,240 \times 0.0000001 \times 43,200$ $$ | 44.24             |
| S3リクエスト         | -      | $$ $20,000 \times 0.001$ $$                   | 20.00             |
| 合計              |        |                                               | 約 1,278 Credits   |

> 分析: 10GBものデータを扱っているにも関わらず、それをS3に逃がしているためストレージコストは非常に低く抑えられています。もし10GBをVPSディスクに置いていたら、ディスク代だけで約8,800クレジット かかってしまいます。

***

#### 🛡️ 結論：この料金体系での「賢い使い方」

停止中もディスク料金がかかる場合、以下の3点が重要になります。

1. VPSのディスクは「最小限」にする
   * ログファイル、バックアップ、アップロードされた画像などは、VPS内に溜め込まず、すぐにS3へ転送してVPSからは削除しましょう。
   * VPSディスク単価(0.864)は、S3単価(0.0043)の 約200倍 です。
2. 長期停止するなら「削除」
   * 「1ヶ月使わない」という場合、停止(Stop)しておくだけではディスク代がかかり続けます。
   * 重要なデータだけS3に退避し、VPS自体を削除(Delete)すれば、維持費はS3代（数十クレジット）だけで済みます。
3. Docker等のイメージサイズに注意
   * 大きなライブラリを含む環境（1GB以上など）を作ると、それだけで毎月1,000クレジット近く消費します。Alpine Linuxベースなどの軽量な環境を使うのがおすすめです。


# 料金体系

Mini-VPSの料金体系は、1分単位で集計される完全従量課金制（Pay-as-you-go） です。

登録時に付与されるクレジット、または追加購入したクレジットから、リソース使用量に応じてリアルタイムに差し引かれます。

以下に、コード（`server.js`）内の設定値に基づいた詳細な料金表と計算ロジックを提示します。

#### 1. VPSコンピュート (Compute) 料金表

VPSインスタンスが稼働している間、以下のリソース使用量に基づいて課金されます。停止中（Stopped）の場合、CPUとメモリの課金は止まりますが、ストレージ（ディスク確保分）の課金は継続します。

| **課金項目** | **単価 (Credits)** | **計算単位** | **1時間あたりの目安 (60分稼働)**   | **1ヶ月あたりの目安 (30日稼働)**  |
| -------- | ---------------- | -------- | ----------------------- | ---------------------- |
| CPU使用率   | 0.0002           | 1% / 分   | 0.012 Credits (1%継続時)   | 8.64 Credits (1%継続時)   |
| メモリ使用量   | 0.0001           | 1MB / 分  | 0.006 Credits (1MB使用時)  | 4.32 Credits (1MB使用時)  |
| ディスク容量   | 0.00002          | 1MB / 分  | 0.0012 Credits (1MB確保時) | 0.864 Credits (1MB確保時) |

計算式:

<figure><img src="https://1682384196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiuTLjrObY2r3mTOGEnR0%2Fuploads%2FZ9WjkhWcUGNDtsiIaTWP%2Fimage.png?alt=media&amp;token=06644460-097a-4d2d-a74c-35c4190b8a3a" alt=""><figcaption></figcaption></figure>

***

#### 2. オブジェクトストレージ (S3互換) 料金表

AWS S3互換のストレージサービスです。保存容量とリクエスト回数の2軸で課金されます。

| **課金項目** | **単価 (Credits)** | **計算単位** | **備考・換算**                           |
| -------- | ---------------- | -------- | ----------------------------------- |
| 保存容量     | 0.0000001        | 1MB / 分  | 1GBを1ヶ月保存した場合：約 4.4 Credits         |
| APIリクエスト | 0.001            | 1回       | Upload, Download, List, Deleteなど全操作 |

計算式:

<figure><img src="https://1682384196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiuTLjrObY2r3mTOGEnR0%2Fuploads%2FSTVoCIRyjWO1MCoE49bF%2Fimage.png?alt=media&amp;token=41217400-3651-4c22-9c78-38bfc15effca" alt=""><figcaption></figcaption></figure>

***

#### 3. ネットワーク転送量 料金表

VPSおよびオブジェクトストレージへのアクセス時に発生するトラフィックに対する課金です。

| **課金項目** | **単価 (Credits)** | **計算単位** | **備考**            |
| -------- | ---------------- | -------- | ----------------- |
| データ転送    | 0.02             | 1MB      | 送信(TX)・受信(RX)の合計値 |

計算式:

<figure><img src="https://1682384196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiuTLjrObY2r3mTOGEnR0%2Fuploads%2Fy9H75KIjR2CthNvpT069%2Fimage.png?alt=media&amp;token=3d8e61a6-50af-4498-9eba-2cb0b601c369" alt=""><figcaption></figcaption></figure>

***

#### 💰 料金シミュレーション：軽量アプリ構成（Discord Botや簡単なAPIサーバーなど）

前提条件:

* 稼働時間: 1ヶ月間フル稼働（30日 = 43,200分）
* メモリ使用量: 40 MB （平均）
* ディスク使用量: 100 MB （固定）
* CPU使用率: 3 % （平均と仮定）
* ネットワーク転送: 1GB/月 （送受信合計と仮定）

**1ヶ月あたりの内訳**

<figure><img src="https://1682384196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiuTLjrObY2r3mTOGEnR0%2Fuploads%2FEP9Ruw9AUB5qn4P0p1hu%2Fimage.png?alt=media&amp;token=5a28fd38-fafb-4479-9cc8-f6c355e19d41" alt=""><figcaption></figcaption></figure>

#### 💡 この構成のポイント

1. 初期クレジット（1,000 Credits）の持ち時間
   * この構成であれば、登録時にもらえる1,000クレジットだけで 約 3ヶ月強 サーバーを維持できる計算になります。
2. コストの比重
   * この小規模構成では、メモリ（RAM）のコストが全体の約6割を占めます。
   * ディスク容量は単価が安いため、100MB程度であれば月額86クレジット程度と、非常に安価に収まります。
3. 変動要因
   * プログラムが一時的に重い処理をしてCPU使用率が上がったり、メモリリークでメモリ使用量が増えたりすると、その分だけ消費スピードが早くなります。
   * 逆に、待機時間が長くCPUがほぼ 0% の状態であれば、さらに安くなります。

***

#### ⚠️ 課金に関する重要事項

1. クレジット枯渇時の挙動
   * クレジット残高が `0` 以下になった瞬間、稼働中のすべてのVPSプロセスは強制停止（SIGKILL）されます。
   * API経由での新規ファイルのアップロードも拒否されます（HTTP 402 Payment Required）。
   * ※データの削除はされませんが、サービスの利用再開にはクレジットのチャージが必要です。
2. 計算タイミング
   * システムは 60秒（1分）間隔 でリソースの使用状況をスキャンし、その瞬間の値を元に課金計算を行います。
3. 小数点の扱い
   * 内部計算では小数点以下の細かい数値まで保持されますが、表示上は四捨五入される場合があります。