常連

注目の的

自己紹介

### 実現したいこと
Wordpressのテーマを開発し、有料販売する方法を模索しています。
ライセンスをスプリットライセンスにしたいので、アクティベーション機能を搭載して１サイトのみ使用できるようにしたいと考えています。

### 発生している問題・分からないこと
この場合、必要になることは
・管理画面にアクティベーション機能を実装すること
・アクティベーション用の認証サーバーを立てること
というあたりまでは調べたのですが、そのために実際に何が必要になるのか、また、認証部分を請け負ってくれるサービスがあるのかなど、様々な視点で検索していて、なかなかヒットしません。
そこで、もしテーマ販売のご経験がある方がいらっしゃいましたら、必要なコード、プラグイン、サービス等、ご教示いただけると大変助かります。
よろしくお願いいたします。



### 該当のソースコード

```
特になし
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
「Wordpress テーマ販売 アクティベーション サーバー」
「Wordpress テーマ販売 スプリットライセンス」
など、いろんな方法で検索していますが、有用な情報にリーチできていません。

### 補足
特になし

Wordpressのテーマを有料販売する際に必要な認証方法実装について

### 実現したいこと

scroll-marker疑似要素の重なり順が効きません。z-indexが効かないです。

### 前提

・scroll-marker疑似要素には、z軸（とx軸とy軸）にtranslateがかかっており、scroll-marker-group疑似要素にはperspectiveがかかっています。
・もちろん、z-indexを付ける際はpositionをstatic以外にしている。

### 発生している問題
z-indexによる重なり順も、z軸のtranslateも、重なり順に反映されず、scroll-marker疑似要素の親要素の記述順が遅いほど上にくる

### 該当のソースコード

編集して一部抜粋
```HTML
<div class="carousel">
                    <div class="caption">ここにカルーセルがあります</div>
                    <ul class="slide-wrapper" style="--all-carousel-count: 11; --current-carousel-index: 0;">
                        <li class="slide" style="--img: url(../assets/imgs/img.png); --carousel-index: 0;">
                            <dl>
                                <dt>名前</dt>
                                <dd>
                                    <div class="img-container">
                                        <img src="./assets/imgs/img.png" alt="画像の説明">
                                    </div>
                                    <ul>
                                        <li>誕生日…2077/3/18</li>
                                        <li>人種…サイボーグ</li>
                                        <li>性格…やさしい</li>
                                    </ul>
                                </dd>
                            </dl>
                        </li>
                        <li class="slide" style="--img: url(../assets/imgs/img.png); --carousel-index: 1;">
                            <dl>
                                <dt>名前</dt>
                                <dd>
                                    <div class="img-container">
                                        <img src="./assets/imgs/img.png" alt="画像の説明">
                                    </div>
                                    <ul>
                                        <li>誕生日…2077/3/18</li>
                                        <li>人種…サイボーグ</li>
                                        <li>性格…やさしい</li>
                                    </ul>
                                </dd>
                            </dl>
                        </li>
                        <li class="slide" style="--img: url(../assets/imgs/img.png); --carousel-index: 2;">
                            <dl>
                                <dt>名前</dt>
                                <dd>
                                    <div class="img-container">
                                        <img src="./assets/imgs/img.png" alt="画像の説明">
                                    </div>
                                    <ul>
                                        <li>誕生日…2077/3/18</li>
                                        <li>人種…サイボーグ</li>
                                        <li>性格…やさしい</li>
                                    </ul>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </div>
```

```CSS
.carousel {
    overflow: clip;

    >.caption {
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
    }

    .slide-wrapper {
        display: flex;
        overflow-x: scroll;
        overflow-y: clip;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-marker-group: before;

        &::scroll-marker-group {
            position: absolute;
            display: flex;
            height: 5px;
            gap: 1em;
            place-content: center;
        }

        &::scroll-button(right),
        &::scroll-button(left) {
            content: "";
            position: absolute;
            cursor: pointer;
            transition-duration: 0.3s;
        }

        &::-webkit-scrollbar {
            display: none;
        }

        .slide {
            flex-shrink: 0;
            scroll-snap-align: center;
            scroll-snap-stop: always;
            container-type: scroll-state;

            &::scroll-marker {
                content: "";
                background-color: var(--gray);
                border-radius: 50%;
                width: 12px;
                height: 12px;
                border-width: 0;
                border-color: var(--bright-cyan-clay);
                border-style: solid;
                box-sizing: border-box;
                transition-duration: 0.3s;
            }

            &::scroll-marker:target-current {
                border-width: 1px;
                background-color: var(--cyan-clay);
            }
        }
    }
}

.carousel {
            width: 430px;
            margin: auto;

            .slide-wrapper {
                &::scroll-marker-group {
                    bottom: calc(100% - 180px);
                    left: calc(50% + 430px + 90px);
                    translate: -50%;
                    perspective: 200px;
                }

                &::scroll-button(*) {
                    bottom: 123px;
                    width: 80px;
                    height: 60px;
                    background-color: var(--bright-cyan-clay);
                    background-image: url(../assets/imgs/矢印三角白.png);
                    background-position: center;
                    background-repeat: no-repeat;
                    border-radius: 15px;
                }

                &::scroll-button(right) {
                    right: calc(30% - 430px - 90px);
                }

                &::scroll-button(left) {
                    left: calc(30% + 430px + 90px);
                    scale: -1 1;
                }

                &::scroll-button(right):hover {
                    scale: 1.1;
                }

                &::scroll-button(left):hover {
                    scale: -1.1 1.1;
                }

                &::scroll-button(right):active,
                &::scroll-button(left):active {
                    translate: 0 5px;
                }

                &::scroll-button(right):disabled,
                &::scroll-button(left):disabled {
                    background-color: var(--gray);
                }

                .slide {
                    position: relative;
                    width: 430px;
                    height: 630px;

                    &::scroll-marker {
                        position: absolute;
                        top: 0;
                        left: -95px;
                        z-index: calc( var(--all-carousel-count) - abs( var(--current-carousel-index) - var(--carousel-index)));
                        display: block;
                        background-image: var(--img);
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: cover;
                        height: 190px;
                        width: 190px;
                        border-radius: unset;
                        border: 5px solid var(--cyan-clay);
                        background-color: unset;
                        translate: calc(-200px * cos((360deg / var(--all-carousel-count) * (var(--carousel-index) - var(--current-carousel-index))) + 90deg)) calc(150px * cos(360deg / var(--all-carousel-count) * (var(--carousel-index) - var(--current-carousel-index))) - 100px) calc(150px * sin((360deg / var(--all-carousel-count) * (var(--carousel-index) - var(--current-carousel-index))) + 90deg) + -150px);
                    }

                    >dl {
                        >dt {
                            font-size: 24px;
                            text-align: center;
                            position: relative;
                            z-index: 2;
                            width: 418px;
                            padding: 6px 0;
                            margin: 0 auto 16px;
                            background-color: var(--cyan-clay);
                            border-radius: 10px;
                        }

                        dd {
                            font-size: 22px;
                            width: 100%;

                            .img-container {
                                aspect-ratio: 1;
                                width: 400px;
                                margin: 0 auto 20px;
                            }

                            ul {
                                width: 400px;
                                margin: auto;
                                padding-left: 1em;

                                li {
                                    list-style-type: disc;
                                    list-style-position: outside;
                                }
                            }
                        }
                    }
                }
            }
        }
