長芋の浅漬け

冷蔵庫に長芋があったので久々に浅漬けにしてみました。
シャキシャキとした食感と、ほんのり山葵の香りがとても良いですよ。

材料

• 長芋
• 白だし
• 水
• 山葵

作り方

1. 長芋を食べやすい大きさに切ります。
   短冊切りや乱切りが良いです。

2. 白だし、水、山葵を予め混ぜておきます。
   ※分量は好みで（いつも目分量なもので……！

3. 密閉容器に1と2を入れ、30分ほど漬ければ完成。

手軽にできて、箸休めにもお酒のおつまみにもなる万能さ……！
個人的には一晩置いて味が染みた長芋も好きだったりします。
ごちそうさまでした。

フンドーキン 白だし 1000mL

tumblrの記事をはてなブログに移行する

ようやく重い腰を上げて、放置気味だったTumblrの記事をはてなブログに移行してみました。
Tumblrは公式で記事のエクスポート機能が用意されていないので、

• 外部のWebサービスを使ってTumblrの記事をWordPress形式に変換
• はてなブログにインポート

という手順を踏みました。

Tumblrの記事をエクスポートする

前述の通りTumblrには記事のエクスポート機能がありません。
これがTumblrでの記事を放置していた一番の要因...。

調べてみるとTumblr2Hatenablog というサービスを作っている方が。
このサービスを利用してTumblrの記事をWordPress形式に変換してみます。
手順はとても簡単でした。

1. 「Tumblr Account」に移行したいTumblrのアカウントを入力
2. 「Exported Content Format」は「Raw Input (preserving Markdown)」を選択（Markdownで記載していたため）
3. 「Permalink Slugs」は好きな形式を選択
4. 「Export for」は、今回ははてなブログなので「Self-Hosted WordPress Installation」を選択
5. 「Post Options」は好きな形式を選択
6. 「Export」ボタンをクリック

これでWordPress形式のXMLファイルがダウンロードできます。

はてなブログにインポートする

作成したXMLファイルをインポートしてみます。
はてなブログの管理画面にログインし、左側のメニューから「インポート」をクリックします。

形式を「WordPress形式」にし、「ファイル選択」ボタンからXMLファイルを選択、「文字コード選択」ボタンをクリックし、文字コードを選択します。
utf-8/euc-jp/shift-jisから文字化けしていないものを選択し、「インポート」ボタンをクリックだけで完了です。

記事のインポートが完了したら、記事内の画像を画面に従って移行していきます。
この辺もボタンをクリックするだけで移行してくれるので便利...！

これでTumblrの記事を無事に移行することが出来ました。
あとはTumblr側からどうリダイレクトしていくかを模索しています。
もう同しようもないときはバッサリTumblrを閉じちゃってもいいかな...とか。

参考サイト

• はてなブログに引っ越してきました - Gyazo Blog

【Chart.js】折れ線グラフ内にある任意のマーカーの色を変更する

Chart.jsで折れ線グラフを作成しているときに、
特定のマーカーの色を変更したく、方法を調べたのでメモしておきます。

しきい値を下回った時に色を変えたい、みたいな際に使えるかな、と。

今回利用するコード

今回使うコードは下記のような感じです。
点数の折れ線グラフと、しきい値のグラフをそれぞれ表示させておきます。

グラフの任意の場所のマーカーの色を変更する

作成したグラフのうち、しきい値を下回ったマーカーの色を変更します。
Chart.jsでのマーカーの色指定は文字列だけでなく、配列も利用できるのでこれを使います。

まずは背景色用の配列を返す関数を作成します。

/**
 * マーカーの背景色用配列の作成
 * @param points      点数用配列
 * @param borderPoint しきい値
 * @param safeColor   マーカーの背景色(通常時)
 * @param outColor    マーカーの背景色(異常時)
 */
function generatePointBgcolor(points, borderPoint, safeColor, outColor) {
  var bgColors = [];

  for(var i = 0, len = points.length; i < len; i++) {
    if(points[i] > borderPoint) {
      bgColors.push(safeColor);
    } else {
      bgColors.push(outColor);
    }
  }

  return bgColors;
}

