プラスプラス開発者ブログ

岩手県盛岡市のシステム開発会社「株式会社プラスプラス」の開発者ブログです。

タイムライン的なSNSのようなもの

こんにちは。

業務の報告を行うタイムラインを社内実験として開発して運用しています。

弊社は岩手県盛岡市に本社がありますので、コロナウィルスの直接の影響はでておりませんが、 4月下旬の緊急事態宣言を全国に拡大した際に、リモートワークをより推進することになりました。

リモートワークの問題としまして、作業の成果をどのように見せるか?が課題として挙げられるかと思います。

弊社では以前よりチャットワークやSlackを業務のコミュニケーションとして使用しておりますので、業務に関連するメンバー同士であれば、ある程度状況が見える形になっていますが、チャット系のコミュニケーションツールは、グループやチャンネルに入っていないと、発言が見えなかったりします。

リモートワークを行うスタッフを見えるようにしたいということで、業務の報告を行うチャットワークのグループを作って運用していましたが、それですと、他の人の報告も流れて来ますので、どんなメッセージかな・・・と確認してしまったり作業に集中できなかったりします。

そこで、チャットワーク安ラックのような話題ごとにグループを作るのではなく、

  • 全社員が互いにお仕事の報告を投げあい、
  • それが他の人に通知されるのではなく、
  • あとから報告を俯瞰して情報を見れるようなもの

を作ることにしました。

こんな感じのインターフェースです。

f:id:plusplus-sawada:20200507141615p:plain
タイムライン的なSNSのようなもの

ウェブはNuxt.jsで作成、データのやり取りはNode.jsでWebAPIを実装しています。

ざっくり作ったところで、会社にレビューしましたところ、「5月いっぱいやってみましょう」ということになり、連休明けの本日より運用を開始しています。

会社の時間を使って開発しますので、実証実験として行っています。

ですので、次のような告知を全社に行いぜひ使い倒してください、としています。

  • 「リモートワークをするにあたって、こういった物を作りたいです。作っていいですか?」と会社に提案して作りました。仕様もコンセプトも一人で考えましたので、偏りがあるかもしれません。
  • いまはメッセージを投稿して、それをタイムラインで見るだけの機能です。メッセージへのリプライ、検索、メンション、タグ、URLのリンクといった機能もまだありません。
  • もっとより良いコンセプトがありましたら提案がほしいです。
  • 改善案がありましたら教えて下さい。
  • メインのお仕事の隙間時間で作りましたので、バグがあるかもしれません。ぜひバグ報告をお願いします。なるべく対応します。

というわけで業務の合間に実験開発を進めていきつつ、 こちらにも紹介をしていきたいと思います。

Nuxt.js でウェブサービスを開発する

こんにちは。

自社でウェブサービスを開発することになりました。

まだ開発中ですので、どのようなことをするのか具体的には書けないのですが、 出せる範囲でこちらに書いていきたいと思います。

システムの組み合わせ

フロントエンドに Nuxt.js バックエンドは Node.js で API という組み合わせです。

ユーザー別の処理やウェブコンテンツ提供の処理を行うために、APIはアクセストークンによる認証という方式を採用することにしました。

サーバーサイドでのAPI通信とクライアントサイドでのAPI通信の区別

それ自体は universal モードで動作させる予定ですが、APIとの接続にはユーザー個別の処理や会員向けの情報をやりとりするために、工夫が必要です。

会員ログインする前の情報は asyncData() にAPI通信の処理を書き、サーバー側でAPI通信してデータを取得する形ですね。 データの管理を Vuex store とするなら fetch() でやる感じですね。

 async asyncData() {
        let categories = [];
    
        const res = await axios.get(/* APIのエンドポイント */);
        /*
        res.data の中身を処理する
        */
    
        const data = {
            
        };
        return data;
    },

一方、会員向けのAPI処理は誰からのリクエストなのか?を区別する必要がありますので、ログイン認証時に払い出されたアクセストークンを API のリクエスト時に付与する、といった実装が必要です。

アクセストークンの保持はくアイアント側の処理で行われますので、 API通信の処理を plugin として実装し、クライアントサイドで動作するように next.config.js に設定します。

    plugins: [
        { src: '~plugins/API通信するプラグイン', ssr: false },
    ],

あとはここのページやコンポートンとからそれらの処理を呼び出すイメージです。 ↓ページ読み込みの際にAPI通信するように mounted() に実装する場合の例です。

 mounted: async function() {
        try {
            const res = await API通信するプラグインの処理を呼び出す();
            /*
            res.data の中身を処理する
            */
        } catch (e) {
            // エラー時の処理
            
            // 必要に応じてログアウト処理など・・・
            
        }
    },

処理がサーバーサイドで行われるのか、クライアントサイドで行われるのか、意識が必要ですが、 慣れれば同じような形で実装を進めていけるかなと思います。

宜しくお願い致します。

Looking Glass でアプリを動かす!!

今月はもう無理っすの「軽く熊」です。
裏でまた新規デイバス対応作業してました…。

今回は裸眼立体視ディスプレイ「Looking Glass」なる
面白いデバイスに触れましたが、こういうものは
一体どんな人が思いつくんでしょうね…次元が違います。

続きを読む