How Come? - Development Blog

仕事のメモなど

今日やったこと(アニメーションをCSSからJSに)

CSSでだいたいの動きを決めてからWeb Animations APIに書き換えた。

  • 最初のアニメーションの画像を変更して、私のテーマでありサイト名でもある「Howcome?」の「?」を一番に出すことに。
  • 「?」はAffinity Designerのペンツールですでに画像として作っていたが、一番大事なところなので文字情報にしておこうとGoogle Fontsに変更。
  • JavaScriptの書き方がおかしいのか、Web Animations APIの書き方に準拠していないのか、animateというプロパティは存在しないと言われ続けて詰んでた。

Web Animations API を利用する - Web API | MDNの魔女のコードを参考に、CSSで作ったアニメーションを適用させようとしていてダメだったので、一度魔女のコードをHTML, CSS, JSすべて丸コピー。動くことを確認。
どうやら、配列の書き方に問題があるっぽい。これならいける。

let howcomeTransform = [
{ transform: 'scale(0.2) translate3D(0, -20%, 0) rotate(20deg)' },
{ transform: 'translate3D(0, 20%, 0) rotate(80deg)' },
{ transform: 'translate3D(0, -10%, 0)' },
{ transform: 'translate3D(0, 10%, 0) rotate(20deg)' },
{ transform: 'translate3D(20%, 50%, 0)' },
{ transform: 'scale(0.1) translate3D(10%, -50%, 0) rotate(-180deg)' },
{ transform: 'translate3D(-18%, 80%, 0) rotate(30deg)' }
];

 

ここにopacityを入れるとエラーになる。魔女コードにはtransformと一緒にカラーコードの変化も書いてあるのにopacityはだめなのか。わっからーん。

とりあえず「?」が動いたのでよかった。

https://howcome.dev/opening.html

今日やったこと(CSSで再現/yui540さんの技術をもっと知る)

CSSでとりあえず書き始めることにした。

JSの検証ツールの使い方が分からないから。

一度開くとページを閉じないと再読み込みが出来なくなる謎・・・。やり方が悪いだけだったら恥ずかしい(笑)

検証がしにくいのでCSSで再現してからJSに書き直そうかな?と。

easeInElasticはCSSで書いたらすぐにできた(笑)

書き方載っていた(笑)そして私の求める動きではなかったので、keyframeを編集して調整しているところ。

『ごった煮技術書』を購入。

前回の記事で感銘を受けている方として紹介したyui540さんが制作者のおひとりとして販売されている本。ほかの方が書かれている部分も気になる。

note.com

 

一緒に書かれたおりばーさんの記事。

note.com

 

ああもうほんとすき。yui540さんのアニメーション作品。

twitter.com

 

まだまだ分からないことばかり。

そして知らないことばかり。

適度に自力で奔走しつつ、適度にインプットし、適度に息抜きしながらアイディアを生み出したい。形にしたい。わくわく。

 

一応サイトにもアップした。

今なら意味不明ななにかが見られます。

https://howcome.dev/opening.html

ちょうど先日聞いた長谷川さんのPodcastでも、途中経過を報告するってクライアント側からはどういう反応なのかというお話をされていた。これは自分の制作物なので細かいこと気にせず実験中。

https://automagic.fm/post/617861219373760512/mity

automagic.fm

ポートフォリオサイトのオープニングアニメーション作成

Web Animations APIを使ってオープニングアニメーションを作る(仮)

yui540さんの『臆病な魔女』のアニメーション。去年の11月ごろ初めて見てから今なおじわじわと感銘を受けている。

yui540.graphics

もう何回見ただろう。友人や周りの人にも見せている。

こんなわくわくするものを私も作りたい。

まずは私がわくわくするものを作るぞ。

 

今までアニメーションはCSSで書いていた。

今回Web Animations APIを使う理由は、JavaScriptを書く練習と理解を深めることが目的。『JavaScriptコードレシピ集』でアニメーションの作り方を見たら紹介されていたのでやってみようかと。

 

素材はAffinity Designで描いている。描くのに煮詰まったらコードを書き、コードに飽きたらお絵描きに戻っている。なにこの至福のひととき。楽しくてやめられない。

 

easing: easeOutElasticをやりたい。

結論:現時点ではできなかった。

  • Math Functionで挫折。
  • switch文の復習をした。
  • @paramってなんだ?JSDocコメントを知る。
  • 書き方が分からない。consoleエラーを読んでエラー個所を見てもどうしたらいいか分からない。

  • ひとまず『JavaScriptコードレシピ集』のサンプルChapter10の183と同じ動きからスタート。

  • このサンプル、CSSの書き方も参考になった。display: flex; justify-content: centerで要素を真ん中に寄せる方法を知った。

  • CSSだと検証画面でeasingやdirectionの他の候補が出てくるが、JSの場合は逐一MDNで参照しないといけないのだろうか。
  • 検証画面でJSを動かすやり方が難易度高い。

easings.net

 

ics.media

 

↓これにeaseOutElasticを組み込みたかった。

github.com

 

ics.media

 

requestAnimationFrame()を使う必要があるらしい?

連続して画像を何個も表示させながら、ひとつひとつをアニメーションさせたい。

このひとつのアニメーションでも使われているから、使うんだろうなあ。

github.com

 

目標

  • ひとつのやり方に固執しない。
  • 途中経過を見せていく。同じ職種の仲間に関わらず、WEB業界関係のない周囲の人や友人にインスタ等で謎の進捗報告をしている。100%終わってから見せたときに「えっ、、これなに・・・?」と予想外の反応をされるとショックがでかい(笑)なるべく多方面の意見を浴びながら制作していくことに慣れる練習。

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

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

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

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

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

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

 

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

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