JNLP アプリ

JNLPアプリケーションやアプレットの具体例を実行する

このチュートリアルでは、CheerpJを使用してブラウザでJNLP（Java Web Startアプリ）を実行する方法をステップバイステップで説明します。

Java Web Startアプリケーションを実行するためのすぐに使えるツールに興味がある場合は、CheerpJ JNLP Runnerブラウザ拡張機能をご覧ください。

このチュートリアルは2つのパートに分かれています。

前提条件

アプリケーションやアプレットのいずれかを実行するには、以下が必要です：

  • アプリケーションの .jnlp ファイル（以下に示します）
  • Node.js (>= 18)
  • ページをローカルでホストするための簡単なhttp-server
  • HTMLファイルを作成および編集するためのテキストエディタ
  • Chrome、Firefox、Safariなどのモデム・ブラウザー

すでにJNLPアプリをお持ちで、CheerpJを使ってすぐにブラウザで実行したい場合は、JNLPクイックスタート チュートリアルをご覧ください。

JNLP アプリケーション: SwingSet3

1.　.jnlp ファイル

まず、JNLPファイルを確認しましょう。まず、JNLPファイルを確認しましょう。以下は、よく知られたデモアプリケーションSwingSet3のJNLPファイルの例です。次の3つの重要な要素が強調されています：

  • コードベース: <jnlp codebase="">として見つかります。アプリケーションファイルがどこからダウンロードされるかを示します。
  • JARファイル: <resources> セクション内の<jar>タグで指定されています。
  • クラス名: <application-desc>タグ内のmain-classで指定されています。このタグは、アプリがスタンドアロンのアプリケーションであることも示しています。
SwingSet3.jnlp
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE jnlp PUBLIC "-//Sun Microsystems, Inc.//DTD JNLP 1.5//EN">
<jnlp codebase="https://raw.githubusercontent.com/leaningtech/cheerpj-meta/main/examples/SwingSet3/" href="SwingSet3.jnlp" spec="6.0+">
  <information>
    <title>SwingSet3</title>
    <vendor>Oracle America, Inc.</vendor>
    <homepage href="https://swingset3.dev.java.net"/>
    <description>Demo to showcase features of the Swing UI toolkit in Java 6</description>
    <icon href="swingset3/resources/images/splash.png" kind="splash"/>
    <offline-allowed/>
    <shortcut online="true"/>
  </information>
  <resources>
    <j2se version="1.6+"/>
    <jar href="SwingSet3.jar" main="false"/>
    <jar href="lib/AppFramework.jar"/>
    <jar href="lib/TimingFramework.jar"/>
    <jar href="lib/swing-worker.jar"/>
    <jar href="lib/swingx.jar"/>
  </resources>
  <application-desc main-class="com.sun.swingset3.SwingSet3"/>
</jnlp>

2. アプリケーションファイルをダウンロードする

アプリケーションのJARファイルを、codebase URL とjar URLを連結して完全なURLを手動で作成し、ブラウザのナビゲーションバーに貼り付けてダウンロードします。 例えば:

https://raw.githubusercontent.com/leaningtech/cheerpj-meta/main/examples/SwingSet3/SwingSet3.jar

JNLPに含まれるすべてのJARに対して、この手順を実行してください。

3. プロジェクトディレクトリを作成する

すべてのファイルを保存するディレクトリを作成しましょう。cheerpj-example-swingset3のような任意の名前を選ぶことができます：

Terminal window
mkdir cheerpj-example-swingset3

次に、JNLPファイルに示されたように、アプリケーションのディレクトリ構造を作成しましょう。この例では、libというサブディレクトリがあります。

Terminal window
cd cheerpj-example-swingset3
mkdir lib

JNLPのディレクトリ構造に従って、このディレクトリ内にアプリケーションのJARファイルを配置しましょう。 このアプリケーションの場合、次のようになります:

└──cheerpj-example-swingset3
    ├── SwingSet3.jar
    └── lib
        ├── AnimatedTransitions.jar
        ├── AppFramework.jar
        ├── Filters.jar
        ├── MultipleGradientPaint.jar
        ├── TimingFramework.jar
        ├── javaws.jar
        ├── swing-layout-1.0.jar
        ├── swing-worker.jar
        └── swingx.jar

4. HTMLファイルを作成する

プロジェクトディレクトリcheerpj-example-swingset3 内に、index.html という基本的なHTMLファイルを作成しましょう。以下のようになります:

index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>SwingSet3 (CheerpJ)</title>
    <script src="https://cjrtnc.leaningtech.com/4.0/loader.js"></script>
    <style>
      html,
      body {
        margin: 0;
      }


      #container {
        width: 100vw;
        height: 100svh;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script type="module">
      await cheerpjInit();
      cheerpjCreateDisplay(-1, -1, document.getElementById("container"));
      await cheerpjRunJar("/app/SwingSet3.jar");
    </script>
  </body>
</html>

何が起こっているのか？

  • CheerpJランタイム環境は次のように統合されています:
<script src="https://cjrtnc.leaningtech.com/4.0/loader.js"></script>
  • cheerpjInit() はCheerpJランタイム環境を初期化します。
  • cheerpjCreateDisplay() は、すべてのJavaウィンドウを含むグラフィカルな環境を作成します。
  • cheerpjRunJar() はアプリケーションを実行します。
  • /app/ は、ページが読み込まれるウェブサーバーのルートを参照する仮想ファイルシステムのマウントポイントです。

この例では、クラス名がマニフェストに含まれているため、cheerpjRunJar() を使用しています。クラス名がマニフェストに含まれていない場合は、JNLPで指定されたメインクラス名を使用してcheerpjRunMain() を使用できます。

5. ページをローカルでホストする

