初めまして。
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コードをこのアプリで読み込むと、端末でローカル環境のデザインが表示されるようになります。