Spring Mobileのガイド

1. 概要

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

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

2. SpringMobileの機能

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

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

次に、Spring MobileとSpring BootおよびFreemarker Template Engineを使用してデモアプリケーションを作成し、最小限のコーディングでデバイスの詳細をキャプチャしてみましょう。

3.1. Mavenの依存関係

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


    org.springframework.mobile
    spring-mobile-device
    1.1.5.RELEASE

Spring Mobileの最新バージョンはCentral Maven Repositoryで確認できます。

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ファイル内に配置しましょう。

You are into browser version

デバイスタイプに応じて、<h1>タグ内のコンテンツを変更します。

**3.3. DeviceDelegatingViewresolverを有効にする**

Spring MobileDeviceDelegatingViewresolverサービスを有効にするには、次のプロパティを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を渡します。これは、リクエストごとに挿入されたデバイス情報です。これは、apllication.propertiesで有効にしたDeviceDelegatingViewresolverによって行われます。
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で実行されます。

We will use Google Chrome’s Developer Console to emulate different kinds of device.ctrl + shift + iを押すか、F12.を押すと有効になります

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

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

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

ページを更新するとすぐに、content of the page changes because DeviceDelegatingViewresolver has already detected that the last request came from a mobile device.に気付くでしょう。したがって、テンプレートのモバイルフォルダ内のindex.ftlファイルを渡しました。

結果は次のとおりです。

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

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

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

?site_preference=mobile

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

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

?site_preference=tablet

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

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

5. 結論

Webアプリケーションを作成し、クロスプラットフォーム機能を実装しました。生産性の観点からは、パフォーマンスが大幅に向上します。 Spring Mobile eliminates many front-end scripting to handle cross-browser behavior, thus reducing development time.

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

TOC

Spring Mobileのガイド