[{"data":1,"prerenderedAt":1101},["ShallowReactive",2],{"site-info":3,"post-tech-992":7,"related-post-tag-index":42},{"name":4,"description":5,"url":6},"アイ・エル・アール","フリーランスWEB制作","https:\u002F\u002Filr.jp\u002Fwp\u002F",{"ID":8,"title":9,"post_type":10,"post_type_label":11,"url":12,"date":13,"modified":14,"thumbnail":15,"thumb":15,"tag":16,"slug":29,"excerpt":30,"content":31,"simple_css":32,"adjacent":33},992,"Macでテキストを音声データ(MP3)に一括変換","tech","Tech Blog","\u002Ftech\u002F992\u002F","2023.04.06","2024.08.05","https:\u002F\u002Filr.jp\u002Fuploads\u002F2022\u002F10\u002Filr.png",[17,21,25],{"name":18,"slug":19,"url":20},"Mac","mac","\u002Ftag\u002Fmac\u002F",{"name":22,"slug":23,"url":24},"MP3","mp3","\u002Ftag\u002Fmp3\u002F",{"name":26,"slug":27,"url":28},"Node.js","node-js","\u002Ftag\u002Fnode-js\u002F","mac%e3%81%a7%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%82%92%e9%9f%b3%e5%a3%b0%e3%83%87%e3%83%bc%e3%82%bfmp3%e3%81%ab%e4%b8%80%e6%8b%ac%e5%a4%89%e6%8f%9b","概要 Macでテキストを一括で音声データに変換する方法です。 テキストを音声データに変換(aiff) Macではテキストを右クリックで音声データに変換することができます。 1、テキストを選択して　＞　右クリック　＞　スポ […]","\n\u003Ch3 class=\"wp-block-heading\">概要\u003C\u002Fh3>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Macでテキストを一括で音声データに変換する方法です。\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">テキストを音声データに変換(aiff)\u003C\u002Fh3>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Macではテキストを右クリックで音声データに変換することができます。\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>1、テキストを選択して　＞　右クリック　＞　スポークントラックとして”ミュージック”に追加\u003C\u002Fstrong>\u003C\u002Fp>\n\n\n\n\u003Cfigure class=\"wp-block-image size-large is-resized\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"799\" src=\"https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002Fd217d7445e500c7e0ec7fdfd491a3f09-1024x799.png\" alt=\"\" class=\"wp-image-994\" style=\"width:840px;height:655px\" srcset=\"https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002Fd217d7445e500c7e0ec7fdfd491a3f09-1024x799.png 1024w, https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002Fd217d7445e500c7e0ec7fdfd491a3f09-300x234.png 300w, https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002Fd217d7445e500c7e0ec7fdfd491a3f09-768x599.png 768w, https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002Fd217d7445e500c7e0ec7fdfd491a3f09-1536x1198.png 1536w, https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002Fd217d7445e500c7e0ec7fdfd491a3f09-1200x936.png 1200w, https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002Fd217d7445e500c7e0ec7fdfd491a3f09.png 1744w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \u002F>\u003C\u002Ffigure>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>２、システムの声選択とファイル名指定\u003C\u002Fstrong>\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">システムの声は「Kyoko」「Otoya」など日本語に対応した音声を選択します。\u003C\u002Fp>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"918\" height=\"362\" src=\"https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002F25f58f6e4cb99c355ac48b33ec23793e.png\" alt=\"\" class=\"wp-image-997\" srcset=\"https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002F25f58f6e4cb99c355ac48b33ec23793e.png 918w, https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002F25f58f6e4cb99c355ac48b33ec23793e-300x118.png 300w, https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002F25f58f6e4cb99c355ac48b33ec23793e-768x303.png 768w\" sizes=\"auto, (max-width: 918px) 100vw, 918px\" \u002F>\u003C\u002Ffigure>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>３、ミュージックにaiff形式で保存される\u003C\u002Fstrong>\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">ミュージックアプリに音声が追加されます。\u003C\u002Fp>\n\n\n\n\u003Cfigure class=\"wp-block-image size-large\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"541\" src=\"https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002Fcb3d703f599bceaf63beea02bc40339e-1024x541.png\" alt=\"\" class=\"wp-image-999\" srcset=\"https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002Fcb3d703f599bceaf63beea02bc40339e-1024x541.png 1024w, https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002Fcb3d703f599bceaf63beea02bc40339e-300x159.png 300w, https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002Fcb3d703f599bceaf63beea02bc40339e-768x406.png 768w, https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002Fcb3d703f599bceaf63beea02bc40339e-1536x812.png 1536w, https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002Fcb3d703f599bceaf63beea02bc40339e-1200x634.png 1200w, https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F04\u002Fcb3d703f599bceaf63beea02bc40339e.png 1540w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \u002F>\u003C\u002Ffigure>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">ターミナルからシステムの声を鳴らすことが可能\u003C\u002Fh3>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">ターミナルで下記コマンドを実行すると音声で「あいうえお」を再生されます。\u003C\u002Fp>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode>say あいうえお \u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">-v オプションでシステムの声を指定できます。\u003Cbr>下記では「Otoya」という男性の声で再生されます。\u003C\u002Fp>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode>say -v Otoya あいうえお\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">-v ‘?’ で使用できる音声を確認できます。\u003C\u002Fp>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode>say -v '?'\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode>Jester              en_US    # Please stop tickling me!\nIoana               ro_RO    # Bună, mă cheamă Ioana. Sunt o voce românească.\nJacques             fr_FR    # Bonjour, je m’appelle Jacques.\nJoana               pt_PT    # Olá, chamo-me Joana e dou voz ao português falado em Portugal.\nJunior              en_US    # My favorite food is pizza.\nKanya               th_TH    # สวัสดีค่ะ ดิฉันชื่อกันยา\nKaren               en_AU    # Hello, my name is Karen. I am an Australian-English voice.\nKathy               en_US    # Isn't it nice to have a computer that will talk to you?\nKyoko               ja_JP    # こんにちは、私の名前はきょうこです。日本語の音声をお届けします。\nKyoko (Enhanced)    ja_JP    # こんにちは、私の名前はきょうこです。日本語の音声をお届けします。\nLana                hr_HR    # Bog! Moje je ime Lana. Ja sam hrvatski glas.\nLaura               sk_SK    # Ahoj. Volám sa Laura. Som hlas v slovenskom jazyku.\nLekha               hi_IN    # नमस्कार, मेरा नाम लेखा है! मैं हिन्दी में बोलने वाली आवाज़ हूँ!\nLesya               uk_UA    # Привіт, мене звуть Леся. Я — український голос.\nLinh                vi_VN    # Xin chào, tên tôi là Linh. Tôi là giọng nói Tiếng Việt.\nLuciana             pt_BR    # Olá, o meu nome é Luciana e a minha voz corresponde ao português que é falado no Brasil\nMajed               ar_001   # مرحبًا، اسمي ماجد. أنا صوتٌ عربي.\nTünde               hu_HU    # Üdvözlöm! Tünde vagyok. Én vagyok a magyar hang.\nMeijia              zh_TW    # 你好，我叫美佳。我說國語。\nMelina              el_GR    # ονομάζομαι Μελίνα. Μιλάω ελληνικά.\nMilena              ru_RU    # Здравствуйте, меня зовут Милена. Я — русский голос системы.\nMoira               en_IE    # Hello, my name is Moira. I am an Irish-English voice.\nMónica              es_ES    # Hola, me llamo Mónica y soy una voz española.\nMontse              ca_ES    # Hola, em dic Montse i soc una veu catalana.\nNora                nb_NO    # Hei, jeg heter Nora. Jeg er en norsk stemme.\nOrgan               en_US    # We must rejoice in this morbid voice.\nOtoya               ja_JP    # こんにちは、私の名前はOtoyaです。日本語の音声をお届けします。\nOtoya (Enhanced)    ja_JP    # こんにちは、私の名前はOtoyaです。日本語の音声をお届けします。\nPaulina             es_MX    # Hola, me llamo Paulina y soy una voz mexicana.\nSuperstar           en_US    # When I grow up I'm going to be a scientist.\nRalph               en_US    # The sum of the squares of the legs of a right triangle is equal to the square of the hypotenuse.\n\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">ファイルに出力することもできます。\u003Cbr>「test.mp4」というファイルに出力されます。\u003C\u002Fp>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode>say -v Otoya あいうえお -o test.mp4\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">出力できるフォーマットは下記コマンドで確認できます。\u003C\u002Fp>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode>say --file-format '?'\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode>3gp2  3GPP-2 Audio         (.3g2,.3gp2) [Qclp,aac,aace,aacf,aacg,aach,aacl,aacp]\n3gpp  3GP Audio            (.3gp,.3gpp) [Qclp,aac,aace,aacf,aacg,aach,aacl,aacp]\nAIFC  AIFC                 (.aifc,.aiff,.aif) [lpcm,ulaw,alaw,ima4,Qclp]\nAIFF  AIFF                 (.aiff,.aif) [lpcm]\nBW64  WAVE (BW64 for length over 4 GB) (.wav) [lpcm,ulaw,alaw]\nNeXT  NeXT\u002FSun             (.snd,.au) [lpcm,ulaw,alaw]\nRF64  WAVE (RF64 for length over 4 GB) (.wav) [lpcm,ulaw,alaw]\nSd2f  Sound Designer II    (.sd2) [lpcm]\nW64f  Wave64               (.w64) [lpcm,ulaw,alaw]\nWAVE  WAVE                 (.wav) [lpcm,ulaw,alaw]\nadts  AAC ADTS             (.aac,.adts) [aac,aach,aacp]\ncaff  CAF                  (.caf,.caff) [Qclp,aac,aace,aacf,aacg,aach,aacl,aacp,alac,alaw,flac,ilbc,ima4,lpcm,opus,ulaw]\nflac  FLAC                 (.flac) [flac]\nloas  LATM\u002FLOAS            (.loas,.latm,.xhe) [aac,aace,aacf,aacg,aach,aacl,aacp]\nm4af  Apple MPEG-4 Audio   (.m4a,.m4r) [aac,aace,aacf,aacg,aach,aacl,aacp,alac,flac,lpcm]\nm4bf  Apple MPEG-4 AudioBooks (.m4b) [aac,aace,aacf,aacg,aach,aacl,aacp]\nmp4f  MPEG-4 Audio         (.mp4,.mpg4) [aac,aace,aacf,aacg,aach,aacl,aacp,alac,flac,lpcm]\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">じつはMP3に変換できない\u003C\u002Fh3>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">私が携わっていた案件はMP3が必要だったので「say」コマンドでaiffフォーマットに変換「ffmpeg」でaiffからMP3に変換することにします。\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">一括変換の環境構築\u003C\u002Fh3>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">一括変換用のCSVを用意して、Node.jsで読み込んで変換していきます。\u003C\u002Fp>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\" data-file=\"data.csv\">\u003Ccode>text,name\nあいうえお,a\nかきくけこ,ka\nさしすせそ,sa\nたちつてと,ta\nなにぬねの,na\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">CSVの「text」が音声に変換したいテキスト、「name」がファイル名になります。\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-json\" data-file=\"package.json\" data-lang=\"JSON\">\u003Ccode>{\n  "name": "text2mp3",\n  "version": "1.0.0",\n  "description": "test",\n  "main": "index.js",\n  "scripts": {\n    "test1": "say こんにちは",\n    "test2": "say -v Otoya こんにちは",\n    "build": "node text2mp3.js"\n  },\n  "author": "",\n  "license": "ISC",\n  "devDependencies": {\n    "child_process": "^1.0.2",\n    "csv-parser": "^3.0.0",\n    "fs": "^0.0.1-security"\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>使用モジュール\u003C\u002Fstrong>\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">child_process　・・・シェルコマンド実行\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">csv-parser　・・・CSVをオブジェクトに変換\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">fs　・・・ファイル操作\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-file=\"text2mp3.js\" data-lang=\"JavaScript\">\u003Ccode>const { exec } = require("child_process");\nconst fs = require("fs");\nconst csv = require("csv-parser");\n\nconst list = [];\n\nlet count = 0;\nlet loadfile = "data.csv";\n\nlet aiff = ".\u002Faiff";\nlet mp3 = ".\u002Fmp3";\n\nconst makeAiff = () => {\n  if (!fs.existsSync(aiff)) {\n    fs.mkdir(aiff, (err) => {\n      if (err) {\n        console.log(err.toString());\n        return;\n      }\n      makeMp3();\n    });\n  } else {\n    fs.rmdir(aiff, { recursive: true, force: true }, (err) => {\n      if (err) throw err;\n      fs.mkdir(aiff, (err) => {\n        if (err) {\n          console.log(err.toString());\n          return;\n        }\n        makeMp3();\n      });\n    });\n  }\n};\n\nconst makeMp3 = () => {\n  if (!fs.existsSync(mp3)) {\n    fs.mkdir(mp3, (err) => {\n      if (err) {\n        console.log(err.toString());\n        return;\n      }\n      loadCsv();\n    });\n  } else {\n    fs.rmdir(mp3, { recursive: true, force: true }, (err) => {\n      if (err) throw err;\n      fs.mkdir(mp3, (err) => {\n        if (err) {\n          console.log(err.toString());\n          return;\n        }\n        loadCsv();\n      });\n    });\n  }\n};\n\nconst loadCsv = () => {\n  fs.createReadStream(loadfile)\n    .pipe(csv())\n    .on("data", function (data) {\n      list.push(data);\n    })\n    .on("end", function () {\n      textConvert();\n    });\n};\n\nconst textConvert = () => {\n  let item = list[count];\n\n  let s = `say ${item.text} -v kyoko -o .\u002Faiff\u002F${item.name}`;\n  let o = `ffmpeg -i .\u002Faiff\u002F${item.name}.aiff .\u002Fmp3\u002F${item.name}.mp3`;\n\n  if (fs.existsSync(`.\u002Fmp3\u002F${item.name}.mp3`)) {\n    console.log(`pass: ${item.name}.mp3`);\n    next();\n  } else {\n    exec(s, (err, stdout, stderr) => {\n      if (err) {\n        console.log(`stderr: ${stderr}`);\n        return;\n      }\n      exec(o, (err, stdout, stderr) => {\n        if (err) {\n          console.log(`stderr: ${stderr}`);\n          return;\n        }\n        console.log(`text:${item.text} => mp3: ${item.name}.mp3`);\n        next();\n      });\n    });\n  }\n};\n\nconst next = () => {\n  count++;\n  if (count < list.length) {\n    setTimeout(() => {\n      textConvert();\n    }, 10);\n  } else {\n    fs.rmdir(aiff, { recursive: true }, (err) => {\n      if (err) throw err;\n      console.log("COMLETE!");\n    });\n  }\n};\n\nmakeAiff();\n\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">１、フォルダ作成\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">２、CSV読み込み\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">３、テキストを音声ファイルaiffに変換\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">４、ffmpegでaiffからMP3に変換\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">実行\u003C\u002Fh3>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode>npm run build \u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">ソース\u003C\u002Fh3>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fhiron712\u002Fmac-text2mp3\">https:\u002F\u002Fgithub.com\u002Fhiron712\u002Fmac-text2mp3\u003C\u002Fa>\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">おわりに\u003C\u002Fh3>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">テキストを一括で変換できるようになりましたが、\u003Cs>この音声が商用利用できるかは調べていません。\u003C\u002Fs>\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">商用利用は不可になります。\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Ca href=\"https:\u002F\u002Fsupport.apple.com\u002Fja-jp\u002Fguide\u002Fmac-help\u002Fmchldfd72333\u002Fmac\">https:\u002F\u002Fsupport.apple.com\u002Fja-jp\u002Fguide\u002Fmac-help\u002Fmchldfd72333\u002Fmac\u003C\u002Fa>\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003C\u002Fp>\n","",{"next":34,"previous":38},{"ID":35,"title":36,"post_type":10,"date":37},1027,"Youtubeフィードを使用してWordPressにチャンネルの動画一覧を表示する。","2023.05.04",{"ID":39,"title":40,"post_type":10,"date":41},976,"HLS(HTTP Live Streaming)動画を再生する","2023.02.26",[43,59,167,298,316,339,359,382,399,414,624,631,638,645,667,683,690,747,754,781,787,811,939,965,975,1024,1044,1053,1067,1075,1081,1087],{"name":44,"slug":45,"url":46,"posts":47},"Android","android","\u002Ftag\u002Fandroid\u002F",[48],{"ID":49,"title":50,"post_type":10,"post_type_label":11,"url":51,"date":52,"modified":53,"thumbnail":54,"thumb":54,"tag":55,"slug":57,"excerpt":58},298,"Android ChromeをUSBでパソコンに繋いでデバッグする方法","\u002Ftech\u002F298\u002F","2022.10.03","2022.10.10","https:\u002F\u002Filr.jp\u002Fuploads\u002F2022\u002F10\u002Fthumbnail_298-1200x675.jpg",[56],{"name":44,"slug":45,"url":46},"%ef%bf%bc","Android 側 ※OSのバージョンによって異なる場合があります。 ホーム画面などにある「設定」アイコンをタップ 「設定」にある、「デバイス情報」をタップ 「ビルド番号」を数回タップしたあと、「PIN番号」を入力。 「 […]",{"name":60,"slug":61,"url":62,"posts":63},"API","api","\u002Ftag\u002Fapi\u002F",[64,82,101,117,138,154],{"ID":65,"title":66,"post_type":10,"post_type_label":11,"url":67,"date":68,"modified":68,"thumbnail":69,"thumb":69,"tag":70,"slug":80,"excerpt":81},2756,"WordPressサイトをヘッドレスCMS化し、Nuxt.js + AI開発で静的サイト運用に移行した話","\u002Ftech\u002F2756\u002F","2026.06.12","https:\u002F\u002Filr.jp\u002Fuploads\u002F2026\u002F06\u002Fimg_2756-1200x675.png",[71,72,76],{"name":60,"slug":61,"url":62},{"name":73,"slug":74,"url":75},"Nuxt","nuxt","\u002Ftag\u002Fnuxt\u002F",{"name":77,"slug":78,"url":79},"WordPress","wordpress","\u002Ftag\u002Fwordpress\u002F","wordpress%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e3%83%98%e3%83%83%e3%83%89%e3%83%ac%e3%82%b9cms%e5%8c%96%e3%81%97%e3%80%81nuxt-js-ai%e9%96%8b%e7%99%ba%e3%81%a7%e9%9d%99%e7%9a%84%e3%82%b5%e3%82%a4","これまでこのサイトは、WordPressを使って運用していました。 WordPressは記事の管理や更新がしやすく、長く使われているCMSです。プラグインも豊富で、管理画面から多くのことが完結します。一方で、サーバー上で […]",{"ID":83,"title":84,"post_type":10,"post_type_label":11,"url":85,"date":86,"modified":86,"thumbnail":87,"thumb":87,"tag":88,"slug":99,"excerpt":100},1737,"WordPressに気象庁APIで天気を表示する","\u002Ftech\u002F1737\u002F","2023.07.24","https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F07\u002Fweather_api-1200x731.webp",[89,90,94,95],{"name":60,"slug":61,"url":62},{"name":91,"slug":92,"url":93},"PHP","php","\u002Ftag\u002Fphp\u002F",{"name":77,"slug":78,"url":79},{"name":96,"slug":97,"url":98},"気象庁","jma","\u002Ftag\u002Fjma\u002F","wordpress%e3%81%ab%e6%b0%97%e8%b1%a1%e5%ba%81api%e3%81%a7%e5%a4%a9%e6%b0%97%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b","概要 気象庁が提供しているAPIから天気情報をWordPressに表示します。 エリア情報 エリア情報は下記URLから確認することができます。 https:\u002F\u002Fwww.jma.go.jp\u002Fbosai\u002Fcommon\u002Fcon […]",{"ID":102,"title":103,"post_type":10,"post_type_label":11,"url":104,"date":105,"modified":105,"thumbnail":106,"thumb":106,"tag":107,"slug":115,"excerpt":116},1131,"WordPressで月送りのカレンダーを実装（祝日対応）","\u002Ftech\u002F1131\u002F","2023.06.15","https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F06\u002Fbnr_calendar.png",[108,109,113,114],{"name":60,"slug":61,"url":62},{"name":110,"slug":111,"url":112},"Google","google","\u002Ftag\u002Fgoogle\u002F",{"name":91,"slug":92,"url":93},{"name":77,"slug":78,"url":79},"wordpress%e3%81%a7%e6%9c%88%e9%80%81%e3%82%8a%e3%81%ae%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%80%e3%83%bc%e3%82%92%e5%ae%9f%e8%a3%85%ef%bc%88%e7%a5%9d%e6%97%a5%e5%af%be%e5%bf%9c%ef%bc%89","概要 月送りが出来て、投稿日にリンクと祝日の表示がされるカレンダーを実装します。 下記のようにAPIにしてHTML書き出しにしています。 https:\u002F\u002Filr.jp\u002Fapi\u002Fcalendar.php 祝日部 […]",{"ID":35,"title":36,"post_type":10,"post_type_label":11,"url":118,"date":37,"modified":119,"thumbnail":120,"thumb":120,"tag":121,"slug":136,"excerpt":137},"\u002Ftech\u002F1027\u002F","2026.06.04","https:\u002F\u002Filr.jp\u002Fuploads\u002F2022\u002F10\u002Fyoutube_id.png",[122,123,127,128,132],{"name":60,"slug":61,"url":62},{"name":124,"slug":125,"url":126},"RSS","rss","\u002Ftag\u002Frss\u002F",{"name":77,"slug":78,"url":79},{"name":129,"slug":130,"url":131},"YouTube","youtube","\u002Ftag\u002Fyoutube\u002F",{"name":133,"slug":134,"url":135},"フィード","feed","\u002Ftag\u002Ffeed\u002F","youtube%e3%83%95%e3%82%a3%e3%83%bc%e3%83%89%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6wordpress%e3%81%ab%e3%83%81%e3%83%a3%e3%83%b3%e3%83%8d%e3%83%ab%e3%81%ae%e5%8b%95%e7%94%bb%e4%b8%80%e8%a6%a7","概要 Youtubeにはフィードを取得する方法があります。 今回はYoutubeフィードを使用してWordPressにチャンネルの動画一覧を表示させます。 フィードURL チャンネルIDは以前投稿した記事で確認することが […]",{"ID":139,"title":140,"post_type":10,"post_type_label":11,"url":141,"date":142,"modified":143,"thumbnail":144,"thumb":144,"tag":145,"slug":152,"excerpt":153},521,"Instagram Graph APIのビジネスアカウントIDとアクセストークン取得","\u002Ftech\u002F521\u002F","2022.11.01","2023.08.08","https:\u002F\u002Filr.jp\u002Fuploads\u002F2022\u002F11\u002Fimg_instagram.webp",[146,147,151],{"name":60,"slug":61,"url":62},{"name":148,"slug":149,"url":150},"Instagram","instagram","\u002Ftag\u002Finstagram\u002F",{"name":26,"slug":27,"url":28},"instagram-graph-api%e3%81%ae%e3%83%93%e3%82%b8%e3%83%8d%e3%82%b9%e3%82%a2%e3%82%ab%e3%82%a6%e3%83%b3%e3%83%88id%e3%81%a8%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af%e3%83%b3","概要 WEBサイトにインスタグラムの写真を埋め込むために必要なビジネスアカウントIDとアクセストークン取得方法です。3段階目のアクセストークンまでの発行をスクリプトにしました。 用意するもの 必要なデータ ソース git […]",{"ID":155,"title":156,"post_type":10,"post_type_label":11,"url":157,"date":158,"modified":159,"thumbnail":160,"thumb":160,"tag":161,"slug":165,"excerpt":166},464,"WordPressにYouTubeの動画一覧を表示する","\u002Ftech\u002F464\u002F","2022.10.28","2022.12.02","https:\u002F\u002Filr.jp\u002Fuploads\u002F2022\u002F10\u002Fwordpress-youtube-1200x684.png",[162,163,164],{"name":60,"slug":61,"url":62},{"name":77,"slug":78,"url":79},{"name":129,"slug":130,"url":131},"wordpress%e3%81%abyoutube%e3%81%ae%e5%8b%95%e7%94%bb%e4%b8%80%e8%a6%a7%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b","概要 簡易的にWordPressにYouTubeの動画一覧を表示する方法 ※事前にYouTubeのAPIキーの取得をする必要があります。 検索部分 「youtube_data」の部分はTransients APIで保存す […]",{"name":168,"slug":169,"url":170,"posts":171},"CSS","css","\u002Ftag\u002Fcss\u002F",[172,182,196,207,216,226,237,248,258,268,278,288],{"ID":173,"title":174,"post_type":10,"post_type_label":11,"url":175,"date":176,"modified":177,"thumbnail":15,"thumb":15,"tag":178,"slug":180,"excerpt":181},1904,"ブラウザの横幅に合わせてフォントサイズを変更する。","\u002Ftech\u002F1904\u002F","2023.11.28","2023.12.15",[179],{"name":168,"slug":169,"url":170},"%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%ae%e6%a8%aa%e5%b9%85%e3%81%ab%e5%90%88%e3%82%8f%e3%81%9b%e3%81%a6%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%82%92%e5%a4%89%e6%9b%b4","概要 CSSでブラウザの横幅に合わせて、フォントサイズを変更します。方法はいろいろありますので、こちらは私の個人的な方法で備忘録になります。 施策 CSS htmlに設定します。大元であるhtmlに設定することでその中の […]",{"ID":183,"title":184,"post_type":10,"post_type_label":11,"url":185,"date":186,"modified":143,"thumbnail":187,"thumb":187,"tag":188,"slug":194,"excerpt":195},1769,"HTMLメール用にインラインCSSに変換する","\u002Ftech\u002F1769\u002F","2023.07.27","https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F07\u002Fimg_mail.webp",[189,190],{"name":168,"slug":169,"url":170},{"name":191,"slug":192,"url":193},"HTML","html","\u002Ftag\u002Fhtml\u002F","html%e3%83%a1%e3%83%bc%e3%83%ab%e7%94%a8%e3%81%ab%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3css%e3%81%ab%e5%a4%89%e6%8f%9b%e3%81%99%e3%82%8b","概要 OutlookのレンダリングエンジンがEdgeになるみたいですが、まだまだ、テーブルコーディング、インラインCSSが主流でコーディングが面倒で悩まされます。 今回はメルマガのHTMLメール用のコーディングをする際に […]",{"ID":197,"title":198,"post_type":10,"post_type_label":11,"url":199,"date":200,"modified":201,"thumbnail":202,"thumb":202,"tag":203,"slug":205,"excerpt":206},889,"CSSで三角形を作る(clip-path版)","\u002Ftech\u002F889\u002F","2022.12.28","2026.06.03","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F09\u002Fimg_css-triangle-1.png",[204],{"name":168,"slug":169,"url":170},"css%e3%81%a7%e4%b8%89%e8%a7%92%e5%bd%a2%e3%82%92%e4%bd%9c%e3%82%8bclip-path%e7%89%88","概要 リンクのアイコンなどに使用する三角アイコンをCSSだけで作ります。以前、CSSで三角形を作る(border版)の記事を書いたのですが、その方法のclip-path版です。 ソース .triangleにスタイルを設定 […]",{"ID":208,"title":209,"post_type":10,"post_type_label":11,"url":210,"date":159,"modified":159,"thumbnail":211,"thumb":211,"tag":212,"slug":214,"excerpt":215},837,"要素の境界線を斜めにする","\u002Ftech\u002F837\u002F","https:\u002F\u002Filr.jp\u002Fuploads\u002F2022\u002F12\u002Fimg837-1200x638.png",[213],{"name":168,"slug":169,"url":170},"%e8%a6%81%e7%b4%a0%e3%81%ae%e5%a2%83%e7%95%8c%e7%b7%9a%e3%82%92%e6%96%9c%e3%82%81%e3%81%ab%e3%81%99%e3%82%8b","概要 要素の境界線を水平ではなく少し斜めにCSSでします。背景をグラデーションや画像にすることも可能です。 サンプル タイトル 文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文 […]",{"ID":217,"title":218,"post_type":10,"post_type_label":11,"url":219,"date":220,"modified":220,"thumbnail":221,"thumb":221,"tag":222,"slug":224,"excerpt":225},771,"mask-imageでSVG画像の色を変える","\u002Ftech\u002F771\u002F","2022.11.26","https:\u002F\u002Filr.jp\u002Fuploads\u002F2022\u002F11\u002Fmask-image-color-1200x819.png",[223],{"name":168,"slug":169,"url":170},"mask-image%e3%81%a7svg%e7%94%bb%e5%83%8f%e3%81%ae%e8%89%b2%e3%82%92%e5%a4%89%e3%81%88%e3%82%8b","概要 色違いのSVG画像を使用したいけど、別ファイルにして作成するのも面倒くさいし、SVGをインラインで挿入してCSSで色を変えるもの、SVGインラインは可動性にかけてソース見づらいしみたいな時に使用する方法です。 ※色 […]",{"ID":227,"title":228,"post_type":10,"post_type_label":11,"url":229,"date":230,"modified":231,"thumbnail":232,"thumb":232,"tag":233,"slug":235,"excerpt":236},747,"mask-imageで透過グラデーション","\u002Ftech\u002F747\u002F","2022.11.18","2023.07.21","https:\u002F\u002Filr.jp\u002Fuploads\u002F2022\u002F11\u002Fmask-image-1200x671.webp",[234],{"name":168,"slug":169,"url":170},"mask-image%e3%81%a7%e9%80%8f%e9%81%8e%e3%82%b0%e3%83%a9%e3%83%87%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3","概要 下記のように要素を透過グラデーションする方法です。これを使用すると背景に溶け込ませるようなグラデーションにすることができます。 サンプル HTML CSS mask-imageにlinear-gradientでグラ […]",{"ID":238,"title":239,"post_type":10,"post_type_label":11,"url":240,"date":241,"modified":242,"thumbnail":243,"thumb":243,"tag":244,"slug":246,"excerpt":247},395,"ボーダーをグラデーション・角丸・背景抜きでCSSで実装する","\u002Ftech\u002F395\u002F","2022.10.27","2023.06.16","https:\u002F\u002Filr.jp\u002Fuploads\u002F2022\u002F10\u002Fborder-radius-gradient-1200x777.png",[245],{"name":168,"slug":169,"url":170},"%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e3%82%92%e3%82%b0%e3%83%a9%e3%83%87%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%83%bb%e8%a7%92%e4%b8%b8%e3%83%bb%e8%83%8c%e6%99%af%e6%8a%9c%e3%81%8d%e3%81%a7css","はじめに ボーダーの色をグラデーションにして角丸で背景抜きを実装したくて色々ググってみたのですが、なかなか見つからなくて唯一見つけた記事を参考に書かせていただいてます。 https:\u002F\u002Fdev.to\u002Fafif\u002Fborde […]",{"ID":249,"title":250,"post_type":10,"post_type_label":11,"url":251,"date":252,"modified":253,"thumbnail":202,"thumb":202,"tag":254,"slug":256,"excerpt":257},228,"CSSで三角形を作る(border版)","\u002Ftech\u002F228\u002F","2021.09.11","2026.06.02",[255],{"name":168,"slug":169,"url":170},"css%e3%81%a7%e4%b8%89%e8%a7%92%e5%bd%a2%e3%82%92%e4%bd%9c%e3%82%8b","概要 リンクのアイコンなどに使用する三角アイコンをCSSだけで作ります。 私自身はclip-path版を推しています。こちらの記事もどうぞ。 https:\u002F\u002Filr.jp\u002Ftech\u002F889 実装結果 解説 な […]",{"ID":259,"title":260,"post_type":10,"post_type_label":11,"url":261,"date":262,"modified":53,"thumbnail":263,"thumb":263,"tag":264,"slug":266,"excerpt":267},143,"CSSでスクロールスナップを実装できるscroll-snap-type","\u002Ftech\u002F143\u002F","2021.08.02","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F08\u002Fimg_scroll-snap-type.png",[265],{"name":168,"slug":169,"url":170},"css%e3%81%a7%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%b9%e3%83%8a%e3%83%83%e3%83%97%e3%82%92%e5%ae%9f%e8%a3%85%e3%81%a7%e3%81%8d%e3%82%8bscroll-snap-type","要素ごとにスクロールするスクロールスナップをCSSで実装 実装結果 HTML 各要素A、B、C、D、Eを囲む要素を用意します。 CSS 囲った要素wrapにはscroll-snap-type: y mandatory;  […]",{"ID":269,"title":270,"post_type":10,"post_type_label":11,"url":271,"date":272,"modified":253,"thumbnail":273,"thumb":273,"tag":274,"slug":276,"excerpt":277},108,"要素の背後にぼかしなどの効果を加えるbackdrop-filter","\u002Ftech\u002F108\u002F","2021.07.27","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F07\u002Fthumbnail_108-1200x662.jpg",[275],{"name":168,"slug":169,"url":170},"%e8%83%8c%e6%99%af%e3%81%ab","スタイルシートでもWindowsなどOSのウィンドウを開いたときに背後にぼかしがかかる効果を実装することができます。 実装結果 backdrop-filter HTML Style Sheet backdrop-filt […]",{"ID":279,"title":280,"post_type":10,"post_type_label":11,"url":281,"date":282,"modified":53,"thumbnail":283,"thumb":283,"tag":284,"slug":286,"excerpt":287},83,"要素に連番を与えるcounter-increment","\u002Ftech\u002F83\u002F","2021.07.25","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F07\u002Fimg_counter-increment-1.png",[285],{"name":168,"slug":169,"url":170},"%e8%a6%81%e7%b4%a0%e3%81%ab%e9%80%a3%e7%95%aa%e3%82%92%e4%b8%8e%e3%81%88%e3%82%8bcounter-increment","olタグで連番を与えることはできますが、それ以外の要素でも与えることができます。 HTML html構造としては連番を与えたい要素を囲みます。クラス「list」「item」はユニークな文字列でOKです。 Style Sh […]",{"ID":289,"title":290,"post_type":10,"post_type_label":11,"url":291,"date":292,"modified":253,"thumbnail":293,"thumb":293,"tag":294,"slug":296,"excerpt":297},43,"行数を指定して文末を「…」で省略するline-clamp","\u002Ftech\u002F43\u002F","2021.07.23","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F07\u002Fimg_line-clamp-1.png",[295],{"name":168,"slug":169,"url":170},"%e8%a1%8c%e6%95%b0%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%9d%e3%82%8c%e4%bb%a5%e9%99%8d%e3%82%92%e3%80%8c%e3%80%8d%e3%81%a7%e7%9c%81%e7%95%a5%e3%81%99%e3%82%8bline-clamp","CSSにはテキストを省略することができるtext-overflow: ellipsis;がありますが、1行しか省略することができません。 HTML text-overflow: ellipsis; 東京五輪の開会式を走る […]",{"name":299,"slug":300,"url":301,"posts":302},"Docker","docker","\u002Ftag\u002Fdocker\u002F",[303],{"ID":304,"title":305,"post_type":10,"post_type_label":11,"url":306,"date":307,"modified":308,"thumbnail":309,"thumb":309,"tag":310,"slug":314,"excerpt":315},2367,"DockerでWordPress構築（ローカル仮想ドメイン版)","\u002Ftech\u002F2367\u002F","2025.10.30","2026.06.24","https:\u002F\u002Filr.jp\u002Fuploads\u002F2025\u002F10\u002FImage_2367_2026_6_24-1200x675.png",[311,312,313],{"name":299,"slug":300,"url":301},{"name":91,"slug":92,"url":93},{"name":77,"slug":78,"url":79},"docker%e3%81%a7wordpress%e6%a7%8b%e7%af%89%ef%bc%88%e3%83%ad%e3%83%bc%e3%82%ab%e3%83%ab%e4%bb%ae%e6%83%b3%e3%83%89%e3%83%a1%e3%82%a4%e3%83%b3%e7%89%88","概要 Macのローカルに仮装ドメインでWordPressの開発環境を構築します。 ・仮装ドメインでのアクセス・httpsでのアクセス・メール送信できるようにする・phpMyAdmin構築 構成 OSMacBook Pro […]",{"name":110,"slug":111,"url":112,"posts":317},[318,333],{"ID":319,"title":320,"post_type":10,"post_type_label":11,"url":321,"date":322,"modified":322,"thumbnail":323,"thumb":323,"tag":324,"slug":331,"excerpt":332},2769,"WebページにGoogleフォーム風のお問い合わせフォームを追加する方法","\u002Ftech\u002F2769\u002F","2026.06.22","https:\u002F\u002Filr.jp\u002Fuploads\u002F2026\u002F06\u002FImage_2769_20260622-1200x675.png",[325,326,327],{"name":110,"slug":111,"url":112},{"name":191,"slug":192,"url":193},{"name":328,"slug":329,"url":330},"JavaScript","javascript","\u002Ftag\u002Fjavascript\u002F","add-google-form-to-website-html-apps-script","HTMLフォーム、Googleスプレッドシート、Apps Scriptを使って、静的なWebページに問い合わせフォームを追加する方法を簡単に解説します。",{"ID":102,"title":103,"post_type":10,"post_type_label":11,"url":104,"date":105,"modified":105,"thumbnail":106,"thumb":106,"tag":334,"slug":115,"excerpt":116},[335,336,337,338],{"name":60,"slug":61,"url":62},{"name":110,"slug":111,"url":112},{"name":91,"slug":92,"url":93},{"name":77,"slug":78,"url":79},{"name":340,"slug":341,"url":342,"posts":343},"GSAP","gsap","\u002Ftag\u002Fgsap\u002F",[344],{"ID":345,"title":346,"post_type":10,"post_type_label":11,"url":347,"date":348,"modified":349,"thumbnail":15,"thumb":15,"tag":350,"slug":357,"excerpt":358},971,"スムーズスクロール","\u002Ftech\u002F971\u002F","2023.02.09","2023.11.14",[351,352,353],{"name":340,"slug":341,"url":342},{"name":328,"slug":329,"url":330},{"name":354,"slug":355,"url":356},"jQuery","jquery","\u002Ftag\u002Fjquery\u002F","%e3%82%b9%e3%83%a0%e3%83%bc%e3%82%ba%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab","概要 最近はアニメーションでGSAPをよく使用しているのですが、スムーズスクロールを実装させたい場合、jQueryのeaseScrollだとバッティングしているのか正常に動きません。GSAPにもScrollSmoothe […]",{"name":191,"slug":192,"url":193,"posts":360},[361,366,378],{"ID":319,"title":320,"post_type":10,"post_type_label":11,"url":321,"date":322,"modified":322,"thumbnail":323,"thumb":323,"tag":362,"slug":331,"excerpt":332},[363,364,365],{"name":110,"slug":111,"url":112},{"name":191,"slug":192,"url":193},{"name":328,"slug":329,"url":330},{"ID":367,"title":368,"post_type":10,"post_type_label":11,"url":369,"date":370,"modified":371,"thumbnail":372,"thumb":372,"tag":373,"slug":376,"excerpt":377},1775,"dialog要素とtemplate要素を使用してモーダルウィンドウを作る","\u002Ftech\u002F1775\u002F","2023.07.29","2025.10.29","https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F07\u002Fimg_window.webp",[374,375],{"name":191,"slug":192,"url":193},{"name":328,"slug":329,"url":330},"dialog%e8%a6%81%e7%b4%a0%e3%81%a8template%e8%a6%81%e7%b4%a0%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6%e3%83%a2%e3%83%bc%e3%83%80%e3%83%ab%e3%82%a6%e3%82%a3%e3%83%b3%e3%83%89%e3%82%a6%e3%82%92","概要 dialog要素でモーダルを表示しつつ、template要素で表示する内容を切り替えるモーダルウィンドを作成します。 サンプル ソース HTML dialogの中をformで囲っています。buttonにformme […]",{"ID":183,"title":184,"post_type":10,"post_type_label":11,"url":185,"date":186,"modified":143,"thumbnail":187,"thumb":187,"tag":379,"slug":194,"excerpt":195},[380,381],{"name":168,"slug":169,"url":170},{"name":191,"slug":192,"url":193},{"name":148,"slug":149,"url":150,"posts":383},[384,394],{"ID":385,"title":386,"post_type":10,"post_type_label":11,"url":387,"date":159,"modified":231,"thumbnail":388,"thumb":388,"tag":389,"slug":392,"excerpt":393},855,"WordPressにインスタグラムの投稿一覧を表示","\u002Ftech\u002F855\u002F","https:\u002F\u002Filr.jp\u002Fuploads\u002F2022\u002F12\u002Finsta_list-1200x806.webp",[390,391],{"name":148,"slug":149,"url":150},{"name":77,"slug":78,"url":79},"wordpress%e3%81%ab%e3%82%a4%e3%83%b3%e3%82%b9%e3%82%bf%e3%82%b0%e3%83%a9%e3%83%a0%e3%81%ae%e6%8a%95%e7%a8%bf%e4%b8%80%e8%a6%a7%e3%82%92%e8%a1%a8%e7%a4%ba","概要 簡易的にWordPressにインスタクラムに投稿された写真の一覧を表示させる方法。 ※あらかじめアクセストークンを取得しておく必要があります。 Instagram Graph APIのビジネスアカウントIDとアクセ […]",{"ID":139,"title":140,"post_type":10,"post_type_label":11,"url":141,"date":142,"modified":143,"thumbnail":144,"thumb":144,"tag":395,"slug":152,"excerpt":153},[396,397,398],{"name":60,"slug":61,"url":62},{"name":148,"slug":149,"url":150},{"name":26,"slug":27,"url":28},{"name":400,"slug":401,"url":402,"posts":403},"iPhone","iphone","\u002Ftag\u002Fiphone\u002F",[404],{"ID":405,"title":406,"post_type":10,"post_type_label":11,"url":407,"date":408,"modified":408,"thumbnail":409,"thumb":409,"tag":410,"slug":412,"excerpt":413},815,"iPhoneでウォレットのメインカードを入れ替える","\u002Ftech\u002F815\u002F","2022.12.01","https:\u002F\u002Filr.jp\u002Fuploads\u002F2022\u002F12\u002Fiphone_wallet01.png",[411],{"name":400,"slug":401,"url":402},"iphone%e3%81%a7%e3%82%a6%e3%82%a9%e3%83%ac%e3%83%83%e3%83%88%e3%81%ae%e3%83%a1%e3%82%a4%e3%83%b3%e3%82%ab%e3%83%bc%e3%83%89%e3%82%92%e5%85%a5%e3%82%8c%e6%9b%bf%e3%81%88%e3%82%8b","概要 iPhoneでメインカードを入れ替える方法は２つあります。 ※iOS16.1.1 1.ウォレットアプリでの入れ替え 下になっているカードをタップしながら真ん中に持っていきます。 2.設定からの切り替え 設定を立ち上 […]",{"name":328,"slug":329,"url":330,"posts":415},[416,421,436,445,458,472,482,491,500,504,516,526,534,541,563,569,574,585,595,604,614],{"ID":319,"title":320,"post_type":10,"post_type_label":11,"url":321,"date":322,"modified":322,"thumbnail":323,"thumb":323,"tag":417,"slug":331,"excerpt":332},[418,419,420],{"name":110,"slug":111,"url":112},{"name":191,"slug":192,"url":193},{"name":328,"slug":329,"url":330},{"ID":422,"title":423,"post_type":10,"post_type_label":11,"url":424,"date":425,"modified":426,"thumbnail":427,"thumb":427,"tag":428,"slug":434,"excerpt":435},2179,"Vueコンポーネント一括インポート","\u002Ftech\u002F2179\u002F","2024.06.25","2026.06.16","https:\u002F\u002Filr.jp\u002Fuploads\u002F2024\u002F06\u002Ftech2179-thumbnail-1200x675.png",[429,430],{"name":328,"slug":329,"url":330},{"name":431,"slug":432,"url":433},"Vue","vue","\u002Ftag\u002Fvue\u002F","vue%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e4%b8%80%e6%8b%ac%e3%82%a4%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%88","概要 個別にインポートしているコンポーネントを、一括で読み込むようにします。 施策 プラグイン作成 src\u002Fplugins\u002FcomponentsLoader.js componentsフォルダ内のvue拡張子のファイルを […]",{"ID":437,"title":438,"post_type":10,"post_type_label":11,"url":439,"date":440,"modified":371,"thumbnail":15,"thumb":15,"tag":441,"slug":443,"excerpt":444},1942,"Intersection Observerでスクロールで要素の状態を変化させる","\u002Ftech\u002F1942\u002F","2023.12.20",[442],{"name":328,"slug":329,"url":330},"intersection-observer%e3%81%a7%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%81%a7%e8%a6%81%e7%b4%a0%e3%81%ae%e7%8a%b6%e6%85%8b%e3%82%92%e5%a4%89%e5%8c%96%e3%81%95%e3%81%9b%e3%82%8b","概要 スクロールに合わせて、タイトルや画像をふわっと表示させたい時は、スクロールイベントを設定して実装していましたが、Intersection Observerを使用することでシンプルに実装できます。 施策 HTML ペ […]",{"ID":446,"title":447,"post_type":10,"post_type_label":11,"url":448,"date":449,"modified":371,"thumbnail":15,"thumb":15,"tag":450,"slug":456,"excerpt":457},1895,"SVG内の要素にfilterを適応させる","\u002Ftech\u002F1895\u002F","2023.11.16",[451,452],{"name":328,"slug":329,"url":330},{"name":453,"slug":454,"url":455},"SVG","svg","\u002Ftag\u002Fsvg\u002F","svg%e5%86%85%e3%81%ae%e8%a6%81%e7%b4%a0%e3%81%abfilter%e3%82%92%e9%81%a9%e5%bf%9c%e3%81%95%e3%81%9b%e3%82%8b","概要 CSSでSVG内にある要素にfilterを適応させようとすると、なぜかSafariで見ると適応されません。 静的なSVGだとdefsタグ内に設定するだけで良いのですが、動的にSVG内を変更したい場合などは適応するこ […]",{"ID":459,"title":460,"post_type":10,"post_type_label":11,"url":461,"date":462,"modified":143,"thumbnail":463,"thumb":463,"tag":464,"slug":470,"excerpt":471},1831,"JavaScriptで擬似要素を操作する","\u002Ftech\u002F1831\u002F","2023.08.07","https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F08\u002Fimg_before_after.webp",[465,466],{"name":328,"slug":329,"url":330},{"name":467,"slug":468,"url":469},"擬似要素","pseudo-element","\u002Ftag\u002Fpseudo-element\u002F","javascript%e3%81%a7%e6%93%ac%e4%bc%bc%e8%a6%81%e7%b4%a0%e3%82%92%e6%93%8d%e4%bd%9c%e3%81%99%e3%82%8b","概要 JavaScriptで擬似要素(:before、:after)を操作します。 取得 HTML CSS JavaScript 変更 JavaScript",{"ID":473,"title":474,"post_type":10,"post_type_label":11,"url":475,"date":476,"modified":143,"thumbnail":477,"thumb":477,"tag":478,"slug":480,"excerpt":481},1827,"2点間の緯度・経度の距離を求める","\u002Ftech\u002F1827\u002F","2023.08.06","https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F08\u002Fimg_markers.webp",[479],{"name":328,"slug":329,"url":330},"2%e7%82%b9%e9%96%93%e3%81%ae%e7%b7%af%e5%ba%a6%e3%83%bb%e7%b5%8c%e5%ba%a6%e3%81%ae%e8%b7%9d%e9%9b%a2%e3%82%92%e6%b1%82%e3%82%81%e3%82%8b","概要 2点間の緯度・経度の距離を求めます。直線の距離なので、Googleマップなどの経路の距離ではないので注意が必要です。 参考文献 スクリプト 出力",{"ID":483,"title":484,"post_type":10,"post_type_label":11,"url":485,"date":476,"modified":371,"thumbnail":486,"thumb":486,"tag":487,"slug":489,"excerpt":490},1814,"JavaScriptで現在地を取得する","\u002Ftech\u002F1814\u002F","https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F08\u002Fimg_marker.webp",[488],{"name":328,"slug":329,"url":330},"javascript%e3%81%a7%e7%8f%be%e5%9c%a8%e5%9c%b0%e3%82%92%e5%8f%96%e5%be%97%e3%81%99%e3%82%8b","概要 JavaScriptの関数Geolocation: getCurrentPosition()で現在地を取得します。 スクリプト 出力 テスト 現在地情報の取得を許可すると表示されます。",{"ID":492,"title":493,"post_type":10,"post_type_label":11,"url":494,"date":495,"modified":495,"thumbnail":15,"thumb":15,"tag":496,"slug":498,"excerpt":499},1807,"コロン(:)の入った要素や属性の情報を取得する","\u002Ftech\u002F1807\u002F","2023.08.04",[497],{"name":328,"slug":329,"url":330},"%e3%82%b3%e3%83%ad%e3%83%b3%e3%81%ae%e5%85%a5%e3%81%a3%e3%81%9f%e8%a6%81%e7%b4%a0%e3%82%84%e5%b1%9e%e6%80%a7%e3%81%ae%e6%83%85%e5%a0%b1%e3%82%92%e5%8f%96%e5%be%97%e3%81%99%e3%82%8b","概要 XMLなどを読み込んだ際、コロン(:)がついた要素や属性がある場合に取得する方法です。 取得方法 コロン(:)の前にバックスラッシュ(\\)を2つ入れます。 要素 属性",{"ID":367,"title":368,"post_type":10,"post_type_label":11,"url":369,"date":370,"modified":371,"thumbnail":372,"thumb":372,"tag":501,"slug":376,"excerpt":377},[502,503],{"name":191,"slug":192,"url":193},{"name":328,"slug":329,"url":330},{"ID":505,"title":506,"post_type":10,"post_type_label":11,"url":507,"date":86,"modified":86,"thumbnail":15,"thumb":15,"tag":508,"slug":514,"excerpt":515},1754,"日付のフォーマットを変更する","\u002Ftech\u002F1754\u002F",[509,510],{"name":328,"slug":329,"url":330},{"name":511,"slug":512,"url":513},"日付","date","\u002Ftag\u002Fdate\u002F","%e6%97%a5%e4%bb%98%e3%81%ae%e3%83%95%e3%82%a9%e3%83%bc%e3%83%9e%e3%83%83%e3%83%88%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%99%e3%82%8b","概要 この関数を知らなかったのでメモ。 Date.prototype.toLocaleDateString() 内容 何も指定しない場合 言語コード指定 アメリカ 日本 オプションを指定 曜日を表示 年月日を日本語表記に […]",{"ID":517,"title":518,"post_type":10,"post_type_label":11,"url":519,"date":520,"modified":143,"thumbnail":521,"thumb":521,"tag":522,"slug":524,"excerpt":525},1712,"数字に3桁ずつ、カンマを入れる","\u002Ftech\u002F1712\u002F","2023.07.19","https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F07\u002Fimg_comma.webp",[523],{"name":328,"slug":329,"url":330},"%e6%95%b0%e5%ad%97%e3%81%ab3%e6%a1%81%e3%81%9a%e3%81%a4%e3%80%81%e3%82%ab%e3%83%b3%e3%83%9e%e3%82%92%e5%85%a5%e3%82%8c%e3%82%8b","概要 価格表示する際の数値、「10000」を「10,000」のように、数字に3桁ずつカンマの入った文字列に変換する関数 スクリプト 使用方法",{"ID":527,"title":528,"post_type":10,"post_type_label":11,"url":529,"date":520,"modified":520,"thumbnail":15,"thumb":15,"tag":530,"slug":532,"excerpt":533},1708,"ゼロパディング","\u002Ftech\u002F1708\u002F",[531],{"name":328,"slug":329,"url":330},"%e3%82%bc%e3%83%ad%e3%83%91%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0","概要 ゼロパディングとは、画面や帳票などで数値を表現する際、書式で指定した桁数に満たない部分をゼロで埋めることである。 ゼロパディングの「パディング」には埋める、詰め物をするといった意味がある。 ゼロパディングは、例えば […]",{"ID":535,"title":328,"post_type":10,"post_type_label":11,"url":536,"date":537,"modified":520,"thumbnail":15,"thumb":15,"tag":538,"slug":329,"excerpt":540},1061,"\u002Ftech\u002F1061\u002F","2023.05.18",[539],{"name":328,"slug":329,"url":330},"カンマが入っている文字列を数値に変換 概要 価格表示する際の、「10,000」を「10000」のように数値に変換する関数 スクリプト 使用方法 改行コードを＜BR＞に変換 概要 改行コードを＜BR＞に変換 スクリプト 使 […]",{"ID":542,"title":543,"post_type":10,"post_type_label":11,"url":544,"date":37,"modified":425,"thumbnail":545,"thumb":545,"tag":546,"slug":561,"excerpt":562},1047,"Vue.jsで暗号化・復号化を実装する","\u002Ftech\u002F1047\u002F","https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F05\u002Fvuejs.png",[547,548,549,553,557],{"name":328,"slug":329,"url":330},{"name":431,"slug":432,"url":433},{"name":550,"slug":551,"url":552},"プラグイン","plugin","\u002Ftag\u002Fplugin\u002F",{"name":554,"slug":555,"url":556},"復号化","decryption","\u002Ftag\u002Fdecryption\u002F",{"name":558,"slug":559,"url":560},"暗号化","encryption","\u002Ftag\u002Fencryption\u002F","vue-js%e3%81%a7%e6%9a%97%e5%8f%b7%e5%8c%96%e3%83%bb%e8%a4%87%e5%90%88%e5%8c%96%e3%82%92%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b","概要 下記githubのソースをもとにVue.js用にプラグイン化しました。 https:\u002F\u002Fgist.github.com\u002FAgoreddah\u002F511864e2c00da064586523b3087c30e2 ソース  […]",{"ID":39,"title":40,"post_type":10,"post_type_label":11,"url":564,"date":41,"modified":371,"thumbnail":15,"thumb":15,"tag":565,"slug":567,"excerpt":568},"\u002Ftech\u002F976\u002F",[566],{"name":328,"slug":329,"url":330},"hlshttp-live-streaming%e5%8b%95%e7%94%bb%e3%82%92%e5%86%8d%e7%94%9f%e3%81%99%e3%82%8b","概要 HLS(HTTP Live Streaming)フォーマットの動画をWEBで再生する方法 HLSに変換 hls.jsを読み込み VIDEOタグ スクリプト",{"ID":345,"title":346,"post_type":10,"post_type_label":11,"url":347,"date":348,"modified":349,"thumbnail":15,"thumb":15,"tag":570,"slug":357,"excerpt":358},[571,572,573],{"name":340,"slug":341,"url":342},{"name":328,"slug":329,"url":330},{"name":354,"slug":355,"url":356},{"ID":575,"title":576,"post_type":10,"post_type_label":11,"url":577,"date":578,"modified":579,"thumbnail":580,"thumb":580,"tag":581,"slug":583,"excerpt":584},917,"ページのスクロールされている割合を表示させる","\u002Ftech\u002F917\u002F","2023.01.04","2023.01.05","https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F01\u002Fpage-scroll-position-1200x737.png",[582],{"name":328,"slug":329,"url":330},"%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ae%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%81%95%e3%82%8c%e3%81%a6%e3%81%84%e3%82%8b%e5%89%b2%e5%90%88%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8b","概要 このサイトのヘッダーでも実装している、スクロールされている割合をページに表示させるJavaScriptを実装します。 ソース 解説 スクロール位置をwindow.scrollTop()で取得できるようにしています。 […]",{"ID":586,"title":587,"post_type":10,"post_type_label":11,"url":588,"date":589,"modified":590,"thumbnail":15,"thumb":15,"tag":591,"slug":593,"excerpt":594},893,"マウスチェイサー","\u002Ftech\u002F893\u002F","2022.12.29","2024.01.14",[592],{"name":328,"slug":329,"url":330},"%e3%83%9e%e3%82%a6%e3%82%b9%e3%83%81%e3%82%a7%e3%82%a4%e3%82%b5%e3%83%bc","概要 マウスの動きに追随する、マウスチェイサー（英語にしただけ^^）を実装します。マウスに近づくにつれてゆっくり動くようにするのと、リンクにマウスオーバーで変形するようにもします。 ソース 解説 mp関数はマウスの座標を […]",{"ID":596,"title":597,"post_type":10,"post_type_label":11,"url":598,"date":599,"modified":371,"thumbnail":15,"thumb":15,"tag":600,"slug":602,"excerpt":603},868,"JavaScriptで円運動","\u002Ftech\u002F868\u002F","2022.12.14",[601],{"name":328,"slug":329,"url":330},"javascript%e3%81%a7%e5%86%86%e9%81%8b%e5%8b%95","概要 JavaScriptで円を描くように要素が移動するアニメーションを実装します。 サンプル ソース 解説 x軸はCOSカーブ、y軸をSINカーブで実装します。degは角度、rは半径になります。",{"ID":605,"title":606,"post_type":10,"post_type_label":11,"url":607,"date":608,"modified":53,"thumbnail":609,"thumb":609,"tag":610,"slug":612,"excerpt":613},210,"ページ内スクロール","\u002Ftech\u002F210\u002F","2021.09.09","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F09\u002Fimg_page-scroll-1.png",[611],{"name":328,"slug":329,"url":330},"%e3%83%9a%e3%83%bc%e3%82%b8%e5%86%85%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab","今回はページ内スクロールのリンクとページトップへのスクロールボタンを作成します。 ページ内スクロール HTML CSS ページトップボタン HTML CSS JavaScript 解説 a[href^=”#& […]",{"ID":615,"title":616,"post_type":10,"post_type_label":11,"url":617,"date":618,"modified":53,"thumbnail":619,"thumb":619,"tag":620,"slug":622,"excerpt":623},201,"ハンバーガメニュー","\u002Ftech\u002F201\u002F","2021.08.29","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F08\u002Fimg_hamburger-menu-1.png",[621],{"name":328,"slug":329,"url":330},"%e3%83%8f%e3%83%b3%e3%83%90%e3%83%bc%e3%82%ac%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc","今回はハンバーガーメニューを作成します。 ヘッダーにハンバーガーメニュー配置 メニューを開いた状態 1.ハンバーガーメニュー部分 HTMLメニュー用にaタグを作成してその中にdivタグを追加しています。 CSSaタグはク […]",{"name":354,"slug":355,"url":356,"posts":625},[626],{"ID":345,"title":346,"post_type":10,"post_type_label":11,"url":347,"date":348,"modified":349,"thumbnail":15,"thumb":15,"tag":627,"slug":357,"excerpt":358},[628,629,630],{"name":340,"slug":341,"url":342},{"name":328,"slug":329,"url":330},{"name":354,"slug":355,"url":356},{"name":18,"slug":19,"url":20,"posts":632},[633],{"ID":8,"title":9,"post_type":10,"post_type_label":11,"url":12,"date":13,"modified":14,"thumbnail":15,"thumb":15,"tag":634,"slug":29,"excerpt":30},[635,636,637],{"name":18,"slug":19,"url":20},{"name":22,"slug":23,"url":24},{"name":26,"slug":27,"url":28},{"name":22,"slug":23,"url":24,"posts":639},[640],{"ID":8,"title":9,"post_type":10,"post_type_label":11,"url":12,"date":13,"modified":14,"thumbnail":15,"thumb":15,"tag":641,"slug":29,"excerpt":30},[642,643,644],{"name":18,"slug":19,"url":20},{"name":22,"slug":23,"url":24},{"name":26,"slug":27,"url":28},{"name":26,"slug":27,"url":28,"posts":646},[647,657,662],{"ID":648,"title":649,"post_type":10,"post_type_label":11,"url":650,"date":651,"modified":143,"thumbnail":652,"thumb":652,"tag":653,"slug":655,"excerpt":656},1803,"Node.jsのバージョン管理","\u002Ftech\u002F1803\u002F","2023.08.02","https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F08\u002Fimg_nodejs.webp",[654],{"name":26,"slug":27,"url":28},"node-js%e3%81%ae%e3%83%90%e3%83%bc%e3%82%b8%e3%83%a7%e3%83%b3%e7%ae%a1%e7%90%86","概要 毎回忘れるのでメモです。nodebrewがインストールされていることが前提となります。 コマンド 現在のバージョン確認 インストール可能なバージョン確認 インストールされているバージョン確認 バージョンを指定してイ […]",{"ID":8,"title":9,"post_type":10,"post_type_label":11,"url":12,"date":13,"modified":14,"thumbnail":15,"thumb":15,"tag":658,"slug":29,"excerpt":30},[659,660,661],{"name":18,"slug":19,"url":20},{"name":22,"slug":23,"url":24},{"name":26,"slug":27,"url":28},{"ID":139,"title":140,"post_type":10,"post_type_label":11,"url":141,"date":142,"modified":143,"thumbnail":144,"thumb":144,"tag":663,"slug":152,"excerpt":153},[664,665,666],{"name":60,"slug":61,"url":62},{"name":148,"slug":149,"url":150},{"name":26,"slug":27,"url":28},{"name":668,"slug":668,"url":669,"posts":670},"note","\u002Ftag\u002Fnote\u002F",[671],{"ID":672,"title":673,"post_type":10,"post_type_label":11,"url":674,"date":675,"modified":676,"thumbnail":677,"thumb":677,"tag":678,"slug":681,"excerpt":682},782,"WordPressにnoteの記事一覧を埋め込む","\u002Ftech\u002F782\u002F","2022.11.30","2023.06.14","https:\u002F\u002Filr.jp\u002Fuploads\u002F2022\u002F11\u002Ftit_note-1200x528.png",[679,680],{"name":668,"slug":668,"url":669},{"name":77,"slug":78,"url":79},"wordpress%e3%81%abnote%e3%81%ae%e8%a8%98%e4%ba%8b%e4%b8%80%e8%a6%a7%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b","概要 noteのRSSを読み込んでWordPressに埋め込む方法 APIへのアクセスを減らすためTransients APIを使用して一時保存する noteのRSS RSSのURLはクリエーターページのプロフィールエリ […]",{"name":73,"slug":74,"url":75,"posts":684},[685],{"ID":65,"title":66,"post_type":10,"post_type_label":11,"url":67,"date":68,"modified":68,"thumbnail":69,"thumb":69,"tag":686,"slug":80,"excerpt":81},[687,688,689],{"name":60,"slug":61,"url":62},{"name":73,"slug":74,"url":75},{"name":77,"slug":78,"url":79},{"name":91,"slug":92,"url":93,"posts":691},[692,697,703,718,724,735],{"ID":304,"title":305,"post_type":10,"post_type_label":11,"url":306,"date":307,"modified":308,"thumbnail":309,"thumb":309,"tag":693,"slug":314,"excerpt":315},[694,695,696],{"name":299,"slug":300,"url":301},{"name":91,"slug":92,"url":93},{"name":77,"slug":78,"url":79},{"ID":83,"title":84,"post_type":10,"post_type_label":11,"url":85,"date":86,"modified":86,"thumbnail":87,"thumb":87,"tag":698,"slug":99,"excerpt":100},[699,700,701,702],{"name":60,"slug":61,"url":62},{"name":91,"slug":92,"url":93},{"name":77,"slug":78,"url":79},{"name":96,"slug":97,"url":98},{"ID":704,"title":705,"post_type":10,"post_type_label":11,"url":706,"date":707,"modified":707,"thumbnail":708,"thumb":708,"tag":709,"slug":716,"excerpt":717},1717,"WordPressにQiitaの記事一覧を表示する","\u002Ftech\u002F1717\u002F","2023.07.20","https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F07\u002Fimg_qiita-1200x682.webp",[710,711,715],{"name":91,"slug":92,"url":93},{"name":712,"slug":713,"url":714},"Qiita","qiita","\u002Ftag\u002Fqiita\u002F",{"name":77,"slug":78,"url":79},"wordpress%e3%81%abqiita%e3%81%ae%e8%a8%98%e4%ba%8b%e4%b8%80%e8%a6%a7%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b","概要 WordPressにQiitaの記事一覧を表示する方法 ※事前にQiitaのアクセストークンの発行の取得をする必要があります。 検索部分 「qiita_data」の部分はTransients APIで保存するときの […]",{"ID":102,"title":103,"post_type":10,"post_type_label":11,"url":104,"date":105,"modified":105,"thumbnail":106,"thumb":106,"tag":719,"slug":115,"excerpt":116},[720,721,722,723],{"name":60,"slug":61,"url":62},{"name":110,"slug":111,"url":112},{"name":91,"slug":92,"url":93},{"name":77,"slug":78,"url":79},{"ID":725,"title":726,"post_type":10,"post_type_label":11,"url":727,"date":728,"modified":728,"thumbnail":729,"thumb":729,"tag":730,"slug":733,"excerpt":734},1115,"WordPressページネーションを自作する","\u002Ftech\u002F1115\u002F","2023.06.12","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F08\u002Fimg_feed-1.png",[731,732],{"name":91,"slug":92,"url":93},{"name":77,"slug":78,"url":79},"wordpress%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e8%87%aa%e4%bd%9c%e3%81%99%e3%82%8b","概要 このWEBサイトで使用しているページネーション ソース",{"ID":736,"title":737,"post_type":10,"post_type_label":11,"url":738,"date":739,"modified":739,"thumbnail":729,"thumb":729,"tag":740,"slug":745,"excerpt":746},1090,"カスタム投稿タイプのフィードを作成する","\u002Ftech\u002F1090\u002F","2023.05.31",[741,742,743,744],{"name":91,"slug":92,"url":93},{"name":124,"slug":125,"url":126},{"name":77,"slug":78,"url":79},{"name":133,"slug":134,"url":135},"%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e6%8a%95%e7%a8%bf%e3%82%bf%e3%82%a4%e3%83%97%e3%81%ae%e3%83%95%e3%82%a3%e3%83%bc%e3%83%89%e3%82%92%e4%bd%9c%e6%88%90%e3%81%99%e3%82%8b","概要 RSSへのリンクを追加してカスタム投稿タイプのフィードを表示させます。 下記URLでも良いのですが、せっかくなのでリライトルールを使用して独自URLを作成します。 スクリプト リライトルールの反映 WordPres […]",{"name":712,"slug":713,"url":714,"posts":748},[749],{"ID":704,"title":705,"post_type":10,"post_type_label":11,"url":706,"date":707,"modified":707,"thumbnail":708,"thumb":708,"tag":750,"slug":716,"excerpt":717},[751,752,753],{"name":91,"slug":92,"url":93},{"name":712,"slug":713,"url":714},{"name":77,"slug":78,"url":79},{"name":124,"slug":125,"url":126,"posts":755},[756,762,769],{"ID":736,"title":737,"post_type":10,"post_type_label":11,"url":738,"date":739,"modified":739,"thumbnail":729,"thumb":729,"tag":757,"slug":745,"excerpt":746},[758,759,760,761],{"name":91,"slug":92,"url":93},{"name":124,"slug":125,"url":126},{"name":77,"slug":78,"url":79},{"name":133,"slug":134,"url":135},{"ID":35,"title":36,"post_type":10,"post_type_label":11,"url":118,"date":37,"modified":119,"thumbnail":120,"thumb":120,"tag":763,"slug":136,"excerpt":137},[764,765,766,767,768],{"name":60,"slug":61,"url":62},{"name":124,"slug":125,"url":126},{"name":77,"slug":78,"url":79},{"name":129,"slug":130,"url":131},{"name":133,"slug":134,"url":135},{"ID":770,"title":771,"post_type":10,"post_type_label":11,"url":772,"date":773,"modified":774,"thumbnail":729,"thumb":729,"tag":775,"slug":779,"excerpt":780},168,"フィードカスタマイズ","\u002Ftech\u002F168\u002F","2021.08.12","2023.05.30",[776,777,778],{"name":124,"slug":125,"url":126},{"name":77,"slug":78,"url":79},{"name":133,"slug":134,"url":135},"%e3%83%95%e3%82%a3%e3%83%bc%e3%83%89%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba","フィードにカスタム投稿タイプの更新を含める デフォルトではフィードにはカスタム投稿タイプは表示されないので下記を追加します。 フィードのauthorを変更 dc:creatorに表示される内容はログインのときのIDと同じ […]",{"name":453,"slug":454,"url":455,"posts":782},[783],{"ID":446,"title":447,"post_type":10,"post_type_label":11,"url":448,"date":449,"modified":371,"thumbnail":15,"thumb":15,"tag":784,"slug":456,"excerpt":457},[785,786],{"name":328,"slug":329,"url":330},{"name":453,"slug":454,"url":455},{"name":431,"slug":432,"url":433,"posts":788},[789,800,804],{"ID":790,"title":791,"post_type":10,"post_type_label":11,"url":792,"date":425,"modified":68,"thumbnail":793,"thumb":793,"tag":794,"slug":798,"excerpt":799},2186,"【改訂】Vueで暗号化・復号化を実装する","\u002Ftech\u002F2186\u002F","https:\u002F\u002Filr.jp\u002Fuploads\u002F2024\u002F06\u002Ftech2186-thumbnail-1200x675.png",[795,796,797],{"name":431,"slug":432,"url":433},{"name":554,"slug":555,"url":556},{"name":558,"slug":559,"url":560},"%e3%80%90%e6%94%b9%e8%a8%82%e3%80%91vue-js%e3%81%a7%e6%9a%97%e5%8f%b7%e5%8c%96%e3%83%bb%e5%be%a9%e5%8f%b7%e5%8c%96%e3%82%92%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b","概要 Vue.js用の暗号化・復号化のモジュールを作成しました。 ソース 暗号化キーは直接書いても良いですし、.envファイルに設定しても良いと思います。 使用方法 暗号化 復号化",{"ID":422,"title":423,"post_type":10,"post_type_label":11,"url":424,"date":425,"modified":426,"thumbnail":427,"thumb":427,"tag":801,"slug":434,"excerpt":435},[802,803],{"name":328,"slug":329,"url":330},{"name":431,"slug":432,"url":433},{"ID":542,"title":543,"post_type":10,"post_type_label":11,"url":544,"date":37,"modified":425,"thumbnail":545,"thumb":545,"tag":805,"slug":561,"excerpt":562},[806,807,808,809,810],{"name":328,"slug":329,"url":330},{"name":431,"slug":432,"url":433},{"name":550,"slug":551,"url":552},{"name":554,"slug":555,"url":556},{"name":558,"slug":559,"url":560},{"name":77,"slug":78,"url":79,"posts":812},[813,818,823,832,838,843,849,857,861,871,877,884,888,892,897,905,914,924,929],{"ID":65,"title":66,"post_type":10,"post_type_label":11,"url":67,"date":68,"modified":68,"thumbnail":69,"thumb":69,"tag":814,"slug":80,"excerpt":81},[815,816,817],{"name":60,"slug":61,"url":62},{"name":73,"slug":74,"url":75},{"name":77,"slug":78,"url":79},{"ID":304,"title":305,"post_type":10,"post_type_label":11,"url":306,"date":307,"modified":308,"thumbnail":309,"thumb":309,"tag":819,"slug":314,"excerpt":315},[820,821,822],{"name":299,"slug":300,"url":301},{"name":91,"slug":92,"url":93},{"name":77,"slug":78,"url":79},{"ID":824,"title":825,"post_type":10,"post_type_label":11,"url":826,"date":827,"modified":827,"thumbnail":15,"thumb":15,"tag":828,"slug":830,"excerpt":831},1992,"WordPressでサイドバーに目次を表示させる","\u002Ftech\u002F1992\u002F","2024.01.05",[829],{"name":77,"slug":78,"url":79},"wordpress%e3%81%a7%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%81%ab%e7%9b%ae%e6%ac%a1%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8b","概要 このサイトでも使用していますが、記事の内容を目次にしてサイドバーに表示する方法を解説します。 また、スクロール位置がわかりやすいように、目次のリンクがアクティブになるようにします。 プラグイン プラグインインストー […]",{"ID":83,"title":84,"post_type":10,"post_type_label":11,"url":85,"date":86,"modified":86,"thumbnail":87,"thumb":87,"tag":833,"slug":99,"excerpt":100},[834,835,836,837],{"name":60,"slug":61,"url":62},{"name":91,"slug":92,"url":93},{"name":77,"slug":78,"url":79},{"name":96,"slug":97,"url":98},{"ID":704,"title":705,"post_type":10,"post_type_label":11,"url":706,"date":707,"modified":707,"thumbnail":708,"thumb":708,"tag":839,"slug":716,"excerpt":717},[840,841,842],{"name":91,"slug":92,"url":93},{"name":712,"slug":713,"url":714},{"name":77,"slug":78,"url":79},{"ID":102,"title":103,"post_type":10,"post_type_label":11,"url":104,"date":105,"modified":105,"thumbnail":106,"thumb":106,"tag":844,"slug":115,"excerpt":116},[845,846,847,848],{"name":60,"slug":61,"url":62},{"name":110,"slug":111,"url":112},{"name":91,"slug":92,"url":93},{"name":77,"slug":78,"url":79},{"ID":850,"title":851,"post_type":10,"post_type_label":11,"url":852,"date":728,"modified":728,"thumbnail":729,"thumb":729,"tag":853,"slug":855,"excerpt":856},1118,"WP-CLIでWordPressの改ざんチェック","\u002Ftech\u002F1118\u002F",[854],{"name":77,"slug":78,"url":79},"wp-cli%e3%81%a7wordpress%e3%81%ae%e6%94%b9%e3%81%96%e3%82%93%e3%83%81%e3%82%a7%e3%83%83%e3%82%af","概要 WP-CLIを導入することによって、コマンドでWordPressの改ざんチェックを行います。 インストール https:\u002F\u002Fwp-cli.org\u002Fja\u002F wp-cli.pharをダウンロードします。 wp-cli. […]",{"ID":725,"title":726,"post_type":10,"post_type_label":11,"url":727,"date":728,"modified":728,"thumbnail":729,"thumb":729,"tag":858,"slug":733,"excerpt":734},[859,860],{"name":91,"slug":92,"url":93},{"name":77,"slug":78,"url":79},{"ID":862,"title":863,"post_type":10,"post_type_label":11,"url":864,"date":865,"modified":866,"thumbnail":729,"thumb":729,"tag":867,"slug":869,"excerpt":870},1094,"WordPressでauthor名を分からないようにする","\u002Ftech\u002F1094\u002F","2023.06.01","2024.06.26",[868],{"name":77,"slug":78,"url":79},"wordpress%e3%81%a7author%e5%90%8d%e3%82%92%e5%88%86%e3%81%8b%e3%82%89%e3%81%aa%e3%81%84%e3%82%88%e3%81%86%e3%81%ab%e3%81%99%e3%82%8b","概要 WordPressのソースの中にはauthor名表示される箇所があります。そのauthor名から管理画面へログインされる可能性があるのでソースに表示されないようにします。 authorページをリダイレクト \u002F?au […]",{"ID":736,"title":737,"post_type":10,"post_type_label":11,"url":738,"date":739,"modified":739,"thumbnail":729,"thumb":729,"tag":872,"slug":745,"excerpt":746},[873,874,875,876],{"name":91,"slug":92,"url":93},{"name":124,"slug":125,"url":126},{"name":77,"slug":78,"url":79},{"name":133,"slug":134,"url":135},{"ID":35,"title":36,"post_type":10,"post_type_label":11,"url":118,"date":37,"modified":119,"thumbnail":120,"thumb":120,"tag":878,"slug":136,"excerpt":137},[879,880,881,882,883],{"name":60,"slug":61,"url":62},{"name":124,"slug":125,"url":126},{"name":77,"slug":78,"url":79},{"name":129,"slug":130,"url":131},{"name":133,"slug":134,"url":135},{"ID":385,"title":386,"post_type":10,"post_type_label":11,"url":387,"date":159,"modified":231,"thumbnail":388,"thumb":388,"tag":885,"slug":392,"excerpt":393},[886,887],{"name":148,"slug":149,"url":150},{"name":77,"slug":78,"url":79},{"ID":672,"title":673,"post_type":10,"post_type_label":11,"url":674,"date":675,"modified":676,"thumbnail":677,"thumb":677,"tag":889,"slug":681,"excerpt":682},[890,891],{"name":668,"slug":668,"url":669},{"name":77,"slug":78,"url":79},{"ID":155,"title":156,"post_type":10,"post_type_label":11,"url":157,"date":158,"modified":159,"thumbnail":160,"thumb":160,"tag":893,"slug":165,"excerpt":166},[894,895,896],{"name":60,"slug":61,"url":62},{"name":77,"slug":78,"url":79},{"name":129,"slug":130,"url":131},{"ID":898,"title":899,"post_type":10,"post_type_label":11,"url":900,"date":241,"modified":241,"thumbnail":729,"thumb":729,"tag":901,"slug":903,"excerpt":904},451,"プラグイン「Simple CSS」で任意の場所にスタイルシートを書き出したい","\u002Ftech\u002F451\u002F",[902],{"name":77,"slug":78,"url":79},"%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%8csimple-css%e3%80%8d%e3%81%a7%e4%bb%bb%e6%84%8f%e3%81%ae%e5%a0%b4%e6%89%80%e3%81%ab%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88","はじめに 「Simple CSS」というプラグインを使用すると記事ごとにスタイルシートを書くことができるのですが、書き出し場所がheadタグ内になります。 しかし、「barba.js」などでSPA（シングルページアプリケ […]",{"ID":906,"title":907,"post_type":10,"post_type_label":11,"url":908,"date":909,"modified":579,"thumbnail":15,"thumb":15,"tag":910,"slug":912,"excerpt":913},939,"アイキャッチにデフォルト画像を設定","\u002Ftech\u002F939\u002F","2022.01.05",[911],{"name":77,"slug":78,"url":79},"%e3%82%a2%e3%82%a4%e3%82%ad%e3%83%a3%e3%83%83%e3%83%81%e3%81%ab%e3%83%87%e3%83%95%e3%82%a9%e3%83%ab%e3%83%88%e7%94%bb%e5%83%8f%e3%82%92%e8%a8%ad%e5%ae%9a","概要 保存する時にアイキャッチの指定がない場合、指定した画像をアイキャッチとして保存するように設定します。 画像をアップロード アイキャッチに使用したい画像をメディアにアップロード 画像IDを調べる アップロードした画像 […]",{"ID":915,"title":916,"post_type":10,"post_type_label":11,"url":917,"date":918,"modified":53,"thumbnail":919,"thumb":919,"tag":920,"slug":922,"excerpt":923},195,"WordPressカスタムナビゲーション","\u002Ftech\u002F195\u002F","2021.08.28","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F08\u002Fimg_custom-navigation-1.png",[921],{"name":77,"slug":78,"url":79},"wordpress%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3","今回は管理画面で編集できるグローバルメニューをカスタマイズします。 グローバルメニュー 管理画面 メニュー項目を管理画面でカスタマイズすることができます。 1.functions.phpにregister_nav_men […]",{"ID":770,"title":771,"post_type":10,"post_type_label":11,"url":772,"date":773,"modified":774,"thumbnail":729,"thumb":729,"tag":925,"slug":779,"excerpt":780},[926,927,928],{"name":124,"slug":125,"url":126},{"name":77,"slug":78,"url":79},{"name":133,"slug":134,"url":135},{"ID":930,"title":931,"post_type":10,"post_type_label":11,"url":932,"date":933,"modified":53,"thumbnail":934,"thumb":934,"tag":935,"slug":937,"excerpt":938},156,"ログインフォームカスタマイズ","\u002Ftech\u002F156\u002F","2021.08.11","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F08\u002Fwp-loginform-1.png",[936],{"name":77,"slug":78,"url":79},"%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba","WordPressのログインフォームのカスタマイズします。 手順 フック「login_enqueue_scripts」で外部スタイルシートを読み込み 外部スタイルシートでロゴを変更 ロゴのリンク先を変更 1.フック「lo […]",{"name":940,"slug":941,"url":942,"posts":943},"X(旧Twitter)","xtwitter","\u002Ftag\u002Fxtwitter\u002F",[944,956],{"ID":945,"title":946,"post_type":10,"post_type_label":11,"url":947,"date":590,"modified":425,"thumbnail":15,"thumb":15,"tag":948,"slug":954,"excerpt":955},2062,"Xプレミアムでプロフィールページにコミュニティページへのリンクを追加する","\u002Ftech\u002F2062\u002F",[949,950],{"name":940,"slug":941,"url":942},{"name":951,"slug":952,"url":953},"Xプレミアム","xpremium","\u002Ftag\u002Fxpremium\u002F","x%e3%83%97%e3%83%ac%e3%83%9f%e3%82%a2%e3%83%a0%e3%81%a7%e3%83%97%e3%83%ad%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ab%e3%82%b3%e3%83%9f%e3%83%a5%e3%83%8b%e3%83%86%e3%82%a3","概要 Xプレミアムにアップグレードすると、プロフィールページにコミュニティへのリンクを追加することができます。 施策 「コミュニティ」をクリック 自身が作成したコミュニティをクリック 右上の管理ツールをクリック 「コミュ […]",{"ID":957,"title":958,"post_type":10,"post_type_label":11,"url":959,"date":590,"modified":590,"thumbnail":15,"thumb":15,"tag":960,"slug":963,"excerpt":964},2047,"Xプレミアムでプロフィールページのいいねを非表示にする","\u002Ftech\u002F2047\u002F",[961,962],{"name":940,"slug":941,"url":942},{"name":951,"slug":952,"url":953},"x%e3%83%97%e3%83%ac%e3%83%9f%e3%82%a2%e3%83%a0%e3%81%a7%e3%83%97%e3%83%ad%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ae%e3%81%84%e3%81%84%e3%81%ad%e3%82%92%e9%9d%9e%e8%a1%a8","概要 Xプレミアムにアップグレードすると、プロフィールページの「いいね」タブを非表示にすることができます。どこ投稿に「いいね」をしたかを知られないようにしたいときには有効です。 施策 「もっと見る」をクリック 「設定とサ […]",{"name":951,"slug":952,"url":953,"posts":966},[967,971],{"ID":945,"title":946,"post_type":10,"post_type_label":11,"url":947,"date":590,"modified":425,"thumbnail":15,"thumb":15,"tag":968,"slug":954,"excerpt":955},[969,970],{"name":940,"slug":941,"url":942},{"name":951,"slug":952,"url":953},{"ID":957,"title":958,"post_type":10,"post_type_label":11,"url":959,"date":590,"modified":590,"thumbnail":15,"thumb":15,"tag":972,"slug":963,"excerpt":964},[973,974],{"name":940,"slug":941,"url":942},{"name":951,"slug":952,"url":953},{"name":129,"slug":130,"url":131,"posts":976},[977,985,992,1000,1009,1019],{"ID":978,"title":979,"post_type":10,"post_type_label":11,"url":980,"date":177,"modified":119,"thumbnail":120,"thumb":120,"tag":981,"slug":983,"excerpt":984},1934,"【公式】他人のYouTubeのチャンネルIDを調べる","\u002Ftech\u002F1934\u002F",[982],{"name":129,"slug":130,"url":131},"%e3%80%90%e5%85%ac%e5%bc%8f%e3%80%91%e4%bb%96%e4%ba%ba%e3%81%aeyoutube%e3%81%ae%e3%83%81%e3%83%a3%e3%83%b3%e3%83%8d%e3%83%abid%e3%82%92%e8%aa%bf%e3%81%b9%e3%82%8b","概要 以前、他人のYouTubeのチャンネルIDを調べるという記事を書いたのですが、PCのチャンネルページから調べられるようになったので、共有します。 以前の記事 https:\u002F\u002Filr.jp\u002Ftech\u002F48 […]",{"ID":35,"title":36,"post_type":10,"post_type_label":11,"url":118,"date":37,"modified":119,"thumbnail":120,"thumb":120,"tag":986,"slug":136,"excerpt":137},[987,988,989,990,991],{"name":60,"slug":61,"url":62},{"name":124,"slug":125,"url":126},{"name":77,"slug":78,"url":79},{"name":129,"slug":130,"url":131},{"name":133,"slug":134,"url":135},{"ID":993,"title":994,"post_type":10,"post_type_label":11,"url":995,"date":408,"modified":408,"thumbnail":120,"thumb":120,"tag":996,"slug":998,"excerpt":999},825,"YouTubeアプリでフィード(サムネイル)が自動再生されるのを止める","\u002Ftech\u002F825\u002F",[997],{"name":129,"slug":130,"url":131},"youtube%e3%82%a2%e3%83%97%e3%83%aa%e3%81%a7%e3%83%95%e3%82%a3%e3%83%bc%e3%83%89%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e3%81%8c%e8%87%aa%e5%8b%95%e5%86%8d%e7%94%9f%e3%81%95%e3%82%8c%e3%82%8b","概要 YouTubeアプリを起動したときにフィード(サムネイル)が自動で再生されてしまいます。WiFi環境なら問題ないのですが、外出中などに勝手に再生されるのは通信量もかかるので止めるようにします。 操作方法 アプリ右上 […]",{"ID":1001,"title":1002,"post_type":10,"post_type_label":11,"url":1003,"date":1004,"modified":371,"thumbnail":120,"thumb":120,"tag":1005,"slug":1007,"excerpt":1008},765,"YouTube動画のキーワードを調べる","\u002Ftech\u002F765\u002F","2022.11.25",[1006],{"name":129,"slug":130,"url":131},"youtube%e5%8b%95%e7%94%bb%e3%81%ae%e3%82%ad%e3%83%bc%e3%83%af%e3%83%bc%e3%83%89%e3%82%92%e8%aa%bf%e3%81%b9%e3%82%8b","概要 YouTubeの動画がどんなキーワードを指定しているか気になりますよね。そんなキーワードを調べる方法です。 ソースから確認 ソースで確認する場合、キーワードタグで確認することができます。 確認できるフォームを作りま […]",{"ID":1010,"title":1011,"post_type":10,"post_type_label":11,"url":1012,"date":1013,"modified":1014,"thumbnail":120,"thumb":120,"tag":1015,"slug":1017,"excerpt":1018},485,"他人のYouTubeのチャンネルIDを調べる","\u002Ftech\u002F485\u002F","2022.10.29","2026.06.15",[1016],{"name":129,"slug":130,"url":131},"%e4%bb%96%e4%ba%ba%e3%81%aeyoutube%e3%81%ae%e3%83%81%e3%83%a3%e3%83%b3%e3%83%8d%e3%83%abid%e3%82%92%e8%aa%bf%e3%81%b9%e3%82%8b","概要 自分自身のチャンネルIDはYouTube Studio＞カスタマイズ＞基本情報 で確認することができますが、他人のチャンネルでカスタム URLを使用されているチャンネルはチャンネルIDがわかりません。 ソースから確 […]",{"ID":155,"title":156,"post_type":10,"post_type_label":11,"url":157,"date":158,"modified":159,"thumbnail":160,"thumb":160,"tag":1020,"slug":165,"excerpt":166},[1021,1022,1023],{"name":60,"slug":61,"url":62},{"name":77,"slug":78,"url":79},{"name":129,"slug":130,"url":131},{"name":133,"slug":134,"url":135,"posts":1025},[1026,1032,1039],{"ID":736,"title":737,"post_type":10,"post_type_label":11,"url":738,"date":739,"modified":739,"thumbnail":729,"thumb":729,"tag":1027,"slug":745,"excerpt":746},[1028,1029,1030,1031],{"name":91,"slug":92,"url":93},{"name":124,"slug":125,"url":126},{"name":77,"slug":78,"url":79},{"name":133,"slug":134,"url":135},{"ID":35,"title":36,"post_type":10,"post_type_label":11,"url":118,"date":37,"modified":119,"thumbnail":120,"thumb":120,"tag":1033,"slug":136,"excerpt":137},[1034,1035,1036,1037,1038],{"name":60,"slug":61,"url":62},{"name":124,"slug":125,"url":126},{"name":77,"slug":78,"url":79},{"name":129,"slug":130,"url":131},{"name":133,"slug":134,"url":135},{"ID":770,"title":771,"post_type":10,"post_type_label":11,"url":772,"date":773,"modified":774,"thumbnail":729,"thumb":729,"tag":1040,"slug":779,"excerpt":780},[1041,1042,1043],{"name":124,"slug":125,"url":126},{"name":77,"slug":78,"url":79},{"name":133,"slug":134,"url":135},{"name":550,"slug":551,"url":552,"posts":1045},[1046],{"ID":542,"title":543,"post_type":10,"post_type_label":11,"url":544,"date":37,"modified":425,"thumbnail":545,"thumb":545,"tag":1047,"slug":561,"excerpt":562},[1048,1049,1050,1051,1052],{"name":328,"slug":329,"url":330},{"name":431,"slug":432,"url":433},{"name":550,"slug":551,"url":552},{"name":554,"slug":555,"url":556},{"name":558,"slug":559,"url":560},{"name":558,"slug":559,"url":560,"posts":1054},[1055,1060],{"ID":790,"title":791,"post_type":10,"post_type_label":11,"url":792,"date":425,"modified":68,"thumbnail":793,"thumb":793,"tag":1056,"slug":798,"excerpt":799},[1057,1058,1059],{"name":431,"slug":432,"url":433},{"name":554,"slug":555,"url":556},{"name":558,"slug":559,"url":560},{"ID":542,"title":543,"post_type":10,"post_type_label":11,"url":544,"date":37,"modified":425,"thumbnail":545,"thumb":545,"tag":1061,"slug":561,"excerpt":562},[1062,1063,1064,1065,1066],{"name":328,"slug":329,"url":330},{"name":431,"slug":432,"url":433},{"name":550,"slug":551,"url":552},{"name":554,"slug":555,"url":556},{"name":558,"slug":559,"url":560},{"name":96,"slug":97,"url":98,"posts":1068},[1069],{"ID":83,"title":84,"post_type":10,"post_type_label":11,"url":85,"date":86,"modified":86,"thumbnail":87,"thumb":87,"tag":1070,"slug":99,"excerpt":100},[1071,1072,1073,1074],{"name":60,"slug":61,"url":62},{"name":91,"slug":92,"url":93},{"name":77,"slug":78,"url":79},{"name":96,"slug":97,"url":98},{"name":467,"slug":468,"url":469,"posts":1076},[1077],{"ID":459,"title":460,"post_type":10,"post_type_label":11,"url":461,"date":462,"modified":143,"thumbnail":463,"thumb":463,"tag":1078,"slug":470,"excerpt":471},[1079,1080],{"name":328,"slug":329,"url":330},{"name":467,"slug":468,"url":469},{"name":511,"slug":512,"url":513,"posts":1082},[1083],{"ID":505,"title":506,"post_type":10,"post_type_label":11,"url":507,"date":86,"modified":86,"thumbnail":15,"thumb":15,"tag":1084,"slug":514,"excerpt":515},[1085,1086],{"name":328,"slug":329,"url":330},{"name":511,"slug":512,"url":513},{"name":554,"slug":555,"url":556,"posts":1088},[1089,1094],{"ID":790,"title":791,"post_type":10,"post_type_label":11,"url":792,"date":425,"modified":68,"thumbnail":793,"thumb":793,"tag":1090,"slug":798,"excerpt":799},[1091,1092,1093],{"name":431,"slug":432,"url":433},{"name":554,"slug":555,"url":556},{"name":558,"slug":559,"url":560},{"ID":542,"title":543,"post_type":10,"post_type_label":11,"url":544,"date":37,"modified":425,"thumbnail":545,"thumb":545,"tag":1095,"slug":561,"excerpt":562},[1096,1097,1098,1099,1100],{"name":328,"slug":329,"url":330},{"name":431,"slug":432,"url":433},{"name":550,"slug":551,"url":552},{"name":554,"slug":555,"url":556},{"name":558,"slug":559,"url":560},1785309426738]