Googleスプレッドシート│ドライブ内の画像をサムネ付きギャラリー表示する方法

Googleドライブの画像を一覧で見たいと思い作ってみました。

絞り込み検索もできます。

メリットは以下の通り

• Googleのサービスを利用しているので無料
• Googleユーザーしか閲覧できないのでセキュア
• GASで作成するので、カスタマイズ制が高い&動的に生成
• スプレッドシートで管理するので編集しやすい
• ドライブの画像を利用するので、簡単&容量も十分

Googleスプレッドシートでドライブ内の画像をサムネ付きギャラリー表示する方法の機能紹介

機能紹介です。

どんな機能なのかわかると思います。

Googleドライブ

フォルダを作成して、表示したい画像を入れておきます。

スプレッドシートにデータを記載

スプレッドシートでデータベースを作成しています。

IDや名前、絞り込み用のタグやタイプなどの情報も入れておきます。

※画像のパスの取得は別途、専用機能があります。

Webアプリの表示

GASでコードを書いて、スプレッドシートの情報を元にWebアプリでギャラリー表示をします。

ホバーするとアイテムの情報が表示

絞り込み条件をいれて検索ボタンを押すと絞り込みされます。

Googleスプレッドシートでドライブ内の画像をサムネ付きギャラリー表示する方法の実装方法

スプレッドシートの機能拡張のメニューを開き、Apps Scriptメニューからエディターを起動しましょう。

コードは以下の5つのファイルで構成されています。

main.gs	機能実装
index.html	HTMLの記述
css.html	CSSの記述
js.html	JavaScriptの記述
plugin.html	ライブラリの参照

以下、実装方法です（有料コンテンツ）

※あくまでベースサンプルで、ここから改造して目的のギャラリーを作ることを意図しています。