tag:crieit.net,2005:https://crieit.net/tags/SSSAPI/feed Crieitでタグ「SSSAPI」に投稿された最近の記事 2021-10-05T17:05:54+09:00 https://crieit.net/tags/SSSAPI/feed tag:crieit.net,2005:PublicArticle/17698 2021-10-05T17:05:54+09:00 2021-10-05T17:05:54+09:00 https://crieit.net/posts/Firebase-SSSAPI-Web <p>開発しているGoogleスプレッドシートのAPI化サービス「<a target="_blank" rel="nofollow noopener" href="https://sssapi.app">SSSAPI</a>」をβ版リリースしたときに、<br /> プレスリリースをいろんなメディアに送ってみてた。</p> <p>せっかく調べてまとめたし、次も使う機会があるだろうと思ったので、<br /> Nuxt/Firebase/SSSAPIの構成でWebサービス化してみた。</p> <p>プレスリリースを受け付けてるサイトを調べるのは大変なので、<br /> どこに送れるのかな〜と思った方は使ってみてもらえるとうれしいです(<em>´ω｀</em>)</p> <h3 id="作ったサービス"><a href="#%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9">作ったサービス</a></h3> <p><a target="_blank" rel="nofollow noopener" href="https://press-done.memory-lovers.com">https://press-done.memory-lovers.com</a></p> <p>送付するプレスリリースごとに、どのサイトへ送ったかの状態管理ができます。<br /> それだけのシンプルなWebサービス。</p> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/b52d95a8-788f-5625-c536-4ecd6cc147b5.png" alt="スクリーンショット 2021-10-04 23.35.26.png" /></p> <h3 id="システム構成"><a href="#%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E6%A7%8B%E6%88%90">システム構成</a></h3> <p>基本構成はこんな感じ。</p> <ul> <li>フロントエンド: Nuxt+Buefy</li> <li>認証: Firebase Authentication</li> <li>ユーザデータ: Firestore</li> <li>マスターデータ: <a target="_blank" rel="nofollow noopener" href="https://sssapi.app">SSSAPI</a></li> </ul> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/d9f069c4-7d32-5ea8-aea5-91300fea7030.png" alt="スクリーンショット 2021-10-04 23.40.41.png" /></p> <p>ユーザが更新しないマスターデータはSSSAPIを利用している感じ。</p> <p>メディアサイトのデータをFirestoreに入れておく形もあるけど、<br /> Firebaseコンソールで追加や編集するより、<br /> スプレッドシートを更新するほうが楽なので、この形にしている。</p> <p>スプレッドシートの中身はこんな感じ。</p> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/e130e233-915d-e105-0e75-48249f002a13.png" alt="スクリーンショット 2021-10-04 23.43.50.png" /></p> <p>SSSAPIはこんなJSONを返してくれる。</p> <pre><code class="json">[ { "id": 1, "サイト名": "TechCrunch Japan", "サイトURL": "https://jp.techcrunch.com", "送付方法": "メール", "isActive": true }, { "id": 2, "サイト名": "日経クロステック", "サイトURL": "https://xtech.nikkei.com", "送付方法": "メール", "isActive": true }, { "id": 3, "サイト名": "ITmedia", "サイトURL": "https://www.itmedia.co.jp/", "送付方法": "メール", "isActive": true }, ] </code></pre> <p>※「行数をIDとして追加」オプションを使ってるので、idが自動で付与されています。</p> <p>このスプレッドシートは登録依頼のGoogleフォームと連動しているので、<br /> 追加依頼があったら内容を確認して<code>isActive</code>を<code>true</code>にすれば反映されます。</p> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/39ce3a05-cd7b-2ed8-81e1-af76025e6175.png" alt="スクリーンショット 2021-10-04 23.56.34.png" /></p> <p>こういった構成は割と多く、本の貸し出し管理と備品管理とかでも使える。<br /> Webサービスからスプレッドシートを編集できないので、<br /> 管理者権限とか不要なので、その分フロント側も楽に作れた(<em>´ω｀</em>)</p> <p>プレスリリースってどこに送れるのかな〜と思った方は、<br /> ぜひ使ってみてもらえるとうれしいです(<em>´ω｀</em>)</p> <p><a target="_blank" rel="nofollow noopener" href="https://press-done.memory-lovers.com">https://press-done.memory-lovers.com</a></p> <h3 id="SSSAPIはβ版ユーザを募集しています!!"><a href="#SSSAPI%E3%81%AF%CE%B2%E7%89%88%E3%83%A6%E3%83%BC%E3%82%B6%E3%82%92%E5%8B%9F%E9%9B%86%E3%81%97%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%21%21">SSSAPIはβ版ユーザを募集しています!!</a></h3> <p>β期間中はプレミアムプランの内容を無料で使えるのでお得！<br /> ぜひぜひ、この機会にお試しいただければ！</p> <p>わからないところやこんなのあったらいいなぁ〜などあれば、<br /> Twitterやお問い合わせなどからお気軽にご連絡ください〜</p> <p>GoogleスプレッドシートのAPI化サービス<br /> 『<a target="_blank" rel="nofollow noopener" href="https://sssapi.app">SSSAPI</a>』<br /> Twitter: <a target="_blank" rel="nofollow noopener" href="https://twitter.com/sssapi_app">@sssapi_app</a></p> <p><a target="_blank" rel="nofollow noopener" href="https://sssapi.app">https://sssapi.app</a></p> <p>開発の励みや記事を書くモチベにもなるので、<br /> いいねやシェア、はてブなどしてもらえるとかなりよろこびます!!</p> きらぷか@積読ハウマッチ/SSSAPIなど