2019-07-07

Facebookなどで使われているローディングの名称を知ってる？ / 調べたらたくさんありすぎた話

結論からお伝えします。

Skeleton Screen
Skeleton Placeholder
Skeleton Loader
Content Loader
Content Placeholder
Placeholder

などと呼ばれています。多いですよね(^_^;)

特にSkeleton ScreenとContent Loaderと呼んでいる場合が多いです。

どれのこと？

YouTube・Slack・Facebookなど最近のアプリで使われている、丸や長方形のグレーで表示している箇所のことです。

正式なテキストや画像が読み込まれる前のプレースホルダーとして使用されています。

YouTube

f:id:omuriceman:20190707024531p:plain

Slack

f:id:omuriceman:20190707024114p:plain

Facebook

f:id:omuriceman:20190707025605j:plain:w300

他の事例に興味のあるかたはこちらの記事をご紹介いたします。

medium.com

最初に提唱した人は誰？

調査によると最初に提唱したのがこちらのブログの作者「Luke Wroblewski」らしいです。誕生は2013年9月のことです。

www.lukew.com

後にGoogleに買収されることになるPolarというアプリのデザインを通じて、それまで主流だったプログレスインジケーター(スピナー)をやめ、読み込まれた場所から徐々に表示させていくUIの表現方法としてSkeleton Screenを提唱しております。

なので調査に間違いがなければSkeleton Screenと呼ぶのが良いのかもしれませんね。

Skeleton Screenのメリット

ユーザーの待ち時間を短く感じさせることが可能です。また上記のプログレスインジケーターと比べると、Skeleton Screenはどこになんのコンテンツが表示されるかが推測しやすくなるため、プログレスインジケーターに比べてコンテンツの表示までの待ち時間が減っている印象を持ちます。

環境ごとの実装例紹介

私が調べる限りアプリやWebのほぼ全てでライブラリが作られております。 Skeleton・Content Loader・Placeholderと呼ばれていたりしてなかなかカオスです。

React / Vue.jsでの実装

danilowoz.com

Webフレームワークでの事例

semantic-ui.com

CSSのみでの実装

tech.arc-one.jp

iOSアプリ

github.com

Androidアプリ

github.com

React Nativeで実装してみる

今回私はReact Nativeで実装することにしてみました。React Nativeでは人気のライブラリが2つ存在します。

github.com

www.npmjs.com

後者のライブラリは、前者のライブラリが「expo」という開発環境にしか対応をしていなかったため、 expo以外にも対応するために派生させたライブラリですので似たようなものです。

今回は後者の「react-native-content-loader」を使って実装してみたいと思います。

環境設定

$ npm install react-native-svg d3-interpolate --save
$ react-native link react-native-svg
$ npm install react-native-content-loader

※ XCodeでビルドする場合はlibRNSVG-tvOS.aの削除を忘れないようにしてください。

サンプルコード

ライブラリのインポートを最初に行ってください。

import ContentLoader from 'react-native-content-loader'
import {Circle, Rect} from 'react-native-svg'

サンプル通りに実装を進めます。

<ContentLoader height={300} duration={1000}>
    <Circle cx="30" cy="30" r="30"/>
    <Rect x="75" y="13" rx="4" ry="4" width="100" height="13"/>
    <Rect x="75" y="37" rx="4" ry="4" width="50" height="8"/>
    <Rect x="0" y="70" rx="5" ry="5" width="400" height="200"/>
</ContentLoader>

添付のような画面になればOKです。ノッチ付き端末の場合SafeAreaViewなどの実装も忘れないようにしてください。

f:id:omuriceman:20190707052500g:plain

まとめ

最近のアプリでコンテンツのローディング時に表示されるUIの名称について調べた
最初にこのUIについて提唱しているブログではSkeleton Screenと呼んでいる
他のUI表現より待ち時間のストレスが減っている気がする

2019-06-30

漫画はHTMLで作る時代 / Comicgenであなたの漫画を作ろう！

f:id:omuriceman:20190630161656p:plain

はぁ。。。ブログが読まれない。

やあ！浮かない顔して、今日はいったいどうしたんだい？

ブログのアクセス数が伸びないの。。。

君のブログはわかりづらいからね！
漫画にしてみるなんてどうかな？

