WEB業界での実務経験

他社サイトの実装内容をWappalyzerで調べて技術力を上げる

実務経験31日目、他社サイトの実装内容を調べて技術力を上げる

私が実務をしている会社の人はコーディングに関して実装したい内容がネットで見つからなかったら実装したい内容があるサイトでWappalyzerを使います。

WappalyzerはGoogleの拡張機能でサイトにどんな技術を使っているかを調べることができます。

 

こういう風に表示される

私のサイトだと↓と表示されます。

実務経験31日目、他社サイトの実装内容を調べて技術力を上げるこのサイトで使われている言語やツールです

 

これを会社の人から聞いた時に「これって使う機会はあるんだろうか?」とずっと思っていました。

それから半年位経ってから会社の人から↓のサイトみたいに画面の真ん中から全体に広がる動画を実装してくださいと言われました。

https://enzo-tsubamesanjo.jp/

「え、こんなのコーディングでできるの?」と思いましたが「そういえばWappalyzerがあったな〜」と思い使いました。

そしたら「これを使ってる?」と思う内容がありました、赤枠です。

GSAPって知らないキーワードが見つかりました

 

そしてさっそく「GSAP」でググりました、そしたら多分これを使っているだろうという記事を見つけました。

これですが複雑なアニメーションで使うみたいでこの記事を参考にして真似したのが↓です。

実装内容はここから

ソースコード(下手ですが)はここから

こんな感じで実装内容が何を使っているかが発見できたのでWappalyzerは使える時があるかもしれません。

 

案件サイトからも見つけることができるかも

ググってほとんど引っかからなくて自分にないスキルってあるはずですが大手企業はまず見つからない気がします、情報をさらす真似はしないでしょう。

じゃあどこを探すかになりますがクラウドワークスやランサーズなどで個人に委託する企業や個人の会社やフリーランスのポートフォリオです。

あるサイトのページを見ていて前のページに戻る時に「ちょっと待って下さい」みたいなポップアップブロックがありますが実装方法が分かりませんでした。

ある時ランサーズで実装の案件があって「あっ案件を出す会社を調べればいいんだ」って思いました。

ポートフォリオは自分の実績を見せる物だから自分の技術を載せているかもしれません

ただある程度以上に実績がある人じゃないと意味がないですよ、実務未経験に近い人は大した技術がある訳ないので(私も大した技術はないですが、、)。

情報を手に入れるのはコーディングがある程度できてからの話になるのでコーディングが微妙ならまずそれを出来るようにしましょう。

Progateを勉強して模写したい人用のデザインカンプを無料で配布していますのでよかったらどうぞ。

5、コーディングの復習用(その1)今回はハンバーガーメニューも入っています 今回は今までのコーディングの復習です。 いつものようにXDのデータをダウンロードしてく...