Hyperviewを使ってみましょう

01 Hyperviewとは？

Hyperviewは、ハイパーメディア駆動型開発を使用してモバイルアプリを開発するためのReact Nativeクライアントです。Hyperviewを一種のウェブブラウザのようなものと考えてください。ウェブブラウザはHTMLを取り込み、画面にドキュメントを表示します。HyperviewはHypermedia開発者が作成した新しいハイパーメディア形式であるHXMLを取り込み、スマートフォンにインターフェースを表示します。

Hyperviewアプリはスマートフォンの画面にアイコンとしてインストールされ保存することができます。見た目だけでなく、重要なことに、ネイティブアプリケーションのように動作します。

Hyperviewと一般的なモバイルアプリの主な違いは、ネイティブモバイルアプリが通常、Reactの「ファットクライアント」形式の開発スタイルを採用している点です。これにより、複雑な開発サイクルが必要となり、多くの開発者が管理する必要があります。トレードオフは、ユーザーが期待するようにアプリが現代的に感じられることです。

一方、Hyperviewは伝統的なウェブ開発と同じ開発モデルを使用します——「シンクライアント」モデルです。その結果、典型的なアプローチよりも開発が大幅に簡素化されます。これは、「ネイティブ感覚」のアプリを開発者が作成できるように設計されています。つまり、Hyperviewを使えば、典型的なモバイルアプリ開発の複雑さなしに、現代的でネイティブ感覚のモバイルアプリを作成できます。

Hyperviewを使えば、サーバー上でバックエンドをコード化できます——好きな言語で——そしてユーザーのスマートフォンにインストールされたHyperviewクライアントにHXMLを提供します。

02 Hyperviewの入門 — デモアプリの閲覧

02.01 公式ガイドに従う

まず、Hyperviewウェブサイトの入門ガイドに従ってください。モバイルアプリ開発が初めての場合は、iOSおよび/またはAndroidのシミュレーターをインストールする必要があります。つまり、Xcodeをインストールし、初回にXcodeを起動した際にiOS開発ツールもインストールする必要があります。Androidの場合は、Android Studioをインストールします。

02.02 TypeError: Network request failed

ガイドに従った結果、デモアプリを実際に表示することができませんでした。デモアプリを見ようとした時、エラーが発生しました：TypeError: Network request failed。デモアプリを見るために、追加の設定が必要でした。

02.03 デモアプリの閲覧のためのapp.config.tsの変更

Hyperviewクライアントで設定する必要がある2つの重要な変数があり、それらはdemoフォルダ内のapp.config.tsに位置しています。最初の変数はbaseUrlです：

1
2
3
4
  extra: {
    baseUrl: process.env.BASE_URL || 'http://0.0.0.0:8085',
    googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY || '', // Leaving the key empty will enable dev-only experience
  },

Hyperviewリポジトリに含まれているデモアプリを見るためには、baseUrlのデフォルトを、yarn startを実行した際に得られるIPアドレスに設定する必要があります。例えば、私がdemoフォルダ内でyarn startを実行すると、次のような出力が得られます：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
yarn run v1.22.22
$ expo start
Starting project at /Users/micah/Work/Software_Development/demos/hyperview/demo
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █   █▄ █▄██ ▄▄▄▄▄ █
█ █   █ █ ▀▄ █▀█ ██ █   █ █
█ █▄▄▄█ █▀██▀▀█▀▄██ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄▀▄█ █▄█▄█▄▄▄▄▄▄▄█
█▄▄▀█▄ ▄█▀▀▀▄▀█▄ ███ ▀▄▄ ▄█
█▀▄▄ █▄▄▄▀█▀ ▄██  ▀ █▄  ▀██
█▀▄ █▄█▄▄█▀▄█▄▀▄▀▄▀▄▀▀▄ ▀██
████ ▀ ▄  ▄██▀██▄▄▄█▄▀ ▀███
█▄▄▄█▄▄▄█▀▄ ▄▀█▄▄ ▄▄▄ ▀ ▄▄█
█ ▄▄▄▄▄ █▀██ ▄██▀ █▄█ ▀▀█▀█
█ █   █ █▄███▄▀▄█▄▄ ▄▄▀   █
█ █▄▄▄█ █▀▀▀█▀█▀▄██▄▀█▀▀ ██
█▄▄▄▄▄▄▄█▄▄▄▄▄▄▄████▄▄▄▄▄▄█

› Metro waiting on exp://192.168.0.44:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Using Expo Go
› Press s │ switch to development build

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› Press o │ open project code in your editor

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
Android Bundling complete 5941ms
› Stopped server
✨  Done in 20.59s.

