Profile

Cover photo
管理人 matorel
10,026 views
AboutPostsPhotosVideos

Stream

管理人 matorel

Shared publicly  - 
 
Web制作において情報収集に使えるテックブログをまとめたサイトを作りました。 大企業のエンジニアブログから、個人で頑張っているブログまでその数100ブログ以上!! SEO関連からUI/UX、AdobeツールTipsや今流行のReact、WebGL、言語もRuby、Go、PHP、Swift、Java、Perl、Scalaなどなどなどなど。。。それぞれの専門技術を分かりやすく解説してくれてるブログを沢山集めて紹介しています。…
 ·  Translate
Web制作において情報収集に使えるテックブログをまとめたサイトを作りました。 大企業のエンジニアブログから、個人で頑張っているブログまでその数100ブログ以上!! 専門技術を分かりやすく解説してくれてるブログを色々と集めて紹介しています。
1
Add a comment...

管理人 matorel

Shared publicly  - 
 
matorelブログ更新しました。 Three JS:Geometryでバネの形状を作ってみる

前回は基礎固めと言う事で、three.jsで正八方体のGeometryを自作する方法を覚えました。なので今回はもう少し複雑な形状をプログラムで作ってみたいと思います。 何にしようかなーと考えた結果、三角関数で割と簡単に描けそうなバネの形状を作ってみようと思います。びよーんってやつ。 GFDL, https://ja.wikipedia.org/w/index.php?curid=256994 線で描いてみる…
 ·  Translate
three.jsにてバネの形状をGeometryにて作ってみます。三角関数のちょっとした知識で作れてしまうグルグルのバネ型。デモも交えて制作コードをご説明します。
1
Add a comment...

管理人 matorel

Shared publicly  - 
 
ハイブリッドアプリでデータベースを利用したいときのあれこれをまとめました。私の製作環境はMonacaですが、Cordova環境全般に同様です。 使用できるデータベース・ストレージの選択肢が多い事は良い事なのですが、結局どんなアプリにはどのデータベースがいいのか迷ってしまいます。例えば、ゲームスコアのランキングやハイスコア、サービスのユーザー認証、スケジュール管理、シンプルなメモ帳などなど。また、ローカル(オフライン)だけで完結させるのか、サーバーへアクセスさせるのかも重要です。…
 ·  Translate
ハイブリッドアプリ開発サービスMonacaを使って作るアプリでデータベースを利用したいときのあれこれをまとめました。それぞれの軽い説明とメリット・デメリット、どのような場面に使えるかを紹介します。
1
Add a comment...

管理人 matorel

Shared publicly  - 
 
HTML・CSS・JavaScriptなどのWeb技術のみで制作が可能なスマートフォンアプリ、いわゆるハイブリッドアプリの制作サービスMonacaを使って簡単なクイズアプリを作ってみようと思います。今回は無料で使えるMonaca クラウド IDEを使って、ブラウザ上だけで制作しますので環境を整える必要もありません。なおMonacaでアプリを作るにはAngularJSとOnsen UIの知識が必要ですが、この記事ではそれぞれの説明は割愛します。簡単な予備知識だけでも持っているとスムーズかと思います。…
 ·  Translate
HTML・CSS・JavaScriptなどのWeb技術のみで制作が可能なスマートフォンアプリ、いわゆるハイブリッドアプリの制作サービスMonacaを使って簡単なクイズアプリを作ってみようと思います。
1
Add a comment...

管理人 matorel

Shared publicly  - 
 
前回はMeshPhongMaterialの色とライティングに関することをまとめましたが、今回は少しレベルアップしてテクスチャマッピングに関してです。 テクスチャは分かるけどマッピングって何?ってところからですが、モデル(物体)の表面にさまざまな効果を施すことをマッピングといいます。テクスチャマッピングとはモデルに画像を張り付けるってことですね。今回はもう少し踏み込んで、表面に疑似的な凹凸を付けるバンプマッピングとノーマルマッピングも合わせて説明します。…
 ·  Translate
MeshPhongMaterialのマッピングに関してご説明します。テクスチャマップ、バンプマップ、法線マップに関してデモも交えて分かりやすく紹介しています。物体の質感にこだわりを持たせ、よりリアルに近い表現を身につけましょう。
1
Add a comment...

管理人 matorel

Shared publicly  - 
 
目下three.jsを勉強中の筆者が、モチベーションを上げるためにチェックしているWebGLコンテンツを集めたサイトを紹介します。Webデザイナーはもちろんですが、WebディレクターやWeb担当者が最新のWebGLコンテンツをチェックすることによってクライアントへ新しい提案が出来るかと思います。どれも凄いクオリティのコンテンツばかりなので見過ぎるとモチベーションが上がるどころか、自信を喪失してしまう恐れも。。。…
 ·  Translate
目下three.jsを勉強中の筆者が、モチベーションを上げるためにチェックしているWebGLコンテンツを集めたサイトを紹介します。Webデザイナーはもちろんですが、WebディレクターやWeb担当者が最新のWebGLコンテンツをチェックすることによってクライアントへ新しい提案が出来るかと思います。
1
Add a comment...

