46 lines
1.4 KiB
Markdown
46 lines
1.4 KiB
Markdown
|
+++
|
||
|
|
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とかもそうですね。
|