-
文字列変換関数の StrConv を使っていて、変換結果が途中で切れてしまう現象が発生してしまいました。 普通に考えて以下の様な処理を行ったのですが、思った通りの結果が得られずに途中までしか変換されません。
文字列変換関数（StrConv）で変換が途中で切れるソース
Dim strOrg As String = "abcあいうえお" Dim str As String = StrConv(strOrg, VbStrConv.Wide) Debug.WriteLine("全角文字変換：" & str)上記のソースの部分のみを実行させた場合に、デバッグ出力ウインドウに以下の様に表示されました。
全角文字変換：ａｂｃあ
予想変換結果は「ａｂｃあいうえお」のはずなのですが、上手く変換されません。 変換種類の第2引数を変えてもうまくいかない場合があります。
そこでネットで調べたのですが Visual Studio が互換モードで実行されていると、 この現象が発生することがわかりました。 早速、自分のPCの Visual Studio の実行ショートカットのプロパティを開いてみました。上図の様に互換性にチェックが入っていたので、互換性のチェックを外して以下の様にしました。
Visual Studio 再度起動しなおして、上記のソースを実行すると、当然のことながら以下の結果が表示されました。
全角文字変換：ａｂｃあいうえお
Visual Studio のインストールの時点で互換性をONしていたのかもしれません。今となってはよくわかりませんが。 StrConv の変換がなぜか上手くいかない場合は互換性をチェックしてみて下さい。関連する記事
⇒文字列定数（改行、タブ、バックスペース等）について
⇒文字列変換関数（StrConv）の使い方
PR -
11月に入るとテレビで年賀状のCMが流れ出します。 今年もこの時期なのかと思います。
私が若いころは家族の近況報告の様な感じで子供の写真の画像を使って印刷をしていましたが、皆さんは如何でしょうか。 家族そろっての写真や、旅行での気に入った景色の前での記念写真などを使ったことを思い出します。
ただ、出す方は良いのですが、もらった方にしてみれば、面識はあるのだが良く知らない人の家族みせれても．．． な感じではないでしょうか。
良く考えてみて、年賀状って本当に必要なのでしょうか？
最近は、年賀状の裏は印刷で、宛名面もプリンタでの印字というのが大方の様な気がします。
かく言う私も同じことをしていますが、なかなか面倒なのでどうしても裏面は印刷で宛名はプリンタ出力になってしまいます。
私は自営業なのでお客様である会社関係は失礼があってもいけないので、年賀状は必要かなともいます。
ただ、親戚、友達関係は特に重要な人に絞っています。
人間、世間体的なことを考えて、なかなか今までの習慣を止められないものです。
年賀はがきも1枚63円になりましたし、消費税も10％になり印刷代も結構掛かります。 さらに、プリンタで宛名を印刷するにしても時間が掛かります。 年賀状を処理する為にトータルで1日ぐらいは毎年掛かっている様に思います。
なんと言う時間の無駄遣いかと思いますが、止めれれない自分が悪いのです。
ところで年賀状はいつからあるのかと調べてみたら、古くは平安の時代には既にあった様です。 平安時代は貴族の間で年始回りの代わりとして遠方の人に送ったそうです。 その後、時代が下って江戸時代に飛脚制度がととのい書状による賀状があったそうです。
そして明治維新と共に郵便制度が整備されてからは庶民の間でも書状による賀状がありました。 また郵便はがきが登場したことにより簡単に、封書よりは安く送れることからはがきによる賀状のやり取りが増えてきたため 、1905年には年賀郵便制度ができ、12月20日から30日までに郵便局に持ち込まれたものは翌年の1月1日以降に配達するようになりました。
更に戦後の1949年になって現在のお年玉付き年賀状が発行されるようになりました。 現在の年賀状の形になってから70年ですからそんなにも昔では無いのです。
この年賀状の売上ですが郵便事業の約１０％を占めているそうです。 １０％と言えば大変なもので、1年の売り上げの中でのことですから郵便事業のドル箱的存在です。 （この「ドル箱」という言葉も今では死語？）
年賀状を売るために職員に過剰なノルマを課せた結果、 ノルマ分を自分自身で購入し、金券ショップで安く売るという自爆営業と称することがよく行われる様です。 こんなことをやってまで存続させる意味があるのかと思います。 結局は郵便局にのせれられているのではないかと…
まあこんなことを言っていても年賀状を止められないので、なんとか安く仕上げる方法はないかとしらべてみました。
はがき代金はどうしてもかかるので仕方ないのですが、印刷代金が安く済むところがありました。
以下のサイト「おたより本舗」と言うところです。このサイト全国1位とのことらしく、以下のメリットがあります。
- 印刷代金が最大４５％引き
- 年賀はがき代が1枚５８円（1枚5円引き）
- 送料が０円（無料）
- 仕上りが早い
良いこと尽くめだったので少し心配でしたが、11月2日依頼で11月4日には到着しました。 印刷の出来上がりも特に問題はありませんでした。 来年からも必要があればここに頼もうかと思います。
以前は「カメラの○○○○」で印刷を頼んでしたのですが、 今回年賀状30枚で料金は1000円前後安くなりました。 （はがき1枚5円引きが結構ききます）
-
FileReader オブジェクトを使うと、ローカルなコンピューター内にある画像ファイルをウェブアプリケーションから非同期的に読み込むことが出来ます。 今回はこの FileReader を使って canvas に画像ファイルを描画する方法について説明します。 尚、画像ファイルの指定は input タグで type="file" とします。
処理の手順は以下の通りです- FileReader を生成画像の描画
- FileReader の readAsDataURL メソッドでファイル読込
- FileReader の onload イベントで canvas への画像表示関数の実行
■FileReaderを使いcanvasに画像ファイルを表示
<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //Image関数 function drawImage(imageFile) { var canvas = $("#canvas"); var ctx = canvas[0].getContext("2d"); //イメージオブジェクト var img1 = new Image(); //画像ファイル指定でファイル読込開始 img1.src = imageFile; //画像ロード後に画像を描画できる。 img1.onload = function(){ //画像の大きさを設定 width = img1.width; height = img1.height; canvas.attr('width' , width); canvas.attr('height', height); //画像を描画 ctx.drawImage(img1, 0, 0, width, height); } return false; } //ページロード時イベント宣言 $(function() { var file = null; // 選択されるファイル //ファイル選択時イベント宣言 $("input[type=file]").change(function() { //ファイルを取得 file = $(this).prop("files")[0]; //FileReader API var reader = new FileReader(); //ファイルロード終了時イベント宣言 reader.onload = function(e) { //画像表示関数コール drawImage(e.target.result); }; //fileを読込の開始 reader.readAsDataURL(file); }); }); </script> </head> <body> <h2>test canvas</h2> <canvas id="canvas" width="100" height="100" ></canvas> <br /> <input type="file" accept="image/*" /> </body> </html>
-
今回は HTML5 で用意されている canvas を使って画像ファイルを描画する方法について説明します。 canvas の使い方ですが、以下の様に順を追って説明します。
■画像の描画
直線の描画を行う為のコンテキストオブジェクトのメソッドは以下のものがあります。
メソッド 書式 説明 drawImage drawImage(image, x, y)
image:画像オブジェクト
x:描画開始の x 座標
y:描画開始の y 座標シンプルな描画 drawImage drawImage(image, x, y, dWidth, dHeight)
image:画像オブジェクト
x:描画開始の x 座標
y:描画開始の y 座標
dWidth:描画する横幅
dHeight:描画する縦幅描画開始位置と縮小幅を指定した描画 drawImage drawImage(image, sx, sy, sWidth, sHeight,
dx, dy, dWidth, dHeight)
image:画像オブジェクト
sx:描画元の x 座標
sy:描画元の y 座標
sWidth:描画する元画像の横幅
sHeight:描画する元画像の縦幅
dx:描画開始の x 座標
dy:描画開始の y 座標
dWidth:描画する横幅
dHeight:描画する縦幅元画像の取り出し位置と幅、及び描画開始位置と幅指定 上記の drawImage の3種類の例として以下のソースを示します。
尚、今回使用した画像ファイルは以下の様なものです。この処理の肝は、イメージオブジェクトへの画像ファイルを指定しす直後には描画処理を行わないことです。
画像ファイルの読込には時間が掛かるので、ファイルのロードが終わったタイミングで描画処理をする必要があります。
ソース上では img1.src = の直後に img1.onload がありますので、勘違いされないないように。
img1.onload ではロード直後に呼ばれる関数を宣言しています。 （実際のファイルロード後この関数が実行されます）<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //Image関数 function drawImage(iSwitch) { var canvas = $("#canvas"); var ctx = canvas[0].getContext("2d"); //イメージオブジェクト var img1 = new Image(); //画像ファイル指定でファイル読込開始 img1.src = "./canvastest1.jpg"; //画像ロード後に画像を描画できる。 img1.onload = function(){ //画像の大きさを設定 width = img1.width; height = img1.height; canvas.attr('width' , width); canvas.attr('height', height); //画像を描画 switch (iSwitch) { case 1: ctx.drawImage(img1, 0, 0); break; case 2: ctx.drawImage(img1, 50, 50, 100, 100); break; case 3: ctx.drawImage(img1, 0, 0, 150, 150, 10, 10, 150, 150); break; } } return false; } </script> </head> <body> <h2>test canvas</h2> <canvas id="canvas" width="200" height="200" ></canvas> <br /> <button onclick="drawImage(1);">開始座標指定のみ</button> <button onclick="drawImage(2);">開始座標,幅指定</button> <button onclick="drawImage(3);">元画像,描画先の指定</button> </body> </html>
■画像の大きさにcanvasを合わせる描画
画像の大きさに合わせて canvas の横と縦の幅を合わせる例を示します。
<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //Image関数 function drawImage(imageFile) { var canvas = $("#canvas"); var ctx = canvas[0].getContext("2d"); //イメージオブジェクト var img1 = new Image(); //画像ファイル指定でファイル読込開始 img1.src = imageFile; //画像ロード後に画像を描画できる。 img1.onload = function(){ //画像の大きさを設定 width = img1.width; height = img1.height; canvas.attr('width' , width); canvas.attr('height', height); //画像を描画 ctx.drawImage(img1, 0, 0, width, height); } return false; } </script> </head> <body> <h2>test canvas</h2> <canvas id="canvas" width="200" height="200" ></canvas> <br /> <button onclick="drawImage('./canvastest1.jpg');">Image1</button> <button onclick="drawImage('./canvastest2.jpg');">Image2</button> </body> </html>
「Image1」をクリックすると上記の画像が表示され、「Image2」をクリックすると少し大きい画像が表示されます。
■ページロード直後の描画
画像ファイルの表示には Img タグを使えばいいのですが、javascript による描画をしたい時があります。 その場合にはページがロードされた直後に canvas への画像を行います。
上記の画像表示関数を流用すれば特に難しくなく、ページロード時の $(function() { でその描画関数を呼出せば行えます。<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //Image関数 function drawImage() { var canvas = $("#canvas"); var ctx = canvas[0].getContext("2d"); //イメージオブジェクト var img1 = new Image(); //画像ファイル指定でファイル読込開始 img1.src = "./canvastest1.jpg"; //画像ロード後に画像を描画できる。 img1.onload = function(){ //画像の大きさを設定 width = img1.width; height = img1.height; canvas.attr('width' , width); canvas.attr('height', height); //画像を描画 ctx.drawImage(img1, 0, 0, width, height); } return false; } $(function() { //描画関数をCALL drawImage(); }); </script> </head> <body> <h2>test canvas</h2> <canvas id="canvas" width="200" height="200" ></canvas> </body> </html>
-
今回は HTML5 で用意されている canvas を使って図形を描画する方法について説明します。
この canvas は以前の様に Flash や Java を使わずに JavaScript で図形を描画することができます。
canvas の使い方ですが、以下の様に順を追って説明します。■canvasを使う準備
以下の様に HTML ソースの中に canvas タグを定義します。 タグIDは取敢えず canvas とし width height で領域の大きさを設定します。
その後 javascript で canvas にアクセスする為に canvas オブジェクトを取得します。 さらに canvas オブジェクトからグラフィック用コンテキストオブジェクトを取得します。
コンテキストオブジェクトの中のメソッドを使って各種の描画を行います。<canvas id="canvas" width="200" height="200" ></canvas> ... <script type="text/javascript"> ... var canvas = $("#canvas"); //canvasオブジェクトを取得 var ctx = canvas[0].getContext("2d"); //コンテキストオブジェクトを取得 //"2d":2次元グラフィック ... </script>■直線の描画
直線の描画を行う為のコンテキストオブジェクトのメソッドは以下のものがあります。
メソッド 書式 説明 beginPath beginPath() 線処理の開始指定 moveTo moveTo(x, y)
x:点の x (水平) 座標
y:点の y (鉛直) 座標点の移動 lineTo lineTo(x, y)
x:線の終点の x 座標
y:線の終点の y 座標現在の点と指定された座標で直線を描画
（この線は実際には描画されません）closePath closePath() beginPathで始めたパスを最後に閉じる
（閉じた図形が描画される）stroke stroke() 現在まで蓄積された描画情報で実際に描画する 直線の例として以下のソースを示します。 closePath の部分がコメントになっていますが、 このまま実行すると、ソースの下の実際のボタンの「Line」の処理となり、 コメントを解除すると三角形を描画する「Triangle」の処理となります。
<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //Line関数 function drawLine() { var canvas = $("#canvas"); var ctx = canvas[0].getContext("2d"); //パス開始 ctx.beginPath(); //パス始点の座標 ctx.moveTo( 10, 10); //線の終点の座標 ctx.lineTo(190,190); //引き続いて線の終点の座標 ctx.lineTo( 10,190); //パス終了 //ctx.closePath(); //パスの輪郭の描画 ctx.stroke(); return false; } </script> </head> <body> <h2>test canvas</h2> <canvas id="canvas" width="200" height="200" ></canvas> <br /> <button onclick="drawLine();">Line</button> </body> </html>
「Line」をクリックすると2本の線が「Triangle」をクリックすると三角形の線が描画されます。
■四角形の描画
四角形の描画を行う為のコンテキストオブジェクトのメソッド・プロパティは以下のものがあります。
メソッド・
プロパティ書式 説明 strokeStyle strokeStyle = color
color:cssで用いる色指示枠線の色指定 strokeRect strokeRect(x, y, width, height)
x:四角形の左上の x (水平) 座標
y:四角形の左上の y (鉛直) 座標
width:四角形の横幅
height:四角形の高さ四角形の描画
線の色は直前のstrokeStyleで指定されたものfillStyle fillStyle = color
color:cssで用いる色指示塗りつぶしの色指定 fillRect fillRect(x, y, width, height)
x:四角形の左上の x (水平) 座標
y:四角形の左上の y (鉛直) 座標
width:四角形の横幅
height:四角形の高さ四角形の描画し内部を塗りつぶす
塗りつぶす色は直前のfillStyleで指定されたものclearRect clearRect(x, y, width, height)
x:四角形の左上の x (水平) 座標
y:四角形の左上の y (鉛直) 座標
width:四角形の横幅
height:四角形の高さ四角形の領域をクリアする 四角形の例として以下のソースを示します。
strokeStyle で線の色を設定し strokeRect で四角い枠を描画します。
fillStyle で塗りつぶす色を設定し fillRect で四角い領域を塗りつぶします。
最後に clearRect で四角い領域をクリアします。<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //Rect関数 function drawRect() { var canvas = $("#canvas"); var ctx = canvas[0].getContext("2d"); //[strokeRect]用色指定 ctx.strokeStyle = "red"; //四角形・枠のみ描画 ctx.strokeRect( 10, 10, 180, 180); //[fillRect]用色指定 ctx.fillStyle = "green"; //四角形・全体を塗りつぶす ctx.fillRect( 50, 50, 100, 100); //四角形・全体をクリア ctx.clearRect( 75, 75, 50, 50); return false; } </script> </head> <body> <h2>test canvas</h2> <canvas id="canvas" width="200" height="200" ></canvas> <br /> <button onclick="drawRect();">Rectangle</button> </body> </html>
「Rectangle」をクリックすると3種類の四角形が描画されます。
■円の描画
円の描画を行う為のコンテキストオブジェクトのメソッド・プロパティは以下のものがあります。
メソッド・
プロパティ書式 説明 arc arc(x, y, radius, startAngle, endAngle [, anticlockwise])
x:円の中心の x (水平) 座標
y:円の中心の y (鉛直) 座標
radius:円の半径
startAngle:円の開始角度(ラジアン:πの値で指定)
endAngle:円の終了角度(ラジアン:πの値で指定)
anticlockwise:trueで時計回り、falseで反時計回りの描画円の描画 <html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //Circle関数 function drawCircle() { var canvas = $("#canvas"); var ctx = canvas[0].getContext("2d"); //[strokeRect]用色指定 ctx.strokeStyle = "red"; //[fillRect]用色指定 ctx.fillStyle = "yellow"; //線の幅は3px ctx.lineWidth = 3; //パス開始 ctx.beginPath(); //円描画:中心(100, 100)で半径50pxの円 ctx.arc(100, 100, 50, 0, 2 * Math.PI); //パス終了 ctx.closePath(); //塗りつぶす ctx.fill(); //パスの輪郭の描画 ctx.stroke(); return false; } </script> </head> <body> <h2>test canvas</h2> <canvas id="canvas" width="200" height="200" ></canvas> <br /> <button onclick="drawCircle();">Circle</button> </body> </html>
「Circle」をクリックすると円が描画されます。
