常連

回答者

画像のように、リストの幅に応じて間のmarginを変えたいです。
- リストの全幅が640px以上の時→gap 40px
- リストの全幅が640pxより小さい時→gap 32px
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-20/0fd128a9-e57c-44ee-85c3-c7c130fc9e8c.png)

上記の実装をCSSのみで実現したく、CSSのcontainer queriesを使って試しに実装してみたのですが実現できません。また、今回は画面幅ではなくコンテンツの幅によって出しわけたいです。（よってmedia queryは使わない）
https://codepen.io/reika0717/pen/eYrawqa?editors=1100

```html
<p>640px以下の場合</p>
<ul class="listWrapper">
  <li>aaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li>
</ul>

<p>640pxより長い場合</p>
<ul class="listWrapper">
  <li>aaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li>
  <li>dddddddddddddddddddd</li>
  <li>eeeeeeeeeeeeeee</li>
  <li>fffffffffffffffffff</li>
</ul>
</div>
```

```CSS
.listWrapper {
  container-type: inline-size;
  list-style: none;
  margin: 0;
  padding: 0;
  display: initial;

  li {
    display: inline-block;
    &:not(:first-of-type) {
      margin-left: 40px;
    }
  }
}

@container (max-width: 640px) {
  .listWrapper li:not(:first-of-type) {
      margin-left: 32px;
  }
}
```

上記独力では解決が厳しそうでしたので、実現可否も含めどなたかご教示いただけないでしょうか。


【CSS container queries】コンテンツ幅に応じてコンテンツ間のmarginを変えたい

### 前提・実現したいこと
Facebookのタイムラインをページに埋め込みたいです。
FACEBOOK for Developersで吐き出されるコードを使用してWordpressページにFBのタイムラインを埋め込みましたが、エラーメッセージが表示されてしまいます。
ページ上に表示されるタイムラインそのものは正常なので、エラーが表示されないように修正したいです。
開発環境か、Facebookの設定か、Wordpressのテンプレートか、原因がどこにあるのか見当がつきません。

### 発生している問題・エラーメッセージ

