ソフトウェア on Parker Chang's Web

私がどのようにWordPressサイトを構築したか

Sun, 13 Apr 2025 00:00:00 +0000

昨年、仕事でいくつかの大規模な WordPress サイトを扱いました。そこで学んだ WordPress 構築戦略を記録し、共有します。

このサイトも後で WordPress に変更する予定です。変更後、なぜ、そしてどのように変更したかをまた共有します。

WordPress.com vs WordPress.org #

まずは公式の 2 種類のプランについて触れます。エンジニアとして、私はずっと WordPress.org しか知りませんでした。少し前に友人から聞かれて初めて WordPress.com の存在を知りました。

WordPress.com は Automattic 社が提供する全方位型のホスティングサービスで、Web ページ上でクリックするだけでサイトを作成できます。しかし、その分自由度は極めて低く、テーマのカスタマイズは難しく、多くのプラグインが使えず、無料版は非常に機能が制限されているため、事実上課金が必要です。

WordPress.org はオープンソースの WordPress ソフトウェアをダウンロードできます。自分のニーズに合わせてデプロイでき、ほぼ制限はありません——プラグインのインストール、テーマの修正、または様々な魔法のようなカスタマイズが自由に行えます。ただし、サーバーの管理、更新、バックアップは自分で行う必要があります。

とはいえ、WordPress.org にも市場にはプロセスを簡素化する多くの統合ソリューションがあり、必ずしもエンジニアに依頼する必要はありません。また、WordPress.com を使っている人も、制限が多すぎて安くないため、遅かれ早かれ乗り換えることになるだろうという予感がします。

この記事でも WordPress.org を使用します。多少の技術知識が必要ですが、できるだけプロセスを明確に説明します。

WordPress.org 市場のホスティングプラン #

ここで紹介するものは使用したことはありませんが、価格といくつかの予備的な観察を分析してみます。

1. 従来のレンタルサーバー（例：BlueHost） #

基本料金は月額 2.95 ドル（約 460 円）で、すぐにサイトを立ち上げることができ、その中で直接ドメインを購入することもできます。

個人サイト

Sun, 03 Mar 2024 00:00:00 +0000

Hugo で静的サイトを作る

Sat, 02 Mar 2024 00:00:00 +0000

JavaScriptにおけるeval、リスク、そして代替案について

Sat, 30 Sep 2023 00:00:00 +0000

はじめに #

最近、Google Sheets が提供する App Script を使って友人のために小さなクローラーを書き、ウェブ上の情報を自動的に移動・整理しようとしました。その際、HTML ソース内の<script />の情報が直接読み取れないことに気づきました。ChatGPT に聞いたところ、突然evalを使用した実装を提示されました。以前は使ってはいけないということしか知らなかったので、今回はどのような時に使われる可能性があるのか、なぜ使ってはいけないのか、そしてどのような代替案があるのかについて真剣に理解することにしました。

この記事では、evalを簡単に紹介した後、一つの使用事例と一つの面接問題を取り上げます。

`eval` 基本紹介 #

eval(script); は JavaScript の組み込み関数です。

渡された script 文字列（String）を JavaScript の式（Expression）または文（Statement）として実行することができます。

戻り値 (Return value) #

パラメータが String の場合、JS の実際の実行結果を返します。その String が実行可能な JS コードでない場合は、Error: {script} is not definedを返します。

CallbackからAsync/Awaitへ：順次フェードインアニメーションを例に

Mon, 21 Aug 2023 00:00:00 +0000

まえがき #

この記事は、Callback Hell、Promise、Async/Await という言葉は聞いたことがあるけれど、実務で触れたことがない、あるいはその進化の過程がよくわからないという方向けに書かれています。「クリック後に要素を一つずつフェードインさせる」機能を実装しながら、これら 3 つの方法でどのように実装するかをステップバイステップで見ていきます。

機能の MVP（実用最小限の製品）は以下のようになります：

直感的な考え方：

フェードインは要素に transition を設定し、クリック時に opacity を変更すればいい。
一つずつフェードイン？ということは、後ろの要素のフェードインは前の要素のフェードイン完了を「待つ」必要がある？
JS で「待つ」といえば setTimeout が第一候補。一つずつ待つなら、一つの setTimeout が終わったら、別の setTimeout を呼べばいい。

そこで、以下のようなコードを書きました：

const startBtn = document.getElementById('startBtn');
const container = document.getElementById('container');
const first = document.getElementById('first');
const second = document.getElementById('second');
const third = document.getElementById('third');
const forth = document.getElementById('forth');
const fifth = document.getElementById('fifth');
const resetBtn = document.getElementById('reset');

