# 情報システムの構築と応用 #10

あらためて、チームビルディングの結果を記入してください

- 役割
- 名前
- wixサイト

①スポーツ熱中都市
- リーダー、プレゼンテータ、書記、プログラミング
- 江尻、西沢、島田、眞仁田、木村、青木、島﨑、茂木、川鍋
- https://211h10061.wixsite.com/my-site-3

②子供の居場所
- 子ども食堂の場所の説明→伊藤・小林
- 施設ごとのイベントの表示→高橋・岩井田
- 総合的な編集→田中
- https://rikuriku20021130.wixsite.com/ibasyo
- 子ども食堂の紹介しかまだできてないです！サイネージ用は今後作成予定です。

③農産物のブランド化
- リーダー、プレゼンテーター(2人)、書記、プログラマー(全員)
- 宮本、内田、戸塚、小金丸
- https://211h10041.wixsite.com/my-site

④その他
- リーダー，プレゼン，書記，プログラマー(all)
- 福田，櫻井，林
- https://yukas27084.wixsite.com/mysite

----
## サイネージ
デジタルサイネージ向けのWebデザイン

### Raspberry Pi
つなげてみるよ

### スライドショー

実装方法

スライダー
https://swiperjs.com/

実例
https://b-risk.jp/blog/2022/04/swiper/

Getting Started With Swiper
https://swiperjs.com/get-started

index.htmlを作成

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<!-- Slider main container -->
<div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
  
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
  </div>

<style>
.swiper {
  width: 600px;
  height: 300px;
}
</style>  

<script>
const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});
</script>

ダミー画像
https://picsum.photos/

画像入りのものに置き換えてみよう

    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide" style="background-image: url(https://picsum.photos/720/360)">Slide 1
        </div>
        <div class="swiper-slide" style="background-image: url(https://picsum.photos/720/361)">Slide 2
        </div>
        <div class="swiper-slide" style="background-image: url(https://picsum.photos/720/362)">Slide 3
        </div>
    </div>

全画面表示用にCSSをおきかえる

<style>
.swiper {
    width: 100%;
    height: 100vh;
}

.swiper-slide {

background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
</style>