20210114_アウトプット(チャット風UIの作り方・オリジナルアプリ)

アウトプット画像

今日行ったこと 5時間10分

  • チャット風UI(CSS)の方法 2時間10分
    👉吹き出しの作り方!!!

  • エンドポイントについて 1 時間
    👉JavaScriptに書いてあるopenとルーティングがリンクしていることがわかりすっきり。

  • オリジナルアプリ 2時間
    👉もう一度作り直しを始めた。



新しい発見

吹き出しCSSの方法

  • オリジナルアプリに取り入れたいと思ったためドットインストールで学習。

ドットインストール「CSSでチャット風のUIを作ってみよう」のレッスンより 三角形1 三角形2

ドットインストールを通して初めて知ったことは、
〜第一ステップ〜
(1)widthheightを同じpxにする。(ここでは20pxとする)
(2)borderで線をつける。(border 5px solid black;
👉まずは□(四角)ができる。

〜第二ステップ〜
(3)borderで線に色をつける際「右側の辺だけこの色」と指定できると知る😲(border-right-color: white;
(4)(3)のsolid(銭の太さ)を極太にしていく(ここでは40pxとする)
(5)(1)のwidthheightを0pxにしていく。
👉△が出現する。

始めは「え??どゆこと???」と思ったが、
四角形作った後に、ボーダーを利用して、三角形に見える形にしていくというのを理解した!!(すごい!)



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

  • もう一度作り直すことにした。

  • 自動化(circleCI)やCSSフレームワーク(マテリアライズ)等、新しいことにどんどんチャレンジしようと思っていた。

  • しかし、いざオリジナルアプリを作ると、初歩的な部分すら時間がかかる&思った通りの実装が出来ないことに気づく。

  • 新しいことにチャレンジしすぎて、エラーが発生している場合に、今回初めてチャレンジした新しい技術が原因なのか、今まで習得してきた知識で実装した部分が原因なのか、エラーを捉えることが出来ていないことに気づく。

  • 一つ形にしてから、改善できる部分に、自分がやったことない新しい技術にチャレンジして取り入れていこうと方向性を変えることにした。

今日やったこと

  • gemの導入

  • ヘッダーフッターの実装スタート

  • ロゴの作成



感想

  • 勉強時間確保できたのはよかった!しかし、つい遅くまでやってしまい寝不足気味。

  • ヘッダーとフッターに思いの外時間かかる。全然上手くいかない。

  • ドットインストールで吹き出しの方法を学んでいる時、ワクワクしたなあ。

  • エンドポイントについてメンターさんに聞いてやりとりしている際、励ましてくれて本当に嬉しかったなあ。頑張ろうと思えた。



覚書(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)