Web幹事「幹事AWARD 2025」にて優良企業として選出されました

株式会社フライング・ハイ・ワークスは、Web制作・動画制作・システム開発のマッチングプラットフォーム
「Web幹事」主催の『幹事AWARD 2025』 において、
システム開発部門 優良企業 に選出されました。

概要

「幹事AWARD」は、Web幹事・動画幹事・システム幹事に登録する
約14,600社（2025年9月時点） の中から、
「ご成約数」や「顧客満足度」などの独自指標に基づいて
優良企業を表彰する年次アワードです。

当社は、システム開発部門における顧客満足度の高さと、 一貫した開発・デザイン提案力の両立 が評価され、選出されました。

紹介コメントでは、
「デザインもシステムもできるホームページ制作会社として、
多様なWebサイト制作に携わり、成果につながる提案を続けてきた点」
が高く評価されています。

ハイライト

• システム開発部門 優良企業に選出（2025年度）
• 成果につながるWebサイト構築・提案力が評価
• 2000年創業以来の実績と信頼による表彰
• クライアントとの継続的な協業体制を重視

受賞コメント

このたびはアワードに選出いただき、心より御礼申し上げます。

今回の受賞は、クライアントの皆さまからのご信頼とご期待、そして共に挑戦を重ねてきたチームの努力をご評価いただいたものと考えております。

2000年の創業以来、フライング・ハイ・ワークスは「デザインもシステムもできるホームページ制作会社」として、多様なWebサイト制作に携わり、成果につながるご提案を続けてまいりました。

これからも「みんなの+α（アルファ）に」を胸に、価値あるWebサイトを追求してまいります。

関連ページ

• ホームページ制作サービス
• 制作実績一覧
• 会社情報

出典

幹事AWARD 2025 | Web幹事
（掲載元：ユーティル株式会社／公開日：2025年9月）

The post フライング・ハイ・ワークスが幹事AWARD 2025を受賞しました。 first appeared on FHWノート.

TCPDF＋FPDIは、LaravelでPDFを取り扱う際に使用されるライブラリです。

TCPDFでは、HTMLによる描画が可能となっていますが、この時に、レギュラー（標準）フォントとボールド（太字）フォントを同居させる際に非常に苦労しましたので、その設定方法について解説したいと思います。

TCPDFとFPDIとは？

FPDIとは、既存のPDFファイルを読み込んで加工したり、再出力するための拡張ライブラリで、下記のようなことができます。

• 既存のPDFをテンプレートとして読み込む
• テンプレートに透かしやスタンプなど文字や画像を重ねられる
• 複数のPDFを統合できる
• 特定のページだけを抜き出すことができる

また、TCPDFでは、FPDI単体でもある程度の書き込みはできますが、HTMLやCSSを利用することができたり、図形の描画や枠線、塗りなどより細かな描写が可能となります。TCPDFはFPDIと完全互換なため、この組み合わせはPDFを取り扱う上では、非常に便利なライブラリです。

一つ注意しなければならないのは、FPDIで取り込まれるPDFは、見た目をそのまま複製して取り込むため、PDFにフォーム（Acro Form）を実装している場合には、それらは複製されませんので、フォーム機能などを取り込みたい場合には、このライブラリはそもそも選択肢から外した方がよさそうです。

また、PDFの複製や印刷などを制限するためには、有料のライブラリが必要となります。

前提

環境は下記になっています。既にライブラリはインストール済みです。

• Laravel11
• setasign/fpdi 2.6
• tecnickcom/tcpdf 6.10

TCPDFの日本語フォントは使いづらかった。。。

TCPDFは、日本語のフォント「cid0jp」を実装しており、そのままでも日本語表示ができるのですが、二つの点で別フォントを実装する必要がありました。

上記は、英文字の大文字と小文字を出力した例です。

一つ目として、半角英語のカーニングがむちゃくちゃで、「J」や「l」などの小文字は、隣にくっついてしまって可読性が非常に悪いという点です。

二つ目に、太字フォントが無いということです。もちろん、斜体もなく、1種類です。そうなると、HTMLが使えたとしても文中で、<b>タグを使っても太字になりません。

そこで、別のフォントをインストールして使用する必要がありました。

TCPDFのフォント設定の変更

まずは、別フォントをインストールするための準備としてTCPDFの設定を変更します。

fontsフォルダの作成

Laravel内にフォントを保存するフォルダを作成します。今回は、下記にフォルダを作成しました。

storage/fonts

TCPDFのデフォルトのフォントディレクトリを変更する

この段階では、「vendor/tecnickcom/tcpdf/fonts」ディレクトリがデフォルトのフォントディレクトリになっているので、これを「storage/fonts」ディレクトリに変更します。

<?php

namespace App\Providers;

class AppServiceProvider extends ServiceProvider
{
  public function register(): void
  {
    ・・・

    // TCPDF + FPDIでフォント設定用
    if (!defined('K_PATH_FONTS')) {
      define('K_PATH_FONTS', storage_path('fonts') . '/');
    }

    ・・・
  }
  ・・・
}

上のように「app/Providers/AppServiceProvider.php」に設定を追記します。

TCPDFのフォントをコピー

プロジェクトディレクトリ内で下記コマンドを実行します。

cp vendor/tecnickcom/tcpdf/fonts/* storage/fonts/

これで大量のデフォルトフォントが、storage/fontsディレクトリに複製されます。

フォントの複製を行わないと新しいフォントを追加したとしても、「TCPDF ERROR：Could not include font definition file: helvetica」などのようにエラーが表示されてしまいます。

これでTCPDFの基本的な設定は完了しました。

Google FontのNoto Sansを設定してみる

Fontのダウンロード

Google FontでNoto Sansを検索します。

https://fonts.google.com/?query=Noto+Sans

上記は、Laanguageを「Japanese」に絞った場合です。

「人類社会の～」の部分をクリックします。

右上の「GET」ボタンをクリックします。

「Download all（1）」ボタンをクリックすると、圧縮ファイル「Noto_Sans_JP.zip」がダウンロードされますので、解凍します。

staticフォルダ内は下記の通り、各太さのフォントが入っています。

今回は、通常フォントとして「NotoSansJP-Regular.ttf」、太字フォントとして「NotoSansJP-Bold.ttf」を使用します。

フォントの移動

上記二つのフォント「NotoSansJP-Regular.ttf」と「NotoSansJP-Bold.ttf」をLaravel内の「storage/fonts」に複製又は移動します。

TCPDFにフォントを登録する

基本的コマンド

まずは、この後、実行するコマンドについて解説します。

php vendor/tecnickcom/tcpdf/tools/tcpdf_addfont.php \
  -i storage/fonts/NotoSansJP-Regular.ttf \
  -o storage/fonts \
  -t TrueTypeUnicode \
  -s B

先頭の「php」は、phpで「tcpdf_addfont.php」を実行するという意味です。

「tcpdf_addfont.php」は、TCPDFのフォントを登録するための付属ツールです。このツールにより、TTFやOTFなどのフォントファイルをTCPDFが使える形式に変換します。

「-i」オプションは、input、つまり、変換するファイルの指定です。

「-o」オプションは、output、変換後に作成されるファイルを吐き出すフォルダです。

「-t」オプションは、フォントの種類を指定します。「TrueTypeUnicode」は、Unicode 文字を扱えるTrueTypeフォントのことを意味すます。

「-s」オプションは、フォントのスタイルを指定します。これにより、ファイル名の最後に「b」が追加されます。

ただし、フォント名にBoldやItalicが入っていると自動的に「b」や「i」が入るようなので、意味が無いように見える場合もあります。

• R – Regular（標準：省略可）
• B – Bold（太字）
• I – Italic（斜体）
• BI – Bold Italic（太字＋斜体）

「-n」オプションに注意

「-n」オプションは、上記には入っていませんが、nameオプションで、吐き出すファイルのファイル名（フォントファミリー名）を指定することができます。

しかし、このオプションを設定すると、フォントファイルが大きい場合などに、吐き出されるphpファイルが0KBとなってしまうという不具合があるようです。

そうなると正常にフォントとして利用することができなくなるため注意が必要です。

コマンドの実行

下記コマンドを実行します。

php vendor/tecnickcom/tcpdf/tools/tcpdf_addfont.php -i storage/fonts/NotoSansJP-Regular.ttf -o storage/fonts -t TrueTypeUnicode

まずは、Regularフォントの変換です。「-s」オプションはつけていません。これにより下記3つのファイルが作成されます。

• notosansjp.php
• notosansjp.z
• notosansjp.ctg.z

php vendor/tecnickcom/tcpdf/tools/tcpdf_addfont.php -i storage/fonts/NotoSansJP-Bold.ttf -o storage/fonts -t TrueTypeUnicode -s B

Boldフォントの変換です。上述通り、今回は関係ありませんが、一応「-s B」を指定しています。そして、下記3つのファイルが作成されます。

• notosansjpb.php
• notosansjpb.z
• notosansjpb.ctg.z

ファイルのアップロード

上記で作成された6つのファイルをアップロードします。

フォントファミリーとして認識させるには？

上記の二つのファイルは、「notosansjp.php」と「notosansjpb.php」という最後に「b」が付いているかいないかの違いでしたので問題はありません。

これが例えば「NotoSansJP-SemiBold.ttf」をBoldフォントとして認識させるには注意が必要です。

php vendor/tecnickcom/tcpdf/tools/tcpdf_addfont.php -i storage/fonts/NotoSansJP-SemiBold.ttf -o storage/fonts -t TrueTypeUnicode -s B

上記を実行すると「notosansjpsemib.php」などの3つのファイルが作成されますが、これだと「notosansjp.php」とファミリーであると認識されません。

TCPDFのフォントスタイルの設定では、下記のルールでファイルをファミリーとして認識します。

• fonts/{$family}.php
• fonts/{$family}b.php（Bold）
• fonts/{$family}i.php（Italic）
• fonts/{$family}bi.php（Bold Italic）

従って、「NotoSansJP-SemiBold.ttf」をBoldフォントとして利用するためには、ファイル名及びファイルの内容を書き換える必要があります。

ファイル名の変更

• notosansjpsemib.php → notosansjpb.php
• notosansjpsemib.z → notosansjpb.z
• notosansjpsemib.ctg.z → notosansjpb.ctg.z

※「notosansjpsemib.z」及び「notosansjpsemib.ctg.z」の書き換えが必要かどうかは未検証です。

リネームしたnotosansjpb.phpファイルの書き換え

<?php
// TCPDF FONT FILE DESCRIPTION
$type='TrueTypeUnicode';
$name='NotoSansJP-SemiBold';
$up=-125;
$ut=50;
$dw=1000;
$diff='';
$originalsize=5444352;
$enc='';
$file='notosansjpsemib.z';
$ctg='notosansjpsemib.ctg.z';
・・・

上記の$file及び$ctgの内容をそれぞれ「notosansjpb.z」と「notosansjpb.ctg.z」に書き換えます。

以上で、フォントの設定は完了です。

使用法

上記ファイルのアップロードが完了すると、下記のように設定するとBoldフォントが使用できるようになります。

$pdf = new Fpdi();
$pdf->setFont('notosansjp', '', 12);
$pdf->setFont('notosansjp', 'B', 12);

まとめ

フライング・ハイ・ワークスでは、システム上でPDFを取り扱う機会がたびたびあります。

• 画像やテキストを埋め込んだPDFの制作
• 制作したPDFやアップロードしたPDFをマージしたPDFファイルの制作
• フォーム埋め込み（Acro Form）ファイルをマージしたPDFファイルの制作 など

上記のアップロードやダウンロード、表示など様々な経験がありますので、PDF関連のWebシステムをご検討されている場合に、ぜひお声がけください。

The post TCPDF＋FPDIで標準及び太字フォントの追加 first appeared on FHWノート.

この場合、サーバーにSSH接続を行い、下記のコマンドを実行します。

php artisan storage:link

ただ、個人的には、上記のためだけに、SSH環境を構築するのは、特に商用サーバーでは、それぞれ設定方法が異なったり、できなさそうなサーバーもあり、それをいちいち調べ、設定するのが億劫なため、Laravel上で解決する方法をとっていますので、その方法をLaravel11の場合で解説していきます。

画像やファイルの保存場所

画像やファイルは、公開フォルダに直接保存していきます。

Webサーバーによりフォルダ名は異なると思いますが、通常「html」「public_html」「public」フォルダなどです。

この中にasettsフォルダやimagesフォルダなどを作成し、その中に保存していきます。

Laravelでは「config/filesystems.php」にその設定を記述していきます。

    'disks' => [

        'local' => [
            'driver' => 'local',
            'root' => storage_path('app'),
            'throw' => false,
        ],

        'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('APP_URL').'/storage',
            'visibility' => 'public',
            'throw' => false,
        ],

上記はデフォルトで存在する設定です。ここに保存するファイル用の設定を追記します

        'images' => [
            'driver' => 'local',
            'root' => public_path('assets/images'),
            'url' => env('APP_URL') . '/assets/images',
            'visibility' => 'public',
        ],

上記は、公開フォルダがpublicの場合、public/assets/imagesフォルダに画像を追加していく設定です。

ファイルを表示するには、env(‘APP_URL’)の設定で、例えば、「http://yahoo.co.jp/assets/images/」の後にファイル名を指定することで表示されます

ここで問題になるのが、「public_path()」の設定です。

public_path()の設定変更

デフォルトの設定はvendor\Illuminate\Foundation\Applicationにあります

・・・
    /**
     * Get the path to the public / web directory.
     *
     * @param  string  $path
     * @return string
     */
    public function publicPath($path = '')
    {
        return $this->joinPaths($this->publicPath ?: $this->basePath('public'), $path);
    }
