20210124_アウトプット(オリジナルアプリ/「悩み」部分の非同期通信・ビューを整える)
今日行ったこと:オリジナルアプリ 計14時間45分
チャット風UIについてビューが出来た…2時間15分
非同期通信による「悩み」の呟きが出来るようになった…2時間50分
ログイン後のナビゲーション作成…2時間50分
WOOPの目標設定のcss(特にshowページ)・チャット風UIの背景色をグラデーションに変更…6時間50分
新しい発見
セルフコンパッションのページで学んだこと
- メソッド名、クラス名に悩んだとき、このサイトがよかった。あとCSSやJavaScriptにおいて「-(ハイフン)」「_(アンダーバー)」でもどちらでも適用できるんだ😲と知った。個人的には単語選択できるアンダーバーの方が好きだなあ。どちらに揃えるか会社ごとに決めたりしているのだろうか?
- 背景を画像にしようと思ったのだが上手く当たらず。なんでだろう。
CSSでbackground-imageが表示されないときの対処法を現役デザイナーが解説【初心者向け】【初心者向け】 | TechAcademyマガジン
- ここは今こだわる部分じゃないか、他の方法を考えようと思い、グラデーションにした!このサイトで良い感じのcssを選べた^^
uiGradients - Beautiful colored gradients
昨日までは「①index(ビュー)」「②クラスのテンプレートビュー」の2つを作り、②を①に読み込んで
render
させていた。しかしそれだと見た目がチャット風UIにならず悩んでいた。結局、「①index(ビュー)」に箱を作り、そこに「吹き出し」にあたる部分のHTMLをJavaScriptで挿入するように変更したら上手くできるようになった💡非同期通信で、送った時に、コメントがだんごみたいに重なってしまって、なんでだ?!と苦労した。結局、
formText.value = "";
などのいったん入力フォームを空にするJavaScriptが上手くあたっていなくてだんご状になっていたことがわかった😂今日は左のフォームで非同期通信で投稿できるようになった(嬉しい)明日右側のフォームにチャレンジする予定。
ナビゲーションについて、アイコンと文字が並んで表示されるには
<li><%= link_to "#", class: "btn rules_page" do %> <%= image_tag "rules.png", size:'50x50'%>習慣カウント(if thenルール)<% end %></li>
で出来ることを学んだ。(初めは「画像だけ」「文字だけ」になってしまい苦労)
WOOPの法則の部分で学んだこと
- 目標が表示される部分について文字が型からはみ出てしまう時に
text-overflow: ellipsis;
・white-space: nowrap;
・word-wrap: break-word;
あたりのcssを活用したら枠内にできた。
CSSではみ出したテキストを「...」で省略 - Qiita
改行を自動でできる!CSSで文字列を折り返しする方法 | TechAcademyマガジン
予め指定している
col
の影響なのか目標が真ん中あたりに行かなくて苦労した。(ちょっとずれてるけど、今ここでこだわりすぎるのは止めようと思ってやめた)いつも手書きでしていたのを電子化するので紙っぽい質感・教科書っぽいフォントにしてみた☺️
あとは、ベーシックな色合いにして、アクセントカラーを水色・オレンジなどにすることによって、性別関係なくいろんな人に使いやすい色合いにしたいと思っている。
【indexページ】 【showページ】
感想
1/14に
rails new
して今日で10日目。3つの最低限機能うち、1.5くらい進んだ。もっと時間が欲しい。ビューを整える作業については、直したい部分を書き出して、それを淡々と行うという方が最初の段階ではいいのかもしれない😂
理由は気付いたら時間がすごく経過していて、ついついこだわってしまうため。行っている内に「パンくずあったら分かりやすいかな」「検索機能あったら分かりやすいかな」と、最低限の実装後に行おうとしている部分の夢が広がり、最初に直そうとしていた本質的な部分から脱線がしてしまうことがちょこちょこあった😭
最近、プログラマーになるためには、プログラミングと同じくらい、今まで努力してきたことや、自分が出来ること出来ないことを相手に言語化して伝えることも大事だと考えている。でも、気付いたらプログラミング楽しくてずっと実装していて、そういった時間を確保できていないなあ。時間配分どうしようかなと悩み中。😅
覚書(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 | 完了※7に追加実装 |
9 | コメント機能(即時更新) | 1/8 | 完了 |
10 | クレカ登録 | 1/10 | |
11 | パンくず | 1/14 | 完了 |
12 | 日本語エラー | 1/18 |
身に付ける力(直近)
PHP7
Docker