```

### 注釈

すみません　文字数ギリギリなので以下省略します。ご質問ください。JavaScriptもあります。


scroll-marker疑似要素の重なり順を指定したい

## 🖊️テーマ
あなたが「デザインが洗練されている」「UXが直感的で使いやすい」と感じたサービスを教えてください！🎨
デザインの細部にこだわりを感じたもの、ユーザー体験がスムーズだったものなど、理由とともにぜひシェアしてください！

## 👤運営メンバーの回答
運営メンバーが挙げたのは「Notion」です！
シンプルで洗練されたデザインに加えて、ブロックごとの操作性やショートカットの使いやすさなどに加え、データベース機能のUXが特に気に入っているとのこと。データを扱っている感覚が薄く、まるでドキュメントの延長のように自然に使えるそうです。

## 〜teratailトーク!とは？〜
詳細を公式ブログで公開しています。ぜひお読みください。
[「teratailトーク!」スタート🎉　気軽に意見交換しよう！](https://blog.teratail.com/entry/teratail-talk)

デザインやUXが優れたサービスといえば？

業務で要件定義書を作成する予定です。
ざっくり、プロジェクトの概要としては、社内業務の効率化を目的としたBtoB向けのシステムで、ユーザー数は数百名規模、開発体制は5名程度のチームで8〜9ヶ月ほどの開発期間を想定しています。

以下のような点で悩んでおり、皆さまのご意見・知見をいただければと思い投稿いたしました。

1. 要件定義書に記載する機能要件の粒度について
2. 非機能要件はどの程度明文化すべきか
3. 開発ベンダーやチームに共有する際、どこまで詳細に記述すべきか

1について、例えば「ユーザー管理機能」のような大項目にとどめるか、「ユーザーの新規登録、編集、削除」まで細分化すべきかなど。

2について、中小規模のBtoBシステムにおいて、どこまで定義しておくべきか悩んでいます。

3について、どこまでを含めるかの線引きが知りたいです。

実例などもあれば、併せて教えていただけると大変助かります。

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

要件定義書の粒度や記述内容についてのベストプラクティスを知りたい

私はプログラミングの経験はありませんが、SNSでスクレイピングに関する話題を目にすることがあり、その違法性について気になりました。そこで、以下の点について教えていただきたいです。

- スクレイピングとは、「ブラウザで見える情報を自動的に取得する」という理解で合っていますか？
- たとえば、ニュースサイトやECサイトの情報をスクレイピングで収集する行為は、著作権や利用規約に違反する可能性があると感じています。このような行為を安易に行っても問題はないのでしょうか？SNS上でスクレイピングを行ったことを投稿している人を見かけることがありますが、あれは本当に問題ないのでしょうか。もし見つかった場合、罰金や逮捕などの法的なリスクはあるのでしょうか？
- 少し不適切な前提かもしれませんが、仮にスクレイピングを行った場合、サイト運営者に検知されるリスクはあるのでしょうか？技術的にバレなければ実行可能であるようにも思えますが、そうした行為が禁止されていることを理解していても、検知されないのであれば実際に行ってしまう人もいるのではないかと感じています。


一般的なエンジニアとしての視点からご助言いただけますと幸いです。よろしくお願いいたします。

スクレイピングとは何か、違法性について

### 実現したいこと
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-05-09/3367a57e-2fe7-413c-bb36-544397166557.png)

最終的には以下の参考サイトのように３つにわけたスライダーのオブジェクトを重ね合わせて（それぞれ再生スピードを変える）表示したいと考えています。
https://jobs.nealle.com/

### 発生している問題・分からないこと
実現したいことを行うためにまずsplideを使用して、sliderを３つ作成しました。
小要素の画像は、CSSでそれぞれsizeとpositionを指定しました。
３つ目のスライダーは参考サイトのように最終的に一番後ろになる予定で陰っぽくするためblurをかけています。

**スライダーを3つ設置すると、自動スクロールが不安定になります。**
・動きがカクつく
・スピードが一定でなくなる
1つだけなら安定動作しますが、2つ以上になると不安定になります。







### 該当のソースコード

```HTML
            <div class="galley_container">
                <div class="splide" id="random-slider-1">
                    <div class="splide__track">
                        <ul class="splide__list">
                            <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/300x200.png?text=1" class="random-img random-1"></li>
                            <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/250x180.png?text=2" class="random-img random-2"></li>
                            <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/320x220.png?text=3" class="random-img random-3"></li>
                            <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/280x210.png?text=4" class="random-img random-4"></li>
                        </ul>
                    </div>
                </div>
                <div class="splide" id="random-slider-2">
                    <div class="splide__track">
                        <ul class="splide__list">
                            <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/300x200.png?text=1" class="random-img random-1"></li>
                            <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/250x180.png?text=2" class="random-img random-2"></li>
                        </ul>
                    </div>
                </div>
                
                <div class="splide" id="random-slider-3">
                    <div class="splide__track">
                        <ul class="splide__list">
                            <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/300x200.png?text=1" class="random-img random-1"></li>
                            <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/250x180.png?text=2" class="random-img random-2"></li>
                            <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/320x220.png?text=3" class="random-img random-3"></li>
                            <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/280x210.png?text=4" class="random-img random-4"></li>
                        </ul>
                    </div>
                </div>
            </div>
