2019-06-06に更新

見つけたサービスを投稿する「LITFIRE」を公開しました!

6月1日に公開しました。ここ! → litfire.jp

LITFIREは、最新のサービスやアプリが見つかる場所を目指しています。

ログインなしでURLだけで簡単に投稿できるようになっています。自分のものである必要はありません、見つけたおすすめのサービスをぜひ投稿してください。または、探してみてください。

litfire.jp_(iPad Pro).png

目的

個人開発のものも含めて主に国内の最新のサービスが見つかる場所が欲しいと思い作りました。
いつか開発者向けの機能も追加するかもしれません。

機能

投稿

投稿されたURLからタイトルや説明、ヘッダー画像、ツイッターアイコンなどを取得してます。ログインしているユーザは編集することができます。また、投票機能も追加しました。

litfire.jp_(iPad Pro).png

ちなみにこれはツノッテというサービスなのですが、デザインがかわいいのでパクろうと思ってます。

タグから検索

タグからサービスを探すことができます。似たサービスを探すのに役に立ちます。いまは説明しか編集できませんが、色やアイコンなどを編集して探しやすくする予定です。

litfire.jp_(iPad Pro).png

テキストから検索

テキストから検索することができます。なんとなく関連するものが出てきます。

litfire.jp_search_q=掲示板(iPad Pro).png

PWA

なんとなくPWAに対応してます。ある程度は使いやすくなります。

litfire.jp_feeds(Galaxy S5).png

技術的な話

LITFIREは二匹で開発しています。開発期間は2日ほどです。それから、三週間ほど何人かのユーザにテストしてもらいました。コンテンツも200以上に増えました。特に、ツイッターでRTしてくれた人たちは感謝です。

興味がない内容だったらごめんなさい。

バックエンド

CMS、データベース、検索エンジンなど全てバックエンドのサービスを利用しています。とてもお金がかかります。

Google Cloud Platform: Firebase

これ!→ https://firebase.google.com/

FirebaseというBaaSを使用しています。開発に関する知識がなくとも簡単にアプリが作れるといったものです。

console.firebase.google.com_project_cxrvdiolrzkd_database_firestore_data_2Fproducts_2F0SQKv73ViAwPPMyCk4aP(iPad Pro) (2).png

Google Cloud Platform: Firebase Authentication

Firebase AuthenticationというサービスでGoogle認証などがポチポチして数行で実装できます。GoogleならTwitterのように申請したりAPIキーの取得なども必要ないです。5分あればWebページにログイン機能をつけることができます。

console.firebase.google.com__hl=ja(iPad Pro).png

Google Cloud Platform: Cloud Functions

これ!→ https://cloud.google.com/functions/

Cloud Functionsは、AWSやAzure、IBMにもあるGoogleのクラウド関数です。クラウド関数は、デプロイやランタイム、コンピュータのメモリ、スケールなど全てサービス側が管理してくれるものです。開発者はデプロイ環境を気にせずにコードを書くことだけに集中できます。

console.cloud.google.com___ga=2.100096156.-385001646.1559402387&hl=ja&pli=1(iPad Pro).png

Google Cloud Platform: Cloud Firestore

これ!→ https://cloud.google.com/firestore/

フルマネージドのNoSQLデータベースです。クラウド上のデータベースなのでデプロイの必要はありません。クライアントサイドからアクセスできるAPIサーバーを持っているため、読み取りの為のAPIサーバを開発する必要が無くなります。機能もCosmosDBやMongoDBに比べるとかなり少なく設計が難しいのでおすすめできません。

console.cloud.google.com___ga=2.100096156.-385001646.1559402387&hl=ja&pli=1(iPad Pro).png

Google Cloud Platform: Cloud Storage

これ!→ https://cloud.google.com/firestore/

クライアントサイドから簡単に画像のアップロードができます。画像アップロードの為のAPIサーバを開発する必要が無くなります。AppEngineやGoogleCloudPlatformのサービスから簡単にアクセスできるので使いやすいです。

console.cloud.google.com___ga=2.100096156.-385001646.1559402387&hl=ja&pli=1(iPad Pro).png

Google Cloud Platform: STACKDRIVER ERROR REPORTING

