SNSでリンクを貼ると画像が表示されるアレ、Flutterで出来る？

背景

Twitter等でよく見かけるリンクを付けると画像が表示されるアレはどんな技術なのか、Flutterで実現できるのか気になったので調べてみることにしました！

下記のようにリンクを挿入するだけで画像が表示されるやつです。

今日から泊まるホテル

5泊
通常宿泊料金：28,796円
全国旅行支援使用（クーポン券分抜き、https://t.co/SUkAzo5B6M負担額込み）：3,154円
一泊換算：630円

安ぃ…
— taisei🚀Flutter (@taisei59119317) November 24, 2022

テキストだけでなく、画像が表示されることよって遷移先のイメージが伝わりやすいので便利ですよね！！

そもそもなんていう技術か？

そもそもこのような技術をなんて言うのか調べてみると『OGP』って言うらしいです。Open Graph Protcolの略で、Webサイトの内容を画像を使ってSNSで伝える際に使用する仕組のことです。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

HTML要素の一つで、metaタグ内で設定を行うことによって画像が自動的に表示されるみたいです。自分はHTMLタグ内にある画像を取得して表示しているかと思っていたので全然違いましたね。。

本題

では、実際にFlutterで実装できるかどうか調査していきます。

pub.devで探してみるとogp_data_extractという便利なパッケージを見つけたので今回はこちらを使っていきます。（他にもmetadata_fetchパッケージ等がありました。）

使ってみた

今回はURLを入力したらOGP画像が表示される簡単なアプリケーションの作成です。
目的はOGP画像を取得できるかなので特に細かい説明はしませんが、下記のようにサンプルコードを作成してみました。

class _MetaDataViewState extends State {
  String? imageUrl;
  String? inputUrl;
  final controller = TextEditingController();

  Future<void> fetchOGPImage(String url) async {
    final ogpData = await OgpDataExtract.execute(url);
    if (ogpData != null) {
      setState(() {
        imageUrl = ogpData.image;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('OGP'),
      ),
      body: Column(
        children: [
          imageUrl != null
              ? SizedBox(
                  child: GestureDetector(
                    onTap: () => launchUrl(
                      Uri.parse(inputUrl.toString()),
                      mode: LaunchMode.externalApplication,
                    ),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(30),
                      child: Image.network(
                        imageUrl.toString(),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                )
              : const SizedBox.shrink(),
          TextFormField(
            controller: controller,
          ),
          ElevatedButton(
            onPressed: () => fetchOGPImage(controller.text),
            child: const Text('OGP画像を表示'),
          ),
        ],
      ),
    );
  }
}

OGP画像を取得するメソッドは下記の通りです。

 Future<void> fetchOGPImage(String url) async {
    final ogpData = await OgpDataExtract.execute(url);
    if (ogpData != null) {
      setState(() {
        imageUrl = ogpData.image;
      });
    }
  }

指定したurlをパースしてくれるメソッドがあるのでそれを使います。

final ogpData = await OgpDataExtract.execute(url);

これだけでOGPに関するデータを取得できます！

取得したデータのnullチェックを行なってあらかじめ用意していた変数に格納してあげるだけで実装完了！簡単ですね🚀

今回はSNSでよくみるOGPについて調べてみて、実際にFlutterで実装を行いました！

OGPを実装することによって、リンク先のWebページの内容を画像でわかりやすく伝えることができ、サイト訪問率が上がることが考えられます！皆さんもぜひ使ってみてください！

Flutter Base