【一週間振り返り】少しずつ調子を取り戻した一週間？【884日目】

なんとなく笑顔が多かった一週間な気がします。
でも、なんでかは不明／(^o^)＼

いろいろ諦めるって、一応大切な気もしています！

何かを諦めるって、一見良くないように見えますけど、
その結果出来た余裕で、もっと上のことが出来たら、諦めるのは良いことですしね。
だから、何かを諦めたのが良かったのかもしれないですー

1. 先週からの目標

1. 運動を週に最低3回以上やる

2. 目標に対して行ったアクション

1. ぎりぎりやった！

3. 次のアクション

1. 運動を週に最低3回以上やる(絶対に！！！)

4. 今週良かったこと(新規・挑戦系)

1. 毎日いろんな予定をこなした！

5. 今週良かったこと(平時・生活的なところ)

1. 音楽ゲームやオーバーウォッチで遊べたこと。

6. もっとこうしたかったこと

運動をもう少ししたい気がする。

結局この一ヶ月、運動だけでもせめて頑張りたかったけど、
それをする余裕がなかった・・・

7. 新しく気づいたこと

一年前ほど、何かを成し遂げられる気がしていない。
そして、それを自覚出来た。

とはいえ、それに気がついた私が今どちらに向かうべきかはまだ迷い中です。

8. その他

いろいろ辛かったので、お酒飲んでました。

久々に飲むビールは美味しかった・・・
ただ、勢いで飲んだから、なんかいつもよりは美味しくなかったので、
美味しく飲める時との差を知りたいー

9. 体重

100.8kg

早く元の調子に戻したいー

【VSCode】複数のタグの、外側に別なタグを簡単に入れる【883日目】

複数のタグを別なタグでくくりたい

<div>
<div>
<div>
<div>
<div>

</div>
</div>
</div>
</div>
</div>

このように、ネストしてるタグの一番外側にタグを増やすのは面倒。

一番上に開きタグ書いて、一番下にタグを書いて・・・となる。

拡張機能htmltagwrap

これを使うと、選択した範囲の外側にタグが追加される。

1. ドラッグでタグを選択
2. alt+wで外側に

   タグを生成する

3. カーソルがついているので、そのまま目的のタグのキーを打つ

これでpタグ生成→書き換えの流れでタグが簡単に増やせます。

じみーな仕事はどんどん効率化していきましょう。

【HTML】画面を縮めたときに、要素が二列に折り返すようにする方法【882日目】

要素が折り返す

画面を縮めた時に、文字やボタンとかが、綺麗に折り返してほしい。

結構普通なことのようで、実装すると難しいとかがあります。
ですが、これに関してもHTMLの基本をわかってると、すぐに使えます。

ということで、インライン要素の復習をしましょう。

文字は折り返す。

縮めたら折り返すものとして、わかりやすいものは文字。

<div>
あああああああああああああああああああああああああああああああああああああああ
</div>

この時、画面を縮めたら文字が折り返していると思います。
これと同じようにボタンとかを設置して、折り返させれば良いのです。

文字と同じ→インライン要素で作る

文字はなにか。普通にしていれば、インライン要素です。
インライン要素は、端に来たら折り返す。

なので、ボタンもインライン要素で作れば、端に来たら折り返すわけです。

インライン要素にするのは、

1. などで作っていたものをで作成
2. CSSで display: inline;をかける

などで対応出来ます。
きっと、これで出来ると思います。

・・・あれ？崩れた？

途中で折り返してしまった。

例えば、ボタンの半分辺りで折り返しの境目が来ると、
ボタンの右半分は右に、左半分は次の行に表示されて、酷い見た目になったりします。

さてどうするか。

実は文字列でもよくあります。『特定の文字列の塊で、折り返してほしい』とか。
そんな時にどうするか。

インライン要素ではなく、『インラインブロック要素』を使います。

インラインブロック要素

インライン要素とブロック要素の特性両方を持つものです。

CSSで display: inline-block; をすると要素をインラインブロック要素に変えられます。

すると、その要素のタグの単位で折り返しがされます。
ボタンに対しても、インラインブロック要素にしておくと良いです。

