BLOG

【初心者でも簡単!】ローディングアニメーションを実装しよう
投稿日:2022年6月7日

ページの読み込み中に数秒間白い画面が続くと、不安になることはありませんか? ローディングアニメーションを実装することにより、ユーザー側に「ページをしっかり読み込んでいる」ことのアピールができます。 また、最近ではアニメーションを設置することも増えたので、ローディングの時点で視覚的に興味を与え ...

GSAPを使って複雑なオープニングアニメーションを作ってみよう
投稿日:2022年5月18日

アニメーション。 それはWEBサイトには欠かせない演出です。 最近のWEBサイトはアニメーションがかなり複雑になってきている印象です。 ただ、アニメーションって結構難しいですよね。 簡単なアニメーションならcssでちょちょっと書けばできますが、いくつものアニメーションが連動し ...

【最新v8】Swiperの使い方・実用的なデモ15個の解説 ー基礎から応用までー
投稿日:2022年4月27日

Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろありますが、本記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。 デモページを見る まずはこちらのデモページをご覧ください。 片方だけはみ出しているスライ ...

BudouXを使って、自動で改行を調整しよう
投稿日:2021年12月23日

日本語サイトで単語の途中に改行してしまうことはよくありますよね。 こちら弊社のブログですが、グラフィックやエフェクトなど単語の途中で改行されています。 若干読みづらいですよね。 そんなときは以下の方法などを使って改行を調整してきました。 brタ ...

【three.js(WebGL)】背景に紙吹雪を舞わせてみよう!【デモ付き】
投稿日:2021年12月21日

WebGLとは、手軽に3Dコンテンツを制御できるJavaScriptライブラリです。 そのWebGLを簡単に扱えるライブラリ「three.js」を使って、クオリティアップを目指したサイトを作成してみようと思います。 本記事では、WebGLを使った背景に3Dグラフィックスを描画する方法 ...

フロントエンド入門におすすめ!Svelteを紹介【JavaScriptフレームワーク】
投稿日:2021年12月20日

日本ではJavaScriptのフレームワークと言えばVueが人気でしたが、ここ最近はReactの波が来ている印象です。そんな中、Svelteという単語を目にしました。 調べてみると、State of JS 2020で満足度・関心のランキングで1位を獲得しており、勢いのあるフレームワ ...

【Modaal】モーダルを簡単に実装しよう【Micromodal.js】
投稿日:2021年12月17日

サイト制作でモーダルを実装することがあります。 なかにはデザインもないのに、途中から実装を依頼されることもあります。 モーダルは モーダルを開いているときは背景を暗くし、背景固定にする 閉じるボタン、または背景をクリックしたらモーダ ...

手軽にリッチなサイトに変わる!3Dグラフィックを描画できるthree.js(WebGL)でサイトをアレンジしてみよう
投稿日:2021年12月16日

ブラウザ上で3次元・2次元のオブジェクトやグラフィックをレンダリングできるWebGL(Webグラフィックライブラリ)。そのWebGLを簡単に扱えるライブラリ「three.js」というものを用い、ウェブサイトに3Dオブジェクトやインタラクティブなアニメーションを取り入れ、表現を少し工夫してみようと ...

【3系】Chart.jsでレーダーチャートを描画してみよう
投稿日:2021年9月28日

Chart.jsというJavaScriptのライブラリを使えば、簡単にサイト上にグラフを描画することができます。 Chart.jsで描画できるグラフは折れ線グラフ、棒グラフ、円グラフ、レーダーチャート、散布図など多岐に渡りますが、 今回はその中のレーダーチャートの描画の方法を紹介 ...

Vueとは?Vue.jsの基本的な構文を紹介【JavaScriptフレームワーク】
投稿日:2021年7月26日

フロントエンド開発と言えばJavaScriptのフレームワークが熱い! React・Vue・Angularが有名で、聞いたことがある人もいるのではないでしょうか。 BRISKではまれにVueを使う案件に遭遇します。 筆者も触ったことがあるのですが、理解が曖昧でしたので復習がてらまと ...

【初心者でも簡単】sessionStorageでブラウザにデータを保存してみよう【JavaScript】
投稿日:2021年7月21日

