ファイナルプロジェクトのドキュメンテーション

全体の構成を考える。

ホームページは自分のポートフォリオとなるように制作する。自己分析や就職活動にも活用していけるように、学校で取り組んでいることや日常生活の様子が伝わるようにする。
フレームワークのUIkitの公式リファレンスを見てみたところ、試してみたいものが多かったので、自作のスタイルシートも使用しつつUIkitをメインに使う。
ホームのindex.htmlは、このWebサイトがポートフォリオであること、見る人を惹きつけるようなインパクトのあるデザインにする。
自己紹介のaboutme.htmlは、出身や今取り組んでいることなどを簡潔に記述する。関連サイトのプロフィールページへのリンクや位置情報を挿入する。
授業やゼミでの取り組みをWorksでまとめ、情報形態別にページを作る。

gis.htmlで空間情報の授業で取り扱った地図データを埋め込む。
movies.htmlでゼミ活動に関連して制作したYouTube動画を埋め込む。
3ddesign.htmlで授業課題として制作したVR空間を埋め込む。

日常生活の様子を伝えるために趣味をHobbyでまとめ、それぞれページを作る。

gunpla.htmlで制作したプラモデルの画像とディスクリプションを載せる。
ramen.htmlラーメンの写真と言ったことのあるラーメン屋の位置情報をまとめたWebマップを埋め込む。※時間が足りず、課題提出期限までの作業は断念した。

final-docs.htmlにこのホームページ制作のドキュメンテーションを記述し、index.htmlにリンクを貼る。

index.html

ナビゲーションバーを作る。

uk-navberを使ってページトップに固定型のナビゲーションバーを作った。
WorksとHobbyのタグはマウスオーバーするとドロップダウンで詳細のページへのリンクが出てくるようにした。

                        <nav class="uk-navbar-container" uk-navbar>
                        <div class="uk-navbar-left">
                            <ul class="uk-navbar-nav">
                                <li class="uk-active"><a href="./index.html">Home</a></li>
                                <li><a href="./aboutme.html">AboutMe</a></li>
                                <li>
                                    <a href="">Works</a>
                                    <div class="uk-navbar-dropdown">
                                        <ul class="uk-nav uk-navbar-dropdown-nav">
                                            <li><a href="./3ddesign.html">3D Design</a></li>
                                            <li><a href="./works/movies.html">Movies</a></li>
                                            <li><a href="./works/gis.html">GIS Study</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <a href="">Hobby</a>
                                    <div class="uk-navbar-dropdown">
                                        <ul class="uk-nav uk-navbar-dropdown-nav">
                                            <li><a href="./gunpla.html">Gunpla</a></li>
                                        </ul>
                                    </div> 
                                </li>
                                <li><a href="./final-docs.html">Documentation</a></li>
                            </ul>
                        </div>
                    </nav>

スライドショーを作る。

uk-slideshowを使ってホームページのタイトルの背景のサイズでスライドショーを作った。
タイトルのuk-overlayがスライドショーの上にうまく表示されないトラブルがあったが、overlayのタグをslideshowのタグの内部に含ませることで解決した。

                    <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow>
                        <ul class="uk-slideshow-items">
                            <li>
                                <img data-src="./img/fpbg.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !.uk-slideshow-items">
                            </li>
                            <li>
                                <img data-src="./img/nasa1.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !.uk-slideshow-items">
                            </li>
                            <li>
                                <img data-src="./img/gundam.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !.uk-slideshow-items">
                            </li>
                        </ul>
                        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
                        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
                     <div class="uk-overlay uk-position-top uk-text-muted">
                        <h1>Portfolio</h1>
                        <h1>| IBUKI SHIBAYAMA</h1>
                     </div>
                    </div>

ディスクリプションを作る。

uk-cardを使ってホームページの簡単な説明書きを設置した。
gridで見出し、本文、About Meへのリンクを分割し、見出しには自作のロゴマーク画像をアイコン風に設置した。

                      <div class="uk-card uk-card-default uk-width-1-2@m">
                        <div class="uk-card-header">
                            <div class="uk-grid-small uk-flex-middle" uk-grid>
                                <div class="uk-width-auto">
                                    <img class="uk-border-circle" width="40" height="40" src="./img/logomini.png">
                                </div>
                                <div class="uk-width-expand">
                                    <h3 class="uk-card-title uk-margin-remove-bottom">My Portfolio</h3>
                                </div>
                            </div>
                        </div>
                        <div class="uk-card-body">
                            <p>大学の授業や研究室の活動での課題や制作物、趣味をつめこんだホームページです。</p>
                            <p>「柴山息吹とは何者なのか」「何をしているのか」を伝えることを目的に制作しています。</p>
                        </div>
                        <div class="uk-card-footer">
                            <a href="./aboutme.html" class="uk-button uk-button-text">About Me</a>
                        </div>
                   </div>

ハイライトを作る。