```
Uncaught SyntaxError: Unexpected token ':'
    at a (05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:244)
    at a.c._inlineJS (05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:245)
    at b (05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:245)
    at 6jkSY5CyG40.js?_nc_x=JLcm9u6Wbmh:14
    at Array.forEach (<anonymous>)
    at j (6jkSY5CyG40.js?_nc_x=JLcm9u6Wbmh:14)
    at Object.appendContent (6jkSY5CyG40.js?_nc_x=JLcm9u6Wbmh:14)
    at Object.setContent (6jkSY5CyG40.js?_nc_x=JLcm9u6Wbmh:14)
    at b.<anonymous> (bDeboCcvpGi.js?_nc_x=JLcm9u6Wbmh:38)
    at rg (I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20)
    at gj (I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20)
    at fj (I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20)
    at ej (I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20)
    at Zj (I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20)
    at Yj (I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20)
    at Lj (I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20)
    at Sf (I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20)
    at Gj (I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20)
    at Object.enqueueSetState (I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20)
    at b.a.setState (I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:19)
    at bDeboCcvpGi.js?_nc_x=JLcm9u6Wbmh:38
    at AsyncRequest._dispatchResponse (Ne5x2plvsRz.js?_nc_x=JLcm9u6Wbmh:15)
    at Object.applyWithGuard (05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:57)
    at AsyncRequest.c (05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:57)
    at Ne5x2plvsRz.js?_nc_x=JLcm9u6Wbmh:14
    at e (05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:313)
    at Object.applyWithGuard (05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:57)
    at d (05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:287)
a @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:244
c._inlineJS @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:245
b @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:245
(anonymous) @ 6jkSY5CyG40.js?_nc_x=JLcm9u6Wbmh:14
j @ 6jkSY5CyG40.js?_nc_x=JLcm9u6Wbmh:14
appendContent @ 6jkSY5CyG40.js?_nc_x=JLcm9u6Wbmh:14
setContent @ 6jkSY5CyG40.js?_nc_x=JLcm9u6Wbmh:14
(anonymous) @ bDeboCcvpGi.js?_nc_x=JLcm9u6Wbmh:38
rg @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
gj @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
fj @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
ej @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
Zj @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
Yj @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
Lj @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
Sf @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
Gj @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
enqueueSetState @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
a.setState @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:19
(anonymous) @ bDeboCcvpGi.js?_nc_x=JLcm9u6Wbmh:38
_dispatchResponse @ Ne5x2plvsRz.js?_nc_x=JLcm9u6Wbmh:15
applyWithGuard @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:57
c @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:57
(anonymous) @ Ne5x2plvsRz.js?_nc_x=JLcm9u6Wbmh:14
e @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:313
applyWithGuard @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:57
d @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:287
setTimeout (async)
b @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:311
a @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:313
importDefault.loadResources.onAll @ Ne5x2plvsRz.js?_nc_x=JLcm9u6Wbmh:15
t @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:167
(anonymous) @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:167
applyWithGuard @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:57
c.$6 @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:59
c.satisfyPersistentDependency @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:59
c.notify @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:82
done @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:167
(anonymous) @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:167
(anonymous) @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:167
b @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:287
applyWithGuard @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:57
d @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:287
load (async)
S @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:167
R @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:167
da @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:167
U @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:167
(anonymous) @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:167
P @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:167
loadResources @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:167
invokeResponseHandler @ Ne5x2plvsRz.js?_nc_x=JLcm9u6Wbmh:15
_handleXHRResponse @ Ne5x2plvsRz.js?_nc_x=JLcm9u6Wbmh:15
AsyncRequest._onStateChange @ Ne5x2plvsRz.js?_nc_x=JLcm9u6Wbmh:15
b @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:287
applyWithGuard @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:57
d @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:287
f.last @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:286
transport.onreadystatechange @ Ne5x2plvsRz.js?_nc_x=JLcm9u6Wbmh:15
XMLHttpRequest.send (async)
send @ Ne5x2plvsRz.js?_nc_x=JLcm9u6Wbmh:15
e.$1 @ bDeboCcvpGi.js?_nc_x=JLcm9u6Wbmh:38
e.componentDidMount @ bDeboCcvpGi.js?_nc_x=JLcm9u6Wbmh:38
gj @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
fj @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
ej @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
Zj @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
Yj @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
Lj @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
Sf @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
Nj @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
Ck @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
h.render @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:20
k @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:9
n @ I6bbPmJMDVr.js?_nc_x=JLcm9u6Wbmh:9
(anonymous) @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:208
applyWithGuard @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:57
c @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:57
I @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:44
D @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:44
F @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:44
(anonymous) @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:44
N @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:44
c.$12 @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:208
applyWithGuard @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:57
c.$11 @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:208
(anonymous) @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:208
m @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:208
c.$5 @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:208
c.handle @ 05uLI6yVCc2.js?_nc_x=JLcm9u6Wbmh:208

…（続く）

```

### 該当のソースコード

```JavaScriptSDK
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v11.0" nonce="Z7H6zctd">
</script>
<div class="fb-page" data-href="https://www.facebook.com/xxxxx" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/xxxxx" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/xxxxx">xxxxx</a></blockquote></div>
```
```iframe
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fxxxxx%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=false&hide_cover=false&show_facepile=false&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
```

### 試したこと

JavaScriptSDK、iframeともに試しましたが同じエラーコードが表示されます。
検索するとiframeの方だとエラーが解消したケース、コード内の大文字を小文字に変更して改善するケースがあるようですが、どちらも当てはまりませんでした。

【追記】
著名な企業公式アカウントで試してみましたが、同現象が確認できました。
〇エラー発生せず…スターバックスジャパン（https://www.facebook.com/StarbucksJapan）
×エラー発生…ANAジャパン（https://www.facebook.com/ana.japan）

WordpressにFacebookタイムラインを埋め込むとエラーが出る

### 条件
2 は 1 番目の素数であり,3 は 2 番目,5 は 3 番目,7 は 4 番目の素数である。
k 番目の素数 p に対し,k もまた素数である場合に p を「素数番目の素数」と呼ぶことにする.
例えば,3 と 5 は素数番目の素数であり,2 と 7 はそうではない。
整数 n に対し,素数番目の素数であって,n 以下であるものの和を H(n) と定義する。
この時、H(120097839643)を求めよ。
###考え方
素数番目の素数の数え方として素数を数えるプログラムを利用して3重構造の条件式にすれば、
素数番目の素数が数えられるのではないかと考えました。
ただ、このプログラムでは2つ目のflagが必ず1になってしまいます。
しかも、このプログラムでは値がこの条件のように大きくなると重くなってしまいます。
これらを解決する方法が思いつきません。
分かる方いたら回答をお願いします。（つたないプログラムで申し訳ありません)
### 発生している問題
nを変えても、値がすべて1になってしまいます

