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
All-In-OneなExcel化JS #TechLunch
Search
Livesense Inc.
PRO
April 21, 2014
Technology
0
48
All-In-OneなExcel化JS #TechLunch
All-In-OneなExcel化JS
2013/11/13 (水) @ Livesense TechLunch
発表者:徳江 勇樹
Livesense Inc.
PRO
April 21, 2014
Tweet
Share
More Decks by Livesense Inc.
See All by Livesense Inc.
27新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
0
2.4k
株式会社リブセンス・転職会議 採用候補者様向け資料
livesense
PRO
0
51
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
0
1.5k
データ基盤の負債解消のためのリプレイス
livesense
PRO
0
440
26新卒_総合職採用_会社説明資料
livesense
PRO
0
11k
株式会社リブセンス会社紹介資料 / Invent the next common.
livesense
PRO
1
37k
26新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
1
13k
中途セールス職_会社説明資料
livesense
PRO
0
260
EM候補者向け転職会議説明資料
livesense
PRO
0
130
Other Decks in Technology
See All in Technology
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
440
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
AI駆動開発に向けた新しいエンジニアマインドセット
kazue
0
330
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
370
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
130
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1k
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
11
4.5k
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
210
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
480
シークレット管理だけじゃない!HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
nnstt1
3
230
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
180
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
190
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.6k
Thoughts on Productivity
jonyablonski
70
4.8k
How GitHub (no longer) Works
holman
315
140k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
How to Ace a Technical Interview
jacobian
279
23k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Designing for Performance
lara
610
69k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
All-In-OneなJSたち 名称 TableSorter WATable 依存ライブラリ JQuery 1.2.1+ jQuery 1.7+ Twitter
Bootstrap 2+ DatePicker for Bootstrap URL http://tablesorter.com/docs/ http://wootapa-watable.appspot.com/ source https://github.com/wootapa/watable 更新 2.0.5 hot ユーザー層も多い 1.0.7 個人的な開発 License MIT or GPL MIT 画像 コメント リンクのbackendで多用中 ++ 導入:容易 ++ ソート・フィルタについては、細かいところまで設定が可能 - 細かなサブライブラリがいて、細かいバージョン依存性がある ++ 導入:容易 All-In-One + 凝ったcaruselや列コメント(tooltip) 完成度は高そう 機能 選択 フォーカス移動 単一セル 複数セルの離散選択 行選択 ◦ 列選択 矩形範囲選択 表示の抽出 プレビュー 文字列の逐次検索 ◦ ブラウザ機能をそのまま ◦ ブラウザ機能をそのまま 文字列の全検索 書式の全検索 列別のソート ◎ 複数列ソート ◦ 列別のフィルタ ◎ 複数列フィルタ 正規表現 AND/OR検索... (追加プラグイン) ◦ 表示範囲の調整 スクロール・横スクロール ◦ 行・列番号ヘッダー 拡大・縮小 ◦ ◦ 行・列の固定 行・列の非表示/再表示 ◎ 1行表示 と 折り返し表示 行・列のサイズの手動調整 ◦ 列 (追加プラグイン) V2.1以降はcookieで前回の幅を保持 行・列のサイズの自動調整 行・列の順序変更 アクション リボン(ボタンエリア) メニューバー(2007以前) ショートカットキー コンテキストメニュー(右クリック) ツールバー(2007以前) 集計 選択範囲の統計(フッター) 列集計・行集計(関数) ピボットテーブル 出力 クリップボードへのコピー ◦ ◦ CSV グラフ 印刷プレビュー HTML出力(「Webページとして保存」) 編集 セルへの直接編集 プレビューへの入力 書式編集 セル単位の書式設定 条件付書式 ◦ ◦ 他のセルの参照 リンク ◦ ◦ 画像 ◦ 編集補助 Undo Redo 一括置換 複数セルへの一括編集 クリップボード 条件を選択して貼り付け 入力補完 上・左の項目を簡易コピー 現在の日付・時刻を入力 保存 2フェーズコミット 保存失敗時の状態復旧 保護 ブックへのパスワード シートの保護 セルの保護 排他 悲観的ロック 共有 改定履歴 楽観的排他 他者の変更点を表示 競合検知 WEB化に際しての追加要件 ページング ◦ ◦ データの遅延取得 ◦ ◦ 保存先(社内DB、ローカルファイル、WEB共有) CSS変更 ◦ ページ 1
All-In-OneなJSたち 名称 依存ライブラリ URL source 更新 License 画像 コメント 機能
選択 フォーカス移動 単一セル 複数セルの離散選択 行選択 列選択 矩形範囲選択 表示の抽出 プレビュー 文字列の逐次検索 文字列の全検索 書式の全検索 列別のソート 列別のフィルタ 表示範囲の調整 スクロール・横スクロール 行・列番号ヘッダー 拡大・縮小 行・列の固定 行・列の非表示/再表示 1行表示 と 折り返し表示 行・列のサイズの手動調整 行・列のサイズの自動調整 行・列の順序変更 アクション リボン(ボタンエリア) メニューバー(2007以前) ショートカットキー コンテキストメニュー(右クリック) ツールバー(2007以前) 集計 選択範囲の統計(フッター) 列集計・行集計(関数) ピボットテーブル 出力 クリップボードへのコピー CSV グラフ 印刷プレビュー HTML出力(「Webページとして保存」) 編集 セルへの直接編集 プレビューへの入力 書式編集 セル単位の書式設定 条件付書式 他のセルの参照 リンク 画像 編集補助 Undo Redo 一括置換 複数セルへの一括編集 クリップボード 条件を選択して貼り付け 入力補完 上・左の項目を簡易コピー 現在の日付・時刻を入力 保存 2フェーズコミット 保存失敗時の状態復旧 保護 ブックへのパスワード シートの保護 セルの保護 排他 悲観的ロック 共有 改定履歴 楽観的排他 他者の変更点を表示 競合検知 WEB化に際しての追加要件 ページング データの遅延取得 保存先(社内DB、ローカルファイル、WEB CSS変更 fixedheadertable TinyTable V3 jQuery http://www.fixedheadertable.com/ http://www.scriptiny.com/2009/11/advanced-javascript-table-sorter/ https://github.com/markmalek/Fixed-Header-Table 1.3 11/16/2009 古い Free (creative commons) - 固定のヘッダーとフッターをつけるだけ ++ 導入:容易 All-In-One ◦ ブラウザ機能をそのまま ◦ ブラウザ機能をそのまま ◦ ◦ 上段のコンボボックスで列を指定 △ 列ヘッダーのみ △ 列ヘッダーのみ ◦ ◦ ◦ ◦ ◦ ◦ ◦ ◦ ページ 2
All-In-OneなJSたち 名称 依存ライブラリ URL source 更新 License 画像 コメント 機能
選択 フォーカス移動 単一セル 複数セルの離散選択 行選択 列選択 矩形範囲選択 表示の抽出 プレビュー 文字列の逐次検索 文字列の全検索 書式の全検索 列別のソート 列別のフィルタ 表示範囲の調整 スクロール・横スクロール 行・列番号ヘッダー 拡大・縮小 行・列の固定 行・列の非表示/再表示 1行表示 と 折り返し表示 行・列のサイズの手動調整 行・列のサイズの自動調整 行・列の順序変更 アクション リボン(ボタンエリア) メニューバー(2007以前) ショートカットキー コンテキストメニュー(右クリック) ツールバー(2007以前) 集計 選択範囲の統計(フッター) 列集計・行集計(関数) ピボットテーブル 出力 クリップボードへのコピー CSV グラフ 印刷プレビュー HTML出力(「Webページとして保存」) 編集 セルへの直接編集 プレビューへの入力 書式編集 セル単位の書式設定 条件付書式 他のセルの参照 リンク 画像 編集補助 Undo Redo 一括置換 複数セルへの一括編集 クリップボード 条件を選択して貼り付け 入力補完 上・左の項目を簡易コピー 現在の日付・時刻を入力 保存 2フェーズコミット 保存失敗時の状態復旧 保護 ブックへのパスワード シートの保護 セルの保護 排他 悲観的ロック 共有 改定履歴 楽観的排他 他者の変更点を表示 競合検知 WEB化に際しての追加要件 ページング データの遅延取得 保存先(社内DB、ローカルファイル、WEB CSS変更 ParamQuery jquery Grid Flexgrid JQuery >= 1.7 JqueryUI >= 1.9.1 jQuery FlexiGrid Plugin Pack(32K) http://paramquery.com/demos http://flexigrid.info/ https://github.com/paramquery/grid https://github.com/paulopmx/Flexigrid 1.1.3 () 1.1 GPL v3 MIT or GPLv2 + 細かい制御がいろいろ - js内で,dataModel, columnModelの指定などが多い → docを参考にグリグリとhackする感じ ++ 導入:容易 Al-In-One ◦ ◦ ◦ 複数 ◦ ◦ ブラウザ機能をそのまま ◦ ブラウザ機能をそのまま ◦ ◦ ◦ 上段のコンボボックスで列を指定 △ フィルタを実行するにあたり個別の実装が必要 ◦ ◦ ◦ ◦ 列固定:n列目まで ◎ ◦ ◎ ◦ △ ◦ ◦ ◦ ◦ ◦ ◦ ◦ ◦ ◦ ◦ ページ 3
All-In-OneなJSたち 名称 依存ライブラリ URL source 更新 License 画像 コメント 機能
選択 フォーカス移動 単一セル 複数セルの離散選択 行選択 列選択 矩形範囲選択 表示の抽出 プレビュー 文字列の逐次検索 文字列の全検索 書式の全検索 列別のソート 列別のフィルタ 表示範囲の調整 スクロール・横スクロール 行・列番号ヘッダー 拡大・縮小 行・列の固定 行・列の非表示/再表示 1行表示 と 折り返し表示 行・列のサイズの手動調整 行・列のサイズの自動調整 行・列の順序変更 アクション リボン(ボタンエリア) メニューバー(2007以前) ショートカットキー コンテキストメニュー(右クリック) ツールバー(2007以前) 集計 選択範囲の統計(フッター) 列集計・行集計(関数) ピボットテーブル 出力 クリップボードへのコピー CSV グラフ 印刷プレビュー HTML出力(「Webページとして保存」) 編集 セルへの直接編集 プレビューへの入力 書式編集 セル単位の書式設定 条件付書式 他のセルの参照 リンク 画像 編集補助 Undo Redo 一括置換 複数セルへの一括編集 クリップボード 条件を選択して貼り付け 入力補完 上・左の項目を簡易コピー 現在の日付・時刻を入力 保存 2フェーズコミット 保存失敗時の状態復旧 保護 ブックへのパスワード シートの保護 セルの保護 排他 悲観的ロック 共有 改定履歴 楽観的排他 他者の変更点を表示 競合検知 WEB化に際しての追加要件 ページング データの遅延取得 保存先(社内DB、ローカルファイル、WEB CSS変更 jQuery EasyUI DataGrid DataTables jqGrid SlickGrid jQuery HTML5 jQuery jQueryUI Sortable (optional, only if column reordering is enabled) http://www.jeasyui.com/ http://www.datatables.net http://www.trirand.co m/blog/ https://github.com/mleibm an/SlickGrid https://github.com/DataTables https://github.com/tony tomov/jqGrid https://github.com/mleibm an/SlickGrid V1.3.4 V1.9.4 V4.5.4 hot GPL License Commercial License jQueryUIのような、UI全般のライブラリで、DataGridはその 一部。 拡張可能箇所が多様で、融通が利く サブライブラリに分かれてい る 上位バージョン(セル内編集 可能)は有償 未調査 m(_ _)m 未調査 m(_ _)m ◦ 複数 ◦ ブラウザ機能をそのまま ◎ 複数列ソート ◦ ◦ 列固定:n列目まで ◦ ◦ 列ノミ ◦ ◦ ◦ ◦ ◦ ◦ ◦ ◦ ◦ ページ 4