<p>下記のようなjsonから値を取り出す際の方法。</p><pre><code>"japan": [{
      "code": 1,
      "name": "hokkaido",
       "ja": "北海道",
       "type": "region",
      },
    {
      "code": 2,
      "name": "tohoku",
      "ja": "東北",
      "type": "region",
    },
    {
      "code": 3,
      "name": "kanto",
      "ja": "関東",
      "type": "region",
     }
   ]
}</code></pre><p><br>nameがkantoである先頭の要素を取得したい場合はfindを使用すると便利。</p><pre><code>const kanto = json.japan.find((v) =&gt; v.name == "kanto");

console.log(kanto.ja) // 関東</code></pre><p><br>typeがregionである要素を全て取得したい場合はfilterを使う</p><pre><code>const regions = json.japan.filter(function(item, index){
  if (item.type == "region" ) return true;
});

console.log(regions) // [{},{}...] 配列で取得できる</code></pre><p><br></p>

JSON配列から要素の値を検索して取得する

<p>サイドバーでposition:stickyを使いたいときに適切に指定してみても効かなくて小一時間悩みました。<br>結論から言うと原因はリセットCSSで使用しているress.scssでした。<br><br>判明するまでの解決方法を整理します。<br></p><h2 id="h12f2b5955b">1. stickyコンテナーは適切な高さを持っているか</h2><p>stickyコンテナーはstickyを指定した直の親です。以下の場合は.containerが親です。</p><pre><code>&lt;div class="container style="display: flex;"&gt;
&lt;div class="main"&gt;
&lt;/div&gt;
&lt;div class="side" style="position: sticky; top: 0;"&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre><p><br>上記の例の場合、display: flexで.mainと.sideが横並びになっているので、.containerの高さと.sideの高さは同一となりstickyは動作しません。以下の場合だと動作します。</p><pre><code>&lt;div class="container style="display: flex;"&gt;
&lt;div class="main" style="height: 1000px;"&gt;
&lt;/div&gt;
&lt;div class="side" style="position: sticky; top: 0; height: 100px"&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre><p><br>この場合は.containerが.mainと同一のheight1000px、.sideは.containerよりも低いheight: 100pxとなるためstickyが動作します。<br></p><h2 id="h34c251af52">2. 親にvisible以外のoverflow属性が指定されてないか</h2><p>sticky要素の親にoverflow: visible以外の指定(hidden, scroll等)がある場合に不能になります。<br><br>今回自分の原因はこれでした。リセットCSSでress.cssを使用していてその中にoverflow-y: scrollがあったことによるものでした。</p><pre><code>html {
  box-sizing: border-box;
  overflow-y: scroll; /* All browsers without overlaying scrollbars  ←これが原因 */
  -webkit-text-size-adjust: 100%; /* iOS 8+ */
}</code></pre><p><br>コメントアウトして無事動作確認。<br></p><h3 id="h64ae03923e">overflow:visible以外が存在するかチェックする方法</h3><p>jQueryを使用していれば開発者コンソールで以下を入力して動作チェックできます。</p><pre><code>$(".sticky要素").parents().css("overflow", "visible")</code></pre><p><br>親要素全てがoverflow:visibleとなるので、入力した後stickyが動作していればどこかの親にoverflow: visible以外の指定がされていることがわかります。</p>

position: stickyが効かない場合に確認すること。リセットCSSにも注意

<h2 id="hdbc740ce5c">証明書のインストール</h2><p>発行通知メールから証明書ダウンロード<br>中間証明書ダウンロード<br>クロスルートなし、中間CA証明書<br><img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/8eab4835aa804792a62b431d75da1a75/_2020-11-03_18.07.44.png" alt=""><br></p><h2 id="h890f3b5eb6">証明書と中間証明書をダウンロード</h2><p>証明書と中間証明書を結合<br>半角文字等入る場合があるので注意<br></p><h2 id="ha2e7ca0ea2">結合証明書と秘密鍵をサーバーにアップロード</h2><p>/etc/httpd/sslフォルダに置く<br><strong>秘密鍵のパスフレーズを解除する</strong><br><code>openssl rsa -in xxxxxxx.key -out xxxxxxx.key</code><br>/etc/httpd/conf.d/ssl.confで新しい結合証明書、秘密鍵のパスを指定<br><code>httpd -t</code><br>で文法的に問題ないかチェック</p><pre><code>service httpd stop
service httpd start</code></pre><p>ブラウザで期限をチェック</p>

