バッチ処理を利用し、PDFの1ページ目をサムネイル画像にする

バッチ処理を利用し、コンテンツでPDFを登録した際にPDFの1ページ目を自動でサムネイル画像にする方法を説明します。

前提条件

サムネイル画像の保存はGCSに保存されます。そのため、事前にFirebaseとの連携が必要になります。 Firebaseと連携して、Storageにファイルを保存するを参考に、Firebaseの連携をお願いします。

コンテンツ定義作成

まずはPDFを登録するコンテンツ定義を作成します。
メニューより[コンテンツ定義]をクリックしコンテンツ定義一覧画面を開き、[追加]をクリックします。

Image from Gyazo

コンテンツ定義作成画面が開きます。 今回は下記で作成します。

項目名設定内容
名前自動サムネイル作成

Image from Gyazo

また、下記2つのフィールドを追加します。

ID項目名Slug項目設定
01サムネイル画像image画像(KurocoFiles)
02PDFファイルpdfファイル(KurocoFiles)

Image from Gyazo

設定したら、[追加する]をクリックしコンテンツ定義を保存します。

Image from Gyazo

コンテンツ定義の作成方法の詳細は、チュートリアル -> コンテンツ定義を作成するをご確認ください。

APIの設定

次にPDFを画像に変換するためのAPIを設定します。
メニューより[API] -> [Default API]をクリックしエンドポイント一覧画面を開き、[追加]をクリックします。

Image from Gyazo

API追加画面が表示されるので、以下のように設定し、[追加]をクリックします。

項目設定
タイトルpdf-to-thumbs
1.0
ディスクリプション自動サムネイル作成API

Image from Gyazo

作成したAPIのエンドポイント一覧画面が表示されます。

Image from Gyazo

API セキュリティの設定

APIセキュリティを設定します。
今回作成するAPIは外部からリクエストされないように「動的アクセストークン」を選択します。

エンドポイント一覧画面より、[セキュリティ]をクリックします。

Image from Gyazo

セキュリティより「動的アクセストークン」を選択し、[保存する]をクリックします。

Image from Gyazo

以上でセキュリティの設定は完了です。

エンドポイントの作成

次にエンドポイントを作成します。今回は下記2つのエンドポイントを作成します。

  • サムネイル画像が未登録のコンテンツを取得する
  • サムネイル画像を更新する

「サムネイル画像が未登録のコンテンツを取得する」にてコンテンツにサムネイル画像の登録有無を確認し、登録がない場合「サムネイル画像を更新する」にてサムネイル画像をコンテンツに登録します。

エンドポイント「サムネイル画像が未登録のコンテンツを取得する」の作成

まずは「サムネイル画像が未登録のコンテンツを取得する」のエンドポイントを作成します。 エンドポイント一覧画面より「新しいエンドポイントの追加」をクリックします。

Image from Gyazo

今回は下記で作成します。

項目内容
パスno-thumb-list
カテゴリーコンテンツ
モデルTopics
オペレーションlist
Parametersfilterext_col_01="" and ext_col_02!=""
(注意:PDFファイル名/画像の説明部分のテキスト有無を検索条件にしています)
Parameterstopics_group_id先ほど作成した「自動サムネイル作成」のidを記載
Parametersctn0

Image from Gyazo

設定後、画面下部の[追加する]をクリックします。

Image from Gyazo

エンドポイント「サムネイル画像を更新する」の作成

次に「サムネイル画像を更新する」のエンドポイントを作成します。 同様にエンドポイント一覧画面より「新しいエンドポイントの追加」をクリックし、下記で作成します。

項目内容
パスthumb-update
カテゴリーコンテンツ
モデルTopics
オペレーションupdate
Parameterstopics_group_id先ほど作成した「自動サムネイル作成」のidを記載
Parametersuse_columnsimage

Image from Gyazo

設定後、画面下部の[追加する]をクリックします。

以上でエンドポイントの作成完了です。

一時保存先フォルダの作成

次に、画像の保存先フォルダを作成します。 このフォルダは、PDFをサムネイル画像に保存したあとの一時保存先になります。

メニューより[ファイル]をクリックします。

Image from Gyazo

[GCS(Private)]をクリックし、[新しいフォルダを作成]をクリックします。

Image from Gyazo

フォルダ名に「pdf_thumb」と記入し、[OK]をクリックします。

Image from Gyazo

pdf_thumb フォルダが作成されました。

Image from Gyazo

バッチ処理の作成

次にPDFを画像化するためのバッチ処理を作成します。今回は下記2つのバッチを作成します。

  • PDFからサムネイル画像を生成する
    PDFの先頭ページを画像化するバッチ処理です。
  • 生成したサムネイル画像をコンテンツに登録する
    作成されたサムネイル画像を対象のコンテンツに登録するバッチ処理です。

バッチ処理「PDFからサムネイル画像を生成する」の作成

まずは「PDFからサムネイル画像を生成する」のバッチ処理を作成します。
[オペレーション] -> [バッチ処理]より[追加]をクリックします。

Image from Gyazo

