ヘッドレスCMSの選定と、どのように使っているか ヘッドレスCMSの選定 ここまで触れてきたとおり本ブログはJamstackなWEBサイトを目指しています。その中でいわゆるガワ、つまりフロントについては③フロント編で触れたとおりです。 Jamstack、というかWEBサイト全てに言えることですが、ガワが出来上がっただけではWEBサイトは完成しません。もちろんWEBサイトを公開する意味というのはその中身にあります。 そんな中身を管理するためのものがいわゆる「CMS(Contents Management System)」です。 かつて(今も？)一世を風靡したWordPressなどは、CMSを内包しながらガワまで全て纏めて管理出来る、ということで大人気となりましたが、最近のモダンなWEBサイトではフロントとCMSを分離する傾向にあるかと思います。 そのように分離された結果特にガワを保有しないC

Mastodon のサーバをVPSにシングルユーザモードで構築したので手順をメモ。 基本的には公式のガイド（下記）に従って進めた。 作業は M1 MacBookAir 上で実施した。Docker は使用していない。 基本情報 サーバ KAGOYA CLOUD VPS 2コア/2GB/25GB もう少しスペックが低くてもよさそうだが、サーバ上でいろいろ他の作業もするかもしれなかったので余裕を持たせた。 ドメイン さくらのドメインで契約中のドメインに、本サーバ用のサブドメインをぶらさげている。 本記事では sub.example.com とする。 OS Ubuntu 20.04 (公式のおすすめに従った) メディアファイル保存先 (S3) 画像等のメディアファイルは AWS S3 に保存したかったのであらかじめ S3 にバケットを作っておいた。設定等は以下の通りだが、試行錯誤しながらのためこれ

