---
title: "#30DaysOfStreamlit Day30 Streamlit アプリ作成の技術"
description: この記事では、#30DaysOfStreamlitの内容の紹介を行います。このチュートリアルでは、これまで得た知識を使い、現実問題を解決するアプリケーションを構築していきます。
---

[AIDXナレッジ - INSIGHT LAB](https://knowledge.insight-lab.co.jp/aidx)

# [#30DaysOfStreamlit Day30 Streamlit アプリ作成の技術](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day30-streamlit-アプリ作成の技術)

 作成者: [Budo Ogimoto](https://knowledge.insight-lab.co.jp/aidx/author/budo)｜2023年12月19日

## はじめに

この記事では、#30DaysOfStreamlitの内容の紹介を行います。   
#30DaysOfStreamlitについては[コチラの記事](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlitをやってみた)を参照してください。

このチュートリアルでは、これまで得た知識を使い、現実問題を解決するアプリケーションを構築していきます。

## 現実世界の問題

コンテンツ クリエーターにとって、YouTube動画のサムネイル画像にアクセスできることは、ソーシャル プロモーションやコンテンツ作成に役立つリソースです。

この問題にどのように対処し、Streamlit アプリを構築するかを考えてみましょう。

## 構築する目標

YoutubeのURLから動画のサムネイル画像を取得するアプリケーションを構築します。  
このアプリケーションは、以下の3ステップで構成されます。

1. ユーザーからの入力としてYoutube URLを受け入れる
2. URLより、動画IDを抽出する
3. 動画IDから動画のサムネイルを取得し表示する関数で画像を表示する

## アプリケーションの構築

以下のようなPythonスクリプトを作成します。

上記のスクリプトを実行すると以下のような画面が表示されます。

画面上の「Paste YouTube URL」下のボックスに動画のURLを入力することでその下にサムネイルを表示させることができます。  
また、左側のサイドバーより、画像のサイズを「Max(最大解像度)」「High(高画質)」「Medium(中画質)」「Standard(標準画質)」で選択することができます。

## コードの解説

最初に必要なライブラリをインポートします。

次にアプリケーションのタイトルとヘッダー、アプリケーションの説明を作成します。

また、今回はサムネイルを取得するのにYoutubeAPIで公開されている機能を利用します。  
この時、サムネイルを取得する際のURLは以下のような構成になっています。

サムネイルを取得する際に必要な情報は動画IDと画質クオリティを指定する必要があります。  
画質クオリティに関しては、以下のような関係になります。

| 画像クオリティ | 画像クオリティID |
| --- | --- |
| 最高画質 | maxresdefault |
| 高画質 | hqdefault |
| 中画質 | mqdefault |
| 標準画質 | sddefault |

よって、画像クオリティをサイドバーでコントロールさせたいので、以下のようにst.sidebar.selectboxで選択できるように作成します。

ユーザーがURLを入力するUIを作成します。

ここで、動画IDを抽出する関数を作成します。  
Youtubeには短縮URLと通常のURLが存在するため、入力されたURLのドメイン部で判定をして動画IDの抽出方法を切り替えています。

その後、取得した画像を表示するUIを作成します。   
この時、URLが存在しない可能性があるため、URLが空白である場合、入力を促す文字列を表示します。   
URLが正常に入力されている場合、サムネイルのURLを作成してst.image()で表示しています。

## まとめ

このセクションでは、実際にStreamlitを利用して問題解決するチュートリアルを行いました。

アプリケーションの構築には、当たり前ですがアプリケーションによって解決したい課題からアプリケーションの要件を決めて、必要な機能を考案し、アプリケーションを実装するという過程が必要です。  
また、ユーザーに対してどのような入力が必要なのか、最終的に望まれる出力はどのようなものかといったことを考える必要もあります。  
つまり、要件定義、設計、実装のように落とし込んでいけばStreamlitを最大限活用できるかと思います。

[完全な記事を表示](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day30-streamlit-アプリ作成の技術)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Budo Ogimoto"
  },
  "dateModified" : "2023-12-19T03:19:13.752Z",
  "datePublished" : "2023-12-19T03:19:13Z",
  "headline" : "#30DaysOfStreamlit Day30 Streamlit アプリ作成の技術",
  "image" : {
    "@type" : "ImageObject",
    "height" : 1531,
    "url" : "https://download.insight-lab.co.jp/hubfs/30days_logo.png",
    "width" : 3121
  },
  "mainEntityOfPage" : "https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day30-streamlit-アプリ作成の技術",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "AIDXナレッジ - INSIGHT LAB"
  }
}
```