この例を表示するには、ファイルをWebサーバーでホストする必要があります。Vite は便利なツールで、ファイルが変更されると自動的にページをリロードしてくれます。

Terminal window
npx vite

または、http-serverユーティリティを使用することもできます：

Terminal window
npm install http-server
http-server -p 8080

ブラウザでhttp://127.0.0.1:8080/のようなlocalhostのURLを開いてください。

結果

ブラウザでアプリケーションが実行されているのが確認できるはずです:

ソースコードとクレジット

JNLPアプレット: Pitch

NASAの航空工学入門からPitchアプレットを使用します。このアプレットは、航空機のピッチ運動のインタラクティブなアニメーションを表示します。詳細はこちら。

1. .jnlpファイル

まず、JNLPファイルを確認しましょう。 以下にPitchアプレットのJNLPファイルの例があります。次の3つの重要な要素が強調されています:

  • コードベース: <jnlp codebase="">として見つかります。アプリケーションファイルがどこからダウンロードされるかを示します。
  • JARファイル: <resources> セクション内の<jar>タグで指定されています。
  • クラス名: <applet-desc>タグ内のmain-classで指定されています。このタグは、アプリがアプレットであることも示しています。
PitchApplet.jnlp
<?xml version="1.0" encoding="utf-8"?>
<!-- JNLP File for Pitch applet -->
<jnlp
  spec="1.0+"
  codebase="https://raw.githubusercontent.com/leaningtech/cheerpj-meta/main/examples/Pitch-Applet/"


  href="PitchApplet.jnlp">
  <information>
    <title>Pitch</title>
    <vendor>NASA Glenn Research Center</vendor>
    <homepage href="https://www.grc.nasa.gov/WWW/K-12/airplane/"/>
    <description>Pitch motion simulator</description>
    <description kind="short">Beginner's Guide to Aeronautics - Pitch motion simulator written in Java</description>
    <offline-allowed/>
  </information>
  <security>
      <all-permissions/>
  </security>
  <resources>
    <j2se version="1.4+" initial-heap-size="30m" max-heap-size="300m" />
    <jar href="Pitch.jar"/>
  </resources>
  <applet-desc main-class="Pitchview" width="300" height="500"/>
</jnlp>

2. アプレットファイルをダウンロードする

アプレットのJARファイルを、codebase URL とjar URLを連結して完全なURLを手動で作成し、ブラウザのナビゲーションバーに貼り付けてダウンロードします。 例えば:

https://raw.githubusercontent.com/leaningtech/cheerpj-meta/main/examples/Pitch-Applet/Pitch.jar

3. プロジェクトディレクトリを作成する

すべてのファイルを保存するディレクトリを作成しましょう。cheerpj-example-appletのような任意の名前を選ぶことができます：

Terminal window
mkdir cheerpj-example-applet

次に、JNLPディレクトリ構造に従って、このディレクトリ内にアプリケーションのJARを配置しましょう。このアプリの場合、次のようになります：

└──cheerpj-example-applet
    ├── Pitch.jar

4. HTMLファイルを作成する

プロジェクトディレクトリ内に、次のようなindex.htmlというHTMLファイルを作成しましょう:

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Pitch applet (CheerpJ)</title>
    <script src="https://cjrtnc.leaningtech.com/4.0/loader.js"></script>
  </head>
  <style>
    div {
      max-width: 500px;
      margin: auto;
      text-align: center;
    }
    h1 {
      margin-bottom: 50px;
    }
    h5 {
      margin-top: 20px;
    }
  </style>


  <body>
    <div>
      <h1>Applet example with CheerpJ</h1>
      <div>
        <cheerpj-applet
          archive="Pitch.jar"
          code="Pitchview"
          height="300"
          width="500"
        >
          Your browser cannot handle the applet tag!
        </cheerpj-applet>
      </div>
      <h5>
        The applet shown in this example belongs to the NASA's
        <a href="https://www.grc.nasa.gov/WWW/K-12/airplane/"
          >Beginner's Guide to Aeronautics</a
        >
        and it is available at their
        <a href="https://github.com/nasa/BGA/tree/main">GitHub repository</a>.
      </h5>
      <h5>
        Applet is running with
        <a href="https://labs.leaningtech.com/cheerpj3">CheerpJ</a> by
        <a href="https://leaningtech.com/">©Leaning Technologies</a>
      </h5>
    </div>
    <script type="module">
      await cheerpjInit();
    </script>
  </body>
</html>

何が起こっているのか？

  • CheerpJランタイム環境は次のように統合されています:
<script src="https://cjrtnc.leaningtech.com/4.0/loader.js"></script>
  • <cheerpj-applet> タグには、アプレットの .jar の場所、サイズ、クラス名が含まれています。 このタグはネイティブのJavaとの衝突を防ぐもので、古典的な <applet> タグも使用できます。
  • cheerpjInit() は、CheerpJランタイム環境を初期化します。

5. ページをローカルでホストする

この例を表示するには、ファイルをWebサーバーでホストする必要があります。Vite は便利なツールで、ファイルが変更されると自動的にページをリロードしてくれます。

Terminal window
npx vite

または、http-serverユーティリティを使用することもできます：

Terminal window
npm install http-server
http-server -p 8080

ブラウザでhttp://127.0.0.1:8080/のようなlocalhostのURLを開いてください。

結果

ブラウザでアプレットが実行されているのが確認できるはずです:

ソースコードとクレジット

さらに読む

CheerpJについてさらに学ぶには、リファレンスをご覧ください。すぐに使用できるJava Web Startアプリケーションを実行するツールに興味がある場合は、CheerpJ JNLP Runner ブラウザ拡張機能をお勧めします。

このページは役に立ちましたか？
ページの変更を提案する
FoilSim アプレット Swing Browser (ネットワーキング)