イメージライブラリー

34573 ワード

googleappsscript webdev googledrive javascript テキストリンク

Googleのドライブでは、Appsのスクリプト、ブートストラップ、および小さなjQueryでは、検索とダウンロード機能を持つイメージライブラリのWebアプリケーションを開発することができます!始めましょう!

イメージライブラリー

我々が何を築こうとしているかの例が、ここにあります.ヘッダには検索フォームがあります.入力フィールドを使用して何かを検索します.すべてのフォルダーまたは特定のフォルダ内で検索するには、[選択]フィールドを使用します.検索結果は、ダウンロードリンクでグリッド内の画像が表示されます.

グーグルドライブ

のイメージライブラリと呼ばれるフォルダを作成して起動します.次に、各カテゴリのサブフォルダを作成します.たとえば、私はイラストと呼ばれるフォルダを作成しました.たぶん、あなたはアイコン、壁紙などの別の1つを持っています.例としてフォルダ内のいくつかの画像を追加します.

プロジェクト設定

訪問https://script.google.com/home 「新規プロジェクト」ボタンを選択します.プロジェクトのイメージライブラリのようなタイトルを与えます.コードで提供される既定の関数を削除できます.GS
プロジェクトにいくつかのファイルを追加しましょう.これは私たちが少しよくコードを整理するのに役立ちます.HTML、JavaScript、CSSを保存するファイルを作成します.ファイルの横にあるプラスアイコンを選択し、HTMLを選択します.これは追加されます.あなたがファイルを与えるどんな名前にでもHTML.次の3つのファイル名を作成します.

インデックス

アプリ.js

スタイル.CSS

私は、JavaScriptとCSSを使用してファイルを見て奇妙に見えます.HTMLが、心配しないでください!あなたは、アプリケーションで提供されるデフォルトのHTMLを削除することができます.jsHTMLとスタイル.CSSHTML .プロジェクトは次のようになります.

ブートストラップ設定

使いましょうBootstrap Webアプリケーションのレイアウトを構築するために.あなたのインデックスで.HTMLファイル、閉じたヘッドタグの直前にブートストラップスタイルシートを追加しましょう.

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

</head>

再び、あなたのインデックスで.HTMLファイル、終了タグの直前にjQueryとbootstrapのJavaScriptファイルを追加しましょう.

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

</body>

検索フォームで粘着性のヘッダーを作成しましょう.あなたのインデックスで.HTMLで、起動タグの直後に以下を追加します.

<body>

  <div class="navbar navbar-dark bg-dark sticky-top">
    <a class="navbar-brand">Image Library</a>
    <form id="search" class="form-inline">
      <input id="term" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <select id="folders" class="form-control">
        <option value="">Loading...</option>
      </select>
    </form>
  </div>

ここで検索結果が表示されるdivを作成しましょう.再び、あなたのインデックスで.HTMLファイルは、上記のコードの直後に次を追加します.

<div id="searchResults" class="container mt-4"></div>

アプリセットアップ

Webアプリケーションを表示するには、HTML出力を返すdoget関数を含める必要があります.を使いましょうHtmlService インデックスファイルのHTML出力を返す.あなたのコードで.GSファイルを追加します.

// Creates the html page for the web application.
function doGet(e) {
  var page = HtmlService.createTemplateFromFile("index").evaluate();

  page.setTitle("Image Library");

  page.addMetaTag('viewport', 'width=device-width, initial-scale=1, shrink-to-fit=no');

  return page;
}

我々はCSSとJavaScriptのための別々のファイルを作成しましたが、我々のインデックスにそれらを含める方法がありません.HTMLファイル.それを助けるための関数を作りましょう.
を使いましょうHtmlService もう一度、私たちが通るファイル名から出力を作成してください.あなたのコードで.GSファイルを追加します.

// Get other files within project to be used in web app such as CSS/Javascript.
function include(file) {
  return HtmlService.createHtmlOutputFromFile(file).getContent();
}

あなたのスタイルを含める.CSSファイル、インデックスに移動します.HTMLファイルを閉じ、先頭タグの直前に以下を追加します.

  <?!= include("style.css"); ?>
</head>

あなたのアプリを含むように.あなたのインデックスに行きます.HTMLファイルを閉じ、bodyタグの直前に以下を追加します.

  <?!= include("app.js"); ?>
</body>

初期展開

アプリケーションを表示するには、まず最初に配備する必要があります.心配しないでください、あなた自身を開始するには、隠しておくことができます.展開はまた、変更をテストするために使用できるURLを提供します.
「配備」ボタンの下に「新規展開」を選択します.説明フィールドで、初期配置のようなものを入力します.Webアプリケーションのセクションの下で、「実行」フィールドで、ユーザーとしてアプリケーションを実行するように選択します.アクセスフィールドがある人は自分だけを選択します.これは、アプリを制限するので、それを使用することができます.これは後でアプリケーションを誰かのアクセスを許可したいときに変更することができます.
アプリケーションが配備されたので、使用できるテスト配備URLがあります.それを見つけるには、配置ボタンをもう一度移動し、今度はテスト展開を選択します.WebアプリケーションのURLをコピーし、それをご覧ください.今すぐそれを行うことはありませんが、今あなたの変更をテストするには、このURLを使用することができます!

