Laravel9(最新バージョン)はレンタルサーバーにはまだ早すぎた!(2022年4月時点) – PHPバージョンに注意!

別のブログでご紹介しましたとおり、当オフィスで開発した官公需情報検索サイト「BID SEARCH」をLaravelに移行しました。

この際、当初Laravelの最新版でありますバージョン9をインストールしたのですが、これを実際に私が使っているネットオウルサーバー(PHP:7.4.25)にデプロイしたところエラーが。

どうやら、Laravel9の動作環境はPHP8.0.2が必要!

https://readouble.com/laravel/9.x/ja/upgrade.html

私が使っているネットオウルで使える最も高いPHPバージョンでも8.0.12なんです。

当面はLaravel8を使うことになりそうです。

PHPの基本とMVCが理解できれば簡単! – PHPフレームワークLaravel

ウェブの世界にはウェブアプリケーション構築の為のプログラム言語がたくさんあり、また、そのプログラム言語を用いてウェブアプリケーションを開発するためのフレームも世の中にたくさんありますが、今回はPHP言語でウェブアプリケーション開発に便利な「Laravel」をご紹介いたします。

少し前からMVCの考え方を勉強しており、理解はできたので、今回ようやくLaravelを使ったウェブアプリケーション制作に取り組んでみました。

と言いましても、一から何かを開発したとかではなく、少し前のブログでも制作事例としてご紹介しておりましたが、とある行政機関様のAPIを利用した「官公需情報検索サイト BID SEARCH」をLaravelに移行してみたものであります。

これをLaravel8へと移行した

おススメの理由その1 - 分かりやすく、情報も豊富

先にご紹介した私が開発したサイトは、完全生のPHPでコーディングしたサイトでした。

それを実際にLaravelのインストールから、参考書や公式ドキュメントサイトを参照しつつ、実際にLaravelに移行してみて、「なんだ、意外と簡単!」と感じました。

これは、元のソースは一応クラス構造化しておりましたので、ビューやアクションメソッドに書き写しやすかったのもありますが、それ以外に、Laravelは詳しく解説された参考書も多く、また、公式ドキュメントサイトの内容も日本語サイトがあって意外と情報を得やすいのがあるかもしれません。

同じフレームワークで「Vue.js」も少し取り組んでおりますが、こちらは、そもそもJavascriptがベースのものという事もあってとっつきにくく(私の主観でしょうか?)、参考書も本当に簡単なアプリが作れる程度の内容でありまして、本格的に開発できるようになるまで時間がかかるものと思われます。

ただ、あくまでもLaqravelはMVCモデルに沿ったフレームワークですので、MVCの考え方が分かっていない方には難しいかもしれません。

おススメの理由その2 - セキュリティ機能の実装が容易、使いやすい

Laravelはセキュリティ対策を一から実装せずに済みます。

PHP言語を使う場面にフォーム開発があります。そして、このフォーム送信ですがページ遷移タイプのアプリケーションですとCSRF(クロスサイトフォージェリ)という脆弱性への対策が必須でありました。

勿論、Laravelにおきましても必須ではありますが、コーディング量が格段に少なくなります。

セッションスタートし、フォームの要素に隠しinputフォームを実装し、そのバリューには乱数で生成したトークンを設定し、同時に、このトークンをセッションにも渡し、また、遷移先ページでもセッションスタートやPOSTデータの受け取り、セッションの受け取り、そしてトークンの比較といった作業が必要であったのが、larabelの場合フォーム内に

<input type=”hidden” name=”_token” value=”{{ csrf_token() }}”>

この一行を加えるだけで、セッション及びポストデータにも乱数かされたトークンが自動的に発行されます。セッションのスタートや乱数の生成等も必要なし。

一部見慣れぬ記述もありますが、変数の埋め込みや受け渡しも参考書など読めば理解できますし、慣れれば簡単です。

また、Laravelではビューテンプレートに、テンプレートエンジン「Blade」が使えます。ビューテンプレートにBladeを使えば、上記トークン生成用input要素の記述がさらに簡単となり、

@csrf

この4文字の記載だけで済みます。

Requestデータやセッションデータに簡単にアクセスできるメソッドもあります。

それ例外にも、バリデーションやログイン認証機能の実装も可能なフレームワークです。

まとめ

