2020-06 on akky@サイボウズラボ・ブログ

Unim.press - redditのトップページを新聞紙面風にデザイン

Sat, 27 Jun 2020 00:00:00 +0000

unim.pressは、海外の巨大掲示板 reddit の最新人気記事を昔の新聞風デザインにして見せるというサイトです。

記事の本文は全部埋め草なので、タイトルで気になったら結局reddit にジャンプするんですけどね。できればコメントから記事本文みたいなものも生成してほしいところ。

記事にマウスを置くと、その記事の画像だけカラーになります。レトロ風味のモノクロと、気になった記事でちゃんと画像を見たいという気持ちを両立させた設計でしょうか。

新聞を何十年も読んできた人は特に、新聞の記事並びの形式に親和性があるでしょうし、ただ表のように順に並んでいるよりもこちらの方が楽という人はいるかもしれません。今起こっていることを俯瞰的にみられるという効果も… どうでしょうね。

それに、できた紙面を見ると懐古調というか、くだらないニュース(失礼)もなんだか意義のあるニュースに見えてくるということもあるかも。あるメディアを別のメディアの形式に置き換えるというアイデア、他にも何か作れるかもしれません。

via Hacker News

Plain Old Recipes - レシピサイトの最小限必要部分だけを表示する変換サイト

Fri, 26 Jun 2020 00:00:00 +0000

クックパッドの適当なレシピページには、画像がふんだんにあり、関連レシピやレシピを使った人のレポートなども並んでいます。

これを plainoldrecipe に通すと、こんな感じで表示されます

1ページにレシピがすべて収まり、料理の写真は1枚だけ。

対応サイトは70個以上あるようで、レシピ部分の抜き出しをがんばって作ったのだろうなあと。

他のレシピサイトのレシピを入れてみたもの。

料理の材料や名前で似ているレシピを辿れるのもレシピサイトの楽しみだと思いますが、簡潔なものだけ欲しいというユーザーには使えるかもしれません。それぞれのサイトがそういうモードを持っていてくれてもいいのかも。

GitHub でサービスのソースコードが公開されています。poundifdef/plainoldrecipe

その説明によれば、これらのレシピサイトをパーズするライブラリがOSSでこれも公開されていて、このライブラリを使用して実現しているようです。

via Hacker News

首都からの距離で世界を分けたボロノイ図

Fri, 26 Jun 2020 00:00:00 +0000

首都からの距離をボロノイ図で表した世界地図です。もしも首都に一番近いエリアがその国だったら、と仮定すると、今ある国境とは違った景色が見えてきます。

アメリカ合衆国の西部がメキシコシティにより近いのは、歴史的経緯からも不思議ではない感じ。

日本(東京からが最短)を見ると、

カムチャッカどころかアラスカにまで食い込んでます。アラスカの西端ってオタワより東京の方が近いんですね。九州地方は完全にソウルの方が近い。

同様に、アメリカ合衆国の50州について州都からの距離で作ったボロノイ図もあります。

こちらは人工的に線引きされた州境も多いのであんまり違和感は出ないかな。アメリカの場合、州都は必ずしも大都市ではない、というのもありますね。

日本の都道府県でやっても面白そうだなと思いましたが、検索したら既に作ってる方がいました。

【最寄り県庁MAP】
日本の各市町村を「その市町村役所・役場から最も近い都道府県庁」ごとに塗り分けてみました。直線距離だけで見れば、他県の県庁のほうが近い地域はかなりたくさんあるようです。以下ツリーで拡大版など。#地図で見る日本 pic.twitter.com/z3D5IMqPWk
— 重永瞬／講談社現代新書『新しい日本地理』3万5000部！ (@Naga_Kyoto) August 29, 2019

隣県の県庁所在地の方が近いし遊びに行く、みたいな地域も多そうですね。

via Hacker News

世界地図をさまざまな言語の国名で生成できる Country names in any language

Thu, 25 Jun 2020 00:00:00 +0000

Country names in any language(国名をいろいろな言語で)は、ブラウザ上の世界地図の国名を指定した言語で表示するというウェブページです。

日本語指定でおなじみの感じのヨーロッパ。

Language のボックスに言語名を入れることで、様々な言語で国名を埋め込んだ地図を表示できます。

中国語や、

ドイツ語を指定してみたもの。

ヒンディー語になると、読めないので全部同じようにも見えてしまいました。

任意の場所を任意の縮尺で表示でき、Open Street Map の地図を好きな言語の国名入りで生成することができます。

via Maps Mania

コピー禁止や右クリックメニュー禁止を解除するブラウザ拡張 Absolute Enable Right Click & Copy

Fri, 19 Jun 2020 00:00:00 +0000

Absolute Enable Right Click は、ウェブページのコピー禁止や右クリック禁止を無効化できるブラウザ拡張です。

