PublishPressのプラグインで記事を複数のシリーズに追加させる

PublishPress Seriesの無料バージョンでは、1つの記事に1つのシリーズしか追加できません。しかし、WordPressのプラグインのソースコードは編集可能です。今回は、このプラグインを編集して 1つの記事を複数のシリーズに追加できるようにカスタマイズ する方法をご紹介します。 カスタマイズの背景 デフォルトのPublishPress Seriesでは、記事をシリーズに紐づける際に単一選択しかできません。そのため、例えば「初心者向けJavaScript」と「フロントエンド開発」という2つのシリーズに同じ記事を含めたい場合には対応できません。 今回のカスタマイズでは、コードを編集して 複数選択が可能なチェックボックス形式 に変更します。 コード編集手順 WordPress管理画面 から プラグインファイル「orgSeries-admin.php」を選択します。 下記のコードを編集・追加します。 動作確認 カスタマイズの注意点 並び順の変更: デフォルトでは、シリーズ内の記事はID順に並びます。独自の並び順を設定したい場合は、カスタムフィールドやプラグインを活用してさらに調整することができます。 バックアップ: ファイルを編集する前に、必ずプラグインのバックアップを取ってください。 終わりに このように、少しのコード編集で無料版のPublishPress Seriesをカスタマイズし、記事を複数のシリーズに対応させることが可能です。他のカスタマイズにも挑戦して、自分のサイトに最適な機能を追加していきましょう!

サーバー上でGitHubリポジトリからファイルを自動更新する方法

GitHubリポジトリから最新のコードを取得し、自動的にデプロイを実行する仕組みを作成する方法を解説します。この手順を使用すると、手動での操作を最小限に抑え、効率的にサーバーを管理できます。 必要な条件 自動更新の仕組み 以下の流れで設定を行います: スクリプトを作成 自動更新を行うスクリプトを作成します。 スクリプトファイルを作成: サーバー上で以下のコマンドを実行し、スクリプトファイルを作成します。 下記のkaihatsublogはSvelteアプリがデプロイされているディレクトリでGitHubのリポがクローンされている状態です。 スクリプト内容を記載: 以下の内容をスクリプトに記載します。 もし、メモリの小さい共有のサーバーを使用している場合は下記の様に更新できます。 ※ main の部分は、GitHubのブランチ名に合わせて変更してください。 ※ pm2 restart の引数は、PM2に登録されたアプリ名に合わせてください。 スクリプトに実行権限を付与: スクリプトを実行して動作を確認します: それぞれ記載したコマンドの結果がかえってきます。 修正手順 1. package.json の修正 Svelteアプリが外部アクセス可能でない場合、start スクリプトに –host オプションを追加します: 以下のように修正します: 保存後、PM2プロセスを再起動します: 下記のkaihatsublogはpm2インスタンスの名称です。 保存して閉じます。 2. PM2 プロセスの再起動 必要に応じてPM2 でアプリを再起動します。 3. 動作確認 バックエンドが応答するか確認: ブラウザで確認: トラブルシューティング PM2 プロセスが起動しない場合 PM2 ログを確認します: Nginx経由の接続に問題がある場合 Nginxの設定ファイルを確認し、proxy_pass が適切なポートに設定されていることを確認します: Nginx 設定を再読み込み:

Let’s EncryptでSSLを設定する

前回の記事では、SvelteアプリをNginxでデプロイしドメインからアクセスできるようにしました。今回は、Let’s Encryptを使ったSSL証明書の設定とそのトラブルシューティング方法を解説します。 まず、SSHを使ってサーバーにログインします。 Certbotをインストール CertbotはLet’s EncryptからSSL証明書を取得し、自動更新を管理するツールです。 以下のコマンドでインストールします: SSL証明書を取得 成功時の出力例: これで、HTTPSが有効になります。 Certbotの自動更新を確認 Let’s Encryptの証明書は90日間有効です。Certbotは証明書の自動更新をサポートしています。 Certbotのステータス確認 以下のコマンドでCertbotのタイマー(certbot.timer)が有効か確認します。 有効時の出力例: Certbotの有効化 もし有効でない場合、以下のコマンドを実行してCertbotを有効化します: 自動更新のテスト 証明書の自動更新が動作するかをシミュレーションします。 以下のコマンドを実行: このコマンドでエラーがなければ、自動更新が正しく設定されています。 Nginxの自動再読み込みスクリプト 自動更新後にNginxを再読み込みするスクリプトを用意することで、更新された証明書を自動的に適用できます。以下のスクリプトを作成しておけば、更新のたびに手動で再読み込みする必要がなくなります。 スクリプトファイル作成: 以下のコマンドでスクリプトを作成します: スクリプト内容: 実行権限の付与: 動作確認: 証明書更新をシミュレートしてスクリプトの動作を確認: トラブルシュート Let’s Encryptの認証エラー 以下のようなエラーが表示された場合、問題の原因を特定します。 エラー例: 原因と対策 DNS設定が正しくない dig コマンドを使用して、ドメインが正しいIPアドレス(IPv4とIPv6の両方)を指していることを確認します。 必要に応じて、ドメイン管理サービスでDNS設定を修正します。 Nginxの設定が不適切 ファイアウォールやセキュリティ設定 ポート80(HTTP)と443(HTTPS)が許可されているか確認します。 DNS設定の確認方法 以下のコマンドで、ドメインが正しいIPアドレスを指しているか確認します: IPv4アドレス確認 IPv6アドレス確認 まとめ これで、ドメインにHTTPSを適用し、安全な通信が実現できますね。

