ElectronとVue.js、いっぺんに入門してみた
難の前触れも無く唐突に
「Electron使ってみたい!」
「Vue.js使ってみたい!」
という気分になったので、両方まとめてサンプルアプリ作ってみました
そろそろjQuery以外にも何か出来ないとお払い箱になってしまいそうな空気なので...
もうなってるかもしれないですが...(ヽ´ω`)
出来たもの
Satoh-D/electron_vuejs2.0_sample
見たもの
- Electronでアプリケーションを作ってみよう - Qiita
- Electron入門とVue.jsでサンプルアプリ - mmyoji's diary
- Introduction - vue.js
- Migration from Vue 1.x - vue.js
- Vue.jsを使いこなす | CodeGrid
やったこと
Electronのインストール方法、Vue.jsの使い方すら知らなかった状態からここまで割りとかんたんに来れるとは...!
ElectronもVue.jsも割りととっつきやすく、あまりハマるところはなかったかなーという印象。
Vue.jsもAngularJS等に比べると学習コストが低いという言われる意味がわかった気がします。
サンプルソースを見てわからないところはとりあえずCodeGridを確認すると大体なんとかなりました。
丁寧な解説でいつも助かってます...!
ただ拝見したサンプルが全てVue1.x及びそれ以前のものだったため、2.0のルールとは合わず、怒られまくりでした。
調べてもあまり記事が見つからなかったので公式のドキュメントをみつつなんとか対応...英語難しい(ヽ´ω`)
今後やること
とりあえずはアプリが出来たので、ちょっとしたメニューバーアプリとか作ってみようかな あとはがっつりVue.jsを勉強したい気分だけど、JSのフレームワークを入れたりする案件がないからなぁ...
ししとうと茄子の焼き浸し
最近無性に野菜の焼き浸しにハマってます。
こんがり焼き色がつくまで炒めて、麺つゆにつけるだけで旨くなるのでとても楽。
野菜も近所の直売所に行けば新鮮で、安く手に入るのもとても良い。
この日はししとうが20本で100円、茄子は大ぶりのが3本で100円、ピーマンは赤と緑混合のものが15個くらいで90円と、とても安い…!
炒めてすぐも美味しいですが、冷蔵庫で一晩たったものは格別。ご飯のおかずにも、お酒の肴にもぴったりです。
次はどんなお野菜で焼き浸しを作ろうかな…!
ニトスキを使って煮込みハンバーグ
今日の夕飯は煮込みハンバーグ。
トマトソースで煮込んだハンバーグがとても好きです。
ハンバーグの焼色はニトスキを使ってます。
簡単で、綺麗に焼色が付いてくれるのでスキレットはとても良いですね。
ニトスキもだいぶ油が染みこんでいい具合になってきました。
もっともっと使い込んでいきたい...!
材料
ハンバーグ
- 合いびき肉
- 人参
- 玉ねぎ
- 卵
- パン粉
- マヨネーズ
- 塩コショウ
トマトソース
- トマト缶
- 水
- コンソメ
- ウスターソース
- 醤油
- 塩コショウ
ハンバーグを作る
ボウルに合いびき肉とみじん切りにした人参、玉ねぎを入れてこねる。ひたすらこねる。
事前に玉ねぎを炒めておくと甘みが増すそうな。
つなぎにに卵、パン粉、マヨネーズを入れて更にこねる。
塩コショウを入れて混ぜ、整形する。
ニトスキを用意し、いい具合に焼色がつくまで表面を焼きます。
煮込むので火の通り具合は気にしなくていいのは楽ですね。
トマトソースを作る
底が深い鍋にトマト缶と水、コンソメを入れひと煮立ちさせます。
火を弱めハンバーグを投入します。
ウスターソース、醤油を加え弱火で煮込んでいきます。
あとはコトコト煮込み、最後に塩コショウで味を整えて完成です。
煮込めば煮こむほど水気がなくなり、ソースは濃厚になります。
ただ、ハンバーグも固くなってしまうのでそこは注意しましょう。
お皿に盛りつけて完成です。
トマトの酸味が効いててとても美味しい...!
ごちそうさまでした。
node-easymockでスタブを作成する
現在対応している案件で、APIを使ってUIを構築するけど、APIサーバがまだ用意出来ていない... といった状況が有り、簡単なAPIサーバ(スタブ)をローカルで作成してみました。
今回、「node-easymock」を利用してみました。
思ったより簡単に出来ましたが、手順を忘れないためにメモ。
利用までの準備
node-easymockはnode.jsのモジュールとなっています。
まず、easymockを利用するために必要なものをそれぞれ準備する必要があります。
node.jsのインストール
node.jsの公式サイトから、node.jsをダウンロードし、インストールをします。
node.jsをインストールする際、同時にnpm(node.jsモジュールの管理ツール)も同時にインストールされます。
インストール完了後、コマンドプロンプトを開き以下のコマンドを実行します。
それぞれバージョンが表示されればインストールは正常に行われています。
>node -v v0.12.3 #ここに表示される文言はインストールしたバージョンによって異なります。 #だいぶ前にnode.jsを入れていたらしく、今回はそれを利用します。
>npm -v 2.9.1 #ここに表示される文言はインストールしたバージョンによって異なります。
node-easymockのインストール
node.js, npmのインストールが完了したらnode-easymockをインストールします。
インストールはコマンドプロンプト上で以下のコマンドを実行します。
>npm install -g easymock
Pythonのインストール
node-easymockにはnode-sqlite3というDBを利用します。
node-sqlite3を利用するためにはPythonが必要らしく...。
下記のサイトよりPythonをダウンロード&インストールします。
※バージョン 2.7.x をご利用下さい
※インストールフォルダはデフォルトでOKです
インストールが完了したらシステム環境変数にパスを通します。
管理者権限でコマンドんプロンプトを起動し、以下のコマンドを実行します。
>setx /m path "%path%;c:\Python27"
パスを通したらPythonが使えるようになります。
環境によっては下記のページに記載されている通りVisual Studioのインストールも必要かもしれません。
参考サイト
スタブサーバを起動する
諸々のモジュールの準備が完了したら、いよいよサーバを立ち上げてみます。
任意の場所にeasymock用のディレクトリを作成します。
今回は例として easymock というディレクトリを作成します。
# 現時点のディレクトリ構成 easymock
easymockディレクトリに移動し、コマンドプロンプトから下記のコマンドを実行します。
easymockの起動ディレクトリに再度node-easymockを配置します。
>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を起動します。
コマンドプロンプト上で下記のコマンドを実行します。
# easymockディレクトリまで移動する # ディレクトリのパス名は各自の環境によりけり >cd easymock # 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に一回だけアクセスして、2回目以降はローカルモックで開発する方法 | Developers.IO
ニトスキでペッパーランチ風 ビーフペッパーライスを作る
週末は1食は料理を作るように努めてます。
今回は「ニトスキ」でペッパーランチ風のあのご飯を作ってみました。
材料
材料は以下の通りです。
- ご飯: 好きなだけ
- 牛肉: 好きなだけ
- コーン: 好きなだけ
- 小ねぎ: 好きなだけ
- バター: 好きなだけ
- 黒胡椒: 好きなだけ
- ステーキソース: 好きなだけ
- にんにく: 好きなだけ
- サラダ油: 小さじ1
作り方
- スキレットを熱し、サラダ油を入れる
- 牛肉を軽く炒め、円形に並べる
- 中央にご飯を置く
- ご飯の上にコーンと小ねぎ、バターを乗せる
- 黒胡椒、ステーキソースをかける
- スキレットの余熱で牛肉を焼きつつ混ぜて食す
ステーキソースとバターって合うんですね…! コクが効いててとても美味しいです、ペッパーランチ行ったことないですが、今度本物を食べてみたいな…!
本物のペッパーランチはにんにくのスライスを乗せているみたいですが、今回はにんにくパウダーを利用しました。
使いやすいし楽だしこれいいですね。
反省点
スキレットは食べる直前にガッツリ熱した方が良さげ。
もっとジュージューいってるのを想像してたんですが、うまくいかなかった……。
もっと研究の余地がありますね…!
参考レシピ
ペッパーランチ風♪ガーリックビーフライス by cookmanian [クックパッド] 簡単おいしいみんなのレシピが246万品
レモンの爽やかさが心地良い、カルディの「瀬戸内レモンサワー」を飲んでみた
KALDIに立ち寄った際、この「瀬戸内レモンサワー」がとても美味しそうだったので買ってみました。
最近瀬戸内レモンを使用した製品が多い気がします。ブームなんでしょうか。
パッケージが夏っぽく爽やかでとても好きです。
裏側にレモンサワーについて書いています。
レモンをぎゅっと搾っただけの贅沢な果汁で、甘酸っぱく爽やかな口当たりに仕上げました。ちょっぴりビターな大人テイストです。
大人テイスト、気になります…!
グラスに注いだところ、レモンの香りが強く果汁の多さが伺えます。
飲んでみるとレモンの甘酸っぱさが強く、とても美味しいです。
後味はレモンの苦味がほのかにあり、とても爽やかな気分になります。これが大人テイスト…!
アルコールはそんなに感じないので、思わず飲み過ぎちゃいそうですねww
夏にぴったりなサワー、オススメです。
商品詳細
親子連れ歓喜!保育士がいるカフェ「Co.'s Cafe」
大分市森町にある「Co.'s Cafe」に行ってきました。
場所は大分東自動車学校の近くにある「ふらいる」の敷地内です。
黒くおしゃれな外観なので分かりやすいですね。
保育士さんが常駐しているカフェ
なんでも保育士さんが常駐しており、子供が遊べるキッズルームがあるそうです。
子供を遊ばせているあいだ、親同士でお茶会とか出来ていいですね。
授乳室も完備しているので、乳児を連れている方でも気兼ねなく食事ができそうです。
店内は親子連れ用の席と大人のみの席があり、それぞれ部屋が別れています。
部屋が別れているので、大人のみで訪問した際もゆっくりと寛ぐことが出来ます。
ボリュームたっぷりメニュー
メニューはこのような感じ。
すべてのランチメニューにスープとパン(おかわり自由)、ドリンクバーがつきます。
パンも自家製らしく、ふわふわで美味しいです。
食パン、フランスパン、ガーリックトースト、あんぱん、チョコパンと種類が豊富なのも嬉しいです。
正直このパンとドリンクバーだけでも何時間もいてられそうですね…!
こちらが今回注文したメインです。
シェフの気まぐれセット。
この日のおかずは豚の生姜焼きでした。
お肉が柔らかく、生姜の香りが効いててとても美味しかったです。
ご飯がとっても進む味ってヤツですね。
もう一つはワンプレートランチ。
白身魚のフライやライスコロッケ、グラタンなど色々な種類の料理が乗っていました。
どの料理も凝っていて美味しそう…!
ランチ意外にもパフェやケーキなどのデザートも充実していました。
パフェのアイスクリームやグラノーラも手作りらしく、とても気になります。
次はデザートメインで行って見ようかな…!
ごちそうさまでした。