How Come? - Development Blog

仕事のメモなど

進捗15%(アニメーション制作/JSと仲良く/gulpfile.js更新)

できたこと

デモページURL↓ リアルな進捗が確認できます。(現在スマホのみ対応)

https://howcome.dev/opening.html

  • はてなとHowcomeと柱が降ってくるとこまでやった。
  • addEventListenerをぼやっと理解。
  • BrowsersyncのConnectedの文字を消した。
  • HTMLとSCSSのオートリロードのみ適用していたが、JSを書き始めたのでJS更新時も自動でページリロードさせるようにした。前回もお世話になった「今からでも遅くないGulpを使った開発環境の作り方 | オレインデザイン - 岐阜県岐阜市のWordPress制作専門家」さんを参考に。
  • Autoprefixerの設定はgulpfile.jsではなくpackage.jsonに書くとエラーが出ない。

  • JSHintでconstやlet、ES6を使うとエラーになる。JSファイルの最初に/*jshint esversion: 6 */を書いたら消えた。

  • リポジトリ名がPortfolioで分かりづらいと思ったのでサイト名に変更。GitHubリポジトリ名を変更してくれって言われた。.git > configで変更すればいいだけだった。

SVGも追加していくので画像の圧縮とJSの圧縮も追記したが、画像ファイルは圧縮されたものをアップするとして、JSはどうすればいいのか分からない。

SVGは4KBあったものが2KBになった。圧縮したほうがいいのかとか細かいことはまだ調べていない。とりあえずやった。

 

できなかったこと

  • appendChildを使いたかったが以下のメッセージによりできなかった。未解決だし、今となってはなぜ要素を追加したかったかも忘れた。

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

  •  マウスのドラッグ&ドロップで要素を移動&タップで移動するやつやりたかった。JSは動いたが、CSSの書き方が悪いのか画面全体に動いてくれなかった。とりあえず放置。

 

やりたいこと

  • 今はCSSのように時間差で次のアニメーションを出すようにしているが、非同期処理というやつを使って楽に管理してみたい。とりあえずは時間差の方法で作り終わってから。
  • クリックイベント、タップイベントを作りたい。これもとりあえず7割がた完成させてから。
  • 一度きりのいいところまでコード書いたら、またお絵描きに戻る。ずっとコード書いているから気分転換。

頭の中には構想が広がっている。ベイジの谷さんが「デザイナーは手を動かすことが好きで、かつ、それをリリースするところまでやりきれるかが実力。」とおっしゃっていた。響く〜。

 

参考サイト 

webdesign-dackel.com

 

www.it-swarm.dev

 

qiita.com