NamecheapのドメインをLinodeサーバーにマッピングする

この記事では、Namecheapで購入したドメイン(例: asameshicode.com)をLinodeサーバーのIPアドレスにマッピングし、Nginxで設定した後、HTTPSを有効化する方法を解説します。 Namecheapでドメインを設定する ドメインのDNSをLinodeに設定 設定を保存します。 LinodeのDNSマネージャーでドメインを設定 Linodeのアカウントにログイン。 “Domains” ページに移動し、新しいドメインを作成: 保存(Create Domain) をクリック。 補足既存のLinodeインスタンスを選択すると、Aレコードやwwwサブドメインが自動的に設定されます。 サーバー側の設定 (Ubuntu + Nginx) サーバーに接続 まずはSSHクライアントを使い、Linodeサーバーに接続します。 Nginxの仮想ホストを設定 ドメインを使用するようにNginxの設定を更新します。 Nginxの設定ファイルを開く: 以下の内容を記載または更新します: ファイルを保存(Ctrl + O)し、閉じます(Ctrl + X)。 仮想ホストを有効化: 以下のコマンドで設定を有効化します(リンクを作成): Nginxの設定をテスト: Nginxを再起動: 設定を反映するためにNginxを再起動します: 動作確認 これでドメイン(asameshicode.com)などをブラウザに入力するとWebアプリが表示されます。 では次回、httpのサイトでは通信が暗号化されていないのでLet’s EncryptでSSL証明書を取得する方法を紹介します。

SvelteKitアプリをLinodeサーバーにデプロイする方法(SSR対応)

Ubuntu環境でSvelteKitアプリをServer-Side Rendering (SSR) 対応でLinodeサーバーにデプロイする手順を解説します。Node.jsやNginxを活用して、安全でスケーラブルな環境を簡単に構築する方法を学べます。 SvelteKitのNode.jsアダプタを設定 Node.jsアダプタのインストール SvelteKitをNode.js環境で動作させるために、@sveltejs/adapter-node をインストールします。 以下、アダプタの説明になります。 @sveltejs/adapter-node は、Node.js サーバー環境での使用を目的として設計されています。以下のような特徴があります: PM2との相性の良さ PM2 を使用することで、以下の利点があります: adapter-node は、Node.jsサーバーとして動作するため、PM2とシームレスに連携できます。一方、adapter-auto では、他のアダプター(例: adapter-static)が選択される場合があり、PM2のようなプロセス管理ツールとの併用が困難になる可能性があります。 ではアダプタをインストールします。 ではこれさくっとを理解したところでsvelte.config.jsを更新します。 Linodeサーバーのセットアップ 作成後、インスタンスのIPアドレスとrootパスワードをメモします。プロビジョニングが終わると下記の黄色のアイコンが緑色になり、Runningに更新されることからセットアップが完了したことがわかります。ここでSSHアクセスのためにIPアドレスの部分をメモっておきます。 SSHでサーバーにアクセス 初回接続時には、次のようなプロンプトが表示されます: yes と入力して進めます。その後、サーバーのパスワードを入力します。 サーバーのアップデート ユーザーの権限を設定 セキュリティのため、アプリケーションディレクトリをroot以外のユーザーで操作するのが推奨されます。 ユーザーを作成する場合新しいユーザーを作成します。 作成したディレクトリの所有権を変更します。 アクセスを確認するため、appuserでログインまたは切り替えます。 ファイアウォールの設定を確認 ファイアウォールでポート 3000 を開放します。 ファイアウォールルールを確認 UFWを有効化 UFWを有効にするには以下のコマンドを実行します: 必要なポートを許可 サーバーで必要なポートを許可します。 HTTP (80番ポート) と HTTPS (443番ポート) を許可: ポート 3000 を開放 SSHアクセス(22番ポート)を許可: SSHでサーバーを管理する場合、必ずSSHポートを許可しておきます。 最終確認 Node.jsのインストール … Read more