これ!→ https://cloud.google.com/error-reporting

Cloud Functionsで発生したエラーの統計データはここで確認します。GitHubと連携できて、sourcemapを使用すればリポジトリのファイルのどこがエラーしたのかを見ることができます。エラー発生時はメールやiOSアプリに通知することができます。

console.cloud.google.com___ga=2.100096156.-385001646.1559402387&hl=ja&pli=1(iPad Pro) (1).png

Google Cloud Platform: App Engine

これ!→ https://cloud.google.com/appengine/

自由度を求めるならk8sの方が良いですが、AppEngineにはAppEngine用のAPIがあるのが良いところです。
Go言語ランタイムの為にApp Engineを使用しています。画像の圧縮などをしています。ポチポチするだけで、5分あればデプロイできてしまいます。

console.cloud.google.com_storage_browser_cxrvdiolrzkd.appspot.com_project=cxrvdiolrzkd&hl=ja(iPad Pro).png

Netlify

これ!→ https://www.netlify.com/

ホスティング、自動デプロイ、DNSなど沢山の機能が詰まっています。ポチポチするだけで、5分程度でWebページが公開できてしまいます。特に、プリレンダリングのおかげでGoogleBotには適切なMetaタグを返すことができます。
今のところ、Firebase HostingはGitHubのPushをトリガーにして自動デプロイするといったことは1クリックでは出来ません。

app.netlify.com___ga=2.93987933.1723616547.1559401966-719776790.1559401966(iPad Pro).png

Prismic

これ!→ https://prismic.io/

最高のエディタを持つ最高のヘッドレスCMSです。簡単な記事の為にWordpressなんかのCMSをデプロイするのは時間がかかります。記事はGraphQLやライブラリ、REST APIといった様々な方法でWebページから簡単にアクセスできます。

まだページは存在しませんが、お知らせなどを管理しています。

cxrvdiolrzkd.prismic.io_documents_(iPad Pro).png

Algolia

これ!→ https://www.algolia.com/

Algoliaは高速で多機能の検索機能を提供するサービスです。Cloud Firestoreにはフルテキスト検索の機能がないのでこれで補う必要があります。ライブラリが充実しておりWebページを含む様々環境から簡単にアクセスできます。

www.algolia.com_account_details(iPad Pro).png

Google Domain

これ!→ https://domains.google

Google Cloud Platformとの統合があるかもしれないのでGoogleのサービスを使用しています。シンプルでとても使いやすいです。Route53は嫌いです。

domains.google.com_m_registrar_hl=en&_ga=2.107665029.685568839.1559402176-1024739654.1559402176&nfg(iPad Pro).png

プログラミング言語

好きな言語はDartやC++が好きです。でも十分なエコシステムが無いので使うことが出来ません。

TypeScript

これ!→ https://www.typescriptlang.org/

Microsoft社が開発するTypeScriptです。嫌いです。ブラウザとNode.js環境の2つの環境で使用します。型定義や補助関数や共有します。

Go

これ!→ https://golang.org/

Google社が開発するGo言語です。AppEngineのAPIの為に使用しています。

デザイン言語

Material Design

これ!→ https://material.io/design/

デザイン言語はGoogleのMaterial Designです。デザイン原則やフローチャート、コンポーネント設計などが定義されています。自分はデザイナーではないので車輪の再発明はしません。

フロントエンド

React

これ!→ https://reactjs.org/

Facebook社の開発するReactです。Qiitaの人間たちの魂が震える前から使ってたので慣れてます。APIが5個程度しかないので覚えることが少なく脳みそ空っぽにしてコードが書けます。

Material-UI

これ!→ https://material-ui.com/

最高のUIコンポーネントライブラリです。Material Designをベースにしていますが、柔軟性がありどのデザイン言語にも対応できます。アップデートも非常に多くよく壊れます。

material-ui.com_components_cards_(iPad Pro).png

開発会議

LITFIREを開発会議というサービスに投稿しました。詳細ページはこちら

devtalk.jp_products_137(iPad Pro).png

さいごに

知ってるサービスあれば投稿してくれると嬉しいです。


しぐれ煮

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント