<!doctype html><html><head><title></title><metacharset='utf-8'><metacontent=''name='author'><metacontent=''name='description'><metacontent=''name='application-name'><metacontent='notranslate'name='google'><!-- GOOGLE:https://support.google.com/webmasters/answer/79812 --><metacontent='telephone=no,address=no,email=no,date=no,url=no'name='format-detection'><metacontent='noimageindex,notranslate,nosnippet,noarchive,nofollow,noindex'name='robots'><metacontent='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'name='viewport'><linkhref='css/fomantic-ui/2.7.8.min.css'rel='stylesheet'><linkhref='asset/manifest.json'rel='manifest'><linkhref='asset/favicon.ico'rel='icon'><style name='editor'>@importurl('css/code-mirror/5.49.1.min.css');@importurl('css/code-mirror/addon-5.49.1.min.css');@importurl('css/code-mirror/mode-5.49.1.min.css');@importurl('css/code-mirror/5.49.1.min.css');</style><style name='font'>@font-face{font-family:'M+2VM+IPAG circle';src:url('asset/m+2vm+ipag-circle.ttf');}</style><style>html,body{font:12px'M+2VM+IPAG circle';}/*
* 配置（中央）
*/body{display:flex;align-items:center;justify-content:center;}main{width:999px;height:100%;}.ui.grid{height:100%;}/*
* 見栄（凹凸）
*/.ui.label,.ui.table,.ui.segment{border-bottom:2pxsolidrgba(34,36,38,.15)!important;box-shadow:rgba(16,36,94,0.4)02px6px0!important;}/*
* 調整（位置）
*/.ui.table,.ui.segment{margin-top:0;}/*
* 調整（全体）
*/.ui.table>thead>tr>th,.ui.table>tbody>tr>td{padding:.2em;}/*
* 調整（個々）
*/.ui.table>thead>tr>th:nth-child(2){width:5em;}.ui.table>thead>tr>th:nth-child(3),.ui.table>tbody>tr>td:nth-child(3),.ui.table>thead>tr>th:nth-child(4),.ui.table>tbody>tr>td:nth-child(4),.ui.table>thead>tr>th:nth-child(5),.ui.table>tbody>tr>td:nth-child(5){text-align:center;width:3em;}.ui.table>thead>tr>th{text-align:center;}.ui.table>tbody>tr:hover{cursor:pointer;}/*
* 構造（エディタ）
*/#editor{display:flex;flex-direction:column;}#eidotr#editor-view{flex:1;}#editor#editor-controller{}/*
* 設定（スクロールとフォント）
*/#editor,#editor.ui.segment,#editor.ui.segment.vue-codemirror,#editor.ui.segment.vue-codemirror.CodeMirror{height:100%;}#editor.ui.segment.vue-codemirror.CodeMirror{font:12px'M+2VM+IPAG circle';}#viewer{height:100%;overflow-y:scroll;}/**FOMANTIC-UI(が既に指定してる)*CREATETABLE->(sql2json):<TABLE>群は*スクロールバーがあるとみっともないので非表示*#viewer::webkit-scrollbarは効かないので上書き*/body::-webkit-scrollbar{display:none;}.ui.label>i.icon{margin-right:0;}/*
* FOMANTIC-UI
* 2.7.8は古いFONTAWESOMEを利用中
* ので新しいフォントを入れ直して個々に定義する
* path:css/fomantic-ui/themes/default/assets/fonts
*/i.icon.file-csv:before{content:'\f6dd';}i.icon.file-image:before{content:'\f1c5';}/*
* MODEL
* CREATE-TABLEをTABLE化したモノ
* 画像化した際（クロームの拡張機能による要素指定キャプチャ）影を残す
* https://chrome.google.com/webstore/search/element%20capture?_category=extensions
*/#viewerdiv.model{padding-bottom:.7em;padding-right:.7em;padding-left:.7em;padding-top:0;}/*
* sql2json
* エラー時の色合わせ
*/.ui.label.error-message,.CodeMirror.error-line{background:#fff0f0!important;color:#ff7373!important;}</style></head><body><main><divclass='ui grid internally celled'><divclass='row'><divclass='eleven wide column'id='editor'><divclass='ui labels blue'id='editor-controller'><divclass='ui label pointing below'>全テーブル
</div><aclass='ui label'target='_blank'href='https://chrome.google.com/webstore/detail/html-elements-screenshot/mckfdaahjhmnchjihljdiakamamondld?hl=ja'><iclass='icon file-image'></i><divclass='ui detail'>PNG</div></a><aclass='ui label'target='_blank'href='https://chrome.google.com/webstore/detail/download-table-as-csv/jgeonblahchgiadgojdjilffklaihalj?hl=ja'><iclass='icon file-csv'></i><divclass='ui detail'>CSV</div></a><divclass='ui label error-message'v-if='hasErrSql2json'>
{{err.message}}
</div></div><divclass='ui segment fitted'id='editor-view'><codemirrorref='myCm'v-model='content'></codemirror></div></div><divclass='five wide column'id='viewer'><divref='models'v-for='(obj,n) in json'><modelv-model='json[n]'></model></div></div></div></div></main></body></html><templateid='model'type='text/x-template'><divv-ui><divclass='ui divider horizontal'>
{{table.name}}
</div><tableclass='ui table attached top single line unstackable celled fixed green'><thead><th>名</th><th>型</th><th>値</th><th>虚</th><th>加</th></thead><tbody><templateref='models'v-for='(obj,i) in table.columns'><!-- ここ修正 --><trv-if='hasName(obj)':class="[{'positive':highlight[obj.name]}]"@dblclick='highlightRow(obj)'><td><span>{{getName(obj)}}</span></td><td><span>{{getDataType(obj)}}</span></td><td><span>{{getDataTypeParam(obj)}}</span></td><td><span><templatev-if='getNullType(obj)'><iclass='icon check'></i></template></span></td><td><span><templatev-if='getAutoIncrementType(obj)'><iclass='icon check'></i></template></span></td></tr></template></tbody></table></div></template><!-- native:code-mirror --><script src='js/native/code-mirror/5.49.1.min.js'></script><script src='js/native/code-mirror/addon-5.49.1.min.js'></script><script src='js/native/code-mirror/mode-5.49.1.min.js'></script><!-- native:sql2json --><script src='js/native/lodash-4.17.15.min.js'></script><script src='js/native/nearley/2.19.0.min.js'></script><script src='js/native/nearley/grammar.js'></script><!-- vue --><script src='js/vue/2.6.10.js'></script><script src='js/vue/code-mirror-4.0.6.min.js'></script><script>Vue.directive('ui',function(el,binding,vnode){el.classList.add(vnode.context.$options.name)})Vue.component('model',{template:'#model',model:{prop:'table',event:'input'},props:{table:{required:true,type:Object,default:{}}},data:function(){return{highlight:{}}},methods:{/*
* 行色
*/highlightRow:function(obj){if(this.hasName(obj)){varname=obj.namevartoggle=(nameinthis.highlight)?!this.highlight[name]:truethis.$set(this.highlight,name,toggle)}},/*
* 取得
*/getName:function(column){returncolumn.name},getNullType:function(column){if(this.hasNullType(column)){returncolumn.allow_null}},getDataType:function(column){if(this.hasDataType(column)){returncolumn.data_type.type}},getDataTypeParam:function(column){if(this.hasDataTypeParams(column)){returncolumn.data_type.params[0]}},getAutoIncrementType:function(column){if(this.hasAutoIncrementType(column)){returncolumn.auto_increment}},/*
* 検証
*/hasAutoIncrementType:function(obj){return'auto_increment'inobj},hasDataTypeParams:function(obj){returnthis.hasDataType(obj)?'params'inobj.data_type:false},hasDataType:function(obj){return'data_type'inobj},hasNullType:function(obj){return'allow_null'inobj},hasName:function(obj){return'name'inobj}}})/*
* view-source:https://codemirror.net/mode/sql/
*/Vue.use(VueCodeMirror,{options:{scrollbarStyle:'simple',theme:'default',mode:'text/x-mysql',firstLineNumber:1,tabSize:2,indentUnit:2,matchTags:{bothTags:true},htmlMode:true,autoCloseTags:true,foldGutter:true,lineNumbers:true,lineWrapping:true,styleActiveLine:true,styleActiveSelected:true,extraKeys:{'Ctrl-A':'autocomplete','Ctrl-Q':function(cm){cm.foldCode(cm.getCursor())},'F11':function(cm){cm.setOption("fullScreen",!cm.getOption("fullScreen"))}}}})newVue({el:'main',data:{err:{message:'',line:0,col:0},json:[],content:`
CREATE TABLE action_protocol (
id int(11) NOT NULL AUTO_INCREMENT,
createdbyuserkey varchar(40) NOT NULL DEFAULT '',
userkey varchar(40) NOT NULL DEFAULT '',
dt_created datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
servicekey varchar(40) NOT NULL DEFAULT '',
information text NOT NULL,
objectkey varchar(40) NOT NULL DEFAULT '',
action varchar(50) DEFAULT '',
PRIMARY KEY (id)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE crm_reports (
id int(11) NOT NULL AUTO_INCREMENT,
entrykey varchar(40) NOT NULL,
userkey varchar(40) NOT NULL,
reportname varchar(255) NOT NULL,
description varchar(255) NOT NULL,
tablekey varchar(40) NOT NULL,
dt_created datetime NOT NULL,
dt_start datetime NOT NULL,
dt_end datetime NOT NULL,
date_field varchar(100),
displayfields text NOT NULL,
specials text NOT NULL,
interval varchar(255) NOT NULL,
filter text NOT NULL,
defaultreport int(11) NOT NULL DEFAULT '0',
basedonaddressbook int(11) NOT NULL,
allow_select_fields int(11) NOT NULL DEFAULT '1',
PRIMARY KEY (id)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE adminactions (
id int(11) NOT NULL AUTO_INCREMENT,
dt_created datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
userkey varchar(50) NOT NULL DEFAULT '',
urlvariables text NOT NULL,
formvariables longtext NOT NULL,
resellerkey varchar(50) NOT NULL DEFAULT '',
companykey varchar(50) NOT NULL DEFAULT '',
href text NOT NULL,
PRIMARY KEY (id)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
`},watch:{content:{/*
* 監視（入力）
*/deep:true,handler:function(newSQL,oldSQL){ /*
* 保存
*/localStorage.setItem('cache',this.content)/*
* 解析
*/varself=thisvareditor=self.$refs.myCm.codemirror/*
* 保存間隔は850ms
*/varprocessing=_.throttle(function(){// 消去:前回のエラーeditor.removeLineClass(self.err.line,'wrap','error-line')try{// 変換self.sql2json()// 変換:正常self.err.message=''}catch(exception){// 取得:エラーの情報と内容varerrInfo=exception.message.split('\n')[0]varerrContent=exception.message.split('\n')[2]// 整形:エラーとして表示するメッセージself.err.message=errInfo+':'+errContent// 取得:エラーの発生した行と列(https://www.regextester.com/97589 "Syntax error at line 111 col 1:: test")self.err.line=parseInt(errInfo.match(/line\s[0-9]+/g)[0].replace('line ',''))-1self.err.col=parseInt(errInfo.match(/col\s[0-9]+/g)[0].replace('col ',''))// 追加:今回のエラー(https://codemirror.net/doc/manual.html#removeLineClass)self.$refs.myCm.codemirror.addLineClass(self.err.line,'wrap','error-line')}},850)/*
* 処理
*/processing()/*
* 表示
*/console.dir(this.json)}}},computed:{hasErrSql2json:function(){returnthis.err.message.length>0}},methods:{init:function(){if('cache'inlocalStorage){this.content=localStorage.getItem('cache')}},sql2json:function(){this.json=newnearley.Parser(grammar).feed(this.content).results[0]}},created:function(){this.init()this.sql2json()}})</script>