Vite を使った Svelte プロジェクトのセットアップ

1. はじめに フロントエンド開発で注目されている「Svelte」。そのSvelteを使ったプロジェクトの開発効率をさらに高めてくれるツールが「Vite(ヴィート)」です。 この記事では、Viteを使ったSvelteプロジェクトのセットアップ手順を詳しく解説します。また、「なぜViteを使うのか?」その利点についても初心者にもわかりやすく説明します。Viteの利便性を体感しながら、モダンな開発環境を一緒に構築していきましょう! 2. なぜViteを使うのか? Viteは、次世代のフロントエンドビルドツールです。その名前はフランス語で「速い」を意味し、その名の通り、高速な開発体験を提供します。 Viteを選ぶ利点 Viteを使えば、「速さ」「シンプルさ」「柔軟性」を兼ね備えた開発環境を手に入れることができます! 3. Viteを使ったSvelteプロジェクトのセットアップ手順 それでは、Viteを使ってSvelteプロジェクトをセットアップしていきましょう。以下の手順に従うだけで、数分で環境が整います。 ステップ1: Node.jsをインストールする まずは、Node.jsがインストールされていることを確認しましょう。 ステップ2: ViteのSvelteテンプレートを作成 1.ターミナルを開き、プロジェクトを作成したいフォルダへ移動します。 2.以下のコマンドを入力して、ViteのSvelteテンプレートを作成します: 3.プロジェクトフォルダに移動: ステップ3: 必要な依存パッケージをインストール 1.以下のコマンドを実行して依存関係をインストールします: 2.インストールが完了したら、開発サーバーを起動します: 4. プロジェクトのファイル構成 Viteで作成したSvelteプロジェクトのファイル構成は以下のようになっています: 5. Viteのカスタマイズ カスタム設定例: 開発ポートの変更 デフォルトでは開発サーバーはポート5173で動作しますが、これを変更したい場合は、vite.config.jsに以下を追加します: Tailwind CSSの導入 モダンなスタイリングを手軽に行いたい場合は、Tailwind CSSを追加するのがおすすめです。以下の手順で設定できます: 1.Tailwind CSSをインストール: 2.tailwind.config.cjs を編集し、Svelteのファイルをスキャン対象に追加します: 3.src/app.css に以下を追加: 4.main.jsにCSSをインポート: これでTailwind CSSが使えるようになります! 6. まとめ Viteを使ったSvelteプロジェクトのセットアップは驚くほど簡単で、高速な開発体験を提供してくれます。特に、HMR(ホットモジュールリプレースメント)やシンプルな設定は、モダンな開発環境を求める開発者に最適です。 次のステップとして、以下を試してみましょう: ViteとSvelteで、快適な開発ライフをスタートさせてください!

PublishPress SeriesプラグインでカスタムREST APIエンドポイントを作成する方法

この記事では、WordPressのPublishPress Seriesプラグインを利用してカスタムREST APIエンドポイントを作成し、シリーズのデータやその関連投稿を取得する方法を解説します。この方法を使用すれば、シリーズ機能を他のアプリケーションやカスタムテーマに簡単に統合できます。 注意:プラグインをアップデートすると編集したコードが上書きされるのでChild themeを使用することをお勧めします。 このカスタムAPIでできること 実装手順 作業に入る前に必ずファイルのバックアップをとっておくようにしましょう。 WordPressのアドミンページにログインして、Apperance → Theme File Editor → functions.php ファイルを選択します。 カスタムREST APIエンドポイントの登録 /publishpress/v1/series/ エンドポイントで呼び出される関数です。この関数は、シリーズごとの投稿データを返します。 全シリーズと関連投稿を取得するコールバック関数 /publishpress/v1/series/ エンドポイントで呼び出される関数です。この関数は、シリーズごとの投稿データを返します。 スラッグで特定のシリーズを取得 /publishpress/v1/series/{slug} エンドポイントで特定のシリーズデータを取得する関数です。 上記のすべてのコードを一つにまとめました。

Node.jsのインストール方法