複数ページのサイトのシステム構築をしていると、あるページでユーザーが入力した文字列などを別のページで取得して表示させたい、という場面が度々ありますよね。 (例えば、簡単な診断コンテンツのように、設問ページでユーザーに名前や回答を入力してもらい、それを結果ページで表示させる、など) そ ...

プラグインで慣性スクロールとパララックスを簡単に実装する【Luxy.js】
投稿日:2021年2月25日

みなさんは「慣性スクロール」や「パララックス」という言葉を聞いたことがありますか? マウスで実際に動かした分よりも少し遅めにスクロールが反応し余韻が残るような効果を出す動作や、各コンテンツを異なる速度で移動させる動作などを指しています。 最近、この2つのエフェクトが実装されたウェブサイ ...

初心者でもビジュアルデザインを用いたプログラミングができる「Processing」の始め方【p5.js】
投稿日:2021年2月24日

最近では、Webサイト上で3Dアイテムをドラッグでいじれたり、スクロールに合わせてオブジェクトが回転したりするなど、ビジュアルアートを用いたサイトがどんどん増えており、興味のある方が増えてきているかと思います。かくいう私も、いろんなサイトを見ていくうちに「どうやってこの動きを作れるんだろう」 ...

モダンなサイトで良く見るWeb表現技術
投稿日:2021年2月1日

デザイン通りにコーディングできるようになってきてプログラムにもそこそこ強くなったけど、Awwwardsなどに掲載されているWebサイトを見ているとどうやって作られているかわからない…そんな経験はありませんか? 今回はモダンなブラウザで良く見るWebサイトを少し豊かにする知識と技術を簡単にまとめ ...

【画面遷移せずにデータを取得できる】Ajax、非同期通信について
投稿日:2020年9月30日

TAKAYA OHTAやOPERAのようにシームレスな画面遷移を実現する場合にAjaxが使われます。 SPA(Single Page Application)などデスクトップアプリのように操作できるのですが、それにもAjaxなどの非同期通信が使われています。具体的なサービスを挙げるとF ...

【スマホアプリ開発】ハイブリッドアプリ開発が楽になる js のみのデータベース【indexedDB + Dexie.js】(動作例付き)
投稿日:2020年7月31日

システム開発にあたってMySQLなどのデータベースを用いることが多いですが、スマホアプリ開発では端末内にいわゆるデータベースを保持できないので、通常はデータベース用のサーバーを用意する必要があります。 もちろん、データベース用サーバーが必須な場合(他ユーザーと連携するようなアプリの場合)も多い ...

スマホの傾き検知、Web制作で使える? or 使えない?
投稿日:2020年6月24日

スマートフォンでアプリを使っていると、時々デバイスの傾きで画面内もお洒落に傾く事があるかと思います。 Webでも出来るかなと思い調べたところ「DeviceOrientationEvent」というものが見付かりましたので、簡単なデモを作成してみました。 今回は手軽にwebpackとBabe ...

JavaScript初心者から中級者になるために知っておきたい7つのループメソッド
投稿日:2020年6月4日

こんにちは!2019年の10月にBRISKへ入社しました、以下のブログを書いているものです。 (よかったらのぞいてみてください!) 25歳・未経験からWebエンジニアになってみた【中途採用ブログ2019年10月~12月】 25歳・未経験からWebエンジニアになってみた【中途採用ブログ2 ...

HTMLで背景に斜め線を引く様々な方法(CSS、SVG、canvas)
投稿日:2019年12月25日

近年、背景に斜め線を使用しているサイトがしばしば見受けられますよね? 弊社の制作実績でも斜め線を使用したサイトをいくつか掲載しています。 株式会社オーカム:https://www.ocam.co.jp/ こういったコーディングを過去に経験している人なら分かると思いますが、ちょっとてこず ...

日付入力フォームのカスタマイズでもう迷わない【IEにも対応】
投稿日:2019年9月25日

  「日付入力フォームを作ってほしい」 あなたはそう言われたら、どうやって実装しますか? HTML5になって追加された「input[type=date]」を使うでしょうか。それともプラグインを使うのでしょうか。 どちらにも一長一短があり、設置するサイトの目的に応じて柔軟 ...