0と1の隙間。PCから「小数点」を考える。

こんにちは!鳩豆です!

前回の「デジタル」を今更考えてみたよ、の記事に続き今回は0と1の隙間、、小数点の世界はPCではどうなっているのか考えてみたい。

PCでは2進数ベースであるものの、実際は色んな進数を組みわせて処理するらしい。
2進数で計算し、16進数に変換、はたまた10進数で表示する・・・・などなど。
す、すごい。

そこでふと疑問が湧いた。
そういえば小数点ってどうするんだろう?
2進数って桁が多いのに、さらに桁が小数点以下に付くと、いくら処理が早いからって流石に横に並びすぎじゃね?というショーもない疑問が湧いたのだった。

2進数で
1+1 は…10

もう桁が増えたーーー。

10進数の小数点
12.2は
2進数で
10110.00110011001100110011001100110011001100110011001100110011
(打ち切り)

桁が多っ。打ち切らないと大概、小数点部分は循環する。

この桁数をビットの情報に乗せるということはさらに(ものすごい雑に言うと)桁が増えることになる。
1文字も8ビットで表現する場合、この桁数は桁数だけですでに合理的じゃない。

と言うことで。
心配するまでもなくしっかり準備されていた。

PCでは浮動小数にして情報を渡すらしい。

「浮動小数点数」のwikiによると・・・・

浮動小数点数(ふどうしょうすうてんすう、英: floating point number)は、浮動小数点方式による数のことで、もっぱらコンピュータの数値表現において、それぞれ固定長の仮数部と指数部を持つ、数値の表現法により表現された数である。

うむ,なるほどー。
全くわからんわっ!!

文字の意味を調べて、その説明文が何一つわからん時の悲しみと言ったら・・・気を取り直して説明すると・・・・

12.345(10進数)を内部で処理する際に、

12.345を符号と指数と仮数に分けます。(そういえば習ったな〜)

符号(ビット先頭)は正の数なので符号は0、

12と0.345に分けて、
二進数に変換してみると・・・

12⇨1100と
0.345⇨010110000101000111101011100001010001111010111000100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

0がまだ多いので大変だ……
そこで小数点を左に移動させて1だけ残して表現すると、

1.100010110000101000111101011100001010001111010111000100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
x(かける)
23

と表現できる。まだ多い・・・・

そこで今回は単精度のfloatで指数と仮数を32ビット(4byte)で表現する。

32ビットでは先頭が符号、後の8桁が指数部、残り23桁が仮数部となるので、

0 10000010 10001011000010100011110

結合すると、

01000001010001011000010100011110

12.345はと32bitのfloatでは↑で表現しているのだね…..ふう、やれやれ。

いつも処理とか、いろいろありがとうパソコン君!
ではまた!

【Slack】【Google Drive】【サイボウズ】クラウドツールを活用しまくろう!【チャットワーク】【backlog】

こんにちは!bibiです。

日々のコミュニケーションツール、活用していますか?

メールでやり取りを積み重ねているあなた!

電話で話したリマインドをメールで共有しているあなた!!

あの時の内容が乗っているメールどこだっけ・・・?
いつの電話であの案件のその内容、話したっけ・・・?

そんなことにならないように、やり取りができるクラウドのご紹介です!
もちろんっ全部無料!!

1.slack
使いやすさ★★★☆☆
共有しやすさ★★★☆☆
使い込み度★★★☆☆
https://slack.com/intl/ja-jp
UIはお洒落で、直感的に使えるので、相手とのやり取りに最適!
ただ、海外発のツールなせいか、シンプルすぎて素っ気ないと思うところもありますね。。

2.google drive (+スプレッドシート)
使いやすさ★★★★☆
共有しやすさ★★★★★
使い込み度★★★★★
https://www.google.com/intl/ja_ALL/drive/
グーグルに登録していれば誰でも使えます!
ドライブで素材受け渡しは容量多く使え、スプレッドシートではほぼエクセルを、クラウドで共有できます。
クライアントとのやり取りやイメージの共有、議事録共有など、これさえあればメールなんて何それ美味しいの?という感じです!

3.サイボウズ
使いやすさ★★★☆☆
共有しやすさ★★★☆☆
使い込み度★★★★☆
https://cybozulive.com
グループチャット、スケジュール管理、Todoリスト、共有フォルダなど、多機能で使い勝手がいいこのツール。
惜しむらくは、2019年4月にサービス終了との事・・・

4.backlog
使いやすさ★★★☆☆
共有しやすさ★★★★☆
使い込み度★★★★★
https://backlog.com/ja/
タスク管理・進捗管理などを多用するならこれ!元からgitが組み込まれているなど、諸々機能があるのでいろいろやりたい方はおススメ!
ただ、無料バージョンだとそこそこ制限がかかるので、ある程度使い込んだ後に有料化してもいいかも。。