そんなこと言ったって・・・
漫画なんてかけないし？

Comicgenを使えば、HTMLだけで漫画がかけるんだよ！

Comicgen〜？

Comicgenとは

ComicgenはHTMLとSVGで漫画をかけるOSSです。 Gramenerというデータ分析事業を行なっている企業が、自社の資料の説明をするために開発しました。

github.com

現在最新版はv0.1.3ですが、表示に不具合がありこのブログについてはv0.1.2を利用しています。

環境構築

Comicgenは2つのファイルを読み込むだけで動かすことが可能です。

CDNの場合

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/comicgen/dist/comicgen.min.css">
<script async src="https://cdn.jsdelivr.net/npm/comicgen"></script>

CDNでv.0.1.2を利用する

<script async src="https://cdn.jsdelivr.net/npm/comicgen@0.1.2"></script>

npm or yarnの場合

$ yarn add comicgen     # Recommended option
$ npm install comicgen  # Alternative, if you prefer npm

<link rel="stylesheet" href="node_modules/comicgen/dist/comicgen.min.css">
<script async src="node_modules/comicgen/dist/comicgen.min.js"></script>

使用方法

基本的な使い方をご紹介します。

人物の表示について

<g class="comicgen" name="dee" angle="straight" emotion="smile" pose="thumbsup" width="290" height="290"></g>

上記のSVGグループ要素のプロパティをいじると人/角度/表情/ポーズが変わります。

<g class="comicgen" name="dee" angle="straight" emotion="angryfrustrated" pose="angryfrustrated" width="290" height="290"></g>

拡大や座標の変更

プロパティにscaleやx,y座標を加えると拡大したり移動したりします。

<g class="comicgen" name="dee" angle="straight" emotion="smile" pose="thumbsup" x="-100" y="-100" scale="1.7" width="290" height="290"></g>

セリフを表示する

<div class="comic-panel">
  <div class="comic-caption-top">Hi! I'm Dee.</div>
  <g class="comicgen" name="dee" angle="straight" emotion="smilehappy" pose="handsfolded" x="-317" y="-119" scale="2.2" width="150" height="200"></g>
</div>

Hi! I'm Omuriceman.

サイズや位置の調整が面倒じゃない？

どうだい？使ってみたくなっただろう？

便利な機能を教えてくれてどうもありがとう！でも数値の調整がとても面倒な気がするんだけど。。。

そんな君のために便利なGUIが用意されているんだよ！

このライブラリーは一見便利なのですが、座標の調整と拡大/縮小はとても面倒です。

そんな面倒な調整は公式サイトのGUIを使用するのがオススメです。

f:id:omuriceman:20190630160813g:plain

最終的に出来上がったg要素をコピーして貼り付けてください。

gramener.com

他にもこんな機能が？

レイヤーの順序の変更
1コマに複数人配置
フォントの変更
JavaScriptで呼び出せる
自分の好きなキャラクターを追加

好きなキャラクターを入れられるのは面白そうですね！！

まとめ

ComicgenはHTMLで簡単に漫画が作れる
キャラクターやポーズをプロパティで修正
座標や拡大率はGUIを使うといい

最後に伝えたい

最後まで読んでいただきありがとうございます！読者登録してください！

2019-06-30

隠れたコストを見つけだせ / Komiserでマルチクラウドの使用状況を可視化しよう

f:id:omuriceman:20190628170337p:plain

クラウドを利用しているとネックとなってくるのがコストや使用状況の管理です。「気づかないうちに使われているサービス」や「削除し忘れて放置したままのサービス」が積み重なって、気づいたら高額になっているケースもありますよね。

組織やアカウントが大きくなるとさらにややこしいことになってくると思います。

そんな方にむけてProductHuntで話題になっていたKomiserをご紹介します。

Komiserとは

KomiserはAWSやGCPのコストとセキュリティを分析し管理するツールです。

www.producthunt.com

コストや使用状況に関する内容がパッと見てわかりやすく整理されています。

特徴

クラウドのコスト / 使用状況 / セキュリティ / ガバナンスをわかりやすく可視化
マルチアカウント / マルチクラウドを簡単に切り替えられる
OSSで基本無料

マルチアカウント / マルチクラウドは最近サポートされました。

