StarXpand SDK for React Native 開発者向けマニュアル Ver. 1.7.0

最終更新日: 2024年 6月 24日

クイックスタート

StarXpand SDKには、プリンターの動作を試すことができるサンプルアプリが含まれています。
StarXpand SDKを使ってプリンターを制御する第一歩として、まずは以下の4つのステップに沿ってサンプルアプリをビルドし、サンプルレシートを印刷してみましょう。

Step1.

プリンターと上位端末の接続設定

プリンターを用意して、タブレットや PC と通信可能な状態にします。
OS とプリンターのインターフェイスを選択してください。

OS

iOS Android Windows(UWP)

インターフェイス

LAN Bluetooth Bluetooth Low Energy USB

通信設定の手順

Bluetoothで接続する場合、はじめにiOSデバイスとプリンターのペアリングが必要です。

  • 1. プリンターの電源を入れます。

    Memo
    TSP650II、TSP650IISK、TSP700II、TSP800II、SP700をお使いの場合は、電源投入後に本体背面のPAIRボタンを長押してLEDを緑点滅状態にしてください。

  • 2. iOSの「設定」を開き [ Bluetooth ] を選択します。
  • 3. Bluetoothをオンにします。
  • 4. ペアリングを行うデバイス名を選択します。

    Memo
    PIN入力を求められた場合、PINを入力してください。(工場出荷時設定は 1234 です。)

  • 5. ペアリングが完了すると、デバイス名の横に”接続済み”と表示されます。

プリンターとiOSデバイスを同じネットワーク(セグメント)に接続します。

  • 1. iOSの「設定」を開き [ Wi-Fi ] を選択します。
  • 2. Wi-Fiをオンにします。
  • 3. 使用するネットワークを選択して、iOSデバイスを接続します。
  • 4. プリンターの電源を入れます。
  • 5. プリンターにLANケーブルを接続して、プリンターとiOSデバイスを同じネットワーク(同一セグメント)に接続します。

    Memo
    Star POSプリンターの工場出荷時の初期設定は”DHCP:有効”です。
    DHCPのない環境の場合、こちらのリンクの「対応OS・環境一覧 > ユーティリティ一覧」より、「イーサネットプリンター利用手引き」をご参照のうえ、プリンターに固定IPアドレスを設定してください。

事前準備は不要です。
Bluetooth Low Energyの場合はiOSデバイスとプリンターとのペアリングは必要ありません。

プリンターの電源を入れ、プリンターとiOSデバイスをUSBケーブルまたはLightningケーブルで接続します。

Memo
iOSデバイスと通信可能なUSBポートはプリンターによって異なります。
ご利用いただくプリンターのオンラインマニュアルまたはハードウェアマニュアルにてご確認ください。

プリンターとAndroidデバイスを同じネットワーク(セグメント)に接続します。

  • 1. Androidの設定から ネットワークとインターネット > インターネット を選択します。
  • 2. Wi-Fiをオンにし、使用するネットワークを選択してAndroidデバイスを接続します。
  • 3. プリンターの電源を入れます。
  • 4. プリンターにLANケーブルを接続して、プリンターとAndroidデバイスを同じネットワーク(同一セグメント)に接続します。

    Memo
    Star POSプリンターの工場出荷時の初期設定は”DHCP:有効”です。
    DHCPのない環境の場合、こちらのリンクの「対応OS・環境一覧 > ユーティリティ一覧」より、「イーサネットプリンター利用手引き」をご参照のうえ、プリンターに固定IPアドレスを設定してください。

Bluetoothで接続する場合、はじめにAndroidデバイスとプリンターのペアリングが必要です。

  • 1. プリンターの電源を入れます。

    Memo
    TSP650II、TSP650IISK、TSP700II、TSP800II、SP700をお使いの場合は、電源投入後に本体背面のPAIRボタンを長押してLEDを緑点滅状態にしてください。

  • 2. Androidデバイスの Bluetooth をオンにします。
  • 3. Androidの設定から 接続済みのデバイス > +新しいデバイスとペア設定 を選択します。
  • 4. ペアリングを行うデバイス名を選択します。

    Memo
    PIN入力を求められた場合、PINを入力してください。(工場出荷時設定は 1234 です。)

  • 5. ペアリングが完了すると、”ペア設定済みのデバイス”にデバイス名が表示されます。

