Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9309

【Chrome拡張】同じWebサイトにアクセスしている人と交流できる大規模多人数参加型ブラウジング機能を作った

$
0
0
毎日20:00-22:00にWikipediaのメインページに開発者がいます。是非とも導入して話しかけてみてください! 概要 本機能を導入すると、ブラウザ上に同じWebサイトにアクセスしている人たちのマウスカーソルが表示され、自由にコミュニケーションを取ることができるようになります(下図)。 ※本機能は、ブラウザ上のマウスカーソルをMMORPGでいうところのプレイヤー、Webサイトをフィールドのように扱うため、大規模多人数参加型ブラウジング(MMOBrowser)と名付けました。広大なインターネットの世界を皆で探検しましょう! 開発動機 開発者はMMORPG好き(特にメイプルストーリー)で、フィールド上での一期一会の交流が楽しみだった Webブラウジングして良い個人サイトを見つけたときに、それを見たことある人と交流したかったが、Twitterのハッシュタグ等のコミュニティがなかった MMORPGのように現在同じサイトを見ている人とコミュニケーションできればいいなと思った 導入方法 デフォルト設定では、https://ja.wikipedia.org/wiki/*のページのみでMMOBrowserが有効になります。  本機能は、プロトタイプのため、Chrome Web storeを経由せずデベロッパーモードからインストールすることとなります。また、デフォルトでは、Wikipediaで現在開いているページのURLとそのときのマウスカーソルの座標が共有されます。上記データを他のプレイヤーと共有するプライバシー上のデメリットよりも、オープンな交流にメリットがあると考えた方のみ導入を進めてください。 0. 前提環境 Chrome Ver. 94(Manifest V2が動けばバージョンはなんでもよい) 1. MMOBrowserのダウンロード https://github.com/Hylia221/MMOBrowserにアクセスする 「Code」→「Download ZIP」を選択してMMOBrowser-master.zipをダウンロードする ダウンロードしたファイルを解凍する 2. Chromeデベロッパーモードの有効化 Chromeの「設定」を開く 左のメニューバーから「拡張機能」を開く 右上のデベロッパーモードを有効化する 3. MMOBrowserのインストール 「パッケージ化されていない拡張機能を読み込む」をクリックする 先ほど解答したファイルの中から、「extension」フォルダを選択する 拡張機能リストに「mmobrowser (version)」が表示されていれば導入完了 MMOBrowserの操作方法 1. MMOBrowserへのログイン Wikpediaのメインページにアクセスする ブラウザメニューの拡張機能バーからMMOBアイコンを選択する(下図) ユーザ名を入力する カーソルの色を選択する(*1) 「ログイン」を押す Wikipediaのメインページに戻り、チャット欄が表示されていればログイン成功です。表示されていない場合はページをリロードしてください。 以降、現在閲覧しているWebサイトのURL、カーソルの位置情報、メッセージが、同じWebページを開いている他のプレイヤーに共有されるようになります。 *1:ここで選択する色は、相手から自分のカーソルを見た時の色です。自分から見た自分のカーソルの色は変更されません。 2. 他のプレイヤーと会話する チャット欄にメッセージを入力し、送信を押してください。 マウスカーソルの右上にフキダシでメッセージが表示されれば送信成功です。同じWebページを開いているプレイヤーにメッセージを送ることができます。 3. チャット欄の表示・非表示 チャット欄を表示するためには、ブラウザメニューの拡張機能バーからMMOBアイコンを選択し、「チャットを表示」をクリックする チャット欄を表示するためには、チャット欄の上部の「×」をクリックする 4. MMOBrowserからのログアウト ブラウザメニューの拡張機能バーからMMOBアイコンを選択する 「ログアウト」を押す ログイン画面が表示されていればログアウト成功 以上がMMOBrowserの操作方法になります。MMOBrowserを使って大規模多人数参加型ブラウジングを楽しみましょう! MMOBrowserのアンインストール Chrome拡張機能ページの「削除」を選択する その他の使い方 extensionフォルダ内のmanifest.json, matchesを変更することでwikipedia以外のサイトでも動作させることもできます。matchesに"https:///"を追加すると全てのサイトでMMOBrowserが有効になります。 MMOBrowserのログイン中は、現在開いているWebサイトのURL(パラメータ含まない)と、Webサイト上のマウスカーソルの絶対座標が他のプレイヤーに共有されます。見られていることがばれたくないWebサイトや、マウスを使ったパスワード入力のあるWebサイトは有効にしないでください。 今後の予定 デフォルト設定のWebサイトを追加 この機能があればより良くなりそうなWebサイトがありましたらコメントお願いします! 現在のログイン人数を表示する ログインしているユーザを一覧表示し、同じ場所(URL)に飛べる 要議論機能。ひとまずオープンに振り切ってみる方針。 バグ修正 ユーザ名を日本語にするとなぜか縦書き表示になる 負荷テスト 実装面の記事を書く 主な動きはBackground ScriptでSocket.io を動作させ、URLとカーソル座標をNodeサーバから送受信する感じ 開発者コメント、備忘録など 大規模多人数参加型ブラウジングの構想は10年近く前から考えていたが、技術とやる気がなく作っていなかった。仕事でJavascriptを触るようになったのと暇ができたので作ることにした。 なんでもオープンな時代の構想だったため、現在のプライバシー重視の風潮に逆行してしまっている。大規模多人数参加型ブラウジングを流行らせたいと考えているが、プライバシー・セキュリティ上の問題が解決する気がしない。アイディアあればコメントお願いします。 Manifest V2の動作が2023年1月に終了するようなので、いつかV3に上げないといけないが、Socket.io + バックグランドスクリプトを使っているので、サービスワーカーに移植できる気がしない。やり方あれば教えてください。 面白いと思った方是非ともコメントください!開発の励みになります!

Viewing all articles
Browse latest Browse all 9309

Trending Articles