プログラミング奮闘記(仮)

知ったことややったことを好き勝手書く日記のような何か。プログラミングのことが多めなので、タイトルはそれっぽく。

Adobe XD勉強中

先日に引き続き、WEBデザイン進めています。操作がおぼつかなすぎて、今回も進捗悪いですが、それとなく操作を覚えてきています!

参考にさせていただいている動画ではPhotoShopと連携して、画像をガシガシいじっているのですが、私はPhotoShopがないので、Paintでしか画像をいじれません(;_;)

画像加工は私の目指しているゴールに必要なスキルではありませんが、出来たら気持ちよさそうだなーと思って指をくわえて見ています(笑)

WEBデザインについては、強制的に明日で形にして、来週からはコーディングに入っていきたいところです。HTMLとCSS・・・忘れていないといいなぁ。

f:id:aeega56z:20210410231003p:plain

 

Adobe XD使用開始!

さっそくAdobe XDを触ってみました。Youtubeで分かりやすい動画あったので、参考にしながら架空のカレー店をコンセプトにWEBデザインをしています。

まずは操作方法を覚えるところからですが、なかなか覚えられず苦戦。今日の進捗は非常に悪いけれど、いろいろ触って操作方法を覚えていきたいと思います。

f:id:aeega56z:20210409234150p:plain

 

配色の基本について学んでみた!

本日は配色の基本についてです。センスを身に着けるのは大変なので、理論を学んでいくことにしました。

配色の基本

Webサイトに限らず、配色の基本は、基本色(ベースカラー)+補助色(サブカラー)+強調色(アクセントカラー)の3~4色を決めることです。基本色を多めに使い、ほかの色でバランスをとるように、色の量は面積でコントロールすることがポイントです。

色は、明度や彩度の違いで「トーン(色調)」というグループに分かれます。ピンクや水色などの淡い色を一般的にパステルトーンといいますが、「ペールトーン」が正式名称。鈍い色のグループを「ダルトーン」、鮮やかな色のグループが「ビビッドトーン」です。配色はこのトーン内d色を選択することが始まります。

色相環上で、120°の位置関係にある3色を使った配色を「トライアド」といい、バランスのいい配色となります。ただし、原色を使ってしまうと主張が強い印象になってしまうため、注意が必要です。下に色相環に三角形を書いたものを付けてみました。(適当に作った三角形なので120°になっていないかもしれませんが悪しからず。)

f:id:aeega56z:20210407232510p:plain

 〆

Webデザイン、こういった理論に頼って何とかしてきたいと思います。

webデザイン勉強中

コーディングスキルの基礎は学んだので、webデザインについての勉強に入りました。本日はwebの画面構成について学びました。

ナビゲーションとコンテンツについて

配置の典型例として3つあるようで、そちらについて記載します。特別意識したことはなかったですが、読んでみると確かにといった内容となっていました。

左袖メニュー型

左側にナビゲーションエリア、右側にコンテンツエリアを配置する方法です。ユーザの視線は、まずナビゲーションエリアに向かうため、ナビゲーション要素が重要な場合に採用されます。例えば・・・AmazonのようなECサイトですね。逆にコンテンツが重視されるような場合は、ナビゲーションエリアとコンテンツエリアを逆転するようです。ブログなんかが該当するでしょうか。

f:id:aeega56z:20210405235220p:plain

上部メニュー型

画面の上側にナビゲーションエリア、そこより下のエリアにコンテンツを配置する方法です。ページを上から下に移動するユーザの視点をとらえやすいので、ナビゲーションエリアが重視される場合に適しています。それとメニューが上にあるため、コンテンツエリアの自由度が高いのも特徴です。

f:id:aeega56z:20210405235252p:plain

逆L字型

画面の上部と左側にナビゲーションエリアを配置する方法です。ユーザの視線移動の優先度が高い上部エリアにグローバルナビゲーション、左袖にローカルナビゲーションと配置する場合が多いです。2つのナビゲーションが利用できることで、コンテンツ量が膨大なうえ、分類が複雑webサイトに向いています。

f:id:aeega56z:20210405235304p:plain

 〆

今回初めて意識し、言語化したので今後のwebデザインに活かしていきたいと思います!!!

jQueryとReactどっちがいいのさ

こっそりと、はてなブログの"デザインCSS"にCSSを記述してみました!こんばんは、アユザックです!

すごく駆け足で、ProgateのjQueryも終わらせました。同じ実装を別の言語でやるわけではなく、それぞれで別機能が演習となっていたので正直全く違うものという印象しか抱けなかったので、調べてみることにしました。自分で実施したわけではないし、実施したところで判断できるほどの知識も技量もないので、軽いメモ程度かな。Reactのほうがメリットが多くなっているけど、Reactベースでの説明記事が多かったからこうなっているだけだと思います。

jQuery

メリット

  • 手軽に効果を試せる
  • 学習コストが低い
  • Ajax処理が簡単に実装可能

