Vueでネイティブアプリを作り倒す

Vueを使ってクロスプラットフォームアプリケーションを作れる手段はいくつかありますが、今回はIonicとWeexとVue Nativeで作っていく話です

Transcript

1. Vueでネイティブアプリを 作り倒す 2018/1/12 Kyoto.js 15 chan_kakuz
2. 自己紹介 フリュー株式会社 サーバーサイドエンジニア Vueとの出会いは入社してから ライブ、フェス、ベース、 技術的なところの勉強、お酒、最近はクラフトビール 仕事 趣味 Twitter @chan_kakuz
3. 今回話すこと
4. 話すこと ・Vueを使ったネイティブアプリケーションの作成方法と紹介 - Ionic - Weex - Vue Native ・inputにtextを入れるとそのtextが表示されるアプリを作ります！
5. 今回話さないこと
6. 話さないこと ・Vueの基本的な記法 等々、、、、
7. Vueで ネイティブアプリを作る ~Ionic編~
8. Ionicとは、、？ もともとはAngularでクロスプラットフォームアプリを作れるプ ラットフォーム 最近Vueにも対応した ただ、まだα版なのでできないことも多々あり
9. 早速作ろう！
10. Vueプロジェクトの作成 $ npm install -g @vue/cli $ vue create sample-app $ cd sample-app
11. ブラウザで確認 $ npm run serve
12. ということでここからが本題
13. Ionicの機能を使う • main.jsを編集する $ npm install @ionic/vue • @ionic/vueをインストール
14. Ionicの機能を使う • App.vueを編集する
15. 動作確認
17. とりあえずは成功だ が、、、
18. iOSアプリ用にビルドしよう
19. Capacitorを使う • @capacitor/core と @capacitor/cliをinstall $ npm install @capacitor/core @capacitor/cli • イニシャライズしてビルド $ npx cap init sampleApp com.sample.ionic.app • プラットフォームとしてiOSを追加 $ mv dist www $ npx cap add ios
20. シミュレータで確認
23. Ionicの長所・短所 • 使えるコンポーネントが多い • ハマりどころが少ない • まだ、新しいため他に比べてVueで試した記事が少ない • まだ全部のコンポーネントが使えるわけではなく、何が 使えるのかよくわからないので試しながらという感じ
24. Vueで ネイティブアプリを作る ~Weex編~
25. Weexとは、、？ Apache Software Foundationが提供している。 Webの技術を使ってハイパフォーマンスな モバイルアプリケーションを作れるプラットフォーム 対応しているフレームワークはVueとRax
26. 早速作ろう！
27. 下準備 • weex-toolkitのinstall $ npm install weex-toolkit -g • スタータープロジェクトの作成 $ weex create weex-sample-app • 依存モジュールのinstallとstart $ cd weex-sample-app $ npm i $ npm start
28. 下準備 • 動作確認 ◦ http://localhost:8081にアクセス
29. iOS用にビルドしよう • プラットフォームにiOSを追加 $ weex platform add ios • Weexで作ったアプリをビルド&実行！！ $ weex run ios
30. すると、、、
32. 悲しみ、、、、
33. どうやら pod installで失敗している？？
34. CocoaPodsを入れよう • CocoaPodsのインストール $sudo gem install -n /usr/local/bin cocoapods
35. もう一回ビルド&実行
38. index.vueを変更 <template> <div> {{text}} <input v-model="text" /> </div> </template> <script> export default { data () { return { text: "default text" } } } </script>
39. もう一回ビルド&実行
41. 悲しみ、、、、
42. なんでこうなったか？？ WeexはRuntime only buildであるため、 今回のようなtemplateオプションに文字列を渡すような処理 はできない、、、
43. Weexの長所・短所 • 最初のテンプレートのビルドなどはあんまりつまらずで きる • ドキュメントにできることできないことがしっかりと書かれ ててわかりやすい • 使えるコンポーネントが少なめ • directiveでv-showやv-htmlが使えない • Runtime only buildなのは注意が必要そう
44. Vueで ネイティブアプリを作る ~Vue Native編~
45. Vue Nativeとは、、？ Vue.jsでクロスプラットフォームアプリケーションを作れるプ ラットフォーム Vue Nativeという名前だが、実際にはReactのAPIをラッピン グしてる
46. 早速作ろう！
47. 事前準備 System Requirements • node が 6.0以上 • npm が 4.0以上 • React Native CLI がグローバルでインストールされていること
48. 事前準備 • Vue Native CLIでプロジェクトの作成＆確認 • $ npm install -g vue-native-cli $ npm install -g create-react-native-app $ vue-native init sampleApp $ cd sampleApp $ npm run ios
49. すると、、、
51. 血に染まっている、、、
52. なぜこうなったか どうやらReact Nativeのバージョンを0.55にしても、依存して いるbabel-preset-expoとexpoのバージョンが高く、血祭りに なるらしい
53. 対処法 • package.jsonを以下のように編集
54. 対処法 • app.jsonを以下のように編集
55. もう一回動作確認！ $ npm run ios
57. 成功！！！！！
58. ということでここからが本題
59. App.vueを修正
60. すると、、、
63. Vue Nativeの長所・短所 • Weexに比べると扱えるコンポーネントが多い • Vuexが使える！！ • まだ$emitに対応していない(一応、同等の処理を行う方 法があるらしいが、、、) • ドキュメント通りにやってもつまるところは結構ありそう
64. 最後に どれも一長一短なところがある印象 個人的には、Vue.jsでネイティブアプリを使うのならIonicが 一番はまらず、使いやすい印象 ただ、まだα版なので今後どうなるかわからない 今後に期待！！