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

LaravelでMarkdownをブラウザに表示する方法

SAW
October 30, 2019

 LaravelでMarkdownをブラウザに表示する方法

Web×PHP TechCafe 10月 の発表資料です。

SAW

October 30, 2019
Tweet

More Decks by SAW

Other Decks in Programming

Transcript

  1. -BSBWFMͰ.BSLEPXOΛ
    ϒϥ΢βʹදࣔ͢Δํ๏
    8FCº1)15FDI$BGF

    4"8

    View full-size slide

  2. XIPBNJ

    w ࢯ໊Ճ౻फҰ࿠ ࡀ

    ‣ େࡕࡏॅɾѪ஌ग़਎
    ‣ ϋϯυϧωʔϜ4"8
    w 4/4ΞΧ΢ϯτ
    ‣ 5XJUUFS!B[VLJ@FBUFS
    ‣ (JU)VCB[VLJQFOHVJO
    w ॴଐגࣜձࣾ.4&/ ೥໨

    2
    FreeBSD
    macOS
    Linux
    Vue.js

    View full-size slide

  3. .BSLEPXOΛ)5.-ʹม׵ͯ͠ૹ৴
    w -BSBWFMͰ.BSLEPXOΛ)5.-ʹม׵ͯ͠Ϗϡʔʹ൓ө͍ͨ͠
    ‣ ྫ.BSLEPXOͰهࣄΛॻ͚ΔϒϩάγεςϜͷ࡞੒
    w 1)1ͷ.BSLEPXOύʔαϥΠϒϥϦcebe/markdownΛಋೖ
    ‣ ෳ਺ͷ.BSLEPXOॻࣜʹରԠ
    5SBEJUJPOBM(JU)VC.BSLEPXO&YUSB
    3

    View full-size slide

  4. 1)1.BSLEPXOύʔαϥΠϒϥϦͷൺֱ
    w DFCFNBSLEPXO
    ‣ ରԠॻࣜ5SBEJUJPOBM(JU)VC.BSLEPXO&YUSB
    w 1)1.BSLEPXO
    ‣ ରԠॻࣜ5SBEJUJPOBM.BSLEPXO&YUSB
    w 1BSTFEPXO
    ‣ ରԠॻࣜ(JU)VC
    4

    View full-size slide

  5. DFCFNBSLEPXOͷಋೖํ๏
    w $PNQPTFSܦ༝ͰΠϯετʔϧ
    ‣ composer require cebe/markdown
    w .BSLEPXOύʔαΫϥεΛಡΈࠐΈ
    ‣ cebe\markdown\Markdown.BSLEPXOͷύʔαΫϥε
    ‣ cebe\markdown\GithubMarkdown(JU)VCॻࣜͷύʔαΫϥε
    ‣ cebe\markdown\MarkdownExtra.BSLEPXO&YUSBॻࣜͷύʔαΫϥε
    5

    View full-size slide

  6. DFCFNBSLEPXOͷར༻ํ๏
    w .BSLEPXOύʔαΫϥεͷಡΈࠐΈ
    ‣ use cebe\markdown\GithubMarkdown;
    w ύʔαΠϯελϯεͷੜ੒
    ‣ new GithubMarkdown();
    w )5.-ܗࣜʹม׵
    ‣ $parser->parse($markdown);
    6
    use cebe\markdown\GithubMarkdown;
    public class Md2Html
    {
    public static function convert($md)
    {
    $parser = new GithubMarkdown();
    return $parser->parse($md);
    }
    }

    View full-size slide

  7. ม׵݁ՌΛϏϡʔʹ൓ө
    w #MBEFϑΝΠϧʹม׵಺༰ΛຒΊࠐΈ
    ‣ $parser->parse($md)͸)5.-ܗࣜͷจࣈྻΛฦ٫
    ‣ {!! !!}Ͱ)5.-ͷΤεέʔϓΛ๷ࢭ
    7
    {!! $html !!}


    Laravel
    CakePHP
    FuelPHP


    View full-size slide

  8. .BSLEPXOύʔαͷར༻ྫ
    w .BSLEPXOͰهࣄΛฤू͢ΔϒϩάγεςϜ
    8
    Laravel
    ฤू
    ౤ߘɾϓϨϏϡʔ
    อଘ
    NE

    औಘ
    NE

    ม׵
    IUNM

    ౤ߘ಺༰ͷ
    Ϗϡʔ
    ΫϥΠΞϯτ
    %#
    औಘ
    NE

    ฤूը໘

    View full-size slide

  9. ιʔείʔυྫ
    9
    class Article extends Model
    {
    public function getBodyAttribute($value)
    {
    $parser = new GithubMarkdown();
    $this->attributes[‘body’] =
    $parser->parse($value);
    }
    }
    class ArticleController extends Controller
    {
    public function index(Request $req, $id)
    {
    $article = Article::find($id);
    return view(‘article’, [
    ‘article’ => $article
    ]);
    }
    }

    {{ $article->title }}


    {!! $article->body !!}

    View full-size slide

  10. ·ͱΊ
    w 1)1ͷ.BSLEPXOύʔαDFCFNBSLEPXOͷ঺հ
    ‣ ෳ਺ͷॻࣜʹରԠՄ
    w -BSBWFM΁ͷಋೖํ๏ͱར༻ํ๏Λઆ໌
    ‣ ରԠ͢Δ.BSLEPXOύʔαͷछྨ
    ‣ .BSLEPXO͔Β)5.-΁ม׵͢Δํ๏
    10

    View full-size slide

  11. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View full-size slide