つくばぐらし

本広告は、一定期間更新の無いブログにのみ表示されます。
ブログ更新が行われると本広告は非表示となります。

  

毎日仕事に行き、子供の保育園や習い事などの送り迎えをしていると、まともに料理を作れないので、
週単位で献立を考えて、調理を効率的にしたいと思います。

毎日の献立 - つくばぐらし

に買い物（あるもの）リストと週の献立を考えて行きたいと思います。

10年以上台所に立っているはずなのですが、いまだに本を見ながら料理を作っているので、
レシピをここにまとめて、すぐ探せるようになるといいのですが。。。
  

地震の余震が続いています。

置き物はいくつか割れてたり、引き出しはあちこち開いていましたが、比較的被害はすくなかったです。
でも、２つある水槽の水がかなりこぼれてしまい、床のかなりの部分が水浸しになってしまいました。

小学校は、緊急連絡網も電話が通じず、迎えに行っていいのかどうかわからず庭に出ていたら、
近所の人が、「お迎えに行くように」と教えてくれました。
子供たちは上履きや靴下のままグランドに出て、お迎えを待っていました。

私と1番下の子は、公園の近くを散歩していて、地面が船のように長い間ゆれて、本当にこわかったです。
でも、たぶん家にいたらもっと怖かった。。。

  

クロッカスがさきました。
春が来た感じです。


ビオラもさきました。  

角丸のボーダーをCSSのみで表示する。

border-radius: 6px; /* CSS3 */
-moz-border-radius: 6px; /* Firefox */
-webkit-border-radius: 6px; /* Safari,Chrome */
border: 1px solid #5BB43B;

角丸の半径を指定し、borderで形状を指定。
上のセットで、IE以外対応。  

今日は保育園のお弁当の日。
またキャラ弁を頼まれて、今日はトトロです。
う～ん。。。




トトロに手がかかり、おかずは昨日の残りの煮物だけでごめんね。  

jqueryは便利ですが、今一つ使い方がピンと来ていないので覚書です。

<div id="jobPickUpHome" class="entryFrame">
<div class="entryTop">-</div>
<div class="entryBody">
<div class="jobHome">
<div class="entryTitle">
<h3>テスト1</h3>
</div>
<dl>
<dt>テストタイトル1</dt>
<dd>
テスト1の内容
</dd>
</dl>
</div>
<div class="jobHome jobHomeRight">
<div class="entryTitle">
<h3>テスト2</h3>
</div>
<dl>
<dt>テストタイトル2</dt>
<dd>
テスト2の内容
</dd>
</dl>
</div>
</div>
<div class="entryBody">
<div class="jobHome">
<div class="entryTitle">
<h3>テスト3</h3>
</div>
<dl>
<dt>テストタイトル3</dt>
<dd>
テスト3の内容
</dd>
</dl>
</div>
<div class="jobHome jobHomeRight">
<div class="entryTitle">
<h3>テスト4</h3>
</div>
<dl>
<dt>テストタイトル4</dt>
<dd>
テスト4の内容
</dd>
</dl>
</div>
</div>
<div class="entryBody">
<div class="jobHome">
<div class="entryTitle">
<h3>テスト5</h3>
</div>
<dl>
<dt>テストタイトル5</dt>
<dd>
テスト5の内容
</dd>
</dl>
</div>
<div class="jobHome jobHomeRight">
<div class="entryTitle">
<h3>テスト6</h3>
</div>
<dl>
<dt>テストタイトル6</dt>
<dd>
テスト6の内容
</dd>
</dl>
</div>
</div>
<div class="entryBottom">-</div>
</div>

というhtmlをシャッフルして表示する場合を考えます。

