「図」タグアーカイブ

「平等」と「公平」の図 (Equality and Equity)

2018-07-20 akky コメントする

Robert Wood Johnson Foundation が作成したインフォグラフィック「平等(Equality)と公平(Equity)」

Equity bicycle graphic, English, green background.

「全員に同じ自転車を与えることは、全員に健康になる機会を与えることとは違う」というのを一目でわかるように表した画像ですね。

同じ “Equality and Equity” という題では、こちらの絵やその派生したものもネットではよく見かけます。こちらは Interaction Institute for Social Change のアンガス・マグワイヤさん(Angus Maguire)の手によるもの。

ツール

PlantUMLでAWSサービスを含む図を作る

2017-12-15 akky コメントする

プレゼンテーション資料をMarkdown形式で書いていて、図を入れたいが図はどうやって用意しようか、となりました。

せっかくテキストエディタでプレゼンを作れるようにしているのに、図を描くのにテキストエディタでなくドローツールを開くのは面倒だな、テキストで図を描ければ、ソースコードとして管理できるから似たような図を量産するのも楽だし、バージョン管理で変更点もわかりやすい。

ということで探したところ、Plantuml が見つかりました。日本語のマニュアルもあるし、評判もいいみたい。

インストールしようとしたところ、図を1,2個作るだけならオンラインでできるようです。試すだけならハードルはとても低い。

マニュアルを参考にして作ったのがこちら

@startuml


[Github] as github

[さくらVPS] as vps

[local machine] as localmachine
:ユーザー: <.... github :1) pull
:ユーザー: ....> localmachine :2) Sculpinで変換

:ユーザー: ....> vps :3) upload(scp)

:ユーザー: ....> github :4) push

:訪問者: .left.> vps:閲覧 @enduml

変換した図がこれ

要素の順序や線の向きなど、細かく指定する方法もあるみたいですが、それをやりだすと大変そう。「まあ大体わかればいいか」というレベルで済むなら、驚くほど簡単でした。

# png でも svg でも作れるので、svg で問題ない環境なら svg もいいですね。WordPress ではまだ大変みたいなので png で貼っておきます

PlantUML で AWS の構成図を描く

UML で使えるアイコンはもちろん広く用意されているのですが、サービスのアイコンについても利用者が作って公開しているようです。AWS のサービスを表す図を公開している milo-minderbinder/AWS-PlantUML を見つけたので、これを使ってみました。

Github 上のライブラリを、前記のオンラインエディタから参照できるので、こちらも簡単です。使いたいコンポーネントを AWS-PlantUML から探して、include するだけで使えるようになります。

@startuml !define AWSPUML https://raw.githubusercontent.com/milo-minderbinder/AWS-PlantUML/release/17-10-18/dist !includeurl AWSPUML/common.puml !includeurl AWSPUML/Storage/AmazonS3/AmazonS3.puml !includeurl AWSPUML/Storage/AmazonS3/bucket/bucket.puml !includeurl AWSPUML/General/user/user.puml !includeurl AWSPUML/General/AWScloud/AWScloud.puml !includeurl AWSPUML/NetworkingContentDelivery/AmazonCloudFront/AmazonCloudFront.puml


[BitBucket] as bitbucket

[CircleCI] as circleci
AWSCLOUD(aws) {

  AMAZONS3(s3) {

    BUCKET(blog, "akimoto.jp")

  }
  AMAZONCLOUDFRONT(cloudfront,"CDN")

}
:ユーザー: -right-> bitbucket :**1**) push

bitbucket -right-> circleci :**2**) kick

circleci -right-> blog :**3**) upload

blog --> cloudfront :**4**) distribute

:訪問者: .> cloudfront:閲覧

note "ビルド&テスト" as note_build_and_test circleci .u. note_build_and_test @enduml

変換後

これも、コンポーネントの配置順が気に入らない、とかで調整しようとするとたちまち難しくなってきたので、まあ関係性が読めればいいか、で気にしないことにします。マニュアルを読み込んで頑張れば調整もできるのだとは思いますが。

プレゼン中の図も小さなテキストで管理できるようになったので満足です。

fun

考える、計画する、実行するの図 Think, Plan, Execute

2016-04-08 akky コメントする

Ishac BertranさんによるThink, Plan, Execute (考える、計画する、実施する)という図。

最初の考えをいかに実行していくか、というプロジェクトの動きについて、ベジェ曲線的な視点から作られたようです。

よく言われる「実行しないアイデアに価値はない」という警句にある、思い付きから実施までのたいへんさを教えるのにもいい図ではないかなと感じました。

redditで紹介された際に、いろいろなバリエーションが作られたようで、オリジナルを辿っていくと冒頭の白い背景のものが見つかりました。

アメリカ, ネットの事件

HttpsとTorで守れるデータ、守れないデータ – 電子フロンティア財団(EFF)の作成した図の読み方

2013-06-10 akky 1件のコメント

電子フロンティア財団が作った、HTTPSとTorを使った時に通信の何が守られるのかを表すダイナミック・チャートがよくできています。

図の登場人物に日本語の訳をつけてみましたが、リンク先で実際に左上の「HTTPS」と「Tor」をオン・オフしてみて、httpsやTorでwebサービスにアクセスすることで、インターネットの途中の通信路にアクセスできる第三者に対して、あるいはアクセス先のwebサービスのサーバにアクセスできる人に対して、何を隠すことができるのか、を見ることができます。

ユーザー名/パスワード(USER/PW)と通信内容(DATA)については、図の中の項目は分かれていますが、実際のところ、どちらか一方が読まれてしまう場合にはもう一方も読まれてしまうことがわかります。HTTPSを使うことにより、途中の経路でそれらが盗聴される心配はなくなりますが、末端のwebサービス側では、それらを監視することは可能なので、もしwebサービスの運営者・管理者が弁護士や警察とデータを共有(datasharing)しているのであれば、そこではデータは隠せないということになります。

ちょうど今、アメリカ政府/NSA(国家安全保障局)がGoogleやFacebookなどの主要サービス事業者のサーバーに自由にアクセスできるPRISMという秘密プロジェクトを実施している、という内部告発が英ガーディアン紙などからリークされ、GoogleやFacebookのトップは大急ぎでそれを否定する声明を出しています。

これが事実なら(アメリカ政府は否定する声明を出しています。)、オバマ大統領の弾劾にもつながるのでは、というぐらい大きなニュースですが、この告発では、右下の黒いSite.comに対して、アメリカ政府が自由にアクセスできるようになっていた、と主張しているわけですね。この場合は、Tor+HTTPSの両方をオンにしていても、エンドユーザーの接続元以外はすべて知られてしまっているということになります。

通信路や通信元を隠すことができるHTTPSやTorという技術に対して、何ができて何ができないのかを知るのに、とても良い図ではないかと思いました。

via HackerNews

秋元@サイボウズラボ・プログラマー・ブログ