Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Copyright © Plannauts,Inc.
【エンジニア交流会】
Google Apps Script活用ミートアップ #3
サイドバー作りのススメ
~ノンプログラマー向けベストプラクティス~
株式会社プランノーツ 高橋 宣成
1
Copyright © Plannauts,Inc. 2
■高橋宣成(タカハシノリアキ)
・1976年5月5日生まれ(41歳)
・東京都板橋区在住
・株式会社プランノーツ代表
・ひとり社長
@ntakahashi0505
noriaki.tak...
Copyright © Plannauts,Inc. 3
ミッション
- Office・VBA
- G Suite・Google Apps Script
- チャットワーク
“日本の『働く』の価値を上げる“
⇒「ITリテラシーが高くない」中小企...
Copyright © Plannauts,Inc.Copyright © Plannauts,Inc. 4
ブログ
いつも隣にITのお仕事
 94万PV/月
 カテゴリ
- Excel・Word・VBA
- G Suite・GAS
- V...
Copyright © Plannauts,Inc.Copyright © Plannauts,Inc. 5
著書執筆
ExcelVBAを実務で
使い倒す技術
5刷…そして12,000部突破!
詳解!GoogleAppsScript
完全入門
...
Copyright © Plannauts,Inc.Copyright © Plannauts,Inc. 6
コミュニティ
ノンプログラマーのための
スキルアップ研究会
~プログラミングを中心としたスキルを
身に着け続ける研究をするための場
■...
Copyright © Plannauts,Inc. 7
サイドバーを作ろう!
Copyright © Plannauts,Inc. 8
翻訳サイドバーを作ってみる
Copyright © Plannauts,Inc. 9
●HTMLサービスで作れるUI
●バインドしているSheets・Docs・
Slides・Forms
●開いている間もアプリケーション操作可
●アドオン化して配布
サイドバーとは
Copyright © Plannauts,Inc. 10
プロジェクトの構成
●main.gs …サーバー側
●index.html
●css.html …クライアント側
●js.html
Copyright © Plannauts,Inc. 11
コードの中身
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!-- スタイルシート -->
</head...
Copyright © Plannauts,Inc. 12
表示部分を作る
●main.gs
●index.html
●css.html
●js.html
Copyright © Plannauts,Inc. 13
こちらを拝借していらないところ削る
スタイル用のclassも設定されててありがたい
https://developers.google.com/gsuite/add-ons/guide...
Copyright © Plannauts,Inc. 14
cssとjsはindexに埋め込む
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!-- スタイルシート...
Copyright © Plannauts,Inc. 15
強制出力スクリプトレットタグ
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= HtmlServic...
Copyright © Plannauts,Inc. 16
ノンプログラマーの敵
●main.gs
●index.html
●css.html
●js.html
Copyright © Plannauts,Inc. 17
スタイル…なきゃないでいいんですが
Copyright © Plannauts,Inc. 18
サイドバー用のスタイルシートあるよ
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-o...
Copyright © Plannauts,Inc. 19
Copyright © Plannauts,Inc. 20
やったことないフロント側
●main.gs
●index.html
●css.html
●js.html
Copyright © Plannauts,Inc.Copyright © Plannauts,Inc. 21
・イベント発生をキャッチ
・DOM要素取得して
・サーバー側に渡して
・サーバー側から受け取って
・DOM要素取得して反映
…なんか...
Copyright © Plannauts,Inc. 22
気になる存在
Copyright © Plannauts,Inc. 23
話すと長くなっちゃうので割愛…!
Copyright © Plannauts,Inc. 24
忘れちゃいけないサーバー側
●main.gs
●index.html
●css.html
●js.html
Copyright © Plannauts,Inc. 25
サイドバーの表示
main.gs
/**
* サイドバーを表示する
*/
function showSidebar(){
var ui = HtmlService.createTemp...
Copyright © Plannauts,Inc. 26
動作を見てみましょう
Copyright © Plannauts,Inc. 27
●独自の便利ツール
●アドオンとして配布も可
●フロント側のJSも身につく
サイドバー作りのいいとこ
Copyright © Plannauts,Inc. 28
サイドバー作ってみよう!
Copyright © Plannauts,Inc.
ご清聴ありがとうございました
29
Upcoming SlideShare
Loading in …5
×

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

325 views

Published on

Google Apps Scriptはすごい便利です!スプレッドシートやドキュメントの作業効率化に効果絶大なサイドバーの作り方について、ノンプログラマー向けの導入編ということでお話しました。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Copyright © Plannauts,Inc. 【エンジニア交流会】 Google Apps Script活用ミートアップ #3 サイドバー作りのススメ ~ノンプログラマー向けベストプラクティス~ 株式会社プランノーツ 高橋 宣成 1
  2. 2. Copyright © Plannauts,Inc. 2 ■高橋宣成(タカハシノリアキ) ・1976年5月5日生まれ(41歳) ・東京都板橋区在住 ・株式会社プランノーツ代表 ・ひとり社長 @ntakahashi0505 noriaki.takahashi.923 n_takahashi0505 自己紹介
  3. 3. Copyright © Plannauts,Inc. 3 ミッション - Office・VBA - G Suite・Google Apps Script - チャットワーク “日本の『働く』の価値を上げる“ ⇒「ITリテラシーが高くない」中小企業・個人への支援
  4. 4. Copyright © Plannauts,Inc.Copyright © Plannauts,Inc. 4 ブログ いつも隣にITのお仕事  94万PV/月  カテゴリ - Excel・Word・VBA - G Suite・GAS - Vue.js・JavaScript - IT・働き方
  5. 5. Copyright © Plannauts,Inc.Copyright © Plannauts,Inc. 5 著書執筆 ExcelVBAを実務で 使い倒す技術 5刷…そして12,000部突破! 詳解!GoogleAppsScript 完全入門 パーフェクトExcelVBA(仮) 祝!3刷 来春にむけて執筆中!
  6. 6. Copyright © Plannauts,Inc.Copyright © Plannauts,Inc. 6 コミュニティ ノンプログラマーのための スキルアップ研究会 ~プログラミングを中心としたスキルを 身に着け続ける研究をするための場 ■2017/12/01スタート ■メンバー数35名 ■コンテンツ - 月1回の定例会 - 月2会以上の勉強会 - オンラインサポート - 未発表書籍・記事の共有 - 執筆・登壇・実務等の機会の提供
  7. 7. Copyright © Plannauts,Inc. 7 サイドバーを作ろう!
  8. 8. Copyright © Plannauts,Inc. 8 翻訳サイドバーを作ってみる
  9. 9. Copyright © Plannauts,Inc. 9 ●HTMLサービスで作れるUI ●バインドしているSheets・Docs・ Slides・Forms ●開いている間もアプリケーション操作可 ●アドオン化して配布 サイドバーとは
  10. 10. Copyright © Plannauts,Inc. 10 プロジェクトの構成 ●main.gs …サーバー側 ●index.html ●css.html …クライアント側 ●js.html
  11. 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のスクリプト } ブラウザで動作 サーバーで動作
  12. 12. Copyright © Plannauts,Inc. 12 表示部分を作る ●main.gs ●index.html ●css.html ●js.html
  13. 13. Copyright © Plannauts,Inc. 13 こちらを拝借していらないところ削る スタイル用のclassも設定されててありがたい https://developers.google.com/gsuite/add-ons/guides/css ●スタイル ●ラベル ●テキストエリア ●チェックボックス ●ボタン ●フッター的な
  14. 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. 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>
  16. 16. Copyright © Plannauts,Inc. 16 ノンプログラマーの敵 ●main.gs ●index.html ●css.html ●js.html
  17. 17. Copyright © Plannauts,Inc. 17 スタイル…なきゃないでいいんですが
  18. 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
  19. 19. Copyright © Plannauts,Inc. 19
  20. 20. Copyright © Plannauts,Inc. 20 やったことないフロント側 ●main.gs ●index.html ●css.html ●js.html
  21. 21. Copyright © Plannauts,Inc.Copyright © Plannauts,Inc. 21 ・イベント発生をキャッチ ・DOM要素取得して ・サーバー側に渡して ・サーバー側から受け取って ・DOM要素取得して反映 …なんかめんどい
  22. 22. Copyright © Plannauts,Inc. 22 気になる存在
  23. 23. Copyright © Plannauts,Inc. 23 話すと長くなっちゃうので割愛…!
  24. 24. Copyright © Plannauts,Inc. 24 忘れちゃいけないサーバー側 ●main.gs ●index.html ●css.html ●js.html
  25. 25. Copyright © Plannauts,Inc. 25 サイドバーの表示 main.gs /** * サイドバーを表示する */ function showSidebar(){ var ui = HtmlService.createTemplateFromFile('index').evaluate().setTitle('翻訳サイドバー'); DocumentApp.getUi().showSidebar(ui); }
  26. 26. Copyright © Plannauts,Inc. 26 動作を見てみましょう
  27. 27. Copyright © Plannauts,Inc. 27 ●独自の便利ツール ●アドオンとして配布も可 ●フロント側のJSも身につく サイドバー作りのいいとこ
  28. 28. Copyright © Plannauts,Inc. 28 サイドバー作ってみよう!
  29. 29. Copyright © Plannauts,Inc. ご清聴ありがとうございました 29

×