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
250
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
37
join-kanazawarb-or-7years-passed-since-it-was-borned
wtnabe
0
650
let-me-edit-with-editor
wtnabe
0
240
google-photos-and-storage-and-rclone
wtnabe
0
310
one case of how to begin vuejs
wtnabe
2
360
Kanazawa.rb meetup #56 Coderetreat Intro
wtnabe
0
340
lightweight authenticity of microservices
wtnabe
0
360
Automate WordPress deployment with WordMove
wtnabe
1
400
CircleCI Hands-on for Beginners
wtnabe
0
370
Other Decks in Programming
See All in Programming
TypeScriptで使いやすいOpenAPIの書き方
yukimochi_dwango
1
730
[RubyKaigi 2024] Ruby Mixology 101: adding shots of PHP, Elixir, and more
palkan
0
120
freeeのエンジニアが 就活で出そうな コーディングテストを 解説してみる
freee
1
160
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
rkaga
5
1.3k
Fragment Composition of GraphQL
quramy
14
1.7k
酒飲んでたらテックリードになった話
spbaya0141
0
210
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
220
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
610
チーム立ち上げにAWSを活用したらClaudeさんに褒められた話
mkdev10
3
230
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
110
戦略的DDDは重いのか? / Is strategic DDD heavy?
pictiny
3
2.1k
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
560
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
325
20k
Navigating Team Friction
lara
179
13k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
The Invisible Side of Design
smashingmag
294
49k
Debugging Ruby Performance
tmm1
70
11k
The Mythical Team-Month
searls
217
42k
Documentation Writing (for coders)
carmenintech
60
4k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
GraphQLとの向き合い方2022年版
quramy
33
13k
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 !