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

こんにちは。LIGでフロントエンドエンジニアをしているレンツと申します。 （「最近、ニックネームを持つ社員が少なくて浮いてきたかなあ」と思いながら日々働いております）。 エンジニアとして働きはじめて2年ほど経ちましたが、普段はWordPressを使用したサイト制作・または保守運用を行っています。そして、今回は「microCMS」というCMSを使用したサイトを制作したのですが、なにぶん初めての経験でよくわからないことがたくさんあったので、制作過程で感じたことをつらつらと綴りたいと思います。 microCMSの良いところ microCMSはAPIベースの日本製のヘッドレスCMSです と紹介されているのをちらほら見ます。よくわかりませんが日本製のサービスということで何かと安心感がありますよね！ ここからはmicroCMSについて解説しつつ、メリットをいくつか紹介したいと思います。 これが早速よく

気遣いとは、うまくいくように、または失敗しないように気をつかうことを意味し、例文としては「接待の気遣いに疲れる」「お気遣いいただきありがとうございます」「気遣いができない人だ」などというように使われます（※編集部調べ）。 また、類語である心遣いは相手のためを思っていろいろと気をつかうことや配慮、お礼のお金やお礼状などの意味もあり、気配りは手落ちや失敗のないようにあれこれ気をつけることなどの意味があります（※編集部調べ）。 いずれも、生まれ持ったものではなく社会人として生きていく上で身につけていく人間力のひとつで、年相応に身につけておきたいもの。年齢を重ねれば重ねるほどできて当たり前とされ、気遣いができないことがマイナスになっていきます。 そこで今回は、仕事を含めた人と人とのコミュニケーションに活用できる、愛される気遣いテクニックを紹介します。

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

React+Firestore 9でWebアプリを作成する！基本的なCRUD処理の実装。 投稿日:2022.07.23 最終更新日:2022.08.17  React実践サンプルコード, チュートリアル, 初心者向け この記事では、Firestoreを使ったデータベースの設定や典型的なCRUD処理の実装方法をReactを例にして紹介したい。 いまやWeb・モバイルの開発者にとって定番となったFirebase。バックエンドシステムを一から開発しなくともアプリを実装できる気軽さゆえに使用する機会は増えている。 この機会にその概要と使い方を確認しておくといいだろう。 なお、Firestoreはバージョン9よりCRUD処理の実装方法に変更があった。この記事では、最新バージョンである9に合わせた新しい実装方法を紹介する。 Firestoreとは？Firebaseはユーザ認証やプッシュ通知といったWe

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

はじめに 今回の記事では、PythonのWebフレームワーク「FastAPI」の特徴・課題点を簡潔に解説する。本記事の読者は主に以下のようなものを対象とする。 FastAPIを知らない人 FastAPIを実務で活用したい人 技術選定でFastAPIを選ぶ理由を検討している人 PythonでWebアプリケーションを開発したい人 すでにDjangoやLaravelなどの他のフレームワークに着手していて、別のフレームワークに関する情報を収集している人 FastAPIとは FastAPIとは、Djangoと同様にPythonのWebフレームワークである。主にWeb APIを開発するために利用される。 FastAPIの特徴 FastAPIの特徴は以下の通り。 Node.jsやGo言語に匹敵する高速なアプリケーションを開発できる。Pythonフレームワークの中では最も高速。 少ないコード量で実装できる

いまや国内外を問わず知名度でも人気度でも高い地位を築くクラウドサービスといえば、アマゾン社が提供する、AWS(Amazon Web Services)でしょう。 AWSを採用する企業が増加する中、クラウド関連知識をはじめ、幅広い分野のAWS各種サービスに対する知識や技術力の必要に迫られ、どうにかして効率よく学びたい！と思われている方も多いのではないでしょうか。 そんな方々におススメしたいのは、AWSが提供する認定資格の入門レベル「AWS認定クラウドプラクティショナー」です。 資格取得によって、クラウドの概念からAWSの主要サービスに至るまでの基礎知識や活用方法が身につくことでAWS初学者にもぴったり！ 本記事では、エンジニアのみならずAWSに関わる全ての人向けに「AWSクラウドプラクティショナー」を取得する方法を解説していきます。 1. AWS認定クラウドプラクティショナーとは? ◆ 人気

早とちりや事実誤認といった「思考のエラー」は、誰にでも起こりうる。だからこそ、「情報をいかに正しく認識し、答えを出せるか」で差がつく。そのためには「遅く考える」ことが必要だ――そう説く一冊が、哲学者の植原亮氏による新刊『遅考術――じっくりトコトン考え抜くための「10のレッスン」』だ。20万部突破のベストセラー『独学大全』著者・読書猿氏も「結論に急き立てられる我々が『考える』ことを取り戻すために」と推薦している本書。何事につけても「速さ」がもてはやされる世の中で、いまこそ「遅い思考」が求められる理由とは？ 植原氏の大ファンを公言する読書猿氏をゲストに迎え、「遅考」の核心を語り合ってもらった。今回のテーマは「思考を改善するための習慣」について。 ●　「思考の習慣改善」をサポートしてくれる1冊 ――読書猿さんは、植原先生の『遅考術』をどのように読まれましたか？ 読書猿：まずは、対話形式でとても読

