Creating and publishing an NPM package can enhance your portfolio and allow you to share reusable code with the community. Recently I released [my own first package, a manga web reader](https://www.npmjs.com/package/mangatsu-reader) ([github.com/Mangatsu/mangatsu-reader](https://github.com/Mangatsu/mangatsu-reader)) that is still very much experimental. This guide will walk you through setting up a repository for a TypeScript project, as well as configuring the project with useful linting software, and finally how to build and publish your package to NPM.

#### Prerequisites

- npm v10.0.0+
- Internet connection

### Step 0: Choose your license

As for npm packages, usually MIT (or ISC) is recommended for the straightforwardness and ease of use. Sometimes, depending on the use case, Apache 2.0 with patent grant or strong copyleft license like (A)GPL 3.0 might fit your needs as well. Be sure to remember to create the `LICENSE` (or `COPYING`) file!

### Step 1: Setting up the NPM package

1. Initialize your NPM package: Start by creating a new directory for your project and navigating into it. Then initialize your project using `npm init`.
    ```bash
    mkdir name-of-the-package
    cd name-of-the-package
    npm init -y
    ```
    This will generate a `package.json` file with default configurations.
2. Initialize git with `git init` and create `.gitignore` file
3. Install TypeScript and related dependencies: To get started with TypeScript, you need to install TypeScript as well as some type definitions + rimraf for cleaning up
    ```bash
    npm install --save-dev typescript @types/node rimraf
    ```
4. Set up TypeScript configuration: Create a `tsconfig.json` file for your TypeScript configuration.
    ```json
    {
      "compilerOptions": {
        /* Language and Environment */
        "target": "ES2022",
        "lib": ["ES2022", "DOM", "DOM.Iterable"],
        "types": ["node", "react"],
        "jsx": "react",
        "useDefineForClassFields": true,
        /* Modules */
        "module": "ESNext",
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": false,
        "resolveJsonModule": true,
        /* JavaScript Support */
        "allowJs": false,
        /* Emit */
        "declaration": true,
        "outDir": "./lib",
        "declarationDir": "./lib",
        /* Interop Constraints */
        "isolatedModules": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        /* Type Checking */
        "strict": true,
        "noUnusedLocals": false,
        "noUnusedParameters": false,
        "noFallthroughCasesInSwitch": true,
        /* Completeness */
        "skipLibCheck": true
      },
      "include": ["src/**/*"],
      "exclude": ["node_modules", "lib"]
    }
    ```
    This setup ensures that TypeScript compiles source files from the `src` directory and outputs them into the `lib` directory.

### Step 2: Setting up linting (ESLint, Prettier, Husky)
1. Install dev dependencies:
    ```bash
    npm install --save-dev prettier eslint prettier-eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
    ```
2. Create configuration files:
    `eslint.config.mjs`:
    ```json
    {
      "semi": false,
      "trailingComma": "all",
      "singleQuote": false,
      "tabWidth": 2,
      "useTabs": false,
      "printWidth": 120,
      "endOfLine": "lf"
    }
    ```

### (Optional) Setting up Husky pre-commit hook for automatic linting
1. Install Husky and lint-staged:
    ```bash
    npm install --save-dev husky lint-staged
    npx husky install
    ```
2. Configure lint-staged: Add a lint-staged configuration to run Prettier and ESLint on staged files before committing. In your package.json, add the following:
    ```json
    "lint-staged": {
      "*.{ts,tsx,js,jsx}": "eslint --cache --fix",
      "*.{ts,tsx,js,jsx,css,md}": "prettier --write"
    }
    ```
    ```json
    "scripts": {
      "prepare": "husky"
    }
    ```
3. Add pre-commit hook:
    ```bash
    echo "npx lint-staged" > .husky/pre-commit
    ```

### Step 3: Setting up the build process
1. Update the build script: Add a tsc, clean and build commands to your package.json using the TypeScript compiler (tsc).
    ```json
    "scripts": {
      "tsc": "tsc -p tsconfig.json",
      "clean": "rimraf lib && rimraf build",
      "build": "npm run clean && npm run tsc"
    }
    ```
    Running `npm run build` will compile your TypeScript files from src to the lib directory.
2. Copy assets after the build: If your package includes non-TypeScript files (e.g., images, JSON files, etc.), you can add a script to copy those assets to your lib folder. In package.json, add the following script:
    ```json
    "scripts": {
      "copy-assets": "node -e \"require('fs').cpSync('./src/assets', './lib/assets', {recursive: true});\"",
    }
    ```
3. Final build command
    ```json
    "scripts": {
      "build": "npm run clean && npm run tsc && npm run copy-assets"
    }
    ```

### Step 4: Publishing to package npm
1. Login to NPM: `npm login`
2. Update your package.json with metadata: Ensure your package.json has a valid name, version, description, main, license, and files field. The files field specifies which files are included in the package:
    ```json
    {
      "name": "name-of-the-package",
      "version": "0.1.0",
      "description": "",
      "main": "./lib/index.js",
      "types": "./lib/index.d.ts",
      "type": "module",
      "files": [
        "lib/"
      ],
      "repository": {
        "type": "git",
        "url": "github.com/<user,org>/<name-of-the-package>"
      },
      "keywords": [
        "typescript"
      ],
      "author": "Marko Kristian Leinikka",
      "license": "MIT"
    }
    ```
    3. Publish the package: `npm publish`. If it's your first time publishing, you can use `npm publish --access public` to make it publicly accessible.

### Conclusion

You've now created a TypeScript NPM package with linting, formatting, pre-commit hooks, and a build process that handles asset copying. Whether you're publishing utility functions or a full-fledged library, this setup will help ensure a smooth workflow and quality code.

By following this guide, you should now be able to confidently publish your TypeScript packages to NPM and manage a clean, maintainable codebase.

Learned how to build and publish an npm package

thumbnail_npm.png

npm.png

NPMパッケージを作って公開することで、ポートフォリオの強化もできて、便利なコードをコミュニティと共有できる。この間、自分の初めてのNPMパッケージを、[漫画ビューアー](https://www.npmjs.com/package/mangatsu-reader)（[github.com/Mangatsu/mangatsu-reader](https://github.com/Mangatsu/mangatsu-reader)）を、まだ完全にα版みたいなものではあるが、作って公開した。このガイドでは、TypeScriptプロジェクトのリポジトリをセットアップして、便利なリンティングツールを使う設定、最後にパッケージをNPMに公開する方法を説明するよ。

#### 前提条件

- npm v10.0.0以上
- ネット接続

### ステップ 0: ライセンスを選ぶ

npmパッケージの場合、MIT（またはISC）がシンプルで使いやすいからおすすめ。でも、使い方によってはApache 2.0（特許付き）や(A)GPL 3.0みたいな強力なコピーレフトライセンスが合うかも。`LICENSE`（もしくは`COPYING`）ファイルを作成するのを忘れないように！

### ステップ 1: NPMパッケージのセットアップ

1. **NPMパッケージの初期化**: プロジェクト用のディレクトリを作って移動してから、`npm init`でプロジェクトを初期化する。
    ```bash
    mkdir name-of-the-package
    cd name-of-the-package
    npm init -y
    ```
    これでデフォルト設定の `package.json` ファイルが生成される。
2. **gitの初期化**: `git init` でGitを初期化して、`.gitignore`ファイルを作成。
3. **TypeScriptと関連する依存パッケージのインストール**: TypeScriptや型定義、クリーンアップ用の `rimraf` をインストール。
    ```bash
    npm install --save-dev typescript @types/node rimraf
    ```
4. **TypeScript設定の作成**: `tsconfig.json`ファイルを作成して、TypeScriptの設定を行う。
    ```json
    {
      "compilerOptions": {
        "target": "ES2022",
        "lib": ["ES2022", "DOM", "DOM.Iterable"],
        "types": ["node", "react"],
        "jsx": "react",
        "useDefineForClassFields": true,
        "module": "ESNext",
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": false,
        "resolveJsonModule": true,
        "allowJs": false,
        "declaration": true,
        "outDir": "./lib",
        "declarationDir": "./lib",
        "isolatedModules": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noUnusedLocals": false,
        "noUnusedParameters": false,
        "noFallthroughCasesInSwitch": true,
        "skipLibCheck": true
      },
      "include": ["src/**/*"],
      "exclude": ["node_modules", "lib"]
    }
    ```
    この設定で、`src` ディレクトリからファイルをコンパイルして、`lib`ディレクトリに出力される。

### ステップ 2: リンティングの設定（ESLint、Prettier、Husky）

1. **開発依存パッケージのインストール**:
    ```bash
    npm install --save-dev prettier eslint prettier-eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
    ```
2. **設定ファイルの作成**:
    `eslint.config.mjs`:
    ```json
    {
      "semi": false,
      "trailingComma": "all",
      "singleQuote": false,
      "tabWidth": 2,
      "useTabs": false,
      "printWidth": 120,
      "endOfLine": "lf"
    }
    ```

### （オプション） Huskyのプレコミットフックで自動リンティングを設定

1. **Huskyとlint-stagedのインストール**:
    ```bash
    npm install --save-dev husky lint-staged
    npx husky install
    ```
2. **lint-stagedの設定**: PrettierとESLintをコミット前に実行する設定を追加する。`package.json`に以下を追加。
    ```json
    "lint-staged": {
      "*.{ts,tsx,js,jsx}": "eslint --cache --fix",
      "*.{ts,tsx,js,jsx,css,md}": "prettier --write"
    }
    ```
    ```json
    "scripts": {
      "prepare": "husky"
    }
    ```
3. **プレコミットフックの追加**:
    ```bash
    echo "npx lint-staged" > .husky/pre-commit
    ```

### ステップ 3: ビルドプロセスの設定

1. **ビルドスクリプトの更新**: `package.json` に `tsc`, `clean`, `build` コマンドを追加。
    ```json
    "scripts": {
      "tsc": "tsc -p tsconfig.json",
      "clean": "rimraf lib && rimraf build",
      "build": "npm run clean && npm run tsc"
    }
    ```
    `npm run build` で `src` から `lib` ディレクトリにTypeScriptファイルがコンパイルされる。
2. **ビルド後にアセットをコピー**: パッケージに画像やJSONなどの非TypeScriptファイルが含まれている場合、次のスクリプトを追加してそれらを `lib` フォルダにコピーする。
    ```json
    "scripts": {
      "copy-assets": "node -e \"require('fs').cpSync('./src/assets', './lib/assets', {recursive: true});\"",
    }
    ```
3. **最終ビルドコマンド**:
    ```json
    "scripts": {
      "build": "npm run clean && npm run tsc && npm run copy-assets"
    }
    ```

### ステップ 4: npmパッケージの公開

1. **NPMにログイン**: `npm login`
2. **`package.json`のメタデータを更新**: `package.json`に、名前、バージョン、説明、メイン、ライセンス、ファイルフィールドを追加。ファイルフィールドでパッケージに含まれるファイルを指定する。
    ```json
    {
      "name": "name-of-the-package",
      "version": "0.1.0",
      "description": "",
      "main": "./lib/index.js",
      "types": "./lib/index.d.ts",
      "type": "module",
      "files": [
        "lib/"
      ],
      "repository": {
        "type": "git",
        "url": "github.com/<user,org>/<name-of-the-package>"
      },
      "keywords": [
        "typescript"
      ],
      "author": "Marko Kristian Leinikka",
      "license": "MIT"
    }
    ```
3. **パッケージを公開**: `npm publish`。初回公開時には `npm publish --access public` でパッケージを公開することができる。

### まとめ

これで、リンティング、フォーマット、プレコミットフック、アセットコピーを含むビルドプロセスを備えたTypeScript NPMパッケージが作成できた。ユーティリティ関数やライブラリを公開するとき、このセットアップがスムーズなワークフローと高品質なコードを維持するのに役立つ。

このガイドに沿って、TypeScriptパッケージをNPMに自信を持って公開し、綺麗でメンテナンスしやすいコードベースを管理できるようになるはず。


npmパッケージのビルドと公開のやり方を学ぼう

npmパッケージの公開方法

Publishing an npm package

Marko Leinikka

When diving into modern authentication mechanisms, OAuth 2.0 stands out as one of the most widely adopted standards. I learned about key OAuth 2.0 authorization flow methods, each tailored to specific use cases. In this post, I'll walk through what I've learned about these methods, their purpose, and how they compare.

### 1. Authorization Code Grant

#### Explanation

The **Authorization Code Grant** is the most common OAuth 2.0 flow, designed for secure client-server communication. It is primarily used in web and native applications to exchange an authorization code for an access token.

1. **User Authentication**: The user authenticates with the authorization server.
2. **Authorization Code**: The client app receives an authorization code via a redirect URI after the user has authenticated.
3. **Token Exchange**: The client exchanges the authorization code for an access token by making a POST request to the authorization server.

This flow is secure because the access token is never exposed to the browser, and the authorization code is exchanged server-side.

<img width="750px" alt="Flow chart" src="https://strapi.kohana.fi/uploads/authcode_grant_9f937990d6.png" />

```json
POST /token HTTP/1.1
Host: auth.example.com
Content-Type: application/json

{
  "grant_type": "authorization_code",
  "code": "<authorization_code>",
  "client_id": "<client-id>",
  "client_secret": "<client-secret>",
  "redirect_uri": "https://example.com/callback"
}
```

#### 2. Authorization Code Grant with PKCE

The **Authorization Code Grant** is very similar to the original Authorization Code Grant with one exception: To address the security vulnerabilities in public clients (like mobile apps or single-page apps), OAuth 2.0 introduced **Proof Key for Code Exchange (PKCE)**. This adds an extra layer of security, ensuring that the client that initiates the request is the one that can exchange the authorization code for the access token.

1. **Code Verifier & Code Challenge**: The client generates a random string (code verifier) and hashes it to create a code challenge.
2. **Authorization Request**: The client sends the code challenge during the authorization request.
3. **Token Exchange**: The client sends the code verifier along with the authorization code to exchange for an access token.

<img width="750px" alt="Flow chart" src="https://strapi.kohana.fi/uploads/pkce_grant_34699dda1e.png" />

```json
POST /token HTTP/1.1
Host: auth.example.com
Content-Type: application/json

{
  "grant_type": "authorization_code",
  "code": "<authorization_code>",
  "client_id": "<client-id>",
  "code_verifier": "<code_verifier>",
  "redirect_uri": "https://example.com/callback"
}
```

```typescript
// Helper function to generate a code challenge from the verifier
async function generateCodeChallenge(verifier: string) {
  // Encodes the verifier
  const encoder = new TextEncoder()
  const data = encoder.encode(verifier)

  // Hashes the encoded verifier
  const hashBuffer = await crypto.subtle.digest("SHA-256", data)
  const hashArray = Array.from(new Uint8Array(hashBuffer))

  // Encodes the hash as base64
  const base64String = btoa(String.fromCharCode.apply(null, hashArray))

  // Converts the base64 string to a URL safe string
  return base64String.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "")
}
```

#### 3. Implicit Grant (deprecated)

The **Implicit Grant** was designed for client-side applications like Single Page Applications (SPAs). However, this grant type is now deprecated due to its security vulnerabilities. It exposes access tokens directly in the URL fragment, which could be intercepted by malicious actors.

1. Client requests an access token directly from the authorization server.
2. The access token is returned in the URL fragment, which is visible to the client and potentially exposed to malicious actors.

Because of the exposed access tokens in URL can lead to potential security risks, **instead, Authorization Code Grant with PKCE** is now the recommended flow for client-side apps.

<img width="750px" alt="Flow chart" src="https://strapi.kohana.fi/uploads/implicit_grant_5fc1451fdc.png" />

#### 4. Client Credentials Grant

The **Client Credentials Grant** is for machine-to-machine communication. In this flow, the client application authenticates with its own credentials (client ID and secret) to obtain an access token, typically for accessing its own resources or a third-party API.

1. **Client** authenticates with the authorization server using its client ID and secret.
2. **Authorization server** issues an access token to the client.
3. **Client** uses the access token to access protected resources.

<img width="750px" alt="Flow chart" src="https://strapi.kohana.fi/uploads/clientcredentials_grant_d755b2d7b6.png" />

```json
POST /token HTTP/1.1
Host: auth.example.com
Content-Type: application/json

{
  "grant_type": "client_credentials",
  "client_id": "<client-id>",
  "client_secret": "<client-secret>"
}
```

#### 5. Extension Grant

The **Extension Grant** is a custom grant type used for special use cases that don't fit into standard OAuth 2.0 flows. For example, the **Device Authorization Grant** (RFC 8628) allows devices with limited input capabilities (like smart home devices) to request authorization through a secondary device, like a smartphone.

1. **Device** requests authorization from the server.
2. **User** completes the authorization on a separate device (e.g., smartphone).
3. **Device** is issued an access token after user approval.

<img width="750px" alt="Flow chart" src="https://strapi.kohana.fi/uploads/extension_grant_8b856c526c.png" />

#### Conclusion

Learning about these different OAuth 2.0 authorization methods has been an eye-opener in understanding both security concerns and proper implementations for different scenarios. While the Authorization Code Grant with PKCE is the recommended choice for public apps due to its enhanced security, especially for mobile and single-page applications, other flows like Client Credentials Grant and Extension Grants are vital for machine-to-machine and custom use cases.

The Authorization Code Grant stands out as the most flexible and widely applicable, especially in situations where user interaction is needed. Its ability to securely exchange an authorization code for an access token without exposing sensitive credentials in the front-end has made it the standard for web-based authentication. The addition of PKCE ensures that even public clients, which cannot protect client secrets, can maintain a high level of security. This makes PKCE an essential feature in any modern web or mobile app that involves sensitive user data.

On the other hand, the Client Credentials Grant is fundamental in server-to-server communication, where no user is involved. It’s particularly useful for backend services that need to authenticate with APIs or microservices. By utilizing machine-to-machine communication, this grant type ensures that systems can securely interact without user intervention, enabling seamless automation in many cloud or enterprise-level architectures.

For use cases where standard grants do not suffice, the Extension Grants provide the flexibility needed to build custom authentication flows. This includes scenarios like the Device Authorization Grant, which is particularly beneficial for IoT devices and smart devices like wearables, TVs, and other appliances with limited input capabilities. Such grants show how OAuth 2.0 can be adapted to fit evolving technological needs and non-traditional client environments.

Understanding these flows is essential when designing secure, scalable, and flexible authentication systems. Each flow serves a specific use case, and leveraging the right grant type can dramatically reduce security risks while improving the user experience. In the context of a rapidly evolving digital landscape, OAuth 2.0 provides a robust and standardized approach to managing access across diverse systems and devices, making it the go-to framework for modern identity management.

Finally, the OAuth 2.0 framework continues to evolve with industry needs, and knowing when and how to use each flow helps developers and system architects stay ahead of security threats. Implementing the right authorization method not only protects user data but also helps maintain the integrity of the systems in which these methods are deployed.

I learned about the key OAuth 2.0 authorization flow methods

large_oauth2.jpg

medium_oauth2.jpg

small_oauth2.jpg

thumbnail_oauth2.jpg

oauth2.jpg

OAuth 2.0は、現代の認証メカニズムの中で最も広く採用されている標準の一つ。特に、異なるユースケースに合わせた複数の認証フローが存在することを学んだ。このポストでは、それぞれのフローの役割や目的、そしてどういった違いがあるかを見ていく。

### 1. 認可コードグラント

#### 説明

**Authorization Code Grant** は、最も一般的なOAuth 2.0のフローで、クライアントとサーバー間の安全な通信のために設計されている。主にウェブやネイティブアプリで、認証コードをアクセストークンに交換するために使われる。

1. **ユーザー認証**: ユーザーが認証サーバーで認証を行う。
2. **認可コード**: 認証が完了した後、リダイレクトURIを通してクライアントアプリが認可コードを受け取る。
3. **トークン交換**: クライアントがPOSTリクエストを認証サーバーに送り、認可コードをアクセストークンに交換する。

このフローは、アクセストークンがブラウザに公開されることがなく、認可コードはサーバー側で安全に処理されるため、セキュリティが保たれる。

<img width="750px" alt="Flow chart" src="https://strapi.kohana.fi/uploads/authcode_grant_9f937990d6.png" />

```json
POST /token HTTP/1.1
Host: auth.example.com
Content-Type: application/json

{
  "grant_type": "authorization_code",
  "code": "<authorization_code>",
  "client_id": "<client-id>",
  "client_secret": "<client-secret>",
  "redirect_uri": "https://example.com/callback"
}
```

### 2. PKCE付き認可コードグラント

**Authorization Code Grant with PKCE**は認可コードグラント（Authorization Code Grant）とほぼ同じ流れとなっている。唯一の差は、公開クライアント（モバイルアプリやシングルページアプリなど）のセキュリティリスクに対処するためにOAuth 2.0で 導入された**PKCE (Proof Key for Code Exchange)** がフローのステップになっているということ。これにより、リクエストを行ったクライアントだけが認可コードをアクセストークンに交換できるようにする追加のセキュリティが提供される。

1. **コードベリファイア & コードチャレンジ**: クライアントがランダムな文字列（コードベリファイア）を生成し、それをハッシュ化してコードチャレンジを作成する。
2. **認可リクエスト**: クライアントが認可リクエスト中にコードチャレンジを送信する。
3. **トークン交換**: クライアントが認可コードと共にコードベリファイアを送信し、アクセストークンを取得する。

<img width="750px" alt="Flow chart" src="https://strapi.kohana.fi/uploads/pkce_grant_34699dda1e.png" />

```json
POST /token HTTP/1.1
Host: auth.example.com
Content-Type: application/json

{
  "grant_type": "authorization_code",
  "code": "<authorization_code>",
  "client_id": "<client-id>",
  "code_verifier": "<code_verifier>",
  "redirect_uri": "https://example.com/callback"
}
```

```typescript
// Helper function to generate a code challenge from the verifier
async function generateCodeChallenge(verifier: string) {
  // Encodes the verifier
  const encoder = new TextEncoder()
  const data = encoder.encode(verifier)

  // Hashes the encoded verifier
  const hashBuffer = await crypto.subtle.digest("SHA-256", data)
  const hashArray = Array.from(new Uint8Array(hashBuffer))

  // Encodes the hash as base64
  const base64String = btoa(String.fromCharCode.apply(null, hashArray))

  // Converts the base64 string to a URL safe string
  return base64String.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "")
}
```

### 3. インプリシットグラント（非推奨）

**Implicit Grant** は、クライアントサイドのアプリ（例えばシングルページアプリケーション）向けに設計されたもの。しかし、セキュリティの問題があるため、現在は非推奨となっている。このフローでは、アクセストークンがURLフラグメントに直接露出するため、悪意のある第三者にインターセプトされる可能性がある。

1. クライアントが直接認証サーバーからアクセストークンをリクエスト。
2. アクセストークンがURLフラグメント内で返され、これがクライアントに表示されるため、潜在的に危険。

アクセストークンがURLに露出してしまうとセキュリティリスクが高まるため、**PKCE付き認可コードグラント**がクライアントサイドアプリ向けの推奨フローとなっている。

<img width="750px" alt="Flow chart" src="https://strapi.kohana.fi/uploads/implicit_grant_5fc1451fdc.png" />

### 4. クライアントクレデンシャルグラント

**Client Credentials Grant** は、マシン間通信用のフロー。クライアントアプリケーションが自身のクレデンシャル（クライアントIDとシークレット）を使って認証サーバーに認証を行い、アクセストークンを取得する。主に自分のリソースやサードパーティのAPIにアクセスするために使われる。

1. **クライアント** がクライアントIDとシークレットを使って認証サーバーに認証を行う。
2. **認証サーバー** がクライアントにアクセストークンを発行。
3. **クライアント** がアクセストークンを使って保護されたリソースにアクセスする。

<img width="750px" alt="Flow chart" src="https://strapi.kohana.fi/uploads/clientcredentials_grant_d755b2d7b6.png" />

```json
POST /token HTTP/1.1
Host: auth.example.com
Content-Type: application/json

{
  "grant_type": "client_credentials",
  "client_id": "<client-id>",
  "client_secret": "<client-secret>"
}
```

### 5. エクステンショングラント

**Extension Grant** は、標準のOAuth 2.0フローに適合しない特定のユースケースに対応するためのカスタムグラントタイプ。例えば、**デバイス認証グラント (Device Authorization Grant)** は、スマートホームデバイスなど入力が限られたデバイスが、スマートフォンなどのセカンダリデバイスを使って認証を行うために利用される。

1. **デバイス** がサーバーに認証リクエストを送信。
2. **ユーザー** が別のデバイス（例: スマートフォン）で認証を完了。
3. **デバイス** はユーザー承認後にアクセストークンを受け取る。

<img width="750px" alt="Flow chart" src="https://strapi.kohana.fi/uploads/extension_grant_8b856c526c.png" />

### さいごに

これらのOAuth 2.0認証フローを学ぶことで、さまざまなシナリオにおけるセキュリティの懸念や、適切な実装方法を理解することができた。モバイルアプリやシングルページアプリ向けには、PKCE付きの認可コードグラントが推奨されるが、サーバー間通信やカスタムユースケースでは、**Client Credentials Grant** や **Extension Grant** などのフローが重要になる。

特に、**Authorization Code Grant** は柔軟性が高く、ユーザーの関与が必要なシチュエーションに最も適している。フロントエンドに機密情報を露出させることなく、認可コードを安全にアクセストークンに交換できる点が、このフローの最大の利点だ。PKCEを追加することで、クライアントシークレットを保護できない公開クライアントでも高いセキュリティレベルを維持できる。

一方、**Client Credentials Grant** は、ユーザーが関与しないサーバー間通信に不可欠だ。特にバックエンドサービスがAPIやマイクロサービスに認証する必要がある場合に便利で、マシン間での自動化をサポートする。

また、標準的なグラントでは対応できないユースケースには、**Extension Grant** が柔軟な認証フローを提供する。IoTデバイスやスマートデバイス向けの **Device Authorization Grant** はその良い例で、入力が制限されたデバイスに最適だ。こうした拡張グラントにより、OAuth 2.0は進化するテクノロジーや非伝統的なクライアント環境にも対応できる。

これらのフローを理解することは、セキュアで拡張可能な認証システムを設計する際に非常に重要だ。それぞれのフローには特定のユースケースがあり、適切なグラントタイプを活用することで、セキュリティリスクを大幅に減らし、ユーザーエクスペリエンスを向上させることができる。急速に進化するデジタル環境において、OAuth 2.0は多様なシステムやデバイス間でアクセスを管理するための堅牢で標準化されたアプローチを提供し、現代のアイデンティティ管理において欠かせないフレームワークとなっている。

最後に、OAuth 2.0は業界のニーズに合わせて進化を続けており、それぞれのフローをいつ、どのように使うべきかを理解することで、開発者やシステムアーキテクトはセキュリティ脅威に先んじて対処することができる。適切な認証方法を実装することは、ユーザーデータを保護するだけでなく、システム全体の健全性を維持するためにも重要だ。


OAuth 2.0の認証フローに関して理科してみた

OAuth 2.0 認証フローを理解してみた

Understanding OAuth 2.0 Authorization Methods

### Introduction

Kubernetes has become one of the most important tools in the DevOps world, offering powerful orchestration for containerized applications. After completing the [DevOps with Kubernetes](https://devopswithkubernetes.com) course, I now have a much clearer understanding of how Kubernetes works and how it can be used to manage software at scale. This course was a great starting point, introducing me to essential Kubernetes concepts, including microservice architecture, automated deployment, and scaling. Here’s my report on what I learned, what Kubernetes is, and how this powerful software can transform the way we develop and manage applications.

### What is Kubernetes?

Kubernetes (often abbreviated as K8s) is an open-source container orchestration platform designed to automate the deployment, scaling, and management of containerized applications. Developed by Google, it has since become the de facto standard for managing cloud-native applications.

In essence, Kubernetes simplifies the complex process of managing application containers across multiple environments. It ensures that your applications run smoothly by automating deployment, scaling, and operations. Whether you're working with a small cluster or managing applications that span multiple cloud environments, Kubernetes is built to handle it all.

### Course Breakdown: From Fundamentals to Advanced Concepts

The **"DevOps with Kubernetes"** course is divided into five parts, each focusing on different aspects of Kubernetes, from initial deployment to advanced techniques like service mesh and GitOps. Here's a breakdown of each section and what I learned:

#### Part 1: Getting Started with Kubernetes

The first part introduced me to Kubernetes with **K3s**. Here, I learned the basics:

- **First Deployment:** I was guided through my first Kubernetes deployment, learning how to deploy containerized applications in a cluster.
- **Debugging:** Introduction to debugging tools to identify issues within Kubernetes.
- **Networking and Storage:** Understanding how networking works between pods and managing persistent storage for applications.
  
This section provided a solid foundation, giving me a clear view of how Kubernetes orchestrates applications across nodes in a cluster.

#### Part 2: Networking and Cluster Management

Part two delved deeper into Kubernetes networking and cluster organization:

- **Networking between Pods:** I learned how Kubernetes manages communication between different services running inside the cluster. This covered setting up service discovery and managing pod-to-pod communication.
- **Cluster Organization:** This section focused on structuring clusters for better scalability and reliability, which is crucial as your application grows.
- **StatefulSets and Jobs:** I also learned about **StatefulSets**, which are essential when you need stable, persistent data and **Jobs** for running batch processes.

These concepts are fundamental to managing microservices that need reliable networking and persistent data.

#### Part 3: Working with Google Kubernetes Engine (GKE)

Part three was all about the Google Kubernetes Engine:

- **GKE Features:** We explored how to deploy and manage Kubernetes clusters on GKE, taking advantage of the cloud-native features that GKE offers, such as managed scaling and built-in monitoring.
- **Deployment Pipeline:** I learned about building a **CI/CD pipeline** that integrates with GKE, automating the deployment process for faster development cycles.

This section showcased Kubernetes' power in a cloud-native environment, demonstrating how GKE simplifies scaling and managing production-grade applications.

#### Part 4: Advanced Kubernetes Techniques

The fourth section introduced more advanced Kubernetes features:

- **Update Strategies and Monitoring:** I learned about rolling updates and canary deployments to minimize downtime during updates. **Prometheus** was introduced as a monitoring tool to ensure applications are healthy.
- **GitOps:** This was an interesting concept, which integrates **git** as a single source of truth for application infrastructure, streamlining deployments and infrastructure management.
- **Messaging Systems:** We also touched on integrating messaging systems like NATS, which is essential for distributed applications.

This section helped me understand how Kubernetes can handle sophisticated update strategies and how GitOps integrates with infrastructure as code.

#### Part 5: Kubernetes Internals and Beyond

The final part took a deep dive into the internals of Kubernetes:

- **Kubernetes Internals:** Here, I gained insights into how Kubernetes works under the hood. Understanding its internal architecture gave me a much deeper appreciation of its power and flexibility.
- **Custom Resource Definitions (CRDs):** CRDs allow developers to extend Kubernetes' functionality by defining custom resources, opening the door to highly specialized workloads.
- **Service Mesh and Beyond:** Finally, we explored **Service Mesh** technologies, like Istio, which manage the communication between services in a more secure and observable way.

This part was the most advanced, focusing on how Kubernetes can be extended and optimized for specific use cases. It also looked at Kubernetes' future and how it is evolving to meet the needs of modern software development.

### What Makes Kubernetes Powerful?

Through this course, I realized that Kubernetes is much more than just a tool for deploying containers. It’s a platform for managing the entire lifecycle of containerized applications. A few key takeaways:

- **Scalability:** Kubernetes automates scaling, ensuring applications can handle increased load without manual intervention.
- **Resilience:** Built-in features like **self-healing**, **auto-scaling**, and **load balancing** mean that Kubernetes keeps applications running smoothly, even when individual components fail.
- **Flexibility:** From running a simple containerized app on a local machine using K3s to managing complex multi-cloud deployments with GKE, Kubernetes handles it all.

### Conclusion

Completing the "DevOps with Kubernetes" course gave me a strong foundation in using Kubernetes to manage modern software architectures. I learned how Kubernetes automates the complexities of deploying, scaling, and managing applications, making it an essential tool for any DevOps workflow. Whether working with a small team or deploying at a global scale, Kubernetes simplifies the process and offers robust tools to manage applications efficiently.

Kubernetes is an incredibly powerful piece of software, and I’m excited to continue exploring its potential, especially in larger, more complex environments. This course has not only demystified Kubernetes for me but has also shown how it can transform software development and deployment.

If you're looking to understand how to develop, manage, and scale microservices, I highly recommend starting with Kubernetes and this introductory course.


kubernetes.svg

### はじめに

Kubernetesは、コンテナ化されたアプリケーションを強力にオーケストレーションしてくれる今やDevOpsの世界で最も重要なツールの一つになっていてる。最近、「[DevOps with Kubernetes](https://devopswithkubernetes.com)」というコースを受講したことで、Kubernetesがどのように動作し、ソフトウェアをスケールして管理するのにどう活用できるかが、よりクリアに分かるようになった。このコースは、マイクロサービスアーキテクチャ、デプロイの自動化、スケーリングといったKubernetesの基本概念を学ぶには最適なスタート地点だった。ここでは、学んだこと、Kubernetesが何なのか、そしてこの強力なソフトウェアが開発・運用の方法をどう変えるかについてまとめてみた。

### Kubernetesとは？

Kubernetes（K8sと略されることもある）は、オープンソースのコンテナオーケストレーションプラットフォームで、コンテナ化されたアプリケーションのデプロイ、スケーリング、管理を自動化するように設計されている。Googleによって開発され、今ではクラウドネイティブアプリケーションを管理するデファクトスタンダードとなっている。

要するに、Kubernetesは複数の環境にわたるアプリケーションコンテナの管理をシンプルにしてくれる。アプリケーションのデプロイやスケーリング、運用を自動化することで、スムーズに動作させることができるんだ。小規模なクラスタであれ、複数のクラウド環境にまたがるアプリケーションであれ、Kubernetesはそれをすべて扱えるように作られている。

### コースの概要：基礎から応用まで

**「DevOps with Kubernetes」** コースは5つのパートに分かれていて、それぞれKubernetesの異なる側面に焦点を当てている。最初のデプロイから、サービスメッシュやGitOpsのような高度なテクニックまでカバーされている。各セクションで学んだことを以下にまとめてみた。

#### パート1：Kubernetesの基礎

最初のパートでは、**K3s**を使ってKubernetesの基本に取り組んだ。ここでは次のようなことを学んだ：

- **初めてのデプロイ:** 初めてKubernetesのデプロイを行い、クラスタ内にコンテナ化されたアプリケーションをデプロイする方法を学んだ。
- **デバッグ:** Kubernetes内で発生する問題を特定するためのデバッグツールについての導入。
- **ネットワーキングとストレージ:** Pod間のネットワークの仕組みと、アプリケーションのための永続的なストレージの管理方法を理解。

このセクションは、Kubernetesがノード間でアプリケーションをどのようにオーケストレーションしているのか、明確な理解を得るための基礎を築いてくれた。

#### パート2：ネットワークとクラスタ管理

パート2では、Kubernetesのネットワークとクラスタの管理にさらに深く掘り下げた：

- **Pod間のネットワーキング:** Kubernetesがクラスタ内で実行されているさまざまなサービス間の通信をどのように管理しているのかを学んだ。サービスディスカバリーの設定やPod間の通信の管理についても触れた。
- **クラスタの構成:** アプリケーションの成長に伴って、スケーラビリティと信頼性を確保するためのクラスタの構成に関する内容。
- **StatefulSetsとJobs:** 永続的なデータを必要とする場合に重要な**StatefulSets**や、バッチ処理を実行するための**Jobs**についても学んだ。

これらの概念は、信頼性の高いネットワーキングや永続的なデータを必要とするマイクロサービスを管理するために不可欠なものだ。

#### パート3：Google Kubernetes Engine（GKE）を使った作業

パート3では、Google Kubernetes Engineについて学んだ：

- **GKEの特徴:** GKEでKubernetesクラスタをデプロイして管理する方法を探り、スケーリングや組み込みのモニタリングなど、GKEのクラウドネイティブな機能を活用した。
- **デプロイパイプライン:** **CI/CDパイプライン**を構築し、GKEと統合して、より迅速な開発サイクルのためにデプロイプロセスを自動化する方法を学んだ。

このセクションでは、クラウドネイティブ環境でのKubernetesの力を実感でき、GKEがどのようにしてプロダクション向けアプリケーションのスケーリングと管理を簡素化しているのかがよくわかった。

#### パート4：高度なKubernetes技術

パート4では、さらに高度なKubernetesの機能について学んだ：

- **アップデート戦略とモニタリング:** ローリングアップデートやカナリアデプロイによって、ダウンタイムを最小限に抑えながらアップデートを行う方法を学んだ。**Prometheus**を使ったアプリケーションのモニタリングも導入された。
- **GitOps:** アプリケーションのインフラ管理のシングルソースとして**Git**を使い、デプロイやインフラの管理を効率化するGitOpsの概念はとても興味深かった。
- **メッセージングシステム:** また、分散アプリケーションに不可欠なNATSのようなメッセージングシステムの統合についても触れた。

このセクションでは、Kubernetesが高度なアップデート戦略をどのように処理し、GitOpsがインフラ管理にどのように組み込まれているかを理解することができた。

#### パート5：Kubernetesの内部とその先

最終パートでは、Kubernetesの内部について深く掘り下げた：

- **Kubernetesの内部:** Kubernetesが内部でどのように動作しているのかについての洞察を得た。内部アーキテクチャを理解することで、その力と柔軟性に対する理解が深まった。
- **カスタムリソース定義（CRD）:** CRDを使うことで、開発者はKubernetesの機能を拡張し、特化したワークロードを扱うためのカスタムリソースを定義できる。
- **サービスメッシュとその先:** 最後に、**Istio**のようなサービスメッシュ技術を探り、サービス間の通信をより安全で観測可能に管理する方法を学んだ。

このパートは最も高度で、Kubernetesを特定のユースケースに合わせて拡張し、最適化する方法に焦点を当てていた。また、Kubernetesの将来と、モダンなソフトウェア開発のニーズにどのように対応していくのかも考察された。

### Kubernetesの強力な点は？

このコースを通じて、Kubernetesは単なるコンテナデプロイツールではなく、コンテナ化されたアプリケーションのライフサイクル全体を管理するプラットフォームだと気づいた。いくつかの重要なポイントをまとめると：

- **スケーラビリティ:** Kubernetesはスケーリングを自動化し、アプリケーションが負荷の増加に対応できるようにする。
- **レジリエンス:** **セルフヒーリング**、**オートスケーリング**、**ロードバランシング**などの機能により、Kubernetesは個々のコンポーネントが失敗しても、アプリケーションがスムーズに動作し続けるようにする。
- **柔軟性:** K3sを使ってローカルマシンでシンプルなコンテナアプリを動かすところから、GKEを使った複雑なマルチクラウドのデプロイメント管理まで、Kubernetesはすべてを扱える柔軟性を持っている。

### 結論

「DevOps with Kubernetes」コースを修了したことで、Kubernetesを使ってモダンなソフトウェアアーキテクチャを管理するための強力な基盤ができた。Kubernetesが、デプロイやスケーリング、アプリケーション管理の複雑さを自動化する方法を学び、DevOpsのワークフローに不可欠なツールであることを実感した。小さなチームで作業する場合でも、グローバル規模でのデプロイメントを行う場合でも、Kubernetesはプロセスをシンプルにし、アプリケーションを効率的に管理するための強力なツールを提供してくれる。

Kubernetesは非常に強力なソフトウェアであり、特に大規模で複雑な環境での可能性を探るのが楽しみだ。このコースを通じて、Kubernetesの仕組みが解明されただけでなく、ソフトウェアの開発とデプロイメントの方法がどのように変わるかも理解できた。

マイクロサービスの開発、管理、スケーリングを理解したいなら、Kubernetesとこの入門コースを始めるのを強くおすすめしたい。


「DevOps with Kubernetes」というコースを受講したことで、Kubernetesがどのように動作し、ソフトウェアをスケールして管理するのにどう活用できるかをここでブロク化したみた。

Kubernetsを学んでみた

Learning Kubernets

### Introduction

In the ever-evolving landscape of web development, choosing the right framework can significantly impact project's success. Recently, I delved into the world of Svelte and SvelteKit through their official documentation and coursework, exploring their features, benefits, and unique selling points. In this post, I’ll share my insights on Svelte and how they compare to other popular combinations like Nuxt.js & Vue and Next.js & React.

### Understanding Svelte

#### Svelte: a brief overview

Svelte is a modern JavaScript framework designed to create efficient web applications with minimal boilerplate. Unlike other frameworks such as React or Vue, Svelte shifts much of the work to compile time, resulting in faster runtime performance and smaller bundle sizes.

#### Key features of Svelte

- **Compile time optimization:** Svelte compiles your components into efficient imperative code, minimizing the need for a virtual DOM.
- **Reactivity:** Svelte's reactivity model is simple and intuitive, allowing developers to create responsive applications with ease.
- **Scoped styles:** Svelte components come with scoped styles by default, ensuring your styles don’t leak into other parts of your application.

### SvelteKit: the full-stack framework

SvelteKit is the official framework for building web applications with Svelte. It provides a complete toolkit for creating scalable and performant web applications, offering features like server-side rendering (SSR) and static site generation (SSG).

#### Key features of svelteKit

- **Server-Side Rendering (SSR):** Enhance performance and SEO by rendering pages on the server.
- **Static Site Generation (SSG):** Generate static assets for faster load times and better scalability.
- **File-based routing:** Simplify navigation and routing with a file-based approach.
- **Integrated tooling:** Built-in support for TypeScript, SCSS, and more.

### Comparing SvelteKit to Vue+Nuxt and Next.js (React)

#### Vue and Nuxt.js

Vue.js is a progressive JavaScript framework for building user interfaces. It is known for its simplicity and flexibility, making it a favorite among developers for creating interactive web applications.

Nuxt.js is a framework built on top of Vue.js that provides a robust solution for server-side rendering, static site generation, and other advanced features.

##### Key Differences

- **Learning curve:** Vue has a gentle learning curve, making it accessible to beginners. Svelte is also beginner-friendly but takes a different approach with its compile-time optimizations.
- **Performance:** Svelte's compile-time optimization often results in better runtime performance compared to Vue's virtual DOM.
- **Tooling:** Nuxt.js offers a rich ecosystem and extensive documentation, while SvelteKit, although powerful, is relatively newer with less community support and still growing.

#### React and Next.js

React is a widely-used JavaScript library for building user interfaces, known for its component-based architecture and vast ecosystem.

In turn, Next.js is a framework for React that also provides server-side rendering, static site generation, and many other features out of the box.

#### Key Differences

- **Rendering:** Both SvelteKit and Next.js offer SSR and SSG, but Svelte's approach eliminates the virtual DOM, potentially offering better performance.
- **Developer experience:** React's ecosystem is mature and extensive, while Svelte’s syntax and reactivity model provide a refreshing and simpler alternative.
- **Community and ecosystem:** React and Next.js have a larger community and more third-party integrations compared to the relatively new SvelteKit.

### Conclusion

Svelte (SvelteKit) brings a unique perspective to web development, offering impressive performance benefits and a modern approach to building web applications. While Vue (Nuxt.js) and React (Next.js) are established and robust solutions with extensive ecosystems, Svelte stands out with its compile-time optimizations and simplicity.

#### Use cases: Svelte (SvelteKit)

- **Single-Page Applications (SPAs):** SvelteKit’s built-in support for client-side routing, along with its minimal bundle size and fast performance, makes it an excellent choice for SPAs that need to load quickly and provide a smooth user experience.
  
- **Small to medium projects:** Svelte’s simplicity and lack of boilerplate code make it ideal for smaller teams or solo developers working on projects where development speed and maintainability are key.

- **Static Site Generation (SSG):** With SvelteKit's ability to generate static sites, it's perfect for blogs, marketing sites, and documentation platforms where content is mostly static but benefits from occasional dynamic features.

- **Highly interactive web applications:** Svelte’s reactivity model is perfect for applications requiring complex user interactions with minimal latency, such as data dashboards, real-time collaborative tools, and interactive storytelling platforms.

#### Use cases: Vue (Nuxt.js)

- **Progressive Web Applications (PWAs):** Vue's gentle learning curve combined with Nuxt.js's powerful features make it a great choice for developing PWAs that need to provide an app-like experience on the web.

- **Large-scale enterprise applications:** Vue’s flexibility and Nuxt.js's capabilities in handling server-side rendering, along with a strong ecosystem of plugins and tools, make it suitable for large-scale applications with complex routing and state management needs.

- **E-commerce platforms:** The modular nature of Vue and Nuxt.js, along with robust state management solutions like Vuex, make them ideal for building feature-rich e-commerce platforms that require SEO optimization and fast, reliable performance.

#### Use cases: React (Next.js)

- **Universal applications:** Next.js excels at building universal (isomorphic) applications that render on both the server and the client, making it ideal for content-heavy websites, news portals, and applications requiring SEO.

- **Complex web applications:** React’s extensive ecosystem, combined with Next.js’s server-side rendering and API routes, makes it a strong candidate for complex applications with high interactivity, like social media platforms, online learning tools, and content management systems.

- **Microservices and API-driven architectures:** With Next.js, it’s easy to integrate with various backend services and APIs, making it suitable for projects that need to consume and manage data from multiple sources.

- **Rich user interfaces:** React's component model and vast library support make it ideal for applications where a sophisticated UI is essential, such as design tools, media-rich websites, and interactive data visualizations.

### Final thoughts

Choosing the right framework depends on your specific project requirements and personal preferences. Svelte and SvelteKit are excellent choices for projects that prioritize performance, simplicity, and modern development practices. Vue and Nuxt.js provide a balance of flexibility and ease of use, making them great for a wide range of applications. React and Next.js, with their robust ecosystem and versatility, are well-suited for complex and large-scale projects.

By understanding the key features and differences between these frameworks, you can make an informed decision and leverage the best tools for your web development projects.


Recently, I delved into the world of Svelte and SvelteKit through their official documentation and coursework, exploring their features, benefits, and unique selling points. In this post, I’ll share my insights on Svelte and how they compare to other popular combinations like Nuxt.js & Vue and Next.js & React.

medium_svelte.png

small_svelte.png

thumbnail_svelte.png

svelte.png

### はじめに

ウェブ開発の世界は常に進化していて、どのフレームワークを選ぶかがプロジェクトの成功に大きく影響する。SvelteとSvelteKitの公式ドキュメントやコースを通じて、それらの特徴や利点、ユニークなポイントを探ってみた。この投稿では、Svelteについてのインサイトと、Vue（Nuxt.js）、React（Next.js）といった他の人気のあるフレームワークと比較した内容を共有する。

### Svelte

#### Svelteの概要

Svelteは、最小限のボイラープレートで効率的なウェブアプリケーションを作成するために設計されたモダンなJavaScriptフレームワーク。他のフレームワーク、例えばReactやVueとは異なり、Svelteは多くの処理をコンパイル時に行うため、実行時のパフォーマンスが向上し、バンドルサイズも小さくなる。

#### Svelteの主な特徴

- **コンパイル時の最適化:** Svelteはコンポーネントを効率的な命令型コードにコンパイルし、仮想DOMの必要性を最小限に抑える。
- **リアクティビティ:** Svelteのリアクティブモデルはシンプルで直感的であり、開発者が簡単にレスポンシブなアプリケーションを作成できる。
- **スコープされたスタイル:** Svelteのコンポーネントにはデフォルトでスコープされたスタイルが含まれており、スタイルが他の部分に漏れないようにしている。

### SvelteKit: フルスタックフレームワーク

SvelteKitは、Svelteを使ってウェブアプリケーションを構築するための公式フレームワーク。スケーラブルでパフォーマンスの高いウェブアプリケーションを作成するための完全なツールキットを提供し、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）などの機能を備えている。

#### SvelteKitの主な特徴

- **サーバーサイドレンダリング（SSR）:** サーバーでページをレンダリングすることで、パフォーマンスとSEOを向上させる。
- **静的サイト生成（SSG）:** より速い読み込み時間とスケーラビリティを実現するために、静的アセットを生成する。
- **ファイルベースのルーティング:** ファイルベースのアプローチでナビゲーションとルーティングを簡素化する。
- **統合されたツール:** TypeScript、SCSSなどのサポートが組み込まれている。

### SvelteKitとVue+NuxtおよびNext.js（React）の比較

#### VueとNuxt.js

Vue.jsは、ユーザーインターフェースを構築するためのプログレッシブなJavaScriptフレームワーク。シンプルで柔軟な設計が特徴で、インタラクティブなウェブアプリケーションを作成するために開発者に人気がある。

Nuxt.jsは、Vue.jsの上に構築されたフレームワークで、サーバーサイドレンダリング、静的サイト生成、その他の高度な機能を提供する。

##### 主な違い

- **学習曲線:** Vueは初心者でもアクセスしやすい緩やかな学習曲線を持つ。Svelteも初心者に優しいが、コンパイル時の最適化という異なるアプローチを取っている。
- **パフォーマンス:** Svelteのコンパイル時の最適化は、Vueの仮想DOMと比較して、しばしば実行時のパフォーマンスを向上させる。
- **ツール:** Nuxt.jsは豊富なエコシステムと充実したドキュメントを提供している一方、SvelteKitは強力ではあるが、比較的新しく、コミュニティサポートもまだ成長段階にある。

#### ReactとNext.js

Reactは、コンポーネントベースのアーキテクチャと広範なエコシステムで知られる、広く使用されているJavaScriptライブラリ。

Next.jsは、React向けのフレームワークで、サーバーサイドレンダリング、静的サイト生成、その他多くの機能を提供する。

##### 主な違い

- **レンダリング:** SvelteKitとNext.jsはどちらもSSRとSSGを提供するが、Svelteのアプローチは仮想DOMを排除し、パフォーマンスが向上する可能性がある。
- **開発者体験:** Reactのエコシステムは成熟しており、広範である一方、Svelteのシンタックスとリアクティブモデルは新鮮でシンプルな代替手段を提供する。
- **コミュニティとエコシステム:** ReactとNext.jsは、比較的新しいSvelteKitよりも大きなコミュニティと、より多くのサードパーティー統合を持っている。

### 結論

Svelte（SvelteKit）は、ウェブ開発に新しい視点をもたらし、優れたパフォーマンスの向上と、モダンなウェブアプリケーション構築のためのアプローチを提供している。Vue（Nuxt.js）やReact（Next.js）は、豊富なエコシステムを持つ確立された堅牢なソリューションであるが、Svelteはコンパイル時の最適化とシンプルさで際立っている。

#### ユースケース: Svelte（SvelteKit）

- **シングルページアプリケーション（SPAs）:** SvelteKitのクライアントサイドルーティングのサポートや、最小限のバンドルサイズと高速なパフォーマンスにより、素早く読み込み、スムーズなユーザー体験を提供する必要があるSPAsに最適。
  
- **小規模から中規模のプロジェクト:** Svelteのシンプルさとボイラープレートコードの少なさは、開発スピードとメンテナンス性が重要な小規模チームやソロ開発者に理想的。

- **静的サイト生成（SSG）:** SvelteKitの静的サイト生成能力により、主に静的なコンテンツを持ち、時折動的な機能が必要なブログ、マーケティングサイト、ドキュメントプラットフォームに最適。

- **高度にインタラクティブなウェブアプリケーション:** Svelteのリアクティブモデルは、複雑なユーザーインタラクションを必要とし、低レイテンシが求められるダッシュボード、リアルタイムコラボツール、インタラクティブストーリーテリングプラットフォームに最適。

#### ユースケース: Vue（Nuxt.js）

- **プログレッシブウェブアプリケーション（PWAs）:** Vueの緩やかな学習曲線とNuxt.jsの強力な機能の組み合わせにより、ウェブ上でアプリのような体験を提供するPWAsの開発に最適。

- **大規模エンタープライズアプリケーション:** Vueの柔軟性とNuxt.jsのサーバーサイドレンダリングの取り扱い能力、さらに豊富なプラグインとツールのエコシステムにより、複雑なルーティングと状態管理を必要とする大規模アプリケーションに適している。

- **Eコマースプラットフォーム:** VueとNuxt.jsのモジュール構造、そしてVuexのような堅牢な状態管理ソリューションにより、SEO最適化と高速で信頼性の高いパフォーマンスを必要とする、機能豊富なEコマースプラットフォームの構築に理想的。

#### ユースケース: React（Next.js）

- **ユニバーサルアプリケーション:** Next.jsはサーバーとクライアントの両方でレンダリングされるユニバーサル（アイソモーフィック）アプリケーションの構築に優れており、コンテンツが多いウェブサイト、ニュースポータル、SEOが求められるアプリケーションに最適。

- **複雑なウェブアプリケーション:** Reactの広範なエコシステムと

### 最後に

適切なフレームワークを選ぶのは、プロジェクトの要件や個人的な好みによるところが大きい。SvelteとSvelteKitは、パフォーマンス、シンプルさ、モダンな開発手法を優先するプロジェクトに最適な選択肢だ。VueとNuxt.jsは、柔軟性と使いやすさのバランスを提供し、幅広い用途に適している。ReactとNext.jsは、強力なエコシステムと多様性を備え、複雑で大規模なプロジェクトに向いている。

これらのフレームワークの主な特徴と違いを理解することで、自分のウェブ開発プロジェクトに最適なツールを選び、効果的に活用することができる。

SvelteとSvelteKitの公式ドキュメントやコースを通じて、それらの特徴や利点、ユニークなポイントを探ってみた。この投稿では、Svelteについてのインサイトと、Vue（Nuxt.js）、React（Next.js）といった他の人気のあるフレームワークと比較した内容を共有する。

Svelteを探ってみた

Exploring Svelte

Opinionated settings (and some scripts) I've found to be great for anime with mpv. Surpassing the image quality of madvr (MPC-HC/NGU algorithm).

<h3 id="tldr"><a href="/article/mpv-for-anime#tldr"># TL;DR / Quick Guide</a></h3>

1. Install [mpv](https://mpv.io/installation)
   - This guide is based on [the stable release v0.38.0](https://github.com/mpv-player/mpv/releases/tag/v0.38.0) and also should work with the latest git version (tested on 2024-07-08)
   - [mpv manual](https://mpv.io/manual)
3. Download shaders and place them to `mpv/shaders/`: 
	1. Luma Upscaler:
	   - For most modern GPUs [ArtCNN_C4F32](https://raw.githubusercontent.com/Artoriuz/ArtCNN/main/GLSL/ArtCNN_C4F32.glsl)
	   - **or**
	   - For very high-end GPUs [ArtCNN_C4F16](https://raw.githubusercontent.com/Artoriuz/ArtCNN/main/GLSL/ArtCNN_C4F16.glsl)
	2. Chroma Up/Downscaler: [ArtCNN_C4F32_Chroma](https://github.com/Artoriuz/ArtCNN/blob/main/GLSL/ArtCNN_C4F32_Chroma.glsl)
4. Copy & paste the [image quality config below](/article/mpv-for-anime#conf_image_quality) to `mpv/mpv.conf`
5. Uncomment either ArtCNN_C4F32_Chroma at the Chroma section in the config if desired. Won't be too much of a difference as changes in Chroma are harder to notice.
6. (Optional, Windows) Comment the two Vulkan lines and uncomment DirectX lines at the start of the config for better performance in some cases
7. (Optional) Download and place scripts to `mpv/scripts/`


### Links
- **[mpv](https://mpv.io)**
- SOURCES & REFERENCES
  - [artoriuz.github.io](https://artoriuz.github.io/blog/mpv_upscaling.html) (mathematic and most up to date)
  - [iamscum.wordpress.com](https://iamscum.wordpress.com/guides/videoplayback-guide/mpv-conf/)
  - A comparison between FSRCNNX and SSSR and madVR by me: [slow.pics/c/NTryj7wb](https://slow.pics/c/NTryj7wb) (not up to date!)
- SHADERS
  - Shaders: [ArtCNN](https://github.com/Artoriuz/ArtCNN)
 - SCRIPTS
   - [mpvacious](https://github.com/Ajatt-Tools/mpvacious) (real-time Anki cards with a press of a button)
   - [autoload](https://github.com/mpv-player/mpv/blob/master/TOOLS/lua/autoload.lua) (autoplay next episode)
   - [betterchapters](https://github.com/mpv-player/mpv/issues/4738#issuecomment-321298846)
   - [bookmarker](https://github.com/NurioHin/mpv-bookmarker)
   - [webm](https://github.com/ekisu/mpv-webm) (quickly create video clips while watching)
   - [autosubsync](https://github.com/joaquintorres/autosubsync-mpv) (**automatically sync subtitles** to another subtitle or even **just to the audio track**)

### Index
- [tldr](/article/mpv-for-anime#tldr)
- [mpv.conf for image quality](/article/mpv-for-anime#conf_image_quality)
- [other settings in my mpv.conf](/article/mpv-for-anime#conf_other)
- [input.conf](/article/mpv-for-anime#conf_input)
- [refresh rate in mpv.conf](/article/mpv-for-anime#conf_hz)
- [changelog](/article/mpv-for-anime#changelog)

<h3 id="conf_image_quality"><a href="/article/mpv-for-anime#conf_image_quality"># mpv.conf for image quality</a></h3>

```ini
# Load mpv's default quality settings
profile=high-quality

# Not too useful on modern hardware. 'auto-copy-safe' is a safe option to use if one wants to enable it. Defaults to 'no'.
#hwdec=no

# Video driver to use. The latest gpu-next is recommended.
vo=gpu-next

###### Vulkan on Linux, Windows or macOS (recommended)
gpu-api=vulkan

###### DirectX on Windows (recommended if issues on Vulkan on Windows)
#gpu-api=d3d11

###### Shaders ######

###### Luma up (use ArtCNN_C4F32 if the GPU can handle it)
glsl-shader="~~/shaders/ArtCNN_C4F16.glsl"
#glsl-shader="~~/shaders/ArtCNN_C4F32.glsl"
scale=ewa_lanczos
scale-blur=0.981251

###### Luma down
dscale=catmull_rom

###### Chroma up + down (not important but if the GPU is not being used much anyway, might as well)
#glsl-shader="~~/shaders/ArtCNN_C4F32_Chroma.glsl"

# fruit: 8-Bit/8-Bit+FRC display
# ordered: true 10-Bit/12-Bit display
# error-diffusion: high-end GPUs
dither=error-diffusion
dither-depth=auto
error-diffusion=sierra-lite # uncomment if not 'error-diffusion'

###### Antiring
scale-antiring=0.5
dscale-antiring=0.5
cscale-antiring=0.5

###### Debanding
deband=yes
deband-iterations=4
deband-threshold=35
deband-range=16
deband-grain=4
```

<h3 id="conf_other"><a href="/article/mpv-for-anime#conf_other"># Other settings in my mpv.conf</a></h3>

```ini
###### General
autofit=50%       # Open mpv as half the monitor resolution
keep-open=yes
snap-window=yes       # Snap to corners on Windows
cursor-autohide=1000
save-position-on-quit # Remember position when closing the player
osd-bar=no            # No huge box on screen when turning the volume
osd-font-size=32
volume=100
volume-max=100
audio-exclusive=no    # A hotkey for this inside input.conf (k cycle audio-exclusive)

###### Language & subtitles
sub-visibility=no      # Hide subtitles by default
alang=jp,jpn,ja,en,eng # Language priority for audio
slang=jp,jpn,ja,en,eng # Language priority for subtitles
sub-auto=fuzzy
sub-font='Arial'
sub-font-size=40
sub-border-size=1
sub-shadow-color=0.0/0.0/0.0/0.50
sub-shadow-offset=2

###### High-quality screenshots
screenshot-format=webp
screenshot-webp-lossless=yes
screenshot-high-bit-depth=yes
screenshot-sw=no
screenshot-directory="~~/screenshots"
screenshot-template="%f-%wH.%wM.%wS.%wT-#%#00n"
```

<h3 id="conf_input"><a href="/article/mpv-for-anime#conf_input"># input.conf</a></h3>

```ini
##### General
z          ignore
w          no-osd cycle sub-visibility
s          cycle sub
S          cycle sub down
F1         add sub-delay -0.1   
F2         add sub-delay +0.1
F5         no-osd screenshot
k          cycle audio-exclusive
p          add panscan -0.1
P          add panscan +0.1

WHEEL_UP   add volume   2
WHEEL_DOWN add volume  -2
RIGHT      seek   2 exact
LEFT       seek  -2 exact
UP         seek   5 exact
DOWN       seek  -5 exact
Ctrl+RIGHT seek  20 exact
Ctrl+LEFT  seek -20 exact

##### mpvacious
q          script-binding mpvacious-sub-seek-back
e          script-binding mpvacious-sub-seek-forward
x          script-binding mpvacious-sub-rewind

##### Better Chapters
MOUSE_BTN7 script_binding chapter_prev
MOUSE_BTN8 script_binding chapter_next

##### Bookmarker Menu
B          script_message bookmarker-menu
b          script_message bookmarker-quick-save
ctrl+b     script_message bookmarker-quick-load
```

<h3 id="conf_hz"><a href="/article/mpv-for-anime#conf_hz"># Refresh rate in mpv.conf</a></h3>
If for some reason (e.g. to have an exact match) you want to have the refresh rate to be specified, comment out these two lines. Can cause problems especially if the fps doesn't match with the display. mpv is usually pretty good at estimating the fps anyway so no real need to use these.

Refresh rate reported by the OS can be verified with [testufo](https://www.testufo.com/refreshrate).

```ini
# Refresh rate of the monitor (143.856 = 6* 23.976, which is the standard video framerate)
override-display-fps=143.856

# 'display-vdrop' is basically the same as 'audio', but with better debugging in Shift+i menu
# Read more about this here: https://mpv.io/manual/master/#options-video-sync
video-sync=display-vdrop
```

<h3 name="changelog" id="changelog"><a href="/article/mpv-for-anime#changelog"># CHANGELOG</a></h3>

```md
=================================
+ Added
- Removed or disabled
* Change/information
=================================
=== 2024-12-14
* Updated deprecated 'profile=gpu-hq' to 'profile=high-quality'
=== 2024-07-08
+ Added ArtCNN
+ Added a strong recommendation for 'gpu-next'
+ Added dither options
- Removed Anime4K section
- Removed FSRCNN, KrigBilateral and SSim references in favour of ArtCNN and built-in shaders
* Updated to mpv 38.0
* Changed the structure of the config
* Adjusted (lowered) antiring and deband values\
* Simplified the guide a bit
=== 2022-07-11
+ Added a bit about hwdec and vo to the config
+ Added a step to the tl;dr guide to uncomment the Luma up shader in the config
=== 2022-04-03
+ Added more comments to explain some of the config options
* Make Vulkan default option with an optional step for Windows to switch to DirectX
* Changed how paths are defined to make them work out of the box
=== 2022-03-14
+ Added a bit about the mpv version this guide is based on
+ Added gamut-mapping-mode in mpv git to the config
* Commented out gamut clipping settings by default
=== 2022-02-22
* Fixed section title links
* Modified some phrasings
- Removed API (DirectX, OpenGL, Vulkan) partiality
=== 2021-12-18
+ Added a quick guide
* Modified comments and structure of the config
=== 2021-10-24
+ Added gamut-clipping and hdr-compute-peak to the config
=== 2021-09-26
* Fixed a typo
=== 2021-08-31
* More about anime4K
* Fixed anchor links
=== 2021-08-01 ===
+ Added a bit about Adaptive Sharpening
=== 2021-07-10 ===
+ Added autosubsync script
+ Added a new source: artoriuz.github.io
+ Added a comparison: slow.pics/c/NTryj7wb
+ Added index
+ Added changelog
+ Added FSRCNNX
+ Added correct-downscaling=yes
- Disabled ThinLines
* Made the structure a bit clearer
* Moved the bit about refresh rates to its own section

=== Initial version ===
```


High-quality configuration for watching anime with mpv.

large_Tsukimonogatari_02_09_59_394_c039deef29.png

medium_Tsukimonogatari_02_09_59_394_c039deef29.png

small_Tsukimonogatari_02_09_59_394_c039deef29.png

thumbnail_Tsukimonogatari_02_09_59_394_c039deef29.png

Tsukimonogatari_02_09_59_394_c039deef29.png

mpv for anime

### Introduction

Working through the course [Haskell MOOC](https://haskell.mooc.fi) has been an educational experience, introducing me to the world of functional programming through the robust Haskell language. The course, designed for both beginners and even those familiar with functional programming, has provided a comprehensive foundation in Haskell, covering everything from basic syntax to advanced features like higher-order functions and algebraic data types.

### The course: Haskell MOOC

The course itself is divided into two individual large parts. It includes an excellent free online course material with examples and exercises. 

Working on the exercises involves knowing how to use the command line, and basic usage of the Git version control system.

There are two parts with a total of 16 lectures. Part 1 covers the basics of Haskell syntax and features sticking to pure functional programming, without side-effects. I/O (input-output) and Monads will be introduced in Part 2.

>**monad**: a design pattern used to handle computations in a sequence. It allows for chaining operations while managing side effects, encapsulating values, and providing a way to apply functions to these values.

All 16 lectures are roughly the same size, but some have more material than others. Each lecture set ends with 10-30 small programming exercises on the topics of the lecture. The course is completed by solving all the exercises.

#### Example of an exercise:
```haskell
------------------------------------------------------------------------------
-- Ex 3: implement the Euclidean Algorithm for finding the greatest
-- common divisor:
--
-- Given two numbers, a and b,
-- * if one is zero, return the other number
-- * if not, subtract the smaller number from the larger one
-- * replace the larger number with this new number
-- * repeat
--
-- For example,
--   myGcd 9 12 ==> 3
-- In this case, the algorithm proceeds like this
--
--   a      b
--
--   9      12
--   9      (12-9)
--   9      3
--   (9-3)  3
--   6      3
--   (6-3)  3
--   3      3
--   (3-3)  3
--   0      3
--
-- Background reading:
-- * https://en.wikipedia.org/wiki/Euclidean_algorithm
```

_※ My solution is at the end of the article._

### Haskell: A unique programming paradigm

#### Functional programming
Haskell is inherently functional. In Haskell, the primary building blocks are functions. Unlike imperative languages, where you write a series of instructions to change the state, Haskell focuses on the application of functions. This paradigm shift brings a unique set of advantages, especially in terms of code clarity and ease of reasoning.

#### Purity and side-effect free
One of the most compelling aspects of Haskell is its purity. Functions in Haskell do not have side effects, meaning they do not alter any state or interact with the outside world within their execution. This purity ensures that given the same inputs, a function will always return the same output, making Haskell code more predictable and easier to debug.

#### Laziness
Haskell employs lazy evaluation, meaning that expressions are only evaluated when needed. This allows for the creation of infinite data structures and can lead to performance optimizations by avoiding unnecessary calculations.

#### Strongly typed with type inference
Haskell’s type system is both strong and expressive. Every value and expression in Haskell has a type, which is checked at compile time, eliminating a whole class of runtime errors. Additionally, Haskell's compiler can infer types, reducing the need for explicit type annotations while maintaining type safety.

#### Use cases of Haskell
Haskell’s unique features make it suitable for a variety of applications:

- **Academic research and education**: Haskell's mathematical nature and purity make it an excellent tool for teaching and research in computer science and related fields.
- **Financial systems**: The predictability and reliability of Haskell’s pure functions make it ideal for financial modeling and quantitative analysis.
- **Compilers and interpreters**: Haskell’s strong type system and pattern matching capabilities are beneficial in writing compilers and interpreters.
- **Concurrent and parallel programming**: Haskell’s purity and immutability simplify reasoning about concurrent and parallel programs, reducing the complexity and potential for bugs.
- **Web development**: While not as mainstream as TypeScript, PHP, Go and such, Haskell has frameworks like Yesod that bring type safety and functional paradigms to web development.

### Comparing Haskell with TypeScript and Go
#### TypeScript
TypeScript, a superset of JavaScript, brings static typing to the dynamic world of JavaScript. While TypeScript improves the reliability and maintainability of JavaScript code, it remains fundamentally imperative and object-oriented, focusing on classes and mutable state.

- **Typing**: Both TypeScript and Haskell are statically typed, but Haskell’s type system is more expressive and enforced at compile time without the need for extensive annotations.
- **Paradigm**: TypeScript is multi-paradigm capable of being functional, but it does lean towards imperative and object-oriented programming, while on the other hand Haskell is purely functional.
- **Use cases**: TypeScript is primarily used for web development, enhancing JavaScript applications. Haskell, while also capable of web development, shines in areas requiring high reliability and mathematical applications.

#### Go
Go, developed by Google, is designed for simplicity and efficiency in systems programming. It is an imperative language with a focus on concurrency, making it popular for backend services and cloud applications.

- **Concurrency**: Go has built-in support for concurrent programming with goroutines, making it a strong candidate for networked services. Haskell also supports concurrency, but through a different paradigm using Software Transactional Memory (STM) and lightweight threads.
- **Simplicity vs. expressiveness**: Go emphasizes simplicity and ease of use, often at the cost of expressiveness. Haskell, on the other hand, provides a rich type system and advanced features, which can be more complex but offer greater power and safety.
- **Performance**: Go compiles to efficient machine code, similar to Haskell. However, Haskell’s lazy evaluation can sometimes introduce performance overhead, whereas Go’s performance is more predictable.

### Conclusion

The Haskell MOOC course has provided a deep understanding of Haskell’s functional programming paradigm, emphasizing its purity, laziness, and strong typing. While Haskell’s approach differs significantly from languages like TypeScript and Go, these differences also highlight its strengths, particularly in areas requiring mathematical precision and reliability. I think by continuing to learn and explore Haskell, it will strengthen my overall skills as a programmer by giving me opportunities to think a bit differently compared to the usual status quo of languages. Also I feel I can utilize the some of the code practices used in Haskell with other languages as well.

#### Solution
```haskell
euclideanAlg :: Integer -> Integer -> Integer
euclideanAlg a b
  | a == 0    = b
  | b == 0    = a
  | a > b     = euclideanAlg (a - b) b
  | otherwise = euclideanAlg a (b - a)
```

A quick dive into Haskell and its use cases with a short comparison between it, Typescript and Go. Also, I will describe the course I took for Haskell.

large_2024-07-16_19-11_eEpJQ.png

medium_2024-07-16_19-11_eEpJQ.png

small_2024-07-16_19-11_eEpJQ.png

thumbnail_2024-07-16_19-11_eEpJQ.png

haskell_mooc.png

### はじめに

[Haskell MOOC](https://haskell.mooc.fi)のコースを受講して、Haskell言語を使った関数型プログラミングの世界に足を踏み入れることができた。このコースは初心者だけでなく、関数型プログラミングに慣れた人にも設計されており、Haskellの基本的な構文から高階関数や代数的データ型などの高度な機能まで、包括的な基礎を提供してくれる。

### コース：Haskell MOOC

このコースは2つの大きな部分に分かれている。細かいながら分かり易い無料のオンラインコース教材が含まれており、例と演習が提供されている。

演習に取り組むには、コマンドラインの使用方法とGitバージョン管理システムの基本的な使い方を知っている必要がある。

全部で16回のチャプターがあり、2つのパートに分かれている。パート1では、Haskellの構文と機能の基本を扱い、副作用のない純粋関数型プログラミングに焦点を当てる。I/O（入出力）とモナドはパート2で紹介される。

> **モナド**（monad）：計算を順序だてて扱うためのデザインパターン。操作をチェーンし、副作用を管理しつつ、値をカプセル化し、これらの値に関数を適用する方法を提供する。

全16回のチャプターはおおむね同じボリュームだが、いくつかは他よりも多くの内容を含んでいる。各チャプターセットの最後には、そのチャプターのトピックに関する10～30のプログラミング演習があり、すべての演習を解くことでコースを完了させられる。

#### 演習の例:
```haskell
------------------------------------------------------------------------------
-- Ex 3: implement the Euclidean Algorithm for finding the greatest
-- common divisor:
--
-- Given two numbers, a and b,
-- * if one is zero, return the other number
-- * if not, subtract the smaller number from the larger one
-- * replace the larger number with this new number
-- * repeat
--
-- For example,
--   myGcd 9 12 ==> 3
-- In this case, the algorithm proceeds like this
--
--   a      b
--
--   9      12
--   9      (12-9)
--   9      3
--   (9-3)  3
--   6      3
--   (6-3)  3
--   3      3
--   (3-3)  3
--   0      3
--
-- Background reading:
-- * https://en.wikipedia.org/wiki/Euclidean_algorithm

```

_※自分で出した答えは記事の一番下にある。_

### Haskell：独自のプログラミングパラダイム

#### 関数型プログラミング
Haskellは本質的に関数型の言語であり、主要な構成要素は関数である。状態を変更する一連の命令を書く命令型言語とは異なり、Haskellは関数の適用に焦点を当てている。このパラダイムシフトは、コードの明快さと理論化の容易さの点で独自の利点をもたらす。

#### 純粋性と副作用のない関数（purity and no side effects）
Haskellの最も魅力的な側面の一つは、その純粋性である。Haskellの関数は副作用を持たない。つまり、実行中に状態を変更したり外部とやり取りしたりしない。この純粋性は、同じ入力が与えられた場合、関数が常に同じ出力を返すことを保証し、Haskellのコードを予測可能にし、デバッグを容易にする。

#### 遅延評価（lazy evaluation）
Haskellは遅延評価を採用しており、式は必要なときにのみ評価される。これにより、無限データ構造の作成が可能になり、不必要な計算を回避することでパフォーマンスの最適化が図れる。

#### 強い型と型推論（strong types with type-inference）
Haskellの型システムは強力かつ表現力豊かである。すべての値と式には型があり、コンパイル時にチェックされることで、ランタイムエラーのクラス全体を排除する。さらに、コンパイラは型を推論できるため、明示的な型注釈の必要性を減らしつつ、型安全性を維持する。

#### Haskellのユースケース
Haskellの独自の特徴は、多様なアプリケーションに適している:

- **学術研究と教育**: Haskellの数学的性質と純粋性は、コンピュータサイエンスおよび関連分野の教育と研究に最適である。
- **金融システム**: Haskellの純粋関数の予測可能性と信頼性は、金融モデリングおよび定量分析に理想的である。
- **コンパイラとインタプリタ**: Haskellの強力な型システムとパターンマッチング機能は、コンパイラやインタプリタの作成に有益である。
- **並行および並列プログラミング**: Haskellの純粋性と不変性は、並行および並列プログラムの理論化を簡素化し、バグの発生を減少させる。
- **Web開発**: TypeScript、PHP、Goなどほど主流ではないが、HaskellにはYesodのようなフレームワークがあり、型安全性と関数型パラダイムをWeb開発にもたらす。

### HaskellをTypeScriptおよびGoとの比較

#### TypeScript
TypeScriptはJavaScriptのスーパーセットで、動的なJavaScriptの世界に静的型付けをもたらす。TypeScriptはJavaScriptコードの信頼性と保守性を向上させるが、基本的には命令型およびオブジェクト指向であり、クラスや可変状態に焦点を当てている。

- **型付け**: TypeScriptとHaskellはどちらも静的に型付けされているが、Haskellの型システムはより表現力豊かで、広範な注釈なしにコンパイル時に強制される。
- **パラダイム**: TypeScriptは関数型も可能な多パラダイムだが、命令型およびオブジェクト指向プログラミングに傾いている。一方、Haskellは純粋に関数型である。
- **ユースケース**: TypeScriptは主にWeb開発に使用され、JavaScriptアプリケーションを強化する。HaskellはWeb開発も可能であるが、高い信頼性と数学的アプリケーションを必要とする分野で際立っている。

#### Go
GoはGoogleによって開発され、システムプログラミングの簡易性と効率性のために設計された。命令型言語であり、並行性に焦点を当てており、バックエンドサービスやクラウドアプリケーションで人気がある。

- **並行性**: Goはgoroutinesを使った並行プログラミングをサポートしており、ネットワークサービスの強力な候補となる。Haskellも並行性をサポートしているが、ソフトウェアトランザクショナルメモリ（STM）や軽量スレッドを使用する異なるパラダイムを通じてサポートしている。
- **簡易性 VS 表現力**: Goはシンプルさと使いやすさを強調しており、しばしば表現力を犠牲にする。Haskellは一方で、豊かな型システムと高度な機能を提供し、より複雑であるが、より強力で安全なプログラミングを可能にする。
- **パフォーマンス**: GoはHaskellと同様に効率的なマシンコードにコンパイルされる。ただし、Haskellの遅延評価は時折パフォーマンスオーバーヘッドを引き起こすことがあるのに対し、Goのパフォーマンスはより予測可能である。

### まとめ

Haskell MOOCコースは、Haskellの関数型プログラミングパラダイムについて深い理解を提供し、その純粋性、遅延評価、および強い型付けを強調している。HaskellのアプローチはTypeScriptやGoなどの言語とは大きく異なるが、これらの違いは特に数学的精度と信頼性を必要とする分野でのHaskellの強みを際立たせている。今後もHaskellを学び、探求し続けることで、一般的な言語の現状とは異なる視点を持つ機会が増え、プログラマーとしてのスキルを強化することができると感じている。また、Haskellで使われているベストプラクティスを他の言語にも活用できると感じている。

#### 答え
```haskell
euclideanAlg :: Integer -> Integer -> Integer
euclideanAlg a b
  | a == 0    = b
  | b == 0    = a
  | a > b     = euclideanAlg (a - b) b
  | otherwise = euclideanAlg a (b - a)
  ```

受講したHaskell MOOCコースを説明して、Haskell自体のユースケース等を紹介し、TypeScriptとGoとの簡単な比較を行う。

Haskellのコースを受講してみて学んだこと

Exploring Haskell: a dive into its use cases and comparison with other languages

Having to sync the filesystem state with a database, containing one-on-one relationships with the files, can be a tricky task. In this article, I will explain how I implemented my solution for this problem.

**All the code in the article is [GPL-3 licensed](https://github.com/Mangatsu/server/blob/main/COPYING).**

### Introduction

I have been developing a full-stack application called [Mangatsu](https://github.com/Mangatsu/server) for storing, managing, and reading various image collections, such as manga. It consists of a backend server application written in Go with secure API access and user control, and a client application written in TypeScript and Next.js. In this article, I will focus on the backend server application.

>The name "Mangatsu" is a play on the Japanese words "mangetsu" (満月, full moon) and "manga" (漫画, comic).

Mangatsu scans the directory paths provided by the user for manga, comics, doujinshi, and other collections (referred to as galleries from this point forward) and parses all the information it can from the filenames, included metadata files, and the pages themselves.

Mangatsu accepts two different directory structures:

```
📂 freeform
├── 📂 doujinshi
│       ├──── 📂 deeper-level
│       │     ├──── 📦 [Group (Artist)] 同人誌◯.cbz
│       │     └──── 📄 [Group (Artist)] 同人誌◯.json
│       ├──── 📦 (C99) [Group (Artist)] 漫画〇〇.zip
│       ├──── 📄 (C99) [Group (Artist)] 漫画〇〇.json
│       └──── 📦 (C88) [group (author, another author)] 単行本 [DL].zip # (JSON or TXT metafile inside)
├── 📂 art
│       ├──── 📂 [Artist] art collection
│       │     ├──── 🖼️ 0001.jpg
│       │     ├────...
│       │     └──── 🖼️ 0300.jpg
│       ├──── 📦 art collection XYZ.rar
│       └──── 📄 art collection XYZ.json
└── 📦 (C93) [group (artist)] 同人誌△ (Magical Girls).cbz
```

```
📂 structured
├── 📕 漫画１
│       ├── 📦 Volume 1.cbz
│       ├── 📦 Volume 2.cbz
│       ├── 📦 Volume 3.cbz
│       └── 📦 Volume 4.zip
├── 📘 漫画２
│       └── 📂 Vol. 1
│           ├── 🖼️ 0001.jpg
│           ├── ...
│           └── 🖼️ 0140.jpg
├── 📘 漫画３
│       └── 📂 Vol. 1
│           ├── 📦 Chapter 1.zip
│           ├── 📦 Chapter 2.zip
│           └── 📦 Chapter 3.rar
├── 📗 漫画４
│       ├── 📦 Chapter 1.zip
│       ├── ...
│       └── 📦 Chapter 30.rar
└── 📦 One Shot漫画.rar
```

As shown in the examples, numerous galleries are compressed in formats such as zip/cbz, rar/cbr, and 7zip. To avoid extracting the same file with each request, and to reduce server load and latency, it is not desirable to extract the file every time a user opens a gallery in the client. While caching the result on the client side is an option (and is used to some extent alongside server caching!), it can be unreliable, doesn't prevent abuse from bad actors, and, especially with applications like Mangatsu where the cached data can be huge, it is impractical for the client (browser, phone app, etc.).

### Implementing server-side file cache

... which is relatively simple.

First, this is how I initialize the cache directories.
```go
// InitPhysicalCache initializes the physical cache directories.
func InitPhysicalCache() {
	cachePath := config.BuildCachePath()
	if !utils.PathExists(cachePath) {
		err := os.Mkdir(cachePath, os.ModePerm)
		if err != nil {
		}
	}

	thumbnailsPath := config.BuildCachePath("thumbnails")
	if !utils.PathExists(thumbnailsPath) {
		err := os.Mkdir(thumbnailsPath, os.ModePerm)
		if err != nil {
		}
	}
}
```

Next, implementing functions to read from the cache and write to it. When writing to cache, there are two validations before extracting the gallery:

1. Does the cache directory already exist?
2. If it does, are there any files (i.e. pages) residing there?
3. If yes, then proceed to just return the residing files.
    - ※ If someone or something has corrupted the files in the cache, it would cause a problem here for the end user. I am considering writing additional validation here.

```go
// fetchFromDiskCache fetches the files from the disk cache and returns the list of files and the number of files.
func fetchFromDiskCache(dst string, uuid string) ([]string, int) {
	var files []string
	count := 0

	cacheWalk := func(s string, d fs.DirEntry, err error) error {
		if err != nil {
			log.Z.Error("failed to walk cache dir",
				zap.String("name", d.Name()),
				zap.String("err", err.Error()))
			return err
		}
		if d.IsDir() {
			return nil
		}

		// ReplaceAll ensures that the path is correct: cache/uuid/<arbitrary/path/image.png>
		files = append(files, strings.ReplaceAll(filepath.ToSlash(s), config.BuildCachePath(uuid)+"/", ""))
		count += 1
		return nil
	}

	err := filepath.WalkDir(dst, cacheWalk)
	if err != nil {
		log.Z.Error("failed to walk cache dir",
			zap.String("dst", dst),
			zap.String("err", err.Error()))
		return nil, 0
	}

	return files, count
}

// fetchOrExtractGallery extracts the gallery from the archive and returns the list of files and the number of files.
func fetchOrExtractGallery(archivePath string, uuid string) ([]string, int) {
	dst := config.BuildCachePath(uuid)
	if _, err := os.Stat(dst); errors.Is(err, fs.ErrNotExist) {
		return utils.UniversalExtract(dst, archivePath)
	}

	files, count := fetchFromDiskCache(dst, uuid)
	if count == 0 {
		err := os.Remove(dst)
		if err != nil {
			log.Z.Debug("removing empty cache dir failed",
				zap.String("dst", dst),
				zap.String("err", err.Error()))
			return nil, 0
		}

		return utils.UniversalExtract(dst, archivePath)
	}
	natsort.Sort(files)

	return files, count
}
```

The next section will detail how to sync this file cache with the server and the database.

### Implementing file locking

What happens if there are two or more requests trying to access a gallery at the same time? Especially in the case of a non-cached gallery, it would cause many unnecessary writes which in turn could cause corruption in the cached file themselves, and in the worst case, could get abused to crash the application or even the system.

To prevent this, I decided to use maps of mutexes. Essentially, I maintain a runtime map of all the cached galleries and their last access times, with mutexes to signal when a particular gallery cache is being written to.

```go
type cacheValue struct {
	Accessed time.Time   // Used to determine when the cache entry was last accessed for expiring and pruning purposes.
	Mu       *sync.Mutex // Mutex to ensure file-write-safety when accessing the cache.
}

type GalleryCache struct {
	Path  string                // Path to the cache directory.
	Store map[string]cacheValue // Map of Mutexes and access times for each cache entry.
}

var galleryCache *GalleryCache
```

Initializing the map and reading the existing cache into the map by iterating and verifying the cache directory:

```go
// InitGalleryCache initializes the abstraction layer for the gallery cache.
func InitGalleryCache() {
	galleryCache = &GalleryCache{
		Path:  config.BuildCachePath(),
		Store: make(map[string]cacheValue),
	}

	iterateCacheEntries(func(pathToEntry string, accessTime time.Time) {
		maybeUUID := path.Base(pathToEntry)
		if _, err := uuid.Parse(maybeUUID); err != nil {
			return
		}

		galleryCache.Store[path.Base(pathToEntry)] = cacheValue{
			Accessed: accessTime,
			Mu:       &sync.Mutex{},
		}
	})
}

// iterateCacheEntries iterates over all cache entries and calls the callback function for each entry.
func iterateCacheEntries(callback func(pathToEntry string, accessTime time.Time)) {
	cachePath := config.BuildCachePath()
	cacheEntries, err := os.ReadDir(cachePath)
	if err != nil {
		log.Z.Error("could not read cache dir",
			zap.String("path", cachePath),
			zap.String("err", err.Error()))
		return
	}

	for _, entry := range cacheEntries {
		info, err := entry.Info()
		if err != nil {
			log.Z.Error("could to read cache entry info",
				zap.String("path", cachePath),
				zap.String("err", err.Error()))
			return
		}

		pathToEntry := path.Join(cachePath, entry.Name())
		accessTime, err := atime.Stat(pathToEntry)
		if err != nil {
			log.Z.Debug("could to read the access time",
				zap.String("name", entry.Name()),
				zap.String("path", cachePath),
				zap.String("err", err.Error()))
			accessTime = info.ModTime()
		}

		callback(pathToEntry, accessTime)
	}
}
```

The galleries will be read with the following functions with the logic flowing as follows:

1. Check if the gallery exists in the runtime cache map
    1. If not, a new entry will be created.
    2. If it does, only the access time will be updated.
3. Lock the mutex to block any operations for the gallery.
4. If the gallery resides in the cache already, only the filepaths will be read and returned. If not, it will be extracted and copied.
5. Return filepaths and their count.
6. Release the mutex (notice the defer statement).

```go
// Read reads the gallery while updating the mutex and access time.
func Read(archivePath string, galleryUUID string) ([]string, int) {
	if _, ok := galleryCache.Store[galleryUUID]; !ok {
		galleryCache.Store[galleryUUID] = cacheValue{
			Accessed: time.Now(),
			Mu:       &sync.Mutex{},
		}
	} else {
		galleryCache.Store[galleryUUID] = cacheValue{
			Accessed: time.Now(),
			Mu:       galleryCache.Store[galleryUUID].Mu,
		}
	}

	galleryCache.Store[galleryUUID].Mu.Lock()
	defer galleryCache.Store[galleryUUID].Mu.Unlock()

	files, count := fetchOrExtractGallery(archivePath, galleryUUID)
	if count == 0 {
		return files, count
	}

	return files, count
}
```

Pruning expired cache entries according to their last access timestamps requires the use of mutexes as well. The PruneCache function runs every minute to clean up expired gallery caches.

```go
utils.PeriodicTask(time.Minute, cache.PruneCache)

// PeriodicTask loops the given function in separate thread between the given interval.
func PeriodicTask(d time.Duration, f func()) {
	go func() {
		for {
			f()
			time.Sleep(d)
		}
	}()
}
```

The PruneCache function iterates through the entire runtime cache map, locks the mutex while checking the access timestamp, and if expired, removes the cache entry from the map and deletes the files.

To ensure safe file removal, I am cautious not to remove anything other than the cache directory that starts with a UUID. This is verified by checking that the path begins with a valid UUID.

```go
// PruneCache removes entries not accessed (internal timestamp in mem) in the last x time in a thread-safe manner.
func PruneCache() {
	now := time.Now()
	for galleryUUID, value := range galleryCache.Store {
		value.Mu.Lock()
		if value.Accessed.Add(config.Options.Cache.TTL).Before(now) {
			if err := remove(galleryUUID); err != nil {
				log.Z.Error("failed to delete a cache entry",
					zap.Bool("thread-safe", true),
					zap.String("uuid", galleryUUID),
					zap.String("err", err.Error()))
			}
		}
		value.Mu.Unlock()
	}
}

// remove wipes the cached gallery from the disk.
func remove(galleryUUID string) error {
	// Paranoid check to make sure that the base is a real UUID, since we don't want to delete anything else.
	maybeUUID := path.Base(galleryUUID)
	if _, err := uuid.Parse(maybeUUID); err != nil {
		delete(galleryCache.Store, galleryUUID)
		return err
	}

	galleryPath := config.BuildCachePath(galleryUUID)
	if err := os.RemoveAll(galleryPath); err != nil {
		if errors.Is(err, fs.ErrNotExist) {
			delete(galleryCache.Store, galleryUUID)
		}
		return err
	}

	delete(galleryCache.Store, galleryUUID)

	return nil
}

```

### Closing

In this article, we've explored how to implement a simple file caching mechanism with mutexes in Go for a server. By using runtime maps and mutexes, safe concurrent access to cached galleries can be ensured while efficiently managing the cache. This approach not only reduces server load but also prevents potential issues from simultaneous access and cache corruption.

As the project evolves, I will continue to update this article with new insights and improvements. Thank you for reading, and I hope you found this guide helpful for your own projects!



Implementing server-side write-safe file caching with Go

large_banner.png

medium_banner.png

small_banner.png

thumbnail_banner.png

banner.png

ファイルシステムの状態を、ファイルと一対一の関係を持つデータベースと同期させることは、なかなか難しい作業である。この記事では、この問題に対する解決策をどのように実装したかを説明する。

**この記事に掲載されているすべてのコードは[GPL-3ライセンス](https://github.com/Mangatsu/server/blob/main/COPYING)となっている。**

### はじめに

漫画など様々な絵のコレクションも保存、管理、閲覧できるためのフルスタックアプリケーション[Mangatsu](https://github.com/Mangatsu/server)をオープンソースの形で開発している。構成としては、Goで書かれているサーバ側（APIアクセスとユーザー管理を提供等）と、TypeScriptとNext.jsで書かれているクライアントの形になっている。この記事では、主にサーバーアプリケーションに焦点を当てる。

>「Mangatsu」は「満月」と「漫画」の混ぜ言葉

Mangatsuは、ユーザーが指定したディレクトリパスをスキャンし、そこに置いている漫画、コミック、同人誌、およびその他のコレクション（以下はギャラリーと呼ぶ）のファイル名等を元にし、可能な限りの情報を解析してくれる。

ディレクトリ構造は2つの異なる型が可能となっている（freeform＝自由構造、structured＝体系立った構造）：

```
📂 freeform
├── 📂 doujinshi
│       ├──── 📂 deeper-level
│       │     ├──── 📦 [Group (Artist)] 同人誌◯.cbz
│       │     └──── 📄 [Group (Artist)] 同人誌◯.json
│       ├──── 📦 (C99) [Group (Artist)] 漫画〇〇.zip
│       ├──── 📄 (C99) [Group (Artist)] 漫画〇〇.json
│       └──── 📦 (C88) [group (author, another author)] 単行本 [DL].zip # (JSON or TXT metafile inside)
├── 📂 art
│       ├──── 📂 [Artist] art collection
│       │     ├──── 🖼️ 0001.jpg
│       │     ├────...
│       │     └──── 🖼️ 0300.jpg
│       ├──── 📦 art collection XYZ.rar
│       └──── 📄 art collection XYZ.json
└── 📦 (C93) [group (artist)] 同人誌△ (Magical Girls).cbz
```

```
📂 structured
├── 📕 漫画１
│       ├── 📦 Volume 1.cbz
│       ├── 📦 Volume 2.cbz
│       ├── 📦 Volume 3.cbz
│       └── 📦 Volume 4.zip
├── 📘 漫画２
│       └── 📂 Vol. 1
│           ├── 🖼️ 0001.jpg
│           ├── ...
│           └── 🖼️ 0140.jpg
├── 📘 漫画３
│       └── 📂 Vol. 1
│           ├── 📦 Chapter 1.zip
│           ├── 📦 Chapter 2.zip
│           └── 📦 Chapter 3.rar
├── 📗 漫画４
│       ├── 📦 Chapter 1.zip
│       ├── ...
│       └── 📦 Chapter 30.rar
└── 📦 One Shot漫画.rar
```

例に示されているように、多くのギャラリーはzip/cbz、rar/cbr、7zipなどの形式で圧縮されていることが多い。同じファイルをリクエストごとに解凍して、かえってサーバーの負荷と待ち時間の増加を防ぐため、ユーザーがクライアントでギャラリーを開くたびにファイルを解凍するのは望ましくでない。
クライアント側で結果をキャッシュ※することも一つの方法ではあるが、それは信頼性に欠け、悪意のあるユーザーによる乱用を防ぐことができず、特にMangatsuのようにキャッシュデータが非常に大きくなるアプリケーションでは、クライアント（ブラウザやスマートフォンアプリなど）にとって実用的ではないだと思う。

※実際にMangatsuでは両方、クライアントキャッシュとサーバキャッシュも併用している。クライアントの方は、ギャラリーごとにではなく、ページごとで管理されていて、ほぼ完全にブラウザに任せている形となっている。

### サーバー側ファイルキャッシュの実装

... こちらの方は割と簡単にできる。

まず、キャッシュディレクトリを初期化する方法：
```go
// InitPhysicalCache initializes the physical cache directories.
func InitPhysicalCache() {
	cachePath := config.BuildCachePath()
	if !utils.PathExists(cachePath) {
		err := os.Mkdir(cachePath, os.ModePerm)
		if err != nil {
		}
	}

	thumbnailsPath := config.BuildCachePath("thumbnails")
	if !utils.PathExists(thumbnailsPath) {
		err := os.Mkdir(thumbnailsPath, os.ModePerm)
		if err != nil {
		}
	}
}
```

次に、キャッシュから読み取るおよびキャッシュに書き込む関数の実装です。キャッシュに書き込む際には、ギャラリーを解凍する前に2つのチェックを行う：

1. キャッシュディレクトリはすでに存在しているのか？
2. もし存在するなら、そこにファイル（つまりページ）は置いているのか？
3. もし存在するなら、既存のファイルを返す。
    - ※  誰かまたは何かがキャッシュ内のファイルを破損させた場合、エンドユーザーに問題を引き起こす可能性がある。ここで追加のチェックを行うことを現在検討している。

```go
// fetchFromDiskCache fetches the files from the disk cache and returns the list of files and the number of files.
func fetchFromDiskCache(dst string, uuid string) ([]string, int) {
	var files []string
	count := 0

	cacheWalk := func(s string, d fs.DirEntry, err error) error {
		if err != nil {
			log.Z.Error("failed to walk cache dir",
				zap.String("name", d.Name()),
				zap.String("err", err.Error()))
			return err
		}
		if d.IsDir() {
			return nil
		}

		// ReplaceAll ensures that the path is correct: cache/uuid/<arbitrary/path/image.png>
		files = append(files, strings.ReplaceAll(filepath.ToSlash(s), config.BuildCachePath(uuid)+"/", ""))
		count += 1
		return nil
	}

	err := filepath.WalkDir(dst, cacheWalk)
	if err != nil {
		log.Z.Error("failed to walk cache dir",
			zap.String("dst", dst),
			zap.String("err", err.Error()))
		return nil, 0
	}

	return files, count
}

// fetchOrExtractGallery extracts the gallery from the archive and returns the list of files and the number of files.
func fetchOrExtractGallery(archivePath string, uuid string) ([]string, int) {
	dst := config.BuildCachePath(uuid)
	if _, err := os.Stat(dst); errors.Is(err, fs.ErrNotExist) {
		return utils.UniversalExtract(dst, archivePath)
	}

	files, count := fetchFromDiskCache(dst, uuid)
	if count == 0 {
		err := os.Remove(dst)
		if err != nil {
			log.Z.Debug("removing empty cache dir failed",
				zap.String("dst", dst),
				zap.String("err", err.Error()))
			return nil, 0
		}

		return utils.UniversalExtract(dst, archivePath)
	}
	natsort.Sort(files)

	return files, count
}
```

次のセクションでは、ファイルキャッシュをサーバーおよびデータベースと同期する方法について詳しく説明する。

### Mutexによるファイルロックの実装

大量のリクエストが同時にギャラリーにアクセスしようとした場合はどうなる、想像できる？特に、キャッシュされていないギャラリーだと、不要な書き込みが発生し、その結果、キャッシュされたファイル自体が破損されてしまう可能性が高くなる。最悪のケースでは、アプリケーションやシステムを落とせるように悪用されることもあり得る。

これを防ぐために、ミューテックス（mutex）のマップ（map）を使用することにした。基本的に、すべてのキャッシュされたギャラリーとその最終アクセス時間を記録するランタイムマップを維持し、特定のギャラリーキャッシュが書き込まれているときにシグナルを送るミューテックスを使用する。

```go
type cacheValue struct {
	Accessed time.Time   // Used to determine when the cache entry was last accessed for expiring and pruning purposes.
	Mu       *sync.Mutex // Mutex to ensure file-write-safety when accessing the cache.
}

type GalleryCache struct {
	Path  string                // Path to the cache directory.
	Store map[string]cacheValue // Map of Mutexes and access times for each cache entry.
}

var galleryCache *GalleryCache
```

Initializing the map and reading the existing cache into the map by iterating and verifying the cache directory:

マップを初期化し、キャッシュディレクトリを反復して検証することで、既存のキャッシュをマップに読み込む。

```go
// InitGalleryCache initializes the abstraction layer for the gallery cache.
func InitGalleryCache() {
	galleryCache = &GalleryCache{
		Path:  config.BuildCachePath(),
		Store: make(map[string]cacheValue),
	}

	iterateCacheEntries(func(pathToEntry string, accessTime time.Time) {
		maybeUUID := path.Base(pathToEntry)
		if _, err := uuid.Parse(maybeUUID); err != nil {
			return
		}

		galleryCache.Store[path.Base(pathToEntry)] = cacheValue{
			Accessed: accessTime,
			Mu:       &sync.Mutex{},
		}
	})
}

// iterateCacheEntries iterates over all cache entries and calls the callback function for each entry.
func iterateCacheEntries(callback func(pathToEntry string, accessTime time.Time)) {
	cachePath := config.BuildCachePath()
	cacheEntries, err := os.ReadDir(cachePath)
	if err != nil {
		log.Z.Error("could not read cache dir",
			zap.String("path", cachePath),
			zap.String("err", err.Error()))
		return
	}

	for _, entry := range cacheEntries {
		info, err := entry.Info()
		if err != nil {
			log.Z.Error("could to read cache entry info",
				zap.String("path", cachePath),
				zap.String("err", err.Error()))
			return
		}

		pathToEntry := path.Join(cachePath, entry.Name())
		accessTime, err := atime.Stat(pathToEntry)
		if err != nil {
			log.Z.Debug("could to read the access time",
				zap.String("name", entry.Name()),
				zap.String("path", cachePath),
				zap.String("err", err.Error()))
			accessTime = info.ModTime()
		}

		callback(pathToEntry, accessTime)
	}
}
```

ギャラリーは以下の関数で読み込まれ、ロジックは次のように進む：

1. ギャラリーがランタイムマップに存在するか確認する。
    1. ない場合は、新しいエントリを作成する。
    2. ある場合は、アクセス時間のみを更新する。
3. ミューテックスをロックして、ギャラリーの操作をブロックする。
4. ギャラリーファイルがすでにキャッシュにあった場合は、ファイルパスだけを読み取ってファイル名を返す。存在しない場合は、ギャラリーを解凍してコピーする。
5. ファイルパスとその数を返す。
6. ミューテックスを解除する（deferステートメントに注目）。

```go
// Read reads the gallery while updating the mutex and access time.
func Read(archivePath string, galleryUUID string) ([]string, int) {
	if _, ok := galleryCache.Store[galleryUUID]; !ok {
		galleryCache.Store[galleryUUID] = cacheValue{
			Accessed: time.Now(),
			Mu:       &sync.Mutex{},
		}
	} else {
		galleryCache.Store[galleryUUID] = cacheValue{
			Accessed: time.Now(),
			Mu:       galleryCache.Store[galleryUUID].Mu,
		}
	}

	galleryCache.Store[galleryUUID].Mu.Lock()
	defer galleryCache.Store[galleryUUID].Mu.Unlock()

	files, count := fetchOrExtractGallery(archivePath, galleryUUID)
	if count == 0 {
		return files, count
	}

	return files, count
}
```

最終アクセス時刻に基づいて期限切れのキャッシュエントリを削除するにも、ミューテックスの使用が必要。PruneCache関数は1分ごとに実行され、期限切れのギャラリーキャッシュをクリーンアップする。

```go
utils.PeriodicTask(time.Minute, cache.PruneCache)

// PeriodicTask loops the given function in separate thread between the given interval.
func PeriodicTask(d time.Duration, f func()) {
	go func() {
		for {
			f()
			time.Sleep(d)
		}
	}()
}
```

PruneCache関数はランタイムマップ全体を反復し、間ミューテックスをロックしてアクセス時刻をチェックする。そして、期限が切れている場合は、キャッシュエントリをマップから削除してファイルも削除する。

安全にファイルを削除するために、パスが有効なUUIDで始まっていることを確認ができたファイルしか削除しないように注意している。

```go
// PruneCache removes entries not accessed (internal timestamp in mem) in the last x time in a thread-safe manner.
func PruneCache() {
	now := time.Now()
	for galleryUUID, value := range galleryCache.Store {
		value.Mu.Lock()
		if value.Accessed.Add(config.Options.Cache.TTL).Before(now) {
			if err := remove(galleryUUID); err != nil {
				log.Z.Error("failed to delete a cache entry",
					zap.Bool("thread-safe", true),
					zap.String("uuid", galleryUUID),
					zap.String("err", err.Error()))
			}
		}
		value.Mu.Unlock()
	}
}

// remove wipes the cached gallery from the disk.
func remove(galleryUUID string) error {
	// Paranoid check to make sure that the base is a real UUID, since we don't want to delete anything else.
	maybeUUID := path.Base(galleryUUID)
	if _, err := uuid.Parse(maybeUUID); err != nil {
		delete(galleryCache.Store, galleryUUID)
		return err
	}

	galleryPath := config.BuildCachePath(galleryUUID)
	if err := os.RemoveAll(galleryPath); err != nil {
		if errors.Is(err, fs.ErrNotExist) {
			delete(galleryCache.Store, galleryUUID)
		}
		return err
	}

	delete(galleryCache.Store, galleryUUID)

	return nil
}

```

### まとめ

この記事では、Goを使ったサーバー側のファイルキャッシングをミューテックスで実装する方法を紹介した。
ランタイムマップとミューテックスを使うことで、キャッシュされたギャラリーへの安全な同期アクセスを確保しながら、効率的にキャッシュを管理することができる。このアプローチは、サーバーの負荷を減らすだけでなく、同期アクセスやキャッシュの破損による潜在的な問題を防ぐことができる。

プロジェクトが進化するにつれて、新しい知見や改善点をこの記事に更新していく予定。

読んでいただきありがとうございます。このガイドが皆さんのプロジェクトに約立てたら嬉しい。


サーバ側の書込み保護のファイルキャッシュをGoで実装

サーバ側の書込み保護のファイルキャッシュをGoで作ってみた

Server-side write-safe file caching with Go

The name Luukuton originates from a nickname I created for Minecraft around 10 years ago: _Luukku12_. It consists of the word "luukku", which is Finnish and means "hatch" or "trapdoor", and the number 12. There was no particular reason choosing this name back then. 

Going forward a year or two I wanted to get rid of the numbers in my name. That's when the name "Luukuton" was born. It basically means "without a hatch" or "hatchless" (a name I've actually used on some sites too!).  I was pretty happy with it at first.

But at some point I started to change my mind, probably a few years ago. I felt like the name was a bit too long and hard to pronounce in English. The meaning "without a hatch" wasn't really something I was fond of either. 

Now, thinking of a new name is hard. Especially because I wanted the next name to be **the one**. Something I wouldn't change ever again. So what I did? I didn't even think about it.

Fast-forwarding to this year, I started playing FFXIV (a great game by the way, go and play it). For some reason when I was creating my character, it just clicked. I found a name I really liked. Kohana Sengetsu, or 繊月小花 in kanji. Kohana being the first name and the one I would mostly be using in various places and Sengetsu last name. It's short and simple. It's also a Japanese one, which is a bonus as I've grown fond of the language on my journey of learning it for the past three and half years.

Kohana (小花) has the meaning of a small flower which is cute ❤️, and Sengetsu (繊月) in this case means crescent moon which you can think of as a small throwback to Tsukihime (100% cleared the remake before starting FFXIV, and I LOVED it). 

Signing off,

**Kohana, Kohana Sengetsu, CrescentKohana, 繊月小花, 🌙🌸**

A quick explanation why am I now called Kohana instead of Luukuton on the internet

Kohana Sengetsu, FFXIV player character, looking behind her shoulder in space while a star is shining

large_2022-06-15_03-55-21-514_Osakehime.png

medium_2022-06-15_03-55-21-514_Osakehime.png

small_2022-06-15_03-55-21-514_Osakehime.png

thumbnail_2022-06-15_03-55-21-514_Osakehime.png

ffxiv_kohana_sengetsu.png

Why I changed my internet nickname

<div class="video-container">
<iframe width="840" height="473" src="https://www.youtube-nocookie.com/embed/esHOiWP2W98" title="Teaser Trailer" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
</div>

Over a hundred episodes worth of translated audio commentaries written by NISIOISIN himself.

- Masterpost and a guide to how to get them on [Reddit](https://www.reddit.com/r/araragi/comments/i2balw/monogatari_series_audio_commentaries_masterpost/)
- Detailed breakdown on [Sheets](https://docs.google.com/spreadsheets/d/1LCuqahTKzkdCFvRp6cL3hzUkMZFuYjgB53hrZgdZZHg/edit#gid=474706799)

Credits for all the translations goes to all the people listed on the Reddit post above. I've helped with proofreading (TLC) and fixing mistakes.

Over a hundred episodes worth of audio commentaries written by NISIOISIN himself. Translated.

Hanekawa Tsubasa and Senjouhahara Hitagi in a podcast recording room

large_bakemonogatari_commentary.jpg

medium_bakemonogatari_commentary.jpg

small_bakemonogatari_commentary.jpg

thumbnail_bakemonogatari_commentary.jpg

bakemonogatari_commentary.jpg

<div class="video-container">
<iframe width="840" height="473" src="https://www.youtube-nocookie.com/embed/esHOiWP2W98" title="Teaser Trailer" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
</div>

NISIOISIN本人に書いてある、物語シリーズの副音声全話（１００話以上）の英訳バージョン！

日本語が喋れる人にとって、そんなに意味がないかもしれないけれども、一応、英訳も存在しているよって日本人にも知らせたかったのです。

- マスターポストと入手方法はこちら、[Reddit](https://www.reddit.com/r/araragi/comments/i2balw/monogatari_series_audio_commentaries_masterpost/)にあります。
- 内容の解説：[Sheets](https://docs.google.com/spreadsheets/d/1LCuqahTKzkdCFvRp6cL3hzUkMZFuYjgB53hrZgdZZHg/edit#gid=474706799)

訳者や他プロジェクトに関わった人のクレジットは、上記のReddit投稿に記載されています。私は校正（TLC）と間違いの修正をやっていました。

１００話以上英訳されている物語シリーズの副音声エピソードが登場

物語シリーズ副音声

Monogatari Series Audio Commentaries

Some great software I use daily.

### Cross-platform

- File archiver: [7-zip.org](https://www.7-zip.org)
- Great file indexing (search) tools: 
  - Windows: [voidtools.com](https://www.voidtools.com/)
  - Linux: [FSearch](http://cboxdoerfer.github.io/fsearch/)
- Password manager (everything below works together):
  - Windows:  [keepass.info](https://keepass.info/index.html)
  - Windows & Linux: [keepassxc.org](https://keepassxc.org)
  - Android: [KeePassDX](https://play.google.com/store/apps/details?id=com.kunzisoft.keepass.free)
- Torrenting: [qbittorrent.org](https://www.qbittorrent.org/)
- Scriptable PC remote control: [unifiedremote.com](https://www.unifiedremote.com/)

### Windows
- The best (in my opinion) music player on Windows: [AIMP](https://www.aimp.ru/)
- Image sharing, OCR and other tools: [ShareX](https://getsharex.com/)
- Better volume & media overlay: [Flyouts](https://github.com/ModernFlyouts-Community/ModernFlyouts)
- Better volume control: [EarTrumpet](https://github.com/File-New-Project/EarTrumpet)
- Emulating different locales: [Locale Emulator](https://xupefei.github.io/Locale-Emulator/)
- Useful tools by MS (e.g. batch rename and rebinding keys): [PowerToys](https://github.com/microsoft/PowerToys)

### Android
- 2FA: [Aegis](https://play.google.com/store/apps/details?id=com.beemdevelopment.aegis)
- Universal delivery tracking: [Deliveries](https://play.google.com/store/apps/details?id=de.orrs.deliveries)
- Reddit: [Sync for reddit](https://play.google.com/store/apps/details?id=com.laurencedawson.reddit_sync)


medium_WindowsTerminal.png

small_WindowsTerminal.png

thumbnail_WindowsTerminal.png

WindowsTerminal.png

幾つかお勧めの便利なアプリを紹介します。

### クロスプラットフォーム

-アーカイバ：[7-zip.org](https://www.7-zip.org)
- Great file indexing (search) tools: 
  - Windows：[voidtools.com](https://www.voidtools.com/)
  - Linux：[FSearch](http://cboxdoerfer.github.io/fsearch/)
- パスワードマネージャー（以下の全てが連動可能）
  - Windows：[keepass.info](https://keepass.info/index.html)
  - Windows & Linux：[keepassxc.org](https://keepassxc.org)
  - Android：[KeePassDX](https://play.google.com/store/apps/details?id=com.kunzisoft.keepass.free)
- ビットトレント：[qbittorrent.org](https://www.qbittorrent.org/)
- スクリプトも書けるPCリモート: [unifiedremote.com](https://www.unifiedremote.com/)

### Windows
- Windowsの場合、音楽プレイヤーと言えば：[AIMP](https://www.aimp.ru/)
- スクショ、OCR、色々便利なツール等：[ShareX](https://getsharex.com/)
- 音量とメディアオーバレイ：[Flyouts](https://github.com/ModernFlyouts-Community/ModernFlyouts)
- 音量調整：[EarTrumpet](https://github.com/File-New-Project/EarTrumpet)
- 幾つかのロケールをエムレート：[Locale Emulator](https://xupefei.github.io/Locale-Emulator/)
- 便利なツールのコレクション（例えば、ファイル名の一括変更、キーを再割り当て等）：[PowerToys](https://github.com/microsoft/PowerToys)

### Android
- 2FA（多要素認証）： [Aegis](https://play.google.com/store/apps/details?id=com.beemdevelopment.aegis)
- 宅配便、郵便トラッカー：[Deliveries](https://play.google.com/store/apps/details?id=de.orrs.deliveries)
- Reddit：[Sync for reddit](https://play.google.com/store/apps/details?id=com.laurencedawson.reddit_sync)


良く使っている色々なソフトウェアやアプリ。

お勧めのアプリ

Software I use

**tl;dr Colors might off when extracting frames etc. with ffmpeg if the file is not tagged correctly. Fix it by the command mentioned at the end. [A comparison](https://slow.pics/c/55al5mtZ) between everything.**

Something strange I noticed today (at the time of writing): a image I extracted with ffmpeg (command `ffmpeg -i episode.mkv q-%d.png`) from an episode of anime had different colors compared to when it was shown through mpv. I also tested MPC-HC, and mpv on Linux. Same results. I also tested the movie Kimetsu no Yaiba: Mugen Ressha-hen. Same thing happened.

I checked their meta data with ffprobe.

### Kobayashi-san Chi no Maid Dragon S2 - 01 (1080p [6B63C756])

- Command: `ffprobe -v error -show_streams .\file.mkv`
- Output:
  ```ini
  pix_fmt=yuv420p
  level=40
  color_range=unknown
  color_space=unknown
  color_transfer=unknown
  color_primaries=unknown
  ```

### Kimetsu no Yaiba: Mugen Ressha-hen (1080p.BD.Remux.DTS-HD.MA-TTGA)

- Command: `ffprobe -v error -show_streams .\file.mkv`
- Output:
  ```ini
  pix_fmt=yuvj420p
  level=-99
  color_range=pc
  color_space=bt470bg
  color_transfer=unknown
  color_primaries=unknown
  ```

It would seem that ffmpeg defaults to BT.601 even though the content nowadays is BT.709 (HDTV, BD) or BT.2020 (UHD) [1, 2] when color_space tag is set to **unknown**. This can be different for SD or otherwise old content though! The movie had color_space set to **bt470bg** (meaning PAL BT.601). That's most likely a mistake in the release itself (the BD or the BD ripper used). It should be BT.709 as it's a HD BluRay release. Japan uses NTCS so it's even more incorrect in that sense. smpte170m would be the NTSC equivalent for BT.601.

I feel that at least the unknown tag should be handled better in ffmpeg.

This can be fixed it by specifying the color_matrix in the command, like so: `ffmpeg -i INPUT.mkv -sws_flags +accurate_rnd+full_chroma_int -vf scale=in_color_matrix=bt709:out_color_matrix=bt709 q-%d.png`

The `-sws_flags +accurate_rnd+full_chroma_int` flag might not be as necessary, but it can help with accuracy. [A comparison](https://slow.pics/c/55al5mtZ) between everything.

Sources:
- [1] [Tweet](https://twitter.com/1977swthx/status/859048252716351489) (in Japanese)
- [2] [anime-tip.com](https://anime-tip.com/jamkun/vod/11118#toc19) (in Japanese)
- [blog.maxofs2d.net](https://blog.maxofs2d.net/post/148346073513/bt601-vs-bt709) (in English)


Screenshot from Kimetsu no Yaiba: Mugen Ressha-hen

large_mpv.png

medium_mpv.png

small_mpv.png

thumbnail_mpv.png

kny.png

Color conversion issues with ffmpeg

### Tweaks with Group Policy Manager 

**Windows 10 might force old and possibly unstable graphics, chipset and other drivers to your system. To properly disable automatic driver updates on W10:**

1. Search for Group Policy from Start Menu
2. Computer Configuration > Administrative Templates > Windows Components > Windows Update > double click *Do not include drivers with Windows Update* > Enabled
3. Computer Configuration > Administrative Templates > System > Device Installation > double click *Prevent device metadata retrieval from the Internet* > Enabled
4. Computer Configuration > Administrative Templates > System > Device Installation > double click *Specify search order for device driver source locations* > Disabled

It might also be a good idea to disable this:

<img src="https://strapi.kohana.fi/uploads/w10_automatic_drivers_84b603a774.png" width="900"/>

**Detailed status while startup, shutdown and updates:**
1. Search for Group Policy from Start Menu
2. Computer Configuration > Administrative Templates > System > double click *Display highly detailed status messages* > Enabled

**Disable automatic restarts for updates:**
1. Search for Group Policy from Start Menu
2. Computer Configuration > Administrative Templates > Windows Components > Windows Update > double click *No auto-restart with logged on users for scheduled automatic updates installations* > Enabled

**Stop Windows waking up from sleep**
1. Search for Group Policy from Start Menu
2. Computer Configuration > Administrative Templates > Windows Components > Windows Update > double click *Enabling Windows Update Power Management* > Disabled

Group Policy Editor is only available on Windows 10 Pro! On Home-version you need to manually install Group Policy Editor first (or this might also be achievable through registry editor.)

Group Policy Editor for W10 Home users [here](https://www.itechtics.com/easily-enable-group-policy-editor-gpedit-msc-in-windows-10-home-edition/).

### Refresh rate
<img src="https://strapi.kohana.fi/uploads/win10_hz_e54365d0b5.gif" width="600"/>

### Startup Programs
1. CTRL + Shift + ESC ->  Startup -> Disable everything useless
2. Win + R -> msconfig -> Services -> Hide all Microsoft services -> Disable everything useless

### Power Plans
I prefer this being set to the High Performance plan but nowadays any Ryzen plan (if on Ryzen) or Balanced should be fine as well.
<br/><br/>
<img src="https://strapi.kohana.fi/uploads/win10_powerplans_ca9d9727da.png" width="600"/>

### Disable Fast Start-up
It's debatable if one would want to disable this. I prefer it being disabled as with an NVMe SSD my boot times are already fast, and fast start-up can cause weird bugs with Windows.
<br/><br/>
<img src="https://strapi.kohana.fi/uploads/w10_fast_startup1_caac8ac820.png" width="600"/>
<br/><br/>
<img src="https://strapi.kohana.fi/uploads/w10_fast_startup2_fd124b115c.png" width="600"/>

### Debloater

Some scripts to debloat Windows: [github.com/Sycnex/Windows10Debloater](https://github.com/Sycnex/Windows10Debloater)

large_windows-10-logo.png

medium_windows-10-logo.png

small_windows-10-logo.png

thumbnail_windows-10-logo.png

windows-10-logo.png

Tweaks for Windows 10

**Prerequisites**
- [UNi drivers](http://maxedtech.com/asus-xonar-unified-drivers) (UNi Xonar W10 1825 v1.81a r2 for W10 or UNi Xonar 1816/1823 v1.80a r3 for W7, W8 & W10)
- [XonarSwitch](http://maxedtech.com/xonarswitch-beta-testing) (latest)



**Step-by-step installation and configuration instructions**
1. Select "Low DPC Latency", "Run driver cleaning", "Re-enable stereo upmix" and choose your sound card from the "Default card profile" list: <br/><br/><img src="https://strapi.kohana.fi/uploads/uni_installation_b8f8449fb1.png" alt="driver installation prompt" width="400"/>

2. *[Optional, this may lower DPC latency]* After you've installed the drivers, restart your computer and after that press Win+R key combination; type "msconfig" there and continue. In the programs tab disable "Windows host process (Rundll32)": <br/><br/><img src="https://strapi.kohana.fi/uploads/cmedia_7cd08ddc96.png" alt="process name" width="400"/>

3. Place the XonarSwitch.exe in desired location and launch it.
4. **Output tab:** Select "2 Channels" from the Source channels list, and set the Bit Depth to 24bit (or 16bit, there's not that much of a difference) and Sample Rate to 44.1Khz.
5. **Output tab:** Click the Amp button and select an appropriate impedance level from the list depending on your headphones (VOIP is for 0 - 32 ohm headphones, Pro-gaming for 32 - 64 ohm and Exciter for 64 - 150 ohm). I recommend using the rear 3.5mm connection because it has less interference (Rear Headphones): <br/><br/><img src="https://strapi.kohana.fi/uploads/output_894280e7f8.png" alt="output impedance" width="400"/>

6. **Mixer tab:** Set L and R playback volume to 45% or less (this is because over 45% might cause clipping in your audio).
7. **Mixer tab:** Set the microphone (record) volume to whatever value you like and click the settings button (* icon). Disable the front mic if you're using the rear port (which is recommended) and decide do you want to use mic boost: <br/><br/><img src="https://strapi.kohana.fi/uploads/mixer_be94371bcf.png" alt="volume mixer" width="400"/>

8. **Equalizer / FlexBass:** Adjust the equalizer if you need to and disable FlexBass: <br/><br/><img src="https://strapi.kohana.fi/uploads/eq_153bd5182e.png" alt="equalizer" width="400"/>


9. **AEC:** Disable AEC.
10. You can find additional options by right clicking the XonarSwitch icon which you can find in the taskbar: <br/><br/><img src="https://strapi.kohana.fi/uploads/taskbar_rightclick_bdc62cc904.png" alt="taskbar" width="200"/>


12. **Options:** You can backup and restore the settings of the UNi drivers and completely uninstall the drivers. Set the XonarSwitch launch automatically on startup: <br/><br/><img src="https://strapi.kohana.fi/uploads/options_startup_6787a1236c.png" alt="startup options" width="400"/> 
 
12. **Profiles:** You can create multiple profiles. For example if you want to use surround while watching movies you can create a specific profile for that which you can activate by pressing a custom key combination (eg. CTRL+ALT+1): <br/><br/><img src="https://strapi.kohana.fi/uploads/profiles_07e47c187b.png" alt="profiles" width="400"/>



Blog Filter posts by clicking tags below