+++
date = "2023-02-26"
tags = ["bluesky","atproto"]
title = "blueskyのweb uiを作ってみた"
slug = "bluesky-atproto"
+++

今回は、blueskyのweb uiを作ってみました。bluesky、楽しい。

こちらのページにアクセスして、usernameを入れると、投稿が出てきます。

https://bskyw.syui.ai

https://bskyw.syui.ai/syui

一番難儀したのがcssです。srcは`/bsky`にあります。vueで書かれています。

```sh
com.atproto.repo.listRecords
```

```html:src/App.vue
<template>
	<div id="app">
		<div class="bluesky-avatar"><img :src="user.data.avatar"/></div>
	<div v-if="user" class="bluesky-user">
		<p><a :href="this.bskyurl">@{{ user.data.handle }}</a></p>
		<p>{{ user.data.did }}</p>
	</div>
	<form @submit.prevent="submit">
		<input v-model="id" placeholder="id" value="id">
		<input type="submit">
	</form> 
	<div v-if="record" class="bluesky-record">
		<li v-for="i in record.data.records">
			<p><span class="name">{{ name }}</span></p>
			<p><span class="text">{{ i.value.text }}</span></p>
			<p><span class="time"><a :href="i.uri">{{ i.value.createdAt }}</a></span></p>
		</li>
	</div>
</div>
</template>
```

なお、vueはjsのframeworkなので"jsで書かれています"という表現が正しいのですが、jsのframeworkはlangという認識でもあるので私はこのように表現することが多いです。reactとかもそうですね。