Excelもどき開発 #TechLunch

Transcript

1. γεςϜ։ൃ෦ɹϝσΟΞ։ൃάϧʔϓ Copyright © LIVESENSE Inc. ಙߐɹ༐थ Tech Lunch 2013/11/13

2. ̓೥લͷͱ͋Δ೔ͷͱ͋Δ৽ถSE （￣＾￣） ﾄﾞﾔｯ! こんな感じで一覧表示つくっときました。 (・∀・)ｲｲﾖｲｲﾖｰ お、いいですね。 かなりイメージ通りっす。 んじゃ、早速（打鍵）…

3. ̓೥લͷͱ͋Δ೔ͷͱ͋ΔSE (ﾟДﾟ≡ﾟдﾟ)ｴｯ!? ヽ(ヽ･∀･)ｱﾋｬ? これって、 途中で表示順変えたりできません？ 列、多すぎるな…。でも必要だし…。 右側の３列固定したいっすね。 ページ内に極力多く行を出したい。 スクロールなしで。 折りたたみ表示なんてどう？

4. ̓೥લͷͱ͋Δ೔ͷͱ͋ΔSE ｶﾞ━━(ﾟДﾟ;)━━━ﾝ!!!!! ｱﾋｬﾋｬﾋｬﾋｬ ﾍ(ﾟ∀ﾟﾍ)(ﾉﾟ∀ﾟ)ﾉ ﾋｬﾋｬﾋｬﾋｬ このページ内で直接編集とか 範囲選択でCtrl+C 列の表示・非表示を切り替え 部分に集中して見たいな。 行のフィルタとか？

   選択範囲の 行数・合計値！ 他者の編集の変更点表示！ 列幅変更と列移動で、 次回起動時も記憶しといてよ