1. はじめに ウェブ開発の世界に足を踏み入れるなら、まずはNode.jsをインストールしましょう!Node.jsはJavaScriptをサーバーサイドで実行するためのランタイムで、モダンなWebアプリケーションの開発には欠かせないツールです。 この記事では、初心者でも迷わず進められるよう、Node.jsのインストール手順を詳しく解説します。さらに、インストール後に試せる「Hello, Node!」チュートリアルも用意しました。これを読めば、環境構築への不安がワクワクに変わります! 2. なぜNode.jsをインストールするの? Node.jsを使うと、以下のようなことが可能になります: Node.jsをインストールすることで、未来のあなたの開発体験がスタートします! 3. Node.jsのインストール手順 ステップ1: Node.js公式サイトにアクセス まず、Node.js公式サイトにアクセスしましょう。以下の2つのバージョンが表示されます: 初心者はLTS版を選びましょう。 ステップ2: インストーラーのダウンロード ステップ3: インストールウィザードの実行 インストーラーを起動すると、ウィザードが表示されます。以下の手順に従って進めてください: ステップ4: インストール確認 インストールが完了したら、Node.jsとnpmが正しくインストールされたか確認しましょう。 これで、Node.jsとnpmのインストールは完了です! 4. 最初のプロジェクト「Hello, Node!」 インストールが完了したら、さっそくNode.jsを使ってみましょう。 ステップ1: プロジェクトフォルダを作成 好きな場所に「hello-node」というフォルダを作成し、そこに移動します: ステップ2: JavaScriptファイルを作成 新しいファイルを作成し、名前をapp.jsにします。 ステップ3: コードを書く 以下のコードをapp.jsに記述します: ステップ4: 実行する ターミナルで以下のコマンドを実行: ターミナルに「Hello, Node!」と表示されたら成功です! 5. よくある質問(FAQ) Q: 「nodeコマンドが見つかりません」と表示される A: Node.jsがインストールされていることを確認し、環境変数が正しく設定されているかチェックしてください。インストールを再実行することで解決する場合があります。 Q: npmでパッケージをインストールできません A: npm installでエラーが出る場合は、ネットワークの問題や権限の問題であることが多いです。管理者権限で再試行してみましょう。 6. まとめ … Read more

Svbelte入門:チュートリアルのゴールと対象読者

概要 この記事では、Svelteの基本を学びながら、最終的にシンプルで使いやすいウェブアプリを構築することを目指します。Svelteはモダンなフロントエンドフレームワークであり、他のフレームワークとは一線を画した、ユニークで効率的なアプローチを提供します。このガイドでは、初めてSvelteに触れる方でもステップバイステップで進められる内容をお届けします。 1. チュートリアルのゴールと対象読者 ゴール 対象読者 2. 必要な知識 このチュートリアルを始める前に、以下の基本的な知識があるとスムーズに進められます。 技術的な前提知識 環境の準備 心構え 3. Svelteとは?(導入編) Svelteの特徴 なぜSvelteを選ぶのか? まとめ このブログでは、Svelteの基本を学びつつ、実際のアプリケーション構築に挑戦します。以下のステップで進めていきます。 次回の記事では、「Svelteプロジェクトのセットアップと初めてのコンポーネント作成」を実際に手を動かしながら学びます。ぜひ一緒にSvelteの世界に飛び込んでみましょう!

Svelte の特徴と他のフレームワークとの違い

Svelte の特徴と他のフレームワークとの違い はじめに Svelte は、JavaScript を用いたフロントエンド開発で注目されている次世代フレームワークです。従来の React や Vue.js などのフレームワークと比較して、ユニークなアプローチを採用しており、特に軽量性とパフォーマンスに優れています。本記事では、Svelte の特徴を深掘りし、他のフレームワークとの違いを詳しく解説します。 Svelte の主な特徴 1. コンパイラベースのアプローチ Svelte の最大の特徴は、ランタイムに依存せず、コンパイル時にコードを純粋な JavaScript に変換することです。これにより、他のフレームワークが必要とするランタイムオーバーヘッドを排除し、軽量で高速なアプリケーションを実現します。 2. 直感的なリアクティブシステム Svelte では、状態が変化すると自動的に UI を更新する宣言的なリアクティブシステムが採用されています。特に $: を用いたリアクティブステートメントが特徴的で、簡潔な記述で状態管理が可能です。 3. 統合されたファイル構造 Svelte の .svelte ファイルでは、HTML、CSS、JavaScript が統合されており、構造が非常にシンプルです。これにより、学習コストが低く、直感的な開発が可能です。 4. 軽量で高速 Svelte はコンパイル済みコードのみをブラウザに送信するため、バンドルサイズが小さく、実行速度が非常に速いです。これにより、モバイルデバイスや低スペック環境でもスムーズに動作します。 5. 柔軟な状態管理 ローカルな状態管理はもちろん、Svelte の store を用いることでグローバルな状態管理も簡単に実現できます。 他のフレームワークとの違い 1. React との違い 2. Vue.js との違い 3. Angular との違い Svelte … Read more