最近暖かくなってきたかと思えば、今日はちょっと肌寒いですね。昨日くらいの25度前後がやっぱりちょうどいいので、一年中25度がいいなと思っている今日この頃。沖縄？湿度が高くてジメジメしているので遠慮しておきます。
さて、今日は表題のとおり、GitHub Pagesで自己紹介サイトを制作・公開したのでご報告と、なんで制作したのかとかそういう裏話的なものをしていけたらと思います。
GitHub Pagesとは？
GitHub PagesとはGitHubが提供する静的Webサイトのホスティングサービスです。静的ウェブサイトなので、PHPを使用したWordPressなどで制作したWebサイトはGitHub Pages上では公開できません。GitHub Pagesの説明にもある通り、GitHub Pages上で公開できるWebサイトは、HTML、CSS、JSで構成されたWebサイトのみです。
また、その他にも公開できるサイトは1GB以上であってはならない、帯域幅制限やビルド制限などの制限もあるので、もしGitHub Pagesでサイトを公開したいという方は以下のGitHub Pagesについてというページを参照してください。
なぜGitHub Pagesにしたか
大前提として、お金を使いたくなかったからです。ドがつくほどのケチなので、必要な場面以外ではお金を使いたくない性格なんです。また、自己紹介サイトもブログみたいに頻繁に更新する予定はあまりない（月に1度更新するかどうか？）ので、WordPressつかってサーバー借りて...という必要性は無いと思っていました。
旧たきつぼはAmeba Owndという無料ホームページサービスを使用して開設していましたが、後述のようにまだ使用したことのない技術？というか、学習もかねてまだやったことのないことをやりたかったので、テンプレートに縛られるようなサービスは使用したくありませんでした。そこでGitHub Pagesにしたというわけです。
同じく静的Webサイトを公開できるものとして、FC2ホームページなどがあり、当初はそれを使用しようかと思ったのですが、スマホで閲覧時に広告が入るということや、3か月以上更新がないと広告が入ること、FC2の運営会社が色々とワケありなことを考慮してGitHub Pagesを選択しました。
制作話
なぜ「たきつぼ」という名前？
旧たきつぼでも使用していた「たきつぼ」という名称。僕のハンドルネームがたきなので、たきの情報をまとめた、という意味でたきつぼという名称にしています。滝から流れ落ちた水は滝つぼに落ちますよね。そこからとっています。
なぜ自己紹介サイトを制作しようと思った？
上記のように、学習もかねてまだ使用したことのない技術や、まだやったことのないことをやってみたかったからです。そこでどんなサイトを作ろうか考え、そういえば2,3年前に作って放置してた「たきつぼ」があったなと思い、自己紹介サイトを再度作ろうと思いました。
旧たきつぼはAmeba Owndを使用しているのですが、Ameba Ownd自体積極的なアップデートなどが行われておらず、昨年にはAmeba Owndのアプリが提供を終了、今年3月にはサポートの縮小が発表されています。
Ameba Owndがサービスを終了する可能性があると考え、バックアップ的な意味を兼ねて別のサービスで自己紹介サイトを制作した方が良いと考えました。
今回の制作ではじめて使用したもの
では今回の制作ではじめて使用したものが何なのかをあげていこうと思います。
GitHub Pages（GitHub）
GitHub自体は実ははじめてではなく、学生時代にちょっと学習して触ったことがあるのですが、正直イマイチ理解できていなかったんです。ただ、業務でコーディングをする機会が増えたので、最低限の機能だけでも理解しておかないと、業務に支障が出ると思い再度学習することにしました。
最低限のリポジトリをつくって、コミットして、ブランチを切って、プルリク送って、プレビューしてマージするという一連の流れは理解できました。ただGitHub（Git）って本来チームなどで分業する際にファイルを共有したり、バッティングしないようにするためのものなので、僕一人で制作する分には使う必要性があまり無いのですが、学習もかねて使ってみました。
パララックスライブラリ「Luxy.js」の使用
PCで見た際には左右にあるコンテンツが上下に動く、パララックス効果をONにしています。これが今回の制作ではじめて使用したものの2つ目です。
以前にパララックスライブラリを使用したことはあったのですが、今回はそれとはまた別のものを使用しています。パララックスは最近の流行ですからね。高級感を演出したり、サイトに重厚感を出すためには最適です。これからパララックスを使用した案件が来るかもしれないので、事前に使い方とかを調べておこうという感じです。
使用しておいて言うのはなんですが、僕はあんまりパララックス好きじゃないんですよね。文章を読もうとしたときにテキストが動くと、視線も合わせて上に動かさないといけないじゃないですか。それに動くものが多すぎると、どこみれば良いか分からなくなるし。それって普通に嫌なので、いつかパララックスは消すかも。使い方は分かったし。
ちなみに、Luxy.jsのデモサイトもGitHub Pagesで公開されているようです。
フェードインアニメーション
フェードインアニメーションはjQueryを使用すれば簡単に実装が可能なのですが、専門学校時代にjQueryは重いし古いから使うなと言われていたので、Vanilla JSで組みました。
僕はJSが大嫌いで苦手なのでググってコードを切り貼りしてなんとか動きました（笑）。これも専門学校時代から「コピペして動いたら終わり、じゃなくてこのコードは一体何をしているのか、動く理由を理解するんだぞ」と言われていたので、ちゃんと「この行ではHTMLから要素を取得して、このコードはスクロール量を取得して...」とか原理は理解しています。ただまた0から作れるかと言われると...うーんって感じですね。
JSってHTMLやCSSみたいに単純じゃないのですごく苦手です...。
Flexboxを使わず、CSS Gridを使用したレイアウト構築
ほんの数年前、それこそ僕が専門学生だった頃はレイアウト構築はFlexboxが主流でした。しかし、それに代わる新たなCSS Gridが出て、最近IE11がサポートを終了したことで、モダンブラウザではすべて対応するようになりました。
そのため、今回の制作ではCSS Gridをフル活用しています。Gridさん働きすぎて過労死しないといいですが。Flexは1度も使用していません。
GridにはGridのメリット、FlexboxにはFlexboxのメリットがあり、場面に応じて使い分けることが望まれますが、今回はGridのみで構築できるものだったので偶々Flexboxを使用しませんでした。
というかFlexboxにはできてGridにできないことって何なんだろう。GridにできてFlexboxにできないことはありますが。Gridの方がソースコードも短くできますし、レスポンシブ対応も楽なので、よほどのことがない限り（クライアントからIE11に対応してほしい等と要求がなければ）、Grid一択だと思います。
モバイルファーストで構築
これまでCSSを書く際、先にPC・SP共通のコード、後にメディアクエリを使用してSPのコードを書くようにしていました。今回の制作では先にSP・PCのコード、後にメディアクエリを使用してPCのコードを書いています。
当サイト「たきぶろぐ」でも直近の1か月のアクセスのうち、7割近くがスマートフォンによるものでした。CSSは上から順番に読み込まれていくため、SPの記述を一番最後に置くと、読み込みに時間がかかるため、SPのコードを先にした方がサイトの表示が若干早くなるとのこと。
大きな差が出るというわけではないでしょうが、サイトの読み込みが遅くなると離脱率が大幅に上昇することがGoogleの調査で分かっています。
サイトの表示速度と離脱率の関係性 出典：Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed
読み込み速度が1秒から3秒になると32%離脱率が上昇するとのことですね。また、読み込み速度の低下はGoogleの検索順位低下にもつながるので、読み込み速度は重要なわけです。
たきつぼを検索順位トップにしたいとか、離脱率を下げたいとかそういうわけではありませんが、上述のように今回の制作はサイト制作も兼ねています。
サイトを作るということは、多くの人に存在を知ってもらいたい、ECサイトやプロモーションサイトであれば、商品を買ってもらいたい、サービスを利用してもらいたいわけで。となると離脱率を下げる、検索順位を上げるということは重要になってくるので、そのお勉強ですね。
ちなみに当サイト「たきぶろぐ」のCSSはPCファーストです。いつかSPファーストに書き換えたいけど、そこまでしなくてもいいかなとも思っている。
以上、GitHub Pagesで自己紹介サイト「たきつぼ」を制作・公開したお話でした。久々に自分のつくりたいサイトをつくったので、すごく楽しかったですね。
ただ今回は技術面というかコーディングの学習メインだったので、デザインに関してはあまりこだわっていないので、デザイン面は今後ちょくちょく手を加えていく予定です。あくまでも予定。
