사진팀 홈페이지를 만들면...

개시하다

이번에 나는 내가 속한 촬영팀의 실리콘 광화 홈페이지를 만들었다.
https://keiso-kouga.netlify.app/
나는 이 보도에 제작 과정과 고생한 곳을 기록하고 싶다.

기술 선정

이번에는 다음과 같은 서비스와 OSS를 활용하여 구현했습니다.

React - 제일 좋아해요

Netlify - 최대한 돈 안 쓰면 돼요

ant design - 간단한 UI 구성 요소 및 레이아웃 제공

Swiper - 사진 표시에 사용된 예제

퍼포먼스를 높이기 위해 하는 일.

사진팀이기 때문에 홈페이지의 내용에서'사진'이 상당히 중요하게 변했다.
주로 아래의 장소에서 사진을 사용한다.

웹 페이지 제목에 크게 1장

동아리 분위기를 전하기 위한 갤러리에 3장

멤버 한 명당 3장씩

만들기
현재 동아리의 구성원은 나를 포함하여 모두 두 사람이고, 구성원의 예시 사진은 비교적 적다.
실리콘 광화가 인기 콘텐츠로 멤버가 늘었다면, 그것은 이미 보기 싫은 페이지가 되었다.
이 글을 쓴 후 새 멤버가 두 명 늘었다.잘 됐다!날라리!

1. 기본적으로 웹으로 표시

만약 직접<img> 한눈에 찍은 둔한 큰 jpeg 이미지를 보여준다면 폭발로 사망할 수 있다
Google에서 제공하는 확장자webp로 변환합니다.
공식 Doc에 따르면 png과 jpeg 이미지보다 25% 정도 가볍고 사이즈도 상당히 가벼워졌다.

웹 페이지는 모든 환경에서 표시할 수 있는 것이 아니기 때문에 <picture> 라벨 등을 사용하여 디스플레이를 전환해야 한다.

<picture>
  <source type="image/webp" srcSet="path/to/webp/image">
  <img src="path/to/jpeg/image" alt="icon" />
</picture>

그나저나 2021/05 현재 iOS와 사파리도 웹의 대응을 시작했다.↓↓↓
https://en.wikipedia.org/wiki/WebP#Support
웹으로의 전환CLI 도구이 제공되었기 때문에 전환이 매우 수월하다✨

$ brew install webp
$ cwebp test.jpeg -o test.webp

참고로 이 사이트에서 가져온 ant 디자인용 Image 구성 요소 중fallback에 속성이 부여되었다.
이것은 원래 그림 읽기에 실패할 때 표시되는 그림이지만, 이번에는 웹 페이지 그림을 읽을 수 없다고 가정하고 fallback 속성에 jpeg 그림을 설정합니다.

<Image
  src={path to webp image}
  fallback={path to jpeg image}
/>

2. 로드 화면 만들기

웹으로 대응해야 한다고 했지만 환경에 따라 디스플레이에 시간이 많이 걸릴 때도 있다.
특히 이번에는 홈페이지 상단에 커다란 사진 한 장을 배치했다.↓↓↓

사이트를 처음 방문하는 사람이 보는 첫 사진이자 가장 볼 수 있는 곳이다.
따라서 최대한 큰 고화질로 보여주시길 바랍니다.하지만 우직하게 표현하면 읽기까지 시간이 많이 걸려 상당히 추운 느낌이 든다.

최소한 제목의 이미지 읽기가 끝날 때까지 다른 텍스트를 표시하지 않으려고 하기 때문에 불러오는 화면을 만들기로 했다.
이미지 Proeload 처리를 실행하고 Promise에 포함시키면state 관리로 읽을 수 있습니다.
Image.tsx

const [isLoading, setIsLoading] = useState(true);

const fetchImage = new Promise((resolve, reject) => {
    // 画像のPreloadを実行
    const img = new Image();
    img.src = imagePath;
    img.onload = () => {
        resolve("completed to load");
    };
});

useEffect(() => {
    // 画像の読み込みが完了した時点でstateを更新する
    fetchImage.then((successMessage) => {
        setIsLoading(false);
    })
});

그리고 Component에서state의 값에 따라 화면을 불러오는 렌즈를 분리합니다.
Title.tsx

