初めまして。
nana musicでサーバーサイドエンジニアをやってる江原と申します。
普段サーバーチームに属してますが、最近はもっぱらフロントをメインで開発をやってます。（たまにAPI作ったりしてましたが最近もっぱらやってなくて寂しい）

自己紹介はさておき、アドベントカレンダー13日目はWeexというVue.js製のネイティブアプリ言語を使って弊社で開発してるnanaのログイン画面を作ってみようと思います。

Weexとは

まずWeexってなんだよ！初めて聞いたよ！っておっしゃる方が大半だと思います。

Weexとは、世界的にで有名な企業のalibaba社が開発を行なっていたVue.js製のネイティブアプリ言語です。
Reactでいう、React Nativeに当たる言語です。
現在はApache Software Foundationというところに移管されたみたいです。

基本Vueベースなので、Vue.jsが書ける方ならどなたでも簡単に書けると思います。

今回の目標

さて、今回の目標ですが、はじめにも話した通り、弊社で開発してるnanaのログイン画面をWeexで作ってみるところまでやろうと思います。

このような画面です。

実際には画面の描画のみで、遷移とかの実装はやりませんのでご了承ください。

Weexをinstallする

まずweexのtool-kitをinstallします。


npm install weex-toolkit -g

Projectを作成する

projectを作成します。

weex create your-project-name

上記のコマンドを実行すると、以下の内容を聞かれるので入力していきます。

? Project name (weex)
? Project description (A weex project)
? Author (Ebara Kazuhiro <mailadress>)
❯ 1.0.17 Current: latest features 
  0.12.17 LTS: recommended for most users 
❯ stage-0: recommended for most users, support you to use all es6 syntax 
  stage-1 
  stage-2 
  stage-3 
? Use vue-router to manage your view router? (not recommended)
? Use ESLint to lint your code? (Y/n)
❯ Standard (https://github.com/standard/standard) 
  Airbnb (https://github.com/airbnb/javascript) 
  none (configure it yourself) 
? Set up unit tests (Y/n) 
❯ Yes, use NPM 
  Yes, use Yarn 
  No, I will handle that myself 

インストールが終わると以下のようなメッセージが表示されます。

```bash
✨  Done in 3.02s.

Success! Created weex at /Users/ebarakazuhiro/blog/weex

Inside that directory, you can run several commands:


  npm start
  Starts the development server for you to preview your weex page on browser
  You can also scan the QR code using weex playground to preview weex page on native

  npm run dev
  Open the code compilation task in watch mode

  npm run ios
  (Mac only, requires Xcode)
  Starts the development server and loads your app in an iOS simulator

  npm run android
  (Requires Android build tools)
  Starts the development server and loads your app on a connected Android device or emulator

  npm run pack:ios
  (Mac only, requires Xcode)
  Packaging ios project into ipa package

  npm run pack:android
  (Requires Android build tools)
  Packaging android project into apk package

  npm run pack:web
  Packaging html5 project into `web/build` folder

  npm run test
  Starts the test runner

To get started:

  cd weex
  npm start

ディレクトリ構造はこんな感じです。
iOSやAndroidのbuildコマンドを実行すると、ディレクトリが増えますが、構造自体そこまで複雑ではない気がします。

├── README.md
├── android.config.json
├── configs
├── dist
├── ios.config.json
├── node_modules
├── package.json
├── platforms
├── plugins
├── src
├── test
├── web
├── webpack.config.js
└── yarn.lock

ローカルで動かしてみる

実際にローカル環境で動かしてみます。

web

cd weex

npm start
or
yarn start
or
npm run web
or
yarn web

でローカル環境が立ち上がります。
起動方法がたくさんあるのはちょっと謎ですが、基本的にnpm run serve or yarn serveをやっているので、直接npm run serve or yarn serveを実行するのもありです。

立ち上がりました。簡単ですね。

iOSとAndroidのビルド方法は今回は省きます。

実際に作ってみた画面

結論として、ある程度まで形にはできるが、ローカルイメージは現状参照できなさそう？

https://github.com/weexteam/weex-hackernews/issues/52
上記のissueを見た感じ、Android StudioやXcodeに画像を配置して参照すればいけるっぽいみたいですが、VSCodeなどエディタではできないみたいです。

いじってみててネイティブアプリ言語としてはまだまだ発展途上だなと感じましたが、個人的にはまだまだ未知数の言語なので今後に期待しています。

今回書いたコードは後ほどGithubに載せるのでお楽しみに。

明日は、@djmapet が書いてくれます！お楽しみに！

おまけ

WeexにはWeexPlaygroundというアプリがあります。

こちらはWeexで開発している画面を実機で確認することができるアプリです。

local環境を立ち上げたときに表示されているQRコードをこのアプリで読み込むと、端末でローカル環境のデザインが表示されるようになります。