ARTICLE PAGE2

JavaScriptで動画プレイヤーを自作する -後編-

はじめに JavaScriptで、一から動画プレイヤーを自作しました。 前編では動画の再生停止、速度調整、時間表示を実装しました。 今回はシークバーや音量バーなど、クリックした位置の座標を使用した機能の実装を解説します。 目次 【後編】 5.シークバーの実装 6.音量ボタンの実装 7.音量バー/音量表示の実装 実装の手順 5.シークバーの実装 [h

#javascript 2019.12.23
VIEW

JavaScriptで動画プレイヤーを自作する -前編-

はじめに JavaScriptで、一から動画プレイヤーを自作しました。 ブラウザ上で動画を再生したいとき、YouTube動画を埋め込むことが多いと思います。 しかし、デザイン上の調整やカスタマイズがあまりできないため、 自由にカスタマイズがしやすい動画プレイヤーを制作しました。 前編、後編に分けて制作手順を解説します。 どんな人に読んでほしいか JavaScriptを

#javascript 2019.12.23
VIEW

WebGL – Shader 波エフェクト

はじめに 今回は、GLSLシェーダーで波紋風のイメージエフェクトをかけていきたいと思います。 シェーダーを使いWebページに立体感とリッチな表現を持たせることが期待できます。 開発環境 p5.jsを使ってWebで動く形で波紋風表現を実装していきます。 p5jsはProcessingのJavaScript版といった感じで、WEBGLによる3D表現や映像・音声といったメディアを

#glsl#imageEffect#p5js#shader 2019.12.19
VIEW

CSS Grid ~基礎編~

はじめに この記事では、CSS Gridの解説と基本的な使い方について説明していきたいと思います。 CSS Gridとは? 格子状のエリアを定義し、そこにhtml要素を自由に配置できるレイアウト方法です。 Gridレイアウトは、 「コンテナ」と「アイテム」という二つの要素によって構成されています。アイテムは大きさや順番を自由に指定することができます。水平線と垂直線の配置する間隔を指

#css 2019.11.08
VIEW

ジェネラティブアート x 機械学習

今回は、ジェネラティブアートと機械学習をテーマにモックを作って行きたいと思います。 機械学習の手法の一つであるPix2Pix(GAN)を使って、アルゴリズムで生成した線描画に着色して、 テクスチャ感を加えた表現を実践してみたいと思います。 2019年現在も、機械学習技術(以下ML技術)の革新は目まぐるしく、日々新しい手法や調査結果に関する報告がなされています。 これらのML技術に関する

#GAN#javascript#p5js#pix2pix#TensorFlow 2019.10.03
VIEW

マイクロソフトBotFramework Web ChatとDialogFlowを連携してチャット画面を作る

はじめに 今回は、Webベースのチャットボットを展開するため、Microsoft Bot Framework Web ChatとGoogle DialogFlowを接続していきます。 DialogFlowでは、ほとんどコーディングなしで、LINEやFacebookメッセンジャーやSlack、Twitterなどと連携したチャットボットを作成することができます。 Google DialogF

#BotFrameWork#chatbot#dialogflow 2019.09.02
VIEW

DialogFlowでチャットボットを作る – LINE連携 –

はじめに 今回は、DialogFlowとLINEとの連携をしてみます。実際にLINEと連携してアプリケーションを動かして見ます。DialogFlowの使い方に関しては、前回の投稿した「DialogFlowでチャットボットを作る -基礎編-」をご覧ください。 作業の流れ DialogFlowとLINEを連携させるためには、以下の手順を行う必要があります。 LINEデベロッパーア

#LINE#chatbot#dialogflow 2019.08.22
VIEW

DialogFlowでチャットボットを作る -基礎編-

はじめに この記事では、DialogFlowの基本的な使い方の説明とチャットボットを設計する上で必要となる工程などを紹介しながら、チャットボットを作っていきたいと思います。 DialogFlowとは? DialogFlowは、音声認識・音声合成・自然言語処理・感情解析を使った対話アプリやチャットボットを構築できるサービスです。 Google AssistantやFacebook

#chatbot#dialogflow 2019.08.19
VIEW

UE4でPixel Streamingを試す。

はじめに 今回は、Unreal EngineのPixel StreamingをPC, Mac, iOS, Androidのプラットフォームで試してみます。 Pixel Streamingとは? Pixel Streamingは、端的にいうとウェブブラウザからゲームプレイができてしまう技術です。 まさに、ゲームをストリーミングできてしまう機能です。 低スペックの端末からでも、高機能なG

2019.07.16
VIEW

Intel RealSense Depth Camera D435とNuitrackを使って骨格情報検出してみる。

はじめに NuiTrackの環境設定とサンプルコードを動かしていきます。 前回の記事(RealSenseの環境構築)と同様にopenFrameworks(C++)から動かせるようにしていきます。 NuiTrackを使うためには、深度センサーを持ったカメラが必要になりますので、今回はIntel RealSenseを使っていきます。 Nuitrackとは? Nuitrackは骨格情報(F

#nuitrack#realsense 2019.07.16
VIEW