質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

2652閲覧

簡単なブックマークレットを作っているのですが、文字化けしてしまいます........

dialbird

総合スコア379

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/12/03 02:34

編集2022/01/12 10:55

おはようございます。
課題でcanvas機能を使った簡単なブックマークレットを作成しているものです。

その機能とは、開いたページの上に透明なキャンバスを貼り付けて、上から落書きできるようにするといったものなのですが、その追加する要素の中に日本語があって、開くページによって日本語が文字化けしてしまうのです。
自分が追加する要素に対してのみ文字コード宣言(utf-8)をしたいのですが、良い方法はありますでしょうか?
また、ブックマークレットとして、問題がある点があれば是非ともご指摘お願いいたします。

なお、以下のスクリプトを読み込ませる予定です。(jQueryですが、以下のURLをブックマークに打ち込むことで、XAMPP経由で読み込めるようにしています。ファイル名はlocalhost内のcanvas.jsです。)

javascript

1javascript:(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

1jQuery(function($){ 2//そのWebページの全体の幅、高さを取得 3var Webwidth = document.body.scrollWidth; 4var Webheight = document.body.scrollHeight; 5 6//追加する要素らのHTML 7 8//追加する要素全体の親 9var canvas_sheet = $('<div id=\'canvas_sheet\'></div>'); 10//キャンバス 11var canvas_box = $('<canvas id=\'drawarea\' width=\'' + (Webwidth - 10) + '\' height=\'' + (Webheight - 10) + '\'></canvas>'); 12//ツールバー 13var tool_bar = $('<div id=\'tool_bar\'></div>'); 14//色変えスイッチ 15var color_changer = $('<input id="color_changer" type="color">'); 16//線の太さレンジ 17var line_width_changer = $('<input id="line_width_changer" type="range" max=\'50\' min=\'1\'>'); 18//消しゴムスイッチ 19var 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>'); 20//セーブボタン 21var save_btn = $('<button id=\'keisuke_save_btn\'>save</button>'); 22//クリアーボタン 23var clear_btn = $('<button id=\'keisuke_clear_btn\'>clear</button>'); 24 25 26//追加する要素らのCSS 27var canvas_sheet_css = { 28 position : 'absolute', 29 top : 0, 30 left : 0, 31 width : Webwidth, 32 height : Webheight, 33 border : 'solid 5px #333', 34 zIndex : 1000 35}; 36var canvas_box_css = { 37 position : 'absolute', 38 top : '0', 39 left : '0', 40 border : 'solid 2px red', 41 background : 'rgba(255,255,255,.2)' 42}; 43var tool_bar_css = { 44 position : 'ausolute', 45 top : '20px', 46 left : '-550px', 47 width : '700px', 48 height : '50px', 49 background :'skyblue' 50}; 51var color_changer_css = { 52 position : 'absolute', 53 top : '10px', 54 left : '50px' 55}; 56var line_width_changer_css = { 57 position : 'absolute', 58 top : '15px', 59 left : '150px' 60}; 61var erace_box_css = {//消しゴム 62 position : 'absolute', 63 top : '10px', 64 left : '300px', 65 width : '200px', 66 height : '20px' 67}; 68var save_btn_css = {//セーブボタン 69 position : 'absolute', 70 top : '10px', 71 left : '500px', 72 width : '50px', 73 height : '20px' 74}; 75var clear_btn_css = {//セーブボタン 76 position : 'absolute', 77 top : '10px', 78 left : '550px', 79 width : '50px', 80 height : '20px' 81}; 82 83//要素にCSSを付与し、追加する 84canvas_sheet.css(canvas_sheet_css).appendTo('body'); 85canvas_box.css(canvas_box_css).appendTo('#canvas_sheet'); 86tool_bar.css(tool_bar_css).appendTo('#canvas_sheet'); 87color_changer.css(color_changer_css).appendTo('#tool_bar'); 88line_width_changer.css(line_width_changer_css).appendTo('#tool_bar'); 89erace_box.css(erace_box_css).appendTo('#tool_bar'); 90save_btn.css(save_btn_css).appendTo('#tool_bar'); 91clear_btn.css(clear_btn_css).appendTo('#tool_bar'); 92 93//Canvas情報取得・設定 94var can = $('#drawarea')[0]; 95var ctx = can.getContext('2d'); 96var can_switch = false; 97var oldX = 0; 98var oldY = 0; 99var txy = 10; 100var color = 'black'; 101var line_width = $('#line_width_changer'); 102var eraser = 'source-over'; 103 104//ツールバーへの伸縮イベント付与 105$('#tool_bar').on('mouseover',function(){ 106 $(this).css('left','0'); 107}).on('mouseout',function(){ 108 $(this).css('left','-550px') 109}) 110 111//色変えレンジへのイベント付与 112$('#color_changer').on('change',function(){ 113 color = $(this).val(); 114}); 115 116//消しゴムボタンへのイベント付与 117$('input[name=\'erase\']').on('change',function(){ 118 if($(this).val() === 'on'){ 119 eraser = 'destination-out'; 120 }else if($(this).val() === 'off'){ 121 eraser = 'source-over'; 122 } 123}); 124 125//Canvasへのイベント付与 126$(can).on('mousedown',function(e){ 127 oldX = e.offsetX; 128 oldY = e.offsetY; 129 can_switch = true; 130}).on('mousemove',function(e){ 131 if(can_switch){ 132 var newX = e.offsetX; 133 var newY = e.offsetY; 134 ctx.strokeStyle = color; 135 ctx.lineWidth = line_width.val(); 136 ctx.lineCap = 'round'; 137 ctx.beginPath(); 138 ctx.moveTo(oldX,oldY); 139 ctx.lineTo(newX,newY); 140 ctx.globalCompositeOperation = eraser; 141 ctx.stroke(); 142 oldX = newX; 143 oldY = newY; 144 } 145}).on('mouseup mouseout', function(){ 146 can_switch = false; 147}); 148 149//ブックマークレット起動と同時にlocal読み込み 150(function load(){ 151 if(localStorage['keisuke_bookmark']){ 152 var base64 = localStorage.getItem('keisuke_bookmark'); 153 var keisuke_img = new Image(); 154 keisuke_img.src = base64; 155 keisuke_img.onload = function(){ 156 ctx.drawImage(keisuke_img,0,0); 157 }; 158 } 159})(); 160 161//SaveボタンでCanvasデータをローカルへ保存する。 162$('#keisuke_save_btn').on('click',function(){ 163 var base64 = can.toDataURL(); 164 localStorage.setItem('keisuke_bookmark',base64); 165}); 166 167//clearボタンでlocalStorageを空にし、キャンバスをリセット。 168$('#keisuke_clear_btn').on('click',function(){ 169 ctx.clearRect(0,0,Webwidth,Webheight); 170 localStorage.removeItem('keisuke_bookmark'); 171}); 172}); 173 174 175 176

参考にしたサイト

XAMPPを経由してスクリプトを読み込んでくれるブックマークレット

http://d.hatena.ne.jp/zariganitosh/20140811/load_script_on_bookmarklet

jQueryでもブックマークレット化できる方法

http://qiita.com/otchy/items/5c4f2e1b2a93ac200f1c

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ソースコードの提示がないと的確なアドバイスが難しいですね。

投稿2015/12/03 02:44

liguofeng29

総合スコア801

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dialbird

2015/12/03 03:37

早速のご返答ありがとうございます! 失礼いたしました。ソースコードを上げたので、よろしければアドバイスをよろしくお願いいたします!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問