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
280
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
Effective Jekyll
wtnabe
0
13
5 min Jekyll/Liquid Plugin cooking
wtnabe
0
4
Ruby de Wasm
wtnabe
0
28
Cloud Native Buildpacksって結局どうなの?
wtnabe
0
22
Decoupled System with Turbo Frame
wtnabe
1
82
join-kanazawarb-or-7years-passed-since-it-was-borned
wtnabe
0
740
let-me-edit-with-editor
wtnabe
0
300
google-photos-and-storage-and-rclone
wtnabe
0
400
one case of how to begin vuejs
wtnabe
2
430
Other Decks in Programming
See All in Programming
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1.1k
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
940
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
290
技術的負債と向き合うカイゼン活動を1年続けて分かった "持続可能" なプロダクト開発
yuichiro_serita
0
300
20241217 競争力強化とビジネス価値創出への挑戦:モノタロウのシステムモダナイズ、開発組織の進化と今後の展望
monotaro
PRO
0
280
Alba: Why, How and What's So Interesting
okuramasafumi
0
210
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
130
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
930
Azure AI Foundryのご紹介
qt_luigi
1
170
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
430
php-conference-japan-2024
tasuku43
0
430
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.4k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Site-Speed That Sticks
csswizardry
2
270
Scaling GitHub
holman
459
140k
Docker and Python
trallard
43
3.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Building Your Own Lightsaber
phodgson
104
6.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Building Applications with DynamoDB
mza
93
6.2k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3.1k
How GitHub (no longer) Works
holman
312
140k
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 !