なお現在サポートされているクラウドプロバイダーは以下3つです。

今後Azure / IBM / Alibabaも対応を予定しています。

※OVHというのはフランスのクラウドサービスのことです。

構築方法

Mac OSを例に進めていきます。他の環境の場合は、公式GitHubを参照してください。

github.com

ダウンロード

$ wget https://cli.komiser.io/2.3.0/osx/komiser

パーミッションの設定

$ chmod +x komiser

起動

$ ./komiser start --port 3000

or 複数のアカウントを見る場合

$ ./komiser start --port 3000 --multiple

これで画面を確認できるようになります。

またAWSの場合「~/.aws/credentials」情報を参照しにいきますので、設定ファイルが存在しない場合はチェックすることができません。

画面説明

全体の画面はこんな感じです。 f:id:omuriceman:20190627202303p:plain

いくつかの画面について細かく紹介していきます。

起動中のEC2のRegionを地図上で確認

f:id:omuriceman:20190627212333j:plain

緑の箇所が使用中のインスタンスです。

誰だ！知らないうちにシンガポールにEC2を立てたのは！ という感じで気づくことができます。

コストの内訳

f:id:omuriceman:20190627213822p:plain

全体のコストとその内訳の主要サービス一覧が表示されます。

EC2関連の使用状況

f:id:omuriceman:20190627214719j:plain

稼働中/停止中/終了したインスタンス数
パブリックとプライベートのインスタンス数と割合
インスタンスタイプごとの稼働数と割合
リザーブド / スポットなどのインスタンスの稼働数
1ヶ月あたりのインスタンスタイプごとにかかっている費用

サーバレス/コンテナの使用状況

f:id:omuriceman:20190627215707p:plain

言語別のLambda Function数
Lambda Functionの呼び出し回数
Lambda Functionのエラー数
ECS / EKSのクラスタ数

S3の使用状況

f:id:omuriceman:20190628120804p:plain

S3のバケット数
バケット容量
オブジェクト数
空のバケット数

S3に関する使用状況です。空のバケット数が表示されているのはコストにかかってくるからなのでしょうか？

EBSの使用状況

f:id:omuriceman:20190628162831p:plain

EBS TotalとEBS usedを比較して、使われてないEBSを発見することができます。

AWSコンソールログイン情報

f:id:omuriceman:20190628123816j:plain

IAM User別のコンソールログイン情報
コンソールログインのIP情報をマップで可視化

コンソールのログイン情報が海外からあったりすると怪しいですよね！

セキュリティ情報

f:id:omuriceman:20190628134655p:plain

無制限アクセス(0.0.0.0/0)を許可しているセキュリティグループのチェック
リクエストが行われたIPアドレスのランキング

まとめ

コストやセキュリティを一目で管理できるKomiserを使用した
無料で使えてマルチアカウント / マルチクラウドを簡単に切り替えられて簡単
一目で重要な項目を確認できるのが便利
Tagごとにグルーピングして集計できる機能が欲しい

マルチアカウントやマルチクラウドを利用している方、是非一度試してみてはいかがでしょうか？

komiser.io

omuriceman's blog

iOS / AWS / Firebase / JavaScript / Deep Learning を中心とした技術を面白く紹介します！

Facebookなどで使われているローディングの名称を知ってる？ / 調べたらたくさんありすぎた話

どれのこと？

最初に提唱した人は誰？

Skeleton Screenのメリット

環境ごとの実装例紹介

React Nativeで実装してみる

環境設定

サンプルコード

まとめ

漫画はHTMLで作る時代 / Comicgenであなたの漫画を作ろう！

Comicgenとは

環境構築

CDNの場合

CDNでv.0.1.2を利用する

npm or yarnの場合

使用方法

人物の表示について

拡大や座標の変更

セリフを表示する

サイズや位置の調整が面倒じゃない？

他にもこんな機能が？

まとめ

最後に伝えたい

隠れたコストを見つけだせ / Komiserでマルチクラウドの使用状況を可視化しよう

Komiserとは

特徴

構築方法

画面説明

起動中のEC2のRegionを地図上で確認

コストの内訳

EC2関連の使用状況

サーバレス/コンテナの使用状況

S3の使用状況

EBSの使用状況

AWSコンソールログイン情報

セキュリティ情報

まとめ