### 該当のソースコード

```c
#include <stdio.h>
#include <math.h>

int h(long long int n)
{
  long long int i,j,k,c=1,flag=0;
  for(i=3;i<=n;i++)
  {
      for(j=3;j<=n;j+=2)
      {
          for(k=3;k<=sqrt(j);k+=2)
          {
                 if(j%k==0)
                 {
                 flag=1;
                 break;
		   	  }
          }
        if(flag==0)
        {
       if(i%j==0)
          {
          flag=1;
          break;
          }
       }
     }
      c++;
   }
  return c;
} 

int main(void){
  printf("%d",h(120097839643));
}
```

素数番目の素数を求めるプログラム

Nuxt.jsでnuxt generateコマンドを用いて静的htmlを生成してwebサイトを作成しています。
質問としては生成されたhtmlのパスを見ると、**「/_nuxt」のようにルートパスでcssやimgが読み込まれているものを「./_nuxt」と相対パスにしたいです。**

nuxtの仕様上不可能なのか、設定で可能なのか..ご教授いただきたいです。

ちなみに現状の設定としては、
nuxt.config.jsを本番urlに合わせるために
```config
generate:{
   dir: "dist/hoge"
},
router:{
   base: "/hoge/"
}
```
としています。
routerのデフォルトを指定しなくても「/_nuxt」とルートパスになってしまうのも確認しました。

Nuxt.jsのnuxt generateコマンドで生成されるhtmlについて

### やりたいこと

0. 青枠の領域は動的に変化する
0. 青枠はどんな形式でサイズを指定されるかわからない(20vwだったり100pxだったりする)
0. その青枠のなかの文字を、青枠内で最大になるようにしたい

JavaScriptを使ったトリッキーな方法では長期のメンテが難しくなったり、変則的なレイアウトなどで動かなくなりがちなので、できればCSSだけで行える正攻法な手段があれば知りたいです。

### 理想

![イメージ説明](e3fb9ad414f2e9a600396146a3f7a607.png)

ブロックの縦幅が 20vw なのでそれを font-size に指定すると上の画像のようになるのだけど、縦幅はわからないという前提なので使えません

font-size に親の height を指定する、といった記述ができればいいのだけど。

### 現状

![イメージ説明](24f6eebd2379438c0b69ace0cdd0578a.png)

### 該当のソースコード

```html
<html>
  <head>
    <style>
      .box1 {
        width: 20vw;
        height: 20vw;  /* 仮で20vwとしているが 100px とする場合もある */

        border: 1px solid blue;
        text-align: center;
        line-height: 100%;

        /* 高さが 20vw と知っていればフォントにも同じサイズを指定するとだいたい合うがわからない場合にどうすればよいか */
        /* font-size: 20vw; */
      }
    </style>
  </head>
  <body>
    <div class="box1">A</div>
  </body>
</html>
```

### 試したこと

0. font-size に 100% を指定 → ブロックの縦幅ではなく 1em を指定したのと同じ
0. font-size に -webkit-fill-available を指定 → 変化なし
0. font-size: fit-content(100%) → 変化なし。そもそも fit-content は width とかに指定するもの
0. 画像にする → 下のようにすると領域を埋めてくれるが、フォントで行いたい

```css
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url("path/to/A.png");
```

0. SVGにする → 下のようにすると領域を埋めてくれるが、(文字すべてのSVGを用意するのが大変なので)、フォントで行いたい