・・・

上記を見ると、デフォルトの設定は、「public」フォルダになっています

つまり、このままでは、Laravelの初期状態のままで、appやbootstrapフォルダと同じレベルに「public」フォルダが存在する前提となっています

個人的には、システム用ディレクトリと公開ディレクトリの二つのフォルダだけで構成するのが好みで、例えば下記のような構成にしています

• laravel_sys（laravelの構成ファイル、フォルダ名は随時変更している）
  • app
  • bootstrap
  • config
  • ・・・
• public（htmlやpublic_htmlなどの公開フォルダ）

上記の場合、デフォルトのpublic_path()は、laravel_sysの中にpublicが存在している前提になっているので、ファイルのアップロードなどでは設定の変更が必要です。

そこで、「vendor\Illuminate\Foundation\Application」ファイルをオーバーライドして設定を変更します

ファイル名を「Application.php」として「app」フォルダの直下におき下記のような内容にします。

<?php

namespace App;

class Application extends \Illuminate\Foundation\Application
{
  //
}

extendsで\Illuminate\Foundation\Applicationの上書きが可能となります。

下記にpublic_path()の関数をコピペします

<?php

namespace App;

class Application extends \Illuminate\Foundation\Application
{
    /**
     * Get the path to the public / web directory.
     *
     * @param  string  $path
     * @return string
     */
    public function publicPath($path = '')
    {
        return $this->joinPaths($this->publicPath ?: $this->basePath('public'), $path);
    }
}

そして上記の「’public’」の部分を書き換えます

・・・
return $this->joinPaths($this->publicPath ?: $this->basePath('../public'), $path);
・・・

一つ上の階層からpublicフォルダを参照するように設定しました

bootstrap/app.phpの変更

このままでは、「app\Application.php」は参照されません。あいかわらず、もとの「vendor\Illuminate\Foundation\Application」のままです。

変更するには、bootstrap/app.phpを書き換える必要があります。

<?php

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
・・・

ファイル冒頭にある「use Illuminate\Foundation\Application;」を書き換えます

<?php

use app\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
・・・

これでpublic_path()の設定の変更が反映されます

Laravelのディレクトリ構成の変更

下記は先ほど記載したディレクトリ構成です

• laravel_sys（laravelの構成ファイル、フォルダ名は随時変更している）
  • app
  • bootstrap
  • config
  • ・・・
• public（htmlやpublic_htmlなどの公開フォルダ）

上記のように設定する場合には、上記で設定した「app\Application.php」ファイルの設置以外に「public/index.php」の変更が必要になります

<?php

use Illuminate\Http\Request;

define('LARAVEL_START', microtime(true));

// Determine if the application is in maintenance mode...
if (file_exists($maintenance = __DIR__.'/../storage/framework/maintenance.php')) {
    require $maintenance;
}

// Register the Composer autoloader...
require __DIR__.'/../vendor/autoload.php';

// Bootstrap Laravel and handle the request...
(require_once __DIR__.'/../bootstrap/app.php')
    ->handleRequest(Request::capture());

上記はデフォルトの設定ですが、上記のうち3か所を変更します。変更箇所は下記です

