HTMLを新規にたてるには・・

Question

現在MonacaでNiftiCloudのサーバーを使ってアプリケーションを開発しています。

この質問ページのような、ユーザが情報を入力して新規にページを構築する方法が解らずにいます。

色々な情報を探しても、ローカル環境で実験だといったチュートリアルばかりでして、そもそも新しくページを作成する仕組みも解らないので情報を探すにしても検索用語が出てこない・・・

お力を貸していただきたいです。

Answer 1

質問者さんの知識レベル、作りたいアプリのイメージが分からないのですが、「Webアプリで（重要）」動的にページを作る方法としては大きく２種類あります。

１つ目はサーバサイドで動的にHTMLを生成しクライアント側に返すという考え方。動的な処理を記載する言語としてPHPやRubyが有名です。
２つ目はサーバの値の変更を検知してクライアント側で動的にHTMLを再構成するという考え方。動的にページを再構成する言語としてJavaScriptが有名です。

前者を同期通信、後者を非同期通信と呼びます。（厳密には後者が後発で、従来から普遍的な方法として使われていた前者と区別するために「非同期通信」とわざわざ区別して呼ばれたという経緯があるため、前者はわざわざ「同期通信」と呼ばれることは少ないです）

ここで、上記は「Webアプリ」の方式であることを強調しておきます。
Webアプリの定義は、「Webブラウザ（InternetExproler、GoogleChromeなど）で動作するアプリケーション」とします。

重要なのは、Monacaで作成するアプリケーションはWebアプリではないということです。言語としてHTMLとJavaScriptで記述しますが、ビルド後の実態はAndroidやiOSネイティブのアプリケーションです。
これはこれで素晴らしい技術で、Cordovaというプラグインが利用されているためにそのようなことができるですがその詳細は割愛します。

Monacaで作るアプリはWebアプリではありませんが、画面の再構成の方法としては「非同期通信」と同じような手法が使えます。
つまり、サーバ側から値を返却させて、その値に基づいてJavaScriptでHTMLを再構成していくというような考え方が採用できます。
逆に、「同期通信」の手法はちょっと難しいです。なぜならMonacaを利用して作成したアプリはHTMLを表示できないので、サーバサイドで生成したページが返却されてきても表示できないからです。

このteratailのようなページを非同期通信で実現するためには、あくまでイメージですが、最初からHTMLには質問、回答などの全てのページ構成を記述しておきます。
回答がない場合は、回答のページ構成は非表示にします。回答があったとサーバーから検知を受けたら、回答ページを表示します。こういった処理をJavaScriptで記述し、動的にHTMLが変更されるようなイメージだ実現できるかと思います。

そういった非同期通信処理をサポートするのがjQueryなどといったJavaScriptフレームワークです。
回答になっておりますでしょうか。。。

Comments

[seri]

回答ありがとうございます。
ページを新規に作るイメージが無い段階でしたが、回答読ませていただいたおかげでイメージが頭の中に出来ました！
クラウドをどういった使い道で使用をするか等、とても鮮明になりました、誠にありがとうございます。

[akabee]

参考になったようで良かったです。
NiftiCloudは私は利用したことがありませんが、Monacaでのクライアント開発だけでなく、サーバ側もご自身で開発予定でしょうか？
なかなかハードルが高そうですが、頑張って下さいね。

Answer 2

ページを丸々新規に作成するというよりはページのテンプレートを作成しておいて、そこに可変な項目を動的に反映させる方法が良いと思います。可変な項目とはこのページで言うと、タイトル、内容、質問ユーザ名等のことです。反対に不変な項目とはページの段組み、クリップボタン、SNS連携ボタンなどです。
実際の流れとして、

1. 「質問する」をクリックすると質問を記入できる
2. 質問を確定するとその内容やタイトル、質問者情報がデータベースに保存される。
3. このページの表示をするときはデータベースに保存されている項目を取得してきて、テンプレートの各項目にあわせて表示する。

必要な言語としてはデータベースアクセスにはPHPなどのサーバサイド言語、PHPが取得した情報をページに反映させるためにJavascriptを使用するのがいいと思います。

検索ワードは「Webページ 動的生成」などで検索するとこのようなページが出てくると思います。

Comments

[seri]

調べた感じですが・・

ユーザが新規にHTMLを作成した場合、繁栄させたいユーザ名や文章等をクラウドに一時的に保存
↓
クラウドもしくは、アプリケーションに記述したサーバー用意のHTML（型番）に値を反映
↓
HTMLを表示・・

といった処理で会っていますでしょうか？

しかし、１つ疑問がありまして、こういったテラテイルのような不特定多数の人が利用するサイトでは新規に制作されるページは無限にあります、そういった場合の型番の管理としては以下のような解釈で実装可能なのでしょうか？

クラウドに値を保持する際、ランダムなページIDを作成しておく
↓
値を読み込む際はランダムなページIDを元に一緒に保存されたその他の値（ユーザIDや文章など）をセットでクライアントに返す。

[07JP27]

基本的な考えかたはその通りです。しかし、「ランダムなID」というのはあまり好ましくありません。ランダムということは被る可能性があるということです。被ってしまった場合、どちらのページを見たいのか判別することができなくなるため、理論上被ることがない値(ユニーク値)をIDにする必要があります。例えば1人のユーザが１秒以内に2回質問をすることは通常考えられないので、ユーザ名+年月日時分秒(私の場合:07JP27201701030945)などをIDにすると被らないと考えられるでしょう。

ちなみにデータべスに保存する際はすべて１つのテーブルに保存するのがベストとは言えません。そこら辺の設計については調べてみると色々出てくると思います。そのテーブル間のIDとなるのが主キーにユニークなIDを入れることでテーブル間をつないで情報を取り出すことが可能です。

[07JP27]

どうしてもランダムなIDを使いたいということであればGUIDというものがあります。これは理論上重複することが無いIDです。
http://www.atmarkit.co.jp/fdotnet/dotnettips/675generateguid/generateguid.html

[akabee]

Monacaで生成したアプリはWebブラウザではないのでサーバーでHTMLを作成してもアプリ上では表示できません。
サーバーからはデータのみを返却し、アプリで受け取って表示するという方針が良いと思います。イメージはわきますか？

[07JP27]

MonacaはPHPが使えないこと等制約があることを失念しておりました。akabee様の回答の通りにするのが良いかと思います。

[seri]

HTMLの仕組みを学ばせていただきました、ありがとうございます。