2020/04/19

学んだこと

UI/UXデザインツール『Figma』入門

https://chot.design/figma-beginner/ee5072822846/

 1-1. Figmaの概要

わかったこと

  • Figmaは2016年9月に正式リリースされたUIデザインツール
  • デスクトップアプリケーションだけでなく、ブラウザでもデザイン作成ができるところが革新的だった
  • WindowsMacLinuxなどいろいろなOSに対応している
  • リアルタイムでコラボレーションできるデザインツールとして人気
  • インターフェースはすべて英語
  • インストールや初期設定をしていなくても共有されたデザインがみれる
  • シンボル機能=繰り返し使うパーツはグループ化して一括管理できる
  • 管理しやすさは Figma<Sketch(ただFigmaはその分柔軟)
  • ライブラリ機能=共通のパーツを一つのファイルで一括管理できる(チーム開発に便利!)
  • デザインファイルに直接コメントができる
  • バージョン管理もできる
  • CSSなどを表示するコードモードもある
  • 職種に縛られずプロダクト開発に関わる全員が使うことができるツール
  • Photoshop=画像編集に特化
  • Illustratorベクター編集に特化
  • Sketch=機能は似ているが、現在MacOSでしか使えない
  • AdobeXD=Adobe製品との連携が強い
  • Figma=共有・同時編集が強い

 1-2. 初期設定とインストール

わかったこと

  • Figma利用にはアカウントが必要
  • ほとんどの機能は無料でも利用できる
  • Figmaは日本のユーザーがまだ少ない
  • デフォルトではNotosansの和文フォントのみ対応
  • それ以外を利用するには使用PCのフォントファイルだを読み込む必要がある
  • Account Setting>Fonts>Download installer to enable local fonts
  • ブラウザ上では機能に制限がある

わからなかったこと、困ったこと

  • ブラウザ上での制限ってなんなんだろ(今度調べましょう)

1-3. Figmaの初回フィル起動時チュートリアルの解説

