背景画像の透過

背景を切り抜きたい画像を用意する。

アップロードする画像は、切り抜きの対象がはっきりとわかるものにしましょう。対象と背景の境界線が曖昧なものや、対象が複数あるものは避けた方が良いでしょう。
今回は以下の画像(無料の素材)を使って解説します。

Remove.bgにアクセスする(https://www.remove.bg/ja)

画面が表示されますので、「画像アップロード」をクリックします。

画像をアップロードする

パソコンから背景を消したい画像を選択してクリックします。すると読み込みが開始され、背景画像が透過された画像ができあがります。
留意:
無料で使えるのは低画質バージョンとなります。元は1920×1280だった画像が612×408と小さくなっていますので、ご注意下さい。そこまで高解像度を必要としないプロフィール写真や、ブログのアイキャッチ画像などを作る時は重宝します。

背景が透過された画像が出来上がります。

長押しで、元画像と比較できます。

あとは、ダウンロードするだけです。
注意:
HD画像でダウンロードする場合は、「クレジット」(有料)というものが必要となります。

切り抜かれた画像をダウンロードする

背景画像の編集

背景の追加

「背景を追加」をクリックすると、「写真」、「色」、「ぼかす」というファンクションが表示され、自分の好みの背景画像をアップロードすることができます。

背景画像を選択してみます。

別の背景画像を選択してみます。

消去/復元

「消去/復元」では、背景の透過を追加したり、元に戻したりできます。

削除

ノートパソコンを消してみます。「削除」を選択するとブラシが表示されますので、ブラシを使って消したい箇所を塗りつぶします。

復元

復元を押すと、画像が復元されます。

ブラシで復元範囲を塗ると、元画像が復元します。

「社員ログイン情報」ファイルのスプレッドシートの作り方は、以下のブログを参照下さい。

【完全解説】Googleスプレッドシートの使い方(交通費精算書の作成)

Googleスプレッドシートとは、Google社が無料で提供している「表計算ソフト」です。本記事では、Googleスプレッドシートの主な特徴、機能、基本的な使い方などを実務で運用しているフォームを作成しながらご紹介します。使い方を知るには実務で使ってみるのが一番です。ぜひご参考にしてみてください。

gungii.com

2024.06.08

GAS(Google Apps Script)については、以下のブログを参照下さい。

GoogleAppsScriptの始め方(基本的な使い方)

本記事では、「GASを覚えたいけど、どこから始めたら良いのかわからない」方を対象に、GASを利用するに当たって理解しておくべきポイントや基本的なスプレッドシートの扱い方、スクリプト(プログラム)作成方法をでできるだけ、詳細に紹介しています。

gungii.com

2024.06.08

gas ログイン認証の仕様

ログイン画面

アプリを起動してログイン画面から、emailアドレスとパスワードを入力します。

emailとパスワードが一致した場合

入力されたemailアドレスとパスワードで、スプレッドシート:社員ログイン情報に記載されているemailアドレスとパスワードと比較して一致した場合は、以下の様に表示します。

emailとパスワードが不一致の場合

emailアドレスとパスワードが一致しなかった場合は、以下のように表示して、「ログイン画面に戻る」をクリックすると、「ログイン画面」に戻ります。

スクリプトの作成に必要なもの

スプレッドシート(社員ログイン情報)

予め、以下のスプレッドシートを用意します。ログインの為のホワイトリストとなります。

作成するGASスクリプトとHTML

コード.gs

doGet関数、doPost関数、ninsyou関数を作成します。

login.html

emailアドレスとパスワードを入力するログイン画面を作成します。

index.html

emailとパスワードが一致した場合に表示する画面を作成します。

error.html

emailとパスワードが不一致の場合に表示する画面を作成します。

gas ログイン認証のスクリプトの作成

doGet関数の実装

まずはスプレッドシートを操作する為に、スプレッドシートのオブジェクトを取得します。

ここでは次の5つの処理を行います。

htmlファイルを生成

Webブラウザで表示するにはhtmlファイルが必要で、生成処理もdoGetで行います。

const htmlOutput = HtmlService.createTemplateFromFile(“login”);

htmlのファイル名は「login.html」とすることにします。この場合は文字列”login”を、HtmlServiceのcreateTemplateFromFileというメソッドに指定します。

最新のデプロイURLの反映

login.htmlのform actionにURLを貼り付けるとデプロイの度に、その時点でのデプロイURLに変化してしまいます。そこでこれを解決するために、デプロイURLを変数化してformタグに反映する必要があります。次の1行を追加します。

htmlOutput.deployURL = ScriptApp.getService().getUrl();

そして、login.htmlのactionは、以下のようにします。

HtmlOutputオブジェクトへの変換

HtmlServiceオブジェクトのメソッドであるcreateTemplateFromFileは、指定のhtmlファイルからHtmlTemplateオブジェクトを生成するメソッドです。そこでhtmlOutput.evaluate()で、HtmlTemplateオブジェクトをevaluate(評価)することでHtmlOutputという形式のオブジェクトに変換しています。変換されたHtmlOutputオブジェクトはブラウザで表示ができる状態となります。
留意:
evaluate()とはHtmlTemplateオブジェクトをHtmlOutputオブジェクトに変換するメソッドです。HtmlOutputオブジェクトに変換することでWebページを表示できるようになります。

タイトルの設定

通常ブラウザで開いたWebページのタブには、そのページのアイコン(ファビコン)と、タイトルが表示されますが、GASで作ったページの場合は、Apps ScriptのアイコンとURLがそのまま表示されます。そこでhtmlOutput.setTitle(“ログイン画面”)でタイトルを設定します。

スマホ対応

Webページをスマホ対応する為に、headタグ内にviewportの設定をmetaタグで指定します。

HtmlOutputオブジェクト.addMetaTag(name属性の値, content属性の値)

htmlOutput.addMetaTag(‘viewport’, ‘width=device-width, initial-scale=1’);

width=device-width：表示領域の幅を端末画面の幅に合わせる
initial-scale=1：初期のズームの倍率を1、つまり拡縮なしに設定しておく

doPost関数の実装

入力されたemailアドレスと、パスワードの取得

const email = e.parameters.email.toString();
const password = e.parameters.password.toString();

doGetはデプロイしたURLにアクセスしたときに(GETリクエストした時に)実行され、doPostはフォームの送信ボタンが押されたときに(POSTリクエストした時に)実行されます。

ninsyou関数の呼び出しと、チェック結果の取得

const check = ninsyou(email,password);

ninsyou関数を呼び出し、チェック結果を変数checkに格納します。

チェック結果による画面の切り替え

formの送信ボタンが押下されて、チェック結果によりindex.htmlかerror.htmlを表示します。

if ( check === true ) {
　emailをindex.html(スクリプトレット)へ送り、最初の画面(index.html)を表示します。
} else {
　エラー画面(error.html)を表示します。
}

ninsyou関数の実装

doPost関数から呼び出されるninsyou関数を実装します。
スプレッドシート:社員ログイン情報と、emailとパスワードが一致するかをチェックして、一致していれば、trueを返し、不一致であればfalseを返します。

「社員ログイン情報」のシートの取得

スプレッドシートの「社員ログイン情報」ファイルの該当シート(シート1)を取得します。

const sheets = SpreadsheetApp.openByID(“ID”);
const sheet = sheets.getSheetByName(“シート1”);

シート内のセルの取得

取得する範囲の開始セルを指定して、そこから何行分、何列分取り出すかを指定します。

const ninsyou_email = sheet.getRange(2,3,3,1).getValues();
const ninsyou_pass = sheet.getRange(2,4,3,1).getValues();

例えば、emailの場合は、開始セルが2行目の3列で、そこから3行分、1列分を取り出しています。つまり、info@gungii.com、hello@kaithuburi.net、info@gungii.siteの3つのemailアドレスを取得しています。

[ 最終行を自動で判別して取得する。]
最終行を自動で取得して、次のように書き換えることもできます。

const ninsyou_email = sheet.getRange(2,3,sheet.getLastRow(),1).getValues();
const ninsyou_pass = sheet.getRange(2,4,sheet.getLastRow(),1).getValues();

email、パスワードのチェック

ninsyou_emailの要素数(ここでは3つ)だけ繰り返します。つまり、emailアドレスが3つありますので3回繰り返し、変数iを0、1、2と更新します。for inではiのところに配列のindexが返ってきます。例えば、入力されたemailアドレスがinfo@gungii.siteで、パスワードがpas54321の場合、変数iが2の時に、ninsyou_email[2]とemail(入力されたemailアドレス)且つ、ninsyou_pass[2]とpassword(入力されたパスワード) が一致しますので、hanteiにtrueを代入してreturnで戻ります。
留意:
for in文はオブジェクト(連想配列)のデータからキー要素を順不同で取得して、繰り返し処理を実行します。定義された順番にオブジェクトのキーが取り出されるかは保証されていませんので、配列のデータ処理には適していません。このケースの場合配列は関係なくtrueかfalseかのみですので、問題ありませんが配列が必要な場合は、for ofを使うことが必要です。
ninsyou_email = sheet.getRange(2,3,3,1).getValues();には、次のような二次元配列となっています。

gas ログイン認証のHTMLの作成

login.htmlの作成

CSSとJavascripのCDNを挿入

Bootstrapより、CSSとJavascripのCDN(コンテンツデリバリーネットワーク)を挿入します。CSSは、headの適当な場所に挿入してよいですが、Javascriptは、bodyの最後に挿入して下さい。

formの編集

Bootstrapから最も近いformを選択して、htmlを編集しています。

index.htmlの作成

Bootstrapより、CSSとJavascripのCDN(コンテンツデリバリーネットワーク)を挿入します。CSSは、headの適当な場所に挿入してよいですが、Javascriptは、bodyの最後に挿入して下さい。
注意:login.htmlと同様、index.htmlにもCSSとJavascriptのCDNを挿入します。

error.htmlの作成

CSSとJavascripのCDNを挿入

Bootstrapより、CSSとJavascripのCDN(コンテンツデリバリーネットワーク)を挿入します。CSSは、headの適当な場所に挿入してよいですが、Javascriptは、bodyの最後に挿入して下さい。

「ログイン画面」に戻る

「ログイン画面に戻る」をクリックすると、ログイン画面(初期画面)に戻るようにします。

error.htmlの修正

次の1行を追加します。

コード.gsの修正

次の1行を追加します。

index.htmlの方も追加していますが、次の画面(例えば、社員情報の表示や雇用契約書の表示etc)が決まっていませんので、現状は使っていません。

スクリプトレットの解説

スクリプトレットとは

GASでは「スクリプトレットタグ」を使うことで”gsコードからHTMLに変数を渡したり、”HTML内にgsコードを埋め込んだ”りすることができます。HTML内で、（スクリプトレットタグ）で囲まれた部分はgsコードとして実行することができます。GASにおけるスクリプトレットは３種類あり、やりたいことによって使い分けます。

スクリプトレットは、doPost関数内のevaluateメソッドによって実行されます。つまり、サーバーからHTTPレスポンスが送出される直前のタイミングで実行され、結果のHTML(今回の例ではoption要素)が送信されます。GASのスクリプトが実行されるのはあくまでサーバー側となります。

スクリプトレットの使い方

上記の例では、doGet関数内でHtmlService.createTemplateFromFileメソッドを使用してHTMLファイルを読み込んでいます。このHTMLファイル内にスクリプトレットを使用することができます。template変数にyoukenプロパティを追加して、”GASを学ぼう”を代入しています。そしてreturn文でtemplate.evaluateメソッドを呼び出して、評価結果を返しています。この評価結果がクライアントに送信されるHTMLページとなります。

function doGet() {
let template = HtmlService.createTemplateFromFile(“index”);
template.youken = “GASを学ぼう”;
return template.evaluate().setTitle(template.youken);
}

HTMLファイル内では、次のようにスクリプトレットを使用することができます。

template.(HTML側で定義されている変数名) = (gsコード側で代入したい変数名)

実際の使い方

function doPost(e) {
　　　　・
template = HtmlService.createTemplateFromFile(“index”);
template.namae = email;
return template.evaluate();
　　　　・
}

上記の例では、doPost関数内でHtmlService.createTemplateFromFileメソッドを使用してHTMLファイルを読み込んでいます。このHTMLファイル内にスクリプトレットを使用することができます。template変数にnamaeプロパティを追加して、emailを代入しています。そしてreturn文でtemplate.evaluateメソッドを呼び出して、評価結果を返しています。この評価結果がクライアントに送信されるHTMLページとなります。

web公開の流れ

1. ユーザーがGASアプリのURLをクリックすると、ブラウザがこれを解析してGoogleクラウドサーバーに「HTMLを下さい」というGETリクエストを送信します。
2. GASはブラウザからのリクエストを受け取るとルール(シンプルトリガー)に従い「doGet関数」を実行します。Spreadsheetから必要なデータを読み込む等、送り返すWebページを作るための準備をします。
3. doGet()の最後にHTML文書をreturnすることで、それがブラウザへのレスポンスとして送られます。(HtmlOutputオブジェクトをdoGet関数でreturnする)
4. ブラウザは、レスポンスとして受け取ったHTMLを解析(レンダリング)します。
5. ユーザーは、Webページが表示されたことを確認します。

[ getメソッドとpostメソッド ]

Webアプリでは、クライアント側がHTTPリクエストを送り、サーバー側がHTTPレスポンスを返すという流れで通信します。HTTPリクエストには主なものとしてGETメソッドとPOSTメソッドがあります。GETメソッドは、指定したURLのページをリクエストする際にURLのあとにデータを付加して送信します。例えばGoogle等で検索すると、URLに検索語句などのデータが含まれています。これは検索キーワードをGETメソッドで送っているためです。

POSTメソッドは、投稿専用のHTTPリクエストでGETメソッドに比べて大容量のデータを送信できます。そしてデータ送信にURLを使わないので閲覧履歴などから送信内容を見られることはありません。用途としてデータを取得する場合にはGET、送る場合にはPOSTといった感じで使い分けをすると良いでしょう。

[ GASのdoGet関数とdoPost関数 ]

GASでは、GETメソッドに対応するdoGet関数、POSTメソッドに対応するdoPost関数を定義し、応答データはHtmlOutputオブジェクトを戻り値にします。この戻り値がHTTPレスポンスとして、サーバーからクライアントへ送出されます。doGet関数もdoPost関数もシンプルトリガーの1種でGASのWebアプリのURLにブラウザからアクセスがあった時に実行されます。

GASでWebアプリを公開する方法

それでは、簡単なWebアプリケーションを作成、実行してみます。まず、スクリプトエディターを開きます。

スクリプトエディターを開く

スプレッドシートの作成

まずは新規のスプレッドシートを作成します

ファイル名の変更

ここでは「GASで簡単なWebページを表示する」としています。

AppsScriptの選択

次に「拡張機能」から「Apps Script」を開きます。

プロジェクト名の変更

ここでは「Webページの表示」としています。

引数に書いたHTMLコードを公開

createHtmlOutputメソッドの引数にHTMLを書いて、Webページを表示してみます。

doGet関数を定義

デフォルトで定義されているmyFunction関数は削除して、doGet関数を定義します。doGet関数はHtmlOutputオブジェクトを返す必要があります。

スクリプトの作成

HtmlサービスのcreateHtmlOutputメソッドは、引数に指定したHTMLコードから生成したHtmlOutputオブジェクトを返します(ソースコードをHTML出力用に変換する関数です。)
HtmlOutputオブジェクトはHTMLのデータを保持するもので、セキュリティの問題が起きない様にサニタイズする働きも持ちます。

function doGet() {
  return HtmlService.createHtmlOutput("<h1>Hello! GAS!</h1>");
}

公開

右上の「デプロイ」から「新しいデプロイ」をクリックします。

「ウェブアプリ」の選択

「種類の選択」の歯車アイコンをクリックし、「ウェブアプリ」をクリックします。

設定

以下を設定して、右下の「デプロイ」をクリックします。

• 「新しい説明文」にわかりやすい説明文を入力します。
  ここでは「最初のデプロイ」と入力します。
• 「次のユーザーとして実行」で「自分（xxxxx@gmail.com）」を選択します。
• 「アクセスできるユーザー」で「Googleアカウントを持つ全員」を選択

デプロイの完了

公開

ウェブアプリのURLをクリックしてWebページを表示してみましょう。

無事、HTMLファイルの内容が表示されていることが確認できました！

HTMLファイル(静的)を公開

先ほどは、createHtmlOutputメソッドの引数にHTMLを書きましたが、今度はHTMLファイルの内容を表示させてみます。createHtmlOutputFromFileメソッドで指定されたHTMLファイルを公開します。

doGet関数を定義

デフォルトで定義されているmyFunction関数は削除して、doGet関数を定義します。

HTMLファイルの追加

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Hello! GAS!</h1>
  </body>
</html>

スクリプトの作成

HTMLファイルの内容を表示するには、createHtmlOutputFromFileメソッドを使います。こちらは、HTMLファイルからHtmlOutputオブジェクトを生成して返します。引数にHTMLファイル名を指定しますが、拡張子は不要です。
注意:
createTemplateFromFileの場合にはスクリプトレットが使用できますが、createOutputFromFileの場合には使用することができません。

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}

