検索結果0件」

    【Web制作】WordPressより「ちょっと一歩」突き抜ける技術

    【Web制作】WordPressより「ちょっと一歩」突き抜ける技術

    こんにちは、シンヤです!

    今回は、【Web制作】WordPressより「ちょっと一歩」突き抜ける技術というテーマで、お話しいたします。


    Webアプリ作りができるようになる

    結論から言うと、Webアプリ作りができるようになるといいです😊

    ちなみにこのブログも、ちゃっかりWebアプリだったりします😅
    滑らかな遷移ができるのは、そのためです。

    WordPressは「Web制作」しかできないので、Webアプリ作りはできません。
    両者の具体的な違いは、主に以下のように区別できます。

    • Web制作:静的なもの
      • 基本的に見た目が変わらない
    • Webアプリ:動的なもの
      • 見た目がユーザーの状態によって、流動的に変わる

    わかりやすく言うと、

    • Web制作:ホームページづくり
    • Webアプリ:プロダクトづくり

    さらに噛み砕いていうと、

    • Web制作:複雑な処理や動作はない
    • Webアプリ:複雑な処理や動作がある

    例えばWebアプリは、

    • ログイン前の画面
    • ログイン後の画面
    • ログイン後このボタンを押した場合の画面
    • 特定のパラメーターがある場合の画面
    • スマホアプリからログインした場合の画面
    • メール通知やPush通知

    などなど、考慮しなければいけない流動的な要素が、いくつも絡み合いながらデザインを作っていきます。
    これが、「Webプロダクト」と呼ばれるものなのです。

    Web制作は基本的には、このような「流動的に見た目が変わる要素」というものがありません(ログイン前後の画面ぐらい)。


    時代が求めているのは「Webアプリ」

    皆さんは「VUCAの時代」という言葉を聞いたことがありますでしょうか?
    「今の世の中は不確実性が高いので、将来の予想は誰にもできない」ということを表しています。
    ちなみに意味は、

    • Volatility(変動性)
    • Uncertainty(不確実性)
    • Complexity(複雑性)
    • Ambiguity(曖昧性)

    の頭文字を表した造語になります。

    あらゆるものがテクノロジーに置き換わり、STUDIOのような優れたWebプロダクトを使えば、誰でも無料でWeb制作ができます。
    そのような時代には、今までの「作って終わり」のWeb制作に存在価値はありません😱

    つまり、Web制作しかできないWordPressに、もはや存在価値自体ありません。

    ちなみにWordPress側もこの時代の変化は熟知していて、WP REST APIというAPIを公開しています。
    これを使えば、WordPressとWebアプリを連携させ、WordPressの管理画面を使いながらWebアプリでブログを作ることができます😊


    Webアプリ作りの土台を作る

    ではここからは、Webアプリ作りの土台を作っていくための方法を解説していきます。

    なお以下の方法は、Macでの環境構築方法になります。
    プログラミングはMacを使うことが多いので、高いお金を払ってもパソコンはMacを買うことをおすすめいたします😅

    具体的には、以下の要素に分解して解説していきます。

    1. Homebrewのインストール
    2. Node.jsのインストール
    3. フレームワークのインストール
    4. Webアプリ作りを開始する

    1. Homebrewのインストール

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

    次に以下のコマンドを入力して、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)

    2. Node.jsのインストール

    以下のコマンドを入力して、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」のコードを追加する。

    以下の様な画像になっていればOKです。

    コードを追加したら、

    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

    3. フレームワークのインストール

    フレームワークとは、「Webアプリ作りをかんたんにするために作られた、道具集」のようなものだと思ってください。
    ゼロからWebアプリ作りをするのは大変なので、全てのWebアプリは何かしらのフレームワークを使っています😊

    今回はこのブログでも使われている、「GatsbyJS」のフレームワークをインストールしていきます。
    以下のコマンドを入力して、GatsbyJSをインストールします。

    $ npm install -g gatsby-cli

    4. プロジェクトを作成する

    以下のコマンドを入力して、GatsbyJSのプロジェクトを作成します。

    $ gatsby new gatsby-project

    gatsby-projectの部分は、好きな名前に変更してください。

    ローカルサーバーを立ち上げる

    ターミナルから以下のコマンドを入力して、作成したフォルダに移動します。

    $ cd gatsby-project

    移動後、以下のコマンドをターミナルで入力してください。
    入力後http://localhost:8000にアクセスして、下記の画面が表示されたら、正常にローカルサーバーが立ち上がっています😊

    $ npm run dev


    最後に

    より詳しくWebアプリ作りを学びたい方は、僕が解説いたしましたGatsbyJSに関する記事をご参照ください。

    【月単価90万+αのエンジニアへの道】GatsbyJSを使って、簡単にイケてるブログを作る

    Web制作は遅かれ早かれ、衰退して滅び去っていく産業です。
    なぜなら、先ほども申し上げた通り、

    • 無料でWeb制作ができるプロダクトがあるから
    • 現代は不確実性が高い時代だから
    • あらゆる変化に対応できる「Webアプリ」が求められているから

    ちなみに、僕はどちらかというとWebプロダクトを使ってサイトを作るより、

    Webプロダクトそのものを作っているPdM兼デザイナー

    なのですが、Web制作の経験しかないデザイナーより、単価は1.8~2.3倍ほど高いです。
    (煽りに聞こえてしまったら申し訳ありません。事実なので、情報の権威性を持たせるためにあえていいました😅)

    ではでは、またね〜🤗

    • 【Web制作】WordPressより「ちょっと一歩」突き抜ける技術

    広告