さとし日記

都内大学院生のブログ

洗濯機購入とWEBアプリ制作についての雑記

今までコインランドリーに通っていたのは、乾燥機を使うことが目的だった。

 

天候を考えながら、自分で濡れた洗濯物をハンガーにかけて乾かして、また取り込んでという手間を省きたかった。

 

ただ、実際にやってみるとコインランドリーの乾燥機では大して乾かない。

 

結局自宅に戻ってからベランダで干すことになる。

 

これでは自宅で洗濯するのと変わらないと思った。

 

それにコインランドリーの洗濯機はかなり割高で、洗濯は4.5kg : ¥400、7.0kg : ¥700、そして乾燥は¥100/10分となっている。

 

往復の移動時間も15分くらいあるので、乾燥機なしの洗濯機でも良いから、買った方がコスパが良いと思った。

 

本当は買うなら乾燥機付きドラム式洗濯機が良かったが、予算の関係で今回は見送ることにした。

 

無印良品の「電気洗濯機・7kg MJ-W70A」を購入した。

週末には届くことになっている。

 

一人暮らしにしてはやや大きめだが、2回に分けて洗濯する手間が生じ得ると面倒なのと、5kgが32,900円、7kgが39,900円と大して変わらなかったので、7kgを購入することにした。

 

また、次は家電がついているマンスリーマンションに引っ越す可能性が高いので、あまり高い洗濯機を買わない方が手放しやすいとも思った。

 

結果的には早く洗濯機を買った方が良かったわけだけど、これも良い経験ということにしておく。

 


 

間が空いてしまったが、前回に続いてwebapp作りに取り組んだ。

今回で今作っているものは終わり。

 

まずは、サイト上の画像がレスポンシブに拡大・縮小するように変更する(ブラウザの大きさの変化に合わせて、ページに表示される画像も大きさが変化するようにする。)

そこでBootstrap/Documentation/Content/Imagesにある「Responsive images」からimg-fluidのクラスを追加する。

 

index.htmlに画像のソースを指定しているところがあるので、

ここに下記のように追加する。

<img src = "{{ content.image.url }}” class="img-fluid"/>

これでレスポンシブに拡大・縮小するようになる。

 

また、例えば
class=“img-thumbnail”
を追加し、
<img src = "{{ content.image.url }}" class="img-fluid img-thumbnail"/>
とすると、縁取りができる。

 

その他roundedなど、適当にclassを指定できる。

 

次に、投稿の画像によってサイズが異なり、見辛いので、サイズを調整していく。
そこで、先ほどと同様に、<img src=~~/>にstyleを追加する。
例えば
<img src = "{{ content.image.url }}" class="img-fluid img-thumbnail rounded" style="max-height: 200px;"/>
とする。

 

そして、
Bootstrapのナビゲーションバーに自分のホームページのリンクを追加したり、適宜不要なもの(dropdown, searchのformなど)を削除する。

 

次に、ホームページの先頭に画像を追加する。

templatesの時と同じように、
webapp/contents/static/contents
となるように、新たにstaticフォルダとcontentsフォルダを作成する。
タイトルの文字の位置、埋め込んだ先頭の画像の大きさなどを調整する。

<h1 class="text-center">一番大きな見出し。h1の大きさを確かめる。</h1>
<br/><br/>
{% load static %}
<img src ="{% static 'contents/mujicafe.jpeg' %}"class="img-fluid rounded" style="max-height: 200px;>


そして、投稿一覧で追加したBootstrapのコードを、詳細ページにも追加する。

これで一通り形になった。

 

今回はDjangoでWEBアプリを作る方法の確認が目的だったので、仕組みがわかっているブログサイトを作った。

ただ、自分で使うには「はてなブログ」で十分なので、特に公開したりはせずこれで終わりにする。

 

次は別のサイトを作って公開まで持っていこうと思う。