<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>パンくず on ララジャパン</title>
        <link>https://www.larajapan.com/tags/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A/</link>
        <description>Recent content in パンくず on ララジャパン</description>
        <generator>Hugo -- gohugo.io</generator>
        <language>ja</language>
        <lastBuildDate>Thu, 29 Oct 2020 23:19:59 +0900</lastBuildDate><atom:link href="https://www.larajapan.com/tags/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A/index.xml" rel="self" type="application/rss+xml" /><item>
        <title>パンくずパッケージ、復活！</title>
        <link>https://www.larajapan.com/2020/10/29/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%80%81%E5%BE%A9%E6%B4%BB%EF%BC%81/</link>
        <pubDate>Thu, 29 Oct 2020 23:19:59 +0900</pubDate>
        
        <guid>https://www.larajapan.com/2020/10/29/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%80%81%E5%BE%A9%E6%B4%BB%EF%BC%81/</guid>
        <description>&lt;p&gt;以前から紹介したいと思っていたパンくずのパッケージがありました。人気ものなのですが、作者が忙しいという理由で管理を辞めてしまいました。幸い、Laravelのバージョンが上がっても問題なく動作していますが、いつダメになるわかりません。小さなパッケージはこれがあるから嫌だなと思うところですが、オープンソースゆえに他の開発者が後継してくれました。しかも、「オフィシャル」となっているので長期間管理されるようです。今回はこのパッケージの紹介です。&lt;/p&gt;
