<?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/%E5%9B%B3/</link>
		<description>Recent content in 図 on akky@サイボウズラボ・ブログ</description>
		<generator>Hugo</generator>
		<language>ja</language>
		
		
		
		
			<lastBuildDate>Fri, 20 Jul 2018 00:00:00 +0000</lastBuildDate>
		
			<atom:link href="https://labs.cybozu.co.jp/blog/akky/tags/%E5%9B%B3/index.xml" rel="self" type="application/rss+xml" />
			<item>
				<title>「平等」と「公平」の図 (Equality and Equity)</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2018/07/equality-and-equity/</link>
				<pubDate>Fri, 20 Jul 2018 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2018/07/equality-and-equity/</guid>
				<description>&lt;p&gt;&lt;a href=&#34;https://www.rwjf.org/en/library/infographics/visualizing-health-equity.html&#34;&gt;Robert Wood Johnson Foundation&lt;/a&gt; が作成したインフォグラフィック「平等(Equality)と公平(Equity)」&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://www.rwjf.org/en/library/infographics/visualizing-health-equity.html&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2018/07/equality-and-equity/RWJF_bikes_equality_equity_PURPLE_hu_38b9fe3352cfe8a4.webp 480w, https://labs.cybozu.co.jp/blog/akky/2018/07/equality-and-equity/RWJF_bikes_equality_equity_PURPLE_hu_1df1016a695f76d5.webp 768w, https://labs.cybozu.co.jp/blog/akky/2018/07/equality-and-equity/RWJF_bikes_equality_equity_PURPLE_hu_939c1fab37d8341e.webp 2400w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2018/07/equality-and-equity/RWJF_bikes_equality_equity_PURPLE.jpg&#34; width=&#34;2400&#34; height=&#34;1351&#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;Equity bicycle graphic, English, green background.&lt;/p&gt;&#xA;&lt;p&gt;「全員に同じ自転車を与えることは、全員に健康になる機会を与えることとは違う」というのを一目でわかるように表した画像ですね。&lt;/p&gt;&#xA;&lt;p&gt;同じ &amp;ldquo;Equality and Equity&amp;rdquo; という題では、&lt;a href=&#34;http://interactioninstitute.org/illustrating-equality-vs-equity/&#34;&gt;こちらの絵&lt;/a&gt;やその派生したものもネットではよく見かけます。こちらは Interaction Institute for Social Change のアンガス・マグワイヤさん(Angus Maguire)の手によるもの。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;http://interactioninstitute.org/illustrating-equality-vs-equity/&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2018/07/equality-and-equity/IISC_EqualityEquity_hu_e7e2727a0d223b86.webp 480w, https://labs.cybozu.co.jp/blog/akky/2018/07/equality-and-equity/IISC_EqualityEquity_hu_b8127461698e6de5.webp 768w, https://labs.cybozu.co.jp/blog/akky/2018/07/equality-and-equity/IISC_EqualityEquity_hu_667ceb7f272b3fc4.webp 3000w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2018/07/equality-and-equity/IISC_EqualityEquity.png&#34; width=&#34;3000&#34; height=&#34;2250&#34; alt=&#34;&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;</description>
			</item>
			<item>
				<title>PlantUMLでAWSサービスを含む図を作る</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2017/12/aws-components-on-plantuml/</link>
				<pubDate>Fri, 15 Dec 2017 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2017/12/aws-components-on-plantuml/</guid>
				<description>&lt;p&gt;プレゼンテーション資料をMarkdown形式で書いていて、図を入れたいが図はどうやって用意しようか、となりました。&lt;/p&gt;&#xA;&lt;p&gt;せっかくテキストエディタでプレゼンを作れるようにしているのに、図を描くのにテキストエディタでなくドローツールを開くのは面倒だな、テキストで図を描ければ、ソースコードとして管理できるから似たような図を量産するのも楽だし、バージョン管理で変更点もわかりやすい。&lt;/p&gt;&#xA;&lt;p&gt;ということで探したところ、&lt;a href=&#34;http://plantuml.com/&#34;&gt;Plantuml&lt;/a&gt; が見つかりました。日本語のマニュアルもあるし、評判もいいみたい。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;http://plantuml.com/starting&#34;&gt;インストール&lt;/a&gt;しようとしたところ、図を1,2個作るだけなら&lt;a href=&#34;http://www.plantuml.com/plantuml/uml/&#34;&gt;オンラインでできる&lt;/a&gt;ようです。試すだけならハードルはとても低い。&lt;/p&gt;&#xA;&lt;p&gt;マニュアルを参考にして作ったのがこちら&lt;/p&gt;&#xA;&lt;p&gt;&lt;code&gt;@startuml  [Github] as github [さくらVPS] as vps [local machine] as localmachine  :ユーザー: &amp;lt;.... github :1) pull :ユーザー: ....&amp;gt; localmachine :2) Sculpinで変換 :ユーザー: ....&amp;gt; vps :3) upload(scp) :ユーザー: ....&amp;gt; github :4) push  :訪問者: .left.&amp;gt; vps:閲覧 @enduml&lt;/code&gt;&lt;/p&gt;&#xA;&lt;p&gt;変換した図が&lt;a href=&#34;http://www.plantuml.com/plantuml/png/SoWkIImgAStDuOfspop9A4sALKWiLaW7CxcY7pTEVTpO_xYfComW62nHLb3C5PsJdvoOev2Rc9oHcPSA5WQBG0MukAmUDozxtBpdSTCs86cbOAC7150Z5QmCDHKAIdDoq1M1rDYXcADWPQIf49nScbEGcVUuSVdJ9PtF-cTZrmPqbOALiQP2QK5EVcAAHd5oWIPsXJ17c80SKPm1TEgB5QkUJkr_qT0AL9AJcbO2CStgvRHDBvOjvt98pKi1XWq0&#34;&gt;これ&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2017/12/aws-components-on-plantuml/old-system.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2017/12/aws-components-on-plantuml/old-system_hu_594213238f34460a.webp 459w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2017/12/aws-components-on-plantuml/old-system.png&#34; width=&#34;459&#34; height=&#34;384&#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;# png でも svg でも作れるので、svg で問題ない環境なら svg もいいですね。&lt;a href=&#34;https://parashuto.com/rriver/development/check-points-for-using-svg-in-wordpress-article&#34;&gt;WordPress ではまだ大変みたい&lt;/a&gt;なので png で貼っておきます&lt;/p&gt;&#xA;&lt;h3 id=&#34;plantuml-で-aws-の構成図を描く&#34;&gt;PlantUML で AWS の構成図を描く&lt;/h3&gt;&#xA;&lt;p&gt;UML で使えるアイコンはもちろん広く用意されているのですが、サービスのアイコンについても利用者が作って公開しているようです。AWS のサービスを表す図を公開している &lt;a href=&#34;https://github.com/milo-minderbinder/AWS-PlantUML&#34;&gt;milo-minderbinder/AWS-PlantUML&lt;/a&gt; を見つけたので、これを使ってみました。&lt;/p&gt;&#xA;&lt;p&gt;Github 上のライブラリを、前記のオンラインエディタから参照できるので、こちらも簡単です。使いたいコンポーネントを AWS-PlantUML から探して、include するだけで使えるようになります。&lt;/p&gt;</description>
			</item>
			<item>
				<title>考える、計画する、実行するの図 Think, Plan, Execute</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2016/04/think-plan-execute/</link>
				<pubDate>Fri, 08 Apr 2016 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2016/04/think-plan-execute/</guid>
				<description>&lt;p&gt;Ishac Bertranさんによる&lt;a href=&#34;http://blog.ishback.com/?p=856&#34;&gt;Think, Plan, Execute&lt;/a&gt; (考える、計画する、実施する)という図。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;http://blog.ishback.com/?p=856&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2016/04/think-plan-execute/ishac-bertran-think-plan-execute_hu_559425d240351307.webp 480w, https://labs.cybozu.co.jp/blog/akky/2016/04/think-plan-execute/ishac-bertran-think-plan-execute_hu_68c14d61dfd26b3e.webp 481w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2016/04/think-plan-execute/ishac-bertran-think-plan-execute.png&#34; width=&#34;481&#34; height=&#34;351&#34; alt=&#34;ishac-bertran-think-plan-execute&#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;a href=&#34;http://imgur.com/kFt66DDhttp://&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2016/04/think-plan-execute/think-plan-execute-imgur_hu_5769cb38303a2903.webp 480w, https://labs.cybozu.co.jp/blog/akky/2016/04/think-plan-execute/think-plan-execute-imgur_hu_be21d29e878289c1.webp 768w, https://labs.cybozu.co.jp/blog/akky/2016/04/think-plan-execute/think-plan-execute-imgur_hu_6d1e629433938a42.webp 8000w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2016/04/think-plan-execute/think-plan-execute-imgur.png&#34; width=&#34;8000&#34; height=&#34;4500&#34; alt=&#34;think-plan-execute-imgur&#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://www.reddit.com/r/wallpapers/comments/2du7h3/think_plan_execute_1280_x_800ocxpost_rminimalism/&#34;&gt;redditで紹介された際に&lt;/a&gt;、いろいろなバリエーションが作られたようで、オリジナルを辿っていくと冒頭の白い背景のものが見つかりました。&lt;/p&gt;</description>
			</item>
			<item>
				<title>HttpsとTorで守れるデータ、守れないデータ - 電子フロンティア財団(EFF)の作成した図の読み方</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2013/06/https-and-tor-privacy-diagram-by-eff/</link>
				<pubDate>Mon, 10 Jun 2013 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2013/06/https-and-tor-privacy-diagram-by-eff/</guid>
				<description>&lt;p&gt;電子フロンティア財団が作った、&lt;a href=&#34;https://www.eff.org/pages/tor-and-https&#34;&gt;HTTPSとTorを使った時に通信の何が守られるのかを表すダイナミック・チャート&lt;/a&gt;がよくできています。&lt;/p&gt;&#xA;&lt;p&gt;図の登場人物に日本語の訳をつけてみましたが、&lt;a href=&#34;https://www.eff.org/pages/tor-and-https&#34;&gt;リンク先&lt;/a&gt;で実際に左上の「HTTPS」と「Tor」をオン・オフしてみて、httpsやTorでwebサービスにアクセスすることで、インターネットの途中の通信路にアクセスできる第三者に対して、あるいはアクセス先のwebサービスのサーバにアクセスできる人に対して、何を隠すことができるのか、を見ることができます。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2013/06/https-and-tor-privacy-diagram-by-eff/eff-privacy-with-tor-and-https-diagram-with-japanese.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2013/06/https-and-tor-privacy-diagram-by-eff/eff-privacy-with-tor-and-https-diagram-with-japanese_hu_229674916eebfaf0.webp 480w, https://labs.cybozu.co.jp/blog/akky/2013/06/https-and-tor-privacy-diagram-by-eff/eff-privacy-with-tor-and-https-diagram-with-japanese_hu_3f0f12652fe5d013.webp 768w, https://labs.cybozu.co.jp/blog/akky/2013/06/https-and-tor-privacy-diagram-by-eff/eff-privacy-with-tor-and-https-diagram-with-japanese_hu_e645234f6147cb22.webp 835w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2013/06/https-and-tor-privacy-diagram-by-eff/eff-privacy-with-tor-and-https-diagram-with-japanese.png&#34; width=&#34;835&#34; height=&#34;618&#34; alt=&#34;eff-privacy-with-tor-and-https-diagram-with-japanese&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;ユーザー名/パスワード(USER/PW)と通信内容(DATA)については、図の中の項目は分かれていますが、実際のところ、どちらか一方が読まれてしまう場合にはもう一方も読まれてしまうことがわかります。HTTPSを使うことにより、途中の経路でそれらが盗聴される心配はなくなりますが、末端のwebサービス側では、それらを監視することは可能なので、もしwebサービスの運営者・管理者が弁護士や警察とデータを共有(datasharing)しているのであれば、そこではデータは隠せないということになります。&lt;/p&gt;&#xA;&lt;p&gt;ちょうど今、&lt;a href=&#34;http://www.itmedia.co.jp/news/articles/1306/10/news033.html&#34;&gt;アメリカ政府/NSA(国家安全保障局)がGoogleやFacebookなどの主要サービス事業者のサーバーに自由にアクセスできるPRISMという秘密プロジェクトを実施している、という内部告発が英ガーディアン紙などからリークされ&lt;/a&gt;、&lt;a href=&#34;http://www.itmedia.co.jp/news/articles/1306/08/news007.html&#34;&gt;Google&lt;/a&gt;や&lt;a href=&#34;http://www.itmedia.co.jp/news/articles/1306/08/news008.html&#34;&gt;Facebook&lt;/a&gt;のトップは大急ぎでそれを否定する声明を出しています。&lt;/p&gt;&#xA;&lt;p&gt;これが事実なら(アメリカ政府は否定する声明を出しています。)、オバマ大統領の弾劾にもつながるのでは、というぐらい大きなニュースですが、この告発では、右下の黒いSite.comに対して、アメリカ政府が自由にアクセスできるようになっていた、と主張しているわけですね。この場合は、Tor+HTTPSの両方をオンにしていても、エンドユーザーの接続元以外はすべて知られてしまっているということになります。&lt;/p&gt;&#xA;&lt;p&gt;通信路や通信元を隠すことができるHTTPSやTorという技術に対して、何ができて何ができないのかを知るのに、とても良い図ではないかと思いました。&lt;/p&gt;&#xA;&lt;p&gt;via HackerNews&lt;/p&gt;</description>
			</item>
	</channel>
</rss>
