3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Fuseの環境構築

Posted at

公式サイトを見ればわかるとは思いますが、一応環境構築から、最初のプレビューまでをまとめます。

###開発サポート環境

  • OS X 10.9以降。推奨は10.10。
  • windows7以降

###アプリの書き出しサポートOS

  • Android 4.1以降
  • iOS 8.0以降

###Fuseをインストールする

インストーラーをダウンロードする前に、アカウントの作成が必要になります。ここで先にアカウントを作成しておきましょう。

#####OS X (リンク)

基本的にはダウンロードページからファイル落としてインストールするだけです。以降はターミナルでfuseと入力すれば起動できます。

#####windows (リンク)

OS X同様、ダウンロードページからファイル落としてインストールするだけです。以降はコマンドラインでfuseと入力すれば起動できます。

###エディタ
Sublime Text3とAtomに関しては公式にプラグインが提供されているようです。非公式ではありますが、Visual Studio Codeのプラグインも公開されています。

Fuseが推奨しているのはSublime Text3のようで、初回起動時に、Sublime Text3のセットアップ(任意)も行ってくれます。

###プロジェクトを作る

下記でプロジェクトを生成します。サブディレクトリは任意です。

fuse create app プロジェクトの名前 サブディレクトリ

プロジェクトには必ずひとつの.uxファイルが含まれます。(デフォルトではMainView.uxというファイルと、.unoprojというふたつのファイル作られます)

.uxファイルはUXマークアップをしていく、アプリ本体となるファイルです。
.unoprojファイルは、書き出しの設定やアプリの署名情報などを記載するファイルとなっています。

※コマンドラインの他に、fuseのダッシュボードから"New Project"でつくることもできます。

###プロジェクトを実行する

実行するには二つのやり方があります。

アプリストアに提出したりするために、ファイル(.ipaや.apk)としてとして書き出す場合は、下記を実行します。

fuse build

実行しながらリアルタイムデバッグをしたい場合は下記を実行します。開発中は主にこちらで実行することになります。

fuse preview

できたてのプロジェクトをプレビューしてみると、

01.png

こんな感じです。.uxファイルにまだなにも記述がないので、枠だけできている感じです。

※プレビューに関しては、fuseのダッシュボードから"start app preview"で実行することもできます。

USB接続をして、同じwi-fiに接続すれば、実機でもリアルタイムプレビューが可能です。

下記のコマンドを実行するとiOSでプレビューするためのXcodeプロジェクトが自動に生成されます。

fuse preview -tios

Android向けには下記です。

fuse preview -tandroid

USB接続が必要なのは最初のビルドとインストールの時だけです。一度インストールした後はUSB接続する必要はありません。アプリがローカルのIPアドレスを記憶して、wi-fi経由で更新をキャッチします。つまり、各端末で一度プレビューを実行しておけば、同じネットワークに接続すれば、複数の端末で同時にプレビューを行うことが可能になります。

※もし、ネイティブコードを直接変更したり、PCのIPアドレスを変更したりする場合はUSB接続をしてプレビューを再実行する必要があります。

###Fuseをアンインストールする
こちらのコードを実行する

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?