laptop.cssは、画像の周りにアスキーアートのラップトップ枠をつけてくれるという単機能のCSSスタイルシートです。オープンソースです。
3種類のサイズのラップトップが用意されています。
どういう時に有用なライブラリなのか、今一つわかりませんが。
縦横比に注意して画像を用意しないといけないみたいですね。そして、画像につけたリンクが無効になってしまった。
(rss フィード経由の方は元ページを開いて見てください)
via Hacker News
ASCII QR は、テキストでQRコードを作れる、というQRコードジェネレータです。
# 「ASCIIじゃなくてUnicodeだって? よく分かってるよ」とあるのでサービス名のASCIIは言葉の綾でしょうか
URLか文字列を入力すると、そのQRコードをUnicodeテキストで表示してくれます。
“Image”をクリックすると、画像版も見られます。
二つ並べてみると、だいぶ違いますね。
このサービスの使いどころを考えてみたのですが、QRコードを画像ではなく文字列で送れれば、転送内容をかなり節約できますね。メールにQRコードを添付して送るよりも、メール本文にテキスト版のQRコードを貼り付けて送った方が軽そうです。
# あれれ? QRコードが表現するURLや文字列をメール本文に貼り付ければもっと軽いのでは… まあそれは置いておくとして。
出来上がった「テキスト版」QRコードを、当ブログ上でなんとか表示してみたのがこれです。
フォントが等幅になったり、縦横比を合わせるなどいろいろやっていますが、僕のスマートフォンのアプリではQRコードとして認識してくれませんでした。
# テキストなのでコピペできます。テキストエディタ等にコピーしたら動くかも?
表示の調整に問題があるのかな、と思って元の ASCII QR 上のものも読ませてみたのですが、こちらも反応しませんでした。なんと。
OSやブラウザ、そしてQRコードリーダーによっては、読み取れる場合もあるのかもしれません。プロポーショナルフォントが当たり前の現代では、かなりのピーキーな調整が必要となるのかも。
This resume does not exist は、実在しない人物のそれっぽい履歴書を作ってくれるwebサービスです。
10秒ごとに新しい人物の履歴書が生成され、リロードすると表示されます。
実在しない人物の写真が作れるようになりましたし、文章や経歴についても同じように多数のデータを与え、似たものを作らせることができれば、実在しないけど実在しているかのように詳細が定義された履歴書を作ることもできるということですね。
用途ですが、たとえば、実在する誰かの個人情報を侵害することなく、採用の練習やウェブサイトデザインに使うとかが考えられますかね。UIデザイン時のユーザーペルソナを作るとかにも使えそうでしょうか。
悪用も考えられますね。実在しないそれっぽい人のデータがたくさんあれば、実社員や実ユーザーがいないフェイク企業をそれっぽく飾り立てるなんてことも起こるかもしれません。
via Hacker News
プレゼンテーション資料を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 で貼っておきます
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
これも、コンポーネントの配置順が気に入らない、とかで調整しようとするとたちまち難しくなってきたので、まあ関係性が読めればいいか、で気にしないことにします。マニュアルを読み込んで頑張れば調整もできるのだとは思いますが。
プレゼン中の図も小さなテキストで管理できるようになったので満足です。
