エンジニアのひよこ_level10

毎日更新してた人。たまに記事書きます。

【Google】ドライブファイルストリームとバックアップと同期【984日目】

ドライブファイルストリームとは

個人アカウントではなく、G Suiteの契約をしている場合に使える機能・ツール。

自分のPCにGドライブを作成し、そこでマイドライブなどを開くことが出来る。

利点としては、PC内で該当ドライブが開けるので、Windowsエクスプローラで、
普通のフォルダを開くように操作をすることが出来ます。

バックアップと同期の違い

一般の人でも使えるバックアップと同期でも似たような機能がありますが、どう違うのでしょう。

基本的には以下の参考ページにリストがありますが、
特に注目すべきところは、共有ドライブのリンクを、マイドライブに移すことで、
共有ドライブの中身もエクスプローラで開けます。

また、ファイル単位で同期をすることも出来ます。

ブラウザと同様、基本的にはインターネットに接続して、ファイルを確認するので、
自分のPCの容量を圧迫することはないです。

オフラインで開きたい時には、個別でオフラインでも開けるように設定が可能です。

参考

support.google.com

【Springboot】ControllerでModelAndViewを戻り値であえて使う理由【983日目】

Modelでもいいが、あえてModelAndViewを使う

public String index(Model model) {
  return "/index.html";
}
public ModelAndView index(ModelAndView mav) {
  mav.setViewName("/index.html");
  return mav;
}

このように2つの書き方があるが、あえて後者を選んでいます。
なぜ後者を選ぶか

戻り値にModelがある

戻り値にModelがあるのが違い。

Modelに対して何かを行いたい時、

引数に取ったModelに対して何かをするのではなく、
戻り値に返すModelを目的のものに変える

という視点に変わります。

Modelに渡すものが正しいModelになるようになれば良いので、
その過程でModelが破棄されようが、最終的に渡されるModelAndViewが正しければよくなります

【一週間振り返り】久しぶりに普通に過ごせた一週間?【982日目】

普通と言いながら、LTしてるわけですが!

ただ、心はそこそこ穏やか?

1. 先週からの目標

  1. 楽しく生きる!
  2. 仕事休まない!

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

  1. VRのイベントにも行ったし、友達と愚痴言い合ったし、結構健やかに生活。
  2. 健康に過ごせました!

3. 次のアクション

  1. 楽しく生きる!
  2. 仕事休まない!

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

Webエンジニア勉強会inVRでLTした

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

普通に生活してたこと。

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

なんで普通に生活出来たかが不明(@_@;)なんで?

7. 新しく気づいたこと

元気だから、イベントに参加出来たのか、
イベントに参加したから元気になったのか、
イベントに参加しようとすると元気になるのか。

関係がわからないので、いろいろ試してみたいと思いました(@_@;)

8. 体重

100.0kg

また戻りそう(@_@;)?

【登壇資料】Webエンジニア勉強会inVR 第3回で話します【981日目】

登壇します

こちらです。

cluster内で話します!VR空間内だよ!

study-in-virtual.connpass.com

登壇資料

今回もMarpで作成しました

www.slideshare.net

おまけのMarpについて

今回これで話せばいいじゃん!って思ったけど、
言いたいことはツール選定とコミュニケーションについてなので、この内容で。

Marp便利ですよ!

ここにもいくつか記事があります。

www.nyamucoro.com

何かを選択するときには、1つの観点で選んではいけないという話【980日目】

比較とは難しいもの

2つのものがあります。
どちらかをあなたは購入しようとしています。
さあ、どちらが良いでしょうか。

単一の観点で比較すると、思わぬ罠があったりします。

お題: 業務を効率化

あなたは、業務を効率化するツールを導入しようとしています。
ここに2つのツールがあります。

■効率化する量

1. 10倍効率化するもの
2. 2倍効率化するもの

さあ、あなたはどちらを選びますか?
1.でしょうか。では、情報をもう少し追加しましょう。

異なる観点

1. 10倍効率化するが、費用が1億円かかるもの
2. 2倍効率化するが、費用が1万円かかるもの

これではどうでしょうか。
初期費用がいくらかかってもいいから、効率化したい時もあるかもしれませんね。
ではさらに追加してみましょう。

1. 10倍効率化し、費用が1億円かかるもの。月に一度だけ10分行う業務が対象
2. 2倍効率化し、費用が1万円かかるもの。毎日1時間行う業務が対象

ここまで来ると、2番を選びたくなりますね。

このように、情報を多角的に見ないと、選択を誤ることがあります。
それに、上記の内容においても、ツールの耐久性とか倫理観とかで2を選ばないほうが良いパターンもあるかもしれません。

情報を1つ見て決定をしないようにしよう

何かを選ぶ時に、1つの比較において、決定をすると、思わぬ罠があったりします。

