<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
		<title>Web制作 on akky@サイボウズラボ・ブログ</title>
		<link>https://labs.cybozu.co.jp/blog/akky/tags/web%E5%88%B6%E4%BD%9C/</link>
		<description>Recent content in Web制作 on akky@サイボウズラボ・ブログ</description>
		<generator>Hugo</generator>
		<language>ja</language>
		
		
		
		
			<lastBuildDate>Mon, 30 Aug 2021 00:00:00 +0000</lastBuildDate>
		
			<atom:link href="https://labs.cybozu.co.jp/blog/akky/tags/web%E5%88%B6%E4%BD%9C/index.xml" rel="self" type="application/rss+xml" />
			<item>
				<title>英銀行の「正しい電話番号」確認サイト、JSONで全74000番号を晒す作りで議論を呼ぶ</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2021/08/banks-phone-number-checker-leaks-all-74000-numbers/</link>
				<pubDate>Mon, 30 Aug 2021 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2021/08/banks-phone-number-checker-leaks-all-74000-numbers/</guid>
				<description>&lt;p&gt;イギリスの大手&lt;a href=&#34;https://www.barclays.co.uk/&#34;&gt;バークレーズ銀行&lt;/a&gt;、利用者の電話詐欺被害対策として&lt;a href=&#34;https://www.barclays.co.uk/fraud-and-scams/phone-number-checker/&#34;&gt;「バークレイズ銀行の電話番号として正しいか調べる」サイト&lt;/a&gt;を公開しているのですが、その実装に問題があるのではという疑義が&lt;a href=&#34;https://news.ycombinator.com/item?id=28326036&#34;&gt;Hacker News で上がり&lt;/a&gt;議論となっています。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://www.barclays.co.uk/fraud-and-scams/phone-number-checker/#&#34;&gt;Phone number checker&lt;/a&gt; サイトでは、電話番号を一つ入力するフォームが置かれ、ここに電話番号を入力すると、74000個ある正式な電話番号の場合は「この番号へ掛けても大丈夫です」という結果が出ます。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2021/08/banks-phone-number-checker-leaks-all-74000-numbers/barclays-phone-number-checker.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2021/08/banks-phone-number-checker-leaks-all-74000-numbers/barclays-phone-number-checker_hu_1a722e606c2c62ab.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/08/banks-phone-number-checker-leaks-all-74000-numbers/barclays-phone-number-checker_hu_a749155e1e1f0de7.webp 768w, https://labs.cybozu.co.jp/blog/akky/2021/08/banks-phone-number-checker-leaks-all-74000-numbers/barclays-phone-number-checker_hu_3af2147c46c42a32.webp 952w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2021/08/banks-phone-number-checker-leaks-all-74000-numbers/barclays-phone-number-checker.png&#34; width=&#34;952&#34; height=&#34;851&#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;大手とはいえ、一つの銀行が74000個も番号を抱えてるのはすごいですね。フリーダイヤルから支店や部署まですべての番号を含むにしても。&lt;/p&gt;&#xA;&lt;p&gt;議論となっているのは、このチェッカがクライアントサイドだけで動いているらしいこと。&lt;a href=&#34;https://www.barclays.co.uk/content/dam/json-files/TelephoneNumberChecker_26_03_2021.json&#34;&gt;JSONファイル&lt;/a&gt;が読み込まれていて、このファイルに74000個の電話番号がベタ書きされています。&lt;/p&gt;&#xA;&lt;blockquote&gt;&#xA;&lt;p&gt;&lt;code&gt;{ &amp;quot;numbers&amp;quot;: [ &amp;quot;0800000097&amp;quot;, &amp;quot;0800001011&amp;quot;, &amp;quot;0800008008&amp;quot;, &amp;quot;0800111777&amp;quot;, &amp;quot;0800201612&amp;quot;, &amp;quot;0800222200&amp;quot;, &amp;quot;0800222800&amp;quot;, &amp;quot;0800227222&amp;quot;, &amp;quot;0800281435&amp;quot;, &amp;quot;0800282390&amp;quot;, &amp;quot;0800289289&amp;quot;, &amp;quot;0800289888&amp;quot;, &amp;quot;0800289989&amp;quot;,&lt;/code&gt;&lt;/p&gt;&#xA;&lt;/blockquote&gt;&#xA;&lt;p&gt;最初に声を上げたブログが、入力フォームの形式チェックがあまりちゃんとしていない(ハイフンを含んだりイギリスの国番号44から始まる形式を正しく認識できない等)やJSONファイルのサイズ(1.3Mbytes)が大きすぎることを問題にしていた(これぐらい許容範囲だとか、正規表現で書けばよいとか圧縮をちゃんとすればよいとか)ため、Hacker News での議論も多方向に拡散してしまっているのですが、主要な問題は偽メールや偽電話でだまそうとしている勢力が簡単に正式な電話番号のリストを入手できるところにあるのではないかなと思います。&lt;/p&gt;&#xA;&lt;p&gt;発信者番号通知も改竄可能なので、騙す側に改竄するための正しい番号のリストを教えているという話でもあります。このチェッカが正しく理解されていないと、電話を「受けた時」にこのチェッカで正しいとされたから電話の相手を信用してもいいと思ってしまったりしてしまう可能性もあります。&lt;/p&gt;</description>
			</item>
			<item>
				<title>World White Webプロジェクト - 手足など人物の画像検索に人種的多様性を持たせようという活動</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2015/06/world-white-web-project-wants-racial-diversity-on-image-search/</link>
				<pubDate>Mon, 01 Jun 2015 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2015/06/world-white-web-project-wants-racial-diversity-on-image-search/</guid>
				<description>&lt;p&gt;&lt;a href=&#34;http://worldwhiteweb.net/&#34;&gt;World White Web&lt;/a&gt; 、World &lt;strong&gt;Wide&lt;/strong&gt; Web のワイドとホワイト(白)をかけたキャンペーンでは、&amp;ldquo;hand&amp;rdquo; や &amp;ldquo;foot&amp;rdquo; といった体のパーツ名で画像検索した時に、白い写真ばかりが出てきてしまうのでは、というのを問題として提起しています。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2015/06/world-white-web-project-wants-racial-diversity-on-image-search/world-white-web.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2015/06/world-white-web-project-wants-racial-diversity-on-image-search/world-white-web_hu_75d6cffd9f253ec7.webp 480w, https://labs.cybozu.co.jp/blog/akky/2015/06/world-white-web-project-wants-racial-diversity-on-image-search/world-white-web_hu_5325b13c5ac14543.webp 768w, https://labs.cybozu.co.jp/blog/akky/2015/06/world-white-web-project-wants-racial-diversity-on-image-search/world-white-web_hu_fadeac9930b69ed7.webp 1016w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2015/06/world-white-web-project-wants-racial-diversity-on-image-search/world-white-web.png&#34; width=&#34;1016&#34; height=&#34;1038&#34; alt=&#34;world-white-web&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;試しに&amp;quot;hand&amp;quot;でグーグル画像検索してみると、以下のようになりました。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2015/06/world-white-web-project-wants-racial-diversity-on-image-search/hand-image-search-on-google.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2015/06/world-white-web-project-wants-racial-diversity-on-image-search/hand-image-search-on-google_hu_ace0867f7bb2af36.webp 480w, https://labs.cybozu.co.jp/blog/akky/2015/06/world-white-web-project-wants-racial-diversity-on-image-search/hand-image-search-on-google_hu_54ea6e61215d90c7.webp 768w, https://labs.cybozu.co.jp/blog/akky/2015/06/world-white-web-project-wants-racial-diversity-on-image-search/hand-image-search-on-google_hu_449bdb8640752e7c.webp 1016w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2015/06/world-white-web-project-wants-racial-diversity-on-image-search/hand-image-search-on-google.png&#34; width=&#34;1016&#34; height=&#34;1008&#34; alt=&#34;hand-image-search-on-google&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;確かに白っぽい手ばかりです。&lt;/p&gt;&#xA;&lt;p&gt;世の中には色々な色の手や足があるのに、画像検索でそれが出てこないとすれば、何かしらの理由はあるのかもしれませんね。&lt;/p&gt;&#xA;&lt;p&gt;英語をメインで使っている国の中で白人の割合が多いことが、白人モデルの写真の多様と画像検索トップの占拠につながっているということかもしれません。たとえば、「顔」とか「腕」といった漢字での検索では、英語での画像検索に比べれば、アジア系の顔や腕が多く出てきます。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2015/06/world-white-web-project-wants-racial-diversity-on-image-search/nose-in-japanese-google-image-search.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2015/06/world-white-web-project-wants-racial-diversity-on-image-search/nose-in-japanese-google-image-search_hu_3de8a1a6f1bda32f.webp 480w, https://labs.cybozu.co.jp/blog/akky/2015/06/world-white-web-project-wants-racial-diversity-on-image-search/nose-in-japanese-google-image-search_hu_b2a91b2e4d56329f.webp 768w, https://labs.cybozu.co.jp/blog/akky/2015/06/world-white-web-project-wants-racial-diversity-on-image-search/nose-in-japanese-google-image-search_hu_8f830fb52a92baae.webp 1016w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2015/06/world-white-web-project-wants-racial-diversity-on-image-search/nose-in-japanese-google-image-search.png&#34; width=&#34;1016&#34; height=&#34;931&#34; alt=&#34;nose-in-japanese-google-image-search&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;とはいえ、広告等で白人が良く採用されるからか、あるいは西洋文化が幅を利かせているからか、白人の写真もちらほらと出てきます。黒人の画像はなかなか出てきません。&lt;/p&gt;&#xA;&lt;p&gt;World White Web がこの「問題」を解消する方法として提唱しているのは、彼らのサイトに置かれた非白人の手や足の画像にリンクしたり、ソーシャルでシェアを勧めたりというもの。要するに画像SEO になるのですが、このやり方で実際にトップページに彼らの希望する画像が入ってくるかというと、ちょっと難しいような気がします。&lt;/p&gt;&#xA;&lt;p&gt;ブログや新聞記事を書くときに、多様な肌の色の写真を使いましょう、という呼びかけは、テレビドラマの配役で人種の多様性の配慮が求められるアメリカらしさを感じますね。&lt;/p&gt;&#xA;&lt;p&gt;via &lt;a href=&#34;http://thenextweb.com/shareables/2015/05/25/world-white-web-project-wants-to-make-googles-search-results-more-diverse/&#34;&gt;TheNextWeb&lt;/a&gt;&lt;/p&gt;</description>
			</item>
			<item>
				<title>ウェブページ制作のたいへんさを見せるページ</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2015/04/show-how-many-steps-web-page-build-needs/</link>
				<pubDate>Tue, 07 Apr 2015 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2015/04/show-how-many-steps-web-page-build-needs/</guid>
				<description>&lt;p&gt;英語圏の巨大掲示板redditの一ページを新規にデザインしたとしたらどれぐらい手間か、というのを&lt;a href=&#34;http://yourwebdev.ninja/generate.html&#34;&gt;ブラウザ上で見せてくれるページ&lt;/a&gt;です。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2015/04/show-how-many-steps-web-page-build-needs/reddit-designing-1.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2015/04/show-how-many-steps-web-page-build-needs/reddit-designing-1_hu_d213868a18231496.webp 480w, https://labs.cybozu.co.jp/blog/akky/2015/04/show-how-many-steps-web-page-build-needs/reddit-designing-1_hu_7ef54233b17b1045.webp 768w, https://labs.cybozu.co.jp/blog/akky/2015/04/show-how-many-steps-web-page-build-needs/reddit-designing-1_hu_b10513dae7247600.webp 1083w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2015/04/show-how-many-steps-web-page-build-needs/reddit-designing-1.png&#34; width=&#34;1083&#34; height=&#34;497&#34; alt=&#34;reddit-designing-1&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;画面右側にCSSとHTMLの枠が表示され、そこにコードが追加されていくにつれて、ページ上にredditのデザインが少しずつ出来上がっていきます。右上のスライダーで作業速度を速めることもできますが、それでもなかなか出来上がりません。&lt;/p&gt;&#xA;&lt;p&gt;redditは、どちらかといえばシンプルなデザインとされるサイトですが、それでも、これだけの画面を表示するためにどれぐらいのソースコードが必要か、一度もサイトを作ったことが無い人は、もっと短くできるのではと思っているかもしれません。&lt;/p&gt;&#xA;&lt;p&gt;このようなサイトを見せることで、ウェブ制作の裏側を知らない人にも少したいへんさを伝えられるかもしれませんね。このデモでは上から順にスラスラとコードを書いていってるので、実際のウェブ開発では手戻りや調整でさらにずっと大変なんですよ、と。&lt;/p&gt;&#xA;&lt;p&gt;このデモで生成される掲示板のやりとり自身が指しているように、&lt;a href=&#34;http://codepen.io/jakealbaugh/&#34;&gt;Jake Albaughさん&lt;/a&gt;の&lt;a href=&#34;http://codepen.io/jakealbaugh/full/PwLXXP/&#34;&gt;脈打つハートを作る様子を再現するコード&lt;/a&gt;を見て、それに触発されて作られたということです。&lt;/p&gt;&#xA;&lt;p&gt;同じコードを参考に、&lt;a href=&#34;http://kristriplett.com/tinker/vader.html&#34;&gt;CSSで描くダースベイダー&lt;/a&gt;を&lt;a href=&#34;http://tsitu.github.io/darth.html&#34;&gt;デモ化したページ&lt;/a&gt;も作られています。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2015/04/show-how-many-steps-web-page-build-needs/darth-vadar-web-building.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2015/04/show-how-many-steps-web-page-build-needs/darth-vadar-web-building_hu_13b838805467edc0.webp 480w, https://labs.cybozu.co.jp/blog/akky/2015/04/show-how-many-steps-web-page-build-needs/darth-vadar-web-building_hu_36785203a4077837.webp 768w, https://labs.cybozu.co.jp/blog/akky/2015/04/show-how-many-steps-web-page-build-needs/darth-vadar-web-building_hu_193935bf5136c310.webp 1044w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2015/04/show-how-many-steps-web-page-build-needs/darth-vadar-web-building.png&#34; width=&#34;1044&#34; height=&#34;548&#34; alt=&#34;darth-vadar-web-building&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;via &lt;a href=&#34;http://thenextweb.com/insider/2015/04/07/watch-your-browser-code-darth-vader-and-reddit-automatically/&#34;&gt;TheNextWeb&lt;/a&gt;&lt;/p&gt;</description>
			</item>
	</channel>
</rss>
