「TypeScript」の記事 - Crieit

SmartHRと連携して人事データを可視化するツールを作ってみた

2023-04-11T23:29:51+09:00

個人開発でSmartHRと連携したレポーティングツールを作成してみました。

人事データ簡易分析ツール

概要

このツールはSmartHRと連携してAPI経由でデータを取得して可視化を行うためのレポーティングツールです。

SmartHRではフリープラン、労務管理プランでは分析レポートの利用が有料プランに切り替えるなどの対応を行わないと利用できません。

オプション機能として提供されていますが、そこまで細かく分析するほどでは無く現状の人事情報を可視化したい、みたいな緩い使い方でも許容できるユーザーさんを対象に簡易的なグラフ出力を提供します。

利用にはテナントIDとアクセストークンを利用しますが、サイト内にも記載がある通りこのツールはテナントIDやアクセストークンを保存したりはしません。データ取得時のみに利用します。

そのため画面をリロードしたりするともちろん情報は失われます。

再度表示したい場合は都度テナントID、アクセストークンはをもう一度入力していただく手間はありますが…

技術構成

React
rebass
styled-component
recharts
TypeScript
Vite
VItest
Axios
CloudFlare Pages

レポート出力結果

出力結果は以下のような感じでシンプルに出力しています。

もしご興味あれば是非使ってみてください。

次にテナントIDとアクセストークンについて簡単に説明します。

テナントIDについて

テナントIDはSmartHRのURLに含まれている以下の部分の文字列です。

