作者別: ddwnet

最近VR＝バーチャルリアリティ（仮想現実）が流行ってるらしく機能紹介

VRを販売してる会社は数カ所あるのですが、

VRとは？

VRとは、ゴーグル状になってる機器を頭にかけて使用するもので、それをつけることによって動画をもっと間近に立体的に見ることができます。

普通動画を見たりゲームをしたりする際テレビから離れて見ることが多いので迫力があんまり感じられないものが全然違う感覚で見ることができます。

ただ問題は、据え置きのゲーム機で（PS４ or xbox）などで映像を見たりゲームする際はゲーム機＋VR機のみが必要なのでコストはそこまでかかりませんが、
PCで使用する際はVR自体結構なスペックがいるので、GPUやCPUを結構な性能のものを積まなくてはいけなくなるので、普通のPCでは性能を最大限に活かせないっていう問題が出てきます。

※もっと専門的な部分になると、

CPU: I7以上　（もうちょい低くても大丈夫そうですが念のため）

GPU: Geforce970以上　Redeon290以上

メモリ: 8G　（多ければ多いほど良い）

VRの中での映像はというと、

これはジェットコースターAndroid app　をプレイしてる際の映像らしいです。

PCでVRを使ってる映像になると、

これは、Steamというサイトで、ASSASSIN’S CREEDというゲームを入手してプレイしてる映像らしいです！

これから年末、ものすごい数の人がVRを買う人が増えそうです（笑）
VR自体手頃な価格では無いので手を出すのを躊躇いますが、この映像を見て欲しくなるのでは無いでしょうか？？
現在いろんな会社がVRの開発を進めてるらしく家でも映画館で見るような大迫力で映画や映像を楽しむ事ができるようになりそうですね！！

年末、羽目を外しすぎて怪我しないように安全で楽しい年末を過ごしましょう！！

SassをCssにコンパイルするアプリは色々ありますが、今回はCompassについて説明させていただきます。

コンパスは扱うのがとてもシンプルで、設定をするだけですぐに扱うことができます。

コンパスのダウンロード場所：http://compass.kkbox.com/

アプリを起動すると右上にコンパスのマークがでてクリックするとこのようにメニューがでるかと思います。

ここWatch a folder…でコンパイルするサイトのフォルダーを指定していきます、

※注意

この指定するフォルダはそのcssやsass imagesフォルダの上に指定してください

その指定が終わると今度は、ちゃんと中身のファイルを指定してるかチェックします。

change optionsで指定されてるファイルをチェックしていきます。

ここで指定すればアプリを使う準備は万端ですのでサクサク使っていくことができます。

 

今回は制作でwordpressを使う際にひっかかった部分があったのでメモです。

投稿でブログは詳細ページが必要なのとお知らせはいらないと仮定して制作する場合、

両方をカテゴリーで分けてやるのが大変なので二つ作って表示を二つとも変える方向で作りました。

その際のテンプレートの作り方メモ

テンプレートを作るのはすごーく簡単でした！

phpの名前はなんでもいいのですが、今回は　content.phpとしておきます。

phpのヘッドの上の部分にコメントアウトでTemplate Name: (名前)これだけで簡単に作ることができました。あとは固定ページの中の固定ページの属性で設定すればできます。

こんなに簡単に表示を変えることができたら、一つのページを全然違う見た目に変えたりできるので１ページ１ページを、おしゃれに変更することができて便利ですね！！

 

shadowbox　自分用メモ

ウェブ制作をする際に画像を綺麗に出すjsプラグインは色々ありますが今回はshadowboxのメモをします。

使うのはこれも簡単で

https://github.com/mjackson/shadowbox

このURLから持ってきて自分のディレクトリーにcssとjsを設置するだけで 機能を追加することができます！

このファイルの中身がこうなっています。

今回は初めて自分で設置してみた、Advanced Custom Fields の設置メモです。

投稿項目を分けたかったので今回は”店鋪情報”と投稿を分ける事にしたので”店鋪情報”ではこのカスタムフィールドが表示されて、投稿では表示されないって風に設定したかったのですが、まだ表示されないってのは未確認です。

Advanced Custom Fieldsはプラグインから新規追加orサイト（プラグインのサイトに飛べます）から持って来たのを有効化します。

有効化するとカスタムフィールドが出てきたらインストールは成功してます。

カスタムフィールドの中まで行くと

フィールドを追加する際にフィールドタイプというので書き込む項目の仕様が変わってきます。

フィールドタイプをクリックすると項目が出てくるので自分の任意の物を選んで

 

フィールド名を追加する。

このフィールド名はテンプレートで追加する際に凄く重要なので半角英数でわかりやすいようにやるといいです！

 

これでアドバンスフィールドのタイトルが投稿の中に追加されたと思います。

この値を表示する為にテンプレートに必要となるコードが、

<?php the_field('title'); ?>

これだけですぐに出す事が可能の用です。

もっとカスタマイズすると色々コードが必要になりそうです。

 

jsを触った際に困った困ったことがあったのでメモです。

