The frost-web from frost-dev

ストリーミングAPIがfrost-apiのdevelopブランチに適用されたらやっていく

概要

　例えば、普通クライアントは投稿情報を取得したいときには、APIの GET /posts/:id エンドポイントに各種キー(ApplicationKey、AccessKey)を付加してリクエストする必要があります。

　しかし、Frost-WebはIceAuth関係など特殊な権限を持ったアプリケーションであるためにクライアントサイドには各種キーを公開せず、サーバーサイドのセッションにAccessKeyを保持し間接的にAPIを利用します。
　そのため、クライアントサイドからは直接的にはAPIアクセスができず、なにかAPIアクセスを伴う操作を行いたい時には常にエンドポイントをサーバーサイドに作成していく必要が出てきます。

　APIのエンドポイントと対応するエンドポイントをすべて用意するのは正直効率が良いと思わないので、ある程度汎用的に利用できるクライアントサイド向けのAPIアクセス用エンドポイントを用意しようと考えています。

注釈

サーバーサイド: Frost-WebのWebサーバ側の環境
クライアントサイド: Webサーバーから提供されたリソースを実行するブラウザ側の環境

APIアクセスのための汎用エンドポイントの仕様

サーバーサイドのセッションを利用
ホワイトリストで利用できるAPIのエンドポイント名を追加していくことによって、特殊なAPIはそこからは利用できないようにする

よければ意見ください。

readyイベントの発行されたタイミングによって、それをクライアントが拾えないことがある

改善案

readyイベントを廃止して、api接続後にフロント-Web間のWebSocketのrequestをacceptするように修正する(難しそう)
readyイベントを一定間隔で発行して、フロントが無事受け取ったタイミングで「ready発行停止イベント」をフロントが発行する

どちらかの実装をしていく必要がある。理想は前者

内部API(Streaming)の特殊権限を必要とする操作にはreCAPTCHAトークンを要求する

webフロントのセッションを横取りして、外部アプリから特殊権限の必要な操作をされては困るため

直接的な前提

内部API(/session等)をストリーミング上から呼び出せるように: #18

StreamingProxy上のFrost-APIに再接続する処理が実装されていない

何らかの再接続処理が必要

StreamingProxy(APIプロキシ)の廃止について

特殊な権限を持っていないアプリケーションのaccessKeyでフロントから直接apiリクエストさせるように。下記の前提によってappKeyは割れない

直接的な前提

applicationKeyを連携時にだけ要求する(検討): Frost-Dev/Frost-API#70

アカウント登録に「パスワードの再入力」の項目を追加する

登録時に間違えると、再ログインができない状況に陥るため

動作させるための手順とコンフィグファイルの形式公開

セッションの期限に関連する不具合

なんかエラー出てました

ので、それっぽく修正して、とりあえず様子見です。

エラーを良い感じに表示したい

てかなんで出てないの

ホームのgeneralタイムラインモード

/general でgeneralタイムラインのホームが表示されるようにする

SPA

クライアントサイドルーティング、ページコンテンツのコンポーネント化(frost-page-*.tag)等。
ブランチ: https://github.com/Frost-Dev/Frost-Web/tree/feature-page-components

CSSフレームワークを使う

楽になりそう
http://getskeleton.com/ とか https://purecss.io/ とか http://websymphony.net/almost-flat-ui/ とか http://kathamo.github.io/ とか

i18n

英語と日本語で表示できるといいですね
やり方を考えていく必要がある

パスワード忘れの対策

メアド登録するとか、
秘密の質問とか、
そういうやつ。
何が良いかなあ

Desktop 上にトースト通知を表示させたい

#タイムラインをもっと監視できるようにしたい所存。。。
どうでしょうか？
参考 : node-notifier http://co.bsnws.net/article/123

フロントのSPA化に関する課題

現状

フロントをSPA化したい
- スタンドアロンに近づいていくのでページレンダリング時やその他のほとんどのapiアクセスがwebサーバを通さずに直接フロント上で行っていく必要があるだろう
フロントがappkey/accessKeyの代わりにセッションを介してapiを呼び出している(streamingProxy)ので、余計なサーバリソースが必要になっている

今後

