はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

  • はてなブックマークって?
  • アプリ・拡張の紹介
  • ユーザー登録
  • ログイン
  • Hatena

はてなブックマーク

トップへ戻る

  • 総合
    • 人気
    • 新着
    • IT
    • 最新ガジェット
    • 自然科学
    • 経済・金融
    • おもしろ
    • マンガ
    • ゲーム
    • はてなブログ(総合)
  • 一般
    • 人気
    • 新着
    • 社会ニュース
    • 地域
    • 国際
    • 天気
    • グルメ
    • 映画・音楽
    • スポーツ
    • はてな匿名ダイアリー
  • 世の中
    • 人気
    • 新着
    • 新型コロナウイルス
    • 働き方
    • 生き方
    • 地域
    • 医療・ヘルス
    • 教育
    • はてな匿名ダイアリー
  • 政治と経済
    • 人気
    • 新着
    • 政治
    • 経済・金融
    • 企業
    • 仕事・就職
    • マーケット
    • 国際
    • はてなブログ(政治と経済)
  • 暮らし
    • 人気
    • 新着
    • カルチャー・ライフスタイル
    • ファッション
    • 運動・エクササイズ
    • 結婚・子育て
    • 住まい
    • グルメ
    • お金
    • はてなブログ(暮らし)
    • 掃除・整理整頓
    • 雑貨
    • 買ってよかったもの
    • 旅行
    • アウトドア
    • 趣味
  • 学び
    • 人気
    • 新着
    • 人文科学
    • 社会科学
    • 自然科学
    • 語学
    • ビジネス・経営学
    • デザイン
    • 法律
    • 本・書評
    • 将棋・囲碁
    • はてなブログ(学び)
  • テクノロジー
    • 人気
    • 新着
    • IT
    • セキュリティ技術
    • はてなブログ(テクノロジー)
    • AI・機械学習
    • プログラミング
    • エンジニア
  • おもしろ
    • 人気
    • 新着
    • まとめ
    • ネタ
    • おもしろ
    • これはすごい
    • かわいい
    • 雑学
    • 癒やし
  • エンタメ
    • 人気
    • 新着
    • スポーツ
    • 映画
    • 音楽
    • アイドル
    • 芸能
    • お笑い
    • サッカー
    • 話題の動画
  • アニメとゲーム
    • 人気
    • 新着
    • マンガ
    • Webマンガ
    • ゲーム
    • 任天堂
    • PlayStation
    • アニメ
    • バーチャルYouTuber
    • オタクカルチャー
  • おすすめ

    秋冬の新作アニメ

