Mais conteúdo relacionado
Semelhante a 20181017エンジニア交流会GoogleAppsScriptミートアップ#3「サイドバー作りのススメ~ノンプログラマー向けベストプラクティス~ (20)
20181017エンジニア交流会GoogleAppsScriptミートアップ#3「サイドバー作りのススメ~ノンプログラマー向けベストプラクティス~
- 2. Copyright © Plannauts,Inc. 2
■高橋宣成(タカハシノリアキ)
・1976年5月5日生まれ(41歳)
・東京都板橋区在住
・株式会社プランノーツ代表
・ひとり社長
@ntakahashi0505
noriaki.takahashi.923
n_takahashi0505
自己紹介
- 3. Copyright © Plannauts,Inc. 3
ミッション
- Office・VBA
- G Suite・Google Apps Script
- チャットワーク
“日本の『働く』の価値を上げる“
⇒「ITリテラシーが高くない」中小企業・個人への支援
- 6. Copyright © Plannauts,Inc.Copyright © Plannauts,Inc. 6
コミュニティ
ノンプログラマーのための
スキルアップ研究会
~プログラミングを中心としたスキルを
身に着け続ける研究をするための場
■2017/12/01スタート
■メンバー数35名
■コンテンツ
- 月1回の定例会
- 月2会以上の勉強会
- オンラインサポート
- 未発表書籍・記事の共有
- 執筆・登壇・実務等の機会の提供
- 11. Copyright © Plannauts,Inc. 11
コードの中身
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!-- スタイルシート -->
</head>
<body>
<!-- 表示部分のHTML -->
<!-- フロント側のJavaScript -->
</body>
</html>
main.gs
function showSidebar(){
//サイドバーを表示
}
function onOpen(){
//カスタムメニューを構築・反映
}
function hogeHoge(){
//GASのスクリプト
}
ブラウザで動作 サーバーで動作
- 13. Copyright © Plannauts,Inc. 13
こちらを拝借していらないところ削る
スタイル用のclassも設定されててありがたい
https://developers.google.com/gsuite/add-ons/guides/css
●スタイル
●ラベル
●テキストエリア
●チェックボックス
●ボタン
●フッター的な
- 14. Copyright © Plannauts,Inc. 14
cssとjsはindexに埋め込む
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!-- スタイルシート css.htmlの埋め込み -->
</head>
<body>
<!-- 表示部分のHTML -->
<!-- フロント側のJavaScript js.htmlの埋め込み -->
</body>
</html>
css.html
<link rel="stylesheet" href="https://~">
js.html
<script src="https://cdn~"></script>
<script>
//フロント側の処理
</script>
- 15. Copyright © Plannauts,Inc. 15
強制出力スクリプトレットタグ
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<!-- 表示部分のHTML -->
<?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
</body>
</html>
- 18. Copyright © Plannauts,Inc. 18
サイドバー用のスタイルシートあるよ
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
https://developers.google.com/gsuite/add-ons/guides/css
- 25. Copyright © Plannauts,Inc. 25
サイドバーの表示
main.gs
/**
* サイドバーを表示する
*/
function showSidebar(){
var ui = HtmlService.createTemplateFromFile('index').evaluate().setTitle('翻訳サイドバー');
DocumentApp.getUi().showSidebar(ui);
}