![#denatechcon
無ければ作ればいいじゃない
• 自作モジュールバンドラー in Gruntfile.coffee
• grunt-contrib-concat (ファイル結合プラグイン) を悪用
concat:
basic:
options:
process: (src,filePath) ->
ifmatched = filePath.match(/^dist/(.+).js$/)
libName =matched[1]
"// #{libName}n_libs.#{libName} =
function(exports, require,module) {n#{src}n};"
else
''
src: ['dist/fi_lib_*.js']
dest: 'dist/fi_lib.js'
extra:
options:
banner: "var require=(function(){n var_libs={};n ...](https://image.slidesharecdn.com/techcon2019junhasegawafinal-190218065353/75/denacorptech-dena-techcon-2019-30-2048.jpg?cb=1667856595)
![#denatechcon
がちゃっ
varrequire= (function(){
var_libs={};
var_loaded={};
varrequire=function(name,force){
...
if(namein _libs){
...
return_loaded[name].exports;
}
};
//fi_lib_core
_libs.fi_lib_core=function(exports,require,module){
(function(){
module.exports=this.dena= {
...
};
}).call(this);
};
//fi_lib_environment
_libs.fi_lib_environment= function(exports,require,module){
(function(){
...
JS
JS
JS
JS
・
・
・](https://image.slidesharecdn.com/techcon2019junhasegawafinal-190218065353/75/denacorptech-dena-techcon-2019-31-2048.jpg?cb=1667856595)
![#denatechcon
kintone JavaScriptカスタマイズの具体例
const dom=require('dom'); // DOM操作用に処理を切り出し
const isJoining =record =>/^1. /.test(record.applicationTypes.value);
const isOtherSnackSelected =record=> /^9. /.test(record.snacks.value);
// 項目の値変更時の画面制御
kintone.events.on([
'app.record.create.change.applicationTypes', 'app.record.create.change.snacks',
'app.record.edit.change.applicationTypes', 'app.record.edit.change.snacks',
],event => {
const record =event.record;
if(isJoining(record) && isOtherSnackSelected(record)) {
record.otherSnackName.disabled =false;
dom.setRequiredSymbolById('otherSnackName', true);
} else {
record.otherSnackName.value =''; // 非活性にするときは値も空にする
record.otherSnackName.disabled =true;
dom.setRequiredSymbolById('otherSnackName', false);
}
return event;
});](https://image.slidesharecdn.com/techcon2019junhasegawafinal-190218065353/75/denacorptech-dena-techcon-2019-43-2048.jpg?cb=1667856595)
![#denatechcon
kintone JavaScriptカスタマイズの具体例 (続き)
// 保存時の必須項目未入力エラー表示
kintone.events.on([
'app.record.create.submit',
'app.record.edit.submit',
],event => {
const record =event.record;
if(!isJoining(record) || !isOtherSnackSelected(record)) return event;
if(record.otherSnackName) return event;
event.error ='入力項目を確認してください。'; // 画面トップ
event.otherSnackName.error ='必須です。'; // 該当フィールドの真下
return event;
});](https://image.slidesharecdn.com/techcon2019junhasegawafinal-190218065353/75/denacorptech-dena-techcon-2019-44-2048.jpg?cb=1667856595)
DeNAにおけるCorpTechエンジニアリング [DeNA TechCon 2019]
•1 like•1,776 views
Download to read offline
Report
数多くの新規事業を展開するDeNAでは、コーポレートシステムもまた業務の多様性と変化への対応力を常に求められます。 SaaS/PaaSの積極的利用による効率化と、内製開発による社内ニーズへの即応性を両立してみると、思わぬところでエンジニアとしての技量を問われるような場面に遭遇します。定型的なワークフローやロジックを大量に実装することが求められる中、低レイヤーなデータアクセスやイベントハンドリングの手段しか用意されていない状況は決して珍しくありません。 本セッションではコーポレートシステム開発チームが直面してきた課題とそれに対する試行錯誤を紹介してみたいと思います。
Recommended
More Related Content
What's hot
What's hot(20)
Similar to DeNAにおけるCorpTechエンジニアリング [DeNA TechCon 2019]
Similar to DeNAにおけるCorpTechエンジニアリング [DeNA TechCon 2019](20)
More from DeNA
More from DeNA(20)
Recently uploaded
Recently uploaded(10)
DeNAにおけるCorpTechエンジニアリング [DeNA TechCon 2019]
- 3. #denatechcon 趣味 • 年賀状を描くこと • ドラムを叩くこと • 書物を読むこと • 漫画 • 小説 • 技術書 • 映像を観ること • ボヘミアン・ラプソディ • STEINS;GATE
- 4. #denatechcon 東京大学 大学院時代 • 神経生理学の基礎研究に従事 • 遺伝子操作マウスの網膜神経細胞の電気信号測定 • 伝達物質拡散と受容体反応のモンテカルロシミュレーション
- 6. #denatechcon アジェンダ • 体制とミッション • DeNA CorpTechの大原則 • SaaS + アドオン開発 • 実例1. NetSuite • 実例2. kintone • まとめ
- 8. #denatechcon 体制 • 経営企画本部 企画統括部 • 経理部 • 経営管理部 • コーポレートコミュニケーション部 • 秘書室 • IT戦略部 • ユーザーサポートグループ • 業務改革推進グループ • 技術推進グループ • システム開発グループ 正社員6名 派遣社員4名 業務委託0名
- 10. #denatechcon 多種多様なシステムたち • 会計システム • 財務諸表など法的に要求される書類の数字に直結 • 債務処理 (≒取引先に対するお支払い) は会社の信用問題 • アカウント管理 • 人事情報と連動したアカウント生成と権限付与剥奪 • 資産管理 • PC/ソフトウェアの従業員への割当 • 各種ワークフロー • 申請と承認の証跡 • 他多数 (GUI/API のあるものだけで80以上)
- 12. #denatechcon 導入コストで考えるならとにかくSaaS ⭕ システム導入/拡大時のリードタイム抑制 ⭕ 従量課金という損をしないモデル ⭕ グループ会社通じてガバナンスも効かせやすい ❌ 業務の多様性 (個別要件) には対応しにくい
- 16. #denatechcon SaaS + アドオン開発の絶対重要ポイント 1. バージョン管理とデプロイを連動させよう • GUIからデプロイできる手軽な仕組みに甘んじない • masterブランチを経てのみ本番デプロイされる状態を確立
- 17. #denatechcon SaaS + アドオン開発の絶対重要ポイント 2. フレームワークを作ろう+結合テストをしよう • 各機能をSaaSの標準仕様に直接依存させない • 各機能がやりたいことにだけ集中できる環境を提供する Framework FuncFunc Func Func Func SaaS
- 19. #denatechcon NetSuiteとは • Enterprise Resource Planning • 企業の各種資源の一元管理 • 全グループ会社の会計・人事情報の統合DBのようなイメージ • クラウドERPの火付け役 • サブスクリプション方式により当時他社製品の中で抜群に安価 • オンプレミスでありがちな会社毎のインスタンス乱立が起こりづらい • DeNAでも2012年頃から導入検討
- 20. #denatechcon サーバサイドカスタマイズ (JavaScript) • DB/画面要素へアクセスする専用関数群 • DBレコード操作に対するトリガー的処理追加 • 画面表示時 • 永続化前後 • 独自REST APIエンドポイント作成 • 独自画面作成
- 21. #denatechcon DBレコードが変更されるたびにメールを送る例 sendNotification(type) { if (type == 'create') return; varloginUserEmail = nlapiGetContext().getEmail(); varrecordType = nlapiGetRecordType(); varrecordId = nlapiGetRecordId(); varsubject = 'YOURCHANGEHASBEEN SUBMITTED!!'; varbody = 'Record Type: ' + recordType+ 'n’+ 'ID: '+ recordId; nlapiSendEmail( loginUserEmail, // author loginUserEmail, // recipient subject, body ); }
- 24. #denatechcon NetSuite上の標準的なデプロイ手順 • 機能ごとにいろいろ設定 • 1つのメインスクリプトファイル • 実行する関数名 (エントリポイント) • 複数のライブラリファイル
- 25. #denatechcon じゃあ早速開発するぞと思いきや • ちょっと待って • 「ライブラリ」ってどうやって参照するの？ • CommonJS？ • Asynchronous Module Definition？
- 26. #denatechcon // lib-a.js var doA = function() { ... }; // lib-a.js initB(); var doA = function() { ... }; まさかのブラウザ方式 (よりもタチが悪い方式) • 参照はすべてグローバルスコープ経由 • モジュールの概念がない • 設定したライブラリファイルの読込順が謎 • どうもファイルの内部的なID順らしい • IDは最初にアップロードしたタイミングで割り当てられる // lib-b.js var initB = function() { ... }; // main.js function main { doA(); } 内部ID: 101 内部ID: 102// main.js function main { initB(); doA(); }
- 27. #denatechcon webpackを使えばいいじゃない CommonJS方式で書いて モジュールバンドル (≒ファイル結合) して 1つだけの.jsファイルとしてアップロードしよう • グローバルスコープ汚染からの解放 • 謎な読込順も気にならなくなる
- 30. #denatechcon 無ければ作ればいいじゃない • 自作モジュールバンドラー in Gruntfile.coffee • grunt-contrib-concat (ファイル結合プラグイン) を悪用 concat: basic: options: process: (src,filePath) -> ifmatched = filePath.match(/^dist/(.+).js$/) libName =matched[1] "// #{libName}n_libs.#{libName} = function(exports, require,module) {n#{src}n};" else '' src: ['dist/fi_lib_*.js'] dest: 'dist/fi_lib.js' extra: options: banner: "var require=(function(){n var_libs={};n ...
- 31. #denatechcon がちゃっ varrequire= (function(){ var_libs={}; var_loaded={}; varrequire=function(name,force){ ... if(namein _libs){ ... return_loaded[name].exports; } }; //fi_lib_core _libs.fi_lib_core=function(exports,require,module){ (function(){ module.exports=this.dena= { ... }; }).call(this); }; //fi_lib_environment _libs.fi_lib_environment= function(exports,require,module){ (function(){ ... JS JS JS JS ・ ・ ・
- 33. #denatechcon 容易に想像のつく光景 • 開発してNetSuiteにアップロード • 各種動作確認を終えて一安心 • commit/pushを忘れる
- 34. #denatechcon 後日エンドユーザーから質問が！ • 普通git上のファイルを調べます • でも幾ら見てみてもユーザーの言う挙動と違う • そんな思いはしたくないですよね
- 35. #denatechcon アップロードも自動化すればいいじゃない • GitHub:e + Jenkins + アップローダー (自作) • .jsファイルを受け取るAPIエンドポイント (自作)
- 36. #denatechcon やったね！ • 手動アップロード作業からの解放 • ファイルの二重管理からの解放 • ついでに監査にも強くなった
- 38. #denatechcon kintoneとは • システム構築システム • UI/DBをD&Dで定義 • ステータスと作業者 (assignee) を定義すればワークフローに • 標準的なREST APIも提供 • CRUD • UI/DB定義そのものもjson管理可能 • DeNAでは2013年に導入
- 40. #denatechcon さらに画面にJavaScriptを埋め込める • scriptタグで呼び出される一般的な状態 • 画面要素などへアクセスする専用関数群 • イベントハンドラ方式 • 画面表示時 • 値入力時 • レコード保存前後 • ステータス遷移時 • 無茶なDOM操作だってその気になれば
- 41. #denatechcon じゃあ早速開発するぞと思いきや • ちょっと待って • 作るものがどれも似てる＆とても多いのだけど？ • システムアカウント申請 • メールアドレス発行・ドメイン追加申請 • BYOD設定申請 • PC/モニタ追加交換申請 • 副業・クロスジョブ申請 • …
- 43. #denatechcon kintone JavaScriptカスタマイズの具体例 const dom=require('dom'); // DOM操作用に処理を切り出し const isJoining =record =>/^1. /.test(record.applicationTypes.value); const isOtherSnackSelected =record=> /^9. /.test(record.snacks.value); // 項目の値変更時の画面制御 kintone.events.on([ 'app.record.create.change.applicationTypes', 'app.record.create.change.snacks', 'app.record.edit.change.applicationTypes', 'app.record.edit.change.snacks', ],event => { const record =event.record; if(isJoining(record) && isOtherSnackSelected(record)) { record.otherSnackName.disabled =false; dom.setRequiredSymbolById('otherSnackName', true); } else { record.otherSnackName.value =''; // 非活性にするときは値も空にする record.otherSnackName.disabled =true; dom.setRequiredSymbolById('otherSnackName', false); } return event; });
- 44. #denatechcon kintone JavaScriptカスタマイズの具体例 (続き) // 保存時の必須項目未入力エラー表示 kintone.events.on([ 'app.record.create.submit', 'app.record.edit.submit', ],event => { const record =event.record; if(!isJoining(record) || !isOtherSnackSelected(record)) return event; if(record.otherSnackName) return event; event.error ='入力項目を確認してください。'; // 画面トップ event.otherSnackName.error ='必須です。'; // 該当フィールドの真下 return event; });
- 45. #denatechcon こんなの大量生産したくない • 長い • 状態判定→画面更新処理ってjQuery時代の気分 • もっと宣言的に書ける仕組みがほしい！ 無さそう
- 46. #denatechcon 無ければ作ればいいじゃない • 自作kintoneフレームワーク define=require('define’) {where,except} =define.condition joining = where('applicationTypes',/^1./) otherSnackSelected=where('snacks',/^9./) define.fields( -> otherSnackName: require:joining.and(otherSnackSelected) disableAndClear:except(joining.and(otherSnackSelected)) ) 状態判定を表す 抽象オブジェクト 論理演算はイベントが 発生する度に解決される 定型的な処理を ひととおり提供
- 47. #denatechcon これなら大量生産してもいいかな • ちょっと待って • 大量生産してもいいけど機能個別に自動テストは 書かなくていいの？ Framework FuncFunc Func Func Func SaaS
- 48. #denatechcon Framework FuncFunc Func Func Func SaaS いいよ • e2eテストしておくから • 検証のためだけの機能を用意 • フレームワーク自体の挙動を徹底検証 • あくまで個別機能開発はスピーディに！ Framework Test Func Func Func Func Func SaaSSaaS
- 49. #denatechcon やったね！ • やりたいことだけ書ける枠組みの提供 • 個別自動テスト無用のスピード開発 • 1ランク上のリードタイム抑制
- 50. #denatechcon まとめ
- 51. #denatechcon SaaS + アドオン開発の絶対重要ポイント (再掲) 1. バージョン管理とデプロイを連動させよう • GUIからデプロイできる手軽な仕組みに甘んじない • masterブランチを経てのみ本番デプロイされる状態を確立
- 52. #denatechcon SaaS + アドオン開発の絶対重要ポイント (再掲) 2. フレームワークを作ろう+結合テストをしよう • 各機能をSaaSの標準仕様に直接依存させない • 各機能がやりたいことにだけ集中できる環境を提供する Framework FuncFunc Func Func Func SaaS