【広告 No.01】

2016年6月24日金曜日

【GAS】Googleドライブ内の画像を読み込みスライドショーを作成(HTML Service)

【はじめに】

Googleドライブ内の画像を読み込みスライドショーを作成する方法についてのメモです。

【実現したいこと】

以前に「【Google】Googleドライブにある画像を画像として表示させるためのパーマリンクを生成する方法」について投稿しましたが、今回はその応用例として、HTML ServiceによるWEBアプリケーション公開まで行います。


スタンドアロンGAS 

スタンドアロン型のGASについての説明は省きますが、HTML Serviceでは、基本的にスタンドアロン型のGASによるプロジェクト構築となります。まずはロジックの抽出です。ざっくりと以下のようになります。
  1. マイドライブからフォルダを指定して画像のリストを取得
  2. 画像のパーマネントリンクを生成、配列化
  3. 利用するスライドショーフレームワークに合わせて整形

jQueryに依存しないスライドショースクリプト Swiper

利用するスライドショーフレームワークの設定ですが、動作負荷を考慮し、できるだけ軽くしたいと思います。そこで、jQueryに依存しないスライドショースクリプトを探したところ、Swiperというレスポンシブ対応のものがありました。ちなみにMITライセンスです。

利用方法はシンプルで、HTMLはスライドショー表示部分のブロック、ラッパー用のブロック、スライドのリストという構造。ページネーションやナビボタンを利用する場合は別途追加するだけです。Javascript部分はよくあるオプションを設定してインスタンスを生成するパターン。

なお、今回はCDNにてCSSとSwiper本体を読み込んでいますが、プロジェクト内のファイルとしてインクルードするほうがより高速に処理します。
(参考:HTML Service: Best Practices

1.マイドライブからフォルダを指定して画像のリストを取得

詳細なロジックとしては以下の通りです。
  1. フォルダ名の指定
  2. 指定フォルダの存在チェック(なければfalseを返す)
  3. 指定フォルダからFileを取得(なければfalseを返す)
  4. FileのIDを取得、配列化
4.の段階でスライド用のリストを整形してもよいのですが、実際にはクラス仕立てで構築しているため、整形は別処理としています。

2. 画像のパーマネントリンクを生成、配列化

画像のID配列をループして、以前の投稿を参考にパーマネントリンクを生成し、配列に格納しておきます。先述の通り、クラス仕立てということもありますが、スライドショーフレームワークの変更に柔軟に対応させる目的もあります。

3. 利用するスライドショーフレームワークに合わせて整形

Swiperでは、div.swiper-slide の部分に img 要素を入れ込むことになるので、先に生成したパーマネントリンク配列からHTMLを整形します。

あとはCSSの設定とインスタンスの設定を行い、swiperオブジェクトを生成します。
※設定の詳細やサンプル等は公式サイトを参照ください。

4. WEBアプリケーションとして公開

スクリプトエディタのメニューから、公開→ウェブアプリケーションとして導入 と進みます。



  • プロジェクトのバージョン:新規作成(最新版にするため)
  • 次のユーザーとしてアプリケーションを実行:自分
  • アプリケーションにアクセスできるユーザー:全員(一般公開するため)
最後にスライドショーで公開する画像を含むフォルダの共有設定を忘れないようにしましょう。(「リンクを知っている人全員が閲覧可」でいいでしょう。)

5. サンプル公開中

こちらにてスライドショーアプリのサンプルを公開しています。

  • デバイスのサイズに合わせて全画面表示しています。
  • エンドレスで自動再生しますが、画像クリックでストップします。
  • ナビやページネーションは省いていますが、スワイプで画像が入れ替わります。
    (最初と最後の画像以外)

なお、HTML Serviceの仕様上、閲覧者側では画面上部にGoogleからの注意事項「This application was created by another user, not by Google.」が表示されます。これは削除できませんので、そういうものだと思ってください。

以上「Googleドライブ内の画像を読み込みスライドショーを作成する方法」のメモでした。

【参考サイト】