・・・
if (file_exists($maintenance = __DIR__.'/../storage/framework/maintenance.php')) {
・・・
require __DIR__.'/../vendor/autoload.php';
・・・
(require_once __DIR__.'/../bootstrap/app.php')
・・・

今回の例では、Laravelの構成ファイルはすべて「/laravel_sys」に入れているので、それに合わせて設定を変更します

・・・
if (file_exists($maintenance = __DIR__.'/../laravel_sys/storage/framework/maintenance.php')) {
・・・
require __DIR__.'/../laravel_sys/vendor/autoload.php';
・・・
(require_once __DIR__.'/../laravel_sys/bootstrap/app.php')
・・・

これでディレクトリの変更設定は完了です

viteを使う場合など他にも設定を変更する箇所があるとおもいますが、それらは利用環境により変更する必要があります

まとめ

以上がLaravelのディレクトリ構成の変更と、public_html()の設定の変更についての解説となります。

構築環境は、みなさん工夫されていると思いますが、意外にこういった設定に躓くことが多いので、参考になればと思い記述させてもらいました

文責：フライング・ハイ・ワークス代表 松田 治人（まつだ はるひと）
会社では、Laravelを中心としたエンジニアとして働いており、これまでに50本以上のLaravelによる東京でWebシステムの制作やホームページ制作をしています。
エンジニアとして弊社で働きたい方、お仕事のご相談など、お待ちしております。

The post Laravel11でディレクトリ構成とpublic_path()の設定を変更する first appeared on FHWノート.

Webサイトを構築するために、npm環境はもはや欠かせず、スルーすることはできません。

そこで、nodeのバージョン管理ソフトVoltaをインストールすることにしました。弊社でも多数のWebサイトを管理させていただいているため、Nodeのバージョン切り替えは非常に重要です。

PCはWindows11となり、クリーンな状態ですので、そんなに苦労はしないだろうとたかをくくっていましたが、そこには、数々のハードルがあったので、それらの過程を描いていきたいと思います。

• Node / npm
• バージョン管理ソフト「volta」
• Volta2.0のインストール
  • Windowsを開発者モードに設定
  • Windowsのスマート アプリ コントロール
  • Windowsのwingetのバージョンアップ

今回あらためてインストールしようとしたVoltaはver2.xとなっており、他のサイトで説明されているVoltaはバージョンが1.xのため、インストール時に別の障害がありました。

知らないことが多かったため、確認をしながら、すすめていきます。

Node / npm

まずそもそもの話ですが、Node / npmとはなんなのか？

Webサイトで出てくる言語として、PHPやjavascriptは代表的なプログラム言語です。

PHPはサーバーサイドで実行され、Javascriptは、ローカルでというより、ブラウザ上で実行されるプログラム言語となりますが、これらをWindowsやMac、Linuxなど自分の開発環境で実行する必要がある場合があります。

例えば、Laravelで有名な実行コマンドに「artisan」がありますが、これを実行する際には、下記のように実行します

> php artisan route:list

このartisanを実行する前に「php」と記述しているのは、php上でartisanファイルを実行しようとしているからです。

したがって、ローカルのパソコンにphpが入っていなければ、上記のコマンドも実行することはできません。

同様にローカルでJavascriptを実行する環境に必要なプログラムが、Node（node.js）となります。

パッケージ管理ソフト

では、npmとは、何なのか？といえば、Nodeのパッケージ（ライブラリ）を管理するシステムとなります。

そして、phpのパッケージを管理するシステムは、composerが有名です。

パッケージ管理ソフトは、ライブラリのインストールやアップデートの際に、ライブラリ間の依存関係の解決をしてくれるため、突然のエラーが起きるようなリスクを低減でき、開発者にとっては必須のシステムとなっています。

この二つのパッケージ管理システムのファイルや構成を比較してみると下記のようになります。

それぞれ初期実行コマンドを実行した際に展開されるパッケージ（ライブラリ）は、パッケージ管理ファイルに記述してあります。

特にNode/npmでは「npm run dev」などの実行できるコマンド、package.jsonに記述されています。

Nodeとnpmのバージョン

Node.jsとnpmにはそれぞれ最適なバージョンがあり、それぞれのバージョンがかみ合わなければ、npmを実行することはできません。単純に古いNode.js上では、最新のnpmは実行できないということです。

Node.jsとnpmの対応表は下記にあります。

https://nodejs.org/en/about/previous-releases

通常Node.jsをWindowsにインストールするとそれに対応したnpmがインストールされます。

しかし、一つのNode.jsをインストールをしてしまうと、それより上位又は下位のバージョンで作られたWebサイトを更新しようとすれば、その都度、Node.jsの再インストールなどが必要となってきます。

そこで、今回そのバージョン切り替えのためにNodeのバージョン管理ツールとなる「volta」をインストールします。

Nodeのバージョン管理ツール「volta」

Node.jsは2024年末現在では、V23.2.0となっています。

基本的に偶数のバージョンがLTS（Long Term Support / 長期サポート）となり、通常30ヶ月間のバグ修正などが行われるため、利用するnodeは、偶数版が良さそうです

Node.jsは、6ヶ月ごとに更新されていくようですので、その管理も煩雑となります。

そこで、Nodeのバージョン管理ツールを使用するのですが、下記な動作をしてくれるので、いちいちNodeとnpmのバージョンを意識する必要がありません。

• プロジェクトごとにnodeのバージョンを変更
  • package.jsonにvoltaという項目が追加され、そのpackage.jsonにあわせnodeのバージョンをあわせてくれる（古いソースでも切替が自動で行われる）
• 指定が無い場合は、default設定のnode.jsが適用される
• npmのバージョンも自動で対応

Volta2.0のインストール

最初に、すでにNodeをインストールしている場合や、他のNodeのバージョン管理ツールが入っている場合にはすべてアンイストールしておきます。

Windows開発者モードを有効にする

Voltaのバージョン切り替えのための実行時に、Windowsの開発者モードの権限が必要なようです。

スタートメニューの「設定」から左メニュー「システム」中盤の「開発者向け」をクリックして、「開発者モード」を「オン」に切り替えます。

すると下記のようなアラートがでるので、内容を確認して「はい」をクリックします。

Windowsのスマート アプリ コントロール

Windows11のデフォルト状態では、何かアプリをインストールするたびに、下記のような警告が出て、インストールが正常に行えません。

• このアプリは保護のためにブロックされました
• このアプリはお使いの PC では実行できません
• Windows はこのアプリを保護しました
• アプリがスマート アプリ コントロールによってブロックされました

ここから先は、開発者として利用するPCに責任が取れない場合には、設定を変えないでください。一度設定を変えると元に戻すにはWindowsの再インストールを行う必要があります。

ただし、設定を変えない場合には、これ以降すすむことができません。

設定変更は下記の通りです。

• Windows11の「設定」から、左の「プライバシーとセキュリティ」をクリック
• 真ん中上部の「Windowsセキュリティ」をクリック
• 上部の「Windowsセキュリティを開く」をクリック（別ウインドウがポップアップ）
• 左又は真ん中の「アプリとブラウザー コントロール」をクリック
• 真ん中上部の「スマート アプリ コントロール」の「スマート アプリ コントロールの設定」をクリック
• 表示された画面の「スマート アプリ コントロール」を「オフ」にする

管理者モードでターミナルを起動

Windowsの標準バンドルソフトである「ターミナル」をこれ以降使っていきます。

この「ターミナル」を開く際には、アイコンの上で右クリックし、「管理者として実行」を選択してください

Wingetのバージョンアップ

Voltaをインストールするために、Voltaのサイトにアクセスし「Get Started」をクリックすると下記のようなページに移動します。

中断の「Windows Installation」がWindows版のインストール方法です。下記のコマンドを「ターミナル」から実行するとインストールされるはずです。

「ターミナル」は、Windowsに標準実装されているアプリケーションです。

> winget install Volta.Volta

上記を実行する前に、下記コマンドをターミナルに入力し、wingetのバージョンを確認します。

> winget -v
v1.2.10691

wingetとは、Windowsのバージョン管理ソフトです。今回バージョン管理ソフトが様々出てきますが、Windowsでは「winget」がバージョン管理ソフトとなっています。

上記のようにバージョンが「1.2」の場合、このバージョンには不具合があるようで、バージョンアップをする必要があります。

今回は、Windows11の初期状態なのですが、不具合のあるバージョンがあるとはしらず、ここで少し時間をとられてしまいました。

様々サイトを見ていると「Microsoft Store」アプリからアップデートとありますが、そもそもwingetに不具合があるため、このアップデートもうまくいきません。

コマンドラインからwingetのアップデート

まずは、コマンドラインから、下記を実行することで、GitHub上の最新のWinget CLIのインストーラーのパッケージをダウンロードしてきます。

> Invoke-WebRequest -Uri https://github.com/microsoft/winget-cli/releases/latest/download/Microsoft.DesktopAppInstaller_8wekyb3d8bbwe.msixbundle -OutFile winget.msixbundle -UseBasicParsing

上記では、「-Url」で指定したURLからダウンロードしたファイルを、「winget.msixbundle」という名前で保存しています。

下記で、Windowsアプリケーションパッケージ（.msixbundle）をインストールします。

> Add-AppxPackage -Path winget.msixbundle

最後に、保存したファイルを削除します。

> rm winget.msixbundle

これでwingetのバージョンアップは完了です。

あらためて、wingetのバージョンを確認します。

> winget -v
v1.8.1911

バージョンが1.2から1.8となりました。

Volta2.0のインストール

いよいよインストールです。下記を実行します。

> winget install Volta.Volta

これでインストールは完了です。最後はあっさりしたものです。

各バージョンのインストールですが、package.jsonにvoltaの記述があれば、勝手にそのバージョンのnodeがインストールされますので、毎回下記を行う必要はありません。

簡単な使用方法は下記の通りです。

バージョン指定によるnodeのインストール

下記はメジャーバージョンだけを指定することでそのバージョンの最新版のインストールを行います。

> volta install node@20

下記は、詳細なバージョンを指定してインストールを行います。

> volta install node@20.15.0

最新のnodeのインストール

> volta install node@latest

インストール済みのバージョン一覧の確認

> volta list node
⚡ Node runtimes in your toolchain:

    v14.19.1
    v20.11.0
    v20.15.0 (default)
    v21.7.3

バージョンの切り替え

> volta pin node@20.11.0

デフォルトバージョンの切り替え

> volta default node@21.7.3

まとめ

たかだか一つのプログラムをインストールするのにだいぶ時間を取られました。

こういう作業は「めんどくさい！」と思う人が多いでしょうが、その感情は、自分のウィークポイントにぶつかったときがほとんどです。

なので、そんな時こそ一つずつ紐解き、改めて理解していくことで、エンジニアとしての実力が上がっていくのだと思います。

「めんどくさい！」はスキルアップのチャンスです。根性決めてがんばりましょう！！ｗ

文責：フライング・ハイ・ワークス代表 松田 治人（まつだ はるひと）
会社では、Laravelを中心としたエンジニアとして働いており、これまでに50本以上のLaravelによる東京でWebシステムの制作やホームページ制作をしています。
エンジニアとして弊社で働きたい方、お仕事のご相談など、お待ちしております。

The post Windows11にVolta2.0をインストール first appeared on FHWノート.

WordPressを使って外部の制作会社に自社のホームページを作ってもらうというのは、決して珍しいことではありません。WordPressを使ったホームページ制作を得意とする会社はいくつもあります。だからこそ、どの制作会社を選ぶのかが重要といえます。会社によって強み・弱みがあるため、自社に合った制作会社に依頼するようにしましょう。

この記事では、WordPressに強いホームページ制作会社の選び方を解説するため、ご参考にしていただければ幸いです。

WordPressを使ったホームページ制作の流れ

まずは、WordPressを使ったホームページ制作の流れを簡単に解説します。どのようなプロセスでホームページが作られるのかを理解すれば、制作会社とのコミュニケーションもスムーズになるでしょう。

ホームページ制作の企画立案

制作会社に依頼する前に自社で済ませておく部分です。ホームページを制作する目的やターゲットを設定し、競合他社のリサーチを行いましょう。そのうえで、掲載するべき情報を整理し、企画を立案します。

企画を立案する段階でホームページの方向性を定めておくことによって、その後の制作フェーズにおける認識のズレを未然に防ぐことができます。また、情報を整理し、やるべきことが明確になっていれば、おおよそどれくらいの予算が必要になるかも明らかになるでしょう。

WordPressを使ったホームページ制作

主に制作会社が担当する部分です。ターゲットに刺さり、目的を達成するためのホームページを制作します。必要な情報を盛り込むだけではなく、ホームページを訪問するユーザーの使いやすさも考慮しなければいけません。

ホームページを作るのは制作会社ですが、発注した会社がなにもしなくて良いというわけではなく、定期的に進捗を確認する必要があります。完成した後に「イメージと違う」という事態を避けるためにも、制作会社に丸投げするのは避けましょう。

ホームページの公開・アフターフォロー

ホームページが完成したら、いよいよ公開となります。より多くの人に訪問してもらうためにも、公開に合わせての告知・宣伝などを怠らないようにしましょう。

ホームページは、完成したら終わりというわけではなく、公開後の運用が非常に重要です。公開後に新たな不具合が生じる可能性があるため、しっかりと監視し、場合によっては適切な対応をとらなければいけません。

制作会社がホームページ公開後どれくらいアフターフォローをしてくれるのか、契約を締結する前に確認しておくことが重要です。

WordPressを使ったホームページ制作を外注するメリット

多くの会社がWordPressを使ったホームページ制作を外部の会社に依頼しているのは、いくつものメリットがあるからに他なりません。ここでは、WordPressを使ったホームページ制作を外注するメリットについて解説します。

質の高いホームページを制作できる

経験のない人が質の高いホームページを作るのは決して簡単なことではありません。仮に作れたとしても、かなり時間がかかってしまうでしょう。そのため、ホームページ制作をプロに依頼するメリットは大きいといえます。

特に、ユーザーにとって「使いやすい」「見やすい」ホームページにしたいのであれば、外注するのがおすすめです。

また、昨今問題になっているウイルス感染や情報漏洩を懸念しているのであれば、自社で制作するよりもプロに依頼したほうが安心でしょう。

自社社員の負担を軽減できる

自社でホームページを作ろうとすれば、制作を担当することになった社員に負担がかかってしまいます。しかし、制作会社に依頼すれば、社員への負担はほとんどありません。

もしも社内にホームページ制作の経験者がいたとしても、その社員にホームページ制作の業務が集中すると、業務過多になってしまう恐れがあります。社員のワーク・ライフ・バランスを考慮するのであれば、あまりおすすめはできません。

どうしてもホームページ制作の費用を抑えたいのであれば、ホームページ制作に関する簡単な業務のみを自社で行うという方法もあるため、検討してみてください。

プロから運用のアドバイスを受けられる

制作会社によっては、ホームページの運用などに関するアドバイスをしてくれる場合があるため、それもメリットだといえるでしょう。

ホームページ制作の豊富な実績に裏付けられたURL設計やSEO対策公開後の運用を考えた構築、アップデートなどのアフターフォローやメンテナンスに関するアドバイスをもらえれば、自社にとって大きな財産となります。

どれくらいアドバイスをくれるかについては、制作会社によって大きく異なります。契約を締結する前にしっかりと確認しておきましょう。

WordPressに強いホームページ制作会社の選び方

WordPressを使ったホームページ制作を得意とする会社は多く、いざ制作会社を選ぼうとしても、どこが良いか分からなくなってしまう可能性があります。ここでは、WordPressに強いホームページ制作会社の選び方について解説します。

制作会社のホームページが作り込まれているか

制作会社を選ぶ際には、制作会社のホームページが作り込まれているかどうかを確認することが重要です。

制作会社のホームページは、いわばその会社の顔です。ホームページを見れば、その制作会社がどれくらいのスキルを持っているのかが分かるでしょう。もしも制作会社のホームページがあまりにも簡素であれば、依頼するのは避けたほうが良いかもしれません。

多くの制作会社はホームページに制作実績を掲載しているため、その実績もチェックしておきたいものです。

WordPressを使った制作実績が豊富か

制作会社の実績をチェックする際は「WordPressを使った制作実績がどれくらいあるか」を基準にしましょう。

WordPressの制作実績が豊富にある会社であれば、これまでに蓄積された経験を活かして、知識のない人でも簡単にホームページを運用できるよう、カスタマイズしてくれる場合もあります。

WordPressやプラグインのアップデートなどが頻繁にあるため、公開後にも運用しやすい構築について、制作会社に聞いてみると良いでしょう。しっかりと回答してくれれば、WordPressの実績が豊富な会社である可能性が高いです。

ホームページ制作のチーム体制は万全か

制作会社を選ぶ際は、ホームページ制作のチーム体制をしっかりと見極め、問題がないかどうか確認しておくことが重要です。

制作会社によっては、プロジェクトリーダー、ディレクター、エンジニアのように、工程ごとにスタッフが在籍しています。そのような場合は、どの作業を誰に依頼をすることになるのか確認しておきましょう。そうすることで制作フローが明らかになり、流れを把握しやすくなります。

可能であれば、できるだけしっかりとしたチーム体制の制作会社に依頼したいものです。

セキュリティ対策を行なっているか

どれくらいセキュリティ対策を行っているかは、制作会社を選ぶ際に重視したいポイントです。もし顧客の情報が流出したりすれば企業の信用問題に関わるため、軽視するわけにはいきません。

制作会社によって、セキュリティ対策には差があるため、契約を締結する前に確認するようにしましょう。

その制作会社がセキュリティ対策に力を入れているかどうかを見極めるために、プライバシーマークの有無を確認するという方法があります。

プライバシーマークは、一般財団法人日本情報経済社会推進協会（JIPDEC）による第三者認証機関審査を受けることによって付与される認証です。

WordPressを使ったホームページ制作の費用相場

外部の制作会社にWordPressを使ったホームページを作ってもらう場合、どれくらいの費用が必要になるでしょうか。ここでは、WordPressを使ったホームページ制作の費用相場について解説します。

テンプレートを使用した小規模サイトの費用相場

wordpressに装備されている既存のテンプレート（テーマ）を使って小規模なホームページを作る場合、費用相場は30〜50万円程度です。ホームページ全体のページ数は10ページ前後が基本となります。

あまり予算がなく「費用を抑えたい」という場合にはおすすめですが、他社との差別化を狙っているのであれば、テンプレートを使用した小規模なホームページだと物足りないかもしれません。それなりに規模の大きな会社で、このタイプのホームページを使っているところはほとんどないでしょう。

相場よりもかなり安く制作してくれる会社もありますが、クオリティに問題がある場合もあるため、慎重に検討する必要があります。

オリジナルデザインを想定した中規模サイトの費用相場

WordPressのテンプレートを使用せずにオリジナルのデザインでホームページを制作した場合、費用相場は50〜300万円程度です。ホームページ全体のページ数は20ページ前後が基本となります。

商品が複数ある場合やホームページで商品・サービスの魅力を丁寧に伝えたい場合には、このタイプが良いでしょう。ある程度の予算が必要になりますが、ページ数が多いこともあり、ホームページの内容を充実させられます。

原稿や画像の素材も制作会社側が用意してくれる場合が多いため、自社の業務が忙しく、社員がホームページ制作に協力するのが難しい場合でも、制作が遅れてしまう可能性は低いでしょう。

ページ数が多くデザインもこだわった大規模サイトの費用相場

商品の検索機能などを充実させ、デザインにもこだわるのであれば、ホームページの費用相場は300万円以上になると考えておいたほうが良いでしょう。ホームページ全体のページ数は20ページ以上になります。

ホームページを通じて本格的な集客やブランディングを行いたい場合や、不動産サイトのように充実した条件絞り込み機能を装備したい場合などは、このタイプのホームページが良いでしょう。

このようなホームページを作るには、経験豊富で高いスキルを持つデザイナーやエンジニアに依頼する必要があるため、どうしても費用が高くなる傾向にあります。

予算が豊富にある状況で、デザインにこだわり、機能が充実したホームページに仕上げたい場合におすすめです。

知っておきたいWordPressの基礎用語

ここでは、WordPressの基礎用語について解説します。基礎用語を知っていれば、ホームページの制作会社の話もスムーズに理解できるようになり、制作会社がどのような目的でなにをしているのかが分かるようになるでしょう。

①プラグイン

WordPressの機能を拡張させるプログラムのことを指します。プラグインを活用することによって、さまざまな機能をWordPressにプラスし、自分なりのカスタマイズを行うことが可能になります。多種多様なプラグインが用意されているため、自社のホームページに合ったものを活用しましょう。

②メディア

WordPressで画像を管理するためのメニュー項目を指します。ホームページに画像をアップロードしたり、ページに画像を挿入したりする際に使用します。実際にホームページを運用する際は、頻繁に使用することになるでしょう。

③固定ページ/投稿ページ

固定ページは、WordPressの中にデザインページを作成するためのメニュー項目です。会社概要や商品紹介ページなど、自由にアレンジしたデザインページを作成することができます。また、ページ同士に親子関係を持たせることもできます。

投稿ページは、主にコンテンツを作成するページのことです。SEO対策の一環として良質なコンテンツを投稿することが求められるようになったため、投稿ページの重要性は増しています。トップページとの連動もスムーズなため、ユーザーへの情報発信をする際には投稿ページを積極的に活用しましょう。

④カスタムフィールド

カスタムフィールドは、WordPressに好きな入力項目を追加できる機能のことを指します。カスタムフィールドを活用すれば、追加したい入力項目を自由に設定することが可能になるため、会社名や住所など、入力する項目を決めて設定しましょう。そうすることで、ホームページ運営を効率的に行えます。

⑤ブロックエディタ

ブロックエディタは、WordPressの「バージョン5.0」から導入された比較的新しい機能です。文章や画像を「ブロック」という単位で管理できる点が特徴で、HTMLやCSSの知識がなくてもレイアウトや位置調整が行えます。また、パソコンだけでなくスマホやタブレットからでも、スムーズにコンテンツの編集や管理を行うことが可能です。

まとめ

この記事では、WordPressに強いホームページ制作会社の選び方について解説しました。同じWordPressというコンテンツ管理システム（CMS）を使って作るからこそ、どの制作会社に依頼するかがポイントになります。競合他社のホームページと差別化を図りたいのであれば、しっかりと比較検討したうえで制作会社を選びましょう。

ホームページ制作のプロフェッショナル集団であるフライング・ハイ・ワークスにご相談いただければ、目的や予算に合わせた最適なご提案をさせていただきます。ぜひお気軽にお問い合わせください。

The post WordPressに強いホームページ制作会社の選び方！費用相場も紹介【2024年最新版】 first appeared on FHWノート.

会社でWebシステム制作を進める担当者になった方へ。

外部の制作会社と一緒にWebシステムを作り上げていく必要があります。Webシステム制作に関する基礎的な知識があれば、制作会社とのコミュニケーションもスムーズになるでしょう。

この記事では、Webシステム制作の流れや注意点などをについて解説しますのでしていますから、参考にしていただければ幸いです。

Webシステム制作とは

Webシステム制作は、インターネット経由で利用するシステムやサービスの開発を意味します。対象となるシステムやサービスは幅広く、簡単に「〇〇と〇〇を開発するのがWeb開発」と言い切ることは難しいです。

例えば、Googleに代表される検索サイトは膨大な情報を蓄積し、入力されたキーワードに合致する情報を表示します。 Googleのような検索機能を提供するコンピュータプログラムを作成することもWebシステム制作のひとつです。

Webシステム制作の流れ（上流工程）

まずは、Webシステム制作を進める流れについて、上流工程と下流工程の2つに分けて解説します。

Webシステム制作の上流工程を知ることで、どのように開発がスタートし、どのように下流工程へと接続していくのかが分かるはずです。

ステップ①ヒアリング

制作会社がクライアントへヒアリングを行うので、Webシステムを開発する目的やユーザーに提供したい機能、Webシステムのターゲット像について丁寧に伝えるようにしましょう。

制作会社からのヒアリングは、重要な情報を共有するための貴重な機会です。精度の高い情報収集を行うために、制作会社によっては「ヒアリングシート」を用意しています。

決して必須の資料ではありませんが、制作会社がクライアントの課題や要望を深く理解するために重要な役割を果たします。

ステップ②要件定義

ヒアリングした内容をもとに、制作会社は要件定義を行います。要件定義とは、必要な機能やクライアントの要求をまとめ「要件定義書」を作成することです。要件定義書にWebシステム制作をする目的やターゲット、予算、納期、人員などを記載し、それを元に作業工程やスケジュールを組んでいきます。

Webシステム制作を行うためには、要件定義を欠かすことはできません。制作会社がどれだけ精緻な要件定義を行えるかによって、Webシステム制作の質が大きく変わってきます。

ステップ③外部設計

次は、外部設計を行います。外部設計とは、要件定義の内容に沿ってユーザーインターフェース（画面の見やすさや操作のしやすさ）を作り上げることです。システムの使いやすさは外部設計に左右されると言っても良いでしょう。

ユーザーの使い勝手に関わる工程であり、外部設計に問題があると、ユーザーにシステムを愛用してもらうことは難しくなります。

そのため、外部設計はクライアントの事業に与える影響が大きいとされており、クライアントの意見が反映されやすい工程となっています。

ステップ④内部設計

外部設計が完了したら、今度は内部設計に取りかかります。内部設計とは、外部設計の結果を実際にプログラミングできるようにするための、システム内部に特化した詳細な設計のことです。

具体的には、プログラミングをしやすくするために機能をモジュール（システムを構成する要素）ごとに分け、各モジュールの機能を明確化したり、システム内で使用するデータのやり取りに関する部分を設計したりします。外部設計は「クライアントから見えるところ」の設計ですが、内部設計は「クライアントには見えないところ」の設計だといえます。

クライアントが重視する工程ではなく、内部設計に関してクライアントの了解を得る必要はないとされています。

Webシステム制作の流れ（下流工程）

上流工程の次は、下流工程について解説していきます。

Webシステム制作の下流工程を知ることで、Webシステム制作がどのようにゴールに進んでいくかが分かります。

ステップ①開発（コーディング）

上流工程が完了したら、あらかじめ決められたプログラミング言語を使って、制作会社が設計通りにコーディングを行います。

制作会社にとっては非常に重要な工程ですが、クライアントが介入する余地は少なく、意見を求められたりすることは基本的にないでしょう。

ステップ②テスト

開発（コーディング）が完了したら、テストを行います。

Webシステム制作のテストは、以下の4種類に大別されます。

①単体テスト
個別のプログラムが要件を満たしているかチェックする。

②結合テスト
複数のプログラムで異常が起こらないかチェックする。

③システムテスト
①と②を行った後に、システム全体が正常に動くかをチェックする。

④運用テスト
実際の現場でシステムの不具合などが起きず、問題なく使えるかどうかをチェックする。

上記①～④のテストをクリアできなかった場合、問題点を修正する必要があります。

ステップ③リリース

テストが終わったら、いよいよリリースです。リリースとは、テストが完了した成果物を現場に移す作業のことを指します。

リリースの方法は以下の二種類です。

①一斉移行方式
完成した成果物を一気に現場に落とし込む手段です。問題が発生しない場合、費用や手間を抑えられる点がメリットです。

②順次移行方式
機能単位や業務単位などで区切り、段階的に移行する手段です。まとまった移行期間を確保できなくても行える点がメリットです。

ステップ④保守運用

Webシステム制作は、リリースしたら終わりというわけではありません。システムをリリースした後も、保守運用を行う必要があります。保守運用の工程では、成果物が問題なく運用できるか確認したり、問題があれば個別に対応したりする必要があります。

完成したシステムのことをもっとも深く理解しているのは制作会社なので、基本的には、制作会社が保守運用を担当します。保守運用の内容はさまざまで、メモリの利用状況をチェックしたり、システムをアップデートしたりするのも保守運用に含まれます。

Webシステム制作の発注知識

Webシステム制作を外部の制作会社に依頼するからといって、発注側に知識が求められないわけではありません。

基本的な知識があれば制作会社とのコミュニケーションがスムーズに進み、開発計画が滞る可能性も低くなるでしょう。

ここでは、発注側に求められるWebシステム制作の基本的な知識について解説します。

Webシステム制作の基本的な用語

制作会社とのやりとりでは、さまざまな専門用語が飛び出してきます。全ての用語を知っておく必要はありませんが、基本的な用語を抑えておくと、制作会社の担当者がなにを言いたいのかをスムーズに理解することができるでしょう。

ここでは、Webシステム制作に関する基本的な用語を紹介します。

アジャイル開発/ウォーターフォール開発
アジャイル開発は、機能単位の小さいサイクルで、計画→設計→実装→テストという開発工程を繰り返す手法です。優先度の高い要件から順に開発を進められるので、素早くリリースすることが可能です。

ウォーターフォール開発は、開発に必要な工程を段階的に区切り、順番に進行していく伝統的な手法です。高い品質が求められる大規模なシステム開発などに適していますが、開発の途中で修正や仕様変更などが生じると、工数や納期に大きな影響が出る可能性がある点に注意が必要です。

オフショア/ニアショア/オンショア
オフショアとは、Webシステム制作を海外企業や現地法人に委託することを指します。日本国内での開発に比べて費用を抑えられるのがメリットです。

ニアショアは、Webシステム制作の一部または全ての工程を地方都市のエンジニアに委託することです。リモートワークが一般的になったこともあり、注目を集めています。

オンショアは、Webシステム制作の全工程を自社内で行うことを指します。10年ほど前までは、このオンショアが日本国内では主流でした。

UI/UX
UIはUser Interface（ユーザーインターフェース）の略です。2つの異なるシステムなどを結びつける備品やプログラムのことを指します。ユーザーが操作する画面やマウス、キーボードなどもUIに含まれます。

UXはUser Experience（ユーザーエクスペリエンス）の略です。ユーザーがシステムを通じて得られる体験のことを指します。「楽しい」「美しい」といった感覚だけではなく、システムの品質に関わるものもUXに含まれます。

デバッグ
デバッグとは、ソースコードのエラーやバグを見つけて修正することです。ソフトウェアが期待どおりに動作しない場合、コードを調査してエラーが発生した原因を特定する必要があります。

フロントエンド
フロントエンドとは、Webサービスで直接ユーザーの目に触れる部分のことを指します。具体的には、ボタンをクリックする部分や文字を入力する部分などがフロントエンドに該当します。

ライブラリ
ライブラリとは、プログラムにおいて頻繁に使う機能を切り出し、再利用しやすいようにまとめたものを指します。ライブラリを利用することで、頻繁に使う機能を最初から作る必要がなくなり、効率的な開発が可能になります。

Webシステム制作の成果物の種類

Webシステム制作を外部の制作会社に依頼した場合、各工程の成果を示す文書やソフトウェアなどが提出されます。これを「成果物」と呼びます。

以下の表のように、成果物は大きく3種類に分類されます。

Webシステム制作の発注者責任

Webシステム制作において責任を負うのは、制作会社だけではありません。「発注者責任」という考え方があり、発注側のクライアントも一定の責任を負います。発注者といえども、基本的に開発を丸投げすることはできません。開発プロジェクトの全体像を把握し、必要なリソースを提供し、プロジェクトの進行を管理するなどの責任があります。

過去には、発注者責任をめぐって発注側と制作会社で裁判に発展したこともあります。

「Webシステム制作は発注側と開発側が協力しながら進める」という認識を持っておきましょう。

Webシステム制作でよく使われるプログラミング言語

Webシステム制作において、プログラミング言語は必須です。それでは、どのような言語がよく使われるのでしょうか。

ここでは、Webシステム制作において頻繁に使われるプログラミング言語を「クライアント側の言語」と「サーバ側の言語 」に分けて紹介します。

クライアント言語

クライアント側には、Webシステムを使うユーザー向けに、以下の3種類の言語が表示されます。この言語について知っておくと、外部の制作会社とのやりとりもスムーズになるでしょう。

①HTML
文章の構成や役割を示す「マークアップ言語」のひとつで、ブラウザに表示される文字や画像、および配置を表します。

②CSS
HTMLを装飾し、体裁を整えるための言語です。CSSを設定することで、文字のサイズや色、レイアウトなどが決まります。

③JavaScript
ブラウザの変化や動きを表現するのに必要な言語です。 HTMLやCSSにJavaScriptを組み合わせることにより、高品質なシステムを構築することが可能になります。

サーバ言語

サーバ言語は、サーバ側のデータ処理で使用される言語です。

クライアント側がこれらの言語を使用することは基本的にありませんが、どのような言語か知っておくことで、制作会社の業務について理解を深めることができるでしょう。

①Java
汎用言語のひとつで、プラットフォームに依存しないのが特徴で、OSや機器の種類を問わず実行することができます。

②PHP
WordPressで一般的に用いられている言語で、HTMLに埋め込むことが可能です。

③Ruby
日本人が発明した言語です。ショッピングサイトやSNSサイトなど、さまざまなアプリケーションサイトを開発できます。

④C#
アプリやゲームの開発に使用されることの多い言語です。プログラムで不要になったメモリ（記憶容量）が自動的に解放されるので、プログラマーが厳格にメモリを管理する必要がありません。

Webシステム制作を外部の会社に依頼するときの注意点

Webシステム制作を外部の制作会社に依頼するというのは、決して珍しいことではありません。制作会社にWebシステム制作を依頼する際、注意すべき点がいくつかあります。

注意点を把握せずに依頼してしまうと、思わぬトラブルが発生する恐れがあります。最悪の場合、期待を大きく下回る、クオリティの低いWebシステムが完成してしまいます。ここでは、制作会社にWebシステム制作を依頼する際の注意点を紹介します。

類似した実績があるか

正式に依頼する前に、その制作会社の過去の実績をチェックし、自社と同じ業界で開発を行った経験があるかどうか、同じ種類のWebシステムの開発を行った経験があるかどうかを確認しましょう。類似した実績があれば、その時に蓄積された経験を活かしてもらえる可能性があるからです。

ホームページに実績を載せている制作会社もありますし、もし載っていない場合でも制作会社の営業担当者に確認すれば、教えてくれるでしょう。

担当者との相性は良いか

制作会社の担当者との相性は極めて重要です。もしも相性が良くないと、開発してもらいたいWebシステムのイメージが正確に伝わらず、想像と異なるものが完成してしまうリスクがあります。正式に依頼する前に担当者と話し合う機会を設け、相性をチェックしましょう。

都合の良いことばかり話す担当者ではなく、自社の伝えたいことを丁寧に汲み取り、適切な助言をしてくれる担当者がいる制作会社を選びましょう。

費用は適正か

Webシステム制作において、費用が適正かどうかは重要です。制作会社の提示した費用が適正かどうかを知るために、相場を知っておく必要があります。

おおよその相場を把握するために有効なのが相見積もりです。複数の制作会社から見積もりを出してもらえば、金額を比較することができるので、おおよその相場が分かります。

Webシステム制作の費用は、主に人件費と期間から割り出されます。稼働する人数が多く、開発期間が長くなる大規模なシステムほど、金額が大きくなります。

テストや保守運用でクオリティは担保されるか

正式に依頼する前に、テストや保守運用をどれくらい丁寧に行ってくれるのか、制作会社に詳しく確認しておきましょう。いくら開発費用が安くても、テストを丁寧に行わず、保守運用もいい加減であれば意味がありません。

Webシステム制作は、実際にシステムを稼働させてからが本番です。開発されたシステムには、基本的にバグがあると考えた方が良いでしょう。バグを見抜くテストやリリース後の保守運用を軽視しないことをおすすめします。

まとめ

この記事では、Webシステム制作の流れや使用する言語、外部の制作会社に依頼する時の注意点などについて解説しました。Webシステム制作に取り組む際のご参考にしていただければ幸いです。

フライング・ハイ・ワークスは、これまでさまざまなWebシステム制作に携わってきました。豊富な開発実績がありますから、お客様に合わせたご提案が可能です。

Webシステム制作でお悩みの際は、豊富な実績とノウハウを持つフライング・ハイ・ワークスへ、ぜひお問い合わせください。

The post Webシステム制作とは？流れや使用する言語について解説 first appeared on FHWノート.

オウンドメディアというのは、自社で運営しているメディアのことです。自分たちで運営しているので、制作したコンテンツを自由に扱うことができ、ユーザーに素早く最新の情報を届けられる点がメリットとして挙げられます。

ここでは、オウンドメディアの構築を検討している方を対象に、オウンドメディア構築のために検討すべきことや費用の相場などについて解説します。

オウンドメディアを構築する際に検討すべきこと

オウンドメディアは、慎重に構築する必要があります。しっかりとした準備をせずに構築を進めてしまうと、オウンドメディアを効果的に活用することは難しくなります。

ここでは、オウンドメディアを構築する際に検討すべき4つのことについて解説します。

運用の目的

まずは、オウンドメディアを運用する目的を明確にしておきましょう。目的をはっきりさせないと、オウンドメディアをどのように運用して良いか分からなくなります。

オウンドメディアを運用する目的としては、販売促進と自社ブランディングの2種類に大別されます。そして、その目的は以下のようにさらに細かく分類されます。

• 販売促進目的
  • 見込み顧客の流入、獲得
  • 商品、サービスの認知
  • 商品、サービスの成約
  • SEO対策としての情報量の積み上げ

• 自社ブランディング目的
  • ファン層の醸成
  • 人材の採用

運用の目的を明確にしないことには、オウンドメディアの構築は進められません。

ターゲットとコンセプト

オウンドメディアのターゲットとコンセプトを決めておくことも重要です。ターゲットについては、目的から逆算して考えるのがおすすめです。例えば、商品の認知拡大が目的であれば、その商品を知って欲しいユーザーをターゲットに設定します。

求職者からの応募が目的なら、応募して欲しい求職者のペルソナを設定すると良いでしょう。ターゲットが明確になったら、次はコンセプトを決めます。オウンドメディアのコンセプトをはっきりさせることで、メディアのあり方や目指す方向性が決まります。コンセプトは難しいものではなく、ターゲットにとって分かりやすいものにしましょう。そのコンセプトがターゲットに刺されば、きっとオウンドメディアに興味を持ってくれるはずです。

構築・運用体制

次にやっておきたいのは、オウンドメディアの構築・運用体制を決めることです。どのような体制で構築・運用するかを決めておかないと、役割が曖昧になってしまい、結果として計画がストップしてしまう恐れがあります。例えば、構築は外注するのか、全てを自社内で運用するのか、外注するのであればどこに依頼するのかを決めておきましょう。
記事の制作進行は誰が行うのか、アクセスの解析は誰が担当するのか、といった細かいところまで決めておきましょう。社内のリソースで対応できる業務と外注する必要がある業務をリストアップすることをおすすめします。

かけられる予算

オウンドメディアの構築・運用にどれくらいの予算をかけるのかを無視することはできません。使用するツールや、どこまでを外注するかによって予算額は変わってきます。もちろん、外注の範囲が広ければその分だけ予算が高くなります。

あらかじめ必要な予算を把握しておき、社内の決裁者に了解をもらっておくようにしましょう。予算を決定する際は、オウンドメディアの改修費用なども見込んでおくことをおすすめします。

オウンドメディアの構築の仕方

ここでは、オウンドメディアの構築の仕方について解説します。構築の仕方は、自社で構築するか、制作会社に依頼するかの2つに大別されますが、それぞれについて詳しく解説するので、ぜひ参考にしてみてください。

CMSを使って自分で構築する

CMS（Contents Management System）を活用して、自社でオウンドメディアを構築するという方法があります。CMSというのは、ホームページのコンテンツ（テキストや画像）、デザイン・レイアウト情報（テンプレート）などを保存・管理するシステムのことを指します。

無料のCMSと有料のものがあるので、それぞれを使ったオウンドメディアの構築の仕方について解説します。

無料CMS

無料CMSの代表ともいえる存在がWordPress（ワードプレス）です。世界的に普及しており、全世界のサイトの約3分の1がWordPressによって作られているとも言われます。SEO対策もしやすく、カスタマイズ性にも優れているのが特徴です。

CMSとしての利用料は無料ですが、独自のドメインで運用していくのであれば、サーバー代やドメイン代が必要になる点に注意が必要です。

WordPressによるオウンドメディア構築に興味のある方は、こちらの記事もご覧ください。

初心者必見！WordPressでホームページを制作する手順

有料CMS

有料のCMSを使ってオウンドメディアを構築するという方法もあります。「フルスクラッチ型」や「商用パッケージ型」に分類されるCMSの多くは有料です。例えば、シックス・アパート株式会社が開発した「Movable Type」は商用パッケージ型に分類される有料CMSです。

有料CMSにしかない機能が必要な場合などに利用を検討してみましょう。有料の場合は、CMSを提供している会社から手厚いサポートを受けられるプランが用意されていることもあります。

制作会社に依頼する

オウンドメディアの構築・運用を社内リソースだけで進めるのが難しい場合、外部の制作会社に依頼するという方法があります。制作会社に依頼すれば、費用はかかりますが、自社の人的リソースを削らずにオウンドメディアを構築・運用することが可能です。

専門的な知識やノウハウを持っている制作会社に依頼すれば、構築後の成果も期待しやすくなります。決して全てを外注する必要はなく、例えば、構築までは制作会社に行ってもらい、以降の運用は自社で進めるというやり方もあります。

予算や社内のリソースを考慮したうえで、外部の制作会社に依頼するか、依頼するとしたらどこまでの範囲をお願いするかを決定しましょう。

オウンドメディア構築の費用内訳と相場

オウンドメディアを構築するためには、費用がかかります。ここでは、オウンドメディア構築にはどのような費用がかかるのか、どれくらいの相場なのかについて解説します。

サーバー代

オウンドメディアを構築するには、サーバーが必要不可欠です。サーバーというのは、ホームページを格納する場所です。ホームページを家とするならば、サーバーは土地の役割を果たします。月額で数百円〜数千円あれば、レンタルサーバーを借りることができます。

借りるサーバーの容量や規模によって金額は変わり、容量が大きければその分だけ高額になります。ビジネスの規模が小さければ、月額数百円のプランで問題ありません。

ドメイン代

ドメインというのは、インターネット上の住所のようなものです。これを取得・使用するために費用がかかります。ドメイン代は大きく以下の23種類に分類されます。

①新規取得費用
新しくドメインを取得する際に必要な費用。1100円～数千円が相場となります。すでにドメインを保有しており、その配下にオウンドメディア用の新しいドメインを作成する場合、新規取得費用がかからない可能性もあります。

②更新費用
取得したドメインを使用し続けるための費用。相場は数千円程度です。新規取得から１年後には更新費用が必要になる場合が多く、支払わないとドメインが失効してしまう可能性もあります。

ドメインを新規に取得する場合、せっかくお金を支払うのですから、覚えやすいドメインだったり、オウンドメディアの名称と親和性があるものなどにすると愛着が湧くでしょう。

CMS料金

CMSには無料のものと有料のものとがあり、有料のCMSを使うと月額で数千円〜数万円程度の予算が必要になります。また、それとは別に初期費用もかかります。会社やプランによってはそれ以外にもランニングコストが必要になる場合もあるので、契約する前にしっかりと確認するようにしましょう。複数の会社やプランを比較することをおすすめします。

開発費用

オウンドメディアの構築を外部の制作会社に依頼する場合、開発費用が必要になります。開発費用はページ数によって変動し、ページ数が多くなれば、それだけ高額の予算が必要になります。

とはいうものの、採用サイトなどに比べるとシンプルな構造の場合が多いので、10ページで150万円程度が相場となります。もちろん、オリジナルのデザインパーツが多い、セミナー用のテンプレートが必要、講師や受講コースを記事に紐づけて自動出力したいなどのカスタマイズが必要になる場合、費用が相場より高額になる可能性があります。

運用費

オウンドメディアの運用を外部の制作会社に依頼した場合、運用費が必要になります。どの範囲までをお願いするかによって費用は変わりますが、月に10〜50万円程度がおおよその相場となります。

記事の執筆などのコンテンツ制作だけをお願いするのであれば、そこまで高額な費用はかかりません。記事制作は5〜10万円程度/1本、取材を伴った記事制作は8万円〜10万円程度1本が相場となります。アクセス解析やコンサルティングなどもお願いするのであれば、月に50万円程度の予算が必要になります。

運用費は制作会社によって大きく変わる場合もあるので、事前にしっかりと確認しておくようにしましょう。

オウンドメディアを構築する際の制作会社の選び方

オウンドメディアの構築を外部の制作会社に依頼するというのは、決して珍しいことではありません。しかし、どのように制作会社を選べば良いか分からないという場合もあるでしょう。ここでは、オウンドメディアの構築を行う制作会社の3つの選び方について解説します。

実績

まずは制作会社の実績を参考にしましょう。実績を把握することで、その制作会社がどのレベルのホームページを構築できるのかが見えてくるはずです。実績をチェックする際のポイントとしては、以下の3つが重要となります。

①自社の要件や業界に近い制作実績があるか
自社が構築しようと考えているオウンドメディアの要件と近い制作実績があれば、その経験を活かして質の高い構築を行ってくれる可能性があります。また、同業他社のホームページを作ったなどの実績があれば、業界に関する情報・知識を持っているはずですから、それを活用してもらえるでしょう。

②有名な会社の制作実績の有無
誰もが知っている有名企業のホームページを制作したなどの実績があれば、一定の信頼を置いて良いでしょう。もちろん、制作会社の営業が「大手の〇〇株式会社の案件を手がけたことがあります」と言っただけで信頼して良いわけではありません。それだけでは、どのレベルで関わったかが分からないからです。有名企業のホームページのどのような部分を手がけたのかを確認するようにしましょう。

③実績の有無だけでなく制作時に注力したポイントなどの中身
実績の有無は非常に重要ですが、ホームページ制作時にどのような点に注力したのかも大切です。そこを確認することによって、その制作会社がどの部分を重視しているのかが分かります。例えば、オウンドメディアのデザインにこだわりたいと考えているのであれば「ホームページのデザインに注力しています」という制作会社との相性が良いはずです。

対応範囲

ホームページ制作会社といっても、様々な会社があります。会社によって対応できる範囲が異なるので、しっかりと確認するようにしましょう。特に以下の3つに対応できるかどうかが重要になります。

①運用・保守の有無
デザインやコンテンツの作成は行うものの、運用や保守は対応の範囲外という制作会社も少なくありません。そのような制作会社に依頼すると、運用や保守は自社で行うか、別の会社に依頼する必要があります。

②集客までのサポートの有無
制作会社の中には、オウンドメディアを通じた集客のサポートも行っている会社があります。自社のリソースが厳しく、たとえオウンドメディアを構築したとしても集客のためのプロモーションなど行う余力がないという場合、このような制作会社に依頼することを検討してみましょう。

③修正対応の有無
制作会社が一発で完璧なオウンドメディアを構築するという保証はありません。基本的にはなにかしらの修正が必要になると考えておいた方が良いでしょう。契約を締結する前に、修正は行ってくれるのか、追加変更が必要になった場合の費用目安などを確認しておくのがおすすめです。

得意領域

制作会社によって、それぞれ得意な領域があります。デザインに強い会社もあれば、システムやマーケティングに強い会社もあります。オウンドメディアのどこに重きを置きたいか、自社で対応できないのはどの領域なのかを考慮したうえで、どの制作会社に依頼するか決定しましょう。

フライングハイワークスは、大規模なシステムを組み込んだオウンドメディア制作を得意としています。制作実績は以下リンク先からご覧ください。

【デザイン性を重視したオウンドメディア】

• リビングデザインセンターOZONE　LIFE style
• インテリアを楽しむ　アズスク
• スプラッシュトップ　ブログ

【システム構築を含む制作を行ったオウンドメディア】

• 渋滞情報サイト　ATiS
• 中小企業の未来をサポート　MSコンパス
• 医院開業バンク

まとめ

この記事では、オウンドメディアを構築するための方法や重視すべきポイント、費用相場などについて解説してきました。オウンドメディア構築を行う制作会社の選び方についても説明しているので、ぜひ参考にしてください。

フライング・ハイ・ワークスでは、これまでに様々なオウンドメディアを制作してきました。豊富な制作実績がありますから、お客様に合わせたご提案が可能です

オウンドメディアでお悩みの際は、豊富な実績とノウハウを持つフライング・ハイ・ワークスへ、ぜひお問い合わせください。

500点以上のフライング・ハイ・ワークスの制作実績はこちらから。

The post オウンドメディアを構築するには｜事前に検討すべきポイント費用相場などを紹介 first appeared on FHWノート.

この記事では、これからWordPress（ワードプレス）でホームページを制作しようと考えている方を対象に、どのような手順で制作すれば良いのかを解説します。事前の準備やホームページ公開後のメンテナンスなどについても紹介するので、ぜひ参考にしてみてください。

ホームページ制作前の準備

ホームページを制作するからには、できるだけ大きな成果を得たいもの。そのために重要なのは、制作前の準備です。ここでは、ホームページを制作する前に行うべき3つの準備について解説します。

ホームページの目的を設定する

まずは、ホームページを制作する目的を設定しましょう。ひと言に「ホームページ」といっても、様々な種類があります。例えば、自社のブランドをより多くの人に認知してもらうのが目的なら、制作するのは「ブランドサイト」ですし、自社で働いてくれる人材を募集するのが目的なら「採用サイト」を制作する必要があります。商品を購入してもらいたいのであれば「ECサイト」を作ります。

自社採用サイトではなく、求人サービスサイトの制作を考えている方は、こちらの記事も参考にしてみてください。

求人サイトを構築するシステムとは？成功させるためのポイントを解説 | FH_BLOG | 東京のホームページ制作・Web制作会社 フライング・ハイ・ワークス

ページ構成を考える

ホームページの目的を設定したら、次はページ構成を考えましょう。構成というのは、ホームページの内容やページ数を決めることです。具体的には、どのようなホームページにするかをツリーで示した「サイトマップ」を作成し、ホームページの階層を決定します。

サイトマップは、ホームページを作るための設計図のような存在です。「不必要なページがないか」や「階層が深くなりすぎていないか」を把握するためにも、サイトマップが必要不可欠です。しっかりとしたサイトマップを作り、目的を達成できるホームページを作りましょう。

必要な素材を準備する

次にやっておきたいのが、ホームページを制作するのに必要な素材（コンテンツ）を準備することです。具体的には、テキスト（文章）や画像のことを指します。ブランドサイトを作るのに商品のキャッチコピーや説明文といったテキストは必要不可欠ですし、採用サイトには社長のメッセージ文などを入れるのが一般的です。

もちろん、テキスト以外の情報も必要です。商品写真や会社のロゴなどの画像を加えることによって、より充実したホームページとなります。採用サイトの場合、オフィスの写真などを使用することで入社後の働き方をイメージしやすくしています。

WordPressでホームページを制作する具体的な手順

ここでは、実際にWordPressでホームページを制作するための具体的な手順について解説します。できるだけ効率良く制作するためにも、適切な手順で進める必要があります。手順を7つに分けて解説するので、ぜひ参考にしてみてください。

レンタルサーバーの契約

まずはレンタルサーバーを契約しましょう。サーバーというのは、WordPressで制作したホームページを格納する場所です。ホームページを家とするならば、サーバーは土地の役割を果たします。基本的にはホームページを作る際には、サーバーが必要です。

自社でサーバーを構築するというやり方もありますが、非常にコストがかかるのでおすすめしません。WordPress専用のプランを用意しているレンタルサーバー会社もあるので、よく吟味したうえで契約しましょう。

ドメイン取得

レンタルサーバーを契約したら、次はドメインを取得します。ドメインというのは、インターネット上の住所のようなものです。ドメインはアルファベットや記号の羅列で表現されます。「https://～」という表記を見たことがありませんか？「～」の部分に当てはまるのがドメインです。

レンタルサーバーを契約すれば、自由にドメインを決定することができます。すでに利用されているドメインと重複しないように注意して、ホームページのドメインを決めましょう。

WordPressのインストール

次はいよいよWordPressをサーバーにインストールします。「自動インストール」と「手動インストール」の2種類がありますが、自動インストールがおすすめです。

レンタルサーバーを契約する段階で、自動インストールできるものを選ぶようにしましょう。とはいうものの、WordPressを利用できるほぼ全てのレンタルサーバーは自動インストールに対応しているので心配はいりません。マニュアル通りに進めれば、初心者でも簡単にWordPressをインストールできます。手動インストールは初心者に分かりにくい場合が多く、おすすめできません。

インストールが終わったら、まずは実際にWordPressにログインしてみましょう。インストール時にユーザー名とパスワードを決めるので、それを入力すればログインすることができます。

WordPressのログイン画面

SSLの設定

WordPressをインストールしたら、SSLを設定しましょう。SSLは「Secure Socket Layer」の略で、インターネット上の様々なやり取りを暗号化する仕組みのことを指します。SSLの設定がされているurlは「http」ではなく「https」で表示されるのが特徴です。

まずはレンタルサーバー側でSSLを設定するための証明書を取得し、その後にWordPressでSSLを設定します。レンタルサーバーには無料と有料のSSLがありますが、基本的には無料のSSLで問題ありません。

テーマの選定とインストール

次はWordPressにログインし、テーマを選定します。テーマというのは、ホームページのデザインを決めるテンプレートのようなものです。テーマをインストールすることによって、初心者の方でもデザイン性の高いホームページを制作することができます。テーマには無料のものと有料のものとがあります。「スマートフォンに対応しているか」や「テーマに関する情報が多いか」などを基準にテーマを選びましょう。

WordPressのテーマを選定する画面

WordPressの初期設定

WordPressにテキストや画像といったコンテンツを入れる前に、やっておきたいことがあります。それがWordPressの初期設定です。以下にやっておくべき初期設定を列挙します。

• WordPressアドレスとサイトアドレスが「https」になっているか確認する。
• サイトのタイトルとキャッチフレーズを決める。
• 表示設定の「ホームぺージの表示」をトップぺージ用の固定ぺージに変更する。
• 「ディスカッション」でコメント機能を変更する（企業のHPならコメントをオフにするのがおすすめ）。
• パーマリンク構造を変更する（「投稿名」にするのがおすすめ）。
• プライバシーポリシーの紐づけを設定する。
• 「ブログ上の表示名」を変更する。
• パスワードを強力なものに変更する。
• 「固定ぺージ一覧」から不要なぺージを削除する。
• 「投稿一覧」から不要なページを削除する。
• ウィジェット機能でWordPressメタ情報を削除する。
• 必要なプラグインをインストールする。
• 不要なプラグインを削除する。
• 投稿のカテゴリを設定する。
• バックアップを取得しておく。

このように列挙すると「やることが多い」と感じるかも知れませんが、一つひとつの作業はそこまで複雑ではありません。WordPressの初期設定は時間もかからないので、面倒臭がらずにやってみましょう。

コンテンツの作成とデザイン

いよいよコンテンツの作成とホームページのデザインに取りかかります。事前に考えたページ構成をもとに進めていきましょう。コンテンツの作成やデザインで使用するWordPressの機能は主に以下の3つとなります。

1. 外観
   メニューやロゴといった、ホームページの基礎となる部分を編集・調整する機能。
   
2. 固定ページ
   会社概要や事業内容、社長のメッセージといったホームページの中身を編集・調整する機能。
3. 投稿
   コラムやニュース、商品情報といったブログ（投稿）を編集・調整する機能。

WordPressには、直感的にライティングや画像の挿入を行える「ブロックエディタ」と、タグなどで設定を行う「クラシックエディタ」があります。後者の方が高度な編集が可能な場合もありますが、少し難易度が高いので、初心者の方はブロックエディタを使用することをおすすめします。

これが終われば、いよいよホームページの公開となります。

サイト公開後のメンテナンス

ここでは、WordPressで作成したホームページを公開した後のメンテナンスについて解説します。より価値のあるホームページにするためには、公開後のメンテナンスが欠かせません。手間と時間をかけて作ったホームページだからこそ、やるべきことを着実に行いましょう。

テーマとプラグインのアップデート

WordPress本体だけではなく、テーマやプラグインは定期的にアップデートし、最新の状態にしておきましょう。最新の状態にせずに放置していると、ページを改ざんされたり、顧客の情報が抜き取られるといった事態に繋がりかねません。テーマやプラグインを古いままにしておくのは、セキュリティリスクであると認識しておく必要があります。

定期的なコンテンツ更新

WordPressで作成したコンテンツを定期的に更新しておくことも重要です。いつまでもコンテンツがそのままだと、ユーザー側の関心やトレンドの変化についていけませんし、会社の信用問題にもなります。例えば、販売を開始してから何年も経っている商品の画像に「新商品」のロゴがあれば違和感があるでしょう。そのような場合は画像を編集し、そのロゴを取り除きましょう。更新の方法ですが、各投稿もしくは固定ページで編集を行い、更新ボタンを押すことで完了となります。

サイトのアクセス解析

サイトのアクセス解析を行うことも重要です。GoogleアナリティクスやGoogleサーチコンソールなどのツールを活用し、どのようなユーザーがどのような経路でホームページを訪れ、どのページを閲覧しているかなどを把握しましょう。

アクセス解析の結果から、ホームページの課題が見えてくる場合もあります。例えば「商品ページの滞在時間が短い」という結果が出たなら、商品の説明文をもっと読みやすいものに変更するなどの対策をとることができます。

よくある質問

ここでは、WordPressに関するよくある質問を2つ紹介します。初心者の方であれば必ずといって良いほど気になることだと思うので、ぜひ参考にしてみてください。

WordPressは無料版もあるのか？

あります。Woropressにはレンタルサーバーを契約して使う「Wordpress.org」と無料で使える「Wordpress.com」が存在します。2つの違いを以下の表でまとめています。

費用を抑える方法は、WordPressの選定だけではありません。たとえば、デザインやコンテンツの作成などを全て自社で行えば、費用を抑えてホームページを作成することが可能です。しかし、どうしても手間と時間がかかります。制作会社に依頼すれば、デザインやコンテンツの作成などを丸ごとお願いすることも可能です。

初心者におすすめのテーマは？

WordPressにはいくつものテーマが用意されており、初心者の方は「どれを使えば良いか分からない」と悩んでしまうことも珍しくありません。

ここでは、初心者におすすめのテーマを5つ紹介します。

Cocoon（コクーン）

Xeory Extension（セオリー エクステンション）

Luxeritas（ルクセリタス）

THE THOR（ザ・トール）

AFFINGER（アフィンガー）

テンプレートではなく、オリジナリティのあるサイトにしたい。ブランディングを重視し世界観を作りたいなどの目的がある場合にはフライング・ハイ・ワークスにご相談ください。

まとめ

この記事では、WordPressを使ってホームページを制作する手順について解説しました。事前になにを準備すべきか、どのような手順でホームページを作成するのか、公開後にはどのようなメンテナンスを行うかなどを紹介したので、参考にしていただければ幸いです。

フライング・ハイ・ワークスでは、これまでに様々なホームページをWordPressで制作してきました。豊富な制作実績がありますから、お客様に合わせたご提案が可能です。

ホームページでお悩みの際は、豊富な実績とノウハウを持つフライング・ハイ・ワークスへ、ぜひお問い合わせください。

500点以上のフライング・ハイ・ワークスの制作実績はこちらから。

The post 初心者必見！WordPressでホームページを制作する手順 first appeared on FHWノート.

昨年の秋ごろからか、自分のFTP環境で一切ファイルの上げ下げができなくなる事象が発生しました。環境は下記の通りです。

• OS：Windows11
• FTPソフト：PhpStorm、FFFTP、FileZilla
• Webサーバー：CPI

弊社はWeb制作会社なので、お客さまにWebサーバーを進める際は慣習的にCPIを進めることが多く、今回のお客さまもそのCPIサーバーでした。

なぜCPIサーバーを言及するかというと、日々色んなお客さまのWebサーバーに接続することがありますが、Xserverなど他のサーバーではまだこの事象にであっていないためです。

解決までに8カ月近くかかった

最初の頃は、特に大量のファイルをアップロードした後に、全てのFTPソフトの接続ができなくなることがあったのですが、出会う頻度も低く、翌日以降には解消しているので、特に大きな問題としては取り上げていませんでした。

ただ、引き続き、この事象に出会うこともあり、その度に検索サイトやChatGPTなどで調べてみるのですが、具体的な回答を得ることができず、そのたびにあきらめていました。

そして、今年の4月ごろから、切羽詰まった状況が増え、CPIにも問合せてみたりしましたが、接続履歴がないという回答だったり、WebからアップロードできるCPIのサービスでは、接続できてしまっていたので、やはり具体的な回答を得ることができませんでした。

自分のPCを疑う

自分のPCでの特殊な設定が何か問題を起こしているのではないか？という疑問は常にありましたが、どうやって調べればいいのか、皆目見当がつかない状態です。

下記はFFFTPの結果です。

----------------------------
FTP over Explicit SSL/TLS (FTPES)を使用します.
ホスト xxxx.wwwww.net (00.00.000.00:21) に接続しています.
接続しました.
接続できません.
## Skt=1300 : Socket closed.

FileZillaは下記のような状況です

----------------------------
状態:	flying-h.co.jp のアドレスを解決中
状態:	00.00.000.00:21 に接続中...
状態:	接続を確立しました。ウェルカム メッセージを待っています...
エラー:	サーバーによって接続が閉じられました
エラー:	サーバーに接続できません
状態:	再試行を待機中...
----------------------------------------------------

八方ふさがりな日々の中、またその事象に会い、今度は、社内の別の人にそのWebサーバーにアクセスしてもらいましたが、やはり、他のPCでもアクセスすることができず、さらに、接続プロバイダーの疑いも視野に入ってくる始末です。

netstatコマンドに出会う

日々色々な角度からChatGPTに問い合わせてみるのですが、なかなか良い回答にたどりつけなかったそんなある日、自分のFTPの接続状況を確認する方法をさがして、単にその接続を強制的に削除すれば良いのではないか？という考えから、「netstat」で自分のPCのポート21番への接続状況を確認する方法にたどり着きました。

このコマンドの実行は、「Windows PowerShell」で行いました。

このコマンドにいくつかオプションをつけて実行しました。

> netstat -ano | findstr :21

TCP/IP通信の状態を調べる「netstat」コマンドに、オプションで、
全件表示の「-a」オプション
IPアドレスなど数値形式で表示する「-n」オプション
各接続のプロセスIDを表示する「-o」オプション
そして、パイプの後にポート番号「:21」を含むテキストのみを表示する絞り込みのオプションを入れて、表示してみたところ

> netstat -ano | findstr :21
  TCP         192.168.X.XX:63808     00.00.000.00:21        ESTABLISHED     4984
  TCP         192.168.X.XX:63808     00.00.000.00:21        ESTABLISHED     4984
  TCP         192.168.X.XX:63808     11.11.111.11:21        CLOSE_WAIT     4984
  TCP         192.168.X.XX:63808     22.22.222.22:21        CLOSE_WAIT     4984

上記のような結果です。

全て同じプロセスID「4984」を示しています。そして、接続できないIPアドレス「00.00.000.00」には、二つの「ESTABLISHED」（TCP接続が確立して通信している状態）があります。

そこで、このプロセスID「4984」を「タスクマネージャー」（Windowsでは、下の黒いところで右クリックして表示することができる）の「詳細」タブの「PID」の項目で調べてみると、このプロセス「4984」は、「phpstorm64.exe」だったのです。

つまり、最初の解決方法として、再起動までしなくても、PhpStormの全ウインドウを閉じれば、解決することがわかりました。

少しずつ見えてきた

ここでこの事象は、自分の環境の特殊性もあるかもしれません。
また、下記のような心理的な障害も、課題解決を遅らせた要因かもしれません。

• 常に複数のプロジェクトに対応するため、複数のPhpStormを立ち上げている
• 再起動するのが面倒（常に表示しておきたいSluckやSouceTreeなど複数のアプリケーションがあるため、そのたびに表示処理を行うのが面倒だった）

そして、CPI及びPhpStormに言及したのは、この二つの接続があることで、接続できなくなっているということです。

CPIの接続制限数か？

なぜ、3つめや4つめが可能ではないのか？

PhpStormを立ち上げた状態で、FFFTPを立ち上げれば、二つ目の接続が表示されるが、さらにFileZillaを立ち上げた場合には、FileZillaは接続不可となります。
そして、FFFTPを閉じれば、FileZillaの接続ができるようになります。

もう一つ、以前社内で別のパソコンが接続できなかったことは、全ての接続が、自分のパソコンのローカルIPアドレス「192.168.X.XX」と紐づいているために、他のPCが接続できなかったのではないか？という推測も成り立ちます。

つまり、CPIの接続制限数があるのではないか？という疑問です。

以前、CPIさんにこの接続制限数について問い合わせましたが、非公開であると言われました･･･。

PhpStormの設定か？

FTPが一切できなくなった時は、必ず、同じIPアドレスに対し、2つの接続があり、それが同じプロセス番号、つまり、phpstorm.exeのプロセスに向いています。

上記の2つまでであれば、これをPhpStormが独占してしまっている状態となり、また、その独占により自ら不具合が起きているということです。

大体この事象が起きるのは、PhpStormを立ち上げている状態で、大量のファイルをアップロードをFileZillaやFFFTPで行った後に起こるという体感です。

このアップロード中にPhpStormが接続を維持しようとすることで起きているような気がします。

また、この事象が起き始めたのは、PhpStormの自動アップグレードによる時期的な問題もあるかもしれません。

まとめ

完全解決には至っていませんが、あとは、PhpStormの接続設定などを見直すことで、解消するかもしれないというところまでたどり着きました。

その回答については、いずれ書くかもしれませんが、書かないかもしれません（笑）

ただ、ここまでたどり着けば、自分のPC上の設定で解決できることがわかりましたので、皆様のお役に立てるのではないかと思い、書いてみた次第です。

また、何か変な事象にであえば、書きたいと思います！

文責：フライング・ハイ・ワークス代表 松田 治人（まつだ はるひと）
会社では、Laravelを中心としたエンジニアとして働いており、これまでに50本以上のLaravelによる東京でWebシステムの制作やホームページ制作をしています。
エンジニアとして弊社で働きたい方、お仕事のご相談など、お待ちしております。

The post Webシステム制作 – PhpStormを使っていて全てのFTPソフトが使えなくなったとき first appeared on FHWノート.

画像リサイズには、InterventionImage ライブラリを使用しています。こちらの設定方法については、各詳細ページでご確認ください。

今回は、多数の詳細ページが発生するサイトにおいて、画像を色んな人が投稿できるのですが、この画像がスマホだったり、デジカメだったりと、様々なファイルサイズの画像が投稿されており、表示に負荷がかかってきたので、これらを一気にリサイズする処理を作ってみました。

今回は約4000ディレクトリあり、それぞれ平均で10個のファイルがはいっており、それらの画像の幅を一律で980pxにします。

処理はCommandを使って処理することにしました。

まずは完成版が下記になります。

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\Storage;
use InterventionImage;

class resizeImages extends Command
{
	protected $signature = 'command:resizeImages';

	protected $description = '大きいサイズの画像をリサイズ';

	public function __construct()
	{
		parent::__construct();
	}

	public function handle()
	{
	    // ディレクトリ一覧の取得
	    $directories = Storage::disk('images')->directories();
	    // ディレクトリを一つずつループ
	    foreach($directories as $d) {
	        // ディレクトリ内のファイル一覧を取得
	        $files = Storage::disk('images')->files($d);
	        // ファイルを一つずつループ
	        foreach($files as $f) {
	            // ファイルのパスを取得
	            $path = Storage::disk('images')->path($f);
	            try {
    	            // 画像情報を取得
	                $image_size = getimagesize($path);
	            } catch (\Exception $e) {
                  // 画像情報を取得できない場合
	                continue;
	            }
	            try {
    	            // 画像の幅が980pxに満たない場合は無視
	                if($image_size[0] <= 980) continue;
	            } catch (\Exception $e) {
	                // $image_sizeがfalseを返す場合
	                continue;
	            }
              try {
                  InterventionImage::make($path)->resize(980, null, function ($constraint) {
                      // 縦横比を保持したままにする
                      $constraint->aspectRatio();
                      // 小さい画像は大きくしない
                      $constraint->upsize();
                  })->save($path);
              } catch (\Exception $e) {
                  // InterventionImageがdecodeできない場合
                  continue;
              }
	        }
	    }
	}

今回は、Storageファサードを多用しています。

Storageのdiskにある文字列は、config/filesystem.phpで「images」というdiskを設定した想定です。

こういう処理の場合の肝となるのは、エラーが出た場合の処理だと思います。

この処理は、毎日深夜に回し、新しく追加された画像についても処理されるようにしました。

いますぐ利用したい場合には、SSHで接続できるのであれば、Laravelのartisanコマンドが利用できるディレクトリまで移動して、コマンドラインで下記のように入力します。

$ cd /var/www/laravel
$ php artisan
Laravel Framework 9.28.0

Usage:
  command [options] [arguments]

Options:
～
 cache
  cache:clear                   Flush the application cache
  cache:forget                  Remove an item from the cache
  cache:table                   Create a migration for the cache database table
 command
  command:resizeImages          大きいサイズの画像をリサイズ
～

laravelのディレクトリは環境によってことなるとおもいますが、php artisanと実行し、コマンド一覧が表示されれば、コマンドから実行できます。

cacheのすぐ下にcommandのところに作成したコマンドが表示されているはずです。

そこで下記のようにコマンドを入力します。

$ php artisan command:resizeImages

これで処理が開始されます。いきなり全処理が怖い場合には、ddなどを利用して状況を確認しながらすすめるといいと思います。

また、Controllerから実行したい場合には下記のようにControllerに記述します。

～
use Illuminate\Support\Facades\Artisan;

class HomeController extends Controller
{
    public function index()
    {
        Artisan::call('command:resizeImages');
    }
}

これによりindexにアクセスすれば、処理が開始されます。ただ、phpの設定などにより重い処理はTimeoutが発生する場合がありますが、このエラーについては、エラー自体を検索すれば各所で説明があると思います。

今回の場合は、scheduleでコマンドを設定し、深夜に処理をするようにしました。

<?php

namespace App\Console;

use Illuminate\Console\Scheduling\Schedule;
use Illuminate\Foundation\Console\Kernel as ConsoleKernel;

class Kernel extends ConsoleKernel
{
    protected function schedule(Schedule $schedule)
    {
        $schedule->command('command:resizeImages')
                 ->dailyAt('4:00')
                 ->withoutOverlapping()
                 ->appendOutputTo(storage_path('logs/resize_images.log'));
    }

    protected function commands()
    {
        $this->load(__DIR__.'/Commands');

        require base_path('routes/console.php');
    }
}

これで毎朝4時に処理がおこなわれます。

withoutOverlapping()は多重起動が起きないようにする設定ですが、毎回癖のようにいれているだけで、必要はないと思います。

また、appendOutputTo()でログを吐き出します。深夜の処理で止まってしまった場合に、storage/logs/ディレクトリに「resize_images.log」というファイル名で吐き出されます。

まとめ

こういう処理は日々発生します。後で再利用するためにメモ書きとして残しました。レアなケースですが何かのお役に立てれば！！

文責：フライング・ハイ・ワークス代表 松田 治人（まつだ はるひと）
会社では、Laravelを中心としたエンジニアとして働いており、これまでに50本以上のLaravelによる東京でWebシステムの制作やホームページ制作をしています。
エンジニアとして弊社で働きたい方、お仕事のご相談など、お待ちしております。

The post 大量の画像のリサイズをする処理 first appeared on FHWノート.