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

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

ただいまの
回答率

90.60%

  • HTML

    8688questions

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

  • HTML5

    3883questions

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

  • canvas

    251questions

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

  • SVG

    97questions

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

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

受付中

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 162

teratailler

score 21

 前提・実現したいこと

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

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

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

 発生している問題

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

 試したこと

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

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

上記1〜3を実装するためのヒントが欲しいです。例えば

  1. クライアント側でHTMLをSVG化、同時にBase64文字列を生成
  2. Base64文字列をサーバーへPOST送信
  3. Base64文字列をカートに保存
  4. 商品購入確定時にサーバー側でBase64文字列をイメージ化しストレージに保存

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/05/18 14:21

    主にPHPの知識はあるとのことですが、DBの知識はいかがでしょうか。

    キャンセル

  • teratailler

    2018/05/18 17:38

    DBの知識もあります。

    キャンセル

回答 1

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/18 17:48

    > 「WEB上で商品のデザイン」というのが具体的にどのようものかがイメージわかない
    質問文に記載したサイトのイメージ通り、ベースイメージに対して任意の文字や画像等を任意の場所に配置してオリジナルな商品を作るということです。
    https://tmix.jp/designs/new

    > 画像として保存できる
    ご提示いただいたサイトでは手動保存するイメージのようですが、サーバーへのPostパラメータとしてはBase64文字列を送信する感じでしょうか?

    > 保存できたらあとはPHP側で紐付けるデータ
    カートに入れた時点(購入されるかもわからない状態)で画像をストレージに保存し、その画像パスをセッションに保持するという認識でよいでしょうか?
    セッションに画像そのものを入れるのは難しいと思っています。

    キャンセル

  • 2018/05/18 22:40

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

    キャンセル

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

  • ただいまの回答率 90.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    Webアプリケーションでの通知

    Webアプリケーションを作成しようと思ってるのですが、デスクトップ、スマートフォン(IOS,Android)にプッシュ通知をするプログラムを書こうと思ってるのですが、それをするため

  • 解決済

    ESP8266とESP8266をWiFiルーターを介して命令実行させたい(arduino言語で)

    前提・実現したいこと ESP8266とESP8266をWiFiルーターを介して命令実行させたい 発生している問題・エラーメッセージ arduino言語でそれぞれにスケッチ

  • 解決済

    UIのデザイン

    一辺が80pixelの正方形のラベルに、1-4桁の数字を表示させたいです。一番きれいで読みやすいフォントサイズはどれくらいでしょうか? また、フォントはClear Sansにしよう

  • 解決済

    svgファイルの画像でマスクをかける

    前提・実現したいこと 単純に長方形の画像に対してsvgファイルで作成した画像(角丸四角形)で切り抜いたようなマスクをかける作業を、全てのブラウザで適用されるようにしたいです。(※

  • 解決済

    外部サイトの検索結果からスクレイピングしたい

    前提・実現したいこと 外部サイトの検索結果一覧から、一番最初の要素について取得したいです。 以前jqueryのajax関数を使用して外部ページのDOMから情報を取得したことがあった

  • 解決済

    JavaScriptでhtml文(erb)を記述する場合

    前提・実現したいこと javascriptの.htmlで<%= image_tag()%>を実装したいのですが、なかなかうまくいきません。 結果は<%= image_tag()

  • 解決済

    画像にマウスが乗ったときに、マウスの周りのみ画像を透明にする方法

    一枚の画像の一部分のみにマウスが乗っかると、 そのマウスの周辺の一部分のみを透明にする方法はありますでしょうか? マウスの乗っていない部分は通常表示されている状態を作りたいです。

  • 解決済

    「=>」の記号について教えてください

    「=>」の記号について教えてください fetchについて調べていたときに出会ったのですが、調べても出てきません。 この「=>」を使っての意味は、「処理成功のときにこの処理をする」と

同じタグがついた質問を見る

  • HTML

    8688questions

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

  • HTML5

    3883questions

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

  • canvas

    251questions

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

  • SVG

    97questions

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