```

```JS
document.addEventListener('DOMContentLoaded', function () {
  const sliders = [
    {
      id: '#random-slider-1',
      options: {
        type: 'loop',
        perPage: 1,
        focus: 'center',
        arrows: false,
        drag: false,
        pagination: false,
        fixedWidth: 420,
        autoScroll: {
          speed: 2,
          pauseOnHover: false,
          pauseOnFocus: false,
        },
      },
    },
    {
      id: '#random-slider-2',
      options: {
        type: 'loop',
        perPage: 1,
        focus: 'center',
        arrows: false,
        pagination: false,
        fixedWidth: 800,
        autoScroll: {
          speed: 1.2,
          pauseOnHover: false,
          pauseOnFocus: false,
        },
      },
    },
    {
      id: '#random-slider-3',
      options: {
        type: 'loop',
        perPage: 1,
        focus: 'center',
        arrows: false,
        pagination: false,
        fixedWidth: 420,
        autoScroll: {
          speed: 1.5,
          pauseOnHover: false,
          pauseOnFocus: false,
        },
      },
    },
  ];

  sliders.forEach(({ id, options }) => {
    const splide = new Splide(id, options);
    splide.mount(window.splide.Extensions);

    const autoScroll = splide.Components?.AutoScroll;
    if (autoScroll) {
      autoScroll.pause = function () {}; // ホバー停止対策（成功）
      autoScroll.play = function () {};
    }
  });
});

```

```CSS
.splide__slide {
    position: relative;
    height: 500px;
    overflow: visible;
}
.random-img {
    position: absolute;
    transition: transform 0.3s, top 0.3s, left 0.3s;
    max-width: 300px;
    height: auto;
    box-shadow: 0px 13px 29px rgba(4, 0, 0, 0.2);
    border-radius: var(--border-radius);
}
.random-1 {
    top: 20%;
    left: 35%;
    transform: scale(1.2);
}
.random-2 {
    top: 50%;
    left: 30%;
    transform: scale(0.9);
}
.random-3 {
    top: 10%;
    left: 20%;
    transform: scale(1.1);
}
.random-4 {
    top: 40%;
    left: 20%;
    transform: scale(1.3);
}
#random-slider-3 .splide__slide img {
    filter: blur(10px); 
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
共通のclass名を使用しているのからか？と思い、それぞれに指定をしてみましたが動きは変わりませんでした。。。。。


#random-slider-1 .random-1 {
    top: 20%;
    left: 35%;
    transform: scale(1.2);
}
#random-slider-1 .random-2 {
    top: 50%;
    left: 30%;
    transform: scale(0.9);
}
#random-slider-1 .random-3 {
    top: 10%;
    left: 20%;
    transform: scale(1.1);
}
#random-slider-1 .random-4 {
    top: 40%;
    left: 20%;
    transform: scale(1.3);
}

#random-slider-2 .random-1 {
    top: 20%;
    left: 35%;
    transform: scale(1.2);
}
#random-slider-2 .random-2 {
    top: 50%;
    left: 30%;
    transform: scale(0.9);
}

#random-slider-3 .random-1 {
    top: 20%;
    left: 35%;
    transform: scale(1.2);
}
#random-slider-3 .random-2 {
    top: 50%;
    left: 30%;
    transform: scale(0.9);
}
#random-slider-3 .random-3 {
    top: 10%;
    left: 20%;
    transform: scale(1.1);
}
#random-slider-3 .random-4 {
    top: 40%;
    left: 20%;
    transform: scale(1.3);
}


### 補足
特になし

【Splide.js】複数スライダーをオートスクロールさせると挙動が不安定になる

### 実現したいこと
data1.csvは以下のようなファイルです。
Time A B C D
0 1 4 7 10
1 2 5 8 11
2 3 6 9 12

