質問編集履歴

ブックマークレットに直接打ち込んだURLも追加しました！

2015/12/03 03:42

投稿

dialbird

スコア379

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -12,12 +12,18 @@
-なお、以下のスクリプトを読み込ませる予定です。（jQueryですが、それでも読み込めるようにしています）
+なお、以下のスクリプトを読み込ませる予定です。（jQueryですが、以下のURLをブックマークに打ち込むことで、XAMPP経由で読み込めるようにしています。ファイル名はlocalhost内のcanvas.jsです。）
 ```javascript
+javascript:(function(d,s,q){s=d.createElement('script');s.src='//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js';d.body.appendChild(s);q=d.createElement('script');q.src='//localhost/canvas.js';d.body.appendChild(q);})(document)
+```
+```javascript
 jQuery(function($){
 //そのWebページの全体の幅、高さを取得

回答者様からのご指摘で、ブックマークレットのスクリプトを追加しました！中身で何か気になる点があれば是非ともご鞭撻のほどよろしくお願いいたします！

2015/12/03 03:42

投稿

dialbird

スコア379

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -7,3 +7,389 @@
 その機能とは、開いたページの上に透明なキャンバスを貼り付けて、上から落書きできるようにするといったものなのですが、その追加する要素の中に日本語があって、開くページによって日本語が文字化けしてしまうのです。
 自分が追加する要素に対してのみ文字コード宣言（utf-8）をしたいのですが、良い方法はありますでしょうか？
+また、ブックマークレットとして、問題がある点があれば是非ともご指摘お願いいたします。
+なお、以下のスクリプトを読み込ませる予定です。（jQueryですが、それでも読み込めるようにしています）
+```javascript
+jQuery(function($){
+//そのWebページの全体の幅、高さを取得
+var Webwidth = document.body.scrollWidth;
+var Webheight = document.body.scrollHeight;
+//追加する要素らのHTML
+//追加する要素全体の親
+var canvas_sheet = $('<div id=\'canvas_sheet\'></div>');
+//キャンバス
+var canvas_box = $('<canvas id=\'drawarea\' width=\'' + (Webwidth - 10) + '\' height=\'' + (Webheight - 10) + '\'></canvas>');
+//ツールバー
+var tool_bar = $('<div id=\'tool_bar\'></div>');
+//色変えスイッチ
+var color_changer = $('<input id="color_changer" type="color">');
+//線の太さレンジ
+var line_width_changer = $('<input id="line_width_changer" type="range" max=\'50\' min=\'1\'>');
+//消しゴムスイッチ
+var erace_box = $('<div id=\'erace_box\' style=\'border-bottom:solid 1px; width:200px;\'>消しゴム <input type=\'radio\' name=\'erase\' value=\'on\'>ON <input type=\'radio\' name=\'erase\' value=\'off\' checked>OFF</div>');
+//セーブボタン
+var save_btn = $('<button id=\'keisuke_save_btn\'>save</button>');
+//クリアーボタン
+var clear_btn = $('<button id=\'keisuke_clear_btn\'>clear</button>');
+//追加する要素らのCSS
+var canvas_sheet_css = {
+    position : 'absolute',
+    top : 0,
+    left : 0,
+    width : Webwidth,
+    height : Webheight,
+    border : 'solid 5px #333',
+    zIndex : 1000
+};
+var canvas_box_css = {
+    position : 'absolute',
+    top : '0',
+    left : '0',
+    border : 'solid 2px red',
+    background : 'rgba(255,255,255,.2)'
+};
+var tool_bar_css = {
+    position : 'ausolute',
+    top : '20px',
+    left : '-550px',
+    width : '700px',
+    height : '50px',
+    background :'skyblue'
+};
+var color_changer_css = {
+    position : 'absolute',
+    top : '10px',
+    left : '50px'
+};
+var line_width_changer_css = {
+    position : 'absolute',
+    top : '15px',
+    left : '150px'
+};
+var erace_box_css = {//消しゴム
+    position : 'absolute',
+    top : '10px',
+    left : '300px',
+    width : '200px',
+    height : '20px'
+};
+var save_btn_css = {//セーブボタン
+    position : 'absolute',
+    top : '10px',
+    left : '500px',
+    width : '50px',
+    height : '20px'
+};
+var clear_btn_css = {//セーブボタン
+    position : 'absolute',
+    top : '10px',
+    left : '550px',
+    width : '50px',
+    height : '20px'
+};
+//要素にCSSを付与し、追加する
+canvas_sheet.css(canvas_sheet_css).appendTo('body');
+canvas_box.css(canvas_box_css).appendTo('#canvas_sheet');
+tool_bar.css(tool_bar_css).appendTo('#canvas_sheet');
+color_changer.css(color_changer_css).appendTo('#tool_bar');
+line_width_changer.css(line_width_changer_css).appendTo('#tool_bar');
+erace_box.css(erace_box_css).appendTo('#tool_bar');
+save_btn.css(save_btn_css).appendTo('#tool_bar');
+clear_btn.css(clear_btn_css).appendTo('#tool_bar');
+//Canvas情報取得・設定
+var can = $('#drawarea')[0];
+var ctx = can.getContext('2d');
+var can_switch = false;
+var oldX = 0;
+var oldY = 0;
+var txy = 10;
+var color = 'black';
+var line_width = $('#line_width_changer');
+var eraser = 'source-over';
+//ツールバーへの伸縮イベント付与
+$('#tool_bar').on('mouseover',function(){
+    $(this).css('left','0');
+}).on('mouseout',function(){
+    $(this).css('left','-550px')
+})
+//色変えレンジへのイベント付与
+$('#color_changer').on('change',function(){
+    color = $(this).val();
+});
+//消しゴムボタンへのイベント付与
+$('input[name=\'erase\']').on('change',function(){
+    if($(this).val() === 'on'){
+        eraser = 'destination-out';
+    }else if($(this).val() === 'off'){
+        eraser = 'source-over';
+    }
+});
+//Canvasへのイベント付与
+$(can).on('mousedown',function(e){
+    oldX = e.offsetX;
+    oldY = e.offsetY;
+    can_switch = true;
+}).on('mousemove',function(e){
+    if(can_switch){
+        var newX = e.offsetX;
+        var newY = e.offsetY;
+        ctx.strokeStyle = color;
+        ctx.lineWidth = line_width.val();
+        ctx.lineCap = 'round';
+        ctx.beginPath();
+        ctx.moveTo(oldX,oldY);
+        ctx.lineTo(newX,newY);
+        ctx.globalCompositeOperation = eraser;
+        ctx.stroke();
+        oldX = newX;
+        oldY = newY;
+    }
+}).on('mouseup mouseout', function(){
+    can_switch = false;
+});
+//ブックマークレット起動と同時にlocal読み込み
+(function load(){
+    if(localStorage['keisuke_bookmark']){
+        var base64 = localStorage.getItem('keisuke_bookmark');
+        var keisuke_img = new Image();
+        keisuke_img.src = base64;
+        keisuke_img.onload = function(){
+            ctx.drawImage(keisuke_img,0,0);
+        };
+    }
+})();
+//SaveボタンでCanvasデータをローカルへ保存する。
+$('#keisuke_save_btn').on('click',function(){
+    var base64 = can.toDataURL();
+    localStorage.setItem('keisuke_bookmark',base64);
+});
+//clearボタンでlocalStorageを空にし、キャンバスをリセット。
+$('#keisuke_clear_btn').on('click',function(){
+    ctx.clearRect(0,0,Webwidth,Webheight);
+    localStorage.removeItem('keisuke_bookmark');
+});
+});
+```
+参考にしたサイト
+ XAMPPを経由してスクリプトを読み込んでくれるブックマークレット
+ http://d.hatena.ne.jp/zariganitosh/20140811/load_script_on_bookmarklet
+ jQueryでもブックマークレット化できる方法
+ http://qiita.com/otchy/items/5c4f2e1b2a93ac200f1c