SPA化 #36
StreamingProxyを廃止して直接apiリクエストさせるようにする #37
- [API] appKeyを連携時にだけ要求するように Frost-Dev/Frost-API#70
- [API] AccessKey毎に個別の権限を設定可能にする Frost-Dev/Frost-API#88
内部APIはストリーミング上から呼び出せるように(特殊権限を必要とする操作にはreCAPTCHAトークンを要求) #18

改行できない

Enterで送信されてしまうため

投稿の実装

ステータスポスト投稿の連投が起こる

対策済みのはずが
困った

JSフレームワークを使う

Vue.js とか Riot.jsとか

apiプロキシを経由するエンドポイントを限定的にして、一般的なものは別のaccessKeyで直接apiアクセスするようにする(検討)

迷ってる

Cookieのセキュア属性、HttpOnly属性が無い

アプリの連携画面で手動でユーザーが認可したということをどうやって保障するか

reCAPTCHAとか挟むしかないかなあ

内部API(アプリ登録など)をストリーミング上から呼び出せるように

特殊権限を必要とする操作にはreCAPTCHAトークンを要求します。(webフロントのセッションを横取りして、外部アプリから特殊権限の必要な操作をされては困るため)

EventName	Description	implemented?	checked?
app-create	連携アプリの登録	ok	not yet

URLをリンクとして表示

WebSocketのインスタンスに任意のカスタムイベントを発行させようとすると Error:Illegal invocation が発生して発行に失敗する

以前、ネイティブのWebSocketでは正常に独自のイベントが発行されていたので、reconnecting-websocketが絡んだ問題？

対象のソース

https://github.com/Frost-Dev/Frost-Web/blob/develop/src/client/helpers/web-socket-events.js

URLが存在した時にプレビューを表示する

またクロール機能は自らで提供するのではなく外部のAPIを利用するほうが望ましい

テストを書く

書いていくぞオイ！(また今度ね)

ダークテーマ表示

黒っぽいUIのサポート

未読投稿があったときにページタイトル変更したい

したいね

APIが完成するまでのAPIアクセスに関して

APIドキュメントのサービスにモックサーバ機能が付いていたので、そっちにリクエストしていく形で進めていきましょう
モック: https://private-35ec8-snsfrost.apiary-mock.com/
APIドキュメント: http://docs.snsfrost.apiary.io/

エンドポイントの例:
https://private-35ec8-snsfrost.apiary-mock.com/applications/1/application_key

フレキシブルデザイン

リンク: Frost-Dev/Frost-API#41

riotに関する参考ページ、知見の共有等

ちぃ覚えた。

yield+Tagのネストで継承っぽい書き方をするときのメンバ追加

親側にメンバ(メソッドとか)を追加して、yieldに渡す内容にparent.(親側メンバ名)でアクセスする。
refを張れって、親からメンバを追加・アクセスしても良さそう
https://173210.github.io/riot#tagparent

onclickイベントの引数を上書き

引数を1つも与えないようにするときなどに利用
https://murakamikoji.com/riot-onclick-arguments/

NumpadEnterもEnterの一種だがEnterとして扱えていない

KeyboardEvent.code ではなく KeyboardEvent.key を使うと良いと感じる

Frost-Web/src/client/tags/frost-create-status-form.tag

Lines 41 to 43 in 50125e7

    
           this.addInput = (e) => this.inputKeys[e.code || e] = true; 
        
           this.removeInput = (e) => delete this.inputKeys[e.code || e]; 
        
           this.existsInput = (e) => this.inputKeys[e.code || e] != null;

	this.addInput = (e) => this.inputKeys[e.code \|\| e] = true;
	this.removeInput = (e) => delete this.inputKeys[e.code \|\| e];
	this.existsInput = (e) => this.inputKeys[e.code \|\| e] != null;

frost-dev / frost-web Goto Github PK

frost-web's People

Stargazers

Watchers

Forkers

frost-web's Issues

関連APIエンドポイント

概要

注釈

APIアクセスのための汎用エンドポイントの仕様

改善案

直接的な前提

直接的な前提

現状

今後

対象のソース

yield+Tagのネストで継承っぽい書き方をするときのメンバ追加

onclickイベントの引数を上書き

Recommend Projects

Recommend Topics

Recommend Org