(O+P)ut

アウトプット



(O+P)ut

エンジニアのアウトプット

【Linux】URLの画像をHTMLの画像として整形するワンライナー

スポンサーリンク

やりたいこと

以下のような画像のアドレスを

https://p16-tiktokcdn-com.akamaized.net/aweme/100x100/tiktok-obj/1649076225015810.jpeg
https://p16-tiktokcdn-com.akamaized.net/aweme/100x100/tiktok-obj/8c576aa8234c07747a75421be6bf0f1c.jpeg
https://p16-va.tiktokcdn.com/img/musically-maliva-obj/469791de03855f0227c0bfb87a545d4e~c5_100x100.jpeg

以下のようなHTMLタグのように整形することで

<image src="https://p16-tiktokcdn-com.akamaized.net/aweme/100x100/tiktok-obj/1649076225015810.jpeg" " width="50" height="50"><image src="https://p16-tiktokcdn-com.akamaized.net/aweme/100x100/tiktok-obj/8c576aa8234c07747a75421be6bf0f1c.jpeg" " width="50" height="50"><image src="https://p16-va.tiktokcdn.com/img/musically-maliva-obj/469791de03855f0227c0bfb87a545d4e~c5_100x100.jpeg" " width="50" height="50">

以下のように並べて出力したい。

f:id:mtiit:20200902232406p:plain
HMTL出力(リンク切れ対策で画像として添付)

環境情報
$ bash --version
GNU bash, バージョン 4.4.12(3)-release (x86_64-unknown-cygwin)

やり方

該当の画像群のリンクが上記のように改行付きで並んでいる場合は以下コマンドで整形できます。

$ sed -e "s/^/<image src=\"/g" | sed -e "s/$/\" width=\"50\" height=\"50\">/g" | awk 'BEGIN{ORS=""}{print $0}'

以下、解説です。

解説

改行を入れずに画像を並べるためには以下の構文に落とし込む必要があります。

<img src="画像ファイルのURL"><img src="画像ファイルのURL"><img src="画像ファイルのURL">

よって画像のURLの先頭と末尾にsedで文字列を挿入しています。

また、画像のサイズを決定する以下構文を利用することで画像のサイズを統一しています。数値部分にはピクセル数を入れます。

<img src="画像ファイルのURL" width="100" height="100">

大量の画像をURLで取得できれば、こちらのワンライナーで大きな一枚絵のようにWebページに表示できるのでご参考ください。