わかったこと

  • チュートリアルで以下の紹介がある
    - Constraints(制約)
    可変レイアウト時にレイヤーがどのようなサイズに変化するかあらかじめ決めておくことができる(デバイスのサイズがたくさんあるプロダクトでは時間短縮になる)
    - Vector Networks(ベクターネットワーク)
    Figmaではベクターをドローイングするための「Vector Networks」と呼ばれる独自の手法がある(ベクターのオブジェクトをより柔軟で編集しやすい構造にしたもの)
    - Comments(コメント)
    デザイン上に直接だれでもコメントを残せる
    - Sharing and Permissions(共有と権限)
    チームメイト、クライアント、ステークホルダーなど共有相手に応じて権限を使い分けることができる(※権限によっては料金が発生する)
    - Multiplayer(マルチプレイヤー
    複数人数と同時作業が可能。コンフリクトをマージする必要もなし。
    - Team Library(チームライブラリ)
    コンポーネントやスタイルをまとめて一つのファイルにして、チームメイトに公開(現在、有料版のみの機能)
    - Export(書き出し)
    PNGJPEGSVG、PDFで書き出しができる
    - Live Device Preview(実機プレビュー)
    Figma Mirror」というアプリを段ロードすることで実機プレビューができる。(デザインを変更すると即時反映)

1-4. Figmaの料金プランと権限管理の説明

わかったこと

  • Figmaにはプランが3つある
    -Starter
    ・個人向けプラン
    ・無料
    ・編集者2名まで招待できる
    ・プロジェクトは3つまで
    ・履歴保存は30日前まで
    ・ファイル容量の上限はなし
    -Professional
    ・チーム向けプラン
    ・有料
    ・編集者の人数制限は無し
    ・自分含めた編集者の人数分料金が発生する
    ・プロジェクト数上限無し
    ・全履歴の保存
    ・プライベートプロジェクト(チーム内に招待された人のみ開示)
    ・チームライブラリが作れる
    ・Slack連携可能
    -Organization
    ・チーム向けプラン
    ・有料
    ・セキュリティを強化したもの
  • チーム構成によって選ぶべきプランが決まってくる
  • 権限が2種類ある
    -Viewer(閲覧者)
    コメントのみ可能
    -Editor(編集者)
  • チームごとに料金が発生する
  • 1チームにつき、支払いを行えるのは1ユーザーのみ
  • 権限付与は簡単にできてしまうので注意

1-5. Figmaのファイル管理とSketchファイルのインポート方法

わかったこと

  • 他のデザインツールと違いファイルをクラウドに保存する
  • ネットにつながっていればすぐ上書き保存される
  • オフラインで保存できてない場合はファイル名に白い●が表示される
  • 「.fig」ファイルとして一時的にローカルに保存もできる
  • shift+⌘+Sでローカルに保存できる
  • 拡張子は「.fig」(Figmaでしか開かない)
  • Figmaのファイル管理はファイルブラウザと呼ばれるダッシュボードで行っている
  • Recent=最近開いたファイル(50個が上限)
  • Draft=下書き(Recentから新規作成した場合は自動的にDraftに格納される)
  • Delete Files=ゴミ箱
  • チームの中にファイルを束ねる「プロジェクト」を作成することができる
  • プロジェクト内にはファイルをいくつでも置ける
  • プロジェクトごとに共有もできる(その場合相手は中の全てのファイルにアクセスできる)
  • Editorができること
    名前やデザイン、他の人の権限変更や削除含めほぼすべての機能が使える(オーナーをプロジェクトから退出されることだけはできない)
  • Viewerができること
    コメント機能は使える。他のユーザーに共有もできる(共有相手に編集権限は付与できない)
  • Skecthファイルはドラック&ドロップするとインポートできる

本日の感想

  • なんとなくわかったつもりでいたところを改めて知るのはめちゃくちゃ大事…

2020/01/29

学んだこと

Sketch

背景をぼかす方法

そもそもツールがどこにあるかがわからない

  • Blurs > Gaussian Blur → Background Blur に変更

 

 ツールはあったけどぼかしが適応されたない

  • Fillsの不透明度が100%のままだと適応されない

参考サイト

sketchtalk.io

 

Prototypeの設定について

Symbolに設定しているとオブジェクト選択ができない

  • 範囲指定ができる(Insert > Hotspot)

参考サイト

dev.classmethod.jp

 

 

 

2019/12/13-14

今日の日報

学んだこと   

詰まっているところ

  • git rmとrmの違いがわからない(mvも同様)
  • 単純にgitにあげたらLinuxのコマンドに「git」がつく(仕様的に)のかと思ったが、そうではなさそう(別物のようだった)

なんで詰まったのか

  • その前に動画内の『一旦ステージングエリアにあげたり、コミットした後にファイルを消す場合に、Linuxのコマンドrmやmvを使ってしまうと、Gitの方で「さっきまで管理していたファイルは一体全体どこいっちゃったんだ?」となるため』という言葉がわかってない

なんでわからなかったのか

  • 「ワーキングツリー」にあるファイルはGitの管理下じゃないの?
    (Gitはファイルの状態を保存する場所がいくつかある=「ワーキングツリー(作業エリア)」「インデックス(ステージングエリア)」「ローカルリポジトリ」「リモートリポジトリ」=これらは全部Git管理下にあるんじゃないの?)
  • となるとGitの管理下というのはどういうことなのか…
  • 管理されている状態ってどういうことなの?
  • Gitに管理されている状態をイメージできない…(Gitに管理されていないファイルとの違いは…?)
  • そもそもバージョン管理システムってやってることはわかるけど、どういう状態なの?

改めてGitのことを調べる

  • プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システム
  • ネットワークにアクセスできないなどの理由で中心リポジトリにアクセスできない環境でも、履歴の調査や変更の記録といったほとんどの作業を行うことができる(これが「分散型」と呼ばれる理由)
  • これまでの管理システムでは、サーバー上にある1つのフォルダを、利用者が共同で使っていた
  • 最大の特徴は、自分のパソコンに全ての変更履歴を含む完全なフォルダの複製を作成できる(「分散型」と言われる由縁)
  • 元フォルダのコピー=ローカルリポジトリ
  • ソースコードだけではなく他のファイル(画像やExcelファイルなど)も管理できる
  • GitはCUIツール(コマンドラインツール)
  • Gitではプログラムの状態がスナップショット*1として保存されている
  • このスナップショットのことをコミットと呼んでいる(コミットという単位でバージョンが管理されている)
  • コミットの履歴を辿ることでプログラムを特定のバージョンの状態に戻すことが可能
  • ローカル=個人の PC 上の環境
  • Gitでプログラムの変更履歴を管理する場合は、すべての変更はローカルリポジトリを介して記録される
  • ローカルのエリアは3つに分かれている(ワークツリー、ステージングエリア、ローカルリポジトリ

 

参考にしたサイト

www.sejuku.net
www.sejuku.net

backlog.com

backlog.com

本日の感想

  • やっとGitのことが少しわかってきた…
  • Gitのことがわかって、詰まった理由もわかった気がするのでその部分を言語化して早く問題解消しよう…!

*1:ある時点でのソースコードや、ファイル、ディレクトリ、データベースファイルなどの状態を抜き出したもののこと

2019/12/05

今日の日報

学んだこと

おさらい*1

  • Gitで触っている黒い画面はどういう立ち位置の物なのか(普段わたしが触れているものでいうとなにに当たるのか) 

    ◎調べたこと・参考にしたサイト

    eng-entrance.com

    techacademy.jp
    tech.nikkeibp.co.jp

    - 黒い画面はコマンドプロントプロンプトという名前
    - コマンドプロントプロンプトはコマンドを入力して命令を実行するツール
    - コマンドプロントプロンプトはCUIというインターフェース
    - 私たちが普段使い慣れているのはGUIというインターフェース
    - CUIGUIはシステムをなにで操作するかの違い
    - CUIは文字で操作して(キーボードでコマンド入力)、文字で結果が見える
    - GUIは画像で操作して(マウスで画面上のカーソルを動かす)、画像が結果で見える
    - GUIは1970年代に誕生した
    - (↓自分の頭を整理するために描いたメモ)
    f:id:kmimre:20191205233402j:plain

git入門

https://dotinstall.com/lessons/basic_git 

#08 gitでのファイル操作について

わからなかったこと、困ったこと

  • よくみたらファイルが kame/ 配下にいたので、myweb/ 配下に移動させた
    →と思ったら移動できてなかった
     →kame/myweb/ディレクトリに移動してしまったので、kame/に戻りたい(戻ってファイルをmywebに移動させたい)

    ◎やってみたこと
    - cd ディレクトリ名 で移動できるはずなので cd kame としたものの「-bash: cd: kame: No such file or directory」と表示されて移動できない

    ◎調べたこと・参考にしたサイト

    eng-entrance.com

    www.atmarkit.co.jp

    - 「そもそもなんで知らぬ間にkameディレクトリに移動したのか?もしかしたらiTermを起動しなおすとkameディレクトリに戻るのか?」と思い起動しなおしてみたら、やっぱりそうだった(kameディレクトリに戻っていた)
    - cd のみ入力したら kameディレクトリに戻ることができた
    - mv ファイル名 ディレクトリ名 でファイルの移動ができる(無事 index.html を myweb に移動できた!)

  • kame/ で作業続けていたみたいで、git add . をしたときにいろんなアプリの「許可しますか?」というポップアップがでてきて焦った(myweb/ 作業してても同じ挙動だったのかな…)

    ◎やってみたこと
    - 今度はちゃんと myweb で git add . したところ、ポップアップやエラーの表示なく、git status で確認すると、正常に index.html がステージングエリアにあがっていた
    - 一応確認のため、再びkameで git add . したらすごいエラー(warning: could not open directory)が表示されたので、前回大量にでてきたポップアップは kameディレクトリでaddするとでてしまうものだとわかった(kame配下のファイルはいろいろあるので、それをすべてgitにあげてしまう命令をしていたということ…。すでに一度「アクセスを許可しない」を選択しているために今回はポップアップが出なかったと思われる)

本日の感想

  • わからないことを検索するのも結構難易度が高くなってきた(言語化が難しくて)

*1:わかっているようでわかっていないことを改めて調べた

2019/12/03

今日の日報

学んだこと  

git入門

https://dotinstall.com/lessons/basic_git 

#08 gitでのファイル操作について

わかったこと

  • 一気に複数のファイルを変更して一気にステージングエリアにあげるということがよくある
  • git add . は今のディレクトリより下にあるファイルを全部addするコマンド
  • 一度ステージングエリアにあげたり、コミットしたりした後にファイルを消す場合、普通に rm や mv と入力するとよくない
  • git管理下に置かれたファイルは必ず git rm index.html といった形(gitのコマンド)で移動や削除する

わからなかったこと、困ったこと

  • どうよくないのか(エラーが発生するのか?)わからなかった
  • よくみたらファイルが kame/ 配下にいたので、myweb/ 配下に移動させた
  • kame/ で作業続けていたみたいで、git add . をしたときにいろんなアプリの「許可しますか?」というポップアップがでてきて焦った(myweb/ 作業してても同じ挙動だったのかな…)

本日の感想

  • わからなかったこと、解決するの時間かかりそうなので明日調べよう…

2019/12/02

今日の日報

学んだこと  

git入門

https://dotinstall.com/lessons/basic_git 

#07 差分を確認してみよう

わかったこと

  • git diff でどこがどう編集されたのかみれる
  • いまさっき変更して、まだステージングにあげてないものは git diff
  • まだコミットされてなくて、ステージングにあるものは git diff --cached

本日の感想

  • 目の前のことが理解できてもそもそもの構造というか概念的な部分を知らないままに進んでいる感じがある(なにがわかってないかわかってないから調べるにも調べられない…)

2019/11/29

今日の日報

学んだこと  

git入門

https://dotinstall.com/lessons/basic_git 

#06 現状の状態を把握しよう

わかったこと

  • git status でどのファイルはどこに置いたか確認できる
  • modified→変更されたファイル
  • Changes not staged for commit:→ステージにもきてない、コミットにもきてない
  • (use "git add <file>..." to update what will be committed)→追加するか
    (use "git restore <file>..." to discard changes in working directory)→間違えたなら戻してね(先ほどの変更が破棄される)
    などと git status は次やるべきことを丁寧に教えてくれている
  • git checkout -- <ファイル名> で戻すことも可能

わからなくて調べたこと

  • ls というコマンドをうっていたけどなんのコマンドだったのか

    ◎調べたこと・参考にしたサイト

    eng-entrance.com

    - lsコマンドは「list segments」の略
    - ファイルやディレクトリの情報を表示するコマンド
    - 古いコマンドでよく使われるコマンド
    - ls で現在いるディレクトリのファイルやフォルダを一覧表示

  • pwdが現在の作業ディレクトリを表示してくれたけど、lsとの違いはなんだったか

    ◎思ってたこと
    pwdは場所、lsは内容ってことかな?

    ◎調べたこと・参考にしたサイト
     

    dogandrun.hatenablog.jp

    - pwdは場所、lsは内容で合ってた
    - pwdはprint working directoryの略

  • (use "git restore <file>..." to discard changes in working directory) が
    動画では git checkout だったのでなにか間違ったことをして違った表示になってる?

    調べたこと・参考にしたサイト 

    qiita.com

    - restore は2.23.0がリリースされた際に新しく追加されたコマンド(ドットインストールでのバージョンは1.7.10.1)
    - git checkout に出来ることがあまりに多いため(ブランチ操作のほか、indexされたファイルの復旧、履歴上のファイルの取得など)、役割を明確に分けるためのコマンドが追加された
    - ファイルの変更は git restore に役割を分けている
    - 間違っているんじゃなくてアップデートされて表示が変わっただけのようだった

  • ブランチってなに(これからの講座にでてきそうなので軽く調べる)

    調べたこと・参考にしたサイト 

    backlog.com

    - 履歴の流れを分岐して記録していくためのもの

本日の感想

  • 現状の場所や内容が文字で把握できても、ビジュアル的にわからないのでとにかく不安になる(現代っ子め…)