「Focus To-Do」でポモドーロテクニックをやってみた
最近リモートワークをする日が増えており，家で集中できる日とできない日でムラがあるのが目立ってきた． リモートワークで仕事をする際にどんな工夫をしているのかを友人・知り合いに聞いてみたところポモドーロテクニックを実践している人が何人か居たので試しにやってみることにした．
そこで，ポモドーロテクニックを実践するためのアプリを色々と探してみたところ「Focus To-Do」が一番使いやすかったので今回はこのアプリについてまとめる．
選定理由
このアプリが良いと思った点は下記である．
- 幅広いOSに対応
- 買い切りタイプの有料プランで各端末でタスクを共有できる
- 昨今は月額タイプの有料プランが多い中，1100 円を1回払えば全ての機能が使えるようになるのは有り難い
- アカウントを作成すれば，各端末でタスクを共有できる
使い方
公式ページにある「Download Focus To-Do」の各デバイスの画像をクリックするとダウンロードページに飛ぶ．
起動すると，以下のような画面が表示される．
こんな感じでタスクを追加する．
追加したタスクの再生ボタンを押すとタイマーがスタートする．
始める前にここの🍅を追加して予定時間を設定できる．目標や見積もりの時間を設定するのに便利．
タイマーや休憩の時間も自由に設定できる
まとめと所感
今回は「Focus To-Do」についてまとめてみた．ポモドーロテクニックを実践できるアプリは沢山あるが，色々使い比べた結果，「Focus To-Do」に落ち着いた．
しかし，タイマーで時間を測るのではなく，「テクニック」のためポモドーロテクニック自体を学ぶ必要があることに気がついた(そりゃそうである)． ポモドーロテクニックの開発者の著書が出版されているとのことなので，その本を読みながらポモドーロテクニックについての理解を深め，リモートワークおよび仕事の生産性向上に努めたいと思う．
電子書籍(技術書)を Google Drive の「バックアップと同期」アプリで管理しはじめた
定期的に技術書(電子書籍)の管理について考えてきたが、最近はシンプルに Google Drive で管理する方法で落ち着いてきた． 今回はその方法についてまとめていく．過去の記事はこちら.
「バックアップと同期」アプリを使う
今までも Google Drive で電子書籍を管理するのを何度も考えては断念していた．理由は Google Drive にブラウザで都度都度アクセスするのが面倒だったためである．
しかし、この「バックアップと同期」アプリを使えば Dropbox と同じ感覚でファイルを Google Drive と PC 間で同期できることがわかった． このアプリって前からあったのだろうか？ とりあえずここのリンクからダウンロードできる．
インストールすると、Mac の場合は Finder のサイドバーに Google Drive が表示される．
あとは、こんな感じで Finder を使う感覚でフォルダを Google Drive にドラッグアンドドロップすれば同期が始まる．
確かブラウザの Google Drive はローカルにあるフォルダを直接ドラッグアンドドロップはできず，一度 zip ファイルに圧縮してアップしないと行けなかった気がするので地味に便利!!!
...と思ったら現在は，ブラウザからでもフォルダをドラッグアンドドロップができるようだ...まぁブラウザを開かないで済むので便利なのは変わらない．
Goolge Drive は 15GB の容量を無料で使えるので，今の自分にとって電子書籍を管理するには十分である．仮に足りなくなっても月 250 円で 100GB も使うことができるようなので悪くない投資だと思った．
なお，PDF は無料の Adobe Acrobat Reader 無難に利用している．
しおりの機能は Acrobat Reader DC にアップグレードしないと使えないため，「注釈」機能で「ここまで読んだ」などのメモを入れて読んだ場所を記録している．少し無理矢理感があるかもしれないが，自由にメモができるため割と便利だと思い始めている...
まとめと所感
今回は Google Drive の「バックアップと同期」アプリで電子書籍を管理してみた話について書いてみた． 実際，Kindle for Mac や iBooks も使っているが，Kindle for Mac は引き続きそのまま使って iBooks は epub 形式のため， epub も Google Drive で管理している．
正直，Google Drive で epub を管理し，開くと iBooks が起動し，iCloud の容量が減って少し損した気分になるが，Google Drive をローカルから操作できる体験を知ったら，多少は目を瞑れると感じた．まだ容量に余裕があるからそう感じているのかもしれないが，足りなくなったらまた何か考えようかと思う．皆どんな感じで管理しているんだろうか...
「Web Developer」を使いこなすとフロンエンド開発がかなり捗りそうなことがわかった
フロントエンドの開発をしている時に自分が書いた HTMLの要素 や CSS セレクタやプロパティが実際にどのように組まれて表示されているかを確認するために Chrome DevTools を立ち上げてインスペクト機能や Elements を見ながら確認をする必要がある．
しかし，いちいち Chrome DevTools を立ち上げるのも手間な時があり，「パっと見ることができないものかなぁ」と思っていたら「Web Developer」という便利...というより，かなり多機能で便利な拡張機能があることを思い出したためため今回はこれについてまとめていく．
使い方
ここからダウンロードする．どうやら昔からある拡張機能のようだが，現在もばっちりメンテされているようだ． chrome.google.com
GitHub はこちら． github.com
Web Developer を使って HTML の id や div，CSS の Class 名を確認してみる． まずは確認したいページを表示する．いつものように自分のブログを例にする．
Web Developer のアイコンを押し，タブ「Information」で下記の項目にチェックを入れる．
すると下記のように Chrome DevTools を立ち上げてなくても HTML の id や div，CSS の Class 名 がパッとわかるようになる．
他にも便利な機能が沢山ある!!!
この他にも様々な機能がある．例えばタブ「Tools」にある Validate を利用すると表示しているページを W3C の検証サービスを利用して1クリックで検証できる機能やタブ「CSS」にある「Disable All Styles」を押すと表示されている CSS を外すことができる．
他にも便利な機能沢山あるので，フロントエンドの開発では Web Developer を積極的に使っていこうと思う．
まとめと所感
今回は「Web Developer」についてまとめてみた．実は4,5年前にインストールしたことがあったが結局使いこなせずにアンイストールしてしまっていたが，今回をきっかけに使いこなしていく気持ちになることができて良かったと感じている．
作者のページを見る限り，各機能についての説明が特別書いて無さそうなので実際に使ってみて，使えそうなものを見つけていこうと思う．
と，最近，Chrome 拡張機能の記事が続いていたが，最近プライベートで Ansible を触ってみたのでそろそろインフラ周りの記事も書いていこうかと思う．
ブラウザで CSS のちょっとした手直しをしたい時は「Stylus」が便利だった
Webページをある程度コーディングし，ブラウザで表示の確認をした時にその場で CSS のちょっとした手直しをしたい時がある． その時に Chrome の dev ツールをよく立ち上げていたが，不意にリロードをしてしまったり，タブを閉じるとせっかく修正したコードが水の泡になってしまう...
そんな時には「Stylus」という Chrome 拡張機能が便利なことがわかったため，今回はそれについてまとめる．
使い方
ここからダウンロードできる．
今回は自分が作った Web ページではないが，自分のブログのこのタイトルの色を変えてみる．
dev ツールを立ち上げ，変更したい箇所の要素を調べる．
今回はタイトルのため#title aだとわかる．
Stylus をクリックし，「このURL」の部分を押す．
するとこのようなエディタ画面が開く．
タイトルの色をオレンジに変更し，「保存」を押す．
記事のページに戻ると，タイトルの色がオレンジになっていることがわかる．リロードをしても色がオレンジのままになっている．
自分で書いた CSS を一時期に外したい場合は「すべてのスタイルをオフにする」を押せば OK．
自分で作ったWebページの場合は，書いた CSS が良い感じになったタイミングでローカルのプロジェクトの CSS ファイルに加えれば良い．
まとめと所感
今回は「Stylus」という Chrome 拡張機能についてまとめてみた．本当はちょっとした手直しをするより，ローカルのプロジェクトの CSS を直せば良いとは思う．
しかし，わざわざローカルのプロジェクトに切り替えずにすぐにパパッと治そうと思い Chrome の dev ツールを立ち上げて直すのは良いが，いつもの癖でリロードしてしまい，手を加えてしまった箇所が水の泡に... というのを一時期ちょこちょこやっていことを思い出した．
ちょっとした手直しは「Stylus」を上手く活用し，「ちょっとした手直しのやり直し」は無くすようにしていこう．
Rails の View(ERB) でカスタムデータ属性を設定したい時の方法
Rails の ERB で View のコードを書いている時にカスタムデータ属性( custom data attributes )を使いたい時がある．
HTML なら素直にdata-*という形式で書けば良いが， Rails ではどのように書くかを調べてみても中々見つけられなかった．
そんな中，幸運にもチームメンバーが知っており，設定方法を教えてもらったため今回はそれについてまとめておく．
設定方法
例えばdata-delayというカスタムデータ属性を作りたい場合，ERB では以下のように data: { delay: 属性名 } という形式で書けば良い．
今回の場合はdata-delayという属性を設定した場合を記述する．
<%= image_tag('', alt:'テスト画像', data: { delay: image_path('hoge/test.png') }) %>
ブラウザで確認すると以下のようになる．
<img alt="テスト画像" data-delay="/assets/hoge/test-2nlgadihfdnkddvhiwdkwuiwjjkgiwl3dnfl57398482737dlfowpsjdhfgsa.png" src="/assets/hoge/test-2nlgadihfdnkddvhiwdkwuiwjjkgiwl3dnfl57398482737dlfowpsjdhfgsa.png" class="test-class">
まとめと所感
今回は Rails の View(ERB) でカスタムデータ属性の設定方法についてまとめてみた． 内容はめちゃくちゃ小ネタではあったが，しばらく経ってからまたカスタムデータ属性を設定したい時に「アレ？どうやるんだっけ？」となりそうなので，この記事は今後ちょくちょくチェックしそうな気がする．
追記
もっとよく調べてみたら，Rails の API ドキュメントに例がちゃんと書いてあった． こちらの TechRacho の記事経由で Rails の APIドキュメント を見つけることができた． techracho.bpsinc.jp
「Pesticide for Chrome」を使って CSS のレイアウトのチェックをする
「Vuetify.js」のキャッチアップをしている過程で，どうやら「CSS Flexbox」のキャッチアップも必要だと思い，進めているのですが CSS が崩れているかのチェックや実際はどのようなレイアウトでスタイルされているのかを確認するのが少し面倒になってきました...
そこで良い感じなツールが無いかを探してみた所，「Pesticide for Chrome」がどうやら便利そうだとわかったため 今回はこの拡張機能についてまとめていきます．
使い方
とても簡単です．まずはここからインストールをします．
CSS のレイアウトのチェックをしたいページにアクセスします．今回は私のブログのページを対象にします． https://bake0937.hatenablog.com/archive
この虫マークを押すと...
こんな感じで線が表示され，どのように CSS が当たっているのかがわかります！！！
Dev ツールを併用すればクラス名も表示されるので，見たいスタイルを Pesticide for Chrome で明確にした上で確認できるようになりました．
まとめと所感
今回は Pesticide for Chrome を使って CSS のレイアウトのチェックをする方法についてまとめました．いやぁ...そもそも今まで Float で CSS を書いていたのにいつの間にか CSS Flexbox や CSS Grid Layout など色々なレイアウト手法なんてあったんですね．最近やっと気が付きました...(というより，今まであまり意識していなかったというのが合ってそうですが...)
Rails の View をちょこちょこメンテする日々が続いていて，HTML や CSS の書き方が少し抜けてきたのを実感しているためこちら書籍を読んで復習し直してます． 指示書に従ってコーディングする本とのことで実践的だと思い，買ってみました．
通しでやってみて，良さそうな本だったら書評を書こうと思います．
Gitlab gem で GitLab API を使ってみる
趣味で GitLab も使ってみているのですが，GitLab API を使って issue や プルリクエストを Slack に通知したいなぁとふと思いました．
そこで octokit.rb のようなライブラリが GitLab にないかなぁと探してみたらやはりあるもんなんですね．今回は Gitlab gem の使い方についてまとめてみようと思います．
使い方
簡単に触ってみたのでこんなプロジェクト構成です．今回はプロジェクトにある issue を取得しようと思います．
gitlab-api-sample ├── .env ├── .gitignore ├── Gemfile ├── Gemfile.lock └── app.rb
Gemfile
# frozen_string_literal: true source "https://rubygems.org" git_source(:github) {|repo_name| "https://github.com/#{repo_name}" } gem 'gitlab' gem 'dotenv'
.env
GITLAB_TOKEN='GitLab のパーソナルアクセストークン' GITLAB_PRIJECT_ID='GitLab のプロジェクトID'
.gitignore
.env
app.rb
require 'dotenv' require 'gitlab' Dotenv.load Gitlab.configure do |config| config.endpoint = 'https://gitlab.com/api/v4' config.private_token = ENV["GITLAB_TOKEN"] end puts issues = Gitlab.issues(ENV["GITLAB_PRIJECT_ID"], { labels:'Today,緊急', state:'opened' }).inspect
Gitlab gem で何ができるのかが下記のドキュメントをご確認ください．
ただ，上記のコードにあるように特定の Label がついた issue を取得する方法を理解するのに少し詰まりました．今回は使った issues のドキュメントはこちらになるのですが，Label の条件をどうやって追加するのかがパット見でわかりません．しかし，よく見てみるとドキュメントに以下の記述とコードがあります．
Parameters:
project (Integer, String) (defaults to: nil) — The ID or name of a project.
options (Hash) (defaults to: {}) — A customizable set of options.
# File 'lib/gitlab/client/issues.rb', line 20 def issues(project = nil, options = {}) if project.to_s.empty? && project.to_i.zero? get('/issues', query: options) else get("/projects/#{url_encode project}/issues", query: options) end end
どうやらoptionsに query を設定できることがわかります．
query ってどう書くの？
さて，そこで query はどう書くの！？という話になるのですが色々調べたり試してみた所，どうやら公式の Issues API にヒントがありました．
〜省略〜 GET /issues?labels=foo,bar 〜省略〜
どうやら，labelsというのをqueryとして利用すれば良さそうであることがわかります．
app.rbを改めて載せると下記のように Label の条件はハッシュで書くことで取得できます．stateなど他の条件もハッシュで書いていきます．
app.rb
require 'dotenv' require 'gitlab' Dotenv.load Gitlab.configure do |config| config.endpoint = 'https://gitlab.com/api/v4' config.private_token = ENV["GITLAB_TOKEN"] end # Labelの条件は hash の形式で書く puts issues = Gitlab.issues(ENV["GITLAB_PRIJECT_ID"], { labels:'Today,緊急', state:'opened' }).inspect
実際に実行すると下記のようになります．
gitlab-api-sample - [master●] » bundle install 2020/06/29 19:54:11 Using bundler 2.1.4 Using dotenv 2.7.5 Using mime-types-data 3.2020.0512 Using mime-types 3.3.1 Using multi_xml 0.6.0 Using httparty 0.18.1 Using unicode-display_width 1.7.0 Using terminal-table 1.8.0 Using gitlab 4.15.0 Bundle complete! 2 Gemfile dependencies, 9 gems now installed. Use `bundle info [gemname]` to see where a bundled gem is installed. gitlab-api-sample - [master●] » ruby app.rb 〜ここに label が Today, State が opened の issue 表示される〜
まとめと所感
今回は Gitlab gem で Ruby で GitLab API を使ってみたことについてまとめてみました．今回を通して Gitlab gem で簡単に GitLab API を使えることがわかったのに加えて，queryの書き方を調べたことで，この手のライブラリの読み方についてさらにわかったきたように思いました．
API のドキュメントって読むのに少し慣れが必要だと前々から何となく思っていて，今回を通してほんの少し成長した気がします笑
今作っているツールも出来上がり次第，ブログに書いていこうと思います！！！
