ナビゲーションをページ上部で固定する方法 Bulma

CSSではposition: fixed;で出来ますが、Bulmaではどのようにするのか調べてみました。

navbarコンポーネントのところにis-fixed-topを置くとナビゲーションをページ上部に固定できるようです。

header.navbar.is-fixed-top

has-navbar-fixed-topをhtmlタグかbodyタグのところに置くとナビゲーションのpaddingを良い感じに調節してくれます。

body.has-navbar-fixed-top

参考 https://bulma.io/documentation/components/navbar/#fixed-navbar

これまでに発表したスライド

はじめに

Speaker Deckにこれまでに発表した３つのスライドを登録しましたので紹介させていただきます。

Catch the Objects

speakerdeck.com

アメリカ留学時、コミュニティカレッジで取った最初のJavaのクラスで作成したファイナルプロジェクトについて発表したスライドです。当時のクラスメイトと2人で作成しました。

ファイナルプロジェクトを作成するにあたり、何かJavaを用いてゲームを作ってみようと思っていました。最初に思いついたのはテトリスでした。しかし、テトリスはありきたり過ぎると思い、上から物が降ってきてそれをキャッチするゲームはどうかと話し合いました。そうして、Catch the Objectsというゲームを作成しました。

A Typing Game

speakerdeck.com

アメリカ留学時、２つ目のJavaのクラスで作成したファイナルプロジェクトについて発表しました。こちらも当時のクラスメイトと2人で作成しました。

当時、私はタイピングが苦手で、人差し指だけでキーボードを使っていました。プログラミングを学習していくにあたり、タイピングは出来ておいた方が良いなと思い、タイピングを練習していました。自分が練習するためにもと思い、タイピングゲームをJavaで作成しました。

Railsでのデバッグ

speakerdeck.com

Railsでのデバッグについて、そしてその心構えについてスライドにまとめました。

RailsとVue.jsを用いてチーム開発に取り組んでいましたが、デバッグの重要性に気づいていませんでした。闇雲に非効率なコードを書き、詰まることが多々ありました。上手にデバッグできるようになりたいと思い、自分の勉強のためにもRailsでのデバッグについて調べ、発表しました。

最後に

発表するのはどれも緊張しました。しかし、話し始めると意外と冷静になれました。どの発表もとても良い経験でした。また機会があればLTしたいです。

怒りを記録できるアプリ「アンガーダイアリー」をリリースしました

アンガーダイアリー

はじめに

このたび怒りを記録するアプリ「アンガーダイアリー」をリリースしましたので紹介させていただきます。

アプリ概要

アンガーダイアリー

このアプリでできること

1. 怒りを記録できる

誰でも簡単に怒りを記録できます。怒りのレベル、怒った日時、場所、内容、自分で変えられる内容か、自分にとって重要な内容か、以上の６項目を記入できます。 怒りを記録する

2. 今日出来たことを記録できる

その日に出来たことを何でも記録できます。例えば、朝起きられたなど、どんな小さなことでも構いません。 今日出来たことの作成

3. カレンダーで記録を確認できる

自分が記録した怒りと今日出来たことの記録をカレンダーで日付ごとに確認することが出来ます。そして、それぞれの記録を編集、削除することが出来ます。 カレンダーで確認

作成背景

苦しい時もいつも支えてくれている彼女に対して自分の心の余裕がなくなり、強い言葉を言われると困惑しイライラしてしまい、消耗なやりとりをしてしまったことがありました。その時、彼女の怒りを否定しようとせず、怒りの理由を理解し、それに対応する意志を示すことができるようになりたいと思いました。そのためにはまず、彼女の怒りに刺激され自分までイライラしないように、自分の怒りをコントロールする必要があると考えました。自分の怒りをコントロールするためには、まずは自分は何に対してどの程度怒りの感情がわくのかを知る必要があります。そこで私は怒りを記録するアプリ「アンガーダイアリー」を作ろうと思い立ちました。

このアプリで解決できる問題

このアプリでは以下の３つの問題を解決することが出来ます。

1. カッとした勢いで暴力的な行為をしてしまう

カッとなった勢いで怒りを爆発させる前に、感じた怒りを頭の中でレベル分けしてみます。例えば、電車で足を踏まれたことに対して怒りを感じるなら、それはレベル１かな？２かな？それとも３かな？と脳が怒りのレベル分けをすることに意識を向けている間は、怒りに任せた行動はできません。理性を取り戻すことができます。そうして決めた怒りのレベルを記録できます。