5.チャットワーク
使いやすさ★★★★★
共有しやすさ★★★★☆
使い込み度★★☆☆☆
https://go.chatwork.com/ja/
グループチャット、ファイル共有、それに加えてユーザー追加もしやすく、かゆいところに手が届きまくっているツール!
直感的に把握しやすいため、とっかかり~中級者は愛用間違いなしです!
ただこれも、無料版だとグループ作成制限などあるので、使い込む場合は有料版をお勧めします。

僕は先方とのやりとりはgoogle driveのスプレッドシートちゃん、社内での案件共有はチャットワークちゃんと、使い分けております!

皆様も自分に合ったクラウドツールを使って、快適なWEBライフを☆彡

【Unity】プログラム設計 decoratorパターン!【getComponent】【PHP】

こんばんわ!!(^o^)

今日はプログラム設計の1つ decoratorパターンについてだよ!

Unity触ってる人なら絶対触ったことあるはずのGetComponentはこのdecoratorパターンの概念が使われているのだ!!!(^o^)

と言うわけでGetComponent知ってる人はなんとなくわかるだろうけど、decoratorパターンの概要から実際に簡単な実装までを紹介するよ!

1、decoratorパターンとは
あるオブジェクトに機能を追加したいときに動的に追加できる設計!
今回の実装ではやってないけど動的に機能を削除することもできます!!(^o^)

唐突な仕様変更の対応にも心強い。。。けど唐突な仕様変更はなるべくやめて😭😭

2、実際にどんな場面で使うの🤔
個人的にはこの設計見たときにゲームでいうならキャラクターの装備機能とかにいいのではって思ってます(^o^)
オブジェクトの機能、状態がよく変わるような仕様の場合はこのdecoratorパターンがいいんじゃないかなあ🤔

3、実際に実装してみよう🤔
実際に実装してみよう!ってことで、簡単に仕様的なの
1、好きな顔文字をベースに手をつけたい 
(^u^)/ ← こんな感じに手付ける
2、色がついてるもの、ついてないものと表示させたい

上記の感じで顔文字オブジェクトをベースに記号を付与したり、色をつけたりという機能をつけていきます!

UnityのGetComponentのイメージだとすぐやり方思い浮かびますね!GameObjectを用意してColorコンポーネントつけてTextコンポーネントつけて〜って感じになると思います!

でもGetComponentの機能がないとどう実装すればいいのでしょう??🤔🤔

このパターンを知らないと、おそらくフラグ変数を何個か使って、if文またはcase文で顔文字の状態を確認しながら機能を追加〜〜ってなっていくと思います。他にも機能追加の依頼が来たらフラグ変数も増やして、条件分岐増やして中に処理を書いて〜〜と。。

よく言われる拡張、保守の難しいゴリ押しプログラムになりますね🤔🤔🤔
UnityでもGetComponentで対応できる範囲を越えると、余裕もなくてこういうプログラムになっちゃう人もいると思います!(自分のことです!)

それを回避するためにもdecoratorパターンです!

では実際のコード!PHPです..

 

 

まずはオブジェクト指向の真髄!抽象メソッドの定義!インターフェースと抽象クラスの説明いつかしたほうがいいかな。。。
今回は顔文字の取得とセットだけです!

Component.php

interface Component { public function getEmotion(); public function setEmotion($emotion); } 

次はComponentインターフェースを使って、emotion(顔文字)の取得とセットできるSmileyクラスです!
Smiley.php

require_once('Component.php');

class Smiley implements Component {
    private $emotion = null;

    public function getEmotion() {
        return $this->emotion;
    }

    public function setEmotion($emotion) {
        $this->emotion = $emotion;
    }
}

次にComponentインターフェースを継承してDecoratorクラスを作成です。
このDecoratorを継承して機能(今回でいう色を変えたり、手をつけたりする)クラスを書いていきます!
Decorator.php

require_once('Component.php');
abstract class Decorator implements Component {
    private $compo;

    public function __construct(Component $compo) {
        $this->compo = $compo;
    }

    public function getEmotion() {
        return $this->compo->getEmotion();
    }

    public function getComponent() {
      return get_class($this->compo);
    }

    public function setEmotion($emotion) {
        $this->compo->setEmotion($emotion);
    }

    // コンポーネント名を返す
    public function getClassName() {
        echo get_class($this) , "\n";
    }
}

Decoratorという抽象クラスを継承して手をつけるコンポーネント、AddHandsComponentを作ります
AddHandsComponent.php

require_once('Decorator.php');
class AddHandsComponent extends Decorator {

