[{"data":1,"prerenderedAt":14622},["ShallowReactive",2],{"category-devstack-4":3},{"count":4,"content":5},43,[6,939,1455,4115,5627,6190,6630,8133,11495,13956],{"id":7,"title":8,"body":9,"category":925,"createdAt":926,"description":927,"extension":928,"index":162,"meta":929,"navigation":452,"path":930,"publish":452,"seo":931,"series":932,"seriesTitle":933,"stem":934,"tag":935,"thumbnail":936,"updatedAt":937,"__hash__":938},"series\u002Fseries\u002Fnuxt-content-blog-1.md","Nuxt Content × SSG で作る静的ブログ。１：概念とセットアップ",{"type":10,"value":11,"toc":910},"minimark",[12,16,24,43,46,51,59,65,68,71,74,92,95,98,112,123,142,145,148,151,282,312,314,357,360,362,365,389,392,395,398,401,407,426,437,493,499,505,511,535,538,541,547,600,607,610,616,829,832,838,849,852,865,891,894,900,906],[13,14,15],"p",{},"こんにちはjunです。私のブログは2021年4月にwordpressを卒業し、Nuxt contentというものを使用してリニューアルしました。wordpressは簡単にサイトは作れますし使い勝手はいいですが、公開サーバーにCMSがあるためにセキュリティ的に問題だったり、大量に記事があるとパフォーマンスが落ちるということがあります。webデベロッパーならばNuxt.jsと静的書き出しぐらいやろうぜ！と思ったのも理由です。",[13,17,18,19,23],{},"このブログリニューアルにはデータ移行含めて２週間ほどかかりましたが、その途中で少し詰まったり工夫したりした箇所が結構あったのでシリーズ記事として、 ",[20,21,22],"strong",{},"「Nuxt Contentによる静的書き出しブログの作成方法」"," として書きたいと思います。シリーズを通して以下のことを解説しようと思います。（まだ予定です。もしかすると執筆途中で変わります。）",[25,26,27,31,34,37,40],"ol",{},[28,29,30],"li",{},"Nuxt Content の仕組みと基本的な使い方",[28,32,33],{},"記事のレンダリングと静的書き出しルーティング",[28,35,36],{},"記事一覧ページとページング実装",[28,38,39],{},"カテゴリーとタグ機能",[28,41,42],{},"記事の管理とデプロイ。SEO対策。アドセンスとアナリティクス設定",[13,44,45],{},"それでは一回目は早速、インストールから概念・基本的な使い方について説明していきます。Nuxt.jsにおける構成などは共有しますが、このサイトにおけるデザインの実装方法などは省略しますのでご了承ください。",[47,48,50],"h2",{"id":49},"nuxt-contentとは","Nuxt Contentとは？",[13,52,53,54,58],{},"nuxt contentはNuxt.jsのモジュールです。",[55,56,57],"code",{},"content\u002F","ディレクトリ配下にmarkdownを用いて記事原稿を作成し、Nuxt.jsがmarkdownを解析してオブジェクトとして利用できるようにしてくれます。",[13,60,61,64],{},[55,62,63],{},"$content","というインスタンスがグローバルに使用できますので、それらを利用してコンポーネントにレンダーするという仕組みです。",[13,66,67],{},"ブログを構成するソースが全てファイルで構成されるので、GitベースのCMSとして利用することができます。（記事の保存にDBを必要としない。）",[47,69,70],{"id":70},"自分のブログの構成について",[13,72,73],{},"今回のシリーズ記事では私の記事と同じ構成を作成できるように解説していこうと思います。2021年5月現在では以下のような構成・機能を持っています。",[75,76,77,80,83,86,89],"ul",{},[28,78,79],{},"記事詳細ページ",[28,81,82],{},"タグ・カテゴリー",[28,84,85],{},"各々の一覧ページとページング",[28,87,88],{},"シリーズ記事",[28,90,91],{},"静的書き出しとデプロイ",[13,93,94],{},"詳細に解説します。",[96,97,79],"h3",{"id":79},[13,99,100,101,104,105,108,109,111],{},"私のサイトでは",[55,102,103],{},"\u002Farticles\u002F{sulg}","、",[55,106,107],{},"\u002Fseries\u002F{sulg}\u002F{index}","というルートにて各記事本体を見ることができ、そのようなルールで構成されています。スラグ（sulg）は原稿マークダウンのファイル名と一致します。ソースでは",[55,110,57],{},"ディレクトリ配下にマークダウンファイルを以下のように格納しています。",[113,114,121],"pre",{"className":115,"code":117,"filename":118,"language":119,"meta":120},[116],"language-text","├── content\n│ ├── articles\n│ │ ├── aaaaaa.md\n│ │ ├── bbbbbb.md\n│ │\n│ └── series\n│ ├── ~~~~~.md\n│ ├── ~~~~~.md\n","Nuxt","text","",[55,122,117],{"__ignoreMap":120},[13,124,125,126,129,130,133,134,137,138,141],{},"上記のように格納することでコンポーネントで、例えば",[55,127,128],{},"this.$content('articles')","として呼び出すことでarticles配下のデータを取得できます。ファイル名＝スラグ名としているので、",[55,131,132],{},"\u002Farticles\u002Faaaaaaa","とすることで、",[55,135,136],{},"aaaaaa.md","の内容がレンダーされるようにしています。このへんのルーティング設定は",[55,139,140],{},"page\u002F","ディレクトリの構成で制御しています。第二回目で解説します。",[96,143,82],{"id":144},"タグカテゴリー",[13,146,147],{},"各記事ではタグとカテゴリーを指定できるようになっています。カテゴリー、タグをクリックするとその一覧に飛ぶのでユーザーはサイトのコンテンツを探しやすくなります。",[13,149,150],{},"タグとカテゴリーは実はマークダウンファイルに記述されています。例えばこの記事のマークダウンには一番最初に以下のようなyml形式の記述があります。",[113,152,156],{"className":153,"code":154,"language":155,"meta":120,"style":120},"language-yml shiki shiki-themes material-theme-ocean","---\ntitle: Nuxt Content × SSG で作る静的ブログ。１：概念とセットアップ\ndescription: Nuxt Content × SSG で作る静的ブログ。概念とセットアップについてまずは解説\ncategory: [devstack]\ntag: [js,nuxt]\nseries: nuxt-content-blog\nseriesTitle: Nuxt Content × SSG で作る静的ブログ。\nindex: 1\npublish: false\n---\n","yml",[55,157,158,167,182,193,210,231,242,253,265,277],{"__ignoreMap":120},[159,160,163],"span",{"class":161,"line":162},"line",1,[159,164,166],{"class":165},"s5Dmg","---\n",[159,168,170,174,178],{"class":161,"line":169},2,[159,171,173],{"class":172},"s-wAU","title",[159,175,177],{"class":176},"sAklC",":",[159,179,181],{"class":180},"sfyAc"," Nuxt Content × SSG で作る静的ブログ。１：概念とセットアップ\n",[159,183,185,188,190],{"class":161,"line":184},3,[159,186,187],{"class":172},"description",[159,189,177],{"class":176},[159,191,192],{"class":180}," Nuxt Content × SSG で作る静的ブログ。概念とセットアップについてまずは解説\n",[159,194,196,199,201,204,207],{"class":161,"line":195},4,[159,197,198],{"class":172},"category",[159,200,177],{"class":176},[159,202,203],{"class":176}," [",[159,205,206],{"class":180},"devstack",[159,208,209],{"class":176},"]\n",[159,211,213,216,218,220,223,226,229],{"class":161,"line":212},5,[159,214,215],{"class":172},"tag",[159,217,177],{"class":176},[159,219,203],{"class":176},[159,221,222],{"class":180},"js",[159,224,225],{"class":176},",",[159,227,228],{"class":180},"nuxt",[159,230,209],{"class":176},[159,232,234,237,239],{"class":161,"line":233},6,[159,235,236],{"class":172},"series",[159,238,177],{"class":176},[159,240,241],{"class":180}," nuxt-content-blog\n",[159,243,245,248,250],{"class":161,"line":244},7,[159,246,247],{"class":172},"seriesTitle",[159,249,177],{"class":176},[159,251,252],{"class":180}," Nuxt Content × SSG で作る静的ブログ。\n",[159,254,256,259,261],{"class":161,"line":255},8,[159,257,258],{"class":172},"index",[159,260,177],{"class":176},[159,262,264],{"class":263},"sx098"," 1\n",[159,266,268,271,273],{"class":161,"line":267},9,[159,269,270],{"class":172},"publish",[159,272,177],{"class":176},[159,274,276],{"class":275},"sbqyR"," false\n",[159,278,280],{"class":161,"line":279},10,[159,281,166],{"class":165},[13,283,284,285,104,288,104,290,292,293,104,295,104,298,301,302,304,305,307,308,311],{},"上記のカラムは自由につけることができます。例えば",[55,286,287],{},"serise",[55,289,258],{},[55,291,270],{},"は私が独自につけています。一方で",[55,294,173],{},[55,296,297],{},"updateAt",[55,299,300],{},"createdAt","など自動的に付与される属性もあります。",[55,303,215],{},",\n",[55,306,198],{},"は配列形式の記述をすることでjs側でも配列で扱うことができます。",[55,309,310],{},"taxonomy.js","というファイルでキーとカテゴリー名、タグを管理しています。（storeでもOKですが、ちょっと困ることがありました。こちらも後で解説します。）",[96,313,85],{"id":85},[75,315,316,321,326,331,337,342,347,352],{},[28,317,318],{},[55,319,320],{},"\u002Farticles\u002F",[28,322,323],{},[55,324,325],{},"\u002Fseries\u002F{sulg}\u002F",[28,327,328],{},[55,329,330],{},"\u002Fcategory\u002F{category_key}\u002F",[28,332,333,336],{},[55,334,335],{},"\u002Ftag\u002F{tag_key}\u002F","\nというパスではその記事種別、カテゴリーの一覧が表示されます。１ページあたり15記事表示されるので記事が多くなるとページングが発生します。ページングの際は",[28,338,339],{},[55,340,341],{},"\u002Farticles\u002Fpage\u002F{n}",[28,343,344],{},[55,345,346],{},"\u002Fseries\u002F{sulg}\u002Fpage\u002F{n}",[28,348,349],{},[55,350,351],{},"\u002Fcategory\u002F{category_key}\u002Fpage\u002F{n}",[28,353,354],{},[55,355,356],{},"\u002Ftag\u002F{tag_key}\u002Fpage\u002F{n}",[13,358,359],{},"というルーティングで現在ページを判別しています。ちなみに静的書き出しするときはページごとにディレクトリが作成されます。",[96,361,91],{"id":91},[13,363,364],{},"私の場合、まずNuxt.jsには静的書き出し（SSG:static site generate）を使用して作成してページ分のHTMLを生成します。そして生成されたHTMLと画像をrsyncで公開サーバーに送っています。作成全体の流れを簡単に説明しますと、",[25,366,367,370,373,376,382],{},[28,368,369],{},"markdownで原稿を記述",[28,371,372],{},"pageコンポーネントに原稿内容をレンダーする。",[28,374,375],{},"公開してよい原稿のみをクエリで取得してルーティングを設定する。",[28,377,378,381],{},[55,379,380],{},"npm run generate"," を使用して作成した原稿分のHTMLを生成する",[28,383,384,385,388],{},"rsyncを使用して",[55,386,387],{},"\u002Fdist","配下を公開サーバーを同期する",[13,390,391],{},"上記のような感じです。結構簡単です。",[13,393,394],{},"以上が簡単な概念と構成の説明です。それでは以降からは具体的なインストールと使い方を説明していきます。",[47,396,397],{"id":397},"インストール方法とセットアップ",[13,399,400],{},"Nuxt contentはNuxt.jsのモジュールですのでまずはNuxtプロジェクトを作成します。",[113,402,405],{"className":403,"code":404,"language":119},[116],"npx create-nuxt-app \u003Cproject-name>\n\n... #普通にNuxtのインストールをする\n\nnpm install @nuxt\u002Fcontent\n\n",[55,406,404],{"__ignoreMap":120},[408,409,413,414],"div",{"className":410},[411,412],"alert","alert-success","\n各種の使用バージョンは以下の通りです。\n",[75,415,416,417,416,420,416,423],{},"\n ",[28,418,419],{},"Node.js：v12.19.0",[28,421,422],{},"Nuxt.js：2.14.12",[28,424,425],{},"Nuxt Content：1.14.0",[13,427,428,429,432,433,436],{},"インストールが終わったので、",[55,430,431],{},"nuxt.config.js","も",[55,434,435],{},"modules","に以下のように追記します。",[113,438,441],{"className":439,"code":440,"filename":431,"language":222,"meta":120,"style":120},"language-js shiki shiki-themes material-theme-ocean"," ...\n\n modules: [\n '@nuxt\u002Fcontent',\n ],\n\n ...\n",[55,442,443,448,454,465,478,485,489],{"__ignoreMap":120},[159,444,445],{"class":161,"line":162},[159,446,447],{"class":176}," ...\n",[159,449,450],{"class":161,"line":169},[159,451,453],{"emptyLinePlaceholder":452},true,"\n",[159,455,456,459,461],{"class":161,"line":184},[159,457,458],{"class":165}," modules",[159,460,177],{"class":176},[159,462,464],{"class":463},"s0W1g"," [\n",[159,466,467,470,473,476],{"class":161,"line":195},[159,468,469],{"class":176}," '",[159,471,472],{"class":180},"@nuxt\u002Fcontent",[159,474,475],{"class":176},"'",[159,477,304],{"class":176},[159,479,480,483],{"class":161,"line":212},[159,481,482],{"class":463}," ]",[159,484,304],{"class":176},[159,486,487],{"class":161,"line":233},[159,488,453],{"emptyLinePlaceholder":452},[159,490,491],{"class":161,"line":244},[159,492,447],{"class":176},[13,494,495,496,498],{},"そして",[55,497,57],{},"というディレクトリをプロジェクトルートに作成します。",[113,500,503],{"className":501,"code":502,"language":119},[116],".\n├── README.md\n├── assets\n├── components\n├── content # これをつくる\n├── layouts\n├── middleware\n├── node_modules\n├── nuxt.config.js\n├── package-lock.json\n├── package.json\n├── pages\n├── plugins\n├── static\n├── store\n",[55,504,502],{"__ignoreMap":120},[13,506,507,508,510],{},"マークダウンファイルは",[55,509,57],{},"配下に作成していくと、nuxt contentは自動的にそれらのファイルを解析してくれます。",[13,512,495,513,515,516,519,520,523,524,527,528,530,531,534],{},[55,514,57],{},"ディレクトリを作成したらさらに",[55,517,518],{},"articles\u002F","といったディレクトリを作っておくと良いです。別に",[55,521,522],{},"articles","としなくてもいいですが、サブディレクトリ を作ることで",[55,525,526],{},"$content('articles')","のように区別してコンテンツを取得できます。私の場合は",[55,529,518],{},"と",[55,532,533],{},"series\u002F","というサブディレクトリでコンテンツを区切っています。",[47,536,537],{"id":537},"記事を試しに作成してみる",[96,539,540],{"id":540},"マークダウン原稿を作成する",[13,542,543,544,546],{},"それでは",[55,545,518],{},"を作ったら何かマークダウンを作成してみましょう。",[113,548,553],{"className":549,"code":550,"filename":551,"language":552,"meta":120,"style":120},"language-markdown shiki shiki-themes material-theme-ocean","---\ntitle: テスト\ndescription:テスト\n---\nここに記事内容をマークダウン で記述します。\n\n## 見出し\n- リスト\n- リスト\n- リスト\n","articles\u002Ftest.md","markdown",[55,554,555,559,564,569,573,578,582,587,592,596],{"__ignoreMap":120},[159,556,557],{"class":161,"line":162},[159,558,166],{},[159,560,561],{"class":161,"line":169},[159,562,563],{},"title: テスト\n",[159,565,566],{"class":161,"line":184},[159,567,568],{},"description:テスト\n",[159,570,571],{"class":161,"line":195},[159,572,166],{},[159,574,575],{"class":161,"line":212},[159,576,577],{},"ここに記事内容をマークダウン で記述します。\n",[159,579,580],{"class":161,"line":233},[159,581,453],{"emptyLinePlaceholder":452},[159,583,584],{"class":161,"line":244},[159,585,586],{},"## 見出し\n",[159,588,589],{"class":161,"line":255},[159,590,591],{},"- リスト\n",[159,593,594],{"class":161,"line":267},[159,595,591],{},[159,597,598],{"class":161,"line":279},[159,599,591],{},[13,601,602,603,606],{},"まずnuxt contentでマークダウン原稿を作る際には、１・２行目に示されたように",[55,604,605],{},"---","で囲ったymlにて書かれたメタデータを記述します。メタデータをかけたら、マークダウン 形式で内容を記述していきます。",[96,608,609],{"id":609},"ページコンポーネントで読み込む",[13,611,612,613,615],{},"サンプルを作成したら",[55,614,140],{},"ディレクトリでページコンポーネントを作成します。今回は簡単に以下のような構成にしてみます。",[113,617,622],{"className":618,"code":619,"filename":620,"language":621,"meta":120,"style":120},"language-vue shiki shiki-themes material-theme-ocean","\u003Ctemplate>\n \u003Cdiv>\n {{content}}\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\u003Cscript>\nexport default{\n name:'test_page',\n async asyncData({ store,$content, params }) {\n const content = await $content('articles').fetch();\n\n return {\n content,\n }\n },\n}\n\u003C\u002Fscript>\n","pages\u002Ftest.vue","vue",[55,623,624,635,644,649,658,667,676,689,705,740,780,785,794,802,808,814,820],{"__ignoreMap":120},[159,625,626,629,632],{"class":161,"line":162},[159,627,628],{"class":176},"\u003C",[159,630,631],{"class":172},"template",[159,633,634],{"class":176},">\n",[159,636,637,640,642],{"class":161,"line":169},[159,638,639],{"class":176}," \u003C",[159,641,408],{"class":172},[159,643,634],{"class":176},[159,645,646],{"class":161,"line":184},[159,647,648],{"class":463}," {{content}}\n",[159,650,651,654,656],{"class":161,"line":195},[159,652,653],{"class":176}," \u003C\u002F",[159,655,408],{"class":172},[159,657,634],{"class":176},[159,659,660,663,665],{"class":161,"line":212},[159,661,662],{"class":176},"\u003C\u002F",[159,664,631],{"class":172},[159,666,634],{"class":176},[159,668,669,671,674],{"class":161,"line":233},[159,670,628],{"class":176},[159,672,673],{"class":172},"script",[159,675,634],{"class":176},[159,677,678,682,686],{"class":161,"line":244},[159,679,681],{"class":680},"sJ14y","export",[159,683,685],{"class":684},"s6cf3"," default",[159,687,688],{"class":176},"{\n",[159,690,691,694,696,698,701,703],{"class":161,"line":255},[159,692,693],{"class":165}," name",[159,695,177],{"class":176},[159,697,475],{"class":176},[159,699,700],{"class":180},"test_page",[159,702,475],{"class":176},[159,704,304],{"class":176},[159,706,707,710,714,717,720,723,725,727,729,732,735,738],{"class":161,"line":267},[159,708,709],{"class":463}," async",[159,711,713],{"class":712},"sdLwU"," asyncData",[159,715,716],{"class":172},"(",[159,718,719],{"class":176},"{",[159,721,722],{"class":463}," store",[159,724,225],{"class":176},[159,726,63],{"class":463},[159,728,225],{"class":176},[159,730,731],{"class":463}," params",[159,733,734],{"class":176}," }",[159,736,737],{"class":172},") ",[159,739,688],{"class":176},[159,741,742,745,748,751,754,757,759,761,763,765,768,771,774,777],{"class":161,"line":279},[159,743,744],{"class":680}," const",[159,746,747],{"class":463}," content",[159,749,750],{"class":176}," =",[159,752,753],{"class":684}," await",[159,755,756],{"class":712}," $content",[159,758,716],{"class":172},[159,760,475],{"class":176},[159,762,522],{"class":180},[159,764,475],{"class":176},[159,766,767],{"class":172},")",[159,769,770],{"class":176},".",[159,772,773],{"class":712},"fetch",[159,775,776],{"class":172},"()",[159,778,779],{"class":176},";\n",[159,781,783],{"class":161,"line":782},11,[159,784,453],{"emptyLinePlaceholder":452},[159,786,788,791],{"class":161,"line":787},12,[159,789,790],{"class":684}," return",[159,792,793],{"class":176}," {\n",[159,795,797,800],{"class":161,"line":796},13,[159,798,799],{"class":463}," content",[159,801,304],{"class":176},[159,803,805],{"class":161,"line":804},14,[159,806,807],{"class":176}," }\n",[159,809,811],{"class":161,"line":810},15,[159,812,813],{"class":176}," },\n",[159,815,817],{"class":161,"line":816},16,[159,818,819],{"class":176},"}\n",[159,821,823,825,827],{"class":161,"line":822},17,[159,824,662],{"class":176},[159,826,673],{"class":172},[159,828,634],{"class":176},[13,830,831],{},"画面は以下のように映ると思います。（私の場合はたくさん記事があるので、たくさんあります。）",[833,834],"image-render",{":src":835,":width":836,":center":837},"'_mix\u002Fsch-2021-05-05 8.44.11.png'","'400px'","true",[13,839,840,841,844,845,848],{},"変数",[55,842,843],{},"content","には",[55,846,847],{},"$content('articles').fetch()","によって取得されたページのデータがオブジェクト形式で入っています。",[833,850],{":src":851,":width":836,":center":837},"'_mix\u002Fsch-2021-05-05 8.48.11.png'",[13,853,854,856,857,860,861,864],{},[55,855,847],{},"では",[55,858,859],{},"aticles","配下のデータが配列でくるので、",[55,862,863],{},"$content('articles\u002Ftest').fetch()","としてみると単体の該当するファイルが提供されます。",[13,866,867,870,871,878,879,882,883,886,887,890],{},[55,868,869],{},"{{content}}","ではただのオブジェクトしか表示されません。",[872,873,877],"a",{"href":874,"rel":875},"https:\u002F\u002Fcontent.nuxtjs.org\u002Fja\u002Fdisplaying",[876],"nofollow","公式サイトのように"," ",[55,880,881],{},"\u003Cnuxt-content :document=\"content\" \u002F>","というコンポーネントの",[55,884,885],{},"document","プロップスに",[55,888,889],{},"$content()","で取得したものを渡すことで、HTMLでレンダーされます。",[47,892,893],{"id":893},"以上でセットアップ完了",[13,895,896,897,899],{},"以上がNuxt Contentのセットアップと基本的な使い方です。ひとまずモジュールをインストールして",[55,898,889],{},"を用いて対応するコンテンツを取得することで、ブログを作成できます。",[13,901,902,903,905],{},"次回は個別記事のレンダリングと",[55,904,889],{},"の詳細と静的書き出しを行っていこうと思います。",[907,908,909],"style",{},"html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}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 .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}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 .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}",{"title":120,"searchDepth":184,"depth":184,"links":911},[912,913,919,920,924],{"id":49,"depth":169,"text":50},{"id":70,"depth":169,"text":70,"children":914},[915,916,917,918],{"id":79,"depth":184,"text":79},{"id":144,"depth":184,"text":82},{"id":85,"depth":184,"text":85},{"id":91,"depth":184,"text":91},{"id":397,"depth":169,"text":397},{"id":537,"depth":169,"text":537,"children":921},[922,923],{"id":540,"depth":184,"text":540},{"id":609,"depth":184,"text":609},{"id":893,"depth":169,"text":893},[206],"2021-05-04","Nuxt Content × SSG で作る静的ブログ。概念とセットアップについてまずは解説","md",{},"\u002Fseries\u002Fnuxt-content-blog-1",{"title":8,"description":927},"nuxt-content-blog","Nuxt Content × SSG で作る静的ブログ。","series\u002Fnuxt-content-blog-1",[222,228],"_mix\u002Flogo-dark.jpg",null,"NqL_rCruXq92Ga0wFzu-aNSycgZTrVDwKB90Uio1hxw",{"id":940,"title":941,"body":942,"category":1443,"createdAt":1444,"description":941,"extension":928,"index":937,"meta":1445,"navigation":452,"path":1446,"publish":452,"seo":1447,"series":937,"seriesTitle":937,"stem":1448,"tag":1449,"thumbnail":1453,"updatedAt":937,"__hash__":1454},"articles\u002Farticles\u002Flaravel-mixx-heroku-fail.md","Laravel mixのアセットがherokuで動かない時の対処法",{"type":10,"value":943,"toc":1434},[944,947,950,953,957,964,967,970,974,988,992,995,998,1002,1017,1033,1046,1057,1061,1068,1078,1248,1251,1398,1407,1410,1413,1424,1431],[13,945,946],{},"こんにちはjunです。最近よくLaravelの開発を行っていて、プロトタイプとかをherokuにあげるのですがLaravel mixのアセットが動かない（main.jsが404）でちょっと困ったので、今回はその対処法を書きたいと思います。",[13,948,949],{},"Laravel\bmixの説明を軽くするので、さっさと解決策みたいひとは「ビルドアセットをgitignoreしていた」から参照してください。なお使用環境は以下の通りです。",[13,951,952],{},"Laravel 6\nPHP 7.4\nNode.js 12.21（開発）\nNode.js 14.16（heroku）",[47,954,956],{"id":955},"laravel-mixって","Laravel Mixって？",[13,958,959,960,963],{},"Laravel MixはLaravelが公式に出している、JS・CSSのアセットコンパイラとモジュールバンドラです。",[55,961,962],{},"resource","配下のjsやsassをコンパイルしたり、バンドルするwebpackの設定がすでにLaraveに最適化されています。webpackをほとんど触らずともvue、react、sass、そのほかjsライブラリをもちいた開発ができます。",[13,965,966],{},"resource 配下のアセットはLaravel Mixによってpublic配下に自動的に吐かれるようになっています。開発時にはnpm run watchをしていますが、よく見るとpublic配下に開発用ビルドしたアセットファイルが逐一置かれています。",[13,968,969],{},"大体のLaraveフロントエンドではこのMixを用いて開発していることが多いと思います。しかしherokuや本番環境にあげた時にちょっと問題がおきました。",[47,971,973],{"id":972},"mainjs-is-not-found","main.js is not found",[13,975,976,977,979,980,983,984,987],{},"Laravel Mixでフロントを構築して、ある程度バック含めて完成したのでherokuにデプロイしてみました。ビルドは普通に成功し、満を辞して目的の画面をみても",[55,978,973],{},"となってしましました。",[55,981,982],{},"main.js","にはビルドしたvue.jsのプロジェクトがあるはずなのにと思い、サーバーに入って",[55,985,986],{},"public\u002Fjs","配下をみてみたところ、何もありませんでした。",[96,989,991],{"id":990},"原因その１ビルドアセットをgitignoreしていた","原因その１：ビルドアセットをgitignoreしていた",[13,993,994],{},"ビルドされたアセットはpublic配下に置かれますが、ファイル量が膨大だったり、開発モードと本番モードが混じる可能性があること、あとどうせコロコロ変わるのでバージョン管理から外そうと思い、public\u002Fjsとpublic\u002Fcssはバージョン管理から外していました。",[13,996,997],{},"herokuは基本的にgitを用いてデプロイします。管理対象外のファイルはもちろんherokuサーバー上にないので、アセットがあるはずもありません。であればherokuにデプロイした時にLaravel Mixを叩いて、ビルドすれば解決します。",[96,999,1001],{"id":1000},"原因その２laravel-mixがdevdependencies","原因その２：Laravel MixがdevDependencies",[13,1003,1004,1005,1008,1009,1012,1013,1016],{},"Herokuでは",[55,1006,1007],{},"NODE_ENV","が",[55,1010,1011],{},"production","（本番環境）で定義されていると、",[55,1014,1015],{},"devDependencies","がプリーニングされてしまい、ビルドがうまく走りません。",[408,1018,1020,1021,1024],{"className":1019},[411,412],"\nデフォルトでは、Heroku は ​package.json​ の ​dependencies​ および ​devDependencies​ に記載されているすべての依存関係をインストールします。\n",[13,1022,1023],{},"インストールおよび​ビルドステップ​を実行した後、 Heroku はアプリケーションをデプロイする前に、​devDependencies​ に宣言されているパッケージを取り除きます。",[13,1025,1026],{},[1027,1028,1029],"small",{},[872,1030,1031],{"href":1031,"rel":1032},"https:\u002F\u002Fdevcenter.heroku.com\u002Fja\u002Farticles\u002Fnodejs-support#skip-pruning",[876],[13,1034,1035,1036,1041,1042,1045],{},"インストールおよび​",[872,1037,1040],{"href":1038,"rel":1039},"https:\u002F\u002Fdevcenter.heroku.com\u002Farticles\u002Fnodejs-support#heroku-specific-build-steps",[876],"ビルドステップ","​を実行した後、 Heroku はアプリケーションをデプロイする前に、",[55,1043,1044],{},"​devDependencies​"," に宣言されているパッケージを取り除きます。",[13,1047,1048,1049,1052,1053,1056],{},"対策としては",[55,1050,1051],{},"package.json","をいじって",[55,1054,1055],{},"dependencies","に移動します。デフォルトでLaravel Mixはdevの方にインストールされます。それを移動してプッシュすればひとまずLaravel Mixのビルドがうまくいきます。",[96,1058,1060],{"id":1059},"原因その３npm-run-productionを動かすように設定","原因その３：npm run productionを動かすように設定",[13,1062,1063,1064,1067],{},"その２に加えて、今度はherokuデプロイの際にLaravel Mixのビルドスクリプトがキックされるように設定します。herokuはNode.jsのプロジェクトがあり、そのスクリプトに",[55,1065,1066],{},"npm run build","がある場合はそれを実行してくれます。",[13,1069,1070,1071,1073,1074,1077],{},"初期の",[55,1072,1051],{},"のスクリプトは",[55,1075,1076],{},"build","がないので、mixが実行されません。",[113,1079,1084],{"className":1080,"code":1081,"filename":1082,"language":1083,"meta":120,"style":120},"language-json shiki shiki-themes material-theme-ocean","\"scripts\": {\n \"dev\": \"npm run development\",\n \"development\": \"cross-env NODE_ENV=development node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\",\n \"watch\": \"npm run development -- --watch\",\n \"watch-poll\": \"npm run watch -- --watch-poll\",\n \"hot\": \"cross-env NODE_ENV=development node_modules\u002Fwebpack-dev-server\u002Fbin\u002Fwebpack-dev-server.js --inline --hot --disable-host-check --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\",\n \"prod\": \"npm run production\",\n \"production\": \"cross-env NODE_ENV=production node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --no-progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\"\n},\n","pakage.json","json",[55,1085,1086,1101,1123,1143,1163,1183,1203,1223,1241],{"__ignoreMap":120},[159,1087,1088,1091,1094,1096,1099],{"class":161,"line":162},[159,1089,1090],{"class":176},"\"",[159,1092,1093],{"class":180},"scripts",[159,1095,1090],{"class":176},[159,1097,1098],{"class":463},": ",[159,1100,688],{"class":176},[159,1102,1103,1106,1109,1111,1113,1116,1119,1121],{"class":161,"line":169},[159,1104,1105],{"class":176}," \"",[159,1107,1108],{"class":680},"dev",[159,1110,1090],{"class":176},[159,1112,177],{"class":176},[159,1114,1115],{"class":176}," \"",[159,1117,1118],{"class":180},"npm run development",[159,1120,1090],{"class":176},[159,1122,304],{"class":176},[159,1124,1125,1127,1130,1132,1134,1136,1139,1141],{"class":161,"line":184},[159,1126,1105],{"class":176},[159,1128,1129],{"class":680},"development",[159,1131,1090],{"class":176},[159,1133,177],{"class":176},[159,1135,1115],{"class":176},[159,1137,1138],{"class":180},"cross-env NODE_ENV=development node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js",[159,1140,1090],{"class":176},[159,1142,304],{"class":176},[159,1144,1145,1147,1150,1152,1154,1156,1159,1161],{"class":161,"line":195},[159,1146,1105],{"class":176},[159,1148,1149],{"class":680},"watch",[159,1151,1090],{"class":176},[159,1153,177],{"class":176},[159,1155,1115],{"class":176},[159,1157,1158],{"class":180},"npm run development -- --watch",[159,1160,1090],{"class":176},[159,1162,304],{"class":176},[159,1164,1165,1167,1170,1172,1174,1176,1179,1181],{"class":161,"line":212},[159,1166,1105],{"class":176},[159,1168,1169],{"class":680},"watch-poll",[159,1171,1090],{"class":176},[159,1173,177],{"class":176},[159,1175,1115],{"class":176},[159,1177,1178],{"class":180},"npm run watch -- --watch-poll",[159,1180,1090],{"class":176},[159,1182,304],{"class":176},[159,1184,1185,1187,1190,1192,1194,1196,1199,1201],{"class":161,"line":233},[159,1186,1105],{"class":176},[159,1188,1189],{"class":680},"hot",[159,1191,1090],{"class":176},[159,1193,177],{"class":176},[159,1195,1115],{"class":176},[159,1197,1198],{"class":180},"cross-env NODE_ENV=development node_modules\u002Fwebpack-dev-server\u002Fbin\u002Fwebpack-dev-server.js --inline --hot --disable-host-check --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js",[159,1200,1090],{"class":176},[159,1202,304],{"class":176},[159,1204,1205,1207,1210,1212,1214,1216,1219,1221],{"class":161,"line":244},[159,1206,1105],{"class":176},[159,1208,1209],{"class":680},"prod",[159,1211,1090],{"class":176},[159,1213,177],{"class":176},[159,1215,1115],{"class":176},[159,1217,1218],{"class":180},"npm run production",[159,1220,1090],{"class":176},[159,1222,304],{"class":176},[159,1224,1225,1227,1229,1231,1233,1235,1238],{"class":161,"line":255},[159,1226,1105],{"class":176},[159,1228,1011],{"class":680},[159,1230,1090],{"class":176},[159,1232,177],{"class":176},[159,1234,1115],{"class":176},[159,1236,1237],{"class":180},"cross-env NODE_ENV=production node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --no-progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js",[159,1239,1240],{"class":176},"\"\n",[159,1242,1243,1246],{"class":161,"line":267},[159,1244,1245],{"class":176},"}",[159,1247,304],{"class":463},[13,1249,1250],{},"ちょうどprodというのがあるのでbuildに変えてやりましょう。",[113,1252,1254],{"className":1080,"code":1253,"filename":1082,"language":1083,"meta":120,"style":120},"\"scripts\": {\n \"dev\": \"npm run development\",\n \"development\": \"cross-env NODE_ENV=development node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\",\n \"watch\": \"npm run development -- --watch\",\n \"watch-poll\": \"npm run watch -- --watch-poll\",\n \"hot\": \"cross-env NODE_ENV=development node_modules\u002Fwebpack-dev-server\u002Fbin\u002Fwebpack-dev-server.js --inline --hot --disable-host-check --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\",\n \"build\": \"npm run production\",\n \"production\": \"cross-env NODE_ENV=production node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --no-progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\"\n},\n",[55,1255,1256,1268,1286,1304,1322,1340,1358,1376,1392],{"__ignoreMap":120},[159,1257,1258,1260,1262,1264,1266],{"class":161,"line":162},[159,1259,1090],{"class":176},[159,1261,1093],{"class":180},[159,1263,1090],{"class":176},[159,1265,1098],{"class":463},[159,1267,688],{"class":176},[159,1269,1270,1272,1274,1276,1278,1280,1282,1284],{"class":161,"line":169},[159,1271,1105],{"class":176},[159,1273,1108],{"class":680},[159,1275,1090],{"class":176},[159,1277,177],{"class":176},[159,1279,1115],{"class":176},[159,1281,1118],{"class":180},[159,1283,1090],{"class":176},[159,1285,304],{"class":176},[159,1287,1288,1290,1292,1294,1296,1298,1300,1302],{"class":161,"line":184},[159,1289,1105],{"class":176},[159,1291,1129],{"class":680},[159,1293,1090],{"class":176},[159,1295,177],{"class":176},[159,1297,1115],{"class":176},[159,1299,1138],{"class":180},[159,1301,1090],{"class":176},[159,1303,304],{"class":176},[159,1305,1306,1308,1310,1312,1314,1316,1318,1320],{"class":161,"line":195},[159,1307,1105],{"class":176},[159,1309,1149],{"class":680},[159,1311,1090],{"class":176},[159,1313,177],{"class":176},[159,1315,1115],{"class":176},[159,1317,1158],{"class":180},[159,1319,1090],{"class":176},[159,1321,304],{"class":176},[159,1323,1324,1326,1328,1330,1332,1334,1336,1338],{"class":161,"line":212},[159,1325,1105],{"class":176},[159,1327,1169],{"class":680},[159,1329,1090],{"class":176},[159,1331,177],{"class":176},[159,1333,1115],{"class":176},[159,1335,1178],{"class":180},[159,1337,1090],{"class":176},[159,1339,304],{"class":176},[159,1341,1342,1344,1346,1348,1350,1352,1354,1356],{"class":161,"line":233},[159,1343,1105],{"class":176},[159,1345,1189],{"class":680},[159,1347,1090],{"class":176},[159,1349,177],{"class":176},[159,1351,1115],{"class":176},[159,1353,1198],{"class":180},[159,1355,1090],{"class":176},[159,1357,304],{"class":176},[159,1359,1360,1362,1364,1366,1368,1370,1372,1374],{"class":161,"line":244},[159,1361,1105],{"class":176},[159,1363,1076],{"class":680},[159,1365,1090],{"class":176},[159,1367,177],{"class":176},[159,1369,1115],{"class":176},[159,1371,1218],{"class":180},[159,1373,1090],{"class":176},[159,1375,304],{"class":176},[159,1377,1378,1380,1382,1384,1386,1388,1390],{"class":161,"line":255},[159,1379,1105],{"class":176},[159,1381,1011],{"class":680},[159,1383,1090],{"class":176},[159,1385,177],{"class":176},[159,1387,1115],{"class":176},[159,1389,1237],{"class":180},[159,1391,1240],{"class":176},[159,1393,1394,1396],{"class":161,"line":267},[159,1395,1245],{"class":176},[159,1397,304],{"class":463},[13,1399,1400,1401,1403,1404,1406],{},"こうすれば",[55,1402,1066],{}," が ",[55,1405,1218],{}," を実行して本番用のアセットを作ってくれます。これで解決です。",[47,1408,1409],{"id":1409},"ビルドアセットがうまく出力されない時に考えるべきこと",[13,1411,1412],{},"今回はいくつかのファイルをビルドする必要があり、デプロイ作業が自動で行われる状況でした。開発環境ではアセットがあるのに、本番だとなくなっているという場合は以下のことを考えましょう。",[75,1414,1415,1418,1421],{},[28,1416,1417],{},"ファイルはある？（サーバーに入ってlsしてチェック）",[28,1419,1420],{},"ビルドに必要なモジュールがインストールされているか？",[28,1422,1423],{},"ビルドスクリプトはキックされているか？",[13,1425,1426,1427,1430],{},"大体こうゆうときはビルドがうまくいっていないので、そこからチェックしていくといいです。ちなみに私が検索した時のワードは ",[20,1428,1429],{},"「heroku laravel mix ビルド」"," でした。それではまた。",[907,1432,1433],{},"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 .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}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":120,"searchDepth":184,"depth":184,"links":1435},[1436,1437,1442],{"id":955,"depth":169,"text":956},{"id":972,"depth":169,"text":973,"children":1438},[1439,1440,1441],{"id":990,"depth":184,"text":991},{"id":1000,"depth":184,"text":1001},{"id":1059,"depth":184,"text":1060},{"id":1409,"depth":169,"text":1409},[206],"2021-03-27",{},"\u002Farticles\u002Flaravel-mixx-heroku-fail",{"title":941,"description":941},"articles\u002Flaravel-mixx-heroku-fail",[222,1450,1451,1452],"webpack","laravel","infrastructure","_mix\u002F8_laravel-icon.3f70de72f3.jpg","zvECdzfredOonr51btVrUrKqFCKw247gmW-jXba47XU",{"id":1456,"title":1457,"body":1458,"category":4104,"createdAt":1444,"description":4105,"extension":928,"index":162,"meta":4106,"navigation":452,"path":4107,"publish":452,"seo":4108,"series":4109,"seriesTitle":4110,"stem":4111,"tag":4112,"thumbnail":4113,"updatedAt":937,"__hash__":4114},"series\u002Fseries\u002Fwell-study-webpack-1.md","ちゃんと理解するWebpack5。１：webpack基礎とSass・jsのバンドル",{"type":10,"value":1459,"toc":4090},[1460,1465,1472,1475,1486,1489,1492,1503,1506,1509,1512,1523,1526,1529,1532,1540,1557,1560,1564,1567,1573,1576,1582,1598,1604,1607,1800,1803,1867,1884,1889,2016,2032,2041,2047,2121,2129,2135,2144,2148,2151,2153,2164,2167,2186,2319,2482,2602,2609,2625,2631,2635,2638,2641,2644,2650,2738,2748,2752,2755,2759,2762,2776,2779,2791,2797,2800,3197,3201,3204,3210,3213,3245,3300,3333,3341,3632,3638,3761,3767,3770,4013,4025,4038,4069,4072,4078,4081,4084,4087],[408,1461,1464],{"className":1462},[411,1463],"alert-info","\n2021年10月30日：修正事項があっため追記しました。\n",[13,1466,1467,1468,1471],{},"こんにちはjunです。最近の自社開発では息を吸うようにNuxt.jsやVue.js、React.jsなどを使用しています。私もそれらのJSライブラリをよく使用するのですが、使いは初めて１年ほどにして「もっと",[20,1469,1470],{},"JSライブラリやNode.jsの開発をしっかり理解しないと」"," という場面が増えてきました。",[13,1473,1474],{},"VueやNuxt、Reactなどは特に、ライブラリ自身のチュートリアルやインストール時のセットアップが充実しすぎてwebpack.config.jsさえ見ることもなくなりました。すぐに開発できるのが強みですが、弊害として",[75,1476,1477,1480,1483],{},[28,1478,1479],{},"実際の細かい原理や仕組みを把握できない",[28,1481,1482],{},"なにか個別にカスタマイズしようとしてもわからない",[28,1484,1485],{},"応用がわからない",[13,1487,1488],{},"といったことが生じています。フレームワークやライブラリは便利ですが、簡単でもいいので構成の概念を知っておくと細かいカスタマイズや環境構築ができるようになります。",[13,1490,1491],{},"VueやReactを使わないプロジェクトなんてざらにありますし、webpackの設定ができるだけでもフロントエンドの開発でできることが違ってきます。数回に分けてwebpackを使用した以下のパターンに分けて環境構築解説をしていきたいと思います。",[75,1493,1494,1497,1500],{},[28,1495,1496],{},"webpack基礎とSass・js",[28,1498,1499],{},"babelの導入、画像のバンドル、複数ファイル出力",[28,1501,1502],{},"htmlの取り扱いとまとめ",[13,1504,1505],{},"それではまず基礎編から初めていきます。",[47,1507,1508],{"id":1508},"webpackとは",[13,1510,1511],{},"まずwebpackとはについて解説します。webpackは静的モジュールバンドラーというもので、複数のJSファイルなどを１つのファイルにまとめることができます。1つにまとめることで",[75,1513,1514,1517,1520],{},[28,1515,1516],{},"依存性の解決（JSの読み込む順番などを気にしなくて済む）",[28,1518,1519],{},"モジュール化による保守性と安全性の向上",[28,1521,1522],{},"圧縮による軽量化",[13,1524,1525],{},"などが見込まれます。Browserifyというものなど、他にもバンドラーはありますが今は性能的、機能的にもwebpackがかなり主流になっています。",[13,1527,1528],{},"タスクランナー的な使い方も可能であり、watchして差分だけビルドして開発するなんてことも可能です。",[47,1530,1531],{"id":1531},"基礎的な概念",[13,1533,1534,1539],{},[872,1535,1538],{"href":1536,"rel":1537},"https:\u002F\u002Fwebpack.js.org\u002Fconcepts\u002F#browser-compatibility",[876],"公式ドキュメント","にもある通り、構築において以下の概念が重要となります。",[75,1541,1542,1545,1548,1551,1554],{},[28,1543,1544],{},"Entry（バンドルの起点となるファイル）",[28,1546,1547],{},"Output（バンドルファイルの吐き出し先）",[28,1549,1550],{},"Loaders（JS以外のファイルを扱えるようにする）",[28,1552,1553],{},"Plugins（最適化したり、さらなる機能を追加する）",[28,1555,1556],{},"Mode（開発か本番か）",[13,1558,1559],{},"今のところ特にパッとしなくてもいいので、上記にあげた５パターンを再現するためにはこの概念が必要であること、そしてその通りに設定していることを頭に入れておいてください。",[47,1561,1563],{"id":1562},"まずは複数のjsファイルやライブラリをバンドルしてみよう","まずは複数のJSファイルやライブラリをバンドルしてみよう",[13,1565,1566],{},"まずはSassとかは忘れて、複数のJSファイルとモジュールの連携をやってみましょう。新しくディレクトリを作成してnpm initします。",[113,1568,1571],{"className":1569,"code":1570,"language":119},[116],"npm init\nnpm install -D webpack webpack-cli\n",[55,1572,1570],{"__ignoreMap":120},[13,1574,1575],{},"webpackは開発時しか使わないので -DをつけてdevDependenciesに入れます。インストール後にはnode_moduelsが作成されます。そして以下のディレクトリとファイルを作成します。",[113,1577,1580],{"className":1578,"code":1579,"language":119},[116],"├── dist #作成\n ├── index.html #作成\n├── node_modules\n├── package-lock.json\n├── package.json\n├── webpack.config.js\n└── src　#作成\n ├── functions.js　#作成\n └── main.js　#作成\n",[55,1581,1579],{"__ignoreMap":120},[13,1583,1584,1585,530,1587,1590,1591,1593,1594,1597],{},"開発しているときは",[55,1586,982],{},[55,1588,1589],{},"functions.js","に記述していきます。",[55,1592,1589],{},"には共通の関数的な物を書き、モジュールとしてはおなじみの",[55,1595,1596],{},"jquery","をインストールしておきます。",[113,1599,1602],{"className":1600,"code":1601,"language":119},[116],"npm install jquery --save\n",[55,1603,1601],{"__ignoreMap":120},[13,1605,1606],{},"index.htmlを適当に以下のようにしておきます。",[113,1608,1613],{"className":1609,"code":1610,"filename":1611,"language":1612,"meta":120,"style":120},"language-html shiki shiki-themes material-theme-ocean","\u003C!DOCTYPE html>\n\u003Chtml>\n \u003Chead>\n \u003Cmeta charset=\"utf-8\">\n \u003Ctitle>webpackの練習\u003C\u002Ftitle>\n \u003C\u002Fhead>\n\n \u003Cbody>\n \u003Cmain>\n \u003Cdiv id='app'>\n\n \u003C\u002Fdiv>\n \u003C\u002Fmain>\n \u003C\u002Fbody>\n \u003Cscript src='.\u002Fbundle.js'>\u003C\u002Fscript>\n\u003C\u002Fhtml>\n","dist\u002Findex.html","html",[55,1614,1615,1628,1636,1645,1668,1686,1694,1698,1707,1716,1737,1741,1750,1759,1767,1792],{"__ignoreMap":120},[159,1616,1617,1620,1623,1626],{"class":161,"line":162},[159,1618,1619],{"class":176},"\u003C!",[159,1621,1622],{"class":172},"DOCTYPE",[159,1624,1625],{"class":680}," html",[159,1627,634],{"class":176},[159,1629,1630,1632,1634],{"class":161,"line":169},[159,1631,628],{"class":176},[159,1633,1612],{"class":172},[159,1635,634],{"class":176},[159,1637,1638,1640,1643],{"class":161,"line":184},[159,1639,639],{"class":176},[159,1641,1642],{"class":172},"head",[159,1644,634],{"class":176},[159,1646,1647,1650,1653,1656,1659,1661,1664,1666],{"class":161,"line":195},[159,1648,1649],{"class":176}," \u003C",[159,1651,1652],{"class":172},"meta",[159,1654,1655],{"class":680}," charset",[159,1657,1658],{"class":176},"=",[159,1660,1090],{"class":176},[159,1662,1663],{"class":180},"utf-8",[159,1665,1090],{"class":176},[159,1667,634],{"class":176},[159,1669,1670,1672,1674,1677,1680,1682,1684],{"class":161,"line":212},[159,1671,1649],{"class":176},[159,1673,173],{"class":172},[159,1675,1676],{"class":176},">",[159,1678,1679],{"class":463},"webpackの練習",[159,1681,662],{"class":176},[159,1683,173],{"class":172},[159,1685,634],{"class":176},[159,1687,1688,1690,1692],{"class":161,"line":233},[159,1689,653],{"class":176},[159,1691,1642],{"class":172},[159,1693,634],{"class":176},[159,1695,1696],{"class":161,"line":244},[159,1697,453],{"emptyLinePlaceholder":452},[159,1699,1700,1702,1705],{"class":161,"line":255},[159,1701,639],{"class":176},[159,1703,1704],{"class":172},"body",[159,1706,634],{"class":176},[159,1708,1709,1711,1714],{"class":161,"line":267},[159,1710,1649],{"class":176},[159,1712,1713],{"class":172},"main",[159,1715,634],{"class":176},[159,1717,1718,1721,1723,1726,1728,1730,1733,1735],{"class":161,"line":279},[159,1719,1720],{"class":176}," \u003C",[159,1722,408],{"class":172},[159,1724,1725],{"class":680}," id",[159,1727,1658],{"class":176},[159,1729,475],{"class":176},[159,1731,1732],{"class":180},"app",[159,1734,475],{"class":176},[159,1736,634],{"class":176},[159,1738,1739],{"class":161,"line":782},[159,1740,453],{"emptyLinePlaceholder":452},[159,1742,1743,1746,1748],{"class":161,"line":787},[159,1744,1745],{"class":176}," \u003C\u002F",[159,1747,408],{"class":172},[159,1749,634],{"class":176},[159,1751,1752,1755,1757],{"class":161,"line":796},[159,1753,1754],{"class":176}," \u003C\u002F",[159,1756,1713],{"class":172},[159,1758,634],{"class":176},[159,1760,1761,1763,1765],{"class":161,"line":804},[159,1762,653],{"class":176},[159,1764,1704],{"class":172},[159,1766,634],{"class":176},[159,1768,1769,1771,1773,1776,1778,1780,1783,1785,1788,1790],{"class":161,"line":810},[159,1770,639],{"class":176},[159,1772,673],{"class":172},[159,1774,1775],{"class":680}," src",[159,1777,1658],{"class":176},[159,1779,475],{"class":176},[159,1781,1782],{"class":180},".\u002Fbundle.js",[159,1784,475],{"class":176},[159,1786,1787],{"class":176},">\u003C\u002F",[159,1789,673],{"class":172},[159,1791,634],{"class":176},[159,1793,1794,1796,1798],{"class":161,"line":816},[159,1795,662],{"class":176},[159,1797,1612],{"class":172},[159,1799,634],{"class":176},[13,1801,1802],{},"それでmain.jsは適当にこうしておきましょう。",[113,1804,1809],{"className":1805,"code":1806,"filename":1807,"language":1808,"meta":120,"style":120},"language-javascript shiki shiki-themes material-theme-ocean","import $ from 'jquery';\n\n$('#app').text('hello world')\n","src\u002Fmain.js","javascript",[55,1810,1811,1831,1835],{"__ignoreMap":120},[159,1812,1813,1816,1819,1822,1825,1827,1829],{"class":161,"line":162},[159,1814,1815],{"class":684},"import",[159,1817,1818],{"class":463}," $ ",[159,1820,1821],{"class":684},"from",[159,1823,1824],{"class":176}," '",[159,1826,1596],{"class":180},[159,1828,475],{"class":176},[159,1830,779],{"class":176},[159,1832,1833],{"class":161,"line":169},[159,1834,453],{"emptyLinePlaceholder":452},[159,1836,1837,1840,1842,1844,1847,1849,1851,1853,1855,1857,1859,1862,1864],{"class":161,"line":184},[159,1838,1839],{"class":712},"$",[159,1841,716],{"class":463},[159,1843,475],{"class":176},[159,1845,1846],{"class":180},"#app",[159,1848,475],{"class":176},[159,1850,767],{"class":463},[159,1852,770],{"class":176},[159,1854,119],{"class":712},[159,1856,716],{"class":463},[159,1858,475],{"class":176},[159,1860,1861],{"class":180},"hello world",[159,1863,475],{"class":176},[159,1865,1866],{"class":463},")\n",[13,1868,1869,1872,1873,1876,1877,1880,1881,1883],{},[55,1870,1871],{},"node_modules"," からjQueryをインポートして、",[55,1874,1875],{},"index.html","を操作します。しかし今のままではバンドルされていないので、main.jsの内容は利用できません。",[55,1878,1879],{},"webpack.config.js","を設定して、",[55,1882,982],{},"をビルドしてみましょう。",[13,1885,1886,1888],{},[55,1887,1879],{},"を以下のように設定してみましょう。",[113,1890,1892],{"className":1805,"code":1891,"filename":1879,"language":1808,"meta":120,"style":120},"module.exports = {\n \u002F\u002Fバンドル対象のファイル\n entry: `.\u002Fsrc\u002Fmain.js`,\n \n mode:\"development\",\n \u002F\u002F ファイルの出力設定\n output: {\n \u002F\u002F 出力ファイルのディレクトリ名\n path: `${__dirname}\u002Fdist`,\n \u002F\u002F 出力ファイル名\n filename: \"bundle.js\"\n }\n};\n",[55,1893,1894,1903,1909,1927,1932,1947,1952,1961,1966,1987,1992,2006,2011],{"__ignoreMap":120},[159,1895,1896,1899,1901],{"class":161,"line":162},[159,1897,1898],{"class":176},"module.exports",[159,1900,750],{"class":176},[159,1902,793],{"class":176},[159,1904,1905],{"class":161,"line":169},[159,1906,1908],{"class":1907},"sC9rS"," \u002F\u002Fバンドル対象のファイル\n",[159,1910,1911,1914,1916,1919,1922,1925],{"class":161,"line":184},[159,1912,1913],{"class":172}," entry",[159,1915,177],{"class":176},[159,1917,1918],{"class":176}," `",[159,1920,1921],{"class":180},".\u002Fsrc\u002Fmain.js",[159,1923,1924],{"class":176},"`",[159,1926,304],{"class":176},[159,1928,1929],{"class":161,"line":195},[159,1930,1931],{"class":463}," \n",[159,1933,1934,1937,1939,1941,1943,1945],{"class":161,"line":212},[159,1935,1936],{"class":172}," mode",[159,1938,177],{"class":176},[159,1940,1090],{"class":176},[159,1942,1129],{"class":180},[159,1944,1090],{"class":176},[159,1946,304],{"class":176},[159,1948,1949],{"class":161,"line":233},[159,1950,1951],{"class":1907}," \u002F\u002F ファイルの出力設定\n",[159,1953,1954,1957,1959],{"class":161,"line":244},[159,1955,1956],{"class":172}," output",[159,1958,177],{"class":176},[159,1960,793],{"class":176},[159,1962,1963],{"class":161,"line":255},[159,1964,1965],{"class":1907}," \u002F\u002F 出力ファイルのディレクトリ名\n",[159,1967,1968,1971,1973,1976,1979,1981,1983,1985],{"class":161,"line":267},[159,1969,1970],{"class":172}," path",[159,1972,177],{"class":176},[159,1974,1975],{"class":176}," `${",[159,1977,1978],{"class":463},"__dirname",[159,1980,1245],{"class":176},[159,1982,387],{"class":180},[159,1984,1924],{"class":176},[159,1986,304],{"class":176},[159,1988,1989],{"class":161,"line":279},[159,1990,1991],{"class":1907}," \u002F\u002F 出力ファイル名\n",[159,1993,1994,1997,1999,2001,2004],{"class":161,"line":782},[159,1995,1996],{"class":172}," filename",[159,1998,177],{"class":176},[159,2000,1115],{"class":176},[159,2002,2003],{"class":180},"bundle.js",[159,2005,1240],{"class":176},[159,2007,2008],{"class":161,"line":787},[159,2009,2010],{"class":176}," }\n",[159,2012,2013],{"class":161,"line":796},[159,2014,2015],{"class":176},"};\n",[13,2017,2018,2019,2021,2022,2024,2025,2028,2029,2031],{},"ここで先ほどの５つの概念を思い出してください。Entry、Output、Modeの設定が書かれています。パスは",[55,2020,1879],{},"から見たパスになります。エントリーはsrc配下の",[55,2023,982],{},"、吐き出し先は同じ階層の",[55,2026,2027],{},"dist","に",[55,2030,2003],{},"という名前で吐き出します。",[13,2033,2034,2036,2037,2040],{},[55,2035,1898],{},"は",[55,2038,2039],{},"node.js","のモジュールとして利用するために必要です。webpackはnode.jsの環境下でビルドを行うからです。",[13,2042,2043,2044,2046],{},"設定が終わったら",[55,2045,1051],{},"に以下の内容を付け足しておきます。",[113,2048,2050],{"className":1080,"code":2049,"filename":1051,"language":1083,"meta":120,"style":120},"\"scripts\": {\n \"build\": \"npx webpack-cli build\", #これ\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n},\n",[55,2051,2052,2064,2086,2115],{"__ignoreMap":120},[159,2053,2054,2056,2058,2060,2062],{"class":161,"line":162},[159,2055,1090],{"class":176},[159,2057,1093],{"class":180},[159,2059,1090],{"class":176},[159,2061,1098],{"class":463},[159,2063,688],{"class":176},[159,2065,2066,2068,2070,2072,2074,2076,2079,2081,2083],{"class":161,"line":169},[159,2067,1105],{"class":176},[159,2069,1076],{"class":680},[159,2071,1090],{"class":176},[159,2073,177],{"class":176},[159,2075,1115],{"class":176},[159,2077,2078],{"class":180},"npx webpack-cli build",[159,2080,1090],{"class":176},[159,2082,225],{"class":176},[159,2084,2085],{"class":463}," #これ\n",[159,2087,2088,2090,2093,2095,2097,2099,2102,2105,2108,2110,2113],{"class":161,"line":184},[159,2089,1105],{"class":176},[159,2091,2092],{"class":680},"test",[159,2094,1090],{"class":176},[159,2096,177],{"class":176},[159,2098,1115],{"class":176},[159,2100,2101],{"class":180},"echo ",[159,2103,2104],{"class":463},"\\\"",[159,2106,2107],{"class":180},"Error: no test specified",[159,2109,2104],{"class":463},[159,2111,2112],{"class":180}," && exit 1",[159,2114,1240],{"class":176},[159,2116,2117,2119],{"class":161,"line":195},[159,2118,1245],{"class":176},[159,2120,304],{"class":463},[13,2122,2123,2125,2126,2128],{},[55,2124,1066],{},"を叩くと",[55,2127,1450],{},"のバンドルが走ります。それではやってみましょう。",[113,2130,2133],{"className":2131,"code":2132,"language":119},[116],"npm run build\n> webpack_parctice@1.0.0 build \u002FUsers\u002Fjunjiishii\u002FDesktop\u002Fmy_apps\u002Fwebpack_parctice\n> webpack\n\nasset bundle.js 323 KiB [emitted] (name: main)\nruntime modules 937 bytes 4 modules\ncacheable modules 282 KiB\n .\u002Fsrc\u002Fmain.js 54 bytes [built] [code generated]\n .\u002Fnode_modules\u002Fjquery\u002Fdist\u002Fjquery.js 282 KiB [built] [code generated]\nwebpack 5.28.0 compiled successfully in 234 ms\n",[55,2134,2132],{"__ignoreMap":120},[13,2136,2137,2138,2140,2141,2143],{},"jqueryがきちんとnode_modulesから読み込まれいます。そして",[55,2139,2027],{},"配下を見るとbundle.jsができています。",[55,2142,2003],{},"の中身をみてみますと、",[833,2145],{":src":2146,":width":2147,":center":837},"'_mix\u002Fsch-2021-03-27-17.29.11.png'","'500px'",[13,2149,2150],{},"わお。必要なjsファイルが一つにまとめられているので、こうなっています。main.js一行とjqueryがくっついています。それではindex.htmlをみてみると..",[833,2152],{":src":2146,":width":2147,":center":837},[13,2154,2155,2156,2158,2159,530,2161,2163],{},"はい。",[55,2157,982],{},"でhello worldを入れたのできちんと",[55,2160,982],{},[55,2162,1596],{},"がバンドルされ、動作していることが確認されました。",[47,2165,2166],{"id":2166},"自前のファイルをバンドルしよう",[13,2168,2169,2170,2172,2173,2175,2176,2178,2179,104,2181,104,2183,2185],{},"先程は",[55,2171,1871],{},"の",[55,2174,1596],{},"をインポートして利用してみました。次は",[55,2177,1589],{},"の関数群をインポートして利用できるようにしてみましょう。",[55,2180,1875],{},[55,2182,982],{},[55,2184,1589],{},"を以下のように変更します。",[113,2187,2189],{"className":1609,"code":2188,"filename":1611,"language":1612,"meta":120,"style":120},"\u003C!-- body のみ見せます -->\n\u003Cbody>\n \u003Cmain>\n \u003Cdiv id='app'>\u003C\u002Fdiv>\n \u003Cinput type=\"text\" value=\"\" id=\"inputs\">\n \u003Cbutton id=\"submmit\" >追加する\u003C\u002Fbutton>\n \u003C\u002Fmain>\n\u003C\u002Fbody>\n",[55,2190,2191,2196,2204,2212,2234,2273,2303,2311],{"__ignoreMap":120},[159,2192,2193],{"class":161,"line":162},[159,2194,2195],{"class":1907},"\u003C!-- body のみ見せます -->\n",[159,2197,2198,2200,2202],{"class":161,"line":169},[159,2199,628],{"class":176},[159,2201,1704],{"class":172},[159,2203,634],{"class":176},[159,2205,2206,2208,2210],{"class":161,"line":184},[159,2207,639],{"class":176},[159,2209,1713],{"class":172},[159,2211,634],{"class":176},[159,2213,2214,2216,2218,2220,2222,2224,2226,2228,2230,2232],{"class":161,"line":195},[159,2215,1649],{"class":176},[159,2217,408],{"class":172},[159,2219,1725],{"class":680},[159,2221,1658],{"class":176},[159,2223,475],{"class":176},[159,2225,1732],{"class":180},[159,2227,475],{"class":176},[159,2229,1787],{"class":176},[159,2231,408],{"class":172},[159,2233,634],{"class":176},[159,2235,2236,2238,2241,2244,2246,2248,2250,2252,2255,2257,2260,2262,2264,2266,2269,2271],{"class":161,"line":212},[159,2237,1649],{"class":176},[159,2239,2240],{"class":172},"input",[159,2242,2243],{"class":680}," type",[159,2245,1658],{"class":176},[159,2247,1090],{"class":176},[159,2249,119],{"class":180},[159,2251,1090],{"class":176},[159,2253,2254],{"class":680}," value",[159,2256,1658],{"class":176},[159,2258,2259],{"class":176},"\"\"",[159,2261,1725],{"class":680},[159,2263,1658],{"class":176},[159,2265,1090],{"class":176},[159,2267,2268],{"class":180},"inputs",[159,2270,1090],{"class":176},[159,2272,634],{"class":176},[159,2274,2275,2277,2280,2282,2284,2286,2289,2291,2294,2297,2299,2301],{"class":161,"line":233},[159,2276,1649],{"class":176},[159,2278,2279],{"class":172},"button",[159,2281,1725],{"class":680},[159,2283,1658],{"class":176},[159,2285,1090],{"class":176},[159,2287,2288],{"class":180},"submmit",[159,2290,1090],{"class":176},[159,2292,2293],{"class":176}," >",[159,2295,2296],{"class":463},"追加する",[159,2298,662],{"class":176},[159,2300,2279],{"class":172},[159,2302,634],{"class":176},[159,2304,2305,2307,2309],{"class":161,"line":244},[159,2306,653],{"class":176},[159,2308,1713],{"class":172},[159,2310,634],{"class":176},[159,2312,2313,2315,2317],{"class":161,"line":255},[159,2314,662],{"class":176},[159,2316,1704],{"class":172},[159,2318,634],{"class":176},[113,2320,2322],{"className":1805,"code":2321,"filename":1589,"language":1808,"meta":120,"style":120},"import $ from 'jquery';\n\nexport default {\n addNewText(to,input){\n let text = $(input).val();\n $(to).append('\u003Cp>'+text+'\u003C\u002Fp>');　#XSSできちゃうので本番では使わないように。。\n $(input).val('');\n }\n}\n",[55,2323,2324,2340,2344,2352,2370,2398,2451,2474,2478],{"__ignoreMap":120},[159,2325,2326,2328,2330,2332,2334,2336,2338],{"class":161,"line":162},[159,2327,1815],{"class":684},[159,2329,1818],{"class":463},[159,2331,1821],{"class":684},[159,2333,1824],{"class":176},[159,2335,1596],{"class":180},[159,2337,475],{"class":176},[159,2339,779],{"class":176},[159,2341,2342],{"class":161,"line":169},[159,2343,453],{"emptyLinePlaceholder":452},[159,2345,2346,2348,2350],{"class":161,"line":184},[159,2347,681],{"class":684},[159,2349,685],{"class":684},[159,2351,793],{"class":176},[159,2353,2354,2357,2359,2363,2365,2367],{"class":161,"line":195},[159,2355,2356],{"class":172}," addNewText",[159,2358,716],{"class":176},[159,2360,2362],{"class":2361},"s7ZW3","to",[159,2364,225],{"class":176},[159,2366,2240],{"class":2361},[159,2368,2369],{"class":176},"){\n",[159,2371,2372,2375,2378,2380,2383,2385,2387,2389,2391,2394,2396],{"class":161,"line":212},[159,2373,2374],{"class":680}," let",[159,2376,2377],{"class":463}," text",[159,2379,750],{"class":176},[159,2381,2382],{"class":712}," $",[159,2384,716],{"class":172},[159,2386,2240],{"class":463},[159,2388,767],{"class":172},[159,2390,770],{"class":176},[159,2392,2393],{"class":712},"val",[159,2395,776],{"class":172},[159,2397,779],{"class":176},[159,2399,2400,2403,2405,2407,2409,2411,2414,2416,2418,2421,2423,2426,2428,2430,2432,2435,2437,2439,2442,2445,2448],{"class":161,"line":233},[159,2401,2402],{"class":712}," $",[159,2404,716],{"class":172},[159,2406,2362],{"class":463},[159,2408,767],{"class":172},[159,2410,770],{"class":176},[159,2412,2413],{"class":712},"append",[159,2415,716],{"class":172},[159,2417,475],{"class":176},[159,2419,2420],{"class":180},"\u003Cp>",[159,2422,475],{"class":176},[159,2424,2425],{"class":176},"+",[159,2427,119],{"class":463},[159,2429,2425],{"class":176},[159,2431,475],{"class":176},[159,2433,2434],{"class":180},"\u003C\u002Fp>",[159,2436,475],{"class":176},[159,2438,767],{"class":172},[159,2440,2441],{"class":176},";",[159,2443,2444],{"class":172},"　#",[159,2446,2447],{"class":463},"XSSできちゃうので本番では使わないように",[159,2449,2450],{"class":172},"。。\n",[159,2452,2453,2455,2457,2459,2461,2463,2465,2467,2470,2472],{"class":161,"line":244},[159,2454,2402],{"class":712},[159,2456,716],{"class":172},[159,2458,2240],{"class":463},[159,2460,767],{"class":172},[159,2462,770],{"class":176},[159,2464,2393],{"class":712},[159,2466,716],{"class":172},[159,2468,2469],{"class":176},"''",[159,2471,767],{"class":172},[159,2473,779],{"class":176},[159,2475,2476],{"class":161,"line":255},[159,2477,2010],{"class":176},[159,2479,2480],{"class":161,"line":267},[159,2481,819],{"class":176},[113,2483,2485],{"className":1805,"code":2484,"filename":1807,"language":1808,"meta":120,"style":120},"import $ from 'jquery';\nimport funcs from '.\u002Ffunctions';\n\n$('#submmit').on('click',()=>{\n return funcs.addNewText('#app','#inputs');\n})\n\n",[55,2486,2487,2503,2521,2525,2562,2596],{"__ignoreMap":120},[159,2488,2489,2491,2493,2495,2497,2499,2501],{"class":161,"line":162},[159,2490,1815],{"class":684},[159,2492,1818],{"class":463},[159,2494,1821],{"class":684},[159,2496,1824],{"class":176},[159,2498,1596],{"class":180},[159,2500,475],{"class":176},[159,2502,779],{"class":176},[159,2504,2505,2507,2510,2512,2514,2517,2519],{"class":161,"line":169},[159,2506,1815],{"class":684},[159,2508,2509],{"class":463}," funcs ",[159,2511,1821],{"class":684},[159,2513,1824],{"class":176},[159,2515,2516],{"class":180},".\u002Ffunctions",[159,2518,475],{"class":176},[159,2520,779],{"class":176},[159,2522,2523],{"class":161,"line":184},[159,2524,453],{"emptyLinePlaceholder":452},[159,2526,2527,2529,2531,2533,2536,2538,2540,2542,2545,2547,2549,2552,2554,2557,2560],{"class":161,"line":195},[159,2528,1839],{"class":712},[159,2530,716],{"class":463},[159,2532,475],{"class":176},[159,2534,2535],{"class":180},"#submmit",[159,2537,475],{"class":176},[159,2539,767],{"class":463},[159,2541,770],{"class":176},[159,2543,2544],{"class":712},"on",[159,2546,716],{"class":463},[159,2548,475],{"class":176},[159,2550,2551],{"class":180},"click",[159,2553,475],{"class":176},[159,2555,2556],{"class":176},",()",[159,2558,2559],{"class":680},"=>",[159,2561,688],{"class":176},[159,2563,2564,2567,2570,2572,2575,2577,2579,2581,2583,2585,2587,2590,2592,2594],{"class":161,"line":212},[159,2565,2566],{"class":684}," return",[159,2568,2569],{"class":463}," funcs",[159,2571,770],{"class":176},[159,2573,2574],{"class":712},"addNewText",[159,2576,716],{"class":172},[159,2578,475],{"class":176},[159,2580,1846],{"class":180},[159,2582,475],{"class":176},[159,2584,225],{"class":176},[159,2586,475],{"class":176},[159,2588,2589],{"class":180},"#inputs",[159,2591,475],{"class":176},[159,2593,767],{"class":172},[159,2595,779],{"class":176},[159,2597,2598,2600],{"class":161,"line":233},[159,2599,1245],{"class":176},[159,2601,1866],{"class":463},[13,2603,2604,2605,2608],{},"functions.jsには便利関数を入れているのを想定しているので、オブジェクトに関数を入れておきます。それをexportします。",[55,2606,2607],{},"addNewText()","は指定した入力フォームの文字列を、指定したDOMにpタグとして入れてくれる神メソッドです。TODO LIST的な物を開発していると思ってください。",[13,2610,2611,856,2613,2616,2617,2620,2621,2624],{},[55,2612,982],{},[55,2614,2615],{},"import funcs from '.\u002Ffunctions';","で読み込みます。",[55,2618,2619],{},"funcs","というのはオブジェクトなので",[55,2622,2623],{},"funcs.addNewText()","で使用できます。イベントリスナーでボタンを押したら追加できるようにしてみましょう。",[13,2626,2627,2628,2630],{},"ビルドしたら再度",[55,2629,1875],{},"をみてみます。",[833,2632],{":src":2633,":width":2634},"'_mix\u002Fsch-2021-03-27-18.04.19-768x283.png'","'300px'",[833,2636],{":src":2637,":width":2634},"'_mix\u002Fsch-2021-03-27-18.05.16.png'",[13,2639,2640],{},"入力内容を入れて、追加するを押すとこのように文字が追加されました。webpackが各ファイルのimportの関係性を解決してくれるので、これで複数ファイルのバンドルができるようになりました。",[96,2642,2643],{"id":2643},"watchモードを追加しておく",[13,2645,2646,2647,2649],{},"jsのコードを書いてビルドしたらスクリプトにエラーが起きていたという時、毎回ビルドするのは面倒です。webpackにはwatchモードという物があり、変更を検知して差分ビルドをしてくれます。",[55,2648,1051],{},"に以下のように記述します。",[113,2651,2653],{"className":1080,"code":2652,"filename":1051,"language":1083,"meta":120,"style":120},"\"scripts\": {\n \"build\": \"npx webpack-cli build\",\n \"watch\": \"npx webpack-cli watch\",　\b#これ\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n},\n",[55,2654,2655,2667,2686,2708,2732],{"__ignoreMap":120},[159,2656,2657,2659,2661,2663,2665],{"class":161,"line":162},[159,2658,1090],{"class":176},[159,2660,1093],{"class":180},[159,2662,1090],{"class":176},[159,2664,1098],{"class":463},[159,2666,688],{"class":176},[159,2668,2669,2672,2674,2676,2678,2680,2682,2684],{"class":161,"line":169},[159,2670,2671],{"class":176}," \"",[159,2673,1076],{"class":680},[159,2675,1090],{"class":176},[159,2677,177],{"class":176},[159,2679,1115],{"class":176},[159,2681,2078],{"class":180},[159,2683,1090],{"class":176},[159,2685,304],{"class":176},[159,2687,2688,2690,2692,2694,2696,2698,2701,2703,2705],{"class":161,"line":184},[159,2689,2671],{"class":176},[159,2691,1149],{"class":680},[159,2693,1090],{"class":176},[159,2695,177],{"class":176},[159,2697,1115],{"class":176},[159,2699,2700],{"class":180},"npx webpack-cli watch",[159,2702,1090],{"class":176},[159,2704,225],{"class":176},[159,2706,2707],{"class":463},"　\b#これ\n",[159,2709,2710,2712,2714,2716,2718,2720,2722,2724,2726,2728,2730],{"class":161,"line":195},[159,2711,2671],{"class":176},[159,2713,2092],{"class":680},[159,2715,1090],{"class":176},[159,2717,177],{"class":176},[159,2719,1115],{"class":176},[159,2721,2101],{"class":180},[159,2723,2104],{"class":463},[159,2725,2107],{"class":180},[159,2727,2104],{"class":463},[159,2729,2112],{"class":180},[159,2731,1240],{"class":176},[159,2733,2734,2736],{"class":161,"line":212},[159,2735,1245],{"class":176},[159,2737,304],{"class":463},[13,2739,2740,2741,2744,2745,2747],{},"これで",[55,2742,2743],{},"npm run watch"," を行うことで",[55,2746,1149],{},"モードでビルドが動くようになります。",[47,2749,2751],{"id":2750},"sassをコンパイルバンドルしてみる","Sassをコンパイル・バンドルしてみる",[13,2753,2754],{},"Webpackは基本的にjsファイルのバンドルを想定していますが、css・sassもバンドルできます。今回はsassの説明をします。",[96,2756,2758],{"id":2757},"必要なモジュールを追加インストール設定","必要なモジュールを追加インストール&設定",[13,2760,2761],{},"webpackがsassをバンドルしてビルドするには",[75,2763,2764,2767,2770,2773],{},[28,2765,2766],{},"sass-loader",[28,2768,2769],{},"node-sass",[28,2771,2772],{},"css-loader",[28,2774,2775],{},"mini-css-extract-plugin",[13,2777,2778],{},"の４つのdevDependenciesが必要になります。",[13,2780,2781,2783,2784,2786,2787,2790],{},[20,2782,2766],{},"は重要な概念に出てきた「loader」に該当します。webpackがsassファイルをバンドルするのに必要です。",[20,2785,2769],{},"はnode.jsでsassのコンパイルをするために必要です。sassをコンパイルして生成されたcssを扱うために",[20,2788,2789],{},"css-loader、mini-css-extract-plugin","が必要です。そのためまずはインストールしてみましょう。",[113,2792,2795],{"className":2793,"code":2794,"language":119},[116],"npm install -D sass-loader node-sass css-loader mini-css-extract-plugin\n",[55,2796,2794],{"__ignoreMap":120},[13,2798,2799],{},"ひとまず入れられたら、webpack.config.jsを以下のように変更します。",[113,2801,2803],{"className":1805,"code":2802,"filename":1879,"language":1808,"meta":120,"style":120},"const MiniCssExtractPlugin = require('mini-css-extract-plugin');\n\nmodule.exports = {\n \u002F\u002Fバンドル対象のファイル\n entry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n \n mode:\"development\",\n \n \u002F\u002F ここから追加\n module: {\n rules: [\n {\n test: \u002F\\.(sa|sc|c)ss$\u002F,\n exclude: \u002Fnode_modules\u002F,\n use: [\n MiniCssExtractPlugin.loader,\n {\n loader: 'css-loader',\n options: { url: false }\n },\n 'sass-loader'\n ]\n }\n ]\n },\n \u002F\u002F ファイルの出力設定\n output: {\n \u002F\u002F 出力ファイルのディレクトリ名\n path: `${__dirname}\u002Fdist`,\n \u002F\u002F 出力ファイル名\n filename: \"bundle.js\"\n },\n 　　\u002F\u002F ここも追加\n plugins: [\n new MiniCssExtractPlugin({\n filename:'style.css'\n })\n ]\n};\n",[55,2804,2805,2830,2834,2842,2846,2861,2865,2879,2884,2889,2898,2907,2912,2953,2968,2977,2989,2994,3010,3032,3038,3049,3055,3061,3067,3073,3078,3087,3092,3111,3116,3129,3134,3140,3150,3163,3178,3186,3192],{"__ignoreMap":120},[159,2806,2807,2810,2813,2815,2818,2820,2822,2824,2826,2828],{"class":161,"line":162},[159,2808,2809],{"class":680},"const",[159,2811,2812],{"class":463}," MiniCssExtractPlugin ",[159,2814,1658],{"class":176},[159,2816,2817],{"class":712}," require",[159,2819,716],{"class":463},[159,2821,475],{"class":176},[159,2823,2775],{"class":180},[159,2825,475],{"class":176},[159,2827,767],{"class":463},[159,2829,779],{"class":176},[159,2831,2832],{"class":161,"line":169},[159,2833,453],{"emptyLinePlaceholder":452},[159,2835,2836,2838,2840],{"class":161,"line":184},[159,2837,1898],{"class":176},[159,2839,750],{"class":176},[159,2841,793],{"class":176},[159,2843,2844],{"class":161,"line":195},[159,2845,1908],{"class":1907},[159,2847,2848,2850,2852,2854,2857,2859],{"class":161,"line":212},[159,2849,1913],{"class":172},[159,2851,177],{"class":176},[159,2853,1824],{"class":176},[159,2855,2856],{"class":180},".\u002Fsrc\u002Fjs\u002Fmain.js",[159,2858,475],{"class":176},[159,2860,304],{"class":176},[159,2862,2863],{"class":161,"line":233},[159,2864,1931],{"class":463},[159,2866,2867,2869,2871,2873,2875,2877],{"class":161,"line":244},[159,2868,1936],{"class":172},[159,2870,177],{"class":176},[159,2872,1090],{"class":176},[159,2874,1129],{"class":180},[159,2876,1090],{"class":176},[159,2878,304],{"class":176},[159,2880,2881],{"class":161,"line":255},[159,2882,2883],{"class":463}," \n",[159,2885,2886],{"class":161,"line":267},[159,2887,2888],{"class":1907}," \u002F\u002F ここから追加\n",[159,2890,2891,2894,2896],{"class":161,"line":279},[159,2892,2893],{"class":172}," module",[159,2895,177],{"class":176},[159,2897,793],{"class":176},[159,2899,2900,2903,2905],{"class":161,"line":782},[159,2901,2902],{"class":172}," rules",[159,2904,177],{"class":176},[159,2906,464],{"class":463},[159,2908,2909],{"class":161,"line":787},[159,2910,2911],{"class":176}," {\n",[159,2913,2914,2917,2919,2922,2925,2927,2930,2933,2936,2938,2941,2943,2946,2948,2951],{"class":161,"line":796},[159,2915,2916],{"class":172}," test",[159,2918,177],{"class":176},[159,2920,2921],{"class":176}," \u002F",[159,2923,2924],{"class":463},"\\.",[159,2926,716],{"class":176},[159,2928,2929],{"class":180},"sa",[159,2931,2932],{"class":176},"|",[159,2934,2935],{"class":180},"sc",[159,2937,2932],{"class":176},[159,2939,2940],{"class":180},"c",[159,2942,767],{"class":176},[159,2944,2945],{"class":180},"ss",[159,2947,1839],{"class":684},[159,2949,2950],{"class":176},"\u002F",[159,2952,304],{"class":176},[159,2954,2955,2958,2960,2962,2964,2966],{"class":161,"line":804},[159,2956,2957],{"class":172}," exclude",[159,2959,177],{"class":176},[159,2961,2921],{"class":176},[159,2963,1871],{"class":180},[159,2965,2950],{"class":176},[159,2967,304],{"class":176},[159,2969,2970,2973,2975],{"class":161,"line":810},[159,2971,2972],{"class":172}," use",[159,2974,177],{"class":176},[159,2976,464],{"class":463},[159,2978,2979,2982,2984,2987],{"class":161,"line":816},[159,2980,2981],{"class":463}," MiniCssExtractPlugin",[159,2983,770],{"class":176},[159,2985,2986],{"class":463},"loader",[159,2988,304],{"class":176},[159,2990,2991],{"class":161,"line":822},[159,2992,2993],{"class":176}," {\n",[159,2995,2997,3000,3002,3004,3006,3008],{"class":161,"line":2996},18,[159,2998,2999],{"class":172}," loader",[159,3001,177],{"class":176},[159,3003,1824],{"class":176},[159,3005,2772],{"class":180},[159,3007,475],{"class":176},[159,3009,304],{"class":176},[159,3011,3013,3016,3018,3021,3024,3026,3029],{"class":161,"line":3012},19,[159,3014,3015],{"class":172}," options",[159,3017,177],{"class":176},[159,3019,3020],{"class":176}," {",[159,3022,3023],{"class":172}," url",[159,3025,177],{"class":176},[159,3027,3028],{"class":275}," false",[159,3030,3031],{"class":176}," }\n",[159,3033,3035],{"class":161,"line":3034},20,[159,3036,3037],{"class":176}," },\n",[159,3039,3041,3044,3046],{"class":161,"line":3040},21,[159,3042,3043],{"class":176}," '",[159,3045,2766],{"class":180},[159,3047,3048],{"class":176},"'\n",[159,3050,3052],{"class":161,"line":3051},22,[159,3053,3054],{"class":463}," ]\n",[159,3056,3058],{"class":161,"line":3057},23,[159,3059,3060],{"class":176}," }\n",[159,3062,3064],{"class":161,"line":3063},24,[159,3065,3066],{"class":463}," ]\n",[159,3068,3070],{"class":161,"line":3069},25,[159,3071,3072],{"class":176}," },\n",[159,3074,3076],{"class":161,"line":3075},26,[159,3077,1951],{"class":1907},[159,3079,3081,3083,3085],{"class":161,"line":3080},27,[159,3082,1956],{"class":172},[159,3084,177],{"class":176},[159,3086,793],{"class":176},[159,3088,3090],{"class":161,"line":3089},28,[159,3091,1965],{"class":1907},[159,3093,3095,3097,3099,3101,3103,3105,3107,3109],{"class":161,"line":3094},29,[159,3096,1970],{"class":172},[159,3098,177],{"class":176},[159,3100,1975],{"class":176},[159,3102,1978],{"class":463},[159,3104,1245],{"class":176},[159,3106,387],{"class":180},[159,3108,1924],{"class":176},[159,3110,304],{"class":176},[159,3112,3114],{"class":161,"line":3113},30,[159,3115,1991],{"class":1907},[159,3117,3119,3121,3123,3125,3127],{"class":161,"line":3118},31,[159,3120,1996],{"class":172},[159,3122,177],{"class":176},[159,3124,1115],{"class":176},[159,3126,2003],{"class":180},[159,3128,1240],{"class":176},[159,3130,3132],{"class":161,"line":3131},32,[159,3133,813],{"class":176},[159,3135,3137],{"class":161,"line":3136},33,[159,3138,3139],{"class":1907}," 　　\u002F\u002F ここも追加\n",[159,3141,3143,3146,3148],{"class":161,"line":3142},34,[159,3144,3145],{"class":172}," plugins",[159,3147,177],{"class":176},[159,3149,464],{"class":463},[159,3151,3153,3156,3159,3161],{"class":161,"line":3152},35,[159,3154,3155],{"class":176}," new",[159,3157,3158],{"class":712}," MiniCssExtractPlugin",[159,3160,716],{"class":463},[159,3162,688],{"class":176},[159,3164,3166,3169,3171,3173,3176],{"class":161,"line":3165},36,[159,3167,3168],{"class":172}," filename",[159,3170,177],{"class":176},[159,3172,475],{"class":176},[159,3174,3175],{"class":180},"style.css",[159,3177,3048],{"class":176},[159,3179,3181,3184],{"class":161,"line":3180},37,[159,3182,3183],{"class":176}," }",[159,3185,1866],{"class":463},[159,3187,3189],{"class":161,"line":3188},38,[159,3190,3191],{"class":463}," ]\n",[159,3193,3195],{"class":161,"line":3194},39,[159,3196,2015],{"class":176},[96,3198,3200],{"id":3199},"アセットのディレクトリとindexhtmlの変更","アセットのディレクトリとindex.htmlの変更",[13,3202,3203],{},"srcにsassのディレクトリを作成し、そしてややこしいのでjsのフォルダも作りました。",[113,3205,3208],{"className":3206,"code":3207,"language":119},[116],".\n├── dist\n│ ├── index.html\n├── package-lock.json\n├── package.json\n├── src\n│ ├── js\n│ │ ├── functions.js\n│ │ └── main.js\n│ └── sass\n│ ├── component.scss\n│ ├── style.scss\n│ └── variable.scss\n└── webpack.config.js\n",[55,3209,3207],{"__ignoreMap":120},[13,3211,3212],{},"sassの３ファイルは以下のような構成になっています。",[113,3214,3219],{"className":3215,"code":3216,"filename":3217,"language":3218,"meta":120,"style":120},"language-scss shiki shiki-themes material-theme-ocean","$base_color:red;\n$box_size:30px;\n","variacle.scss","scss",[55,3220,3221,3233],{"__ignoreMap":120},[159,3222,3223,3226,3228,3231],{"class":161,"line":162},[159,3224,3225],{"class":463},"$base_color",[159,3227,177],{"class":176},[159,3229,3230],{"class":463},"red",[159,3232,779],{"class":176},[159,3234,3235,3238,3240,3243],{"class":161,"line":169},[159,3236,3237],{"class":463},"$box_size",[159,3239,177],{"class":176},[159,3241,3242],{"class":263},"30px",[159,3244,779],{"class":176},[113,3246,3249],{"className":3215,"code":3247,"filename":3248,"language":3218,"meta":120,"style":120},".box{\n background-color: $base_color;\n width: 20px;\n height: 20px;\n}\n","component.scss",[55,3250,3251,3260,3273,3285,3296],{"__ignoreMap":120},[159,3252,3253,3255,3258],{"class":161,"line":162},[159,3254,770],{"class":176},[159,3256,3257],{"class":165},"box",[159,3259,688],{"class":176},[159,3261,3262,3266,3268,3271],{"class":161,"line":169},[159,3263,3265],{"class":3264},"s6YsC"," background-color",[159,3267,177],{"class":176},[159,3269,3270],{"class":463}," $base_color",[159,3272,779],{"class":176},[159,3274,3275,3278,3280,3283],{"class":161,"line":184},[159,3276,3277],{"class":3264}," width",[159,3279,177],{"class":176},[159,3281,3282],{"class":263}," 20px",[159,3284,779],{"class":176},[159,3286,3287,3290,3292,3294],{"class":161,"line":195},[159,3288,3289],{"class":3264}," height",[159,3291,177],{"class":176},[159,3293,3282],{"class":263},[159,3295,779],{"class":176},[159,3297,3298],{"class":161,"line":212},[159,3299,819],{"class":176},[113,3301,3304],{"className":3215,"code":3302,"filename":3303,"language":3218,"meta":120,"style":120},"@import '.\u002Fvariable.scss';\n@import '.\u002Fcomponent.scss';\n","style.scss",[55,3305,3306,3320],{"__ignoreMap":120},[159,3307,3308,3311,3313,3316,3318],{"class":161,"line":162},[159,3309,3310],{"class":684},"@import",[159,3312,1824],{"class":176},[159,3314,3315],{"class":180},".\u002Fvariable.scss",[159,3317,475],{"class":176},[159,3319,779],{"class":176},[159,3321,3322,3324,3326,3329,3331],{"class":161,"line":169},[159,3323,3310],{"class":684},[159,3325,1824],{"class":176},[159,3327,3328],{"class":180},".\u002Fcomponent.scss",[159,3330,475],{"class":176},[159,3332,779],{"class":176},[13,3334,3335,3337,3338,3340],{},[55,3336,1875],{},"もバンドルされた",[55,3339,3175],{},"を読み込むようにしましょう。",[113,3342,3345],{"className":1609,"code":3343,"filename":3344,"language":1612,"meta":120,"style":120},"\u003C!DOCTYPE html>\n\u003Chtml>\n \u003Chead>\n \u003Cmeta charset=\"utf-8\">\n \u003Ctitle>webpackの練習\u003C\u002Ftitle>\n　　　　　\u003C!-- これ -->\n \u003Clink rel=\"stylesheet\" href=\".\u002Fstyle.css\">\n \u003C\u002Fhead>\n\n \u003Cbody>\n \u003Cmain>\n \u003Cdiv id='app'>\n\n \u003C\u002Fdiv>\n \u003Cinput type=\"text\" value=\"\" id=\"inputs\">\n \u003Cbutton id=\"submmit\" >追加する\u003C\u002Fbutton>\n \u003Cdiv class='box'>\u003C\u002Fdiv>\n \u003C\u002Fmain>\n \u003C\u002Fbody>\n \u003Cscript src='.\u002Fbundle.js'>\u003C\u002Fscript>\n\u003C\u002Fhtml>\n","dist\u002Findexx.html",[55,3346,3347,3357,3365,3373,3391,3407,3412,3445,3453,3457,3465,3473,3491,3495,3503,3537,3563,3586,3594,3602,3624],{"__ignoreMap":120},[159,3348,3349,3351,3353,3355],{"class":161,"line":162},[159,3350,1619],{"class":176},[159,3352,1622],{"class":172},[159,3354,1625],{"class":680},[159,3356,634],{"class":176},[159,3358,3359,3361,3363],{"class":161,"line":169},[159,3360,628],{"class":176},[159,3362,1612],{"class":172},[159,3364,634],{"class":176},[159,3366,3367,3369,3371],{"class":161,"line":184},[159,3368,639],{"class":176},[159,3370,1642],{"class":172},[159,3372,634],{"class":176},[159,3374,3375,3377,3379,3381,3383,3385,3387,3389],{"class":161,"line":195},[159,3376,1649],{"class":176},[159,3378,1652],{"class":172},[159,3380,1655],{"class":680},[159,3382,1658],{"class":176},[159,3384,1090],{"class":176},[159,3386,1663],{"class":180},[159,3388,1090],{"class":176},[159,3390,634],{"class":176},[159,3392,3393,3395,3397,3399,3401,3403,3405],{"class":161,"line":212},[159,3394,1649],{"class":176},[159,3396,173],{"class":172},[159,3398,1676],{"class":176},[159,3400,1679],{"class":463},[159,3402,662],{"class":176},[159,3404,173],{"class":172},[159,3406,634],{"class":176},[159,3408,3409],{"class":161,"line":233},[159,3410,3411],{"class":1907},"　　　　　\u003C!-- これ -->\n",[159,3413,3414,3416,3419,3422,3424,3426,3429,3431,3434,3436,3438,3441,3443],{"class":161,"line":244},[159,3415,1649],{"class":176},[159,3417,3418],{"class":172},"link",[159,3420,3421],{"class":680}," rel",[159,3423,1658],{"class":176},[159,3425,1090],{"class":176},[159,3427,3428],{"class":180},"stylesheet",[159,3430,1090],{"class":176},[159,3432,3433],{"class":680}," href",[159,3435,1658],{"class":176},[159,3437,1090],{"class":176},[159,3439,3440],{"class":180},".\u002Fstyle.css",[159,3442,1090],{"class":176},[159,3444,634],{"class":176},[159,3446,3447,3449,3451],{"class":161,"line":255},[159,3448,653],{"class":176},[159,3450,1642],{"class":172},[159,3452,634],{"class":176},[159,3454,3455],{"class":161,"line":267},[159,3456,453],{"emptyLinePlaceholder":452},[159,3458,3459,3461,3463],{"class":161,"line":279},[159,3460,639],{"class":176},[159,3462,1704],{"class":172},[159,3464,634],{"class":176},[159,3466,3467,3469,3471],{"class":161,"line":782},[159,3468,1649],{"class":176},[159,3470,1713],{"class":172},[159,3472,634],{"class":176},[159,3474,3475,3477,3479,3481,3483,3485,3487,3489],{"class":161,"line":787},[159,3476,1720],{"class":176},[159,3478,408],{"class":172},[159,3480,1725],{"class":680},[159,3482,1658],{"class":176},[159,3484,475],{"class":176},[159,3486,1732],{"class":180},[159,3488,475],{"class":176},[159,3490,634],{"class":176},[159,3492,3493],{"class":161,"line":796},[159,3494,453],{"emptyLinePlaceholder":452},[159,3496,3497,3499,3501],{"class":161,"line":804},[159,3498,1745],{"class":176},[159,3500,408],{"class":172},[159,3502,634],{"class":176},[159,3504,3505,3507,3509,3511,3513,3515,3517,3519,3521,3523,3525,3527,3529,3531,3533,3535],{"class":161,"line":810},[159,3506,1720],{"class":176},[159,3508,2240],{"class":172},[159,3510,2243],{"class":680},[159,3512,1658],{"class":176},[159,3514,1090],{"class":176},[159,3516,119],{"class":180},[159,3518,1090],{"class":176},[159,3520,2254],{"class":680},[159,3522,1658],{"class":176},[159,3524,2259],{"class":176},[159,3526,1725],{"class":680},[159,3528,1658],{"class":176},[159,3530,1090],{"class":176},[159,3532,2268],{"class":180},[159,3534,1090],{"class":176},[159,3536,634],{"class":176},[159,3538,3539,3541,3543,3545,3547,3549,3551,3553,3555,3557,3559,3561],{"class":161,"line":816},[159,3540,1720],{"class":176},[159,3542,2279],{"class":172},[159,3544,1725],{"class":680},[159,3546,1658],{"class":176},[159,3548,1090],{"class":176},[159,3550,2288],{"class":180},[159,3552,1090],{"class":176},[159,3554,2293],{"class":176},[159,3556,2296],{"class":463},[159,3558,662],{"class":176},[159,3560,2279],{"class":172},[159,3562,634],{"class":176},[159,3564,3565,3567,3569,3572,3574,3576,3578,3580,3582,3584],{"class":161,"line":822},[159,3566,1720],{"class":176},[159,3568,408],{"class":172},[159,3570,3571],{"class":680}," class",[159,3573,1658],{"class":176},[159,3575,475],{"class":176},[159,3577,3257],{"class":180},[159,3579,475],{"class":176},[159,3581,1787],{"class":176},[159,3583,408],{"class":172},[159,3585,634],{"class":176},[159,3587,3588,3590,3592],{"class":161,"line":2996},[159,3589,1754],{"class":176},[159,3591,1713],{"class":172},[159,3593,634],{"class":176},[159,3595,3596,3598,3600],{"class":161,"line":3012},[159,3597,653],{"class":176},[159,3599,1704],{"class":172},[159,3601,634],{"class":176},[159,3603,3604,3606,3608,3610,3612,3614,3616,3618,3620,3622],{"class":161,"line":3034},[159,3605,639],{"class":176},[159,3607,673],{"class":172},[159,3609,1775],{"class":680},[159,3611,1658],{"class":176},[159,3613,475],{"class":176},[159,3615,1782],{"class":180},[159,3617,475],{"class":176},[159,3619,1787],{"class":176},[159,3621,673],{"class":172},[159,3623,634],{"class":176},[159,3625,3626,3628,3630],{"class":161,"line":3040},[159,3627,662],{"class":176},[159,3629,1612],{"class":172},[159,3631,634],{"class":176},[13,3633,3634,3635,3637],{},"そしてエントリーファイルであった",[55,3636,2856],{},"に以下のようにscssをインポートします。",[113,3639,3642],{"className":1805,"code":3640,"filename":3641,"language":1808,"meta":120,"style":120},"import $ from 'jquery';\nimport funcs from '.\u002Ffunctions';\nimport '~\u002Fsass\u002Fstyle.scss';\n\n$('#submmit').on('click',()=>{\n return funcs.addNewText('#app','#inputs');\n})\n\n","src\u002Fjs\u002Fmain.js",[55,3643,3644,3660,3676,3689,3693,3725,3755],{"__ignoreMap":120},[159,3645,3646,3648,3650,3652,3654,3656,3658],{"class":161,"line":162},[159,3647,1815],{"class":684},[159,3649,1818],{"class":463},[159,3651,1821],{"class":684},[159,3653,1824],{"class":176},[159,3655,1596],{"class":180},[159,3657,475],{"class":176},[159,3659,779],{"class":176},[159,3661,3662,3664,3666,3668,3670,3672,3674],{"class":161,"line":169},[159,3663,1815],{"class":684},[159,3665,2509],{"class":463},[159,3667,1821],{"class":684},[159,3669,1824],{"class":176},[159,3671,2516],{"class":180},[159,3673,475],{"class":176},[159,3675,779],{"class":176},[159,3677,3678,3680,3682,3685,3687],{"class":161,"line":184},[159,3679,1815],{"class":684},[159,3681,1824],{"class":176},[159,3683,3684],{"class":180},"~\u002Fsass\u002Fstyle.scss",[159,3686,475],{"class":176},[159,3688,779],{"class":176},[159,3690,3691],{"class":161,"line":195},[159,3692,453],{"emptyLinePlaceholder":452},[159,3694,3695,3697,3699,3701,3703,3705,3707,3709,3711,3713,3715,3717,3719,3721,3723],{"class":161,"line":212},[159,3696,1839],{"class":712},[159,3698,716],{"class":463},[159,3700,475],{"class":176},[159,3702,2535],{"class":180},[159,3704,475],{"class":176},[159,3706,767],{"class":463},[159,3708,770],{"class":176},[159,3710,2544],{"class":712},[159,3712,716],{"class":463},[159,3714,475],{"class":176},[159,3716,2551],{"class":180},[159,3718,475],{"class":176},[159,3720,2556],{"class":176},[159,3722,2559],{"class":680},[159,3724,688],{"class":176},[159,3726,3727,3729,3731,3733,3735,3737,3739,3741,3743,3745,3747,3749,3751,3753],{"class":161,"line":233},[159,3728,2566],{"class":684},[159,3730,2569],{"class":463},[159,3732,770],{"class":176},[159,3734,2574],{"class":712},[159,3736,716],{"class":172},[159,3738,475],{"class":176},[159,3740,1846],{"class":180},[159,3742,475],{"class":176},[159,3744,225],{"class":176},[159,3746,475],{"class":176},[159,3748,2589],{"class":180},[159,3750,475],{"class":176},[159,3752,767],{"class":172},[159,3754,779],{"class":176},[159,3756,3757,3759],{"class":161,"line":244},[159,3758,1245],{"class":176},[159,3760,1866],{"class":463},[13,3762,3763,3764,3766],{},"こうするとwebpackが",[55,3765,3684],{},"のインポートを捉え、適切にバンドルしてくれます。",[96,3768,3769],{"id":3769},"それぞれのモジュールの説明",[113,3771,3773],{"className":1805,"code":3772,"filename":1879,"language":1808,"meta":120,"style":120},"const MiniCssExtractPlugin = require('mini-css-extract-plugin');\n...\n...\nmodule: {\n rules: [\n {\n test: \u002F\\.(sa|sc|c)ss$\u002F,\n exclude: \u002Fnode_modules\u002F,\n use: [\n MiniCssExtractPlugin.loader,\n {\n loader: 'css-loader',\n options: { url: false }\n },\n 'sass-loader'\n ]\n }\n ]\n},\n...\nplugins: [\n new MiniCssExtractPlugin({\n 　　filename: 'style.css'\n })\n]\n",[55,3774,3775,3797,3802,3806,3815,3824,3829,3862,3877,3886,3897,3902,3917,3934,3939,3948,3952,3956,3960,3965,3969,3978,3989,4002,4009],{"__ignoreMap":120},[159,3776,3777,3779,3781,3783,3785,3787,3789,3791,3793,3795],{"class":161,"line":162},[159,3778,2809],{"class":680},[159,3780,2812],{"class":463},[159,3782,1658],{"class":176},[159,3784,2817],{"class":712},[159,3786,716],{"class":463},[159,3788,475],{"class":176},[159,3790,2775],{"class":180},[159,3792,475],{"class":176},[159,3794,767],{"class":463},[159,3796,779],{"class":176},[159,3798,3799],{"class":161,"line":169},[159,3800,3801],{"class":176},"...\n",[159,3803,3804],{"class":161,"line":184},[159,3805,3801],{"class":176},[159,3807,3808,3811,3813],{"class":161,"line":195},[159,3809,3810],{"class":165},"module",[159,3812,177],{"class":176},[159,3814,793],{"class":176},[159,3816,3817,3820,3822],{"class":161,"line":212},[159,3818,3819],{"class":165}," rules",[159,3821,177],{"class":176},[159,3823,464],{"class":172},[159,3825,3826],{"class":161,"line":233},[159,3827,3828],{"class":176}," {\n",[159,3830,3831,3834,3836,3838,3840,3842,3844,3846,3848,3850,3852,3854,3856,3858,3860],{"class":161,"line":244},[159,3832,3833],{"class":172}," test",[159,3835,177],{"class":176},[159,3837,2921],{"class":176},[159,3839,2924],{"class":463},[159,3841,716],{"class":176},[159,3843,2929],{"class":180},[159,3845,2932],{"class":176},[159,3847,2935],{"class":180},[159,3849,2932],{"class":176},[159,3851,2940],{"class":180},[159,3853,767],{"class":176},[159,3855,2945],{"class":180},[159,3857,1839],{"class":684},[159,3859,2950],{"class":176},[159,3861,304],{"class":176},[159,3863,3864,3867,3869,3871,3873,3875],{"class":161,"line":255},[159,3865,3866],{"class":172}," exclude",[159,3868,177],{"class":176},[159,3870,2921],{"class":176},[159,3872,1871],{"class":180},[159,3874,2950],{"class":176},[159,3876,304],{"class":176},[159,3878,3879,3882,3884],{"class":161,"line":267},[159,3880,3881],{"class":172}," use",[159,3883,177],{"class":176},[159,3885,464],{"class":172},[159,3887,3888,3891,3893,3895],{"class":161,"line":279},[159,3889,3890],{"class":463}," MiniCssExtractPlugin",[159,3892,770],{"class":176},[159,3894,2986],{"class":463},[159,3896,304],{"class":176},[159,3898,3899],{"class":161,"line":782},[159,3900,3901],{"class":176}," {\n",[159,3903,3904,3907,3909,3911,3913,3915],{"class":161,"line":787},[159,3905,3906],{"class":172}," loader",[159,3908,177],{"class":176},[159,3910,1824],{"class":176},[159,3912,2772],{"class":180},[159,3914,475],{"class":176},[159,3916,304],{"class":176},[159,3918,3919,3922,3924,3926,3928,3930,3932],{"class":161,"line":796},[159,3920,3921],{"class":172}," options",[159,3923,177],{"class":176},[159,3925,3020],{"class":176},[159,3927,3023],{"class":172},[159,3929,177],{"class":176},[159,3931,3028],{"class":275},[159,3933,3031],{"class":176},[159,3935,3936],{"class":161,"line":804},[159,3937,3938],{"class":176}," },\n",[159,3940,3941,3944,3946],{"class":161,"line":810},[159,3942,3943],{"class":176}," '",[159,3945,2766],{"class":180},[159,3947,3048],{"class":176},[159,3949,3950],{"class":161,"line":816},[159,3951,3066],{"class":172},[159,3953,3954],{"class":161,"line":822},[159,3955,807],{"class":176},[159,3957,3958],{"class":161,"line":2996},[159,3959,3191],{"class":172},[159,3961,3962],{"class":161,"line":3012},[159,3963,3964],{"class":176},"},\n",[159,3966,3967],{"class":161,"line":3034},[159,3968,3801],{"class":176},[159,3970,3971,3974,3976],{"class":161,"line":3040},[159,3972,3973],{"class":165},"plugins",[159,3975,177],{"class":176},[159,3977,464],{"class":463},[159,3979,3980,3983,3985,3987],{"class":161,"line":3051},[159,3981,3982],{"class":176}," new",[159,3984,3158],{"class":712},[159,3986,716],{"class":463},[159,3988,688],{"class":176},[159,3990,3991,3994,3996,3998,4000],{"class":161,"line":3057},[159,3992,3993],{"class":172}," 　　filename",[159,3995,177],{"class":176},[159,3997,1824],{"class":176},[159,3999,3175],{"class":180},[159,4001,3048],{"class":176},[159,4003,4004,4007],{"class":161,"line":3063},[159,4005,4006],{"class":176}," }",[159,4008,1866],{"class":463},[159,4010,4011],{"class":161,"line":3069},[159,4012,209],{"class":463},[13,4014,4015,4017,4018,4020,4021,4024],{},[55,4016,1879],{},"では特にこの箇所が重要になります。",[55,4019,3810],{},"の中身でsassや画像などのファイルを取り扱えるようになります。",[55,4022,4023],{},"rules","という箇所に取り扱うファイルの拡張子を正規表現で捉え、それに対するローダーの使用などを定義します。",[13,4026,4027,4030,4031,4033,4034,4037],{},[55,4028,4029],{},"MiniCssExtractPlugin","はcssをstyle.cssのような外部ファイルとして出力するために必要なプラグインです。",[55,4032,982],{},"にて",[55,4035,4036],{},"import '~\u002Fsass\u002Fstyle.scss';","という記述があったと思います。このプラグインを使わない場合、webpackでのcssバンドルは外部ファイルでなく、HTMLに直接インライン記述をしようとします。（そうした方が処理と通信が早くなるらしい）",[13,4039,4040,4041,4043,4044,4046,4047,2172,4049,4051,4052,4054,4055,4057,4058,4061,4062,4064,4065,4068],{},"しかし外部ファイル",[55,4042,3175],{},"として今回は出力したいので、",[55,4045,4029],{},"を用いて",[55,4048,982],{},[55,4050,4036],{},"のインポートを参考に、dist配下に",[55,4053,3175],{},"を出力します。ように外部ファイルとして出力します。",[55,4056,4029],{},"のローダーとプラグインに記述しておきます。プラグインの箇所では出力ファイル名を指定します。",[55,4059,4060],{},"filename: 'style.css'","としていますが、指定しない場合はエントリーファイルの",[55,4063,982],{},"から",[55,4066,4067],{},"main.css","が出力されます。",[13,4070,4071],{},"以上でsassのバンドルができるようになりました。早速やってみます。",[113,4073,4076],{"className":4074,"code":4075,"language":119},[116],"npm run build\n",[55,4077,4075],{"__ignoreMap":120},[13,4079,4080],{},"するとdistにstyle.cssができました。中身をみてみるとsassで定義した依存性や変数が当てはまっています。",[47,4082,4083],{"id":4083},"基礎編終了",[13,4085,4086],{},"以上がwebpackを用いたjsファイルのバンドルとsassのコンパイルです。大切なのは5つの概念と必要なモジュールを読み込み、設定することです。次回は忌まわしきIEでjsが動くようにすること、画像の依存性解決、複数条件のバンドルを解説します。",[907,4088,4089],{},"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 .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 .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}",{"title":120,"searchDepth":184,"depth":184,"links":4091},[4092,4093,4094,4095,4098,4103],{"id":1508,"depth":169,"text":1508},{"id":1531,"depth":169,"text":1531},{"id":1562,"depth":169,"text":1563},{"id":2166,"depth":169,"text":2166,"children":4096},[4097],{"id":2643,"depth":184,"text":2643},{"id":2750,"depth":169,"text":2751,"children":4099},[4100,4101,4102],{"id":2757,"depth":184,"text":2758},{"id":3199,"depth":184,"text":3200},{"id":3769,"depth":184,"text":3769},{"id":4083,"depth":169,"text":4083},[206],"webpack基礎とSass・jsのバンドル",{},"\u002Fseries\u002Fwell-study-webpack-1",{"title":1457,"description":4105},"well-study-webpack","ちゃんと理解するWebpack5。","series\u002Fwell-study-webpack-1",[222,1450],"_mix\u002Flogo-on-white-bg-768x299.png","tvz3F4ALarSfdIbpPp8wmTnJpLE5NRMu4vTA4PHN1Dc",{"id":4116,"title":4117,"body":4118,"category":5618,"createdAt":5619,"description":4117,"extension":928,"index":937,"meta":5620,"navigation":452,"path":5621,"publish":452,"seo":5622,"series":937,"seriesTitle":937,"stem":5623,"tag":5624,"thumbnail":5625,"updatedAt":937,"__hash__":5626},"articles\u002Farticles\u002Fgoogle-map-vuejs.md","Google Maps APIとVue.js を使ってGoogle Map 上にルートを描画する",{"type":10,"value":4119,"toc":5605},[4120,4123,4127,4136,4145,4148,4151,4155,4164,4170,4174,4189,4489,4495,4498,4502,4505,4530,4533,4542,4553,4606,4609,4612,4619,4904,4912,4915,4923,4938,4944,4948,4954,4989,4992,4995,5175,5181,5184,5208,5211,5214,5217,5220,5227,5230,5348,5358,5361,5364,5367,5370,5374,5377,5380,5394,5401,5564,5583,5586,5589,5593,5596,5599,5602],[13,4121,4122],{},"こんにちはjunです。自主開発で地図上に描画する機能を実装するときに「Vueを用いてGoogle Map上にラインを描画できないかな？」と思いその方法を調べた結果、なんとか実装できました。今回の記事ではGoogle Map APIを用いてVue（またはVanilla js）で地図の表示とラインの描画機能を実装したいと思います。Google Map APIの取得の仕方とVue.jsのインストールなどはある程度省きます。",[47,4124,4126],{"id":4125},"google-map-apiを取得する","Google Map APIを取得する",[13,4128,4129,4130,4135],{},"詳細な取得方法は省略しますが、最低限必要なものだけ解説します。自前のGoogleアカウントを用いて、",[872,4131,4134],{"href":4132,"rel":4133},"https:\u002F\u002Fcloud.google.com\u002Fmaps-platform?hl=ja",[876],"Google Cloud Platform","でGoogle Map APIを取得します。",[13,4137,4138,4139,4144],{},"毎月$200分までのリクエストは無料なので開発環境には十分でしょう。そしてweb上にGoogleMapを表示するには",[872,4140,4143],{"href":4141,"rel":4142},"https:\u002F\u002Fconsole.cloud.google.com\u002Fapis\u002Flibrary\u002Fmaps-backend.googleapis.com?",[876],"Maps JavaScript API","が必要になります。",[833,4146],{":src":4147,":width":2147,":center":837},"'_mix\u002Fsch-2021-03-07-17.15.12.png'",[13,4149,4150],{},"このAPIを有効にしてAPIキーを手に入れます。まずAPI側のセットアップは以上です。",[47,4152,4154],{"id":4153},"vue側の準備","Vue側の準備",[13,4156,4157,4158,4163],{},"今回は",[872,4159,4162],{"href":4160,"rel":4161},"https:\u002F\u002Fcli.vuejs.org\u002F",[876],"Vue CLI","を用いて開発します。vue cliを用いて適当にプロジェクトを作成します。",[113,4165,4168],{"className":4166,"code":4167,"language":119},[116],"$ vue create vue_map\n",[55,4169,4167],{"__ignoreMap":120},[96,4171,4173],{"id":4172},"api-用のjsを読み込む","api 用のJSを読み込む",[13,4175,4176,4179,4180,530,4182,4185,4186,4188],{},[55,4177,4178],{},"\u002Fsrc"," 配下にある",[55,4181,982],{},[55,4183,4184],{},"\u002Fpublic","配下にある",[55,4187,1875],{},"に以下のコードを挿入します。",[113,4190,4193],{"className":1609,"code":4191,"filename":4192,"language":1612,"meta":120,"style":120},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"\">\n \u003Chead>\n \u003Cmeta charset=\"utf-8\">\n \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n \u003Clink rel=\"icon\" href=\"\u003C%= BASE_URL %>favicon.ico\">\n \n　　\u003C!-- このスクリプトを挿入-->\n \u003Cscript src=\"http:\u002F\u002Fmaps.google.com\u002Fmaps\u002Fapi\u002Fjs?key=YOUR_API_KEY&language=ja\">\u003C\u002Fscript>\n \n　　 \u003Ctitle>\u003C%= htmlWebpackPlugin.options.title %>\u003C\u002Ftitle>\n \u003C\u002Fhead>\n \u003Cbody>\n \u003Cnoscript>\n \u003Cstrong>We're sorry but \u003C%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.\u003C\u002Fstrong>\n \u003C\u002Fnoscript>\n \u003Cdiv id=\"app\">\u003C\u002Fdiv>\n \u003C!-- built files will be auto injected -->\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","public\u002Findex.html",[55,4194,4195,4205,4220,4229,4247,4278,4309,4339,4343,4348,4371,4376,4394,4403,4411,4420,4438,4446,4468,4473,4481],{"__ignoreMap":120},[159,4196,4197,4199,4201,4203],{"class":161,"line":162},[159,4198,1619],{"class":176},[159,4200,1622],{"class":172},[159,4202,1625],{"class":680},[159,4204,634],{"class":176},[159,4206,4207,4209,4211,4214,4216,4218],{"class":161,"line":169},[159,4208,628],{"class":176},[159,4210,1612],{"class":172},[159,4212,4213],{"class":680}," lang",[159,4215,1658],{"class":176},[159,4217,2259],{"class":176},[159,4219,634],{"class":176},[159,4221,4222,4225,4227],{"class":161,"line":184},[159,4223,4224],{"class":176}," \u003C",[159,4226,1642],{"class":172},[159,4228,634],{"class":176},[159,4230,4231,4233,4235,4237,4239,4241,4243,4245],{"class":161,"line":195},[159,4232,639],{"class":176},[159,4234,1652],{"class":172},[159,4236,1655],{"class":680},[159,4238,1658],{"class":176},[159,4240,1090],{"class":176},[159,4242,1663],{"class":180},[159,4244,1090],{"class":176},[159,4246,634],{"class":176},[159,4248,4249,4251,4253,4256,4258,4260,4263,4265,4267,4269,4271,4274,4276],{"class":161,"line":212},[159,4250,639],{"class":176},[159,4252,1652],{"class":172},[159,4254,4255],{"class":680}," http-equiv",[159,4257,1658],{"class":176},[159,4259,1090],{"class":176},[159,4261,4262],{"class":180},"X-UA-Compatible",[159,4264,1090],{"class":176},[159,4266,747],{"class":680},[159,4268,1658],{"class":176},[159,4270,1090],{"class":176},[159,4272,4273],{"class":180},"IE=edge",[159,4275,1090],{"class":176},[159,4277,634],{"class":176},[159,4279,4280,4282,4284,4287,4289,4291,4294,4296,4298,4300,4302,4305,4307],{"class":161,"line":233},[159,4281,639],{"class":176},[159,4283,1652],{"class":172},[159,4285,4286],{"class":680}," name",[159,4288,1658],{"class":176},[159,4290,1090],{"class":176},[159,4292,4293],{"class":180},"viewport",[159,4295,1090],{"class":176},[159,4297,747],{"class":680},[159,4299,1658],{"class":176},[159,4301,1090],{"class":176},[159,4303,4304],{"class":180},"width=device-width,initial-scale=1.0",[159,4306,1090],{"class":176},[159,4308,634],{"class":176},[159,4310,4311,4313,4315,4317,4319,4321,4324,4326,4328,4330,4332,4335,4337],{"class":161,"line":244},[159,4312,639],{"class":176},[159,4314,3418],{"class":172},[159,4316,3421],{"class":680},[159,4318,1658],{"class":176},[159,4320,1090],{"class":176},[159,4322,4323],{"class":180},"icon",[159,4325,1090],{"class":176},[159,4327,3433],{"class":680},[159,4329,1658],{"class":176},[159,4331,1090],{"class":176},[159,4333,4334],{"class":180},"\u003C%= BASE_URL %>favicon.ico",[159,4336,1090],{"class":176},[159,4338,634],{"class":176},[159,4340,4341],{"class":161,"line":255},[159,4342,2883],{"class":463},[159,4344,4345],{"class":161,"line":267},[159,4346,4347],{"class":1907},"　　\u003C!-- このスクリプトを挿入-->\n",[159,4349,4350,4352,4354,4356,4358,4360,4363,4365,4367,4369],{"class":161,"line":279},[159,4351,639],{"class":176},[159,4353,673],{"class":172},[159,4355,1775],{"class":680},[159,4357,1658],{"class":176},[159,4359,1090],{"class":176},[159,4361,4362],{"class":180},"http:\u002F\u002Fmaps.google.com\u002Fmaps\u002Fapi\u002Fjs?key=YOUR_API_KEY&language=ja",[159,4364,1090],{"class":176},[159,4366,1787],{"class":176},[159,4368,673],{"class":172},[159,4370,634],{"class":176},[159,4372,4373],{"class":161,"line":782},[159,4374,4375],{"class":463}," \n",[159,4377,4378,4381,4383,4385,4388,4390,4392],{"class":161,"line":787},[159,4379,4380],{"class":176},"　　 \u003C",[159,4382,173],{"class":172},[159,4384,1676],{"class":176},[159,4386,4387],{"class":463},"\u003C%= htmlWebpackPlugin.options.title %>",[159,4389,662],{"class":176},[159,4391,173],{"class":172},[159,4393,634],{"class":176},[159,4395,4396,4399,4401],{"class":161,"line":796},[159,4397,4398],{"class":176}," \u003C\u002F",[159,4400,1642],{"class":172},[159,4402,634],{"class":176},[159,4404,4405,4407,4409],{"class":161,"line":804},[159,4406,4224],{"class":176},[159,4408,1704],{"class":172},[159,4410,634],{"class":176},[159,4412,4413,4415,4418],{"class":161,"line":810},[159,4414,639],{"class":176},[159,4416,4417],{"class":172},"noscript",[159,4419,634],{"class":176},[159,4421,4422,4425,4427,4429,4432,4434,4436],{"class":161,"line":816},[159,4423,4424],{"class":176}," \u003C",[159,4426,20],{"class":172},[159,4428,1676],{"class":176},[159,4430,4431],{"class":463},"We're sorry but \u003C%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.",[159,4433,662],{"class":176},[159,4435,20],{"class":172},[159,4437,634],{"class":176},[159,4439,4440,4442,4444],{"class":161,"line":822},[159,4441,653],{"class":176},[159,4443,4417],{"class":172},[159,4445,634],{"class":176},[159,4447,4448,4450,4452,4454,4456,4458,4460,4462,4464,4466],{"class":161,"line":2996},[159,4449,639],{"class":176},[159,4451,408],{"class":172},[159,4453,1725],{"class":680},[159,4455,1658],{"class":176},[159,4457,1090],{"class":176},[159,4459,1732],{"class":180},[159,4461,1090],{"class":176},[159,4463,1787],{"class":176},[159,4465,408],{"class":172},[159,4467,634],{"class":176},[159,4469,4470],{"class":161,"line":3012},[159,4471,4472],{"class":1907}," \u003C!-- built files will be auto injected -->\n",[159,4474,4475,4477,4479],{"class":161,"line":3034},[159,4476,4398],{"class":176},[159,4478,1704],{"class":172},[159,4480,634],{"class":176},[159,4482,4483,4485,4487],{"class":161,"line":3040},[159,4484,662],{"class":176},[159,4486,1612],{"class":172},[159,4488,634],{"class":176},[13,4490,4491,4494],{},[55,4492,4493],{},"http:\u002F\u002Fmaps.google.com\u002Fmaps\u002Fapi\u002Fjs","からAPIのソースを手に入れます。できたらnpmあたりでローカルに予めインストールしたいなと思ったのですが、node.js専用だったりとひとまず開発したかったので、今回は外部ファイルとします。このときVue.jsより早く読み込まれるようにしましょう。",[13,4496,4497],{},"スクリプトのurlにはAPIキーを含めます。公開環境で使用する場合は必ずAPIキーが自サイトのみで使用される条件を設定しておきましょう。でないと第三者に好き勝手にキーを使われて、請求だけはあなたのクレジットカードにきます。",[96,4499,4501],{"id":4500},"プラグインとしてvueに登録しておく","プラグインとしてVueに登録しておく",[13,4503,4504],{},"上記のソースを読み込めばwindow.googleを見ると、今回使用するAPIを操作できるクラスなりメソッドがあります。",[113,4506,4508],{"className":1805,"code":4507,"language":1808,"meta":120,"style":120},"console.lgo(window.google);\n\u002F**\n*{maps: {…}}\n*\u002F\n",[55,4509,4510,4515,4520,4525],{"__ignoreMap":120},[159,4511,4512],{"class":161,"line":162},[159,4513,4514],{},"console.lgo(window.google);\n",[159,4516,4517],{"class":161,"line":169},[159,4518,4519],{},"\u002F**\n",[159,4521,4522],{"class":161,"line":184},[159,4523,4524],{},"*{maps: {…}}\n",[159,4526,4527],{"class":161,"line":195},[159,4528,4529],{},"*\u002F\n",[13,4531,4532],{},"例えば地図を特定のDOMにマウントするときは以下のように呼びます。",[113,4534,4536],{"className":1805,"code":4535,"language":1808,"meta":120,"style":120},"window.google.maps.Map(document.getElementById('map'),{option});\n",[55,4537,4538],{"__ignoreMap":120},[159,4539,4540],{"class":161,"line":162},[159,4541,4535],{},[13,4543,4544,4545,4548,4549,4552],{},"毎回、",[55,4546,4547],{},"window.google.maps","とやるのは面倒なので",[55,4550,4551],{},"this.$gm","と呼び出せるようにプラグイン化しておきます。",[113,4554,4556],{"className":1805,"code":4555,"filename":1807,"language":1808,"meta":120,"style":120},"import Vue from 'vue'\nimport App from '.\u002FApp.vue'\n\n\u002F\u002Fこれ\nVue.prototype.$gm = window.google.maps;\n\nVue.config.productionTip = false\nnew Vue({\n render: h => h(App),\n}).$mount('#app')\n",[55,4557,4558,4563,4568,4572,4577,4582,4586,4591,4596,4601],{"__ignoreMap":120},[159,4559,4560],{"class":161,"line":162},[159,4561,4562],{},"import Vue from 'vue'\n",[159,4564,4565],{"class":161,"line":169},[159,4566,4567],{},"import App from '.\u002FApp.vue'\n",[159,4569,4570],{"class":161,"line":184},[159,4571,453],{"emptyLinePlaceholder":452},[159,4573,4574],{"class":161,"line":195},[159,4575,4576],{},"\u002F\u002Fこれ\n",[159,4578,4579],{"class":161,"line":212},[159,4580,4581],{},"Vue.prototype.$gm = window.google.maps;\n",[159,4583,4584],{"class":161,"line":233},[159,4585,453],{"emptyLinePlaceholder":452},[159,4587,4588],{"class":161,"line":244},[159,4589,4590],{},"Vue.config.productionTip = false\n",[159,4592,4593],{"class":161,"line":255},[159,4594,4595],{},"new Vue({\n",[159,4597,4598],{"class":161,"line":267},[159,4599,4600],{}," render: h => h(App),\n",[159,4602,4603],{"class":161,"line":279},[159,4604,4605],{},"}).$mount('#app')\n",[13,4607,4608],{},"これで前準備が完了しました。",[47,4610,4611],{"id":4611},"とりあえず地図をマウントする",[13,4613,4614,4615,4618],{},"準備が整ったのでvueを用いてGoogle Mapをマウントしましょう。インストール直後にある",[55,4616,4617],{},"App.vue","を以下のように書きます。",[113,4620,4623],{"className":618,"code":4621,"filename":4622,"language":621,"meta":120,"style":120},"\u003Ctemplate>\n \u003Cdiv id=\"app\" class=\"mt-4\">\n \u003Cdiv id=\"map\">\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n name: 'App',\n data(){\n return{\n map:undefined,\n }\n },\n mounted(){\n const map = new this.$gm.Map(document.getElementById('map'),{\n center: { lat: 34.855273888888888, lng: 135.30649 }, \u002F\u002F自由な緯度・経度を入力\n zoom: 10,\n });\n　　this.map = map;\n }\n}\n\u003C\u002Fscript>\n","src\u002FApp.vue",[55,4624,4625,4633,4662,4685,4693,4701,4705,4713,4721,4737,4745,4751,4759,4763,4768,4775,4821,4854,4866,4874,4887,4892,4896],{"__ignoreMap":120},[159,4626,4627,4629,4631],{"class":161,"line":162},[159,4628,628],{"class":176},[159,4630,631],{"class":172},[159,4632,634],{"class":176},[159,4634,4635,4637,4639,4641,4643,4645,4647,4649,4651,4653,4655,4658,4660],{"class":161,"line":169},[159,4636,4224],{"class":176},[159,4638,408],{"class":172},[159,4640,1725],{"class":680},[159,4642,1658],{"class":176},[159,4644,1090],{"class":176},[159,4646,1732],{"class":180},[159,4648,1090],{"class":176},[159,4650,3571],{"class":680},[159,4652,1658],{"class":176},[159,4654,1090],{"class":176},[159,4656,4657],{"class":180},"mt-4",[159,4659,1090],{"class":176},[159,4661,634],{"class":176},[159,4663,4664,4666,4668,4670,4672,4674,4677,4679,4681,4683],{"class":161,"line":184},[159,4665,4424],{"class":176},[159,4667,408],{"class":172},[159,4669,1725],{"class":680},[159,4671,1658],{"class":176},[159,4673,1090],{"class":176},[159,4675,4676],{"class":180},"map",[159,4678,1090],{"class":176},[159,4680,1787],{"class":176},[159,4682,408],{"class":172},[159,4684,634],{"class":176},[159,4686,4687,4689,4691],{"class":161,"line":195},[159,4688,4398],{"class":176},[159,4690,408],{"class":172},[159,4692,634],{"class":176},[159,4694,4695,4697,4699],{"class":161,"line":212},[159,4696,662],{"class":176},[159,4698,631],{"class":172},[159,4700,634],{"class":176},[159,4702,4703],{"class":161,"line":233},[159,4704,453],{"emptyLinePlaceholder":452},[159,4706,4707,4709,4711],{"class":161,"line":244},[159,4708,628],{"class":176},[159,4710,673],{"class":172},[159,4712,634],{"class":176},[159,4714,4715,4717,4719],{"class":161,"line":255},[159,4716,681],{"class":684},[159,4718,685],{"class":684},[159,4720,793],{"class":176},[159,4722,4723,4726,4728,4730,4733,4735],{"class":161,"line":267},[159,4724,4725],{"class":172}," name",[159,4727,177],{"class":176},[159,4729,1824],{"class":176},[159,4731,4732],{"class":180},"App",[159,4734,475],{"class":176},[159,4736,304],{"class":176},[159,4738,4739,4742],{"class":161,"line":279},[159,4740,4741],{"class":172}," data",[159,4743,4744],{"class":176},"(){\n",[159,4746,4747,4749],{"class":161,"line":782},[159,4748,2566],{"class":684},[159,4750,688],{"class":176},[159,4752,4753,4756],{"class":161,"line":787},[159,4754,4755],{"class":172}," map",[159,4757,4758],{"class":176},":undefined,\n",[159,4760,4761],{"class":161,"line":796},[159,4762,2010],{"class":176},[159,4764,4765],{"class":161,"line":804},[159,4766,4767],{"class":176}," },\n",[159,4769,4770,4773],{"class":161,"line":810},[159,4771,4772],{"class":172}," mounted",[159,4774,4744],{"class":176},[159,4776,4777,4780,4783,4785,4788,4791,4794,4796,4799,4801,4803,4805,4808,4810,4812,4814,4816,4818],{"class":161,"line":816},[159,4778,4779],{"class":680}," const",[159,4781,4782],{"class":463}," map",[159,4784,750],{"class":176},[159,4786,4787],{"class":176}," new",[159,4789,4790],{"class":176}," this.",[159,4792,4793],{"class":463},"$gm",[159,4795,770],{"class":176},[159,4797,4798],{"class":712},"Map",[159,4800,716],{"class":172},[159,4802,885],{"class":463},[159,4804,770],{"class":176},[159,4806,4807],{"class":712},"getElementById",[159,4809,716],{"class":172},[159,4811,475],{"class":176},[159,4813,4676],{"class":180},[159,4815,475],{"class":176},[159,4817,767],{"class":172},[159,4819,4820],{"class":176},",{\n",[159,4822,4823,4826,4828,4830,4833,4835,4838,4840,4843,4845,4848,4851],{"class":161,"line":822},[159,4824,4825],{"class":172}," center",[159,4827,177],{"class":176},[159,4829,3020],{"class":176},[159,4831,4832],{"class":172}," lat",[159,4834,177],{"class":176},[159,4836,4837],{"class":263}," 34.855273888888888",[159,4839,225],{"class":176},[159,4841,4842],{"class":172}," lng",[159,4844,177],{"class":176},[159,4846,4847],{"class":263}," 135.30649",[159,4849,4850],{"class":176}," },",[159,4852,4853],{"class":1907}," \u002F\u002F自由な緯度・経度を入力\n",[159,4855,4856,4859,4861,4864],{"class":161,"line":2996},[159,4857,4858],{"class":172}," zoom",[159,4860,177],{"class":176},[159,4862,4863],{"class":263}," 10",[159,4865,304],{"class":176},[159,4867,4868,4870,4872],{"class":161,"line":3012},[159,4869,4006],{"class":176},[159,4871,767],{"class":172},[159,4873,779],{"class":176},[159,4875,4876,4879,4881,4883,4885],{"class":161,"line":3034},[159,4877,4878],{"class":176},"　　this.",[159,4880,4676],{"class":463},[159,4882,750],{"class":176},[159,4884,4782],{"class":463},[159,4886,779],{"class":176},[159,4888,4889],{"class":161,"line":3040},[159,4890,4891],{"class":176}," }\n",[159,4893,4894],{"class":161,"line":3051},[159,4895,819],{"class":176},[159,4897,4898,4900,4902],{"class":161,"line":3057},[159,4899,662],{"class":176},[159,4901,673],{"class":172},[159,4903,634],{"class":176},[13,4905,4906,4911],{},[872,4907,4910],{"href":4908,"rel":4909},"https:\u002F\u002Fdevelopers.google.com\u002Fmaps\u002Fdocumentation\u002Fjavascript\u002Freference\u002Fmap?hl=ja",[876],"Mapsクラス","のレファランスの通り、第一引数にマウント対象のDOMを入れ、第二引数にはオプションを入れます。DOMが必要なのでmounted()で初期処理を行います。",[13,4913,4914],{},"オプションには",[75,4916,4917,4920],{},[28,4918,4919],{},"center：初期表示の地図の中央座標",[28,4921,4922],{},"zoom：拡大の縮尺（10ぐらいがちょうどいい）",[13,4924,4925,4926,4929,4930,4933,4934,4937],{},"を入れておきましょう。",[55,4927,4928],{},"lat","は緯度、",[55,4931,4932],{},"lng","は経度を示しています。このインスタンスは後で使い回すので",[55,4935,4936],{},"this.map = map"," としてインスタンスを入れておきましょう。ひとまずこの処理を実装してブラウザで見てみましょう。",[113,4939,4942],{"className":4940,"code":4941,"language":119},[116],"$ npm run serve\n",[55,4943,4941],{"__ignoreMap":120},[833,4945],{":src":4946,":width":4947},"'_mix\u002Fsch-2021-03-07-17.39.26-768x352.png'","'100%'",[13,4949,4950,4953],{},[55,4951,4952],{},"localhost","をみたとき、このようになっていれば問題ありません。ストリートビューや前面表示がない方がいい人はオプションを以下のようにしておきます。",[113,4955,4957],{"className":1805,"code":4956,"filename":1807,"language":1808,"meta":120,"style":120},"new this.$gm.Map(document.getElementById('map'),{\n center: { lat: 34.855273888888888, lng: 135.30649 },\n zoom: 10,\n streetViewControl:false, \u002F\u002F ストリートビュー非表示\n fullscreenControl:false \u002F\u002F フルスクリーン非表示\n});\n",[55,4958,4959,4964,4969,4974,4979,4984],{"__ignoreMap":120},[159,4960,4961],{"class":161,"line":162},[159,4962,4963],{},"new this.$gm.Map(document.getElementById('map'),{\n",[159,4965,4966],{"class":161,"line":169},[159,4967,4968],{}," center: { lat: 34.855273888888888, lng: 135.30649 },\n",[159,4970,4971],{"class":161,"line":184},[159,4972,4973],{}," zoom: 10,\n",[159,4975,4976],{"class":161,"line":195},[159,4977,4978],{}," streetViewControl:false, \u002F\u002F ストリートビュー非表示\n",[159,4980,4981],{"class":161,"line":212},[159,4982,4983],{}," fullscreenControl:false \u002F\u002F フルスクリーン非表示\n",[159,4985,4986],{"class":161,"line":233},[159,4987,4988],{},"});\n",[47,4990,4991],{"id":4991},"地図にクリックイベントを追加",[13,4993,4994],{},"Google Mapの地図にはクリックやドラッグなどのイベントリスナーを追加できます。特定の位置やマーカーをクリックしたら何やかんやするというのができます。まずは簡単にクリックした地図位置の緯度・経度を取得してみましょう。以下のようにします。",[113,4996,4998],{"className":1805,"code":4997,"filename":1807,"language":1808,"meta":120,"style":120},"\u003Ctemplate>\n \u003Cdiv id=\"app\" class=\"mt-4\">\n \u003Cdiv id=\"map\">\u003C\u002Fdiv>\n {{position}}\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n\nexport default {\n name: 'App',\n data(){\n return{\n map:undefined,\n position:undefined\n }\n },\n methods:{\n clickOnMap(mapEvent){\n console.log(mapEvent.latLng.toString())\n this.position = mapEvent.latLng.toString();\n }\n },\n mounted(){\n const map = new this.$gm.Map(document.getElementById('map'),{\n center: { lat: 34.855273888888888, lng: 135.30649 }, \u002F\u002F自由な緯度・経度を入力\n zoom: 10,\n });\n\n \u002F\u002Fリスナーの登録\n map.addListener('click',(mapsMouseEvent)=>{\n return this.clickOnMap(mapsMouseEvent);\n });\n\n　　this.map = map;\n }\n}\n",[55,4999,5000,5005,5010,5015,5020,5025,5030,5034,5039,5043,5048,5053,5058,5063,5068,5073,5078,5082,5087,5092,5097,5102,5107,5111,5116,5121,5126,5130,5135,5139,5144,5149,5154,5158,5162,5167,5171],{"__ignoreMap":120},[159,5001,5002],{"class":161,"line":162},[159,5003,5004],{},"\u003Ctemplate>\n",[159,5006,5007],{"class":161,"line":169},[159,5008,5009],{}," \u003Cdiv id=\"app\" class=\"mt-4\">\n",[159,5011,5012],{"class":161,"line":184},[159,5013,5014],{}," \u003Cdiv id=\"map\">\u003C\u002Fdiv>\n",[159,5016,5017],{"class":161,"line":195},[159,5018,5019],{}," {{position}}\n",[159,5021,5022],{"class":161,"line":212},[159,5023,5024],{}," \u003C\u002Fdiv>\n",[159,5026,5027],{"class":161,"line":233},[159,5028,5029],{},"\u003C\u002Ftemplate>\n",[159,5031,5032],{"class":161,"line":244},[159,5033,453],{"emptyLinePlaceholder":452},[159,5035,5036],{"class":161,"line":255},[159,5037,5038],{},"\u003Cscript>\n",[159,5040,5041],{"class":161,"line":267},[159,5042,453],{"emptyLinePlaceholder":452},[159,5044,5045],{"class":161,"line":279},[159,5046,5047],{},"export default {\n",[159,5049,5050],{"class":161,"line":782},[159,5051,5052],{}," name: 'App',\n",[159,5054,5055],{"class":161,"line":787},[159,5056,5057],{}," data(){\n",[159,5059,5060],{"class":161,"line":796},[159,5061,5062],{}," return{\n",[159,5064,5065],{"class":161,"line":804},[159,5066,5067],{}," map:undefined,\n",[159,5069,5070],{"class":161,"line":810},[159,5071,5072],{}," position:undefined\n",[159,5074,5075],{"class":161,"line":816},[159,5076,5077],{}," }\n",[159,5079,5080],{"class":161,"line":822},[159,5081,4767],{},[159,5083,5084],{"class":161,"line":2996},[159,5085,5086],{}," methods:{\n",[159,5088,5089],{"class":161,"line":3012},[159,5090,5091],{}," clickOnMap(mapEvent){\n",[159,5093,5094],{"class":161,"line":3034},[159,5095,5096],{}," console.log(mapEvent.latLng.toString())\n",[159,5098,5099],{"class":161,"line":3040},[159,5100,5101],{}," this.position = mapEvent.latLng.toString();\n",[159,5103,5104],{"class":161,"line":3051},[159,5105,5106],{}," }\n",[159,5108,5109],{"class":161,"line":3057},[159,5110,4767],{},[159,5112,5113],{"class":161,"line":3063},[159,5114,5115],{}," mounted(){\n",[159,5117,5118],{"class":161,"line":3069},[159,5119,5120],{}," const map = new this.$gm.Map(document.getElementById('map'),{\n",[159,5122,5123],{"class":161,"line":3075},[159,5124,5125],{}," center: { lat: 34.855273888888888, lng: 135.30649 }, \u002F\u002F自由な緯度・経度を入力\n",[159,5127,5128],{"class":161,"line":3080},[159,5129,4973],{},[159,5131,5132],{"class":161,"line":3089},[159,5133,5134],{}," });\n",[159,5136,5137],{"class":161,"line":3094},[159,5138,453],{"emptyLinePlaceholder":452},[159,5140,5141],{"class":161,"line":3113},[159,5142,5143],{}," \u002F\u002Fリスナーの登録\n",[159,5145,5146],{"class":161,"line":3118},[159,5147,5148],{}," map.addListener('click',(mapsMouseEvent)=>{\n",[159,5150,5151],{"class":161,"line":3131},[159,5152,5153],{}," return this.clickOnMap(mapsMouseEvent);\n",[159,5155,5156],{"class":161,"line":3136},[159,5157,5134],{},[159,5159,5160],{"class":161,"line":3142},[159,5161,453],{"emptyLinePlaceholder":452},[159,5163,5164],{"class":161,"line":3152},[159,5165,5166],{},"　　this.map = map;\n",[159,5168,5169],{"class":161,"line":3165},[159,5170,4891],{},[159,5172,5173],{"class":161,"line":3180},[159,5174,819],{},[13,5176,5177,5180],{},[55,5178,5179],{},"map.addListener('click',(mapsMouseEvent)=>{...})","とDOMにイベントを追加する時と似ていますね。第二引数に実行するコールバックを入れます。ちなみにコールバックの引数には自動的に地図上の座標なり他の情報が入っています。",[13,5182,5183],{},"このイベントリスナーには以下のメソッドが実行されるようになっており、クリック位置の経度、緯度を取得します。",[113,5185,5187],{"className":1805,"code":5186,"filename":1807,"language":1808,"meta":120,"style":120},"clickOnMap(mapEvent){\n console.log(mapEvent.latLng.toString())\n this.position = mapEvent.latLng.toString();\n},\n",[55,5188,5189,5194,5199,5204],{"__ignoreMap":120},[159,5190,5191],{"class":161,"line":162},[159,5192,5193],{},"clickOnMap(mapEvent){\n",[159,5195,5196],{"class":161,"line":169},[159,5197,5198],{}," console.log(mapEvent.latLng.toString())\n",[159,5200,5201],{"class":161,"line":184},[159,5202,5203],{}," this.position = mapEvent.latLng.toString();\n",[159,5205,5206],{"class":161,"line":195},[159,5207,3964],{},[13,5209,5210],{},"クリックすると以下のようになります。（真ん中の赤いのは気にしないでください。）",[833,5212],{":src":5213,":width":4947},"'_mix\u002Fsch-2021-03-07-18.02.03-768x326.png'",[13,5215,5216],{},"左下に座標が表示されました。ひとまずこれで地図に対するイベントリスナーの登録と情報の取得については理解できたと思います。",[47,5218,5219],{"id":5219},"ラインの描画",[13,5221,5222,5223,5226],{},"それでは今度はクリックした際にラインを描画できるようにします。ラインを描画するためには",[55,5224,5225],{},"google.maps.Polyline","クラスのインスタンスを作成し、先ほどのMapインスタンスにセットすることで描画ができます。",[13,5228,5229],{},"上記の通り地図上の情報を取得できたように、今度は緯度経度の情報を元に地図に何かセットします。まずはMapの初期表示と同時にラインを描画しましょう。",[113,5231,5233],{"className":1805,"code":5232,"filename":1807,"language":1808,"meta":120,"style":120},"... \nmounted(){\n const map = new this.$gm.Map(document.getElementById('map'),{\n center: { lat: 34.855273888888888, lng: 135.30649 },\n zoom: 10,\n });\n map.addListener('click',(mapsMouseEvent)=>{\n return this.clickOnMap(mapsMouseEvent);\n });\n const LINE = new this.$gm.Polyline({\n path:[\n { lat: 34.855273888888888, lng: 135.30649 },\n { lat: 34.854465, lng: 135.8 },\n ],\n geodesic: true,\n strokeColor: \"#FF0000\",\n strokeOpacity: 1.0,\n strokeWeight: 2,\n })\n LINE.setMap(map);\n this.map = map;\n} \n...\n",[55,5234,5235,5240,5245,5250,5255,5260,5265,5270,5275,5279,5284,5289,5294,5299,5304,5309,5314,5319,5324,5329,5334,5339,5344],{"__ignoreMap":120},[159,5236,5237],{"class":161,"line":162},[159,5238,5239],{},"... \n",[159,5241,5242],{"class":161,"line":169},[159,5243,5244],{},"mounted(){\n",[159,5246,5247],{"class":161,"line":184},[159,5248,5249],{}," const map = new this.$gm.Map(document.getElementById('map'),{\n",[159,5251,5252],{"class":161,"line":195},[159,5253,5254],{}," center: { lat: 34.855273888888888, lng: 135.30649 },\n",[159,5256,5257],{"class":161,"line":212},[159,5258,5259],{}," zoom: 10,\n",[159,5261,5262],{"class":161,"line":233},[159,5263,5264],{}," });\n",[159,5266,5267],{"class":161,"line":244},[159,5268,5269],{}," map.addListener('click',(mapsMouseEvent)=>{\n",[159,5271,5272],{"class":161,"line":255},[159,5273,5274],{}," return this.clickOnMap(mapsMouseEvent);\n",[159,5276,5277],{"class":161,"line":267},[159,5278,5264],{},[159,5280,5281],{"class":161,"line":279},[159,5282,5283],{}," const LINE = new this.$gm.Polyline({\n",[159,5285,5286],{"class":161,"line":782},[159,5287,5288],{}," path:[\n",[159,5290,5291],{"class":161,"line":787},[159,5292,5293],{}," { lat: 34.855273888888888, lng: 135.30649 },\n",[159,5295,5296],{"class":161,"line":796},[159,5297,5298],{}," { lat: 34.854465, lng: 135.8 },\n",[159,5300,5301],{"class":161,"line":804},[159,5302,5303],{}," ],\n",[159,5305,5306],{"class":161,"line":810},[159,5307,5308],{}," geodesic: true,\n",[159,5310,5311],{"class":161,"line":816},[159,5312,5313],{}," strokeColor: \"#FF0000\",\n",[159,5315,5316],{"class":161,"line":822},[159,5317,5318],{}," strokeOpacity: 1.0,\n",[159,5320,5321],{"class":161,"line":2996},[159,5322,5323],{}," strokeWeight: 2,\n",[159,5325,5326],{"class":161,"line":3012},[159,5327,5328],{}," })\n",[159,5330,5331],{"class":161,"line":3034},[159,5332,5333],{}," LINE.setMap(map);\n",[159,5335,5336],{"class":161,"line":3040},[159,5337,5338],{}," this.map = map;\n",[159,5340,5341],{"class":161,"line":3051},[159,5342,5343],{},"} \n",[159,5345,5346],{"class":161,"line":3057},[159,5347,3801],{},[13,5349,5350,5353,5354,5357],{},[55,5351,5352],{},"this.$gm.Polyline","でラインインスタンスを作成し、オプションをオブジェクト形式で指定すればラインの色、パス（２点以上の座標）、太さなどを指定できます。最後に",[55,5355,5356],{},"LINE.setMap(map)","で地図にはめると、以下のように描画されます。",[833,5359],{":src":5360,":width":4947},"'_mix\u002Fsch-2021-03-10-21.17.39-768x346.png'",[13,5362,5363],{},"地図に赤線が表示されました。今は２点の適当な座標間ですが細かくパスを設定すれば以下のようにも描画できます。",[833,5365],{":src":5366,":width":2634,":center":837},"'_mix\u002Fsch-2021-03-10-21.19.41.png'",[13,5368,5369],{},"この座標情報は友人のGPSから引っ張ってきたもので、詳細な座標情報が配列であったのでこれほど細かく描画されます。",[47,5371,5373],{"id":5372},"クリックした任意の地点でラインを描画していく","クリックした任意の地点でラインを描画していく。",[13,5375,5376],{},"初期表示でラインを描画することができたので、次はユーザーが任意の地点をクリックしたらその地点に向かってラインが描画されるようにしましょう。",[13,5378,5379],{},"先ほどクリックイベントから座標情報をしたのを覚えていますか？それを応用します。",[25,5381,5382,5385,5388,5391],{},[28,5383,5384],{},"クリック位置から緯度・経度を取得",[28,5386,5387],{},"Google Map用の座標インスタンスに変換",[28,5389,5390],{},"ラインインスタンスにその座標（パス）を追加する。",[28,5392,5393],{},"クリックされたら繰り返す。",[13,5395,5396,5397,5400],{},"クリックイベントに付与した",[55,5398,5399],{},"drawLine","メソッドこんな感じです。",[113,5402,5404],{"className":1805,"code":5403,"filename":1807,"language":1808,"meta":120,"style":120},"data(){\n return{\n map:undefined,\n bounds:undefined,\n path:[],\n line:undefined\n }\n},\nmethods:{\n drawLine(mapEvent){\n let latLng = mapEvent.latLng;\n\n \u002F\u002F １点目をクリック\n if(this.line === undefined){\n const newLine = new this.$gm.Polyline({\n path:[latLng],\n geodesic: true,\n strokeColor: \"#FF0000\",\n strokeOpacity: 1.0,\n strokeWeight: 2,\n })\n newLine.setMap(this.map);\n this.path.push(latLng);\n this.line = newLine;\n return;\n }\n\n \u002F\u002F ２点目以降\n this.path.push(latLng);\n this.line.setPath([...this.path]);\n return;\n },\n},\n",[55,5405,5406,5411,5416,5421,5426,5431,5436,5440,5444,5449,5454,5459,5463,5468,5473,5478,5483,5488,5493,5498,5503,5508,5513,5518,5523,5528,5532,5536,5541,5546,5551,5556,5560],{"__ignoreMap":120},[159,5407,5408],{"class":161,"line":162},[159,5409,5410],{},"data(){\n",[159,5412,5413],{"class":161,"line":169},[159,5414,5415],{}," return{\n",[159,5417,5418],{"class":161,"line":184},[159,5419,5420],{}," map:undefined,\n",[159,5422,5423],{"class":161,"line":195},[159,5424,5425],{}," bounds:undefined,\n",[159,5427,5428],{"class":161,"line":212},[159,5429,5430],{}," path:[],\n",[159,5432,5433],{"class":161,"line":233},[159,5434,5435],{}," line:undefined\n",[159,5437,5438],{"class":161,"line":244},[159,5439,4891],{},[159,5441,5442],{"class":161,"line":255},[159,5443,3964],{},[159,5445,5446],{"class":161,"line":267},[159,5447,5448],{},"methods:{\n",[159,5450,5451],{"class":161,"line":279},[159,5452,5453],{}," drawLine(mapEvent){\n",[159,5455,5456],{"class":161,"line":782},[159,5457,5458],{}," let latLng = mapEvent.latLng;\n",[159,5460,5461],{"class":161,"line":787},[159,5462,453],{"emptyLinePlaceholder":452},[159,5464,5465],{"class":161,"line":796},[159,5466,5467],{}," \u002F\u002F １点目をクリック\n",[159,5469,5470],{"class":161,"line":804},[159,5471,5472],{}," if(this.line === undefined){\n",[159,5474,5475],{"class":161,"line":810},[159,5476,5477],{}," const newLine = new this.$gm.Polyline({\n",[159,5479,5480],{"class":161,"line":816},[159,5481,5482],{}," path:[latLng],\n",[159,5484,5485],{"class":161,"line":822},[159,5486,5487],{}," geodesic: true,\n",[159,5489,5490],{"class":161,"line":2996},[159,5491,5492],{}," strokeColor: \"#FF0000\",\n",[159,5494,5495],{"class":161,"line":3012},[159,5496,5497],{}," strokeOpacity: 1.0,\n",[159,5499,5500],{"class":161,"line":3034},[159,5501,5502],{}," strokeWeight: 2,\n",[159,5504,5505],{"class":161,"line":3040},[159,5506,5507],{}," })\n",[159,5509,5510],{"class":161,"line":3051},[159,5511,5512],{}," newLine.setMap(this.map);\n",[159,5514,5515],{"class":161,"line":3057},[159,5516,5517],{}," this.path.push(latLng);\n",[159,5519,5520],{"class":161,"line":3063},[159,5521,5522],{}," this.line = newLine;\n",[159,5524,5525],{"class":161,"line":3069},[159,5526,5527],{}," return;\n",[159,5529,5530],{"class":161,"line":3075},[159,5531,2010],{},[159,5533,5534],{"class":161,"line":3080},[159,5535,453],{"emptyLinePlaceholder":452},[159,5537,5538],{"class":161,"line":3089},[159,5539,5540],{}," \u002F\u002F ２点目以降\n",[159,5542,5543],{"class":161,"line":3094},[159,5544,5545],{}," this.path.push(latLng);\n",[159,5547,5548],{"class":161,"line":3113},[159,5549,5550],{}," this.line.setPath([...this.path]);\n",[159,5552,5553],{"class":161,"line":3118},[159,5554,5555],{}," return;\n",[159,5557,5558],{"class":161,"line":3131},[159,5559,4767],{},[159,5561,5562],{"class":161,"line":3136},[159,5563,3964],{},[13,5565,5566,5567,5570,5571,5574,5575,5578,5579,5582],{},"１点目の時はインスタンスを作成し",[55,5568,5569],{},"data()","に格納します。そしてクリックごとに",[55,5572,5573],{},"path","に挿入していき、",[55,5576,5577],{},"this.line.setPath([...this.path])","で更新したパスの配列を展開、インスタンスのパスも更新します。するとクリックするたびにその地点に向かって線画描画されます。静止画ですが",[20,5580,5581],{},"VUE","という文字を一筆でかいてみました笑",[833,5584],{":src":5585,":width":4947},"'_mix\u002Fscp-2021-03-10-21.42.12-768x408.png'",[13,5587,5588],{},"末尾のパスを消して再セットすればやり直し機能ができますし、特定のパスの座標を変更すれば途中の変更もできます。今回は面倒なのでやりませんでした。パスのインスタンスを複数管理できれば、複数ライン・レイヤーなど高度なライン描画を実現できます。詳細な実装をしたらまた記事を書いてみます。",[47,5590,5592],{"id":5591},"vueじゃなくてもよくね","Vueじゃなくてもよくね？",[13,5594,5595],{},"はい。その通りです。ほとんどがGoogle map javascript apiから提供されたオブジェクトをいじっているだけです。なのでVanilla.jsな環境でも普通に描画機能は実装できます。今回はvue.jsを利用して自主開発していたのでvue.jsを使っただけです。",[47,5597,5598],{"id":5598},"いろいろ試してみる",[13,5600,5601],{},"Google Map APIには他にもマーカ・カスタムデザインマーカを入れたり、DOM要素を地図に入れ込むなんてこともできるそうです。これらの描画情報をJSONに格納して、DBに入れておけば地図共有アプリなんかもできそうですね。いろいろやってみます。閲覧ありがとうございました。",[907,5603,5604],{},"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 .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}",{"title":120,"searchDepth":184,"depth":184,"links":5606},[5607,5608,5612,5613,5614,5615,5616,5617],{"id":4125,"depth":169,"text":4126},{"id":4153,"depth":169,"text":4154,"children":5609},[5610,5611],{"id":4172,"depth":184,"text":4173},{"id":4500,"depth":184,"text":4501},{"id":4611,"depth":169,"text":4611},{"id":4991,"depth":169,"text":4991},{"id":5219,"depth":169,"text":5219},{"id":5372,"depth":169,"text":5373},{"id":5591,"depth":169,"text":5592},{"id":5598,"depth":169,"text":5598},[206],"2021-03-10",{},"\u002Farticles\u002Fgoogle-map-vuejs",{"title":4117,"description":4117},"articles\u002Fgoogle-map-vuejs",[222,621],"_mix\u002Fscp-2021-03-10-21.42.12-768x408.png","oZOhHuAchOiO9qVocS-_1TA4WK0zOIDu_l3spKlDDsE",{"id":5628,"title":5629,"body":5630,"category":6182,"createdAt":6183,"description":5629,"extension":928,"index":937,"meta":6184,"navigation":452,"path":6185,"publish":452,"seo":6186,"series":937,"seriesTitle":937,"stem":6187,"tag":6188,"thumbnail":937,"updatedAt":937,"__hash__":6189},"articles\u002Farticles\u002Fstuck-on-docker-centos8.md","Docker でcentos8+Apache2.4 の環境を作ろうとして詰まった",{"type":10,"value":5631,"toc":6178},[5632,5635,5643,5646,5649,5657,5661,5664,5767,5770,5796,5799,5826,5833,5940,5947,5951,5958,5964,5967,6122,6125,6156,6166,6175],[13,5633,5634],{},"この記事はosからイメージを指定して作ろうとして、FROM centos から構築して",[13,5636,5637,5640],{},[55,5638,5639],{},"Failed to connect to bus: No such file or directory docker",[55,5641,5642],{},"System has not been booted with systemd as init system (PID 1). Can't operate. Failed to connect to bus: Host is down",[13,5644,5645],{},"というエラーで詰まってブチ切れそうになっている人は以下の方法を確認してみてください。原因は「公式に解決法がありました」から述べていきます。",[13,5647,5648],{},"この記事で使用したOSとdockerのバージョン",[75,5650,5651,5654],{},[28,5652,5653],{},"docker：19.03.13",[28,5655,5656],{},"maxOS Catalina 10.15.5",[47,5658,5660],{"id":5659},"dockerfileからcentos8apache24の環境作ろうとした","Dockerfileからcentos8+apache2.4の環境作ろうとした",[13,5662,5663],{},"apacheのイメージを入れるとosがUbuntuだったりで、できたらosから指定したいなーと思ってcenots8の環境にapacheを入れて行こうと思い以下のようにDockerfileを記述",[113,5665,5670],{"className":5666,"code":5667,"filename":5668,"language":5669,"meta":120,"style":120},"language-dockerfile shiki shiki-themes material-theme-ocean","FROM centos:8\n\nRUN \u002Fbin\u002Fcp \u002Fusr\u002Fshare\u002Fzoneinfo\u002FAsia\u002FTokyo \u002Fetc\u002Flocaltime\n\nRUN yum install -y epel-release && yum clean all\n\nRUN rpm -ivh http:\u002F\u002Fftp.riken.jp\u002FLinux\u002Fremi\u002Fenterprise\u002Fremi-release-8.rpm\n\nRUN yum -y update && yum clean all\n\nRUN yum -y install httpd && yum clean all\n\nRUN yum -y install php74-php php74-php-mysqli php74-php-gd php74-php-mbstring php74-php-opcache php74-php-xml php74-php-pear php74-php-devel php74-php-pecl-imagick php74-php-pecl-imagick-devel php74-php-pecl-zip\n\nRUN ln \u002Fusr\u002Fbin\u002Fphp74 \u002Fusr\u002Fbin\u002Fphp\n\nRUN chown -R apache:apache \u002Fvar\u002Fwww\u002Fhtml\n\nRUN systemctl enable php74-php-fpm\n\nRUN systemctl enable httpd \n","Dockerfile","dockerfile",[55,5671,5672,5677,5681,5686,5690,5695,5699,5704,5708,5713,5717,5722,5726,5731,5735,5740,5744,5749,5753,5758,5762],{"__ignoreMap":120},[159,5673,5674],{"class":161,"line":162},[159,5675,5676],{},"FROM centos:8\n",[159,5678,5679],{"class":161,"line":169},[159,5680,453],{"emptyLinePlaceholder":452},[159,5682,5683],{"class":161,"line":184},[159,5684,5685],{},"RUN \u002Fbin\u002Fcp \u002Fusr\u002Fshare\u002Fzoneinfo\u002FAsia\u002FTokyo \u002Fetc\u002Flocaltime\n",[159,5687,5688],{"class":161,"line":195},[159,5689,453],{"emptyLinePlaceholder":452},[159,5691,5692],{"class":161,"line":212},[159,5693,5694],{},"RUN yum install -y epel-release && yum clean all\n",[159,5696,5697],{"class":161,"line":233},[159,5698,453],{"emptyLinePlaceholder":452},[159,5700,5701],{"class":161,"line":244},[159,5702,5703],{},"RUN rpm -ivh http:\u002F\u002Fftp.riken.jp\u002FLinux\u002Fremi\u002Fenterprise\u002Fremi-release-8.rpm\n",[159,5705,5706],{"class":161,"line":255},[159,5707,453],{"emptyLinePlaceholder":452},[159,5709,5710],{"class":161,"line":267},[159,5711,5712],{},"RUN yum -y update && yum clean all\n",[159,5714,5715],{"class":161,"line":279},[159,5716,453],{"emptyLinePlaceholder":452},[159,5718,5719],{"class":161,"line":782},[159,5720,5721],{},"RUN yum -y install httpd && yum clean all\n",[159,5723,5724],{"class":161,"line":787},[159,5725,453],{"emptyLinePlaceholder":452},[159,5727,5728],{"class":161,"line":796},[159,5729,5730],{},"RUN yum -y install php74-php php74-php-mysqli php74-php-gd php74-php-mbstring php74-php-opcache php74-php-xml php74-php-pear php74-php-devel php74-php-pecl-imagick php74-php-pecl-imagick-devel php74-php-pecl-zip\n",[159,5732,5733],{"class":161,"line":804},[159,5734,453],{"emptyLinePlaceholder":452},[159,5736,5737],{"class":161,"line":810},[159,5738,5739],{},"RUN ln \u002Fusr\u002Fbin\u002Fphp74 \u002Fusr\u002Fbin\u002Fphp\n",[159,5741,5742],{"class":161,"line":816},[159,5743,453],{"emptyLinePlaceholder":452},[159,5745,5746],{"class":161,"line":822},[159,5747,5748],{},"RUN chown -R apache:apache \u002Fvar\u002Fwww\u002Fhtml\n",[159,5750,5751],{"class":161,"line":2996},[159,5752,453],{"emptyLinePlaceholder":452},[159,5754,5755],{"class":161,"line":3012},[159,5756,5757],{},"RUN systemctl enable php74-php-fpm\n",[159,5759,5760],{"class":161,"line":3034},[159,5761,453],{"emptyLinePlaceholder":452},[159,5763,5764],{"class":161,"line":3040},[159,5765,5766],{},"RUN systemctl enable httpd\n",[13,5768,5769],{},"php入っていますがとりあえず上のような感じで必要なものを入れて、apacheを常にONにすれば行けるだろ思い、ビルドする",[113,5771,5775],{"className":5772,"code":5773,"language":5774,"meta":120,"style":120},"language-bash shiki shiki-themes material-theme-ocean","$ docker build -t centos_apche:1.0 .\n","bash",[55,5776,5777],{"__ignoreMap":120},[159,5778,5779,5781,5784,5787,5790,5793],{"class":161,"line":162},[159,5780,1839],{"class":165},[159,5782,5783],{"class":180}," docker",[159,5785,5786],{"class":180}," build",[159,5788,5789],{"class":180}," -t",[159,5791,5792],{"class":180}," centos_apche:1.0",[159,5794,5795],{"class":180}," .\n",[13,5797,5798],{},"ビルドは普通に成功しました。イメージが作られたのを確認していざコンテナを起動。",[113,5800,5802],{"className":5772,"code":5801,"language":5774,"meta":120,"style":120},"docker run -t -d -p 9000:80 centos_apche:1.0\n",[55,5803,5804],{"__ignoreMap":120},[159,5805,5806,5809,5812,5814,5817,5820,5823],{"class":161,"line":162},[159,5807,5808],{"class":165},"docker",[159,5810,5811],{"class":180}," run",[159,5813,5789],{"class":180},[159,5815,5816],{"class":180}," -d",[159,5818,5819],{"class":180}," -p",[159,5821,5822],{"class":180}," 9000:80",[159,5824,5825],{"class":180}," centos_apche:1.0\n",[13,5827,5828,5829,5832],{},"しかし localhost:9000 にアクセスすると「データが送信されませんでした」と真っ黒（chrome）。",[55,5830,5831],{},"docker ps"," で稼働状態を調べてもコンテナはきちんと動いている。つまりコンテナの中で何か起きている。",[113,5834,5836],{"className":5772,"code":5835,"language":5774,"meta":120,"style":120},"docker exec -it {container_id or name} \u002Fbin\u002Fbash\n...\n[root@32212888398b \u002F]# \n[root@32212888398b \u002F]# systemctl httpd status \nSystem has not been booted with systemd as init system (PID 1). Can't operate. \nFailed to connect to bus: Host is down\n",[55,5837,5838,5860,5864,5878,5889,5935],{"__ignoreMap":120},[159,5839,5840,5842,5845,5848,5851,5854,5857],{"class":161,"line":162},[159,5841,5808],{"class":165},[159,5843,5844],{"class":180}," exec",[159,5846,5847],{"class":180}," -it",[159,5849,5850],{"class":180}," {container_id",[159,5852,5853],{"class":180}," or",[159,5855,5856],{"class":180}," name}",[159,5858,5859],{"class":180}," \u002Fbin\u002Fbash\n",[159,5861,5862],{"class":161,"line":169},[159,5863,3801],{"class":712},[159,5865,5866,5869,5872,5875],{"class":161,"line":184},[159,5867,5868],{"class":176},"[",[159,5870,5871],{"class":463},"root@32212888398b \u002F",[159,5873,5874],{"class":176},"]",[159,5876,5877],{"class":463},"# \n",[159,5879,5880,5882,5884,5886],{"class":161,"line":195},[159,5881,5868],{"class":176},[159,5883,5871],{"class":463},[159,5885,5874],{"class":176},[159,5887,5888],{"class":463},"# systemctl httpd status \n",[159,5890,5891,5894,5897,5900,5903,5906,5909,5912,5915,5918,5921,5924,5927,5930,5932],{"class":161,"line":212},[159,5892,5893],{"class":165},"System",[159,5895,5896],{"class":180}," has",[159,5898,5899],{"class":180}," not",[159,5901,5902],{"class":180}," been",[159,5904,5905],{"class":180}," booted",[159,5907,5908],{"class":180}," with",[159,5910,5911],{"class":180}," systemd",[159,5913,5914],{"class":180}," as",[159,5916,5917],{"class":180}," init",[159,5919,5920],{"class":180}," system",[159,5922,5923],{"class":463}," (PID ",[159,5925,5926],{"class":263},"1",[159,5928,5929],{"class":463},"). Can",[159,5931,475],{"class":176},[159,5933,5934],{"class":180},"t operate. \n",[159,5936,5937],{"class":161,"line":233},[159,5938,5939],{"class":180},"Failed to connect to bus: Host is down\n",[13,5941,5942,5943,5946],{},"「は？」とりあえずhttpdが動いていないそうな上に「Host is down」とos自体がダメと言うことか？",[55,5944,5945],{},"systemctl","だけ打ってもエラーしか出ない。",[47,5948,5950],{"id":5949},"公式に解決法がありました","公式に解決法がありました。",[13,5952,5953,5954,5957],{},"いろいろ調べましたが ",[55,5955,5956],{},"systemd"," を起動する方法がcentos7、centos:latest（つまり８）ではデフォルトでアクティブにならず一工夫必要だそうです。",[13,5959,5960],{},[872,5961,1538],{"href":5962,"rel":5963},"https:\u002F\u002Fhub.docker.com\u002F_\u002Fcentos",[876],[13,5965,5966],{},"私も詳しい仕組みまではわからないのですが、まずDockerfileを以下のように追記します。",[113,5968,5970],{"className":5666,"code":5969,"filename":5668,"language":5669,"meta":120,"style":120},"FROM centos:8\n#ここから\nENV container docker\nRUN (cd \u002Flib\u002Fsystemd\u002Fsystem\u002Fsysinit.target.wants\u002F; for i in *; do [ $i == \\\nsystemd-tmpfiles-setup.service ] || rm -f $i; done); \\\nrm -f \u002Flib\u002Fsystemd\u002Fsystem\u002Fmulti-user.target.wants\u002F*;\\\nrm -f \u002Fetc\u002Fsystemd\u002Fsystem\u002F*.wants\u002F*;\\\nrm -f \u002Flib\u002Fsystemd\u002Fsystem\u002Flocal-fs.target.wants\u002F*; \\\nrm -f \u002Flib\u002Fsystemd\u002Fsystem\u002Fsockets.target.wants\u002F*udev*; \\\nrm -f \u002Flib\u002Fsystemd\u002Fsystem\u002Fsockets.target.wants\u002F*initctl*; \\\nrm -f \u002Flib\u002Fsystemd\u002Fsystem\u002Fbasic.target.wants\u002F*;\\\nrm -f \u002Flib\u002Fsystemd\u002Fsystem\u002Fanaconda.target.wants\u002F*;\nVOLUME [ \"\u002Fsys\u002Ffs\u002Fcgroup\" ]\nCMD [\"\u002Fusr\u002Fsbin\u002Finit\"]\n#ここまで\nRUN \u002Fbin\u002Fcp \u002Fusr\u002Fshare\u002Fzoneinfo\u002FAsia\u002FTokyo \u002Fetc\u002Flocaltime\n\nRUN yum install -y epel-release && yum clean all\n\nRUN rpm -ivh http:\u002F\u002Fftp.riken.jp\u002FLinux\u002Fremi\u002Fenterprise\u002Fremi-release-8.rpm\n\nRUN yum -y update && yum clean all\n\nRUN yum -y install httpd && yum clean all\n\nRUN yum -y install php74-php php74-php-mysqli php74-php-gd php74-php-mbstring php74-php-opcache php74-php-xml php74-php-pear php74-php-devel php74-php-pecl-imagick php74-php-pecl-imagick-devel php74-php-pecl-zip\n\nRUN ln \u002Fusr\u002Fbin\u002Fphp74 \u002Fusr\u002Fbin\u002Fphp\n\nRUN chown -R apache:apache \u002Fvar\u002Fwww\u002Fhtml\n\nRUN systemctl enable php74-php-fpm\n\nRUN systemctl enable httpd \n",[55,5971,5972,5976,5981,5986,5991,5996,6001,6006,6011,6016,6021,6026,6031,6036,6041,6046,6050,6054,6058,6062,6066,6070,6074,6078,6082,6086,6090,6094,6098,6102,6106,6110,6114,6118],{"__ignoreMap":120},[159,5973,5974],{"class":161,"line":162},[159,5975,5676],{},[159,5977,5978],{"class":161,"line":169},[159,5979,5980],{},"#ここから\n",[159,5982,5983],{"class":161,"line":184},[159,5984,5985],{},"ENV container docker\n",[159,5987,5988],{"class":161,"line":195},[159,5989,5990],{},"RUN (cd \u002Flib\u002Fsystemd\u002Fsystem\u002Fsysinit.target.wants\u002F; for i in *; do [ $i == \\\n",[159,5992,5993],{"class":161,"line":212},[159,5994,5995],{},"systemd-tmpfiles-setup.service ] || rm -f $i; done); \\\n",[159,5997,5998],{"class":161,"line":233},[159,5999,6000],{},"rm -f \u002Flib\u002Fsystemd\u002Fsystem\u002Fmulti-user.target.wants\u002F*;\\\n",[159,6002,6003],{"class":161,"line":244},[159,6004,6005],{},"rm -f \u002Fetc\u002Fsystemd\u002Fsystem\u002F*.wants\u002F*;\\\n",[159,6007,6008],{"class":161,"line":255},[159,6009,6010],{},"rm -f \u002Flib\u002Fsystemd\u002Fsystem\u002Flocal-fs.target.wants\u002F*; \\\n",[159,6012,6013],{"class":161,"line":267},[159,6014,6015],{},"rm -f \u002Flib\u002Fsystemd\u002Fsystem\u002Fsockets.target.wants\u002F*udev*; \\\n",[159,6017,6018],{"class":161,"line":279},[159,6019,6020],{},"rm -f \u002Flib\u002Fsystemd\u002Fsystem\u002Fsockets.target.wants\u002F*initctl*; \\\n",[159,6022,6023],{"class":161,"line":782},[159,6024,6025],{},"rm -f \u002Flib\u002Fsystemd\u002Fsystem\u002Fbasic.target.wants\u002F*;\\\n",[159,6027,6028],{"class":161,"line":787},[159,6029,6030],{},"rm -f \u002Flib\u002Fsystemd\u002Fsystem\u002Fanaconda.target.wants\u002F*;\n",[159,6032,6033],{"class":161,"line":796},[159,6034,6035],{},"VOLUME [ \"\u002Fsys\u002Ffs\u002Fcgroup\" ]\n",[159,6037,6038],{"class":161,"line":804},[159,6039,6040],{},"CMD [\"\u002Fusr\u002Fsbin\u002Finit\"]\n",[159,6042,6043],{"class":161,"line":810},[159,6044,6045],{},"#ここまで\n",[159,6047,6048],{"class":161,"line":816},[159,6049,5685],{},[159,6051,6052],{"class":161,"line":822},[159,6053,453],{"emptyLinePlaceholder":452},[159,6055,6056],{"class":161,"line":2996},[159,6057,5694],{},[159,6059,6060],{"class":161,"line":3012},[159,6061,453],{"emptyLinePlaceholder":452},[159,6063,6064],{"class":161,"line":3034},[159,6065,5703],{},[159,6067,6068],{"class":161,"line":3040},[159,6069,453],{"emptyLinePlaceholder":452},[159,6071,6072],{"class":161,"line":3051},[159,6073,5712],{},[159,6075,6076],{"class":161,"line":3057},[159,6077,453],{"emptyLinePlaceholder":452},[159,6079,6080],{"class":161,"line":3063},[159,6081,5721],{},[159,6083,6084],{"class":161,"line":3069},[159,6085,453],{"emptyLinePlaceholder":452},[159,6087,6088],{"class":161,"line":3075},[159,6089,5730],{},[159,6091,6092],{"class":161,"line":3080},[159,6093,453],{"emptyLinePlaceholder":452},[159,6095,6096],{"class":161,"line":3089},[159,6097,5739],{},[159,6099,6100],{"class":161,"line":3094},[159,6101,453],{"emptyLinePlaceholder":452},[159,6103,6104],{"class":161,"line":3113},[159,6105,5748],{},[159,6107,6108],{"class":161,"line":3118},[159,6109,453],{"emptyLinePlaceholder":452},[159,6111,6112],{"class":161,"line":3131},[159,6113,5757],{},[159,6115,6116],{"class":161,"line":3136},[159,6117,453],{"emptyLinePlaceholder":452},[159,6119,6120],{"class":161,"line":3142},[159,6121,5766],{},[13,6123,6124],{},"そしてビルドは普通に行い、コンテナを立ち上げる際はボリュームともう一つオプションを指定します。",[113,6126,6128],{"className":5772,"code":6127,"language":5774,"meta":120,"style":120},"docker run -v \u002Fsys\u002Ffs\u002Fcgroup:\u002Fsys\u002Ffs\u002Fcgroup:ro --privileged -t -d -p 9000:80 centos_apched:1.0\n",[55,6129,6130],{"__ignoreMap":120},[159,6131,6132,6134,6136,6139,6142,6145,6147,6149,6151,6153],{"class":161,"line":162},[159,6133,5808],{"class":165},[159,6135,5811],{"class":180},[159,6137,6138],{"class":180}," -v",[159,6140,6141],{"class":180}," \u002Fsys\u002Ffs\u002Fcgroup:\u002Fsys\u002Ffs\u002Fcgroup:ro",[159,6143,6144],{"class":180}," --privileged",[159,6146,5789],{"class":180},[159,6148,5816],{"class":180},[159,6150,5819],{"class":180},[159,6152,5822],{"class":180},[159,6154,6155],{"class":180}," centos_apched:1.0\n",[13,6157,6158,6161,6162,6165],{},[55,6159,6160],{},"-v \u002Fsys\u002Ffs\u002Fcgroup:\u002Fsys\u002Ffs\u002Fcgroup:ro","でファイルシステムをホストマシンからボリュームし、",[55,6163,6164],{},"--privileged","でコンテナにホストマシンのroot権限を与ます。どちらか片方が抜けてもいけません。",[13,6167,6168,6169,6171,6172,6174],{},"このオプションとボリュームを指定すると",[55,6170,5956],{},"が動きます。実際にコンテナに入っていくと",[55,6173,5945],{},"コマンドが実行されました。",[907,6176,6177],{},"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 .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}",{"title":120,"searchDepth":184,"depth":184,"links":6179},[6180,6181],{"id":5659,"depth":169,"text":5660},{"id":5949,"depth":169,"text":5950},[206],"2020-11-27",{},"\u002Farticles\u002Fstuck-on-docker-centos8",{"title":5629,"description":5629},"articles\u002Fstuck-on-docker-centos8",[1452,5808],"yvD5JRk2N7X9ToHbPIm-hQQm0dyCSLPsVEnjEF9H-RE",{"id":6191,"title":6192,"body":6193,"category":6620,"createdAt":6621,"description":6192,"extension":928,"index":937,"meta":6622,"navigation":452,"path":6623,"publish":452,"seo":6624,"series":937,"seriesTitle":937,"stem":6625,"tag":6626,"thumbnail":6628,"updatedAt":937,"__hash__":6629},"articles\u002Farticles\u002Fwordpress-cli-with-cron.md","wordpress CLIとcronを用いてプラグインの関数を定期自動実行させる",{"type":10,"value":6194,"toc":6610},[6195,6203,6210,6213,6220,6224,6232,6236,6242,6245,6251,6258,6262,6269,6275,6282,6288,6291,6296,6299,6305,6308,6311,6314,6317,6321,6331,6344,6425,6428,6434,6437,6509,6512,6515,6518,6521,6527,6533,6544,6550,6564,6567,6581,6584,6591,6598,6604,6607],[13,6196,6197,6198,6202],{},"こんにちはjunです。",[872,6199,6201],{"href":6200},"\u002Farticles\u002Fmuch-post-migration-wp","「別CMSで作成された4万件分の大量投稿をwordpressに引越しする」","の記事であったように４万件のデータをマルチサイト構成で移行したことがありました。そこで新しい課題として、親サイトでは登録した他のサイト全ての投稿をページングで一覧で表示するという仕様にぶち当たりました。",[13,6204,6205,6206,6209],{},"基本的にwordpressは",[55,6207,6208],{},"get_posts()","を使えば簡単にページングも兼ね備えた一覧ページを作れるのですが、マルチサイト構成の場合は上手くいかずDBから上手く引っ張る必要がありました。しかしマルチサイトだけでも75サイトあり、そこから４万件分の投稿をとる必要があります。表示のたびにそんな高コストの処理はできないので、予め必要なデータをまとめたキャッシュテーブルを作ることで解決しました。",[13,6211,6212],{},"ただしキャッシュテーブルの弱点は更新が必要なことです。手動の更新は実装できましたが、1時間に1回自動で実行するなどの実装が必要となります。すぐに思いついた方法としてはcronを用いてキャッシュ作成の関数を叩くことです。",[13,6214,6215,6216,6219],{},"wordpressにcronやCLIでできないかな〜？と調べていたら公式で",[20,6217,6218],{},"wp CLI","というものが使えると聞き、見様見真似で実装ができました。wordpressで重い処理の定期実行などを考えている方はぜひ参考にしてみてください。",[47,6221,6223],{"id":6222},"wp-cli-をインストール","wp cli をインストール",[13,6225,6226,6231],{},[872,6227,6230],{"href":6228,"rel":6229},"https:\u002F\u002Fmake.wordpress.org\u002Fcli\u002Fhandbook\u002Fguides\u002Finstalling\u002F",[876],"公式サイト","にあるようにcliを使用するにはコマンドラインを通じてインストールする必要があります。",[96,6233,6235],{"id":6234},"curlなどで-pharファイルを読み込む","curlなどで pharファイルを読み込む",[113,6237,6240],{"className":6238,"code":6239,"language":119},[116],"curl -O https:\u002F\u002Fraw.githubusercontent.com\u002Fwp-cli\u002Fbuilds\u002Fgh-pages\u002Fphar\u002Fwp-cli.phar\n",[55,6241,6239],{"__ignoreMap":120},[13,6243,6244],{},"ドキュメントルート あたりで行ってみましょう。wp-cli.pharというファイルが出現します。これだけでも",[113,6246,6249],{"className":6247,"code":6248,"language":119},[116],"php wp-cli.phar --info\n",[55,6250,6248],{"__ignoreMap":120},[13,6252,6253,6254,6257],{},"という風にして実行することができます。",[55,6255,6256],{},"wp ~~"," と実行するためにはもう一工夫必要です。",[96,6259,6261],{"id":6260},"実行権限をあたえ移動","実行権限をあたえ、移動",[13,6263,6264,6265,6268],{},"以下のようにして実行権限を付与し、",[55,6266,6267],{},"wp","というコマンドで打てるようにします。",[113,6270,6273],{"className":6271,"code":6272,"language":119},[116],"chmod +x wp-cli.phar\nsudo mv wp-cli.phar \u002Fusr\u002Flocal\u002Fbin\u002Fwp\n",[55,6274,6272],{"__ignoreMap":120},[13,6276,6277,6278,6281],{},"はい。これでOKです。",[55,6279,6280],{},"wp --info","を打ってみると",[113,6283,6286],{"className":6284,"code":6285,"language":119},[116],"$ wp --info\nOS: Linux 4.19.76-linuxkit #1 SMP Tue May 26 11:42:35 UTC 2020 x86_64\nShell: \u002Fbin\u002Fsh\nPHP binary: \u002Fusr\u002Flocal\u002Fbin\u002Fphp\nPHP version: 7.4.12\nphp.ini used:\nWP-CLI root dir: phar:\u002F\u002Fwp-cli.phar\u002Fvendor\u002Fwp-cli\u002Fwp-cli\nWP-CLI vendor dir: phar:\u002F\u002Fwp-cli.phar\u002Fvendor\nWP_CLI phar path: \u002Fvar\u002Fwww\u002Fhtml\nWP-CLI packages dir:\nWP-CLI global config:\nWP-CLI project config:\nWP-CLI version: 2.4.0\n",[55,6287,6285],{"__ignoreMap":120},[13,6289,6290],{},"こんな感じに情報が出てくればきちんと機能しています。",[6292,6293,6295],"h4",{"id":6294},"tips-rootでやると怒られる","TIPS rootでやると怒られる",[13,6297,6298],{},"rootユーザーでコマンドを実行しようとすると以下のように怒られます。",[113,6300,6303],{"className":6301,"code":6302,"language":119},[116],"Error: YIKES! It looks like you're running this as root. You probably meant to run this as the user that your WordPress installation exists under.\n\nIf you REALLY mean to run this as root, we won't stop you, but just bear in mind that any code on this site will then have full control of your server, making it quite DANGEROUS.\n\nIf you'd like to continue as root, please run this again, adding this flag: --allow-root\n\nIf you'd like to run it as the user that this site is under, you can run the following to become the respective user:\n\n sudo -u USER -i -- wp \u003Ccommand>\n",[55,6304,6302],{"__ignoreMap":120},[13,6306,6307],{},"ざっくり和訳すると",[13,6309,6310],{},"「ええっ！wpコマンドをrootユーザーで実行しようとしてない！？rootユーザーはサーバーもいろいろ弄れるから危ないよ。まあ、あなたがどうしてもrootユーザーで実行したいなら止めないけど。その時は –allow-root オプションを添えてね」",[13,6312,6313],{},"こんな感じです。rootユーザーはサーバーの最高権限を持っているので使うのは危ないです。さらにwpコマンドを通じてwordpressの内容を容易に破壊することも可能なので、rootでやるのはおすすめしないと警告されます。",[13,6315,6316],{},"回避する場合は警告の通り –allow-root オプションを添えるか、ユーザーを変更して実行します。実務サーバーではアプリケーションをrootで運用することはないので特に問題ないとは思います。",[47,6318,6320],{"id":6319},"自作プラグインの関数にフックさせる","（自作）プラグインの関数にフックさせる",[13,6322,6323,6324,6326,6327,6330],{},"それではCLIがインストールされた所でプラグインの関数にフックさせてみましょう。方法は沢山ありますが簡単なのは自作のコマンドを追加してしますことです。CLIをインストールして、",[55,6325,6267],{},"コマンドを実行すると",[55,6328,6329],{},"WP_CLI","クラスが実行時に使用可能になります。",[13,6332,6333,6334,6339,6340,6343],{},"WP_CLIクラスには",[872,6335,6338],{"href":6336,"rel":6337},"https:\u002F\u002Fmake.wordpress.org\u002Fcli\u002Fhandbook\u002Freferences\u002Finternal-api\u002F",[876],"こちらのリファランス","のように静的メソッドがいくつか用意されています。その中に",[55,6341,6342],{},"WP_CLI::add_command()","をコマンドを追加できるメソッドがあります。第一引数にコマンド名、第二引数にコールバック関数名または関数を指定します。",[113,6345,6350],{"className":6346,"code":6347,"filename":6348,"language":6349,"meta":120,"style":120},"language-php shiki shiki-themes material-theme-ocean","\u003C?php\n\u002F*\nPlugin Name: test\n*\u002F\n\nif(!defined('ABSPATH')) {\n die('You are not allowed to call this page directly.');\n}\n\nfunction cmm_test(){\n echo 'test!';\n}\n\nif ( class_exists( 'WP_CLI' ) ) {\n WP_CLI::add_command( 'foo', 'cmm_test' );\n}\n","plugins\u002Ftest\u002Ftest.php","php",[55,6351,6352,6357,6362,6367,6371,6375,6380,6385,6389,6393,6398,6403,6407,6411,6416,6421],{"__ignoreMap":120},[159,6353,6354],{"class":161,"line":162},[159,6355,6356],{},"\u003C?php\n",[159,6358,6359],{"class":161,"line":169},[159,6360,6361],{},"\u002F*\n",[159,6363,6364],{"class":161,"line":184},[159,6365,6366],{},"Plugin Name: test\n",[159,6368,6369],{"class":161,"line":195},[159,6370,4529],{},[159,6372,6373],{"class":161,"line":212},[159,6374,453],{"emptyLinePlaceholder":452},[159,6376,6377],{"class":161,"line":233},[159,6378,6379],{},"if(!defined('ABSPATH')) {\n",[159,6381,6382],{"class":161,"line":244},[159,6383,6384],{}," die('You are not allowed to call this page directly.');\n",[159,6386,6387],{"class":161,"line":255},[159,6388,819],{},[159,6390,6391],{"class":161,"line":267},[159,6392,453],{"emptyLinePlaceholder":452},[159,6394,6395],{"class":161,"line":279},[159,6396,6397],{},"function cmm_test(){\n",[159,6399,6400],{"class":161,"line":782},[159,6401,6402],{}," echo 'test!';\n",[159,6404,6405],{"class":161,"line":787},[159,6406,819],{},[159,6408,6409],{"class":161,"line":796},[159,6410,453],{"emptyLinePlaceholder":452},[159,6412,6413],{"class":161,"line":804},[159,6414,6415],{},"if ( class_exists( 'WP_CLI' ) ) {\n",[159,6417,6418],{"class":161,"line":810},[159,6419,6420],{}," WP_CLI::add_command( 'foo', 'cmm_test' );\n",[159,6422,6423],{"class":161,"line":816},[159,6424,819],{},[13,6426,6427],{},"例えば上記のようにした場合は以下のように実行されます。",[113,6429,6432],{"className":6430,"code":6431,"language":119},[116],"$ wp foo\ntest!\n",[55,6433,6431],{"__ignoreMap":120},[13,6435,6436],{},"なので同じようにして関数を定義して、フックさせます。",[113,6438,6440],{"className":6346,"code":6439,"language":6349,"meta":120,"style":120},"\u003C?php\n\u002F*\nPlugin Name: test\n*\u002F\n\nif(!defined('ABSPATH')) {\n die('You are not allowed to call this page directly.');\n}\n\nfunction create_cache_table(){\n .... \u002F\u002F めちゃくちゃ時間のかかる処理など\n}\n\nif ( class_exists( 'WP_CLI' ) ) {\n WP_CLI::add_command( 'create_cache', 'create_cache_table' );\n}\n",[55,6441,6442,6446,6450,6454,6458,6462,6466,6470,6474,6478,6483,6488,6492,6496,6500,6505],{"__ignoreMap":120},[159,6443,6444],{"class":161,"line":162},[159,6445,6356],{},[159,6447,6448],{"class":161,"line":169},[159,6449,6361],{},[159,6451,6452],{"class":161,"line":184},[159,6453,6366],{},[159,6455,6456],{"class":161,"line":195},[159,6457,4529],{},[159,6459,6460],{"class":161,"line":212},[159,6461,453],{"emptyLinePlaceholder":452},[159,6463,6464],{"class":161,"line":233},[159,6465,6379],{},[159,6467,6468],{"class":161,"line":244},[159,6469,6384],{},[159,6471,6472],{"class":161,"line":255},[159,6473,819],{},[159,6475,6476],{"class":161,"line":267},[159,6477,453],{"emptyLinePlaceholder":452},[159,6479,6480],{"class":161,"line":279},[159,6481,6482],{},"function create_cache_table(){\n",[159,6484,6485],{"class":161,"line":782},[159,6486,6487],{}," .... \u002F\u002F めちゃくちゃ時間のかかる処理など\n",[159,6489,6490],{"class":161,"line":787},[159,6491,819],{},[159,6493,6494],{"class":161,"line":796},[159,6495,453],{"emptyLinePlaceholder":452},[159,6497,6498],{"class":161,"line":804},[159,6499,6415],{},[159,6501,6502],{"class":161,"line":810},[159,6503,6504],{}," WP_CLI::add_command( 'create_cache', 'create_cache_table' );\n",[159,6506,6507],{"class":161,"line":816},[159,6508,819],{},[13,6510,6511],{},"ちなみにif ( class_exists( 'WP_CLI' ) ) がないとUndefined type 'WP_CLI'というエラーが発生して怒られます。ドキュメントルート 配下のwordpressフォルダにはWP_CLIクラスのソースがなく、コマンドを実行（wp-cli.pharを実行）するときにクラスが提供されるそうです。一応これが標準らしい。",[13,6513,6514],{},"コマンドが追加できたのであとはcronを設定してwpコマンドを設定してあげます。",[47,6516,6517],{"id":6517},"cronを設定",[13,6519,6520],{},"rootでないユーザーで操作しているものとします。",[113,6522,6525],{"className":6523,"code":6524,"language":119},[116],"$ crontab -e\n",[55,6526,6524],{"__ignoreMap":120},[113,6528,6531],{"className":6529,"code":6530,"language":119},[116],"PATH = \u002Fusr\u002Flocal\u002Fbin:\u002Fusr\u002Flocal\u002Fsbin:\u002Fusr\u002Flocal\u002Fbin:\u002Fusr\u002Fsbin:\u002Fusr\u002Fbin:\u002Fsbin:\u002Fbin;\n0 * * * * cd \u002Fvar\u002Fwww\u002Fhtml && wp create_cache >> \u002Fdev\u002Fnull 2>&1\n",[55,6532,6530],{"__ignoreMap":120},[13,6534,6535,6536,6539,6540,6543],{},"このcronは1時間ごと（00分）に実行されます。",[55,6537,6538],{},"cd \u002Fvar\u002Fwww\u002Fhtm","l でドキュメントルート へ移動して先ほどのコマンドを打って、思い処理の関数を実行しています。ちなみに上の ",[55,6541,6542],{},"PATH = ...."," がないと",[113,6545,6548],{"className":6546,"code":6547,"language":119},[116],"\u002Fusr\u002Fbin\u002Fenv: 'php': No such file or directory\n",[55,6549,6547],{"__ignoreMap":120},[13,6551,6552,6553,225,6556,6559,6560,6563],{},"というようにエラーが出てしまい、指定のcron処理が行われません。これ結構ハマったのですが、cron実行時のPATHの設定が",[55,6554,6555],{},"\u002Fbin",[55,6557,6558],{},"\u002Fusr\u002Fbin","だけしか通っていないので、PHPやwpが存在する ",[55,6561,6562],{},"\u002Fusr\u002Flocal\u002Fbin","配下を見ておらずPHPが実行できないのが原因です。",[13,6565,6566],{},"なので予め普段使用しているPATHを出しておいて、crontab上で再定義しています。上記のようにすればあとは指定の時間が来れば",[25,6568,6569,6572,6575,6578],{},[28,6570,6571],{},"cronでコマンドを実行",[28,6573,6574],{},"コマンドに結びついた関数を呼び出す",[28,6576,6577],{},"処理が実行",[28,6579,6580],{},"ログがあればそれに吐き出す",[13,6582,6583],{},"と言った自動運用が可能になります。",[408,6585,6587,6588],{"className":6586},[411,1463],"\n「>> \u002Fdev\u002Fnull 2>&1」 これは「エラー出力を標準出力とし、\u002Fdev\u002Fnullに書き出す」という意味です。\n",[13,6589,6590],{},"「？」となった方にもう簡単説明します。>> で実行したコマンドの結果などを出力できます。エラーであればエラー文が得られます。そして \u002Fdev\u002Fnull はunixのスペシャルファイルで、空のファイルです。空のファイルを指定して結果を捨てることができます。「無に書き出す」みたいなことをしています。2>&1 はエラー出力を標準出力にします。という意味です。",[13,6592,6593,6594,6597],{},"つまり",[55,6595,6596],{},">> \u002Fdev\u002Fnull 2>&1","はエラー出力であっても結果内容を残さず捨てるという意味です。テストぐらいであれば問題ないのですが、実務でやると何か起きたときに原因が分からないので以下のようにするといいです。",[113,6599,6602],{"className":6600,"code":6601,"language":119},[116],"PATH = \u002Fusr\u002Flocal\u002Fbin:\u002Fusr\u002Flocal\u002Fsbin:\u002Fusr\u002Flocal\u002Fbin:\u002Fusr\u002Fsbin:\u002Fusr\u002Fbin:\u002Fsbin:\u002Fbin;\n0 * * * * cd \u002Fvar\u002Fwww\u002Fhtml && wp create_cache >> \u002Fvar\u002Flog\u002Fcron.log 2>&1\n",[55,6603,6601],{"__ignoreMap":120},[13,6605,6606],{},"こうするときちんとログファイルにエラーが残ります。",[907,6608,6609],{},"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":120,"searchDepth":184,"depth":184,"links":6611},[6612,6618,6619],{"id":6222,"depth":169,"text":6223,"children":6613},[6614,6615],{"id":6234,"depth":184,"text":6235},{"id":6260,"depth":184,"text":6261,"children":6616},[6617],{"id":6294,"depth":195,"text":6295},{"id":6319,"depth":169,"text":6320},{"id":6517,"depth":169,"text":6517},[206],"2020-11-26",{},"\u002Farticles\u002Fwordpress-cli-with-cron",{"title":6192,"description":6192},"articles\u002Fwordpress-cli-with-cron",[6349,6627],"wordpress","_mix\u002FWordPress-logotype-wmark-e1606319357320.png","1F5rQcoO_KWxxu1bCXWSeo1uX58qewfjTBZ8Az0AndI",{"id":6631,"title":6632,"body":6633,"category":8121,"createdAt":8122,"description":8123,"extension":928,"index":162,"meta":8124,"navigation":452,"path":8125,"publish":452,"seo":8126,"series":8127,"seriesTitle":8123,"stem":8128,"tag":8129,"thumbnail":8131,"updatedAt":937,"__hash__":8132},"series\u002Fseries\u002Fheadlesscms-strapi-1.md","headlessCMSのstrapi をnuxt.jsで静的書き出しを行う。その１：strapiとnuxtの連携",{"type":10,"value":6634,"toc":8093},[6635,6638,6641,6661,6664,6667,6678,6682,6688,6691,6697,6701,6704,6710,6713,6720,6731,6738,6741,6744,6750,6756,6759,6766,6769,6772,6775,6778,6781,6787,6797,6803,6806,6814,6817,6820,6823,6826,6830,6833,6839,6842,6848,6851,6854,6857,6860,6871,6874,6877,6880,6883,6886,6889,6892,6895,6901,6904,6907,6913,6916,6919,6922,6925,6942,6945,6948,6951,6954,6957,6960,6963,6966,6969,6972,6975,6978,6981,6985,6988,6991,6994,6998,7001,7004,7007,7010,7013,7024,7031,7035,7042,7045,7048,7052,7055,7359,7362,7490,7503,7506,7512,7517,7523,7537,7541,7544,7968,7971,7975,7978,7981,7989,7993,7996,8037,8044,8050,8057,8060,8063,8066,8069,8083,8087,8090],[13,6636,6637],{},"こんにちはjunです。新しいCMSを採用してみようという動きが社内であり、その過程で私がstrapiというheadlessCMSとnuxt.jsを用いて静的サイトを作成するとこまでやりました。",[13,6639,6640],{},"JAMstack構成でCMSを用いたwebサイトを作成できるということもあり、今までのCMSに変わっていく予感があったので調べてみました。シリーズ記事にして以下",[75,6642,6643,6646,6649,6652,6655,6658],{},[28,6644,6645],{},"headlessCMSとは何か、なぜ使うのか",[28,6647,6648],{},"strapiの使い方",[28,6650,6651],{},"strapiとnuxtの連携方法",[28,6653,6654],{},"strapiでブログライクなデータ構築",[28,6656,6657],{},"nuxtでの構築",[28,6659,6660],{},"静的書き出し",[13,6662,6663],{},"の６つを中心に説明していきます。また完成したフロントとバックのソースはgithubに上げる予定です。今回の記事では上３つを行います。",[13,6665,6666],{},"なお解説で登場するアプリケーションのバージョンは以下の通りです。",[75,6668,6669,6672,6675],{},[28,6670,6671],{},"node.js 13.12.0",[28,6673,6674],{},"strapi 3.2.5",[28,6676,6677],{},"nuxt 2.14.6",[47,6679,6681],{"id":6680},"headlesscmsって何","headlessCMSって何？",[13,6683,6684,6685],{},"headlessCMSのheadというのはビューのことを言います。ビューは今あなたが見ているこのサイトの見た目そのもの、HTMLのことです。そしてその ",[20,6686,6687],{},"ビューの構築がCMSから切り離されているのが、ビューの生成処理が存在しないのがheadlessCMSです。",[13,6689,6690],{},"wordpressなどの一般的なCMSはビューの生成をwordpressという１つのシステムで行っています。リクエストに応じて対応するデータを引っ張ってきて、HTMLを生成してレスポンスとして返します。",[13,6692,6693,6694],{},"しかしheadlessCMSのビューは ",[20,6695,6696],{},"独立したフロントエンド プロジェクトを立てて、そのプロジェクトからAPIを呼び出してデータを取得して、主にjsを用いてHTMLをレンダーします。",[96,6698,6700],{"id":6699},"どうしてヘッドをレスするの","どうしてヘッドをレスするの？",[13,6702,6703],{},"例えばwordpressの場合はHTML構造とデータの出力をwordpressというPHPシステム1つで行います。つまりフロントエンド の構築をPHPで行います。しかしその場合VueやReactを用いたフロントの構築は難しいですし、フロントはwordpressのシステムに従った構築を行う必要があります。最近のUIが優れたサイトや、生産的にフロントを作る場合は大変です。",[13,6705,6706,6707],{},"できるだけフロントはJSで構築したい！でもデータもバックから呼び出したい！そんな時にheadlessCMSを用います。 ",[20,6708,6709],{},"フロントがCMSから分離することでバックエンドの都合や制限を受けにくくなります。（いわゆる疎結合な状態）",[13,6711,6712],{},"例えばwordpressのテーマ構築にはindex.php、page.php、header\u002Ffooter.php、single.phpと言った決まりきったビューファイルがあります。フロント構築はこの制限されたファイルを上手く使用する必要があります。デザインの都合や仕様によっては開発が困難になったりします。",[13,6714,6715,6716,6719],{},"さらに ",[20,6717,6718],{},"Nuxt.jsやNext.jsを用いることで静的書き出しを行うことができます。"," 静的に書き出すことでCMSの課題であった不正ログインや攻撃のリスク、そしてメモリ消費による処理能力ダウンを防ぐことができます。（ただし構成と運用によります）",[75,6721,6722,6725,6728],{},[28,6723,6724],{},"jsフレームワークを用いてリッチで生産性高くフロントエンド を開発できる。",[28,6726,6727],{},"静的書き出しを行うことでセキュリティやパフォーマンスをあげることが可能",[28,6729,6730],{},"バックエンドへAPIを送ることでJSONでデータを受け取れる。JSONならば様々な媒体へデータを配信できるので、再利用性が高い（ブログの内容をスマホアプリに使用するなど）",[13,6732,6733,6734,6737],{},"上記の様な構成を ",[20,6735,6736],{},"JAMStack","、javaScript API Markup Stackといいます。",[47,6739,6740],{"id":6740},"strapiとは",[13,6742,6743],{},"headlessCMSはまだ登場してからまだ日が浅く、また種類も多いです。その中でも特に有名なのはContentful、strapiそして日本ではmicroCMSが人気です。",[13,6745,6746,6749],{},[20,6747,6748],{},"strapiはheadlessCMSの中でもオープンソースでありバックエンドを自由にカスタマイズ可能です。"," ContentfulとmicroCMSはそれらの会社がバックエンドをホスティングしており、指定のAPIキーとエンドポイントへAIPを送ります。その分お金はかかりますが、アーキテクチャによっては完全なサーバレス構成が可能になります。",[13,6751,6752,6753],{},"今回の記事では ",[20,6754,6755],{},"カスタマイズ性に優れたstrapiを用いて説明を行います。",[47,6757,6758],{"id":6758},"アプリの構成",[13,6760,6761,6762,6765],{},"今回の説明では以下の図の様に ",[20,6763,6764],{},"バックエンドにstrapi、フロントエンド にnuxt.jsを用いて構築した上で静的書き出しを行います。"," ローカルのプロジェクトでバックとフロントはポートを分けて実質別のサーバの様にします。そしてデータベースは用意が面倒だったのでMAMPのmysqlを使用しています。",[833,6767],{":src":6768,":width":2147,":center":837},"'_mix\u002FheadlessFlow.png'",[13,6770,6771],{},"そしてお知らせの様な定型の項目に沿って入力するコンテンツだけでなく、今のCMSの様に自由に項目を入力できる様なページも作ろうと思います。",[47,6773,6774],{"id":6774},"strapiとnuxtのインストール",[96,6776,6777],{"id":6777},"バックエンドのstrapiをいれる",[13,6779,6780],{},"まずは適当にフロントとバックをいれるheadlessCMSディレクトリを作成",[113,6782,6785],{"className":6783,"code":6784,"language":119},[116],"~ % mkdir headless && cd headless\n",[55,6786,6784],{"__ignoreMap":120},[13,6788,6789,6790,6796],{},"(公式サイト)",[159,6791,6792],{},[872,6793,6794],{"href":6794,"rel":6795},"https:\u002F\u002Fstrapi.io\u002Fdocumentation\u002Fdeveloper-docs\u002Flatest\u002Fsetup-deployment-guides\u002Finstallation\u002Fcli.html#step-1-make-sure-requirements-are-met",[876],"にもある様にnpxを用いてstrapiをインストール。カスタムモードで行います。",[113,6798,6801],{"className":6799,"code":6800,"language":119},[116],"strapinpx create-strapi-app backend\n? Choose your installation type Custom (manual settings)\n? Choose your default database client mysql\n? Database name: strapi\n? Host: 127.0.0.1 (DBのホスト先）\n? Port: 8889 (DBのポート）\n? Username: (DBのユーザー）\n? Password: (DBのパスワード）\n? Enable SSL connection: No(開発環境だから）\n\nCreating a project with custom database options.\nCreating files.\nDependencies installed successfully.\n\nheadless % cd backend && npm run develop\n",[55,6802,6800],{"__ignoreMap":120},[96,6804,6805],{"id":6805},"strapiユーザーを作成する",[13,6807,716,6808,6813],{},[872,6809,6812],{"href":6810,"rel":6811},"http:\u002F\u002Flocalhost:1337\u002Fadmin)%5Bhttp:\u002F\u002Flocalhost:1337\u002Fadmin",[876],"http:\u002F\u002Flocalhost:1337\u002Fadmin)[http:\u002F\u002Flocalhost:1337\u002Fadmin"," ]ビルドをすると1337のポートが開くので指示されたURLにアクセスします。すると以下の様なユーザー作成画面が表示されます。最初に作成されるユーザーはスーパーユーザーになります。",[833,6815],{":src":6816,":width":2147,":center":837},"'_mix\u002Fstrapi_create_user-735x1024.png'",[13,6818,6819],{},"ここで任意の名前、アドレス、パスワードを設定します。「READY TO START」を押してログインします。",[833,6821],{":src":6822,":width":4947},"'_mix\u002Fstapi_fitst.png'",[13,6824,6825],{},"最近になって日本語が当てられる様になったらしいですが、ほとんどが英語のままです。日本語表示はあまり期待しない方がいいです。とりあえずバックエンドはこれでインストール完了です。",[96,6827,6829],{"id":6828},"nuxtjs-のインストール","nuxt.js のインストール",[13,6831,6832],{},"ではフロントを構築するnuxt.jsを入れましょう。",[113,6834,6837],{"className":6835,"code":6836,"language":119},[116],"headless % npx create-nuxt-app frontend\n",[55,6838,6836],{"__ignoreMap":120},[13,6840,6841],{},"静的に書き出すのでUniversalモードでデプロイターゲットは Static を選びましょう。UIは作るのが面倒なのでbootstrap使います。あしからず。",[113,6843,6846],{"className":6844,"code":6845,"language":119},[116],"? Project name: frontend\n? Programming language: JavaScript\n? Package manager: Npm\n? UI framework: Bootstrap Vue\n? Testing framework: None\n? Rendering mode: Universal (SSR \u002F SSG)\n? Deployment target: Static (Static\u002FJAMStack hosting)\n? Development tools: (Press \u003Cspace> to select, \u003Ca> to toggle all, \u003Ci> to invert selection)\n? What is your GitHub username? jun\n? Version control system: Git\n\nSuccessfully created project frontend\n\nheadless % cd frontend && npm run dev\n",[55,6847,6845],{"__ignoreMap":120},[13,6849,6850],{},"npm run dev で開発サーバーを立ち上げます。localhost:3000 にアクセスするとお馴染みのnuxt.jsの画面がみれます。",[47,6852,6853],{"id":6853},"コンテンツタイプを作成する",[13,6855,6856],{},"フロントにデータを表示しようにも、バックにデータがなければ何も始まりません。まずはstrapiで表示するデータを作成します。そこでstrapiで「コンテンツタイプ」というものでコンテンツを定義してデータの型を作成します。",[13,6858,6859],{},"とりあえず以下の様なカラム を持つコンテンツ「お知らせ」を作ります。",[75,6861,6862,6865,6868],{},[28,6863,6864],{},"タイトル",[28,6866,6867],{},"内容（リッチテキスト）",[28,6869,6870],{},"サムネイル",[13,6872,6873],{},"headlessCMSではまず最初に「どんなデータ構成を持つコンテンツを作るか？」ということを考えます。コンテンツを構成する要素を洗い出し、ユーザーが登録する項目を決定します。strapiでの操作はまず画面左の「Contents-Type Builder」をクリックします。画面が切り替わり、「コンテンツタイプ」と書かれているとこの「Create collection type」をクリックして追加します。",[833,6875],{":src":6876,":width":836,":center":837},"'_mix\u002Fsch-2020-11-03-0.00.31-300x197.png'",[13,6878,6879],{},"するとコンテンツタイプの名前をいれる様に言われますので、入力します。「お知らせ」なので「newsItem」としておきます。（なぜかタイトル名を「news」にすると400エラーになってしまいます。予約されている可能性あり。）",[833,6881],{":src":6882,":width":4947},"'_mix\u002Fcreate_conten-768x283.png'",[13,6884,6885],{},"「続ける」をクリックすると次は項目とそのデータ型を登録します。",[833,6887],{":src":6888,":width":4947},"'_mix\u002Fcreate_news_items-768x480.png'",[13,6890,6891],{},"タイトル→文字（text）、内容→リッチテキスト（Rich Text : Long Text)、サムネイル→画像（Media）とします。例えば「タイトル」は以下の通りです。",[833,6893],{":src":6894,":width":4947},"'_mix\u002Fcreate_news_title-768x399.png'",[13,6896,6897,6900],{},[55,6898,6899],{},"Name","に入力された値はカラム名となるので日本語入力できません。引き続き入力する場合は「+Add another filed」で続け、項目の設定を終了する場合は「終了」を押します。ひとまず以下の様に設定します。",[833,6902],{":src":6903,":width":4947},"'_mix\u002Fnews_ct-768x338.png'",[13,6905,6906],{},"そして「保存」を押すとこのコンテンツタイプが登録されます。ターミナルをみてみると",[113,6908,6911],{"className":6909,"code":6910,"language":119},[116],"[2020-11-02T16:43:29.201Z] info File created: \u002FUsers\u002Fjun\u002Fheadless\u002Fbackend\u002Fapi\u002Fnews-items\u002Fconfig\u002Froutes.json\n[2020-11-02T16:43:29.201Z] info File created: \u002FUsers\u002Fjun\u002Fheadless\u002Fbackend\u002Fapi\u002Fnews-items\u002Fcontrollers\u002Fnews-items.js\n[2020-11-02T16:43:29.201Z] info File created: \u002FUsers\u002Fjun\u002Fheadless\u002Fbackend\u002Fapi\u002Fnews-items\u002Fmodels\u002Fnews-items.js\n[2020-11-02T16:43:29.201Z] info File created: \u002FUsers\u002Fjun\u002Fheadless\u002Fbackend\u002Fapi\u002Fnews-items\u002Fmodels\u002Fnews-items.settings.json\n[2020-11-02T16:43:29.201Z] info File created: \u002FUsers\u002Fjun\u002Fheadless\u002Fbackend\u002Fapi\u002Fnews-items\u002Fservices\u002Fnews-items.js\n[2020-11-02T16:43:29.588Z] debug POST \u002Fcontent-type-builder\u002Fcontent-types (650 ms) 201\n[2020-11-02T16:43:29.614Z] info The server is restarting\n",[55,6912,6910],{"__ignoreMap":120},[13,6914,6915],{},"content-typeを作成するためのAPIが POSTされていることがわかります。実はstrapi内でもこの様にREST APIで呼び合ってコンテンツの編集を行っています。",[96,6917,6918],{"id":6918},"感覚的にはテーブルを作成",[13,6920,6921],{},"コンテンツタイプ作成の手順を一通りみてみるとDBでテーブルを作成したり、MVCフレームワークの「モデル」部分の実装と操作が似ています。というか同じです。コンテンツタイプでデータ項目と型を決定します。さらにstrapiではこのコンテンツタイプに応じたエンドポイントも作成してくれます。",[13,6923,6924],{},"headlessCMSはこの様に",[75,6926,6927,6930,6933,6936,6939],{},[28,6928,6929],{},"データテーブルとそのカラム・データ型の作成",[28,6931,6932],{},"エンドポイントの自動作成",[28,6934,6935],{},"エンドポイントの権限管理",[28,6937,6938],{},"自動マイグレーション",[28,6940,6941],{},"コンテンツタイプ（モデル）に応じたレコードの挿入、削除",[13,6943,6944],{},"これらを提供してくれます。",[96,6946,6947],{"id":6947},"お知らせを１件登録する",[13,6949,6950],{},"では早速レコードを１つ登録してみましょう。コレクションタイプ（画面左上）に「newsItem」が登録されているので、それをクリックします。すると以下の様な一覧画面が表示されます。",[833,6952],{":src":6953,":width":4947},"'_mix\u002Fcreate_news_record-768x246.png'",[13,6955,6956],{},"レコードを登録するために右上の「newsItemを追加」をクリックします。すると先程コンテンツタイプ作成で定義した項目の入力欄が出現します。そこに値を入力します。",[833,6958],{":src":6959,":width":4947},"'_mix\u002Fnews_input-768x263.png'",[13,6961,6962],{},"テキストエリア はプレーンテキスト、リッチテキストはマークダウンで入力します。画像を定義した箇所はファイルアップローダーが起動するので、ファイルをアップロードできますし、アップロードしたものを選択することもできます。",[13,6964,6965],{},"内容が入力し終わったら画面右上の「保存」をクリックします。そして保存終了後に隣の「Publish」をクリックしてこの登録したレコードが外部に公開できる様になります。",[13,6967,6968],{},"このPublishをクリックしないと、このデータをAPIで呼び出しても404が帰ってきますので注意。",[96,6970,6971],{"id":6971},"公開するためにもう一歩",[13,6973,6974],{},"現段階ではまだ先程登録したnewsItemは外部から呼び出せません。「設定」から「権限とロール」をクリックします。権限とロールでは公開するコンテンツタイプやPOST、 PUT、DELETEの権限設定を行えます。",[833,6976],{":src":6977,":width":4947},"'_mix\u002Fpermission-768x223'",[13,6979,6980],{},"初期では「Authenticated（認証ユーザー）」「Public（匿名・全てのリクエスト）」のロールがあります。Publicをまずクリックすると、それぞれの権限設定が表示されます。",[833,6982],{":src":6983,":width":6984,":center":837},"'_mix\u002Froles-768x634.png'","'600px'",[13,6986,6987],{},"登録したnewsItemの設定があります。ここで findとcount、findoneにチェックを入れます。そして「保存」を押します。 チェックした３つは読み取り専用です。ここでcreateやdeleteにチェックをいれると、APIを通じて誰もがデータを操作できてしまうので気をつけてください。",[13,6989,6990],{},"逆にstrapiで登録したユーザーが外部からデータを操作する場合は Authenticatedでチェックを入れます。私は面倒なのでAuthenticatedは Select all にして、Publicは読み取りのみにしています。",[13,6992,6993],{},"ちなみにロールは３つまで無料です。３ロール以上はなぜか課金が必要です。",[96,6995,6997],{"id":6996},"apiドキュメントプラグインをインストール","APIドキュメントプラグインをインストール",[13,6999,7000],{},"フロントの構築に移る前にAPIドキュメントプラグインを入れておきます。このプラグインは最初から入っておらず、「マーケットプレイス」から無料インストール可能です。このプラグインをいれるとコンテンツタイプに応じたAPIのエンドポイント一覧ドキュメントを自動で作成してくれます。",[833,7002],{":src":7003,":width":836,":center":837},"'_mix\u002Fdocument-300x206.png'",[13,7005,7006],{},"メニューにDocumentationが現れ、その画面から「Open the Documentation」でドキュメントが開きます。登録したnewsItemのAPIもあります。",[47,7008,7009],{"id":7009},"フロントから呼び出してみる",[13,7011,7012],{},"ドキュメントをみてみると",[75,7014,7015,7018,7021],{},[28,7016,7017],{},"\u002Fnews-items で一覧",[28,7019,7020],{},"\u002Fnews-items\u002Fcount で総数",[28,7022,7023],{},"\u002Fnews-items\u002F{id}　でidで紐づいたデータ",[13,7025,7026,7027,7030],{},"を取得することができます。idはstrapiのnewsItemの一覧画面で見れます。数字で表されます。さっき例で作ったのは最初なので ",[55,7028,7029],{},"\u002Fnews-items\u002F1"," で取得できます。",[96,7032,7034],{"id":7033},"talend-api-tester-でテスト","Talend API Tester でテスト",[13,7036,7037,7038,7041],{},"とりあえずAPIがきちんと呼び出せるか、内容が取れるかが確かめたい場合はTalend API Testerなどを使用してAPIをテストすることができます。以下の様に ",[55,7039,7040],{},"http:\u002F\u002Flocalhost:1337\u002Fnews-items\u002F1"," に対してAPIを投げてみると先程の登録した内容がレスポンスにJSONで戻ってきました。",[833,7043],{":src":7044,":width":4947},"'_mix\u002Fapi_test-768x461.png'",[13,7046,7047],{},"Nuxtでの構築もこのJSONを元に作成します。",[96,7049,7051],{"id":7050},"strapi-nuxt-moduleをインストール","strapi nuxt moduleをインストール",[13,7053,7054],{},"nuxtでAPIベースの呼び出しを行う場合、呼び出し用のプラグインを自作することがあります。例えば以下の様な感じです。",[113,7056,7059],{"className":1805,"code":7057,"filename":7058,"language":1808,"meta":120,"style":120},"export default function(context,inject){\n \u002F\u002F axios　インスタンス\n const api = context.$axios.create({\n timeout:5000,\n headers:{\n 'Content-Type': 'application\u002Fjson',\n 'X-Requested-With': 'XMLHttpRequest',\n }\n })\n\n \u002F\u002F APIの呼び出し先を設定\n api.setBaseURL(context.env.apiBaseURL);\n\n \n api.onRequest(config=>{\n \u002F\u002F リクエスト時の処理\n })\n\n\n api.onResponseError(err=>{\n switch(err.response.status){\n \u002F\u002F ステータスごとに異なる処理\n }\n })\n\n \u002F\u002F こうすると $API で上記の設定をしたaxiosインスタンスを呼び出せる。つまり通信処理を共通化できる。\n inject('API',api);\n}\n","plugins\u002Faxios.js",[55,7060,7061,7082,7087,7114,7126,7134,7154,7174,7178,7184,7188,7193,7221,7225,7230,7248,7253,7259,7263,7267,7285,7308,7313,7317,7323,7327,7332,7355],{"__ignoreMap":120},[159,7062,7063,7065,7067,7070,7072,7075,7077,7080],{"class":161,"line":162},[159,7064,681],{"class":684},[159,7066,685],{"class":684},[159,7068,7069],{"class":680}," function",[159,7071,716],{"class":176},[159,7073,7074],{"class":2361},"context",[159,7076,225],{"class":176},[159,7078,7079],{"class":2361},"inject",[159,7081,2369],{"class":176},[159,7083,7084],{"class":161,"line":169},[159,7085,7086],{"class":1907}," \u002F\u002F axios　インスタンス\n",[159,7088,7089,7092,7095,7097,7100,7102,7105,7107,7110,7112],{"class":161,"line":184},[159,7090,7091],{"class":680}," const",[159,7093,7094],{"class":463}," api",[159,7096,750],{"class":176},[159,7098,7099],{"class":463}," context",[159,7101,770],{"class":176},[159,7103,7104],{"class":463},"$axios",[159,7106,770],{"class":176},[159,7108,7109],{"class":712},"create",[159,7111,716],{"class":172},[159,7113,688],{"class":176},[159,7115,7116,7119,7121,7124],{"class":161,"line":195},[159,7117,7118],{"class":172}," timeout",[159,7120,177],{"class":176},[159,7122,7123],{"class":263},"5000",[159,7125,304],{"class":176},[159,7127,7128,7131],{"class":161,"line":212},[159,7129,7130],{"class":172}," headers",[159,7132,7133],{"class":176},":{\n",[159,7135,7136,7138,7141,7143,7145,7147,7150,7152],{"class":161,"line":233},[159,7137,3943],{"class":176},[159,7139,7140],{"class":172},"Content-Type",[159,7142,475],{"class":176},[159,7144,177],{"class":176},[159,7146,1824],{"class":176},[159,7148,7149],{"class":180},"application\u002Fjson",[159,7151,475],{"class":176},[159,7153,304],{"class":176},[159,7155,7156,7158,7161,7163,7165,7167,7170,7172],{"class":161,"line":244},[159,7157,3943],{"class":176},[159,7159,7160],{"class":172},"X-Requested-With",[159,7162,475],{"class":176},[159,7164,177],{"class":176},[159,7166,1824],{"class":176},[159,7168,7169],{"class":180},"XMLHttpRequest",[159,7171,475],{"class":176},[159,7173,304],{"class":176},[159,7175,7176],{"class":161,"line":255},[159,7177,807],{"class":176},[159,7179,7180,7182],{"class":161,"line":267},[159,7181,4006],{"class":176},[159,7183,1866],{"class":172},[159,7185,7186],{"class":161,"line":279},[159,7187,453],{"emptyLinePlaceholder":452},[159,7189,7190],{"class":161,"line":782},[159,7191,7192],{"class":1907}," \u002F\u002F APIの呼び出し先を設定\n",[159,7194,7195,7198,7200,7203,7205,7207,7209,7212,7214,7217,7219],{"class":161,"line":787},[159,7196,7197],{"class":463}," api",[159,7199,770],{"class":176},[159,7201,7202],{"class":712},"setBaseURL",[159,7204,716],{"class":172},[159,7206,7074],{"class":463},[159,7208,770],{"class":176},[159,7210,7211],{"class":463},"env",[159,7213,770],{"class":176},[159,7215,7216],{"class":463},"apiBaseURL",[159,7218,767],{"class":172},[159,7220,779],{"class":176},[159,7222,7223],{"class":161,"line":796},[159,7224,453],{"emptyLinePlaceholder":452},[159,7226,7227],{"class":161,"line":804},[159,7228,7229],{"class":172}," \n",[159,7231,7232,7234,7236,7239,7241,7244,7246],{"class":161,"line":810},[159,7233,7197],{"class":463},[159,7235,770],{"class":176},[159,7237,7238],{"class":712},"onRequest",[159,7240,716],{"class":172},[159,7242,7243],{"class":2361},"config",[159,7245,2559],{"class":680},[159,7247,688],{"class":176},[159,7249,7250],{"class":161,"line":816},[159,7251,7252],{"class":1907}," \u002F\u002F リクエスト時の処理\n",[159,7254,7255,7257],{"class":161,"line":822},[159,7256,4006],{"class":176},[159,7258,1866],{"class":172},[159,7260,7261],{"class":161,"line":2996},[159,7262,453],{"emptyLinePlaceholder":452},[159,7264,7265],{"class":161,"line":3012},[159,7266,453],{"emptyLinePlaceholder":452},[159,7268,7269,7271,7273,7276,7278,7281,7283],{"class":161,"line":3034},[159,7270,7197],{"class":463},[159,7272,770],{"class":176},[159,7274,7275],{"class":712},"onResponseError",[159,7277,716],{"class":172},[159,7279,7280],{"class":2361},"err",[159,7282,2559],{"class":680},[159,7284,688],{"class":176},[159,7286,7287,7290,7292,7294,7296,7299,7301,7304,7306],{"class":161,"line":3040},[159,7288,7289],{"class":684}," switch",[159,7291,716],{"class":172},[159,7293,7280],{"class":463},[159,7295,770],{"class":176},[159,7297,7298],{"class":463},"response",[159,7300,770],{"class":176},[159,7302,7303],{"class":463},"status",[159,7305,767],{"class":172},[159,7307,688],{"class":176},[159,7309,7310],{"class":161,"line":3051},[159,7311,7312],{"class":1907}," \u002F\u002F ステータスごとに異なる処理\n",[159,7314,7315],{"class":161,"line":3057},[159,7316,807],{"class":176},[159,7318,7319,7321],{"class":161,"line":3063},[159,7320,4006],{"class":176},[159,7322,1866],{"class":172},[159,7324,7325],{"class":161,"line":3069},[159,7326,453],{"emptyLinePlaceholder":452},[159,7328,7329],{"class":161,"line":3075},[159,7330,7331],{"class":1907}," \u002F\u002F こうすると $API で上記の設定をしたaxiosインスタンスを呼び出せる。つまり通信処理を共通化できる。\n",[159,7333,7334,7337,7339,7341,7344,7346,7348,7351,7353],{"class":161,"line":3080},[159,7335,7336],{"class":712}," inject",[159,7338,716],{"class":172},[159,7340,475],{"class":176},[159,7342,7343],{"class":180},"API",[159,7345,475],{"class":176},[159,7347,225],{"class":176},[159,7349,7350],{"class":463},"api",[159,7352,767],{"class":172},[159,7354,779],{"class":176},[159,7356,7357],{"class":161,"line":3089},[159,7358,819],{"class":176},[13,7360,7361],{},"こうすることでAPIの呼び出し処理を共通化できます。しかしstrapiには上記の様な strapi nuxt module というものがあります。そのモジュールを用いると以下の様に呼び出しが可能です。",[113,7363,7365],{"className":1805,"code":7364,"language":1808,"meta":120,"style":120},"async asyncData(){\n await this.$strapi.findOne('newsItem',1)\n .then(async res=>{\n \u002F\u002F成功時の処理 res にstrapi からのデータが入っている\n })\n .catch(err=>{\n　　　　　　　\u002F\u002Fエラー時の処理\n console.log(error);\n })\n}\n",[55,7366,7367,7379,7409,7429,7434,7441,7456,7461,7480,7486],{"__ignoreMap":120},[159,7368,7369,7372,7375,7377],{"class":161,"line":162},[159,7370,7371],{"class":463},"async ",[159,7373,7374],{"class":712},"asyncData",[159,7376,776],{"class":463},[159,7378,688],{"class":176},[159,7380,7381,7384,7386,7389,7391,7394,7396,7398,7401,7403,7405,7407],{"class":161,"line":169},[159,7382,7383],{"class":684}," await",[159,7385,4790],{"class":176},[159,7387,7388],{"class":463},"$strapi",[159,7390,770],{"class":176},[159,7392,7393],{"class":712},"findOne",[159,7395,716],{"class":172},[159,7397,475],{"class":176},[159,7399,7400],{"class":180},"newsItem",[159,7402,475],{"class":176},[159,7404,225],{"class":176},[159,7406,5926],{"class":263},[159,7408,1866],{"class":172},[159,7410,7411,7414,7417,7419,7422,7425,7427],{"class":161,"line":184},[159,7412,7413],{"class":176}," .",[159,7415,7416],{"class":712},"then",[159,7418,716],{"class":172},[159,7420,7421],{"class":680},"async",[159,7423,7424],{"class":2361}," res",[159,7426,2559],{"class":680},[159,7428,688],{"class":176},[159,7430,7431],{"class":161,"line":195},[159,7432,7433],{"class":1907}," \u002F\u002F成功時の処理 res にstrapi からのデータが入っている\n",[159,7435,7436,7439],{"class":161,"line":212},[159,7437,7438],{"class":176}," }",[159,7440,1866],{"class":172},[159,7442,7443,7445,7448,7450,7452,7454],{"class":161,"line":233},[159,7444,7413],{"class":176},[159,7446,7447],{"class":712},"catch",[159,7449,716],{"class":172},[159,7451,7280],{"class":2361},[159,7453,2559],{"class":680},[159,7455,688],{"class":176},[159,7457,7458],{"class":161,"line":244},[159,7459,7460],{"class":1907},"　　　　　　　\u002F\u002Fエラー時の処理\n",[159,7462,7463,7466,7468,7471,7473,7476,7478],{"class":161,"line":255},[159,7464,7465],{"class":463}," console",[159,7467,770],{"class":176},[159,7469,7470],{"class":712},"log",[159,7472,716],{"class":172},[159,7474,7475],{"class":463},"error",[159,7477,767],{"class":172},[159,7479,779],{"class":176},[159,7481,7482,7484],{"class":161,"line":267},[159,7483,7438],{"class":176},[159,7485,1866],{"class":172},[159,7487,7488],{"class":161,"line":279},[159,7489,819],{"class":176},[13,7491,7492,7494,7495,7498,7499],{},[55,7493,7388],{}," というコンテキストが自動で追加され ",[55,7496,7497],{},"findOne('contens-type-name',id)","で呼び出すことができます。loginや認証ユーザーのAPIもあるのでnuxt strapiモジュールを入れておくと構築がしやすくなります。",[872,7500,6230],{"href":7501,"rel":7502},"https:\u002F\u002Fstrapi.nuxtjs.org\u002F",[876],[13,7504,7505],{},"npm でインストールしておきます。",[113,7507,7510],{"className":7508,"code":7509,"language":119},[116],"npm install @nuxtjs\u002Fstrapi\n",[55,7511,7509],{"__ignoreMap":120},[13,7513,7514,7516],{},[55,7515,431],{},"で以下の様に追記します。",[113,7518,7521],{"className":7519,"code":7520,"language":119},[116],"modules: [\n '@nuxtjs\u002Fstrapi',\n],\nstrapi: {\n url:'http:\u002F\u002Flocalhost:1337'\n},\n",[55,7522,7520],{"__ignoreMap":120},[13,7524,7525,7526,7528,7529,7532,7533,7536],{},"こうするとモジュールが有効になり、",[55,7527,7388],{},"のコンテキストが使用可能になります。",[55,7530,7531],{},"strapi:{}","でオプションが指定できます。strapiがホストされているurlを書いておきます。開発版なので",[55,7534,7535],{},"http:\u002F\u002Flocalhost:1337","にしていますが実際の運用ではenvファイルに書いておくなりしておきましょう。",[96,7538,7540],{"id":7539},"とりあえず-初期画面に表示してみる","とりあえず 初期画面に表示してみる",[13,7542,7543],{},"nuxt.jsをインストールした時に既に存在している pages\u002Findex.vue に登録したニュースをboostrap のcardを用いて表示させてみましょう。以下の様に記述",[113,7545,7548],{"className":618,"code":7546,"filename":7547,"language":621,"meta":120,"style":120},"\u003Ctemplate>\n \u003Cdiv class=\"container\">\n \u003Cdiv>\n \u003Cb-card\n :title=\"title\"\n :img-src=\"img\"\n img-top\n tag=\"article\"\n style=\"max-width: 20rem;\"\n class=\"my-5\"\n >\n \u003Cb-card-text>\n {{content}}\n \u003C\u002Fb-card-text>\n \u003C\u002Fb-card>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n data(){\n return{\n\n }\n },\n async asyncData(context){\n return await context.$strapi.findOne('news-items',1)\n .then(res=>{\n return {\n title:res.title,\n img:context.env.envSet.IMG_BASE_URL+res.thumbnail.url,\n content:res.conctent\n }\n })\n .catch(err=>{\n console.error(err)\n })\n }\n}\n\u003C\u002Fscript>\n","pages\u002Findex.vue",[55,7549,7550,7558,7577,7585,7592,7605,7619,7624,7638,7652,7666,7671,7680,7685,7693,7703,7711,7719,7727,7731,7739,7747,7753,7759,7763,7767,7771,7784,7815,7831,7837,7852,7891,7905,7909,7915,7929,7944,7950,7954,7959],{"__ignoreMap":120},[159,7551,7552,7554,7556],{"class":161,"line":162},[159,7553,628],{"class":176},[159,7555,631],{"class":172},[159,7557,634],{"class":176},[159,7559,7560,7562,7564,7566,7568,7570,7573,7575],{"class":161,"line":169},[159,7561,4224],{"class":176},[159,7563,408],{"class":172},[159,7565,3571],{"class":680},[159,7567,1658],{"class":176},[159,7569,1090],{"class":176},[159,7571,7572],{"class":180},"container",[159,7574,1090],{"class":176},[159,7576,634],{"class":176},[159,7578,7579,7581,7583],{"class":161,"line":184},[159,7580,639],{"class":176},[159,7582,408],{"class":172},[159,7584,634],{"class":176},[159,7586,7587,7589],{"class":161,"line":195},[159,7588,4424],{"class":176},[159,7590,7591],{"class":172},"b-card\n",[159,7593,7594,7597,7599,7601,7603],{"class":161,"line":212},[159,7595,7596],{"class":680}," :title",[159,7598,1658],{"class":176},[159,7600,1090],{"class":176},[159,7602,173],{"class":180},[159,7604,1240],{"class":176},[159,7606,7607,7610,7612,7614,7617],{"class":161,"line":233},[159,7608,7609],{"class":680}," :img-src",[159,7611,1658],{"class":176},[159,7613,1090],{"class":176},[159,7615,7616],{"class":180},"img",[159,7618,1240],{"class":176},[159,7620,7621],{"class":161,"line":244},[159,7622,7623],{"class":680}," img-top\n",[159,7625,7626,7629,7631,7633,7636],{"class":161,"line":255},[159,7627,7628],{"class":680}," tag",[159,7630,1658],{"class":176},[159,7632,1090],{"class":176},[159,7634,7635],{"class":180},"article",[159,7637,1240],{"class":176},[159,7639,7640,7643,7645,7647,7650],{"class":161,"line":267},[159,7641,7642],{"class":680}," style",[159,7644,1658],{"class":176},[159,7646,1090],{"class":176},[159,7648,7649],{"class":180},"max-width: 20rem;",[159,7651,1240],{"class":176},[159,7653,7654,7657,7659,7661,7664],{"class":161,"line":279},[159,7655,7656],{"class":680}," class",[159,7658,1658],{"class":176},[159,7660,1090],{"class":176},[159,7662,7663],{"class":180},"my-5",[159,7665,1240],{"class":176},[159,7667,7668],{"class":161,"line":782},[159,7669,7670],{"class":176}," >\n",[159,7672,7673,7675,7678],{"class":161,"line":787},[159,7674,1649],{"class":176},[159,7676,7677],{"class":172},"b-card-text",[159,7679,634],{"class":176},[159,7681,7682],{"class":161,"line":796},[159,7683,7684],{"class":463}," {{content}}\n",[159,7686,7687,7689,7691],{"class":161,"line":804},[159,7688,1754],{"class":176},[159,7690,7677],{"class":172},[159,7692,634],{"class":176},[159,7694,7695,7698,7701],{"class":161,"line":810},[159,7696,7697],{"class":176}," \u003C\u002F",[159,7699,7700],{"class":172},"b-card",[159,7702,634],{"class":176},[159,7704,7705,7707,7709],{"class":161,"line":816},[159,7706,653],{"class":176},[159,7708,408],{"class":172},[159,7710,634],{"class":176},[159,7712,7713,7715,7717],{"class":161,"line":822},[159,7714,4398],{"class":176},[159,7716,408],{"class":172},[159,7718,634],{"class":176},[159,7720,7721,7723,7725],{"class":161,"line":2996},[159,7722,662],{"class":176},[159,7724,631],{"class":172},[159,7726,634],{"class":176},[159,7728,7729],{"class":161,"line":3012},[159,7730,453],{"emptyLinePlaceholder":452},[159,7732,7733,7735,7737],{"class":161,"line":3034},[159,7734,628],{"class":176},[159,7736,673],{"class":172},[159,7738,634],{"class":176},[159,7740,7741,7743,7745],{"class":161,"line":3040},[159,7742,681],{"class":684},[159,7744,685],{"class":684},[159,7746,793],{"class":176},[159,7748,7749,7751],{"class":161,"line":3051},[159,7750,4741],{"class":172},[159,7752,4744],{"class":176},[159,7754,7755,7757],{"class":161,"line":3057},[159,7756,2566],{"class":684},[159,7758,688],{"class":176},[159,7760,7761],{"class":161,"line":3063},[159,7762,453],{"emptyLinePlaceholder":452},[159,7764,7765],{"class":161,"line":3069},[159,7766,2010],{"class":176},[159,7768,7769],{"class":161,"line":3075},[159,7770,4767],{"class":176},[159,7772,7773,7776,7778,7780,7782],{"class":161,"line":3080},[159,7774,7775],{"class":680}," async",[159,7777,713],{"class":172},[159,7779,716],{"class":176},[159,7781,7074],{"class":2361},[159,7783,2369],{"class":176},[159,7785,7786,7788,7790,7792,7794,7796,7798,7800,7802,7804,7807,7809,7811,7813],{"class":161,"line":3089},[159,7787,2566],{"class":684},[159,7789,753],{"class":684},[159,7791,7099],{"class":463},[159,7793,770],{"class":176},[159,7795,7388],{"class":463},[159,7797,770],{"class":176},[159,7799,7393],{"class":712},[159,7801,716],{"class":172},[159,7803,475],{"class":176},[159,7805,7806],{"class":180},"news-items",[159,7808,475],{"class":176},[159,7810,225],{"class":176},[159,7812,5926],{"class":263},[159,7814,1866],{"class":172},[159,7816,7817,7820,7822,7824,7827,7829],{"class":161,"line":3094},[159,7818,7819],{"class":176}," .",[159,7821,7416],{"class":712},[159,7823,716],{"class":172},[159,7825,7826],{"class":2361},"res",[159,7828,2559],{"class":680},[159,7830,688],{"class":176},[159,7832,7833,7835],{"class":161,"line":3113},[159,7834,790],{"class":684},[159,7836,793],{"class":176},[159,7838,7839,7842,7844,7846,7848,7850],{"class":161,"line":3118},[159,7840,7841],{"class":172}," title",[159,7843,177],{"class":176},[159,7845,7826],{"class":463},[159,7847,770],{"class":176},[159,7849,173],{"class":463},[159,7851,304],{"class":176},[159,7853,7854,7857,7859,7861,7863,7865,7867,7870,7872,7875,7877,7879,7881,7884,7886,7889],{"class":161,"line":3131},[159,7855,7856],{"class":172}," img",[159,7858,177],{"class":176},[159,7860,7074],{"class":463},[159,7862,770],{"class":176},[159,7864,7211],{"class":463},[159,7866,770],{"class":176},[159,7868,7869],{"class":463},"envSet",[159,7871,770],{"class":176},[159,7873,7874],{"class":463},"IMG_BASE_URL",[159,7876,2425],{"class":176},[159,7878,7826],{"class":463},[159,7880,770],{"class":176},[159,7882,7883],{"class":463},"thumbnail",[159,7885,770],{"class":176},[159,7887,7888],{"class":463},"url",[159,7890,304],{"class":176},[159,7892,7893,7896,7898,7900,7902],{"class":161,"line":3136},[159,7894,7895],{"class":172}," content",[159,7897,177],{"class":176},[159,7899,7826],{"class":463},[159,7901,770],{"class":176},[159,7903,7904],{"class":463},"conctent\n",[159,7906,7907],{"class":161,"line":3142},[159,7908,807],{"class":176},[159,7910,7911,7913],{"class":161,"line":3152},[159,7912,3183],{"class":176},[159,7914,1866],{"class":172},[159,7916,7917,7919,7921,7923,7925,7927],{"class":161,"line":3165},[159,7918,7819],{"class":176},[159,7920,7447],{"class":712},[159,7922,716],{"class":172},[159,7924,7280],{"class":2361},[159,7926,2559],{"class":680},[159,7928,688],{"class":176},[159,7930,7931,7934,7936,7938,7940,7942],{"class":161,"line":3180},[159,7932,7933],{"class":463}," console",[159,7935,770],{"class":176},[159,7937,7475],{"class":712},[159,7939,716],{"class":172},[159,7941,7280],{"class":463},[159,7943,1866],{"class":172},[159,7945,7946,7948],{"class":161,"line":3188},[159,7947,3183],{"class":176},[159,7949,1866],{"class":172},[159,7951,7952],{"class":161,"line":3194},[159,7953,4891],{"class":176},[159,7955,7957],{"class":161,"line":7956},40,[159,7958,819],{"class":176},[159,7960,7962,7964,7966],{"class":161,"line":7961},41,[159,7963,662],{"class":176},[159,7965,673],{"class":172},[159,7967,634],{"class":176},[13,7969,7970],{},"いらないものはとりあえず省きましました。コードの解説をします。",[6292,7972,7974],{"id":7973},"asyncdataでapiを呼ぶ","asyncDataでAPIを呼ぶ",[13,7976,7977],{},"asyncDataというのはssr・ssgモードのpages配下で利用できます。これはcreatedよりも前、コンポーネントインスタンスが完成する際に呼び出せます。このasycData内の処理が終わってからコンポーネントが作成されます。",[13,7979,7980],{},"静的出力・ssrの場合はasycDataに処理を書くことでサーバーサイドでAPIの呼び出し、そしてコンポーネントのdataへのマージを行ってくれます。createdでやると、静的出力した際になんと静的htmlからAPIを呼び出してしまいます。",[13,7982,7983,7984],{},"詳しくは",[872,7985,7988],{"href":7986,"rel":7987},"https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002F2.x\u002Ffeatures\u002Fdata-fetching#async-data",[876],"こちら",[6292,7990,7992],{"id":7991},"画像のurlはちょっと注意","画像のURLはちょっと注意",[13,7994,7995],{},"APIで呼び出した際に、サムネイルのURLは以下の様になっていました。",[113,7997,7999],{"className":1080,"code":7998,"language":1083,"meta":120,"style":120},"thumbnail:{\n...\nurl\": \"\u002Fuploads\u002Fnuxt_strapi_8a86d72c14.png\",\n...\n}\n",[55,8000,8001,8008,8012,8029,8033],{"__ignoreMap":120},[159,8002,8003,8006],{"class":161,"line":162},[159,8004,8005],{"class":463},"thumbnail:",[159,8007,688],{"class":176},[159,8009,8010],{"class":161,"line":169},[159,8011,3801],{"class":463},[159,8013,8014,8016,8018,8020,8022,8025,8027],{"class":161,"line":184},[159,8015,7888],{"class":463},[159,8017,1090],{"class":176},[159,8019,1098],{"class":680},[159,8021,1090],{"class":176},[159,8023,8024],{"class":463},"\u002Fuploads\u002Fnuxt_strapi_8a86d72c14.png",[159,8026,1090],{"class":176},[159,8028,304],{"class":680},[159,8030,8031],{"class":161,"line":195},[159,8032,3801],{"class":680},[159,8034,8035],{"class":161,"line":212},[159,8036,819],{"class":680},[13,8038,8039,8040,8043],{},"ローカルの環境では画像にアクセスできません。（実物が",[55,8041,8042],{},"http:\u002F\u002Flocalhost:1337\u002F","配下にいるため）そのためenvを用いて",[113,8045,8048],{"className":8046,"code":8047,"language":119},[116],"img:context.env.envSet.IMG_BASE_URL+res.thumbnail.url,\n",[55,8049,8047],{"__ignoreMap":120},[13,8051,8052,8053,8056],{},"としてURLの前に",[55,8054,8055],{},"env.envSet.IMG_BASE_URL = http:\u002F\u002Flocalhost:1337","が出力される様にしています。そして表示されたページが以下の感じです。",[833,8058],{":src":8059,":width":836,":center":837},"'_mix\u002Ffinal-768x414.png'",[13,8061,8062],{},"きちんとデータ・画像がとってこれていますし、bootstrapにはめ込まれていい感じです。",[6292,8064,8065],{"id":8065},"データ取得できない場合",[13,8067,8068],{},"データが取得できない場合以下のことを確認",[75,8070,8071,8074,8077,8080],{},[28,8072,8073],{},"レコードは「Publish」になっているか",[28,8075,8076],{},"権限とロールでPublicの読み取り権限にチェックを入れているか",[28,8078,8079],{},"エンドポイントを間違っていないか",[28,8081,8082],{},"strapiのサーバを落としていないか",[47,8084,8086],{"id":8085},"次回は","次回は…",[13,8088,8089],{},"今回の記事ではstrapiとNuxtのインストール・連携まで行いました。次回の記事からはブログ構成を構築するためのstrapiで「ページ」データの構築、そしてnuxtでの出力方法を書いていきます。",[907,8091,8092],{},"html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}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":120,"searchDepth":184,"depth":184,"links":8094},[8095,8098,8099,8100,8105,8111,8120],{"id":6680,"depth":169,"text":6681,"children":8096},[8097],{"id":6699,"depth":184,"text":6700},{"id":6740,"depth":169,"text":6740},{"id":6758,"depth":169,"text":6758},{"id":6774,"depth":169,"text":6774,"children":8101},[8102,8103,8104],{"id":6777,"depth":184,"text":6777},{"id":6805,"depth":184,"text":6805},{"id":6828,"depth":184,"text":6829},{"id":6853,"depth":169,"text":6853,"children":8106},[8107,8108,8109,8110],{"id":6918,"depth":184,"text":6918},{"id":6947,"depth":184,"text":6947},{"id":6971,"depth":184,"text":6971},{"id":6996,"depth":184,"text":6997},{"id":7009,"depth":169,"text":7009,"children":8112},[8113,8114,8115],{"id":7033,"depth":184,"text":7034},{"id":7050,"depth":184,"text":7051},{"id":7539,"depth":184,"text":7540,"children":8116},[8117,8118,8119],{"id":7973,"depth":195,"text":7974},{"id":7991,"depth":195,"text":7992},{"id":8065,"depth":195,"text":8065},{"id":8085,"depth":169,"text":8086},[206],"2020-11-03","headlessCMSのstrapi をnuxt.jsで静的書き出しを行う。",{},"\u002Fseries\u002Fheadlesscms-strapi-1",{"title":6632,"description":8123},"headlesscms-strapi","series\u002Fheadlesscms-strapi-1",[222,228,8130],"headlesscms","_mix\u002Fnuxt_strapi-768x768.png","AUAh3SzPOmWReCngs8NQezSo25YbFgc0ddNoPwO0euE",{"id":8134,"title":8135,"body":8136,"category":11482,"createdAt":11483,"description":11484,"extension":928,"index":184,"meta":11485,"navigation":452,"path":11486,"publish":452,"seo":11487,"series":11488,"seriesTitle":11489,"stem":11490,"tag":11491,"thumbnail":11493,"updatedAt":937,"__hash__":11494},"series\u002Fseries\u002Fconcrete5vue-3.md","Concrete5にVueCLIを使ってUIを構築する。3【編集画面と一覧画面】",{"type":10,"value":8137,"toc":11459},[8138,8145,8148,8152,8159,8162,8166,8169,8175,8182,8249,8260,8266,8273,8277,8280,8640,8645,8649,8656,8733,8742,8749,8752,8755,8784,8791,8910,8916,9161,9164,9171,9185,9188,9195,9198,9201,9204,9302,9305,9308,9313,9477,9484,9487,9490,9493,9496,9499,9502,9505,9508,10832,10835,10846,10849,10852,10855,10859,10864,10996,11000,11003,11009,11036,11039,11295,11301,11304,11307,11310,11313,11316,11319,11322,11325,11328,11331,11334,11337,11340,11343,11346,11444,11447,11450,11453,11456],[13,8139,6197,8140,8144],{},[872,8141,8143],{"href":8142},"\u002Fseries\u002Fconcrete5vue-2","Concrete5にVueCLIを使ってUIを構築する 2","の記事の続きを書いていきます。前回の記事ではフォームの作成・登録まで行いました。この記事では登録したデータの編集とファイルマネージャーのvueコンポーネント化を行っていきます。",[13,8146,8147],{},"編集画面は追加画面とコンポーネントを共有し、データベースからAjaxでデータを取得してコンポーネントに代入をします。そして登録したデータの操作が行える一覧画面を作成します。",[47,8149,8151],{"id":8150},"編集画面のレンダーとajax設定","編集画面のレンダーとAjax設定",[13,8153,8154,8155,8158],{},"まずは編集画面から作成していきます。編集は追加と違ってデータベースからデータを取得して、初期値として当てはめる必要があります。PHPであれば",[55,8156,8157],{},"value=\"\u003C?php echo $data?>\"","みたいに挿入することで簡単に実現できますが、vueを使うとなれば一捻り必要です。",[13,8160,8161],{},"jsでフロントを構築する場合、基本的にDBのデータはAjaxを用いて再度サーバーにデータを要求します。concrete5でもAjaxとそのエントリーを実装することができます。まずエントリーの設定からやってみましょう。",[96,8163,8165],{"id":8164},"ajaxエントリーrest-apiの作成","Ajaxエントリー(REST API)の作成",[13,8167,8168],{},"今回はシングルページのコントローラーを用いてAjax用のエントリーを実装します。Ajaxでデータを取得する際は基本的に取得用のURLを作成して、そのURLに対してAjaxを飛ばしてJSONデータをレスポンスとして受け取るのが定石です。",[113,8170,8173],{"className":8171,"code":8172,"language":119},[116],"vuetest\n├── controller.php \u002F\u002Fこれはパッケージのcontroller\n├── controllers\n│ └── single_page\n│ └── dashboard\n│ └── vuetest.php\n└── single_pages\n └── dashboard\n └── vuetest\n ├── add.php \u002F\u002F追加画面シングルページ\n ├── edit.php \u002F\u002F編集画面シングルページ\n └── view.php\n",[55,8174,8172],{"__ignoreMap":120},[13,8176,8177,8178,8181],{},"では ",[55,8179,8180],{},"vuetest\u002Fcontrollers\u002Fsingle_page\u002Fdashboard\u002Fvuetest.php"," に以下のように記述します。",[113,8183,8186],{"className":6346,"code":8184,"filename":8185,"language":6349,"meta":120,"style":120},"public function edit($id=null){\n if($id==null) return Redirect::to('\u002Fdashboard\u002Fvuetest\u002F')->send();\n\n if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){\n $db = Database::connection();\n $db->Execute(\"START TRANSACTION\");\n $result = $db->fetchAll('SELECT * FROM album WHERE ID = ?',array($id));\n $db->Execute(\"COMMIT\");\n return Core::make('helper\u002Fajax')->sendResult($result);\n }\n\n $this->render('\u002Fdashboard\u002Fvuetest\u002Fedit');\n}\n","vuetest.php",[55,8187,8188,8193,8198,8202,8207,8212,8217,8222,8227,8232,8236,8240,8245],{"__ignoreMap":120},[159,8189,8190],{"class":161,"line":162},[159,8191,8192],{},"public function edit($id=null){\n",[159,8194,8195],{"class":161,"line":169},[159,8196,8197],{}," if($id==null) return Redirect::to('\u002Fdashboard\u002Fvuetest\u002F')->send();\n",[159,8199,8200],{"class":161,"line":184},[159,8201,453],{"emptyLinePlaceholder":452},[159,8203,8204],{"class":161,"line":195},[159,8205,8206],{}," if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){\n",[159,8208,8209],{"class":161,"line":212},[159,8210,8211],{}," $db = Database::connection();\n",[159,8213,8214],{"class":161,"line":233},[159,8215,8216],{}," $db->Execute(\"START TRANSACTION\");\n",[159,8218,8219],{"class":161,"line":244},[159,8220,8221],{}," $result = $db->fetchAll('SELECT * FROM album WHERE ID = ?',array($id));\n",[159,8223,8224],{"class":161,"line":255},[159,8225,8226],{}," $db->Execute(\"COMMIT\");\n",[159,8228,8229],{"class":161,"line":267},[159,8230,8231],{}," return Core::make('helper\u002Fajax')->sendResult($result);\n",[159,8233,8234],{"class":161,"line":279},[159,8235,2010],{},[159,8237,8238],{"class":161,"line":782},[159,8239,453],{"emptyLinePlaceholder":452},[159,8241,8242],{"class":161,"line":787},[159,8243,8244],{}," $this->render('\u002Fdashboard\u002Fvuetest\u002Fedit');\n",[159,8246,8247],{"class":161,"line":796},[159,8248,819],{},[13,8250,8251,8252,8255,8256,8259],{},"まずは編集画面を ",[55,8253,8254],{},"\u002Fdashboard\u002Fvuetest\u002Fedit"," というURLで表示できるようにします。このメソッドではパラメータがあるので ",[55,8257,8258],{},"\u002Fdashboard\u002Fvuetest\u002Fedit\u002F2"," のようなURLを送信できます。数字の部分はアルバムのDBでのIDとします。（アルバムID）",[13,8261,6593,8262,8265],{},[55,8263,8264],{},"\u002Fdashboard\u002Fvuetest\u002Fedit\u002F"," にアルバムIDを加えて送信することで、指定したIDのデータを表示できるようにします。そしてリクエストがXMLHttpRequestつまり、AjaxであればデータJSONで返し、そうでなければ404を返すようにします。",[13,8267,8268,8269,8272],{},"リクエストの種別を限定することで、ブラウザなどでAjax専用の ",[55,8270,8271],{},"\u002Fdashboard\u002Fvuetest\u002FloadData"," というURLを叩いても404しか表示されません。",[408,8274,8276],{"className":8275},[411,1463],"\nこのようなAPIを作成するときは、データを差し出してもいいユーザーなのかをチェックする必要があります。しかし今回のような管理画面配下のページ（dashboard）でルーティングする場合は特に気にする必要はありません。\n",[13,8278,8279],{},"\u002Fdashboard\u002F* 配下はリクエストからログインユーザーであるかをチェックしており、ログインユーザーでないリクエストの場合、ログインページのHTMLが返されます。実際にcurlで上記のURLを打ってみると",[113,8281,8283],{"className":1609,"code":8282,"language":1612,"meta":120,"style":120},"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n \u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"\u002Fconcrete\u002Fthemes\u002Fconcrete\u002Fmain.css\" \u002F>\n \n\u003Ctitle>ログイン :: c5test\u003C\u002Ftitle>\n\n\u003Cmeta http-equiv=\"content-type\" content=\"text\u002Fhtml; charset=UTF-8\"\u002F>\n\u003Cmeta name=\"generator\" content=\"concrete5 - 8.5.4\"\u002F>\n\u003Clink rel=\"canonical\" href=\"http:\u002F\u002Flocalhost:8888\u002Flogin\">\n\u003Cscript type=\"text\u002Fjavascript\">\n var CCM_DISPATCHER_FILENAME = \"\u002Findex.php\";\n var CCM_CID = 174;\n var CCM_EDIT_MODE = false;\n var CCM_ARRANGE_MODE = false;\n var CCM_IMAGE_PATH = \"\u002Fconcrete\u002Fimages\";\n var CCM_TOOLS_PATH = \"\u002Findex.php\u002Ftools\u002Frequired\";\n var CCM_APPLICATION_URL = \"http:\u002F\u002Flocalhost:8888\";\n var CCM_REL = \"\";\n var CCM_ACTIVE_LOCALE = \"ja_JP\";\n\u003C\u002Fscript>\n",[55,8284,8285,8295,8303,8311,8352,8356,8373,8377,8408,8438,8468,8487,8506,8520,8533,8546,8564,8582,8600,8614,8632],{"__ignoreMap":120},[159,8286,8287,8289,8291,8293],{"class":161,"line":162},[159,8288,1619],{"class":176},[159,8290,1622],{"class":172},[159,8292,1625],{"class":680},[159,8294,634],{"class":176},[159,8296,8297,8299,8301],{"class":161,"line":169},[159,8298,628],{"class":176},[159,8300,1612],{"class":172},[159,8302,634],{"class":176},[159,8304,8305,8307,8309],{"class":161,"line":184},[159,8306,628],{"class":176},[159,8308,1642],{"class":172},[159,8310,634],{"class":176},[159,8312,8313,8315,8317,8319,8321,8323,8325,8327,8329,8331,8333,8336,8338,8340,8342,8344,8347,8349],{"class":161,"line":195},[159,8314,639],{"class":176},[159,8316,3418],{"class":172},[159,8318,3421],{"class":680},[159,8320,1658],{"class":176},[159,8322,1090],{"class":176},[159,8324,3428],{"class":180},[159,8326,1090],{"class":176},[159,8328,2243],{"class":680},[159,8330,1658],{"class":176},[159,8332,1090],{"class":176},[159,8334,8335],{"class":180},"text\u002Fcss",[159,8337,1090],{"class":176},[159,8339,3433],{"class":680},[159,8341,1658],{"class":176},[159,8343,1090],{"class":176},[159,8345,8346],{"class":180},"\u002Fconcrete\u002Fthemes\u002Fconcrete\u002Fmain.css",[159,8348,1090],{"class":176},[159,8350,8351],{"class":176}," \u002F>\n",[159,8353,8354],{"class":161,"line":212},[159,8355,2883],{"class":463},[159,8357,8358,8360,8362,8364,8367,8369,8371],{"class":161,"line":233},[159,8359,628],{"class":176},[159,8361,173],{"class":172},[159,8363,1676],{"class":176},[159,8365,8366],{"class":463},"ログイン :: c5test",[159,8368,662],{"class":176},[159,8370,173],{"class":172},[159,8372,634],{"class":176},[159,8374,8375],{"class":161,"line":244},[159,8376,453],{"emptyLinePlaceholder":452},[159,8378,8379,8381,8383,8385,8387,8389,8392,8394,8396,8398,8400,8403,8405],{"class":161,"line":255},[159,8380,628],{"class":176},[159,8382,1652],{"class":172},[159,8384,4255],{"class":680},[159,8386,1658],{"class":176},[159,8388,1090],{"class":176},[159,8390,8391],{"class":180},"content-type",[159,8393,1090],{"class":176},[159,8395,747],{"class":680},[159,8397,1658],{"class":176},[159,8399,1090],{"class":176},[159,8401,8402],{"class":180},"text\u002Fhtml; charset=UTF-8",[159,8404,1090],{"class":176},[159,8406,8407],{"class":176},"\u002F>\n",[159,8409,8410,8412,8414,8416,8418,8420,8423,8425,8427,8429,8431,8434,8436],{"class":161,"line":267},[159,8411,628],{"class":176},[159,8413,1652],{"class":172},[159,8415,4286],{"class":680},[159,8417,1658],{"class":176},[159,8419,1090],{"class":176},[159,8421,8422],{"class":180},"generator",[159,8424,1090],{"class":176},[159,8426,747],{"class":680},[159,8428,1658],{"class":176},[159,8430,1090],{"class":176},[159,8432,8433],{"class":180},"concrete5 - 8.5.4",[159,8435,1090],{"class":176},[159,8437,8407],{"class":176},[159,8439,8440,8442,8444,8446,8448,8450,8453,8455,8457,8459,8461,8464,8466],{"class":161,"line":279},[159,8441,628],{"class":176},[159,8443,3418],{"class":172},[159,8445,3421],{"class":680},[159,8447,1658],{"class":176},[159,8449,1090],{"class":176},[159,8451,8452],{"class":180},"canonical",[159,8454,1090],{"class":176},[159,8456,3433],{"class":680},[159,8458,1658],{"class":176},[159,8460,1090],{"class":176},[159,8462,8463],{"class":180},"http:\u002F\u002Flocalhost:8888\u002Flogin",[159,8465,1090],{"class":176},[159,8467,634],{"class":176},[159,8469,8470,8472,8474,8476,8478,8480,8483,8485],{"class":161,"line":782},[159,8471,628],{"class":176},[159,8473,673],{"class":172},[159,8475,2243],{"class":680},[159,8477,1658],{"class":176},[159,8479,1090],{"class":176},[159,8481,8482],{"class":180},"text\u002Fjavascript",[159,8484,1090],{"class":176},[159,8486,634],{"class":176},[159,8488,8489,8492,8495,8497,8499,8502,8504],{"class":161,"line":787},[159,8490,8491],{"class":680}," var",[159,8493,8494],{"class":463}," CCM_DISPATCHER_FILENAME ",[159,8496,1658],{"class":176},[159,8498,1115],{"class":176},[159,8500,8501],{"class":180},"\u002Findex.php",[159,8503,1090],{"class":176},[159,8505,779],{"class":176},[159,8507,8508,8510,8513,8515,8518],{"class":161,"line":796},[159,8509,8491],{"class":680},[159,8511,8512],{"class":463}," CCM_CID ",[159,8514,1658],{"class":176},[159,8516,8517],{"class":263}," 174",[159,8519,779],{"class":176},[159,8521,8522,8524,8527,8529,8531],{"class":161,"line":804},[159,8523,8491],{"class":680},[159,8525,8526],{"class":463}," CCM_EDIT_MODE ",[159,8528,1658],{"class":176},[159,8530,3028],{"class":275},[159,8532,779],{"class":176},[159,8534,8535,8537,8540,8542,8544],{"class":161,"line":810},[159,8536,8491],{"class":680},[159,8538,8539],{"class":463}," CCM_ARRANGE_MODE ",[159,8541,1658],{"class":176},[159,8543,3028],{"class":275},[159,8545,779],{"class":176},[159,8547,8548,8550,8553,8555,8557,8560,8562],{"class":161,"line":816},[159,8549,8491],{"class":680},[159,8551,8552],{"class":463}," CCM_IMAGE_PATH ",[159,8554,1658],{"class":176},[159,8556,1115],{"class":176},[159,8558,8559],{"class":180},"\u002Fconcrete\u002Fimages",[159,8561,1090],{"class":176},[159,8563,779],{"class":176},[159,8565,8566,8568,8571,8573,8575,8578,8580],{"class":161,"line":822},[159,8567,8491],{"class":680},[159,8569,8570],{"class":463}," CCM_TOOLS_PATH ",[159,8572,1658],{"class":176},[159,8574,1115],{"class":176},[159,8576,8577],{"class":180},"\u002Findex.php\u002Ftools\u002Frequired",[159,8579,1090],{"class":176},[159,8581,779],{"class":176},[159,8583,8584,8586,8589,8591,8593,8596,8598],{"class":161,"line":2996},[159,8585,8491],{"class":680},[159,8587,8588],{"class":463}," CCM_APPLICATION_URL ",[159,8590,1658],{"class":176},[159,8592,1115],{"class":176},[159,8594,8595],{"class":180},"http:\u002F\u002Flocalhost:8888",[159,8597,1090],{"class":176},[159,8599,779],{"class":176},[159,8601,8602,8604,8607,8609,8612],{"class":161,"line":3012},[159,8603,8491],{"class":680},[159,8605,8606],{"class":463}," CCM_REL ",[159,8608,1658],{"class":176},[159,8610,8611],{"class":176}," \"\"",[159,8613,779],{"class":176},[159,8615,8616,8618,8621,8623,8625,8628,8630],{"class":161,"line":3034},[159,8617,8491],{"class":680},[159,8619,8620],{"class":463}," CCM_ACTIVE_LOCALE ",[159,8622,1658],{"class":176},[159,8624,1115],{"class":176},[159,8626,8627],{"class":180},"ja_JP",[159,8629,1090],{"class":176},[159,8631,779],{"class":176},[159,8633,8634,8636,8638],{"class":161,"line":3040},[159,8635,662],{"class":176},[159,8637,673],{"class":172},[159,8639,634],{"class":176},[408,8641,8644],{"className":8642},[411,8643],"alert-danger","\n内部の生データが外部からアクセスされるのは非常にまずいのでdashbord配下にルーティングを置き、さらにリクエストの種類をXHRだけにしましょう。\n",[96,8646,8648],{"id":8647},"コンポーネントにajaxアクセスを実装","コンポーネントにAjaxアクセスを実装",[13,8650,8651,8652,8655],{},"URLとデータの取得処理は書いたので、vue側でそこにAjaxを飛ばすようにします。前回作成した",[55,8653,8654],{},"form.vue"," にAjaxの処理を書きます。",[113,8657,8659],{"className":618,"code":8658,"filename":8654,"language":621,"meta":120,"style":120},"created(){\n if(this.isEdit){\n $.ajax({\n url:location.href,\n type:'GET',\n success: (data)=> {\n let result = JSON.parse(data)[0]; \u002F\u002F returns array\n this.title = result.title;\n },\n error: (xhr, textStatus, errorThrown)=>{\n console.error('Error! ' + textStatus + ' ' + errorThrown);\n }\n })\n }\n}\n",[55,8660,8661,8666,8671,8676,8681,8686,8691,8696,8701,8705,8710,8715,8720,8725,8729],{"__ignoreMap":120},[159,8662,8663],{"class":161,"line":162},[159,8664,8665],{"class":463},"created(){\n",[159,8667,8668],{"class":161,"line":169},[159,8669,8670],{"class":463}," if(this.isEdit){\n",[159,8672,8673],{"class":161,"line":184},[159,8674,8675],{"class":463}," $.ajax({\n",[159,8677,8678],{"class":161,"line":195},[159,8679,8680],{"class":463}," url:location.href,\n",[159,8682,8683],{"class":161,"line":212},[159,8684,8685],{"class":463}," type:'GET',\n",[159,8687,8688],{"class":161,"line":233},[159,8689,8690],{"class":463}," success: (data)=> {\n",[159,8692,8693],{"class":161,"line":244},[159,8694,8695],{"class":463}," let result = JSON.parse(data)[0]; \u002F\u002F returns array\n",[159,8697,8698],{"class":161,"line":255},[159,8699,8700],{"class":463}," this.title = result.title;\n",[159,8702,8703],{"class":161,"line":267},[159,8704,3938],{"class":463},[159,8706,8707],{"class":161,"line":279},[159,8708,8709],{"class":463}," error: (xhr, textStatus, errorThrown)=>{\n",[159,8711,8712],{"class":161,"line":782},[159,8713,8714],{"class":463}," console.error('Error! ' + textStatus + ' ' + errorThrown);\n",[159,8716,8717],{"class":161,"line":787},[159,8718,8719],{"class":463}," }\n",[159,8721,8722],{"class":161,"line":796},[159,8723,8724],{"class":463}," })\n",[159,8726,8727],{"class":161,"line":804},[159,8728,2010],{"class":463},[159,8730,8731],{"class":161,"line":810},[159,8732,819],{"class":463},[13,8734,8735,8737,8738,8741],{},[55,8736,8654],{},"は編集と新規追加を併用しているので、",[55,8739,8740],{},"isEdit","というプロパティでAjaxを飛ばすかを制御しています。現在のURLに対してAjaxを飛ばすと、先ほどのコードで書かれているようにIDに紐づいたアルバム情報をDBから取ってきてくれます。",[13,8743,8744,8745,8748],{},"データはJSONで戻ってくるので　",[55,8746,8747],{},"JSON.prase","を用いてJSで用いられるようにします。もし仮にAjaxが失敗した場合\b（400、500系のエラー）、コンソールでエラーが吐かれるようになっています。",[96,8750,8751],{"id":8751},"編集用コンポーネントのレンダリング設定",[13,8753,8754],{},"シングルページそのものはエントリーポイントだけ。",[113,8756,8759],{"className":6346,"code":8757,"filename":8758,"language":6349,"meta":120,"style":120},"\u003C?php\ndefined('C5_EXECUTE') or die('Access Denied.');\n?>\n\n\u003Cdiv id=\"edit\">\u003C\u002Fdiv>\n","edit.php",[55,8760,8761,8765,8770,8775,8779],{"__ignoreMap":120},[159,8762,8763],{"class":161,"line":162},[159,8764,6356],{},[159,8766,8767],{"class":161,"line":169},[159,8768,8769],{},"defined('C5_EXECUTE') or die('Access Denied.');\n",[159,8771,8772],{"class":161,"line":184},[159,8773,8774],{},"?>\n",[159,8776,8777],{"class":161,"line":195},[159,8778,453],{"emptyLinePlaceholder":452},[159,8780,8781],{"class":161,"line":212},[159,8782,8783],{},"\u003Cdiv id=\"edit\">\u003C\u002Fdiv>\n",[13,8785,8786,8787,8790],{},"そしてvue側のeditコンポーネントはpropsを変えるだけで",[55,8788,8789],{},"add.vue","とほぼ同じ",[113,8792,8795],{"className":618,"code":8793,"filename":8794,"language":621,"meta":120,"style":120},"\u003Ctemplate>\n \u003CAlbumForm :isEdit=\"true\"\u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport AlbumForm from '.\u002Fcomponents\u002Fform';\nexport default {\n name:'add',\n components:{AlbumForm}\n}\n\u003C\u002Fscript>\n","edit.vue",[55,8796,8797,8805,8825,8833,8837,8845,8863,8871,8886,8898,8902],{"__ignoreMap":120},[159,8798,8799,8801,8803],{"class":161,"line":162},[159,8800,628],{"class":176},[159,8802,631],{"class":172},[159,8804,634],{"class":176},[159,8806,8807,8809,8812,8815,8817,8819,8821,8823],{"class":161,"line":169},[159,8808,639],{"class":176},[159,8810,8811],{"class":172},"AlbumForm",[159,8813,8814],{"class":680}," :isEdit",[159,8816,1658],{"class":176},[159,8818,1090],{"class":176},[159,8820,837],{"class":180},[159,8822,1090],{"class":176},[159,8824,8407],{"class":176},[159,8826,8827,8829,8831],{"class":161,"line":184},[159,8828,662],{"class":176},[159,8830,631],{"class":172},[159,8832,634],{"class":176},[159,8834,8835],{"class":161,"line":195},[159,8836,453],{"emptyLinePlaceholder":452},[159,8838,8839,8841,8843],{"class":161,"line":212},[159,8840,628],{"class":176},[159,8842,673],{"class":172},[159,8844,634],{"class":176},[159,8846,8847,8849,8852,8854,8856,8859,8861],{"class":161,"line":233},[159,8848,1815],{"class":684},[159,8850,8851],{"class":463}," AlbumForm ",[159,8853,1821],{"class":684},[159,8855,1824],{"class":176},[159,8857,8858],{"class":180},".\u002Fcomponents\u002Fform",[159,8860,475],{"class":176},[159,8862,779],{"class":176},[159,8864,8865,8867,8869],{"class":161,"line":244},[159,8866,681],{"class":684},[159,8868,685],{"class":684},[159,8870,793],{"class":176},[159,8872,8873,8875,8877,8879,8882,8884],{"class":161,"line":255},[159,8874,693],{"class":172},[159,8876,177],{"class":176},[159,8878,475],{"class":176},[159,8880,8881],{"class":180},"add",[159,8883,475],{"class":176},[159,8885,304],{"class":176},[159,8887,8888,8891,8894,8896],{"class":161,"line":267},[159,8889,8890],{"class":172}," components",[159,8892,8893],{"class":176},":{",[159,8895,8811],{"class":463},[159,8897,819],{"class":176},[159,8899,8900],{"class":161,"line":279},[159,8901,819],{"class":176},[159,8903,8904,8906,8908],{"class":161,"line":782},[159,8905,662],{"class":176},[159,8907,673],{"class":172},[159,8909,634],{"class":176},[13,8911,8912,8913,8915],{},"最後にレンダー用の",[55,8914,982],{},"を以下のようにしておきます。",[113,8917,8919],{"className":1805,"code":8918,"filename":982,"language":1808,"meta":120,"style":120},"import Vue from 'vue'\nimport Add from '.\u002Fadd.vue'\nimport Edit from '.\u002Fedit.vue'\n\n\nVue.config.productionTip = false\n\nfunction renderIfidExits(id,vueRoot){\n if(document.getElementById(id) !== null){\n return new Vue({\n render: h => h(vueRoot),\n }).$mount('#'+id)\n }\n}\n\nrenderIfidExits('add',Add);\nrenderIfidExits('edit',Edit);\n",[55,8920,8921,8936,8952,8968,8972,8976,8994,8998,9018,9047,9060,9083,9109,9113,9117,9121,9141],{"__ignoreMap":120},[159,8922,8923,8925,8928,8930,8932,8934],{"class":161,"line":162},[159,8924,1815],{"class":684},[159,8926,8927],{"class":463}," Vue ",[159,8929,1821],{"class":684},[159,8931,1824],{"class":176},[159,8933,621],{"class":180},[159,8935,3048],{"class":176},[159,8937,8938,8940,8943,8945,8947,8950],{"class":161,"line":169},[159,8939,1815],{"class":684},[159,8941,8942],{"class":463}," Add ",[159,8944,1821],{"class":684},[159,8946,1824],{"class":176},[159,8948,8949],{"class":180},".\u002Fadd.vue",[159,8951,3048],{"class":176},[159,8953,8954,8956,8959,8961,8963,8966],{"class":161,"line":184},[159,8955,1815],{"class":684},[159,8957,8958],{"class":463}," Edit ",[159,8960,1821],{"class":684},[159,8962,1824],{"class":176},[159,8964,8965],{"class":180},".\u002Fedit.vue",[159,8967,3048],{"class":176},[159,8969,8970],{"class":161,"line":195},[159,8971,453],{"emptyLinePlaceholder":452},[159,8973,8974],{"class":161,"line":212},[159,8975,453],{"emptyLinePlaceholder":452},[159,8977,8978,8981,8983,8985,8987,8990,8992],{"class":161,"line":233},[159,8979,8980],{"class":463},"Vue",[159,8982,770],{"class":176},[159,8984,7243],{"class":463},[159,8986,770],{"class":176},[159,8988,8989],{"class":463},"productionTip ",[159,8991,1658],{"class":176},[159,8993,276],{"class":275},[159,8995,8996],{"class":161,"line":244},[159,8997,453],{"emptyLinePlaceholder":452},[159,8999,9000,9003,9006,9008,9011,9013,9016],{"class":161,"line":255},[159,9001,9002],{"class":680},"function",[159,9004,9005],{"class":712}," renderIfidExits",[159,9007,716],{"class":176},[159,9009,9010],{"class":2361},"id",[159,9012,225],{"class":176},[159,9014,9015],{"class":2361},"vueRoot",[159,9017,2369],{"class":176},[159,9019,9020,9023,9025,9027,9029,9031,9033,9035,9037,9040,9043,9045],{"class":161,"line":267},[159,9021,9022],{"class":684}," if",[159,9024,716],{"class":172},[159,9026,885],{"class":463},[159,9028,770],{"class":176},[159,9030,4807],{"class":712},[159,9032,716],{"class":172},[159,9034,9010],{"class":463},[159,9036,737],{"class":172},[159,9038,9039],{"class":176},"!==",[159,9041,9042],{"class":176}," null",[159,9044,767],{"class":172},[159,9046,688],{"class":176},[159,9048,9049,9051,9053,9056,9058],{"class":161,"line":279},[159,9050,2566],{"class":684},[159,9052,4787],{"class":176},[159,9054,9055],{"class":712}," Vue",[159,9057,716],{"class":172},[159,9059,688],{"class":176},[159,9061,9062,9065,9067,9070,9073,9075,9077,9079,9081],{"class":161,"line":782},[159,9063,9064],{"class":712}," render",[159,9066,177],{"class":176},[159,9068,9069],{"class":2361}," h",[159,9071,9072],{"class":680}," =>",[159,9074,9069],{"class":712},[159,9076,716],{"class":172},[159,9078,9015],{"class":463},[159,9080,767],{"class":172},[159,9082,304],{"class":176},[159,9084,9085,9087,9089,9091,9094,9096,9098,9101,9103,9105,9107],{"class":161,"line":787},[159,9086,4006],{"class":176},[159,9088,767],{"class":172},[159,9090,770],{"class":176},[159,9092,9093],{"class":712},"$mount",[159,9095,716],{"class":172},[159,9097,475],{"class":176},[159,9099,9100],{"class":180},"#",[159,9102,475],{"class":176},[159,9104,2425],{"class":176},[159,9106,9010],{"class":463},[159,9108,1866],{"class":172},[159,9110,9111],{"class":161,"line":796},[159,9112,4891],{"class":176},[159,9114,9115],{"class":161,"line":804},[159,9116,819],{"class":176},[159,9118,9119],{"class":161,"line":810},[159,9120,453],{"emptyLinePlaceholder":452},[159,9122,9123,9126,9128,9130,9132,9134,9136,9139],{"class":161,"line":816},[159,9124,9125],{"class":712},"renderIfidExits",[159,9127,716],{"class":463},[159,9129,475],{"class":176},[159,9131,8881],{"class":180},[159,9133,475],{"class":176},[159,9135,225],{"class":176},[159,9137,9138],{"class":463},"Add)",[159,9140,779],{"class":176},[159,9142,9143,9145,9147,9149,9152,9154,9156,9159],{"class":161,"line":822},[159,9144,9125],{"class":712},[159,9146,716],{"class":463},[159,9148,475],{"class":176},[159,9150,9151],{"class":180},"edit",[159,9153,475],{"class":176},[159,9155,225],{"class":176},[159,9157,9158],{"class":463},"Edit)",[159,9160,779],{"class":176},[13,9162,9163],{},"前回はAddコンポーネントだけでしたが、今回はEditもあります。さらにこのmain.jsで全てのコンポーネントのレンダーを制御しているので、エントリーポイント のIDが存在すればそこにコンポーネントをレンダリングする。という方法を取っています。",[13,9165,9166,9167,9170],{},"本当はコンポーネントごとにレンダー用のjs（",[55,9168,9169],{},"add.js,edit.js","みたいな）を作成するのですが、面倒だったのでこうしました。",[13,9172,9173,9174,9177,9178,9181,9182,9184],{},"そしてform.vueで編集の場合（",[55,9175,9176],{},"isEdit = true","）に",[55,9179,9180],{},"created()","でAjaxを飛ばしてデータを取得し、",[55,9183,5569],{},"に代入するようします。",[47,9186,9187],{"id":9187},"実際にレンダーしてみる",[13,9189,9190,9191,9194],{},"ビルドをして ",[55,9192,9193],{},"\u002Fdashboard\u002Fvuetest\u002Fedit\u002F{id}"," へアクセスします。IDがあっていればそのデータを取ってきてくれます。",[833,9196],{":src":9197,":width":4947},"'_mix\u002Fsch-2020-10-04-1.14.27-768x527.png'",[833,9199],{":src":9200,":width":4947},"'_mix\u002Fajax-768x764.png'",[13,9202,9203],{},"きちんと画面には前回入力した追加内容が表示されています。開発者ツールでNetworkでAjaxを確認してみましょう。Request Header を確認すると確かに、現在のURLにアクセスしておりさらにXMLHttpRequestで送信されています。Resonseをみてみると",[113,9205,9207],{"className":1080,"code":9206,"language":1083,"meta":120,"style":120},"[\n {\n \"id\":\"1\",\n \"title\":\"\\u30c6\\u30b9\\u30c8\",\n \"created\":\"2020-08-27 00:28:38\",\n \"modified\":\"2020-08-27 00:28:38\"\n }\n]\n",[55,9208,9209,9214,9219,9238,9257,9277,9294,9298],{"__ignoreMap":120},[159,9210,9211],{"class":161,"line":162},[159,9212,9213],{"class":176},"[\n",[159,9215,9216],{"class":161,"line":169},[159,9217,9218],{"class":176}," {\n",[159,9220,9221,9224,9226,9228,9230,9232,9234,9236],{"class":161,"line":184},[159,9222,9223],{"class":176}," \"",[159,9225,9010],{"class":680},[159,9227,1090],{"class":176},[159,9229,177],{"class":176},[159,9231,1090],{"class":176},[159,9233,5926],{"class":180},[159,9235,1090],{"class":176},[159,9237,304],{"class":176},[159,9239,9240,9242,9244,9246,9248,9250,9253,9255],{"class":161,"line":195},[159,9241,9223],{"class":176},[159,9243,173],{"class":680},[159,9245,1090],{"class":176},[159,9247,177],{"class":176},[159,9249,1090],{"class":176},[159,9251,9252],{"class":463},"\\u30c6\\u30b9\\u30c8",[159,9254,1090],{"class":176},[159,9256,304],{"class":176},[159,9258,9259,9261,9264,9266,9268,9270,9273,9275],{"class":161,"line":212},[159,9260,9223],{"class":176},[159,9262,9263],{"class":680},"created",[159,9265,1090],{"class":176},[159,9267,177],{"class":176},[159,9269,1090],{"class":176},[159,9271,9272],{"class":180},"2020-08-27 00:28:38",[159,9274,1090],{"class":176},[159,9276,304],{"class":176},[159,9278,9279,9281,9284,9286,9288,9290,9292],{"class":161,"line":233},[159,9280,9223],{"class":176},[159,9282,9283],{"class":680},"modified",[159,9285,1090],{"class":176},[159,9287,177],{"class":176},[159,9289,1090],{"class":176},[159,9291,9272],{"class":180},[159,9293,1240],{"class":176},[159,9295,9296],{"class":161,"line":244},[159,9297,2010],{"class":176},[159,9299,9300],{"class":161,"line":255},[159,9301,209],{"class":176},[13,9303,9304],{},"このようにデータベースから取ってきた内容がJSONとして渡されているのが確認できます。ちなみに日本語はエンコードされているので、js側でJSON praseを使うことで元の文章に戻すことができます。",[47,9306,9307],{"id":9307},"内容を更新する",[13,9309,9310,9311,2185],{},"編集画面を表示した際の初期表示はできるようになったので、次は内容が書き換えてDBの内容を変更できるようにしましょう。しかし触るのはバックエンドの部分だけです。",[55,9312,8180],{},[113,9314,9316],{"className":6346,"code":9315,"filename":8185,"language":6349,"meta":120,"style":120},"pupublic function edit($id=null){\n\n \u002F\u002F パラメータがない場合は一覧画面へリダイレクト\n if($id==null) return Redirect::to('\u002Fdashboard\u002Fvuetest\u002F')->send();\n\n \u002F\u002F Ajax エンドポイント\n if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){\n $db = Database::connection();\n $db->Execute(\"START TRANSACTION\");\n $result = $db->fetchAll('SELECT * FROM album ORDER BY ID DESC');\n $db->Execute(\"COMMIT\");\n return Core::make('helper\u002Fajax')->sendResult($result);\n }\n\n \u002F\u002Fpost処理(ここを追記)\n if(Request::isPost() == true){\n $title = $this->post('title');\n\n if(empty($title)==false){\n $db = Database::connection();\n $db->executeQuery(\"START TRANSACTION\");\n $db->executeQuery(\n 'UPDATE album SET `title`=?, `modified`=now() WHERE `ID`=?',\n array($title,$id)\n );\n $db->executeQuery(\"COMMIT\");\n Redirect::to('\u002Fdashboard\u002Fvuetest')->send();\n }else{\n Redirect::to('\u002Fdashboard\u002Fvuetest')->send();\n }\n\n }else{\n $this->render('\u002Fdashboard\u002Fvuetest\u002Fadd');\n }\n}\n",[55,9317,9318,9323,9327,9332,9336,9340,9345,9349,9353,9357,9362,9366,9370,9374,9378,9383,9388,9393,9397,9402,9407,9412,9417,9422,9427,9432,9437,9442,9447,9451,9455,9459,9464,9469,9473],{"__ignoreMap":120},[159,9319,9320],{"class":161,"line":162},[159,9321,9322],{},"pupublic function edit($id=null){\n",[159,9324,9325],{"class":161,"line":169},[159,9326,453],{"emptyLinePlaceholder":452},[159,9328,9329],{"class":161,"line":184},[159,9330,9331],{}," \u002F\u002F パラメータがない場合は一覧画面へリダイレクト\n",[159,9333,9334],{"class":161,"line":195},[159,9335,8197],{},[159,9337,9338],{"class":161,"line":212},[159,9339,453],{"emptyLinePlaceholder":452},[159,9341,9342],{"class":161,"line":233},[159,9343,9344],{}," \u002F\u002F Ajax エンドポイント\n",[159,9346,9347],{"class":161,"line":244},[159,9348,8206],{},[159,9350,9351],{"class":161,"line":255},[159,9352,8211],{},[159,9354,9355],{"class":161,"line":267},[159,9356,8216],{},[159,9358,9359],{"class":161,"line":279},[159,9360,9361],{}," $result = $db->fetchAll('SELECT * FROM album ORDER BY ID DESC');\n",[159,9363,9364],{"class":161,"line":782},[159,9365,8226],{},[159,9367,9368],{"class":161,"line":787},[159,9369,8231],{},[159,9371,9372],{"class":161,"line":796},[159,9373,2010],{},[159,9375,9376],{"class":161,"line":804},[159,9377,453],{"emptyLinePlaceholder":452},[159,9379,9380],{"class":161,"line":810},[159,9381,9382],{}," \u002F\u002Fpost処理(ここを追記)\n",[159,9384,9385],{"class":161,"line":816},[159,9386,9387],{}," if(Request::isPost() == true){\n",[159,9389,9390],{"class":161,"line":822},[159,9391,9392],{}," $title = $this->post('title');\n",[159,9394,9395],{"class":161,"line":2996},[159,9396,453],{"emptyLinePlaceholder":452},[159,9398,9399],{"class":161,"line":3012},[159,9400,9401],{}," if(empty($title)==false){\n",[159,9403,9404],{"class":161,"line":3034},[159,9405,9406],{}," $db = Database::connection();\n",[159,9408,9409],{"class":161,"line":3040},[159,9410,9411],{}," $db->executeQuery(\"START TRANSACTION\");\n",[159,9413,9414],{"class":161,"line":3051},[159,9415,9416],{}," $db->executeQuery(\n",[159,9418,9419],{"class":161,"line":3057},[159,9420,9421],{}," 'UPDATE album SET `title`=?, `modified`=now() WHERE `ID`=?',\n",[159,9423,9424],{"class":161,"line":3063},[159,9425,9426],{}," array($title,$id)\n",[159,9428,9429],{"class":161,"line":3069},[159,9430,9431],{}," );\n",[159,9433,9434],{"class":161,"line":3075},[159,9435,9436],{}," $db->executeQuery(\"COMMIT\");\n",[159,9438,9439],{"class":161,"line":3080},[159,9440,9441],{}," Redirect::to('\u002Fdashboard\u002Fvuetest')->send();\n",[159,9443,9444],{"class":161,"line":3089},[159,9445,9446],{}," }else{\n",[159,9448,9449],{"class":161,"line":3094},[159,9450,9441],{},[159,9452,9453],{"class":161,"line":3113},[159,9454,807],{},[159,9456,9457],{"class":161,"line":3118},[159,9458,453],{"emptyLinePlaceholder":452},[159,9460,9461],{"class":161,"line":3131},[159,9462,9463],{}," }else{\n",[159,9465,9466],{"class":161,"line":3136},[159,9467,9468],{}," $this->render('\u002Fdashboard\u002Fvuetest\u002Fadd');\n",[159,9470,9471],{"class":161,"line":3142},[159,9472,2010],{},[159,9474,9475],{"class":161,"line":3152},[159,9476,819],{},[13,9478,9479,9480,9483],{},"新規作成の際に使用される",[55,9481,9482],{},"pupublic function edit"," を一部変更したぐらいです。postがある場合、その値のバリデーションをして変更するIDを元に更新用のSQLを走らせるだけです。",[96,9485,9486],{"id":9486},"実際に変更してみる",[833,9488],{":src":9489,":width":4947},"'_mix\u002Fsch-2020-10-04-13.37.28-768x396.png'",[833,9491],{":src":9492,":width":4947},"'_mix\u002Fsch-2020-10-04-13.38.13.png'",[13,9494,9495],{},"無事、タイトルと編集時間が更新されました。これでCRUDの「Update」が完成しました。",[47,9497,9498],{"id":9498},"一覧画面を作成する",[13,9500,9501],{},"追加・編集の画面は完成しました。次は全ての登録データを一覧で見れる画面を作成していきます。\u002Fdashboard\u002Fvuetest\u002F にアクセスした際に一覧が表示されるようにします。",[96,9503,9504],{"id":9504},"一覧用コンポーネントの作成",[13,9506,9507],{},"一覧コンポーネントをindex.vueとしておきます。一覧画面では以下のような構成にしています。",[113,9509,9512],{"className":618,"code":9510,"filename":9511,"language":621,"meta":120,"style":120},"\u003Ctemplate>\n \u003Cdiv class=\"ccm-dashboard-content-inner\">\n \u003Ch3>アルバム一覧\u003C\u002Fh3>\n \u003Chr>\n\n \u003Ctable class=\"p-package-index table table-hover\">\n \u003Cthead>\n \u003Ctr>\n \u003Cth class=\"c-dol-title\">タイトル\u003C\u002Fth>\n \u003Cth class=\"c-dol-publish-date\">作成日\u003C\u002Fth>\n \u003Cth class=\"c-dol-operation\">操作\u003C\u002Fth>\n \u003C\u002Ftr>\n \u003C\u002Fthead>\n \u003Ctbody>\n \u003Ctr v-for=\"val in list\" :key=\"val.id\" tabindex=\"0\">\n \u003Ctd style=\"vertical-align:middle;\">{{val.title}}\u003C\u002Ftd>\n \u003Ctd style=\"vertical-align:middle;\">{{val.created}}\u003C\u002Ftd>\n \u003Ctd style=\"vertical-align:middle;\">\n \u003Ca :href=\"'\u002Fdashboard\u002Fvuetest\u002Fedit\u002F'+val.id\" type=\"button\" class=\"btn btn-success btn-sm\" style=\"margin-right:10px;\">編集\u003C\u002Fa>\n \u003Cbutton type=\"button\" class=\"btn btn-danger btn-sm\" v-on:click=\"cofirmDelete(val)\">削除\u003C\u002Fbutton>\n \u003C\u002Ftd>\n \u003C\u002Ftr>\n \u003C\u002Ftbody>\n \u003C\u002Ftable>\n\n \u003Cdiv class=\"ccm-dashboard-form-actions-wrapper\">\n \u003Cdiv class=\"ccm-dashboard-form-actions\">\n \u003Ca href=\"\u002Fdashboard\u002Fvuetest\u002Fadd\" class=\"pull-right btn btn-primary\">\n 新規追加\n \u003C\u002Fa>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n name:'index',\n data(){\n return {\n list:[],\n isProcessing:false\n }\n },\n methods:{\n cofirmDelete(obj){\n let result = window.confirm('アルバム：「'+obj.title+'」を本当に削除しますか？この操作は取り消せません。');\n if(result) return this.deleteAlubm(obj.id);\n },\n deleteAlubm(id){\n if(this.isProcessing==false){\n this.isProcessing = true;\n\n $.ajax({\n url:'\u002Fdashboard\u002Fvuetest\u002FdeleteData\u002F',\n type:'POST',\n data:{target:id},\n success: ()=> {\n let targetIndex = this.list.findIndex((ele)=>{\n return ele.ID == id;\n });\n this.list.splice(targetIndex,1);\n this.isProcessing = false;\n },\n error: (xhr, textStatus, errorThrown)=>{\n console.log('Error! ' + textStatus + ' ' + errorThrown);\n }\n })\n }\n },\n },\n created(){\n $.ajax({\n url:'\u002Fdashboard\u002Fvuetest\u002FloadData',\n type:'GET',\n success: (data)=> {\n this.list = JSON.parse(data); \u002F\u002F returns array\n },\n error: (xhr, textStatus, errorThrown)=>{\n console.error('Error! ' + textStatus + ' ' + errorThrown);\n }\n })\n }\n}\n\u003C\u002Fscript>\n","index.vue",[55,9513,9514,9522,9541,9558,9567,9571,9591,9600,9610,9639,9667,9695,9704,9712,9721,9765,9795,9822,9840,9902,9952,9961,9969,9977,9985,9989,10008,10027,10057,10062,10070,10078,10086,10094,10102,10106,10114,10122,10136,10143,10149,10161,10172,10176,10181,10189,10202,10251,10284,10290,10302,10325,10340,10345,10360,10377,10394,10411,10426,10460,10481,10491,10517,10530,10536,10566,10604,10610,10618,10623,10628,10633,10641,10654,10670,10687,10706,10734,10739,10765,10801,10806,10813,10818,10823],{"__ignoreMap":120},[159,9515,9516,9518,9520],{"class":161,"line":162},[159,9517,628],{"class":176},[159,9519,631],{"class":172},[159,9521,634],{"class":176},[159,9523,9524,9526,9528,9530,9532,9534,9537,9539],{"class":161,"line":169},[159,9525,639],{"class":176},[159,9527,408],{"class":172},[159,9529,3571],{"class":680},[159,9531,1658],{"class":176},[159,9533,1090],{"class":176},[159,9535,9536],{"class":180},"ccm-dashboard-content-inner",[159,9538,1090],{"class":176},[159,9540,634],{"class":176},[159,9542,9543,9545,9547,9549,9552,9554,9556],{"class":161,"line":184},[159,9544,1649],{"class":176},[159,9546,96],{"class":172},[159,9548,1676],{"class":176},[159,9550,9551],{"class":463},"アルバム一覧",[159,9553,662],{"class":176},[159,9555,96],{"class":172},[159,9557,634],{"class":176},[159,9559,9560,9562,9565],{"class":161,"line":195},[159,9561,1649],{"class":176},[159,9563,9564],{"class":172},"hr",[159,9566,634],{"class":176},[159,9568,9569],{"class":161,"line":212},[159,9570,453],{"emptyLinePlaceholder":452},[159,9572,9573,9575,9578,9580,9582,9584,9587,9589],{"class":161,"line":233},[159,9574,1649],{"class":176},[159,9576,9577],{"class":172},"table",[159,9579,3571],{"class":680},[159,9581,1658],{"class":176},[159,9583,1090],{"class":176},[159,9585,9586],{"class":180},"p-package-index table table-hover",[159,9588,1090],{"class":176},[159,9590,634],{"class":176},[159,9592,9593,9595,9598],{"class":161,"line":244},[159,9594,1720],{"class":176},[159,9596,9597],{"class":172},"thead",[159,9599,634],{"class":176},[159,9601,9602,9605,9608],{"class":161,"line":255},[159,9603,9604],{"class":176}," \u003C",[159,9606,9607],{"class":172},"tr",[159,9609,634],{"class":176},[159,9611,9612,9615,9618,9620,9622,9624,9627,9629,9631,9633,9635,9637],{"class":161,"line":267},[159,9613,9614],{"class":176}," \u003C",[159,9616,9617],{"class":172},"th",[159,9619,3571],{"class":680},[159,9621,1658],{"class":176},[159,9623,1090],{"class":176},[159,9625,9626],{"class":180},"c-dol-title",[159,9628,1090],{"class":176},[159,9630,1676],{"class":176},[159,9632,6864],{"class":463},[159,9634,662],{"class":176},[159,9636,9617],{"class":172},[159,9638,634],{"class":176},[159,9640,9641,9643,9645,9647,9649,9651,9654,9656,9658,9661,9663,9665],{"class":161,"line":279},[159,9642,9614],{"class":176},[159,9644,9617],{"class":172},[159,9646,3571],{"class":680},[159,9648,1658],{"class":176},[159,9650,1090],{"class":176},[159,9652,9653],{"class":180},"c-dol-publish-date",[159,9655,1090],{"class":176},[159,9657,1676],{"class":176},[159,9659,9660],{"class":463},"作成日",[159,9662,662],{"class":176},[159,9664,9617],{"class":172},[159,9666,634],{"class":176},[159,9668,9669,9671,9673,9675,9677,9679,9682,9684,9686,9689,9691,9693],{"class":161,"line":782},[159,9670,9614],{"class":176},[159,9672,9617],{"class":172},[159,9674,3571],{"class":680},[159,9676,1658],{"class":176},[159,9678,1090],{"class":176},[159,9680,9681],{"class":180},"c-dol-operation",[159,9683,1090],{"class":176},[159,9685,1676],{"class":176},[159,9687,9688],{"class":463},"操作",[159,9690,662],{"class":176},[159,9692,9617],{"class":172},[159,9694,634],{"class":176},[159,9696,9697,9700,9702],{"class":161,"line":787},[159,9698,9699],{"class":176}," \u003C\u002F",[159,9701,9607],{"class":172},[159,9703,634],{"class":176},[159,9705,9706,9708,9710],{"class":161,"line":796},[159,9707,1745],{"class":176},[159,9709,9597],{"class":172},[159,9711,634],{"class":176},[159,9713,9714,9716,9719],{"class":161,"line":804},[159,9715,1720],{"class":176},[159,9717,9718],{"class":172},"tbody",[159,9720,634],{"class":176},[159,9722,9723,9725,9727,9730,9732,9734,9737,9739,9742,9744,9746,9749,9751,9754,9756,9758,9761,9763],{"class":161,"line":810},[159,9724,9604],{"class":176},[159,9726,9607],{"class":172},[159,9728,9729],{"class":680}," v-for",[159,9731,1658],{"class":176},[159,9733,1090],{"class":176},[159,9735,9736],{"class":180},"val in list",[159,9738,1090],{"class":176},[159,9740,9741],{"class":680}," :key",[159,9743,1658],{"class":176},[159,9745,1090],{"class":176},[159,9747,9748],{"class":180},"val.id",[159,9750,1090],{"class":176},[159,9752,9753],{"class":680}," tabindex",[159,9755,1658],{"class":176},[159,9757,1090],{"class":176},[159,9759,9760],{"class":180},"0",[159,9762,1090],{"class":176},[159,9764,634],{"class":176},[159,9766,9767,9769,9772,9775,9777,9779,9782,9784,9786,9789,9791,9793],{"class":161,"line":816},[159,9768,9614],{"class":176},[159,9770,9771],{"class":172},"td",[159,9773,9774],{"class":680}," style",[159,9776,1658],{"class":176},[159,9778,1090],{"class":176},[159,9780,9781],{"class":180},"vertical-align:middle;",[159,9783,1090],{"class":176},[159,9785,1676],{"class":176},[159,9787,9788],{"class":463},"{{val.title}}",[159,9790,662],{"class":176},[159,9792,9771],{"class":172},[159,9794,634],{"class":176},[159,9796,9797,9799,9801,9803,9805,9807,9809,9811,9813,9816,9818,9820],{"class":161,"line":822},[159,9798,9614],{"class":176},[159,9800,9771],{"class":172},[159,9802,9774],{"class":680},[159,9804,1658],{"class":176},[159,9806,1090],{"class":176},[159,9808,9781],{"class":180},[159,9810,1090],{"class":176},[159,9812,1676],{"class":176},[159,9814,9815],{"class":463},"{{val.created}}",[159,9817,662],{"class":176},[159,9819,9771],{"class":172},[159,9821,634],{"class":176},[159,9823,9824,9826,9828,9830,9832,9834,9836,9838],{"class":161,"line":2996},[159,9825,9614],{"class":176},[159,9827,9771],{"class":172},[159,9829,9774],{"class":680},[159,9831,1658],{"class":176},[159,9833,1090],{"class":176},[159,9835,9781],{"class":180},[159,9837,1090],{"class":176},[159,9839,634],{"class":176},[159,9841,9842,9845,9847,9850,9852,9854,9857,9859,9861,9863,9865,9867,9869,9871,9873,9875,9878,9880,9882,9884,9886,9889,9891,9893,9896,9898,9900],{"class":161,"line":3012},[159,9843,9844],{"class":176}," \u003C",[159,9846,872],{"class":172},[159,9848,9849],{"class":680}," :href",[159,9851,1658],{"class":176},[159,9853,1090],{"class":176},[159,9855,9856],{"class":180},"'\u002Fdashboard\u002Fvuetest\u002Fedit\u002F'+val.id",[159,9858,1090],{"class":176},[159,9860,2243],{"class":680},[159,9862,1658],{"class":176},[159,9864,1090],{"class":176},[159,9866,2279],{"class":180},[159,9868,1090],{"class":176},[159,9870,3571],{"class":680},[159,9872,1658],{"class":176},[159,9874,1090],{"class":176},[159,9876,9877],{"class":180},"btn btn-success btn-sm",[159,9879,1090],{"class":176},[159,9881,9774],{"class":680},[159,9883,1658],{"class":176},[159,9885,1090],{"class":176},[159,9887,9888],{"class":180},"margin-right:10px;",[159,9890,1090],{"class":176},[159,9892,1676],{"class":176},[159,9894,9895],{"class":463},"編集",[159,9897,662],{"class":176},[159,9899,872],{"class":172},[159,9901,634],{"class":176},[159,9903,9904,9906,9908,9910,9912,9914,9916,9918,9920,9922,9924,9927,9929,9932,9934,9936,9939,9941,9943,9946,9948,9950],{"class":161,"line":3034},[159,9905,9844],{"class":176},[159,9907,2279],{"class":172},[159,9909,2243],{"class":680},[159,9911,1658],{"class":176},[159,9913,1090],{"class":176},[159,9915,2279],{"class":180},[159,9917,1090],{"class":176},[159,9919,3571],{"class":680},[159,9921,1658],{"class":176},[159,9923,1090],{"class":176},[159,9925,9926],{"class":180},"btn btn-danger btn-sm",[159,9928,1090],{"class":176},[159,9930,9931],{"class":680}," v-on:click",[159,9933,1658],{"class":176},[159,9935,1090],{"class":176},[159,9937,9938],{"class":180},"cofirmDelete(val)",[159,9940,1090],{"class":176},[159,9942,1676],{"class":176},[159,9944,9945],{"class":463},"削除",[159,9947,662],{"class":176},[159,9949,2279],{"class":172},[159,9951,634],{"class":176},[159,9953,9954,9957,9959],{"class":161,"line":3040},[159,9955,9956],{"class":176}," \u003C\u002F",[159,9958,9771],{"class":172},[159,9960,634],{"class":176},[159,9962,9963,9965,9967],{"class":161,"line":3051},[159,9964,9699],{"class":176},[159,9966,9607],{"class":172},[159,9968,634],{"class":176},[159,9970,9971,9973,9975],{"class":161,"line":3057},[159,9972,1745],{"class":176},[159,9974,9718],{"class":172},[159,9976,634],{"class":176},[159,9978,9979,9981,9983],{"class":161,"line":3063},[159,9980,1754],{"class":176},[159,9982,9577],{"class":172},[159,9984,634],{"class":176},[159,9986,9987],{"class":161,"line":3069},[159,9988,453],{"emptyLinePlaceholder":452},[159,9990,9991,9993,9995,9997,9999,10001,10004,10006],{"class":161,"line":3075},[159,9992,1649],{"class":176},[159,9994,408],{"class":172},[159,9996,3571],{"class":680},[159,9998,1658],{"class":176},[159,10000,1090],{"class":176},[159,10002,10003],{"class":180},"ccm-dashboard-form-actions-wrapper",[159,10005,1090],{"class":176},[159,10007,634],{"class":176},[159,10009,10010,10012,10014,10016,10018,10020,10023,10025],{"class":161,"line":3080},[159,10011,1720],{"class":176},[159,10013,408],{"class":172},[159,10015,3571],{"class":680},[159,10017,1658],{"class":176},[159,10019,1090],{"class":176},[159,10021,10022],{"class":180},"ccm-dashboard-form-actions",[159,10024,1090],{"class":176},[159,10026,634],{"class":176},[159,10028,10029,10031,10033,10035,10037,10039,10042,10044,10046,10048,10050,10053,10055],{"class":161,"line":3089},[159,10030,9604],{"class":176},[159,10032,872],{"class":172},[159,10034,3433],{"class":680},[159,10036,1658],{"class":176},[159,10038,1090],{"class":176},[159,10040,10041],{"class":180},"\u002Fdashboard\u002Fvuetest\u002Fadd",[159,10043,1090],{"class":176},[159,10045,3571],{"class":680},[159,10047,1658],{"class":176},[159,10049,1090],{"class":176},[159,10051,10052],{"class":180},"pull-right btn btn-primary",[159,10054,1090],{"class":176},[159,10056,634],{"class":176},[159,10058,10059],{"class":161,"line":3094},[159,10060,10061],{"class":463}," 新規追加\n",[159,10063,10064,10066,10068],{"class":161,"line":3113},[159,10065,9699],{"class":176},[159,10067,872],{"class":172},[159,10069,634],{"class":176},[159,10071,10072,10074,10076],{"class":161,"line":3118},[159,10073,1745],{"class":176},[159,10075,408],{"class":172},[159,10077,634],{"class":176},[159,10079,10080,10082,10084],{"class":161,"line":3131},[159,10081,1754],{"class":176},[159,10083,408],{"class":172},[159,10085,634],{"class":176},[159,10087,10088,10090,10092],{"class":161,"line":3136},[159,10089,653],{"class":176},[159,10091,408],{"class":172},[159,10093,634],{"class":176},[159,10095,10096,10098,10100],{"class":161,"line":3142},[159,10097,662],{"class":176},[159,10099,631],{"class":172},[159,10101,634],{"class":176},[159,10103,10104],{"class":161,"line":3152},[159,10105,453],{"emptyLinePlaceholder":452},[159,10107,10108,10110,10112],{"class":161,"line":3165},[159,10109,628],{"class":176},[159,10111,673],{"class":172},[159,10113,634],{"class":176},[159,10115,10116,10118,10120],{"class":161,"line":3180},[159,10117,681],{"class":684},[159,10119,685],{"class":684},[159,10121,793],{"class":176},[159,10123,10124,10126,10128,10130,10132,10134],{"class":161,"line":3188},[159,10125,693],{"class":172},[159,10127,177],{"class":176},[159,10129,475],{"class":176},[159,10131,258],{"class":180},[159,10133,475],{"class":176},[159,10135,304],{"class":176},[159,10137,10138,10141],{"class":161,"line":3194},[159,10139,10140],{"class":172}," data",[159,10142,4744],{"class":176},[159,10144,10145,10147],{"class":161,"line":7956},[159,10146,790],{"class":684},[159,10148,793],{"class":176},[159,10150,10151,10154,10156,10159],{"class":161,"line":7961},[159,10152,10153],{"class":172}," list",[159,10155,177],{"class":176},[159,10157,10158],{"class":172},"[]",[159,10160,304],{"class":176},[159,10162,10164,10167,10169],{"class":161,"line":10163},42,[159,10165,10166],{"class":172}," isProcessing",[159,10168,177],{"class":176},[159,10170,10171],{"class":275},"false\n",[159,10173,10174],{"class":161,"line":4},[159,10175,807],{"class":176},[159,10177,10179],{"class":161,"line":10178},44,[159,10180,813],{"class":176},[159,10182,10184,10187],{"class":161,"line":10183},45,[159,10185,10186],{"class":172}," methods",[159,10188,7133],{"class":176},[159,10190,10192,10195,10197,10200],{"class":161,"line":10191},46,[159,10193,10194],{"class":172}," cofirmDelete",[159,10196,716],{"class":176},[159,10198,10199],{"class":2361},"obj",[159,10201,2369],{"class":176},[159,10203,10205,10208,10211,10213,10216,10218,10221,10223,10225,10228,10230,10232,10234,10236,10238,10240,10242,10245,10247,10249],{"class":161,"line":10204},47,[159,10206,10207],{"class":680}," let",[159,10209,10210],{"class":463}," result",[159,10212,750],{"class":176},[159,10214,10215],{"class":463}," window",[159,10217,770],{"class":176},[159,10219,10220],{"class":712},"confirm",[159,10222,716],{"class":172},[159,10224,475],{"class":176},[159,10226,10227],{"class":180},"アルバム：「",[159,10229,475],{"class":176},[159,10231,2425],{"class":176},[159,10233,10199],{"class":463},[159,10235,770],{"class":176},[159,10237,173],{"class":463},[159,10239,2425],{"class":176},[159,10241,475],{"class":176},[159,10243,10244],{"class":180},"」を本当に削除しますか？この操作は取り消せません。",[159,10246,475],{"class":176},[159,10248,767],{"class":172},[159,10250,779],{"class":176},[159,10252,10254,10257,10259,10262,10264,10267,10269,10272,10274,10276,10278,10280,10282],{"class":161,"line":10253},48,[159,10255,10256],{"class":684}," if",[159,10258,716],{"class":172},[159,10260,10261],{"class":463},"result",[159,10263,737],{"class":172},[159,10265,10266],{"class":684},"return",[159,10268,4790],{"class":176},[159,10270,10271],{"class":712},"deleteAlubm",[159,10273,716],{"class":172},[159,10275,10199],{"class":463},[159,10277,770],{"class":176},[159,10279,9010],{"class":463},[159,10281,767],{"class":172},[159,10283,779],{"class":176},[159,10285,10287],{"class":161,"line":10286},49,[159,10288,10289],{"class":176}," },\n",[159,10291,10293,10296,10298,10300],{"class":161,"line":10292},50,[159,10294,10295],{"class":172}," deleteAlubm",[159,10297,716],{"class":176},[159,10299,9010],{"class":2361},[159,10301,2369],{"class":176},[159,10303,10305,10307,10309,10312,10315,10318,10321,10323],{"class":161,"line":10304},51,[159,10306,10256],{"class":684},[159,10308,716],{"class":172},[159,10310,10311],{"class":176},"this.",[159,10313,10314],{"class":463},"isProcessing",[159,10316,10317],{"class":176},"==",[159,10319,10320],{"class":275},"false",[159,10322,767],{"class":172},[159,10324,688],{"class":176},[159,10326,10328,10331,10333,10335,10338],{"class":161,"line":10327},52,[159,10329,10330],{"class":176}," this.",[159,10332,10314],{"class":463},[159,10334,750],{"class":176},[159,10336,10337],{"class":275}," true",[159,10339,779],{"class":176},[159,10341,10343],{"class":161,"line":10342},53,[159,10344,453],{"emptyLinePlaceholder":452},[159,10346,10348,10351,10353,10356,10358],{"class":161,"line":10347},54,[159,10349,10350],{"class":463}," $",[159,10352,770],{"class":176},[159,10354,10355],{"class":712},"ajax",[159,10357,716],{"class":172},[159,10359,688],{"class":176},[159,10361,10363,10366,10368,10370,10373,10375],{"class":161,"line":10362},55,[159,10364,10365],{"class":172}," url",[159,10367,177],{"class":176},[159,10369,475],{"class":176},[159,10371,10372],{"class":180},"\u002Fdashboard\u002Fvuetest\u002FdeleteData\u002F",[159,10374,475],{"class":176},[159,10376,304],{"class":176},[159,10378,10380,10383,10385,10387,10390,10392],{"class":161,"line":10379},56,[159,10381,10382],{"class":172}," type",[159,10384,177],{"class":176},[159,10386,475],{"class":176},[159,10388,10389],{"class":180},"POST",[159,10391,475],{"class":176},[159,10393,304],{"class":176},[159,10395,10397,10400,10402,10405,10407,10409],{"class":161,"line":10396},57,[159,10398,10399],{"class":172}," data",[159,10401,8893],{"class":176},[159,10403,10404],{"class":172},"target",[159,10406,177],{"class":176},[159,10408,9010],{"class":463},[159,10410,3964],{"class":176},[159,10412,10414,10417,10419,10422,10424],{"class":161,"line":10413},58,[159,10415,10416],{"class":712}," success",[159,10418,177],{"class":176},[159,10420,10421],{"class":176}," ()",[159,10423,2559],{"class":680},[159,10425,793],{"class":176},[159,10427,10429,10432,10435,10437,10439,10442,10444,10447,10449,10451,10454,10456,10458],{"class":161,"line":10428},59,[159,10430,10431],{"class":680}," let",[159,10433,10434],{"class":463}," targetIndex",[159,10436,750],{"class":176},[159,10438,4790],{"class":176},[159,10440,10441],{"class":463},"list",[159,10443,770],{"class":176},[159,10445,10446],{"class":712},"findIndex",[159,10448,716],{"class":172},[159,10450,716],{"class":176},[159,10452,10453],{"class":2361},"ele",[159,10455,767],{"class":176},[159,10457,2559],{"class":680},[159,10459,688],{"class":176},[159,10461,10463,10466,10469,10471,10474,10477,10479],{"class":161,"line":10462},60,[159,10464,10465],{"class":684}," return",[159,10467,10468],{"class":463}," ele",[159,10470,770],{"class":176},[159,10472,10473],{"class":463},"ID",[159,10475,10476],{"class":176}," ==",[159,10478,1725],{"class":463},[159,10480,779],{"class":176},[159,10482,10484,10487,10489],{"class":161,"line":10483},61,[159,10485,10486],{"class":176}," }",[159,10488,767],{"class":172},[159,10490,779],{"class":176},[159,10492,10494,10497,10499,10501,10504,10506,10509,10511,10513,10515],{"class":161,"line":10493},62,[159,10495,10496],{"class":176}," this.",[159,10498,10441],{"class":463},[159,10500,770],{"class":176},[159,10502,10503],{"class":712},"splice",[159,10505,716],{"class":172},[159,10507,10508],{"class":463},"targetIndex",[159,10510,225],{"class":176},[159,10512,5926],{"class":263},[159,10514,767],{"class":172},[159,10516,779],{"class":176},[159,10518,10520,10522,10524,10526,10528],{"class":161,"line":10519},63,[159,10521,10496],{"class":176},[159,10523,10314],{"class":463},[159,10525,750],{"class":176},[159,10527,3028],{"class":275},[159,10529,779],{"class":176},[159,10531,10533],{"class":161,"line":10532},64,[159,10534,10535],{"class":176}," },\n",[159,10537,10539,10542,10544,10547,10550,10552,10555,10557,10560,10562,10564],{"class":161,"line":10538},65,[159,10540,10541],{"class":712}," error",[159,10543,177],{"class":176},[159,10545,10546],{"class":176}," (",[159,10548,10549],{"class":2361},"xhr",[159,10551,225],{"class":176},[159,10553,10554],{"class":2361}," textStatus",[159,10556,225],{"class":176},[159,10558,10559],{"class":2361}," errorThrown",[159,10561,767],{"class":176},[159,10563,2559],{"class":680},[159,10565,688],{"class":176},[159,10567,10569,10572,10574,10576,10578,10580,10583,10585,10588,10590,10592,10594,10596,10598,10600,10602],{"class":161,"line":10568},66,[159,10570,10571],{"class":463}," console",[159,10573,770],{"class":176},[159,10575,7470],{"class":712},[159,10577,716],{"class":172},[159,10579,475],{"class":176},[159,10581,10582],{"class":180},"Error! ",[159,10584,475],{"class":176},[159,10586,10587],{"class":176}," +",[159,10589,10554],{"class":463},[159,10591,10587],{"class":176},[159,10593,1824],{"class":176},[159,10595,1824],{"class":176},[159,10597,10587],{"class":176},[159,10599,10559],{"class":463},[159,10601,767],{"class":172},[159,10603,779],{"class":176},[159,10605,10607],{"class":161,"line":10606},67,[159,10608,10609],{"class":176}," }\n",[159,10611,10613,10616],{"class":161,"line":10612},68,[159,10614,10615],{"class":176}," }",[159,10617,1866],{"class":172},[159,10619,10621],{"class":161,"line":10620},69,[159,10622,8719],{"class":176},[159,10624,10626],{"class":161,"line":10625},70,[159,10627,10289],{"class":176},[159,10629,10631],{"class":161,"line":10630},71,[159,10632,813],{"class":176},[159,10634,10636,10639],{"class":161,"line":10635},72,[159,10637,10638],{"class":172}," created",[159,10640,4744],{"class":176},[159,10642,10644,10646,10648,10650,10652],{"class":161,"line":10643},73,[159,10645,2402],{"class":463},[159,10647,770],{"class":176},[159,10649,10355],{"class":712},[159,10651,716],{"class":172},[159,10653,688],{"class":176},[159,10655,10657,10660,10662,10664,10666,10668],{"class":161,"line":10656},74,[159,10658,10659],{"class":172}," url",[159,10661,177],{"class":176},[159,10663,475],{"class":176},[159,10665,8271],{"class":180},[159,10667,475],{"class":176},[159,10669,304],{"class":176},[159,10671,10673,10676,10678,10680,10683,10685],{"class":161,"line":10672},75,[159,10674,10675],{"class":172}," type",[159,10677,177],{"class":176},[159,10679,475],{"class":176},[159,10681,10682],{"class":180},"GET",[159,10684,475],{"class":176},[159,10686,304],{"class":176},[159,10688,10690,10693,10695,10697,10700,10702,10704],{"class":161,"line":10689},76,[159,10691,10692],{"class":712}," success",[159,10694,177],{"class":176},[159,10696,10546],{"class":176},[159,10698,10699],{"class":2361},"data",[159,10701,767],{"class":176},[159,10703,2559],{"class":680},[159,10705,793],{"class":176},[159,10707,10709,10711,10713,10715,10718,10720,10723,10725,10727,10729,10731],{"class":161,"line":10708},77,[159,10710,10330],{"class":176},[159,10712,10441],{"class":463},[159,10714,750],{"class":176},[159,10716,10717],{"class":463}," JSON",[159,10719,770],{"class":176},[159,10721,10722],{"class":712},"parse",[159,10724,716],{"class":172},[159,10726,10699],{"class":463},[159,10728,767],{"class":172},[159,10730,2441],{"class":176},[159,10732,10733],{"class":1907}," \u002F\u002F returns array\n",[159,10735,10737],{"class":161,"line":10736},78,[159,10738,3938],{"class":176},[159,10740,10742,10745,10747,10749,10751,10753,10755,10757,10759,10761,10763],{"class":161,"line":10741},79,[159,10743,10744],{"class":712}," error",[159,10746,177],{"class":176},[159,10748,10546],{"class":176},[159,10750,10549],{"class":2361},[159,10752,225],{"class":176},[159,10754,10554],{"class":2361},[159,10756,225],{"class":176},[159,10758,10559],{"class":2361},[159,10760,767],{"class":176},[159,10762,2559],{"class":680},[159,10764,688],{"class":176},[159,10766,10768,10771,10773,10775,10777,10779,10781,10783,10785,10787,10789,10791,10793,10795,10797,10799],{"class":161,"line":10767},80,[159,10769,10770],{"class":463}," console",[159,10772,770],{"class":176},[159,10774,7475],{"class":712},[159,10776,716],{"class":172},[159,10778,475],{"class":176},[159,10780,10582],{"class":180},[159,10782,475],{"class":176},[159,10784,10587],{"class":176},[159,10786,10554],{"class":463},[159,10788,10587],{"class":176},[159,10790,1824],{"class":176},[159,10792,1824],{"class":176},[159,10794,10587],{"class":176},[159,10796,10559],{"class":463},[159,10798,767],{"class":172},[159,10800,779],{"class":176},[159,10802,10804],{"class":161,"line":10803},81,[159,10805,8719],{"class":176},[159,10807,10809,10811],{"class":161,"line":10808},82,[159,10810,7438],{"class":176},[159,10812,1866],{"class":172},[159,10814,10816],{"class":161,"line":10815},83,[159,10817,2010],{"class":176},[159,10819,10821],{"class":161,"line":10820},84,[159,10822,819],{"class":176},[159,10824,10826,10828,10830],{"class":161,"line":10825},85,[159,10827,662],{"class":176},[159,10829,673],{"class":172},[159,10831,634],{"class":176},[13,10833,10834],{},"レンダリングされる際は以下のような処理で一覧画面が表示されます。",[25,10836,10837,10840,10843],{},[28,10838,10839],{},"createdでDB上の情報を取ってくるAjaxをエンドポイントに飛ばす。",[28,10841,10842],{},"取得したデータをdata()のlistに挿入。",[28,10844,10845],{},"v-forでlist分 の行を表示する。",[13,10847,10848],{},"これをレンダーすると以下のようになります。",[833,10850],{":src":10851,":width":4947},"'_mix\u002Fsch-2020-10-04-14.40.28-768x285.png'",[13,10853,10854],{},"右側の「操作」で、「編集」でそのアルバムデータの編集画面へ移動、「削除」ではそのデータを削除するAjaxを飛ばします。また、「新規追加」では新規追加画面へ移動します。この画面があれば一通りのデータ操作がブラウザ画面からできるようになります。",[96,10856,10858],{"id":10857},"ロード用削除用エンドポイントを作成","ロード用・削除用エンドポイントを作成",[13,10860,10861,10863],{},[55,10862,8180],{}," コントローラーでは一覧データ・対象のIDを削除するAjaxエンドポイントを作成します。",[113,10865,10867],{"className":6346,"code":10866,"filename":8185,"language":6349,"meta":120,"style":120},"public function view() {\n $this->render('\u002Fdashboard\u002Fvuetest\u002Fview');\n}\n\n\u002F\u002F ロード用のエンドポイント\npublic function loadData() {\n if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){\n $db = Database::connection();\n $db->Execute(\"START TRANSACTION\");\n $result = $db->fetchAll('SELECT * FROM album ORDER BY ID DESC');\n $db->Execute(\"COMMIT\");\n return Core::make('helper\u002Fajax')->sendResult($result);\n }else{\n $this->replace('\u002Fpage_not_found');\n }\n}\n\n\u002F\u002F 削除エンドポイント\npublic function deleteData(){\n $targetID=$this->post('target');\n if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' && !is_null($targetID)){\n $db = Database::connection();\n $db->Execute(\"START TRANSACTION\");\n $db->executeQuery('DELETE FROM album WHERE `ID`=?',array($targetID));\n $db->Execute(\"COMMIT\");\n }else{\n $this->replace('\u002Fpage_not_found');\n }\n}\n",[55,10868,10869,10874,10879,10883,10887,10892,10897,10902,10906,10910,10914,10918,10922,10926,10931,10935,10939,10943,10948,10953,10958,10963,10967,10971,10976,10980,10984,10988,10992],{"__ignoreMap":120},[159,10870,10871],{"class":161,"line":162},[159,10872,10873],{},"public function view() {\n",[159,10875,10876],{"class":161,"line":169},[159,10877,10878],{}," $this->render('\u002Fdashboard\u002Fvuetest\u002Fview');\n",[159,10880,10881],{"class":161,"line":184},[159,10882,819],{},[159,10884,10885],{"class":161,"line":195},[159,10886,453],{"emptyLinePlaceholder":452},[159,10888,10889],{"class":161,"line":212},[159,10890,10891],{},"\u002F\u002F ロード用のエンドポイント\n",[159,10893,10894],{"class":161,"line":233},[159,10895,10896],{},"public function loadData() {\n",[159,10898,10899],{"class":161,"line":244},[159,10900,10901],{}," if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){\n",[159,10903,10904],{"class":161,"line":255},[159,10905,8211],{},[159,10907,10908],{"class":161,"line":267},[159,10909,8216],{},[159,10911,10912],{"class":161,"line":279},[159,10913,9361],{},[159,10915,10916],{"class":161,"line":782},[159,10917,8226],{},[159,10919,10920],{"class":161,"line":787},[159,10921,8231],{},[159,10923,10924],{"class":161,"line":796},[159,10925,9463],{},[159,10927,10928],{"class":161,"line":804},[159,10929,10930],{}," $this->replace('\u002Fpage_not_found');\n",[159,10932,10933],{"class":161,"line":810},[159,10934,2010],{},[159,10936,10937],{"class":161,"line":816},[159,10938,819],{},[159,10940,10941],{"class":161,"line":822},[159,10942,453],{"emptyLinePlaceholder":452},[159,10944,10945],{"class":161,"line":2996},[159,10946,10947],{},"\u002F\u002F 削除エンドポイント\n",[159,10949,10950],{"class":161,"line":3012},[159,10951,10952],{},"public function deleteData(){\n",[159,10954,10955],{"class":161,"line":3034},[159,10956,10957],{}," $targetID=$this->post('target');\n",[159,10959,10960],{"class":161,"line":3040},[159,10961,10962],{}," if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' && !is_null($targetID)){\n",[159,10964,10965],{"class":161,"line":3051},[159,10966,8211],{},[159,10968,10969],{"class":161,"line":3057},[159,10970,8216],{},[159,10972,10973],{"class":161,"line":3063},[159,10974,10975],{}," $db->executeQuery('DELETE FROM album WHERE `ID`=?',array($targetID));\n",[159,10977,10978],{"class":161,"line":3069},[159,10979,8226],{},[159,10981,10982],{"class":161,"line":3075},[159,10983,9463],{},[159,10985,10986],{"class":161,"line":3080},[159,10987,10930],{},[159,10989,10990],{"class":161,"line":3089},[159,10991,2010],{},[159,10993,10994],{"class":161,"line":3094},[159,10995,819],{},[96,10997,10999],{"id":10998},"エントリーポイント-を作成","エントリーポイント を作成",[13,11001,11002],{},"上記のコンポーネントをレンダリングするために編集・追加の時のように、一覧用ページにレンダーできるように設定をします。",[13,11004,11005,11008],{},[55,11006,11007],{},"packages\u002Fvuetest\u002Fsingle_pages\u002Fdashboard\u002Fvuetest\u002Fview.php"," に以下のようにエントリーポイントを記述します。",[113,11010,11013],{"className":6346,"code":11011,"filename":11012,"language":6349,"meta":120,"style":120},"\u003C?php\ndefined('C5_EXECUTE') or die('Access Denied.');\n?>\n\n\u003Cdiv id=\"index\">\u003C\u002Fdiv>\n","view.php",[55,11014,11015,11019,11023,11027,11031],{"__ignoreMap":120},[159,11016,11017],{"class":161,"line":162},[159,11018,6356],{},[159,11020,11021],{"class":161,"line":169},[159,11022,8769],{},[159,11024,11025],{"class":161,"line":184},[159,11026,8774],{},[159,11028,11029],{"class":161,"line":195},[159,11030,453],{"emptyLinePlaceholder":452},[159,11032,11033],{"class":161,"line":212},[159,11034,11035],{},"\u003Cdiv id=\"index\">\u003C\u002Fdiv>\n",[13,11037,11038],{},"そしてmain.jsでは",[113,11040,11042],{"className":1805,"code":11041,"filename":982,"language":1808,"meta":120,"style":120},"import Vue from 'vue'\nimport Index from '.\u002Findex.vue'\nimport Add from '.\u002Fadd.vue'\nimport Edit from '.\u002Fedit.vue'\n\n\nVue.config.productionTip = false\n\nfunction renderIfidExits(id,vueRoot){\n if(document.getElementById(id) !== null){\n return new Vue({\n render: h => h(vueRoot),\n }).$mount('#'+id)\n }\n}\n\nrenderIfidExits('index',Index);\nrenderIfidExits('add',Add);\nrenderIfidExits('edit',Edit);\n",[55,11043,11044,11058,11074,11088,11102,11106,11110,11126,11130,11146,11172,11184,11204,11228,11232,11236,11240,11259,11277],{"__ignoreMap":120},[159,11045,11046,11048,11050,11052,11054,11056],{"class":161,"line":162},[159,11047,1815],{"class":684},[159,11049,8927],{"class":463},[159,11051,1821],{"class":684},[159,11053,1824],{"class":176},[159,11055,621],{"class":180},[159,11057,3048],{"class":176},[159,11059,11060,11062,11065,11067,11069,11072],{"class":161,"line":169},[159,11061,1815],{"class":684},[159,11063,11064],{"class":463}," Index ",[159,11066,1821],{"class":684},[159,11068,1824],{"class":176},[159,11070,11071],{"class":180},".\u002Findex.vue",[159,11073,3048],{"class":176},[159,11075,11076,11078,11080,11082,11084,11086],{"class":161,"line":184},[159,11077,1815],{"class":684},[159,11079,8942],{"class":463},[159,11081,1821],{"class":684},[159,11083,1824],{"class":176},[159,11085,8949],{"class":180},[159,11087,3048],{"class":176},[159,11089,11090,11092,11094,11096,11098,11100],{"class":161,"line":195},[159,11091,1815],{"class":684},[159,11093,8958],{"class":463},[159,11095,1821],{"class":684},[159,11097,1824],{"class":176},[159,11099,8965],{"class":180},[159,11101,3048],{"class":176},[159,11103,11104],{"class":161,"line":212},[159,11105,453],{"emptyLinePlaceholder":452},[159,11107,11108],{"class":161,"line":233},[159,11109,453],{"emptyLinePlaceholder":452},[159,11111,11112,11114,11116,11118,11120,11122,11124],{"class":161,"line":244},[159,11113,8980],{"class":463},[159,11115,770],{"class":176},[159,11117,7243],{"class":463},[159,11119,770],{"class":176},[159,11121,8989],{"class":463},[159,11123,1658],{"class":176},[159,11125,276],{"class":275},[159,11127,11128],{"class":161,"line":255},[159,11129,453],{"emptyLinePlaceholder":452},[159,11131,11132,11134,11136,11138,11140,11142,11144],{"class":161,"line":267},[159,11133,9002],{"class":680},[159,11135,9005],{"class":712},[159,11137,716],{"class":176},[159,11139,9010],{"class":2361},[159,11141,225],{"class":176},[159,11143,9015],{"class":2361},[159,11145,2369],{"class":176},[159,11147,11148,11150,11152,11154,11156,11158,11160,11162,11164,11166,11168,11170],{"class":161,"line":279},[159,11149,9022],{"class":684},[159,11151,716],{"class":172},[159,11153,885],{"class":463},[159,11155,770],{"class":176},[159,11157,4807],{"class":712},[159,11159,716],{"class":172},[159,11161,9010],{"class":463},[159,11163,737],{"class":172},[159,11165,9039],{"class":176},[159,11167,9042],{"class":176},[159,11169,767],{"class":172},[159,11171,688],{"class":176},[159,11173,11174,11176,11178,11180,11182],{"class":161,"line":782},[159,11175,2566],{"class":684},[159,11177,4787],{"class":176},[159,11179,9055],{"class":712},[159,11181,716],{"class":172},[159,11183,688],{"class":176},[159,11185,11186,11188,11190,11192,11194,11196,11198,11200,11202],{"class":161,"line":787},[159,11187,9064],{"class":712},[159,11189,177],{"class":176},[159,11191,9069],{"class":2361},[159,11193,9072],{"class":680},[159,11195,9069],{"class":712},[159,11197,716],{"class":172},[159,11199,9015],{"class":463},[159,11201,767],{"class":172},[159,11203,304],{"class":176},[159,11205,11206,11208,11210,11212,11214,11216,11218,11220,11222,11224,11226],{"class":161,"line":796},[159,11207,4006],{"class":176},[159,11209,767],{"class":172},[159,11211,770],{"class":176},[159,11213,9093],{"class":712},[159,11215,716],{"class":172},[159,11217,475],{"class":176},[159,11219,9100],{"class":180},[159,11221,475],{"class":176},[159,11223,2425],{"class":176},[159,11225,9010],{"class":463},[159,11227,1866],{"class":172},[159,11229,11230],{"class":161,"line":804},[159,11231,4891],{"class":176},[159,11233,11234],{"class":161,"line":810},[159,11235,819],{"class":176},[159,11237,11238],{"class":161,"line":816},[159,11239,453],{"emptyLinePlaceholder":452},[159,11241,11242,11244,11246,11248,11250,11252,11254,11257],{"class":161,"line":822},[159,11243,9125],{"class":712},[159,11245,716],{"class":463},[159,11247,475],{"class":176},[159,11249,258],{"class":180},[159,11251,475],{"class":176},[159,11253,225],{"class":176},[159,11255,11256],{"class":463},"Index)",[159,11258,779],{"class":176},[159,11260,11261,11263,11265,11267,11269,11271,11273,11275],{"class":161,"line":2996},[159,11262,9125],{"class":712},[159,11264,716],{"class":463},[159,11266,475],{"class":176},[159,11268,8881],{"class":180},[159,11270,475],{"class":176},[159,11272,225],{"class":176},[159,11274,9138],{"class":463},[159,11276,779],{"class":176},[159,11278,11279,11281,11283,11285,11287,11289,11291,11293],{"class":161,"line":3012},[159,11280,9125],{"class":712},[159,11282,716],{"class":463},[159,11284,475],{"class":176},[159,11286,9151],{"class":180},[159,11288,475],{"class":176},[159,11290,225],{"class":176},[159,11292,9158],{"class":463},[159,11294,779],{"class":176},[13,11296,11297,11300],{},[55,11298,11299],{},"id='index'","があれば一覧のコンポーネントが出力されるようにしました。",[47,11302,11303],{"id":11303},"実際に操作してみる",[96,11305,11306],{"id":11306},"新しくデータを入れてみる",[833,11308],{":src":11309,":width":4947},"'_mix\u002Fsch-2020-10-04-14.40.28-768x285-2.png'",[13,11311,11312],{},"右下の「新規追加」は \u002Fdashboard\u002Fvuetest\u002Fadd へリンクしています。そのためクリックすると追加画面が現れて、追加ができます。新規に「テスト２」としておきましょう。",[833,11314],{":src":11315,":width":4947},"'_mix\u002Fsch-2020-10-04-15.11.23-768x216.png'",[13,11317,11318],{},"それで「登録」を押すとデータ挿入処理と共に一覧へリダイレクトされます。すると、",[833,11320],{":src":11321,":width":4947},"'_mix\u002Fsch-2020-10-04-15.12.17-768x313.png'",[13,11323,11324],{},"きちんと一覧に反映されました。",[47,11326,11327],{"id":11327},"削除してみる",[13,11329,11330],{},"では削除を押すと、確認ダイアログがでてOKであれば削除APIが走って実行されます。",[833,11332],{":src":11333,":width":2147,":center":837},"'_mix\u002Fsch-2020-10-04-15.13.59-768x251.png'",[833,11335],{":src":11336,":width":4947},"'_mix\u002Fsch-2020-10-04-15.22.02.png'",[13,11338,11339],{},"「変更テスト（id 1）」がDB上から削除されまた、一覧からも消えました。",[96,11341,11342],{"id":11342},"編集してみる",[13,11344,11345],{},"緑色の「編集」は編集画面のURLへリンクしています。vueでは以下のようにv-for内で動的に作成できるようにしています。",[113,11347,11349],{"className":618,"code":11348,"language":621,"meta":9511,"style":120},"\u003Ctr v-for=\"val in list\" :key=\"val.id\" tabindex=\"0\">\n...\n \u003Ctd style=\"vertical-align:middle;\">\n ...\n \u003Ca target=\"_blank\" :href=\"'\u002Fdashboard\u002Fvuetest\u002Fedit\u002F'+val.id\">編集\u003C\u002Fa>\n ...\n \u003C\u002Ftd>\n...\n\u003C\u002Ftr>\n",[55,11350,11351,11404,11408,11413,11418,11423,11427,11432,11436],{"__ignoreMap":120},[159,11352,11353,11355,11357,11359,11361,11363,11366,11369,11372,11374,11377,11380,11382,11384,11386,11388,11390,11392,11394,11396,11398,11400,11402],{"class":161,"line":162},[159,11354,628],{"class":176},[159,11356,9607],{"class":172},[159,11358,9729],{"class":684},[159,11360,1658],{"class":176},[159,11362,1090],{"class":176},[159,11364,11365],{"class":463},"val ",[159,11367,11368],{"class":176},"in",[159,11370,11371],{"class":463}," list",[159,11373,1090],{"class":176},[159,11375,11376],{"class":176}," :",[159,11378,11379],{"class":680},"key",[159,11381,1658],{"class":176},[159,11383,1090],{"class":176},[159,11385,2393],{"class":463},[159,11387,770],{"class":176},[159,11389,9010],{"class":463},[159,11391,1090],{"class":176},[159,11393,9753],{"class":680},[159,11395,1658],{"class":176},[159,11397,1090],{"class":176},[159,11399,9760],{"class":180},[159,11401,1090],{"class":176},[159,11403,634],{"class":176},[159,11405,11406],{"class":161,"line":169},[159,11407,3801],{"class":463},[159,11409,11410],{"class":161,"line":184},[159,11411,11412],{"class":463}," \u003Ctd style=\"vertical-align:middle;\">\n",[159,11414,11415],{"class":161,"line":195},[159,11416,11417],{"class":463}," ...\n",[159,11419,11420],{"class":161,"line":212},[159,11421,11422],{"class":463}," \u003Ca target=\"_blank\" :href=\"'\u002Fdashboard\u002Fvuetest\u002Fedit\u002F'+val.id\">編集\u003C\u002Fa>\n",[159,11424,11425],{"class":161,"line":233},[159,11426,11417],{"class":463},[159,11428,11429],{"class":161,"line":244},[159,11430,11431],{"class":463}," \u003C\u002Ftd>\n",[159,11433,11434],{"class":161,"line":255},[159,11435,3801],{"class":463},[159,11437,11438,11440,11442],{"class":161,"line":267},[159,11439,662],{"class":176},[159,11441,9607],{"class":172},[159,11443,634],{"class":176},[13,11445,11446],{},"実際にリンクしてみると、選択したデータの編集画面が表示されました。",[833,11448],{":src":11449,":width":2147,":center":837},"'_mix\u002Fsch-2020-10-04-15.29.21-768x342.png'",[47,11451,11452],{"id":8085},"次回は..",[13,11454,11455],{},"今回の記事では編集画面と一覧画面が完成しました。これで「作成」「読み取り」「更新」「削除」の実装ができました。次の記事では「タイトル」だけでなく「画像データ」「リッチテキスト」といったデータを使えるようにします。",[907,11457,11458],{},"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 .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}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 .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}",{"title":120,"searchDepth":184,"depth":184,"links":11460},[11461,11466,11467,11470,11475,11478,11481],{"id":8150,"depth":169,"text":8151,"children":11462},[11463,11464,11465],{"id":8164,"depth":184,"text":8165},{"id":8647,"depth":184,"text":8648},{"id":8751,"depth":184,"text":8751},{"id":9187,"depth":169,"text":9187},{"id":9307,"depth":169,"text":9307,"children":11468},[11469],{"id":9486,"depth":184,"text":9486},{"id":9498,"depth":169,"text":9498,"children":11471},[11472,11473,11474],{"id":9504,"depth":184,"text":9504},{"id":10857,"depth":184,"text":10858},{"id":10998,"depth":184,"text":10999},{"id":11303,"depth":169,"text":11303,"children":11476},[11477],{"id":11306,"depth":184,"text":11306},{"id":11327,"depth":169,"text":11327,"children":11479},[11480],{"id":11342,"depth":184,"text":11342},{"id":8085,"depth":169,"text":11452},[206],"2020-10-04","oncrete5にVueCLIを使ってUIを構築する。編集画面と一覧画面。",{},"\u002Fseries\u002Fconcrete5vue-3",{"title":8135,"description":11484},"concrete5vue","Concrete5にVueCLIを使ってUIを構築する。","series\u002Fconcrete5vue-3",[11492,222,621],"concrete5","_mix\u002Fvuewithconcrete.png","b60sq7M9Lg8p5F-WfOF_VM7wNdrKWtYXHxXbLU-P1O4",{"id":11496,"title":11497,"body":11498,"category":13948,"createdAt":13949,"description":13950,"extension":928,"index":169,"meta":13951,"navigation":452,"path":8142,"publish":452,"seo":13952,"series":11488,"seriesTitle":11489,"stem":13953,"tag":13954,"thumbnail":11493,"updatedAt":937,"__hash__":13955},"series\u002Fseries\u002Fconcrete5vue-2.md","Concrete5にVueCLIを使ってUIを構築する。2【コンポーネント作成・データ登録編】",{"type":10,"value":11499,"toc":13927},[11500,11506,11509,11512,11515,11518,11532,11536,11539,11542,11546,11549,11760,11763,11767,11771,11774,11779,11785,11866,11869,11892,11898,11901,11923,11930,11932,11935,11941,11944,11947,12205,12208,12320,12328,12435,12441,12444,12455,12458,12461,12464,12468,12481,12893,12896,12899,13518,13533,13554,13557,13560,13565,13569,13575,13581,13590,13596,13602,13605,13608,13813,13826,13844,13848,13851,13870,13878,13881,13884,13887,13893,13896,13899,13902,13905,13907,13910,13921,13924],[13,11501,6197,11502,11505],{},[872,11503,11504],{"href":8142},"Concrete5にVueCLIを使ってUIを構築する。1【環境構築編】","の記事の続きを書いていきます。",[13,11507,11508],{},"今回の記事では",[13,11510,11511],{},"どんなフォームを作成するのか。\nテキストインプットを用いたフォームの簡易実装\nデータの保存のバックエンド実装\nを行いたいと思います。ファイルマネージャー、リッチテキストエディタをvueでレンダリングする方法は追加・編集・一覧化が終わった後に書きたいと思います。まずは簡単なフォーム（テキスト）とデータの保存をvueとともに実装していきましょう。",[47,11513,11514],{"id":11514},"最終的に作成するフォーム",[13,11516,11517],{},"「アルバム管理」たるものを作成しようと思います。インスタグラム的な物で、機能は以下の通りです。",[75,11519,11520,11523,11526,11529],{},[28,11521,11522],{},"1つのアルバムに複数枚の画像を自由に登録できる。数は基本的に無制限、最低１枚",[28,11524,11525],{},"画像と一緒にその画像に関する情報をリッチテキストエディタで編集できる。",[28,11527,11528],{},"画像は順番の並び替え、追加、削除が可能。",[28,11530,11531],{},"ページ内ではブロックを通じてアルバムの写真を出力できる。",[96,11533,11535],{"id":11534},"ワイヤーフレーム超簡素","ワイヤーフレーム（超簡素）",[833,11537],{":src":11538,":width":4947},"'_mix\u002Fvueconcrete2-1.jpeg'",[833,11540],{":src":11541,":width":4947},"'_mix\u002Fslide-2.jpeg'",[47,11543,11545],{"id":11544},"db構造","DB構造",[13,11547,11548],{},"db.xmlを用いて以下のようなテーブルを作成しておきます。",[113,11550,11555],{"className":11551,"code":11552,"filename":11553,"language":11554,"meta":120,"style":120},"language-xml shiki shiki-themes material-theme-ocean","\u003C?xml version=\"1.0\" encoding=\"UTF-8\"?>\n\u003Cschema\n xmlns=\"http:\u002F\u002Fwww.concrete5.org\u002Fdoctrine-xml\u002F0.5\"\n xmlns:xsi=\"http:\u002F\u002Fwww.w3.org\u002F2001\u002FXMLSchema-instance\"\n xsi:schemaLocation=\"http:\u002F\u002Fwww.concrete5.org\u002Fdoctrine-xml\u002F0.5 http:\u002F\u002Fconcrete5.github.io\u002Fdoctrine-xml\u002Fdoctrine-xml-0.5.xsd\">\n\n\u003Ctable name=\"album\">\n \u003Cfield name=\"id\" type=\"integer\">\n \u003Cautoincrement\u002F>\n \u003Ckey\u002F>\n \u003C\u002Ffield>\n \u003Cfield name=\"title\" type=\"string\" size=\"255\"\u002F>\n \u003Cfield name=\"created\" type=\"datetime\">\n \u003Cdefault value=\"1000-01-01 00:00:00\"\u002F>\n \u003Cnotnull\u002F>\n \u003C\u002Ffield>\n \u003Cfield name=\"modified\" type=\"timestamp\">\n \u003Cdeftimestamp\u002F>\n \u003Cnotnull\u002F>\n \u003C\u002Ffield>\n\u003C\u002Ftable>\n\n\u003Ctable name=\"albumPics\">\n \u003Cfield name=\"id\" type=\"integer\">\n \u003Cautoincrement\u002F>\n \u003Ckey\u002F>\n \u003C\u002Ffield>\n \u003Cfield name=\"albumID\" type=\"integer\">\n \u003Cunsigned\u002F>\n \u003C\u002Ffield>\n \u003Cfield name=\"fID\" type=\"integer\">\n \u003Cunsigned\u002F>\n \u003C\u002Ffield>\n \u003Cfield name=\"html\" type=\"text\" size=\"65535\"\u002F>\n \u003Cfield name=\"created\" type=\"datetime\">\n \u003Cdefault value=\"1000-01-01 00:00:00\"\u002F>\n \u003Cnotnull\u002F>\n \u003C\u002Ffield>\n \u003Cfield name=\"modified\" type=\"timestamp\">\n \u003Cdeftimestamp\u002F>\n \u003Cnotnull\u002F>\n \u003C\u002Ffield>\n\u003C\u002Ftable>\n\n\u003C\u002Fschema>\n","db.xml","xml",[55,11556,11557,11562,11567,11572,11577,11582,11586,11591,11596,11601,11606,11611,11616,11621,11626,11631,11635,11640,11645,11649,11653,11658,11662,11667,11671,11675,11679,11683,11688,11693,11697,11702,11706,11710,11715,11719,11723,11727,11731,11735,11739,11743,11747,11751,11755],{"__ignoreMap":120},[159,11558,11559],{"class":161,"line":162},[159,11560,11561],{},"\u003C?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",[159,11563,11564],{"class":161,"line":169},[159,11565,11566],{},"\u003Cschema\n",[159,11568,11569],{"class":161,"line":184},[159,11570,11571],{}," xmlns=\"http:\u002F\u002Fwww.concrete5.org\u002Fdoctrine-xml\u002F0.5\"\n",[159,11573,11574],{"class":161,"line":195},[159,11575,11576],{}," xmlns:xsi=\"http:\u002F\u002Fwww.w3.org\u002F2001\u002FXMLSchema-instance\"\n",[159,11578,11579],{"class":161,"line":212},[159,11580,11581],{}," xsi:schemaLocation=\"http:\u002F\u002Fwww.concrete5.org\u002Fdoctrine-xml\u002F0.5 http:\u002F\u002Fconcrete5.github.io\u002Fdoctrine-xml\u002Fdoctrine-xml-0.5.xsd\">\n",[159,11583,11584],{"class":161,"line":233},[159,11585,453],{"emptyLinePlaceholder":452},[159,11587,11588],{"class":161,"line":244},[159,11589,11590],{},"\u003Ctable name=\"album\">\n",[159,11592,11593],{"class":161,"line":255},[159,11594,11595],{}," \u003Cfield name=\"id\" type=\"integer\">\n",[159,11597,11598],{"class":161,"line":267},[159,11599,11600],{}," \u003Cautoincrement\u002F>\n",[159,11602,11603],{"class":161,"line":279},[159,11604,11605],{}," \u003Ckey\u002F>\n",[159,11607,11608],{"class":161,"line":782},[159,11609,11610],{}," \u003C\u002Ffield>\n",[159,11612,11613],{"class":161,"line":787},[159,11614,11615],{}," \u003Cfield name=\"title\" type=\"string\" size=\"255\"\u002F>\n",[159,11617,11618],{"class":161,"line":796},[159,11619,11620],{}," \u003Cfield name=\"created\" type=\"datetime\">\n",[159,11622,11623],{"class":161,"line":804},[159,11624,11625],{}," \u003Cdefault value=\"1000-01-01 00:00:00\"\u002F>\n",[159,11627,11628],{"class":161,"line":810},[159,11629,11630],{}," \u003Cnotnull\u002F>\n",[159,11632,11633],{"class":161,"line":816},[159,11634,11610],{},[159,11636,11637],{"class":161,"line":822},[159,11638,11639],{}," \u003Cfield name=\"modified\" type=\"timestamp\">\n",[159,11641,11642],{"class":161,"line":2996},[159,11643,11644],{}," \u003Cdeftimestamp\u002F>\n",[159,11646,11647],{"class":161,"line":3012},[159,11648,11630],{},[159,11650,11651],{"class":161,"line":3034},[159,11652,11610],{},[159,11654,11655],{"class":161,"line":3040},[159,11656,11657],{},"\u003C\u002Ftable>\n",[159,11659,11660],{"class":161,"line":3051},[159,11661,453],{"emptyLinePlaceholder":452},[159,11663,11664],{"class":161,"line":3057},[159,11665,11666],{},"\u003Ctable name=\"albumPics\">\n",[159,11668,11669],{"class":161,"line":3063},[159,11670,11595],{},[159,11672,11673],{"class":161,"line":3069},[159,11674,11600],{},[159,11676,11677],{"class":161,"line":3075},[159,11678,11605],{},[159,11680,11681],{"class":161,"line":3080},[159,11682,11610],{},[159,11684,11685],{"class":161,"line":3089},[159,11686,11687],{}," \u003Cfield name=\"albumID\" type=\"integer\">\n",[159,11689,11690],{"class":161,"line":3094},[159,11691,11692],{}," \u003Cunsigned\u002F>\n",[159,11694,11695],{"class":161,"line":3113},[159,11696,11610],{},[159,11698,11699],{"class":161,"line":3118},[159,11700,11701],{}," \u003Cfield name=\"fID\" type=\"integer\">\n",[159,11703,11704],{"class":161,"line":3131},[159,11705,11692],{},[159,11707,11708],{"class":161,"line":3136},[159,11709,11610],{},[159,11711,11712],{"class":161,"line":3142},[159,11713,11714],{}," \u003Cfield name=\"html\" type=\"text\" size=\"65535\"\u002F>\n",[159,11716,11717],{"class":161,"line":3152},[159,11718,11620],{},[159,11720,11721],{"class":161,"line":3165},[159,11722,11625],{},[159,11724,11725],{"class":161,"line":3180},[159,11726,11630],{},[159,11728,11729],{"class":161,"line":3188},[159,11730,11610],{},[159,11732,11733],{"class":161,"line":3194},[159,11734,11639],{},[159,11736,11737],{"class":161,"line":7956},[159,11738,11644],{},[159,11740,11741],{"class":161,"line":7961},[159,11742,11630],{},[159,11744,11745],{"class":161,"line":10163},[159,11746,11610],{},[159,11748,11749],{"class":161,"line":4},[159,11750,11657],{},[159,11752,11753],{"class":161,"line":10178},[159,11754,453],{"emptyLinePlaceholder":452},[159,11756,11757],{"class":161,"line":10183},[159,11758,11759],{},"\u003C\u002Fschema>\n",[13,11761,11762],{},"1アルバムに対して不定数の画像が登録されるので上記の様なDBになっています。",[47,11764,11766],{"id":11765},"パッケージのビューphpとvueのsrc構成","パッケージのビューPHPとvueのSrc構成",[96,11768,11770],{"id":11769},"パッケージ側phpの下準備","パッケージ側（PHP）の下準備",[13,11772,11773],{},"それではアルバムののフォームを作っていきましょう。前回インストールした「vuetest」にてフォーム用のシングルページを作成します。",[113,11775,11777],{"className":11776,"code":8172,"language":119},[116],[55,11778,8172],{"__ignoreMap":120},[13,11780,11781,11782,11784],{},"そしてシングルページのコントローラーである",[55,11783,8185],{},"で以下の様に入力",[113,11786,11788],{"className":6346,"code":11787,"filename":8185,"language":6349,"meta":120,"style":120},"class Vuetest extends DashboardPageController\n{\n public $packageHandle = 'vuetest';\n\n \u002F\u002Fvuetest のシングルページでvueのjsファイルを読み込む様にする。\n　　public function on_start() {\n $this->requireAsset('package-vue-production');\n }\n\n public function view() {\n }\n\n \u002F\u002F \u002Fdashboard\u002Fvuetest\u002F に \u002Fadd というURLを追加できる\n public function add(){\n $this->render('\u002Fdashboard\u002Fvuetest\u002Fadd');\n }\n}\n",[55,11789,11790,11795,11799,11804,11808,11813,11818,11823,11827,11831,11836,11840,11844,11849,11854,11858,11862],{"__ignoreMap":120},[159,11791,11792],{"class":161,"line":162},[159,11793,11794],{},"class Vuetest extends DashboardPageController\n",[159,11796,11797],{"class":161,"line":169},[159,11798,688],{},[159,11800,11801],{"class":161,"line":184},[159,11802,11803],{}," public $packageHandle = 'vuetest';\n",[159,11805,11806],{"class":161,"line":195},[159,11807,453],{"emptyLinePlaceholder":452},[159,11809,11810],{"class":161,"line":212},[159,11811,11812],{}," \u002F\u002Fvuetest のシングルページでvueのjsファイルを読み込む様にする。\n",[159,11814,11815],{"class":161,"line":233},[159,11816,11817],{},"　　public function on_start() {\n",[159,11819,11820],{"class":161,"line":244},[159,11821,11822],{}," $this->requireAsset('package-vue-production');\n",[159,11824,11825],{"class":161,"line":255},[159,11826,2010],{},[159,11828,11829],{"class":161,"line":267},[159,11830,453],{"emptyLinePlaceholder":452},[159,11832,11833],{"class":161,"line":279},[159,11834,11835],{}," public function view() {\n",[159,11837,11838],{"class":161,"line":782},[159,11839,2010],{},[159,11841,11842],{"class":161,"line":787},[159,11843,453],{"emptyLinePlaceholder":452},[159,11845,11846],{"class":161,"line":796},[159,11847,11848],{}," \u002F\u002F \u002Fdashboard\u002Fvuetest\u002F に \u002Fadd というURLを追加できる\n",[159,11850,11851],{"class":161,"line":804},[159,11852,11853],{}," public function add(){\n",[159,11855,11856],{"class":161,"line":810},[159,11857,9468],{},[159,11859,11860],{"class":161,"line":816},[159,11861,2010],{},[159,11863,11864],{"class":161,"line":822},[159,11865,819],{},[13,11867,11868],{},"すると\u002Fdashboard\u002Fvuetest\u002Fadd というURLを叩くとadd.phpが表示されます。",[113,11870,11873],{"className":6346,"code":11871,"filename":11872,"language":6349,"meta":120,"style":120},"\u003C?php\ndefined('C5_EXECUTE') or die('Access Denied.');\n?>\n\u003Cp>add用のページだよ\u003C\u002Fp>\n","add.php",[55,11874,11875,11879,11883,11887],{"__ignoreMap":120},[159,11876,11877],{"class":161,"line":162},[159,11878,6356],{},[159,11880,11881],{"class":161,"line":169},[159,11882,8769],{},[159,11884,11885],{"class":161,"line":184},[159,11886,8774],{},[159,11888,11889],{"class":161,"line":195},[159,11890,11891],{},"\u003Cp>add用のページだよ\u003C\u002Fp>\n",[13,11893,11894,11895],{},"↓\n",[833,11896],{":src":11897,":width":6984,":center":837},"'_mix\u002Fscsh-2020-08-26-21.34.56-768x436.png'",[13,11899,11900],{},"ページの表示が確認できたら、add.phpに以下の様に変更しておきます。",[113,11902,11904],{"className":6346,"code":11903,"filename":11872,"language":6349,"meta":120,"style":120},"\u003C?php\ndefined('C5_EXECUTE') or die('Access Denied.');\n?>\n\u003Cdiv id=\"add\">\u003C\u002Fdiv>\n",[55,11905,11906,11910,11914,11918],{"__ignoreMap":120},[159,11907,11908],{"class":161,"line":162},[159,11909,6356],{},[159,11911,11912],{"class":161,"line":169},[159,11913,8769],{},[159,11915,11916],{"class":161,"line":184},[159,11917,8774],{},[159,11919,11920],{"class":161,"line":195},[159,11921,11922],{},"\u003Cdiv id=\"add\">\u003C\u002Fdiv>\n",[13,11924,11925,11926,11929],{},"この",[55,11927,11928],{},"\u003Cdiv id=”app>\u003C\u002Fdiv>","としたところがvueコンポーネントを流し込むエントリーになります。フォームのビューファイルであるadd.phpはこれだけでおしまいです。",[47,11931,4153],{"id":4153},[13,11933,11934],{},"ではvue側も作っていきましょう。src配下は以下の様に構成します。",[113,11936,11939],{"className":11937,"code":11938,"language":119},[116],"├── src\n ├── add.vue\n ├── components\n │ └── form.vue\n ├── edit.vue\n ├── index.vue\n └── main.js\n",[55,11940,11938],{"__ignoreMap":120},[13,11942,11943],{},"index.vue、add.vue、edit.vueそれぞれが一覧・追加・編集ページのUIを構築します。しかしedit.vueとadd.vueは入力項目が同じで、初期値があるかないかの違いだけです。そのため共通のコンポーネントform.vueを作成します。",[13,11945,11946],{},"form.vueはひとまず以下の様に設定しておきます。",[113,11948,11950],{"className":618,"code":11949,"filename":8654,"language":621,"meta":120,"style":120},"\u003Ctemplate>\n \u003Cdiv class=\"ccm-dashboard-content-inner\">\n \u003Cp>vueレンダリングテスト\u003C\u002Fp>\n \n \u003Cdiv class=\"ccm-dashboard-form-actions-wrapper\">\n \u003Cdiv class=\"ccm-dashboard-form-actions\">\n \u003Cbutton class=\"pull-left btn btn-primary\">\n 一覧へ戻る\n \u003C\u002Fbutton>\n \u003Ca href=\"#\" class=\"pull-right btn btn-primary\">\n 登録\n \u003C\u002Fa>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n name:'albumForm',\n props:['isEdit']\n}\n\u003C\u002Fscript>\n",[55,11951,11952,11960,11978,11995,12000,12018,12036,12055,12060,12068,12096,12101,12109,12117,12125,12133,12141,12145,12153,12161,12176,12193,12197],{"__ignoreMap":120},[159,11953,11954,11956,11958],{"class":161,"line":162},[159,11955,628],{"class":176},[159,11957,631],{"class":172},[159,11959,634],{"class":176},[159,11961,11962,11964,11966,11968,11970,11972,11974,11976],{"class":161,"line":169},[159,11963,639],{"class":176},[159,11965,408],{"class":172},[159,11967,3571],{"class":680},[159,11969,1658],{"class":176},[159,11971,1090],{"class":176},[159,11973,9536],{"class":180},[159,11975,1090],{"class":176},[159,11977,634],{"class":176},[159,11979,11980,11982,11984,11986,11989,11991,11993],{"class":161,"line":184},[159,11981,1649],{"class":176},[159,11983,13],{"class":172},[159,11985,1676],{"class":176},[159,11987,11988],{"class":463},"vueレンダリングテスト",[159,11990,662],{"class":176},[159,11992,13],{"class":172},[159,11994,634],{"class":176},[159,11996,11997],{"class":161,"line":195},[159,11998,11999],{"class":463}," \n",[159,12001,12002,12004,12006,12008,12010,12012,12014,12016],{"class":161,"line":212},[159,12003,1649],{"class":176},[159,12005,408],{"class":172},[159,12007,3571],{"class":680},[159,12009,1658],{"class":176},[159,12011,1090],{"class":176},[159,12013,10003],{"class":180},[159,12015,1090],{"class":176},[159,12017,634],{"class":176},[159,12019,12020,12022,12024,12026,12028,12030,12032,12034],{"class":161,"line":233},[159,12021,1720],{"class":176},[159,12023,408],{"class":172},[159,12025,3571],{"class":680},[159,12027,1658],{"class":176},[159,12029,1090],{"class":176},[159,12031,10022],{"class":180},[159,12033,1090],{"class":176},[159,12035,634],{"class":176},[159,12037,12038,12040,12042,12044,12046,12048,12051,12053],{"class":161,"line":244},[159,12039,9604],{"class":176},[159,12041,2279],{"class":172},[159,12043,3571],{"class":680},[159,12045,1658],{"class":176},[159,12047,1090],{"class":176},[159,12049,12050],{"class":180},"pull-left btn btn-primary",[159,12052,1090],{"class":176},[159,12054,634],{"class":176},[159,12056,12057],{"class":161,"line":255},[159,12058,12059],{"class":463}," 一覧へ戻る\n",[159,12061,12062,12064,12066],{"class":161,"line":267},[159,12063,9699],{"class":176},[159,12065,2279],{"class":172},[159,12067,634],{"class":176},[159,12069,12070,12072,12074,12076,12078,12080,12082,12084,12086,12088,12090,12092,12094],{"class":161,"line":279},[159,12071,9604],{"class":176},[159,12073,872],{"class":172},[159,12075,3433],{"class":680},[159,12077,1658],{"class":176},[159,12079,1090],{"class":176},[159,12081,9100],{"class":180},[159,12083,1090],{"class":176},[159,12085,3571],{"class":680},[159,12087,1658],{"class":176},[159,12089,1090],{"class":176},[159,12091,10052],{"class":180},[159,12093,1090],{"class":176},[159,12095,634],{"class":176},[159,12097,12098],{"class":161,"line":782},[159,12099,12100],{"class":463}," 登録\n",[159,12102,12103,12105,12107],{"class":161,"line":787},[159,12104,9699],{"class":176},[159,12106,872],{"class":172},[159,12108,634],{"class":176},[159,12110,12111,12113,12115],{"class":161,"line":796},[159,12112,1745],{"class":176},[159,12114,408],{"class":172},[159,12116,634],{"class":176},[159,12118,12119,12121,12123],{"class":161,"line":804},[159,12120,1754],{"class":176},[159,12122,408],{"class":172},[159,12124,634],{"class":176},[159,12126,12127,12129,12131],{"class":161,"line":810},[159,12128,653],{"class":176},[159,12130,408],{"class":172},[159,12132,634],{"class":176},[159,12134,12135,12137,12139],{"class":161,"line":816},[159,12136,662],{"class":176},[159,12138,631],{"class":172},[159,12140,634],{"class":176},[159,12142,12143],{"class":161,"line":822},[159,12144,453],{"emptyLinePlaceholder":452},[159,12146,12147,12149,12151],{"class":161,"line":2996},[159,12148,628],{"class":176},[159,12150,673],{"class":172},[159,12152,634],{"class":176},[159,12154,12155,12157,12159],{"class":161,"line":3012},[159,12156,681],{"class":684},[159,12158,685],{"class":684},[159,12160,793],{"class":176},[159,12162,12163,12165,12167,12169,12172,12174],{"class":161,"line":3034},[159,12164,693],{"class":172},[159,12166,177],{"class":176},[159,12168,475],{"class":176},[159,12170,12171],{"class":180},"albumForm",[159,12173,475],{"class":176},[159,12175,304],{"class":176},[159,12177,12178,12181,12183,12185,12187,12189,12191],{"class":161,"line":3040},[159,12179,12180],{"class":172}," props",[159,12182,177],{"class":176},[159,12184,5868],{"class":463},[159,12186,475],{"class":176},[159,12188,8740],{"class":180},[159,12190,475],{"class":176},[159,12192,209],{"class":463},[159,12194,12195],{"class":161,"line":3051},[159,12196,819],{"class":176},[159,12198,12199,12201,12203],{"class":161,"line":3057},[159,12200,662],{"class":176},[159,12202,673],{"class":172},[159,12204,634],{"class":176},[13,12206,12207],{},"そしてadd.vueでこのform.vueを読み込んで",[113,12209,12212],{"className":618,"code":12210,"filename":12211,"language":621,"meta":120,"style":120},"\u003Ctemplate>\n \u003CAlbumForm :isEdit=\"false\"\u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport AlbumForm from '.\u002Fcomponents\u002Fform';\nexport default {\n name:'add',\n components:{AlbumForm}\n}\n\u003C\u002Fscript>\n","app.vue",[55,12213,12214,12222,12240,12248,12252,12260,12276,12284,12298,12308,12312],{"__ignoreMap":120},[159,12215,12216,12218,12220],{"class":161,"line":162},[159,12217,628],{"class":176},[159,12219,631],{"class":172},[159,12221,634],{"class":176},[159,12223,12224,12226,12228,12230,12232,12234,12236,12238],{"class":161,"line":169},[159,12225,639],{"class":176},[159,12227,8811],{"class":172},[159,12229,8814],{"class":680},[159,12231,1658],{"class":176},[159,12233,1090],{"class":176},[159,12235,10320],{"class":180},[159,12237,1090],{"class":176},[159,12239,8407],{"class":176},[159,12241,12242,12244,12246],{"class":161,"line":184},[159,12243,662],{"class":176},[159,12245,631],{"class":172},[159,12247,634],{"class":176},[159,12249,12250],{"class":161,"line":195},[159,12251,453],{"emptyLinePlaceholder":452},[159,12253,12254,12256,12258],{"class":161,"line":212},[159,12255,628],{"class":176},[159,12257,673],{"class":172},[159,12259,634],{"class":176},[159,12261,12262,12264,12266,12268,12270,12272,12274],{"class":161,"line":233},[159,12263,1815],{"class":684},[159,12265,8851],{"class":463},[159,12267,1821],{"class":684},[159,12269,1824],{"class":176},[159,12271,8858],{"class":180},[159,12273,475],{"class":176},[159,12275,779],{"class":176},[159,12277,12278,12280,12282],{"class":161,"line":244},[159,12279,681],{"class":684},[159,12281,685],{"class":684},[159,12283,793],{"class":176},[159,12285,12286,12288,12290,12292,12294,12296],{"class":161,"line":255},[159,12287,693],{"class":172},[159,12289,177],{"class":176},[159,12291,475],{"class":176},[159,12293,8881],{"class":180},[159,12295,475],{"class":176},[159,12297,304],{"class":176},[159,12299,12300,12302,12304,12306],{"class":161,"line":267},[159,12301,8890],{"class":172},[159,12303,8893],{"class":176},[159,12305,8811],{"class":463},[159,12307,819],{"class":176},[159,12309,12310],{"class":161,"line":279},[159,12311,819],{"class":176},[159,12313,12314,12316,12318],{"class":161,"line":782},[159,12315,662],{"class":176},[159,12317,673],{"class":172},[159,12319,634],{"class":176},[13,12321,12322,4033,12324,12327],{},[55,12323,982],{},[55,12325,12326],{},"id=\"app\"","の要素にマウントする様にします。",[113,12329,12331],{"className":1805,"code":12330,"filename":982,"language":1808,"meta":120,"style":120},"import Vue from 'vue'\nimport Add from '.\u002Fadd.vue'\n\nVue.config.productionTip = false\n\nnew Vue({\n render: h => h(Add),\n}).$mount('#add')\n",[55,12332,12333,12347,12361,12365,12381,12385,12396,12414],{"__ignoreMap":120},[159,12334,12335,12337,12339,12341,12343,12345],{"class":161,"line":162},[159,12336,1815],{"class":684},[159,12338,8927],{"class":463},[159,12340,1821],{"class":684},[159,12342,1824],{"class":176},[159,12344,621],{"class":180},[159,12346,3048],{"class":176},[159,12348,12349,12351,12353,12355,12357,12359],{"class":161,"line":169},[159,12350,1815],{"class":684},[159,12352,8942],{"class":463},[159,12354,1821],{"class":684},[159,12356,1824],{"class":176},[159,12358,8949],{"class":180},[159,12360,3048],{"class":176},[159,12362,12363],{"class":161,"line":184},[159,12364,453],{"emptyLinePlaceholder":452},[159,12366,12367,12369,12371,12373,12375,12377,12379],{"class":161,"line":195},[159,12368,8980],{"class":463},[159,12370,770],{"class":176},[159,12372,7243],{"class":463},[159,12374,770],{"class":176},[159,12376,8989],{"class":463},[159,12378,1658],{"class":176},[159,12380,276],{"class":275},[159,12382,12383],{"class":161,"line":212},[159,12384,453],{"emptyLinePlaceholder":452},[159,12386,12387,12390,12392,12394],{"class":161,"line":233},[159,12388,12389],{"class":176},"new",[159,12391,9055],{"class":712},[159,12393,716],{"class":463},[159,12395,688],{"class":176},[159,12397,12398,12401,12403,12405,12407,12409,12412],{"class":161,"line":244},[159,12399,12400],{"class":712}," render",[159,12402,177],{"class":176},[159,12404,9069],{"class":2361},[159,12406,9072],{"class":680},[159,12408,9069],{"class":712},[159,12410,12411],{"class":463},"(Add)",[159,12413,304],{"class":176},[159,12415,12416,12418,12420,12422,12424,12426,12428,12431,12433],{"class":161,"line":255},[159,12417,1245],{"class":176},[159,12419,767],{"class":463},[159,12421,770],{"class":176},[159,12423,9093],{"class":712},[159,12425,716],{"class":463},[159,12427,475],{"class":176},[159,12429,12430],{"class":180},"#add",[159,12432,475],{"class":176},[159,12434,1866],{"class":463},[13,12436,12437,12438,12440],{},"こうしてビルドをしてみましょう。そして",[55,12439,10041],{},"へ移動してみると",[833,12442],{":src":12443,":width":4947},"'_mix\u002Fsch-2020-08-26-22.48.54-768x529.png'",[13,12445,12446,12447,2028,12449,12451,12452,12454],{},"しっかりと",[55,12448,12326],{},[55,12450,8654],{},"がレンダリングされました。ではこの",[55,12453,8654],{},"にガシガシとフォームUIを作っていきましょう！",[47,12456,12457],{"id":12457},"まずはタイトルを入力するだけのものを作成",[13,12459,12460],{},"最終的なフォームにはリッチテキストエディタとファイルセレクターなど、concrete5で用いられているフォームをvueで実装したいと思います。しかし、その２つはなかなか曲者で今回の記事で説明すると長くなるので次回に話します。",[13,12462,12463],{},"まずはvueとPHP(concrete5)でどう連携させてDBにデータを挿入するかの全体的な流れについて説明するとともに、タイトル部分（プレーンテキスト）を追加できる様にしていきましょう。",[96,12465,12467],{"id":12466},"postでバックに値を送る","POSTでバックに値を送る",[13,12469,12470,12471,12473,12474,12477,12478,12480],{},"vueで構築したUIで入力された値はどうやってバックに渡すか？簡単です。フォームを作る時の様に",[55,12472,2240],{},"を",[55,12475,12476],{},"\u003Cform method=\"post\">\u003C\u002Fform>","で囲んであげて、送信用のsubmitボタンを作るだけです。今回のパッケージではPOSTの値をAjaxとかで送るのでなく、普通にsubmitでサーバーに送信する様にしました。以下の様に",[55,12479,8654],{},"を変えます。",[113,12482,12484],{"className":618,"code":12483,"filename":8654,"language":621,"meta":120,"style":120},"\u003Ctemplate>\n \u003Cdiv class=\"ccm-dashboard-content-inner\">\n \u003Ch3>アルバム新規追加\u003C\u002Fh3>\n \u003Chr>\n \u003Cform method=\"post\">\n \u003Clabel for=\"title\" class=\"control-label\">アルバムタイトル\u003C\u002Flabel>\n \u003Cinput type=\"text\" name=\"title\" class=\"form-control ccm-input-text\" v-model=\"title\">\n\n \u003Cdiv class=\"ccm-dashboard-form-actions-wrapper\">\n \u003Cdiv class=\"ccm-dashboard-form-actions\">\n \u003Cbutton class=\"pull-left btn btn-primary\">\n 一覧へ戻る\n \u003C\u002Fbutton>\n \u003Cinput value=\"登録\" type=\"submit\" class=\"pull-right btn btn-primary\">\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fform>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n name:'albumForm',\n props:['isEdit'],\n data(){\n return{\n title:''\n }\n }\n}\n\u003C\u002Fscript>\n",[55,12485,12486,12494,12512,12529,12537,12558,12598,12648,12652,12670,12688,12706,12711,12719,12759,12767,12775,12783,12791,12799,12803,12811,12819,12833,12851,12857,12863,12873,12877,12881,12885],{"__ignoreMap":120},[159,12487,12488,12490,12492],{"class":161,"line":162},[159,12489,628],{"class":176},[159,12491,631],{"class":172},[159,12493,634],{"class":176},[159,12495,12496,12498,12500,12502,12504,12506,12508,12510],{"class":161,"line":169},[159,12497,639],{"class":176},[159,12499,408],{"class":172},[159,12501,3571],{"class":680},[159,12503,1658],{"class":176},[159,12505,1090],{"class":176},[159,12507,9536],{"class":180},[159,12509,1090],{"class":176},[159,12511,634],{"class":176},[159,12513,12514,12516,12518,12520,12523,12525,12527],{"class":161,"line":184},[159,12515,1649],{"class":176},[159,12517,96],{"class":172},[159,12519,1676],{"class":176},[159,12521,12522],{"class":463},"アルバム新規追加",[159,12524,662],{"class":176},[159,12526,96],{"class":172},[159,12528,634],{"class":176},[159,12530,12531,12533,12535],{"class":161,"line":195},[159,12532,1649],{"class":176},[159,12534,9564],{"class":172},[159,12536,634],{"class":176},[159,12538,12539,12541,12544,12547,12549,12551,12554,12556],{"class":161,"line":212},[159,12540,1649],{"class":176},[159,12542,12543],{"class":172},"form",[159,12545,12546],{"class":680}," method",[159,12548,1658],{"class":176},[159,12550,1090],{"class":176},[159,12552,12553],{"class":180},"post",[159,12555,1090],{"class":176},[159,12557,634],{"class":176},[159,12559,12560,12562,12565,12568,12570,12572,12574,12576,12578,12580,12582,12585,12587,12589,12592,12594,12596],{"class":161,"line":233},[159,12561,1720],{"class":176},[159,12563,12564],{"class":172},"label",[159,12566,12567],{"class":680}," for",[159,12569,1658],{"class":176},[159,12571,1090],{"class":176},[159,12573,173],{"class":180},[159,12575,1090],{"class":176},[159,12577,3571],{"class":680},[159,12579,1658],{"class":176},[159,12581,1090],{"class":176},[159,12583,12584],{"class":180},"control-label",[159,12586,1090],{"class":176},[159,12588,1676],{"class":176},[159,12590,12591],{"class":463},"アルバムタイトル",[159,12593,662],{"class":176},[159,12595,12564],{"class":172},[159,12597,634],{"class":176},[159,12599,12600,12602,12604,12606,12608,12610,12612,12614,12616,12618,12620,12622,12624,12626,12628,12630,12633,12635,12638,12640,12642,12644,12646],{"class":161,"line":244},[159,12601,1720],{"class":176},[159,12603,2240],{"class":172},[159,12605,2243],{"class":680},[159,12607,1658],{"class":176},[159,12609,1090],{"class":176},[159,12611,119],{"class":180},[159,12613,1090],{"class":176},[159,12615,4286],{"class":680},[159,12617,1658],{"class":176},[159,12619,1090],{"class":176},[159,12621,173],{"class":180},[159,12623,1090],{"class":176},[159,12625,3571],{"class":680},[159,12627,1658],{"class":176},[159,12629,1090],{"class":176},[159,12631,12632],{"class":180},"form-control ccm-input-text",[159,12634,1090],{"class":176},[159,12636,12637],{"class":680}," v-model",[159,12639,1658],{"class":176},[159,12641,1090],{"class":176},[159,12643,173],{"class":180},[159,12645,1090],{"class":176},[159,12647,634],{"class":176},[159,12649,12650],{"class":161,"line":255},[159,12651,453],{"emptyLinePlaceholder":452},[159,12653,12654,12656,12658,12660,12662,12664,12666,12668],{"class":161,"line":267},[159,12655,1720],{"class":176},[159,12657,408],{"class":172},[159,12659,3571],{"class":680},[159,12661,1658],{"class":176},[159,12663,1090],{"class":176},[159,12665,10003],{"class":180},[159,12667,1090],{"class":176},[159,12669,634],{"class":176},[159,12671,12672,12674,12676,12678,12680,12682,12684,12686],{"class":161,"line":279},[159,12673,9604],{"class":176},[159,12675,408],{"class":172},[159,12677,3571],{"class":680},[159,12679,1658],{"class":176},[159,12681,1090],{"class":176},[159,12683,10022],{"class":180},[159,12685,1090],{"class":176},[159,12687,634],{"class":176},[159,12689,12690,12692,12694,12696,12698,12700,12702,12704],{"class":161,"line":782},[159,12691,9614],{"class":176},[159,12693,2279],{"class":172},[159,12695,3571],{"class":680},[159,12697,1658],{"class":176},[159,12699,1090],{"class":176},[159,12701,12050],{"class":180},[159,12703,1090],{"class":176},[159,12705,634],{"class":176},[159,12707,12708],{"class":161,"line":787},[159,12709,12710],{"class":463}," 一覧へ戻る\n",[159,12712,12713,12715,12717],{"class":161,"line":796},[159,12714,9956],{"class":176},[159,12716,2279],{"class":172},[159,12718,634],{"class":176},[159,12720,12721,12723,12725,12727,12729,12731,12734,12736,12738,12740,12742,12745,12747,12749,12751,12753,12755,12757],{"class":161,"line":804},[159,12722,9614],{"class":176},[159,12724,2240],{"class":172},[159,12726,2254],{"class":680},[159,12728,1658],{"class":176},[159,12730,1090],{"class":176},[159,12732,12733],{"class":180},"登録",[159,12735,1090],{"class":176},[159,12737,2243],{"class":680},[159,12739,1658],{"class":176},[159,12741,1090],{"class":176},[159,12743,12744],{"class":180},"submit",[159,12746,1090],{"class":176},[159,12748,3571],{"class":680},[159,12750,1658],{"class":176},[159,12752,1090],{"class":176},[159,12754,10052],{"class":180},[159,12756,1090],{"class":176},[159,12758,634],{"class":176},[159,12760,12761,12763,12765],{"class":161,"line":810},[159,12762,9699],{"class":176},[159,12764,408],{"class":172},[159,12766,634],{"class":176},[159,12768,12769,12771,12773],{"class":161,"line":816},[159,12770,1745],{"class":176},[159,12772,408],{"class":172},[159,12774,634],{"class":176},[159,12776,12777,12779,12781],{"class":161,"line":822},[159,12778,1754],{"class":176},[159,12780,12543],{"class":172},[159,12782,634],{"class":176},[159,12784,12785,12787,12789],{"class":161,"line":2996},[159,12786,653],{"class":176},[159,12788,408],{"class":172},[159,12790,634],{"class":176},[159,12792,12793,12795,12797],{"class":161,"line":3012},[159,12794,662],{"class":176},[159,12796,631],{"class":172},[159,12798,634],{"class":176},[159,12800,12801],{"class":161,"line":3034},[159,12802,453],{"emptyLinePlaceholder":452},[159,12804,12805,12807,12809],{"class":161,"line":3040},[159,12806,628],{"class":176},[159,12808,673],{"class":172},[159,12810,634],{"class":176},[159,12812,12813,12815,12817],{"class":161,"line":3051},[159,12814,681],{"class":684},[159,12816,685],{"class":684},[159,12818,793],{"class":176},[159,12820,12821,12823,12825,12827,12829,12831],{"class":161,"line":3057},[159,12822,693],{"class":172},[159,12824,177],{"class":176},[159,12826,475],{"class":176},[159,12828,12171],{"class":180},[159,12830,475],{"class":176},[159,12832,304],{"class":176},[159,12834,12835,12837,12839,12841,12843,12845,12847,12849],{"class":161,"line":3063},[159,12836,12180],{"class":172},[159,12838,177],{"class":176},[159,12840,5868],{"class":463},[159,12842,475],{"class":176},[159,12844,8740],{"class":180},[159,12846,475],{"class":176},[159,12848,5874],{"class":463},[159,12850,304],{"class":176},[159,12852,12853,12855],{"class":161,"line":3069},[159,12854,10140],{"class":172},[159,12856,4744],{"class":176},[159,12858,12859,12861],{"class":161,"line":3075},[159,12860,790],{"class":684},[159,12862,688],{"class":176},[159,12864,12865,12868,12870],{"class":161,"line":3080},[159,12866,12867],{"class":172}," title",[159,12869,177],{"class":176},[159,12871,12872],{"class":176},"''\n",[159,12874,12875],{"class":161,"line":3089},[159,12876,807],{"class":176},[159,12878,12879],{"class":161,"line":3094},[159,12880,2010],{"class":176},[159,12882,12883],{"class":161,"line":3113},[159,12884,819],{"class":176},[159,12886,12887,12889,12891],{"class":161,"line":3118},[159,12888,662],{"class":176},[159,12890,673],{"class":172},[159,12892,634],{"class":176},[96,12894,12895],{"id":12895},"フロントバリデーションを実装",[13,12897,12898],{},"フォームから入力された値をバリデーションチェックします。しかし今回はせっかくvueを使っているのでフロントでバリデーションをしてあげましょう。例えばtitleが空でないかをチェックする場合以下の様にします。",[113,12900,12902],{"className":618,"code":12901,"filename":8654,"language":621,"meta":120,"style":120},"\u003Ctemplate>\n \u003Cdiv class=\"ccm-dashboard-content-inner\">\n \u003Ch3>アルバム新規追加\u003C\u002Fh3>\n \u003Chr>\n \u003Cform method=\"post\" @submit=\"checkForm\">\n \u003Clabel for=\"title\" class=\"control-label\">アルバムタイトル\u003C\u002Flabel>\n \u003Cinput type=\"text\" name=\"title\" class=\"form-control ccm-input-text\" v-model=\"title\">\n \u003Cp class=\"text-danger\" v-if=\"errTitle.length>0\">{{errTitle}}\u003C\u002Fp>\n\n \u003Cdiv class=\"ccm-dashboard-form-actions-wrapper\">\n \u003Cdiv class=\"ccm-dashboard-form-actions\">\n \u003Cbutton class=\"pull-left btn btn-primary\">\n 一覧へ戻る\n \u003C\u002Fbutton>\n \u003Cinput value=\"登録\" type=\"submit\" class=\"pull-right btn btn-primary\">\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fform>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\u003Cscript>\nexport default {\n name:'albumForm',\n props:['isEdit'],\n data(){\n return{\n title:'',\n errTitle:''\n }\n },\n methods:{\n checkForm($event){\n if(this.title.length >0){\n return true;\n }else{\n $event.preventDefault();\n ConcreteAlert.error({\n title:'入力項目に誤りがあります。',\n message:'アルバムタイトルが入力されていません。',\n delay:5000\n })\n this.errTitle = \"タイトルを入力してください。\"\n }\n }\n }\n}\n\u003C\u002Fscript>\n",[55,12903,12904,12912,12930,12946,12954,12984,13020,13068,13108,13112,13130,13148,13166,13170,13178,13216,13224,13232,13240,13248,13256,13264,13272,13286,13304,13310,13316,13326,13335,13339,13343,13349,13361,13384,13393,13403,13417,13430,13446,13462,13472,13478,13494,13498,13502,13506,13510],{"__ignoreMap":120},[159,12905,12906,12908,12910],{"class":161,"line":162},[159,12907,628],{"class":176},[159,12909,631],{"class":172},[159,12911,634],{"class":176},[159,12913,12914,12916,12918,12920,12922,12924,12926,12928],{"class":161,"line":169},[159,12915,639],{"class":176},[159,12917,408],{"class":172},[159,12919,3571],{"class":680},[159,12921,1658],{"class":176},[159,12923,1090],{"class":176},[159,12925,9536],{"class":180},[159,12927,1090],{"class":176},[159,12929,634],{"class":176},[159,12931,12932,12934,12936,12938,12940,12942,12944],{"class":161,"line":184},[159,12933,1649],{"class":176},[159,12935,96],{"class":172},[159,12937,1676],{"class":176},[159,12939,12522],{"class":463},[159,12941,662],{"class":176},[159,12943,96],{"class":172},[159,12945,634],{"class":176},[159,12947,12948,12950,12952],{"class":161,"line":195},[159,12949,1649],{"class":176},[159,12951,9564],{"class":172},[159,12953,634],{"class":176},[159,12955,12956,12958,12960,12962,12964,12966,12968,12970,12973,12975,12977,12980,12982],{"class":161,"line":212},[159,12957,1649],{"class":176},[159,12959,12543],{"class":172},[159,12961,12546],{"class":680},[159,12963,1658],{"class":176},[159,12965,1090],{"class":176},[159,12967,12553],{"class":180},[159,12969,1090],{"class":176},[159,12971,12972],{"class":680}," @submit",[159,12974,1658],{"class":176},[159,12976,1090],{"class":176},[159,12978,12979],{"class":180},"checkForm",[159,12981,1090],{"class":176},[159,12983,634],{"class":176},[159,12985,12986,12988,12990,12992,12994,12996,12998,13000,13002,13004,13006,13008,13010,13012,13014,13016,13018],{"class":161,"line":233},[159,12987,1720],{"class":176},[159,12989,12564],{"class":172},[159,12991,12567],{"class":680},[159,12993,1658],{"class":176},[159,12995,1090],{"class":176},[159,12997,173],{"class":180},[159,12999,1090],{"class":176},[159,13001,3571],{"class":680},[159,13003,1658],{"class":176},[159,13005,1090],{"class":176},[159,13007,12584],{"class":180},[159,13009,1090],{"class":176},[159,13011,1676],{"class":176},[159,13013,12591],{"class":463},[159,13015,662],{"class":176},[159,13017,12564],{"class":172},[159,13019,634],{"class":176},[159,13021,13022,13024,13026,13028,13030,13032,13034,13036,13038,13040,13042,13044,13046,13048,13050,13052,13054,13056,13058,13060,13062,13064,13066],{"class":161,"line":244},[159,13023,1720],{"class":176},[159,13025,2240],{"class":172},[159,13027,2243],{"class":680},[159,13029,1658],{"class":176},[159,13031,1090],{"class":176},[159,13033,119],{"class":180},[159,13035,1090],{"class":176},[159,13037,4286],{"class":680},[159,13039,1658],{"class":176},[159,13041,1090],{"class":176},[159,13043,173],{"class":180},[159,13045,1090],{"class":176},[159,13047,3571],{"class":680},[159,13049,1658],{"class":176},[159,13051,1090],{"class":176},[159,13053,12632],{"class":180},[159,13055,1090],{"class":176},[159,13057,12637],{"class":680},[159,13059,1658],{"class":176},[159,13061,1090],{"class":176},[159,13063,173],{"class":180},[159,13065,1090],{"class":176},[159,13067,634],{"class":176},[159,13069,13070,13072,13074,13076,13078,13080,13083,13085,13088,13090,13092,13095,13097,13099,13102,13104,13106],{"class":161,"line":255},[159,13071,1720],{"class":176},[159,13073,13],{"class":172},[159,13075,3571],{"class":680},[159,13077,1658],{"class":176},[159,13079,1090],{"class":176},[159,13081,13082],{"class":180},"text-danger",[159,13084,1090],{"class":176},[159,13086,13087],{"class":680}," v-if",[159,13089,1658],{"class":176},[159,13091,1090],{"class":176},[159,13093,13094],{"class":180},"errTitle.length>0",[159,13096,1090],{"class":176},[159,13098,1676],{"class":176},[159,13100,13101],{"class":463},"{{errTitle}}",[159,13103,662],{"class":176},[159,13105,13],{"class":172},[159,13107,634],{"class":176},[159,13109,13110],{"class":161,"line":267},[159,13111,453],{"emptyLinePlaceholder":452},[159,13113,13114,13116,13118,13120,13122,13124,13126,13128],{"class":161,"line":279},[159,13115,1720],{"class":176},[159,13117,408],{"class":172},[159,13119,3571],{"class":680},[159,13121,1658],{"class":176},[159,13123,1090],{"class":176},[159,13125,10003],{"class":180},[159,13127,1090],{"class":176},[159,13129,634],{"class":176},[159,13131,13132,13134,13136,13138,13140,13142,13144,13146],{"class":161,"line":782},[159,13133,9604],{"class":176},[159,13135,408],{"class":172},[159,13137,3571],{"class":680},[159,13139,1658],{"class":176},[159,13141,1090],{"class":176},[159,13143,10022],{"class":180},[159,13145,1090],{"class":176},[159,13147,634],{"class":176},[159,13149,13150,13152,13154,13156,13158,13160,13162,13164],{"class":161,"line":787},[159,13151,9614],{"class":176},[159,13153,2279],{"class":172},[159,13155,3571],{"class":680},[159,13157,1658],{"class":176},[159,13159,1090],{"class":176},[159,13161,12050],{"class":180},[159,13163,1090],{"class":176},[159,13165,634],{"class":176},[159,13167,13168],{"class":161,"line":796},[159,13169,12710],{"class":463},[159,13171,13172,13174,13176],{"class":161,"line":804},[159,13173,9956],{"class":176},[159,13175,2279],{"class":172},[159,13177,634],{"class":176},[159,13179,13180,13182,13184,13186,13188,13190,13192,13194,13196,13198,13200,13202,13204,13206,13208,13210,13212,13214],{"class":161,"line":810},[159,13181,9614],{"class":176},[159,13183,2240],{"class":172},[159,13185,2254],{"class":680},[159,13187,1658],{"class":176},[159,13189,1090],{"class":176},[159,13191,12733],{"class":180},[159,13193,1090],{"class":176},[159,13195,2243],{"class":680},[159,13197,1658],{"class":176},[159,13199,1090],{"class":176},[159,13201,12744],{"class":180},[159,13203,1090],{"class":176},[159,13205,3571],{"class":680},[159,13207,1658],{"class":176},[159,13209,1090],{"class":176},[159,13211,10052],{"class":180},[159,13213,1090],{"class":176},[159,13215,634],{"class":176},[159,13217,13218,13220,13222],{"class":161,"line":816},[159,13219,9699],{"class":176},[159,13221,408],{"class":172},[159,13223,634],{"class":176},[159,13225,13226,13228,13230],{"class":161,"line":822},[159,13227,1745],{"class":176},[159,13229,408],{"class":172},[159,13231,634],{"class":176},[159,13233,13234,13236,13238],{"class":161,"line":2996},[159,13235,1754],{"class":176},[159,13237,12543],{"class":172},[159,13239,634],{"class":176},[159,13241,13242,13244,13246],{"class":161,"line":3012},[159,13243,653],{"class":176},[159,13245,408],{"class":172},[159,13247,634],{"class":176},[159,13249,13250,13252,13254],{"class":161,"line":3034},[159,13251,662],{"class":176},[159,13253,631],{"class":172},[159,13255,634],{"class":176},[159,13257,13258,13260,13262],{"class":161,"line":3040},[159,13259,628],{"class":176},[159,13261,673],{"class":172},[159,13263,634],{"class":176},[159,13265,13266,13268,13270],{"class":161,"line":3051},[159,13267,681],{"class":684},[159,13269,685],{"class":684},[159,13271,793],{"class":176},[159,13273,13274,13276,13278,13280,13282,13284],{"class":161,"line":3057},[159,13275,693],{"class":172},[159,13277,177],{"class":176},[159,13279,475],{"class":176},[159,13281,12171],{"class":180},[159,13283,475],{"class":176},[159,13285,304],{"class":176},[159,13287,13288,13290,13292,13294,13296,13298,13300,13302],{"class":161,"line":3063},[159,13289,12180],{"class":172},[159,13291,177],{"class":176},[159,13293,5868],{"class":463},[159,13295,475],{"class":176},[159,13297,8740],{"class":180},[159,13299,475],{"class":176},[159,13301,5874],{"class":463},[159,13303,304],{"class":176},[159,13305,13306,13308],{"class":161,"line":3069},[159,13307,10140],{"class":172},[159,13309,4744],{"class":176},[159,13311,13312,13314],{"class":161,"line":3075},[159,13313,790],{"class":684},[159,13315,688],{"class":176},[159,13317,13318,13320,13322,13324],{"class":161,"line":3080},[159,13319,12867],{"class":172},[159,13321,177],{"class":176},[159,13323,2469],{"class":176},[159,13325,304],{"class":176},[159,13327,13328,13331,13333],{"class":161,"line":3089},[159,13329,13330],{"class":172}," errTitle",[159,13332,177],{"class":176},[159,13334,12872],{"class":176},[159,13336,13337],{"class":161,"line":3094},[159,13338,807],{"class":176},[159,13340,13341],{"class":161,"line":3113},[159,13342,813],{"class":176},[159,13344,13345,13347],{"class":161,"line":3118},[159,13346,10186],{"class":172},[159,13348,7133],{"class":176},[159,13350,13351,13354,13356,13359],{"class":161,"line":3131},[159,13352,13353],{"class":172}," checkForm",[159,13355,716],{"class":176},[159,13357,13358],{"class":2361},"$event",[159,13360,2369],{"class":176},[159,13362,13363,13365,13367,13369,13371,13373,13376,13378,13380,13382],{"class":161,"line":3136},[159,13364,10256],{"class":684},[159,13366,716],{"class":172},[159,13368,10311],{"class":176},[159,13370,173],{"class":463},[159,13372,770],{"class":176},[159,13374,13375],{"class":463},"length",[159,13377,2293],{"class":176},[159,13379,9760],{"class":263},[159,13381,767],{"class":172},[159,13383,688],{"class":176},[159,13385,13386,13389,13391],{"class":161,"line":3142},[159,13387,13388],{"class":684}," return",[159,13390,10337],{"class":275},[159,13392,779],{"class":176},[159,13394,13395,13398,13401],{"class":161,"line":3152},[159,13396,13397],{"class":176}," }",[159,13399,13400],{"class":684},"else",[159,13402,688],{"class":176},[159,13404,13405,13408,13410,13413,13415],{"class":161,"line":3165},[159,13406,13407],{"class":463}," $event",[159,13409,770],{"class":176},[159,13411,13412],{"class":712},"preventDefault",[159,13414,776],{"class":172},[159,13416,779],{"class":176},[159,13418,13419,13422,13424,13426,13428],{"class":161,"line":3180},[159,13420,13421],{"class":463}," ConcreteAlert",[159,13423,770],{"class":176},[159,13425,7475],{"class":712},[159,13427,716],{"class":172},[159,13429,688],{"class":176},[159,13431,13432,13435,13437,13439,13442,13444],{"class":161,"line":3188},[159,13433,13434],{"class":172}," title",[159,13436,177],{"class":176},[159,13438,475],{"class":176},[159,13440,13441],{"class":180},"入力項目に誤りがあります。",[159,13443,475],{"class":176},[159,13445,304],{"class":176},[159,13447,13448,13451,13453,13455,13458,13460],{"class":161,"line":3194},[159,13449,13450],{"class":172}," message",[159,13452,177],{"class":176},[159,13454,475],{"class":176},[159,13456,13457],{"class":180},"アルバムタイトルが入力されていません。",[159,13459,475],{"class":176},[159,13461,304],{"class":176},[159,13463,13464,13467,13469],{"class":161,"line":7956},[159,13465,13466],{"class":172}," delay",[159,13468,177],{"class":176},[159,13470,13471],{"class":263},"5000\n",[159,13473,13474,13476],{"class":161,"line":7961},[159,13475,10615],{"class":176},[159,13477,1866],{"class":172},[159,13479,13480,13482,13485,13487,13489,13492],{"class":161,"line":10163},[159,13481,10330],{"class":176},[159,13483,13484],{"class":463},"errTitle",[159,13486,750],{"class":176},[159,13488,1115],{"class":176},[159,13490,13491],{"class":180},"タイトルを入力してください。",[159,13493,1240],{"class":176},[159,13495,13496],{"class":161,"line":4},[159,13497,8719],{"class":176},[159,13499,13500],{"class":161,"line":10178},[159,13501,807],{"class":176},[159,13503,13504],{"class":161,"line":10183},[159,13505,2010],{"class":176},[159,13507,13508],{"class":161,"line":10191},[159,13509,819],{"class":176},[159,13511,13512,13514,13516],{"class":161,"line":10204},[159,13513,662],{"class":176},[159,13515,673],{"class":172},[159,13517,634],{"class":176},[13,13519,13520,13522,13523,13526,13527,13529,13530,13532],{},[55,13521,12543],{},"の箇所に",[55,13524,13525],{},"@submit=\"checkForm\"","というイベントを作成。これはこのformがsubmitされた際に",[55,13528,12979],{},"というメソッドを発火させるという意味です。そして",[55,13531,12979],{},"ではtitleの値が空かどうかを判断しています。",[13,13534,13535,13536,13539,13540,13542,13543,13546,13547,13550,13551,13553],{},"もし空でない場合は",[55,13537,13538],{},"return true","となって",[55,13541,12744],{},"が通って、サーバーへ値が送信されます。からの場合は",[55,13544,13545],{},"$event.preventDefault();","が実行されてsubmitされません。そして",[55,13548,13549],{},"ConcreteAlert.error","という8.4系から使用できるconcrete5のフラッシュメッセージのjsを出しています。（",[55,13552,13549],{},"は特に何も読み込まないでも使える）",[13,13555,13556],{},"空で「登録」を押すと以下の様になります。",[833,13558],{":src":13559,":width":4947},"'_mix\u002Fsch-2020-08-27-0.07.18-768x531.png'",[13,13561,13562,13564],{},[55,13563,13545],{},"によってサーバーにデータは送信されず、ユーザーに対してエラーを表示できました。",[6292,13566,13568],{"id":13567},"eslintがある時のchips","ESLintがある時のchips",[13,13570,13571,13574],{},[55,13572,13573],{},"ConcreteAlert"," はconcrete5が用意してくれた便利なフラッシュメッセージです。しかし、ESLint付きのvueCLI内で使用ようとすると、ビルド時にこの様に怒られます。",[113,13576,13579],{"className":13577,"code":13578,"language":119},[116],"ERROR Failed to compile with 1 errors 23:50:16\n\n error in .\u002Fsrc\u002Fcomponents\u002Fform.vue\n\nModule Error (from .\u002Fnode_modules\u002Feslint-loader\u002Findex.js):\n\n\u002FApplications\u002FMAMP\u002Fhtdocs\u002Fc5test\u002Fpackages\u002Fvuetest\u002Fjs\u002Fpackageui\u002Fsrc\u002Fcomponents\u002Fform.vue\n 40:17 error 'ConcreteAlert' is not defined no-undef\n\n✖ 1 problem (1 error, 0 warnings)\n",[55,13580,13578],{"__ignoreMap":120},[13,13582,13583,13584,13586,13587,13589],{},"そうです。vueプロジェクト内には",[55,13585,13573],{}," を定義したjsファイルがない、というかconcreteが用意したjsを読み込めないのでこの様に怒られます。これだとビルドできないので",[55,13588,1051],{},"のeslintの設定に以下の記述をします。",[113,13591,13594],{"className":13592,"code":13593,"language":119},[116]," \"eslintConfig\": {\n　　\"globals\":{\n \"ConcreteAlert\": true,\n }\n },\n",[55,13595,13593],{"__ignoreMap":120},[13,13597,13598,13599,13601],{},"こうするとESLintは「ConcreteAlertってのはグローバルな奴なんだな〜。」と認識してくれて、実際にvueプロジェクト外にある",[55,13600,13573],{},"に対して怒らなくなります。",[47,13603,13604],{"id":13604},"バックエンド実装",[13,13606,13607],{},"vueを用いてまずはアルバムのタイトルだけを入力できるフォームを作りました。そしてこのタイトルをDBに挿入するまで行います。と言ってもシングルページコントローラーを以下の様に記述します。",[113,13609,13611],{"className":6346,"code":13610,"filename":8185,"language":6349,"meta":120,"style":120},"\u003C?php\nnamespace Concrete\\Package\\Vuetest\\Controller\\SinglePage\\Dashboard;\ndefined('C5_EXECUTE') or die('Access Denied.');\nuse \\Concrete\\Core\\Page\\Controller\\DashboardPageController;\nuse Concrete\\Core\\Routing\\Redirect;\nuse Concrete\\Core\\Http\\Request;\n\n\nuse Core;\nuse Database;\n\nclass Vuetest extends DashboardPageController\n{\n public $packageHandle = 'vuetest';\n\n public function on_start()\n {\n $this->requireAsset('package-vue-production');\n }\n\n public function view() {\n }\n\n public function add(){\n if(Request::isPost() == true){\n $title = $this->post('title');\n\n if(empty($title)==false){\n $db = Database::connection();\n $db->executeQuery(\"START TRANSACTION\");\n $db->executeQuery(\n 'INSERT album SET `title`=?, `created`=now(), `modified`=now()',\n array($title)\n );\n $db->executeQuery(\"COMMIT\");\n Redirect::to('\u002Fdashboard\u002Fvuetest')->send();\n }else{\n Redirect::to('\u002Fdashboard\u002Fvuetest')->send();\n }\n\n }else{\n $this->render('\u002Fdashboard\u002Fvuetest\u002Fadd');\n }\n }\n}\n",[55,13612,13613,13617,13622,13626,13631,13636,13641,13645,13649,13654,13659,13663,13667,13671,13675,13679,13684,13688,13692,13696,13700,13704,13708,13712,13716,13721,13726,13730,13735,13740,13745,13750,13755,13760,13765,13770,13775,13780,13784,13788,13792,13796,13801,13805,13809],{"__ignoreMap":120},[159,13614,13615],{"class":161,"line":162},[159,13616,6356],{},[159,13618,13619],{"class":161,"line":169},[159,13620,13621],{},"namespace Concrete\\Package\\Vuetest\\Controller\\SinglePage\\Dashboard;\n",[159,13623,13624],{"class":161,"line":184},[159,13625,8769],{},[159,13627,13628],{"class":161,"line":195},[159,13629,13630],{},"use \\Concrete\\Core\\Page\\Controller\\DashboardPageController;\n",[159,13632,13633],{"class":161,"line":212},[159,13634,13635],{},"use Concrete\\Core\\Routing\\Redirect;\n",[159,13637,13638],{"class":161,"line":233},[159,13639,13640],{},"use Concrete\\Core\\Http\\Request;\n",[159,13642,13643],{"class":161,"line":244},[159,13644,453],{"emptyLinePlaceholder":452},[159,13646,13647],{"class":161,"line":255},[159,13648,453],{"emptyLinePlaceholder":452},[159,13650,13651],{"class":161,"line":267},[159,13652,13653],{},"use Core;\n",[159,13655,13656],{"class":161,"line":279},[159,13657,13658],{},"use Database;\n",[159,13660,13661],{"class":161,"line":782},[159,13662,453],{"emptyLinePlaceholder":452},[159,13664,13665],{"class":161,"line":787},[159,13666,11794],{},[159,13668,13669],{"class":161,"line":796},[159,13670,688],{},[159,13672,13673],{"class":161,"line":804},[159,13674,11803],{},[159,13676,13677],{"class":161,"line":810},[159,13678,453],{"emptyLinePlaceholder":452},[159,13680,13681],{"class":161,"line":816},[159,13682,13683],{}," public function on_start()\n",[159,13685,13686],{"class":161,"line":822},[159,13687,9218],{},[159,13689,13690],{"class":161,"line":2996},[159,13691,11822],{},[159,13693,13694],{"class":161,"line":3012},[159,13695,2010],{},[159,13697,13698],{"class":161,"line":3034},[159,13699,453],{"emptyLinePlaceholder":452},[159,13701,13702],{"class":161,"line":3040},[159,13703,11835],{},[159,13705,13706],{"class":161,"line":3051},[159,13707,2010],{},[159,13709,13710],{"class":161,"line":3057},[159,13711,453],{"emptyLinePlaceholder":452},[159,13713,13714],{"class":161,"line":3063},[159,13715,11853],{},[159,13717,13718],{"class":161,"line":3069},[159,13719,13720],{}," if(Request::isPost() == true){\n",[159,13722,13723],{"class":161,"line":3075},[159,13724,13725],{}," $title = $this->post('title');\n",[159,13727,13728],{"class":161,"line":3080},[159,13729,453],{"emptyLinePlaceholder":452},[159,13731,13732],{"class":161,"line":3089},[159,13733,13734],{}," if(empty($title)==false){\n",[159,13736,13737],{"class":161,"line":3094},[159,13738,13739],{}," $db = Database::connection();\n",[159,13741,13742],{"class":161,"line":3113},[159,13743,13744],{}," $db->executeQuery(\"START TRANSACTION\");\n",[159,13746,13747],{"class":161,"line":3118},[159,13748,13749],{}," $db->executeQuery(\n",[159,13751,13752],{"class":161,"line":3131},[159,13753,13754],{}," 'INSERT album SET `title`=?, `created`=now(), `modified`=now()',\n",[159,13756,13757],{"class":161,"line":3136},[159,13758,13759],{}," array($title)\n",[159,13761,13762],{"class":161,"line":3142},[159,13763,13764],{}," );\n",[159,13766,13767],{"class":161,"line":3152},[159,13768,13769],{}," $db->executeQuery(\"COMMIT\");\n",[159,13771,13772],{"class":161,"line":3165},[159,13773,13774],{}," Redirect::to('\u002Fdashboard\u002Fvuetest')->send();\n",[159,13776,13777],{"class":161,"line":3180},[159,13778,13779],{}," }else{\n",[159,13781,13782],{"class":161,"line":3188},[159,13783,13774],{},[159,13785,13786],{"class":161,"line":3194},[159,13787,8719],{},[159,13789,13790],{"class":161,"line":7956},[159,13791,453],{"emptyLinePlaceholder":452},[159,13793,13794],{"class":161,"line":7961},[159,13795,9446],{},[159,13797,13798],{"class":161,"line":10163},[159,13799,13800],{}," $this->render('\u002Fdashboard\u002Fvuetest\u002Fadd');\n",[159,13802,13803],{"class":161,"line":4},[159,13804,807],{},[159,13806,13807],{"class":161,"line":10178},[159,13808,2010],{},[159,13810,13811],{"class":161,"line":10183},[159,13812,819],{},[13,13814,13815,13817,13818,13821,13822,13825],{},[55,13816,10041],{}," でpostを送ると",[55,13819,13820],{},"add()","にて処理が行われます。",[55,13823,13824],{},"Request::isPost()","というメソッドを用いてリクエストがpostかどうかをチェックします。postであれば値をDBへ挿入するスクリプトを実行し、そうでなければ新規追加の画面を表示します。",[13,13827,13828,13831,13832,13835,13836,13839,13840,13843],{},[55,13829,13830],{},"DashboardPageController","配下では",[55,13833,13834],{},"$this->post('name')"," というメソッドで対応するname属性のinputの値を取得することができます！先ほどのフォームではタイトルの値を",[55,13837,13838],{},"name=\"title\"","としていたので",[55,13841,13842],{},"$title = $this->post('title');","で取得します",[96,13845,13847],{"id":13846},"chips-必ずバックエンドでもバリデーションを実装する","chips 必ずバックエンドでもバリデーションを実装する",[13,13849,13850],{},"よくみると下記の様にタイトルの値を検査しています。",[113,13852,13854],{"className":6346,"code":13853,"filename":8185,"language":6349,"meta":120,"style":120},"if(empty($title)==false){\n ...\n}\n",[55,13855,13856,13861,13866],{"__ignoreMap":120},[159,13857,13858],{"class":161,"line":162},[159,13859,13860],{},"if(empty($title)==false){\n",[159,13862,13863],{"class":161,"line":169},[159,13864,13865],{}," ...\n",[159,13867,13868],{"class":161,"line":184},[159,13869,819],{},[408,13871,13873,13874],{"className":13872},[411,8643],"\n「フロントエンド でタイトルの値をバリデーションしたから別にやらなくても良くない？」というのは厳禁です。postで来た値は必ずバックエンドで同様にバリデーションをかけます。",[13875,13876,13877],"b",{},"なぜならブラウザのconsoleでフロントでの値は偽造することもでき、フロントエンドのバリデーションを不正にスルーできるからです。",[13,13879,13880],{},"vueで行っているバリデーションはあくまでユーザー補助、UX的な物でありセキュリティの観点からは言えばガバガバです。エンドユーザーが偽造ができないバックエンドであれば確実にバリデーションをすることができます。",[13,13882,13883],{},"dashbord配下は基本的にサイト管理者が触る物なので、不正な値を入れようとする人はいないと思いますが、フロントからpostされた値は基本的に信用しないスタイルを貫いた方が無難です。",[47,13885,13886],{"id":13886},"データを入れてみる",[13,13888,13889,13890,13892],{},"では早速使ってみましょう。",[55,13891,10041],{}," にアクセスするとタイトル入力フォームが出てきました。仮に「テスト」と入力。そして「登録」を押します。",[833,13894],{":src":13895,":width":4947},"'_mix\u002Fsch-2020-08-27-0.48.59-768x203.png'",[13,13897,13898],{},"一覧のページにリダイレクトされました。ちゃんと挿入されたか、phpmyadminでみてみましょう。",[833,13900],{":src":13901,":width":2147,":center":837},"'_mix\u002Fsch-2020-08-27-0.51.36-768x340.png'",[13,13903,13904],{},"いましたね。titleが「テスト」となっているので、正しくデータが入力されました。",[47,13906,8086],{"id":8085},[13,13908,13909],{},"以上がvueとバックエンド部分の一通りの実装でした。",[75,13911,13912,13915,13918],{},[28,13913,13914],{},"シングルページにvueのエントリーポイントを作る",[28,13916,13917],{},"エントリポイントにレンダリングされる様にコンポーネントを設定",[28,13919,13920],{},"jsをシングルページに読み込む",[13,13922,13923],{},"¥以上を意識すればconcrete5のシングルページに自由にvueを用いてUIを構築できます。あとはvueの使い方とバックエンドの設計を頑張るだけです。そして次回は編集画面と一覧画面の作成をしていきます。",[907,13925,13926],{},"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 .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}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 .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}",{"title":120,"searchDepth":184,"depth":184,"links":13928},[13929,13932,13933,13936,13937,13943,13946,13947],{"id":11514,"depth":169,"text":11514,"children":13930},[13931],{"id":11534,"depth":184,"text":11535},{"id":11544,"depth":169,"text":11545},{"id":11765,"depth":169,"text":11766,"children":13934},[13935],{"id":11769,"depth":184,"text":11770},{"id":4153,"depth":169,"text":4153},{"id":12457,"depth":169,"text":12457,"children":13938},[13939,13940],{"id":12466,"depth":184,"text":12467},{"id":12895,"depth":184,"text":12895,"children":13941},[13942],{"id":13567,"depth":195,"text":13568},{"id":13604,"depth":169,"text":13604,"children":13944},[13945],{"id":13846,"depth":184,"text":13847},{"id":13886,"depth":169,"text":13886},{"id":8085,"depth":169,"text":8086},[206],"2020-08-27","oncrete5にVueCLIを使ってUIを構築する。データの登録。",{},{"title":11497,"description":13950},"series\u002Fconcrete5vue-2",[11492,222,621],"s28kXBmZtYl1vPtmgjcP0QiTjdZEL9Zwpvzi-377-0o",{"id":13957,"title":11504,"body":13958,"category":14614,"createdAt":14615,"description":11489,"extension":928,"index":162,"meta":14616,"navigation":452,"path":14617,"publish":452,"seo":14618,"series":11488,"seriesTitle":11489,"stem":14619,"tag":14620,"thumbnail":11493,"updatedAt":937,"__hash__":14621},"series\u002Fseries\u002Fconcrete5vue-1.md",{"type":10,"value":13959,"toc":14601},[13960,13963,13966,13970,13973,14035,14038,14041,14044,14047,14058,14061,14065,14068,14071,14074,14077,14080,14086,14089,14092,14098,14101,14107,14113,14133,14136,14139,14142,14145,14148,14161,14267,14273,14283,14290,14446,14461,14472,14478,14540,14546,14549,14552,14557,14583,14586,14592,14595,14598],[13,13961,13962],{},"こんにちはjunです。今回はconcrete5というCMSでVueを使ったパッケージのUIを作成していこうと思います。今回の記事ではコンポーネントを作成する前の、concrete5にvueプロジェクトを作成してCMSに結びつける環境構築まで行います。",[13,13964,13965],{},"またConcrete5とそのカスタマイズ方法についてある程度熟知している人向け、基準としてはカスタムパッケージを作成したことがある人向けの記事となります。対象とするConcrete5のバージョンは8.4以降となります。",[47,13967,13969],{"id":13968},"なぜvue","なぜVue？",[13,13971,13972],{},"なぜVueを使うのか。それはPHPとjqueryによるUI構築が非常に面倒になったからです。Concrete5にはフォーム（テキストエリアとかCMSからのファイル選択フォーム）をPHPで出力してくれる以下の様なヘルパーが存在します。",[113,13974,13976],{"className":6346,"code":13975,"language":6349,"meta":120,"style":120},"\u002F\u002F ヘルパーを読み込む\n$form = Core::make('helper\u002Fform');\n\n\u002F\u002Fテキストinput\necho $form->text($name, $default_value);\n\n\u002F\u002Fテキストエリア\necho $form-> textarea($name, $default_value);\n\n\u002F\u002F ファイルマネージャーヘルパー\n$file_selector = Core::make('helper\u002Fconcrete\u002Ffile_manager');\necho $file_selector->file('label', 'name_attr', 'Select Photo', $default_fileObj);\n",[55,13977,13978,13983,13988,13992,13997,14002,14006,14011,14016,14020,14025,14030],{"__ignoreMap":120},[159,13979,13980],{"class":161,"line":162},[159,13981,13982],{},"\u002F\u002F ヘルパーを読み込む\n",[159,13984,13985],{"class":161,"line":169},[159,13986,13987],{},"$form = Core::make('helper\u002Fform');\n",[159,13989,13990],{"class":161,"line":184},[159,13991,453],{"emptyLinePlaceholder":452},[159,13993,13994],{"class":161,"line":195},[159,13995,13996],{},"\u002F\u002Fテキストinput\n",[159,13998,13999],{"class":161,"line":212},[159,14000,14001],{},"echo $form->text($name, $default_value);\n",[159,14003,14004],{"class":161,"line":233},[159,14005,453],{"emptyLinePlaceholder":452},[159,14007,14008],{"class":161,"line":244},[159,14009,14010],{},"\u002F\u002Fテキストエリア\n",[159,14012,14013],{"class":161,"line":255},[159,14014,14015],{},"echo $form-> textarea($name, $default_value);\n",[159,14017,14018],{"class":161,"line":267},[159,14019,453],{"emptyLinePlaceholder":452},[159,14021,14022],{"class":161,"line":279},[159,14023,14024],{},"\u002F\u002F ファイルマネージャーヘルパー\n",[159,14026,14027],{"class":161,"line":782},[159,14028,14029],{},"$file_selector = Core::make('helper\u002Fconcrete\u002Ffile_manager');\n",[159,14031,14032],{"class":161,"line":787},[159,14033,14034],{},"echo $file_selector->file('label', 'name_attr', 'Select Photo', $default_fileObj);\n",[13,14036,14037],{},"上記のコードをページ上で実行すれば以下の様にフォームが現れます。",[833,14039],{":src":14040,":width":4947},"'_mix\u002Fformhelpertest-768x272.png'",[13,14042,14043],{},"上から順番にテキストインプット、テキストエリア、そしてconcrete５純正のファイルマネージャーが出現します。name属性が与えられ、postを通じてデータを送ることができます。",[13,14045,14046],{},"簡単なブロックやパッケージUIであれば問題ないのですが、",[75,14048,14049,14052,14055],{},[28,14050,14051],{},"フロント側のバリデーションを実装する",[28,14053,14054],{},"決まったフォームを複数生成する",[28,14056,14057],{},"フォーム同士が入力値で依存させる場合（入力値でフォームのパターンが変わる）",[13,14059,14060],{},"上記の際にPHPとjqueryだけでは非常に苦労して工数もかかります。",[96,14062,14064],{"id":14063},"vueを使えばリッチなuiが作成可能","Vueを使えばリッチなUIが作成可能",[13,14066,14067],{},"今流行りのリッチなUI、フォームはほとんどがVue、React、Backbone,jsなどHTMLテンプレート、jsによる状態管理を行うことで簡単に実装できます。工数を抑えつつも、これらのライブラリを用いることでリッチなUIを作成することもできます。",[13,14069,14070],{},"今回の記事ではVue CLIを用いて作成したUIをconcrete5のパッケージ上で表示させ、入力内容の追加・更新・削除まで行える様に実装していきます。原理がわかれば意外と簡単です。",[47,14072,14073],{"id":14073},"パッケージの制作準備",[96,14075,14076],{"id":14076},"パッケージの専用のディレクトリを作成",[13,14078,14079],{},"それではVueで構築したUIを持つパッケージを作成していきましょう。pckageディレクトリ配下にvuetestというカスタムパッケージディレクトリを作ります。またディレクトリ構成は以下の通りにします。",[113,14081,14084],{"className":14082,"code":14083,"language":119},[116],"documentroot $ cd .\u002Fpackage\npackage $ mkdir vuetest && touch ...\npackage $ tree vuetest\n.\u002F\n└── vuetest\n ├── controller.php\n ├── controllers\n │ └── single_page\n │ └── dashboard\n │ └── vuetest.php\n ├── db.xml\n ├── icon.png\n ├── js\n │\n └── single_pages\n └── dashboard\n └── vuetest\n └── view.php\n",[55,14085,14083],{"__ignoreMap":120},[96,14087,14088],{"id":14088},"vueプロジェクトを作成",[13,14090,14091],{},"パッケージに必要なコントローラーやUIを表示するダッシュボード上のシングルページとそのコントローラーも用意します。そしてjsディレクトリを作成してその中にvue cliを用いてプロジェクトを作成します。",[113,14093,14096],{"className":14094,"code":14095,"language":119},[116],"package $ cd vuetest\u002Fjs\njs $ vue create packageui\n\nVue CLI v4.4.6\n? Please pick a preset: default (babel, eslint) #default\n\nVue CLI v4.4.6\n✨ Creating project in documentroot\u002Fvuetest\u002Fjs\u002Fpackageui.\n🗃 Initializing git repository...\n⚙️ Installing CLI plugins. This might take a while... \n\n🎉 Successfully created project packageui.\n\njs $ cd packageui && tree -L 1\n.\n├── README.md\n├── babel.config.js\n├── node_modules\n├── package-lock.json\n├── package.json\n├── public\n",[55,14097,14095],{"__ignoreMap":120},[13,14099,14100],{},"無事にvueのプロジェクトが作成されました。concrete5との都合によりvue.config.jsファイルを作成してwebpackの設定をいじります。",[113,14102,14105],{"className":14103,"code":14104,"language":119},[116],"packageui $ touch vue.config.js\n",[55,14106,14104],{"__ignoreMap":120},[113,14108,14111],{"className":14109,"code":14110,"language":119},[116],"module.exports = {\n configureWebpack: {\n output: {\n filename: '[name].js',\n chunkFilename: '[name].js'\n }\n },\n }\n",[55,14112,14110],{"__ignoreMap":120},[13,14114,14115,14116,225,14118,14121,14122,14125,14126,14129,14130,14132],{},"これは ",[55,14117,1066],{},[55,14119,14120],{},"npm run build --mode development","で",[55,14123,14124],{},".vue","ファイルを",[55,14127,14128],{},".js","ファイルにコンパイルして",[55,14131,387],{},"配下に配置される時に名前がいつも同じになる様に設定します。",[13,14134,14135],{},"buildをするとビルドされたファイルの名前にはハッシュされた英数字がつくのですが、これがビルドの度にころころ変わります。Concrete5でjsファイルをロードする場合は設定した名前が一致しないと読み込めませんので、ビルドの際に設定を変えなくて済む様に上記の設定をします。",[6292,14137,14138],{"id":14138},"もし複数のパッケージで共通のvueファイルを用いる場合",[13,14140,14141],{},"今回は vuetestというパッケージとそのディレクトリ配下に専用のvueプロジェクトを作成しますす。しかし複数のパッケージでvueファイルを使用したい場合、applicationディレクトリにjsディレクトリを作成し、vueプロジェクトを作成してください。",[96,14143,14144],{"id":14144},"コンパイルしたjsファイルをconcrete5と結びつける",[13,14146,14147],{},"vue cliでビルドするとdist配下にコンパイルされたjsファイルが生成されます。そのファイルとレンダー先のconcrete5上のページ（シングルページ）で読み込める様に、このjsファイルをCMSが読み込める様に設定します。",[13,14149,14150,14151,14153,14154,14156,14157,14160],{},"まずとりあえず以下の",[55,14152,982],{},"をビルドしてみます。レンダリング先に ",[55,14155,12326],{}," という要素があれば",[55,14158,14159],{},"Appコンポーネント","がレンダーされます。",[113,14162,14164],{"className":1805,"code":14163,"filename":1807,"language":1808,"meta":120,"style":120},"import Vue from 'vue'\nimport App from '.\u002FApp.vue'\n\nVue.config.productionTip = false\n\nnew Vue({\n render: h => h(App),\n}).$mount('#app')\n",[55,14165,14166,14180,14196,14200,14216,14220,14230,14247],{"__ignoreMap":120},[159,14167,14168,14170,14172,14174,14176,14178],{"class":161,"line":162},[159,14169,1815],{"class":684},[159,14171,8927],{"class":463},[159,14173,1821],{"class":684},[159,14175,1824],{"class":176},[159,14177,621],{"class":180},[159,14179,3048],{"class":176},[159,14181,14182,14184,14187,14189,14191,14194],{"class":161,"line":169},[159,14183,1815],{"class":684},[159,14185,14186],{"class":463}," App ",[159,14188,1821],{"class":684},[159,14190,1824],{"class":176},[159,14192,14193],{"class":180},".\u002FApp.vue",[159,14195,3048],{"class":176},[159,14197,14198],{"class":161,"line":184},[159,14199,453],{"emptyLinePlaceholder":452},[159,14201,14202,14204,14206,14208,14210,14212,14214],{"class":161,"line":195},[159,14203,8980],{"class":463},[159,14205,770],{"class":176},[159,14207,7243],{"class":463},[159,14209,770],{"class":176},[159,14211,8989],{"class":463},[159,14213,1658],{"class":176},[159,14215,276],{"class":275},[159,14217,14218],{"class":161,"line":212},[159,14219,453],{"emptyLinePlaceholder":452},[159,14221,14222,14224,14226,14228],{"class":161,"line":233},[159,14223,12389],{"class":176},[159,14225,9055],{"class":712},[159,14227,716],{"class":463},[159,14229,688],{"class":176},[159,14231,14232,14234,14236,14238,14240,14242,14245],{"class":161,"line":244},[159,14233,12400],{"class":712},[159,14235,177],{"class":176},[159,14237,9069],{"class":2361},[159,14239,9072],{"class":680},[159,14241,9069],{"class":712},[159,14243,14244],{"class":463},"(App)",[159,14246,304],{"class":176},[159,14248,14249,14251,14253,14255,14257,14259,14261,14263,14265],{"class":161,"line":255},[159,14250,1245],{"class":176},[159,14252,767],{"class":463},[159,14254,770],{"class":176},[159,14256,9093],{"class":712},[159,14258,716],{"class":463},[159,14260,475],{"class":176},[159,14262,1846],{"class":180},[159,14264,475],{"class":176},[159,14266,1866],{"class":463},[113,14268,14271],{"className":14269,"code":14270,"language":119},[116],"packageui ＄ npm run build\n.\n├── README.md\n├── babel.config.js\n├── dist\n│ ├── app.js\n│ ├── app.js.map\n│ ├── chunk-vendors.js\n│ ├── chunk-vendors.js.map\n│ ├── css\n│ ├── favicon.ico\n│ ├── img\n│ └── index.html\n├\n",[55,14272,14270],{"__ignoreMap":120},[13,14274,14275,14276,530,14279,14282],{},"ビルド成功。いらないものもありますが、",[55,14277,14278],{},"app.js",[55,14280,14281],{},"chunk-vendors.js","が読み込まれる様にすればOKです。",[13,14284,14285,14286,14289],{},"パッケージ専用のjsファイルで作成する場合はパッケージのインストールコントローラ（",[55,14287,14288],{},"package\u002Fvuetest\u002Fcontroller.php","）に以下の様な記述をします。",[113,14291,14294],{"className":6346,"code":14292,"filename":14293,"language":6349,"meta":120,"style":120},"\u003C?php\nnamespace Concrete\\Package\\Vuetest;\ndefined('C5_EXECUTE') or die('Access Denied.');\nuse \\Concrete\\Core\\Asset\\AssetList;\nuse \\Concrete\\Core\\Asset\\Asset;\n\nclass Controller extends \\Concrete\\Core\\Package\\Package {\n protected $pkgHandle = 'vuetest';\n protected $appVersionRequired = '5.7.4';\n protected $pkgVersion = '1.0.0';\n\n public function on_start()\n {\n $al = AssetList::getInstance();\n $al->register(\n 'javascript', 'package-vue-build', 'js\u002Fpackageui\u002Fdist\u002Fapp.js',\n array('version' => '1.0.0', 'position' => Asset::ASSET_POSITION_FOOTER, 'combine' => true),\n $this->pkgHandle\n );\n \n $al->register(\n 'javascript', 'package-vue-chunk', 'js\u002Fpackageui\u002Fdist\u002Fchunk-vendors.js',\n array('version' => '1.0.0', 'position' => Asset::ASSET_POSITION_FOOTER, 'combine' => true),\n $this->pkgHandle\n );\n \n $al->registerGroup('package-vue-production', array(\n array('javascript', 'package-vue-build'),\n array('javascript', 'package-vue-chunk'),\n )); \n }\n...\n}\n","controller.php",[55,14295,14296,14300,14305,14309,14314,14319,14323,14328,14333,14338,14343,14347,14351,14355,14360,14365,14370,14375,14380,14385,14389,14393,14398,14402,14406,14410,14414,14419,14424,14429,14434,14438,14442],{"__ignoreMap":120},[159,14297,14298],{"class":161,"line":162},[159,14299,6356],{},[159,14301,14302],{"class":161,"line":169},[159,14303,14304],{},"namespace Concrete\\Package\\Vuetest;\n",[159,14306,14307],{"class":161,"line":184},[159,14308,8769],{},[159,14310,14311],{"class":161,"line":195},[159,14312,14313],{},"use \\Concrete\\Core\\Asset\\AssetList;\n",[159,14315,14316],{"class":161,"line":212},[159,14317,14318],{},"use \\Concrete\\Core\\Asset\\Asset;\n",[159,14320,14321],{"class":161,"line":233},[159,14322,453],{"emptyLinePlaceholder":452},[159,14324,14325],{"class":161,"line":244},[159,14326,14327],{},"class Controller extends \\Concrete\\Core\\Package\\Package {\n",[159,14329,14330],{"class":161,"line":255},[159,14331,14332],{}," protected $pkgHandle = 'vuetest';\n",[159,14334,14335],{"class":161,"line":267},[159,14336,14337],{}," protected $appVersionRequired = '5.7.4';\n",[159,14339,14340],{"class":161,"line":279},[159,14341,14342],{}," protected $pkgVersion = '1.0.0';\n",[159,14344,14345],{"class":161,"line":782},[159,14346,453],{"emptyLinePlaceholder":452},[159,14348,14349],{"class":161,"line":787},[159,14350,13683],{},[159,14352,14353],{"class":161,"line":796},[159,14354,9218],{},[159,14356,14357],{"class":161,"line":804},[159,14358,14359],{}," $al = AssetList::getInstance();\n",[159,14361,14362],{"class":161,"line":810},[159,14363,14364],{}," $al->register(\n",[159,14366,14367],{"class":161,"line":816},[159,14368,14369],{}," 'javascript', 'package-vue-build', 'js\u002Fpackageui\u002Fdist\u002Fapp.js',\n",[159,14371,14372],{"class":161,"line":822},[159,14373,14374],{}," array('version' => '1.0.0', 'position' => Asset::ASSET_POSITION_FOOTER, 'combine' => true),\n",[159,14376,14377],{"class":161,"line":2996},[159,14378,14379],{}," $this->pkgHandle\n",[159,14381,14382],{"class":161,"line":3012},[159,14383,14384],{}," );\n",[159,14386,14387],{"class":161,"line":3034},[159,14388,11999],{},[159,14390,14391],{"class":161,"line":3040},[159,14392,14364],{},[159,14394,14395],{"class":161,"line":3051},[159,14396,14397],{}," 'javascript', 'package-vue-chunk', 'js\u002Fpackageui\u002Fdist\u002Fchunk-vendors.js',\n",[159,14399,14400],{"class":161,"line":3057},[159,14401,14374],{},[159,14403,14404],{"class":161,"line":3063},[159,14405,14379],{},[159,14407,14408],{"class":161,"line":3069},[159,14409,14384],{},[159,14411,14412],{"class":161,"line":3075},[159,14413,11999],{},[159,14415,14416],{"class":161,"line":3080},[159,14417,14418],{}," $al->registerGroup('package-vue-production', array(\n",[159,14420,14421],{"class":161,"line":3089},[159,14422,14423],{}," array('javascript', 'package-vue-build'),\n",[159,14425,14426],{"class":161,"line":3094},[159,14427,14428],{}," array('javascript', 'package-vue-chunk'),\n",[159,14430,14431],{"class":161,"line":3113},[159,14432,14433],{}," )); \n",[159,14435,14436],{"class":161,"line":3118},[159,14437,2010],{},[159,14439,14440],{"class":161,"line":3131},[159,14441,3801],{},[159,14443,14444],{"class":161,"line":3136},[159,14445,819],{},[13,14447,14448,14449,14452,14453,14456,14457,14460],{},"vuetestパッケージのコントローラーで",[55,14450,14451],{},"$al->register","を用いて、パスで指定したjsファイルを登録します。２つあるのでを",[55,14454,14455],{},"$al->registerGroup","用いてのp",[55,14458,14459],{},"ackage-vue-production","名前で２つのjsファイルを読み込む様にグルーピングします。",[13,14462,14463,14464,14467,14468,14471],{},"concrete5ではこの様なjs\u002Fcssのアセット登録システムがあり、登録をすれば適当にアセットが読み込むことができる様になります。",[20,14465,14466],{},"パッケージのコントローラーでは登録をした"," ので、次はjsファイルが必要な",[20,14469,14470],{},"ページのコントローラーで呼び出し"," を行います。",[13,14473,14474,14477],{},[55,14475,14476],{},"vuetest\u002Fsingle_pages\u002Fdashboard\u002Fvuetest\u002Fview.php"," に以下の様に記述します。",[113,14479,14481],{"className":6346,"code":14480,"language":6349,"meta":120,"style":120},"\u003C?php\nnamespace Concrete\\Package\\Vuetest\\Controller\\SinglePage\\Dashboard;\ndefined('C5_EXECUTE') or die('Access Denied.');\nuse \\Concrete\\Core\\Page\\Controller\\DashboardPageController;\n\nclass Vuetest extends DashboardPageController\n{\n public $packageHandle = 'vuetest';\n\n public function view() {\n $this->requireAsset('package-vue-production');\n $this->set('success', 'My success message');\n }\n}\n",[55,14482,14483,14487,14491,14495,14499,14503,14507,14511,14515,14519,14523,14527,14532,14536],{"__ignoreMap":120},[159,14484,14485],{"class":161,"line":162},[159,14486,6356],{},[159,14488,14489],{"class":161,"line":169},[159,14490,13621],{},[159,14492,14493],{"class":161,"line":184},[159,14494,8769],{},[159,14496,14497],{"class":161,"line":195},[159,14498,13630],{},[159,14500,14501],{"class":161,"line":212},[159,14502,453],{"emptyLinePlaceholder":452},[159,14504,14505],{"class":161,"line":233},[159,14506,11794],{},[159,14508,14509],{"class":161,"line":244},[159,14510,688],{},[159,14512,14513],{"class":161,"line":255},[159,14514,11803],{},[159,14516,14517],{"class":161,"line":267},[159,14518,453],{"emptyLinePlaceholder":452},[159,14520,14521],{"class":161,"line":279},[159,14522,11835],{},[159,14524,14525],{"class":161,"line":782},[159,14526,11822],{},[159,14528,14529],{"class":161,"line":787},[159,14530,14531],{}," $this->set('success', 'My success message');\n",[159,14533,14534],{"class":161,"line":796},[159,14535,2010],{},[159,14537,14538],{"class":161,"line":804},[159,14539,819],{},[13,14541,11925,14542,14545],{},[55,14543,14544],{},"$this->requireAsset('package-vue-production');","で「先ほど登録したjsアセットをこのページで読み込め！」と命令しています。設定した後、実際に該当ページで探してみましょう。",[833,14547],{":src":14548,":width":4947},"'_mix\u002Fsc-2020-08-01-19.52.09-768x133.png'",[13,14550,14551],{},"いました。\u002Fpackages\u002Fvuetest\u002Fjs\u002Fdist\u002F** と指定したパスにて読み込まれています。それではid=\"app\"を持つ適当なdivを作成して再度みてみましょう。",[13,14553,14554,14556],{},[55,14555,14476],{}," にて",[113,14558,14560],{"className":6346,"code":14559,"filename":11012,"language":6349,"meta":120,"style":120},"\u003C?php\ndefined('C5_EXECUTE') or die('Access Denied.');\n?>\n\n\u003Cdiv id=\"app\">\u003C\u002Fdiv>\n",[55,14561,14562,14566,14570,14574,14578],{"__ignoreMap":120},[159,14563,14564],{"class":161,"line":162},[159,14565,6356],{},[159,14567,14568],{"class":161,"line":169},[159,14569,8769],{},[159,14571,14572],{"class":161,"line":184},[159,14573,8774],{},[159,14575,14576],{"class":161,"line":195},[159,14577,453],{"emptyLinePlaceholder":452},[159,14579,14580],{"class":161,"line":212},[159,14581,14582],{},"\u003Cdiv id=\"app\">\u003C\u002Fdiv>\n",[833,14584],{":src":14585,":width":2147,":center":837},"'_mix\u002Fsh-2020-08-01-19.56.01-768x812.png'",[13,14587,14588,14589,14591],{},"パスの関係上レイアウトが崩れ、画像が読み込めていませんがvue側で記述した内容が無事にレンダリングされています。これでvueとconcrete5のセッティングは完了です。vueプロジェクトでコンポーネントを作成しながら、適切な",[55,14590,9010],{},"を用いてページ上にレンダーします。",[47,14593,14594],{"id":14594},"次はフォームコンポーネントの作成",[13,14596,14597],{},"以上がconcrete5のパッケージ上にvueプロジェクトを作成して、concrete5に結びつける方法でした。これでvueを使え、レンダーされる環境は整ったので次は情報を登録するための登録フォームと編集画面の作成を行っていきます。",[907,14599,14600],{},"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 .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}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 .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}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 .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}",{"title":120,"searchDepth":184,"depth":184,"links":14602},[14603,14606,14613],{"id":13968,"depth":169,"text":13969,"children":14604},[14605],{"id":14063,"depth":184,"text":14064},{"id":14073,"depth":169,"text":14073,"children":14607},[14608,14609,14612],{"id":14076,"depth":184,"text":14076},{"id":14088,"depth":184,"text":14088,"children":14610},[14611],{"id":14138,"depth":195,"text":14138},{"id":14144,"depth":184,"text":14144},{"id":14594,"depth":169,"text":14594},[206],"2020-08-25",{},"\u002Fseries\u002Fconcrete5vue-1",{"title":11504,"description":11489},"series\u002Fconcrete5vue-1",[11492,222,621],"SFdt3_VrU2GVgYjfNjC32zyOKCtr79IKO3992JqFQJo",1780987152337]