VB.NET-TIPS などプログラミングについて

文字列データを全角に全て統一したり、または半角に強制的に変換したい場合に使用するのが StrConv 関数です。 この関数は以下の様な宣言になっています。

Public Function StrConv(str As String, Conversion As Microsoft.VisualBasic.VbStrConv,
                        Optional LocaleID As Integer = 0) As String
・str       ：変換する String 型の式。
・Conversion：Microsoft.VisualBasic.VbStrConv のメンバー。
             実行する比較の種類を指定する列挙値。
・LocaleID  ：省略可能です。 システム LocaleID 値と異なる場合の LocaleID 値。
             既定値は、システムの LocaleID です。

LocaleID の引数は通常であれば必要はありません。
尚、Conversion の引数は以下の様な種類があります。

Conversion	処理
VbStrConv.Hiragana	文字列内のカタカナをひらがなに変換します。 日本語ロケールのみに適用されます。
VbStrConv.Katakana	文字列内のひらがなをカタカナに変換します。 日本語ロケールのみに適用されます。
VbStrConv.Lowercase	文字列を小文字に変換します。
VbStrConv.Narrow	文字列内の全角文字を半角文字に変換します。 アジア ロケールに適用されます。
VbStrConv.Uppercase	文字列を大文字に変換します。
VbStrConv.Wide	文字列内の半角 (1 バイト) 文字を全角 (2 バイト) 文字に変換します。 アジア ロケールに適用されます。

これらの Conversion の値を OR で連結して指定ができます。
上記の例を以下のソースで行います。

文字列変換関数(StrConv)の使用例

    ' 元の文字列宣言
    Dim strOrg As String = "01245ABCDExyzあいうえおカキクケコｻｼｽｾｿタチツテト"
    Dim str As String
    Console.WriteLine("[変換前の文字列]　　　：" & strOrg)

    ' 大文字を小文字に変換
    str = StrConv(strOrg, VbStrConv.Lowercase)
    Console.WriteLine("[大文字]　⇒[小文字]　：" & str)

    ' 半角文字を全角文字に変換
    str = StrConv(strOrg, VbStrConv.Wide)
    Console.WriteLine("[半角文字]⇒[全角文字]：" & str)

    ' 全角文字を半角文字に変換
    str = StrConv(strOrg, VbStrConv.Narrow)
    Console.WriteLine("[全角文字]⇒[半角文字]：" & str)

    ' 文字列内の[カタカナ]を[ひらがな]に変換します
    str = Strings.StrConv(strOrg, VbStrConv.Hiragana)
    Console.WriteLine("[カタカナ]⇒[ひらがな]：" & str)

    ' 文字列内の[ひらがな]を[カタカナ]に変換します
    str = Strings.StrConv(strOrg, VbStrConv.Katakana)
    Console.WriteLine("[ひらがな]⇒[カタカナ]：" & str)

    ' 小文字を大文字に変換後、全角文字に変換
    str = StrConv(strOrg, VbStrConv.Uppercase Or VbStrConv.Wide)
    Console.WriteLine("[大文字]＋[全角文字]　：" & str)

上記の処理を実行すると以下の様な表示が、「出力」ウインドウに表示されます。

[変換前の文字列]　　　：01245ABCDExyzあいうえおカキクケコｻｼｽｾｿタチツテト
[大文字]　⇒[小文字]　：01245abcdexyzあいうえおカキクケコｻｼｽｾｿタチツテト
[半角文字]⇒[全角文字]：０１２４５ＡＢＣＤＥｘｙｚあいうえおカキクケコサシスセソタチツテト
[全角文字]⇒[半角文字]：01245ABCDExyzあいうえおｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄ
[カタカナ]⇒[ひらがな]：01245ABCDExyzあいうえおかきくけこｻｼｽｾｿたちつてと
[ひらがな]⇒[カタカナ]：01245ABCDExyzアイウエオカキクケコｻｼｽｾｿタチツテト
[大文字]＋[全角文字]　：０１２４５ＡＢＣＤＥＸＹＺあいうえおカキクケコサシスセソタチツテト

関連する記事

⇒文字列変換関数（StrConv）で変換が途中で切れる

文字列変換関数の 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）の使い方

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 の使い方ですが、以下の様に順を追って説明します。

• 画像の描画
• 画像の大きさに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
「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>