アクトインディ開発者ブログ

子供とお出かけ情報「いこーよ」を運営する、アクトインディ株式会社の開発者ブログです

Vue

ネストしたリストで Vue.Draggable を使ってみた

morishitaです。 Vue.Draggableをネストさせて利用してみたので紹介します。 Vue.Draggable とは Vue.Draggable はVueアプリケーションでドラッグドロップ操作を実現するのにとても便利なコンポーネントライブラリです。 単に編集対象のリストを表示して、そ…

NuxtアプリケーションをJestでテストする

morishitaです。 このところNuxtのSPAを作っていました。 次のエントリで紹介したものに手を入れていたのですが、このときにはテストを書いていませんでした。 tech.actindi.net 今回はちゃんとテストも書こうと思ってやってみました。 いくつかすんなり行か…

Nuxt.jsのネストした動的ルーティングで困ったので調べてみた

morishitaです。 SPAモードで動作するNuxtアプリケーションでネストした動的ルーティングの動作が思ったのと違ったので調べてみました。 やりたかったこと Railsのノリで次のようなパス階層をNuxt.jsでやりたいと思いました。 パス 説明 / サイトトップ。 /g…

Vue.jsでWeb Componentを作ってみた

morishitaです。 先日、Web Componentついて書きました。 tech.actindi.net 多くのブラウザで動作できるようになってきていることは確認できました。 ただ、実装方法についてはもっと良い方法がないものかと思いました。 と思っていたら、Vue.jsが Web Compo…

Stripe + Vue.js による決済フォームの実装

morishitaです。 先日、決済サービス Stripeについて書きました。 tech.actindi.net 今回はVue.jsとStripeを使ってクレジットカードの決済フォームを実装したのでご紹介します。 なおこのエントリのコードはTypeScriptを使っています。 HTML部分は Slim また…

Vue+Vuexにvalidatorjsを組み合わせると自在にバリデーションが書ける!

morishitaです。 今回はJavascriptのバリデーションライブラリvalidatorjsを紹介します。 TL;DR いこレポではクライアントサイドバリデーションにvalidatorjsを使っています。 validatorjsはとても柔軟に設定でき使いやすいバリデータです。 Vue+Vuexなアプ…

GAS活用事例紹介 いこーよ10周年企画を支えたアプリケーション

morishitaです。 この記事はactindi Advent Calendar 2018 - Adventarの3日目の記事です。 2018年12月1日、「いこーよ」は10周年を迎えました。 すでに終了したものも含めて10周年企画として次を実施しています。 お出かけスポット無料チケット配布(12/1終了…

Google Apps Script でWebアプリ事始め(ややモダン版)

こんにちは。アクトインディでPCおじさんをしている kadota です。 以前、Google Apps Script(GAS)の紹介記事を書きました。 今度はイマドキの素敵なツールで試してみましょう。ブラウザ上のスクリプトエディタではなく、ローカル環境でコードを編集・管理で…

Nuxt SPAのPVを @nuxtjs/google-tag-manager を利用して計測する

morishitaです。 Nuxt の SPA を運用する際にページビューを計測しようと、@nuxtjs/google-tag-managerを導入しました。 ページがロードされるランディングは計測されるのですが、SPA 内でページ遷移したページビューが計測されなかったので調べたことを書き…

NuxtのSPAを S3+CloudFrontでホストする。デプロイはCodeBuildで自動化

≪2019/06/20追記≫ この記事を公開したのは2018-10-19です。 2019-06-20時点でより簡単さ、運用の容易さを求めるならAWS Amplify Consoleもおすすめです。 tech.actindi.net morishitaです。 Nuxt で実装した SPA を S3 + CloudFront で配信する機会があった…