プログラミング

JavaScript

【Blender×three.js】Webブラウザ上でモデルとアニメーションを再現する

以前、three.jsとpanolens.jsを利用して360度画像をWebに埋め込むという記事を書きました。 今回は、このthree.jsだけを使って、3DCG作成無料ソフトBlenderで制作したモデルとアニメーションをWeb上で再現し...
JavaScript

【three.js/panolens.js】360度画像をWeb上に埋め込む

前回までは、Googleストリートビューを使って無料で360度写真を撮影し、Photoshopで360度写真を加工しました。 本記事では、360度画像をVRビューとしてWeb上に埋め込む方法を記載します。 環境 OS:Windows10エデ...
JavaScript

【Photoshop】360度全天球写真を加工する

前回は、Googleストリートビューアプリを使って無料で360度写真を撮影しました。 今回は、こちらの写真をPhotoshopで加工していきたいと思います! 出来上がりはこんな感じです。センスのかけらもなくてすみません(笑) Photosh...
JavaScript

廃止【スマホ】無料で360度パノラマ写真を撮影する

Googleストリートビューアプリは2023年3月をもって終了となりました。 本記事の内容は、現在、再現ができませんのでご注意ください。 360度の全天球写真を撮るには、全天球カメラが必要だーーーー!それか一枚一枚撮影しないとーーーー!と思...
HTML/CSS

[css]grid-gapを%で設定したら親要素の高さがおかしい

cssのgridを使ってコンテナの高さ幅にそれぞれギャップ(間)を持たせるために、%で指定をしたところ、親要素の高さが「grid全体の高さ−(設定したギャップ×row数)」になってしまい、次の要素が被るという現象が起きました。 原因追及まで...
HTML/CSS

[Sass]@mixinと@extend使い分け

久しぶりにCSSではなくSassを使いました。過去、Sassは変数の定義やbreak pointの設定が便利なので、使ってはいたもののそこまで使いこなせてはいませんでした。 ま、今も使いこなせてはいないのですが!(笑)とはいえ、以前よりかm...
CMS

【WordPress】カスタムフィールド/カスタム投稿/カスタムタクソノミー

メイン画面とsingleページ使われる関数はこちらをご参照ください↓ カスタムフィールド カスタムフィールドとは、決まった項目をパーツとして扱うことができる。(メニューや料金表など)ユーザーは、フィールドに必要な情報を入れていくだけなので、...
CMS

【WordPress】個別記事に関わる関数/single.php

index.php関連はこちら↓ 投稿した記事に用いられる関数のメモを残します。 WordPressテンプレート階層 まず事前に、WPにはテンプレート階層が存在し、ファイル名によって表示するページのテンプレートが決まるようになっています。つ...
CMS

【WordPress】メイン画面に関わる関数や記述まとめ/index.php

ぶっちゃけWordPressをなめてました。。。独自テーマを作れるようになるにも一苦労で、オブジェクトでのコーディングや、ブロックを作れるようにするとなるとReactの知識も入ってくる、といったように内部構造が想像以上に複雑です。 まずは、...
CMS

【Local】WordPress開発環境をローカルに構築する

以前にVagrantの「VCCW」boxを使用してローカルに開発環境を作成しました。前回記事はこちら↓ Vagrantを使い慣れている方には利便性がいいのですが、慣れていない方にはとっつきにくい点もあります。 環境構築に時間がかかる(Vir...