Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

 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

totto2727

May 21, 2023
Tweet

Other Decks in Programming

Transcript

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

    View full-size slide

  2. ࣗݾ঺հ
    w໊લ౔ాշే ͭͪͩ͸΍ͱ

    wχοΫωʔϜͱͬͱ
    wॴଐגࣜձࣾΏΊΈ
    wීஈ͸ϑϩϯτΤϯυΤϯδχΞ΍ͬͯ·͢
    wझຯ
    w-BQSJÉSFͷ௥͔͚ͬ
    wϒϧʔΞʔΧΠϒ
    !UPUUP

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    w 'SVJUJPO

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide