Notices by Ei IS (lumidina@oransns.com), page 26

眠いときの対処法。
ミンティア一粒食ってマスクして上向きに息を吐き出してミンティアブレス！
目にダメージ！
通称ザメハ

先越された・・・
まぁいいや。

MastodonのユーザーのURLの末尾に.rssをつけるとRSSが取得できるのか。
良いことを知った。

https://mstdn.jp/users/lumidina.rss

本日現時点までの進捗。いきなりどうでも良い機能実装。

instance/peerを使って、全インスタンスを検索・情報閲覧できる画面実装。
インスタンスの情報と運営されてる方のアカウントの情報を表示。
いずれinstance/activityを使って統計情報も表示させたい。

こちらoransns.com、それからQiitaが運営しているqiitadonを見てみたが、サムネイル画像等がないので物悲しい・・・。
情報がふんだんなら例として、tokamstdn.jp（十日町市のMastodon）。

トゥート内のリンクをプレビュー表示する機能実装完了。
表示の仕方は基本的にはG+で、若干Twitter風味をトッピング。

それから本文中のリンク（のHTML)にあったCSSクラスをきちんと定義してマストドンの本来のUIの表示に合わせた。
つまりhttpsや末尾の数文字が消える。

さすがにここ毎日開発してて疲れた・・・。

よっし、タイムラインのトゥート表示できたああああぁぁぁぁ！！！
マジG+風！
Vue.jsの使い方に苦戦したけどやっとコツを掴めた。コンポーネント化したから修正楽になる～。

ひたすらテストしまくって初回の成功でここまでできればひとまず十分かな。

自作クライアントで表示させたらこんな感じに。
Mastodonの標準UIとは違って全部表示させられるからこのままでもいいんだけど、この自由なフィールド使って実現したいことはいくつかあるのです。

先日買ってきたこれ、やっぱきちんと読み進めよう。

本日最後の進捗はトゥートの返信欄。
これも見た目はG+風。

ただ、G+ではストリームは上から下へ流れるのに、コメント欄だけは下から上に向かって流れるという、投稿の流れが違うのが気になっていた。
それをどちらも上から下に流れるように表示する。
これでTwitterの返信欄の流れと一致するようになる。

ただ、このあたりは今後誰かに試してもらう上で意見求めたほうがいいのかも。

今日までの進捗。設計にまだ悩んでる箇所もありで。
今回は動画で報告。

・トゥートのメディアの表示の仕方
・閲覧注意のボタン設置
・コメント（返信のトゥートの表示の仕方）
・トゥートのその他メニューの表示の仕方

メンションとタグは、わかりやすいリストで抽出したいが見せ方を考え中。

TLはベースを作成している最中なのでデータはまだ流せないなぁ。
今日中に本データ流してTL生成したいが・・・。

今日までの進捗。今回はユーザー画面。垢はもう隠すのも面倒なので、別インスタンスの自分。

自作クライアント←Mastodon通常UI

さっきの投稿の意味は画面内の表のアイコン通り。
ここに、ユーザーが任意に指定したアイコン名のアイコンを表示させるつもり。

インスタンスの情報は認証なしで簡単に取得できるのか。/api/v1/instance/peers で全インスタンスを探し、/api/v1/instance でインスタンスの基本情報を得て、/api/v1/instance/activity で週間の動きを得る。最後のAPI、相当重要でお宝になりうる情報だよなぁ。これが認証なしで叩けるなんてMastodonさすがだ。

streaming/userはいいとして、streaming/public/localこええ～?mstdn.jpでもガンガン流れてきたから、とてもじゃないが連合タイムラインのstreaming/publicを安易に流す気になれねぇ?

風呂って戻ってきた後、あれ、いつのまにG+開いてたんだっけ？って思ったら、自作クライアントの画面だったでござる。
さすがに画面似せ過ぎかw

おまけ。画像つきの場合。
grid-row: span 4だとずれるので、画像を一定のサイズに収めた上でspan 4以上にすればこの通り等間隔にスマート。

1 - PCでの一般的なウィンドウサイズ表示
2 - フルスクリーンおよびiPad Proなどでの大表示
3 - モバイル表示

まぁ、自分の力ではなくてマテリアルデザインのライブラリの力なんだけどね・・・！
ここまでできれば、純粋に表示だけはG+に、そしてG+をやったことがない人には新鮮なMastodonのクライアントになれる・・・といいな。

親要素にdisplay: grid、
子要素に
grid-column: span 1 ;
grid-row : span 4;
これでGoogle+のストリーム再現成功。思った以上にシンプルなCSSクラスになったのでこれならイケそう。

CSSのグリッドレイアウトおもしれぇ～

ゴリゴリ画面設計しているときが実は一番楽しいと思うそんな一時。
次のウェブアプリ～?

よし、UWP版もMastodon投稿整備完了。ちなみにこんなことすれば、TwitterとMastodonインスタンス同時に投稿できたりする。今回はしないけど。

よるのおらんテスト?