ポートフォリオサイト完成（制作過程）
完成
丸一日中ずっと制作をする日々でした。楽しかったー。
没頭するあまり、進捗をブログに書き溜めるのをおろそかにしてしまったので、簡単な動画にしました。
感想をくれた方々・進捗を見守ってくれた方々ありがとう。
同業の友人や他業種の友人・知人に幅広く制作の過程をお見せしてご意見・ご感想を求めてきた。
サイト構想を芽生えさせてくれた友人たちありがとう。
Pinterestありがとう（後述）。
英文添削をしてくれた方々ありがとう。
JavaScriptの指導をしてくれた友人ありがとう。
テーマ「私が好きなものでMy Worldを展開する」
私が好きなもの ＝ 模様替え要素、お菓子の家、アンティーク、今いる場所
- 家の絵をベクターで描いているのは、くっきりとしたパーツで書き出すのが好きだから。いずれは仮想空間的模様替えをなんらかの形で実現したい。
- 全体的に色あせているカラーを使っているのはアンティークが好きだから。PANTONEの2016流行色カラー見本から選んだ。
- How Come? Home Human3つのテーマの意味を説明するモーダルの色は私が今いる場所で見た空の色。
現段階ではAffinity Designerでお絵描きしたパーツを全部生かしきれていない。アンティークっぽさが色だけで出ていて、絵としては表れていないのでぱっと見ただの退色がすごいサイトになってしまっている。
まだまだ開発しがいのあるサイトです。夢はまだ続く。
参考資料はPinterestから。
いずれポートフォリオサイト内にひとつずつ記述予定。
進捗30％？(アニメーション4個実装)
つい進捗報告を忘れて作業にのめりこんでしまう。
会社で日報やチームでの共有があるように書いておかないと。
やったこと、できたこと、どうやってできたか、できなかったことはどこでつまづいているか。自分のためにも書く。
コードはこちら。
下書きに残っていた泣き言。
JavaScriptもだけどCSSも分からない。
widthとheightが分からなくなる。
画面の真ん中に配置する方法は、この2つがメイン？
- htmlとbodyともにwidth, heightを100%にする方法。
- position: absoluteでtop: 50%, left: 50%,
transform: translate(-50%, -50%); にする方法。
参考にするサイトさんはposition: absoluteの方法で真ん中にやっている人がほとんど。
時と場合によるのか。
widthとheightの単位に何を使うか迷う。
以前、実務でheightにvwを使っているコードを触ったことがある。
heightに幅の単位を使う＝幅と同じ相対的に高さを決めたいってこと？
vhをLPサイトを作るときに使ったことがある。
safariでおおいに崩れてしまって違う単位にした思い出。
ただ、それは他の部分でレイアウトが崩れる要因があったことが大きい気がする。
iPhone5を基本に作っていて、iPhone6に変えるとずれる。
萎える。iPhone5やiPhoneSE愛好家が根強いことを知っているから切り捨てたくない。
JSでアニメーションを作っていると位置調整が難しい。
検証の仕方が分からない。位置調整はそもそもCSSのほうが楽じゃないか？
background-imageとimgの違い。
基本なのに忘れてた。backgroundでアニメーション画像を指定していたが、私にとってはサイトを構成する大事な要素なので、imgタグかSVGでいくことに。
やったこと＆できたこと
How Come?をシュッと出現させて彼方にやった。
https://howcome.dev/opening.html
こちら↓をお手本に。
See the Pen CSS3 Text Animation Effect by Nick Mkrtchyan (@Sonick) on CodePen.
「？」の挙動をすこし変更。
前に書いてたWeb Animations APIで高さをvhに直した。
https://howcome.dev/opening2.html
まだ微妙な動き。scaleで拡大縮小させると座標が変わって位置の指定が分からなくなる。みんなどうやってるんだ・・・。
ずっとfill: forwardsとopacityで最後「？」よ消えてくれと願っていた。
Web Animations APIでのopacity指定が本当に分からない。単体だといけるんだが、transformと組み合わせると効かない。
諦めてCSSでやるか・・・と思ったら他の人のコードでscale(0)にしたら消えていた。消えた。ありがとう。
letter-glowでintro文を彩った。
https://howcome.dev/opening3.html
最初に見つけていいなと思ったのはこちら。
See the Pen Transmission: Glowing Text Animation by Stephen Scaff (@StephenScaff) on CodePen.
こっち↓はそのあとにJavaScriptで書きつつSpanizerとやらをAjaxで呼び出すとこ
settings: {
letters: $(".js-letters")
},
このあたりだけjQueryを使っている？と思ったのでお手本にさせてもらった。
私はJavaScriptの書き方を勉強したいんだ。
でもプラグインを使ったほうが効率良い場合は使う。というかこの文字がキラキラ現れる効果は検索では他に出なかった。みんなこれ使っているようだ。
See the Pen Spanizer: Text Animation by Yunus Ekim (@yunusekim) on CodePen.
というかAjaxとは・・・。
spanで一文字ずつ囲んでいく書き方。
nth-childを文字数分書きたくなかった。for文の書き方を参考にさせていただいた。
letter-glowの効果はとてもいいのだが、字数が多いと画面外に飛び出てしまう。改行で対応しているが、このあとレイアウトうまくいくだろうか・・・。
文字をぶくぶく浮かばせては消え浮かばせては消え。
これをcodepenで見つけた時、歓喜。まさにこれが私の思考に近い。これこれ！
See the Pen Floating text animation by Gleb (@g1eb) on CodePen.
SVGを圧縮。
svgo-guiがいいと知ってインストールしたものの、画像が壊れる。変な切れ目が出来たり、パスがガタガタに壊れたり。
素直にすでに入れてあったgulp-svgminを使ったら綺麗にうまく瞬時にやってくれた。なぜ一度避けたかというと、全然動いてなかったから。頑張ってどこが間違っているのかgulpfile.jsを見たら
.pipe( changed( './assets/images/*' )
の最後に*が抜けていた。解決できてよかった〜。
書き出しにはアウトライン化（Affinity Designerではカーブに置き換える）が望ましいようなのでカーブにしといた。テキストの場合かな？まあカーブにしたところで問題ないので一応しといた。
読んでも分からなかったSVG書き出しのヘルプ。
できなかったこと
promiseでアニメーションを順番に表示させていくこと。
できないので取り急ぎhtmlとJSファイルを分散させて試運転中（涙）
おおかたのことはJavaScriptコードレシピ集とQiitaで解決しているが、できないなあ！
まず書くpromiseを場所が分からない！
アニメーションをどうやって呼び出せばいいかが分からない！
やりたいこと
アニメーションを1個、2個、3個作りたい・・・。
おおもとの超シンプルな経歴とかのページを彩りたい。
進捗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'.
やりたいこと
- 今はCSSのように時間差で次のアニメーションを出すようにしているが、非同期処理というやつを使って楽に管理してみたい。とりあえずは時間差の方法で作り終わってから。
- クリックイベント、タップイベントを作りたい。これもとりあえず7割がた完成させてから。
- 一度きりのいいところまでコード書いたら、またお絵描きに戻る。ずっとコード書いているから気分転換。
頭の中には構想が広がっている。ベイジの枌谷さんが「デザイナーは手を動かすことが好きで、かつ、それをリリースするところまでやりきれるかが実力。」とおっしゃっていた。響く〜。
参考サイト
イベント参加(DX時代に必要な顧客体験/デザイナー向け！接触確認アプリ「まもりあいJapan」UXとUIデザインの取り組み)
今流行りのzoomでオンラインのセミナーイベントに参加。
楽しかった！
こういう人たちと働きたい、と思える会社がある。
私の今の目標は「自分と共通した倫理観を持った人とともに働く。」
倫理観はどこで判断するか。日常会話でヘイトを言わない人です。
ヘイトとは？どこからがヘイトか？ここの意見が合う人。
そうした環境を避けるには自分のレベルを上げるしかないのでポートフォリオ制作に尽力している。WEB業界の方々はSNS発信が盛んなので普段の文章から読み取れることは大きい。くわえて勉強会は、自分の視野が広がるだけでなく経営者や事業責任者の実際の声が聞けるよい機会。
I attended two online seminar events at zoom which is talked about recently.
It was so fun!
I have some companies which I want to work.
My current goal is that I work together people who have a common sense of ethics.
How do you judge sense of ethics? In my opinion, a person who does not say hatze speech in everyday conversation.
What is Hate? When does it become hate speech? In case someone has same opinions about this, I want to be with the one.
Since I have no choice but to raise my level to avoid such an environment, I am making every effort to create a portfolio. People in the WEB industry are actively post on SNS, so there are lots of things that I can observe or guess what the person's personality is like from one's sentences. In addition, study groups are a good opportunities not only to broaden my horizons, but also to hear the actual voices of CEO or director.
Ich habe an zwei Online-Seminarveranstaltungen bei zoom teilgenommen, über die kürzlich gesprochen wurde.
Es war so lustig!
J'ai assisté à deux séminaires en ligne sur zoom dont on parle récemment.
Je me suis bien amusée!
assister 〜に参加する
ligne オンライン
今日やったこと(アニメーションを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はだめなのか。わっからーん。
とりあえず「？」が動いたのでよかった。
今日やったこと(CSSで再現/yui540さんの技術をもっと知る)
CSSでとりあえず書き始めることにした。
JSの検証ツールの使い方が分からないから。
一度開くとページを閉じないと再読み込みが出来なくなる謎・・・。やり方が悪いだけだったら恥ずかしい（笑）
検証がしにくいのでCSSで再現してからJSに書き直そうかな？と。
easeInElasticはCSSで書いたらすぐにできた（笑）
書き方載っていた（笑）そして私の求める動きではなかったので、keyframeを編集して調整しているところ。
『ごった煮技術書』を購入。
前回の記事で感銘を受けている方として紹介したyui540さんが制作者のおひとりとして販売されている本。ほかの方が書かれている部分も気になる。
一緒に書かれたおりばーさんの記事。
ああもうほんとすき。yui540さんのアニメーション作品。
まだまだ分からないことばかり。
そして知らないことばかり。
適度に自力で奔走しつつ、適度にインプットし、適度に息抜きしながらアイディアを生み出したい。形にしたい。わくわく。
一応サイトにもアップした。
今なら意味不明ななにかが見られます。
https://howcome.dev/opening.html
ちょうど先日聞いた長谷川さんのPodcastでも、途中経過を報告するってクライアント側からはどういう反応なのかというお話をされていた。これは自分の制作物なので細かいこと気にせず実験中。
ポートフォリオサイトのオープニングアニメーション作成
Web Animations APIを使ってオープニングアニメーションを作る（仮）
yui540さんの『臆病な魔女』のアニメーション。去年の11月ごろ初めて見てから今なおじわじわと感銘を受けている。
もう何回見ただろう。友人や周りの人にも見せている。
こんなわくわくするものを私も作りたい。
まずは私がわくわくするものを作るぞ。
今までアニメーションは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を動かすやり方が難易度高い。
↓これにeaseOutElasticを組み込みたかった。
requestAnimationFrame()を使う必要があるらしい？
連続して画像を何個も表示させながら、ひとつひとつをアニメーションさせたい。
このひとつのアニメーションでも使われているから、使うんだろうなあ。
目標
- ひとつのやり方に固執しない。
- 途中経過を見せていく。同じ職種の仲間に関わらず、WEB業界関係のない周囲の人や友人にインスタ等で謎の進捗報告をしている。100%終わってから見せたときに「えっ、、これなに・・・？」と予想外の反応をされるとショックがでかい（笑）なるべく多方面の意見を浴びながら制作していくことに慣れる練習。