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

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

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

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

Q&A

1回答

996閲覧

WEB上でデザインした商品をそのまま購入できるようにしたい

退会済みユーザー

退会済みユーザー

総合スコア0

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

0グッド

1クリップ

投稿2018/05/18 04:54

前提・実現したいこと

自分だけのオリジナルTシャツが作れる
以下のようなサイトを作ろうとしています。
https://tmix.jp/

  1. WEB上で商品のデザインができる
  2. デザインした商品はイメージ化してカート(セッション)に保存することができる
  3. カート(セッション)に保存した商品はそのまま購入することができる

といった主要機能から取り掛かろうとしています。
一般的なWEBシステム構築(主にPHP)の知識はあります。

発生している問題

クライアント側で
動的にデザインした商品をどのようにイメージ化するか
そして
そのデータをどのようにサーバーに送信しどのように保持するのか
全く良い案が思いつきません。

試したこと

半日ほどWEBを調べ、HTMLをSVG化するという方法を知りました。
https://qiita.com/haribote/items/b17d46b9679ce2fb2712

調べ方が悪いのか、その他有益な情報にはありつけませんでした。

上記1〜3を実装するためのヒントが欲しいです。例えば
0. クライアント側でHTMLをSVG化、同時にBase64文字列を生成
0. Base64文字列をサーバーへPOST送信
0. Base64文字列をカートに保存
0. 商品購入確定時にサーバー側でBase64文字列をイメージ化しストレージに保存

といったように抽象的な回答でも大歓迎です。
このような実装をしたことがないので、何かヒント(解決の糸口)が欲しい次第です。

よろしくお願いいたします!

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

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

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

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

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

m.ts10806

2018/05/18 05:21

主にPHPの知識はあるとのことですが、DBの知識はいかがでしょうか。
退会済みユーザー

退会済みユーザー

2018/05/18 08:38

DBの知識もあります。
guest

回答1

0

「WEB上で商品のデザイン」というのが具体的にどのようものかがイメージわかないのですが、
canvas(HTML5)を使ったお絵かき掲示板 というのがあるので、そちらがヒントになるのではと。

ひとまずcanvasでお絵かきできるようになれば画像として保存できるようなので、
保存できたらあとはPHP側で紐付けるデータを持っておいてカートで処理させる感じでしょうか。

投稿2018/05/18 05:27

m.ts10806

総合スコア80765

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

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

退会済みユーザー

退会済みユーザー

2018/05/18 08:48

> 「WEB上で商品のデザイン」というのが具体的にどのようものかがイメージわかない 質問文に記載したサイトのイメージ通り、ベースイメージに対して任意の文字や画像等を任意の場所に配置してオリジナルな商品を作るということです。 https://tmix.jp/designs/new > 画像として保存できる ご提示いただいたサイトでは手動保存するイメージのようですが、サーバーへのPostパラメータとしてはBase64文字列を送信する感じでしょうか? > 保存できたらあとはPHP側で紐付けるデータ カートに入れた時点(購入されるかもわからない状態)で画像をストレージに保存し、その画像パスをセッションに保持するという認識でよいでしょうか? セッションに画像そのものを入れるのは難しいと思っています。
m.ts10806

2018/05/18 13:40

大体その認識で良いかと。 パスでもいいですし、結局一時ファイルなのでワンタイムなランダム文字列をキーとして使ってもいいんじゃないかと。 描いてみたものの実際買わないということはあるのでその場合はファイルごと破棄しないとゴミが延々と溜まり続けますからね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問