『matorel』

  • 人気
  • 新着
  • すべて
  • three.js – matorel

    3 users

    matorel.com

    こんにちは。matorel管理人です。 都内でフロントエンドエンジニアをしております。 このブログではWebデザインやアプリ制作に関する備忘録として技術や知識を紹介していきます。 年 齢:30代 血液型:A型 出身地:長野県 趣 味:カメラ・ボルダリング

    • 世の中
    • 2016/04/24 20:51
    • あとで読む
    • Three JS:Geometryでオリジナルの形状を作ってみる

      4 users

      matorel.com

      今まで当ブログでthree.jsの基本的な扱い方を勉強してきましたが、もっと基礎的な部分を固める為に自作でGeometry(形状)を作ってみたいと思います。まずは簡単な所で、今回は下のようなただの八面体の作り方を説明します。 Geometryとは 3D空間の中の物体は基本的に頂点(vertice)とその頂点を繋げた三角形の面(face)の集合で成り立っています。three.jsのプリセットに含まれているTorusKnotGeometry(輪環結び目)のような複雑な形状のものも同じく、ワイヤーフレームを表示させてみると三角形の集合だと言う事が分かります。 その頂点と三角形の面を一つ一つ指定して一つのGeometryが形成されます。 Geometryを作ってみる それでは早速、自作でのGeometryの形成の仕方を説明します。 まずはnew THREE.Geometry()によりGeometr

      • テクノロジー
      • 2016/03/24 22:30
      • 勉強
      • プログラミング
      • javascript
      • web
      • ハイブリッドアプリで使えるデータベースまとめ

        29 users

        matorel.com

        ハイブリッドアプリでデータベースを利用したいときのあれこれをまとめました。私の製作環境はMonacaですが、Cordova環境全般に同様です。 使用できるデータベース・ストレージの選択肢が多い事は良い事なのですが、結局どんなアプリにはどのデータベースがいいのか迷ってしまいます。例えば、ゲームスコアのランキングやハイスコア、サービスのユーザー認証、スケジュール管理、シンプルなメモ帳などなど。また、ローカル(オフライン)だけで完結させるのか、サーバーへアクセスさせるのかも重要です。 ざっと思いつくだけでも下記をデータベースとして使えそうです。 Web Storage localStorage、sessionStorage IndexedDB WebSQL 外部管理サーバーDBアクセス mBaaS(外部バックエンドサービス) Monaca バックエンド、ニフティクラウド、Kii Cloud、Mi

        • テクノロジー
        • 2016/03/22 08:27
        • db
        • ハイブリッドアプリ
        • smartphone
        • Cordova
        • app
        • cache
        • Azure
        • application
        • apps
        • Monacaを使ってクイズアプリをたった1時間で作ってみる-後編-

          19 users

          matorel.com

          前回はクイズアプリのトップページとクイズページの途中まで作成いたしました。今回はデータオブジェクトからクイズデータを持って来てバインド、正解不正解のアラート表示、結果画面でのスコア表示、全体のレイアウトを行いたいと思います。 クイズデータを作ろう まずはクイズのデータを作成します。データは管理しやすくするためコントローラー内ではなくサービス(value)内で管理します。jsフォルダ内にservicesフォルダを新規作成して下さい。更にservicesフォルダ内にquestionsService.jsファイルを作成します。このファイル内にサービスを下記コードのように記述します。

          • テクノロジー
          • 2016/03/17 17:55
          • monaca
          • web制作
          • プログラミング
          • javascript
          • js
          • テクノロジー
          • サービス
          • Monacaを使ってクイズアプリをたった1時間で作ってみる-前編-

            14 users

            matorel.com

            HTML・CSS・JavaScriptなどのWeb技術のみで制作が可能なスマートフォンアプリ、いわゆるハイブリッドアプリの制作サービスMonacaを使って簡単なクイズアプリを作ってみようと思います。今回は無料で使えるMonaca クラウド IDEを使って、ブラウザ上だけで制作しますので環境を整える必要もありません。 なおMonacaでアプリを作るにはAngularJSとOnsen UIの知識が必要ですが、この記事ではそれぞれの説明は割愛します。簡単な予備知識だけでも持っているとスムーズかと思います。 AngularJS入門 Onsen UI Guide 先に断わっておきますが、制作手順は我流です。なんでこんな効率悪いの?とか書き方が汚い!!と言ったことがあったらすみません。。 基本的にAngularJS流にコードは書いていきます。 完成は下記のような動きにする予定です。(GIFアニメーショ

            • テクノロジー
            • 2016/03/16 16:41
            • Monaca
            • アプリ
            • チュートリアル
            • javascript
            • web
            • あとで読む
            • Three JS:MeshPhongMaterialを極める-環境マッピング編-

              5 users

              matorel.com

              今回はMeshPhongMaterialの環境マッピングに関してです。と言っても、環境マッピングに関しては他のMeshBasicMaterial、MeshLambertMaterialでも共通で使えます。あまり使う機会は多くないかもしれませんが、環境マップを加えるとガラスや鏡面などの表面をとってもリアルに表現することが出来ます。 ちなみに2016年3月現在、three.jsのバージョンはr74です。 環境マッピングとは 環境マッピングを使用すると、周りの環境(風景)をモデル(物体)の表面に映りこませたり透過屈折させたりすることが出来ます。 表面が鏡面のモデルを表現したり ガラスのようなモデルを表現したり、 することが出来ます。 ただ、これらは実際に周りの風景を反射・透過させているのではなく、予めモデルに風景用のテクスチャを指定しています。 素材を用意しよう 環境マッピングをするには、周りの

              • テクノロジー
              • 2016/03/14 21:38
              • web制作
              • javascript
              • web
              • ワクワクが止まらない!!WebGLコンテンツ集サイト5選

                17 users

                matorel.com

                目下three.jsを勉強中の筆者が、モチベーションを上げるためにチェックしているWebGLコンテンツを集めたサイトを紹介します。Webデザイナーはもちろんですが、WebディレクターやWeb担当者が最新のWebGLコンテンツをチェックすることによってクライアントへ新しい提案が出来るかと思います。どれも凄いクオリティのコンテンツばかりなので見過ぎるとモチベーションが上がるどころか、自信を喪失してしまう恐れも。。。 とは言え、基本ブラウザベースのコンテンツの為、ソースコードを見て勉強することも出来るかと。ぜひ参考にしてください。 three.js このエントリーを見に来る方にとってはわざわざ紹介する必要もないほどおなじみですが、WebGLライブラリのデファクトスタンダードとなりつつあるthree.jsの公式サイトです。three.jsを使用したWebGLのコンテンツを沢山紹介しています。サイト

                • テクノロジー
                • 2016/03/07 17:02
                • WebGL
                • あとで読む
                • javascript
                • webサービス
                • web
                • Three JS:基本の使い方総まとめ-Light > DirectionalLight編-

                  3 users

                  matorel.com

                  2016年2月現在のthree.js最新バージョンr74では、Light(光源)は以下の5種類あります。

                  • テクノロジー
                  • 2016/02/29 22:17
                  • javascript
                  • web
                  • Three JS:基本の使い方総まとめ-Light > SpotLight編-

                    3 users

                    matorel.com

                    2016年2月現在のthree.js最新バージョンr74では、Light(光源)は以下の5種類あります。

                    • テクノロジー
                    • 2016/02/26 15:07
                    • javascript
                    • web
                    • あとで読む
                    • Three JS:CardboardEffect.jsを使ってVRコンテンツを作ってみた

                      6 users

                      matorel.com

                      人気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に関しては詳しいことは

                      • テクノロジー
                      • 2016/02/22 23:08
                      • three.js
                      • VR
                      • javascript
                      • web
                      • Three JS:基本の使い方総まとめ-ジオメトリー前編-

                        3 users

                        matorel.com

                        Webサイトでは徐々にWebGLコンテンツを取り入れる企業が多くなり、私の仕事でも3Dを触る機会が増えてきました。WebGLコンテンツの制作にあたり、多々あるWebGLライブラリの中でもやはりおすすめはThree JSです。触りやすさや情報の多さでも他のライブラリとは一線を画しており、WebGL初心者でも大変扱いやすいです。 今回はそのThree JSの中でも、花形であるジオメトリー(形状)に関してまとめてみました。と言っても大変たくさんあるので、ジオメトリーの中でもコンストラクタの引数へ数値を指定するだけの簡単な種類のみを2回に分けてご紹介します。 ちなみに現状のバージョンは下記のとおりです。 three.js : r73 Three JSのひな形 まずはThree JSを使用して3Dオブジェクトを表示させるひな形を紹介します。使用しているライブラリはjQueryとThree JSです。

                        • テクノロジー
                        • 2016/02/15 18:29
                        • web
                        • WordPress:解決!!Google AdSenseプラグインの配置が上手くいかない件 – matorel

                          7 users

                          matorel.com

                          WordPress:解決!!Google AdSenseプラグインの配置が上手くいかない件   NEW このブログに「広告を掲載して儲けたい!」と言う事でGoogle AdSenseを導入いたしました。 WordPressへのAdSense広告コードの設置は、Google公式の AdSenseプラグイン を使えば簡単! と思っていたのですが、表示して欲しい場所と違う所に広告が表示されてしまう事も。。。 プラグインがリリースされてからまだ間もない為情報が少なく、なかなか解決策が見つからず苦戦しましたが何とか解決しました! ちなみに現在の各バージョンは下記のとおりです。 WordPress: v4.4.2 Google AdSenseプラグイン: v1.2.1 Google AdSenseの登録・申請 この記事では詳しい登録・申請の方法は割愛させていただきます。まだの方は下記ブログなどを参考に

                          • 暮らし
                          • 2016/02/10 20:13
                          • プラグイン
                          • Chart.jsとAngular JSを組み合わせて動的なグラフを生成してみる

                            47 users

                            matorel.com

                            前回に引き続き、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> <

                            • テクノロジー
                            • 2016/02/09 20:01
                            • Chart.js
                            • angular.js
                            • AngularJS
                            • canvas
                            • angular
                            • JS
                            • JavaScript
                            • chart
                            • あとで読む
                            • Chart.jsを使いグラフを表示してみる

                              10 users

                              matorel.com

                              Webサイトにグラフを簡単に表示出来る、便利なJSライブラリーChart.jsを紹介!! 私がリリースしている下記のアプリ[ローン返済ナビゲーションcannavi]でも、残高の進捗を表現するのにChart.jsを使用しています。 [appbox appstore 1059372889 screenshots-only] ちなみに今回使用しているバージョンは以下の通りです。 Chart.js: v1.0.2

                              • テクノロジー
                              • 2016/02/09 20:00
                              • JavaScript
                              • グラフ
                              • ライブラリ
                              • web制作
                              • web
                              • あとで読む
                              • MonacaでAndroid用のスプラッシュ画面を表示したい!! - matorel

                                7 users

                                matorel.com

                                スプラッシュ画面とは? アプリを起動するときに企業名やアプリ名、ロゴが一瞬表示されることがありますが、その画面はスプラッシュ画面と呼ばれています。 プログレスバーの様に起動にかかる待ち時間の体感速度を速めてくれたり、企業名・アプリ名の宣伝にもつながります。 iOSアプリではリリースに必須となっておりますが、Android端末では基本的にスプラッシュ画面と言う概念はありません。 もちろん、設定次第によってはAndroidでもスプラッシュ画面を表示させることが出来ますし、Monacaのアプリ設定では元から表示させる設定となっています。 MonacaでのAndroidスプラッシュ画面設定 そこでMonaca(クラウド)のAndroidアプリ設定を見てみます。 2016年2月現在では、ldpi~xxxhdpiまでの解像度に合わせ、計6サイズのファイルをアップするようになってます。 上記の画像はデフ

                                • 暮らし
                                • 2016/02/09 19:58

                                このページはまだ
                                ブックマークされていません

                                このページを最初にブックマークしてみませんか?

                                『matorel』の新着エントリーを見る

                                キーボードショートカット一覧

                                j次のブックマーク

                                k前のブックマーク

                                lあとで読む

                                eコメント一覧を開く

                                oページを開く

                                はてなブックマーク

                                • 総合
                                • 一般
                                • 世の中
                                • 政治と経済
                                • 暮らし
                                • 学び
                                • テクノロジー
                                • エンタメ
                                • アニメとゲーム
                                • おもしろ
                                • アプリ・拡張機能
                                • 開発ブログ
                                • ヘルプ
                                • お問い合わせ
                                • ガイドライン
                                • 利用規約
                                • プライバシーポリシー
                                • 利用者情報の外部送信について
                                • ガイドライン
                                • 利用規約
                                • プライバシーポリシー
                                • 利用者情報の外部送信について

                                公式Twitter

                                • 公式アカウント
                                • ホットエントリー

                                はてなのサービス

                                • はてなブログ
                                • はてなブログPro
                                • 人力検索はてな
                                • はてなブログ タグ
                                • はてなニュース
                                • App Storeからダウンロード
                                • Google Playで手に入れよう
                                Copyright © 2005-2023 Hatena. All Rights Reserved.
                                設定を変更しましたx