エヌロンエヌロン

面白いプラグインを発見

私はサーバーを圧迫しないようにするため

ワードプレスにアップロードする画像は最小限にし、googleフォトに保管した画像を貼り付けてます

以前はSNSのgoogle+に投稿した画像をコピーして記事に貼り付けていたんですが、google+がサービス終了してしまいますね。

その時の画像がまだそのままなのでいずれ表示されなくなってしまいます…。

貼り直せば良いのですが、まだ放置状態。

ワードプレスにアップロードしている画像をスライドショーさせるプラグインはいくつかあり、使っている人も時々見かけます。

ワードプレスにアップロードしなくてもgoogleフォトで作成したアルバムをそのままスライドショーで表示できる面白いプラグインがあったので紹介します。

スライドショー以外にもタイル状に表示したり、円形のサムネイルで表示したりいろいろできるので、面白いサイトが作れそうです。

スポンサーリンク

プラグイン「Photonic Gallery & Lightbox for Flickr, SmugMug, Google Photos, Zenfolio and Instagram」の使い方 設定方法

「Photonic Gallery & Lightbox for Flickr, SmugMug, Google Photos, Zenfolio and Instagram」

Photonic Gallery & Lightbox for Flickr, SmugMug, Google Photos, Zenfolio and Instagram

エヌロンエヌロン

名前長すぎ。

「Photonic Gallery」で良し

 

googleフォトの画像を1枚ずつワードプレスに挿入する超便利プラグイン、「Photo Express for Google」がありました。

このプラグイン「Photo Express for Google」を使っていた人なら設定はほぼ一緒なのですぐできます。

googleの仕様変更で「PicasaウェブアルバムデータAPI」が無効になり、「Google Photos API」へ以降したためにこのプラグインは現在使用できません

正式な発表がありました。

APIとはgoogleの提供するサービスに対して認証することで、他のアプリケーションから呼び出せる仕組みの物です。

 

この記事で紹介するプラグイン「Photonic Gallery」は「Google Photos API」に対応したもので、googleフォトの画像を呼び出せます。

もちろんプラグインのアップデートが停止してしまうリスクはありますけど。

googleが倒産する可能性だってゼロではないし…。

プラグインをインストール

googleのAPIの設定は「Photo Express for Google」とほぼ一緒です。

プラグインをインストールすると左に「photonic」というのが出てくるのでここから設定します。

potnicの設定
potnicの設定

上のタブから「GooglePhoto」を選択します。

googlephotoを選択
GooglePhotoを選択

この画面の1.と2.のアドレスを後でコピペで使用します。

そのページにもリンクがありますが、「API Manager」へ行き、「Photos Library API」の設定します。

慣れないとこれが結構面倒です…。

Photos Library APIの導入

先ほどの「API Manager」へ行きます。

新しいプロジェクトを作成。

プロジェクトの作成
プロジェクトの作成

■新しいプロジェクトの作成画面に行きます。

■プロジェクト名に適当な名前を入力。

プロジェクト名の入力
プロジェクト名の入力

「PhotoPlugin」としました。

■「作成」ボタンを押してプロジェクト作成完了。

認証情報

■「API認証情報」→「OAuth同意画面」へ。

認証情報入力
認証情報入力

■アプリケーション名

何でも。「PhotoPlugin」とか。

■サポートメール はgoogleアカウントのメールアドレスであることを確認。

■承認済みドメイン

サイトのドメイン、このブログであれば、000363.xyzのみ 貼り付けます。

「https://」 と、ドメインの後ろは入力しません

複数のサイトで使う場合、ここで予めドメインを登録しておきます。

ここまでは複数のサイトで共通で大丈夫です

後で追加もできます。

認証情報を作成

ここからはサイト別に設定します。

■「API認証情報」→「認証情報を作成」→「OAuth クライアントID」

「OAuth クライアントID」作成
「OAuth クライアントID」作成

■「ウェブアプリケーション」を選択

■名前は何でも可

■承認済みの JavaScript 生成元

ここで、後でコピペで使用すると書いた1.を貼り付けます。

が、ドメイン後の / 以降は入力しません。

このブログの場合、「https://000363.xyz 」のみ貼り付けます。

■承認済みのリダイレクト URI

後で使用すると書いた2.を貼り付け、保存します。

 

①「クライアント ID」

②「クライアント シークレット」

この2つが作成されるので、これを後でプラグインの設定画面に入力します

これは後からいつでも確認できます。

APIライブラリで認証

ライブラリで検索
ライブラリへ行き検索する

 

「ライブラリ」へ行くと検索窓がでるので 「photo」 と入力します。

pho だけでも大丈夫ですが。

■「Photos Library API」を選択

いくつか出てきますが、「Photos Library API」を選択し、「有効」に設定します。

これで「Photos Library API」の設定はほぼ完了です。

APIの読み込みエラーでうまく行かない時

API Managerを開くとエラーメッセージが出て進まなくなりました。

読み込みエラー

APIエラー
APIエラー
/apis/dashboard?project=adept-primacy-239715&authuser=2 の読み込み中にエラーが発生しました。もう一度お試しください。

 

以前はならなかったのですが、このようなメッセージが出たためなかなか進めなくなりました。

キャッシュを削除してやり直してもダメでした。

PCに複数のgoogleアカウントでログインしてるとダメなのかもしれません。

