前回、イノシシ解体したときにできた、この部分。

アバラの部分です。
これを、ヨシダソースで食べようかと思ったわけです。

ソースに漬けて

焼く。


味は、あんまりおいしくなかった。
なんかいろいろと残念な焼豚って感じで。
そもそも、可食部が少ないので、ボリューム不足と感じたのと、表面の膜を取らなかったので、歯ごたえがぐにょぐにょしていた。
まぁ、こういうときもあるさ。
どんどんいろんな料理を試してみよう。

前回の様子はこちら。
前回の様子から、電力不足ではないか、と推測して、電源ユニットを購入しました。
玄人志向のATX電源ユニット750W。6200円。
電源容量が400Wから約2倍になりました。
マザーとCPUの電源以外はリバーシブルになっています。
必要ないところは取り外すことができるんですね。
設置。
各線を接続しました。
元々の電源ケーブルが長かったので、延長ケーブルは取り外しました。
メモリも4枚挿してます。
では動作確認。
・・・何も表示されず。
んー、せっかくメモリ2セット買ったのに、もったいない。
いろいろググってみたりして、BIOSの設定(メモリ仕様からタイミングの設定値を調整してみたり、動作周波数を落としてみたり)とかも弄ってみたけど、動く気配無し。
2枚なら動くんですけどね。
こうなったら、4枚挿しは諦めるしかあるまい。
16GBのメモリを2枚購入しましょうかw
32GBは遠いなぁ。
とにもかくにも、電源容量が増えたので、今後も拡張しやすくなったと思います。
現在の構成。
パーツ | 型番 | 価格 |
CPU | Ryzen 5 3400G | 20680 |
マザーボード | PRIME A320M-A | 7544 |
メモリ | HX426C16FW2K2/16 | 6980 |
電源 | KRPW-L5-750W/80+ | 6256 |
ケース | CC-9011086-WW | 5099 |
SSD | GH-SSDR2SA120 | 2178 |
M.2 | SSDSCKKW480H6X1 | 5980 |
グラフィックボード | SAPPHIRE PULSE RADEON RX 570 8G GDDR5 | 14800 |
DVDドライブ | IHAS324-17/A | 2020 |
OS | Windows 10 Pro | 3259 |
電源ユニットネジ | 200 | |
合計 | 74998 |
2台目のディスプレイを買おうかどうか、悩んでました。
これがオイラのホームポジションの風景。
セカンドディスプレイを設置すると、テレビが見えなくなるのです。
そこで、ふと思いました。
このiPad Proをサブディスプレイにすれば良いのでは?
調べてみると、このアプリを使用すると、iPadをサブディスプレイ化できるようです。
有料アプリで1220円しますが、ディスプレイをもう一台買うに比べれば安い物です。
Windows側にも公式サイトからアプリをダウンロードしてインストールします。
アプリのインストールが終わったら、USBで接続してiPad側のアプリを立ち上げればOK。
自動的にiPadを認識してセカンドディスプレイが現れます。
完全にサブディスプレイです。
しかも、iPad Proって2Kぐらいの解像度にできるんですよ。
文字が小さくて読めないよ。
さらに課金すれば無線LANでサブディスプレイ化できちゃいます。
ワイヤレスにすれば、充電しながらの使用も可能です。
まぁ、有線でも十分ですけどね。
いやでもこれホント便利。
1220円の投資なんて安い物です。
本日の成果。
ヒヨコが転がってくるのと、球をぶつけて飛ばす、というのができるようになりました。
前回までの状況はこちら
最新ソースはこちら(gitHub)
https://github.com/takishita2nd/hotel-mng
この一覧の行をクリックすると、モーダルダイアログを出して、予約詳細を表示するように作り変えます。
必要な情報はすでに予約一覧で取得しているので、それをダイアログに表示させる、という手法で行きます。
<div id="overlay" v-show="showContent" @click="closeModal">
<div id="content">
<table class="edit">
<tbody>
<tr>
<th>名前</th>
<td>{{ contents.name }}</td>
</tr>
<tr>
<th>住所</th>
<td>{{ contents.address }}</td>
</tr>
<tr>
<th>電話番号</th>
<td>{{ contents.phone }}</td>
</tr>
<tr>
<th>人数</th>
<td>{{ contents.num }}</td>
</tr>
<tr>
<th>宿泊部屋</th>
<td>{{ contents.room }}</td>
</tr>
<tr>
<th>宿泊日数</th>
<td>{{ contents.days }}</td>
</tr>
<tr>
<th>宿泊日</th>
<td>{{ contents.start_day }}</td>
</tr>
<tr>
<th>チェックアウト</th>
<td>{{ contents.checkout }}</td>
</tr>
</tbody>
</table>
<p><button @click="closeModal">close</button></p>
</div>
</div>
#overlay {
z-index:1;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
#content{
z-index:2;
width:50%;
padding: 1em;
background:#fff;
}
}
ダイアログとして表示する部分です。
overlayというのはダイアログのバックに表示するグレー表示のことです。
横と縦にでっかいdiv要素をtop0,left0に表示させる、というイメージですね。
その中にさらにdivを追加して詳細を表示を表示させます。
data() {
return {
// 中略
showContent: false,
contents: {
name: "",
address: "",
phone: "",
num: 0,
room: "",
days: 0,
start_day: "",
checkout: "",
}
contentsは実際に予約詳細のダイアログに表示するデータです。
showContentはoverlayのv-showとバインドさせて、ダイアログの表示・非表示を切り替えるフラグです。
openModal: function(id){
for(var i = 0; i< this.registers.length; i++){
if(this.registers[i].id == id){
this.contents.name = this.registers[i].name;
this.contents.address = this.registers[i].address;
this.contents.phone = this.registers[i].phone;
this.contents.num = this.registers[i].num;
this.contents.room = this.registers[i].room;
this.contents.days = this.registers[i].days;
this.contents.start_day = this.registers[i].start_day;
this.contents.checkout = this.registers[i].checkout;
break;
}
}
this.showContent = true
},
closeModal: function(){
this.showContent = false
}
ダイアログ表示処理とクローズ処理です。
やっていることは、基本的にデータを設定して、フラグをON、閉じるときはフラグをOFFにする、というだけです。
こんな感じに仕上がります。
次回はここから編集・削除を行いたいと思います。
今回も新情報一杯でしたね。
甲賀忍法帖
バジリスク 〜甲賀忍法帖〜 のOPテーマで2005年の曲でした。
予想、レベル25。
予想、レベル27。
いやー、伝号ゲーム、見ていてヒヤヒヤしました。
GO!!!
『NARUTO -ナルト-』第4期オープニングテーマ で、2004年の楽曲です。
DJプレイの楽曲で必ず流れる名曲ですね。
予想レベル26
花ハ踊レヤいろはにほ
ハナヤマタのOPで、2014年の楽曲です。
予想レベル24
創聖のアクエリオン
創聖のアクエリオンのOPで、2005年の楽曲です。
公式のMVがYouTube無かった・・・
予想レベル25
他にも年末年始や24時間バンドリTVと連動してキャンペーンを開催する予定とのことですので、詳細はアプリ内のお知らせをご確認くださいまし。
前回は
見事にPCが動かない、メモリを新しい物に交換しても動かないという結果でした。
と言うことで、
買ってきました。
型番が、HX426C16FB2K2/16。今使用しているやるの完全に色違いの物です。
ちなみに、前回買って、動かなかったメモリの型番は HX426C16FB3K2/16でした。
2と3で何が違うんですかね?
知っている人教えて欲しい。
開封。
装着。
そして電源ON。
・・・画面に何も表示されませんでした。
まじか。
念のため、新しい方のメモリのみを挿して動かしてみました。
・・・動いた。
新しい方でも動いたと言うことはメモリ自体に不具合はないようです。
となると、電源の容量が足りない?
今使用しているヤツが、400Wの電源です。(低価格で購入しました。)
まぁ、少ない方です(安いので)。
確か、昨日ツクモに行ったら6000円ぐらいで650Wの電源あったような気がする。
それに交換してみよう。
ちなみに、動かないメモリはツクモで4200円で買い取って貰いました。
やっぱりメモリは一番相性云々が出てくるところなので、店頭で相性保証付けて貰うのが一番いいね。
前回までの状況はこちら
最新ソースはこちら(gitHub)
https://github.com/takishita2nd/hotel-mng
さて、前回はフィルタの部分を作りましたが、今回は実際に予約一覧を取得して、表示させます。
まずは、予約一覧を取得するAPIを作ります。
ルーティング
Route::post('/api/registers', 'ApiController@registers');
コントローラー
public function registers(Request $request)
{
return response()->json(['registerLists' => $this->registerManagement->getListByMonth(
$request->year,
$request->month,
$request->room
)]);
}
コントローラで受け取るのは、前回作ったフィルタのパラメータをPOSTで受け取る、というやり方です。
そして、結果をJsonで返すという感じになります。
ではVueの実装です。
<template>
<div>
<table>
<tbody>
<tr>
<td>
<select v-model="selectYear" @click="getRegisters">
<option v-for="year in years" v-bind:value="year.value">{{ year.text }}</option>
</select>
</td>
<td>年</td>
<td>
<select v-model="selectMonth" @click="getRegisters">
<option v-for="month in months" v-bind:value="month.value">{{ month.text }}</option>
</select>
</td>
<td>月</td>
<select v-model="selectRoom" @click="getRegisters">
<option v-for="room in rooms" v-bind:value="room.id">{{ room.name }}</option>
</select>
</td>
</tr>
</tbody>
</table>
<table class="management">
<tbody>
<tr>
<th class="name">名前</th>
<th class="date">宿泊日</th>
<th class="checkout">チェックアウト</th>
</tr>
<tr v-for="register in registers">
<td class="name">{{ register.name }}</td>
<td class="date">{{ register.start_day }}</td>
<td class="checkout">{{ register.checkout }}</td>
</tr>
</tbody>
</table>
</div>
</template>
まず、フィルタの方は、コントロールを選択すると、予約一覧を取得する処理が走るようにしています。@click=”getRegisters”の部分です。
では、実際の処理。
<script>
export default {
data() {
return {
selectYear: 2019,
years:[
{text:'2019',value:2019},
{text:'2020',value:2020},
],
selectMonth: 1,
months:[
{text:'1',value:1},
{text:'2',value:2},
{text:'3',value:3},
{text:'4',value:4},
{text:'5',value:5},
{text:'6',value:6},
{text:'7',value:7},
{text:'8',value:8},
{text:'9',value:9},
{text:'10',value:10},
{text:'11',value:11},
{text:'12',value:12},
],
selectRoom: 0,
rooms: [],
result: [],
param: {
year: 2019,
month: 1,
room: 1
},
registers: []
}
},
created: function() {
this.getRooms();
},
methods: {
getRooms: function() {
var self = this;
axios.post('/api/rooms').then(function(response){
response.data.roomLists.forEach(element => {
self.rooms.push({id:element.id, name:element.name});
});
}).catch(function(error){
console.log("失敗しました");
});
},
getRegisters: function() {
var self = this;
this.param.year = this.selectYear;
this.param.month = this.selectMonth;
this.param.room = this.selectRoom;
axios.post('/api/registers', this.param).then(function(response){
self.registers = [];
response.data.registerLists.forEach(element => {
self.registers.push(
{
id:element.id,
name:element.name,
start_day:element.start_day,
checkout:element.checkout
}
);
});
}).catch(function(error){
console.log("失敗しました");
});
}
}
}
</script>
getRegisters()が呼ばれると、フィルタの条件を取得し、POSTパラメータに設定して、POSTリクエストを投げます。
その結果をregistersに設定して、その結果をテンプレート側のtrタグのv-forでリスト表示させていく、という動きになります。
リンクを作って編集・削除もやりたかっかけど、なんかうまく行かないので、Ajaxゴリゴリの方法に作り変えます。
最新ソースはこちら。
https://github.com/takishita2nd/hotel-mng
この画面を見て、思ったのは、
すげぇ窮屈だな、と。
この一覧画面に表示するのは、簡単な情報だけにして、それ以外の情報は、詳細画面へのリンクをクリックすることで表示させよう、と思ったのです。
やはり避けて通れない、Vue.jsの実装。
Laravelプログラマーの宿命。
まずは、部屋一覧を取得するWebAPIを実装します。
まずはルーティング。
Route::post('/api/rooms', 'ApiController@rooms');
コントローラー。
use Illuminate\Http\Request;
use App\Repository\RoomRepository;
class ApiController extends Controller
{
public function __construct()
{
$this->middleware('auth');
$this->room = new RoomRepository();
}
public function rooms(Request $request)
{
return response()->json(['roomLists' => $this->room->getList()]);
}
}
リポジトリは既存のものを使います。
違うのは、返信するデータはJsonであること。
Laravelでは一発でJsonに変換できるんですね。便利。
Viewの実装。
<detail-component></detail-component>
とりえあず、テンプレートの実態はVue.js側に書くので、ここではVueのテンプレートを配置するタグを書きます。
そして、Vueに追加したコンポーネントを有効化します。
Vue.component('detail-component', require('./components/DetailComponent.vue'));
resource/assets/js/app.jsに追加します。
こうすることで、npm run devで追加したコンポーネントもビルドに含めてくれます。
さぁ、ここからが本番だ。
まずはテンプレートの部分
<template>
<div class="details">
<table>
<tr>
<td>
<select v-model="selectYear">
<option v-for="year in years" v-bind:value="year.value">{{ year.text }}</option>
</select>
</td>
<td>年</td>
<td>
<select v-model="selectMonth">
<option v-for="month in months" v-bind:value="month.value">{{ month.text }}</option>
</select>
</td>
<td>月</td>
<select v-model="selectRoom">
<option v-for="room in rooms" v-bind:value="room.id">{{ room.name }}</option>
</select>
</td>
</tr>
</table>
</div>
</template>
とりあえず、フィルタを行う年月と部屋を表示する実装にしています。
いずれ、予約一覧もこの中に入れます。
まだ途中なので。
<script>
export default {
data() {
return {
selectYear: 2019,
years:[
{text:'2019',value:2019},
{text:'2020',value:2020},
],
selectMonth: 1,
months:[
{text:'1',value:1},
{text:'2',value:2},
{text:'3',value:3},
{text:'4',value:4},
{text:'5',value:5},
{text:'6',value:6},
{text:'7',value:7},
{text:'8',value:8},
{text:'9',value:9},
{text:'10',value:10},
{text:'11',value:11},
{text:'12',value:12},
],
selectRoom: 0,
rooms: [],
result: [],
}
},
created: function() {
this.getRooms();
},
methods: {
getRooms: function() {
var self = this;
axios.post('/api/rooms').then(function(response){
response.data.roomLists.forEach(element => {
console.log(element.name)
self.rooms.push({id:element.id, name:element.name});
});
}).catch(function(error){
console.log("失敗しました");
});
}
}
}
</script>
年月はベタ書きです。
リストデータを定義して、v-forでoptionタグに展開する仕組み、v-modelで選択した値をバインドさせています。
この画面が読み込まれたら、axiosを使ってAjaxでデータの取得を行います。
axiosはデフォルトで組み込まれているみたい。Ajaxを行うためのライブラリです。
POSTで指定したURLに送信し、正常に受信できればthenの処理に、何かしらエラーが発生した場合はcatchの処理に移ります。
thisをselfに設定しているのは、thenやcatchの中ではthis=Vueではないので、selfにVueを退避させて置かないと、then/catchの中でVueのデータにアクセスできないためです。
で、thenの中で、レスポンスからデータを取得して、リスト化。
そのリストをテンプレート側で参照してoptionタグを作成します。
下のフィルタが今回Vueで表示させたものです。
上の部分はあとで消します。
これです。
札幌のいろんな家庭に配布されているらしい。
ちなみに、一言言っておくと、チラシに5Gと書かれていますが、5Gのサービスインは2020年以降なので、まだ5Gは使用できません。
このデバイス、どこかで見たなーと思ったら、これでした。
UQ WiMAXが提供しているWiMAX 2+を使用した無線WiFiルータですね。
この業者さんはUQ WiMAXの代理店さんなのだろうか?
WiMAX 2+ は大部分の都市部で使用可能で、もちろん札幌市も圏内に入ってます。
※しかし、念のため公式サイトで圏内チェックすることをオススメします。
https://www.uqwimax.jp/wimax/area/
で、このデバイスも比較的新しい物で、端末30台に接続できる他に有線LANのポートも2つ付いています。
物としては意外と悪くない。
むしろ、建築物の都合上光回線が使えない家庭向けのものですね。
うーん、実際に使ってみて比較するというのも面白そうだけど。
お金がもったいない。
公営住宅に引っ越すとしたら選択肢としてはアリですね。