2016年5月20日金曜日

【HTML5/Javascript】Canvasを使った損益グラフを作成してみよう

HTML5のCanvasの使い方を【参考URL】にある「損益グラフ」を使って学習してみました。


1. HTML
 index.htmlというファイルを作成して、以下のコードを記載します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>損益グラフ</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <h1>損益グラフ</h1>
    <canvas id="canvasProfitLoss" width="1200" height="600" style="border:1px solid #000000;"></canvas>
    <script type="text/javascript" src="test.js" charset="Shift-JIS"></script>
</body>
</html>


JavaScriptを外部ファイル(test.js)で記載して、読み込みます。
日本語を使うため、charset="Shift-JIS"を記載してください。


2. Javascript
(1)canvasにグラフ作成する関数を外部ファイル(test.js)に記載する
(ProfitLossChartという関数で、クラスの代わりとなります)
この関数を使って、返り値のインスタンス定義する(this.???がインスタンスが持つパラメータになります)

function ProfitLossChart(minPrice, minProfitLoss, maxPrice, maxProfitLoss, unitsPrice, unitsProfitLoss) {
            this.canvas = document.getElementById("canvasProfitLoss");
            this.minPrice = minPrice;
            this.minProfitLoss = minProfitLoss;
            this.maxPrice = maxPrice;
            this.maxProfitLoss = maxProfitLoss;
            this.unitsPrice = unitsPrice;
            this.unitsProfitLoss = unitsProfitLoss;
            this.tickSize = 20;
            this.context = this.canvas.getContext('2d');
            this.rangePrice = this.maxPrice - this.minPrice;
            this.rangeProfitLoss = this.maxProfitLoss - this.minProfitLoss;
            this.unitPrice = this.canvas.width / this.rangePrice;
            this.unitProfitLoss = this.canvas.height / (this.rangeProfitLoss);
            this.centerProfitLoss = Math.round(Math.abs(this.minProfitLoss / this.rangeProfitLoss) * this.canvas.height) ;
            this.centerPrice =  + Math.round(Math.abs(this.minPrice / this.rangePrice) * this.canvas.width);
            this.iteration = (this.maxPrice - this.minPrice) / 1000;
            this.scalePrice = this.canvas.width / this.rangePrice;
            this.scaleProfitLoss = this.canvas.height / this.rangeProfitLoss;
        };


※javascriptのインスタンスについては、次のURL一読するとよいと思います。
http://qiita.com/nmta/items/696eeab1d6b96e3bfc1a

コンテキスト(this.context)は、canvas に描画するための API にアクセスできるオブジェクトとなっています。

(2)X軸作成
刻みとラベルを表示した軸を作成する関数を定義します。
(クラス(ProfitLossChart)に関数を定義する)

    ProfitLossChart.prototype.drawPriceAxis= function () {
        var context = this.context;
        context.save();
        context.beginPath();   //
現在のパスをリセットします
        //左から10 pix オフセット, y 方向は中心(開始点設定)
        context.moveTo(10, this.centerProfitLoss);
        //水平線を作成
        context.lineTo(this.canvas.width, this.centerProfitLoss);
        context.strokeStyle = this.axisColor;
        context.lineWidth = 2;
        context.stroke();

        // 右側に刻みを書く
        var pricePosIncrement = this.unitsPrice * this.unitPrice;
        var pricePos, unit;
        context.font = this.font;
        context.textAlign = 'center';
        context.textBaseline = 'top';

        pricePos =  pricePosIncrement;
        unit = this.unitsPrice ;
        while (pricePos < this.canvas.width) {
            //刻み描画
            context.moveTo(pricePos , this.centerProfitLoss - this.tickSize / 2);
            context.lineTo(pricePos , this.centerProfitLoss + this.tickSize / 2);
            context.stroke();
            //刻みにラベル描画
            context.fillText(unit + this.minPrice, pricePos, this.centerProfitLoss + this.tickSize / 2 - 30);
            unit += this.unitsPrice;
            pricePos = Math.round(pricePos + pricePosIncrement);
        }

        //X軸中心にラベルを表示
        context.font = "12px 'ヒラギノ角ゴシックProN W3'";
        context.fillStyle = "green";
        context.fillText("価格(円)", this.canvas.width / 2, this.centerProfitLoss + this.tickSize / 2 -50);
        context.restore();
    };


