友人の会社のWebサイトをHTMLとCSS、Vue.jsを使って二つ作ってみた。
友人の会社のWebサイトをHTMLとCSS、Vue.jsを使って二つ作ってみた。
会社を立ち上げた友人に「Webサイトを作って欲しい～～!!!」と頼まれたのでHTMLとCSSで1つ、Vue.jsを使って1つ合計2つ作ってみました。もちろん無料で(笑)
これまで自分で作りたいと思ったものを自分で好きにつくったことは何度かあったのですが、人に頼まれて人の求めているデザインで作ったことはなかったので、いい経験になりました。苦労した点も含めて書いてみたいと思います。
HTMLバージョン
まずは、どういうものを作りたいのかというのがすごくぼんやりしてたので、そこをはっきりしてほしいと、色んな会社のサイトやテンプレートを送って決めてもらいました。使いたい文章や写真をワードに貼って送ってもらいました。
データベースは必要ないかなと思ったので、デザインを選んでもらって、HTMLとCSS、JavaScriptでさっそく作り始めた。デプロイはNetlifyで問題ないだろう。
3割くらいつくり進めて共有したところ、「やっぱり根本的に変えたい。。」と伝えられ、「マジかよ」と思いましたね。ここまでで大体5時間くらい使いました。。。途中まで進めての根本的な修正は思ってたよりもめんどくさくてイラっとした。けっこーやる気なくなりかけた。
2回目の根本的な修正は避けたかったのでしっかりデザインを選んでもらいました。どういったものを作りたいのかわりと細かく確認しました。
で、↓のサイトからデザインを再度決めてもらった。こんなにたくさんの種類が選べて、無料で使えるのはすごい。
翌日、選んでもらったテンプレートをもとに再度どこにどんな文章、写真を使うかをワードに貼ってもらって再度送ってもらった。確認して「全然テンプレートどおりじゃねえ。全然わからん。もうちょっと細かくテンプレート見て欲しい。」と伝えたところ、矢印つきで希望が送られてきました。こんな感じ。↓
「快適な暮らしを実現」 ← ここの文章を大きく、カッコよくオシャレな感じで!!!
「イノベーション」← サイズアップカッコいい感じ!!!
やっぱよくわかんねえーわ。言いたいことはわかるけど。テンプレートと全然ちげーー。ていうかなんで写真がURLじゃなくべた貼りなんだよ。
おそらく、イメージは自分の中であるんだろうな、ととりあえず納得して作り始めました。「なんでこんなくそめんどくさいことを無料でやってるんだ」と一人でイライラしたり、楽しんだりしながらHTMLとCSSを書き書き。
HTMLとCSSって難しいですね。エラーが出るわけでもないし、ただただ、思った通りに配置されない。細かく修正の連続で。テンプレート通りならこのめんどくさい作業は必要ないのになと思いながら。
途中何度か彼から連絡がきましたが、経過の共有はせず。翌日までシカト。
また変更の連絡が来てもめんどくさいし、そもそも「なんでこんなくそめんどくさいことを俺は無料でやってるんだ?」っていう思いがCSSと戦うたびに、 ｛width:350px; height:400px;｝っていってるのに全然動かないたびに、「なんでお前は言うことを聞けないんだt???。書いたとおりに動きなよ!」 「おいおいおい。お前はここで動かなくていいんだよ？」っていう思いとともに100回くらい湧き上がってきてましたから。
テンプレートは基本的なデザインができてるから、すごく便利だけど、コードが多くてどこを修正すればいいのか探すのが割とめんどくさい。細かな修正がめんどくさくなったからTailwind使ってmarginなどの微修正をしたのですが、謎にレイアウトが崩れたのでTailwind使わずにCSSで書き直したり。 「ふわーーーっ!!!」
翌日、割とできたと思ったので「dou?」というLINEとともにURLを共有。
すっごい喜んでくれました！「めちゃくちゃいい！すごい良い!」と。
。。。
これまで感じたことのない気持ちになりました。胸が温かくなるというか、これまで苦労ばっかりかけられてきたあの親不孝息子から突然、「拝啓 お元気ですか？ 突然のお手紙すみません。先日母の日がありましたが、ふと振り返ったときに、これまでの感謝を何も伝えられていないと思ったので初めて手紙を書きます。読みづらかったらごめんなさい(笑) 母ちゃんにはいままでたくさん迷惑ばっかりかけてごめんね。特に高校を辞めて、東京に行くと言ったときは母ちゃんはものすごく怒り、とても大きなケンカをしてしまいました。あの時は俺も納得ができず心にもないひどいことを言ったことを今でも悔やんでいます。今思えば、母ちゃんは俺のことを心配してくれて反対してくれたんだね。当時はその気持ちがわかりませんでした。本当にごめんなさい。都会での暮らしは大変ですが、友人もでき楽しくやっています。母ちゃんもお体に気を付けて、さとえおばちゃんたちと仲良く楽しく長生きしてください。いつもありがとう。お正月に実家に帰りますのでゆっくりお酒でも飲みながら話しましょう。母ちゃんの大好きなカツオのたたきでもつまみながら(笑) 敬具」
という手紙を突然もらったときの気持ちというか。
Vueバージョン
で、完成したので一段落したのですが、これまでVueの勉強はチュートリアルでやってきたけど、何も作ったことがなかったのでせっかくだからという興味本位と勉強目的でVueで作ってみました。
おそらく、Vueルーターを使うんだろうなってことはわかっていたのでしらべながら。メソッドなどを使うわけでもないので、サクッと終わるだろうと思っていて進めていたのですが、スマホ画面にするとなぜかNavが消えないんですよね。Navしか触れない状態で。
この画面↓
何を押してもNavが消えない。忌々しい。。。
パソコン画面だとめちゃくちゃスムーズなのに。 テンプレートにもともと組み込まれてるJaVaScriptが悪さしていることに気づきました。おそらく、ページ遷移したときにclassを渡していてそのclassがあるかないかでNavを閉じたり開いたりしていました。ただ、Vueだとページの遷移がないから、classが渡せずNavが開きっぱなしなのかなと仮定して、色々方法がないか調べたのですが見つからず。
業者に問い合わせました。何か解決方法はないのかと。
返信↓
お世話になります、テンプレートパーティー〇〇と申します。
お問い合わせの件ですが、弊社の「〇〇.js」ファイルは
弊社テンプレート用にシステム会社に制作してもらったものなので、
外部プログラムとの連携はできません。ご了承下さい。
宜しくお願い致します。
連携ができないだと。。。そんなはずないだろ。と思いつつも業者がそういうなら仕方ないかと、これ以上の追求は許されました。組み込まれているNav機能が使えないならデザインを変えるしかないなと思い、レイアウトを変更。CSSを書き書き。Navが消えてスマホからも操作できるようになったのでとりあえず完成とした。元々HTMLの方を使うつもりだったので微妙なデザインの崩れは気にせず、Vueを使ってサイトを作るのがゴールだったのでOKです。
完成したもの。
まずはHTMLとCSSで書いたもの。テンプレートをもとに作るとデザインがきれいです。
ゼロから作るより大幅に時間も短縮できる。ちゃんと会社っぽいサイトができたと自負しております。
Vueで書いたもの。早いー。スマホからは少し使いにくいけど、パソコンからだとデザインは同じなはず。ページ遷移がめちゃくちゃはやい。Vue Routerの使い方のいい勉強になりました。
没になったやつで1日、HTML版で1日、Vue版で2日。1日4-5時間。
合計4日くらいかかりました。いまはドメイン待ちです。 人のために作るのも良いものですね。
。
会社が儲かったらお金請求してやろうと思います。
おまけ。
5秒英作文もよろしく。
私が生きていることにはどんな意味があるのか。人生のゴールはどこにあるのか。答えのない答えを見つけるために、これからも無駄なことをやり続けながら、生きていこうと思う。
