2016-11-28

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

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

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

材料

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

作り方

鳥の皮を一口大に切り、スキレットに並べます。
今回は胸肉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

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

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

出版社/メーカー: ニトリ
メディア: ホーム&キッチン
この商品を含むブログを見る

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

作者: 塩山舞
出版社/メーカー: 三才ブックス
発売日: 2016/01/28
メディア: ムック
この商品を含むブログを見る

2016-11-26

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

JavaScript Chart.js

f:id:Satoh_D:20161125172812p:plain

現在の案件で「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

2016-11-25

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

JavaScript

現在対応している案件で、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の中身が表示されれば成功です。

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

参考サイト

2016-11-21

「山と食欲と私」読みました

買ったものマンガレビュー

f:id:Satoh_D:20161119111625j:plain

主人公の女性が単独登山をしてご飯を食べるお話。
山ガールと呼ばれるのは嫌で、本人曰く「単独登山女子」とのこと。

基本的にはこれだけの話なのです。
出て来るご飯も山頂で食べるものなのでいたってシンプル。
ただ、何故か「とても美味しそう、食べてみたい...！」と思わせてくれるマンガでした。

食事だけでなく登山の知識も随所にあり、登山初心者の方が読んでも為になるのでは、と思いました。
実際に先日山登りに行ったのですが、マンガで得た知識が発揮されましたし...ｗ

料理好きだけでなく、登山好きの方も楽しめる素敵なマンガです。
ああ山に登りに行きたい...山頂でカップラーメンを食べたい...！

山と食欲と私 1 (BUNCH COMICS)

作者: 信濃川日出雄
出版社/メーカー: 新潮社
発売日: 2016/04/09
メディア: コミック
この商品を含むブログ (3件) を見る

山と食欲と私 2 (BUNCH COMICS)

作者: 信濃川日出雄
出版社/メーカー: 新潮社
発売日: 2016/08/09
メディア: コミック
この商品を含むブログ (1件) を見る

山と食欲と私　3巻

作者: 信濃川日出雄
出版社/メーカー: 新潮社
発売日: 2016/11/09
メディア: Kindle版
この商品を含むブログを見る

今表紙を見て気づいたのですが、収録されている料理が表紙に出てるのですね。芸が細かいですね...！

2016-11-20

ニトスキで豚キムチ

ニトスキレシピ豚肉野菜食べたもの

f:id:Satoh_D:20161119111424j:plain

近所のスーパーで自家製キムチと豚肉がやすかったのでつい...！

最近、肉料理を作るときは大体スキレットを使っています。
お肉が柔らかく焼けますし、保温効果もあり寒い時期にはとても助かっています。最初のシーズニングが面倒ですが、ちゃんと手入れをすればずっと使えるのもGood.

材料

豚肉（好きなだけ）
キムチ（好きなだけ）
ししとう（好きなだけ）
卵

切って炒めるのみ

基本はそれぞれ切って炒めるのみ。
炒める順番は豚肉、ししとう、キムチの順。

ししとうは冷蔵庫にあった残り物。
キムチとは系統が違うけど辛いものだしいれちゃえ、ということでｗ

全体に火が通ったら真ん中にくぼみを作り、卵を割り入れます。
キムチの辛さが柔らかくなってとても好きです。

とても美味しくいただきました。ごちそうさま。

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

出版社/メーカー: ニトリ
メディア: ホーム&キッチン
この商品を含むブログを見る

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

作者: 塩山舞
出版社/メーカー: 三才ブックス
発売日: 2016/01/28
メディア: ムック
この商品を含むブログを見る

2016-11-19

ネット回線をBBIQに変更しました

買ったもの

大分に越してきてからネット回線は「UQ WiMAX」で頑張ってきたのですが、ついに乗り換えました。
WiMAXの何が辛いかって、3日で3GB制限があることと、そもそも電波が繋がりにくいこと。
携帯の回線を使っているということもあり、制限は仕方ないのかもしれませんが電波が繋がらないのはいただけません。
これで4,000円弱/月払うのはあまりにも馬鹿馬鹿しい。

乗り換え先はBBIQという九州ではメジャーなプロバイダです。
価格コムで調べたときに、乗り換えで49,000円分の商品券が貰えるとのことでつい...！

10月末に申し込みをして、1週間後にプロバイダからアカウントのお知らせが届きました。
また1週間後に工事日の調整を行い、11月17日に工事完了。
大体3週弱で諸々の手続きが終わりました。案内では1〜2ヶ月かかると書いてあったので拍子抜け。

今回はひかり電話プラン無しの通信のみだったため、ルーターが付いていませんでした。
これは完全に見落としており、初日は「回線が繋がったが、ネットが使えない」という残念な感じに...。

慌ててAmazonで「TP-LINK 無線LAN ルーター」を購入。

TP-LINK 無線LANルーター 11ac/n/a/b/g 433Mbps+300Mbps USBポート Archer C20

出版社/メーカー: TP-LINK
発売日: 2016/04/18
メディア: Personal Computers
この商品を含むブログを見る

買ってから翌日に届くの凄い。設定も楽で、11acにも対応しているの凄い。これで3,200円は安いのでは...凄い。

当然ではありますが、WiMAXよりも早くて快適。
月額料金はWiMAXよりも少し張りますが、制限を気にしないでいい辺りとても良い。

これでまたスプラトゥーンをプレイすることが出来る。
もう1年近くまともにプレイしていないから大変なことになっているだろうなぁ...(ヽ´ω`)

2016-10-29

ElectronとVue.js、いっぺんに入門してみた

JavaScript Electron Vue.js

難の前触れも無く唐突に
「Electron使ってみたい！」
「Vue.js使ってみたい！」
という気分になったので、両方まとめてサンプルアプリ作ってみました

そろそろjQuery以外にも何か出来ないとお払い箱になってしまいそうな空気なので...
もうなってるかもしれないですが...(ヽ´ω`)

出来たもの

Satoh-D/electron_vuejs2.0_sample

見たもの

やったこと

Electronのインストール方法、Vue.jsの使い方すら知らなかった状態からここまで割りとかんたんに来れるとは...！
ElectronもVue.jsも割りととっつきやすく、あまりハマるところはなかったかなーという印象。 Vue.jsもAngularJS等に比べると学習コストが低いという言われる意味がわかった気がします。

サンプルソースを見てわからないところはとりあえずCodeGridを確認すると大体なんとかなりました。
丁寧な解説でいつも助かってます...！

ただ拝見したサンプルが全てVue1.x及びそれ以前のものだったため、2.0のルールとは合わず、怒られまくりでした。
調べてもあまり記事が見つからなかったので公式のドキュメントをみつつなんとか対応...英語難しい(ヽ´ω`)

今後やること

とりあえずはアプリが出来たので、ちょっとしたメニューバーアプリとか作ってみようかなあとはがっつりVue.jsを勉強したい気分だけど、JSのフレームワークを入れたりする案件がないからなぁ...

@Satoh_D no blog

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

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

材料

作り方

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

前提

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

Browserifyの設定を行う

HTMLファイルを用意する

JavaScriptファイルを作成する

Browserifyでビルドしてみる

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

さいごに

参考サイト

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

利用環境

利用までの準備

node.jsのインストール

node-easymockのインストール

Pythonのインストール

参考サイト

スタブサーバを起動する

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

参考サイト

「山と食欲と私」読みました

ニトスキで豚キムチ

材料

切って炒めるのみ

ネット回線をBBIQに変更しました

ElectronとVue.js、いっぺんに入門してみた

出来たもの

見たもの

やったこと

今後やること