実際にちょっとしたウェブアプリケーションに使ってみたわけですが、意外と簡単に使えた事にびっくりです。実際、参考書や公式ドキュメント等参考にしつつ、丸一日で、生のPHPからLaravelに移行できました。

こんな簡単で便利なのであれば、今後もっと活用していきたいと思った次第です。

PHPMailerでGmailのSMTPサーバーを経由してメール送信する

先のブログのとおり、PHPMailerというライブラリーを使えば外部SMTPサーバーを経由してメールの送信も容易となります。

ただ、GmailのSMTPサーバーを使ってメール送信する場合は簡単ではありません。

まず、Gmailの送信メールサーバー(SMTPサーバー)経由でメール送信するということは、グーグルのサーバーにログインするという事です。

グーグルアカウントをお持ちの方は経験があると思いますが、「不審なアクティビティが・・」とか、「信頼性の低いアプリが・・」とかメッセージが出た経験があるのではないでしょうか。

これは、グーグルで定義されている「安全性の低いアプリケーション」がグーグルにログインしようとする際に表示されるものです。

そして、ウェブ上のメールフォーム等のアプリは、グーグルでは「安全性の低いアプリ」として定義されているんです。

そして、このような安全性の低いアプリケーションが、GmailのSMTPサーバーにログインしようとしても認証が下りないんです。

これは、メールアプリにGmailの正規のユーザーアカウントとパスワードを設定していても認証されないという事です。

ただ、勿論そのような場合の解決方法はグーグルにおいて公式に公開されております。

プリンタ、スキャナ、アプリからのメール送信 – Google Workspace 管理者 ヘルプ

上記ページの「Gmail SMTPサーバーを使用する」の部分を参照

つまり、安全性の低いアプリケーションでも、グーグルアカウントを有するユーザーが管理するアプリであればGmail SMTPサーバーに問題なくログインできるという事です。

グーグルアカウントを有する者が取得したアプリパスワードを与えられたアプリケーションに限り認証を許可されるということです。

PHPMailerにSMTP認証を設定する場合は、パスワードには通常のGmailパスワードではなく、このアプリパスワードを設定してあげて下さい。

その他、グーグルアカウントの管理コンソールにて、安全性の低いアプリを「有効」にすれば、自身で作成したメーラーにおいて、Gmail SMTPサーバーを経由可能となります。

PHPMailerでHTMLメールを送信する

先のブログでは、PHP言語のmail関数を用いてHTMLメール(デコメール)を送信する技術を解説いたしました。そして、メールを送信する技術としてMIME(マイム)という国際規格を知れば、HTMLメールどころか画像等のバイナリーデータの送信も可能であることもお伝えいたしました。

今回は、同じくPHP言語でHTMLメール(デコメール)を送信する技術のご紹介となりますが、今回はmail関数を使うのではなく、PHPMailerというメール送信用拡張ライブラリーを使う方法のご紹介となります。

PHP言語には、あらかじめメール送信用の関数が用意されています。mail()関数や、その拡張版のmb_send_mail()です。

しかし、これらあらかじめ用意されているメール送信用関数は機能的に低く、単なるプレーンテキスト形式のメールを送るだけならまだしも、HTML形式やバイナリーデータを送信しようとするならば、先のブログで解説したMIME規格に正確に準拠したコーディングが求められ、慎重さと手間が求められるものとなります。

PHP言語だけでなくその他プログラミング言語にはあらかじめ標準ライブラリー(DateTimeクラス等)というものが備わっており、様々な関数やクラスライブラリーが提供されてはおりますが、それ以外にもたくさんの開発者が拡張ライブラリーを提供しており、そのうちの一つにメール送信用の拡張ライブラリーとしてPHPMailerというライブラリーがあるわけです。

このPHPMailerを使う事のメリットですが、

  • 記述が簡潔になる
  • MIME規格を深く考えなくて済む
  • SMTP認証が可能

といったメリットがあります。

1.PHPMailerをダウンロードする

PHPMailerはこちらでダウンロードできます。

https://github.com/PHPMailer/PHPMailer

このPHPMailerのGitHubページからダウンロードできます。緑色のボタン「CODE」を押す→「Download ZIP」をクリック。これでダウンロードが開始されます。

PHPMailer-masterというファイル名のZIPファイルがダウンロードされます。

このZIPファイルを右クリック、メニューの中から「すべて展開」をクリックして解凍します。

