Larabergてきとう和訳

にきろぐ

2020年12月28日 23:57

php artisan migratehttps://github.com/VanOns/laraberg

頭が悪いので英語の文章を読みながら理解ができない。

英語自体はふわっと読めるけど、PHPの理解が同時並行できない感じ。。。
ASDかADHDの関係で並列処理ができないのでしょう。

では以下貼り付け。

Deeplさんがほんとまじもういい仕事してくれるのでDeeplさん大好き

あと、本当に適当だから怒らないでください。0円だし。

インストール

コンポーザーでパッケージインストール

composer require van-ons/laraberg

venderファイルを追加

php artisan vendor:publish --provider="VanOns\Laraberg\LarabergServiceProvider"

gutenbergのデータを保存するためにマイグレーション

php artisan migrate

'lb_contents'と'lb_blocks'ってテーブルがDBにできたよ！

JSとCSS

larabergすんなら以下のファイルを読み込んでね〜

<link rel="stylesheet" href="{{asset('vendor/laraberg/css/laraberg.css')}}">
<script src="{{ asset('vendor/laraberg/js/laraberg.js') }}"></script>

依存関係にあるファイル

GutenbergはReact、ReactDom、Moment、jQueryが動くことが前提。
環境の用意がなかったら、とりま次の行を追加してね。

<script src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>

更新について

laraverg更新したい時は、venderファイルをもっかい公開しなおしてね。
そのためのコマンドは以下

php artisan vendor:publish --provider="VanOns\Laraberg\LarabergServiceProvider" --tag="public" --force

使い方

まずはエディターのイニシャライズ

larabergはテキストエリアを以下のものに置き換えてね。submitすると入力したコンテンツはvalueに格納されるよ。

<textarea id="[id_here]" name="[name_here]" hidden></textarea>

すでに登録されいるコンテンツを呼び出すためにはtextareaの中身を以下のように設定してね。

<textarea id="[id_here]" name="[name_here]" hidden>{{$model->getRawContent()}}</textarea>

エディターを初期化するには、textareaに設定したidを指定してイニシャライズする（init()）だけ。DOMContentLoadedイベントの中で使えばいんじゃないかな。

Laraberg.init('[id_here]')

はいこれで初期設定終わり。
laravelでGutenbergエディターが使えるようになります。

コンテンツをエディターに設置

JSを使えばエディターにコンテンツを設定できるよ。

Laraberg.setContent('content')

オプション設定

イニシャライズ関数（init()）でオプション設定ができます。laravergの動作設定の変更などもこれでできます。

const options = {}
Laraberg.init('[id_here]', options)

オプションの中身はこんな感じ（テーブル貼れないので以下のリンクから見てね）

Larabergはモデルにコンテンツを追加するために、'Gutenbergable'という特性を提供しているよ。これでモデルに複数のアトリビュートが追加され、Gutenbergでのコンテンツの作成/更新/レンダリングに役立つよ

Gutenbergableのメソッドの名前をリネームする

既に用意してあるモデルにGutenbergableメソッドと同じ名前が実装してあるかもしれません。幸いPHP Traitsには簡単にメソッドをリネームする方法が用意されています。

class MyModel extends Model {
 use Gutenbergable {
   renderContent as renderLBContent;
 }
 public function renderContent() {
   // Your method
 }
}

In this example you can just call the 'renderLBContent' method to render the content.

Gutenbergコンテンツのレンダリング

Gutenbergコンテンツのレンダリングはとてもシンプルで以下のようにすればOK

<div id="your_container"> <!-- The element you want to render the content in -->
 {!! $page->lb_content !!}
</div>

WordPressみたいなスタイリングにするならLarabelgのCSSを読み込むのを忘れないで。

カスタムブロックについてはググれば相当でてくるので割愛
（だんだんめんどくさくなってきた）

SidebarもWordPress触ってたらわかるやろ！割愛！

Configuration（色々設定とか）

エディタイニシャライズ時にはいくつかの設定オプションがあるよ。This is still a work in progress!（「これはまだ進行中の作業です」？）

Styling

エディターのheight,maxHeight,minHeightについては好きな値を設定することができるよ

Laraberg.init('[id_here]', { height: '500px' })
Laraberg.init('[id_here]', { maxHeight: '500px' })
Laraberg.init('[id_here]', { minHeight: '500px' })

Placeholder

Gutenbergのplaceholderも好きなようにできるよ。

<textarea placeholder="[placeholder_here]" id="[id_here]" name="[name_here]" hidden></textarea>

API Routes

ベンダーファイルを公開した後、configフォルダ内の'laraberg.php'ファイルを見つけることができます。このファイルではAPIルートを設定することができます。ここではURLのプレフィックスとルートのためのミドルウェアを変更することができます。

ルートのプレフィックスを変更する場合は、以下のようにエディタを初期化する際にもプレフィックスを指定する必要があります。

翻訳結果はって割愛（いまのとこ使う予定ないからもう良い）

Laravel File Manager（本命キター）

LarabergはメディアファイルのアップロードにLaravel File Manager をサポートしてるよ。Laravel File Managerでメディアをアップロードするためには、laravelFilemanager fieldをtrueにしなくてはいけないよ。

Laraberg.init('[id_here]', { laravelFilemanager: true })

Laravel File Managerのデフォルトのルートを使ってないなら、以下のようにオプションでエンドポイントを指定することができるよ。

Laraberg.init('[id_here]', { laravelFilemanager: { prefix: '/[lfm_prefix_here]' } })

注意事項
LaravergではLaravel File Managerのセットアップはやっとらんよ。デフォだとほとんどのメディアファイルがホワイトリストに登録されてないのでアップロードできません。詳細はLaravel File Managerのドキュメントを読もう！

はい。

目的を達することができました。

スクリーンショット 2020-12-28 23.53.35

WordpressはおいといてGutenbergは個人的に結構好きなので、Laravelにも使えてよかったです。

スクリーンショット 2020-12-28 23.55.14

ただこのコメントのとことwp-block-xxxはちょっとどげんかせんといかんと思いました。

おわり。