Profile cover photo
Profile photo
matorel管理人
WEBデザイン・アプリ制作備忘録
WEBデザイン・アプリ制作備忘録
About
Posts

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

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

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

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

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

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

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

Post has attachment
前回はクイズアプリのトップページとクイズページの途中まで作成いたしました。今回はデータオブジェクトからクイズデータを持って来てバインド、正解不正解のアラート表示、結果画面でのスコア表示、全体のレイアウトを行いたいと思います。 クイズデータを作ろう…
Add a comment...

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

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

Post has attachment
前回はMeshPhongMaterialの色とライティングに関することをまとめましたが、今回は少しレベルアップしてテクスチャマッピングに関してです。 テクスチャは分かるけどマッピングって何?ってところからですが、モデル(物体)の表面にさまざまな効果を施すことをマッピングといいます。テクスチャマッピングとはモデルに画像を張り付けるってことですね。今回はもう少し踏み込んで、表面に疑似的な凹凸を付けるバンプマッピングとノーマルマッピングも合わせて説明します。…
Add a comment...

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