みなさん、今年の年賀状はお済みですか？まだだけどソフトが無いよという方、ワードとエクセルでも簡単に作成できます。

2016.12.13

「 Word 」と「 Excel 」で年賀状作成を試してみた感想【Office2016】

早いもので今年も残りわずかとなって参りました。そろそろ年賀状をと思い、マイクロソフトが公開している「Word (ワード) と Excel (エクセル) だけで作れる!? オリジナル年賀状を作成しよう！！」に記載されている手順を試してみました。参考までに個人的な感想を含め、ご紹介させて頂きます。https://www.microsoft.com/ja-jp/atlife/article/word-excel-nenga/default.aspx宛名などの表面方法はマイクロソフトのサイトに細かく記載されているのでここでは概要だけご紹介します。まずは住所録となるエクセルファイルを用意します…

今年は、AR.js で AR画像の埋め込みを試してみました。今回はこちらのサイトを参考にさせて頂きました。

Qiita

A-FrameとAR.jsで超簡単AR（PC・スマホ・マルチマーカー対応） – Qiita

https://qiita.com/mkoku/items/c635566e829c303a7d3f

背景と目的2017年7月11日に A-Frame のブログにて「Creating Augmented Reality with AR.js and A-Frame」という記事が公開されました。VR用フレームワークの A-Fra…

トマシープが学ぶ

マーカーありのWebARをやってみた！【AR.js】 – トマシープが学ぶ

http://bibinbaleo.hatenablog.com/entry/2017/12/05/113241

アプリ不要なAR年賀状の記事を見て、私もwebARしたいなと思いました。 www.replug.jp 昨日の記事でやっている方がいらっしゃいました！これ！ iti.hatenablog.jp A-FrameとAR.jsを使うのが良さそうです。 A-FrameはVRを作るときに使ったことがあるのでなんとなくわかります。 bibinbaleo.hatenablog.com やる・・・サーバー github BItBalloon カスタムモデル＆マーカーオリジナルモデルマーカー最後にやる・・・色々不安な部分はありますがとりあえずやって見ます。サーバーカメラにアクセスするのでhttps…

3DモデルはGoogle Polyで無料配布されているものを使用、マーカー(.patt)はこちらのサイトで作成しました。

https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

出来上がったコードがこちら。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Happy New Year!</title>
  </head>
  <body style="margin:0px; overflow:hidden;">
    <!-- A-Frame ライブラリの読み込み -->
    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
    <!-- AR.js ライブラリの読み込み -->
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>

    <!-- A-Frame の VR空間に AR.js を紐づける（デバッグUIは非表示） -->    
    <a-scene embedded arjs="debugUIEnabled:false;">

        <a-assets>
          <a-asset-item id="obj" src="models/model.obj"></a-asset-item> <!-- objファイル -->
          <a-asset-item id="mtl" src="models/materials.mtl"></a-asset-item> <!-- mtlファイル -->           
        </a-assets>

        <a-marker preset='custom' type='pattern' url="marker/marker.patt">
          <a-text value="Happy New Year!\nBest wishes for a successful\nand rewarding year." position=" 0 0 1.5" align="center" rotation="-90 0 0" color="#DD4827" scale="1.5 1.5 1.5"></a-text>
          <a-obj-model
            src="#obj"
            mtl="#mtl"
            scale="5 5 5"
            position="0 0.5 0">
            <a-animation
              attribute="rotation"
              to="0 360 0"
              dur="12000"
              easing="linear"
              repeat="indefinite">
            </a-animation>
          </a-obj-model>

        </a-marker>

        <a-entity camera></a-entity>

    </a-scene>
  </body>
</html>

動画はスマートフォンで実際にやってみた画像です。

下記URLへアクセス後、マーカーにカメラをかざすと表示されます。

https://etbs.jp/w/2019/

予想以上に簡単に出来ました。

一式サンプルとしてまとめましたので、良かったらダウンロードしてみてください。

ダウンロード

自己紹介

松田大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか…

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「こどもICTかつしか教室」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

お問い合わせ