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

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

morishita

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

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

clasp push でプッシュできないファイルがあると思ったら、仕様が変わってた

morishitaです。 最新のclaspでは .claspignore を設定しないと clasp push でプッシュされないファイルがあるよって話です。 以前自分が実装したGASのアプリケーションを機能拡張することになりました。 次のエントリで紹介したスプレッドシートをJSONにし…

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

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

TypescriptのGASをJestでテストする

morishitaです。 時々、業務で使うツールをGASで作ります。 これまでのものはキャンペーン対応のものなど使い捨てとまでは言わないまでも、短い運用期間を想定したものでした1。 サービスレベル的にはベータレベルですが、少し運用期間が長くなりそう、かつ…

Echo Show5 が届いたので試してみた

morishitaです。 Echo Show5が発売されました。 手元にも届いたので試してみました1。 Echo Show 5 について 2019/06/26 発売の新しいAmazon製 Alexa端末です。 1万円を切る値段で、ディスプレイ付きのEchoデバイスでは最も安いモデルになります。 新登場 Ec…

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

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

Web Componentsを試してみた

morishitaです。 プログラムを部品化して再利用したい。 コードを書く人間にとってはいつも考えていることですし、永遠のテーマなのではないかと思います。 オブジェクト指向はクラスとしてパッケージしたコードを再利用する仕組みを提供します。関数型言語…

Multi-stage build でNode.jsのインストールをちょっぴり効率化する

morishitaです。 Dockerコンテナは1プロセスだけ動作させるのが基本なので、複数の言語実行環境をインストールする必要はほとんどないです。 ただ唯一、例外かなと思うのがNode.js。 Webアプリケーションを開発する場合、それほどリッチなUIでなくても多か…

VSCode の Remote - Containers 拡張を試してみた

morishitaです。 先日リリースされたVisual Studio Code May 2019で Stable でもRemote Developmentが使えるようになりました。 これはExtension Packで、次の3つの拡張を含んでいます。 Remote - SSH - Visual Studio Marketplace Remote - Containers - Vi…

Web Share APIを試してみた

morishitaです。 いこーよやいこレポでは、情報を共有してもらいやすいようにシェアボタンをページに置いています。 シェアボタン 現状はTwitterやFacebookなど各サービスごとにシェアボタンを用意していますが、 モバイルに於いてはWeb Share APIを使っても…

Nuxt.jsのSPAをAmplify Consoleでホストする。めっちゃ簡単だった!

morishitaです。 以前、次のエントリを書きました。 tech.actindi.net このとき作ったNuxt.jsのアプリケーションはその後、 リニューアルして2019年4月からはいこーよ!こどもBIRTHDAYとして利用しています。 birthday.iko-yo.net 今後は対象地域と施設を増…

Cloudformation 入門してみました

morishitaです。 これまで、なんかめんどくさそうでCloudfrmationは避けてきました。 ElasticBeanstalk や Serverlessフレームワークは裏側でCloudFormationが動くので、間接的には使ってきました。 デフォルトで用意されないリソースを追加するのにちょっと…

VCRでWeb APIのモックを楽しよう!

morishitaです。 最近、Stripeを利用した決済処理の実装をしていました。 tech.actindi.net tech.actindi.net サーバーサイド(Rails)でStripe APIを利用しており、そのテストの実装にvcrを利用しました。 以前から使っていましたが、改めて便利だと思った…

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

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

Stripeを使った決済処理を調べてみた。

morishitaです。 今回はStripeについて調べてみたのでそのことを書きます。 Stripeとは Stripeは決済処理を代行してくれるサービスです。 サービス内でなにか販売をしようとするとユーザーから代金をいただく決済の仕組みを用意する必要があります。 ネット…

Simplecovで一部クラスでカバレッジが計測されない場合の解決方法

morishitaです。 アクトインディではRailsアプリケーションのテストをRSpecで書いています。 そして、テストカバレッジをSimpleCovを使って計測しています。 何故かカバレッジが計測できないクラスがあったのですが、計測できるように解決した件を紹介します…

Active Flagで効率的にフラグを実装する

morishitaです。 今回はActive FlagというGemを紹介します。 このGemはActiveRecordのモデルでBIt Arrayなカラムを扱いやすくしてくれます。 github.com こういう要件ってありますよね? ON/OFFできるユーザ設定をたくさん持たせたい 選択肢を複数選択できる…

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

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

いこナビにAPLを導入しました

morishitaです。 昨年末にEcho Showが発売され、FireTVでもAlexaが使えるようになりました。 これから、ディスプレイ付きのAlexaデバイスが増えていくと思います。 ということで、いこーよのAlexaスキル「いこーよのおでかけナビ」でディスプレイデバイス向…

いこレポのRailsを5.1.2から5.2.2にアップグレードしました

morishitaです。 Rails 6のリリースも見えてきたので、やっといこレポのRailsをアップグレードしました。 具体的には、Rails 5.1.2 → 5.2.2 のアップグレードを実施しました。それについて紹介します。 アップグレードまでの道のり アップグレードはセオリー…

Github serviceをwebhookに変更した

morishitaです。 Github Service が使えなくなったので対応しました。 次の記事には2019年1月末に止めるよって書いてあるので、今月中になんとかすればいいかなと思っていました。 ところが、2019/01/08 から突然動かなくなったのです。 developer.github.co…

超小ネタ・クリスマス仕様なアプリケーション

morishitaです。 平成最後の年末真っ只中ですが、皆さんいかがお過ごしでしょうか。 街はクリスマスだ何だと賑やかですが、この時期クリスマス仕様になりデスクトップを賑やかしてくれるアプリケーションもいくつかありますね。 毎年恒例 VLC 有名どころでは…

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

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

AlexaスキルのServeless Frameworkテンプレートを公開!

morishitaです。 先日のAlexa スキルアワード2018で「子育て支援部門賞」と「世の中あかるくしてくれ賞(株式会社TAM)」をいただきました。 tech.actindi.net 参考リンク Amazon.co.jp: Alexaスキルアワード2018受賞作品: Alexaスキル Alexaスキルアワード2…

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 で配信する機会があった…

Google Cloud Natual Language API で口コミのネガ/ボジ判定してみた

morishitaです。 いこーよでは口コミをもっと投稿しやすく、もっと役立つ情報にしたいと考えています。 口コミを投稿してもらう内容や方法や、それを見てもらう見せ方について議論をしています。 現状の口コミを見つめ直す一環として、機械学習 API を利用し…

workbox を導入してServiceWorkerによるキャッシュを実装した話

morishitaです。 いこレポに workbox を導入してServiceWorkerによるキャッシュを実装しました。 そのことについて書きます。 導入の背景 いこレポはおかげさまで順調に成長できており、アクセス数も伸びてきています。 先日 1 周年を迎え、ますます頑張って…

Alexa スキルアワード2018 で2つの賞をいただきました!

morishitaです。 2018/09/29(土)、Alexa スキルアワード 2018 ファイナルステージイベントがありました。 弊社の「いこーよのおでかけナビ」もファイナリストに選出されたので参加してきました! いこーよのおでかけナビ出版社/メーカー: アクトインディ株…

Colaboratory + Foliumで地図マッピングしてみる

morishitaです。 Alexa スキル「いこーよのおでかけナビ」では、ユーザの自宅を起点に探したお出かけ先を提案します。 いこーよのおでかけナビ出版社/メーカー: アクトインディ株式会社発売日: 2018/09/27メディア: アプリこの商品を含むブログを見る 東京で…