    // 手をつける
    public function getEmotion() {
        $emotion = parent::getEmotion();
        return "٩". ($emotion) ."ノ";
    }

}

次はAddHandsComponentと同じようにカラーを変える(今回めんどくなって青色固定😠)ChangeColorComponent作成です
ChangeColorComponent.php

require_once('Decorator.php');
class ChangeColorComponent extends Decorator {
    public function getEmotion() {
        $emotion = parent::getEmotion();
        $emotion="<FONT COLOR=\"BLUE\">".$emotion."</FONT>";
        return $emotion;
    }

}

と!ここで機能追加依頼が!!!!!!

顔文字によくある(^o^)の中の英文字を大文字にして口が開くようにしよう!!

察しのいい人はお気づきでしょうが、小文字を大文字にするクラスを作るだけでいいのです!この結合性の低さがミソですね!

というわけで口を開けるクラス
OpenMouthComponent.php

require_once('Decorator.php');
class OpenMouthComponent extends Decorator {

    // 小文字を大文字に変換して返す
    public function getEmotion() {
        $emotion = parent::getEmotion();
        return strtoupper($emotion);
    }

}

はい!できました〜!(^o^)

あとはメイン処理でこれらを動作させましょう!
index.php

require_once('Smiley.php');
require_once('OpenMouthComponent.php');
require_once('AddHandsComponent.php');
require_once('ChangeColorComponent.php');

//顔文字を生成 & セット
$compo_obj = new Smiley();
$compo_obj->setEmotion("(^o^)");

// 口を開かせる(oを大文字にしてるだけ)
$OpenMouth_obj = new OpenMouthComponent($compo_obj);
echo $OpenMouth_obj->getEmotion() . " < ";
// 使っているコンポーネント取得
echo $OpenMouth_obj->getClassName() . "
";
echo "
";

// 顔文字に手を付ける
$AddHands_obj = new AddHandsComponent($compo_obj);
echo $AddHands_obj->getEmotion() . " < ";
// 使っているコンポーネント取得
echo $AddHands_obj->getClassName() . "
";
echo "
";

// 色を変える
$ChangeColor_obj = new ChangeColorComponent($compo_obj);
echo $ChangeColor_obj->getEmotion() . " < ";
// 使っているコンポーネント取得
echo $ChangeColor_obj->getClassName() . "
";
echo "
";

// 口を開かせ、かつ手を付ける
$deco_obj1 = new AddHandsComponent(new OpenMouthComponent($compo_obj));
echo $deco_obj1->getEmotion() . " < ";
echo "口を開かせ、かつ手を付けたよ". "
";
echo "
";

// 全部のコンポーネントをつける
$deco_obj2 = new ChangeColorComponent(new AddHandsComponent(new OpenMouthComponent($compo_obj)));
echo $deco_obj2->getEmotion() . " < ";
echo "口を開かせ、手を付けて色も変えたよ!". "
";
echo "
";

実行結果!!

はい!めっちゃ簡素ですができてますね!
index.phpみてわかると思うのですが、重ねてインスタンス化することで機能を簡単に混ぜることもできます!UnityのComponentも裏の根幹部分は似たような概念が使われているはずです!!

ちなみに条件分岐もしないで同じメソッド名なのに、なんで違う挙動起こるんだってのはインターフェースや抽象クラスを調べて見てね!(今度この辺書くかもだけど)

この設計デザインパターンは汎用性高いと思うのでぜひ使って見てね〜(^o^)ノ

【apache】何もしてないのにページが表示されなくなった時の解決策!【Linux】

こんにちは!河条です!!

先日、急にテストサーバーのwebページが表示されなくなるという不具合発生・・・!

原因を探って見るとどうもサーバー内のキャッシュが増えていたのが原因だったようです

でもLinuxサーバーのキャッシュの確認とキャッシュクリアってどうやるんだろ・・・🤔🤔🤔🤔😨🤔

ということで本日は
Linuxサーバーのキャッシュの確認とキャッシュクリア
についてです!☺️

まずはキャッシュの確認です😌
サーバーに入り、freeと入力しましょう

赤く表示したところがキャッシュのところですね🤔

では次にキャッシュクリアのコマンドです😯

これでキャッシュクリアされたかみてみましょう😌

ご覧の通りbuff/cacheが減っていますね!

ただ完全に0になるわけではないようです。キャッシュにもページキャッシュとバッファキャッシュと種類があるようなのでそこらへんが関係しているのでしょうか🤔(調査中)

ともかく今回は、ページが突然表示されなくなって困ったサーバー運用者は一度キャッシュクリアを試してみては!という記事でしたー😂
それではー😀

MacとEclipseでJavaプロジェクトを作成しよう!①〜EclipseのDLから画面表示まで〜

