エンジニアリング部システムソリューション課のひよっこエンジニアKと申します。エンジニアになってまだ2ヶ月強の私は、課題や仕事に取り組む中でわからないことにぶち当たることが多いです。この記事では、わからないところについて調べた結果などをまとめています。今回のテーマはセキュリティ対策の中でも、XSS(クロスサイトスクリプティング)の対策についてです。 そもそも(XSS)クロスサイトスクリプテ...続きを読む

Webソリューション事業部システムソリューションユニットの冨士です。年明けぐらいから、密かに黙々と取り組んでいたことがあります。「即時返信」です。今では社内で一番返信が早いんじゃないかと自負しています。時には1分、時には2秒で返信を返します。加えて「即時タスク化」も「即時返信」と相性が良さそうだったので、試しに半年ぐらい「即時返信」「即時タスク化」を続けてみました。するとタスクの回りが明らかに良く...続きを読む

RWDってコンテンツ設計もデザインもコーディングも難しいなと常々思う今日このごろです。さて今回はそんなRWDでよくある、解像度ごとに表示するコンテンツを切り替えるときに注意したいことについてまたまた古川がお送りします。小ネタなのでサクっと２分くらいで読み終えることができますよ。NGコード[codepen_embedheight="265"theme_id="0"slug_hash="pwYxZq"...続きを読む

はじめにこの記事はGulpを使ってSassをコンパイルしているけど、なんだかよくわかってないという人に向けた記事です。Sassをただコンパイルするだけではなく、AutoprefixerやMinify・Sourcemapなどあると便利だと思う必要最低限の構成の作り方とそれぞれの使い方を解説していきます。前提npmコマンドをなんとなく使ったことがあるgulpfile.jsというものは知っている目指す構...続きを読む

はじめにこの記事はWebpackという言葉を耳にしつつもWebサイトのコーディングにどう導入していけばよいかイマイチわからない・メリットを感じない人にとりあえず馴染み深いjQueryとjQueryPluginをWebpackで扱って慣れようというものです。背景Vue.js・React・AngularなどのフレームワークはそのビルドにWebpackを使うことも多いのですが、一般的なコーポレートサイト...続きを読む

久しぶりの更新はようやく梅雨模様になってきた仙台事務所の古川がお送りします。今回は社内チャットワークで新人さんの質問をきっかけに話題に挙がっていた「RWDにおけるイベント登録」についてのお話しです。はじめにRWDのページではブレークポイントごとに異なる動作をすることがあります。例えばスマートフォン向けの解像度ではコンテンツ領域が狭いため、アコーディオンメニューを使用して一覧性を良くし、パソコン向け...続きを読む

現在、JavaScriptのライブラリであるjQueryは多くのWebサイトで使われ、フロントエンドのコーディングを支えています。ただ、様々な関数が用意されているとはいえ、デフォルトで用意されている関数だけでは実現できない処理があったり、処理をコンパクトに記述したいことがあると思います。そのような場合はjQueryのプラグインを作ってしまい、処理をjQueryの関数の一つとして使うことをお勧めしま...続きを読む

ここ数年でフロントエンドエンジニアという言葉を聞くことが多くなったと感じますが、フロントエンドエンジニアの定義は会社によって異なるものです。ただ多くの場合、「JavaScriptやHTML5/CSS3、PHPといったプログラム言語など、高度なWeb制作スキルを持った人」を指しており、それらのスキルを活かしてWebサイトを構築する仕事内容がほとんどです。（アプリ制作会社の場合アプリ開発のフロントエン...続きを読む

Webサイトをコーディングするにあたって必ず必要になる技術の一つに、「ロールオーバー表現」があります。「ロールオーバー表現」とは主にリンク要素にマウスポインタを載せた際に、色や画像等が切り替わる表現のことです。「ロールオーバー」に似た表現で「マウスオーバー」「オンマウス」「ホバー」といった言い方があります。どれも同じ意味で使われることがありますが、厳密には「ロールオーバー」は切り替わる動作そのもの...続きを読む

新人コーダーが迷いやすいと言われている、ファイル名、id・class名の付け方。この記事では、それぞれの命名規則やコツについてまとめたいと思います。少しでも皆様の参考となれば幸いです。共通事項ファイル名、id・class名を付ける際の注意点まず始めに、ファイル名、id・class名を付ける際の注意点から確認していきます。難しいことはありません。下記に注意して名前を付けるようにましょう。１．半角英数...続きを読む