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

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

ただいまの
回答率

90.35%

  • JavaScript

    22079questions

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

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 988

dialbird

score 337

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

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

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

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)
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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/03 12:37

    早速のご返答ありがとうございます!

    失礼いたしました。ソースコードを上げたので、よろしければアドバイスをよろしくお願いいたします!

    キャンセル

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

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    22079questions

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