カテゴリー: オープンソース

沖縄も遂に梅雨に入りましたね！
雨に濡れて風邪引かないように気をつけましょう！

さて、今回はHTML５で追加されたimgタグに追加する値のsrcset属性が便利なので紹介します。
srcsetタグでできることはratinaのディスプレイで表示する際に大きい画像に自動的に変更されたり、画面サイズに合わせて表示を変えたりと様々なことに使うことができます。

普通imgタグを書くときは、
<img src=”abcd.jpg” alt=”イメージ”>
で表示させたい画像を指定して行くのが普通の使い方なのですが、これにsrcsetタグを指定して画面サイズを指定していく事ができます。

画面サイズが４００ｐｘ以下や８００ｐｘ以下はちょっと縦長のに変えたりや用途が様々あります。
例えば、、、、、
<img src=”abcd.jpg” srcset=”abcd-m.jpg 600w, abcd-l.jpg 800w” alt=”イメージ”>
こうすることによって、600px以下ではabcd-m.jpg　800px　以降もしくは以上は
abcd-l.jpgが表示されます。
画像を数種類用意しないと行けないですが自分の表示させたい画像をスムーズに切り替える事ができます。

まだ使えないブラウザのバージョンが時々あるので、もうちょいバージョンアップが進めば主流で使えそう！と思いました！！

マックで二つのPCを一つのマウスとキーボードで操作する方法がすごく便利だったので、メモします。

Teleportを使うとPC間の写真の移動やキーボードとマウスを一つでデュアルモニターを使う感覚で使う事ができるので便利です。

設定も簡単ですぐに扱う事ができるので一つは写真を加工してもう片方は映像関係を触るときなどですごく便利です。それぞれPCになってるのでそれぞれのパソコンで処理が行われるため、重くなったりもないのですごく便利！！

ダウンロードサイトはこちら

設定画面もシンプルに書かれていてすごく便利です。

CPUが熱がこもりすぎると熱暴走でマザーボードが焼けたり、他の部品も巻き添えで焼けたりなど色々問題もありますよね！

今のPCは熱が上がりすぎるとセーフティーが働いてCPUの活動量を減らしたりして熱を下げようとするため、PCの操作がカクカクします。

今回はCPUの温度を測るアプリは色々ありますが、無料ですごく簡単に扱えるCORE TEMPの使い方を説明します。

ダウンロードページはコチラ　CoreTemp

まずインストールして起動するだけでCORE TEMPがCPUをチェックしてくれます。

大まかに気にするのはこの５つでしょうか。

①CPUについてるCORE数

②PCについてるCPUのモデル名

③CPUに使われてる電力

④CPUに定められた最大温度（この温度を⑤が越えるとヤバイ）

⑤COREそれぞれの温度の数値

③の電力は低いほど発熱が低く　高いほど発熱が高くなるので注意です。

今回は、古くなったサイトをリメイクした際にURLを変更する方法のメモを書きます。

後半は、昔のHTMLで作られたサイトをリダイレクトする際のメモです。

最初にやるのがディレクトリの一番上にある（wp-admin などある場所）にある

.index.php と .htaccessをコピーします。（ない方は設定のパーマリンク設定で保存を押してみてください）

赤線が引かれてるフォルダです。

そのあとにその中身を変更していきます。※元のindex.php .htaccessを削除しないでください

この二つのファイルを上の階層のwordpress １にアップします。

 

次にコピーして移動したindex.phpを修正します。

赤い下線が書かれてる場所を上の階層に変更します。

この用な形にすればおkです！

そうすると普通はhttp://www.aiueo.com/wordpress1/wordpress2/index.php（例） だったものが上の階層になって

http://www.aiueo.com/wordpress1　になります。

【注意】

忘れては行けないのがwordpress内設定の一般にあるサイトアドレスを一個上の階層にしてください。

そして、サイトのデータを変更する際にURLを変更しないでリダイレクトさせる方法です。

