検索結果0件」

    【無料見本有】マコなり社長のInsideStoriesの使用技術

    【無料見本有】マコなり社長のInsideStoriesの使用技術

    こんにちは、シンヤです!
    先日、以下のツイートをしました。

    Inside Storiesのクローンサイトを作ってみた
    デザインはあまり気に入らなかったので、自分で作って中身の開発環境だけ真似た😊

    こちらのツイートについて、深掘りして解説していこうと思います。


    マコなり社長とInside Storiesについて

    まず「マコなり社長」と「Inside Stories」を知らない人もいると思うので、以下に詳しく解説いたします。

    マコなり社長について

    マコなり社長とは、渋谷でプログラミングスクールであるTECH CAMPを運営されている、株式会社divの社長です。
    同時に、チャンネル登録者86万人を超えるYouTuberでもあります。
    要するに・・・

    • 急成長中のIT企業の社長
    • ビジネス系YouTuberのインフルエンサー

    という、かなり異色の経歴の持ち主です。
    僕もIT業界に生きる人間の一人として、尊敬と同時に目標にしている人物の一人でもあります😊

    マコなり社長は「文章術」に関する動画も出していて、この動画を見て僕はブログを書き始めました😀

    Inside Storiesについて

    Inside Storiesとは、マコなり社長が運営している個人サービスです。
    月額3,000円で、マコなり社長がYouTubeでは話せない深い内容のお話をしてくれます。
    例えるなら・・・

    1. マコなり社長の考えを配信する
    2. マコなり社長の一人ラジオ局

    といったような感じです😊


    Inside Storiesに使われている技術

    結論からいうと「Next.js」です。

    Next.jsとは?

    Next.jsとは、ReactというJavaScriptを発展させた技術を使い作られた、フレームワークです。
    フレームワークとは、かんたんに言ってしまうと「Webアプリを作るために用意された道具箱」です。

    つまりNext.jsとは、Reactを使って今すぐWebアプリを作るために用意された、道具箱の一つという感じです😊

    フレームワークにもいろいろある

    React制のフレームワークには、主に以下の2つがあります。

    Next.js Gatsby.js
    リリース当初からSSRをサポートしており、ページ毎のmetaタグを簡単に変えられたり、カスタマイズをすればブログを作ることも可能。 SPAでブログが作れることが特徴で、WordPressのようにプラグインによるカスタマイズや、テーマ機能でデザインを変えることも可能。

    このブログで使われているのは「Gatsby.js」で、InsideStoriesに使われている技術は「Next.js」です。
    両者とも大きな違いはなかったですが、Next.jsの方がheadタグを変えやすかったことですかね😀

    Gatsby.jsは元々データベースなしでReact制のブログが作れる「静的サイトジェネレーター」なので、ブログ作りに特化しています。

    ブログは「Gatsby.js」で、Webアプリは「Next.js」と使い分けが出来そうな印象を持ちました😊


    Inside Storiesで使われている技術をNext.jsで再現してみた

    正確には裏側の認証が何を使っているか分からなかったので、Next.jsを使いFirebaseというサービスで認証を導入しました。

    成果物はこちらになります。
    Repositoryもこちらで公開しております。

    技術構成

    フロントエンド
    フロントはNext.js制です。
    これは先ほど説明した通りです。
    バックエンド
    手軽に認証が導入できる「Firebase Authentication」を採用しました。

    Next.jsの環境構築

    以下の方法で、ご使用中のMacに環境を構築していきます。
    既に環境構築済みの方は、こちらの項目は飛ばして読んでください。
    少し難しいかもしれませんが、頑張ってついてきてください😅

    ターミナルを起動する

    まずは、ターミナルの起動を行います。
    Mac下部の「Launchpad」で、「terminal」と入力して出てきたアイコンを、クリックしてください。

    Homebrewのインストール

    以下のコマンドを入力して、Homebrewをインストールします。

    $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    インストール後、以下のコマンドを入力して、Homebrewのバージョンが表示されたら、成功しています😊

    $ brew -v
    #> Homebrew 1.2.3
    #> Homebrew/homebrew-core (git revision 7212; last commit 2017-07-02)

    Nodebrewのインストール

    以下のコマンドを入力して、Nodebrewをインストールします。

    $ brew install nodebrew

    インストール後、以下のコマンドを入力して、Nodebrewのバージョンが表示されたら、成功しています😊

    $ nodebrew -v
    #> nodebrew 1.0.0

    Nodebrewを使える様にする

    以下のコマンドをターミナル上で入力して、環境変数を追加します。

    $ vi ~/.bash_profile

    ターミナルの画面が変わったら、

    1. キーボードの「I」を押す
    2. 「export PATH=$HOME/.nodebrew/current/bin:$PATH」のコードを追加する。
    上記の画像のようになっていれば成功です。

    コードを追加したら、

    1. 「esc」キーを押す
    2. 「:wq」と入力する
    3. 「Enter」を押す

    以上で、コードの保存が終わり、エディターが閉じます😊

    Nodebrewのセットアップ

    以下のコマンドを入力して、先ほど作ったbash_profileを反映させます。

    $ source ~/.bash_profile

    次に以下のコマンドを入力して、Nodebrewをセットアップします。

    $ nodebrew setup

    Node.jsのインストール

    以下のコマンドを入力して、Node.jsをインストールします。

    $ nodebrew install-binary v12.13.1

    次に以下のコマンドを入力して、インストールしたNode.jsを使える様にします。

    $ nodebrew use v12.13.1

    インストール後、以下のコマンドを入力して、Node.jsのバージョンが表示されたら、成功しています😊

    $ node -v
    #> v12.13.1

    Next.jsのセットアップ

    以下のコマンドを入力して、Next.jsのプロジェクトを作ります。

    $ npx create-next-app
    ✔ What is your project named? … next-sample-project

    What is your project named?に好きな名前を入れます。
    これがディレクトリ名になります。

    上記では仮に「next-sample-project」を名付けました。

    上記の画像のようになっていれば成功です。

    次に以下のコマンドを入力して、作成した「next-sample-project」に移動します。

    $ cd next-sample-project

    以下のコマンドを入力して、ローカルでNext.jsを起動させます。

    $ yarn dev
    実行結果
    http://localhost:3000にアクセスして、上記の画面が表示されていれば成功です。

    Firebaseのセットアップ

    Firebaseのプロジェクト作成

    Step01
    Firebaseのコンソールにアクセスしていただき、上記の画像を参考にプロジェクトを作成します。
    Step02
    プロジェクト名を入力して【続行】をクリックします。
    Step03
    次の画面も【続行】をクリックします。
    Step04
    Analyticsのアカウントを選択して【プロジェクトを作成】をクリックします。

    しばらく待つとプロジェクト作成が完了します。
    【続行】をタップして次へ進みます。

    上記の画面が表示されたら成功です😊

    Firebaseにアプリを追加

    Step01
    上記の画像を参考に【ウェブ】をクリックします。
    Step02
    アプリ名を入力して【アプリを登録】をクリックします。
    Step03
    FirebaseのSDKが表示されるので【コンソールに進む】をクリックして完了です。

    Firebase SDKの確認

    Step01
    コンソールトップから【プロジェクトを設定】をクリックします。
    Step02
    下へスクロールして【構成】をクリックします。
    この設定は後ほど使うのでコピペします。

    認証を追加する

    ここから先は僕が作成したInside StoriesのRepositoryを使います。
    事前にcloneをお願いいたします。

    Step01
    cloneしたディレクトリに移動しtouch .envと入力して、.envファイルを作成します。
    Step02
    .envファイルにコピペしたFirebaseの設定を貼ります。

    以下コピペ用です。

    FIREBASE_API_KEY=xxxxxx
    FIREBASE_AUTH_DOMAIN=xxxxxx
    FIREBASE_DATABASE_URL=xxxxxx
    FIREBASE_PROJECT_ID=xxxxxx
    FIREBASE_STORAGE_BUCKET=xxxxxx
    FIREBASE_MESSEGING_SENDER_ID=xxxxxx
    FIREBASE_APP_ID=xxxxxx
    FIREBASE_MEASUREMENT_ID=xxxxxx
    Step03
    yarn installをしてパッケージをインストールして、yarn devとターミナルに打ち込みます。
    上記の画像にようにローカルでNext.jsが起動したら成功です😊

    認証の動作確認をする

    Step01
    【アカウント作成】をクリックして、メールアドレスとパスワードを入力します。
    画面が切り替わったら認証が成功しています。
    Step02
    Firebaseコンソールから【Authentication】をクリックします。
    Step03
    入力したメールアドレスが追加されていたら成功しています😊

    最後に

    僕自身がReactでブログを運営してるし、ポートフォリオサイトにも認証を導入しています。
    Next.jsは初めてでしたが、応用で簡単に認証が導入できました😊

    Basic認証のポートフォリオは情報が全く見れないから、まず落とされます。
    ご紹介したInsideStoriesのクローンサイトなら、簡単に無料で認証を導入できるので、お使いください😀

    最後に成果物をまとめて紹介します。

    デモサイト

    Repository

    ではでは、またね〜🤗

    • 【無料見本有】マコなり社長のInsideStoriesの使用技術