NotionのURLをWorkersで綺麗にしよう！

Notionは便利ですが、発行されたURLがあまり良くないんですよね…
カスタマイズもできないですし、どうしましょう…

ということで！
Cloudflare WorkersとFruitionというスクリプト生成サイトを活用して、NotionのURL(と一部のスタイル)をカスタマイズしてみよう！

https://stephenou.notion.site/stephenou/Fruition-Free-Open-Source-Toolkit-for-Building-Websites-with-Notion-771ef38657244c27b9389734a9cbff44

Transcript

1. /PUJPOͷ63-ΛXPSLFSTͰ
   ៉ྷʹ͠Α͏ʂ
   

   View Slide

2. ࣗݾ঺հ
   w໊લ౔ాշే ͭͪͩ͸΍ͱ
   
   wχοΫωʔϜͱͬͱ
   wॴଐגࣜձࣾΏΊΈ
   wීஈ͸ϑϩϯτΤϯυΤϯδχΞ΍ͬͯ·͢
   wझຯ
   w-BQSJÉSFͷ௥͔͚ͬ
   wϒϧʔΞʔΧΠϒ
   !UPUUP
   

   View Slide

3. /PUJPOศརͰ͢ΑͶʂ
   w σʔλϕʔε͕͍ͭͨߴػೳϝϞா
   w ৘ใ·ͱΊͯͷʹศརͰ͢
   w 63-ൃߦͯ͠֎෦ʹެ։Ͱ͖·͢
   w ͨͩʜ
   ࣗ෼ͷࣗݾ঺հϖʔδ
   ͪΐͬͱ৘ใ͕ݹ͍ʜ
   ߋ৽αϘͬͯ·ͨ͠
   

   View Slide

4. ൃߦ͞ΕΔ63-͕Θ͔Γʹ͍͘ʜ
   IUUQTUPUUPOPUJPOTJUFUPUUPFGCGCEFBECFED
   w ௕͍͠ϥϯμϜͳ*%ৼΒΕͯΔ͠ʜ
   w ҎԼͷΑ͏ͳಠࣗυϝΠϯͱඥ෇͚͍ͨ
   IUUQTOPUJPOUPUUPQBHF
   

   View Slide

5. $MPVE
   fl
   BSFͳΒ៉ྷʹͰ͖·͢ʂ
   w ඞཁͳ΋ͷ
   w $MPVE
   fl
   BSF؅ཧͷυϝΠϯ
   w ެ։͍ͨ͠/PUJPOͷϖʔδ63-
   w ࢖͏πʔϧ
   
   w 'SVJUJPO
   

   View Slide

6. ΍Δ͜ͱ
   w 'SVJUJPOʹେମॻ͍ͯΔͷͰলུ
   w ֓ཁ
   w $MPVE
   fl
   BSFͷΞΧ΢ϯτ࡞੒ˍυϝΠϯొ࿥ˍҰ෦ઃఆͷมߋ
   w 'SVJUJPOͰ8PSLFSͷεΫϦϓτੜ੒ˍίϐϖ
   w ϫʔΧʔͱެ։༻υϝΠϯͷඥ෇͚
   

   View Slide

7. ࣮ࡍʹ࡞ۀͨ݁͠Ռ͕ͪ͜Β
   IUUQTOPUJPOUPUUPQBHF
   

   View Slide

8. ཪͰ͸Կͯ͠Δͷʁ
   $MPVE
   fl
   BSFͷϓϩΩγ
   ϒϥ΢β
   OPUJPOUPUUPQBHF
   IUUQTUPUUPOPUJPOTJUF
   UPUUPFGCGCEFBE
   CFED
   ͜͜Ͱ/PUJPOͷϖʔδʹ
   εΫϦϓτΛૠೖͨ͠Γɺ
   ϔομʔΛ͍ͬͨ͡Γ
   63-Ҏ֎ʹ΋ϑΥϯτ΍
   ϨΠΞ΢τ΋͍͡ΕΔ
   window.XMLHttpRequest.prototype.open = function() {
   
   
   arguments[1] = arguments[1].replace('${MY_DOMAIN}', 'www.notion.so');
   
   
   return open.apply(this, [].slice.call(arguments));
   
   
   };
   
   
   ͍ΘΏΔϦόʔεϓϩΩγΈ͍ͨͳ͜ͱΛͯ͠Δ
   

   View Slide

9. ར఺
   ҰԠɺࣗલͰϦόʔεϓϩΩγཱͯΕ͹$MPVE
   fl
   BSFͳ͠Ͱಉ౳ͷ͜ͱ͸Մೳ
   w ϦόʔεϓϩΩγʹ૬౰͢ΔॲཧΛ+4Ͱॻ͚Δ
   w %4-Ͱਏ͍໨ʹૺ͏͜ͱ͕ͳ͍
   w ӡ༻΋ηΩϡϦςΟ΋શ෦$MPVE
   fl
   BSFʹ͓೚ͤʂ
   w %04߈ܸͱ͔ূ໌ॻΛࣗಈͰ؅ཧͯ͘͠ΕΔͷָ
   

   View Slide

10. ·ͱΊ
    w 8PSLFS͸8FCΞϓϦҎ֎ʹ΋ɺ৭ʑͳ͜ͱ͕Ͱ͖ΔΑʂ
    w /PUJPOҎ֎ʹ΋63-ͷߏ଄ͱ*%ΛऔಘͰ͖ΔΑ͏ͳαΠτͰ͋Ε͹ࣅͨ
    Α͏ͳ͜ͱ͕Ͱ͖Δ͸ͣ
    w ѱ࣭ͳεΫϦϓτΛ෇Ճ͢Δͱ944ʹͳͬͯ͠·͏ͷͰɺѱ༻ݫې
    

    View Slide