tag:crieit.net,2005:https://crieit.net/tags/vue-touch-events/feed Crieitでタグ「vue-touch-events」に投稿された最近の記事 2019-09-16T08:02:06+09:00 https://crieit.net/tags/vue-touch-events/feed tag:crieit.net,2005:PublicArticle/15399 2019-09-16T08:02:06+09:00 2019-09-16T08:02:06+09:00 https://crieit.net/posts/Nuxt-js-Vue-js <p>Nuxt.jsで開発しているけど、スワイプで画面遷移とかしたいなと思い、<br /> いろいろ調べたときの備忘録。</p> <p><a target="_blank" rel="nofollow noopener" href="https://github.com/jerrybendy/vue-touch-events">vue-touch-events</a>というのが良さそう(<em>´ω｀</em>)<br /> <a target="_blank" rel="nofollow noopener" href="http://hammerjs.github.io/">hammer.js</a>というライブラリのラッパーらしい。</p> <p>hammer.jsではスワイプだけでなく、<br /> Pan / Pinch / Press / Rotate / Tapも検知できるよう。すごい。。</p> <h3 id="インストール"><a href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">インストール</a></h3> <pre><code class="console">$ npm i -S vue2-touch-events </code></pre> <h3 id="pluginの作成"><a href="#plugin%E3%81%AE%E4%BD%9C%E6%88%90">pluginの作成</a></h3> <p><code>~/plugins/vue2-touch-events.ts</code>を作成</p> <pre><code class="javascript">import Vue from 'vue' import Vue2TouchEvents from 'vue2-touch-events' Vue.use(Vue2TouchEvents) </code></pre> <h3 id="nuxt.config.tsの設定"><a href="#nuxt.config.ts%E3%81%AE%E8%A8%AD%E5%AE%9A">nuxt.config.tsの設定</a></h3> <p>作ったプラグインを設定する</p> <pre><code class="typescript">const config: NuxtConfiguration = { plugins: [ { src: "~/plugins/vue2-touch-events.ts", ssr: false } } } </code></pre> <h3 id="使ってみる"><a href="#%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B">使ってみる</a></h3> <pre><code class="html"><template> <div v-touch:swipe.left="() => $router.push('left_page')" v-touch:swipe.right="() => $router.push('right_page')" > </div> </template> </code></pre> <p>簡単( ﾟдﾟ)!</p> <p><code>v-touch:swipe.left</code>などのディレクティブが用意されているので、<br /> 必要なものを選択してcallback関数を設定すればOK。</p> <p>タップなどの他のものは、GitHubの<a target="_blank" rel="nofollow noopener" href="https://github.com/jerrybendy/vue-touch-events">README</a>を参照。</p> <h3 id="モバイルだけスワイプを有効にする"><a href="#%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%81%A0%E3%81%91%E3%82%B9%E3%83%AF%E3%82%A4%E3%83%97%E3%82%92%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B">モバイルだけスワイプを有効にする</a></h3> <p>ユーザエージェントを見て有効/無効を設定する。<br /> ユーザエージェントの判定は、<a target="_blank" rel="nofollow noopener" href="https://github.com/fukuiretu/nuxt-user-agent">nuxt-user-agent</a>が便利♪</p> <p>設定方法や使い方などは、以前書いた<a target="_blank" rel="nofollow noopener" href="https://www.memory-lovers.blog/entry/2019/07/27/073000">こちらの記事</a>を参照ください。</p> <p>nuxt-user-agentと一緒に使って、モバイルだけスワイプを有効にするとこんな感じ。</p> <pre><code class="html"><template> <div v-touch:swipe.left="() => { if(!$ua.isFromPc()) $router.push('left_page') }" v-touch:swipe.right="() => { if(!$ua.isFromPc()) $router.push('right_page') }" > </div> </template> </code></pre> <h3 id="作ってるサービスではこんな感じに"><a href="#%E4%BD%9C%E3%81%A3%E3%81%A6%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%A7%E3%81%AF%E3%81%93%E3%82%93%E3%81%AA%E6%84%9F%E3%81%98%E3%81%AB">作ってるサービスではこんな感じに</a></h3> <p>開発している<a target="_blank" rel="nofollow noopener" href="https://tsundoku.site">Webサービス</a>ではこんな感じに♪<br /> サクッと導入できて便利でした(<em>´ω｀</em>)</p> <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おぉスワイプでページ遷移できたかも( ﾟдﾟ)!vue2-touch-eventsすごい...(*´ω｀*) <a target="_blank" rel="nofollow noopener" href="https://t.co/vOZjQOmiLA">pic.twitter.com/vOZjQOmiLA</a></p>— 積読ハウマッチ📚きらぷか (@kira_puka) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/kira_puka/status/1173349137292464128?ref_src=twsrc%5Etfw">September 15, 2019</a></blockquote> <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ランキングにもスワイプをつけてみた(*´ω｀*)これでスマホでもスイスイ見れるヽ(=´▽`=)ﾉ <a target="_blank" rel="nofollow noopener" href="https://t.co/jJL1zUvFGk">pic.twitter.com/jJL1zUvFGk</a></p>— 積読ハウマッチ📚きらぷか (@kira_puka) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/kira_puka/status/1173358673550163968?ref_src=twsrc%5Etfw">September 15, 2019</a></blockquote> <h2 id="こんなのつくってます！！"><a href="#%E3%81%93%E3%82%93%E3%81%AA%E3%81%AE%E3%81%A4%E3%81%8F%E3%81%A3%E3%81%A6%E3%81%BE%E3%81%99%EF%BC%81%EF%BC%81">こんなのつくってます！！</a></h2> <p>最近、積読用の読書管理アプリ「積読ハウマッチ」をリリースしました！<br /> <a target="_blank" rel="nofollow noopener" href="https://tsundoku.site">積読ハウマッチ</a>は、Nuxt.js+Firebaseで開発してます!</p> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/572d4947-f40b-e4dc-1c9c-bc584cd2a66c.png" width="200"/></p> <p>もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ</p> <p>要望・感想・アドバイスなどあれば、<br /> 公式アカウント(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/MemoryLoverz">@MemoryLoverz</a>)や開発者(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/kira_puka">@kira_puka</a>)まで</p> きらぷか@積読ハウマッチ/SSSAPIなど