<div class='wrapper'> <div class='aaa'> </div> </div> この場合aaaクラスに:before,:afterを付与した場合、疑似要素の親クラスはaaaクラスになる。
<div class='wrapper'> <div class='aaa'> </div> </div>
この場合aaaクラスに:before,:afterを付与した場合、疑似要素の親クラスはaaaクラスになる。
100日チャレンジ161日目 twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 161日目は おはようございます161日目メンターさんのwebサイトコーディング課題フッターとか中途半端作成です#早起きチャレンジ#100DaysOfCode #駆け出しエンジニアと繋がりたい— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) November 14, 2019
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
161日目は
おはようございます161日目メンターさんのwebサイトコーディング課題フッターとか中途半端作成です#早起きチャレンジ#100DaysOfCode #駆け出しエンジニアと繋がりたい— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) November 14, 2019
おはようございます161日目メンターさんのwebサイトコーディング課題フッターとか中途半端作成です#早起きチャレンジ#100DaysOfCode #駆け出しエンジニアと繋がりたい
<pre><code>が正しく<code><pre>が正しくない理由 一言で言うと、HTMLの規格で <code><pre> は許されず、<pre><code>は許されるからです。そう言われただけではにわかには信用できない私のような人が他にもいるかもしれないので調べた詳細をこちらに書き残しておきます。 <code><pre>...</pre></code>が正しくない理由 <code> が受け入れる子要素は記述コンテンツ(phrasing content)のみ1ですが、<pre> は記述コンテンツではありません2。よって <code><pre>...</pre></code> は許されません。 別の言い方をすれば、<pre>の親要素として許可されているのは"フローコンテンツを受け入れるすべての要素"です3が、<code> は記述コンテンツしか受け入れません4。よって <code><pre>...</pre></code> は許されません。 <pre><code>...</code></pre>が正しい理由 複数行のコードを表すには、 <code> 要素を <pre> 要素の中に入れてください。 5 とdeveloper.mozilla.orgに書いており、正しいことがわかります。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/code ↩ https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content ↩ https://developer.mozilla.org/ja/docs/Web/HTML/Element/pre ↩ https://developer.mozilla.org/ja/docs/Web/HTML/Element/code ↩ https://developer.mozilla.org/ja/docs/Web/HTML/Element/code ↩
<pre><code>
<code><pre>
一言で言うと、HTMLの規格で <code><pre> は許されず、<pre><code>は許されるからです。そう言われただけではにわかには信用できない私のような人が他にもいるかもしれないので調べた詳細をこちらに書き残しておきます。
<code><pre>...</pre></code>
<code> が受け入れる子要素は記述コンテンツ(phrasing content)のみ1ですが、<pre> は記述コンテンツではありません2。よって <code><pre>...</pre></code> は許されません。
<code>
<pre>
</pre></code>
別の言い方をすれば、<pre>の親要素として許可されているのは"フローコンテンツを受け入れるすべての要素"です3が、<code> は記述コンテンツしか受け入れません4。よって <code><pre>...</pre></code> は許されません。
<pre><code>...</code></pre>
複数行のコードを表すには、 <code> 要素を <pre> 要素の中に入れてください。 5
とdeveloper.mozilla.orgに書いており、正しいことがわかります。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/code ↩
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content ↩
https://developer.mozilla.org/ja/docs/Web/HTML/Element/pre ↩
html <div class="checkBox"> <input type="checkbox" id="hoge"> <label for="hoge"> ラベル </label> </div> SCSS .checkbox { & input[type='checkbox'] { display: inline-block; vertical-align: middle; text-align: center; position: relative; cursor: pointer; appearance: none; outline: none; width: 20px; height: 20px; margin: 0; } // チェックボックスのデザイン & input[type='checkbox']::before { display: inline-block; content: ''; width: 20px; height: 20px; background: #fff; border: solid 1px $gray-400; border-radius: 3px; margin: 0; } // チェックマークのデザイン & input[type='checkbox']::after { display: inline-block; content: ''; position: absolute; left: 7px; top: 0px; width: 8px; height: 16px; border-right: 3px solid $main; border-bottom: 3px solid $main; transform: rotate(45deg); // チェックしてないときは隠す opacity: 0; } // チェックするとチェックマークの透明化を解除 & input[type='checkbox']:checked::after { opacity: 1; } & label { display: inline-block; vertical-align: middle; cursor: pointer; line-height: 20px; height: 20px; margin: 0; // margin-left: 4px; } }
<div class="checkBox"> <input type="checkbox" id="hoge"> <label for="hoge"> ラベル </label> </div>
.checkbox { & input[type='checkbox'] { display: inline-block; vertical-align: middle; text-align: center; position: relative; cursor: pointer; appearance: none; outline: none; width: 20px; height: 20px; margin: 0; } // チェックボックスのデザイン & input[type='checkbox']::before { display: inline-block; content: ''; width: 20px; height: 20px; background: #fff; border: solid 1px $gray-400; border-radius: 3px; margin: 0; } // チェックマークのデザイン & input[type='checkbox']::after { display: inline-block; content: ''; position: absolute; left: 7px; top: 0px; width: 8px; height: 16px; border-right: 3px solid $main; border-bottom: 3px solid $main; transform: rotate(45deg); // チェックしてないときは隠す opacity: 0; } // チェックするとチェックマークの透明化を解除 & input[type='checkbox']:checked::after { opacity: 1; } & label { display: inline-block; vertical-align: middle; cursor: pointer; line-height: 20px; height: 20px; margin: 0; // margin-left: 4px; } }
vscode-live-server VSCodeからボタンひとつでローカルサーバーが立てられる拡張機能です。 https://github.com/ritwickdey/vscode-live-server 良いところ ボタン一つでお手軽簡単。 hot reloadが有効。 インストール VSCodeのExtensionsからLive Serverで検索 installを押す 使い方 右下にGo Liveのボタンが増えるので、立ち上げたいhtmlをVSCodeで開いてGo Liveを押す ローカルサーバーが立ち上がる 設定 liveServer.settings.root デフォルトは/ index.htmlがルートにない場合(例：/src/index.html)デフォルトのままだとjsファイルやcssファイルの参照が404になってしまうので、よしなに設定(例:./src)してあげる。 liveServer.settings.port デフォルトは5500 よしなに設定 liveServer.settings.https デフォルトはfalse httpsの設定も可能 詳細はこちら https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md
VSCodeからボタンひとつでローカルサーバーが立てられる拡張機能です。 https://github.com/ritwickdey/vscode-live-server
hot reload
VSCode
Extensions
Live Server
install
Go Live
html
liveServer.settings.root
/
liveServer.settings.port
5500
liveServer.settings.https
false
詳細はこちら https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md
はじめに せっかく作ったExcelのマクロファイル（あ.xlsm）ですが、必要な作業毎に起動するのがメンドクサイ。 そこで、①アドインファイル（あ.xlam）に保存後、②アドイン登録しています。 しかし、それすらメンドクサイ。 そこで、①②を実施するマクロと実行ボタンを作りました。 パソコン環境 Windows10 (64ビット) Office365 実行ボタン（登録ボタン） VBA本文 Option Explicit Sub 特定フォルダにアドインの保存() Dim TWMname As String TWMname = Left(ThisWorkbook.Name, Len(ThisWorkbook.Name) - 5) ActiveWorkbook.SaveAs "C:\Users\" & Environ("UserName") & "\AppData\Roaming\Microsoft\addIns\" & TWMname & ".xlam", FileFormat:=xlOpenXMLAddIn ChDir "C:\users\" & Environ("USERNAME") & "\appdata\roaming\microsoft\addins" TWMname = Left(ThisWorkbook.Name, Len(ThisWorkbook.Name) - 5) AddIns.Add Filename:="C:\Users\" & Environ("USERNAME") & "\AppData\Roaming\Microsoft\addIns\" & TWMname & ".xlam" AddIns(TWMname).Installed = True MsgBox (TWMname & ".xlamをアドイン登録しました。") End Sub
せっかく作ったExcelのマクロファイル（あ.xlsm）ですが、必要な作業毎に起動するのがメンドクサイ。 そこで、①アドインファイル（あ.xlam）に保存後、②アドイン登録しています。 しかし、それすらメンドクサイ。 そこで、①②を実施するマクロと実行ボタンを作りました。
Option Explicit Sub 特定フォルダにアドインの保存() Dim TWMname As String TWMname = Left(ThisWorkbook.Name, Len(ThisWorkbook.Name) - 5) ActiveWorkbook.SaveAs "C:\Users\" & Environ("UserName") & "\AppData\Roaming\Microsoft\addIns\" & TWMname & ".xlam", FileFormat:=xlOpenXMLAddIn ChDir "C:\users\" & Environ("USERNAME") & "\appdata\roaming\microsoft\addins" TWMname = Left(ThisWorkbook.Name, Len(ThisWorkbook.Name) - 5) AddIns.Add Filename:="C:\Users\" & Environ("USERNAME") & "\AppData\Roaming\Microsoft\addIns\" & TWMname & ".xlam" AddIns(TWMname).Installed = True MsgBox (TWMname & ".xlamをアドイン登録しました。") End Sub
はじめに どうも！ 今回はionic4で開発をしていてこれはちょっといいなと思った機能をご紹介します ion-wrap-reverseってご存知ですか？ こいつ痒いところに手が届く機能なんです。 ion-wrap-reverseとは 使い方としてはこう <ion-content> <ion-grid> <ion-row class="ion-wrap-reverse"> <ion-col size="12" size-sm> <ion-button color="primary">上だったのに</ion-button> </ion-col> <ion-col size="12" size-sm> <ion-button color="danger">下だったのに</ion-button> </ion-col> </ion-row> </ion-grid> </ion-content> ion-gridに class="ion-wrap-reverse"を追加すると 設定したsizeに合わせてレスポンシブ対応をするんですが、 上下逆になってくれるんです！ cssでも flex-wrap: wrap-reverse;を使えばいけますが class="ion-wrap-reverse"の方が楽チンで好きですw デモ 終わりに ion-wrap-reverseの様なionic特有のクラスっていっぱい有りそうなので 次の記事でまとめやりたいなぁと思います。
どうも！ 今回はionic4で開発をしていてこれはちょっといいなと思った機能をご紹介します ion-wrap-reverseってご存知ですか？ こいつ痒いところに手が届く機能なんです。
使い方としてはこう
<ion-content> <ion-grid> <ion-row class="ion-wrap-reverse"> <ion-col size="12" size-sm> <ion-button color="primary">上だったのに</ion-button> </ion-col> <ion-col size="12" size-sm> <ion-button color="danger">下だったのに</ion-button> </ion-col> </ion-row> </ion-grid> </ion-content>
ion-gridに class="ion-wrap-reverse"を追加すると 設定したsizeに合わせてレスポンシブ対応をするんですが、 上下逆になってくれるんです！ cssでも flex-wrap: wrap-reverse;を使えばいけますが class="ion-wrap-reverse"の方が楽チンで好きですw
ion-grid
class="ion-wrap-reverse"
flex-wrap: wrap-reverse;
ion-wrap-reverseの様なionic特有のクラスっていっぱい有りそうなので 次の記事でまとめやりたいなぁと思います。
結論 IE以外はテンプレートリテラル IEは無名関数 + コメントアウト を使用する ※htsignさんにコメント頂いた内容を更新しました。ありがとうございます。 IE以外(ES6対応ブラウザ) getHtmlTemplete.js let insert_html = ` <div class="greeting"> Hello World! </div> `; document.getElementById("insert_target").innerHTML = insert_html; IE getHtmlTemplete.js let insert_html = function(){/* <div class="greeting"> Hello World! </div> */}).toString().match(/\/\*([^]*)\*\//)[1]; document.getElementById("insert_target").innerHTML = insert_html;
IE以外はテンプレートリテラル IEは無名関数 + コメントアウト を使用する
※htsignさんにコメント頂いた内容を更新しました。ありがとうございます。
let insert_html = ` <div class="greeting"> Hello World! </div> `; document.getElementById("insert_target").innerHTML = insert_html;
let insert_html = function(){/* <div class="greeting"> Hello World! </div> */}).toString().match(/\/\*([^]*)\*\//)[1]; document.getElementById("insert_target").innerHTML = insert_html;
Lottie(ロッティー) は、Airbnb 社が開発したアニメーションライブラリで、2017年2月頃に発表されたものです。 これがとても面白かったので、メモとして残します。 Lottie の特徴 Lottie で使用するデータは、Bodymovin というオープンソースライブラリで作成します。 作成したアニメーションデータを Adobe After Effects で json 形式に変換し、javascript 内で指定の形式で記述すれば、そのアニメーションを表示できます。 通常の html, css, javascript でプログラミングした場合よりも、デザイナーの方が考えたアニメーションを再現できます。 Lottie を使用するメリット アニメーションデータが json 形式なので、画像や動画などの多数の、容量が大きなデータを保持する必要がなくなります。 なので、システム上のディスク使用率をかなり節約できます。 Lottie を使用するデメリット Lottie の Web サイトのサポート機能一覧にあるように、現状実現できない動作はあるようです。 参考：Supported Features Lottie でできないこと 事前に作成したアニメーションデータを json 形式に変換しているので、実行速度を可変にすることはできないようです。 環境の構成方法 Adobe After Effects を導入します。 ZXP Installter をダウンロードします。 Bodymovin をダウンロードし、ZXP Installter を使用してインストールします。 アニメーションデータ作成方法 アニメーションの元となる素材を作成します。 Adobe After Effects でアニメーションを作成します。 Adobe After Effects で Bodymovin プラグインを立ち上げます。 2 で作成したデータを json 形式のデータに変換します。 実装方法 使用するファイルは次の 3 つです。 index.html main.js animation.json index.html <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js" type="text/javascript"></script> </head> <body> <div id="lottie"></div> <script src="main.js" type="text/javascript"></script> </body> </html> lottie の js ファイルの URLを参考に、lottie.js を読み込んでいます。 ちなみに、Github にファイルもあります。 main.js(アニメーション設定) var ani = lottie.loadAnimation({ container: document.getElementById("lottie"), renderer: "svg", loop: true, autoplay: true, path: "animation.json" }); animation.json については、多数のサンプルがある LottieFiles からお借りしました。 注意事項 Chrome ではローカルのファイル読み込みでエラーが出力されますので、Chrome のアイコンを右クリック->プロパティから、リンク先に記載のプログラム名の後に以下を記載するとローカルで読み込み可能になります。 --user-data-dir="<ファイルが配置されているフォルダ(フルパス)>" --disable-web-security 参考：ChromeにてAjaxでローカルファイルにアクセス 所感 アニメーションが小容量のデータで実現できるので、PWA (Progressive Web Apps) との親和性もあると思いました。 オフラインでも問題なく実行できそうな気がします。 参考 Lottie の使い方等について、参考にさせていただきました。 AirbnbのアニメーションライブラリLottie(ロッティー)の使い方 Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など Lottieでアプリにアニメーションを組み込む話（デザイナー編） SwiftでLottieを使ってアニメーションを実装する Lottieで作ったアニメーションをWebサイトで実装（レスポンシブ対応） アニメーションライブラリ「Lottie」を使って、超軽量Webアニメーションを実装する方法 After Effectsでアニメーションをつくるチュートリアル アニメーション実装の選択肢のひとつになると思う。Lottieを試してみた。
Lottie(ロッティー) は、Airbnb 社が開発したアニメーションライブラリで、2017年2月頃に発表されたものです。 これがとても面白かったので、メモとして残します。
アニメーションデータが json 形式なので、画像や動画などの多数の、容量が大きなデータを保持する必要がなくなります。 なので、システム上のディスク使用率をかなり節約できます。
Lottie の Web サイトのサポート機能一覧にあるように、現状実現できない動作はあるようです。
参考：Supported Features
事前に作成したアニメーションデータを json 形式に変換しているので、実行速度を可変にすることはできないようです。
Adobe After Effects を導入します。
ZXP Installter をダウンロードします。
Bodymovin をダウンロードし、ZXP Installter を使用してインストールします。
アニメーションの元となる素材を作成します。
Adobe After Effects でアニメーションを作成します。
Adobe After Effects で Bodymovin プラグインを立ち上げます。
2 で作成したデータを json 形式のデータに変換します。
使用するファイルは次の 3 つです。
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js" type="text/javascript"></script> </head> <body> <div id="lottie"></div> <script src="main.js" type="text/javascript"></script> </body> </html>
lottie の js ファイルの URLを参考に、lottie.js を読み込んでいます。 ちなみに、Github にファイルもあります。
var ani = lottie.loadAnimation({ container: document.getElementById("lottie"), renderer: "svg", loop: true, autoplay: true, path: "animation.json" });
animation.json については、多数のサンプルがある LottieFiles からお借りしました。
Chrome ではローカルのファイル読み込みでエラーが出力されますので、Chrome のアイコンを右クリック->プロパティから、リンク先に記載のプログラム名の後に以下を記載するとローカルで読み込み可能になります。
--user-data-dir="<ファイルが配置されているフォルダ(フルパス)>" --disable-web-security
参考：ChromeにてAjaxでローカルファイルにアクセス
アニメーションが小容量のデータで実現できるので、PWA (Progressive Web Apps) との親和性もあると思いました。 オフラインでも問題なく実行できそうな気がします。
Lottie の使い方等について、参考にさせていただきました。
はじめに 先日、【Ruby】HTTPClientとLINE Notifyを使ってターミナルから文字列を送るプログラムという記事を書きました。 その中で使用しているHTTPClientの学習中に<div>や</div>など、HTMLタグを表す正規表現を見て「便利！」と感じたためまとめました！ どなたかの参考になれば幸いです。 この記事が役に立つ方 HTMLタグが邪魔で除去したい 正規表現初心者 この記事のメリット HTMLタグを表す正規表現を理解し、活用が出来る ついでにRubyの gsubメソッドの使い方が分かる 環境 シェル：zsh Ruby 2.6.3 参考にしたサイト HTTPClientチュートリアルサイトにて。 get_contentメソッドの使用例の中で見かけました。 以下リンクの「The get_content function」の中に書いてあったものです。 Ruby HTTPClient tutorial（英語） HTMLタグを表す正規表現 こちらがHTMLタグを表す正規表現です。 %r{</?[^>]+?>} このコードを順に読み解いていきます。 ↓参照したリファレンスはこちら 正規表現 (Ruby 2.6.0) %r{正規表現を記載} {}内は/などをエスケープして記述する必要がない。 HTMLタグは閉じタグに/が必ず使われているので、通常の/正規表現/というでいちいちエスケープする必要がなくなる%r{}のほうが便利です。 < そのまま<を表す。 /? /が１つあるか、ないか。 [^>] ^を付けた文字は除外される。 つまり、>以外の１文字を表します。 [^>]+? +?は直前に書いたパターンが「1個以上」という意味です。 >以外の文字が1個以上ということですね。 ※2019/11/15追記 この記法は「最小量指定子(reluctant quantifier)」といい、マッチが成功する、最短の文字列にマッチします。 今回のHTMLタグを表すケースでは[^>]+としても同様の挙動を示します。 @scivola さん、いつもありがとうございます！ (もう一度)%r{</?[^>]+?>}とは 「<から始まって/があってもなくてもよくて、最後の>までの間に>以外の文字がいくつかある」 ということになりますね。 つまり、<任意の文字列>か</任意の文字列>ということ！ まさにHTMLタグのことです。 【活用例】gsubメソッドでHTMLタグを除去する (何らかのHTML).gsub(%r{</?[^>]+?>},'') Rubyでgsubメソッドは、文字列の置換をするメソッドです。 上記コードでは <任意の文字列>か</任意の文字列>を''に置換（削除） しています。 例えば、HTMLドキュメントからHTMLタグを除去して可読性を向上する際に使えます。（以下参照） 【Before】 <html><head><title>Something.</title></head> <body>Something.</body> </html> 【After】 Something. # <title>タグ内のもの Something. # <body>タグ内のもの おわりに 正規表現はパッと見てもわからない、でも読み解くと必ず分かるのがいいですね。 よく使いそうな正規表現をリスト化しておき、必要に応じて参照出来るようにしておくと作業効率上がりそう。 参考にさせて頂いたサイト（いつもありがとうございます） Ruby HTTPClient tutorial
先日、【Ruby】HTTPClientとLINE Notifyを使ってターミナルから文字列を送るプログラムという記事を書きました。
その中で使用しているHTTPClientの学習中に<div>や</div>など、HTMLタグを表す正規表現を見て「便利！」と感じたためまとめました！
HTTPClient
<div>
</div>
どなたかの参考になれば幸いです。
gsub
HTTPClientチュートリアルサイトにて。 get_contentメソッドの使用例の中で見かけました。
get_content
以下リンクの「The get_content function」の中に書いてあったものです。 Ruby HTTPClient tutorial（英語）
こちらがHTMLタグを表す正規表現です。
%r{</?[^>]+?>}
このコードを順に読み解いていきます。
↓参照したリファレンスはこちら 正規表現 (Ruby 2.6.0)
%r{正規表現を記載}
{}内は/などをエスケープして記述する必要がない。
{}
HTMLタグは閉じタグに/が必ず使われているので、通常の/正規表現/というでいちいちエスケープする必要がなくなる%r{}のほうが便利です。
/正規表現/
%r{}
<
そのまま<を表す。
/?
/が１つあるか、ないか。
[^>]
^を付けた文字は除外される。 つまり、>以外の１文字を表します。
^
>
[^>]+?
+?は直前に書いたパターンが「1個以上」という意味です。 >以外の文字が1個以上ということですね。
+?
※2019/11/15追記 この記法は「最小量指定子(reluctant quantifier)」といい、マッチが成功する、最短の文字列にマッチします。 今回のHTMLタグを表すケースでは[^>]+としても同様の挙動を示します。 @scivola さん、いつもありがとうございます！
[^>]+
「<から始まって/があってもなくてもよくて、最後の>までの間に>以外の文字がいくつかある」 ということになりますね。
つまり、<任意の文字列>か</任意の文字列>ということ！ まさにHTMLタグのことです。
<任意の文字列>
</任意の文字列>
(何らかのHTML).gsub(%r{</?[^>]+?>},'')
Rubyでgsubメソッドは、文字列の置換をするメソッドです。
上記コードでは <任意の文字列>か</任意の文字列>を''に置換（削除） しています。
''
例えば、HTMLドキュメントからHTMLタグを除去して可読性を向上する際に使えます。（以下参照）
【Before】
<html><head><title>Something.</title></head> <body>Something.</body> </html>
【After】
Something. # <title>タグ内のもの Something. # <body>タグ内のもの
正規表現はパッと見てもわからない、でも読み解くと必ず分かるのがいいですね。
よく使いそうな正規表現をリスト化しておき、必要に応じて参照出来るようにしておくと作業効率上がりそう。
Ruby HTTPClient tutorial
AR.jsを使って遊戯王カード（アニメ版）ぽいゲームを作ってみた 初めてQiitaに投稿いたします。 10月からG's Academyというプログラミングスクールエンジニア養成学校に通っており、入学一ヶ月の成果としてARカードゲームを作りました。 昔からの夢が実現できて嬉しかったのでみんなにも見て貰いたいです。 お前は誰だ 前職は大手SIerで保守運用SEをやってました。 元々IT技術が好きだったのですが、SIerの管理メインの業務に違和感を持って先月晴れて退職をキメました。ビバ無職 プログラミングは独学でdotinstallなどを少しだけ触ってましたが、本格的に始めたのは一ヶ月ほど前にG's Academyに入学してからです。 ちなみに前職では障害対応を通じてLinuxコマンドとSQLを叩きまくる経験を手に入れました。 作ったもの これです。 制作期間は約一週間です。 G’s Academyというエンジニア養成学校に通って一ヶ月目の課題で遊戯王風ARカードゲームを作りました。小学校の頃からの夢が一つ叶いました。見やすくするためにフィールドカードは隠してます。※音が出ますのでご注意。 pic.twitter.com/mhn2MxTAOc— Sugiemon＠SIerを退職してエンジニア修行 (@ySugiemon) November 14, 2019 フィールドカードをセットするとデュエルスタート それぞれのマーカーを読み込ませてモンスター召喚、ターン変更、バトルを実行します。 先にモンスターを２体倒すと勝利です。やったー！ こだわりポイント モンスターの攻撃モーションの多彩さ この後出てきますが、全てa-entityタグにanimation属性を付けたり外したりして実装してます。 setTimeout地獄になっています。もっとスマートにコードを書きたい。 動画に出てこなかった子たち 状態管理 1ターンに行動（召喚・攻撃）できるのは一度までで、それを超えるとメッセージが出るようにしています。 使った技術・サービス ここからは実装についてのお話 A-Frame / AR.js game.html <!doctype HTML> <html> <head> <title>AR Card Game</title> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.8/aframe/build/aframe-ar.js"></script> </head> <body style='margin : 0px; overflow: hidden;'> <a-scene embedded arjs="patternRatio:0.9;"> <a-entity camera></a-entity> </a-scene> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="js/game.js"></script> </body> </html> A-Frameの後にAR.jsを読み込ませるだけでページ起動時にカメラが起動してマーカーを読み取るようになります。 DOMの操作は全てJavaScriptに寄せているため、HTMLはこれだけです。 基本的な使い方はこちらの記事を参考にしました。 A-FrameとAR.jsで超簡単AR（PC・スマホ・マルチマーカー対応） game.js let monsters = [{ name:'plesiomonster', atk:2200, hp:2000, dead:0, },{ name:'dimonstrodon', atk:2800, hp:2800, dead:0, }] $.each(monsters,(i,v)=>{ let $monster = $('<a-marker class="monster" '+ 'id="'+v.name+'" '+ 'type="pattern" '+ 'url="marker/pattern/pattern-'+v.name+'.patt" '+ 'registerd-events>'+ '<a-entity gltf-model="model/'+v.name+'.gltf" position="0 1 0">'+ '</a-entity>'+ '</a-marker>'); $('a-scene').append($monster); } AFRAME.registerComponent("registerd-events", { init : function() { let marker = this.el; marker.addEventListener("markerFound", function() { if($(marker).attr('class') == 'monster'){ // モンスター召喚 } } } } 一部抜粋 a-markerタグにカスタムのpattファイルを指定して認識させ、その中にa-entityを置いてオブジェクトを読み込んでいます。 registerd-eventsを記載しておくとmarkerFoundやmarkerLostなどのイベントを拾うことができるので、モンスターの召喚の他にもフィールドカードやBattleカードのマーカーを作って、markerFoundした時にそれに応じた処理を実行しています。 オブジェクトの動きはanimation属性を追加して実装しています。 例えばモンスター召喚時の迫り上がってくる動きは以下ようになってます。 地道な作業でした。 game.js $('#'+marker.id).children('a-entity').attr('animation','property:position;from:0 -1 0;to:0 1 0;dur:2000;easing:linear;'); カスタムマーカーの作成は以下の記事を参考にAR.js Marker Trainingを使いました。 「AR.js」でオリジナルのマーカーを設定する方法 google Poly / Blender オブジェクトはgoogle Polyから取得しました。 もしアプリケーションを公開したい場合はアセットのライセンスを必ず確認しましょう。 Polyのアセットの多くはCC-BYライセンスで公開されています。 Polyから取得したオブジェクトはサイズや向きがバラバラなことが多いです。 最初はa-entityタグ内でscaleやrotationを調整していたのですが、最終的にはBlenderでオブジェクト自体のサイズを調整しました。Blenderの使い方にけっこう戸惑いましたが、こっちの方が後々楽ですもんね。 感想 この他にも担任の先生を最強モンスターとして登場させたりして、クラスのメンバーからはかなり好評をいただきました。 webGLに初めて触れたのが2週間ほど前でしたが、A-Frame、AR.jsはHTMLとJavaScriptの基礎知識があれば追加の学習はごく僅かで済むので、非常に効率的に開発が進められると思います。 Webの世界では当たり前なのかもしれませんが、こんなものが無料で使えるなんて凄すぎますね。 個人的には2018年のスピルバーグ監督映画の「Ready Player One」のような世界を実現できたら本当に面白そうだなと思っているので、引き続きXR系の技術で色々作っていきたいです。
初めてQiitaに投稿いたします。 10月からG's Academyというプログラミングスクールエンジニア養成学校に通っており、入学一ヶ月の成果としてARカードゲームを作りました。 昔からの夢が実現できて嬉しかったのでみんなにも見て貰いたいです。
前職は大手SIerで保守運用SEをやってました。 元々IT技術が好きだったのですが、SIerの管理メインの業務に違和感を持って先月晴れて退職をキメました。ビバ無職
プログラミングは独学でdotinstallなどを少しだけ触ってましたが、本格的に始めたのは一ヶ月ほど前にG's Academyに入学してからです。 ちなみに前職では障害対応を通じてLinuxコマンドとSQLを叩きまくる経験を手に入れました。
これです。 制作期間は約一週間です。
G’s Academyというエンジニア養成学校に通って一ヶ月目の課題で遊戯王風ARカードゲームを作りました。小学校の頃からの夢が一つ叶いました。見やすくするためにフィールドカードは隠してます。※音が出ますのでご注意。 pic.twitter.com/mhn2MxTAOc— Sugiemon＠SIerを退職してエンジニア修行 (@ySugiemon) November 14, 2019
G’s Academyというエンジニア養成学校に通って一ヶ月目の課題で遊戯王風ARカードゲームを作りました。小学校の頃からの夢が一つ叶いました。見やすくするためにフィールドカードは隠してます。※音が出ますのでご注意。 pic.twitter.com/mhn2MxTAOc
フィールドカードをセットするとデュエルスタート それぞれのマーカーを読み込ませてモンスター召喚、ターン変更、バトルを実行します。 先にモンスターを２体倒すと勝利です。やったー！
この後出てきますが、全てa-entityタグにanimation属性を付けたり外したりして実装してます。 setTimeout地獄になっています。もっとスマートにコードを書きたい。
a-entity
animation
動画に出てこなかった子たち
1ターンに行動（召喚・攻撃）できるのは一度までで、それを超えるとメッセージが出るようにしています。
ここからは実装についてのお話
<!doctype HTML> <html> <head> <title>AR Card Game</title> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.8/aframe/build/aframe-ar.js"></script> </head> <body style='margin : 0px; overflow: hidden;'> <a-scene embedded arjs="patternRatio:0.9;"> <a-entity camera></a-entity> </a-scene> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="js/game.js"></script> </body> </html>
A-Frameの後にAR.jsを読み込ませるだけでページ起動時にカメラが起動してマーカーを読み取るようになります。 DOMの操作は全てJavaScriptに寄せているため、HTMLはこれだけです。 基本的な使い方はこちらの記事を参考にしました。 A-FrameとAR.jsで超簡単AR（PC・スマホ・マルチマーカー対応）
let monsters = [{ name:'plesiomonster', atk:2200, hp:2000, dead:0, },{ name:'dimonstrodon', atk:2800, hp:2800, dead:0, }] $.each(monsters,(i,v)=>{ let $monster = $('<a-marker class="monster" '+ 'id="'+v.name+'" '+ 'type="pattern" '+ 'url="marker/pattern/pattern-'+v.name+'.patt" '+ 'registerd-events>'+ '<a-entity gltf-model="model/'+v.name+'.gltf" position="0 1 0">'+ '</a-entity>'+ '</a-marker>'); $('a-scene').append($monster); } AFRAME.registerComponent("registerd-events", { init : function() { let marker = this.el; marker.addEventListener("markerFound", function() { if($(marker).attr('class') == 'monster'){ // モンスター召喚 } } } }
一部抜粋 a-markerタグにカスタムのpattファイルを指定して認識させ、その中にa-entityを置いてオブジェクトを読み込んでいます。 registerd-eventsを記載しておくとmarkerFoundやmarkerLostなどのイベントを拾うことができるので、モンスターの召喚の他にもフィールドカードやBattleカードのマーカーを作って、markerFoundした時にそれに応じた処理を実行しています。
a-marker
registerd-events
markerFound
markerLost
オブジェクトの動きはanimation属性を追加して実装しています。 例えばモンスター召喚時の迫り上がってくる動きは以下ようになってます。 地道な作業でした。
$('#'+marker.id).children('a-entity').attr('animation','property:position;from:0 -1 0;to:0 1 0;dur:2000;easing:linear;');
カスタムマーカーの作成は以下の記事を参考にAR.js Marker Trainingを使いました。 「AR.js」でオリジナルのマーカーを設定する方法
オブジェクトはgoogle Polyから取得しました。
もしアプリケーションを公開したい場合はアセットのライセンスを必ず確認しましょう。 Polyのアセットの多くはCC-BYライセンスで公開されています。
Polyから取得したオブジェクトはサイズや向きがバラバラなことが多いです。 最初はa-entityタグ内でscaleやrotationを調整していたのですが、最終的にはBlenderでオブジェクト自体のサイズを調整しました。Blenderの使い方にけっこう戸惑いましたが、こっちの方が後々楽ですもんね。
scale
rotation
この他にも担任の先生を最強モンスターとして登場させたりして、クラスのメンバーからはかなり好評をいただきました。
webGLに初めて触れたのが2週間ほど前でしたが、A-Frame、AR.jsはHTMLとJavaScriptの基礎知識があれば追加の学習はごく僅かで済むので、非常に効率的に開発が進められると思います。 Webの世界では当たり前なのかもしれませんが、こんなものが無料で使えるなんて凄すぎますね。
個人的には2018年のスピルバーグ監督映画の「Ready Player One」のような世界を実現できたら本当に面白そうだなと思っているので、引き続きXR系の技術で色々作っていきたいです。
