[{"data":1,"prerenderedAt":2676},["ShallowReactive",2],{"category-ministack-3":3},{"count":4,"content":5},29,[6,491,668,1771,1912,2003,2099,2207,2318],{"id":7,"title":8,"body":9,"category":478,"createdAt":480,"description":8,"extension":481,"index":482,"meta":483,"navigation":55,"path":484,"publish":55,"seo":485,"series":482,"seriesTitle":482,"stem":486,"tag":487,"thumbnail":489,"updatedAt":482,"__hash__":490},"articles\u002Farticles\u002Fbootstrap-vue-asset-save.md","bootstrap-vue,iconのバンドルを減らす。開発時に気をつけたいbootstrap-vueの使い方",{"type":10,"value":11,"toc":468},"minimark",[12,16,19,23,26,69,72,75,86,134,141,148,281,288,292,302,394,397,400,407,436,443,447,450,453,461,464],[13,14,15],"p",{},"こんにちはjunです。Nuxt.js or Vue.js x Bootstrap-vue の構成を使って管理画面UIを作成する機会が多く、それらの融合性や使いやすさに虜になっています。しかしやけにビルドの時間がかかるなーと思っていたら、なんとバンドルサイズが1MBを超いたという事実に気付き、慌てて対処しました。（他のライブラリもあります）",[13,17,18],{},"今回はそのbootstrap-vueを使ったアプリのバンドルサイズを減らす方法として、開発時から気をつけたいことについて述べます。",[20,21,22],"h2",{"id":22},"そのままいれるな",[13,24,25],{},"ドキュメントの最初の方にある通り、bootstrap-vueとboo-strap-iconを以下のようにいれるとかなりサイズを食います。",[27,28,33],"pre",{"className":29,"code":30,"language":31,"meta":32,"style":32},"language-javascript shiki shiki-themes material-theme-ocean","import Vue from 'vue'\nimport { BootstrapVue, IconsPlugin } from 'bootstrap-vue';\n\nVue.use(BootstrapVue);\nVue.use(IconsPlugin);\n","javascript","",[34,35,36,44,50,57,63],"code",{"__ignoreMap":32},[37,38,41],"span",{"class":39,"line":40},"line",1,[37,42,43],{},"import Vue from 'vue'\n",[37,45,47],{"class":39,"line":46},2,[37,48,49],{},"import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';\n",[37,51,53],{"class":39,"line":52},3,[37,54,56],{"emptyLinePlaceholder":55},true,"\n",[37,58,60],{"class":39,"line":59},4,[37,61,62],{},"Vue.use(BootstrapVue);\n",[37,64,66],{"class":39,"line":65},5,[37,67,68],{},"Vue.use(IconsPlugin);\n",[13,70,71],{},"理由はnode_modulesのBootstrap-vueの全てを入れているためです。別に全てのbootstrapモジュールを使用しているならば問題ありませんが、基本的にそんな状況はないと思います。importでモジュールを読み込む時は原則、必要なものだけインポートして置くことがベストです。それを意識するだけでも自然とバンドルサイズが小さくなります。",[20,73,74],{"id":74},"必要なものだけ指定する",[13,76,77,78,85],{},"やり方は",[79,80,84],"a",{"href":81,"rel":82},"https:\u002F\u002Fbootstrap-vue.org\u002Fdocs#vue-cli-3",[83],"nofollow","公式ドキュメント","にもありますが、必要なコンポーネントだけ使用する場合は以下のようにします。",[27,87,90],{"className":29,"code":88,"filename":89,"language":31,"meta":32,"style":32},"import {  \n    BButton,BSpinner,BTable,BAlert\n} from 'bootstrap-vue';\n\nVue.component('b-button',BButton);\nVue.component('b-spinner',BSpinner);\nVue.component('b-table',BTable);\nVue.component('b-alert',BAlert);\n","parent.js",[34,91,92,97,102,107,111,116,122,128],{"__ignoreMap":32},[37,93,94],{"class":39,"line":40},[37,95,96],{},"import {  \n",[37,98,99],{"class":39,"line":46},[37,100,101],{},"    BButton,BSpinner,BTable,BAlert\n",[37,103,104],{"class":39,"line":52},[37,105,106],{},"} from 'bootstrap-vue';\n",[37,108,109],{"class":39,"line":59},[37,110,56],{"emptyLinePlaceholder":55},[37,112,113],{"class":39,"line":65},[37,114,115],{},"Vue.component('b-button',BButton);\n",[37,117,119],{"class":39,"line":118},6,[37,120,121],{},"Vue.component('b-spinner',BSpinner);\n",[37,123,125],{"class":39,"line":124},7,[37,126,127],{},"Vue.component('b-table',BTable);\n",[37,129,131],{"class":39,"line":130},8,[37,132,133],{},"Vue.component('b-alert',BAlert);\n",[13,135,136,137,140],{},"上記はapp.jsのような元締めのファイルでグローバルコンポーネントとして登録する場合です。こうすれば配下のファイルで",[34,138,139],{},"\u003Cb-badge>\u003C\u002Fb-badge>","という風に使用できます。",[13,142,143,144,147],{},"グローバルでなく、局所的に単体のvueファイルで使用したい場合は",[34,145,146],{},"Vue.component()","でなく、そのvueファイルにいて以下のようにします。",[27,149,154],{"className":150,"code":151,"filename":152,"language":153,"meta":32,"style":32},"language-vue shiki shiki-themes material-theme-ocean","\u003Ctemplate>\n  \u003CBButton variant=\"danger\">Clikc\u003C\u002FBButton>\n\u003C\u002Ftemplate>\n\nimport { BButton } from 'bootstrap-vue';\n\u003Cscript>\nexport default{\n  components:{\n    BButton\n  }\n}\n\u003C\u002Fscript>\n","child.vue","vue",[34,155,156,169,207,215,219,224,233,245,254,260,266,272],{"__ignoreMap":32},[37,157,158,162,166],{"class":39,"line":40},[37,159,161],{"class":160},"sAklC","\u003C",[37,163,165],{"class":164},"s-wAU","template",[37,167,168],{"class":160},">\n",[37,170,171,174,177,181,184,187,191,193,196,200,203,205],{"class":39,"line":46},[37,172,173],{"class":160},"  \u003C",[37,175,176],{"class":164},"BButton",[37,178,180],{"class":179},"sJ14y"," variant",[37,182,183],{"class":160},"=",[37,185,186],{"class":160},"\"",[37,188,190],{"class":189},"sfyAc","danger",[37,192,186],{"class":160},[37,194,195],{"class":160},">",[37,197,199],{"class":198},"s0W1g","Clikc",[37,201,202],{"class":160},"\u003C\u002F",[37,204,176],{"class":164},[37,206,168],{"class":160},[37,208,209,211,213],{"class":39,"line":52},[37,210,202],{"class":160},[37,212,165],{"class":164},[37,214,168],{"class":160},[37,216,217],{"class":39,"line":59},[37,218,56],{"emptyLinePlaceholder":55},[37,220,221],{"class":39,"line":65},[37,222,223],{"class":198},"import { BButton } from 'bootstrap-vue';\n",[37,225,226,228,231],{"class":39,"line":118},[37,227,161],{"class":160},[37,229,230],{"class":164},"script",[37,232,168],{"class":160},[37,234,235,238,242],{"class":39,"line":124},[37,236,237],{"class":179},"export",[37,239,241],{"class":240},"s6cf3"," default",[37,243,244],{"class":160},"{\n",[37,246,247,251],{"class":39,"line":130},[37,248,250],{"class":249},"s5Dmg","  components",[37,252,253],{"class":160},":{\n",[37,255,257],{"class":39,"line":256},9,[37,258,259],{"class":198},"    BButton\n",[37,261,263],{"class":39,"line":262},10,[37,264,265],{"class":160},"  }\n",[37,267,269],{"class":39,"line":268},11,[37,270,271],{"class":160},"}\n",[37,273,275,277,279],{"class":39,"line":274},12,[37,276,202],{"class":160},[37,278,230],{"class":164},[37,280,168],{"class":160},[13,282,283,284,287],{},"グローバルでやっていたものを",[34,285,286],{},"components","配下で入れてあげるだけです。",[289,290,291],"h3",{"id":291},"アイコンも同様",[13,293,294,295,298,299,301],{},"アイコンが豊富な故にサイズも大きいです。",[34,296,297],{},"Vue.use(IconsPlugin);","とすると全てのアイコンがインポートされるので、これも以下のように",[34,300,286],{},"で使用します。",[27,303,305],{"className":150,"code":304,"language":153,"meta":32,"style":32},"\u003Ctemplate>\n  \u003CBIconXCircleFill variant=\"danger\">\n\u003C\u002Ftemplate>\n\nimport { BIconXCircleFill } from 'bootstrap-vue';\n\u003Cscript>\nexport default{\n  components:{\n    BIconXCircleFill\n  }\n}\n\u003C\u002Fscript>\n",[34,306,307,315,334,342,346,351,359,367,373,378,382,386],{"__ignoreMap":32},[37,308,309,311,313],{"class":39,"line":40},[37,310,161],{"class":160},[37,312,165],{"class":164},[37,314,168],{"class":160},[37,316,317,319,322,324,326,328,330,332],{"class":39,"line":46},[37,318,173],{"class":160},[37,320,321],{"class":164},"BIconXCircleFill",[37,323,180],{"class":179},[37,325,183],{"class":160},[37,327,186],{"class":160},[37,329,190],{"class":189},[37,331,186],{"class":160},[37,333,168],{"class":160},[37,335,336,338,340],{"class":39,"line":52},[37,337,202],{"class":160},[37,339,165],{"class":164},[37,341,168],{"class":160},[37,343,344],{"class":39,"line":59},[37,345,56],{"emptyLinePlaceholder":55},[37,347,348],{"class":39,"line":65},[37,349,350],{"class":198},"import { BIconXCircleFill } from 'bootstrap-vue';\n",[37,352,353,355,357],{"class":39,"line":118},[37,354,161],{"class":160},[37,356,230],{"class":164},[37,358,168],{"class":160},[37,360,361,363,365],{"class":39,"line":124},[37,362,237],{"class":179},[37,364,241],{"class":240},[37,366,244],{"class":160},[37,368,369,371],{"class":39,"line":130},[37,370,250],{"class":249},[37,372,253],{"class":160},[37,374,375],{"class":39,"line":256},[37,376,377],{"class":198},"    BIconXCircleFill\n",[37,379,380],{"class":39,"line":262},[37,381,265],{"class":160},[37,383,384],{"class":39,"line":268},[37,385,271],{"class":160},[37,387,388,390,392],{"class":39,"line":274},[37,389,202],{"class":160},[37,391,230],{"class":164},[37,393,168],{"class":160},[13,395,396],{},"アイコンはグローバルに登録するよりも、必要になったら都度入れとく方がいいです。",[20,398,399],{"id":399},"適宜必要なモジュールを入れる",[13,401,402,403,406],{},"BadgeやButtonは上記のような",[34,404,405],{},"Vue.commponent","で十分ですが、ModalやCollapseは追加のプラグインなどが必要です。例えばModalは以下のモジュールをセットしておく必要があります。",[27,408,410],{"className":29,"code":409,"language":31,"meta":32,"style":32},"import { BModal,VBModal,ModalPlugin } from 'bootstrap-vue';\n\nVue.use(ModalPlugin);\nVue.component('b-modal',BModal);\nVue.directive('b-modal', VBModal)\n",[34,411,412,417,421,426,431],{"__ignoreMap":32},[37,413,414],{"class":39,"line":40},[37,415,416],{},"import { BModal,VBModal,ModalPlugin } from 'bootstrap-vue';\n",[37,418,419],{"class":39,"line":46},[37,420,56],{"emptyLinePlaceholder":55},[37,422,423],{"class":39,"line":52},[37,424,425],{},"Vue.use(ModalPlugin);\n",[37,427,428],{"class":39,"line":59},[37,429,430],{},"Vue.component('b-modal',BModal);\n",[37,432,433],{"class":39,"line":65},[37,434,435],{},"Vue.directive('b-modal', VBModal)\n",[13,437,438,439,442],{},"こうすることでModalのコンポーネントや",[34,440,441],{},"this.$bvModal.show('select-file-modal');","のようなディレクティブや動きを実装できます。",[289,444,446],{"id":445},"どこにかいてある","どこにかいてある？",[13,448,449],{},"それぞのコンポーネントのドキュメントの最後の方にある、Component referenceにあります。さらにいうとその下のImporting individual componentsに詳しく、依存関係が書いてあるのでその通りにインポートしてあげましょう。",[20,451,452],{"id":452},"開発時初期から個別インポートを考える",[13,454,455,456,460],{},"もしこれに気づかず後から単体読み込みにしようと思ったら大変なことになります。 ",[457,458,459],"strong",{},"必要なコンポーネントの洗い出しとそのチェックが必要になるからです。"," ファイル検索でなんとからならくもないですが、後からの修正はかなり大変です。",[13,462,463],{},"であれば最初から個別のインポートで行っていくほうが、必要になった時にエラーで教えてくれるので対処がしやすいです。端末の性能や通信速度が上がっているとはいえ、まだ1Mを超えるのは気が引けます。塵も積もれば山となる精神で不要なインポートは避けましょう。",[465,466,467],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}",{"title":32,"searchDepth":52,"depth":52,"links":469},[470,471,474,477],{"id":22,"depth":46,"text":22},{"id":74,"depth":46,"text":74,"children":472},[473],{"id":291,"depth":52,"text":291},{"id":399,"depth":46,"text":399,"children":475},[476],{"id":445,"depth":52,"text":446},{"id":452,"depth":46,"text":452},[479],"ministack","2021-03-29","md",null,{},"\u002Farticles\u002Fbootstrap-vue-asset-save",{"title":8,"description":8},"articles\u002Fbootstrap-vue-asset-save",[488,153],"css","_mix\u002Fsch-2021-03-29-22.48.45.png","eqyqBM0LwYz49ZyHXkO-fsX2wiHR3pqkEe-fvzvZ4Hg",{"id":492,"title":493,"body":494,"category":658,"createdAt":659,"description":493,"extension":481,"index":482,"meta":660,"navigation":55,"path":661,"publish":55,"seo":662,"series":482,"seriesTitle":482,"stem":663,"tag":664,"thumbnail":482,"updatedAt":482,"__hash__":667},"articles\u002Farticles\u002Fssh-on-xserver.md","XserverでSSH接続を行い、ターミナルで操作する",{"type":10,"value":495,"toc":651},[496,499,502,506,514,517,522,525,528,531,534,537,541,544,547,555,562,568,575,585,591,594,600,613,623,626,629,635,638,642,645,648],[13,497,498],{},"こんにちはJunです。vagrant、Docker、VPSなどを構築しているとわかりますが、レンタルサーバーは手軽に構築できて便利です。エンジニア的には自由に環境を構築できた方がいろんなアプリを作ることができますが、ブログ程度であればXserverで十分です。",[13,500,501],{},"DBや細かい設定もGUIで完結できる様になっているので初心者にはもってこいです。しかし私が別で構築しているブログを今管理しているXserverに移行する時、画像やDBが膨大すぎて手動・GUIでは移行に限界がありました。そのためSSHを使用してXserverに繋いてで操作することにしました。今回はその忘備録です。",[20,503,505],{"id":504},"sshを有効にする","SSHを有効にする",[13,507,508,509,513],{},"「SSHとはなんぞや？」という人は",[79,510,512],{"href":511},"\u002Farticles\u002Fconnect-with-scp-ssh","こちらの記事","でわかりやすく説明したものがあるのでご覧ください。",[13,515,516],{},"最初にXserverでSSH接続を有効にする必要があります。Xserverサーバーパネルにログインして、「SSH設定」という箇所のページを開きます。",[518,519],"image-render",{":src":520,":width":521},"'_mix\u002Fsch-2021-01-11-14.59.00.png'","'100%'",[13,523,524],{},"そこで「変更」をONにして「設定する」をクリック。しますとSSHが有効になります。",[20,526,527],{"id":527},"秘密鍵を生成する",[13,529,530],{},"SSHは鍵交換という方法を用いてサーバーへのログインを管理しています。自身のPCからXserverのサーバーへアクセスするには鍵を発行します。「公開鍵認証用鍵ペアの生成」をクリックします。以下の画面が表示されるので、「パスフレーズ」（パスワードの様なもの）を入れて「確認画面」へ進みます。",[518,532],{":src":533,":width":521},"'_mix\u002Fsch-2021-01-11-17.43.09.png'",[13,535,536],{},"確認が終了すると~~~.keyという拡張子のファイルがダウンロードされます。このファイルは鍵ファイルといい、サーバーの中にアクセスする際に使用されます。",[20,538,540],{"id":539},"sshの設定をする","SSHの設定をする",[13,542,543],{},"ここからはローカル（自分のPC）の話になります。SSHでアクセスするために、ローカルでのSSH設定を行います。またローカルにはsshdがあり、今回はMacOSターミナルでの操作を前提としています。",[13,545,546],{},"ターミナルを立ち上げ、ひとまずホームディレクトリに移動し、さらにDownloadsへ移動し、先ほどダウンロードしたkeyファイルを見つけます。",[27,548,553],{"className":549,"code":551,"language":552},[550],"language-text","jun@MacBook-Pro % cd ~\njun@MacBook-Pro ~ % cd downloads\njun@MacBook-Pro downloads % ls\n...\nserver.key\n...\n","text",[34,554,551],{"__ignoreMap":32},[13,556,557,558,561],{},"keyファイルをひとまずホームディレクトリ配下にある",[34,559,560],{},".ssh\u002F","へ移動させます。",[27,563,566],{"className":564,"code":565,"language":552},[550],"jun@MacBook-Pro downloads % mv server.key ~\u002F.ssh\u002F\n",[34,567,565],{"__ignoreMap":32},[569,570,574],"div",{"className":571},[572,573],"alert","alert-info","\nTIPS:\nsshdがある環境ではユーザーごとに.sshというディレクトリが与えられ、そこで個人のssh設定を行います。しかし.sshは隠しファイルなので、ホームディレクトリでlsをしても普通には出てきません。ls -a とすることで隠しファイルを含めて表示させると、.sshというディレクトリを確認できます。\n",[13,576,577,580,581,584],{},[34,578,579],{},".ssh","に移動してkeyを確認。そして権限を変更します。権限を変更しないと ",[34,582,583],{},"WARNING: UNPROTECTED PRIVATE KEY FILE!"," と怒られます。",[27,586,589],{"className":587,"code":588,"language":552},[550],"jun@MacBook-Pro .ssh % ls\nconfig      server.key\n\njun@MacBook-Pro .ssh % chmod 400 server.key\n",[34,590,588],{"__ignoreMap":32},[13,592,593],{},"これでOKです。lsをした時にconfigというファイルがあったと思います。そのファイルにsshの設定が記述されていますので、以下の様に編集をします。",[27,595,598],{"className":596,"code":597,"language":552},[550],"jun@MacBook-Pro .ssh % vi config\n\nHost my-site\n HostName svExample.xserver.jp\n Port 10022\n user idName\n IdentitiesOnly yes\n IdentityFile \u002FUsers\u002Fjunjiishii\u002F.ssh\u002Fserver.key\n",[34,599,597],{"__ignoreMap":32},[13,601,602,605,606,609,610,612],{},[34,603,604],{},"HostName","はxserverのホスト名を入力し。",[34,607,608],{},"user","にはサーバーIDを入力します。",[34,611,604],{},"はxserverのサーバーパネルの「サーバー情報」、サーバーIDは「パスワード変更」で確認できます。",[13,614,615,618,619,622],{},[34,616,617],{},"config","で設定しておくとsshコマンドを打つ時、Hostの名前でつまり、",[34,620,621],{},"ssh my-site"," とするだけで設定した値の接続先にsshしてくれます。",[20,624,625],{"id":625},"xserverへsshをする",[13,627,628],{},"それではsshを行ってみます。",[27,630,633],{"className":631,"code":632,"language":552},[550],"ssh my-site\nEnter passphrase for key '\u002FUsers\u002Fjun\u002F.ssh\u002Fjunji1996.key': ＃設定したパースフレーズを入力\n\n#もし、以下の文章が表示されたら yesをおす\nECDSA key fingerprint is SHA256:V0GmZVuUlP6tQw5MYbGelfcq+IQwq\u002F6+HnH1OPAcaLo.\nAre you sure you want to continue connecting (yes\u002Fno\u002F[fingerprint])? yes\n\n[idName@svExample ~]$\n",[34,634,632],{"__ignoreMap":32},[13,636,637],{},"ターミナルの表記がとなればxserverへ入れて、その中を操作していることを示しており、ログイン成功です。以上がxserverへssh接続する方法です。",[20,639,641],{"id":640},"sshは何がいいの","SSHは何がいいの？",[13,643,644],{},"以上がxserverでSSHを行う手順です。",[13,646,647],{},"基本的にレンタルサーバーでwordpressを使ってブログを書くぐらいならFTP程度で十分であり、SSHを使うこともないと思います。しかし膨大な量のデータを移行したり、phpmyadmin（データベースの操作ができる）で出力・挿入不可なほどのデータベース移行をする際にはコマンドで打てる環境があるとやりやすいです。",[13,649,650],{},"また鍵交換方式は鍵ファイルさえ流出しなければ不正にサーバーに侵入されるリスクがパスワード方式よりも低いです。",{"title":32,"searchDepth":52,"depth":52,"links":652},[653,654,655,656,657],{"id":504,"depth":46,"text":505},{"id":527,"depth":46,"text":527},{"id":539,"depth":46,"text":540},{"id":625,"depth":46,"text":625},{"id":640,"depth":46,"text":641},[479],"2021-01-11",{},"\u002Farticles\u002Fssh-on-xserver",{"title":493,"description":493},"articles\u002Fssh-on-xserver",[665,666],"network","infrastructure","rRtfurJyt2-gDA2kIQLYcHALvE4zCwVc87qoUW28CXY",{"id":669,"title":670,"body":671,"category":1762,"createdAt":1763,"description":670,"extension":481,"index":482,"meta":1764,"navigation":55,"path":1765,"publish":55,"seo":1766,"series":482,"seriesTitle":482,"stem":1767,"tag":1768,"thumbnail":1769,"updatedAt":482,"__hash__":1770},"articles\u002Farticles\u002Frecent-card-css.md","イマドキな丸角・正方形・画像カードデザインのレイアウトをCSSで実現させる。",{"type":10,"value":672,"toc":1759},[673,682,685,688,713,722,725,728,1756],[13,674,675,676,681],{},"こんにちは jun です。カードデザイン（参考：",[79,677,680],{"href":678,"rel":679},"http:\u002F\u002Fpinterest.jp\u002F",[83],"pinterest","）に近いコンポーネントを作った時に意外と詰まって時間かけてしまったので忘備録として残します。実際に↓に作りました。（レスポンシブでない）",[20,683,684],{"id":684},"コンポーネント要件",[13,686,687],{},"コンポーネントの要件としては以下の通りです。",[689,690,691,695,698,701,704,707,710],"ul",{},[692,693,694],"li",{},"正方形",[692,696,697],{},"丸角",[692,699,700],{},"画像が表示される。",[692,702,703],{},"PCでは３列、タブレットは２列、スマホは１列を維持する",[692,705,706],{},"端（コンテナー の境界）はくっつける。",[692,708,709],{},"1remほど隙間は開ける",[692,711,712],{},"ホバー時に背景画像がぐわっ！と迫ってくる",[13,714,715,716,721],{},"完成したものは",[79,717,720],{"href":718,"rel":719},"http:\u002F\u002Fapp.jun-app.com\u002Fcard-css\u002F",[83],"こちら","のページに置いてあります。画像は以下の通りです。",[518,723],{":src":724,":width":521},"'_mix\u002Fsch-2021-04-25 22.19.26.png'",[13,726,727],{},"コードはこちら",[27,729,733],{"className":730,"code":731,"language":732,"meta":32,"style":32},"language-html shiki shiki-themes material-theme-ocean","\u003Cstyle>\n    *{\n        box-sizing: border-box;\n    }\n    html{\n        font-size: 10px;\n    }\n    .p-the-container{\n        width: 100%;\n    }\n\n    .p-the-wrapper{\n        display: flex;\n        flex-wrap: wrap;\n        margin: 0 -1rem;         \u002F* p-img-card の paddingと同じ *\u002F\n    }\n\n    .p-img-card{\n        width: 33.3%;\n        width: 33.3%;\n\n        padding: 1rem;          \u002F* 隙間の太さになる *\u002F\n        margin-bottom: 2rem;    \u002F* 下側の隙間の太さ *\u002F\n\n        position: relative;\n        overflow: hidden;\n        cursor: pointer;\n    }\n\n    .p-img-card::before{\n        content: '';\n        display: block;\n        padding-top: 100%;      \u002F*正方形にするおまじない*\u002F\n    }\n\n    .p-img-card-wrapper{\n        display: block;\n        width: calc(100% - 2rem);  \u002F* カードのラッパーは隙間paddingの分だけ小さくする *\u002F\n        height: calc(100% - 2rem); \u002F* カードのラッパーは隙間paddingの分だけ小さくする *\u002F\n        position: absolute;\n        top: 1rem;　　　　　　　　　　\u002F* 位置もカードのpaddingの分だけ下げる *\u002F\n        overflow: hidden;\n        border-radius: 35px;\n        box-shadow: 0px 0px 8px -3px rgba(0, 0, 0, 0.6);\n    }\n\n    .p-img-card .c-img{\n        width: 100%;\n        height: 100%;\n        background-position: center;\n        background-repeat: no-repeat;\n        background-size: cover;\n        transform: scale(1);\n        transition: transform 0.5s;\n    }\n\n    .p-img-card:hover .c-img{\n        transform: scale(1.2);\n        transition: transform 0.5s;\n        animation: min-and-big 3s;\n    }\n\n    .img-a .c-img{background-image: url(画像のパス);}\n    .img-b .c-img{background-image: url(画像のパス);}\n\n\u003C\u002Fstyle>\n\n\u003Cdiv class=\"p-the-container\">\n    \u003Cdiv class=\"p-the-wrapper\">\n        \u003Cdiv class=\"p-img-card img-a\">\n            \u003Cdiv class=\"p-img-card-wrapper\">\n                \u003Cdiv class=\"c-img\">\u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"p-img-card img-b\">\n            \u003Cdiv class=\"p-img-card-wrapper\">\n                \u003Cdiv class=\"c-img\">\u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n　　　　　...\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html",[34,734,735,743,750,765,770,777,790,794,804,816,820,824,833,846,859,880,885,890,900,912,923,928,944,960,965,978,991,1004,1009,1013,1028,1041,1053,1068,1073,1078,1088,1099,1127,1150,1162,1177,1188,1201,1245,1250,1255,1270,1281,1292,1305,1318,1331,1349,1365,1370,1375,1393,1409,1422,1438,1443,1448,1480,1506,1511,1520,1525,1545,1565,1586,1606,1631,1641,1651,1671,1690,1713,1722,1731,1737,1747],{"__ignoreMap":32},[37,736,737,739,741],{"class":39,"line":40},[37,738,161],{"class":160},[37,740,465],{"class":164},[37,742,168],{"class":160},[37,744,745,748],{"class":39,"line":46},[37,746,747],{"class":249},"    *",[37,749,244],{"class":160},[37,751,752,756,759,762],{"class":39,"line":52},[37,753,755],{"class":754},"s6YsC","        box-sizing",[37,757,758],{"class":160},":",[37,760,761],{"class":198}," border-box",[37,763,764],{"class":160},";\n",[37,766,767],{"class":39,"line":59},[37,768,769],{"class":160},"    }\n",[37,771,772,775],{"class":39,"line":65},[37,773,774],{"class":249},"    html",[37,776,244],{"class":160},[37,778,779,782,784,788],{"class":39,"line":118},[37,780,781],{"class":754},"        font-size",[37,783,758],{"class":160},[37,785,787],{"class":786},"sx098"," 10px",[37,789,764],{"class":160},[37,791,792],{"class":39,"line":124},[37,793,769],{"class":160},[37,795,796,799,802],{"class":39,"line":130},[37,797,798],{"class":160},"    .",[37,800,801],{"class":249},"p-the-container",[37,803,244],{"class":160},[37,805,806,809,811,814],{"class":39,"line":256},[37,807,808],{"class":754},"        width",[37,810,758],{"class":160},[37,812,813],{"class":786}," 100%",[37,815,764],{"class":160},[37,817,818],{"class":39,"line":262},[37,819,769],{"class":160},[37,821,822],{"class":39,"line":268},[37,823,56],{"emptyLinePlaceholder":55},[37,825,826,828,831],{"class":39,"line":274},[37,827,798],{"class":160},[37,829,830],{"class":249},"p-the-wrapper",[37,832,244],{"class":160},[37,834,836,839,841,844],{"class":39,"line":835},13,[37,837,838],{"class":754},"        display",[37,840,758],{"class":160},[37,842,843],{"class":198}," flex",[37,845,764],{"class":160},[37,847,849,852,854,857],{"class":39,"line":848},14,[37,850,851],{"class":754},"        flex-wrap",[37,853,758],{"class":160},[37,855,856],{"class":198}," wrap",[37,858,764],{"class":160},[37,860,862,865,867,870,873,876],{"class":39,"line":861},15,[37,863,864],{"class":754},"        margin",[37,866,758],{"class":160},[37,868,869],{"class":786}," 0",[37,871,872],{"class":786}," -1rem",[37,874,875],{"class":160},";",[37,877,879],{"class":878},"sC9rS","         \u002F* p-img-card の paddingと同じ *\u002F\n",[37,881,883],{"class":39,"line":882},16,[37,884,769],{"class":160},[37,886,888],{"class":39,"line":887},17,[37,889,56],{"emptyLinePlaceholder":55},[37,891,893,895,898],{"class":39,"line":892},18,[37,894,798],{"class":160},[37,896,897],{"class":249},"p-img-card",[37,899,244],{"class":160},[37,901,903,905,907,910],{"class":39,"line":902},19,[37,904,808],{"class":754},[37,906,758],{"class":160},[37,908,909],{"class":786}," 33.3%",[37,911,764],{"class":160},[37,913,915,917,919,921],{"class":39,"line":914},20,[37,916,808],{"class":754},[37,918,758],{"class":160},[37,920,909],{"class":786},[37,922,764],{"class":160},[37,924,926],{"class":39,"line":925},21,[37,927,56],{"emptyLinePlaceholder":55},[37,929,931,934,936,939,941],{"class":39,"line":930},22,[37,932,933],{"class":754},"        padding",[37,935,758],{"class":160},[37,937,938],{"class":786}," 1rem",[37,940,875],{"class":160},[37,942,943],{"class":878},"          \u002F* 隙間の太さになる *\u002F\n",[37,945,947,950,952,955,957],{"class":39,"line":946},23,[37,948,949],{"class":754},"        margin-bottom",[37,951,758],{"class":160},[37,953,954],{"class":786}," 2rem",[37,956,875],{"class":160},[37,958,959],{"class":878},"    \u002F* 下側の隙間の太さ *\u002F\n",[37,961,963],{"class":39,"line":962},24,[37,964,56],{"emptyLinePlaceholder":55},[37,966,968,971,973,976],{"class":39,"line":967},25,[37,969,970],{"class":754},"        position",[37,972,758],{"class":160},[37,974,975],{"class":198}," relative",[37,977,764],{"class":160},[37,979,981,984,986,989],{"class":39,"line":980},26,[37,982,983],{"class":754},"        overflow",[37,985,758],{"class":160},[37,987,988],{"class":198}," hidden",[37,990,764],{"class":160},[37,992,994,997,999,1002],{"class":39,"line":993},27,[37,995,996],{"class":754},"        cursor",[37,998,758],{"class":160},[37,1000,1001],{"class":198}," pointer",[37,1003,764],{"class":160},[37,1005,1007],{"class":39,"line":1006},28,[37,1008,769],{"class":160},[37,1010,1011],{"class":39,"line":4},[37,1012,56],{"emptyLinePlaceholder":55},[37,1014,1016,1018,1020,1023,1026],{"class":39,"line":1015},30,[37,1017,798],{"class":160},[37,1019,897],{"class":249},[37,1021,1022],{"class":160},"::",[37,1024,1025],{"class":179},"before",[37,1027,244],{"class":160},[37,1029,1031,1034,1036,1039],{"class":39,"line":1030},31,[37,1032,1033],{"class":754},"        content",[37,1035,758],{"class":160},[37,1037,1038],{"class":160}," ''",[37,1040,764],{"class":160},[37,1042,1044,1046,1048,1051],{"class":39,"line":1043},32,[37,1045,838],{"class":754},[37,1047,758],{"class":160},[37,1049,1050],{"class":198}," block",[37,1052,764],{"class":160},[37,1054,1056,1059,1061,1063,1065],{"class":39,"line":1055},33,[37,1057,1058],{"class":754},"        padding-top",[37,1060,758],{"class":160},[37,1062,813],{"class":786},[37,1064,875],{"class":160},[37,1066,1067],{"class":878},"      \u002F*正方形にするおまじない*\u002F\n",[37,1069,1071],{"class":39,"line":1070},34,[37,1072,769],{"class":160},[37,1074,1076],{"class":39,"line":1075},35,[37,1077,56],{"emptyLinePlaceholder":55},[37,1079,1081,1083,1086],{"class":39,"line":1080},36,[37,1082,798],{"class":160},[37,1084,1085],{"class":249},"p-img-card-wrapper",[37,1087,244],{"class":160},[37,1089,1091,1093,1095,1097],{"class":39,"line":1090},37,[37,1092,838],{"class":754},[37,1094,758],{"class":160},[37,1096,1050],{"class":198},[37,1098,764],{"class":160},[37,1100,1102,1104,1106,1110,1113,1116,1119,1121,1124],{"class":39,"line":1101},38,[37,1103,808],{"class":754},[37,1105,758],{"class":160},[37,1107,1109],{"class":1108},"sdLwU"," calc",[37,1111,1112],{"class":160},"(",[37,1114,1115],{"class":786},"100%",[37,1117,1118],{"class":160}," -",[37,1120,954],{"class":786},[37,1122,1123],{"class":160},");",[37,1125,1126],{"class":878},"  \u002F* カードのラッパーは隙間paddingの分だけ小さくする *\u002F\n",[37,1128,1130,1133,1135,1137,1139,1141,1143,1145,1147],{"class":39,"line":1129},39,[37,1131,1132],{"class":754},"        height",[37,1134,758],{"class":160},[37,1136,1109],{"class":1108},[37,1138,1112],{"class":160},[37,1140,1115],{"class":786},[37,1142,1118],{"class":160},[37,1144,954],{"class":786},[37,1146,1123],{"class":160},[37,1148,1149],{"class":878}," \u002F* カードのラッパーは隙間paddingの分だけ小さくする *\u002F\n",[37,1151,1153,1155,1157,1160],{"class":39,"line":1152},40,[37,1154,970],{"class":754},[37,1156,758],{"class":160},[37,1158,1159],{"class":198}," absolute",[37,1161,764],{"class":160},[37,1163,1165,1168,1170,1172,1174],{"class":39,"line":1164},41,[37,1166,1167],{"class":754},"        top",[37,1169,758],{"class":160},[37,1171,938],{"class":786},[37,1173,875],{"class":160},[37,1175,1176],{"class":878},"　　　　　　　　　　\u002F* 位置もカードのpaddingの分だけ下げる *\u002F\n",[37,1178,1180,1182,1184,1186],{"class":39,"line":1179},42,[37,1181,983],{"class":754},[37,1183,758],{"class":160},[37,1185,988],{"class":198},[37,1187,764],{"class":160},[37,1189,1191,1194,1196,1199],{"class":39,"line":1190},43,[37,1192,1193],{"class":754},"        border-radius",[37,1195,758],{"class":160},[37,1197,1198],{"class":786}," 35px",[37,1200,764],{"class":160},[37,1202,1204,1207,1209,1212,1214,1217,1220,1223,1225,1228,1231,1233,1235,1237,1239,1242],{"class":39,"line":1203},44,[37,1205,1206],{"class":754},"        box-shadow",[37,1208,758],{"class":160},[37,1210,1211],{"class":786}," 0px",[37,1213,1211],{"class":786},[37,1215,1216],{"class":786}," 8px",[37,1218,1219],{"class":786}," -3px",[37,1221,1222],{"class":1108}," rgba",[37,1224,1112],{"class":160},[37,1226,1227],{"class":786},"0",[37,1229,1230],{"class":160},",",[37,1232,869],{"class":786},[37,1234,1230],{"class":160},[37,1236,869],{"class":786},[37,1238,1230],{"class":160},[37,1240,1241],{"class":786}," 0.6",[37,1243,1244],{"class":160},");\n",[37,1246,1248],{"class":39,"line":1247},45,[37,1249,769],{"class":160},[37,1251,1253],{"class":39,"line":1252},46,[37,1254,56],{"emptyLinePlaceholder":55},[37,1256,1258,1260,1262,1265,1268],{"class":39,"line":1257},47,[37,1259,798],{"class":160},[37,1261,897],{"class":249},[37,1263,1264],{"class":160}," .",[37,1266,1267],{"class":249},"c-img",[37,1269,244],{"class":160},[37,1271,1273,1275,1277,1279],{"class":39,"line":1272},48,[37,1274,808],{"class":754},[37,1276,758],{"class":160},[37,1278,813],{"class":786},[37,1280,764],{"class":160},[37,1282,1284,1286,1288,1290],{"class":39,"line":1283},49,[37,1285,1132],{"class":754},[37,1287,758],{"class":160},[37,1289,813],{"class":786},[37,1291,764],{"class":160},[37,1293,1295,1298,1300,1303],{"class":39,"line":1294},50,[37,1296,1297],{"class":754},"        background-position",[37,1299,758],{"class":160},[37,1301,1302],{"class":198}," center",[37,1304,764],{"class":160},[37,1306,1308,1311,1313,1316],{"class":39,"line":1307},51,[37,1309,1310],{"class":754},"        background-repeat",[37,1312,758],{"class":160},[37,1314,1315],{"class":198}," no-repeat",[37,1317,764],{"class":160},[37,1319,1321,1324,1326,1329],{"class":39,"line":1320},52,[37,1322,1323],{"class":754},"        background-size",[37,1325,758],{"class":160},[37,1327,1328],{"class":198}," cover",[37,1330,764],{"class":160},[37,1332,1334,1337,1339,1342,1344,1347],{"class":39,"line":1333},53,[37,1335,1336],{"class":754},"        transform",[37,1338,758],{"class":160},[37,1340,1341],{"class":1108}," scale",[37,1343,1112],{"class":160},[37,1345,1346],{"class":786},"1",[37,1348,1244],{"class":160},[37,1350,1352,1355,1357,1360,1363],{"class":39,"line":1351},54,[37,1353,1354],{"class":754},"        transition",[37,1356,758],{"class":160},[37,1358,1359],{"class":198}," transform ",[37,1361,1362],{"class":786},"0.5s",[37,1364,764],{"class":160},[37,1366,1368],{"class":39,"line":1367},55,[37,1369,769],{"class":160},[37,1371,1373],{"class":39,"line":1372},56,[37,1374,56],{"emptyLinePlaceholder":55},[37,1376,1378,1380,1382,1384,1387,1389,1391],{"class":39,"line":1377},57,[37,1379,798],{"class":160},[37,1381,897],{"class":249},[37,1383,758],{"class":160},[37,1385,1386],{"class":179},"hover",[37,1388,1264],{"class":160},[37,1390,1267],{"class":249},[37,1392,244],{"class":160},[37,1394,1396,1398,1400,1402,1404,1407],{"class":39,"line":1395},58,[37,1397,1336],{"class":754},[37,1399,758],{"class":160},[37,1401,1341],{"class":1108},[37,1403,1112],{"class":160},[37,1405,1406],{"class":786},"1.2",[37,1408,1244],{"class":160},[37,1410,1412,1414,1416,1418,1420],{"class":39,"line":1411},59,[37,1413,1354],{"class":754},[37,1415,758],{"class":160},[37,1417,1359],{"class":198},[37,1419,1362],{"class":786},[37,1421,764],{"class":160},[37,1423,1425,1428,1430,1433,1436],{"class":39,"line":1424},60,[37,1426,1427],{"class":754},"        animation",[37,1429,758],{"class":160},[37,1431,1432],{"class":198}," min-and-big ",[37,1434,1435],{"class":786},"3s",[37,1437,764],{"class":160},[37,1439,1441],{"class":39,"line":1440},61,[37,1442,769],{"class":160},[37,1444,1446],{"class":39,"line":1445},62,[37,1447,56],{"emptyLinePlaceholder":55},[37,1449,1451,1453,1456,1458,1460,1463,1466,1468,1471,1473,1477],{"class":39,"line":1450},63,[37,1452,798],{"class":160},[37,1454,1455],{"class":249},"img-a",[37,1457,1264],{"class":160},[37,1459,1267],{"class":249},[37,1461,1462],{"class":160},"{",[37,1464,1465],{"class":754},"background-image",[37,1467,758],{"class":160},[37,1469,1470],{"class":1108}," url",[37,1472,1112],{"class":160},[37,1474,1476],{"class":1475},"s7ZW3","画像のパス",[37,1478,1479],{"class":160},");}\n",[37,1481,1483,1485,1488,1490,1492,1494,1496,1498,1500,1502,1504],{"class":39,"line":1482},64,[37,1484,798],{"class":160},[37,1486,1487],{"class":249},"img-b",[37,1489,1264],{"class":160},[37,1491,1267],{"class":249},[37,1493,1462],{"class":160},[37,1495,1465],{"class":754},[37,1497,758],{"class":160},[37,1499,1470],{"class":1108},[37,1501,1112],{"class":160},[37,1503,1476],{"class":1475},[37,1505,1479],{"class":160},[37,1507,1509],{"class":39,"line":1508},65,[37,1510,56],{"emptyLinePlaceholder":55},[37,1512,1514,1516,1518],{"class":39,"line":1513},66,[37,1515,202],{"class":160},[37,1517,465],{"class":164},[37,1519,168],{"class":160},[37,1521,1523],{"class":39,"line":1522},67,[37,1524,56],{"emptyLinePlaceholder":55},[37,1526,1528,1530,1532,1535,1537,1539,1541,1543],{"class":39,"line":1527},68,[37,1529,161],{"class":160},[37,1531,569],{"class":164},[37,1533,1534],{"class":179}," class",[37,1536,183],{"class":160},[37,1538,186],{"class":160},[37,1540,801],{"class":189},[37,1542,186],{"class":160},[37,1544,168],{"class":160},[37,1546,1548,1551,1553,1555,1557,1559,1561,1563],{"class":39,"line":1547},69,[37,1549,1550],{"class":160},"    \u003C",[37,1552,569],{"class":164},[37,1554,1534],{"class":179},[37,1556,183],{"class":160},[37,1558,186],{"class":160},[37,1560,830],{"class":189},[37,1562,186],{"class":160},[37,1564,168],{"class":160},[37,1566,1568,1571,1573,1575,1577,1579,1582,1584],{"class":39,"line":1567},70,[37,1569,1570],{"class":160},"        \u003C",[37,1572,569],{"class":164},[37,1574,1534],{"class":179},[37,1576,183],{"class":160},[37,1578,186],{"class":160},[37,1580,1581],{"class":189},"p-img-card img-a",[37,1583,186],{"class":160},[37,1585,168],{"class":160},[37,1587,1589,1592,1594,1596,1598,1600,1602,1604],{"class":39,"line":1588},71,[37,1590,1591],{"class":160},"            \u003C",[37,1593,569],{"class":164},[37,1595,1534],{"class":179},[37,1597,183],{"class":160},[37,1599,186],{"class":160},[37,1601,1085],{"class":189},[37,1603,186],{"class":160},[37,1605,168],{"class":160},[37,1607,1609,1612,1614,1616,1618,1620,1622,1624,1627,1629],{"class":39,"line":1608},72,[37,1610,1611],{"class":160},"                \u003C",[37,1613,569],{"class":164},[37,1615,1534],{"class":179},[37,1617,183],{"class":160},[37,1619,186],{"class":160},[37,1621,1267],{"class":189},[37,1623,186],{"class":160},[37,1625,1626],{"class":160},">\u003C\u002F",[37,1628,569],{"class":164},[37,1630,168],{"class":160},[37,1632,1634,1637,1639],{"class":39,"line":1633},73,[37,1635,1636],{"class":160},"            \u003C\u002F",[37,1638,569],{"class":164},[37,1640,168],{"class":160},[37,1642,1644,1647,1649],{"class":39,"line":1643},74,[37,1645,1646],{"class":160},"        \u003C\u002F",[37,1648,569],{"class":164},[37,1650,168],{"class":160},[37,1652,1654,1656,1658,1660,1662,1664,1667,1669],{"class":39,"line":1653},75,[37,1655,1570],{"class":160},[37,1657,569],{"class":164},[37,1659,1534],{"class":179},[37,1661,183],{"class":160},[37,1663,186],{"class":160},[37,1665,1666],{"class":189},"p-img-card img-b",[37,1668,186],{"class":160},[37,1670,168],{"class":160},[37,1672,1674,1676,1678,1680,1682,1684,1686,1688],{"class":39,"line":1673},76,[37,1675,1591],{"class":160},[37,1677,569],{"class":164},[37,1679,1534],{"class":179},[37,1681,183],{"class":160},[37,1683,186],{"class":160},[37,1685,1085],{"class":189},[37,1687,186],{"class":160},[37,1689,168],{"class":160},[37,1691,1693,1695,1697,1699,1701,1703,1705,1707,1709,1711],{"class":39,"line":1692},77,[37,1694,1611],{"class":160},[37,1696,569],{"class":164},[37,1698,1534],{"class":179},[37,1700,183],{"class":160},[37,1702,186],{"class":160},[37,1704,1267],{"class":189},[37,1706,186],{"class":160},[37,1708,1626],{"class":160},[37,1710,569],{"class":164},[37,1712,168],{"class":160},[37,1714,1716,1718,1720],{"class":39,"line":1715},78,[37,1717,1636],{"class":160},[37,1719,569],{"class":164},[37,1721,168],{"class":160},[37,1723,1725,1727,1729],{"class":39,"line":1724},79,[37,1726,1646],{"class":160},[37,1728,569],{"class":164},[37,1730,168],{"class":160},[37,1732,1734],{"class":39,"line":1733},80,[37,1735,1736],{"class":198},"　　　　　...\n",[37,1738,1740,1743,1745],{"class":39,"line":1739},81,[37,1741,1742],{"class":160},"    \u003C\u002F",[37,1744,569],{"class":164},[37,1746,168],{"class":160},[37,1748,1750,1752,1754],{"class":39,"line":1749},82,[37,1751,202],{"class":160},[37,1753,569],{"class":164},[37,1755,168],{"class":160},[465,1757,1758],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":32,"searchDepth":52,"depth":52,"links":1760},[1761],{"id":684,"depth":46,"text":684},[479],"2020-12-17",{},"\u002Farticles\u002Frecent-card-css",{"title":670,"description":670},"articles\u002Frecent-card-css",[732,488],"_mix\u002Fsch-2021-04-25 22.19.26.png","a9LRbH7otDCRxRFyUY0oec3ojY88jg3a-FXDcIlgR9k",{"id":1772,"title":1773,"body":1774,"category":1904,"createdAt":1905,"description":1773,"extension":481,"index":482,"meta":1906,"navigation":55,"path":1907,"publish":55,"seo":1908,"series":482,"seriesTitle":482,"stem":1909,"tag":1910,"thumbnail":482,"updatedAt":482,"__hash__":1911},"articles\u002Farticles\u002Fphp-unserialize-error-reslove.md","PHPのunserializeがError at offsetエラーが起きた際の対処方法",{"type":10,"value":1775,"toc":1902},[1776,1779,1785,1792,1809,1812,1823,1830,1836,1846,1854,1857,1873,1879,1893,1896,1899],[13,1777,1778],{},"とあるデータベースの内容をCSVに出力して欲しいという簡単な仕事がありました。目的のテーブルをみてみると以下のような記録がありました。",[27,1780,1783],{"className":1781,"code":1782,"language":552},[550],"a:2:{i:0;s:5:“hello”;i:1;s:5:“world”;}　\u002F\u002Fサンプルです\n",[34,1784,1782],{"__ignoreMap":32},[13,1786,1787,1788,1791],{},"「なんじゃこれ」と調べていると、これはシリアライズされたデータでした。PHPのオブジェクトのインスタンス、配列を文字列として保存したい時に",[34,1789,1790],{},"serialize()","を使用し、その時に生成される文字でした。",[569,1793,1796,1797,1800],{"className":1794},[572,1795],"alert-success","\nserialize ( mixed $value ) : string\n",[13,1798,1799],{},"値の保存可能な表現を生成します。 型や構造を失わずに PHP の値を保存または渡す際に有用です。 シリアル化された文字列を PHP の値に戻すには、 unserialize() を使用してください。",[13,1801,1802],{},[1803,1804,1805],"small",{},[79,1806,1807],{"href":1807,"rel":1808},"https:\u002F\u002Fwww.php.net\u002Fmanual\u002Fja\u002Ffunction.serialize.php",[83],[13,1810,1811],{},"元に戻す際はunserialize()を用いると元の配列やオブジェクトになります。上の例は",[27,1813,1817],{"className":1814,"code":1815,"language":1816,"meta":32,"style":32},"language-php shiki shiki-themes material-theme-ocean","array(‘hello’, ‘world’)\n","php",[34,1818,1819],{"__ignoreMap":32},[37,1820,1821],{"class":39,"line":40},[37,1822,1815],{},[13,1824,1825,1826,1829],{},"となります。今回の記事ではそんな",[34,1827,1828],{},"unserialize()","の時に起きたエラーです。その時に以下のようなエラーが発生しました。",[27,1831,1834],{"className":1832,"code":1833,"language":552},[550],"Fatal error: Uncaught ErrorException: unserialize(): Error at offset XX of XX bytes\n",[34,1835,1833],{"__ignoreMap":32},[13,1837,1838,1839,1841,1842,1845],{},"このエラーの概要としては",[34,1840,1828],{},"する際に",[34,1843,1844],{},"s:5:“world”","などの部分を頼りに値を元に戻すのですが、この部分が文字コードや色々な都合で文字列数が合わない時があります。そうすると上記のようなエラーがおきます。",[13,1847,1848,1851],{},[457,1849,1850],{},"「unserialize(): error at offset」",[457,1852,1853],{},"「unserialize(): エラー」",[13,1855,1856],{},"と調べました。似たような症状で悩んでいる人が多いためか、すぐに解決策が出ました。最終的には以下の記事が最善の解決策でした。",[689,1858,1859,1866],{},[692,1860,1861],{},[79,1862,1865],{"href":1863,"rel":1864},"https:\u002F\u002Fkeruuweb.com\u002Fphp-unserialize-error\u002F",[83],"PHP: unserialize実行時にエラーが発生する場合の対処例",[692,1867,1868],{},[79,1869,1872],{"href":1870,"rel":1871},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F10152904\u002Fhow-to-repair-a-serialized-string-which-has-been-corrupted-by-an-incorrect-byte",[83],"How to repair a serialized string which has been corrupted by an incorrect byte count length?",[27,1874,1877],{"className":1875,"code":1876,"language":552},[550],"$data = 's:4:\"abc\"';\n\n$data = preg_replace_callback('!s:(\\d+):\"([\\s\\S]*?)\";!', function($m) {\n  return 's:' . strlen($m[2]) . ':\"' . $m[2] . '\";';\n}, $data);\n\necho $data; \u002F\u002F => 's:3:\"abc\"'\n\n$text = unserialize($data);\n",[34,1878,1876],{"__ignoreMap":32},[13,1880,1881,1882,1885,1886,1888,1889,1892],{},"上記のコードのように",[34,1883,1884],{},"preg_replace_callback","を用いて",[34,1887,1828],{},"できないデータにある、",[34,1890,1891],{},"'s:4:\"abc\"'","などの文字列数などを正規表現を用いて再計算し、正しい文字列数にすることでエラーが解決できます。",[13,1894,1895],{},"そもそもなぜserializeしたデータの文字列数が間違っているのかなど根本的な原因としては、PHPのバージョンの違いや変換する文字コード、保存するDBでの文字コードなど様々な要因があります。私もローカルのPHPは7.4ですが、データを保存している環境はPHP5やmysql6という古い環境で全く異なっていただったりと、エラーになる要素は満載でした。",[13,1897,1898],{},"とにかく原因とその解決方法である正規表現は正直初見殺しなので、解説記事は非常に助かりました。ありがとうございます。",[465,1900,1901],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":32,"searchDepth":52,"depth":52,"links":1903},[],[479],"2020-12-06",{},"\u002Farticles\u002Fphp-unserialize-error-reslove",{"title":1773,"description":1773},"articles\u002Fphp-unserialize-error-reslove",[1816],"xT9EEUnxEQAaXvVrykex81iT_-hbhrt3RUP2eorH-IM",{"id":1913,"title":1914,"body":1915,"category":1994,"createdAt":1995,"description":1914,"extension":481,"index":482,"meta":1996,"navigation":55,"path":1997,"publish":55,"seo":1998,"series":482,"seriesTitle":482,"stem":1999,"tag":2000,"thumbnail":2001,"updatedAt":482,"__hash__":2002},"articles\u002Farticles\u002Fcomposer-require-memory-leak.md","composer require で PHPがメモリ不足になるときの対処法",{"type":10,"value":1916,"toc":1992},[1917,1920,1923,1926,1934,1941,1948,1958,1961,1967,1970,1976,1983,1989],[13,1918,1919],{},"PHPのプロジェクトの時はcomposerを用います。しかしなぜかPHPのメモリエラーで必要なパッケージが全てはいらないという事象に出会いました。困ったと思い以下のワードで調べました。",[13,1921,1922],{},"「composer require メモリ不足」",[13,1924,1925],{},"そのまんまですね笑。とりあえず以下の記事が参考になりました。",[569,1927,1929],{"className":1928},[572,1795],[79,1930,1933],{"href":1931,"target":1932},"https:\u002F\u002Fqiita.com\u002Fsetsunachan\u002Fitems\u002F48d56782d4166cef507a","_blank","【Laravel】composer require時のメモリ不足エラーの対処法【Docker】\n",[569,1935,1937],{"className":1936},[572,1795],[79,1938,1940],{"href":1939,"target":1932},"https:\u002F\u002Fuiuifree.com\u002Fblog\u002Fdevelop\u002Fphp-composer-install-memory-limit\u002F","composer installでメモリ不足を解消するコマンド",[13,1942,1943,1944,1947],{},"方法は簡単。phpコマンドで ",[34,1945,1946],{},"php -d memory_limit=-1"," のオプションを指定してメモリ使用を無制限にします。そして",[13,1949,1950,1953,1954,1957],{},[34,1951,1952],{},"php -d memory_limit=-1 \u002Fusr\u002Fbin\u002Fcomposer require {Library_name} ","とします。phpコマンドで composerコマンドを使用せず直接 ",[34,1955,1956],{},"\u002Fusr\u002Fbin\u002Fcomposer"," とcomposerのパスを指定します。",[13,1959,1960],{},"もしも",[27,1962,1965],{"className":1963,"code":1964,"language":552},[550],"Could not open input file: \u002Fusr\u002Fbin\u002Fcomposer\n",[34,1966,1964],{"__ignoreMap":32},[13,1968,1969],{},"と指定したパスにcomposerがいない時、忘れてしまった時は",[27,1971,1974],{"className":1972,"code":1973,"language":552},[550],"$ which composer\n\u002Fusr\u002Flocal\u002Fbin\u002Fcomposer\n",[34,1975,1973],{"__ignoreMap":32},[13,1977,1978,1979,1982],{},"which コマンドでパスを明らかにしましょう。私の場合は ",[34,1980,1981],{},"\u002Fusr\u002Flocal\u002Fbin\u002Fcomposer"," にいました。なので上記のコードは",[27,1984,1987],{"className":1985,"code":1986,"language":552},[550],"php -d memory_limit=-1 \u002Fusr\u002Flocal\u002Fbin\u002Fcomposer require {Library_name}\n",[34,1988,1986],{"__ignoreMap":32},[13,1990,1991],{},"となります。これで無事にインストールできました。",{"title":32,"searchDepth":52,"depth":52,"links":1993},[],[479],"2020-12-05",{},"\u002Farticles\u002Fcomposer-require-memory-leak",{"title":1914,"description":1914},"articles\u002Fcomposer-require-memory-leak",[1816],"_mix\u002Flogo-composer-transparent.png","Aa4jAWQKQAfZs5LUIbWdJrVBOI7x9mPFFgm1NNr4OAg",{"id":2004,"title":2005,"body":2006,"category":2089,"createdAt":2090,"description":2005,"extension":481,"index":482,"meta":2091,"navigation":55,"path":2092,"publish":55,"seo":2093,"series":482,"seriesTitle":482,"stem":2094,"tag":2095,"thumbnail":482,"updatedAt":482,"__hash__":2098},"articles\u002Farticles\u002Fdjango-nuxt-routing.md","djangoでNuxt SPAを使うときのルーティング 設定",{"type":10,"value":2007,"toc":2087},[2008,2011,2014,2019,2026,2063,2070,2085],[13,2009,2010],{},"大体のwebフレームワークではルーティングの設定ができます。最近のフロントエンド はNuxt、Nextとかjsを用いて構築して、バックエンドへの通信はAPIを用いていると思います。Djangoにもurls.pyというルーティング を定義するファイルがあります。",[13,2012,2013],{},"しかし一部のurlではNuxt.jsのjsとhtmlを返すことができず、404になってしまいます。api、adminのルートを生かしながらそのほかのURLに対してはNuxtのファイルを返すにはどうすればいいのか？それを調べていたら、以下のstack overflow の記事が答えてくれました",[13,2015,2016],{},[457,2017,2018],{},"検索ワード「Django SPA url」",[569,2020,2022],{"className":2021},[572,1795],[79,2023,2025],{"href":2024,"target":1932},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F42864641\u002Fhandling-single-page-application-url-and-django-url","Handling single page application url and django url",[27,2027,2031],{"className":2028,"code":2029,"language":2030,"meta":32,"style":32},"language-python shiki shiki-themes material-theme-ocean","urlpatterns = [\n    url(r'^admin\u002F', admin.site.urls),\n    url(r'^api-auth\u002F', include('rest_framework.urls', namespace='rest_framework')),\n    url(r'^api\u002F', include(router.urls)),\n    url(r'^.*$', TemplateView.as_view(template_name=\"index.html\")),\n]\n","python",[34,2032,2033,2038,2043,2048,2053,2058],{"__ignoreMap":32},[37,2034,2035],{"class":39,"line":40},[37,2036,2037],{},"urlpatterns = [\n",[37,2039,2040],{"class":39,"line":46},[37,2041,2042],{},"    url(r'^admin\u002F', admin.site.urls),\n",[37,2044,2045],{"class":39,"line":52},[37,2046,2047],{},"    url(r'^api-auth\u002F', include('rest_framework.urls', namespace='rest_framework')),\n",[37,2049,2050],{"class":39,"line":59},[37,2051,2052],{},"    url(r'^api\u002F', include(router.urls)),\n",[37,2054,2055],{"class":39,"line":65},[37,2056,2057],{},"    url(r'^.*$', TemplateView.as_view(template_name=\"index.html\")),\n",[37,2059,2060],{"class":39,"line":118},[37,2061,2062],{},"]\n",[13,2064,2065,2066,2069],{},"admin、api-auth、apiなど必要なルーティングはurlpatternsの最初の方に定義して、残りの全てのurlパターンを",[34,2067,2068],{},"r'^.*$"," という正規表現でカバーしています。ちなみにこの正規表現は「いかなる文字の全て」という意味です。そしてSPAのファイルをtemplateから引っ張ってきています。",[13,2071,2072,2073,2076,2077,2080,2081,2084],{},"こうすることで、例えば ",[34,2074,2075],{},"https:\u002F\u002F~~~\u002Faaa","、",[34,2078,2079],{},"https:\u002F\u002F~~~\u002Fbbb\u002Faa","、などはSPAのファイルが返され、あとはSPAがそのURLに対しての処理を行ってくれます。一方で",[34,2082,2083],{},"https:\u002F\u002F~~~\u002Fadmin"," とすればDjangoの場合は管理画面にアクセスできます。",[465,2086,1901],{},{"title":32,"searchDepth":52,"depth":52,"links":2088},[],[479],"2020-12-04",{},"\u002Farticles\u002Fdjango-nuxt-routing",{"title":2005,"description":2005},"articles\u002Fdjango-nuxt-routing",[2096,2097],"django","nuxt","u-7H0bMOrS2JKrDbSIBUgp_ZgGLGpmCAjFGtTaDoVqc",{"id":2100,"title":2101,"body":2102,"category":2198,"createdAt":2199,"description":2101,"extension":481,"index":482,"meta":2200,"navigation":55,"path":2201,"publish":55,"seo":2202,"series":482,"seriesTitle":482,"stem":2203,"tag":2204,"thumbnail":482,"updatedAt":482,"__hash__":2206},"articles\u002Farticles\u002Fwhat-ssg-ssr-spa.md","Nuxt.jsのSPA、SSR、SSGって何？",{"type":10,"value":2103,"toc":2191},[2104,2107,2111,2125,2138,2152,2156,2159,2162,2165,2169,2172,2175,2178,2181,2185,2188],[13,2105,2106],{},"こんにちはjunです。Nuxt.jsを学びはじめにこれら３つの用語が？？？となったのを思い出し、復習がてら解説したいともいます。",[20,2108,2110],{"id":2109},"ssrssgspaって何","SSR・SSG・SPAって何？",[13,2112,2113,2114,2117,2118,2120,2121,2124],{},"SSRは ",[457,2115,2116],{},"S","erver ",[457,2119,2116],{},"ide ",[457,2122,2123],{},"R","enderingのことでVueなどによるjsレンダリングをブラウザではなくサーバーで行うことです。",[13,2126,2127,2128,2130,2131,2133,2134,2137],{},"SSGは ",[457,2129,2116],{},"tatic ",[457,2132,2116],{},"ite ",[457,2135,2136],{},"G","enerateのことで静的書き出しとも言われています。HTML、CSS、JSだけで構成されるファイルを生成することをいいます。",[13,2139,2140,2141,2143,2144,2147,2148,2151],{},"SPAは ",[457,2142,2116],{},"ingle ",[457,2145,2146],{},"P","age ",[457,2149,2150],{},"A","pplication と言われレンダーから何もかもブラウザ側で実行します。初期表示は遅いのでローディングは必須ですが、ページ遷移を感じさせず軽快なUIは非常に魅力的です。SEOを気にせず、操作するブラウザ環境が比較的新しいものに限定するならば選択しても良いと思います。内部的なwebアプリの操作画面などに使用されることが多いです。",[289,2153,2155],{"id":2154},"ssrの利点","SSRの利点",[13,2157,2158],{},"javaScriptは基本的にブラウザ側、つまり閲覧者のマシンで行われます。VueやReactはjsを用いてHTMLをレンダー（構築）するので、ブラウザ側でHTMLが完成します。PHPなどで書かれたwebサービスはサーバー側で完成したHTMLを閲覧者に配信します。",[13,2160,2161],{},"ブラウザでのレンダリングを前提に構築すると、サーバー側のHTMLは最低限の記述しかないためSEOが弱かったり、ブラウザ側の表示に時間がかかったり、古いブラウザや低スペックのスマホだと表示・動作が遅かったりするデメリットがあります。それを解決するのがSSRです。",[13,2163,2164],{},"本来ブラウザで実行されるjsをサーバー側で実行して、完成したHTMLを配信します。この場合、サーバーにはnode.jsが必要になりますが、クローラーは完成したHTMLを読み込み、またユーザー側も高速で表示することができます。",[289,2166,2168],{"id":2167},"ssgの利点","SSGの利点",[13,2170,2171],{},"昨今のwebアプリ・サイトはサーバーからの情報を当て込んだり、Ajaxなどで常に通信していることが多いです。しかしそれはwebアプリ（ブラウザ側）からサーバーへアクセスできる穴が必要で、そこを狙った脆弱性を通じてサーバーが攻撃されることがあります。（webアプリのソースとサーバで動く言語、DBが同居しているので危ない）",[13,2173,2174],{},"他にもサーバー側の実行が遅いと結果的にブラウザの表示が遅くなったり、もっと高速に表示したい場合はSSG、静的書き出しを行います。静的に書き出す際にjsを実行しますし、設計によってはあらかじめサーバーからの取得した情報も読み込んでおきます。",[13,2176,2177],{},"静的に書き出したものはHTML、CSS、JSだけであり基本的にはサーバーと通信して、DBからデータを取ってきたりなどもしません。そのためPHPやDBがインストールされていないサーバーに置いて、配信することが可能です。",[13,2179,2180],{},"配信側にサーバーへ対する攻撃手段が残らないのでセキュリティも格段に上がりますし、表示速度もある程度上がります。これがSSGの利点です。",[289,2182,2184],{"id":2183},"spaの利点","SPAの利点",[13,2186,2187],{},"SPAの利点は実装のしやすさと軽快なUIにあります。レンダーはブラウザで行われるのでサーバーには最低限のHTMLとJSが配信される様にしておけばOKです。SSG・SSRはサーバーにnode.jsを入れたり、webサーバーとあれこりしたりと配信する前に手間がかかります。",[13,2189,2190],{},"SPAはそんなめんどくさいことは必要なく、クラアントに適切なHTMLとJSを渡すだけで解決します。SEOに弱く、また表示と操作がブラウザの性能に依存するので会員制のサイトで、その操作部分などSEOを気にしないサイトやwebアプリであればガンガン使ってもいいと思います。",{"title":32,"searchDepth":52,"depth":52,"links":2192},[2193],{"id":2109,"depth":46,"text":2110,"children":2194},[2195,2196,2197],{"id":2154,"depth":52,"text":2155},{"id":2167,"depth":52,"text":2168},{"id":2183,"depth":52,"text":2184},[479],"2020-11-23",{},"\u002Farticles\u002Fwhat-ssg-ssr-spa",{"title":2101,"description":2101},"articles\u002Fwhat-ssg-ssr-spa",[2205,2097],"js","usMpTQM9YqI1I4JGQYjVe7BELZbLtw1Et1nerwUPpek",{"id":2208,"title":2209,"body":2210,"category":2310,"createdAt":2311,"description":2209,"extension":481,"index":482,"meta":2312,"navigation":55,"path":2313,"publish":55,"seo":2314,"series":482,"seriesTitle":482,"stem":2315,"tag":2316,"thumbnail":482,"updatedAt":482,"__hash__":2317},"articles\u002Farticles\u002Fie-check-for-mac.md","IEチェックなどに！MacのlocalhostをWindowsで開く（アクセス）する方法。",{"type":10,"value":2211,"toc":2304},[2212,2215,2218,2221,2224,2231,2234,2237,2240,2243,2246,2250,2253,2256,2259,2267,2270,2277,2285,2288,2291,2295,2298,2301],[13,2213,2214],{},"こんにちはjunです。IE対策してますか？まあ私はIE大嫌いですけど要件に入っているならば、対策は必須です。最近はIE11まででいいよ。という空気が漂っているので昔よりは対策はしやすいですが、やっぱり思うようなレイアウトにならいことが多いです。",[13,2216,2217],{},"そしてIEの厄介な点としてwindows環境でしか動かないという点です。web系のデザイナーしかり、エンジニアは環境構築の手間や情報量、性能からみてMacを使う人が多いです。私もMacを使用して開発しています。そのため、MacだとIEチェックが非常に面倒になります。",[13,2219,2220],{},"GitとかでWindows機にローカルリポジトリを置いてもいいのですが、やっぱり面倒です。できたら開発しながらリアルタイムで確認したいので、MacのlocalhostをWindowsで見れるようにする方法で解決します。",[20,2222,2223],{"id":2223},"macの設定を変更",[13,2225,2226,2227,2230],{},"まずlocalhostを他のPCでも共有できるようにするためには、WindowsとMacが同じ ",[457,2228,2229],{},"LAN内にいるという条件"," があります。つまり同じWi-Fiを使用するということです。",[13,2232,2233],{},"互いに同じLANでつながっていることを確認したら、「システム環境設定」＞「共有」に進みます。",[13,2235,2236],{},"「共有」のなかに「インターネット共有」という欄がありますので、クリックします。",[518,2238],{":src":2239,":width":521},"'_mix\u002Flan-setting-on-mac.png'",[13,2241,2242],{},"そして「共有する接続経路」がWi-Fiであることを確認。違っていたらプルダウンから選びます。確認後、「インターネット共有」の左のチェックボックスをクリックして有効化します。",[13,2244,2245],{},"これでMac側の準備は完了です。",[20,2247,2249],{"id":2248},"windowsから早速接続","Windowsから早速接続",[13,2251,2252],{},"ではWindowsから接続するにはどうすればいいのか？上記の図のここに注目します。",[518,2254],{":src":2255,":width":521},"'_mix\u002Fscreen-2020-07-19-21.38.57-768x146.png'",[13,2257,2258],{},"そうです。「次のアドレスで〜〜」という所の「MacBook-Pro.local」をドメインのようにしてアクセスします。ここの名前は変えられるので複数人LAN内にいる場合などは変えるといいでしょう。",[13,2260,2261,2262],{},"実際に接続するときは「",[79,2263,2266],{"href":2264,"rel":2265},"http:\u002F\u002Fmacbook-pro.local%E3%80%8D%E3%81%A8%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%8B%E3%82%89%E6%8E%A5%E7%B6%9A%E3%81%97%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82%EF%BC%88%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E9%83%A8%E5%88%86%E3%81%AE%E5%A4%A7%E6%96%87%E5%AD%97%E3%81%AF%E8%87%AA%E5%8B%95%E7%9A%84%E3%81%AB%E5%B0%8F%E6%96%87%E5%AD%97%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%EF%BC%89",[83],"http:\u002F\u002Fmacbook-pro.local」とブラウザから接続しましょう。（ドメイン部分の大文字は自動的に小文字になります。）",[20,2268,2269],{"id":2269},"実際に確認してみる",[13,2271,2272,2273,2276],{},"MAMPに",[34,2274,2275],{},"connecttest","というディレクトリを作成しておき、その中にindex.htmlを作成しておきます。htmlを開くと「Connection succeed!」という文章が出てきます。",[13,2278,2279,2280,2284],{},"忌まわしきIEを開いて上記の自分のMacを指すドメイン名を入力しましょう。MAMP上にあるので",[79,2281,2282],{"href":2282,"rel":2283},"http:\u002F\u002Fmacbook-pro.local:8888",[83]," とコロン（：）とデフォルトのポート8888に接続します。",[518,2286],{":src":2287,":width":521},"'_mix\u002Fscreenshot-60-1-768x512.png'",[518,2289],{":src":2290,":width":521},"'_mix\u002Fsh-61-768x512.png'",[20,2292,2294],{"id":2293},"mac内にieを入れるのは面倒","Mac内にIEを入れるのは面倒",[13,2296,2297],{},"以上がwindowsにMacを接続する方法です。めちゃくちゃ簡単なので早速やってみましょう。",[13,2299,2300],{},"この方法の場合、MacとWindows両方持っている人専用になります。一応Mac内にIE（Windows環境）を構築することはVirtual boxを用いて行うことができます。しかし、MacでWindowsOSを稼働させるのでパフォーマンスが遅く、また構築も非常に面倒です。",[13,2302,2303],{},"IEのためにWindowsを買うのも馬鹿らしいですが、会社とかでIE確認用のWindowsを持っていてもいいかもしれませんね",{"title":32,"searchDepth":52,"depth":52,"links":2305},[2306,2307,2308,2309],{"id":2223,"depth":46,"text":2223},{"id":2248,"depth":46,"text":2249},{"id":2269,"depth":46,"text":2269},{"id":2293,"depth":46,"text":2294},[479],"2020-07-19",{},"\u002Farticles\u002Fie-check-for-mac",{"title":2209,"description":2209},"articles\u002Fie-check-for-mac",[665],"K4ZixH0MRLLn2UJckWs_1Z9fmXvYqfxU3inpOS3CMmk",{"id":2319,"title":2320,"body":2321,"category":2667,"createdAt":2668,"description":2320,"extension":481,"index":482,"meta":2669,"navigation":55,"path":2670,"publish":55,"seo":2671,"series":482,"seriesTitle":482,"stem":2672,"tag":2673,"thumbnail":482,"updatedAt":482,"__hash__":2675},"articles\u002Farticles\u002Fjquery-anker.md","jqueryを用いてページの特定箇所までアニメーションスクロールさせる方法",{"type":10,"value":2322,"toc":2661},[2323,2326,2329,2332,2618,2629,2632,2635,2639,2642,2645,2648,2652,2655,2658],[13,2324,2325],{},"こんにちはjunです。どちらかというとメモ的な内容になります。このサイトの「目次」にも実装されているような、見出し名をクリックするとそのコンテンツが書いてある場所まで飛ぶ動きを実装させます。",[20,2327,2328],{"id":2328},"自動スクロールの原理",[13,2330,2331],{},"この自動スクロールの原理について解説します。",[27,2333,2335],{"className":29,"code":2334,"language":31,"meta":32,"style":32},"$('a[href^=#]').on('click',function() {\n    \u002F\u002F スクロールの速度\n    var speed = 400; \u002F\u002F ミリ秒\n\n    \u002F\u002F アンカーの値取得（aタグのhref属性）\n    var href= $(this).attr(\"href\");\n\n    \u002F\u002F 移動先の要素を取得\n    var target = $(href == \"#\" || href == \"\" ? 'html' : href);\n\n    \u002F\u002F 移動先の高さを取得\n    var position = target.offset().top;\n\n    \u002F\u002F スムーススクロール\n    $('body,html').animate({scrollTop:position}, speed, 'swing');\n});\n",[34,2336,2337,2381,2386,2405,2409,2414,2451,2455,2460,2515,2519,2524,2549,2553,2558,2609],{"__ignoreMap":32},[37,2338,2339,2342,2344,2347,2350,2352,2355,2358,2361,2363,2365,2368,2370,2372,2375,2378],{"class":39,"line":40},[37,2340,2341],{"class":1108},"$",[37,2343,1112],{"class":198},[37,2345,2346],{"class":160},"'",[37,2348,2349],{"class":189},"a[href^=#]",[37,2351,2346],{"class":160},[37,2353,2354],{"class":198},")",[37,2356,2357],{"class":160},".",[37,2359,2360],{"class":1108},"on",[37,2362,1112],{"class":198},[37,2364,2346],{"class":160},[37,2366,2367],{"class":189},"click",[37,2369,2346],{"class":160},[37,2371,1230],{"class":160},[37,2373,2374],{"class":179},"function",[37,2376,2377],{"class":160},"()",[37,2379,2380],{"class":160}," {\n",[37,2382,2383],{"class":39,"line":46},[37,2384,2385],{"class":878},"    \u002F\u002F スクロールの速度\n",[37,2387,2388,2391,2394,2397,2400,2402],{"class":39,"line":52},[37,2389,2390],{"class":179},"    var",[37,2392,2393],{"class":198}," speed",[37,2395,2396],{"class":160}," =",[37,2398,2399],{"class":786}," 400",[37,2401,875],{"class":160},[37,2403,2404],{"class":878}," \u002F\u002F ミリ秒\n",[37,2406,2407],{"class":39,"line":59},[37,2408,56],{"emptyLinePlaceholder":55},[37,2410,2411],{"class":39,"line":65},[37,2412,2413],{"class":878},"    \u002F\u002F アンカーの値取得（aタグのhref属性）\n",[37,2415,2416,2418,2421,2423,2426,2428,2431,2433,2435,2438,2440,2442,2445,2447,2449],{"class":39,"line":118},[37,2417,2390],{"class":179},[37,2419,2420],{"class":198}," href",[37,2422,183],{"class":160},[37,2424,2425],{"class":1108}," $",[37,2427,1112],{"class":164},[37,2429,2430],{"class":160},"this",[37,2432,2354],{"class":164},[37,2434,2357],{"class":160},[37,2436,2437],{"class":1108},"attr",[37,2439,1112],{"class":164},[37,2441,186],{"class":160},[37,2443,2444],{"class":189},"href",[37,2446,186],{"class":160},[37,2448,2354],{"class":164},[37,2450,764],{"class":160},[37,2452,2453],{"class":39,"line":124},[37,2454,56],{"emptyLinePlaceholder":55},[37,2456,2457],{"class":39,"line":130},[37,2458,2459],{"class":878},"    \u002F\u002F 移動先の要素を取得\n",[37,2461,2462,2464,2467,2469,2471,2473,2475,2478,2481,2484,2486,2489,2491,2493,2496,2499,2502,2504,2506,2509,2511,2513],{"class":39,"line":256},[37,2463,2390],{"class":179},[37,2465,2466],{"class":198}," target",[37,2468,2396],{"class":160},[37,2470,2425],{"class":1108},[37,2472,1112],{"class":164},[37,2474,2444],{"class":198},[37,2476,2477],{"class":160}," ==",[37,2479,2480],{"class":160}," \"",[37,2482,2483],{"class":189},"#",[37,2485,186],{"class":160},[37,2487,2488],{"class":160}," ||",[37,2490,2420],{"class":198},[37,2492,2477],{"class":160},[37,2494,2495],{"class":160}," \"\"",[37,2497,2498],{"class":160}," ?",[37,2500,2501],{"class":160}," '",[37,2503,732],{"class":189},[37,2505,2346],{"class":160},[37,2507,2508],{"class":160}," :",[37,2510,2420],{"class":198},[37,2512,2354],{"class":164},[37,2514,764],{"class":160},[37,2516,2517],{"class":39,"line":262},[37,2518,56],{"emptyLinePlaceholder":55},[37,2520,2521],{"class":39,"line":268},[37,2522,2523],{"class":878},"    \u002F\u002F 移動先の高さを取得\n",[37,2525,2526,2528,2531,2533,2535,2537,2540,2542,2544,2547],{"class":39,"line":274},[37,2527,2390],{"class":179},[37,2529,2530],{"class":198}," position",[37,2532,2396],{"class":160},[37,2534,2466],{"class":198},[37,2536,2357],{"class":160},[37,2538,2539],{"class":1108},"offset",[37,2541,2377],{"class":164},[37,2543,2357],{"class":160},[37,2545,2546],{"class":198},"top",[37,2548,764],{"class":160},[37,2550,2551],{"class":39,"line":835},[37,2552,56],{"emptyLinePlaceholder":55},[37,2554,2555],{"class":39,"line":848},[37,2556,2557],{"class":878},"    \u002F\u002F スムーススクロール\n",[37,2559,2560,2563,2565,2567,2570,2572,2574,2576,2579,2581,2583,2586,2588,2591,2594,2596,2598,2600,2603,2605,2607],{"class":39,"line":861},[37,2561,2562],{"class":1108},"    $",[37,2564,1112],{"class":164},[37,2566,2346],{"class":160},[37,2568,2569],{"class":189},"body,html",[37,2571,2346],{"class":160},[37,2573,2354],{"class":164},[37,2575,2357],{"class":160},[37,2577,2578],{"class":1108},"animate",[37,2580,1112],{"class":164},[37,2582,1462],{"class":160},[37,2584,2585],{"class":164},"scrollTop",[37,2587,758],{"class":160},[37,2589,2590],{"class":198},"position",[37,2592,2593],{"class":160},"},",[37,2595,2393],{"class":198},[37,2597,1230],{"class":160},[37,2599,2501],{"class":160},[37,2601,2602],{"class":189},"swing",[37,2604,2346],{"class":160},[37,2606,2354],{"class":164},[37,2608,764],{"class":160},[37,2610,2611,2614,2616],{"class":39,"line":882},[37,2612,2613],{"class":160},"}",[37,2615,2354],{"class":198},[37,2617,764],{"class":160},[13,2619,2620,2621,2624,2625,2628],{},"aタグのhref属性の文字列",[34,2622,2623],{},"[href=”#hoge”]","と移動先の要素にID",[34,2626,2627],{},"\u003Cdiv id=”hoge”>\u003C\u002Fdiv>","とさせることでこのスクロールができます。",[13,2630,2631],{},"しかし、原理的に必要なものは",[13,2633,2634],{},"どの場所に飛ばすかの情報を持ったトリガー（今回のaタグ）\n自身の場所を示すページ内で一意のIDをもつクラスまたはID\nがあれば可能です。しかし後述する理由よりできたらページスイングはaタグで行い、IDで区別する方法が中規模以上のサイトでは便利です。",[20,2636,2638],{"id":2637},"url-そのページ内のdom-idを参照している","URL + # =そのページ内のDOM IDを参照している",[13,2640,2641],{},"今回のスクロールではトリガーとなるaタグをクリックすると、urlに「#hoge」というのが付きます。実はurlに#がつくと、",[13,2643,2644],{},"そのurlつまり、そのページ内におけるDOMと#以降の文字列に合致する要素に飛ばしてくれます。実はJSがなくても自動スクロースができます。ただしアニメーションもなく画面が一瞬で切り替わるので、味気っぽなさはあります。",[13,2646,2647],{},"js(jquery)ではアニメーションを実装したいので書いただけです。",[289,2649,2651],{"id":2650},"つきで行うメリット","#つきで行うメリット",[13,2653,2654],{},"#を用いて移動先の要素を取得してアニメーションを実装すると、「url+#」でアクセスしたときにもアニメーションスクロールが効くように改変が可能になります。",[13,2656,2657],{},"今回はその実装はありませんが、Webにそのわっている機能を下地にスクリプトを書いた方が、独自のスクリプトより拡張性が高くなります。",[465,2659,2660],{},"html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":32,"searchDepth":52,"depth":52,"links":2662},[2663,2664],{"id":2328,"depth":46,"text":2328},{"id":2637,"depth":46,"text":2638,"children":2665},[2666],{"id":2650,"depth":52,"text":2651},[479],"2020-05-01",{},"\u002Farticles\u002Fjquery-anker",{"title":2320,"description":2320},"articles\u002Fjquery-anker",[2205,2674],"jquery","m8IR5HZJkkmOljGoU2QAnguTcrNVhjIf3JLMRS3OI-s",1780987141958]