ドライブを取得する

ときにアプリケーションの負荷、我々の検索フォームで選択フィールドのみ1つの読み込みオプションを示しています.我々はそれが我々のライブラリ内の各サブフォルダのオプションを表示したい.
まず、イメージライブラリフォルダーのフォルダIDが必要です.Googleライブラリのイメージライブラリフォルダーに移動します.URLはドライブのように見えます.グーグル.そのフォルダをコピーします.
あなたのコードのトップで.gsファイル、mainfolderIDという変数を作成し、コピーした実際のフォルダIDに対して折り返します.

var mainFolderId = 'YOUR_FOLDER_ID';

では、getfolderという関数を作りましょう.これは、検索フォームの[選択]フィールドにフォルダー名を一覧表示するには、我々のアプリケーションによって呼び出されます.

// Get subfolder information for use in search select field.
function getFolders() {

}

Getfolder関数を追加し続けましょう.まず、メインフォルダと呼ばれる変数を作成します.getFolderById 内部の関数DriveApp クラス.

var mainFolder = DriveApp.getFolderById(mainFolderId);

次に、サブフォルダと呼ばれる変数を作成します.これは、getFolders 関数.

var subfolders = mainFolder.getFolders();

フォルダーと呼ばれる変数を作成します.

var folders = [];

すべてのサブフォルダをループして、そのIDと名前をつかんで、その情報をフォルダ配列にプッシュしましょう.

while (subfolders.hasNext()) {
  var folder = subfolders.next();
  var folderId = folder.getId();
  var folderName = folder.getName();

  folders.push({
    id: folderId,
    name: folderName
  });
}

最後に、フォルダの配列をアルファベット順に返しましょう.

return folders.sort(function(a, b) {
  if (a.name < b.name) {
    return -1;
  }

  if (a.name > b.name) {
    return 1;
  }

  return 0;
});

我々は現在、フォルダを検索フォームにフックする準備ができている.

検索Googleドライブフォルダ

我々は、アプリケーションの検索フォームで提供されるユーザーに基づいて、サブフォルダを検索する方法が必要です.フォルダIDと用語を引数として受け取る検索という関数を作りましょう.

// Search based on folder id and term provided.
function search(id, term) {

}

検索機能を追加し続けましょう.まず、メインフォルダと呼ばれる変数を作成します.getFolderById 内部の関数DriveApp クラス.

var mainFolder = DriveApp.getFolderById(mainFolderId);

次に、サブフォルダと呼ばれる変数を作成します.これは、getFolders 関数.

var subfolders = mainFolder.getFolders();

searchcriteriaという変数を作成します.これは、ユーザーが提供する用語に基づいてファイルを検索するために使用されます.

var searchCriteria = 'fullText contains "' + term + '"';

SearchFolderSriteriaと結果と呼ばれる変数を作成します.

var searchFoldersCriteria = [];
var results = [];

ユーザーがすべてのフォルダを検索することを決定する場合は、各フォルダ内で検索するクエリを構築する必要があります.我々はすべてのサブフォルダをループしなければならなくて、彼らのIDをつかんで、Searchfolderscriteria配列に情報をプッシュしなければなりません.この配列を文字列に変換します.
ユーザーが特定のフォルダを選択すると、そのフォルダ内で検索する必要があります.フォルダIDは既にユーザーによって提供されました.

if (id === 'ALL') {

  while (subfolders.hasNext()) {
    var folder = subfolders.next();
    var folderId = folder.getId();

    searchFoldersCriteria.push('"' + folderId + '" in parents');
  }

  searchFoldersCriteria = searchFoldersCriteria.join(' or ');

} else {

  searchFoldersCriteria = '"' + id + '" in parents';

}

検索クエリを次のように表示します.

'fullText contains "puppy" and ("id1" in parents or "id2" in parents or "id3" in parents')

ファイルと呼ばれる変数を作成します.その値は、searchFiles 関数は、検索クエリとしてSearchCriteriaおよびSearchFolderSritereriaを渡します.

var files = DriveApp.searchFiles(searchCriteria + ' and ' + '(' + searchFoldersCriteria + ')');

見つかったファイルをループして、idとnameをつかんで、結果の配列にプッシュしましょう.

while (files.hasNext()) {
  var file = files.next();
  var fileId = file.getId();
  var fileName = file.getName();

  results.push({
    id: fileId,
    name: fileName
  });
}

