別のブログでご紹介しましたとおり、当オフィスで開発した官公需情報検索サイト「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言語でウェブアプリケーション開発に便利な「Laravel」をご紹介いたします。
少し前からMVCの考え方を勉強しており、理解はできたので、今回ようやくLaravelを使ったウェブアプリケーション制作に取り組んでみました。
と言いましても、一から何かを開発したとかではなく、少し前のブログでも制作事例としてご紹介しておりましたが、とある行政機関様のAPIを利用した「官公需情報検索サイト BID SEARCH」をLaravelに移行してみたものであります。
先にご紹介した私が開発したサイトは、完全生のPHPでコーディングしたサイトでした。
それを実際にLaravelのインストールから、参考書や公式ドキュメントサイトを参照しつつ、実際にLaravelに移行してみて、「なんだ、意外と簡単！」と感じました。
これは、元のソースは一応クラス構造化しておりましたので、ビューやアクションメソッドに書き写しやすかったのもありますが、それ以外に、Laravelは詳しく解説された参考書も多く、また、公式ドキュメントサイトの内容も日本語サイトがあって意外と情報を得やすいのがあるかもしれません。
同じフレームワークで「Vue.js」も少し取り組んでおりますが、こちらは、そもそもJavascriptがベースのものという事もあってとっつきにくく（私の主観でしょうか？）、参考書も本当に簡単なアプリが作れる程度の内容でありまして、本格的に開発できるようになるまで時間がかかるものと思われます。
ただ、あくまでもLaqravelはMVCモデルに沿ったフレームワークですので、MVCの考え方が分かっていない方には難しいかもしれません。
Laravelはセキュリティ対策を一から実装せずに済みます。
PHP言語を使う場面にフォーム開発があります。そして、このフォーム送信ですがページ遷移タイプのアプリケーションですとCSRF（クロスサイトフォージェリ）という脆弱性への対策が必須でありました。
勿論、Laravelにおきましても必須ではありますが、コーディング量が格段に少なくなります。
セッションスタートし、フォームの要素に隠しinputフォームを実装し、そのバリューには乱数で生成したトークンを設定し、同時に、このトークンをセッションにも渡し、また、遷移先ページでもセッションスタートやPOSTデータの受け取り、セッションの受け取り、そしてトークンの比較といった作業が必要であったのが、larabelの場合フォーム内に
<input type=”hidden” name=”_token” value=”{{ csrf_token() }}”>
この一行を加えるだけで、セッション及びポストデータにも乱数かされたトークンが自動的に発行されます。セッションのスタートや乱数の生成等も必要なし。
一部見慣れぬ記述もありますが、変数の埋め込みや受け渡しも参考書など読めば理解できますし、慣れれば簡単です。
また、Laravelではビューテンプレートに、テンプレートエンジン「Blade」が使えます。ビューテンプレートにBladeを使えば、上記トークン生成用input要素の記述がさらに簡単となり、
@csrf
この4文字の記載だけで済みます。
Requestデータやセッションデータに簡単にアクセスできるメソッドもあります。
それ例外にも、バリデーションやログイン認証機能の実装も可能なフレームワークです。
実際にちょっとしたウェブアプリケーションに使ってみたわけですが、意外と簡単に使えた事にびっくりです。実際、参考書や公式ドキュメント等参考にしつつ、丸一日で、生のPHPからLaravelに移行できました。
こんな簡単で便利なのであれば、今後もっと活用していきたいと思った次第です。
〇環境：
・
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
npm環境でvue.jsを扱いますので、まずはnode.jsをインストール。下記サイトにて推奨版をダウンロードしてインストーラーを起動、インストールしてください。
インストールが完了したら、コマンドプロンプトにてnode.jsとnpmが正常に動作するかを確認します。
・コマンドプロンプトにて以下コマンドを実行。
・同じくバージョンを確認して正常にインストールされているかを確認。
ここからは、コマンドラインは使用せずにVueのGUI画面を起動してプロジェクト作成やプラグインのインストールを行っていきます。
まずは、Vue GUIを起動。GUIの起動はコマンドラインからです。
ブラウザが起動し、Vueのプロジェクトダッシュボードが開きます。
プロヘクトマネージャ画面を開きます。
適宜プロジェクトを作成するディレクトリに移動し、「＋作成」⇒「＋ここに新しいプロジェクトを作成する」ボタンをクリック。
次の画面でプロジェクト名を入力し、次へ。
Default preset（Vue 3）を選択し、「✓プロジェクトを作成する」ボタンをクリック。
プロジェクトが作成できたら、次にVue Routerプラグインのインストール。
作成したプロジェクトはRouter機能がインストールされていない基本のプロジェクト。なので、作成したプロジェクトには追加でVue Routerを追加インストールする必要がある。
「プラグイン」画面にて、画面上方にある「Vue Routerを追加」ボタンをクリック。
エクスプローラーでプロジェクトディレクトリ配下のsrcディレクトリを確認。「view」、「router」等の基本のテンプレートが一通りできている筈です。
また、viewテンプレートはサンプルで「About」と「Home」が作成されています。
テスト用の簡易サーバーを立ち上げて、Vue Routerアプリを実行します。
タスク画面の「serve」⇒「タスクの実行」をクリックしコンパイルします。
コンパイルが完了したら、localhostのポート:8080にアクセスして動作が確認できます。下記画面が表示されたらプロジェクト作成成功です。
上部のHomeとAboutのリンクをクリックすると、ページの再読み込みはされずにページが切り替わるのが分かります。
ウェブを制作する際に、図解画像等を表示させる事もあると思います。
当オフィスにおいても、現在承っているウェブサイトに、クライアントから制作を依頼された図解画像を配置しておりますが、単なるイメージ画像なら良いのですが、図解となりますと細部まで視認が可能でないと情報が伝わり難く、特にスマホでの閲覧の際には、全幅で表示させても、文字が読み取れず、閲覧ユーザーに伝えたい情報も伝わらない事になりかねません（下記のような図解を掲載するような場合）。
良く、他のサイトにホバーやクリックした際にCSSのscaleでズームインする方法が掲載されていますが、ユーザーに図解等細部まで閲覧して貰うのに最適なライブラリを見つけました。
Swiperです。
ご存知の方も多いと思いますが、Swiperは本来はスライダーライブラリとなります。
Swiperは豊富でバリエーションに富んだスライダーライブラリを提供してくれますが、その中に、「ZOOM」という種類のスライダーがあります。
この「ZOOM」というタイプのスライダーは、パソコンの場合は、スライドする画像をダブルクリック、スマホの場合はダブルタップする事で、スライダーコンテナー内で、あらかじめ指定した倍率で画像がズームアップします。
そして、ズームアップされた画像は、画面上でドラッグ可能であり、コンテナー内で自由に動かし、細部を確認できるのです（下記、Swiper「Zoom」のデモとなります。画像をダブルクリックかダブルタップで拡大します。）
便利なスライダーですよね。これを応用できないかと考えたわけですが、スライダー画像を一枚のみにするだけで、画像をズームアップ（ズームイン）可能な埋め込みコンテナーとして活用できます（下記、先の図解画像をスライダー画像として設定し、かつ、スライダー画像がその図解1枚のみの場合）。
上の図解をダブルクリックまたはダブルタップすると図解が拡大し、ドラッグするとコンテナー内で自由に動かすことができるはずです。
ちなみに、私はSwiperのバージョンを4.5.1に落として使っております。これはIE11に対応するためです。Swiperの最新バージョンはIE11には非対応です。下記にSwiper4.5.1の場合のサンプルコードを掲載します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- swiper.js IE11対応旧バージョン4.5.1 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>
<style>
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
overflow: hidden;
}
</style>
</head>
<body>
<div style="width:100%;">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph.jpg">
</div>
</div>
</div>
</div>
</div>
<script>
var swiper = new Swiper(".swiper-container", {
zoom: {
maxRatio: 2, <!-- 画像のズーム倍率を指定 -->
},
});
</script>
</body>
</html>最近のディスプレは解像度が3000pxを超えるものもあります。従って、ユーザーの端末に応じて最適な画像サイズを出し分ける必要があるわけですが、その場合に使うべきレスポンシブの技術として、<picture>タグと<souece>タグを使うことも多いのではないでしょうか。
<!-- picture、sourceタグによる画像出し分けの例 -->
<picture">
<source srcset="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph-768.jpg" media="(max-width:768px)" />
<source srcset="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph-1280.jpg" media="(max-width:1280px)" />
<img src="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph.jpg">
</picture>
この場合、単純にswiper-zoom-container内に上記picture、sourceタグを内包すれば良いように思えます。しかしこれはNGです。正常に動きません。下記、NGな書き方です。
<!-- Swiper 「Zoom」でpicture、sourceタグで出し分ける際のNGな書き方 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-zoom-container">
<picture">
<source srcset="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph-768.jpg" media="(max-width:768px)" />
<source srcset="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph-1280.jpg" media="(max-width:1280px)" />
<img src="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph.jpg">
</picture>
</div>
</div>
</div>
</div>Swiper「Zoom」において、picture、sourceタグで画像を出し分ける場合は以下のように記載すると正常に動作します。
<!-- Swiper 「Zoom」でpicture、sourceタグで出し分ける際には、pictureタグをswiper-zoom-containerとして使うべし -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<picture class="swiper-zoom-container">
<source srcset="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph-768.jpg" media="(max-width:768px)" />
<source srcset="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph-1280.jpg" media="(max-width:1280px)" />
<img src="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph.jpg">
</picture>
</div>
</div>
</div>
<!-- Swiper 「Zoom」でpicture、sourceタグで出し分ける場合のサンプルコード -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- swiper.js IE11対応旧バージョン4.5.1 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>
<style>
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
overflow: hidden;
}
</style>
</head>
<body>
<div style="width:100%;">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<picture class="swiper-zoom-container">
<source srcset="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph-768.jpg" media="(max-width:768px)" />
<source srcset="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph-1280.jpg" media="(max-width:1280px)" />
<img src="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph.jpg">
</picture>
</div>
</div>
</div>
</div>
<script>
var swiper = new Swiper(".swiper-container", {
zoom: {
maxRatio: 2, <!-- 画像のズーム倍率を指定 -->
},
});
</script>
</body>
</html>
?カルーセルやスライダーを実装する為のCSS・JSライブラリにはBootstrapやFlexSlider等いくつかありますが、その中でも「Swiper」はおすすめのフレームワークライブラリーです。
Bootstrapも簡単にカルーセルスライダーが実装できますがバリエーションが少ないのが欠点。
また、ギャラリータイプのスライダーが実装可能なFlexSliderはjQueryのバージョンに依存するので、他のjQueryバージョンを使うテーマやプラグインと相性が悪く、動かない事がある。
その点「Swiper」は、バリエーションが豊富でありまして、また、jQueryが不要である事から汎用的です。
といった具合に基本のスライダーは簡単に実装可能。
「Swiper」の魅力はここからです。一般的なスライダータイプ以外にも様々なバリエーションがあります。
使い方は「Swiper」の公式サイトを参照ください。
〇「Swiper」公式サイト
〇インストールおよび使い方
https://swiperjs.com/get-started
〇詳細な設定、カスタマイズ
https://swiperjs.com/swiper-api
〇デモ
ワードプレスはデフォルトで様々なブロックが搭載されておりまして、GUI操作でブロックを配置するだけでホームページ作成が可能なホームページビルダーともなっております。
しかし、ワードプレスでホームページ作成をしている方には分かると思いますが、ワードプレスにデフォルトで搭載されているブロックは基本的なブロックばかりでありまして、このデフォルトのブロックでは「自分の思うようなコンテンツが実現できない」というジレンマがあります。
このような場合、ワードプレスには「カスタムHTML」というブロックを使えば、任意のHTMLコードをページ内に挿入できることとなり、自分好みのコンテンツを実現可能ではあります。
しかしこの方法ですと、HTML言語やCSS言語に熟知していなければならず、また、言語に熟知していても一からブロック設計が必要となり、煩わしいこと他なりません。このような場合に使用の検討をおススメしたいのが「フレームワーク」です。
「フレームワーク」とは、簡単に平易に説明するとアプリの枠組みです。また、アプリ開発のためのテンプレートと言っても良いでしょう。
ホームページのブロック設計は、HTML言語だけではなくCSS言語（スタイルシート）の知識が必要となります。例えば、レスポンシブ仕様とする場合、モバイル端末使用時の各ブロックの挙動を検討する必要があり、フレキシブル、ブロック、インライン等といったCSSで用意された各種コンテナの挙動仕様を活用しておりますので、このような仕様を熟知していなければならず、また、リキッドレイアウト仕様としたい場合には、マージンやパッディング属性についても熟知の必要があります。そして、様々なブロックを組み合わせて自分の思うようなブロックを設計・作成するわけです。
しかし、前述の「フレームワーク」を用いればそのような設計の手間を省くことができ、多少のHTML言語やCSS知識があればブロック作成が容易になります。
世の中で出回っている「フレームワーク」には色々とあります。ウェブアプリ作成でよく知られている「フレームワーク」には、
・Laravel（PHP言語向けのフレームワーク）
・BOOTSTRAP（HTML言語、CSS言語向けフレームワーク）
等があります。
特にブロックの設計においては、BOOTSTRAPが便利です。BOOTSTRAPは、先のレスポンシブやリキッドレイアウト設計が既になされた「ブロック」テンプレートです。ブロック作成にはCSS言語でスタイルシート（クラス）を作成し、HTMLコード内にそのクラスを適用することであらかじめ設計した装飾や挙動が得られます。BOOTSTRAPは様々なクラスが用意されたクラスライブラリなのです。
例えば「ジャンボトロン」。
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Learn more上のような「ジャンボトロン」を作成したい場合、H1やPタグ、アンカータグ、ボタン等の各要素を組み合わせで一つの「ジャンボトロン」というブロックコンポーネントを形成します。各要素の配置位置やレスポンシブ時の挙動、装飾などは、先のとおりあらかじめ設計したうえでCSS言語にてクラス作成し、コード内にクラス名を適用します。しかし、BOOTSTRAPにはあらかじめこの「ジャンボトロン」の作成に必要なクラスライブラリが用意されており、また、HTMLコードも準備されています。それが下記コードです。
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>上記「ジャンボトロン」も「カスタムHTML」ブロックを用いておりますが、あらかじめBOOTSTRAPで用意された上記コードを貼り付けただけです。
次に「カルーセル」。これはワードプレスにも欲しい機能ですよね。
下記がBOOTSTRAPで用意されたコードです。これも「カスタムHTML」ブロックへのコピペで動作します。
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>BOOTSTRAPにはアイコンのライブラリも用意されています。
これら以外にもたくさん用意されています。
最後に注意点ですが、BOOTSTRAPを使うには、あらかじめBOOTSTRAPを使うための環境設定が必要です。BOOTSTRAPで用意されたコンポーネントを使うには、専用のCSSやJSが準備されております。
方法としては、
①BOOTSTRAPで用意されたCSSファイルやJSファイルをダウンロードして使う方法。
②CDN（コンテンツ・デリバリ・ネットワーク）を使う方法。
使い方としては②のCDNが簡単かと思います。あらかじめBOOTSTRAP側にてサーバー上にて専用CSSやJSが用意されておりますので、自身のホームページが表示される度に自動で必要なファイルがダウンロードされます。
BOOTSTRAPには上記以外にも様々なコンポーネントが用意されています。興味のある方は是非、BOOTSTRAPの日本語サイトを覗いてみてください。自分が欲しかったブロックコンポーネントが見つかるかもしれませんよ。