startBtn.addEventListener('click', function () {
  this.style.display = 'none';
  container.classList.remove('hidden');
  setTimeout(() => {
    first.classList.remove('hidden');
    setTimeout(() => {
      second.classList.remove('hidden');
      setTimeout(() => {
        third.classList.remove('hidden');
        setTimeout(() => {
          forth.classList.remove('hidden');
          setTimeout(() => {
            fifth.classList.remove('hidden');
            setTimeout(() => {
              resetBtn.classList.remove('hidden');
            }, 500);
          }, 500);
        }, 500);
      }, 500);
    }, 500);
  }, 500);
});

書き終わりました。各要素は 0.5 秒ごとに順次フェードインします。これで完了…ですか？

Googleサードパーティログインの実装（Vue / Express）

Sun, 23 Oct 2022 00:00:00 +0000

はじめに #

最近、会社でサードパーティログインを連携する必要がありました。初めてのことだったので、かなりの落とし穴にはまりました。また、Google がまた改訂したようで、ネットで見つけた多くの記事はすでに使えなくなっていたため、連携のプロセスを共有し記録することにしました。

基本的に、Google Sign-in JavaScript library を使って連携している場合、Google はすでに非推奨（deprecated）にしており、2023/03/31 には完全に廃止され、ダウンロードや使用ができなくなる予定です。ですので、以前にこのプロセスに従って実装した方は、急いでリファクタリングしてください！

（新しい Sign In With Google ボタンを使用するほか、新しい Google One Tap 機能もあります）

私は Google 純正のライブラリのみを使用しており、他人がラップしたものは使用していないため、React の場合でも構文を少し変えれば使用できます！

現在、Google ログインの連携はますます簡単になっています。他人がラップしたライブラリを使用して結合度を高めることはお勧めしません。私の会社でも最近、以前使用していたライブラリがメンテナンスされなくなったため、再実装することになったからです。

概要 #

連携プロセスは 4 つのステップに分かれます：

Google Cloud で OAuth Consent Screen と Credentials を設定する
フロントエンド：初期化＆ Google Button の表示
フロントエンド：ユーザーが同意を押した後、Google Credential をバックエンドに POST し、返ってきた Authorization Token を持って正常にログインし、User Data を取得します！
バックエンド：POST の Route で Google Credential を受け取った後、Google Auth Library で検証し、Google User Data を取得します。これらの User Data を DB に保存するか、対応する Authorization Token と User Data をフロントエンドに返します。

このステップを読んだだけではまだ疑問があると思いますので、以下で手取り足取り実装していきます！

Webフォントについて語る — デザイン、ファイル形式、そしてフロントエンドの読み込み

Thu, 28 Oct 2021 00:00:00 +0000

以前、設事未深のフォント大補帖（フォント集）が配布され、フォント受け取りブームが起きました。スライド、ポスター、SNS 投稿以外に、Web ページでどのようにフォントが使われているか考えたことはありますか？

photo by David Klein on Unsplash

以前、設事未深のフォント大補帖がブームを巻き起こしました。スライド、ポスター、SNS 投稿以外に、Web ページでどのようにフォントが使われているか考えたことはありますか？

そこで今日は、Web ページでのフォント使用に関する知識と技術的な詳細を共有します。前半は一般的な知識で、後半は Web ページでのフォント使用に関する技術的な話が多くなります。フロントエンドエンジニアでない方は、適宜読み飛ばしてください！

この記事を通じて、以下のことをお伝えします 👇

フォントの誕生（非専門家版）
フォントファイルの種類
Web ページでのフォント使用方法

フォントデザインのプロセス #

紹介に入る前に、フォントがどのようにデザインされるのか非常に気になったので、デザイナーの友人にフォントデザインについていくつか質問しました。ここでプロセスの概要を簡単に紹介します。

繁体字中国語の場合、まずいくつかの決まった文字を作ります。これらの文字を作れば、漢字の画数の法則を大体カバーできます。例えば「永」はすべての異なる画数を含んでおり、「鷹」は横棒が多い場合のテストになるなどです。

https://www.easyatm.com.tw/wiki/%E6%B0%B8%E5%AD%97%E5%85%AB%E6%B3%95

次に、Glyphs や FontForge などのソフトウェアを使用して詳細を調整します。ほとんどの漢字を作り終えたら、並べて一貫性を確認し、最後は一気に残りの漢字を作り上げます。

Web ページの繁体字中国語は何文字デザインする必要があるのか？ #

