福田です！！今日はシェーダーの基礎！砂浜編！ということで今回は、砂浜のシェーダーを例に出してシェーダーを触っていきたいと思います！ さて、ではさっそく砂のシェーダーを作っていきます！砂のシェーダーですが、今回は少し凝ってノイズを使ってざらざら感まで出していこうと思います！ まずは砂のベースカラーを決めましょう。 vec...

こんにちは！inputタグで画像をパソコンからアップロードすると選択した画像をプレビューで見たいまたは、表示できたらと思ったことがありませんか？今回は、HTMLとjQueryを使用して、画像ファイルをアップロードすると、プレビューを表示する方法について説明します。 まず、HTMLに以下のように入力フィールドとプレビュー...

こんにちは、チャリセです。皆さん「replit」というサービスご存じですか？replitは、オンラインの統合開発環境（IDE）で、Python、Java、JavaScript、C++、Ruby、HTML、CSS、Goなどの複数のプログラミング言語に対応しているクラウドサービスです。開発者は、Webブラウザからrepli...

こんにちは、チャリセです。 前回の記事では「javascript-RGBA色をHEX（16進数）に変換する方法」について紹介しましたが、今回はカラーコードからカラータイプを取得する方法を紹介いたします。２Dページだと使うことそんなにないと思いますが、WebGLコンテンツを制作する際、全てのカラーコードを対応してない環境...

こんにちは、チャリセです。 ウェブアプリを開発する際、RGBA色をHEXに変換したいケースありませんか？今回はRGBA色情報からHEX（16進数）に変換する方法を紹介します。RGBA（赤、緑、青、アルファ）とHEX（16進数のカラーコード）は、Webデザインで色を表現するためのカラーコードです。RGBAの値は（赤、緑、...

Web開発者として、CSSコードの記述は、常に日常的に行う主要なタスクの1つです。Webページのスタイルを設定し、すべてのユーザーデバイスでインタラクティブにすることができる素晴らしいスタイルシート言語であるCSSコードのないWebページは想像もできない。この驚くべきスタイルシート言語でできることはたくさんあります。今...

こんにちは、チャリセです。 今回はjsとjQueryを使ってHtmlDOMのidの変更方法を紹介させてください。ウェブアプリ開発する際、よく使うことがあります。まずは、Bootstrap5のmodalを使ってボタンをクリックするとmodalを表示するようにしました。 その後、クリックするボタンにIDを付けて、そのIDを...

普段はARKitを使ってARアプリを開発したりしているのですが、今回はブラウザでARを作れたらと思って挑戦してみました。結論から言いますと、1.　面倒で高コストなアプリ開発は不要！2.　既存のWebサイトにARコンテンツのURL組み込むだけで実装可能！3.　インタネット環境さえあればどこからでもアクセス可能！4.　空間...

こんにちは、チャリセです。 Bootstrap4の使い方はわかるが、Modalをモーダルコンポーネントを使用して、キャンバス外のサイドバーダイアログの表示方法についてわからないという方々のために以下の方法をご紹介させていただきます。 必要なのは、modal-dialogueクラスに新たなクラス名を追加し、その位置を変更...

Javascriptを使わずにCSSでページの集計継続できるコードを書いてみました。 ベーシックカウンター以下に、簡単なページネーションの例を示します。 表示される数値はHTMLにハードコードされていません。 これらはCSSで次のように生成されます： body { counter-reset: pages; /* カウ...