linux + apache2.4.43でのSSL設置

<p>携わるプロジェクトによって変わることはありますが、自分メインで制作しているWebサイトやアプリケーションの場合、どのようにフォルダを整理し、画像ファイルに対して命名を行っているかをまとめました。</p><h2 id="hcb9dacb773"><br><strong>結論</strong></h2><p>以下のような命名規則にしています。各要素をアンダーバーで繋げて1つのファイル名としています。<br><br><strong>assets/img/[ページ名]/[セクション・役割]_[用途]</strong><strong><em>_</em></strong><strong>[連番]_[状態].[拡張子]</strong><br><br><strong>連番、状態に関しては任意の要素ですので、必ずすべての要素を揃えて命名しなくてはいけないというわけではありません。</strong><br><br>例</p><pre><code>assets/img/ 
  - common
    - logo.svg
    - logo_white.svg
    - icon.png
    - ogp.png
    - button_icon.jpg
  - page
    - top
      - hero_img_01.jpg
      - intro_img_bg_01.jpg
      - about_icon_bg_01.jpg
      - about_icon_bg_02.jpg
      - company_logo.jpg
      - service_banner_pc.jpg
      - service_banner_sp.jpg
    - about
      - hero_img.jpg
      - hero_bg.jpg
    ︙</code></pre><p><br>それぞれの要素に対して説明します。<br></p><h2 id="h266c7119cf">[ページ名]</h2><p>ex: <strong>common, top, about, contact</strong><br>ロゴやアイコン、ファビコンなど、プロジェクト全体で繰り返し使用される画像に関してはcommonフォルダにまとめて入れています。<br>それ以外の、特定のページでしか使用されない画像はページごとのフォルダに格納します。<br><br></p><h2 id="h94808cf55c">[セクション・役割]</h2><p>ex: <strong>hero, overview, about,  </strong><strong style="background-color:#ffffff">global-nav</strong><br>画像が使用されるページ内のセクションや、ボタンなどのパーツの名前にします。<br>commonフォルダの場合はない場合もあります。<br></p><h2 id="h0be0440830">[用途]</h2><p>ex: <strong>heading, banner, icon, text, button, img</strong><br>その画像がどのように使用されるか、 用途を示す名前にします。<br></p><h3 id="h0761798bef">heading</h3><p>見出しに使用される画像（テキストのsvgが多い）</p><h3 id="he4c27c1250">button</h3><p>buttonタグやaタグで使用される画像など</p><h3 id="hb9d4c8b67a">banner</h3><p>バナー画像に使います。buttonとの違いですが、bannerは単独である程度の情報を持っている画像、といったニュアンスで使います。</p><h3 id="h6ba1f58027">icon</h3><p>アイコン。svgが多い</p><h3 id="h7124f9ff90">logo</h3><p>企業や商品のロゴに対して使用します</p><h3 id="hc19f4d1f77">text </h3><p>heading以外の文字情報に対して使用します。</p><h3 id="hfac2d4674a">bg</h3><p>セクションに対しての背景画像などに使用。場合によっては他の用途と併用する場合もあります。<span style="background-color:#ffffff">global-nav_</span>icon_bgなど</p><h3 id="h2a50a6d828">img</h3><p>上記どれにも当てはまらない場合、こちらを使用します。<br></p><h2 id="h5903f8b28f">[連番]</h2><p>ex: <strong>01, 02, 03…99</strong><br>数字の連番を二桁で01から1ずつカウントアップします。ファイル名の最初から「用途」までの文言が同一のもので続いた場合に連番をカウントアップします。作成当時は一つしかないと分かっていても、後々の運用で二つ目が発生する可能性もあるので、基本は連番を付けるようにしますが、明らかに連番で管理しない要件では省略も可能です。<br></p><h2 id="hc1c1898c7d">[状態]</h2><p>ex: <strong>hover, disabled, selected, active, white</strong><br>画像の状態を示す名前。BEMにおけるModifier的な、状態変化がある場合に使用します。<br><br><br></p>

