Web系開発初心者におくるポートフォリオサイト作成のススメ
こんにちは，サカシタです．昨年7月から個人のポートフォリオサイトをWeb上に公開しました．
skstmsk-portfolio.firebaseapp.com
ポートフォリオサイトの半分には，これまでの研究活動が一覧にして掲載してあります．研究活動を一覧にすることで，自分の研究を他の研究者に紹介しやすくなる，また，研究資金の申請書を書くときに業績の情報を参照しやすくなる，ということを想定しました．
加えて，サイトのもう半分は開発・デザイン・絵描きの制作物を掲載しています．これは自分の身の回りの学生エンジニアが制作物を公開していたことに倣っています．研究活動とは直接の関係がありませんが，色々なスキルを提示しておいて，面白い仕事が舞い込んでくることを期待しています．
表題の通り，私はWeb系の開発に興味がある初心者の方々にポートフォリオサイトの作成を勧めたいです．私が所属している学生団体CAMPHOR-には多くのプログラミング未経験の学生が技術的な相談に来ます．その中で，Web系の開発を目指す学生が「Webアプリケーションをつくりたい」と言って，FlaskなどのWebアプリケーションフレームワークを紹介されるも技術的な不明点が多くて挫折する，という事象をよく見ます．この原因の1つとして，Webアプリケーションの基礎であるWebページがどういうプログラムでできているのかわかっていない，ということがあります．まずは静的でよいと思うので，ポートフォリオサイトや個人のWebサイトを運営してみてから動的なアプリケーション開発に移行してみてはいかがでしょうか？以下では，私がポートフォリオサイトを作成するときに使用した技術について紹介していきます．学習の参考になれば幸いです．
Webページの作成
内容
Webページの内容となる文章，図ははじめHTMLファイルに直接書き込んでいました．私は以前研究室のHPを作成するときに，HTML/CSSを勉強していたので，当時の経験が活きました（当時の記事はこちら）．
コンポーネント
コンポーネントは以前研究室のHPを作成したときにBootstrapを使用していて，今回もBootstrapで行こうかな，と考えましたが，SaaS対応したためかコード量が増加していて，ちょっとげんなりしました．基本的なボタンやナビゲーションバーがあれば良いと思ったので，もう少し軽め，かつ，SaaSを勉強して無くても不自由なく使えそうなもの，と探した所，Materializeがいい感じでした．フラットデザインで，サイトの色合いが可愛かったです．
アニメーション
リンク先へのスクロールを滑らかにしたいという思いがあり，moveTo.jsなどJavaScriptのライブラリに見当を絞りましたが，上手く使いこなせなかったので，結局jQueryでHTMLファイル内に直接書き込んでいます．こだわりはスクロールだけだったので別にこれで良かったです．
デプロイ・ホスティング
ホスティング何でやろっかなー，サーバー借りようかなーとも考えましたが，あんまりお金をかけたくありませんでした．CAMPHOR-のメンバーに相談したら，Firebaseを教えてもらい，そんなにアクセスが集中するサイトでもないことからFirebaseに決定しました．静的ホスティングで設定して，いくつかコマンドを叩いたらデプロイまでできました．具体的な設定方法は公式ドキュメントがわかりやすいのでそちらを参照していただきたいです．あとは下の記事も参考にしました．
Webページ作成・運営の簡略化
デプロイの自動化
3回くらいFirebaseへのデプロイ作業を手動でやっていたらコマンドを叩くのが面倒くさくなってきました．CAMPHOR-のwebsiteがCircleCIを使っていて，ファイルを更新をgit pushするたびに，デプロイが走っていたので，これ適用すればいいじゃん，と思い，CircleCIにアカウント登録して（GitHubアカウントでサインアップできる），ポートフォリオサイトのプロジェクトを設定しました．プロジェクトのシステムは？言語は？と細々した設定を聞かれましたが，本当に適当にLinux，どれでもない（Other）を選んだ覚えがあります．ドキュメントを読んで，.circleci/config.ymlかけば解決するっしょと思い，日本語記事など色々見ながらconfig.ymlを書きました．テストもいらないし，とりあえずrunのcommandにFirebaseでデプロイするときに叩いていたコマンドを重ねて書いていったらデプロイが走りました．詳細についてよくわかっていないので，ymlファイルはほとんど修正してません．．．
Slack AppにCircleCIを追加して，Integrationの設定をすることで，git pushした後しばらくしてSlackにデプロイ成功/失敗の通知が飛んでくるようにしました．Slack通知の設定は以下の記事を参考にしました．
Webページの生成作業簡略化
デプロイを自動化したあとは，Webサイトの情報を追加更新するときにHTMLファイルに<div>...</div>とコンポーネントのタグまでいちいち書くことがめんどくさくなってきました．コード量も増えるし，見づらかったです．Webサイトの内容にあたる情報だけ記述すれば，自動でコンポーネントが生成されるようにしたいと思いました．またまたCAMPHOR-の人に相談すると，静的サイトジェネレータを使えば良さそう，という話になり，Pythonが書けたので，Jinjaを紹介してもらいました．
Jinja2の説明サイトを色々見たんですが，使用の手順がよくわからなかったので，上手く理解できませんでした．Jinja2が使えるようになった今，私と同じようにつまづいている人へ簡単に説明すると，目的のWebページ（例：index.html）を作るときには，Jinja2に加えて，以下の3つのファイルが必要になります．以下のリストの括弧の中は私が公開しているポートフォリオのリポジトリにおけるファイル名です．
- 目的のWebページ（index.html）を構成するヘッダー・フッター・コンポーネントなどの情報が記述された鋳型となるファイル（index_template.html）．
- Webページの内容情報を記述したファイル（public/*.yml）．
- Jinja2を使って鋳型のファイルに内容情報がはめ込まれたhtmlファイル（index.html）を生成するための実行ファイル（builder.py）
1，2に関してファイル形式は何でも大丈夫ですが，3はJinja2がPython製のテンプレートエンジンなので，Pythonファイルが良いです．内容の情報を更新する，例えば，制作物の情報を追加する場合は，2のYAMLファイルに情報を書き足して，3を実行することにより，情報の更新されたindex.htmlが生成されます．Jinja2が機能するための鋳型ファイルの記法はそこまで難しくないので，公式のドキュメントを読むか，「Jinja2 使い方」と検索して手頃な記事を読んでください．
以上により，研究活動の実績や制作物を追加するときはYAMLファイルの箇条書きリストに項目を付け加えるだけでよくなりました．楽！ひととおりの作業簡略化は終わったので，今後はコンテンツを増やしていくか，デザインをもう少し変えようかなと思っています．
今回紹介した静的なポートフォリオサイトが作れるようになり，より手を広げて動的なWebサイトが作れる技術（Vue.jsなど）にも触れていけば，Web系の開発技術にだいぶ抵抗がなくなるのではないかと思います．
最後に：制作物がないよ！と困っている人へ
自分の興味があるものをリスト化したWebページをつくると良いのではないでしょうか？例えば好きな漫画や音楽，映画の感想など．それらの情報をまとめる中で，こんなサービスがあればいいなとアイディアが浮かべば最高ですね．それでは，良い開発体験を．
