下記のようなjsonから値を取り出す際の方法。<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> nameがkantoである先頭の要素を取得したい場合はfindを使用すると便利。<pre><code>const kanto = json.japan.find((v) =&gt; v.name == "kanto");

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

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

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

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

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

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

linux + apache2.4.43でのSSL設置

不動産サイト制作などでたまに使用するjsonです。地方と都道府県で親子になっています。 <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>

# json

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

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