コンテンツにスキップ

ウェブサイト制作 03

前回のおさらい

HTMLCSS に入門し、CSSフレームワークである Bootstrap を導入した

簡単な復習

HTMLはテキストに意味を持たせた言語で、そのテキストにデザインを施すのがCSS
自分でCSSをゴリゴリ書いていって開発してもいいが、PCやスマートフォンなど画面のサイズが多種多様になり、全てに対応するのが難しい。
そこで予め骨組みが用意されたフレームワークを利用し、開発コストを抑える

前回作成したサイト

ソースコード

外部サイトのHTML・CSSを確認する方法

自分でHTML・CSSを書いてサイトを作成することはできましたが、世の中のサイトはどのような構造をしているのか気になりませんか?
実はブラウザで閲覧できるサイトのHTML・CSSは外部からでも閲覧することができます!

  1. ChromeやEdge、Firefoxなどのブラウザを開く
  2. 確認したいサイトに移動する
  3. キーボードのF12キーを押す(バックスペースキーの左上あたり)
  4. Elements(もしくは要素)と書かれたタブをクリックするとHTMLが表示される

(例)https://www.oit.ac.jpのHTML
oit.ac.jpのHTML

他にもコンテンツが読み込まれる様子が確認できるネットワークや、Lighthouseと呼ばれるウェブサイトのパフォーマンス等を計測するツールが用意されています スクレイピングなどをする際には開発者ツールでHTMLのタグ等を特定して利用することもあります

今回の内容

  • ウェブサイトのデザイン・要件の決定
  • Githubでのチーム開発の進め方の解説

ウェブサイトのデザイン・要件の決定

それぞれ考えてきたものを発表

Githubでのチーム開発の進め方

参考リンク : 公式の解説(英語)

ブランチとは

参考リンク : ブランチとは

branch

Githubでチーム開発する前にGitの重要な機能であるブランチについて知っておきましょう
ブランチは記録の流れを複数に分割する機能です
Gitの記録を複数のブランチ(= 枝)に分割することにより
ブランチAは本番用に
ブランチBでは新機能の開発を
ブランチCではバグ修正を
と機能ごとに保守・開発ができるようになります
また、ブランチを分けることでブランチ間では影響しあわないことも大きなメリットです
(例) ブランチCに大きな不具合が発生しても本番用のブランチAには影響がない

プルリクエストとは

ブランチは作って終わりではなく最終的に1本に統合されます
そしてこの統合する際に必要な作業ががプルリクエスト(プルリク/PR)です
これはGit自体に機能はなく、Githubが独自に導入したシステムですが、チーム開発にはなくてはならない機能です
例えば本番用のブランチAに機能追加したブランチBを統合したいとなればプルリクエストを作成します
この際、本当に統合して問題ないかや競合が生じていないかなどがチェックされ、問題なければ統合(マージ)ができるようになります
この2つの作業は特にチーム開発には必要不可欠ですので覚えるようにして下さい

ブランチの運用方法の例

参考リンク : こっそり始めるGit/GitHub超入門

git-flow
git-flow

Github Flow
Github Flow

ハンズオン

  1. 新しくwebsiteという名前のフォルダを作成し、VSCodeで開く
  2. index.htmlを作成し、このコードをコピペする
  3. VSCodeのソース管理タブを開きGithubに公開を押す
    vscode-github
  4. 許可を求められたら許可する
  5. 名前とプライベートリポジトリかパブリックリポジトリかを選択するダイアログが出るので名前をwebsiteにしてパブリックリポジトリ(下のやつ)を選択する
    vscode-github-name
  6. すると自動でリポジトリの作成からプッシュまでやってくれる
  7. 自分のGithubのRepositoriesに行き、アップロードされてるか確認する
  8. VSCodeのブランチ作成機能でgh-pagesブランチを作成する
  9. 左下を押してブランチ作成画面を開く
    vscode-branch
  10. 新しい分岐の作成(一番上)を選択
    vscode-branch-dialog
  11. gh-pagesと入力し、Enterキーを押す
    vscode-branch-dialog-name
  12. これでブランチの作成は完了
  13. ブランチをGithubにプッシュする
  14. ブランチの発行を押す
    vscode-branch-github
  15. ブラウザでhttps://Githubのユーザー名.github.io/website/を開くとindex.htmlが描画されている
  16. 8と同じ要領でdevブランチを作成する
  17. index.htmlを開きファイルの内容を全部消してから、このコードをコピペする
  18. ブランチを発行する
  19. websiteリポジトリに移動し、Pull requestsと書かれたタブをクリックする
  20. 緑のNew pull requestボタンを押す
  21. 以下の写真の通りになるようにブランチを選択する(これはdevブランチからgh-pagesブランチにプルリクを投げている)
    github-pr
  22. 緑のMerge pull requestボタンを押す
  23. 1分ほど待ってから、もう一度https://Githubのユーザー名.github.io/website/を見に行くと違うデザインになっている(更新されていなければシークレットモードでやってみる)

ハンズオン2

チーム開発をやってみよう

  1. 練習用リポジトリに移動する
  2. 右上の緑のCodeをクリックして下のような画面にする
    github-clone
  3. HTTPS SSH Github CLIのところでSSHを選択してその下のURLをコピーする(右のボタンを押すとコピーできる)
  4. PowerShellを開いて作業用のディレクトリに移動した後、下のコマンドを打つ

    bash git clone コピーしたURL

  5. するとリポジトリがローカルに複製されるのでそれをVSCodeで開く

  6. 適当な名前でブランチを作成した後、index.htmlを編集する
  7. ブランチを発行後、プルリクを発行する

次回の予定

  • 実際にWebサイトを作成していく