5. Ͱɺ٤Ԏॴʹಀ๢ ɹ(;´Д`)y─ᵒ~~ 仕様追加きついでっせ、お客様。 (・∀・`)ﾉ ｨｮｩ ですよねぇ～w おいくら万円でやってくれます？ そうねぇ。 願いましては… 100万本

   * 1万円/本 * 1%保守費率… １億くらいっすかね　ハハハｗｗ しかも、まんまExcelやないっすかw ･:，(ﾟдﾟ◦≒(｀д´＃)

6. ͜͜Ͱͷڭ܇͸ • ࢓༷มߋ͸։ൃऀΛࡴ͢ • අ༻ݟੵΓ͸৻ॏʹ Ͱ͸ͳͯ͘ • Ұཡදࣔɹ͸ɹExcelɹ͕جຊɹʢۀքৗࣝɹˍɹUXҋ࢓༷ʣ

7. ͦͷޙ΋… • ͻͨ͢ΒExcel΋Ͳ͖Λ։ൃ Java Applet/Swing/SWT Ͱ… ExtJS+PHPͰ ࡞ΓࠐΜʢཚ଄?ʣͩ෦඼ͨͪ • ExcelLikeCellEditor • ScrollableJTable • WrappingExtractionTableModel

   • SplitTableModel • CellAreaChoiceClipboardController • CustomizableMenuItems

8. ͞Βʹɺઌ݄΋ • …universeͰbootstrap෩ͷςʔϒϧʹɺ͍Ζ͍Ζ੝ΓࠐΈɻ https://job.j-sen.jp/universe/referral/search/city_p13.htm 車輪の再発明

9. ということで、本日は

10. γεςϜ։ൃ෦ɹϝσΟΞ։ൃάϧʔϓ Copyright © LIVESENSE Inc. ಙߐɹ༐थ ༐ऀʹͳΕͳ͔ͬͨԶ͸ ͠Ϳ͠ͿΤΫηϧ΋Ͳ͖ͷ։ൃΛ ܾҙ͠·ͨ͠ɻ

11. Agenda 1.  ઀٬8େ༻ޠ 2.  ϚδοΫΞΠςϜγϣοϓɹϨΦϯԦ౎ళͷ͝঺ հ http://yu-sibu.com/

12. Agenda 1.  ઀٬8େ༻ޠ 2.  ϚδοΫΞΠςϜγϣοϓɹϨΦϯԦ౎ళͷ͝঺ հ http://yu-sibu.com/ まずは、基本。 敵を知りましょう。 で、どんな機能を用意する必要があるのか、

    全体像を把握しましょう

13. ͦ΋ͦ΋Excelͱ͸ http://ja.wikipedia.org/wiki/Microsoft_Excel

14. ҰઆʹΑΔͱ… [歴史] 開発コードネームはオデッセイ。開発責任者はジェイブ・ブルメンソールとダグ・クランダー。 … 初期の段階ではIBM PCおよびその互換機を想定したMS-DOS用アプリケーションであり、テキストモードで動作 する予定だった。… 後に1984年にLotusがMacintosh向け統合ソフト Jazz を開発していることが分かると、プラットフォームを

    Macintoshに移して改めて開発が進められ、1985年9月にMacintosh版が発売された。この時点で将来の Windows対応を考慮に入れていた。同製品は、GUI環境に特化した優れた操作性と高い性能を有しベストセラー となった。… 1987年10月、Microsoft Windows版を発売した。その後、他のオフィス向けアプリケーションにもExcelに似たイン タフェースを用いるようになり、 Windowsのインタフェースは、Excelを基準に作られた とも言われている。 … http://ja.wikipedia.org/wiki/Microsoft_Excel

15. ͰɺͲΜͳػೳ͕͋Δͷʁ ちょっと整理してみた

16. Agenda 1.  ઀٬8େ༻ޠ 2.  ϚδοΫΞΠςϜγϣοϓɹϨΦϯԦ౎ళͷ͝঺ հ http://yu-sibu.com/ 最近、便利になってきましたよね…。 ALL-OKな完成品、はないですが、 流用できそうなパーツをご紹介。

    むしろ、いいもの知ってたら ぜひぜひ紹介してください　m(_ _)m

17. ExcelϥΠΫʹ͢ΔͨΊͷɺ֤छϥΠϒϥϦɾ࣮૷ 使えそうな人たちを ピックアップしたり遊んでみたり

18. All-In-OneΛ໨ࢦ͍ͯ͠ΔJS こちら

19. ࢀߟจݙɹ΄͔ ֤छɹςʔϒϧܥJSɹ·ͱΊ ΄͔ •  http://matome.naver.jp/odai/2132851038557722801 •  http://cotdeve.com/blog/jquery/jquery-%E3%83%86%E3%83%BC %E3%83%96%E3%83%AB-%E3%81%84%E3%81%8F %E3%81%A4%E3%81%8B/ • 

    http://coliss.com/articles/build-websites/operation/javascript/792.html

20. ࢖͑ͦ͏ͳύʔπˍ࣮૷ͨͪ jQuery.contextMenu.js ӈΫϦοΫϝχϡʔɺͰ͢Ͷɻ ͍Ζ͍Ζ͋Δͳ͔ͰɺίϨ͕1൪nativeͬΆ͘ݟ͑Δ ػೳੑ΋੔͍ͬͯͯɺ࣮૷΋ָ •  දࣔՕॴͷηϨΫλ੍ޚ •  ΞΠίϯɾχʔϞχοΫɾηύϨʔλ • 

    ԡԼՄ൱ͷ੍ޚ h"ps://github.com/medialize/jQuery-­‐contextMenu/

21. ࢖͑ͦ͏ͳύʔπˍ࣮૷ͨͪ Excel Interactive View MSެࣜͷJS 2ߦ௥ՃͰɺϐϘοτςʔϒϧʴάϥϑΛΦʔόʔϨ Πදࣔ ※ MSʹςʔϒϧ৘ใΛૹ͍ͬͯΔͷͰɺػີ৘ใͰ͸࢖͑·ͤΜ • 

    ϐϘοτςʔϒϧ •  άϥϑ •  CSVμ΢ϯϩʔυ h"p://msdn.microso=.com/ja-­‐jp/library/jj163261.aspx   demo        h"p://www.excelmashup.com/  

22. ࢖͑ͦ͏ͳύʔπˍ࣮૷ͨͪ Filamentgroup Chart ςʔϒϧͷ਺஋͔ࣜΒάϥϑ௥ Ճ h"p://msdn.microso=.com/ja-­‐jp/library/jj163261.aspx   demo  h"p://filamentgroup.com/examples/jqueryui-­‐visualize/  

23. ࢖͑ͦ͏ͳύʔπˍ࣮૷ͨͪ 1行表示 + 展開表示 2ͭͷCSSίωίωͷ૊Έ߹ΘͤɹͰɹ؆୯ʹ࣮ݱ •  վߦ͠ͳ͍ & ᷓΕͨΒӅ͢ • 

    td br Λ display=none αϯϓϧɹh"ps://job.j-­‐sen.jp/universe/referral/search/city_1.htm td { overflow: hidden; /* 溢れたら隠す */ white-space: nowrap; /* 勝手に改行しない*/ text-overflow : ellipsis; -webkit-text-overflow: ellipsis; /* Safari */ -o-text-overflow: ellipsis; /* Opera */ max-width : 100px; }

24. ࢖͑ͦ͏ͳύʔπˍ࣮૷ͨͪ jQueryUI.js draggable ϘλϯύωϧΛ࡞ͬͯɺdivͰҠಈ

25. ࢖͑ͦ͏ͳύʔπˍ࣮૷ͨͪ などなど

26. ͋ͨΓ·͑Λɺൃ໌͠Α͏ɻ

27. ϑϋϋϋʂ Αͧ͘࠷ޙ·Ͱ͝ਗ਼ௌͯ͘͠Εͨ ͓٬༷Αʂ