[https://[テナントID].smarthr.jp/](https://[テナントID].smarthr.jp/)

アクセストークンについて

アクセストークンは管理画面より作成を行うため以下に手順を載せておきます。

SmartHRにログインした後、右上のユーザー名の部分をクリックするとメニューが表示されます。

その中の「共通設定」をクリックしてください。

次に左側メニューから「外部システム連携」をクリックします。

API連携より「アクセストークン」をクリックします。

「新規発行」をクリックします

「アクセストークン名」を入力します。利用する用途を名前にしておくと良いです。

例えば「分析レポート」とか…

必須項目の入力が埋まると「登録」ボタンがクリックできるようになるので登録するとアクセストークンが払い出されます。

これらのテナントIDとアクセストークンを利用して本ツールにて入力して「出力」ボタンをクリックしてもらうとレポートが出力されます。

まだまだ表示がおかしい部分があったり、追加したい機能等があるので引き続き開発を進めていきたいと思います！

採用計画や人事データを活用して分析を行いたい方は是非活用してみてください。

Zenn の記事を DEV に自動的に同期させる GitHub Action 作ってみた

2021-03-22T13:21:27+09:00

はじめに

去年 DEV のアカウントを作成したものの、今まで全く有効活用出来ていませんでした。

DEV にはカノニカル URL を設定出来るので、常々 Zenn の記事を投稿する際にクロスポストしたいなと考えておりました。そこで、Zenn に記事を投稿したら、自動的に DEV にも記事を投稿 & 同期する GitHub Action を作ってみました。
sync-zenn-with-dev-action

今回初めて GitHub Action を自作したのですが、その中で得た知見を残す形で記事を書くことにしました。また、GitHub Action は TypeScript で作成しました。

開発した GitHub Action の概要

まずはザッとどのような GitHub Action を作成したのか、概要について説明いたします。

GitHub リポジトリで管理している Zenn の記事を DEV に同期して投稿する GitHub Action を作成しました。 その際に DEV へ投稿する記事には Zenn の該当記事へのカノニカル URL も自動で設定できます。これにより DEV と Zenn へ記事をシームレスにクロスポストすることが可能となります。

今回作成した GitHub Action を利用するワークフローファイルの一例は下記となります。

name: "Sync all Zenn articles to DEV"
on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: checkout my project
        uses: actions/checkout@v2
      - name: dev.to action step
        uses: nikaera/sync-zenn-with-dev-action@v1
        # id を設定することで、後のジョブで Output で指定した値が参照可能になる
        id: dev-to
        with:
          # DEV の API キーを指定する
          api_key: ${{ secrets.api_key }}
          # (オプション) DEV に記事を投稿した際に Zenn のカノニカル URL を設定したい場合に指定する
          # username: nikaera
          # (オプション) 改行区切りで指定した articles フォルダ内のファイルパスを記載した txt ファイルを指定することで、記載された記事のみを同期するようになる。
          # 他プラグインと組み合わせることで差分のみを txt ファイルに載せることが可能。詳細については後述の Outputs の項目に記載。
          # added_modified_filepath: ./added_modified.txt
          # (オプション) Zenn の articles 以下全ての記事を常に DEV に同期するか指定する
          # update_all が true のときは added_modified_filepath は無視される。
          # update_all: false
        # 上記アクション実行時に DEV に新規で同期する記事に関しては Zenn のマークダウンヘッダに
        # 該当する DEV の記事の ID が dev_article_id として記載されるようになる。
        # 今後はその ID を元に同期するようになるため、該当する Zenn の記事をコミットする。
        # 新規で同期する記事が無ければ、このジョブは実行しない。
      - name: write article id of DEV to articles of Zenn.
        run: |
          git config user.name github-actions
          git config user.email [email protected]
          git add ${{ steps.dev-to.outputs.newly-sync-articles }}
          git commit -m "sync: Zenn with DEV [skip ci]"
          git push
        if: steps.dev-to.outputs.newly-sync-articles
        # Outputs には DEV の記事情報 (title, url) が含まれるようになるため、
        # 最後に出力して実行結果の内容を確認することもできる
      - name: Get the output articles.
        # dev-to という id が紐付いたジョブの Outputs を取得して echo で内容を出力する
        run: echo "${{ steps.dev-to.outputs.articles }}"

簡単に nikaera/sync-zenn-with-dev-action@v1 というジョブの内部処理について説明いたします。

Inputs の update_all 及び added_modified_filepath で受け取った情報を元に、
どの記事を DEV に同期させるか判定する
DEV に同期する記事のファイルパス一覧を取得して、
それぞれの記事のヘッダに dev_article_id の記載があるか判定する
Inputs の api_key を利用して、Zenn の記事に dev_article_id が含まれていれば、
該当する DEV の記事を更新する。含まれていなければ DEV に新規で記事を作成する
Inputs の username を利用して、
DEV の記事に該当する Zenn 記事のカノニカル URL を設定する
DEV に新規で記事を作成した場合は、
Zenn の該当記事のヘッダに dev_article_id を書き込む
DEV に記事を投稿する際、Zenn は対応しているが、
DEV では対応していない記述は削除する (::: 記法や一部のコード記法)
記事の公開ステータス及びタグなどについても DEV の記事に反映する¹
新規で DEV に記事を同期した Zenn 記事のファイルパスを、
Outputs の newly-sync-articles に設定する
(後のジョブで dev_article_id の含まれた記事をコミットしたいため)
ワークフローで同期された記事情報は Outouts の articles に設定する

Inputs と Outputs の内容一覧については下記になります。

Inputs

キー	説明	必須
api_key	DEV の API Key を設定する	o
username	Zenn の自分のアカウント名を設定する (DEV に同期する記事に Zenn のカノニカル URL を設定したい場合のみ)	x
added_modified_filepath	改行区切りで指定した articles フォルダ内のファイルパスを記載した txt ファイルを指定することで、記載された記事のみを同期するようになる。PR やコミット差分のファイルのみを取得するための GitHub Action jitterbit/get-changed-files@v1 と組み合わせることで、更新差分のあった記事のみを随時同期することも可能。² 更新差分のあった記事のみを随時同期するための実際のワークフローファイルはこちら	x
update_all	Zenn の全ての記事をどうきするかどうかを設定する。GitHub Action 初回実行時のみ true にする使い方を想定している。デフォルトは true。`added_modified_filepath` よりも `update_all` が優先されるため `added_modified_filepath` を設定する場合は false を設定する必要あり`	x

Outputs

キー	説明
articles	同期された DEV の記事のタイトル及び URL が格納された配列
newly-sync-articles	DEV で新たに新規作成された Zenn 記事のファイルパスが格納された配列。実際のワークフローファイルの該当する記述のように、必ずコミットに含めるようにする必要がある (理由は後述)

Inputs 及び Outputs については公式サイトの説明をご参照ください。

Zenn の記事を DEV に同期するための仕組み

Zenn の記事を新規で DEV に同期する際は、DEV に記事を新規作成する必要があります。その際に Zenn の記事と DEV の記事を紐付けるための何らかの仕組みが必要となります。そうしないと、今後 Zenn の記事内容を更新した際に、DEV のどの記事に内容を同期させればよいかが不明なためです。

そこで、記事を同期するための仕組みとして、dev_article_id というフィールドを Zenn のマークダウンヘッダに追記することで DEV の同期すべき記事との紐付けを行うことにしました。dev_article_id には DEV の記事作成 API 実行時の返り値である id を設定します。

一度 id を dev_article_id として Zenn の記事に紐付けてしまえば、次回以降に記事の同期を行う際は DEV の記事更新 API を利用できます。

また、Outputs の newly-sync-articles には新規で作成された DEV 記事の id である dev_article_id が追記された Zenn 記事のファイルパスが格納されています。そのため、nikaera/sync-zenn-with-dev-action@v1 実行後は、下記のように steps.dev-to.outputs.newly-sync-articles 内に格納されたファイル群をコミットに反映させる必要があります。

# `nikaera/sync-zenn-with-dev-action@v1` 実行後に必ず定義すべきジョブ
# DEV に新規に作成した記事がなければ実行しない (if: steps.dev-to.outputs.newly-sync-articles)
- name: write article id of DEV to articles of Zenn.
    run: |
        git config user.name github-actions
        git config user.email [email protected]
        git add ${{ steps.dev-to.outputs.newly-sync-articles }}
        git commit -m "sync: Zenn with DEV [skip ci]"
        git push
    if: steps.dev-to.outputs.newly-sync-articles

上記のジョブで newly-sync-articles に格納された dev_article_id が追記された Zenn 記事は随時コミットに反映しないと、Zenn の全ての記事が同期毎 DEV に新規作成され続けるという不具合を引き起こしてしまうので、ご注意ください

GitHub Action を開発する手順

サクッと開発に取り組みたかったため、Docker コンテナを利用する方法ではなく、JavaScript を利用する方法で開発を進めていくことにしました。

TypeScript で GitHub Action を作る

GitHub 公式が TypeScript で GitHub Action を作るためのテンプレートプロジェクトを用意してくれています。今回はこのテンプレートプロジェクトを利用する形でプロジェクトを作成しました。

(余談) GitHub Action では Docker コンテナを用いてワークフローを実行可能です。そのため、実行環境は自由に設定出来ます。(Go, Python, Ruby, etc.)

早速 TypeScript のテンプレートプロジェクトを元に自分の GitHub Action プロジェクトを作成します。

1. テンプレートプロジェクトを元に GitHub Action の TypeScript プロジェクトを作成する

2. プロジェクトの作成後 git clone してきて開発する準備を整える

GitHub Action プロジェクトの開発を進めるための準備を行う

テンプレートプロジェクトを git clone したら、まずは action.yml の内容を変更します。
今回作成した GitHub Action の action.yml は下記となっております。

# action.yml
# GitHub Action のプロジェクト名
name: 'Sync Zenn articles to DEV'
# GitHub Action のプロジェクト説明文
description: 'Just sync Zenn articles to DEV.'
# GitHub Action の作者
author: 'nikaera'
# GitHub Action に渡せる引数の値定義
inputs:
  api_key:
    # フィールドの指定が必須であれば true、必須でなければ false を設定する
    # DEV の API キーは同期を行う際に必須なため、true を設定している
    required: true
    # フィールドの説明文
    description: 'The api_key required to use the DEV API (https://docs.forem.com/api/#section/Authentication)'
  username:
    required: false
    description: "Zenn user's account name. (Fields to be filled in if canonical url is set.)"
  articles:
    required: false
    description: "The directory where Zenn articles are stored."
    # フィールドにはデフォルト値を指定することも可能
    # Zenn の記事がデフォで格納されているフォルダ名を指定している
    default: articles
  update_all:
    require: false
    description: "Whether to synchronize all articles."
    default: true
  added_modified_filepath:
    required: false
    description: |
      Synchronize only the articles in the file path divided by line breaks.
      You can use jitterbit/get-changed-files@v1 to get only the file paths of articles that have changed in the correct format.
      (https://github.com/jitterbit/get-changed-files)
# GitHub Action 実行後に参照可能になる値定義
outputs:
  articles:
    description: 'A list of URLs of dev.to articles that have been created or updated'
  newly-sync-articles:
    description: 'File path list of newly synchronized articles.'
# GitHub Action の実行環境
runs:
  using: 'node12'
  # テンプレートプロジェクトでは コンパイル先が dist になるため `dist/index.js` を指定している
  main: 'dist/index.js'

TypeScript のテンプレートプロジェクトでは、バンドルツールとして ncc が採用されています。GitHub Action 実行時に使用されるのは ncc によりコンパイルされた単一の JavaScript ファイル (dist/index.js) になります。

あとは src フォルダ内でプログラムを書いて、npm run all && node dist/index.js のようにコマンド実行しながら開発を進めていくだけです。

(余談) GitHub Action の開発ツールとして Docker を利用した act というものが存在するようです。ローカル環境で検証する際は既知の問題に対応する必要がありそうですが、GitHub Action の開発で非常に有効活用できそうで気になっております。

今回の開発では利用しなかったのですが、今後開発を進めていく中で利用する機会も出てきそうなので、その際は本記事内容を更新する形で知見を追記したいと考えております。

:::

GitHub Action を実装する際に利用した機能

GitHub Action を実装する際に利用した機能を、実際のコード内容を抜粋して簡単に説明していきます。下記で紹介する内容は GitHub Actions Toolkit の機能です。

/**
下記の yml の with で指定した値は core.getInput で受け取ることが可能。

- name: dev.to action step
    uses: nikaera/sync-zenn-with-dev-action@v1
    id: dev-to
    with:
        # DEV の API キーを指定する
        api_key: ${{ secrets.api_key }}
*/
core.getInput("api_key", { required: true });
core.getInput("update_all", { required: false });

/**
下記の yml の steps.<ジョブで指定した id>.outputs で参照可能な値をセットすることが可能。
セットする内容は文字列である必要がある。

- name: dev.to action step
    uses: nikaera/sync-zenn-with-dev-action@v1
    id: dev-to
- name: Get the output articles.
    run: echo "${{ steps.dev-to.outputs.articles }}"
*/

core.setOutput("articles", JSON.stringify(devtoArticles, undefined, 2));
core.setOutput("newly-sync-articles", newlySyncedArticles.join(" "));

/**
GitHub Action 実行時に出力されるログをレベルごとに出力することが可能
core.debug はローカル実行時のみに出力内容を確認することができる
*/
core.debug("debug");
core.info(`update_all: ${updateAll}`);
core.error(JSON.stringify(error));

上記だけ把握してれば GitHub Action の開発は問題なく行うことができました。

作成した GitHub Action を実際に GitHub 上で実行可能にする

ローカル環境で一通り開発が完了したら、GitHub リポジトリに push した後タグ付けを行います。GitHub Action はタグを設定しないと実行できないため必要な作業となります。 今回タグ付けは GitHub 上で行いました。

1. タグの項目をクリックする

2. Create a new release ボタンをクリックしてタグ作成画面に遷移する

3. Publish release ボタンをクリックしてタグの作成を完了する

上記の例では v1 というタグを作成したので nikaera/sync-zenn-with-dev-action@v1 のような記述で GitHub Action を利用可能になりました。 私は Zenn の記事を zenn.dev というリポジトリで管理しているため、早速このリポジトリに GitHub Action を導入してみます。

Zenn の全ての記事を DEV に同期するためのワークフロー

本記事の GitHub Action では DEV の API キーを使用するため、事前にシークレットへ API_KEY という名称で値を登録しておきます。公式サイトの手順に従いシークレットの登録が完了したら、該当リポジトリに .github/workflows/sync-zenn-with-dev-all.yml というワークフローファイルを作成します。

# .github/workflows/sync-zenn-with-dev-all.yml
name: "Sync-All Zenn with DEV"
on:
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    if: contains(github.event.head_commit.message, '[skip ci]') == false
    steps:
      - name: setup node project
        uses: actions/checkout@v2
      - name: dev.to action step
        uses: nikaera/sync-zenn-with-dev-action@v1
        id: dev-to
        with:
          api_key: ${{ secrets.api_key }}
          # Zenn の自分のアカウント名を指定すると
          # DEV 記事のカノニカル URL に Zenn 記事の URL を指定できる
          # username: nikaera
          update_all: true
      - name: write article id of DEV to articles of Zenn.
        run: |
          git config user.name github-actions
          git config user.email [email protected]
          git add ${{ steps.dev-to.outputs.newly-sync-articles }}
          git commit -m "sync: Zenn with DEV [skip ci]"
          git push
        if: steps.dev-to.outputs.newly-sync-articles
      - name: Get the output articles.
        run: echo "${{ steps.dev-to.outputs.articles }}"

上記は手動実行が可能な Zenn の記事を全て DEV に同期するためのワークフローファイルになります。作成が完了したらワークフローファイルを実行して、記事が正常に同期できているか確認してみます。

1. Actions タブをクリックする

2. 作成した Sync-All Zenn with DEV ワークフローファイルを選択する

3. Run workflow ボタンを実行して、ワークフローを実行する

4. ワークフローの実行が正常に完了していれば、ログに DEV の記事情報が出力される

5. dev.to にアクセスして Zenn の記事情報が正常に同期されていることを確認する

正常に Zenn の全ての記事が DEV に同期されていることが確認できたら、次は Zenn の記事が新規作成されたり、更新されたときのみに DEV に同期するためのワークフローファイルを作成します。

更新差分のあった Zenn 記事のみを DEV に同期するためのワークフロー

main ブランチが更新されたときのみ更新された記事のみを DEV に同期するためのワークフローファイルを作成します。該当リポジトリに .github/workflows/sync-zenn-with-dev.yml というワークフローファイルを作成します。

# .github/workflows/sync-zenn-with-dev.yml
name: "Sync Zenn with DEV"
on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    if: contains(github.event.head_commit.message, '[skip ci]') == false
    steps:
      - name: setup node project
        uses: actions/checkout@v2
      - name: get modified files
        id: files
        uses: jitterbit/get-changed-files@v1
      - name: output modified files to text
        run: |
          for changed_file in ${{ steps.files.outputs.added_modified }}; do
            echo "${changed_file}" >> added_modified.txt
          done
      - name: dev.to action step
        uses: nikaera/sync-zenn-with-dev-action@v1
        id: dev-to
        with:
          api_key: ${{ secrets.api_key }}
          # Zenn の自分のアカウント名を指定すると
          # DEV 記事のカノニカル URL に Zenn 記事の URL を指定できる
          # username: nikaera
          added_modified_filepath: ./added_modified.txt
          update_all: false
      - name: write article id of DEV to articles of Zenn.
        run: |
          git config user.name github-actions
          git config user.email [email protected]
          git add ${{ steps.dev-to.outputs.newly-sync-articles }}
          git commit -m "sync: Zenn with DEV [skip ci]"
          git push
        if: steps.dev-to.outputs.newly-sync-articles
      - name: Get the output articles.
        run: echo "${{ steps.dev-to.outputs.articles }}"

上記ワークフローファイルの作成が完了したら、早速動作確認のために、まさに今執筆中の本記事内容をリポジトリに push してみます。

1. git push 後に該当するワークフローの実行結果を確認する

2. dev.to に執筆途中の内容で記事が同期されていることを確認する

これまで説明してきた 2 つのワークフローを利用することで、大抵のユースケースはカバーできるはずです。

おわりに

GitHub Action の勉強のために取り組んだプロジェクトですが、思いの外楽しくて他にも色々な機能のアイデアがあるので随時実装していきたいと考えています。(英訳, タイトルフォーマット変更, etc.)

DEV に Zenn の記事をクロスポストする GitHub Action を公開することで、いつもお世話になっている Zenn というプラットフォームを海外の方に認知していただける機会を創出できたのかもと考えたらテンションが上がってきました。

それはさておき、Zenn の記事を他でも有効活用するための GitHub Action を開発する際には、恐らく本記事で紹介した GitHub Action のコードが参考になるはずです。

また、GitHub Action の Marketplace というものが用意されているようなので、開発がある程度完了次第、こちらに申請するのも試してみたいと考えております。

ところで、Crieit さんにも記事投稿 API ができたらクロスポストできるようにしたいな...という個人的願望がありますｗ

参考リンク

DEV (Forem) の仕様上、タグは最大でも 4 つまでしか設定できないため、Zenn で設定したタグの先頭 4 つまで DEV の記事には設定しています ↩︎
当然といえば当然ですが jitterbit/get-changed-files@v1 は workflow_dispatch でワークフローを手動実行した際や、force push 等でファイル差分を正確に特定できない操作には対応しておりませんので、その場合はエラーが発生します ↩︎

素朴な自作言語のコンパイラをTypeScript（Deno）に移植した

2021-03-10T05:00:58+09:00

移植一覧に戻る

TypeScript 入門というか、とりあえず何か書いて慣れようと思って書いてみました。やっつけなので汚いです。TypeScript まだよく分からないけどなんか動いたのでヨシ、というレベルのものです。
（※ 2020-08-15 に書いた記事のクロス投稿です）

https://github.com/sonota88/vm2gol-v2-typescript

移植元

ベースになっているバージョン: tag:45 のあたり

（201-03-06 追記: step 55 の修正まで適用しました。それに伴い、アセンブラ・VM 関連のコードを old_version ディレクトリに移動しました。全部修正すると大変なので）

メモ

YAML/JSON ライブラリへの依存をなくしてみた
- vge コードは YAML ではなく簡単な独自フォーマットにして自力でパースするようにした
- 単に行ごとに読んで文字列か数かを判別できればよい
- vgt コード（JSON）も自力でパースしてみた
Ruby 版で作った出力データがすでにあるので、
それに一致するように未実装部分を潰していくだけ。
ゼロから作っていた Ruby 版のときに比べたら遥かに楽。
今回もなんとなく VM → アセンブラ → コード生成器 → パーサ
の順で作ってしまって、インクリメンタルな作り方を試せばかったな……と作り終わってから思った

📝 Jest で private readonly な値をモックする方法

2021-03-08T01:51:05+09:00

はじめに

Jest でクラスの private readonly な変数を差し替えたい時に若干引っかかったのでメモっておきます。タイトルでは Jest とありますが、本記事の内容は JavaScript でモックする際の有効な手法の 1 つとして利用することが可能です。

Object.defineProperty を利用して値を差し替える

結論から言うと変数を差し替えたい場合は下記のような記述になります。

const mockValue = "";
Object.defineProperty(service, "privateReadOnlyValue", {
  value: mockValue,
});

ちなみに関数を差し替えたい場合は下記のような記述になります。

Object.defineProperty(service, "privateSumFunction", {
  value: jest.fn((a, b) => a + b),
});

各種テストケースで使いまわしているインスタンスの private readonly な変数をモックした場合、値をリストアしたいケースも出てきました。その場合の記述としては、下記が有効でした。

// tmpService 変数に service インスタンスを clone して利用する
const tmpService = Object.create(service);
Object.defineProperty(tmpService, "privateReadOnlyValue", {
  value: "",
});

おわりに

Object.defineProperty と Object.create を駆使すれば大体のケースでは事足りそうです。

参考リンク

Next.jsとVercelとRecoilとMaterial Tableを使ってAWSのステータスダッシュボードを作ってみた話

2021-03-01T01:31:55+09:00

AWSのステータス確認難しいよね

AWSを使ったことのある人ならばわかると思いますが、公式がAWSの障害情報を掲載するAWS Service Health Dashboardがあまり使いやすくないです。

それぞれのリージョンの障害がRSSで配信される形式になっているのですが、わざわざRSSを登録するのもめんどくさいし、Slackとかの連携に乗っけるのもそれはそれで便利なのですが、そもそもSlackを見ていないほかの人でも障害情報を共有したいです。

実は、AWS Service Health Dashboardの情報はJSONで取得することができます。

https://status.aws.amazon.com/data.json

こちらのJSONを活用して勉強がてら使いやすいダッシュボードを作っていきます。

クビになるぞ！

最近、これといった新しい技術に触れておらず、このままだとクビになりそうなので、そろそろ重い腰を上げてNext.jsを勉強することにしました。

また、Next.jsを使う場合はVercelが便利だよーとのことですので、こちらも使っていきます。

Next.js

Next.jsではpages/api配下に格納したコードについては、サーバーサイドとして振る舞います。

クライアントから直接status情報がかかれたJSONを読みとってもよかったのですが、HTMLの面倒なサニタイジング処理やら、値の補完など面倒なことはサーバーサイドに持ってこようということで、
statusJSONを取得して、フロントに返却するサーバーコードを書いていきます。

次のようなコードになりました。

import { NextApiRequest, NextApiResponse } from 'next'
import axios from 'axios'

export interface AwsStatusResp {
  archive: AwsStatusArchive[]
}

export interface AwsStatusArchive {
  service_name: string
  summary: string
  date: string
  status: string
  details: string
  description: string
  service: string
}

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  axios
    .get('https://status.aws.amazon.com/data.json')
    .then((resp) => {
      const handlerResp = resp.data.archive.map((x) => ({
        // eslint-disable-next-line @typescript-eslint/camelcase
        service_name: x.service_name,
        summary: x.summary,
        region: x.service.includes('management-console')
          ? 'global'
          : x.service.split('-').slice(1).join('-') === ''
          ? 'global'
          : x.service.split('-').slice(1).join('-'),
        date: x.date,
        status: x.status,
        details: x.details,
        service: x.service.includes('management-console')
          ? 'management-console'
          : x.service.split('-')[0],
        description: x.description
          .replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '')
          .replace(/ /g, '\n'),
      }))
      res.statusCode = 200
      // eslint-disable-next-line no-console
      console.log(handlerResp)
      res.json(handlerResp)
    })
    .catch((error) => {
      console.error(error.response)
      res.statusCode = error.response.status || 500
      res.statusMessage = error.response.statusText || 'InternalServerError'
      res.json({ error: error.response.statusText || 'InternalServerError' })
    })
}

export default handler

注意点として、必ずハンドラーはexport defaultを指定してあげないこと以外はいたって直感的なコードとなっております。

Vercelに載っけるとわかるのですが、こちらのコード、Lambdaにデプロイされることになります。たしかに見覚えある感じですね。

また、Next.jsと関係ないのですが、axiosのレスポンスに型がつけられるって知ってましたか？

export interface AwsStatusResp {
  archive: AwsStatusArchive[]
}

export interface AwsStatusArchive {
  service_name: string
  summary: string
  date: string
  status: string
  details: string
  description: string
  service: string
}

  axios
    .get('https://status.aws.amazon.com/data.json')
    .then((resp) => { ..........

Material Table

Material UI準拠のテーブルとして、Material Tableなるものがありましたので今回採用することにしました。

import MaterialTable from 'material-table'
import tableIcons from '../components/tableIcons'

 (
                
                  {dayjs
                    .unix(Number(rowData.date))
                    .format('YYYY-MM-DDTHH:mm:ssZ[Z]')}
                
              ),
              defaultSort: 'desc',
              type: 'string',
            },
            {
              title: 'Status',
              field: 'status',
              lookup: statusMapping,
            },
          ]}
          data={aws}
          detailPanel={[
            {
              tooltip: 'Details',
              render: (rowData) => {
                return (
                  <>
                    {rowData.summary}
                    
                      {dayjs
                        .unix(Number(rowData.date))
                        .format('YYYY-MM-DDTHH:mm:ss')}{' '}
                      {rowData.service_name}
                    
                    {rowData.description}
                  
                )
              },
            },
          ]}
          options={{
            filtering: true,
            grouping: true,
            exportButton: true,
            exportFileName: 'exported',
            headerStyle: {
              backgroundColor: '#e77f2f',
              color: '#FFF',
            },
          }}
          isLoading={loading}
          actions={[
            {
              // Issue: https://github.com/mbrn/material-table/issues/51
              //@ts-ignore
              icon: tableIcons.BarChartIcon,
              tooltip: 'Show Bar Chart',
              isFreeAction: true,
              disabled: loading,
              onClick: async () => {
                setShowGraph(!showG)
              },
            },
            {
              // Issue: https://github.com/mbrn/material-table/issues/51
              //@ts-ignore
              icon: tableIcons.Refresh,
              tooltip: 'Refresh Data',
              isFreeAction: true,
              disabled: loading,
              onClick: async () => {
                setLoading(true)
                await getAwsStatus()
              },
            },
          ]}
          title={
            
              
              
                AWS Health Dashboard
              
            
          }
        />

使い方もシンプルかつ比較的高機能でいい感じです。

いい感じですが後述するRecoilとの相性問題とDatetimeの扱いが微妙なのがツラミでした。

本当はDate型を渡してあげるとSearchableの際、カレンダーでの絞り込みができるのかなと思ったのですが、こちらがうまくいきませんでした。

あと、微妙に型もおかしく例えば、actionsはactionを複数指定することができるはずですが、型チェックで怒られるので、仕方なくts-ignoreしてます。

あなたが直せばいいじゃんアゼルバイジャンって言われそうですが、めんどくさくなってしまいIssueだけあげてしまいました。申し訳ねぇ...。

https://github.com/mbrn/material-table/issues/2762

Recoil

RecoilとはReactの新しい状態管理ライブラリで、いわゆるReact HooksでGlobal Storeを作ろうというものです。

基本的な使い方はまず、storeとしてatomという共有ステートを作成します。

atomのkeyはプロジェクトで一意にする必要がありますが、今回はそこまで大規模なプロジェクトではないのでawsとかいうクソ名をつけてます。

storeなので、store/aws.ts として格納します。

import { atom } from 'recoil'

const awsState = atom({
  key: 'aws',
  default: [
    {
      // eslint-disable-next-line @typescript-eslint/camelcase
      service_name: 'Auto Scaling (N. Virginia)',
      summary: '[RESOLVED] Example Error',
      date: '1542849575',
      status: '1',
      details: '',
      description:
        'The issue has been resolved and the service is operating normally.',
      service: 'autoscaling',
      region: 'us-east-1',
    },
  ],
  dangerouslyAllowMutability: true,
})

export default awsState

次にステートを共有したいコンポーネントのルートにRecoilRootを設置します。

Next.jsの場合、_app.tsxが全ページのルートにあたるのでここに置けばいいですね。

import { AppProps } from 'next/app'
import Head from 'next/head'
import { RecoilRoot } from 'recoil'
import React from 'react'

const App = ({ Component, pageProps }: AppProps) => (
  <>
    
      
        
        AWS Health Dashboard
      
      
    
  
)

export default App

そして、利用するときはuseRecoilStateをReact Hooksのように利用するだけです。簡単ですね。

import React, { useState, useEffect } from 'react'
import { useRecoilState } from 'recoil'
import awsState from '../store/aws'
import showGraph from '../store/showGraph'
import axios from 'axios'
import dayjs from 'dayjs'

dayjs.extend(utc)
dayjs.extend(timezone)

const Alert = (props: AlertProps) => {
  return 
}

export const Table = (): JSX.Element => {
  // 20200112: dangerouslyAllowMutabilityでできた
  const [aws, setAws] = useRecoilState(awsState)
  const [showG, setShowGraph] = useRecoilState(showGraph)
  const [loading, setLoading] = useState(true)
  const [slackBarOpen, setSlackBarOpen] = React.useState(false)
  const [apiErrorMsg, setApiErrorMsg] = React.useState('')
  useEffect(() => {
    getAwsStatus()
    setLoading(false)
  }, [])
  const getAwsStatus = () => {
    axios
      .get('/api/aws')
      .then((resp) => {
        setAws(resp.data)
        setLoading(false)
      })
      .catch((error) => {
        console.error(error.response)
        setSlackBarOpen(true)
        setApiErrorMsg(error.response.statusText || 'Error')
        setAws([])
        setLoading(false)
      })
  }

stateの読み込みはgetterから、書き込みはsetterから行います。

React Hooksに慣れていれば簡単ですね。

思わぬ落とし穴 Material TablesでRecoilが使えない

Recoilのatomは基本値の書き換えはset stateを使うことが求められます。ですが、material tablesはテーブルを作るときにdataにIDの書き込みが発生するようでそのままだと怒られてしまいます。

Cannot add property tableData, object is not extensible

これの解決策はRecoilにstateへの直接的な書き換えを許可することです。こちらはatomのoptionでdangerouslyAllowMutabilityを有効にすることで解決できます。

import { atom } from 'recoil'

const awsState = atom({
  key: 'aws',
  default: [
    {

    },
  ],
  dangerouslyAllowMutability: true,
})

これがわかるのに半日くらい使っちまいました。

Chart.js

さて、無事にRecoilでstateの共有ができたのでせっかくなので別コンポーネントも作ります。

意味があるかどうか不明ですが、AWSの障害発生状況を可視化してみようと思います。

ということで、採用したのがChart.js。

次のようにデータを渡すだけできれいめなグラフを書いてくれます。

import { useRecoilValue } from 'recoil'
import awsState from '../store/aws'
import React from 'react'
import {
  regionNameMapping,
} from './const'
import BarGraph from './barGraph'

export const AlertPerRegion = (): JSX.Element => {

  const aws = useRecoilValue(awsState)
  const labels = Array.from(
    new Set(aws.map((data) => regionNameMapping[data.region]))
  )
  const data = []
  for (const r of labels) {
    data.push(
      aws
        .map((data) => regionNameMapping[data.region])
        .reduce((total, x) => {
          return x === r ? total + 1 : total
        }, 0)
    )
  }
  return (
    
      
    
  )
}

どうでもいい実装ですが、各グラフを一覧で見れる画面を用意し、実際のグラフは遷移先で表示するようにしてます。

Vercelにデプロイ

さて、実装ができたので後はVercelにあげるだけです。

もうここはほとんど書くことがないのですが、Next.jsで作ったアプリケーションはVercelでレポジトリと使っているフレームワークを設定するだけで簡単にデプロイ出来てしまいます。

これはすごい。

完成

ということで、AWS Health Dashboardが完成しました。

アクセスすると、Next.jsのapiをコールし、AWSのstatusを取得加工したものを返却します。

フロントでは受け取ったデータをRecoilのatomに格納しつつ、material tableで表として描画します。

また右上のグラフボタンを押すことで色々な切り口の可視化を行うことができます。

https://aws-health-dashboard.vercel.app/

できれば使う場面にならないことを祈りつつ、ご活用いただければとおもいます。

まとめ

食わず嫌いでやらなかったNext.js+Recoilをやってみましたが、楽しく実装ができました。

2021/02/20追記

2021/02/19～20にかけて起きたAWS EC2障害ですが、本ダッシュボードでは更新がされませんでした。

どうやら、data.jsonはRSSとは違い、同期的に更新されないようです。

大変ご迷惑をおかけしました。改めて、改修しRSS更新にも対応できるように頑張ります。

Hugo で React + TypeScript を利用してサクッとウェブサイトに RSS リーダーを追加する

2020-12-22T16:15:41+09:00

この記事は Static Site Generator Advent Calendar 2020 22日目の記事です。

はじめに

Hugo のウェブサイトに組み込む RSS リーダーを TypeScript で開発してみたいと思い調査したところ、Hugo の最新版には ESBuild が組み込まれていて、非常に手厚く JavaScript の開発環境がサポートされていることが分かりました。 本記事では紹介していませんが Babel も利用できるようです。

また、NPM パッケージも利用できるため、普段のウェブ開発と同様の流れで開発ができ、各種ライブラリを用いた開発も非常に楽でした。
今回は Hugo で JavaScript 開発する方法を RSS リーダーの開発を例に上げ、そこで得た知見についても交える形で記事として残しておくことにしました。

ちなみに本記事内容は Hugo で JavaScript 開発する方法に焦点を絞ったものなのですが、ウェブサイトに RSS リーダーを組み込むことに焦点を絞って見たい方は RSS リーダーを Hugo の Data Templates で実装する から見ていただくことをオススメします。

Hugo で JavaScript (React + TypeScript) の開発環境を整える

まず、TypeScript のビルドは ESBuild に任せることができるため何も行う必要はありません。 そのため React 開発用パッケージのインストールのみ行えば大丈夫です。

Hugo プロジェクトのルートディレクトリで下記コマンドを実行し、package.json を作成してから、React の開発に必要なパッケージをインストールします。

npm init -y
npm install --save react react-dom

無事パッケージのインストールが完了したら、早速 TSX ファイルを assets/js/App.tsx に作成してしまいます。

// assets/js/App.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (
        <>
        Hello React!
        
    );
}

ReactDOM.render(
    ,
    document.getElementById("react")
);

上記のコードを見てもらえば分かる通り、レンダリング先に id が react の DOM ノードを指定しています。そのため Hugo 側で該当する DOM ノードを用意する必要があります。その際の HTML テンプレートは下記になります。




{{ with resources.Get "js/App.tsx" }}





{{ $options := dict "targetPath" "js/app.js" "minify" true "defines" (dict "process.env.NODE_ENV" "\"development\"") }}


{{ $js := resources.Get . | js.Build $options }}


{{ $secureJS := $js | resources.Fingerprint "sha512" }}


{{ end }}

ちなみに $options で指定している ESBuild でビルド時に指定可能なオプションは Hugo の公式ページに記載されています。

上記 HTML の記述を RSS リーダーを埋め込みたいページに追加します。
この状態で該当ページにアクセスすると下記のような表示が確認できるはずです。

App.tsx で定義した内容が画面に表示される

これで React + TypeScript の開発環境が整いました。

RSS リーダーを実装する

あとは一般的な Web フロントエンド開発の流れで RSS リーダーの開発を進めていくだけです。

ウェブサイトで読み込みたい RSS フィードを準備する

RSS フィードを利用する際は必ず提供しているサービスの利用規約をご確認ください。
Qiita 及び Zenn については個人利用かつ自分の情報のみを扱う範囲内であれば利用が許可されているように見受けられました。

下準備としてウェブサイトで読み込みたい RSS フィードを事前にダウンロードするためのバッチを作成します。バッチは NPM を利用して作成していきます。NPM を導入したので Hugo で利用する簡易なバッチは JavaScript でサクッと作成していきます。

まずはスクリプト作成の際に必要となるパッケージを事前にいくつかインストールします。

# html をテキスト変換にするパッケージと RSS フィードのパーサーをインストールする
npm i -D --save html-to-text rss-parser

実際のコードは下記になります。ファイル名末尾が .mjs なのは Top-Level Await を使用したいからです。

// scripts/update-rss.mjs
import { writeFileSync } from 'fs';

import pkg from 'html-to-text';
const { htmlToText } = pkg;

import Parser from 'rss-parser';
const parser = new Parser();

// 自ブログで読み込みたい RSS フィードの情報を設定する
const rssFeed = {
    Zenn: {
        rss_url: 'https://zenn.dev/nikaera/feed',
        profile_url: 'https://zenn.dev/nikaera',
    },
    Qiita: {
        rss_url: 'https://qiita.com/nikaera/feed.atom',
        profile_url: 'https://qiita.com/nikaera',
    }
}

try {
    const jsonFeed = {}

    // RSS フィード内の description を 73字で切り取り末尾に ... を付与する関数
    const spliceContent = (content) => `${htmlToText(content).slice(0, 73)}...`

    // rssFeed 変数で定義されてる情報を繰り返し処理する
    for (const [site, info] of Object.entries(rssFeed)) {

        // RSS フィードの URL から必要な情報を取得する
        const feed = await parser.parseURL(info.rss_url);

        // RSS フィードに登録されている項目で必要な情報のみを取得する
        const items = feed.items.map((i) => {
            return {
                title: i.title,
                content: spliceContent(i.content),
                url: i.link,
                date: i.pubDate
            }
        })

        // 取得内容は jsonFeed に格納する
        const { rss_url, profile_url } = info
        jsonFeed[site] = { rss_url, profile_url, items };
    }

    // 最後に jsonFeed に格納された内容を JSON 文字列として static/rss.json に出力する
    writeFileSync('./static/rss.json', JSON.stringify(jsonFeed));
} catch(err) {
    console.error(err);
}

次に package.json の scripts に登録してコマンドとして実行可能にします。

{
    "scripts": {
        "update-rss": "node ./scripts/update-rss.mjs"
    }
}

これで npm run update-rss を実行すれば自ブログで表示する際に用いる JSON ファイルとして RSS フィードの内容を static/rss.json に出力できます。また、JSON ファイルは static フォルダに出力しているため http://localhost:1313/rss.json でアクセスできます。

npm run update-rss を実行して出力した rss.json

http://localhost:1313/rss.json にアクセスして出力した rss.json が参照可能なことを確認する

RSS リーダーを React + TypeScript で実装する

準備が整ったので、早速 RSS リーダーを作成していきます。

下記は Hugo のテーマの 1つである hugo-PaperMod の archives テンプレートを利用してページに埋め込むことを想定した RSS リーダーのコードです。

// assets/js/Rss.tsx
import React, { useMemo, useState } from 'react'

import * as superagent from 'superagent';

const Rss = (props) => {
    const [feed, setFeed] = useState({});
    const { name } = props;

    useMemo(() => {
        (async () => {
            try {
                const res = await superagent.get('/rss.json');
                setFeed(res.body[name]);
            } catch (err) {
                console.error(err);
            }
        })()
    }, [name]);

    if (!("items" in feed)) return null

    return (
        
            
                {name} - RSS
            
            
                {feed.items.map((item) => {
                    return 
                        {item.title}
                        {item.date} - {item.content}
                         
                    
                })}
            
        
    )
}

export default Rss

次に assets/js/App.tsx で assets/js/Rss.tsx を読み込み画面に表示できるよう改修します。

// assets/js/App.tsx
import Rss from './Rss';

import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (
        <>
            
                
                    Tech 🦾
                
                
                
            
        
    );
}

ReactDOM.render(
    ,
    document.getElementById("react")
);

これで RSS リーダーを埋め込んだページを閲覧すると下記のような画面が表示されるはずです。

hugo-PaperMod で archives テンプレートを用いて RSS リーダーを表示したときの画面

もし他の RSS フィードを追加したい場合は scripts/update-rss.mjs の rssFeed 変数に情報を追加して、App.tsx にを定義することで対応できます。

RSS フィードの内容を自動で更新する

npm run update-rss を手元で実行して static/rss.json を更新して公開すれば、最新の RSS フィードの内容をページに反映できる状態ですが、都度手動で更新するのは面倒な作業です。

そこで今回は GitHub Actions の schedule を用いて static/rss.json の更新を自動化します。

GitHub Actions のワークフローファイルを作成する

実際のワークフローファイルは下記になります。schedule の項目で設定している内容がワークフローの実行スケジュールになります。今回は半日毎に更新が走るようにしました。

# .github/workflows/update-rss.yml
name: update rss json file

on:
  push:
    branches:
      - main  # Set a branch name to trigger deployment
  schedule:
    - cron: '0 */12 * * *' # 今回は半日に 1回のタイミングで更新するようにした

jobs:
  build:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          ref: main
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Use Node.js 14.10.1
        uses: actions/setup-node@v1
        with:
          node-version: 14.10.1

      - name: Install dependencies
        run: npm install

      - name: Update RSS Feeds
        run: npm run update-rss

      - name: Commit files
        run: |
          git config --local user.email "[email protected]"
          git config --local user.name "GitHub Action"
          git add static/rss.json
          STATUS=$(git status -s)
          if [ -n "$STATUS" ]; then
            git commit -m "Update rss.json `date +'%Y-%m-%d %H:%M:%S'`" -a
            git push origin main
          fi

上記ワークフローファイルをプロジェクトに追加して、リモートリポジトリにプッシュした後は、ワークフローが実行されるタイミングを待ちます。

無事にワークフローの実行が完了すると下記のようなコミットが追加されているはずです。

GitHub Actions が JSON ファイルを更新してコミットしている

コミットの詳細を見ると正常に JSON ファイルが更新されていることが確認できる

コミット後 Hugo をビルド & デプロイするとページが更新されていることを確認できる

これで Zenn や Qiita 等に記事を書いた際に、都度手動で static/rss.json を更新してページに最新の内容を反映させる作業は必要なくなりました。

(余談) RSS リーダーを Hugo の Data Templates で実装する

ちなみに Hugo には Data Templates という仕組みがあり、これを用いることで実は JavaScript を利用しなくても HTML テンプレートで RSS リーダーを実現できるということを後から知りました。

そこで最後に Data Template での RSS リーダーの実装方法について記載します。

まずは、scripts/update-rss.mjs の内容を書き換えます。

// scripts/update-rss.mjs
import { writeFileSync } from 'fs';

import pkg from 'html-to-text';
const { htmlToText } = pkg;

import Parser from 'rss-parser';
const parser = new Parser();

const rssFeed = {
    Zenn: {
        rss_url: 'https://zenn.dev/nikaera/feed',
        profile_url: 'https://zenn.dev/nikaera'
    },
    Qiita: {
        rss_url: 'https://qiita.com/nikaera/feed.atom',
        profile_url: 'https://qiita.com/nikaera'
    }
}

try {
    const jsonFeed = {}

    const spliceContent = (content) => `${htmlToText(content).slice(0, 73)}...`
    for (const [site, info] of Object.entries(rssFeed)) {
        const feed = await parser.parseURL(info.rss_url);
        const items = feed.items.map((i) => {
            console.log(i);
            return {
                title: i.title,
                content: spliceContent(i.content),
                url: i.link,
                date: i.pubDate
            }
        })
        const { rss_url, profile_url } = info
        jsonFeed[site] = { rss_url, profile_url, items };

        /*
        最終的な JSON ファイルの出力先は data フォルダとなり、RSS フィード毎に出力する
        例: ./data/Qiita.json, ./data/Zenn.json, etc.
        */
        writeFileSync(`./data/${site}.json`, JSON.stringify(jsonFeed[site]));
    }
} catch(err) {
    console.error(err);
}

上記を実行することで data/Qiita.json や data/Zenn.json にファイルが出力されます。

Hugo の Data Template を用いると data フォルダ内に配置した json, yaml, toml 形式のファイルは Go の HTML テンプレートで読み込めるようになります。

例えば、data/Qiita.json に配置された JSON ファイルを読み込みたい場合は Go のテンプレートで $Qiita := $.Site.Data.Qiita のような記述でできます。

次に RSS リーダーを埋め込んでいたページを下記のように書き換えます。







    
        Tech 🦾
    
    
        
        {{ $Zenn := $.Site.Data.Zenn }}
        
            Zenn - RSS
        
        
        
            {{- range $Zenn.items }}
            
                {{ .title }}
                {{ .date }} - {{ .content }}
                
            
            {{- end }}
        
    
    
        
        {{ $Qiita := $.Site.Data.Qiita }}
        
            Qiita - RSS
        
        
        
            {{- range $Qiita.items }}
            
                {{ .title }}
                {{ .date }} - {{ .content }}
                
            
            {{- end }}

また GitHub Actions のワークフローを用いて RSS フィードの情報を更新していた場合は、.github/workflows/update-rss.yml ファイルの更新も必要になります。

# .github/workflows/update-rss.yml
name: update rss json file

on:
  push:
    branches:
      - main  # Set a branch name to trigger deployment
  schedule:
    - cron: '0 */12 * * *'

jobs:
  build:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          ref: main
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Use Node.js 14.10.1
        uses: actions/setup-node@v1
        with:
          node-version: 14.10.1

      - name: Install dependencies
        run: npm install

      - name: Update RSS Feeds
        run: npm run update-rss

        # Git で追加する内容を data フォルダに変更する
        # git add static/rss.json -> git add data/
      - name: Commit files
        run: |
          git config --local user.email "[email protected]"
          git config --local user.name "GitHub Action"
          git add data/
          STATUS=$(git status -s)
          if [ -n "$STATUS" ]; then
            git commit -m "Update data folder `date +'%Y-%m-%d %H:%M:%S'`" -a
            git push origin main
          fi

これで JavaScript で作成した RSS リーダーから、Hugo の Data Templates を用いて作成した RSS リーダーへ移行できました。

おわりに

Hugo で React + TypeScript 開発を楽にできそうなことが分かり、テンションが上がってしまい、そのままのノリで実際に RSS リーダーを自ブログ向けに作成してみました。

しかし、本記事内容で RSS リーダーを実装するのであれば、Hugo の Data Templates を利用することがベストなことに後から気づきました。ただ Hugo での JavaScript を用いた開発手法が理解でき勉強になったので結果ヨシとしました。

Hugo での JavaScript 開発環境は相当充実していることが分かったので、また何かアイデアを思いついたら気軽に作って自ブログに取り込んでいきます。今はザックリ WebGL/WebVR とかで何か面白いもの作れそうだなと考えています。

参考リンク

TypeScriptのanyとunknown、object使い分け

2020-10-25T17:10:29+09:00

any型：なんでも良い場合
unknown型：型が特定できない場合
object型：オブジェクトであることが重要で中身は問わない場合

JavascriptでPDFを作成するライブラリまとめと比較

2020-09-25T02:54:21+09:00

はじめまして。
PDFの作成サービスを個人で運用しており、数万ページのPDFを作成しており、JavascriptでのPDFの作成ライブラリを作ったりでそれなりに詳しくなってきたのでこの記事を作成しました。笑

Javascriptで扱えるPDFのライブラリーはいくつかあります。しかし、実際どれを使えばいいのかわかりにくいので、それらを比較しながら紹介していきます。

UMDモジュールとして提供されていて、近年のフロントエンド(TypeScript/Webpack/React/etc.)で扱いやすい？Nodeとブラウザーで動く？型はあるか？日本語フォントは使えるのか？という観点でも比較していきます。

この記事ではJavascriptで扱えるPDF作成ライブラリーで「どれを採用するか」ということで悩んでいる時に、用途に合ったライブラリを発見することができるようにします。

PDFKit

公式サイト:https://pdfkit.org/

PDFKitはJavascriptでPDFを作成するライブラリの元祖的存在。 フォントの埋め込みや画像の埋め込みもできます。開発が2012年から行われており古いですが、今でもメンテナンスが行われております。多少複雑ですがNodeだけでなく、 Webpackを利用してブラウザで動かすことも可能です。

下記に紹介するライブラリでもPDFKitのラッパーとして作成されたものや、プログラムを参考にしているものもあり、フォントの埋め込みも含めてJavascriptでPDF作成を行うというパワープレーを最初に成し遂げたライブラリと言うだけあってすごいライブラリです。

よくない点をあげるなら、高レベルのAPIを提供していないで操作に慣れるまでに一定の学習が必要です。最初はデザインがしづらく、記述が複雑になりがちです。

ポイント	評価
Nodeとブラウザーで動く	△(若干手間)
型はあるか	○(DefinitelyTyped)
日本語フォントは使えるのか	○(ブラウザで使う場合は要注意)
使いやすさ	△プログラムの手続きが複雑

pdfmake

公式サイト:http://pdfmake.org/

上記で紹介したPDFKitのラッパーとして作成されたのがpdfmakeです。 PDFKitとの違いはPDFKitが命令的なプログラミング操作のAPIを提供しているのに対して、pdfmakeは宣言的でレイアウトによる計算をpdfmakeが行ってくれるためプログラムが比較的少なくなります。

PDFKitの改良版としてGithubでのスター数はpdfmakeの方が多く、Web上でも様々な使い方や例があり、人気のライブラリということがわかります。また、画像の埋め込みはもちろん、QRコード,SVGのレンダリングなどの機能もあります。

実際にPDFkitと比較した時にその使いやすさから本サービスのlabelmake.jpも当初はpdfmakeを利用してPDFファイルを作成しておりました。

しかし、

独自フォントの作成し、利用する時にWebpack利用時にハマりどころがある
独自フォントはbase64エンコードされたttfが利用できるが日本語フォントの場合に巨大になり、メモリを大量に消費する

と言う点がネックになり、途中で後で紹介するpdf-libというものに切り替えています。

Web上には様々な例があるため、トライアンドエラーを繰り返しながらなんとかなるとは思いますが、Webpackやtypescriptを使った最新のフロントエンドではハマりどころが多く、その手の記事が無かったりするので注意が必要です。また、日本語フォントを利用する際は一度gitのrepositoryをクローンしてからフォント作成スクリプトを使ってビルドする必要があります。

ポイント	評価
Nodeとブラウザーで動く	△(Webpackなどを利用している場合はハマる)
型はあるか	○(DefinitelyTyped)
日本語フォントは使えるのか	△(自前でビルドが必要)
使いやすさ	○(宣言的でpdfmakeのレイアウトエンジンが利用可能)

jsPDF

公式サイト:https://github.com/MrRio/jsPDF

jsPDFは上記のPDFKitとは別に独自にPDF作成ができるライブラリです。この記事で紹介するライブラリの中で一番スター数が多く、比較的安定してメンテナンスされています。

node,ブラウザーで利用できるUMDモジュールも提供されています。(nodeで保存する場合はカレントディレクトリに保存されるので使い勝手悪いかもです)

命令的な操作ができるAPIが提供されており、複雑な帳票をプログラムする場合は難易度が高い印象です。

また、日本語を扱う場合は日本語のフォントを読み込ませる必要がありますが、ここにハマりどころがあるようです。
詳細は下記の記事にまとまっています

上記を参考にしていただければわかりますが、日本語フォントを扱うための方法はありますが、一手間必要になります。(ttfファイルの変換が必要)

できることは多いのですが、上記で説明したように操作が命令的でなため、使いこなすには一定のインプットが必要になります。(幸いにもリッチなドキュメントがあります https://rawgit.com/MrRio/jsPDF/master/docs/index.html)
また、英語の記事も多く人気なのは間違いないと思います。

ドキュメントを参考にして自分の用途に合った操作ができる場合はおすすめできます。(ドキュメントみた感じだとAcroFormとかできちゃいます。ヤバイな)

ポイント	評価
Nodeとブラウザーで動く	○(参考)
型はあるか	○
日本語フォントは使えるのか	○(ttfファイルの変換が必要)
使いやすさ	△プログラムの手続きが複雑

pdf-lib

公式サイト:https://pdf-lib.js.org/

pdf-libはPDFKitを参考にTypescriptで実装されたPDFの作成、編集ライブラリです。他のライブラリに比べて後発でリリースされたライブラリですが、非常によくできており、もちろんnode,ブラウザで動作します。また、PDFの結合、分割や埋め込みをサポートし、他のライブラリにない機能を持っていますが、ライブラリとしてシンプルで強力です。

他のライブラリと比較して大きく違う点がフォントファイルを埋め込む際にUint8Array,ArrayBufferが使用できるので、nodeの場合はfsで、ブラウザの場合はxhrを使ってフォントファイルを読み込むことができます。日本語の馬鹿でかいbase64のファイルを読み込む必要がなくなり、パフォーマンス的にも優れています。

もちろん、Webpackなどで利用でき、ドキュメントも充実しています。本サービスのlabelmake.jpも当初はpdfmakeを利用していましたが、途中からパフォーマンスの観点でPDF作成処理をpdf-libに行わせるよう変更しました。

欠点としては提供されているAPIが命令的なため複雑な帳票の場合、プログラムが複雑になってしまうという点と考えています。またレイアウトについてはpdf-libは責務を持たず、ユーザーに計算させるという方針ですので、中央揃えや右揃えなどのレイアウトはできません。あと地味ですが、位置情報の単位がptなので、位置を指定する時に若干面倒です。

個人的には後に紹介するlabelmakeを除くライブラリに比べて一番扱いやすく、パフォーマンスの観点でも優秀だと考えています。

まだ日本語での記事数はpdfmake,jsPDFと比べると少ないのですが、帳票が比較的シンプルでモダンな環境での開発の場合は参考にしてみてください。おすすめです。

ポイント	評価
Nodeとブラウザーで動く	○
型はあるか	○
日本語フォントは使えるのか	○
使いやすさ	△プログラムの手続きが複雑+レイアウトの計算は自分で行う必要がある

labelmake

公式サイト:https://labelmake.jp/javascript-pdf-generator-library

labelmakeはpdf-libのラッパーとして筆者が開発しました。特徴としてはpdf-libを使っている人はレイアウトは自分で計算する必要がありましたが、位置情報の単位をmmにし、alignment,line-heightなどのレイアウトの計算を行い、宣言的にデータでPDFを作成できるようにAPIをデザインしました。また既存のPDFをベースとして読み込んでそこに入力項目を足すことができます。

コードの例はこちらからご覧になれます。
スキーマがあるので、テンプレート的に帳票生成などに利用ができます。

帳票のデザインデータをJSONで管理できる点も複数のテンプレートを利用する際には読み込みがシンプルになり利用しやすいです。

pdf-libのメリットのフォントのデータでUint8Array,ArrayBufferが使用できる点や、PDFファイルの埋め込みができる点を利用して効率的に複雑な帳票が作成できるようにしています。

また、こちらのTemplate Design & Code Generatorを使い、帳票のデザインと、実行可能コードの生成を行うことができます。

ポジショントークにならないようにしたいと思いますが、既存のPDFファイルに対して入力項目を設定する形で帳票が作成でき、実際に本サービスでは現時点で様々なテンプレートをつかってPDFを作成しています。

デメリットとしてはまだ利用者も少なく、有名なライブラリではありません。
日本語フォントで利用していますが、他にも自分のサービスだけでは見つけられなかったバグがあるかもしれません。

そして、自由に0から帳票すると言うよりは既存のPDFをもとに入力項目を設置するという使い方がハマります。(俗に言うバリアブル印刷というやつです)
他のJavascriptのPDF作成ライブラリと比較しても、用途が合っている場合は、我ながらよくできていると思っていますので、ぜひスターやシェアをしていただけると嬉しいです笑

ポイント	評価
Nodeとブラウザーで動く	○
型はあるか	○
日本語フォントは使えるのか	○
使いやすさ	○

番外編

PDF.js

公式サイト:https://mozilla.github.io/pdf.js/

よく間違えられるのですが、非常に有名なライブラリなので紹介します。
PDF.jsはPDFのレンダリングライブラリで、PDFの作成ライブラリではありません。
PDFを表示するだけでなく、PDFのレンダリング結果をcanvasに転写し、PDFのレンダリング画像を取得することができます。

Webpack用のビルドもバンドルされており、最近のフロントエンドの環境でも利用可能です。

Puppeteer

公式サイト:https://github.com/puppeteer/puppeteer

GoogleのPuppeteerでもPDFファイルの作成が可能です。
テンプレートはhtmlとして管理する必要がありますが、Webの開発者なら装飾も行いやすいかと思います。

実装は下記の記事が参考になります。
- Generate a PDF from HTML with puppeteer

- Headless Chrome + puppeteerを使ったHTML→PDF変換サーバーを作る puppeteer編

バックエンドの実装が必要になるのと、PDF作成するまでにPuppeteerが起動するオーバーヘッドがありますが、それらが問題ない場合で、htmlでデザインしたいと言う場合には選択肢になるかもしれません。(可変のテーブルなどはデザインしやすいかと思います。)

まとめ

番外編を除く下記の5つのライブラリを紹介させていただきました。

PDFKit
pdfmake
jsPDF
pdf-lib
labelmake

参考になったでしょうか？
筆者はpdf-lib押しです。パフォーマンスも良く、レイアウトの計算が面倒ですがモダンなフロントエンド環境でも使いやすいです。

あとは、遊びでも構わないのでlabelmakeを触っていただけると嬉しいです！

Webページはこちらからご覧いただけます！

それでは！

【1週間】Web ゲームを爆速で開発するために実践したこと🐧個人開発向け

2020-06-23T09:37:52+09:00

(内心)
作ったゲームを沢山の人に触ってもらってリアクションが欲しいなぁ～
そうだ、記事投稿して宣伝しよう！

といった下心で書いた記事です。すみませんでした遊んでください😆

Web Game 処女作🎉シンプルでストレス発散になるゲームが爆誕！敵さんを吹っ飛ばして 1,000 G 以上を目指してみてね😆https://t.co/h8w574aGGQ★アドバイス急募★『こうしたらもっと面白くなる』など、ご意見ご感想を頂けると嬉しいっす(〃´∪｀〃)ゞ#今日の積み上げ #100DaysOfCode DAY 21 pic.twitter.com/HJvFj87zTf
— hikaru🐧#100DaysOfCode! (@hikaru_firecamp) June 17, 2020

ペンギンがサメさんを倒すゲーム
敵さんを吹っ飛ばして 1,000 G 以上を目指してみてね😆
https://games.westa.io/

0⃣ 結論 / 爆速で開発するために実践したこと

１週間のカウントダウンタイマーを設置する
適当な企画書を作って全体を把握しならが作業する
新しいことは１個までに制限して知っているものを使う
こだわりたい部分を絞り他を捨てる覚悟を持つ

1️⃣ この記事の対象読者

この記事では１週間で Web ゲームを作る為に何を考え何をしたのかを書きました。
以下に当てはまる人達に参考になれば嬉しいです。

好きなことへのこだわりが強くいつまでも作品が完成しない人
いつもダラダラ期限を伸ばしてしまう人
このゲームがどんなライブラリ使っているか知りたい人
奇特な人

2️⃣ なぜ１週間なの？

個人開発の一番の敵っていかにモチベーションを保つかだと思いませんか？

私の場合１ヶ月もたてば他に興味あることが出てきてしまうのでモチベーションが移ってしまいます。
でも、１週間なら全力で頑張れるちょうどよい長さかな～と考えました。

(それと、１週間ならクオリティ低くても言い訳になるかなと)

3⃣ １週間という短い期間で終わらせるために意識したこと

(1) １週間のカウントダウンタイマーを設置する

いつもズルズル伸ばしてしまう癖があるので Twitter で公開日を宣言しました。
そして公開日までのカウントダウンタイマーを常に目に入る位置に設置しておきました。

次に出す Web アプリのリリース日を 6/17 12:00 頃に決めました🎉メリハリ付けるために中途半端でもこのタイミングで出します写真はちょうどいいカウントダウンタイマーが無かったので作ってみました▪コードはこちらhttps://t.co/HiGjiROP4R(8,9行目を編集すれば自分用に使えるよ！) pic.twitter.com/HnjXxktDLb
— hikaru🐧#100DaysOfCode! (@hikaru_firecamp) June 8, 2020

このカウントダウンタイマー、すっごく効果があったように思います。度々目に入るので程よい緊張感と無機質な圧力をくれます。
さらにシレっと周囲の人たちに公開日を宣言できるのでかなりお勧めです。

⚠ 補足 ⚠
さも予定を守ったように言ってますが結局半日ほど遅く公開してしまいました
ほんとすみませんでした 😗

(2) 適当な企画書を作って全体を把握しならが作業する

企画書などが無い状態でコーディングすると目に付いた場所から手を付けてしまいがちで視野が局所的になりやすく作業の優先度決めが難しくなります。

簡単なものでも全体像を把握できるものがあると、次にどの部分を実装するか考えるときに『最低でもここを実装しないとだから優先度高めで』みたいなスケジュール管理が容易になります。

今回は以下の様な簡易仕様書をあらかじめ書いておりました。

これから作るミニゲームの簡易仕様書！よくあるクリックゲームですが、ちゃんと作りきれるか不安😇１週間がんばります〜(あ、奇しくも一人 web1week みたいになってる)全然関係ないけど最近 iPad でお絵描きの練習始めました！スマブラやったことあればピンとくるはず😎 pic.twitter.com/oVo5xAUeBe
— hikaru🐧#100DaysOfCode! (@hikaru_firecamp) June 9, 2020

これのおかげで実装段階での仕様変更が減り、一直線にゴールに向かって実装できるので結構大切なものだと思います。

(3) 新しいことは１個までに制限して知っているものを使う

初めて使う道具が多いと勉強することが増えたり些細なことにはまったりして時間を消費しがちなので、使い慣れた開発環境と使った事のあるライブラリを中心に選定しました。

使い慣れたもの

VS-Code ... 開発環境
TypeScript ... 開発言語
UIKit ... UI コンポーネント

以前から実験レベルで遊んでいたもの

Three.js ... 3D 描画エンジン
Cannon.js ... 3D 物理エンジン

初めて使うもの

Audio API ... BGM や効果音の再生

今回は遊べる Web ゲームを短期間で作ることが目的だったので冒険をしない制約を設けましたが、完成度が低くても未知なる技術を沢山学びたいならどんどん新しい技術を使ってみたらよいと思います。

目的次第でやり方を臨機応変にすることが大事なのかなと😎

(4) こだわりたい部分を絞り他を捨てる覚悟を持つ

こだわりが強いと味のあるイイものができるけど、その代わり完成が遅くなる傾向にあると思います。

今回は『ローポリキャラ達が物理演算で予想外の挙動をする』部分だけこだわりましたが、操作 UI の見た目などはブラウザ標準のプログレスバーを使っていたりと大部分はかなり適当です。

個人的にはゲームの中にブラウザの DOM を混ぜることに違和感とアレルギーを感じるのですが『こだわる部分を絞って他は適当』と大胆に割り切っちゃいました。

他にも、ペンギン/サメ/コイン/木の当たり判定はすべて立方体(正六面体)で手抜きをしましたが、これは予想に反して『サメさんやコインが地面に刺さってる』ように見えたり『木々があらぶってる』感じになったりヘンテコな世界観の演出に一役買ったように思います。

4⃣ おまけ: 実装 Tips

唐突なおまけの実装 Tips です。

(1) Cannon.js / サメさんの Z 位置(奥行)を固定

Cannon.js は 3 次元物理演算なので XYZ 軸分の動きがあるのですが、サメさん(敵)に関しては奥行方向に動かれると攻撃を当てられなくなるので Z 軸を固定しています。

// CannonJs: サメさんの物理演算用の剛体を生成
const sharkBody = new CANNON.Body({ ＜省略＞ });

// ThreeJs: アニメーションループを開始
renderer.setAnimationLoop(() => {
    // CannonJs: 1フレーム分の物理演算を実行
    world.step(＜省略＞);

    // ★★ サメさんのZ位置を固定する ★★
    sharkBody.position.set(
        sharkBody.position.x,
        sharkBody.position.y,
        0); // Z軸を0に変更
});

(2) Cannon.js / 摩擦設定・反発設定

初期値だとほとんど滑ることは無く、滑らせた方が面白そうだったので摩擦と反発の設定をいじっています。

モデルごとに摩擦係数や反発係数を設定できれば直感的だったのですが、Cannon.js では『モデル１とモデル２に対しての摩擦・反発を設定』といった具合に設定が必要でした。

// 
// 物理演算ワールドを初期化
// 

const world = new CANNON.World();
world.gravity.set(0, -9.82, 0); // m/s²

const floorBodyMaterial = new CANNON.Material(`FloorModel`);
const penguinBodyMaterial = new CANNON.Material(`PenguinModel`);
const sharkBodyMaterial = new CANNON.Material(`SharkModel`);

// 摩擦反発設定: 床とペンギン
world.addContactMaterial(new CANNON.ContactMaterial(
    floorBodyMaterial,
    penguinBodyMaterial,
    {
        friction: 0.01, // 摩擦設定 (ペンギンが床を滑るように)
        restitution: 0.8, // 反発設定
    }
));

// 摩擦反発設定: 床とサメ
world.addContactMaterial(new CANNON.ContactMaterial(
    floorBodyMaterial,
    sharkBodyMaterial,
    {
        friction: 0.05, // 摩擦設定
        restitution: 0.3, // 反発設定
        contactEquationStiffness: 1e8,
        contactEquationRelaxation: 3,
    }
));

// 摩擦反発設定: ペンギンとサメ
world.addContactMaterial(new CANNON.ContactMaterial(
    penguinBodyMaterial,
    sharkBodyMaterial,
    {
        friction: 0.01, // 摩擦設定
        restitution: 2.0, // 反発設定 (攻撃を受けたサメが吹っ飛びやすいように)
    }
));

(3) Three.js / 同じモデルは使いまわして効率化

今回ゲーム内では同じモデルが大量に出現します。その際に毎回モデルをロードしていると実行効率が悪いので、モデル管理クラスが必要になります。

こういった目的の管理クラス系にはシングルトン実装が最適かと思いますが、TypeScript では module を使うと簡単にシングルトン実装が可能です。

/** モデル名の型定義 */
export type ModelName = `PENGUIN` | `SHARK` | `TREE` | `COIN`;

/** 
 * ゲーム内のモデルを管理するモジュール
 *　 シングルトン実装
 * 　モデルをあらかじめロードして、ロード済みのモデルを使いまわすことで効率化
 */
export module ModelManager {
    /** ロード済みのモデルを保持 */
    const modelMap = new Map();

    /** 各種モデルをロードする */
    export async function load() {
        await loadModel(`PENGUIN`, `models/PenguinJumping.glb`);
        await loadModel(`SHARK`, `models/Shark.glb`);
        await loadModel(`TREE`, `models/Tree.glb`);
        await loadModel(`COIN`, `models/Coin.glb`);
    }

    /** モデルを複製して取得する */
    export function getModel(modelName: ModelName) {
        return modelMap.get(modelName)!.clone();
    }

    /** ロード済みモデルを開放する */
    export function dispose() {
        // ThreeJs: ロードしたモデルをすべて解放
        modelMap.forEach((obj3D, key) => {
            GameUtils.disposeObject3D(obj3D);
        });
    }

    async function loadModel(modelName: ModelName, path: string) {
        // ThreeJs: モデル読み込み
        const obj3D = await GameUtils.loadGltfModel(path);

        // リストに追加
        modelMap.set(modelName, obj3D);
    }
}

使い方

// あらかじめすべてのモデルをロードする
await ModelManager.load();

// ペンギンモデルを取得する (内部的にはロード済みのモデルを複製しているので効率的)
const penguin1 = ModelManager.getModel(`PENGUIN`);
const penguin2 = ModelManager.getModel(`PENGUIN`);
const penguin3 = ModelManager.getModel(`PENGUIN`);

最後に

ゲーム開発中に Twitter でいいねやコメントなどでリアクションをくれた方、開発中のゲームを試してヒントをくれた友人方、本当にありがとうございました。
大変励みになりモチベーションになりました、重ねてお礼申し上げます😆

あと、ここまで読んでまだプレイしていない人！！
↓ やってからリアクションをクレクレ厨😗

ペンギンがサメさんを倒すゲーム
敵さんを吹っ飛ばして 1,000 G 以上を目指してみてね😆
https://games.westa.io/

P.S. crieit.net で初カノニカル投稿してみました🎉これ書く側としてはイイ仕組みですね

Node.jsで画像/動画つきツイートをTwitterに投稿すると大変だった...

2019-12-29T11:22:37+09:00

JavaScriotでツイートしたいなと思って、いろいろ試していたら、
30秒以上動画つきツイートが結構めんどくさかったので、その時の備忘録。

Node.jsでTwitter APIを使う

Node.jsでTwitter APIを使うときは、desmondmorris/node-twitterを使うのが良さそう

インストール

$ npm install twitter

ツイートしてみる

文字だけをツイートするのは、こんな感じ。

import Twitter from "twitter";

// 初期化
const client = new Twitter({
  consumer_key: TWITTER_CONSUMER_KEY,
  consumer_secret: TWITTER_CONSUMER_SECLET,
  access_token_key: ACCESS_TOKEN_KEY,
  access_token_secret: ACCESS_TOKEN_SECRET
});

// 文字だけをツイート
async function tweet(text: string) {
  const tweet = await client.post("statuses/update", { status: text });
}

tweet("ツイート").then();

Twitterクラスに.post()や、.get()が用意されているので、
Twitter APIのドキュメントを見ながら、呼び出していく感じ。

ツイートするのはPOST statuses/updateなのでドキュメントを参照。

画像つきでツイートしてみる

画像とか動画とかメディアつきだとちょっとめんどくさく...

ツイートと一緒に画像をアップロードできないので、

最初に画像をアップロードしてからmediaIdを取得し、
mediaIdと一緒にstatuses/updateでツイート

という段階的な感じになる。

import Twitter from "twitter";
const client = // 略


async function tweetWithImage(text: string, filePath: string) {
  const data = require('fs').readFileSync(filePath);

  // 画像をアップロード
  const media = await client.post('media/upload', {media: data});

  // mediaIdをパラメタに追加して、ツイート
  const params = { status: text, media_ids: media.media_id_string };
  const tweet = await client.post("statuses/update", params);
}

tweetWithImage("ツイート", "./imange.jpg").then();

複数の画像をつけたい場合は、それぞれアップロードして、
media_idsにカンマ区切りでmediaIdを指定する。

ただ、このmedia/uploadを1度だけ呼び出すシンプルな方法には制限があり、
GIFや動画はアップロードできない...

30秒以下の動画付きツイートをしてみる

動画やGIFをアップロードしたい場合は、Chunked media uploadという形でアップロードする必要がある。

この方法は、大きく3ステップに分かれている

初期化: command=INIT
アップロード: command=APPEND
完了: commaind=FINALIZE

import Twitter from "twitter";
const client = // 略


async function tweetWithChunkedMedia(text: string, filePath: string) {
  const mediaType = 'video/mp4';
  const mediaData = require('fs').readFileSync(filePath);
  const mediaSize = require('fs').statSync(filePath).size;

  // 動画をアップロード: INIT
  const media = await client.post('media/upload', {
    command    : 'INIT',
    total_bytes: mediaSize,
    media_type : mediaType
  });
  // INITでmediaIdが発行されるので、取得しておく
  const mediaId = media.media_id_string;

  // 動画をアップロード: UPLOAD
  await client.post('media/upload', {
    command      : 'APPEND',
    media_id     : mediaId,
    media        : mediaData,
    segment_index: 0
  });

  // 動画をアップロード: FINALIZE
  await client.post('media/upload', {
    command : 'FINALIZE',
    media_id: mediaId
  });

  // mediaIdをパラメタに追加して、ツイート
  const params = { status: text, media_ids: mediaId };
  const tweet = await client.post("statuses/update", params);
}

tweetWithChunkedMedia("ツイート", "./video.mp4").then();

動画やGIFのような大きいサイズのメディアは、分割してアップロードできるこの仕組みを使うっぽい。

ただ、30秒以上の動画や1MB(チャンクサイズ上限)を超える場合は、
INIT時にmedia_categoryを指定して、非同期アップロードをしないといけない。

30秒を超える動画付きツイートをしてみる

30秒を超える動画は、media_categoryをつけ、非同期アップロードで対応しないといけない。

media_categoryは、tweet_image, tweet_gif, tweet_videoを指定できるので、
アップロードするメディアに合わせて指定する。

また、チャンクサイズの上限が1MBなので、APPENDでデータをPOSTする際には注意。
1MB以上の場合は、1MB以下になるように分割し、segment_indexでindexを指定する。

import Twitter from "twitter";
const client = // 略


async function tweetWithChunkedMedia(text: string, filePath: string) {
  const mediaType = 'video/mp4';
  const mediaData = require('fs').readFileSync(filePath);
  const mediaSize = require('fs').statSync(filePath).size;

  // 動画をアップロード: INIT
  const media = await client.post('media/upload', {
    command    : 'INIT',
    total_bytes: mediaSize,
    media_type : mediaType,
    media_category: "tweet_video" // media_categoryを指定
  });

  const mediaId = media.media_id_string;

  // 動画をアップロード: UPLOAD
  await client.post('media/upload', {
    command      : 'APPEND',
    media_id     : mediaId,
    media        : mediaData,
    segment_index: 0
  });

  // 動画をアップロード: FINALIZE
  await client.post('media/upload', {
    command : 'FINALIZE',
    media_id: mediaId
  });

  // 動画をアップロード: STATUS
  while(true) {
    // アップロードのステータスをポーリング
    const status = await client.get('media/upload', {
      command : 'STATUS',
      media_id: mediaId
    });

    if (status.processing_info.state == "succeeded") {
      // 完了したら、ポーリングを終了
      break;
    } else if (status.processing_info.state == "failed") {
      // エラーになったら、例外を投げる
      throw new Error(status.processing_info.error.message);
    } else {
      // 処理中(in_progress)の場合は、指定された秒数分待つ
      await sleep(status.processing_info.check_after_secs + 1);
    }
  }

  // mediaIdをパラメタに追加して、ツイート
  const params = { status: text, media_ids: mediaId };
  const tweet = await client.post("statuses/update", params);
}

function sleep(time: number) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(), time * 1000);
  });
}

tweetWithChunkedMedia("ツイート", "./video.mp4").then();

かなりハマったのが以下の2点。

STATUSはFINALIZEしてからじゃないと、404が返ってくる
FINALIZEのレスポンスにもprocessing_infoがあるが、
STATUSをしないと永遠にpending状態。(STATUSを呼ぶと処理が始まる)

このあたり、ドキュメントに詳しい説明がなくて、かなりハマった...

axiosを使って外部URLのメディアをツイートする

Cloud Storageにある画像/動画を含めてツイートしたかったので、
axiosを使って外部URLを取得する処理を加えてみたのがこれ。

new TwitterApi().postTweet("ツイート", ["https://..."]);
みたいに呼び出すと、ダウンロード/アップロード/ツイートできる。(はず...)

import Twitter from "twitter";
import axios from "axios";

/**
 * スリープ処理
 * @param time スリープする秒数
 */
function sleep(time: number) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(), time * 1000);
  });
}

export default class TwitterApi {
  private client: Twitter;

  constructor() {
    this.client = new Twitter({
      consumer_key: // TWITTER_CONSUMER_KEY,
      consumer_secret: // TWITTER_CONSUMER_SECLET,
      access_token_key: // ACCESS_TOKEN_KEY,
      access_token_secret: // ACCESS_TOKEN_SECRET
    });
  }

  /**
   * ツイートするメイン処理
   * @param text ツイート文
   * @param medias 添付する外部URLのリスト
   */
  public async postTweet(text: string, medias: string[] = []) {
    let mediaIds: string[] = [];
    if (medias.length > 0) {
      // メディアファイルがあれば、アップロードしてmediaIdを取得
      mediaIds = await Promise.all(
        medias.map(async v => await this.uploadMedia(v.url))
      );
    }

    const res = await this.tweet(text, mediaIds);
  }

  /**
   * メディアのアップロード処理
   * @param url メディアのURL
   */
  private async uploadMedia(url: string) {
    // axiosを使って、メディアのデータを取得
    const res = await axios.create({ responseType: "arraybuffer" }).get(url);

    const mediaData: ArrayBuffer = res.data;
    const mediaSize = res.headers["content-length"];
    const mediaType = res.headers["content-type"];

    // INIT: mp4かgifなら、media_categoryを指定する
    const initParams = {
      command: "INIT",
      total_bytes: mediaSize,
      media_type: mediaType
    };
    if (mediaType == "video/mp4") {
      initParams["media_category"] = "tweet_video";
    } else if (mediaType == "image/gif") {
      initParams["media_category"] = "tweet_gif";
    }
    const data = await this.client.post("media/upload", initParams);

    const mediaId = data.media_id_string;

    // APPEND: 500Bくらいにチャンクを分けてアップロードする
    const chunkSize = 500000;
    const chunkNum = Math.ceil(mediaSize / chunkSize);

    for (let index = 0; index < chunkNum; index++) {
      const chunk = mediaData.slice(chunkSize * index, chunkSize * (index + 1));
      const resAppend = await this.client.post("media/upload", {
        command: "APPEND",
        media_id: mediaId,
        media: mediaData.slice(chunkSize * index, chunkSize * (index + 1)),
        segment_index: index
      });
    }

    // FINALIZE
    const resFinalize = await this.client.post("media/upload", {
      command: "FINALIZE",
      media_id: mediaId
    });
    if (!resFinalize.processing_info) {
      // media_categoryをしていないと、processing_infoがない
      return mediaId;
    } else if (resFinalize.processing_info.state == "succeeded") {
      return mediaId;
    } else if (resFinalize.processing_info.state == "failed") {
      throw new Error(resFinalize.processing_info.error.message);
    }

    // STATUS
    while (true) {
      const resStatus = await this.client.get("media/upload", {
        command: "STATUS",
        media_id: mediaId
      });
      if (resStatus.processing_info.state == "succeeded") {
        return mediaId;
      } else if (resStatus.processing_info.state == "failed") {
        throw new Error(resStatus.processing_info.error.message);
      } else {
        await sleep(resStatus.processing_info.check_after_secs + 1);
      }
    }
  }

  /**
   * ツイート処理
   * @param text ツイート文
   * @param mediaIds メディアIDのリスト
   */
  private async tweet(text: string, mediaIds: string[] = []) {
    const params = { status: text };

    if (mediaIds.length > 0) params["media_ids"] = mediaIds.join(",");

    const tweet = await this.client.post("statuses/update", params);
    return tweet;
  }
}

若干ハマったのが、以下の2点

axiosで取得する場合は、{ responseType: "arraybuffer" }でcreateしないといけない
cloudStrageでデータを取得できないので、downloadURLを取得しておかないといけない

Twitter APIむずい...

以上!!

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト様

Twitterでツイートできる文字数を正確に数える(絵文字もURLも)

2019-12-29T11:18:43+09:00

Nuxt.jsでツイートするアプリを作りたいなと思い、
文字数ってどうやって計算するんだろ？って思ったら、
公式でライブラリ(twitter-text)が用意されているらしいので、使ってみたときの備忘録

Java版/Ruby版/JavaScript版/Objective-C版などいろいろあるらしい。

インストール

$ npm install twitter-text

使い方

const twitter = require('twitter-text');

// ツイートするテキスト
const tweetText = "This is a test tweet";

// twitter-textで計算
const result = twitter.parseTweet(tweet);
console.log(result)
/* Returns:
  {
    weightedLength: 20,
    permillage: 71,
    valid: true,
    displayRangeEnd: 19,
    displayRangeStart: 0,
    validRangeEnd: 19,
    validRangeStart: 0
  }
*/

// 日本語版の場合、文字数を2で割るとツイッターと同じになる。
const textLength = result.weightedLength / 2;

以上!!

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト

TypeScriptのEnumでvaluesみたいなリストを取得する

2019-11-19T15:58:44+09:00

TypeScriptのEnumは便利で好きだけど、valuesみたいなenumのリストを取得できない...
でも、Object.entries()を使えばいいらしい。
毎回検索するので、自分用の備忘用。

enum FOO_TYPE {
  TYPE_FOO = "foo",
  TYPE_BAR = "bar"
}

const fooTypes: FOO_TYPE[] = Object.entries(FOO_TYPE).map(([_, value]) => value);

console.log(fooTypes);
// => [ 'foo', 'bar' ]

便利(´ω｀)

参考にしたサイト様

TypeScriptのEnumのループはObject.entries()で実現可能 - Qiita

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

いい感じのグラフをTypeScriptなNuxt.jsとvue-chartjs(chart.js)で書いてみた

2019-09-22T12:01:25+09:00

Nuxt.jsで開発しているWebサービスで、
棒グラフとか線グラフを使いたいなと思い、いろいろ調べた備忘録。

vue-chartjsを使うと、いい感じのグラフが簡単にできた(´ω｀)

$ npm install vue-chartjs chart.js --save

2. コンポーネントを作る

注意点としては、以下の3つ

vue-chartjsが生成するので、

「TypeScript」の記事 - Crieit

SmartHRと連携して人事データを可視化するツールを作ってみた

Zenn の記事を DEV に自動的に同期させる GitHub Action 作ってみた

素朴な自作言語のコンパイラをTypeScript（Deno）に移植した

📝 Jest で private readonly な値をモックする方法

Next.jsとVercelとRecoilとMaterial Tableを使ってAWSのステータスダッシュボードを作ってみた話

Hugo で React + TypeScript を利用してサクッとウェブサイトに RSS リーダーを追加する

{name} - RSS

{item.title}

Tech 🦾

Tech 🦾

Zenn - RSS

{{ .title }}

Qiita - RSS

{{ .title }}

TypeScriptのanyとunknown、object使い分け

JavascriptでPDFを作成するライブラリまとめと比較

【1週間】Web ゲームを爆速で開発するために実践したこと🐧個人開発向け

Node.jsで画像/動画つきツイートをTwitterに投稿すると大変だった...

Twitterでツイートできる文字数を正確に数える(絵文字もURLも)

TypeScriptのEnumでvaluesみたいなリストを取得する

いい感じのグラフをTypeScriptなNuxt.jsとvue-chartjs(chart.js)で書いてみた

線の色を変える: borderColor

塗りつぶしの色を変える: backgroundColor

塗りつぶしをしない: fill

線を真っ直ぐにする: tension

折れ線グラフの点の大きさを変える: radius / hoverRadius

グラフを組み合わせる(複合グラフ): type

凡例の位置を変える: legend

折れ線グラフの点の大きさなどを全体で設定: elements

Y軸を2つにする: scales.yAxes

Y軸のラベルを変える: scales.yAxes.ticks

横軸を非表示にする: scales.yAxes.display

ホバー時のツールチップで両方表示にする: tooltips.mode

ツールチップの表示を変える: tooltips.callbacks.label

HTMLのノードを直接生成するJSXファクトリを簡単に書いてみた

TypeScriptの開発をGIFアニメで見てみる

Detail for {user.name}

TypeScriptでA-Frameのコンポーネントを書く

TypeScriptでsetTimeout()がNodeJS.Timerになる理由から、window.setTimeout()との違いを理解する

線の色を変える: `borderColor`

塗りつぶしの色を変える: `backgroundColor`

塗りつぶしをしない: `fill`

線を真っ直ぐにする: `tension`

折れ線グラフの点の大きさを変える: `radius` / `hoverRadius`

グラフを組み合わせる(複合グラフ): `type`

凡例の位置を変える: `legend`

折れ線グラフの点の大きさなどを全体で設定: `elements`

Y軸を2つにする: `scales.yAxes`

Y軸のラベルを変える: `scales.yAxes.ticks`

横軸を非表示にする: `scales.yAxes.display`

ホバー時のツールチップで両方表示にする: `tooltips.mode`

ツールチップの表示を変える: `tooltips.callbacks.label`