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
ionic/vueもβ版になったのでちゃんと触ってみた
Search
chan_kaku
April 27, 2019
Technology
0
670
ionic/vueもβ版になったのでちゃんと触ってみた
ionic/vueが2019年4月にβ版がリリースされたということでα版との違いなどを調べてみました
chan_kaku
April 27, 2019
Tweet
Share
More Decks by chan_kaku
See All by chan_kaku
JJGU CCC 2019 Springまとめ~Java歴1年なりの意見を添えて~
takumiz19
1
2.4k
Vueのライフサイクルを完全に理解
takumiz19
0
2k
Vueでネイティブアプリを作り倒す
takumiz19
1
1.7k
Other Decks in Technology
See All in Technology
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
140
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
340
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
590
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
1k
組織改革から開発効率向上まで! - 成功事例から見えたAI活用のポイント - / 20251016 Tetsuharu Kokaki
shift_evolve
PRO
1
200
[VPoE Global Summit] サービスレベル目標による信頼性への投資最適化
satos
0
170
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
Railsの話をしよう
yahonda
0
170
難しいセキュリティ用語をわかりやすくしてみた
yuta3110
0
340
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
8
1.1k
LLMプロダクトの信頼性を上げるには?LLM Observabilityによる、対話型音声AIアプリケーションの安定運用
ivry_presentationmaterials
0
690
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
100
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
A designer walks into a library…
pauljervisheath
209
24k
Code Reviewing Like a Champion
maltzj
526
40k
Embracing the Ebb and Flow
colly
88
4.9k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Speed Design
sergeychernyshev
32
1.2k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Transcript
ionic/vueもβ版になったのでちゃんと触っ てみた 2019/04/27 Kyoto.js #16 chan_kaku
自己紹介 フリュー株式会社 サーバーサイドエンジニア Vue歴約1年(v-kansai運営) ライブ、フェス、ベース、お酒 特にビールが大好きだよ 仕事 趣味 Twitter @chan_kakuz
前回のKyoto.jsで、、、
https://speakerdeck.com/takumiz19/vuedeneiteibuapuriwozuo-ridao-su
前回もvue/ionicの話をしたが、、、
動機
動機 • VueConf USAでionic/vueのβ版について発表された • α版からどうなったのか気になった
β版でできるようになったこと • Vue Routerがついに • その他色々IonicのComponentsが使えるようになったっ ぽい(公式アナウンスはない)
β版でもできないこと • The shorthand v-model binding is currently not supported
a. 双方向バインディングのディレクティブであるv-modelが使えない • Stack navigation for deep transitions is under heavy development at this time. a. 次のページで解説 • ネイティブのAPIが使えない a. これはまだAngularでしか使えない
stack navigator 1 5 4 3 2 1 2 3
4 5 screenが積み重なっている感じ
まずはrouterを使ってみる
routerを使う vue cliで作ったプロジェクト にrouterを追加
ionic追加 import Vue from 'vue' import App from './App.vue' import
router from './router' import Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic); Vue.config.productionTip = false; new Vue({ router, render: h => h(App) }).$mount('#app') 追加 src/main.js
IonicVueRouterを追加 import Vue from 'vue' import Home from './views/Home.vue' import
{ IonicVueRouter } from '@ionic/vue'; Vue.use(IonicVueRouter); export default new IonicVueRouter({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ './views/About.vue') } ] }); 追加 VueRouterを使いつつ、Ionic のRouterAPIを 使うためのもの src/router.js
None
いろんなComponentで遊んでみる
ion-fab <ion-fab vertical="bottom" horizontal="end"> <ion-fab-button>Share</ion-fab-button> <ion-fab-list side="top"> <ion-fab-button> <ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button> <ion-fab-button> <ion-icon name="logo-twitter"></ion-icon> </ion-fab-button> <ion-fab-button> <ion-icon name="logo-youtube"></ion-icon> </ion-fab-button> </ion-fab-list> <ion-fab-list side="start"> <ion-fab-button> <ion-icon name="logo-vimeo"></ion-icon> </ion-fab-button> </ion-fab-list> </ion-fab>
None
ion-card <ion-card> <img src="../assets/profile.png"> <ion-card-header> <ion-card-subtitle>name</ion-card-subtitle> <ion-card-title>chankaku</ion-card-title> </ion-card-header> <ion-card-content> I
love beer. </ion-card-content> </ion-card>
ion-card
感想 • GooglePlay StoreでもPWAでアプリを配信できるよ うになったし、iOSも12.2でPWAのOAuthがちゃんと 使えるようになったので、PWAでいいのではと思った り • 今のところ(2019/04現在)はVueでちゃんとしたプロ ダクトとしてネイティブアプリを作るのは辛いイメージ
まとめ • IonicのRouterAPIを使うことができるようになった • Ionic/VueでもIonicのComponentが結構使えるようになっ た