漢字の総量については、教育部の異体字字典に 10 万字以上収録されていますが、Google Font が提供するNoto Sans TCファイルを見ると、Web ページで読み込む必要がある文字数は約 1 万 5 千字程度です。

Design System — フロントエンドエンジニアも知っておくべきこと

Wed, 22 Sep 2021 00:00:00 +0000

Design System について話す前に、一つの概念に触れておきたいと思います。「事前計画 > 実装」。

ソフトウェアエンジニアの本質は実は建築家に非常に近く、彼らが家を建てるのに対し、私たちはシステムを構築します。

良い家には優れた建築設計が必要であり、設計図の計画、建物全体の構造の理解、事前の計画設計に多くの時間を費やします。

この概念はウェブページにおける Design System に相当します！

Design System の前身 — Atomic Design #

Design System について話す前に、Atomic Design という概念について話す必要があります。

結局のところ、ウェブページアーキテクチャ設計全体の先駆者は、2013 年に Atomic Design を提唱し、最初の口火を切った Brad Frost だと言えるでしょう。

その後、Google が 2014 年に Material Design を作成し、2016 年に Airbnb がより完全な Design System を提唱しました。詳細は Karri Saarinen, Principle Designer at Airbnb の講演を参照してください。

では、Atomic Design とは何でしょうか？ #

まずこの画像を見てみましょう：

フロントエンドフレームワーク第0課：フレームワークを学ぶ前に知っておくべきこと

Sun, 11 Jul 2021 00:00:00 +0000

フロントエンドフレームワークの選択は、多くの初心者（私を含む）にとって常に大きな疑問でした。私は当初、会社が React を使用していたため、React を書くしかありませんでした。最近、縁あって Angular に触れる機会があり、それがきっかけで「フロントエンドフレームワーク」について、「フレームワーク」とは一体何を指すのか？何が「フレームワーク」と呼ばれるのか？なぜフロントエンドでそれを使用する必要があるのか？使用しないとどうなるのか？Vue3 がすごいと聞いたが、学ぶべきか？などの問題について、より深く考えるようになりました。

そしてこの記事は、上記の問題のいくつかを解決するための私の思考であり、フレームワークを学び始める前に知っておくべき基本的な概念だとも考えています。

Web の歴史について簡単に #

技術の発展は日進月歩ですが、技術の本質は「問題解決」にあります。

1990 年代：Web の誕生

1990 年 12 月 20 日、ティム・バーナーズ＝リーは最初のウェブサイトを書き、World Wide Web を設計しました。
この時期は静的なウェブページが主で、せいぜい動的なメニューや画像効果がある程度でした。

2000 年代：Web 2.0 ＋ Ajax

2004 年の Web 2.0 の誕生により、ウェブページの対話性が向上し始めました。Facebook (2004) や Youtube (2005) はこの時期に登場しました。
Ajax の非同期リクエストの応用により、ウェブページはブラウザではなく JS を介してリクエストを送信できるようになったため、データを更新するためにリロードする必要がなくなりました。

2010 年代：Web アプリケーション（Web Application）概念の出現

この時期から、Web の複雑さと対話性は大幅に向上し、当初はデスクトップアプリケーション（Desktop Application）でしかできなかったことができるようになってきました。

Angular 1.0 (2010)
React (2013)
Vue (2014)

（より詳細な進化の歴史に興味がある場合は、下部に参考リンクを添付します）

ソフトウェア on Parker Chang's Web

私がどのようにWordPressサイトを構築したか

WordPress.com vs WordPress.org #

WordPress.org 市場のホスティングプラン #

1. 従来のレンタルサーバー（例：BlueHost） #

個人サイト

Hugo で静的サイトを作る

JavaScriptにおけるeval、リスク、そして代替案について

はじめに #

eval 基本紹介 #

戻り値 (Return value) #

CallbackからAsync/Awaitへ：順次フェードインアニメーションを例に

まえがき #

Googleサードパーティログインの実装（Vue / Express）

はじめに #

概要 #

Webフォントについて語る — デザイン、ファイル形式、そしてフロントエンドの読み込み

フォントデザインのプロセス #

Web ページの繁体字中国語は何文字デザインする必要があるのか？ #

Design System — フロントエンドエンジニアも知っておくべきこと

Design System の前身 — Atomic Design #

では、Atomic Design とは何でしょうか？ #

フロントエンドフレームワーク第0課：フレームワークを学ぶ前に知っておくべきこと

Web の歴史について簡単に #

`eval` 基本紹介 #