20210124_アウトプット(オリジナルアプリ/「悩み」部分の非同期通信・ビューを整える)

アウトプット画像

今日行ったこと:オリジナルアプリ 計14時間45分
  • チャット風UIについてビューが出来た…2時間15分

  • 非同期通信による「悩み」の呟きが出来るようになった…2時間50分

  • ログイン後のナビゲーション作成…2時間50分

  • WOOPの目標設定のcss(特にshowページ)・チャット風UIの背景色をグラデーションに変更…6時間50分



新しい発見

セルフコンパッションのページで学んだこと

  • メソッド名、クラス名に悩んだとき、このサイトがよかった。あとCSSJavaScriptにおいて「-(ハイフン)」「_(アンダーバー)」でもどちらでも適用できるんだ😲と知った。個人的には単語選択できるアンダーバーの方が好きだなあ。どちらに揃えるか会社ごとに決めたりしているのだろうか?

codic - プログラマーのためのネーミング辞書

  • 背景を画像にしようと思ったのだが上手く当たらず。なんでだろう。

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)やりたいこと

(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


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

  • ドメイン駆動開発

  • 環境構築

  • 環境変数などのOS知識

  • バージョン対応力

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

  • GitHubActions×OpenAPIGenerator(APICilent)