次に背景色用の配列を受け取る変数を作成し、
chartOptions.data.datasets[0].pointBackgroundColor に格納します。

var pointBgcolors = generatePointBgcolor(points, 28, 'rgba(0, 178, 108, 1.0)', 'rgba(255, 0, 0, 1.0)');
...
var chartOptions = {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5],
    datasets: [{
      label: '点数',
      data: points,
      borderColor: 'rgba(204, 204, 204, 0.7)',
      pointBackgroundColor: pointBgcolors,
      fill: false
    }, {
      label: 'しきい値',
      data: borderPoints,
      borderColor: 'rgba(255, 9, 232, 1)',
      borderWidth: 1,
      pointRadius: 0,
      pointHoverRadius: 0,
      fill: false,
    }]
  }
}

コードの全景と出来上がりのグラフは以下の通り。

これでしきい値を下回ったマーカーの色が変わるようになりました。
元々 pointBackgroundColor には文字列しか使えないと思いこんでいたのでかなりハマっていました...
ドキュメントをちゃんと見てみると普通に配列が使えることが書かれていて...orz
ちゃんとドキュメントは見るべきでしたね...反省。

今回参考にしたサイト

• Chart.js | Documentation

関連記事

satoh-d.hatenablog.com

アップルパイ

最近立て続けにリンゴをいただく機会があったので、少しでも消費できればとパイにしてみました。
冷凍のパイシートを使えばとても簡単です。

材料

• リンゴ: 1個
• 砂糖: 大さじ3
• カボス: 1/2個
• 冷凍パイシート: 4枚
• 卵黄: 1個分

作り方

リンゴをザクザク切ります。
なるべく小さめに切るのが好きです。

切ったリンゴと砂糖を鍋に入れ、カボスの絞り汁を加えます。
本当はレモン汁なのですが、レモンが無かったので……カボスは常備されています。
さすが大当県民。

リンゴがシナっとしてきたらフィリングが完成です。
飴色になるくらいまで煮詰めても美味しいかも、と思いました。

パイシートにフィリングを乗せ、上からもう一枚パイシートを被せます。
フォークで端っこを潰して閉じます。

220℃に熱したオーブンで8分焼き、焼き色がついたら190℃で5分ほど焼けば完成。
熱々のままでも、冷蔵庫で寝かせてからでも美味しくいただけます。

簡単に作れて美味しく、リンゴも消費できていいことづくめ、ごちそうさまでした。

日本製粉 冷凍 12パック オーマイ パイシート4枚

ニトスキを使って鶏油を作ってみる

唐揚げを作るときに出た皮で鶏油を作ってみました。
うちでは基本的に鳥の皮は使わないので再利用方を探してたんですが、簡単にできて良かったです。

材料

• 鳥の皮
• ネギの青い部分
• 生姜

作り方

鳥の皮を一口大に切り、スキレットに並べます。
今回は胸肉4枚分をニトスキに敷き詰めてます。肉料理にはニトスキ、便利です。

敷き詰めたら弱火で焼いていきます。
基本は放置し、20分経ったら裏返します。
さらに10分ほど焼きます。
思った以上に油が出てびっくり……！

焼き終わったら鳥皮をあげて、ネギの青い部分と生姜を入れて5分ほど炒めます。
香りが油に移ってとても良い。

鳥皮は塩こしょうをかけていただきます。
お酒のおつまみにぴったりですね。

後は容器に移し完成です。
ちなみに鶏油は冷蔵で1ヶ月ほど持つそうです。

チャーハンやラーメンに入れると美味しいらしいので、やってみたいな……違いがでるのかな…！

ニトリ　６インチ　スキレット

塩山舞の「ニトスキ」レシピBOOK (三才ムック vol.853)

Chart.jsでさくっと簡単にグラフを作ってみる

現在の案件で「JSでグラフを表示する」要件が出てきたので、調査がてらChart.js」を試してみました。
ドキュメントを見ながら写経し、実際にブラウザで確認するところまでメモしておきます。

• Chart.js

前提

