【Node.js】Markdown内のimgタグの画像の大きさを変える。

はじまり
今回作った処理
処理の流れ
GitHub Actionsで定期更新する
おしまい
おまけ

はじまり

135ml

今回は、Markdownの中にある画像のサイズを変えるツールの紹介します。

リサちゃん

沢山画像を貼っててそいつらのサイズをまとめて変えるとなると、手作業だと大変だもんねえ。

135ml

そうなのだ。なので、GitHub Actionsを走らせたときに、対象の設定ファイル（yaml）を読み取って画像のサイズを色々してくれます。

リサちゃん

Here we go!

今回作った処理

今回は、README.md内のimgタグで記載された画像のサイズを変更する処理を作成しました。処理の実行前と実行後は以下になります。

実行前

実行後（大きくなった）

処理の流れ

ソースはこちらになります。

image-scale.js

import path from 'path';
import url from 'url';

import { Command } from 'commander';

import * as methods from './lib/lib-methods.js';

try {
  (async() => {
    const commander = new Command();
    commander.option('-c, --config-yaml <type>', 'file name for config with yaml').parse(process.argv);
    console.log(commander);

    const yamlFileName = String(commander._optionValues.configYaml);
    console.log(`image-scale.js: yamlFileName is "${yamlFileName}"`);

    const __dirname    = path.dirname(url.fileURLToPath(import.meta.url));
    const configByYaml = methods.loadYamlFile(path.join(__dirname, yamlFileName));
    console.log(configByYaml);

    const sourceMdFileName = configByYaml.sourceMarkdownFileName;
    const lines = methods.getTextLines(sourceMdFileName);
    console.log(lines);

    const imageArea = configByYaml.imageArea;
    const imageSizeEmAfter = configByYaml.imageSizeEmAfter;
    methods.writeImageScaling(lines, sourceMdFileName, imageArea, imageSizeEmAfter)
    console.log(methods.getTextLines(sourceMdFileName));
  })();
} catch (error) {
  console.error(`Execute Step 1: ${error}`);
}

この処理の流れは、以下になります。

引数に貰ったyamlファイルからこの処理に必要なコンフィグ情報を取得する。（console.log(configByYaml);までの部分）
yamlファイルで取得した更新対象のファイルの全文を取得する。（console.log(lines);までの部分）
更新対象のファイルの投稿部分の表示だけ書き換える。（最後らへん）

1. 引数に貰ったyamlファイルからこの処理に必要なコンフィグ情報を取得する。

コンフィグ情報は以下のファイルの中身です。

imageSizeEmAfterでサイズを指定します。emで指定します。そして、この場合だと、README.mdの中にとを記載すると、その間に投稿した画像のサイズが更新されます。

configOfImageScaler.yml

imageSizeEmAfter: 30.2
sourceMarkdownFileName: README.md
imageArea:
  start: <!--[START IMAGE LIST]-->
  end: <!--[END IMAGE LIST]-->

2. yamlファイルで取得した更新対象のファイルの全文を取得する。

ファイルの全文を改行区切りで配列として取得します。

3. 更新対象のファイルの投稿部分の表示だけ書き換える。

<img ...>を検知して画像のサイズを変更します。詳しいソースはこちらにありますので、興味ありましたら見てみてください。

feed-fetcher/lib/lib-methods.js at main · landmaster135/feed-fetcher

Get RSS feed to update file. Contribute to landmaster135/feed-fetcher development by creating an account on GitHub.

GitHub Actionsで定期更新する

./node_modules/feed-fetcher/bin/runImageScale --config-yaml=../../configOfImageScaler.ymlの部分で投稿した記事の部分を更新しています。

name: Update README for RSS feed

on:
  workflow_dispatch:
  schedule:
    - cron:  '0 0 * * *'

jobs:
  updateFeed:
    runs-on: ubuntu-latest
    steps:
    - name: apt update
      run: sudo apt update
      
    - name: Checkout
      uses: actions/checkout@v2

    - name: node set up
      uses: actions/setup-node@v2
      with:
        node-version: '16.13.1'
    
    - name: Confirm version of node and npm
      run: |
        node -v
        npm -v
    - name: Install feedFetcher
      run: npm install https://github.com/Landmaster135/feed-fetcher
    
    - name: run feedFetcher
      run: |
        chmod 777 ./node_modules/feed-fetcher/bin/*
        ./node_modules/feed-fetcher/bin/runFeedFetch --config-yaml=../../configOfFeedFetcher.yml
        ./node_modules/feed-fetcher/bin/runImageScale --config-yaml=../../configOfImageScaler.yml
      
    - name: git setting
      run: |
        git config --local user.email "52403447+Landmaster135@users.noreply.github.com"
        git config --local user.name "Landmaster135"
    
    - name: git commit
      run: |
        git log -1
        git add README.md
        git diff --cached --quiet || (git commit -m "Update feed snippet" && git push origin main)