<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
		<title>ウェブ制作 on akky@サイボウズラボ・ブログ</title>
		<link>https://labs.cybozu.co.jp/blog/akky/tags/%E3%82%A6%E3%82%A7%E3%83%96%E5%88%B6%E4%BD%9C/</link>
		<description>Recent content in ウェブ制作 on akky@サイボウズラボ・ブログ</description>
		<generator>Hugo</generator>
		<language>ja</language>
		
		
		
		
			<lastBuildDate>Fri, 27 Sep 2019 00:00:00 +0000</lastBuildDate>
		
			<atom:link href="https://labs.cybozu.co.jp/blog/akky/tags/%E3%82%A6%E3%82%A7%E3%83%96%E5%88%B6%E4%BD%9C/index.xml" rel="self" type="application/rss+xml" />
			<item>
				<title>Webtest.app - ウェブサイトの表示が広告ブロックの有無でどう変わるか測定してくれるサービス</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2019/09/webtest-app-compares-adblock-with-and-without/</link>
				<pubDate>Fri, 27 Sep 2019 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2019/09/webtest-app-compares-adblock-with-and-without/</guid>
				<description>&lt;p&gt;&lt;a href=&#34;https://webtest.app/&#34;&gt;Webtest.app&lt;/a&gt; は、同じウェブサイトに対してアドブロックを使っていない場合と使った場合に、内部的にどれだけ読み込むファイルやドメインが違うかというのを測定してくれるサイトです。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://webtest.app/&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2019/09/webtest-app-compares-adblock-with-and-without/website-speed-test-top-form_hu_c3abcce0beed3b0.webp 480w, https://labs.cybozu.co.jp/blog/akky/2019/09/webtest-app-compares-adblock-with-and-without/website-speed-test-top-form_hu_d590ba271ccef698.webp 659w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2019/09/webtest-app-compares-adblock-with-and-without/website-speed-test-top-form.png&#34; width=&#34;659&#34; height=&#34;296&#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;誰かが既に調べたサイトだと、調査結果がキャッシュされてすぐに出ます。そうでなければ少なくとも数十秒は掛かるようで、リクエストして後から見に来るのがいいかもしれません。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://webtest.app/?url=https%3A%2F%2Fwww.asahi.com%2F&#34;&gt;Asahi.com&lt;/a&gt;で試してみました。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2019/09/webtest-app-compares-adblock-with-and-without/webtest-app-on-asahi-com-1.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2019/09/webtest-app-compares-adblock-with-and-without/webtest-app-on-asahi-com-1_hu_ac4919bbbd87ba5c.webp 346w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2019/09/webtest-app-compares-adblock-with-and-without/webtest-app-on-asahi-com-1.png&#34; width=&#34;346&#34; height=&#34;905&#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;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2019/09/webtest-app-compares-adblock-with-and-without/webtest-app-on-asahi-com-2.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2019/09/webtest-app-compares-adblock-with-and-without/webtest-app-on-asahi-com-2_hu_932d70d62a88941b.webp 312w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2019/09/webtest-app-compares-adblock-with-and-without/webtest-app-on-asahi-com-2.png&#34; width=&#34;312&#34; height=&#34;888&#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;倍のリクエストを読み込み、これだけたくさんのクッキーを積んでも2秒ぐらいしか読み込みが違わないのは、さすがに毎日膨大なアクセスを捌いているだけのことはありますね。&lt;/p&gt;&#xA;&lt;p&gt;広告収入で運営しているサイトは特に、広告ブロック機能を使っているユーザーはお客さんではないと思うでしょうから、広告ブロックした場合の性能はそれほど気にしないかもしれません。しかしそれでも、各社の広告スクリプトを載せただけでユーザー体験やその背後で動くデータ量がどれだけ増えるかは、確認しておいてもいいかもしれないと思います。&lt;/p&gt;</description>
			</item>
			<item>
				<title>Salieo - レスポンシブ・いい感じに画像を切り出し表示してくれるサービス</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/</link>
				<pubDate>Tue, 17 Apr 2018 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/</guid>
				<description>&lt;p&gt;&lt;a href=&#34;https://www.salieo.com/&#34;&gt;Salieo&lt;/a&gt; は、Javascript で画像ファイルから写真の重要そうなところを切り出して表示してくれるというサービスです。サイトのキャッチは&amp;quot;instantly, intelligently, responsive&amp;quot;(即座に、賢く、レスポンシブに)となっています。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-top.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-top_hu_80a3a2a4c32f355c.webp 480w, https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-top_hu_58695deefb67a8b8.webp 768w, https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-top_hu_54b18f2adc94761.webp 962w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-top.png&#34; width=&#34;962&#34; height=&#34;766&#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;ユーザー登録してAPIキーをもらってみました。同じ一つの写真が&lt;a href=&#34;http://akimoto.jp/salieo/&#34;&gt;こんな風に&lt;/a&gt;自動でクロップされて表示されます。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-cropped-screenshot.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-cropped-screenshot_hu_9de72b71239dbf60.webp 480w, https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-cropped-screenshot_hu_d75680b63ee51f05.webp 678w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-cropped-screenshot.png&#34; width=&#34;678&#34; height=&#34;668&#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;比較のため、スクリプトをオフにすると以下のようになります。横長でも縦長でも、元の画像がそのまま縮むので、車の形がゆがみますね。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/without-salieo-screenshot.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/without-salieo-screenshot_hu_9cdf8fcad4ef919.webp 480w, https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/without-salieo-screenshot_hu_e221e3fd0f07ae51.webp 674w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/without-salieo-screenshot.png&#34; width=&#34;674&#34; height=&#34;668&#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;# 物があるところをうまく切り出してくれる、ということなのですが、この写真はちょっと例には良くなかったかな。&lt;/p&gt;&#xA;&lt;p&gt;ユーザー登録した上で、申請したドメインやURLパターンに合致した画像だけが変換の対象となります。変換できる画像の数や変換の回数によって料金が変わりますが、一番下の無料枠でも10画像、月25,000回までの呼び出しができるようです。&lt;/p&gt;&#xA;&lt;p&gt;先行の類似サービスとして、&lt;a href=&#34;https://imagga.com/solutions/cropping-api.html&#34;&gt;imagga&lt;/a&gt;や&lt;a href=&#34;https://imagekit.io/&#34;&gt;ImageKit.io&lt;/a&gt;が見つかりましたが、どちらも無料枠は無いようです。Salieo の無料枠もお試し用という感じの枠ではありますが、実際に試せるのはやはりいいかと。&lt;/p&gt;&#xA;&lt;p&gt;これらのサービスを使えば、切り出しについて特に考えずに元の画像一つをアップロードしておけば、サイトで表示した時にその時の縦横比にあわせて動的にクロップされるわけです。あとは写真から重要そうな場所を切り出す判定部分の精度が良ければ、画像が表示される際の縦横比を固定しにくいサービス運営者からは、有料でも嬉しいサービスとなるかもしれません。&lt;/p&gt;&#xA;&lt;p&gt;via &lt;a href=&#34;https://news.ycombinator.com/item?id=16855863&#34;&gt;Hacker News&lt;/a&gt;&lt;/p&gt;</description>
			</item>
			<item>
				<title>「露出で払おう」とした起業家へのプログラマの返答</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2017/06/how-programmer-reacts-pay-in-exposure/</link>
				<pubDate>Wed, 28 Jun 2017 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2017/06/how-programmer-reacts-pay-in-exposure/</guid>
				<description>&lt;p&gt;フリーランスのプログラマー、ザック・ズンデルさん(Zach Zundel)が、&lt;a href=&#34;https://twitter.com/franklyrosalind/status/877417421509984256&#34;&gt;とある仕事の依頼について共有したツイート&lt;/a&gt;が大きくバズっていました。&lt;/p&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;君に作れそうかな?&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;ワオ、いいアイデアですね。ええ、作れますよ。バックエンドにサーバ、フロントエンドにウェブアプリケーションをそれぞれ必要になりそうです。そうしておけば、将来モバイル対応したい時にも必要なものは既にそこにあることになります。&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;バックエンドの開発は$300 請求するでしょう。あなたの指定のサーバに配置できます。ウェブアプリの方も、シンプルなデザインでよければ同じだけ掛かりそうです。もっとアートっぽくしたければフロント側は外注に出すので$700 ですかね。&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;支払いについては柔軟に対応しますが、普段は着手時に半分、完了時に残りの半分を貰っています。&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;おお、ハハ。成長の暁にストックオプションで行くことを考えてました。&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;それか、露出を得るためにただやってくれませんか? 君のことを紹介してあげられる相手をたくさん知ってますよ&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;今回のは大きな仕事じゃないし、基本的には●●●して△△するだけでしょう。$600 はちょっと高すぎると思いませんか?&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;あなたは僕に40時間分の作業をさせようとしてるんです。僕の経験と技術セットで時給$15 で働くというのはバーゲンだと思いますよ あなたは突然どこかから現れて僕にアプリを作ってくれと連絡してきたわけだし、僕の「露出」は十分そうに思います。コードを書くことで僕は食ってるので、タダ働きはしないんです。&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;なんなら、機能については相談にのれますよ。もっとシンプルにしたバージョンをデモ用として開発し、それで出資を募るんです。でも、あなたが言ったような■■■をするには$600 掛かりますね。&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;オーケー F**k you, 今後爆発的に成長するビジネスの基盤作りに君を参加させてあげようというのに。&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;ビジネスをちゃんと理解してる誰かを探して作ってもらうことにするよ。君は(いずれ)悲しくも失敗した時に、この機会を無視したことがたいへんな失敗だったということに気づくだろう&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;すいません。僕も食わないといけないんで! 幸運を祈りますよ&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;この会話は保存しておく。もし君が私のアイデアを盗んだりしたら訴えるからな!&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;くそったれ&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;blockquote class=&#34;twitter-tweet&#34;&gt;&lt;p lang=&#34;en&#34; dir=&#34;ltr&#34;&gt;lmao sorry friendaloo but if you want me to write you a couple thousand lines of code you get to profit from forever it&amp;#39;s gonna cost you &lt;a href=&#34;https://t.co/M9pIDo51vv&#34;&gt;pic.twitter.com/M9pIDo51vv&lt;/a&gt;&lt;/p&gt;&amp;mdash; Zach 🌻👨🏼‍💻🏳️‍🌈 (@franklyrosalind) &lt;a href=&#34;https://x.com/franklyrosalind/status/877417421509984256?ref_src=twsrc%5Etfw&#34;&gt;June 21, 2017&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;ul&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;なんてことだ? 私たちの会話をツイートしたのか? 私は同意してないぞ&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;プライバシーの侵害だ、いい弁護士を探した方がいいぞ&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;能無しのオカマ&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;blockquote class=&#34;twitter-tweet&#34;&gt;&lt;p lang=&#34;qme&#34; dir=&#34;ltr&#34;&gt;🙃🙃🙃 &lt;a href=&#34;https://t.co/0O6C6qAkTD&#34;&gt;pic.twitter.com/0O6C6qAkTD&lt;/a&gt;&lt;/p&gt;&amp;mdash; Zach 🌻👨🏼‍💻🏳️‍🌈 (@franklyrosalind) &lt;a href=&#34;https://x.com/franklyrosalind/status/877457662195138560?ref_src=twsrc%5Etfw&#34;&gt;June 21, 2017&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://twitter.com/franklyrosalind/status/877637224094945280&#34;&gt;トップ固定ツイート&lt;/a&gt;は、&lt;/p&gt;</description>
			</item>
	</channel>
</rss>