解凍すると「PHPMailer-master」というフォルダができます。この中に同じフォルダ名の「PHPMailer-master」がありますのでこのフォルダーを取出し、メールプログラムと同じ階層に配置します。

例えば、メールプログラムがmail.phpの場合、

2.PHPMailerライブラリーを使ったサンプル

前回のブログの最後のサンプルをPHPMailerを使った場合に書き替えます。

<?php

//PHP設定
date_default_timezone_set('Asia/Tokyo');
mb_language("ja");
mb_internal_encoding("UTF-8");


//#################### PHPMailer設定 ###################
$mail_from = 'aaa@bbbbb.net';
$mail_to = 'ccc@ddddd.com';
$from_name = '送信者名';
$subject = 'PHPMailerでHTMLメールを送ります';
//#####################################################


//PHPMailer
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;

require_once("PHPMailer-master/src/Exception.php");
require_once("PHPMailer-master/src/PHPMailer.php");
require_once("PHPMailer-master/src/SMTP.php");


//PHPMailerのインスタンス生成
$decoMailer = new PHPMailer(true);


//必要に応じてエンコード
$from_name = mb_encode_mimeheader($from_name,'JIS','UTF-8');
$subject = mb_encode_mimeheader($subject,'JIS','UTF-8');


//メールボディデータ
$tmp =mb_convert_encoding('<p style="color:red; font-weight:bold;">PHPMailerを使ってHTMLメールを送っています</p>','JIS','UTF-8');
$body_html =$tmp;


//PHPMailerを稼働させる
try {
$decoMailer->CharSet = 'iso-2022-jp';
$decoMailer->Encoding = '7bit';

$decoMailer->setFrom($mail_from, $from_name);
$decoMailer->addAddress($mail_to);

$decoMailer->isHTML(true);
$decoMailer->Subject = $subject;
$decoMailer->Body = $body_html;

$decoMailer->AltBody = mb_convert_encoding('HTML非対応のメーラーに対する代替表示です(text/plain)','JIS','UTF-8');


//送信!
$decoMailer->send();?>

<script>
alert('送信が完了しました');
location.href='<?php echo $permalink; ?>';
</script>
<?php
}
catch (Exception $e) {?>
<script>
alert('送信ができませんでした:'.$decoMailer->ErrorInfo);
location.href='<?php echo $permalink; ?>';
</script>
<?php
}

PHPでHTMLメールを送信する – MIMEを知れば怖くない!

今進めているウェブアプリケーションの開発案件に、SPA(シングル・ページ・アプリケーション)型の診断サイトがあります。

そして、この診断サイトですが、アンケート型の設問に答えて行くと、最後に診断結果が受け取れるのですが、この診断結果ページのリンクはメールで届く仕様なんです。

ここで問題になるのが、URLリンク付きのメール、つまりHTMLメールの送信が必要なものとなります。

普段、何気にメーラーでメールを受信したり、送信したりしている一般ユーザーの方は、「そんなの当たり前じゃん!」と思うかもしれませんね。

でも、実はインターネットを利用したメールの送受信技術はとても奥深く、簡単ではないんです。

よくホームページに問い合わせフォームが設置されていますが、あれって大抵がHTML形式のメールは送れないんですよね。プレーンテキストタイプのメールフォームなんです。

メールのヘッダーを見て頂くと分かりますが、「Content-type」が「plain/text」になっている筈です。

実はインターネットを利用したメールの送受信の技術は、MIME(Multipurpose Internet Mail Extensions、通称マイム)という国際仕様に基づいて送受信しないといけません。

元々は、インターネットメールは、日本語や一般的なアルファベット以外の言語には対応しておらず、全てASCII文字(American Standard Code for Information Interchange)という、英語や西ヨーロッパ言語で使われるラテン文字を中心とした文字コードにしか対応していませんでした。

パソコンにおいて、バイトという容量の単位がありますが、1バイトは8ビットという基準が定められたのも、このASCIIコードが基準だからです。ASCIIコードで定められたアルファベットやその他記号(+ , – ! *等)を2進数で表現しようとすると8ビット(2の8乗とおり、256通り)必要だからです。半角文字は1バイトの理由です。

話がそれましたが、インターネットが始まった頃は、先のとおり、メールはASCII文字しか送れなかったわけです。また、画像や音声等のバイナリーデータも送信できませんでした。

