<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>GAS | nujonoa_blog</title>
	<atom:link href="https://nujonoa.com/tag/gas/feed/" rel="self" type="application/rss+xml" />
	<link>https://nujonoa.com</link>
	<description>人生に役立つデータ集</description>
	<lastBuildDate>Tue, 26 Mar 2024 01:42:12 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.5</generator>

<image>
	<url>https://nujonoa.com/wp-content/uploads/2019/04/cropped-DSC00976-e1554456145409-32x32.jpg</url>
	<title>GAS | nujonoa_blog</title>
	<link>https://nujonoa.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>gasでセルの一覧からファイル一覧を作成する方法</title>
		<link>https://nujonoa.com/how-to-create-a-file-list-from-a-list-of-cells-with-gas/</link>
					<comments>https://nujonoa.com/how-to-create-a-file-list-from-a-list-of-cells-with-gas/#respond</comments>
		
		<dc:creator><![CDATA[nujonoa]]></dc:creator>
		<pubDate>Tue, 26 Mar 2024 01:42:09 +0000</pubDate>
				<category><![CDATA[GAS]]></category>
		<category><![CDATA[未分類]]></category>
		<category><![CDATA[フォルダ]]></category>
		<category><![CDATA[ファイル]]></category>
		<category><![CDATA[作成]]></category>
		<guid isPermaLink="false">https://nujonoa.com/?p=24169</guid>

					<description><![CDATA[gasでセルの一覧からファイル一覧を作成する方法 c列の名前一覧からファイルを作り、特定のフォルダに保存。d列にそのリンクを追加するプログラムです。 適宜シート名、フォルダID、列を変更して使用ください。]]></description>
										<content:encoded><![CDATA[
<h2 class="wp-block-heading">gasでセルの一覧からファイル一覧を作成する方法</h2>



<p>c列の名前一覧からファイルを作り、特定のフォルダに保存。<br>d列にそのリンクを追加するプログラムです。<br><br>適宜シート名、フォルダID、列を変更して使用ください。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
function createSpreadsheetFromColumnC() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('Sheet1'); // シート名を適宜変更してください
  var folder = DriveApp.getFolderById('FolderID'); // フォルダIDを適宜変更してください

  var range = sheet.getRange('C:C'); // C列の範囲を取得
  var values = range.getValues(); // C列の値を取得

  for (var i = 0; i &lt; values.length; i++) {
    var fileName = values&#x5B;i]&#x5B;0];
    if (fileName !== '') { // ファイル名が空でない場合
      var newSpreadsheet = SpreadsheetApp.create(fileName); // ファイル名で新しいスプレッドシートを作成
      var fileId = newSpreadsheet.getId(); // 新しいスプレッドシートのIDを取得

      // 新しいスプレッドシートの親フォルダを変更して移動
      var file = DriveApp.getFileById(fileId); // 新しいスプレッドシートを取得
      var newFile = file.moveTo(folder); // 新しいスプレッドシートを指定のフォルダに移動
      
      // スプレッドシートのリンクを取得してD列に書き込む
      var spreadsheetLink = SpreadsheetApp.openById(newFile.getId()).getUrl();
      sheet.getRange('D' + (i + 1)).setValue(spreadsheetLink);
    }
  }
}

</pre></div>]]></content:encoded>
					
					<wfw:commentRss>https://nujonoa.com/how-to-create-a-file-list-from-a-list-of-cells-with-gas/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【GAS】フォルダ内の画像をセル内に挿入する方法！</title>
		<link>https://nujonoa.com/gas-paste-the-image-in-the-cell/</link>
					<comments>https://nujonoa.com/gas-paste-the-image-in-the-cell/#respond</comments>
		
		<dc:creator><![CDATA[nujonoa]]></dc:creator>
		<pubDate>Mon, 25 Apr 2022 10:50:00 +0000</pubDate>
				<category><![CDATA[GAS]]></category>
		<category><![CDATA[image]]></category>
		<category><![CDATA[push]]></category>
		<guid isPermaLink="false">http://nujonoa.com/?p=13893</guid>

					<description><![CDATA[目次 【GAS】フォルダ内の画像一覧表を作るプログラム！早速プログラムの紹介！コード紹介プログラム内容説明フォルダの中のファイル一覧を取得ファイル一覧から情報を抜き出し、配列に代入setvaluesで書き込み。プログラム [&#8230;]]]></description>
										<content:encoded><![CDATA[

  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-4" checked><label class="toc-title" for="toc-checkbox-4">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">【GAS】フォルダ内の画像一覧表を作るプログラム！</a></li><li><a href="#toc2" tabindex="0">早速プログラムの紹介！</a></li><li><a href="#toc3" tabindex="0">コード紹介</a></li><li><a href="#toc4" tabindex="0">プログラム内容説明</a><ol><li><a href="#toc5" tabindex="0">フォルダの中のファイル一覧を取得</a></li><li><a href="#toc6" tabindex="0">ファイル一覧から情報を抜き出し、配列に代入</a></li><li><a href="#toc7" tabindex="0">setvaluesで書き込み。</a></li></ol></li><li><a href="#toc8" tabindex="0">プログラムのポイント</a></li><li><a href="#toc9" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">【GAS】フォルダ内の画像一覧表を作るプログラム！</span></h2>



<p>GASを用いて、</p>



<p>・スプレッドシートにグーグルドライブのファルダ内のファイルの一覧を作る</p>



<p><span class="marker-animation-2071">・さらに、セル内に画像を挿入する！！</span></p>



<p>プログラムを紹介していきたいと思います！</p>



<h2 class="wp-block-heading"><span id="toc2">早速プログラムの紹介！</span></h2>



<p>早速プログラムを紹介していきたいと思います！</p>



<p>今回作成するプログラムは、下のリンクのものとなっており、</p>



<p>・セル「G2」に入力したドライブのIDをもとに、<br>・ドライブの中のファイル一覧を書き出し、<br>・画像を表示させていくプログラムになります。</p>




<a rel="noopener" target="_blank" href="https://docs.google.com/spreadsheets/d/1lDZu6dn6HeAfDD317Hz-X0P1_BqYOdqPAB8a-MmGRx8/edit#gid=525857928" title="【公開用】image抜き出し" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-right cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img decoding="async" src="https://lh7-us.googleusercontent.com/docs/AHkbwyK5hzzSC7y6WhFyiivegaiCOfaAGZ3bBP99qiJcf3VB-saJM9uYxAepE2l2SEgahs2piMFonOvAldNDCTmaZsnlmJqNawiX-IjQmC0Eu9dzaKXEAWe9=w1200-h630-p" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">【公開用】image抜き出し</div><div class="blogcard-snippet external-blogcard-snippet"></div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img decoding="async" src="https://www.google.com/s2/favicons?domain=https://docs.google.com/spreadsheets/d/1lDZu6dn6HeAfDD317Hz-X0P1_BqYOdqPAB8a-MmGRx8/edit?usp=embed_facebook" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">docs.google.com</div></div></div></div></a>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="493" height="674" src="https://nujonoa.com/wp-content/uploads/2020/08/image-5.png" alt="" class="wp-image-6706" srcset="https://nujonoa.com/wp-content/uploads/2020/08/image-5.png 493w, https://nujonoa.com/wp-content/uploads/2020/08/image-5-300x410.png 300w" sizes="(max-width: 493px) 100vw, 493px" /><figcaption>プログラム例</figcaption></figure>



<p>プログラムを書くのがめんどくさいという方は、ダウンロードしてまずは使用してみてください。</p>



<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<p>そのままですと閲覧のみ可能になっていますので、<br>ファイル→コピーを作成で、自分のスプレッドシートにコピーを作成してください。</p>



<div class="wp-block-cocoon-blocks-toggle-box-1 toggle-wrap toggle-box block-box"><input id="toggle-checkbox-20200809233634" class="toggle-checkbox" type="checkbox"/><label class="toggle-button" for="toggle-checkbox-20200809233634">スプレッドシートをコピーする方法(クリックして開く)</label><div class="toggle-content">
<div class="wp-block-image"><figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="394" height="781" src="https://nujonoa.com/wp-content/uploads/2020/08/2020-08-09_23h24_07-3.png" alt="" class="wp-image-6679" srcset="https://nujonoa.com/wp-content/uploads/2020/08/2020-08-09_23h24_07-3.png 394w, https://nujonoa.com/wp-content/uploads/2020/08/2020-08-09_23h24_07-3-300x595.png 300w" sizes="(max-width: 394px) 100vw, 394px" /><figcaption>スプレッドシートをコピーする方法</figcaption></figure></div>
</div></div>
</div></div>



<h2 class="wp-block-heading"><span id="toc3">コード紹介</span></h2>



<p>では、今回使用したコードを紹介したいと思います。<br>※ダブルクリックでコピーできます。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
function getPicID2() {
   
  SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,1,1000,4).clearContent()
   
  var Driveid=  SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,7).getValue()
   
   
  // フォルダ内のファイルを一括取得
  var files = DriveApp.getFolderById(Driveid).getFiles();  
//  var files = DriveApp.getFolderById(&quot;1EXmXX0jzBONqx4tsKvytHQfxLwhgYy94&quot;).getFiles();
  // 配列を宣言
  var Pic = &#x5B;];
  // 配列に「名前」「URL」「ID」
  while(files.hasNext()) {
    //一括取得したファイルの中から順に一つ取り出す
    var file = files.next();

    if(file.getName().match(/jpg/) ||　file.getName().match(/png/)){
  //ドライブから画像を取得
  var PicID = file.getId()　　　//画像のファイルID
  var blob = DriveApp.getFileById(PicID).getBlob();
 
  //base64に変換
  var c_type = blob.getContentType();
  var base64 = Utilities.base64Encode(blob.getBytes());
  var data = &quot;data:&quot; + c_type + &quot;;base64, &quot; + base64;

  var image = SpreadsheetApp.newCellImage()
                            .setSourceUrl(data)
                            .build();
  }else{
    image=&quot;&quot;
  }

    //「名前」「説明」「URL」をそれぞれ格納
    Pic.push(&#x5B;
      file.getName(),
      file.getUrl(),
      file.getId(),
      &quot;=image(\&quot;https://drive.google.com/uc?id=&quot;+file.getId()+&quot;\&quot;)&quot;,
      image
    ]);
  }
 
  
  SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,1,Pic.length,Pic&#x5B;0].length).setValues(Pic)
   
}

/*
参考URL

<a rel="noopener" target="_blank" href="https://officeforest.org/wp/2019/04/16/google-apps-script%E3%81%A7%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AB%E7%94%BB%E5%83%8F%E3%82%92%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%82%8B/#i-10" title="Google Apps Scriptでスプレッドシートに画像を貼り付ける【GAS】 | 🌴 officeの杜 🥥" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-right cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://officeforest.org/wp/wp-content/uploads/2020/10/spreadsheets-icon.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Google Apps Scriptでスプレッドシートに画像を貼り付ける【GAS】 | 🌴 officeの杜 🥥</div><div class="blogcard-snippet external-blogcard-snippet">年度初めは忙しく、今年度こそこれまで作りためたGASアプリを全公開しようと目論んでいるのですが、GWまでは十分な時間が取れそうにない。そんな時ようの小ネタもいくつか蓄えています。 そんな中、Googleスプレッドシートの機能増強の中で地味な</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://officeforest.org/wp/google-apps-script%e3%81%a7%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%83%89%e3%82%b7%e3%83%bc%e3%83%88%e3%81%ab%e7%94%bb%e5%83%8f%e3%82%92%e8%b2%bc%e3%82%8a%e4%bb%98%e3%81%91%e3%82%8b%e3%80%90gas/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">officeforest.org</div></div></div></div></a>
*/
</pre></div>


<h2 class="wp-block-heading"><span id="toc4">プログラム内容説明</span></h2>



<p>ではプログラムの詳細を説明していきましょう。</p>



<h3 class="wp-block-heading"><span id="toc5">フォルダの中のファイル一覧を取得</span></h3>



<p>①フォルダを指定して(getFolderbyId)、その中のファイルすべてを指定します(getFiles())。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
  var Driveid=  SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,7).getValue()
  
  
  // フォルダ内のファイルを一括取得
  var files = DriveApp.getFolderById(Driveid).getFiles();  
</pre></div>


<h3 class="wp-block-heading"><span id="toc6">ファイル一覧から情報を抜き出し、配列に代入</span></h3>



<p>②ファイルの情報を配列に入れていきます。<br>　・hasNext()でファイルが終わるまで繰り返し、<br>　・Pic.push=([名前,URL,ID,image関数])の4列の配列を積み重ねていきます。<br>　・<a rel="noopener" target="_blank" href="https://officeforest.org/wp/2019/04/16/google-apps-script%E3%81%A7%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AB%E7%94%BB%E5%83%8F%E3%82%92%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%82%8B/#i-10">このリンク先<span class="fa fa-external-link external-icon anchor-icon"></span></a>を参考に、セル内に画像貼り付けできるデータに変換(blob⇒Base64データ)</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
  // 配列を宣言
  var Pic = &#x5B;];
  // 配列に「名前」「URL」「ID」
  while(files.hasNext()) {
    //一括取得したファイルの中から順に一つ取り出す
    var file = files.next();

    if(file.getName().match(/jpg/) ||　file.getName().match(/png/)){
  //ドライブから画像を取得
  var PicID = file.getId()　　　//画像のファイルID
  var blob = DriveApp.getFileById(PicID).getBlob();
 
  //base64に変換
  var c_type = blob.getContentType();
  var base64 = Utilities.base64Encode(blob.getBytes());
  var data = &quot;data:&quot; + c_type + &quot;;base64, &quot; + base64;

  var image = SpreadsheetApp.newCellImage()
                            .setSourceUrl(data)
                            .build();
  }else{
    image=&quot;&quot;
  }

    //「名前」「説明」「URL」をそれぞれ格納
    Pic.push(&#x5B;
      file.getName(),
      file.getUrl(),
      file.getId(),
      &quot;=image(\&quot;https://drive.google.com/uc?id=&quot;+file.getId()+&quot;\&quot;)&quot;,
      image
    ]);
  }

</pre></div>


<h3 class="wp-block-heading"><span id="toc7">setvaluesで書き込み。</span></h3>



<p>③最後にスプレッドシートに書き込んで終わりです。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,1,Pic.length,Pic&#x5B;0].length).setValues(Pic)

</pre></div>


<h2 class="wp-block-heading"><span id="toc8">プログラムのポイント</span></h2>



<p>今回のプログラムのポイントは、</p>



<p>①image関数を使って、セル内に画像を表示させること。</p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-nujonoa-blog"><div class="wp-block-embed__wrapper">

<a rel="noopener" target="_blank" href="https://nujonoa.com/how-to-use-the-image-function/" title="【spreadsheet】image関数！セル内に画像を入れて一気に見栄えアップ！" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-right cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" src="http://nujonoa.com/wp-content/uploads/2019/05/25052019121319A-160x90.png" alt="" class=" internal-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">【spreadsheet】image関数！セル内に画像を入れて一気に見栄えアップ！</div><div class="blogcard-snippet internal-blogcard-snippet">【spreadsheet】image関数！セル内に画像を入れて一気に見栄えアップ！Excelに対して、スプレッドシートを用いる利点として、・共有しやすい・QUERY関数を使えるので、データベースを作りやすい・グーグル関係(メールなど)と連携...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://nujonoa.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">nujonoa.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.08.11</div></div></div></div></a>
</div></figure>



<p>②数式の中に「”(ダブルクオーテーションマーク)」を使う時は、<br>　「\”」と宣言しないといけないこと。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
      &quot;=image(\&quot;https://drive.google.com/uc?id=&quot;+file.getId()+&quot;\&quot;)&quot;,
</pre></div>


<p>③push関数の使い方</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
    Pic.push(&#x5B;A, B, C, D ]);
</pre></div>


<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-nujonoa-blog"><div class="wp-block-embed__wrapper">

<a rel="noopener" target="_blank" href="https://nujonoa.com/how-to-combine-two-dimensional-arrays/" title="【GAS入門】2次元配列の結合方法。unshift,push,concatの使い方" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-right cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" src="http://nujonoa.com/wp-content/uploads/2019/05/25052019121319A-160x90.png" alt="" class=" internal-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">【GAS入門】2次元配列の結合方法。unshift,push,concatの使い方</div><div class="blogcard-snippet internal-blogcard-snippet">【GAS入門】2次元配列の結合方法。unshift,push,concatの使い方スプレッドシートで、GASを使っていくうえで、非常に重要になるのが・二次元配列を使えるかどうか？です。というのも、20回掛け算する場合、・セル毎に計算　→　4...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://nujonoa.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">nujonoa.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.07.14</div></div></div></div></a>
</div></figure>



<p>です。</p>



<p>あとは、</p>



<p>セル内に画像を入れるためのデータ変換ですが、これはおまじないとして覚えるのがよさそうです。。</p>



<h2 class="wp-block-heading"><span id="toc9">まとめ</span></h2>



<p>スプレッドシートを使うと、ドライブと連携して、画像の表示などいろいろなことができます。</p>



<p>ぜひ、自分なりのアレンジをして、かっこいい表を作成してください！</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nujonoa.com/gas-paste-the-image-in-the-cell/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【GAS_Webアプリ集】java-scriptを使う</title>
		<link>https://nujonoa.com/gas_web-application-collection/</link>
					<comments>https://nujonoa.com/gas_web-application-collection/#respond</comments>
		
		<dc:creator><![CDATA[nujonoa]]></dc:creator>
		<pubDate>Mon, 04 Apr 2022 14:04:27 +0000</pubDate>
				<category><![CDATA[webアプリ]]></category>
		<category><![CDATA[GAS]]></category>
		<category><![CDATA[Webアプリ]]></category>
		<category><![CDATA[jQuery]]></category>
		<guid isPermaLink="false">http://nujonoa.com/?p=10486</guid>

					<description><![CDATA[目次 【GAS_Webアプリ集】java-scriptを動かす①javascriptでhtmlに文字を挿入②ボタンのクリック③文字の入力の反映④htmlの中身を確認、フィードバック⑤掛け算を行う⑥チェックボタン、ラジオボ [&#8230;]]]></description>
										<content:encoded><![CDATA[

  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-6" checked><label class="toc-title" for="toc-checkbox-6">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">【GAS_Webアプリ集】java-scriptを動かす</a></li><li><a href="#toc2" tabindex="0">①javascriptでhtmlに文字を挿入</a></li><li><a href="#toc3" tabindex="0">②ボタンのクリック</a></li><li><a href="#toc4" tabindex="0">③文字の入力の反映</a></li><li><a href="#toc5" tabindex="0">④htmlの中身を確認、フィードバック</a></li><li><a href="#toc6" tabindex="0">⑤掛け算を行う</a></li><li><a href="#toc7" tabindex="0">⑥チェックボタン、ラジオボタンの使い方</a></li><li><a href="#toc8" tabindex="0">⑦チェックボタンでの分岐</a></li><li><a href="#toc9" tabindex="0">⑧送料無料などの分岐</a></li><li><a href="#toc10" tabindex="0">⑨時間での分岐</a></li><li><a href="#toc11" tabindex="0">⑩工事中・・・</a></li><li><a href="#toc12" tabindex="0">⑪マウスオーバーでコメント</a></li><li><a href="#toc13" tabindex="0">⑫テキストファイルの読み込み</a></li><li><a href="#toc14" tabindex="0">⑬写真の添付</a></li><li><a href="#toc15" tabindex="0">⑭文字列のソート</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading" id="gas-webアプリ集-java-scriptを動かす"><span id="toc1">【GAS_Webアプリ集】java-scriptを動かす</span></h2>



<h2 class="wp-block-heading" id="①javascriptでhtmlに文字を挿入"><span id="toc2">①javascriptでhtmlに文字を挿入</span></h2>



<p>javascriptでページに文字を挿入します。<br>↓の「がんばれ」はjavascriptにて挿入された文字になります。</p>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbwGE6HsnR3wiJmtBZzcBxCIfTKb9M373Owur4f6SmpxKP72q1b5HgB1bC7w4RL7XkX_/exec" width="600" height="100"></iframe>



<h2 class="wp-block-heading" id="②ボタンのクリック"><span id="toc3">②ボタンのクリック</span></h2>



<p>ボタンをクリックすると、htmlを操作する動作をjavascriptにて作成します。</p>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbzHuz1w3iys49D4MVxitfq2SYgZJgMx2gFsJxlIPlKxirwk8QE_mG0vie9vaFZdZPeSdA/exec" width="600" height="100"></iframe>



<h2 class="wp-block-heading" id="③文字の入力の反映"><span id="toc4">③文字の入力の反映</span></h2>



<p>文字を入力、ボタンを押すことで、入力を行います。</p>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbyRtrLkKL8aPXlxprlgFTg1LykZ8j6WxwrMLIpsFmCIxXZoX0SIPMoHo651h1M68YhV/exec" width="600" height="100"></iframe>



<h2 class="wp-block-heading" id="④htmlの中身を確認-フィードバック"><span id="toc5">④htmlの中身を確認、フィードバック</span></h2>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbwnNAmIsQBf3rJ0upSkHkDroMCrmRdambeCFpIsGORADWia8h2Z42OBGn4C10spEkQ8/exec" width="600" height="200"></iframe>



<h2 class="wp-block-heading" id="⑤掛け算を行う"><span id="toc6">⑤掛け算を行う</span></h2>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbzhUejYKa130J4UeK4dr4BggjP4sf33RGopNOWVpecn9U0x7oMWCeu8Ect8q9Q-XNS_-A/exec" width="600" height="200"></iframe>



<h2 class="wp-block-heading" id="⑥チェックボタン-ラジオボタンの使い方"><span id="toc7">⑥チェックボタン、ラジオボタンの使い方</span></h2>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbzxMawSGHqDcREdFj2scaXnNcxbCEyRQcHs-DrEplzZsdytoCixiVUKwUUq9K-eajQ_/exec" width="300" height="200"></iframe>



<h2 class="wp-block-heading" id="⑦チェックボタンでの分岐"><span id="toc8">⑦チェックボタンでの分岐</span></h2>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbyJse_kLgRfqgYyWirSaZdar4-1NlMTwtAU4lk0nOV0ODtWLrRjPwWAcIcTjFlGtVy9/exec" width="600" height="200"></iframe>



<h2 class="wp-block-heading" id="⑧送料無料などの分岐"><span id="toc9">⑧送料無料などの分岐</span></h2>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbx4MhM82BaIOzJ-4st8KHKv9BkYo2l728AKbrD0Wz7IIPGUzL8D4lWkNk1Pd4UDFzb7/exec" width="600" height="200"></iframe>



<h2 class="wp-block-heading" id="⑨時間での分岐"><span id="toc10">⑨時間での分岐</span></h2>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbwTzBrrJdZnGSO0M96E0FJBubx7wIDyNGGs3YwaDrTtPyVXs8uMCTo1QXLUzzXC7yZr/exec" width="600" height="200"></iframe>



<h2 class="wp-block-heading" id="⑩工事中"><span id="toc11">⑩工事中・・・</span></h2>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbwGE6HsnR3wiJmtBZzcBxCIfTKb9M373Owur4f6SmpxKP72q1b5HgB1bC7w4RL7XkX_/exec" width="600" height="200"></iframe>



<h2 class="wp-block-heading" id="⑪マウスオーバーでコメント"><span id="toc12">⑪マウスオーバーでコメント</span></h2>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbwGnoovlCeOgh5t5abiCDJ730SB2ZGzIXEe-wJGEXtJYyK7lwKDyuAicTaj01aGIZh5/exec" width="600" height="500"></iframe>



<h2 class="wp-block-heading" id="⑫テキストファイルの読み込み"><span id="toc13">⑫テキストファイルの読み込み</span></h2>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbwlyuXV3KMrVjJZ4uOri_vjfOEDvyeG44iTk4FJOXBPY3kDcd1NoDb9sMa7Pd6Q3XY_/exec" width="600" height="200"></iframe>



<h2 class="wp-block-heading" id="⑬写真の添付"><span id="toc14">⑬写真の添付</span></h2>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbzyzyBJKR7Z9FDdY4nvNR9Vg4vZ0iPNlTWdLoy2Xjjsv2kcDlUIBLOoLPAFERT9KZGO/exec" width="600" height="200"></iframe>



<h2 class="wp-block-heading" id="⑭文字列のソート"><span id="toc15">⑭文字列のソート</span></h2>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbwqJBlDuWgGQSE1SvBafUYodxu6RZoRAqkYQQ4zjm16UWqFAvhQBN2fwidA-iK4tMRP/exec" width="600" height="500"></iframe>
]]></content:encoded>
					
					<wfw:commentRss>https://nujonoa.com/gas_web-application-collection/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【GAS_Webアプリ⑥】java-scriptでチェックボタンを使う</title>
		<link>https://nujonoa.com/gas_webapplication_6_checkbutton/</link>
					<comments>https://nujonoa.com/gas_webapplication_6_checkbutton/#respond</comments>
		
		<dc:creator><![CDATA[nujonoa]]></dc:creator>
		<pubDate>Fri, 11 Feb 2022 14:18:46 +0000</pubDate>
				<category><![CDATA[webアプリ]]></category>
		<category><![CDATA[Webアプリ]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[GAS]]></category>
		<guid isPermaLink="false">http://nujonoa.com/?p=10450</guid>

					<description><![CDATA[目次 【GAS_Webアプリ⑥】java-scriptでチェックボタンを使うコードコード.jsindex.htmljs1.htmlCSS出力結果サンプル 【GAS_Webアプリ⑥】java-scriptでチェックボタンを [&#8230;]]]></description>
										<content:encoded><![CDATA[

  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-8" checked><label class="toc-title" for="toc-checkbox-8">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">【GAS_Webアプリ⑥】java-scriptでチェックボタンを使う</a></li><li><a href="#toc2" tabindex="0">コード</a><ol><li><a href="#toc3" tabindex="0">コード.js</a></li><li><a href="#toc4" tabindex="0">index.html</a></li><li><a href="#toc5" tabindex="0">js1.html</a></li><li><a href="#toc6" tabindex="0">CSS</a></li><li><a href="#toc7" tabindex="0">出力結果</a></li></ol></li><li><a href="#toc8" tabindex="0">サンプル</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading" id="gas-webアプリ⑥-java-scriptでチェックボタンを使う"><span id="toc1">【GAS_Webアプリ⑥】java-scriptでチェックボタンを使う</span></h2>



<p>今回は、GASのwebアプリでcheckボタン、radioボタンを使っていきたいと思います。</p>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbzxMawSGHqDcREdFj2scaXnNcxbCEyRQcHs-DrEplzZsdytoCixiVUKwUUq9K-eajQ_/exec" width="300" height="200"></iframe>



<h2 class="wp-block-heading" id="コード"><span id="toc2">コード</span></h2>



<h3 class="wp-block-heading" id="コード-js"><span id="toc3">コード.js</span></h3>



<p>まずは、ウェブアプリを立ち上げるためのおまじないです。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
function doGet() {
let html = HtmlService.createTemplateFromFile('index').evaluate().getContent();
return HtmlService.createHtmlOutput(html)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
</pre></div>


<h3 class="wp-block-heading" id="index-html"><span id="toc4">index.html</span></h3>



<p>次は、htmlです。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;script
  src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js&quot;
&gt;&lt;/script&gt;
&lt;?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?&gt;
</pre></div>


<p>　で、jQueryを呼び出し、js1の読み込み、cssの読み込みを行っています。</p>



<p>今回は、チェックボタンと、ラジオボタンを設置し、連動するようにします。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;!--/*%_skip_start_%*/--&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
&lt;head&gt;
	&lt;meta charset=&quot;utf-8&quot;&gt;
	&lt;title&gt;Check radio&lt;/title&gt;
	&lt;script
	  src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js&quot;
	&gt;&lt;/script&gt;
    &lt;?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?&gt;
　  &lt;?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!--/*%_skip_end_%*/--&gt;
&lt;div&gt;
	チェックボックスを連動させる
	&lt;input type=&quot;checkbox&quot; id=&quot;check1&quot;&gt;
	→
	&lt;input type=&quot;checkbox&quot; id=&quot;check2&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
	ラジオボタンを連動させる
	&lt;input type=&quot;radio&quot; name=&quot;radio1&quot; value=&quot;1&quot;&gt;
	&lt;input type=&quot;radio&quot; name=&quot;radio1&quot; value=&quot;2&quot;&gt;
	→
	&lt;input type=&quot;radio&quot; name=&quot;radio2&quot; value=&quot;1&quot;&gt;
	&lt;input type=&quot;radio&quot; name=&quot;radio2&quot; value=&quot;2&quot;&gt;
&lt;/div&gt;
&lt;!--/*%_skip_start_%*/--&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!--/*%_skip_end_%*/--&gt;

</pre></div>


<h3 class="wp-block-heading" id="js1-html"><span id="toc5">js1.html</span></h3>



<p>javascriptは下記のとおりです。</p>



<p>チェックボタン、ラジオボタンの値を取得して、<br>結果を反映させます。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;!DOCTYPE html&gt;

&lt;script&gt;

//ここに記述↓↓↓

// DOMの準備後に実行する内容
$(function() {
	// 1つ目のチェックボックスを押した時の処理を設定
	$(&quot;#check1&quot;).click(function() {
		// チェックボックスの値を取得
		var check1 = $(&quot;#check1&quot;).prop(&quot;checked&quot;);
		console.log(check1);	// コンソールに出力

		// 取得した値をチェックボックスに設定
		$(&quot;#check2&quot;).prop(&quot;checked&quot;, check1);
	});

	// 1つ目のラジオボタンを押した時の処理を設定
	$(&quot;input&#x5B;name=radio1]&quot;).click(function() {
		// ラジオボタンの値を取得
		var radio1 = $(&quot;input&#x5B;name=radio1]:checked&quot;).val();
		console.log(radio1);	// コンソールに出力

		// 取得した値をラジオボタンに設定
		$(&quot;input&#x5B;name=radio2]&quot;).val(&#x5B;radio1]);
	});
});

//ここに記述↑↑↑

&lt;/script&gt;
</pre></div>


<h3 class="wp-block-heading" id="css"><span id="toc6">CSS</span></h3>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;style&gt;

div.viewarea {
	background: #ffa;
	border: solid 1px #aa6;
	width: 40em;
	font-size: 11pt;
	padding: 0.5em;
}

textarea {
	width: 40em;
	font-size: 11pt;
	padding: 0.5em;
}




&lt;/style&gt;
</pre></div>


<h3 class="wp-block-heading" id="出力結果"><span id="toc7">出力結果</span></h3>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbzxMawSGHqDcREdFj2scaXnNcxbCEyRQcHs-DrEplzZsdytoCixiVUKwUUq9K-eajQ_/exec" width="300" height="200"></iframe>



<h2 class="wp-block-heading" id="サンプル"><span id="toc8">サンプル</span></h2>



<p>サンプルを置いておきますので、コピーしてお使いください。</p>



<div class="wp-block-cocoon-blocks-button-1 button-block"><a rel="noopener" target="_blank" href="https://docs.google.com/spreadsheets/d/1cwvKFXREjCqblMupBieW9RKYYXkilL93HDPqfb9Vv1k/copy" class="btn btn-l btn-circle btn-shine">サンプルをコピー<span class="fa fa-external-link external-icon anchor-icon"></span></a></div>



<p></p>



<p>「デプロイ」→「デプロイをテスト」→「URLをクリック」<br>で簡単にウェブアプリをテストすることが可能です。</p>



<figure class="wp-block-image size-large"><a rel="noopener" target="_blank" href="https://nujonoa.com/wp-content/uploads/2022/02/image.png"><img loading="lazy" decoding="async" width="900" height="514" src="https://nujonoa.com/wp-content/uploads/2022/02/image-900x514.png" alt="" class="wp-image-10515" srcset="https://nujonoa.com/wp-content/uploads/2022/02/image-900x514.png 900w, https://nujonoa.com/wp-content/uploads/2022/02/image-500x286.png 500w, https://nujonoa.com/wp-content/uploads/2022/02/image-300x171.png 300w, https://nujonoa.com/wp-content/uploads/2022/02/image-768x439.png 768w, https://nujonoa.com/wp-content/uploads/2022/02/image-120x68.png 120w, https://nujonoa.com/wp-content/uploads/2022/02/image-160x90.png 160w, https://nujonoa.com/wp-content/uploads/2022/02/image.png 1228w" sizes="(max-width: 900px) 100vw, 900px" /></a></figure>
]]></content:encoded>
					
					<wfw:commentRss>https://nujonoa.com/gas_webapplication_6_checkbutton/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【GAS_Webアプリ②】java-scriptでボタンをクリック</title>
		<link>https://nujonoa.com/gas_webapplication_2_button/</link>
					<comments>https://nujonoa.com/gas_webapplication_2_button/#respond</comments>
		
		<dc:creator><![CDATA[nujonoa]]></dc:creator>
		<pubDate>Fri, 11 Feb 2022 13:46:35 +0000</pubDate>
				<category><![CDATA[webアプリ]]></category>
		<category><![CDATA[クリック]]></category>
		<category><![CDATA[GAS]]></category>
		<category><![CDATA[Webアプリ]]></category>
		<category><![CDATA[ボタン]]></category>
		<guid isPermaLink="false">http://nujonoa.com/?p=10436</guid>

					<description><![CDATA[目次 【GAS_Webアプリ②】java-scriptでボタンをクリックコードコード.jsindex.htmljs1.html出力結果サンプル 【GAS_Webアプリ②】java-scriptでボタンをクリック 今回は、 [&#8230;]]]></description>
										<content:encoded><![CDATA[

  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-10" checked><label class="toc-title" for="toc-checkbox-10">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">【GAS_Webアプリ②】java-scriptでボタンをクリック</a></li><li><a href="#toc2" tabindex="0">コード</a><ol><li><a href="#toc3" tabindex="0">コード.js</a></li><li><a href="#toc4" tabindex="0">index.html</a></li><li><a href="#toc5" tabindex="0">js1.html</a></li></ol></li><li><a href="#toc6" tabindex="0">出力結果</a></li><li><a href="#toc7" tabindex="0">サンプル</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading" id="gas-webアプリ②-java-scriptでボタンをクリック"><span id="toc1">【GAS_Webアプリ②】java-scriptでボタンをクリック</span></h2>



<p>今回は、ボタンをクリックすることで、動作するウェブアプリを作成していきます。</p>



<h2 class="wp-block-heading" id="コード"><span id="toc2">コード</span></h2>



<h3 class="wp-block-heading" id="コード-js"><span id="toc3">コード.js</span></h3>



<p>まずはいつものおまじないです。<br>webアプリを立ち上げる動作になります。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
function doGet() {
let html = HtmlService.createTemplateFromFile('index').evaluate().getContent();
return HtmlService.createHtmlOutput(html)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
</pre></div>


<h3 class="wp-block-heading" id="index-html"><span id="toc4">index.html</span></h3>



<p>次は、htmlになります。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
&lt;?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?&gt;
</pre></div>


<p>でjs1.htmlのjavascriptを読み込む場所を作成し、<br>・実行ボタン<br>と<br>・アウトプットの場所<br>を記したhtmlを作成します。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
&lt;head&gt;
	&lt;meta charset=&quot;utf-8&quot;&gt;
	&lt;title&gt;clicks&lt;/title&gt;
    &lt;?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;input type=&quot;button&quot; id=&quot;execButton&quot; value=&quot;実行&quot;&gt;
	&lt;div id=&quot;output&quot;&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre></div>


<h3 class="wp-block-heading" id="js1-html"><span id="toc5">js1.html</span></h3>



<p>今回のjavascriptからは「jQuery」を使用していきます。<br>jQueryは簡単にいうと、より簡単にjavascriptをかけるようにするテンプレートです。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/script&gt;
</pre></div>


<p>で呼び出すことで、それ以降は簡単にjsを使用することができます。</p>



<p>今回は、ボタンを押すと→アウトプットのところに「クリックされました」と表示される仕組みです。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;!DOCTYPE html&gt;

&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;script&gt;

//ここに記述↓↓↓

// DOMの準備後に実行する内容
$(function() {
	// ［実行］ボタンを押した時の処理を設定
	$(&quot;#execButton&quot;).click(function() {
		$(&quot;#output&quot;).append(&quot;クリックされました&lt;br&gt;&quot;);
	});

});

//ここに記述↑↑↑

&lt;/script&gt;
</pre></div>


<h2 class="wp-block-heading" id="出力結果"><span id="toc6">出力結果</span></h2>



<p>出力結果は下記のとおりです。</p>



<p>実行ボタンをクリックすると、「クリックされました」と表示されることが分かります。</p>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbzHuz1w3iys49D4MVxitfq2SYgZJgMx2gFsJxlIPlKxirwk8QE_mG0vie9vaFZdZPeSdA/exec" width="600" height="100"></iframe>



<h2 class="wp-block-heading" id="サンプル"><span id="toc7">サンプル</span></h2>



<p>サンプルを置いておきますので、コピーしてお使いください。</p>



<div class="wp-block-cocoon-blocks-button-1 button-block"><a rel="noopener" target="_blank" href="https://docs.google.com/spreadsheets/d/1HtU3cdK3bZtThwFcas7T9orcfk0G3WPb-S3Oxqm5B9I/copy" class="btn btn-l btn-circle btn-shine">サンプルをコピー<span class="fa fa-external-link external-icon anchor-icon"></span></a></div>



<p></p>



<p>「デプロイ」→「デプロイをテスト」→「URLをクリック」<br>で簡単にウェブアプリをテストすることが可能です。</p>



<figure class="wp-block-image size-large"><a rel="noopener" target="_blank" href="https://nujonoa.com/wp-content/uploads/2022/02/image.png"><img loading="lazy" decoding="async" width="900" height="514" src="https://nujonoa.com/wp-content/uploads/2022/02/image-900x514.png" alt="" class="wp-image-10515" srcset="https://nujonoa.com/wp-content/uploads/2022/02/image-900x514.png 900w, https://nujonoa.com/wp-content/uploads/2022/02/image-500x286.png 500w, https://nujonoa.com/wp-content/uploads/2022/02/image-300x171.png 300w, https://nujonoa.com/wp-content/uploads/2022/02/image-768x439.png 768w, https://nujonoa.com/wp-content/uploads/2022/02/image-120x68.png 120w, https://nujonoa.com/wp-content/uploads/2022/02/image-160x90.png 160w, https://nujonoa.com/wp-content/uploads/2022/02/image.png 1228w" sizes="(max-width: 900px) 100vw, 900px" /></a></figure>
]]></content:encoded>
					
					<wfw:commentRss>https://nujonoa.com/gas_webapplication_2_button/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【GAS_Webアプリ①】java-scriptを動かす</title>
		<link>https://nujonoa.com/gas_webapplication_1_howto/</link>
					<comments>https://nujonoa.com/gas_webapplication_1_howto/#respond</comments>
		
		<dc:creator><![CDATA[nujonoa]]></dc:creator>
		<pubDate>Fri, 11 Feb 2022 13:34:30 +0000</pubDate>
				<category><![CDATA[webアプリ]]></category>
		<category><![CDATA[GAS]]></category>
		<category><![CDATA[Webアプリ]]></category>
		<category><![CDATA[テスト]]></category>
		<guid isPermaLink="false">http://nujonoa.com/?p=10434</guid>

					<description><![CDATA[GASでウェブアプリを作成するために、やはりjavascriptを覚えていかないと、、、 ということで、今回から、java-scriptを勉強していきたいと思います！ 目次 【GAS_Webアプリ①】java-scrip [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>GASでウェブアプリを作成するために、やはりjavascriptを覚えていかないと、、、</p>



<p>ということで、今回から、java-scriptを勉強していきたいと思います！</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-12" checked><label class="toc-title" for="toc-checkbox-12">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">【GAS_Webアプリ①】java-scriptを動かす！</a></li><li><a href="#toc2" tabindex="0">コード</a><ol><li><a href="#toc3" tabindex="0">コード.js</a></li><li><a href="#toc4" tabindex="0">index.html</a></li><li><a href="#toc5" tabindex="0">js1.html</a></li></ol></li><li><a href="#toc6" tabindex="0">出力結果</a></li><li><a href="#toc7" tabindex="0">サンプル</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading" id="gas-webアプリ①-java-scriptを動かす"><span id="toc1">【GAS_Webアプリ①】java-scriptを動かす！</span></h2>



<p>今回は、まずは、javascriptを動かすことができるコードの書き方を確認していこうと思います。</p>



<h2 class="wp-block-heading" id="コード"><span id="toc2">コード</span></h2>



<h3 class="wp-block-heading" id="コード-js"><span id="toc3">コード.js</span></h3>



<p>まずは、jsからです。</p>



<p>jsはウェブサイトを動かすときと同様に、<br>doGet()を使用して動かします。</p>



<p>埋め込んだ際に「このサイトは…」という表示が出ないように、<br>少し変わった表示のさせ方をしていますが、<br>この通り打ち込んでください。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
function doGet() {
let html = HtmlService.createTemplateFromFile('index').evaluate().getContent();
return HtmlService.createHtmlOutput(html)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
</pre></div>


<h3 class="wp-block-heading" id="index-html"><span id="toc4">index.html</span></h3>



<p>次はhtmlのコードです。</p>



<p>ここで重要なのは、</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?&gt;
</pre></div>


<p>この部分です。<br>これは、「js1.html」のコードをここに持ってきなさい！！</p>



<p>という指令を出しているコードになっており、<br>実際、ここにそのままjsを打ち込むのと同様の処理となっています。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
&lt;head&gt;
	&lt;meta charset=&quot;utf-8&quot;&gt;
	&lt;title&gt;JavaScript out HTML&lt;/title&gt;
    &lt;?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre></div>


<h3 class="wp-block-heading" id="js1-html"><span id="toc5">js1.html</span></h3>



<p>jvascriptの文章です。<br>htmlで保存してください。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;!DOCTYPE html&gt;
&lt;script&gt;
	document.writeln(&quot;がんばれ&quot;);
&lt;/script&gt;
</pre></div>


<p>今回は単純に。「がんばれ」という文章を打ち込むだけのコードになっています。</p>



<p>これが、先ほどの</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?&gt;
</pre></div>


<p>の部分に挿入され、「index.html」で、指示した項目が表示されることになります。</p>



<h2 class="wp-block-heading" id="出力結果"><span id="toc6">出力結果</span></h2>



<p>出力結果は下記のとおりです。</p>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbwGE6HsnR3wiJmtBZzcBxCIfTKb9M373Owur4f6SmpxKP72q1b5HgB1bC7w4RL7XkX_/exec" width="600" height="100"></iframe>



<p>がんばれと打ち込まれたことが分かります。</p>



<div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow">
<h2 class="wp-block-heading" id="サンプル"><span id="toc7">サンプル</span></h2>



<p>サンプルを置いておきますので、コピーしてお使いください。</p>



<div class="wp-block-cocoon-blocks-button-1 button-block"><a rel="noopener" target="_blank" href="https://docs.google.com/spreadsheets/d/1ky8GnnLcLnK22P0DXMOZOoz1H_PzNRKdJJZih7wV4nM/copy" class="btn btn-l btn-circle btn-shine">ボタン<span class="fa fa-external-link external-icon anchor-icon"></span></a></div>



<p></p>



<p>「デプロイ」→「デプロイをテスト」→「URLをクリック」<br>で簡単にウェブアプリをテストすることが可能です。</p>



<figure class="wp-block-image size-large"><a rel="noopener" target="_blank" href="https://nujonoa.com/wp-content/uploads/2022/02/image.png"><img loading="lazy" decoding="async" width="900" height="514" src="https://nujonoa.com/wp-content/uploads/2022/02/image-900x514.png" alt="" class="wp-image-10515" srcset="https://nujonoa.com/wp-content/uploads/2022/02/image-900x514.png 900w, https://nujonoa.com/wp-content/uploads/2022/02/image-500x286.png 500w, https://nujonoa.com/wp-content/uploads/2022/02/image-300x171.png 300w, https://nujonoa.com/wp-content/uploads/2022/02/image-768x439.png 768w, https://nujonoa.com/wp-content/uploads/2022/02/image-120x68.png 120w, https://nujonoa.com/wp-content/uploads/2022/02/image-160x90.png 160w, https://nujonoa.com/wp-content/uploads/2022/02/image.png 1228w" sizes="(max-width: 900px) 100vw, 900px" /></a></figure>
</div>
]]></content:encoded>
					
					<wfw:commentRss>https://nujonoa.com/gas_webapplication_1_howto/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【GAS_Webアプリ⑤】java-scriptでかけ算をする</title>
		<link>https://nujonoa.com/gas_webapplication_5_calculation/</link>
					<comments>https://nujonoa.com/gas_webapplication_5_calculation/#respond</comments>
		
		<dc:creator><![CDATA[nujonoa]]></dc:creator>
		<pubDate>Thu, 27 Jan 2022 05:47:16 +0000</pubDate>
				<category><![CDATA[webアプリ]]></category>
		<category><![CDATA[GAS]]></category>
		<category><![CDATA[Webアプリ]]></category>
		<category><![CDATA[jQuery]]></category>
		<guid isPermaLink="false">http://nujonoa.com/?p=10447</guid>

					<description><![CDATA[目次 【GAS_Webアプリ①】java-scriptを動かすコードコード.jsindex.htmljs1.htmlCSS出力結果サンプル 【GAS_Webアプリ①】java-scriptを動かす 今回は、GASのウェブ [&#8230;]]]></description>
										<content:encoded><![CDATA[

  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-14" checked><label class="toc-title" for="toc-checkbox-14">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">【GAS_Webアプリ①】java-scriptを動かす</a></li><li><a href="#toc2" tabindex="0">コード</a><ol><li><a href="#toc3" tabindex="0">コード.js</a></li><li><a href="#toc4" tabindex="0">index.html</a></li><li><a href="#toc5" tabindex="0">js1.html</a></li><li><a href="#toc6" tabindex="0">CSS</a></li><li><a href="#toc7" tabindex="0">出力結果</a></li></ol></li><li><a href="#toc8" tabindex="0">サンプル</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading" id="gas-webアプリ①-java-scriptを動かす"><span id="toc1">【GAS_Webアプリ①】java-scriptを動かす</span></h2>



<p>今回は、GASのウェブアプリ上で、javascriptを用いて、かけ算をしていきたいと思います。</p>



<p>サンプルは下記のとおりです。</p>



<p>商品と、個数を選択し、計算ボタンを押すことで計算がかけられます。</p>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbzhUejYKa130J4UeK4dr4BggjP4sf33RGopNOWVpecn9U0x7oMWCeu8Ect8q9Q-XNS_-A/exec" width="600" height="200"></iframe>



<h2 class="wp-block-heading" id="コード"><span id="toc2">コード</span></h2>



<h3 class="wp-block-heading" id="コード-js"><span id="toc3">コード.js</span></h3>



<p id="コード-js">まずは、webアプリを起動するためのおまじないです。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
function doGet() {
let html = HtmlService.createTemplateFromFile('index').evaluate().getContent();
return HtmlService.createHtmlOutput(html)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
</pre></div>


<h3 class="wp-block-heading" id="index-html"><span id="toc4">index.html</span></h3>



<p>次は、htmlです。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;script
  src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js&quot;
&gt;&lt;/script&gt;
&lt;?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?&gt;
</pre></div>


<p>で、jQueryを呼び出し、js1の読み込み、cssの読み込みを行っています。</p>



<p>ボディは、<br>・商品の選択項目、個数の選択と<br>・結果の表示欄<br>を作成しています。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;!--/*%_skip_start_%*/--&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
&lt;head&gt;
	&lt;meta charset=&quot;utf-8&quot;&gt;
	&lt;title&gt;Get list val&lt;/title&gt;
	&lt;script
	  src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js&quot;
	&gt;&lt;/script&gt;
    &lt;?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?&gt;
　  &lt;?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!--/*%_skip_end_%*/--&gt;
&lt;div&gt;
	商品
	&lt;select id=&quot;item&quot;&gt;
		&lt;option value=&quot;100&quot; selected&gt;鉛筆 (100円)&lt;/option&gt;
		&lt;option value=&quot;200&quot;&gt;シャーペン (200円)&lt;/option&gt;
		&lt;option value=&quot;500&quot;&gt;ノートセット (500円)&lt;/option&gt;
	&lt;/select&gt;
	個数
	&lt;select id=&quot;num&quot;&gt;
		&lt;option value=&quot;1&quot; selected&gt;1個&lt;/option&gt;
		&lt;option value=&quot;2&quot;&gt;2個&lt;/option&gt;
		&lt;option value=&quot;3&quot;&gt;3個&lt;/option&gt;
	&lt;/select&gt;
	&lt;input type=&quot;button&quot; id=&quot;calcButton&quot; value=&quot;計算&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;viewarea&quot;&gt;
	単価「&lt;span id=&quot;itemSel&quot;&gt;&lt;/span&gt;」円、
	個数「&lt;span id=&quot;numSel&quot;&gt;&lt;/span&gt;」個で、
	合計「&lt;span id=&quot;result&quot;&gt;&lt;/span&gt;」円。
&lt;/div&gt;
&lt;!--/*%_skip_start_%*/--&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!--/*%_skip_end_%*/--&gt;

</pre></div>


<h3 class="wp-block-heading" id="js1-html"><span id="toc5">js1.html</span></h3>



<p>javascriptは下記の通り、</p>



<p>・リストの値を取得<br>・値を入れ込む<br>・かけ算をする<br>・切り捨て<br>・結果を表示</p>



<p>としております。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;!DOCTYPE html&gt;

&lt;script&gt;

//ここに記述↓↓↓

// DOMの準備後に実行する内容
$(function() {
	// ［計算］ボタンを押した時の処理を設定
	$(&quot;#calcButton&quot;).click(function() {
		// リストの値を取得
		var itemValue = $(&quot;#item option:selected&quot;).val();
		var numValue = $(&quot;#num option:selected&quot;).val();

		// リストの値を表示
		$(&quot;#itemSel&quot;).text(itemValue);
		$(&quot;#numSel&quot;).text(numValue);

		// 計算（掛け算）を行う
		var result = itemValue * numValue;

		// 切り捨て
		result = Math.floor(result);

		// 計算結果を表示
		$(&quot;#result&quot;).text(result);
	});

	// 初回表示用にプログラムからクリック
	$(&quot;#calcButton&quot;).click();
});

//ここに記述↑↑↑

&lt;/script&gt;
</pre></div>


<h3 class="wp-block-heading" id="css"><span id="toc6">CSS</span></h3>



<p>cssは下記のとおりです。色などは自由に変更ください。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;style&gt;

div.viewarea {
	background: #ffa;
	border: solid 1px #aa6;
	width: 40em;
	font-size: 11pt;
	padding: 0.5em;
}

textarea {
	width: 40em;
	font-size: 11pt;
	padding: 0.5em;
}
&lt;/style&gt;
</pre></div>


<h3 class="wp-block-heading" id="出力結果"><span id="toc7">出力結果</span></h3>



<p>出力結果は下記のとおりです。</p>



<iframe loading="lazy" src="https://script.google.com/macros/s/AKfycbzhUejYKa130J4UeK4dr4BggjP4sf33RGopNOWVpecn9U0x7oMWCeu8Ect8q9Q-XNS_-A/exec" width="600" height="200"></iframe>



<h2 class="wp-block-heading" id="サンプル"><span id="toc8">サンプル</span></h2>



<p>サンプルを置いておきますので、コピーしてお使いください。</p>



<div class="wp-block-cocoon-blocks-button-1 button-block"><a rel="noopener" target="_blank" href="https://docs.google.com/spreadsheets/d/1G8Qi5N5zoYf7rUX-GeSWaF45ZaMaiC_0fpGk1GjkM4I/copy" class="btn btn-l btn-circle btn-shine">サンプルをコピー<span class="fa fa-external-link external-icon anchor-icon"></span></a></div>



<p></p>



<p>「デプロイ」→「デプロイをテスト」→「URLをクリック」<br>で簡単にウェブアプリをテストすることが可能です。</p>



<figure class="wp-block-image size-large"><a rel="noopener" target="_blank" href="https://nujonoa.com/wp-content/uploads/2022/02/image.png"><img loading="lazy" decoding="async" width="900" height="514" src="https://nujonoa.com/wp-content/uploads/2022/02/image-900x514.png" alt="" class="wp-image-10515" srcset="https://nujonoa.com/wp-content/uploads/2022/02/image-900x514.png 900w, https://nujonoa.com/wp-content/uploads/2022/02/image-500x286.png 500w, https://nujonoa.com/wp-content/uploads/2022/02/image-300x171.png 300w, https://nujonoa.com/wp-content/uploads/2022/02/image-768x439.png 768w, https://nujonoa.com/wp-content/uploads/2022/02/image-120x68.png 120w, https://nujonoa.com/wp-content/uploads/2022/02/image-160x90.png 160w, https://nujonoa.com/wp-content/uploads/2022/02/image.png 1228w" sizes="(max-width: 900px) 100vw, 900px" /></a></figure>
]]></content:encoded>
					
					<wfw:commentRss>https://nujonoa.com/gas_webapplication_5_calculation/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【GASでスクレイピング③】実際の使用例レシピを取り出してみた。</title>
		<link>https://nujonoa.com/%e3%80%90gas%e3%81%a7%e3%82%b9%e3%82%af%e3%83%ac%e3%82%a4%e3%83%94%e3%83%b3%e3%82%b0%e2%91%a2%e3%80%91%e5%ae%9f%e9%9a%9b%e3%81%ae%e4%bd%bf%e7%94%a8%e4%be%8b%e3%83%ac%e3%82%b7%e3%83%94%e3%82%92/</link>
					<comments>https://nujonoa.com/%e3%80%90gas%e3%81%a7%e3%82%b9%e3%82%af%e3%83%ac%e3%82%a4%e3%83%94%e3%83%b3%e3%82%b0%e2%91%a2%e3%80%91%e5%ae%9f%e9%9a%9b%e3%81%ae%e4%bd%bf%e7%94%a8%e4%be%8b%e3%83%ac%e3%82%b7%e3%83%94%e3%82%92/#respond</comments>
		
		<dc:creator><![CDATA[nujonoa]]></dc:creator>
		<pubDate>Wed, 07 Jul 2021 12:44:00 +0000</pubDate>
				<category><![CDATA[GAS]]></category>
		<category><![CDATA[正規表現]]></category>
		<category><![CDATA[class]]></category>
		<category><![CDATA[スクレイピング]]></category>
		<guid isPermaLink="false">http://nujonoa.com/?p=9634</guid>

					<description><![CDATA[目次 【GASでスクレイピング③】実際の使用例レシピを取り出してみた。サンプルシートを紹介コード紹介簡単に説明HTMLの情報の抜き出しclass要素などをキーに情報を抜き出し抜き出したデータから必要な部分だけ抜き出しその [&#8230;]]]></description>
										<content:encoded><![CDATA[

  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-16" checked><label class="toc-title" for="toc-checkbox-16">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">【GASでスクレイピング③】実際の使用例レシピを取り出してみた。</a></li><li><a href="#toc2" tabindex="0">サンプルシートを紹介</a></li><li><a href="#toc3" tabindex="0">コード紹介</a></li><li><a href="#toc4" tabindex="0">簡単に説明</a><ol><li><a href="#toc5" tabindex="0">HTMLの情報の抜き出し</a></li><li><a href="#toc6" tabindex="0">class要素などをキーに情報を抜き出し</a></li><li><a href="#toc7" tabindex="0">抜き出したデータから必要な部分だけ抜き出し</a></li><li><a href="#toc8" tabindex="0">その他ポイント</a></li></ol></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">【GASでスクレイピング③】実際の使用例レシピを取り出してみた。</span></h2>



<p><span class="marker-animation">マクロ＋IE　→　GAS+スプレッドシート</span></p>



<p>に変更していくということとで、<br>今回は、</p>



<p>GASを用いて実際に使用できるプログラミングを作成しました！</p>



<p>いつも、食べたいものある?といわれて困るので、<br>キッコーマンさんのホームページから、ランダムでレシピを引っ張ってこれる<br>ようにしています。</p>



<p>①②で紹介したhtmlの情報を取得、そこから必要な情報だけ読み解く<br>という方法を実践したものになりますので、<br>是非ご参考にください。</p>



<h2 class="wp-block-heading"><span id="toc2">サンプルシートを紹介</span></h2>



<p>サンプルシートを下記に紹介します。</p>



<p>レシピの材料、作り方を順次取り出してくるプログラミングになります。</p>



<figure class="wp-block-image size-large"><a rel="noopener" target="_blank" href="https://nujonoa.com/wp-content/uploads/2021/07/image-3.png"><img loading="lazy" decoding="async" width="900" height="233" src="https://nujonoa.com/wp-content/uploads/2021/07/image-3-900x233.png" alt="" class="wp-image-9635" srcset="https://nujonoa.com/wp-content/uploads/2021/07/image-3-900x233.png 900w, https://nujonoa.com/wp-content/uploads/2021/07/image-3-500x129.png 500w, https://nujonoa.com/wp-content/uploads/2021/07/image-3-300x78.png 300w, https://nujonoa.com/wp-content/uploads/2021/07/image-3-768x199.png 768w, https://nujonoa.com/wp-content/uploads/2021/07/image-3-1536x398.png 1536w, https://nujonoa.com/wp-content/uploads/2021/07/image-3.png 1642w" sizes="(max-width: 900px) 100vw, 900px" /></a></figure>



<div class="wp-block-cocoon-blocks-button-1 button-block"><a rel="noopener" target="_blank" href="https://docs.google.com/spreadsheets/d/1_eOxY88fGHKg7we739Sq0sMkJ_rkg0df1Yq0pAESCoQ/copy" class="btn btn-l btn-circle btn-shine">サンプルシートをダウンロード<span class="fa fa-external-link external-icon anchor-icon"></span></a></div>



<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<p>そのままですと閲覧のみ可能になっていますので、<br>ファイル→コピーを作成で、自分のスプレッドシートにコピーを作成してください。</p>



<div class="wp-block-cocoon-blocks-toggle-box-1 toggle-wrap toggle-box block-box"><input id="toggle-checkbox-20200809233634" class="toggle-checkbox" type="checkbox"/><label class="toggle-button" for="toggle-checkbox-20200809233634">スプレッドシートをコピーする方法(クリックして開く)</label><div class="toggle-content">
<div class="wp-block-image"><figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="394" height="781" src="https://nujonoa.com/wp-content/uploads/2020/08/2020-08-09_23h24_07-3.png" alt="" class="wp-image-6679" srcset="https://nujonoa.com/wp-content/uploads/2020/08/2020-08-09_23h24_07-3.png 394w, https://nujonoa.com/wp-content/uploads/2020/08/2020-08-09_23h24_07-3-300x595.png 300w" sizes="(max-width: 394px) 100vw, 394px" /><figcaption>スプレッドシートをコピーする方法</figcaption></figure></div>
</div></div>
</div></div>



<h2 class="wp-block-heading"><span id="toc3">コード紹介</span></h2>



<p>では、さっそくコードを紹介していきたいと思います。</p>



<p>コードは、</p>



<p>①ランダムにレシピのURL作成<br>②UrlFetchApp.fetch(url)　でurlの情報を抜き出し　<br>③class要素の名前など、キーとなる情報を正規表現で抜き出しitemに代入<br>④innertextのみにするためにindexOfで文字数を確認<br>⑤.substringで間の文字列を取り出す</p>



<p>を繰り返す構成になっております。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
function myFunction5() {

  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('実行');



  for(var z=1;z&lt;=10;z++){

    SpreadsheetApp.getActiveSpreadsheet().toast(z+'/10', '進捗',10);

        　//セルに存在する最後の行
    lastY = sheet.getLastRow()
    lastX = sheet.getLastColumn()

  var url = sheet.getRange(2, 3).getValue();
  sheet.getRange(lastY+1,3).setValue(url)
   Logger.log(url)

      var options = {
    &quot;muteHttpExceptions&quot;: true,　    // 404エラーでも処理を継続する
  }
  var response = UrlFetchApp.fetch(url, options);
  var html = response.getContentText('UTF-8');

  var fromText = sheet.getRange(3, 3).getValue();
  var toText='&lt;'

  var KENSAKU =  fromText + '.*?' + toText 

  var itemRegexp = new RegExp(KENSAKU,'g');//gで全て

  var item = &#x5B;0,1];
  var item = html.match(itemRegexp);
  var items = &#x5B;];

  if(html.match(itemRegexp)===null){
    sheet.getRange(lastY+1, 4).setValue(&quot;該当なし&quot;)
  }
  else{

    Logger.log(item.length)

  for (var i = 0; i &lt; item.length; i++) {
    var itemURL = item&#x5B;i]
    var S_num = itemURL.indexOf('&gt;');
    var E_num = itemURL.indexOf('&lt;');
    var itemURL = itemURL.substring(S_num+1, E_num);
    items.push(&#x5B;itemURL]);
       }
  sheet.getRange(lastY+2, 4, items.length, 1).setValues(items);

  var fromText = sheet.getRange(3, 4).getValue();
  var toText='&lt;'

  var KENSAKU =  fromText + '.*?' + toText 

  var itemRegexp = new RegExp(KENSAKU,'g');//gで全て

  var item = html.match(itemRegexp);
  var items = &#x5B;];

    Logger.log(item.length)
  
  for (var i = 0; i &lt; item.length; i++) {
    var itemURL = item&#x5B;i]
    var S_num = itemURL.indexOf('&gt;');
    var E_num = itemURL.indexOf('&lt;');
  var itemURL = itemURL.substring(S_num+1, E_num);
    items.push(&#x5B;itemURL]);
       }
  sheet.getRange(lastY+2, 5, items.length, 1).setValues(items);

  var fromText = sheet.getRange(3, 5).getValue();
  var toText='&lt;'

  var KENSAKU =  fromText + '.*?' + toText 

  var itemRegexp = new RegExp(KENSAKU,'g');//gで全て

  var item = html.match(itemRegexp);
  var items = &#x5B;];

    Logger.log(item.length)
  
  for (var i = 0; i &lt; item.length; i++) {
    var itemURL = item&#x5B;i]

    var S_num = itemURL.indexOf('&gt;');
    var E_num = itemURL.indexOf('&lt;');

  var itemURL = itemURL.substring(S_num+1, E_num);
    items.push(&#x5B;itemURL]);
       }
  sheet.getRange(lastY+2, 6, items.length, 1).setValues(items);

  var fromText = '&lt;title&gt;';
  var toText=' キッコーマン' 

  var KENSAKU =  fromText + '.*?' + toText 

  var itemRegexp = new RegExp(KENSAKU,'g');//gで全て

  var item = html.match(itemRegexp);
  var items = &#x5B;];

    Logger.log(item.length)
  
  for (var i = 0; i &lt; item.length; i++) {
    var itemURL = item&#x5B;i]
      //.replace(fromText,'')
      //.replace(toText,'');
    var S_num = itemURL.indexOf('&gt;');
    var E_num = itemURL.indexOf('のレシピ');
    var itemURL = itemURL.substring(S_num+1, E_num);
    items.push(&#x5B;itemURL]);
       }
  sheet.getRange(lastY+1, 4, items.length, 1).setValues(items);

  var imageY=lastY+1
  sheet.getRange(lastY+2,3).setValue('=image(LEFT(C'+imageY+',50)&amp;&quot;img/&quot;&amp;mid(C'+imageY+', 51,8)&amp;&quot;.jpg&quot;)')
 // sheet.getRange(lastY+2,3,5,1).merge();

  }

  }

}

</pre></div>


<h2 class="wp-block-heading"><span id="toc4">簡単に説明</span></h2>



<p>コードの内容を簡単に説明していきます。</p>



<h3 class="wp-block-heading"><span id="toc5">HTMLの情報の抜き出し</span></h3>



<p><a rel="noopener" target="_blank" href="https://developers.google.com/apps-script/reference/url-fetch/http-response">グーグルの公式サイトを参考に<span class="fa fa-external-link external-icon anchor-icon"></span></a></p>



<p>UrlFetchApp.fetch(url);</p>



<p>でresponseに情報を格納し、</p>



<p>e.getContentText()</p>



<p>で、文字列としてエンコードされたHTTP応答のコンテンツを取得します。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
// The code below logs the HTML code of the Google home page.
var response = UrlFetchApp.fetch(&quot;http://www.google.com/&quot;);
Logger.log(response.getContentText());
</pre></div>


<p></p>



<h3 class="wp-block-heading"><span id="toc6">class要素などをキーに情報を抜き出し</span></h3>



<p>上記で得たテキストデータから、必要な情報を抜き出します。</p>



<p>抜き出す方法としては、「正規表現」で抜き出しています。<br>少し難しいので、</p>



<p>「/　文字列A　.*?　文字列B　/」</p>



<p>とすると、文字列A~文字列Bとなっている文字列を抜き出すことができると思ってください。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
  var fromText = sheet.getRange(3, 3).getValue();
  var toText='&lt;'

  var KENSAKU =  fromText + '.*?' + toText 

  var itemRegexp = new RegExp(KENSAKU,'g');//gで全て

  var item = html.match(itemRegexp);
</pre></div>


<p>これで、<br>fromtext ～ totext<br>の文字列をitem配列に代入することができます。</p>



<p>今回は、fromtextは任意、totextは「&lt;」に固定し、文字列を抜き出しています。</p>



<div class="wp-block-group is-style-sticky-blue is-layout-flow wp-block-group-is-layout-flow">
<p>イメージとしては、</p>



<p>&lt;dd&gt;&lt;p class="amount"&gt;１５０ｇ&lt;/p&gt;&lt;/dd&gt;</p>



<p>というテキストデータから</p>



<p>amount ~ &lt;</p>



<p>となるテキストを検索し、</p>



<p>item に 「　amount"&gt;１５０ｇ&lt;　」を代入しています</p>
</div>



<h3 class="wp-block-heading"><span id="toc7">抜き出したデータから必要な部分だけ抜き出し</span></h3>



<p>抜き出したデータは、</p>



<div class="wp-block-group is-style-sticky-blue is-layout-flow wp-block-group-is-layout-flow">
<p>item =　amount"&gt;１５０ｇ&lt;　</p>
</div>



<p>というように、いらない文字列が残っています。<br>そこで、</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
  for (var i = 0; i &lt; item.length; i++) {
    var itemURL = item&#x5B;i]
    var S_num = itemURL.indexOf('&gt;');
    var E_num = itemURL.indexOf('&lt;');
    var itemURL = itemURL.substring(S_num+1, E_num);
    items.push(&#x5B;itemURL]);
       }
</pre></div>


<p>を用いて、「&gt;」「&lt;」の間のテキストだけを抜き出し、<br>２次元配列itemsに代入していっています。</p>



<p>そして結果を、</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
  SpreadsheetApp.getActiveSheet().getRange(5, 4, items.length, 1).setValues(items);
</pre></div>


<p>にて、セルに張り付けることで、完了です。</p>



<h3 class="wp-block-heading"><span id="toc8">その他ポイント</span></h3>



<p>404エラーでも処理を実行するために、下記コードを追加しています。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
      var options = {
    &quot;muteHttpExceptions&quot;: true,　    // 404エラーでも処理を継続する
  }
  var response = UrlFetchApp.fetch(url, options);
</pre></div>]]></content:encoded>
					
					<wfw:commentRss>https://nujonoa.com/%e3%80%90gas%e3%81%a7%e3%82%b9%e3%82%af%e3%83%ac%e3%82%a4%e3%83%94%e3%83%b3%e3%82%b0%e2%91%a2%e3%80%91%e5%ae%9f%e9%9a%9b%e3%81%ae%e4%bd%bf%e7%94%a8%e4%be%8b%e3%83%ac%e3%82%b7%e3%83%94%e3%82%92/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【GASでスクレイピング②】知りたい情報をclassなどから取り出す。</title>
		<link>https://nujonoa.com/gas-scraping-class-method/</link>
					<comments>https://nujonoa.com/gas-scraping-class-method/#respond</comments>
		
		<dc:creator><![CDATA[nujonoa]]></dc:creator>
		<pubDate>Tue, 06 Jul 2021 12:38:00 +0000</pubDate>
				<category><![CDATA[GAS]]></category>
		<category><![CDATA[スクレイピング]]></category>
		<category><![CDATA[正規表現]]></category>
		<category><![CDATA[class]]></category>
		<guid isPermaLink="false">http://nujonoa.com/?p=9618</guid>

					<description><![CDATA[目次 【GASでスクレイピング②】知りたい情報をclassなどから取り出す。ウェブスクレイピングのやり方サンプルシートを紹介コード紹介簡単に説明HTMLの情報の抜き出しclass要素などをキーに情報を抜き出し抜き出したデ [&#8230;]]]></description>
										<content:encoded><![CDATA[

  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-18" checked><label class="toc-title" for="toc-checkbox-18">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">【GASでスクレイピング②】知りたい情報をclassなどから取り出す。</a></li><li><a href="#toc2" tabindex="0">ウェブスクレイピングのやり方</a></li><li><a href="#toc3" tabindex="0">サンプルシートを紹介</a></li><li><a href="#toc4" tabindex="0">コード紹介</a></li><li><a href="#toc5" tabindex="0">簡単に説明</a><ol><li><a href="#toc6" tabindex="0">HTMLの情報の抜き出し</a></li><li><a href="#toc7" tabindex="0">class要素などをキーに情報を抜き出し</a></li><li><a href="#toc8" tabindex="0">抜き出したデータから必要な部分だけ抜き出し</a></li></ol></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">【GASでスクレイピング②】知りたい情報をclassなどから取り出す。</span></h2>



<p>ついについにIEが使えない時代が訪れるということで、<br>ウェブスクレイピングを</p>



<p><span class="marker-animation">マクロ＋IE　→　GAS+スプレッドシート</span></p>



<p>へ変更していく必要があると感じています。<br>そこで今回は、GASで行うウェブスクレイピングの準備をしていきたいと思います！</p>



<h2 class="wp-block-heading"><span id="toc2">ウェブスクレイピングのやり方</span></h2>



<p>まずは、私の行う、ウェブスクレイピングの基本的なやり方について解説していきたいと思います。</p>



<p>私の行うウェブスクレイピングは、</p>



<div class="wp-block-group is-style-sticky-red"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<p>①特定のサイトのHTMLの情報を取り出す<br>②そこからcalssやidなどの情報から、必要な情報だけ抜き出す</p>
</div></div>



<p>という方法です。<br>もう少しかみ砕いて説明すると、</p>



<div class="wp-block-group is-style-sticky-red"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<p>①サイトのページの情報をテキストとして取り出し、<br>②特定の文字列をキーにして、その間の文章を抜き出す</p>
</div></div>



<p>という方法です。</p>



<p>今回は、その中でも<br><span class="marker-animation-2071">②特定の文字列をキーにして、その間の文章を抜き出す方法</span><br>を紹介していきたいと思います。</p>



<h2 class="wp-block-heading"><span id="toc3">サンプルシートを紹介</span></h2>



<p>サンプルシートを下記に紹介します。</p>



<p>サンプルシートでは</p>



<div class="wp-block-group is-style-sticky-red"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<p>・2行目C列,D列に入力されたURLの情報を取り出し<br>・3行目C列,D列に入力された検索文字列<br>　「recipeIngredient」「amount」に該当するの情報を抜き出し、<br>・５行目以下に書き込む</p>
</div></div>



<p>プログラムとなっております。<br></p>



<figure class="wp-block-image size-large"><a rel="noopener" target="_blank" href="https://nujonoa.com/wp-content/uploads/2021/07/image.png"><img loading="lazy" decoding="async" width="632" height="347" src="https://nujonoa.com/wp-content/uploads/2021/07/image.png" alt="" class="wp-image-9619" srcset="https://nujonoa.com/wp-content/uploads/2021/07/image.png 632w, https://nujonoa.com/wp-content/uploads/2021/07/image-500x275.png 500w, https://nujonoa.com/wp-content/uploads/2021/07/image-300x165.png 300w" sizes="(max-width: 632px) 100vw, 632px" /></a></figure>



<div class="wp-block-cocoon-blocks-button-1 button-block"><a rel="noopener" target="_blank" href="https://docs.google.com/spreadsheets/d/1hNVSmIflMIQ1a3ohhurJDXWsG2xhb9mZsqEtxXCgmfM/edit?usp=sharing" class="btn btn-l btn-circle btn-shine">サンプルシートをダウンロード<span class="fa fa-external-link external-icon anchor-icon"></span></a></div>



<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<p>そのままですと閲覧のみ可能になっていますので、<br>ファイル→コピーを作成で、自分のスプレッドシートにコピーを作成してください。</p>



<div class="wp-block-cocoon-blocks-toggle-box-1 toggle-wrap toggle-box block-box"><input id="toggle-checkbox-20200809233634" class="toggle-checkbox" type="checkbox"/><label class="toggle-button" for="toggle-checkbox-20200809233634">スプレッドシートをコピーする方法(クリックして開く)</label><div class="toggle-content">
<div class="wp-block-image"><figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="394" height="781" src="https://nujonoa.com/wp-content/uploads/2020/08/2020-08-09_23h24_07-3.png" alt="" class="wp-image-6679" srcset="https://nujonoa.com/wp-content/uploads/2020/08/2020-08-09_23h24_07-3.png 394w, https://nujonoa.com/wp-content/uploads/2020/08/2020-08-09_23h24_07-3-300x595.png 300w" sizes="(max-width: 394px) 100vw, 394px" /><figcaption>スプレッドシートをコピーする方法</figcaption></figure></div>
</div></div>
</div></div>



<h2 class="wp-block-heading"><span id="toc4">コード紹介</span></h2>



<p>では、さっそくコードを紹介していきたいと思います。</p>



<p>コードは、<br>①UrlFetchApp.fetch(url)　でurlの情報を抜き出し　→このサイトを参考<br>②class要素の名前など、キーとなる情報を正規表現で抜き出しitemに代入<br>③innertextのみにするために無理やり「>」「&lt;」の間の文字列をとっています。</p>



<p>という構成になっております。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
function myFunction5() {

  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('実行');  
  var url = sheet.getRange(2, 3).getValue();
  var response = UrlFetchApp.fetch(url);
  var html = response.getContentText('UTF-8');

  var fromText = sheet.getRange(3, 3).getValue();
  var toText='&lt;'

  var KENSAKU =  fromText + '.*?' + toText 

  var itemRegexp = new RegExp(KENSAKU,'g');//gで全て

  var item = html.match(itemRegexp);
  var items = &#x5B;];

    Logger.log(item.length)
  
  for (var i = 0; i &lt; item.length; i++) {
    var itemURL = item&#x5B;i]
    var S_num = itemURL.indexOf('&gt;');
    var E_num = itemURL.indexOf('&lt;');
    var itemURL = itemURL.substring(S_num+1, E_num);
    items.push(&#x5B;itemURL]);
       }
  SpreadsheetApp.getActiveSheet().getRange(5, 3, items.length, 1).setValues(items);

  //２個目
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('実行');
  
  var url = sheet.getRange(2, 4).getValue();
  var response = UrlFetchApp.fetch(url);
  var html = response.getContentText('UTF-8');

  var fromText = sheet.getRange(3, 4).getValue();
  var toText='&lt;'

  var KENSAKU =  fromText + '.*?' + toText 

  var itemRegexp = new RegExp(KENSAKU,'g');//gで全て

  var item = html.match(itemRegexp);
  var items = &#x5B;];

    Logger.log(item.length)
  
  for (var i = 0; i &lt; item.length; i++) {
    var itemURL = item&#x5B;i]
    var S_num = itemURL.indexOf('&gt;');
    var E_num = itemURL.indexOf('&lt;');
    var itemURL = itemURL.substring(S_num+1, E_num);
    items.push(&#x5B;itemURL]);
       }
  SpreadsheetApp.getActiveSheet().getRange(5, 4, items.length, 1).setValues(items);

}
</pre></div>


<h2 class="wp-block-heading"><span id="toc5">簡単に説明</span></h2>



<p>コードの内容を簡単に説明していきます。</p>



<h3 class="wp-block-heading"><span id="toc6">HTMLの情報の抜き出し</span></h3>



<p><a rel="noopener" target="_blank" href="https://developers.google.com/apps-script/reference/url-fetch/http-response">グーグルの公式サイトを参考に<span class="fa fa-external-link external-icon anchor-icon"></span></a></p>



<p>UrlFetchApp.fetch(url);</p>



<p>でresponseに情報を格納し、</p>



<p>e.getContentText()</p>



<p>で、文字列としてエンコードされたHTTP応答のコンテンツを取得します。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
// The code below logs the HTML code of the Google home page.
var response = UrlFetchApp.fetch(&quot;http://www.google.com/&quot;);
Logger.log(response.getContentText());
</pre></div>


<p></p>



<h3 class="wp-block-heading"><span id="toc7">class要素などをキーに情報を抜き出し</span></h3>



<p>上記で得たテキストデータから、必要な情報を抜き出します。</p>



<p>抜き出す方法としては、「正規表現」で抜き出しています。<br>少し難しいので、</p>



<p>「/　文字列A　.*?　文字列B　/」</p>



<p>とすると、文字列A~文字列Bとなっている文字列を抜き出すことができると思ってください。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
  var fromText = sheet.getRange(3, 3).getValue();
  var toText='&lt;'

  var KENSAKU =  fromText + '.*?' + toText 

  var itemRegexp = new RegExp(KENSAKU,'g');//gで全て

  var item = html.match(itemRegexp);
</pre></div>


<p>これで、<br>fromtext ～ totext<br>の文字列をitem配列に代入することができます。</p>



<p>今回は、fromtextは任意、totextは「&lt;」に固定し、文字列を抜き出しています。</p>



<div class="wp-block-group is-style-sticky-blue"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<p>イメージとしては、</p>



<p>&lt;dd>&lt;p class="amount">１５０ｇ&lt;/p>&lt;/dd></p>



<p>というテキストデータから</p>



<p>amount ~ &lt;</p>



<p>となるテキストを検索し、</p>



<p>item に 「　amount">１５０ｇ&lt;　」を代入しています</p>
</div></div>



<h3 class="wp-block-heading"><span id="toc8">抜き出したデータから必要な部分だけ抜き出し</span></h3>



<p>抜き出したデータは、</p>



<div class="wp-block-group is-style-sticky-blue"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<p>item =　amount">１５０ｇ&lt;　</p>
</div></div>



<p>というように、いらない文字列が残っています。<br>そこで、</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
  for (var i = 0; i &lt; item.length; i++) {
    var itemURL = item&#x5B;i]
    var S_num = itemURL.indexOf('&gt;');
    var E_num = itemURL.indexOf('&lt;');
    var itemURL = itemURL.substring(S_num+1, E_num);
    items.push(&#x5B;itemURL]);
       }
</pre></div>


<p>を用いて、「>」「&lt;」の間のテキストだけを抜き出し、<br>２次元配列itemsに代入していっています。</p>



<p>そして結果を、</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
  SpreadsheetApp.getActiveSheet().getRange(5, 4, items.length, 1).setValues(items);
</pre></div>


<p>にて、セルに張り付けることで、完了です。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nujonoa.com/gas-scraping-class-method/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【GAS】メールを検索して書き出す方法(含む返信メール)。人、時間の指定、配列の使い方など</title>
		<link>https://nujonoa.com/how-to-extract-specific-emails-with-gas/</link>
					<comments>https://nujonoa.com/how-to-extract-specific-emails-with-gas/#respond</comments>
		
		<dc:creator><![CDATA[nujonoa]]></dc:creator>
		<pubDate>Fri, 28 Aug 2020 23:00:00 +0000</pubDate>
				<category><![CDATA[GAS]]></category>
		<category><![CDATA[二次元配列]]></category>
		<category><![CDATA[メール]]></category>
		<category><![CDATA[検索]]></category>
		<category><![CDATA[抜き出す]]></category>
		<guid isPermaLink="false">http://nujonoa.com/?p=6213</guid>

					<description><![CDATA[目次 【GAS】メールを検索して書き出す方法(含む返信メール)。人、時間の指定、配列の使い方などこのコードで出来ること。GASの入ったサンプルファイルのダウンロード使っているスクリプトを簡単に説明特定のメールを検索①検索 [&#8230;]]]></description>
										<content:encoded><![CDATA[

  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-20" checked><label class="toc-title" for="toc-checkbox-20">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">【GAS】メールを検索して書き出す方法(含む返信メール)。人、時間の指定、配列の使い方など</a></li><li><a href="#toc2" tabindex="0">このコードで出来ること。</a></li><li><a href="#toc3" tabindex="0">GASの入ったサンプルファイルのダウンロード</a></li><li><a href="#toc4" tabindex="0">使っているスクリプトを簡単に説明</a><ol><li><a href="#toc5" tabindex="0">特定のメールを検索</a><ol><li><a href="#toc6" tabindex="0">①検索キーの作成</a></li><li><a href="#toc7" tabindex="0">②GmailApp.search()でメールを検索</a></li><li><a href="#toc8" tabindex="0">③メッセージに切り分け</a></li></ol></li><li><a href="#toc9" tabindex="0">メールの整理</a></li><li><a href="#toc10" tabindex="0">二次元配列の長さを合わせて貼り付け</a></li></ol></li><li><a href="#toc11" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">【GAS】メールを検索して書き出す方法(含む返信メール)。人、時間の指定、配列の使い方など</span></h2>



<p>昨今の仕事では、メールでのやりとりが不可欠となってきましたが、</p>



<p class="is-style-alert-box">逆にメールが多すぎて処理しきれない。<br>どれを対応したかわからなくなってくる。</p>



<p>ということが多々あると思います。</p>



<p>GASを用いることで、グーグルスプレッドシートから、<br>メールを送れることはご存じかと思いますが、<br><span class="marker-animation">特定のメールを拾い上げてくることもできます。</span></p>



<p>そこで、</p>



<p class="is-style-alert-box">・ある人からのメールがたまっているから一つずつ処理していきたい。<br>・会議の場で、PJの人から送られてきたメールの進捗を1件ずつ確認していきたい。</p>



<p>という希望を叶えるような、スプレッドシートのgasを考えてみました！</p>



<p><span class="marker-animation">サンプルファイルを紹介しますので、<br>これをテンプレートに、自分なりにカスタマイズして使ってもらえたらと思います！</span></p>



<h2 class="wp-block-heading"><span id="toc2">このコードで出来ること。</span></h2>



<p>このスプレッドシートでできることは、</p>



<p>①指定日以降の、<span class="marker-animation-2071">指定した送信者からのメール</span>を検索し、<br>②<span class="marker-animation-2071">古い順に並べて表示</span>させることができます。<br>・題名が同じものは同じ行内で、左から最新の返信が表示されます。<br>・メールのリンクアドレスも張っておりますので、リンクに飛ぶことも可能です。</p>



<p>下の画像は、検索結果です。(<a rel="noopener" target="_blank" href="https://nujonoa.com/wp-content/uploads/2020/07/image-36-900x452.png">クリックして拡大<span class="fa fa-external-link internal-icon anchor-icon"></span></a>)<br>上から順に、古いものから検索されたメールが並び、題名の同じチェーンメール(返信)については、右側に並べられて行っているのが分かるかと思います。</p>



<figure class="wp-block-image size-large"><a rel="noopener" target="_blank" href="https://nujonoa.com/wp-content/uploads/2020/07/image-36.png"><img loading="lazy" decoding="async" width="900" height="452" src="https://nujonoa.com/wp-content/uploads/2020/07/image-36-900x452.png" alt="" class="wp-image-6565" srcset="https://nujonoa.com/wp-content/uploads/2020/07/image-36-900x452.png 900w, https://nujonoa.com/wp-content/uploads/2020/07/image-36-500x251.png 500w, https://nujonoa.com/wp-content/uploads/2020/07/image-36-300x151.png 300w, https://nujonoa.com/wp-content/uploads/2020/07/image-36-768x385.png 768w, https://nujonoa.com/wp-content/uploads/2020/07/image-36-1536x771.png 1536w, https://nujonoa.com/wp-content/uploads/2020/07/image-36.png 1612w" sizes="(max-width: 900px) 100vw, 900px" /></a></figure>



<p>実行の仕方は、<br>①いつから<br>②誰から<br>③最大件数<br>を打ち込み、「実行」ボタンを押すだけです。</p>



<p>実行した結果を動画にしてみました。<br>少し長いです…</p>



<figure class="wp-block-video"><video controls muted src="https://nujonoa.com/wp-content/uploads/2020/07/2020-07-17_22h52_22.mp4"></video></figure>



<h2 class="wp-block-heading"><span id="toc3">GASの入ったサンプルファイルのダウンロード</span></h2>



<p>GASの入ったサンプルファイルは下のボタンからダウンロードできます。</p>



<div class="wp-block-cocoon-blocks-button-1 button-block"><a rel="noopener" target="_blank" href="https://docs.google.com/spreadsheets/d/10z60MS07m1lnwBmJ0KnagRbOLzmA-bnZfQkPqn1BXnI/edit?usp=sharing" class="btn btn-l btn-shine">メール検索ソフトを立ち上げる<span class="fa fa-external-link external-icon anchor-icon"></span></a></div>



<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<p>そのままですと閲覧のみ可能になっていますので、<br>ファイル→コピーを作成で、自分のスプレッドシートにコピーを作成してください。</p>



<div class="wp-block-cocoon-blocks-toggle-box-1 toggle-wrap toggle-box block-box"><input id="toggle-checkbox-20200809233634" class="toggle-checkbox" type="checkbox"/><label class="toggle-button" for="toggle-checkbox-20200809233634">スプレッドシートをコピーする方法(クリックして開く)</label><div class="toggle-content">
<div class="wp-block-image"><figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="394" height="781" src="https://nujonoa.com/wp-content/uploads/2020/08/2020-08-09_23h24_07-3.png" alt="" class="wp-image-6679" srcset="https://nujonoa.com/wp-content/uploads/2020/08/2020-08-09_23h24_07-3.png 394w, https://nujonoa.com/wp-content/uploads/2020/08/2020-08-09_23h24_07-3-300x595.png 300w" sizes="(max-width: 394px) 100vw, 394px" /><figcaption>スプレッドシートをコピーする方法</figcaption></figure></div>
</div></div>
</div></div>



<p></p>



<h2 class="wp-block-heading"><span id="toc4">使っているスクリプトを簡単に説明</span></h2>



<p>使っているスクリプトについて簡単に説明していきます。</p>



<h3 class="wp-block-heading"><span id="toc5">特定のメールを検索</span></h3>



<p>まずは、特定のメールを抜き出す方法です。<br>特定のメールを書き出しているコードは、下記に記載する部分となっており、<br>①検索キーを作成<br>②GmailApp.search()でメールを検索<br>③GmailApp.getMessagesForThreads()で一つ一つのメッセージに分解しています。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
  const dateafter=Utilities.formatDate(sheet1.getRange(1,2).getValue(), 'Asia/Tokyo', 'yyyy/MM/dd');
  const fr=sheet1.getRange(1,6).getValue()  
  const KENSU=sheet1.getRange(1,9).getValue()
  
  var findkey = &quot;after:&quot;+dateafter+&quot; FROM:&quot;+fr
  var kensakukekka = GmailApp.search(findkey,0,KENSU);
  var Msg = GmailApp.getMessagesForThreads(kensakukekka);//二次元配列
</pre></div>


<h4 class="wp-block-heading"><span id="toc6">①検索キーの作成</span></h4>



<p>まずは検索キーの作成です。</p>



<p>Gmailapp.serchは様々な検索に対応していますが、今回は、<br>誰から来たのか　＝　from:<br>何時以降のメッセージか　＝after:<br>で検索をかけております。※空白を空けて検索することでand検索が可能です。</p>



<h4 class="wp-block-heading"><span id="toc7">②GmailApp.search()でメールを検索</span></h4>



<p>検索キーが作成出来たら、そのキーを使い、</p>



<p>GmailApp.search(findkey,0,KENSU);</p>



<p>でメールを検索します。<br>最大件数も指定できますので多くなり過ぎないように、指定しています。</p>



<h4 class="wp-block-heading"><span id="toc8">③メッセージに切り分け</span></h4>



<p>GmailApp.search(findkey,0,KENSU);で取り出せた情報は、<br>スレッドの情報になっています。<br>ですので、これを一つ一つ切り分けていく必要があります。</p>



<p>それが</p>



<p>var Msg = GmailApp.getMessagesForThreads(kensakukekka);</p>



<p>です。Msgで取り出した情報は2次元配列になっております。</p>



<p>少しわかりにくいですが、スレッドとメッセージのイメージは<br>下記のとおりです。</p>



<div class="wp-block-cocoon-blocks-sticky-box blank-box sticky block-box">
<p class="has-text-align-center">スレッドとメッセージのイメージ<br>スレッド①(メッセージ　本文A1→返信B1→返信C1→返信D1)<br>スレッド②(メッセージ　本文A2→返信B2→返信C2→返信D2)</p>



<p class="has-text-align-center">切り分けた後は2次元配列<br>・Msg[0][0]=本文A1<br>・Msg[1][2]=返信C2<br>※配列は[0]からスタート。</p>
</div>



<h3 class="wp-block-heading"><span id="toc9">メールの整理</span></h3>



<p>スレッドを抜き出すことができましたので、<br>次はその情報を整理していきます。</p>



<p>date,from,subj,body,permなどで情報を取り出し、2次元配列を作っていきます。</p>



<p>スレッドごとに分ける必要があるため、unshiftとconcatを使い分けています。</p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-nujonoa-blog"><div class="wp-block-embed__wrapper">

<a rel="noopener" target="_blank" href="https://nujonoa.com/how-to-combine-two-dimensional-arrays/" title="【GAS入門】2次元配列の結合方法。unshift,push,concatの使い方" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-right cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" src="http://nujonoa.com/wp-content/uploads/2019/05/25052019121319A-160x90.png" alt="" class=" internal-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">【GAS入門】2次元配列の結合方法。unshift,push,concatの使い方</div><div class="blogcard-snippet internal-blogcard-snippet">【GAS入門】2次元配列の結合方法。unshift,push,concatの使い方スプレッドシートで、GASを使っていくうえで、非常に重要になるのが・二次元配列を使えるかどうか？です。というのも、20回掛け算する場合、・セル毎に計算　→　4...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://nujonoa.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">nujonoa.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.07.14</div></div></div></div></a>
</div></figure>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
  /* 各メールから日時、送信元、件名、内容を取り出す */
  for(var i=0;i&lt;Msg.length;i++){

    if(i%5==0){book.toast(&quot;スクリプトを実行中です。&quot; + i + &quot;/&quot; + Msg.length , &quot;実行中&quot;, 5)}
    
    for(var j=0;j&lt;Msg&#x5B;i].length;j++){
      
　　　
　　　var date = Msg&#x5B;i]&#x5B;j].getDate();
　　　var from = Msg&#x5B;i]&#x5B;j].getFrom();
　　　var subj = Msg&#x5B;i]&#x5B;j].getSubject();
　　　var body = Msg&#x5B;i]&#x5B;j].getPlainBody().slice(0,200);
　　　var perm = kensakukekka&#x5B;i].getPermalink();

    if(j==0){OutputMsg.unshift(&#x5B;date,from,body])}
     else{
     OutputMsg&#x5B;0]=(&#x5B;date,from,body]).concat(OutputMsg&#x5B;0])
     }
  }  
  OutputMsg&#x5B;0]=(&#x5B;subj,perm]).concat(OutputMsg&#x5B;0])
  
  //&#x5B;date,from,subj,body,perm]
  
}
</pre></div>


<h3 class="wp-block-heading"><span id="toc10">二次元配列の長さを合わせて貼り付け</span></h3>



<p>最後に2次元配列の長さを合わせて貼り付けです。</p>



<p>上記のプログラムで抜き出すと、<br>スレッドの返信の数によって、<br>列の長さが異なっています。</p>



<p>GASは列の数をすべて合わせないと一括出力できない設定になっていますので、</p>



<p>ですので、一番長い列の長さを検索し、<br>すべての行をその長さに変更します。</p>



<p>そのあとsetvaluesで二次元配列をセルに代入します。</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
  for(var i=0;i&lt;OutputMsg.length;i++){
    var cn=OutputMsg&#x5B;i].length
    if(cn&gt;maxc){maxc=cn}
    }

  for(var i=0;i&lt;OutputMsg.length;i++){
      OutputMsg&#x5B;i].length=maxc
    }

    if(Msg.length&gt;0){
    var mySheet=SpreadsheetApp.getActiveSpreadsheet().getSheetByName('メール確認');
    mySheet.getRange(3, 2, OutputMsg.length,maxc).setValues(OutputMsg);
  }
</pre></div>


<h2 class="wp-block-heading"><span id="toc11">まとめ</span></h2>



<p>GASを使ってメールの検索ができることは知っており、<br>どのように使うべきか、、と悩んでいましたが、</p>



<p>メールで仕事を行っている現代において、<br>メールのやりとりを見れば＝TODOリストになっていることが分かりました。</p>



<p>ぜひ、このファイルを参考に、<br>仕事で活用していただけたらと思います！</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nujonoa.com/how-to-extract-specific-emails-with-gas/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		<enclosure url="http://nujonoa.com/wp-content/uploads/2020/07/2020-07-17_22h52_22.mp4" length="466905" type="video/mp4" />

			</item>
	</channel>
</rss>
