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

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

ただいまの
回答率

90.62%

  • JavaScript

    15863questions

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

  • HTML

    8635questions

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

  • jQuery

    6520questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5560questions

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

  • jQueryプラグイン

    476questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

正方形をランダムなサイズ感でカッコ良く表示したい(jquery, jqueryプラグイン, css, html)

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 470

YukiAgatsuma

score 4

 前提・実現したいこと

個人でオリジナルアプリケーションを作成中ですデザイン(案)
アートの紹介をするページで、正方形で作成された様々なアートをトップページで、上記の図(すいません雑ですがペイントで簡単に作成したデザイン案です)のようなデザインで表示したいです。

様々なプラグインを探したりしているのですが、
https://masonry.desandro.com/
このプラグインのように、異なるサイズのイメージを隙間を詰めて表示するプラグインなどは存在しても、正方形のものを、ランダムのサイズで、均一の隙間で、表示してくれるように加工するプラグインなどが見つかりません。

プラグインでなくても、何か自力で出来ればいいのですが、特に今の所、その技術を持ち合わせていません。。。

どのようにすればこの図のようなデザインでトップページを実装出来るのか、何かご教示いただければ幸いです。
よろしくお願いします。

※理想を申し上げますと、リロードする度に配置が変わり、何度見ても飽きないデザインに出来ればいいなと思います。

 該当のソースコード

もうほんとに、HTMLは下記のようなベーシックなもので今の所実装中です。

<div id="container">
  <div><img src="/images/pic1.jpg" /></div>
  <div><img src="/images/pic2.jpg" /></div>
  <div><img src="/images/pic3.jpg" /></div>
  <div><img src="/images/pic4.jpg" /></div>
</div>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • yambejp

    2018/06/08 18:37

    例示のものもそうですが、脇の方になると長方形にならざる得ないと思いますが、それを全部正方形に分割するのでしょうか?

    キャンセル

  • YukiAgatsuma

    2018/06/08 18:49

    早速のご回答ありがとうございます!すいません、分かりにくいですが、全て正方形が大前提なんです。。

    キャンセル

  • yoshinavi

    2018/06/09 10:54

    画像ならば、手間は掛かるでしょうが数種類の正方形に加工して「https://masonry.desandro.com/」のプラグインは使えないのでしょうか?

    キャンセル

  • YukiAgatsuma

    2018/06/09 13:19 編集

    ありがとうございます!使えると思ったのですが、よく内容を見て見ると、サイズが違うものを並べることによって生まれた隙間(例えば長方形と正方形を連続で並べることによって発生した隙間など)を埋めるために使用するもの?のような気がしました。自分が目的としている、正方形をサイズ分けして綺麗に並べるということはでいないのかな、と考えてしまいました。

    キャンセル

回答 1

checkベストアンサー

+6

とりあえず「正方形で充填」の条件をクリアするなら最小の正方形の大きさを決めそれを方眼紙のようなグリッドと見立て、充填に用いる様々な大きさの正方形を「グリッドの整数倍の大きさ」とすれば比較的素朴なアルゴリズム(※)で達成できると思います。


※: 素朴なアルゴリズム
例えば、大きな正方形から埋め始め、ある大きさの正方形の空きがなくなったらもう少し小さな正方形にして埋めていき・・・を繰り返し、最後にグリッド単位の正方形で残りを埋めると以下のような感じにできます。

イメージ説明

しかし「デザイン」というのは難しいもので、こうした素朴な方法でやった結果が「必ずしも意図したデザインになるとは限らない」と思います。

一見して質問にある例は「充填に用いる正方形の大きさのバリエーションや数が押さえられておりスッキリしたデザインになっている」と感じます。

一方、自分の回答例は「アルゴリズムは単純だが、充填に用いた四角形の大きさのバリエーションや数がごちゃごちゃしていて今一つよくない」と見えるのではないでしょうか?

人間が「よい」と感じるデザインには「単に正方形で充填できればよい」という以上に「なんらかの評価基準がある」と思います。その評価基準を想定して「ほどよく埋めるアルゴリズム」を考えないといけなくて「そこが難しい点」ではないでしょうか?

質問者さんは「例は挙げておられる」のですが「具体的な評価基準」を述べておられません。よって「実際に何を狙いとしたデザインにしたいのか」が曖昧なため、どういうアルゴリズム(方針)がよいか案を出しにくいと思います。回答側がデザイン基準まで想定することはできるでしょうけど、それはもう「回答者独自のデザインアイデア」であって回答が発散しかねないのでは?