デメリット

  • 再利用性・保守性が低い(HTMLやCSSに依存していて、一部を変更するためにはHTMLやCSSにも変更必要)
  • 動きのあるページを作るには、プログラム部分が複雑化する
  • DOM表示の際にすべてを読み込みなおす

React

メリット

  • 再利用性・保守性が高い(該当部分のReactを作成することができ、HTMLやCSSの変更は不要)
  • JSX記法でjsファイル内にHTMLと同じ書き方が可能
  • SNSECサイトに有効
  • ReactNativeでスマホアプリが作成可能
  • DOM表示の際に差分のみ読み込む

デメリット

  • 学習コストが高い
  • 環境構築に手間がかかる
  • ゲームや大量画面切り替えでは持ち味が活きない

結局どうすりゃいいねん・・・もう、決めの問題や!

簡単そうなのはjQueryだし、イメージ的に大規模開発はReact、小規模開発はjQueryなのかな、と。目的にそぐわない難しいものに手を出してモチベーションを下げるのも本末転倒なんで、ひとまずはjQueryに絞っていきたいと思います(^^)

学習方法について

プログラミング記事が続いていました(自分でもびっくり!)。今回はプログラミング記事を書きたい気持ちではないので、ちょいとコーヒーブレイク。今回は学習方法について書いていきます。

心理学に基づいた学習方法をしてみよう!

とはいえ、私は大学で心理学を専攻していたわけではありません。趣味で読んでいた本から得た知識ですので気軽に流し読みしていただければ良いと思います。

復習を繰り返そう

復習って面倒臭いですけど、実は心理学的にも根拠があるんです。記憶には3種類あって「感覚記憶」、「短期記憶」、「長期記憶」があります。このうち、「長期記憶」は覚えられる量が無限で保持できる期間が一生涯というものです。

この「長期記憶」はいきなりマスターできるものではなく、必ず、「感覚記憶」→「短期記憶」→「長期記憶」となります。そしてこのローテーションのために必ず復習が必要になってきます。

2体の敵を打ち倒そう

人間の脳は複雑で色々な現象が起こります。その中でも学習の敵になる抑制が2つあります。「順行抑制」と「逆行抑制」です。

  • 順行抑制・・・前に覚えた事柄が、後に覚えた事柄の記憶の保持を妨害する。
  • 逆行抑制・・・後に覚えた事柄が、前に覚えた事柄の記憶の保持を妨害する。

例えば、暗記系の作業をしているとこんな経験思い当たりませんか?これを防ぐためには適度に間隔を空けることが重要となります。簡単にいえば、区切りの良いところで休憩を入れるだけです。(休憩の内容は、勉強と全く関係のないことをしてください。ただし、あまりそっちに夢中にならない程度で(笑))

復習の効率をあげよう

これも暗記系の話になりますが、例えば英単語学習(英語学習が自分の趣味なのですみませんw)を繰り返し復習をしていると、「最初の方と最後の方の単語はよく覚えているけど、途中で出てくる単語は怪しい。」ということはないでしょうか?これは「系列学習」によって「系列位置効果」が出てしまっているためです。

  • 系列学習・・・多くのことを同じ順番で覚える。
  • 系列位置効果・・・始めの方、または、終わりの方が記憶に残りやすい。

復習する時は順番を変えて覚え直すことで、効率的に記憶することができます。

ちなみに・・・

余談ですが、合コンなんかでは、これを利用して、「最初」と「最後」にアピールするのが良いともいわれているようです。現在コロナ禍で合コン自体はないかもしれませんが、もし参加した際に、気になる人から連絡が欲しい場合は「去り際」に印象付けるのを意識してみてはいかがでしょうか(^^)

別のアプローチでReact実装しました

頑張れ頑張れできるできる。絶対できる、頑張れもっとやれるって!そこで絶対あきらめるな!しじみがトゥルルって頑張ってるんだ!!そんなわけで若干前のアプローチはあきらめながら別のアプローチを行いました。結果として、HTMLにReactの埋め込み成功しました。まずは結果の画面から。

f:id:aeega56z:20210401232143p:plain

以下のサイトを参考にさせていただきました。

ja.reactjs.org

Progateで習得した使い方と若干異なっていました。おそらくProgateは環境を構築している前提で、今回の方法は環境を構築していなくても使える方法なのかなと思いました。Progateは正体不明のjsファイルを読み込んでいましたが、今回のものはWebからjsファイルを指定していたので。

私が行ったことは、上記のサイトの通りそのまま実行したのですが、一応備忘録のため、やったことを載せておきます。

 HTMLについては、読み込むIDの指定と、使用するスクリプトを追加しました。

f:id:aeega56z:20210401232733p:plain

index.html

 JavaScriptは流用して、中身は一切変えておりません。

f:id:aeega56z:20210401232906p:plain

like_button.js

これを書き換えていけば、やりたいことができるかも!