著者:村上
【サービス】文字色と背景色の組み合わせがアリかナシかを判定してくれる「Accessible Brand Colors」
便利そうなサイトを見つけたので、うっかり忘れないようにまとめ。
文字色と背景色の組み合わせが「アリ」か「ナシ」かを判定してくれるサイト「Accessible Brand Colors」です。
サイトへのリンクはこちら。
Accessible Brand Colors by Use All Five
https://abc.useallfive.com/
このサービスを紹介していた記事はこちらから。
無料でデザイン上「アリ」な色の組み合わせをサクッと確認できる「Accessible Brand Colors」レビュー – GIGAZINE
https://gigazine.net/news/20190304-accessible-brand-colors/
利用方法も掲載しているので、こちらも合わせてご確認ください。
サービスの利用方法ですが、まずページにアクセスすると下記が表示されます。
あとは、右枠に2種類の色を選択するだけです。
画像だと既に選択済みですが、今回はなんとなくオレンジと緑を選択しました。
色を選択し終わったら、下の黒いボタン「Get Started」をクリックして、色の相性を判定します。
結果はこちら。
AAA が一番良く、続いて AA、AA18 と続き、一番悪い評価は DNP です。
今回私が選択した色の組み合わせの評価は、DNP で、どちらを背景色・文字色にしても、悪い組み合わせになるようでした。
右のエリアに全ての組み合わせ（と言っても、今回は2パターンですが）のサンプルがあるので、パッと見て分かりやすいですね。
確かに、緑を背景色にしても、オレンジを背景色にしても、どちらも文字が読みづらいです。
流石にこの配色をチョイスることはないと思いますが…配色に悩んだ時に、こうして客観的に評価してもらえるのはとてもありがたいですね。
また、ここからさらに色を追加し、文字色・背景色の組み合わせを増やすこともできます。
色を追加しすぎて見にくい時は、AAA ～ DNP の左横にあるチェックボックスからチェックを外すと、その評価をされた色の組み合わせがグレーアウトするので、分かりやすくなります。
以上、背景色・文字色の組み合わせを評価してくれるサービス「Accessible Brand Colors」のご紹介でした。
私のように、配色センスに自信のない方は是非ご活用ください。
著者:takahashi
異世界の魔法使いのためのニュースサイト “MAHO ONLINE”
インターネットを利用する人口が増えたことに伴い、様々なニュースサイトが作られ、現在では膨大な数のサイトが日々たくさんの話題を提供しています。
そんなニュースサイトの中に、どうやら異世界のものが紛れ込んでしまったようです。
Maho ONLINE – 賢い魔法使いのための総合ニュースメディア
こちらで紹介されている出来事が起きている世界は、どうやら現実とは異なる仕組みによって動いているようで、現実のニュースサイトでは見ることがないであろう摩訶不思議なさまざまなニュースが紹介されています。
ちなみに、Twitterの公式アカウントもあり、ニュースの更新情報をつぶやいているようです。
Tweets by MahoONLINEたくさんの魔法使いたちがPCやスマホに向かって日々記事やTwitterの更新をしているのでしょうか？
そんな光景を想像したらちょっとクスっとしちゃいますよね。
あ、でもハリーポッターのような世界の魔法使いたちだったらあながち違和感ないかも…w
・・・
種明かしすると、こちらのサイトは虚構新聞のようないわゆる”ジョークニュース”サイトです。
ただ、こちらは虚構新聞のような現実に基づくパロディネタではなく、魔法の存在する世界、という一貫した世界観があります。（とはいえ、世界観を保ちつつ現実世界をパロディにしたネタもあって面白いです。）
ファンタジー好きとしては、異世界のニュースをのぞき見してしまったような感覚になれてとても楽しいです。
現実のニュースに少し疲れてしまった時、少しばかり異世界のニュースを覗いてみるとリフレッシュできるかもしれませんね。
著者:takahashi
GoogleChromeで本格的で詳細な地震情報が受信できる拡張機能 “強震モニタ Extension”
緊急地震速報を自宅でも受信、特に自宅で常時稼働させているLinuxサーバー上で緊急地震速報を受信できるものはないかといろいろな探していたのですが、Windows、Android以外で使える緊急地震速報ソフトはなかなかありません。
あらゆるOSで利用できるGoogleChromeの拡張機能として緊急地震速報を受信できるものは存在していますが、ポップアップを表示するのみで残り秒数がわからなかったり、見逃しやすかったりといまいちな感じでした。
そんな中、先日別のことを調べていたら、たまたま偶然理想的な緊急地震速報Chrome拡張を発見しました！
その名も 強震モニタExtension です。
起動すると、このように日本全国の揺れの状態を地図上に色で表示した画面が表示されます。
揺れの強さの単位は震度ではなくgal(ガル)で表されます。
これだけではただ全国の揺れの状況を確認できるだけですが、設定を行うことで、地震発生時に音声を含めた通知を行わせることができます。
設定がかなり細かくできるので、最初見たときは戸惑いますが、通知の設定では基準として震度も指定できるので、地震に詳しくない人でも安心です。
実際どのように動作するかもチェックしたいポイントかと思います。
Youtube上で実際に動作している動画を見つけましたのでご紹介します。
画面右上の枠が今回ご紹介している拡張機能の画面です。
精度の高い緊急地震速報が発表される前から揺れの状態を監視することができるので、左上のウェザーニューズ社の緊急地震速報よりも早く警告が表示されており、ちゃんと通知音や地震の到達済みエリアも表示されていて、かなり高性能なアプリになっているようです。
（ちなみに、左上のウェザーニューズ社の地震速報も、有料会員になれば個人でも利用可能とのこと。個人で緊急地震速報を受信できるサービス自体あまり多くないので、こちらも貴重です。）
なお、Android版の強震モニタもあるようですので、Androidスマートフォンを持っていればスマホで同様の情報を見ることができます。
大きな地震が起きた際、震源地に近い地域にいた場合は地震発生から到達までほんの数秒しかない、という場合もよくあるようです。
テレビでも緊急地震速報は確認できますが、常にテレビをつけているとは限りませんし、いつ起きてもすぐに地震速報が受け取れる環境があると安心ですよね。
専用の機器が必要になるサービスが多く、そういったものを個人で導入しようとすると費用的な問題がありますが、PCやスマホで受信するものは無料～数百円程度で利用できるのでとてもありがたいです。
ちょっと地震の対策をしておきたいな～と思っている方は、是非こういった速報系アプリもチェックしてみてはいかがでしょうか。
著者:takahashi
Google ナビゲーションバーのウェブサービス通知を廃止へ
GoogleがサイトのナビゲーションバーにあったWebサービスの通知を廃止するようです。
この機能は、Googleの各サービスから送られた通知を一か所で確認できるというもの。
例えば、Google+やGoogleフォトなどからの通知を、このエリアからまとめて確認することが可能でした。
この機能は2019 年 3 月 7 日に廃止するとのことです。
エンジニアにとって、どんなUIが利用者にとって最も使いやすいのか、案外知ることは難しいもので、ある程度の試行錯誤は避けては通れません。
IT業界でもトップのGoogleでさえ、UIの試行錯誤を行っているのだということを垣間見た瞬間でした。
著者:杉浦
うまく機能する色の組み合わせを探すwebサービスPaletton
Paletton – The Color Scheme Designer
Palettonは規則だった印象のよい色の組み合わせを探すことを簡単にするwebサービスです。機能は色を探す機能と探した色を用いたサンプルを提示する機能の二つです。
色を探す機能はパレット上の点をいじることで主に動かします。複数の色を組み合わせる際は一つを動かした時、他の色も動き調和を崩さないようにします。大雑把に色を決めたら右上のRANDOMIZEが使いやすいです。styleは色の点の組み合わせの形、colorは色の点の範囲のことです。similar colors, unlike styleならば同じような色で組み合わせの雰囲気を変えます。
EXAMPLESは設定した色の組み合わせを用いたページ例です。実際に色を用いてページを作るまでもなくここで何となくの雰囲気を確認できます。
著者:takahashi
LaravelにTwitterログインを実装しようとしたら非常に面倒くさかった件(主にTwitter側が)
最近、業務でLaravel製のWebアプリを作ったことがきっかけで、LaravelベースのWebアプリケーションを個人でも作りたいと思い、いろいろ調べています。
取り敢えずまずはTwitterアカウントで自分のWebアプリにログインできるようにしたいと思い、やり方を調べていたのですが、出だしで躓きました。
従来のように apps.twitter.com でアプリのトークンを取得しようとしたところ、何やら見慣れないメッセージが…
Google翻訳に通すとこう。
既存のアプリの管理を続けることはできますが、新しいアプリを作成したりTwitterプレミアムAPIを使用したい場合は、開発者アカウントを申請してください。 開発者プラットフォームとして、私たちの最初の責任は私たちのユーザーにあります：Twitterで会話の健康をサポートする場所を提供すること。私たちのプラットフォームの誤用を防ぐために、私たちは開発者のためにいくつかの新しい要件を導入しました。
はぁ…と思いつつも開発者アカウントとやらを申請してみることに。
ところが…
何これめちゃくちゃ面倒くさくなってる…
特に最後のAPIの使用用途(アプリの内容)についての記述は、最低300文字以上、しかも英語で説明しないといけないようです。
これ英語ができない人にとってはハードルめちゃくちゃ高くなってるじゃん…
おまけに、提出すれば即時にAPIの利用ができるわけではなく、審査期間を得てTwitterから承認を得られれば、晴れてトークンが発行される仕組みになったようです。
【第1回】Twitter APIを使うためにdeveloper accountの申請をしよう！（外部サイト）
上記のサイトによると、こちらの方は20日ほど待たされたそうです。
なんという面倒くささ…
でも自分が使用したいのはまっとうな理由からですし、申請してみたら案外すんなり通る可能性もあるかもしれないので、頑張って申請してみたいと思います。
Laravel+Twitter周りは、成功したらまた載せようと思います（汗
著者:村上
【Webサービス】静鉄バスの運賃時刻検索サイト「なんじ？くん」がサービスを終了
県西部にお住いの方には全くと言っていいほど影響がない話題ではありますが…県中部地区を中心として運行している静鉄バスの運賃時刻検索サイト「なんじ？くん」が2018年3月24日(土)の24時にサービスを終了していました。
実家（藤枝市）にいた頃にはたまにお世話になっていたんですよね。
で、その代わりに、今後は「NAVITIME」と連携した新検索サイトがあるとのこと。
サイトは下記からご確認いただけます。
乗換・時刻表検索|しずてつジャストライン
https://transfer.navitime.biz/justline/pc/map/Top?window=transfer
実際の画面はこんな感じ。
こちらはPCから見た時のページです。
で、こちらがスマートフォンで見た時のページです。
出発・到着のバス停を指定すれば、発車時刻、到着時刻、運賃などが表示されます。
また、出発や到着時刻を指定することもできます。
この辺りは、他の路線検索サイトと同じですね。
特に操作に戸惑うこともなく利用できました。
個人的には、スマートフォンページの方が、全体的にデザインがシンプルで使いやすかったです。
が、文字入力で若干カクカクしたような…。
まあ、パス停など候補スポットはたくさんあるのでしょうがないのかも。
以上、静鉄バスの運賃時刻検索サービス「なんじ？くん」のサービス提供終了と、その代わりとなる検索ページのご紹介でした。
県中部にお出かけすることがあれば、是非ご活用ください。
著者:杉浦
googleスプレッドシートのメール通知機能
googleスプレッドシートは無料で多人数の共同作業を容易に行うことのできるExcelの様な表を扱うwebサービスです。長期に渡って多人数で共同作業を行う際、編集が行われたことを知る機能の有無は重要です。定期的に見る、ということもできますが手間であり漏れも出がちです。googleスプレッドシートにはgmailに対して通知を行う機能が備わっています。
スプレッドシートの通知をオンにする – パソコン – ドキュメント エディタ ヘルプ
やり方は簡単。画像の様にツール > 通知ルールと開いて、通知のタイミングを設定、保存、完了するだけです。これでgoogleスプレッドシートを開いているgoogleアカウントに向かって通知メールがルールに従ってその都度送信されます。
著者:村上
【Webサービス】簡単にQRコードを生成できるサイト「QRのススメ」
現在、業務で開発中のアプリに QRコードリーダーを組み込んでいるのですが、その際にテストとして読み込む適当なQRコードを生成するときにお世話になったサイトがこちら。
簡単に自分用のQRコードを無料で安心作成できるサイトです。主要な携帯電話からスマートフォン(Android、iPhone)まで、どのキャリアにも対応していますので集客やプライベートに幅広くご活用ください。気になるアクセス集計も可能です。
サイトのURLを指定し、簡単にアクセスできるQRコードや、自由なテキストを指定できるQRコードなど、様々な種類のQRコードが生成できます。
また、コードの中央にイラストや文字が入ったQRコードを生成することもできます。
使い方はとっても簡単で、まずページ中央のやや下にある「さっそく作る」ボタンをクリック。
あとは、作りたいQRコードのタイプを、
- サイトURL
- 自由テキスト
- アドレス帳
上記から選び、QRコードに含めたい情報を指定するだけ。
またこの時、コードの色やサイズも指定できます。
設定が完了したら、下部にある「作成する」をクリックし、作業は完了です。
あとは、別ウィンドウで生成されたQRコードが表示されるので、保存してご利用ください。
以上、手軽にQRコードが生成できるWebサービス「QRコードのススメ」のご紹介でした。
本当に簡単だし、何よりもわかりやすくておすすめです。
著者:杉浦
メール機能テストサービスmailtrapの紹介
Mailtrap.io — Fake smtp testing server. Dummy smtp email testing
Mailtrapはメールにトラップを仕掛けることでメールテストを行うことのできるサービスです。送られるはずのメールをmailtrapで止めることで安全お手軽にメール機能のテストができます。
アカウント登録が必要ですがgoogleアカウント、githubアカウントを使用することが可能なので登録は楽です。登録するとメールボックスとメールサーバが渡されます。
メーラとサーバの情報のみならず、上の画像の赤丸の部分から各種フレームワークに対応したメール設定スニペットが用意されています。このサーバの情報に従ってメールを送ると次の様になります。
実際には送られず、mailtrapでメールが止まり、送られたメールがどういう風になるか見ることができます。無料版は50通までしかメールを保存できませんが、あふれ次第消してもらえる仕様になっているため受信ボックス詰まって困ることはありません。mailtrapを使うことでテスト用のメールアドレスを作る必要もテストで送られてきた余分なメールを消す必要もありません。mailtrapは実に便利です。