ページの中でタブ切り替えで表示させすのは凄くおしゃれですよね！！そのやり方のメモです！

①

$(“tab”).click(function() {
$(“tab li”).removeClass(“active”);
$(“コンテンツ”).hide();
var activeTab = $(this).find(“a”).attr(“href”);
$(activeTab).fadeIn(800);

return false;
});

 

②
var hash = location.hash;

hash = (hash.match(/^タブ切り替えしてるid\d+$/) || [])[0];

　　if($(hash).length){
var tabname = hash.slice(1);
//$(this).addClass(“active”);
$(“コンテンツ”).hide();
var activeTab = ‘#’ + tabname;$(activeTab).fadeIn(800);
} else{

③
$(“.コンテンツ”).hide();
$(“tab li:first”).addClass(“active”).show();
$(“コンテンツ:first”).show();

}

①クリックアクション用の切り替えjs

②他ページから飛んだ場合にハッシュタグを検索して切り替えるjs

③もし見つからなかった場合最初のコンテンツが表示される用のjs

これらのjs入れて動きは上手く行くのですが、他ページから飛んだ時にwebの最上部に飛ばずにアンカーポイントに飛んでしまうので
その修正の方法を模索中です！

前回Affinity Designerがどのようなソフトなのか紹介しましたが今回は少しだけ機能を紹介します。

まだまだイラストレーターほど出来る事は多くないのですがPhotoshopの機能がちょっとだけあって、

表示はだいたい似てるのですぐに察しがつくと思います。

１、この図形は正方形、円形、角丸正方形、図形ツールです。これは全部まとめてくれるとだいぶ嬉しいですね！

２、これはスライスツールと同じ機能です。

機能的にはまだまだ足りない部分もちらほらあるのですがどんどん性能的に上がってきている感じがします。

色々なところに機能が散ってますが、アイコンを見て性能がだいたいわかるようになっています。

一番ビックリした性能が保存なのですが、

保存できる形式が多い！　AI形式で保存はできないもののpsdにも対応しているのでphotoshopとも連携が出来るので使いやすい！

私の周りにはphotoshop使ってる方が多いのでpsd形式で保存出来ると連携が取りやすいのでかなり便利です！

編集ソフトを使ってる方なら直感的に操作ができるのでかなり使い勝手がいいです。

slick メモ

スリックの使い方は前回の記事に描いたので今回は使い方の一部をメモします。
Slider Syncingの使い方

 

この↑のjsの組み込み方です。

js記述はサイトの方にある書き方でおkです。

$(‘.slider-for‘).slick({

slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: ‘.slider-nav‘
});

$(‘.slider-nav‘).slick({
 slidesToShow: 3,
slidesToScroll: 1,
asNavFor: ‘.slider-for‘,
dots: true,
centerMode: true,
focusOnSelect: true
});

.slider-forは.slider-navのdivと連携しているのでhtmlの書き方も普通に使う時とはちょっとだけ変わっています。

<div class=”slider-for”>

<div>画像</div>
<div>画像</div>
<div>画像</div>
<div>画像</div>

</div>

<div class=”slider-nav”>

<div>画像</div>
<div>画像</div>
<div>画像</div>
<div>画像</div>

</div>

こんな感じに記述します。そうすると両方連携してて変えた方に両方変更するようになります。
Slickの値もほぼ使えるかと思うのでちょっと自分でアレンジする事も出来るのでいい感じに使えるのでオススメです！

Web制作するときにボタンを作る際に簡単にボタンに効果をつけたり動きをつけることがありますよね？？

その際便利なプラグインがあります。

Hover.cssというプラグインがあって、海外の方が制作したすごーーーく便利なプラグインです。

sassでも作られてるファイルがあって、css　sass　どっちでも使う事が出来ます。

デモサイト

↑上から飛ぶとどんな種類の効果があるのか調べる事が出来ます。

使い方もファイルをダウンロードしてきて、いつも通り読み込ませるだけ！

あとは、それぞれのクラスをふるだけで様々な見た目に変える事が出来ます。

ちょっとこのクラスは惜しい！ちょっと変えたい！って時でもファイルの中身の箇所を修正するだけですぐにちょびっと変える事が出来ます！

このファイルの便利なところはすべてCSSで記述されてるので簡単にちょっと変更を加えたり扱う事が出来る！

jsなどの場合はちょっと難しかったりエラー起きたら大変ですよね？

かなりオススメです！

windows１０にアップデートした際にインターネットに繋がらなくなる場合があります。

その場合チェックすると良い方法です！

すご〜〜〜く稀に起きる事なのですが、マザーボードがウィンドウズ１０に対応してない場合があり、

その場合に使える手段です、マザーボードのデバイスは自動でアップデートしてくれないらしく、その原因？で接続が出来なくなる場合があるみたいで、

その際はマザーボードの公式サイトから新しいデバイスをダウンロードしてインストールすると良いです！

＊＊＊＊注意点＊＊＊＊

インストールする際に古いデバイスがインストールしてるとアンインストールしてくれない場合があるので、プログラムの削除で古いデバイスをアンインストールしてから新しいのをインストールしてください。