(3) Y軸(利益/損失)作成
ProfitLossChart.prototype.drawProfitLossAxis = function () {
      var context = this.context;
      context.save();
      context.beginPath();
      //縦軸描画
      context.moveTo( 20, 0)
      context.lineTo( 20, this.canvas.height);
      context.strokeStyle = this.axisColor;
      context.lineWidth = 2;
      context.stroke();
      // 刻み描画
      var profitLossPosIncrement = this.unitsProfitLoss * this.unitProfitLoss;
      var profitLossPos, unit;
      context.font = this.font;
      context.textAlign = 'right';
      context.textBaseline = 'middle';
      profitLossPos = this.centerProfitLoss - profitLossPosIncrement;
      unit = this.unitsProfitLoss;
      while (profitLossPos > 0) {
          context.moveTo(20 - this.tickSize / 2, profitLossPos);
          context.lineTo(20 + this.tickSize / 2, profitLossPos);
          context.stroke();
          context.fillText(unit, 70 - this.tickSize / 2 - 3 , profitLossPos);
          unit += this.unitsProfitLoss;
          profitLossPos = Math.round(profitLossPos - profitLossPosIncrement);
      }
      profitLossPos = this.centerProfitLoss + profitLossPosIncrement;
      unit = -1 * this.unitsProfitLoss;
      while (profitLossPos < this.canvas.height) {
          context.moveTo(20- this.tickSize / 2, profitLossPos);
          context.lineTo(20 + this.tickSize / 2, profitLossPos);
          context.stroke();
          context.fillText(unit, 70 - this.tickSize / 2 - 3, profitLossPos);
          unit -= this.unitsProfitLoss;
          profitLossPos = Math.round(profitLossPos + profitLossPosIncrement);
      }
        // Y軸ラベルを作成
      context.font = "12px 'ヒラギノ角ゴシックProN W3'";
      context.fillStyle = "green";
      context.fillText("利益/損失(円)", this.centerPrice + 140, this.canvas.height / 4);
      context.restore();
  };


(4) 損益ライン作成
ProfitLossChart.prototype.drawEquation = function (drawFunction) {
      var context = this.context;
      context.save();
      this.transformContext();

      context.beginPath();
      context.moveTo(this.minPrice, drawFunction(this.minPrice));

      for (var x = this.minPrice + this.iteration; x <= this.maxPrice; x += this.iteration) {
          context.lineTo(x, drawFunction(x));
      }
      context.restore();
      context.lineJoin = 'round';
      context.lineWidth = 3;
      context.strokeStyle = 'red';
      context.stroke();
      context.restore();
  };


(5) コンテキストの変換
    ProfitLossChart.prototype.transformContext = function () {
      var context = this.context;
      this.context.translate(this.centerPrice, this.centerProfitLoss);
      context.scale(this.scalePrice , -this.scaleProfitLoss);
  };


(6) 実行
パラメータを定義し、インスタンス作成し、描画実行する
インスタンスは、ファンクション(ProfitLossChart)をnewすることで作成することができます。 
 
    var minPrice = 0;
    var maxPrice = 2200;
    var minPL = -10000;
    var maxPL = 10000;
    var unitsPrice = 50;
    var unitsProfitLoss = 500;

    // インスタンス(chart)作成
    var chart = new ProfitLossChart(minPrice, minPL, maxPrice, maxPL, unitsPrice, unitsProfitLoss);
  chart.drawPriceAxis();
  chart.drawProfitLossAxis();

  //損益グラフ作成
   var pStrike = 2110;
   var pCall = 5.5;
   chart.drawEquation(function (x) {
        if (x > pStrike)
        {
            return 100 * (x - pStrike - pCall);
        }
        else
        {
            return -(100 * pCall);
        }
   });



【参考URL】
http://www.codeproject.com/Articles/1100873/Charting-Profit-Loss-of-Financial-Options-Using-HT

2016年5月11日水曜日

無料の電子領収書とためしてみました

検索していて、偶然領収書をWebから発行できる無料サービス「イーレシート」を発見して試してみました。
使い方について、まとめてみました。

※特に、ユーザ登録しなくってもできました。

1. 入力画面表示
下記URLにて、画面を表示します。
イーレシート PDFの電子領収書(領収証)を無料で作成・発行・管理できるフリーサービス
https://www.ereceipt.jp/


2.  データ入力、領収書作成
トップページがもう領収書の入力画面なので、ここで入力してみます。
必要な箇所だけ入力して、「利用規約に同意して、領収書作成」ボタンをクリックします。



こんな感じです。印鑑も任意の文字をいれて角印か丸印を選択するだけて作ってくれるようです。
印鑑の画像は、ユーザ登録必要みたいなので、PDF作成の後、画像として編集させます。
この画面に遷移します。もう、領収書ができたようです。

3. 領収書表示
お客さんにダウンロードしてもらうには ダウンロードURL に書いてあるURLをメールなどで知らせれば領収書をダウンロードしてもらうことができます。


ここで、印鑑画像を作成して、ペイントソフトをつかって、編集すれば完成です。

【URL】
http://ryus.co.jp/blog/ereceipt/

2016年5月10日火曜日

【HTML5/CSS】画像を使わないでCSS3でローディング用アニメーションをつくってみよう

HTML5のサイト作成にて、時間がかかる処理の時にLoadingアイコンを表示しているサイトがよくあります。
そこで、Loading用のアイコン表示させる方法について調べてみました。

1、ソースコード


(!) HTML5(htmlファイル)
 ローディングを表示する<div>をHTMLに用意しCSS3でアイコンをつくる

    <div  id="loader">Loading...</div>
    <div id="loader_p">
        <p> Loading...</p>
    </div>


