How Come ? - Development Blog

WEBやガジェットなどのメモ

アニメーション制作序盤(と思う)

固まるイラレにマジギレした日。

コードをずっと書いていたらお絵描きしたくなってイラレを起動。

長方形・多角形・楕円形からペンツールで思いのままに形を作っていくことが本当に好き。

仕事ではイラレの作業は請け負ったことはないが、プライベートではたまにいじっている。

今回は漠然と、ポートフォリオサイトで動かすアニメーション素材になればいいかと思って。

 

そしたらイラレが固まる固まる。すぐフリーズ。タスクマネージャで強制終了しても再起動しない。小さな黒い四角い窓が現れるのみ。何を表示したいんだ。

5回ぐらいはMacの再起動を余儀なくされた。再起動ってそんなに繰り返すものじゃないでしょ。冷や汗。

  • MacBook Air 2016 メモリ8GB
  • ブラウザはVivaldiを1個立ち上げてタブ1個開いてPinterestを開いているのみ。
  • ブラウザのキャッシュクリアやMacのディスクユーティリティでFirst Aidをやって問題なし。
  • Illustrator 2020 インストールしたばかり。
  • スマートガイドのチェックをオフ(軽くなるらしい)。
  • 環境設定ファイルをデスクトップに移動しても変わらない。

 

調べて出てきたことは全部やった。終わった。詰んだ。

画像なんて置いてないのに。四角形とペンツールしか使ってないのに、ものの5分10分で固まる。イライラMAX。

 

Affinity Designerに一縷の望みをかけて。

イラレの代わりになるとして話題の。

感動。途中まで作っていたAiファイル、開いてくれたんだけど・・・!ありがとう!!10日間無料終わったら買うと思う!!!今なぜか50%オフだし!

とりあえずペンツールを使いたいだけなんだ。

 

順調にお絵描きを始められている。本当にありがとう。Affinity Designer。

しばらく経ってふと思う。

このアニメーションってどうなるんだ。

ふつう概要をおぼろげに思い浮かべてやるんだろうなあ。見切り発車。

 

前に実務でやったことのあるアニメーションとしては、CSSスプライト。

あれ意味が分かるまで難しかったけど面白かった。9枚の連続画像を3×3で並べて、X軸とY軸を動かしていくやつ。

それと複数の画像を重ねて表示してmix-brend-modeで加算したり、animationでくるくる回したり。

 

パーツをAffinity Designerで描いて用意したら、XDかなんかで動きの流れを作ったほうがいいんだろうなあ。

 

方向性がなかなか定まらない。

今は本能のままにやりたいことをやってみている。自分が楽しくてわくわくすることをやるのが一番だ。

インクルード、フォームの練習とターミナルカスタマイズ

Germany Walkという架空の観光案内サイトを作った。

写真や情報は去年の旅行の際に自分で撮ったものを使用。

 

GitHubはこちら。

github.com

 

実装したこと

  • header, footer, asideをパーツ化してインクルード。最初はhtmlで作っていて、htmlのままhtaccessでインクルードしようとしたが上手くいかなくて面倒になったのでPHPにした。
  • メルマガのフォーム。
  • コマンドをカスタマイズ。デフォルトが見にくくてイライラが爆発。ついでにbashからzshにしてみた。

カスタマイズしたコマンドの画面

コマンドをカスタマイズした。

 

実装できなかったこと

  • メルマガフォームでボタン部分を<button>にしたかったが、type="submit"にしても動かなかった。JSを使う必要がある?現在、ボタン部分はinput要素ではなくbuttonを使う傾向があるようだから使いたかった。value属性に日本語を書かなくて済むのでいいと思う。
  • normalize.cssのSASSでのインポートに失敗している。
  • BrowsersyncでPHPも読み込んでほしくてgulp-connect-phpをインストールするも、できない。

 

参考にさせていただいた記事など

gray-code.com

 

qiita.com

追いこみ制作いったん終了

すっかり更新が途絶えてしまった。

14日で終わる予定が、実質17日。

 

やったこと

GitHubでエラーの出ていたlodash.templateのアップデート。

npm audit fixをしてからsudo npm install lodash.templateをした。

blog.kobalab.net

 

favicon設置。

