このブログに使っている技術的なものをサラッと紹介

このブログに使った技術的なものを紹介していきます

またデザインや仕様が変わるかと思いますが、しばらくはこのままでちょろちょろアップデートしていくかと思います

使っているモノ

主にこんな感じです

• Gatsby.js
• Netlify
• WordPress REST API
• IFTTT
• Pixi.js
• Tweenmax

Gatsby.jsとWordPress REST APIについて

Gatsby.jsは今年勉強始めたReact.jsベースの静的サイトジェネレーター(SSG)で、個人的にめっちゃ好きですw

もともとこのブログはContentfulというCMSでコンテンツの管理をしていました

＊こっちに残してあります→https://tarokenlog-gatsby-contentful.netlify.com/

ただ、「無料枠で制限がある」「管理画面の動きがちょっと遅い？」「もっと楽にclassつけて投稿したい」「WordPress REST APIも触っておきたい」という理由でリニューアルしました

リニューアルというか０から作り直した感じですねw

前のサイトに比べるとだいぶリッチになっているかと思います^ ^

このブログを作るにあたってWordPress REST APIとGatsbyとの組み合わせを学んだので、投稿の仕方に慣れているWordPressのまま、フロントはGatsbyでBlazing Fastなサイトが作れるようになりました
(まだ学ぶことは多いですが。。。w)

WordPressでの投稿は僕自身も慣れていますし、AddQuickTagも使えてよく使うタグにスタイリングを準備しているので、色んなスタイリングがワンクリックで使えるようになりました

WordPressにはプラグインをほとんど入れる必要がなく、投稿も簡単なので今のところ便利だなと感じてます

自動でデプロイされるように「JAMstack Deployments」というプラグインを入れてNetlifyでWebhookを設定しています

なので記事が更新されると自動で静的サイトが生成されて記事が反映されます

このブログは「記事」と「プロフィール」と「写真ギャラリー」が更新があると自動でデプロイされるようにしています

固定ページやACFの投稿も引っ張ってこれるのでとても便利ですね^ ^

プロフィールの写真と文章もWordPress側から編集できるようにしてます

写真ギャラリーについて

写真ギャラリーはインスタグラムの投稿を引っ張ってこれるようにしています
(gatsbyがそういうプラグインを準備してくれているので、ドキュメント通りに設定しただけです)

また、僕がインスタグラムに写真を投稿するとビルドされるようにIFTTTとNetlifyでWebhookの設定していますw

IFTTTを使うのも初めてでかなり便利だなと感じましたが、インスタの投稿した後「Activity」に反映されるのに数十分かかるのが微妙だなって感じです

まぁ更新してすぐに反映されないといけないような緊急ニュースみたいなコンテンツはないので全然大丈夫ですが、ちょっとビルドまでの遅さが気になります

Pixi.jsについて

Pixi.jsは最近勉強を始めてかなりハマっていますw

写真や動画を使ったWeb上の表現の幅も広がると思うので、canvas、Pixi.js、(将来的には)Three.js等をどんどん勉強して、僕らFumpにしか作れないようなサイトやサービスを作れるようになりたいなと思っています

というのも最近「結構誰でも少し勉強すればある程度のサイトは作れるな〜」と感じていて、何か差別化できるものを持っておいたほうがいいなと感じているので、写真や動画の制作もWebの技術のインプットもどんどんしていきます

この辺の思いは別記事で詳しく書こうと思います

無料のサイドビルダーもたくさんありますし、海外大物YouTuberがこぞって宣伝しています(特にSquareSpaceとWIX)

普通のWebサイト制作だけだと今後キツくなるのかなぁ〜と思うので、焦りを感じつつ時間を作って色々作っていますw

その中でもサイト・サービスの目的を達成するためのデザイン力も必要不可欠になってくるので、色んなサイトを見て手を動かして勉強しています

Tweenmaxについて

これはアニメーションをかけたいところにはほとんど使っています

色んなeasingがありますし、staggerとかtimelineもあるのでとても便利です

様々な表現ができるので、最近のサイト制作にはほぼ必ず導入しています

なめらかなアニメーションを結構簡単に実現できるので愛しています

このサイトのこだわり

このサイトのこだわりを軽く紹介していきまする

トップページ

Pixi.jsで写真を切り替えさせています

ただのスライドは誰でも作れると思うので、フェードインだけでなく、Pixi.jsが用意してくれている「Old Film」のフィルターをスライド時にかけています
(Fumpでも背景にOld Filmを使用してあります)

写真とOld Filmのフィルターの相性良きです
「モノクロっぽくなりながらフィルム感が出る→次の写真はフィルム感がなくなりながら色が映えてくる」の繰り返しです

また、タップするとタップした場所から波紋が広がります
これもPixi.jsのShockWaveというフィルターを使用しています

波紋が広がると同時にスライド画像が切り替わります
Old Filmも発動します

個人的にかなり気に入っていますが、まだまだいろんな表現ができると思うので勉強しています

名前に使っているフォントはAdobe Fontの「flegrei」を使用しています

下層の手書きのフォントは「shelby」です

スマホ時の固定ナビメニュー

つけるかどうか迷いましたが、他のページに簡単に行けるようにSP時にナビメニューをつけています

アイコンは簡単にですがXDで自分で作りました(変えたい部分があるので作り直します。。。)

現在いるページにclassが振られるようにして、色が変わるようにしています

ダークモード対応

とりあえずcss variableを使って導入しています

真っ黒だと目が疲れるので優し目の色(Twitterの色っぽいの)を使用しています

ダークモード時の写真が明るくなりすぎないようにopacityを少し変えています

切り替えボタンは頻繁に押すボタンではないので、SP時はヘッダーに配置しています

写真を魅せるデザイン

写真が好きで写真をどうしても載せたいと思っていたので、トップにドン！と載せてギャラリーページに一覧を載せました

もともとブログのリニューアルのつもりだったので、記事一覧や記事ページも細かいとこまでできたかと思います

あと、自分で投稿しやすいようにWordPress側でもAddquicktagとかもしっかり設定しています

クリック追跡パンくず

通常のサイトと違ってユーザーの動きに応じてパンくずが生成されます

SEO的にどうなの？とは思いますが、面白いので実験的に入れてみましたw
(Gatsbyが用意してくれていますが、使い方わかりにくいので注意)

この辺は改良していく予定です

まとめ：「I love Gatsby.js!!」

色々書いてきましたが、作っていて「Gatsby最高だな〜」と感じました

プラグインをバンバン入れておけば良いってわけではないですが、色々便利なのが用意されているし、ドキュメントも見やすいし、コミュニティもいい感じです

ただの静的サイトジェネレーターではなく、フレームワークみたいな感じでいろんな機能やプラグインがついています。

まだ触り始めなので書き方は完璧じゃないですし無駄なものもあるかと思いますが、その辺は今後最適化していこうかと思います

てことでつまりGatsbyはいいぞぉ〜ってことでしたw

では〜