SvelteでWeb Componentsを作ってみた

morishita web

morishitaです。前回のエントリでフロントエンドフレームワーク Svelte を紹介しました。 tech.actindi.net 今回は Svelte で Web Components を作ってみようと思います。 Svelte 入門に書いた Typescript, Pug, Sass を使えるようにした状態を前提とします…

#svelte #Web Components

2021-03-18

Svelte 入門

morishita web typescript

morishitaです。今回は JavaScript の UI フレームワーク Svelte を紹介します。アクトインディでは今の所、フロントエンドフレームワークとしては Vue.js を使っていますが、これもなかなか良さそうだと思ったのでちょっと触ってみました。プロジェクト…

#svelte #TypeScript #Pug #Sass #フロントエンド

2019-11-12

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

morishita web CloudFront

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

#Safari #HTTP #SPA

2019-08-02

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

morishita web PWA

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

#workbox #JavaScript #PWA

2019-07-12

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

いこーよ web ruby nakamura Rails

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

2019-07-12

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

morishita Nuxt Vue typescript web jest

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

#Nuxt.js #Jest #TypeScript

2019-07-04

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

morishita Nuxt Vue typescript web

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

#Nuxt.js #TypeScript

2019-06-26

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

morishita typescript Vue web

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

#Vue.js #Web Components #TypeScript

2019-06-25

Web Componentsを試してみた

morishita web HTML javascript

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

#Web Components #JavaScript

2019-06-14

Web Share APIを試してみた

morishita web HTML javascript

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

#Web Share API #Chrome #Safari #Firefox

2018-10-19

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

morishita Vue AWS web javascript CloudFront DevOps

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

#AWS #Codebuild #Nuxt.js