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

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

はじまり#

135ml avatar
135ml
今回は、Markdownの中にある画像のサイズを変えるツールの紹介します。
リサちゃん avatar
リサちゃん
沢山画像を貼っててそいつらのサイズをまとめて変えるとなると、手作業だと大変だもんねえ。

今回作った処理#

今回は、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}`);
}

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

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

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

コンフィグ情報は以下のファイルの中身です。 imageSizeEmAfterでサイズを指定します。emで指定します。そして、この場合だと、README.mdの中に<!--[START IMAGE LIST]--><!--[END IMAGE LIST]-->を記載すると、その間に投稿した画像のサイズが更新されます。

configOfImageScaler.yml:

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

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

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

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

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

landmaster135
/
feed-fetcher
Waiting for api.github.com...
00K
0K
0K
Waiting...

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)

おしまい#

135ml avatar
135ml
とまあ、こんなところだな。
リサちゃん avatar
リサちゃん
なるほどなあ〜。あ、昼飯はカツ丼にするか?
135ml avatar
135ml
いや、寿司が食いてえ。

以上になります!

記事を共有

この記事が役に立ったなら、ぜひ他の人と共有してください!

【Node.js】Markdown内のimgタグの画像の大きさを変える
https://endorphinbath.com/posts/nodejs-markdown-scale-image/
著者
kinkinbeer135ml
公開日
2022-01-03
ライセンス
CC BY-NC-SA 4.0
関連記事 スマート
1
【JavaScript】実行中の関数自身の関数名を取得する
Code 実行している関数やメソッド自身の名前を取得する方法を紹介します。この方法は、その関数名を取得する関数を別の関数から呼び出してもらわなければなりません。thisに関数をバインドする必要があるためです。その呼び出し方の種類を掲載しています。
2
【JavaScript】Errorタイプのオブジェクトかどうかを判定する
Code JavaScriptで渡した値がErrorオブジェクトかどうかを判定する関数が見つからなかったので、僕が書いたものを紹介します。
3
【JavaScript】数値を0埋めされた文字列として加工する
Code JavaScriptで、IDなどを採番する時に0埋めした数値が欲しい時があります。その時に利用できるスニペットを紹介します。
4
【P5.js】描画したものの比率が歪んでいるときに対処したこと
Code P5.jsを描画させた時に縦横の比率がおかしくなる現象が起きたので、その回収までの過程を記載します。
5
【Node.js】GitHub ActionsでREADME.mdに投稿した記事のリンクを表示する(FirebaseでCORS対応)
Code Zenn、Qiita、ブログ、noteに投稿した記事のURLをREADM.mdに掲載するアプリを作成しました。このアプリを参考にして自分のGitHubのプロフィールページをカッコよくしてみましょう!GitHub ActionsやFirebaseを題材にしています。
ランダム記事 ランダム
Profile Image of the Author
kinkinbeer135ml
SIerをやめて、プログラミングを勉強しています。※Amazonアソシエイトに参加しています。
お知らせ
私のブログへようこそ!これはサンプルのお知らせです。
音楽
カバー

音楽

再生中なし

0:00 0:00
歌詞なし
カテゴリ
タグ
サイト統計
記事
287
カテゴリー
8
タグ
93
総文字数
486,174
運用日数
0
最終活動
0 日前

目次