シナリオ

ShopEasy という名前の e コマース アプリがあり、電子メール、メッセージ、ソーシャル メディア内の商品リンクをクリックしたユーザーを、ウェブサイトではなくアプリ内の関連する商品ページに直接リダイレクトしたいとします。

ステップ 1: リンク プレビュー用に Nodejs サーバーで Opengraph 構成を行う:

Open Graph は、Web 開発者が Facebook、Twitter、LinkedIn などのソーシャル メディア プラットフォームで共有するときに URL をどのように表現するかを制御するために使用するプロトコルです。 Web ページの HTML で Open Graph タグを使用すると、ユーザーがリンクを共有するときにプレビューに表示されるコンテンツを指定できます。

これらの OpenGraph タグを React Native アプリで使用するには、ディープ リンクまたはユニバーサル リンクを使用してサーバーへのリンク (https://ShopEasy.com/${type}/${id} など) を処理します。ユーザーがこれらのリンクを共有すると、Facebook、Twitter、iMessage などのプラットフォームは、定義した OpenGraph タグに基づいてコンテンツ プレビューを自動的に表示します。

/routes/share.js

const express = require('express');
const app = express();
const path = require('path');

// Serve static files (e.g., images, CSS, JavaScript)
app.use(express.static(path.join(__dirname, 'public')));

// Route to serve the OpenGraph meta tags
app.get('/:type/:id', (req, res) => { // type: product/category
    const productId = req.params.id;

    // Fetch product details from a database or API (placeholder data for this example)
    const product = {
        id: productId,
        name: 'Sample Product',
        description: "'This is a sample product description.',"
        imageUrl: 'https://ShopEasy.com/images/sample-product.jpg',
        price: '$19.99',
    };

    // Serve HTML with OpenGraph meta tags
    res.send(`
        
        
        
            
            
            

            
            
            
            
            
            
            
            

            
            
            
            
            

        
        
            
${product.name}
            
${product.description}
            
            
Price: ${product.price}
        
        
    `);
});

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

ステップ 2: iOS のセットアップと構成:

a) (本番用) apple-app-site-association ファイルを準備します

apple-app-site-association (AASA) ファイルは、どの URL でアプリを開く必要があるかを iOS に伝える JSON ファイルです。 e コマース アプリ用に設定する方法は次のとおりです:

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appIDs": ["ABCDE12345.com.shopeasy.app"],
                "paths": [
                    "/product/*",
                    "/category/*",
                    "/cart",
                    "/checkout"
                ]
            }
        ]
    }
}

• appID: . Apple チーム ID (ABCDE12345) とアプリのバンドル ID (com.shopeasy.app) を組み合わせたアプリの識別子。
• paths: アプリで開く必要がある Web サイト上のパス。
• /product/*: すべての商品ページ (https://www.shopeasy.com/product/123 など) がアプリで開く必要があります。
• /category/*: 任意のカテゴリ ページ (https://www.shopeasy.com/category/shoes など)。
• /cart および /checkout: ユーザーのカート ページとチェックアウト ページもアプリで開く必要があります。

b) (運用用) apple-app-site-association ファイルをホストします

関連付けファイルを作成したら、それをサイトの .well-known ディレクトリに配置します。ファイルの URL は次の形式と一致する必要があります:

https:///.well-known/apple-app-site-association(例: https://www.shopeasy.com/.well-known/apple-app-site-association )
有効な証明書を使用し、リダイレクトなしで https:// を使用してファイルをホストする必要があります。

c) Xcode で関連ドメインを有効にする

i) Xcode を開きます:
Xcode で ShopEasy プロジェクトを開きます。

ii) 関連ドメインの追加機能:
「署名と機能」タブに移動します。
「 」ボタンをクリックし、「関連ドメイン」

iii) ドメインを追加:
[関連付けられたドメイン] セクションで、applinks:.
というプレフィックスを付けてドメインを追加します。 例えば：
:
i) サービス アプリリンク: ディープ リンクとアプリからウェブへのインタラクションに使用され、アプリが特定の URL を直接処理できるようになります。
ii) サービス Web 認証情報: 認証情報の自動入力を有効にするために使用され、ユーザーが保存されたパスワードをアプリと Web サイト全体でシームレスに使用できるようになります。

開発者向け:

applinks:shopeasy
webcredentials:shopeasy

プロダクション用:

applinks:shopeasy.com
webcredentials:shopeasy.com

d)(ref) URL スキームを構成する Info.plist 内: (URL スキームは、必ずしも Web URL ではないリンクを介してアプリを開く場合に便利で、アプリ内でディープ リンクしたり、別のアプリから起動したりできます。)

どこ：
CFBundleURLName: 人間が判読できる URL スキームの名前。これには、任意の説明的な文字列を指定できます。
CFBundleURLSchemes: アプリがサポートする実際の URL スキーム。これは、shopeasy/showeasy.com (本番セットの場合) のような一意の文字列である必要があります。

    
...
        
            CFBundleTypeRole
            Editor
            CFBundleURLName
            shopeasy
            CFBundleURLSchemes
            
                shopeasy
            
        
    

d) AppDelegate.mm 内:

#import 

// ...
// Add Below Code for DeepLinks

- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary *)options
{
return [RCTLinkingManager application:application openURL:url options:options];
}


- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
restorationHandler:(nonnull void (^)(NSArray> * _Nullable))restorationHandler
{
return [RCTLinkingManager application:application
continueUserActivity:userActivity
restorationHandler:restorationHandler];
}

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}

//DEEP LINKS TILL HERE

@end

e) ディープリンクデバイスのテスト:

これによりアプリが開きます。

npx uri-scheme open "shopeasy://product/mobile" --ios

または

xcrun simctl openurl booted "shopeasy://product/mobile"

ステップ 3: Android のセットアップと構成:

i) AndroidManifest.xml 内:

    

    

   
        
        
        
        
    

        
        
          
          
          
          
          
          
        
   

/>

ii) アンドロイドをチェックイン:
adb shell am start -W -a android.intent.action.VIEW -d "shopeasy://product/apple" com.shopeasy
または
ルートが機能している場合は、エミュレータでこのリンクをクリックします:
http://localhost:3000/share/product/iphone

ステップ 3: React Native アプリでの使用:

ナビゲーション.jsx

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import MainNavigator from './MainNavigator';
import { navigationRef } from '../utils/NavigationUtil';

const config = {
  screens: {
    ProductScreen: '/product/:id',
    CategoryScreen: '/category/:name',
  },
};

const linking = {
  prefixes: ['shopeasy://', 'https://shopeasy.com', 'http://localhost:3000'], 
  config,
};

const Navigation: React.FC = () => {
  return (
    
      
    
  );
};

export default Navigation;

App.jsx

  useEffect(() => {
    // Retrieve the initial URL that opened the app (if any) and handle it as a deep link.
    Linking.getInitialURL().then(url => {
      handleDeepLink({ url }, 'CLOSE'); // Pass the URL and an action ('CLOSE') to handleDeepLink function.
    });

    // Add an event listener to handle URLs opened while the app is already running.
    Linking.addEventListener('url', event => handleDeepLink(event, 'RESUME'));
    // When the app is resumed with a URL, handle it as a deep link with the action ('RESUME').

    // Cleanup function to remove the event listener when the component unmounts.
    return () => {
      Linking.removeEventListener('url', event => handleDeepLink(event, 'RESUME'));
    };
  }, []);

CLOSE/RESUME はオプションであり、要件に従ってハンドルが渡されます。