jquery.shuffle.jsに以下を追加します。
------------------------------------------
$(document).ready(function(){
$('div.jobHome:odd').removeClass('jobHomeRight');
$("div.jobHome").unwrap();
$("div.jobHome").wrapAll('<div id=\"jobPickupShuffle\"></div>');

// ピックアップをシャッフル
$('#jobPickupShuffle').shuffle();

var classnumber = '';
$("div.jobHome").each(function(i){
classnumber = Math.floor(i/2);
$(this).addClass("class" + classnumber);
});

for(i = 0; i < classnumber+1; i++){
$("div.class" + i).wrapAll('<div class=\"entryBody\">');
$("div.jobHome").removeClass("class" + i);
};

$('div.jobHome:odd').addClass('jobHomeRight');
});
------------------------------------------

【解説】
このソースは

#jobPickUpHome
div.entryTop
div.entryBody
div.jobHome
div.jobHome jobHomeRight  

明日はバレンタインデー。
うちの家族は私以外はみな男なので、チョコレートを作ってみました。



たぶん今日中に食べてしまう気がします。

あまりに簡単なので作ったともいえませんが…

【材料】
板チョコ：　1枚
マシュマロ：　1袋
バター：　60ｇ
コーンフレーク：　100ｇ

【作り方】
１．ボールにバター（溶ける程度に切って）、板チョコ（溶けるように割って）、マシュマロを入れ、レンジで2分加熱。
２．マシュマロがすごく膨れますが、大丈夫。そこにコーンフレークを入れ、白い部分がなくなるくらいまで混ぜる。
３．クッキングシートの上に広げ、型などでぬくか適当な大きさに切る。
４．冷蔵庫で固まるまで冷やす（急ぐ時は冷凍庫で。15分くらいでＯＫ）。  

MTに付属のエディタはあまり使い勝手がよくないので、いつもxyzzyを開いてMTのテキストエリアをコピー、xyzzyにペーストしてから編集、またそれをコピー、MTにペースト、という作業をしていました。
（つくばちゃんねるブログも同じですが…）

でも、その作業もどうにかならないかな～、と思っていたところこんなものを見つけました。

Edit with Emacs

MTやつくばちゃんねるブログを書くときは、だいたいChromeで書いていたのでrubyとEdit with Emacsを使っていつも使っているxyzzyを使えるようにしました。

詳しい設定のやり方などはこちらを参照。

テキストエリアをダブルクリックすると、xyzzyが起動します。
htmlのソースを扱いたいときは
M-x html+-mode
とすると、C-,とC-.だけでほとんどタグを打つこともなくサクサクとhtmlが書けます。


  

ある複数ファイルの文字列を置換したいとき、一行なら通常の置換コマンドでできるときが多いのですが、複数行にわたる文を複数行の文字列で置換したい場合、xyzzyで「エスケープシーケンスを理解」を使うとうまくできます。
さらに、元の文章は同じものだけど、タブの数など違う場合には「正規表現」を使うとうまくできます。

たとえば、

　　　<p class="test">
　　　今日は、
　　　お天気が
　　　いいです。
　　　</p>

という文章を

　　　<p class="test">
　　　明日は、
　　　お天気が
　　　悪いです。
　　　</p>

と変更したいとします。

ファイルに含まれる他の文字列にもよりますが、

まず、改行やタブをエスケープシーケンスで置き換えます。

<p class="test">\n\t今日は、\n\tお天気が\n\tいいです。\n\t</p>

xyzzyのメニュー→検索→Gresregで

検索：<p class="test">\n\t今日は、\n\tお天気が\n\tいいです。\n\t</p>
置換：<p class="test">\n\t明日は、\n\tお天気が\n\t悪いです。\n\t</p>
ファイル名：*
「エスケープシーケンスを理解しろ」にチェック

とします。

うまくいきましたか？

ここで、ファイル名をあらかじめいくつか指定したいときは、

test1.txt; test2.txt; *.html

のようにセミコロンで区切って記述します。また、拡張子だけ指定したいときは、ファイル名にアスタリスクを指定して、拡張子を記述します。

次に、複数ファイルで、内容は同じだけどタブの数など違う場合、正規表現を使います。