• node.js: v6.9.1
• npm: 3.10.9
• Chart.js: 2.4.0
• Browserify: 13.1.1

各種モジュールをインストールする

Chart.jsのインストールは npm もしくは bower を使って行います。
面倒な場合はCDNも用意されています。

• Chart.js - cdnjs.com

npm init
npm install chart.js --save
npm install browserify --save

Browserifyの設定を行う

package.json内にある"scripts": {}にBrowserifyでビルド用コマンドを定義しておく
タスク名は任意の文言でおｋ
npm run build-jsをターミナル上で打つと、src/main.js がブラウザ上で利用できる形に変換されるようになります。

...
"scripts": {
  "build-js": "browserify src/main.js > build/js/bundle.js"
},
...

HTMLファイルを用意する

Chart.jsを利用する為にHTMLファイルを用意します。
index.html を作成し、下記のようにコードを記載します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Chart.js Sample</title>
</head>
<body>

<canvas id="myChart" width="400" height="400"></canvas>
  
<script src="build/js/bundle.js"></script>
</body>
</html>

JavaScriptファイルを作成する

main.jsに下記のコードを記載してみます。

'use strict';

var Chart = require('chart.js');

// canvas要素を取得
var ctx = document.getElementById('myChart');

// jQueryを使う場合は
// var $ = requires('jquery');
// var ctx = $('#myChart');
// でもおｋ
// ※ npm install jquery --save しておくこと

// グラフのオプションを記載
var myChart = new Chart(ctx, {
  // グラフの形式を指定
  // 今回は棒グラフ形式
  type: "bar",
  // グラフのデータを指定
  data: {
    // X軸の見出し設定
    labels: ['月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日', '日曜日'],
    // 各種グラフ設定
    datasets: [{
      // グラフの見出し設定
      label: '時間外労働時間',
      // Y軸のデータ設定
      data: [18, 11, 5, 16, 10, 9.5, 10],
      // グラフの背景色設定
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      // グラフのボーダー設定
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      // ボーダーの太さ設定
      borderWidth: 1
    }]
  },
  // グラフ自体の共通項目設置絵
  options: {
    // レスポンシブ形式を無効にする
    responsive: false
  }
});

Browserifyでビルドしてみる

下記コマンドをターミナル上で実行します。
src/main.js 内のコードがブラウザ上で利用できる形式に変換され build/js/bundle.js に設置される

npm run build-js

ブラウザ上で確認してみる

実際にブラウザで確認してみるとグラフが出来ています。
とある月の時間外労働時間が棒グラフになりました。
水曜日が優秀なことが伺えますね...！

今回は棒グラフで試してみましたが、type: "bar"の部分を下記のように変えると、様々なグラフを作成することが出来ます。

• "bar": 棒グラフ
• "line": 折れ線グラフ
• "radar": レーダーチャート
• "polarArea": 鶏頭図
• "pie": パイチャート
• "doughnut": ドーナツチャート
• "bubble": バブルチャート

さいごに

さくっと簡単に見た目おしゃれなグラフが作れるChart.js凄い...！
ver2.0からは混合グラフまで作成できるようになっているので、とても使いやすいのではないでしょうか。
これからJSでグラフを作る場合はChart.jsを使っておけば間違いないような気がします

参考サイト

• Chart.js | Documentation

node-easymockを利用してスタブサーバを作ってみる

現在対応している案件で、APIを使ってUIを構築するけど、APIサーバがまだ用意出来ていない... といった状況が有り、簡単なAPIサーバ（スタブ）をローカルで作成してみました。

今回、「node-easymock」を利用してみました。
思ったより簡単に出来ましたが、手順を忘れないためにメモ。

利用環境

• Windows8.1
• Node.js: v0.12.3
• npm: 2.9.1

PCに入っていたNode.jsとnpmのバージョンがかなり前のもの...
最新の環境でも問題なく動くと思われます。

利用までの準備

node-easymockはnode.jsのモジュールとなっています。
まず、easymockを利用するために必要なものをそれぞれ準備する必要があります。

node.jsのインストール

