Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Modern UI for Office Work
Search
wtnabe
December 12, 2015
Programming
0
260
Modern UI for Office Work
Google Apps Script の HtmlService を使って Modern UI を追加する
wtnabe
December 12, 2015
Tweet
Share
More Decks by wtnabe
See All by wtnabe
Decoupled System with Turbo Frame
wtnabe
1
49
join-kanazawarb-or-7years-passed-since-it-was-borned
wtnabe
0
680
let-me-edit-with-editor
wtnabe
0
250
google-photos-and-storage-and-rclone
wtnabe
0
330
one case of how to begin vuejs
wtnabe
2
380
Kanazawa.rb meetup #56 Coderetreat Intro
wtnabe
0
360
lightweight authenticity of microservices
wtnabe
0
380
Automate WordPress deployment with WordMove
wtnabe
1
420
CircleCI Hands-on for Beginners
wtnabe
0
390
Other Decks in Programming
See All in Programming
継続的な活動で築く地方エンジニアの道
myamashii
2
350
Product Management LT会_クアンド新家
shinshin
0
210
ドメイン駆動設計の実践
masuda220
PRO
17
5.1k
Introduction to GitOps
hwchiu
0
110
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
CSC307 Lecture 08
javiergs
PRO
0
330
CSC307 Lecture 10
javiergs
PRO
0
310
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
239
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Thoughts on Productivity
jonyablonski
64
4.1k
Code Reviewing Like a Champion
maltzj
517
39k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Transcript
Modern UI for Office Work @wtnabe Kanazawa.rb meetup #40 2015-12-12
(Sat) at IT-Plaza MUSASHI
お品書き 今回やりたいこと 材料 まとめ
今回やりたいこと Select2 - The jQuery replacement for select boxes
いきなりDemo
背景
Excelは便利 計算しなくても表形式のデータ管理に 別シートでマスタ管理みたいなことも 「⼊⼒規則」で <select> のようにも
便利だけれど、こういうのは困る
もう⼀度やりたいこと ⼿でデータ⼊⼒する でも正規化したい 「⼊⼒規則」は部分⼀致検索できない
それjQueryでできるよ
jQuery, jQuery-Select2 を組み込む jQuery-Select2 にデータを渡して fire $('select').select2({ data: [ {id:
1, text: '1'}, {id: 2, text: '2'} ] });
いやいやいや それHTMLの世界の話ですよね
安⼼してください
Google Spreadsheetで できますよ
材料 Google Spreadsheet Google Apps Script UiオブジェクトとMenu HtmlService Sidebar remote
scriptの実⾏ https://select2.github.io/
Google Apps Scriptの概要は 端折ります
Google Apps Scriptの 詳細を⼀部紹介します
UiオブジェクトとMenu 独⾃メニューを追加できる 新しいアクションを追加する基本 .getUi().createMenu(name) .addItem('title', funcName) .addToUi()
HtmlService Uiオブジェクトに変わる新しいUI組み⽴ て⽤のオブジェクト(出⼒は別途) Webページとして Custom Dialogとして Sidebarとして として
var html = HtmlService .createTemplateFromFile(htmlName) .evaluate() .setSandboxMode(HtmlService.SandboxMode.IFRA .setTitle(title) .setWidth(200); SpreadsheetApp.getUi().showSidebar(html);
HtmlService PHPっぽい⽂法のテンプレート <?= ?> 式は書けるけど構造化データはセットで きない(古式ゆかしい感じ) Google Apps ScriptはCSSなどのAssetは 置けないので全部CDNで
ex) https://cdnjs.com
$('select').select2({data: [ <? getOptions().map(function(e, i) { ?> {id: '<?= e
?>', text: '<?= e ?>'}, <? }); ?> ] }); ややつらい…
Custom Dialog / Sidebar Modeless UI 値を返さない 要ユーザーからの⼊⼒の扱いの設計
Remote Script & XHR google.script.run $(selector).on('click', function() { google.script.run.myFunc(value); });
XHRでremoteのfunction nameとvalueが送られる [ "myFunc", "[\"\u3044\u308d\u306f\"]", null, [0], null, true ]
remoteではSpreadsheetのアクティブなセルに⼊⼒するなど
もう⼀度Demo
まとめ GoogleApps は HTML で UI を追加できる Custom UI は
Modeless なので⼊⼒をど う扱うのか考える必要アリ google.script.run だけで remote の script を呼び出してデータを渡せる
まとめ GoogleApps は Web のノウハウが活きる しかも楽に
ハックしがいある
Enjoy Happy Hacking !