　　　<p class="test">\n.*\n.*お天気が\n.*\n.*</p>

とすると、タブの数には関係なく

　　　<p class="test">
　　　今日は、
　　　お天気が
　　　いいです。
　　　</p>

の文章を検索してくれるので、Gresregで

「正規表現」
「エスケープシーケンスを理解しろ」

にチェックを入れて置換します。

  

今日はまったこと(覚え)。



一番下までスクロールすると、bodyに指定してある左のバーが10ピクセルくらい上できれてしまっています。
特にマージンなどもつけていないのに、なぜこの余白ができるのかわかりません。


構造は
<html>
<head>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen,print" />
<title>test</title>
</head>
<body>
<div id="header">
ヘッダー
</div>
<div id="contentsContainer" class="clearfix">
<div id="mainColumn">
メインカラム
</div>
<div id="sideColumn">
サイドカラム
</div>
</div>
</body>
</html>

#mainColumn に
height: 1000px;
などを指定して、スクロールが必要な状態にしておきます。

#contentsContainerにoverflow:hidden;を設定すると、下まで伸びてきちんと表示できました。
でも、なぜここでoverflow: hidden;が必要なのか、いまいちわからない。。。
  

イーアスのカスミに安売りで売っていたのでついつい買ってしまいました。

このチョコレートを作っているのは「リスカ」という会社で、私は大学生の時に、ここの工場でアルバイトをしていたのです。
なつかしい～。

この工場の近くには「日本一なが〜いチョコ」の看板があり、この看板を目印に工場に出かけて行ったのを思い出します。

アルバイトが終わると、なぜかいつも菓子パンをもらって帰ることができて、ちょっとうれしかったです。

  

今日は家で仕事をしていたのですが、だんだん子供たち3人も退屈してきてけんかになってきたので、お昼ごはんをつくってもらいました。

ホットケーキ&クレープです。

1時間くらい奮闘した後の完成品です！
頑張りました。
いつもありがとう！


ホットケーキ


クレープ  

毎年クリスマスが近づくと作るシュトーレン。

シュトーレンはドイツの伝統的なお菓子です。

いろいろレシピはあるようですが、今年はドイツに住んでいたお友達が現地で教わったというレシピで作ってみました。

ラム酒に漬けこんだドライフルーツと刻みナッツは、去年から漬けこんで準備していたものです。
今年もシュトーレンづくりが終わったら、来年用の準備をします。

ちなみにラム酒やナッツ、ドライフルーツなどは、クーロンヌで少量でも分けてもらえるのでとても助かります。



本当は、クリスマスの1ヶ月くらい前に作って、クリスマスまで少しずつ食べるものだそうです。

だんだん味がなじんでおいしくなっていくものらしいのですが、いつもだいたい作ってすぐに食べてしまいます。

今年のできはどうかな？  

inline要素で背景画像があり、途中改行されるときに背景画像が正しくでないときの対策。

inline要素では、文字の区切りで途中改行されるが、電話番号など、途中改行してほしくない場合、その要素を途中改行されないブロックとして扱えるようにする。

例：
＜ul＞
　＜li＞ああああああああ＜/li＞
　＜li＞***-****-****＜/li＞
＜ul＞

これを、横に並べて表示する。

CSS:
li {
display: inline;
}

横幅が十分にある場合、

○ああああああああ ○***-****-****

のように表示される。背景画像も表示される。
（※○は背景画像。ここではリストマークとして使用）

が、横幅が決まっている場合、

○ああああああああ ***-
****-****

のように改行されてしまう。背景画像は、改行されたブロックについては表示されない。

ここで、zoom: 1を加えて

CSS:
li {
display: inline;
zoom: 1;
}

のように記述すると、途中改行されず、その要素は次の行に表示できる。
背景についても所望の位置に表示される。

○ああああああああ
○***-****-****

詳細については、こちらを参照。

なお、li要素を次の行でなく、inlineのままで表示したときに背景を表示する方法はこちらを参照。
  

