Flutter URL内のタグ情報を取得（最後に個人開発アプリリリースされたのでかるく紹介）

はじめに

Flutterを使ってアプリを個人開発中（まだまだ奮闘中の身）
ユーザーにURLを入力してもらい、そのURL内のタイトルとサムネイルを抽出する機能を作成したため紹介

#開発環境
・使用言語：dart(flutter)
・AndroidStudio 4.1.2
・iOS シミュレーター(iOS14.5)

モデルの作成

まずはタイトルと画像情報のURLを管理する用のモデルを作成
今回はyoutubeのURLを使用することを前提としているのでYoutubeDataとしていますが、今回の実装であれば別にyoutubeのURLではないURLでも問題なく動作します

class YoutubeData {
  YoutubeData({
    required this.title,
    required this.thumbnailUrl,
  });
  // 
  final String title;

  final String thumbnailUrl;
}

URLへアクセス

今回使用したライブラリはこちら

URLをStringからUriにparseして使用
全ての情報を取得した後にHTMLタグごとでタイトル情報およびサムネイル情報を引っ張りたいため、HTMLタグとして認識

// URLにアクセスして情報をすべて取得
    final response = await get(Uri.parse(url));
// HTMLパッケージでHTMLタグとして認識
    final document = parse(response.body);

タグの中身を抽出

あとはtitleとimageのタグ情報を抽出して返却するだけ
比較的簡単でした！！！

// ヘッダー内のtitleタグの中身を取得
    title = document.head!.getElementsByTagName('title')[0].innerHtml;
    // ヘッダー内のmetaタグをすべて取得
    var metas = document.head!.getElementsByTagName('meta');
    for (var meta in metas) {
      // metaタグの中からname属性がdescriptionであるものを探す
      if (meta.attributes['property'] == 'og:image') {
        imageUrl = meta.attributes['content']!;
      }
    }

    return YoutubeData(title: title, thumbnailUrl: imageUrl);

かるーーーく宣伝

この度初めて個人開発でアプリをリリースしましたーー(iOSのリジェクト辛かった。。)
内容は音楽練習用課題管理アプリです。（今回紹介した機能は参考演奏登録機能で使用しています）
まだiOSだけなのでAndroidも追々リリースする予定です（せっかくFlutterでやってるので）

音楽/楽器やってる方はぜひぜひ覗いてみてくださいな