return (
  <>
  {isLoading
  ?
  <div className="title-cover">
    // ロード画面
  </div>
  :
  <div className="title">
    // タイトルやら何やら
  </>
);

그나저나 로딩 화면을 사용했다Spin 구성 요소.

3. 미리 보기 이미지와 축소판 이미지 분리

이번에 제작된 홈페이지는 전체적으로 한 페이지로 사용자가 사이트를 방문할 때 모든 이미지를 읽을 수 있다.
따라서 다음 그림과 같이 500KB 전후의 여러 이미지를 다운로드할 수 있습니다.
웹에 대한 변환을 완료했거나 Proeload를 실시했더라도 처음부터 몇 개의 큰 이미지를 얻기 힘들겠죠.(특히 웹을 지원하지 않는 일부 버전의 iOS와 맥OS는 지옥이다.)
마지막으로 멤버가 늘어나면 상.여기에 각 그림의 사이즈를 좀 줄이려고 합니다.
그래서 이번에는 확대미리보기용과 축소판용 두 장을 준비했다.
antd Image 구성 요소 속성이 준비되어 있으며 여기서 크기가 큰 이미지 경로를 지정합니다.
Image.tsx

<Image
  src="サムネイル用のサイズが小さい画像"
  preview={{
    src: "拡大プレビュー用のサイズが大きい画像"
  }}
/>

이렇게 하면 웹 페이지를 불러올 때, 미리 보기 그림을 작은 그림으로 불러오고, 각 그림을 클릭하여 미리 보기 동작을 표시할 때만, 이 그림의 확대 미리 보기 크기를 읽을 수 있습니다.
이번에 준비한 축소판 그림의 크기는 확대용 미리 보기 그림의 절반 정도입니다.
먼지가 쌓였지만 앞으로 늘어날 수 있는 내용이어서 배제할 수 없다.

4. 멤버 추가 및 동인지의 신규 발매 강화

다행히도 우리 동아리 회원들이 늘어날 기회가 생겼다.
동인지는 앞으로도 새로운 것을 발매할 것인가?이렇게 내부적으로 진행되고 있어 행사로 뜨겁다.

이렇게 되면 웹 페이지도 수시로 업데이트해야 하며, 아마도 가장 변경이 필요한 구성 요소일 것이다.
tsx 파일을 변경할 때마다'역시 멤버가 소개하는 지면을 바꾸고 싶다'는 민망함이 들 때가 지옥이다.
이에 따라 멤버와 동인지 등의 데이터만 저장하는 ts파일을 제작해 노선에서 프로프스로 물통의 릴레이성을 전달하는 데이터의 구성을 실시했다.
data.ts

// メンバーの情報
export const members = [
    {
        id: nanoid(),
        name: "Aさん",
        icon: "",
        photo: "",
	twitter_url: ""
    },
    {
        id: nanoid(),
        name: "Bさん",
        icon: "",
        photo: "",
	twitter_url: ""
    },
    ...
]

preview 등의 방법으로 이를 삽입하여 해당하는Component에 건네주고 내부에서 DOM을 순환적으로 그린다.
Member.tsx

function Members(props: Props) {
  const { members } = props;
  return (
    <div className="member-cell">
      {members.map((member) => {
        const { name, icon, photo, twitter_url } = member;
        return (
          // アイコンの配置とか諸々
	  // メンバーが増えても、この中身は変わらない
        );
      })};
    </div>
  );
}

data.ts

export const members = [
    {
        id: nanoid(),
        name: "Aさん",
        icon: "",
        photo: "",
	twitter_url: ""
    },
    {
        id: nanoid(),
        name: "Bさん",
        icon: "",
        photo: "",
	twitter_url: ""
    },
    {
	// メンバーが増えたらdataを追記するだけでおk
        id: nanoid(),
        name: "Cさん",
        icon: "",
        photo: "",
	twitter_url: ""
    },
    ...
]

이렇게 하면 멤버의 추가, 삭제, 동인지의 신규 발매 등 상황에서 편집App.tsx만 하면 된다.

최후

웹 페이지의 외관 자체는 매우 간단하다. 비록 그렇게 복잡한 일을 하지는 않았지만
사진 위주의 웹 페이지이기 때문에 그림의 그리기와 읽기 등에 많은 머리를 썼다💮
나는 반드시 실리콘 광선이 그린 웹 페이지에 와서 놀고 싶다.
https://keiso-kouga.netlify.app/