node.jsの公式サイトから、node.jsをダウンロードし、インストールをします。
node.jsをインストールする際、同時にnpm(node.jsモジュールの管理ツール)も同時にインストールされます。

インストール完了後、コマンドプロンプトを開き以下のコマンドを実行します。
それぞれバージョンが表示されればインストールは正常に行われています。

C:\Windows\System32>node -v
v0.12.3
#ここに表示される文言はインストールしたバージョンによって異なります。

C:\Windows\System32>npm -v
2.9.1 #ここに表示される文言はインストールしたバージョンによって異なります。

node-easymockのインストール

node.js, npmのインストールが完了したらnode-easymockをインストールします。
インストールはコマンドプロンプト上で以下のコマンドを実行します。

C:\Windows\System32>npm install -g easymock

Pythonのインストール

node-easymockにはnode-sqlite3というDBを利用します。
node-sqlite3を利用するためにはPythonが必要らしく...。
下記のサイトよりPythonをダウンロード&インストールします。
※バージョン 2.7.x をご利用下さい ※インストールフォルダはデフォルトでOKです

• Download Python | Python.org

インストールが完了したらシステム環境変数にパスを通します。
管理者権限でコマンドんプロンプトを起動し、以下のコマンドを実行します。

C:\Windows\System32>setx /m path "%path%;c:\Python27"

パスを通したらPythonが使えるようになります。
環境によっては下記のページに記載されている通りVisual Studioのインストールも必要かもしれません。

参考サイト

• Windows上でNode.jsからSQLite3を使う方法 - Qiita

スタブサーバを起動する

諸々のモジュールの準備が完了したら、いよいよサーバを立ち上げてみます。
任意の場所にeasymock用のディレクトリを作成します。

今回は例として easymock というディレクトリを作成します。

# 現時点のディレクトリ構成
easymock

easymockディレクトリに移動し、コマンドプロンプトから下記のコマンドを実行します。
easymockの起動ディレクトリに再度node-easymockを配置します。

C:\Windows\System32>npm install node-easymock

node-easymockの配置が完了したら、easymockディレクトリは下記のような構成になります。

easymock
  +- node_modules #node.jsのモジュール群(node-easymock含む)

次にテスト用としてeasymockディレクトリ直下に user_get.json というjsonファイルを設置しておきます。
ファイルの中身は下記のとおりです。

{
  "name": "taro",
  "age": 22,
  "comment": "Hi"
}

# この時点でのディレクトリ構成
easymock
 +- node_modules #node.jsのモジュール群(node-easymock含む)
 +- user_get.json

ファイルの設置が完了したら、node-easymockを起動します。
コマンドプロンプト上で下記のコマンドを実行します。
※予めXAMPPのApacheは起動しておいて下さい

# easymockディレクトリまで移動する
# ディレクトリのパス名は各自の環境によりけり
C:\Windows\System32>cd C:\xampp\htdocs\easymock

# easymockの起動
C:\{file to path}\easymock>easymock

# 以下のコメントが表示されれば成功
Server running on http://localhost:3000
Listening on port 3000 and 3001
Documentation at: http://localhost:3000/_documentation/
Logs at:          http://localhost:3000/_logs/

APIにアクセスした際、データが返ってくるか確認する

ブラウザを起動し、http://localhost:3000/userにアクセスしてみます。
ブラウザ上にuser_get.jsonの中身が表示されれば成功です。

割と簡単に出来ました。
今後、スタブを利用しなければならない場合は積極的に使ってみます。

参考サイト

• node-easymock で 簡単にWebAPIのモックサーバーを作る｜パークのソフトウエア開発者ブログ｜ICT技術（Java・Android・iPhone・C・Ruby）なら株式会社パークにお任せください
• GitHub - CyberAgent/node-easymock: A simple but powerful mock server in nodejs
• easymockなモックサーバでAPI試験 | 温室環境モニタシステムのIT工房Z
• APIのモックを簡単に作成できる「node-easymock」 - 大学生からの Web 開発
• Node EasyMock で API モックサーバを作る - mmts1007’s diary
• WebAPIに一回だけアクセスして、２回目以降はローカルモックで開発する方法 ｜ Developers.IO