管理人 matorel

Shared publicly  - 
 
matorelではcannaviと言うローン管理用のスマホアプリをMonacaで作ってリリースしています。 旧cannavi画面 2015年末にリリースしたのですが、なんだかデザインがダサいし使いづらい。。。 と言うわけで、UI/UXを学び直して改善しました。 改善する為に気を付けた事や、役に立ったページ・ツールをご紹介します。アプリ制作に関しては経験が浅いので、プロの方が見るには物足りないかもしれませんがご容赦下さい。…
 ·  Translate
スマホアプリ(cannavi)のUI/UX改善する為に気を付けた事や、役に立ったページ・ツールをご紹介します。
1
Add a comment...

管理人 matorel

Shared publicly  - 
 
matorelブログ更新しました!! Three JS:Geometryでオリジナルの形状を作ってみる

今まで当ブログでthree.jsの基本的な扱い方を勉強してきましたが、もっと基礎的な部分を固める為に自作でGeometry(形状)を作ってみたいと思います。まずは簡単な所で、今回は下のようなただの八面体の作り方を説明します。 Geometryとは…
 ·  Translate
基礎的な部分を固める為に自作でGeometry(形状)を作ってみたいと思います。まずは簡単な所で、今回はただの八面体の作り方を説明します。
1
Add a comment...

管理人 matorel

Shared publicly  - 
 
前回はクイズアプリのトップページとクイズページの途中まで作成いたしました。今回はデータオブジェクトからクイズデータを持って来てバインド、正解不正解のアラート表示、結果画面でのスコア表示、全体のレイアウトを行いたいと思います。 クイズデータを作ろう…
 ·  Translate
Web技術のみで制作が可能なスマートフォンアプリ、いわゆるハイブリッドアプリの制作サービスMonacaを使って簡単なクイズアプリを作ります。今回はデータオブジェクトからクイズデータを持って来てバインド、正解不正解のアラート表示、結果画面でのスコア表示、全体のレイアウトを行いたいと思います。
1
Add a comment...

管理人 matorel

Shared publicly  - 
 
今回はMeshPhongMaterialの環境マッピングに関してです。と言っても、環境マッピングに関しては他のMeshBasicMaterial、MeshLambertMaterialでも共通で使えます。あまり使う機会は多くないかもしれませんが、環境マップを加えるとガラスや鏡面などの表面をとってもリアルに表現することが出来ます。 ちなみに2016年3月現在、three.jsのバージョンはr74です。 環境マッピングとは…
 ·  Translate
今回は環境マッピングに関してです。環境マップを加えると、ガラスや鏡面などの表面をとってもリアルに表現することが出来ます。デモやサンプルコードを交え分かりやすく説明します。
1
Add a comment...

管理人 matorel

Shared publicly  - 
 
WebGLの人気ライブラリthree.js、今回はMeshPhongMaterialに関して極めたいと思います。 2016年3月現在、three.jsの最新バージョンr74ではマテリアル(材質)の種類が14種類あります(ベースのMaterial含む)。その中でも使うことが多く、かつプロパティ数が多く使いこなすのが困難なMeshPhongMaterial。しかし、しっかりと理解できれば高度な質感をもったオブジェクトを扱うことが出来ます。 プロパティ…
 ·  Translate
three.jsに関して、今回はMeshPhongMaterialに関して極めたいと思います。プロパティ数が多く使いこなすのが困難なMeshPhongMaterial。しかし、しっかりと理解できれば高度な質感をもったオブジェクトを扱うことが出来ます。基本編では、カラーとライティングに関係するプロパティを紹介します。
1
Add a comment...

管理人 matorel

Shared publicly  - 
 
人気WebGLライブラリthree.jsで用意されているLightの5種類全ての説明ページを作りました。光だけではなく影の設定などに関しても説明しています。詳しくは各リンクページを見ていただき、ぜひ参考にしてください。 Light(光源)の種類まとめ 2016年3月現在のthree.js最新バージョンr74では、Light(光源)は以下の5種類あります。 名称 意味 役割 AmbientLight 環境光源 散乱する光源によって、オブジェクトに対し均等に光を当てる。影(cast shadow)は出来ない。…
 ·  Translate
人気WebGLライブラリthree.jsで用意されているLightの5種類全ての説明ページを作りました。光だけではなく影の設定などに関しても説明しています。詳しくは各リンクページを見ていただき、ぜひ参考にしてください。
1
Add a comment...
Story
Tagline
WEBデザイン・アプリ制作備忘録
Introduction
フロントエンドエンジニアが綴るWEB技術、アプリ制作、SEO、JSライブラリ、VPS等の備忘録技術ブログmatorelを運営しております。。WEB制作に役立つ情報が満載!最新WEB技術のサンプルやデモ・画像も充実させ、とても分かりやすいブログです。