SNS を使う中でアカウントの共有をより簡単にするために制作した。Twitter や Instgram , Github などのサービスは個人がそれぞれのアカウントを持っている。しかしそれらは関連付けられず、他の人にアカウントを教えるときにはそれぞれのアカウントを 1 つずつ教える必要があり手間である。その問題に加えてスライドや資料ではなく自分自身について簡単な説明が行えるツールがあるとアカウント交換だけに留まらない交流を生み出せると考えた。そして 1 つのサービスに全てのアカウントを紐づけて管理でき、かつこれまでの自分の活動についてサムネイルとテキストで説明するサイトを簡単に作れるシステムとして制作した。
アプリにはユーザーが作った json ファイル元に web サイトを構築する機能とログインしてユーザーのリンクを発行する機能、またユーザー検索機能がある。中心となる機能はアプリのユーザーが作成した json ファイルに従って、誰でも閲覧可能な共有用のリンクを作成し、整形された web サイトとして表示するものである。図 1,2 にアプリケーションの実際の画面を示す。
表示に関しては以下の機能がある。
ユーザーは 図 3 で示すようにサイトの案内に従って形式に従った json ファイルを作成し、ShareLinks という名前のパブリックレポジトリ にプッシュする。その後アプリに Github を使ってログインすると、共有用のリンクが発行される。ログイン画面は 図 4 の通りである。Github を利用した理由はこのサービスがエンジニアの SNS のアカウント共有や自己紹介に特化したのものであり、非エンジニアユーザーは当サービスを好んで使わないと考えたためである。またサービスをデプロイする中で新たにバックエンドを用意する必要がないという利点もある。共有用のリンクを一般のユーザーが見に行くと登録したユーザーのページを確認できる。このログインは Firebase Authentication を用いている。Firebase を使った理由は導入の手間が少なく、維持のコストを抑えられるためである。
以上の画面ではレスポンシブ表示に対応させ、端末に依存しない表示を実現している。図 5,6,7 にてスマートフォンでのアプリ画面のサンプルを示す。
このサービスは他の人と交流する中での利用が想定されるため、パソコンよりも携帯性に優れるスマートフォンでの快適な利用が求められると考えた。そのため全ての機能においてパソコンと同じようにスマートフォンでも問題なく利用できる。
サービスの特徴である共有をよりスムーズに行えるようにユーザーが発行されたリンクをワンタップでコピー及び、QRコードとして保存する機能を実装した。これにより SNS の共有をもっと簡単にできるようになる。また QRコード としてスマートフォンに保存しておけば相手に URL を入力させる手間を省きながらこのユーザーの情報を共有できる。
サービスの利用には Github のアカウントと git の最低限の知識が必要になるため、非エンジニアやプログラミングの経験の浅い初心者にとって利用しずらいサービスになっている。またパソコンを使わずにスマートフォンのみで登録、および変更を行うのも手間である。その状態を解消するため、ユーザーの入力を web アプリの中で行えるようにし、バックエンドを用意して DB に情報を保存し、ユーザーに負担を与えずにアプリ内で全ての操作が完結するシステムとしたい。
現在のアプリケーションではデザインのテンプレートが 1 つしか用意されていない。web アプリのレイアウトをユーザーが現在よりも自由に変更できるようにすると、自己紹介のときに自分のイメージを相手に伝えるのに優位に働くだけでなく、サービスを継続して使い続けたいという意欲が湧くと考えられる。そのためレイアウトのテンプレートを増やす、あるいはユーザーが独自に設計できる仕組みを用意する必要がある。また SNS などでリンクを共有するときに有効な OGP だが、現在どのページでも同一のものしか表示されない。開発に React を採用したため動的な OGP 生成が難しく、SNS でリンクを共有したときにオリジナルな画像やキャプションを表示できない。この課題を解決するために Firebase や Cloudflare を使って OGP を設定する機能を追加するか、Next.js に置き換えを行いたい。そしてユーザーが SNS で投稿して共有したいと思えるサービスを目指したい。
Vite + react + ts を採用した。React はコンポーネントベースでの開発をのために採用した。TypeScript は型安全な開発にするために使用した。
スタイリングには styled-components を採用した。採用した理由は CSS-in-JS での開発を行いたかった点がある。また styled-components ではコンポーネントの命名に意味を持たせられるため、デバックを行う際にコードのどの部分を変更すればよいかが分かりやすくできるため採用した。
Vercel で行った。Github にプッシュするだけでデプロイができるため採用。Github Pages でも同様にデプロイができるが、Github Actions の設定が必要で手間がかかるため使用しなかった。またコードの保守性を高めるためリンターである ESlint を導入した。それにより Vercel を用いて CI/CD を行う開発となった。
デプロイ先：https://share-links-kanakanho.vercel.app/
パッケージマネージャーは yarn を使用している。実行関係のコマンドは以下に記す。
react-router-dom を利用してルーティングを実装した。これによりユーザーごとのページの表示を可能にした。またユーザーが存在しない場合には 404 ページを表示するようにした。
ユーザーの Github レポジトリから data.json を取得して、サイトを動的に生成する。データは 1 つのコンポーネントでのみ受け取り、余計な通信を生まないようにした。それぞれのユーザーによって表示する内容や量が異なるため表示が崩れないように、またスクロールが不自然にならないようにした。ホーム画面でもユーザー画面と同様の表示を行っているが、これも別でコンポーネントを用意するのではなく、ユーザーの表示に使用しているコンポーネントをそのままに表示する内容だけを変化させる方法をとった。
favicon は今回のために Adobe illustrator を使ってアイコンのデザインを行った。OGP（Open Graph Protcol） はアプリのキャプションを用意し、画像はデモデータが入った状態のものを使用した。Twitter での表示にも対応させ、SNS で共有したくなるようなサービスを目指した。現在の Twitter の仕様では画像の投稿と OGP の判別がつきにくいため summary_large_image ではなく summary での表示とした。
