データの解像度「ppi」と「dpi」

初めまして。tutinokoと申します。

デザイン的なことを勉強しながらやりつつ、Javaもやったりします。

 

先日Illustratorでpdfに書き出す際に、データを軽くするために解像度を下げる方法を探してちょっと気になるところを発見しました。

画面で画像を表示させるのに、解像度は72dpiに設定する方が多いと思います。

しかし、ダイアログに表示されているこの単位

ppi…

dpiはよく目にしますが、ppiってあんまり見慣れないなーと。

うまく説明できるほど理解できていなかったので、ちょっと調べてみました。

 

dpiとは

dots per inchの略で、1インチあたりのドットの数のことを指します。

 

ppiとは

pixels per inchの略で、1インチあたりのピクセルの数のことを指します。

 

あれ、ドットとピクセルって大した違いがないんじゃ・・・

これ、ディスプレイで画像を見る分には大きな違いがないのですが、印刷物にする際に違いが出てくるようです。

 

イメージはこんな感じらしいのですが、印刷物はドットの集合体で、ピクセルより黒の密度が低いため、解像度を高く設定しないと、画像の荒い印刷物になってしまうということなんですね。

大雑把にppiは画面で使用するもの、dpiは印刷で使用するもの…と覚えておけばよいのではないでしょうか。

それではこの辺で。

初詣に行って来ました!

どうもtaeminです!ヾ(*’▽’*)o
明けましておめでとうございます〜!
本年も宜しくお願いいたします〜!

今週頭に社員一同、明治神宮に初詣に行って来ました〜〜!
サプライドは明治神宮に隣接したビル内にあるオフィスなので、新年早々 明治神宮のパワーを頂いてきちゃいました٩( ‘ω’ )و

東京のど真ん中なのにも関わらず、こんなにも樹々が多くてとても神聖な感じです。

御殿が見えてきました!

社員みんなでお賽銭入れてご祈願してきましたよ(*’ω’*)
みんな何を願ったのでしょうね??( ̄人 ̄)oO(今年こそ素敵な彼氏くんができますように)

社員さんから聞いたのですが、拝殿の前にある2本の楠木は「夫婦楠」と言って、「夫婦円満」「家内安全」の象徴の御神木だそうです( ̄人 ̄)oO(どうか私の祈りを聞き届けたまへええ、、、あ、けど、夫婦楠だから既に相手がいないとダメなのかも??!Σ(T▽T;)わーん)

冗談はさておき、、、
参拝にて明治神宮のパワーも貰い、今年2018年もサプライドはさらに邁進いたす所存ですので、みなさま本年もお付き合いのほど宜しくお願いいたします!

それではtaeminでした~~~ヾ(*’▽’*)o マタネー♪

【中級者向け】ゲーム設計で学ぶobserverパターン!

こんにちは!
今日はプログラムの設計でよく見るobserverパターンについてだよ!

「こういう処理が走ったら、特定のオブジェクトにこういう処理をさせたい!」って時よくあるよね???ゲーム設計に限らずだと思うけど!

その時にif文case文地獄にならないように設計できるのがobserverパターン!

用意するのはざっくり2つ!

1、「こういう処理が走ったら」を感知するsubject

2、その感知に対してどういう処理を行うかのObserver

subjectがObserverを管理して登録したり削除したり感知するメソッドを用意!
Observerは感知された時に呼び出される処理を書く!

今回は花壇に水をやってそれを感知する花と花壇の水量を観察するクラスを作っていきましょう!
今回はC#で書くかphpで書くか迷ったけど最近phpばっかだからphp(言語は違っても考え方は同じだから!!!)

まずは花壇クラスを作成!上で言うsubjectの部分!
Flowerbed.php

<?php 
/**
 * Subjectクラス+ConcreteSubjectクラスに相当する
 */ 
class Flowerbed { 
  private $waterCnt; 
  private $listeners; 
  public function __construct() { 
    $this->listeners = array();
    $waterCnt = 0;
  }

  /**
  * 植物に水を与えたときに呼ぶメソッド
  */
  public function addWater()
  {
    $this->$waterCnt++;
    $this->notify();
  }

  /**
  * 水を与えた回数を取得
  */
  public function getWaterCnt()
  {
    return $this->$waterCnt;
  }

  /**
  * Observerを登録するメソッド
  */
  public function addListener(PlantListener $listener)
  {
    $this->listeners[get_class($listener)] = $listener;
  }

  /**
  * Observerを削除するメソッド
  */
  public function removeListener(PlantListener $listener)
  {
    unset($this->listeners[get_class($listener)]);
  }

  /**
  * Observerへ通知するメソッド
  */
  public function notify()
  {
    foreach ($this->listeners as $listener) {
      $listener->update($this);
    }
  }
}
?>

次はインターフェース部分!抽象メソッドを定義するよ!
PlantListener.php

<?php
interface PlantListener {
    public function update(Flowerbed $flowerbed);
}
?>

次は花壇の水量を観察するクラスを作っていこう!(上で言うObserverのとこ!)
AmountWater.class.php

<?php
  require_once 'PlantListener.php';
/** 
* Observerクラスに相当する 
*/
class AmountWater implements PlantListener { 
  public function __construct() { } 
  public function update(Flowerbed $flowerbed) {
   echo '現在の水量は'.$flowerbed->getWaterCnt().'です';
 }
}
?>

次は具体的な花のクラスを作るよ!今回はアサガオと向日葵!
Asagao.class.php

