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"); } }); });
ユニークユーザーを集計する時の注意点
みなさんはWEBの状況を知るのにどんな数字を気にしていますか？
Google AnalyticsではCV数,CVR,PV,UU,Session数などいろいろな数字をみることができますがその中の一つにUUつまりユニークユーザー数という指標があると思います。
この数字が高ければ基本的に自分のサイトに訪れている人が多いという判断ができます。
もちろん参考にしているよ！という方にお聞きしたいのです。あなたは本当に意図しているユニークユーザー数をみることができていますか？と。
今回はGoogle Analyticsでの計測の仕方について紹介しますが、他の分析ツールを使っている方も同じ問題を実は持っているかもせいれません。
WEB担当の方やデータ分析を担当している方にぜひ一度読んでいただきたいです。
ユニークユーザーとはなにか？
ユニークユーザーとはどういう意味か。これは知っている人も多いと思います。これはある期間中にそのサイトあるいはページを訪れた人数のこと。
つまり、ある期間中に同じ人が何回か同じサイトやページに訪れてもその数はカウントされないことになります。
ユニークユーザーの落とし穴
ユニークユーザーを見ればどのくらいの人が自分のサイトやページに訪れているのかがわかるので、ECサイトなど運営している側からするとかなり気にしてみたい数字の一つと言えるでしょう。
しかし、ユニークユーザーにも落とし穴があります。
それは集計期間です。集計期間が異なるとユニークユウーザーの数にズレが生じてしまう問題です。
具体的に見ていきましょう。例えばAさんは4月と5月中に1回ずつECサイトで買い物するために訪れたとします。
集計するときに04/01~05/31の期間で集計したとします。この場合は上で説明したようにユニークユーザー数には1カウントしかされませんね。 しかしどうでしょう？04/01~04/30と5/01~05/31の期間の2回に分けて集計を行い、それを4,5月の分析データとしてみると、このときは2カウントされてしまうのです。
集計期間をわざわざ2回に分ける必要がないじゃん！と思ったかたは大丈夫なのですが、実は現場では、定期レポート作成などのために1ヶ月ごとにデータを集計する場合がありますよね。
このときは上のようなズレの問題が生じてしまうのです。この方法だと同じ人が04/30と05/01に1度ずつ訪れたとしても別ユーザーとしてカウントされてしまうのです。
これでは正しいデータを集計できているとは言えないですよね。
どのように集計すればよいか
上のような問題はユニークユーザーだけでなく他のデータでも起こりえることだと思います。
そこでどのようにデータを集計すればよいのか考えてみましょう。
皆さんのサイトでは一度訪問したユーザーがどのくらいの期間を空けて再訪したときにユニークユーザーとして認めますか？
Amazonなどの小売りECサイトでは短期間で違うものを購入するために訪れることもあるので、比較的短く設定してもよいと思われます。
逆に、引越しサイトなどは一回頼むとあまりそのサイトは使わなくなることが多いと思うので、比較的長めに設定してもよいかと思われます。
つまりサイトによってユニークユーザーの定義をしっかり決めて決めた期間できちんと集計することが大事なのではないでしょうか？
