データベースを構築しよう〜PostgreSQL編〜
データコンペ用のデータベースをPostogreSQLで構築しました。 データ型さえきちんと頭に入れれば簡単に作れました。
作成手順
手順
- データベース作成
- テーブル作成
- データの挿入
今回のゴール
今回はレシートのデータを表にしてみます。 二行目の日本語は補足説明です。実際にはありません。 データベース名はposdata、表の名前はordersとします。
| order_id | product_id | order_price | order_amount | order_date |
|---|---|---|---|---|
| レシート番号 | 商品番号 | 販売価格 | 購入量 | 購入時間 |
| 00001 | 101010 | 3000 | 1 | 2016/3/17 21:08 |
| 00002 | 202020 | 1000 | 2 | 2016/3/17 22:00 |
| 00002 | 303030 | 2000 | 1 | 2016/3/17 22:00 |
| 00003 | 123456 | 4000 | 2 | 2016/3/17 22:30 |
| 00004 | 223456 | 5000 | 1 | 2016/3/17 22:40 |
基本DB操作
まず表を入れる箱を用意します。 データベース作成
CREATE DATEBASE データベース名; CREATE DATEBASE posdata;
これで表を入れる箱ができました。 次にテーブルのアウトラインを先に作ります。
テーブル作成
CREATE TABLE テーブル名 (カラム名 データ型,カラム名 データ型,カラム名 データ型,・・・); CREATE TABLE テーブル名 (order_id text,product_id text,order_price integer,order_amount integer,order_date timestamp with time zone);
こんな感じの表のアウトラインができます。
| order_id | product_id | order_price | order_amount | order_date |
|---|---|---|---|---|
| レシート番号 | 商品番号 | 販売価格 | 購入量 | 購入時間 |
| text | text | integer | integer | timestamp with time zone |
下の二行は説明のためにあります。実際には一行目しかありません。
最後に中身(データ)を入れていきます。 今回は、CSVファイルからデータを挿入するのですが、PostgreSQL特有のCOPY文を使ってます。
copy テーブル名 from 読み込むCSVの絶対パス; copy orders from ’ORDER.csv’ WITH(encoding ’SJIS’,format csv,header true); # with以降は csvのエンコードがshift-jisかつcsvにヘッダーがあったためつけてるオプションになります。
完成ー
| order_id | product_id | order_price | order_amount | order_date |
|---|---|---|---|---|
| 00001 | 101010 | 3000 | 1 | 2016/3/17 21:08 |
| 00002 | 202020 | 1000 | 2 | 2016/3/17 22:00 |
| 00002 | 303030 | 2000 | 1 | 2016/3/17 22:00 |
| 00003 | 123456 | 4000 | 2 | 2016/3/17 22:30 |
| 00004 | 223456 | 5000 | 1 | 2016/3/17 22:40 |
補足
以下補足です。
データ型の変更
データ型の設定をミスって値が挿入できない場合は下のコマンドでデータ型を変えることできます。
ALTER TABLE テーブル名 ALTER COLUMN カラム名 TYPE 変更したいデータ型
データ型もっと知りたい！
データ型について知りたい方はこちらのリンクを参照してください。
textareaのカーソル位置に外部ボタンから値を挿入
本日は決まった言葉をボタンからワンタッチでtextareaに文字を挿入することができる機能を作成したので勉強メモを残しておきます。
目標
スマホではtextareaにfocusがある時にキーボードが出現するのでキーボードを維持したままボタン機能を実装するのが今回の目標でした。 自分なりに使いやすくまとめられたと思ったので参考までにどうぞ。
実装手順
- ボタンを用意（display:none）
- textareaにfocusされたらボタン出現
- textareaからfocusが外れたらボタンを消す
- ボタンをおした時はボタンをの表示を維持し、focusを元のtextareaに戻す
- プラグインを使いカーソル位置にボタンの値を挿入する
詳しくはコードを参照ください。
いざ実装
jQuery.selectionというプラグインを使いました。 岩崎さんすごいです。この場を借りてお礼を申し上げたいと思います。ありがとうございました！
Copyright © 2010-2014 IWASAKI Koji (@madapaja). http://blog.madapaja.net/ Under The MIT License
index.html
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>便利ボタン</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <style> .sharp{ width: 300px; height: 300px; } #sharp_btns{ display: none; position: fixed; bottom: 0; } </style> </head> <body> <!--便利ボタン このままコピー --> <div id="sharp_btns"> <input class="sharp_btn" type="button" id="sharp1" value="こんにちは"> <input class="sharp_btn" type="button" id="sharp2" value="こんばんは"> <input class="sharp_btn" type="button" id="sharp3" value="さようなら"> </div> <!-- 便利ボタン終わり--> <main> <!-- 便利ボタン機能をつけたいtextareaに.shrapを追加--> <textarea class="sharp"> あ い う え お </textarea> <textarea name="" class="sharp" id="" cols="30" rows="10"> か き く け こ </textarea> <textarea name="" id="" cols="30" rows="10"> さ し す せ そ </textarea> </main> <!-- javascript --> <script src="insert.js"></script> </body>
insert.js
/*!＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝プラグイン＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * jQuery.selection - jQuery Plugin * * Copyright (c) 2010-2014 IWASAKI Koji (@madapaja). * http://blog.madapaja.net/ * Under The MIT License * * Permission is hereby granted, free of charge, to any person obtaining * a copy of this software and associated documentation files (the * "Software"), to deal in the Software without restriction, including * without limitation the rights to use, copy, modify, merge, publish, * distribute, sublicense, and/or sell copies of the Software, and to * permit persons to whom the Software is furnished to do so, subject to * the following conditions: * * The above copyright notice and this permission notice shall be * included in all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ (function($, win, doc) { /** * get caret status of the selection of the element * * @param {Element} element target DOM element * @return {Object} return * @return {String} return.text selected text * @return {Number} return.start start position of the selection * @return {Number} return.end end position of the selection */ var _getCaretInfo = function(element){ var res = { text: '', start: 0, end: 0 }; if (!element.value) { /* no value or empty string */ return res; } try { if (win.getSelection) { /* except IE */ res.start = element.selectionStart; res.end = element.selectionEnd; res.text = element.value.slice(res.start, res.end); } else if (doc.selection) { /* for IE */ element.focus(); var range = doc.selection.createRange(), range2 = doc.body.createTextRange(); res.text = range.text; try { range2.moveToElementText(element); range2.setEndPoint('StartToStart', range); } catch (e) { range2 = element.createTextRange(); range2.setEndPoint('StartToStart', range); } res.start = element.value.length - range2.text.length; res.end = res.start + range.text.length; } } catch (e) { /* give up */ } return res; }; /** * caret operation for the element * @type {Object} */ var _CaretOperation = { /** * get caret position * * @param {Element} element target element * @return {Object} return * @return {Number} return.start start position for the selection * @return {Number} return.end end position for the selection */ getPos: function(element) { var tmp = _getCaretInfo(element); return {start: tmp.start, end: tmp.end}; }, /** * set caret position * * @param {Element} element target element * @param {Object} toRange caret position * @param {Number} toRange.start start position for the selection * @param {Number} toRange.end end position for the selection * @param {String} caret caret mode: any of the following: "keep" | "start" | "end" */ setPos: function(element, toRange, caret) { caret = this._caretMode(caret); if (caret === 'start') { toRange.end = toRange.start; } else if (caret === 'end') { toRange.start = toRange.end; } var userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf("firefox") > -1) { element.focus(); } try { if (element.createTextRange) { var range = element.createTextRange(); if (win.navigator.userAgent.toLowerCase().indexOf("msie") >= 0) { toRange.start = element.value.substr(0, toRange.start).replace(/\r/g, '').length; toRange.end = element.value.substr(0, toRange.end).replace(/\r/g, '').length; } range.collapse(true); range.moveStart('character', toRange.start); range.moveEnd('character', toRange.end - toRange.start); range.select(); } else if (element.setSelectionRange) { element.setSelectionRange(toRange.start, toRange.end); } } catch (e) { /* give up */ } }, /** * get selected text * * @param {Element} element target element * @return {String} return selected text */ getText: function(element) { return _getCaretInfo(element).text; }, /** * get caret mode * * @param {String} caret caret mode * @return {String} return any of the following: "keep" | "start" | "end" */ _caretMode: function(caret) { caret = caret || "keep"; if (caret === false) { caret = 'end'; } switch (caret) { case 'keep': case 'start': case 'end': break; default: caret = 'keep'; } return caret; }, /** * replace selected text * * @param {Element} element target element * @param {String} text replacement text * @param {String} caret caret mode: any of the following: "keep" | "start" | "end" */ replace: function(element, text, caret) { var tmp = _getCaretInfo(element), orig = element.value, pos = $(element).scrollTop(), range = {start: tmp.start, end: tmp.start + text.length}; element.value = orig.substr(0, tmp.start) + text + orig.substr(tmp.end); $(element).scrollTop(pos); this.setPos(element, range, caret); }, /** * insert before the selected text * * @param {Element} element target element * @param {String} text insertion text * @param {String} caret caret mode: any of the following: "keep" | "start" | "end" */ insertBefore: function(element, text, caret) { var tmp = _getCaretInfo(element), orig = element.value, pos = $(element).scrollTop(), range = {start: tmp.start + text.length, end: tmp.end + text.length}; element.value = orig.substr(0, tmp.start) + text + orig.substr(tmp.start); $(element).scrollTop(pos); this.setPos(element, range, caret); }, /** * insert after the selected text * * @param {Element} element target element * @param {String} text insertion text * @param {String} caret caret mode: any of the following: "keep" | "start" | "end" */ insertAfter: function(element, text, caret) { var tmp = _getCaretInfo(element), orig = element.value, pos = $(element).scrollTop(), range = {start: tmp.start, end: tmp.end}; element.value = orig.substr(0, tmp.end) + text + orig.substr(tmp.end); $(element).scrollTop(pos); this.setPos(element, range, caret); } }; /* add jQuery.selection */ $.extend({ /** * get selected text on the window * * @param {String} mode selection mode: any of the following: "text" | "html" * @return {String} return */ selection: function(mode) { var getText = ((mode || 'text').toLowerCase() === 'text'); try { if (win.getSelection) { if (getText) { // get text return win.getSelection().toString(); } else { // get html var sel = win.getSelection(), range; if (sel.getRangeAt) { range = sel.getRangeAt(0); } else { range = doc.createRange(); range.setStart(sel.anchorNode, sel.anchorOffset); range.setEnd(sel.focusNode, sel.focusOffset); } return $('<div></div>').append(range.cloneContents()).html(); } } else if (doc.selection) { if (getText) { // get text return doc.selection.createRange().text; } else { // get html return doc.selection.createRange().htmlText; } } } catch (e) { /* give up */ } return ''; } }); /* add selection */ $.fn.extend({ selection: function(mode, opts) { opts = opts || {}; switch (mode) { /** * selection('getPos') * get caret position * * @return {Object} return * @return {Number} return.start start position for the selection * @return {Number} return.end end position for the selection */ case 'getPos': return _CaretOperation.getPos(this[0]); /** * selection('setPos', opts) * set caret position * * @param {Number} opts.start start position for the selection * @param {Number} opts.end end position for the selection */ case 'setPos': return this.each(function() { _CaretOperation.setPos(this, opts); }); /** * selection('replace', opts) * replace the selected text * * @param {String} opts.text replacement text * @param {String} opts.caret caret mode: any of the following: "keep" | "start" | "end" */ case 'replace': return this.each(function() { _CaretOperation.replace(this, opts.text, opts.caret); }); /** * selection('insert', opts) * insert before/after the selected text * * @param {String} opts.text insertion text * @param {String} opts.caret caret mode: any of the following: "keep" | "start" | "end" * @param {String} opts.mode insertion mode: any of the following: "before" | "after" */ case 'insert': return this.each(function() { if (opts.mode === 'before') { _CaretOperation.insertBefore(this, opts.text, opts.caret); } else { _CaretOperation.insertAfter(this, opts.text, opts.caret); } }); /** * selection('get') * get selected text * * @return {String} return */ case 'get': /* falls through */ default: return _CaretOperation.getText(this[0]); } return this; } }); })(jQuery, window, window.document); /* ＝＝＝＝＝＝＝＝＝ここまでプラグイン＝＝＝＝＝＝＝＝＝＝＝ */ /* ＝＝＝＝＝＝＝＝＝プラグインの設定&適用＝＝＝＝＝＝＝＝＝＝＝ */ $(function(){ $("#sharp1") .click(function(){ /*text: "挿入する文字", mode: "before:カーソルの前に挿入""after:カーソルの後に挿入""replace:選択範囲を置き換え", caret: "keep:カーソル保持" */ $(".sharp:focus").selection("insert",{ text: "こんにちは", mode: "before", caret: "keep" }) }); $("#sharp2") .click(function(){ $(".sharp:focus").selection("insert",{ text: "こんばんは", mode: "before", caret: "keep" }) }); $("#sharp3") .click(function(){ $(".sharp:focus").selection("insert",{ text: "さようなら", mode: "before", caret: "keep" }) }); /* ＝＝＝＝＝＝＝＝＝便利ボタンの表示の切り替え＝＝＝＝＝＝＝＝＝＝＝ */ $('.sharp').focus(function(){ $('#sharp_btns').css("display","block"); }); $('.sharp').blur(function(){ if($("#sharp_btns").is("#sharp_btns:active")){ this.focus(); }else{ $('#sharp_btns').css("display","none"); } }); });
