wip

yamadashy · Aug 24, 2024 · 46b5da6 · 46b5da6
1 parent 7abb6d3
commit 46b5da6
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 9 deletions.
diff --git a/eleventy.config.ts b/eleventy.config.ts
@@ -5,7 +5,6 @@ import path from 'path';
 import ts from 'typescript';
 import { imageCacheOptions } from './src/common/eleventy-cache-option';
 import CleanCSS from "clean-css";
-import { Sharp } from 'sharp';
 import sharpIco, {ImageData} from "sharp-ico";
 import url from 'url';
 import Eleventy from '@11ty/eleventy';
@@ -31,6 +30,13 @@ const minifyHtmlTransform = (content: string, outputPath: string) => {
 }
 
 const imageThumbnailShortcode = async (src: string, alt: string, pathPrefix: string = '') => {
+  // 取れなければ代替画像
+  const alternativeImageTag = `<img src='${pathPrefix}images/alternate-feed-image.png' alt='${alt}' loading='lazy' width='256' height='256'>`;
+
+  if (!src) {
+    return alternativeImageTag;
+  }
+
   let metadata: EleventyImage.Metadata;
 
   try {
@@ -50,7 +56,7 @@ const imageThumbnailShortcode = async (src: string, alt: string, pathPrefix: str
   } catch {
     // エラーが起きたら代替画像にする
     console.log('[image-thumbnail-short-code] error', src);
-    return `<img src='${pathPrefix}images/alternate-feed-image.png' alt='${alt}' loading='lazy' width='256' height='256'>`
+    return alternativeImageTag;
   }
 
   return EleventyImage.generateHTML(metadata, {
@@ -62,6 +68,13 @@ const imageThumbnailShortcode = async (src: string, alt: string, pathPrefix: str
 }
 
 const imageIconShortcode = async (src: string, alt: string, pathPrefix: string = '') => {
+  // 取れなければ画像なし
+  const alternativeImageTag = ``;
+
+  if (!src) {
+    return alternativeImageTag;
+  }
+
   const parsedUrl = url.parse(src);
   const fileName = path.basename(parsedUrl.pathname || '');
   const fileExtension = path.extname(fileName).toLowerCase();
@@ -81,9 +94,8 @@ const imageIconShortcode = async (src: string, alt: string, pathPrefix: string =
         imageSrc = await sharpIcoImage.image.png().toBuffer();
       }
     } catch (error) {
-      // エラーが起きたら画像なし
       console.error('[image-icon-short-code] Error processing ICO:', src, error);
-      return ``;
+      return alternativeImageTag;
     }
   }
 

diff --git a/src/feed/utils/feed-crawler.ts b/src/feed/utils/feed-crawler.ts
@@ -16,6 +16,7 @@ import constants from '../../common/constants';
 import { to } from 'await-to-js';
 import { default as ogs } from 'open-graph-scraper';
 import { OpenGraphScraperOptions, OgObject, ImageObject } from 'open-graph-scraper/types/lib/types';
+import { O } from 'vitest/dist/chunks/environment.0M5R1SX_';
 
 export type CustomOgObject = OgObject & {
   // 画像は一つだけとする
@@ -383,11 +384,18 @@ export class FeedCrawler {
     const ogObject = ogsResponse.result;
     const ogImages = ogObject?.ogImage;
 
-    // データの調整
+    let validOgImages: ImageObject[] = [];
+
+    // データの調整しつつ、利用可能なものを取得
     if (ogImages !== undefined) {
       for (const ogImage of ogImages) {
         const ogImageUrl = ogImage.url;
 
+        // 画像がないものはスキップ
+        if (ogImageUrl == null || ogImageUrl.trim() === '') {
+          continue;
+        }
+
         // 一部URLがおかしいものの対応
         if (ogImageUrl && ogImageUrl.startsWith('https://tech.fusic.co.jphttps')) {
           ogImage.url = ogImageUrl.substring('https://tech.fusic.co.jp'.length);
@@ -397,12 +405,14 @@ export class FeedCrawler {
         if (ogImageUrl && !ogImageUrl.startsWith('http')) {
           ogImage.url = new URL(ogImageUrl, url).toString();
         }
+
+        validOgImages.push(ogImage);
       }
     }
 
     // 画像は一つとして扱いたいのでカスタム
     const customOgObject: CustomOgObject = ogObject;
-    customOgObject.customOgImage = ogImages?.[0];
+    customOgObject.customOgImage = validOgImages[0] || null;
 
     // faviconはフルURLにする
     if (customOgObject.favicon && !customOgObject.favicon.startsWith('http')) {

diff --git a/src/feed/utils/feed-generator.ts b/src/feed/utils/feed-generator.ts
@@ -70,7 +70,7 @@ export class FeedGenerator {
       const feedItemContent = (feedItem.summary || feedItem.contentSnippet || '').replace(/(\n|\t+|\s+)/g, ' ');
 
       const ogObject = feedItemOgObjectMap.get(feedItem.link);
-      // 配列担っているが2つ目以降を使う理由もないので0を使う
+      // 配列になっているが2つ目以降を使う理由もないので0を使う
       const ogImage = ogObject?.customOgImage;
 
       // 日付がないものは入れない

diff --git a/src/site/blog-feed.njk b/src/site/blog-feed.njk
@@ -28,7 +28,7 @@ permalink: "blogs/{{ blogFeed.linkMd5Hash }}/"
             {% asyncEach feedItem in blogFeed.items %}
                 <div class='ui-feed-item'>
                     <a class='ui-feed-item__og-image' href='{{ feedItem.link }}'>
-                        {% if feedItem.ogImageUrl %}
+                        {% if feedItem.ogImageUrl !== null %}
                             {% imageThumbnail feedItem.ogImageUrl, '記事のアイキャッチ画像', page.url | relativeUrl %}
                         {% else %}
                             <img src='{{ page.url | relativeUrl }}images/alternate-feed-image.png' loading="lazy" alt='記事のアイキャッチ画像' width='256' height='256'>

diff --git a/src/site/blogs.njk b/src/site/blogs.njk
@@ -14,7 +14,7 @@ eleventyComputed:
             {% asyncEach blogFeed in blogFeeds %}
                 <div class='ui-blog'>
                     <a class='ui-blog__og-image' href='./{{ blogFeed.linkMd5Hash }}/'>
-                        {% if blogFeed.ogImageUrl %}
+                        {% if blogFeed.ogImageUrl !== null %}
                             {% imageThumbnail blogFeed.ogImageUrl, 'ブログのアイキャッチ画像', '../' %}
                         {% else %}
                             <img src='{{ page.url | relativeUrl }}images/alternate-feed-image.png' loading="lazy" alt='記事のアイキャッチ画像' width='256' height='256'>