しかし、これはASCIIコード文字体系以外の地域では非常に困りますし、インターネットの技術が発展するにつれて画像や音声も送信する必要も出てきたわけです。そこで考えられたのが先のMIMEという国際規格です。

MIMEでは本文を複数のパートに分割し、複数の種類のコンテンツを送信できるように考えられており、これをマルチパートフォーマットと呼びます。

また、MIME仕様で送信されたメールであると受信メーラーが判別できるように、メールヘッダーに記載する内容も仕様で決まっています。

また、メールヘッダーもMIMEメッセージヘッダとMIMEパートヘッダの二種類あり、MIMEメッセージヘッダがマルチパートフォーマット全体に適用され、MIMEパートヘッダはマルチパートフォーマットの各部分に記述の必要があります。

1.MIMEメッセージヘッダへの記載事項

いわゆるメールヘッダー(From、to、Reply-to、Subject等)以外に、MIME仕様独特のヘッダーを記載する必要があります。

Mime-Version: 1.0

MIME仕様でメールを送っているよ、という意味で、ヘッダーの冒頭に記載します。現在のバージョンは1.0しかありません。これはお決まりでそのまま記載します。

Content-Type: Multipart/Mixed

先のとおり、MIMEはマルチパート構成で複数の種類のデータを送信するわけですが、このマルチパートの構成(フォーマット)を示すための記述です。上の例では「Multipart/Mixed」にしていますが、これは、plain/textやHTML/text以外に、添付画像等のバイナリデータのパートを含んでいることを示します。

これ以外にも、

Content-Type: Multipart/Alternative

等があります。HTMLメールを送るだけならば、このContent-Type: Multipart/AlternativeでOKです。

他にもいくつかありますが、ここではHTMLメールの送信技術の解説なので割愛いたします。

このMIMEメッセージヘッダに記載するContent-Type(マルチパートのフォーマット)部分ですが、MIMEメッセージヘッダにおいては、このContent-Typeに並んで重要なパラメーターの記述が必要です。そのパラメーターとは、boudaryパラメーターです。

このboudaryパラメーターは、マルチパートの区切りを示す符号です。この符号は自由につけれます。以下、参考例。

Content-Type: Multipart/Alternative; boudary="exampleboudary"

後ほど使い方は記述しますが、このboudaryはマルチパートを区切るための符号です。

次に、ASCII文字以外の文字をどの符号方式にエンコードして送っているのかを受信メーラーに伝える必要があり、

Content-Transfer-Encoding: 7bit

のようなヘッダーの記載も必要です。上記の7bit以外にも、8bitやbase64といったエンコード方式もあります。このあたり、かなり文字コードに詳しくないとどれを選べばいいのか分からないと思います。今回はHTMLメールを送信する技術の解説ですので、今回は7bitにしましょう(とりあえず7bitで十分です)。

とりあえず、HTMLメールを送信する際のMIMEメッセージヘッダはこれだけでOKです。

2.MIMEパートヘッダへの記載事項

これは、各パートごとにヘッダーが必要な事を意味します。そのパートの中身が単なるテキストなのか、テキストはテキストでもHTML形式のテキストなのか、それとも画像なのかといったコンテンツの中身を示すために、先の1.MIMEメッセージヘッダと同じように、Content-Typeを記載します。ここで記載するContent-Typeは、マルチパート全体のフォーマットではなく、各部分のパートの中身のフォーマットを記載します。以下、記載例。

Content-Type: text/plain

これは一般的なテキストのみのメールの場合ですね。他に、

Content-Type: text/html

これはHTML形式のテキストであることを示します。HTMLメールはこの形式で送ります。

その他、

Content-Type: Image/Gif

このヘッダーがあるパートの中身はGIF画像であることを示します。いわゆる添付画像ですね。

MIMEメッセージヘッダにおいては、Content-Typeと並んでboudaryというパラメータを併記しましたが、MIMEパートヘッダには、そのパートの中身がtext/plainかtext/htmlの場合は、charsetというパラメーターの併記が必要です。

Content-Type: Text/HTML; charset=ISO-2022-JP

以上のように併記します。私は日本語圏の人間ですので、受け取る側も日本語圏です。なのでcharsetは日本語文字コードであるISO-2022-JP(いわゆるJISコード)を指定しているわけです。「JISコードでデータ送るよ!」と受信側メーラーに伝えているわけです。