```html
<html>
  <head>
    <style>
      .box1 {
        width: 20vw;
        height: 20vw;
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1240.000000 1280.000000" preserveAspectRatio="xMidYMid meet">
        <g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" stroke="none">
          <path d="M5736 12132 c-186 -367 -803 -1578 -1371 -2692 -568 -1114 -1457 -2857 -1975 -3875 -519 -1017 -1269 -2489 -1667 -3269 l-723 -1419 0 -98 c0 -84 2 -98 18 -103 9 -3 235 -54 502 -115 267 -60 863 -196 1325 -301 462 -105 908 -207 992 -226 99 -22 178 -34 225 -34 l73 0 529 1265 529 1265 1942 0 1942 0 538 -1122 c296 -618 569 -1187 606 -1265 l68 -141 38 8 c34 8 2181 475 2823 614 l245 53 3 99 3 100 -299 584 c-165 322 -573 1120 -907 1775 -334 655 -870 1703 -1190 2330 -783 1532 -2116 4142 -2832 5545 -322 630 -648 1268 -725 1418 l-139 272 -117 0 -117 -1 -339 -667z m794 -6012 c216 -476 395 -871 397 -877 4 -10 -160 -13 -801 -13 -443 0 -806 4 -806 8 0 4 23 59 51 122 28 63 201 457 386 875 184 418 340 769 345 779 10 19 11 18 23 -5 7 -13 189 -413 405 -889z"/>
        </g>
      </svg>
    </div>
  </body>
</html>
```

0. JavaScript の fitty を使ってみる → 挙動がおかしい＆不安定

```html
<html>
  <head>
    <script src="/tmp/fitty.min.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', () => fitty(".text"))
    </script>
    <style>
      body {
        line-height: 100%;
      }
      .box1 {
        width: 20vw;
        height: 20vw;
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <div class="box1"><span class="text">A</span></div>
  </body>
</html>
```

![イメージ説明](cf4f47db32f308bffbe29dc85f53ad1a.png)

GitHub では issue が溜っていてあまりメンテされていない様子でした

### ブラウザ

Google Chrome を利用しています

CSSでブロックの中を埋めるような形でフォントを最大化する方法があれば教えてください

Unity 3Dで彫刻ゲームのようなものを作成しています。

オブジェクト同士の当たり判定をしたところのBoolean演算で、石のようなものの表面を道具で削っていく表現を試みています。

この際表層を削るという表現は出来たのですが（第一層目はmeshとcolliderが完璧に一致するため）、削っていくことでmeshはdeformできても、mesh colliderは原型の石の外形を保っているために、「奥に削っていく」という表現ができません。

石の削られる部分だけを抽出して、その部位のみのmesh colliderのconvexをonにした状態で削っていくことを試み、colliderが変化していくことを期待したのですが、例えば削られるオブジェクトの真ん中をくり抜いてもcolliderは外表面に張られるだけで、やはりcolliderは変化しません。

meshをdeformしていくことでmesh colliderもmeshと同じように変化していくような表現はスクリプトやアセット等で可能でしょうか。

10/10追記
mesh collider deformationで検索しますと海外サイトでも同様の質問をされている方が複数見つかりました。

ブーリアン演算処理をした後に、

 Mesh myMesh = this.GetComponent<MeshFilter>().mesh;
DestroyImmediate(this.GetComponent<MeshCollider>());
var collider = this.AddComponent<MeshCollider>();
collider.sharedMesh = myMesh;

を実行するようなスクリプトを書けばうまくいくのでしょうか。。
石オブジェクトにそのままアタッチするだけでは、演算処理の前に自分のコライダーをデストロイしてしまうようで、compileがうまくいきませんでした。
演算を行うスクリプトの後に、GameObject.Findで石を呼び出し、colliderのコンポーネントを改めてデストロイする、というのが次の案で試行錯誤中です。。

unity 3D, mesh collider の凹み表現

お世話になっております。
vue.jsで
・リロード時(リロードボタンやF5)
・ページ遷移時

に特定の動作を行いたいと考えております。
・ページ遷移時
は「beforeDestroy」で大丈夫でしたが
・リロード時
は動作しませんでした。
どのライフサイクルにすればよいかをわかる方いらっしゃいましたらお願いします。

vue.jsでリロード時に行いたい操作はどのライフサイクルに記載すればよいか？

Unityで山を壊すことをしたいです。

例えば、山に大砲が撃ち込まれて変形するみたいな感じにしたいですが、透明化する方法など様々試しましたが解決しません。

当たったら変形し、自動的にコライダーが変化するように最終的にはしたいです。![イメージはこんな感じです。](02714110142b7474fb4a87efdfeedd2c.png)