右クリック禁止のコードを試せるページで、普通に右クリックすると “Right-click is disabled”(右クリックは無効です)というメッセージが出ます。ここで、この拡張のメニューから"Absolute Mode"をオンにして、

ページを再読み込みすると、

サイト上での指定に関わらず、右クリックメニューが使えるようになります。

インターネットに無条件公開しておいて読んでほしくないということはないと思うので、どうしてこんな不便なことをするのか、ですが、自分の書いた文章をコピーで使いまわされた経験があるとか、あるいは経験がなくてもコピーされてしまうことを恐れてのことのようです。

ただ、ちょっと知識があればいくらでも回避できてしまう仕組みなのでどうしてもという人はコピーや保存はできてしまうし、実際的には悪意のない多くの訪問者の不便を増やしているだけなんですよね。最近は滅多に見なくなった気もしますが。

Firefox拡張もあります。ソースコードはこちら。

Link to Text Fragment - Googleによるウェブページの任意の場所をリンクできるブラウザ拡張

Thu, 18 Jun 2020 00:00:00 +0000

新しいLink to Text Fragment Google社自身によってリリースされた、ウェブサイトの好きな箇所をURL化して共有できるChrome拡張です。

拡張をインストールした状態でページ上のテキストを選択し、右クリックメニューを出すと、Copy Link to Selected Text (選択されたテキストへのリンクをコピー)というメニューが増えています。

ここでクリップボードに取得されたURLを Chrome ブラウザ上で開いてみると、

先ほどリンクを作成したwebページが開かれた上で、選択していた部分が黄色くハイライトされ、ページもそのハイライトされた部分までスクロールした状態で開かれます。

選択するテキストが短すぎると、URLが作れない、というエラーが出ます。

利用シーン

これまで、他人が作ったウェブサイトのURLを他の人と共有することはできても「この特定の部分を見せたい」というのは難しかったと思います。やるとすればページを開いた後にページ内検索で"○○○“を探して、とかでしょうか。

最新のブラウザとこの拡張を使えば、ページの特定の箇所をはっきりと示して共有できるため、長いページのある特定の箇所を素早く見てもらいたい、といった作業が効率化されるでしょう。

受ける側はブラウザが最新のバージョンであればこの拡張は不要です。Chrome を随時アップデートしている相手なら問題ないでしょう。

仕組み

Chrome バージョン80 から使えるようになった、Text URL Fragments の機能を使ったものだそうです。

コピーされたURLの後ろに、選択した文字列を含む文字列が追加されていますね。

日頃、チャットツールや社内のグループウェアなどでネット上のウェブページを紹介することが多い人などにとって、紹介の質が上がる良いツールなのではないかと思いました。

via The Verge

No Paint - ランダムな筆致を選んで抽象アートを作るサービス

Wed, 17 Jun 2020 00:00:00 +0000

No Paint は、ブラウザ上でランダムに描画される形や色を取捨してアートを作り上げるというサイトです。

起動画面にあるように、今描かれている「何か」が気に入れば"Paint"ボタンを押すと採用され、“No"ボタンを押すとそれはキャンセルされて次のまたランダムな何かが描かれ始めるというものです。

ランダムに動くものしか選べない時点でかなり自由度は低いのですが、気に入らないものを除外できるという点だけで、最低限その人の好みみたいなものは出るのでしょうか。

使ってみた人が自分の作品を公開したりしています。

https://imgur.com/9efzWaC

https://imgur.com/gallery/3ETezat

https://imgur.com/MhyayTW

なんかアート的なもので著作権の心配がないものを手早く作る、とかですかね。使い道があるとすれば。

Talking Clock - 定期的にChromeブラウザに時刻を喋らせるブラウザ拡張

Fri, 12 Jun 2020 00:00:00 +0000

Talking Clock は、Chrome ブラウザ上で時刻等を読み上げさせられる拡張機能です。

インストールの後、拡張アイコンから設定メニューへ行きます

定期的に時刻を読み上げるモード。作業中や勉強中に設定するとペースメーカー的に使えそうです。特に時間を決めて速さを練習するような場合など。

任意の時刻に好きなメッセージを喋らせるモードも。発声用の言語も設定から多数指定でき、拡張のメニューは英語ですが話す内容は日本語でも問題なく動きました。

最近はこういうのはスマートフォンアプリでやるのかなとも思いますが、スマホで別のことをしている時なら、PC側でもできるのはいいかもしれませんね。ブラウザだけで動くので、まあブラウザ拡張もインストールといえばインストールですが、入れたり消したりする手間もアプリより楽ですし。

via Hacker News

プロッター・プレゼンテーション

Fri, 12 Jun 2020 00:00:00 +0000

原油の需要と価格の経年グラフを見ながら語るプレゼンテーション動画なのですが、面白い仕組みが一つ。プロッターでグラフを描かせながら、年ごとの原油価格とそれに影響を与えた事件を語っていきます。