その他、MIMEパートヘッダにはMIMEメッセージヘッダと同じようにエンコード方式の記載も必要です。エンコード方式の種類はMIMEメッセージヘッダで説明したとおり、7bit、8bit、base64等があります。パートの中身に応じてエンコード方式が異なりますが、HTMLメールを送信する場合は、MIMEメッセージヘッダと同じく、7bitでOKです。

Content-Transfer-Encoding: 7bit

これでOK。

3.文字コードのエンコードに注意

既に解説したとおり、インターネットメールの技術ではASCIIコードでしか送信できません。

いやおかしい、だからMIMEって仕様があるんでしょ?と思う方もいる筈です。確かに今や、インターネットメールはMIME仕様というASCIIコード以外の文字体系やバイナリーデータに対応した拡張された規格が流通しているので、ASCIIコード文字以外の文字やバイナリーも送信できます。しかし、これは日本語や画像を送る場合は、エンコードと言って文字コードをASCII文字列の並びに変換して送っているだけで、結局はASCIIコードでやり取りしています。

だから、先のメッセージヘッダやパートヘッダにはContent-Transfer-Encodingやcharsetといったパラメータで、受信側メーラーがデコード(復号化)できるようにエンコード(符号化)方式を記述するわけです。

そして、ヘッダーやメッセージボディ部分にASCII文字体系以外のデータ、例えば日本語やバイナリー等が存在するパートである場合、ヘッダーで指定したエンコード方式でエンコードしておかなくてはなりません。

ヘッダーで、文字コードをISO-2022-JPに指定しているのに、メッセージボディ部分の文字コードががUTF-8であった場合、受信したメーラーで文字化けします。

ヘッダーのエンコードで注意が必要なのは、SubjectやFrom、toの部分でしょうか。Subject、いわゆるメールのタイトルには普通日本語を使いますし、From部分にも送信者名を日本語で記載したりしますよね。

このような部分は文字コードの変換が必要となります。PHP言語では、メールヘッダー部分の文字コード変換には、mb_encode_mimeheader()という関数がありますのでこれを使います。

メッセージボディ部分は、HTMLメールの場合、基本的に全てmb_convert_encoding()という関数で、ヘッダーで指定した文字コード(今回のケースだとISO-2022-JP、つまりはJISコードですね)に変換します。

4.サンプル

HTMLメールを送信するサンプルです。

このサンプルは、MIME仕様に準拠しておりますので、一通りの環境で受信出来る筈です。ヤフーメールやGMAIL、ドコモやau、ソフトバンクまで。

一部受信出来ない環境は、メールサーバー間の相性や迷惑メールフィルターが原因として考えられます。

正しくMIME仕様で送ってもこればかりはどうしようもありません。

<?php
/* ##### ユーザーに応じて、送信元メールアドレス、送信者の名前を書き替えてください ##### */
$mail_from = 'aaa@bbbbb.net';
$mail_to = 'ccc@ddddd.com';
$mail_from_name = '送信者の名前';
$subject = 'HTML形式のテストメールです';
/* ###################################################################################### */

$mail_from =mb_encode_mimeheader($mail_from,"jis");
$mail_to =mb_encode_mimeheader($mail_to,"jis");
$mail_from_name =mb_encode_mimeheader($mail_from_name,"jis");
$subject =mb_encode_mimeheader($subject,"jis");

$tmp =mb_convert_encoding('<p style="color:red; font-weight:bold;">HTMLメールを送ります</p>','jis');

$body_html =$tmp;

$parameter = "-f ".$mail_from;
$boundary = '--' . uniqid(rand(),1);

// ヘッダー情報
$headers = '';
$headers .= 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-Type: multipart/alternative; boundary="' . $boundary . '"' . "\r\n";
$headers .= 'Content-Transfer-Encoding: 7bit' . "\r\n";
$headers .= "From: " . $mail_from_name . "<" . $mail_from . ">" . "\r\n";
$headers .= "Subject: ". $subject . "\r\n";

// メッセージ部分
//今回はマルチパートにしておらず、HTML形式のパートだけにしています。勿論これでもOKです
$message = '';
$message .= '--' . $boundary . "\r\n";

$message .= 'Content-Type: text/html; charset="iso-2022-jp"' . "\r\n";
$message .= 'Content-Transfer-Encoding: 7bit' . "\r\n";
$message .= "\r\n";
$message .= $body_html . "\r\n";

