WordpressAPI

GASでアイキャッチ画像を自動生成させるツールを作ってみた

GASでアイキャッチ画像を自動生成させるツールを作ってみたWordpressAPI
スポンサーリンク
くら
くら

ブロガーの皆さんはアイキャッチ画像をどのように作成しているでしょうか。

私は無料でおしゃれに画像をデザインできるCanvaで作成しています。

このブログのヘッダー画像・ユーザーアイコンも全部 Canvaです。

くら
くら

Canvaは操作がとても簡単で素材もたくさんあり、不満はないのですが

それでも毎回画像を作成するのは手間です。

そこで今回はGASで作る

アイキャッチ画像自動生成ツール

の作り方を紹介します!

ブログで使用するので、WordPress自動アップロード機能 もあります!

ツールで出来ること!
  • 背景画像にメイン・サブタイトル文字を重ねて合成することできます!
  • 重ねる位置は自由に設定できます!
  • 画像をWordpressにアップロードすることができます!
  • アップロードする画像の詳細情報も設定できます!

ツールの全体像はこんな動きになります。

くら
くら

コードだけ見れればいい!って方はこちらをどうぞ!

スポンサーリンク

作業の流れ

作り方の流れ
  • Googleドライブに画像合成用のスクリプトを作成
  • 画像合成用のスクリプトを公開
  • アイキャッチ画像の設定を入力するスプレッドシートを作成
  • スプレッドシートにスクリプトを作成する
スポンサーリンク

Googleドライブに画像合成用のスクリプトを作成

新規でGoogle Apps Scriptを作成

以前の記事で手順を紹介しているので、参考にしてください。

新規でGoogle Apps Scriptを作成
作成直後

doGet.js のコードを貼り付ける

コード.gs に以下を貼り付けます。

doGet.js のコードを貼り付ける
doGet.jsを貼り付ける

index.html のコードを貼り付ける

『ファイル』→『New』→『HTMLファイル』を選択します。ファイル名は『index』にします。

HTMLファイルを選択
HTMLファイルを作成

index.htmlに以下を貼り付けます

index.html のコードを貼り付ける
index.htmlを貼り付ける

width と heightを変更する

背景画像のサイズによって、width と height は変更してください。

1200と630の数値を変更してください。

スポンサーリンク

画像合成用のスクリプトを公開

以前の記事で手順を紹介しているので、参考にしてください。

取得したURLは次の手順で使います!

スクリプトを公開
スクリプトを公開
スポンサーリンク

アイキャッチ画像の設定を入力するスプレッドシートを作成

公開しているスプレッドシートにアクセスします。

『ファイル』→『コピーを作成』からマイドライブにコピーします。

マイドライブにコピー
マイドライブにコピー
スポンサーリンク

スプレッドシートにスクリプトを作成する

コピーしたスプレッドシートを開き、スクリプトエディタを開きます。

スクリプトエディタを開く
スクリプトエディタを開く

createEyecatchImage.js のコードを貼り付ける

コード.gs に以下を貼り付けます

createEyecatchImage.js のコードを貼り付ける
createEyecatchImage.jsを貼り付ける

シートIDとシート名を書き換える

コードの以下の部分をコピーしたスプレッドシートの情報に書き換えます。

シートIDとシート名を書き換える
シートIDとシート名の例

GASの公開URLを書き換える

コードの以下の部分を前の手順で取得したURLに書き換えます。

width と heightを変更する

PhantomJsCloudでキャプチャする位置を背景画像のサイズによって変えてください。

1200と630の数値を変更してください。

59はGoogleで表示されるヘッダー部分です。

PhantomJsCloudのAPIキーを書き換える

コードの以下の部分をPhantomJsCloudで取得したAPIキーに書き換えます。

APIキーの取得方法はこちらの記事が参考になりました!

WordPressのユーザー名、パスワードを書き換える

コードの以下の部分をWordpressのユーザー名、パスワードに書き換えます。

WordPressAPIのユーザー名、パスワードは以前の記事を参考にしてください。

WordPressのURLを書き換える

コードの以下の部分をWordpressのURLに書き換えます。

このブログだったら『https://arukayies.com』に書き換えます。

スポンサーリンク

使い方

『画像生成』ボタンにスクリプトを割り当てる

ボタンにスクリプトを割り当てます。『main』と割り当ててください。

ボタンにスクリプトを割り当て
ボタンにスクリプトを割り当て

 

mainを割り当て
mainを割り当て

アイキャッチ画像の設定を入力

背景画像のURLを設定

シートのB2セルには背景画像のURLを設定します。

背景画像のURLはこちらです。

背景画像
背景画像

生成された画像はこちらです。

合成された画像
合成された画像

メインタイトル・サブタイトルの設定

シートのB3・B4セルにはメインタイトル・サブタイトルの文字列を設定します。

ダミー画像生成、モックアップ用画像作成ツールの https://placehold.jp/ を使って、文字入りの画像を生成しています。

以下のコード部分で文字入りの画像を生成しています。

画像サイズ・レイアウトはこのコードを変えて使ってください。

生成された画像はこんな感じです。これを背景に合成しています。

メインタイトルの画像
メインタイトルの画像
サブタイトルの画像
サブタイトルの画像

画像の合成位置の設定

シートのB6〜B9はメインタイトル・サブタイトルの画像の合成位置の設定になります。

背景画像のサイズ・合成画像のサイズを意識した位置関係で設定してください。

くら
くら

何度か試してみて、納得いく合成位置を試してみてください。

画像の詳細設定

WordPressのメディアライブラリに反映される情報を事前に設定できます。

アイキャッチ画像の設定例
アイキャッチ画像の設定例
メディアライブラリ
メディアライブラリ

『画像生成』ボタンを押下する

すべての設定が設定できたら、『画像生成』ボタンを押下します!

これが生成される画像です!!!!!

合成された画像
合成された画像
スポンサーリンク

まとめ

コメント

タイトルとURLをコピーしました