Unityで当たったら形を変える

JSONデータでオブジェクトの中にある配列のカウント方法がわかりません。

下記のJSONデータで、followの中にあるlike_flagの数が各ユーザ事に何個あるか表示をさせたいのですが、followの中のlike_flagのカウント方法がわかりません。

```ここに言語を入力
      var data = [
        {
          id: 23,
          name: "太郎",
          follow: [
            {
              id: 1,
              like_flag: 1,
            },
            {
              id: 5,
              like_flag: 1,
            },
            {
              id: 15,
              like_flag: 1,
            },
          ],
        },
        {
          id: 21,
          name: "次郎",
          follow: [
            {
              id: 2,
              like_flag: 1,
            },
            {
              id: 6,
              like_flag: 1,
            },
          ],
        },
        {
          id: 20,
          name: "三郎",
          follow: [
            {
              id: 7,
              like_flag: 1,
            },
          ],
        },
      ];

```

**試したこと**

下記のように考えたのですが、うまくlike_flagの数のカウントができませんでした。

```ここに言語を入力
for (var i = 0; i < data.length; i++) {
    var newData = [];
    for (var i = 0; i < data.follow.length; i++) {
      newData.push(i + 1);
    }
  console.log(data[i].name + ':' + newData);
}
```


**期待をする処理**
太郎：3
次郎：2
三郎：1

JSONデータでオブジェクトの中にある配列のカウント方法がわからない

### 前提・実現したいこと

Unityで個人でゲーム開発を行っています。
実現したいことは
アニメーションでTextMeshProの文字列を時間単位で、
違う文字列に変更したいです。
AnimationウィンドウのAddPropertyを選択しても
「color」等はあるのです「text」の選択項目が無いので困っています。

お手数ですが、よろしくお願い致します。

### 補足情報（FW/ツールのバージョンなど）

Unity Version 2019.4.0f1 Personal

Unity　文字列のアニメーションで文字列の変更はできますか？

# 質問概要
unityにはdestroyというgameobjectを消去する関数があります。
しかし、その方法だとgameobject単位でブロックであればブロックが消えると思います。
自分が実現したいことは、ブロック１があったときにブロック２と重なった部分を
（ブロック１∩ブロック２）に当たる部分のブロック１の範囲を消去したいです。