こんにちは。tutinokoです。

前回はちょっとデザインぽい話だったので、今回はEclipseでJavaのプロジェクトを作ってローカル画面に表示させるところまでやりたいと思います。

今まで組織のシステムの機能の一部を作ったり、テストしたり、みたいなことしかしてなかったので、今いろいろ勉強しながらいろいろやってます。

初歩的なことなのですが、今この部屋にJavaを使える人は自分しかいないので、手順書がわりになればいいかなと・・・

今回Macでの作業ですが、大体のところはWinでも同じ操作になるので、そこは臨機応変に読み替えてくださいね!
長くなりますよ・・・

まず、Eclipseをインストールしましょう。
Eclipse本サイトからDLすると、最初は全て英語になっているので、後からプラグインを追加して日本語化するという手順になりますが
Pleiadesという日本語化プラグインを配布しているサイトのPleiades All in OneをDLすると、初めから便利にカスタマイズされた日本語化されているEclipseが使えるようになるので、オススメです!
http://mergedoc.osdn.jp

2018/3/23現在、最新のEclipseは4.7なので、特に理由がなければ最新をDLでよいと思います。

リンクをクリックするといっぱーいDownlordボタンが並んでいるので・・・

今回はJavaの環境が欲しいので、お使いのOSの(Winの方はbit数を調べてくださいね)今回はFull EditionをDLしましょう!

Full Editionはインストール後の環境変数の設定まで勝手にやってくれるらしいので、難しいこと考えなくて済みます!

DLが終わったら、ファイルを解凍して、案内に従ってアイコンをドラッグ&ドロップします。

できたらApplicationsのEclipseアイコンをクリックして立ち上げます。

どのワークスペースを使用するか聞かれます。このまま起動ボタンを押しましょう。

最初のワークスペースはこんな感じです。何もないです。
私はこの配置が使いづらいので、パースペクティブを変更しちゃいます。

 右上のこのアイコンをクリックします。

Java EEを選択します。

ワークスペースの見た目が変わりました。
それから私は、赤枠で囲ってあるタブや項目は使わないので閉じちゃいます。

ここまでは環境構築です。

次は実際にプロジェクト作ってみましょう!

左側のプロジェクトエクスプローラー内で右クリック→「新規」→「動的Webプロジェクト」を選択。

プロジェクト名を決めます。通常はこのプロジェクト名がローカルで表示させるためのURLの一部になります。コンテキストルートといいます。

それから、以下を設定します。
・ターゲットランタイム:Tomcat8
・動的webモジュールバージョン:3.1
・構成:Tomcat8

プロジェクトを動かすためのアプリケーションサーバは、今回はEclipseにデフォルトで入っているTomcat8を使用します。

次へ> ボタンをクリックします。

そのまま 次へ> をクリックします。

完了 をクリックします。

はい!プロジェクトの骨組みができあがりました!簡単です!

このままだと本当に何もないので、画面に表示させる何かを作りましょう。
今回はJSPファイル(Javaも書けるhtmlファイルと思えばいいです)を作ります。
プロジェクトを開いて、WebContentフォルダの上で右クリック→「新規」→「JSPファイル」をクリック。

ファイル名を決めます。最初の入り口になるので、index.jspでよいでしょう。

ファイル名を入力したら「次へ>」をクリック。

ファイルのテンプレートを選びます。今回はただのhtmlファイルでよいでしょう。

「完了」を押します。

ファイルが作られました!

<body>〜</body>の中に何か適当に入力しましょう。

今回私は

と書きました。<title>〜</title>も適当に変更してます。

ファイルを保存したら、いよいよ画面に表示させましょう!

プロジェクトエクスプローラのプロジェクトの上で右クリック→「実行」→「1 サーバーで実行」をクリック。

初回なので、サーバーを選択します。

プロジェクトを作成した時に、Tomcat8を選択したので「Tomcat v8.0 サーバー」を選択しましょう。

「このプロジェクトを実行するときは常にこのサーバーを使用」にチェックを入れると、以降はこの操作がなくなります。

「次へ>」をクリックします。

プロジェクトを選択して「追加>」して「構成済み」に移動させます。

終わったら「完了」ボタンを押します。

サーバータブ(右下)が [始動済み、同期済み] の表示になってれば、サーバーが起動しています。

http://localhost:8080/〇〇〇〇(プロジェクト名)にアクセスしてみましょう。

無事に表示されました!お疲れ様です!!

ざっと駆け足で、それでもこんなに長い記事になってしまいましたが、これでJavaの入り口に立つことができました。

次は実際にJavaのプログラムファイルを作って表示させるところを説明できればよいかなと思います。

お粗末様でした。