<span class="d-inline-block">今日は</span><span class="d-inline-block">いい天気</span>

.d-inline-block {
    display: inline-block;
}

みたいにすると、『今日』『はいい天気』みたいに折り返されることはなくなります。

これを利用して、ボタンを作成すれば、問題なく折り返せるコードが書けます。

特性を知ろう

このように、HTMLの特性を知っていれば、一見難しいと思うものも、簡単に書けます。
是非、タグに対していろいろ調べてみてください！

【SpringBoot】setViewNameを省略した場合の挙動【881日目】

RequestMappingでコードを書く

@RequestMapping(value = "/login", method = RequestMethod.GET)
public ModelAndView index(ModelAndView mav) throws IOException {
    mav.setViewName("login");
    return mav;
}

こんな感じになる。

これで、 /login にアクセスすると、 login.html 使ってページを表示させる。

では、

    mav.setViewName("login");

この行を消してみると、エラーが出ない

RequestMappingのvalueを使う

すると、 login.html を使ってページが表示される。

setViewNameを使わなければ、 RequestMappingのvalueの値が初期値として使われる模様。

とはいえ、一応明示的に書いたほうが良いと思うので忘れないようにしましょうφ(･･

暗号化とハッシュ化の、性質と使いみちの違い【880日目】

暗号化？ハッシュ化？

どう違うかはよく知らない・・・って方も多いと思います。

バックリとした説明を。

もとに戻せるのと戻せないもの

暗号化は、元の文字列に戻せるもの。
ハッシュ化は、元の文字列に戻せないもの。

暗号化

『暗号化』『復号』という言葉があるように、暗号化は、

"ringo"=(暗号化)=>"tomhp"=(復号)=>"ringo"

のようなことが出来ます。
暗号化する鍵と、復号するための鍵があれば出来るやつですね。

今回の暗号化はキーボードの右隣。復号はキーボードの左隣に動かせば元に戻せます。
暗号の法則(キー)を知らないと、この言葉が読めない。

暗号化したデータを盗聴されても、キーが無いからデータの内容を盗み見られない。
そんな秘密のやり取りをするために使われます。

ハッシュ化

"ringo"=(ハッシュ化)=>"653E775FAA591DA88A018AE959245B6C6CB2E63405E304C9FCBD632357B8031F4DBC849B67967DFA8B78787C89393063213FFE34F923E1A8BFE6115BFDDCD0E6"

このハッシュ化した文字列は、元の文字列に戻すことが出来ません。
もとに戻せないのに使いみちがあるのか？あります。パスワードです。

データベースには、ハッシュ化した文字列を入れます。
すると、データベースを見られても、元のパスワードはわかりません。

ですが、パスワードを入力フォームに入れたとして、ハッシュ化した時にデータベースと同じ値であれば、
そのパスワードが正しいということになります。

(例)
■DB: "653E775FAA591DA88A018AE959245B6C6CB2E63405E304C9FCBD632357B8031F4DBC849B67967DFA8B78787C89393063213FFE34F923E1A8BFE6115BFDDCD0E6"

■ユーザーの入力:
"ringo"=(ハッシュ化)=>"653E775FAA591DA88A018AE959245B6C6CB2E63405E304C9FCBD632357B8031F4DBC849B67967DFA8B78787C89393063213FFE34F923E1A8BFE6115BFDDCD0E6"

同じだから、パスワードは正しいのでログインさせる。
という仕組みになりますφ(･･

パスワード平文保存？

一時期話題になった、パスワードの平文保存についてですが、
データベースにパスワードがそのまま保存されていたり、ハッシュ化ではなく暗号化でもとに戻せる形で保存されているという話。

だから、マイページとか、メールでパスワードがなぜか見れてしまう。
攻撃されてパスワード奪われたら困るよね・・・みたいなお話です。

バーチャル空間勉強会の振り返りしました_φ(･_･【879日目】

バーチャル空間勉強会？

nyamucoro.connpass.com

土曜日にやったこれ！

振り返り？

アンケート見ながら次回アクションを考えたり、個々人の思うKPTを上げて、振り返りをしてました。

今思うと、思ったより私は忙しくなかったし、
逆におかしょいさんと02さんの負担が凄かったなと思います。

ちなみに、当時の現場の感覚としては、私の仕事を極力引き取ろうとしてくださっていたらしいですが、
実際は忙しくなかったというのは、オンラインでスタッフをやったことによる、
自分たちの状況がパット見でわからないという新しい問題が見えてきました。

今困ってるかどうかはわかるのですが、今焦ってるかどうかは分かりづらいのは、
新しい発見ですね。

他にもいろいろ話して、Cluster特有の問題とか、
そもそも一週間で開催する規模じゃないよね！そこで起こった問題たくさんあるね／(^o^)＼とか、 逆によくできたねみたいなのがありました。

知見を貯めよう

ということで、得られた反省を糧とするために、振り返りをして、記録を残しましょう。

例によってGitHubです。
次回開催どうしようかな？そもそもやるのかな？

いろいろ考えたいですね。

github.com

【HTML】インライン要素とブロック要素の違いと使い方メモ1【878日目】

このメモは

いつかHTMLの説明に使いたいなと思ったことをメモします。

なので、間違っていることがあれば、指摘していただけると嬉しいです。

ブロック要素とは？

端的に言うと箱。
『横幅マックスの』幅の箱を用意します。
何もしなくても、横幅はマックスです。(widthとか指定しなければ)

<div>
    <div>
    </div>
</div>

これは、箱の中に箱が入っているやつ。
箱の中に箱が入っているので、基本的には、外側の箱より内側の箱は大きくならない。
(浮かせるとか、マイナスを入れるとかしなければ)

インライン要素とは？

箱に対して、中身の要素。

<div>
りんご
</div>

こう書いても、この中の『りんご』という文字はインライン要素。

違いがわかるとどう良い？

インライン要素に対して、widthを書くのに違和感を感じるはず。
ただ、一部はwidth効くので、それは特殊なインライン要素。
(imgやinputタグとか)

text-align: centerというのは、『箱の中身を中央揃え』していると考えられるので、
親要素のdivにかけて、中身が中央揃えになっていると理解できると思います。

marginは箱の外側の空白を調整することを覚えておけば、
margin: 0 autoが中央揃えになる理由は、箱に対して左右の marginを均等に自動的にしてくれるから、
中央揃えになるとわかる。

ブロック要素に margin: 0 autoしても変わらない時、変わらないと言っているそれは中身(インライン要素)でしょうか。
要素の特性を推測すると、意識しやすいかもしれません。

これで、『なんで中央揃えにならないんだー』がピンと来やすくなると思います。

【一週間振り返り】体調崩しながらもやりきれた一週間！【877日目】

健康って、大切ですね・・・

体調を崩し気味で、思うように生活出来ないのはやはり辛いです(´・ω・｀)

1. 先週からの目標

1. 運動を週に最低3回以上やる

2. 目標に対して行ったアクション

1. 体調崩したとはいえ、一日もしなかった！！！まずい！！！

3. 次のアクション

1. 運動を週に最低3回以上やる(絶対に！！！)

4. 今週良かったこと(新規・挑戦系)

1. バーチャル空間勉強会開催完了
2. 他のイベントもいくつかこなせた

5. 今週良かったこと(平時・生活的なところ)

1. イベント当日は、体調やメンタルやられてるのを表に出さないで気持ちを切り替えれた！

6. もっとこうしたかったこと

体調がー！

あと、ステップアップって難しいね！

7. 新しく気づいたこと

予定を入れればなんとか動けるのがわかった。
でも、こういうとき『どんなふうに』『どれくらい』休むべきかわかんない(´・ω・｀)

そして、そもそも休めないときもあるので、今は静かに休むべきな気がした！

8. その他

心がやられるのか、体がやられるのか、どっちが先かわからないけど、
やられるときは同時にやられるのがわかった！難しいね！

9. 体重

100.4kg

まあ、運動しなきゃこうなるよね！せっかく100切ったのにね！