今回のような罠を思い出すことで、慌てて決めてないかな?と一度自分を振り返ってみましょう。
そして、これを無限に繰り返すと全く決定ができなくなるので、必要な時に切り上げて決定をしましょう。

【HTML/XHTML】空要素の書き方の違いの理由<br />と<br>【979日目】

空要素とは

空要素というものがあって、中身がなくても完結しているタグがあります。
brやhrとかです。
これらは、マークアップ言語によって、書き方が違います。

マークアップ言語って?

HTMLやXMLなどのことで、文章の構造を可視化する書き方です。

普通の文書と比較して、とかで強調している部分を表現したり、

  • で、関連する項目であるということを、表現できますね。

    では、マークアップ言語によって書き方が違うとは何でしょうか。

    マークアップ言語には種類があります。

    XMLというマークアップ言語があり、これらはルールとして


    と書くように決められていました。
    そして、あくまでXMLでありその一部としてのWebでHTMLとして『XHTML』というものが生まれました。

    HTMLは、SGMLと呼ばれるマークアップ言語があり、それを元に作成されました。

    詳細は省きますが、利便性や時代の背景からXHMLは推奨されなくなり、HTML5はそれらの互換性をある程度保ちながら策定された書き方です。

    まとめ

    <input />
    1. これは、XMLのルール由来であり、以前使われていたXHTMLの書き方である。
    2. HTML5は、互換性を保っているため、上記の書き方も許容している

    みたいなのを知っておくと、もしXHTMLを使う場面が来たときとかに役に立つかもしれません。 (編集済み)

    おまけ: 静的解析

    ちなみに、静的解析をするときに

    <br>

    みたいな書き方は正しいか判断しづらくて、上記の書き方が許容されているのは静的解析ツールづくりをする人泣かせだったりします。

【CSS】クリックイベントが出来なくなるpointer-events: noneの特性と、使うべきときではない話【978日目】

クリックイベントをなくしたい

    <button onclick="alert('test');">押せる</button>
    <button onclick="alert('test');" disabled>押せない</button>
    <button onclick="alert('test');" style="pointer-events: none;">押せない</button>

このように、ボタンを押せなくする方法はいくつかあります。

どれも押せなくなるのであればいいじゃないかと思いますが、
挙動はそれぞれ違います。

そこで問題です。

タグを多重にした場合はどうなる?

では、以下のように階層構造にした場合、どのような挙動になるでしょうか。

    <button onclick="alert('test');"><a href="http://www.nyamucoro.com">1</a></button>
    <button onclick="alert('test');" disabled><a href="http://www.nyamucoro.com">2</a></button>
    <button onclick="alert('test');" style="pointer-events: none;"><a href="http://www.nyamucoro.com">3</a></button>

結果

  1. アラート表示後、ページが遷移する
  2. ページ遷移のみ行われる
  3. ページ遷移が行われない

これはなぜでしょうか。

挙動の考察

1.は、まずHTMLのイベント伝播は、トリガーとなった場所の一番上にある要素が実行されて、その後下にある要素が実行されていきます。
今回、ボタンの下にaタグがあるので、アラート表示後に画面遷移が行われました。

2.は、ボタンの挙動を無効化はしましたが、中にあるaタグの挙動は無効化されてないので、aタグの挙動が実行されました。

3.は該当する場所において、カーソルを合わせて実行する挙動を無効化されているので、その位置においてイベントが実行されませんでした。

用途と特性を考えてコードを書こう

CSSはデザインに注目することを忘れずに、画面の挙動を変えるために使うと捉えないでおきましょう。

あくまでデザインの領域に対して変動させるものなんので、『場所』において何かが起こる。
今回書きたいコードは『場所』に対して何かをしたいのか、『タグ』や『パーツ』に対して何かしたいのかを適切に考えてコードを書きましょうφ(・

【HTML】HTMLとXHTMLのどちらで書かれたか見分ける方法【977日目】

HTMLとXHTMLを見分けたい

<br />

これはHTMLとXHTMLどちらで書かれているでしょうか。
どちらでも動きますし、どちらかわからないですね。

このように、一般的にファイルを見たときに、どの形式で書かれているかを判断する方法は、
拡張子や何かしらの形で、『この形式で書かれてるよ』と示す必要があります。

この時、HTMLもXHTMLも拡張子は .html で書けます。
ではどのように判断しているか。

DOCTYPE

<!DOCTYPE html>

このように、ファイルの一番最初にDOCTYPEが書かれているものを見たことはないでしょうか。
上記のものは、HTML5です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

このような書き方がされていれば、XHTMLです。

どちらを扱っているか意識しよう

もし、あなたが既存のプロジェクトに参画し、HTMLを触ることがあったら、一度DOCTYPEを確認してみましょう。

HTMLとXHTMLは書き方が異なることがあります。
思わぬバグに繋がったりするので、自分が書いているのはHTMLのどのバージョンなのか、あるいはXHTMLなのかを確認してみましょう。