バッチ処理追加画面が表示されるので、以下のように設定します。

項目設定
タイトルPDFからサムネイル画像作成
Slugcreate_thumb
バッチ1時間毎

また、実行内容には下記を記入してください。

{*PDF登録有りでサムネイル未設定のコンテンツ一覧を取得*}
{api_internal member_id=1 endpoint='/rcms-api/2/no-thumb-list' query='' method='GET' var='contents_list' status_var='status'}
{if $status == 1 && $contents_list.list|@count > 0}
    {foreach from=$contents_list.list key=idx item=item}
        {if !$item.image.url && $item.pdf.url}{*画像未設定*}
            {get_file url=$item.pdf.url var=temp_path save=1}
            {if $temp_path}
                {assign var=gcp_pdf_path value='files/g/private/pdf_thumb/'|cat:$item.topics_id|cat:'.pdf'}
                {assign var=gcp_img_path value='files/g/private/pdf_thumb/'|cat:$item.topics_id|cat:'.png'}
                {*PDFファイルをGCS上のテンポラリディレクトリに保存*}
                {put_file tmp_path=$temp_path path=$gcp_pdf_path}
                {assign var=data value=null}
                {assign_array var=data values=''}
                {assign var=data.topics_id value=$item.topics_id}
                {assign var=data.pdf value=$item.pdf}
                {*CloudFunctionsの機能を利用してサムネイル生成*}
                {make_pdf_thumb pdfPath=$gcp_pdf_path destPath=$gcp_img_path callback_batch='update_pdf_thumb_bat' data=$data}
            {/if}
        {/if}
    {/foreach}
{/if}

/rcms-api/2/no-thumb-list2には、先ほど作成したAPIのidに変更してください。 APIのIDはエンドポイント一覧ページのURLより確認できます。
Image from Gyazo

Image from Gyazo

設定したら、[追加する]をクリックしバッチ処理を保存します。

バッチ処理「生成したサムネイル画像をコンテンツに登録する」の作成

次に、「生成したサムネイル画像をコンテンツに登録する」バッチ処理を作成します。 同様に、バッチ作成画面より以下のように追加します。

項目設定
タイトル画像をコンテンツに登録
Slugupdate_pdf_thumb_bat
バッチバッチテンプレート

また、実行内容には下記を記入してください。

{*CloudFunction側から取得したデータを設定*}
{assign var=topics_id value=$ext_data.data.topics_id}
{assign var=image_name value=$ext_data.data.pdf.desc|replace:'.pdf':''}
{assign var=dest_path value=$ext_data.destPath}
{assign var=file_id value='files/temp/pdf_thumb/'|cat:$topics_id|cat:'.png'}
{assign var=save_path value='/files/temp/pdf_thumb/'|cat:$topics_id|cat:'.png'}

{*GCSから画像ファイルをfiles/tempに取得*}
{get_file path=$dest_path save_path=$save_path save=1}

{*取得した画像をコンテンツにアップロード*}
{assign_array var=post_data values=''}
{assign_array var=post_data.image values=''}
{assign var=post_data.image.file_id value=$file_id}
{assign var=post_data.image.file_nm value=$image_name|cat:'.png'}
{assign var=post_data.image.desc value=$image_name}
{api_internal endpoint='/rcms-api/2/thumb-update/'|cat:$topics_id member_id=1 method='POST' queries=$post_data var='resp' status_var='status'}
{if $status==1}
    {*処理成功時にはPDFとサムネイルを削除する*}
    {remove_file path='/'|cat:$dest_path}
    {remove_file path='/'|cat:$dest_path|replace:'.png':'.pdf'}
{/if}

/rcms-api/2/thumb-update2には、先ほど作成したAPIのidに変更してください。

Image from Gyazo

以上でバッチ処理の設定が完了です。

動作確認

最後に、設定内容の動作確認をします。

作成したコンテンツ定義「自動サムネイル作成」よりコンテンツを投稿します。 その際に、画像はアップロードせずPDFのみアップロードします。

Image from Gyazo

PDFをアップロードしたら、[追加する]をクリックしコンテンツを投稿します。

Image from Gyazo

次に、バッチ処理を実行します。 今回の設定ではバッチ処理が1時間毎に実行するように設定しましたが、テストのため手動で実行します。

バッチ処理より、先ほど作成した「PDFからサムネイル画像作成」をクリックします。

Image from Gyazo

タイトル横の[すぐに実行する]をクリックします。

Image from Gyazo

アラートが表示されるので、[OK]をクリックします。

Image from Gyazo

バッチが実行されました。

次に、コンテンツに画像がアップロードされているかを確認します。

[コンテンツ定義]をクリックし、自動サムネイル作成の[一覧]をクリックします。

Image from Gyazo

先ほど作成したコンテンツをクリックします。

Image from Gyazo

「サムネイル画像」フィールドに画像が登録されていることが確認できます。

Image from Gyazo

画像作成されるまで、数分かかる場合があります。画像が登録されていない場合、時間を置いてから再度ご確認ください。

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。