[{"data":1,"prerenderedAt":4555},["ShallowReactive",2],{"legacy-tag-gridsome":3,"legacy-tag-questions-gridsome":39,"legacy-tag-guides-gridsome":4125},{"id":4,"title":5,"body":6,"date":29,"description":30,"extension":31,"locale":32,"meta":33,"navigation":34,"path":35,"seo":36,"slug":37,"stem":37,"updated":29,"__hash__":38},"legacyTags\u002Fgridsome.md","Gridsome",{"type":7,"value":8,"toc":24},"minimark",[9,14,18,21],[10,11,13],"h2",{"id":12},"gridsomeとは何か","Gridsomeとは何か",[15,16,17],"p",{},"Vue.jsをベースにした静的サイトジェネレータです。",[15,19,20],{},"Vue.jsベースのフレームワークには、Nuxt.jsなどがありますが、どちらの良いところも取り入れつつ、静的サイトジェネレータ機能に特化することで、サーバーサイドレンダリング（SSR）を不要としているのが特徴です。",[15,22,23],{},"静的サイトジェネレータですが、基本はVue.jsなので、Vue.jsアプリとして構築することもできます。",{"title":25,"searchDepth":26,"depth":26,"links":27},"",2,[28],{"id":12,"depth":26,"text":13},"2021-04-01T00:00:00.000Z","Vue.jsをベースにした静的サイトジェネレータ。","md","ja",{},true,"\u002Fgridsome",{"title":5,"description":30},"gridsome","kaH986vVs7_3_2gjTgTar7ItWRfIlm6TrxfZfNk0Qqw",[40,138,184,267,312,384,470,508,599,659,725,782,861,913,990,1116,1322,1418,1477,1527,1576,1639,1699,1737,1834,1875,1930,1974,2031,2063,2104,2220,2271,2329,2369,2417,2536,2576,2619,2658,2708,2758,2801,2837,2873,2917,2966,3039,3082,3188,3226,3283,3340,3396,3468,3529,3599,3646,3709,3762,3810,3866,3907,3964,4026],{"id":41,"title":42,"author":43,"body":44,"category":130,"date":29,"description":42,"extension":31,"locale":32,"meta":131,"navigation":34,"path":132,"seo":133,"slug":134,"stem":135,"tag":136,"updated":29,"__hash__":137},"legacyQuestions\u002F20210401000000-GridsomeでTOC（目次）を自動生成したい.md","GridsomeでTOC（目次）を自動生成したい","koji-kadoma",{"type":7,"value":45,"toc":125},[46,49,52,62,65,68,72,75,85,88,94,97,103,106,110,113,119,122],[10,47,48],{"id":48},"vue-remarkを使う",[15,50,51],{},"Gridsomeでマークダウンファイルを使う場合は、",[53,54,55,59],"ol",{},[56,57,58],"li",{},"@gridsome\u002Fsource-filesystem",[56,60,61],{},"@gridsome\u002Fvue-remark",[15,63,64],{},"のどちらかのプラグインを使うのが公式のやり方です。",[15,66,67],{},"Gridsomeでサイトを作る紹介ページなどでは、@gridsome\u002Fsource-filesystemを使っている例が多いですが、@gridsome\u002Fsource-filesystemはToc（目次）を自動生成する機能がないため、@gridsome\u002Fvue-remarkを使います。",[10,69,71],{"id":70},"gridsomevue-remarkでtocを自動生成する方法","@gridsome\u002Fvue-remarkでToCを自動生成する方法",[15,73,74],{},"@gridsome\u002Fvue-remark単体ではTocの作成に対応していないので、プラグインを使います。",[76,77,82],"pre",{"className":78,"code":80,"language":81},[79],"language-text","yarn add @gridsome\u002Fvue-remark remark-toc\n","text",[83,84,80],"code",{"__ignoreMap":25},[15,86,87],{},"プラグインを使う旨をgridsome.config.jsに記述します。",[76,89,92],{"className":90,"code":91,"language":81},[79],"module.exports = {\n \u002F\u002F\n \u002F\u002F 省略\n \u002F\u002F\n plugins: [\n {\n use: '@gridsome\u002Fvue-remark',\n options: {\n \u002F\u002F\n \u002F\u002F 省略\n \u002F\u002F\n plugins: [\n ['remark-toc']\n ],\n }\n }\n ]\n}\n",[83,93,91],{"__ignoreMap":25},[15,95,96],{},"あとはマークダウンファイルでTocパートを追記します。",[76,98,101],{"className":99,"code":100,"language":81},[79],"## toc\n\n## 見出し\n\n記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文。\n\n",[83,102,100],{"__ignoreMap":25},[15,104,105],{},"これで自動生成されます。",[10,107,109],{"id":108},"自動生成されなかったら","自動生成されなかったら？",[15,111,112],{},"なお、@gridsome\u002Fvue-remarkで複数のデータソースを読み取る場合は、gridsome.config.js内の全てのvue-remarkの設定に、",[76,114,117],{"className":115,"code":116,"language":81},[79],"plugins: [\n ['remark-toc']\n]\n",[83,118,116],{"__ignoreMap":25},[15,120,121],{},"を入れないと、内部エラーが起こってTOC（目次）が生成されなくなります。",[15,123,124],{},"これは公式のドキュメントなどにも記載されていない条件なので要注意です。",{"title":25,"searchDepth":26,"depth":26,"links":126},[127,128,129],{"id":48,"depth":26,"text":48},{"id":70,"depth":26,"text":71},{"id":108,"depth":26,"text":109},"website-building",{},"\u002F20210401000000-gridsometoc",{"title":42,"description":42},"9236680151e49ec8cc58cd118c867c1e","20210401000000-GridsomeでTOC（目次）を自動生成したい",[37],"aLaO_jaVctmM-birZtrWMQCXbbJOlfq4QukGkS1q5Lw",{"id":139,"title":140,"author":43,"body":141,"category":130,"date":29,"description":140,"extension":31,"locale":32,"meta":177,"navigation":34,"path":178,"seo":179,"slug":180,"stem":181,"tag":182,"updated":29,"__hash__":183},"legacyQuestions\u002F20210401000000-Gridsomeでサイトマップを自動生成したい.md","Gridsomeでサイトマップを自動生成したい",{"type":7,"value":142,"toc":174},[143,147,150,156,159,165,168,171],[10,144,146],{"id":145},"gridsome公式プラグインが用意されています","Gridsome公式プラグインが用意されています",[15,148,149],{},"Gridsomeには、公式でサイトマップ生成プラグインが用意されているのでインストールします。",[76,151,154],{"className":152,"code":153,"language":81},[79],"yarn add @gridsome\u002Fplugin-sitemap\n",[83,155,153],{"__ignoreMap":25},[15,157,158],{},"インストールが出来たら、プラグインを使う旨をgridsome.config.jsに記述します。",[76,160,163],{"className":161,"code":162,"language":81},[79],"module.exports = {\n \u002F\u002F\n \u002F\u002F 省略\n \u002F\u002F\n plugins: [\n {\n use: '@gridsome\u002Fplugin-sitemap',\n options: {\n config: {\n '\u002Fblog\u002F*': {\n changefreq: 'weekly',\n priority: 0.5,\n }\n }\n }\n },\n ]\n}\n",[83,164,162],{"__ignoreMap":25},[15,166,167],{},"これだけでプロジェクトをビルドした時に、sitemap.xmlが自動生成されます。",[15,169,170],{},"注意点としては、「ビルド時に自動生成する」という点で、プレビューサーバーで立ち上げた時は、サイトマップを自動生成しないので、プレビューは出来ません。",[15,172,173],{},"チェックしたい場合は、一度ビルドして出力したファイル（dist\u002Fsitemap.xml）をチェックするしかありません。",{"title":25,"searchDepth":26,"depth":26,"links":175},[176],{"id":145,"depth":26,"text":146},{},"\u002F20210401000000-gridsome",{"title":140,"description":140},"ea5ec63ab56cd01eba1d8faf26374445","20210401000000-Gridsomeでサイトマップを自動生成したい",[37],"Cet-hT-NIbIfnQlGE4WEgkwi1hGa2ML5FRD0PXnztYw",{"id":185,"title":186,"author":43,"body":187,"category":130,"date":29,"description":260,"extension":31,"locale":32,"meta":261,"navigation":34,"path":178,"seo":262,"slug":263,"stem":264,"tag":265,"updated":29,"__hash__":266},"legacyQuestions\u002F20210401000000-Gridsomeでプロジェクトを作成する方法は？.md","Gridsomeでプロジェクトを作成する方法は？",{"type":7,"value":188,"toc":250},[189,193,199,203,207,210,216,219,222,228,231,237,240,244],[10,190,192],{"id":191},"gridsome-cliをインストールする","Gridsome CLIをインストールする",[76,194,197],{"className":195,"code":196,"language":81},[79],"npm install --global @gridsome\u002Fcli\n",[83,198,196],{"__ignoreMap":25},[10,200,202],{"id":201},"gridsome-cliをからプロジェクトを作成する","Gridsome CLIをからプロジェクトを作成する",[204,205,206],"h3",{"id":206},"基本パターン",[15,208,209],{},"基本的には「gridsome create」コマンドでプロジェクトを作成できます。",[76,211,214],{"className":212,"code":213,"language":81},[79],"gridsome create プロジェクト名\n",[83,215,213],{"__ignoreMap":25},[204,217,218],{"id":218},"既存のディレクトリで作成する場合",[15,220,221],{},"ディレクトリに入って、",[76,223,226],{"className":224,"code":225,"language":81},[79],"gridsome create .\n",[83,227,225],{"__ignoreMap":25},[204,229,230],{"id":230},"スターターキットを使う場合",[76,232,235],{"className":233,"code":234,"language":81},[79],"gridsome create プロジェクト名 レポジトリURL\n",[83,236,234],{"__ignoreMap":25},[15,238,239],{},"レポジトリはGridsomeのプロジェクトであれば、公式のものでなくても問題ありません。自分用にテンプレートを用意しておくと便利です。",[204,241,243],{"id":242},"wordpressからインポートする場合","WordPressからインポートする場合",[76,245,248],{"className":246,"code":247,"language":81},[79],"gridsome create プロジェクト名 wordpress\n",[83,249,247],{"__ignoreMap":25},{"title":25,"searchDepth":26,"depth":26,"links":251},[252,253],{"id":191,"depth":26,"text":192},{"id":201,"depth":26,"text":202,"children":254},[255,257,258,259],{"id":206,"depth":256,"text":206},3,{"id":218,"depth":256,"text":218},{"id":230,"depth":256,"text":230},{"id":242,"depth":256,"text":243},"Gridsomeでサイトを作成する",{},{"title":186,"description":260},"f99571b2a20cd5c2cdd530c65b37d663","20210401000000-Gridsomeでプロジェクトを作成する方法は？",[37],"ZwFcGlyy1RMBTuVDSRm-oqwCIZ87lK9Mlgym11wghhg",{"id":268,"title":269,"author":43,"body":270,"category":130,"date":29,"description":260,"extension":31,"locale":32,"meta":306,"navigation":34,"path":178,"seo":307,"slug":308,"stem":309,"tag":310,"updated":29,"__hash__":311},"legacyQuestions\u002F20210401000000-Gridsomeでマークダウン内の変数でページを引きたい.md","Gridsomeでマークダウン内の変数でページを引きたい",{"type":7,"value":271,"toc":303},[272,275,278,286,289,292,300],[10,273,274],{"id":274},"基本的には難しい",[15,276,277],{},"静的サイトジェネレータを使っていると、slugとか、dateとかでURLを決めて、データを受け取りたいケースがたくさんありますが、GridsomeではtemplateとpageでGraphQL用に受け取る変数は、",[53,279,280,283],{},[56,281,282],{},"id",[56,284,285],{},"path",[15,287,288],{},"の二つだけでなので、オリジナルの変数でGprahQLからデータを絞り込むのはかなり難しいです。",[15,290,291],{},"ただ、自動生成される検索用の「allXxxxx」クエリでデータ自体を探すことは可能ですが、",[53,293,294,297],{},[56,295,296],{},"pathからURLの構造を解析",[56,298,299],{},"解析した引数を使って、検索用の「allXxxxx」クエリからデータを取得",[15,301,302],{},"という流れになるのでかなり面倒です。うまくpathを使ってデータを使った方が簡単です。",{"title":25,"searchDepth":26,"depth":26,"links":304},[305],{"id":274,"depth":26,"text":274},{},{"title":269,"description":260},"474453d0e3fe2b851afe428908317836","20210401000000-Gridsomeでマークダウン内の変数でページを引きたい",[37],"W7l2ZdqCz3HkY7TYPWWzm_o-0JUQ47rmUKQDDd_ILEA",{"id":313,"title":314,"author":43,"body":315,"category":130,"date":29,"description":260,"extension":31,"locale":32,"meta":377,"navigation":34,"path":378,"seo":379,"slug":380,"stem":381,"tag":382,"updated":29,"__hash__":383},"legacyQuestions\u002F20210401000000-GridsomeのGraphQLで受け取る変数は？.md","GridsomeのGraphQLで受け取る変数は？",{"type":7,"value":316,"toc":373},[317,320,323,329,332,335,343,346,349,352,355,361,364,370],[10,318,319],{"id":319},"page-queryが受け取れる変数は実質二つ",[15,321,322],{},"Gridsomeが自動生成するGraphQLに収容されるクエリには、",[76,324,327],{"className":325,"code":326,"language":81},[79],"id: ID\npath: String\nnullable: Boolean = false\n",[83,328,326],{"__ignoreMap":25},[15,330,331],{},"の3つが、引数として指定されます。",[15,333,334],{},"一方で、Gridsomeのジェネレータ側では、templateとpageでpage-queryを使えますが、",[53,336,337,340],{},[56,338,339],{},"id: ID",[56,341,342],{},"path: String",[15,344,345],{},"この二つしかページのパラメータから引数として収納していません。つまり、実質「idとpathでしか検索できない」と思って良いでしょう。",[10,347,348],{"id":348},"受け取る変数を使ってクエリを発行する",[15,350,351],{},"この二つで引くようにGraphQLのクエリを発行してみます。",[15,353,354],{},"例えば、このクエリと、",[76,356,359],{"className":357,"code":358,"language":81},[79],"\u003Cpage-query>\n query Blog($path: String) {\n articles(path: $path) {\n title\n date\n }\n }\n\u003C\u002Fpage-query>\n",[83,360,358],{"__ignoreMap":25},[15,362,363],{},"このクエリは、",[76,365,368],{"className":366,"code":367,"language":81},[79],"\u003Cpage-query>\n query Blog($id: ID) {\n articles(id: $id) {\n title\n date\n }\n }\n\u003C\u002Fpage-query>\n",[83,369,367],{"__ignoreMap":25},[15,371,372],{},"基本的には同じ結果を返すはずです。",{"title":25,"searchDepth":26,"depth":26,"links":374},[375,376],{"id":319,"depth":26,"text":319},{"id":348,"depth":26,"text":348},{},"\u002F20210401000000-gridsomegraphql",{"title":314,"description":260},"40e2cd9757f1db75d18e5331e1ec852d","20210401000000-GridsomeのGraphQLで受け取る変数は？",[37],"G06TKQqTdI3sk6_mLtEv0k_U1r-Drt9clag5E7aY_i0",{"id":385,"title":386,"author":43,"body":387,"category":130,"date":29,"description":260,"extension":31,"locale":32,"meta":463,"navigation":34,"path":464,"seo":465,"slug":466,"stem":467,"tag":468,"updated":29,"__hash__":469},"legacyQuestions\u002F20210401000000-Gridsomeのpage-queryとstatic-queryの違いは？.md","Gridsomeのpage-queryとstatic-queryの違いは？",{"type":7,"value":388,"toc":460},[389,392,395,403,406,457],[10,390,391],{"id":391},"違いは使う場所と変数を受け取れるか",[15,393,394],{},"Gridsomeでは、GraphQLでデータを持ってくる方法として、",[53,396,397,400],{},[56,398,399],{},"page-query",[56,401,402],{},"static-query",[15,404,405],{},"の二つがあります。大きな違いは変数を受け取れるかです。",[407,408,409,423],"table",{},[410,411,412],"thead",{},[413,414,415,418,421],"tr",{},[416,417],"th",{},[416,419,399],{"align":420},"center",[416,422,402],{"align":420},[424,425,426,438],"tbody",{},[413,427,428,432,435],{},[429,430,431],"td",{},"変数の受け取り",[429,433,434],{"align":420},"○",[429,436,437],{"align":420},"x",[413,439,440,443,450],{},[429,441,442],{},"使う場所",[429,444,445,446,449],{"align":420},"template",[447,448],"br",{},"page",[429,451,445,452,449,454,456],{"align":420},[447,453],{},[447,455],{},"component",[15,458,459],{},"templateとpageは両方を使えますが、componentではstatic-queryしか使えません。",{"title":25,"searchDepth":26,"depth":26,"links":461},[462],{"id":391,"depth":26,"text":391},{},"\u002F20210401000000-gridsomepage-querystatic-query",{"title":386,"description":260},"27ba4a51d73a657df47f3cd4f47e4ea6","20210401000000-Gridsomeのpage-queryとstatic-queryの違いは？",[37],"72Wy-ofvgVrxSe-FKYEj-J9_OakhlHMmvUkEdFiItFw",{"id":471,"title":472,"author":43,"body":473,"category":130,"date":499,"description":500,"extension":31,"locale":32,"meta":501,"navigation":34,"path":502,"seo":503,"slug":504,"stem":505,"tag":506,"updated":499,"__hash__":507},"legacyQuestions\u002F20210402000000-Gridsomeでmetaの内容を動的に変更するには？.md","Gridsomeでtitleやmetaの内容を動的に変更するには？",{"type":7,"value":474,"toc":496},[475,478,481,487,490,493],[10,476,477],{"id":477},"専用のフックが用意されています",[15,479,480],{},"Gridsomeには、HTMLヘッダーの中身を動的に変更するために「metaInfo」という専用のフックが用意されています。",[76,482,485],{"className":483,"code":484,"language":81},[79],"\u003Cscript>\nexport default {\n name: 'Blog',\n metaInfo: {\n title: this.$page.blog.title,\n meta: [\n {\n name: 'author',\n content: this.$page.blog.author.title\n }\n ],\n link: [\n {\n rel: 'stylesheet',\n href: '\u002Fcss\u002Findex.css'\n }\n ]\n \u002F\u002F etc...\n }\n}\n\u003C\u002Fscript>\n",[83,486,484],{"__ignoreMap":25},[15,488,489],{},"metaInfoの中身はただのハッシュなので、サンプルを見ながらやればすぐに理解できます。ちなみに、metaInfoという名前ですが、meta以外のHTMLヘッダも変更可能です。",[15,491,492],{},"Gridsomeのtemplateとpageでは、処理設定内で「this」でGridsomeのデータにアクセスが出来るので、GraphQLで取得してきたデータは全て利用可能です。",[15,494,495],{},"動的に変更されたmetaなどのHTMLヘッダの中身は、ビルド時にしっかりとHTMLに記述されるので、SEO的にも安心です。",{"title":25,"searchDepth":26,"depth":26,"links":497},[498],{"id":477,"depth":26,"text":477},"2021-04-02T07:00:00.000Z","Gridsomeでmetaの内容を動的に変更するにはどうやる？",{},"\u002F20210402000000-gridsomemeta",{"title":472,"description":500},"9ff2c480424d00c97b9044846bca5e03","20210402000000-Gridsomeでmetaの内容を動的に変更するには？",[37],"DClNdl5lcKPdifkovknMb-DBWpr0M3Pz-LfXtYZHhk8",{"id":509,"title":510,"author":43,"body":511,"category":130,"date":590,"description":591,"extension":31,"locale":32,"meta":592,"navigation":34,"path":593,"seo":594,"slug":595,"stem":596,"tag":597,"updated":590,"__hash__":598},"legacyQuestions\u002F20210402000000-Gridsomeでのプラグインの使い方.md","Gridsomeでプラグインはどうやって使う？",{"type":7,"value":512,"toc":586},[513,517,520,528,531,534,540,543,549,552,556,559,566,569,572,580,583],[10,514,516],{"id":515},"gridsome用プラグインの場合","Gridsome用プラグインの場合",[15,518,519],{},"Gridsome用に書かれたプラグインであれば、",[53,521,522,525],{},[56,523,524],{},"プラグインをインストール（npm or yarn）",[56,526,527],{},"gridsome.config.jsのpluginsに記述",[15,529,530],{},"だけで使えるようになります。",[15,532,533],{},"例えば、Google Analyticsプラグインだったら、",[76,535,538],{"className":536,"code":537,"language":81},[79],"yarn add @gridsome\u002Fplugin-google-analytics\n",[83,539,537],{"__ignoreMap":25},[15,541,542],{},"でインストールして、gridsome.config.jsに、",[76,544,547],{"className":545,"code":546,"language":81},[79],"module.exports = {\n plugins: [\n {\n use: '@gridsome\u002Fplugin-google-analytics',\n options: {\n id: 'UA-XXXXXXXXX-X'\n }\n }\n ]\n}\n",[83,548,546],{"__ignoreMap":25},[15,550,551],{},"でプラグインを使う旨と、プラグインに渡すパラメータを記述すればすぐに適用されます。",[10,553,555],{"id":554},"vuejs用プラグインの場合","Vue.js用プラグインの場合",[15,557,558],{},"Vue.jsプラグインの場合は、プラグインにもよりますが、",[53,560,561,563],{},[56,562,524],{},[56,564,565],{},"main.js（src\u002Fmain.js）に記述",[15,567,568],{},"という、Vue.jsのプラグインの使い方そのままです。",[15,570,571],{},"ただし、GridsomeでVue.js用のプラグインを使う場合は、",[53,573,574,577],{},[56,575,576],{},"window APIなどブラウザ系のAPIを使っているとエラーになる",[56,578,579],{},"呼ぶタイミングによっては使えない",[15,581,582],{},"という点に注意が必要です。",[15,584,585],{},"特にwindow系のエラーは、プレビューサーバー（gridsome develop）ではエラーが出ないのに、ビルド（gridsome build）するとエラーになることが多いので、プラグインを追加したあとは、テストでビルドしておいたほうが安心です。",{"title":25,"searchDepth":26,"depth":26,"links":587},[588,589],{"id":515,"depth":26,"text":516},{"id":554,"depth":26,"text":555},"2021-04-02T06:00:00.000Z","Gridsomeでのプラグインの使い方",{},"\u002F20210402000000-gridsome",{"title":510,"description":591},"70c682eabc34eee11e01551f9aee31aa","20210402000000-Gridsomeでのプラグインの使い方",[37],"8wHNHLxpqNxzEmjDyrXnYlUD6wkW9EwspvThDe4kO64",{"id":600,"title":601,"author":43,"body":602,"category":130,"date":652,"description":601,"extension":31,"locale":32,"meta":653,"navigation":34,"path":593,"seo":654,"slug":655,"stem":656,"tag":657,"updated":652,"__hash__":658},"legacyQuestions\u002F20210402000000-Gridsomeでの画像の使い方・保存場所.md","Gridsomeでの画像の使い方・保存場所",{"type":7,"value":603,"toc":648},[604,607,610,616,622,625,628,631,634,637,645],[10,605,606],{"id":606},"画像の呼び出し方は二つ",[15,608,609],{},"Gridsomeでは画像の呼び出しにオリジナルの「g-image」というコンポーネントを用意しています。GridsomeはVue.jsなので、通常通りimgタグを使うことも可能です。",[76,611,614],{"className":612,"code":613,"language":81},[79],"\u002F\u002F g-imageコンポーネント\n\n\u003Cg-image src=\"~\u002Fassets\u002Fimgs\u002Ftitle.png\" width=\"83px\" :alt=\"$static.metadata.siteName\"\u002F>\n",[83,615,613],{"__ignoreMap":25},[76,617,620],{"className":618,"code":619,"language":81},[79],"\u002F\u002F 通常のimgタグ\n\n\u003Cimg :src=\"'~\u002Fassets\u002Fimgs\u002Ftitle.png'\" width=\"83px\" :alt=\"$static.metadata.siteName\"\u002F>\n",[83,621,619],{"__ignoreMap":25},[15,623,624],{},"コード的には、g-image方がシンプルに使えるというメリットがありますが、変数を含む場合はどちらにしろプロパティにするのであまり差はありません。",[15,626,627],{},"しかし、g-imageコンポーネントは、画像を内部的に最適化してくれるので、アイコンなどのサイト全体で使う画像はg-imageにした方が良いかもしれません。",[10,629,630],{"id":630},"画像の保存場所は二つ",[15,632,633],{},"Gridsomeでは、他の静的サイトジェネレータと同様に、プロジェクトルートのstaticディレクトリの中身を、そのままプロジェクトルートに設置します。ですので、static以下に画像を保存すればまず問題なく使えます。",[15,635,636],{},"一方で、src以下にassetsディレクトリ（デフォルトではない）を作成すれば、テンプレートなどVue.jsのコードからアクセスしやすくなります。どちらにするかは、画像の運用方法次第ですが、",[53,638,639,642],{},[56,640,641],{},"常に使う画像 => src\u002Fassets",[56,643,644],{},"ページごとに使う画像 => static\u002Fimg",[15,646,647],{},"とするのが多いようです。",{"title":25,"searchDepth":26,"depth":26,"links":649},[650,651],{"id":606,"depth":26,"text":606},{"id":630,"depth":26,"text":630},"2021-04-02T03:00:00.000Z",{},{"title":601,"description":601},"6d9604624f1965fd92f3a85698c262b7","20210402000000-Gridsomeでの画像の使い方・保存場所",[37],"Q7p0LthhjdahMKA-n5QcpkRVqdMYaBb7VtI8bWxmbyk",{"id":660,"title":661,"author":43,"body":662,"category":130,"date":717,"description":260,"extension":31,"locale":32,"meta":718,"navigation":34,"path":719,"seo":720,"slug":721,"stem":722,"tag":723,"updated":717,"__hash__":724},"legacyQuestions\u002F20210402000000-GridsomeのGraphQLのidはどうやって決まる？.md","GridsomeのGraphQLのidはどうやって決まる？",{"type":7,"value":663,"toc":713},[664,668,671,674,677,680,686,689,692,698,701,710],[10,665,667],{"id":666},"idはnodeのpathからハッシュ値を出して決定しています","idは、nodeのpathからハッシュ値を出して決定しています",[15,669,670],{},"Gridsomeのドキュメントでは、どのようにidを発行しているか説明されていませんが、@gridsome\u002Fsource-filesystemでも、@gridsome\u002Fvue-remarkでも、オリジナルファイルのpathを元にidを決定しています。",[15,672,673],{},"ですので、タイトルやデータの中身が変更されても、ファイル名さえ同じであれば、idは不変です。逆に、ファイル名も1文字（1バイト）でも変えてしまうと、idが変わってしまうため、GraphQLのidをURLに使っている場合は、URLが変わってしまうので注意が必要です。",[10,675,676],{"id":676},"ソースコードをみてみる",[15,678,679],{},"この辺りの仕組みは、プラグインのソースコードを見ると仕組みが理解できます。",[76,681,684],{"className":682,"code":683,"language":81},[79],"async createNodeOptions (file, actions) {\n const relPath = path.relative(this.context, file)\n const origin = path.join(this.context, file)\n const content = await fs.readFile(origin, 'utf8')\n const { dir, name, ext = '' } = path.parse(file)\n const mimeType = mime.lookup(file) || `application\u002Fx-${ext.replace('.', '')}`\n\n return {\n id: this.createUid(relPath),\n path: this.createPath({ dir, name }, actions),\n fileInfo: {\n extension: ext,\n directory: dir,\n path: file,\n name\n },\n internal: {\n mimeType,\n content,\n origin\n }\n }\n}\n",[83,685,683],{"__ignoreMap":25},[15,687,688],{},"idは、fileのrelPathを元にcreateUid関数で変換して決定しています。",[15,690,691],{},"createUidは何をしているかというと、",[76,693,696],{"className":694,"code":695,"language":81},[79],"createUid (orgId) {\n return crypto.createHash('md5').update(orgId).digest('hex')\n}\n",[83,697,695],{"__ignoreMap":25},[15,699,700],{},"なので、ファイルのパスを元に、md5でハッシュを生成しているということになります。",[15,702,703],{},[704,705,709],"a",{"href":706,"rel":707},"https:\u002F\u002Fgithub.com\u002Fgridsome\u002Fgridsome\u002Fblob\u002Fmaster\u002Fpackages\u002Fsource-filesystem\u002Findex.js",[708],"nofollow","gridsome\u002Fpackages\u002Fsource-filesystem\u002Findex.js | Github",[15,711,712],{},"Gridsomeで、GraphQLにデータを取り込むのは、@gridsome\u002Fsource-filesystemと@gridsome\u002Fvue-remarkの2種類がありますが、@gridsome\u002Fvue-remarkは内部的には@gridsome\u002Fsource-filesystemを使ってマークダウンファイルをインスタンス化しているようなので、仕組みは同じでしょう。",{"title":25,"searchDepth":26,"depth":26,"links":714},[715,716],{"id":666,"depth":26,"text":667},{"id":676,"depth":26,"text":676},"2021-04-02T00:00:00.000Z",{},"\u002F20210402000000-gridsomegraphqlid",{"title":661,"description":260},"5fd09cefbff2abee86594cf82bfd95a4","20210402000000-GridsomeのGraphQLのidはどうやって決まる？",[37],"2M0s57yWs2DNRzAMoIOd7NuYdmIW2kWMJM-6K4C5ITA",{"id":726,"title":727,"author":43,"body":728,"category":130,"date":774,"description":727,"extension":31,"locale":32,"meta":775,"navigation":34,"path":776,"seo":777,"slug":778,"stem":779,"tag":780,"updated":774,"__hash__":781},"legacyQuestions\u002F20210402000000-girdsome-configとserverの違い.md","girdsome.config.jsとgirdsome.server.jsの違い",{"type":7,"value":729,"toc":770},[730,734,737,740,743,747,750,753,761,764,767],[10,731,733],{"id":732},"girdsomeconfigjsは全体の設定","girdsome.config.jsは全体の設定",[15,735,736],{},"girdsome.config.jsは、Gridsomeの全体の設定ファイルです。",[15,738,739],{},"サイト名の設定から、プラグインの指定、URLのパスの設定など、基本的にgirdsome.config.jsで設定をします。APIなどから動的に静的ページを生成しないのであれば、girdsome.config.jsで完結します。",[15,741,742],{},"Vue.jsのプラグインを使う場合は、main.jsも設定ファイルとして使いますが、Gridsome公式プラグインを使うだけなら、girdsome.config.jsの使い方を覚えるだけでOKです。",[10,744,746],{"id":745},"girdsomeserverjsは動的な設定","girdsome.server.jsは動的な設定",[15,748,749],{},"girdsome.server.jsは動的に静的ページを生成するための設定です。厳密には、Gridsomeプロジェクト下のGraphQLにNodeを追加するための設定です。",[15,751,752],{},"girdsome.server.jsでは、マークダウンファイルやページからではなく、APIやJsonなどのマスターページからGraphQLにNodeを追加するために、",[53,754,755,758],{},[56,756,757],{},"データソースの指定",[56,759,760],{},"データをどのように追加するか",[15,762,763],{},"をプログラミングします。",[15,765,766],{},"girdsome.server.jsの設定は、girdsome.config.jsのように「JSONで設定を記述するだけ」ではなく、純粋なにNode.js（Javascript）で処理を書くので、最低限のJavascriptの知識がないと使えません。",[15,768,769],{},"ただし、GridsomeではAPIなどからデータを持ってこなくても、マークダウンファイルを使って同じようなことも出来るので、プロジェクトの構成やデータの取得方法などで使い分ける形になります。",{"title":25,"searchDepth":26,"depth":26,"links":771},[772,773],{"id":732,"depth":26,"text":733},{"id":745,"depth":26,"text":746},"2021-04-02T05:00:00.000Z",{},"\u002F20210402000000-girdsome-configserver",{"title":727,"description":727},"326d806dae9b67d1078a79ee54c7db85","20210402000000-girdsome-configとserverの違い",[37],"BI-Kcqd2au_gUNzk0fVejQj4IwsrrdktGHwL9-EuM7Y",{"id":783,"title":784,"author":43,"body":785,"category":130,"date":852,"description":853,"extension":31,"locale":32,"meta":854,"navigation":34,"path":855,"seo":856,"slug":857,"stem":858,"tag":859,"updated":852,"__hash__":860},"legacyQuestions\u002F20210405000000-GridsomeでGoogle Analyticsを使いたい.md","Gridsomeの便利なリンク集を知りたい",{"type":7,"value":786,"toc":846},[787,791,794,798,801,807,810,816,819,823,826,829,835,837,843],[10,788,790],{"id":789},"プラグインを追加するだけokです","プラグインを追加するだけOKです。",[15,792,793],{},"GridsomeでGoogle Analyticsを使う方法は二つあります。どちらもプラグインを追加するだけでGoogle AnalyticsをGridsomeプロジェクトに組み込むことができます。",[204,795,797],{"id":796},"google-analytics-v3の場合","Google Analytics v3の場合",[15,799,800],{},"Google Analyticsの旧バージョンを使っている場合は、公式プラグインの「@gridsome\u002Fplugin-google-analytics」をインストールすれば、すぐにGoogle Analyticsを統合できます。",[76,802,805],{"className":803,"code":804,"language":81},[79],"yarn add @gridsome\u002Fplugin-google-analytics\n\n\u002F\u002F or\n\nnpm install @gridsome\u002Fplugin-google-analytics\n\n",[83,806,804],{"__ignoreMap":25},[15,808,809],{},"プラグインがインストールできたら、grdisome.config.jsに設定を書きます。",[76,811,814],{"className":812,"code":813,"language":81},[79],"module.exports = {\n plugins: [\n {\n use: '@gridsome\u002Fplugin-google-analytics',\n options: {\n id: 'UA-XXXXXXXXX-X' \u002F\u002F \u003C== ここを書き換える\n }\n }\n ]\n}\n",[83,815,813],{"__ignoreMap":25},[15,817,818],{},"簡単ですね。",[204,820,822],{"id":821},"google-analytics-v4の場合","Google Analytics v4の場合",[15,824,825],{},"Google Analyticsの現行バージョンであるv4は、トラッキング方法が変わっているため、Googleタグマネージャーと一緒に使う必要があります。",[15,827,828],{},"ただ、GridsomeでGoogleタグマネージャーを使うのも、プラグインをインストールして設定を書くだけなので、非常に簡単です。",[76,830,833],{"className":831,"code":832,"language":81},[79],"yarn add gridsome-plugin-gtm\n\n\u002F\u002F or\n\nnpm install gridsome-plugin-gtm --save\n",[83,834,832],{"__ignoreMap":25},[15,836,809],{},[76,838,841],{"className":839,"code":840,"language":81},[79],"module.exports = {\n plugins: [\n {\n use: 'gridsome-plugin-gtm',\n options: {\n id: 'GTM-XXXXXXX', \u002F\u002F \u003C== ここを書き換える\n enabled: true,\n debug: true\n }\n }\n ]\n}\n",[83,842,840],{"__ignoreMap":25},[15,844,845],{},"これで、Googleタグマネージャー経由で、Google Analyticsのデータが計測可能になります。",{"title":25,"searchDepth":26,"depth":26,"links":847},[848],{"id":789,"depth":26,"text":790,"children":849},[850,851],{"id":796,"depth":256,"text":797},{"id":821,"depth":256,"text":822},"2021-04-05T07:00:00.000Z","GridsomeでGoogle Analyticsを使いたい",{},"\u002F20210405000000-gridsomegoogle-analytics",{"title":784,"description":853},"1e5902dcc40ec065f26d341ea5f92042","20210405000000-GridsomeでGoogle Analyticsを使いたい",[37],"L8iWsf6MAgp5CPUCLFu7KfHZc4BXBnKTncGgv0PAZJc",{"id":862,"title":863,"author":43,"body":864,"category":130,"date":905,"description":863,"extension":31,"locale":32,"meta":906,"navigation":34,"path":907,"seo":908,"slug":909,"stem":910,"tag":911,"updated":905,"__hash__":912},"legacyQuestions\u002F20210405000000-GridsomeでMatomo Analyticsを使いたい.md","GridsomeでMatomo Analyticsを使いたい",{"type":7,"value":865,"toc":902},[866,868,871,877,880,886,889,892,899],[10,867,790],{"id":789},[15,869,870],{},"GridsomeでMatomo Analyticsを使う方法は、有志の方が開発したプラグイン「gridsome-plugin-matomo」を追加するだけと非常に簡単です。",[76,872,875],{"className":873,"code":874,"language":81},[79],"yarn add gridsome-plugin-matomo\n\n\u002F\u002F or\n\nnpm install gridsome-plugin-matomo\n",[83,876,874],{"__ignoreMap":25},[15,878,879],{},"プラグインをインストールしたら、gridsome.config.jsに設定を書きます。",[76,881,884],{"className":882,"code":883,"language":81},[79],"module.exports = {\n plugins: [\n {\n use: 'gridsome-plugin-matomo',\n options: {\n host: 'https:\u002F\u002Fexample.com',　\u002F\u002F \u003C== 書き換える\n siteId: 1　\u002F\u002F \u003C== 書き換える\n }\n }\n ]\n}\n",[83,885,883],{"__ignoreMap":25},[15,887,888],{},"設定のhostの部分は、httpからのURLを記述します。ドメインだけでは動かないので注意してください。siteIdは、Matomo Analyticsでサイトを追加すると出てくるID（整数）です。",[15,890,891],{},"ベースはVue.js用のプラグイン「VueMatomo」のようですので、ここの設定が使えると思われます。",[15,893,894],{},[704,895,898],{"href":896,"rel":897},"https:\u002F\u002Fgithub.com\u002FAmazingDreams\u002Fvue-matomo\u002Fblob\u002Fmaster\u002FREADME.md",[708],"VueMatomo",[15,900,901],{},"GridsomeでのMatomo Analyticsは、metaInfoの動的変更がトラッキングされないなど一部バグがありますが、それ以外は概ね問題なく動くようです。",{"title":25,"searchDepth":26,"depth":26,"links":903},[904],{"id":789,"depth":26,"text":790},"2021-04-05T08:00:00.000Z",{},"\u002F20210405000000-gridsomematomo-analytics",{"title":863,"description":863},"05dc11649aa7228a1e0d7d6cb5d9176f","20210405000000-GridsomeでMatomo Analyticsを使いたい",[37],"AQQLPadSy8QCIJ7YE4xV4Oto9LZSypk5yR4RNnIyHFo",{"id":914,"title":915,"author":43,"body":916,"category":130,"date":982,"description":915,"extension":31,"locale":32,"meta":983,"navigation":34,"path":984,"seo":985,"slug":986,"stem":987,"tag":988,"updated":982,"__hash__":989},"legacyQuestions\u002F20210405000000-GridsomeでWordPressのデータを取り込むには？.md","GridsomeでWordPressのデータを取り込むには？",{"type":7,"value":917,"toc":979},[918,922,925,931,934,940,943,951,954,957,960,963,969,972],[10,919,921],{"id":920},"公式プラグインgridsomesource-wordpressを使います","公式プラグイン「@gridsome\u002Fsource-wordpress」を使います",[15,923,924],{},"Gridsomeチームが開発している公式プラグイン「@gridsome\u002Fsource-wordpress」があるのでそちらを使います。",[76,926,929],{"className":927,"code":928,"language":81},[79],"yarn add @gridsome\u002Fsource-wordpress\n\n\u002F\u002F or\n\nnpm install @gridsome\u002Fsource-wordpress\n",[83,930,928],{"__ignoreMap":25},[15,932,933],{},"インストールしたら、grdisome.config.jsにプラグインの記述をします。",[76,935,938],{"className":936,"code":937,"language":81},[79],"module.exports = {\n plugins: [\n {\n use: '@gridsome\u002Fsource-wordpress',\n options: {\n baseUrl: 'WEBSITE_URL', \u002F\u002F （変更する）httpsから入れる\n apiBase: 'wp-json',\n typeName: 'WordPress', \u002F\u002F （変更しても良い）好きなtypeNameを入れる\n perPage: 100,\n concurrent: 10\n }\n }\n ],\n templates: {\n WordPressPost: '\u002F:year\u002F:month\u002F:day\u002F:slug'\n }\n}\n",[83,939,937],{"__ignoreMap":25},[15,941,942],{},"公式のドキュメントそんまんまですが、変更すべきは、",[53,944,945,948],{},[56,946,947],{},"baseUrl",[56,949,950],{},"typeName",[15,952,953],{},"の二つです。",[15,955,956],{},"baseUrlはWordPressサイトのURLを記入します。typeNameはドキュメントの通り「WordPress」でも良いですが、ここの文字列をベースにして、様々なQueryが自動生成されるので、短いほうがプログラムを書く際に楽です。",[15,958,959],{},"注意したいのは、この「@gridsome\u002Fsource-wordpress」は、WordPressサイトのデータを「GridsomeのGraphQLデータベースに取り込むだけ」なので、表示する側のロジックは別途組む必要があります。",[15,961,962],{},"表示側まで出来ているものが欲しい場合は、プロジェクト作成時に「wordpress」を指定して、createします。",[76,964,967],{"className":965,"code":966,"language":81},[79],"gridsome create my-wordpress-blog wordpress\n",[83,968,966],{"__ignoreMap":25},[15,970,971],{},"指定したスターターであるwordpressの中身は、下記のGridsome公式レポジトリにあります。",[15,973,974],{},[704,975,978],{"href":976,"rel":977},"https:\u002F\u002Fgithub.com\u002Fgridsome\u002Fgridsome-starter-wordpress",[708],"gridsome-starter-wordpress",{"title":25,"searchDepth":26,"depth":26,"links":980},[981],{"id":920,"depth":26,"text":921},"2021-04-05T04:00:00.000Z",{},"\u002F20210405000000-gridsomewordpress",{"title":915,"description":915},"4ea50e18f56e3712a01861afbd2c4dea","20210405000000-GridsomeでWordPressのデータを取り込むには？",[37],"cTyOOOngMTAJOFxA6KTbJUmktHFjghNN73R15WiMDI4",{"id":991,"title":992,"author":43,"body":993,"category":130,"date":1108,"description":992,"extension":31,"locale":32,"meta":1109,"navigation":34,"path":1110,"seo":1111,"slug":1112,"stem":1113,"tag":1114,"updated":1108,"__hash__":1115},"legacyQuestions\u002F20210405000000-GridsomeでのURLの設定方法・決め方は？.md","GridsomeでのURLの設定方法・決め方は？",{"type":7,"value":994,"toc":1105},[995,999,1002,1013,1016,1019,1073,1081,1084,1090,1093,1096,1102],[10,996,998],{"id":997},"gridsomeでのurl決定ルールは3つ","GridsomeでのURL決定ルールは3つ",[15,1000,1001],{},"GridsomeでURLを決定するのは、",[53,1003,1004,1007,1010],{},[56,1005,1006],{},"src\u002Fpages内のVueファイル",[56,1008,1009],{},"gridsome.config.js内の設定",[56,1011,1012],{},"gridsome.server.js内の設定",[15,1014,1015],{},"の3つです。",[15,1017,1018],{},"それぞれの違いを表にまとめると下記のようになります。",[407,1020,1021,1037],{},[410,1022,1023],{},[413,1024,1025,1028,1031,1034],{},[416,1026,1027],{},"方法",[416,1029,1030],{"align":420},"URLの決まり方",[416,1032,1033],{"align":420},"静的ページ出力",[416,1035,1036],{"align":420},"動的ソースの静的ページ出力",[424,1038,1039,1050,1062],{},[413,1040,1041,1043,1046,1048],{},[429,1042,1006],{},[429,1044,1045],{"align":420},"pages以下のパスの通り",[429,1047,434],{"align":420},[429,1049,437],{"align":420},[413,1051,1052,1055,1058,1060],{},[429,1053,1054],{},"gridsome.config.js",[429,1056,1057],{"align":420},"設定を記述",[429,1059,434],{"align":420},[429,1061,434],{"align":420},[413,1063,1064,1067,1069,1071],{},[429,1065,1066],{},"gridsome.server.js",[429,1068,1057],{"align":420},[429,1070,434],{"align":420},[429,1072,434],{"align":420},[15,1074,1075,1076,1080],{},"違いとしては、",[704,1077,1079],{"href":1078},"\u002Fq\u002Fa8c2009a9b420356be5b5cbd9e4bfa48\u002F","GridsomeのTemplateとPageのと違い","に近い形になります。",[15,1082,1083],{},"gridsome.config.js、gridsome.server.jsを使う場合は、Templateを使うことになるので、設定ファイル内で自由にURLを決定できます。",[76,1085,1088],{"className":1086,"code":1087,"language":81},[79],"\u002F\u002F gridsome.config.js\n{\n use: '@gridsome\u002Fvue-remark',\n options: {\n typeName: 'Articles',\n baseDir: '.\u002Fcontent\u002Farticles',\n template: '.\u002Fsrc\u002Ftemplates\u002FArticles.vue',\n route: \"\u002Farticles\u002F:slug\u002F\",\n }\n},\n",[83,1089,1087],{"__ignoreMap":25},[15,1091,1092],{},"URLを決定するのは「route」の部分です。データソースから文字列を取得してURLを指定できます。",[15,1094,1095],{},"上の例の場合は、「\u002Fcontent\u002Farticles」内にあるマークダウンファイルのフロントマッターにある「slug」という項目を使ってURLを決定しています。",[76,1097,1100],{"className":1098,"code":1099,"language":81},[79],"\u002F\u002F hogehoge.md\n---\ntitle: 記事のタイトル\ndate: 2021-04-05T02:00:00.000Z\nslug: kiji-no-title \u002F\u002F \u003C=== ここを取得する\n---\n\n記事本文\n",[83,1101,1099],{"__ignoreMap":25},[15,1103,1104],{},"フロントマッターにある全てのソースが利用できますが、URLで禁止されている文字列があるとエラーなるので注意が必要です。",{"title":25,"searchDepth":26,"depth":26,"links":1106},[1107],{"id":997,"depth":26,"text":998},"2021-04-05T02:00:00.000Z",{},"\u002F20210405000000-gridsomeurl",{"title":992,"description":992},"30fb97c8f34c060ce24fdf4faf546c33","20210405000000-GridsomeでのURLの設定方法・決め方は？",[37],"fjG_hsTjCYyUbGVV48OsXzvPddTVhaJf1xRV50QDqHA",{"id":1117,"title":1118,"author":43,"body":1119,"category":130,"date":1315,"description":1118,"extension":31,"locale":32,"meta":1316,"navigation":34,"path":984,"seo":1317,"slug":1318,"stem":1319,"tag":1320,"updated":1315,"__hash__":1321},"legacyQuestions\u002F20210405000000-Gridsomeに取り込んだWordPressのデータをどうなっている？.md","Gridsomeに取り込んだWordPressのデータをどうなっている？",{"type":7,"value":1120,"toc":1311},[1121,1125,1128,1131,1137,1140,1144,1147,1150,1294,1297,1305,1308],[10,1122,1124],{"id":1123},"設定で指定したtypenameを接頭文字にして自動生成されます","設定で指定した「typeName」を接頭文字にして自動生成されます",[15,1126,1127],{},"Gridsome公式プラグイン「@gridsome\u002Fsource-wordpress」を使って、WordPressサイトからデータを取り込むと、自動でWordPressサイトのデータを取り込んでくれます。",[15,1129,1130],{},"どんなデータが取り込まれているかは、gridsome developで立ち上がるGraphQL Playgroundでチェックできます。",[76,1132,1135],{"className":1133,"code":1134,"language":81},[79],"http:\u002F\u002Flocalhost:8080\u002F___explore\n",[83,1136,1134],{"__ignoreMap":25},[15,1138,1139],{},"表示されたページの右側の「DOCS」のボタンをクリックすると、全てのクエリがチェックできます。",[10,1141,1143],{"id":1142},"gridsomeに取り込まれたwordpressのデータの法則","Gridsomeに取り込まれたWordPressのデータの法則",[15,1145,1146],{},"いちいちチェックするのが面倒という場合は、取り込まれ方の法則を知っておけば大丈夫です。",[15,1148,1149],{},"主な項目を一覧にまとめると下記の通りです。（「xx」はgridsome.config.jsで指定した「typeName」）",[407,1151,1152,1165],{},[410,1153,1154],{},[413,1155,1156,1159,1162],{},[416,1157,1158],{},"WordPress項目",[416,1160,1161],{"align":420},"GraphQLクエリ",[416,1163,1164],{"align":420},"補足",[424,1166,1167,1178,1189,1200,1210,1221,1231,1242,1252,1263,1273,1284],{},[413,1168,1169,1172,1175],{},[429,1170,1171],{},"投稿",[429,1173,1174],{"align":420},"xxPost",[429,1176,1177],{"align":420},"投稿の詳細",[413,1179,1180,1183,1186],{},[429,1181,1182],{},"投稿一覧",[429,1184,1185],{"align":420},"allxxPost",[429,1187,1188],{"align":420},"投稿の一覧",[413,1190,1191,1194,1197],{},[429,1192,1193],{},"固定ページ",[429,1195,1196],{"align":420},"xxPage",[429,1198,1199],{"align":420},"固定ページの詳細",[413,1201,1202,1205,1208],{},[429,1203,1204],{},"固定ページ一覧",[429,1206,1207],{"align":420},"allxxPage",[429,1209,1188],{"align":420},[413,1211,1212,1215,1218],{},[429,1213,1214],{},"メディア",[429,1216,1217],{"align":420},"xxAttachment",[429,1219,1220],{"align":420},"メディアの詳細",[413,1222,1223,1226,1229],{},[429,1224,1225],{},"メディアの一覧",[429,1227,1228],{"align":420},"allxxAttachment",[429,1230,1225],{"align":420},[413,1232,1233,1236,1239],{},[429,1234,1235],{},"投稿者",[429,1237,1238],{"align":420},"xxAuthor",[429,1240,1241],{"align":420},"投稿者の詳細",[413,1243,1244,1247,1250],{},[429,1245,1246],{},"投稿者一覧",[429,1248,1249],{"align":420},"allxxAuthor",[429,1251,1246],{"align":420},[413,1253,1254,1257,1260],{},[429,1255,1256],{},"カテゴリ",[429,1258,1259],{"align":420},"xxCategory",[429,1261,1262],{"align":420},"カテゴリの詳細",[413,1264,1265,1268,1271],{},[429,1266,1267],{},"カテゴリ一覧",[429,1269,1270],{"align":420},"allxxCategory",[429,1272,1267],{"align":420},[413,1274,1275,1278,1281],{},[429,1276,1277],{},"タグ",[429,1279,1280],{"align":420},"xxPostTag",[429,1282,1283],{"align":420},"タグの詳細",[413,1285,1286,1289,1292],{},[429,1287,1288],{},"タグの一覧",[429,1290,1291],{"align":420},"allxxPostTa",[429,1293,1288],{"align":420},[15,1295,1296],{},"基本的には、",[53,1298,1299,1302],{},[56,1300,1301],{},"詳細は「接頭文字 + 種類」",[56,1303,1304],{},"一覧は「all + 接頭文字 + 種類」",[15,1306,1307],{},"と覚えておけばOKです。",[15,1309,1310],{},"なお、クエリ名はプラグインが自動生成するので、ユーザー側で変更できるのは「接頭文字」だけです。",{"title":25,"searchDepth":26,"depth":26,"links":1312},[1313,1314],{"id":1123,"depth":26,"text":1124},{"id":1142,"depth":26,"text":1143},"2021-04-05T05:00:00.000Z",{},{"title":1118,"description":1118},"744de5e81698230ebb741f6a982624b4","20210405000000-Gridsomeに取り込んだWordPressのデータをどうなっている？",[37],"FdJEXOSjH-xsUOKy6UGV8V8jhcB1LmGrZGsVPVJNhZc",{"id":1323,"title":784,"author":43,"body":1324,"category":130,"date":1410,"description":784,"extension":31,"locale":32,"meta":1411,"navigation":34,"path":1412,"seo":1413,"slug":1414,"stem":1415,"tag":1416,"updated":1410,"__hash__":1417},"legacyQuestions\u002F20210405000000-Gridsomeの便利なリンク集を知りたい.md",{"type":7,"value":1325,"toc":1406},[1326,1330,1333,1364,1367,1370,1374,1397,1400,1403],[10,1327,1329],{"id":1328},"gridsome公式系","Gridsome公式系",[15,1331,1332],{},"まずはGridsome公式系から。",[1334,1335,1336,1343,1350,1357],"ul",{},[56,1337,1338],{},[704,1339,1342],{"href":1340,"rel":1341},"https:\u002F\u002Fgridsome.org\u002Fdocs\u002F",[708],"Gridsome公式ドキュメント",[56,1344,1345],{},[704,1346,1349],{"href":1347,"rel":1348},"https:\u002F\u002Fgridsome.org\u002Fplugins\u002F",[708],"Gridsomeプラグイン",[56,1351,1352],{},[704,1353,1356],{"href":1354,"rel":1355},"https:\u002F\u002Fgridsome.org\u002Fstarters\u002F",[708],"Gridsomeスターター（テーマ）",[56,1358,1359],{},[704,1360,1363],{"href":1361,"rel":1362},"https:\u002F\u002Fgithub.com\u002Fgridsome\u002Fgridsome",[708],"Gridsome Githubレポジトリ",[15,1365,1366],{},"公式ページは、ドキュメントとプラグイン、スターターだけ押さえていれば事足ります。",[15,1368,1369],{},"また、Gridsomeは発展途上のフレームワークなので、バグなどもちょくちょくあるので、Gridsome公式Githubレポジトリも要チェックです。特にIssuesは、同じようなトラブルに遭遇している人がいないかをチェックするのに役に立ちます。",[10,1371,1373],{"id":1372},"その他読んでおきたい系","その他、読んでおきたい系",[1334,1375,1376,1383,1390],{},[56,1377,1378],{},[704,1379,1382],{"href":1380,"rel":1381},"https:\u002F\u002Fcircleci.com\u002Fja\u002Fblog\u002Fintroduction-to-graphql\u002F",[708],"GraphQL 入門ガイド | Circle CIブログ",[56,1384,1385],{},[704,1386,1389],{"href":1387,"rel":1388},"https:\u002F\u002Fwww.netlify.com\u002Fblog\u002F2019\u002F11\u002F30\u002Fhow-to-deploy-a-vue-site\u002F",[708],"How to Deploy a Vue Site | Netlify",[56,1391,1392],{},[704,1393,1396],{"href":1394,"rel":1395},"https:\u002F\u002Fja.wp-api.org\u002F",[708],"WP REST API",[15,1398,1399],{},"GridsomeはGraphQLと密接に関係しているので、GraphQLの基礎知識はしっかりと押さえておいたほうが開発が楽になります。",[15,1401,1402],{},"また、ベースがVue.jsなのでNetlifyなどのホスティングサービスのガイドもチェックしておくと安心です。",[15,1404,1405],{},"データソースにWordPressを使う場合は、WP REST APIも便利。基本的にはプラグインが全てやってくれますが、どんなデータが来るのかを知っておくと、開発が楽になります。",{"title":25,"searchDepth":26,"depth":26,"links":1407},[1408,1409],{"id":1328,"depth":26,"text":1329},{"id":1372,"depth":26,"text":1373},"2021-04-05T06:00:00.000Z",{},"\u002F20210405000000-gridsome",{"title":784,"description":784},"ec1484074cd3f4db757b75d3fe2ff159","20210405000000-Gridsomeの便利なリンク集を知りたい",[37],"chKm3MXyxMQgclo_PeHsczTc2oIDasdFH5yAADPEPlA",{"id":1419,"title":1420,"author":43,"body":1421,"category":130,"date":1469,"description":1420,"extension":31,"locale":32,"meta":1470,"navigation":34,"path":1471,"seo":1472,"slug":1473,"stem":1474,"tag":1475,"updated":1469,"__hash__":1476},"legacyQuestions\u002F20210405000000-g-linkと通常のリンクの違いは？.md","g-linkと通常のリンクの違いは？",{"type":7,"value":1422,"toc":1465},[1423,1427,1430,1438,1441,1444,1447,1451,1454,1462],[10,1424,1426],{"id":1425},"g-linkはリンク先をプリロードしrouter-linkと同じ挙動をします","「g-link」はリンク先をプリロードし、router-linkと同じ挙動をします",[15,1428,1429],{},"Gridsome独自のコンポーネントである「g-link」は、",[53,1431,1432,1435],{},[56,1433,1434],{},"リンク先のページデータをプリロードする",[56,1436,1437],{},"動作としてはvue-routerの「router-link」と同じ",[15,1439,1440],{},"という特徴があります。",[15,1442,1443],{},"動作的にはrouter-linkなので、HTTPリクエストを伴わないページ遷移になり、スピーディにページの移動がされる上に、プリロードするのでクリックしてすぐにページが表示されるため、超高速レスポンスを実現できます。",[15,1445,1446],{},"Gridsomeでの通常リンクは、通常のHTMLと同様HTTPリクエストを伴うページ遷移になるので、Gridsomeを含めVue.jsでは外部ページへのリンクで使うことがほとんどです。",[10,1448,1450],{"id":1449},"g-linkを使う際の注意点","「g-link」を使う際の注意点",[15,1452,1453],{},"ただし、プリロードすることはメリットだけでなくデメリットもあります。",[53,1455,1456,1459],{},[56,1457,1458],{},"プリロード先のデータが大きい場合",[56,1460,1461],{},"リンク（プリロード先）が多い場合",[15,1463,1464],{},"は、初回ページをロードする際に大量のデータを受信する為ロードが遅くなる可能性があります。ロードが遅いと離脱してしまう可能性が高くなるので、本末転倒です。また、直帰率が上がってしまう要因になるので、1ページに取り入れる「g-link」の数はロードスピードとのバランスを見る必要があります。",{"title":25,"searchDepth":26,"depth":26,"links":1466},[1467,1468],{"id":1425,"depth":26,"text":1426},{"id":1449,"depth":26,"text":1450},"2021-04-05T00:00:00.000Z",{},"\u002F20210405000000-g-link",{"title":1420,"description":1420},"020b1d40fa2c4153999342212469d63a","20210405000000-g-linkと通常のリンクの違いは？",[37],"imEamhbzMJ4BhMY70rCoh9TQL5LG3ehPmr_25U4zRvA",{"id":1478,"title":1479,"author":43,"body":1480,"category":130,"date":1518,"description":1519,"extension":31,"locale":32,"meta":1520,"navigation":34,"path":1521,"seo":1522,"slug":1523,"stem":1524,"tag":1525,"updated":1518,"__hash__":1526},"legacyQuestions\u002F20210405000000-gridsomeのtemplateとpageのと違いは？.md","GridsomeのTemplateとPageのと違いは？",{"type":7,"value":1481,"toc":1514},[1482,1486,1489,1492,1498,1501,1504,1508,1511],[10,1483,1485],{"id":1484},"templateは複数ページを生成するpageは単ページを生成する","Templateは「複数ページを生成する」、Pageは「単ページを生成する」",[15,1487,1488],{},"記事一覧ページなどの「URLが動的に変わらないページ」はPageを使い、「URLが動的に変わるページ」の場合はTemplateを使います。",[15,1490,1491],{},"ブログの例で考えるとわかりやすいですが、",[76,1493,1496],{"className":1494,"code":1495,"language":81},[79],"（一覧ページ）\u002Fblog\u002F => Page\n（記事詳細ページ）\u002Fblog\u002Fhow-to-start-gridsome\u002F => Template\n",[83,1497,1495],{"__ignoreMap":25},[15,1499,1500],{},"という形です。",[15,1502,1503],{},"一覧ページページは、ページの中身は動的に変わりますが、URL自体は固定なのでPageで作成します。一方で、記事詳細ページは、ページの中身もURLも動的に変わるのでTemplateで作成することになります。",[10,1505,1507],{"id":1506},"静的ページを出力するかで使い分けるのもアリ","「静的ページを出力するか？」で使い分けるのもアリ",[15,1509,1510],{},"Gridsomeでは、APIのデータをソースにして静的にページを生成することが出来るので、記事詳細ページをpageで作ることも可能です。ただし、その場合は静的ページ（記事ごとのHTMLファイル）は生成されないという注意点があります。",[15,1512,1513],{},"その意味では、「動的にURLが変更するページを静的ページ生成したい場合はtemaplte、それ以外はpage」と覚えておくと良いかもしれません。",{"title":25,"searchDepth":26,"depth":26,"links":1515},[1516,1517],{"id":1484,"depth":26,"text":1485},{"id":1506,"depth":26,"text":1507},"2021-04-05T01:00:00.000Z","Gridsomeのtemplateとpageのと違いは？",{},"\u002F20210405000000-gridsometemplatepage",{"title":1479,"description":1519},"a8c2009a9b420356be5b5cbd9e4bfa48","20210405000000-gridsomeのtemplateとpageのと違いは？",[37],"1LyjvYYLRZMVw3qX_3sZ5kJhxRUTkIqZ7waFx-oRyqw",{"id":1528,"title":1529,"author":43,"body":1530,"category":130,"date":1568,"description":1529,"extension":31,"locale":32,"meta":1569,"navigation":34,"path":1570,"seo":1571,"slug":1572,"stem":1573,"tag":1574,"updated":1568,"__hash__":1575},"legacyQuestions\u002F20210406000000-Girdsomeでコメント機能を追加したい.md","Girdsomeでコメント機能を追加したい",{"type":7,"value":1531,"toc":1565},[1532,1536,1539,1542,1553,1556,1559,1562],[10,1533,1535],{"id":1534},"プラグインで追加が可能です","プラグインで追加が可能です。",[15,1537,1538],{},"Gridsomeはにはデフォルトではコメント機能がありません。ただ、ベースがVue.jsなので、Vue.jsで使えるコメントプラグインをGridsomeでも使うことが可能です。",[15,1540,1541],{},"Vue.js向けのコメント機能プラグインは、",[53,1543,1544,1547,1550],{},[56,1545,1546],{},"Disqus",[56,1548,1549],{},"Staticman",[56,1551,1552],{},"Vssue",[15,1554,1555],{},"あたりが定番ですが、一番簡単なのはWordPressでも定番のDisqusです。プラグインをインストールして、main.jsでインポート、コンポーネントをロードするだけで使えるのですぐにコメント機能を追加できます。",[15,1557,1558],{},"データをDisqusのAPIサーバーから持ってくるため、WordPressのようにHTMLに直接記述することが出来ない（SEO効果が薄い）のがデメリットでしょうか。",[15,1560,1561],{},"StaticmanとVssueは、自分でデータを持てるというメリットがありますが、どちらもGitレポジトリに直接変更を加えてコメント追加と同時にビルドするタイプなので、ビルド時間などに制限がある場合には不向きです。",[15,1563,1564],{},"それ以外にも、Vue.js的にプログラミングすることが可能なので、独自のAPIなどを使ってコメント機能を追加することも可能です。",{"title":25,"searchDepth":26,"depth":26,"links":1566},[1567],{"id":1534,"depth":26,"text":1535},"2021-04-06T04:00:00.000Z",{},"\u002F20210406000000-girdsome",{"title":1529,"description":1529},"816a4c2eeaeeccaa45b83c15190c6501","20210406000000-Girdsomeでコメント機能を追加したい",[37],"jfn9uWHdeFElBvfnn0SZfxeyk2qvggGdRUCOyPzrwtk",{"id":1577,"title":1578,"author":43,"body":1579,"category":130,"date":1630,"description":1578,"extension":31,"locale":32,"meta":1631,"navigation":34,"path":1632,"seo":1633,"slug":1634,"stem":1635,"tag":1636,"updated":1637,"__hash__":1638},"legacyQuestions\u002F20210406000000-GridsomeでCloudflare Web Analyticsを使いたい.md","GridsomeでCloudflare Web Analyticsを使いたい",{"type":7,"value":1580,"toc":1626},[1581,1585,1588,1591,1597,1600,1603,1606,1612,1616,1619],[10,1582,1584],{"id":1583},"indexhhtmlを用意してスクリプトを記述します","index.hhtmlを用意してスクリプトを記述します",[15,1586,1587],{},"Gridsomeでは、Vue.jsと同じように自動生成のHTMLフォーマットだけでなく、ベースとなるHTML（index.htmlをオーバーライド）も設置できます。",[15,1589,1590],{},"src\u002Findex.htmlに、",[76,1592,1595],{"className":1593,"code":1594,"language":81},[79],"\u003C!DOCTYPE html>\n\u003Chtml ${htmlAttrs}>\n \u003Chead>\n ${head}\n \u003C\u002Fhead>\n \u003Cbody ${bodyAttrs}>\n ${app}\n ${scripts}\n \u003C!-- Cloudflare Web Analytics -->\u003Cscript defer src='https:\u002F\u002Fstatic.cloudflareinsights.com\u002Fbeacon.min.js' data-cf-beacon='{\"token\": \"トークン\"}'>\u003C\u002Fscript>\u003C!-- End Cloudflare Web Analytics -->\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[83,1596,1594],{"__ignoreMap":25},[15,1598,1599],{},"と書いて保存するだけでOKです。",[15,1601,1602],{},"後述のプラグインだと、HTMLのヘッダ要素にscriptを追加していますが、Cloudflare Web Analyticsではbodyタグの最後に記述するとあるので、そちらにした方が良いでしょう。",[15,1604,1605],{},"SPAモードのページ遷移もしっかりと計測されます。",[15,1607,1608],{},[704,1609,1611],{"href":1610},"\u002Fq\u002F6220d38fd4d82f9e82507d1dd95d591c\u002F","Gridsomeでデフォルトのindex.htmlを変更するには？",[10,1613,1615],{"id":1614},"プラグインsecurizedplugin-cloudflare-analyticsを使いますトラックできません","プラグイン「@securized\u002Fplugin-cloudflare-analytics」を使います（=>トラックできません）",[15,1617,1618],{},"有志の方がGridsomeでCloudflare Web Analyticsを使えるようにするプラグインを用意してくれているのですが、そちらは計測ができませんでした。",[15,1620,1621],{},[704,1622,1625],{"href":1623,"rel":1624},"https:\u002F\u002Fgridsome.org\u002Fplugins\u002F@securized\u002Fplugin-cloudflare-analytics",[708],"@securized\u002Fplugin-cloudflare-analytics",{"title":25,"searchDepth":26,"depth":26,"links":1627},[1628,1629],{"id":1583,"depth":26,"text":1584},{"id":1614,"depth":26,"text":1615},"2021-04-06T03:00:00.000Z",{},"\u002F20210406000000-gridsomecloudflare-web-analytics",{"title":1578,"description":1578},"e922d77f69e6b46d3c05b83b6b14cfb9","20210406000000-GridsomeでCloudflare Web Analyticsを使いたい",[37],"2021-06-17T03:00:00.000Z","3swWrKtvG_DuJTubvkXABcoxnKLvfymb1-p8zUGZ3Ic",{"id":1640,"title":1611,"author":43,"body":1641,"category":130,"date":1691,"description":1611,"extension":31,"locale":32,"meta":1692,"navigation":34,"path":1693,"seo":1694,"slug":1695,"stem":1696,"tag":1697,"updated":1691,"__hash__":1698},"legacyQuestions\u002F20210406000000-Gridsomeでデフォルトのindex.htmlを変更するには？.md",{"type":7,"value":1642,"toc":1688},[1643,1647,1650,1653,1656,1673,1676,1679,1685],[10,1644,1646],{"id":1645},"srcindexhtmlを作ればオーバーライドされます","src\u002Findex.htmlを作ればオーバーライドされます",[15,1648,1649],{},"Gridsomeでは、srcディレクトリ直下においたindex.htmlファイルがデフォルトのindex.htmlをオーバーライドする仕様になっています。",[15,1651,1652],{},"index.htmlの中身を変更するのではなく、完全に置き換えてしまうので、必要な変数をindex.htmlに仕込んでおく必要があります。",[15,1654,1655],{},"変数は、",[1334,1657,1658,1661,1664,1667,1670],{},[56,1659,1660],{},"htmlAttrs",[56,1662,1663],{},"head",[56,1665,1666],{},"bodyAttrs",[56,1668,1669],{},"app",[56,1671,1672],{},"scripts",[15,1674,1675],{},"です。",[15,1677,1678],{},"公式ドキュメントのサンプルは下記のようになっています。",[76,1680,1683],{"className":1681,"code":1682,"language":81},[79],"\u003C!DOCTYPE html>\n\u003Chtml ${htmlAttrs}>\n \u003Chead>\n ${head}\n \u003C\u002Fhead>\n \u003Cbody ${bodyAttrs}>\n ${app}\n ${scripts}\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[83,1684,1682],{"__ignoreMap":25},[15,1686,1687],{},"ここは、普通のHTMLとして動くので、独自にJavascript処理を入れることも可能です。",{"title":25,"searchDepth":26,"depth":26,"links":1689},[1690],{"id":1645,"depth":26,"text":1646},"2021-04-06T02:00:00.000Z",{},"\u002F20210406000000-gridsomeindex.html",{"title":1611,"description":1611},"6220d38fd4d82f9e82507d1dd95d591c","20210406000000-Gridsomeでデフォルトのindex.htmlを変更するには？",[37],"iX1qI1hRMJRZXxNFGlgZaU58_Sm2ssZQZs0ybDTOic4",{"id":1700,"title":1701,"author":43,"body":1702,"category":130,"date":1729,"description":1701,"extension":31,"locale":32,"meta":1730,"navigation":34,"path":1731,"seo":1732,"slug":1733,"stem":1734,"tag":1735,"updated":1729,"__hash__":1736},"legacyQuestions\u002F20210406000000-GridsomeにはWordPressみたいにテーマはある?.md","GridsomeにはWordPressみたいにテーマはある?",{"type":7,"value":1703,"toc":1726},[1704,1708,1711,1714,1720,1723],[10,1705,1707],{"id":1706},"gridsomeにはテーマはないがスターターキットがある","Gridsomeにはテーマはないが、スターターキットがある",[15,1709,1710],{},"Gridsomeにはテーマという概念がありません。基本的には一から組み上げていくタイプのフレームワークです。この辺りは、他の静的サイトジェネレータとは少し色が違います。",[15,1712,1713],{},"ただ、Gridsomeには公式・有志の方が開発したスターターキットがあります。スターターキットはGridsomeプロジェクトをクローン出来るもので、Gridsomeプロジェクトを立ち上げる時に指定することで、テーマと同じように使うことが出来ます。",[76,1715,1718],{"className":1716,"code":1717,"language":81},[79],"gridsome create プロジェクト名 スターターキット\n",[83,1719,1717],{"__ignoreMap":25},[15,1721,1722],{},"スターターキットは、Gridsome公式ページに記載されているキット名か、GitレポジトリのURLで指定することが可能です。",[15,1724,1725],{},"WordPRressなどと違うのは、一度テーマを決めたら変更は出来ません。再度、プロジェクトを作り直すことになります。",{"title":25,"searchDepth":26,"depth":26,"links":1727},[1728],{"id":1706,"depth":26,"text":1707},"2021-04-06T01:00:00.000Z",{},"\u002F20210406000000-gridsomewordpress",{"title":1701,"description":1701},"1219767c1cef4cb04e049f09034340a1","20210406000000-GridsomeにはWordPressみたいにテーマはある?",[37],"haIOA9L0NPfl_rO9YoRr6Wz0lJB9luHUiF7uNNQofOM",{"id":1738,"title":1739,"author":43,"body":1740,"category":130,"date":1825,"description":1739,"extension":31,"locale":32,"meta":1826,"navigation":34,"path":1827,"seo":1828,"slug":1829,"stem":1830,"tag":1831,"updated":1825,"__hash__":1833},"legacyQuestions\u002F20210408000000-Cloudflare Workers KVのデータをWorkersから呼び出す方法.md","Cloudflare Workers KVのデータをWorkersから呼び出す方法",{"type":7,"value":1741,"toc":1822},[1742,1746,1749,1760,1763,1766,1769,1775,1778,1781,1787,1790,1793,1799,1802,1805,1819],[10,1743,1745],{"id":1744},"設定をすればクラスとしてロードが出来ます","設定をすればクラスとしてロードが出来ます。",[15,1747,1748],{},"Cloudflare Workers KVのデータをWorkersから呼び出すには、",[53,1750,1751,1754,1757],{},[56,1752,1753],{},"管理画面でKV名前空間のバインディング",[56,1755,1756],{},"wrangler.tomlに記述",[56,1758,1759],{},"Workersで呼び出す",[15,1761,1762],{},"という手順を踏みます。",[15,1764,1765],{},"Cloudflareの管理画面からのバイディングは、Workersの設定ページから「設定」タブをクリックして、「KV 名前空間のバインディング」から追加すればOKです。",[15,1767,1768],{},"これだけだと、「WorkersからKVにアクセスできる権限」が与えられているだけなので、Workerのプログラム内で使う場合は、wrangler.tomlに記述が必要です。",[76,1770,1773],{"className":1771,"code":1772,"language":81},[79],"kv_namespaces = [\n { binding = \"変数名1\", id = \"KVのnamespace ID\", preview_id = \"KVのnamespace ID\" },\n { binding = \"変数名2\", id = \"KVのnamespace ID\", preview_id = \"KVのnamespace ID\" }\n]\n\n",[83,1774,1772],{"__ignoreMap":25},[15,1776,1777],{},"連想配列で、複数のKVを設定できます。",[15,1779,1780],{},"idとpreview_idは同じものを指定できますが、Cloudflare的には別々にするのを推奨しているようで、ビルド時に、",[76,1782,1785],{"className":1783,"code":1784,"language":81},[79],"Specifying the same KV namespace ID for both preview and production sessions may cause bugs in your production worker! Proceed with caution.\n",[83,1786,1784],{"__ignoreMap":25},[15,1788,1789],{},"というアラートが出ます。",[15,1791,1792],{},"ここまで設定できたら、Workersのプログラム内で呼び出します。",[76,1794,1797],{"className":1795,"code":1796,"language":81},[79],"const hoge = await 変数名1.get(\"キー名\")\n\n\u002F\u002F 変数名がBlog、キー名がListだったとしたら\n\nconst hoge = await Blog.get(\"List\")\n",[83,1798,1796],{"__ignoreMap":25},[15,1800,1801],{},"でバリューに収納したデータが帰ってきます。",[15,1803,1804],{},"バイディイングしたKVクラスには、",[53,1806,1807,1810,1813,1816],{},[56,1808,1809],{},".put(キー、バリュー)",[56,1811,1812],{},".get(キー)",[56,1814,1815],{},".delete(キー)",[56,1817,1818],{},".list()",[15,1820,1821],{},"の4つのメソッドが用意されています。",{"title":25,"searchDepth":26,"depth":26,"links":1823},[1824],{"id":1744,"depth":26,"text":1745},"2021-04-08T03:00:00.000Z",{},"\u002F20210408000000-cloudflare-workers-kvworkers",{"title":1739,"description":1739},"cd1defa55659594e8b5f77ee425cdf90","20210408000000-Cloudflare Workers KVのデータをWorkersから呼び出す方法",[1832],"cloudflare-workers","NVH8Cn_MYbTio9FpC_a8hkHViOFNDtmoBXHFrfJ8MrQ",{"id":1835,"title":1836,"author":43,"body":1837,"category":130,"date":1867,"description":1836,"extension":31,"locale":32,"meta":1868,"navigation":34,"path":1869,"seo":1870,"slug":1871,"stem":1872,"tag":1873,"updated":1867,"__hash__":1874},"legacyQuestions\u002F20210408000000-Cloudflareのwranglerで別アカウントのWorkersを管理するには？.md","Cloudflareのwranglerで別アカウントのWorkersを管理するには？",{"type":7,"value":1838,"toc":1864},[1839,1843,1846,1849,1855,1858,1861],[10,1840,1842],{"id":1841},"コマンド時にapiコードを指定します","コマンド時にAPIコードを指定します。",[15,1844,1845],{},"wranglerコマンドは、基本的にはloginしているアカウントIDのWorkersしか管理ができません。",[15,1847,1848],{},"しかし、APIトークンを指定することで、別のアカウントIDのWorkersをwranglerコマンドで実行することが可能になります。",[76,1850,1853],{"className":1851,"code":1852,"language":81},[79],"CF_API_TOKEN=トークン wrangler コマンド\n\n\u002F\u002F 例\nCF_API_TOKEN=abcdefgabcdefgabcdefgabcdefg wrangler publish\n",[83,1854,1852],{"__ignoreMap":25},[15,1856,1857],{},"wranglerコマンドの前に「CF_API_TOKEN=トークン」を付けるだけなので、簡単です。",[15,1859,1860],{},"トークンは、Workersを管理できるAPI トークンを発行します。管理画面のマイアカウントにある「Global API Key」では実行ができないので、注意が必要です。",[15,1862,1863],{},"プレビューサーバーを立ち上げる「wrarngler dev」でも別アカウントの場合はCF_API_TOKENの指定が必要です。",{"title":25,"searchDepth":26,"depth":26,"links":1865},[1866],{"id":1841,"depth":26,"text":1842},"2021-04-08T04:00:00.000Z",{},"\u002F20210408000000-cloudflarewranglerworkers",{"title":1836,"description":1836},"2504513b600939bf9c57cd9ff089fcf5","20210408000000-Cloudflareのwranglerで別アカウントのWorkersを管理するには？",[1832],"ooS1wL10HLQpPY3BIrJUOi_cgdxjMPhbuuau8GIgXXE",{"id":1876,"title":1877,"author":43,"body":1878,"category":130,"date":1922,"description":1877,"extension":31,"locale":32,"meta":1923,"navigation":34,"path":1924,"seo":1925,"slug":1926,"stem":1927,"tag":1928,"updated":1922,"__hash__":1929},"legacyQuestions\u002F20210408000000-cloudflare workers kvのデータをローカルアップロードするには？.md","Cloudflare Workers KVのデータをローカルアップロードするには？",{"type":7,"value":1879,"toc":1919},[1880,1884,1887,1890,1898,1901,1907,1910,1916],[10,1881,1883],{"id":1882},"ブラウザからかwrangler-cliでアップロードが可能です","ブラウザからかwrangler CLIでアップロードが可能です。",[15,1885,1886],{},"Cloudflare Workers KVのキー・バリューデータは、Cloudflareの管理画面からデータをアップロード・編集が可能です。",[15,1888,1889],{},"また、wranglerコマンドもアップロード可能で、",[53,1891,1892,1895],{},[56,1893,1894],{},"Cloudflare Workers KVにアクセスできる権限",[56,1896,1897],{},"KVのネームスペースID",[15,1899,1900],{},"の二つがあれば、wranglerがインストールされている環境から直接KVにデータをアップロードできます。",[76,1902,1905],{"className":1903,"code":1904,"language":81},[79],"wrangler kv:key put --namespace-id=KVのネームスペースID \"キー名\" \"バリュー\"\n",[83,1906,1904],{"__ignoreMap":25},[15,1908,1909],{},"jsonなどのファイルをそのままアップロードする場合は、",[76,1911,1914],{"className":1912,"code":1913,"language":81},[79],"wrangler kv:key put --namespace-id=KVのネームスペースID \"キー名\" ファイルのパス --path\n",[83,1915,1913],{"__ignoreMap":25},[15,1917,1918],{},"どちらを使っても問題ないですが、大きめのjsonファイルをアップロードする場合は、wranglerにした方が処理が速くて快適です。",{"title":25,"searchDepth":26,"depth":26,"links":1920},[1921],{"id":1882,"depth":26,"text":1883},"2021-04-08T02:00:00.000Z",{},"\u002F20210408000000-cloudflare-workers-kv",{"title":1877,"description":1877},"24c2ae476005d3d84b946e46361b1da5","20210408000000-cloudflare workers kvのデータをローカルアップロードするには？",[1832],"6f2Ipx8avyiwZZadohlvEvwLBcwINuWc36u9CWU5DKU",{"id":1931,"title":1932,"author":43,"body":1933,"category":130,"date":1965,"description":1932,"extension":31,"locale":32,"meta":1966,"navigation":34,"path":1967,"seo":1968,"slug":1969,"stem":1970,"tag":1971,"updated":1965,"__hash__":1973},"legacyQuestions\u002F20210408000000-cloudflare workers pages用のDNSはどうすればいい？.md","Cloudflare Workers Pages用のDNSはどうすればいい？",{"type":7,"value":1934,"toc":1961},[1935,1939,1942,1948,1951,1955,1958],[10,1936,1938],{"id":1937},"cloudflare-workersはaレコードを192021に向けます","Cloudflare WorkersはAレコードを「192.0.2.1」に向けます。",[15,1940,1941],{},"Cloudflare Pagesや、Cloudflare Workersをドメインと紐づける場合、DNSレコードが必要です。その際に、IPアドレスを何にするかが悩みどころですが、Cloudflare Workersの場合は、",[76,1943,1946],{"className":1944,"code":1945,"language":81},[79],"192.0.2.1\n",[83,1947,1945],{"__ignoreMap":25},[15,1949,1950],{},"にAレコードを向けると、Cloudflareにエッジーサーバーに向かってくれます。",[10,1952,1954],{"id":1953},"cloudflare-pagesはcnameレコードでpagesdevのアドレスに向ける","Cloudflare PagesはCNAMEレコードでpages.devのアドレスに向ける",[15,1956,1957],{},"Cloudflare Pagesを独自ドメインで運用する場合は、自動付与される「xxx.pages.dev」のアドレスに向けてCNAMEレコードを向ければ独自ドメインで運用が出来ます。",[15,1959,1960],{},"wwwあり・なしを両方Cloudflare Pagesで運用する場合は、Cloudflareの「Page Rule」でどちらかに301リダイレクトするようにします。",{"title":25,"searchDepth":26,"depth":26,"links":1962},[1963,1964],{"id":1937,"depth":26,"text":1938},{"id":1953,"depth":26,"text":1954},"2021-04-08T01:00:00.000Z",{},"\u002F20210408000000-cloudflare-workers-pagesdns",{"title":1932,"description":1932},"28214e4d6b1d1a19f8139520edf0192e","20210408000000-cloudflare workers pages用のDNSはどうすればいい？",[1832,1972],"cloudflare-pages","XcRDNdjOb-x-fJuKKJ09BkRyFEMQea7v3Sfkeo5KnYQ",{"id":1975,"title":1976,"author":43,"body":1977,"category":130,"date":2023,"description":1976,"extension":31,"locale":32,"meta":2024,"navigation":34,"path":2025,"seo":2026,"slug":2027,"stem":2028,"tag":2029,"updated":2023,"__hash__":2030},"legacyQuestions\u002F20210409000000-Grdisomeでビルドしたサイトをプレビューしたい.md","Grdisomeでビルドしたサイトをプレビューしたい",{"type":7,"value":1978,"toc":2020},[1979,1982,1985,1988,1999,2002,2005,2008,2014,2017],[10,1980,1981],{"id":1981},"pythonの簡易サーバーを使うとプレビュー出来ます",[15,1983,1984],{},"Gridsomeでビルドしたサイトはパスが相対パスになっているので、そのままindex.htmlを開く形ではプレビューが出来ません。",[15,1986,1987],{},"方法としては、",[53,1989,1990,1993,1996],{},[56,1991,1992],{},"ローカルにWebサーバーを設定する（Apacheなど）",[56,1994,1995],{},"ホスティングサーバーのテスト環境にアップする",[56,1997,1998],{},"プログラム言語の簡易サーバーを使う",[15,2000,2001],{},"がありますが、pythonの簡易サーバーが簡単で便利です。",[15,2003,2004],{},"macOSやLinuxであれば、pythonはデフォルトでインストールされていますし、WindowsでもWSLをインストールしていれば、Linuxのpythonが使えます。",[15,2006,2007],{},"pythonの簡易サーバーでのプレビューの仕方は、",[76,2009,2012],{"className":2010,"code":2011,"language":81},[79],"\u002F\u002F プロジェクトのdistディレクトリに入る\ncd dist\n\n\u002F\u002F pythonサーバーを立ち上げる\npython -m SimpleHTTPServer 8888\n",[83,2013,2011],{"__ignoreMap":25},[15,2015,2016],{},"これで、ブラウザで「localhost:8888」にアクセスすると、ビルドしたGridsomeのサイトが本番のサーバーと全く同じように動くはずです。",[15,2018,2019],{},"Gridsomeはプレビュー用の開発サーバーとビルドしたファイルの挙動が違うことがあるので、この方法でプレビューしておくとエラーチェックなどを確実に行えます。",{"title":25,"searchDepth":26,"depth":26,"links":2021},[2022],{"id":1981,"depth":26,"text":1981},"2021-04-09T02:00:00.000Z",{},"\u002F20210409000000-grdisome",{"title":1976,"description":1976},"019951426dc5cc84c034931fce4e10e3","20210409000000-Grdisomeでビルドしたサイトをプレビューしたい",[37],"OICHEo42U_Jnq7h0-Rkz6kCH9iGW4GyEDu65s8ENBJA",{"id":2032,"title":2033,"author":43,"body":2034,"category":130,"date":2055,"description":2033,"extension":31,"locale":32,"meta":2056,"navigation":34,"path":2057,"seo":2058,"slug":2059,"stem":2060,"tag":2061,"updated":2055,"__hash__":2062},"legacyQuestions\u002F20210409000000-GridsomeでWindow is not definedというエラーが出た.md","GridsomeでWindow is not definedというエラーが出た",{"type":7,"value":2035,"toc":2052},[2036,2040,2043,2046,2049],[10,2037,2039],{"id":2038},"javascriptのwindowインターフェイスを使っているのが原因です","JavascriptのWindowインターフェイスを使っているのが原因です",[15,2041,2042],{},"Gridsomeは、静的サイトにビルドする際にVue.jsのコードを実行してページを生成しているため、Windowインターフェースが使えません（ブラウザじゃないのでWindowがないので）。",[15,2044,2045],{},"Gridsomeのスクリプトでwindowを使っていなくても、インストールしたプラグインがwindowを使っているとエラーになります。",[15,2047,2048],{},"エラー画面に、エラーもとのプラグインが表示されるので、そのプラグインを止めればエラーは出なくなります。",[15,2050,2051],{},"Vue.jsのプラグインはブラウザで使う前提なので、比較的windowを使っていることが多いのです。Gridsome用のプラグインを使うか、自分でロジックを組むことになりますが、エラー対応を考えたら自分で組んだ方が楽だったりもします。",{"title":25,"searchDepth":26,"depth":26,"links":2053},[2054],{"id":2038,"depth":26,"text":2039},"2021-04-09T01:00:00.000Z",{},"\u002F20210409000000-gridsomewindow-is-not-defined",{"title":2033,"description":2033},"2c448e5f023eece57af50359044170e4","20210409000000-GridsomeでWindow is not definedというエラーが出た",[37],"Z2x0AbDycAMkOSBS2HaBt5z2iHFh47SufRqH9x67GpI",{"id":2064,"title":2065,"author":2066,"body":2067,"category":2095,"date":2055,"description":2065,"extension":31,"locale":32,"meta":2096,"navigation":34,"path":2097,"seo":2098,"slug":2099,"stem":2100,"tag":2101,"updated":2055,"__hash__":2103},"legacyQuestions\u002F20210409000000-Hackintoshで使える格安のdGPUは？.md","Hackintosh作るならIntelがいい？それともRyzen？","joji-kanzaki",{"type":7,"value":2068,"toc":2091},[2069,2072,2075,2078,2081,2084,2088],[10,2070,2071],{"id":2071},"どちらも好きな方で大丈夫です",[15,2073,2074],{},"かつてはRyzenだと動かないなどのトラブルがありましたが、現在ではRyzenでも動作レポートがたくさんあります。",[15,2076,2077],{},"Intel CPUは、本物のMacで搭載されているので成功確率は高くなります。今後は自社製のMシリーズのCPUに切り替わっていきますが、Appleの最終Intel MacとなるであろうiMac 2020が第10世代のIntel Coreシリーズを搭載しているので、先5年くらいは使えるでしょう。",[15,2079,2080],{},"コスパでいうと、かつてはロー・ミドルエンドのCPUに4コア・8スレッド以上のモデルが少なかったIntelが、多コア展開をしたRyzenよりも劣っていると見られていましたが、最近ではIntelも4コア・8スレッドが最低ラインになっているので問題ありません。また、同等グレードであればシングル性能はIntelのが良いので、その意味ではIntelにメリットがあります。",[15,2082,2083],{},"Ryzenが得意なマルチコア・マルチスレッドは、動画編集や機械学習などの専門アプリを使わない限りはそこまで影響がないと言われているので、現状では4コア・8スレッド以上あれば問題ないでしょう。",[10,2085,2087],{"id":2086},"ryzentoshでは使えないアプリがあるので注意","Ryzentoshでは使えないアプリがあるので注意",[15,2089,2090],{},"RyzenをHackintoshのCPUにする場合の注意点はアプリです。特に、仮想化技術を使うアプリ（VirtualBox、、Dockerなど）はRyzentoshでは使えないことがほとんどなので、素直にIntelにしておいた方が良いでしょう。",{"title":25,"searchDepth":26,"depth":26,"links":2092},[2093,2094],{"id":2071,"depth":26,"text":2071},{"id":2086,"depth":26,"text":2087},"pc-smartphone",{},"\u002F20210409000000-hackintoshdgpu",{"title":2065,"description":2065},"c3b3d73de84f9e37d0439cf3c255ed04","20210409000000-Hackintoshで使える格安のdGPUは？",[2102],"hackintosh","evKofFq1Izppv1GD0dexmUJ18nCdmRdWNHN-3VgxhDE",{"id":2105,"title":2106,"author":2066,"body":2107,"category":2095,"date":2055,"description":2106,"extension":31,"locale":32,"meta":2213,"navigation":34,"path":2214,"seo":2215,"slug":2216,"stem":2217,"tag":2218,"updated":2055,"__hash__":2219},"legacyQuestions\u002F20210409000000-Hackintosh作るならIntel？Ryzen?.md","Hackintoshで使える格安のdGPUは？",{"type":7,"value":2108,"toc":2209},[2109,2113,2116,2119,2126,2129,2133,2136,2139,2147,2150,2153,2182,2185,2198,2201],[10,2110,2112],{"id":2111},"新品ならgt-710がベスト","新品ならGT 710がベスト",[15,2114,2115],{},"新品で入手可能で、最新のmacOSであるBig Surでも使えるdGPUのうち、格安なのはGT 710シリーズです。",[15,2117,2118],{},"一番安い玄人志向のモデルなら3,000円台、ASUSやZOTACなどの海外メーカーのモデルでも7,000円ほどで入手できます。",[15,2120,2121],{},[704,2122,2125],{"href":2123,"rel":2124},"https:\u002F\u002Fwww.amazon.co.jp\u002Fdp\u002FB07N2YF13J\u002F",[708],"玄人志向 NVIDIA GeForce GT 710 搭載 グラフィックボード 1GB GF-GT710-E1GB\u002FHS | Amazon",[15,2127,2128],{},"GT 710は現行モデルですが、700番台は古いKepler世代のモデルなので、macOSの標準ドライバで使うことが出来ます。",[10,2130,2132],{"id":2131},"gtxの600番台が中古で安く手に入ります","GTXの600番台が中古で安く手に入ります。",[15,2134,2135],{},"macOSで使うdGPUはAMDのdGPUが定番ですが、古い時代のNVIDIAのdGPUも現役で使えます。",[15,2137,2138],{},"macOSで使えるNVIDIAのdGPUのうち安いのは、",[53,2140,2141,2144],{},[56,2142,2143],{},"GTX 700番台",[56,2145,2146],{},"GTX・GT 600番台",[15,2148,2149],{},"で、安いのはGTX 600番台。",[15,2151,2152],{},"GTX 600番台は、",[1334,2154,2155,2158,2161,2164,2167,2170,2173,2176,2179],{},[56,2156,2157],{},"GTX 690",[56,2159,2160],{},"GTX 680",[56,2162,2163],{},"GTX 670",[56,2165,2166],{},"GTX 660 Ti",[56,2168,2169],{},"GTX 660",[56,2171,2172],{},"GTX 650",[56,2174,2175],{},"GT 640",[56,2177,2178],{},"GT 635",[56,2180,2181],{},"GT 630",[15,2183,2184],{},"そのうち、GTX 645、650Ti、660、660Tiはドライバでトラブルがありシステムが不安定になるようなので、",[1334,2186,2187,2190,2193,2195],{},[56,2188,2189],{},"GTX 650(GK 107コアモデル)",[56,2191,2192],{},"GT 640(GK 107\u002F208コアモデル)",[56,2194,2178],{},[56,2196,2197],{},"GT 630(GK 107\u002F208コアモデル)",[15,2199,2200],{},"あたりが、5,000円未満で手に入る格安dGPUでしょう。",[15,2202,2203,2204],{},"参考：",[704,2205,2208],{"href":2206,"rel":2207},"https:\u002F\u002Fdortania.github.io\u002FGPU-Buyers-Guide\u002Fmodern-gpus\u002Fnvidia-gpu.html#kepler-series-gtx-6xx-7xx",[708],"Nvidia GPUs | GPU Buyers Guide",{"title":25,"searchDepth":26,"depth":26,"links":2210},[2211,2212],{"id":2111,"depth":26,"text":2112},{"id":2131,"depth":26,"text":2132},{},"\u002F20210409000000-hackintoshintelryzen",{"title":2106,"description":2106},"a7fa4dd152f380a0979eb27e5f126cb4","20210409000000-Hackintosh作るならIntel？Ryzen?",[2102],"TGUbnj9nkm6tvOMMLa1Dmm-ZcbJa4vvmSazW3NdD3Gs",{"id":2221,"title":2222,"author":2066,"body":2223,"category":2095,"date":2263,"description":2222,"extension":31,"locale":32,"meta":2264,"navigation":34,"path":2265,"seo":2266,"slug":2267,"stem":2268,"tag":2269,"updated":2263,"__hash__":2270},"legacyQuestions\u002F20210412000000-HackintoshのSSDは何でもいいの？.md","HackintoshのSSDは何でもいいの？",{"type":7,"value":2224,"toc":2260},[2225,2228,2231,2234,2254,2257],[10,2226,2227],{"id":2227},"一部の製品を除けばほぼ何でも動作します",[15,2229,2230],{},"市場に流通しているSSDストレージの種類で考えたら、Hackintoshで動作しないSSDの数は微々たるものですが、そのSSDを引いてしまうとトラブルになるので、「避けるべきSSD」を選んでいないかだけはしっかりとチェックするべきです。",[15,2232,2233],{},"Hackintoshで動作しないとされるのは、",[53,2235,2236,2239,2242,2245,2248,2251],{},[56,2237,2238],{},"Samusung PM970 Evo",[56,2240,2241],{},"Samusung PM991",[56,2243,2244],{},"Samusung PM981（NVMeFixで対応可能）",[56,2246,2247],{},"Micron 2200S",[56,2249,2250],{},"Intel 600p",[56,2252,2253],{},"全てのeMMC",[15,2255,2256],{},"とされています。",[15,2258,2259],{},"これらのSSDは代替製品がたくさん流通しているので、選ばない方が賢明です。",{"title":25,"searchDepth":26,"depth":26,"links":2261},[2262],{"id":2227,"depth":26,"text":2227},"2021-04-12T05:00:00.000Z",{},"\u002F20210412000000-hackintoshssd",{"title":2222,"description":2222},"32f96d94d0c7a14d6fe05bdd9bf91a9b","20210412000000-HackintoshのSSDは何でもいいの？",[2102],"rf00ydTL-3j2xan1_25z_OrUsviVKLBf4BEpbP8Fe1Q",{"id":2272,"title":2273,"author":2066,"body":2274,"category":2095,"date":2320,"description":2321,"extension":31,"locale":32,"meta":2322,"navigation":34,"path":2323,"seo":2324,"slug":2325,"stem":2326,"tag":2327,"updated":2320,"__hash__":2328},"legacyQuestions\u002F20210412000000-Hackintoshの正しい設定はどうやって探せば良いですか？.md","Hackintoshの正しい設定はどうやって探せば良いですか？",{"type":7,"value":2275,"toc":2317},[2276,2280,2289,2292,2295,2298,2314],[10,2277,2279],{"id":2278},"githubで探すのが手軽で確実です","Githubで探すのが手軽で確実です",[15,2281,2282,2283,2288],{},"かつては",[704,2284,2287],{"href":2285,"rel":2286},"https:\u002F\u002Fwww.tonymacx86.com\u002F",[708],"tonymacx86.com","などのフォーラムにアップロードされている設定ファイル一式をダウンロードして試す方法が主流でしたが、現在ではHackintoshにトライしたユーザーが独自にGithub上にデータをたくさん公開しているので、気軽にいろんな設定ファイルを試すことが出来ます。",[15,2290,2291],{},"Githubで探す際は、「型番 + Hackintosh」や「型番 + macOS名（Mojaveなど）」で調べると、たくさんのレポジトリが出てくるので、Hackintoshを組む前のパーツ選びの時のヒントにもなります。",[15,2293,2294],{},"Hackintosh初心者の方なら、Githubレポジトリの成功事例と全く同じ構成で組んで、そのレポジトリのデータをそのまま使ってインストールすると、成功確率がグッと上がります。",[15,2296,2297],{},"Githubで情報を探す際は、",[1334,2299,2300,2307],{},[56,2301,2302],{},[704,2303,2306],{"href":2304,"rel":2305},"https:\u002F\u002Fgithub.com\u002Ftopics\u002Fhackintosh",[708],"hackintosh | Github",[56,2308,2309],{},[704,2310,2313],{"href":2311,"rel":2312},"https:\u002F\u002Fgithub.com\u002Ftopics\u002Fopencore",[708],"opencore | Github",[15,2315,2316],{},"と行ったタグで探すのも成功への近道の一つです。",{"title":25,"searchDepth":26,"depth":26,"links":2318},[2319],{"id":2278,"depth":26,"text":2279},"2021-04-12T04:00:00.000Z","Hackintoshの成功している設定ファイルはどうやって探せば良いですか？",{},"\u002F20210412000000-hackintosh",{"title":2273,"description":2321},"dfb1bc750836e3c5d784826fe5e5989c","20210412000000-Hackintoshの正しい設定はどうやって探せば良いですか？",[2102],"5MyHlYKxoC-QbSjIcT43EAIEysmJxfkb-edO3mlADEU",{"id":2330,"title":2331,"author":2066,"body":2332,"category":2095,"date":2361,"description":2331,"extension":31,"locale":32,"meta":2362,"navigation":34,"path":2363,"seo":2364,"slug":2365,"stem":2366,"tag":2367,"updated":2361,"__hash__":2368},"legacyQuestions\u002F20210412000000-Hackintoshは自作PCとノートPCどちらが良いですか？.md","Hackintoshは自作PCとノートPCどちらが良いですか？",{"type":7,"value":2333,"toc":2357},[2334,2338,2341,2344,2347,2351,2354],[10,2335,2337],{"id":2336},"成功しやすいのは圧倒的に自作pc","成功しやすいのは圧倒的に自作PC",[15,2339,2340],{},"Hackintoshを作る上で問題になるのは、PCのパーツをmacOS上で正常に動作するようにできるかという点です。ここが唯一の課題であり、Hackintosh最大のトラブルでもあります。",[15,2342,2343],{},"その意味では、「相性が悪かったら交換する」ことが出来る自作PCの方が圧倒的にHackintoshの成功確率が高くなります。もし動作しないパーツがあったら、そのパーツだけを動作レポートのある製品に交換すれば良いだけなので、失敗した時のリスク（出費）が小さく済むというメリットもあります。",[15,2345,2346],{},"一方で、ノートPCはメーカー独自の設計やパーツが入っていることがあり、パーツの交換もほとんど出来ないので、成功確率は自作PCよりかは低くなります。しかも、HackintoshのためにノートPCを買ってしまうと、うまく動作させられなかったらHackintoshとしては使えなくなるので、失敗した時のリスクも大きくなってしまいます。",[10,2348,2350],{"id":2349},"メーカー製ノートpcでもhackintoshの成功事例はたくさんあります","メーカー製ノートPCでもHackintoshの成功事例はたくさんあります",[15,2352,2353],{},"ただ、ノートPCだから絶対にHackintoshが出来ないのかというとそういうことではなく、メーカー製ノートPCでの成功事例はたくさんあります。",[15,2355,2356],{},"Githubには成功した設定ファイルを公開している方がたくさんいるので、手持ち（or 購入予定）のノートPCでのHackintosh成功事例があるかをチェックしてみると良いでしょう。",{"title":25,"searchDepth":26,"depth":26,"links":2358},[2359,2360],{"id":2336,"depth":26,"text":2337},{"id":2349,"depth":26,"text":2350},"2021-04-12T03:00:00.000Z",{},"\u002F20210412000000-hackintoshpcpc",{"title":2331,"description":2331},"28c6b66bebfe7ed11bf48ec9806fdf3c","20210412000000-Hackintoshは自作PCとノートPCどちらが良いですか？",[2102],"OgyagMe_-NmxdFyNZAFNiayFatQX_xg9BDFuU6ey9wI",{"id":2370,"title":2371,"author":2066,"body":2372,"category":2095,"date":2409,"description":2371,"extension":31,"locale":32,"meta":2410,"navigation":34,"path":2411,"seo":2412,"slug":2413,"stem":2414,"tag":2415,"updated":2409,"__hash__":2416},"legacyQuestions\u002F20210412000000-Hackintoshを作るならdGPUが必須ですか？.md","Hackintoshを作るならdGPUが必須ですか？",{"type":7,"value":2373,"toc":2405},[2374,2378,2381,2389,2392,2395,2399,2402],[10,2375,2377],{"id":2376},"シングルディスプレイならigpuでも問題ありません","シングルディスプレイならiGPUでも問題ありません",[15,2379,2380],{},"Hackintoshを作るときに多いトラブルは、",[53,2382,2383,2386],{},[56,2384,2385],{},"ブートトラブル（起動しない、エラー）",[56,2387,2388],{},"ビデオトラブル（正常に動作しない、映らない）",[15,2390,2391],{},"はトラブルのツートップですが、シングルディスプレイなら、macOSに対応するiGPUで適切に設定を行えば、問題なくHackintoshで使うことが多くなっています。",[15,2393,2394],{},"ただし、旧世代のiGPUを使う場合は、設定やドライバの問題で正常に動作しない可能性もあるため、出来るだけ最新のiGPUを搭載したCPU・マザーで、かつ成功レポートがある製品を使う方が安心です。",[10,2396,2398],{"id":2397},"デュアルディスプレイならdgpuの方がトラブルが少ない","デュアルディスプレイならdGPUの方がトラブルが少ない",[15,2400,2401],{},"HackintoshではiGPUでのデュアルディスプレイ表示でトラブルが多いことが知られています。その意味でも、ディスプレイを2枚以上繋ぐ想定なら、macOSに対応したdGPUを用意した方が安心です。",[15,2403,2404],{},"特に、macOSがネイティブに対応しているdGPUカードなら、デュアルディスプレイでも問題なく動作する可能性が高くなります。",{"title":25,"searchDepth":26,"depth":26,"links":2406},[2407,2408],{"id":2376,"depth":26,"text":2377},{"id":2397,"depth":26,"text":2398},"2021-04-12T02:00:00.000Z",{},"\u002F20210412000000-hackintoshdgpu",{"title":2371,"description":2371},"0caa9c06ee9b64d9f1c7fd8dc4c052f7","20210412000000-Hackintoshを作るならdGPUが必須ですか？",[2102],"Mmjuf0raJG-sX4SU86ilRDfs8v91HdOVjqeToVznyH4",{"id":2418,"title":2419,"author":2066,"body":2420,"category":2095,"date":2528,"description":2419,"extension":31,"locale":32,"meta":2529,"navigation":34,"path":2530,"seo":2531,"slug":2532,"stem":2533,"tag":2534,"updated":2528,"__hash__":2535},"legacyQuestions\u002F20210412000000-Intel Hackintoshのマザーボードの選び方は？.md","Intel Hackintoshのマザーボードの選び方は？",{"type":7,"value":2421,"toc":2524},[2422,2426,2429,2432,2435,2449,2452,2455,2463,2508,2511,2514,2521],[10,2423,2425],{"id":2424},"トラブルがある製品を避ければokです","トラブルがある製品を避ければOKです",[15,2427,2428],{},"一昔前は、「Hackintoshを作るならGigabyte以外のマザーボードはダメ」と言われていましたが、現在では主要なマザーボードのメーカーの製品であれば、ほとんどが問題なく動作するようです。",[15,2430,2431],{},"ただ、マザーボードには特殊な機能を持っているものもあるため、そうした機能があるとHackintoshではうまく動かない可能性があります。",[15,2433,2434],{},"主に注意すべき点は、",[1334,2436,2437,2440,2443,2446],{},[56,2438,2439],{},"音声インターフェイス",[56,2441,2442],{},"ネットワークインターフェイス",[56,2444,2445],{},"USBコントローラー",[56,2447,2448],{},"iGPU",[15,2450,2451],{},"などです。",[10,2453,2454],{"id":2454},"マザーボードメーカーと避けるべき製品",[15,2456,2457,2462],{},[704,2458,2461],{"href":2459,"rel":2460},"https:\u002F\u002Fdortania.github.io\u002FAnti-Hackintosh-Buyers-Guide\u002FMotherboard.html",[708],"Anti-Hackintosh Buyers Guide","では、選ぶべきではないマザーボードが紹介されています。",[407,2464,2465,2475],{},[410,2466,2467],{},[413,2468,2469,2472],{},[416,2470,2471],{},"メーカー",[416,2473,2474],{"align":420},"避けるべき製品",[424,2476,2477,2485,2493,2500],{},[413,2478,2479,2482],{},[429,2480,2481],{},"MSI",[429,2483,2484],{"align":420},"Z390シリーズ",[413,2486,2487,2490],{},[429,2488,2489],{},"AsROCK",[429,2491,2492],{"align":420},"Z390シリーズ以前",[413,2494,2495,2498],{},[429,2496,2497],{},"Gigabyte",[429,2499,2492],{"align":420},[413,2501,2502,2505],{},[429,2503,2504],{},"ASUS",[429,2506,2507],{"align":420},"B460、H470、Z490シリーズ",[15,2509,2510],{},"これらは不具合が起きることが多いようなので、避けるべきでしょう。",[15,2512,2513],{},"Hackintosh界隈で使うやすいされるマザーボードメーカーは、",[1334,2515,2516,2518],{},[56,2517,2504],{},[56,2519,2520],{},"ASRock",[15,2522,2523],{},"という声がよく聞かれます。",{"title":25,"searchDepth":26,"depth":26,"links":2525},[2526,2527],{"id":2424,"depth":26,"text":2425},{"id":2454,"depth":26,"text":2454},"2021-04-12T01:00:00.000Z",{},"\u002F20210412000000-intel-hackintosh",{"title":2419,"description":2419},"883d02695e3aca28e61de08723ffd2d2","20210412000000-Intel Hackintoshのマザーボードの選び方は？",[2102],"G5hxSOS5jgWxG-icxbdQZW-R6bUkqOVTrDg5FPmI290",{"id":2537,"title":2538,"author":2066,"body":2539,"category":2095,"date":2568,"description":2538,"extension":31,"locale":32,"meta":2569,"navigation":34,"path":2570,"seo":2571,"slug":2572,"stem":2573,"tag":2574,"updated":2568,"__hash__":2575},"legacyQuestions\u002F20210427000000-HDDの適正温度はどれくらい？何度を超えたら危険？.md","HDDの適正温度はどれくらい？何度を超えたら危険？",{"type":7,"value":2540,"toc":2565},[2541,2545,2553,2559,2562],[10,2542,2544],{"id":2543},"_50度未満が適正60度以上は危険です","50度未満が適正、60度以上は危険です",[15,2546,2547,2552],{},[704,2548,2551],{"href":2549,"rel":2550},"https:\u002F\u002Fascii.jp\u002Felem\u002F000\u002F001\u002F017\u002F1017019\u002F",[708],"こちらの記事","によると、",[2554,2555,2556],"blockquote",{},[15,2557,2558],{},"一般的には、HDDの稼働時の温度が50度を超えると徐々に故障率が上がり、60度以上になると、いつ故障してもおかしくない危険水域となる。",[15,2560,2561],{},"ということで、HDDメーカーの動作環境温度は60度、ただし基本的には動作温度が50度は超えないようにするべきということでしょう。",[15,2563,2564],{},"HDDに直接ファンの風を当てるようなエアフローになっているPCケースは少ないですが、心配ならレイアウトなどを工夫して、HDDに直接ケースファンの風を当てるようにするのがベストです。",{"title":25,"searchDepth":26,"depth":26,"links":2566},[2567],{"id":2543,"depth":26,"text":2544},"2021-04-26T01:00:00.000Z",{},"\u002F20210427000000-hdd",{"title":2538,"description":2538},"6c39ba7db338109de1e26343a3da480a","20210427000000-HDDの適正温度はどれくらい？何度を超えたら危険？",[2102],"trsM14UNZrGI8BvO0Hl9tiBq1FccUNyM4VO06mHCZbY",{"id":2577,"title":2578,"author":43,"body":2579,"category":130,"date":2611,"description":2578,"extension":31,"locale":32,"meta":2612,"navigation":34,"path":2613,"seo":2614,"slug":2615,"stem":2616,"tag":2617,"updated":2611,"__hash__":2618},"legacyQuestions\u002F20210428000000-GridsomeでAMPに対応したページを出力できますか？.md","GridsomeでAMPに対応したページを出力できますか？",{"type":7,"value":2580,"toc":2608},[2581,2585,2588,2595,2598,2605],[10,2582,2584],{"id":2583},"_2021年4月現在gridsomeはampに対応していません","2021年4月現在、GridsomeはAMPに対応していません",[15,2586,2587],{},"同じJavascriptの静的サイト・ジェネレータでは、Gatsby JSがAMPページの出力に対応していますが、現状ではGridsomeは対応していません。",[15,2589,2590],{},[704,2591,2594],{"href":2592,"rel":2593},"https:\u002F\u002Fwww.gatsbyjs.com\u002Fplugins\u002Fgatsby-plugin-amp\u002F",[708],"gatsby-plugin-amp",[15,2596,2597],{},"GridsomeのGithubレポジトリでは、「NuxtやGatsbyのようにAMPに対応したプラグインが欲しい」という声が上がっていますが、2年ほど放置されているので望みは薄いかもしれません。",[15,2599,2600],{},[704,2601,2604],{"href":2602,"rel":2603},"https:\u002F\u002Fgithub.com\u002Fgridsome\u002Fgridsome\u002Fissues\u002F376",[708],"Feature request: AMP Plugin\u002Fexample",[15,2606,2607],{},"数年前と違ってAMPに対応するメリットも少なくなってきているので、無理にAMPに対応しなくても良いという声もあります。",{"title":25,"searchDepth":26,"depth":26,"links":2609},[2610],{"id":2583,"depth":26,"text":2584},"2021-04-28T02:00:00.000Z",{},"\u002F20210428000000-gridsomeamp",{"title":2578,"description":2578},"501d9f625fc947a7fc7b4f5a6e490972","20210428000000-GridsomeでAMPに対応したページを出力できますか？",[37],"SwiM4gCe9qMVs-X9z9gvZLHmLnxypv2jFk5pDs3uzZ0",{"id":2620,"title":2621,"author":2066,"body":2622,"category":2095,"date":2611,"description":2621,"extension":31,"locale":32,"meta":2651,"navigation":34,"path":2652,"seo":2653,"slug":2654,"stem":2655,"tag":2656,"updated":2611,"__hash__":2657},"legacyQuestions\u002F20210428000000-Hackintoshで内蔵Bluetoothをオフにするには？.md","Hackintoshで内蔵Bluetoothをオフにするには？",{"type":7,"value":2623,"toc":2648},[2624,2628,2631,2642,2645],[10,2625,2627],{"id":2626},"biosuefiでオフにするのが確実です","BIOS\u002FUEFIでオフにするのが確実です。",[15,2629,2630],{},"Hackintoshで内蔵Bluetoothをオフにする方法はいくつかあります。",[53,2632,2633,2636,2639],{},[56,2634,2635],{},"AppleのBluetooth Explorerで切り替える（他のBluetoothを使う）",[56,2637,2638],{},"ブートローダーでロードしないようにする",[56,2640,2641],{},"BIOS\u002FUEFIでオフにする",[15,2643,2644],{},"一番確実で簡単なのはBIOS\u002FUEFIでマザーボードのBluetoothチップをオフにしてしまう方法です。マザーボードでオフになれば、OS側も内蔵Bluetoothがオフになったものと見做して、USBドングルなどを優先させます。",[15,2646,2647],{},"デスクトップPC向けのマザーボードの場合は、Bluetoothのオンオフ設定があることが多いですが、ノートPCなどではBIOS\u002FUEFIでBluetoothのオンオフが出来ないこともあります。その際は、AppleのBluetooth ExplorerでUSBドングルに切り替えるか、ブートローダーで内蔵Bluetoothをロードしないようにする必要があります。",{"title":25,"searchDepth":26,"depth":26,"links":2649},[2650],{"id":2626,"depth":26,"text":2627},{},"\u002F20210428000000-hackintoshbluetooth",{"title":2621,"description":2621},"27be09ea74bb2d25a25db5716a82dff6","20210428000000-Hackintoshで内蔵Bluetoothをオフにするには？",[2102],"zbJYUzWrYT8CBtZ8au7S7RgnCgAnbqanxa--tHLGHj0",{"id":2659,"title":2660,"author":43,"body":2661,"category":130,"date":2699,"description":2621,"extension":31,"locale":32,"meta":2700,"navigation":34,"path":2701,"seo":2702,"slug":2703,"stem":2704,"tag":2705,"updated":2699,"__hash__":2707},"legacyQuestions\u002F20210518000000-VercelでNodejsサーバーを使うには？.md","VercelでNodejsサーバーを使うには？",{"type":7,"value":2662,"toc":2696},[2663,2667,2670,2676,2679,2682,2685,2693],[10,2664,2666],{"id":2665},"node-serverを指定すればok","node-serverを指定すればOK",[15,2668,2669],{},"Vercelのプロジェクト管理をするvercel.json「@now\u002Fnode-server」を指定すると、node.jsサーバーが使えます。",[76,2671,2674],{"className":2672,"code":2673,"language":81},[79],"\u002F\u002F vercel.json\n{\n \"version\":2,\n \"name\":\"vercel-nodejs-server\",\n \"builds\":[\n {\n \"src\":\"index.js\",\n \"use\":\"@now\u002Fnode-server\"\n }\n ],\n \"routes\":[\n { \n \"src\":\"\u002F.*\",\n \"dest\":\"\u002Findex.js\"\n }\n ]\n}\n\n",[83,2675,2673],{"__ignoreMap":25},[15,2677,2678],{},"旧now時代はnode.jsサーバーに関する記載がありましたが、現在ではnode.jsではなく、JavascriptサーバーレスFunctionがメインの機能になっているため、node.jsサーバーはドキュメントにも記載がありませんが、一応使えます。",[15,2680,2681],{},"おそらく、now時代からのプロジェクトをそのまま稼働させるための暫定措置ではないでしょうか。",[15,2683,2684],{},"デメリットもあって、",[53,2686,2687,2690],{},[56,2688,2689],{},"node.jsのバージョンがv12と古い",[56,2691,2692],{},"いつサポート対象外になるかわからない",[15,2694,2695],{},"という点は事前に理解しておくべきでしょう。",{"title":25,"searchDepth":26,"depth":26,"links":2697},[2698],{"id":2665,"depth":26,"text":2666},"2021-05-18T01:00:00.000Z",{},"\u002F20210518000000-vercelnodejs",{"title":2660,"description":2621},"a1707099e97db97fce6190d2adeda0da","20210518000000-VercelでNodejsサーバーを使うには？",[2706],"vercel","kjZTyoH_J1xOKZsvPdmp3b_ZL_n-bWHXfG48do_7mgg",{"id":2709,"title":2710,"author":43,"body":2711,"category":130,"date":2699,"description":2621,"extension":31,"locale":32,"meta":2751,"navigation":34,"path":2752,"seo":2753,"slug":2754,"stem":2755,"tag":2756,"updated":2699,"__hash__":2757},"legacyQuestions\u002F20210519000000-Vercelで環境設定を設定して使う方法は？.md","Vercelで環境設定を設定して使う方法は？",{"type":7,"value":2712,"toc":2748},[2713,2717,2720,2723,2726,2729,2735,2738,2741],[10,2714,2716],{"id":2715},"vercelの管理画面から設定ができます","Vercelの管理画面から設定ができます。",[15,2718,2719],{},"プロジェクトページから、",[15,2721,2722],{},"Settings > Environment Variables",[15,2724,2725],{},"と辿っていくと、環境変数を設定できます。おそらく、セキュリティ的な観点からVercelでは環境変数は管理画面からの設定のみになっているようです。",[15,2727,2728],{},"なお、設定した環境変数は、",[76,2730,2733],{"className":2731,"code":2732,"language":81},[79],"vercel env pull\n",[83,2734,2732],{"__ignoreMap":25},[15,2736,2737],{},"で、.envファイルでローカルにダウンロードできます。",[15,2739,2740],{},"この時、.gitignoreで.envファイルをGitの管理対象外にしておくのが重要です。",[15,2742,2203,2743],{},[704,2744,2747],{"href":2745,"rel":2746},"https:\u002F\u002Fvercel.com\u002Fdocs\u002Fenvironment-variables",[708],"Environment Variables | Vercel",{"title":25,"searchDepth":26,"depth":26,"links":2749},[2750],{"id":2715,"depth":26,"text":2716},{},"\u002F20210519000000-vercel",{"title":2710,"description":2621},"31151aadca44a6d85f087f3048a76322","20210519000000-Vercelで環境設定を設定して使う方法は？",[2706],"5cjH3frJ3zpErYoZajgtw9tNG7ZvV-RXrKi3MtRNIEM",{"id":2759,"title":2760,"author":43,"body":2761,"category":130,"date":2793,"description":2760,"extension":31,"locale":32,"meta":2794,"navigation":34,"path":2795,"seo":2796,"slug":2797,"stem":2798,"tag":2799,"updated":2793,"__hash__":2800},"legacyQuestions\u002F20210527000000-GrdisomeビルドがJavaScript-heap-out-of-memoryエラーになる.md","GrdisomeビルドがJavaScript heap out of memoryエラーになる",{"type":7,"value":2762,"toc":2790},[2763,2766,2769,2772,2775,2778,2784,2787],[10,2764,2765],{"id":2765},"メモリー不足が原因なのでメモリ上限を指定します",[15,2767,2768],{},"「JavaScript heap out of memory」は、JavaScriptのプログラムを実行するためのメモリが足りないことが原因で起こるエラーです。",[15,2770,2771],{},"数10ページ程度のGridsomeプロジェクトではあまり起こりませんが、規模の大きいプロジェクトだとビルド時に大容量のメモリを必要とするので、メモリ容量が少ないVPSなどでGridsomeビルドを実行すると遭遇します。",[15,2773,2774],{},"解決策は、ビルド時にJavaScriptが使用するメモリ上限を指定します。VPSなどのSWAP領域がデフォルトでない環境なら、SWAPを指定した方が安心です。",[15,2776,2777],{},"準備ができたら、いつものGridsomeビルドコマンドの最初に「NODE_OPTIONS=\"--max-old-space-size=xxxx\"」をつけて実行します。xxxxの部分はメモリの容量（MB単位）です。",[76,2779,2782],{"className":2780,"code":2781,"language":81},[79],"NODE_OPTIONS=\"--max-old-space-size=1024\" gridsome build\n",[83,2783,2781],{"__ignoreMap":25},[15,2785,2786],{},"この場合は1GBに制限していますが、実行環境に合わせて数字を調整します。",[15,2788,2789],{},"問題なくビルドが通る数値をテストしつつ調整していけばOKです。",{"title":25,"searchDepth":26,"depth":26,"links":2791},[2792],{"id":2765,"depth":26,"text":2765},"2021-05-27T01:00:00.000Z",{},"\u002F20210527000000-grdisomejavascript-heap-out-of-memory",{"title":2760,"description":2760},"1fd7356658a4bf5dc5d21aeea76ef541","20210527000000-GrdisomeビルドがJavaScript-heap-out-of-memoryエラーになる",[37],"Pead408Z5oW9Hch7sSufZZO5eT5wWNuyFbrlYYDqSqE",{"id":2802,"title":2803,"author":43,"body":2804,"category":130,"date":2829,"description":2803,"extension":31,"locale":32,"meta":2830,"navigation":34,"path":2831,"seo":2832,"slug":2833,"stem":2834,"tag":2835,"updated":2829,"__hash__":2836},"legacyQuestions\u002F20210714000000-Grdisomeで関数型コンポーネントでi18n.md","VueやGrdisomeで関数型コンポーネントでi18nを呼びたい",{"type":7,"value":2805,"toc":2826},[2806,2810,2813,2819],[10,2807,2809],{"id":2808},"parentで呼べば使えます","parentで呼べば使えます。",[15,2811,2812],{},"関数型コンポーネントで、そのままVue-i18nを呼び出すとエラーになってしまいますが、parentで呼び出せば、関数型コンポーネントでもi18nが使えます。",[76,2814,2817],{"className":2815,"code":2816,"language":81},[79],"\u003Ctemplate functional>\n \u003Cdiv>\n {{ parent.$t('home') }}\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[83,2818,2816],{"__ignoreMap":25},[15,2820,2821],{},[704,2822,2825],{"href":2823,"rel":2824},"https:\u002F\u002Fgithub.com\u002Fkazupon\u002Fvue-i18n\u002Fpull\u002F370\u002Ffiles\u002F03b2c8f9f55753e4dd84d12db629bc953cc975b8",[708],":pencil: (docs) add functional component note",{"title":25,"searchDepth":26,"depth":26,"links":2827},[2828],{"id":2808,"depth":26,"text":2809},"2021-07-14T01:00:00.000Z",{},"\u002F20210714000000-grdisomei18n",{"title":2803,"description":2803},"79063a0d2e05b72657239f01d28ed141","20210714000000-Grdisomeで関数型コンポーネントでi18n",[37],"VH_Tm7scoiXFU2zyK9H8hKmtJeQ-BSHxIp98pN40vOI",{"id":2838,"title":2839,"author":43,"body":2840,"category":130,"date":2864,"description":2839,"extension":31,"locale":32,"meta":2865,"navigation":34,"path":2866,"seo":2867,"slug":2868,"stem":2869,"tag":2870,"updated":2864,"__hash__":2872},"legacyQuestions\u002F20210825000000-Cockpit CMSの設定はどこですれば良いですか？.md","Cockpit CMSの設定はどこですれば良いですか？",{"type":7,"value":2841,"toc":2861},[2842,2846,2849,2855,2858],[10,2843,2845],{"id":2844},"configファイルをアップロードします","configファイルをアップロードします。",[15,2847,2848],{},"Cockpitの設定は、config.phpで行います。admin権限を持っているユーザーなら、管理画面からも編集が可能です。",[76,2850,2853],{"className":2851,"code":2852,"language":81},[79],"\u003C?php\n\nreturn [\n\n # cockpitのアプリ名\n 'app.name' => 'My Project X',\n\n # cockpitのセッション名\n 'session.name' => 'mysession',\n\n # カスタムシークレットキー\n 'sec-key' => 'xxxxx-SiteSecKeyPleaseChangeMe-xxxxx',\n\n # サイトurl (オプション)\n 'site_url' => 'https:\u002F\u002Fmydomain.com',\n\n # 言語設定\n 'languages' => [\n \u002F\u002F'default' => 'English', #デフォルト言語\n 'fr' => 'French',\n 'de' => 'German'\n ],\n\n # ユーザーグループを設定\n 'groups' => [\n 'author' => [\n '$admin' => false,\n '$vars' => [\n 'finder.path' => '\u002Fstorage\u002Fupload'\n ],\n 'cockpit' => [\n 'backend' => true,\n 'finder' => true\n ],\n 'collections' => [\n 'manage' => true\n ]\n ]\n ],\n\n # DBにMongo DBを使う際の設定\n 'database' => [ \n 'server' => 'mongodb:\u002F\u002Flocalhost:27017',\n 'options' => [\n 'db' => 'cockpitdb'\n ]\n ],\n\n # SMTPメールサーバーの設定\n 'mailer' => [\n 'from' => 'info@mydomain.tld',\n 'transport' => 'smtp'\n 'host' => 'smtp.myhost.tld',\n 'user' => 'username'\n 'password' => 'xxpasswordxx',\n 'port' => 25,\n 'auth' => true,\n 'encryption' => '' # '', 'ssl' or 'tls'\n ]\n\n # Access-Control (CORS) の設定.\n # （下記のパラメータは初期設定なので、コピペする必要はない）\n 'cors' => [\n 'allowedHeaders' => 'X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding, Cockpit-Token',\n 'allowedMethods' => 'PUT, POST, GET, OPTIONS, DELETE',\n 'allowedOrigins' => '*',\n 'maxAge' => '1000',\n 'allowCredentials' => 'true',\n 'exposedHeaders' => 'true',\n ],\n];\n",[83,2854,2852],{"__ignoreMap":25},[15,2856,2857],{},"設置する場所は、「\u002Fconfig\u002Fconfig.php」で、configディレクトリは初期状態ではないので、自分でディレクトリを作成してそこにconfig.phpをアップロードします。",[15,2859,2860],{},"なお、言語設定は、他言語設定ファイルをアップロードしていないと有効になりません。",{"title":25,"searchDepth":26,"depth":26,"links":2862},[2863],{"id":2844,"depth":26,"text":2845},"2021-08-25T01:00:00.000Z",{},"\u002F20210825000000-cockpit-cms",{"title":2839,"description":2839},"f570fe5db143d4dddfc0549c86d3a7db","20210825000000-Cockpit CMSの設定はどこですれば良いですか？",[2871],"cockpit-cms","ur8rd2UnkDYXrnxHLsHhSllSy3I4za0vXAHyWi85lIo",{"id":2874,"title":2875,"author":43,"body":2876,"category":130,"date":2864,"description":2875,"extension":31,"locale":32,"meta":2910,"navigation":34,"path":2911,"seo":2912,"slug":2913,"stem":2914,"tag":2915,"updated":2864,"__hash__":2916},"legacyQuestions\u002F20210825010000-Cockpit CMSは日本語化出来ますか？.md","Cockpit CMSは日本語化出来ますか？",{"type":7,"value":2877,"toc":2907},[2878,2882,2885,2892,2895,2898,2904],[10,2879,2881],{"id":2880},"他言語ファイルをアップロードすれば可能です","他言語ファイルをアップロードすれば可能です。",[15,2883,2884],{},"Cockpitは各種言語に翻訳された、i18nファイルが公式で用意されていて、公式に日本語に対応しています。",[15,2886,2887],{},[704,2888,2891],{"href":2889,"rel":2890},"https:\u002F\u002Fgithub.com\u002Fagentejo\u002Fcockpit-i18n",[708],"cockpit-i18n",[15,2893,2894],{},"このレポジトリの中のPHPファイルを、「\u002Fconfig\u002Fcockpit\u002Fi18n」の中にアップロードします。日本語化だけが目的なら「ja.php」だけあればOKです。ディレクトリは初期では存在しないので、作成します。",[15,2896,2897],{},"この状態だと、「ユーザーごとに日本語表示も可能」という形になります。Cockpitの全体として、デフォルトの言語を日本語化したいのであれば、設定ファイル「config.php」に言語の設定を書きます。",[76,2899,2902],{"className":2900,"code":2901,"language":81},[79],"## \u002Fconfig\u002Fconfig.php\n\u003C?php\n\nreturn [\n # 言語設定\n 'languages' => [\n 'default' => 'Japanese'\n ],\n\n];\n",[83,2903,2901],{"__ignoreMap":25},[15,2905,2906],{},"翻訳がおかしいところもなく、普通に日本語化できるので便利です。",{"title":25,"searchDepth":26,"depth":26,"links":2908},[2909],{"id":2880,"depth":26,"text":2881},{},"\u002F20210825010000-cockpit-cms",{"title":2875,"description":2875},"04dfbe89bc895cd12180e6f4e0a1ba80","20210825010000-Cockpit CMSは日本語化出来ますか？",[2871],"7SsB2dO_hGDYpLGfHAaFAUmtLmIjP8SxLBnMwx9przc",{"id":2918,"title":2919,"author":43,"body":2920,"category":130,"date":2958,"description":2919,"extension":31,"locale":32,"meta":2959,"navigation":34,"path":2960,"seo":2961,"slug":2962,"stem":2963,"tag":2964,"updated":2958,"__hash__":2965},"legacyQuestions\u002F20210825020000-Cockpit CMSのロゴは変更できますか？.md","Cockpit CMSのロゴは変更できますか？",{"type":7,"value":2921,"toc":2955},[2922,2926,2929,2932,2938,2940,2943,2946,2952],[10,2923,2925],{"id":2924},"cssで上書きするか設定ファイルで指定すれば可能です","CSSで上書きするか、設定ファイルで指定すれば可能です。",[15,2927,2928],{},"Cockpitの表示ロゴは、CSSの背景画像として指定されているので、CSSでそのクラスを上書きしてしまえば違う画像がロゴに使えます。",[15,2930,2931],{},"ロゴで使われているクラスは、",[76,2933,2936],{"className":2934,"code":2935,"language":81},[79],".login-image\n.app-logo\n",[83,2937,2935],{"__ignoreMap":25},[15,2939,1675],{},[15,2941,2942],{},"cssファイルは、「\u002Fconfig\u002Fcockpit\u002Fstyle.css」に入れればOKです。",[15,2944,2945],{},"もしくは、bootstrap.phpを用意して、内部的にロゴファイルを上書きするという方法もあります。",[76,2947,2950],{"className":2948,"code":2949,"language":81},[79],"## \u002Fconfig\u002Fbootstrap.php\n\nif (COCKPIT_ADMIN && !COCKPIT_API_REQUEST) {\n \u002F\u002F url to your favicon or a path shortcut, e. g.: `#uploads:...`\n $app->helper('admin')->favicon = '#uploads:2020\u002F02\u002F08\u002F5e3e7c80a4923favicon.png';\n}\n",[83,2951,2949],{"__ignoreMap":25},[15,2953,2954],{},"どちらでも上書きするという意味では同じですので、慣れている方を使えば良いかと思いますが、CSSだと将来的にCockpitがアップデートされた時にクラスが変わる可能性が0ではないので、bootstrapを使った方が安全かもしれません。",{"title":25,"searchDepth":26,"depth":26,"links":2956},[2957],{"id":2924,"depth":26,"text":2925},"2021-08-25T02:00:00.000Z",{},"\u002F20210825020000-cockpit-cms",{"title":2919,"description":2919},"5192f5d49db63fb1a624ca22a74d0c56","20210825020000-Cockpit CMSのロゴは変更できますか？",[2871],"IEauzh27l8vfTGqf59Rrc7Durd_dZcQ5fIj-ankvgtg",{"id":2967,"title":2968,"author":43,"body":2969,"category":130,"date":3031,"description":2968,"extension":31,"locale":32,"meta":3032,"navigation":34,"path":3033,"seo":3034,"slug":3035,"stem":3036,"tag":3037,"updated":3031,"__hash__":3038},"legacyQuestions\u002F20210826010000-Cockpit CMSはどんなサーバーで動きますか？.md","Cockpit CMSはどんなサーバーで動きますか？",{"type":7,"value":2970,"toc":3027},[2971,2975,2978,2989,2992,2995,2998,3002,3005,3008,3015,3018,3024],[10,2972,2974],{"id":2973},"phpサーバーで動きます","PHPサーバーで動きます",[15,2976,2977],{},"公式ドキュメントによると、Cockpitが動作するサーバーの要件は下記のようになっています。",[53,2979,2980,2983,2986],{},[56,2981,2982],{},"PHP 5.4+",[56,2984,2985],{},"SQLite",[56,2987,2988],{},"Apache or Nginx",[15,2990,2991],{},"現在PHPが動くサーバーで、PHP 5.4を動かしているサーバーはほぼないでしょうし、どんなWebサーバーにもApacheかNginxは入っていますし、Litespeedでも問題なく動作するそうです。",[15,2993,2994],{},"SQLiteについては、サーバーによってはモジュールがオフになっているケースがあるかもしれないので、SQLiteだけは事前に確認した方が良さそうです。",[15,2996,2997],{},"国内のレンタルサーバーは、基本的にPHP7以上が動作している（むしろPHP 5.4はサポート外がほとんど）ので問題ないでしょうし、VPSやクラウドなら自分でPHPやSQLiteなどの環境を構築できれば使えます。",[10,2999,3001],{"id":3000},"cockpit-cmsをサーバーレスで使う場合","Cockpit CMSをサーバーレスで使う場合",[15,3003,3004],{},"サーバーレスについては、PHPに対応したサーバーレスサービスでも、SQLiteが動かないことが多いので、その場合は外部のMongo DBサーバーを用意する必要があります。",[15,3006,3007],{},"Mongo DBは公式が「MongoDB Atlas」という無料のクラウドMongo DBサーバーを提供しているので、サーバーレスで構築したいなら、そちらを使っても良いでしょう。",[15,3009,3010],{},[704,3011,3014],{"href":3012,"rel":3013},"https:\u002F\u002Fwww.mongodb.com\u002Fja-jp\u002Fcloud\u002Fatlas",[708],"MongoDB Atlas",[15,3016,3017],{},"Cockpit CMSでMongo DBを使う場合は、設定ファイルにDB情報を書けばOKです。",[76,3019,3022],{"className":3020,"code":3021,"language":81},[79],"## \u002Fconfig\u002Fconfig.php\n\n\u003C?php\n\nreturn [\n # DBにMongo DBを使う際の設定\n 'database' => [ \n 'server' => 'mongodb:\u002F\u002Flocalhost:27017',\n 'options' => [\n 'db' => 'cockpitdb'\n ]\n ]\n] \n",[83,3023,3021],{"__ignoreMap":25},[15,3025,3026],{},"ただし、CockpitのDBでMongoDBを使う場合は、サーバーレスのPHPが「ext-mongodb」というエクステンションに対応している必要があるため、サーバーレスでは使えないケースもありそうです。",{"title":25,"searchDepth":26,"depth":26,"links":3028},[3029,3030],{"id":2973,"depth":26,"text":2974},{"id":3000,"depth":26,"text":3001},"2021-08-26T01:00:00.000Z",{},"\u002F20210826010000-cockpit-cms",{"title":2968,"description":2968},"67b368074aba42b95fc88e3751f41bf6","20210826010000-Cockpit CMSはどんなサーバーで動きますか？",[2871],"hGWYLgWSW2ZG-mEy6st7yYmVBoys8Wp1m4cE4MuBjJs",{"id":3040,"title":3041,"author":43,"body":3042,"category":130,"date":3074,"description":3041,"extension":31,"locale":32,"meta":3075,"navigation":34,"path":3076,"seo":3077,"slug":3078,"stem":3079,"tag":3080,"updated":3074,"__hash__":3081},"legacyQuestions\u002F20210827010000-Cockpit CMSの初期管理アカウントのID・パスワードがわかりません.md","Cockpit CMSの初期管理アカウントのID・パスワードがわかりません",{"type":7,"value":3043,"toc":3071},[3044,3048,3051,3059,3062,3065],[10,3045,3047],{"id":3046},"インストール段階では自動でidパスワードが生成されます","インストール段階では自動でID・パスワードが生成されます",[15,3049,3050],{},"CMSなどだと初期インストール段階で、管理者のID・パスワードを設定しますが、Cockpit CMSの場合はインストールすると下記のID・パスワードが自動で生成されます。",[1334,3052,3053,3056],{},[56,3054,3055],{},"ID: admin",[56,3057,3058],{},"パスワード：admin",[15,3060,3061],{},"このままだとセキュリティ的に危ないので、一旦ログインしてID・パスワードを変更するか、管理者ユーザーを作成して、adminを削除しましょう。",[15,3063,3064],{},"cockpitのinstall.phpを確認すると、adminは決め打ちでDBに挿入されるようになっているので、回避方法はないかと思います。",[76,3066,3069],{"className":3067,"code":3068,"language":81},[79],"$account = [\n 'user' => 'admin',\n 'name' => 'Admin',\n 'email' => 'admin@yourdomain.de',\n 'active' => true,\n 'group' => 'admin',\n 'password' => $app->hash('admin'),\n 'i18n' => $app->helper('i18n')->locale,\n '_created' => $created,\n '_modified'=> $created,\n];\n\n$app->storage->insert(\"cockpit\u002Faccounts\", $account);\n",[83,3070,3068],{"__ignoreMap":25},{"title":25,"searchDepth":26,"depth":26,"links":3072},[3073],{"id":3046,"depth":26,"text":3047},"2021-08-27T01:00:00.000Z",{},"\u002F20210827010000-cockpit-cmsid",{"title":3041,"description":3041},"52a3b9dabf875e1a2237617fb65bb1b4","20210827010000-Cockpit CMSの初期管理アカウントのID・パスワードがわかりません",[2871],"DKbGceCXxf5KwH8Ec6IyvOMlnge79r3aTqHifZIvBMg",{"id":3083,"title":3084,"author":43,"body":3085,"category":130,"date":3180,"description":3084,"extension":31,"locale":32,"meta":3181,"navigation":34,"path":3182,"seo":3183,"slug":3184,"stem":3185,"tag":3186,"updated":3180,"__hash__":3187},"legacyQuestions\u002F20210827010000-Cockpit CMSの権限管理はどうやって設定する？.md","Cockpit CMSの権限管理はどうやって設定する？",{"type":7,"value":3086,"toc":3173},[3087,3091,3094,3097,3100,3108,3111,3114,3117,3121,3124,3127,3130,3136,3139,3145,3147,3150,3153,3156,3159,3167,3170],[10,3088,3090],{"id":3089},"cockpit-cmsの権限管理は大きく分けて二つ","Cockpit CMSの権限管理は大きく分けて二つ",[204,3092,3093],{"id":3093},"コレクション単位の管理",[15,3095,3096],{},"コレクションには、それぞれの権限管理が設定できます。",[15,3098,3099],{},"設定画面では下記のような文言です。",[53,3101,3102,3105],{},[56,3103,3104],{},"公開中：トークンなしで操作が可能",[56,3106,3107],{},"AUTHOR：作成者のトークンなら操作が可能",[15,3109,3110],{},"初期段階ではコレクションは非公開になっています。ですので、APIトークンがあっても、中身は見れません。",[15,3112,3113],{},"同時に注意したいのは、公開中のステータスにするとAPIトークンなしでもAPIコールが可能になる点です。",[15,3115,3116],{},"編集や削除などを公開中にすると、コレクションの内容を権限を与えていない人間がAPIコールして削除したり編集したりできてしまいます。",[10,3118,3120],{"id":3119},"apiトークン単位の管理","APIトークン単位の管理",[15,3122,3123],{},"アカウント・コレクションごとに与える権限を管理したいのであれば、APIトークンの設定で使えるAPIのルールを指定します。",[15,3125,3126],{},"設定方法は「設定 > APIアクセス」ページの中の「カスタムキー」の「ルール」で、使えるようにするAPIを指定します。",[15,3128,3129],{},"例えば、「test」というコレクションの取得のみを付与するのであれば、",[76,3131,3134],{"className":3132,"code":3133,"language":81},[79],"\u002Fapi\u002Fcollections\u002Fget\u002Ftest2\n",[83,3135,3133],{"__ignoreMap":25},[15,3137,3138],{},"コレクション全体の取得を付与するのであれば、",[76,3140,3143],{"className":3141,"code":3142,"language":81},[79],"\u002Fapi\u002Fcollections\u002Fget\n",[83,3144,3142],{"__ignoreMap":25},[15,3146,1500],{},[15,3148,3149],{},"なお、APIトークンの権限付与は、コレクションごとの権限設定よりも優先されるため、完全非公開のコレクションにもアクセスが可能になります。",[10,3151,3152],{"id":3152},"実際の権限管理は二つを組み合わせる",[15,3154,3155],{},"Cockpit CMSの使用方法的には、フロントエンドのためのデータソースとして使うケースがほとんどなので、ビルド時に使うのは取得だけでしょう。",[15,3157,3158],{},"ですので、",[53,3160,3161,3164],{},[56,3162,3163],{},"コレクションは非公開（初期設定）",[56,3165,3166],{},"APIトークンには「\u002Fapi\u002Fcollections\u002Fget」だけを付与",[15,3168,3169],{},"というのがシンプルでセキュリティが高い設定かと思います。なお、APIトークンはSPAなどで使う際は流出しないように細心の注意が必要です。",[15,3171,3172],{},"もし、SPAのコメントフォームなどで外部ユーザーが自由に書き込みをできるようにするのであれば、「公開中」ステータスにしても良いかもしれませんが、基本的にはAPIトークンで管理した方が良いでしょう。",{"title":25,"searchDepth":26,"depth":26,"links":3174},[3175,3178,3179],{"id":3089,"depth":26,"text":3090,"children":3176},[3177],{"id":3093,"depth":256,"text":3093},{"id":3119,"depth":26,"text":3120},{"id":3152,"depth":26,"text":3152},"2021-08-30T01:00:00.000Z",{},"\u002F20210827010000-cockpit-cms",{"title":3084,"description":3084},"e948e7c76ac3fc6fe94b6a8b44ee593f","20210827010000-Cockpit CMSの権限管理はどうやって設定する？",[2871],"Hr9NZH_JqaZchwFo715Jx7FeW4Y8Y1DO-tdpktcU5pI",{"id":3189,"title":3190,"author":43,"body":3191,"category":130,"date":3218,"description":3190,"extension":31,"locale":32,"meta":3219,"navigation":34,"path":3220,"seo":3221,"slug":3222,"stem":3223,"tag":3224,"updated":3218,"__hash__":3225},"legacyQuestions\u002F20210830010000-Cockpit APIのアクセス結果が「Collection not found」になる.md","Cockpit APIのアクセス結果が「Collection not found」になる",{"type":7,"value":3192,"toc":3215},[3193,3197,3200,3203,3206,3212],[10,3194,3196],{"id":3195},"コレクションが存在しないかapiのurlが間違っています","コレクションが存在しないか、APIのURLが間違っています",[15,3198,3199],{},"Cockpit APIが「Collection not found」を返す時は、コレクションが存在しないか、APIのURLが間違っている場合です。",[15,3201,3202],{},"よくあるのが、ネット上の紹介ページで使われることが多い「\u002Fapi\u002Fcollections\u002Fget\u002Fpage」というAPIをコールするケース。pageはメソッドではなく、「page」というコレクションを指しているので、pageコレクションがないと「Collection not found」になります。",[15,3204,3205],{},"なお、コレクションに対して、コールした権限（取得・削除・作成・編集）がない場合は、",[76,3207,3210],{"className":3208,"code":3209,"language":81},[79],"{\"error\": \"Unauthorized\"}\n",[83,3211,3209],{"__ignoreMap":25},[15,3213,3214],{},"が返ってきます。",{"title":25,"searchDepth":26,"depth":26,"links":3216},[3217],{"id":3195,"depth":26,"text":3196},"2021-08-30T02:00:00.000Z",{},"\u002F20210830010000-cockpit-apicollection-not-found",{"title":3190,"description":3190},"2da52f360ff75a33464d284ecf4f9715","20210830010000-Cockpit APIのアクセス結果が「Collection not found」になる",[2871],"XKHjF1iOpRnUK-vAvCsj-Z8BxB4TFq4QjPwaMuSBO6U",{"id":3227,"title":3228,"author":43,"body":3229,"category":130,"date":3275,"description":3190,"extension":31,"locale":32,"meta":3276,"navigation":34,"path":3277,"seo":3278,"slug":3279,"stem":3280,"tag":3281,"updated":3275,"__hash__":3282},"legacyQuestions\u002F20210901010000-GridsomeでAPIから読み込んだデータにrefをつけるには？.md","GridsomeでUNIX Timestampを変換するには？",{"type":7,"value":3230,"toc":3272},[3231,3234,3237,3244,3247,3254,3257,3263,3266],[10,3232,3228],{"id":3233},"gridsomeでunix-timestampを変換するには",[15,3235,3236],{},"Gridsomeでは、日付のフォーマットにGraphQLのformatが使えますが、変換前のデータソースのフォーマットは「ISO 8601」であることが前提となっています。",[15,3238,3239],{},[704,3240,3243],{"href":3241,"rel":3242},"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FISO_8601",[708],"ISO 8601 | Wikipedia",[15,3245,3246],{},"GraphQLでは、日付形式のデータが入ってくると、自動で日付と推定してscalarを「Date」として挿入してくれますが、UNIX Timestampはただの数字なので、Intで収納されてしまいます。",[15,3248,3249],{},[704,3250,3253],{"href":3251,"rel":3252},"https:\u002F\u002Fgraphql.org\u002Flearn\u002Fschema\u002F",[708],"Schemas and Types | GraphQL.org",[15,3255,3256],{},"ですので、記事の日付データがUNIX TimestampであるならVue.jsのテンプレート内で変換を行ってから表示するか、データソース側をUNIX TimestampからISO 8601フォーマットでGraphQLに収容する、もしくはmineTypeでscalarを指定するするしかありません。",[76,3258,3261],{"className":3259,"code":3260,"language":81},[79],"articles.addNode({\n date: {\n mineType: 'Date',\n content: item._created\n }\n}\n",[83,3262,3260],{"__ignoreMap":25},[15,3264,3265],{},"ヘッドレスCMSなどからデータを引っ張ってきているのであれば、gridsome.server.jsで処理を書くので、そのついでにdayjsなどの日付ライブラリを使ってISO 8601フォーマットにするのが良いでしょう。",[76,3267,3270],{"className":3268,"code":3269,"language":81},[79],"const dayjs = require('dayjs');\n\nmodule.exports = function (api) {\n api.loadSource(async actions => {\n\n \u002F\u002F 何かの処理\n\n \u002F\u002F GraphQLへの挿入、_createdと_modifiedはUNIX Timestamp\n\n for (const item of dataArticles) {\n articles.addNode({\n id: item._id,\n date: dayjs.unix(item._created).toISOString(),\n updated: dayjs.unix(item._modified).toISOString()\n })\n } \n }\n}\n",[83,3271,3269],{"__ignoreMap":25},{"title":25,"searchDepth":26,"depth":26,"links":3273},[3274],{"id":3233,"depth":26,"text":3228},"2021-09-01T02:00:00.000Z",{},"\u002F20210901010000-gridsomeapiref",{"title":3228,"description":3190},"dc5f28776c305748b49f684587cb222b","20210901010000-GridsomeでAPIから読み込んだデータにrefをつけるには？",[37],"D9FssWhmkA7uAY7LdXtxRv0lmcvoHZJeT6MKEe6dJFc",{"id":3284,"title":3285,"author":43,"body":3286,"category":130,"date":3275,"description":3285,"extension":31,"locale":32,"meta":3333,"navigation":34,"path":3334,"seo":3335,"slug":3336,"stem":3337,"tag":3338,"updated":3275,"__hash__":3339},"legacyQuestions\u002F20210901010000-Gridsomeでunix-timestampを変換するには？.md","GridsomeでAPIから読み込んだデータにrefをつけるには？",{"type":7,"value":3287,"toc":3330},[3288,3292,3295,3301,3304,3310,3313,3316,3324,3327],[10,3289,3291],{"id":3290},"collectionにaddreferenceを付与すれば作成されます","CollectionにaddReferenceを付与すれば作成されます",[15,3293,3294],{},"GridsomeにAPIからデータを挿入するときは、",[76,3296,3299],{"className":3297,"code":3298,"language":81},[79],"const articles = actions.addCollection\n",[83,3300,3298],{"__ignoreMap":25},[15,3302,3303],{},"でコレクションを作成しますが、作成した後に、",[76,3305,3308],{"className":3306,"code":3307,"language":81},[79],"articles.addReference('tags', 'Tags')\narticles.addReference('category', 'Categories')\n\n",[83,3309,3307],{"__ignoreMap":25},[15,3311,3312],{},"という形でrefを付与します。これは、「@gridsome\u002Fsource-filesystem」のrefsに相当します。",[15,3314,3315],{},"addReferenceは、",[53,3317,3318,3321],{},[56,3319,3320],{},"第一引数：collection内のキー",[56,3322,3323],{},"第二引数：参照するCollection",[15,3325,3326],{},"を指定します。",[15,3328,3329],{},"refsが作成されているので、GraphQLのfilterやbelongsToで、記事の絞り込みが可能になります。",{"title":25,"searchDepth":26,"depth":26,"links":3331},[3332],{"id":3290,"depth":26,"text":3291},{},"\u002F20210901010000-gridsomeunix-timestamp",{"title":3285,"description":3285},"2d890f4ba879d5292228f8ce40ed8998","20210901010000-Gridsomeでunix-timestampを変換するには？",[37],"-vcuxkBFOZ_M2Q3_ToGtHc7qX-9Jtfnj2vg03-zJneE",{"id":3341,"title":3342,"author":43,"body":3343,"category":130,"date":3388,"description":3342,"extension":31,"locale":32,"meta":3389,"navigation":34,"path":3390,"seo":3391,"slug":3392,"stem":3393,"tag":3394,"updated":3388,"__hash__":3395},"legacyQuestions\u002F20210902010000-Cockpit CMSで他のコレクションとリレーションするには？.md","Cockpit CMSで他のコレクションとリレーションするには？",{"type":7,"value":3344,"toc":3385},[3345,3349,3352,3359,3362,3365,3371,3374,3380,3382],[10,3346,3348],{"id":3347},"collectionlinkを使います","Collectionlinkを使います",[15,3350,3351],{},"Cockpit CMSでは他のコレクション（テーブル）と連携させるのは、フィールドタイプに「Collectionlink」を使います。",[15,3353,3354],{},[704,3355,3358],{"href":3356,"rel":3357},"https:\u002F\u002Fgetcockpit.com\u002Fdocumentation\u002Freference\u002Ffieldtypes",[708],"Fieldtypes",[15,3360,3361],{},"フィールドタイプに「Collectionlink」を使うと、エントリー編集画面で、リンクしたコレクションのデータを一覧から選択できるようになる他、リンクされたコレクションのエントリーからは、「どのエントリーとリンクされているか？」を確認できるようになります。",[15,3363,3364],{},"Collectionlinkを使うには、オプションJSONの項目で、どのコレクションとリンクするかなどを設定する必要があります。",[76,3366,3369],{"className":3367,"code":3368,"language":81},[79],"{\n \"link\": \"makers\", \u002F\u002F リンクするコレクション\n \"display\": \"name\", \u002F\u002F jsonで出力する際にどの項目を表示するか\n \"multiple\": false, \u002F\u002F 複数選択可能にするか？（タグなどを想定）\n \"limit\": false \u002F\u002F 件数を制限するか？\n}\n",[83,3370,3368],{"__ignoreMap":25},[15,3372,3373],{},"リンクができると、そのエントリーの出力JSONに、リンクしたコレクションのデータが入ります。",[76,3375,3378],{"className":3376,"code":3377,"language":81},[79],"{\n \"id\": \"1\",\n \"title\": \"iPhone 12\",\n \"maker_id\": {\n \"_id\": \"6130b4c737393784d10000bd\",\n \"link\": \"makers\",\n \"display\": \"Apple (アップル)\"\n },\n",[83,3379,3377],{"__ignoreMap":25},[15,3381,1500],{},[15,3383,3384],{},"静的サイトジェネレータのように、ジェネレータ側で処理を加える場合には設定しない方が使い勝手が良い可能性もありますが、SPAのようにヘッドレスCMSの内容をそのまま表示する場合には、必須の項目かと思います。",{"title":25,"searchDepth":26,"depth":26,"links":3386},[3387],{"id":3347,"depth":26,"text":3348},"2021-09-02T01:00:00.000Z",{},"\u002F20210902010000-cockpit-cms",{"title":3342,"description":3342},"563d56684f6de273ba93a9667423e801","20210902010000-Cockpit CMSで他のコレクションとリレーションするには？",[2871],"eDhqcZFQugKdsDxe8wUIYyCV2wDYgDG-gtT3SNsHXWY",{"id":3397,"title":3398,"author":43,"body":3399,"category":130,"date":3460,"description":3398,"extension":31,"locale":32,"meta":3461,"navigation":34,"path":3462,"seo":3463,"slug":3464,"stem":3465,"tag":3466,"updated":3460,"__hash__":3467},"legacyQuestions\u002F20210903010000-Cockpit CMSのセキュリティ強化はどうやればいいですか？.md","Cockpit CMSのセキュリティ強化はどうやればいいですか？",{"type":7,"value":3400,"toc":3454},[3401,3405,3408,3415,3418,3422,3425,3428,3431,3434,3441,3444,3451],[10,3402,3404],{"id":3403},"サーバー側で認証を入れるかauth0がベストです","サーバー側で認証を入れるかAuth0がベストです",[15,3406,3407],{},"公式の二段階認証（2FA）アドオンが開発されているのでそれを使うのが良いのですが、まだ公開版になっていないだけでなく、レポジトリの更新が3年も止まっているので、現在開発が止まっているようです。",[15,3409,3410],{},[704,3411,3414],{"href":3412,"rel":3413},"https:\u002F\u002Fgithub.com\u002Fagentejo\u002F2FA",[708],"agentejo \u002F 2FA",[15,3416,3417],{},"実際に最新のCockpit CMS(0.12.1)で使ってみると、アカウントの設定画面がバグってしまうので、実質自分で書き換えて使う形になります。",[204,3419,3421],{"id":3420},"一番簡単なのはサーバー側のbasicdigest認証","一番簡単なのはサーバー側のBasic\u002FDigest認証",[15,3423,3424],{},"そう考えると、簡単でベストなのはサーバー側でBasic認証か、Digest認証を入れるのではないかと思います。",[15,3426,3427],{},"設定も楽ですし、PHPが動くサーバーならほとんどがBasic認証には対応しているので、セキュリティはやや弱くなりますが、誰でも導入できるというメリットがあります。",[204,3429,3430],{"id":3430},"auth0を使う",[15,3432,3433],{},"認証系APIサービスのauth0を使っている方は、有志の方がリリースされたauth0用のアドオンを使うことで、auth0を使った認証を追加できます。",[15,3435,3436],{},[704,3437,3440],{"href":3438,"rel":3439},"https:\u002F\u002Fgithub.com\u002Fjoona\u002FCockpitCMS-Auth0",[708]," joona \u002F CockpitCMS-Auth0 ",[15,3442,3443],{},"auth0は、アクティブユーザー7,000人までは無料で使えるます。Cockpit CMSを使うのが不特定多数ではなく、小規模なプロジェクトなのであれば、auth0の無料プランは有用です。",[15,3445,3446],{},[704,3447,3450],{"href":3448,"rel":3449},"https:\u002F\u002Fauth0.com\u002Fjp\u002Fpricing",[708],"料金体型 | auth0 ",[15,3452,3453],{},"auth0の知識などが必要になるのがデメリットでしょうか。",{"title":25,"searchDepth":26,"depth":26,"links":3455},[3456],{"id":3403,"depth":26,"text":3404,"children":3457},[3458,3459],{"id":3420,"depth":256,"text":3421},{"id":3430,"depth":256,"text":3430},"2021-09-03T01:00:00.000Z",{},"\u002F20210903010000-cockpit-cms",{"title":3398,"description":3398},"bd227318de55e0d3a4a8a81343e185a2","20210903010000-Cockpit CMSのセキュリティ強化はどうやればいいですか？",[2871],"JzPOMIwPrvxiCJ_uEElFk3J_2q-GRTpRWdc9qbSYk8w",{"id":3469,"title":3470,"author":43,"body":3471,"category":130,"date":3521,"description":3470,"extension":31,"locale":32,"meta":3522,"navigation":34,"path":3523,"seo":3524,"slug":3525,"stem":3526,"tag":3527,"updated":3521,"__hash__":3528},"legacyQuestions\u002F20210903020000-Cockpit CMSはサイトごとに作った方がいい？.md","Cockpit CMSはサイトごとに作った方がいい？",{"type":7,"value":3472,"toc":3515},[3473,3477,3480,3484,3487,3490,3493,3496,3499,3502,3505,3512],[10,3474,3476],{"id":3475},"どちらにも対応できます","どちらにも対応できます。",[15,3478,3479],{},"Cockpit CMSはどちらの方法でも対応できるように設定が柔軟になっています。",[204,3481,3483],{"id":3482},"シンプルなのはサイトごとにcockpit-cmsを用意する方法","シンプルなのは、サイトごとにCockpit CMSを用意する方法",[15,3485,3486],{},"この場合は、サブドメインなどで展開することになるので、サイトごとに管理画面が別になります。",[15,3488,3489],{},"サイトごとに別ドメインになるのでわかりやすいですが、切り替える手間があるのと、切り替えてもデザイン自体は同じになるので、間違ってしまう可能性もあります。",[15,3491,3492],{},"サイトごとに用意すると、バックアップやアップデートなども複数になるため管理は手間です。",[204,3494,3495],{"id":3495},"一元管理すると管理が容易",[15,3497,3498],{},"Cockpit CMSは、アカウントやアカウントグループごとにアクセスする権限を管理できるので、複数のサイトを一つのCockpit CMSで管理することもできます。",[15,3500,3501],{},"この場合、一つのCockpit CMSで全てを管理ができるため、バックアップやアップデートが楽なのが最大のメリットです。",[15,3503,3504],{},"ただ、一つにまとめることで管理が容易になるという大きなメリットがある一方で、しっかりとアカウントとコレクションの権限管理を行わないといけないので、Cockpit CMSの構造を理解するための多少PHPの知識と、ドキュメント読み込むための英語力が必要になります。",[15,3506,3507],{},[704,3508,3511],{"href":3509,"rel":3510},"https:\u002F\u002Fzeraton.gitlab.io\u002Fcockpit-docs\u002Fguide\u002Fbasics\u002Facl.html",[708],"Access-Control-List | Cockpit CMS Docs",[15,3513,3514],{},"どちらが良いかは、サイトの運営方針や情報管理ポリシーなどによると思いますが、技術的に問題がないのであれば、一元管理の方が、セキュリティリスクなども下がるのでオススメです。",{"title":25,"searchDepth":26,"depth":26,"links":3516},[3517],{"id":3475,"depth":26,"text":3476,"children":3518},[3519,3520],{"id":3482,"depth":256,"text":3483},{"id":3495,"depth":256,"text":3495},"2021-09-03T02:00:00.000Z",{},"\u002F20210903020000-cockpit-cms",{"title":3470,"description":3470},"beda62cc9805414c539face52c3e5876","20210903020000-Cockpit CMSはサイトごとに作った方がいい？",[2871],"wAgJ0L9OytjE50WzUAonHe5PVpme0EcDlywgFr9EeO0",{"id":3530,"title":3531,"author":43,"body":3532,"category":130,"date":3591,"description":3531,"extension":31,"locale":32,"meta":3592,"navigation":34,"path":3593,"seo":3594,"slug":3595,"stem":3596,"tag":3597,"updated":3591,"__hash__":3598},"legacyQuestions\u002F20210903030000-Cockpit CMSでコレクションのアクセス制限をするには？.md","Cockpit CMSでコレクションのアクセス制限をするには？",{"type":7,"value":3533,"toc":3587},[3534,3538,3546,3549,3552,3555,3572,3575,3578,3581,3584],[10,3535,3537],{"id":3536},"グループを作成してコレクションの権限で設定します","グループを作成して、コレクションの「権限」で設定します。",[15,3539,3540,3541,3545],{},"まず最初に権限管理をするグループを作成します。ここでは仮に「GROUP1」というグループを作ったとします。グループの作成がわからなかったら、",[704,3542,3544],{"href":3543},"\u002Fq\u002Fb846f713dde07fb97eb71ed751bbb8ca\u002F","Cockpit CMSでのグループの作成方法","を確認してみてください。",[15,3547,3548],{},"グループの設定の際に、collectionsへの権限は与えても与えなくても大丈夫です。以降説明するコレクションごとの権限管理の方が上位に来ます。",[15,3550,3551],{},"グループを作成したら、admin権限があるアカウントでコレクションの編集を開いて、「権限」タブを開きます。",[15,3553,3554],{},"すると作成したグループ名が出てくるはずなので、",[53,3556,3557,3560,3563,3566,3569],{},[56,3558,3559],{},"コレクションを編集（コレクションの設定を編集できる）",[56,3561,3562],{},"エントリーを見る（コレクションのエントリーを閲覧できる）",[56,3564,3565],{},"エントリーを編集（コレクションの既存エントリーを編集できる）",[56,3567,3568],{},"エントリーを作成（コレクションに新規エントリーを作成できる）",[56,3570,3571],{},"エントリーを削除（コレクションの既存エントリーを削除できる）",[15,3573,3574],{},"のそれぞれに権限を付与します。項目の意味を参照しつつ、適切な権限を与えればOKです。",[10,3576,3577],{"id":3577},"コレクションのへアクセス権限の与え方のコツ",[15,3579,3580],{},"まず、全体を管理できてしまう「コレクションを編集」は基本的に与えない方が良いでしょう。管理者に近いけど、adminは付与しないユーザーグループにだけ付与するのがベストです。",[15,3582,3583],{},"そうしないと、知識のない人間や悪意のある人間が、コレクションのデータ構造や権限を変更可能になってしまいます。",[15,3585,3586],{},"エントリーについては、基本的には全ての権限を与える前提で問題ないかと思いますが、例えば「閲覧だけしかしない管理部署」だったり、「外注業者・ライター」のグループの場合は、閲覧や編集だけを付与するなどの制限があったほうが安心です。",{"title":25,"searchDepth":26,"depth":26,"links":3588},[3589,3590],{"id":3536,"depth":26,"text":3537},{"id":3577,"depth":26,"text":3577},"2021-09-03T03:00:00.000Z",{},"\u002F20210903030000-cockpit-cms",{"title":3531,"description":3531},"e873ec5e255b8ba998100432e91e647f","20210903030000-Cockpit CMSでコレクションのアクセス制限をするには？",[2871],"1hZFEpK9YCUIfsRDNMxQYhSz5ZiFN-wgZHZM46Z-G-Y",{"id":3600,"title":3601,"author":43,"body":3602,"category":130,"date":3638,"description":3601,"extension":31,"locale":32,"meta":3639,"navigation":34,"path":3640,"seo":3641,"slug":3642,"stem":3643,"tag":3644,"updated":3638,"__hash__":3645},"legacyQuestions\u002F20210903040000-Cockpit CMSでユーザーグループを作成する方法は？.md","Cockpit CMSでユーザーグループを作成する方法は？",{"type":7,"value":3603,"toc":3635},[3604,3608,3611,3614,3620,3623,3626,3632],[10,3605,3607],{"id":3606},"configphpで設定します","config.phpで設定します。",[15,3609,3610],{},"Cockpit CMSでは、config.phpに記載することで、複数のグループを設定ができます。",[15,3612,3613],{},"設定の記載方法は、",[76,3615,3618],{"className":3616,"code":3617,"language":81},[79],"\u003C?php\n\nreturn [\n # ここからグループ設定\n\n # define additional groups\n 'groups' => [\n 'group1' => [\n '$admin' => false, \u002F\u002F 管理者権限を付与するか？\n '$vars' => [\n 'finder.path' => '.\u002Fstorage\u002Fupload' \u002F\u002Fパスの設定など\n ],\n 'cockpit' => [ \u002F\u002F APIなどのCockpit全体へのアクセス制限\n 'backend' => true,\n 'finder' => true\n ],\n 'collections' => [ \u002F\u002F コレクションの管理権限\n 'manage' => false,\n ] \n ]\n ],\n\n # ここまで\n",[83,3619,3617],{"__ignoreMap":25},[15,3621,3622],{},"となっています。",[15,3624,3625],{},"フォーマット的には、",[76,3627,3630],{"className":3628,"code":3629,"language":81},[79],"groups:\n GROUP_NAME:\n RESOURCE_NAME:\n ACTION_NAME:\n BOOLEAN\n",[83,3631,3629],{"__ignoreMap":25},[15,3633,3634],{},"という階層構造になっているので、適当なRESOURCE_NAMEとACTION_NAMEが分かれば簡単です。",{"title":25,"searchDepth":26,"depth":26,"links":3636},[3637],{"id":3606,"depth":26,"text":3607},"2021-09-03T05:00:00.000Z",{},"\u002F20210903040000-cockpit-cms",{"title":3601,"description":3601},"b846f713dde07fb97eb71ed751bbb8ca","20210903040000-Cockpit CMSでユーザーグループを作成する方法は？",[2871],"R_p2SymlKiuezQqmcne22olCnoD-TuN0_ywE4uDDfmQ",{"id":3647,"title":3648,"author":43,"body":3649,"category":130,"date":3701,"description":3648,"extension":31,"locale":32,"meta":3702,"navigation":34,"path":3703,"seo":3704,"slug":3705,"stem":3706,"tag":3707,"updated":3701,"__hash__":3708},"legacyQuestions\u002F20210903050000-Cockpit CMSでアカウントにコレクションが表示されない.md","Cockpit CMSでアカウントにコレクションが表示されない",{"type":7,"value":3650,"toc":3697},[3651,3654,3657,3660,3666,3669,3672,3675,3678,3688,3691],[10,3652,3653],{"id":3653},"コレクションへの権限がない可能性があります",[15,3655,3656],{},"Cockpit CMSでは、ユーザーがコレクションとコレクション内のエントリーを操作するためには権限を必要としています。（admin権限ユーザーは除外）",[15,3658,3659],{},"例えば、自分がadminユーザーでないのであれば、権限的にはグループユーザーになりますが、Cockpit CMSの公式ドキュメントの通りにグループを設定すると、",[76,3661,3664],{"className":3662,"code":3663,"language":81},[79],"'groups' => [\n 'group1' => [\n '$admin' => false, \u002F\u002F 管理者権限を付与するか？\n '$vars' => [\n 'finder.path' => '.\u002Fstorage\u002Fupload' \u002F\u002Fパスの設定など\n ],\n 'cockpit' => [ \u002F\u002F APIなどのCockpit全体へのアクセス制限\n 'backend' => true,\n 'finder' => true\n ],\n 'collections' => [ \u002F\u002F コレクションの管理権限\n 'manage' => false,\n ] \n ]\n],\n",[83,3665,3663],{"__ignoreMap":25},[15,3667,3668],{},"となります。この場合「自信が作成した\u002F一般公開されている」コレクションメニューの「編集」というボタンが押せる権限しかないため、コレクションの作成も閲覧もできないわけです。",[10,3670,3671],{"id":3671},"コレクションを一覧に表示させる方法",[15,3673,3674],{},"一方で、特定のコレクションのエントリー作成・編集などの権限があれば、自分のアカウントのコレクション一覧に表示されるようになります。",[15,3676,3677],{},"所属しているグループが、対象コレクションの権限設定で、",[53,3679,3680,3682,3684,3686],{},[56,3681,3562],{},[56,3683,3565],{},[56,3685,3568],{},[56,3687,3571],{},[15,3689,3690],{},"のどれかにアクセス権限があれば（オンにしてあれば）、自分のコレクション一覧に表示されるようになります。",[15,3692,3693],{},[704,3694,3696],{"href":3695},"\u002Fq\u002Fe873ec5e255b8ba998100432e91e647f\u002F","Cockpit CMSでコレクションのアクセス制限をするには？ ",{"title":25,"searchDepth":26,"depth":26,"links":3698},[3699,3700],{"id":3653,"depth":26,"text":3653},{"id":3671,"depth":26,"text":3671},"2021-09-03T06:00:00.000Z",{},"\u002F20210903050000-cockpit-cms",{"title":3648,"description":3648},"54802b0bca0ad3e89ce85332e611d325","20210903050000-Cockpit CMSでアカウントにコレクションが表示されない",[2871],"_HXVye65XSGKD-sXPVWjG0nuTVc4ac1OIkdOpN5X6xM",{"id":3710,"title":3711,"author":43,"body":3712,"category":3751,"date":3752,"description":3753,"extension":31,"locale":32,"meta":3754,"navigation":34,"path":3755,"seo":3756,"slug":3757,"stem":3758,"tag":3759,"updated":3752,"__hash__":3761},"legacyQuestions\u002F20210910000000-楽天アフィエリエイトで本人確認が取れてないまま3000超えるとどうなりますか？.md","楽天アフィエリエイトで本人確認が取れてないまま報酬が3,000円を超えるとどうなりますか？",{"type":7,"value":3713,"toc":3748},[3714,3718,3721,3729,3732,3735,3738,3745],[10,3715,3717],{"id":3716},"_3000円だけ楽天キャッシュで入ってきて残額は消失します","3,000円だけ楽天キャッシュで入ってきて、残額は消失します",[15,3719,3720],{},"楽天アフィリエイトでは、",[53,3722,3723,3726],{},[56,3724,3725],{},"楽天銀行口座",[56,3727,3728],{},"楽天カード",[15,3730,3731],{},"のどちらかの方法で本人確認が済んでいない場合は、報酬はいくら確定していても3,000円が上限になります。",[15,3733,3734],{},"この上限金額は絶対で、しかも超えてしまった分は翌月などに繰越されることもないので、そのまま残額は消失します。数百円くらいならまだ良いですが、万単位で消失するとかなり痛手です。",[15,3736,3737],{},"その意味では、楽天アフィリエイトを始めるなら、無料で作成可能な楽天銀行の口座も作成しておくとベストです。",[15,3739,3740],{},[704,3741,3744],{"href":3742,"rel":3743},"https:\u002F\u002Fwww.rakuten-bank.co.jp\u002F",[708],"楽天銀行",[15,3746,3747],{},"将来的に銀行振り込みで報酬をもらう際も、楽天銀行だと手数料が優遇されます。",{"title":25,"searchDepth":26,"depth":26,"links":3749},[3750],{"id":3716,"depth":26,"text":3717},"affiliate","2021-09-10T01:00:00.000Z","楽天アフィエリエイトで本人確認が取れてないまま報酬が3000円を超えるとどうなりますか？",{},"\u002F20210910000000-3000",{"title":3711,"description":3753},"de33ea552d6718a1301d98d31d4d127d","20210910000000-楽天アフィエリエイトで本人確認が取れてないまま3000超えるとどうなりますか？",[3760],"rakuten-affiliate","BJ07iC-P7Z_NBJLJ4sU_6HdRq81XCOW6FFl64lkidQE",{"id":3763,"title":3764,"author":43,"body":3765,"category":3751,"date":3802,"description":3764,"extension":31,"locale":32,"meta":3803,"navigation":34,"path":3804,"seo":3805,"slug":3806,"stem":3807,"tag":3808,"updated":3802,"__hash__":3809},"legacyQuestions\u002F20210910000000-楽天銀行口座を登録したのに楽天アフィエリエイトの本人確認が未確認のままになる.md","楽天銀行口座を登録したのに楽天アフィエリエイトの本人確認が未確認のままになる",{"type":7,"value":3766,"toc":3799},[3767,3770,3773,3778,3781,3784,3789,3796],[10,3768,3769],{"id":3769},"毎月10日前後に更新されます",[15,3771,3772],{},"楽天アフィリエイトの報酬ページを見ると、",[2554,3774,3775],{},[15,3776,3777],{},"3,000円を超えた成果報酬のお支払いには、成果報酬お支払い月の前月末までにご本人の楽天銀行口座もしくは楽天カードのご登録が必要となります。",[15,3779,3780],{},"と書いてあるため、アフィリエイト報酬が3,000円を超えそうになると、「早く登録済みにならないとマズイ」と焦ってしまいますが、楽天アカウントの「銀行口座」のところに楽天銀行があれば心配しないでも大丈夫です。",[15,3782,3783],{},"実は、楽天アフィリエイトの報酬ページの「登録状況ステータス」は毎月1回、10日頃に更新されるというルールがあるため、楽天アカウントに楽天銀行情報を登録をしてもすぐには反映されないのです。",[2554,3785,3786],{},[15,3787,3788],{},"アフィリエイトレポート内の「アフィリエイトレポート（成果報酬）」のページ下にある「登録状況」は毎月1回、10日頃更新されます。\n（例：1月1日～31日に手続き完了→2月10日にページ反映）",[15,3790,3791],{},[704,3792,3795],{"href":3793,"rel":3794},"https:\u002F\u002Faffiliate.faq.rakuten.net\u002Fdetail\u002F000001087",[708],"楽天銀行口座または楽天カードの登録状況を確認したい ",[15,3797,3798],{},"なんとも不親切な仕組みですが、10日頃になるのを待つようにしましょう。",{"title":25,"searchDepth":26,"depth":26,"links":3800},[3801],{"id":3769,"depth":26,"text":3769},"2021-09-10T02:00:00.000Z",{},"\u002F20210910000000",{"title":3764,"description":3764},"664edacbae1043724e572f8da02f23a0","20210910000000-楽天銀行口座を登録したのに楽天アフィエリエイトの本人確認が未確認のままになる",[3760],"g_NYKUm1gr_esT21BN6GB8ofINkwy8hiLconjNz7vTU",{"id":3811,"title":3812,"author":43,"body":3813,"category":130,"date":3858,"description":3812,"extension":31,"locale":32,"meta":3859,"navigation":34,"path":3860,"seo":3861,"slug":3862,"stem":3863,"tag":3864,"updated":3858,"__hash__":3865},"legacyQuestions\u002F20210928010000-Cockpit CMSを最新版にアップデートする方法は？.md","Cockpit CMSを最新版にアップデートする方法は？",{"type":7,"value":3814,"toc":3855},[3815,3818,3821,3824,3832,3839,3842,3845,3852],[10,3816,3817],{"id":3817},"最新版をダウンロードして上書きするしかありません",[15,3819,3820],{},"Cockpit CMSにはアップデート機能などがないので、Cockpit CMSの最新版をダウンロードしてきて、Cockpit CMSの中身をFTPなどで上書き（configとstorageディレクトリ以外を）するしかありません。",[15,3822,3823],{},"公式でも上書きしろと書いてあります。",[2554,3825,3826,3829],{},[15,3827,3828],{},"Upgrading to a newer version of Cockpit",[15,3830,3831],{},"Download and unzip your desired version of Cockpit\nOverride the whole cockpit directory except the config and the storage folder.\nThat's it!",[15,3833,3834],{},[704,3835,3838],{"href":3836,"rel":3837},"https:\u002F\u002Fgetcockpit.com\u002Fdocumentation\u002Fgetting-started\u002Finstallation",[708],"Installation | Cockpit",[15,3840,3841],{},"Laravelなどのようにcomposerで管理されているわけではないので、composer updateでアップグレードすることはできません。",[15,3843,3844],{},"また、アップデートがあるかどうかを確認するプログラムもないので、Cockpit CMSのレポジトリをチェックするか、Twitter公式アカウントなどをフォローするのが良いでしょう。",[15,3846,3847],{},[704,3848,3851],{"href":3849,"rel":3850},"https:\u002F\u002Ftwitter.com\u002Fgetcockpit",[708],"@getcockpit",[15,3853,3854],{},"意外と知らないうちに大型の機能追加がされることもあるので、Twitterアカウントをフォローしておくのが便利です。",{"title":25,"searchDepth":26,"depth":26,"links":3856},[3857],{"id":3817,"depth":26,"text":3817},"2021-09-28T01:00:00.000Z",{},"\u002F20210928010000-cockpit-cms",{"title":3812,"description":3812},"e6a470501bed94e38e36d3ce376ca0a5","20210928010000-Cockpit CMSを最新版にアップデートする方法は？",[2871],"PbMzSXCFwKI2mmf49m7OSY-arRAzhdo9TF7XXPv9XcI",{"id":3867,"title":3868,"author":43,"body":3869,"category":130,"date":3899,"description":3868,"extension":31,"locale":32,"meta":3900,"navigation":34,"path":3901,"seo":3902,"slug":3903,"stem":3904,"tag":3905,"updated":3899,"__hash__":3906},"legacyQuestions\u002F20211005010000-Cockpit CMSにアップロードした画像が403になる.md","Cockpit CMSにアップロードした画像が403になる",{"type":7,"value":3870,"toc":3896},[3871,3875,3878,3881,3884,3890,3893],[10,3872,3874],{"id":3873},"webサーバー側の問題です","Webサーバー側の問題です。",[15,3876,3877],{},"Cockpit CMSはassetsとしてアップロードした静的ファイルについては、何も処理をしていない（アクセス禁止など）ので、問題があるとしたらサーバー側の問題です。",[15,3879,3880],{},"レンタルサーバーによっては、SPAなどのJavascriptフレームワークからのアクセスをCORS処理していることがあるので、CORSを追加してあげるとアクセスできることがあります。",[15,3882,3883],{},"Apacheなどなら、cockpit CMSの.htaccessファイルのmod_headersの部分に追記すればアクセス可能になるのではないかと思います。",[76,3885,3888],{"className":3886,"code":3887,"language":81},[79],"\u003CIfModule mod_setenvif.c>\n \u003CIfModule mod_headers.c>\n SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\\s*,?\\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding\n RequestHeader append Accept-Encoding \"gzip,deflate\" env=HAVE_Accept-Encoding\n # ここから\n \u003CFilesMatch \"\\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$\">\n Header set Access-Control-Allow-Origin \"*\"\n \u003C\u002FFilesMatch>\n # ここを追記\n \u003C\u002FIfModule>\n\u003C\u002FIfModule>\n",[83,3889,3887],{"__ignoreMap":25},[15,3891,3892],{},"画像ファイルへのアクセスの時だけ、CORSのAccess-Control-Allow-Originを全てにしています。",[15,3894,3895],{},"また、CloudflareなどのCDNを使っている場合は、CDNがアクセスをブロックすることもあるので、そちらも確認しましょう。",{"title":25,"searchDepth":26,"depth":26,"links":3897},[3898],{"id":3873,"depth":26,"text":3874},"2021-10-05T01:00:00.000Z",{},"\u002F20211005010000-cockpit-cms403",{"title":3868,"description":3868},"0195e9b15d85067d3461d9ef757ad357","20211005010000-Cockpit CMSにアップロードした画像が403になる",[2871],"L7L2Ud80iO9TGV4OiTp9OB1P5n2dq099lRutIH2vhXw",{"id":3908,"title":3909,"author":43,"body":3910,"category":130,"date":3956,"description":3909,"extension":31,"locale":32,"meta":3957,"navigation":34,"path":3958,"seo":3959,"slug":3960,"stem":3961,"tag":3962,"updated":3956,"__hash__":3963},"legacyQuestions\u002F20211028000000-Grdisomeでオリジナル設定を追加する方法.md","Grdisomeでオリジナル設定を追加する方法",{"type":7,"value":3911,"toc":3952},[3912,3916,3919,3922,3925,3928,3934,3937,3943,3946],[10,3913,3915],{"id":3914},"gridsomeconfigjsデータをapiloadsourceで読み込めば出来ます","gridsome.config.jsデータをapi.loadSourceで読み込めば出来ます",[15,3917,3918],{},"Gridsomeでは、gridsome.config.jsのデータのうち、フレームワークに取り込む設定が決められているため、そのまま設定を記載しただけでは、Templateからロードが出来ません。",[15,3920,3921],{},"しかし、gridsome.server.jsから呼び出すapi.loadSourceには、metaデータにGridsomeのGraphQLに追加するaddMetadataというメソッドが用意されているため、そちらを使えば追加が可能です。",[10,3923,3924],{"id":3924},"実装方法",[15,3926,3927],{},"まずは、gridsome.config.jsに設定を追加します。ここはただの連想配列なので、好きな値を追加できます。今回は、「settings」という連想配列で追加します。",[76,3929,3932],{"className":3930,"code":3931,"language":81},[79],"\u002F\u002F gridsome.config.js\nmodule.exports = {\n siteName: 'SiteName',\n icon: {\n favicon: '.\u002Fsrc\u002Fassets\u002Ffavicon.png',\n touchicon: '.\u002Fsrc\u002Fassets\u002Ffavicon.png'\n },\n siteUrl: 'https:\u002F\u002Fexample.com',\n settings: {\n twitter: \"https:\u002F\u002Ftwitter.com\u002Fxxx\",\n leftnav: {\n links: [\n { path: '\u002Fdocs\u002F', title: 'Docs' }\n ]\n }\n },\n\n",[83,3933,3931],{"__ignoreMap":25},[15,3935,3936],{},"続いて、この設定値をgridsome.server.jsでGridsomeのGraphQLへ挿入します。",[76,3938,3941],{"className":3939,"code":3940,"language":81},[79],"api.loadSource(({ addCollection, addMetadata }) => {\n addMetadata('settings', require('.\u002Fgridsome.config').settings);\n});\n",[83,3942,3940],{"__ignoreMap":25},[15,3944,3945],{},"追加したデータは、GraphQLで取得可能です。",[76,3947,3950],{"className":3948,"code":3949,"language":81},[79],"\u003Cstatic-query>\nquery Setting {\n metadata {\n settings {\n twitter\n }\n }\n}\n\u003C\u002Fstatic-query>\n",[83,3951,3949],{"__ignoreMap":25},{"title":25,"searchDepth":26,"depth":26,"links":3953},[3954,3955],{"id":3914,"depth":26,"text":3915},{"id":3924,"depth":26,"text":3924},"2021-10-29T01:00:00.000Z",{},"\u002F20211028000000-grdisome",{"title":3909,"description":3909},"96dc285beb73d292e6c566b3808db487","20211028000000-Grdisomeでオリジナル設定を追加する方法",[37],"OmlCDN1vE-2BkyFGWoqCTPqcVytm6VcVUJkalDIzRXc",{"id":3965,"title":3966,"author":43,"body":3967,"category":130,"date":4018,"description":3966,"extension":31,"locale":32,"meta":4019,"navigation":34,"path":4020,"seo":4021,"slug":4022,"stem":4023,"tag":4024,"updated":4018,"__hash__":4025},"legacyQuestions\u002F202111110000000-cockpit cmsのデータをバックアップするには？.md","Cockpit CMSのデータをバックアップするにはどうすればいい？",{"type":7,"value":3968,"toc":4015},[3969,3973,3976,3979,3982,3985,3991,3994,3997,4003,4006,4012],[10,3970,3972],{"id":3971},"ディレクトリをバックアップすればokです","ディレクトリをバックアップすればOKです",[15,3974,3975],{},"Cockpit CMSにはバックアップ機能が搭載されていないので、本番のディレクトリからデータの部分だけをバックアップするのが唯一の解決策です。",[15,3977,3978],{},"バックアップするのは、記事データのみなら「\u002Fstorage\u002F」ディレクトリを、設計系もバックアップするなら「\u002Fconfig\u002F」ディレクトリをバックアップします。",[15,3980,3981],{},"自動でバックアップをしたいなら、SCPやLFTPなどのLinuxコマンドでリモートから自動でローカルにバックアップしるスクリプトを組んで、crondで定時実行すればバックアップ漏れも防げて安心です。",[15,3983,3984],{},"SCPは",[76,3986,3989],{"className":3987,"code":3988,"language":81},[79],"scp -r ユーザ名@サーバのホスト名:リモートのstorageのパス ローカルのバス\n",[83,3990,3988],{"__ignoreMap":25},[15,3992,3993],{},"で再起的にディレクトリを取得すればOKです。",[15,3995,3996],{},"LFTPなら、下記のようなlft.datを組んで、",[76,3998,4001],{"className":3999,"code":4000,"language":81},[79],"open -u ID,PASSWORD SEVER\nmirror cockpit-master\u002Fstorage cockpit\u002Fstorage\nmirror cockpit-master\u002Fconfig cockpit\u002Fconfig\necho end\nclose\nquit\n",[83,4002,4000],{"__ignoreMap":25},[15,4004,4005],{},"-fをつけて実行すれば簡単です。",[76,4007,4010],{"className":4008,"code":4009,"language":81},[79],"lftp -f lftp.dat\n",[83,4011,4009],{"__ignoreMap":25},[15,4013,4014],{},"まとめてbackup.shなどのシェルスクリプトにしておくのも良いでしょう。",{"title":25,"searchDepth":26,"depth":26,"links":4016},[4017],{"id":3971,"depth":26,"text":3972},"2021-11-10T00:00:00.000Z",{},"\u002F202111110000000-cockpit-cms",{"title":3966,"description":3966},"4b100b0803d85a763a167f1c8a84d1b0","202111110000000-cockpit cmsのデータをバックアップするには？",[2871],"EoF8ncd3hgh-mDWafblMOL0L54nwYLgS0PoATWAhDxI",{"id":4027,"title":4028,"author":2066,"body":4029,"category":2095,"date":4117,"description":4028,"extension":31,"locale":32,"meta":4118,"navigation":34,"path":4119,"seo":4120,"slug":4121,"stem":4122,"tag":4123,"updated":4117,"__hash__":4124},"legacyQuestions\u002F20220315000000-hackintoshでapple thunderbolt displayを使う方法.md","HackintoshでApple Thunderbolt Displayを使う方法",{"type":7,"value":4030,"toc":4114},[4031,4035,4038,4041,4044,4051,4054,4095,4098,4101,4104,4107],[10,4032,4034],{"id":4033},"純正macに搭載可能なthunderbolt対応dgpuを使うのがベストです","純正Macに搭載可能なThunderbolt対応dGPUを使うのがベストです",[15,4036,4037],{},"Apple Thunderbolt Displayは名前の通り、Thunderboltポートのみに対応する特殊な液晶ディスプレイです。",[15,4039,4040],{},"そもそもThunderboltポートを搭載したdGPUカードが少ない上に、macOSに対応するものとなるとかなり選択肢が減りますが、Hackintoshで使うのであれば相性の問題もあるので、純正Macに搭載されていた、もしくは公式に搭載可能なdGPUを選ぶのが無難ではないでしょうか。",[15,4042,4043],{},"純正MacでdGPUを搭載可能なのはMac Proのみなので、Mac Proに搭載されていた純正dGPUかつMetalグラフィックドライバに対応したdGPUを選ぶことになります。",[15,4045,4046],{},[704,4047,4050],{"href":4048,"rel":4049},"https:\u002F\u002Fsupport.apple.com\u002Fja-jp\u002FHT208898",[708],"Mac Pro (Mid 2010) および Mac Pro (Mid 2012) に macOS 10.14 Mojave をインストールする Apple",[15,4052,4053],{},"上記のApple公式のサポート情報によると、",[53,4055,4056,4059,4062,4065,4068,4071,4074,4077,4080,4083,4086,4089,4092],{},[56,4057,4058],{},"MSI Gaming Radeon RX 560 128-bit 4GB GDRR5",[56,4060,4061],{},"SAPPHIRE Radeon PULSE RX 580 8GB GDDR5",[56,4063,4064],{},"SAPPHIRE Radeon HD 7950 Mac Edition",[56,4066,4067],{},"NVIDIA Quadro K5000 for Mac",[56,4069,4070],{},"NVIDIA GeForce GTX 680 Mac Edition",[56,4072,4073],{},"AMD Radeon RX 560",[56,4075,4076],{},"AMD Radeon RX 570",[56,4078,4079],{},"AMD Radeon RX 580",[56,4081,4082],{},"AMD Radeon Pro WX 7100",[56,4084,4085],{},"AMD Radeon RX Vega 56",[56,4087,4088],{},"AMD Radeon RX Vega 64",[56,4090,4091],{},"AMD Radeon Pro WX 9100",[56,4093,4094],{},"AMD Radeon Frontier Edition",[15,4096,4097],{},"が公式対応dGPUです。",[15,4099,4100],{},"このうち、Apple Thunderbolt DisplayからはThunderboltのオスが生えているので、Thunderboltポートのメスが生えているので、ThunderboltのメスポートがあるdGPUを選ぶ必要があります。この時点でほとんど選択肢はないと言っても良いかもしれません。",[15,4102,4103],{},"なお、Apple Thunderbolt DisplayはMini DisplayPortとしては動作しない仕様で、mini Displayport端子があるdGPUというだけでは動作しないようです。",[15,4105,4106],{},"「Apple Thunderbolt Displayが映らない」という場合は、mini Displayportに繋いでいる場合があるかもしれません。",[15,4108,4109],{},[704,4110,4113],{"href":4111,"rel":4112},"http:\u002F\u002Fdirect.pc-physics.com\u002Fdisplay\u002Fthunderbolt-display-mini-displayPort-cable.html",[708],"Thunderbolt DisplayでMini DisplayPortケーブルは使えるのか",{"title":25,"searchDepth":26,"depth":26,"links":4115},[4116],{"id":4033,"depth":26,"text":4034},"2022-03-15T01:00:00.000Z",{},"\u002F20220315000000-hackintoshapple-thunderbolt-display",{"title":4028,"description":4028},"0284fe0cb29311b77628e282810eb00a","20220315000000-hackintoshでapple thunderbolt displayを使う方法",[2102],"a6QILvrsUamVMiaxyH7SUEslFhf6UAr7MAhG6RqzI5k",[4126,4148,4182,4208,4381,4509,4539],{"id":4127,"title":4128,"author":43,"body":4129,"category":130,"date":29,"description":4128,"extension":31,"images":4137,"locale":32,"meta":4141,"navigation":34,"path":4142,"seo":4143,"slug":4144,"stem":4145,"tag":4146,"updated":29,"__hash__":4147},"legacyGuides\u002F20210401000000-Cloudflareで始めるサーバーレス.md","Cloudflareで始めるサーバーレス",{"type":7,"value":4130,"toc":4134},[4131],[10,4132,4128],{"id":4133},"cloudflareで始めるサーバーレス",{"title":25,"searchDepth":26,"depth":26,"links":4135},[4136],{"id":4133,"depth":26,"text":4128},{"author":43,"height":4138,"src":4139,"width":4140},500,"\u002Fimgs\u002Fcategories\u002Fsite-content-th.png",1400,{},"\u002F20210401000000-cloudflare",{"title":4128,"description":4128},"bd1c9e03beaa737dcfe744ea4d1e1cce","20210401000000-Cloudflareで始めるサーバーレス",[1832,1972],"7AQUzPwsBV3_WAQ3ZjBVjbvR3pyV2oT3A0cZnHt1mmQ",{"id":4149,"title":4150,"author":43,"body":4151,"category":130,"date":29,"description":4174,"extension":31,"images":4175,"locale":32,"meta":4176,"navigation":34,"path":178,"seo":4177,"slug":4178,"stem":4179,"tag":4180,"updated":29,"__hash__":4181},"legacyGuides\u002F20210401000000-ゼロから始めるGridsomeスターターガイド.md","ゼロから始めるGridsomeスターターガイド",{"type":7,"value":4152,"toc":4170},[4153,4157,4160,4163,4166],[10,4154,4156],{"id":4155},"gridsomeについて","Gridsomeについて",[15,4158,4159],{},"GridsomeはVue.jsベースの静的サイト・ジェネレータです。",[15,4161,4162],{},"Vue.jsベースなので、Vue.jsの知見が利用できるほか、npmでのプラグインのインストールも可能です。",[15,4164,4165],{},"また、デプロイ時に静的サイトとしてHTMLファイルを生成するので、SSR（サーバー・サイド・レンダリング）が不要というメリットもあります。",[10,4167,4169],{"id":4168},"gridsomeの導入","Gridsomeの導入",{"title":25,"searchDepth":26,"depth":26,"links":4171},[4172,4173],{"id":4155,"depth":26,"text":4156},{"id":4168,"depth":26,"text":4169},"これから静的サイトを始める方に向けたGridsomeのスターターガイド。",{"author":43,"height":4138,"src":4139,"width":4140},{},{"title":4150,"description":4174},"f01abcbf1f45750821568f84a2f5afff","20210401000000-ゼロから始めるGridsomeスターターガイド",[37],"ZTwQr4XQbq52JzDCrWMqjln6mWpCdDqfoXsg1ajt5n4",{"id":4183,"title":4184,"author":2066,"body":4185,"category":2095,"date":29,"description":4199,"extension":31,"images":4200,"locale":32,"meta":4201,"navigation":34,"path":4202,"seo":4203,"slug":4204,"stem":4205,"tag":4206,"updated":29,"__hash__":4207},"legacyGuides\u002F20210409000000-Hackintosh私的ガイド.md","Hackintosh私的ガイド",{"type":7,"value":4186,"toc":4195},[4187,4191],[10,4188,4190],{"id":4189},"hackintoshについて","Hackintoshについて",[10,4192,4194],{"id":4193},"hackintosh用パーツの選定","Hackintosh用パーツの選定",{"title":25,"searchDepth":26,"depth":26,"links":4196},[4197,4198],{"id":4189,"depth":26,"text":4190},{"id":4193,"depth":26,"text":4194},"Hackintosh私的ガイドです。",{"author":2066,"height":4138,"src":4139,"width":4140},{},"\u002F20210409000000-hackintosh",{"title":4184,"description":4199},"df19ef5349dabf9d7a5cc1445d3a7272","20210409000000-Hackintosh私的ガイド",[2102],"i_qGaCVmlIUtxh7qCmFkt8FGUdvQk6q05KqumBkUtvk",{"id":4209,"title":4210,"author":2066,"body":4211,"category":2095,"date":4371,"description":4372,"extension":31,"images":4373,"locale":32,"meta":4374,"navigation":34,"path":4375,"seo":4376,"slug":4377,"stem":4378,"tag":4379,"updated":4371,"__hash__":4380},"legacyGuides\u002F20210426000000-5万円未満で作るHackintoshガイド.md","新品5万円未満で作る格安Hackintoshガイド（パーツ選び編）",{"type":7,"value":4212,"toc":4358},[4213,4215,4218,4221,4241,4244,4247,4250,4273,4276,4279,4283,4287,4290,4293,4296,4300,4303,4306,4309,4312,4315,4319,4322,4325,4328,4332,4335,4338,4342,4345,4348,4352,4355],[10,4214,4194],{"id":4193},[204,4216,4217],{"id":4217},"各パーツの価格を1万円未満に抑えよう",[15,4219,4220],{},"Hackintoshに限らず、自作PCを組もうと思ったら、",[53,4222,4223,4226,4229,4232,4235,4238],{},[56,4224,4225],{},"CPU",[56,4227,4228],{},"メモリ",[56,4230,4231],{},"マザーボード",[56,4233,4234],{},"ストレージ",[56,4236,4237],{},"電源",[56,4239,4240],{},"PCケース",[15,4242,4243],{},"が最低限必要です。Hackintoshではグラフィック関連が鬼門だったりするので、dGPUもあると安心です。",[15,4245,4246],{},"そう考えると、5万円未満でHackintoshを組むのであれば、各パーツの予算はそれぞれ1万円未満というのを心がけておくと良いかと思います。",[15,4248,4249],{},"個人的には、",[53,4251,4252,4255,4258,4261,4264,4267,4270],{},[56,4253,4254],{},"CPU => 1.5万",[56,4256,4257],{},"メモリ => 0.5万",[56,4259,4260],{},"マザーボード => 0.5万",[56,4262,4263],{},"dGPU => 0.5万",[56,4265,4266],{},"ストレージ => 0.5万",[56,4268,4269],{},"電源 => 1万",[56,4271,4272],{},"PCケース => 0.5万",[15,4274,4275],{},"で、トータル5万円というバランスかと思います。",[15,4277,4278],{},"実際に組んでみると、メモリを追加したいとか、WifiやBluetoothが欲しいとか、CPUクーラーを交換したいとか色々欲が出てくるので、そうした追加パーツコストも考えるとCPUも1万円くらいに抑えておくと安心です。",[10,4280,4282],{"id":4281},"hackintoshを5万円で組む時のオススメパーツ","Hackintoshを5万円で組む時のオススメパーツ",[204,4284,4286],{"id":4285},"cpuはintelのfシリーズ","CPUはIntelのFシリーズ",[15,4288,4289],{},"自作PCのメインとなるCPUですが、dGPUを使うのであればiGPUを非搭載CPUにすると、CPUの購入コストを数千円抑えることができます。Intel CPUならFシリーズ、AMDならRyzenのGシリーズではないモデルがiGPU非搭載モデルです。",[15,4291,4292],{},"中でもHackintoshの情報が多く、実機のMacでも採用されているIntel CPUのFシリーズがオススメ。低コストならCore i3 10100F、パワーが欲しいなら5万円という予算を少しオーバーする可能性がありますが、Core i5 10400Fが良いでしょう。",[15,4294,4295],{},"iGPUを搭載するCPUを選択すると、dGPUを追加するコストが増えるため、実質CPUで減ったコストと相殺くらいになってしまうこともありますが、それでもHackintoshの難関ポイントであるグラフィック問題を解決できるなら安いものです。",[204,4297,4299],{"id":4298},"マザーボードはasusasrockあたりが無難","マザーボードはASUS、AsRockあたりが無難",[15,4301,4302],{},"現行のIntel 11世代対応マザーボードなどは、メーカーごとにトラブルになるようなポイントはそこまで無いようですが、Hackintoshと相性が良いとされるASUS、AsRockのマザーボードを選ぶのが無難です。",[15,4304,4305],{},"マザーボードでも、特殊なパーツ（Wifi、Bluetoothなど）がついているモデルは相性が悪いケースもあるようなので、ネットでHackintoshの実績がある製品を選ぶと良いでしょう。",[15,4307,4308],{},"ネットで事例を探していると、どうしてもハイエンドなマザーボードの実例が多く出てきますが、根気よく探せばローエンドマザーボードでも実績はたくさんあります。",[15,4310,4311],{},"マザーボードのフォームファクタは好きなものを選べば良いと思いますが、汎用性が高いのはmicroATXです。ATXだと大きすぎることがありますし、ITXだと拡張性が足りなくなることがあります。",[15,4313,4314],{},"その意味では、micro ATXならITXほどではないにしても、省スペースPCケースもありますし、ATXケースにも入るので「使い回しがしやすい」というメリットがあります。",[204,4316,4318],{"id":4317},"dgpuはほぼgt-710一択","dGPUはほぼGT 710一択",[15,4320,4321],{},"dGPUは、macOSの標準ドライバで動くKepler世代で新品で入手できるGT 710がコスパも高くオススメです。MSIやASUSなどのパーツメーカー製品で6,000円台、最安の玄人志向のモデルであれば3,000円台で入手可能です。",[15,4323,4324],{},"筆者も玄人思考のGT 710ファンレスモデルをメインHackintoshで使っていますが、特別設定をしないでも安定して動作しています。",[15,4326,4327],{},"GT 710以外のdGPUでも問題ないですが、5万円という限られた予算だと、新品で入手可能なdGPUでHackintoshで動作する製品はほとんどないと思います。",[204,4329,4331],{"id":4330},"atx電源は安心できる有名メーカーのものを","ATX電源は安心できる有名メーカーのものを",[15,4333,4334],{},"ATX電源は安いものは3,000円未満、高いものは数万円とピンキリな世界ですが、値段よりもメーカーで選ぶと良いでしょう。ATX電源の故障は、CPUやメモリなどシステム全てを故障させるリスクがあるので、出来れば数千円の安いモデルは避けた方が無難です。",[15,4336,4337],{},"各メーカー、1万円くらいのATX電源が普及モデルとして安定動作することが多いので、CORSAIRやSilverstoneなどの有名メーカーのATX電源を選ぶと良いでしょう。電力は500Wほどくらいあれば今回の構成であれば十分です。",[204,4339,4341],{"id":4340},"メモリはどのメーカーでもok","メモリはどのメーカーでもOK",[15,4343,4344],{},"メモリに関しては昔ほど相性問題も起こりませんし、ヨドバシカメラやソフマップなどの大手店舗が取り扱っているメモリであれば、どのメーカーでも問題はないでしょう。",[15,4346,4347],{},"注意したいのは、中古やフリマアプリなどで流通しているメモリの中には詐欺メモリが紛れているという点です。その意味では、信頼できる店舗から買うのが最大のリスク回避になります。",[204,4349,4351],{"id":4350},"pcケースはなるべく安く","PCケースはなるべく安く",[15,4353,4354],{},"PCケースは見た目を決めるものなので、高くて見た目の良いものを選びたくなりますが、5万円という予算の範囲で考えたら、安いものを選んで他のパーツにお金をかけた方が良いです。最近では5,000円未満のケースでも、見た目の良いPCケースはたくさんあります。",[15,4356,4357],{},"PCケースは使っているうちに飽きて新しいものを新調したくなりますが、マザーボードやメモリなどのパーツは長く使うものなので、最初から良いものを買っておくのがベスト。その意味でも、最初はケースをケチって他のパーツに予算を回す方が良いです。",{"title":25,"searchDepth":26,"depth":26,"links":4359},[4360,4363],{"id":4193,"depth":26,"text":4194,"children":4361},[4362],{"id":4217,"depth":256,"text":4217},{"id":4281,"depth":26,"text":4282,"children":4364},[4365,4366,4367,4368,4369,4370],{"id":4285,"depth":256,"text":4286},{"id":4298,"depth":256,"text":4299},{"id":4317,"depth":256,"text":4318},{"id":4330,"depth":256,"text":4331},{"id":4340,"depth":256,"text":4341},{"id":4350,"depth":256,"text":4351},"2021-04-23T00:00:00.000Z","新品5万円未満で作る格安Hackintoshガイドのパーツ選び編です。手頃な価格で新品のHackitnoshを組む時のパーツを選び方のポイントをまとめました。",{"author":2066,"height":4138,"src":4139,"width":4140},{},"\u002F20210426000000-5yenhackintosh",{"title":4210,"description":4372},"6e4c5fd56c0447714b98971cafe8f9d0","20210426000000-5万円未満で作るHackintoshガイド",[2102],"R57YKPM5a41-RFVT5aUudhCV5r_9erVEr5r3lXZe1Aw",{"id":4382,"title":4383,"author":2066,"body":4384,"category":2095,"date":4500,"description":4501,"extension":31,"images":4502,"locale":32,"meta":4503,"navigation":34,"path":4375,"seo":4504,"slug":4505,"stem":4506,"tag":4507,"updated":4500,"__hash__":4508},"legacyGuides\u002F20210426000000-5万円未満で作るHackintoshガイド・セットアップ編.md","5万円未満で作るHackintoshガイド(セットアップ編)",{"type":7,"value":4385,"toc":4492},[4386,4389,4393,4396,4407,4410,4413,4416,4419,4422,4441,4444,4447,4450,4453,4456,4459,4463,4466,4469,4477,4480,4483,4486,4489],[10,4387,4388],{"id":4388},"必要なものを揃えよう",[204,4390,4392],{"id":4391},"hackintoshのセットアップに必要なもの","Hackintoshのセットアップに必要なもの",[15,4394,4395],{},"まず最初に、Hackintoshのセットアップに必要なものを揃えます。",[53,4397,4398,4401,4404],{},[56,4399,4400],{},"Mac実機",[56,4402,4403],{},"インターネット回線",[56,4405,4406],{},"16GB以上のUSBメモリ",[15,4408,4409],{},"macOSのデータを取得するのに、Macの実機が必要です。実機は古い機種でも構いませんが、インストールしたいmacOSのバージョンに対応している機種である必要があります。例えば、macOS Big Surをインストールするなら、Big Sur対応MacでないとBig Surがダウンロードできません。",[15,4411,4412],{},"裏技的にmacOSをAppleのサーバーから直接ダウンロードする方法もありますが、ライセンス的にはグレーです（Hackintosh自体がグレーですが）。",[15,4414,4415],{},"インストールUSBはmacOSが入る16GB以上のUSBメモリを用意しましょう。",[204,4417,4418],{"id":4418},"ダウンロードしておきたいデータ",[15,4420,4421],{},"基本的なものが用意できたら、",[53,4423,4424,4431,4434],{},[56,4425,4426],{},[704,4427,4430],{"href":4428,"rel":4429},"https:\u002F\u002Fdortania.github.io\u002FOpenCore-Install-Guide\u002Finstaller-guide\u002Fopencore-efi.html",[708],"Open Core",[56,4432,4433],{},"kextなどのEFIフォルダに入れるプラグイン",[56,4435,4436],{},[704,4437,4440],{"href":4438,"rel":4439},"https:\u002F\u002Fgithub.com\u002Fcorpnewt\u002FGenSMBIOS",[708],"GenSMBIOS",[15,4442,4443],{},"をダウンロードしてきます。",[15,4445,4446],{},"それぞれの使い方は長くなるので省略しますが、基本的には「kextなどのEFIフォルダに入れるプラグイン」だけが難関で、それ以外は特段難しいことはありません。",[204,4448,4449],{"id":4449},"必要なkextや設定の探し方",[15,4451,4452],{},"今回は自作デスクトップPC前提なので、Open Coreのガイドに沿って進めていけば、必要なkextは探せるかと思います。ただ、英文かつ長いので、サクッとセットアップしたいという方は、Githubに上がっているEFIフォルダのデータを使うのが最短コースです。（そもそもパーツを集める段階で合わせておくのがベストです）",[15,4454,4455],{},"どのkextを使うかは基本的にはマザーボードの機種に依存するので、全く同じマザーボードのEFIデータがあれば万全です。同じ機種のEFIデータがなくても、構成が近い（マザーボードのチップセットが同じなど）であれば、動くことが多いでしょう。",[15,4457,4458],{},"Open Coreは、起動ログをUSBメモリに保存してくれるので、エラーが起こったらエラーログを確認してネットでエラーの原因を探ります。",[10,4460,4462],{"id":4461},"macosをhackintoshにインストールする際のポイント","macOSをHackintoshにインストールする際のポイント",[15,4464,4465],{},"作成したUSBインストーラーでmacOSのセットアップまで進めれば、基本的には半分くらいはゴールしているようなものです。問題となるのは、「インストーラーが進まない（起動しない）」ということだけで、そこをクリアできていればmacOSのインストールまでは問題ないでしょう。",[15,4467,4468],{},"macOSのインストールができたら、",[53,4470,4471,4474],{},[56,4472,4473],{},"EFIフォルダをコピーするまでは、USBインストーラーから起動すること",[56,4475,4476],{},"macOSを立ち上げたら各機能が使えるかチェック",[15,4478,4479],{},"をします。",[15,4481,4482],{},"問題がある場合は、一度セットアップが終わっている環境なら、一からインストールをやり直さなくてもUSBインストーラー側のEFIをカスタマイズしてUSBインストーラーからシステムを起動すれば設定やkextのテストができます。",[15,4484,4485],{},"実際にHackintoshを立ち上げてみると、Wifiが使えない、サウンドが出ないなど問題があることがありますが、時間がなくてサクッとHackintosh組みたいなら、USB機器かBluetoothドングルとBluetooth機器の組み合わせで対処する方が断然楽です。",[15,4487,4488],{},"というのも、起動が出来ているHackintoshでUSBポートが認識しないということはほとんどないので、USB・Bluetooth機器を使えば、普通にMacでUSB・Bluetooth機器を使っているのと同じなのでHackintosh的な対処が不要だからです。",[15,4490,4491],{},"時間がある方は、マザーボードの機能を最大限活用するために色々テストすれば良いですが、「とりあえず動くHackintoshが欲しい」ということなら、USBやBluetoothで対処するのも個人的には悪いことではないと思います。",{"title":25,"searchDepth":26,"depth":26,"links":4493},[4494,4499],{"id":4388,"depth":26,"text":4388,"children":4495},[4496,4497,4498],{"id":4391,"depth":256,"text":4392},{"id":4418,"depth":256,"text":4418},{"id":4449,"depth":256,"text":4449},{"id":4461,"depth":26,"text":4462},"2021-04-23T01:00:00.000Z","5万円未満で作るHackintoshガイド・セットアップ編です。インストールするために必要なものや、実際にセットアップした際のトラブルの解決方法などをまとめました。",{"author":2066,"height":4138,"src":4139,"width":4140},{},{"title":4383,"description":4501},"537a369d80da44b3cd1d13bcb3ba31b1","20210426000000-5万円未満で作るHackintoshガイド・セットアップ編",[2102],"gCglO8ipKj0Orn59qEroiN5fJYS0vD0oUbYqL7VrEHA",{"id":4510,"title":4511,"author":43,"body":4512,"category":130,"date":4530,"description":4531,"extension":31,"images":4532,"locale":32,"meta":4533,"navigation":34,"path":2866,"seo":4534,"slug":4535,"stem":4536,"tag":4537,"updated":4530,"__hash__":4538},"legacyGuides\u002F20210825000000-Cockpit CMS非公式ガイド.md","Cockpit CMS非公式ガイド",{"type":7,"value":4513,"toc":4527},[4514,4518,4521,4524],[10,4515,4517],{"id":4516},"cockpit-cmsについて","Cockpit CMSについて",[15,4519,4520],{},"Cockpit CMSはPHPで動作するヘッドレスCMSです。",[15,4522,4523],{},"WordPressのようにフロント（表示）機能がなく、単純にコンテンツを管理することに特化しています。",[15,4525,4526],{},"Cockpit CMSはオープソースなので、誰でも無料で使うことができますが、動作させるためにはWebサーバーが必要です。",{"title":25,"searchDepth":26,"depth":26,"links":4528},[4529],{"id":4516,"depth":26,"text":4517},"2021-08-25T00:00:00.000Z","Cockpit CMSの非公式ガイドです。",{"author":43,"height":4138,"src":4139,"width":4140},{},{"title":4511,"description":4531},"d70876b201cf77dbe0cde160760dc029","20210825000000-Cockpit CMS非公式ガイド",[2871],"PT8t-W9FmffLHa2vu-LdzZsscYyxJYfmqqBCC5AKSUw",{"id":4540,"title":4541,"author":43,"body":4542,"category":3751,"date":4546,"description":4547,"extension":31,"images":4548,"locale":32,"meta":4549,"navigation":34,"path":3804,"seo":4550,"slug":4551,"stem":4552,"tag":4553,"updated":4546,"__hash__":4554},"legacyGuides\u002F20210910000000-楽天アフィリエイト私的ガイド.md","楽天アフィリエイト私的ガイド",{"type":7,"value":4543,"toc":4544},[],{"title":25,"searchDepth":26,"depth":26,"links":4545},[],"2021-09-10T00:00:00.000Z","楽天アフィリエイト私的ガイドです。",{"author":43,"height":4138,"src":4139,"width":4140},{},{"title":4541,"description":4547},"603e271408b84613c454d532af595caf","20210910000000-楽天アフィリエイト私的ガイド",[3760],"5zwalgqBTRmV1Yrlk3kel2mEDICrc-wK_5Bwg7rQ0Og",1783320302956]