<?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%83%A1%E3%83%A2/</link>
		<description>Recent content in メモ on akky@サイボウズラボ・ブログ</description>
		<generator>Hugo</generator>
		<language>ja</language>
		
		
		
		
			<lastBuildDate>Mon, 23 May 2022 00:00:00 +0000</lastBuildDate>
		
			<atom:link href="https://labs.cybozu.co.jp/blog/akky/tags/%E3%83%A1%E3%83%A2/index.xml" rel="self" type="application/rss+xml" />
			<item>
				<title>lofi.co - 集中できる作業環境をブラウザで提供するフリーミアムサービス</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2022/05/lofi-co/</link>
				<pubDate>Mon, 23 May 2022 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2022/05/lofi-co/</guid>
				<description>&lt;p&gt;&lt;a href=&#34;https://lofi.co/&#34;&gt;lofi.co&lt;/a&gt; は、ブラウザで開きっぱなしにして使うBGM &amp;amp; 生産性向上ツール群というサービスです。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://lofi.co/&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2022/05/lofi-co/lofi-co-top_hu_4a2a70b86eddd230.webp 480w, https://labs.cybozu.co.jp/blog/akky/2022/05/lofi-co/lofi-co-top_hu_2ac9991bd9d861bd.webp 768w, https://labs.cybozu.co.jp/blog/akky/2022/05/lofi-co/lofi-co-top_hu_b19d5972f8daeddf.webp 1147w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2022/05/lofi-co/lofi-co-top.png&#34; width=&#34;1147&#34; height=&#34;826&#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;Lofi.co の入り口ページ&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://ja.wikipedia.org/wiki/Lo-Fi&#34;&gt;Lo-Fi&lt;/a&gt;の定義はWikipediaを読んでもよくわからなかったのですが、長時間再生できる作業用BGM を Lo-Fi と呼んでることもあるので、ここではそういう意味かなと思います。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://lofi.co/&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2022/05/lofi-co/lofi-co-choose-location_hu_a6873f15b3875b2.webp 480w, https://labs.cybozu.co.jp/blog/akky/2022/05/lofi-co/lofi-co-choose-location_hu_a579bc3649713676.webp 768w, https://labs.cybozu.co.jp/blog/akky/2022/05/lofi-co/lofi-co-choose-location_hu_d00197e224d63d41.webp 1060w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2022/05/lofi-co/lofi-co-choose-location.png&#34; width=&#34;1060&#34; height=&#34;596&#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;Lofi.co で画像を選ぶ&lt;/p&gt;&#xA;&lt;p&gt;無料で使える範囲は、カフェの背景画像、3種類の音楽ジャンルのBGM、都市のノイズ、雨だれ、タイピング音のようです。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://lofi.co/&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2022/05/lofi-co/lofi-co-pricing_hu_64a622c31e49e9cc.webp 480w, https://labs.cybozu.co.jp/blog/akky/2022/05/lofi-co/lofi-co-pricing_hu_b245728cd5bb9103.webp 768w, https://labs.cybozu.co.jp/blog/akky/2022/05/lofi-co/lofi-co-pricing_hu_80a755605f8f6d3c.webp 826w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2022/05/lofi-co/lofi-co-pricing.png&#34; width=&#34;826&#34; height=&#34;787&#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;Lofi.co の料金表&lt;/p&gt;&#xA;&lt;p&gt;毎月$2.99 の有料プランを購読すると、背景画像や音楽の種類が増え、さらにポモドーロタイマー・メモ・計時ログ・ToDo リストなどの生産性ツールが使えるようになるそうです。&lt;/p&gt;&#xA;&lt;p&gt;ブラウザのウィンドウ一つでこのサービスを常時表示しておき、そこで自分の作業環境に関わる多くを賄おうということでしょうね。&lt;/p&gt;&#xA;&lt;p&gt;こういったブラウザで BGM + 環境音というサービスはたくさんあり、過去にも紹介したことがあります。参入者はとても多いのですが、人気が出てスケールした時にどうやって儲けるのか、という疑問は常に出てきます。&lt;/p&gt;&#xA;&lt;p&gt;Lofi.co は定額課金という方式で来たわけですが、たとえばBGMなら YouTube で作業用BGMを検索して掛けっぱなしでも同じことは達成できるわけで、有料ユーザーがそんなに取れるのかな、とも思います。定期的に出てくるこういうサービス、どれもいい感じで発見した時は楽しんでるのですが。&lt;/p&gt;&#xA;&lt;p&gt;Lofi.co は ToDo や タイマー等と併せることで課金を狙っているわけですが、この方向で普及するのか、それともまた来月は別のこういう新サービスをみんながいじっているのか。&lt;/p&gt;&#xA;&lt;p&gt;via &lt;a href=&#34;https://news.ycombinator.com/item?id=31470928&#34;&gt;Hacker News&lt;/a&gt;&lt;/p&gt;</description>
			</item>
			<item>
				<title>dockerizeコマンドで他のDockerコンテナの立ち上げを待つ</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2017/12/let-dockerize-command-wait-other-container/</link>
				<pubDate>Fri, 01 Dec 2017 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2017/12/let-dockerize-command-wait-other-container/</guid>
				<description>&lt;p&gt;「Docker で動くようにすること」(to dockerize)じゃない、ツールの方の &lt;a href=&#34;https://github.com/jwilder/dockerize&#34;&gt;dockerize&lt;/a&gt; (jwilder さん作)を使って、同じDocker network 内(setup_remote_docker したもの)に立ち上げ中のコンテナの準備ができるのを待たせる方法。&lt;/p&gt;&#xA;&lt;p&gt;# 名前が紛らわしいのは検索性を低めてると思いますが&lt;/p&gt;&#xA;&lt;p&gt;どうせならツールも自力でセットアップせずに &lt;a href=&#34;https://hub.docker.com/r/jwilder/dockerize/&#34;&gt;docker hub にあるもの&lt;/a&gt;を呼べばよいということで、&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code data-lang=&#34;text&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;docker run jwilder/dockerize -wait http://sample.test/ -timeout 3m -wait-retry-interval 5s&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;上は、http://sample.test/ が応答を返すまで、最大3分間、5秒おきに問い合わせ。&lt;/p&gt;&#xA;&lt;p&gt;CircleCI の中で待ちたかった(コンテナの立ち上げが終わってからテストを流す)ので、ターゲットのコンテナと同じ Docker network でこれを呼ぶと、.circleci/config.yml は&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code data-lang=&#34;text&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;- steps: (中略) - run: name: Run Docker Containers command: docker-compose up -d - run: name: Wait until the target docker container fully set up command: | docker run --network my_network \\ jwilder/dockerize -wait http://my_service/about/ -timeout 3m -wait-retry-interval 5s - run: name: テストとか&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;こんな感じでいけました。&lt;/p&gt;</description>
			</item>
			<item>
				<title>Docker&#43;Traefikで同一ホストのサブフォルダとルートフォルダで別バックエンドを見に行かせる</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2017/11/docker-traefik-dispatch-root-to-subfolder/</link>
				<pubDate>Fri, 24 Nov 2017 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2017/11/docker-traefik-dispatch-root-to-subfolder/</guid>
				<description>&lt;p&gt;Traefik をリバースプロキシにしてアクセスをバックエンドの Docker コンテナに振り分ける実験をしていたのですが、http://example.com/app1 と &lt;a href=&#34;http://example.com/app2&#34;&gt;http://example.com/app2&lt;/a&gt; をコンテナ app1 と app2 に振り分けることは無事できたものの、http://example.com/ へのアクセスがどちらにもいかず404になってしまいました。&lt;/p&gt;&#xA;&lt;p&gt;docker-compose.yml の label で &lt;a href=&#34;https://docs.traefik.io/configuration/backends/docker/&#34;&gt;Traefik の動作指定&lt;/a&gt;をしていたのですが、どちらかの app に / を含めてしまうと、/ を書いた方の定義が優先されてしまい、もう一方のサブフォルダが振り分けされなくなってしまいました。&lt;/p&gt;&#xA;&lt;p&gt;では、/ を含む方の定義に2つの条件を書けばいいのでは、と思いましたが、一行の中にセミコロンで複数条件を書くのは、それらの AND を表していて、OR にはなりません。それでは、と、二つの条件を2行に並べて書くと、後で書いた方だけが有効になるよう。&lt;/p&gt;&#xA;&lt;p&gt;公式の github project を検索すると、ラベルにサービス名をつけることで複数の条件を OR で指定できるようです。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://github.com/containous/traefik/pull/1257/commits&#34;&gt;Allow multiple rules from docker labels containers with traefik.&lt;servicename&gt;.* properties by benoitf · Pull Request #1257 · containous/traefik&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;この修正が今年の3月で、version 1.3.0 に入っている。ということは使えるということ。&lt;/p&gt;</description>
			</item>
			<item>
				<title>ブログでチャット風の会話を表示するCSS</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2017/05/css-showing-two-persons-conversation/</link>
				<pubDate>Mon, 15 May 2017 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2017/05/css-showing-two-persons-conversation/</guid>
				<description>&lt;p&gt;先日の記事&lt;a href=&#34;http://developer.cybozu.co.jp/akky/2017/05/wrong-number-goes-wrong/&#34;&gt;「電話番号間違ってますよ」がどうしても信じてもらえない!&lt;/a&gt; 内で、チャットのやりとりを表現したかったので、フキダシ会話っぽく見える CSS を書きました。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2017/05/css-showing-two-persons-conversation/chat-conversation-css-sample.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2017/05/css-showing-two-persons-conversation/chat-conversation-css-sample_hu_85f2f3907192006.webp 480w, https://labs.cybozu.co.jp/blog/akky/2017/05/css-showing-two-persons-conversation/chat-conversation-css-sample_hu_d221a82eac214adb.webp 511w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2017/05/css-showing-two-persons-conversation/chat-conversation-css-sample.png&#34; width=&#34;511&#34; height=&#34;602&#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;WordPress の場合は、[外観]-[カスタマイズ]-[追加CSS]に貼りつけてください。特定のポストでだけ使いたい場合は .post-9067 とかを全部の前につけます。&lt;/p&gt;&#xA;&lt;p&gt;アイコンの画像はこのCSSの中に URL を書き込んであります。別のアイコンにしたければそこを変えてください。&lt;/p&gt;&#xA;&lt;blockquote&gt;&#xA;&lt;p&gt;&lt;code&gt;.akky_conv { padding-top: 1em; } .akky_conv li { display: flex; flex-direction: row; max-width: 95%; } .akky_conv li div { width: 32px; height: 32px; box-shadow: 2px 2px 0px #aaa; flex-shrink: 0; flex-grow: 0; z-index: 1; } .akky_conv li:not(.me) div { background:url(&#39;/akky/wp-content/uploads/2017/04/user-alt-1_0.png&#39;) center no-repeat; background-color: #fcf; } .akky_conv li.me { justify-content: flex-end; } .akky_conv li.me div { background:url(&#39;/akky/wp-content/uploads/2017/04/user-alt-2.png&#39;) center no-repeat; background-color: #cff; order: 2;  position: relative; bottom: -3em; } .akky_conv li p { background-color: #ddd; margin: 1em; padding: 1em; position: relative; text-align: center; } .akky_conv li.me p{ order: 1; } /* 吹き出し */ .akky_conv li p:before { content: &amp;quot;&amp;quot;; display: block; width: 0; height: 0; position: absolute; } .akky_conv li:not(.me) p:before { border-right: 12px solid #ddd; border-bottom: 12px solid transparent; top: 0px; left: -12px; } .akky_conv li.me p:before { border-left: 12px solid #ddd; border-top: 12px solid transparent; bottom: 0px; right: -12px; }&lt;/code&gt;&lt;/p&gt;</description>
			</item>
	</channel>
</rss>