プリンターの電源を入れ、プリンターとAndroidデバイスをUSBケーブルで接続します。

Memo
Androidデバイスと通信可能なUSBポートはプリンターによって異なります。
ご利用いただくプリンターのオンラインマニュアルまたはハードウェアマニュアルにてご確認ください。

プリンターとWindowsデバイスを同じネットワーク(セグメント)に接続します。

  • 1. タスクバーのネットワークアイコンをクリックしてWi-Fiをオンにして、使用するネットワークに接続します。
  • 2. プリンターの電源を入れます。
  • 3. プリンターにLANケーブルを接続して、プリンターとWindowsデバイスを同じネットワーク(同一セグメント)に接続します。

    Memo
    Star POSプリンターの工場出荷時の初期設定は”DHCP:有効”です。
    DHCPのない環境の場合、こちらのリンクの「対応OS・環境一覧 > ユーティリティ一覧」より、「イーサネットプリンター利用手引き」をご参照のうえ、プリンターに固定IPアドレスを設定してください。

Bluetoothで接続する場合、Windowsデバイスとプリンターのペアリングが必要です。

  • 1. プリンターの電源を入れます。

    Memo
    TSP650II、TSP650IISK、TSP700II、TSP800II、SP700をお使いの場合は、電源投入後に本体背面のPAIRボタンを長押してLEDを緑点滅状態にしてください。

  • 2. Windowsデバイスの Bluetooth をオンにします。
  • 3. Androidの設定から 接続済みのデバイス > +新しいデバイスとペア設定 を選択します。
  • 4. ペアリングを行うデバイス名を選択します。

    Memo
    PIN入力を求められた場合、PINを入力してください。(工場出荷時設定は 1234 です。)

  • 5. ペアリングが完了すると、”ペア設定済みのデバイス”にデバイス名が表示されます。

Step 2.

ReactNative アプリの開発環境構築

ReactNativeアプリの開発環境を準備します。

https://reactnative.dev/docs/environment-setup

Memo
サポートする開発環境についてはこちらをご参照ください。

Step3.

サンプルアプリのビルド

下記のコマンドを実行して、GitHubからcloneしたStarXpand SDKに含まれるサンプルアプリをビルドします。

Memo
弊社DeveloperサイトからStarXpand SDKのZIPパッケージをダウンロードすることもできます。
下記URLよりZIPパッケージを入手し、解凍してご利用ください。

https://sp-support.star-m.jp/developers/cross-platform-sdks/

各 OS のコマンド

iOS Android Windows(UWP)

$ git clone https://github.com/star-micronics/react-native-star-io10.git
$ cd react-native-star-io10/example
$ yarn install
$ cd ios
$ pod update
$ cd ..
$ npx react-native run-ios
$ git clone https://github.com/star-micronics/react-native-star-io10.git
$ cd react-native-star-io10/example
$ yarn install
$ npx react-native run-android
$ git clone https://github.com/star-micronics/react-native-star-io10.git
$ cd react-native-star-io10/example
$ yarn install
$ npx react-native run-windows

Step4.

サンプルレシートの印刷

ビルドに成功すると、印刷画面のサンプルアプリが起動します。

iOS Android Windows(UWP)


最初にプリンターを検索します。
以下のコマンドを実行して、検索画面のサンプルに切り替えてください。

$ cp samples/discovery/App.tsx ./

Interfaceを選択して [ Discovery ] を押してください。
タブレットやPCが接続可能なプリンターが表示されます。

":" 以降の文字列が ”Identifier” ですので、コピーまたはメモしておいてください。


次にサンプルレシートの印刷を行います。
以下のコマンドを実行して、再度印刷画面のサンプルに切り替えてください。

$ cp samples/printing/App.tsx ./

Identifier 入力欄に Discovery の画面でコピーしたプリンターの識別子(Identifier)を入力して [ Print ] を押します。



サンプルレシートは印刷されましたか?

次はお客様のアプリからプリンターを利用してみましょう。APIご利用の手引きを参考にしてください。