<?php
require_once 'PlantListener.php';

/**
 * Observerクラスに相当する
 */
class Asagao implements PlantListener
{
    public function __construct(){}
    public function update(Flowerbed $flowerbed)
    {
     echo 'アサガオが水をもらいました';
    }
}
?>

Himawari.class.php

<?php
require_once 'PlantListener.php';

/**
 * Observerクラスに相当する
 */
class Himawari implements PlantListener
{
    public function __construct(){}
    public function update(Flowerbed $flowerbed)
    {
      echo '向日葵が水をもらいました';
    }
}
?>

これで準備おK! あとは水をあげるボタンを用意してそれぞれのオブジェクトをよぼう!
observer_client.php

<?php
 require_once 'Flowerbed.php';
 require_once 'Himawari.class.php';
 require_once 'Asagao.class.php';
 require_once 'AmountWater.class.php'; 
//花壇と花を作成してSubjectに登録 
function createCart() { 
 $flowerbed = new Flowerbed(); 
 $flowerbed->addListener(new Himawari());
 $flowerbed->addListener(new Asagao());
 $flowerbed->addListener(new AmountWater());
 return $flowerbed;
}

session_start();
$flowerbed = isset($_SESSION['flowerbed']) ? $_SESSION['flowerbed'] : null;

if (is_null($flowerbed)) {
 $flowerbed = createCart();
 $_SESSION['flowerbed'] = $flowerbed;
}

$mode = (isset($_POST['mode']) ? $_POST['mode'] : '');

//水をあげた時にFlowerbedのaddWater関数を呼ぶ
if ($mode != '') {
 $flowerbed->addWater();
}

?>
<form method="post" action="">
 <input type="hidden" name="mode" value="add">
 <input type="submit" value="水をあげる">
</form>

これでobserver_client.phpを開いて水をあげれば下記のようになるよ!

今回は文字を表示させているだけだけど、実際に走らせたい処理を書いてあげるといいよ!
花が増えたり、観測者を増やしたいなら別途そのオブジェクトを管理するファイルを作って登録させるだけ!
これで条件分岐地獄にはならずにオブジェクトごとに管理もしやすくてバグも起こりにくいよ!

ちょっと長かったけどぜひこの設計やって見てね!
以上!河条でした^o^

Live2D Creators Conference alive 2017

に、参加してきました、どうも!taeminでっす^o^
先日12月4日(月)に秋葉原UDXにて、Live2Dのイベントがありました〜

企業さんや個人の方のトークセッション、Live2Dを使った製品の展示、 Live2Dを使用したオリジナル短編アニメ「The Lamp Man」の上映などなど、内容盛りだくさんのイベントでしたー!(ついイベントに熱中してしまい写真を撮ることを忘れていた・・・)

お話ししてくださった方々、
スタッフの方々、
企業関係者の方々、

この場を借りてお礼申し上げます!
とても楽しい勉強になるイベントでした!
年に一回のこのイベント、次回開催はまた来年ですが、今からもう既に楽しみです^o^!
それまでにもっとLive2Dの勉強をするぞー!

 

 

さてさて、、一人突っ走ってしまいましたが、
Live2Dとはなんぞや??という方のためにご説明しますと、

Live2Dとは、
2Dのモーフィングによるシームレスアニメーションを可能にする映像表現および関連ソフトウェアの総称である。
3D制作するよりも原画の画風を保ったままキャラクターを動かせる特徴を持ち、低コストでの制作を可能にする。
byウィキペディア

 

はい、そうなんです、Live2Dとはアニメーションを作れるソフトウェアなんです!

 

我が社のスマホアプリ、Ghost Crashのライちゃんを例にしてアニメーションを作成しますと、

まず、キャラクターのイラストを一枚描きます。

はい、
動かすためのイラスト制作はこれで終わりです。

通常、アニメーションを作る時は動かすために何枚もイラストが必要なわけですが、、、
Live2DだとこれだけでOKです。(動きにこだわる際は何パターンか差し替え用のイラストを用意する場合もある)

 

そしてそれを元にパーツわけをして、、

 

Live2Dに読み込んで(色々省略して)動かすと・・・

動きます!!!
自分が描いたキャラクターが動いた時の感動たるや・・・!!!!!

 

まだまだLive2Dのお勉強を始めたばかりなので、先ほど省略した部分はまた次の機会にでも書けたら!
まだこれくらいしか動かせないけど、今後もっともっとキャラクターを生き生きと動かせるように頑張るぞー!

 

そして今回Live2Dのイベントに参加して思ったのは、
このLive2Dという技術は、現在とても需要のある技術なのだな、
という事でした。

ご興味ある方は是非一度Live2Dをやってみてはいかがでしょう?
絵描きさんであれば、自分の描いたキャラクターが動く感動を是非一度味わってみてくださいー^o^!

では!

ちょっと差をつけよう!?【HTML】オッシャレーな便利機能【CSS】

ちょっと差をつけよう!?【HTML】オッシャレーな便利機能【CSS】

こんにちは!bibiです。

今回は、テキスト選択時のハイライトのカラーを変更する小技をこっそりお教えします!

工程は超カンタン!

cssにこちらを記述します。今回はハイライトに鮮やかな赤色を指定。

これでOK!どうでしょう!この1ステップのみのお手軽さ!!!

ここに例えば、文字色自体をこのように変えたり

P要素のみに限定してハイライトをつけたり

意外と自由度高く行うことができます!

これであなたもハイライト・マスター!!!!