20210103_アウトプット(オリジナルアプリ・プレビュー機能の実装)

アウトプット画像

今日行ったこと 13時間15分

オリジナルアプリについて

もう一回、どこがエラーになっているのか特定するために、導入の部分からやり直しをした。

いろいろ試した日↓ cherry-2020.hatenablog.com

(1)foremanのアンインストール

👉アンインストールしても、同じエラーが出た。(ということはこれが原因ではない。)
👉調べたらコマンドを楽にするためのものであってとりあえず要らないかと判断。
👉本番環境にデプロイする時にまた注意しよう。  
Railsアプリを開発するとき、ウェブサーバーのプロセスを1つ立ち上げて開発出来るのであればforemanは必要ない


(2)そもそも、マテリアライズ入れようとして何をしたっけ?

JavaScript配下にstylesheetsapplication.scssを作った。
app / views / layouts / application.html.erbstylesheet_link_tagstylesheet_pack_tagに書き換えた。

👉cssを読み込む場所がいつものapp/assets配下ではないことに気がつく😲
👉なので、app/assets配下をいくら編集しても無意味だったのか💡同じファイル2つある状態だった😭
👉今更ながら、大元になるファイルたちapplication.html.erbapplication.cssapplication.jsの勉強になった。
👉なぜ、JavaScript配下に置くのか理由は調べたけれど書いてある意味が分からなかった😭いろいろ試して今回の場合、JavaScript配下stylesheetsapplication.scss置かないとcssが反映しないことがわかった。
コンパイルJavaScriptのパッケージシステムあたりが読んでも分かるようで分からない。知識深めていきたい。)


(3)そもそもサス(Saas)って何?(.scssの拡張子のファイルって何?)
  • Sass(サス)とは、cssがバージョンアップしたもの。scss記法とsass記法がある。

  • ただのcssは、一つ一つに色等を当てないといけないけれど、サスはカタマリに対してcssを当てられる利点がある。

  • 例えば、磯野家があったとして、今まではカツオは青、ワカメは赤、みたいにズラーっと記述する(css) しかし、サスだと、磯野家は白、その中のカツオは青、その中のワカメは赤みたいに、家族>個人(入れ子)のような形(カタマリ)でcssが当てられると理解。

  • 関係性がわかりやすいのと記述量が減るので可読性が上がる。

  • sass記法だとカタマリで書く記法でしか読み込まれない。scss記法だと従来のcssでもカタマリで書く記法でもどちらも読み込み可能。なので、scss記法の方が一般的。

  • マテリアライズscssファイルで作成するcssフレームワークだと理解。

  • 〇〇.scssファイルに書き込めば、〇〇.css〇〇.mapが自動生成される。〇〇.mapは1行でズラーっと書かれているがこれはパソコンがcssを読み込みやすくするための一つだと理解。

  • Webブラウザで反映するには4つの言語でないといけないので、scss記法で実装していく場合には、コンパイルしながら実装すると理解。(その中の一つとして、VSコードの拡張機能がある。)


(4)マテリアライズってどんな風に書かれているの?

サンプルコードの構造を見た。(下記は一例)

        <div class="col s12 m4">
          <div class="icon-block">
            <h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
            <h5 class="center">Speeds up development</h5>
               </div>
        </div>

cssのインラインスタイルのような形で、マテリアライズの便利な機能を引っ張ってきているのだと理解。

例えば、col s12 m4は画面幅を12分割した時の4こ分、flash_onはマテリアライズが用意している⚡️こんなマークが取ってこれる。


(5)JavaScriptいつもの記述やってみよう。
document.addEventListener('DOMContentLoaded', function(){
  console.log(123);
});

検証キーから、コンソールを確認。(成功)

マテリアライズに定義されているJavaScriptが読み込まれないのは引数を間違えていたからだったと気づく😭


まとめ

上記の(1)〜(5)を一つ一つ行っていったら、画像もcssJavaScriptも反映できた🎉
感動するくらい嬉しかったー!!!

反映したものの、細かい部分(余白とフッター)は出来ていないので明日以降に持ち越し。

色は、このサイトを参考にしている。

saruwakakun.com

サルワカさんのホームページは、読者にとって痒いところに手が届く、見やすくて文章もわかりやすく親切なサイト。HTML・cssの勉強のたびにお世話になっている。🙇‍♀️

  • その他:csstext-shadowという文字に影を付けられることを知る😍



プレビュー機能の実装

JavaScriptは改めて、いろんなものがオブジェクトであることを再実感した回だった。

(1)オブジェクトになっている中身が見れる!

コンソールをどんどん開けていくと、オブジェクトになっているのが見れた!すごい!

document.addEventListener('DOMContentLoaded', function(){
  const ImageList = document.getElementById('image-list');

  document.getElementById('message_image').addEventListener('change', function(e){
    console.log(e);
  });
});

(2)新しく知ったメソッド

NO メソッド 役割
1 window.URL.createObjectURL(引数); 画像情報のURL作成できる
2 createElement(要素) 要素に'div''input'を入れるとその要素が作れる
3 親要素.appendChild(追加する子要素); HTML要素を追加できる
(今回で言えばの21をくっつけると特定の画像URLができる
4 if (document.URL.match( /new/ ) または document.URL.match( /edit/ )) { } 特定のページだけにイベント発火できることを知った
5 e.target.files[0] 画像の情報を取得できる



感想

  • 朝起きてから夢中になってやっていた。夕方17時くらいにやっと成功してめちゃくちゃ嬉しかった!!!(笑)サス勉強になったし、諦めないでよかった☺️

  • プログラミング漬けの正月休みだったけど、楽しかったなあ☺️

  • 明日から仕事か〜。休みは早いなあ。



覚書(12/29計画の見直し)

(1)やるべきこと (2)やりたいこと (3)やれること

(1)やるべきこと

  • 卒業要件の完成

(2)やりたいこと

(3)やれること

メンタル:楽しみながら、ゲーム感覚でいく🎮😎

時間で区切り(達成すればよし)
  • PHP 一日15分以上

  • オリジナルアプリ 1日1時間以上

追加実装のミニアプリを作り、引き出しを増やす
優先順位 内容(機能) 締め切り 達成度
1 AWS S3 12/18 完了(フリマアプリ)に実装)
2 AWS EC2 12/24 完了(フリマアプリに実装)
3 ウィザード形式 12/27 完了
4 SNS認証 12/28 完了
5 複数条件検索 12/29 完了
6 タグ付 12/31 完了
7 画像プレビュー 1/2 完了※フォーク
8 複数枚写真OK 1/4
9 コメント機能(即時更新) 1/8
10 クレカ登録 1/10
11 パンくず 1/14
12 日本語エラー 1/18



身に付ける力(直近)

  • PHP7

  • Docker


身に付ける力(ゆくゆく・覚書)

  • ドメイン駆動開発

  • 環境構築

  • 環境変数などのOS知識

  • バージョン対応力

  • データベースをインポートする力・エクスポートする

  • GitHubActions×OpenAPIGenerator(APICilent)