$message .= '--' . $boundary . '--' . "\r\n";

// 送信する
if(!mail($mail_to,$subject, $message, $headers, $parameter)){?>
<script>
alert('送信ができませんでした');
</script>
<?php
}
else{
<script>
alert('送信が完了しました');
</script>
<?php
}
?>

最近あったサイバー攻撃の手口 – XSSからフィッシングメール

セキュリティ

最近ニュースでも国内大手メーカーがサイバー攻撃を受けていると報じられていますが、私達が普段何気なくブラウジングしている場合においても例外ではありません。

つい最近実際にあったのですが、メディアサイトで記事を閲覧していたところ、突然、多数のポップアップが一瞬にして画面を埋め尽くすほどに表示されたのです。

このポップアップは別サイトへの遷移誘導を防ごうとセキュリティソフトが働いてくれたのだと思われます。

閲覧していたメディアサイトはたくさんの記事や広告が表示されておりましたが、この広告の中に悪意のあるスクリプトが埋め込まれていた可能性が考えられます。

念のためパソコンのウイルスチェックを実施→問題なし、ダークウェブモニターの確認→変化なし、とりあえずは大丈夫そうなので安心しましたが、怖いので、セキュリティソフトのVPNをオンにしてセキュリティ強度を高めた次第です。

そして翌日、見覚えのある気になるメールが送られてきておりました。

差出人は最近ユーザー登録した会員制サイトから。

中身を読むと、「アカウントがロックされたのでリンクをクリックし解除しろ」との内容です。

メールのヘッダーを確認すると.cnのサーバーを経由しておりました。

そう、フィッシングメールです。

おそらく、前日のクラッカーにクッキーを抜かれたのではないかと推測しております。

しかし、こいつらは重要な情報は抜き取れず、さらなる重要情報を盗む事を目論み、盗んだ情報の断片を利用し、その情報を騙ったフィッシングメールを送り付けてきているのだと考えられます。

クロスサイトスクリプティング(XSS)⇒ フィッシング詐欺、気を付けましょう。

ワードプレスの投稿IDを書き替えるには

ワードプレスロゴ

ワードプレスでサイト制作していると、たまに、既に公開済みの投稿の投稿ID(post_id)を変更したい場合があります。

単純に投稿の投稿IDを取得する場合はワードプレスにて関数が用意されており簡単ですが、既に発行された投稿IDを書き替えるのは簡単ではありません。

この場合は、データベースに保存された値をphpmyadminで書き替える必要があります。

phpmyadminは一般的なレンタルサーバーの管理画面で起動が可能です。ここではネットオウルのスターサーバーを例にして説明します。

まずは、スターサーバー管理画面に入り、「データベース設定」⇒「phpmyadmin」タブをクリックします。

ログイン画面が立ち上がりますので、ワードプレスで使用しているデータベースのユーザー名とパスワードを入力します。ネットオウル以外のレンタルサーバーでもphpmyadminを起動時には同様にデータベースユーザー名およびデータベースパスワードが必要な筈です。

データベースのユーザー名とパスワードが不明な場合は、下記の方法で調べれます。

ワードプレスがインストールされているディレクトリ内にあるwp-config.phpを開きます。

wp-config.phpを開くと、私の場合、32行目、35行目にデータベースのユーザー名とパスワードの記載があります。

これをメモして先のログインフォームに入力しログインします。下記のようなphpmyadmin画面が開きます。

「phpmyadmin」トップ画面

左側ツリーで該当するデータベース名をクリックし、ドロップダウンリストを開く。さらにドロップダウンリストの中から「wp_posts」をクリック。右側にデータベースに保存されている投稿のデータベース内容の一覧が表示される。

IDを書き替えたい投稿の行の「編集」をクリック。データベース編集画面が開きますので、ID番号を全て書き替え保存して完了です。

データベース編集画面

TCD FAKE(TCD074) カスタマイズ事例 – ヘッダー動画をレスポンシブに

当オフィスではTCDのFAKE(TCD074)の特別ライセンスを取得しておりますが、たまに、このFAKE(TCD074)テーマについてのカスタマイズのお問い合わせが入ることがあります。

そして最近実際にあったお問い合わせなのですが、