Result 👆 こういうやつをCSSだけで実装する、みたいなやつです。セピア込みVer.もありました。 動画の上にかぶせればJS不要で古い映像みたいな演出が出来ますね。 css:root { --trsn: all 0.5s ease 0s; --black: #000; } *, *:before, *:after { position: absolute; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--black); perspective: 100vmin; } .content { width: 100vw; h

jQueryでできることは、Ajax使用時の外部ファイルの読み込み・スライドショーの作成・レスポンシブデザイン対応・SNSシェアボタンの設定など

JavaScript/jQueryを使っていますが「コードを学習」することではなく 「 応用力 」「 創り上げる力 」 を学べるようにしてるのがポイントです。 自己紹介 ジーズアカデミー学校長（デジタルハリウッドでも教鞭をとる）山崎と申します。 ジーズアカデミーは開校6年目のデジタルハリウッドが運営する「起業家エンジニア養成スクール（卒業生が6年で69社起業し総資金調達額80億5,620万円と卒業生が頑張っている学校）」です。 今回、私の授業（初級者向け）で応用力を鍛えるためのサポート動画でYoutube配信したものをまとめました。 全国のプログラミング初学者・初級者の皆さんの底上げになればと思い公開させていただきます。必ず「基礎を学んだあと」に、以下動画をやり切っていただければ理解が深まります。 応用実践トレーニングの内容 内容は「基礎を学んだ」レベルに合わせています。 JavaScri

公式チュートリアルでNext.jsに入門してみた (1) 〜アプリ新規作成、ページ遷移、スタイリング編〜 こんにちは、CX事業本部 IoT事業部の若槻です。 今回は、現在注目されているフロントエンドフレームワークNext.jsへの入門のために、次の公式チュートリアルを数回のシリーズに分けてこなしていき、基本的な機能に触れていこうと思います。 Create a Next.js App | Learn Next.js Next.jsとは Next.jsは、オープンソースで提供されるReactベースのフロントエンドフレームワークです。 Next.js by Vercel - The React Framework こちらによるとNext.jsの特徴は次のようなものがあり、プロダクション環境で必要とされるあらゆる機能と、最高の開発者エクスペリエンスを提供できるように設計されています。 An int

本書は、Lydia Hallie 氏 と Addy Osmani 氏らによる Learning Patterns (https://www.patterns.dev/) の日本語訳です。原著は大きく 3 つのセクションに分かれていますが、本書は、その最初のセクションである Design Patterns を訳したものとなります。

Javascriptを学習しているとき、なんらかのチュートリアルを行なっている時、プロトタイピングを行なっているときなど、 書いたコードの動きや値をちょっと確認したいときがあります。 そういった場合に非常に有用なQuokka.jsというのを教えてもらったので試してみました。 主な特徴は、 JavaScriptとTypeScriptを瞬時にフィードバックしながら実行します。ランタイムの値が更新され、入力中のコードの横にエディタに表示されます といったことです。 始めるのに設定などは必要なく、エディタでQuokkaファイルを開きコードを書いていくだけです。 VSCode, JetBrains IDE, Atom, SublimeTextといったエディタの拡張機能が提供されています。 install VSCodeにインストールしてみました。 拡張機能の画面を開いて,quokkaと検索製て一番上に

動画レシピ チャンネル登録、高評価していただけると嬉しいです 8分の動画です www.youtube.com TikTokにも投稿しています 材料(2人分) 豚こま切れ肉 200g 卵 2個 豆腐 350g 塩 2つまみ 人参 1/2本(100g) 干し椎茸 10g(4枚) 干し椎茸の戻し汁 大2 酒 大1 醤油 大1 白胡麻 大1 細ねぎ 1本 胡麻油 大1 【レシピ1/4量の栄養素】 ☑︎エネルギー 426.94kcal ☑︎脂質 41.42g ☑︎炭水化物 5.94g ☑︎食物繊維 3.02g ☑︎タンパク質 10.14g 文部科学省 科学技術・学術審議会資源調査分科会報告書「日本食品標準成分表2020年版(八訂)」から引用 材料アレンジ 牛蒡や蓮根を加えても さやインゲンなど緑の野菜を加えても彩り綺麗です。 English recipe(serve 2) 200g Chopped

フォームの実装で面倒なのがフォーム要素とテキストを揃える、特にチェックボックス・ラジオボタンとテキストをベースラインに揃えることです。 flexboxでalign-item: baseline;を使用すると、チェックボックス・ラジオボタンとテキストを揃えるのは簡単に実装できます。複数行のテキストにも対応します。 <div class="flex-demo --start checkbox-input"> <label for="demo"><b>flex-start</b> 複数行の長いテキストでも大丈夫</label> <input type="checkbox" id="demo"> </div> <div class="flex-demo --center checkbox-input"> <label for="demo2"><b>center</b> 複数行の長いテキストでも大丈

でゅら @rahandu アプリケーション全般でそうなんだけど、モニターの解像度がでかくなるにつれて、デザインは余白を作りたがるのなんなんだろう 広くなった意味がないし古いデバイスで作業しづらいし良いことないと思う twitter.com/ichirowo/statu… Lacnor @Lacnor_JP ボタンを、形はそのままで、グラデーションと枠を無くして、コントラスト強めな単色で構成してくれれば、使い勝手そのままでナウくなると思いましたまる twitter.com/ichirowo/statu…

ViteでPreactのTypescript環境を構築するNo bundleツールのViteを使って、TypescriptベースのPreactの環境を構築します。ESLintやPrettierの設定もあわせて行います。 はじめにVite は Vue.js の作者の Evan You 氏が開発しているビルドツールです。 ネイティブの ES Module のインポートを利用し、バンドル不要で高速に動作する開発環境を提供します。 Vue3 はもちろん、React や Preact も対応しています。 今回はそんな Vite を使って、Preact プロジェクトの環境構築をします。 できあがったテンプレートはこちらにあります。 やることpreact/cli の default テンプレートに近づけることを目標に、最低限開発に必要なツールを導入していきます。 ツールを個別に導入できるよう、それぞれ順

Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +

最新の省略テクニック、コツ、秘訣で、JavaScriptコードを最適化する。 開発者の生活というのは常に新しいことを学ぶことで、その変化についていくことは決して難しいことではありません。私は、フロントエンド開発者として知っておく必要のある省略形や機能など、JavaScriptのすべてのベストプラクティスを紹介して、2021年の生活をより快適にしたいと考えています。 JavaScript開発に長く携わっている人でも、コードを追加しなくても問題解決できるような最新機能を知らないこともあるかもしれません。ここで紹介するものは、クリーンで最適化されたJavaScriptのコード記述にも、2021年のJavaScriptの面接準備にも役立ちます。 これは新しいシリーズで、2021年版のJavaScriptコーディングチートシートです。 1. 複数の条件を持つif 配列に複数の値を格納し、includ

GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースを紹介します。 当ブログでもよく紹介しますが、見逃していたものがありました。 1年間分、52個もあるので、時間のあるときにチェックしてみてください。 The 52 most popular projects from the last year of Trending Projects by Iain Freestone 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私を注目をあつめたプロジェクトをキュレーションしており、人気があるWeb開発プロジェクト10個を紹介するニュースレターを毎週、配信しています。この記事では、ここ1年間に配信した各ニュースレターから最も多くクリックされたプロジェクトをリストアップしました。 ニュ

最低限の手間で、簡易的に開発にも使えるVim環境の構築を目指します。 最近取り組んでいるシンプルに環境を作るシリーズの一環です。 #1 WSL2向けUbuntu20.04の初期設定 #2 文化的なfish環境を得る為の最短ルート WSL2上のUbuntu20.04で作業しています。 目標 やること 1. Vim8のインストール／更新 2. プラグインマネージャ（vim-plug）のインストール 3. LSP1を用いた各種プログラム言語の補完機能 4. ステータスラインをドレスアップ 5. Linter2の導入（Python/Go/Dockerを例として） やらないこと ・Vimから離れられなくなるあれやこれや Vim8のインストール／更新 Ubuntu20.04にはデフォルトでvim8.1が入っていますが、LSP機能を提供するプラグイン（coc）を利用する場合にvimは8.2以上の方が良い

はじめまして、株式会社カミナシのエンジニア @tomiです。 カミナシは、2020年10月にサービスサイトをフルリニューアルしました。 kaminashi.jp 今回のサイトリニューアルでは、どのような構成で作ったのか、また技術選定で考慮した点をお伝えします。 Jamstackな静的サイト構成 Gatsby.jsとWordpressを使いJAMstack構成で作成しました。 最終的に以下の画像のような構成になりました。 利用した技術を並べると、 Gatsby.js Typescript StyledComponents GraphQL EsLint + Prettier Wordpress + Gutenberg Netlify 導入事例やセミナー情報など、動的な情報は記事としてWordpressに登録し、Gatsby.js側で記事をGraphQL経由で取得して表示しています。 静的なファ

概要 CX事業本部の佐藤です。 Gatsby.js という React ベースの静的サイトジェネレータがあります。 それを AWS Amplify でデプロイして爆速でブログサイトをデプロイできましたので、手順を記事にしたいと思います。 Gatsby.js とは https://www.gatsbyjs.org/ React のフレームワークの一種で、静的サイトジェネレータです。静的サイトジェネレータとは、 ブログの記事やWebページなどをあらかじめビルド時に生成しておき、デプロイ後はそれを表示するだけにすることで、 Webサイトが高速に動作するようにした技術です。 Gatsby.js を使うことで、Wordpress などの CMS や Markdown ファイル、DB などからデータを取得して、 それを事前にビルドしてWebページに変換してデプロイすることが可能です。 Gatsby.j

GitHubが2019年11月、新機能「GitHub Actions」を正式に公開した。GitHub上のリポジトリやイシューに対するさまざまな操作をトリガーとしてあらかじめ定義しておいた処理を実行できる機能で、今まで外部サービスとの連携が必要だった自動テストや自動ビルドなどがGitHubだけで実現できるようになる。今回はこのGitHub Actionsについて、機能の概要や基本的な使い方などを紹介する。 GitHubだけでCI/CD的な機能を実現できる「GitHub Actions」 昨今では、ソフトウェア開発におけるさまざまな工程を自動化するような技術の開発や普及が進んでいる。その1つに、CI（Continuous Integration、継続的インテグレーション）やCD（Continuous Delivery、継続的デリバリー）と呼ばれるものがある。CIはソフトウェアのビルドやテストを