追記:とりあえずアルゴリズムの雰囲気を示すものとしてPythonの実装例を挙げます。
JavaScriptの基本機能とnumpyライブラリーを用いたPythonを比べると、後者の方が多次元配列処理の記述能力が高いためJavaScriptに書き直すならnumpyがやっていることを理解する必要があります。numpyに大きく依存した記述についてはコメントを書いておきました。やっていることの要点さえつかめればJavaScriptでも二次元配列の要素を調べたり変更したりするループ処理っぽいものを書けば実現は容易です。

from tkinter import *  # Pythonの標準GUIライブラリー
import numpy as np  # 行列演算を簡便に記述することができるライブラリー

G = 4
W, H = 16*5, 9*5
CF = '#c5eb99'  # 充填色
CB = '#FFF'     # ボーダー色


def range2(n):
    prime = 2**31-1  # 適当な大きさの素数
    return map(lambda x: prime * x % n, range(n))


def find(r, cv: Canvas, a, range):
    ww = W - r + 1
    hh = H - r + 1
    x0 = np.random.randint(0, ww)
    y0 = np.random.randint(0, hh)
    for ofs in range(ww * hh):
        dy = ofs // ww
        dx = ofs % ww
        y = (y0 + dy) % hh
        x = (x0 + dx) % ww
        # 以下のif文は配列aの1次元目(y座標)がy~y+r-1まで、
        # 2次元目(x座標)がx~x+r-1までの要素が全て0かを判定するものです。
        if np.all(a[y:y + r, x:x + r] == 0):
            # 以下の代入文でy座標がy~y+r-1, x座標がx~x+r-1の範囲の全要素を1にしてます
            a[y:y + r, x:x + r] = 1
            x1, y1 = x * G, y * G
            x2, y2 = (x + r) * G - 1, (y + r) * G - 1
            cv.create_rectangle((x1, y1), (x2, y2), fill=CF, outline=CB)
            return True


def main():
    a = np.zeros((H, W), dtype=np.uint8)  # HxWの2次元行列(初期値0)を生成している

    root = Tk()
    cv = Canvas(root, width=W * G, height=H * G)  # HTMLのcanvasみたいなもの
    cv.pack()
    # 空間充填に用いる正方形の大きさの候補のリスト
    # この値を変えると結果の雰囲気は大分変化する
    rs = [20, 10, 4, 2, 1]
    for r in rs:
        while find(r, cv, a, range2):
            pass
    root.mainloop()


if __name__ == '__main__':
    main()

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/06/09 13:15

    素晴らしい迅速なご回答本当にありがとうございます(初投稿でドキドキしていましたがすごい感激しました)。ご指摘いただきました内容、理解しました。確かに評価基準が曖昧で、程よく埋めるアルゴリズムがなんなのか、非常に感覚的な部分を明文化できておりません!
    というか、そもそも、一旦ご指摘いただいた私の"感覚的な部分"を抜きにして、素朴なアルゴリズムってのがどんなものか、実際に実装するときのアイデァが自分になさすぎて困ります。

    ```html
    <div class="container">
    <div class="grid-1">
    <img src="/images/pic1.jpg" />
    </div>
    <div class="grid-2">
    <img src="/images/pic2.jpg" />
    </div>
    </div>
    ```
    のような感じにして、

    ```css
    .container {
    displey: flex;
    }
    .grid-1 {
    width: 50px;
    hight: 50px;
    }
    .grid-2 {
    width: 100px;
    hight: 100px;
    }
    ```
    のような感じで地道にデザインを作っていくことしかパッと思いつくものがありません。もし素朴なアルゴリズムに対する説明をもう少ししていただければすごく助かります!!!!

    キャンセル

  • 2018/06/09 13:26

    実は回答にあるアルゴリズムは自分が書きやすい言語という理由でPythonで書いたものです(50行ぐらい)。質問者さんにとってはJavaScriptでsvgを生成するようなものの方が参考にしやすいだろうと思います。もしPythonでもよいならすぐに提示できますが・・・どうしましょう?

    キャンセル

  • 2018/06/09 13:29

    もう作成されていたんですか。。。すごいですね。。!!
    Javascriptしか逆に分からないですが、もうご提示いただけるのであればなんでも構いません!なんとか解読します!!!

    キャンセル

  • 2018/06/09 14:59

    いやもう本当にありがとうございます!!一生懸命、記載いただきましたpythonの記述を解読します!そしてjavascriptで実装して見ます!いや本当にありがとうございます!感謝します!

    キャンセル

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

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

関連した質問

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

  • JavaScript

    15863questions

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

  • HTML

    8635questions

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

  • jQuery

    6520questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5560questions

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

  • jQueryプラグイン

    476questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。