質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Markdown

Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

Q&A

解決済

2回答

907閲覧

マークダウンを外して投稿一覧を表示する

AkiYanagimoto

総合スコア5

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Markdown

Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

0グッド

0クリップ

投稿2019/12/30 13:58

前提・実現したいこと

Qiitaの様なナレッジベースサイトを作っています。すでに、新規のコンテンツ投稿時にマークダウン形式で入力ができる機能を実装できています。

現在、投稿の「一覧」を表示するページを製作中にて、マークダウンを外したテキストを表示させたいのですが、どう実装すれば良いのかわからず、困っています

以下の、マークダウンをつける方は、無事に実装済みです。

  • マークダウンへの変換にはmarked.jsを導入
  • 入力時のリアルタイムプレビューも実装
  • マークダウンの付いたオリジナルテキストをデータベースへ保存
  • 投稿記事の詳細ページでは、データベースから呼び出した後にhtml化して画面に表示させる

イメージ説明
イメージ説明

発生している問題・エラーメッセージ

現状は、以下の画像の通りで、マークダウンの特殊記号が付いたテキストをそのまま返しています。

イメージ説明

マークダウンを外すモジュールには、remove-markdown.jsを使用しており、jsファイルに直打ちでマークダウンの付いたテキストを入れると、マークダウンが外れた状態で表示されるので、モジュール自体は問題なく動作しています。

必要なのは、投稿の一覧を表示するviewファイルから、モジュールのコードのあるjsファイルまでテキストを投げてあげて、マークダウンを外したテキストを、再び一覧のviewファイルに戻してあげるということだと思うのですが、実装の方法がよくわかりません。

該当のソースコード

一覧を表示させるページです。 @foreach ($posts as $post)で、投稿毎にボディテキスト、タイトル、投稿日時などを表示させています。

この投稿一件ごとの処理の間( @foreach の中)で、ボディテキストを取得して、マークダウンを外す処理を入れてあげる様なイメージをしているのですが、この途中でスクリプトを書き込む(インナースクリプト?)ことは問題ないのでしょうか? 

全く別のやり方、例えば文章全体をロードした後に、全部からマークダウンを外す処理を全部にかける?とかがあるでしょうか。教えていただけると嬉しいです。

php

1@extends('layouts.app') 2 3@section('content') 4 <div class="container mt-4"> 5 6 <div class="mb-4"> 7 <a href="{{ route('posts.create') }}" class="btn btn-primary"> 8 投稿を新規作成する 9 </a> 10 </div> 11 12 @foreach ($posts as $post) 13 <div class="card mb-4"> 14 <div class="card-header"> 15 タイトル: {{ $post->title }} 16 投稿者: 17 <a href="{{ route('users.show', ['username' => $post->user->name]) }}"> 18 {{ $post->user->name }} 19 </a> 20 </div> 21 22 <div class="card-body"> 23 <p class="card-text"> 24 {{-- 投稿のボディテキストの一部を表示させている --}} 25 <li> {{ \Illuminate\Support\Str::limit($post->body, 140) }} 26 </p> 27 28 {{-- <script> 29 ここら辺で、remove-markdown.jsを呼び出しているjsファイルへテキストを投げて、結果を受け取る処理を入れるイメージでしょうか? 30 </script> --}} 31 32 33 <a class="card-link" href="{{ route('posts.show', ['post' => $post]) }}"> 34 続きを読む 35 </a> 36 <p class="card-text"> 37 @foreach ($post->tags as $tag) 38 <a href="{{ route('tags.show', ['id' => $tag]) }}"> 39 #{{ $tag->name }} 40 </a> 41 @endforeach 42 </p> 43 </div> 44 45 <div class="card-footer"> 46 <span class="mr-2"> 47 投稿日時 {{ $post->created_at->format('Y.m.d') }} 48 </span> 49 @if ($post->comments->count()) 50 <span class="badge badge-primary"> 51 コメント {{ $post->comments->count() }}52 </span> 53 @endif 54 </div> 55 56 </div> 57 @endforeach 58 59 {{-- ページネーション --}} 60 <div class="d-flex justify-content-center mb-5"> 61 {{ $posts->links() }} 62 </div> 63 64 </div> 65@endsection 66 67 68@section('javascript-footer') 69 {{-- この場所に画面毎(フッタ位置)のjsを記述する --}} 70@endsection 71

補足情報(FW/ツールのバージョンなど)

Laravel6のフレームワークを使用しています、表側はjQuery(javascript)で実装しています。マークダウンとリマークダウンでは以下のモジュールを使用しています。

どうぞよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

