20210103_アウトプット(オリジナルアプリ・プレビュー機能の実装)
今日行ったこと 13時間15分
オリジナルアプリ 11時間15分
👉やっと、cssとJavaScriptが反映された!!!🎉🎉🎉画像プレビュー機能 2時間
👉完成✨
オリジナルアプリについて
もう一回、どこがエラーになっているのか特定するために、導入の部分からやり直しをした。
いろいろ試した日↓ cherry-2020.hatenablog.com
(1)foreman
のアンインストール
👉アンインストールしても、同じエラーが出た。(ということはこれが原因ではない。)
👉調べたらコマンドを楽にするためのものであってとりあえず要らないかと判断。
👉本番環境にデプロイする時にまた注意しよう。
Railsアプリを開発するとき、ウェブサーバーのプロセスを1つ立ち上げて開発出来るのであればforemanは必要ない
(2)そもそも、マテリアライズ入れようとして何をしたっけ?
①JavaScript配下にstylesheets
とapplication.scss
を作った。
②app / views / layouts / application.html.erb
のstylesheet_link_tag
をstylesheet_pack_tag
に書き換えた。
👉cssを読み込む場所がいつものapp/assets
配下ではないことに気がつく😲
👉なので、app/assets
配下をいくら編集しても無意味だったのか💡同じファイル2つある状態だった😭
👉今更ながら、大元になるファイルたちapplication.html.erb
・application.css
・application.js
の勉強になった。
👉なぜ、JavaScript配下
に置くのか理由は調べたけれど書いてある意味が分からなかった😭いろいろ試して今回の場合、JavaScript配下
にstylesheets
とapplication.scss
置かないとcssが反映しないことがわかった。
(コンパイル・JavaScriptのパッケージシステムあたりが読んでも分かるようで分からない。知識深めていきたい。)
(3)そもそもサス(Saas)って何?(.scss
の拡張子のファイルって何?)
Sass(サス)とは、cssがバージョンアップしたもの。scss記法とsass記法がある。
ただの
css
は、一つ一つに色等を当てないといけないけれど、サスはカタマリに対してcss
を当てられる利点がある。例えば、磯野家があったとして、今まではカツオは青、ワカメは赤、みたいにズラーっと記述する(css) しかし、サスだと、磯野家は白、その中のカツオは青、その中のワカメは赤みたいに、家族>個人(入れ子)のような形(カタマリ)でcssが当てられると理解。
関係性がわかりやすいのと記述量が減るので可読性が上がる。
sass記法だとカタマリで書く記法でしか読み込まれない。scss記法だと従来のcssでもカタマリで書く記法でもどちらも読み込み可能。なので、
scss記法
の方が一般的。〇〇.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)を一つ一つ行っていったら、画像もcssもJavaScriptも反映できた🎉
感動するくらい嬉しかったー!!!
反映したものの、細かい部分(余白とフッター)は出来ていないので明日以降に持ち越し。
色は、このサイトを参考にしている。
サルワカさんのホームページは、読者にとって痒いところに手が届く、見やすくて文章もわかりやすく親切なサイト。HTML・cssの勉強のたびにお世話になっている。🙇♀️
- その他:cssで
text-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要素を追加できる (今回で言えばの 2 に1 をくっつけると特定の画像URLができる |
4 | if (document.URL.match( /new/ ) または document.URL.match( /edit/ )) { } |
特定のページだけにイベント発火できることを知った |
5 | e.target.files[0] |
画像の情報を取得できる |
感想
朝起きてから夢中になってやっていた。夕方17時くらいにやっと成功してめちゃくちゃ嬉しかった!!!(笑)サス勉強になったし、諦めないでよかった☺️
プログラミング漬けの正月休みだったけど、楽しかったなあ☺️
明日から仕事か〜。休みは早いなあ。
覚書(12/29計画の見直し)
(1)やるべきこと (2)やりたいこと (3)やれること
(1)やるべきこと
- 卒業要件の完成
(2)やりたいこと
追加実装を学ぶためのミニアプリ作成
オリジナルアプリの作成
PHPの勉強
面白そうだから参加したい・見たい(やめ太郎さんのキータ表彰・yahooイベント)
読書
(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