[こちら](https://teratail.com/questions/b6bzrtie8lwhzh)の関連質問です。[こちら](https://teratail.com/questions/b6bzrtie8lwhzh)では横軸Time、縦軸Cのグラフの描き方を教えていただきました。data1.csvのTime軸の値が0, 1, 2ということもあって、「該当のソースコード」では、横軸の入力値を特に指定していないように見えます。例えば横軸がA、縦軸がCのときのグラフを描くにはどのようにすれば良いでしょうか。正解は以下のようなグラフとなります。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-05-27/5e17490e-d9bd-4a4b-8c71-8c8e4bd3306d.jpeg)


### 該当のソースコード

```python
import pandas as pd
import numpy as np
import csv
import matplotlib.pyplot as plt

data1 = pd.read_csv("data1.csv")

data1['C'].plot(label='data1', marker='s', markersize=10, color='orange')

plt.xlabel('Time')
plt.ylabel('C')
plt.xlim([0, 2])
plt.ylim([4, 11])
plt.xticks(np.arange(0, 4, 1))
plt.gca().set_aspect(0.2)
plt.grid()
plt.legend(loc='lower right')
plt.tight_layout()
plt.show()
```

### 試したこと
[こちら](https://officekaisuiyoku.com/rplot/)を参考にして、8行目を
```python
plt.plot(x=data1['A'], y=data1['C'],label='data1', marker='s', markersize=10, color='orange')
```
としてみましたが、
TypeError: plot() got an unexpected keyword argument 'x'
となってしまいました。




ファイルを読み込んでxyグラフを描きたい

### 前提・実現したいこと

ワードプレスでcontact form 7を利用し、フォームを作りました。
フォームに送信された内容が投稿の下書きで保存されるようにしました。
保存はされるようになったのですが、カスタムフィールドの画像（5枚）が反映されません。
メディアライブラリに画像は保存されていますが、未添付で記事と連動していない状態です。

ACFで設定している画像のカスタムフィールドは
review_img1
review_img2
review_img3
review_img4
review_img5
です。
contact form 7のファイルアップロード項目も上記と同じにしています。



### 該当のソースコード

//フォーム送信時にブログ投稿をおこなう
function wpcf7_insert_post(){
	//送信情報を取得
	$submission = WPCF7_Submission::get_instance();
	if($submission) {
		$formdata = $submission->get_posted_data();
        $uploaded_files = $submission->uploaded_files();
		$uploaded_files2 = $submission->uploaded_files();
		$uploaded_files3 = $submission->uploaded_files();
		$uploaded_files4 = $submission->uploaded_files();
		$uploaded_files5 = $submission->uploaded_files();
		$new_post = array(
			'post_type' => 'post',
			'post_title' => $formdata['subject'],
			'post_status' => 'draft', //下書き
			'post_content' => $formdata['message']
		);
		//ブログ作成
		$post_id = wp_insert_post($new_post);
		//作成に成功した場合
		if(!is_wp_error($post_id)) {
			//カスタムフィールドのデータも登録する
			add_post_meta($post_id, 'member_id', $formdata['member_id']);
			add_post_meta($post_id, 'item_code', $formdata['item_code']);
			add_post_meta($post_id, 'nickname', $formdata['nickname']);
			add_post_meta($post_id, 'hyoka', $formdata['hyoka']);
			add_post_meta($post_id, 'review_img1', $formdata['review_img1']);
			add_post_meta($post_id, 'review_img2', $formdata['review_img2']);
			add_post_meta($post_id, 'review_img3', $formdata['review_img3']);
			add_post_meta($post_id, 'review_img4', $formdata['review_img4']);
			add_post_meta($post_id, 'review_img5', $formdata['review_img5']);
			add_post_meta($post_id, 'youtube', $formdata['youtube']);

			                /* 画像の設定 */
                if (isset($uploaded_files['review_img1'])) {
                    $thumb_path = '/review/' . str_replace($baseurl, '', $uploaded_files['review_img1']);
                    $thumb_id = addAttachmentFromForm($thumb_path, $uploaded_files['review_img1'], $insertPost, $time);
                    update_field('review_img1', $thumb_id,  $insertPost);
                }
			if (isset($uploaded_files2['review_img2'])) {
                    $thumb_path = '/review/' . str_replace($baseurl, '', $uploaded_files['review_img2']);
                    $thumb_id = addAttachmentFromForm($thumb_path, $uploaded_files['review_img2'], $insertPost, $time);
                    update_field('review_img2', $thumb_id,  $insertPost);
                }
			if (isset($uploaded_files3['review_img3'])) {
                    $thumb_path = '/review/' . str_replace($baseurl, '', $uploaded_files['review_img3']);
                    $thumb_id = addAttachmentFromForm($thumb_path, $uploaded_files['review_img3'], $insertPost, $time);
                    update_field('review_img3', $thumb_id,  $insertPost);
                }
			if (isset($uploaded_files4['review_img4'])) {
                    $thumb_path = '/review/' . str_replace($baseurl, '', $uploaded_files['review_img4']);
                    $thumb_id = addAttachmentFromForm($thumb_path, $uploaded_files['review_img4'], $insertPost, $time);
                    update_field('review_img4', $thumb_id,  $insertPost);
                }
			if (isset($uploaded_files5['review_img5'])) {
                    $thumb_path = '/review/' . str_replace($baseurl, '', $uploaded_files['review_img5']);
                    $thumb_id = addAttachmentFromForm($thumb_path, $uploaded_files['review_img5'], $insertPost, $time);
                    update_field('review_img5', $thumb_id,  $insertPost);
                }

			
		}
	}
}
add_action('wpcf7_mail_sent', 'wpcf7_insert_post', 10, 1);

/* 画像の詳細処理については、別関数を作成しました */
function addAttachmentFromForm($filename, $file_base, $post_id, $time) {
    $layout_img_value = '';

    $filetype = wp_check_filetype( basename( $filename ), null );
    $wp_upload_dir = wp_upload_dir();
    $upfile = $wp_upload_dir['url'] . '/' . $time . basename( $filename );
    $copyfile = $wp_upload_dir['path'] .'/' . $time . basename( $filename );
    copy($file_base, $copyfile);
    $attachment = array(
        'guid'           => $upfile,
        'post_mime_type' => $filetype['type'],
        'post_title'     => preg_replace( '/.[^.]+$/', '', basename( $upfile ) ),
        'post_content'   => '',
        'post_status'    => 'inherit'
    );
    $attach_id = wp_insert_attachment( $attachment, $copyfile, $post_id );
    require_once( ABSPATH . 'wp-admin/includes/image.php' );
    $attach_data = wp_generate_attachment_metadata( $attach_id, $copyfile );
    wp_update_attachment_metadata( $attach_id, $attach_data );

    if($attach_id) return $attach_id;
    else return false;
}

### 試したこと

htmlとcssが専門になり、PHP
などのプログラムは作ることが全くできません。
色々なサイトでそれらしきコードをコピーペーストして試しておりますが、これ以上情報が見つからず、にっちもさっちもいかない状態です。
大変厚かましいお願いで恐縮なのですが、間違っているところ、付けたすべきところをコードを書いて教えて頂けると本当に助かります。
誠にお手数をお掛け致しますが、詳しい方、ご教授いただけますと嬉しいです。よろしくお願い申し上げます。

contact form 7 と記事投稿の連動でACFで作った画像の連動ができないです

###前提・実現したいこと
Cakephp3
default.ctpにてjsファイル読み込み

Pjaxの使い方サイトをいくつかみて試しましたがうまく動きません。
動いた以下のコードは無限読み込みになってしまいます。
```javascript
$(function() {
  $.pjax({
    container : '#pjax-area',
    link : 'a.pjax([target])',
    ajax : { timeout: 2500 }, //Ajaxの設定を記述可能
    wait : 500, //リンクをクリックしてからの待機時間
    load : { script: true } //遷移先のインラインスクリプトを読み込む
  });
});
```
Pjax ver3の方では、無限ループにはなりませんがそもそも動作せず、ページ遷移してしまいます。
```Javascript
  var Pjax = require('pjax-api').Pjax;
  new Pjax({
    link: 'a.pjax',
    areas: [
      '#pjax-area'
    ]
  });
```

わがままですが、このように記述すれば動くというわかりやすい説明が欲しいです。

###発生している問題・エラーメッセージ
読み込みが無限ループする

###試したこと
[Pjaxでスムーズなページ遷移](http://chibinowa.net/note/js/pjax-fragment.html)
[defunkt版 Pjax](http://chibinowa.net/note/js/pjax-fragment-defunkt.html)

ご教示よろしくお願いします。

Pjax 無限ループになる

https://www.crazy.co.jp/

上記サイトは1つ目のコンテンツと2つ目のコンテンツのみフル画面のスムーススクロールにして、そこから下は普通にスクロールになっています。

おそらくjsでマウスのスクロールを制御し、addClassなどしているかと思うのですが、書き方がわかりません。

もしお分かりの方がいらっしゃいましたら、お教えいただけないでしょうか。

ページの途中までフル画面コンテンツのスムーススクロールにしたいです。

# やりたいこと
n件あるデータの中から5つデータを重複なくランダムに取り出したい（ただしn>5）



# 考えていること
ランダムの偏りとPCのメモリ



# 質問
例えば、1000件あるデータから5件をランダムに重複なくデータを取り出したいとき、

1. 一気に配列にデータを読み込んでシャッフルした後、前から5件取り出す
2. `while`ループなどで、配列に5件データが揃うまで回し続け、重複は`array_key_exists`などを用いて弾く

というやり方を考えました。

しかし、1のやり方では、データ数が増えるとともにメモリを圧迫します。
2のやり方のときは、ループの時間を考慮しなければなりません。

今回の場合、データは多いので2のやり方を採用しておりますが、
他に効率の良い考え方/アルゴリズムはありますでしょうか。

ご教示いただけるとうれしいです。


# 閑話
評価-1した人、出てきて理由を説明してください。

【ロジック/PHP】重複なくランダムで値を取り出す方法

ご意見ありがとうございました。
次に進もうと思います。

以下、質問です。
タイトルの通り、「気付けばプロ並PHP」という書籍をおわらせました。次はセキュリティに関して覚えた方がいいと言われたこともあり、「体系的に学ぶ、安全なWebアプリケーションの作り方」（以下徳丸本）も買ってきて少し読みました。
ですが、「気付けばプロ並」のほうはパスワードハッシュなどが現在推奨されないものである事などを指摘されたので、「現行の、セキュリティ面などにおいても適切な」コーディングを知りたいと思いました。
その上で、徳丸本を終わらせたらいわゆる「即戦力
」として仕事ができるのでしょうか？
（仕事になるレベルでの知識が得られるサイトも教えていただけたら嬉しいです)
先ほどはスマホからの投稿なので後から追記しました。
pro_list.php
```
<?php

session_start();
session_regenerate_id(true);
if(isset($_SESSION['login'])==false)
{
print 'ログインされていません<br />';
print '<a href="../staff_login/staff_login.html">ログイン画面へ</a>';
exit();
}
else
{
print $_SESSION['staff_name'];
print 'さんログイン中<br />';
print '<br />';
}?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ろくまる農園</title>
</head>
<body>

<?php

try{
$dsn = 'mysql:dbname=shop;host=localhost;charset=utf8';
$user = 'root';
$password= '';
$dbh = new PDO($dsn,$user,$password);
$dbh -> setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);

$sql = 'SELECT code, name,price FROM mst_product WHERE 1';
$stmt = $dbh->prepare($sql);
$stmt->execute();

$dbh = null;

print '商品一覧<br /><br />';

print '<form method="post" action="pro_branch.php">';
while(true){
  $rec = $stmt -> fetch(PDO::FETCH_ASSOC);
  if($rec==false){
    break;
  }
  print'<input type="radio" name="procode" value="'.$rec['code'].'">';
  print $rec['name'].'---';
  print $rec['price'].'円';
  print'<br />';
}
print '<input type="submit" name="disp" value="参照">';
print '<input type="submit" name="add" value="追加">';
print '<input type="submit" name="edit" value="修正">';
print '<input type="submit" name="delete" value="削除">';

print '</form>';
}


catch(Exception $e){
  print 'ただいま障害発生中です。ご迷惑おかけします。';
  exit();
}

?>

<br />
<a href="../staff_login/staff_top.php">トップメニューへ</a><br />
</body>
</html>
```
staff_branch.php
```
<?php

session_start();
session_regenerate_id(true);
if(isset($_SESSION['login'])==false)
{
print 'ログインされていません<br />';
print '<a href="../staff_login/staff_login.html">ログイン画面へ</a>';
exit();
}
else
{
print $_SESSION['staff_name'];
print 'さんログイン中<br />';
print '<br />';
}?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ろくまる農園</title>
</head>
<body>

<?php

try{
$dsn = 'mysql:dbname=shop;host=localhost;charset=utf8';
$user = 'root';
$password= '';
$dbh = new PDO($dsn,$user,$password);
$dbh -> setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);

$sql = 'SELECT code, name,price FROM mst_product WHERE 1';
$stmt = $dbh->prepare($sql);
$stmt->execute();

$dbh = null;

print '商品一覧<br /><br />';

print '<form method="post" action="pro_branch.php">';
while(true){
  $rec = $stmt -> fetch(PDO::FETCH_ASSOC);
  if($rec==false){
    break;
  }
  print'<input type="radio" name="procode" value="'.$rec['code'].'">';
  print $rec['name'].'---';
  print $rec['price'].'円';
  print'<br />';
}
print '<input type="submit" name="disp" value="参照">';
print '<input type="submit" name="add" value="追加">';
print '<input type="submit" name="edit" value="修正">';
print '<input type="submit" name="delete" value="削除">';

print '</form>';
}


catch(Exception $e){
  print 'ただいま障害発生中です。ご迷惑おかけします。';
  exit();
}

?>

<br />
<a href="../staff_login/staff_top.php">トップメニューへ</a><br />
</body>
</html>

```
pro_add_check.php
```
<?php

session_start();
session_regenerate_id(true);
if(isset($_SESSION['login'])==false)
{
print 'ログインされていません<br />';
print '<a href="../staff_login/staff_login.html">ログイン画面へ</a>';
exit();
}
else
{
print $_SESSION['staff_name'];
print 'さんログイン中<br />';
print '<br />';
}?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ろくまる農園</title>
</head>
<body>

<?php

//if (isset($_POST["name"]) &&
//     isset($_POST["pass"]) &&
//     isset($_POST["pass2"])
// ) {
require_once('../common/common.php');

$post=sanitize($_POST);
    $pro_name = $post["name"];
    $pro_price = $post["price"];
    $pro_gazou = $_FILES["gazou"];



// }
if($pro_name == '' ){
print '商品名が入力されていません<br />';
}
else
{
print '商品名：';
print $pro_name;
print '<br />';
}

if(preg_match('/^[0-9]+$/',$pro_price)==0)
{
print '価格をきちんと入力してください<br />';
}
else
{
  print '価格：';
  print $pro_price;
  print '円<br />';
}

if($pro_gazou['size'] > 0)
{
  if($pro_gazou['size'] > 1000000)
  {
  print '画像が大きすぎます';
}

else
{
    move_uploaded_file($pro_gazou['tmp_name'],'./gazou/'.$pro_gazou['name']);
    print '<img src="./gazou/'.$pro_gazou['name'].'">';
    print '<br />';
}
}




if($pro_name=='' || preg_match('/^[0-9]+$/',$pro_price)==0 ||$pro_gazou['size']>1000000)
{
print '<form>';
print '<input type="button" onclick="history.back()" value="戻る">';
print '</form>';
}

else
{
      print '上記の商品を追加します';
      print '<form method="post" action="pro_add_done.php">';
      print '<input type="hidden" name="name" value="'.$pro_name.'">';
      print '<input type="hidden" name="price" value="'.$pro_price.'">';
      print '<input type="hidden" name="gazou_name" value="'.$pro_gazou['name'].'">';
      print '<br />';
      print '<input type="button" onclick="history.back()" value="戻る">';
      print  '<input type="submit" value="OK">';
      print '</form>';

}



?>

</body>
</html>

```
見直してすぐに疑問だったところ二つのファイルを挙げさせてもらいます。
➀SQLやパスワードのやり取りをする上でこれで安全なのか知りたいです。
➁他のファイルなのですが、使用者側のログイン・会員登録・削除と管理側のページが行き来できる事に危険性はないのか
➂preg_match で、半角英・数字を扱う文の書き方を教えていただきたいです。

気付けばプロ並PHP終了

wordpressの質問です。
１つ条件を指定して、記事一覧をWp_Query()で表示するコードを作っています。カテゴリはX、Yの２つあります。phpファイルはカテゴリが２つあるので、２つあります。

最初Aという条件を指定したとします。
その際にAに適合する、Xの記事数が８、Yの記事数が２だったとします。
また、ページネーションで１ページ当たりに表示できる記事数は５件までとします。記事数を取得する際には$query->found_postsをX、Yの場合で一つのファイルで２回使っています。そのため、wp_queryは一つのファイルで２回使っています。（それぞれのカテゴリの記事数を取得するため。）

ページには
[Xカテゴリの記事数(８)] [Yカテゴリの記事数(２)]と表示されます。

表示する記事についてですが、X、Yとカテゴリ別にすることにします。[Xカテゴリの記事数]をクリックすると、Xカテゴリの記事一覧が出ます。
（ただし[X][Y]という風に[Y]の項目が消えるわけではない。）

それを踏まえて問題があるのですが、
①[Xカテゴリの記事数(10)]をクリックする。
②記事が10あるので、２ページ目までページがある。
③２ページ目に行くと、Xは残り３件あるので、found_postsで
前のページも全件数えるので、10と出る。しかし、Yの場合２件で１ページで収まってしまうため２ページ目が存在しなく、０と表示されてしまう。

２ページ目に来た場合でも１ページ目と同様に全ての件数を表示したいのですが、何かいい方法はないでしょうか。

２ページ目に遷移した際に、表示が０件になってしまう。

###前提・実現したいこと

[https://codepen.io/ksyunnnn/pen/bWPBay](https://codepen.io/ksyunnnn/pen/bWPBay)
このサンプルコードを動作させたいです。
2段目の日付タブの切り替え(Click)ごとに、表示するデータが切り替わるようにしたいです。

**切り替えたい項目**
* Sales
* Event at

現状、なぜか最初の一回のクリックだけ反応して切り替わります。。

**利用ライブラリ**
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

###発生している問題・エラーメッセージ

2回目以降の2段目の日付タブの切り替え(Click)イベントが反応しない

###該当のソースコード

こちらで動作とコードが確認できます。
[https://codepen.io/ksyunnnn/pen/bWPBay](https://codepen.io/ksyunnnn/pen/bWPBay)

※念のためコードも記載します。
```index.html
<div class="container card select">
  <select name="list">
  </select>
</div>
<div class="container card ul">
  <ul></ul>
</div>
<div class="container card table">
  <table>
    <tbody>
      <tr>
        <th rowspan="2">Sales</th>
        <td rowspan="2" class="sales">--</td>
        <th>Title</th>
        <td class="title">--</td>
      </tr>
      <tr>
        <th>Event at</th>
        <td class="event_at">--</td>
      </tr>
    </tbody>
  </table>
</div>
```

```style.scss
.container {
  font-family:游ゴシック;
  max-width:640px;
  margin:0 auto;
  padding:10px 10px;
  font-size:14px;
  a {
    text-decoration: none; 
  }
  &.select ,&.ul{
    min-height:0px;
  }
  li{
    display:inline;
    padding:5px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
    &.active{
      border-bottom:1px solid gray;
    }
    &:hover{
      @extend .card;
    }
  }
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}
th,td{
  width:200px;
  text-align:center;
}
select {
  height:30px;
}
```

```index.js
var data = {
  "events": [
    {
      "id": "0001",
      "title": "Oconomi party",
      "at": "osaka",
      "fee": "3000",
      "status": "open",
      "detail": "This is a party"
    },
    {
      "id": "0002",
      "title": "Asakusa beer bash",
      "at": "tokyo",
      "fee": "5000",
      "status": "open",
      "detail": "This is a party"
    },
    {
      "id": "0003",
      "title": "tebasaki carnival",
      "at": "nagoya",
      "fee": "2000",
      "status": "closed",
      "detail": "This is a party"
    },
    {
      "id": "0004",
      "title": "Maiko dance",
      "at": "kyoto",
      "fee": "100000",
      "status": "open",
      "detail": "This is a party"
    },
    {
      "id": "0005",
      "title": "Mozaic party",
      "at": "hyogo",
      "fee": "8000",
      "status": "closed",
      "detail": "This is a party"
    }
  ],
  "series": [
    {
      "id": "1001",
      "sales": "60000",
      "event_at": "2017/05/30",
      "relating_with_events": "0001"
    },
    {
      "id": "1002",
      "sales": "30000",
      "event_at": "2017/04/12",
      "relating_with_events": "0001"
    },
    {
      "id": "1003",
      "sales": "15000",
      "event_at": "2017/03/21",
      "relating_with_events": "0001"
    },
    {
      "id": "1004",
      "sales": "105000",
      "event_at": "2017/05/30",
      "relating_with_events": "0002"
    },
    {
      "id": "1005",
      "sales": "100000",
      "event_at": "2017/04/12",
      "relating_with_events": "0002"
    },
    {
      "id": "1006",
      "sales": "44000",
      "event_at": "2017/03/21",
      "relating_with_events": "0003"
    },
    {
      "id": "1007",
      "sales": "1000000",
      "event_at": "2017/05/30",
      "relating_with_events": "0004"
    },
    {
      "id": "1008",
      "sales": "192000",
      "event_at": "2017/04/12",
      "relating_with_events": "0005"
    }
  ]
};

function getData(eventId,seriesId){
  // イベント情報
  var events = data.events;

  var eventTitle = data.events.filter(function(item, index){
    if (item.id == eventId) {
      return true;
    }
  });
  // シリーズ情報
  var relating_with_events = eventId;
  var series = data.series.filter(function(item, index) {
    if (item.relating_with_events == relating_with_events) {
      return true;
    }
  });
  // 詳細情報
  var seriesDetail = data.series.filter(function(item, index) {
    if (item.relating_with_events == relating_with_events && item.id == seriesId) {
      return true;
    }
  });

  seriesDetail[0].title = eventTitle[0].title;

  return {events:events,series:series,detail:seriesDetail[0]};
}

function draw( displayData, eventId, seriesId){
  
  // 既にあれば削除
  if ($('div.select select[name=list] option').length) {
    $('div.select select[name=list] option').remove();
  }
  if ($('div.ul ul li').length) {
    $('div.ul ul li').remove();
  }
  
  var events = displayData.events;
  $select = $('div.select select[name=list]');
  for (let k in events) {
    $option = $('<option>', {
      'value': events[k].id
    }).text(events[k].title);
    if (events[k].id=== eventId) $option.prop('selected', 'selected');
    $select.append($option);
  }

  var series = displayData.series;
  $ul = $('div.ul ul');
  for (let k in series) {
    $list = $('<li>',{'data-id':series[k].id}).text(series[k].event_at);
    if (series[k].id=== seriesId) $list.toggleClass("active");
    $ul.append($list);
  }

  $('td.sales').text(displayData.detail.sales);
  $('td.title').text(displayData.detail.title);
  $('td.event_at').text(displayData.detail.event_at);

}

// 取得 & 描画
draw(getData(eventId = "0001",seriesId = "1001"),eventId = "0001",seriesId = "1001");

$tab = $('div.ul ul li');
$select = $('div.select select[name=list]');

$tab.on('click',function(){
  var seriesId = $(this).attr('data-id');
  var eventId = $select.val();
  // 取得 & 描画
  draw(getData(eventId, seriesId),eventId, seriesId);
});
```

どなたか、ご教授くださいませm(__)m

jQuery:タブ切り替えができない(CodePenにコードあります)

こんばんは、セッションストレージからデータを取得してJSON形式にしたいのですが、配列になっている"productid"と"quantity"に複数の値をいれる方法がわかりません。
形としては [{
           "productid": list.productid,
           "quantity": list.quantity
        }, 
        {
           "productid": list.productid,
           "quantity": list.quantity
        }]
配列の中に複数の値を持てるようしたいです。
お力添えいただけるとうれしいです。
```ここに言語を入力
以下セッションストレージ
_________________________________________________________________
cart json
[
    {
        "id": "1", 
        "manufacture": "mont-bell", 
        "price": "10000", 
        "quantity": 2, 
        "title": "パーカー"
    }, 
    {
        "id": "3", 
        "manufacture": "Marmot", 
        "price": "13924", 
        "quantity": 1, 
        "title": "ジャケット"
    }, 
    {
        "id": "4", 
        "manufacture": "THE", 
        "price": "3856", 
        "quantity": 1, 
        "title": "S/S"
    }
]
user json
{
    "user_id": "2", 
    "user_name": "hoge", 
    "user_zip_code": "231-8359"
}
subtotal
37780
以下javascript
____________________________________________________________________
$(document).ready(function() {
    $(document).on('click',"#completion",function(){
      alert("kurikku")
        var user = JSON.parse(sessionStorage.getItem("user"));
        var list = JSON.parse(sessionStorage.getItem("cart"));
        var subtotal = sessionStorage.getItem("subtotal");
          var users = {
                "userid": user.user_id,
                "subtotal": subtotal,
                "products":
                [
                  {
                   "productid": list[i].productid,
                   "quantity": list[i].quantity
                  }
                ]
              }
```

セッションストレージからデータを取得してJSON形式にしたい

###前提・実現したいこと
現在PHPにて会員登録システムを作成しています。
その際にセキュリティについて注意しておくことがわかりませんので質問させていただきます。

XSS対策,SQLInjection対策はしてあります。
他に対策するべき点はありますでしょうか？

よろしくお願いします。

登録システムを作成する際の注意するべきこと

phpとmysqlを使って「次のページ」「前のページ」のリンクだけのページャーを作ろうとしています。

いろいろ考えたり、調べたのですがどうしても理解できないことがあります。

LIMITを使って表示件数を絞ることはできるのですが、ページリンクの作り方がわかりません。

例えば、１００件あるデータのうち、１件目から１０件目を最初の１ページとし、11件目から１ページ１０件でページを表示するためのリンク（ページャー）を作るにはどうしたよいのでしょうか？






たくさんの回答と的確なアドバイスをありがとうございます。
ご指摘頂いた部分を参考に再挑戦してみたいと思いますので、今しばらく未解決のままとさせてください。



ご指摘頂いた内容や自分でも勉強を重ねた結果、なんとかページャーを作ることができました。
回答ありがとうございました！

phpとmysqlでページャーを作る

htdocs/
index.html
js/script.js
data/list.json

上記のような構成で、index.htmlに

```html
		<div class="page_link" id="page_link">
			<ul>
				<li><a href="/page01/page01_07/"><img src="/page01/page01_07/img/thumb.jpg" alt=""><span class="page_name">風立ちぬ</span></a></li>
				<li><a href="/page01/page01_06/"><img src="/page01/page01_06/img/thumb.jpg" alt=""><span class="page_name">吾輩は猫である</span></a></li>
				<li><a href="/page01/page01_05/"><img src="/page01/page01_05/img/thumb.jpg" alt=""><span class="page_name">潮騒</span></a></li>
				<li><a href="/page01/page01_04/"><img src="/page01/page01_04/img/thumb.jpg" alt=""><span class="page_name">こころ</span></a></li>
				<li><a href="/page01/page01_03/"><img src="/page01/page01_03/img/thumb.jpg" alt=""><span class="page_name">阿Q正伝</span></a></li>
				<li><a href="/page01/page01_02/"><img src="/page01/page01_02/img/thumb.jpg" alt=""><span class="page_name">羅生門</span></a></li>
				<li><a href="/page01/page01_01/"><img src="/page01/page01_01/img/thumb.jpg" alt=""><span class="page_name">金閣寺</span></a></li>
				.
				.
				.
			</ul>
		</div>
```
と出力されるように

```json
[
	{
		"state": "new",
		"path": "/page01/page01_07/",
		"img": "/page01/page01_07/img/thumb.jpg",
		"title": "風立ちぬ"
	},
	{
		"state": "",
		"path": "/page01/page01_06/",
		"img": "/page01/page01_06/img/thumb.jpg",
		"title": "吾輩は猫である"
	},
	{
		"state": "",
		"path": "/page01/page01_05/",
		"img": "/page01/page01_05/img/thumb.jpg",
		"title": "潮騒"
	},
	{
		"state": "",
		"path": "/page01/page01_04/",
		"img": "/page01/page01_04/img/thumb.jpg",
		"title": "こころ"
	},
	{
		"state": "",
		"path": "/page01/page01_03/",
		"img": "/page01/page01_03/img/thumb.jpg",
		"title": "阿Q正伝"
	},
	{
		"state": "",
		"path": "/page01/page01_02/",
		"img": "/page01/page01_02/img/thumb.jpg",
		"title": "羅生門"
	},
	{
		"state": "",
		"path": "/page01/page01_01/",
		"img": "/page01/page01_01/img/thumb.jpg",
		"title": "金閣寺"
	}
	.
	.
	.
]
```
とjsonファイルを書いたのですが、肝心のjsファイルの書き方がわかりません。
getJSONやajaxを調べてみたのですが、見た記事が複雑すぎて理解ができませんでした。。。よろしくお願いします。

jsonをよみこんでhtmlを生成したい

これからコーダーとして働くものです、
職業訓練でhtml5は学びましたが、html4とxhtmlの事についてよくわかりません。
特にxhtmlについては調べても何の詳しく書いているところがなく、困っています。
分かる方がいれば教えて頂ければ幸いです。
よろしくお願い致します。

XHTML,HTML4,HTML5の違いについて

宜しくお願い致します。  

javascriptを使っていてふと気になって色々調べたのですが
どうしても納得できない部分がありまして
質問させていただきます。

```
var hoge = "hogehoge"; // a

function foo() { // b
  var piyo = 'piyopiyo' // c
  console.log(piyo); // d
}

foo(); // 正常に動く // e
console.log(piyo); 参照エラー // f
```

とあった場合、
各変数は評価された時点でメモリに割当られるんですよね。
そしてfの時点ではメモリから解放されているんでしょうか。

[参考](https://utage.headwaters.co.jp/blog/?p=1116)ページ
> JavaScriptオブジェクトについては、ガベージコレクタ方式が採用されています。
> ガベージコレクタは以下のタイミングでメモリの開放を行います。

> * 変数に対し、明示的にnullをセットした時
> * 関数の実行終了時

> 上記以外は任意のタイミング(JavaScriptエンジンによっては、ガベージコレク>タを呼出すメソッドが用意されている)

fの地点でエラーになるのはスコープの問題なのかなって気もしますが。

「メモリに変数が割り当てられているかどうか？」
を確認する術はあるのでしょうか？

Chromeの開発ツールを使って検証したのですがいまいちわかりません。
![イメージ説明](30d644cc263ee883deb82704de292c8c.png)

![イメージ説明](841717a622ed6005d95c0cff0128e726.png)

気になってしまって他の業務がストップしてしまって、、、
どなたかご教授いただけませんでしょうか。

どうぞ宜しくお願い致します。