# 追記
[【Unityシェーダ入門】オブジェクトが重なった部分をくり抜く](http://nn-hokuson.hatenablog.com/entry/2017/06/01/220504)
のところにあったものだと不自然なくり抜かれ方でイメージと少し違いました。

イメージとしてはメッシュを組みなおして重なっていない部分のみのオブジェクトを生成すればいいのかなと思うのですが、
自分の知識とプログラミングの力では
メッシュの組み方も難しいと感じているのでご教授お願いします。

unityでgameobjectを部分的に消去したい

### 前提・実現したいこと
Nuxt.js＋vuetifyでプロジェクトを作成し、作成後の状態でgenerateしたものをfirebaseにdeployしましたが、
ボタンを押したときの波うつアニメーションなどが適用されなくなり、また、
v-modelを使用しての簡単なデータバインディング等も反映されなくなってしまいました
以下確認したことです
* yarn devよる確認時では正常に動作していたため、ソース側の問題ではなさそう
* distに作成されるindex.htmlを直接参照しても同様の問題が発生したためfirebaseへのデプロイそのものに問題は無さそう

### 環境及びプロジェクト作成過程
macでもwin10でも同様の問題が発生しました

```bash
$ firebase --version
8.6.0

$ yarn --version
1.22.4
```
```bash
$ yarn create nuxt-app hoge
yarn create v1.22.4
[1/4] ????  Resolving packages...
[2/4] ????  Fetching packages...
[3/4] ????  Linking dependencies...
[4/4] ????  Building fresh packages...
success Installed "create-nuxt-app@3.2.0" with binaries:
      - create-nuxt-app

create-nuxt-app v3.2.0
✨  Generating Nuxt.js project in hoge
? Project name: hoge
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
```
```bash
$ cd hoge/

$ firebase init

You're about to initialize a Firebase project in this directory:

  /hoge

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: hoge (hoge)
i  Using project hoge (hoge)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? No
✔  Wrote dist/404.html
✔  Wrote dist/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

```
```bash
$ yarn generate
$ firebase deploy
```

ホスティングされたURLを確認するとヘッダーの各ボタンは存在しておりますが、クリックしても何も反応がありませんでした

関係しているかわかりませんが、デバッガーコンソールのエラーは以下です
```
https://hoge.web.app/_nuxt/node_modules/commons.hoge.js net::ERR_ABORTED 404
```

Nuxt.jsアプリをgenerateするとデータバインディングが切れる

宜しくお願い致します。

AWSに登録後、無料枠の８５％が使用されました、というメールが来ました。
無料枠の料金の内容を確認したいのですが、現在AWSにログインして、
コンソールに移動しても、様々なエラーが表示される為、内容を確認する事が出来ません。

現在、AWSに関しては何もしていない状態なのですが、
料金が発生してしまう、と思いますと不安でなりません。

AWSのサポートを受ける方法も、色々、試しましたが分かりませんでした。
ですので、今回の内容をAWSのサポート担当の方に、
ご相談出来る方法を教えて頂きたいと思います。

困っていますので、何とか助けて頂けませんでしょうか。
お手数ですが、宜しくお願い致します。

AWSの無料枠について

条件式で変数Xの値がAまたはB、またはCでなおかつ変数Yの値が１か２の時Trueになる条件を書く場合に

```JavaScript
if (x === A || x === B || (x === C && (y === 1 || y === 2))) {
  console.log("OK");
} else {
  console.log("NG");
}
```

上記の式を書いてみたのですがifの条件がぱっと見わかりにくい気がします。
複数条件のときにいつも思うのですが、どうすればわかりやすい||式がかけるのでしょうか。

あなたなりのコツを教えてください。
速度改善などの観点でもよいです。

これでOKという意見でもよいです。

JSのif分条件式で複数条件の場合の書き方

ご質問を見て下さりありがとうございます。

GoogleMapAPIの「Places API」等の１回データを取得する際のリクエスト数が知りたいです。

GoogleCloudPlatformでGoogleMapAPIを使用してプログラムを一人で作成してテスト等しているのですが、「Geocoding API」や「Distance Matrix API」や「Places API」の30日分のリクエスト数が多いのですが、１回データを取得するごとに１リクエストと数えられるのではないのですか？
GoogleMapAPI毎のリクエスト数の基準などが記載されているところがありましたら教えて頂きたいです。
また、「Geocoding API」や「Distance Matrix API」や「Places API」等のリクエスト数や料金を節約する方法があれば教えて頂きたいです。

よろしくお願い致します。

GoogleMapAPIの「Places API」等の１回データを取得する際のリクエスト数が知りたいです。

現在以下のようなルールのパズルゲームを制作中です。(C#)
- 縦10マス × 横10マスのフィールドがある（2次元配列で管理）
- 数字がかかれたブロックを１つずつフィールドに設置していく
- 設置したブロックから上下左右につながったブロックの数値を再帰的に合計し、合計10になるブロックを消す

#やりたいこと
フィールド上の数値をチェックし、合計10になる組み合わせを探す。
この時に、2次元配列の縦横のインデックス(位置)のリストを、組み合わせ毎に取得したい。
組み合わせ毎に取得したい理由は、「この組み合わせで10ができた！」という表示を個別に分けてしたいため。

#例
フィールドが以下のような場合

||[0]|[1]|[2]|[3]|[4]|
|--|--|:--:|--:|
|[0]||||||
|[1]| |1| |4| |
|[2]| |2|3|3||
|[3]| | |5|1| |
|[4]| | | | | |
|[5]| | | | | |

得たい結果はインデックスを(x,y)と表現すると、
```ここに言語を入力
{(1,1) (1,2) (2,2) (3,2) (3,3)}
{(1,2) (2,2) (2,3)}
{(2,2) (3,2) (3,1)}

```
という、10ができる組み合わせ毎のインデックスリストを得たいです。

ぷよぷよのアルゴリズムような再帰関数での取得を考えましたが
インデックスの組み合わせを考えると上手く実装できません。
良いアルゴリズムはありますでしょうか。
実装例も合わせて提示していただけると助かります。

[パズル]2次元配列に格納された数値、上下左右を探索し合計が10になる組み合わせを探したい

### 前提・実現したいこと
スマホサイト上での埋め込みの画像を正しく表したい

現在とある店舗のホームページを作成しております。
AWSにてデプロイまで完了しております。
PC上では問題なく表示されるのですが、スマホ（iphone)上では高さがうまく表示できずものすごく縦長の画像になってしまいます。

### 発生している問題・エラーメッセージ
PCスクリーンショット
![![PCスクリーンショット](989272214083ef26b9619d431d0baa98.png)](5b82a1265bf1a9b64fd49b17dc8a81de.png)

スマホスクリーンショット
![スマホのスクリーンショット](d03adadf0bb3b173f18349ae634e091a.png)




### 該当のソースコード

```haml

  .main_contents
    .menu_gallery
      %h4 ギャラリー

      %a{:href => 'https://www.picuki.com/tag/%E4%B8%80%E3%82%84%E3%81%AE%E3%81%94%E3%81%AF%E3%82%93'}
        .menu 
          = image_tag 'pic/shopexit', width: '50%'
          = image_tag 'pic/shopin', width: '50%'
          
      %a{:href => 'https://www.instagram.com/explore/tags/%E4%B8%80%E3%82%84%E3%81%AE%E3%81%94%E3%81%AF%E3%82%93/'}
        .menu
          = image_tag 'pic/meet2', width: '20%'
          = image_tag 'pic/meet3', width: '20%'
          = image_tag 'pic/fish', width: '20%'
          = image_tag 'pic/toufu', width: '20%'
          = image_tag 'pic/toufu2', width: '20%'

      .menu
        %a{:href => 'https://www.picuki.com/tag/%E4%B8%80%E3%82%84%E3%81%AE%E3%81%94%E3%81%AF%E3%82%93', id: "button"}
          ＞＞もっと詳しく見る
```
```scss

    .menu{
      height: 100%;
      display: flex;
      #button{
        margin: 20px auto;
        text-align: center;
        text-decoration: none;
      }
      a:visited{
        color: #FFB6C1;
      }

    }
```

### 試したこと
heightの仕方に問題があると考えております。
（widthは問題ないため)

