マイナーバージョンアップのお知らせ

連休にひさびさにnoteツールのバージョンアップをしてみました。っていっても、めちゃ小さなバージョンアップですケド。。。何も言わないと誰も気づかなさそうので記事にしてみました。

今回アップデートしたのは、こちらの２つのツール。

【note】スキをくれたお友だち

【note】コメントをくれたお友だち

アイコン表示

なまえにアイコン画像が表示されるようになりました。これでだいぶ視認性があがったんじゃないかと思います。

ユーザ情報を取得するAPIの戻り値に、user_profile_image_pathという項目があります。ここに各ユーザのアイコン画像のパスが入っています。そのまま表示すると↓こんな感じで四角い画像がでてきます。

ので、表示する際には、角を丸く削って表示します。するとアイコンの見た目がnoteっぽくなります。CSSでまんまるにしてサイズ幅が56pxにするのがnote基準。

/* CSS */
.note_icon_img{
    border-radius: 50%;
    width:56px;
}

ローディング中…

データ取得中のローディング処理も少し変えてみました。いままでは、「しばらく時間がかかります。」と固定の文字を表示しているだけだったのですが、もうちょっと処理してますよアピールがあったほうがよいかと思い、ローディング中のゲージを追加してみました。こんなやつ↓

といっても、これ裏の処理とは連動していなくって、ただ動くアニメーション画像を貼りつけただけです。。。固定文字だけだと裏で動いている感が伝わらず、ついボタンを連打したくなってしまったり。処理中にボタンが複数クリックされても大丈夫なように、二重クリック防止対策はされてますが、そんなことより意外とこういう画像を貼り付けるだけなんてほうが有効だったりします。

以前はこういうアニメーションGIF作るのも手間だったんですが、最近はフリーで自動生成してくれるサイトとかいっぱいあります。こういう小手先のフリー素材とか知ってると意外と使えますｗ おすすめはCMAM（でいいのかな？）というサイト（商用利用可）。ローディング中のアニメーションGIFを生成してくれます。自身のサイトにあわせて色や背景色、サイズをカスタマイズできるのがGOOD！参考までリンク貼っておきます。

CMAN 無料素材サービス

お遊びツールに付き合っていただきありがとうございますｗｗｗ

その他、これまで作ったいろんなツールはここにまとまってます。