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

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

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

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Play Framework 2

Play Framework 2はPlayのメジャーバージョンです。現代の web アプリケーション開発に必要なコンポーネント及び API を統合した生産性の高い Java と Scala の web アプリケーションフレームワークです。

JavaScript

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

Q&A

解決済

2回答

2581閲覧

Java WEBアプリケーションでのレスポンスの取得方法

allazward

総合スコア11

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Play Framework 2

Play Framework 2はPlayのメジャーバージョンです。現代の web アプリケーション開発に必要なコンポーネント及び API を統合した生産性の高い Java と Scala の web アプリケーションフレームワークです。

JavaScript

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

0グッド

0クリップ

投稿2016/07/27 21:58

###前提・実現したいこと
現在Play Framework 2.56(Java)を使用して
WEBアプリケーションを作成しています。
作成するページとおおまかな流れは、トップ画面に一覧があり、(検索結果を初期表示する)
詳細ボタンを押下して次ページで詳細情報を表示するといった単純なものです。
(シングルページではありません)

具体的には画面初期表示時にサーバー側でデータベースからデータを取得して
そのデータをjson形式に整形、クライアントに返し
受け取ったデータをクライアントで
vue.js(他のフレームワークも検討中)を使用してデータバインド、
画面に表示しようとしています。
その際、サーバー側で下記のコードの様にして初期表示画面の指定、また展開したいデータを
指定しているのですが画面でのjsonデータの取得方法がわかりません。
playには画面側に用意されているものとしてscala.html
があるのですがその機能は使用せずjavascriptでサーバーからわたってきたデータを
展開したいと考えています。
下記コードでレスポンスを返す場合、jsonを一緒に返し
javascriptで取得、バインドすることは出来ないのでしょうか。

もし上記のような事が出来ないのであれば
検索実行などを行わず、まず画面を初期表示し、
その後ajaxで通信し、データを検索、vue.jsでバインドする、
などのような手順も検討しています。
その選択肢をとった場合に一覧画面でボタンを押下した際、
指定画面へjsonを返し画面で受け取る事が出来ないのであれば
一旦、詳細画面を表示、その際検索条件となる値を遷移先画面に渡して
その画面でajaxを使用してデータを特定、取得といった手順しか
思いつきませんでした。
もし他にも良い方法があるようでしたら教えてください。
私としては最初に記載した方法で実装できることを期待しています。
よろしくお願い致します。

###発生している問題・エラーメッセージ
エラーメッセージ等はありません

エラーメッセージ

###該当のソースコード
public class Administrate extends Controller {
public Result index() {
AdministrateService aService = new AdministrateService();
//データ検索(getInitialDataはjsonデータを返却します)
return ok(views.html.index.render(aService.getInitialData()));
}

###試したこと

###補足情報(言語/FW/ツール等のバージョンなど)
Java 1.8
Play Framework 2.56
vue.js 1.x または Angular 1.x

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

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

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

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

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

kei344

2016/07/29 02:11

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
guest

回答2

0

ベストアンサー

まず画面を初期表示し、その後ajaxで通信し、データを検索、vue.jsでバインドする

こうなると思います。

投稿2016/07/28 06:17

root_jp

総合スコア4666

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

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

allazward

2016/07/29 02:01

root_jp様、ありがとうございます。 思いついたもののこのやり方に抵抗がありました。 これは一般的なやり方でしょうか。(scalaを使用しない選択肢が一般的でないかもしれませんが) 私としてはバックエンドの技術が変わった場合(java⇒rubyなど) 画面だけをそのまま変更せず残せるようにしたいと考えています。 上述のコード6行目、 OK()の引数はレスポンスとして画面に渡されるわけではないのでしょうか。 この辺をまだ理解できていません。 レスポンスヘッダに追加も考えたのですが、容量制限があり また上述のコードではレスポンスボディには含まれていませんでした。 このケースにおいて、回答頂いた 『遷移先画面を表示⇒遷移もと画面からパラメータを受け取る⇒遷移先画面からajax通信』の方法以外で他に思いつくことがあれば教えて頂けないでしょうか。
root_jp

2016/07/29 04:38

なぜ抵抗があるんですか?一般的だと思います。 このやり方は、バックエンドは関係ないので画面だけそのまま残せると思いますよ。 AjaxのリクエストURLが同じように作れればですけど。 すみません、Playのことは良く分からないのですが、 OKメソッドがレスポンスを返すものであるならば、返っていると思いますよ。 これだと、ブラウザにHTMLではなくJSONのデータがそのまま表示されそうです。 サーバーサイドとクライアントサイドがごっちゃになっている気がしますね。 レスポンスはブラウザが受けるものです。 JavaScriptは関係ありません。 ブラウザへのレスポンスが、Content-Type がHTMLで、 そのHTMLの内容にJavaScriptが含まれているのであれば、 書かれている順に上から下に実行するに過ぎません。 ところが、今はレスポンスにJSONを返しているので、 JavaScriptすらも実行されていないと思います。 そのJSONのレスポンスをJavaScriptで受けたければ Ajaxでそのコントローラにリクエストします。 どうしてもこれが嫌なのであれば、JSONを画面の情報として渡して 結果をHTMLに埋め込む。 JavaScriptのonloadイベントで、そのJSONを参照する形にすることです。 これは、yubaさんの言っていることになのではないでしょうか? scala.html というのを使いたければ使えばいいし、 使いたくなければ使わなければいいだけのことです。 Play分からないので適当に書きますが、 <script> var data = request.get("json"); // data にはサーバーサイドで生成したJSONが入っているので、あとは使うのみ。 </script> とか <span style="display: none;" id="json">request.get("json")</span> としてHTMLの隠し項目として出力しておき、 onloadのJavaScriptでこの値を取得する。 var data = document.querySelector("#json").innerText; あとはdataを使うのみ。
allazward

2016/07/30 04:58

root_jp様、 ご返答ありがとうございます。 『抵抗がある』と感じたのは単純に私が そのような実装の経験が無かったからだと思います まだ結論はでていませんが 検索キーとなるパラメータを渡す方向で進めたいと思います。 色々とありがとうございました。
guest

0

Ajaxでないなら、JavaScriptがJSONデータを受け取るには、HTML文書内に

var data = 'データJSON';

という記述が入っているようにすることになります。
この「データJSON」の埋め込みをscala.htmlにやらせます。

投稿2016/07/27 23:23

yuba

総合スコア5568

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

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

allazward

2016/07/29 01:36

yuba様、 ご回答ありがとうございます。 仰られているのは、 ページ冒頭で@(jsontxt: String) var data = @jsontxt;のように渡すと言うことでしょか。 意図としては画面周りはscala.htmlを使用せず、 htmlとjavascriptだけで実現したいと 考えています。 ・・・と言うのは不可能でしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問