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

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

Transcript

1. Vueでネイティブアプリを
   作り倒す
   2018/1/12 Kyoto.js 15
   chan_kakuz
   

   View Slide

2. 自己紹介
   フリュー株式会社
   サーバーサイドエンジニア
   Vueとの出会いは入社してから
   ライブ、フェス、ベース、
   技術的なところの勉強、お酒、最近はクラフトビール
   仕事
   趣味
   Twitter @chan_kakuz
   

   View Slide

3. 今回話すこと
   

   View Slide

4. 話すこと
   ・Vueを使ったネイティブアプリケーションの作成方法と紹介
   - Ionic
   - Weex
   - Vue Native
   ・inputにtextを入れるとそのtextが表示されるアプリを作ります！
   

   View Slide

5. 今回話さないこと
   

   View Slide

6. 話さないこと
   ・Vueの基本的な記法
   等々、、、、
   

   View Slide

7. Vueで
   ネイティブアプリを作る
   ~Ionic編~
   

   View Slide

8. Ionicとは、、？
   もともとはAngularでクロスプラットフォームアプリを作れるプ
   ラットフォーム
   最近Vueにも対応した
   ただ、まだα版なのでできないことも多々あり
   

   View Slide

9. 早速作ろう！
   

   View Slide

10. Vueプロジェクトの作成
    $ npm install -g @vue/cli
    $ vue create sample-app
    $ cd sample-app
    

    View Slide

11. ブラウザで確認
    $ npm run serve
    

    View Slide

12. ということでここからが本題
    

    View Slide

13. Ionicの機能を使う
    ● main.jsを編集する
    $ npm install @ionic/vue
    ● @ionic/vueをインストール
    

    View Slide

14. Ionicの機能を使う
    ● App.vueを編集する
    

    View Slide

15. 動作確認
    

    View Slide

16. View Slide

17. とりあえずは成功だ
    が、、、
    

    View Slide

18. iOSアプリ用にビルドしよう
    

    View Slide

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
    

    View Slide

20. シミュレータで確認
    

    View Slide

21. View Slide

22. View Slide

23. Ionicの長所・短所
    ● 使えるコンポーネントが多い
    ● ハマりどころが少ない
    ● まだ、新しいため他に比べてVueで試した記事が少ない
    ● まだ全部のコンポーネントが使えるわけではなく、何が
    使えるのかよくわからないので試しながらという感じ
    

    View Slide

24. Vueで
    ネイティブアプリを作る
    ~Weex編~
    

    View Slide

25. Weexとは、、？
    Apache Software Foundationが提供している。
    Webの技術を使ってハイパフォーマンスな
    モバイルアプリケーションを作れるプラットフォーム
    対応しているフレームワークはVueとRax
    

    View Slide

26. 早速作ろう！
    

    View Slide

27. 下準備
    ● weex-toolkitのinstall
    $ npm install weex-toolkit -g
    ● スタータープロジェクトの作成
    $ weex create weex-sample-app
    ● 依存モジュールのinstallとstart
    $ cd weex-sample-app
    $ npm i
    $ npm start
    

    View Slide

28. 下準備
    ● 動作確認
    ○ http://localhost:8081にアクセス
    

    View Slide

29. iOS用にビルドしよう
    ● プラットフォームにiOSを追加
    $ weex platform add ios
    ● Weexで作ったアプリをビルド&実行！！
    $ weex run ios
    

    View Slide

30. すると、、、
    

    View Slide

31. View Slide

32. 悲しみ、、、、
    

    View Slide

33. どうやら
    pod installで失敗している？？
    

    View Slide

34. CocoaPodsを入れよう
    ● CocoaPodsのインストール
    $sudo gem install -n /usr/local/bin cocoapods
    

    View Slide

35. もう一回ビルド&実行
    

    View Slide

36. View Slide

37. View Slide

38. index.vueを変更
    
    
    {{text}}
    
    
    
    <br/>export default {<br/>data () {<br/>return {<br/>text: "default text"<br/>}<br/>}<br/>}<br/>
    

    View Slide

39. もう一回ビルド&実行
    

    View Slide

40. View Slide

41. 悲しみ、、、、
    

    View Slide

42. なんでこうなったか？？
    WeexはRuntime only buildであるため、
    今回のようなtemplateオプションに文字列を渡すような処理
    はできない、、、
    

    View Slide

43. Weexの長所・短所
    ● 最初のテンプレートのビルドなどはあんまりつまらずで
    きる
    ● ドキュメントにできることできないことがしっかりと書かれ
    ててわかりやすい
    ● 使えるコンポーネントが少なめ
    ● directiveでv-showやv-htmlが使えない
    ● Runtime only buildなのは注意が必要そう
    

    View Slide

44. Vueで
    ネイティブアプリを作る
    ~Vue Native編~
    

    View Slide

45. Vue Nativeとは、、？
    Vue.jsでクロスプラットフォームアプリケーションを作れるプ
    ラットフォーム
    Vue Nativeという名前だが、実際にはReactのAPIをラッピン
    グしてる
    

    View Slide

46. 早速作ろう！
    

    View Slide

47. 事前準備
    System Requirements
    ● node が 6.0以上
    ● npm が 4.0以上
    ● React Native CLI がグローバルでインストールされていること
    

    View Slide

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
    

    View Slide

49. すると、、、
    

    View Slide

50. View Slide

51. 血に染まっている、、、
    

    View Slide

52. なぜこうなったか
    どうやらReact Nativeのバージョンを0.55にしても、依存して
    いるbabel-preset-expoとexpoのバージョンが高く、血祭りに
    なるらしい
    

    View Slide

53. 対処法
    ● package.jsonを以下のように編集
    

    View Slide

54. 対処法
    ● app.jsonを以下のように編集
    

    View Slide

55. もう一回動作確認！
    $ npm run ios
    

    View Slide

56. View Slide

57. 成功！！！！！
    

    View Slide

58. ということでここからが本題
    

    View Slide

59. App.vueを修正
    

    View Slide

60. すると、、、
    

    View Slide

61. View Slide

62. View Slide

63. Vue Nativeの長所・短所
    ● Weexに比べると扱えるコンポーネントが多い
    ● Vuexが使える！！
    ● まだ$emitに対応していない(一応、同等の処理を行う方
    法があるらしいが、、、)
    ● ドキュメント通りにやってもつまるところは結構ありそう
    

    View Slide

64. 最後に
    どれも一長一短なところがある印象
    個人的には、Vue.jsでネイティブアプリを使うのならIonicが
    一番はまらず、使いやすい印象
    ただ、まだα版なので今後どうなるかわからない
    今後に期待！！
    

    View Slide