Merge pull request #6 from cybozu/feat/add-tumbnails

ogpのcross-origin-resource-policy: same-origin対策

Author: tetrapod418

src/feed/generate-feed-command.ts

@@ -46,14 +46,24 @@ const feedImagePrecacher = new FeedImagePrecacher();
     );
   }
 
-  // まとめフィード作成
   const ogObjectMap = new Map([...crawlFeedsResult.feedItemOgObjectMap, ...crawlFeedsResult.feedBlogOgObjectMap]);
+
+  // 画像のキャッシュとサムネイルURL取得（フィード生成前に実行してURLをフィードに含める）
+  const thumbnailUrlMap = await feedImagePrecacher.fetchAndCacheFeedImages(
+    crawlFeedsResult.feeds,
+    crawlFeedsResult.feedItems,
+    ogObjectMap,
+    FETCH_IMAGE_CONCURRENCY,
+  );
+
+  // まとめフィード作成
   const generateFeedsResult = feedGenerator.generateFeeds(
     crawlFeedsResult.feedItems,
     ogObjectMap,
     crawlFeedsResult.feedItemHatenaCountMap,
     MAX_FEED_DESCRIPTION_LENGTH,
     MAX_FEED_CONTENT_LENGTH,
+    thumbnailUrlMap,
   );
 
   // まとめフィードのバリデーション。エラーならすぐに終了する
@@ -70,12 +80,4 @@ const feedImagePrecacher = new FeedImagePrecacher();
     crawlFeedsResult.feedItemHatenaCountMap,
     STORE_BLOG_FEEDS_DIR_PATH,
   );
-
-  // 画像の事前キャッシュ
-  await feedImagePrecacher.fetchAndCacheFeedImages(
-    crawlFeedsResult.feeds,
-    crawlFeedsResult.feedItems,
-    ogObjectMap,
-    FETCH_IMAGE_CONCURRENCY,
-  );
 })();

src/feed/utils/feed-generator.ts

@@ -1,5 +1,6 @@
 import { Feed, FeedOptions } from 'feed';
 import { CustomRssParserItem, FeedItemHatenaCountMap, OgObjectMap } from './feed-crawler';
+import { ThumbnailUrlMap } from './feed-image-precacher';
 import { escapeTextForXml, textToMd5Hash, textTruncate } from './common-util';
 import { logger } from './logger';
 import * as constants from '../../common/constants';
