【pictSQUARE+pictSPACE店舗利用時】外部サイトリンクでアクセスエラーを出さないためのhtmlタグ設定方法

サークル参加者様より
「『pictSPACE店舗』よりPixivやTwitterなど外部サイトへのリンクを設定したが、pictSQUARE会場から外部リンク先に飛ぼうとするとアクセスエラーとなり会場から退出せざるを得なくなってしまう」
というお問い合わせがありました。

結論から言うと、リンクの貼り方（htmlタグ）に誤りがあったのですが、これは同じことで困っている人がいるかもしれないとひとまず文章で対応を解説します。（画像を作った方が分かりやすいとは思うのですが時間が取れずすみません💦）

1.『pictSPACE店舗』に外部サイトへのリンクを記述する際は『別ウインドウで開く』指示が必ず必要です。

 なお、告知Twitterで案内していた「プロフカードにリンクを書く」設定の場合は『別ウインドウで開く』記述は不要です（理由は後述します）。
（以降、別ウインドウ＝別窓と表記）

『pictSPACE店舗』で外部リンクを貼れる場所は以下の通りです。
◆店舗管理⇒店舗設定⇒「店舗の注意事項など」
　会場内でサークルカットをクリックした際に開くお品書き画像の下に表示されるテキスト。htmlタグを用いた外部URLリンクを記載可能
◆店舗管理⇒頒布物管理⇒各頒布物⇒「説明文」
　文字通り、頒布物の説明文にhtmlタグを用いた外部URLリンクを記載可能

『pictSPACE店舗』に外部リンクを記載したい場合は、以下のように記述して下さい。（【】内はご自身で適切なものに置き換えて下さい）

<a href="【外部サイトURL】" target="_blank" rel="noopener noreferrer">【表示したい文字列】</a>

補足：別窓で開く指示は「target="_blank"」の部分です。本来はこれだけでも動作はするのですが「a href=」タグには脆弱性があるらしく、補うために「rel="noopener noreferrer"」を追加しています。
興味があったらWeb検索などで調べてみて下さい。

この「target="_blank"」が書き込まれていない場合に来場者がURLをクリック or タップすると『アクセスエラー』となり、ブラウザの「閉じる」か「戻る」ボタンを押すしかなくなってしまいます。当然、その方は会場から退出せざるを得なくなってしまいますので『別窓で開く』記述は必ず行い、サークル主は事前入場できちんと自店舗から外部サイトへのリンクが動作するかを確認しておきましょう。

2.『pictSPACE店舗』だけ『別ウインドウで開く』指示が必要な理由

　（こちらは特に読まなくても大丈夫です、興味がある方だけどうぞ）

pictSQUAREでは仕様として『ブラウザ上でイベント会場ウインドウと同一ウインドウで開けるURLをpictSPACEに限定』しています。

　サークル参加者は店舗設定の【出展区分】で「pictSPACE店舗（赤い本）」または「その他の通販サイト（水晶玉）」を選択しますが、来店者がリンクオブジェクトをクリックした際の「開く」動作は以下のように自動設定されています。

　①赤い本（pictSPACE）⇒会場と同じウインドウで開く
　②水晶玉（外部サイト）⇒会場とは別のウインドウで開く

◆『お品書き』に表示されるURLに別窓設定が必要な理由
　サークルカットをクリックした際に表示される『お品書き』のテキスト部分に記載された外部リンクを開こうとする場合は、上記動作の①②のどちらにも当てはまりません。つまり、ブラウザとしては『別窓で開く』指示が書き込まれていなければpictSQUARE会場を表示しているウインドウと同じウインドウで外部リンク先を開こうとします。しかし仕様によりその操作は許可されていないのでエラーが出てしまい処理不能となります。

◆『pictSPACE店舗』内に記載する外部URLに別窓設定が必要な理由
　pictSPACE店舗を利用している場合「赤い本」をクリックすると動作①の通り自動的にpictSQUARE会場を表示しているウインドウと同じウインドウでpictSPACE店舗が開かれている状態となります。
　ここまでならなんの問題もないのですが、この「会場と同一ウインドウでpictSPACEが開かれている状態」から頒布物説明などに記載された『外部リンク』にアクセスする場合、ブラウザは『別窓で開く』指示が書き込まれていなければそのまま同じウインドウで外部リンク先を開こうとします。こちらも仕様によりその操作は許可されていないのでエラーとなってしまいます。

3.【出店区分】を「その他の通販サイト」にする場合は『別窓で開く』設定は不要

　【出店区分】を「その他の通販サイト（水晶玉）」に設定し【通販サイトURL】に1つだけ外部URLを指定した場合は、動作②となり水晶玉をクリックした際には既に指定した外部サイトが別窓で開いている状態となります。
　よって、指定した外部サイト（プロフカードやプライベッター等々）に複数の外部リンクURLが記載されていても、それらに『別窓で開く』指示が書き込まれていなくても、そもそもpictSQUARE会場とは別窓で開かれているのでエラーが出て強制退出するということにはなりません。

　以上、外部サイトへリンクを貼る際の注意事項となります。素人なので、文章内に誤りなどありましたらご指摘いただければ助かります。
宜しくお願い致します。

『跳ねの良い踏み台』主催／ 鈴太（りんた）