(license)みなさん、こんにちは!タカハシ(@ntakahashi0505)です。Scriptでサイドバーを作る方法をシリーズでお伝えしています。Scriptでサイドバーを作る方法をお伝えしています。今回は、GASでサイドバーを作るための初めてのHTMLの基礎知識として、HTMLの記述やタグの基本について解説します。tonari-it.com2018.11.14GASでサイドバーを作る場合はHTMLを使う必要があるのですが、その基本中の基本についてお伝えしました。サイドバーを作る場合、HTMLを使ってテキストエリアやボタンなどの「フォーム部品」を配置してあげる必要があります。サンプルを例に、いくつかの代表的なフォーム部品の作り方をお伝えします。いうことで、今回はGASでサイドバーを作るときに使用するいくつかのフォーム部品の作り方をお伝えします。前回のおさらいフォーム部品の作り方labelタグ:ラベルtextareaタグ:テキストエリアbuttonタグ:ボタンまとめ連載目次:GASで初めてのサイドバーを作ろう!前回のおさらいまず、前回の復習からです。サイドバーを表示するGASスクリプト「コード.gs」はコチラです。HtmlService.createHtmlOutputFromFile('index');DocumentApp.getUi().showSidebar(htmlOutput);}実行すると、index.htmlというHTMLファイルをサイドバーに反映します。そのindex.htmlについて、前回以下のように作りました。target="_top"></head><body><label><b>Translation</b></label><textarea></textarea><button>Translate</button><button>Insert</button></body></html>これをサイドバーとして表示すると、以下のようになります。いえ、前回はindex.htmlで追加したフォーム部品に関するタグについて解説をしていなかったので、今回その部分を補足していきますね。今回配置している部品は以下の3種類ですね。ボタンご覧いただいて分かる通り、サイドバーに配置するフォーム部品も、種類に応じてタグが用意されています。いずれも、なんとなくその役割は想像できそうですよね。それぞれ解説をしていきます。labelタグ:ラベルまず7行目のlabelタグです。labelタグは、その名の通りラベルを表すタグです。<label>ラベル</label>今回は次で紹介するテキストエリアの内容を表すラベルとして「Translation」というテキストをラベルとしています。bタグ:太字さて、ちょっとスルーしそうになりましたが、7行目の文字列「Translation」はbタグで囲まれていますよね。bタグは装飾をするためのタグの一つで、太字にする役割を持ちます。<b>文字列</b>bタグを外して単に以下のように記述すると...XHTML<label>Translation</label>1<label>Translation</label>以下のように、文字の太さが通常の太さに戻ります。textareaタグ:テキストエリアその次の8行目のtextareaタグですが、これはテキストエリアつまり複数行のテキスト入力欄を作成します。<textarea>テキストエリアの内容</textarea>テキストエリアの内容を指定すると、テキストエリア内にその文字列が初期値として入力される形になります。以下は「あいうえお」を初期値としてみた例です。今回の例では、タグの中身は何も指定していないので、実行時は空のテキストエリアが表示されることになります。buttonタグ:ボタンそして、9,10行目はサイドバーには必須と言っても過言ではないbuttonタグです。名前の通り、ボタンを作るためのタグです。<button>ボタンの表示内容</button>今回は「Translate」というボタンと、「Insert」というボタンの2つを配置しています。今の段階では押してみても...残念ながら何も反応しません。反応をさせるためには、もうひと工夫する必要があるんですね。それについては、追々お伝えしていきますよ。Scriptでサイドバーを作る際のフォーム部品のいくつかの作り方をお伝えしました。フォーム部品には他にも色々な種類があります。このブログでも機会があれば紹介していきますし、検索をすれば良記事がたくさんありますので、調べてみても良いと思います。次回ですが「スタイル」を設定するためのCSSパッケージについてお伝えしていきます。Scriptでサイドバーを作る方法をお伝えしています。今回はGASによる自作のサイドバーに、Google公式のサイドバー用CSSパッケージを適用してする方法をお伝えします。Scriptではスプレッドシートやドキュメントの業務を手助けするサイドバーを自作することができます。このシリーズではHTMLを学びながらサイドバーの作り方を易しく紹介していきます。プランノーツ代表、コミュニティ「ノンプロ研」主宰。ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ★フォロー頂ければ嬉しいです。「コミュニティ+講座」形式で継続性&教え合える環境も提供。!ノンプログラマーがプログラミングスキルを身に着ける支援ををするコミュニティ。セミナー・もくもく会・Facebookグループのサポートで「自らで学び続ける力をつける」支援、「教え合うことで学びの価値を上げる」場の提供をしています。SQLのデータベースにアクセスする方法をシリーズでお伝えしています。SQLインスタンスにSQL文でデータベースを作成する方法です。Scriptの第一歩ですが、しょっぱなから真っ先にチャットワークを操作してしまいます。初回はGASのプロジェクトの作成、ライブラリの追加、スクリプトの記述と実行までです。Script【初心者向けGAS】Spreadsheetサービスの「オブジェクト」の基礎の基礎を知ろうGASプログラミングの基礎を学ぶシリーズです。今回は、GASでスプレッドシートを操作していく際に知っておくべきオブジェクトとその基礎、SpreadsheetApp、アクティブなスプレッドシートの取得についてです。SQLのデータベースにアクセスする方法をシリーズでお伝えしています。SQLのデータベースに複数のSQLを実行する方法です。Scriptで特定月のカレンダーのイベント情報を取得するGoogleカレンダーの記録を活用して過去の仕事の生産性を測定するしていきます。Scriptで特定の月のカレンダーのイベント情報を取得する方法についてお伝えします。Scriptで日付関連の処理を関数化する例とその際のポイントGASでGoogleカレンダーにまとめてイベントを登録できるツールを作成しています。Scriptで日付関連の処理を関数化する例とそのポイントについて解説をしていきます。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント107セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント107セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。ご依頼・お見積などお気軽にどうぞ!お問い合わせフォーム新着記事GASでGoogleスライドのSlideオブジェクトの概要とその取得方法2020.01.162020.01.16【エクセルVBA】ユーザーフォームにコンボボックスを追加する方法2020.01.162020.01.16GASでGoogleスライドを操作するSlidesサービスの基礎の基礎2020.01.152020.01.16GASでGoogleスライドのプレゼンテーションを操作するはじめの一歩2020.01.142020.01.15GASのconsoleクラスのメソッドで実行時間をログ出力する方法2020.01.122020.01.12Facebookページいつも隣にitのお仕事タイトルとURLをコピーしました。