エヌロン面白いプラグインを発見
私はサーバーを圧迫しないようにするため、
ワードプレスにアップロードする画像は最小限にし、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 & Others
エヌロン名前長すぎ。
「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」というのが出てくるのでここから設定します。
上のタブから「GooglePhoto」を選択します。
この画面の1.と2.のアドレスを後でコピペで使用します。
そのページにもリンクがありますが、「API Manager」へ行き、「Photos Library API」の設定します。
慣れないとこれが結構面倒です…。
Photos Library APIの導入
先ほどの「API Manager」へ行きます。
新しいプロジェクトを作成。
■新しいプロジェクトの作成画面に行きます。
■プロジェクト名に適当な名前を入力。
「PhotoPlugin」としました。
■「作成」ボタンを押してプロジェクト作成完了。
認証情報
■「API認証情報」→「OAuth同意画面」へ。
■アプリケーション名
何でも。「PhotoPlugin」とか。
■サポートメール はgoogleアカウントのメールアドレスであることを確認。
■承認済みドメイン
サイトのドメイン、このブログであれば、000363.xyzのみ 貼り付けます。
「https://」 と、ドメインの後ろは入力しません。
複数のサイトで使う場合、ここで予めドメインを登録しておきます。
ここまでは複数のサイトで共通で大丈夫です。
後で追加もできます。
認証情報を作成
ここからはサイト別に設定します。
■「API認証情報」→「認証情報を作成」→「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を開くとエラーメッセージが出て進まなくなりました。
読み込みエラー
/apis/dashboard?project=adept-primacy-239715&authuser=2 の読み込み中にエラーが発生しました。もう一度お試しください。
以前はならなかったのですが、このようなメッセージが出たためなかなか進めなくなりました。
キャッシュを削除してやり直してもダメでした。
PCに複数のgoogleアカウントでログインしてるとダメなのかもしれません。
シークレットモードで一つのアカウントでログインしたところ復旧しました。
全てログアウトしてから一つのアカウントだけログインし直しても大丈夫だと思います。
「Photonic Gallery」の設定
最初のワードプレスのプラグイン設定に戻ります。
■①「クライアント ID」 ②に「クライアント シークレット」を入力
Photos Library APIで取得した①クライアント IDと②クライアント シークレットそれぞれ入力します。
③はまだです。
①と②を入力したら一度設定を「保存」します。
この保存をしないと③が出てこないため、先に進めません。
これが分からなくて手こずりました。
■プラグイン設定の上から3つ目「Authentication」に行きます。
先ほどの①と②を入力後に一度「保存」をしないと ↓ の画面になりません。
■googlePhotosの「Step 1: Authenticate」をクリック。
■この後警告が出ますが、公式サイトの解説ページでも説明されている通り、「詳細」→（安全ではないページ）に移動と進みます。
■利用するgoogleアカウントを選択し、「許可」へと進みます。
■プラグインの設定画面「Authentication」へ戻り、「Step 2: Obtain Token」をクリック。
■トークンが表示されるのでコピーし、「Save Token」をクリックします。
■最初の設定画面で、③の所にトークンを貼り付けて、設定を保存します。
これでワードプレスとグーグルフォトの接続が完了です。
ここまでで結構疲れますよね？
これでワードプレスの記事投稿画面から、スライドショーの挿入ができるようになります。
英語ですが何か困ったら公式サイトの設定方法紹介ページへどうぞ。
スライドショーなどの画像の挿入方法
タイル状に一覧表示させたり、いろんな貼り付け方ができます。
プラグインの基本設定は必要ないですが、画像の挿入時にちょっとした設定を変更する必要があるので紹介します。
挿入の手順
■記事作成画面の上に出来ているボタン「Photonic Gallery」をクリックします。
■「GooglePhotos」を選択
■「Photos from an Album」を選択
「Multiple Photos」 ではアルバムではなく日付指定で画像が一覧表示（スライドなど）できます。
「Multiple Albums」では全てのアルバムのトップ画像を一覧表示（スライドなど）できます。
■アルバムを選択
マウスのカーソルを合わせるとアルバムタイトルと画像枚数が表示されます。
検索機能があるので、検索窓にアルバムタイトルを入力すると簡単です。
■好みの挿入方法を選択
スライドショーや、サムネイル表示など、6種類の表示方法から選択。
スライドショーの場合、設定を変更する
■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="『ヴィレッジヴァンガード ダイナー』イオンレイクタウン"
サムネイル付きのスライドショーデモ サンプル
ページを軽くするために画像を縮小してます。
時間で自動でスライドしますが、PCの場合はマウスでドラッグするようにするとスライドできます。
もちろん下のサムネイル画像をクリックしても切り替わります。
このアルバムは縦撮りと横撮りが混在してますが、全て横撮りで統一した方が奇麗に表示されます。
ボタン付きのスライドショーデモ サンプル
円形のサムネイル表示 サンプル
四角のサムネイルにも出来ます。
タップすると拡大表示してスライドショーのように見ることが出来ますが、
元の画面に戻る方法が分かりづらいです。
ブラウザの「戻るボタン」を使用すると前のページに戻ってしまいます。
元の画面に戻るには、スマホの場合上下方向どちらかにスライドして下さい。
PCの場合は右上の「×」マークをクリックで戻りますが、反応が悪いです。
クリックすると拡大表示しますが、元々の画像を小さくしてます。
エヌロン終わり