シークレットモードで一つのアカウントでログインしたところ復旧しました。

全てログアウトしてから一つのアカウントだけログインし直しても大丈夫だと思います。

「Photonic Gallery」の設定

最初のワードプレスのプラグイン設定に戻ります。

クライアント IDとクライアント シークレットの入力
クライアント IDとクライアント シークレットの入力

■①「クライアント ID」 ②に「クライアント シークレット」を入力

Photos Library APIで取得した①クライアント IDと②クライアント シークレットそれぞれ入力します。

③はまだです。

①と②を入力したら一度設定を「保存」します

この保存をしないと③が出てこないため、先に進めません。

これが分からなくて手こずりました。

■プラグイン設定の上から3つ目「Authentication」に行きます。

potnicの設定

先ほどの①と②を入力後に一度「保存」をしないと ↓ の画面になりません。

Photonic の設定

■googlePhotosの「Step 1: Authenticate」をクリック。

 

■この後警告が出ますが、公式サイトの解説ページでも説明されている通り、「詳細」→(安全ではないページ)に移動と進みます

認証ー詳細へ
認証「詳細」へ

 

安全ではないページに移動

 

■利用するgoogleアカウントを選択し、「許可」へと進みます。

■プラグインの設定画面「Authentication」へ戻り、「Step 2: Obtain Token」をクリック。

■トークンが表示されるのでコピーし、「Save Token」をクリックします。

トークンが表示される
トークンが表示される

■最初の設定画面で、③の所にトークンを貼り付けて、設定を保存します。

クライアント IDとクライアント シークレットの入力

これでワードプレスとグーグルフォトの接続が完了です。

ここまでで結構疲れますよね?

これでワードプレスの記事投稿画面から、スライドショーの挿入ができるようになります。

英語ですが何か困ったら公式サイトの設定方法紹介ページへどうぞ。

スライドショーなどの画像の挿入方法

タイル状に一覧表示させたり、いろんな貼り付け方ができます。

プラグインの基本設定は必要ないですが、画像の挿入時にちょっとした設定を変更する必要があるので紹介します。

スポンサーリンク

挿入の手順

■記事作成画面の上に出来ているボタン「Photonic Gallery」をクリックします。

「GooglePhotos」を選択

画像の挿入ボタン
画像の挿入ボタン

「Photos from an Album」を選択

2段目を選択
2段目を選択

「Multiple Photos」 ではアルバムではなく日付指定で画像が一覧表示(スライドなど)できます。

「Multiple Albums」では全てのアルバムのトップ画像を一覧表示(スライドなど)できます。

■アルバムを選択

マウスのカーソルを合わせるとアルバムタイトルと画像枚数が表示されます

検索機能があるので、検索窓にアルバムタイトルを入力すると簡単です。

■好みの挿入方法を選択

スライドショーや、サムネイル表示など、6種類の表示方法から選択。

スライドショーの場合、設定を変更する

Slideshow Controlsと

Slideshow Controls

「Show」

Slideshow Effects

「Slide」を選択。(重要)

この選択をしないとメイン画像の下のサムネイルがおかしな位置、かなり下の方に表示されてしまいました。

こんな感じになります。 ↓

おかしな表示
おかしな表示

Time between slides in ms

「99999」

私の環境の場合ですが、PC表示の時だけスライドするタイミングで画面全体がプルプルとぶれる症状がでました。

なので自動でスライドするタイミングを遅らせ、手動のみでスライドするようにしました。

スライドする時はマウスでドラックするかサムネイルをクリックします。

image size

小さいと画質が悪くなるので「1600」のままか、「1000」くらいにしてます。

場合により「500」とかにしてますが好みですね。

Pause upon hover?

「Yes」

マウスのカーソルを合わせるとスライドが停止します。

 

それ以外は写真のみを表示するか動画も含めるかなど。

ちょっとした不具合と対策

普通に「メディア追加」ボタンから挿入した画像はクリックすると画像の選択ができますよね。

画像を選択したところ
画像を選択したところ

選択後に鉛筆マークをクリックすると、キャプションや代替えテキストの入力ができたり、ドラッグすると画像の表示サイズを変更できます。

これができくなって困ったのですが、

右クリック」で選択出来ました。

代替えテキストも入る

グーグルフォトで画像に「情報」を入力しておくと、それがalt属性とtitleに入ります。

全ての画像に対して読み込まれます。

 alt="ぶつをのうどんの外観" title="ぶつをのうどんの外観"

サムネイル付きのスライドショーデモ サンプル

  • ぶつをのうどんの外観
  • ぶつをのうどんのメニュー1
  • ぶつをのうどんのメニュー2
  • ぶつをのうどんランチ
  • ぶっかけうどん
  • スープ
  • コーヒーゼリー

時間で自動でスライドしますが、PCの場合はマウスでドラッグするようにするとスライドできます。

もちろん下のサムネイル画像をクリックしても切り替わります。

ボタン付きのスライドショーデモ サンプル

  • ぶつをのうどんの外観
  • ぶつをのうどんのメニュー1
  • ぶつをのうどんのメニュー2
  • ぶつをのうどんランチ
  • ぶっかけうどん
  • スープ
  • コーヒーゼリー

円形のサムネイル表示 サンプル

クリックすると拡大表示します。