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

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

web

Safariで「Preflight response is not successful」と言われたので対処した

morishitaです。 CloudFront + S3 で配信しているJSONファイルを別ドメインのJavaScriptで取らせようとしたら Preflight response is not successful というエラーが出てリクエストが失敗するという事象があったので対処しました。 発生したのは PC、iOS、i…

Workboxのプリキャッシュの設定でハマった

morishitaです。 今回は Webpack(Webpacker)とWorkbox(Workbox webpack Plugins - GenerateSW plugin)の設定について書きます。 正確にはプリフェッチの設定というよりプリフェッチするファイルをCDNから取らせるためのURLの設定でハマりました。 多分、…

いこーよにWebチケットサービスをリリースしました

こんにちは、nakamuraです。もはや2ヶ月前ほどになりますが、タイトルの通り、いこーよでWebチケットが購入できるようになりました。リリース当初はまだ未実装だった機能もどんどんリリースされ、これからもますます便利になっていくサービスですので、ぜひ…

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…

Web Componentsを試してみた

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

Web Share APIを試してみた

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

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

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

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

Webpagetestでサイトのパフォーマンスを定期計測する

morishitaです。 今回は社内でプライベートに運用している Webpagetest について紹介します。 日経新聞やDev.toなど爆速を実現している Web サイトが度々話題となります。 それは Web サイトにとってページの表示速度が非常に重要で関心が高いからだと思いま…

Chromeの設定+α

この記事は actindi Advent Calendar 2017 の12月3日の記事です Web系のエンジニア、デザイナーにとって最も利用する仕事道具といえば、Webブラウザだと思います。 その中でもGoogle Chromeを使うことが多いのではないでしょうか。 今回はChromeの便利な設…