「トップヘッダーに動画を使っているが、スマートフォンでの閲覧時にヘッダー動画の一部分しか表示されない。PCとスマホ、それぞれで別の動画を表示できないか」

とのご要望でした。

確かに、FAKE(TCD074)のヘッダーには画像スライダーだけではなく動画を設定できるんですが、動画は一つしか設定できないので、パソコンでの閲覧を想定した横長の動画で、かつ、動画が左右に動きのあるものだと、スマホで閲覧した際に動画の一部しか表示されず、肝心な部分が伝わらない等の問題が確かにあります。

この問題に対応するには、PCおよびスマホのどちらで閲覧してもそれなりに表示されるような構成で、フレームサイズもPCとスマホのどちらにもフィットするようなアスペクト比の動画を用意するしかないのですが、これにも限界があります。

そして一番良いのは、PC用とスマホ用それぞれのバージョンの動画を用意する事。

実際にヘッダー部分に動画を用いているサイトで、PCとスマホで動画を出し分けているサイトがあります。それが下のスキンケア商品のショッピングサイトであります「ピカイチ」さんのサイトです。

ピカイチ公式ショッピングサイト | さぁ、しあわせなお肌になろう。 (pikaichi.co.jp)

このサイトにアクセスするとまず飛び込むのがCM調の動画です。そして、このサイトではパソコンで見てもスマホで見ても動画は最適に表示されています。理由は、アクセスユーザーの端末に応じて(PCかスマホか)2種類の動画を出し分けているから。

なぜ知っているのかというと、以前、合同会社アシスト様という会社様から、「自社が取り扱う商品の紹介サイトを作成して欲しい。商品動画はあるのでヘッダーに動画を用いたい」とのご依頼があり、イメージ参考サイトとして頂いたのが上記「ピカイチ」様サイトでした。

この際に調べて分かったのは、ピカイチ様のサイトのヘッダー動画はPC用(1920×1080)とスマホ用(1080×1920)の2種類があって、メディアクエリ768pxをブレークポイントとして動画を出し分けているという事でした。

特にCM調の動画とかだと左右に動きがありますし、やはり、そのような場合は動画は2種類用意して出し分けて表示するレスポンシブ仕様としたいところですよね。

話が長くなりましたが、今回のお問い合わせを頂いた際に、FAKE(TCD074)テーマのヘッダー部分に独自カスタマイズを加え、PC用とスマホ用の動画を出し分けれるように改修を加えてみました。以下、そのデモサイトです。

FAKE(TCD074)動画ヘッダーレスポンシブ化デモサイト

このデモサイトでは次の2種類の動画を使っています。

そして実際にデモサイトにアクセスしていただき、ブラウザの幅を縮めたり、または、PCと合わせてスマホでも閲覧いただくと分かるのですが、それぞれの動画が出し分け表示されるのが分かる筈です(このデモサイトのブレークポイントは768pxで設定しています)。

PC閲覧時のスクショ
スマホ閲覧時のスクショ

実際のデモサイトはこちら⇒FAKE(TCD074)動画ヘッダーレスポンシブ化デモサイト

FAKEはコンテンツビルダーに動画アップローダーが搭載されていますが、登録できるのは一つだけ。今回のカスタマイズにおきましては、スマホ用動画はPC用動画のファイル名末尾に「-sp」を付加してワードプレスの管理画面「メディア」にて別途アップロードする方法としております。

例えば、PC用動画のファイル名が「test.mp4」の場合、スマホ用のファイル名は「test-sp.mp4」として頂き、スマホ用動画はメディアアップローダーでアップしておくだけです。それだけで上記動画のレスポンシブが実現できます。

以上、TCD FAKE(TCD074)テーマのカスタマイズ事例のご紹介となります。

ご興味のある企業様ございましたら是非お問い合わせください。お待ちいたしております。

  • 今回ご紹介するカスタマイズ事例は、TCD FAKEテーマのテンプレートファイルにコード追記等の改修を加える手法となりますので、子テーマ化が必要となる手法となります。
  • TCDテーマを使ったサイト制作やカスタマイズを承る場合、当オフィスにおきましては、基本料金としまして、68,400円(税込)を頂いております。
  • 今回ご紹介するカスタマイズ事例の料金は基本料金のみの68,400円(税込)となります。
  • 従いましてTCDテーマのカスタマイズのご依頼の際には、サイト制作からご依頼頂く、または、その他カスタマイズも併せてご依頼頂くのがお得です。
  • TCDテーマのサイト制作およびカスタマイズにつきましては、既にTCDテーマを購入済の方のみ承っております。

