<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
		<title>2023-01 on akky@サイボウズラボ・ブログ</title>
		<link>https://labs.cybozu.co.jp/blog/akky/archives/2023-01/</link>
		<description>Recent content in 2023-01 on akky@サイボウズラボ・ブログ</description>
		<generator>Hugo</generator>
		<language>ja</language>
		
		
		
		
			<lastBuildDate>Wed, 25 Jan 2023 00:00:00 +0000</lastBuildDate>
		
			<atom:link href="https://labs.cybozu.co.jp/blog/akky/archives/2023-01/index.xml" rel="self" type="application/rss+xml" />
			<item>
				<title>キャラクターがログインフォームをチラチラ見てる</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/</link>
				<pubDate>Wed, 25 Jan 2023 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/</guid>
				<description>&lt;p&gt;画面上の目がマウスカーソルを追いかけるというと、X Window System の &lt;a href=&#34;https://ja.wikipedia.org/wiki/Xeyes&#34;&gt;Xeyes&lt;/a&gt; の昔(Wikipedia によれば 1988 年!)からあるアイデアですが、ウェブサイトのログイン画面を見ているキャラクターというアイデアがこちら&lt;/p&gt;&#xA;&lt;blockquote class=&#34;twitter-tweet&#34;&gt;&lt;p lang=&#34;en&#34; dir=&#34;ltr&#34;&gt;What a cute login form 🥰 &lt;a href=&#34;https://t.co/Qc1csk0I52&#34;&gt;pic.twitter.com/Qc1csk0I52&lt;/a&gt;&lt;/p&gt;&amp;mdash; Victor (@vponamariov) &lt;a href=&#34;https://x.com/vponamariov/status/1617763405708025856?ref_src=twsrc%5Etfw&#34;&gt;January 24, 2023&lt;/a&gt;&lt;/blockquote&gt;&#xA;&lt;script async src=&#34;https://platform.x.com/widgets.js&#34; charset=&#34;utf-8&#34;&gt;&lt;/script&gt;&#xA;&#xA;&#xA;&lt;p&gt;メールアドレスを入力するタイプに応じて雪男風のキャラクターの視線が動きますが、面白いのはパスワードを入力する時のキャラクターの動作。&lt;/p&gt;&#xA;&lt;p&gt;パスワード入力時のマナーとして確立した挙動ですね。&lt;/p&gt;&#xA;&lt;p&gt;twitter のリプライからは、この手のキャラクターがいつ登場したかの情報が集まっています。&lt;/p&gt;&#xA;&lt;p&gt;小物に自分のデータを印刷して購入できるサービス&lt;a href=&#34;https://www.stickermule.com/jp/login&#34;&gt;Sticker Mule のログイン画面&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://www.stickermule.com/jp/login&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/stickermule-login-form-character-and-password-form_hu_f3ba1b033154173c.webp 480w, https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/stickermule-login-form-character-and-password-form_hu_a067c95091880cab.webp 683w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/stickermule-login-form-character-and-password-form.png&#34; width=&#34;683&#34; height=&#34;687&#34; alt=&#34;&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;Sticker Mule のログイン画面&lt;/p&gt;&#xA;&lt;p&gt;VPNサービス &lt;a href=&#34;https://www.tunnelbear.com/account/login&#34;&gt;TunnelBear のログイン画面&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://www.tunnelbear.com/account/login&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/tunnelbear-login-form-character-and-password-form_hu_dc64a9ecfc335652.webp 480w, https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/tunnelbear-login-form-character-and-password-form_hu_2c160e9ff0c8c244.webp 768w, https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/tunnelbear-login-form-character-and-password-form_hu_ebeffda672ed9335.webp 918w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/tunnelbear-login-form-character-and-password-form.png&#34; width=&#34;918&#34; height=&#34;870&#34; alt=&#34;&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;昔 dribble でも見た、という反応は多かったのですが、&lt;a href=&#34;https://dribbble.com/&#34;&gt;Dribbble.com&lt;/a&gt; のことであれば、今のログインフォームにはキャラクターは居ないようです。&lt;/p&gt;&#xA;&lt;p&gt;2019年の Flutter と Flare のデモで、スマートフォン上で同様のフォームを作るコードもありました。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://github.com/GJJ2019/Flutter-Teddy-SignIn&#34;&gt;GJJ2019/Flutter-Teddy-SignIn: A Flutter Project For Real Sign In Page Based on Flare Teddy animation&lt;/a&gt;&lt;/p&gt;</description>
			</item>
			<item>
				<title>ChatGPT で文面を書き換えることで Gmail のスパム(誤)判定を突破する</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2023/01/rewriting-by-chatgpt-to-go-through-gmail-spam-filter/</link>
				<pubDate>Mon, 23 Jan 2023 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2023/01/rewriting-by-chatgpt-to-go-through-gmail-spam-filter/</guid>
				<description>&lt;p&gt;Tor ノードの運営者が Tor の濫用に関する苦情メールに返答する際に使うテンプレート文面でメールを送ろうとしたとき、Gmail のスパムフィルタにスパム認定されてしまったそうです。&lt;/p&gt;&#xA;&lt;p&gt;この運営者は &lt;a href=&#34;https://openai.com/blog/chatgpt/&#34;&gt;ChatGPT&lt;/a&gt; を使って&lt;a href=&#34;https://neelc.org/posts/chatgpt-gmail-spam/&#34;&gt;メール文を書き換えさせると、Gmail がスパムと判定しなくなったのでめでたしめでたし&lt;/a&gt;、という話。&lt;/p&gt;&#xA;&lt;p&gt;書き換えてください(reword)で実際にどんな細かな指定をしたのかは書いていないのですが、少し長くなった文章でメールを送り直すと、こんどはスパム認定されなかった。今後はスパム認定されるたびに ChatGPT に書き換えさせようかな、と言っています。&lt;/p&gt;&#xA;&lt;p&gt;今回はスパムでないメールを通すための正当な ChatGPT の利用でしたが、スパマーがスパムフィルタをかいくぐるために ChatGPT やそれに類する機械学習ツールを使うことは容易に予想できますし、すでにそれは行われているのかもしれないですね。便利なツールを使いたい人は善悪に関わらずいるわけで。&lt;/p&gt;&#xA;&lt;p&gt;via &lt;a href=&#34;https://news.ycombinator.com/item?id=34479648&#34;&gt;Hacker News&lt;/a&gt;&lt;/p&gt;</description>
			</item>
			<item>
				<title>NopeCHA - ブラウザにCAPTCHAを解かせるブラウザ拡張</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2023/01/nopecha-solves-captcha-for-you/</link>
				<pubDate>Fri, 20 Jan 2023 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2023/01/nopecha-solves-captcha-for-you/</guid>
				<description>&lt;p&gt;&lt;a href=&#34;https://chrome.google.com/webstore/detail/nopecha-captcha-solver/dknlfmjaanfblgfdfebhijalfmhmjjjo/related&#34;&gt;NopeCHA&lt;/a&gt;は、いろいろなウェブサイトであなたが本当に人間ユーザーか確かめるために出てくる CAPTCHA を自動で解いてくれる Chrome 拡張機能です。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://chrome.google.com/webstore/detail/nopecha-captcha-solver/dknlfmjaanfblgfdfebhijalfmhmjjjo/related&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2023/01/nopecha-solves-captcha-for-you/nopecha-chrome-store_hu_11d88d65c7e690a7.webp 480w, https://labs.cybozu.co.jp/blog/akky/2023/01/nopecha-solves-captcha-for-you/nopecha-chrome-store_hu_604cf52ed17fef09.webp 768w, https://labs.cybozu.co.jp/blog/akky/2023/01/nopecha-solves-captcha-for-you/nopecha-chrome-store_hu_98f5762055151cb8.webp 1278w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2023/01/nopecha-solves-captcha-for-you/nopecha-chrome-store.png&#34; width=&#34;1278&#34; height=&#34;782&#34; alt=&#34;&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;NopeCHA Chrome拡張の配布ページ&lt;/p&gt;&#xA;&lt;p&gt;Google ReCAPTCHA のデモサイトで試してみた様子が以下の動画です。フォームが ReCAPTCHA を持っていると、この拡張機能が勝手にチャレンジを始め、信号やバスが映った画像をクリックしてくれます。&lt;/p&gt;&#xA;&lt;p&gt;http://localhost:8099/wp-content/uploads/2023/01/NopeCHA.mp4&lt;/p&gt;&#xA;&lt;p&gt;最も有名でどこででも見る ReCAPTCHA だけでなく、hCaptcha, FunCAPTCHA, AWS CAPTCHA, Text CAPTCHA など他社の同様の CAPTCHA にも対応しているようです。&lt;/p&gt;&#xA;&lt;p&gt;メニューを見たところ、フリーで毎日一定回数が使えて、それを超えて使いたければ有料プランに入る、というビジネスモデルなのですね。&lt;/p&gt;&#xA;&lt;p&gt;ウェブサイトへの訪問が人間ユーザーなのか、スクリプト等で回ってくるプログラムなのか、を判別するための CAPTCHA ではありますが、この拡張のようにプログラムで解けてしまうとなると、設置するサイト側も、入力を要求されるユーザー側も、誰も得しない状況になってきていますね。&lt;/p&gt;&#xA;&lt;p&gt;なお、拡張が「すべてのウェブサイトへのアクセス権限」を要求してくるのが心配。CAPTCHAを解くために本当にそこまで必要なのかな、と。前期のように単体でお金を稼ぐ機能がついているので、お金が稼げている時は何も悪さはしないと思いますけれど。拡張をクリックした時だけデータ読み取りをするように変更することはできますが、その時は各種 CAPTCHA を見つけて勝手に解いてはくれなくなります。&lt;/p&gt;</description>
			</item>
			<item>
				<title>ScrollyVideo.js - ブラウザのスクロールと動画ファイルを簡単に同期できるライブラリ</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2023/01/scrollyvideo-js/</link>
				<pubDate>Wed, 18 Jan 2023 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2023/01/scrollyvideo-js/</guid>
				<description>&lt;p&gt;&lt;a href=&#34;https://scrollyvideo.js.org/&#34;&gt;ScrollyVideo.js&lt;/a&gt; は、ブラウザの画面効果のための&lt;a href=&#34;https://github.com/dkaoster/scrolly-video&#34;&gt;ライブラリ&lt;/a&gt;で、mp4 で置いた動画ファイルをページのスクロールと連動してくれます。&lt;/p&gt;&#xA;&lt;p&gt;と、言葉で書いても伝わってる気がしません。&lt;a href=&#34;https://scrollyvideo.js.org/&#34;&gt;ScrollyVideo.js のサイトで見るのが一番わかりやすい&lt;/a&gt;と思います。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://scrollyvideo.js.org/&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2023/01/scrollyvideo-js/scrolly-video-js-demo-screenshot_hu_cf9b184fd91f71a8.webp 480w, https://labs.cybozu.co.jp/blog/akky/2023/01/scrollyvideo-js/scrolly-video-js-demo-screenshot_hu_ab269cc4354afcf3.webp 627w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2023/01/scrollyvideo-js/scrolly-video-js-demo-screenshot.png&#34; width=&#34;627&#34; height=&#34;795&#34; alt=&#34;&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;このデモでは、サンフランシスコのゴールデン・ゲート橋をドローンで空撮した mp4 ファイルが使われています。ページを下にスクロールしていくと、動画が先に進むため、スクロールに合わせてみている自分が前に飛んでいるような感覚が得られます。&lt;/p&gt;&#xA;&lt;p&gt;デモでは単純なスクロールとの同期だけでなく、スクロールの途中でテキストボックスが流れたりもしていますが、&lt;a href=&#34;https://github.com/dkaoster/scrolly-video/blob/main/demos/html/index.html&#34;&gt;vanilla JavaScript のデモ&lt;/a&gt;(ダウンロードしてブラウザで開くだけで動きます)では、非常に短いHTMLのコードで基本的な部分が動くのがわかります。&lt;/p&gt;&#xA;&lt;p&gt;自分で撮影した mp4 ファイルでももちろん動きましたが、あまりこのライブラリで見栄えのするような動画がなく。&lt;/p&gt;&#xA;&lt;p&gt;デモのように前後に進む動画がおそらくよく合うんでしょう。部屋を360度ぐるっと回ってみる動画とかを表示してみましたがあまりいいものになりませんでした。&lt;/p&gt;&#xA;&lt;p&gt;ライブラリはプレーンなJavaScript の他、React, Svelte, Vue からも呼び出せるようになっていて、それぞれのデモファイルがあります。&lt;/p&gt;&#xA;&lt;p&gt;via &lt;a href=&#34;https://flowingdata.com/2023/01/18/scrolly-video-javascript-library/&#34;&gt;FlowingData&lt;/a&gt;&lt;/p&gt;</description>
			</item>
			<item>
				<title>NBAチームのクリーム色のユニフォームが「動く広告が映りこむので」不採用に</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2023/01/nba-city-uniform-unable-to-use-cream-colour/</link>
				<pubDate>Mon, 16 Jan 2023 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2023/01/nba-city-uniform-unable-to-use-cream-colour/</guid>
				<description>&lt;p&gt;アメリカ・バスケットボールリーグNBAの&lt;a href=&#34;https://www.nba.com/bucks&#34;&gt;ミルウォーキー・バックス&lt;/a&gt;で、毎年趣向を変えて作っている第三ユニフォームの色が、技術的な問題から使えなくなったという話です。&lt;/p&gt;&#xA;&lt;blockquote class=&#34;twitter-tweet&#34;&gt;&lt;p lang=&#34;en&#34; dir=&#34;ltr&#34;&gt;Just because I’ve seen it a bunch today: we aren’t allowed to do cream colored jerseys anymore. There are reasons, but suffice it to say it won’t appease anyone to get into it, so I’ll just say: we would if we could.&lt;/p&gt;&amp;mdash; Dustin Godsey (@dgodz) &lt;a href=&#34;https://x.com/dgodz/status/1590857058613854209?ref_src=twsrc%5Etfw&#34;&gt;November 11, 2022&lt;/a&gt;&lt;/blockquote&gt;&#xA;&lt;script async src=&#34;https://platform.x.com/widgets.js&#34; charset=&#34;utf-8&#34;&gt;&lt;/script&gt;&#xA;&#xA;&#xA;&lt;p&gt;チームのCMO(チーフ・マーケティング・オフィサー)がツイッターで発信したのは、「クリーム色のユニフォームはもう使ってはいけないことになった。理由はいろいろあるけど言っても納得しない人もいるだろう。できることなら使いたかったとだけ言っておく」&lt;/p&gt;&#xA;&lt;p&gt;と、なぜクリーム色がダメなのか、はっきり語ることは避けられています。&lt;/p&gt;&#xA;&lt;blockquote class=&#34;twitter-tweet&#34;&gt;&lt;p lang=&#34;en&#34; dir=&#34;ltr&#34;&gt;In the end, &lt;a href=&#34;https://x.com/UniWatch?ref_src=twsrc%5Etfw&#34;&gt;@Uniwatch&lt;/a&gt; talked me into getting into it after all. &lt;a href=&#34;https://t.co/Q4QxhyBXOU&#34;&gt;https://t.co/Q4QxhyBXOU&lt;/a&gt;&lt;/p&gt;&amp;mdash; Dustin Godsey (@dgodz) &lt;a href=&#34;https://x.com/dgodz/status/1592538332201877504?ref_src=twsrc%5Etfw&#34;&gt;November 15, 2022&lt;/a&gt;&lt;/blockquote&gt;&#xA;&lt;script async src=&#34;https://platform.x.com/widgets.js&#34; charset=&#34;utf-8&#34;&gt;&lt;/script&gt;&#xA;&#xA;&#xA;&lt;p&gt;シティエディション・ユニフォームは、&lt;a href=&#34;https://www.basketball-zine.com/221111th1&#34;&gt;フランチャイズ都市の歴史や文化を表した特別ユニフォーム&lt;/a&gt;だそうで、その街にちなんだ色やデザインを採用するそう。各チームがこの普段と違うユニフォームを着てプレイする期間があり、熱心なファンならいつものユニフォームと違うこれらのユニフォームや関連グッズも購入するでしょうから、特別ユニフォームのデザイン性や人気はチームの財政にも影響するものと思われます。&lt;/p&gt;&#xA;&lt;p&gt;また、&lt;a href=&#34;https://www.wuwm.com/regional/2019-12-27/how-milwaukee-got-the-nickname-cream-city&#34;&gt;ミルウォーキー市の愛称は「クリームシティ」ですが、これは街の中心部にクリーム色のレンガを使った歴史的建物が多いことからついた愛称だそうです&lt;/a&gt;。そんなことからミルウォーキーのチームとして地元を表すユニフォームをクリーム色にするのはごく自然な発想で、これまでのシティユニフォームで実際にクリーム色は採用されてきました。&lt;/p&gt;</description>
			</item>
	</channel>
</rss>