slideshowを使って、Webサイト内のおすすめのコンテンツをピックアップした。
overlayの説明テキストをuk-transition-slideを使って動きが出るように設定し、それぞれのスライドをaタグで囲って対象のページにリンクできるようにした。

                    <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: fade">
                        <ul class="uk-slideshow-items">
                           <a href="./gunpla.html">
                            <li>
                                <img src="./img/gunplamini.jpg" alt="" uk-cover>
                                <div class="uk-overlay uk-overlay-primary uk-position-right uk-text-center uk-transition-slide-right uk-width-medium">
                                    <h3 class="uk-margin-remove">Hobby</h3>
                                    <p class="uk-margin-remove">趣味で制作しているプラモデルについて</p>
                                </div>
                            </li>
                           </a>
                           <a href="./works/gis.html">
                            <li>
                                <img src="./img/map1.jpg" alt="" uk-cover>
                                <div class="uk-overlay uk-overlay-primary uk-position-right uk-text-center uk-transition-slide-right uk-width-medium">
                                    <h3 class="uk-margin-remove">GIS</h3>
                                    <p class="uk-margin-remove">空間情報に関する制作物について</p>
                                </div>
                            </li>
                           </a>
                           <a href="./3ddesign.html"> 
                            <li>
                                <img src="./img/3d1.png" alt="" uk-cover>
                                <div class="uk-overlay uk-overlay-primary uk-position-right uk-text-center uk-transition-slide-right uk-width-medium">
                                    <h3 class="uk-margin-remove">3D & VR</h3>
                                    <p class="uk-margin-remove">授業課題で制作した3DモデリングとVR空間について</p>
                                </div>
                            </li>
                           </a> 
                        </ul>
                        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
                        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
                    </div>

ページの一番下に著作権について記述する。

uk-card-secondaryを使って周りと区別がつくように色分けした。
CC BY-SA 4.0の公式サイトへのリンクも設置した。
このタグは全てのページにペーストする。

                        <div class="uk-card uk-card-secondary uk-card-large uk-card-body uk-width-1-1@m">
                    <p>(C)2021 IBUKI SHIBAYAMA</p>
                    <p><a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></p>
                  </div>

aboutme.html

サイドナビゲーションバーを作る。

uk-offcanvas-barのナビゲーションバーが、uk-stickyでページに追従するように設定したuk-buttonをクリックすることで表示できるようにした。
このタグはindex.html、final-docs.html以外のページでも適用することにした。

                  <div uk-sticky="bottom: #offset">
                    <button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-usage">MENU</button>
                     <div id="offcanvas-usage" uk-offcanvas>
                         <div class="uk-offcanvas-bar">
                             <button class="uk-offcanvas-close" type="button" uk-close></button>
                             <a href="./index.html"><h3>HOME</h3></a>
                             <a href="./aboutme.html"><h3>About Me</h3></a>
                             <h3>Works</h3>
                             <a href="./3ddesign.html"><p>3D Design</p></a>
                             <a href="./works/gis.html"><p>GIS Study</p></a>
                             <a href="./works/movies.html"><p>Movies</p></a>
                             <h3>Hobby</h3>
                             <a href="./gunpla.html"><p>Gunpla</p></a>
                             <a href="./final-docs.html"><h3>Documentation</h3></a>
                         </div>
                     </div>
                   </div>

トップの画像に動きをつける。

uk-background-fixedを使って、トップの背景画像がスクロールに対して元の位置に留まるように設定した。
uk-buttonをこの上部に設置するか重ねるか迷ったが、後者の方がしっくり来たので重ねてみた。

                   <div class="uk-background-fixed uk-background-center-center uk-height-medium" style="background-image: url(./img/me2.jpg);">

プロフィールを記述する。

uk-cardを使って自己紹介文を載せる。index.htmlのデスクリプションと同様にアイコン、見出し、本文、関連サイトへのリンクを設置した。ここではuk-buttonでリンクできるようにしている。

                           <div class="uk-card uk-card-secondary">
                    <div class="uk-card-header">
                        <div class="uk-grid-small uk-flex-middle" uk-grid>
                            <div class="uk-width-auto">
                                <img class="uk-border-circle" width="40" height="40" src="./img/ibuki.jpg">
                            </div>
                            <div class="uk-width-expand">
                                <h3 class="uk-card-title uk-margin-remove-bottom">IBUKI SHIBAUAMA</h3>
                                <p class="uk-text-meta uk-margin-remove-top">柴山息吹</p>
                            </div>
                        </div>
                    </div>
                    <div class="uk-card-body">
                        <p>神奈川県相模原市出身。神奈川県立相模原高等学校を卒業し、青山学院大学地球社会共生学部に入学する。</p>
                        <p>現在は古橋研究室に所属し、空間情報の分野を中心に地球社会共生について研究をしている。</p>
                        <p>世界中のWebマップを編集しながら国際貢献を目指す学生団体YouthMappersの青山学院支部、YouthMappers AGUのメンバー。マッピングと、それを広めるための動画作成を行っている。</p>
                        <p>趣味はプラモデル、ラーメン屋巡り、映画・アニメ鑑賞など。</p>
                    </div>
                    <div class="uk-card-footer">
                        <a class="uk-button uk-button-default uk-margin-small-right uk-margin-small-top" href="https://github.com/ibuki76">Github</a>
                        <a class="uk-button uk-button-default uk-margin-small-right uk-margin-small-top" href="https://github.com/furuhashilab">古橋研究室 Github</a>
                        <a class="uk-button uk-button-default uk-margin-small-right uk-margin-small-top" href="http://furuhashilab.com/">古橋研究室 ホームページ</a>
                        <a class="uk-button uk-button-default uk-margin-small-right uk-margin-small-top" href="https://www.youtube.com/channel/UC7ibSx7RwsxQPGjHX0ab5TQ">古橋研究室 Youtubeチャンネル</a>
                        <a class="uk-button uk-button-default uk-margin-small-right uk-margin-small-top" href="https://www.youtube.com/channel/UC84JZTsE1vB3mJMWnlnEpDA">YouthMappers AGU Youtubeチャンネル</a>
                    </div>
                </div>