.htaccessを開いて中身を修正していきます。

.htaccessの中にリダイレクトさせるためのコードを追加していきます。

Redirect 301 であとに画像のようにサイトのデータを書いていきます。

例えば、、、、、

http://www.aiueo.com/wordpress1/index.html だとして（htmlファイル）それをwordpressの固定ページを表示したい場合

リメイクで作ったファイルの固定ページのURLもwordpress1に変更して

Redirect 301 /wordpress/index.html　プログラムなので半角空白　http://www.aiueo.com/wordpress1

というふうに繋げると　http://www.aiueo.com/wordpress1/index.htmlにログインした際にURLがhttp://www.aiueo.com/wordpress1に変更されます！

さてデジタルドリームワークスからHigaです。
以前に投稿した、「WordPress 管理メニュー、ページの追加」の続きを行います。

WordPress 管理メニュー、ページの追加

今回はさっそくフィールドを追加、データを登録する部分を勉強していきたいと思います。
前回のテーマページへフィールドを追加…
のはずが、どうも上手くいかず宿題です。
来週に持ち越しということですみません！

というわけで、今回は独自のフィールドを「設定」->「一般」のページ内に追加します。

以下がfunction.php内に記述したコードになります。

ざっくりとポイントを説明します。
WordPressにはフィールドを設定できる関数が用意されています。
素晴らしい！！

● add_settings_section

設定ページでヘッダを共有するいくつかの設定のまとまりです。
設定項目をまとめて表示することができます。HTMLでいうsectionタグ内で囲う部分みたいなイメージでしょうか。

——

● add_settings_field

設定項目を設定ページとセクションへ登録します。
どのsettings sectionに登録するのか、どのような項目を追加するか設定できます。

——

● register_setting
設定項目と無害化用コールバックを登録します。
どちらかというと、こちらで項目を登録して、add_settings_fieldで出力しているイメージでした。

項目が表示されているか確認してみましょう！
管理画面「設定」->「一般」 に表示されていますね。

さて実際に登録できるようになれば、この設定項目をテーマに反映させていきましょう。
今回はGoogle Map API キーを管理画面から登録出来るような形にしました。

項目に値が入っていれば、JSコードを出力します。
出力にはget_option関数を使用して出力。

出来ましたね♪
今回出来なかった部分は次回に投稿出来ればと思います。
間違っている部分やおかしい部分があればぜひコメントいただけると幸いです。

お正月に家でパソコンを使う時に動画を見るのもすごく遅くて、今だにADSLというのが問題なのですが色々調べてみました。

ネット環境を使う場合ネットの回線はすごい重要になってきます。

その中でもBNR=Broadband Network Report 回線速度の下りと上りですね。

光回線を使ってる人には全然関係無いかと思うのですが、光回線を使っていても遅いという場合は一度チェックして見るのもいいのでは無いかと思います。

チェックできるサイト、

URL:http://www.musen-lan.com/speed/

このサイトの測定を押すと１０秒後に測定が開始されます。

そこで出てくる赤文字のところが大体の回線速度になってきます。

それ以外にも重要なのがLANケーブル、これはあまり知られてないのですが

LANケーブルにはカテゴリーが分けられていて、契約時にもらえるコードは大体カテゴリー５のLANケーブルとなっています。

現在市販で買うと大体　カテゴリー５e　もしくはカテゴリ−６となっています。

値段は少し高くなるのですが、新しく発売したカテゴリー７のケーブルがすごくおすすめです。

あまりにも遅すぎると動画が止まったりとストレスが多くなってきますので早くするのがおすすめです！

最近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の開発を進めてるらしく家でも映画館で見るような大迫力で映画や映像を楽しむ事ができるようになりそうですね！！

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

shadowbox　自分用メモ

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

使うのはこれも簡単で

https://github.com/mjackson/shadowbox

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

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

前回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の値もほぼ使えるかと思うのでちょっと自分でアレンジする事も出来るのでいい感じに使えるのでオススメです！