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.5k
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.4k
ionic/vueもβ版になったのでちゃんと触ってみた
takumiz19
0
550
Vueのライフサイクルを完全に理解
takumiz19
0
1.7k
Other Decks in Programming
See All in Programming
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
1
380
CSC307 Lecture 06
javiergs
PRO
0
360
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
Introduction to GitOps
hwchiu
0
110
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
AHC035解説
terryu16
0
710
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
Featured
See All Featured
How GitHub (no longer) Works
holman
305
140k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Building Applications with DynamoDB
mza
89
5.8k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Building Your Own Lightsaber
phodgson
101
5.9k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Making Projects Easy
brettharned
111
5.7k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
Why Our Code Smells
bkeepers
PRO
332
56k
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が 一番はまらず、使いやすい印象 ただ、まだα版なので今後どうなるかわからない 今後に期待!!