古橋研究室の位置情報を埋め込む。

iframeを使ってGoogle Mapを埋め込む。iframeのコードは「共有」から「地図を埋め込む」を選択してコピーする。

そのままではレスポンシブでなかったので、スタイルシートfinal.cssでiframe用のサイズ設定を記述し、プロフィールなどサイズ変更が合うようにした。

HTML

                               <div class="google-map">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d630.4600897870257!2d139.40312803580736!3d35.56637618735245!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018fdb26f108c3b%3A0x2479eab168bb38cd!2z5Y-k5qmL56CU56m25a6k!5e0!3m2!1sja!2sjp!4v1627432024636!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                    </div>

                       .google-map {
                        position: relative;
                        width: 100%;
                        height: 0;
                        padding-bottom: 56.25%;
                        overflow: hidden;
                    }
                    .google-map iframe {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                    }

gis.html

Mapboxを埋め込む。

Mapbox Studioでデザインした地図をifrmaeを使って埋め込んだ。今回はurlをコピーし、srcにペーストした。cssもaboutme.htmlと同じものを使った。

                                       <div class="google-map">
                    <iframe src="https://api.mapbox.com/styles/v1/ibuki76/ckp6mza3m3oex17mzg4ulyndu.html?fresh=true&title=view&access_token=pk.eyJ1IjoiaWJ1a2k3NiIsImEiOiJja3A2bHQxdTUwczN6Mnh0ODZkNXg3cjVkIn0.jmbucxRydrTnpIUztsMOwg" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>

OSMを埋め込む。

OSMは「共有」から「HTML」を選択することでiframeのタグごとコピーできる。

                                      <div class="google-map">
                    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=45.26212692260743%2C2.00634710290673%2C45.32049179077149%2C2.051208413871795&amp;layer=mapnik" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/#map=14/2.0288/45.2913">大きな地図を表示</a></small>
                 </div>

movies.html

YouTube動画を埋め込む。

動画再生ページのタイトル付近の「共有」アイコンをクリックして「埋め込み」を選択し、iframeタグをコピーする。こちらもGoogle Mapのスタイルシートをそのまま使用した。

                                       <div class="google-map">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/zMyQzPomwbw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                 </div>

3ddesign.html

A-frameを埋め込む試み。

Glitch上でのVRのコードはHTMLがまるごと書かれており、そのままiframeのコードは作れなかった。
一度丸ごとコピペしてVR表示画面のサイズを調節したが、headerの記述がUIkitのものと併用できないのか、VRが表示されなくなってしまうトラブルが生じた。

VR空間をiframeとして埋め込む。

そこで、VRを最大サイズで表示したページを別で作り、そのページをiframeを使って埋め込んで解決した。こちらもGoogle Mapのスタイルシートをそのまま使用した。

                                       <div class="google-map">
                    <iframe src="./ramen2.html"></iframe>
                 </div>

gunpla.html

ガンプラの紹介をする。

uk-card-media-leftを使って、画像とディスクリプションを横並びに配列させた。

uk-slideshowを使って、画像はスライドして変えられるようにした。始めは画像のサイズが狙い通りに定まらないトラブルがあったが、slideshowにratioの設定を加えることで解決した。

                                <div class="uk-card uk-card-secondary uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>
                <div class="uk-card-media-left uk-cover-container">
                  <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: 1:1">
                      <ul class="uk-slideshow-items">
                          <li>
                              <img src="./img/saza1.jpg" alt="" uk-cover>
                          </li>
                          <li>
                              <img src="./img/saza2.jpg" alt="" uk-cover>
                          </li>
                          <li>
                              <img src="./img/saza3.jpg" alt="" uk-cover>
                          </li>
                          <li>
                              <img src="./img/saza4.jpg" alt="" uk-cover>
                          </li>
                      </ul>
                      <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
                      <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
                  </div>
                </div>
                <div>
                 <div class="uk-card-body">
                    <h3 class="uk-card-title">RG SAZABI</h3>
                    <p>『機動戦士ガンダム 逆襲のシャア』で登場するモビルスーツ『サザビー』のRG 1/144スケールのプラモデルです。素組み、部分塗装は完了していて、これからウェザリングを行う予定です。</p>
                    <a href="https://bandai-hobby.net/item/2330/">BANDAI公式サイト</a>
                 </div> 
                </div>
             </div>

CC BY-SA 4.0