福岡のホームページ制作会社

  1. 地味に便利なブラウザ上のツールたち

COLUMNコラム

地味に便利なブラウザ上のツールたち

私は主にWEBサイト制作におけるコーディングを担当しています。
今回は、制作中や制作以外の業務に役立つ、地味に便利なツールをご紹介します。


Quick HEX to RGB



https://manabox.github.io/quick-hex-to-rgb/
その名の通り、カラーコードをRGB値に変換したい時に使っています。
基本的に、cssでの色指定にはカラーコード(例:#FFFFFF)を使用しますが、背景色の透過などRGBAカラーモデルで色を指定したい時に便利です。


このツールは有名なWEBクリエイターボックスの中の方が作られています。
他にもこのようなツールはあるのですが、見た目の可愛さと分かりやすさ・クリックでコピーできる手軽さがよくて、よく使っています。


ちなみにVue.jsで作られているらしく、制作方法まで公開してくれています。
Vue.jsでカラーコードからRGB値にサクッと変換する方法
WEB制作に関する情報を幅広く掲載しているため、いつもお世話になっているサイトです。


FontFace Ninja


FontFace Ninjaは、Chromeの拡張機能として使うことができます。
safariとfirefoxでも使用できるみたいですね。

サイト内のテキストにマウスカーソルを重ねると、使用フォントを確認することが出来ます。
気に入ったフォントをお気に入り登録したり、そのフォントを使って好きな文章を試しに打ってみることも出来る、便利で楽しい機能です。


ちなみに、画像になっているテキストのフォントも教えてくれます。
こちらの精度はまちまちかもしれません。


Google翻訳



https://translate.google.co.jp/
言うまでもなく便利なGoogle翻訳。


私たちはWEBサイト制作でGithubを使ったソースコードのバージョン管理をしています。
その為に使用しているSource Treeでエラーが発生した際、そのエラー文をそのままGoogle翻訳にコピペ。


この場合に限らず、エラー文は英語で表示されることが多いので凄く難しいことを言っているように感じてしまうのですが、翻訳するとなんとなく単純なものに感じられます。
心を折られないためにも、小さな工夫は大事ですね。


WEBサイト制作に関する情報なども、英文のみで公開されていることは多いです。
サイト全体の場合、Chromeでは翻訳アイコンを押すだけで翻訳してくれます。
英文だからと諦めず、翻訳機能を使ってみることで見える世界もあるかもしれません。
自力で読めるようになることが、一番理想的ですが…!


時間計算.com


http://xn--kjvu88b4qkyhl.com/


開始日時と終了日時を入力すると、「日時分秒」と「日換算」「時間換算」「分換算」「秒換算」で経過時間を計算してくれるツールです。
これはちょっと需要が偏るツールなのですが、私はとても助けられています。


ブラウザ上ツールの良さ


私は上にあげたようなツールをブックマークして、すぐに使えるようにしています。
ブラウザ上のツールの良さは、アプリを起動したり自分が動いたりせず、スッと出してパッと使えるところ。


使わなくても済むけれど、毎日のめんどくさいをほんの少し楽にしてくれます。
「地味に便利なツール」をさらに発掘して、効率的で楽しいWEB制作を続けていきたいです。


この記事を書いた人 小畑 舞乃 Creative & Development Division