サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
体力トレーニング
matorel.com
こんにちは。matorel管理人です。 都内でフロントエンドエンジニアをしております。 このブログではWebデザインやアプリ制作に関する備忘録として技術や知識を紹介していきます。 年 齢：30代 血液型：A型 出身地：長野県 趣 味：カメラ・ボルダリング
今まで当ブログでthree.jsの基本的な扱い方を勉強してきましたが、もっと基礎的な部分を固める為に自作でGeometry(形状)を作ってみたいと思います。まずは簡単な所で、今回は下のようなただの八面体の作り方を説明します。 Geometryとは 3D空間の中の物体は基本的に頂点(vertice)とその頂点を繋げた三角形の面(face)の集合で成り立っています。three.jsのプリセットに含まれているTorusKnotGeometry(輪環結び目)のような複雑な形状のものも同じく、ワイヤーフレームを表示させてみると三角形の集合だと言う事が分かります。 その頂点と三角形の面を一つ一つ指定して一つのGeometryが形成されます。 Geometryを作ってみる それでは早速、自作でのGeometryの形成の仕方を説明します。 まずはnew THREE.Geometry()によりGeometr
ハイブリッドアプリでデータベースを利用したいときのあれこれをまとめました。私の製作環境はMonacaですが、Cordova環境全般に同様です。 使用できるデータベース・ストレージの選択肢が多い事は良い事なのですが、結局どんなアプリにはどのデータベースがいいのか迷ってしまいます。例えば、ゲームスコアのランキングやハイスコア、サービスのユーザー認証、スケジュール管理、シンプルなメモ帳などなど。また、ローカル(オフライン)だけで完結させるのか、サーバーへアクセスさせるのかも重要です。 ざっと思いつくだけでも下記をデータベースとして使えそうです。 Web Storage localStorage、sessionStorage IndexedDB WebSQL 外部管理サーバーDBアクセス mBaaS(外部バックエンドサービス) Monaca バックエンド、ニフティクラウド、Kii Cloud、Mi
前回はクイズアプリのトップページとクイズページの途中まで作成いたしました。今回はデータオブジェクトからクイズデータを持って来てバインド、正解不正解のアラート表示、結果画面でのスコア表示、全体のレイアウトを行いたいと思います。 クイズデータを作ろう まずはクイズのデータを作成します。データは管理しやすくするためコントローラー内ではなくサービス(value)内で管理します。jsフォルダ内にservicesフォルダを新規作成して下さい。更にservicesフォルダ内にquestionsService.jsファイルを作成します。このファイル内にサービスを下記コードのように記述します。
HTML・CSS・JavaScriptなどのWeb技術のみで制作が可能なスマートフォンアプリ、いわゆるハイブリッドアプリの制作サービスMonacaを使って簡単なクイズアプリを作ってみようと思います。今回は無料で使えるMonaca クラウド IDEを使って、ブラウザ上だけで制作しますので環境を整える必要もありません。 なおMonacaでアプリを作るにはAngularJSとOnsen UIの知識が必要ですが、この記事ではそれぞれの説明は割愛します。簡単な予備知識だけでも持っているとスムーズかと思います。 AngularJS入門 Onsen UI Guide 先に断わっておきますが、制作手順は我流です。なんでこんな効率悪いの？とか書き方が汚い!!と言ったことがあったらすみません。。 基本的にAngularJS流にコードは書いていきます。 完成は下記のような動きにする予定です。(GIFアニメーショ
今回はMeshPhongMaterialの環境マッピングに関してです。と言っても、環境マッピングに関しては他のMeshBasicMaterial、MeshLambertMaterialでも共通で使えます。あまり使う機会は多くないかもしれませんが、環境マップを加えるとガラスや鏡面などの表面をとってもリアルに表現することが出来ます。 ちなみに2016年3月現在、three.jsのバージョンはr74です。 環境マッピングとは 環境マッピングを使用すると、周りの環境(風景)をモデル(物体)の表面に映りこませたり透過屈折させたりすることが出来ます。 表面が鏡面のモデルを表現したり ガラスのようなモデルを表現したり、 することが出来ます。 ただ、これらは実際に周りの風景を反射・透過させているのではなく、予めモデルに風景用のテクスチャを指定しています。 素材を用意しよう 環境マッピングをするには、周りの
目下three.jsを勉強中の筆者が、モチベーションを上げるためにチェックしているWebGLコンテンツを集めたサイトを紹介します。Webデザイナーはもちろんですが、WebディレクターやWeb担当者が最新のWebGLコンテンツをチェックすることによってクライアントへ新しい提案が出来るかと思います。どれも凄いクオリティのコンテンツばかりなので見過ぎるとモチベーションが上がるどころか、自信を喪失してしまう恐れも。。。 とは言え、基本ブラウザベースのコンテンツの為、ソースコードを見て勉強することも出来るかと。ぜひ参考にしてください。 three.js このエントリーを見に来る方にとってはわざわざ紹介する必要もないほどおなじみですが、WebGLライブラリのデファクトスタンダードとなりつつあるthree.jsの公式サイトです。three.jsを使用したWebGLのコンテンツを沢山紹介しています。サイト
2016年2月現在のthree.js最新バージョンr74では、Light(光源)は以下の5種類あります。
人気WebGLライブラリのThree JSですが、バージョンアップ頻度が非常に早く2016年2月現在でr74となっております。r74では所々仕様が変わっており、新しいモジュールも増えています。色々と探っていたらeffectsフォルダにCardboardEffect.jsなるものを発見!!今回はこのCardboardEffect.jsを使って簡易的なVRコンテンツを作ってみようと思います。 今まではThree JSでのVRと言ったら、VREffect.jsやStereoEffect.jsがThree JSに付属されていました。しかしVREffect.jsはOculus RiftなどのHMD(ヘッドマウントディスプレイ)用のトラッキングデータを取得する本格的なものですし、StereoEffect.jsはVRに最適化されていませんでした。CardboardEffect.jsに関しては詳しいことは
Webサイトでは徐々にWebGLコンテンツを取り入れる企業が多くなり、私の仕事でも3Dを触る機会が増えてきました。WebGLコンテンツの制作にあたり、多々あるWebGLライブラリの中でもやはりおすすめはThree JSです。触りやすさや情報の多さでも他のライブラリとは一線を画しており、WebGL初心者でも大変扱いやすいです。 今回はそのThree JSの中でも、花形であるジオメトリー(形状)に関してまとめてみました。と言っても大変たくさんあるので、ジオメトリーの中でもコンストラクタの引数へ数値を指定するだけの簡単な種類のみを2回に分けてご紹介します。 ちなみに現状のバージョンは下記のとおりです。 three.js : r73 Three JSのひな形 まずはThree JSを使用して3Dオブジェクトを表示させるひな形を紹介します。使用しているライブラリはjQueryとThree JSです。
WordPress:解決!!Google AdSenseプラグインの配置が上手くいかない件 NEW このブログに「広告を掲載して儲けたい！」と言う事でGoogle AdSenseを導入いたしました。 WordPressへのAdSense広告コードの設置は、Google公式の AdSenseプラグイン を使えば簡単！ と思っていたのですが、表示して欲しい場所と違う所に広告が表示されてしまう事も。。。 プラグインがリリースされてからまだ間もない為情報が少なく、なかなか解決策が見つからず苦戦しましたが何とか解決しました！ ちなみに現在の各バージョンは下記のとおりです。 WordPress: v4.4.2 Google AdSenseプラグイン: v1.2.1 Google AdSenseの登録・申請 この記事では詳しい登録・申請の方法は割愛させていただきます。まだの方は下記ブログなどを参考に
前回に引き続き、Chart.jsのTipsです。 Chart.jsを使いグラフを表示してみる 今回はAngular.jsとChart.jsを組み合わせて、動的に値が変化するグラフを作ります。 Angular.jsの基本的な使い方は割愛します。 ちなみに今回使用するバージョンは下記のとおりです。 Angular JS v1.4.9 Chart.js v1.0.2 Angular.jsでフォームをバインドする まずはangular.min.jsを下記サイトよりダウンロードしてきましょう。 Angular JS CDNにも公開されていますが、セキュリティ面で外部ソースを引っ張るのはあまり良くないとのことですのでダウンロード版を使いましょう。 (今回のデモを作る程度でしたら、CDNでも問題ありません。) コントローラー&フォームバインドの簡単なコードが下記です。 <!DOCTYPE html> <
Webサイトにグラフを簡単に表示出来る、便利なJSライブラリーChart.jsを紹介!! 私がリリースしている下記のアプリ[ローン返済ナビゲーションcannavi]でも、残高の進捗を表現するのにChart.jsを使用しています。 [appbox appstore 1059372889 screenshots-only] ちなみに今回使用しているバージョンは以下の通りです。 Chart.js: v1.0.2
スプラッシュ画面とは？ アプリを起動するときに企業名やアプリ名、ロゴが一瞬表示されることがありますが、その画面はスプラッシュ画面と呼ばれています。 プログレスバーの様に起動にかかる待ち時間の体感速度を速めてくれたり、企業名・アプリ名の宣伝にもつながります。 iOSアプリではリリースに必須となっておりますが、Android端末では基本的にスプラッシュ画面と言う概念はありません。 もちろん、設定次第によってはAndroidでもスプラッシュ画面を表示させることが出来ますし、Monacaのアプリ設定では元から表示させる設定となっています。 MonacaでのAndroidスプラッシュ画面設定 そこでMonaca（クラウド）のAndroidアプリ設定を見てみます。 2016年2月現在では、ldpi～xxxhdpiまでの解像度に合わせ、計6サイズのファイルをアップするようになってます。 上記の画像はデフ
このページを最初にブックマークしてみませんか？
『マトレルナレッジ | matorel knowledge』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