@@ -22,13 +23,15 @@ export class FeedGenerator {
     allFeedItemHatenaCountMap: FeedItemHatenaCountMap,
     maxFeedDescriptionLength: number,
     maxFeedContentLength: number,
+    thumbnailUrlMap: ThumbnailUrlMap = new Map(),
   ): GenerateFeedResult {
     const aggregatedFeed = this.generateAggregatedFeed(
       feedItems,
       feedItemOgObjectMap,
       allFeedItemHatenaCountMap,
       maxFeedDescriptionLength,
       maxFeedContentLength,
+      thumbnailUrlMap,
     );
 
     return {
@@ -48,6 +51,7 @@ export class FeedGenerator {
     allFeedItemHatenaCountMap: FeedItemHatenaCountMap,
     maxFeedDescriptionLength: number,
     maxFeedContentLength: number,
+    thumbnailUrlMap: ThumbnailUrlMap,
   ): Feed {
     const outputFeed = new Feed({
       title: constants.feedTitle,
@@ -72,6 +76,7 @@ export class FeedGenerator {
       const ogObject = feedItemOgObjectMap.get(feedItem.link);
       // 配列担っているが2つ目以降を使う理由もないので0を使う
       const ogImage = ogObject?.customOgImage;
+      const feedThumbnailUrl = ogImage?.url ? thumbnailUrlMap.get(ogImage.url) : undefined;
 
       // 日付がないものは入れない
       if (!feedItem.isoDate) {
@@ -113,6 +118,7 @@ export class FeedGenerator {
               blogLink: feedItem.blogLink,
               blogLinkMd5Hash: textToMd5Hash(feedItem.blogLink),
               favicon: ogObject?.favicon,
+              feedThumbnailUrl: feedThumbnailUrl || '',
             },
           },
         ],

src/feed/utils/feed-image-precacher.ts

@@ -3,40 +3,52 @@ import { logger } from './logger';
 import { imageCacheOptions } from '../../common/eleventy-cache-option';
 import { to } from 'await-to-js';
 import { CustomRssParserFeed, CustomRssParserItem, OgObjectMap } from './feed-crawler';
-import EleventyFetch from '@11ty/eleventy-fetch';
+import EleventyImage from '@11ty/eleventy-img';
+import constants from '../../common/constants';
+
+const THUMBNAIL_OUTPUT_DIR = 'public/images/feed-thumbnails';
+const THUMBNAIL_URL_PATH = `${constants.siteUrlStem}/images/feed-thumbnails/`;
+
+export type ThumbnailUrlMap = Map<string, string>;
 
 export class ImagePrecacher {
   public async fetchAndCacheFeedImages(
     feeds: CustomRssParserFeed[],
     feedItems: CustomRssParserItem[],
     ogObjectMap: OgObjectMap,
     concurrency: number,
-  ): Promise<void> {
+  ): Promise<ThumbnailUrlMap> {
+    const thumbnailUrlMap: ThumbnailUrlMap = new Map();
     let ogImageUrls: string[] = [];
 
     for (const feed of feeds) {
-      ogImageUrls.push(ogObjectMap.get(feed.link)?.customOgImage?.url || '');
+      const url = ogObjectMap.get(feed.link)?.customOgImage?.url;
+      if (url) ogImageUrls.push(url);
     }
 
     for (const feedItem of feedItems) {
-      ogImageUrls.push(ogObjectMap.get(feedItem.link)?.customOgImage?.url || '');
+      const url = ogObjectMap.get(feedItem.link)?.customOgImage?.url;
+      if (url) ogImageUrls.push(url);
     }
 
-    // フィルタ
-    ogImageUrls = ogImageUrls.filter(Boolean);
+    // 重複排除
+    ogImageUrls = [...new Set(ogImageUrls)];
 
-    // 画像取得
     const ogImageUrlsLength = ogImageUrls.length;
     let fetchProcessCounter = 1;
 
     await PromisePool.for(ogImageUrls)
       .withConcurrency(concurrency)
       .process(async (ogImageUrl) => {
-        const [error] = await to(
-          EleventyFetch(ogImageUrl, {
-            type: 'buffer',
-            duration: imageCacheOptions.duration,
-            concurrency,
+        const [error, metadata] = await to<EleventyImage.Metadata>(
+          EleventyImage(ogImageUrl, {
+            widths: [150, 450],
+            formats: ['webp', 'jpeg'],
+            outputDir: THUMBNAIL_OUTPUT_DIR,
+            urlPath: THUMBNAIL_URL_PATH,
+            cacheOptions: imageCacheOptions,
+            sharpWebpOptions: { quality: 50 },
+            sharpJpegOptions: { quality: 70 },
           }),
         );
         if (error) {
@@ -45,9 +57,17 @@ export class ImagePrecacher {
           return;
         }
 
+        // 最大サイズのjpegをfeed用サムネイルURLとして登録
+        const jpegImages = metadata.jpeg;
+        const largestJpeg = jpegImages?.[jpegImages.length - 1];
+        if (largestJpeg?.url) {
+          thumbnailUrlMap.set(ogImageUrl, largestJpeg.url);
+        }
         logger.info('[cache-og-image] fetched', `${fetchProcessCounter++}/${ogImageUrlsLength}`, ogImageUrl);
       });
 
     logger.info('[cache-og-image] finished');
+
+    return thumbnailUrlMap;
   }
 }