WebTiles
2026-04-28
https://webtiles.kicya.net/
250×250px のタイルに小さな Web サイトを構築し、一覧表示する。
NekoWeb と連携しているため、NekoWeb での使用が多いが、
ドメイン認証を行い、
独自ドメインや他の Web サービスのタイルを作成する事も可能。
NekoWeb の News に 2026年1月10日公開されている。
🎈 Nekoweb (.nekoweb.org) | ふうせん🎈 FU-SEN
- - - 🎈 - - -
WebTiles の参照
0,0(WebTiles の表示)を中心に表示されている。
マウス操作・矢印キー・スワイプで移動し、
ホイール・左下・2 本指で拡大・縮小が可能。
2026年5月現在 -25,-25〜25,25 の範囲になっていて、
51×51=2601 タイルが設置できる状態で公開されている。
いろいろ移動して参照してみると楽しいだろう。
- - - 🎈 - - -
Chat
右下に出ている Chat は
Nekoweb 公式 Discord 内にある Kicya - webtiles が表示されている。
ルール上英語必須だが、ローマ字表記を含めた日本語もたまに出てくる。
Discord でしか見れない情報が存在する。
https://discord.gg/hvfHKyVS6b
2026年4月以前は WebTiles 関連で 2 チャンネル存在していたが、
統合され webtiles のみになっている。
- - - 🎈 - - -
Kicya.net
https://kicya.net/
WebTiles は Kicya.net 内で提供されている。
そのため、NekoWeb を使用している場合でも別途登録が必要。
- メールアドレスは + も使用可能(NekoWeb は + を使用できない)
- 一つのメールアドレスで複数のタイルを制作・管理できる
なお、Web サイト毎にタイルを管理するので、複数タイルを作成したい場合、
その数分のドメイン・Web サービスが必要になる。
有償登録の独自ドメインや独自ドメインのように使える
サブドメインを所有している場合、
そのサブドメインで登録できるので、事実上制限なくタイルが作成できる。
- - - 🎈 - - -
Nekoweb
🎈 Nekoweb (.nekoweb.org) | ふうせん🎈 FU-SEN
NekoWeb をログインしている状態にしておき、
Kicya.net 側からもログインし、
Connections にある Connect Nekoweb.org Account を選択すると、
NekoWeb と連携する事ができる。
これで一つのタイルとして追加される。
- - - 🎈 - - -
nya.je
🎈 nya.je
2026年4月より、Kicya 関連のサービスとして nya.je が公開された。
WebTiles で使用している Kicya アカウントで
nya.je から ●●●.nya.je を作成した場合、
この ●●●.nya.je がサイトの一つとして自動的に登録され、
WebTiles でタイルを一つ作成可能。
◎◎◎.●●●.nya.je など、更にサブドメインを付けた場合は
ドメイン認証を行って更に追加できる。
- - - 🎈 - - -
ドメイン認証
NekoWeb・nya.je 以外はドメイン認証が必要。二つの認証方法がある。
サイトとして追加するドメイン名はサブドメインも有効。
.well-known フォルダ内に kicya ファイルを作成し、
その `kicya` ファイルに指定のテキストを入れる。
https://ドメイン名/.well-known/kicya で表示できるか、
ダウンロードできる状態にすると良い。
_kicya.ドメイン名 で TXT レコードを作成し、
値として指定のテキストを入れる。
ネームサーバが使える場合は DNS が使用できるので、
独自ドメインの代わりに
deSEC .dedyn.io ・ EU.org .eu.org ・ DDNS Now .f5.si ・ pp.ua .pp.ua
などを使用可能。
🎈 deSEC .dedyn.io
🎈 EU.org
🎈 DDNS Now
🎈 pp.ua
更に HTTPS の認証方法で次の Web サービスも使用できる事を確認できている。
- Cloudflare Pages - .pages.dev
- GitHub Pages - .github.io - 設定により . はじまりが無効なのに注意
- Neocities - .neocities.org - 代わりに not_found.html で設定
- Netlify - .netlify.app`
- Web1.0 Hosting - .narod.ws ・ .oldcities.org ・ .w0.am ・ .w10.site`
- sourcehut pages - .srht.site
- Surge - .surge.sh - 代わりに 404.html で設定
- val town - .val.run - Hono 等を用いる
- Vercel - .vercel.app`
なお、認証の確認は登録時だけのようで、
404.html や not_found.html を使用して認証した時は
登録後すぐに元に戻して問題なさそうだ。
- - - 🎈 - - -
タイルの作成・編集
https://webtiles.kicya.net/
ログインした状態で WebTiles を参照すると
右上から追加したサイトを選択できる。
サイトを選択した状態で Edit を選択すると
ファイルマネージャーが表示される。
初期状態で次のファイルが存在する。
- app.js
- index.html
- main.css
そのうち必須なのは index.html のみで、
他の 2 ファイル は index.html から読み込まれているので
削除して動作に問題ない。
したがって最小限は index.html 1 ファイルとなる。
通常の Web サイト同様複数の HTML ファイルを作成し、ページ移動も可能。
ただし、戻るボランを使用できないので、戻るためのリンクも必要。
このファイルマネージャーから画像ファイルなどもアップロードできる。
画像ファイルはアップロード後に圧縮可能。
250×250px 固定なので、背景に使用する場合はサイズを合わせると良い。
容量はタイル毎に 25MB まで。
作成できるファイルの拡張子は次で制限されている。
html, css, js, png, jpg, jpeg, gif, webp, svg, bmp,
ttf, woff, woff2, otf, mp4, mp3, ogg, wav, webm, txt, md, json
テキストは日本語・絵文字も問題なく使用可能。
ローカルで制作し、アップロードする場合は UTF-8 必須。
座標 0,0 の WebTiles に制限が記載されているので、確認の上で作成する事。
- - - 🎈 - - -
タイルの設置
右上のサイトが選択されている状態で
「Free Tile (座標)」となっている場所をクリック・タップすると枠表示になり、
下に表示が追加される。
この状態で **Claim** を選択すると、
その一にタイルを置く事ができる。
同じ操作でタイルの設置位置を変更する事も可能。
example tile のまま設置したり、
文字を書き換えただけの状態でタイルを設置し、
そのまま放置しない事を強く推奨。
工事中(WIP)の状態だとしても、
ある程度まともに制作した状態にして設置すると良い。
- - - 🎈 - -
タイルの削除・移管
設置しているタイルを選択し、Give を選択すると
メニューが表示されるので、Free Completely を選択する事でタイルを削除し、
Free Tile へ戻す事ができる。
Kicya.net からサイトを削除してもタイルは残るので注意。
サイトを削除してしまった時は再度登録すれば削除状態の内容で復旧できる。
Give のメニューにある Transfer to Someone を用いて、
そのタイルを他の人へ移管する事が可能。移管コードが表示される。
- - - 🎈 - - -
他サイトへのタイル掲載
該当するタイルをタップして Link でリンクを得られるが、
https://webtiles.kicya.net/#ドメイン名 も有効。
右上にサイトを選択している状態で Embed をクリック・タップすると
HTML タグを表示する。
このタグを用いて任意の Web サイトにタイルを表示可能。
- - - 🎈 - - -
ログアウト
WebTiles を表示している場合は右上 KICYA.NET をクリック・タップする。
Kicya.net 内でサイト情報などを表示している画面で
右下フッターに Logout が存在する。
--- - 🎈 - - -
使用上の注意
座標 0,0 にある WebTiles に注意事項や制限があるが、
著作権などについては NekoWeb に近い運用状態となっているようだ。
(フェアユースが存在する国から公開されていると思われる)
Capsule 運営者が確認しているところでは、
一人で大きくタイルを専有するのは抹消対象。
(4x3=12 タイルは抹消対象。3×3=9 タイルは今のところ許容だが、
離れたところに設置するタイルが見られる)
なお、他者がつくった周辺のタイルに接続するように
背景画像を制作する行為は問題なく、
周辺のタイルに影響されて制作・設置されているタイも多く存在する。
- - - 🎈 - - -
その他ヒント
左上は猫 (少し右下に犬・鳥・ねずみなどの動物が集まっている)
右上は音楽 (主にアルバムシャケット、リンク等で再生もあり)
左下は Windows 98、右下にはうさぎのタイルが集まっている。
周りを意識して設置する事。近いタイルがあれば、並べるようにすると良い。
(完全に一緒のタイルにしてしまうと同一人物の複数タイルを思われるので注意)
周りにもタイルが設置されてきたら、
周辺のタイルとつながるようにデザインするのも良い。
Web サイトの内容がそのまま分かる内容(特に宣伝目的が明確なタイルは NG)よりも、
見た目に楽しいタイルが良さそう。
クリック・タップへ変化するタイルもあり、ゲームができたり、
検索できたりするタイルも存在する。
かわいいタイルは反応も良さそう。
Nekoweb 同様、日本の文化を好む人によるタイルも多数存在する。
なので、あえて日本語のままタイルを作ってしまうのもアリ。
ちなみに運営している Kicya さんは日本に旅行する程の日本好きで、
日本語のタイルもよろこんでくれているようだ。
選択されているタイルに限り active クラスが付く。
これを用いる事で選択・非選択時の表示を CSS で容易に変化できる。
(HTML タグで id="tile" を指定している場合、
CSS では #tile で初期状態・非選択時、.active #tile で選択時の可変部分)
:hover で近い動きができるが、
スマートフォン等の画面をタッチして操作する環境では `:hover` はほぼ動作しないため、
.active で変化するようにすると良い。
画像のアニメーションは選択されていない状態でも動作する。
一方 JavaScript や CSS のアニメーションはデフォルトで停止されていて、
選択する事で機能する。
タイル内でのリンクも通常は同様に選択してから
再度クリック・タップで機能する。(例外あり)
当初はアクセスも多かったが、現在はだいぶ落ち着いてきているので、
なかなか変化しない状況にあるが、たまに参照してみると変化があるだろう。
- - - 🎈 - - -
🎈 fusen.srht.site
- - - 🎈 - - -
◯ Powered by sourcehut pages