公開

右上の「デプロイ」から「新しいデプロイ」をクリックします。

「ウェブアプリ」の選択

「種類の選択」の歯車アイコンをクリックし、「ウェブアプリ」をクリックします。

設定

以下を設定して、右下の「デプロイ」をクリックします。

• 「新しい説明文」にわかりやすい説明文を入力します。
  ここでは「最初のデプロイ」と入力します。
• 「次のユーザーとして実行」で「自分（xxxxx@gmail.com）」を選択します。
• 「アクセスできるユーザー」で「Googleアカウントを持つ全員」を選択

デプロイの完了

公開

ウェブアプリのURLをクリックしてWebページを表示してみましょう。

無事、HTMLファイルの内容が表示されていることが確認できました！

HTMLファイル(動的)を公開

こちらは、createHtmlOutputFromFileではなく、craeteTemplateFromFileメソッドを使います。

craeteTemplateFromFileは、指定のhtmlファイルからHtmlTemplateオブジェクトを生成するメソッドで、HtmlTemplateオブジェクトを使うことでスクリプトレットと呼ばれる動的にHTMLを生成する構文を使うことができます。
(スクリプトレット構文を使うとHTMLの中にGASのコードを埋め込むことができます。)

doGet関数を定義

デフォルトで定義されているmyFunction関数は削除して、doGet関数を定義します。

HTMLファイルの追加

スクリプトの作成

HTMLファイルの内容を表示するには、createTemplateFromFileメソッドを使います。
こちらの場合は、evaluate();を付ける必要があります。引数にHTMLファイル名を指定しますが、拡張子は不要です。

function doGet() {
  const template = HtmlService.createTemplateFromFile("index");
  const htmlOutput = template.evaluate();
  return htmlOutput;
}

[ スクリプトの解説 ]

