
## はじめに

Github の個人向け無料プラン(`Free`)と有料プラン(`Pro`)の機能を比較しまとめました。

## おことわり

- [GitHub のアップグレードページ](https://github.com/settings/billing/plans)を参考に作成しています。
- 記載している情報は 2022 年 5 月現在のものです。
- Free, Pro 共に使用不可な機能に関しては記載していません。
- Team や Enterprise などの比較は[こちら](https://github.co.jp/pricing.html)を参考にしてください。

## 比較

### コード管理

#### パブリックリポジトリ

- Free, Pro ともに数の制限なく作成できます。

#### プライベートリポジトリ

- Free, Pro ともに数の制限なく作成できます。

### ワークフロー

#### GitHub Actions

- **プライベートリポジトリ**で使用する際の利用可能な実行時間に違いがあります。
- パブリックリポジトリで使用する分には制限がありません。

|                        | Free         | Pro          |
| ---------------------- | ------------ | ------------ |
| プライベートリポジトリ | 2000 分 / 月 | 3000 分 / 月 |
| パブリックリポジトリ   | 無制限       | 無制限       |

#### GitHub Packages

- 作成したプロダクトをコミュニティ標準のパッケージマネージャー(`npm`や`nuget`)から公開できる機能です。
- Free と Pro では以下の違いがあります。
  - 公開可能な容量
  - GitHub Actions 以外を経由した際のデータ転送量
- パブリックリポジトリには制限はありません。

|                | Free     | Pro       |
| -------------- | -------- | --------- |
| 公開可能な容量 | 500MB    | 2GB       |
| データ転送量   | 1GB / 月 | 10GB / 月 |

https://github.co.jp/features/packages

#### Protected Branches

- 特定のブランチに対してコミットルールを設定する機能です。
- Free の場合は、**パブリックリポジトリのみ**設定可能です。

| Free                     | Pro    |
| ------------------------ | ------ |
| パブリックリポジトリのみ | 無制限 |

https://docs.github.com/ja/repositories/configuring-branches-and-merges-in-your-repository/defining-the-mergeability-of-pull-requests/about-protected-branches

#### Code Owners

- プルリクエストが作成された際に、自動的にレビュワーが指定されるように定義できる機能です。
- Free の場合は、**パブリックリポジトリのみ**設定可能です。

| Free                     | Pro    |
| ------------------------ | ------ |
| パブリックリポジトリのみ | 無制限 |

https://docs.github.com/ja/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners

#### Multiple Pull Request Assignees

- プルリクエストのレビュイー(もしくは担当者)を複数指定できる機能です。
- Free の場合は、**パブリックリポジトリのみ**設定可能です。

| Free                     | Pro    |
| ------------------------ | ------ |
| パブリックリポジトリのみ | 無制限 |

https://docs.github.com/ja/issues/tracking-your-work-with-issues/assigning-issues-and-pull-requests-to-other-github-users

#### Multiple Pull Request Reviewers

- プルリクエストのレビュワーを複数指定できる機能です。
- Free の場合は、**パブリックリポジトリのみ**設定可能です。

| Free                     | Pro    |
| ------------------------ | ------ |
| パブリックリポジトリのみ | 無制限 |

https://docs.github.com/ja/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/requesting-a-pull-request-review

### コラボレーション

#### Pages and Wikis

- GitHub Pages: 静的ページを公開する機能です。
- Wiki: Wiki ページを作成する機能です。
- Free の場合は、**パブリックリポジトリのみ**設定可能です。

| Free                     | Pro    |
| ------------------------ | ------ |
| パブリックリポジトリのみ | 無制限 |

https://pages.github.com/

https://docs.github.com/ja/communities/documenting-your-project-with-wikis/adding-or-editing-wiki-pages

## まとめ

調べた結果、自分は以下の理由で無料プランにダウングレードすることにしました。

- GitHub Pages の使用頻度が下がったため
  - [Netlify](https://www.netlify.com/) や [Vercel](https://vercel.com/) などのホスティングサービスを使うようになった
- プライベートリポジトリを複数人で使用する予定がないため
- GitHub Actions を使っているが、制限に達するほどの使用予定がないため

個人的には無料プランでプライベートリポジトリが作成できるようになったのが、一番感激しています。
(学生の頃の恥ずかしいコードを隠せるので...)

皆さんのプラン選びの参考になれば幸いです。


Githubの無料プラン(Free)と有料プラン(Pro)を比較


## 概要

Laravel で Backed Enum を用いた際に個人的に詰まったポイントがあったので、まとめました。

### 目的

Laravel で Backed Enum に定義した`value`から`label`を参照する

#### 例

- `SuitID`が**1**の`case`を参照する
- 参照した`case`に対して`label`メソッドを用いてラベル名を取得する。
- 下記 Enum の場合、**ハート**が返却されること

```php:app/Enums/Suit.php
<?php

namespace App\Enums

enum Suit
{
    case Hearts = 1;
    case Diamonds = 2;
    case Clubs = 3;
    case Spades = 4;

    public function label(): string
    {
      return match ($this) {
        Suit::Hearts => 'ハート',
        Suit::Diamonds => 'ダイヤモンド',
        Suit::Clubs => 'クラブ',
        Suit::Spades => 'スペード',
      }
    }
}
```

### 結論

`from`メソッドの引数に`value`を指定することで、取得できる。

```php
use App\Enum\Suit;

// 取得したいSuitのvalueを指定する
$suit_value = 1;

// valueから該当のSuitを取得し、labelメソッドでラベル名を取得する
$suit_label = Suit::from($suit_value)->label();
```

## PHP8.1 から追加された Enum について

Enum 型を使えば、簡単に 複数の定数を定義できます。

### 定義例

```php:app/Enums/Suit.php
<?php

namespace App\Enums

enum Suit
{
    case Hearts;
    case Diamonds;
    case Clubs;
    case Spades;
}
```

## Backed Enum

Enum 型に値を持たせることもできます。
値に依存した Enum を`Backed Enum`と呼びます。

```php:app/Enums/Suit.php
<?php

namespace App\Enums

enum Suit
{
    case Hearts = 1;
    case Diamonds = 2;
    case Clubs = 3;
    case Spades = 4;
}
```

https://www.php.net/manual/ja/language.enumerations.backed.php

### 参照方法

`Backed Enum`に定義した内容は、以下のように`Enumのクラス名`+`変数名`+`value`で参照できます。

```php:routes/web.php
<?php

use App\Enum\Suit;

Route::get('/', function () {

  var_dump(Suit::Hearts->value)
  // 1
});
```

また、下記のように新たにメソッドを定義することもできます。

### label メソッドの例

- 日本語名を返却する`labelメソッド`を追加しました。

```php:app/Enums/Suit.php
<?php

namespace App\Enums

enum Suit
{
    case Hearts = 1;
    case Diamonds = 2;
    case Clubs = 3;
    case Spades = 4;

    public function label(): string
    {
      return match ($this) {
        Suit::Hearts => 'ハート',
        Suit::Diamonds => 'ダイヤモンド',
        Suit::Clubs => 'クラブ',
        Suit::Spades => 'スペード',
      }
    }
}
```

定義した内容は、以下のように`Enumのクラス名`+`変数名`+`メソッド名`で参照できます。

```php:routes/web.php
<?php

use App\Enum\Suit;

Route::get('/', function () {

  var_dump(Suit::Hearts->label())
  // 1
});
```

## 本題

`Hearts`の`value`と`label`を取得する場合は上記の方法で可能ですが、`value` が `2` の`case`を取得したい場合は、どうすれば良いでしょうか？

## 方法

Backed Enum には**from メソッド**があり、value を引数にしてすることで、該当の`case`を参照することができます。

```php
use App\Enum\Suit;

// 取得したいSuitのvalueを指定する
$suit_value = 1;

// valueから該当のSuitを取得し、labelメソッドでラベル名を取得する
$suit_label = Suit::from($suit_value)->label();
```

## 参考文献

### 公式ドキュメント

https://www.php.net/manual/ja/language.enumerations.php

### 記事作成時に参考にさせていただいたブログ様

https://zenn.dev/nshiro/articles/dd82ab12afbc3d

https://blog.capilano-fw.com/?p=9829


LaravelでBacked Enumを用いた際に、valueからcaseを参照する方法


以前投稿した **「Zaim API と Go を用いて、Zaim のデータを CSV 出力する」** という記事の Go 版です。

https://zenn.dev/hidaka/articles/zaim-backup-python

# 目的

- Zaim のデータを CSV に出力する仕組みを作る
- バックアップデータは、Zaim のファイル出力機能で出力されるものと同じ内容にする(カラム名を揃える)

# 手順

## API 登録・トークン取得

API 登録、トークン取得は[以前の記事](https://zenn.dev/hidaka/articles/zaim-backup-python)を参考にしてください。

## コードを実装

#### Zaim のデータを取得・操作するパッケージを追加する

```shell:ターミナル
go get github.com/s-sasaki-0529/go-zaim
```

https://github.com/s-sasaki-0529/go-zaim

### データを取得するコードを追加する

#### env ファイルに取得したトークン情報を記載する

`.env`ファイルを作成し、取得したトークンを記載します。

```shell:.env
CONSUMER_KEY=
CONSUMER_SECRET=
ACCESS_TOKEN=
ACCESS_SECRET=
```

#### データを取得するコードを追加する

トークン情報を読み込む`config.go`とデータを取得する`zaim.go`、各処理を呼び出す`main.go`を実装します。

```go:config.go
package main

import (
	"fmt"
	"os"

	gozaim "github.com/s-sasaki-0529/go-zaim"

	"github.com/joho/godotenv"
)

func GetClient() *gozaim.Client {
	err := godotenv.Load(".env")

	if err != nil {
		fmt.Printf("読み込み出来ませんでした: %v", err)
	}

	c := gozaim.NewClient(
		os.Getenv("CONSUMER_KEY"),
		os.Getenv("CONSUMER_SECRET"),
		os.Getenv("ACCESS_TOKEN"),
		os.Getenv("ACCESS_SECRET"),
	)

	return c
}
```

```go:zaim.go
package main

import (
	"fmt"
	"net/url"

	gozaim "github.com/s-sasaki-0529/go-zaim"
)

type ZaimData struct {
	money      []gozaim.Money
	categories []gozaim.Category
	genres     []gozaim.Genre
	accounts   []gozaim.Account
}

// Zaimのデータを取得する
func GetZaimData(c *gozaim.Client) ZaimData {

	// データ一覧の取得
	m, err := c.FetchMoney(url.Values{})
	if err != nil {
		fmt.Println("Failed to get money", err)
	}

	msg := fmt.Sprintf("%d 件のデータを取得しました。\n", len(m))
	fmt.Println(msg)

	// カテゴリ一覧取得
	ca, err := c.FetchCategories()
	if err != nil {
		fmt.Println("Failed to get categories", err)
	}

	// ジャンル一覧取得
	g, err := c.FetchGenres()
	if err != nil {
		fmt.Println("Failed to get genres", err)
	}

	// 口座一覧取得
	a, err := c.FetchAccounts()
	if err != nil {
		fmt.Println("Failed to get accounts", err)
	}

	result := ZaimData{
		m,
		ca,
		g,
		a,
	}

	return result
}
```

```go:main.go
package main

import "fmt"

func main() {

	// クライアント設定
	c := GetClient()

	// データ取得
	d := GetZaimData(c)
	fmt.Println(d)

}
```

データが取得できましたが、カテゴリや口座等は ID しか記載されていません。
そのため、ID をもとに各種名称を付与する処理を実装します。

#### ID をもとに、名称を付与する

名称を付与する処理を追記します。

```go:zaim.go
type MoneyJP struct {
	Date         string `csv:"日付"`
	Mode         string `csv:"方法"`
	Category     string `csv:"カテゴリ"`
	Genre        string `csv:"カテゴリの内訳"`
	From         string `csv:"支払元"`
	To           string `csv:"入金先"`
	Name         string `csv:"品目"`
	Comment      string `csv:"メモ"`
	Place        string `csv:"お店"`
	CurrencyCode string `csv:"通貨"`
	Income       int    `csv:"収入"`
	Payment      int    `csv:"支出"`
	Transfer     int    `csv:"振替"`
}

// 種別IDをもとに、種別名を付与する
func ConvertData(datas ZaimData) []MoneyJP {
	var money []MoneyJP

	for _, v := range datas.money {
		p, i, t := GetAmount(v.Mode, v.Amount)
		cm := MoneyJP{
			v.Date,
			v.Mode,
			GetCategoryName(v.CategoryID, datas.categories),
			GetGenreName(v.GenreID, datas.genres),
			GetAccountName(v.FromAccountID, datas.accounts),
			GetAccountName(v.ToAccountID, datas.accounts),
			v.Name,
			v.Comment,
			v.Place,
			v.CurrencyCode,
			p,
			i,
			t,
		}

		money = append(money, cm)

	}
	return money
}

// IDに紐づくカテゴリ名を返却
func GetCategoryName(id int, categories []gozaim.Category) string {
	for _, v := range categories {
		if v.ID == id {
			return v.Name
		}
	}
	return ""
}

// IDに紐づくジャンル名を返却
func GetGenreName(id int, genres []gozaim.Genre) string {
	for _, v := range genres {
		if v.ID == id {
			return v.Name
		}
	}
	return ""
}

// IDに紐づく口座名を返却
func GetAccountName(id int, accounts []gozaim.Account) string {
	for _, v := range accounts {
		if v.ID == id {
			return v.Name
		}
	}
	return "-"
}

// 方法に応じた額を返却
func GetAmount(mode string, amount int) (int, int, int) {
	var p, i, t int

	switch mode {
	case "payment":
		p = amount
	case "income":
		i = amount
	case "transfer":
		t = amount
	default:
	}

	return p, i, t

}
```

```go:main.go
// 種別名を付与する
cd := ConvertData(d)
fmt.Println(cd)
```

続いてカラム名を日本語に変更し、CSV 出力する処理を実装します。

#### データを出力するコードを追加

カラム名を日本語に変更し、ユーザ ID など不要なデータを除去します。
続いて、整頓されたデータを CSV 出力します。

```go:zaim.go
// CSV出力
func OutputCSV(money []MoneyJP) {
	file, _ := os.OpenFile("zaim-backup.csv", os.O_RDWR|os.O_CREATE, os.ModePerm)
	defer file.Close()

	// csvファイルを書き出し
	gocsv.MarshalFile(&money, file)

}
```

```go:main.go
// CSV出力する
OutputCSV(cd)
```

これでコードの実装は完了です。

### 実装したコードを実行する

ターミナルなどシェルスクリプトが実行できるアプリケーションで、下記コマンドを実行します。

```shell:ターミナル
% go run *.go
```

コンソールに取得件数が表示され、`zaim-backup.csv`というファイルが生成されます。

## まとめ

今回実装したコードは下記リポジトリで公開しています。

https://github.com/ryohidaka/zaim-backup-go

## 参考文献

https://zenn.dev/a_ichi1/articles/c9f3870350c5e2

https://qiita.com/nkumag/items/ef372ea35dcfbfa19310

https://itsakura.com/go-switch


Zaim APIとGoを用いて、ZaimのデータをCSV出力する


# 目的

- Zaim のデータを CSV に出力する仕組みを作る
- バックアップデータは、Zaim のファイル出力機能で出力されるものと同じ内容にする(カラム名を揃える)

# 手順

## API 登録

### Zaim developers に登録

https://dev.zaim.net/

### アプリケーションを登録

アプリケーションを登録する([登録画面](https://dev.zaim.net/home/clients/add))

- 名称: 任意の名称
- サービス種: クライアントアプリ
- 概要: 任意の概要
- 組織: 任意の組織名
- サービスの URL: 任意の URL
- アクセスレベル

  - 読み込み: 必要
  - 書き込み: 不要
  - 永続許可: 必要

![アプリケーションを登録](/images/zaim-backup/zaim-dev-register.png)

### 認証情報を確認する

1. [登録済みアプリケーション](https://dev.zaim.net/home/clients)の一覧から作成したアプリケーションを選択し、詳細表示する
   ![登録済みアプリケーション](/images/zaim-backup/zaim-dev-list.png)
2. 詳細画面の**コンシューマ ID**と**コンシューマシークレット**を控える
   ![詳細表示](/images/zaim-backup/zaim-dev-info.png)

これで API 登録は完了です。
続いて Python でデータを取得するコードを実装します。

## コードを実装

### トークンを取得

API を呼び出すには先ほど控えた認証情報に加えて、**アクセストークン**と**アクセスシークレット**が必要なので、それらを取得するコードを実装します。

#### Zaim のデータを取得・操作する Python パッケージを追加する

```shell:ターミナル
pip install pyzaim
```

https://pypi.org/project/pyzaim/

#### トークンを取得するためのコードを追加する

```python:auth.py
from pyzaim import get_access_token

get_access_token()
```

#### トークン取得用コードを実行し、指示に従って認証情報を入力する

1. コンシューマ ID とコンシューマシークレットを聞かれるので入力
1. 認証ページの URL が表示されるので、アクセスして許可
1. 遷移先ページのソースコードから「oauth_verifier」と書いてあるコードをコピーして入力
1. 問題なければアクセストークンとアクセスシークレットが表示される

```shell:ターミナル
% python auth.py
Please input consumer ID : { consumer-key }
Please input consumer secret : { consumer-secret }


Please go here and authorize :  https://auth.zaim.net/users/auth?oauth_token={ oauth-token }
Please input oauth verifier : { oauth-token }


access token : xxxxx
access token secret : xxxxx
oauth verifier : xxxxx,xxxxx
```

続いて、取得したトークン情報を用いてデータを取得するコードを実装します。

### データを取得するコードを追加する

#### env ファイルに取得したトークン情報を記載する

`.env`ファイルを作成し、取得したトークンを記載します。

```shell:.env
CONSUMER_KEY=
CONSUMER_SECRET=
ACCESS_TOKEN=
ACCESS_SECRET=
```

#### データを取得するコードを追加する

トークン情報を読み込む`config.py`とデータを取得する`zaim.py`、各処理を呼び出す`main.py`を実装します。

```python:config.py
# .env ファイルをロードして環境変数へ反映
from dotenv import load_dotenv
load_dotenv()

# 環境変数を参照
import os
CONSUMER_KEY = os.getenv('CONSUMER_KEY')
CONSUMER_SECRET = os.getenv('CONSUMER_SECRET')
ACCESS_TOKEN = os.getenv('ACCESS_TOKEN')
ACCESS_SECRET = os.getenv('ACCESS_SECRET')

```

```python:zaim.py
import config
from pyzaim import ZaimAPI

def getZaimData():
    """Zaimのデータを取得する
    """

    consumer_key = config.CONSUMER_KEY
    consumer_secret = config.CONSUMER_SECRET
    access_token = config.ACCESS_TOKEN
    access_secret = config.ACCESS_SECRET

    api = ZaimAPI(consumer_key, consumer_secret,
                  access_token, access_secret, 'verifier')
    # データ一覧の取得
    datas = api.get_data()

    # カテゴリ一覧情報
    categories = api.category_itos

    # ジャンル一覧情報を取得
    genres = api.genre_itos

    # 口座一覧情報を取得
    accounts = api.account_itos

    msg = str(len(datas)) + " 件のデータを取得しました"
    print(msg)

    return [datas, categories, genres, accounts]
```

```python:main.py
import zaim

# データ取得
datas, categories, genres, accounts = zaim.getZaimData()
```

データが取得できましたが、カテゴリや口座等は ID しか記載されていません。
そのため、ID をもとに各種名称を付与する処理を実装します。

#### ID をもとに、名称を付与する

名称を付与する処理を追記します。

```python:zaim.py
def convertData(datas, categories, genres, accounts):
    """IDをもとに名称を付与する
    """

    for data in datas:

        # カテゴリ名を付与
        categoryId = int(data["category_id"])
        data["category"] = categories[categoryId] if categoryId > 0 else ""

        # 内訳名を付与
        genreId = int(data["genre_id"])
        data["genre"] = genres[genreId] if genreId > 0 else ""

        # 口座名を付与
        fromAccountId = int(data["from_account_id"])
        data["from"] = accounts[fromAccountId] if fromAccountId > 0 else "-"

        toAccountId = int(data["to_account_id"])
        data["to"] = accounts[toAccountId] if toAccountId > 0 else "-"

    return datas
```

```python:main.py
# 種別名を付与する
datas = zaim.convertData(datas, categories, genres, accounts)
```

続いてカラム名を日本語に変更し、CSV 出力する処理を実装します。

#### データを出力するコードを追加

カラム名を日本語に変更し、ユーザ ID など不要なデータを除去します。
続いて、整頓されたデータを CSV 出力します。

```python:zaim.py
import csv

def outputCSV(datas):
    """カラム名を日本語に置換し、CSV出力する
    """

    # 種別名を日本語に置換
    for data in datas:
        keys = {
            "date": "日付",
            "mode": "方法",
            "category": "カテゴリ",
            "genre": "カテゴリの内訳",
            "from": "支払元",
            "to": "入金先",
            "name": "品目",
            "comment": "メモ",
            "place": "お店",
            "currency_code": "通貨"
        }
        for k, v in keys.items():
            data[v] = data.pop(k)

        # 入出金
        data["収入"] = data.pop("amount") if data["方法"] == "income" else 0
        data["支出"] = data.pop("amount") if data["方法"] == "payment" else 0
        data["振替"] = data.pop("amount") if data["方法"] == "transfer" else 0

        # 不要なキーを削除
        unUsedKeys = ["id", "user_id", "category_id",
                      "genre_id", "from_account_id", "to_account_id", "active", "created", "receipt_id", "place_uid", "original_money_ids"]
        for key in unUsedKeys:
            if(key in data):
                data.pop(key)

    # ヘッダーを指定
    fieldName = list(keys.values())
    fieldName.extend(['収入', '支出', '振替'])

    # CSV出力
    with open('zaim-backup.csv', 'w', encoding='utf-8') as csvfile:
        writer = csv.DictWriter(csvfile, fieldnames=fieldName)
        writer.writeheader()
        writer.writerows(datas)
```

```python:main.py
# CSV出力
zaim.outputCSV(datas)
```

これでコードの実装は完了です。

### 実装したコードを実行する

ターミナルなどシェルスクリプトが実行できるアプリケーションで、下記コマンドを実行します。

```shell:ターミナル
% python main.py
```

コンソールに取得件数が表示され、`zaim-backup.csv`というファイルが生成されます。

## まとめ

今回実装したコードは下記リポジトリで公開しています。

https://github.com/ryohidaka/zaim-backup

## 参考文献

https://maku77.github.io/python/env/dotenv.html

https://laboratory.kazuuu.net/saving-a-dictionary-to-a-csv-file-in-python/#toc5


Zaim APIとPythonを用いて、ZaimのデータをCSV出力する


# はじめに

Skicka を用いて Github のリポジトリから GoogleDrive にデータをアップロードしようと思いました。
途中で 403 エラーに詰まってしまったので、その際の解決方法を備忘録としてを記します。

# 問題

Skicka のトークンを発行しようとしたが、途中で 403 エラーとなり進めなくなってしまった。

## 現状

下記記事を参考に実装したところ、`skicka.config`を記述する作業までは問題なく進めたが、それ以降上記問題で進めなくなった。
恐らく GCP 側で何らかの変更があったのだろう。

https://qiita.com/sekitaka_1214/items/85875d64c226b2f7ab86

上記ファイルを記述し、`skicka -no-browser-auth df`を実行すると、認証画面の URL が返却される。
指定された URL にアクセスすると、認証画面にいくはずなのだが、403 エラーとなり進むことができない。

## 原因

テストユーザに自分を登録していない場合に、403 となるらしい (Twitter 情報)

# 対応

## テストユーザを登録する

1. 「API とサービス」内の「OAuth 同意画面」にアクセスする
   ![](/images/skicka-403-error/skicka-gcp-sidemenu.png)

2. 追加ボタンを押すと入力画面が表示されるため、入力欄に自分のメールアドレスを入力し登録する。
   ![](/images/skicka-403-error/skicka-gcp-add-user.png)

## 動作確認

1. テストユーザに自分を登録した上で、再度`skicka -no-browser-auth df`を実行してみる

```shell
#skicka -no-browser-auth df
Go to the following link in your browser:
https://accounts.google.com/o/oauth2/auth?client_id=XXX.apps.googleusercontent.com...
```

2. 上記で取得した URL にアクセスする
   先ほどと違って、警告は出るものの**Continue**から先には進めそう
   ![](/images/skicka-403-error/skicka-attention-safe.png)

3. 画面の案内に従ってログイン
   ![](/images/skicka-403-error/skicka-ask-account.png)

4. トークンを取得し、入力
   ![](/images/skicka-403-error/skicka-return-token.png)

```shell
Enter verification code: { 取得したトークン }
```

4. **無事アクセス成功！！！**
   問題なく GoogleDrive の情報が取得できた！

```shell
Updating metadata cache: [=======================================================================] 100.00% 5m32s
Capacity   100.00 GiB
Trash        2.04 GiB     2.04%
Drive       12.26 GiB    12.26%
Gmail      262.72 MiB     0.26%
Photos      77.91 GiB    77.91%
Free space   7.53 GiB     7.53%
```

(100GB 契約で、空き容量が 7GB...)

5. トークン情報を取得する

```shell
# cat /root/.skicka.tokencache.json
{"ClientId":"{client_id}","access_token":"{token}","token_type":"Bearer","refresh_token":"{token}","expiry":"2022-01-22T14:23:59.9556225Z"}#
```

あとは、このトークン情報を用いて実装するだけです。

# 参考文献

[テストユーザが必要という情報が載っていたツイート](https://twitter.com/mushroom080/status/1403796268644585472?s=20)

https://qiita.com/satackey/items/34c7fc5bf77bd2f5c633

https://qiita.com/sekitaka_1214/items/19b27a837fe87b7b9ff9

https://qiita.com/satackey/items/34c7fc5bf77bd2f5c633

https://qiita.com/sekitaka_1214/items/85875d64c226b2f7ab86

https://ifritjp.github.io/blog2/public/posts/2020/2020-12-05-lns-release/


Skickaで403エラーが出た場合の対処法

## 問題

- [Instafeed.js](https://instafeedjs.com/#/)というサービスを用いて、インスタグラムの画像を自身の Web ページに掲載しようとしたところ、案内されている Heroku のパッケージ[Instagram Token Agent](https://github.com/companionstudio/instagram-token-agent)が**一部機能有料化**のため、使用できなくなっていました。

※[issue](https://github.com/companionstudio/instagram-token-agent/issues/33)にも上っていた

## 対応方法

- [Instant Tokens](https://www.instant-tokens.com/home)というサービスでトークン取得処理を代替する

## 手順

### 1. Instagram 基本表示 API の設定

- [API のドキュメント](https://developers.facebook.com/docs/instagram-basic-display-api/getting-started)の手順に従ってステップ 6 までの工程を行い、**アクセストークンが取得できるように**する

### 2. Instant Tokens とインスタグラムアカウントを連携する

1. [Instant Tokens](https://www.instant-tokens.com/home)にアクセスし、アカウント登録を行う
   ![Instant Tokens](/images/instafeed-replacement-token-generator/instant-tokens-login.png)

2. インスタグラムアカウントを連携する
   ![](/images/instafeed-replacement-token-generator/instant-tokens-register.png)

3. 設定を開き、JS ファイルの URL もしくは リクエスト先 URL を取得する
   ![](/images/instafeed-replacement-token-generator/instant-tokens-list.png)

4. Instafeed とトークン取得用 JS ファイルをインポートする

```html:index.html

<script type="text/javascript" src="path/to/instafeed.min.js"></script>


<script type="text/javascript" src="https://ig.instant-tokens.com/users/{user_id}/instagram/{app_id}/token.js?userSecret={user_secret}"></script>
```

5. 変数名`InstagramToken`にトークンが代入されているため、これを用いて表示する

```js: token
var InstagramToken = {access_token};
```

```html:index.html
<div id="instafeed"></div>

<script type="text/javascript">
    var feed = new Instafeed({
      accessToken: InstagramToken
    });
    feed.run();
</script>
```

Instafeed.jsで案内されているトークンジェネレータの代替サービス


## 概要

Gatsby で作成したページにインスタグラムの画像を表示しようとした際の備忘録です。

## 環境

- gatsby: 4.4.0

## 手順

### パッケージを追加

- [gatsby-source-instagram-all](https://www.gatsbyjs.com/plugins/gatsby-source-instagram-all/)を追加

```shell:terminal
npm i gatsby-source-instagram-all
```

### プラグイン設定を変更

- `gatsby-config.js`に設定を追記する

```js:gatsby-config.js
plugins: [
    `gatsby-source-instagram-all`,
]
```

### Instant Tokens に登録する

- こちらの記事を参考にアカウント作成を行う

https://zenn.dev/hidaka/articles/4d34f6dccf296a

### アクセストークンを取得し、プラグインに渡す

1. .env にインスタグラムの情報を記述する

```shell:.env
INSTAGRAM_USER_ID=
INSTAGRAM_APP_ID=
INSTAGRAM_APP_SECRET=
```

2. axios を用いて Instant Tokens にリクエストを行い、返却されたアクセストークンをプラグインの設定に追加する

```js:gatsby-node
const axios = require("axios")
require("dotenv").config()

exports.onPreInit = async ({ actions, store }) => {
  const { setPluginStatus } = actions
  const state = store.getState()
  const plugin = state.flattenedPlugins.find(
    plugin => plugin.name === "gatsby-source-instagram-all"
  )
  if (plugin) {
    const userId = process.env.INSTAGRAM_USER_ID
    const appId = process.env.INSTAGRAM_APP_ID
    const userSecret = process.env.INSTAGRAM_APP_SECRET

    const instagramToken = await axios({
      method: "GET",
      url: `https://ig.instant-tokens.com/users/${userId}/instagram/${appId}/token?userSecret=${userSecret}`,
    }).then(response => {
      return response.data.Token
    })
    plugin.pluginOptions = {
      ...plugin.pluginOptions,
      ...{ access_token: instagramToken || "" },
    }
    setPluginStatus({ pluginOptions: plugin.pluginOptions }, plugin)
  }
}
```

3. GraphQL クエリを記述し、インスタグラム画像のリストを取得する

```js
  const result = await graphql(
    `
      query {
        allInstagramContent() {
          nodes {
            id
            media_url
            caption
            album {
              id
              media_url
            }
            timestamp(formatString: "DD MMM, YYYY")
          }
        }
      }
    `
```


blogs