残っているのは結果配列を返すことです.

return results;

我々は現在、検索フォームにフックする準備ができている検索機能があります.

リストの選択

ときに、現在のフォルダの実際のリストを使用して検索フォームの[選択]フィールドに表示されます.
アプリの上に頭.jsHTMLファイルは、開始と終了スクリプトのタグを追加することでJQueryの準備機能と一緒に起動します.

<script>
  $(document).ready(function() {

  });
</script>

jQueryの準備機能の中でgoogle.script.run クラスとコールを呼び出します.GSファイル.成功した場合は、buildFolderOptionsという関数を呼び出します.

google.script.run.withSuccessHandler(buildFolderOptions).getFolders();

アプリでBuildFolderOptions機能を作成しましょう.jsHTML .これは、すべてのフォルダを検索するためのオプションを作成することから開始されます.そして、値がフォルダIDである、そして、テキストがフォルダ名である各々のサブフォルダのためにオプションで加えられます.我々は、選択したフィールドを我々が構築したHTMLに置き換えます.

// Run when getting folders was successful.
function buildFolderOptions(folders) {
  var html = '<option value="ALL">All</option>';

  for (var i = 0; i < folders.length; i++) {
    var folder = folders[i];
    html += '<option value="' + folder.id + '">' + folder.name + '</option>';
  }

  $('#folders').html(html);
}

検索フォーム提出

検索フォームを送信するときに呼び出される検索と呼ばれる関数を作成しましょう.アプリで.jsHTMLファイルを使用すると、以下のJQuery準備機能に追加します.

$('#search').on('submit', search);

今すぐアプリで検索機能を作成してみましょう.jsHTML .グラブ検索用語と選択したフォルダ.デフォルトフォームの提出を防ぐ.検索が起こっているユーザーにテキストを表示します.グーグルの使い方スクリプト.クラスを再度実行し、コード内の検索機能を呼び出します.フォルダのIDと用語をパスします.成功した場合は、DisplaySearchResultという関数を呼び出します.

// Run when the search form is submitted.
function search(e) {
  var term = $('#term').val().trim();
  var folderId = $('#folders').val();
  var searchResults = $('#searchResults');

  // Prevent default form submission from happening.
  e.preventDefault();

  if (term &amp;&amp; folderId) {
    // Display Searching text.
    searchResults.html('<p class="alert alert-info" role="alert">Searching...</p>');

    // Perform the search.
    google.script.run.withSuccessHandler(displaySearchResults).search(folderId, term);
  }
}

アプリでDisplaySearchResults機能を作成しましょう.jsHTML .これは、検索結果のHTML出力を作成し、画像とダウンロードリンクでカードのグリッドを構築する.見つかった結果がない場合はメッセージを表示します.

// Run when search was successful.
function displaySearchResults(results) {
  var searchResults = $('#searchResults');
  var html = '';

  if (results.length === 0) {

    html = '<p class="text-center">Sorry, no results found.</p>';

  } else {

    html += '<div class="row row-cols-1 row-cols-md-3">';

    for (var i = 0; i < results.length; i++) {
      var result = results[i];
      html += '<div class="col mb-4">';
      html += ' <div class="card h-100">';
      html += '  <div class="card-header text-center">' + result.name + '</div>';
      html += '  <div class="card-body"><img src ="https://drive.google.com/uc?&amp;id=' + result.id + '" class="card-img-top" /></div>';
      html += '  <div class="card-footer text-center"><a class="card-link" href="https://drive.google.com/uc?export=download&amp;id=' + result.id + '">Download</a></div>';
      html += ' </div>';
      html += '</div>';
    }

    html += '</div>';

  }

  searchResults.html(html);
}

最後に、あなたのスタイルで.CSSHTMLファイルは、グリッドの列から抜け出さないようにイメージにスタイルを追加しましょう.

<style>
  img { width: 100%; height: auto; }
</style>

あなたが現在それをしている場合、アプリのURLをリフレッシュし、アプリを試してみてください!

部分検索

あなたの検索のいくつかは結果を返さないことに気づいたかもしれません.例えば、スポンジボブというファイルがあります.PNGスポンジを探すなら何も見つからない.スポンジボブを捜さなければなりません.
追加の単語やフレーズを含む説明を提供することができます.これは、Googleのドライブでは、ファイルを右クリックしてビューの詳細を選択し、ファイルの説明を編集することができます.

当社のウェブサイトをご覧くださいhttps://nightwolf.devとFacebook上で私たちに従ってください！

Reference

この問題について(イメージライブラリー), 我々は、より多くの情報をここで見つけました https://dev.to/nightwolfdev/image-library-4gg9

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Jqueryダイナミックに画像のサムネイルを行う

【PaizaCloud】Ruby on Rails 環境構築