超簡単にパンくず機能を実装する
超絶久しぶりになりましたが、皆様こんにちは。ハマッキーです。
今回はRuby on Railsでのアプリケーション開発における「パンくず機能」の実装に必要な手順についてお話していきたいと思います。
- パンくず機能とは？
- 実装の手順
- ①gem "gretel"をGemfileに記述し、ターミナルでbundle install
- ②ターミナルでrails g gretel:install
- ③②で生成されたconfig/breadcrumbs.rbにパンくずとして表示させる名前とそのリンク先を記述
- ④パンくずリストを表示させるビューファイル（ヘッダーなどの部分テンプレート）にパンくずを表示させるための記述を入れる
- ⑤③で設定したパンくずに該当するビューに、そのパンくずの情報をもたせる
- 確認
- 終わりに
パンくず機能とは？
パンくず機能とは、「ウェブページ上で自分が今どの階層に居るのか」を視覚的にわかりやすく表示する機能のことを言います。
パンくず機能という名前の由来は、グリム童話の「ヘンゼルとグレーテル」のお話の中で、森のなかで迷わないようにするために道標としてパンくずを置くことで家に帰れるように試みた、というエピソードが由来になっているそうです（そのパンくずは鳥に食べられてしまいヘンゼルとグレーテルは結局迷子になりますが）。
実装の手順
下記の手順でパンくず機能を実装できます。
①gem "gretel"をGemfileに記述し、ターミナルでbundle install
②ターミナルでrails g gretel:install
③②で生成されたconfig/breadcrumbs.rbにパンくずとして表示させる名前とそのリンク先を記述
④パンくずリストを表示させるビューファイル（ヘッダーなどの部分テンプレート）にパンくずを表示させるための記述を入れる
⑤③で設定したパンくずに該当するビューに、そのパンくずの情報をもたせる
①gem "gretel"をGemfileに記述し、ターミナルでbundle install
gem "gretel"
Gemfileにこの記述をした後、ターミナルでbundle installをしたらgretelの導入は完了です。
②ターミナルでrails g gretel:install
ターミナルで上記のコマンドを入力するとconfig以下にbreadcrumbs.rbというファイルが生成されます。
③②で生成されたconfig/breadcrumbs.rbにパンくずとして表示させる名前とそのリンク先を記述
目標は以下の画像のようにパンくずリストを作ることです。
書いたコードは以下のような感じ。
# crumb パンくず名 do
# link "パンくずとして表示させるリンク名", そのリンク先のURL
# end
crumb :root do
link "Home", root_path
end
crumb :mypage do
link "マイページ", user_path
parent :root
end
この記述についてもう少し詳しく深掘りしていきます。
まず各ページのパンくずに名前をつけます。Homeはアクセス時に一番最初に飛ぶページであるため、rootと名付けるのが一般的なようです。
マイページのパンくず名はmypageとします。
次に、パンくずに持たせるリンク先とリンク先を表示させたときに表示させるテキストを設定します。リンク先のURL等に関してはrails routesコマンドをターミナルで入力し、自分がパンくず機能をつけたいビューがどのURLを持っているのかを確認しましょう。
parentというのは、この記述をしたビューがどのビューの小要素的な階層になるのかを指定しています。ここでいうと、マイページはHomeの一個下の階層に該当している、といった感じです。
④パンくずリストを表示させるビューファイル（ヘッダーなどの部分テンプレート）にパンくずを表示させるための記述を入れる
私は今回hamlで記述しているため、
= breadcrumbs
この記述を部分テンプレート化させているヘッダーに組み込みました。
erbファイルで記述している方は、
<%= breadcrumbs %>
の記述を入れましょう。
⑤③で設定したパンくずに該当するビューに、そのパンくずの情報をもたせる
今回であれば、Homeとマイページのビューにパンくずの情報をもたせます。
Home ↓
- breadcrumb :root
マイページ ↓
- breadcrumb :mypage
これを各ファイルの一番上に書きます（記述する場所は多分どこでも良い）。
ここで注意してほしい事が一点ありまして、この記述をする際に
= breadcrumb :mypage
と記述をしないようにしましょう。
erbならこの記述です。
<%= breadcrumb :mypage %>
＝をつけた場合、処理の結果をビューに出力してしまうので、この記述だとわけわからん文字が出てきます。
確認
無事マイページにパンくず機能が実装されています。画像なのでわからないとは思いますが、HomeをクリックすればHome画面に遷移しました。
終わりに
パンくず機能実装のやり方は以上になります。
記事更新をめちゃくちゃサボってすみませんでしたm(__)m。
ちゃんとアウトプットしていかないとだめですね。
マイグレーションファイルを間違って消去したときの対処法
皆さんこんばんは、ハマッキーです。
今日はGithubでセルフコンフリクトを引き起こしてしまい（←バカ）、作成したモデルファイルとマイグレーションファイルが消えてしまうという事態が発生してしまいました。
手書きで申し訳ないですが、多分今日やらかしたのはこういうことだったのかなあと思います（正直何をやらかしたのか未だによくわかっていない）。流れとしては、
①フロント実装のときにブランチを作成
②フロントのLGTMをもらった後そのブランチをマスターブランチにマージし忘れたまま、ユーザー管理のブランチを作成
③ユーザー管理のブランチをマージしてしまい、その後フロントのブランチが残っていたことに気づいてマージした結果ユーザー管理で作ったマイグレーションファイルが消えてしまった
ということなのかなと思っています。
バックアップはちゃんと残しておいたので、コントローラー、ルーティング、ビューは生きていましたが、マイグレーションファイルはstatusがupの状態のまま削除されてしまったため、めんどくさいことに。
モデルを生成する時に一緒に作成されるマイグレーションファイルですが、これはstatusというものがあり、upの時は機能しており、downの時は機能していない、という厄介なものです。これはdownのときは勝手に消えてくれても困らないのですが、upの時に消えるとマイグレーションファイルは有効であるはずなのに、中身が何もないという状態を引き起こし、同じモデルを作り直そうとした時にmigrateできないという事態を引き起こします。エラーはこんな感じで現れます。
usernoMacBook-Air:chat-space user$ rails db:migrate
== 20191116065410 CreateMessages: migrating ===================================
-- create_table(:messages)
rails aborted!
StandardError: An error has occurred, all later migrations canceled:
マイグレーションファイルの状態を以下のコマンドをターミナルで入力し、確認すると、
usernoMacBook-Air:chat-space user$ rails db:migrate:status
database: chat-space_development
Status Migration ID Migration Name
--------------------------------------------------
up 20191102063736 Devise create users
up 20191113083235 Create groups
up 20191113083256 Create group users
up 20191116055710 ********** NO FILE **********
↑
元々の中身は同じマイグレーションファイル
↓
down 20191116065410 Create messages←migrateしたいが、上のupのまま消えた奴が邪魔でmigrateできない
NO FILEにも関わらず、upになっているマイグレーションファイルがあります。
コレを消す方法は2つあり、
①upだけどNO FILEのマイグレーションファイルと同じIDをもつマイグレーションファイルを作成し、downしているマイグレーションファイルの中身をまんまコピペする方法
②同じIDを使ったダミーのマイグレーションファイルを作り、中身をNO FILEじゃない状態にしてからrails db:migrate:downを実行した後削除する方法
の2つがあります。
ちなみにIDとは2019~~の数字の羅列のとこです。
①は20191116055710_create_messages.rbというファイルを作成し、migrateできないファイルの中身をまんまコピペするだけです。そんなにいないと思いますが、もし私と同じミスをした人はコレでやるのが手っ取り早くて良さそうですね。
②は20191116055710_tmp.rbというダミーマイグレーションファイルを作成し(tmpの部分はなんでもOK）、中身をNO FILEでない状態にします。
この状態でマイグレーションファイルのstatusを見ると…
usernoMacBook-Air:chat-space user$ rails db:migrate:status
database: chat-space_development
Status Migration ID Migration Name
--------------------------------------------------
up 20191102063736 Devise create users
up 20191113083235 Create groups
up 20191113083256 Create group users
up 20191116055710 Tmp
down 20191116065410 Create messages
中身がNO FILEからTmpに変わっています。これでこの虚無の存在だったマイグレーションファイルに干渉できるようになりましたので、
rails db:migrate:downをターミナルで実行してあげた後、statusを確認すると、
usernoMacBook-Air:chat-space user$ rails db:migrate:status
--------------------------------------------------
up 20191102063736 Devise create users
up 20191113083235 Create groups
up 20191113083256 Create group users
down 20191116055710 Tmp
down 20191116065410 Create messages
ちゃんとdownになりますね。こうなってしまえば、あとはテキストエディタやFinderから直接削除するもよし、ターミナルで削除するもよしって感じです。ターミナルで削除するなら
usernoMacBook-Air:chat-space user$ rm -rf db/migrate/20191116055710_tmp.rb
で削除可能です。
これが②の方法でしたが、これは①のようにコピペ対象が存在しない場合やればいいかなと考えています。
せっかくの休日だったのに、しょーもないGithubの操作ミスのせいで無駄にマイグレーションファイルの変更に時間を費やしてしまってもったいなかったなあと思った一日でした。
まあこれが最終課題のような共同開発中にやらかさなかっただけ良かったと思うことにしましょう。もしチーム開発で今日のようなコンフリクトを起こそうものなら、切腹案件ですからね…。そうならないよう、これからはGithubの勉強も並行して進めていきたいと思います。
今回の話はあまり役に立たないかと思いますが、読者の皆様には「こんなバカなことするやついるのかwww」くらいのエンターテイメント感覚で見ていただけたのなら自分としても嬉しいです。
それではまた次の日記でお会いしましょう！
グループ編集機能の落とし穴
皆さんこんばんは、ハマッキーです。
昨日は家の中を掃除していたらNintendo Switchを発掘してしまい、ついそちらに夢中になった結果日記を書くのを忘れてしまいました。
最近少し弛んでるなと自分でもわかるので、ここらへんで気を引き締めていきたいところ。
さて、今日は「Chat Spaceのグループ編集機能を追加しよう」というカリキュラムを進めていく上で、「これ絶対皆ここでエラーおきるやろ！」って私が思った部分があったので、そのことについてお話していければなと思います。
私より先に進んでらっしゃる方は「そういえばあったわ」と共感する部分も少しはあるんじゃないかな〜と感じております。
それでは本題に行きます。
ここでの問題はグループの名前を編集できる機能を追加することなのですが、カリキュラムには、groups_controllerのupdateアクションに
def update if @group.update(group_params) redirect_to group_messages_path(@group), notice: 'グループを編集しました' else render :edit end end
と記述するよう指示されているのですが、実際にこの通り記述して
グループの名前を編集して更新すると、
group_messages_path
この部分に心当たりがない、とrailsに説教されてしまいました。
きっと皆「カリキュラムのとおりに書いてんのになんでや！！」
と思ったのではないでしょうか。
それもそのはずで、group_messages_pathはこの先のカリキュラムでmessages_controllerで記述する部分になるので、
railsくん「まだ何も定義してないメソッドを実行しろとか言われましても^^;」
と言われるのはド正論なわけです。
じゃあどうやればグループ名編集できるの？って話だと思いますが、
結論：group_messages_pathの部分をroot_pathに置き換えるとうまくいきます。
エラーの画面をリロードしたらこのように編集がうまくいきました。この理屈はprefixという部分の話になるので、気になる方は調べてみると良いかもしれません（TECH::EXPERTのカリキュラムだとpictweetかmoooviのとこらへんにあった気がする）。
これはほんとに曲者だな〜と思ったグループ編集機能でした。
めちゃくちゃ雑に書いてて申し訳ないですが、これは是非フロント終わってこれからユーザー管理機能に行く人がいたなら是非とも見てほしいなと思います。
この日記を読んで少しでも役に立ったぜ！！って人がいたら嬉しい限りです。
それではまた次の日記でお会いしましょう！
貼り紙のチラシ撃退効果は如何ほど？？
皆さんこんばんは、ハマッキーです。先週婚活パーティ勧誘のチラシが投函されていたことにイラッときてしまい、以下のリンクの対策を立ててから約一週間が経過したわけですが・・・
https://hmakkey.hatenablog.com/entry/2019/11/01/163913
先週貼り紙をしてから投函されたチラシの数は0でした！
先週までは毎週10枚くらいはチラシが入っていた気がするのですが、今週は一枚も入っていません（笑）。
やはり、「着払いにて返送します」という文言が効いたんでしょうか。
デメリットは家に知人が遊びに来たときに少し恥ずかしいくらいで、他には特に目立つデメリットはない気がします。
毎週のように届いていたシカゴピザのチラシがもう届かないのは少し残念ですが、他のチラシでイライラするよりはマシなのかなと思います。
チラシの当函数を減らすために、「着払いにて返送します」という貼り紙を玄関にしておくことはかなり有効であったと思います。
読者の方で、チラシに悩んでいる方がいらっしゃれば、是非試してみてはいかがでしょうか。
今回は短かったですが、この辺で失礼させていただきます！
いつも見てくれたり、コメントくれる方、本当にありがとうございます！
ではまた次の日記でお会いしましょう！
面白き こともなき世に 面白く
皆さんこんばんは。ハマッキーです。
昨日今日と、体調があまりよろしくなく、昨日は日記どころかmacに1秒すら触っていません＼(^o^)／。
進捗的にあまりゆとりがないため、笑い事ではないのですが、昨日は仕事も休んで家の中をバブルスライムみたいな感じで這い回ってました（ドラクエ知らんわ！ってひといたらすみません）。
流石に二日間ノータッチはまずいので、今日はこれから一週間逃げてきたChat Spaceのユーザー管理とじっくり向き合おうと思います。
さて、そんな私ですが今日はプログラミングではなく、TECH::EXPERTに通学中に読んだ高杉晋作についての本があるので、そちらの感想について書いていきたいと思います。
なぜ高杉晋作についてなのかについては、https://hmakkey.hatenablog.com/entry/2019/11/05/113845
上記のリンクから読んでいただけたらなと思います。
今回読んだ本は「高杉晋作 情熱と挑戦の生涯」というタイトルになります。
・本を読んでみた全体的な感想
この本は晋作誕生から生涯を閉じるまでが時系列的に書かれており、読みやすくはあったのですが、途中途中の登場人物のセリフなどが古語で書かれているため、「文章の流れ的にこういう意味かな？」と推測はできますが、正確な意味を読み取ることはできませんでした。読了にかかった時間は多分四時間くらいかなと思います。
・「面白き こともなき世に 面白く」とは？
高杉晋作に興味を持ったのは、この辞世の句と言われるこの俳句に興味を持ったからでした。最初は「つまらない世の中を面白くする」という解釈だったのですが、実際は「つまらない世の中を面白くするのは心のあり方次第」という意味だと知り、この本も読んでみようと思いました。
結論から言うと晋作本人は「自分の人生はあまり面白いものではなかったと感じていたらしい」ということです。
晋作は400篇もの誌を残すほどの文学青年でもありました（もちろん武芸にも励んでいた）。
それと同時に彼は日本に来た外国人と接するうちにヨーロッパへの留学を渇望していました。上海には視察で訪れた晋作ですが、欧州への留学は叶うことなくその生涯を閉じます。
晋作は先祖である高杉家が長州を治めていた毛利家に戦国時代から仕えていたこともあり、自らの出自に誇りを常に持っており、またその出自を拠り所にしている場面が多々見られます。そのため、晋作は列強各国が日本に進出してきている危機的状況や、長州の危機を黙って見過ごすことができず、祖国や長州のため東奔西走しているうちに結核を患ってしまいます。既に江戸幕府の第二次長州征伐時には病は相当進行していたといいます。
そんな晋作からすると、幕末の時代は充実していたとはいえ決して面白いものではなかったのかもしれません。
実際に、晋作が書いたのは、「面白き こともなき世に（「こともなき世を」は後の改変と思われる） 面白く」の部分だけであり、本人は自らの死が近いことを予感した時、「自分のやりたいことはちっとも叶わず、つまらない世の中だった」と不満げに詩を書いたのだと思われます。
その詩に、かつて晋作が福岡に潜伏していたときに行動を共にしていた野村望東尼は「それは心持ち次第だよ」と諭すように「すみなすものは心なりけり」と下の句をつけてあげたといいます。
この詩は辞世の句だと言われていますが、それは伝説に過ぎず、実際は晋作がこの世を去る四ヶ月ほど前に書かれたものなのだとか。
カリスマ性抜群！というイメージの晋作ですが、船酔いしたから毎日書いていた日記を書くのをやめたり、父親に心配をかけるわけにはいかないという理由で過激な活動をする仲間を一歩後ろから見ているような場面があったりと、イメージとは少し違った晋作の一面もこの本を読んでみて知ることができました。
晋作などに関係する史料は山口県萩市に色々あるそうなので、仕事やめて引っ越す前に是非一度は訪れてみたいなと思います。
以上、久々の読書感想でした！
プログラミングに役立つことはないかもしれませんが、晋作の生き様などはやはり我々現代人が見習うべきものがあるように感じるので読んで時間を無駄にするといったことはないと思うので、お時間があるときにでも読んでくださる人が一人でもいればとてもうれしく思います。
それでは次の日記でお会いしましょう！
閲覧・コメントお待ちしています！
二度寝厳禁
皆さんこんばんは。ハマッキーです。
今日はTECH::EXPERTなんばスカイオ校に朝から行く予定だったのですが、寝坊して朝礼から2時間半遅刻することになってしまいました。
寝坊したのは、「二度寝した時に目覚ましをかけてなかった」というなんともマヌケな理由なのですが、寒い時期に部屋に暖房かけてると二度寝したい欲望に抗うのは中々に難しいもの。今日はランチに行く約束を同期の方としていたので、サボらずなんばまで行きましたが、約束が無かったらサボっていたかもしれませんね。
約束は身に付けたい習慣を三日坊主で終わらせない最も効果的な方法の一つと言われているので、あながち間違ってないなと思いました。気になる方はマコなり社長の動画を見てみてはいかがでしょうか。リンクはこちら↓
話を戻します。二度寝をしてしまった私ですが、二度寝って実際のところ、その場での満足感こそ得られますが、ぶっちゃけ二度寝した分の睡眠時間は言うほど身体に影響を与えてないんじゃないかなというのが個人的な考えです(じゃあ二度寝するなよ)。
これは最近思うようになったことなのですが、何かをやろうと思って過ごす毎日は圧倒的に時間が足りないです。かつて毎日をダラダラ過ごしていた私は無限の時間がありましたが、最近プログラミングを始めてからはほんとに1日が30時間くらいあったらな〜って思っちゃいます。
某ゲームに、
「時間は待ってはくれない
にぎりしめても
ひらいたと同時に離れていく
そして…」
という名言がありますが、ほんとに時間は待ってくれないってことを、痛いほど最近感じます。
時間は待ってくれない以上はやっぱり無駄な時間を減らすところから改めてリスタートしなきゃいけないなあと思った日曜日でした。
と言うわけで、今日の反省を活かして
明日からは二度寝はしません😤。
寒い時期はつい二度寝してしまいがちなので、皆さんも時間を無駄にすることがないようにお気をつけください！
それではまた次の日記でお会いしましょう💪
ミニアプリにページネーション機能を実装したい
皆さんこんにちは。ハマッキーです。
今回は自分の作ったアプリのビュー画面にページネーション機能を実装したいと思い、この記事を書こうと思った次第です。
ページネーション機能とは、名前だけだと「？？」ってなる方もいるかもですが、
Googleとかでおなじみのコレです。
要は各ページごとに決まった数のサイトが貼られていて、1,2,3…といくにつれ別のページを表示させてくれます。
流石にブログ投稿画面一覧に投稿した記事が全て表示されるのではごちゃごちゃしていて見にくいですよね。
というわけで、早速この機能を実装していきたいと思います。
まず、このページネーションを実装するためにkaminariをインストールします。
そのために、アプリのGemfileに gem 'kaminari'と記述し、ターミナルでカレントディレクトリが今開発しているアプリであることを確認したら、ターミナルで bundle install と入力しkaminariをインストールします。
次に、ページ一枚に付き、記事を何個表示させるのかを指定していきます。
まず、何もしていないのがこちらです。
では、ページ一枚につき何件の投稿を表示させるのかを決めていきます。今回は一枚につき5件の投稿を表示させることにします。
kaminariをインストールすると、pageとperという2つのメソッドが使用可能になります。これらについてざっくり解説すると、
・pageメソッド・・・ページネーションでのページ数を指定する。ビューリクエスト時にparamsの中にpageというキーが追加され、この番号がページ数となる。
・perメソッド・・・・一枚のページにつき、何個のコンテンツを表示させるのかを決定する。
という感じになります。
これらのメソッドを使って、コントローラーファイルをいじっていきます。
一覧表示なので、indexメソッドに手を加えていきます。
order("created_at DESC")の部分は、新たに投稿された記事を上位に表示するという意味です。
そして先程の一覧画面に戻ると、
ちゃんと5件だけ表示されているのでうまく適用できました。
しかし、「二ページ目に飛ぶためのリンクはどこやねんボケ！」って感じですね。
ページネーションのリンクを表示させるためには、ビューファイルにpiginateメソッドを使います。
ではこれで一覧画面を見てみましょう。
無事追加できました。
レイアウトはガバガバですが、なんとかページネーション機能を実装することができましたね。次回はログイン、ログアウト機能を追加していきたいと思います。
というわけで、今回はページネーションについてのお話でした。
ミニアプリ開発は楽しい😋
それでは、次の日記でお会いしましょう！
コメント、ご意見お待ちしています！
