Spring Mobileのガイド

1概要

Spring Mobileは、一般的な Spring Web MVC フレームワークを現代的に拡張したもので、Webアプリケーションの開発を簡素化するのに役立ちます。

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

2 Spring Mobileの特徴

  • 自動デバイス検出: Spring Mobileはサーバーサイドを内蔵しています

デバイスリゾルバ抽象化レイヤ。これはすべての着信要求を分析します 送信元のデバイス情報(デバイスタイプ、 オペレーティングシステムなど サイト設定管理:** サイト設定管理、Springの使用

モバイルでは、ユーザーはWebサイトのモバイル/タブレット/通常表示を選択できます。

を使用することで、これは比較的廃止された手法です。 DeviceDelegatingViewresolver ビューレイヤを永続化することができます ユーザー側からの入力を要求せずにデバイスタイプで サイトスイッチャー** :サイトスイッチャーは自動的に

自分のデバイスタイプに応じた最適なビューへのユーザー (モバイル、デスクトップなど) Device Aware View Manager ** :通常、デバイスタイプによっては

特定のデバイスを処理することを意図した特定のサイトにユーザーの要求を転送します。 Spring Mobileの View Manager により、開発者はすべてのビューを定義済みのフォーマットに柔軟に変更でき、Spring Mobileはデバイスタイプに基づいてさまざまなビューを自動管理します。

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

それでは、Spring Bootと Freemarker Template Engine を組み合わせたSpring Mobileを使用してデモアプリケーションを作成し、最小限のコーディングでデバイスの詳細をキャプチャしてみましょう。

3.1. Mavenの依存関係

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

<dependency>
    <groupId>org.springframework.mobile</groupId>
    <artifactId>spring-mobile-device</artifactId>
    <version>1.1.5.RELEASE</version>
</dependency>

Spring Mobileの最新バージョンは、https://search.maven.org/classic/#search%7C1%7Cg%3A%22org.springframework.mobile%22%20AND%20a%3A%22spring-mobileで確認できます。 -device%22[Central Mavenリポジトリ]。

3.2. フリーマーカーテンプレートを作成する

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

送信側デバイスを検出し、それに応じて要求をルーティングしようとしているので、これに対処するために3つの別々のFreemarkerファイルを作成する必要があります。 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>

端末の種類に応じて、 <h1> タグ内のコンテンツを変更します。

3.3. DeviceDelegatingViewresolver を有効にする

Spring Mobile DeviceDelegatingViewresolver サービスを有効にするには、 application.properties: の中に次のプロパティを入れる必要があります

spring.mobile.devicedelegatingviewresolver.enabled: true

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

spring.mobile.sitepreference.enabled: true

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

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

@Controller
public class IndexController {

    @GetMapping("/")
    public String greeting(Device device) {

        String deviceType = "browser";
        String platform = "browser";

        if (device.isNormal()) {
            deviceType = "browser";
        } else if (device.isMobile()) {
            deviceType = "mobile";
        } else if (device.isTablet()) {
            deviceType = "tablet";
        }

        platform = device.getDevicePlatform().name();

        if (platform.equalsIgnoreCase("UNKNOWN")) {
            platform = "browser";
        }

        return "index";
    }
}

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

  • ハンドラマッピングメソッドでは、渡しています

org.springframework.mobile.device.Device 。これは注入された機器です リクエストごとに情報が表示されます。これは で有効にした DeviceDelegatingViewresolver apllication.properties ** org.springframework.mobile.device.Device にはいくつかの作り付けがあります

isMobile()、isTablet()、getDevicePlatform() などのメソッド。これらを使用して、必要なデバイス情報をすべて取得して使用できます

3.5. Java Config

もう終わりです。最後にやるべきことは、アプリケーションを起動するためのSpring Boot設定クラスを構築することです。

@SpringBootApplication
public class Application {

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

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

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

  • さまざまな種類のデバイスをエミュレートするために Google Chromeのデベロッパーコンソール を使用します。

デフォルトでは、メインページを開くと、Spring Webはデバイスをデスクトップブラウザとして検出していることがわかります。次のような結果になるはずです。

リンク:/uploads/browser.png%201360w[]

それでは、コンソールパネルの左上にある2番目のアイコンをクリックします。それはブラウザのモバイルビューを可能にするでしょう。

ブラウザの左上隅にドロップダウンが表示されているのがわかります。

ドロップダウンでは、さまざまな種類のデバイスタイプを選択できます。モバイルデバイスをエミュレートするには、Nexus 6Pを選択してページを更新しましょう。

DeviceDelegatingViewresolver は、最後の要求がモバイルデバイスからのものであることを既に検出しているため、ページを更新するとすぐにページの内容が変更されることに気付くでしょう。** したがって、モバイルフォルダ内の index.ftl ファイルをテンプレート

結果は次のとおりです。

リンク:/uploads/mobile.png%201362w[]

同様に、タブレット版をエミュレートします。前回と同じようにドロップダウンからiPadを選択し、ページを更新しましょう。

内容は変更され、タブレットビューとして扱う必要があります。

リンク:/uploads/tablet.png%201356w[]

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

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

?site__preference=mobile

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

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

?site__preference=tablet

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

デフォルトのURLは同じままで、ユーザーが再度デフォルトのURLにアクセスすると、ユーザーはデバイスの種類に基づいてそれぞれのビューにリダイレクトされます。

5結論

Webアプリケーションを作成し、クロスプラットフォーム機能を実装しました。生産性の観点からすると、これは驚異的なパフォーマンスの向上です。 Spring Mobileはブラウザ間の振る舞いを処理するための多くのフロントエンドスクリプティングを排除し、開発時間を短縮します。

いつものように、更新されたソースコードはhttps://github.com/eugenp/tutorials/tree/master/spring-mobile[over on GitHub]です。