(license)みなさん、こんにちは!タカハシ(@ntakahashi0505)です。Scriptでサイドバーを作成する方法をお伝えしています。Scriptでサイドバーを作る方法をお伝えしています。今回は、サイドバー用のCSSパッケージ導入を前提としてGASのサイドバーをdivタグとclass属性でスタイルしていく方法です。tonari-it.com2018.11.29サイドバーをCSSパッケージでスタイリングしました。外側の見栄えの部分は完成しましたので、今度は内側の動作の部分を作っていきますね。Scriptでサイドバーのボタンを押して動作させる方法です。前回のおさらいサイドバーのボタンクリックでアラートを表示させるイベントとは?イベントハンドラとは?onclick属性でクリックイベントをキャッチするアラートを表示するGASのコードとJavaScriptのコードまとめ連載目次:GASで初めてのサイドバーを作ろう!前回のおさらいまず、前回のおさらいからです。GAS側は引き続きサイドバーを表示するだけのシンプルなスクリプトですね。HtmlService.createHtmlOutputFromFile('index');DocumentApp.getUi().showSidebar(htmlOutput);}そして、サイドバーの見栄えのほうを担当するindex.htmlがこちら。class="blue">Translate</button><button>Insert</button></div></div></body></html>このサイドバーを表示すると...こちらのような表示になります。ボタン押しても何も起きないのです。今回から、その点を進めていきますよ。サイドバーのボタンクリックでアラートを表示させるいきなり翻訳機能を動作させるのは少し難しいので、まずはアラート表示をさせるように作っていきます。前提として「イベント」と「イベントハンドラ」について、知る必要がありますので、先に説明をしていきましょう。イベントとは?イベントハンドラとは?イベントというのは、Webページ上で発生した出来事のことです。今回は、Googleドキュメントのサイドバーだから違うなと直感的に思ってしまうかも知れませんが、Googleドキュメントはブラウザで動作するWebページで、サイドバーもその一部です。サイドバーについてもボタンがクリックされたマウスカーソルが特定の要素に乗っかったセレクトボックスの選択肢が変更されたサイドバーが表示されたと、このような出来事はイベントと捉えることができます。それに対してイベントハンドラというものがありまして、これはイベントの発生を待ち構えていて、発生したらキャッチする機能のことをいいます。「ボタンを押した」というイベントをキャッチするイベントハンドラを仕込んでおいて、それをトリガーにアラートを表示する処理を実行させればよいということになります。onclick属性でクリックイベントをキャッチする「ボタンをクリックした」というイベントをキャッチするイベントハンドラはどのように仕込めば良いでしょうか?それには、onclick属性を使います。クリックが可能なHTML要素について、以下のようにすることで、その要素のクリックを待ち構えるイベントハンドラを仕込むことができます。onclick=”JavaScriptのコード”>タグの内容</タグ>当然、buttonタグにはonclick属性を仕込むことができます。クリックされた暁には属性に指定する「JavaScriptのコード」が実行されるわけです。したがって、アラートを表示する処理もJavaScriptのコードを使うことになります。アラートを表示するアラートを表示するには、windowオブジェクトのalertメソッドを使います。window.alert(メッセージ)windowオブジェクトというのは、ブラウザのウィンドウを表すオブジェクトです。省略できますので、ほぼ省略されてますね。alert(メッセージ)つまり、index.htmlの14行目について、以下のようなonclick属性を追加すれば良いということになります。onclick="alert('Translateをクリックしたよ')">Translate</button>保存して、サイドバーを表示し直してから、「Translate」ボタンを押すと...このようにアラートが表示されましたね。GASのコードとJavaScriptのコードここで、GASのコードとJavaScriptのコードについて補足します。「前回のおさらい」でお伝えした、「コード.gs」に書かれているのもベースはJavaScriptですよね。それで、先程のonclick属性のダブルクォーテーション内に詰め込んだコードもJavaScriptです。この二つは同じモノなのか、別モノなのか...?と混乱しているかもしれません。結論から言うと別モノです。何が違うかというと、実行する場所が違います。「コード.gs」はGoogleのサーバー内で実行されます。GASのコードはすべてGoolgleのサーバー内で実行されるのです。一方で、「index.html」内に埋め込んだJavaScriptは、HTMLファイルとともに、ブラウザに渡されます。実行されるのは、送られたクライアントPCのブラウザ上なわけです。ブラウザのウィンドウをwindowオブジェクトで操作できるのです。一方で、GASはGoogleのサーバー内にいますから、そもそもブラウザのウィンドウであるwindowオブジェクトは操作できないのです。Scriptでサイドバーのボタンをクリックして動作させる方法をお伝えしました。イベント、イベントハンドラ、あとブラウザで動くJavaScriptについて説明しました。このあたり、混乱しやすいのでバッチリおさえておいてくださいね。次回は、JavaScriptとCSSを別ファイルに分離する方法についてお伝えします。Scriptでサイドバーを作成する方法をお伝えしています。今回は、GASでサイドバーを作る際にJavaScriptをプロジェクト内の別ファイルに分離する方法についてお伝えします。Scriptではスプレッドシートやドキュメントの業務を手助けするサイドバーを自作することができます。このシリーズではHTMLを学びながらサイドバーの作り方を易しく紹介していきます。プランノーツ代表、コミュニティ「ノンプロ研」主宰。ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ★フォロー頂ければ嬉しいです。「コミュニティ+講座」形式で継続性&教え合える環境も提供。!ノンプログラマーがプログラミングスキルを身に着ける支援ををするコミュニティ。セミナー・もくもく会・Facebookグループのサポートで「自らで学び続ける力をつける」支援、「教え合うことで学びの価値を上げる」場の提供をしています。Script...仕事効率化において、学び活用するメリットをこれでもかとお伝えします。ScriptGASでGmailの受信トレイに溜まった指定の日付以前のスレッドを自動でアーカイブする方法Gmailの受信トレイにメール...溜まっていませんか?そんなときは、GASを使って自動アーカイブしちゃいましょう。今回は、GASでGmailの受信トレイの指定日付以前のスレッドをアーカイブする方法をお伝えします。Scriptのクラス」をテーマにシリーズ連載をお送りしております。今回は、GASでスプレッドシートの表をインスタンス配列化する方法をおお送りします。SQLのデータベースにアクセスする方法をシリーズでお伝えしています。SQLインスタンスに接続する方法です。Script」を中心に学びをレポートをしていきます。初心者ノンプログラマー向けに「GASを使ってSlackにメッセージを送る」を目標にお送りしております。Hacks」のレスポンスをオブジェクトに変換する方法を紹介します。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント109セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント109セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。Scriptが「V8ランタイム」をサポート!モダンなECMAScript構文が使えるようになった2020.02.072020.02.08GASでコピーしたGoogleスライドのプレゼンテーションを取得する方法2020.02.052020.02.05Facebookページいつも隣にitのお仕事タイトルとURLをコピーしました。