【JavaScript】Canvas上で漫画の自動着色する

「マンガミーヤ」という漫画閲覧用の画像ビューアでは、プラグインによる機能追加が可能で、特に有名なものとして「疑似4色刷り」と呼ばれる漫画を自動で着色する機能があります。
同等の自動着色機能を持つソフトとして、「HSP de 自動着色」が公開されています。

最近流行りのAIによる自動着色とは異なり、画像の輝度に対して場合分けし、4色で塗り分けるといった機能です。（参考：下画像）

今回、これをCanvas上で、再現してみます。
以下は、作成したプログラムのソースコードの一部です。フィルタ処理の部分はもう少しすっきり書ける気がします。

テストページ

［参考］JavaScriptで自働着色

JavaScript 自動着色

【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色空間の色相の値の変化を対応させています。
色相の値は一周すると元に戻るので初期値の設定に注意が必要です。

【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の配列を弄るだけでも、行先の追加など高機能化ができるかと思います。

【JavaScript】YouTubeのサムネをクリックでiframeに入れ換える

サイトにYouTubeの埋め込みを入れすぎると読み込みが重くなることがあります。
そこでJavaScriptでクリックしてから、iframeに切り替えるようにしてみようという試みです。

当方JavaScript初心者ですので間違えがあってもご容赦を。
コメントで教えてくれると幸いです。

function changeThumbnail(obj)
{
 var width  = 480;
 var height = 360;
 var pattern = /vi\/([^&]+)\//;
 var video_id  = obj.childNodes[0].src.match(pattern);
 var iframe = "<iframe width=\""+width+"\" height=\""+height+"\" src=\"http://www.youtube.com/embed/"+video_id[1]+"\" frameborder=\"0\" allowfullscreen></iframe>";
 obj.innerHTML = iframe;
}

<a href="https://www.youtube.com/watch?v=n7H4p0ArZUU">Mr.Children「フェイク」Music Video</a><br/>
<div onClick="changeThumbnail(this);"><img src="http://i.ytimg.com/vi/n7H4p0ArZUU/hqdefault.jpg"></div>

テストページ
jQueryを使えばもっと簡易化できそうです。

【RSS】アンテナサイトを作成した

最近、RSSに興味を持ちました。
そこでオリジナルな複数サイトのRSSの情報をまとめて表示するサイトを作ってみます。

htmlとcssが多少書ける程度の知識しかないので、JavaScriptは試行錯誤しながらで、参考サイトのサンプルコードを存分に使わせてもらっています。
まだ、改善するべき点も多いですが、一応の枠組みはできたので公開します。
多少は自分で組んだので…

［テストページ］


[参考]
・【Google Feed APIを使用して、複数のサイトのRSSフィードを取得して更新日順でソート（並び替え）して、さらにそれを「サムネイル付きで」表示する方法】

・ブログサイトなどのRSSを取り込んで画像も一緒に表示させるフィード機能