【検証ツール利用】外部サイトにPOST送信した値を確認する
投稿者:望月華
システム開発推進部 システム開発第一Gの望月です。
先日、自社のウェブサイトから外部のサイトに対してPOST送信を行った時に、HTMLのinputタグのvalue属性にセットした値を正確に渡せているかどうかを検証したい場面がありました。
ただ、送信先は外部サイトであるため受信側の環境に入って確認することはできないし、受信データの確認を依頼をするのも手間がかかってしまうため送信側から確認をしたい、という状況でした。
結果として、ブラ ...
2024年に注目すべきCSSの新機能
投稿者:今井元揮
この数年でCSSは大きな進化を遂げてきました。かつてはJavaScriptやSassに頼っていたコーディング技術やスタイル管理も、今ではCSSだけで実現可能になっている部分もあります。また、ブラウザのサポート状況は日々改善されており、便利なCSS技術を実務レベルで活用できるようになってきていると感じます。
この記事では、CSSの新機能を紹介し、CSSの将来的な可能性について探っていきたいと思います。
AIツールを活用してWEBページを制作してみる
投稿者:今井元揮
ChatGPTやMidjourneyなどのAIツールは、私たちの仕事に大きな影響を及ぼしています。
特に画像制作やWEB制作の分野では、多くのAIツールが新規参入し、一部では「AIに仕事を奪われる」という意見も耳にします。
しかし、AIを単なる敵としてみるのではなく、働き手としてのパートナーと認識することで、我々のクリエイティビティを増幅させ、効率を向上させることも十分可能だと私は考えています。
というわけで、この記事では、AIツールを駆 ...
MediaElement.jsでメディアプレイヤーのUIをサクッとつくる
投稿者:今井元揮
この記事はレコチョク Advent Calendar 2021 の22日目の記事となります。
はじめにこんにちは!レコチョクが提供している音楽配信サービスのウェブ開発をしている今井です。
普段の業務ではHTML・CSS・JavaScriptを扱い、ユーザーが実際に操作する画面の作成を担当しております。
レコチョクが提供している音楽配信サービスで言うと、月額料金で聴き放題の音楽ストリーミングサービス(例:TOWER RECORDS MUSI ...
スライダーってこんな簡単に作れるの知らなかった
投稿者:山岸世良
この記事はレコチョク Advent Calendar 2021の12日目の記事となります。
自己紹介みなさんこんにちは、入社一年目の山岸世良です。やませらって呼んでください。
最近は採用サイトの改修やアラカルト3サービスの対応などを行っており、HTML/CSS/JavaScriptをメインで触っています。
自分の担当サービスです。よかったらチェックしてください。
採用サイト
レコチョク
dミュージック powere ...
スクロールイベント改善してみた
投稿者:岡田暉
4月にシステム部に異動してきました、岡田です。
業務的には、HTMLやCSSなどのデザイン部分と、JSもちょこちょこと触っています。
今回は、パフォーマンス改善のために、色々遅延読み込みをやってみよう
ということで、IntersectionObserverを使ってみたので備忘録も兼ねてまとめてみました。
特定の要素がViewPortに入っているかどうかと、その位置を取得できるAPIで ...
JavaScript側でsubmitができない
投稿者:海津 純平
JavaScriptで submit() 関数が上手く動かずハマってしまいました。
どんなことが起こったか以下実際の状況を簡易化したコードです。
<!DOCTYPE html><html lang="ja"><head></head><body> <form id="fm"> <button type ...【jQuery】一番近い特定の兄弟要素のみ取得
投稿者:海津 純平
任意の要素から一番近い特定の要素のみを取得したかったので調べてみました。
以下のようなHTMLで、item2のli要素から一番近いlistクラスを持ったli要素(item4)を取得したい、ということです。
Vue.jsでAjax処理
投稿者:岡崎拓哉
今回は、Vue.jsにおけるAjax処理について書いてみたいと思います。
一旦、このような画面を考えてみます。
zsh 5.0.8 (x86_64-apple-darwin15.0)
package.json
{ "name": "playpass", "version": "1.0.0",  ...
シンプルなレスポンシブE-mailを簡単に作るためのmjml
投稿者:松木佑徒
新しいサービスを作っていてE-mailはカッコいいHTMLメールにしたいなと思ったのですが、
レスポンシブE-mailと言って全てのブラウザやスタイルが効かない場合も表示できるようにHTMLメールを作るにはすごく手間がかかるみたいです。
いろいろ調べるとメールクライアントやブラウザの違いなど色々を吸収しないといけないのである意味Webより大変な気もします。。
そのため、レスポンシブE-mailを作るには一般的なHTML(Webページ)と基本は ...