web
morishitaです。 前回のエントリでフロントエンドフレームワーク Svelte を紹介しました。 tech.actindi.net 今回は Svelte で Web Components を作ってみようと思います。 Svelte 入門に書いた Typescript, Pug, Sass を使えるようにした状態を前提とします…
morishitaです。 今回は JavaScript の UI フレームワーク Svelte を紹介します。 アクトインディでは今の所、フロントエンドフレームワークとしては Vue.js を使っていますが、これもなかなか良さそうだと思ったのでちょっと触ってみました。 プロジェクト…
morishitaです。 CloudFront + S3 で配信しているJSONファイルを別ドメインのJavaScriptで取らせようとしたら Preflight response is not successful というエラーが出てリクエストが失敗するという事象があったので対処しました。 発生したのは PC、iOS、i…
morishitaです。 今回は Webpack(Webpacker)とWorkbox(Workbox webpack Plugins - GenerateSW plugin)の設定について書きます。 正確にはプリフェッチの設定というよりプリフェッチするファイルをCDNから取らせるためのURLの設定でハマりました。 多分、…
こんにちは、nakamuraです。もはや2ヶ月前ほどになりますが、タイトルの通り、いこーよでWebチケットが購入できるようになりました。リリース当初はまだ未実装だった機能もどんどんリリースされ、これからもますます便利になっていくサービスですので、ぜひ…
morishitaです。 このところNuxtのSPAを作っていました。 次のエントリで紹介したものに手を入れていたのですが、このときにはテストを書いていませんでした。 tech.actindi.net 今回はちゃんとテストも書こうと思ってやってみました。 いくつかすんなり行か…
morishitaです。 SPAモードで動作するNuxtアプリケーションでネストした動的ルーティングの動作が思ったのと違ったので調べてみました。 やりたかったこと Railsのノリで次のようなパス階層をNuxt.jsでやりたいと思いました。 パス 説明 / サイトトップ。 /g…
morishitaです。 先日、Web Componentついて書きました。 tech.actindi.net 多くのブラウザで動作できるようになってきていることは確認できました。 ただ、実装方法についてはもっと良い方法がないものかと思いました。 と思っていたら、Vue.jsが Web Compo…
morishitaです。 プログラムを部品化して再利用したい。 コードを書く人間にとってはいつも考えていることですし、永遠のテーマなのではないかと思います。 オブジェクト指向はクラスとしてパッケージしたコードを再利用する仕組みを提供します。関数型言語…
morishitaです。 いこーよやいこレポでは、情報を共有してもらいやすいようにシェアボタンをページに置いています。 シェアボタン 現状はTwitterやFacebookなど各サービスごとにシェアボタンを用意していますが、 モバイルに於いてはWeb Share APIを使っても…
≪2019/06/20追記≫ この記事を公開したのは2018-10-19です。 2019-06-20時点でより簡単さ、運用の容易さを求めるならAWS Amplify Consoleもおすすめです。 tech.actindi.net morishitaです。 Nuxt で実装した SPA を S3 + CloudFront で配信する機会があった…
morishitaです。 いこレポに workbox を導入してServiceWorkerによるキャッシュを実装しました。 そのことについて書きます。 導入の背景 いこレポはおかげさまで順調に成長できており、アクセス数も伸びてきています。 先日 1 周年を迎え、ますます頑張って…
morishitaです。 今回は社内でプライベートに運用している Webpagetest について紹介します。 日経新聞やDev.toなど爆速を実現している Web サイトが度々話題となります。 それは Web サイトにとってページの表示速度が非常に重要で関心が高いからだと思いま…
この記事は actindi Advent Calendar 2017 の12月3日の記事です Web系のエンジニア、デザイナーにとって最も利用する仕事道具といえば、Webブラウザだと思います。 その中でもGoogle Chromeを使うことが多いのではないでしょうか。 今回はChromeの便利な設…