検索結果0件」

    【ちょっと専門的な話】このブログで使われている技術をご紹介いたします!

    2020/04/18
    【ちょっと専門的な話】このブログで使われている技術をご紹介いたします!

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

    今回は、「このブログで使われている技術をご紹介いたします!」というテーマで、お話しいたします。


    使われている技術は以下の通り

    このブログで使われている技術は、以下になります。

    • Gatsby
    • PostCSS
    • Google Analytics
    • Google Search Console
    • Google Optimize
    • Netlify
    • Netlify CMS

    それぞれ詳しく解説していきます。


    Gatsby

    Gatsbyとは、「JavaScriptを使ってアプリっぽいブログが作れるツール」です。

    このブログ、結構ぬるぬる動くと思いませんか?

    それは、GatsbyがJavaScriptを使って、スマホアプリみたいにページを切り替えているからです。

    JavaScriptを使って、アプリっぽい動きができるWebサイトのことを、「Webアプリ」と言います。


    PostCSS

    PostCSSとは、「JavaScriptを使って、書いたCSSを書き出すことができるツール」です。

    CSSはそのまま書くと書きづらいので、SassやPostCSSみたいに、CSSを書きやすくするためのツール(AltCSSと言います)を使って、書くことが多いです。

    PostCSSは、欲しい機能を自分で探して、自分で使いやすい「CSS書き出しツール」を作っていけるツールです。

    書いたソースコードを別の言葉に書き換えてくれるものを、「プリプロセッサー」。

    ソースコードを書き換える行為を、「コンパイル」と言います。

    つまり、PostCSSは、「書いたソースコードをCSSにコンパイルしてくれる、プリプロセッサー」ということになります。


    Google Analytics

    Google Analyticsとは、「Webサイトを分析できる、Googleが無料で提供しているツール」です。

    聞いたことある人も多いと思います。

    Webサイトの訪問者を見たり、どこのページを見ているか見たり、特別な処理(アクション)を仕込めば、どのボタンがどれぐらい押されたのかも見ることができます。


    Google Search Console

    Google Search Consoleは、「ブログを見に来た人が、どんな検索キーワードでたどり着いたのかを見ることができるツール」です。

    検索キーワードはGoogle Analyticsでは確認できないので、Search Consoleも一緒に使っていきます。

    ただし、Google Analyticsより数字が正確ではないなどの、欠点もあります。


    Google Optimize

    Google Optimizeとは、「Googleが提供している、A/Bテストをすることができるようになるツール」です。

    A/Bテストとは、2つの違うデザインのうち、どちらが良い結果を出したか検証するものです。

    場合によっては、3パターンや4パターン同時にテストすることもあります。


    Netlify

    Netlifyとは、「設定するだけで、作ったWebアプリを簡単に公開してくれる、Webサービス」です。

    Webアプリは作ったら、サーバーを借りて設定をしないと、インターネットに公開することができません。

    さらにWebアプリの場合、サーバーに設置した後に、公開するためのコマンドを入力しないと、Webアプリを動かすことができません。

    Netlifyは、Webアプリを公開するために必要なサーバーを、無料で貸してくれて、なおかつコマンドを入力してインターネットに公開することまで、設定するだけで全部自動的にやってくれる、Webサービスです。


    Netlify CMS

    Netlify CMSとは、「Netlifyが無料で提供している、WebアプリにCMSを組み込むことができるWebサービス」です。

    GatsbyはWordPressとは違い、CMS機能がありません。

    しかし、Netlify CMSやその他CMSのみを提供しているWebサービスがあるので、それらと連携することで、CMS機能を実装することができます。


    最後に

    以上が、このブログで使われている技術です。

    今回はさわり程度のご紹介でしたが、後々詳しく解説していこうと思います😀

    • 【ちょっと専門的な話】このブログで使われている技術をご紹介いたします!

    広告