1up noob: 2015

2015/12/16

【HTML5】Canvasでスケールを示すカラーバーを作る

数値に従って色分けされた図表などの横についている数値と色の対応を示すカラーバーをCanvas上に作りました。Google Mapなどと組み合わせて使えるかも知れません。

var max_z = 20;
var min_z = -60;
window.onload = function() {
  draw();
};
function draw() {
  var canvas = document.getElementById('color-canvas');
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  /* グラデーション領域をセット */
  var grad  = ctx.createLinearGradient(25,0,300,0);
  /* グラデーション終点のオフセットと色をセット */
  var tempColor
  for (var i = 0; i < 10; i++) {
    tempColor = 200 - 20 * i
    grad.addColorStop(0.1 * i , 'hsl('+ tempColor + ',100%,50%)');
  }
  /* グラデーションをfillStyleプロパティにセット */
  ctx.fillStyle = grad;
  /* 矩形を描画 */
  ctx.rect(25,0, 300,20);
  ctx.fill();
  ctx.textBaseline = 'bottom';
  ctx.font= '20px Times New Roman';
  ctx.fillStyle = 'black';
  ctx.fillText( min_z , 20 , 45, 25 );
  ctx.fillText( max_z , 300 , 45, 25 );
  ctx.font= '20px Times New Roman';
  ctx.fillText( "[m]" , 330 , 45, 20 );
  var data_uri = canvas.toDataURL( "image/png" );
  console.log(data_uri);
  document.getElementById("map-canvas").innerHTML="<img src='"+data_uri+"'>";
}

<canvas id="color-canvas"width="350" height="60"></canvas>
<div id="map-canvas"width="350" height="60"><div>

テストページ⇒カラーバー（横）、カラーバー（縦）。

作成上のポイントは「線形グラデーション」と「HLS色空間」です。

線形グラデーションのサンプルコードのRGB色空間で指定してある部分をHLSに変更することで容易に滑らかに値に対して色を変化させることができました。
具体的には、カラーバーに示したい値の変化にHLS色空間の色相の値の変化を対応させています。
色相の値は一周すると元に戻るので初期値の設定に注意が必要です。

2015/07/23

【JavaScript】バスの時刻表を作る

JavaScriptの勉強用に作ってみました。
時刻表の一覧と現在時刻を照らし合わせて、現在時刻以降のものだけを表示するようにしています。

// 現在時刻を取得する
var nowTime = new Date();
var nowYear = nowTime.getFullYear();
var nowMonth = nowTime.getMonth()+1;
var nowDay = nowTime.getDate();
var nowWeek = nowTime.getDay();
var yobi= new Array("日","月","火","水","木","金","土");
var nowHour = nowTime.getHours();
var nowMinute = nowTime.getMinutes();
// 現在時刻を表示する
document.write("現在時刻: "+nowMonth+"月"+nowDay+"日 "+"("+yobi[nowWeek]+")"+nowHour+"時"+nowMinute+"分");
document.write("<br/>");
// 時刻表を設定する
var timeTable = [
  [7,5],
  [8,5],[8,20],
  [9,0],[9,15],[9,30],[9,45],
  [10,20],[10,50],
  [11,20],[11,50],
  [12,20],[12,50],
  [13,20],[13,50],
  [14,20],[14,50],
  [15,20],[15,50],
  [16,20],[16,50],
  [17,20],[17,50],
  [18,20],[18,50],
  [19,15],[19,35],[19,55],
  [20,15],[20,35],[20,55],
  [21,35],
  [22,10]
];
//  timeTable内の配列の個数に合わせる
var tableMax =33;

//  時刻表を表示する
for(i=0; i<tableMax; i++){
  var timeTableHour = timeTable[i][0];
  var timeTableMinute = timeTable[i][1];
  var timeTableTime = new Date(nowYear+"/"+nowMonth+"/"+nowDay+" "+timeTableHour+":"+timeTableMinute);
  if(nowTime < timeTableTime){
    document.write(timeTableHour+":"+timeTableMinute);
    document.write("<br/>");
  } else {
    document.write("発車予定時刻を過ぎました。");
    document.write("<br/>");
  }
}

テストページ

平日と土日で時刻表が変わることやスマホ対応などには全く考慮していない簡易版です。
timeTableの配列を弄るだけでも、行先の追加など高機能化ができるかと思います。

2015/03/19

auのiPhoneにドコモメールを設定する方法

はじめに

ドコモメールがiPhoneで使えるようになって久しいが、諸事情でdocomo以外のキャリアのiPhoneでドコモメールを受信したいという方向け。

* 自己責任でお願いいたします。

記事中の間違え等はコメントにお願いいたします。

準備として

ドコモメールのiPhone設定はここのページに書いてある。

この方法はdocomoのiPhoneを使っているユーザー向けであり、auのSIMを挿したままでは「iPhone利用設定」のプロファイルをダウンロードすることはできない。

そこで参照すべきはこちらのページである。

注意点は先のページ中に、以下のように書かれている通り

”各メールソフトで設定を行う際には、docomo ID利用設定を有効にする必要があります。設定方法はマルチデバイスでのご利用方法をご確認ください。”

*ドコモメールのdocomo ID利用が有効であること。

ドコモメールのdocomo ID利用については公式サイト等の解説を参考に行ってほしい。
今回はそこまではすでに設定を終えているものとする。

設定内容について

先ほど紹介したページでも書かれていることだが、IMAP対応のメーラーであれば、特にiPhoneに限らずともAndroidのスマートフォンでも対応アプリを用いれば同様に設定できる。
今回はiPhoneの既存のメーラーの場合の設定を紹介する。Androidの場合の設定方法は他のサイトを参考にしてほしい。

設定する内容は、ここの「設定内容」の部分。