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
640
let-me-edit-with-editor
wtnabe
0
230
google-photos-and-storage-and-rclone
wtnabe
0
300
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
360
Other Decks in Programming
See All in Programming
Deep Dive into React Stream/Serialize
mugi_uno
3
730
Domain-Driven Transformation
hschwentner
2
1.5k
2 週間で Twitter Bot を作ってみた
contour_gara
0
790
Git Lint
bkuhlmann
4
760
WebGLで始める コンピュータグラフィックス入門
heller77
0
330
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
140
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
460
Next.js App Router
quramy
12
2k
使ってみよう Azure AI Document Intelligence
kosmosebi
2
370
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.4k
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
33
12k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Code Reviewing Like a Champion
maltzj
515
39k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
What the flash - Photography Introduction
edds
64
11k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Producing Creativity
orderedlist
PRO
338
39k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Agile that works and the tools we love
rasmusluckow
325
20k
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 !