Metro waiting on exp://192.168.0.44:8081という行に注目してください。192.168.0.44:8081が重要な部分です。app.config.tsファイルで、baseUrlのデフォルトをそのアドレスに変更します：

1
2
3
4
  extra: {
    baseUrl: process.env.BASE_URL || 'http://192.168.0.44:8081',
    googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY || '', // Leaving the key empty will enable dev-only experience
  },

Metroバンドラーがexp://192.168.0.44:8081で待機しているにもかかわらず、baseUrlはhttp://で始める必要があります。この一つの変更で、私はデモアプリを見ることができました。

同じ結果を得るために、BASE_URL="http://192.168.0.44:8081" yarn startを実行することもできます。

03 Hyperviewの入門 — 独自のバックエンドを使用

デモの閲覧方法がわかったので、次は自分のコードで遊び始めたいと思うでしょう。

03.01 エンドポイントの作成

まず、HXMLコードのエンドポイントを作成する必要があります。例えば、Laravelプロジェクトがあるとしましょう。ルートとビューを作成します：

1
2
3
4
// myproject/routes/web.php
Route::get('/hv', function () {
    return view('hv_home');
});

ビューの中には次のHXMLコードを配置できます：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<doc xmlns="https://hyperview.org/hyperview">
    <screen>
        <body>
            <header>
                <text>
                    Hello world header
                </text>
            </header>
            <view>
                <text>Hello World</text>
            </view>
        </body>
    </screen>
</doc>

次に、このコードをHyperviewクライアントでどのように表示するかという問題です。

03.02 app.config.tsの変更

まず、app.config.tsのbaseUrlを設定する必要があります：

1
2
3
4
  extra: {
    baseUrl: process.env.BASE_URL || 'http://127.0.0.1:8081',
    googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY || '', // Leaving the key empty will enable dev-only experience
  },

Laravelサーバーを起動すると、デフォルトでサーバーはhttp://127.0.0.1:8000に開きます。経験上、Metroバンドラーが使用するポート8081で開く必要がありました。

php artisan serve --port 8081

03.03 App.tsxの変更

baseUrlを変更し、yarn startでHyperviewサーバーを再起動しても、まだTypeError: Network request failedエラーが発生します。demo/App.tsxにある別の変数を設定する必要があります：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<Hyperview
    behaviors={Behaviors}
    components={Components}
    entrypointUrl={`${Constants.expoConfig?.extra?.baseUrl}/hyperview/public/index.xml`}
    fetch={fetchWrapper}
    formatDate={formatDate}
    logger={new Logger(Logger.Level.log)}
    navigationComponents={{
      BottomTabBar,
    }}
/>

HyperviewクライアントはReact Nativeコンポーネントです。書籍hypermedia.systemsでは、HTMXを使用した現代のハイパーメディア駆動型開発の方法と共に、Hyperviewの使用方法も教えています。書籍では、demo/src/constants.jsを以下のように変更するように指示しています：

1
2
//export const ENTRY_POINT_URL = 'http://0.0.0.0:8085/index.xml';
export const ENTRY_POINT_URL = 'http://0.0.0.0:5000/';

http://0.0.0.0:5000/は、書籍の前半で構築されたContactsアプリのFlaskバックエンドエンドポイントに対応しています。2025年1月時点では、demo/src/constants.jsファイルとENTRY_POINT_URL変数は存在しません。代わりに、demo/App.tsxの<Hyperview>コンポーネント内のentrypointUrl属性に置き換わっています。

したがって、Hyperviewが私たちのLaravelバックエンドのHyperviewビューを指すようにするには、entrypointUrlを変更する必要があります：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<Hyperview
    behaviors={Behaviors}
    components={Components}
    entrypointUrl={`${Constants.expoConfig?.extra?.baseUrl}/hv`}
    fetch={fetchWrapper}
    formatDate={formatDate}
    logger={new Logger(Logger.Level.log)}
    navigationComponents={{
      BottomTabBar,
    }}
/>

03.04 エンドポイントへのアクセス

app.config.tsとApp.tsxの変更を行い、php artisan serve --port 8081でLaravel開発サーバーを起動し、再度yarn startでHyperviewアプリを起動すると、http://127.0.0.1:8081/hvエンドポイントにアクセスし、hv_homeビューを表示することができます。おめでとうございます、あなたは今、ハイパーメディア駆動型のモバイルアプリケーション開発者、またはモバイルマスターです！

Profile Photo

Author

Added

2025年1月13日

Technologies
hyperview hyperview
laravel laravel