webサイト制作の勉強|2023年11月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

issue管理とプルリクエストしてコードをレビューする

プルリクエストとは?

みなさんの会社やチームではコードレビューしていますか?コードレビューする文化は根付いていますか?コードレビューする文化を根付かせる、タスク化するにはどうしたらいいでしょうか。

”本番適用するソースコードは必ずレビューする” というルールを決めたとしても「忙しくてレビューできない」「レビューしたいけど、どこが変わったか見つけるのが面倒」などの意見が多く、レビューをしなくなっていきます。

コードレビューする文化を組織に根付かせることは、とても難しいです。しかし、プルリクエストを使うことで組織にコードレビューする文化を根付かせることができます。

  1. [ 開発者 ] 作業対象のソースを clone または pull します。
  2. [ 開発者 ] 作業用のブランチを作成します。
  3. [ 開発者 ] githubのissue機能を使って作業目標を決める。
  4. [ 開発者 ] issueに対応する作業ブランチ「dev#*」を作る。
  5. [ 開発者 ] 機能追加、改修といった開発作業を行います。
  6. [ 開発者 ] 作業が完了したら push します。
  7. [ 開発者 ] プルリクエストを作成します。
  8. [ レビュー・マージ担当者 ] 通知されたプルリクエストから変更を確認しレビューします。
  9. [ レビュー・マージ担当者 ] レビュー結果を判断し、必要ならば開発者にフィードバックします。
  10. [ レビュー・マージ担当者 ] レビューの結果、問題がない場合はマージします。
  11. [ レビュー・マージ担当者 ] レビューの結果、対応自体が不要となるなど、プルリクエスト自体が必要ない場合はクローズします。
  12. [ 開発者 ] マージされた事が確認出来たらissueを閉じて、ローカルに残っている作業用ブランチを削除して作業が終了

上記の工程を、必要な分だけ繰り返します。その結果、最終的にマージされるソースコードの品質を向上できます。


backlog.com



qiita.com

ポートフォリオの制作

  1. ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。
  2. 次にwebのポートフォリオを何で作るかを決めましょう。選択肢としては、htmlとcssで制作するか、wordpressを使って作るか、またテンプレートを上手く使う事も視野に入れておきましょう。
  3. ポートフォリオ自体の仕様が決まってきたら、次に中に入れるコンテンツの見せ方を考えてみましょう。もちろん色々な見せ方がありますが、授業でやった「作品のサムネイル」→「作品の詳細ページ」→「自身で制作した作品」という順に見せていく方法は有効な方法の1つです。また、ディレクター志望の場合、photoshopillustratorだけで無く、パワーポイントやエクセルといったoffice系のソフトを使ってポートフォリオを作っても良いと思います。
  4. 次にポートフォリオ全体のデザインイメージとファーストビューのデザインを決めていきましょう。既存のサイトなどを参考にツカミのあるファーストビューを作ってみましょう。また面接等で「なぜこのファーストビューにしたのか?」と質問された時に答えられるように答えを準備しておきましょう。


felica-web.hatenablog.jp






tomoyukiarasuna.com



tomoyukiarasuna.com



webdesigner-go.com


www.creativevillage.ne.jp



ポートフォリオのフォーマット

ポートフォリオを作るに当たって、Bootstrapなどのフレームワークを使用する事も視野に入れておきましょう。
それぞれのメリット・デメリットを理解し、自身にとって最も有効だと思う物を選択する事が大事です。


bootstrapのテンプレート

templatemag.com

templatemag.com



HTML5&CSS3ベースのテンプレート

photoshopvip.net


photoshopvip.net


stories.freepik.com




サイトの第一印象(ファーストビュー)について

Webサイトを開いてFV(ファーストビュー)を見ただけでそのサイトから離脱してしまう確率は、LP(ランディングページ)で平均70%以上、コーポレートサイトで平均40%~60%と言われています。
つまり、第一印象でユーザーの興味を引くことができなければページ全体を読んでもらえず、成果に繋がらないのです。


note.com

GitHub Actionsを使ってCI/CD化する

GitHub Actionsを使って、最近話題のCI/CD化を進めましょう

CI/CD

Continuous IntegrasionおよびContinuous Deliveryの略称です。どちらもContinuous(=継続的)とあるように、開発からリリースまでの流れをフェーズごとに分断するのではなく、つねに継続的につながっていくものとしてとらえようという考え方です。


on:
  push:
    branches: [main]
name: 🚀 Deploy website on push
jobs:
  web-deploy:
    name: 🎉 Deploy
    runs-on: ubuntu-latest
    steps:
    - name: 🚚 Get latest code
      uses: actions/checkout@v2.3.2

    - name: 📂 Sync files
      uses: SamKirkland/FTP-Deploy-Action@4.0.0
      with:
        server: ${{ secrets.FTP_HOST}}
        username: ${{ secrets.FTP_USERNAME }}
        password: ${{ secrets.FTP_PASSWORD }}
        server-dir: 自身のドキュメントルート内のディレクトリ(一番最初の/から)

  
  


1.githubにaction用リポジトリーを作成
2.action用リポジトリーにFTPパスワードを登録(settings→Secrets)
3.Actionsから「 set up a workflow yourself 」をクリックして、新しいactionを登録
4.ブログに載っている、スクリプトに中身を入れ替える
server: 自身のFTPサーバー名
username: 自身のFTPアカウント名
password: ${{ secrets.ftp_password }}
server-dir: ./git-action/
5.ローカルにクローンを作成
6.mainブランチからdevブランチに切り替えて、index.htmlを作成
7.devブランチにステージ→コミット→プッシュ
8.github上でプルリクし、devをmainにマージ(このタイミングでactionが作動)
9.actionが正しく動いているかサーバーを確認(自身のサーバーのルート/git-action/)
例:1234.com/git-action/

time関数とstrtotime関数とDateTimeクラス

UNIXタイムスタンプとは

UNIXタイムスタンプとは、コンピューターのシステム時刻の一種で、協定世界時UTC)での1970年1月1日(午前0時0分0秒)からの経過時間を指します。

time関数

現在のタイムスタンプを取得

<?php
$now = time();//基準時間から現在までを秒数換算した値

$min = 60;
$hour = 60 * $min;
$day = 24 * $hour;


$now = $now / $day;
$now = floor($now);//小数点以下を切り捨て
echo "基準時間から今日まで{$now}日";
?>

strtotime関数

指定した日時のタイムスタンプを取得

<?php
$t = strtotime('2025-01-1');
echo $t;
?>


この関数は PHP 8.1.0 で非推奨 になるので、別の方法で指定日までのタイムスタンプを取得してみましょう。
「->」はアロー関数と言いクラス内で既に定義されている変数を呼び出すことができます。考え方としてはJavaScriptに近いイメージです。

<?php
$t = new DateTime('2025-01-1');
echo $t -> getTimestamp();
?>
||



** 指定日までのカウントダウン
現在のタイムスタンプと指定した日時のタイムスタンプを使って、指定日までのカウントダウンを作ってみましょう。
1秒毎にファイルを更新させる方法は色々ありますが一番簡単なrefreshを使ってみましょう。

>||
<meta http-equiv="refresh" content="秒数">