SpringMobileのガイド

投稿日: 2019-10-18 2022-11-03
タグ: Spring

1. 概要

Spring Mobileは、人気のある Spring Web MVC フレームワークの最新の拡張機能であり、最小限の労力と少ない定型コーディングで、クロスデバイスプラットフォームと完全または部分的に互換性がある必要があるWebアプリケーションの開発を簡素化するのに役立ちます。

この記事では、Spring Mobileプロジェクトについて学習し、SpringMobileの使用法を強調するサンプルプロジェクトを作成します。

2. SpringMobileの機能

自動デバイス検出： Spring Mobileには、サーバー側のデバイスリゾルバー抽象化レイヤーが組み込まれています。これにより、すべての着信要求が分析され、デバイスタイプ、オペレーティングシステムなどの送信者デバイス情報が検出されます。
サイト設定管理：サイト設定管理を使用して、Spring Mobileを使用すると、ユーザーはWebサイトのモバイル/タブレット/通常のビューを選択できます。 DeviceDelegatingViewresolver を使用することで、ユーザー側からの入力を要求することなく、デバイスタイプに応じてビューレイヤーを永続化できるため、これは比較的非推奨の手法です。
Site Switcher ：Site Switcherは、デバイスの種類（つまり、ユーザーのデバイスタイプに応じてユーザーを最も適切なビューに自動的に切り替えることができます）モバイル、デスクトップなど）
Device Aware View Manager ：通常、デバイスタイプに応じて、特定のデバイスを処理するための特定のサイトにユーザーリクエストを転送します。 Springモバイルのビューマネージャーを使用すると、開発者はすべてのビューを事前定義された形式で柔軟に配置でき、Springモバイルはデバイスタイプに基づいてさまざまなビューを自動管理します

3. アプリケーションの構築

次に、SpringモバイルとSpring Bootおよびフリーマーカーテンプレートエンジンを使用してデモアプリケーションを作成し、最小限のコーディングでデバイスの詳細をキャプチャしてみましょう。

3.1. Mavenの依存関係

開始する前に、pom.xmlに次のSpringMobile依存関係を追加する必要があります。

<dependency>
    <groupId>org.springframework.mobile</groupId>
    <artifactId>spring-mobile-device</artifactId>
    <version>2.0.0.M3</version>
</dependency>

最新の依存関係はSpringマイルストーンリポジトリで利用できることに注意してください。したがって、これをpom.xmlにも追加しましょう。

<repositories>
    <repository>
        <id>spring-milestones</id>
        <name>Spring Milestones</name>
        <url>https://repo.spring.io/libs-milestone</url>
        <snapshots>
            <enabled>false</enabled>
        </snapshots>
    </repository>
</repositories>

3.2. Freemarkerテンプレートを作成する

まず、Freemarkerを使用してインデックスページを作成しましょう。 Freemarkerの自動構成を有効にするために必要な依存関係を設定することを忘れないでください。

送信者デバイスを検出し、それに応じてリクエストをルーティングしようとしているため、これに対処するために3つの個別のFreemarkerファイルを作成する必要があります。 1つはモバイルリクエストを処理し、もう1つはタブレットを処理し、最後の1つ（デフォルト）は通常のブラウザリクエストを処理します。

src / main / resources /templatesの下に「mobile」と「tablet」という名前の2つのフォルダーを作成し、それに応じてFreemarkerファイルを配置する必要があります。最終的な構造は次のようになります。

└── src
    └── main
        └── resources
            └── templates
                └── index.ftl
                └── mobile
                    └── index.ftl
                └── tablet
                    └── index.ftl

それでは、次のHTMLをindex.ftlファイル内に配置しましょう。

<h1>You are into browser version</h1>

デバイスの種類に応じて、内部のコンテンツを変更します

鬼ごっこ、

**3.3. DeviceDelegatingViewresolverを有効にします**

Spring Mobile DeviceDelegatingViewresolver サービスを有効にするには、 application.properties内に次のプロパティを配置する必要があります：

spring.mobile.devicedelegatingviewresolver.enabled: true

Spring Mobileスターターを含めると、SpringBootでサイト設定機能がデフォルトで有効になります。ただし、次のプロパティをfalseに設定することで無効にできます。

spring.mobile.sitepreference.enabled: true

3.4. Freemarkerプロパティを追加する

Spring Bootがテンプレートを見つけてレンダリングできるようにするには、application.propertiesに以下を追加する必要があります。

spring.freemarker.template-loader-path: classpath:/templates
spring.freemarker.suffix: .ftl

3.5. コントローラを作成する

次に、着信要求を処理するためにControllerクラスを作成する必要があります。単純な@GetMappingアノテーションを使用して、リクエストを処理します。

