usersmatorel.comこんにちは。matorel管理人です。都内でフロントエンドエンジニアをしております。このブログではWebデザインやアプリ制作に関する備忘録として技術や知識を紹介していきます。usersmatorel.com今まで当ブログでthree.jsの基本的な扱い方を勉強してきましたが、もっと基礎的な部分を固める為に自作でGeometry(形状)を作ってみたいと思います。簡単な所で、今回は下のようなただの八面体の作り方を説明します。3D空間の中の物体は基本的に頂点(vertice)とその頂点を繋げた三角形の面(face)の集合で成り立っています。three.jsのプリセットに含まれているTorusKnotGeometry(輪環結び目)のような複雑な形状のものも同じく、ワイヤーフレームを表示させてみると三角形の集合だと言う事が分かります。その頂点と三角形の面を一つ一つ指定して一つのGeometryが形成されます。それでは早速、自作でのGeometryの形成の仕方を説明します。usersmatorel.comハイブリッドアプリでデータベースを利用したいときのあれこれをまとめました。私の製作環境はMonacaですが、Cordova環境全般に同様です。使用できるデータベース・ストレージの選択肢が多い事は良い事なのですが、結局どんなアプリにはどのデータベースがいいのか迷ってしまいます。ゲームスコアのランキングやハイスコア、サービスのユーザー認証、スケジュール管理、シンプルなメモ帳などなど。ローカル(オフライン)だけで完結させるのか、サーバーへアクセスさせるのかも重要です。思いつくだけでも下記をデータベースとして使えそうです。usersmatorel.com前回はクイズアプリのトップページとクイズページの途中まで作成いたしました。今回はデータオブジェクトからクイズデータを持って来てバインド、正解不正解のアラート表示、結果画面でのスコア表示、全体のレイアウトを行いたいと思います。クイズのデータを作成します。データは管理しやすくするためコントローラー内ではなくサービス(value)内で管理します。jsフォルダ内にservicesフォルダを新規作成して下さい。servicesフォルダ内にquestionsService.jsファイルを作成します。このファイル内にサービスを下記コードのように記述します。usersmatorel.comHTML・CSS・JavaScriptなどのWeb技術のみで制作が可能なスマートフォンアプリ、いわゆるハイブリッドアプリの制作サービスMonacaを使って簡単なクイズアプリを作ってみようと思います。IDEを使って、ブラウザ上だけで制作しますので環境を整える必要もありません。UIの知識が必要ですが、この記事ではそれぞれの説明は割愛します。簡単な予備知識だけでも持っているとスムーズかと思います。先に断わっておきますが、制作手順は我流です。なんでこんな効率悪いの?とか書き方が汚い!!と言ったことがあったらすみません。基本的にAngularJS流にコードは書いていきます。完成は下記のような動きにする予定です。usersmatorel.com今回はMeshPhongMaterialの環境マッピングに関してです。言っても、環境マッピングに関しては他のMeshBasicMaterial、MeshLambertMaterialでも共通で使えます。使う機会は多くないかもしれませんが、環境マップを加えるとガラスや鏡面などの表面をとってもリアルに表現することが出来ます。ちなみに2016年3月現在、three.jsのバージョンはr74です。環境マッピングを使用すると、周りの環境(風景)をモデル(物体)の表面に映りこませたり透過屈折させたりすることが出来ます。これらは実際に周りの風景を反射・透過させているのではなく、予めモデルに風景用のテクスチャを指定しています。usersmatorel.com目下three.jsを勉強中の筆者が、モチベーションを上げるためにチェックしているWebGLコンテンツを集めたサイトを紹介します。Webデザイナーはもちろんですが、WebディレクターやWeb担当者が最新のWebGLコンテンツをチェックすることによってクライアントへ新しい提案が出来るかと思います。どれも凄いクオリティのコンテンツばかりなので見過ぎるとモチベーションが上がるどころか、自信を喪失してしまう恐れも。言え、基本ブラウザベースのコンテンツの為、ソースコードを見て勉強することも出来るかと。このエントリーを見に来る方にとってはわざわざ紹介する必要もないほどおなじみですが、WebGLライブラリのデファクトスタンダードとなりつつあるthree.jsの公式サイトです。three.jsを使用したWebGLのコンテンツを沢山紹介しています。usersmatorel.com2016年2月現在のthree.js最新バージョンr74では、Light(光源)は以下の5種類あります。usersmatorel.com2016年2月現在のthree.js最新バージョンr74では、Light(光源)は以下の5種類あります。JSですが、バージョンアップ頻度が非常に早く2016年2月現在でr74となっております。r74では所々仕様が変わっており、新しいモジュールも増えています。探っていたらeffectsフォルダにCardboardEffect.jsなるものを発見!!今回はこのCardboardEffect.jsを使って簡易的なVRコンテンツを作ってみようと思います。JSに付属されていました。RiftなどのHMD(ヘッドマウントディスプレイ)用のトラッキングデータを取得する本格的なものですし、StereoEffect.jsはVRに最適化されていませんでした。usersmatorel.comWebサイトでは徐々にWebGLコンテンツを取り入れる企業が多くなり、私の仕事でも3Dを触る機会が増えてきました。触りやすさや情報の多さでも他のライブラリとは一線を画しており、WebGL初心者でも大変扱いやすいです。JSの中でも、花形であるジオメトリー(形状)に関してまとめてみました。言っても大変たくさんあるので、ジオメトリーの中でもコンストラクタの引数へ数値を指定するだけの簡単な種類のみを2回に分けてご紹介します。ちなみに現状のバージョンは下記のとおりです。JSを使用して3Dオブジェクトを表示させるひな形を紹介します。AdSenseを導入いたしました。思っていたのですが、表示して欲しい場所と違う所に広告が表示されてしまう事も。ちなみに現在の各バージョンは下記のとおりです。この記事では詳しい登録・申請の方法は割愛させていただきます。usersmatorel.com前回に引き続き、Chart.jsのTipsです。今回はAngular.jsとChart.jsを組み合わせて、動的に値が変化するグラフを作ります。Angular.jsの基本的な使い方は割愛します。ちなみに今回使用するバージョンは下記のとおりです。angular.min.jsを下記サイトよりダウンロードしてきましょう。CDNにも公開されていますが、セキュリティ面で外部ソースを引っ張るのはあまり良くないとのことですのでダウンロード版を使いましょう。(今回のデモを作る程度でしたら、CDNでも問題ありません。コントローラー&フォームバインドの簡単なコードが下記です。私がリリースしている下記のアプリ[ローン返済ナビゲーションcannavi]でも、残高の進捗を表現するのにChart.jsを使用しています。ちなみに今回使用しているバージョンは以下の通りです。アプリを起動するときに企業名やアプリ名、ロゴが一瞬表示されることがありますが、その画面はスプラッシュ画面と呼ばれています。プログレスバーの様に起動にかかる待ち時間の体感速度を速めてくれたり、企業名・アプリ名の宣伝にもつながります。iOSアプリではリリースに必須となっておりますが、Android端末では基本的にスプラッシュ画面と言う概念はありません。設定次第によってはAndroidでもスプラッシュ画面を表示させることが出来ますし、Monacaのアプリ設定では元から表示させる設定となっています。そこでMonaca(クラウド)のAndroidアプリ設定を見てみます。2016年2月現在では、ldpi~xxxhdpiまでの解像度に合わせ、計6サイズのファイルをアップするようになってます。Reserved.設定を変更しましたx。