2. 毎回同じことで怒ってしまう

怒りの記録を続けていくことで、自分が何に対してどの程度怒りやすいのか自分の怒りの傾向を可視化できます。例えば、相手に投げやりな言葉を言われた時イラッとするなどです。そうすると、新たに怒りを感じた時、またこのパターンだと自分の怒りに対して心の準備ができます。

3. 自分のことや相手のことも許せなくなってしまう

毎日の出来たことを記録していき、自分を認めていくことで自尊感情を育むことができます。自尊感情の成長は自分を許すことにつながります。また、自分を許すことは相手も許すことに繋がっていきます。そうすることで自分や相手に不用意に怒りをぶつけることを減らすことができます。

使用技術

選定理由

Rubyを選んだ理由

Webアプリを開発するにあたって使用する言語はRuby、PHP、Pythonの３つの選択肢がありました。自分が働きたい企業はRailsを採用している割合が高く、同時にRailsを採用しているプログラミングスクールが多かったのでRubyを選びました。また、Rubyは日本でのコミュニティーが活発で日本語での情報の量が多いのも要因です。

Herokuを選んだ理由

Herokuはデプロイが簡単に出来、管理にほとんどコストがかからないので選びました。

Bulmaを選んだ理由

Bulmaを使用することでCSSだけでコードを書くよりも大幅に時間を節約することが出来、デザインミスも減らすことができるので選びました。

DB設計

draw.ioを用いて作成しました。

f:id:tetishi:20210329155046p:plain

工夫したこと

  • 実際にコードを書いていく前に要件定義、画面の遷移図、DBの簡易設計をしました。

  • チーム開発を意識し、Issueを登録し、PRベースで開発をしていきました。

  • 開発効率化のために毎日1日のはじめにその日のスケジュールを時間単位で立てました。

  • ベースカラーを緑にしました。ユーザーは怒りを抱えている状態でアプリを開くので、木や森などの自然の色でもある緑がユーザーの気持ちを穏やかにするのではと考えた為です。

  • はじめにメインとなる機能から取り組みました。開発初期にこのアプリは本当に完成させることができるのかを確認するためです。

大変だったこと

RailsとJavaScriptの連携

記録の編集をFetch APIを使い、非同期で実装しました。非同期処理を実装するにあたり、どこから手をつけて良いか分かりませんでした。なのでどういった順序で実装していけば良いのか細かくチェックリストを作成しました。チェックリストを作成することによってどういった順序で何をするのかが明確になり、何をすれば良いのかわからないということがなくなりました。

どんな状況でも集中して開発に取り組むこと

エラーが解決できず何日も詰まってしまった時や、彼女の病気が心配で不安な時は、集中して開発を続けていくのが難しかったです。しかし、そのような時でも集中して開発に取り組むことができるように以下の３つの対策を取りました。

1. ポモドーロテクニックを導入する

ぶっ続けで作業している時はSNSなどの誘惑や心配事などが頭をよぎり、その度に作業を中断していました。しかし、25分集中して作業したら5分休憩するというポモドーロテクニックを取り入れてからは明らかに集中できる時間が増えました。また、はっきりとした休憩時間があるので、PCから離れて脳を休めることができます。おかげで精神的にも疲れにくくなりました。

2. SNS、インターネットを制限する

SNSやネットサーフィンは作業時間を奪っていました。例えば、少し休憩しようとYouTubeなど見ると予定していたよりも大幅に時間が経っていたことがよくありました。自分の目も疲れてしまうので見終わったあとは罪悪感を感じてしまい心身ともによくありませんでした。PCからはTwitter以外のSNSに、スマホからは全てのSNS、ブラウザにアクセスを制限することにより、作業時間を増やすことができました。また、休憩時はPCやスマホから離れ、ストレッチや趣味のスケートボードをして心身ともにリフレッシュできるようになりました。

3. タスクを小さくする

タスクを小さくすることで、毎日何かしらのタスクを終わらせることができます。どんな小さなタスクでも終わらせるのは達成感があり、常に気持ち良く開発を続けることができました。

今後やりたいこと

  • UI, UXの向上
  • Vue.jsの導入
  • 国際化

最後に

怒りの感情は必ずしも悪い感情ではありません。怒りの感情に振り回されず、コントロールするためにも是非アンガーダイアリーを利用していただけたら幸いです。アンガーダイアリーの開発はこれで終わりではなく、まだまだ改善したい点、追加したい機能などありますので、今後とも開発を続けていきます。

最後までお読み頂きありがとうございました🙇‍♂️