ブログBLOG

手軽にリッチなサイトに変わる！3Dグラフィックを描画できるthree.js（WebGL）でサイトをアレンジしてみよう

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

【3系】Chart.jsでレーダーチャートを描画してみよう

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

Vueとは？Vue.jsの基本的な構文を紹介【JavaScriptフレームワーク】

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

【初心者でも簡単】sessionStorageでブラウザにデータを保存してみよう【JavaScript】

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

プラグインで慣性スクロールとパララックスを簡単に実装する【Luxy.js】

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

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

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

モダンなサイトで良く見るWeb表現技術

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

Ajaxを解説！javascriptで非同期通信【画面遷移せずにデータを取得】

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

【スマホアプリ開発】ハイブリッドアプリ開発が楽になる js のみのデータベース【indexedDB + Dexie.js】（動作例付き）

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

スマホの傾き検知、Web制作で使える？ or 使えない？

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