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.6k
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
670
Vueのライフサイクルを完全に理解
takumiz19
0
2k
Other Decks in Programming
See All in Programming
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
540
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
140
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
1.9k
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
230
実践!App Intents対応
yuukiw00w
1
320
TanStack DB ~状態管理の新しい考え方~
bmthd
2
190
AHC051解法紹介
eijirou
0
610
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
170
Introduction to Git & GitHub
latte72
0
110
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
200
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
2
480
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
73
5k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Gamification - CAS2011
davidbonilla
81
5.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Music & Morning Musume
bryan
46
6.7k
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が 一番はまらず、使いやすい印象 ただ、まだα版なので今後どうなるかわからない 今後に期待!!