20181017エンジニア交流会GoogleAppsScriptミートアップ#3「サイドバー作りのススメ～ノンプログラマー向けベストプラクティス～

Copyright © Plannauts,Inc.
【エンジニア交流会】
Google Apps Script活用ミートアップ #3
サイドバー作りのススメ
~ノンプログラマー向けベストプラクティス~
株式会社プランノーツ高橋宣成
1

Copyright © Plannauts,Inc. 2
■高橋宣成(タカハシノリアキ)
・1976年5月5日生まれ（41歳）
・東京都板橋区在住
・株式会社プランノーツ代表
・ひとり社長
@ntakahashi0505
noriaki.takahashi.923
n_takahashi0505
自己紹介

ミッション
- Office・VBA
- G Suite・Google Apps Script
- チャットワーク
“日本の『働く』の価値を上げる“
⇒「ITリテラシーが高くない」中小企業・個人への支援

Copyright © Plannauts,Inc.Copyright © Plannauts,Inc. 4
ブログ
いつも隣にITのお仕事
 94万PV/月
 カテゴリ
- Excel・Word・VBA
- G Suite・GAS
- Vue.js・JavaScript
- IT・働き方

著書執筆
ExcelVBAを実務で
使い倒す技術
５刷…そして12,000部突破！
詳解！GoogleAppsScript
完全入門
パーフェクトExcelVBA（仮）
祝！3刷
来春にむけて執筆中！

コミュニティ
ノンプログラマーのための
スキルアップ研究会
～プログラミングを中心としたスキルを
身に着け続ける研究をするための場
■2017/12/01スタート
■メンバー数35名
■コンテンツ
- 月１回の定例会
- 月２会以上の勉強会
- オンラインサポート
- 未発表書籍・記事の共有
- 執筆・登壇・実務等の機会の提供

サイドバーを作ろう！

翻訳サイドバーを作ってみる

●HTMLサービスで作れるUI
●バインドしているSheets・Docs・
Slides・Forms
●開いている間もアプリケーション操作可
●アドオン化して配布
サイドバーとは

プロジェクトの構成
●main.gs …サーバー側
●index.html
●css.html …クライアント側
●js.html

コードの中身
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">

</head>
<body>


</body>
</html>
main.gs
function showSidebar(){
//サイドバーを表示
}
function onOpen(){
//カスタムメニューを構築・反映
}
function hogeHoge(){
//GASのスクリプト
}
ブラウザで動作サーバーで動作

表示部分を作る
●main.gs
●index.html
●css.html
●js.html

こちらを拝借していらないところ削る
スタイル用のclassも設定されててありがたい
https://developers.google.com/gsuite/add-ons/guides/css
●スタイル
●ラベル
●テキストエリア
●チェックボックス
●ボタン
●フッター的な

cssとjsはindexに埋め込む
index.html
<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>
css.html
<link rel="stylesheet" href="https://~">
js.html
<script src="https://cdn~"></script>
<script>
//フロント側の処理
</script>

強制出力スクリプトレットタグ
index.html
<!DOCTYPE html>
<html>
<head>
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
</body>
</html>

ノンプログラマーの敵
●main.gs
●index.html
●css.html
●js.html

スタイル…なきゃないでいいんですが

サイドバー用のスタイルシートあるよ
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
https://developers.google.com/gsuite/add-ons/guides/css

やったことないフロント側
●main.gs
●index.html
●css.html
●js.html

・イベント発生をキャッチ
・DOM要素取得して
・サーバー側に渡して
・サーバー側から受け取って
・DOM要素取得して反映
…なんかめんどい

気になる存在

話すと長くなっちゃうので割愛…！

忘れちゃいけないサーバー側
●main.gs
●index.html
●css.html
●js.html

サイドバーの表示
main.gs
/**
* サイドバーを表示する
*/
function showSidebar(){
var ui = HtmlService.createTemplateFromFile('index').evaluate().setTitle('翻訳サイドバー');
DocumentApp.getUi().showSidebar(ui);
}

動作を見てみましょう

●独自の便利ツール
●アドオンとして配布も可
●フロント側のJSも身につく
サイドバー作りのいいとこ

サイドバー作ってみよう！

20181017エンジニア交流会GoogleAppsScriptミートアップ#3「サイドバー作りのススメ～ノンプログラマー向けベストプラクティス～

More Related Content

What's hot

More from Noriaki Takahashi

Recently uploaded

20181017エンジニア交流会GoogleAppsScriptミートアップ#3「サイドバー作りのススメ～ノンプログラマー向けベストプラクティス～