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 | ライブラリの参照 |
以下、実装方法です（有料コンテンツ）
※あくまでベースサンプルで、ここから改造して目的のギャラリーを作ることを意図しています。
