BLOG ブログ

担当していた案件でJSでスプレッドシートからデータを取得し、動的要素を作成することになりました。 しかし、調べてみると意外にその方法を一から詳しく紹介している記事が見つかりませんでした。 そこで今回はJSでスプレッドシートからデータを取得し、動的要素を作成する方法について一から詳しく紹介しま ...

昨今のウェブサイトではさまざまなクイズが公開されていますよね。そんなクイズですが、JavaScriptを使うと簡単に作ることができます。 質問文と回答の選択肢を用意しておき、画面を切り替える、といった方法もありますが、今回は配列の中にある質問文と回答を取得し、HTMLの中身を動的に切り替え ...

WEBサイトにスライダーを実装したことがある人は多いですよね。 そんなときいつも何を使用していますか？ スライダーのJSライブラリで有名どころとして以下の3つがあります。 ・slick ・Swiper ・keen-slider 私は今までslickを使っていました。 ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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