第25回勉強会では、XAMMPとThreejsについての発表がありました。

XAMMPでのローカル環境の構築

『XAMMP』とは、WindowsやMac OS X等、どのようなOS上でも運用できる環境を提供するフリーソフトウェアパッケージで、ウェブアプリケーションに使用されます。

XAMMPは以下の言葉の頭文字から取られています。

• ・X-クロスプラットフォーム（Windows、Linux、Mac OS X、Solaris）
• ・Apache
• ・PHP
• ・Perl

今回は、このXAMMPを利用して、WordPressの開発環境の構築を実践して頂きました。

初期設定とWordPress画面の確認

ローカル環境の場合は、WordPressを使用するためにサーバーとデータベースをソフトによって起動する事が必要になります。

そのために利用するのがApache（サーバー）とMySQL（データベース）です。

Apacheの起動はXAMMPのコントロールパネルにより簡単に操作・確認ができます

同様にして、MySQLの方もPhpMyAdminの初期設定を行います。

PhpMyAdiminのパスワード設定とデータベースの設定を行います。

初期設定が終わったらWordPressをインストールしてテーマを設定するともうローカル環境でのWordPressによるWebページの作成が完了です。

このように、Xammpを利用して、とても簡単にローカル環境を構築できる事がわかりました。

XAMMPによるWordPress環境構築を聞いて

今回は、ローカルに構築したWordPress環境を使ってHPを作成する、といった内容を紹介して頂きました。

実際に操作手順を手元で再現しながらの説明だったダメとても分かりやすかったです。

本当に簡単にローカル環境を構築できることと、WordPressの知らなかった標準機能などを説明して頂きました。

直接本番環境で試せないような部分をチェックする等業務においても有効ですし、WordPressのファイル構造等を理解するためにもローカルで自分の環境を持てる事はとても有用だと思います。

これを機に、自分もXAMMPを使ってみようと思いました。

Threejsによるブラウザでの3D導入

続いて紹介して頂いたのはブラウザで、3D画像を描画をすることができるライブラリー『Threejs』です

ポイントとしては自分で作成した動画や画像を表示する事が出来るため実装次第で自由度の高い動画像を表現する事ができます。

WebGLの要素

Threejsは、WebGLを使って３次元グラフィックスをレンダリングするのをFramework化しています。

要素としてはScene、Mesh、Lifht、Cameraという４つの要素によって3Dレンダリングが可能です。

• ・Scene（MeshやLightといった要素を入れるための入れ物、空間。）
• ・Mesh（物体。形や色、テクスチャを決めて配置する。）
• ・Lifht（光。強さと範囲を決定する。スポットライトや環境光などといった種類を選べる。）
• ・Camera（画面を映す範囲を決める。）

作成した3D動画像

実際に作成したページが下のような画像で、光が動くことで宇宙船から見ている景色をイメージできるようなものになっていました。

このソースは実際には上から振ってくるMeshを下からLightで照らして、Lightと同じ位置のCameraから見ている状態だそうです。

Scene内のMeshは描画が重くならないように下に落ちたMeshが再び上に来るようにして常に同じ数だけになるような処理を行っています。

このMeshを四角でたくさん用意することによって流れていく星のような描画をすることができています。

Three.jsについて聞いてみて

3D描画については難しいイメージしかなく抵抗がありました。

今回話を聞いて簡単そう、といった印象はありませんが、実際に作成できるものの幅広さから、その基幹になるツールが同じであることに驚きましたし、難しく考えていた3Dの描画が覚えのあるツールで作成できることを知って、より身近に感じられました。

感想でもありましたが、三次元的なデザインが出来るようになれば、案件にもつながり業務の幅が広がる事も考えられると思います。

今はまだわかりませんが、3Dデザインの基本やよくある手法は非常に興味深く、個人的にも触ってみたいと思いました。

今回紹介して下さった、three.jsについては多くのサンプルが存在します。

本当に色々なものがあってみてるのも面白いです。興味があればぜひみてみましょう

↓クリックで移動↓