この記事は、 Rails を主戦場としている自分が今後学ぶべき技術について(随筆) | うなすけとあれこれ についてのアンサー記事です。 うなすけ君が Ruby on Rails で育ってきたように、僕も JavaScript とともに育ってきたという自覚があります。なので、これについて書くことは、ポジショントークは避けられない、という感覚があります。 冷静に比較しようとも思いましたが、やっぱり開き直って思いっきりポジショントークをすることにしました。そっちのほうが面白いと思うので。 自分の基本的な主張は、こちらの記事にあるとおりです。 Frontend Study #1: 基調講演 - Frontend 領域を再定義する 自分と Ruby on Rails 僕は、キャリアとしては Rails の会社で JavaScript を書いてきたことが多かったです。学生の頃は socket.io
Intro 従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。 これは、 History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、 SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。 この API の目的と仕様を解説しつつ、実装のメモを残す。 画面遷移と SPA の軌跡 Web は HTML の取得と描画を繰り返す、画面遷移(Navigation)を前提としたアーキテクチャ(のちに SPA からの逆算で MPA と呼ばれる)が基本であり、ブラウザなどの実装もそれに最適化されている。 一方「アプリケーション」の設計手法をそのまま Web に持ち込んだ SPA は、この Navigation によってもたらされる UX の低下を防ぐ部分がある一方
面白法人カヤック技術部の谷脇です。私は元気です。 この記事は面白法人グループ Advent Calendar 2023の5日目のエントリーです。 というわけでこの記事では、現環境(私が取り組んでいる業務のこと)ベストの管理画面の技術選択について考えたことを書き連ねていきます。 前提知識 管理画面の定義 ここで読者と私の目線を合わせるため、この記事上での管理画面の定義をしておきます。 管理画面はサービスの運営上必要な操作やデータの閲覧をまとめたWebアプリケーションです。また、このWebアプリケーションは一般ユーザーには開放されておらず、サービス運営者側のみ閲覧と操作が可能となっている、とします。 管理画面を作る動機 ここではTonamelの管理画面について、考えて導入したことを書きます。 tonamel.com Tonamelはゲーム大会やイベントを開催するためのプラットフォームです。We
September 24, 2021 Stimulus 3 + Turbo 7 = Hotwire 1.0 For so long, it felt like I could only tell half the story of how we make software for the web at Basecamp. Too many of the chapters about our front-end approach were missing key pages. Sure, we had some of it out there. Turbolinks, for example, hark back to 2012, when I was inspired by Chris Wanstrath's ideas in pjax, and took them further. An
// ==UserScript== // @name Replace Fork with パクる for GitHub // @namespace https://foooomio.net/ // @version 0.1 // @description だから、そういうことじゃなくて💦 // @author foooomio // @license MIT License // @match https://github.com/* // @run-at document-idle // @grant none // ==/UserScript== // 元ネタ: https://twitter.com/IiToshihide/status/1246487047545556992 (() => { 'use strict'; const $ = document.querySelect
ボタンを押すとタイトル・description・OGPが確認できるChromeの拡張機能作ったよ！【LIGアドベントカレンダー16日目】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ボタンを押すとタイトル・description・OGPが確認できるChromeの拡張機能作ったよ！【LIGアドベントカレンダー16日目】 こんにちは、ハルです。推してるアイドルが新曲を出してイベントをするたびにCDを買うので、どんどんCDが増えています。 Google Chromeの拡張機能を作ったので、「こんなの作ってみたよ！ よかったら使ってね！」という記事を書きたいと思います！ アドベントカレンダーでの記事ということもあり、「ワイからの皆さんへのプレゼントやでっ！」というよくわからない意気込みで作りました（ただ拡張機能を何か作りたかっただけ）。 LIGアドベントカレンダー2019は こちら！ どんなものを作ったか TDK Meta Checker TDK Meta Checkerという拡張機能をつくりました！ 閲覧中のheadタグ内のtitleタグやmetaタグのdescriptio
Last week, we presented in Rails World an upcoming addition to Turbo that uses morphing to offer smoother page updates and a simplified broadcasting system. This is the article version of the presentation I delivered. The starting point The traditional server-side full-page programming model that Rails nailed twenty years ago is incredibly productive. It lets you think of your application as a set
今回はそれの亜種ということでカスタムHTMLを利用して「PCとSPで画像の切り替えが行われる画面追従バナー」をサイトに設置してみたいと思います。 期間限定でのキャンペーンページへの誘導などに利用できるかと思いますので、もしよかったら利用してみてください。 前提条件 ・サイトにGTMが設置されていて、稼働していること ・GTMの編集権限を持っていること カスタムHTMLについて 以下が今回のカスタムHTMLとなります。 前回と同様、以下のコードをWebサイトに合わせて調整を行なった後、追従バナーを出したいページでカスタムHTMLを発火させる形となります。 <script> !function(html){ var imageURL = 'https://placehold.jp/200x100.png', spImageURL = 'https://placehold.jp/300x50.p
We write a lot of JavaScript at Basecamp, but we don’t use it to create “JavaScript applications” in the contemporary sense. All our applications have server-side rendered HTML at their core, then add sprinkles of JavaScript to make them sparkle. - DHH In early 2018, Basecamp released StimulusJS into the world. Stimulus closed the loop on the “Basecamp-style” of building Rails applications. It’s h
シームレスな画面遷移の実装 | ARCHETYP BLOG | Webビジネスに関するUI/UXデザイン｜株式会社アーキタイプ｜ARCHETYP Inc.
ページ遷移前後でアニメーション用のclassを付け外しします。 script.jslet mask = document.querySelector('.mask'); barba.init({ transitions: [ { async leave() { mask.classList.add('active'); await new Promise(resolve => { return setTimeout(resolve, 1000); }); }, afterEnter() { mask.classList.remove('active'); } } ] }); style.scss$ease-cubic-bezier: cubic-bezier(.165, .84, .44, 1); $color-lightgray: #f5f8fa; .mask { position: f
最近では、GoogleTagManager(以下、GTM)を利用しGoogleAnalyticsを導入したり、効果測定のためのタグを導入したりなどは一般的になったかと思います。ですが、GTMから提供されている機能内では要望を満たせないケースも同時に増えてきていると思います。 例えば、 ・URLが変わらないフォームのトラッキング ・成果測定の際に注文IDが必要となる ・ページ遷移の際に再ロードがされないサイト(Pjax) ・シングルページアプリケーション(SPA) ・独自のイベントをコンバージョンとしたい(サイト内で特定の行動をとった場合、など) など、よく見かけるケースかと思います。 このような場合に「カスタムイベント」を利用することで、「何か値を伴った、独自のトリガーを作成することが可能」となるため、それを利用して上記のような場合にも対応ができるようになります。 ただ、便利なカスタムイベ
皆さんこんにちは！！ 今日は以前記事にした「業種別にWORDPRESSのおすすめテーマをご紹介」で紹介できなかった業種におすすめのテーマをご紹介したいと思います。 https://www.yuu-progra.com/2020/11/17/wordpress-theme/ 今回は、ECサイト向けのテーマやスポーツジム向けのテーマなどを取り上げたいと思います！ ホームページは1度作って終わりではなく、デザインのトレンドが変わるので、定期的にデザイン変更するのがお勧めです。 特に今回ご紹介するジャンルの「ECサイト」や「スポーツジム」などの業種は、ページのイメージで売上に大きく影響が出てしまうので、定期的に見直してください。 また「ECサイト」は商品画像を多く載せることになるので、なるべく高機能で安定して稼働しているサーバーを使用した方が良いです。 下の記事で紹介している、エックスサーバーは非
PjaxとSPAが全く同じ技術構成なのを知らずにPjaxを過去の技術だと思ってる知ったかぶりが多いので最も高度で完成度の高いPjaxライブラリであるpjax-apiの作者の自分が説明しておこう。 SPAとはPjaxをバンドルしたフレームワーク Pjaxとはその語源からしてpushState+Ajaxである。そしてSPAの技術構成はフレームワーク+pushState+Ajaxである。すなわちSPAとは本質的にPjaxをバンドルしたフレームワークに過ぎない(Pjaxと対比されるSPAはツールセットとしてのSPAでありこれはアプリケーションフレームワークとしてしか存在し得ない。字義通りのSPAはSPAフレームワークで作ろうとPjaxで作ろうと何で作ろうとSingle Page ApplicationであればSPAである)。SPAを使っている限りPjaxも使っているのでありPjaxが過去の技術のご
I have been following htmx for a while now. I thought it was a somewhat funny/cringey meme and that it served as some light comic relief from the real work being done in web development, things like React Server Components, Svelte Runes and Signals that are actually pushing the state of the art forward. Unfortunately at some point in the middle of 2023 people began to actually take htmx seriously
久々のQiita投稿🙌 普段はその辺でエンジニアやってる物です。 個人で使うめちゃくちゃニッチな物を作ったので、せっかくなので記事にしてみました。 そしてここから下、「cmd + クリックでええやん」禁止です🙅♂️ それすらめんどくさかったので作った所存です。 何を作ったの？ GitHub上でリンクをクリックした時に遷移先が同じ画面で開かれるのがしんどかったのでChromeの拡張機能を作った話です。 作ったものはこちら。 Chromeウェブストアに公開しているので、よかったらダウンロードして使ってみてください。 ちなみに、2020年9月現在のGitHub上のクラスやIDを利用しているので、GitHub上のHTML構造が変更された場合突然動かなくなることも考えられます。 メンテを続けるかどうかはまだ決めてません。 GitHubのしんどさとは コードレビューをGitHub上で行う時に、P
TL;DR. The SPA path is dark and full of terrors. You can bravely fight those… or choose a different path that takes you to a similar destination: modern Rails. I remember thinking that Rails was focusing on the wrong target when DHH announced Turbolinks in 2012. My conviction back then was that offering an instant response time to user interactions was key to excellent UX. Because of network laten
In this article, I'm going to tell you about our migration from PJAX to Turbolinks. The good news is that Turbolinks works surprisingly well out-of-the-box. The only tricky thing about it is making it work with your JavaScript. By the end of this article I hope you'll have a good idea of how to do that. It's 2019, so we decided it was time to take a more modern approach to the Honeybadger front en
非同期遷移に関する備忘録 - Qiita
当記事では、非同期遷移について調べたことなどをまとめています。 1. 非同期遷移とは 非同期遷移（あるいは非同期画面遷移・Pjaxとも）とは、ブラウザの履歴を操作するHistory APIやXMLHTTPRequestオブジェクトを利用して、画面を遷移する処理を指す言葉のようです。 「ようです」という曖昧な表現を使った理由は、この非同期遷移という言葉があまり一般的ではないためです。試しに、Googleで非同期遷移と検索をかけてみたところ、ヒットしたのは約12万件。これが非同期通信だと約87万件、さらにAjaxだと約2億6,300万件なので、その認知度の圧倒的な差が分かろうというものです。 しかしながら、では、一般的に使われていない処理ではないのかというと必ずしもそのようなわけではなく、YouTube・twitter・Facebook・GitHubなどの大手サイトを始めとした、少なくない数の
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Re: Rails を主戦場としている自分が今後学ぶべき技術について
Navigation API による「JS での画面遷移」と SPA の改善 | blog.jxck.io
俺の管理画面 2023年冬 - KAYAC engineers' blog
Stimulus 3 + Turbo 7 = Hotwire 1.0
GitHub の「Fork」ボタンを「パクる」に置き換える UserScript - Qiita
A happier happy path in Turbo with morphing
GoogleTagManagerから画面追従バナーをサイトに追加する方法｜and_a
Writing better StimulusJS controllers
サイト改修を行わずにGoogleTagManagerのカスタムイベントを導入する方法｜and_a
プロが選ぶ【2021年】WORDPRESSおすすめ企業向けテーマ（業種別②）｜Yuu's Memo
PjaxとSPAの違い - falsandtruのメモ帳
</> htmx ~ htmx sucks
GitHubのリンクが同じ画面で開かれるのがしんどかったのでChromeの拡張機能作った - Qiita
Escaping the SPA rabbit hole with modern Rails
How We Migrated To Turbolinks Without Breaking Javascript