Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vueでネイティブアプリを作り倒す
Search
chan_kaku
January 12, 2019
Programming
1
1.4k
Vueでネイティブアプリを作り倒す
Vueを使ってクロスプラットフォームアプリケーションを作れる手段はいくつかありますが、今回はIonicとWeexとVue Nativeで作っていく話です
chan_kaku
January 12, 2019
Tweet
Share
More Decks by chan_kaku
See All by chan_kaku
JJGU CCC 2019 Springまとめ~Java歴1年なりの意見を添えて~
takumiz19
1
2.3k
ionic/vueもβ版になったのでちゃんと触ってみた
takumiz19
0
520
Vueのライフサイクルを完全に理解
takumiz19
0
1.7k
Other Decks in Programming
See All in Programming
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
220
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
120
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
"config" ってなんだ? / What is "config"?
okashoi
0
220
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
750
puregoの活用例
aethiopicuschan
0
220
Ruby製社内ツールのGo移行
bgpat
2
330
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
18
4.8k
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
440
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
8
2.2k
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
180
Featured
See All Featured
Producing Creativity
orderedlist
PRO
336
39k
Web Components: a chance to create the future
zenorocha
305
41k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Being A Developer After 40
akosma
56
580k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
Thoughts on Productivity
jonyablonski
57
3.8k
The Language of Interfaces
destraynor
151
23k
Design by the Numbers
sachag
274
18k
What's in a price? How to price your products and services
michaelherold
237
11k
Documentation Writing (for coders)
carmenintech
59
3.9k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Transcript
Vueでネイティブアプリを 作り倒す 2018/1/12 Kyoto.js 15 chan_kakuz
自己紹介 フリュー株式会社 サーバーサイドエンジニア Vueとの出会いは入社してから ライブ、フェス、ベース、 技術的なところの勉強、お酒、最近はクラフトビール 仕事 趣味 Twitter @chan_kakuz
今回話すこと
話すこと ・Vueを使ったネイティブアプリケーションの作成方法と紹介 - Ionic - Weex - Vue Native ・inputにtextを入れるとそのtextが表示されるアプリを作ります!
今回話さないこと
話さないこと ・Vueの基本的な記法 等々、、、、
Vueで ネイティブアプリを作る ~Ionic編~
Ionicとは、、? もともとはAngularでクロスプラットフォームアプリを作れるプ ラットフォーム 最近Vueにも対応した ただ、まだα版なのでできないことも多々あり
早速作ろう!
Vueプロジェクトの作成 $ npm install -g @vue/cli $ vue create sample-app
$ cd sample-app
ブラウザで確認 $ npm run serve
ということでここからが本題
Ionicの機能を使う • main.jsを編集する $ npm install @ionic/vue • @ionic/vueをインストール
Ionicの機能を使う • App.vueを編集する
動作確認
None
とりあえずは成功だ が、、、
iOSアプリ用にビルドしよう
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
シミュレータで確認
None
None
Ionicの長所・短所 • 使えるコンポーネントが多い • ハマりどころが少ない • まだ、新しいため他に比べてVueで試した記事が少ない • まだ全部のコンポーネントが使えるわけではなく、何が 使えるのかよくわからないので試しながらという感じ
Vueで ネイティブアプリを作る ~Weex編~
Weexとは、、? Apache Software Foundationが提供している。 Webの技術を使ってハイパフォーマンスな モバイルアプリケーションを作れるプラットフォーム 対応しているフレームワークはVueとRax
早速作ろう!
下準備 • weex-toolkitのinstall $ npm install weex-toolkit -g • スタータープロジェクトの作成
$ weex create weex-sample-app • 依存モジュールのinstallとstart $ cd weex-sample-app $ npm i $ npm start
下準備 • 動作確認 ◦ http://localhost:8081にアクセス
iOS用にビルドしよう • プラットフォームにiOSを追加 $ weex platform add ios • Weexで作ったアプリをビルド&実行!!
$ weex run ios
すると、、、
None
悲しみ、、、、
どうやら pod installで失敗している??
CocoaPodsを入れよう • CocoaPodsのインストール $sudo gem install -n /usr/local/bin cocoapods
もう一回ビルド&実行
None
None
index.vueを変更 <template> <div> {{text}} <input v-model="text" /> </div> </template> <script>
export default { data () { return { text: "default text" } } } </script>
もう一回ビルド&実行
None
悲しみ、、、、
なんでこうなったか?? WeexはRuntime only buildであるため、 今回のようなtemplateオプションに文字列を渡すような処理 はできない、、、
Weexの長所・短所 • 最初のテンプレートのビルドなどはあんまりつまらずで きる • ドキュメントにできることできないことがしっかりと書かれ ててわかりやすい • 使えるコンポーネントが少なめ •
directiveでv-showやv-htmlが使えない • Runtime only buildなのは注意が必要そう
Vueで ネイティブアプリを作る ~Vue Native編~
Vue Nativeとは、、? Vue.jsでクロスプラットフォームアプリケーションを作れるプ ラットフォーム Vue Nativeという名前だが、実際にはReactのAPIをラッピン グしてる
早速作ろう!
事前準備 System Requirements • node が 6.0以上 • npm が
4.0以上 • React Native CLI がグローバルでインストールされていること
事前準備 • 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
すると、、、
None
血に染まっている、、、
なぜこうなったか どうやらReact Nativeのバージョンを0.55にしても、依存して いるbabel-preset-expoとexpoのバージョンが高く、血祭りに なるらしい
対処法 • package.jsonを以下のように編集
対処法 • app.jsonを以下のように編集
もう一回動作確認! $ npm run ios
None
成功!!!!!
ということでここからが本題
App.vueを修正
すると、、、
None
None
Vue Nativeの長所・短所 • Weexに比べると扱えるコンポーネントが多い • Vuexが使える!! • まだ$emitに対応していない(一応、同等の処理を行う方 法があるらしいが、、、) •
ドキュメント通りにやってもつまるところは結構ありそう
最後に どれも一長一短なところがある印象 個人的には、Vue.jsでネイティブアプリを使うのならIonicが 一番はまらず、使いやすい印象 ただ、まだα版なので今後どうなるかわからない 今後に期待!!