やっとできた・・・
Progateを参考に一つのサイトを作りました！
プログラミング学習本をまとめたサイトです。まだコンテンツ少ないですがこれから増やしていこうと思いますので是非よろしくお願いします🙏
そして来月から2作目に取り掛かります！実はこっちが本番＾＾；https://t.co/QTHPzPHU3w
— YUUKI (@bitcoinjpnnet) 2018年11月28日
はじめに
はじめに、ポートフォリオ制作に取り掛かる前の自分のスペックを書いておきます。
- HTML/CSSはWordpressでちょっと触ったことがあるレベルの素人
- JavaScriptは何それ？ってレベル
一言で言うと、「Webど素人」です。
アフィリエイターではありますが、ずっとWordpressでサイト制作してきたので、コードなんてずっとコピペだったしマジで知識０でした。
サイトのコンセプト
これはサイトにも書いていますが
ートップページから1分以内、3クリックで目当ての本まで辿り着くー
です。
このコンセプトにしようと思った理由は、自分自身がプログラミングの本を探してる時に
「ググってもアフィ記事しか出てこないし、Amazonはごちゃごちゃしてて分からん！」
ということで、Webサイトでシンプルに見やすくまとめると良いんじゃね？って思ったのがキッカケです。
予めやったこと
今回、ポートフォリオ制作前に以下のことをやりました。
- ProgateのHTML&CSSコースを4周
- ドットインストールの動画を見て写経
- RailsTutorialを1周
RailsTutorialは完全に関係ないですね（笑）
ほんとは一作目から会員制の機能がついたWebサービスを立ち上げるつもりでしたが、作れる自信がなかったので、まずはHTML/CSSを用いた簡単なサイトをサーバーにアップロードしよう、と思い今作の開発に取り掛かりました。
制作期間
11月15日〜 サイト制作開始
11月28日 サイト公開
合計13日
最初は「こんなん3日ぐらいで余裕やろwww」って思ってましたが、実際は3日だとトップページすら作れませんでした（笑）
ちなみに毎日10時間近く作業しました。
合計で約130時間。ふぅ〜。
開発環境
PC：MacBook Air(2017年製)
エディタ：Atom
公開用プラットフォーム：Heroku
使用言語
- HTML
- CSS
- JavaScript
- jQuery
サイトの動きには9割くらいCSSを使用。
本のランダム表示とスクロールトップボタンにはJavaScriptを使用しました。
苦労した点
全部書くと1万字ぐらいになりそうなので箇条書きでまとめます。
- CSSのボックスモデルが理解できず、テキストが理想の位置に移動してくれない
- PHPでアクセスカウンタ導入しようとするもサイトに埋め込んで起動させるとこで諦める
- JavaScriptとHTMLの連携がよく分からん
- ヘッダーのボタンが画面更新する度にふわっと動く現象が起きて直らずイライラ
- 画像の横に文章を入れると表示のバランスが崩れる
- 画面幅の調整がうまくいかない
- faviconが表示されない
ざっとこんなところ。
一番苦労したのが「画面幅の調整」ですね。最初は全然うまくいかなくて、ほんと苦労した。
最初、heightを全部pxで指定していたのですがこれが間違いでした。mainのコンテンツをheight100%;にするだけで解決。アホか。
あとは、画面からはみ出た文章のせいで、本の画像が下に押し出されてしまう現象にも苦労しましたが、そこも文章（pタグ）のcssを弄って解決。
他にもヘッダーボタンが画面更新する度にふわっと上に浮き上がってしまう現象に出くわし、全然直りませんでしたが、後になって無駄なコードを消していったら直りました。
とりあえずCSSではボックスモデルが重要ってことがわかりました。ここさえ理解出来ればなんとかなりそうですね。
拘った部分
- レベル別のページで色分けした
Pooksでは初級、中級、上級と三つのレベルに分けて本を紹介しているんですが、それぞれ各レベルのページで初級はピンク、中級はイエロー、上級はブルーと色分けしています。
色分けすれば、ユーザーがぱっと見た時に「これは初級なんだな」ってすぐ分かるんじゃないかと思ったからです。
また、カテゴリーページは全てグリーンで統一しました。
- SNSボタンの設置
ポートフォリオサイトに意外にないのがSNSボタン。
これは絶対あった方がいいなと思って、Font-Awesomeから取ってきて背景色付けてボタン化。さらに、ボタンからシェアできるような仕組みも作りました。
また、AboutページにconnpassとqiitaのSNSボタンも設置しました。これ、結構珍しいんじゃないかな笑
Progateとドットインストールどちらが参考になるのか？
制作前にHTML/CSSのレッスンをProgateとドットインストール両方で終えましたが、
実際にサイトを作るにあたって、ドットインストールよりもProgateの方が参考になりました。
その理由は、ドットインストールは動画に映し出されてるコードを写経して学んでいくのに対し、Progateではレッスン一つ一つをクリアしていく際に自分の頭で考える必要があったり、上級レッスンでは目標物を模写することで、自分でコードを考える必要があったりと、とても実践的で参考になりました。
何より、Progateの目標物って初心者が模写しやすいよう設計されてるんですよね。
あれ作った人すごすぎ。
勿論、ドットインストールにも良いところはあります。例えば、ドットインストールはProgateよりも圧倒的に情報量が多いです。
Progateは基礎の基礎で終わるのに対し、ドットインストールではある程度踏み込んだ技術まで教えてくれます。
他にも、プロのコーディングを動画で見れるので、コマンドやタイピングの仕方を目で見て覚えることができます。
例えば、AtomにはCommandShift+Dで選択した行を下にペーストできるコマンドがありますが、ドットインストールの動画でずっと見ていたので自然と覚えることができました。
勿論、自分で調べれば良いんですけど、動画でかっこよくコーディングしてるのを見て、自分もやってみようって気持ちになるのが重要なんですよね。
デベロッパーツールの使い方なんかも詳しく触れていて、これ知ってからCSSコーディングが楽になりました。
個人的には、以下のような使い分けをすると良いと思いました。
- Progateでコードの型を身に付ける
- ドットインストールは辞書的な使い方をする
作ってみた感想
11月28日に初公開しましたが…
達成感は半端ないです！
今までポートフォリオ作る作る言ってて、全然進まなかったけど、やっと一つ完成した・・・。
公開時のpushでは嬉しくて飛び跳ねました。
で、作ってみてわかったのは、やっぱり勉強よりも実践の方が何倍もタメになるなってことでした。
サイト公開にあたって本当に分からないことだらけで、色々調べまくりました。
最初はSNSボタンをプロペラ回転させてましたが、各SNSボタンにはガイドラインが存在して、ボタンは回しちゃいけないとか、metaタグにはSNSシェア用の情報を追加することを初めて知ってとても勉強になりましたね。
公開後には、現役プログラマーの友人に幾つかフィードバックもらいました。
その中で、「JSのコードはもっと効率化出来るよ」って意見を頂いたので、後々JS勉強してからリファクタリングしようと思います。
あと、データベース周りも勉強したら、もっと効率的にサイト構築する方法なんかも取り入れていこうと思います。
ちなみに、来月から二作目の制作に取り掛かります。
初めてRubyを触るので緊張。次が本番やで…。
これからHTML/CSSを勉強して、1からサイト制作しようと思っている方の参考になれば幸いです。