&lt;p&gt;まず、以下の画面見てください。&lt;/p&gt;
&lt;img src=&#34;bredcrumbs.png&#34; alt=&#34;&#34; width=&#34;503&#34; height=&#34;358&#34; class=&#34;alignnone size-full wp-image-5279&#34; /&gt;
&lt;p&gt;パンくずとは、矢印の部分に表示される階層のナビゲーションのことです。&lt;/p&gt;
&lt;p&gt;現在の画面のポジション、ここなら管理ユーザーの&lt;strong&gt;testtest&lt;/strong&gt;の編集画面ということがわかるし、その前の「管理ユーザーリスト」、「ホーム」にもリンクがついてここから直接リンク先に飛ばすことができます。&lt;/p&gt;
&lt;p&gt;さて、これを作成するためには、まずパッケージのインストールから、&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-bash&#34; data-lang=&#34;bash&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;$ composer require diglactic/laravel-breadcrumbs
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;実行が完了したら、次は設定です。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;routes/breadcrumbs.php&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;のファイルを作成して、以下のように定義します。、&lt;/p&gt;
&lt;div class=&#34;code-filename&#34;&gt;routes/breadcrumbs.php&lt;/div&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-php&#34; data-lang=&#34;php&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;Breadcrumbs&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;::&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;for&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;admin.home&amp;#39;&lt;/span&gt;, &lt;span style=&#34;color:#66d9ef&#34;&gt;function&lt;/span&gt; ($trail) {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    $trail&lt;span style=&#34;color:#f92672&#34;&gt;-&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;push&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;ホーム&amp;#39;&lt;/span&gt;, &lt;span style=&#34;color:#a6e22e&#34;&gt;route&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;admin.home&amp;#39;&lt;/span&gt;));
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;})
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;Breadcrumbs&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;::&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;for&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;admin.user.index&amp;#39;&lt;/span&gt;, &lt;span style=&#34;color:#66d9ef&#34;&gt;function&lt;/span&gt; ($trail) {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    $trail&lt;span style=&#34;color:#f92672&#34;&gt;-&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;parent&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;admin.home&amp;#39;&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    $trail&lt;span style=&#34;color:#f92672&#34;&gt;-&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;push&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;管理ユーザー&amp;#39;&lt;/span&gt;, &lt;span style=&#34;color:#a6e22e&#34;&gt;route&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;admin.user.index&amp;#39;&lt;/span&gt;));
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;});
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;Breadcrumbs&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;::&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;for&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;admin.user.create&amp;#39;&lt;/span&gt;, &lt;span style=&#34;color:#66d9ef&#34;&gt;function&lt;/span&gt; ($trail) {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    $trail&lt;span style=&#34;color:#f92672&#34;&gt;-&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;parent&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;admin.user.index&amp;#39;&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    $trail&lt;span style=&#34;color:#f92672&#34;&gt;-&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;push&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;新規&amp;#39;&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;});
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;Breadcrumbs&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;::&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;for&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;admin.user.show&amp;#39;&lt;/span&gt;, &lt;span style=&#34;color:#66d9ef&#34;&gt;function&lt;/span&gt; ($trail, $user) {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    $trail&lt;span style=&#34;color:#f92672&#34;&gt;-&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;parent&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;admin.user.index&amp;#39;&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    $trail&lt;span style=&#34;color:#f92672&#34;&gt;-&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;push&lt;/span&gt;($user&lt;span style=&#34;color:#f92672&#34;&gt;-&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;login&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;});
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;// 以下が先の画面のパンくず
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;Breadcrumbs&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;::&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;for&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;admin.user.edit&amp;#39;&lt;/span&gt;, &lt;span style=&#34;color:#66d9ef&#34;&gt;function&lt;/span&gt; ($trail, $user) {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    $trail&lt;span style=&#34;color:#f92672&#34;&gt;-&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;parent&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;admin.user.show&amp;#39;&lt;/span&gt;, $user);
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    $trail&lt;span style=&#34;color:#f92672&#34;&gt;-&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;push&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;編集&amp;#39;&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;});
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;パンくずの名前、つまり&lt;code&gt;for()&lt;/code&gt;の最初の引数、がユニークである必要があります。名前つきのルートを使用しているなら、それと同じとするのが良いでしょう。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;parent()&lt;/code&gt;の関数を使用するなら、その前に定義したパンくずとチェーンできます。例えば、上の、&lt;strong&gt;admin.user.edit&lt;/strong&gt;の定義なら、以下のようにチェーンされます。&lt;/p&gt;
&lt;p&gt;admin.user.edit →　admin.user.show → admin.user.index → admin.home&lt;/p&gt;
&lt;p&gt;設定が完了したら、ブレイドのレイアウトのテンプレートファイルに、&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-php&#34; data-lang=&#34;php&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;...&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;{{ &lt;span style=&#34;color:#a6e22e&#34;&gt;Breadcrumbs&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;::&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;render&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;admin.user.edit&amp;#39;&lt;/span&gt;, $user) }}
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;..&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;と埋め込むと、最初の画面のようなHTMLコードが自動生成されます。&lt;/p&gt;
&lt;p&gt;もちろん、このためのテンプレートがあるわけですが、デフォルトでは&lt;strong&gt;bootstrap ver.4&lt;/strong&gt;が使われます。&lt;/p&gt;
&lt;p&gt;こちらが今回紹介したパッケージ：&lt;/p&gt;
&lt;p&gt;&lt;a href=&#34;https://github.com/diglactic/laravel-breadcrumbs&#34; rel=&#34;noopener noreferrer&#34; target=&#34;_blank&#34;&gt;&lt;a class=&#34;link&#34; href=&#34;https://github.com/diglactic/laravel-breadcrumbs&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;https://github.com/diglactic/laravel-breadcrumbs&lt;/a&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;長い間、大変お世話になっていた旧パッケージ：&lt;/p&gt;
&lt;p&gt;&lt;a href=&#34;https://github.com/davejamesmiller/laravel-breadcrumbs&#34; rel=&#34;noopener noreferrer&#34; target=&#34;_blank&#34;&gt;&lt;a class=&#34;link&#34; href=&#34;https://github.com/davejamesmiller/laravel-breadcrumbs&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;https://github.com/davejamesmiller/laravel-breadcrumbs&lt;/a&gt;&lt;/a&gt;&lt;/p&gt;</description>
        </item>
        
    </channel>
</rss>