Vue.jsのrouter機能でSPA(シングルページアプリケーション)を作成する(テンプレの導入)

環境


node.js

v16.13.2

v16.13.2 

※2022年2月における最新バージョン


npm

v8.4.1

v8.4.1 

※2022年2月における最新バージョン


Vue-CLI

v4.5.15

v4.5.15 

※2022年2月における最新バージョン


OS

Windows11

Windows11 


①node.jsのインストール

npm環境でvue.jsを扱いますので、まずはnode.jsをインストール。下記サイトにて推奨版をダウンロードしてインストーラーを起動、インストールしてください。

https://nodejs.org/ja/

インストールが完了したら、コマンドプロンプトにてnode.jsとnpmが正常に動作するかを確認します。

バージョンが表示されれば正常にインストールされている

②Vue CLIのインストール

・コマンドプロンプトにて以下コマンドを実行。


・同じくバージョンを確認して正常にインストールされているかを確認。

③Vue GUIを起動

ここからは、コマンドラインは使用せずにVueのGUI画面を起動してプロジェクト作成やプラグインのインストールを行っていきます。

まずは、Vue GUIを起動。GUIの起動はコマンドラインからです。


 ブラウザが起動し、Vueのプロジェクトダッシュボードが開きます。


プロヘクトマネージャ画面を開きます。

プロジェクトマネージャー画面

適宜プロジェクトを作成するディレクトリに移動し、「+作成」⇒「+ここに新しいプロジェクトを作成する」ボタンをクリック。


次の画面でプロジェクト名を入力し、次へ。


Default preset(Vue 3)を選択し、「✓プロジェクトを作成する」ボタンをクリック。


プロジェクトが作成できたら、次にVue Routerプラグインのインストール。

作成したプロジェクトはRouter機能がインストールされていない基本のプロジェクト。なので、作成したプロジェクトには追加でVue Routerを追加インストールする必要がある。

「プラグイン」画面にて、画面上方にある「Vue Routerを追加」ボタンをクリック。


Vue Routerのインストールが終わった

エクスプローラーでプロジェクトディレクトリ配下のsrcディレクトリを確認。「view」、「router」等の基本のテンプレートが一通りできている筈です。

また、viewテンプレートはサンプルで「About」と「Home」が作成されています。


テスト用の簡易サーバーを立ち上げて、Vue Routerアプリを実行します。

タスク画面の「serve」⇒「タスクの実行」をクリックしコンパイルします。

コンパイルが完了したら、localhostのポート:8080にアクセスして動作が確認できます。下記画面が表示されたらプロジェクト作成成功です。

上部のHomeとAboutのリンクをクリックすると、ページの再読み込みはされずにページが切り替わるのが分かります。


公共事業受託案件(入札情報)を無料で検索できるサイトのご紹介

入札情報検索システム

コロナウィルスの影響により事業縮小されている事業者の方も多いのではないでしょうか?

私も最近知ったのですが、公共事業案件(入札)には個人事業も参加できるんですね。

公共入札案件には「物品」、「工事」、「役務」と3つの種別カテゴリーがあり、そのうち「物品」と「役務」は、『全省庁統一資格』という入札に参加するための資格が必要ではありますが、この資格はいくつかの書類を申請書とともに申請すれば取得できる資格だそうです。そして、この資格は個人事業主でも取得できるんです。

そのうち機会があれば入札資格を取得申請してみたいと思っております。

また、「工事」はいわゆる公共工事案件のことですが、こちらは簡単に誰もが参加できるものではありません。建設工事ですから建設業法に基づく建設業許可が必要ですし、その建設業許可を取得するだけでも各種建築系資格所持者が必要となるからです。

入札案件は実はいくつかの官公庁のホームページにて検索ができます。

官公需情報ポータル

こちらは中小企業庁が運営しているサイトとなりますが、面白いのは、外部システム向けにAPIが用意されているんです。

このAPIを使えば、何万件とある情報を条件指定してデータ取得ができます。面白いので、簡単に入札情報検索システムを作成してみた次第です。


 
Proudly powered by WordPress
Copyright 2020 office-tomo.net All right reserved.