三男の服をリメイクしてみました。



無地の茶色のトレーナー生地があったので、半袖トレーナーを作り、そのままでは地味なので少し小さくなった服を使って袖と襟ぐりに使ってみました。ワッペンも付けてみました。

元の服はこれ。



3番目になると、ほとんど洋服を買いに行くこともなくなり、だいたいお兄ちゃんかお友達からのお下がりですが、こうやってリメイクすると楽しいかも。お古だから切ったりしても気がひけないし。


  

xyzzyでプログラムを編集するときに、決まった作業を繰り返すことがよくあります。

そういうときは、キーボードマクロを定義します。

簡単なものならその都度キーボードマクロをさっと定義して、C-x e　で実行すればいいのですが、作業的に頻繁に使うものならファンクションにして、.xyzzyに入れておき、いつでも使えるようにしておくと便利です。

たとえば、以前紹介した携帯用の絵文字変換の記事のように、imodeからau,softbankへの絵文字変換をファンクションとして定義してあるとき、作業手順としては、

１．imodo用のファイルを開く。
２．au用に１をコピーする。
３．softbank用に１をコピーする。
４．２を開き、 M-x au-replace を実行し、au用に絵文字変換する。
５．４を保存する。
６．３を開き、 M-x softbank-replace を実行し、softbank用に絵文字変換する。
７．６を保存する。

のようになります。
でも、たくさんのファイルを扱うときにいちいちこの手順を踏むのも面倒なので、キーボードマクロを定義します。

まず、imode用のファイルを開いておく。
C-x ( ←　キーボードマクロの定義
C-x C-w au.html ←　imode用のファイルをau.htmlという名前のファイルにコピー
C-x C-w softbank.html ←　imode用のファイルをsoftbank.htmlという名前のファイルにコピー
C-x C-f au.html ←　au.htmlを開く
M-< ←　念のため、ファイルの先頭に移動
M-x au-replace ←　imodeの絵文字をauの絵文字に変換
C-x C-s ←　保存
C-x C-f softbank.html ←　softbank.htmlを開く
M-< ←　念のため、ファイルの先頭に移動
M-x softbank-replace ←　imodeの絵文字をsoftbankの絵文字に変換
C-x C-s ←　保存
C-x C-f mobile.html ←　imode用のファイルを表示
C-x ) ←　キーボードマクロの終了

まずここまでで、別のファイルでも　C-x e　としてこのキーボードマクロを実行するだけで、簡単にimodeの絵文字をauやsoftbankの絵文字に変換してくれます。

でも、これだけでは、エディタを閉じたら使えなくなってしまいます。
そこで、ファンクションにして、.xyzzyに書いておきます。

上のようにキーボードマクロを定義したら、

M-x name-last-kbd-macro mymacro ←　キーボードマクロに名前を付ける。mymacroのところは適当に名前をつける
C-x C-f ~/.xyzzy ←　.xyzzy を読み込み
M-x insert-kbd-macro mymacro ←　mymacroをファンクションとして書きだす。

これで、ファンクションとして定義されました。こちらを参考。

M-x mymacro

で使えます。
次にxyzzyを開いたときから有効になります。

今のウインドウで有効にしたいときは、

M-x load-file ~/.xyzzy

としてやると、いまのウインドウでも有効になります。
  

今日、はまったこと。

携帯用のサイトを作成して、imode Simulatorで確認をしていたら、アンカーが効かない。

htmlに

<div id="page1">
あいうえお
</div>

のように書いてあると、通常は

<a href=#page1>

で

「あいうえお」

の位置に移動ができますが、imodeでは移動しない。

どうもドコモ端末のXHTMLでは仕様が違うようです。

こういうときは

<a name="page1" id="page1">
あいうえお
</a>

と書けばimodeでも動きます。  

週末に近づくと、冷蔵庫がだんだん整理されていきます。
今日は（も）、冷蔵庫の中を見て悩みつつ。。。