function doGet() {

doGet関数は、デプロイURLにアクセスした際に実行される特殊な関数です。doGet関数の引数eとすることで、デプロイURLにアクセスした際(GETリクエストを送った際に)URLに含まれるクエリやパラメーターを引き渡すことができます。

const template = HtmlService.createTemplateFromFile(“index”)

2行目のHtmlService.createTemplateFromFile(“index”)で、index.htmlファイルを読み込んで結果をtemplateという変数に代入しています。このtemplateは、HTMLとスクリプトが混在した状態のもので、まだこの時点ではブラウザで表示できる状態ではありません。

• HtmlServiceとはHtmlServiceオブジェクトのことで、Google Apps Scriptとやり取りをすることができるWebページを作成するためのHTMLファイルを操作する機能とセキュリティ(サニタイズ)を提供してくれます。GASでWebアプリケーションを作成するときは、HtmlServiceオブジェクトを使います。
• HtmlServiceオブジェクトのメソッドであるcreateTemplateFromFileは、指定のhtmlファイルからHtmlTemplateオブジェクトを生成するメソッドです。HtmlTemplateオブジェクトは動的にHTMLを構築するためのテンプレートです。HtmlTemplateオブジェクトを使うことでスクリプトレットと呼ばれる動的にHTMLを生成する構文を使うことができます。(スクリプトレット構文を使うとHTMLの中にGASのコードを埋め込むことができます。)

const htmlOutput = template.evaluate();

そこで3行目で、HtmlTemplateオブジェクトをevaluate(評価)することでHtmlOutputという形式のオブジェクトに変換しています。変換されたHtmlOutputオブジェクトはブラウザで表示ができる状態となります。
留意:
evaluate()とはHtmlTemplateオブジェクトをHtmlOutputオブジェクトに変換するメソッドです。HtmlOutputオブジェクトに変換することでWebページを表示できるようになります。

return htmlOutput;

このHtmlOutputオブジェクトをdoGet関数からreturnすることで、Webページに指定したHTMLファイルを表示することができます。なぜHtmlOutputオブジェクトに変換する必要があるかというと、doGet関数の戻り値としてHtmlOutputオブジェクトを返すことがGASで決まっているからです。

公開

右上の「デプロイ」から「新しいデプロイ」をクリックします。

「ウェブアプリ」の選択

「種類の選択」の歯車アイコンをクリックし、「ウェブアプリ」をクリックします。

設定

以下を設定して、右下の「デプロイ」をクリックします。

• 「新しい説明文」にわかりやすい説明文を入力します。
  ここでは「最初のデプロイ」と入力します。
• 「次のユーザーとして実行」で「自分（xxxxx@gmail.com）」を選択します。
• 「アクセスできるユーザー」で「Googleアカウントを持つ全員」を選択

デプロイの完了

公開

ウェブアプリのURLをクリックしてWebページを表示してみましょう。

無事、HTMLファイルの内容が表示されていることが確認できました！

ページタイトル、ファビコンの変更方法

GasでHTMLを作成する場合、ページタイトルとファビコンについてはHTMLのheadタグ内に記述するのではなく、コード.gs内に記述する必要があります。

ページタイトルを変更する。

siteTitleメソッドを使います。

ファビコンを変更する。

setFaviconUrlメソッドを使います。ファビコン画像はGoogleドライブ内に保存した画像を利用します。

ライブラリーの導入

GoogleAppsScriptで実際にライブラリを導入する手順について解説します。どんなライブラリでも導入手順は同じです。

ライブラリーの追加

ここでは日付操作で人気のライブラリである dayjs を追加してみます。

「ライブラリーの追加」をクリック

スクリプトエディターの画面で、左側のメニューから「ライブラリー」の+ボタンをクリックします。

スクリプトIDの入力

スクリプトIDを入力して、「検索」をクリックします。

dayjsのスクリプトIDは、次の通りです。
1ShsRhHc8tgPy5wGOzUvgEhOedJUQD53m-gd8lG2MOgs-dXC_aCZn9lFB

バージョンの選択

「検索」すると、以下のような画面が表示されますので、バーションを選択して「追加」をクリックします。「バージョン」をプルダウンから選択。ここは最も数字の大きい最新のバージョンを選択すればOKです。

導入の完了

dayjsが左側のメニューに追加されました。

自作スクリプトのライブラリー化

自作スクリプトのライブラリー化

自分で作ったスクリプトをライブラリー化して、他のプロジェクトから呼び出して利用できるようにします。

自作関数の準備

自作スクリプトとして、gokei関数を用意します。

function gokei(a,b) {
  return a + b;
}

ライブラリーの公開

この関数をライブラリー化します。

ライブラリーをクリック

説明文の入力

説明文を入力して、「デプロイ」をクリックします。

「完了」をクリック

共有の設定

このライブラリーを他のユーザーからも使用できるようにする為に、共有を設定します。

ここでは、「リンクを知っている全員」を選択します。

これで、ライブラリーとしてこのプロジェクトが公開されました。

別のプロジェクトから呼び出します。

それでは、別のプロジェクト(ここでは「無題のプロジェクト」)からこのライブラリーを使ってみます。

ライブラリーの追加

スクリプトIDの入力

[ スクリプトIDの取得方法 ]

スクリプトIDは、liblalyプロジェクトのURLの中の部分となります。

又は、歯車アイコンの設定メニューからスクリプトのIDをコピーします。

「検索」をクリック

スクリプトIDを入力して「検索」をクリックすると、バージョンの選択とライブラリ用のIDを入力する欄が表示されます。ここでは、バージョンは「HEAD」、IDはliblary01と入力して「追加」をクリックします。

バージョンをHEAD（開発モード）にしておくと、常に最新のバージョンのライブラリを使用することができます。

ライブラリーの追加完了

「liblary」が追加されますので、ライブラリーがつかえるようになります。

スクリプトの実行

ここでは「無題のプロジェクト」からgokei関数を呼び出し、スクリプトを実行してみます。

スクリプトの作成

gokei関数の呼び出し

function myFunction() {
  let total = liblary01.gokei(5,7);
  Logger.log(total);
  
}

スクリプトの実行

他のプロジェクトから、gokei関数を呼びたし、スクリプトを実行できました。このようにプロジェクトをライブラリー化しておくと、他のプロジェクトでライブラリの関数を使うことができるようになります。

Googleドライブの扱い方

GASで、Googleドライブのファイルやフォルダを扱う場合は、DriveAppクラスを使います。DriveAppクラスの各種メソッドを使って各種操作を行います。
以下のようなGoogleドライブの構成を例として、フォルダの取得、ファイルの取得のメソッドをご紹介します。

フォルダの取得

まず、マイドライブの中の「業務フォルダ」を取得してみます。

フォルダの取得方法

GASでGoogleドライブのフォルダを取得する場合は、DriveAppのgetFolderByIdメソッドを使います。フォルダIDであればGoogleドライブでそのフォルダを開いている際のURLの以下の部分です。

DriveAppクラスからフォルダを取得する。

function myFunction() {
  const folder = DriveApp.getFolderById("フォルダID");
  console.log(folder.getName());
}

スクリプトで使用されているgetNameメソッドはフォルダ名を取得するメソッドです。

ファイルの取得

次に、「業務フォルダ」内に保存されていたファイル「シートの取得用」を取得してみます。

ファイルの取得方法

Googleドライブのファイルを取得する場合は、DriveAppのgetFileByIdメソッドを使います。

function myFunction() {
  const file = DriveApp.getFileById("ファイルID");
  console.log(file.getName());
}

※ファイルIDは、以下の通り

全てのファイルを取得する。

「const files = DriveApp.getFiles();」が、Googleドライブのすべてのファイルを取得するスクリプトになります。取得したデータは「FileIterator（ファイルイテレータ）」という形式です。イテレータを使えばデータの集まりに対して、「次」、「次」と抽象的に命令するだけで、順番に各データを取得することができます。

function myFunction() {
  const files = DriveApp.getFiles();
  while (files.hasNext()) {
    const file = files.next();
    console.log(file.getName());    
  }
}

特定のフォルダーの中のファイルを全て取得する。

const gyomuFolder = DriveApp.getFolderById("フォルダID");

function myFunction() {
  const files = gyomuFolder.getFiles();
  while (files.hasNext()) {
    const file = files.next();
    console.log(file.getName());    
  }
}

ファイル整理の自動化

それでは、実際に実務で良くある「フォルダの整理」「ファイルの整理」をスクリプトを作成して自動化してみます。

ファイル整理自動化の内容

「ドキュメント」フォルダ内のファイルの内、ファイルの最終更新日が1ヶ月以上前のファイルについては、「old」フォルダ内に新しく「年月」のフォルダを作成して移動させます。
※わかりやすいようにファイル名は、最終更新日としています。

[ スクリプト実行前の「ドキュメント」フォルダ ]

[ スクリプト実行後 の「ドキュメント」フォルダ]

ファイル整理自動化の準備

作成する関数(スクリプト)

seiriFiles関数

「ドキュメント」フォルダ内のファイルを調べて、最終更新日が1ヶ月以上前のファイルを取得します。

sakuseiFolder関数

seiriFiles関数から呼び出され、移動対象となるファイルを取得して「old」フォルダ内に「年月」フォルダを作成します。

idouFiles関数

seiriFiles関数から呼び出され、sakuseiFolder関数で作成した「年月」フォルダに移動対象のファイルを移動させます。

ライブラリーの導入

このスクリプトでは、日付データを扱いますので「dayjs」というライブラリーを導入します。
dayjsのスクリプトIDは、

1ShsRhHc8tgPy5wGOzUvgEhOedJUQD53m-gd8lG2MOgs-dXC_aCZn9lFB

自動化スクリプトの作成

それでは、スクリプトを作っていきます。

スクリプトエディターを開く

今回は、Googleドライブ上で独立して動作するスタンドアロンスクリプトを作成します。

seiriFiles関数の実装

「ドキュメント」フォルダ内のファイルを調べて、最終更新日が1ヶ月以上前のファイルを取得します。プロジェクト名は、「ファイルの整理」、ファイル名はコード.gs、関数名はseiriFilesとします。

フォルダ内のファイルの取得

getFiolderByIdメソッドで「ドキュメント」フォルダを取得してgetFilesメソッドで、「ドキュメント」フォルダ内のファイルを全て取得してfilesに格納します。

function seiriFiles() {
  const documentFolder = DriveApp.getFolderById("フォルダID");
  const files = documentFolder.getFiles();

3行目の「getFiles();」が、「ドキュメント」フォルダ内の全てのファイルを取得するスクリプトになります。取得したデータは「FileIterator(ファイルイテレータ)」という形式です。イテレータを使えばデータの集まりに対して「次」「次」と抽象的に命令するだけで、順番に各データを取得することができます。

[ 全てのファイルが取得されているかを確認 ]

filesにファイルが格納されているか確認してみます。

[確認の為のスクリプトの解説]

「while (files.hasNext()) {」は、filesに次のデータがある限り処理を続けます。
「const file = files.next();」で、files（「ドキュメント」フォルダにあるファイル）の次のデータを取得しています。
「Logger.log(file.getName());」が「const file = files.next();」で取得したデータに対する処理になります。今回は取得したデータの名前をログに表示させています。

1ヶ月前の日付の取得

現在の日付から1ヶ月前の日付を取得します。

dateオブジェクト.setMonth(引数)で、dateオブジェクトの月から1ヶ月前の日付をセットします。

留意:
taisyoFiles = [ ];は移動対象のファイルオブジェクトを格納する配列で、
folderNames=[ ];は、作成するフォルダ名を格納する配列となります。

[ hitothukimaeの内容を確認します。]

現在日付が2023/07/07ですので、1ヶ月前の2023/06/07となっています。

注意:
formatは、”yyyy/MM/DD”ではなく、”yyyy/MM/dd”となりますので、ご注意下さい。”yyyy/MM/DD”だと、以下のように158と変な数値となってしまいます。

最終更新日のチェックと対象ファイルの格納

次に、whileとhasNextメソッド、nextメソッドで「ドキュメント」フォルダから取得したファイルの最終更新日が1ヶ月以上前か否かをチェックします。
※ファイルの最終更新日を取得するには、getLastUpdated()メソッドを使用します。

最終更新日(lastUpdated.getTime())の方が、現在日付の1ヶ月前の日付(hitothukimae.getTime())より前の日付だった場合は配列(taisyoFiles)にファイルを格納します。そして最終更新日からYYYYMM形式の文字列を生成してfolderNamesに格納します。
※getTime() ではDate型の日付をミリ秒に変換した数値を返却してくれます。

[ taisyoFilesの確認 ]

taisyoFilesの配列に移動対象のファイルが格納されているかを確認します。

[ folderNamesの確認 ]

folderNamesの配列に移動対象のファイルが格納されているかを確認します。

関数の呼び出し

sakuseiFolderと、idouFilesを呼び出します。sakuseiFolderの引数はfolderNamesで、idouFilesの引数は配列taisyoFilesと変数documentFolder(「ドキュメントフォルダ」のFileオブジェクト)です。

seiriFiles関数の全体

function seiriFiles() {
  const documentFolder = DriveApp.getFolderById("フォルダID");
  const files = documentFolder.getFiles();

  let hitothukimae = new Date();
  hitothukimae.setMonth(hitothukimae.getMonth() - 1);
  let taisyoFiles = []; //移動対象のファイルオブジェクトを格納する配列
  let folderNames = []; //作成するフォルダー名を格納する配列

  while (files.hasNext()) {
    let file = files.next();
    let lastUpdated = file.getLastUpdated();
    if (lastUpdated.getTime() < hitothukimae.getTime()) {
      taisyoFiles.push(file);
      folderNames.push(dayjs.dayjs(new Date(lastUpdated)).format("YYYYMM"));
    }
  }

  sakuseiFolder(folderNames);
  idouFiles(taisyoFiles,documentFolder);
}

sakuseiFolder関数の実装

seiriFiles関数より呼ばれるsakuseiFolder関数を実装します。この関数でfolderNamesの配列に格納されているフォルダー名を取り出し「old」フォルダの中にそのフォルダ名で、フォルダを作成します。

フォルダ名の重複チェック

まずfilter関数で、folderNamesに格納されているフォルダ名を抽出して重複がない様にチェックしながら、newlistという新しい配列を生成します。

※スクリプトの解説は、「配列の重複を削除する方法」を参照願います。

[ newlistの確認 ]

フォルダの作成

配列newListに格納されている名前でYYYYMMフォルダを作成します。但し、このスクリプトを2回以上実行した場合は、初回の実行で作成されたYYYYMMフォルダと同じフォルダが存在する可能性がある為、IF文で確認(存在チェック)して作成します。

• 「old」フォルダを取得します。
  const oldFolder = DriveApp.getFolderById(“フォルダID”);
• フォルダが重複しない様にチェック
  if (!oldFolder.getFoldersByName(newlist[i]).hasNext()) {
  　　　　oldFolder.createFolder(newlist[i]);
  }

[ スクリプトの解説 ]
getFoldersByNameメソッドもFolderIteratorを返しますので、イテレータの処理をしてフォルダ名を取得しています。newlistの配列に格納されているフォルダ名を次、次と取り出し同じフォルダ名があれば、trueを返しますが、!の論理演算子がついている為、falseを返します。つまり同じフォルダ名が無い時にoldFolder.createFolder(newlist[i]);が、実行されます。
※詳細は、「存在チェックの方法」を参照願います。

sakuseiFolder関数の全体

function sakuseiFolder(folderNames) {
  const newlist = folderNames.filter(function (value, index, self) {
    return self.indexOf(value) === index;
  });
  const oldFolder = DriveApp.getFolderById("フォルダID");

  for (let i = 0; i < newlist.length; i++) {
    if (!oldFolder.getFoldersByName(newlist[i]).hasNext()) {
      oldFolder.createFolder(newlist[i]);
    }
  }
}

idouFiles関数の実装

seiriFiles関数より呼ばれるidouFiles関数を実装します。この関数でtaisyouFilesの配列に格納されているファイル名を取り出し、「old」フォルダの中の最終更新日と一致するフォルダ名のフォルダにファイルを移動させます。

配列taisyoFilesからファイルの取り出し

for (let i=0; i<taisyoFiles.length; i++) {
引数で受け取った配列taisyoFiles(移動対象のファイルが格納されている)の要素数(taisyoFiles.length)だけ繰り返し処理を実行します。
let lastUpdated = taisyoFiles[i].getLastUpdated();
処理の中では、移動対象ファイルの最終更新日をgetLastUpdated()メソッドで、改めて取得して、

移動先のフォルダ名を取得

let taisyoFolder = oldFolder.getFoldersByName(name).next();
getFoldersByNameでフォルダ名を取得して、変数taisyoFolderに格納します。
※nameには、lastUpdatedから取得した最終更新日をYYYYMMのformatに変換する次のオーダーを記載します。
dayjs.dayjs(new Date(lastupdated)).format(“YYYYMM”))

ファイルの移動

taisyoFiles[i].moveTo(taisyoFolder);
配列taisyoFilesから取り出したファイルをmoveToメソッドでtaisyoFolderに移動させます。

スクリプト全体の掲載

スクリプト全体を掲載しておきます。

function seiriFiles() {
  const documentFolder = DriveApp.getFolderById("フォルダID");
  const files = documentFolder.getFiles();

  let hitothukimae = new Date();
  hitothukimae.setMonth(hitothukimae.getMonth() - 1);
  let taisyoFiles = []; //移動対象のファイルオブジェクトを格納する配列
  let folderNames = []; //作成するフォルダー名を格納する配列

  while (files.hasNext()) {
    let file = files.next();
    let lastUpdated = file.getLastUpdated();
    if (lastUpdated.getTime() < hitothukimae.getTime()) {
      taisyoFiles.push(file);
      folderNames.push(dayjs.dayjs(new Date(lastUpdated)).format("YYYYMM"));
    }
  }

  sakuseiFolder(folderNames);
  idouFiles(taisyoFiles,documentFolder);
}
function sakuseiFolder(folderNames) {
  const newlist = folderNames.filter(function (value, index, self) {
    return self.indexOf(value) === index;
  });
  const oldFolder = DriveApp.getFolderById("フォルダID");

  for (let i = 0; i < newlist.length; i++) {
    if (!oldFolder.getFoldersByName(newlist[i]).hasNext()) {
      oldFolder.createFolder(newlist[i]);
    }
  }
}
function idouFiles(taisyoFiles,documentFolder) {
  const oldFolder = DriveApp.getFolderById("フォルダID")

  for (let i = 0; i < taisyoFiles.length; i++) {

    let lastUpdated = taisyoFiles[i].getLastUpdated();
    let taisyoFolder = oldFolder.getFoldersByName(dayjs.dayjs(new Date(lastUpdated)).format("YYYYMM")).next();
    taisyoFiles[i].moveTo(taisyoFolder);
  };
};

自動化スクリプトの実行

スクリプトを初回実行するとき次のような承認画面が表示された場合は承認作業を行ってください。
手順はこちら。

スクリプトの実行結果は、以下の通りです。

承認手続き

スプレッドシートやフォームなどのサービスと連携させる処理を行うと初回起動時のみ承認作業が必要です。アクセス許可が必要なのは、アカウント毎ではなく、1つのアプリ(スプレッドシート毎)に対して必ず1度承認しないといけません。

権限を確認

最初に実行する場合は、認証が必要となります。

「詳細」をクリック

「詳細」から「無題のプロジェクト(安全ではないページ)に移動」をクリックします。

「許可」をクリック

配列の重複を削除する方法

GASで配列の重複要素を削除する方法（ユニーク要素の配列にする方法）をご紹介します。filterメソッドを適応して配列の重複を削除します。

filterメソッド

filterの中で特定の条件を与えて配列データを取得したい内容を「コールバック関数」に書くことで、任意のデータを抽出して新しい配列を生成します。
[ 基本構文 ]
var items = 配列データ;
items.filter(コールバック関数)

コールバック関数

コールバック関数は、3つの引数を受け取ることができます。
items.filter( function( value, index, array ) {
}

• value:配列の値
• index:配列のインデックス番号
• array(self):現在処理している配列

※function(value,index,array)としていますが、変数名は任意です。

サンプルスクリプト

以下は、配列の重複除外スクリプトです。

繰り返し処理をしている最中の配列の値が第1引数に、第2引数にはインデックス、第3引数にはitems配列が入っている状態となります。function内部でのreturnでTrueかFalseを判定して、filterではTrueとしたものだけを残す様になっています。配列.indexOfで最初に見つけた文字列のインデックス情報を返します。最初のりんごはインデックス0なので、そのまま→0 === 0 =>True、最後のりんごはインデックス3となりますが、self.indexOf(りんご)とした場合には0となりますので、0 === 3 =>Falseとなり、最後のりんごは除外されています。

存在チェックの方法

Googleドライブ上ではすべてのフォルダやファイルにユニークなIDが付与されていますので、同じファイル名や同じフォルダ名を作成することができます。GoogleApps Scriptでフォルダやファイルを作成するにはcreateFolderやcreateFileを使用しますが、そのままだと同名のフォルダやファイルが作成されてしまいます。同じフォルダ内に同名のフォルダやファイルが作成されない様にするには同名のフォルダやファイルが存在しているか判定して存在していないときのみcreateFolderやcreateFileで作成することが必要です。ここでは、同名のフォルダやファイルの存在チェックの方法について解説します。

処理内容

「写真フォルダ」の中に、「picture202306」と「picture202304」のフォルダがあります。ここに、「picture202304」「picture202305」「picture202306」「picture202307」という名前のフォルダを作成しますが、既に存在するフォルダは作成しないようにします。

つまり、既に存在する「picture202306」と「picture202304」のフォルダは作成せず、存在しない「picture202305」と「picture202307」のフォルダのみ作成します。

スクリプトの作成

function myFunction() {
  const folder = DriveApp.getFolderById("フォルダID");
  const newlist = ["picture202304", "picture202305", "picture202306", "picture202307"]

  // 存在チェック
  for (let a = 0; a < newlist.length; a++) {
    if (!folder.getFoldersByName(newlist[a]).hasNext()) {
      // フォルダがなければ作成
      folder.createFolder(newlist[a]);
      }
      // Logger.log(newlist[a]);
  }
}

newlistの配列を読み込む

for (let a = 0; a<newlist.length; a++) {
　　　　// 読み込んだ時の処理
}

読み込んだ時の処理

if (!folder.getFolderByName(newlist[a]).hasNext()) {
　　　　// 存在しなかった時の処理
}

存在しなかった時の処理

folder.createFolder(newlist[a]);

[ スクリプトの解説 ]
getFoldersByNameメソッドもFolderIteratorを返しますので、イテレータの処理をしてフォルダ名を取得しています。newlistの配列に格納されているフォルダ名を次、次と取り出し同じフォルダ名があればtrueを返しますが、!(論理演算子)がついている為、falseを返します。つまり、同じフォルダ名が無かった時に、createFolderを実行します。

スクリプトの検証

folder.createFolder(newlist[a]);存在しなかった時の処理をコメントアウトして、logを表示して確認してみます。

存在しない「picture202305」と「picture202307」のフォルダのみが表示されました。

スクリプトの実行

スクリプトの検証ができましたので、コメントアウトを元に戻してスクリプトを実行します。

存在しない「picture202305」と「picture202307」のフォルダが作成されました。

• スプレッドシート上にボタン(図形)を作成し、ボタンを押下してスクリプトを実行する。
• スプレッドシートにオリジナルメニューを追加して、そのメニューで実行する
• トリガーを利用して、自動起動を設定する

スクリプトの作成

以前のブログ「【完全解説】googleスプレッドシートの使い方(Excel⇔スプレッドシート)」で、xlsxの「有給休暇管理表」をスプレッドシートに変換しましたが、元のxlsmの「有給休暇管理表」では「シートの追加」や「シート名の変更」は、VBAマクロで組んでいます。
そこで、今回は「シートの追加」や「シート名の変更」をGASで組み込んで、xlsmの「有給休暇管理表」と同等のスプレッドシートを作成して、VBAと同様にスクリプトを実行できる様にします。ここでは「シートの追加」スクリプトと、「シート名の変更」スクリプトを組み込んで、「ボタンを押下して実行する方法」と「オリジナルメニューで実行する方法」、「トリガーを設定して実行する方法」の3つの方法をご紹介します。

こちらのスプレッドシートに、「シートの追加」スクリプトと、「シート名の変更」スクリプトを組み込みます。

組み込むスクリプト

「シートの追加」スクリプト

「シートの追加」ボタンを作成してボタンを押すと新しいシートが追加される様にします。現状「シートの追加」ボタンがない為、白紙のシートである「原紙」を手動でコピーするようにしていますが「シート追加」のボタンを設置してボタンを押下することでシートの追加ができるようにします。

「シート名の自動入力」スクリプト

社員番号・氏名が編集された時点で「社員番号+氏名」をシート名として自動的に書き込むようにします。

スクリプトの作成

まず、現状のスプレッドシートにVBAと同様に上記2つのスクリプトを組み込みます。

「シートの追加」スクリプト

コピーしたシートは表示に切り替えないと非表示のままとなります。また、シートを先頭に移動させる為にはアクティブにする必要があります。

「シート名の自動入力」スクリプト

入力された「社員番号」+「氏名」をシート名としてセットします。

ボタンを押下して実行

スプレッドシート上にボタンを作成して、そのボタンをクリックすることで処理を実行する方法について解説します。

注意:
「原紙」シートは非表示としています。「シートの追加」ボタンには、「シートの追加」スクリプトを割り当てています。

「シートの追加」ボタンの作成

「シートの追加」スクリプトは、ボタンを設置して、ボタンが押下されたらスクリプトを実行する様にしますので、「シートの追加」ボタンを作成します。

「図形描画」をクリック

スプレッドシートを開いて「挿入」から「図形描画」をクリックします。

図形の選択

別ウインドウが表示されますのでお好きな図形を選択します。

「保存して終了」をクリック

「シートの追加」はテキストで入力します。良ければ「保存して終了」をクリックします。

ボタンの表示

「保存して終了」をクリックすると、作成したボタンがGoogleスプレッドシート上に表示されます。

ボタンの位置調整

右クリックすると、手のマークとなりますので図形を掴んで、ボタンの位置を調整します。色や文字、形を変更したい場合は図形（ボタン）を右クリックして「︙」をクリックから「編集」を選択することで編集することが可能です。

スクリプトの割り当て

Googleスプレッドシート上にボタンが作成できましたら、ボタンに実行機能をもたせます。ここでは、「シートの追加」スクリプト(myFunct1)を割り当てます。

注意:
「シート名の自動入力」スクリプトはボタンでの実行にはなじまないので、トリガーの設定で実行する様にします。

「︙」をクリック

図形をクリックすると青枠で囲われて、図形の右上には縦に「︙」が表示されますので、「︙」をクリックして「スクリプトを割り当て」をクリックします。

関数名の入力

別ウィンドウが表示されますので、自分で作成したfunctionの関数名を入力します。今回作成した関数は「myFunct1」と「myFunct2」ですが「シートの追加」ボタンに実行機能をもたせるスクリプトは「myFunct1」なので、ここでは「myFunct1」と入力します。
これでOKを押すと作成したボタンに実行機能をもたせることができます。

ボタンを押下して実行

「シートの追加」ボタンをクリックして、スクリプトが正しく実行されるかを確認します。

正しく実行されました。が、コピー元の「原紙」シートに、「シートの追加」ボタンを設置していませんので、コピー元の「原紙」シートにも「シートの追加」ボタンを設置します。「原紙」シートにもボタンを設置して、完了です。

オリジナルメニューで実行

次に、スプレッドシート上にメニューを作成して、そのメニューをクリックすることで処理を実行する方法について解説します。

※メニューの名前は、「独自メニュー」としました。
メニューを選択すると、「シートの追加」と「シート名の設定」という2つのメニューが表示されますので、該当のメニューを選択して実行します。

オリジナルメニューの作成

「メニュー追加」のスクリプト

※このスクリプトを実行すると、スプレッドシート上にメニューが追加されます。

追加された「オリジナルメニュー」

オリジナルメニューで実行

オリジナルメニューで「シートの追加」スクリプトを実行します。

シートが追加されました。

トリガーを設定して実行

トリガーの設定

GASのトリガーとは、特定条件(きっかけ)でGASスクリプトを実行させる仕組みのことです。「スプレッドシートを編集する」や「特定の時間になる」等、スクリプト実行のきっかけとなるイベントをあらかじめ指定しておくことで、処理を自動化・効率化することができます。GASのトリガーには大きく分けて、Simple triggers(シンプルトリガー)とInstallabletriggers(インストーラブルトリガー)が存在します。
「Simple triggers」はGASのスクリプト上でトリガーを設定する方法で、
「Installable triggers」はスクリプトエディターで設定する方法です。

Installable triggersのほうが簡単で使い勝手が良いですが、Simple triggersはスクリプト上で設定できることで入力された値や条件によってトリガーを変更するなど、柔軟なトリガー設定が可能です。
ここでは、インストーラブルトリガーについて解説します。

「トリガー」をクリック

エディタのスクリプトファイル横にあるタブのうち、時計マークをクリックします。

「+トリガーを追加」をクリック

トリガーの設定

「実行する関数」と「イベントのソース」を設定します。

実行する関数

あらかじめ作成した関数名が表示されます。(複数ある場合は複数表示される)
ここでは、「シート名の自動入力」スクリプトを実行する関数(myFunc2)を選択します。

実行するデプロイ

実行対象となるバージョンを選択できます。「Head」が最新のデプロイで、バージョンXXは過去のデプロイとなります。現在、選択肢はありませんので、そのままOKです。

イベントのソース

GASをどのタイミングで実行するかを設定します。ここでは、スプレッドシートからを選択します。

• 時間主導型：特定の時間単位(日時、週次、月次など)で実行します。
• スプレッドシートから：
  スプレッドシート、ドキュメント、フォーム等の起動や編集、送信時に実行します。
• カレンダーから：カレンダー更新時に実行します。

イベントの種類

関数(myFunct2)は、社員番号、氏名を編集した時に実行したいので、「編集時」を選択します。

「保存」をクリック

設定が完了しましたら、「保存」をクリックします。

「トリガーの追加」の完了

トリガーを設定して実行

関数(myFunct2)は、社員番号、氏名を入力すると、シート名が「社員番号+氏名」に書き換わるというスクリプトです。

社員番号、氏名を入力してみます。

「原紙のコピー」のシートの方も入力してみます。

トリガーの削除

設定したトリガーを削除する方法をご紹介しておきます。

「トリガー」をクリック

スクリプトエディターの画面で左のメニューから「トリガー」を選択します。

「︙」をクリック

「トリガーを削除」をクリック

表示されたメニューから「トリガーを削除」をクリックします。

削除の確認

「トリガーの削除」をクリックすると、再度確認メッセージが表示されますので、「完全に削除」をクリックします。

スクリプトエディターの使い方

スクリプトの種類

GASには、スプレッドシートやフォームに紐付くコンテナバインド型「Container Bound Script」と、独立したスタンドアロン型「Standalone Script」(ドライブ上に単独で存在するもの)との2種類の開発方式があります。コンテナバインド型は、GoogleスプレッドシートやGoogleドキュメント、外部サービスなどと連携して動作するスクリプトのことです。GASはExcelやWordで使えるVBAと同じように、スプレッドシートなどのドキュメントと紐付けることが可能です。スタンドアロン型は、単体で動作するスクリプトのことで、GoogleスプレッドシートやGoogleフォームなど、Google関連サービスと連携する必要がない場合に使用します。

コンテナバインド型

スプレッドシートから「スクリプトエディタ」を選択すると、自動的にContainer BoundScriptプロジェクトが作成されます。

コンテナバインド型のGASエディターの開き方

コンテナバインド型のGASでスクリプトエディタを開く場合は紐づくサービスのメニューからスクリプトエディタを開きます。各アプリ(GoogleAppsScript)の拡張機能からAppsScriptをクリックすると、エディターを開くことができます。

[ その他のサービス ]

コンテナバインド型のメリット

• コンテナバインドでのみ利用可能なコードがあります。
  (アラートを表示したり、HTMLを表示するコードetc)
• Googleスプレッドシートから利用ができるため、手軽に始められます。
• IDなどを指定しなくても参照が可能なクラスが準備されています。
• スクリプトの実行が簡単
  「Googleスプレッドシート」などは図形などにスクリプトを割り当てることによりスクリプトの実行が簡単にできます。

コンテナバインド型のデメリット

• 扱っているGASのスクリプトの数が増えると管理が大変。
• Googleドライブ上で確認できない。
  Googleドライブ上にスクリプトファイルは表示されないため、スクリプトが設定されているかどうか分からない。
  注意:GASのホーム(https://script.google.com/home)で確認できます。

スタンドアロン型

スタンドアロン型のGASエディタの開き方

GASのスタンドアロンスクリプトは、Googleドライブから新規ファイルとして開くことができます。

スタンドアロン型のメリット

• スタンドアロン型のGASファイルはGoogleドライブに表示されます。
  Googleドライブで表示される為、管理しやすい
• スクリプトを隠すことができます。
  スプレッドシートなどに紐付かないため、スプレッドシート利用者に対し、スクリプトを秘匿することが可能です。

スタンドアロン型のデメリット

• コンテナバインドでできるコードがスタンドアロンではできないこと。
• スプレッドシートから実行できない。
  紐付けされていないため「Googleスプレッドシート」などからスクリプトの実行ができません。
• 「Googleスプレッドシート」などを操作する場合はIDが必要となります。

機能的な面で言えば、コンテナバインド型の方がすべての機能がありますが、管理のしやすさからはスタンドアロン型となります。Google Apps Scriptの利用ケースを考慮し、コンテナバインド型でしかできない場合はコンテナバインド型を選択、そうでなければ、スタンドアロン型を選択するのがオススメです。(初めての場合は、VBAと同じコンテナバインド型の方が入りやすいでしょう。)

エディターの画面構成

スクリプトエディターとは、コードを記述したり、管理する場所のことです。エディターは、プロジェクトとファイルで構成されます。GASではスクリプト(プログラム)を「プロジェクト」という単位で作成していきます。プロジェクトの中にはいくつかの「ファイル」を作ることができます。

プロジェクト名の変更

プロジェクト名をクリックすると以下のような画面が表示されますので、プロジェクトタイトルを入力して「名前を変更」をクリックします。

ファイル名の変更

「︙」をクリックして、「名前を変更」をクリックします。

関数名(myFunction)の変更

同一プロジェクト内では関数名はユニークとします。例えばコード1.gs、コード2.gs等と別ファイルとしていても同じ関数名(例えばmyFunction)であれば、すべてのmyFunctionが実行されます。
例:
関数名は同じ「myFunction」となっていますので、シートの追加.gsのmyFunctionも、シート名の設定.gsのmyFunctionも実行されてしまいます。

エディターの使い方

ここでは、コンテナバインド型スクリプトで解説をします。

Google Driveから新規のスプレッドシートを開く

「+新規」ボタンをクリック

「空白のスプレッドシート」をクリック

「Googleスプレッドシートから「空白のスプレッドシート」をクリックします。

GoogleスプレッドシートからGASを開く

スプレッドシートを開いて「拡張機能」タブから「AppsScript」をクリックします。

スクリプトの作成・保存

コードを記述する

スクリプトエディターが開きますので、ここにスクリプトを書いていきます。()と{の間は、ここでは半角空白を入れていますが、なくても構いません、見易さの問題です。最後の}は忘れずに、先に書いておきましょう。

• ステートメントの最後にはセミコロン(;)を記述する
• 命令は大文字・小文字が厳密に区別されています

画面上部にある「無題のプロジェクト」というのは、プロジェクトのタイトルです。こちらは自由に書き換えて構いません。 この場合は、例えば「スプレッドシート作成」などと設定しましょう。「myFunction」は、関数名です。実行する内容に合わせて書き換えるとプロジェクトが大きくなったときにわかりやすいでしょう。

ここでは、Logger.log(“Hello! GAS!”);と書きます。Logger.log()はGASでログ（履歴のようなもの）を表示するために使用する関数です。

書いたコードを保存する。

「保存」ボタンをクリックするか又は、[Ctrl + S]で保存出来ます。「コード.gs」に付いているオレンジの印が消えたら「保存完了」。○コード.gsとして○がついている時は、保存されていないことを意味します。

保存すると○は消えます。スプレッドシートやドキュメントと異なり、GASのスクリプトは自動保存ではありません。

コードを実行する

「実行」ボタンをクリックをクリックするか又は、[Ctrl+R]で実行できます。

上のようなログが表示されたら成功です。
留意:GASのスクリプトは関数単位で実行します。
ファイルに複数の関数を入力している時には、目的の関数を選択しておく必要がありますので、ご注意下さい。プルダウンで実行したい関数を選択します。

コメントアウトの方法

コメントアウトのやり方は2パターンあります。

先頭に//を付ける(各行)

コメントアウトしたい行のどこでもよいのでカーソルを位置づけて、CTRL+/を押します。
※再度CRTL+/で解除されます。

「/*と/」で囲む(複数行)

ショートカットはないので、手入力します。

スプレッドシートの構成

スプレッドシートの構成

スプレッドシートは、4つクラスで構成されています。GASにおいて、スプレッドシートを操作するためのクラスを提供するのがSpreadsheetサービスです。

SpreadsheetAppクラスから、Spreadsheetクラス→Sheetクラス→Rangeクラスと配下になるに従って枠が限定されている階層構造となっています。クラスは、「便利な関数(function)をグループ分けする箱」で、クラスに所属する関数をメソッドと捉えます

スクリプトの構成

プログラムは、基本的には3つの要素から成り立っています。簡単に説明すると、操作対象を表す「オブジェクト」、”動き”を表す「メソッド」、”状態”を表す「プロパティ」の3要素から成り立っています。オブジェクトはプロパティで管理(オブジェクトの内容や詳細、属性)されていて、プロパティの値に数値や文字列が入っているものがプロパティ、プロパティの値に関数が入っているものがメソッドとなります。

オブジェクト

プログラムでは、「何かをどうする」と言った形で命令を書きます。この「何を」がオブジェクトになります。GASではスプレッドシートをはじめ各サービスの操作対象とするモノを「オブジェクト」と言い、次のようなオブジェクトが用意されています。

• アプリケーション:SpreadsheetAppオブジェクト
• スプレッドシート：Spreadsheetオブジェクト
• シート：Sheetオブジェクト
• セル範囲：Rangeオブジェクト

そしてオブジェクトはスプレッドシートのアプリケーション→スプレッドシート(ブック)→シート→セルという階層構造になっています。また、これらを操作するために、メソッドとよばれるたくさんの命令が用意されています。

[ 処理内容 ]
例えば、スプレッドシート「社員名簿」のシート「ハッピイ1号館」のD3セルの値を取得するという処理は、次のようになります。

1. スプレッドシート「社員名簿」を、Spreadsheetオブジェクトとして取得する
2. そのSpreadsheetオブジェクトの配下にあるシート「ハッピイ1号館」を、Sheetオブジェクトとして取得する
3. そのSheetオブジェクトの配下にあるD3セルを、Rangeオブジェクトとして取得する
4. そのRangeオブジェクトの値を取得する

メソッド

メソッドはオブジェクトに対する命令です。getActiveScriptSheet、getSheetByName、getActiveSheet、getRange、setValue等はメソッドとなります。VBAではプロパティになります。

1. getActiveScriptSheetを実行して、アクティブなスプレッドシートを受け取り、
2. getSheetByNameを実行して、シート(社員名簿)を受け取り、
3. .getRangeを実行して、セル(D3)を受け取り、
4. .getValueを実行して、セルの値(54)を取得します。

スクリプトを書く

それでは、実際にスクリプトを書いてみます。スプレッドシートのシート1のA1セルに「Hello! GAS!」という文字を書き込んでみます。

A1に値を入れる

スプレッドシートの作成

現在、A1セルは空白です。ここに「Hello!! GAS!」という文字を書き込みます。A1セルに「Hello! GAS!」という文字を書き込むスクリプトを入力してみます。

スクリプトの作成

「拡張機能」タブから「Apps Script」をクリックします。

A1セルを特定する為にSpreadsheetAppクラスから、Spreadsheetクラス→Sheetクラス→Rangeクラスと階層を特定する必要があります。

SpreadsheetApp.getActiveSpreadsheet();

SpreadsheetAppは、スプレッドシート全体を意味するトップレベルのオブジェクトです。
constは、変数宣言で、varとletとは異なり再代入／再宣言のできない宣言方法です。

getActiveSpreadsheet()メソッドは、アクティブなスプレッドシートを取得します。つまりSpreadsheetApp.getActiveSpreadsheet()は、「スプレッドシート全体の中から、アクティブなスプレッドシートを取得せよ」という命令です。その結果(戻り値)を、変数「SS」に格納していますので、変数「SS」には、「アクティブなスプレッドシート(Spreadsheetオブジェクト)」が格納されているのです。

ss.getSheetByName(“シート1”);

Spreadsheetオブジェクトの配下にあるシート(“シート”)を、getSheetByNameメソッドを実行して、Sheetオブジェクトとして取得します。

sheet.getrange(“A1”);

Sheetオブジェクトの配下にあるA1セルを、getRangeメソッドを実行して、Rangeオブジェクトとして取得します。

range.setValue(“HELLO! GAS!”);

A1セルに”Hello! GAS!”という文字をセット(書き込みます)します。

スクリプトの実行

スクリプトができましたので、実行してみます。

注意:
スクリプトを初回実行するとき次のような承認画面が表示された場合は承認作業を行ってください。
手順はこちら。

実行結果

A1セルの値をB1へ

次に、A1の値を取得して、B1に書き込む場合のスクリプトの書き方をやってみます。現在A1セルには、「こんにちは!!」という文字が書き込まれています。この文字を取得して、B1セルに書き込みます。

スクリプトの作成

まずは、どこに値をいれるのか?でgetRange(“B1”)を指定して、setValue()で値をsetします。その値は、どこの値か?でgetRange(“A1”)を指定して、getします。

実行結果

承認の方法

スプレッドシートやフォームなどのサービスと連携させる処理を行うと初回起動時のみ承認作業が必要です。アクセス許可が必要なのは、アカウント毎ではなく、1つのアプリ(スプレッドシート毎)に対して必ず1度承認しないといけません。

権限を確認

最初に実行する場合は、認証が必要となります。

「詳細」をクリック

「詳細」から「無題のプロジェクト(安全ではないページ)に移動」をクリックします。

「許可」をクリック

スプレッドシートの操作

スプレッドシートの取得

SpreadsheetAppの配下のスプレッドシートファイルを取得します。

[ スプレッドシートの取得方法 ]
スプレッドシートの取得方法は、3つあります。

• アクティブなスプレッドシートを取得する方法
• URLを使って取得する方法
• IDを使って取得する。

アクティブなスプレッドシートを取得する方法

コンテナバインドスクリプトで有効な方法です。Excelで言えば「ブック」にあたります。

URLを使って取得する方法

バインドされていないスプレッドシートを取得する方法です。

ドライブIDとURLは、ファイルやフォルダを移動しても不変です。スクリプトを作成した後にファイルの場所やフォルダ構成を変更しても、スクリプトに記述したID、URLを修正する必要はありません。

IDを使って取得する方法

バインドされていないスプレッドシートを取得する方法です。

スプレッドシートのコピー

GASでスプレッドシートをコピーします。ここでは、以下の「無題のスプレッドシート」の複製を作成します。

スクリプトの作成

実行結果

スプレッドシートが複製されました。

シートの操作

シートの取得

[ シートの取得方法 ]
スプレッドシートの取得方法は、3つあります。

• SpreadsheetAppクラスからアクティブシートを取得する方法
• Spreadsheetクラスからシート名で取得する方法
• Spreadsheetクラスから配列で取得する方法。

SpreadsheetAppクラスからアクティブなシートを取得する。

クラスが持っている機能 (メンバー)を使用する方法です。例えばSpreadsheetAppクラスのgetActiveSheet()というメンバーを使ってSpreadsheetクラスを飛び越え、Sheetを取得する方法です。

シート名を特定せず、アクティブなシートが対象となりますのでご注意下さい。この例では、シート1がアクティブとなっている為、シート1に「Hello! GAS!」が書き込まれています。

Spreadsheetクラスからシート名で取得する方法

シート名を指定するので、わかりやすいメリットはありますが、シート名を変更した際は、スクリプトも変更する必要があります。

Spreadsheetクラスから配列で取得する方法

SpreadsheetクラスのgetSheets()というメンバーを使って配列として取得する方法です。getSheets()で全シートを取得して、配列を指定してシートを特定します。

この方法のメリットは、将来シート名を変更した場合でも、動作に影響がないことです。但し、シートの順番に変更が生じると配列に格納されている順番もかわってしまいますので注意が必要です。
※一番左のシートがインデックス0となります。

シートのコピー

スプレッドシートから取得したシートに対してSheetクラスで提供されるメソッドを使うことで様々な操作を行うことができます。

copyTOメソッド

SheetクラスのcopyTOメソッドは、対象のシートをコピーします。

シートのコピーができました。

留意:
コピー対象の元シートが1つしかない場合は、シートの取得はgetActiveSheetで良いですが、アクティブなシートがづれていたりすることがありますので、複数のシートがある場合は、コピー専用の元シートを作成して、シート名を指定するgetSheetBynameで取得するのが良いでしょう。

getSheetByNameメソッド

シート名をセットする。

copyToメソッドでコピーしたコピーしたシートは、「(元シート名)のコピー」という名前となりますので、任意の名前に変更する場合は、SheetクラスのsetNameメソッドを使います。

シートをクリアする。

書式は残して値や数式をクリアするには、SheetクラスのclearContentsメソッドを使いますが、コピーしたシートはタイトルは残して中はクリアしたい場合が多いと思います。その場合は、RangeクラスのclearContent(末尾のsは不要)メソッドを使います。文字色・背景色・罫線などの書式はクリアされません。

留意:
シートのコンテンツをすべてクリアするにはSheetオブジェクトに対してclearContentsメソッドを使用しますが、このような”タイトルを残して”という特定範囲のコンテンツをクリアするにはRangeオブジェクトに対してclearContentメソッドを使用します。

セルの操作

セルを指定して取得する。

セルやセル範囲を指定して取得する方法として代表的なものは、2つあります。

• アドレスを指定して取得する方法
• 行列を指定して取得する方法

以下のシートを例に解説します。

アドレスを指定して取得する方法

SheetクラスのgetRange()というメンバーを使ってA1やA1:C1というようにセル番号(アドレス)を指定として取得する方法です。ここでは、中田朋子さんの年齢(D3)を取得します。

行列を指定して取得する方法

SheetクラスのgetRange()というメンバーを使って行列を指定して範囲を取得する方法です。中田朋子さんの年齢は、3行目の4列目なので、getRange(3,4)となります。

複数行を取得する。

岩井さんから池田さんまで、年齢を全て表示します。セルが1つの時は、getValueを使いますが、セルが複数の場合はgetValuesメソッドを使います。

注意:
取得した値は二次元配列となっていますので、arr[縦インデックス][横インデックス]の様にインデックスを指定するか?for文で配列を先頭から取り出すなどします。

範囲を取得する。

全員の氏名から年齢までを取得します。取得する範囲の開始セルを指定して、そこから何行分、何列分取り出すかを指定します。

セル範囲を自動で取得する

セル範囲が固定しているのであれば、セル番号やセル範囲を指定して取得することで問題はありませんが、データが追加されて取得すべきセル範囲が変わることは良くあります。例えば、新しい社員が入社したり、退職したりすると社員名簿の取得すべきセル範囲は大きく変わります。

セル範囲を自動で判別して取得する

getDataRangeメソッドは、シートにデータが存在する範囲を自動的に判別してセル範囲を取得します。ここでは、社員名簿に2名を追加してみます。

データのあるA1からF7までの範囲が自動的に判別されて取得されたことが確認できます。
注意:
1行目や1列目を空白行や空白列とすると、空白行や空白列も含めたセル範囲が取得されますので注意願います。

最終行、最終列を自動で判別して取得する。

データが存在する最終行を取得するgetLastRowメソッドと、最終列を取得するgetLastColomnをgetRangeメソッドと組み合わせて使います。

列から「性別」を削除して、行から「池田沙也加」さんと「冴木美恵」さんを削除しました。

セル値の取得・セット

セル範囲の値を取得する。

RangeクラスのgetValueメソッドは、セル範囲のRangeオプジェクトから各セルに入力されている値を取得します。

getValuesメソッドでは、セル範囲の値は、2次元配列として取得されます。

セル範囲から「見出し行」を削除する。

getRange(“A2:F7”)という固定値で指定してセル範囲を取得する場合は、見出しを外して指定しますが、セル範囲を自動で取得するgetDataRangeメソッドを使って取得する場合は、1行目の見出し行も含まれてしまいます。

配列から先頭データを取り除くshiftメソッドでvaluesから見出し行のデータを削除します。

セル範囲に値をセットする。

RangeクラスのsetValueメソッドは、セル範囲に引数で指定した値をセットします。6行目と7行目に次の社員の名簿をセットします。
[“冴木美恵”,”さえきみえ”,”女”,39,”訪問介護員”,””],
[“静根裕典”,”しずねひろのり”,”男”,35,”訪問介護員”,”管理者”]

Bingウェブマスターツールの登録方法

Bingウェブマスターツールへの登録をお考えの方は、「Googleサーチコンソール」や「Googleアナリティクス」を既に利用されていると思われますので、問題ないかとは思いますが、Bingウェブマスターツールへの登録の前、まず先に、Googleサーチコンソールに登録をしておいて下さい。Googleサーチコンソールからデータをインポートできますので、タグの設置や所有権の確認などの手間なく、簡単に登録ができます。

サイトへアクセス

公式サイトへアクセスして(https://www.bing.com/webmasters/about)、「サインイン」をクリックします。

アカウントの登録

サインイン

ここでは、googleアカウントで登録します。

アカウントの選択

連携するアカウントを選択します。(Bingウェブマスターツールへ登録します。)

データのインポート

「自分のサイトをGSCからインポート」を選択

左側の「インポート」をクリックします。(Googleサーチコンソールからインポートします。)
注意:右側の゛自分のサイトのURL゛を入力する必要はありません。

インポート内容の表示

インポート内容が表示されますので、確認して「続行」をクリックします。

アカウントの選択

Googleサーチコンソールからデータをインポートする為に、アカウントを選択して、「許可」をクリックします。

インポートするサイトの選択

Googleサーチコンソールに登録しているサイトのURLが表示されますので、必要なサイトを選択して「インポート」をクリックします。
※全てのサイトをインポートする場合は、そのまま「インポート」をクリックします。

完了

インポートが終わりましたので、「完了」をクリックします。これで、Bingウェブマスターツールの登録は完了です。

Bingウェブマスターツールの使い方

色々な機能がありますが、「Googleサーチコンソール」や「Googleアナリティクス」を利用されている方であれば使い方や見方は、説明の必要はないと思いますので、ここでは、メインの「検索パフォーマンス」と「SEOレポート」についてご紹介します。

検索パフォーマンス

Bingウェブマスターツールと、Googleサーチコンソールの画面を比較して見ます。ここは、どちらもそれほど変わりません。

Bingウェブマスターツール

Googleサーチコンソール

SEOレポート

このSEOレポートは、Googleサーチコンソールにはない機能です。SEO対策としてできていない箇所を具体的に指摘してくれますので、どこを直せば良いのかがすぐにわかります。SEO対策に詳しくない者にとっては、とても勉強になります。

例えば、標記の「説明が長すぎか、短すぎます。」というエラーは、私の場合、カテゴリーページにdescriptionが記載されていなかったエラーです。早速、カテゴリーページに記載してエラーは解除できました。
※カテゴリーページにもdescriptionが必要なことを気づかされました。

noindex,nofollowとは

noindex

noindexタグは、ウェブページをインデックスさせたくない、つまり検索結果に表示させたくないときに使います。設定したページがgoogleの検索エンジンからインデックスされないようにするための構文です。

noindexの設定理由

標記の通り、コンテンツが薄いページであったり、重複コンテンツになっているページはそのページだけでなく、ドメイン全体の評価に悪影響を及ぼします。例えばCMSで自動生成される様な、アーカイブ、タグ、検索結果ページで、他と重複が発生しますので、noindexを設定します。

noindexの設定方法

noindexとしたいページのHTMLのheadセクションに次のコードを記述します。

<meta name=”robots” content=”noindex” />

※XHTMLで記述するときは、最後を「/>」で終了します。
metaタグで記述した場合はページ全体に対して有効になります。
ワードプレスを使っている場合はAll in One SEOで簡単に設定することができます。

nofollow

設定したリンクに対してクローラーが辿る事を禁止する設定です。nofollowを設定していないリンクには移動しますが、nofollowが設定されているリンクには移動しないことになります。

nogollowの設定理由

例えば、アフィリエイリンクや、お金をもらって紹介記事を書くような有料リンクには、nofollowを入れなければなりません。Googleも有料リンクへのfollowを禁止しています。又、ブログのコメント欄にスパムリンクを張られる場合がありますので、コメント欄は、nofollowとしておくことが必要です。

nofollowの設定方法

①ページ全体のリンクをnofollowとする場合

nofollowタグは、HTMLのheadセクションに次のコードを記述します。

<meta name="robots" content="nofollow">

metaタグで記述した場合はページ全体に対して有効になります。

②個別のリンクをnofllowとする場合

<a rel="nofollow" href="http://hogehoge/" >

上記のように、aタグに「rel=”nofollow”」と記載すると、リンク個別にnofollow設定を反映する事が可能です。
aタグで記述した場合はそのリンクに対してのみ有効になります。

ソースを開いて確認

私のサイトでは、日付別アーカイブは「ALL in One SEO Pack」でnoindexに設定しています。



ソースを見てみると、

<meta name="robots" content="noindex,follow">

となっていて、間違えなく、日付のアーカイブは、インデックスされないようになっています。但し、これをサイトの頁すべてで確認することは、現実的に不可能です。

【WordPress】検索エンジンに表示させないnoindex設定と確認方法

WordPressの作成途中のサイトや、特定の人にだけ見せるデモサイト、会員サイトなどを検索エンジンに表示させたくない場合のnoindex設定と確認方法をご紹介します。絶対に見られたくない場合は、BASIC認証をお薦めします。

gungii.com

2024.07.25

ブラウザを閲覧して確認

ブラウザでページを閲覧して、noindex,nofollowを確認する。

FireFox

アドオン「The Addon Bar」の設定

これにより、ブラウザの下にアドオンバーを表示します。
https：//addons.mozilla.org/ja/firefox/addon/the-addon-bar/

アドオン「Seerobots」の設定

アドオンバーに、noindex,nofolloeの状態が表示されます。
https：//addons.mozilla.org/ja/firefox/addon/seerobots/

noindex,nofollowの確認

ブラウザで該当のページを閲覧すると、右下にアドオンバーが表示されます。
①表示の識別

ア．noindex,nofollowとも適用されていない。

イ．noindex=ON,nofollow=OFF

ウ．noindex,nofollowともに適用されている。

ページ内のnofollowリンクの確認

アドオンバーの確認では、ページ全体のniindexやnofollowの確認でしたが、ページ内に貼られているリンクにnofollowがついているのかを確認します。
①アドオン「Highlight NoFollow links」の設定

https://addons.mozilla.org/ja/firefox/addon/highlight-nofollow-links

addons.mozilla.org

②nofollowリンクの確認

該当のページを閲覧すると、以下のようにnofollowリンクには、赤い点線枠が付きます。

google

googlechromeの拡張機能で、「NoFollow」を追加する。

NoFollowを検索

Chromeに追加

noindex,nofollowの確認

ブラウザで該当のページを閲覧すると、右下にアドオンバーが表示されます。

①表示の識別

ア．noindex,nofollowとも適用されていない。

この場合は、何も表示されません。

イ．noindex=ON,nofollow=OFF/noindex=OFF,nofollow=ON

ウ．noindex,nofollowともに適用されている。

ページ内のnofollowリンクの確認

アドオンバーの確認では、ページ全体のniindexやnofollowの確認でしたが、ページ内に貼られているリンクにnofollowがついているのかを確認します。

nofollowリンクには、赤い点線枠が付いています。

Web認印で印影作成

白舟書体がフリーで提供している電子印鑑作成ツール「Web認印」で、PDFや電子印鑑にも使える認印を作成して、電子印鑑eight判の陰影として読込、押印する。
留意：
eight判でも陰影を作成できますが、「Web認印」で作成した陰影は、格段の差です。シャチハタにもフォントを提供している株式会社白舟書体が提供しているフォントにつき見栄えが全く違います。

Web認印の起動

http：//www.hakusyu.com/webmtm/

苗字の入力

印影をダウンロード

上の画面を綴じて、下の画面で陰影をダウンロード

印影の保存

陰影の上で、右クリック

ファイル名の変更

陰影ファイルを見て、誰の陰影かわかる様にファイル名を変更します。

eight判で印影の読み込み

eightban.exeの起動

Web認印で作成した印影の読み込み

読込のレ点をチェック

ファイルの種類(T)の選択

①pngで検索

pngで検索すると、innei-nakamura.pngが表示されますので、選択します。

②読み込み欄へのURLの取り込み

印影の読み込み

①画面の表示

注意：読込で、C:￥Users￥N2￥Desktop￥eightban37￥innei_nakamura.pngとURLが参照されますので、innei_nakamura.pngをより移動させますと、陰影が消えてしまいますので、ご注意ください。

②設定の変更

以前の陰影の設定が残っていたら、変更します。

③大きさの変更

eight判のショートカットの作成

ExcelやWordを使用している際に、印鑑がすぐに使用できるようショートカットを作成しておきます。
留意：
ショートカットのリンク先を指定しておけば、ショートカットのクリックで、印影がクリップボードに書き込まれますので、印影をそのまま貼り付けることができます。

ショートカットのプロパティ変更

プロパティ画面の表示

プロパティのリンク先変更

ショートカットの移動

使いやすいように、ショートカットをデスクトップへ出しておきます。

eight判で捺印

ショートカットのWクリック

作成した印影のショートカットをWクリックすることで、印影をクリップボードに書き込みます。

捺印

ショートカットをクリックした後、右クリックで、「貼り付け(P)」を選択すると、押印されます。

eight判のダウンロード

http：//www.vector.co.jp/soft/winnt/business/se420082.html

eight判のインストール

eight判の使い方

印影の作成

eightban.exeの起動

印影の選択

印影は、予め、次の3つが用意されていますので、いづれかを選択した後、変更します。

①iniの選択

初期値として、以下のデート印が表示されますので、デート印の変更であればそのまま変更します。

②iniの読み込み

a.「別名設定読込」をクリックします。

b.該当のiniを選択します。

③iniの表示

印影の作成

①所属の入力

「人事部」と入力して、横方向は0とします。

②予備1の削除

「課長」の文字が重なっていますので、ㇾ点を消して、非表示にします。

③名前の入力

④色の設定

Clolorをクリックすると印影及び文字の色を選択できます。

⑤終了

印影が作成できましたら、終了をクリックします。

⑥印影の保存

a.別名設定保存

上記の印影は残したまま、別の印影を作成する場合は、終了時に「別名設定保存」をクリックします。

b.印影に名前を付けて保存

ショートカットの作成

電子印鑑のショートカット作成

ExcelやWordを使用している際に、印鑑がすぐに使用できるようショートカットを作成しておきます。
留意：
ショートカットのリンク先を指定しておけば、ショートカットのクリックで、印影がクリップボードに書き込まれますので、印影をそのまま貼り付けることができます。

ショートカットのプロパティ変更

プロパティ画面の表示

プロパティのリンク先の変更

ショートカットをデスクトップへ移動

使いやすいように、ショートカットをデスクトップへ出しておきます。

eight判で捺印

ショートカットのクリック

作成した印影のショートカットをクリックすることで、印影をクリップボードに書き込みます。

捺印

ショートカットをクリックした後、右クリックで、「貼り付け(P)」を選択すると、押印されます。

しかし、押印が必要となると、せっかくExcelやWordのデータで文書を作成したにもかかわらず、データをプリントアウトし、押印したあと、紙の文書でやりとりをするということをやっている人が、結構多いと思います。
そんなとき、使えるのが「電子印鑑（デジタルはんこ）」です。
電子印鑑は、ネットで検索すれば、フリーソフトも簡単に検索できます。簡単には、手持ちの印鑑を白い紙に押して、それをスキャナーで読み取り、画像編集ソフトを使って切り取り、必要に応じて書類のデータにペーストすることでもできます。電子印鑑は思っている以上に簡単に作れますが、反対に偽造も簡単です。

そこで、気になるのは、電子印鑑が「どんな書類でも使えるのか？」ということです。

結論から言いますと、電子印鑑に法的な効力がないため、現状では個人や企業内での社内文書など「認印」としての使用に限られます。「電子印鑑」 というのは単なる画像の貼り付けなので、法律上は捺印として認められていません。
請求書や見積書は捺印が無くても有効ですので、「電子印鑑」を押印してそのままPDFで送付することもできますが、トラブルが発生した場合に 「捺印していない請求書」が、会社にとって不利な状況になることも考えられます。
（相手先も相互に認めていれば電子印鑑で効率化することはできます。)

社外との取引にまつわるような書類や法定文書など公式な書類を電子ファイルで送付する場合は、電子印鑑とは別に「電子署名」を行うことが必要です。

結果として、現状では、「電子印鑑」の使用は、個人や企業内での社内文書（例えば、業務日報、出勤簿、残業申請書、有休申請書、稟議書、出張清算書など）に限っての使用となりますが、それでも、1度もプリントアウトせずにパソコン上で作業を完了することができることは、大きなメリットです。