What's New Qiita

20200107のHTMLに関する記事は2件です。

  • 投稿日：2020-01-07T16:29:50+09:00

【A-Frame】VRコンテンツの作り方

はじめに

社内制作でVRコンテンツを作成しました。
細かいコンテンツ作成などは置いておき、VRっぽいものを作るまでの流れが簡単だったので紹介します。

環境

OS : Windows 10 Pro
エディター : VSCode

実装

1.　A-Frameの読み込み

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
  </head>
  <body>
  </body>
</html>

2.　オブジェクトの配置

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 1.17 -3.9" rotation="0 0 0" color="#ff0000"></a-box>
    </a-scene>
  </body>
</html>

この時点で下記のように出力されます。
※PCで確認しているので、スマホなどで確認するとすでにジャイロセンサーなど取得して、空間上にオブジェを配置します。
image.png

画像にテクスチャーを張ったり、3Dオブジェクトを配置したりできるので、試してみてください。
詳細は↓↓公式サイト↓↓
https://aframe.io/

3.　A-Frame Inspector
値を変更して毎度、確認するのが面倒なので、A-Frame Inspectorを開いて（win:ctrl + alt + i）直接オブジェクトの配置やサイズ感を決めるとやりやすいかと思います。

image.png

※端末のOSのバージョンによって、センサーの取得状況が違うため、要実機検証が必要です。

実際にA-Frameで作ったサイトは↓こちら↓
http://www.hol-on.co.jp/greetingsite/newyear/2020/??utm_source=qiita

以上

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-01-07T15:27:01+09:00

haml-railsでerbファイルをhamlに変換する方法

個人アプリ開発において新しく立ち上げる度に何度も調べてしまうので備忘録として残す。

結論

このgemをGemfileに記述

Gemfile
gem "haml-rails"

bundle installを実行

ターミナル
$ bundle install #bundle でも可

下記コマンドを実行し、erbファイルをhamlに変換。

ターミナル
$ rails haml:erb2haml

元のerbファイルを削除するかどうかを聞かれる。不要な場合はyを選択。

ターミナル
Would you like to delete the original .erb files? (This is not recommended unless you are under version control.) (y/n)
y
Deleting original .erb files.
--------------------------------------------------------------------------------
Task complete!
No .erb files found. Task will now exit.

hamlで開発を行う事の利点とは

hamlはdivタグ自体を書く必要がなく、また各タグを閉じる必要もない為、コード量の削減、簡略化ができる。rubyも使用可。
インデントによる管理である事から、誰が書いても似たような構造になり、可読性が高い。
逆にインデントが少しでもずれるとすぐエラーを吐くため慣れるまでが大変。

rails newを叩く際にデフォルトで生成されるerbファイルはhtmlとほとんど同じ記述で書けて且つ、rubyも実行できる。
ただhamlと違いタグ1つ1つに対しての閉じタグが必要になる為、コードが冗長になりやすい。
学習し始めのうちは視覚的に理解しやすいので使うのも有り。

まとめ

爆速で開発を行いたいのであれば時間が掛かっても少しずつhamlに慣れていくのが良いであろう。
似たような書き方でslimというのもあるが、基本的な書き方はhamlと変わらず、2020年1月現在ではhamlの方が若干使用比率が高いようなので、現場に合わせ必要に応じて学ぶと良いのではないだろうか。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