ポートフォリオサイトを作った話

お久しぶりです。自サイトを全く更新しない男、風祭です。というのも、ポートフォリオサイトの更新を行っていたんですよね。忘れてたことを思い出したり、知らないことを身に着けたりに時間がかかっていました……

松田晃政のポートフォリオサイトです。ポートフォリオには簡単な自己紹介、スキル、成果物などが掲載されています。

上記がポートフォリオサイトです（ネット時代にがっつり本名が出てる）。
今回はどんな技術を使ってポートフォリオサイトを作ったかの覚え書きを残しておこうと思います。

全体の構成
初回訪問の演出
スクロールバー
お問い合わせフォーム
最後の仕上げ
まとめ

全体の構成

まずは全体の構成をどのように作ったか、からお話していきます。最近はPHPとかTypeScriptを主体としたサイトが流行りらしいですが、この怠慢野郎風祭はその辺詳しくないので、HTMLを使ったコーディングになります。ただ、それにしても体裁はどうにかしなければならないので、Bootstrapを使い見た目を担保しています。

Bootstrap

パワフルで拡張性の高い、機能満載のフロントエンドツールキットです。Sassでビルドしてカスタマイズし、あらかじめ用意されたグリッドシステムとコンポーネントを利用し、強力なJavaScriptプラグインでプロジェクトに命を吹き込むことができま...

ちょっと勉強するだけでレスポンシブ対応したサイトを作れるのがこのBootstrap。特に開発環境が大きい画面のPCだとついついスマホのことを忘れちゃうんですよね。Chromeの開発者モードを使って確かめると、テキストが枠からはみ出てしまう事案が発生してしまうケースが起こること起こること。

上記のように「CSSを完全に理解した」状態を作らないためにも、Bootstrapのようなフレームワークは活用していくべきでしょう。まぁそれでもやらかす時はやらかします。

HTMLでルビ（ふりがな）を振ってみよう！rubyタグの使い方を解説 | ポテパンスタイル

目次1 ルビとは2 HTMLでルビを振るために必要なタグ3 ruby要素でルビを振ってみよう4 CSSでルビを装飾する5 ルビ（ふりがな）を振って、読みやすく親切にルビとはルビとは、漢字などに付けるふりがなのことです。HTMLでも

そういえばルビの振り方を初めて知りました。私の名前を初見で読める方はそう多くないのでね……

初回訪問の演出

アクセスしてくださった方はご存じかもしれませんが、初回訪問時にのみ演出が付きます。どんな演出かは見ていただくとして、あれも既存のものになります。

StarWarsIntro.css : The Star Wars Intro Crawl in Pure CSS

Make great intros to awesome Star Wars tools online. Use StarWarsIntro.css to create The Star Wars Intro Crawl effect.

なんか奇抜な演出ないかなぁ、とGitHubをうろついていたら見つけました。非常に使いやすくまとめてあって助かりました。

あとは2回目の訪問以降にあの演出が出ないようにする実装を組み込むだけです。cookieを使うかローカルストレージを使うかで迷いましたが、（一部の地域では）cookieを入れるときは許可するかのダイアログを入れないといけないので、ローカルストレージにしました。

// ページ読み込み時に実行される関数
window.onload = function onPageLoad() {
    if (!localStorage.getItem("firstTimeUser")) {
        localStorage.setItem("firstTimeUser", "true"); // ローカルストレージに設定
        overlay.style.display = "block";
        document.body.classList.add('no-scroll');
    } else {
        overlay.style.display = "none";
        document.body.classList.remove('no-scroll');
    }
}

ページを読み込んだとき、「firstTimeUser」のキーにtrueがあれば、演出に使っている領域を非表示にし、スクロールを許可するといった感じです。