いったんマークダウン記法をパーサでHTMLにした後、PHP の strip_tags() で html を取り除けば良いと思います。

https://www.php.net/manual/ja/function.strip-tags.php

投稿2019/12/31 02:30

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AkiYanagimoto

2019/12/31 14:30

なるほど!そういう発想もあるんですね。strip_tags()知りませんでした、ありがとうございます!
guest

0

ベストアンサー

この投稿一件ごとの処理の間( @foreach の中)で、ボディテキストを取得して、マークダウンを外す処理を入れてあげる様なイメージをしているのですが、この途中でスクリプトを書き込む(インナースクリプト?)ことは問題ないのでしょうか? 

ビューの中でロジックをガリガリ書くのは可読性が悪くなるので
データ取得時、コントローラ内で置換しては如何でしょうか。
ただ、確かに2回回すことになるのでパフォーマンス面が気になるのは分からなくもないですが、
一覧取得だけであればそう一気に何万件も表示させるわけではないでしょうし。
(いずれにしても共通の処理関数作ることになりそうなので、ビューのループ内でその関数通すのもありと言えばあり)

teratailも20件ずつの表示ですし、何なら同じようにタイトルだけ表示にして
そもそも置換するという作業をしなくても良いようにする、、、、というのも
設計段階で考えても良いように思います。
要は「一覧で中も表示させてどれだけのメリットがあるか」というのを突き詰めることですね。
teratailは「タイトルだけでどういう要件が伝わるようにしよう」というのがガイドラインにあるので
表示させないようになってると思います。(正確には”なった”。以前は質問本文冒頭が表示されていた)

投稿2019/12/30 20:09

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AkiYanagimoto

2019/12/31 14:31

// 一覧取得だけであればそう一気に何万件も表示させるわけではないでしょうし。 (いずれにしても共通の処理関数作ることになりそうなので、ビューのループ内でその関数通すのもありと言えばあり) 心配していた、パフォーマンスへの影響に付いてアドバイス頂けたので、ホッとしました。view内で外部ファイルに書いた処理関数を呼び出す形で実装しようと思います。 // 要は「一覧で中も表示させてどれだけのメリットがあるか」というのを突き詰めることですね。 そうですね、その辺りから、必要性は考えてみたほうがいいかもしれませんね。俯瞰的なアドバイスをありがとうございました!!
m.ts10806

2019/12/31 14:34

> view内で外部ファイルに書いた処理関数を呼び出す形で実装しようと思います。 「ありといえばあり」という表現の裏側を伝えてなかったのでこちらも悪いのですが、 「やりやすそうだからと安易に選択しない方が良い」という意味合いもあります。 結局のところ、あまりviewにロジックを書くのは悪手です。
AkiYanagimoto

2019/12/31 14:46

そういうことでしたか・・・勘違いしてしまいました。 >コントローラー内で置換するとは、どういうことでしょうか?コントローラーから直接jsファイルにデータを投げて処理、その後viewへ渡す、みたいなことですか?
AkiYanagimoto

2020/01/01 09:51

一度、解決済みとしてしまいましたが、全くできていませんでした。 一覧表示のviewファイル(index.blade.php)の冒頭にて、一度に表示させる10件分の投稿データ($posts)をjson形式でjsファイル(jquery.plaintext.js)へ渡し、jsファイル内でマークダウンを外す処理をした後、再びviewファイルへ戻すというやり方でトライしています。コードは以下の様な形です。 // index.blade.php @section('javascript-head') {{-- この場所に画面毎(ヘッダ位置)のjsを記述する --}} <script> const markdown = @json($posts); </script> <script src="{{ asset('js/assets/jquery.plaintext.js') }}" defer></script> @endsection //jquery.plaintext.js' const removeMd = require('remove-markdown'); //remove-markdown.jsの呼び出し // postsからpostを取り出し、bodyにremoveMdをかけて加工し、再びpostオブジェクトに戻す $(function () { const posts = markdown.data; // index.blade.phpから10件分の投稿データを受け取る posts.forEach(function (post) { post.body = removeMd(post.body); }); console.log(posts); // ここから、index.blade.phpへ配列を戻す方法がわからない }) console.log(posts);で、マークダウンを外したplain textまで戻せているんですが、ここから、index.blade.phpへ配列を戻す方法がよくわかりません・・・。
m.ts10806

2020/01/01 10:40

ひとまず「受付中」に戻しておいてください。
AkiYanagimoto

2020/01/01 12:11 編集

すみません。teratailに質問するのも初めてなど素人なもので。「受付中」に戻す方法がわからず・・・。必要であれば、別立てで質問を投稿し直します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問