ペンを取り付けるタイプのプロッター

プレゼンの途中でペンの交換も。グラフの目盛り線とプロットの線を違えてます。

オイルショック!

事件の時の書き込みは赤ペンで手書きなのですが、これもプロッターに描かせられればもっと良かったかも。

使っているプロッタは AxiDraw V3 / A3。8万円ぐらい。昔のものではなく今の製品なんですね。

via Hacker News

skip-silence 動画の無音部分を早送りで飛ばすブラウザ拡張ツール

Wed, 10 Jun 2020 00:00:00 +0000

vantezzen/skip-silence を Chrome に入れて動画を再生すると、動画の無音部分を飛ばして視聴することができます。

この拡張を試すにあたって、音がない割合の多い動画ってなんだろうと考えました。まず思いついたのはオンラインの講義動画で、「じゃあこの問題を解いて。時間は5分」で5分間無音になるかと思ったら、YouTuber が「じゃあ解けるまで動画を止めて」って指示するみたいですね。なのであまり無音部分が無い。

能の動画。間のところがすっ飛ばされます。無音のところの進む速さはデフォルトで3倍ですが、最高5倍まで変えられます。

将棋なんかも生で観戦すると待ち時間が非常に多い印象がありますが、YouTube の動画を見ると大盤解説がずっと喋っていたりしますね。あと、指した時に必ずしも大きな音がなるとは限らない。

この拡張は audio/video タグで動画を見せているサイトで動くのですが、YouTube で使うと「Pre-buffering 機能が使えません」という警告が出ます。HTML5 の pre-buffering が使えるサイトの場合、動画の無音部分から有音部分に切り替わる箇所を先読みして、より正確に次の有音の初めから再生できるようです。

たとえば、CNN の動画は pre-buffering に対応していました。ニュース動画だとずっと喋りっぱなしだったりするのでツールの威力も今一つでしたが。

ほとんどが無音で、音がするときだけを観たい、となるとどういう状況で役立ちますかね。なんかはまる状況の人にはすごく役立つケースもありそうな。今はブラウザの機能だけでこれが実現できるんですね。

DECODELIA - 自分だけパソコンの画面が見えるようにするChrome拡張(要赤メガネ)

Fri, 05 Jun 2020 00:00:00 +0000

Chrome拡張機能DECODELIA は、自分の眼鏡からだけ見えるようにブラウザの画面表示を改造するツールです。

Chromeブラウザ上でこの Decodelia を有効にすると、ページの表示がこんな風になります。

これでブラウザで何を見ているのかわからなくなりますが、赤いセロファンを通してみると

こんな風に、文章が読めるようになります。

読めるように… なってるかな? 頑張れば読めるかもしれないけど、常用するにはちょっとつらいかも。

原理は暗記シートと同じですし、

https://www.amazon.co.jp/dp/B00BTQFTD2

当然ながら、元々赤色の部分は見えないでしょうね。

偏向グラスを使った方が、色も見えるし快適かもという話もあります。ただその場合は表示側も改造が必要なのかな。

SF小説でも、そんな感じで後ろの人が見てるディスプレイとまったく別の内容を読み書きしてる、なんて描写を見たことがあるので、うまく作れば役に立つ場面もあるのかもと思います。このDECODELIA はコンセプトを伝える程度の実用性でしょうけれど。

via Naked Security

YesAQ - 「はい」になる回答だけを集めたFAQ

Wed, 03 Jun 2020 00:00:00 +0000

Basecamp というサービスの FAQ に特徴があるという書き込みがあったので、チェックしに行きました。

よくある質問(FAQ)を置いてあるウェブサービスは多いと思います。問い合わせが多い質問に対してあらかじめ回答を見せておくことで、サポートの人員を減らせますし、利用者もメール等の返事を待つことなく疑問が解消できます。

すべての答えが「はい」なら

Basecamp の yeaAQ は、すべての回答が「はい(Yes)」になるように質問文を書いています。

ドライブインの店頭に貼ってあった「すべての答えがイエスの貼り紙」にインスパイアされたものだそうです。

FAQ の質問文を読んでからそれに対する回答を読むことは、1つ目の質問という情報を頭の中に積んでいることになりますね。最初から答えが「はい」だとわかっている質問しか並んでいなければ、覚える手間がはぶけてわかりやすいのかもしれません。

逆に、Yes ほど受けは良くないかもしれませんが、すべてが No になるFAQ というのも作れそうですね。と思ったけどこれは公園の禁止事項の看板なんかで既にありそうかな。

作る方は、自然に答えがはいになる質問文しか書けないあたりで努力が必要そうにも思いますけど。よくある質問を「よくある」にしない工夫にする変化球的サイトデザインと言えるかもしれません。