旅行動画や記事の投稿用のサイトを作成

GitHub：https://github.com/Mori-Chan/NodeTECHSite

進捗

header内部のCONTACT,LOGINボタン

最初は別のHTMLとしてページを用意していたが、実際に使用した時に、毎回ページを読み込むのが面倒ということで、ポップアップで表示ができるように実装。スマホ時とPC,タブレット時でハンバーガーメニューと通常のheaderで切り替えることができる様に実装。

header直下のスライドショー

最初は自分でJavaScriptを書き込んで作っていたが、デザイン面やスマホ時のフリックに対応したいとのことで、プラグイン(slick)を使用。サイドに前後の画像を表示。centerの画像を拡大表示。1枚目の画像のみ表示時間を長く設定。下部にはThumbnailを表示し、centerの画像と同じThumbnailをborderで黒く縁取る様に設定。その時にThumbnailのデザインが崩れない様にbox-sizing: border-box;に。

左下のプラスボタン

最初はfooter内に記述していたが、TwitterやYouTubeチャンネルなど、全てをfooter内部に格納するとデザインが崩れるため、footer外部に作成。フロートするとそれぞれの登録ボタンが現れる。

右下のPAGE TOPボタン

ページがスクロールダウンされた時に瞬時にページ上部へ戻ることができる様にJSで実装。一年以上前に別のサイトで実装した物をそのままコピー&ペーストしたため、JSの内部の詳細は不明。

body内部

svg内に２つの画像を表示。その２つを画面の1/20の場所にきた時に別々のアニメーションで動かすため、jQueryでクラスを付け替えることに。jQueryのバージョンによっては動かないことが判明。slickのjQueryのバージョンでは動かないため、複数のjQueryを読み込むことに。

footer上部

検索欄を作成。ゆくゆくコラム等が増えてきた時に、タグやカテゴリーでコラムや動画を検索できる様に実装。スマホの時にはハンバーガーメニュー内で表示。デザインはこれから。

footer中部

おすすめ記事や過去の記事、問い合わせ等を表示する為に実装。問い合わせに関しては、headerにもあるが、様々なサイトでheaderとfooterの両方に書いてあったため、同じ様に実装。デザインはこれから。

footer下部

これまでのサイト内部でユーザーが困ったり、知りたいと思われる可能性があるものをfooterで説明できる様にデザインを行い、実装。

ABOUT画面

各々の紹介ページ。header直下で動画を再生。動画は今後撮影&編集(現状はサンプル動画)。上部にある文字の重なっている部分が透過する様に実装。position,z-indexを指定することにより、背面にある様に見せるデザインへ。

(初期のスライドショーの概要)

entry-thumsに各thumbnail画像を、aタグのhref属性にentry-pict内部に表示する画像のsrc属性を設定。entry-linksを表示にして、タイトルとaタグ(link先のURL)を格納。JSにてentry-pict,entry-title,entry-daysクラスを持ってきて、pict内部にthumsのaタグのsrc、titleに thumbのタイトル、daysにthumbのalt属性(日付)を順々に格納していき、ロード時やボタンクリック時、thumbnailクリック時に実行する様に設定。

また、最初の画像にイメージマップを付けていたが、slickを使用して、フリック機能を付け加えたため、フリック時に誤ってリンクを押してしまう可能性が高いため削除。

【残り作業内容】

・PC表示：headerの文字サイズ調整

・About：メンバー紹介のボタンのサイズ調整

・About：paddingやmarginの調整

・javascriptのhamburgerのファイル名を変更するとアニメーションが動かない問題

・d-clockのサイズ調整

・floatingActionShareButtonの位置調整

・footer_top,footer_middleの修正(中のデザイン全般)※デザインが初期の想定と大きく変わってきてしまっているので、そこの見直しも。

・サイト全体の色をバランスよく変更(現状：わかりやすいように色分けしてるだけ)

・バック側の処理をコーディング(Java,SpringFramework,Thymeleaf等を使用予定)

・About：背景動画の撮影＆編集