Googleフォトの写真を表示するプラグイン Photo Express for Google が便利で素敵

少し前から使っている WordPress のプラグイン「Photo Express for Google」が便利で素敵なので、使い方を含めてご紹介します。

Browse and select photos from any public or private Google+ album and add them to your posts/pages. This is an unofficial fork of "Picasa and Goo …

wordpress.org

プラグイン「Photo Express for Google」とは

WordPressに写真を挿入する際に、Google Photo にアップロードしている写真を簡単に記事に挿入することができるようになるプラグインです。

例えば、スマホで撮影した写真をWordpressの記事に挿入したい場合、何らかの方法でWordpressに写真をアップロードする必要があり、これが意外と手間で面倒だったりします。

Photo Express for Google を使うと、スマホにGoogle Phoneアプリをインストールして自動アップロードを有効にしておきさえすれば、あとはWordpressからGoogle Photo の写真を選ぶだけで記事に写真を挿入できます。

また、Google Photo は、よほど大きな写真でない限り容量無制限で利用することができますので、Wordpressのサーバのディスク容量を気にする必要がなくなります。
私はAWSを使ってWordpressを運用しているので、写真が貯まる事によってEBSの容量を増やさないといけない(お金がかかる)事態を回避することができ、お財布にも優しいプラグインです。

使い方

Photo Express for Google は少し設定がややこしいので、順番に見ていきましょう。

インストール

まずは、Photo Express for Google をインストールします。
プラグインメニューから、Photo Express for Google で検索すると出てきますのでインストールしましょう。

インストールしたら、有効化です。

設定

インストール・有効化が完了したら、インストール済みプラグイン一覧から、Photo Express for Google の Settings を開きます。

OAuthの設定

Google Photo へアクセスする際の認証設定を行います。
Settingsの中の上の方に「Click here to configure private access to Google Photo」というところがありますので、これをクリック！

Step 1: Google OAuth Client Details という画面が表示されたら、Google Developer Console へログインします。
「Google Developer Console」というリンクをクリック！

ChromeなどですでにGoogleアカウントでログインした状態であれば、ログインしているアカウントのGoogle Developer Console が表示されると思います。
別アカウントのGoogle Photoを使いたい場合は、そのアカウントに切り替えてください。

Google Developer Console が表示されたら、画面左上の「Project」から「プロジェクを作成」をクリック！

新しいプロジェクトを作ります。
プロジェクト名はなんでもOKです。Wordpressのサイト名がいいと思います。

プロジェクトを作成すると、画面左上の「Project」と書かれていた部分が、作成したプロジェクト名になっていると思います。
この状態で、画面左ペインの「認証情報」をクリック！

認証情報画面で、「OAuth同意画面」をクリック！

OAuth同意画面で、①メールアドレスと②サービス名を入力しましょう。ホームページのURLなどは入力しなくても大丈夫です。
サービス名は「Photo Express for Google」とするといいかと思います。
入力したら保存します。

続いて、「認証情報」画面から、「認証情報を作成」→「OAuthクライアントID」をクリック！

「クライアントIDの作成」画面で、以下のように入力します。

アプリケーションの種類：ウェブアプリケーション
名前：Photo Express for Google
承認済みJavaScript生成元：WordpressのPhoto Express for Googleの「Step 1: Google OAuth Client Details」画面内に表示されている 9. の情報
承認済みのリダイレクトURI：同じく 10. の情報

上記の「9.」と「10.」の情報は、この部分です。

入力が終わったら「設定」ボタンをクリック！

「OAuthクライアント」ダイアログが表示されますので、「クライアントID」と「クライアントシークレット」をメモしておきます。

この2つの情報を、WordpressのPhoto Express for Googleの「Step 1: Google OAuth Client Details」画面の下部にある「Google OAuth client ID」と「Google OAuth client secret」に入力しましょう。
入力したら、「Save Details」をクリック！

「設定を保存しました。」と表示されたら、「Continue」をクリック！

「Step 2: Google OAuth Consent」画面が表示されますので「Link」というリンクをクリック！

Googleアカウントで、Photo Express for Google からのアクセスを許可してください。

Photo Express for Google のSettingsの画面に戻りますので、中ほどにある「Google User name for site」にGoogle Photoアカウントのメールアドレスを入力しておきます。

最後に「変更を保存」ボタンをクリック！

これで、最低限の設定は完了です。

使い方

設定が完了すると、記事の投稿画面の上部に Google Photo のアイコンが表示されます。

Google Photoアイコンをクリックすると、連携したGoogle Photoのアルバム一覧が表示されます。

アルバムをクリックすると写真がサムネイル表示されます。

記事に挿入したい画像を選択して「Insert」ボタンをクリックすれば、記事に Google Photo の写真へのリンクが挿入されます。

その他の設定

Photo Express for Google のSettingsの画面から、いろいろ設定することができます。
全部を試したわけではありませんので、簡単に紹介します。

Sorting images in album

アルバム内の写真をソートする方法を指定できます。
日付やタイトル、ファイル名で並べ替えして表示させることができます。

Sorting Order

ソートする際に、昇順か降順を指定します。
「Ascending」が昇順、「Descending」が降順になります。

Single image thumbnail size

挿入した写真のサムネイルサイズを指定します。

Return HTML for images selected from the dialog instead of the peg-image shortcode

この設定を有効にすると、挿入した画像がhtmlコードで埋め込まれます。
有効にしていない場合は、プラグイン用のショートコードが埋め込まれます。
ショートコードの場合、記事作成中にどんな画像か表示されないので、私はチェックいれています。

その他

他にも、写真の配置方法やスタイルを指定したりできます。
一番下にある「Advertising」は、このプラグインの作者のページへのリンク表示の有効・無効の設定です。
便利に使わせてもらっているので、私は有効にしています。

まとめ

Googleフォトの写真を簡単に記事にそうにゅうすることができるプラグイン「Photo Express for Google」は、とても便利だと思います。
スマホで撮った写真を記事に使うことが多い方には、特におすすめだと思います。

気になる点は、ずっとアップデートされていないので、Google側の仕様変更で使えなくなった場合に、このプラグインが追随してくれるのか不明、というところでしょうか。
もし使えなくなった場合は、まあそのときに考えることにします。