できたこと
デモページ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'.
やりたいこと
- 今はCSSのように時間差で次のアニメーションを出すようにしているが、非同期処理というやつを使って楽に管理してみたい。とりあえずは時間差の方法で作り終わってから。
- クリックイベント、タップイベントを作りたい。これもとりあえず7割がた完成させてから。
- 一度きりのいいところまでコード書いたら、またお絵描きに戻る。ずっとコード書いているから気分転換。
頭の中には構想が広がっている。ベイジの枌谷さんが「デザイナーは手を動かすことが好きで、かつ、それをリリースするところまでやりきれるかが実力。」とおっしゃっていた。響く〜。
参考サイト