携わるプロジェクトによって変わることはありますが、自分メインで制作しているWebサイトやアプリケーションの場合、どのようにフォルダを整理し、画像ファイルに対して命名を行っているかをまとめました。

WebサイトやWebアプリケーションの画像ファイル命名規則

<pre><code>&lt;h1&gt;h1大見出し大見出し大見出し大見出し&lt;/h1&gt;
&lt;h2&gt;h2大見出し大見出し大見出し大見出し&lt;/h2&gt;
&lt;h3&gt;h3大見出し大見出し大見出し大見出し&lt;/h3&gt;
&lt;h4&gt;h4大見出し大見出し大見出し大見出し&lt;/h4&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。


&lt;a href="https://google.com"&gt;リンクのテキストです。&lt;/a&gt;


&lt;strong&gt;太字です。&lt;/strong&gt;


&lt;em&gt;イタリックです。&lt;/em&gt;


&lt;del&gt;取り消し線です。&lt;/del&gt;


&lt;hr /&gt;


&lt;ul&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&lt;/ul&gt;
&lt;ol&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&lt;/ol&gt;
&lt;blockquote&gt;この文章は引用です。文字の大きさ、量、字間、行間等を確認するために入れています。この文章は引用です。文字の大きさ、量、字間、行間等を確認するために入れています。この文章は引用です。文字の大きさ、量、字間、行間等を確認するために入れています。この文章は引用です。文字の大きさ、量、字間、行間等を確認するために入れています。&lt;/blockquote&gt;
&lt;p style="text-align: left;"&gt;この文章は左揃えです。文字の大きさ、量、字間、行間等を確認するために入れています。&lt;/p&gt;
&lt;p style="text-align: center;"&gt;この文章は中央揃えです。文字の大きさ、量、字間、行間等を確認するために入れています。&lt;/p&gt;
&lt;p style="text-align: right;"&gt;この文章は右揃えです。文字の大きさ、量、字間、行間等を確認するために入れています。&lt;/p&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
&lt;h1&gt;h1大見出し大見出し大見出し大見出し&lt;/h1&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
&lt;h2&gt;h2大見出し大見出し大見出し大見出し&lt;/h2&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
&lt;h3&gt;h3大見出し大見出し大見出し大見出し&lt;/h3&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
&lt;h4&gt;h4大見出し大見出し大見出し大見出し&lt;/h4&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</code></pre>

【WordPressコピペ用】投稿のダミーテキスト