今はプログラミングができないけれども、ゆくゆくはできるようになりたい。そう思っている人は多いだろう。そうした人が知りたいのは「独学でプログラミングができるようになるのか」ということではないだろうか。 こうしたことを考えているのは、「独学コンピューターサイエンティスト Pythonで学ぶアルゴリズムとデータ構造」（日経BP発行）という書籍を読み始めたからだ。著者のコーリー・アルソフ氏は、大学の政治学科を卒業し、独学でプログラミングを学んで職業プログラマーになったという。前著の「独学プログラマー Python言語の基本から仕事のやり方まで」（日経BP発行）は、そうした経験を通して同氏が得たプログラミングの知識をまとめたもの。そうした知識の中から、特にアルゴリズムやデータ構造といったコンピューターサイエンスに焦点を当てて解説したのが本書だ。 もっとも同氏がいう「独学」は、大学でコンピューターサイ

スマート農業グローバルGAP取得と300ほ場の管理。侍米（サムライス）で勝負する新潟の生産法人せせらぎの取組み

今や動画は身近な表現ツールの1つ。撮るだけでなく、見せて楽しみたい。だが「編集の仕方がわからない」「スマホやパソコンで再生できない」といった悩みも尽きない。そこで便利な無料アプリを活用しよう。 初心者がまず頼りたいのは「Clipchamp」。利用にはインターネット接続とMicrosoftアカウントが必要だが、十分な機能を備えながらも複雑すぎず使いやすい（図1、図2）。スマホでの動画編集は「CapCut」が便利。時間軸に沿って素材を並べるタイムライン方式を採用し、操作で迷うこともない（図3、図4）。 図1 オーストラリア発の動画編集ツール。マイクロソフトが買収し“MS公式”のアプリになった。ウェブサービス版と、11／10用のストアアプリ版がある。「メディアを追加」から動画などの素材を追加し（1）、右下のタイムラインに並べていく（2）。左側の「音楽とサウンドエフェクト」や「テキスト」などのタブ

インターネット経由でソフトウエアなどを使うクラウドサービス（きょうのことば）の普及が日本で遅れている。IT（情報技術）投資に占める比率は2021年に4%と北米の3分の1にとどまり、25年には差がさらに広がる見通しだ。独自仕様で作る旧来システム志向が根強いためだ。クラウドの強みの低コストや最新技術を生かせず、日本のデジタルトランスフォーメーション（DX）が進まない要因になっている。クラウドで主流

↓動画でも解説しています。 Headless CMSとは？ 近年、目にする機会が増えた「Headless CMS」という単語。この記事では、Headless CMS、関連技術、人気のサービスなど、導入に向けた基礎知識をご紹介していきます。導入のためのイメージ作りになれば幸いです。 キーワード1：CMS（Content Manegement System） CMS（Content Manegement System）は、コンテンツ、ファイル、ワークフロー、リポジトリなどの情報を管理・公開するシステム。身近なところでは、WEBメディアの記事、企業サイトの各ページ、ECサイトの商品情報などの管理・公開など幅広く使われています。 画像などのファイルや、投稿の変更履歴、権限の管理など、様々な機能を技術者でなくても利用できるのが特徴です。 CMSを代表するのがWordpress。 2003年にリリース

♣︎. はじめに コンソール画面で操作するブラックジャックゲームを、PHPで作りました。その個人開発の過程を記事にします。 操作した時のコンソール画面はこんな感じです。 （テキストだとこんな感じです） root@9444efa94780:/var/www/html# php Main.php ブラックジャックの設定をします。 プレイヤーの人数を入力してください。（1〜3） 🙋‍ 1 プレイヤー1名でゲームを開始します。 あなたの持っているチップは100ドルです。 ベットする額を入力してください。（1〜1000ドル） 💲 10 10ドルをベットしました。 ブラックジャックを開始します。 あなたの引いたカードはハートの6です。 あなたの引いたカードはスペードのQです。 ディーラーの引いたカードはスペードの10です。 ディーラーの引いた2枚目のカードはわかりません。 あなたの現在の得点は16

最近は新品でも安価に入手できるデバイスが増えてきた。こうしたデバイスに最新のLinuxを入れると、小型パソコンとして利用できるようになる。それぞれのデバイスの特徴に合わせた用途に使えるようLinux化する方法を紹介する。 手のひらサイズのPCをLinux化して、リビングのテレビにつないで動画配信サービスを楽しめるようにします。操作にはリモコンを使います。 Part1では、中国のPCメーカーであるCHUWI（ツーウェイ）社が発売した超小型PC「CHUWI LarkBox Pro」（以下、LarkBox Pro）をLinux化します。販売価格は通販サイト「Amazon.co.jp」で2万2800円（2022年7月14日時点）、割引クーポンを使えば2万円以下と格安に購入できます。特徴は、6.1×6.1×4.3cmと手のひらに収まるほどコンパクトなサイズです。 Linux化するデバイス 超小型PC

ページ内でスムーススクロールをする際は今まではJavaScriptを使って実装をすることが多かったですが、最新のモダンブラウザではCSSだけで簡単に実装することができます。 それに加えて、アンカーリンクでスクロールする際に固定ヘッダーがあったりするとスクロールを止める位置の調整がめんどうだったりしますが、それも最新のモダンブラウザでは簡単にCSSで操作することができます。 今回はCSSだけでスムーススクロールを実装する方法と、アンカーリンクのスクロール位置を調整する方法を備忘録メモとして紹介してみます。 CSSのみでスムーススクロールを実装するには「scroll-behavior」プロパティの「smooth」を使用します。 ページ全体にスムーススクロールを実装する場合はhtmlタグに対して「scroll-behavior」プロパティを指定します。 html { scroll-behavio