Web開発話【ShankStream】 その1 〜 開発初期 〜

ShankStream

先日URL毎にコメントが打てて、リアルタイムにそれを見れる「ShankStream」というサービスの初版を公開しました。

開発中に感じたことや、取り入れたことなどを裏話的に書いていこうと思います。

まず第一回は、なんでこれを作ろうと思ったのか、と、開発初期の思考を書こうと思います。

作った理由

きっかけはコメント欄の無いWebサイトを見ていた時でした。

このページ面白いと思ったんやけど、他の人はどう感じたんやろーなー、といったシンプルな疑問からでした。
で、この疑問を満たすサービスは結構あったりしました。
ところが、基本的にリロードしたり一定間隔での更新でしか新しいコメントが見れないものが殆どでした。
会話的に返信とかが飛び交っているコメントエリアなども沢山あったので、これ更新があったらどんどん表示出来ればいいのになーと感じたわけです。

そんな感じで、じゃあ作ればいいかなと思って作りました。

最初のイメージ

じゃあ作ろう、となった時にどういう操作でどういう画面があってどう表示しようか、といったことを考えました。
やっぱりこういうのはWebページ見ながらコメントもみたいな〜と思ったので、そういうのにうってつけなのがブラウザの拡張機能でした。
ブラウザに独自の機能を割り当てることができる仕組みは非常に便利です。
僕はChromeメインで使っていたので、そういったことからChromeの拡張機能を作り始めました。
この時はShankStreamというWebサイトを作る気は全くなく、ブラウザ拡張のみのつもりでした。

プロトタイプの完成と改善

とりあえず目的だった機能だけはだいたい3日くらいで出来ました。
何かを作ってリリースする、というのは機能だけ実装してはい終わり、というわけには行きませんので時間がかかるのはもっと別の事だったりしますが、ただ動くだけのものが一応できたので自分で色々動かしてテストしてました。
いざ出来たものを動かすと、この点が不満やなーとか、この点はもっとこうならないかなーとか、こんなことも出来ないかなーなど、いろんなことが出てきます。
で、溢れかえってしっちゃかめっちゃかになりがちなんで、こういう時にちゃんと整理して必要なものとそうじゃないものを切り分けて絞り込んで行きます。
最初のこのプロトタイプはどんなんだったかっていうと今みたいにウィンドウがポップアップで出てくるのではなく、ページ内に擬似ダイアログを出して表示してました。
要はWebページのHTMLの書き換えを行い、Javascriptでゴリゴリと動きを書いて、といった感じです。
この擬似ダイアログはリサイズできて、ドラッグできて、といった感じです。
ただ、ページ内にあるので、動かせる範囲はあくまでページ内になっちゃうんですよね・・・
そうなると、見ているページの何かしらのどこかを確実に隠してしまう形になります。
さらにはCSSでスタイルを当てているんですが、見ているページのCSSと絶対にバッティングしないようにしなきゃいけないし、Javascriptのイベントなども同様です。
これは技術面でも実用面でもいまいちだと思ったわけです。
そこから別ウィンドウを開いて表示しよう、と決まっていきました。

ウィンドウ内のコンテンツ

別ウィンドウを表示してコメントを表示する、となったのはいいですが、次に出てきたのが、じゃあその内容の実体はどうしよう?

といった問題です。

問題というとちょっと違うのかもしれませんが、どういうことかといいますと、Chrome拡張でHTMLを表示しようと思ったら拡張独自のHTMLページを表示する方法がよく使われます。
設定画面などはその類ですね。これはネットワークを介したページのやりとりをしないことを意味します。

ローカルページというやつですね。

これでも良かったんですが、そうなるとHTML, CSS, Javascript, 画像, フォントなど、全てのリソースを拡張に含めることになります。
今後FireFoxの拡張とかも作りたいと考えていたので、その度に全てをコピーしてメンテしていくのはどうも非効率だなと感じました。
コメントを書き込む、コメントを表示する、こういった動きをすることはChromeだろうがFireFoxだろうが変わらないので。
そうなると自然とWebサイトを作ろうという発想が出てきました。
サーバ自体は元々リアルタイムでコメントを配信するのに必要だったんですが、あくまでデータと接続のやりくりで、目に見える実体は無かった形でした。

ここにHTMLページを作って、URLでアクセスして表示できるようにしておき、拡張側ではここを表示してあげればコアな機能は一箇所をメンテすればOKになります。
さらにWebサイトがあればいろんなことができるな〜と、今後の拡がりにも期待出来ます。
URLが似ているストリームや、コメントが多いページとかを表示するページとかがあったらサイト内を回遊出来たりしますし。

この段階で

メイン: Webサイト

補助: ブラウザ拡張機能

というのが定まりました。

更に仕様を固めていく

ここからさらに仕様を完全に確定させていきます。
この辺りは次回に書きたいと思います。

やりたいことを形にしていくというのはしんどいときもありますが、基本的にやっぱり楽しいですね。
自発的なのでモチベーションが上がりますし。
実現のための技術の習得も苦ではありません。

では、次回に続きます。

以上です。

関連リンク

ShankStream

※本サービスのTOPページへ遷移します

ShankStream – Chrome拡張機能

※Chrome ウェブストアへ遷移します。

Recent Posts

Archive