consoleでエラーが出ていたので設置。忘れていた。

 

2週間と3日でできたこと

Howcome? R's Portfolio Website

  1. 更新しやすく分かりやすいフォルダ分け、ディレクトリ構成を考えて作成。
  2. BEMとPRECSSをとりいれてclass名をつけた。
  3. gulpfile.jsで、ファイル保存時にSCSSのコンパイルとページリロードが自動でされるローカル環境を作った。

 

ずっとやりたかったことができて嬉しい。mixinやmoduleの概念を調べ、いろんな人のやり方を参考にした。あれでもないこれでもないと模索。整理整頓しながら自分なりの今のベストを作った。

自分で一からファイル構成を考えると、どんなものか身をもって体感できた。今後人が作りあげたファイルに途中から参入する場合に読み取りが早くなるのではと思う。

単なるコピペではなく理解しながら作業した。

 

しかしこれだけじゃまだ弱い。

 

qiita.com

 

tsudoi.org

 

qiita.com

追いこんで制作13日目

できたこと

  1. CSS設計
  2. ディレクトリ構成を考える。
  3. SCSS使えるようにする。

 

購入した本の著者の考案したCSS設計

precss.io

 

tr>th>tdとdl>dt>dd、ul>liの使い分けはいつも迷う。

いろいろなサイトのソースコードを眺めても意外とul>liだけで構成されていることが多いような。

webliker.info

 

Googleがスペース2個を推奨していると知って。

qiita.com

 

Sassは最初簡単にやろうと思った。

webdesign-trends.net

 

normalize.cssをSassでインポートするにはなんかちゃんとやらないといけないらしい。

qiita.com

 

gulpfile.jsの書き方が分からなかったのでこちらを参考にした。とても分かりやすかった。

olein-design.com

 

gulp sass すると、autoprefixerのエラーが出た。browsersの書き方がまずいらしい。

webrandum.net

 

Did you forget to signal async completion?とのエラー。

isgs-lab.com

 

-bash: gulp: command not foundと出る。

note.com

 

しばらくしてまたAssertionErrorエラー。node.jsとgulpのバージョンの組み合わせがまずいのでバージョンを下げないといけないとのこと。

qiita.com

 

またnodebrewを使わないでバージョン違いをインストールしてしまった。nodebrewを使ってバージョン切り替えを行う。まだよく分かっていない。
またgulpのコマンドが打てない。cliを再びインストール。

qiita.com

 

gulpコマンドで3000ポートが使えないと言われる。

ja.stackoverflow.com

 

プロセスを終了。ようやくSCSSコンパイルとローカルの自動更新ができるようになる。

eng-entrance.com

追いこんで制作12日目

やったこと

 

html流し込み

Vue.jsを使わなくてもtemplateタグが使えると知る。

WHATWGのLiving Standardの仕様書をチェック。

 

できなかったこと

templateタグをJSで動かすこと。

 

 

とにかく見切りをつけて形にすることを考える。

追いこんで制作11日目

体制を立て直す。

詰んだのでVue.js諦める。できるんじゃないかと思ったが、できないことが分かった。何ができて何ができないかが把握できただけでも収穫。期限はあと4日、急いでHTML, SCSS, JavaScriptで作り直すことに決める。

 

HTMLはもう出来ているから見た目整えていく。JSで効率化できそうなところをしていく。

 

経緯

 

v-forで繰り返せるのすごいなーなどと思いながら経歴や成果物の入力を終えた。

 

ESLintのルールに何度も怒られる。

 

qiita.com

qiita.com

 

さて、あとはSCSS書くだけー。

Normalize.css入れようー。

sass-loaderというものが必要らしいから入れてー。

 

deep-space.blue

 

sass-loader入れてからエラーの嵐で詰む。

 

 

qiita.com

 

webpack3をwebpack4にしないといけないらしい。

www.monotalk.xyz

 

エラー文でひたすらぐぐる

stackoverflow.com

 

qiita.com

 

igatea.hatenablog.com

 

qiita.com

 

github.com

 

stackoverflow.com

 

github.com

 

私が悪かった。こういうの分かっていないで or すぐに理解できずに、切り貼りの情報を付け焼き刃で試していても進めない。

qiita.com