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
AI Ramen Fight
yusukebe
0
120
Flutterと Vibe Coding で個人開発!
hyshu
0
140
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
750
Comparing decimals in Swift Testing
417_72ki
0
140
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
220
What's new in AppKit on macOS 26
1024jp
0
180
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
300
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
41
16k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
820
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.8k
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
380
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
8
1.1k
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
BBQ
matthewcrist
89
9.8k
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が 一番はまらず、使いやすい印象 ただ、まだα版なので今後どうなるかわからない 今後に期待!!