<p>不動産サイト制作などでたまに使用するjsonです。地方と都道府県で親子になっています。<br></p><pre><code>{
  "region": [{
      "code": 1,
      "name": "hokkaido",
      "ja": "北海道",
      "pref": [{
        "code": 1,
        "name": "hokkaido",
        "ja": "北海道"
      }]
    },
    {
      "code": 2,
      "name": "tohoku",
      "ja": "東北",
      "pref": [{
          "code": 2,
          "name": "aomori",
          "ja": "青森県"
        },
        {
          "code": 3,
          "name": "iwate",
          "ja": "岩手県"
        },
        {
          "code": 4,
          "name": "miyagi",
          "ja": "宮城県"
        },
        {
          "code": 5,
          "name": "akita",
          "ja": "秋田県"
        },
        {
          "code": 6,
          "name": "yamagata",
          "ja": "山形県"
        },
        {
          "code": 7,
          "name": "fukushima",
          "ja": "福島県"
        }
      ]
    },
    {
      "code": 3,
      "name": "kanto",
      "ja": "関東",
      "pref": [{
          "code": 8,
          "name": "ibaraki",
          "ja": "茨城県"
        },
        {
          "code": 9,
          "name": "tochigi",
          "ja": "栃木県"
        },
        {
          "code": 10,
          "name": "gunma",
          "ja": "群馬県"
        },
        {
          "code": 11,
          "name": "saitama",
          "ja": "埼玉県"
        },
        {
          "code": 12,
          "name": "chiba",
          "ja": "千葉県"
        },
        {
          "code": 13,
          "name": "tokyo",
          "ja": "東京都"
        },
        {
          "code": 14,
          "name": "kanagawa",
          "ja": "神奈川県"
        }
      ]
    },
    {
      "code": 4,
      "name": "koshinetsu",
      "ja": "甲信越",
      "pref": [{
          "code": 15,
          "name": "nigata",
          "ja": "新潟県"
        },
        {
          "code": 19,
          "name": "yamanashi",
          "ja": "山梨県"
        },
        {
          "code": 20,
          "name": "nagano",
          "ja": "長野県"
        }
      ]
    },
    {
      "code": 5,
      "name": "tokai",
      "ja": "東海",
      "pref": [{
          "code": 21,
          "name": "gifu",
          "ja": "岐阜県"
        },
        {
          "code": 22,
          "name": "shizuoka",
          "ja": "静岡県"
        },
        {
          "code": 23,
          "name": "aichi",
          "ja": "愛知県"
        },
        {
          "code": 24,
          "name": "mie",
          "ja": "三重県"
        }
      ]
    },
    {
      "code": 6,
      "name": "hokuriku",
      "ja": "北陸",
      "pref": [{
          "code": 16,
          "name": "toyama",
          "ja": "富山県"
        },
        {
          "code": 17,
          "name": "ishikawa",
          "ja": "石川県"
        },
        {
          "code": 18,
          "name": "fukui",
          "ja": "福井県"
        }
      ]
    },
    {
      "code": 7,
      "name": "kansai",
      "ja": "関西",
      "pref": [{
          "code": 25,
          "name": "shiga",
          "ja": "滋賀県"
        },
        {
          "code": 26,
          "name": "kyoto",
          "ja": "京都府"
        },
        {
          "code": 27,
          "name": "osaka",
          "ja": "大阪府"
        },
        {
          "code": 28,
          "name": "hyogo",
          "ja": "兵庫県"
        },
        {
          "code": 29,
          "name": "nara",
          "ja": "奈良県"
        },
        {
          "code": 30,
          "name": "wakayama",
          "ja": "和歌山県"
        }
      ]
    },
    {
      "code": 8,
      "name": "chugoku",
      "ja": "中国",
      "pref": [{
          "code": 31,
          "name": "tottori",
          "ja": "鳥取県"
        },
        {
          "code": 32,
          "name": "shimane",
          "ja": "島根県"
        },
        {
          "code": 33,
          "name": "okayama",
          "ja": "岡山県"
        },
        {
          "code": 34,
          "name": "hiroshima",
          "ja": "広島県"
        },
        {
          "code": 35,
          "name": "yamaguchi",
          "ja": "山口県"
        }
      ]
    },
    {
      "code": 9,
      "name": "shikoku",
      "ja": "四国",
      "pref": [{
          "code": 36,
          "name": "tokushima",
          "ja": "徳島県"
        },
        {
          "code": 37,
          "name": "kagawa",
          "ja": "香川県"
        },
        {
          "code": 38,
          "name": "ehime",
          "ja": "愛媛県"
        },
        {
          "code": 39,
          "name": "kochi",
          "ja": "高知県"
        }
      ]
    },
    {
      "code": 10,
      "name": "kyushu",
      "ja": "九州",
      "pref": [{
          "code": 40,
          "name": "fukuoka",
          "ja": "福岡県"
        },
        {
          "code": 41,
          "name": "saga",
          "ja": "佐賀県"
        },
        {
          "code": 42,
          "name": "nagasaki",
          "ja": "長崎県"
        },
        {
          "code": 43,
          "name": "kumamoto",
          "ja": "熊本県"
        },
        {
          "code": 44,
          "name": "oita",
          "ja": "大分県"
        },
        {
          "code": 45,
          "name": "miyazaki",
          "ja": "宮崎県"
        },
        {
          "code": 46,
          "name": "kagoshima",
          "ja": "鹿児島県"
        }
      ]
    },
    {
      "code": 11,
      "name": "okinawa",
      "ja": "沖縄",
      "pref": [{
        "code": 47,
        "name": "okinawa",
        "ja": "沖縄県"
      }]
    }
  ]
}


</code></pre>

# cheat sheet

WebサイトやWebアプリケーションの画像ファイル命名規則

【WordPressコピペ用】投稿のダミーテキスト

地方と都道府県のjsonデータ