読者です 読者をやめる 読者になる 読者になる

@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

手羽先の甘辛煮

作ったもの 食べたもの 料理 和食 鶏肉 レシピ

f:id:Satoh_D:20161208233434j:plain

手羽先の甘辛煮を作ってみました。
お酢が入っているので少しさっぱりしていて食べやすいです。

材料

  • 手羽先
  • 砂糖
  • 醤油
  • 味醂
  • お酒
  • お酢
  • 胡麻

基本目分量なので、量は書き(け)ません……
醤油は参考ページの通り大さじ3。
砂糖は醤油より少し少なめ、甘めがいいなら醤油と同量でもよいかも。

手順

  1. 手羽先をフライパンに並べ、弱火でじっくり焼きます。
    程よく焼き色がついたらひっくり返し、同様に焼き色を付けていきます。
  2. 手羽先を焼いている間に胡麻意外の調味料を混ぜておきます。
  3. 両面に焼き色がついたら、2で作っておいた合わせ調味料を流し入れます。
    とろみがつくまでしばらく炒めながら、手羽先に絡めて行きます。
  4. 良い具合にたれを煮詰めたら胡麻を振りかけて完成。

ささっと出来て美味い。
手羽先は揚げるイメージしか無かったですが、焼くのも香ばしくなっていいですね。 作るのにも負けるとも劣らない早さで食べきっちゃいました。ごちそうさまでした。

参考ページ

フライパンでカンタン!手羽先の甘辛煮☆ by ☆DJサリー☆ [クックパッド] 簡単おいしいみんなのレシピが254万品

長芋の浅漬け

作ったもの レシピ 和食

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

材料

  • 長芋
  • 白だし
  • 山葵

作り方

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

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

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

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

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

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

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

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を閉じちゃってもいいかな...とか。

参考サイト

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

Chart.js JavaScript

f:id:Satoh_D:20161125172812p:plain

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
ちゃんとドキュメントは見るべきでしたね...反省。

今回参考にしたサイト

関連記事

satoh-d.hatenablog.com

アップルパイ

レシピ スイーツ 作ったもの

f:id:Satoh_D:20161124074956j:plain

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

材料

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

作り方

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

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

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

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

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

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

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

レシピ ニトスキ 作ったもの

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

材料

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

作り方

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

f:id:Satoh_D:20161127200153j:plain

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

f:id:Satoh_D:20161127200154j:plain

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

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

f:id:Satoh_D:20161127200219j:plain

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

f:id:Satoh_D:20161127200424j:plain

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

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

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

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

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

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

JavaScript Chart.js

f:id:Satoh_D:20161125172812p:plain

現在の案件で「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も用意されています。

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

Browserifyの設定を行う

package.json内にある"scripts": {}にBrowserifyでビルド用コマンドを定義しておく
タスク名は任意の文言でおk
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');
// でもおk
// ※ 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を使っておけば間違いないような気がします

参考サイト