この記事は、 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
GSAPの慣性スクロールライブラリ「ScrollSmoother」の使い方を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ただ、慣性スクロールと組み合わせたいときに、ちょっと工夫が必要で困っていました。 2022年3月31日のバージョンGSAP3.10のリリースとともに、公式で慣性スクロールに対応したプラグインがリリースしたため、早速試してみたまとめ記事です。 ※2022年の4月に執筆しています ※有料プラグインなので、ライセンス確認して適切なライセンスを購入してください 使い方は他のプラグインと一緒です。 npmを利用した環境で利用しているので、いつものようにGSAPをいれて、適当な場所にプラグインファイルを置いたら読み込みます。 npm install gsap そうしたのちにJSでプラグインの利用を宣言します。 import { gsap } from 'gsap' import { ScrollSmoother } from './gsap/ScrollSmoother' gsap.registerP
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
非同期遷移に関する備忘録 - Qiita
当記事では、非同期遷移について調べたことなどをまとめています。 1. 非同期遷移とは 非同期遷移（あるいは非同期画面遷移・Pjaxとも）とは、ブラウザの履歴を操作するHistory APIやXMLHTTPRequestオブジェクトを利用して、画面を遷移する処理を指す言葉のようです。 「ようです」という曖昧な表現を使った理由は、この非同期遷移という言葉があまり一般的ではないためです。試しに、Googleで非同期遷移と検索をかけてみたところ、ヒットしたのは約12万件。これが非同期通信だと約87万件、さらにAjaxだと約2億6,300万件なので、その認知度の圧倒的な差が分かろうというものです。 しかしながら、では、一般的に使われていない処理ではないのかというと必ずしもそのようなわけではなく、YouTube・twitter・Facebook・GitHubなどの大手サイトを始めとした、少なくない数の
Google Tag Manager で Google Analytics の transport beacon を使ってpjaxページのスクロール率を取得する
Google Tag Manager で Google Analytics の transport beacon を使ってpjaxページのスクロール率を取得する 投稿者: kem / 右記内 Google Analytics, Google Tag Manager / 投稿日:2019-09-11 ( 4 年, 8 ヶ月 ago) / 更新日:2019-09-11 ( 4 年, 8 ヶ月 ago) / コメント このブログでは、読了率を Google Tag Manager の スクロールトリガーを使って、Google Analytics 送付しています。 この実装方法だと、指定したスクロールのパーセンテージ毎にイベントが送付されるため、100% 読了になるまで何回かスクロールイベントが送付されます。 Python Google Analytics の読了率データを分析する | Monot
サーバーサイドエンジニアの田実です！ SPAはMPAよりもユーザ体験が上がる可能性がある*1一方で、開発・運用が複雑になりがちです。APIスキーマの設計・管理、フロントエンドのルーティングの管理、認証認可・CORSなど、データを取得して表示するだけの簡単な画面でさえMPAよりもやるべきタスクが多く、コードを読み書きする際の認知負荷も高くなります。こういった煩雑さを回避するべく、フロントエンドの開発・運用負荷を減らすような仕組みを持ったサーバーサイドのフレームワークもあります。そこで、今回はLaravelなどのアプリケーションで利用できる Inertia.js というフロントエンドライブラリとその仕組みについて紹介したいと思います。Laravel以外にもRailsやDjangoなどが利用できるようなのですが、今回の記事ではバックエンドはLaravel、フロントエンドはReactのコードを使っ
pjax 導入のため Javascript で取得 URL が内部リンクかどうか判定します。 内部リンクは色々な書き方がありますが、下記の場合の条件での判定です。 Javascript var url; //取得 URL var reg = new RegExp("^(https?:)?\/\/"+document.domain); if (url.match(reg) || url.charAt(0) === "/") { //内部リンク時の処理 } if 内の判定が肝で、URL が内部リンクになる条件は次の3つとします。他のものでも内部リンクとなるものはあるのですが、以下の3つならばという条件で判定します。 ●「 http://ドメイン 」（または「 https://ドメイン 」） で始まる ●「 //ドメイン 」 で始まる ●「 / 」 で始まる 全て記した場合とプロトコルを省略した
サービスグループの武田です。複数のリポジトリを段階的に移譲してく必要があり、ローカルリポジトリの参照先URLを変更する前に、リポジトリが移譲されたのか。されていた場合は変更後のURLはどこなのか。を取得する方法を考えてみました。 こんにちは。サービスグループの武田です。 GitHubを利用してリポジトリ管理をしている場合、そのリポジトリのオーナーを変更できます。機能としては リポジトリの移譲 として提供されています。 リポジトリを移譲する - GitHub ヘルプ 普段使用している分には移譲されたかどうかは気にする必要はありません。ブラウザからアクセスすると自動でリダイレクトされますし、git cloneなどコマンドで操作する際にも特に意識することなく動作するためです。とはいえ、自分たちで管理しているリポジトリを移譲したら、ローカルリポジトリの参照先などは変更後のURLに変えておきたいです
相対日時はウザい お前ら海外の風習を押し付けんな。 日本にはタイムゾーンが1つしか無いんだし、UXが悪い。 (ローカライズも大事！) 絶対時間 ⇒ 相対時間の順に認識する自分としては、先に相対時間来られても割と理解出来ない。 (昨今のスマートフォンの着信履歴とか、見ても何時かかってきたのか解りづらくてマジ困る。。。) なので、TwitterのTLを絶対時間表記に置き換えるUserScriptを作った。 環境 Chrome Tampermonkey User Sscript // ==UserScript== // @name TLを絶対時間に置き換える. // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @m
BGM(音楽)をサイト内で流す際にページ遷移しても途切れない方法 | Blog | 株式会社イロコト | ゲーム･アニメ等のエンタメ系Web制作&運用会社
こんにちは、コーダーのばやしです。 突然ですが、バックグラウンドで音楽を再生しつつ、ページ遷移を行っても再生が途切れないようにしたい時ってありますよね。(←そんな無いと思うよ。イロコト代表穂刈より。) CookieやSessionStorageに再生位置を保存させて、遷移後に同じ所から再生ということも可能ですが、ページ遷移の際に処理が止まるためどうしても音声は途切れてしまいシームレスとは言えません。 また、近年自動再生系への締付けがきつく（特にiOS）、ユーザーによる操作を挟まないと再生すらさせてもらえないので通常であれば表題のような実装は困難です。 そのような場合に役に立つのが、非同期ページ遷移です。 非同期ページ遷移について 一般的に非同期ページ遷移というと、AjaxとpushState（History API）を活用してシームレスにページ遷移を行う、所謂Pjaxによる一連の実装の事を
WordPress プラグイン Polylang の使い方を紹介 - by Takumi Hirashima
WordPress の多言語切り替えプラグイン Polylang の使い方を紹介します。 例えば、多言語サイトを制作する時に便利な方法です。 言語切替の条件分岐 言語を切り替える言語スイッチャーを実装する方法 共通したページスラッグを使用する方法 注意事項 言語切替の条件分岐 言語別に表示を切り替えるには get_locale を使って、現在のロケール情報を取得して条件分岐を行います。 例えば、日本語とそれ以外の言語で表示内容を分けるには、次のコードをテンプレートに追加します。 <?php if(get_locale() == 'ja'): ?> 日本語 <?php else: ?> 他言語 <?php endif; ?> ページ冒頭の lang 設定を言語別に切り替える際には次のコードを追加します。 <?php if(get_locale() == 'ja'): ?> <html lan
SWELLの任意の場所へスライダー（スライドショー）の実装方法【Swiper】（SWELL 2.5.3以降対応版） | 非公式 SWELL TIPS
SWELLにSwiperを使ってスライダー（スライドショー）を実装する元祖の記事（？）を書いたのは私ですが、その内容をSWELL 2.5.3以降対応版に更新しました。 WordPressテーマ「SWELL」ではスライダーにSwiper.jsが使用されています。 あ、本当ですね…🤔 結構前に一度修正入れたんですがその修正外れちゃってるのかな…。 スライダー部分はSwiper使っているのですが、どうもちらつきが出てしまう場合があるんですよね。 特に表示枚数が1 ~ 2の間だと、どうしようもなかった気がします🤢 — 了🌊SWELL開発者 (@ddryo_loos) March 5, 2020 これは私が、仕事で任意の場所にスライダーを実装して欲しいという要望があったのと、あとは知り合いのフロントエンドエンジニアのフォロワーさんからの勧めもあったので、今回Swiper.jsによるスライダーの
画面遷移から考えるNuxtアプリケーションをアクセシブルにする方法 翻訳記事一覧 日本語ページ / English page はじめに はじめに自己紹介です。 やまのくと申します。 株式会社クラウドワークスにて、フロントエンドエンジニアとして施策の開発やデザインシステムの開発にも携わっておりました。現在は技術的負債解消をリードするチームに所属し、レガシーフロントエンド環境の刷新に関わっております。 ウェブの仕様についてやウェブアクセシビリティにまつわることに興味があります。 また、一児の父でゴールデン・レトリバーと3匹の猫の飼い主をやっております。 本題に入る前に今回のテーマに関わるウェブアクセシビリティとはなにかを説明します。 アクセシビリティとはアクセスと能力の単語を組み合わせたもので、情報や製品、サービスが利用できるようにする意味で使われる言葉です。略してA11yとも書かれていること
css の scroll-behavior と scroll-margin-top について検証したのでメモ。 経緯 Bootstrap 5 で何気なく検証をしていたら、特に何をしたわけでもないのに同一ページ内のアンカーリンクにアニメーション付きでスクロールしたので気になりました。 自前の JavaScript では何も記述していないプレーンな状態だったので、 Bootstrap 5 の JavaScript かと思ったのですが、該当の CDN からの読み込みの scriptタグ を削除しても動作したので「すわ css 側か？」となり調べてみることにしました。 調査結果 結果、 scroll-behaviorプロパティ に依るものと分かりました。具体的には、 html { scroll-behavior: smooth; } この記述でページ全体にスクロールアニメーションが付与されていまし
barba-custom.js ^U V // 現在と同じページのリンクをクリックした場合、リロードをしない設定 // リロードしたい場合は削除 var links = document.querySelectorAll('a[href]'); var cbk = function(e) { if(e.currentTarget.href === window.location.href) { e.preventDefault(); e.stopPropagation(); } }; for(var i = 0; i < links.length; i++) { links[i].addEventListener('click', cbk); } // 新しいページが準備できたときにしたい処理 Barba.Dispatcher.on('newPageReady', function(cu
一応2年位使っています。 なので、もうしばらくは活用はできるかと。 環境 Tampermonkey Gmail (左右2ペイン表示時) // ==UserScript== // @name gmail Zs // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://mail.google.com/* // @grant none // ==/UserScript== (function() { 'use strict'; // Your code here... document.body.classList.add('Zs'); })(); 🍤 エビデンス 変更前 幅を広げると 右ペ
GitHub - beezee/djax: Dynamic pjax, responds to layout changes across requested pages
Congrats, you're done! Well mostly... ##Markup djax will track elements with the class you pass it as a first argument. In the above example I've passed the class 'updatable,' so my markup would look something like this: <body> <div class="wrapper" id="main"> <div class="updatable first" id="first"> Here's a div that will be monitored for changes by djax. </div> <div class="updatable second" id="s
前書き こちらはAteamFinergyのアドベントカレンダー3日目の記事になります。 内容としてはInstantClickの説明が大半を締めており 目的としては、InstantClickの認知を増やす事です InstantClickとは Webサイトを劇的に高速化するJavaScriptライブラリ」 -- from instantclick.io JavaScriptのライブラリにInstantClickというものがあり、Webサイトに対して適用すると高速になる...というものがあり そのInstantClickを実際に使用している例を上げると「dev.to」や「FC2爆速テンプレート」などで使用されています 特にdev.toについては阿部寛のホームページと比較している記事が多く見られ、ご存知のかたは多いのではないでしょうか InstantClickではpjax(pushState +
2020年06月17日15:01 思わず吹いたコピペwwwwwwwwwww カテゴリネタスレ opason Comment(14) 1: 風吹けば名無し 2019/11/12(火) 15:48:01.97 ID:KeEfV255a 136 風吹けば名無し 2018/01/29(月) 02:15:40.99 ID:byHeNDfC0 2年前に買ったにんにくのガーリック状にしたやつ未だにチビチビ使ってるわ 袋麺作るときに少し入れると全然違う それで二百円くらいやったしほんまええ買い物 391: 風吹けば名無し 2019/11/12(火) 16:20:21.81 ID:1MS+fg8d0 >>1 言いたいことは伝わるからおｋ 729: 風吹けば名無し 2019/11/12(火) 16:37:18.88 ID:Va0OBqiGa >>622 知ってるけど>>1の文章見る限りチップ思いつくと思うけど
・出典：[VUE]SPAウェブフロントエンド開発ためのまとめ 目標 本ポスティングではSPASingle Page Application開発に先立ってSPAについての理解およびJavaScriptのフレームワーク「Vue」に対する基本的な理解を目指したいと思います。MPAウェブサービスやMVCパターンに対する基本的な理解を元に作成することになりました。 目次 JavaScript Frameworkの使用背景 MPAからSPAまで SPAルーティングに対して ①Link方式 ②Ajax方式 ③Hash方式 JavaScript Frameworkの主な活用の要素 VUE 主要ライブラリ ①VUE Router ②VUE CLI ③Vuex (1)Stateとは (2)State管理の必要性 (3)構成要素 (4)State、Getters、Actions、Mutaitions (5)レン
![[VUE]SPAウェブフロントエンド開発ためのまとめ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f4406f4a70d3c53701dab0bb5b2d61db677f627f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVlVFJTVEU1BBJUUzJTgyJUE2JUUzJTgyJUE3JUUzJTgzJTk2JUUzJTgzJTk1JUUzJTgzJUFEJUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgyJUE4JUUzJTgzJUIzJUUzJTgzJTg5JUU5JTk2JThCJUU3JTk5JUJBJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFJUUzJTgxJUJFJUUzJTgxJUE4JUUzJTgyJTgxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yZTgxMjhjMTVkMjA4Mjg0MzQ2NTNkY2ViOWJiZWFhNw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBsaXRlbjYyM2pwJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wODExYzgxZTllNTU3ZTY0ZGIyMDAzYzJiN2VkNzk4MQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D12bc7b1c1faff81e1b45ffe54e6a251b)
はじめまして！2001Yです。 前回は、Pjaxに憧れを持ち新しいブログを始めたのですが、「はじまり」という記事を一つ作って、それから更新することなく新しいブログを作りたくなってしまいました。 あまりにもひどいので、少し振り返ってみました。 ブログというより(Web)デザインが好きだった...？ 一つの記事も書けないのに、なぜまた新しいブログを作ろうと思うのか... 今回のブログデザインはIllustratorでデザインしてから、コーディングに取り掛かりました。本当はSkech、XDの方が良いだと思うのですが、慣れていたIllustratorで作成してしまいました。（でも、いつか始めないと始める機会がなくなってしまう...汗） 記事を書くより、デザインやコーディングをしてるときの方が楽しい... 記事を書くたびに新しい要素、機能を追加してしまって、記事が完成せずに書くことに飽きてしまう。だ
野口健 on Twitter: "僕のノグケン号（エクリプスクロスPHEV）とウチのスタッフのエコベンツ（グリーンディーゼル車）が並びましたが、どちらも派手ですね〜。今日は現場集合だったので久々にこの2台が駐車場に並びましたが、やっぱり派手ですね〜(^.^) https://t.co/PJaX3IdkDF"
僕のノグケン号（エクリプスクロスPHEV）とウチのスタッフのエコベンツ（グリーンディーゼル車）が並びましたが、どちらも派手ですね〜。今日は現場集合だったので久々にこの2台が駐車場に並びましたが、やっぱり派手ですね〜(^.^) https://t.co/PJaX3IdkDF
Railsで開発していると、jsファイルやcssファイルが大量に増えていった場合、開発環境でページの表示が激重になるというもんだいがある。 これの原因は、css,jsファイル毎にHTTPリクエストが行われるから。 Chromeのデベロッパーツールでリクエストを見てみると、見事にファイルごとにHTTPリクエストが走っている。 これはヤバイ。 対処法その1 application.js,cssにまとめてしまう ファイルの数が大から問題なのであって、本番環境のようにapplication.jsにまとめてしまえば解決！ 下の設定をconfig/environments/development.rbに記述すると、jsとcssはapplication.jsとapplication.cssにまとめられる。 config.assets.debug = false でも、application.jsにまとめ
javascriptを一切書かずにVueやReactと同じような非同期のDOMの更新が行えるLivewireというLaravelパッケージを紹介します。フォームのバリデーションやエディタの自動保存機能、画像のアップロードやデータベース検索をページ遷移なしでjavascriptを記述することなく簡単に行えます。 Livewireとは？ Laravelの最強パッケージ「Livewire」の解説。javascriptを1行も書かずにVueやReactやAngularと同じような非同期処理(ajax)が実現できるLaravelのパッケージです。 Livewireでできること 以下のような処理を全て非同期でおこなうことができます。 フォームの非同期バリデーションエディタの自動保存機能SPAのような非同期によるページ遷移(pjax)画像の非同期アップロード非同期のテーブル検索機能とページネーション非同
instant.pageはjavascriptを利用したウェブサイト高速化技術の一つです。実際にはサーバーや通信回線を高性能化させたりしているものではないのでウェブサイトそのものが高速化しているわけではないのですが、ページ先読み（prefetch）のタイミングを工夫することで体感的にページ表示が早くなったように感じられるようにすることができます。 具体的には、リンクにマウスオーバーした瞬間にリンク先を先読みします。ウェブサイトの読み込みが100ms遅れるとコンバージョンが1%下がるということはネット通販業界では以前からよく知られており、ネット各社はサイトの高速化に余念がありませんでした。 リンクの先にマウスのポインタが来た状態で65msが経過すると50%の確率でユーザーがこのリンクをクリックすることから、このinstant.pageはリンクにマウスオーバーした瞬間からリンク先を先読みしはじ
非同期遷移に関する備忘録 - 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
Inertia.js によるSPA実装の効率化とその仕組み - Yappli Tech Blog
Javascript で URL が内部リンクであるかの判定 | q-Az
GitHubで管理しているリポジトリの移譲先の調べ方を考えてみた | DevelopersIO
TwitterのTLを絶対日時表記にする - Qiita
画面遷移から考えるNuxtアプリケーションをアクセシブルにする方法
(css) scroll-behavior と scroll-margin-top についてメモ
Barba.jsのカスタマイズ例（jQuery利用）
Gmailの右ペインの一覧表示を複数行表示に固定するUserScript - Qiita
一部のWebサイト高速表示に一役買っている「InstantClick」について - Qiita
思わず吹いたコピペwwwwwwwwwww : 2ch大相撲
[VUE]SPAウェブフロントエンド開発ためのまとめ - Qiita
はじまり – 記事を書かずにまた新しいブログを始める。｜2001Y's Blog
Rails開発中にjs,cssファイルが多すぎて激重な場合の対処法 | このコードわからん
【Laravel】Laravelの最強パッケージ「Livewire」の解説
instant.pageでprefetchを効率化する - レ点腫瘍学ノート