@Controller
public class IndexController {

    @GetMapping("/")
    public String greeting(Device device) {
		
        String deviceType = "browser";
        String platform = "browser";
        String viewName = "index";
		
        if (device.isNormal()) {
            deviceType = "browser";
        } else if (device.isMobile()) {
            deviceType = "mobile";
            viewName = "mobile/index";
        } else if (device.isTablet()) {
            deviceType = "tablet";
            viewName = "tablet/index";
        }
        
        platform = device.getDevicePlatform().name();
        
        if (platform.equalsIgnoreCase("UNKNOWN")) {
            platform = "browser";
        }
     	
        return viewName;
    }
}

ここで注意すべき点がいくつかあります。

ハンドラーマッピングメソッドでは、org.springframework.mobile.device.Deviceを渡します。これは、各リクエストで挿入されたデバイス情報です。これは、apllication.propertiesで有効にしたDeviceDelegatingViewresolverによって実行されます。
org.springframework.mobile.device.Device には、 isMobile（）、isTablet（）、getDevicePlatform（）などの2つの組み込みメソッドがあります。これらを使用して、必要なすべてのデバイス情報をキャプチャして使用できます

3.6. JavaConfig

Spring Webアプリケーションでデバイス検出を有効にするには、いくつかの構成も追加する必要があります。

@Configuration
public class AppConfig implements WebMvcConfigurer {

    @Bean
    public DeviceResolverHandlerInterceptor deviceResolverHandlerInterceptor() { 
        return new DeviceResolverHandlerInterceptor(); 
    }

    @Bean
    public DeviceHandlerMethodArgumentResolver deviceHandlerMethodArgumentResolver() { 
        return new DeviceHandlerMethodArgumentResolver(); 
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) { 
        registry.addInterceptor(deviceResolverHandlerInterceptor()); 
    }

    @Override
    public void addArgumentResolvers(List<HandlerMethodArgumentResolver> argumentResolvers) {
        argumentResolvers.add(deviceHandlerMethodArgumentResolver()); 
    }
}

ほぼ完了です。最後に行うことは、アプリケーションを起動するためのSpringBoot構成クラスを構築することです。

@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

4. アプリケーションのテスト

アプリケーションを起動すると、 http：// localhost：8080で実行されます。

Google Chromeのデベロッパーコンソールを使用して、さまざまな種類のデバイスをエミュレートします。 ctrl + shift + i を押すか、F12を押すと有効になります。

デフォルトでは、メインページを開くと、SpringWebがデバイスをデスクトップブラウザとして検出していることがわかります。次の結果が表示されます。

次に、コンソールパネルで、左上の2番目のアイコンをクリックします。ブラウザのモバイルビューが有効になります。

ブラウザの左上隅にドロップダウンが表示されます。ドロップダウンでは、さまざまな種類のデバイスタイプを選択できます。モバイルデバイスをエミュレートするには、Nexus6Pを選択してページを更新しましょう。

ページを更新するとすぐに、DeviceDelegatingViewresolverが最後のリクエストがモバイルデバイスからのものであることをすでに検出しているため、ページのコンテンツが変更されていることがわかります。したがって、インデックスを通過しました。テンプレートのモバイルフォルダ内のftlファイル。

結果は次のとおりです。

同様に、タブレットバージョンをエミュレートします。前回と同じようにドロップダウンからiPadを選び、ページを更新してみましょう。コンテンツが変更されるため、タブレットビューとして扱う必要があります。

ここで、サイト設定機能が期待どおりに機能しているかどうかを確認します。

ユーザーがモバイルフレンドリーな方法でサイトを表示したいリアルタイムのシナリオをシミュレートするには、デフォルトのURLの最後に次のURLパラメーターを追加するだけです。

?site_preference=mobile

更新すると、ビューは自動的にモバイルビューに移動します。次のテキストが表示されます’あなたはモバイル版にいます’。

タブレットの設定をシミュレートするのと同じ方法で、デフォルトのURLの最後に次のURLパラメーターを追加するだけです。

?site_preference=tablet

また、前回と同様に、ビューはタブレットビューに自動的に更新されます。

デフォルトのURLは同じままであり、ユーザーが再びデフォルトのURLを通過すると、ユーザーはデバイスタイプに基づいてそれぞれのビューにリダイレクトされることに注意してください。

5. 結論

Webアプリケーションを作成し、クロスプラットフォーム機能を実装しました。生産性の観点からは、パフォーマンスが大幅に向上します。 Spring Mobileは、クロスブラウザーの動作を処理するための多くのフロントエンドスクリプトを排除し、開発時間を短縮します。

いつものように、更新されたソースコードはGitHubでオーバーです。

getdocs

13036