(2) CSS(cssファイル)
#loader {
  position: absolute;
  font-size: 10px;
  text-indent: -9999em;
  border-radius: 50%; 
  border: 10px solid #00F;
  border-right-color: transparent;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
#loader,
#loader:after {
  border-radius: 50%;
    width: 60px;
    height: 60px;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


#loader_p
{
   position: absolute;
   margin-top:0px;
   margin-left:0px;
   width: 60px;
   height: 60px;
}
#loader_p > p
{
   margin-top:30px;
   margin-left:12px;
   font-size:12px;
   color:#00F;
}


2、説明
(1) HTML
id="loader"がくるくる回る円のの部分です。
id="loader_p"がLoading...と表示する文字の部分です。

(2) CSS
 1.1秒回転する”load8”アニメーションを無限(infinite)に繰り返すように指定します。
easingはlinearで設定しています。
  animation: load8 1.1s infinite linear;


Safari、Opera、iOS Safari、Android Browser用にベンダープレフィックスの『-Webkit-』をつけます


@keyframesは、アニメーション中に到達すべきポイントであるキーフレーム (通過点) を指定します。

必ず指定しないといけないのは、最初と最後で、0% (または from) と100% (または to) で指定します。
回転させるので、rotateで回転角度を指定します。
 @keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


id="loader_p"のCSSは、表示位置と幅高さを指定しています。
特にアニメーションは指定していません。

【参考URL】
http://www.html5-memo.com/webtips/css3-loading/
http://scene-live.com/page.php?page=77
http://projects.lukehaas.me/css-loaders/

http://sterfield.co.jp/designer/css3%E3%81%AEanimation%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%E3%82%89%E4%BA%88%E6%83%B3%E4%BB%A5%E4%B8%8A%E3%81%AB%E7%B0%A1%E5%8D%98%E3%81%A0%E3%81%A3%E3%81%9F%EF%BC%81/

2016年5月9日月曜日

【Visual Studio 】キーボードショートカット

Visual Studioを使っていると、ショートカットキーを覚えておくと便利です。
ショートカットを記載しているサイトがありましたので、
そこに記載しているショートカットをまとめてみました。

実際にVisual Studio2015で試してみました。

【Visual Studio キーボードショートカット】
・Ctrl + Shift + B : プロジェクトのビルド
・Ctrl + Alt + L   : ソリューションエキスプローラーの表示
・Shift + Alt + C  : メニューのアーキテクチャ
・Shift + Alt + A  : 既存項目の追加


1、編集に関するショートカット
・Ctrl + Enter      :「 Insert blank line above the current line(?)」だそうだが、改行してだけ
・Ctrl + Shift + Enter : 「 Insert blank line below the current line(?)」だそうだが、改行してだけ
・Ctrl + Space     :インテリセンス(メニュー表示)
・Alt + Shift + 矢印キー(←,↑,↓,→) :カレント位置からコード複数選択
            ※矢印で複数選択して、纏めて複数文字削除したりする       
・Ctrl + }         : Match curly braces, brackets
・Ctrl + Shift + }    : Select text between matched braces, brackets
・Ctrl + Shift + S    : Saves all files and projects
・Ctrl + K, Ctrl + C   : Comments the selected lines
・Ctrl + K, Ctrl + U   : Uncomments the selected lines
・Ctrl + K, Ctrl + D   : Do proper alignment of all the code
・Shift + End      : Select the entire line from start to end
・Shift + Home     : Select the entire line from end to start
・Ctrl + Delete     : Deletes the word to the right of the cursor

2、ナビゲートに関するショートカット・Ctrl + Up/Down   : Scrolls the window without moving the cursor
・Ctrl + ?        : Take cursor to its previous location
・Ctrl + +        : Take cursor to its next location
・F12           :変数など「定義に移動」

3、デバッグに関するショートカット
・Ctrl + Alt + P    : Attach to process
・F10          : Debug step over
・F5           : Start debugging
・Shift + F5      : Stop debugging
・Ctrl + Alt + Q    : Add quick watch
・F9           : Set or remove a breakpoint

4、検索に関するショートカット
・Ctrl + K Ctrl + K : Bookmark the current line
・Ctrl + K Ctrl + N : Navigates to next bookmark
・Ctrl + .       : If you type in a class name like Collection<string> and do not have the proper namespace import, then this shortcut combination will automatically insert the import
・Ctrl + Shift + F  : Find in Files
・Shift + F12    : Find all references
・Ctrl + F       : 検索ダイアログ表示
・Ctrl + H      : Displays the Replace Dialog
・Ctrl + G      : Jumps to the line number or go to the line
・Ctrl + Shift + F  : Find the references of the selected item in the entire solution


【参考URL】
http://www.codeproject.com/Articles/1010023/Must-Know-Visual-Studio-Keyboard-Shortcuts-Part
http://www.codeproject.com/Articles/1010022/Must-Know-Visual-Studio-Keyboard-Shortcuts-Part 
http://www.dotnet-tricks.com/Tutorial/visualstudio/DEI8040212-Visual-Studio-2008,-2010,-2011,-2012-Keyboard-Shortcuts-Keys.html