和風ハンバーグにしました。



・パン粉のかわりに冷凍してあった油揚げ。
・玉ねぎのかわりにネギ。

出来上がりが心配でしたが、無事おいしいハンバーグになりました。

【材料】
油揚げ：3～4枚（冷凍してあったもの）
ネギ：1本
卵：1個
牛乳：50cc
ひき肉：300～400g

【調味料】
ごま油：大1
しょうゆ：大1弱
塩、こしょう、ナツメグ：適量

【作り方】
１．油揚げはぱりぱり（冷凍庫から出してすぐに）のまま、フードプロセッサーかバーミックスなどで細かくする。
２．ボールに１の油揚げと調味料以外の材料を入れ、混ぜる。
３．ごま油以外の調味料を加え、さらに混ぜる。
４．仕上げにごま油を加え、軽く混ぜる。
５．フライパンを熱し、４を適当な大きさに丸めて並べ、いい色になるまで焼く。
６．裏返してふたをし、5分くらい焼く（竹串をさしてみて、肉汁が透明ならＯＫ）。
７．一度ハンバーグを取り出し、油を捨てる。
８．７のフライパンにだし汁200cc、醤油、みりん、酒を適量入れ、煮立てる。
９．水溶き片栗粉でとろみをつける。
１０．ハンバーグを皿に盛り、９をかける。


豆知識：
・油揚げは買って使いきれなかったものは冷凍します。使うときはそのままお味噌汁にいれます
・ネギも冷凍できます。冷凍するときはこまかく刻んで冷凍します。使うときはそのままお味噌汁などに入れます
  

昨日から雨模様だったので開催されるのか心配だったのですが、今日はなんとか雨もあがり、洞峰公園でのつくばサッカーフェスティバルに行ってきました。



３歳、小1、小4の三人とも参加してきました。

前半のプログラムは、縦割りのチームに分けられて、サッカーボーリングやドリブル、ボール取りなどを楽しみました。
縦割りなので、幼稚園・保育園生から社会人まで、さまざまな年代のひとが同じチームになって、協力してゲームを楽しんでいました。

うちの3歳の子供は、たまたま小4の兄と同じチームになったので、兄にめんどうを見てもらいながら楽しんでいました。
各チーム、ジュニアユース（中学生）のお兄さんたちがついてくれて、いろいろとお手伝いをしてくれたのですが、3歳の子供のめんどうもよく見てくれ、小4の兄も楽しめたようです。

後半は、各年代別のチームに分かれ、サッカーのゲームを楽しみました。
サッカーチームに所属している子の参加が多かったので、どこにも入っていないうちの子供は大丈夫かな、と心配していましたが、小1、小4の2人はそれぞれの学年ごとのチームで頑張ったようです。

3歳児は、お兄ちゃんがいないとさびしいらしく、幼稚園チームになったとたんに「だっこ～」とか「こっちにきて～」とか甘えだして、「ちょっと無理かな？」と思ったのですが、試合？が始まると一生懸命ボールを追いかけて、ボールをけることができるとすごく喜んでいました。

サッカーフェスティバルのとなりでは「つくばの応援旗」を制作中でした。



最後に、みんなで写真を記念撮影です。



3人それぞれに楽しめて楽しい一日でした。  

三男のお弁当の日。
最近は、キャラ弁を作ってくれ、と言われ、なんちゃってキャラ弁を作ります。



でも、ハムとスライスチーズとのりでは、限界です。

スーパーでゴセイジャーウインナーを発見。
絵はココアで書かれています。

このウインナーでごまかせるかと思ったのですが…

リクエストでゴセイジャー。
ゴセイジャーってどんな感じなの？と思いながらウインナーの袋に載っていたゴセイジャーをまねてみましたが、？？？

まあ、月に1回のお弁当なので、しばらくはリクエストに答えてあげようかな。
ちなみに次はアンパンマンです。