heightに100%やautoなどを記載してみましたが変化ありませんでした。
スマホサイト用のページの記載の仕方を検索してみて@media only screenも試してみましたがうまくいきませんでした。

HTMLにwidth記載でPCとスマホ両方’％’で適応されているのでheightに'%'適応でできそうな手応えなのですが値の設定が上手くいっていないのか反映されません。
どなたかご教授お願いいたします。

[方法相談]Railsのjpgがスマホサイトのみ伸びてしまう

Nuxt.jsでwebアプリを構築しています。

firestoreのデータをNuxtプロジェクトのcomputedで取得し、画面に表示したいのですが
現状何も表示されません。
特にエラーも表示されません。

```
▼pages/index.js

<template>
  <div id="Content">
    <div v-for="item in items" :key="item.id">
      <Item :item="item" />
    </div>
  </div>
</template>

<script>
import firebase from '~/plugins/firebase'
import Item from '~/components/Item.vue'

export default {
  components: {
    Item
  },
  computed: {
    items () {
      const db = firebase.firestore()
      const itemArray = []
      db.collection('items').get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          itemArray.push(doc.data())
        })
        console.log(itemArray)  //consoleにはforestoreから取得した値が表示されている
        return itemArray
      })
    }
  }
}
</script>
```
↑computedの最後で、firestoreから取得した配列をreturnしているのですが、どうもここに値が入っていないようです。（その直前のconsoleではきちんと値が出力される）
```
▼components/Item.vue

<template>
  <div>
    <p>{{ item.image }}</p>
    <p>{{ item.tag }}</p>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: null
    }
  }
}
</script>
```
何が間違っているのか分からないため、ご教示いただけますと幸いです。

【Nuxt.js】computedで取得したfirestoreのデータをv-forで表示したい

### 前提・実現したいこと

VScodeでコーディングしているのですが，不必要な問題の赤の波線が出てくるのをどうにかしたいです。例えば，pythonで import cv2 としようとすると，VScodeにcv2が対応していないのか，
unable to import 'cv2'
と出て，赤の波線が表示されてしまいます。
実際にこれを実行すると問題なく実行できるので，このような不必要な問題の赤の波線を消したいです。
このような場合はどうすればよいのでしょうか？