質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Unity

Unityは、Unity Technologiesが開発・販売している、IDEを内蔵するゲームエンジンです。主にC#を用いたプログラミングでコンテンツの開発が可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

3335閲覧

[Unity]WebViewにて画像ビューワーを表示させたい

HitoshiKamada

総合スコア8

D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Unity

Unityは、Unity Technologiesが開発・販売している、IDEを内蔵するゲームエンジンです。主にC#を用いたプログラミングでコンテンツの開発が可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/02/23 11:30

UnityのWebView(gree/unity-webview)にて画像ビューワーを表示させたいと思い、D3.jsを用いて画像ビューワー用のHTMLを作成しております。
(gree/unity-webviewを使用する場合、viewportの設定が無効になってしまうため)

ひとまず下記のように記述し、動作上はおおよそうまくいっているのですが、例えば左方向にドラッグし続けて、そこから右方向にドラッグしようとすると、しばらく右方向に画像をスクロールし続けないと画像がドラッグできない不具合が発生しております。
D3.jsの仕様上(?)、際限なく一方方向にドラッグできてしまい、ドラッグしすぎると画像がブラウザ上から消えてしまいます。それを制御するため、ドラッグに制限をかけるためにif文で制御しているのですが、「d3.event.translate」の値を変えるだけでは不十分なようです。

まとめると、下記の条件を満たすことができればOKです。
・画像ビューワーの機能として、ズームイン、ズームアウト、ドラッグが実装されている。
・D3.jsは使わなくてもよい。
・iOS、Androidで動作する。

また、gree/unity-webviewで、viewportの設定を有効にできる方法がありましたら、教えていただけるとすごく助かります。
よろしくお願いいたします。

開発環境は下記のとおりです。
・Mac OSX v10.11 El Capitan
・Unity 5.3.1p2
・gree/unity-webview

<!DOCTYPE html> <meta charset="utf-8"> <style> html,body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: white; } </style> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> // 画像の幅を取得 var img = new Image(); img.src = "test.jpg"; var zoom = d3.behavior.zoom() .scale(1) .scaleExtent([1, 5]) .on("zoom", zoomed); var svg = d3.select("body") .call(zoom); function zoomed() { var width = img.width; // 幅 var height = img.height; // 高さ // ウィンドウの幅より画像の幅のほうが大きい場合 if (window.innerWidth < width * d3.event.scale) { if (d3.event.translate[0] < (window.innerWidth - width * d3.event.scale)) { d3.event.translate[0] = window.innerWidth - width * d3.event.scale; } if (d3.event.translate[0] > 0) { d3.event.translate[0] = 0; } } else { if (d3.event.translate[0] > (window.innerWidth - width * d3.event.scale)) { d3.event.translate[0] = window.innerWidth - width * d3.event.scale; } if (d3.event.translate[0] < 0) { d3.event.translate[0] = 0; } } // ウィンドウの高さより画像の高さのほうが大きい場合 if (window.innerHeight < height * d3.event.scale) { if (d3.event.translate[1] < (window.innerHeight - height * d3.event.scale)) { d3.event.translate[1] = window.innerHeight - height * d3.event.scale; } if (d3.event.translate[1] > 0) { d3.event.translate[1] = 0; } } else { if (d3.event.translate[1] > (window.innerHeight - height * d3.event.scale)) { d3.event.translate[1] = window.innerHeight - height * d3.event.scale; } if (d3.event.translate[1] < 0) { d3.event.translate[1] = 0; } } // スクロールを実行 var t = "translate(" + d3.event.translate[0] + 'px,' + d3.event.translate[1] +"px) " + "scale(" + d3.event.scale + ',' + d3.event.scale + ")"; d3.select("img") .style("transform-origin", "0 0") .style("-moz-transform-origin", "0 0") .style("-webkit-transform-origin", "0 0") .style("-o-transform-origin", "0 0") .style("-ms-transform-origin", "0 0") .style("transform", t) .style("-moz-transform", t) .style("-webkit-transform", t) .style("-o-transform", t) .style("-ms-transform", t); } </script> <img src="test.jpg"> </body>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問