Swift学習者のフリーターが4日間でポートフォリオサイトを作った

#自己紹介

初めまして、ねこきち（[@nekokichi1_yos2](https://mobile.twitter.com/nekokichi1_yos2)）と申します。

独学でSwiftを1~2年学び続けて、趣味としてiOSアプリを作ってます。

近日中に初のアプリをリリース予定（まだ審査中）

#きっかけ

ポートフォリオサイトを作ろうと思った理由、まず1つ目が**自分のスキルや実績をぱっと見でわかるようなサイト**、が欲しかったからです。

Twitter、GitHub、技術ブログ、だけじゃ、いざ誰かに自分を紹介する時に

- 何を作ってるのか
- どんなアプリなのか
- どんなプロフィールなのか

をサッとわかりやすく紹介できません。

2つ目に、過去に関西の交流会で参加者から名刺をもらい、**たった1枚の紙でエンジニアとしての情報を共有できる**ことを知ったのが主な理由です。

別に就職や転職するつもりはなくて、プログラミングを学ぶ者の名刺みたいなものがあれば、自己紹介をしやすく、かっこいいなぁと。

そして３つ目は、**コロナウイルスで自粛してる間に何か作ろう**と思ったからです。

せっかく時間が余ってるんだから、ただゲームして遊ぶのはもったいないです。

みんなが自粛中に遊んでる合間に何か作っておけば、自粛解除後にスタートダッシュができますから。

#サイトデザイン

作り始めたときはSwiftしか触っておらず、昔にWebサイトの学習本をかじった程度で、ほぼ初心者レベルの状態でした。

幸い、当時に買った学習本を残しておいたので、サンプルコードを見ながら作りました。

もちろんテンプレートをカスタマイズすることも考えましたが、**ポートフォリオサイト自体も実績になる**、とqiitaの記事で見つけて、0から作ることにしました。

費やした期間は、**5/2 〜 5/5**、です。
（ソースコード：https://github.com/CatLuck2/PortfolioSite ）
（サイト：https://catluck2.github.io/PortfolioSite/index.html ）

また、スマホやタブレット用にレスポンシブデザインも実装しました。
→[レスポンシブデザイン](#レスポンシブデザイン)

##トップページ
手っ取り早くシンプルなデザインにしたかったので、自宅の机を撮った画像をホームの背景に。

ヘッダーも参考本をそのままパクる感じで実装しました。
<img width="679" alt="スクリーンショット 2020-05-11 15.51.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284464/9e501f6b-2880-3922-5919-7d7161ba5ca3.png">

##プロフィール
どのポートフォリオサイトも自分の経歴や体験が書かれておりました。

実務未経験でフリーターの僕には
「〇〇のプロジェクトに参加しました」
のアピールできる経験がありません。

ですが、学生時代〜今、の経歴を載せてる方もいたので、とりあえず差別化できそうな経歴を載せました。
<img width="628" alt="スクリーンショット 2020-05-11 15.51.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284464/21239585-8492-5ebf-37c3-462e7a765e66.png">

##スキル
初心者の域を出るか出ないかのスキルしかなく、本当にスキル欄に載せていいか迷いました。

しかし、「これからの学習で習得していきます」、の意気込みも兼ねて、最近の自分が最も利用した頻度が高いスキルを載せました。
<img width="578" alt="スクリーンショット 2020-05-11 15.52.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284464/511e7deb-8d35-4054-3b46-129c2ffb5908.png">

##ポートフォリオ一覧
自分の中で

- 完成させた
- コンセプトを体現している
- 他と比べて良い出来

と思う製作物を選びました。

せっかくポートフォリオサイトに載せるので

- サンプル
- サンプルにアレンジを加えたアプリ
- 1つの機能しかないアプリ

の規模の小さい制作物は却下。

<img width="639" alt="スクリーンショット 2020-05-11 15.52.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284464/ce7c088f-2ce8-25ad-682d-d0d7561724cd.png">

##お問い合わせ、参照URL
各アイコンには、左から

- Twitter
- GitHub
- メールアドレス
- 技術ブログ

のリンクが埋め込んであります。

また、今回のポートフォリオサイトを作るのに使用した素材の参照URLを載せてます。
<img width="472" alt="スクリーンショット 2020-05-11 15.52.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284464/d83d4949-d51f-7939-170f-99f386c90474.png">

##各ポートフォリオのページ - 画像
ポートフォリオ欄にある画像をクリックすると、該当する製作物の解説ページに飛びます。

同じページ内で解説ページをドロワーで実装するサイトもありましたが、手間をかけないためにJavaScriptの使用は控え、別ページでの実装にしました。

また、下の小さい画像をクリックすると、中央の画像が選択した画像に切り替わります。
→[タッチ/クリックで画像を切り替える](#タッチクリックで画像を切り替える)
<img width="562" alt="スクリーンショット 2020-05-11 15.53.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284464/104e86f5-3756-5c30-c09f-860f37ef61a5.png">

##各ポートフォリオのページ - 説明
製作物の簡単な説明文と使用した技術を載せてます。
<img width="762" alt="スクリーンショット 2020-05-11 15.53.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284464/cdeefba9-167b-ebfe-1629-4bb33b50629b.png">


#使用した技術・ツール

- VisualStudioCode

#機能

##タッチ/クリックで画像を切り替える
メイン（中央の画像）には初期画像をセットしておき、サブ（下の小さい画像）のいずれかを選択すると、選択した画像URLがメインのsrcに挿入される仕組みです。

```html
<img src="img/画像1.png" alt="" id="main-image" class="main-image">
<div class="grid-image">
    <ul>
        <li onclick="click_im1" id="im1" class="im1"><input type="checkbox"/></li>
        <li onclick="click_im2" id="im2" class="im2"><input type="checkbox"/></li>
    </ul>
</div>
<script type="text/javascript">
    var id_im1 = document.getElementById("im1");
    var id_im2 = document.getElementById("im2");
    id_im1.onclick = function id1Click() {
        document.getElementById("main-image").src = "img/画像2.png";
    }
    id_im2.onclick = function () {
        document.getElementById("main-image").src = "img/画像3.png";
    }
</script>
```

```css
.im1 {
    background-image: url("img/画像2.png");
}
.im2 {
    background-image: url("img/画像3.png");
}

```

##レスポンシブデザイン

「トップページ」
画面の幅が

- 767px以下：モバイル表示
- 768px以上：パソコン表示

と設定。

```css
/*モバイル表示*/
@media (max-width:767px) {
}
/*パソコン表示*/
@media (min-width:768px){
}
```
<img width="340" alt="スクリーンショット 2020-05-11 15.47.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284464/2080c7f6-9f33-fd94-7af8-71e1c9bdeb29.png">

「ポートフォリオ」
PC表示なら横並び、モバイル表示なら縦並び。

```css
/*縦並び*/
.portfolio-app-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
```
<img width="338" alt="スクリーンショット 2020-05-11 15.48.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284464/3def94a9-8163-6624-2435-9b649b42ad05.png">

「ハンバーガーメニュー」
モバイル用のメニューとして、簡単に実装しました。

パソコン表示の時は非表示、モバイル表示の時に表示。
<img width="336" alt="スクリーンショット 2020-05-11 15.49.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284464/2244bf90-36b5-fbd4-74b9-08184eeea33e.png">

#公開先

GitHubPagesを利用しました。

収益化や宣伝のような目的もなく、費用をかけずに公開したかったので、独自ドメインやレンタルサーバーは却下。

GitHubPagesなら

- 無料
- 無制限
- 変更をすぐに反映できる

のメリットがあるので、とても助かりました。

ただプライベートリポジトリを公開するには、有料プラン？、に加入する必要があるのは驚きました。

#参考にしたもの

##記事

マウスクリックで表示画像を差し替える方法
https://www.nishishi.com/javascript-tips/change-image-src.html

CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
https://saruwakakun.com/html-css/reference/nav-drawer

【初心者向け】Github pagesでwebページを公開する方法
https://qiita.com/sota_mikami/items/c6038cf13fd84b519a61

##本

いちばんよくわかるHTML5＆CSS3デザインきちんと入門
https://www.amazon.co.jp/dp/B01MA6CQ7S/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

HTML5&CSS3デザインブック
https://www.amazon.co.jp/dp/B07B2QN52P/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

##サイト

@musou1500 さんのポートフォリオ
https://qiita.com/musou1500/items/24ed32d7f5b0a6377bc5

Yuki's Portfolio
https://portfolio0720.firebaseapp.com/

HosaLab!
https://hodalab.com/portfolio/

SIMA Portfolio
https://simablog.net/portfolio/protfoliopage/

##素材

- [Icon8](https://icons8.com/icons)
- [ブログ素材メーカー](https://it-ti.work/material/)

#まとめ

正直、Swiftに没頭して、すっかりHTML/CSSの知識が抜けきってたので、1人で作れるか不安でした。

ですが、

- プログラミングにハマり続けた
- 参考書の通りに進めた
- ググりまくって情報を集めた

おかげで、HTML/CSSの書き方や構造をなんとなーく理解でき、数日で完成できました。

marginやfloatの概念を完璧に理解しなくても、既にプログラミングの経験があれば、感覚でサクッとできます。

また、SNSやブログは情報を発信するためのもので、自分を知ってもらうには今1つ役不足感がありました。

ですが、**ポートフォリオサイトを作ってからは、エンジニア&クリエイターとしての自分を知ってもらえるので、プログラミング（創作活動）に自信が持てるようになりました。**

個展みたいに自分の拠点を築く意味でも、これからプログラミングを含めた創作活動に関わる方は、作っておくといいでしょう。
（半年後には名刺とか作ってみたい）